@font-face {
    font-family: 'Roboto Slab';
    src: url('robotoSlab.woff') format('woff');
}

#_GLOBAL_VARIABLES {}

:root {
    --vh: calc(100vh * .01);
    --vw: calc(100vw * .01);
    /* Material Design Colors */
    /* https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=006EB6&secondary.color=FFC328 */
    /* https://material.io/design/color/the-color-system.html#tools-for-picking-colors */
    /* Primary colors: app bars */
    /* Secondary colors: accents on components such as FABs and selection controls */
    /* Background: behind scrollable content */
    /* Surface: surface of components such as cards, sheets, and menus */
    /* Error: such as text fields with inaccurate input #b00020; */
    /* On-colors: how text, icons, and strokes appear on theme colors */
    /*  */
    /* Default: BYU-PW Gold. See settings.js for more */
    --primary: #ffc328;
    --primaryLight: #FED77E;
    --on-primary: #52534B;
    --secondary: #BCBEC0;
    --secondaryLight: #E6E7E8;
    --on-secondary: #2F302C;
    --hyperlink: #065577;
    --hyperlinkLight: #3793ab;
    /* Default: Light */
    --surface: #F7F8F8;
    --on-surface: #4b4b4b;
    --secondary: #d6d7d8;
    --secondaryLight: #E6E7E8;
    --on-secondary: #2F302C;
    --error: #E42226;
    --on-error: #F7F8F8;
    --success: #6b9d41;
    --on-success: #F7F8F8;
    --reward: #ffcc00;
    /* App Settings */
    --transitionDelay: .5s;
    /* --appFont: "Nunito", sans-serif; */
    --appFont: "Open Sans", sans-serif;
    --appFontSize: 14px;
    --appLineHeight: 1.5rem;
    /* --crsFont: "Open Sans", Arial, Helvetica, sans-serif; */
    /* --crsFontHeading: "Roboto Slab", serif; */
    /* --crsFont: "Times New Roman", Georgia, serif; */
    /* --crsFontHeading: "Open Sans", Arial, Helvetica, sans-serif; */
    --crsFont: "Open Sans", Arial, Helvetica, sans-serif;
    --crsFontHeading: "Times New Roman", Georgia, serif;
    --crsFontSize: 18px;
    --crsLineHeight: 2rem;
    --smallLineHeight: 1rem;
    /* Height of nav bars and buttons; bigger on mobile. */
    --barHeight: 4rem;
    --buttonHeight: 3rem;
    /* Colors as rgba parameters to allow for highlight opacity calculation */
    --red: 172, 31, 35;
    --orange: 203, 96, 40;
    --yellow: 255, 205, 3;
    --green: 107, 157, 65;
    --blue: 25, 71, 147;
    --purple: 99, 23, 78;
    --highlightOpacity: .25;
    --underlineOpacity: .8;
    --masteryBarHeight: 2rem;

    --devDisplay: none;
}

#_GENERAL_STYLES {}

#llHtml {
    margin: 0;
    box-sizing: border-box;
    /* min-height: 100vh; */
    /* height: -webkit-fill-available; */
    font-size: var(--appFontSize);
    line-height: var(--appLineHeight);
    scrollbar-color: var(--secondary) var(--secondaryLight);
    scrollbar-width: thin;
    /* scrollbar-face-color: var(--on-secondary);
    scrollbar-base-color: var(--secondary);
    scrollbar-3dlight-color: var(--secondary);
    scrollbar-highlight-color: var(--secondary);
    scrollbar-track-color: var(--secondaryLight);
    scrollbar-arrow-color: var(--secondaryLight);
    scrollbar-shadow-color: var(--secondary);
    scrollbar-dark-shadow-color: var(--secondary); */
}

::-webkit-scrollbar {
    width: 8px;
    height: 10px;
    background-color: var(--secondary);
}

::-webkit-scrollbar-button {
    height: 0px;
    background-color: var(--surface);
}

::-webkit-scrollbar-track {
    background-color: var(--secondaryLight);
}

::-webkit-scrollbar-track-piece {
    background-color: var(--secondaryLight);
}

::-webkit-scrollbar-thumb {
    height: 50px;
    background-color: var(--secondary);
    /* border-radius: 3px; */
}

::-webkit-scrollbar-corner {
    background-color: var(--secondary);
}

::-webkit-resizer {
    background-color: var(--secondary);
}

#llBody {
    overflow-y: hidden;
    overflow-x: hidden;
    height: 100vh;
    /* min-height: 100vh; */
    /* min-height: -webkit-fill-available; */
    margin: 0;
    box-sizing: border-box;
    text-align: left;
    /*default if var doesn't work on llApp*/
    color: #4b4b4b;
    border: 2px solid var(--primary);
}

#llBody textarea#con {
    display: none;
}

#llBody textarea#con.active {
    display: block;
    box-sizing: border-box;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--barHeight);
    border: 2px solid var(--primary);
    background-color: var(--surface);
    color: var(--on-surface);
    resize: vertical;
}

.headline {
    font-family: "Times New Roman", Georgia, serif;
    font-size: 3rem;
    font-style: italic;
}

#llApp button {
    border: 0;
    -webkit-user-select: none;
    user-select: none;
    color: var(--on-secondary);
    background-color: var(--secondary);
}

#llApp button:hover {
    background-color: var(--secondaryLight);
}

#llApp input[type=text],
#llApp input[type=search],
#llApp select {
    height: 70%;
    padding: 4px;
    padding-left: 7px;
    color: var(--on-surface);
    background-color: var(--surface);
    border: 1px solid var(--secondary);
    border-radius: 2px;
    outline-color: var(--primary);
    margin: .5rem;
    min-width: 1rem;
    font-size: large;
}

#llApp textarea,
#mainContent textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 8rem;
    padding: 4px;
    background-color: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--secondary);
    outline-color: var(--primary);
    font-family: var(--appFont);
    font-size: large;
    line-height: var(--appLineHeight);
    resize: none;
}

.txtSearch {
    flex: 1;
    margin: .5rem;
}

#llApp div.bar.secondary,
#llApp .button.secondary,
#llApp div.bar.secondary>.colContainer>.button {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

#llApp .button.secondary:hover,
#llApp .button.secondary:focus,
#llApp div.bar.secondary>.colContainer>.button:hover,
#llApp div.bar.secondary>.colContainer>.button:focus {
    background-color: var(--secondaryLight);
    color: var(--on-secondary);
    outline: 0;
}

#llApp div.bar.surface {
    border-bottom: 1px solid var(--secondary);
}

#llApp div.bar.surface,
#llApp .surface .button {
    color: var(--on-surface);
    background-color: var(--surface);
}

#llApp .surface .button:hover {
    background-color: var(--secondaryLight);
}

.blank {
    flex: 1;
}

.blankBtn {
    /* flex: 1; */
    display: inline-block;
    min-width: var(--buttonHeight);
    box-sizing: border-box;
}

#llApp div.selectUserTitle {
    padding: 2rem;
    text-align: center;
    font-size: x-large;
    font-weight: bold;
    line-height: 1.25;
}

#llApp .bar #avatar {
    display: inline-block;
    box-sizing: border-box;
    border-radius: 50%;
    border: 3px solid var(--primaryLight);
    padding: 0;
    width: var(--buttonHeight);
    overflow: hidden;
    line-height: calc(var(--buttonHeight) - 4px);
    text-align: center;
    font-weight: bold;
}

#avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#avatarLabel {
    text-align: right;
    padding-right: .5rem;
}


/*
See Content Image section

.right,
.right * {
    float: right;
}

.left {
    float: left;
}

.center {
    text-align: center;
} */

.noscroll {
    overflow-y: hidden;
}

#llApp .hideOnMobile {
    display: none;
}

#_LOADERS_SPINNERS {}

.loader {
    display: none;
    position: absolute;
    top: calc(50% - 2rem);
    left: calc(50% - 2rem);
    /* background-color: var(--surface); */
    height: 3rem;
    width: 3rem;
    border: .5rem solid var(--primary);
    border-top: .5rem solid var(--secondary);
    font-family: 'icon';
    border-radius: 50%;
}

.loader.active {
    display: block;
    animation: spin 1s linear infinite;
}

.loader i {
    height: 6rem;
    width: 6rem;
    font-size: 6rem;
}

.spin::after {
    position: absolute;
    /* top: 0; */
    left: -2rem;
    display: inline-block;
    content: "\e982" !important;
    font-family: icon;
    font-size: 1.15rem;
    animation: spin 2s linear infinite;
    background-color: var(--surface);
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    text-align: center;
    border-radius: 50%;
}

.actionBtn.spin::after {
    top: 0.5rem;
    left: 0.5rem;
}

.actionBtn.spin:hover::after {
    background-color: var(--hyperlink);
    color: var(--surface);
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


#_BASIC_LAYOUT {}

#llApp {
    margin: 0;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    /* height: 100vh; */
    /* height: 100%; */
    width: 100%;
    background-color: var(--surface);
    color: var(--on-surface);
    font-family: var(--appFont);
}


/* ToDo: Change to bottomPanel */

.bottomPanel {
    position: relative;
    flex: 1;
    max-height: 0;
    z-index: 200;
    margin: 0;
    box-sizing: border-box;
    transition: max-height var(--transitionDelay) ease-in-out;
}

.bottomPanel.open {
    /* max-height: 9rem; */
    max-height: calc(var(--barHeight) *3);
}

#referencePanel {
    position: relative;
    flex: 1;
    max-height: 0;
    z-index: 200;
    margin: 0;
    box-sizing: border-box;
    transition: all var(--transitionDelay) ease-in-out;
    background-color: var(--secondary);
    /* padding: 1rem; */
}

#referencePanel.open {
    /* max-height: 9rem; */
    border-top: 1px solid var(--secondary);
    max-height: 50%;
}

#referencePanel .content {
    padding: 1rem;
}

.leftPanel {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 0;
    box-sizing: border-box;
    transition: min-width var(--transitionDelay) ease-in-out;
}

.leftPanel.open {
    min-width: 0;
    max-width: 0;
}

.leftDrawer {
    position: absolute;
    left: -300px;
    /* left: -100vw; */
    top: 0;
    width: 300px;
    /* width: 100vw; */
    height: 100%;
    background-color: var(--surface);
    border-right: 2px solid var(--secondary);
    z-index: 900;
    margin: 0;
    box-sizing: border-box;
    transition: left var(--transitionDelay) ease-in-out;
}

.leftPanel.open .leftDrawer {
    left: 0;
}

.centerPanel {
    position: relative;
    flex: 1;
    min-width: 300px;
    padding: 0rem 0rem;
    margin: 0;
    box-sizing: border-box;
}

.rightPanel {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 0;
    margin: 0;
    box-sizing: border-box;
    transition: min-width var(--transitionDelay) ease-in-out;
}

.rightPanel.open {
    max-width: 0px;
}

.rightDrawer {
    position: absolute;
    right: -300px;
    top: 0;
    width: 300px;
    height: 100%;
    background-color: var(--surface);
    border-left: 2px solid var(--secondary);
    z-index: 800;
    margin: 0;
    box-sizing: border-box;
    transition: right var(--transitionDelay) ease-in-out;
}

.rightPanel.open .rightDrawer {
    right: 0;
}

.content {
    flex: 1;
    padding: .5rem;
    /* margin: 1rem; */
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    align-items: stretch;
    box-sizing: border-box;
}

.content p {
    padding-bottom: 1rem;
}

.padding {
    padding: .5rem;
}

#centerTopBar {
    min-height: var(--barHeight);
    max-height: var(--barHeight);
    transition: max-height var(--transitionDelay) ease-in-out;
}

#centerTopBar.hidden {
    min-height: 0;
    max-height: 0;
    transition: max-height var(--transitionDelay) ease-in-out;
}

#llApp .centerPanel .pageTitle,
#llApp .centerPanel .bookTitle {
    display: block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
}

#llApp .centerPanel .pageTitle {
    line-height: 2rem;
}

#llApp .centerPanel .pageTitle.single {
    line-height: 3rem;
}

#llApp .centerPanel .bookTitle {
    top: -8px;
    line-height: 1.5rem;
    font-size: smaller;
    font-style: italic;
}

#tabContentReader {
    position: relative;
}

#llApp div.mainScroll {
    position: relative;
    flex: 1;
    /* padding: .5rem; */
    /* margin: 1rem; */
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    align-items: stretch;
    box-sizing: border-box;
    /* display: none; */
    /* For sliding Transition? */
    box-shadow: 5px 0 5px var(--secondary), -5px 0 5px var(--secondary);
}

#llApp div.current>div.mainScroll {
    display: block;
}

#mainContent {
    position: relative;
    font-family: var(--crsFont);
    font-size: var(--crsFontSize);
    background-color: var(--surface);
    color: var(--on-surface);
    max-width: 600px;
    min-height: 1px;
    margin: 0px auto 0px auto;
    padding: 2rem;
    padding-left: 2.25rem;
    box-sizing: border-box;
}

div.mainScroll div.fullwidth {
    max-width: 100%;
}

#mainContent .banner {
    margin: -2.5rem -2.5rem 0 -2.75rem
}

#mainContent .banner img {
    max-width: 100%;
    width: 100%;
}

#mainContent .signIn {
    box-sizing: border-box;
    margin-top: 2rem;
    width: 100%;
}

#mainContent .signIn label {
    box-sizing: border-box;
    margin: .5rem;
    font-family: var(--appFont);
    font-size: small;
}

#mainContent .signIn input {
    box-sizing: border-box;
    margin: .5rem;
    height: 2.5rem;
    width: calc(100% - 1.5rem);
    font-size: large;
}

#mainContent .signIn>div>button {
    margin-right: 1rem;
}

#mainContent #vsiCode {
    letter-spacing: 3px;
    text-transform: uppercase;
}

#mainContent p,
#mainContent li {
    position: relative;
    line-height: var(--crsLineHeight);
    padding-bottom: 1rem;
}

#mainContent ol>ol {
    list-style-type: lower-alpha;
}


/* Main Content styles. Leave off #mainContent specificity so epub 
* style sheet can override these defaults. Add specificity where this style sheet 
* needs to override epub style. */


/* #mainContent h1 { */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--crsFontHeading);
}

h1 {
    position: relative;
    font-size: 2em;
    font-weight: normal;
    line-height: 1.5em;
    padding-bottom: 3.5em;
    /* color: var(--hyperlink); */
}

h2 {
    position: relative;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1.5em;
}

h3 {
    position: relative;
    font-family: var(--crsFont);
    font-size: 1.3em;
    font-weight: normal;
    font-style: italic;
    line-height: 1.5em;
}

h4 {
    font-family: var(--crsFontHeading);
    font-weight: bold;
}

h5 {
    font-family: var(--crsFont);
    font-weight: bold;
}

h6 {
    font-family: var(--crsFont);
    font-weight: bold;
    font-style: italic;
}

strong.i {
    font-style: italic;
}

a {
    position: relative;
    color: var(--hyperlink);
    word-wrap: break-word;
}

a:hover {
    color: var(--hyperlinkLight);
}

a[href*="//"]:not([href*="byupathway.org/study"]):not([href*="localhost"]):not(.actionBtn),
a[href*="mailto"],
a.courseLink {
    text-decoration: underline double;
}

a.embedPage {
    display: block;
    margin: -1rem;
    padding: 1rem;
    color: var(--on-secondary);
    background-color: var(--secondaryLight);
    border-radius: .25rem;
    border: 1px dashed var(--on-secondary);
}

p.indented {
    margin-left: 2rem;
}

p.rightQuote,
p.leftQuote {
    padding: 1rem;
    margin: 0 1rem 1rem 1rem;
    width: 200px;
    max-width: 40%;
    font-style: italic;
    color: var(--on-secondary);
    background: var(--secondary);
}

p.leftQuote {
    float: left;
    margin-left: 0;
}

p.rightQuote {
    float: right;
    margin-right: 0;
}


/* Action Buttons */

#llApp a.actionBtn,
#llApp button.actionBtn {
    display: inline-block;
    margin: .5rem;
    border: 1px solid var(--hyperlink);
    border-radius: .5rem;
    padding: 0 1rem;
    height: var(--buttonHeight);
    line-height: var(--buttonHeight);
    font-family: var(--appFont);
    font-size: var(--crsFontSize);
    text-decoration: none;
    color: var(--hyperlink);
    background-color: var(--surface);
}

#llApp a.actionBtn.solid,
#llApp button.actionBtn.solid {
    color: var(--surface);
    background-color: var(--hyperlink);
}

#llApp a.actionBtn::before,
#llApp button.actionBtn::before {
    margin-right: .5rem;
    margin-left: -.25rem;
}

#llApp a.actionBtn:not(:disabled):not(.disabled):hover,
#llApp button.actionBtn:not(:disabled):not(.disabled):hover {
    color: var(--surface);
    background-color: var(--hyperlink);
}

#llApp a.actionBtn.solid:not(:disabled):not(.disabled):hover,
#llApp button.actionBtn.solid:not(:disabled):not(.disabled):hover {
    filter: brightness(1.3);
}

/* #llApp a.actionBtn:focus,
#llApp button.actionBtn:focus, */
#llApp :focus {
    outline: 2px solid var(--primary);
}

#llApp a.actionBtn.disabled,
#llApp button.actionBtn.disabled,
#llApp button.actionBtn:disabled {
    opacity: .5;
    filter: saturate(0);
    -webkit-user-select: none;
    user-select: none;
}

#llApp a.actionBtn.markDone:before {
    content: "\e95c";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
}

#llApp a.actionBtn.courseAssignment,
#llApp a.actionBtn.courseEvaluation {
    border-width: 4px;
    border-style: double;
}

#llApp a.actionBtn.courseAssignment:before {
    content: "\e95a";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
}

#llApp a.actionBtn.courseEvaluation:before {
    content: "\e94d";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
}

#llApp a.actionBtn.done {
    color: var(--on-success);
    background-color: var(--success);
    border-color: var(--on-success);
}

#llApp a.actionBtn.done:before {
    content: "\e91a";
}

#llApp div.conceptTable table.hiddenTable {
    display: none;
}

#llApp .conceptTable button {
    display: inline-block;
    border: 1px solid var(--hyperlink);
    padding: 0 1rem;
    height: var(--buttonHeight);
    line-height: var(--buttonHeight);
    text-decoration: none;
}

#llApp .conceptTable button::before {
    position: relative;
    top: -.3rem;
    /* padding-right: .5rem; */
    margin-left: -.25rem;
}

#llApp .conceptTable button:hover {
    color: var(--surface);
    background-color: var(--hyperlink);
}

#llApp div.conceptTable img {
    height: var(--buttonHeight);
    border-radius: .5rem;
}

#mainContent img,
#mainContent svg,
iframe {
    max-width: 100%;
    width: auto;
    height: auto;
    vertical-align: middle;
}

figure {
    border: 1px solid var(--secondary);
}

figcaption {
    font-size: smaller;
    font-style: italic;
}

.left {
    float: left;
    display: block;
    margin: 12px 15px 12px 0;
}

.center {
    display: block;
    margin: 12px auto;
    text-align: center
}

.right {
    float: right;
    display: block;
    margin: 12px 0 12px 15px;
}

.full {
    width: 100%;
}

.half {
    width: 50%;
}

.quarter {
    width: 25%;
}

.sanded {
    border-radius: .5rem;
}

.rounded {
    border-radius: 1rem;
}

.oval {
    border-radius: 50%;
}

table {
    border-collapse: collapse;
}

table,
th,
td {
    border: 1px solid var(--secondary);
}

th,
td {
    padding: 1rem;
}

th p,
td p {
    margin: 0;
}

#llApp .alignRight {
    text-align: right;
}

#llApp .alignCenter {
    text-align: center;
}

#llApp .noMargin {
    margin: 0;
}

#llApp .feedbackForm {
    display: none;
}

#llApp .feedbackForm.active,
#llApp .settingContent .feedbackForm {
    display: block;
}

#llApp #mainContent button.btnFeedback {
    position: absolute;
    right: 0;
    bottom: 0;
}

#llApp .btnFeedback.clicked,
#llApp .settingContent .btnFeedback {
    display: none;
}

#llApp .feedbackForm p {
    margin: 0;
    padding: 0;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-weight: bold;
}

#llApp div.form .ratingScale button {}

#mainContent .marked {
    /* see scratch/mark.html */
    border-left: .25rem solid var(--primaryLight);
    padding-left: .5rem;
    margin-left: -.75rem;
}

#mainContent mark {
    color: inherit;
    text-decoration: inherit;
}

#mainContent mark.selected {
    background-color: highlight;
    color: highlighttext;
}

#mainContent button.marginBtn {
    position: absolute;
    inset-inline-end: -2rem;
    transform: translate(0, -.5rem);
    padding: 0;
    border: 0;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    color: var(--on-surface);
    background-color: transparent;
    box-shadow: none;
    cursor: pointer;
}

#mainContent button.marginBtn:hover {
    background-color: var(--secondaryLight);
}

#mainContent button.marginBtn.leftMargin {
    inset-inline-end: unset;
    inset-inline-start: -2.5rem;
}

#mainContent .highlight-red {
    background-color: rgba(var(--red), var(--highlightOpacity));
}

#mainContent .highlight-orange {
    background-color: rgba(var(--orange), var(--highlightOpacity));
}

#mainContent .highlight-yellow {
    background-color: rgba(var(--yellow), var(--highlightOpacity));
}

#mainContent .highlight-green {
    background-color: rgba(var(--green), var(--highlightOpacity));
}

#mainContent .highlight-blue {
    background-color: rgba(var(--blue), var(--highlightOpacity));
}

#mainContent .highlight-purple {
    background-color: rgba(var(--purple), var(--highlightOpacity));
}

#mainContent .underline-red {
    background-color: transparent;
    box-shadow: rgba(var(--red), var(--underlineOpacity)) 0px 2px 1px;
}

#mainContent .underline-orange {
    background-color: transparent;
    box-shadow: rgba(var(--orange), var(--underlineOpacity)) 0px 2px 1px;
}

#mainContent .underline-yellow {
    background-color: transparent;
    box-shadow: rgba(var(--yellow), var(--underlineOpacity)) 0px 2px 1px;
}

#mainContent .underline-green {
    background-color: transparent;
    box-shadow: rgba(var(--green), var(--underlineOpacity)) 0px 2px 1px;
}

#mainContent .underline-blue {
    background-color: transparent;
    box-shadow: rgba(var(--blue), var(--underlineOpacity)) 0px 2px 1px;
}

#mainContent .underline-purple {
    background-color: transparent;
    box-shadow: rgba(var(--purple), var(--underlineOpacity)) 0px 2px 1px;
}

.shield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    /* height: 100vh; */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    background-color: #0d0f1000;
    /* transition: background-color var(--transitionDelay) ease-in-out; */
    pointer-events: none;
    visibility: hidden;
}

.leftShield {
    z-index: 899;
}

.rightShield {
    left: -100vw;
    z-index: 799;
}


/* .open>.shield { */

.shield.active {
    background-color: #0d0f1080;
    pointer-events: auto;
    visibility: visible;
}


/* CONTAINERS AND BARS */

.container {
    position: relative;
    flex: 1;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.colContainer {
    display: flex;
    /* position: relative; */
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

.colItem {
    flex: 1;
}

.rowContainer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

.flexRow {
    flex: 1;
}

div.bar {
    position: relative;
    /* display: block; needs to be display:flex or have child colContainer */
    flex-shrink: no;
    background-color: var(--primary);
    overflow: hidden;
    height: var(--barHeight);
    min-height: var(--barHeight);
    line-height: var(--barHeight);
    color: var(--on-primary);
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

div.bar.thin {
    height: calc(var(--barHeight) * .75);
    min-height: calc(var(--barHeight) * .75);
    line-height: calc(var(--barHeight) * .75);
}

#llApp div.bar.thin button.button {
    height: calc(var(--barHeight) * .75);
    min-height: calc(var(--barHeight) * .75);
    width: calc(var(--barHeight) * .75);
    min-width: calc(var(--barHeight) * .75);
    line-height: calc(var(--barHeight) * .75);
}

div.bar.sticky {
    position: sticky;
}

div.clear {
    background-color: initial;
}

#_SCROLLTABLE {}

.scrollTable {
    position: relative;
    width: fit-content;
    max-width: 100%;
    max-height: 100%;
    overflow: auto;
    border: 1px solid var(--secondary);
}

.scrollTable>table {
    position: relative;
    border-spacing: 0;
    /* border-collapse: collapse; */
    table-layout: fixed;
}

.scrollTable thead th:first-child {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 2;
    /* text-align: left; */
}

.scrollTable thead th {
    padding: 3px;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--surface);
}

.scrollTable tbody th {
    position: sticky;
    left: 0;
    /* text-align: left; */
    z-index: 1;
    border-right: 2px solid var(--secondary);
}

.scrollTable tr:nth-child(odd) th,
.scrollTable tr:nth-child(odd) td {
    background-color: var(--secondaryLight);
}

.scrollTable tr:first-child th,
.scrollTable tr:first-child td {
    background-color: var(--secondary);
}

.scrollTable th,
.scrollTable td {
    border: 1px solid var(--secondary);
    padding: 5px;
    min-width: 0px;
    /* text-align: center; */
    background-color: var(--surface);
    overflow: hidden;
}

#mainContent .shortAnswer p.hiddenP {
    margin: 0;
    padding: 0;
    line-height: 0;
}

#_NAV_LINKS {}

#llHtml .navLinks {
    display: none;
}

.navLinks {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100vw;
    height: 3rem;
    text-align: center;
    background-color: ButtonFace;
}

.navLinks a {
    display: inline-block;
    padding: 0 .5rem;
    height: 3rem;
    line-height: 3rem;
}

.navLinks a[href="#0"] {
    color: currentColor;
    opacity: 0.5;
    text-decoration: none;
}

#_BUTTONS {}

#llApp .button {
    box-sizing: border-box;
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: calc(var(--buttonHeight) / 2);
    margin: auto;
    min-width: var(--buttonHeight);
    height: var(--buttonHeight);
    line-height: var(--buttonHeight);
    text-decoration: none;
    text-align: center;
    color: var(--on-primary);
    background-color: var(--primary);
    cursor: pointer;
}

#llApp .button:hover,
#llApp .button:focus {
    /* filter: brightness(125%); */
    background-color: var(--primaryLight);
    outline: 0;
    /* background-color: var(--primaryDark); */
}

#llApp .button.hidden,
#llApp .actionBtn.hidden,
#llApp .tab.hidden {
    display: none;
}


/* Selection Menu */

.icon-markStyle:after {
    width: 20px;
    height: 2px;
    display: block;
    background-color: var(--on-surface);
    content: " ";
    transform: translate(12px, -12px);
}

.icon-markStyle.highlight:after {
    display: block;
    width: 20px;
    height: 13px;
    background-color: var(--on-surface);
    content: " ";
    transform: translate(12px, -25px);
    opacity: 35%;
}

#selectionMenu a.btnColor:before {
    width: 20px;
    height: 20px;
    display: block;
    background-color: rgba(var(--red));
    content: " ";
    transform: translate(10px, 10px);
    /* opacity: 70%; */
}

#selectionMenu a.btnColor.underline:before {
    width: 20px;
    height: 2px;
    /* border-radius: 50%; */
    display: block;
    background-color: rgba(var(--red));
    content: " ";
    transform: translate(11px, 20px);
    /* opacity: 50%; */
}

#selectionMenu div.underline a.btnColor:before {
    transform: translate(11px, 20px);
    height: 2px;
}

#selectionMenu a.btnColor.red:before {
    background-color: rgba(var(--red), var(--highlightOpacity));
}

#selectionMenu a.btnColor.orange:before {
    background-color: rgba(var(--orange), var(--highlightOpacity));
}

#selectionMenu a.btnColor.yellow:before {
    background-color: rgba(var(--yellow), var(--highlightOpacity));
}

#selectionMenu a.btnColor.green:before {
    background-color: rgba(var(--green), var(--highlightOpacity));
}

#selectionMenu a.btnColor.blue:before {
    background-color: rgba(var(--blue), var(--highlightOpacity));
}

#selectionMenu a.btnColor.purple:before {
    background-color: rgba(var(--purple), var(--highlightOpacity));
}


/* .red .orange .yellow .green .blue .purple */


/* FABs - FLOATING ACTION BUTTONS */

#tabContentReader .bookmarkFabX {
    visibility: hidden;
}

#tabContentReader.current .bookmarkFabX {
    position: absolute;
    visibility: visible;
    /* right: calc(var(--barHeight) + 1rem); */
    /* right: calc(var(--buttonHeight) + 1vw); */
    left: -5px;
    z-index: 90;
}

#tabContentReader #btnBookmarkFab {
    position: fixed;
    top: var(--barHeight);
}

#tabContentReader .leftFlipperX {
    visibility: hidden;
}

#tabContentReader.current .leftFlipperX {
    position: absolute;
    visibility: visible;
    /* left: -20px; */
    left: -5px;
    z-index: 90;
}

#tabContentReader .leftFlipperY {
    position: fixed;
    top: 45%;
    padding-left: 5px;
}

#tabContentReader .rightFlipperX {
    visibility: hidden;
}

#tabContentReader.current .rightFlipperX {
    position: absolute;
    visibility: visible;
    /* right: 6px; */
    right: var(--buttonHeight);
    /* right: calc(var(--buttonHeight) + 1vw); */
    z-index: 90;
}

#tabContentReader .rightFlipperY {
    position: fixed;
    top: 45%;
}

#tabContentReader .bottomRightFabX {
    visibility: hidden;
}

#tabContentReader.current .bottomRightFabX {
    position: absolute;
    visibility: visible;
    /* right: calc(var(--barHeight) + 1rem); */
    right: calc(100vw * .03 + var(--barHeight));
}

#tabContentReader .btnAudioFab {
    position: fixed;
    min-width: 4rem;
    min-height: 4rem;
    border-radius: 2rem;
    bottom: calc(100vw * .03);
    font-size: 2rem;
    line-height: 4rem;
    transition: bottom var(--transitionDelay) ease-in-out;
    z-index: 90;
}

#tabContentReader .btnAudioFab.lowered {
    position: fixed;
    bottom: -4rem;
}

#tabContentReader .btnAddBookFab {
    position: fixed;
    bottom: calc(100vw * .03);
    min-width: 4rem;
    min-height: 4rem;
    border-radius: 2rem;
    font-size: 2rem;
    line-height: 4rem;
    transition: bottom var(--transitionDelay) ease-in-out;
    z-index: 90;
}

#llApp div.bar.clear .button,
#llApp .button.transparent {
    color: var(--on-surface);
    background-color: transparent;
}

#llApp div.bar.clear .button:hover,
#llApp div.bar.clear .button:focus,
#llApp .button.transparent:hover,
#llApp .button.transparent:focus {
    color: var(--on-surface);
    background-color: var(--secondaryLight);
}

#llApp div.verticalMenu a.menuAnchor,
#llApp div.moreMenu a.menuAnchor {
    padding: 0px;
}

#_VERTICAL_MENU {}

#llApp .verticalMenu {
    /* flex: 1; */
    padding-bottom: 5rem;
    /* margin: 1rem; */
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    /* align-items: stretch; */
    box-sizing: border-box;
}

#llApp .verticalMenu a {
    padding: 15px;
    text-decoration: none;
    color: var(--on-surface);
    display: block;
    cursor: pointer;
    /* transition: var(--transitionDelay) ease-in-out; */
    text-align: left;
    box-sizing: border-box;
    margin: 4px;
}

#llApp .verticalMenu a:hover {
    background-color: var(--secondaryLight);
    box-sizing: border-box;
}

#llApp .verticalMenu a.selected,
#llApp .moreMenu a.selected {
    background-color: var(--secondary);
    font-weight: bold;
    box-sizing: border-box;
}

#llApp .verticalMenu a.menuAnchor,
#llApp .moreMenu a.menuAnchor {
    /* padding: 0;
    height: 0;
    max-height: 0; */
}

#llApp .verticalMenu a.menuAnchor:focus,
#llApp .moreMenu a.menuAnchor:focus {
    /* outline: 0; */
}

#llApp .verticalMenu a::before {
    position: relative;
    left: -0.5rem;
}

#_TABS {}

#llApp .tab {
    flex: 1;
    margin-bottom: 0px;
    display: inline-block;
    min-width: var(--barHeight);
    height: var(--barHeight);
    line-height: var(--barHeight);
    margin: auto;
    background: no-repeat center;
    background-size: calc(.65 * var(--buttonHeight));
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    background-color: var(--secondary);
    color: var(--on-secondary);
    /* transition: border-bottom var(--transitionDelay) ease-in-out; */
    box-sizing: border-box;
}

#llApp .tab:hover,
#llApp .tab:focus {
    outline: 0;
    background-color: var(--secondaryLight);
}

#llApp .tab.current {
    font-weight: bold;
    border-bottom: 5px solid var(--primary);
    /* border-bottom: 5px solid var(--on-primary); */
}

#llApp .tabContentContainer {
    position: relative;
}

#llApp .tabContent {
    flex: 1;
    max-width: 0;
    height: 100%;
    overflow: hidden;
    /* Transitioning max-width caused split Right Panel timing bug */
    /* transition: max-width var(--transitionDelay) ease-in-out; */
    transition: filter var(--transitionDelay) ease-in-out;
    filter: opacity(0);
}

#llApp .tabContent.current {
    max-width: 100%;
    filter: opacity(1);
}

#_Bookmarks {}

#tabContentBookmarks div.bookmarkMenu {
    box-sizing: border-box;
    padding-bottom: 5rem;
    max-height: 100%;
    max-width: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
}

#tabContentBookmarks a.bookmark {
    box-sizing: border-box;
    position: relative;
    display: block;
    height: 4rem;
    padding: .5rem;
    text-decoration: none;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
    /* transition: var(--transitionDelay) ease-in-out; */
}

#tabContentBookmarks a.bookmark:hover {
    background-color: var(--secondaryLight);
}

#tabContentBookmarks a span.bookmarkBookmarkTitle {
    position: relative;
    display: inline-block;
    padding-left: 30px;
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
}

#tabContentBookmarks a span.bookmarkBookmarkTitle::before {
    position: absolute;
    top: 0px;
    left: 0px;
    font-family: icon;
    font-size: 1.5rem;
    content: '\e923';
}

#tabContentBookmarks a span.bookmarkPageTitle,
#tabContentBookmarks a span.bookmarkBookTitle {
    position: relative;
    top: -10px;
    padding-left: 30px;
    margin: 0;
    width: 90%;
    line-height: 1.5rem;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-size: smaller;
    font-style: italic;
}

#_RECENTS {}

#tabContentRecent div.recentMenu {
    padding-bottom: 5rem;
    max-height: 100%;
    max-width: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
    box-sizing: border-box;
}

#tabContentRecent h2.recentDate {
    display: block;
    margin: 0;
    border-bottom: 2px solid var(--secondary);
    padding: .5rem;
    background-color: var(--secondary);
    color: var(--on-secondary);
    font-family: var(--appFont);
    font-size: larger;
    text-align: left;
}

#tabContentRecent a.recent {
    box-sizing: border-box;
    margin: 4px;
    position: relative;
    display: block;
    height: 3.5rem;
    padding: .5rem;
    text-decoration: none;
    color: var(--on-surface);
    text-align: left;
    cursor: pointer;
    /* transition: var(--transitionDelay) ease-in-out; */
}

#tabContentRecent a.recent:hover {
    background-color: var(--secondaryLight);
}

#tabContentRecent span.recentPageTitle {
    box-sizing: border-box;
    position: relative;
    display: block;
    padding-left: 25px;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
}

#tabContentRecent span.recentPageTitle:before {
    position: relative;
    top: 3px;
    transform: translate(20px, 5px);
    margin-left: -25px;
    margin-right: 5px;
    font-family: icon;
    font-size: 1.5rem;
    content: '\e933';
}

#tabContentRecent span.recentBookTitle {
    box-sizing: border-box;
    /* display: block; */
    position: relative;
    top: -3px;
    padding-left: 25px;
    margin: 0;
    width: 90%;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.5rem;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-size: smaller;
    font-style: italic;
}

#_NOTES_AND_HIGHLIGHTS {}

#tabContentNotes div.noteMenu {
    box-sizing: border-box;
    padding: 0 0 5rem 0;
    max-height: 100%;
    max-width: 100%;
    overflow-y: auto;
    scrollbar-width: thin;
    overflow-x: hidden;
}

#tabContentNotes div.note {
    --headerHeight: 4;
    --maxLines: 3;
    box-sizing: border-box;
    position: relative;
    display: block;
    margin: 0;
    border-bottom: 2px solid var(--secondary);
    padding: .5rem .5rem .5rem 1rem;
    max-height: calc((var(--headerHeight) + var(--maxLines)) * var(--smallLineHeight));
    overflow: hidden;
    cursor: pointer;
}

#tabContentNotes div.note:hover,
#tabContentNotes div.note.active {
    background-color: var(--secondaryLight);
}

#tabContentNotes div.noteMenu.full div.note,
#tabContentNotes div.note.full {
    max-height: initial;
}

#tabContentNotes div.noteBar {
    box-sizing: border-box;
    position: relative;
    margin: 0;
    height: var(--barHeight);
    line-height: var(--barHeight);
    font-family: var(--appFont);
    font-size: var(--appFontSize);
}

#tabContentNotes a.noteLink {}

#tabContentNotes span.pageTitle {
    position: relative;
    display: block;
    padding: .5rem 0 0 0;
    line-height: var(--smallLineHeight);
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
}

#tabContentNotes span.bookTitle {
    position: relative;
    display: block;
    margin: 0;
    padding-top: .1rem;
    line-height: var(--smallLineHeight);
    white-space: nowrap;
    overflow: hidden;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-size: smaller;
    font-style: italic;
}

#tabContentNotes span.noteDate {
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    display: block;
    width: 80%;
    padding-left: 20px;
    font-size: smaller;
    white-space: nowrap;
    overflow: hidden;
}

#tabContentNotes span.noteDate:before {
    margin-left: -20px;
    margin-right: 5px;
    font-family: icon;
    font-size: 1rem;
    content: '\e92e';
}

#tabContentNotes div.noteTitle {
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-weight: bold;
    /* padding-bottom: .5rem; */
}

#tabContentNotes div.noteBody,
#tabContentNotes div.noteBody p {
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-size: smaller;
    line-height: 1.15rem;
    margin-bottom: .5rem;
    box-sizing: border-box;
}

#_NOTE_EDITOR {}

#tabContentNotes div.noteEditor {
    flex: 1;
    max-height: 0;
    padding: 0;
    overflow: hidden;
    /* transition: all var(--transitionDelay) ease-in-out; */
}

#tabContentNotes.editMode div.noteEditor {
    max-height: 100%;
    padding: .5rem;
    border-bottom: 1px solid var(--secondary);
}

#tabContentNotes.editMode div.noteList {
    max-height: 0;
    padding: 0;
}

#tabContentNotes #noteEditorForm {
    height: 100%;
}

#tabContentNotes input[type=text] {
    box-sizing: border-box;
    width: 100%;
    margin: .5rem 0 .5rem 0;
    background-color: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--secondary);
    outline-color: var(--primary);
}

#tabContentNotes textarea {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-height: 8rem;
    background-color: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--secondary);
    outline-color: var(--primary);
}

#_SEARCH_RESULTS {}

#tabContentSearch form {
    height: 100%;
    width: 100%;
}

#tabContentSearch div.searchMenu {
    max-height: calc(100vh - (var(--barHeight)*3));
}

#tabContentSearch a.searchResult {
    --headerHeight: 4;
    --maxLines: 3;
    display: block;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    color: var(--on-surface);
    text-decoration: none;
    padding: .5rem;
    border-bottom: 2px solid var(--secondary);
    max-height: calc((var(--headerHeight) + var(--maxLines)) * var(--appLineHeight));
    overflow: hidden;
    margin: 0;
    box-sizing: border-box;
}

#tabContentSearch a.searchResult:hover {
    background-color: var(--secondaryLight);
}

#tabContentSearch div.resultTitle {
    box-sizing: border-box;
    margin: 0;
    padding-bottom: 0;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-weight: bold;
}

#tabContentSearch span.resultParent {
    display: block;
    padding-bottom: .5rem;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-style: italic;
}

#tabContentSearch span.resultText {
    box-sizing: border-box;
    margin: 0;
    line-height: 1.5rem;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-size: smaller;
    line-height: 1.15rem;
    margin-bottom: .5rem;
}

#_AUDIO_PLAYER {}

#audioPlayer .player {
    border: 1px solid var(--surface);
    margin: 0;
    box-sizing: border-box;
}

#audioPlayer .audioLabel {
    min-width: var(--barHeight);
    text-align: center;
}

#audioPlayer .audioSlider,
#audioPlayer input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    width: 100%;
    height: .25rem;
    margin: auto;
    background: var(--on-secondary);
    outline: none;
    /* filter: opacity(90%); */
}


/* #audioPlayer .audioSlider::-webkit-slider-thumb */

#audioPlayer ::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: .5rem;
    background: var(--on-secondary);
    cursor: pointer;
}


/* #audioPlayer .audioSlider::-moz-range-thumb */

#audioPlayer ::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--on-secondary);
    cursor: pointer;
}

#audioPlayer #volumeSlider {
    position: absolute;
    width: 18rem;
    height: var(--barHeight);
    top: var(--barHeight);
    left: var(--buttonHeight);
    background-color: var(--secondary);
    box-shadow: 0 0 20px var(--on-secondary);
}

#_MATCHING {}

.mpGroup {
    /* display: flex;
    flex-direction: row;
    align-items: stretch; */
    border-radius: 0.5rem;
    /* background-color: var(--secondary); */
    /* height: var(--barHeight); */
    /* line-height: var(--barHeight); */
    margin: 0.5rem 0;
    /* box-shadow: 0 0 5px var(--secondary); */
    border: 2px solid var(--secondary);
    overflow: unset;
    text-align: left;
}

.mpGroup .mpgCol2 {
    padding: .5rem 0;
}

.mpGroup .mpgCol2>div {
    min-height: 2rem;
    line-height: 2rem;
    display: flex;
}

.mpGroup .mpgCount {
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    /* width: var(--buttonHeight); */
    /* height: var(--buttonHeight); */
    /* height: 1rem; */
    width: 2rem;
    margin: .5rem;
    border-radius: 1rem;
    background-color: var(--secondary);
    /* color: var(--on-primary); */
    /* font-weight: bold; */
    text-align: center;
    padding: .25rem .5rem;
}

#matchingContainer {
    box-sizing: border-box;
    margin: 0;
    padding: 0rem;
    width: 100%;
    height: 100%;
    /* overflow-y: scroll; */
    display: grid;
    /* grid-gap: 1rem; */
    column-gap: 1rem;
    row-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    align-items: center;
    justify-content: center;
    white-space: normal;
}

#practiceContainer .matchingCards {
    box-sizing: border-box;
    margin: 0 0 .5rem 0;
    padding: 0rem;
    width: 100%;
    height: 100%;
    min-height: 0;
    /* overflow-y: scroll; */
    display: grid;
    /* grid-gap: 1rem; */
    column-gap: 1rem;
    row-gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, 1fr);
    align-items: center;
    justify-content: center;
    white-space: normal;
}

#matchingContainer:not(#practiceContainer *) {
    /* remove for #practiceContainer */
    padding: 1rem;
}

#matchingContainer.finished {
    display: block;
}

#matchingContainer .card,
#practiceContainer .card {
    position: relative;
    /* display: block; */
    height: 100%;
    width: 100%;
    border-radius: 10px;
    text-align: center;
    text-decoration: none;
    margin: auto;
    box-sizing: border-box;
    padding: .5rem;
    cursor: pointer;
    /* background-color: var(--secondary); */
    /* border: 1px solid var(--on-surface); */
    box-shadow: 1px 1px 5px var(--secondary);
    border: 2px solid var(--secondary);
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 0;
    /* justify-content: center; */
    /* justify-content: space-evenly; */
    overflow: hidden;
}

#practiceContainer .card.smaller {
    font-size: smaller;
    line-height: 1.2rem;
}

#practiceContainer .card.small {
    font-size: small;
    line-height: 1.2rem;
}

#practiceContainer .card.xSmall {
    font-size: x-small;
    line-height: 1rem;
}

#matchingContainer .card>*,
#practiceContainer .card>* {
    margin: .5rem;
}

#matchingContainer .card :only-child,
#practiceContainer .card :only-child {
    margin: auto;
}

#matchingContainer .card.ready:hover,
#practiceContainer .card.ready:hover {
    /* background-color: var(--surface); */
    background-color: var(--secondaryLight);
}

#matchingContainer .card.selected,
#practiceContainer .card.selected {
    /* color: var(--on-primary); */
    border-width: 3px;
    /* border-color: var(--primary);
    background-color: var(--primaryLight); */
    border-color: var(--primary);
    background-color: var(--secondaryLight);
    /* border-color: rgba(var(--blue));
    background-color: rgba(var(--blue), var(--highlightOpacity)); */
}

#matchingContainer .card.correct,
#practiceContainer .card.correct {
    /* color: var(--surface); */
    /* background-color: rgba(var(--green)); */
    /* border-color: var(--secondary); */
    border-color: rgba(var(--green));
    background-color: rgba(var(--green), var(--highlightOpacity));
}

#matchingContainer .card.correct::before,
#practiceContainer .card.correct::before {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-success);
    content: "\e91a";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: var(--success);
    z-index: 2;
    /* animation: spin 1s 1; */
    /* animation: burst .5s 1; */
    animation: scale .25s 1;
}

#matchingContainer .card.incorrect,
#practiceContainer .card.incorrect {
    /* color: var(--surface); */
    /* border-color: var(--secondary);
    background-color: rgba(var(--red)); */
    border-color: rgba(var(--red));
    background-color: rgba(var(--red), var(--highlightOpacity));
}

#matchingContainer .card.incorrect::before,
#practiceContainer .card.incorrect::before {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-error);
    content: "\e90f";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-error);
    background-color: rgba(var(--red));
    z-index: 2;
    /* animation: spin 1s 1; */
    /* animation: burst .5s 1; */
    animation: scale .25s 1;
}

#matchingContainer .card.done,
#practiceContainer .card.done {
    /* color: rgba(var(--green)); */
    /* color: var(--secondary); */
    opacity: .5;
}

#matchingContainer .card img,
#practiceContainer .card img {
    /* position: absolute; */
    top: 50%;
    left: 50%;
    max-width: 90%;
    max-height: 90%;
    z-index: 1;
    /* transform: translate(-50%, -50%); */
    /* opacity: 30%; */
    box-sizing: border-box;
    border-radius: 10px;
}

#matchingContainer .card.done img,
#practiceContainer .card.done img {
    filter: saturate(0);
    opacity: .3;
}

#_FLASHCARDS {}

#llApp #flashCard.done #flashInner,
#llApp #flashCard.done #flashInner * {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

.flashcardBtn:not(#llApp *),
.matchingBtn:not(#llApp *) {
    display: none;
}

#flashContainer {
    width: 100%;
    max-width: 600px;
    height: 100%;
    /* perspective: 1000px; */
    box-sizing: border-box;
    margin: auto;
    padding: 0 0 1rem 0;
}

.topRow {
    height: calc(1.5 * var(--barHeight));
}

.practiceWidth {
    max-width: 600px;
    margin: auto;
}

#practiceProgress,
#flashProgress {
    /* TEST */
    /* margin: 1rem 2rem; */
    /* height: 3rem; */
    margin: 0 0 0 1rem;
    flex: 1;
}

.progressShell {
    position: relative;
    flex: 1;
    /* display: inline-block; This would break UI.showProgress dialog*/
    height: .75rem;
    margin: auto;
    overflow: hidden;
    border-radius: 10px;
    background-color: var(--secondary);
    font-size: .75rem;
    text-align: center;
}

.progressValue {
    margin: auto;
    /* width: 100px; TEST */
    width: 4rem;
    text-align: center;
    color: var(--on-surface);
    z-index: 1;
}

.progressBar {
    position: relative;
    padding: 0px;
    background-color: var(--primary);
    width: 0%;
    height: 100%;
    border-radius: 10px;
    transition: transform 1s;
}

.progressDetail {
    margin-top: .25rem;
    font-size: smaller;
}

.progressShell>.progressScale {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.progressShell>.progressScale>div {
    display: inline-block;
    flex: 1;
    border-right: 4px solid var(--surface);
    text-align: center;
    height: 100%;
}

.progressShell>.progressScale>div:last-child {
    border-right: 0px;
}

#practiceContainer {
    box-sizing: border-box;
    /* white-space: nowrap; */
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 1rem;
    -webkit-user-select: none;
    user-select: none;
    font-family: var(--crsFont);
    font-size: var(--crsFontSize);
}

#practiceContainer * {
    -webkit-user-select: none;
    user-select: none;
}

#practiceContainer>div {
    display: inline-block;
    width: 100%;
    height: 100%;
    transition: width .3s ease;
    overflow: hidden;
    box-sizing: border-box;
}

#practiceContainer>div.exitLeft {
    width: 0;
    z-index: -1;
}

#llApp #practiceContainer>div>div {
    position: relative;
    z-index: 1;
    min-width: 250px;
    background-color: var(--surface);
    /* Include Nav bar in Activity */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

#practiceContainer .badge {
    width: 30%;
}

#llApp .navBar {
    position: relative;
    margin: 0 -.4rem;
    transition: all var(--transitionDelay) ease-in-out;
}

#llApp .navBar.hidden {
    min-height: 0;
    max-height: 0;
    transition: all var(--transitionDelay) ease-in-out;
}

#llApp .navBar .feedback {
    position: absolute;

}

#practiceNavBar {
    height: 4rem;
    margin-bottom: 1rem;
}

.cardRow {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 0rem 2rem 2rem 2rem;
}

#flashCard {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform var(--transitionDelay) ease-in-out;
    /* transform-style: preserve-3d; */
    /*  */
    perspective: 1000px;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem 0 1rem;
}

#flashInner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    /* transition: transform 0.8s; */
    transition: transform 0.3s;
    transform-style: preserve-3d;
    margin-bottom: 1rem;
    cursor: pointer;
}

#flashCard img {
    -webkit-user-select: none;
    user-select: none;
    max-height: 200px;
    border: 2px solid var(--secondary);
    border-radius: 10px;
}

#flashFront,
#flashBack {
    position: absolute;
    background-color: var(--surface);
    /* height: calc(100% - 4rem); */
    height: 100%;
    width: 100%;
    /* calc(100% - 50px); */
    display: flex;
    justify-content: center;
    flex-direction: column;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 20px var(--on-surface);
    /* box-shadow: 1px 1px 5px var(--secondary); */
    border: 2px solid var(--secondary);
    padding: 1rem;
    box-sizing: border-box;
    font-size: x-large;
    text-align: center;
}

#flashBack {
    background-color: var(--surface);
    transform: rotateY(180deg);
}

#llApp #flashCard.correct #flashFront,
#llApp #flashCard.correct #flashBack {
    background-color: rgba(var(--green), var(--highlightOpacity));
    border: 2px solid rgba(var(--green));
}

#llApp #flashCard.correct #flashFront::before,
#llApp #flashCard.correct #flashBack::before {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-success);
    content: "\e91a";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: var(--success);
    /* animation: spin 1s 1; */
    /* animation: burst .5s 1; */
    animation: scale .25s 1;
}

#llApp #flashCard.corrected #flashFront::before,
#llApp #flashCard.corrected #flashBack::before {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-success);
    content: "\e919";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: rgba(var(--green));
    /* animation: spin 1s 1; */
    /* animation: burst .5s 1; */
    animation: scale .25s 1;
}

#flashCard.active #flashInner {
    transform: rotateY(180deg);
}

#flashBackBorder,
#flashFrontBorder {
    height: 100%;
    display: flex;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

#flashFrontBorder {
    /* border: 5px solid var(--secondary); */
    /* border: 2px solid var(--secondary); */
    border-radius: 10px;
}

#flashBackBorder {
    /* border: 5px dashed var(--secondary); */
    border: 2px dashed var(--secondary);
    border-radius: 10px;
}

#flashBackContent,
#flashFrontContent {
    margin: auto;
    /* max-height: 85%; */
    overflow: hidden;
    box-sizing: border-box;
    line-height: var(--crsLineHeight);
    /* display: flex; */
}

/* #flashBackContent>*,
#flashFrontContent>* {
    flex: 1;
} */

#flashNav {
    position: relative;
    flex-shrink: no;
    height: var(--barHeight);
    min-height: var(--barHeight);
    line-height: var(--barHeight);
    width: 100%;
    padding: 0rem 2rem;
    box-sizing: border-box;
    text-align: center;
}

#numIncorrect,
#numCorrect {
    position: relative;
    margin: auto;
    height: var(--buttonHeight);
    line-height: var(--buttonHeight);
    font-size: x-large;
    color: var(--on-surface);
    text-align: center;
}

/* #llApp #btnIncorrect {
    background: rgba(var(--red));
    color: var(--on-error);
    font-size: x-large;
    line-height: 1rem;
    width: 100%;
    height: var(--buttonHeight);
    border-radius: 2px;
}

#llApp #btnIncorrect:hover,
#llApp #btnCorrect:hover {
    filter: brightness(115%);
}

#llApp #btnCorrect {
    background: rgba(var(--green));
    color: var(--on-error);
    font-size: x-large;
    line-height: var(--buttonHeight);
    width: 100%;
    height: var(--buttonHeight);
    z-index: 1;
} */

#llApp button.systemBtn {
    position: relative;
    display: inline-block;
    /* margin: 0.5rem 0.2rem 0.5rem auto; */
    margin: 0.5rem;
    padding: .5rem 1rem;
    font-size: large;
    overflow: hidden;
    border-width: 0;
    outline: none;
    border-radius: 2px;
    box-shadow: 0 1px 4px var(--on-surface);
}

#llApp button.systemBtn.primary {
    background-color: var(--primary);
    color: var(--on-primary);
}

#llApp button.systemBtn.primary:hover,
#llApp button.systemBtn.primary:focus {
    background-color: var(--primaryLight);
}

#llApp button.systemBtn.secondary {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

#llApp button.systemBtn.secondary:hover,
#llApp button.systemBtn.secondary:focus {
    background-color: var(--secondaryLight);
}

#llApp button.systemBtn.outlined {
    background-color: var(--surface);
    color: var(--primary);
    border: 1px solid var(--primary);
}

#llApp button.systemBtn.outlined:hover,
#llApp button.systemBtn.outlined:focus {
    background-color: var(--secondary);
}

#_AUDIO_CLIPS {}

#llApp .actionBtn.record:before {
    content: "\e903";
}

#llApp .actionBtn.stop:before {
    content: "\e95e";
}

#llApp .actionBtn.play:before {
    content: "\e906";
}

#_AUDIO_PLAYER {}

#llApp audio[controls] {
    height: var(--buttonHeight);
}

#_ORDER_WORDS {}

#llApp .orderWords * {
    -webkit-user-select: none;
    user-select: none;
}

#llApp .orderWords .owPrompt p {
    padding-bottom: 0;
    font-weight: bold;
}

#llApp .orderWords .owPrompt button {
    margin: .5rem 50%;
    transform: translate(-50%, 0);
}

/* #llApp .orderWords .owPrompt div {
    text-align: center;
    padding: 0.5rem;
} */

#llApp a.iconBtn.actionBtn,
#llApp button.iconBtn.actionBtn {
    padding: 0;
    width: var(--buttonHeight);
    text-align: center;
}

#llApp a.iconBtn.actionBtn::before,
#llApp button.iconBtn.actionBtn::before {
    margin: 0;
    line-height: var(--buttonHeight);
}

#llApp .orderWords .owResponse,
#llApp .orderWords .owOptions {
    position: relative;
    border: 1px solid var(--secondary);
    min-height: 4rem;
    padding-left: .5rem;
}

#llApp .orderWords .owOptions {
    background-color: var(--secondary);
}

#llApp .orderWords .owResponse .actionBtn,
#llApp .orderWords .owOptions .actionBtn {
    margin-left: 0;
    padding: 0 .5rem;
    height: 2.5rem;
    line-height: 2.5rem;
    border-color: var(--secondary);
}

#llApp .orderWords .actionBtn.used {
    border-color: var(--secondary);
    color: var(--secondary);
}

#llApp .orderWords .actionBtn.incorrect {
    border-color: var(--error);
    color: var(--error);
}

#llApp .orderWords.correct .owResponse {
    border-color: var(--success);
}

#llApp .orderWords.incorrect .owResponse {
    border-color: var(--error);
}

#llApp .orderWords.correct .owResponse .actionBtn {
    color: var(--on-success);
    background-color: var(--success);
}

#llApp .orderWords.incorrect .owOptions .actionBtn:not(.used) {
    color: var(--on-success);
    background-color: var(--success);
}

#llApp .orderWords.incorrect .owResponse::before {
    /* position: absolute; */
    /* top: 1rem; */
    /* left: -2rem; */
    border-radius: 50%;
    border: 1px solid var(--on-surface);
    content: "\e90f";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--on-error);
    background-color: var(--error);
    margin-right: .5rem;
}

#llApp .orderWords.incorrect .owOptions::before {
    /* position: absolute; */
    /* top: 1rem; */
    /* left: -2rem; */
    content: "\e919";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--success);
    margin-right: .5rem;
}

#llApp .orderWords.correct .owResponse::before {
    /* position: absolute; */
    /* top: 1rem; */
    /* left: -2rem; */
    border-radius: 50%;
    border: 1px solid var(--on-surface);
    content: "\e91a";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: var(--success);
    margin-right: .5rem;
}

#llApp .orderWords .owControls {
    text-align: right;
    padding-right: 0;
    margin-right: -0.5rem;
}

#_REPEAT {}

#llApp .repeat img {
    -webkit-user-select: none;
    user-select: none;
    max-height: 150px;
    border: 2px solid var(--secondary);
    border-radius: 10px;
}

#llApp .recDuration {
    color: lightgray;
    /* font-size: x-large; */
    font-weight: bold;
    text-align: center;
    /* padding: .5rem; */
    vertical-align: middle;
    padding-left: 0;
}

#llApp .recDuration.recording {
    color: red;
    /* animation: blinker 1s linear infinite; */
}

#_TYPE_OR_SAY {}

#llApp .typeSay {
    padding: 1rem 1rem 0 1rem;
    box-sizing: border-box;
}

#llApp .typeSay * {
    -webkit-user-select: none;
    user-select: none;
}

#llApp .typeSay .tsPrompt {
    display: flex;
    align-items: center;
    margin: .5rem 0;
}

#llApp .typeSay img {
    height: 4rem;
    border-radius: 10px;
    margin-right: .5rem;
}

#llApp .typeSay .tsResponseDiv {
    position: relative;
}

#llApp .typeSay .tsResponse {
    position: relative;
    box-sizing: border-box;
    border: 2px solid var(--secondary);
    min-height: 4rem;
    /* padding-left: .5rem; */
    margin-bottom: 2px;
    margin: .5rem 0;
    /* font-size: x-large; */
    padding: .5rem .5rem .5rem 1.5rem;
    vertical-align: top;
}

#llApp .typeSay .tsOptions {
    position: relative;
    border: 1px solid var(--secondary);
    min-height: 4rem;
    padding-left: .5rem;
    background-color: var(--secondary);
    text-align: center;
}

#llApp .typeSay .tsOptions.hidden * {
    visibility: hidden;
}

#llApp .typeSay .tsOptions .actionBtn {
    margin-left: 0;
    padding: 0 .5rem;
    height: var(--buttonHeight);
    line-height: var(--buttonHeight);
    min-width: var(--buttonHeight);
    border-color: var(--secondary);
}

#llApp .typeSay.correct .tsOptions *,
#llApp .typeSay.incorrect .tsOptions *,
#llApp .typeSay.correct .tsResponse,
#llApp .typeSay.incorrect .tsResponse {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

#llApp .typeSay.incorrect .tsOptions .corrected {
    color: var(--success);
}

#llApp .typeSay.correct .tsResponseDiv::before {
    position: absolute;
    /* top: calc(var(--buttonHeight) / 2 + 0.5rem); */
    top: 1rem;
    left: -1rem;
    /* transform: translate(0, -50%); */
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-success);
    content: "\e91a";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: var(--success);
    z-index: 1;
}

#llApp .typeSay.correct .tsResponse {
    border-color: var(--success);
    background-color: rgba(var(--green), var(--highlightOpacity));
}

#llApp .typeSay.incorrect .tsResponseDiv::before {
    position: absolute;
    /* top: calc(var(--buttonHeight) / 2 + 0.5rem); */
    top: 1rem;
    left: -1rem;
    /* transform: translate(0, -50%); */
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-error);
    content: "\e90f";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-error);
    background-color: var(--error);
    z-index: 1;
    animation: scale .25s 1;
}

#llApp .typeSay.incorrect .tsResponse {
    border-color: var(--error);
    background-color: rgba(var(--red), var(--highlightOpacity));
}

#llApp .typeSay.incorrect .tsOptions::before {
    position: absolute;
    /* top: calc(var(--buttonHeight) / 2 + 0.5rem); */
    top: 1rem;
    left: -1rem;
    /* transform: translate(0, -50%); */
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-success);
    content: "\e919";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: var(--success);
    animation: scale .25s 1;
}

#llApp .typeSay .actionBtn.used,
#llApp .typeSay .chip.used {
    border-color: var(--secondary);
    color: var(--secondary);
}

#practiceContainer .cheer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: grid;
    align-content: center;
    text-align: center;
    font-size: 5rem;
    font-weight: bold;
    color: var(--primary);
    background-color: var(--surface);
    animation: scale 0.3s;
    z-index: 2;
}

#llApp #practiceContainer div.cheer div {
    margin-bottom: 20%;
    line-height: 100%;
    background-color: var(--surface);
}

#_CUSTOM_DIALOGS {}

#customDialog {
    position: absolute;
    box-sizing: border-box;
    z-index: 950;
}

#customDialog div {
    /* padding: .25rem; */
}

#customDialog input[type=text] {
    box-sizing: border-box;
    width: 100%;
    margin: .5rem 0 .5rem 0;
    background-color: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--secondary);
    outline-color: var(--primary);
}

#customDialog textarea {
    box-sizing: border-box;
    width: 100%;
    min-height: 8rem;
    background-color: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--secondary);
    outline-color: var(--primary);
}

#customDialog .cdBox {
    position: relative;
    box-sizing: border-box;
    box-shadow: 0 0 20px var(--on-surface);
    background-color: var(--surface);
    color: var(--on-surface);
    padding: 1rem;
    width: 300px;
    max-width: 90%;
    max-height: 80%;
    /* border: 1px solid red; */
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#customDialog .cdTitle,
#llApp .cdTitle {
    font-weight: bold;
    padding: .5rem 0;
}

#customDialog .cdBody,
#llApp .cdBody {
    max-height: calc(70vh - 6rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

#customDialog .cdButtons,
#llApp .cdButtons {
    /* padding-top: 1rem; */
    text-align: right;
}

#toast {
    visibility: hidden;
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 300px;
    padding: 20px;
    font-size: var(--appFontSize);
    font-family: var(--appFont);
    text-align: center;
    border-radius: 5px;
    background-color: var(--surface);
    color: var(--on-surface);
    box-shadow: 0 0 20px var(--on-surface);
    opacity: 0;
    /* transition: opacity 1s, visibility 1s; */
    transition: opacity var(--transitionDelay), visibility var(--transitionDelay) ease-in-out;
    z-index: 950;
}

#toast.bottom {
    top: unset;
    bottom: 5%;
}

#toast.active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--transitionDelay) ease-in-out;
}

#toast.warning {
    color: var(--on-error);
    background-color: var(--error);
}

#toast.success {
    color: var(--on-success);
    background-color: var(--success);
}

#llApp img.zoomImage {
    position: relative;
    top: 50%;
    /* left: 50px; */
    /* width: 200px; */
    transform: translate(0%, -50%);
    width: 100%;
}

#_IMAGE_VIEWER {}

#viewContainer {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #bdbdbd;
    background-color: #000000;
}

#llApp>#viewContainer {
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    /* height: 100vh; */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    z-index: 955;
}

#slideContainer {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

#viewContainer div.slide {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

#viewContainer div.slide.left {
    left: -100%;
    transition: left var(--transitionDelay) ease-in-out;
}

#viewContainer div.slide.active {
    left: 0;
    transition: left var(--transitionDelay) ease-in-out;
}

#viewContainer div.slide.right {
    left: 100%;
    transition: left var(--transitionDelay) ease-in-out;
}

#viewContainer div.slide>div.imgScroll {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    overflow: auto;
}

#viewContainer div.imgScroll>img {
    position: absolute;
    z-index: 0;
    /* width: 100%; */
}

#viewContainer div.slide>div.caption {
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
    z-index: 2;
    padding: .5rem 3rem .5rem 1rem;
    min-height: var(--barHeight);
    width: 100%;
    font-family: var(--appFont);
    font-size: 1rem;
    font-style: italic;
    color: #bdbdbd;
    background-color: #000000;
    max-height: 0px;
    visibility: hidden;
    overflow-y: auto;
    cursor: pointer;
    transition: max-height var(--transitionDelay) ease-in-out;
    /* background-color: rgba( 0, 0, 0, .3); */
}

#viewContainer.captionOn div.slide>div.caption {
    visibility: unset;
    max-height: 6rem;
    text-align: center;
}

#viewContainer.captionOn div.slide>div.caption.pinned {
    height: var(--barHeight);
}

#viewContainer>button.button.transparent {
    position: absolute;
    transform: translate(-50, -50%);
    color: #FFFFFF;
    background-color: #80808078;
}

#viewContainer>button.button.transparent:hover,
#viewContainer>button.button.transparent:focus {
    color: #FFFFFF;
    background-color: #00000050;
}

#btnZoomIn {
    top: 0;
    left: 0;
}

#btnZoomOut {
    top: var(--buttonHeight);
    left: 0rem;
}

#viewContainer.multiSlide #btnPrevSlide {
    top: 50%;
    left: 0rem;
}

#viewContainer.multiSlide #btnNextSlide {
    top: 50%;
    right: 0rem;
}

#btnFullscreen {
    top: 0;
    /* right: calc( var(--buttonHeight) + 1rem); */
    right: var(--buttonHeight);
}

#btnCloseViewer {
    top: 0;
    /* right: 1rem; */
    right: 0;
}

#btnShowCaption {
    bottom: 0;
    right: 0;
    z-index: 2;
}

#viewContainer.multiSlide #navDots {
    position: absolute;
    padding: 1rem;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

#navDots>button.navDot {
    min-height: 0px;
    min-width: 0px;
    height: 1rem;
    width: 1rem;
    border-radius: .5rem;
    background-color: #bdbdbd;
    filter: opacity(.5);
}

#navDots>button.navDot:hover,
#navDots>button.navDot:focus {
    background-color: #bdbdbd;
    filter: opacity(1);
}

#navDots>button.navDot.active {
    background-color: #bdbdbd;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 0.625rem;
    transform: translate(0, 0.125rem);
    filter: opacity(1);
}

#_MEDIA_RULES {}

@media print {

    div.leftPanel,
    div.rightPanel,
    div.bottomPanel,
    div.bar,
    div.moreMenu,
    div.feedbackForm,
    button.button,
    a.button,
    button.button,
    div.navLinks,
    div.feedbackForm,
    div#masteryBar {
        display: none;
    }

    a.actionBtn,
    button.actionBtn {
        color: var(--hyperlink);
    }

    #mainContent,
    #mainContent textarea {
        width: 100%;
        background-color: #FFF;
        color: #444;
    }

    body {
        -webkit-print-color-adjust: exact !important;
        height: auto;
        width: auto;
    }
}

@media (min-width:601px) {
    :root {
        --barHeight: 3rem;
    }

    #llApp .rightDrawer {
        position: absolute;
        width: 100%;
    }

    #llApp .rightPanel.open {
        min-width: 200px;
        max-width: 350px;
    }

    #llApp .centerPanel {
        min-width: 400px;
    }

    /* .open>.rightShield { */
    #OLD.rightShield.active {
        background-color: #0d0f1000;
        background-color: cyan;
        pointer-events: none;
    }

    #llApp .hideOnMobile {
        display: unset;
    }

    #llApp button.systemBtn {
        font-size: var(--appFontSize);
    }
}

@media (min-width:800px) {
    #llApp .leftDrawer {
        position: relative;
        width: 100%;
    }

    #llApp .leftPanel.open {
        min-width: 200px;
        max-width: 300px;
    }

    /* .open>.leftShield { */
    #OLD.leftShield.active {
        background-color: #0d0f1000;
        background-color: yellow;
        pointer-events: none;
    }

    /* #mainContent .cardContainer {
        grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    }
    #mainContent .bookCard {
        height: 13rem;
        padding: .5rem;
        border-radius: 5px;
    } */
}

@media(min-width:900px) {
    #mainContent {
        max-width: 700px;
    }
}


/* main {
    max-width: 800px;
    margin: auto;
    padding: 0.5rem;
    padding-top: 3.3rem;
    text-align: center;
    box-sizing: border-box;
    perspective: 1000px;
} */

#mainContent .cardContainer {
    display: grid;
    column-gap: 1rem;
    row-gap: 1rem;
    grid-template-columns: repeat(auto-fit, 10rem);
    grid-auto-rows: min-content;
    align-items: center;
    justify-content: center;
    margin: 0 -2.5rem;
    padding: 1rem;
    /* background-color: var(--secondary); */
}

#mainContent a.bookCard {
    display: block;
    position: relative;
    align-items: center;
    text-align: center;
    flex-direction: column;
    width: 100%;
    height: 11.5rem;
    background: var(--surface);
    padding: 0;
    box-shadow: 0 0 10px var(--on-surface);
    border-radius: 5px;
    margin: auto;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    color: var(--on-surface);
}

#mainContent a.bookCard:hover,
#mainContent a.bookCard:focus {
    width: 102%;
    /* height: 11.75rem; */
    box-shadow: 0 0 20px var(--on-surface);
}

#mainContent img.cardImage {
    width: 100%;
    height: 7rem;
    object-fit: cover;
    object-position: center top;
}

#mainContent span.cardTitle {
    display: block;
    height: 3rem;
    margin: .5rem;
    padding: 0;
    padding-bottom: 0;
    overflow: hidden;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    line-height: inherit;
    /* color: var(--primary); */
}


/* More Menu */

#llApp .btnMore {
    position: absolute;
    top: 0;
    right: -5px;
    color: var(--on-surface);
    background-color: var(--surface);
    text-decoration: none;
}

#llApp .btnMore:hover {
    background-color: var(--secondaryLight);
}

#llApp .moreShield {
    z-index: 950;
}

#llApp .moreShield.active {
    background-color: #0d0f1000;
    pointer-events: auto;
}

#llApp .moreMenu {
    position: absolute;
    top: 0;
    visibility: hidden;
    /* right: 0; */
    max-height: 100%;
    min-width: 9rem;
    overflow-y: auto;
    scrollbar-width: thin;
    box-sizing: border-box;
    background-color: var(--surface);
    border: 1px solid var(--secondary);
    padding: 3px;
    box-shadow: 0 0 20px var(--on-surface);
    display: inline-block;
    z-index: 951;
}

#llApp .active .moreMenu {
    visibility: visible;
}

#llApp .moreMenu a {
    padding: 10px;
    text-decoration: none;
    color: var(--on-surface);
    display: block;
    cursor: pointer;
    /* transition: var(--transitionDelay) ease-in-out; */
    text-align: left;
}

#llApp .moreMenu a:hover {
    background-color: var(--secondaryLight);
}

#llApp .moreMenu a::before {
    position: relative;
    left: -0.5rem;
}

#selectionShield.shield {
    z-index: 950;
    width: 100%;
}

#selectionShield.shield.active {
    background-color: #0d0f1000;
    pointer-events: auto;
}

#selectionMenu {
    visibility: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0);
    /* max-height: 100%;
    min-width: 100px;
    overflow-y: auto;
    scrollbar-width: thin;
    box-sizing: border-box; */
    background-color: var(--surface);
    border: 1px solid var(--secondary);
    box-shadow: 0 10px 20px var(--on-surface);
    display: inline-block;
    z-index: 951;
}

#selectionShield.shield.active .menu,
#selectionMenu.active {
    visibility: visible;
}

#selectionMenu a {
    /* padding: 10px; */
    text-decoration: none;
    color: var(--on-surface);
    display: block;
    cursor: pointer;
    /* transition: var(--transitionDelay) ease-in-out; */
    text-align: left;
}

#selectionMenu a:hover {
    background-color: var(--secondaryLight);
    color: var(--on-surface);
}

span.barLabel,
div.barLabel {
    display: inline-block;
    align-items: stretch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    height: var(--buttonHeight);
    line-height: var(--buttonHeight);
    margin: auto;
    padding-left: 0.75rem;
    flex-grow: 1;
    box-sizing: border-box;
}

.colContainer label {
    line-height: var(--buttonHeight);
    margin-right: .5rem;
}

#_LANGUAGE {}

span.mouseover,
span.langHelp {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-style: italic;
    text-decoration: underline dotted;
    color: var(--hyperlink);
}

span.mouseover {
    text-decoration: underline dotted var(--hyperlink);
}

span.mouseover>span,
span.langHelp>span {
    visibility: hidden;
    background-color: var(--secondary);
    color: var(--on-surface);
    text-align: center;
    border-radius: 6px;
    padding: 5px 10px;
    position: absolute;
    bottom: 120%;
    left: 0;
    z-index: 1;
}

span.mouseover:hover>span,
span.langHelp:hover>span {
    visibility: visible;
}

div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 100vw; */
    /* height: 100vh; */
    background-color: #0d0f1000;
    transition: background-color var(--transitionDelay) ease-in-out;
    pointer-events: none;
    visibility: hidden;
    padding: 2rem;
}

div.overlay.active {
    visibility: visible;
}

div.overlayContent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid var(--on-surface);
    padding: 1rem;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    color: var(--on-surface);
    background: var(--surface);
}

div.callout {
    border: 1px solid var(--hyperlink);
    margin: 2rem 0;
    padding-bottom: 1rem;
}

div.callout>h2:first-child,
div.callout>h3:first-child,
div.callout>h4:first-child,
div.callout>h5:first-child,
div.callout>h6:first-child,
div.callout>button {
    box-sizing: border-box;
    color: var(--surface);
    background-color: var(--hyperlink);
    padding: 1rem 0.5rem;
    margin: 0 0 1rem 0;
    width: 100%;
    text-align: left;
}

div.callout p:nth-child(1) {
    padding: 1rem 0.05rem;
}

div.callout>:not(h2:first-child):not(h3:first-child):not(h4:first-child):not(h5:first-child):not(h6:first-child):not(button) {
    margin: 0 1rem;
}

div.callout.primary {
    border-color: var(--primary);
}

div.callout.primary>h2,
div.callout.primary>h3,
div.callout.primary>h4,
div.callout.primary>h5,
div.callout.primary>h6 {
    color: var(--on-primary);
    background-color: var(--primary);
}

div.callout.secondary {
    border-color: var(--secondary);
}

div.callout.secondary>h2,
div.callout.secondary>h3,
div.callout.secondary>h4,
div.callout.secondary>h5,
div.callout.secondary>h6 {
    color: var(--on-secondary);
    background-color: var(--secondary);
}

#mainContent div.video {
    position: relative;
    border: 2px solid var(--on-surface);
    margin: 2rem auto;
    max-width: 100%;
    width: 50vh;
    height: 28vh;
    background-color: var(--surface);
    cursor: pointer;
    overflow: hidden;
}

#mainContent div.video>div.videoTitle {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    padding: 1rem;
    color: var(--surface);
    background: linear-gradient(var(--on-surface), var(--on-surface), var(--on-surface), transparent);
    /* background: linear-gradient(#00000098, #00000098, #00000098, transparent); */
    padding-bottom: 3.5rem;
    opacity: 70%;
    z-index: 2;
}

#mainContent div.video>img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    opacity: 70%;
    z-index: 1;
}

#mainContent div.video>a.icon-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    height: 4rem;
    width: 4rem;
    line-height: 4rem;
    font-size: 3rem;
    z-index: 5;
}

#mainContent div.video>a.icon-download {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
}

#mainContent div.video>a.icon-closedCaption {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 5;
}

#llApp div.dropdown,
#llApp div.accordion {
    border: 1px solid var(--secondary);
    margin: 2rem 0;
    /* padding-bottom: 1rem; */
}

#llApp div.dropdown>button,
#llApp div.accordion>button {
    display: flex;
    cursor: pointer;
    box-sizing: border-box;
    color: var(--on-secondary);
    background-color: var(--secondary);
    padding: 0.75rem 0.5rem;
    /* margin: 0 0 1rem 0; */
    width: 100%;
    text-align: left;
    font-size: var(--crsFontSize);
}

#llApp div.dropdown>button:hover,
#llApp div.accordion>button:hover {
    background-color: var(--secondaryLight);
}

#llApp div.dropdown>button::before,
#llApp div.accordion>button::before {
    content: "\e916";
    font-family: 'icon';
    font-size: 1.5rem;
    padding: 0 .5rem;
}

#llApp div.dropdown>button.active::before,
#llApp div.accordion>button.active::before {
    content: "\e946";
}

#llApp div.dropdown>div,
#llApp div.accordion>div {
    margin: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out;
}

#llApp div.dropdown>div.active,
#llApp div.accordion>div.active {
    max-height: unset;
    overflow: unset;
    transition: max-height .3s ease-in-out;
}

#llApp div.dropdown.primary,
#llApp div.accordion.primary {
    border: 1px solid var(--primary);
}

#llApp div.dropdown.primary>button,
#llApp div.accordion.primary>button {
    color: var(--on-primary);
    background-color: var(--primary);
}

#llApp div.dropdown.primary>button:hover,
#llApp div.accordion.primary>button:hover {
    background-color: var(--primaryLight);
}

#llApp div.dropdown.surface>button,
#llApp div.accordion.surface>button {
    color: var(--on-surface);
    background-color: var(--surface);
    border: 1px solid var(--secondary);
}

#llApp div.dropdown.surface>button:hover,
#llApp div.accordion.surface>button:hover {
    background-color: var(--secondaryLight);
}

#mainContent #cover {
    padding-bottom: .5em;
}

#mainContent #frontCover {
    margin: auto;
    max-width: 600px;
    text-align: center;
}

#mainContent #footer,
#mainContent .footer {
    font-size: smaller;
    padding-top: 5px;
    text-align: center;
}

#mainContent #footer::before,
#mainContent .footer::before {
    background: linear-gradient(90deg, transparent 15%, #b7b7b7 30%, #b7b7b7 70%, transparent 85%);
    content: "";
    display: block;
    height: 1px;
    margin-bottom: 3px;
    width: 100%;
}

#_MASTERY {}

#masteryBar {
    position: relative;
    display: none;
    flex-direction: row;
    align-items: stretch;
    margin: 0;
    max-height: 0;
    width: 100%;
    /* overflow: hidden; */
    background-color: var(--surface);
    box-sizing: border-box;
}

#masteryBar.active {
    display: flex;
    max-height: var(--masteryBarHeight);
    height: var(--masteryBarHeight);
}

#masteryBar #btnMasteryBar {
    position: absolute;
    left: -.3rem;
    top: -3rem;
    /* right: 0;
    bottom: -2.25rem; */
    z-index: 1;
}

#masteryBar div,
#masteryBar [class*="masteryBtnId-"] {
    flex: 1;
    /* border: 1px solid var(--secondary); */
    background-color: var(--secondary);
    margin: 1px 2px 3px 2px;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
}

/* #masteryBar div:hover {
    min-width: var(--buttonHeight);
    min-height: var(--buttonHeight);
    height: var(--buttonHeight);
}
 */
#masteryBar div::before,
#masteryBar [class*="masteryBtnId-"]::before {
    color: var(--on-secondary);
    font-family: icon;
    content: '\e95c';
}

#masteryBar div.done,
#masteryBar [class*="masteryBtnId-"].done {
    background-color: var(--success);
}

#masteryBar div.done::before,
#masteryBar [class*="masteryBtnId-"].done::before {
    color: var(--on-success);
    font-family: icon;
    content: '\e91a';
}

#llApp .CanvasFeature .connectBox {
    border: 1px solid var(--secondary);
    background-color: var(--secondaryLight);
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    padding: 1rem;
}

HTML.canvasReady #llApp .CanvasFeature .connectBox {
    height: 0;
    overflow: hidden;
    border: 0;
    padding: 0;
}

HTML.canvasReady #llApp .CanvasFeature .feature {
    height: auto;
}

HTML #llApp .CanvasFeature .feature {
    height: 0;
    overflow: hidden;
    padding: 0;
}

#llApp .connectMessage {
    padding: 1rem 0;
}

#llApp .connectBox button {
    display: block;
    margin: .5rem auto;
}

#llApp .courseGrades div.accordion {
    margin: 0;
}

#llApp .assignment * {
    position: relative;
}

#llApp .assignment .assignmentHead {
    background-color: var(--secondary);
    /* padding: 0.75rem; */
    line-height: 1.3;
}

#llApp .assignment .assignmentRubric.accordion {
    margin: 0;
}

#llApp .assignment li.rubricPointer::before {
    font-family: 'icon';
    content: "\e906";
    font-size: xxx-large;
    color: var(--primary);
    position: absolute;
    left: -3rem;
}

#llApp .assignmentScore {
    position: absolute;
    display: inline-block;
    top: 0.5rem;
    right: 1rem;
    border-radius: 1rem;
    padding: 0 .5rem;
    height: 2rem;
    min-width: 2rem;
    line-height: 2rem;
    text-align: center;
    font-size: small;
    background-color: var(--primary);
    color: var(--on-primary);
    -webkit-user-select: none;
    user-select: none;
}

#llApp .assignmentScore.inactive {
    background-color: var(--secondary);
    color: var(--on-secondary);
}

#llApp .assignmentHead>.assignmentScore.inactive {
    /* background-color: var(--secondaryLight);
    color: var(--on-secondary);
    border: 1px solid var(--secondary); */
    /* filter: drop-shadow(2px 4px 6px black); */
    filter: brightness(.85);
}

#llApp .assignment .assignmentFoot p {
    margin: 0;
    padding: 0;
}

#llApp .assignmentFoot .assignmentScore,
#llApp .assignmentHead .assignmentScore {
    font-size: unset;
}

#llApp .assignment .assignmentComment.active {
    border: 2px solid var(--primary);
    background-color: var(--secondaryLight);
    font-size: var(--crsFont);
    font-size: smaller;
    margin: 0;
    padding: 1rem;
}

#llApp .assignment .assignmentComment p {
    line-height: unset;
    padding: 0;
    font-style: italic;
}

#llApp .assignmentComment .commentDate {
    font-size: smaller;
    font-weight: bold;
}

#llApp .assignmentComment .commentAuthor {
    display: block;
    text-align: right;
    font-size: smaller;
}

#llApp .gradeTotal {
    border-top: 3px solid var(--on-surface);
    padding: 0.75rem;
    line-height: 1.3;
    font-weight: bold;
    /* background-color: var(--secondary); */
}

#llApp p.hsQuestion {
    display: block;
    position: relative;
    cursor: pointer;
    /* padding-top: 1rem; */
    padding-left: 2.5rem;
    margin: 1rem 0 1rem 0;
    /* margin-left: 1.5rem; */
    /* left: -1rem; */
    font-weight: bold;
}

#llApp p.hsQuestion::before {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    /* position: relative; */
    /* left: -.5rem; */
    height: 1.5rem;
    width: 1.5rem;
    line-height: 1.5rem;
    content: "?";
    text-align: center;
    border-radius: 50%;
    border: 1px solid var(--on-surface);
}

#llApp p.hsQuestion:hover::before {
    background-color: var(--secondaryLight);
}

#llApp p.hsQuestion.active::before {
    background-color: rgb(var(--green));
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--on-error);
    content: "\e91a";
}

#llApp p.hsQuestion.active:hover::before {
    filter: brightness(125%);
}

#llApp p.hsResponse {
    margin: -.5rem 0 0 2.5rem;
    max-height: 0;
    overflow: hidden;
    transition: all .3s;
    border: 0;
    padding: 0;
}

#llApp p.hsResponse.active {
    max-height: unset;
    overflow: unset;
}

#_MULTIPLE_CHOICE {}

#llApp .multipleChoice {
    font-family: var(--crsFont);
    font-size: var(--crsFontSize);
    padding: 1rem 1rem 0 1rem;
    box-sizing: border-box;
}

#llApp p.mcQuestion {
    position: relative;
    counter-reset: listStyle;
    list-style-type: none;
    padding-top: 1rem;
    font-weight: bold;
}

#llApp .multipleChoice.squares .mcOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

#llApp .multipleChoice.squares .mcOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    aspect-ratio: 1 / 1;
    text-align: center;
}

#llApp .multipleChoice .mcOption img {
    max-height: 80%;
    max-width: 80%;
    margin-bottom: 1rem;
}

#llApp button.mcOption {
    position: relative;
    display: flex;
    margin: 1rem;
    margin-left: 0;
    /* border: 1px solid var(--on-surface); */
    border-radius: 5px;
    padding: 1rem;
    text-align: left;
    width: 100%;
    /* max-width: 300px; */
    background-color: var(--surface);
    box-shadow: 1px 1px 5px var(--secondary);
    border: 2px solid var(--secondary);
}

#llApp .mcOption {
    cursor: pointer;
    counter-increment: listStyle;
    padding: .25rem;
    margin: .5rem 0rem .5rem 2rem;
}

#llApp .mcOption:hover {
    background-color: var(--secondaryLight);
}

#llApp .mcOption.selected {
    border-width: 2px;
    border-color: var(--primary);
    background-color: var(--secondaryLight);
}

#llApp .mcOption:before {
    display: inline-block;
    margin-right: 1rem;
    border-radius: 50%;
    border: 1px solid var(--on-surface);
    height: 1.5rem;
    width: 1.5rem;
    min-width: 1.5rem;
    line-height: 1.5rem;
    content: counter(listStyle, upper-alpha);
    text-align: center;
}

#llApp .squares .mcOption:before {
    position: absolute;
    top: .5rem;
    left: .5rem;
}

#llApp .mcOption:hover::before {
    background-color: var(--secondary);
}

#llApp .noCorrect .mcOption.selected::before,
:not(#llHtml) .noCorrect .mcOption:active::before {
    content: "\e95d";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--on-surface);
    background-color: var(--surface);
}

#llApp .mcOption.selected::before,
:not(#llHtml) .mcOption:active::before {
    content: "\e90f";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--on-error);
    background-color: rgb(var(--red));
}

#llApp .mcOption.selected:hover::before {
    filter: brightness(125%);
}

#llApp .mcOption.selected.mcCorrect::before,
:not(#llHtml) .mcCorrect:active::before {
    content: "\e91a";
    font-family: 'icon';
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--on-error);
    background-color: rgb(var(--green));
}

#star {
    visibility: hidden;
    position: absolute;
    right: 28%;
    bottom: 1.3rem;
    display: inline-block;
    font-size: 2rem;
    color: var(--reward);
    z-index: 0;
    /* animation: jump .3s 1; */
}

#_PRACTICE_MULTIPLE_CHOICE {}

#llApp .multipleChoice.done .pmcOption {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

#llApp div.pmcQuestion {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    counter-reset: listStyle;
    list-style-type: none;
    padding: 1rem 0rem;
    font-weight: bold;
}

#llApp div.pmcQuestion img {
    height: 4rem;
    border-radius: 10px;
    margin-right: .5rem;
}

#llApp .pmcOptions {
    box-sizing: border-box;
    max-width: 400px;
    margin: auto;
    /* padding: .5rem; */
    width: 100%;
}

#llApp .squares .pmcOptions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1rem;
}

#llApp .squares .pmcOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* justify-content: flex-start; if text is too long*/
    margin: 0;
    aspect-ratio: 1 / 1;
    /* max-height: 200px;
    max-width: 200px; */
    text-align: center;
}

#llApp .multipleChoice.squares.expand .pmcOption {
    aspect-ratio: auto;
}

#llApp .multipleChoice.squares.scroll .pmcOption {
    justify-content: flex-start;
    overflow-y: auto;
}

#llApp .pmcOption img {
    max-height: 60%;
    max-width: 60%;
    margin-bottom: 1rem;
}

#llApp .pmcOption {
    position: relative;
    display: flex;
    /* margin: 1rem; */
    /* margin-left: 0; */
    /* border: 1px solid var(--on-surface); */
    border-radius: 5px;
    padding: .25rem;
    text-align: left;
    width: 100%;
    /* max-width: 300px; */
    background-color: var(--surface);
    box-shadow: 1px 1px 5px var(--secondary);
    border: 2px solid var(--secondary);
    cursor: pointer;
    /* counter-increment: listStyle; */
    margin: 1rem 0;
    min-height: var(--barHeight);
}

#llApp .pmcOption span {
    display: inline-block;
    margin: .5rem;
}

#llApp .pmcOption:hover {
    background-color: var(--secondaryLight);
}

#llApp .pmcOption.selected {
    border-width: 3px;
    border-color: var(--primary);
    background-color: var(--secondaryLight);
}

#llApp .pmcOption.correct {
    border-color: rgba(var(--green));
    background-color: rgba(var(--green), var(--highlightOpacity));
}

#llApp .pmcOption.correct::before {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-success);
    content: "\e91a";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: var(--success);
    /* animation: spin 1s 1; */
    /* animation: burst .5s 1; */
    animation: scale .25s 1;
}

#llApp .pmcOption.incorrect {
    border-color: rgba(var(--red));
    background-color: rgba(var(--red), var(--highlightOpacity));
}

#llApp .pmcOption.incorrect::before {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-error);
    content: "\e90f";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-error);
    background-color: rgba(var(--red));
    /* animation: spin 1s 1; */
    /* animation: burst .5s 1; */
    animation: scale .25s 1;
}

#llApp .pmcOption.corrected::before {
    position: absolute;
    top: .5rem;
    left: .5rem;
    width: 2rem;
    height: 2rem;
    line-height: 2rem;
    border-radius: 50%;
    border: 2px solid var(--on-success);
    content: "\e919";
    font-family: 'icon';
    font-size: 2rem;
    font-weight: bold;
    color: var(--on-success);
    background-color: rgba(var(--green));
    /* animation: spin 1s 1; */
    /* animation: burst .5s 1; */
    animation: scale .25s 1;
}

@keyframes scale {

    0% {
        transform: scale(.25);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes burst {

    0%,
    100% {
        transform: scale(.25) translate(3rem, -3rem);
    }

    50% {
        transform: scale(1) translate(0, 0);
    }
}

#_RESPONSES {}

#mainContent .LaTeXError {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    background-color: var(--secondary);
    line-height: 2;
    padding: .5rem;
}

.response {
    margin: 1rem 0;
    color: var(--on-surface);
    background-color: var(--surface);
}

.response:last-child {
    margin-bottom: 9rem;
}

.responsePrompt {
    margin: 1rem 0 .5rem 0;
    font-weight: bold;
    font-family: var(--crsFont);
    font-size: var(--crsFontSize);
}

.responseDate {
    position: absolute;
    bottom: 0;
    right: 0;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    display: block;
    text-align: right;
    width: 9rem;
    padding-right: .5rem;
    font-size: smaller;
    white-space: nowrap;
    overflow: hidden;
}

.responseDate:before {
    margin-left: -20px;
    margin-right: 5px;
    font-family: icon;
    font-size: 1rem;
    content: '\e92e';
}

.responseBody {
    position: relative;
    border: 1px solid var(--on-surface);
    padding: 1rem;
    padding-bottom: 2rem;
    line-height: 1.5rem;
    margin-bottom: 1rem;
}

@keyframes jump {
    0% {
        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
    }

    20% {
        transform: translate3d(100%, -100%, 0) scale3d(1.2, 1.2, 1.2) rotate(45deg);
    }

    40% {
        transform: translate3d(150%, -150%, 0) scale3d(1.6, 1.6, 1.6) rotate(90deg);
    }

    60% {
        transform: translate3d(200%, -170%, 0) scale3d(1.6, 1.6, 1.6) rotate(135deg);
    }

    80% {
        transform: translate3d(220%, -70%, 0) scale3d(1.2, 1.2, 1.2) rotate(180deg);
    }

    100% {
        transform: translate3d(220%, 30%, 0) scale3d(1, 1, 1);
    }
}

#mainContent .longAnswer p,
#mainContent .shortAnswer p {
    margin-bottom: 0;
    padding-bottom: .5rem;
    font-weight: bold;
}

#mainContent .shortAnswer input {
    margin: 0;
    padding: .75rem;
}

#mainContent .longAnswer textarea {
    padding: .75rem;
}

#_SETTINGS {}

div.settingContent {
    position: relative;
    padding: 2rem 2rem 6rem 2rem;
    margin: auto;
    max-width: 600px;
    box-sizing: border-box;
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    color: var(--on-surface);
    background-color: var(--surface);
}

div.settingContent h2 {
    font-family: var(--appFont);
    font-size: var(--appFontSize);
    font-weight: bold;
    margin: 1.5rem .5rem .5rem 0;
    color: var(--on-surface);
}

div.setting {
    box-sizing: border-box;
    position: relative;
    display: flex;
    align-items: stretch;
    padding: 0 1rem;
    min-height: var(--buttonHeight);
    text-align: left;
    text-decoration: none;
    color: var(--on-surface);
}

div.setting>label {
    display: inline-block;
    flex: 1;
    line-height: 1.5rem;
    padding: calc((var(--buttonHeight) - 1rem) / 2) 0;
    cursor: pointer;
}


/* CSS-Only Checkmark Checkbox */
input[type="checkbox"].checkmark {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    /* min-width: 2rem; */
    /* width: var(--buttonHeight); */
    /* height: var(--buttonHeight);
    line-height: var(--buttonHeight); */
    outline: 0;
    cursor: pointer;
    min-width: 1.5rem;
    width: 1.5rem;
    height: 1.5rem;
    line-height: 1.5rem;
    margin: 0.75rem;
}

input[type="checkbox"].checkmark::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Icon';
    font-size: 2rem;
    content: '\e96b';
    /* color: var(--on-surface); */
    color: var(--hyperlink);
    z-index: 1;
}

input[type="checkbox"].checkmark:hover

/* , input[type="checkbox"].checkmark:focus */
    {
    filter: brightness(1.3);
    /* filter: brightness(90%); */
    /* text-shadow: 0 0 6px var(--primary); */
}

input[type="checkbox"].checkmark:hover::after

/* ,input[type="checkbox"].checkmark:focus::after  */
    {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Icon';
    font-size: 1.85rem;
    font-weight: bold;
    content: '\e96b';
    color: var(--hyperlink);
    z-index: 0;
}

input[type="checkbox"].checkmark:checked::before {
    content: '\e96a';
    color: var(--hyperlink);
}

/* CSS-Only Switch Checkbox - Best (if browser testing checks out) */

input[type="checkbox"].switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    /* min-width: 3rem; */
    /* width: var(--buttonHeight); */
    /* height: var(--buttonHeight); */
    /* line-height: var(--buttonHeight); */
    min-width: 2.5rem;
    width: 2.5rem;
    min-height: 1.3rem;
    height: 1.3rem;
    margin: .75rem;
    outline: 0;
    cursor: pointer;
}

input[type="checkbox"].switch::before {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Icon';
    font-size: 3rem;
    content: '\e93b';
    color: var(--on-surface);
    z-index: 1;
}

input[type="checkbox"].switch:hover

/* ,input[type="checkbox"].switch:focus  */
    {
    filter: brightness(1.3);
    /* filter: brightness(90%); */
    /* text-shadow: 0 0 6px var(--primary); */
}

input[type="checkbox"].switch:hover::after

/* ,input[type="checkbox"].switch:focus::after  */
    {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Icon';
    font-size: 3.25rem;
    content: '\e93c';
    color: var(--surface);
    z-index: 0;
}

input[type="checkbox"].switch:checked::before {
    content: '\e93c';
    color: var(--hyperlink);
}

#llApp .largeInput {
    font-size: large;
    height: 2.5rem;
    margin: auto;
    width: 100%;
}


/* Radio Buttons */

#llApp .ratingScale.stars input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    min-width: 3rem;
    height: var(--buttonHeight);
    line-height: var(--buttonHeight);
    outline: 0;
    cursor: pointer;
}

#llApp .ratingScale.stars input[type="radio"]::before {
    position: relative;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-family: 'Icon';
    font-size: 2rem;
    content: '\e934';
    color: var(--on-surface);
    z-index: 1;
}

#llApp .ratingScale.stars input[type="radio"]:hover,
#llApp .ratingScale.stars input[type="radio"]:focus {
    filter: brightness(90%);
    text-shadow: 0 0 6px var(--primary);
    font-size: 110%;
}


/* #llApp .ratingScale.stars input[type="radio"]:hover::after,
#llApp .ratingScale.stars input[type="radio"]:focus::after {
    position: relative;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    font-family: 'Icon';
    font-size: 2.25rem;
    content: '\e935';
    color: var(--primary);
    z-index: 0;
} */

#llApp .ratingScale.stars input[type="radio"]:checked::before {
    content: '\e935';
    color: var(--primary);
}


/* Select Menus */

div.setting>select {
    height: 1.5rem;
    min-width: calc(var(--buttonHeight) * 2);
    /* margin: 1rem; */
    margin-top: calc((var(--buttonHeight) - 1.5rem) / 2);
    color: var(--on-surface);
    background-color: var(--surface);
    border: 1px solid var(--on-surface);
    outline-color: var(--primary);
}

div.setting>select>option:hover,
div.setting>select>option:active,
div.setting>select>option::-moz-focus-inner,
div.setting>select>option::-moz-focus-outer,
div.setting>select>option:focus,
div.setting>select>option:focus-visible {
    font-weight: bold;
    color: var(--on-primary);
    background-color: var(--primary);
}

input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    width: 100%;
    height: .4rem;
    border-radius: .2rem;
    margin: auto;
    background: var(--secondary);
    outline: none;
}

input[type="range"]::-moz-range-progress {
    border-radius: .2rem;
    height: .5rem;
    background: var(--primary);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1rem;
    height: 1rem;
    border-radius: .5rem;
    background: var(--primary);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

#fontSize {
    min-width: 12rem;
}

#lineHeight {
    min-width: 12rem;
}

div.fontSample {
    margin: 1rem;
    border: 1px solid var(--on-surface);
    padding: 1rem;
    height: 200px;
    overflow: hidden;
    font-family: var(--crsFont);
    font-size: var(--crsFontSize);
    line-height: var(--crsLineHeight);
}

#_DEBUGGING {}

.devFeature {
    display: var(--devDisplay) !important;
    /* max-height: 0; */
    /* min-height: 0; */
    /* overflow: hidden; */
}

div {
    /* border: 1px solid rgb(0, 238, 255); */
}

a {
    /* border: 1px dashed red; */
}

p {
    /* border: 1px dashed green; */
}