@charset "UTF-8";
/** navigator-online author: Michael Prescott <michael.prescott@gmail.com> (http://michaelprescott.info/) 
 * BEGIN: injected scss info 
 * navigator3-online 3.0.0
 * May 22nd 2024, 2:57:11 pm
 * END: injected scss info
 */
/* stylelint-disable */
/* ------------------------------------------------------------------------- */
/* BEGIN: styles.scss */
:root { --masquerade-banner-height: 0px; --order-menu-item-height: 0px; }

/* ------------------------------------------------------------------------- */
/* BEGIN: common/_variables.scss */
/* END: common/_variables.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: common/_mixins.scss */
.centered { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.horizontally-centered { position: absolute; left: 50%; transform: translate(-50%, 0); }

.vertically-centered { position: absolute; top: 50%; transform: translate(0, -50%); }

.debug-bounds { border-color: #ff0000; border-style: dashed; border-width: 0; }

/* stylelint-disable */
/* stylelint-enable */
/* ------------------------------------------------------------------------- */
/* BEGIN: common/mixins/_border-radius.scss */
/* stylelint-disable */
/* stylelint-enable */
/* END: common/mixins/_border-radius.scss */
/* ========================================================================= */
/* END: common/_mixins.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: common/_common.scss */
.center { margin: auto; position: relative; text-align: center; }

sup { font-size: smaller; position: relative; top: -0.4em; vertical-align: baseline; }

.clickable { cursor: pointer; }

.scrollable:hover { scrollbar-color: #555555 #f6f6f6f6; scrollbar-width: thin; }

.scrollable { flex: 1; min-height: 0; -webkit-overflow-scrolling: touch; overflow-y: auto; scrollbar-color: #c2c2c2 #f6f6f6f6; scrollbar-width: thin; }

.scrollable ::-webkit-scrollbar { /* stylelint-disable */ -webkit-appearance: none; /* stylelint-enable */ width: 8px; }

.scrollable ::-webkit-scrollbar:vertical { width: 9px; }

.scrollable ::-webkit-scrollbar:horizontal { height: 9px; }

.scrollable ::-webkit-scrollbar-track { background-color: #f6f6f6f6; border-radius: 8px; }

.scrollable ::-webkit-scrollbar-thumb { background-color: #c2c2c2; border-radius: 8px; }

.scrollable ::-webkit-scrollbar-thumb:hover { background-color: #555555; border-radius: 8px; }

.noselect, .component.send-selected-users-message-component .contact-list-container.expanded { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; -moz-user-select: none; user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ }

.icon { align-items: center; display: flex; height: 48px; justify-content: center; padding: 5px; width: 48px; }

.icon--placeholder { border: 1px solid #ff0000; height: 48px; width: 48px; }

.card { background: #ffffff; border-radius: 2px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); margin: 24px; overflow: hidden; padding: 24px 72px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

.card img { max-width: 100%; -o-object-fit: fill; object-fit: fill; }

.card h3 { font-family: 'Roboto', sans-serif; font-kerning: normal; font-size: 1em; font-weight: 600; letter-spacing: 0.0175em; line-height: 0.875em; margin-bottom: -0.25em; margin-top: 1.5em; text-transform: uppercase; }

.card h3.section-1-header { color: #5a812c; }

.card h3.section-2-header { color: #75368d; }

.card h3.section-3-header { color: #ca5000; }

.card h3.section-4-header { color: #005db9; }

.card h3.section-4-header svg { fill: #005db9; }

.card h3.section-5-header { color: #d84315; }

.card h3.section-default-header { color: #6a93b2; }

.card h3.section-standards-header { color: #007f8a; }

.card.section-1 { border-top: 12px solid #5a812c; }

.card.section-2 { border-top: 12px solid #75368d; }

.card.section-3 { border-top: 12px solid #ca5000; }

.card.section-4 { border-top: 12px solid #005db9; }

.card.section-5 { border-top: 12px solid #d84315; }

.card.section-default { border-top: 12px solid #6a93b2; }

.card:hover { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

.hamburger-icon { height: 15px; left: -2px; width: 0; }

.hamburger-icon span { background: #ffffff; border-radius: 2px; display: block; height: 2px; left: 20px; opacity: 1; position: relative; width: 20px; }

.hamburger-icon span:nth-child(1) { top: 4px; }

.hamburger-icon span:nth-child(2) { top: 8px; }

.hamburger-icon span:nth-child(3) { top: 12px; }

/* Hide, but still occupy space */
.invisible { visibility: hidden; }

/* Hide, but occupy no space */
.hidden { display: none; }

.tooltip.hidden { display: none; }

.katex-display { text-align: left; }

:root { --animate-duration: 1s; --animate-delay: 1s; --animate-repeat: 1; }

.animated { -webkit-animation-duration: var(--animate-duration); animation-duration: var(--animate-duration); -webkit-animation-fill-mode: both; animation-fill-mode: both; }

.animated.faster { -webkit-animation-duration: calc(var(--animate-duration) / 2); animation-duration: calc(var(--animate-duration) / 2); }

.animated.fast { -webkit-animation-duration: calc(var(--animate-duration) * 0.8); animation-duration: calc(var(--animate-duration) * 0.8); }

@-webkit-keyframes fadeInRight { from { opacity: 0;
    transform: translate3d(100%, 0, 0); }
  to { opacity: 1;
    transform: none; } }

@keyframes fadeInRight { from { opacity: 0;
    transform: translate3d(100%, 0, 0); }
  to { opacity: 1;
    transform: none; } }

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; }

@-webkit-keyframes slideInDown { from { transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to { transform: translate3d(0, 0, 0); } }

@keyframes slideInDown { from { transform: translate3d(0, -100%, 0);
    visibility: visible; }
  to { transform: translate3d(0, 0, 0); } }

.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; }

@-webkit-keyframes slideOutUp { from { transform: translate3d(0, 0, 0); }
  to { visibility: hidden;
    transform: translate3d(0, -100%, 0); } }

@keyframes slideOutUp { from { transform: translate3d(0, 0, 0); }
  to { visibility: hidden;
    transform: translate3d(0, -100%, 0); } }

.slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; }

ul { margin: 0; padding: 0; }

.blue-button { background-color: transparent; border: 2px solid #2183d5; border-radius: 16px; border-style: none; bottom: 10px; color: #2183d5; font-size: 1em; height: 30px; left: 10px; margin: 20px 45px 0 0; outline: none; outline-color: transparent; position: relative; width: 130px; }

.blue-button:hover { background-color: #2183d5; color: #ffffff; }

.row-full-width-container { display: flex; flex-direction: row; width: 100%; }

.column-full-width-container { display: flex; flex-direction: column; width: 100%; }

.visually-hidden { border: 0; clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

.tooltip { display: block; height: 0; overflow: visible; position: relative; width: 0; z-index: 1; }

.tooltip-right-side { pointer-events: none; right: -75px; top: -14px; }

.tooltip-content, .tooltip-arrow::after { background: #5f7f3f; border: 2px solid #ffffff; z-index: -1; }

.tooltip-arrow { bottom: -51px; height: 16px; left: -40px; margin-left: -28px; overflow: hidden; position: absolute; width: 70px; z-index: 9999; }

.tooltip-arrow::after { box-shadow: 6px 5px 9px -9px #000000, 5px 6px 9px -9px #000000; content: ''; height: 24px; left: 65px; position: absolute; top: -6px; transform: rotate(-45deg); width: 25px; }

.tooltip-content { border-radius: 6px; box-shadow: 0 0 7px #000000; color: #ffffff; display: inline-block; font: 500 0.9375em 'Roboto', sans-serif; font-stretch: condensed; margin-top: 20px; padding: 5px 10px; pointer-events: none; position: absolute; text-align: center; text-decoration: none; text-transform: uppercase; width: 200px; }

@-webkit-keyframes glowing { 0% { text-shadow: 0 0 -5px #54ad59; }
  40% { text-shadow: 0 0 10px #54ad59; }
  60% { text-shadow: 0 0 10px #54ad59; }
  100% { text-shadow: 0 0 -5px #54ad59; } }

@keyframes glowing { 0% { text-shadow: 0 0 -5px #54ad59; }
  40% { text-shadow: 0 0 10px #54ad59; }
  60% { text-shadow: 0 0 10px #54ad59; }
  100% { text-shadow: 0 0 -5px #54ad59; } }

@-webkit-keyframes boxglowing { 0%, 100% { background-color: #ffffff; }
  50% { background-color: rgba(232, 238, 243, 0.5); } }

@keyframes boxglowing { 0%, 100% { background-color: #ffffff; }
  50% { background-color: rgba(232, 238, 243, 0.5); } }

.box-glow { -webkit-animation: boxglowing 1000ms infinite; animation: boxglowing 1000ms infinite; -webkit-animation-iteration-count: 2; animation-iteration-count: 2; }

.button-glow { -webkit-animation: glowing 1000ms infinite; animation: glowing 1000ms infinite; }

.new-data-glow { -webkit-animation: glowing 1000ms infinite; animation: glowing 1000ms infinite; }

/* END: common/_common.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: _grade-colors.scss */
.pk { background-color: #b096da; }

.pk-lighten { background-color: rgba(176, 150, 218, 0.12); }

.pk-darken { background-color: #9470cd; }

.gk { background-color: #6cb33f !important; }

.gk-lighten { background-color: rgba(108, 179, 63, 0.12) !important; }

.gk-darken { background-color: #558d32; }

.g1 { background-color: #00a4e4 !important; }

.g1-lighten { background-color: rgba(0, 164, 228, 0.12) !important; }

.g1-darken { background-color: #007fb1; }

.g2 { background-color: #872175 !important; }

.g2-lighten { background-color: rgba(135, 33, 117, 0.12) !important; }

.g2-darken { background-color: #5e1751; }

.g3, .vo, .v3 { background-color: #ca5000 !important; }

.g3-lighten { background-color: rgba(202, 80, 0, 0.12) !important; }

.g3-darken { background-color: #973c00; }

.g4, .vy, .v4 { background-color: #efa705 !important; }

.g4-lighten { background-color: rgba(239, 167, 5, 0.12) !important; }

.g4-darken { background-color: #bd8404; }

.g5, .vg, .v5 { background-color: #00a94f !important; }

.g5-lighten { background-color: rgba(0, 169, 79, 0.12) !important; }

.g5-darken { background-color: #007637; }

.g6, .vr, .v6 { background-color: #c41230 !important; }

.g6-lighten { background-color: rgba(196, 18, 48, 0.12) !important; }

.g6-darken { background-color: #950e25; }

.g7, .v7 { background-color: #007dc3 !important; }

.g7-lighten { background-color: rgba(0, 125, 195, 0.12) !important; }

.g7-darken { background-color: #005c90; }

.g8, .v8 { background-color: #333092 !important; }

.g8-lighten { background-color: rgba(51, 48, 146, 0.12) !important; }

.g8-darken { background-color: #26236c; }

.g9, .v9 { background-color: #6cb33f !important; }

.g9-lighten { background-color: rgba(108, 179, 63, 0.12) !important; }

.g9-darken { background-color: #558d32; }

.g10, .v10 { background-color: #00a4e4 !important; }

.g10-lighten { background-color: rgba(0, 164, 228, 0.12) !important; }

.g10-darken { background-color: #007fb1; }

.g11, .v11 { background-color: #872175 !important; }

.g11-lighten { background-color: rgba(135, 33, 117, 0.12) !important; }

.g11-darken { background-color: #5e1751; }

.g12, .v12 { background-color: #ca5000 !important; }

.g12-lighten { background-color: rgba(202, 80, 0, 0.12) !important; }

.g12-darken { background-color: #973c00; }

.uk { background-color: #6a6a6a !important; }

.uk-lighten { background-color: rgba(106, 106, 106, 0.5) !important; }

.uk-darken { background-color: #515151; }

.pk-text { color: #b096da; }

.pk-text-lighten { color: rgba(176, 150, 218, 0.55); }

.pk-text-darken { color: #9470cd; }

.gk-text { color: #6cb33f !important; }

.gk-text-lighten { color: rgba(108, 179, 63, 0.55) !important; }

.pk-text-darken { color: #9470cd; }

.g1-text { color: #00a4e4 !important; }

.g1-text-lighten { color: rgba(0, 164, 228, 0.55) !important; }

.g1-text-darken { color: #007fb1; }

.g2-text { color: #872175 !important; }

.g2-text-lighten { color: rgba(135, 33, 117, 0.55) !important; }

.g2-text-darken { color: #5e1751; }

.g3-text { color: #ca5000 !important; }

.g3-text-lighten { color: rgba(202, 80, 0, 0.55) !important; }

.g3-text-darken { color: #973c00; }

.g4-text { color: #efa705 !important; }

.g4-text-lighten { color: rgba(239, 167, 5, 0.55) !important; }

.g4-text-darken { color: #bd8404; }

.g5-text { color: #00a94f !important; }

.g5-text-lighten { color: rgba(0, 169, 79, 0.55) !important; }

.g5-text-darken { color: #007637; }

.g6-text { color: #c41230 !important; }

.g6-text-lighten { color: rgba(196, 18, 48, 0.55) !important; }

.g6-text-darken { color: #950e25; }

.g7-text { color: #007dc3 !important; }

.g7-text-lighten { color: rgba(0, 125, 195, 0.55) !important; }

.g7-text-darken { color: #005c90; }

.g8-text { color: #333092 !important; }

.g8-text-lighten { color: rgba(51, 48, 146, 0.55) !important; }

.g8-text-darken { color: #26236c; }

.g9-text { color: #6cb33f !important; }

.g9-text-lighten { color: rgba(108, 179, 63, 0.55) !important; }

.g9-text-darken { color: #558d32; }

.g10-text { color: #00a4e4 !important; }

.g10-text-lighten { color: rgba(0, 164, 228, 0.55) !important; }

.g10-text-darken { color: #007fb1; }

.g11-text { color: #872175 !important; }

.g11-text-lighten { color: rgba(135, 33, 117, 0.55) !important; }

.g11-text-darken { color: #5e1751; }

.g12-text { color: #ca5000 !important; }

.g12-text-lighten { color: rgba(202, 80, 0, 0.55) !important; }

.g12-text-darken { color: #973c00; }

.uk-text { color: #6a6a6a !important; }

.uk-text-lighten { color: rgba(106, 106, 106, 0.5) !important; }

.uk-text-darken { color: #515151; }

/* END: _grade-colors.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: _subject-colors.scss */
.subject-arts { background-color: #cd446c !important; }

.subject-arts-text { color: #cd446c !important; }

.subject-core { background-color: #6cb33f !important; }

.subject-core-text { color: #6cb33f !important; }

.subject-default { background-color: #555555 !important; }

.subject-default-text { color: #555555 !important; }

.subject-electives { background-color: #f3834a !important; }

.subject-electives-text { color: #f3834a !important; }

.subject-language_arts { background-color: #ecbb2e !important; }

.subject-language_arts-text { color: #ecbb2e !important; }

.subject-math { background-color: #119b7d !important; }

.subject-math-text { color: #119b7d !important; }

.subject-mythology { background-color: #a58cb4 !important; }

.subject-mythology-text { color: #a58cb4 !important; }

.subject-reading { background-color: red !important; }

.subject-reading-text { color: red !important; }

.subject-science { background-color: #1496d7 !important; }

.subject-science-text { color: #1496d7 !important; }

.subject-social_studies { background-color: #c83c32 !important; }

.subject-social_studies-text { color: #c83c32 !important; }

.subject-technologies { background-color: #19afc8 !important; }

.subject-technologies-text { color: #19afc8 !important; }

.subject-world_languages { background-color: #766390 !important; }

.subject-world_languages-text { color: #766390 !important; }

.subject-physical_education { background-color: #f3834a !important; }

.subject-physical_education-text { color: #f3834a !important; }

.subject-career_exploration { background-color: #f3834a !important; }

.subject-career_exploration-text { color: #f3834a !important; }

.subject-health { background-color: #f3834a !important; }

.subject-health-text { color: #f3834a !important; }

.subject-journalism { background-color: #f3834a !important; }

.subject-journalism-text { color: #f3834a !important; }

.subject-photography { background-color: #f3834a !important; }

.subject-photography-text { color: #f3834a !important; }

.subject-fitness_basics { background-color: #f3834a !important; }

.subject-fitness_basics-text { color: #f3834a !important; }

/* END: _subject-colors.scss */
/* ========================================================================= */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/* stylelint-disable */
/** 1. Change the default font family in all browsers (opinionated). 2. Correct the line height in all browsers. 3. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS. */
/* Document ========================================================================== */
html { font-family: sans-serif; /* 1 */ line-height: 1.15; /* 2 */ -ms-text-size-adjust: 100%; /* 3 */ -webkit-text-size-adjust: 100%; /* 3 */ }

/* Sections ========================================================================== */
/** Remove the margin in all browsers (opinionated). */
body { margin: 0; }

/** Add the correct display in IE 9-. */
article, aside, footer, header, nav, section { display: block; }

/** Correct the font size and margin on `h1` elements within `section` and `article` contexts in Chrome, Firefox, and Safari. */
h1 { font-size: 2em; margin: 0.67em 0; }

/* Grouping content ========================================================================== */
/** Add the correct display in IE 9-. 1. Add the correct display in IE. */
figcaption, figure, main { /* 1 */ display: block; }

/** Add the correct margin in IE 8. */
figure { margin: 1em 40px; }

/** 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */
hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/* Text-level semantics ========================================================================== */
/** 1. Remove the gray background on active links in IE 10. 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */
a { background-color: transparent; /* 1 */ -webkit-text-decoration-skip: objects; /* 2 */ }

/** Remove the outline on focused links when they are also active or hovered in all browsers (opinionated). */
a:active, a:hover { outline-width: 0; }

/** 1. Remove the bottom border in Firefox 39-. 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ }

/** Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
b, strong { font-weight: inherit; }

/** Add the correct font weight in Chrome, Edge, and Safari. */
b, strong { font-weight: bolder; }

/** 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */
code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ }

/** Add the correct font style in Android 4.3-. */
dfn { font-style: italic; }

/** Add the correct background and color in IE 9-. */
mark { background-color: #ffff00; color: #000000; }

/** Add the correct font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` elements from affecting the line height in all browsers. */
sub { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

/* Removed by michael.prescott sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } */
sub { bottom: -0.25em; }

sup { font-size: smaller; position: relative; top: -0.4em; vertical-align: baseline; }

/* Removed by michael.prescott sup { top: -0.5em; } */
/* Embedded content ========================================================================== */
/** Add the correct display in IE 9-. */
audio, video { display: inline-block; }

/** Add the correct display in iOS 4-7. */
audio:not([controls]) { display: none; height: 0; }

/** Remove the border on images inside links in IE 10-. */
img { border-style: none; }

/** Hide the overflow in IE. */
svg:not(:root) { overflow: hidden; }

/* Forms ========================================================================== */
/** 1. Change the font styles in all browsers (opinionated). 2. Remove the margin in Firefox and Safari. */
button, input, optgroup, select, textarea { font-family: sans-serif; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ }

/** Show the overflow in IE. 1. Show the overflow in Edge. */
button, input { /* 1 */ overflow: visible; }

/** Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */
button, select { /* 1 */ text-transform: none; }

/** 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` controls in Android 4. 2. Correct the inability to style clickable types in iOS and Safari. */
button, html [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; /* 2 */ cursor: pointer; }

/** Remove the inner border and padding in Firefox. */
button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; }

/** Restore the focus styles unset by the previous rule. */
button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; }

/** Change the border, margin, and padding in all browsers (opinionated). */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */
legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ }

/** 1. Add the correct display in IE 9-. 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. */
progress { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Remove the default vertical scrollbar in IE. */
textarea { overflow: auto; }

/** 1. Add the correct box sizing in IE 10-. 2. Remove the padding in IE 10-. */
[type='checkbox'], [type='radio'] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Correct the cursor style of increment and decrement buttons in Chrome. */
[type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; }

/** 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */
[type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ }

/** Remove the inner padding and cancel buttons in Chrome and Safari on macOS. */
[type='search']::-webkit-search-cancel-button, [type='search']::-webkit-search-decoration { -webkit-appearance: none; }

/** 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */
::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ }

/* Interactive ========================================================================== */
/* Add the correct display in IE 9-. 1. Add the correct display in Edge, IE, and Firefox. */
details, menu { display: block; }

/* Add the correct display in all browsers. */
summary { display: list-item; }

/* Scripting ========================================================================== */
/** Add the correct display in IE 9-. */
canvas { display: inline-block; }

/** Add the correct display in IE. */
template { display: none; }

/* Hidden ========================================================================== */
/** Add the correct display in IE 10-. */
[hidden] { display: none; }

/* stylelint-enable */
/* ------------------------------------------------------------------------- */
/* BEGIN: common/_calvert-normalize.scss */
html, body { box-sizing: border-box; height: 100%; margin: 0; padding: 0; width: 100%; }

router-view { display: block; height: 100%; width: 100%; }

/* END: common/_calvert-normalize.scss */
/* ========================================================================= */
.calvert-btn { border-radius: 0.25rem; font-size: 1rem; padding: 0.5rem 1rem; transition: all 0.2s ease-in-out; border: 1px solid transparent; display: inline-block; font-weight: normal; line-height: 1.25; text-align: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; }

.calvert-btn:focus, .calvert-btn:hover { text-decoration: none; }

.calvert-btn:focus, .calvert-btn.focus { box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25); outline: 0; }

.calvert-btn.disabled, .calvert-btn:disabled { box-shadow: none; cursor: not-allowed; opacity: 0.65; }

.calvert-btn:active, .calvert-btn.active { box-shadow: 0 0 0 2px rgba(2, 117, 216, 0.25), inset 0 3px 5px rgba(0, 0, 0, 0.125); background-image: none; }

.calvert-btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #0275d8; border-color: #0275d8; color: #ffffff; }

.calvert-btn-primary:hover { background-color: #025aa5; border-color: #01549b; color: #ffffff; }

.calvert-btn-primary:focus, .calvert-btn-primary.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(2, 117, 216, 0.5); }

.calvert-btn-primary.disabled, .calvert-btn-primary:disabled { background-color: #0275d8; border-color: #0275d8; }

.calvert-btn-primary:active, .calvert-btn-primary.active, .show > .calvert-btn-primary.dropdown-toggle { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); background-color: #025aa5; background-image: none; border-color: #01549b; color: #ffffff; }

.calvert-btn-secondary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #ffffff; border-color: #cccccc; color: #292b2c; }

.calvert-btn-secondary:hover { background-color: #e6e6e6; border-color: #adadad; color: #292b2c; }

.calvert-btn-secondary:focus, .calvert-btn-secondary.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(204, 204, 204, 0.5); }

.calvert-btn-secondary.disabled, .calvert-btn-secondary:disabled { background-color: #ffffff; border-color: #cccccc; }

.calvert-btn-secondary:active, .calvert-btn-secondary.active, .show > .calvert-btn-secondary.dropdown-toggle { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); background-color: #e6e6e6; background-image: none; border-color: #adadad; color: #292b2c; }

.calvert-btn-info { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #5bc0de; border-color: #5bc0de; color: #ffffff; }

.calvert-btn-info:hover { background-color: #31b0d5; border-color: #2aabd2; color: #ffffff; }

.calvert-btn-info:focus, .calvert-btn-info.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(91, 192, 222, 0.5); }

.calvert-btn-info.disabled, .calvert-btn-info:disabled { background-color: #5bc0de; border-color: #5bc0de; }

.calvert-btn-info:active, .calvert-btn-info.active, .show > .calvert-btn-info.dropdown-toggle { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); background-color: #31b0d5; background-image: none; border-color: #2aabd2; color: #ffffff; }

.calvert-btn-success { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #5cb85c; border-color: #5cb85c; color: #ffffff; }

.calvert-btn-success:hover { background-color: #449d44; border-color: #419641; color: #ffffff; }

.calvert-btn-success:focus, .calvert-btn-success.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(92, 184, 92, 0.5); }

.calvert-btn-success.disabled, .calvert-btn-success:disabled { background-color: #5cb85c; border-color: #5cb85c; }

.calvert-btn-success:active, .calvert-btn-success.active, .show > .calvert-btn-success.dropdown-toggle { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); background-color: #449d44; background-image: none; border-color: #419641; color: #ffffff; }

.calvert-btn-warning { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #f0ad4e; border-color: #f0ad4e; color: #ffffff; }

.calvert-btn-warning:hover { background-color: #ec971f; border-color: #eb9316; color: #ffffff; }

.calvert-btn-warning:focus, .calvert-btn-warning.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(240, 173, 78, 0.5); }

.calvert-btn-warning.disabled, .calvert-btn-warning:disabled { background-color: #f0ad4e; border-color: #f0ad4e; }

.calvert-btn-warning:active, .calvert-btn-warning.active, .show > .calvert-btn-warning.dropdown-toggle { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); background-color: #ec971f; background-image: none; border-color: #eb9316; color: #ffffff; }

.calvert-btn-danger { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075); background-color: #d9534f; border-color: #d9534f; color: #ffffff; }

.calvert-btn-danger:hover { background-color: #c9302c; border-color: #c12e2a; color: #ffffff; }

.calvert-btn-danger:focus, .calvert-btn-danger.focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 2px rgba(217, 83, 79, 0.5); }

.calvert-btn-danger.disabled, .calvert-btn-danger:disabled { background-color: #d9534f; border-color: #d9534f; }

.calvert-btn-danger:active, .calvert-btn-danger.active, .show > .calvert-btn-danger.dropdown-toggle { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); background-color: #c9302c; background-image: none; border-color: #c12e2a; color: #ffffff; }

.calvert-flat-btn { align-items: center; border: 0; cursor: pointer; display: flex; font-size: 1em; font-weight: bold; height: 35px; padding: 5px; text-transform: uppercase; }

.calvert-btn-green { background-color: #40ad48; color: #ffffff; }

.calvert-btn-blue { background-color: #24408e; color: #ffffff; }

.calvert-btn-orange { background-color: #fbaf17; color: #ffffff; }

.calvert-btn-red { background-color: #d4582a; color: #ffffff; }

.calvert-btn-gray { background-color: #c6c8ca; color: #ffffff; }

.calvert-btn-dark-gray { background-color: #8e8e8e; color: #ffffff; }

.calvert-btn-white { background-color: #ffffff; color: #24408e; }

.calvert-btn-disabled { background-color: #c7c7c7; color: #ffffff; cursor: not-allowed; }

.calvert-flat-btn.disabled { cursor: not-allowed; }

.switch { display: inline-block; height: 26px; position: relative; width: 44px; }

/* Hide default HTML checkbox */
.switch input { display: none; }

/* The slider */
/* ------------------------------------------------------------------------- */
/* BEGIN: common/_svgs.scss */
.calvert-head-icon .cls-1 { fill: none; }

.calvert-head-icon .cls-2 { fill: #0b5ba7; }

.calvert-head-icon .cls-3 { fill: #ffffff; }

.calvert-head-icon .cls-4 { -webkit-clip-path: url("#clip-path"); clip-path: url("#clip-path"); }

.order-upload .cls-1 { fill: #2870c4; }

.order-tracking .cls-1 { fill: #2870c4; }

.online-support .cls-1 { fill: #2870c4; }

.online-support .cls-2 { fill: #ffffff; }

.lesson-manuals .cls-1 { fill: #2870c4; }

.lesson-manuals .cls-2 { fill: #ffffff; }

.submit-ticket .st0 { fill: #2870c4; }

.submit-ticket .st1 { fill: #ffffff; }

.call-us .cls-1 { fill: #2870c4; }

.call-us .cls-2 { fill: #ffffff; }

/* END: common/_svgs.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: pages/_index.scss */
body { border: 4px; box-sizing: border-box; display: flex; flex-direction: column; font-family: 'Roboto', sans-serif; font-style: normal; font-weight: normal; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; }

body > div[aurelia-app] { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; }

body #build-info { bottom: 0; color: #000000; cursor: default; display: none; opacity: 1; position: fixed; right: 0; text-align: right; }

/* END: pages/_index.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/banner/alert/_alert-banner.scss */
.component.alert-banner-component { align-items: center; display: flex; height: 88px; justify-content: center; padding: 8px; position: absolute; top: 0; width: 100%; z-index: 9; pointer-events: none; }

.alert-banner-component .message-ui.visible { visibility: visible; }

.alert-banner-component .message-ui { pointer-events: all; visibility: hidden; background: linear-gradient(180deg, #464a48 0%, #7c7c7c 100%); border-radius: 9px; border: 1px solid rgba(175, 175, 175, 0.75); box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.45); color: white; height: 100%; padding: 8px; width: 50%; }

.alert-banner-component .message-ui .close-button { background: transparent; box-shadow: 0px 0px 0px transparent; border: 0px solid transparent; text-shadow: 0px 0px 0px transparent; font-size: 1.5em; color: white; position: absolute; top: -10px; left: -15px; }

.alert-banner-component .message-ui .close-button i { background-color: rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); border-radius: 0.75em; margin: 0; padding: 0; line-height: 0.75em; border: 0px; }

.alert-banner-component .message-ui .close-button:hover { background: transparent; box-shadow: 0px 0px 0px transparent; border: 0px solid transparent; text-shadow: 0px 0px 0px transparent; }

.alert-banner-component .message-ui .close-button:active { outline: none; border: none; }

.alert-banner-component .message-ui .close-button:focus { outline: 0; }

.alert-banner-component .message-ui .message { height: 100%; display: flex; justify-content: center; flex-direction: column; padding-left: 4px; font-size: 1em; }

.alert-banner-component .message-ui .message h1 { position: relative; top: -2px; font-size: 1.1em; line-height: 1.1em; padding: 0; margin: 0; font-weight: 200; text-transform: uppercase; }

.alert-banner-component .message-ui .message h1 i.fa-exclamation-triangle { padding-top: 0; padding-left: 0px; padding-right: 2px; color: #ffd000; }

/* END: components/banner/alert/_alert-banner.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/charts/_donut-chart.scss */
.charts_donut-chart { background-color: #f5f5f5; border: 1px solid #e0e0e0; box-sizing: border-box; /* TODO: code review, move to commons and give a class name*/ /* Dont allow text selection */ cursor: default; font-weight: normal; padding-bottom: 20px; text-align: center; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; /* non-prefixed version, currently not supported by any browser */ }

.charts_donut-chart .center-alt { display: inline-block; }

.center-chart { bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top: 0; }

.center-stacking-container { height: 200px; margin: 0 auto; position: relative; width: 200px; }

.center-stacked-item { display: block; height: 120px; position: absolute; text-align: center; width: 180px; z-index: 11; }

.center-stacked-item-alt { display: block; position: absolute; text-align: center; top: 55px; width: 180px; z-index: 10; }

.chart-centered-label { -webkit-animation-delay: 0s; animation-delay: 0s; /*vertical-align: middle;*/ display: block; font-size: 1rem; font-weight: 500; position: absolute; text-align: center; top: 29%; /*transform: translateY(-50%); Not working in IE, so adjusting top to 29% instead of 50% to cover for this */ /*left: -28px;*/ width: 100%; }

.chart-centered-label .chart-centered-label-number { font-size: 2rem; }

.chart-centered-label-2 { -webkit-animation-delay: 0s; animation-delay: 0s; border-bottom: 1px solid #e0e0e0; box-sizing: border-box; color: #333333; display: block; font-size: 1.375rem; padding: 4px; position: relative; text-align: center; width: 100%; }

.donut-legend { list-style-type: none; margin-top: 20px; }

.charts_donut-chart .legend-item { align-items: center; display: flex; padding-left: 1em; }

.charts_donut-chart .legend-item-bullet { height: 12px; width: 12px; }

.charts_donut-chart .legend-item-label { color: #000000; font-size: 1.1rem; padding-left: 0.5em; }

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; }

@-webkit-keyframes zoomIn { from { opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }

@keyframes zoomIn { from { opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3); }
  50% { opacity: 1; } }

.zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; }

/* END: components/charts/_donut-chart.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/charts/_rank-chart.scss */
.rank-chart-component { background-color: #ffffff; border: 1px solid #e0e0e0; font-weight: normal; min-width: 220px; width: 100%; }

.center-stacking-container { margin: 0 auto; padding-bottom: 30px; position: relative; width: 100%; }

.rank-chart-component .value-title { background-color: #8e8e8e; border: 1px solid #e0e0e0; color: #ffffff; font-size: 1.375rem; margin-bottom: 15px; padding-bottom: 6px; padding-top: 6px; }

.rank-chart-component .chart-value { font-size: 4rem; font-weight: 400; margin-top: 20px; width: 210px; }

.rank-chart-component .chart-value .status-safe-text { background-image: url("common/assets/images/rank-chart-high.svg"); background-repeat: no-repeat; color: #66ce00; padding-top: 35px; }

.rank-chart-component .chart-value .status-warning-text { background-image: url("common/assets/images/rank-chart-med.svg"); background-repeat: no-repeat; color: #676b69; padding-top: 35px; }

.rank-chart-component .chart-value .status-danger-text { background-image: url("common/assets/images/rank-chart-low.svg"); background-repeat: no-repeat; color: red; padding-top: 35px; }

.rank-chart-component .rank-text { font-weight: bold; }

/* END: components/charts/_rank-chart.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/_component.scss */
/* was 35px */
.component { box-sizing: border-box; height: 100%; margin: 0; overflow: auto; padding: 0; width: 100%; }

*:not(select):focus { -webkit-animation: 1.5s animateBorderOne ease infinite; animation: 1.5s animateBorderOne ease infinite; border-radius: 6px; }

@-webkit-keyframes animateBorderOne { from { outline: 4px solid rgba(47, 91, 180, 0);
    outline-color: rgba(47, 91, 180, 0.1);
    outline-offset: -2px; }
  50% { outline: 4px solid #2f5bb4;
    outline-color: #2f5bb4;
    outline-offset: -4px; }
  to { outline: 4px solid rgba(47, 91, 180, 0);
    outline-color: rgba(47, 91, 180, 0.1);
    outline-offset: -2px; } }

@keyframes animateBorderOne { from { outline: 4px solid rgba(47, 91, 180, 0);
    outline-color: rgba(47, 91, 180, 0.1);
    outline-offset: -2px; }
  50% { outline: 4px solid #2f5bb4;
    outline-color: #2f5bb4;
    outline-offset: -4px; }
  to { outline: 4px solid rgba(47, 91, 180, 0);
    outline-color: rgba(47, 91, 180, 0.1);
    outline-offset: -2px; } }

/* END: components/_component.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/dev/_dev.scss */
/* END: components/dev/_dev.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/app-info/_app-info.scss */
.app-info-component { bottom: 0; color: #ffffff; cursor: pointer; height: 32px; opacity: 0.5; overflow: hidden; position: fixed; right: 0; text-align: right; width: 32px; }

.app-info-component .info-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(0, 0, 0, 0.2); display: inline-block; height: 22px; text-align: center; text-decoration: none; width: 22px; }

.app-info-component .info-button i { font-size: 1.25rem; margin-top: 2px; }

.app-info-component.expanded { background-color: rgba(0, 0, 0, 0.5); border: 1px solid black; border-radius: 0.25rem; height: auto; padding: 4px; width: auto; }

/* END: components/app-info/_app-info.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/tab-set/_tab-set.scss */
.tab-set-component { box-sizing: border-box; color: #333333; font-size: 1.25rem; font-weight: 400; height: 44px; overflow: inherit; position: relative; text-transform: uppercase; z-index: 2; }

.tab-set-component .full { width: 100%; }

.tab-set-component .half { width: 50%; }

.tab-set-component .third { box-sizing: border-box; width: calc(100% / 3); }

.tab-set-component .third.last { width: calc(100% / 3); }

.tab-set-component .quarter { width: 25%; }

.tab-set-component .tab { background-color: whitesmoke; border-bottom: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; box-sizing: border-box; cursor: pointer; float: left; height: 100%; line-height: 44px; text-align: center; }

.tab-set-component .tab a { color: #333333; text-decoration: none; }

.tab-set-component .tab:last-child { border-right: none; }

.tab-set-component .tab.selected { background-color: #fbc02d; border-bottom-color: #fbc02d; color: #ffffff; cursor: default; }

.tab-set-component .tab.selected a { color: #ffffff; }

.tab-set-component .tab .arrow-down { border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #fbc02d; bottom: calc(44px - 20px); height: 0; left: 45%; position: relative; top: -1px; visibility: hidden; width: 0; z-index: 9999; }

.tab-set-component .tab.selected .arrow-down { visibility: inherit; z-index: 9999; }

/* Override for Edge */
@supports (-ms-ime-align: auto) { .tab-set-component .third.last { /* CTN3-135: Third tab is sometimes too long by 1px */ width: calc((100% / 3) - 1px); } }

/* Override for IE */
@media screen and (min-width: 0\0) { .tab-set-component .third.last { /* CTN3-135: Third tab is sometimes too long by 1px */ width: calc((100% / 3) - 1px); } }

/* END: components/tab-set/_tab-set.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/lesson-tab-set/_lesson-tab-set.scss */
.lesson-tab-set-component { box-sizing: border-box; color: #7ea9dc; font-size: 1.125rem; font-weight: 400; height: 44px; overflow: inherit; text-transform: uppercase; }

.lesson-tab-set-component .tab { background-color: #eef1f3; border-right: 1px solid gainsboro; box-sizing: border-box; cursor: pointer; float: left; height: 64px; line-height: 44px; padding-top: 10px; text-align: center; }

.lesson-tab-set-component .tab:last-child { border-right: 0; }

.lesson-tab-set-component .tab.selected { color: #ffffff; cursor: default; font-weight: 700; }

.lesson-tab-set-component .tab-learn.selected { background-color: #548300; transition: background-color 0.25s ease-in; }

.lesson-tab-set-component .tab-learn.selected .arrow-down { border-top-color: #548300; opacity: 100; transition: border-top-color 0.25s ease-in, opacity 0.25s ease-in; }

.lesson-tab-set-component .tab-use.selected { background-color: #75368d; transition: background-color 0.25s ease-in; }

.lesson-tab-set-component .tab-use.selected .arrow-down { border-top-color: #75368d; opacity: 100; transition: border-top-color 0.25s ease-in, opacity 0.25s ease-in; }

.lesson-tab-set-component .tab-show.selected { background-color: #d64c1d; transition: background-color 0.25s ease-in; }

.lesson-tab-set-component .tab-show.selected .arrow-down { border-top-color: #d64c1d; opacity: 100; transition: border-top-color 0.25s ease-in, opacity 0.25s ease-in; }

.lesson-tab-set-component .tab .arrow-down { border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid #4483cc; bottom: calc(44px - 20px); height: 0; left: 45%; opacity: 0; position: relative; top: 10px; visibility: hidden; width: 0; z-index: 9999; }

.lesson-tab-set-component .tab.selected .arrow-down { visibility: inherit; z-index: 6; }

.lesson-tab-set-component .full { width: 100%; }

.lesson-tab-set-component .full.tab .arrow-down { left: 48.5%; }

.lesson-tab-set-component .half { width: 50%; }

.lesson-tab-set-component .third { box-sizing: border-box; width: calc(100% / 3); }

.lesson-tab-set-component .third.last { width: calc(100% / 3); }

.lesson-tab-set-component .quarter { width: 25%; }

/* Override for Edge */
/* stylelint-disable */
@supports (-ms-ime-align: auto) { .lesson-tab-set-component .third.last { /* CTN3-135: Third tab is sometimes too long by 1px */ width: calc((100% / 3) - 1px); } }

/* stylelint-enable */
/* Override for IE */
@media screen and (min-width: 0\0) { .lesson-tab-set-component .third.last { /* CTN3-135: Third tab is sometimes too long by 1px */ width: calc((100% / 3) - 1px); } }

/* END: components/lesson-tab-set/_lesson-tab-set.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/menus/_user-rank-list.scss */
.user-rank-list-component { background-color: #f5f5f5; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100%; /* non-prefixed version, currently not supported by any browser */ }

.user-rank-list-component ul { list-style: none; /* stylelint-disable */ -webkit-margin-after: 0; -webkit-margin-before: 0; -webkit-padding-start: 0; /* stylelint-enable */ }

.user-rank-list-component ul li { display: float; text-align: left; }

.user-rank-list-component ul a { color: #333333; text-decoration: none; }

.user-rank-list-component .li-section { background-color: #8e8e8e; border: 1px solid #e0e0e0; color: #ffffff; font-size: 1rem; padding: 4px; text-transform: uppercase; }

.user-rank-list-component div.student { border-bottom-color: #e0e0e0; border-bottom-style: solid; border-bottom-width: 1px; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; padding: 10px; }

.user-rank-list-component div.student-link { display: flex; flex-direction: row; align-items: center; justify-content: center; border-bottom-color: #e0e0e0; border-bottom-style: solid; border-bottom-width: 1px; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; color: #0275d8; cursor: pointer; font-size: 1.125rem; padding: 10px; }

.user-rank-list-component div.student-link .student-name { text-overflow: ellipsis; overflow: hidden; width: 100%; }

.user-rank-list-component div.student-link .student-name-chevron { margin-left: auto; }

.user-rank-list-component div.student-link .fa-chevron-right { float: right; font-size: 0.75rem; padding-left: 10px; padding-top: 4px; }

.user-rank-list-component div.student-link:hover { background-color: #d8eefa; }

.user-rank-list-component .user-count { border-bottom: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; color: #ff0000; font-size: 2.45rem; font-weight: 600; }

.user-rank-list-component .component-header { border: 1px solid #e0e0e0; color: #333333; font-size: 1.375rem; padding: 4px; }

.user-rank-list-component > ul { text-align: center; }

.user-two-columns { float: left; width: calc(50%); }

/* END: components/menus/_user-rank-list.scss */
/* ========================================================================= */
loading-indicator { background-color: #ffffff; display: inline-block; height: calc(100vh - 60px); margin: auto; overflow: hidden; position: absolute; width: 100vw; z-index: 99999; }

.falseShow { display: none; }

.loader-circles { bottom: 0; height: 200px; left: -200px; margin: auto; position: absolute; right: 0; top: -200px; transform: rotate(45deg); width: 200px; }

.loader-circles .circle { background-color: transparent; border: 2px solid #115aa6; border-bottom-color: transparent; border-radius: 50%; border-right-color: transparent; bottom: 0; box-sizing: border-box; left: 0; margin: auto; position: absolute; right: 0; text-align: center; top: 0; }

.loader-circles .circle:nth-child(even) { border-bottom-color: transparent; border-color: #115aa6; border-right-color: transparent; }

.loader-circles .circle:nth-child(odd) { border-bottom-color: transparent; border-color: #115aa6; border-right-color: transparent; }

.loader-circles .circle:nth-child(1) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 12s; animation-duration: 12s; height: 12px; width: 12px; }

.loader-circles .circle:nth-child(2) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 6s; animation-duration: 6s; height: 24px; width: 24px; }

.loader-circles .circle:nth-child(3) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 4s; animation-duration: 4s; height: 36px; width: 36px; }

.loader-circles .circle:nth-child(4) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 3s; animation-duration: 3s; height: 48px; width: 48px; }

.loader-circles .circle:nth-child(5) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 2.4s; animation-duration: 2.4s; height: 60px; width: 60px; }

.loader-circles .circle:nth-child(6) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 2s; animation-duration: 2s; height: 72px; width: 72px; }

.loader-circles .circle:nth-child(7) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 1.71429s; animation-duration: 1.71429s; height: 84px; width: 84px; }

.loader-circles .circle:nth-child(8) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; height: 96px; width: 96px; }

.loader-circles .circle:nth-child(9) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 1.33333s; animation-duration: 1.33333s; height: 108px; width: 108px; }

.loader-circles .circle:nth-child(10) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; height: 120px; width: 120px; }

@-webkit-keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

@keyframes rotate-circle { 100% { transform: rotate(360deg); } }

/* ------------------------------------------------------------------------- */
/* BEGIN: components/main-top-menu/_main-top-menu.scss */
.main-top-menu { transition: height 0.2s; background-color: #2f5bb4; box-sizing: border-box; display: flex; flex-direction: row; height: 0; overflow: hidden; position: relative; width: 100%; z-index: 8; }

.main-top-menu .separator { height: 60px; width: 8px; }

.main-top-menu .separator .separator-line { background-color: #84a1d7; height: 40px; margin: 10px 3.5px; width: 1px; }

.main-top-menu .icon { height: 60px; padding: 0; width: 48px; }

.main-top-menu .icon .data-filter { font-size: 0.7rem; }

.main-top-menu.expanded { height: 60px; overflow: visible; }

.main-top-menu .left-side-menu-toggler { transition: background-color, 0.3s; background-color: transparent; border: 0; cursor: pointer; height: 60px; margin: 0; padding: 0; width: 60px; }

.main-top-menu .left-side-menu-toggler:hover { background-color: rgba(255, 255, 255, 0.05); }

.main-top-menu .hamburger-icon { position: relative; top: -2px; }

.main-top-menu .hamburger-icon span { pointer-events: none; }

.main-top-menu li .icon { transition: background-color, 0.3s; color: #ffffff; }

.main-top-menu li .icon:hover { background-color: rgba(255, 255, 255, 0.05); }

.main-top-menu li .icon .badge { background-color: #e71316; border-radius: 100%; color: #ffffff; font-family: sans-serif; font-size: 0.8rem; font-weight: 600; height: 17px; line-height: 17px; margin-bottom: -10px; margin-left: -5px; min-width: 17px; padding: 0 1px; text-align: center; }

.main-top-menu li .icon svg { fill: #ffffff; }

.main-top-menu .fa.fa-envelope-o .badge { left: 20px; position: relative; top: -9px; }

.main-top-menu .switch-account { color: #2f5bb4; cursor: pointer; font-size: 0.8rem; }

.main-top-menu .no-bottom { margin-bottom: 4px !important; }

.main-top-menu .margin-top { margin-top: 20px !important; }

.institution-card { background: #f4f4f4; box-shadow: 1px 2px 4px #000000; padding: 5px 0; position: absolute; right: 10px; top: 100px; width: 29%; z-index: 12; }

.institution-card input { margin: 0 0 5px 5px; width: 96%; }

.institution-card .institution-list-card ul { height: 200px; list-style: none; overflow: auto; }

.institution-card .institution-list-card ul li { cursor: pointer; padding: 10px; }

.institution-card .institution-list-card ul li.selected { background: #fbc02d; }

.institutionTab { border-bottom: 1px solid #808080; height: 40px; width: 100%; }

.institutionTab .institutionName { float: left; height: 30px; margin: 0; padding: 5px; width: 60%; }

.institutionTab .institutionName h1 { margin: 0; font-size: 1.45em; }

.institutionTab .selectionDiv { cursor: pointer; float: right; height: 30px; margin: 0; padding: 5px; text-align: right; width: 30%; }

.institutionTab .selectionDiv strong, .institutionTab .selectionDiv i { color: blue; font-size: 20px; line-height: 30px; }

.institutionTab .selectionDiv i { padding-right: 15px; }

.institutionTab .selectBox { background: #f4f4f4; border: 0; color: blue; font-size: large; font-weight: bold; margin-top: 5px; width: 60%; }

.institutionTab .selectBox:focus { outline: none; }

.ml-auto { margin-left: auto; }

.top-menu--dev { box-sizing: border-box; display: flex; list-style: none outside none; min-width: 400px; }

.top-menu--dev button { background-color: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.25); font-size: 0.75rem; }

.top-menu--ctn { box-sizing: border-box; display: flex; list-style: none outside none; margin: 0; margin-left: auto; padding: 0; }

.menu-opener { transition: background-color, 0.3s; color: #ffffff; height: 60px; }

.menu-opener i { font-size: 1.2rem; }

.menu-opener:hover { background-color: rgba(255, 255, 255, 0.05); }

.menu-opener:hover i { color: #ffffff; }

.dropdown-menu-component .large-buttoned.menu { min-height: 90px; width: 300px; }

.dropdown-menu-component.expanded .large-buttoned.menu { padding: 20px; }

.menu-grid { display: flex; flex-direction: column; }

.menu-grid .row { display: flex; flex: 5; flex-direction: row; }

.menu-grid .row .moodleroom-icon { height: 30px; text-align: center; width: 50px; }

.menu-grid .square { align-items: center; display: flex; flex: 4; flex-flow: row wrap; justify-content: center; text-align: center; }

.menu-grid .square h3.label { font-size: 0.8rem; margin: 0; width: 100%; }

.menu-grid .square .no-item { background-color: rgba(0, 0, 0, 0.1); border-radius: 3px; height: 64px; margin: 6px; position: relative; width: 64px; }

.menu-grid footer, .menu-grid header { height: 20px; width: 100%; }

.student-name-centered { padding-left: 60% !important; }

.parent-viewing-student { transition: height 0.2s; align-items: center; background-color: #eef2f9; box-sizing: border-box; color: #0275d8; display: block; font-family: 'Roboto', sans-serif; font-size: 1.875rem; font-weight: 500; height: 0; letter-spacing: 0.0175em; margin: 0; padding: 10px 0 0; text-align: left; text-decoration: underline; }

.parent-viewing-student.expanded { height: 60px; }

.parent-viewing-student svg { fill: #0275d8; margin: 0 0.5em; text-decoration: underline; }

.student-mode-toggle { background-color: #eef2f9; color: #0275d8; display: flex; flex-direction: column; float: right; font-family: 'Roboto', sans-serif; height: 60px; text-align: right; width: 30%; }

.student-mode-toggle .student-mode-text { margin-right: 5px; vertical-align: sub; }

.student-mode-toggle .toggle-label { font-size: initial; font-weight: normal; padding-top: 20px; }

.student-mode-toggle .switch { display: inline-block; height: 25px; margin-right: 15px; position: relative; width: 75px; }

.student-mode-toggle .slider-on { background-color: #338707; border: 1px solid #338707 !important; bottom: 0; color: #ffffff; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.student-mode-toggle .slider-on.round { border: 1px solid #338707; }

.student-mode-toggle .slider.round { border: 1px solid #0275d8; border-radius: 34px; }

.edit-preview-toggle { display: flex; flex-direction: column; float: right; font-family: 'Roboto', sans-serif; text-align: center; }

.toggle-label { font-size: initial; font-weight: normal; }

.switch { display: inline-block; height: 25px; position: relative; width: 75px; }

.switch input { display: none; }

.slider-off { background-color: #eef2f9; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.slider::before { background-color: #0275d8; bottom: 2px; content: ''; height: 20px; left: 3px; position: absolute; transition: 0.2s; width: 20px; }

.slider-on { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.switch-button.active > .slider-on::before { background-color: #ffffff; transform: translateX(50px); }

/*------ ADDED CSS ---------*/
.off { color: #0275d8; font-family: Verdana, sans-serif; font-size: 12px; left: 54%; position: absolute; top: 46%; transform: translate(-50%, -50%); }

.on { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.75rem; left: 54%; position: absolute; top: 46%; transform: translate(-50%, -50%); }

input:checked + .slider .on { display: block; }

/*--------- END --------*/
/* Rounded sliders */
.slider.round { border-radius: 34px; }

.slider.round::before { border-radius: 50%; }

.user-menu { align-items: center; display: flex; flex-direction: row; font-size: 1.17rem; padding-right: 20px; }

.studentNameWrapper { width: 100%; }

.studentNameDiv { float: left; width: 70%; }

.studentModeBar { background-color: #ff00ff; color: #ffffff; font-size: 0.75rem; line-height: 2.5em; text-align: center; }

.parentModeBar { background-color: #157894; color: #ffffff; font-size: 0.75rem; line-height: 2.5em; text-align: center; }

/* END: components/main-top-menu/_main-top-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/main-left-side-menu/_main-left-side-menu.scss */
main-left-side-menu { height: 100%; }

.left-side-menu-component { transition: width 0.2s; background-color: #8e8e8e; box-sizing: border-box; font-family: 'Roboto', sans-serif; overflow: auto; width: 0; }

.left-side-menu-component.expanded { flex-direction: column; overflow: visible; width: 240px; }

.left-side-menu-component i { padding-right: 7px; }

.left-side-menu-component .fa-angle-left { padding-right: 11px; }

.left-side-menu-component svg { fill: #cfcfcf; }

.left-side-menu-component .menu-heading { background-color: #464a48; border-top: 1px solid #e2e2e2; padding-left: 15px; text-decoration: none; }

.left-side-menu-component .menu-heading .left-nav-count { background-color: #292929; border-radius: 25px; color: #ffffff; font-weight: 500; margin: 0 5px 0 0; padding: 3px 8px; }

.left-side-menu-component .menu-heading .align-right { float: right; }

.left-side-menu-component .menu-heading .fa:first-child { width: 20px; }

.left-side-menu-component > a, .left-side-menu-component > span > a, .left-side-menu-component .menu-heading { transition: opacity 0.4s; align-items: center; box-sizing: border-box; color: #cfcfcf; cursor: pointer; font-kerning: normal; font-size: 0.9rem; font-weight: 500; height: 48px; letter-spacing: 0.0175em; line-height: 48px; margin: 0; opacity: 1; text-decoration: none; text-transform: uppercase; width: 100%; }

.left-side-menu-component > a.hidden, .left-side-menu-component > span > a.hidden, .left-side-menu-component .menu-heading.hidden { opacity: 0; }

.left-side-menu-component > a.active, .left-side-menu-component > span > a.active, .left-side-menu-component .menu-heading.active { background-color: #333333; }

.left-side-menu-component > a.active.home, .left-side-menu-component > span > a.active.home, .left-side-menu-component .menu-heading.active.home { background-color: #fbc02d; color: #ffffff; }

.left-side-menu-component > a.active.home svg, .left-side-menu-component > span > a.active.home svg, .left-side-menu-component .menu-heading.active.home svg { fill: #ffffff; }

.left-side-menu-component > a.active.ohome.selected, .left-side-menu-component > span > a.active.ohome.selected, .left-side-menu-component .menu-heading.active.ohome.selected { background-color: #333333; }

.left-side-menu-component > a.selected, .left-side-menu-component > span > a.selected, .left-side-menu-component .menu-heading.selected { background-color: #fbc02d; color: #ffffff; }

.left-side-menu-component > a.selected svg, .left-side-menu-component > span > a.selected svg, .left-side-menu-component .menu-heading.selected svg { fill: #ffffff; }

.left-side-menu-component > a.selected-child, .left-side-menu-component > span > a.selected-child, .left-side-menu-component .menu-heading.selected-child { background-color: #333333; }

.left-side-menu-component ::-webkit-scrollbar { -webkit-appearance: none; width: 8px; }

.left-side-menu-component ::-webkit-scrollbar:vertical { width: 9px; }

.left-side-menu-component ::-webkit-scrollbar:horizontal { height: 9px; }

.left-side-menu-component ::-webkit-scrollbar-track { background-color: #f6f6f6f6; border-radius: 8px; }

.left-side-menu-component ::-webkit-scrollbar-thumb { background-color: #c2c2c2; border-radius: 8px; }

.left-side-menu-component ::-webkit-scrollbar-thumb:hover { background-color: #555555; border-radius: 8px; }

.left-side-menu-component .item-search-wrapper { background-color: #464a48; border-bottom: 1px solid rgba(255, 255, 255, 0.2); box-sizing: border-box; font-size: 0.9375rem; height: 44px; padding-left: 5px; padding-top: 2px; width: calc(100% - 1px); }

.left-side-menu-component .item-search-wrapper input { background-color: rgba(255, 255, 255, 0.05); border-bottom: 1px !important; border-left: none; border-radius: 3px; border-right: none; border-top: none; box-shadow: none !important; color: #ffffff; font-family: 'Helvetica Neue', sans-serif; font-size: 0.9375rem; font-weight: 500; height: 32px !important; left: 0; margin-left: 15px; padding: 2px; position: relative; text-transform: uppercase; top: 2px; width: calc(100% - 43px) !important; }

.left-side-menu-component .item-search-wrapper input:focus { outline: 0; }

.left-side-menu-component .item-search-wrapper i { color: #9fa4a1; float: left; font-size: 0.9375rem; left: 10px; position: relative; top: 11px; }

/* END: components/main-left-side-menu/_main-left-side-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/main-left-side-menu/_user-left-side-menu.scss */
user-left-side-menu { height: auto; }

.user-left-side-menu-component ul { box-sizing: border-box; list-style: none; margin: 0; margin-top: 0; overflow: auto; padding: 0; width: 100%; }

.user-left-side-menu-component ul.left-nav-clazzes-list { transition: max-height 0.2s; max-height: 0; }

.user-left-side-menu-component ul.left-nav-clazzes-list.expanded { max-height: calc(100vh - 384px); }

.user-left-side-menu-component ul.left-nav-clazzes-list.student-expanded { max-height: calc(100vh - 293px); }

.user-left-side-menu-component ul.left-nav-clazzes-list.simplified-student-view { max-height: calc(100vh - 149px); }

.user-left-side-menu-component ul.left-nav-clazzes-list.simplified-parent-view { max-height: calc(100vh - 209px); }

.user-left-side-menu-component ul li { background-color: #e8eef3; border-top: 1px solid #e2e2e2; color: #404040; font-kerning: normal; font-size: 0.875rem; font-weight: 400; height: 48px; letter-spacing: 0.0175em; line-height: 1.15em; overflow: hidden; padding: 0 10px 0 15px; position: relative; }

.user-left-side-menu-component ul li.selected { background-color: #fbc02d; color: #ffffff; padding-left: 7px; }

.user-left-side-menu-component ul li .lesson-milestone { bottom: 10px; color: #996699; font-family: Roboto; font-size: 1rem; font-weight: normal; position: absolute; right: 10px; }

.user-left-side-menu-component ul li .lesson-milestone span { position: relative; top: -5px; }

.user-left-side-menu-component ul li .item-title { padding-left: 4px; }

.user-left-side-menu-component ul li .item-title, .user-left-side-menu-component ul li .item-container { cursor: pointer; display: table-cell; height: 3.4em; overflow: hidden; text-align: left; vertical-align: middle; width: 200px; }

.user-left-side-menu-component ul li .icon-container { display: table-cell; height: 3em; text-align: center; vertical-align: middle; }

.user-left-side-menu-component ul li .item-title.locked, .user-left-side-menu-component ul li .item-container.locked { color: #999999; cursor: default; }

.user-left-side-menu-component ul li .retake-indicator { color: #f54d62; float: left; font-size: 0.75rem; height: 48px; line-height: 48px; }

.user-left-side-menu-component ul li .omitted-indicator { color: #C2571A; float: left; font-size: 0.75rem; height: 48px; line-height: 48px; }

.user-left-side-menu-component ul li .hide-icon { visibility: hidden; }

.user-left-side-menu-component ul li .inline { display: inline; }

.user-left-side-menu-component ul li > ul { box-sizing: border-box; height: 200px; overflow: scroll; }

.user-left-side-menu-component .left-nav-clazzes-wrapper { box-sizing: border-box; display: block; max-height: calc(100vh - 244px); overflow: hidden; position: relative; width: calc(100% - 1px); }

.user-left-side-menu-component .left-nav-clazzes-wrapper.student-expanded { max-height: calc(100vh - 276px); }

.user-left-side-menu-component .left-nav-clazzes-wrapper a { text-decoration: none; }

.user-left-side-menu-component .left-nav-clazzes-wrapper.simplified-parent-view { height: calc(100%); width: calc(100% - 1px); }

.user-left-side-menu-component .left-nav-lessons-header, .user-left-side-menu-component .left-nav-lessons-list { transition: margin-left 0.4s; box-sizing: border-box; margin-left: -240px; position: absolute; width: 240px; z-index: 99; }

.user-left-side-menu-component .left-nav-lessons-header.expanded, .user-left-side-menu-component .left-nav-lessons-list.expanded { margin-left: 0; }

.user-left-side-menu-component .left-nav-lessons-header.noUnits, .user-left-side-menu-component .left-nav-lessons-list.noUnits { max-height: calc(93vh - 161px); position: unset !important; }

.user-left-side-menu-component .left-nav-lessons-header { background-color: #333333; height: auto; line-height: 14px; margin-top: 0; min-height: 48px; overflow: hidden; padding: 14px 10px 10px 15px; top: 0; }

.user-left-side-menu-component .left-nav-lessons-list { box-sizing: border-box; height: calc(100% - 86px - 60px); top: 48px; }

.user-left-side-menu-component .left-nav-lessons-list.simplified-parent-view { height: calc(100% - 50px); }

.user-left-side-menu-component .left-nav-units-list { box-sizing: border-box; height: calc(100% - 86px - 60px); overflow-x: hidden; top: 48px; width: 240px; z-index: 99; }

.user-left-side-menu-component .left-nav-units-list .left-nav-unit-header { background-color: #999999; border-top: 1px solid #727272; }

.user-left-side-menu-component .left-nav-units-list .left-nav-unit-header.omitted .icon-container { padding-right: 14px; }

.user-left-side-menu-component .left-nav-units-list .left-nav-unit-header.omitted svg { fill: #ffffff; }

.user-left-side-menu-component .left-nav-units-list .left-nav-unit-header a { color: #ffffff; display: flex; }

.user-left-side-menu-component .left-nav-units-list.expanded { display: block; margin-left: 0; }

.user-left-side-menu-component .left-nav-units-list.parentMaxHeight { max-height: calc(100vh - 386px); }

.user-left-side-menu-component .left-nav-units-list.studentMaxHeight { max-height: calc(100vh - 292px - var(--masquerade-banner-height) - var(--order-menu-item-height)); }

.user-left-side-menu-component .left-nav-unit-lessons-list { transition: max-height 0.2s; box-sizing: border-box; max-height: 0; top: 48px; width: 240px; z-index: 99; }

.user-left-side-menu-component .left-nav-unit-lessons-list li { background-color: #e8eef3; border-top: 1px solid #e2e2e2; color: #404040; font-kerning: normal; font-size: 0.875rem; font-weight: 400; height: 48px; letter-spacing: 0.0175em; line-height: 1.15em; overflow: hidden; padding: 0 10px 0 15px; position: relative; }

.user-left-side-menu-component .left-nav-unit-lessons-list li.omitted .item-title, .user-left-side-menu-component .left-nav-unit-lessons-list li.omitted .item-container { color: #999999; cursor: default; }

.user-left-side-menu-component .left-nav-unit-lessons-list li.omitted span { color: #adb5bd; }

.user-left-side-menu-component .left-nav-unit-lessons-list li.omitted svg { fill: #495057; }

.user-left-side-menu-component .left-nav-unit-lessons-list li.omitted .icon-container { padding-right: 14px; }

.user-left-side-menu-component .left-nav-unit-lessons-list.expanded { display: block; margin-left: 0; max-height: 5000px; }

.user-left-side-menu-component .left-nav-non-unit-lesson { background-color: #e8eef3; border-top: 1px solid #e2e2e2; color: #404040; font-kerning: normal; font-size: 0.875rem; font-weight: 400; height: 48px; letter-spacing: 0.0175em; line-height: 1.15em; overflow: hidden; padding: 0 10px 0 15px; position: relative; }

.user-left-side-menu-component .left-nav-non-unit-lesson.omitted .item-title, .user-left-side-menu-component .left-nav-non-unit-lesson.omitted .item-container { color: #999999; cursor: default; }

.user-left-side-menu-component .left-nav-non-unit-lesson.omitted svg { fill: #495057; }

.user-left-side-menu-component .left-nav-non-unit-lesson.omitted span { color: #adb5bd; }

.user-left-side-menu-component .left-nav-non-unit-lesson.omitted .icon-container { padding-right: 14px; }

/* END: components/main-left-side-menu/_user-left-side-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/main-left-side-menu/_teacher-left-side-menu.scss */
teacher-left-side-menu { height: auto; }

.teacher-left-side-menu-component { height: auto; }

.teacher-left-side-menu-component ul { box-sizing: border-box; height: 100%; list-style: none; margin: 0; overflow: auto; padding: 0; width: 100%; }

.teacher-left-side-menu-component ul.left-nav-clazzes-list { transition: max-height 0.2s; max-height: 0; }

.teacher-left-side-menu-component ul.left-nav-clazzes-list.expanded { max-height: calc(100vh - 340px - var(--masquerade-banner-height) - var(--order-menu-item-height)); }

.teacher-left-side-menu-component ul.left-nav-students-list { transition: max-height 0.2s; max-height: 0; }

.teacher-left-side-menu-component ul.left-nav-students-list.expanded { margin-left: 0; max-height: calc(100vh - 340px - var(--masquerade-banner-height) - var(--order-menu-item-height)); }

.teacher-left-side-menu-component ul li { background-color: #f1f1f1; border-top: 1px solid #d8d8d8; color: #404040; font-kerning: normal; font-size: 0.875rem; font-weight: 400; height: 3.4em; letter-spacing: 0.0175em; line-height: 1.15em; overflow: hidden; padding: 0 20px 0 28px; }

.teacher-left-side-menu-component ul li.selected { background-color: #fbc02d; color: #ffffff; }

.teacher-left-side-menu-component ul li .item-title { padding-left: 4px; }

.teacher-left-side-menu-component ul li .item-title, .teacher-left-side-menu-component ul li .item-container { cursor: pointer; display: table-cell; height: 3.4em; overflow: hidden; text-align: left; vertical-align: middle; width: 200px; }

.teacher-left-side-menu-component ul li textarea { text-align: justify; -moz-text-align-last: center; /* Firefox 12+ */ text-align-last: center; text-overflow: ellipsis; white-space: normal; }

.teacher-left-side-menu-component ul li .icon-container { display: table-cell; height: 3em; text-align: center; vertical-align: middle; }

.teacher-left-side-menu-component ul li > ul { box-sizing: border-box; height: 200px; overflow: scroll; }

.teacher-left-side-menu-component .left-nav-students-list { box-sizing: border-box; top: 48px; }

/* END: components/main-left-side-menu/_teacher-left-side-menu.scss */
/* ========================================================================= */
school-admin-left-side-menu { height: auto; }

.school-admin-left-side-menu-component { height: auto; }

.school-admin-left-side-menu-component ul { box-sizing: border-box; list-style: none; margin: 0; overflow: auto; padding: 0; width: 100%; }

.school-admin-left-side-menu-component ul.left-nav-students-list { transition: max-height 0.2s; max-height: 0; }

.school-admin-left-side-menu-component ul.left-nav-students-list.expanded { max-height: calc(100vh - 481px); }

.school-admin-left-side-menu-component ul.left-nav-teachers-list { transition: max-height 0.2s; max-height: 0; }

.school-admin-left-side-menu-component ul.left-nav-teachers-list.expanded { margin-left: 0; max-height: calc(100vh - 481px); }

.school-admin-left-side-menu-component ul.left-nav-clazzes-list { transition: max-height 0.2s; max-height: 0; }

.school-admin-left-side-menu-component ul.left-nav-clazzes-list.expanded { max-height: calc(100vh - 484px); }

.school-admin-left-side-menu-component ul li { background-color: #f1f1f1; border-top: 1px solid #d8d8d8; color: #404040; font-kerning: normal; font-size: 0.875rem; font-weight: 400; height: 3.4em; letter-spacing: 0.0175em; line-height: 1.15em; overflow: hidden; padding: 0 20px 0 28px; }

.school-admin-left-side-menu-component ul li.selected { background-color: #fbc02d; color: #ffffff; }

.school-admin-left-side-menu-component ul li .icon-container { display: table-cell; height: 3em; text-align: center; vertical-align: middle; }

.school-admin-left-side-menu-component ul li .item-title { padding-left: 4px; }

.school-admin-left-side-menu-component ul li .item-title, .school-admin-left-side-menu-component ul li .item-container { cursor: pointer; display: table-cell; height: 3.4em; overflow: hidden; text-align: left; vertical-align: middle; width: 200px; }

.school-admin-left-side-menu-component ul li .icon-container { display: table-cell; height: 3em; text-align: center; vertical-align: middle; }

.school-admin-left-side-menu-component ul li a { box-sizing: border-box; color: #333333; cursor: pointer; display: block; height: 100%; overflow: hidden; padding-top: 17px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; width: 100%; }

.school-admin-left-side-menu-component ul li a.selected { color: #ffffff; }

.school-admin-left-side-menu-component ul li > ul { box-sizing: border-box; height: 200px; overflow: scroll; }

.school-admin-left-side-menu-component .left-nav-teachers-list { box-sizing: border-box; top: 48px; }

.school-admin-left-side-menu-component .add-class-item i { padding-left: 10px; }

.school-admin-left-side-menu-component .manage-user-item i { padding-left: 10px; }

.school-admin-left-side-menu-component .manage-user-item.selected a { color: #ffffff; }

sys-admin-left-side-menu { height: auto; }

.sys-admin-left-side-menu-component { height: auto; }

/* ------------------------------------------------------------------------- */
/* BEGIN: components/main-right-side-menu/_main-right-side-menu.scss */
.main-right-side-menu { transition: width 0.2s; background-color: #cfcfcf; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; overflow: auto; width: 0; }

.main-right-side-menu .content { padding: 10px; }

.main-right-side-menu .project-summary-editor { background-color: #ffffff; font-family: sans-serif; font-size: 100%; height: 150px; line-height: 1.15; margin: 0; margin-top: 2px; width: 90%; }

.main-right-side-menu input[type='text'] { margin-top: 2px; width: 90%; }

.main-right-side-menu textarea { resize: vertical; width: 100%; }

.main-right-side-menu .property { margin-bottom: 10px; }

.main-right-side-menu .list.assignments, .main-right-side-menu .list.books, .main-right-side-menu .list.materials, .main-right-side-menu .list.objectives { display: flex; flex-direction: row; }

.main-right-side-menu .list.assignments > div, .main-right-side-menu .list.books > div, .main-right-side-menu .list.materials > div, .main-right-side-menu .list.objectives > div { background-color: #ffffff; border: 1px dotted yellow; width: calc(320px - 40px); }

.main-right-side-menu .edit-lesson-objectives { border: 1px dotted red; }

.main-right-side-menu.expanded { width: 320px; }

.main-right-side-menu .add { margin-top: 4px; }

.main-right-side-menu .add:hover { text-decoration: underline; }

/* END: components/main-right-side-menu/_main-right-side-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/main-bottom-menu/_main-bottom-menu.scss */
.main-bottom-menu-component { transition: height 0.2s; /* stylelint-disable */ background-color: #ffffff; color: #ffffff; display: grid; font-size: 12pt; grid-area: footer; -ms-grid-column-span: 3; -ms-grid-columns: 324px 1fr 324px; grid-row: 3; grid-template-areas: 'left-corner center right-corner'; grid-template-columns: 324px 1fr 324px; height: 48px; overflow: hidden; /* stylelint-enable */ }

.main-bottom-menu-component.expanded { height: 48px; }

.main-bottom-menu-component .footer__left-corner { align-items: center; display: flex; grid-area: left-corner; grid-column: 1; height: 48px; }

.main-bottom-menu-component .footer__left-corner .logo-container__footer { display: inline; padding-left: 12px; }

.main-bottom-menu-component .footer__left-corner .logo-container__footer img.edmentum-logo { height: auto; width: 128px; }

.main-bottom-menu-component .footer__center { grid-area: center; grid-column: 2; height: 48px; line-height: 48px; text-align: center; white-space: nowrap; }

.main-bottom-menu-component .footer__center .gray-text__tiny { color: #6c757d; font-size: small; }

.main-bottom-menu-component .footer__right-corner { color: #6c757d; font-size: small; font-weight: 300; grid-area: right-corner; grid-column: 3; height: 48px; line-height: 48px; text-align: left; width: 100%; }

.main-bottom-menu-component .footer__right-corner a { color: #428bca; font-weight: bold; text-decoration: none; }

.main-bottom-menu-component .footer__right-corner a:hover { text-decoration: underline; }

/* END: components/main-bottom-menu/_main-bottom-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/quiz-card/_quiz-card.scss */
.quiz-card-component, .quiz-card-component.tab-learn, .quiz-card-component.tab-use, .quiz-card-component.tab-show { border: 10px solid #005cb9; margin-top: 0.5em; padding: 15px; }

.quiz-card-component .score { color: #005cb9; float: left; font-weight: bold; margin-top: 5px; }

.quiz-card-component .quiz-navigation-controls { display: flex; justify-content: space-between; }

.quiz-card-component .quiz-button-container { display: inline; text-align: left; }

.quiz-card-component .quiz-button-container-centered { text-align: center; }

.quiz-card-component .quiz-button-container-right { text-align: right; }

.quiz-card-component .interactive-button { background-color: #eaeaea; border-radius: 2px; border-style: none; cursor: pointer; padding: 15px; }

.quiz-card-component .interactive-button:hover { background-color: #dadada; }

.quiz-card-component .interactive-button:disabled { color: #cccccc; cursor: not-allowed; }

.quiz-card-component .submit-button, .quiz-card-component .next-button { background-color: #005cb9; color: #ffffff; cursor: pointer; }

.quiz-card-component .submit-button:hover, .quiz-card-component .next-button:hover { background-color: #005cb9; }

.quiz-card-component .submit-button.disabled, .quiz-card-component .next-button.disabled { background-color: #eaeaea; color: #000000; cursor: not-allowed; }

.quiz-card-component .page-number { color: #005cb9; font-weight: bold; margin-top: 5px; }

.tab-learn.quiz-card-component { border-color: #548300; }

.tab-use.quiz-card-component { border-color: #75368d; }

.tab-show.quiz-card-component { border-color: #d64c1d; }

.quiz-card-preview-details-container { display: flex; }

.quiz-card-preview-details-container .quiz-card-preview-message { background-color: #087896; color: #ffffff; display: flex; flex-direction: row; font-size: 0.875rem; font-weight: 900; height: 1.875em; letter-spacing: 0.036em; line-height: 1.7em; margin-bottom: 0.25em; margin-top: 1em; padding-left: 0.25em; padding-right: 0.25em; padding-top: 0.25em; width: 450px; }

.quiz-card-preview-details-container .quiz-card-preview-message .icon { align-items: center; display: flex; height: 2.1em; justify-content: center; padding: 4px; width: 2.1em; }

.quiz-card-preview-details-container .quiz-card-preview-message span.emphasize { font-style: italic; }

.quiz-card-preview-details-container .grading-rubic { margin-bottom: 0.25em; margin-left: auto; margin-top: 1em; padding-left: 0.25em; padding-right: 0.25em; padding-top: 0.25em; }

.quiz-card-preview-details-container .grading-rubic a { font-kerning: normal; font-size: 1rem; font-weight: normal; letter-spacing: 0.0175em; line-height: 0.875em; text-transform: none; }

.distractor { border: 1px solid rgba(128, 128, 128, 0.1); }

/* END: components/quiz-card/_quiz-card.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/cards/_clazz-card.scss */
.clazz-card-component { margin: 20px; overflow: hidden; position: relative; width: 50%; }

.clazz-card-component::after { content: ''; display: block; padding-bottom: 100%; }

.clazz-card-component-content { height: 100%; position: absolute; width: 100%; }

.card-container { border-radius: 3px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.1); cursor: pointer; display: flex; flex-direction: column; font-family: Sans-Serif; height: 148px; width: 164px; }

.clazz-card-component { float: left; height: 256px; width: 256px; }

.clazz-card .clazz-info { background-color: #ffffff; bottom: 10%; display: flex; flex-direction: column; height: 30%; justify-content: center; left: 0; position: absolute; width: 100%; }

.clazz-card .clazz-name { display: table-cell; font-size: 1.3125rem; font-weight: bold; height: 50px; overflow-y: hidden; padding-left: 4px; padding-right: 4px; position: absolute; top: 25px; transform: translate(0, -50%); vertical-align: middle; width: 250px; }

.clazz-card .clazz-student-info { bottom: 3px; color: #808080; font-size: 1rem; font-weight: 100; padding-left: 4px; position: absolute; }

.clazz-card .clazz-student-info .clazz-student-count { color: #808080; font-size: 1.125rem; }

.clazz-card .clazz-student-info .label { color: #808080; font-size: 1.125rem; }

.clazz-card .teacher-name { font-size: 2vh; font-weight: bold; padding-left: 4px; padding-top: 4px; }

.icon-circle-container { border-color: #ffffff; border-radius: 50%; /* may require vendor prefixes */ border-style: solid; border-width: 2px; display: table-cell; height: 75%; position: absolute; right: -20%; text-align: center; vertical-align: middle; width: 75%; }

.icon-circle-container svg { height: 50%; left: -3%; position: relative; top: 21%; width: 50%; }

.centering-container { align-items: center; display: flex; justify-content: center; }

.fill-to-parent-height { flex: 1; }

.overlay-parts-container .overlayer { background: #333333; height: 100%; left: 0; opacity: 0; padding: 0; position: absolute; top: 0; transition: opacity 0.5s; width: 100%; }

.overlay-parts-container .overlayer p { color: #ffffff; }

.overlay-parts-container .overlayer i { color: #ffffff; }

.overlay-parts-container .overlayer.loading { cursor: pointer; opacity: 0.4; transition: opacity 0.5s; }

.card.card-container.loading { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2); cursor: pointer !important; }

.add-clazz-card { background-color: #ffffff; border: 1px solid #e1e9f0; color: #2183d4; margin: 20px; }

.add-clazz-card .add-clazz-card-content { background-color: #e1e9f0; font-size: 1.5rem; margin: 20px; min-height: calc(100% - 40px); }

.add-clazz-card .add-clazz-card-content .fa-plus { margin-top: 60px; }

/* Nice transition, but not for here */
/* END: components/cards/_clazz-card.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/modals/_modal-dialog.scss */
.modal-dialog-visible { background: rgba(255, 255, 255, 0.7); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; }

.modal-dialog-visible .content { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 3px; box-sizing: border-box; left: 50vw; padding: 50px; position: fixed; text-align: center; top: 50vh; transform: translateX(-50%) translateY(-50%); transition: 0.5s; z-index: 2; }

.modal-dialog-visible .content p { text-align: left; }

.modal-dialog-visible .content .btn-container { float: right; }

.modal-dialog-visible .content button { border: 0; border-radius: 3px; cursor: pointer; font-size: 0.875rem; font-weight: bold; height: 35px; margin: 0 10px; padding: 3px 20px 4px; }

.modal-dialog-visible .content button:nth-child(odd) { background-color: #ffffff; border: 1px solid #325db1; color: #325db1; }

.modal-dialog-visible .content button:nth-child(even) { background-color: #325db1; border: 1px solid #325db1; color: #ffffff; }

.modal-dialog-hidden { display: none; }

/* END: components/modals/_modal-dialog.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/modals/_create-demo-institution-dialog.scss */
.create-demo-institution-dialog-visible { background: rgba(255, 255, 255, 0.7); height: 100%; left: 0; position: fixed; top: 0; width: 100%; z-index: 10000; }

.create-demo-institution-dialog-visible .content { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 3px; box-sizing: border-box; left: 50vw; padding: 40px; padding-bottom: 20px; position: fixed; text-align: center; top: 50vh; transform: translateX(-50%) translateY(-50%); transition: 0.5s; z-index: 2; }

.create-demo-institution-dialog-visible .content .input-fields { border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.025); padding: 4px; display: flex; flex-direction: column; align-items: flex-end; }

.create-demo-institution-dialog-visible .content .input-fields label { font-weight: 500; }

.create-demo-institution-dialog-visible .content .input-fields input { width: 250px; padding: 4px; margin-bottom: 8px; }

.create-demo-institution-dialog-visible .content p { text-align: left; }

.create-demo-institution-dialog-visible .content .btn-container { text-align: right; }

.create-demo-institution-dialog-visible .content button { border: 0; border-radius: 3px; cursor: pointer; font-size: 0.875rem; font-weight: bold; height: 35px; margin: 0 10px; padding: 3px 20px 4px; }

.create-demo-institution-dialog-visible .content button[disabled] { opacity: .15; cursor: default; pointer-events: none; }

.create-demo-institution-dialog-visible .content button#create-demo { background-color: #ffffff; border: 1px solid #325db1; color: #325db1; }

.create-demo-institution-dialog-visible .content button#close-create-demo, .create-demo-institution-dialog-visible .content button#cancel-create-demo { background-color: #325db1; border: 1px solid #325db1; color: #ffffff; }

.create-demo-institution-dialog-visible .content .error-message { border-radius: 3px; border: 1px solid red; padding: 4px; background-color: rgba(255, 0, 0, 0.025); color: red; position: relative; bottom: 0px; font-size: .8em; }

.create-demo-institution-dialog-hidden { display: none; }

/* END: components/modals/_create-demo-institution-dialog.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/dropdown-menu/_connected-menu.scss */
.component.connected-menu-component { display: inline; }

.connected-menu-component { display: inline-block; position: relative; width: 0; }

.connected-menu-component .positioner { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0; }

.connected-menu-component .bordered-triangle-up { position: absolute; width: 0; z-index: 99999; }

.connected-menu-component span.menu-opener { cursor: pointer; z-index: -90; }

.connected-menu-component span.menu-opener.disabled { cursor: default; }

.connected-menu-component div.menu-opener { cursor: pointer; }

.connected-menu-component div.menu-opener.disabled { cursor: default; }

.connected-menu-component .menu { background-color: #fefaef; border: 1px solid #a6a8a8; box-sizing: border-box; color: #2c2e35; cursor: default; font-size: 1.2rem; margin: 0; margin-top: 0; min-width: 260px; padding-right: 0; padding-top: 0; position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; visibility: hidden; width: 260px; }

.connected-menu-component .menu .menu-section-header { background-color: #fac23c; border-top-left-radius: 4px; border-top-right-radius: 4px; box-sizing: border-box; color: #2c2e35; font-size: 18pt; font-weight: bolder; line-height: 2em; margin: 0; margin-bottom: 0.75rem; margin-top: 0; min-width: 258px; padding: 0; padding-left: 14px; width: 258px; }

.connected-menu-component .menu .menu-section-subheader { font-size: 16pt; font-weight: bold; height: 1em; line-height: 1em; margin-bottom: 0; margin-top: 0; padding-bottom: 0; padding-left: 14px; padding-top: 0; }

.connected-menu-component .menu > ul { box-sizing: border-box; left: 0; list-style-type: none; margin: 0; margin-bottom: 14px; margin-left: 14px; margin-right: 14px; padding: 0; position: relative; }

.connected-menu-component .menu > ul > li { margin: 0; margin-bottom: 0.45rem; margin-top: 0.45rem; padding: 0; }

.connected-menu-component .menu > ul > li p { line-height: 1em; margin: 0; }

.connected-menu-component.expanded .positioner { background-color: #008000; }

.connected-menu-component.expanded .menu { border-radius: 4px; box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25), 0 4px 4px rgba(0, 0, 0, 0.22); visibility: visible; z-index: 10000; }

/* END: components/dropdown-menu/_connected-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/dropdown-menu/_dropdown-menu.scss */
.component.dropdown-menu-component { display: inline; }

.dropdown-menu-component:focus .menu-opener svg { -webkit-animation: 2s animateBorderOne ease infinite; animation: 2s animateBorderOne ease infinite; outline: 2px solid rgba(193, 220, 250, 0.5); outline-offset: -2px; }

.dropdown-menu-component { display: inline-block; position: relative; width: 0; }

.dropdown-menu-component .positioner { height: 0; left: 0; opacity: 0; position: absolute; top: 0; width: 0; }

.dropdown-menu-component .bordered-triangle-up { position: absolute; width: 0; z-index: 99999; }

.dropdown-menu-component span.menu-opener { cursor: pointer; z-index: -90; }

.dropdown-menu-component span.menu-opener.disabled { cursor: default; }

.dropdown-menu-component div.menu-opener { cursor: pointer; }

.dropdown-menu-component div.menu-opener.disabled { cursor: default; }

.dropdown-menu-component .menu { background-color: #ffffff; border: 1px solid #a6a8a8; box-sizing: border-box; color: #636c72; cursor: default; font-size: 1.2rem; margin: 0; min-width: 260px; padding-right: 20px; position: absolute; -webkit-user-select: none; -moz-user-select: none; user-select: none; visibility: hidden; width: 260px; }

.dropdown-menu-component .menu .menu-section-header { box-sizing: border-box; color: #000000; font-size: 1.2rem; font-weight: bolder; line-height: 0.75em; margin: 0; margin-bottom: 0.75rem; margin-top: 1.05rem; padding: 0; width: 100%; }

.dropdown-menu-component .menu > ul { box-sizing: border-box; left: 0; list-style-type: none; margin: 0; padding: 0; position: relative; }

.dropdown-menu-component .menu > ul > li { line-height: 1.13rem; margin: 0; margin-bottom: 0.45rem; margin-top: 0.45rem; padding: 0; }

.dropdown-menu-component.expanded .positioner { background-color: #008000; }

.dropdown-menu-component.expanded .inner-triangle { border-bottom: 10px solid #ffffff; border-left: 10px solid transparent; border-right: 10px solid transparent; height: 0; left: 1px; position: absolute; top: 2px; width: 0; z-index: 100; }

.dropdown-menu-component.expanded .outer-triangle { border-bottom: 12px solid #a6a8a8; border-left: 11px solid transparent; border-right: 11px solid transparent; height: 0; position: absolute; width: 0; z-index: 99; }

.dropdown-menu-component.expanded .bordered-triangle-up { position: absolute; z-index: 99999; }

.dropdown-menu-component.expanded .menu { padding: 4px; padding-bottom: 8px; padding-left: 8px; padding-right: 8px; padding-top: 8px; visibility: visible; z-index: 10000; }

/* END: components/dropdown-menu/_dropdown-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/dropdown-menu/_take-action-dropdown-menu.scss */
.button-container { display: flex; height: 25px; }

.button-container .blue-btn { background-color: #2f5bb4; border: 2px solid #2f5bb4; border-radius: 16px; border-style: none; bottom: 10px; color: #ffffff; font-size: 1rem; height: 30px; left: 10px; margin: 10px 45px 0 0; outline: none; outline-color: transparent; position: relative; width: 130px; }

.button-container .pull-right { margin-left: auto; margin-right: 0; }

.take-action-dropdown-menu-component { position: relative; right: -10px; top: -10px; }

.take-action-dropdown-menu-component.expanded .take-action-menu { background-color: #464a48; }

.take-action-dropdown-menu-component.expanded .take-action-menu span { color: #cfcfcf; }

.take-action-dropdown-menu-component.expanded .take-action-menu i.fa { color: #cfcfcf; }

.take-action-dropdown-menu-component.expanded .menu { bottom: -29px; font-size: 1rem; left: -10px; min-width: 100%; position: relative; white-space: normal; width: calc(100% + 20px); /*width: calc(20vw - 58px);*/ }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .take-action-dropdown-menu-component.expanded .menu { bottom: -11px; } }

.take-action-dropdown-menu-component .bordered-triangle-up { display: none; }

.take-action-dropdown-menu-component .take-action-menu { transition: opacity 0.4s; align-items: center; box-sizing: border-box; cursor: pointer; font-kerning: normal; font-size: 0.9375rem; font-weight: 500; height: 53px; letter-spacing: 0.0175em; margin: 0; opacity: 1; padding: 18px 20px 0 10px; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; width: 100%; z-index: 3; }

.take-action-dropdown-menu-component .take-action-menu span { color: blue; }

.take-action-dropdown-menu-component .take-action-menu i.fa { color: blue; font-size: 1.5rem; margin-left: -2px; }

.take-action-dropdown-menu-component .menu { background-color: #464a48; border: 0; margin-top: -12px; padding: 0; right: 0; text-align: left; width: 200px; }

.take-action-dropdown-menu-component .menu .menu-section-header { color: #ffffff; font-size: 0.9rem; }

.take-action-dropdown-menu-component .menu .menu-section-header i { padding-right: 4px; }

.take-action-dropdown-menu-component .menu ul i { margin-left: 0; }

.take-action-dropdown-menu-component .menu li:hover { color: #ffffff; }

.take-action-dropdown-menu-component .menu li:hover svg { fill: #ffffff; }

.take-action-dropdown-menu-component .menu li { color: #cfcfcf; cursor: pointer; font-weight: 100; padding: 10px; padding-bottom: 0; padding-top: 20px; }

.take-action-dropdown-menu-component .menu li span { line-height: 2em; }

.take-action-dropdown-menu-component .menu li svg { fill: #cfcfcf; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { .take-action-dropdown-menu-component .take-action-menu { padding: 10px 20px 0 10px; white-space: normal; } }

/* END: components/dropdown-menu/_take-action-dropdown-menu.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/clazz-daily-schedule/_clazz-daily-schedule.scss */
.clazz-daily-schedule-component .row-placeholder { direction: row; display: flex; }

.clazz-daily-schedule-component .item-placeholder { background-color: #ffa500; border: 1px dotted #ff0000; height: 100px; width: 100px; }

/* END: components/clazz-daily-schedule/_clazz-daily-schedule.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/calendars/_user-attendance-calendar.scss */
.component.user-attendance-calendar-component { background-color: #f5f5f5; display: flex; height: 100%; justify-content: center; overflow-x: hidden; }

.user-attendance-calendar-component { box-sizing: border-box; display: flex; justify-content: center; padding: 40px 40px 0; width: 100%; }

.user-attendance-calendar-component button { background-color: transparent; background-image: none; border: 0; box-shadow: none; }

.user-attendance-calendar-component .center { margin: auto; position: relative; text-align: center; }

.user-attendance-calendar-component .attendance-calendar-container { align-items: center; background-color: #f5f5f5; box-sizing: border-box; display: table; flex-direction: column; width: 80%; }

.user-attendance-calendar-component .calendar-container { background-color: #ffffff; border: 1px solid #d8d8dd; }

.user-attendance-calendar-component .wrapper-attendance { display: flex; }

.user-attendance-calendar-component .total-attendance { background-color: #8e8e8e; border-bottom: thin solid #a0a0a0; color: #ffffff; font-size: 1.4rem; font-weight: bold; margin: 0; padding-bottom: 10px; padding-top: 10px; }

.user-attendance-calendar-component .day-count { color: #ffffff; font-weight: bold; }

.user-attendance-calendar-component .day-count-subheader { color: #888888; font-weight: bold; }

.user-attendance-calendar-component .month-title-container { display: flex; flex-direction: row; height: 8%; justify-content: center; width: 100%; }

.user-attendance-calendar-component .month-title-container .prev-button-container { text-align: right; width: 20%; }

.user-attendance-calendar-component .month-title-container .prev-button-container .prev-month { color: #fbc02d; cursor: pointer; font-size: 2.2rem; }

.user-attendance-calendar-component .month-title-container .month-container { text-align: center; width: 60%; }

.user-attendance-calendar-component .month-title-container .month-container .month-title { background-color: #ffffff; color: #000000; font-size: 2.2rem; padding: 0; }

.user-attendance-calendar-component .month-title-container .next-button-container { width: 20%; }

.user-attendance-calendar-component .month-title-container .next-button-container .next-month { color: #fbc02d; cursor: pointer; font-size: 2.2rem; text-align: left; }

.user-attendance-calendar-component .calendar { font-size: 2.45rem; font-weight: 200; }

.user-attendance-calendar-component .calendar thead { border-bottom: 1px solid #888888; }

.user-attendance-calendar-component .calendar th { color: #a0a0a0; font-size: 1.6rem; font-weight: normal; height: 80px; text-align: center; width: 80px; }

.user-attendance-calendar-component td { height: 80px; text-align: center; width: 80px; }

.user-attendance-calendar-component td.diff-month button span { color: #c8c8c8; }

.user-attendance-calendar-component td.active-day button span { border-bottom: 3px solid #fbc02d; }

.user-attendance-calendar-component td.today { border-radius: 50%; box-shadow: 0 0 0 3px #fbc02d; }

.user-attendance-calendar-component td.expanded { background-color: #fbc02d; border-radius: 50%; }

.user-attendance-calendar-component td.expanded button span { border-bottom: 3px solid #ffffff; color: #ffffff; }

.user-attendance-calendar-component td.today button span { font-weight: 200; }

.attendance-details-wrapper { display: flex; flex-direction: column; justify-content: center; }

.attendance-details-wrapper .attendance-detail-second-row { background-color: whitesmoke; border-radius: 2px; font-size: 1.4rem; height: 40px; margin-top: 16px; padding-top: 10px; text-align: center; }

.attendance-details-wrapper .attendance-detail-second-row .lighten-text { color: #888888; font-size: 1.4rem; font-weight: bold; padding-left: 10px; }

.attendance-details-wrapper .attendance-detail-first-row { background-color: whitesmoke; border-radius: 2px; display: flex; flex-direction: row; font-size: 1.4rem; height: 40px; margin-top: 16px; padding-top: 10px; text-align: right; }

.attendance-details-wrapper .attendance-detail-first-row .hours-text { width: 65%; }

.attendance-details-wrapper .attendance-detail-first-row .hours-attended { text-align: left; width: 20%; }

.attendance-details-wrapper .attendance-detail-first-row .hours-attended input { border-radius: 5px; width: 100%; }

.attendance-details-wrapper .attendance-detail-first-row .hours-attended .invalid-attendance { border-color: #ff0000; }

.attendance-details-wrapper .attendance-detail-first-row .edit-hours { width: 15%; }

.attendance-details-wrapper .attendance-detail-first-row .edit-hours a { padding-right: 10px; }

.attendance-details-wrapper .attendance-detail-first-row .lighten-text { color: #888888; font-size: 1.4rem; font-weight: bold; padding-left: 10px; }

.attendance-details-wrapper .attendance-error-text { color: #ff0000; font-style: italic; text-align: center; }

.attendance-details-wrapper .attendance-info-text { font-style: italic; text-align: center; }

.attendance-details-wrapper .attendance-detail-table.class-table { width: 100%; }

.attendance-details-wrapper .attendance-detail-table { border-collapse: collapse; margin-bottom: 20px; margin-top: 16px; width: 50%; }

.attendance-details-wrapper .attendance-detail-table th { background-color: #8e8e8e; border: 1px solid #d8d8dd; color: #ffffff; height: 50px; width: 50%; }

.attendance-details-wrapper .attendance-detail-table tr:nth-child(even) { background-color: #f1f1f1; }

.attendance-details-wrapper .attendance-detail-table tr:nth-child(odd) { background-color: #ffffff; }

.attendance-details-wrapper .attendance-detail-table td { border: 1px solid #d8d8dd; height: 50px; }

/* END: components/calendars/_user-attendance-calendar.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/progress/_basic-progress-bar-component.scss */
.component.basic-progress-bar-component { background-color: transparent; }

.basic-progress-bar-component { border-color: #ffd500; border-style: dashed; border-width: 0; background-color: rgba(97, 61, 124, 0.8); background: transparent; font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif; margin-bottom: -5px; min-width: 220px; overflow-x: hidden; }

.basic-progress-bar-component .progress-container { margin-bottom: 20px; margin-top: 20px; text-align: center; width: 70%; }

.basic-progress-bar-component label { border-radius: 3px; color: #ffffff; cursor: pointer; float: right; font-size: 1rem; font-weight: bold; line-height: 0; margin: 0 5px 20px; padding: 3px 8px; position: relative; right: -10px; top: -12px; }

.basic-progress-bar-component .progress-container .progress { margin: 0 auto; width: 100%; }

.basic-progress-bar-component .progress { background: rgba(100, 100, 100, 0.5); border-radius: 6px; box-shadow: inset 0 1px 2px rgba(135, 135, 135, 0.25), 0 1px rgba(255, 255, 255, 0.08); padding: 4px; }

.basic-progress-bar-component .progress-bar { background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); border-radius: 4px; box-shadow: 0 0 1px 1px rgba(135, 135, 135, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); height: 16px; transition: 0.4s linear; transition-property: background-color; }

.basic-progress-bar-component .status-danger-text > .progress-bar { background-color: #de1215; color: #de1215; }

.basic-progress-bar-component .status-warning-text > .progress-bar { background-color: #676b69; color: #676b69; }

.basic-progress-bar-component .status-safe-text > .progress-bar { background-color: #3b863e; color: #3b863e; }

.basic-progress-bar-component .status-unknown-text > .progress-bar { background-color: #000000; color: #000000; }

.basic-progress-bar-component .status-unknown-text { color: #000000; }

.basic-progress-bar-component .status-danger-text { color: #ffffff; }

.basic-progress-bar-component .status-warning-text { color: #ffffff; }

.basic-progress-bar-component .status-safe-text { color: #ffffff; }

.basic-progress-bar-component .complete-label { color: #ffffff; font-size: 0.9rem; font-weight: bold; vertical-align: top; }

/* END: components/progress/_basic-progress-bar-component.scss */
/* ========================================================================= */
.simple-top-nav-bar-component .animation-bounds ul { list-style-type: none; padding-left: 10px; }

.simple-top-nav-bar-component .animation-bounds .menu-item { align-items: center; cursor: pointer; display: flex; height: 100%; position: relative; }

.simple-top-nav-bar-component .animation-bounds .menu-item .menu-item-icon { color: #ffffff; position: relative; }

.simple-top-nav-bar-component .animation-bounds .menu-item .menu-item-icon i { font-size: 1.5rem; }

/* ------------------------------------------------------------------------- */
/* BEGIN: components/tile/_tile.scss */
.tile-component { background-color: #487497; border-radius: 7px; height: 240px; margin: 20px; overflow: hidden; position: relative; width: 240px; }

.tile-component a { background-color: #ffffff; color: #487497; display: block; font-size: 1.3rem; margin-top: 115px; padding: 20px; text-decoration: none; }

.tile-component compose svg { border: 2px solid #ffffff; border-radius: 100px; height: 100px; padding: 30px 20px 10px 30px; position: absolute; right: -5px; top: -2px; width: 90px; }

.tile-component compose svg path { fill: #ffffff; }

/* END: components/tile/_tile.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/list/_user-selector-list-item.scss */
.user-selector-list-item-component { display: flex; flex-direction: row; padding-top: 4px; padding-bottom: 4px; margin-left: 10px; overflow-x: hidden; }

.user-selector-list-item-component.odd { background-color: #f1f1f1; }

.user-selector-list-item-component.even { background-color: white; }

.user-selector-list-item-component a { text-decoration: none; }

.user-selector-list-item-component .col-loginname { width: 25%; }

.user-selector-list-item-component .col-lastname { width: 20%; }

.user-selector-list-item-component .col-firstname { width: 20%; }

.user-selector-list-item-component .col-institution { width: 35%; }

/* END: components/list/_user-selector-list-item.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/tables/_student-clazz-table.scss */
.clazz-report-component { background-color: #fafafa; font-weight: normal; margin-left: 12px; /*height: 250px; Removed to fix issue PAWEB-753 where not all classes were showing for the admin view*/ margin-top: 15px; width: calc(100% - 24px); }

.clazz-report-component table { border-collapse: collapse; padding-left: 2%; padding-right: 2%; width: 100%; }

.clazz-report-component table.center { position: relative; }

.clazz-report-component thead tr th { background-color: #1072b4; border-radius: 0; border-right: 1px solid rgba(94, 97, 103, 0.1); border-style: none; color: #ffffff; }

.clazz-report-component .student-table { border: 1px solid #e0e0e0; }

.clazz-report-component .performance-header { background-color: #8e8e8e; }

.clazz-report-component .progress-header { background-color: #8e8e8e; }

.clazz-report-component tr.sub-header th { background-color: #f0f0f0; color: #000000; font-size: 0.8rem; font-weight: normal; padding-bottom: 4px; padding-top: 4px; width: 7.5%; }

.clazz-report-component th.calvert-row * { line-height: 16px; margin: 0; }

.clazz-report-component th.calvert-row { border-right: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 4px; padding-left: 0.5em; padding-right: 0.5em; padding-top: 4px; }

.clazz-report-component th.calvert-row:first-child { background-color: #8e8e8e; width: 31%; }

.clazz-report-component th.calvert-row:nth-child(2) { background-color: #8e8e8e; width: 8%; }

.clazz-report-component th.calvert-row:nth-child(3) { width: 30%; }

.clazz-report-component th.blank { background-color: rgba(255, 255, 255, 0); }

.clazz-report-component tr.student-table-row { background-color: #ffffff; }

.clazz-report-component tr.student-table-row.alt { background-color: #f1f1f1; }

.clazz-report-component tr.sub-header th.col-highlight, .clazz-report-component .alt td.col-highlight { background-color: #e3dbd1; }

.clazz-report-component td.col-highlight { background-color: #f4eee6; }

.clazz-report-component td { border-right: 1px solid #e0e0e0; padding-bottom: 4px; padding-left: 0.5em; padding-right: 1em; padding-top: 4px; }

.clazz-report-component td.row-header { background-color: #ffffff; }

.clazz-report-component td.clazz-link { color: #000000; padding-right: 0.5em; text-align: left; }

.clazz-report-component td.clazz-link .fa-check { color: #66ce00; }

.clazz-report-component td.clazz-link .fa-warning { color: red; }

.clazz-report-component td.clazz-link .fa-chevron-right { float: right; font-size: 0.75rem; padding-left: 10px; padding-top: 4px; }

.clazz-report-component tr.au-target { height: 48px; }

.clazz-report-component tr.alt td.row-header { background-color: #f1f1f1; }

.clazz-report-component tr.alt { background-color: #f0f0f0; }

.clazz-report-component .status-safe-text { color: #66ce00; }

.clazz-report-component .status-warning-text { /*color: rgba(255, 206, 0, 1);*/ }

.clazz-report-component .status-danger-text { color: red; }

/* END: components/tables/_student-clazz-table.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/uploader/_uploader.scss */
.qq-upload-spinner { background: url("common/assets/images/loading.gif"); display: inline-block; height: 15px; vertical-align: text-bottom; width: 15px; }

/* END: components/uploader/_uploader.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/messaging/_send-selected-users-message-component.scss */
.send-selected-users-message-component .input-container.disabled { cursor: default; }

.send-selected-users-message-component .input-container { background-color: #f1f1f1; border-top-left-radius: 6px; border-top-right-radius: 6px; cursor: pointer; min-height: 36px; padding-bottom: 10px; }

.send-selected-users-message-component .input-container ul.entered-contacts { padding: 2px; width: calc(100% - 2px); }

.send-selected-users-message-component .input-container ul.entered-contacts li.toItem { float: left; margin-top: 6px; }

.send-selected-users-message-component .input-container ul.entered-contacts li.toItem span { color: #666666; font-size: 1.2rem; }

.send-selected-users-message-component .input-container ul.entered-contacts li.entered-contact { background-color: #2871c5; border-radius: 3px; color: #ffffff; float: left; margin: 2px; padding: 4px 4px 4px 12px; }

.send-selected-users-message-component .input-container ul.entered-contacts li.entered-contact span.contact-label.extra-pad-right-for-reply { padding-right: 10px; }

.send-selected-users-message-component .input-container ul.entered-contacts li.entered-contact button.remove-contact { background-color: transparent; border-radius: 18px; border-style: none; color: rgba(255, 255, 255, 0.3); cursor: default; font-size: 1rem; margin-right: 2px; }

.send-selected-users-message-component .input-container ul.entered-contacts li.entered-contact button.remove-contact:focus, .send-selected-users-message-component .input-container ul.entered-contacts li.entered-contact button.remove-contact:hover { background-color: #468bda; color: orange; outline: none; }

.send-selected-users-message-component .input-container.expanded { height: calc(100% - 100px); top: 20px; }

.send-selected-users-message-component #toggle-lists-btn { background-color: transparent; border: 1px solid transparent; border-radius: 6px; color: #3075c7; cursor: pointer; float: right; font-size: 1rem; font-weight: normal; height: 30px; line-height: 1em; margin: 2px; right: 5px; text-align: center; top: -40px; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; white-space: nowrap; width: 60px; }

.send-selected-users-message-component #toggle-lists-btn::after { content: '\f107'; font-family: 'FontAwesome'; font-size: 1.5rem; }

.send-selected-users-message-component #toggle-lists-btn.expanded::after { content: 'Done'; font-family: 'Roboto', sans-serif; font-size: 1rem; }

.component.send-selected-users-message-component { background-color: #ffffff; }

.component.send-selected-users-message-component .checkbox-container { margin: 10px; padding-left: 10px; }

.component.send-selected-users-message-component .checkbox-container input[type='checkbox'] { visibility: hidden; }

.component.send-selected-users-message-component .checkbox-container label { cursor: pointer; position: relative; }

.component.send-selected-users-message-component .checkbox-container span::after, .component.send-selected-users-message-component .checkbox-container span::before { bottom: 0; content: ''; margin: auto; position: absolute; top: 0; }

.component.send-selected-users-message-component .checkbox-container span.checkbox::before { background-color: #ffffff; border: 2px solid rgba(0, 0, 0, 0.5); box-sizing: border-box; height: 27px; left: -35px; transition: border-color 0.2s; width: 27px; }

.component.send-selected-users-message-component .checkbox-container span.checkbox:hover::before { border: 2px solid #333333; }

.component.send-selected-users-message-component .checkbox-container span.checkbox::after { color: transparent; content: '\f00c'; font-family: 'FontAwesome'; left: -30px; top: 2px; transition: color 0.2s; }

.component.send-selected-users-message-component input[type='checkbox']:checked + label span.checkbox::after { color: #62afff; }

.component.send-selected-users-message-component .calvert-checkbox > label > span { color: #3377c8; text-transform: uppercase; }

.component.send-selected-users-message-component .contact-list-container { display: none; }

.component.send-selected-users-message-component .contact-list-container.expanded { display: block; height: calc(100vh - 200px); overflow-y: scroll; position: absolute; width: calc(100% - 20px); z-index: 9999; }

.component.send-selected-users-message-component .contact-list-container.expanded .list-group-header { background-color: #464a48; color: #ffffff; padding: 8px; }

.component.send-selected-users-message-component .contact-list-container.expanded .list-item { background-color: #f7f8fa; border-bottom-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 1px; color: #2871c5; padding: 8px; }

.component.send-selected-users-message-component .contact-list-container.expanded .list-item.selected { background-color: #2871c5; color: #ffffff; }

.component.send-selected-users-message-component > h1 { color: #000000; font-size: 1.8rem; font-weight: 500; padding: 20px; }

.send-selected-users-message-component { box-sizing: border-box; height: 100%; min-height: calc(100vh - 40px); overflow-y: scroll; padding: 10px; width: 100%; }

.send-selected-users-message-component ul { list-style-type: none; }

.send-selected-users-message-component ul.send-to-user-roles > li { float: left; height: 20px; width: 100px; }

.send-selected-users-message-component * { outline: none; }

.send-selected-users-message-component .label-container { background-color: #9a9b9a; text-align: center; }

.send-selected-users-message-component .label { color: #ffffff; font-size: 0.8rem; }

.send-selected-users-message-component .component-content { border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-width: 1px; box-sizing: border-box; height: calc(100% - (40px + 60px + 30px)); min-height: 200px; width: 100%; }

.send-selected-users-message-component .component-header-1 { background-color: gainsboro; border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-width: 1px; box-sizing: border-box; font-size: 1.1rem; font-weight: 300; height: 40px; padding: 10px; width: 100%; }

.send-selected-users-message-component .component-header-1 { border-top-left-radius: 0; border-top-right-radius: 0; }

.send-selected-users-message-component .component-header-2 input { border-bottom-style: solid; border-bottom-width: 1px; border-color: rgba(128, 128, 128, 0.2); border-style: none; font-family: Sans-Serif; font-size: 1rem; height: 28px; line-height: 1em; padding-left: 5px; width: calc(100% - 6px); }

.send-selected-users-message-component .calvert-checkbox { position: relative; width: 20px; }

.send-selected-users-message-component .calvert-checkbox input[type='checkbox'] { visibility: hidden; }

.send-selected-users-message-component .calvert-checkbox label { background: linear-gradient("to top", #222222 0%, #45484d 100%); border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.4); cursor: pointer; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=  '#222', endColorstr='#45484d', GradientType=0); height: 20px; position: absolute; top: 0; width: 20px; }

.send-selected-users-message-component .calvert-checkbox label span { left: 25px; position: relative; white-space: nowrap; }

.send-selected-users-message-component .calvert-checkbox label::after { background: transparent; border: 3px solid #333333; border-right: none; border-top: none; content: ''; filter: alpha(opacity=0); height: 5px; left: 4px; opacity: 0; position: absolute; top: 4px; transform: rotate(-45deg); width: 9px; }

.send-selected-users-message-component .calvert-checkbox label:hover::after { opacity: 0.1; }

.send-selected-users-message-component .calvert-checkbox input[type='checkbox']:checked + label::after { filter: alpha(opacity=100); opacity: 1; }

.send-selected-users-message-component .component-content > textarea { border-style: none; font-size: 1rem; height: calc(100% - 30px); min-height: 300px; padding-left: 5px; width: calc(100% - 8px); }

.send-selected-users-message-component button.cancel, .send-selected-users-message-component button.send { background-color: #2183d5; border-radius: 6px; border-style: none; bottom: 10px; color: #ffffff; font-size: 1rem; height: 30px; left: 10px; position: relative; text-transform: uppercase; width: 130px; }

.send-selected-users-message-component button.cancel { background-color: #ffffff; border: 1px solid #2183d5; color: #2183d5; }

.send-selected-users-message-component button.send.disabled, .send-selected-users-message-component button.send.sending { background-color: #73b3e9; color: #f5f5f5; cursor: default; }

/* END: components/messaging/_send-selected-users-message-component.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/messaging/_send-user-message-component.scss */
.component.send-user-message-component { box-sizing: border-box; }

.send-user-message-component { padding: 10px; }

.send-user-message-component ul { list-style-type: none; }

.send-user-message-component ul.send-to-user-roles > li { float: left; height: 20px; width: 100px; }

.send-user-message-component * { outline: none; }

.component-header-1 { background-color: gainsboro; border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-width: 1px; box-sizing: border-box; font-size: 1.1rem; font-weight: 300; height: 40px; padding: 10px; width: 100%; }

.component-header-2 { background-color: gainsboro; border-bottom-color: #000000; border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-width: 1px; box-sizing: border-box; height: 35px; width: calc(100% - 0); }

.component-header-2 input { border-bottom-style: solid; border-bottom-width: 1px; border-color: rgba(128, 128, 128, 0.2); border-style: none; font-family: Sans-Serif; font-size: 1rem; height: 28px; line-height: 1em; padding-left: 5px; width: calc(100% - 6px); }

.component-content { border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-width: 1px; box-sizing: border-box; height: calc(calc(100% - (40px + 35px + 30px)) - 20px); min-height: 200px; width: 100%; }

.component-content > textarea { border-style: none; box-sizing: border-box; font-family: Sans-Serif; font-size: 1rem; height: calc(100% - 30px); padding-left: 5px; width: calc(100% - 8px); }

.component-footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-width: 1px; box-sizing: border-box; height: 30px; width: 100%; }

.calvert-checkbox { position: relative; width: 20px; }

.calvert-checkbox input[type='checkbox'] { visibility: hidden; }

.calvert-checkbox label { background: linear-gradient("to top", #222222 0%, #45484d 100%); border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.4); cursor: pointer; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d', GradientType=0); height: 20px; position: absolute; top: 0; width: 20px; }

.calvert-checkbox label span { left: 25px; position: relative; white-space: nowrap; }

.calvert-checkbox label::after { background: transparent; border: 3px solid #333333; border-right: 0; border-top: 0; content: ''; filter: alpha(opacity=0); height: 5px; left: 4px; opacity: 0; position: absolute; top: 4px; transform: rotate(-45deg); width: 9px; }

.calvert-checkbox label:hover::after { opacity: 0.1; }

.calvert-checkbox input[type='checkbox']:checked + label::after { filter: alpha(opacity=100); opacity: 1; }

.confirmation-message { border-color: #73b3e9; border-radius: 6px; border-style: solid; border-width: 1px; color: #333333; margin-bottom: 5px; padding: 2px; }

button.cancel, button.send { background-color: #2183d5; border-radius: 6px; border-style: none; bottom: 10px; color: #ffffff; font-size: 1rem; height: 30px; left: 10px; position: relative; width: 130px; }

button.send.disabled, button.send.sending { background-color: #73b3e9; color: whitesmoke; cursor: default; }

/* END: components/messaging/_send-user-message-component.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/messaging/_call-user.scss */
.call-user-component { box-sizing: border-box; padding: 10px; }

.call-user-component ul > li { float: left; height: 20px; width: 100px; }

.call-user-component * { outline: none; }

.call-user-component ul.phone-numbers { background-color: #ffffff; display: inline-block; list-style-type: none; margin: 10px; width: calc(100% - 20px); }

.call-user-component ul.phone-numbers li.header { background-color: #999999; border-top-left-radius: 3px; border-top-right-radius: 3px; color: #ffffff; font-size: 0.8rem; text-transform: uppercase; }

.call-user-component ul.phone-numbers li { border: 1px solid #cccccc; border-top: none; color: #115aa6; height: auto; padding: 5px; text-align: left; width: calc(100% - 10px); }

.call-user-component ul.phone-numbers li:last-child { border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; }

.component-header-1 { background-color: gainsboro; border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-top-style: solid; border-width: 1px; box-sizing: border-box; font-size: 1.1rem; font-weight: 300; height: 40px; padding: 10px; width: 100%; }

.component-header-2 { background-color: gainsboro; border-bottom-color: #000000; border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-width: 1px; box-sizing: border-box; width: calc(100% - 0); }

.component-header-2 input { border-bottom-style: solid; border-bottom-width: 1px; border-color: rgba(128, 128, 128, 0.2); border-style: none; font-family: Sans-Serif; font-size: 1rem; height: 28px; line-height: 1em; padding-left: 5px; width: calc(100% - 6px); }

.component-content { border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-width: 1px; box-sizing: border-box; height: calc(calc(100% - (40px + 35px + 30px)) - 30px); min-height: 200px; width: 100%; }

.component-content > textarea { border-style: none; font-family: Sans-Serif; font-size: 1rem; height: calc(100% - 30px); padding-left: 5px; width: calc(100% - 8px); }

.component-footer { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-bottom-style: solid; border-color: rgba(128, 128, 128, 0.2); border-left-style: solid; border-right-style: solid; border-width: 1px; box-sizing: border-box; height: 30px; width: 100%; }

.calvert-checkbox { position: relative; width: 20px; }

.calvert-checkbox label { background: linear-gradient("to top", #222222 0%, #45484d 100%); border-radius: 4px; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.4); cursor: pointer; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d', GradientType=0); height: 20px; position: absolute; top: 0; width: 20px; }

.calvert-checkbox label span { left: 25px; position: relative; }

.calvert-checkbox label::after { background: transparent; border: 3px solid #333333; border-right: none; border-top: none; content: ''; filter: alpha(opacity=0); height: 5px; left: 4px; opacity: 0; position: absolute; top: 4px; transform: rotate(-45deg); width: 9px; }

.calvert-checkbox label:hover::after { opacity: 0.1; }

.calvert-checkbox input[type='checkbox']:checked + label::after { filter: alpha(opacity=100); opacity: 1; }

.confirmation-message { border-color: #73b3e9; border-radius: 6px; border-style: solid; border-width: 1px; color: #333333; margin-bottom: 5px; padding: 2px; }

button.cancel, button.send { background-color: #2183d5; border-radius: 6px; border-style: none; bottom: 10px; color: #ffffff; font-size: 1rem; height: 30px; left: 10px; position: relative; text-transform: uppercase; width: 130px; }

button.cancel { background-color: #ffffff; border: 1px solid #2183d5; color: #2183d5; }

button.send.disabled, button.send.sending { background-color: #73b3e9; color: whitesmoke; cursor: default; }

/* END: components/messaging/_call-user.scss */
/* ========================================================================= */
.modal { background-color: rgba(0, 0, 0, 0.2); /* Black w/ opacity */ height: 100%; /* Full height */ left: 0; overflow: auto; /* Enable scroll if needed */ /* Hidden by default */ position: fixed; /* Stay in place */ top: 0; width: 100%; /* Full width */ z-index: 8; /* Sit on top */ }

.modal-show { display: block; /* show when allowed */ }

.modal-hide { display: none; /* Hidden by default */ }

/* Modal Content/Box */
.modal-content { background-color: #fefefe; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.24); display: flex; flex-direction: column; margin: 15% auto; /* 15% from the top and centered */ width: 35%; /* Could be more or less, depending on screen size */ }

.modal-content .modal-header { border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: row; height: 51px; padding: 10px 25px; }

.modal-content .modal-header .modal-title { align-items: center; display: flex; }

.modal-content .modal-body { padding: 25px; }

.modal-content .modal-body textarea { height: 60px; margin-bottom: 12px; width: 100%; }

.modal-content .modal-footer { display: flex; flex-direction: row; justify-content: center; margin: 20px; }

.modal-content .modal-footer .modal-button { margin: 20px 10px 0 0; }

/* The Close Button */
.close { align-items: center; color: #aaaaaa; display: flex; float: right; font-size: 1.5625rem; font-weight: bold; margin-left: auto; margin-right: 0; }

.close:hover, .close:focus { color: #000000; cursor: pointer; text-decoration: none; }

.modal { background-color: rgba(0, 0, 0, 0.2); /* Black w/ opacity */ height: 100%; /* Full height */ left: 0; overflow: auto; /* Enable scroll if needed */ /* Hidden by default */ position: fixed; /* Stay in place */ top: 0; width: 100%; /* Full width */ z-index: 8; /* Sit on top */ }

.modal-show { display: block; /* show when allowed */ }

.modal-hide { display: none; /* Hidden by default */ }

/* Modal Content/Box */
.modal-content { background-color: #fefefe; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.24); display: flex; flex-direction: column; margin: 15% auto; /* 15% from the top and centered */ position: relative; top: 100px; width: 35%; /* Could be more or less, depending on screen size */ }

.modal-content .modal-header { border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: row; height: 51px; padding: 10px 25px; }

.modal-content .modal-header .modal-title { align-items: center; display: flex; }

.modal-content .modal-body { padding: 25px; }

.modal-content .modal-body textarea { height: 60px; margin-bottom: 12px; width: 100%; }

.modal-content .modal-footer { display: flex; flex-direction: row; justify-content: center; }

.modal-content .modal-footer .modal-button { margin: 20px 10px 0 0; }

/* The Close Button */
.close { align-items: center; color: #aaaaaa; display: flex; float: right; font-size: 1.5625rem; font-weight: bold; margin-left: auto; margin-right: 0; }

.close:hover, .close:focus { color: #000000; cursor: pointer; text-decoration: none; }

.modal-print-job { z-index: 99; }

.modal-print-job .modal-content { border-radius: 18px; }

.modal-print-job .modal-content .modal-body { font-size: 1.5rem; font-weight: bolder; }

.modal-print-job .modal-content .modal-body.is-preparing { color: #435dac; height: 200px; }

.modal-print-job .modal-content .modal-body .splash { display: none; position: relative; top: 150px; }

.modal-print-job .modal-content .modal-body .splash.is-preparing { display: block; }

.modal-print-job .modal-content .modal-body .splash .loader-wrap .loader-circles { left: 3%; top: -100px; }

.modal-print-job .modal-footer button { display: none; }

.modal-print-job .modal-footer button.needs-user-response { display: block; }

.modal-adjust-pacing { z-index: 99; box-sizing: content-box; }

.modal-adjust-pacing .question { color: #325db1; font-size: 0.8em; font-weight: bold; text-align: left; line-height: 0.9em; margin-top: 0; margin-bottom: 0.6em; }

.modal-adjust-pacing .instruction { padding: 0; margin: 0; text-align: left; line-height: 1.2em; }

.modal-adjust-pacing .instruction.warn { padding-top: 20px; color: red; }

.modal-adjust-pacing .message-container { padding-top: 12px; }

.modal-adjust-pacing #message { font-size: medium; margin-bottom: 0.5em; }

.modal-adjust-pacing .checkbox-container { position: relative; left: -17px; }

.modal-adjust-pacing .checkbox-container .checkbox-text { text-align: left; font-style: normal; font-weight: 300; font-size: 0.8em; }

.modal-adjust-pacing h4 { font-size: medium; text-align: left; color: black; padding: 0; margin-top: 0.5em; margin-bottom: 0.5em; }

.modal-adjust-pacing .retake-options { font-size: 0.6em; font-weight: normal; text-align: left; color: black; line-height: 1.5em; }

.modal-adjust-pacing .retake-options .disabled-option-message { font-size: 1em; font-style: italic; color: red; padding: 0; padding-left: 1.4em; margin: 0; line-height: 1em; }

.modal-adjust-pacing .modal-content { border-radius: 0px; width: 50%; }

.modal-adjust-pacing .modal-content .modal-body { box-sizing: content-box; font-size: 1.5rem; font-weight: bolder; }

.modal-adjust-pacing .modal-content .modal-body .splash { display: none; position: relative; top: 150px; }

.modal-adjust-pacing .modal-content .modal-body .splash .loader-wrap .loader-circles { left: 3%; top: -100px; }

.modal-adjust-pacing .modal-footer button { display: none; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 3px; }

.modal-adjust-pacing .modal-footer button.needs-user-response { display: block; }

.component.iframe-renderer-component { box-sizing: border-box; overflow: scroll; width: 100%; }

.component.iframe-renderer-component .fit-to-container { height: 100%; width: 100%; }

.modal.edit-card-modal ul.questions-list { list-style-type: none; }

.modal.edit-card-modal .modal-content { width: 70%; /* The container */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.modal.edit-card-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1rem; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.edit-card-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.edit-card-modal .modal-content .modal-white-button { background-color: #ffffff; color: #24408e; font-weight: normal; }

.modal.edit-card-modal .modal-content .modal-grey-button { background-color: #c7c7c7; color: #ffffff; }

.modal.edit-card-modal .modal-content .modal-green-button { background-color: #40ad48; color: #ffffff; }

.modal.edit-card-modal .modal-content .modal-red-button { background-color: #d12229; color: #ffffff; }

.modal.edit-card-modal .modal-content .modal-button-icon { margin-right: 2px; }

.modal.edit-card-modal .modal-content .modal-header { background-color: #365fab; height: 51px; }

.modal.edit-card-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2rem; font-weight: 300; }

.modal.edit-card-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.edit-card-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.edit-card-modal .modal-content .modal-body .property { border: 1px solid #cccccc; padding: 6px 16px; margin-bottom: 10px; }

.modal.edit-card-modal .modal-content .modal-body .reference-label, .modal.edit-card-modal .modal-content .modal-body .ref-count-label { display: block; padding: 5px 0; }

.modal.edit-card-modal .modal-content .modal-body .resource-label { display: block; font-weight: 600; padding-bottom: 5px; }

.modal.edit-card-modal .modal-content .modal-body .icon-btn { display: inline-block; width: 26px; height: 26px; text-align: center; line-height: 1.5; font-size: 18px; }

.modal.edit-card-modal .modal-content .modal-body .icon-btn:hover { color: #c41230; }

.modal.edit-card-modal .modal-content .modal-body .icon-btn.success { color: #00a94f; }

.modal.edit-card-modal .modal-content .modal-body .icon-btn.error { color: red; }

.modal.edit-card-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .input-label { width: 250px; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .input-field { margin-right: 5px; width: 220px; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .er-name-input { margin-left: 250px; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .editable-area { background-color: #ffffff; border: 1px solid #a9a9a9; width: 50%; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .editable-area p { margin: 0; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .small-size-input { width: 300px; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .large-size-input { width: 70%; }

.modal.edit-card-modal .modal-content .modal-body .modal-row .search-form { display: flex; }

.modal.edit-card-modal .modal-content .modal-body .modal-blue-label { color: #24408e; font-weight: bold; margin-left: auto; margin-right: 5px; text-transform: uppercase; }

.modal.edit-card-modal .modal-content .modal-body .oer-container { background-color: #ffffff; overflow-x: auto; }

.modal.edit-card-modal .modal-content .modal-body .oer-container .resource-thumbnail { border: 2px solid #d8d8d8; margin-right: 20px; }

.modal.edit-card-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-size { width: 130px; }

.modal.edit-card-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-image { height: 100px; width: 130px; }

.modal.edit-card-modal .modal-content .modal-body .oer-container .hightlight { border: 2px solid #40ad48; }

.modal.edit-card-modal .modal-content .modal-body .questions-row { flex-direction: column; }

.modal.edit-card-modal .modal-content .modal-body .modal-section-header { font-weight: bold; }

.modal.edit-card-modal .modal-content .modal-body .header-uppercase { text-transform: uppercase; }

.modal.edit-card-modal .modal-content .modal-body .section-help-text { font-size: 0.9rem; font-style: italic; }

.modal.edit-card-modal .modal-content .modal-body textarea { vertical-align: top; width: 50%; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .accordion-panel { align-items: center; background-color: #666666; border-left: 1px solid #464a48; border-right: 1px solid #464a48; border-top: 1px solid #464a48; color: #ffffff; cursor: pointer; padding-left: 20px; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .last-panel { border-bottom: 1px solid #464a48; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .modal-accordion-icon { margin-right: 10px; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container { padding: 15px 25px; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container .legend-container { display: flex; margin-top: 25px; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container .legend-container .legend-title { background-color: #666666; color: #ffffff; padding: 0 5px; text-transform: uppercase; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container .data-container { background-color: #ffffff; border: 1px solid #666666; display: flex; height: 80px; overflow-y: auto; vertical-align: middle; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container .data-container .standard { background-color: #c7c7c7; cursor: pointer; font-size: 0.6875rem; height: 25px; margin-left: 15px; overflow: hidden; text-align: center; width: 110px; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container .data-container .hightlight { background-color: #365fab; color: #ffffff; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container .standards-section { align-items: center; }

.modal.edit-card-modal .modal-content .modal-body .modal-accordion .collapsible-container .standards-section .standards-list { display: flex; height: 25px; }

.modal.edit-card-modal .modal-content .modal-body .assessment-container { align-items: center; background-color: #ffffff; display: flex; height: 100px; overflow-x: auto; padding: 0 20px; }

.modal.edit-card-modal .modal-content .modal-body .assessment-container .assessment-list { display: flex; }

.modal.edit-card-modal .modal-content .modal-body .assessment-container .assessment-list .assessment { background-color: #40474f; border: 3px solid #40474f; color: #ffffff; cursor: pointer; font-size: 0.9rem; margin-right: 10px; padding: 0 8px; }

.modal.edit-card-modal .modal-content .modal-body .assessment-container .assessment-list .assessment.highlight { border: 3px solid #40ad48; }

.modal.edit-card-modal .modal-content .modal-body .modal-three-dots-icon { height: 22px; margin-right: 5px; }

.modal.edit-card-modal .modal-content .standards-modal-body { padding: 0 0 100px; }

.modal.edit-card-modal .modal-content .asset-id-container { width: 25%; }

.modal.edit-card-modal .modal-content .asset-id-row { display: block !important; }

.modal.edit-card-modal .modal-content .asset-id-note { color: #808080; font-size: 0.75rem; line-height: 0.5; }

.modal.edit-card-modal .modal-content .standards-filter-row { background: #ffffff; display: flex; height: 75px; padding-top: 40px; text-align: center; }

.modal.edit-card-modal .modal-content .standards-filter-list { flex: 1; list-style: none; }

.modal.edit-card-modal .modal-content .aligned-standards-conatiner { background: #ffffff; border: 1px #d3d3d3 solid; border-radius: 5px; float: right; margin: 24px; width: 75%; }

.modal.edit-card-modal .modal-content .assets-standards-container { display: flex; width: 100%; }

.modal.edit-card-modal .modal-content .aligned-standard-row { background: #ffffff; border: 1px #d3d3d3 solid; display: block !important; margin: 20px; padding: 0 !important; text-align: center; }

.modal.edit-card-modal .modal-content .aligned-standard-heading { background: #365fab; color: #ffffff; font-size: 1rem; }

.modal.edit-card-modal .modal-content .aligned-standard-content { padding: 3px; text-align: left; }

.modal.edit-card-modal .modal-content .standard-checkbox-container { cursor: pointer; display: block; margin-bottom: 12px; padding-left: 20px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.modal.edit-card-modal .modal-content .standard-checkbox-container input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.modal.edit-card-modal .modal-content .checkmark { background-color: #ffffff; border: 1px #000000 solid; border-radius: 3px; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.modal.edit-card-modal .modal-content .standard-checkbox-container:hover input ~ .checkmark { background-color: #ffffff; }

.modal.edit-card-modal .modal-content .standard-checkbox-container input:checked ~ .checkmark { background-color: #f0ad4e; }

.modal.edit-card-modal .modal-content .checkmark::after { content: ''; display: none; position: absolute; }

.modal.edit-card-modal .modal-content .standard-checkbox-container input:checked ~ .checkmark::after { display: block; }

.modal.edit-card-modal .modal-content .standard-checkbox-container .checkmark::after { border: solid #000000; border-width: 0 2px 2px 0; height: 10px; left: 6px; top: 3px; transform: rotate(45deg); width: 5px; }

.modal.speech-settings-modal .modal-content { width: 70%; }

.modal.speech-settings-modal .modal-content #tab1 { cursor: default; width: 100%; }

.modal.speech-settings-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1rem; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.speech-settings-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.speech-settings-modal .modal-content .modal-header { background-color: #365fab; }

.modal.speech-settings-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2rem; font-weight: 300; }

.modal.speech-settings-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.speech-settings-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row .input-label { width: 250px; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label[for='select-speech-color-theme'] { width: 230px; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label.speech-color-theme-option { border: 2px solid transparent; font-weight: bolder; height: 32px; line-height: 32px; margin-right: 10px; text-align: center; width: 32px; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label.speech-color-theme-option input { opacity: 0; width: 0; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label.speech-color-theme-option.selected { border: 2px solid #235cb0; box-shadow: 0 0 4px rgba(36, 91, 176, 0.75); }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label.speech-color-theme-option.yellow-black { background-color: #ffea3c; color: #000000; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label.speech-color-theme-option.black-yellow { background-color: #000000; color: #ffea3c; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label.speech-color-theme-option.black-yellow.selected { border: 2px solid #00b7ff; }

.modal.speech-settings-modal .modal-content .modal-body .modal-row label.speech-color-theme-option.blue-black { background-color: #6fd9f8; color: #235cb0; }

.course-editor-tab-set-component { box-sizing: border-box; height: 54px; overflow: inherit; position: relative; text-transform: uppercase; z-index: 2; }

.course-editor-tab-set-component .third { box-sizing: border-box; width: calc(100% / 3); }

.course-editor-tab-set-component .tab { box-sizing: border-box; cursor: pointer; float: left; height: 100%; line-height: 22px; padding-right: 10px; text-align: center; }

.course-editor-tab-set-component .tab a { color: #ffffff; text-decoration: none; }

.course-editor-tab-set-component .tab a .tab-title { font-size: 1.25rem; font-weight: 500; padding-top: 10px; }

.course-editor-tab-set-component .tab a .tab-sub-title { font-size: 0.75rem; font-weight: 500; }

.course-editor-tab-set-component .tab.last { padding-right: 0; }

.course-editor-tab-set-component .create-tab { background-color: #a8e2d8; border-radius: 5px; height: 100%; }

.course-editor-tab-set-component .create-tab.selected { background-color: #26b69e; border-bottom-color: #26b69e; color: #ffffff; cursor: default; }

.course-editor-tab-set-component .create-tab.selected a { color: #ffffff; }

.course-editor-tab-set-component .create-tab.selected .arrow-down { border-top: 8px solid #26b69e; }

.course-editor-tab-set-component .reuse-tab { background-color: #f2d9a9; border-radius: 5px; height: 100%; }

.course-editor-tab-set-component .reuse-tab.selected { background-color: #dea027; border-bottom-color: #dea027; color: #ffffff; cursor: default; }

.course-editor-tab-set-component .reuse-tab.selected a { color: #ffffff; }

.course-editor-tab-set-component .reuse-tab.selected .arrow-down { border-top: 8px solid #dea027; }

.course-editor-tab-set-component .copy-tab { background-color: #e1b4ce; border-radius: 5px; height: 100%; }

.course-editor-tab-set-component .copy-tab.selected { background-color: #b44385; border-bottom-color: #b44385; color: #ffffff; cursor: default; }

.course-editor-tab-set-component .copy-tab.selected a { color: #ffffff; }

.course-editor-tab-set-component .copy-tab.selected .arrow-down { border-top: 8px solid #b44385; }

.course-editor-tab-set-component .arrow-down { border-left: 8px solid transparent; border-right: 8px solid transparent; bottom: calc(54px - 10px); height: 0; left: 47%; position: relative; top: -1px; visibility: hidden; width: 0; z-index: 9999; }

.course-editor-tab-set-component .selected .arrow-down { visibility: inherit; z-index: 9999; }

/* ------------------------------------------------------------------------- */
/* BEGIN: components/years-filter-selector/_years-filter-selector.scss */
.component.years-filter-selector-component { box-sizing: inherit; height: inherit; margin: 0; margin-right: 20px; overflow: auto; padding: 0; float: right; width: calc(100% - 192px - 60px); }

.years-filter-selector-component { background-color: #fbfafa; border: 1px solid #d7d7d7; border-top: none; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }

.years-filter-selector-component h3 { background-color: #115aa6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; color: #ffffff; font-size: 1.3rem; font-weight: 300; margin: 0; padding: 10px; }

.years-filter-selector-component form { margin: 10px; }

.years-filter-selector-component form span { font-size: 0.875rem; font-weight: normal; }

.years-filter-selector-component .class-notice { color: red; font-size: 1rem; font-weight: 300; margin-bottom: 20px; margin-left: 10px; }

/* END: components/years-filter-selector/_years-filter-selector.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/grading-periods-selector/_grading-periods-selector.scss */
.component.grading-periods-selector-component { box-sizing: inherit; height: inherit; margin: 0; margin-right: 20px; margin-top: 20px; overflow: auto; padding: 0; float: right; width: calc(100% - 192px - 60px); }

.grading-periods-selector-component { background-color: #fbfafa; border: 1px solid #d7d7d7; border-top: none; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }

.grading-periods-selector-component .instruction { padding-left: 10px; }

.grading-periods-selector-component h3 { background-color: #115aa6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; color: #ffffff; font-size: 1.3rem; font-weight: 300; margin: 0; padding: 10px; }

.grading-periods-selector-component form { flex-direction: column; margin: 10px; font-family: system-ui, sans-serif; font-size: 1rem; font-weight: bold; display: grid; }

.grading-periods-selector-component form h4 { padding: 0px; margin: 0px; margin-bottom: 8px; }

.grading-periods-selector-component form .school-year-selector { padding-bottom: 12px; }

.grading-periods-selector-component form span { font-size: 0.875rem; font-weight: normal; }

.grading-periods-selector-component form .option-row { display: flex; flex-direction: row; }

.grading-periods-selector-component form .option-row label { padding-right: 1em; --form-control-color: #005cb9; }

.grading-periods-selector-component hr { margin-right: 10px; margin-left: 10px; opacity: 0.5; }

.grading-periods-selector-component .date-selector-groups { width: 350px; display: flex; flex-direction: column; margin: 10px; font-weight: normal; }

.grading-periods-selector-component .date-selector-groups .schedule-groups { display: flex; flex-direction: column; }

.grading-periods-selector-component .date-selector-groups .schedule-groups .labeled-picker { display: flex; flex-direction: row; padding-bottom: 1em; }

.grading-periods-selector-component .date-selector-groups .schedule-groups .labeled-picker div:nth-child(2) { margin-left: auto; margin-right: 0; }

.grading-periods-selector-component .date-selector-groups .schedule-groups .labeled-picker div:nth-child(2) input { width: 120px; }

.grading-periods-selector-component .error-message { color: red; }

/* END: components/grading-periods-selector/_grading-periods-selector.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/change-password-form/_change-password-form.scss */
.component.change-password-form-component { box-sizing: inherit; height: inherit; margin: 0; margin-right: 20px; margin-top: 20px; overflow: auto; padding: 0; float: right; width: calc(100% - 192px - 60px); }

.change-password-form-component { background-color: #fbfafa; border: 1px solid #d7d7d7; border-top: none; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }

.change-password-form-component h3 { background-color: #115aa6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; color: #ffffff; font-size: 1.3rem; font-weight: 300; margin: 0; padding: 10px; }

.change-password-form-component form { margin: 10px; }

.change-password-form-component form span { font-size: 0.875rem; font-weight: normal; }

.change-password-form-component form label { display: block; }

.change-password-form-component form p { margin: 0 0 16px 0; }

.change-password-form-component form .form-field { margin-bottom: 16px; }

.change-password-form-component .change-password-error { color: red; font-size: 0.9rem; font-weight: 300; margin-top: 5px; margin-bottom: 20px; }

.change-password-form-component .interactive-button { background-color: #eaeaea; border-radius: 2px; border-style: none; cursor: pointer; padding: 15px; }

.change-password-form-component .interactive-button:hover { background-color: #dadada; }

.change-password-form-component .interactive-button:disabled { color: #cccccc; cursor: not-allowed; }

.change-password-form-component .show-password-fields-button, .change-password-form-component .change-password-button { background-color: #005cb9; color: #ffffff; cursor: pointer; width: 174px; }

.change-password-form-component .show-password-fields-button:hover, .change-password-form-component .change-password-button:hover { background-color: #005cb9; }

.change-password-form-component .show-password-fields-button.disabled, .change-password-form-component .change-password-button.disabled { background-color: #eaeaea; color: #000000; cursor: not-allowed; }

/* END: components/change-password-form/_change-password-form.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: components/change-address-form/_change-address-form.scss */
.component.change-address-form-component { box-sizing: inherit; height: inherit; margin: 0; margin-right: 20px; margin-top: 20px; overflow: auto; padding: 0; float: right; width: calc(100% - 192px - 60px); }

.change-address-form-component { background-color: #fbfafa; border: 1px solid #d7d7d7; border-top: none; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }

.change-address-form-component h3 { background-color: #115aa6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; color: #ffffff; font-size: 1.3rem; font-weight: 300; margin: 0; padding: 10px; }

.change-address-form-component form[name='change-address'] { margin: 10px; width: calc(100% - 192px - 60px); }

.change-address-form-component form[name='change-address'] .current-address p { background-color: #eaeaea; }

.change-address-form-component form[name='change-address'] span { font-size: 0.875rem; font-weight: normal; }

.change-address-form-component form[name='change-address'] .row { display: flex; flex-direction: row; justify-content: space-between; }

.change-address-form-component form[name='change-address'] .col { display: flex; flex-direction: column; }

.change-address-form-component form[name='change-address'] label { display: block; }

.change-address-form-component form[name='change-address'] p { margin: 0 0 16px 0; background-color: #eaeaea; }

.change-address-form-component form[name='change-address'] .form-field { margin-bottom: 16px; width: 100%; }

.change-address-form-component form[name='change-address'] .form-field input { width: 100%; }

.change-address-form-component .change-address-error { color: red; font-size: 0.9rem; font-weight: 300; margin-top: 5px; margin-bottom: 20px; }

.change-address-form-component .interactive-button { background-color: #eaeaea; border-radius: 2px; border-style: none; cursor: pointer; padding: 15px; }

.change-address-form-component .interactive-button:hover { background-color: #dadada; }

.change-address-form-component .interactive-button:disabled { color: #cccccc; cursor: not-allowed; }

.change-address-form-component .show-address-fields-button, .change-address-form-component .change-address-button { background-color: #005cb9; color: #ffffff; cursor: pointer; width: 174px; }

.change-address-form-component .show-address-fields-button:hover, .change-address-form-component .change-address-button:hover { background-color: #005cb9; }

.change-address-form-component .show-address-fields-button.disabled, .change-address-form-component .change-address-button.disabled { background-color: #eaeaea; color: #000000; cursor: not-allowed; }

/* END: components/change-address-form/_change-address-form.scss */
/* ========================================================================= */
.content-width { width: 55% !important; }

.content-width { width: 55% !important; }

.edit-card-modal.edit-lesson-modal .grey-modal-footer { background-color: #ffffff; padding: 20px; }

.edit-card-modal.edit-lesson-modal .modal-content .modal-body { background-color: #ffffff; }

.edit-card-modal.edit-lesson-modal .modal-content button { border: 0; border-radius: 3px; cursor: pointer; float: right; font-size: 0.875rem; font-weight: bold; height: 35px; margin: 0 10px; padding: 3px 20px 4px; }

.edit-card-modal.edit-lesson-modal .modal-content button:nth-child(even) { background-color: #ffffff; border: 1px solid #325db1; color: #325db1; }

.edit-card-modal.edit-lesson-modal .modal-content button:nth-child(odd) { background-color: #325db1; border: 1px solid #325db1; color: #ffffff; }

.single-toggle-switch-container { display: flex; margin-left: 10px; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.single-toggle-switch-container .switch-label { margin-right: 5px; }

.single-toggle-switch-container .switch { display: inline-block; position: relative; }

.single-toggle-switch-container .switch input { display: none; }

.single-toggle-switch-container .slider-off { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.single-toggle-switch-container .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.single-toggle-switch-container .slider-on { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.single-toggle-switch-container .on { display: none; }

.single-toggle-switch-container .on, .single-toggle-switch-container .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; text-transform: uppercase; top: 50%; }

.single-toggle-switch-container .on { transform: translate(-50%, -50%); }

.single-toggle-switch-container .off { transform: translate(-50%, -50%); }

.single-toggle-switch-container input:checked + .slider .on { display: block; }

.single-toggle-switch-container .slider.round { border-radius: 34px; }

.single-toggle-switch-container .slider.round::before { border-radius: 50%; }

.single-toggle-switch-container .switch.score-display-switch { height: 20px; width: 90px; }

.single-toggle-switch-container .switch.score-display-switch input:checked + .slider-on::before { transform: translateX(70px); }

.single-toggle-switch-container .switch.score-display-switch .slider-on { background-color: #faa700; }

.single-toggle-switch-container .switch.score-display-switch .slider-off { background-color: #faa700; }

.modal .no-transformation-btn { text-transform: none; }

.modal .tablist { align-items: center; display: flex; list-style-type: none; text-align: center; }

.modal .tab { background-color: #f1f1f1; border-bottom: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; border-top: 1px solid #d8d8d8; color: #000000; cursor: pointer; padding: 10px; width: 50%; }

.modal .tab.active { background-color: #fbc02d; }

.modal .copy-error { background-color: #ffffff; border: 2px solid red; border-radius: 0.2rem; margin-top: 10px; padding: 5px; width: 52%; }

.modal .copy-error span.tag { color: red; font-weight: bold; }

.modal .copy-error span.message { color: #292b2c; }

.modal.author-question-modal { background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */ }

.modal.author-question-modal .modal-content { min-height: 100%; width: 80%; }

.modal.author-question-modal .modal-content .modal-header { height: 51px; }

.modal.author-question-modal .calvert-btn-primary { position: relative; top: -4px; }

.modal.lti-credentials-modal ul.questions-list { list-style-type: none; }

.modal.lti-credentials-modal .modal-content { text-align: center; width: 50%; }

.modal.lti-credentials-modal .modal-content .modalText { padding: 10px; text-align: left; }

.modal.lti-credentials-modal .modal-content .modalText ul { padding: 10px 20px; }

.modal.lti-credentials-modal .modal-content .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.modal.lti-credentials-modal .modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.modal.lti-credentials-modal .modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.lti-credentials-modal .modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.lti-credentials-modal .modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; font-weight: bold; padding: 12px; text-transform: none; }

.modal.lti-credentials-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1rem; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.lti-credentials-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.lti-credentials-modal .modal-content .modal-content-blue-button { background-color: #24408e; border: 2px solid #24408e; border-radius: 50px; color: #ffffff; font-weight: bold; width: 20%; }

.modal.lti-credentials-modal .modal-content .modal-white-button { background-color: #ffffff; border: 2px solid #24408e; border-radius: 50px; color: #24408e; font-weight: normal; width: 20%; }

.modal.lti-credentials-modal .modal-content .modal-grey-button { background-color: #c7c7c7; color: #ffffff; }

.modal.lti-credentials-modal .modal-content .modal-green-button { background-color: #40ad48; color: #ffffff; }

.modal.lti-credentials-modal .modal-content .modal-red-button { background-color: #d12229; color: #ffffff; }

.modal.lti-credentials-modal .modal-content .modal-button-icon { margin-right: 2px; }

.modal.lti-credentials-modal .modal-content .modal-header { background-color: #365fab; }

.modal.lti-credentials-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2rem; font-weight: 300; }

.modal.lti-credentials-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.lti-credentials-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row.loading { flex-direction: row; justify-content: center; align-items: center; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .input-label { width: 250px; text-align: left; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .input-field { text-align: left; margin-right: 5px; width: 220px; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .er-name-input { margin-left: 250px; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .editable-area { text-align: left; background-color: #ffffff; border: 1px solid #a9a9a9; width: 50%; padding: 3px; border-radius: 3px; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .editable-area p { margin: 0; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .small-size-input { width: 300px; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .large-size-input { width: 70%; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-row .search-form { display: flex; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-blue-label { color: #24408e; font-weight: bold; margin-left: auto; margin-right: 5px; text-transform: uppercase; }

.modal.lti-credentials-modal .modal-content .modal-body .oer-container { background-color: #ffffff; overflow-x: auto; }

.modal.lti-credentials-modal .modal-content .modal-body .oer-container .resource-thumbnail { border: 2px solid #d8d8d8; margin-right: 20px; }

.modal.lti-credentials-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-size { width: 130px; }

.modal.lti-credentials-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-image { height: 100px; width: 130px; }

.modal.lti-credentials-modal .modal-content .modal-body .oer-container .hightlight { border: 2px solid #40ad48; }

.modal.lti-credentials-modal .modal-content .modal-body .questions-row { flex-direction: column; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-section-header { font-weight: bold; }

.modal.lti-credentials-modal .modal-content .modal-body .header-uppercase { text-transform: uppercase; }

.modal.lti-credentials-modal .modal-content .modal-body .section-help-text { font-size: 0.9rem; font-style: italic; }

.modal.lti-credentials-modal .modal-content .modal-body textarea { vertical-align: top; width: 50%; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-accordion .assessment-container { align-items: center; background-color: #ffffff; display: flex; height: 100px; overflow-x: auto; padding: 0 20px; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list { display: flex; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment { background-color: #40474f; border: 3px solid #40474f; color: #ffffff; cursor: pointer; font-size: 0.9rem; margin-right: 10px; padding: 0 8px; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment.highlight { border: 3px solid #40ad48; }

.modal.lti-credentials-modal .modal-content .modal-body .modal-accordion .modal-three-dots-icon { height: 22px; margin-right: 5px; }

.modal.lti-credentials-modal .lti-credentials-button-group { margin-top: 20px; display: flex; flex-direction: row; align-items: flex-end; justify-content: center; }

.modal.lti-credentials-modal .lti-credentials-button-group button:first-child { margin-right: 16px; }

/* ------------------------------------------------------------------------- */
/* BEGIN: components/assessment-lock/_assessment-lock.scss */
.assessment-lock-component { background-color: #f1f1f1; display: grid; height: 400px; margin-bottom: 40px; margin-top: 8px; text-align: center; width: 100%; }

.assessment-lock-component.section-1 { border: 8px solid #5a812c; }

.assessment-lock-component.section-2 { border: 8px solid #75368d; }

.assessment-lock-component.section-3 { border: 8px solid #ca5000; }

.assessment-lock-component.section-4 { border: 8px solid #005db9; }

.assessment-lock-component.section-5 { border: 8px solid #d84315; }

.assessment-lock-component.section-default { border: 8px solid #6a93b2; }

.assessment-lock-component > h4 { margin-bottom: 50px; margin-top: 50px; }

.assessment-lock-component .lock-n-circle { border: 2px solid #ff0000; height: 0; margin-left: auto; margin-right: auto; width: 0; }

.assessment-lock-component .lock-n-circle .circle-container { height: 0; overflow: visible; width: 0; }

.assessment-lock-component .lock-n-circle .circle-container > .fa-circle { color: #d8d8d8; font-size: 8rem; height: 0; left: -58px; line-height: 0; position: relative; width: 0; }

.assessment-lock-component .lock-n-circle .lock-container { height: 0; overflow: visible; width: 0; }

.assessment-lock-component .lock-n-circle .lock-container > svg { fill: #f1f1f1; height: 80px; left: -43px; position: relative; top: -45px; width: 80px; }

.assessment-lock-component > p { margin-top: 50px; }

.assessment-lock-component .password-submit { font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: bold; line-height: 1em; }

.assessment-lock-component .password-submit > input { font-size: 1.2rem; font-weight: normal; max-width: 400px; min-width: 50%; padding-bottom: 0; text-align: center; width: 75%; }

.assessment-lock-component .password-submit > input.incorrect-password { border: 1px solid #ff0000; }

.assessment-lock-component .password-submit > p.incorrect-password { color: #ff0000; height: 0.5em; line-height: 0.5em; margin: 4px; }

.assessment-lock-component .password-submit > button { background-color: #d8d8d8; border: 0; font-size: 0.8rem; font-weight: bold; line-height: 1em; margin: 8px; max-width: 400px; min-width: 50%; padding: 12px; width: 75%; }

/* END: components/assessment-lock/_assessment-lock.scss */
/* ========================================================================= */
.modal.student-mode-modal ul.questions-list { list-style-type: none; }

.modal.student-mode-modal .modal-content { padding-bottom: 10px; text-align: center; width: 70%; }

.modal.student-mode-modal .modal-content .modalText { padding: 10px; text-align: left; }

.modal.student-mode-modal .modal-content .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.modal.student-mode-modal .modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.modal.student-mode-modal .modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.student-mode-modal .modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.student-mode-modal .modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; font-weight: bold; padding: 12px; text-transform: none; }

.modal.student-mode-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1rem; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.student-mode-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.student-mode-modal .modal-content .modal-content-blue-button { background-color: #24408e; border: 2px solid #24408e; border-radius: 50px; color: #ffffff; font-weight: bold; width: 20%; }

.modal.student-mode-modal .modal-content .modal-white-button { background-color: #ffffff; border: 2px solid #24408e; border-radius: 50px; color: #24408e; font-weight: normal; width: 20%; }

.modal.student-mode-modal .modal-content .modal-grey-button { background-color: #c7c7c7; color: #ffffff; }

.modal.student-mode-modal .modal-content .modal-green-button { background-color: #40ad48; color: #ffffff; }

.modal.student-mode-modal .modal-content .modal-red-button { background-color: #d12229; color: #ffffff; }

.modal.student-mode-modal .modal-content .modal-button-icon { margin-right: 2px; }

.modal.student-mode-modal .modal-content .modal-header { background-color: #365fab; }

.modal.student-mode-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2rem; font-weight: 300; }

.modal.student-mode-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.student-mode-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.student-mode-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .input-label { width: 250px; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .input-field { margin-right: 5px; width: 220px; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .er-name-input { margin-left: 250px; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .editable-area { background-color: #ffffff; border: 1px solid #a9a9a9; width: 50%; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .editable-area p { margin: 0; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .small-size-input { width: 300px; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .large-size-input { width: 70%; }

.modal.student-mode-modal .modal-content .modal-body .modal-row .search-form { display: flex; }

.modal.student-mode-modal .modal-content .modal-body .modal-blue-label { color: #24408e; font-weight: bold; margin-left: auto; margin-right: 5px; text-transform: uppercase; }

.modal.student-mode-modal .modal-content .modal-body .oer-container { background-color: #ffffff; overflow-x: auto; }

.modal.student-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail { border: 2px solid #d8d8d8; margin-right: 20px; }

.modal.student-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-size { width: 130px; }

.modal.student-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-image { height: 100px; width: 130px; }

.modal.student-mode-modal .modal-content .modal-body .oer-container .hightlight { border: 2px solid #40ad48; }

.modal.student-mode-modal .modal-content .modal-body .questions-row { flex-direction: column; }

.modal.student-mode-modal .modal-content .modal-body .modal-section-header { font-weight: bold; }

.modal.student-mode-modal .modal-content .modal-body .header-uppercase { text-transform: uppercase; }

.modal.student-mode-modal .modal-content .modal-body .section-help-text { font-size: 0.9rem; font-style: italic; }

.modal.student-mode-modal .modal-content .modal-body textarea { vertical-align: top; width: 50%; }

.modal.student-mode-modal .modal-content .modal-body .modal-accordion .assessment-container { align-items: center; background-color: #ffffff; display: flex; height: 100px; overflow-x: auto; padding: 0 20px; }

.modal.student-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list { display: flex; }

.modal.student-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment { background-color: #40474f; border: 3px solid #40474f; color: #ffffff; cursor: pointer; font-size: 0.9rem; margin-right: 10px; padding: 0 8px; }

.modal.student-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment.highlight { border: 3px solid #40ad48; }

.modal.student-mode-modal .modal-content .modal-body .modal-accordion .modal-three-dots-icon { height: 22px; margin-right: 5px; }

.modal { background-color: rgba(0, 0, 0, 0.2); /* Black w/ opacity */ height: 100%; /* Full height */ left: 0; overflow: auto; /* Enable scroll if needed */ /* Hidden by default */ position: fixed; /* Stay in place */ top: 0; width: 100%; /* Full width */ z-index: 8; /* Sit on top */ }

.modal-show { display: block; /* show when allowed */ }

.modal-hide { display: none; /* Hidden by default */ }

/* Modal Content/Box */
.no-match-popup-content { background-color: #fefefe; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.24); display: flex; flex-direction: column; margin: 15% auto; /* 15% from the top and centered */ position: relative; top: 100px; width: 35%; /* Could be more or less, depending on screen size */ }

.no-match-popup-content .modal-header { border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: row; height: 51px; padding: 10px 25px; }

.no-match-popup-content .modal-header .modal-title { align-items: center; display: flex; }

.no-match-popup-content .modal-body { font-size: 1.125rem; line-height: 1.5; padding: 25px; text-align: center; }

.no-match-popup-content .modal-body textarea { height: 60px; margin-bottom: 12px; width: 450px; }

.no-match-popup-content .modal-footer { background-color: #ff0000; color: #ffffff; display: flex; flex-direction: row; font-weight: bold; height: 33px; justify-content: center; padding-top: 15px; width: 100%; }

.no-match-popup-content .modal-footer .modal-button { margin: 20px 10px 0 0; }

/* The Close Button */
.close { align-items: center; color: #aaaaaa; display: flex; float: right; font-size: 1.5625rem; font-weight: bold; margin-left: auto; margin-right: 0; }

.close:hover, .close:focus { color: #000000; cursor: pointer; text-decoration: none; }

.modal.delete-mode-modal ul.questions-list { list-style-type: none; }

.modal.delete-mode-modal .modal-content { padding-bottom: 10px; text-align: center; width: 70%; }

.modal.delete-mode-modal .modal-content .modalText { padding: 10px; text-align: left; }

.modal.delete-mode-modal .modal-content .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.modal.delete-mode-modal .modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.modal.delete-mode-modal .modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.delete-mode-modal .modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.delete-mode-modal .modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; font-weight: bold; padding: 12px; text-transform: none; }

.modal.delete-mode-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1em; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.delete-mode-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.delete-mode-modal .modal-content .modal-content-blue-button { background-color: #24408e; border: 2px solid #24408e; border-radius: 50px; color: #ffffff; font-weight: bold; width: 20%; }

.modal.delete-mode-modal .modal-content .modal-white-button { background-color: #ffffff; border: 2px solid #24408e; border-radius: 50px; color: #24408e; font-weight: normal; width: 20%; }

.modal.delete-mode-modal .modal-content .modal-grey-button { background-color: #c7c7c7; color: #ffffff; }

.modal.delete-mode-modal .modal-content .modal-green-button { background-color: #40ad48; color: #ffffff; }

.modal.delete-mode-modal .modal-content .modal-red-button { background-color: #d12229; color: #ffffff; }

.modal.delete-mode-modal .modal-content .modal-button-icon { margin-right: 2px; }

.modal.delete-mode-modal .modal-content .modal-header { background-color: #365fab; }

.modal.delete-mode-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2em; font-weight: 300; }

.modal.delete-mode-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.delete-mode-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .input-label { width: 250px; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .input-field { margin-right: 5px; width: 220px; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .er-name-input { margin-left: 250px; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .editable-area { background-color: #ffffff; border: 1px solid #a9a9a9; width: 50%; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .editable-area p { margin: 0; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .small-size-input { width: 300px; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .large-size-input { width: 70%; }

.modal.delete-mode-modal .modal-content .modal-body .modal-row .search-form { display: flex; }

.modal.delete-mode-modal .modal-content .modal-body .modal-blue-label { color: #24408e; font-weight: bold; margin-left: auto; margin-right: 5px; text-transform: uppercase; }

.modal.delete-mode-modal .modal-content .modal-body .oer-container { background-color: #ffffff; overflow-x: auto; }

.modal.delete-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail { border: 2px solid #d8d8d8; margin-right: 20px; }

.modal.delete-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-size { width: 130px; }

.modal.delete-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-image { height: 100px; width: 130px; }

.modal.delete-mode-modal .modal-content .modal-body .oer-container .hightlight { border: 2px solid #40ad48; }

.modal.delete-mode-modal .modal-content .modal-body .questions-row { flex-direction: column; }

.modal.delete-mode-modal .modal-content .modal-body .modal-section-header { font-weight: bold; }

.modal.delete-mode-modal .modal-content .modal-body .header-uppercase { text-transform: uppercase; }

.modal.delete-mode-modal .modal-content .modal-body .section-help-text { font-size: 0.9em; font-style: italic; }

.modal.delete-mode-modal .modal-content .modal-body textarea { vertical-align: top; width: 50%; }

.modal.delete-mode-modal .modal-content .modal-body .modal-accordion .assessment-container { align-items: center; background-color: #ffffff; display: flex; height: 100px; overflow-x: auto; padding: 0 20px; }

.modal.delete-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list { display: flex; }

.modal.delete-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment { background-color: #40474f; border: 3px solid #40474f; color: #ffffff; cursor: pointer; font-size: 0.9em; margin-right: 10px; padding: 0 8px; }

.modal.delete-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment.highlight { border: 3px solid #40ad48; }

.modal.delete-mode-modal .modal-content .modal-body .modal-accordion .modal-three-dots-icon { height: 22px; margin-right: 5px; }

.modal.edit-mode-modal ul.questions-list { list-style-type: none; }

.modal.edit-mode-modal .modal-content { padding-bottom: 10px; text-align: center; width: 70%; }

.modal.edit-mode-modal .modal-content .modalText { margin: unset; padding: 10px; text-align: left; }

.modal.edit-mode-modal .modal-content .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.modal.edit-mode-modal .modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.modal.edit-mode-modal .modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.edit-mode-modal .modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.edit-mode-modal .modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; font-weight: bold; padding: 12px; text-transform: none; }

.modal.edit-mode-modal .modal-content .button-container .grey-new-button { background-color: #8e8e8e; border: 0; color: #ffffff; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.modal.edit-mode-modal .modal-content .button-container .grey-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.edit-mode-modal .modal-content .button-container .grey-new-button.disabled { cursor: not-allowed; }

.modal.edit-mode-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1em; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.edit-mode-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.edit-mode-modal .modal-content .modal-content-blue-button { background-color: #24408e; border: 2px solid #24408e; border-radius: 50px; color: #ffffff; font-weight: bold; width: 20%; }

.modal.edit-mode-modal .modal-content .modal-white-button { background-color: #ffffff; border: 2px solid #24408e; border-radius: 50px; color: #24408e; font-weight: normal; width: 20%; }

.modal.edit-mode-modal .modal-content .modal-grey-button { background-color: #c7c7c7; color: #ffffff; }

.modal.edit-mode-modal .modal-content .modal-green-button { background-color: #40ad48; color: #ffffff; }

.modal.edit-mode-modal .modal-content .modal-red-button { background-color: #d12229; color: #ffffff; }

.modal.edit-mode-modal .modal-content .modal-button-icon { margin-right: 2px; }

.modal.edit-mode-modal .modal-content .modal-header { background-color: #365fab; }

.modal.edit-mode-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2em; font-weight: 300; }

.modal.edit-mode-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.edit-mode-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .input-label { width: 250px; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .input-field { margin-right: 5px; width: 220px; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .er-name-input { margin-left: 250px; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .editable-area { background-color: #ffffff; border: 1px solid #a9a9a9; width: 50%; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .editable-area p { margin: 0; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .small-size-input { width: 300px; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .large-size-input { width: 70%; }

.modal.edit-mode-modal .modal-content .modal-body .modal-row .search-form { display: flex; }

.modal.edit-mode-modal .modal-content .modal-body .modal-blue-label { color: #24408e; font-weight: bold; margin-left: auto; margin-right: 5px; text-transform: uppercase; }

.modal.edit-mode-modal .modal-content .modal-body .oer-container { background-color: #ffffff; overflow-x: auto; }

.modal.edit-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail { border: 2px solid #d8d8d8; margin-right: 20px; }

.modal.edit-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-size { width: 130px; }

.modal.edit-mode-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-image { height: 100px; width: 130px; }

.modal.edit-mode-modal .modal-content .modal-body .oer-container .hightlight { border: 2px solid #40ad48; }

.modal.edit-mode-modal .modal-content .modal-body .questions-row { flex-direction: column; }

.modal.edit-mode-modal .modal-content .modal-body .modal-section-header { font-weight: bold; }

.modal.edit-mode-modal .modal-content .modal-body .header-uppercase { text-transform: uppercase; }

.modal.edit-mode-modal .modal-content .modal-body .section-help-text { font-size: 0.9em; font-style: italic; }

.modal.edit-mode-modal .modal-content .modal-body textarea { vertical-align: top; width: 50%; }

.modal.edit-mode-modal .modal-content .modal-body .modal-accordion .assessment-container { align-items: center; background-color: #ffffff; display: flex; height: 100px; overflow-x: auto; padding: 0 20px; }

.modal.edit-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list { display: flex; }

.modal.edit-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment { background-color: #40474f; border: 3px solid #40474f; color: #ffffff; cursor: pointer; font-size: 0.9em; margin-right: 10px; padding: 0 8px; }

.modal.edit-mode-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment.highlight { border: 3px solid #40ad48; }

.modal.edit-mode-modal .modal-content .modal-body .modal-accordion .modal-three-dots-icon { height: 22px; margin-right: 5px; }

.modal.edit-mode-modal #occurredOnDate { height: 24px; width: 96px; }

.modal.edit-mode-modal .error { padding: 10px 0; color: #d12229; text-align: left; }

.modal.edit-mode-modal .hidden { display: none; }

.modal { background-color: rgba(0, 0, 0, 0.2); /* Black w/ opacity */ height: 100%; /* Full height */ left: 0; overflow: auto; /* Enable scroll if needed */ /* Hidden by default */ position: fixed; /* Stay in place */ top: 0; width: 100%; /* Full width */ z-index: 8; /* Sit on top */ }

.modal-show { display: block; /* show when allowed */ }

.modal-hide { display: none; /* Hidden by default */ }

/* Modal Content/Box */
.modal-content { background-color: #fefefe; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.24); display: flex; flex-direction: column; margin: auto; /* 15% from the top and centered */ width: 50%; /* Could be more or less, depending on screen size */ }

.modal-content .button-container { display: flex; float: right; height: unset; margin: 20px 0; padding: 0 20px; }

.modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px; }

.modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px; }

.modal-content .button-container .grey-new-button { background-color: #8e8e8e; border: 0; color: #ffffff; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.modal-content .button-container .grey-new-button.disabled { cursor: not-allowed; }

.modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.modal-content .button-container .pull-right { margin-left: auto; margin-right: 0; }

.modal-content .modal-header { background-color: #325db1; border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: row; height: 51px; padding: 10px 25px; }

.modal-content .modal-header .modal-title { align-items: center; color: #ffffff; display: flex; }

.modal-content .modal-body { padding: 25px; }

.modal-content .modal-body ul.studentList { border: 1px solid #e0e0e0; height: 200px; overflow: scroll; }

.modal-content .modal-body li.greyList { background-color: gray; color: #ffffff; }

.modal-content .modal-body li.list-row-odd { background-color: #ffffff; }

.modal-content .modal-body li.list-row-even { background-color: #e0e0e0; }

.modal-content .modal-body li { list-style: none; padding: 5px; /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.modal-content .modal-body li .add-checkbox-container { cursor: pointer; display: block; font-size: 1rem; margin: 5px 0; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.modal-content .modal-body li .add-checkbox-container input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.modal-content .modal-body li .checkmark { background-color: #ffffff; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.modal-content .modal-body li .add-checkbox-container:hover input ~ .checkmark { background-color: #ffffff; }

.modal-content .modal-body li .add-checkbox-container input:checked ~ .checkmark { background-color: #325db1; }

.modal-content .modal-body li .checkmark::after { content: ''; display: none; position: absolute; }

.modal-content .modal-body li .add-checkbox-container input:checked ~ .checkmark::after { display: block; }

.modal-content .modal-body li .add-checkbox-container .checkmark::after { border: solid white; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

.modal-content .modal-footer { display: flex; flex-direction: row; justify-content: center; margin: 20px; }

.modal-content .modal-footer .modal-button { margin: 20px 10px 0 0; }

/* The Close Button */
.close { align-items: center; color: #aaaaaa; display: flex; float: right; font-size: 1.5625rem; font-weight: bold; margin-left: auto; margin-right: 0; }

.close:hover, .close:focus { color: #000000; cursor: pointer; text-decoration: none; }

.modal { background-color: rgba(0, 0, 0, 0.2); /* Black w/ opacity */ height: 100%; /* Full height */ left: 0; overflow: auto; /* Enable scroll if needed */ /* Hidden by default */ position: fixed; /* Stay in place */ top: 0; width: 100%; /* Full width */ z-index: 8; /* Sit on top */ }

.modal-show { display: block; /* show when allowed */ }

.modal-hide { display: none; /* Hidden by default */ }

/* Modal Content/Box */
.modal-content { background-color: #fefefe; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.24); display: flex; flex-direction: column; margin: auto; /* 15% from the top and centered */ width: 50%; /* Could be more or less, depending on screen size */ }

.modal-content .button-container { display: flex; float: right; height: unset; margin: 20px 0; padding: 0 20px; }

.modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px; }

.modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px; }

.modal-content .button-container .grey-new-button { background-color: #8e8e8e; border: 0; color: #ffffff; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.modal-content .button-container .grey-new-button.disabled { cursor: not-allowed; }

.modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.modal-content .button-container .pull-right { margin-left: auto; margin-right: 0; }

.modal-content .modal-header { background-color: #325db1; border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: row; height: 51px; padding: 10px 25px; }

.modal-content .modal-header .modal-title { align-items: center; color: #ffffff; display: flex; }

.modal-content .modal-body { padding: 25px; }

.modal-content .modal-body ul.guideList { border: 1px solid #e0e0e0; height: 200px; overflow: scroll; }

.modal-content .modal-body li.greyList { background-color: gray; color: #ffffff; }

.modal-content .modal-body li.list-row-odd { background-color: #ffffff; }

.modal-content .modal-body li.list-row-even { background-color: #e0e0e0; }

.modal-content .modal-body li { list-style: none; padding: 5px; /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.modal-content .modal-body li .add-checkbox-container { cursor: pointer; display: block; font-size: 1rem; margin: 5px 0; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.modal-content .modal-body li .add-checkbox-container input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.modal-content .modal-body li .checkmark { background-color: #ffffff; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.modal-content .modal-body li .add-checkbox-container:hover input ~ .checkmark { background-color: #ffffff; }

.modal-content .modal-body li .add-checkbox-container input:checked ~ .checkmark { background-color: #325db1; }

.modal-content .modal-body li .checkmark::after { content: ''; display: none; position: absolute; }

.modal-content .modal-body li .add-checkbox-container input:checked ~ .checkmark::after { display: block; }

.modal-content .modal-body li .add-checkbox-container .checkmark::after { border: solid white; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

.modal-content .modal-footer { display: flex; flex-direction: row; justify-content: center; margin: 20px; }

.modal-content .modal-footer .modal-button { margin: 20px 10px 0 0; }

/* The Close Button */
.close { align-items: center; color: #aaaaaa; display: flex; float: right; font-size: 1.5625rem; font-weight: bold; margin-left: auto; margin-right: 0; }

.close:hover, .close:focus { color: #000000; cursor: pointer; text-decoration: none; }

.modal.delete-role-modal ul.questions-list { list-style-type: none; }

.modal.delete-role-modal .modal-content { padding-bottom: 10px; text-align: center; width: 70%; }

.modal.delete-role-modal .modal-content .modalText { padding: 10px; text-align: left; }

.modal.delete-role-modal .modal-content .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.modal.delete-role-modal .modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.modal.delete-role-modal .modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.delete-role-modal .modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.delete-role-modal .modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; font-weight: bold; padding: 12px; text-transform: none; }

.modal.delete-role-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1rem; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.delete-role-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.delete-role-modal .modal-content .modal-content-blue-button { background-color: #24408e; border: 2px solid #24408e; border-radius: 50px; color: #ffffff; font-weight: bold; width: 20%; }

.modal.delete-role-modal .modal-content .modal-white-button { background-color: #ffffff; border: 2px solid #24408e; border-radius: 50px; color: #24408e; font-weight: normal; width: 20%; }

.modal.delete-role-modal .modal-content .modal-grey-button { background-color: #c7c7c7; color: #ffffff; }

.modal.delete-role-modal .modal-content .modal-green-button { background-color: #40ad48; color: #ffffff; }

.modal.delete-role-modal .modal-content .modal-red-button { background-color: #d12229; color: #ffffff; }

.modal.delete-role-modal .modal-content .modal-button-icon { margin-right: 2px; }

.modal.delete-role-modal .modal-content .modal-header { background-color: #365fab; }

.modal.delete-role-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2rem; font-weight: 300; }

.modal.delete-role-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.delete-role-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.delete-role-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .input-label { width: 250px; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .input-field { margin-right: 5px; width: 220px; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .er-name-input { margin-left: 250px; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .editable-area { background-color: #ffffff; border: 1px solid #a9a9a9; width: 50%; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .editable-area p { margin: 0; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .small-size-input { width: 300px; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .large-size-input { width: 70%; }

.modal.delete-role-modal .modal-content .modal-body .modal-row .search-form { display: flex; }

.modal.delete-role-modal .modal-content .modal-body .modal-blue-label { color: #24408e; font-weight: bold; margin-left: auto; margin-right: 5px; text-transform: uppercase; }

.modal.delete-role-modal .modal-content .modal-body .oer-container { background-color: #ffffff; overflow-x: auto; }

.modal.delete-role-modal .modal-content .modal-body .oer-container .resource-thumbnail { border: 2px solid #d8d8d8; margin-right: 20px; }

.modal.delete-role-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-size { width: 130px; }

.modal.delete-role-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-image { height: 100px; width: 130px; }

.modal.delete-role-modal .modal-content .modal-body .oer-container .hightlight { border: 2px solid #40ad48; }

.modal.delete-role-modal .modal-content .modal-body .questions-row { flex-direction: column; }

.modal.delete-role-modal .modal-content .modal-body .modal-section-header { font-weight: bold; }

.modal.delete-role-modal .modal-content .modal-body .header-uppercase { text-transform: uppercase; }

.modal.delete-role-modal .modal-content .modal-body .section-help-text { font-size: 0.9rem; font-style: italic; }

.modal.delete-role-modal .modal-content .modal-body textarea { vertical-align: top; width: 50%; }

.modal.delete-role-modal .modal-content .modal-body .modal-accordion .assessment-container { align-items: center; background-color: #ffffff; display: flex; height: 100px; overflow-x: auto; padding: 0 20px; }

.modal.delete-role-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list { display: flex; }

.modal.delete-role-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment { background-color: #40474f; border: 3px solid #40474f; color: #ffffff; cursor: pointer; font-size: 0.9rem; margin-right: 10px; padding: 0 8px; }

.modal.delete-role-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment.highlight { border: 3px solid #40ad48; }

.modal.delete-role-modal .modal-content .modal-body .modal-accordion .modal-three-dots-icon { height: 22px; margin-right: 5px; }

.modal.login-name-taken-modal ul.questions-list { list-style-type: none; }

.modal.login-name-taken-modal .modal-content { padding-bottom: 10px; text-align: center; width: 50%; }

.modal.login-name-taken-modal .modal-content .modalText { padding: 10px; text-align: left; }

.modal.login-name-taken-modal .modal-content .modalText ul { padding: 10px 20px; }

.modal.login-name-taken-modal .modal-content .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.modal.login-name-taken-modal .modal-content .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.modal.login-name-taken-modal .modal-content .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.login-name-taken-modal .modal-content .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px 15px; }

.modal.login-name-taken-modal .modal-content .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; font-weight: bold; padding: 12px; text-transform: none; }

.modal.login-name-taken-modal .modal-content .button { align-items: center; cursor: pointer; display: flex; font-size: 1rem; font-weight: bold; justify-content: center; margin-right: 5px; padding: 0 5px; text-transform: uppercase; }

.modal.login-name-taken-modal .modal-content .modal-blue-button { background-color: #24408e; color: #ffffff; font-weight: bold; }

.modal.login-name-taken-modal .modal-content .modal-content-blue-button { background-color: #24408e; border: 2px solid #24408e; border-radius: 50px; color: #ffffff; font-weight: bold; width: 20%; }

.modal.login-name-taken-modal .modal-content .modal-white-button { background-color: #ffffff; border: 2px solid #24408e; border-radius: 50px; color: #24408e; font-weight: normal; width: 20%; }

.modal.login-name-taken-modal .modal-content .modal-grey-button { background-color: #c7c7c7; color: #ffffff; }

.modal.login-name-taken-modal .modal-content .modal-green-button { background-color: #40ad48; color: #ffffff; }

.modal.login-name-taken-modal .modal-content .modal-red-button { background-color: #d12229; color: #ffffff; }

.modal.login-name-taken-modal .modal-content .modal-button-icon { margin-right: 2px; }

.modal.login-name-taken-modal .modal-content .modal-header { background-color: #365fab; }

.modal.login-name-taken-modal .modal-content .modal-header .modal-title { color: #ffffff; font-size: 2rem; font-weight: 300; }

.modal.login-name-taken-modal .modal-content .modal-header .buttons-container { display: flex; margin-left: auto; margin-right: 0; }

.modal.login-name-taken-modal .modal-content .modal-body { background-color: #f0f0f0; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row { display: flex; padding: 5px 0; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .input-label { width: 250px; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .input-field { margin-right: 5px; width: 220px; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .er-name-input { margin-left: 250px; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .editable-area { background-color: #ffffff; border: 1px solid #a9a9a9; width: 50%; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .editable-area p { margin: 0; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .medium-size-input { width: 600px; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .small-size-input { width: 300px; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .large-size-input { width: 70%; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-row .search-form { display: flex; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-blue-label { color: #24408e; font-weight: bold; margin-left: auto; margin-right: 5px; text-transform: uppercase; }

.modal.login-name-taken-modal .modal-content .modal-body .oer-container { background-color: #ffffff; overflow-x: auto; }

.modal.login-name-taken-modal .modal-content .modal-body .oer-container .resource-thumbnail { border: 2px solid #d8d8d8; margin-right: 20px; }

.modal.login-name-taken-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-size { width: 130px; }

.modal.login-name-taken-modal .modal-content .modal-body .oer-container .resource-thumbnail .resource-thumbnail-image { height: 100px; width: 130px; }

.modal.login-name-taken-modal .modal-content .modal-body .oer-container .hightlight { border: 2px solid #40ad48; }

.modal.login-name-taken-modal .modal-content .modal-body .questions-row { flex-direction: column; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-section-header { font-weight: bold; }

.modal.login-name-taken-modal .modal-content .modal-body .header-uppercase { text-transform: uppercase; }

.modal.login-name-taken-modal .modal-content .modal-body .section-help-text { font-size: 0.9rem; font-style: italic; }

.modal.login-name-taken-modal .modal-content .modal-body textarea { vertical-align: top; width: 50%; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-accordion .assessment-container { align-items: center; background-color: #ffffff; display: flex; height: 100px; overflow-x: auto; padding: 0 20px; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list { display: flex; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment { background-color: #40474f; border: 3px solid #40474f; color: #ffffff; cursor: pointer; font-size: 0.9rem; margin-right: 10px; padding: 0 8px; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-accordion .assessment-container .assessment-list .assessment.highlight { border: 3px solid #40ad48; }

.modal.login-name-taken-modal .modal-content .modal-body .modal-accordion .modal-three-dots-icon { height: 22px; margin-right: 5px; }

.modal { background-color: rgba(0, 0, 0, 0.2); /* Black w/ opacity */ height: 100%; /* Full height */ left: 0; overflow: auto; /* Enable scroll if needed */ /* Hidden by default */ position: fixed; /* Stay in place */ top: 0; width: 100%; /* Full width */ z-index: 8; /* Sit on top */ }

.modal-show { display: block; /* show when allowed */ }

.modal-hide { display: none; /* Hidden by default */ }

/* Modal Content/Box */
.modal-content { background-color: #fefefe; border-radius: 3px; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5), 0 5px 10px rgba(0, 0, 0, 0.24); display: flex; flex-direction: column; width: 35%; /* Could be more or less, depending on screen size */ }

.modal-content .modal-header { border-bottom: 1px solid #e6e6e6; display: flex; flex-direction: row; height: 51px; padding: 10px 25px; }

.modal-content .modal-header .modal-title { align-items: center; display: flex; }

.modal-content .modal-body { padding: 25px; }

.modal-content .modal-body textarea { height: 60px; margin-bottom: 12px; width: 100%; }

.modal-content .modal-footer { display: flex; flex-direction: row; justify-content: center; margin: 20px; }

.modal-content .modal-footer .modal-button { margin: 20px 10px 0 0; }

/* The Close Button */
.close { align-items: center; color: #aaaaaa; display: flex; float: right; font-size: 1.5625rem; font-weight: bold; margin-left: auto; margin-right: 0; }

.close:hover, .close:focus { color: #000000; cursor: pointer; text-decoration: none; }

/* ------------------------------------------------------------------------- */
/* BEGIN: components/attendance-editor/_attendance-editor.scss */
.component.attendance-editor-component button { font-size: inherit; color: #2183d5; position: inherit; height: inherit; width: inherit; left: inherit; border-radius: inherit; border: none; }

.attendance-editor-component { overflow: visible; display: inline-table; padding: .65em; }

.attendance-editor-component .attendance-items { color: #333333; padding-bottom: .5em; }

.attendance-editor-component .attendance-items .item-time-row { display: flex; flex-direction: row; border-bottom: 1px solid #e0e0e0; padding: .5em; cursor: pointer; }

.attendance-editor-component .attendance-items .item-time-row.expanded { border-top-left-radius: 3px; border-top-right-radius: 3px; border-top: 1px solid #fbbf2d; border-left: 1px solid #fbbf2d; border-right: 1px solid #fbbf2d; border-bottom: 1px solid #fbbf2d; background-color: #fcebb9; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

.attendance-editor-component .attendance-items .item-time-row .divider { width: .35em; }

.attendance-editor-component .attendance-items .item-time-row:hover { background-color: #fceeca; border-bottom: 1px solid #fbbf2d; }

.attendance-editor-component .attendance-items .item-creator .note { font-size: .8em; line-height: 2.17em; height: 2.17em; background-color: #fdfdf6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #fbbf2d; border-right: 1px solid #fbbf2d; border-bottom: 1px solid #fbbf2d; }

.attendance-editor-component .attendance-items.edit { padding-right: 0.5em; }

.attendance-editor-component .attendance-items.edit .item-time-row { position: relative; border-bottom: none; z-index: 100; cursor: default; }

.attendance-editor-component .attendance-items.edit .item-time-row.not-editable { padding: .1em; padding-top: 0.5em; padding-right: 0.5em; margin-top: 0.5em; margin-left: 1.2em; margin-right: .5em; border-top-left-radius: 3px; border-top-right-radius: 3px; border-top: 1px solid #fde5aa; border-left: 1px solid #fde5aa; border-right: 1px solid #fde5aa; border-bottom: none; background-color: transparent; box-shadow: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }

.attendance-editor-component .attendance-items.edit .item-time-row .delete-item { position: relative; top: .6em; left: -0.25em; visibility: hidden; cursor: default; }

.attendance-editor-component .attendance-items.edit .item-time-row .delete-item.allow-delete { visibility: visible; cursor: pointer; }

.attendance-editor-component .attendance-items.edit .item-time-row .item-group { position: relative; display: inline-block; width: 100%; margin-right: .5em; }

.attendance-editor-component .attendance-items.edit .item-time-row .item-group .item-names-container { position: relative; height: 0; display: none; }

.attendance-editor-component .attendance-items.edit .item-time-row .item-group .item-names-container .selectable-item-list { position: relative; z-index: -1; }

.attendance-editor-component .attendance-items.edit .item-time-row .item-group .item-names-container .selectable-item-list .selectable-item { background-color: white; border-left: 1px solid  #e0e0e0; border-right: 1px solid  #e0e0e0; height: 2.2em; padding: .6em; margin-left: .6em; margin-right: .6em; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.attendance-editor-component .attendance-items.edit .item-time-row .item-group .item-names-container .selectable-item-list .selectable-item:hover { background-color: #fbbf2d; cursor: pointer; }

.attendance-editor-component .attendance-items.edit .item-time-row .item-group .item-names-container .selectable-item-list .selectable-item:last-child { border-bottom: 1px solid  #e0e0e0; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.12), 0 3px 2px rgba(0, 0, 0, 0.24); }

.attendance-editor-component .attendance-items.edit .item-time-row .item-group .item-names-container.expanded { display: block; }

.attendance-editor-component .attendance-items.edit .item-time-row input[type=number] { border: 1px solid #e0e0e0; text-align: center; width: 2em; }

.attendance-editor-component .attendance-items.edit .item-time-row input[type=number]::-webkit-inner-spin-button, .attendance-editor-component .attendance-items.edit .item-time-row input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.attendance-editor-component .attendance-items.edit .item-time-row input[type=number] { -moz-appearance: textfield; }

.attendance-editor-component .attendance-items.edit .item-time-row input.item-name { border: 1px solid #e0e0e0; border-radius: 4px; padding: .5em; width: calc(100% - 1.15em); }

.attendance-editor-component .attendance-items.edit .item-time-row input.item-name.invalid { border: 1px solid red; }

.attendance-editor-component .attendance-items.edit .item-time-row div.item-name { padding: 0em; margin: 0em; text-align: left; }

.attendance-editor-component .attendance-items.edit .item-time-row .hours-minutes { display: flex; flex-direction: row; }

.attendance-editor-component .attendance-items.edit .item-time-row .hours-minutes .divider { width: .35em; position: relative; top: 0.45em; }

.attendance-editor-component .attendance-items.edit .item-time-row .hours-minutes .item-changed { position: relative; top: .7em; margin-left: .2em; width: 0px; height: 0px; overflow: visible; color: green; }

.attendance-editor-component .attendance-items.edit .item-time-row:hover { font-weight: normal; background-color: transparent; border-bottom: none; }

.attendance-editor-component .attendance-items.edit .item-creator .note { margin-left: 1.5em; margin-right: .6em; text-align: left; padding-left: 1em; margin-bottom: 0.5em; font-size: .8em; line-height: 2.17em; height: initial; background-color: white; box-shadow: none; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; border-left: 1px solid #fde5aa; border-right: 1px solid #fde5aa; border-bottom: 1px solid #fde5aa; }

.attendance-editor-component .footer-controls { padding-top: 0.5em; padding-bottom: 0.5em; font-size: .75em; display: flex; flex-direction: column; justify-content: center; }

.attendance-editor-component .footer-controls .btn-group { display: flex; flex-direction: row; align-content: center; }

.attendance-editor-component .footer-controls button { font-weight: bold; }

.attendance-editor-component .footer-controls button:disabled { color: #89bfed; }

.attendance-editor-component .footer-controls .no-attendance-items { font-style: italic; color: #838383; }

.attendance-editor-component .footer-controls .no-attendance-items.for-student { position: relative; top: .2em; font-style: normal; font-weight: normal; font-size: 1.3em; color: black; }

.attendance-editor-component .item-details { position: absolute; top: 0; left: 0; z-index: 9; border-top-left-radius: 2px; border-top-right-radius: 2px; border-top: 1px solid #fbbf2d; border-left: 1px solid #fbbf2d; border-right: 1px solid #fbbf2d; border-bottom: 2px solid #fbbf2d; background-color: #fcebb9; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }

.attendance-editor-component .item-details .item-time-row { display: flex; flex-direction: row; border-bottom: 1px solid #e0e0e0; padding: .5em; }

.attendance-editor-component .item-details .item-time-row .divider { width: .35em; }

.attendance-editor-component .save-failed { color: red; border: 1px solid red; border-radius: 3px; background-color: rgba(255, 0, 0, 0.05); padding: 0.5em; }

.attendance-editor-component .push { margin-left: auto; }

.attendance-editor-component .debug { border: 4px dotted red; }

/* END: components/attendance-editor/_attendance-editor.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: _app.scss */
* { box-sizing: border-box; }

.app { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; margin: 0; overflow: hidden; padding: 0; width: 100%; }

.has-order-menu { --order-menu-item-height: 48px; }

.masquerading { --masquerade-banner-height: 34px; }

.app-body { transition: height 0.2s; align-items: stretch; box-sizing: border-box; display: flex; flex-direction: row; height: calc(100vh - 194px - var(--masquerade-banner-height)); width: 100%; }

.app-body.with-main-top-menu.with-main-bottom-menu { height: calc(100vh - 194px - var(--masquerade-banner-height)); }

.app-body.expanded { height: calc(100vh - var(--masquerade-banner-height)); }

.app-body.expanded.with-student-mode-toggle { height: calc(100vh - 108px - var(--masquerade-banner-height)); }

.app-body.expanded.with-main-bottom-menu { height: calc(100vh - 48px - var(--masquerade-banner-height)); }

.app-body.expanded.with-main-top-menu { height: calc(100vh - 148px - var(--masquerade-banner-height)); }

.app-body.with-main-top-menu { height: calc(100vh - 148px - var(--masquerade-banner-height)); }

.app-body.with-main-top-menu.with-parent-viewing-student { height: calc(100vh - 148px - var(--masquerade-banner-height)); }

.app-body.with-main-top-menu.with-parent-viewing-student.with-student-mode-toggle { height: calc(100vh - 238px - var(--masquerade-banner-height)); }

.app-body.with-main-bottom-menu { height: calc(100vh - 48px - var(--masquerade-banner-height)); }

.router-view-container { box-sizing: border-box; display: flex; flex-direction: column; height: 100%; overflow: auto; position: relative; width: 100%; }

/* END: _app.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/_view.scss */
.view { box-sizing: border-box; height: 100%; margin: 0; overflow: auto; padding: 0; width: 100%; background-color: #ffffff; position: relative; }

.view h1 { background-color: #ffffff; color: #686b69; font-family: 'Roboto', sans-serif; font-size: 1.75rem; font-style: normal; font-weight: normal; margin: 0; padding: 8px; }

.view p { color: #000000; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.625em; }

.view .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.view .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.view .button-container .blue-new-button.adjust-pacing-btn { padding: 5px; }

.view .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px; }

.view .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px; }

.view .button-container .grey-new-button.curved { border-radius: 3px; padding: 8px; }

.view .button-container .grey-new-button { background-color: #8e8e8e; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.view .button-container .grey-new-button.disabled { cursor: not-allowed; pointer-events: none; }

.view .button-container .disabled-new-button { background-color: #8e8e8e; border: 0; color: #ffffff; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.view .button-container .disabled-new-button { pointer-events: none; }

.view .button-container .disabled-new-button.curved { border-radius: 3px; padding: 8px; }

.view .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; cursor: pointer; font-weight: bold; padding: 12px; text-transform: none; }

.view .button-container .pull-right { margin-left: auto; margin-right: 0; }

.view .button-container.disabled { cursor: not-allowed; }

/* END: views/_view.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/dev/_dev.scss */
.view.dev-view { overflow: hidden; }

.dev-view { border-color: #ff0000; border-style: dotted; border-width: 4px; background-color: #115aa6; }

.dev-view #content-1 { border: 1px solid red; height: 100px; width: 100px; }

/* END: views/dev/_dev.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/lesson-selector/_lesson-selector.scss */
.view.lesson-selector-view { height: 100%; }

.lesson-selector-view { border-color: #ff0000; border-style: dotted; border-width: 4px; background-color: #115aa6; }

/* END: views/lesson-selector/_lesson-selector.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/dev/freeze-columns-and-rows/_freeze-columns-and-rows.scss */
.view.freeze-columns-and-rows-view { overflow: hidden; }

.freeze-columns-and-rows-view { border-color: #ff0000; border-style: dotted; border-width: 4px; background-color: #115aa6; }

.freeze-columns-and-rows-view .container { border: 2px solid #00cc00; height: 200px; overflow: scroll; position: relative; width: 350px; }

.freeze-columns-and-rows-view table { border-collapse: separate; border-spacing: 0; position: absolute; table-layout: fixed; width: 100%; }

.freeze-columns-and-rows-view td, .freeze-columns-and-rows-view th { border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; box-sizing: border-box; margin: 0; padding: 5px 10px; width: 100px; }

.freeze-columns-and-rows-view td { background: #ffffff; }

.freeze-columns-and-rows-view .top-left, .freeze-columns-and-rows-view th { background: #eeeeee; }

.freeze-columns-and-rows-view .top-left { border-bottom: 1px solid #cccccc; border-right: 1px solid #cccccc; box-sizing: border-box; left: 0; position: absolute; top: 0; }

/* END: views/dev/freeze-columns-and-rows/_freeze-columns-and-rows.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/errors/_not-found.scss */
.not-found-view form button { width: 100%; }

/* END: views/errors/_not-found.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/errors/_no-data.scss */
.no-data-view { display: flex; font-size: 1rem; justify-content: center; }

.no-data-view .no-data-message-wrapper { color: #676b69; font-family: 'Roboto', sans-serif; margin-top: 10%; }

.no-data-view .no-data-message-wrapper .greetings-text { font-size: 2rem; }

.no-data-view .no-data-message-wrapper .calvert-title-text { font-size: 3rem; }

.no-data-view .no-data-message-wrapper p { color: #676b69; }

/* END: views/errors/_no-data.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/errors/_network-error.scss */
.network-error-view { display: flex; font-size: 1rem; justify-content: center; padding: 10px; }

.network-error-view .network-error-message-wrapper { color: #676b69; font-family: 'Roboto', sans-serif; margin-top: 10%; }

.network-error-view .network-error-message-wrapper .greetings-text { font-size: 2rem; }

.network-error-view .network-error-message-wrapper .calvert-title-text { font-size: 3rem; }

.network-error-view .network-error-message-wrapper p { color: #676b69; }

/* END: views/errors/_network-error.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/errors/_forbidden-error.scss */
.forbidden-error-view { display: flex; font-size: 1rem; justify-content: center; padding: 10px; }

.forbidden-error-view .forbidden-error-message-wrapper { color: #676b69; font-family: 'Roboto', sans-serif; margin-top: 10%; }

.forbidden-error-view .forbidden-error-message-wrapper .greetings-text { font-size: 2rem; }

.forbidden-error-view .forbidden-error-message-wrapper .calvert-title-text { font-size: 3rem; }

.forbidden-error-view .forbidden-error-message-wrapper p { color: #676b69; }

/* END: views/errors/_forbidden-error.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/sign-in/_sign-in.scss */
.view.sign-in-view { overflow: hidden; }

.sign-in-view { background-color: #115aa6; background-image: url("./common/assets/images/login-chemistry-bgrd.svg"); background-size: cover; padding-top: 6%; text-align: center; }

.sign-in-view .calvert-card { margin: 25px auto; padding: 50px 25px 25px; text-align: center; width: 304px; }

.sign-in-view .calvert-card .svg-container { margin: 0 auto 25px; width: 300px; }

.sign-in-view input { background-color: rgba(255, 255, 255, 0.9) !important; border-color: #bedaf8; border-radius: 0; border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; box-shadow: none; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.125rem; font-weight: normal; height: 42px; line-height: 24px; margin-bottom: 1px; padding: 4px; width: 300px; }

.sign-in-view input:-webkit-autofill, .sign-in-view input:-webkit-autofill:hover, .sign-in-view input:-webkit-autofill:focus { /* stylelint-disable property-no-vendor-prefix */ box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.9) inset; /* stylelint-enable property-no-vendor-prefix */ }

.sign-in-view input#password { border-radius: 0; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; margin-top: 1px; }

.sign-in-view p, .sign-in-view h1 { background-color: transparent; color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; line-height: normal; margin: 0; }

.sign-in-view h1 { font-kerning: normal; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.0175em; }

@media (min-width: 500px) { .sign-in-view p, .sign-in-view h1 { font-size: 2rem; }
  .sign-in-view h1 { font-size: 3.25rem; } }

.sign-in-view form button { background-color: #fdb515; border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); color: #0c4178; font-size: 1.125em; height: 50px; line-height: 24px; margin-top: 10px; padding: 4px; width: 100%; }

/* END: views/sign-in/_sign-in.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/sign-out/_sign-out.scss */
.view.sign-out-view { overflow: hidden; }

.sign-out-view { background-color: #115aa6; background-image: url("./common/assets/images/login-chemistry-bgrd.svg"); background-size: cover; padding-top: 6%; text-align: center; }

.sign-out-view .calvert-card { margin: 25px auto; padding: 50px 25px 25px; text-align: center; width: 304px; }

.sign-out-view .calvert-card .svg-container { margin: 0 auto 25px; width: 300px; }

.sign-out-view input { background-color: rgba(255, 255, 255, 0.9) !important; border-color: #bedaf8; border-radius: 0; border-style: solid; border-top-left-radius: 6px; border-top-right-radius: 6px; border-width: 1px; box-shadow: none; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.125em; font-weight: normal; height: 42px; line-height: 24px; margin-bottom: 1px; padding: 4px; width: 300px; }

.sign-out-view input:-webkit-autofill, .sign-out-view input:-webkit-autofill:hover, .sign-out-view input:-webkit-autofill:focus { /* stylelint-disable property-no-vendor-prefix */ box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.9) inset; /* stylelint-enable property-no-vendor-prefix */ }

.sign-out-view input#password { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; border-radius: 0; margin-top: 1px; }

.sign-out-view p, .sign-out-view h1 { background-color: transparent; color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; line-height: normal; margin: 0; }

.sign-out-view h1 { font-kerning: normal; font-size: 1.5rem; font-weight: 500; letter-spacing: 0.0175em; }

@media (min-width: 500px) { .sign-out-view p, .sign-out-view h1 { font-size: 2rem; }
  .sign-out-view h1 { font-size: 3.25rem; } }

.sign-out-view form button { background-color: #fdb515; border-radius: 6px; border-style: solid; border-width: 1px; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); color: #0c4178; font-size: 1.125em; height: 50px; line-height: 24px; margin-top: 10px; padding: 4px; width: 100%; }

/* END: views/sign-out/_sign-out.scss */
/* ========================================================================= */
.forgot-login-view { background-color: whitesmoke; height: 100vh; }

.forgot-login-view input[type='checkbox'] { visibility: visible; }

.forgot-login-view .forgot-login-header { background-color: #115aa6; height: 100px; width: 100%; }

.forgot-login-view .forgot-login-header .logo { padding-top: 20px; }

.forgot-login-view .marginalized { margin-left: 15%; margin-right: 15%; }

.forgot-login-view .forgot-login-body { padding-top: 70px; }

.forgot-login-view .forgot-login-body .status-container { margin: 0 auto; width: 400px; }

.forgot-login-view .forgot-login-body h1 { color: #115aa6; text-transform: uppercase; }

.forgot-login-view .forgot-login-body h2 { font-size: 1rem; text-transform: uppercase; }

.forgot-login-view .forgot-login-body.bold { font-weight: bold; }

.forgot-login-view .textbox { border: 2px solid #2183d5; border-radius: 4px; font-size: 0.95rem; padding: 10px; width: 95%; }

.forgot-login-view .textbox.invalid { background-color: #fff0f0; border-color: #ff0000; }

.forgot-login-view .textbox.valid { background-color: #f4fbf4; border-color: #008000; }

.forgot-login-view .button-container { margin-top: 20px; padding-bottom: 20px; }

.forgot-login-view .button-container .button { margin-right: 16px; }

.forgot-login-view .button { border: 2px solid #115aa6; border-radius: 10px; color: #115aa6; cursor: pointer; font-size: 1rem; font-weight: bold; padding: 3px 8px; text-transform: uppercase; height: 34px; }

.forgot-login-view .button.emphasis { background-color: #115aa6; color: #ffffff; }

.forgot-login-view .button.disabled { border-color: #4483cc; color: #4483cc; cursor: default; }

.forgot-login-view .check-icon-container { height: 60px; }

.forgot-login-view .success-text { color: #808080; font-size: 1.5rem; font-weight: 300; padding-bottom: 20px; text-align: center; }

.forgot-login-view .message-text { color: #333333; text-align: center; }

.forgot-login-view .message-list-container { padding-top: 20px; text-align: left; transform: translate(40px, 0%); width: 360px; }

.forgot-login-view ul.message-list > li { list-style-type: disc; margin-left: 0; padding: 5px; padding-left: 0; }

.forgot-login-view .login-link { padding-top: 40px; text-align: center; text-transform: uppercase; }

.invalid { border-color: red; }

.valid { border-color: #66ce00; }

.hide-focus-animation:focus { -webkit-animation: none; animation: none; outline: none; }

.sub-text { text-align: center; }

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

/* ------------------------------------------------------------------------- */
/* BEGIN: views/homes/_home.scss */
.view.home-view { height: 100%; }

.home-view { display: flex; flex-direction: column; }

/* END: views/homes/_home.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/homes/_sys-admin-home.scss */
.view.home-view.sys-admin-home-view { height: 100%; overflow: hidden; }

.view.home-view.sys-admin-home-view .btn-new-lesson { float: right; }

.view.home-view.sys-admin-home-view .users-status-filters { padding: 12px; padding-right: 4px; margin-left: auto; display: flex; flex-direction: row; font-size: 0.85rem; color: #676b69; }

.view.home-view.sys-admin-home-view .users-status-filters input[type='checkbox'] { display: none; }

.view.home-view.sys-admin-home-view .users-status-filters input[type='checkbox'] + label { background-color: #ffffff; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }

.view.home-view.sys-admin-home-view .users-status-filters input[type='checkbox']:checked + label { color: #ffffff; background-color: #1f7bc1; }

.view.home-view.sys-admin-home-view .users-status-filters label { padding: 8px 4px; min-width: 8.5em; width: 8.5em; height: 32px; text-align: center; cursor: pointer; }

.view.home-view.sys-admin-home-view .users-status-filters label.active { color: #ffffff; background-color: #1f7bc1; }

.view.home-view.sys-admin-home-view .users-status-filters label:first-of-type { margin-left: 3px; border: 1px solid #1a68a8; border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }

.view.home-view.sys-admin-home-view .users-status-filters label:last-of-type { border: 1px solid #1a68a8; border-left: none; border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }

.view.home-view.sys-admin-home-view .search-controls { display: flex; flex-direction: row; }

.view.home-view.sys-admin-home-view .search-controls .search-bar { width: 50%; margin-left: 14px; border-radius: 2px; padding: 10px; }

.view.home-view.sys-admin-home-view .search-controls .search-bar .message { color: #3c4043; padding-bottom: 8px; text-shadow: 0px 1px 1px white; }

.view.home-view.sys-admin-home-view .search-controls .search-bar span.calvert-btn { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ cursor: pointer; }

.view.home-view.sys-admin-home-view .search-controls .search-bar input[type='text'].search { width: 80%; padding: 4px; border: 1px solid #cccccc; }

.view.home-view.sys-admin-home-view .search-controls .button-container { display: flex; height: unset; padding: 10px 24px 10px 24px; width: 50%; }

.view.home-view.sys-admin-home-view .search-controls .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.view.home-view.sys-admin-home-view .search-controls .button-container .pull-right { margin-left: auto; margin-right: 0px; }

.view.home-view.sys-admin-home-view .search-results { margin-left: 24px; margin-right: 24px; }

.view.home-view.sys-admin-home-view .search-results-header button { color: #ffffff; }

.view.home-view.sys-admin-home-view .search-results-header .sort-button { border: none; background: none; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row { max-height: 40px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row, .view.home-view.sys-admin-home-view .search-results-header .filter-row { display: flex; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-user-id, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-user-id { width: 10.5%; padding: 0 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-login-name, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-login-name { width: 25%; padding: 0 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-first-name, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-first-name { width: 17%; padding: 0 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-last-name, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-last-name { width: 17%; padding: 0 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-institution, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-institution { width: 15%; padding: 0 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-role, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-role { width: 15%; padding: 0 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-add-user, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-add-user { padding: 0 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-add-user svg, .view.home-view.sys-admin-home-view .search-results-header .filter-row .col-add-user svg { cursor: pointer; height: 25px; width: 25px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row { padding: 6px 0; color: #ffffff; margin: 0; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-size: 1.2rem; background-color: #8e8e8e; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-code { margin-left: 10px; }

.view.home-view.sys-admin-home-view .search-results-header .sort-row .col-owner { margin-left: 10px; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row { padding-top: 6px; padding-bottom: 6px; background-color: white; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row * { box-sizing: border-box; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row input[type='text'] { margin: 0; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .col-user-id { padding: 0; width: 10%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .col-login-name { padding: 0; width: 26%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .col-first-name { padding: 0; width: 18%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .col-last-name { padding: 0; width: 18%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .col-role { padding: 0; width: 14%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .col-role select { width: 100%; height: 100%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .col-institution { padding: 0; width: calc(14% + 8px); }

.view.home-view.sys-admin-home-view .search-results-header .filter-row input { width: 100%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .searchable-combo { position: relative; z-index: 999; overflow: visible; height: 0px; color: black; font-family: sans-serif; font-size: 100%; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .searchable-combo ul { border: 1px #bfbfbf solid; padding: 4px; max-height: 200px; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35); border-radius: 4px; overflow: scroll; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .searchable-combo ul li { padding: 4px; }

.view.home-view.sys-admin-home-view .search-results-header .filter-row .searchable-combo ul li:hover { background-color: lightgray; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }

.view.home-view.sys-admin-home-view .scrollable { box-sizing: border-box; height: calc(100vh - 342px); }

.view.home-view.sys-admin-home-view .scrollable table { border-collapse: collapse; width: 100%; }

.view.home-view.sys-admin-home-view .scrollable table colgroup col.col-user-id { width: 10%; }

.view.home-view.sys-admin-home-view .scrollable table colgroup col.col-login-name { width: 26%; }

.view.home-view.sys-admin-home-view .scrollable table colgroup col.col-first-name { width: 18%; }

.view.home-view.sys-admin-home-view .scrollable table colgroup col.col-last-name { width: 18%; }

.view.home-view.sys-admin-home-view .scrollable table colgroup col.col-role { width: 14%; }

.view.home-view.sys-admin-home-view .scrollable table colgroup col.col-institution { width: 14%; }

.view.home-view.sys-admin-home-view .scrollable table tr.even { background-color: white; }

.view.home-view.sys-admin-home-view .scrollable table tr.odd { background-color: #f1f1f1; }

.view.home-view.sys-admin-home-view .scrollable table tr { width: 100%; }

.view.home-view.sys-admin-home-view .scrollable table tr td.col-user-id { width: 10%; }

.view.home-view.sys-admin-home-view .scrollable table tr td.col-role { width: 14%; }

.view.home-view.sys-admin-home-view .scrollable table tr td.col-institution { width: 14%; }

.view.home-view.sys-admin-home-view .scrollable table tr td { padding-top: 4px; padding-bottom: 4px; }

.view.home-view.sys-admin-home-view .scrollable table tr td i { color: black; }

/* END: views/homes/_sys-admin-home.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/parent-home/_parent-home.scss */
.view.home-view.parent-home-view { height: 100%; overflow: hidden; }

/* END: views/parent-home/_parent-home.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/homes/_student-home.scss */
.view.home-view.student-home-view { height: 100%; overflow: hidden; }

/* END: views/homes/_student-home.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/institutions/_sys-admin-institutions.scss */
.view.sys-admin-institutions-view { height: 100%; overflow: hidden; }

.view.sys-admin-institutions-view .filter-wrapper { width: 100%; height: 55px; }

.view.sys-admin-institutions-view .filter-wrapper .search-controls { display: flex; flex-direction: row; justify-content: flex-end; }

.view.sys-admin-institutions-view .filter-wrapper .search-controls .button-container { display: flex; height: unset; padding: 10px 24px 10px 24px; }

.view.sys-admin-institutions-view .filter-wrapper .search-controls .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.view.sys-admin-institutions-view .filter-wrapper .search-controls .button-container .pull-right { margin-left: auto; margin-right: 0px; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper { width: 57%; float: left; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters { padding: 12px; padding-right: 4px; margin-left: 68%; display: flex; flex-direction: row; font-size: 0.85rem; color: #676b69; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters input[type='checkbox'] { display: none; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters input[type='checkbox'] + label { background-color: #ffffff; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters input[type='checkbox']:checked + label { color: #ffffff; background-color: #1f7bc1; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters label { padding: 4px; min-width: 9.5em; height: 26px; text-align: center; cursor: pointer; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters label.active { color: #ffffff; background-color: #1f7bc1; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters label:first-of-type { margin-left: 3px; border: 1px solid #1a68a8; border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }

.view.sys-admin-institutions-view .filter-wrapper .users-status-wrapper .users-status-filters label:last-of-type { border: 1px solid #1a68a8; border-left: none; border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }

.view.sys-admin-institutions-view .search-results { margin-left: 24px; margin-right: 24px; }

.view.sys-admin-institutions-view .search-results-header button { color: #ffffff; }

.view.sys-admin-institutions-view .search-results-header .sort-button { border: none; background: none; }

.view.sys-admin-institutions-view .search-results-header .sort-row { max-height: 40px; }

.view.sys-admin-institutions-view .search-results-header .sort-row, .view.sys-admin-institutions-view .search-results-header .filter-row { display: flex; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-institution-id, .view.sys-admin-institutions-view .search-results-header .filter-row .col-institution-id { width: 10%; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-institution-name, .view.sys-admin-institutions-view .search-results-header .filter-row .col-institution-name { width: 30%; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-institution-type, .view.sys-admin-institutions-view .search-results-header .filter-row .col-institution-type { width: 12%; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-default-class-enrollment, .view.sys-admin-institutions-view .search-results-header .filter-row .col-default-class-enrollment { width: 12%; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-parent-grading-rubrics, .view.sys-admin-institutions-view .search-results-header .filter-row .col-parent-grading-rubrics { width: 12%; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-parent-view, .view.sys-admin-institutions-view .search-results-header .filter-row .col-parent-view { width: 12%; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-isLti-institution, .view.sys-admin-institutions-view .search-results-header .filter-row .col-isLti-institution { width: 12%; }

.view.sys-admin-institutions-view .search-results-header .sort-row { padding: 6px 10px 6px 10px; color: #ffffff; margin: 0; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-size: 0.9375rem; background-color: #8e8e8e; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-code { margin-left: 10px; }

.view.sys-admin-institutions-view .search-results-header .sort-row .col-owner { margin-left: 10px; }

.view.sys-admin-institutions-view .search-results-header .filter-row { padding-top: 6px; padding-bottom: 6px; background-color: white; }

.view.sys-admin-institutions-view .search-results-header .filter-row * { box-sizing: border-box; }

.view.sys-admin-institutions-view .search-results-header .filter-row input[type='text'] { margin: 0; }

.view.sys-admin-institutions-view .search-results-header .filter-row select { width: 100%; height: 100%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .col-institution-id { width: 10%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .col-institution-name { width: 25%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .col-institution-type { width: 15%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .col-default-class-enrollment { width: 10%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .col-parent-grading-rubrics { width: 10%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .col-parent-view { width: 10%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .col-isLti-institution { width: calc(10% + 8px); }

.view.sys-admin-institutions-view .search-results-header .filter-row input { width: 100%; }

.view.sys-admin-institutions-view .search-results-header .filter-row select { text-transform: none; width: 100%; font-size: 1.0625rem; }

.view.sys-admin-institutions-view .search-results-header .filter-row .searchable-combo { position: relative; z-index: 999; overflow: visible; height: 0px; color: black; font-family: sans-serif; font-size: 100%; }

.view.sys-admin-institutions-view .search-results-header .filter-row .searchable-combo ul { border: 1px #bfbfbf solid; padding: 4px; max-height: 200px; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35); border-radius: 4px; overflow: scroll; }

.view.sys-admin-institutions-view .search-results-header .filter-row .searchable-combo ul li { padding: 4px; }

.view.sys-admin-institutions-view .search-results-header .filter-row .searchable-combo ul li:hover { background-color: lightgray; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }

.view.sys-admin-institutions-view .scrollable { box-sizing: border-box; height: calc(100vh - 332px); }

.view.sys-admin-institutions-view .scrollable table { border-collapse: collapse; width: 100%; }

.view.sys-admin-institutions-view .scrollable table tr:nth-child(even) { background-color: white; }

.view.sys-admin-institutions-view .scrollable table tr:nth-child(odd) { background-color: #f1f1f1; }

.view.sys-admin-institutions-view .scrollable table tr { width: 100%; }

.view.sys-admin-institutions-view .scrollable table tr td.td-institution-id { width: 10%; }

.view.sys-admin-institutions-view .scrollable table tr td.td-institution-name { width: 25%; }

.view.sys-admin-institutions-view .scrollable table tr td.td-institution-type { width: 15%; }

.view.sys-admin-institutions-view .scrollable table tr td.td-default-class-enrollment { width: 10%; }

.view.sys-admin-institutions-view .scrollable table tr td.td-parent-grading-rubrics { width: 10%; }

.view.sys-admin-institutions-view .scrollable table tr td.td-parent-view { width: 10%; }

.view.sys-admin-institutions-view .scrollable table tr td.td-isLti-institution { width: 10%; }

.view.sys-admin-institutions-view .scrollable table tr td { padding: 4px 5px; }

.view.sys-admin-institutions-view .scrollable table tr td i { color: black; }

/* END: views/institutions/_sys-admin-institutions.scss */
/* ========================================================================= */
.view.add-institution-view { background-color: #f5f5f5; }

.view.add-institution-view .action-message.failure-message { border: 1px solid #d9534f; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-institution-view .action-message.success-message { border: 1px solid #5cb85c; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-institution-view .add-institution-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-institution-view .add-institution-view h1 { color: #000000; padding: 0; }

.view.add-institution-view .add-institution-view label { font-weight: 400; }

.view.add-institution-view .add-institution-view .input-box { margin: 12px 0; }

.view.add-institution-view .add-institution-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-institution-view .add-institution-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-institution-view .add-institution-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-institution-view .add-institution-view .input-box.half { float: left; width: 50%; }

.view.add-institution-view .add-institution-view .address { margin-top: 2px; margin-bottom: 2px; }

.view.add-institution-view .add-institution-view #address-line-1.invalid-address-item, .view.add-institution-view .add-institution-view #address-line-2.invalid-address-item, .view.add-institution-view .add-institution-view #address-city.invalid-address-item, .view.add-institution-view .add-institution-view #address-state.invalid-address-item, .view.add-institution-view .add-institution-view #address-zip.invalid-address-item, .view.add-institution-view .add-institution-view #address-country.invalid-address-item { border: 1px solid red; }

.view.add-institution-view .add-institution-view #address-line-1.invalid-address-item::-moz-placeholder, .view.add-institution-view .add-institution-view #address-line-2.invalid-address-item::-moz-placeholder, .view.add-institution-view .add-institution-view #address-city.invalid-address-item::-moz-placeholder, .view.add-institution-view .add-institution-view #address-state.invalid-address-item::-moz-placeholder, .view.add-institution-view .add-institution-view #address-zip.invalid-address-item::-moz-placeholder, .view.add-institution-view .add-institution-view #address-country.invalid-address-item::-moz-placeholder { color: rgba(255, 0, 0, 0.25); }

.view.add-institution-view .add-institution-view #address-line-1.invalid-address-item::placeholder, .view.add-institution-view .add-institution-view #address-line-2.invalid-address-item::placeholder, .view.add-institution-view .add-institution-view #address-city.invalid-address-item::placeholder, .view.add-institution-view .add-institution-view #address-state.invalid-address-item::placeholder, .view.add-institution-view .add-institution-view #address-zip.invalid-address-item::placeholder, .view.add-institution-view .add-institution-view #address-country.invalid-address-item::placeholder { color: rgba(255, 0, 0, 0.25); }

.institution-details-view-conatiner { padding: 15px 15px 0; /* The container */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.institution-details-view-conatiner .user-details-list-container { border-radius: 10px; margin-bottom: 20px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list { box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2); list-style-type: none; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .user-details-header { background-color: #d3e5f3; margin-bottom: 0; margin-top: 0; padding: 5px 10px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list #institution-name { background-color: #d3e5f3; border: 1px solid rgba(99, 130, 155, 0.2); width: 100%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .institution-active-state { margin-top: 0; height: 0; top: -3px; left: -60px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .address { margin-top: 2px; margin-bottom: 2px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-1.invalid-address-item, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-2.invalid-address-item, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-city.invalid-address-item, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-state.invalid-address-item, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-zip.invalid-address-item, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-country.invalid-address-item { border: 1px solid red; }

.institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-1.invalid-address-item::-moz-placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-2.invalid-address-item::-moz-placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-city.invalid-address-item::-moz-placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-state.invalid-address-item::-moz-placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-zip.invalid-address-item::-moz-placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-country.invalid-address-item::-moz-placeholder { color: rgba(255, 0, 0, 0.25); }

.institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-1.invalid-address-item::placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-2.invalid-address-item::placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-city.invalid-address-item::placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-state.invalid-address-item::placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-zip.invalid-address-item::placeholder, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-country.invalid-address-item::placeholder { color: rgba(255, 0, 0, 0.25); }

@media only screen and (max-width: 600px) { .institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-1, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-2 { width: 100%; }
  .institution-details-view-conatiner .user-details-list-container .user-details-list #address-city { width: 50%; }
  .institution-details-view-conatiner .user-details-list-container .user-details-list #address-zip { width: 34.8%; }
  .institution-details-view-conatiner .user-details-list-container .user-details-list #address-country { width: 100%; } }

@media only screen and (min-width: 600px) { .institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-1, .institution-details-view-conatiner .user-details-list-container .user-details-list #address-line-2 { width: 500px; }
  .institution-details-view-conatiner .user-details-list-container .user-details-list #address-city { width: 263px; }
  .institution-details-view-conatiner .user-details-list-container .user-details-list #address-zip { width: 165px; }
  .institution-details-view-conatiner .user-details-list-container .user-details-list #address-country { width: 500px; } }

.institution-details-view-conatiner .user-details-list-container .user-details-list #address-state { width: 50px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li { background: #f5f5f5; padding: 2px 10px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .record-label { display: inline-block; width: 15%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .record-value { display: inline-block; width: 82%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .record-value input { width: 40%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .edit-button { cursor: pointer; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li:nth-child(odd) { background: #ffffff; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .expandable-item { cursor: pointer; display: flex; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .expand-icon-wrapper { margin-left: auto; margin-right: 0; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .inner-list-conatiner { border: 2px dotted #e6e9fb; border-radius: 10px; padding: 10px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .user-details-inner-list { list-style-type: none; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .user-details-inner-list .margin-right { margin-right: 15%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list table { border-collapse: collapse; width: 100%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list th { background-color: #d3e5f3; }

.institution-details-view-conatiner .user-details-list-container .user-details-list tr:nth-child(odd) { background: #f5f5f5; }

.institution-details-view-conatiner .user-details-list-container .user-details-list tr:nth-child(even) { background-color: #ffffff; }

.institution-details-view-conatiner .buttons-container { display: flex; height: 25px; margin-bottom: 20px; }

.institution-details-view-conatiner .buttons-container .right-margin { margin-right: 10px; }

.institution-details-view-conatiner .toggle-switch-container { display: flex; margin-left: 10px; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.institution-details-view-conatiner .toggle-switch-container .switch-label { margin-right: 5px; }

.institution-details-view-conatiner .toggle-switch-container .switch { display: inline-block; position: relative; }

.institution-details-view-conatiner .toggle-switch-container .switch input { display: none; }

.institution-details-view-conatiner .toggle-switch-container .slider-off { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.institution-details-view-conatiner .toggle-switch-container .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.institution-details-view-conatiner .toggle-switch-container .slider-on { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.institution-details-view-conatiner .toggle-switch-container .on { display: none; }

.institution-details-view-conatiner .toggle-switch-container .on, .institution-details-view-conatiner .toggle-switch-container .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; text-transform: uppercase; top: 50%; }

.institution-details-view-conatiner .toggle-switch-container .on { transform: translate(-50%, -50%); }

.institution-details-view-conatiner .toggle-switch-container .off { transform: translate(-50%, -50%); }

.institution-details-view-conatiner .toggle-switch-container input:checked + .slider .on { display: block; }

.institution-details-view-conatiner .toggle-switch-container .slider.round { border-radius: 34px; }

.institution-details-view-conatiner .toggle-switch-container .slider.round::before { border-radius: 50%; }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch { height: 20px; width: 90px; }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch input:checked + .slider-on::before { transform: translateX(70px); }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch .slider-on { background-color: #64be34; }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch .slider-off { background-color: #ed2024; }

.institution-details-view-conatiner .state-check-container { cursor: pointer; display: inline-block; font-size: 1rem; margin-bottom: 12px; padding-left: 35px; position: relative; top: 5px; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100px; }

.institution-details-view-conatiner .state-check-container input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.institution-details-view-conatiner .checkmark { background-color: #eeeeee; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.institution-details-view-conatiner .state-check-container:hover input ~ .checkmark { background-color: #cccccc; }

.institution-details-view-conatiner .state-check-container input:checked ~ .checkmark { background-color: #325db1; }

.institution-details-view-conatiner .checkmark::after { content: ''; display: none; position: absolute; }

.institution-details-view-conatiner .state-check-container input:checked ~ .checkmark::after { display: block; }

.institution-details-view-conatiner .state-check-container .checkmark::after { border: solid white; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/sign-in/_sign-in.scss */
.view.institution-selector-view { overflow: hidden; }

.view.institution-selector-view .header { background-color: #ffffff; padding: 10px; }

.institution-selector-view { background-image: url("./common/assets/images/loginBackgroundTile.png"); text-align: center; }

.institution-selector-view header { grid-area: header; -ms-grid-column-span: 3; grid-row: 1; }

.institution-selector-view header .logo-container__header { background-color: #ffffff; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.35); display: flex; flex-direction: row; justify-content: center; padding-bottom: 25px; padding-top: 25px; }

.institution-selector-view header .logo-container__header img.edmentum-logo { height: auto; }

.institution-selector-view .calvert-card { margin: -90px auto; padding: 50px 25px 25px; text-align: center; width: 304px; }

.institution-selector-view .calvert-card .svg-container { margin: 0 auto 25px; width: 300px; }

.institution-selector-view hr { margin: 3px 0; }

.institution-selector-view input { background: #ffffff; border: 1px solid #f8f9fa; border-left: 0; border-radius: 6px; box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.15); box-sizing: border-box; color: #212529; font-family: inherit; font-size: 18pt; height: 50px; left: 0; line-height: 1.45em; outline: none; padding-bottom: 0.3em; padding-left: 0.2em; padding-top: 0.3em; position: relative; transition: 0.18s ease-out; width: 95%; }

.institution-selector-view input:hover { box-shadow: inset 1px 2px 8px rgba(0, 0, 0, 0.25); }

.institution-selector-view input:focus { border: 1px solid #b8b6b6; border-left: 0; box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.25); color: #4b515d; }

.institution-selector-view .institution-selector-card { background: #ffffff; border-radius: 6px; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.35); margin: 0 auto; margin-top: 40px; max-width: 500px; }

.institution-selector-view .institution-selector-card .list-card ul { height: 200px; overflow: auto; }

.institution-selector-view .institution-selector-card .list-card ul li { border-bottom: 1px solid rgba(0, 0, 0, 0.05); cursor: pointer; list-style: none; padding: 5px 20px; text-align: left; }

.institution-selector-view .institution-selector-card .list-card ul li:hover { background: #f3f3f3; }

.institution-selector-view .edmentum-color-bar { display: flex; flex-direction: row; }

.institution-selector-view .edmentum-color-bar .stripes { display: flex; flex-direction: row; justify-content: left; width: 100%; }

.institution-selector-view .edmentum-color-bar .stripes div { float: left; height: 9px; }

.institution-selector-view .edmentum-color-bar .stripes .first-stripe { background-color: #b064a7; flex-grow: 4; }

.institution-selector-view .edmentum-color-bar .stripes .second-stripe { background-color: #bad737; width: 90px; }

.institution-selector-view .edmentum-color-bar .stripes .third-stripe { background-color: #60ba61; width: 90px; }

.institution-selector-view .edmentum-color-bar .stripes .fourth-stripe { background-color: #d9df5e; width: 90px; }

.institution-selector-view .edmentum-color-bar .stripes .fifth-stripe { background-color: #fadf23; width: 55px; }

.institution-selector-view .edmentum-color-bar .stripes .sixth-stripe { background-color: #ea6439; width: 135px; }

.institution-selector-view .edmentum-color-bar .stripes .seventh-stripe { background-color: #f2a42c; width: 62px; }

.institution-selector-view .edmentum-color-bar .stripes .eighth-stripe { background-color: #e5006e; width: 82px; }

.institution-selector-view .edmentum-color-bar .stripes .ninth-stripe { background-color: #3299d8; flex-grow: 4; }

/* END: views/sign-in/_sign-in.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/institutions/_sys-admin-institutions.scss */
.view.sys-admin-roles-view { height: 100%; overflow: hidden; }

.view.sys-admin-roles-view .filter-wrapper { width: 100%; height: 55px; }

.view.sys-admin-roles-view .filter-wrapper .search-controls .button-container { display: flex; height: unset; padding: 10px 24px 10px 24px; }

.view.sys-admin-roles-view .filter-wrapper .search-controls .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.view.sys-admin-roles-view .filter-wrapper .search-controls .button-container .pull-right { margin-left: auto; margin-right: 0px; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper { width: 57%; float: left; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters { padding: 12px; padding-right: 4px; margin-left: 68%; display: flex; flex-direction: row; font-size: 0.85rem; color: #676b69; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters input[type='checkbox'] { display: none; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters input[type='checkbox'] + label { background-color: #ffffff; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters input[type='checkbox']:checked + label { color: #ffffff; background-color: #1f7bc1; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters label { padding: 4px; min-width: 9.5em; height: 26px; text-align: center; cursor: pointer; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters label.active { color: #ffffff; background-color: #1f7bc1; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters label:first-of-type { margin-left: 3px; border: 1px solid #1a68a8; border-top-left-radius: 0.2rem; border-bottom-left-radius: 0.2rem; }

.view.sys-admin-roles-view .filter-wrapper .users-status-wrapper .users-status-filters label:last-of-type { border: 1px solid #1a68a8; border-left: none; border-top-right-radius: 0.2rem; border-bottom-right-radius: 0.2rem; }

.view.sys-admin-roles-view .search-results { margin-left: 24px; margin-right: 24px; margin-top: 24px; }

.view.sys-admin-roles-view .search-results-header button { color: #ffffff; }

.view.sys-admin-roles-view .search-results-header .sort-button { border: none; background: none; }

.view.sys-admin-roles-view .search-results-header .sort-row { max-height: 40px; }

.view.sys-admin-roles-view .search-results-header .sort-row, .view.sys-admin-roles-view .search-results-header .filter-row { display: flex; }

.view.sys-admin-roles-view .search-results-header .sort-row .col-institution-id, .view.sys-admin-roles-view .search-results-header .filter-row .col-institution-id { width: 10%; }

.view.sys-admin-roles-view .search-results-header .sort-row .col-institution-name, .view.sys-admin-roles-view .search-results-header .filter-row .col-institution-name { width: 30%; }

.view.sys-admin-roles-view .search-results-header .sort-row .col-institution-type, .view.sys-admin-roles-view .search-results-header .filter-row .col-institution-type { width: 30%; }

.view.sys-admin-roles-view .search-results-header .sort-row .col-default-class-enrollment, .view.sys-admin-roles-view .search-results-header .filter-row .col-default-class-enrollment { width: 30%; }

.view.sys-admin-roles-view .search-results-header .sort-row { padding: 6px 10px 6px 10px; color: #ffffff; margin: 0; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-size: 0.9375rem; background-color: #8e8e8e; }

.view.sys-admin-roles-view .search-results-header .sort-row .col-code { margin-left: 10px; }

.view.sys-admin-roles-view .search-results-header .sort-row .col-owner { margin-left: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row { padding-top: 6px; padding-bottom: 6px; background-color: white; }

.view.sys-admin-roles-view .search-results-header .filter-row .col-institution-id { width: calc(10% - 2px); margin-right: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row .col-institution-name { width: calc(30% - 12px); margin-right: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row .col-institution-type { width: calc(12% - 10px); margin-right: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row .col-default-class-enrollment { width: calc(12% - 10px); margin-right: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row .col-parent-grading-rubrics { width: calc(12% - 10px); margin-right: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row .col-parent-view { width: calc(12% - 10px); margin-right: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row .col-isLti-institution { width: calc(12% - 10px); margin-right: 10px; }

.view.sys-admin-roles-view .search-results-header .filter-row input { width: 100%; }

.view.sys-admin-roles-view .search-results-header .filter-row select { text-transform: none; width: 100%; font-size: 1.0625rem; }

.view.sys-admin-roles-view .search-results-header .filter-row .searchable-combo { position: relative; z-index: 999; overflow: visible; height: 0px; color: black; font-family: sans-serif; font-size: 100%; }

.view.sys-admin-roles-view .search-results-header .filter-row .searchable-combo ul { border: 1px #bfbfbf solid; padding: 4px; max-height: 200px; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.35); border-radius: 4px; overflow: scroll; }

.view.sys-admin-roles-view .search-results-header .filter-row .searchable-combo ul li { padding: 4px; }

.view.sys-admin-roles-view .search-results-header .filter-row .searchable-combo ul li:hover { background-color: lightgray; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: pointer; }

.view.sys-admin-roles-view .scrollable { box-sizing: border-box; height: calc(100vh - 262px); }

.view.sys-admin-roles-view .scrollable table { border-collapse: collapse; width: 100%; }

.view.sys-admin-roles-view .scrollable table tr:nth-child(even) { background-color: white; }

.view.sys-admin-roles-view .scrollable table tr:nth-child(odd) { background-color: #f1f1f1; }

.view.sys-admin-roles-view .scrollable table tr { width: 100%; }

.view.sys-admin-roles-view .scrollable table tr td.td-institution-id { width: 10%; }

.view.sys-admin-roles-view .scrollable table tr td.td-institution-name { width: 30%; }

.view.sys-admin-roles-view .scrollable table tr td.td-institution-type { width: 30%; word-break: break-all; }

.view.sys-admin-roles-view .scrollable table tr td.td-default-class-enrollment { width: 12%; padding: 0 10px 0 15px; }

.view.sys-admin-roles-view .scrollable table tr td.td-parent-grading-rubrics { width: 12%; padding: 0 10px 0 15px; }

.view.sys-admin-roles-view .scrollable table tr td.td-parent-view { width: 12%; padding: 0 10px 0 15px; }

.view.sys-admin-roles-view .scrollable table tr td.td-isLti-institution { width: 12%; padding: 0 10px 0 15px; }

.view.sys-admin-roles-view .scrollable table tr td { padding-top: 4px; padding-bottom: 4px; }

.view.sys-admin-roles-view .scrollable table tr td i { color: black; }

/* END: views/institutions/_sys-admin-institutions.scss */
/* ========================================================================= */
.institution-details-view-conatiner { padding: 15px 15px 0; /* The container */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.institution-details-view-conatiner .user-details-list-container { border-radius: 10px; margin-bottom: 20px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list { box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2); list-style-type: none; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .user-details-header { background-color: #d3e5f3; margin-bottom: 0; margin-top: 0; padding: 5px 10px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li { background: #f5f5f5; padding: 2px 10px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .record-label { display: inline-block; width: 15%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .record-value { display: inline-block; width: 82%; word-break: break-all; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .record-value input { width: 40%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li .edit-button { cursor: pointer; }

.institution-details-view-conatiner .user-details-list-container .user-details-list li:nth-child(odd) { background: #ffffff; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .expandable-item { cursor: pointer; display: flex; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .expand-icon-wrapper { margin-left: auto; margin-right: 0; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .inner-list-conatiner { border: 2px dotted #e6e9fb; border-radius: 10px; padding: 10px; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .user-details-inner-list { list-style-type: none; }

.institution-details-view-conatiner .user-details-list-container .user-details-list .user-details-inner-list .margin-right { margin-right: 15%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list table { border-collapse: collapse; width: 100%; }

.institution-details-view-conatiner .user-details-list-container .user-details-list th { background-color: #d3e5f3; }

.institution-details-view-conatiner .user-details-list-container .user-details-list tr:nth-child(odd) { background: #f5f5f5; }

.institution-details-view-conatiner .user-details-list-container .user-details-list tr:nth-child(even) { background-color: #ffffff; }

.institution-details-view-conatiner .buttons-container { display: flex; height: 25px; margin-bottom: 20px; }

.institution-details-view-conatiner .buttons-container .right-margin { margin-right: 10px; }

.institution-details-view-conatiner .toggle-switch-container { display: flex; margin-left: 10px; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.institution-details-view-conatiner .toggle-switch-container .switch-label { margin-right: 5px; }

.institution-details-view-conatiner .toggle-switch-container .switch { display: inline-block; position: relative; }

.institution-details-view-conatiner .toggle-switch-container .switch input { display: none; }

.institution-details-view-conatiner .toggle-switch-container .slider-off { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.institution-details-view-conatiner .toggle-switch-container .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.institution-details-view-conatiner .toggle-switch-container .slider-on { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.institution-details-view-conatiner .toggle-switch-container .on { display: none; }

.institution-details-view-conatiner .toggle-switch-container .on, .institution-details-view-conatiner .toggle-switch-container .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; text-transform: uppercase; top: 50%; }

.institution-details-view-conatiner .toggle-switch-container .on { transform: translate(-50%, -50%); }

.institution-details-view-conatiner .toggle-switch-container .off { transform: translate(-50%, -50%); }

.institution-details-view-conatiner .toggle-switch-container input:checked + .slider .on { display: block; }

.institution-details-view-conatiner .toggle-switch-container .slider.round { border-radius: 34px; }

.institution-details-view-conatiner .toggle-switch-container .slider.round::before { border-radius: 50%; }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch { height: 20px; width: 90px; }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch input:checked + .slider-on::before { transform: translateX(70px); }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch .slider-on { background-color: #64be34; }

.institution-details-view-conatiner .toggle-switch-container .switch.product-state-switch .slider-off { background-color: #ed2024; }

.institution-details-view-conatiner .state-check-container { cursor: pointer; display: inline-block; font-size: 1rem; margin-bottom: 12px; padding-left: 35px; position: relative; top: 5px; -webkit-user-select: none; -moz-user-select: none; user-select: none; width: 100px; }

.institution-details-view-conatiner .state-check-container input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.institution-details-view-conatiner .checkmark { background-color: #eeeeee; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.institution-details-view-conatiner .state-check-container:hover input ~ .checkmark { background-color: #cccccc; }

.institution-details-view-conatiner .state-check-container input:checked ~ .checkmark { background-color: #325db1; }

.institution-details-view-conatiner .checkmark::after { content: ''; display: none; position: absolute; }

.institution-details-view-conatiner .state-check-container input:checked ~ .checkmark::after { display: block; }

.institution-details-view-conatiner .state-check-container .checkmark::after { border: solid #ffffff; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/dashboards/_dashboard.scss */
.view.dashboard-view { height: 100%; overflow-x: hidden; }

/* END: views/dashboards/_dashboard.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/dashboards/_parent-dashboard.scss */
.view.dashboard-view.parent-dashboard-view { height: 100%; overflow: hidden; }

/* END: views/dashboards/_parent-dashboard.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/dashboards/_student-dashboard.scss */
.view.dashboard-view.student-dashboard-view { height: 100%; overflow: hidden; }

.student-dashboard-view { border-color: #ff0000; border-style: dotted; border-width: 4px; }

/* END: views/dashboards/_student-dashboard.scss */
/* ========================================================================= */
/* BEGIN: views/schedules/_daily-schedule.scss */
.view.daily-schedule-view { height: 100%; overflow-x: hidden; }

.daily-schedule-view { padding: 40px; }

.daily-schedule-view .daily-schedule-info { display: flex; flex-direction: row; }

.daily-schedule-view .daily-schedule-info .daily-schedule-title { width: 70%; }

.daily-schedule-view header { display: flex; flex-direction: row; justify-content: space-between; }

.daily-schedule-view header .menu-opener { cursor: pointer; height: 35px; padding-top: 14px; width: 35px; }

.daily-schedule-view header .menu-opener > .icon { height: 36px; width: 36px; }

.daily-schedule-view header .menu { font-size: 0.75rem; min-width: 200px; width: 200px; }

.daily-schedule-view header .menu:hover ul.print-options li i { color: #636c72; }

.daily-schedule-view header .menu > ul { list-style-type: none; margin-left: 0; padding: 0; width: 180px; }

.daily-schedule-view header .menu > ul li { list-style-type: none; }

.daily-schedule-view header .menu > ul.print-options { list-style-type: none; }

.daily-schedule-view header .menu > ul.print-options li { cursor: pointer; height: 32px; list-style-type: none; }

.daily-schedule-view header .menu > ul.print-options li:hover { background-color: rgba(0, 128, 0, 0.1); }

.daily-schedule-view header .menu > ul.print-options li span { line-height: 32px; }

.daily-schedule-view header .menu > ul.print-options li i { color: #636c72; }

.daily-schedule-view .daily-schedule-container { width: 100%; }

.daily-schedule-view .daily-schedule-container .days-header-empty { width: 10%; }

.daily-schedule-view .daily-schedule-container .header-container { height: 40px; width: 100%; }

.daily-schedule-view .daily-schedule-container button { background-color: #ffffff; border: 0; cursor: pointer; height: 38px; margin: 0; padding: 0; position: relative; width: 35px; }

.daily-schedule-view .daily-schedule-container button i { color: #2f5bb4; font-size: 1.25rem; font-weight: 600; }

.daily-schedule-view .daily-schedule-container button.nav-left { float: right; margin-left: auto; margin-right: 15px; }

.daily-schedule-view .daily-schedule-container button.nav-right { right: 0; text-align: right; }

.daily-schedule-view .daily-schedule-container .days-header-day { border-bottom: 1px solid #686b69; box-sizing: border-box; color: #686b69; font-family: 'Roboto', sans-serif; font-size: 1.25rem; font-style: normal; font-weight: normal; letter-spacing: 0.0175em; width: 17%; }

.daily-schedule-view .daily-schedule-container .days-header-day.highlighted { background-color: #1f7bc1; color: #ffffff; font-weight: bold; }

.daily-schedule-view .daily-schedule-container .days-header-day.header-with-button { width: 14%; }

.daily-schedule-view .daily-schedule-container .days-header-day.highlighted button { background-color: #1f7bc1; }

.daily-schedule-view .daily-schedule-container .days-header-day.highlighted button i { color: #ffffff; }

.daily-schedule-view .daily-schedule-container .header-to-clazzes { height: 20px; justify-content: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .header-to-clazzes .days-connector { box-sizing: border-box; height: 20px; width: 17%; }

.daily-schedule-view .daily-schedule-container .header-to-clazzes .days-connector.highlighted { background-color: rgba(47, 91, 180, 0.17); border-left: 1px solid #2f5bb4; border-right: 1px solid #2f5bb4; }

.daily-schedule-view .daily-schedule-container .header-to-clazzes .days-connector .inner-triangle { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #1f7bc1; height: 0; left: 1px; position: relative; top: 10px; width: 0; z-index: 100; }

.daily-schedule-view .daily-schedule-container .header-to-clazzes .days-connector .outer-triangle { border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid rgba(0, 0, 0, 0.14); height: 0; position: relative; top: 2px; width: 0; z-index: 99; }

.daily-schedule-view .daily-schedule-container .header-to-clazzes .days-connector .bordered-triangle-down { left: calc(50% - 12px); position: relative; top: -12px; z-index: 99999; }

.daily-schedule-view .daily-schedule-container .days-row { flex-direction: row; height: 10em; justify-content: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row .course-outer-container { height: 10em; vertical-align: top; width: 10%; }

.daily-schedule-view .daily-schedule-container .days-row .course-outer-container .course-name-container { align-items: center; border: 1px solid #dddddd; display: flex; height: 92.5%; overflow: hidden; width: 100%; word-wrap: break-word; }

.daily-schedule-view .daily-schedule-container .days-row .course-outer-container .course-name-container .course-name-label { color: white; text-align: center; transform: rotate(270deg); }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day { box-sizing: border-box; color: #686b69; font-family: 'Roboto', sans-serif; font-size: 1.25rem; font-style: normal; font-weight: normal; height: 8em; justify-content: center; letter-spacing: 0.0175em; vertical-align: top; width: 17%; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day.highlighted { background-color: rgba(47, 91, 180, 0.3); border-left: 1px solid #2f5bb4; border-right: 1px solid #2f5bb4; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container { background-color: #f8f8f8; border: 1px solid #dddddd; border-left: 0; flex-direction: column; height: 92.5%; overflow: hidden; position: relative; word-wrap: break-word; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container.highlighted { background-color: rgba(47, 91, 180, 0); }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container.dimmed { background-color: #eceeef; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .completed-label { background: #3b863e; color: #ffffff; font-family: Roboto; font-size: 0.8rem; font-weight: 700; height: 1.625em; line-height: 1.625em; text-align: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .omitted-label { background: #C2571A; color: #ffffff; font-family: Roboto; font-size: 0.8rem; font-weight: 700; height: 1.625em; line-height: 1.625em; text-align: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .retake-label { background: #f54d62; color: #ffffff; font-family: Roboto; font-size: 0.8rem; font-weight: 700; height: 1.625em; line-height: 1.625em; text-align: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .skipped-label { background: #5e7997; color: #ffffff; font-family: Roboto; font-size: 0.8rem; font-weight: 700; height: 1.625em; line-height: 1.625em; text-align: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .pending-label { background: #008391; color: #ffffff; font-family: Roboto; font-size: 0.8rem; font-weight: 700; height: 1.625em; line-height: 1.625em; text-align: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .lesson-title { font-size: 0.9rem; padding: 10px; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .locked { color: #aaaaaa; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .omitted { color: #000000; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .lesson-milestone-footer { bottom: 0; color: #996699; font-family: Roboto; font-size: 0.7rem; font-weight: normal; padding-left: 5px; position: absolute; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .lesson-milestone-footer svg { height: 14px; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .lesson-footer-container { bottom: 0; color: #737273; font-family: 'Roboto', sans-serif; font-size: 0.8rem; font-weight: normal; position: absolute; right: 5px; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .lesson-footer-container .learn-tab-label.active { color: #306f3f; font-size: 0.8375rem; font-weight: 700; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .lesson-footer-container .use-tab-label.active { color: #77378d; font-size: 0.8375rem; font-weight: 700; }

.daily-schedule-view .daily-schedule-container .days-row .days-row-day .day-Lesson-container .lesson-footer-container .show-tab-label.active { color: #d54f26; font-size: 0.8375rem; font-weight: 700; }

.daily-schedule-view .daily-schedule-container .days-row:last-child { background-color: #ffffff !important; height: 9.25em; }

.daily-schedule-view .daily-schedule-container .days-row:last-child .course-outer-container { height: 9.25em; width: 10%; }

.daily-schedule-view .daily-schedule-container .days-row:last-child .course-outer-container .course-name-container { align-items: center; border: 1px solid #dddddd; height: 100%; overflow: hidden; width: 100%; word-wrap: break-word; }

.daily-schedule-view .daily-schedule-container .days-row:last-child .course-outer-container .course-name-container .course-name-label { color: #ffffff; text-align: center; transform: rotate(270deg); }

.daily-schedule-view .daily-schedule-container .days-row:last-child .days-row-day { height: 7.25em; }

.daily-schedule-view .daily-schedule-container .days-row:last-child .day-Lesson-container { background-color: #f8f8f8; border: 1px solid #dddddd; border-left: 0; display: flex; flex-direction: column; height: 100%; overflow: hidden; word-wrap: break-word; }

.daily-schedule-view .daily-schedule-container .days-row:last-child .day-Lesson-container.highlighted { background-color: rgba(47, 91, 180, 0); }

.daily-schedule-view .daily-schedule-container .days-row:last-child .day-Lesson-container .completed-label { background: #3b863e; color: #ffffff; font-family: Roboto; font-size: 0.8rem; font-weight: 700; height: 1.625em; line-height: 1.625em; text-align: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row:last-child .day-Lesson-container .omitted-label { background: #C2571A; color: #ffffff; font-family: Roboto; font-size: 0.8rem; font-weight: 700; height: 1.625em; line-height: 1.625em; text-align: center; width: 100%; }

.daily-schedule-view .daily-schedule-container .days-row:last-child .day-Lesson-container .lesson-title { font-size: 0.9rem; padding: 10px; }

.daily-schedule-view .daily-schedule-container .days-row:last-child.highlighted { background-color: #ffffff !important; }

.daily-schedule-view .daily-schedule-container .empty-cell { width: 5%; }

@media screen and (min-width: 1281px) { .daily-schedule-view .daily-schedule-container .days-row .course-outer-container .course-name-container .course-name-label, .daily-schedule-view .daily-schedule-container .days-row:last-child .course-outer-container .course-name-container .course-name-label { transform: rotate(270deg) translateY(20%); width: 90%; } }

@media screen and (min-width: 1681px) { .daily-schedule-view .daily-schedule-container .days-row .course-outer-container .course-name-container .course-name-label, .daily-schedule-view .daily-schedule-container .days-row:last-child .course-outer-container .course-name-container .course-name-label { transform: rotate(270deg) translateY(40%); width: 70%; } }

@media screen and (min-width: 1900px) { .daily-schedule-view .daily-schedule-container .days-row .course-outer-container .course-name-container .course-name-label, .daily-schedule-view .daily-schedule-container .days-row:last-child .course-outer-container .course-name-container .course-name-label { transform: rotate(270deg) translateY(60%); width: 40%; } }

/* END: views/schedules/_daily-schedule.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/schedules/_parent-daily-schedule.scss */
.parent-daily-schedule-view .input-attendance-outer-container { float: right; width: 30%; }

.parent-daily-schedule-view .input-attendance-outer-container .input-attendance-inner-container { margin-top: 15px; text-align: center; }

.parent-daily-schedule-view .input-attendance-outer-container .input-attendance-inner-container i { color: #2f5bb4; font-size: 1.2rem; margin-left: 5px; margin-right: 5px; }

.parent-daily-schedule-view .input-attendance-outer-container .input-attendance-inner-container a { color: #2f5bb4; font-size: 1.2rem; }

/* END: views/schedules/_parent-daily-schedule.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/schedules/_student-daily-schedule.scss */
/* END: views/schedules/_student-daily-schedule.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazzes/_clazz.scss */
.clazz-view { height: calc(100% - 40px); overflow-y: hidden; }

/* END: views/clazzes/_clazz.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazzes/_add-clazz.scss */
.add-clazz-view { box-sizing: border-box; font-weight: bold; height: 100%; width: 100%; }

.add-clazz-view h1 { color: #32cd32; margin: 0; }

/* END: views/clazzes/_add-clazz.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazzes/_add-clazz.scss */
/* Extending .view */
.school-admin-add-clazz-view { /* Let's be very specific so that we can use, and override debug styles border-style: none; border-width: 0; */ border-color: #00ff00; border-style: dotted; border-width: 0; background-color: #ffa500; /* TO DO: Clean up and bubble up */ background-color: #f5f5f5; box-sizing: border-box; font-weight: bold; height: 100%; left: 0; overflow: auto; width: 100%; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.school-admin-add-clazz-view .user-selector-selection { display: flex; padding: 10px 0; }

.school-admin-add-clazz-view .user-selector-users ul li { height: 35px; }

.school-admin-add-clazz-view .user-selector-users li { border: 1px solid #e0e0e0; border-bottom-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 0; border-color: rgba(255, 255, 255, 0.1); cursor: pointer; height: 18px; list-style-type: none; padding: 8px; padding-left: 20px; vertical-align: middle; width: inherit; }

.school-admin-add-clazz-view .user-selector-users li.teacher-row-1 { background-color: #f1f1f1; }

.school-admin-add-clazz-view .user-selector-users li.selected { background-color: #115aa6; color: #ffffff; }

.school-admin-add-clazz-view .main-content { float: left; width: 100%; }

.school-admin-add-clazz-view .main-content .admin-header { background-color: #ffffff; border-bottom: solid 1px #8e8e8e; font-family: 'Roboto', sans-serif; font-weight: 300; margin-bottom: 20px; min-height: 40px; position: relative; }

.school-admin-add-clazz-view .main-content .admin-header .header-content { display: inline-block; }

.school-admin-add-clazz-view .main-content .admin-header .header-content .title { display: inline-block; font-size: 1.75rem; font-weight: 700; margin: 20px; }

.school-admin-add-clazz-view .main-content .admin-header .actions { cursor: pointer; display: flex; float: right; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

.school-admin-add-clazz-view .main-content .admin-header .actions .action { color: #115aa6; float: left; margin: 10px; }

.school-admin-add-clazz-view .main-content .admin-header .actions .action.danger { color: red; }

.school-admin-add-clazz-view .main-content .admin-header .actions .action-message { border-radius: 2px; padding: 10px; }

.school-admin-add-clazz-view .main-content .admin-header .actions .action-message.success-message { border: 1px solid #5cb85c; }

.school-admin-add-clazz-view .main-content .admin-header .actions .action-message.failure-message { border: 1px solid #d9534f; }

.school-admin-add-clazz-view .main-content .school-admin-clazz-card-component { background-color: #d3d3d3; margin: 0 20px; }

.school-admin-add-clazz-view .main-content .card-wrapper { display: block; float: left; }

.school-admin-add-clazz-view .main-content .card-wrapper .clazz-lesson-count { clear: both; padding: 10px 20px; width: 280px; }

.school-admin-add-clazz-view .main-content .clazz-form { background-color: #f5f5f5; float: left; padding: 20px; width: 100%; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-name { padding: 10px 20px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-name .name { background-color: #ffffff; font-size: 1rem; font-weight: 500; line-height: 1.5; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-name .course-length { font-size: 1rem; font-weight: 300; line-height: 1.5; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section.half { width: 49%; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper { background-color: #8e8e8e; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-radius: 5px; color: #ffffff; display: flex; font-size: 1rem; font-weight: 700; margin: 0; padding: 10px 20px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper .half-section-title { float: left; padding: unset; width: 50%; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper .user-selector-search { width: 50%; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper .user-selector-search input { float: right; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section.half.left-half { float: left; padding-right: 1%; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section.half.right-half { float: right; padding-left: 1%; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section { margin-bottom: 20px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields { background-color: #ffffff; border: 1px solid #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top: none; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-input { border: 0; width: 100%; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-form-select { padding: 10px 20px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-form-select select { background-color: #f1f1f1; border: 1px solid #e0e0e0; font-size: 1rem; font-weight: 400; height: 32px; padding: 0 8px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-form-select:last-child { border-bottom: none; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .milestones { margin: 0; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .milestones .forced-progression { margin: 0 0 15px 20px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .milestones .forced-progression i { font-weight: 300; }

.school-admin-add-clazz-view .main-content .clazz-form h2 { background-color: #8e8e8e; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-radius: 5px; color: #ffffff; font-size: 1rem; font-weight: 700; margin: 0; padding: 10px 20px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-dates { font-size: 0.875rem; font-weight: 400; padding: 10px 20px; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-dates.teacher-schedule { display: flex; flex-direction: column; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-dates.teacher-schedule .labeled-input:nth-child(1) { padding-bottom: 1rem; }

.school-admin-add-clazz-view .main-content .clazz-form .clazz-dates.teacher-schedule .labeled-input { display: flex; flex-direction: row; justify-content: space-between; width: 18rem; }

.school-admin-add-clazz-view .main-content .clazz-form .read-only-width { width: 11%; }

.school-admin-add-clazz-view .user-selector-component { background-color: #fbfafa; border-left: 1px solid #4483cc; box-sizing: border-box; color: #115aa6; float: right; min-width: 200px; width: 20%; }

.school-admin-add-clazz-view .user-selector-component ul { padding: 0; }

.school-admin-add-clazz-view .user-selector-component li { border-bottom-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 0; border-color: rgba(255, 255, 255, 0.1); list-style-type: none; width: calc(100% - 0); }

.school-admin-add-clazz-view .user-selector-component .user-selector-buttons { background-color: #dae2ec; border-bottom: solid 1px #4483cc; height: 74px; position: relative; }

.school-admin-add-clazz-view .user-selector-component .user-selector-buttons .button-wrapper { display: table; margin: auto; position: relative; top: 50%; transform: translateY(-50%); width: 90%; }

.school-admin-add-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button { background-color: #ffffff; border: 1px solid #115aa6; border-radius: 5px; color: #115aa6; display: block; float: left; font-size: 0.875rem; font-weight: 300; padding: 5px 20px; width: 50%; }

.school-admin-add-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; }

.school-admin-add-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; }

.school-admin-add-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button.active { background-color: #115aa6; color: #ffffff; }

.school-admin-add-clazz-view .user-selector-component .user-selector-search { background-color: #eff0f5; border-bottom: 1px solid #4483cc; color: #bdbdbd; font-size: 0.875rem; font-weight: 400; padding: 10px 30px; }

.school-admin-add-clazz-view .user-selector-component .user-selector-search .clazz-input { background-color: #eff0f5; border: 0; font-size: 0.875rem; width: 80%; }

.school-admin-add-clazz-view .user-selector-component .user-selector-search .clazz-input::-moz-placeholder { color: #bdbdbd; }

.school-admin-add-clazz-view .user-selector-component .user-selector-search .clazz-input::placeholder { color: #bdbdbd; }

.school-admin-add-clazz-view .user-selector-component .user-selector-selection span { border-right: 1px solid #4483cc; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 0.875rem; font-weight: 400; padding: 10px; text-align: center; width: 50%; }

.school-admin-add-clazz-view .user-selector-component .user-selector-selection span:last-child { border-right: none; display: inline-block; width: 48%; }

.school-admin-add-clazz-view .user-selector-component .user-selector-users { border-top: 1px solid #4483cc; max-height: calc(100% - 210px); overflow-x: hidden; overflow-y: auto; }

.school-admin-add-clazz-view .user-selector-component .user-selector-users .selected { background-color: #115aa6; color: #ffffff; }

.school-admin-add-clazz-view .user-selector-component .user-selector-users .user { font-size: 0.875rem; font-weight: 400; padding: 10px 30px; }

.school-admin-add-clazz-view .user-selector-component .selected-user-count { background-color: #eff0f5; clear: both; color: #66ce00; display: block; font-size: 0.875rem; font-weight: 400; padding: 20px; text-align: center; }

.school-admin-add-clazz-view #startDate { background-color: #ffffff; border: 1px solid #d7d7d7; padding: 1px 3px; }

.school-admin-add-clazz-view #endDate { background-color: #ffffff; border: 1px solid #d7d7d7; padding: 1px 3px; }

.school-admin-add-clazz-view .milestones { margin-top: 15px; }

.school-admin-add-clazz-view .milestones .milestone-left { display: inline-block; width: 200px; }

.school-admin-add-clazz-view .milestones .milestone-title { font-style: italic; }

.school-admin-add-clazz-view .milestones ul { margin-top: 8px; }

.school-admin-add-clazz-view .milestones ul li { list-style-type: disc; margin-left: 30px; padding-top: 5px; }

.school-admin-add-clazz-view .milestones ul li .milestone-left { display: inline-block; width: 170px; }

.school-admin-add-clazz-view .milestones .forced-progression { margin-top: 15px; }

.school-admin-add-clazz-view .toggle-switch { align-items: center; display: flex; flex-direction: row; height: 100%; margin-right: 10px; width: 100%; }

.school-admin-add-clazz-view .switch-title { padding: 0.75em 5px 0.75em 0; }

.school-admin-add-clazz-view .switch-container { padding: 0.25em 0 0 0.5em; }

.school-admin-add-clazz-view .switch { display: inline-block; height: 20px; position: relative; width: 70px; }

.school-admin-add-clazz-view .switch input { display: none; }

.school-admin-add-clazz-view .slider-off { background-color: #ed2024; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.school-admin-add-clazz-view .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.school-admin-add-clazz-view .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.school-admin-add-clazz-view input:checked + .slider-on::before { transform: translateX(50px); }

.school-admin-add-clazz-view .on { display: none; }

.school-admin-add-clazz-view .on, .school-admin-add-clazz-view .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }

.school-admin-add-clazz-view input:checked + .slider .on { display: block; }

.school-admin-add-clazz-view .slider.round { border-radius: 34px; }

.school-admin-add-clazz-view .slider.round::before { border-radius: 50%; }

/* END: views/clazzes/_add-clazz.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazzes/_bulk-manage-clazzes.scss */
.view.bulk-manage-clazzes-view { overflow: hidden; }

.bulk-manage-clazzes-view { border-color: #ff0000; border-style: dotted; border-width: 4px; background-color: #115aa6; }

.bulk-manage-clazzes-view #content-1 { border: 1px solid #ff0000; height: 100px; width: 100px; }

/* END: views/clazzes/_bulk-manage-clazzes.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazzes/_school-admin-bulk-manage-clazzes.scss */
.view.bulk-manage-clazzes-view.school-admin-bulk-manage-clazzes-view { overflow: hidden; }

.overlay { background-color: #979797; height: 100%; opacity: 0.5; position: fixed; width: 100%; z-index: 10; }

.header-content { padding: 10px 20px 10px 0 !important; }

.navigate-to-courses { margin-right: 10px; }

.left-side { margin-left: 20px; }

.school-admin-bulk-manage-clazzes-view .header { background-color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 1.75rem; font-weight: 500; min-height: 40px; padding: 10px; }

.school-admin-bulk-manage-clazzes-view .container { background: #f6f6f6; height: 100%; min-height: -webkit-fit-content; min-height: -moz-fit-content; min-height: fit-content; width: 100%; }

.school-admin-bulk-manage-clazzes-view #startDate { background-color: #ffffff; border: 2px solid #d7d7d7; padding: 1px 0 1px 3px; width: 115px; }

.school-admin-bulk-manage-clazzes-view #endDate { background-color: #ffffff; border: 2px solid #d7d7d7; padding: 1px 0 1px 3px; width: 115px; }

.school-admin-bulk-manage-clazzes-view #calendar-icon { background: #d7d7d7; padding: 4px; padding-bottom: 5px; }

.school-admin-bulk-manage-clazzes-view .schedule-filter-conainer { padding: 20px; width: 95%; }

.school-admin-bulk-manage-clazzes-view .schedule-filter-conainer .schedule-filter-heading { background: #979797; color: #ffffff; margin-bottom: 2px; margin-left: 50px; text-align: center; }

.school-admin-bulk-manage-clazzes-view .schedule-filter-conainer .schedule-filter-course-dates { border: 2px solid #d3d3d3; display: flex; flex-direction: column; margin-left: 50px; padding: 10px; }

.school-admin-bulk-manage-clazzes-view .schedule-filter-conainer .schedule-filter-course-dates .labeled-input:nth-child(1) { padding-bottom: 1rem; }

.school-admin-bulk-manage-clazzes-view .schedule-filter-conainer .schedule-filter-course-dates .labeled-input { display: flex; flex-direction: row; justify-content: space-between; width: 20rem; }

.school-admin-bulk-manage-clazzes-view .schedule-filter-conainer .schedule-filter-course-dates .date-disabled { pointer-events: none; }

.school-admin-bulk-manage-clazzes-view .schedule-filter-conainer .schedule-filter-course-dates .date-div-disabled { cursor: not-allowed; }

.school-admin-bulk-manage-clazzes-view .panes-container { display: flex; height: 80%; justify-content: space-evenly; padding: 20px; width: 95%; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane { background: #ffffff; height: 100%; margin-left: 50px; position: relative; width: 30%; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-header { align-items: center; background: #979797; color: #ffffff; display: flex; font-weight: bold; height: 25px; justify-content: center; text-transform: uppercase; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-content { background: #ffffff; border: 2px solid #bab9b9; cursor: pointer; display: flex; flex-direction: column; height: calc(100% - 50px); line-height: 25px; overflow-y: auto; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-content .class-title { margin: 5px; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-content .selected { background: #fbc02d; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-content .pane-content-title { background: #2f5bb4; color: #ffffff; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-content .small-bars { font-size: small; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-content .available-list { display: flex; flex: auto; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-content .full-width { width: 100%; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-footer { align-items: center; background: #979797; color: #ffffff; display: flex; font-weight: bold; height: 25px; /* stylelint-disable */ width: -webkit-fill-available; /* stylelint-enable */ }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-footer .filter-title { padding-left: 5px; width: 50%; }

.school-admin-bulk-manage-clazzes-view .panes-container .pane-footer .filter-text { height: 15px; max-width: 55%; }

.school-admin-bulk-manage-clazzes-view .panes-container .drop-target { background-color: #fbc02d !important; box-shadow: none; }

.school-admin-bulk-manage-clazzes-view .panes-container .margin-left { margin-left: 7px; }

.school-admin-bulk-manage-clazzes-view .panes-container .margin-bottom { margin-bottom: 10px; }

.school-admin-bulk-manage-clazzes-view .font-weight { font-weight: bold; }

.school-admin-bulk-manage-clazzes-view .right-side { margin-right: 3%; }

.school-admin-bulk-manage-clazzes-view .disable { background-color: #cccaca; border-color: #cccaca; }

/* END: views/clazzes/_school-admin-bulk-manage-clazzes.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazzes/_add-clazz.scss */
/* Extending .view */
.teacher-clazz-view { /* Let's be very specific so that we can use, and override debug styles border-style: none; border-width: 0; */ border-color: #00ff00; border-style: dotted; border-width: 0; background-color: #ffa500; /* TO DO: Clean up and bubble up */ background-color: #f5f5f5; box-sizing: border-box; font-weight: bold; height: 100%; left: 0; overflow: auto; width: 100%; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.teacher-clazz-view .user-selector-selection { display: flex; padding: 10px 0; }

.teacher-clazz-view .user-selector-users ul li { height: 35px; }

.teacher-clazz-view .user-selector-users li { border: 1px solid #e0e0e0; border-bottom-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 0; border-color: rgba(255, 255, 255, 0.1); cursor: pointer; height: 18px; list-style-type: none; padding: 8px; padding-left: 20px; vertical-align: middle; width: inherit; }

.teacher-clazz-view .user-selector-users li.teacher-row-1 { background-color: #f1f1f1; }

.teacher-clazz-view .user-selector-users li.selected { background-color: #115aa6; color: #ffffff; }

.teacher-clazz-view .main-content { float: left; width: 100%; }

.teacher-clazz-view .main-content .admin-header { background-color: #ffffff; border-bottom: solid 1px #8e8e8e; font-family: 'Roboto', sans-serif; font-weight: 300; margin-bottom: 20px; min-height: 40px; position: relative; }

.teacher-clazz-view .main-content .admin-header .header-content { display: inline-block; }

.teacher-clazz-view .main-content .admin-header .header-content .title { display: inline-block; font-size: 1.75rem; font-weight: 700; margin: 20px; }

.teacher-clazz-view .main-content .admin-header .actions { cursor: pointer; display: flex; float: right; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

.teacher-clazz-view .main-content .admin-header .actions .action { color: #115aa6; float: left; margin: 10px; }

.teacher-clazz-view .main-content .admin-header .actions .action.danger { color: red; }

.teacher-clazz-view .main-content .admin-header .actions .action-message { border-radius: 2px; padding: 10px; }

.teacher-clazz-view .main-content .admin-header .actions .action-message.success-message { border: 1px solid #5cb85c; }

.teacher-clazz-view .main-content .admin-header .actions .action-message.failure-message { border: 1px solid #d9534f; }

.teacher-clazz-view .main-content .school-admin-clazz-card-component { background-color: #d3d3d3; margin: 0 20px; }

.teacher-clazz-view .main-content .card-wrapper { display: block; float: left; }

.teacher-clazz-view .main-content .card-wrapper .clazz-lesson-count { clear: both; padding: 10px 20px; width: 280px; }

.teacher-clazz-view .main-content .clazz-form { background-color: #f5f5f5; float: left; padding: 20px; width: 100%; }

.teacher-clazz-view .main-content .clazz-form .clazz-name { padding: 10px 20px; }

.teacher-clazz-view .main-content .clazz-form .clazz-name .name { background-color: #ffffff; font-size: 1rem; font-weight: 500; line-height: 1.5; }

.teacher-clazz-view .main-content .clazz-form .clazz-name .course-length { font-size: 1rem; font-weight: 300; line-height: 1.5; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section.half { width: 49%; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper { background-color: #8e8e8e; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-radius: 5px; color: #ffffff; display: flex; font-size: 1rem; font-weight: 700; margin: 0; padding: 10px 20px; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper .half-section-title { float: left; padding: unset; width: 50%; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper .user-selector-search { width: 50%; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section.half .half-section-title-wrapper .user-selector-search input { float: right; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section.half.left-half { float: left; padding-right: 1%; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section.half.right-half { float: right; padding-left: 1%; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section { margin-bottom: 20px; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields { background-color: #ffffff; border: 1px solid #e0e0e0; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-top: none; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-input { border: 0; width: 100%; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-form-select { padding: 10px 20px; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-form-select select { background-color: #f1f1f1; border: 1px solid #e0e0e0; font-size: 1rem; font-weight: 400; height: 32px; padding: 0 8px; }

.teacher-clazz-view .main-content .clazz-form .clazz-form-section .clazz-form-fields .clazz-form-select:last-child { border-bottom: none; }

.teacher-clazz-view .main-content .clazz-form h2 { background-color: #8e8e8e; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-radius: 5px; color: #ffffff; font-size: 1rem; font-weight: 700; margin: 0; padding: 10px 20px; }

.teacher-clazz-view .main-content .clazz-form .clazz-dates { font-size: 0.875rem; font-weight: 400; padding: 10px 20px; }

.teacher-clazz-view .main-content .clazz-form .read-only-width { width: 11%; }

.teacher-clazz-view .user-selector-component { background-color: #fbfafa; border-left: 1px solid #4483cc; box-sizing: border-box; color: #115aa6; float: right; min-width: 200px; width: 20%; }

.teacher-clazz-view .user-selector-component ul { padding: 0; }

.teacher-clazz-view .user-selector-component li { border-bottom-color: rgba(0, 0, 0, 0.1); border-bottom-style: solid; border-bottom-width: 0; border-color: rgba(255, 255, 255, 0.1); list-style-type: none; width: calc(100% - 0); }

.teacher-clazz-view .user-selector-component .user-selector-buttons { background-color: #dae2ec; border-bottom: solid 1px #4483cc; height: 74px; position: relative; }

.teacher-clazz-view .user-selector-component .user-selector-buttons .button-wrapper { display: table; margin: auto; position: relative; top: 50%; transform: translateY(-50%); width: 90%; }

.teacher-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button { background-color: #ffffff; border: 1px solid #115aa6; border-radius: 5px; color: #115aa6; display: block; float: left; font-size: 0.875rem; font-weight: 300; padding: 5px 20px; width: 50%; }

.teacher-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button:first-child { border-bottom-right-radius: 0; border-top-right-radius: 0; }

.teacher-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button:last-child { border-bottom-left-radius: 0; border-top-left-radius: 0; }

.teacher-clazz-view .user-selector-component .user-selector-buttons .button-wrapper button.active { background-color: #115aa6; color: #ffffff; }

.teacher-clazz-view .user-selector-component .user-selector-search { background-color: #eff0f5; border-bottom: 1px solid #4483cc; color: #bdbdbd; font-size: 0.875rem; font-weight: 400; padding: 10px 30px; }

.teacher-clazz-view .user-selector-component .user-selector-search .clazz-input { background-color: #eff0f5; border: 0; font-size: 0.875rem; width: 80%; }

.teacher-clazz-view .user-selector-component .user-selector-search .clazz-input::-moz-placeholder { color: #bdbdbd; }

.teacher-clazz-view .user-selector-component .user-selector-search .clazz-input::placeholder { color: #bdbdbd; }

.teacher-clazz-view .user-selector-component .user-selector-selection span { border-right: 1px solid #4483cc; box-sizing: border-box; cursor: pointer; display: inline-block; font-size: 0.875rem; font-weight: 400; padding: 10px; text-align: center; width: 50%; }

.teacher-clazz-view .user-selector-component .user-selector-selection span:last-child { border-right: none; display: inline-block; width: 48%; }

.teacher-clazz-view .user-selector-component .user-selector-users { border-top: 1px solid #4483cc; max-height: calc(100% - 210px); overflow-x: hidden; overflow-y: auto; }

.teacher-clazz-view .user-selector-component .user-selector-users .selected { background-color: #115aa6; color: #ffffff; }

.teacher-clazz-view .user-selector-component .user-selector-users .user { font-size: 0.875rem; font-weight: 400; padding: 10px 30px; }

.teacher-clazz-view .user-selector-component .selected-user-count { background-color: #eff0f5; clear: both; color: #66ce00; display: block; font-size: 0.875rem; font-weight: 400; padding: 20px; text-align: center; }

.teacher-clazz-view #startDate { background-color: #ffffff; border: 1px solid #d7d7d7; padding: 1px 3px; }

.teacher-clazz-view #endDate { background-color: #ffffff; border: 1px solid #d7d7d7; padding: 1px 3px; }

.teacher-clazz-view .milestones { margin-top: 15px; }

.teacher-clazz-view .milestones .milestone-left { display: inline-block; width: 200px; }

.teacher-clazz-view .milestones .milestone-title { font-style: italic; }

.teacher-clazz-view .milestones ul { margin-top: 8px; }

.teacher-clazz-view .milestones ul li { list-style-type: disc; margin-left: 30px; padding-top: 5px; }

.teacher-clazz-view .milestones ul li .milestone-left { display: inline-block; width: 170px; }

.teacher-clazz-view .milestones .forced-progression { margin-top: 15px; }

.teacher-clazz-view .toggle-switch { align-items: center; display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; height: 100%; margin-left: 10px; margin-right: 10px; width: 100%; }

.teacher-clazz-view .switch-title { padding: 0.75em 5px 0.75em 0; }

.teacher-clazz-view .switch-container { padding: 0.25em 0 0 0.5em; }

.teacher-clazz-view .switch { display: inline-block; height: 20px; position: relative; width: 70px; }

.teacher-clazz-view .switch input { display: none; }

.teacher-clazz-view .slider-off { background-color: #ed2024; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.teacher-clazz-view .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.teacher-clazz-view .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.teacher-clazz-view input:checked + .slider-on::before { transform: translateX(50px); }

.teacher-clazz-view .on { display: none; }

.teacher-clazz-view .on, .teacher-clazz-view .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }

.teacher-clazz-view input:checked + .slider .on { display: block; }

.teacher-clazz-view .slider.round { border-radius: 34px; }

.teacher-clazz-view .slider.round::before { border-radius: 50%; }

/* END: views/clazzes/_add-clazz.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/courses/_course.scss */
.view.course-view { height: 100%; overflow-x: hidden; }

.course-view .course-without-units .lesson-details-wrapper { float: right; height: 60px; position: relative; top: -21px; width: 120px; }

.course-view .course-without-units .lesson-details-wrapper .lesson-status { border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; border-top: 1px solid rgba(236, 238, 239, 0.5); color: #ffffff; font-size: 1rem; font-weight: 700; padding: 8px; text-align: center; }

.course-view .course-without-units .lesson-details-wrapper .lesson-status.lesson-status-complete { background-color: #3b863e; }

.course-view .course-without-units .lesson-details-wrapper .lesson-status.lesson-status-skipped { background-color: #5e7997; }

.course-view .course-without-units .lesson-details-wrapper .lesson-status.lesson-status-pending { background-color: #008391; }

.course-view .course-without-units ul { list-style: none; margin-left: 24px; margin-right: 24px; margin-top: 32px; padding-left: 0; }

.course-view .course-without-units ul li { background-color: #f4f4f4; border: 1px solid #eceeef; border-radius: 0.25rem; margin-bottom: 20px; padding: 20px; }

.course-view .course-without-units ul li a { font-size: 1.125rem; font-weight: 500; letter-spacing: 0.0175em; line-height: 1em; }

.course-view .course-without-units ul li .objectives, .course-view .course-without-units ul li .external-resources { background-color: #ffffff; border: 1px solid #eceeef; border-radius: 0.2rem; margin-top: 12px; padding: 8px; position: relative; }

.course-view .course-without-units ul li .objectives h3, .course-view .course-without-units ul li .external-resources h3 { color: #212121; font-size: 1.0375rem; font-weight: 700; line-height: 1em; margin: 0.2em; margin-bottom: 0.3em; }

.course-view .course-without-units ul li .objectives ul, .course-view .course-without-units ul li .external-resources ul { list-style: disc; margin: 0; padding-bottom: 8px; padding-left: 24px; }

.course-view .course-without-units ul li .objectives ul li, .course-view .course-without-units ul li .external-resources ul li { background-color: #ffffff; border: 0; font-size: 1rem; font-weight: 400; line-height: 1.6em; list-style-type: disc; margin: 0; padding: 0; }

.course-view .course-without-units ul li .objectives .lesson-milestone-footer, .course-view .course-without-units ul li .external-resources .lesson-milestone-footer { bottom: 10px; color: #996699; font-family: Roboto; font-size: 1rem; font-weight: normal; position: absolute; right: 10px; }

.course-view .course-without-units ul li .objectives .lesson-milestone-footer i.locked, .course-view .course-without-units ul li .external-resources .lesson-milestone-footer i.locked { color: #aaaaaa; }

.course-view .course-without-units ul li.locked { color: #999999; }

.course-view .course-without-units ul li.locked .objectives h3 { color: #999999; }

.course-view .course-without-units ul li.locked p { color: #999999; }

.course-view .course-without-units .course-header { align-items: center; display: flex; flex-direction: row; height: 80px; padding: 4px; }

.course-view .course-without-units .course-header > h1 { align-items: center; background-color: #464a4c; color: #ffffff; display: flex; font-family: 'Roboto', sans-serif; font-kerning: normal; font-size: 2.25rem; font-weight: 500; justify-content: center; letter-spacing: 0.0175em; line-height: 1em; padding-left: calc(24px - 5px); }

.course-view .course-without-units .course-header .course-lesson-filters { color: #676b69; display: flex; flex-direction: row; font-size: 0.85rem; margin-left: auto; }

.course-view .course-without-units .course-header .course-lesson-filters .lessons-filter-button { font-family: 'Roboto', sans-serif; padding: 4px; text-align: center; width: 7.5em; }

.course-view .course-without-units .course-header .course-lesson-filters .lessons-filter-button.inactive { background-color: #ffffff; color: #676b69; }

.course-view .course-without-units .course-header .course-lesson-filters .lessons-filter-button.active { background-color: #1f7bc1; color: #ffffff; }

.course-view .course-without-units .course-header .course-lesson-filters .lessons-filter-button:first-of-type { border: 1px solid #1a68a8; border-bottom-left-radius: 0.2rem; border-top-left-radius: 0.2rem; }

.course-view .course-without-units .course-header .course-lesson-filters .lessons-filter-button:last-of-type { border: 1px solid #1a68a8; border-bottom-right-radius: 0.2rem; border-left: 0; border-top-right-radius: 0.2rem; margin-right: 20px; }

.course-view .course-without-units .item-expand-collapse-icon { border-radius: 50%; cursor: pointer; display: inline-block; margin-right: 5px; text-align: center; width: 18px; }

.course-view .course-without-units .item-expand-collapse-icon.collapse-caret { background-color: #464a48; color: #ffffff; }

.course-view .course-without-units .item-expand-collapse-icon.expand-caret { background-color: #1f7bc1; color: #ffffff; }

.course-view .course-without-units .unit-lessons-list { margin-left: 0; margin-right: 0; }

.course-view .course-without-units .unit-lessons-list .unit-lesson-list-item { background-color: #ffffff; border: 0; border-radius: 0.25rem; margin-bottom: 20px; padding: 20px; }

.course-view .course-without-units .unit-lessons-list .lesson-footer-container { bottom: 0; color: #a7a9ab; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: normal; padding: 5px; position: absolute; right: 30%; }

.course-view .course-without-units .unit-lessons-list .lesson-footer-container .learn-tab-label.active { color: #597c38; font-weight: 700; }

.course-view .course-without-units .unit-lessons-list .lesson-footer-container .use-tab-label.active { color: #77378d; font-weight: 700; }

.course-view .course-without-units .unit-lessons-list .lesson-footer-container .show-tab-label.active { color: #d54f26; font-weight: 700; }

.course-view .course-with-units .course-header { align-items: center; display: flex; flex-direction: row; padding: 4px; }

.course-view .course-with-units .course-header > h1 { align-items: center; color: #365daa; display: flex; font-family: 'Roboto', sans-serif; font-kerning: normal; font-size: 2rem; font-weight: 500; justify-content: center; letter-spacing: 0.0175em; line-height: 1em; padding-left: calc(24px - 5px); }

.course-view .course-with-units .course-header .course-lesson-filters { color: #676b69; display: flex; flex-direction: row; font-size: 0.85rem; margin-left: auto; }

.course-view .course-with-units .course-overview { background-color: #f1f1f1; border-top: #365daa 2px solid; font-family: 'Roboto'; margin-left: 24px; margin-right: 24px; padding: 10px; }

.course-view .course-with-units .course-overview .course-overview-header { color: #365daa; font-size: 1rem; font-weight: bold; }

.course-view .course-with-units .course-overview .course-overview-header .instruction-days { float: right; font-style: italic; }

.course-view .course-with-units .course-overview .course-overview-header .float-none { float: none !important; }

.course-view .course-with-units .course-overview .course-overview-body { font-size: 0.8rem; line-height: 1.5em; margin-top: 10px; }

.course-view .course-with-units .course-secondary-header { color: #365daa; font-size: 1.25rem; }

.course-view .course-with-units .course-assessments-overview { display: flex; margin-left: 24px; margin-right: 24px; }

.course-view .course-with-units .course-assessments-overview .assessments-details { width: 50%; }

.course-view .course-with-units .course-assessments-overview .course-assessments-header { margin-top: 20px; padding: 12px 0; }

.course-view .course-with-units .PLUS-section { margin-left: 10px; padding-top: 40px; width: 54%; }

@media (max-width: 1170px) { .course-view .course-with-units .course-assessments-overview { display: flex; flex-direction: column-reverse; margin-left: 24px; margin-right: 24px; }
  .course-view .course-with-units .course-assessments-overview .assessments-details { width: 100%; }
  .course-view .course-with-units .course-assessments-overview .course-assessments-header { margin-top: 20px; padding: 12px 0; }
  .course-view .course-with-units .PLUS-section { width: 100%; } }

.course-view .course-with-units .table-details { border-collapse: collapse; border-left: 1px solid #f5f5f5; box-shadow: 2px 2px 2px #f5f5f5; font-size: 0.8rem; margin-bottom: 15px; text-align: left; width: 100%; }

.course-view .course-with-units .table-details .assessments-table-header { background-color: #365daa; color: #ffffff; margin: 0; padding: 4px 10px; }

.course-view .course-with-units .table-details .assessments-table-header.status { font-style: italic; }

.course-view .course-with-units .table-details .table-header { padding: 6px 10px; }

.course-view .course-with-units .table-details th.table-row-header { font-weight: normal; margin: 0; padding: 6px 10px; vertical-align: middle; }

.course-view .course-with-units .table-details th.bold-text { color: #000000; font-weight: bold; }

.course-view .course-with-units .table-details tr { background-color: #f5f5f5; color: #464a48; font-weight: normal; height: 30px; }

.course-view .course-with-units .table-details tr.alt { background-color: #ffffff; }

.course-view .course-with-units .table-details tr.bold-text-row { color: #000000; font-weight: bold !important; }

.course-view .course-with-units .table-details tr.bold-text-row th.assessments-row-header { font-weight: bold; margin: 0; padding: 6px 10px; vertical-align: middle; }

.course-view .course-with-units .table-details tr.milestone { text-align: center; height: 20px; color: #ffffff; font: normal normal bold 14px/16px Roboto; -webkit-user-select: none; -moz-user-select: none; user-select: none; padding-left: 10px; padding-top: 2px; padding-bottom: 2px; }

.course-view .course-with-units .table-details tr.milestone.quarterly { background-color: #330066; }

.course-view .course-with-units .table-details tr.milestone.trimesterly { background-color: #C1571A; }

.course-view .course-with-units .table-details tr.milestone.semesterly { background-color: #6B7A48; }

.course-view .course-with-units .table-details tr.milestone .list-item-wrapper { width: 100%; }

.course-view .course-with-units .table-details tr.milestone .list-item-wrapper .centered-list-item { width: 100%; }

.course-view .course-with-units .table-details div.list-item-wrapper.milestone { border: 1px dotted red; width: 165%; text-align: center; padding: 0; margin: 0; }

.course-view .course-with-units .table-details .row-content { margin: 0; padding: 2px 10px; vertical-align: middle; }

.course-view .course-with-units .table-details .project-icon-container { margin-left: 3px; }

.course-view .course-with-units .table-details .project-icon-container svg { height: 30px; }

.course-view .course-with-units .course-structure { margin-left: 24px; margin-right: 24px; }

.course-view .course-with-units .course-structure .course-structure-header { margin-top: 20px; padding: 12px 0; }

.course-view .course-with-units .course-structure .expand-button { background-color: #fdb515; border: 0; float: right; font-weight: bold; padding: 4px 10px; }

.course-view .course-with-units .course-structure ul { list-style: none; padding-left: 0; }

.course-view .course-with-units .course-structure ul li { background-color: #365daa; color: #ffffff; padding: 8px; }

.course-view .course-with-units .course-structure ul li .omit-icon { float: left; position: relative; top: 8px; padding-left: 10px; }

.course-view .course-with-units .course-structure ul li .coure-view-project-icon { float: right; margin-right: 15px; }

.course-view .course-with-units .course-structure ul li .unit-days-count { float: right; font-weight: bold; }

.course-view .course-with-units .course-structure ul .unit-collapsed { margin-bottom: 10px; }

.course-view .course-with-units .font-weight { font-weight: bold; }

.course-view .course-with-units .padding-left { padding-left: 35px !important; }

.course-view .course-with-units .text-center { text-align: center; }

.course-view .course-with-units .checkmark { background-color: #eeeeee; border-radius: 5px; height: 20px; left: 0; top: 0; width: 20px; }

.course-view .course-with-units .checkmark-black { border: solid #000000; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

.course-view .lesson-retake { background-color: #f54d62 !important; }

.course-view .omit-icon { display: inline-block; width: 16px; height: 16px; margin-right: 8px; }

.course-view .titled-switch-component { display: flex; flex-direction: row; }

.course-view .titled-switch-component .toggle-switch { align-items: stretch; display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; height: 100%; margin-left: 10px; margin-right: 10px; width: 100%; }

.course-view .titled-switch-component .switch-title { font: normal 12pt Roboto, serif; margin: 0; padding: 0; padding-top: 0.25em; padding-bottom: 14px; }

.course-view .titled-switch-component .switch-container { padding-right: 12px; text-align: right; width: 65px; }

.course-view .titled-switch-component .switch { display: inline-block; height: 23px; position: relative; top: 2px; width: 60px; }

.course-view .titled-switch-component .switch input { display: none; }

.course-view .titled-switch-component .slider-off { background-color: #ed202400; border: 1px solid; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.course-view .titled-switch-component .slider::before.slider-off { background-color: #000000; border: 1px solid; bottom: 2px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.course-view .titled-switch-component .slider::before { background-color: #ffffff; bottom: 4px; content: ''; height: 15px; left: -8px; position: absolute; transition: 0.2s; width: 15px; }

.course-view .titled-switch-component .slider.slider-off::before { background-color: #000000; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.course-view .titled-switch-component .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.course-view .titled-switch-component input:checked + .slider-on::before { transform: translateX(50px); }

/* END: views/courses/_course.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/courses/_parent-course.scss */
/* END: views/courses/_parent-course.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/courses/_student-course.scss */
/* END: views/courses/_student-course.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/courses/_content-editor-course.scss */
.content-editor-course-view table { border: 1px solid black; border-collapse: collapse; font-size: 1rem; margin: 15px; text-align: left; width: calc(100% - 25px); }

.content-editor-course-view table th { background-color: #ffffcc; margin: 0; padding: 6px 10px; }

.content-editor-course-view table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.content-editor-course-view table td img { margin-left: 6px; }

.content-editor-course-view table td .edit-link { color: #000000; }

.content-editor-course-view table tr.alt { background-color: gainsboro; }

.content-editor-course-view table tr.drop-target { background-color: #8fc0f4; box-shadow: none; }

.content-editor-course-view .add-pacing-day { background-color: whitesmoke; border: 2px solid #cfcfcf; border-radius: 10px; margin: 15px; padding: 15px; }

.content-editor-course-view .add-pacing-day i { margin-left: 15px; margin-right: 15px; }

.content-editor-course-view .add-pacing-day i:hover { color: #0000ee; }

.content-editor-course-view .add-pacing-day .search-results tr:hover { background-color: #8fc0f4; }

.content-editor-course-view .add-pacing-day .search-results tr.disabled:hover { background-color: #ff9999; cursor: not-allowed; }

/* END: views/courses/_content-editor-course.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/courses/_lms-course-installer.scss */
.lms-course-installer-view { padding: 20px; text-align: center; }

.lms-course-installer-view h2 { margin-top: 0; }

.lms-course-installer-view .course-list { -moz-column-count: 4; column-count: 4; -moz-column-gap: 100px; column-gap: 100px; -moz-column-rule: 1px solid #0275d8; column-rule: 1px solid #0275d8; -moz-column-width: 280px; column-width: 280px; display: block; margin: 0 auto; text-align: left; width: calc(100vw - 235px); }

.lms-course-installer-view .course-list .courses-toggle { margin-bottom: 15px; margin-right: 15px; }

.lms-course-installer-view .course-list .course-checkbox { float: left; }

.lms-course-installer-view .course-list .course-title { display: block; padding-left: 20px; }

.lms-course-installer-view table { margin: 0 auto; padding-bottom: 20px; text-align: right; }

.lms-course-installer-view .check-connection { width: 100%; }

.lms-course-installer-view .connection-status { font-weight: bold; padding-bottom: 20px; }

.lms-course-installer-view .needs-attention { border: 2px solid #ff0000; }

.lms-course-installer-view .lms-icons-container { display: flex; flex-flow: row wrap; justify-content: space-around; margin-top: 50px; }

.lms-course-installer-view .lms-icons-container .lms-icon { background-color: #ffffff; float: left; font-size: 1.2rem; height: 150px; margin-left: 15px; margin-right: 15px; padding: 5px; vertical-align: middle; width: 150px; }

.lms-course-installer-view .lms-icons-container .lms-icon.selected { box-shadow: 0 0 25px #005db9; }

.lms-course-installer-view .assessment-options.hidden { display: none; }

.lms-course-installer-view .assessment-options { align-items: center; display: flex; flex-direction: row; justify-content: center; }

.lms-course-installer-view .assessment-options .assignment-gradable { width: 45%; }

.lms-course-installer-view .assessment-options .assignment-gradable ul.assessment-options-list { list-style-position: inside; list-style-type: none; margin-left: 65px; margin-top: 20px; text-align: left; }

.lms-course-installer-view .assessment-options .assignment-gradable ul.assessment-options-list ul.custom-assessment-options-list { list-style-type: none; margin-left: 30px; margin-top: 5px; }

/* END: views/courses/_lms-course-installer.scss */
/* ========================================================================= */
.view.user-courses-view { overflow: hidden; }

.view.user-courses-view .view-course-header { background-color: #ffffff; font-weight: bold; padding: 20px 60px; }

.view.user-courses-view .course-list-data-container { align-items: center; display: flex; padding: 20px 60px; }

.view.user-courses-view .course-list-wrapper { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); width: 100%; }

.view.user-courses-view .course-list-wrapper .list-body { height: calc(100vh - 35vh); overflow-y: scroll; }

.view.user-courses-view .course-list-wrapper ::-webkit-scrollbar { /* stylelint-disable property-no-vendor-prefix*/ -webkit-appearance: none; appearance: none; /* stylelint-enable property-no-vendor-prefix*/ width: 8px; }

.view.user-courses-view .course-list-wrapper ::-webkit-scrollbar:vertical { width: 12px; }

.view.user-courses-view .course-list-wrapper ::-webkit-scrollbar:horizontal { height: 12px; }

.view.user-courses-view .course-list-wrapper ::-webkit-scrollbar-track { background-color: #f6f6f6f6; border-radius: 8px; }

.view.user-courses-view .course-list-wrapper ::-webkit-scrollbar-thumb { background-color: #c2c2c2; border-radius: 8px; }

.view.user-courses-view .course-list-wrapper ::-webkit-scrollbar-thumb:hover { background-color: #555555; border-radius: 8px; }

.view.user-courses-view .courses-list-table { border-spacing: 0; width: 100%; }

.view.user-courses-view .header-row { background-color: #8e8e8e; color: #ffffff; }

.view.user-courses-view .header-cell { padding-bottom: 5px; padding-left: 5px; padding-top: 5px; text-align: left; }

.view.user-courses-view .header-cell.left { width: 65%; }

.view.user-courses-view .filter-row { background-color: #f1f1f1; }

.view.user-courses-view .data-row { background-color: #ffffff; }

.view.user-courses-view .data-row .data-cell { padding-left: 5px; }

.view.user-courses-view .data-row .data-cell.left { width: 66%; }

.view.user-courses-view .data-row.alt { background-color: #f1f1f1; }

.view.user-courses-view tr > th:first-child { border-top-left-radius: 3px; }

.view.user-courses-view tr > th:last-child { border-top-right-radius: 3px; }

.view.user-courses-view table tr:last-child td:first-child { border-bottom-left-radius: 3px; }

.view.user-courses-view table tr:last-child td:last-child { border-bottom-right-radius: 3px; }

.content-editor-course-list-view .button-wrapper { padding: 10px 25px 25px; }

.content-editor-course-list-view .button-container { display: flex; float: right; height: unset; padding: 0 20px; }

.content-editor-course-list-view .button-container .blue-new-button { background-color: #325db1; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.content-editor-course-list-view .button-container .blue-new-button.curved { border-radius: 3px; padding: 8px; }

.content-editor-course-list-view .button-container .clear-new-button.curved { border-radius: 3px; padding: 8px; }

.content-editor-course-list-view .button-container .grey-new-button { background-color: #8e8e8e; border: 0; color: #ffffff; font-weight: bold; padding: 12px; text-transform: none; }

.content-editor-course-list-view .button-container .clear-new-button { background-color: transparent; border: 1px solid #325db1; color: #325db1; font-weight: bold; padding: 12px; text-transform: none; }

.content-editor-course-list-view .button-container .pull-right { margin-left: auto; margin-right: 0; }

.content-editor-course-list-view .course-list { background-color: #ffffff; height: calc(100vh - 163px); margin: 24px 24px 0; padding: 0; }

.content-editor-course-list-view .course-list table { border-collapse: collapse; font-size: 1rem; text-align: left; width: 100%; }

.content-editor-course-list-view .course-list table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.1875rem; font-weight: 500; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; }

.content-editor-course-list-view .course-list table th button { color: #ffffff; }

.content-editor-course-list-view .course-list table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.content-editor-course-list-view .course-list table .filter-input { width: 100%; }

.content-editor-course-list-view .course-list table tr:nth-child(even) { background: #ffffff; }

.content-editor-course-list-view .course-list table tr:nth-child(odd) { background: whitesmoke; }

.content-editor-course-list-view .course-list table tr.filter-row { background-color: #ffffff; }

.content-editor-course-list-view .course-list table select { border: 1px solid darkgray; border-radius: 0; height: 25px; }

.content-editor-course-list-view .course-list table select .select-placeholder { color: darkgray; }

.content-editor-course-list-view .course-list table .filter-tag-row .filter-tag { background-color: #f1f1f1; border-radius: 25px; color: darkgray; font-size: 0.75rem; font-style: italic; padding: 2px 4px; }

.content-editor-course-list-view .course-list table .filter-tag-row .filter-tag button { background-color: #f1f1f1; border: 0; color: darkgray; font-size: 0.75rem; font-style: italic; margin-left: 2px; }

.content-editor-course-list-view .new-course td { background-color: #c7e6c7; }

.content-editor-course-list-view .sort-button { background: none; border: 0; }

.content-editor-course-list-view .course-list-pagination-buttons-container { display: flex; height: 32px; justify-content: center; padding: 10px; text-align: center; }

.content-editor-course-list-view .course-list-pagination-buttons-container .pagination-button { background-color: #ffffff; border: 1px solid #c7c7c7; color: #1f7bc1; font-family: 'Roboto', bold; margin-right: 5px; padding: 0 10px; text-transform: none; }

.content-editor-course-list-view .course-list-pagination-buttons-container .pagination-button:nth-child(9) { margin-left: 5px; margin-right: 5px; }

.content-editor-course-list-view .course-list-pagination-buttons-container .pagination-button.active { background-color: #1f7bc1; color: #ffffff; }

.content-editor-course-list-view .course-list-pagination-buttons-container .disabled-button { cursor: not-allowed; }

.view.course-structure-view .no-transformation-btn { text-transform: none; }

.view.course-structure-view .btn-container { display: flex; justify-content: space-between; height: 34px; padding: 0 20px; text-transform: uppercase; }

.view.course-structure-view .btn-container .caret-icon { margin-right: 4px; }

.view.course-structure-view .btn-container .course-controls { display: flex; }

.view.course-structure-view .btn-container .course-controls > .course-modified-label { background-color: #f0ad4e; color: #ffffff; font-weight: bold; padding: 2px 5px; line-height: 2em; }

.view.course-structure-view .btn-container .course-controls > .course-published-label { background-color: #5cb85c; color: #ffffff; font-weight: bold; line-height: 2em; padding: 2px 5px; }

.view.course-structure-view .btn-container .course-controls > .italic-font { font-style: italic; }

.view.course-structure-view .btn-container .save-controls { display: flex; justify-content: center; align-content: flex-end; flex-direction: row; }

.view.course-structure-view .btn-container .save-controls > .save-warning { display: flex; justify-content: center; align-content: center; flex-direction: column; font-size: 8.5pt; text-transform: none; text-align: right; color: #925f00; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.view.course-structure-view .btn-container .save-controls > .save-button { background-color: inherit; color: #24408e; margin-left: auto; margin-right: 0; text-transform: uppercase; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.view.course-structure-view .btn-container .save-controls > .save-button svg { fill: #293f91; fill-opacity: 1; }

.view.course-structure-view .btn-container .save-controls .padded-icon { position: relative; top: -1px; padding-right: 2px; font-size: small; }

.view.course-structure-view .btn-container .save-controls > .save-button.disabled { color: rgba(61, 86, 175, 0.25); }

.view.course-structure-view .btn-container .save-controls > .save-button.disabled svg { fill-opacity: 0.25; }

.view.course-structure-view .btn-container .save-incon { margin-left: 4px; }

.view.course-structure-view .content-title-section { align-items: center; border-bottom: 2px solid #d8d8d8; border-top: 2px solid #d8d8d8; display: flex; height: 60px; padding: 0 20px; }

.view.course-structure-view .content-title-section .content-title { font-size: 2rem; }

.view.course-structure-view .content-title-section .content-title.editable { width: 100%; }

.view.course-structure-view .content-title-section .edit-title-button { background: none; border: 0; color: #2f5bb4; }

.view.course-structure-view .content-title-section .right-menus-container { display: flex; margin-left: auto; margin-right: 0; }

.view.course-structure-view .content-title-section .right-menus-container .menu { font-size: 0.75rem; }

.view.course-structure-view .content-title-section .right-menus-container .course-overview-btn { background-color: inherit; color: #24408e; display: inline; font-style: italic; text-transform: none; }

.view.course-structure-view .content-title-section .right-menus-container .course-overview-textarea { resize: none; width: 100%; }

.view.course-structure-view .content-title-section .right-menus-container .component div.menu-opener div.icon { width: 58px; height: 58px; }

.view.course-structure-view .content-title-section .right-menus-container .component div.menu-opener div.icon.info-icon { width: 34px; }

.view.course-structure-view .content-title-section .right-menus-container .component div.menu { padding: 14px; padding-top: 8px; }

.view.course-structure-view .content-title-section .right-menus-container .component div.menu p { font-size: 0.9375rem; }

.view.course-structure-view .content-title-section .right-menus-container .component div.menu p.menu-section-header { font-size: 1.0625rem; }

.view.course-structure-view .content-title-section .right-menus-container .component div.menu p.menu-section-header.sub-header { font-size: 0.9375rem; padding-bottom: 0; }

.view.course-structure-view .milestone-controls { margin: 20px; }

.view.course-structure-view .milestone-controls .titled-switch-component { display: flex; flex-direction: row; }

.view.course-structure-view .milestone-controls .titled-switch-component .toggle-switch { align-items: stretch; display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; height: 100%; margin-left: 10px; margin-right: 10px; width: 100%; }

.view.course-structure-view .milestone-controls .titled-switch-component .switch-title { font: normal 12pt Roboto, serif; margin: 0; padding: 0; padding-bottom: 14px; }

.view.course-structure-view .milestone-controls .titled-switch-component .switch-container { padding-right: 12px; text-align: right; width: 65px; }

.view.course-structure-view .milestone-controls .titled-switch-component .switch { display: inline-block; height: 23px; position: relative; top: 2px; width: 60px; }

.view.course-structure-view .milestone-controls .titled-switch-component .switch input { display: none; }

.view.course-structure-view .milestone-controls .titled-switch-component .slider-off { background-color: #ed202400; border: 1px solid; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.view.course-structure-view .milestone-controls .titled-switch-component .slider::before.slider-off { background-color: #000000; border: 1px solid; bottom: 2px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.view.course-structure-view .milestone-controls .titled-switch-component .slider::before { background-color: #ffffff; bottom: 4px; content: ''; height: 15px; left: -8px; position: absolute; transition: 0.2s; width: 15px; }

.view.course-structure-view .milestone-controls .titled-switch-component .slider.slider-off::before { background-color: #000000; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.view.course-structure-view .milestone-controls .titled-switch-component .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.view.course-structure-view .milestone-controls .titled-switch-component input:checked + .slider-on::before { transform: translateX(50px); }

.view.course-structure-view .milestone-controls .milestone-types-container { display: flex; flex-direction: row; }

.view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container { margin: 10px; padding-left: 10px; padding-right: 20px; }

.view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container input[type='checkbox'] { visibility: hidden; }

.view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container label { cursor: pointer; position: relative; }

.view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container span::after, .view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container span::before { bottom: 0; content: ''; margin: auto; position: absolute; top: 0; }

.view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container span.checkbox::before { background-color: #ffffff; border: 2px solid rgba(0, 0, 0, 0.5); box-sizing: border-box; height: 20px; left: -22px; transition: border-color 0.2s; width: 20px; }

.view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container span.checkbox:hover::before { border: 2px solid #333333; }

.view.course-structure-view .milestone-controls .milestone-types-container .checkbox-container span.checkbox::after { color: transparent; content: '\f00c'; font-family: 'FontAwesome'; left: -20px; top: 2px; transition: color 0.2s; }

.view.course-structure-view .milestone-controls .milestone-types-container input[type='checkbox']:checked + label span.checkbox::after { color: #62afff; }

.view.course-structure-view .content-section { border-bottom: 1px solid #d8d8d8; border-left: 1px solid #d8d8d8; border-right: 1px solid #d8d8d8; border-top: 15px solid #8e8e8e; margin: 20px; }

.view.course-structure-view .content-section .btn-row { background-color: whitesmoke; display: flex; height: 56px; padding: 10px 20px; }

.view.course-structure-view .content-section .btn-row .delete-button { margin-left: 10px; }

.view.course-structure-view .content-section .btn-row .skip-button { margin-left: 10px; }

.view.course-structure-view .content-section ul.outer-list { list-style-type: none; }

.view.course-structure-view .content-section ul.outer-list li { color: #464a48; }

.view.course-structure-view .content-section ul.outer-list li .list-item { display: flex; padding: 15px 20px; }

.view.course-structure-view .content-section ul.outer-list li .list-item .unit-edit-field { width: 100%; }

.view.course-structure-view .content-section ul.outer-list li .list-item .unit-btn-container { width: 5%; }

.view.course-structure-view .content-section ul.outer-list li i.bars-icon { cursor: move; margin-right: 20px; }

.view.course-structure-view .content-section ul.outer-list li .caret-button { background-color: inherit; border: 0; color: #464a48; float: right; }

.view.course-structure-view .content-section ul.outer-list li .edit-unit-button { background-color: inherit; border: 0; color: #464a48; float: right; }

.view.course-structure-view .content-section ul.outer-list li .warning-message { font-size: 0.75rem; font-style: italic; margin-left: 20px; }

.view.course-structure-view .content-section ul.outer-list li .unit-input { width: 100%; }

.view.course-structure-view .content-section .lessons-section .btn-row { background-color: #d7e4ee; display: flex; height: 55px; padding-bottom: 10px; padding-right: 20px; padding-top: 10px; }

.view.course-structure-view .content-section li.unit-list:nth-child(even) { background-color: whitesmoke; }

.view.course-structure-view .content-section li.drop-target { background-color: #fbc02d !important; box-shadow: none; }

.view.course-structure-view .content-section ul.inner-list { list-style-type: none; }

.view.course-structure-view .content-section ul.inner-list li { background-color: #ecf3f7; display: flex; padding-bottom: 8px; padding-left: 40px; padding-right: 20px; padding-top: 8px; }

.view.course-structure-view .content-section ul.inner-list li a { color: #2f5bb4; }

.view.course-structure-view .content-section ul.inner-list li i.bars-icon { color: #2f5bb4; cursor: move; margin-right: 20px; }

.view.course-structure-view .content-section ul.inner-list li i.fa-ban { color: red; margin-right: 20px; }

.view.course-structure-view .content-section ul.inner-list li div.list-item-wrapper { align-items: center; display: flex; height: 26px; width: 100%; }

.view.course-structure-view .content-section ul.inner-list li .lock-icon { color: #3d56af; margin-left: auto; margin-right: 0; }

.view.course-structure-view .content-section ul.inner-list li .unlock-icon { margin-left: auto; margin-right: 0; }

.view.course-structure-view .content-section ul.inner-list li .edit-icon { color: #3d56af; margin-left: auto; margin-right: 4px; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list:nth-child(even) { background-color: #d7e4ee; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list.milestone { color: #ffffff; text-align: center; font: normal normal bold 16px/18px Roboto; -webkit-user-select: none; -moz-user-select: none; user-select: none; padding-left: 10px; padding-top: 2px; padding-bottom: 2px; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list.milestone i.bars-icon { cursor: move; color: white; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list.milestone.quarterly { background-color: #330066; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list.milestone.trimesterly { background-color: #C1571A; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list.milestone.semesterly { background-color: #6B7A48; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list.milestone .list-item-wrapper { width: 100%; }

.view.course-structure-view .content-section ul.inner-list li.lesson-list.milestone .list-item-wrapper .centered-list-item { width: 100%; }

.view.course-structure-view .content-section .defaultCursor { cursor: default !important; }

.view.course-structure-view .content-section .unpublished-unit { float: right; font-size: 0.625rem; margin-left: 6px; margin-top: 5px; }

.view.course-structure-view .content-section .no-color { color: #ffffff; }

.view.course-structure-view .content-section .orange-color { color: #ff6600; }

.view.course-structure-view .content-section .unpublished-lesson { color: #ff6600; float: right; font-size: 0.625rem; margin-left: 6px; }

.view.course-structure-view .content-section .hide-icon { visibility: hidden; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/attendance/_attendance.scss */
.view.attendance-view { height: 100%; overflow: hidden; }

.view.attendance-view .class-info-dropdown { background-color: #2f5bb4; }

.view.attendance-view .class-info-dropdown .fa-angle-down { color: #ffffff; }

.view.attendance-view .class-info-dropdown span { color: #ffffff; }

.view.attendance-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown { background-color: #464a48; }

.view.attendance-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown span { color: #cfcfcf; }

/* END: views/attendance/_attendance.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/attendance/_parent-attendance.scss */
.parent-attendance-view .view-content-area { height: calc(100% - 100px); padding-bottom: 10px; }

/* END: views/attendance/_parent-attendance.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/attendance/_student-attendance.scss */
.student-attendance-view { background-color: #f5f5f5; }

.student-attendance-view .view-content-area { height: calc(100vh - (44px + 44px + 86px + 40px + 60px + 48px)); }

.student-attendance-view.as-student .view-content-area { height: calc(100% - 110px); }

/* END: views/attendance/_student-attendance.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: logbooks/_logbooks.scss */
.logbooks-view { box-sizing: border-box; font-weight: 400; height: 100%; overflow: hidden; width: 100%; }

.logbooks-view .scrollable { height: calc(100vh - 157px); overflow-x: hidden; }

.logbooks-view .view-content-area { background-color: #f5f5f5; padding-left: 20px; padding-right: 20px; }

.logbooks-view table { border: 1px solid #e0e0e0; border-collapse: collapse; border-radius: 6px; margin-left: 1%; margin-top: 10px; width: 98%; }

.logbooks-view table .fa-sort, .logbooks-view table .fa-sort-asc, .logbooks-view table .fa-sort-desc { padding-left: 5px; }

.logbooks-view table .left-padding { padding-left: 10px; }

.logbooks-view thead tr { border-bottom: 1px solid #e0e0e0; }

.logbooks-view thead th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; padding-bottom: 10px; padding-top: 10px; text-align: left; text-transform: uppercase; }

.logbooks-view tbody td { padding-bottom: 8px; padding-top: 8px; vertical-align: middle; }

.logbooks-view tbody tr:nth-child(even) { background-color: #ffffff; }

.logbooks-view tbody tr:nth-child(odd) { background-color: #f1f1f1; }

.logbooks-view tbody tr td img { position: relative; top: -2px; }

.logbooks-view tbody td .time { font-size: 95%; font-weight: 300; }

.logbooks-view tr.filter-row { border-top: 1px solid #e0e0e0; padding: 8px 10px; text-align: left; }

.logbooks-view tr.filter-row input, .logbooks-view tr.filter-row select { font-size: 1rem; padding: 0 5px 2px; width: calc(100% - 20px); }

.logbooks-view tr.filter-row input:focus { background-color: #eff5fb; border: 1px solid #c1c1c1; outline: none; }

.logbooks-view tr.data-row input, .logbooks-view tr.data-row select { font-size: 1rem; padding: 0 5px 2px; width: calc(100% - 20px); }

.logbooks-view tr.data-row select.student-list-combo { width: calc(100% - 6px); }

.logbooks-view tr.data-row .anchor-style-text { color: #0275d8; cursor: pointer; font-style: italic; }

.logbooks-view tr.data-row td.editable-textarea-cell { display: flex; height: 24px; overflow: visible; }

.logbooks-view tr.data-row .note-container { background-color: #f1f1f1; display: flex; flex-direction: column; height: 180px; padding: 2px; width: 95%; z-index: 999; }

.logbooks-view tr.data-row .note-container .note-dialog-close-icon { cursor: pointer; margin-left: auto; margin-right: 0; }

.logbooks-view tr.data-row textarea { border: 0; /* Safari/Chrome, other WebKit */ /* Firefox, other Gecko */ box-sizing: border-box; height: 100%; position: relative; resize: none; width: 100%; }

.logbooks-view tr.data-row textarea.readonly-mode { background-color: #f1f1f1; }

.logbooks-view tr.data-row .table-cell-edit-button { cursor: pointer; margin-left: auto; margin-right: 5px; }

.logbooks-view .add-to-logbook-button { background-color: #2f5bb4; color: #ffffff; margin-right: 10px; padding: 5px 8px; }

.logbooks-view .disabled-button { background-color: #8e8e8e; color: #ffffff; cursor: not-allowed; padding: 5px 8px; }

/******** START DATATABLE ********/
.dataTables_filter, .dataTables_info { display: none; }

table.data-table { margin: 10px; width: calc(100% - 20px); }

table.data-table .col-subject { text-overflow: ellipsis; }

table.data-table .col-subject .note-text-wrapper { overflow: hidden; text-overflow: ellipsis; }

table.data-table .col-subject .note-text-wrapper.shorten-text-wrapper { width: 80%; }

table.dataTable thead th, table.dataTable thead td { border-bottom: inherit; min-width: 150px; position: relative; width: 150px !important; }

@media (max-width: 1023px) { table.dataTable thead th, table.dataTable thead td { min-width: 100px; } }

table.dataTable thead .sorting_asc::after { content: '\f176'; float: right; font-family: FontAwesome; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { background-image: none; }

table.dataTable thead .sorting_desc::after { content: '\f175'; float: right; font-family: FontAwesome; position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/******** END DATATABLE ********/
.logbook-button-container { display: flex; float: right; height: 55px; padding: 10px; }

.pagination-buttons-container { display: flex; height: 32px; justify-content: center; text-align: center; }

.pagination-buttons-container .pagination-button { background-color: #ffffff; border: 1px solid #c7c7c7; color: #1f7bc1; font-family: 'Roboto', bold; margin-right: 5px; padding: 0 10px; text-transform: none; }

.pagination-buttons-container .pagination-button:nth-child(9) { margin-left: 5px; margin-right: 5px; }

.pagination-buttons-container .pagination-button.active { background-color: #1f7bc1; color: #ffffff; }

/* END: logbooks/_logbooks.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/overview/_overview.scss */
.view.overview-view { height: 100%; overflow-x: hidden; }

.overview-view .scrollable { overflow-x: hidden; }

.overview-header { background-color: #ffffff; /*border-bottom: solid 1px $color-off-white-bottom-border;*/ font-family: 'Roboto', sans-serif; font-weight: 100; min-height: 40px; }

.overview-header .header-content { border: 1px solid #e0e0e0; display: flex; flex-direction: row; font-weight: bold; padding: 10px; width: 100%; z-index: 4; box-sizing: border-box; }

.overview-header .header-content .title, .overview-header .header-content .user { font-size: 1.8rem; font-weight: 400; padding-left: 20px; display: inline-block; }

.overview-header .header-content .clazz-name { font-size: 1.8rem; font-weight: 500; }

.overview-header .header-content .left-side { width: 79%; }

.overview-header .header-content .right-side { float: right; height: 0; position: relative; text-align: right; width: 20%; z-index: 4; }

.overview-header .header-content .right-side .masquerade-btn { width: 170px; color: white; font-weight: bold; border: none; background-color: #325db1; padding: 5px; height: unset; }

.overview-header .header-content .right-side.navigate-to-courses { align-items: center; display: flex; height: auto; padding-right: 20px; }

.overview-header .header-content .right-side.navigate-to-courses .navigation-text { color: #005cb9; cursor: pointer; margin-left: auto; margin-right: 10px; text-transform: uppercase; }

.overview-header .header-content .message-link { color: #115aa6; font-weight: bold; height: 45px; padding-left: 20px; padding-right: 10px; position: relative; text-decoration: none; top: 8px; }

.full-content { background-color: whitesmoke; box-sizing: border-box; padding: 12px; width: 100%; }

.flex { background-color: #f5f5f5; display: flex; }

@media all and (max-width: 1444px) { .overview-header .header-content .title, .overview-header .header-content .user { font-size: 2rem; } }

/* END: views/overview/_overview.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazz-overview/_clazz-overview.scss */
.view.clazz-overview-view { background-color: #f5f5f5; overflow: hidden; }

.view.clazz-overview-view .class-info-dropdown { background-color: #2f5bb4; }

.view.clazz-overview-view .class-info-dropdown .fa-angle-down { color: #ffffff; }

.view.clazz-overview-view .class-info-dropdown span { color: #ffffff; }

.view.clazz-overview-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown { background-color: #464a48; }

.view.clazz-overview-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown span { color: #cfcfcf; }

.clazz-overview-view .scrollable { height: calc(100vh - (36px + 44px + 86px + 40px + 60px + 48px)); overflow-x: hidden; }

/* END: views/clazz-overview/_clazz-overview.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/overviews/_teacher-all-students-overview.scss */
.view.teacher-all-students-overview-view { overflow: hidden; }

.view.teacher-all-students-overview-view .view-content-area { background-color: #f5f5f5; padding-left: 20px; padding-right: 20px; }

.view.teacher-all-students-overview-view .user-rank-list-component { background-color: #ffffff; height: auto; }

.view.teacher-all-students-overview-view .user-rank-list-component .component-header { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

.view.teacher-all-students-overview-view .chart-centered-label-2 { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

.view.teacher-all-students-overview-view .charts_donut-chart { background-color: #ffffff; }

.teacher-all-students-overview-view .scrollable { height: calc(100vh - var(--masquerade-banner-height) - 278px); overflow-x: hidden; }

/* END: views/overviews/_teacher-all-students-overview.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/overviews/_school-admin-all-teachers-overview.scss */
.view.school-admin-all-teachers-overview-view { background-color: #f5f5f5; }

.view.school-admin-all-teachers-overview-view .view-content-area { background-color: #f5f5f5; padding-left: 20px; padding-right: 20px; }

.view.school-admin-all-teachers-overview-view .user-rank-list-component { background-color: #ffffff; height: auto; }

.view.school-admin-all-teachers-overview-view .user-rank-list-component .component-header { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

.view.school-admin-all-teachers-overview-view .chart-centered-label-2 { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

.view.school-admin-all-teachers-overview-view .charts_donut-chart { background-color: #ffffff; }

.school-admin-all-teachers-overview-header { background-color: gainsboro; border-bottom: solid 1px #4483cc; font-family: 'Roboto', sans-serif; font-weight: 100; height: 100px; min-height: 40px; }

.clazz-overview-header .header-content { padding: 10px 20px; }

.school-admin-all-teachers-overview-view .clazz-name { font-size: 1.8rem; font-weight: 500; }

/* END: views/overviews/_school-admin-all-teachers-overview.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/overviews/_student-all-clazzes-overview.scss */
.student-all-clazzes-overview-view { background-color: #f5f5f5; overflow: hidden; }

.student-all-clazzes-overview-view .overview-header .take-action { font-weight: bold; }

.student-all-clazzes-overview-view .scrollable { height: calc(100vh - 243px); overflow-x: hidden; }

/* END: views/overviews/_student-all-clazzes-overview.scss */
/* ========================================================================= */
.view.school-admin-teacher-overview-view { overflow: hidden; }

.view.school-admin-teacher-overview-view .view-content-area { background-color: #f5f5f5; padding-left: 20px; padding-right: 20px; }

.view.school-admin-teacher-overview-view .chart-centered-label-2 { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

.view.school-admin-teacher-overview-view .charts_donut-chart { background-color: #ffffff; }

.school-admin-teacher-overview-view .scrollable { height: calc(100vh - var(--masquerade-banner-height) - 234px); overflow-x: hidden; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/courses/_school-admin-course-overview.scss */
.school-admin-course-overview-view .padding-left { padding-left: 20px; }

.course-view .course-with-units .course-structure { /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.course-view .course-with-units .course-structure .row-content { vertical-align: middle; }

.course-view .course-with-units .course-structure .row-content .checkbox-container-set { position: relative; width: 18px; height: 18px; display: inline-block; top: 2px; left: -5px; margin-right: 3px; }

.course-view .course-with-units .course-structure .row-content .checkbox-container-set input:checked ~ .checkmark { background-color: #ffffff; }

.course-view .course-with-units .course-structure .row-content .checkbox-container-set input:disabled ~ .checkmark::after { border-color: lightgray; }

.course-view .course-with-units .course-structure .row-content .checkbox-container-set .checkmark::after { top: 2px; left: 6px; border-style: solid; border-color: #4483cc; }

.course-view .course-with-units .course-structure li.accordion-row { position: relative; padding: 0; }

.course-view .course-with-units .course-structure li.accordion-row .checkbox-container-set { position: absolute; top: 6px; left: 6px; }

.course-view .course-with-units .course-structure li.accordion-row .checkbox-container-set input:checked ~ .checkmark { background-color: #ffffff; }

.course-view .course-with-units .course-structure li.accordion-row .checkbox-container-set .checkmark::after { top: 2px; left: 6px; border-style: solid; border-color: #4483cc; }

.course-view .course-with-units .course-structure .accordion-head { display: block; padding: 8px 8px 8px 36px; }

.course-view .course-with-units .course-structure .accordion-head.not-omitted { display: block; padding: 8px 8px 8px 36px; }

.course-view .course-with-units .course-structure .checkbox-container-set { cursor: pointer; display: block; flex: 2; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.course-view .course-with-units .course-structure .checkbox-container-set input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.course-view .course-with-units .course-structure .checkbox-container-set span.disabledCursor { cursor: not-allowed; }

.course-view .course-with-units .course-structure .checkmark { background-color: #eeeeee; height: 18px; width: 18px; left: 0; position: absolute; top: 0; }

.course-view .course-with-units .course-structure .checkbox-container-set:hover input ~ .checkmark { background-color: #cccccc; }

.course-view .course-with-units .course-structure .checkmark::after { content: ''; display: none; position: absolute; }

.course-view .course-with-units .course-structure .checkbox-container-set input:checked ~ .checkmark::after { display: block; }

.course-view .course-with-units .course-structure .checkbox-container-set .checkmark::after { border-width: 0 3px 3px 0; height: 10px; left: 9px; top: 3px; transform: rotate(45deg); width: 3px; }

/* END: views/courses/_school-admin-course-overview.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/performance/_performance.scss */
.view.performance-view { height: 100%; overflow: hidden; }

.view.all-student.performance-view { background-color: #f5f5f5; box-sizing: border-box; display: inline-table; flex-direction: column; overflow: hidden; width: 100%; }

.view.all-student.performance-view .scrollable { height: calc(100vh - 157px); overflow-x: hidden; }

.view.all-student.performance-view .scrollable .assessments-table tbody { border: 1px solid #d7e4ee; }

.view.all-student.performance-view .scrollable .assessments-table tr { background-color: #ecf3f7; }

.view.all-student.performance-view .scrollable .assessments-table tr.alt { background-color: #d7e4ee; }

.view.all-student.performance-view .scrollable th.assessments-table-header { background-color: #2f5bb4; color: #ffffff; margin: 0; padding: 4px 10px; }

.performance-view .legend { padding-right: 25px; padding-top: 20px; text-align: right; }

.performance-view .legend .legend-item { padding-left: 25px; }

.performance-view .pending { background-color: #008391; color: #ffffff; font-size: 1rem; font-weight: bold; margin-top: 10px; padding: 3px 9px; text-transform: uppercase; }

.performance-view .card { background-color: #f5f5f5; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; box-shadow: unset; margin: 0 24px; padding: 0; }

.performance-view .heading-grey { background-color: #8e8e8e; height: 37px; margin: 15px 24px 0; }

.performance-view .performance-row-0 { background-color: #ffffff; }

.performance-view .performance-row-1 { background-color: #f1f1f1; }

.performance-view .attendance-table-wrapper { width: 100%; }

.performance-view .assessments-table { border-collapse: collapse; font-size: 0.8rem; text-align: left; width: 100%; }

.performance-view .assessments-table th.assessments-table-header { background-color: #1f7bc1; color: #ffffff; margin: 0; padding: 4px 10px; }

.performance-view .assessments-table th.score { text-align: center; }

.performance-view .assessments-table th.assessments-row-header { font-weight: normal; margin: 0; padding: 6px 10px; vertical-align: middle; }

.performance-view .assessments-table th.assessments-row-header img { margin-left: 6px; }

.performance-view .assessments-table td { margin: 0; padding: 6px 10px; vertical-align: middle; }

.performance-view .assessments-table td img { margin-left: 6px; }

.performance-view .assessments-table td.score { text-align: center; }

.performance-view .assessments-table td:nth-child(2), .performance-view .assessments-table td:last-child { min-width: 80px; width: 10%; }

.performance-view .assessments-table tr { background-color: #f5f5f5; color: #464a48; font-weight: normal; }

.performance-view .assessments-table tr.bold-text-row { color: #000000; font-weight: bold; }

.performance-view .assessments-table tr.bold-text-row th.assessments-row-header { font-weight: bold; margin: 0; padding: 6px 10px; vertical-align: middle; }

.performance-view .assessments-table tr.bold-text-row th.assessments-row-header img { margin-left: 6px; }

.performance-view .assessments-table a.launch-review { color: #000000; text-decoration: none; }

.performance-view .assessments-table tr.alt { background-color: #ffffff; }

.performance-view .assessments-table tr.weighted { color: #000000; font-weight: bold; }

.performance-view .clazz-performance { color: #000000; cursor: pointer; display: flex; font-size: 1.2rem; font-weight: bold; padding: 6px 0 8px; width: 100%; }

.performance-view .clazz-performance .left-side { text-align: left; width: 80%; }

.performance-view .clazz-performance .left-side h4 { margin: 0; }

.performance-view .clazz-performance .right-side { float: right; font-size: 1.2rem; position: relative; text-align: right; width: 20%; }

.performance-view .clazz-performance .right-side .item-expand-collapse-icon { border-radius: 50%; cursor: pointer; display: inline-block; height: 18px; margin-right: 5px; text-align: center; width: 18px; }

.performance-view .clazz-performance .right-side .item-expand-collapse-icon.collapse-caret { background-color: #d8d8d8; color: #ffffff; }

.performance-view .clazz-performance .right-side .item-expand-collapse-icon.expand-caret { background-color: #fbc02d; color: #ffffff; }

.performance-view .clazz-performance .right-side.weighted { font-weight: bold; }

.performance-view .clazz-performance .right-side.non-weighted { font-weight: normal; }

.performance-view .more-information { background-color: #666666; color: #ffffff; font-size: 0.8rem; padding: 3px 15px; text-align: right; }

.performance-view .more-information:hover { text-decoration: underline; }

.performance-view .scrollable { height: calc(100% - 40px); }

.performance-view .switch-container { display: flex; flex-direction: row; padding-right: 25px; padding-top: 20px; }

.performance-view .left-switch-wrapper { border-right: 1px solid #e0e0e0; padding-right: 15px; }

.performance-view .right-switch-wrappers { display: flex; flex-wrap: wrap; }

.performance-view .switch-containers.left { display: flex; flex-direction: row; float: left; height: calc(100% / 4); padding-right: 0; width: 100%; /* The container */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.performance-view .switch-containers.left .checkbox-container-set { cursor: pointer; display: block; flex: 2; font-size: 1rem; margin-bottom: 12px; margin-left: 15px; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.performance-view .switch-containers.left .checkbox-container-set input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.performance-view .switch-containers.left .checkbox-container-set span.disabledCursor { cursor: not-allowed; }

.performance-view .switch-containers.left .checkmark { background-color: #eeeeee; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.performance-view .switch-containers.left .checkbox-container-set:hover input ~ .checkmark { background-color: #cccccc; }

.performance-view .switch-containers.left .checkbox-container-set input:checked ~ .checkmark { background-color: #fbc02d; }

.performance-view .switch-containers.left .checkmark::after { content: ''; display: none; position: absolute; }

.performance-view .switch-containers.left .checkbox-container-set input:checked ~ .checkmark::after { display: block; }

.performance-view .switch-containers.left .checkbox-container-set .checkmark::after { border: solid #000000; border-width: 0 3px 3px 0; height: 10px; left: 8px; top: 3px; transform: rotate(45deg); width: 3px; }

.performance-view .left-switch-wrapper { margin: -4px 0 0 20px; }

.performance-view .left-switch-wrapper .users-status-wrapper { float: left; width: 57%; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters { color: #1a68a8; display: flex; flex-direction: row; font-size: 0.85rem; padding-right: 4px; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters input[type='checkbox'] { display: none; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters input[type='checkbox'] + label { background-color: #ffffff; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters input[type='checkbox']:checked + label { background-color: #1f7bc1; color: #ffffff; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters label { cursor: pointer; height: 26px; min-width: 9.5em; padding: 4px; text-align: center; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters label.active { background-color: #1f7bc1; color: #ffffff; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters label:first-of-type { border: 1px solid #1a68a8; border-bottom-left-radius: 0.2rem; border-top-left-radius: 0.2rem; margin-left: 3px; }

.performance-view .left-switch-wrapper .users-status-wrapper .users-status-filters label:last-of-type { border: 1px solid #1a68a8; border-bottom-right-radius: 0.2rem; border-left: 0; border-top-right-radius: 0.2rem; }

.performance-view .switch-wrapper { display: flex; height: 20px; margin-left: auto; margin-right: 0; }

.performance-view .single-switch-container { display: flex; margin-left: 10px; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.performance-view .single-switch-container .switch-label { font-weight: bold; margin-right: 5px; }

.performance-view .single-switch-container .switch { display: inline-block; height: 20px; position: relative; width: 85px; }

.performance-view .single-switch-container .switch input { display: none; }

.performance-view .single-switch-container .slider-off { background-color: #ed2024; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.performance-view .single-switch-container .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.performance-view .single-switch-container .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.performance-view .single-switch-container .switch-button { -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-left: 50%; }

.performance-view .single-switch-container .switch-button.active > .slider-on::before { transform: translateX(65px); }

.performance-view .single-switch-container .on, .performance-view .single-switch-container .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; text-transform: uppercase; top: 50%; transform: translate(-50%, -50%); }

.performance-view .single-switch-container .switch-button.active > .slider .on { display: block; }

.performance-view .single-switch-container .slider.round { border-radius: 34px; }

.performance-view .single-switch-container .slider.round::before { border-radius: 50%; }

.performance-view .single-switch-container .switch.score-display-switch { height: 20px; width: 90px; }

.performance-view .single-switch-container .switch.score-display-switch .switch-button.active > .slider-on::before { transform: translateX(70px); }

.performance-view .single-switch-container .switch.score-display-switch .slider-on { background-color: #faa700; }

.performance-view .single-switch-container .switch.score-display-switch .slider-off { background-color: #faa700; }

/* END: views/performance/_performance.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/performance/_parent-performance.scss */
.view.performance-view.parent-performance-view { background-color: #f5f5f5; height: 100%; overflow: hidden; }

/* END: views/performance/_parent-performance.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/performance/_student-performance.scss */
.view.performance-view.student-performance-view { background-color: #f5f5f5; height: 100%; overflow: hidden; }

/* END: views/performance/_student-performance.scss */
/* ========================================================================= */
.view.student-assessment-view { height: 100%; overflow-x: hidden; }

.view.student-assessment-view .float-header { background: #ffffff; padding-bottom: 20px; padding-top: 20px; position: fixed; top: 0; width: calc(100vw - 5%); z-index: 100; }

.view.student-assessment-view .row-full-width-container .assessment-title-container { padding-left: 72px; width: 70%; }

.view.student-assessment-view .retake-button-container { display: flex; flex-direction: column; justify-content: center; margin-left: auto; padding-right: 72px; }

.view.student-assessment-view .retake-button-container .blue-button { left: 0; margin-left: auto; margin-right: 0; margin-top: 0.875em; }

.view.student-assessment-view .retake-button-container .question-filter { text-align: right; }

.student-assessment-view { padding: 20px; }

.student-assessment-view .score-wrapper { float: none; margin: 8% 72px 0; }

.student-assessment-view .score-wrapper .grading-rubric { float: right; }

.student-assessment-view .score-wrapper .grading-rubric a { font-kerning: normal; font-size: 1rem; font-weight: normal; letter-spacing: 0.0175em; line-height: 0.875em; text-transform: none; }

.student-assessment-view .score-wrapper .score { color: #005cb9; float: left; font-weight: bold; }

.student-assessment-view .new-score-container { background-color: rgba(0, 92, 185, 0.1); text-align: center; width: 150px; }

.student-assessment-view .new-score-container button.interactive-button.submit-button { border-top-left-radius: 0; border-top-right-radius: 0; width: 150px; }

.student-assessment-view .new-score { border-left: 1px solid rgba(0, 92, 185, 0.2); border-right: 1px solid rgba(0, 92, 185, 0.2); border-top: 1px solid rgba(0, 92, 185, 0.2); border-top-left-radius: 0.2rem; border-top-right-radius: 0.2rem; color: #005cb9; font-weight: bold; padding: 2px; }

.student-assessment-view .card { box-shadow: none; clear: both; margin: 0; padding-top: 10px; }

.student-assessment-view .card .question-number { font-weight: bold; margin-top: 10px; }

.student-assessment-view .card .assessment-status-indicator { margin-top: 5px; width: 100%; }

.student-assessment-view .card .assessment-status-indicator .assessment-status { color: #005cb9; font-weight: bold; }

.student-assessment-view .card:hover { box-shadow: none; }

.student-assessment-view .student-assessment-title { color: #000000; display: flex; font-family: 'Roboto', sans-serif; font-kerning: normal; font-size: 2.25rem; font-weight: 500; letter-spacing: 0.0175em; line-height: 1em; padding: 0; }

.feedback { background-color: whitesmoke; border: 2px solid gainsboro; margin-bottom: 8px; padding: 10px 20px; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/clazz-performance/_clazz-performance.scss */
.view.clazz-performance-view { background-color: #f5f5f5; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.view.clazz-performance-view .dropdown-disabled { pointer-events: none; }

.view.clazz-performance-view .class-info-dropdown { background-color: #2f5bb4; }

.view.clazz-performance-view .class-info-dropdown .fa-angle-down { color: #ffffff; }

.view.clazz-performance-view .class-info-dropdown span { color: #ffffff; text-align: center; }

.view.clazz-performance-view .take-action-dropdown-menu-component.expanded { overflow: unset; z-index: 100; }

.view.clazz-performance-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown { background-color: #464a48; }

.view.clazz-performance-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown span { color: #cfcfcf; }

.view.clazz-performance-view .take-action-dropdown-menu-component .menu li { list-style: none; }

.view.clazz-performance-view .take-action-dropdown-menu-component.expanded .menu { width: calc(100% + 30px); }

.view.clazz-performance-view .single-switch-container { width: 100%; }

.view.clazz-performance-view .grayedOut { cursor: default; opacity: 0.75; pointer-events: none; }

.view.clazz-performance-view .toggle-switch { align-items: center; display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; height: 100%; justify-content: center; margin-right: 10px; text-align: center; width: 100%; }

.view.clazz-performance-view .switch-label { float: left; font-weight: bold; width: 70%; }

.view.clazz-performance-view .switch-container { display: flex; flex-direction: row; float: right; padding-right: 0; width: 40%; }

.view.clazz-performance-view .left-switch-wrapper { border-right: 1px solid #e0e0e0; padding-right: 15px; }

.view.clazz-performance-view .right-switch-wrapper { display: flex; flex-wrap: wrap; }

.view.clazz-performance-view .switch-container.left { display: flex; flex-direction: row; float: left; height: 60px; padding-right: 0; width: 100%; /* The container */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.view.clazz-performance-view .switch-container.left .checkbox-container-set { cursor: pointer; display: block; flex: 2; font-size: 1rem; margin-bottom: 12px; margin-left: 15px; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.view.clazz-performance-view .switch-container.left .checkbox-container-set input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.view.clazz-performance-view .switch-container.left .checkbox-container-set span.disabledCursor { cursor: not-allowed; }

.view.clazz-performance-view .switch-container.left .checkmark { background-color: #eeeeee; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.view.clazz-performance-view .switch-container.left .checkbox-container-set:hover input ~ .checkmark { background-color: #cccccc; }

.view.clazz-performance-view .switch-container.left .checkbox-container-set input:checked ~ .checkmark { background-color: #fbc02d; }

.view.clazz-performance-view .switch-container.left .checkmark::after { content: ''; display: none; position: absolute; }

.view.clazz-performance-view .switch-container.left .checkbox-container-set input:checked ~ .checkmark::after { display: block; }

.view.clazz-performance-view .switch-container.left .checkbox-container-set .checkmark::after { border: solid #000000; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 3px; }

.view.clazz-performance-view .switch { display: inline-block; height: 20px; position: relative; width: 70px; }

.view.clazz-performance-view .switch input { display: none; }

.view.clazz-performance-view .switch-button { -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox; }

.view.clazz-performance-view .switch-button span { color: #ffffff; }

.view.clazz-performance-view .slider-off { background-color: #2f5bb4; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.view.clazz-performance-view .slider::before { background-color: #ffffff; bottom: 5px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.view.clazz-performance-view .slider-on { background-color: #fbc02d; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.view.clazz-performance-view .switch-button.active > .slider-on::before { transform: translateX(50px); }

.view.clazz-performance-view .on { display: none; }

.view.clazz-performance-view .on, .view.clazz-performance-view .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }

.view.clazz-performance-view input:checked + .slider .on { display: block; }

.view.clazz-performance-view .slider.round { border-radius: 34px; height: 25px; }

.view.clazz-performance-view .slider.round::before { border-radius: 50%; }

.view.clazz-performance-view .switch.score-display-switch { height: 20px; width: 90px; }

.view.clazz-performance-view .switch.score-display-switch .switch-button.active > .slider-on::before { transform: translateX(70px); }

.view.clazz-performance-view .switch.score-display-switch .slider-on { background-color: #faa700; }

.view.clazz-performance-view .switch.score-display-switch .slider-off { background-color: #faa700; }

.view.clazz-performance-view .performance-filter:last-child { border: 0; }

.view.clazz-performance-view .clazz-performance-container ::-webkit-scrollbar-track { background-color: unset; border-radius: unset; }

.view.clazz-performance-view table.clazz-performance-table tr.header th.student-col { background-color: #8e8e8e; font-size: 0.781rem; font-weight: bold; }

.view.clazz-performance-view table.clazz-performance-table tr.header th.overall-score-col { background-color: #8e8e8e; }

.view.clazz-performance-view table.clazz-performance-table tr.header th.lesson-item-header { background-color: #8e8e8e !important; color: #ffffff; }

.view.clazz-performance-view table.clazz-performance-table tr.header th.lesson-item-header .customTitle { color: #ffffff; -webkit-text-decoration-color: #ffffff; text-decoration-color: #ffffff; }

.view.clazz-performance-view table.clazz-performance-table tr.data:nth-child(even) { background-color: #f1f1f1 !important; }

.view.clazz-performance-view table.clazz-performance-table tr.data:nth-child(odd) { background-color: #ffffff !important; }

.view.clazz-performance-view table.clazz-performance-table tr.data:nth-child(even) th { background-color: #f1f1f1 !important; }

.view.clazz-performance-view table.clazz-performance-table .customTitle { color: blue; cursor: pointer; text-decoration: underline; -webkit-text-decoration-color: blue; text-decoration-color: blue; }

.view.clazz-performance-view .view-content-area { height: 100%; overflow-y: scroll; width: 100%; }

.view.clazz-performance-view .left-side { width: 79%; }

.view.clazz-performance-view .right-side { width: 20%; }

.clazz-performance-view .clazz-performance-container { display: flex; flex-direction: column; height: calc(100% - 248px); margin-bottom: 0px; padding: 15px 0 0 15px; width: 100%; }

.clazz-performance-view .clazz-performance-container .clazz-performance-filter-container { display: flex; flex-direction: row; width: 100%; }

.clazz-performance-view .clazz-performance-container ::-webkit-scrollbar { /* stylelint-disable property-no-vendor-prefix */ -webkit-appearance: none; appearance: none; /* stylelint-enable property-no-vendor-prefix */ width: 8px; }

.clazz-performance-view .clazz-performance-container ::-webkit-scrollbar:vertical { width: 12px; }

.clazz-performance-view .clazz-performance-container ::-webkit-scrollbar:horizontal { height: 12px; }

.clazz-performance-view .clazz-performance-container ::-webkit-scrollbar-track { background-color: #f6f6f6f6; border-radius: 8px; }

.clazz-performance-view .clazz-performance-container ::-webkit-scrollbar-thumb { background-color: #c2c2c2; border-radius: 8px; }

.clazz-performance-view .clazz-performance-container ::-webkit-scrollbar-thumb:hover { background-color: #555555; border-radius: 8px; }

.clazz-performance-view .clazz-performance-container:hover ::-webkit-scrollbar-thumb { background-color: #555555; border-radius: 8px; }

.clazz-performance-view .legend-container { display: flex; float: left; margin: 20px 0; width: 59%; }

.clazz-performance-view .legend { background-color: #ffffff; border: 1px solid #e0e0e0; margin-left: 20px; padding-bottom: 10px; padding-right: 25px; padding-top: 10px; }

.clazz-performance-view .legend .legend-item { padding-left: 25px; }

.clazz-performance-view .legend .legend-item .pending { font-size: 0.8rem; margin-right: 0.5em; }

.clazz-performance-view .legend .legend-item svg { padding-right: 0.5em; position: relative; top: 2px; }

.clazz-performance-view .legend .legend-item:nth-child(1) svg path { fill: #4483cc; }

.clazz-performance-view .legend .legend-item:nth-child(2) svg path { fill: darkgray; }

.clazz-performance-view .add-custom-assessment { float: right; }

.clazz-performance-view .add-custom-assessment svg { width: 32px; height: 32px; margin: 20px; }

.clazz-performance-view .clazz-performance-table-control-bar { display: flex; flex-direction: row; float: right; margin: 10px; }

.clazz-performance-view .clazz-performance-table-container { margin-bottom: 20px; overflow-x: scroll; width: 100%; }

.clazz-performance-view .clazz-performance-table-container thead .unit-detail-header { height: 42px; }

.clazz-performance-view .clazz-performance-table-container thead .unit-detail-header th { position: sticky; top: 0; }

.clazz-performance-view .clazz-performance-table-container thead .header th { position: sticky; top: 42px; }

.clazz-performance-view .clazz-performance-table-container .top-left { box-sizing: border-box; left: 0; position: absolute; top: 0; }

.clazz-performance-view .clazz-performance-table { margin-bottom: 15px; }

.clazz-performance-view .clazz-performance-table .unit-detail-header .colspan-header { width: 80px; }

.clazz-performance-view .clazz-performance-table .unit-detail-header .lesson-item-header { width: 80px; }

.clazz-performance-view .clazz-performance-table .unit-detail-header .lesson-item-header .weighted-item-header { width: 100%; }

.clazz-performance-view .clazz-performance-table .unit-detail-header .student-col { width: 200px; z-index: 4; }

.clazz-performance-view .clazz-performance-table .header { background-color: #f6f6f6; }

.clazz-performance-view .clazz-performance-table .header .colspan-header { background-color: #4483cc; color: #ffffff; font-size: 0.781rem; width: 80px; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header { font-size: 0.781rem; font-weight: 400; width: 80px; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header .lessonType { color: #ffffff; font-weight: bold; margin: 0; min-height: 100%; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header .lessonType span { bottom: 0; clear: both; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header.highlighted { background-color: #bed7ff !important; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header .weighted-item-header { align-items: center; width: 100%; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header .weighted-item-header .weighted-header { padding-top: 0.5em; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header .weighted-item-header .weighted-header svg path { fill: #4483cc; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header.bold-text { color: #000000; font-weight: bold; }

.clazz-performance-view .clazz-performance-table .header .lesson-item-header.normal-text { color: #464a48; font-weight: normal; }

.clazz-performance-view .clazz-performance-table .header .student-col { background-color: #8e8e8e; color: #ffffff; font-size: 1rem; font-weight: 300; height: 50px; width: 200px; z-index: 4; }

.clazz-performance-view .clazz-performance-table .sub-header { font-size: 0.8125rem; font-weight: 300; }

.clazz-performance-view .clazz-performance-table .sub-header .assessment { background-color: #d5e3f4; }

.clazz-performance-view .clazz-performance-table .sub-header .overall { background-color: #f6f6f6; }

.clazz-performance-view .clazz-performance-table .data .student-col { text-align: left; vertical-align: middle; }

.clazz-performance-view .clazz-performance-table .data .score-text:hover { cursor: pointer; text-decoration: underline; }

.clazz-performance-view .clazz-performance-table .data .overall-score-text { position: relative; z-index: 2; }

.clazz-performance-view .clazz-performance-table .data .overall-score-text .overall-score-container { display: flex; flex-direction: row; height: 100%; width: 100%; }

.clazz-performance-view .clazz-performance-table .data .overall-score-text .overall-score-container .weighted-icon-container { align-items: center; border-right: 1px solid #e6e6e6; display: flex; justify-content: center; width: 50%; }

.clazz-performance-view .clazz-performance-table .data .overall-score-text .overall-score-container .weighted-icon-container svg path { fill: #4483cc; }

.clazz-performance-view .clazz-performance-table .data .overall-score-text .overall-score-container .overall-score-value { align-items: center; display: flex; justify-content: center; width: 50%; }

.clazz-performance-view .clazz-performance-table .data .overall-score-text .overall-score-container div.weighted { color: #4483cc; }

.clazz-performance-view .clazz-performance-table .data .overall-score-text .overall-score-value.full-width { width: 100%; }

.clazz-performance-view .clazz-performance-table tr.data:nth-child(odd) .assessment-col { background-color: #f5f8fc; }

.clazz-performance-view .clazz-performance-table tr.data:nth-child(even) .assessment-col { background-color: #eef4fa; }

.clazz-performance-view table { border-bottom: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; table-layout: fixed; width: 100%; }

.clazz-performance-view th, .clazz-performance-view td { border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6; height: 40px; }

.clazz-performance-view tbody .sticky-col, .clazz-performance-view .overall-score-col { box-shadow: 1px 0 0 #e6e6e6; }

.clazz-performance-view td.item-score { box-sizing: border-box; color: #666666; height: 100%; position: relative; }

.clazz-performance-view td.item-score.highlighted { height: 100%; left: 0; margin-top: 0; top: 0; width: 100%; }

.clazz-performance-view td.item-score.highlighted span { margin: auto; }

.clazz-performance-view td.item-score .pending { box-sizing: border-box; cursor: pointer; display: flex; font-size: 0.8rem; height: 100%; justify-content: center; left: 0; line-height: 40px; margin-top: 0; top: 0; width: 100%; }

.clazz-performance-view td.item-score svg path { fill: #a0a0a0; }

.clazz-performance-view .item-score.bold-text { color: #000000; font-weight: bold; }

.clazz-performance-view .item-score.normal-text { color: #464a48; font-weight: normal; }

.clazz-performance-view td.weighted { color: #4483cc !important; font-weight: bold; }

.clazz-performance-view th.student-col { font-weight: normal; padding-left: 1em; position: relative; z-index: 3; }

.clazz-performance-view th.student-col.sticky-col { padding-left: 0; }

.clazz-performance-view th.overall-score-col { background-color: #8e8e8e; color: #ffffff; position: relative; z-index: 3; }

.clazz-performance-view th.lesson-item-header { position: relative; z-index: 1; }

.clazz-performance-view tr:nth-child(odd) { background: #ffffff; }

.clazz-performance-view tr:nth-child(odd) th { background: #ffffff; }

.clazz-performance-view tr:nth-child(even) { background: whitesmoke; }

.clazz-performance-view tr:nth-child(even) th { background: whitesmoke; }

.clazz-performance-view td { text-align: center; vertical-align: middle; }

.clazz-performance-view table { -webkit-backface-visibility: hidden; backface-visibility: hidden; perspective: 1000; }

.clazz-performance-view tr { -webkit-backface-visibility: hidden; backface-visibility: hidden; }

.clazz-performance-view .student-col, .clazz-performance-view .sticky-col, .clazz-performance-view .overall-score-col { transform: translateZ(0); }

.view.gradable-activity-view { background-color: #f5f5f5; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-header { background-color: #ffffff; height: 130px; padding: 0 144px; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-header .gradable-activity-heading { color: #000000; font-size: 2rem; font-weight: bold; padding: 20px 0; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-header .gradable-activity-sub-heading { font-weight: 400; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; /* The container */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .inputTextBox { width: 100%; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body input::-moz-placeholder { color: #d3d3d3; font-size: 0.875rem; font-style: italic; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body input::placeholder { color: #d3d3d3; font-size: 0.875rem; font-style: italic; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body textarea::-moz-placeholder { color: #d3d3d3; font-size: 0.875rem; font-style: italic; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body textarea::placeholder { color: #d3d3d3; font-size: 0.875rem; font-style: italic; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set { padding: 24px 0; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set label { font-size: 1.125rem; font-weight: 700; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .button-set-container { height: 35px; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set { cursor: pointer; display: block; font-size: 1.375rem; margin-bottom: 12px; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set span.disabledCursor { cursor: not-allowed; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkmark { background-color: #eeeeee; height: 25px; left: 0; margin: 24px 0; position: absolute; top: 0; width: 25px; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set:hover input ~ .checkmark { background-color: #cccccc; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set input:checked ~ .checkmark { background-color: #325db1; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkmark::after { content: ''; display: none; position: absolute; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set input:checked ~ .checkmark::after { display: block; }

.view.gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set .checkmark::after { border: solid #ffffff; border-width: 0 3px 3px 0; height: 10px; left: 9px; top: 5px; transform: rotate(45deg); width: 5px; }

.view.gradable-activity-view .failure-message { border: 1px solid #d9534f; color: #d9534f; padding: 4px; margin-bottom: 20px; }

.view.edit-gradable-activity-view { background-color: #f5f5f5; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-header { background-color: #ffffff; height: 130px; padding: 0 144px; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-header .gradable-activity-heading { color: #000000; font-size: 2em; font-weight: bold; padding: 20px 0; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-header .gradable-activity-sub-heading { font-weight: 400; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; /* The container */ /* Hide the browser's default checkbox */ /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .inputTextBox { width: 100%; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body input::-moz-placeholder { color: #d3d3d3; font-size: 14px; font-style: italic; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body input::placeholder { color: #d3d3d3; font-size: 14px; font-style: italic; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body textarea::-moz-placeholder { color: #d3d3d3; font-size: 14px; font-style: italic; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body textarea::placeholder { color: #d3d3d3; font-size: 14px; font-style: italic; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set { padding: 24px 0; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set label { font-size: 18px; font-weight: 700; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .button-set-container { height: 35px; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set { cursor: pointer; display: block; font-size: 22px; margin-bottom: 12px; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set input { cursor: pointer; height: 0; opacity: 0; position: absolute; width: 0; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set span.disabledCursor { cursor: not-allowed; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkmark { background-color: #eeeeee; height: 25px; left: 0; margin: 24px 0; position: absolute; top: 0; width: 25px; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set:hover input ~ .checkmark { background-color: #cccccc; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set input:checked ~ .checkmark { background-color: #325db1; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkmark::after { content: ''; display: none; position: absolute; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set input:checked ~ .checkmark::after { display: block; }

.view.edit-gradable-activity-view .gradable-activity-content .gradable-activity-body .checkbox-container-set .checkmark::after { border: solid white; border-width: 0 3px 3px 0; height: 10px; left: 9px; top: 5px; transform: rotate(45deg); width: 5px; }

.student-all-clazzes-performance-view { background-color: #f5f5f5; }

.student-all-clazzes-performance-view .scrollable { height: calc(100% - 156px); }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/progress/_progress.scss */
.checkbox-container { cursor: pointer; margin-left: 6px; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.checkbox-container .checkbox-text { font-style: italic; margin-right: 20px; }

.disable-check { background-color: #aeaeae; }

.centerd-checkbox { margin-top: 100%; }

.checkbox-container input { cursor: pointer; opacity: 0; position: absolute; }

/* Create a custom checkbox */
.checkmark { border: 1px solid #b8b6b6; border-radius: 5px; height: 20px; left: 0; position: absolute; top: 5px; width: 20px; }

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark-white { background-color: #25408d; }

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark::after { content: ''; display: none; position: absolute; }

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark::after { display: block; }

/* Style the checkmark/indicator */
.checkbox-container .checkmark-white::after { border: solid #ffffff; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

.checkbox-container .checkmark-black::after { border: solid #2183d5; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

.margin-top { margin-top: 9px; }

.view.progress-view { height: 100%; overflow-x: hidden; }

.progress-view { border-radius: 3px; font-size: 1rem; height: calc(100% - 40px); overflow: hidden; /* Hide the browser's default checkbox */ /* On mouse-over, add a grey background color */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.progress-view .title, .progress-view .user { font-size: 1.8rem; font-weight: 500; }

.progress-view button { background-color: transparent; border: 2px solid #2183d5; border-radius: 16px; border-style: none; bottom: 10px; color: #2183d5; font-size: 1rem; height: 30px; left: 10px; margin: 20px 45px 0 0; outline: none; outline-color: transparent; position: relative; width: 130px; }

.progress-view button:hover { background-color: #2183d5; color: #ffffff; }

.progress-view .fa { margin-left: -20px; }

.progress-view .mark-completion-checkbox { height: 22px; margin-left: 6px; width: 22px; }

.progress-view .undo-label { color: blue; cursor: pointer; font-size: 0.9rem; text-decoration: underline; }

.progress-view .btn-step-forward { transition: background-color, 0.3s; box-sizing: border-box; color: #0275d8; fill: #0275d8; height: 66px; min-width: 63px; text-align: center; display: flex; flex: 0 0 auto; flex-direction: column; justify-content: center; align-items: center; }

.progress-view .btn-step-forward:hover { background-color: #e6ebff; }

.progress-view .btn-step-forward svg { height: 30px; width: 30px; color: #0275d8; fill: #0275d8; }

.progress-view .loading { display: flex; justify-content: center; overflow: hidden; width: 100%; }

.progress-view .progress-head { display: flex; height: 40px; }

.progress-view .progress-head .averageProgressContainer { float: left; width: 90%; }

.progress-view .view-content-area { padding: 10px; }

.progress-view .average-progress { border-radius: 3px; height: 20px; padding-left: 20px; padding-top: 16px; width: 100%; }

.progress-view .average-progress .percent { font-size: 1.2rem; }

.progress-view .submit-btn.blue-new-button { margin-right: 20px; padding: 0; }

.progress-view .submit-btn { background-color: #2183d5; border: 0; border-radius: unset; color: #ffffff; font-size: 0.9rem; height: 25px; width: 80px; }

.progress-view .scrollable { height: calc(100vh - 231px); padding-left: 20px; padding-right: 20px; }

.progress-view table > tbody > tr td > div > .status-unknown-text { color: #000000; }

.progress-view table > tbody > tr td > div > .status-danger-text { color: red; }

.progress-view table > tbody > tr td > div > .status-warning-text { color: #676b69; }

.progress-view table > tbody > tr td > div > .status-safe-text { color: #66ce00; }

.progress-view table { border: 1px solid #eaeaea; width: 100%; }

.progress-view table thead th:nth-child(1), .progress-view table thead th:nth-child(2) { box-sizing: border-box; padding-left: 30px; }

.progress-view table thead th { background-color: #8e8e8e; color: #ffffff; height: 40px; text-align: left; }

.progress-view table thead th i { padding-left: 25px; position: relative; top: 1px; }

.progress-view table thead th.percent, .progress-view table thead th.student { cursor: default; }

.progress-view table tbody tr .student { padding-right: 0.5em; text-align: left; }

.progress-view table tbody tr .student .fa-check { color: #5cb85c; }

.progress-view table tbody tr .student .fa-warning { color: #d9534f; }

.progress-view table tbody tr .student .fa-chevron-right { float: right; font-size: 0.75rem; padding-left: 10px; padding-top: 4px; }

.progress-view table tbody tr .class-details { align-items: center; display: flex; flex-direction: row; height: 66px; text-align: left; }

.progress-view table tbody tr .class-details .component { height: auto; }

.progress-view table tbody tr .class-details > div { box-sizing: border-box; padding: 0 8px; }

.progress-view table tbody tr.progress-row-0 { background-color: #ffffff; }

.progress-view table tbody tr.progress-row-1 { background-color: #f1f1f1; }

.progress-view .checkbox-container-set { cursor: pointer; position: relative; width: 18px; height: 18px; display: inline-block; top: 5px; left: 1px; flex: 2; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; user-select: none; /* Create a custom checkbox */ }

.progress-view .checkbox-container-set .checkmark { background-color: #eeeeee; height: 18px; width: 18px; left: 0; position: absolute; top: 0; box-sizing: border-box; }

.progress-view .checkbox-container-set input { height: 0; opacity: 0; position: absolute; width: 0; }

.progress-view .checkbox-container-set span.disabledCursor { cursor: not-allowed; }

.progress-view .checkbox-container-set:hover input:not(:disabled) ~ .checkmark { background-color: #cccccc; }

.progress-view .checkbox-container-set input ~ .checkmark { background-color: #FFFFFF; }

.progress-view .checkmark::after { content: ''; display: none; position: absolute; }

.progress-view .checkbox-container-set input:checked ~ .checkmark::after { display: block; }

.progress-view .checkbox-container-set input:checked ~ .checkmark::after { border-color: #4483cc; }

.progress-view .checkbox-container-set input:disabled ~ .checkmark::after { border-color: #adb5bd; }

.progress-view .checkbox-container-set .checkmark::after { border-width: 0 3px 3px 0; height: 10px; top: 0px; left: 5px; border-style: solid; transform: rotate(45deg); width: 3px; }

.progress-view .panel-buttons-group { display: flex; flex-direction: row; justify-content: flex-end; vertical-align: middle; }

.progress-view .panel-buttons-group button { padding: 3px; margin: 0; margin-top: 20px; margin-right: 24px; background-color: #115aa6; border-radius: 4px; font-weight: 500; font-size: 0.875rem; line-height: 1.75; width: 75px; letter-spacing: 0.02857em; text-transform: uppercase; transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; color: #ffffff; }

.progress-view .panel-buttons-group button:hover { background-color: #2183d5; color: #ffffff; }

.progress-view .panel-buttons-group button:disabled, .progress-view .panel-buttons-group button[disabled] { background-color: #cccccc; color: #666666; transition: none; }

.progress-view .panel-buttons-group button:disabled:hover, .progress-view .panel-buttons-group button[disabled]:hover { background-color: #cccccc; }

.progress-view.student-progress-view .scrollable { height: calc(100vh - 160px); }

.progress-view.sidenav-closed { transform: translate3d(-240px, 0, 0); width: calc(100%); }

.chart-container { clear: left; }

@media (min-width: 300px) { .chart-container > div { float: left; margin: 10px 0 21px 12px; min-width: 250px; width: calc(50% - 18px); } }

.footer-divider { clear: both; display: inline-block; margin-top: 16px; width: 100%; }

.footer-link { margin: 10px; padding-bottom: 25px; }

/* END: views/progress/_progress.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/progress/_parent-progress.scss */
.view.progress-view.parent-progress-view { background-color: #f5f5f5; font-kerning: normal; height: 100%; letter-spacing: 0.0175em; overflow: hidden; }

.parent-progress-view .lessons-list { border-bottom: 1px solid #aeaeae; height: 300px; overflow-y: scroll; text-align: left; }

.parent-progress-view .lessons-wrapper { background-color: #f5f5f5; margin-right: 50px; padding: 2px; text-align: right; }

.parent-progress-view tr.lessons-row { background-color: #ffffff; border: 1px solid #aeaeae; box-sizing: border-box; color: #333333; font-family: 'Roboto', sans-serif; font-size: 0.875rem; font-weight: 400; height: 2.5em; line-height: 2.5em; }

.parent-progress-view tr.lessons-row input[type='radio'] { outline: none; outline-color: transparent; }

.parent-progress-view tr.lessons-row input[type='radio']::before { background-color: #ffffff; border: 2px solid #333333; border-radius: 15px; content: ''; display: inline-block; height: 15px; left: -1px; position: relative; top: -2px; visibility: visible; width: 15px; }

.parent-progress-view tr.lessons-row.omit-lesson-row { background-color: #d4e2f3; }

.parent-progress-view tr.lessons-row.Complete { color: #999999; }

.parent-progress-view tr.lessons-row.Complete input { pointer-events: none; nav-index: -1; }

.parent-progress-view tr.lessons-row.Complete input[type='radio']::before { border: 2px solid #999999; }

.parent-progress-view tr.lessons-row.Complete td.Complete { color: #5cb85c; font-weight: 700; padding-right: 2.5em; text-align: right; }

.parent-progress-view tr.lessons-row td.Skipped { color: #5e7997; font-weight: 700; padding-right: 2.5em; text-align: right; }

.parent-progress-view tr.lessons-row td.Submitted { color: #008391; font-weight: 700; padding-right: 2.5em; text-align: right; }

.parent-progress-view tr.lessons-row.current { background-color: #d4e2f3; color: #333333; font-weight: 500; }

.parent-progress-view tr.lessons-row input[type='radio']:checked::after { border: 2px solid #d4e2f3; border-radius: 15px; content: ''; display: inline-block; height: 11px; left: 1px; position: relative; top: -22px; visibility: visible; width: 11px; }

.parent-progress-view tr.lessons-row input[type='radio']:checked::before { background-color: #4483cc; border: 2px solid #333333; }

.parent-progress-view .lessons-table { border-collapse: collapse; width: calc(100% - 2px); }

.parent-progress-view .lessons-table-header { background-color: #4483cc; box-sizing: border-box; color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 700; height: 2.5em; line-height: 2.5em; text-align: center; text-transform: uppercase; }

.parent-progress-view button { background-color: transparent; border: 2px solid #2183d5; border-radius: 16px; border-style: none; bottom: 10px; color: #2183d5; font-size: 1rem; height: 30px; left: 10px; margin: 20px 45px 0 0; outline: none; outline-color: transparent; position: relative; width: 130px; }

.parent-progress-view button:hover { background-color: #2183d5; color: #ffffff; }

.parent-progress-view button.disabled, .parent-progress-view button.sending { background-color: #2183d5; color: whitesmoke; cursor: default; }

/* END: views/progress/_parent-progress.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/progress/_student-progress.scss */
.view.progress-view.student-progress-view { background-color: #f5f5f5; height: 100%; overflow: hidden; }

.view.student-progress-view .scrollable { height: calc(100vh - 246px); }

/* END: views/progress/_student-progress.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/progress/_clazz-progress.scss */
.view.progress-view.clazz-progress-view { background-color: #f5f5f5; font-kerning: normal; height: 100%; letter-spacing: 0.0175em; overflow: hidden; }

.view.progress-view.clazz-progress-view .button-container { display: block; }

.view.progress-view.clazz-progress-view .class-info-dropdown { background-color: #2f5bb4; }

.view.progress-view.clazz-progress-view .class-info-dropdown .fa-angle-down { color: #ffffff; }

.view.progress-view.clazz-progress-view .class-info-dropdown span { color: #ffffff; }

.view.progress-view.clazz-progress-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown { background-color: #464a48; }

.view.progress-view.clazz-progress-view .take-action-dropdown-menu-component.expanded .take-action-menu .class-info-dropdown span { color: #cfcfcf; }

.clazz-progress-view .scrollable { height: calc(100vh - (36px + 70px + 44px + 40px + 86px + 60px + 48px)); }

.clazz-progress-view .progress-head { display: flex; height: 40px; }

.clazz-progress-view .progress-head .averageProgressContainer { float: left; width: 90%; }

.clazz-progress-view .lessons-list { border-bottom: 1px solid #aeaeae; height: 300px; overflow-y: scroll; text-align: left; }

.clazz-progress-view .mark-as-complete { margin-right: 28px; margin-top: 12px; }

.clazz-progress-view .checkmark { border: 1px solid #b8b6b6; border-radius: 5px; height: 20px; position: absolute; width: 20px; }

.clazz-progress-view .lessons-wrapper { background-color: #f5f5f5; margin-right: 50px; padding: 2px; text-align: right; }

.clazz-progress-view tr.lessons-row { background-color: #ffffff; border: 1px solid #aeaeae; box-sizing: border-box; color: #333333; font-family: 'Roboto', sans-serif; font-size: 0.875rem; font-weight: 400; height: 2.5em; line-height: 2.5em; }

.clazz-progress-view tr.lessons-row input[type='radio'] { outline: none; outline-color: transparent; }

.clazz-progress-view tr.lessons-row input[type='radio']::before { background-color: #ffffff; border: 2px solid #333333; border-radius: 15px; content: ''; display: inline-block; height: 15px; left: -1px; position: relative; top: -2px; visibility: visible; width: 15px; }

.clazz-progress-view tr.lessons-row.omit-lesson-row { background-color: #d4e2f3; }

.clazz-progress-view tr.lessons-row.Complete { color: #999999; }

.clazz-progress-view tr.lessons-row.Complete input { pointer-events: none; nav-index: -1; }

.clazz-progress-view tr.lessons-row.Complete input[type='radio']::before { border: 2px solid #999999; }

.clazz-progress-view tr.lessons-row.Complete td.Complete { color: #5cb85c; font-weight: 700; padding-right: 2.5em; text-align: right; }

.clazz-progress-view tr.lessons-row td.Skipped { color: #5e7997; font-weight: 700; padding-right: 2.5em; text-align: right; }

.clazz-progress-view tr.lessons-row td.Submitted { color: #008391; font-weight: 700; padding-right: 2.5em; text-align: right; }

.clazz-progress-view tr.lessons-row td.Omitted { color: #C2571A; font-weight: 700; padding-right: 2.5em; text-align: right; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.clazz-progress-view tr.lessons-row.current { background-color: #d4e2f3; color: #333333; font-weight: 500; }

.clazz-progress-view tr.lessons-row input[type='radio']:checked::after { border: 2px solid #d4e2f3; border-radius: 15px; content: ''; display: inline-block; height: 11px; left: 1px; position: relative; top: -22px; visibility: visible; width: 11px; }

.clazz-progress-view tr.lessons-row input[type='radio']:checked::before { background-color: #4483cc; border: 2px solid #333333; }

.clazz-progress-view .lessons-table { border-collapse: collapse; width: calc(100% - 2px); }

.clazz-progress-view .lessons-table td { padding: 0 8px; }

.clazz-progress-view .lessons-table-header { background-color: #4483cc; box-sizing: border-box; color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 700; height: 2.5em; line-height: 2.5em; text-align: center; text-transform: uppercase; }

.clazz-progress-view button.sending { background-color: #2183d5; color: whitesmoke; cursor: default; }

.clazz-progress-view button.disabled { color: #636c72; background-color: transparent; cursor: default; }

.clazz-progress-view button.disabled:hover { color: #636c72; background-color: transparent; }

.clazz-progress-view .margin-top { margin-left: 24px; }

.clazz-progress-view .margin-left { margin-left: 20px; }

/* END: views/progress/_clazz-progress.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/progress/_student-all-clazzes-progress.scss */
.view.progress-view.student-all-clazzes-progress-view { background-color: #f5f5f5; font-kerning: normal; height: 100%; letter-spacing: 0.0175em; overflow: hidden; }

.view.progress-view.student-all-clazzes-progress-view .button-container { display: block; }

.view.progress-view.student-all-clazzes-progress-view .table-head { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; }

.view.progress-view.student-all-clazzes-progress-view td.student { padding: 0 8px; }

.student-all-clazzes-progress-view .scrollable { height: calc(100vh - (47px + 44px + 86px + 86px + 60px + 48px)); }

.student-all-clazzes-progress-view .lessons-list { border-bottom: 1px solid #aeaeae; height: 300px; overflow-y: scroll; text-align: left; }

.student-all-clazzes-progress-view .lessons-wrapper { background-color: #f5f5f5; margin-right: 50px; padding: 2px; text-align: right; }

.student-all-clazzes-progress-view table thead th { background-color: #8e8e8e; }

.student-all-clazzes-progress-view tr.lessons-row { background-color: #ffffff; border: 1px solid #aeaeae; box-sizing: border-box; color: #333333; font-family: 'Roboto', sans-serif; font-size: 0.875rem; font-weight: 400; height: 2.5em; line-height: 2.5em; }

.student-all-clazzes-progress-view tr.lessons-row input[type='radio'] { outline: none; outline-color: transparent; }

.student-all-clazzes-progress-view tr.lessons-row input[type='radio']::before { background-color: #ffffff; border: 2px solid #333333; border-radius: 15px; content: ''; display: inline-block; height: 15px; left: -1px; position: relative; top: -2px; visibility: visible; width: 15px; }

.student-all-clazzes-progress-view tr.lessons-row td { padding: 0 8px; box-sizing: border-box; }

.student-all-clazzes-progress-view tr.lessons-row.omit-lesson-row { background-color: #d4e2f3; }

.student-all-clazzes-progress-view tr.lessons-row.Complete { color: #999999; }

.student-all-clazzes-progress-view tr.lessons-row.Complete input { pointer-events: none; nav-index: -1; }

.student-all-clazzes-progress-view tr.lessons-row.Complete input[type='radio']::before { border: 2px solid #999999; }

.student-all-clazzes-progress-view tr.lessons-row.Complete td.Complete { color: #5cb85c; font-weight: 700; padding-right: 2.5em; text-align: right; }

.student-all-clazzes-progress-view tr.lessons-row.Omitted { -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.student-all-clazzes-progress-view tr.lessons-row td.Skipped { color: #6a93b2; font-weight: 700; padding-right: 2.5em; text-align: right; }

.student-all-clazzes-progress-view tr.lessons-row td.Omitted { color: #C2571A; font-weight: 700; padding-right: 2.5em; text-align: right; }

.student-all-clazzes-progress-view tr.lessons-row td.Submitted { color: #008391; font-weight: 700; padding-right: 2.5em; text-align: right; }

.student-all-clazzes-progress-view tr.lessons-row.current { background-color: #d4e2f3; color: #333333; font-weight: 500; }

.student-all-clazzes-progress-view tr.lessons-row input[type='radio']:checked::after { border: 2px solid #d4e2f3; border-radius: 15px; content: ''; display: inline-block; height: 11px; left: 1px; position: relative; top: -22px; visibility: visible; width: 11px; }

.student-all-clazzes-progress-view tr.lessons-row input[type='radio']:checked::before { background-color: #4483cc; border: 2px solid #333333; }

.student-all-clazzes-progress-view .lessons-table { border-collapse: collapse; width: calc(100% - 2px); }

.student-all-clazzes-progress-view .lessons-table-header { background-color: #4483cc; box-sizing: border-box; color: #ffffff; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 700; height: 2.5em; line-height: 2.5em; text-align: center; text-transform: uppercase; }

.student-all-clazzes-progress-view button { background-color: transparent; border: 2px solid #2183d5; border-radius: 16px; border-style: none; bottom: 10px; color: #2183d5; font-size: 1rem; height: 30px; left: 10px; margin: 20px 45px 0 0; outline: none; outline-color: transparent; position: relative; width: 130px; }

.student-all-clazzes-progress-view button:hover { background-color: #2183d5; color: #ffffff; }

.student-all-clazzes-progress-view button.sending { background-color: #2183d5; color: whitesmoke; cursor: default; }

.student-all-clazzes-progress-view button.disabled { color: #636c72; background-color: transparent; cursor: default; }

.student-all-clazzes-progress-view button.disabled:hover { color: #636c72; background-color: transparent; }

.student-all-clazzes-progress-view .left-side { margin-left: 0; }

.student-all-clazzes-progress-view .right-side.progress-screen { margin-top: 5px; }

/* END: views/progress/_student-all-clazzes-progress.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/lesson/_lesson.scss */
.lesson-view .lesson-content .card.tab-use svg path:first-of-type { border: 1px solid red; }

.connected-menu-component .menu.speech-menu .speech-controls .toggle-switch { align-items: stretch; display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; height: 100%; margin-left: 10px; margin-right: 10px; width: 100%; }

.connected-menu-component .menu.speech-menu .speech-controls .switch-title { flex: 0 0 140px; font: bold 16pt Roboto, serif; margin: 0; padding: 0; padding-bottom: 14px; }

.connected-menu-component .menu.speech-menu .speech-controls .switch-container { padding-right: 12px; text-align: right; width: 95px; }

.connected-menu-component .menu.speech-menu .speech-controls .switch { display: inline-block; height: 23px; position: relative; top: 2px; width: 60px; }

.connected-menu-component .menu.speech-menu .speech-controls .switch input { display: none; }

.connected-menu-component .menu.speech-menu .speech-controls .slider-off { background-color: #ed202400; border: 1px solid; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.connected-menu-component .menu.speech-menu .speech-controls .slider::before.slider-off { background-color: #000000; border: 1px solid; bottom: 2px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.connected-menu-component .menu.speech-menu .speech-controls .slider::before { background-color: #ffffff; bottom: 4px; content: ''; height: 15px; left: -8px; position: absolute; transition: 0.2s; width: 15px; }

.connected-menu-component .menu.speech-menu .speech-controls .slider.slider-off::before { background-color: #000000; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.connected-menu-component .menu.speech-menu .speech-controls .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.connected-menu-component .menu.speech-menu .speech-controls input:checked + .slider-on::before { transform: translateX(50px); }

.connected-menu-component .menu.speech-menu .speech-controls .language-selector select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fefaef; border: 0; border-radius: 0; border-top: 1px solid #dcddde; box-sizing: border-box; color: #444444; display: block; font: bold 16pt Roboto, serif; line-height: 1.3; margin: 0; max-width: 100%; padding-bottom: 10px; padding-left: 14px; padding-top: 10px; width: 100%; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls { border-top: 1px solid #dcddde; display: flex; flex-direction: row; margin: 0; padding: 0; padding-bottom: 14px; padding-top: 14px; width: 100%; height: 67px; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control { align-items: center; display: flex; font-size: 24pt; height: 24px; justify-content: center; width: 24px; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.step-backward.disabled i, .connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.step-forward.disabled i { color: #d3d3d3; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.step-backward { margin-left: 14px; margin-top: 6px; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.play, .connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.pause { margin-left: 14px; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.play i.fa, .connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.pause i.fa { left: 4px; position: relative; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.play.circle, .connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.pause.circle { background: #fac23c; border-radius: 50%; padding: 7px; width: 38px; height: 38px; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.pause { font-size: 17pt; margin-left: 14px; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.pause i.fa { left: 1px; position: relative; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.step-forward { margin-left: 14px; margin-top: 6px; }

.connected-menu-component .menu.speech-menu .speech-controls .audio-controls .control.rewind { margin-left: auto; margin-right: 14px; margin-top: 6px; }

.dropdown-menu-component .menu.speech-menu { min-width: 110px; width: 100px; }

.dropdown-menu-component .menu.speech-menu .speech-controls { display: flex; flex-direction: row; flex-wrap: wrap; height: 70px; width: 100%; }

.dropdown-menu-component .menu.speech-menu .speech-controls .select-text { height: 28px; width: 28px; }

.dropdown-menu-component .menu.speech-menu .speech-controls .select-text i { color: #39477f; font-size: 1.5rem; padding-left: 3px; padding-top: 0; }

.dropdown-menu-component .menu.speech-menu .speech-controls .select-text.selected { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(1, 36, 194, 0.75); }

.dropdown-menu-component .menu.speech-menu .speech-controls .select-text:hover { background-color: #eaf2e8; }

.dropdown-menu-component .menu.speech-menu .speech-controls .play { height: 28px; text-align: center; width: 28px; }

.dropdown-menu-component .menu.speech-menu .speech-controls .play i { color: #39477f; font-size: 1.5rem; }

.dropdown-menu-component .menu.speech-menu .speech-controls .play:hover { background-color: #eaf2e8; }

.dropdown-menu-component .menu.speech-menu .speech-controls .pause { height: 28px; text-align: center; width: 28px; }

.dropdown-menu-component .menu.speech-menu .speech-controls .pause i { color: #39477f; font-size: 1.5rem; }

.dropdown-menu-component .menu.speech-menu .speech-controls .pause:hover { background-color: #eaf2e8; }

.dropdown-menu-component .menu.speech-menu .speech-controls .rewind { height: 28px; text-align: center; width: 28px; }

.dropdown-menu-component .menu.speech-menu .speech-controls .rewind i { color: #39477f; font-size: 1.5rem; }

.dropdown-menu-component .menu.speech-menu .speech-controls .rewind:hover { background-color: #eaf2e8; }

.dropdown-menu-component .menu.speech-menu .speech-controls .settings { height: 28px; text-align: center; width: 28px; }

.dropdown-menu-component .menu.speech-menu .speech-controls .settings i { color: #39477f; font-size: 1.5rem; }

.dropdown-menu-component .menu.speech-menu .speech-controls .settings:hover { background-color: #eaf2e8; }

.dropdown-menu-component .menu.speech-menu .speech-controls .language-selector select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #ffffff; border: 1px solid #aaaaaa; border-radius: 0; box-shadow: 0 1px 0 1px rgba(0, 0, 0, 0.04); box-sizing: border-box; color: #444444; display: block; font-family: sans-serif; font-weight: 700; line-height: 1.3; margin: 0; max-width: 100%; padding: 0.6em 1.4em 0.5em 0.8em; width: 100%; }

.dropdown-menu-component .menu.speech-menu .speech-controls .audio-load-progress-bar { background-color: #a9a9a9; height: 10px; left: 0; position: absolute; top: 37px; width: 100%; z-index: 999; }

.dropdown-menu-component .menu.speech-menu .speech-controls .audio-load-progress-bar .percentage-loaded { background-color: #0bd40b; height: 100%; transition: 0.4s; width: 0%; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .select-text i { color: #d3d3d3; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .select-text:hover { background-color: #ffffff; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .play i { color: #d3d3d3; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .play:hover { background-color: #ffffff; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .pause { height: 28px; text-align: center; width: 28px; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .pause i { color: #d3d3d3; font-size: 1.5rem; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .pause:hover { background-color: #ffffff; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .rewind i { color: #d3d3d3; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .rewind:hover { background-color: #ffffff; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .settings i { color: #d3d3d3; }

.dropdown-menu-component .menu.speech-menu .speech-controls.disabled .settings:hover { background-color: #ffffff; }

.lesson-view { background-color: whitesmoke; color: #000000; display: flex; flex-direction: column; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.625em; overflow: hidden; /* ------------------------------------------------------------------------- */ /* BEGIN: Reader */ /* readables */ /* sentences */ /* .activated is set when the user clicks or if hoverToPlay is enabled, when */ /* the user hovers over the sentence. activated is removed when the sentence */ /* starts playing */ /* .loading occurs when a sentence audio and speech marks are loading. This */ /* can occur as soon as a user activates the sentence, but it can also occur */ /* when the reader is preloading a sentence */ /* words */ /* wip */ /* END: Reader */ /* ========================================================================= */ }

.lesson-view .loadingFadeInOut { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; }

.lesson-view .loadingFadeInOut.yellow-black { -webkit-animation: fadeInOut-yellow-black 1s linear forwards; animation: fadeInOut-yellow-black 1s linear forwards; }

.lesson-view .loadingFadeInOut.black-yellow { -webkit-animation: fadeInOut-black-yellow 1s linear forwards; animation: fadeInOut-black-yellow 1s linear forwards; }

.lesson-view .loadingFadeInOut.blue-black { -webkit-animation: fadeInOut-blue-black 1s linear forwards; animation: fadeInOut-blue-black 1s linear forwards; }

.lesson-view .highlight.yellow-black { background-color: #ffea3c; color: #000000 !important; }

.lesson-view .highlight.yellow-black * { color: #000000 !important; }

.lesson-view .highlight.black-yellow { background-color: #000000; color: #ffea3c !important; }

.lesson-view .highlight.black-yellow * { color: #ffea3c !important; }

.lesson-view .highlight.blue-black { background-color: #6fd9f8; color: #235cb0 !important; }

.lesson-view .highlight.blue-black * { color: #235cb0 !important; }

.lesson-view .loading-pointer { cursor: none; }

.lesson-view #loading-pointer-container { display: none; height: 0; left: 50%; position: absolute; top: 50%; width: 0; z-index: 9999; }

.lesson-view #loading-pointer-container.loading-pointer { display: block; }

.lesson-view #loading-pointer-container .loader-circles { left: -100px; pointer-events: none; top: 0; }

.lesson-view #loading-pointer-container .loader-circles .circle:nth-child(1) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 2s; animation-duration: 2s; height: 8px; width: 8px; }

.lesson-view #loading-pointer-container .loader-circles .circle:nth-child(2) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 1s; animation-duration: 1s; height: 16px; width: 16px; }

.lesson-view #loading-pointer-container .loader-circles .circle:nth-child(3) { -webkit-animation: rotate-circle linear infinite; animation: rotate-circle linear infinite; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; height: 24px; width: 24px; }

.lesson-view .lesson-content { cursor: default; height: 100%; overflow-y: scroll; z-index: 5; }

.lesson-view .lesson-content .word-callout { text-decoration: underline; }

.lesson-view .lesson-content .card.tab-learn { border-top-color: #548300; }

.lesson-view .lesson-content .card.tab-learn svg { fill: #548300; }

.lesson-view .lesson-content .card.tab-use { border-top-color: #75368d; }

.lesson-view .lesson-content .card.tab-use svg { fill: #75368d; }

.lesson-view .lesson-content .card.tab-show { border-top-color: #d64c1d; }

.lesson-view .lesson-content .card.tab-show svg { fill: #d64c1d; }

.lesson-view .lesson-content .card.project-type-lesson-section { border-top-color: #d64c1d !important; }

.lesson-view .lesson-content .card.project-type-lesson-section svg { fill: #d64c1d !important; }

.lesson-view .lesson-content .lesson-tab-learn { color: #548300; }

.lesson-view .lesson-content .lesson-tab-use { color: #75368d; }

.lesson-view .lesson-content .lesson-tab-show { color: #d64c1d; }

.lesson-view .lesson-content .project-type-lesson-section-title { color: #d64c1d !important; }

.lesson-view .lesson-content .weighted-icon { padding-right: 0.4em; }

.lesson-view .lesson-content .weighted-icon svg path { fill: #005db9; }

.lesson-view .lesson-content .content-title { align-items: center; display: flex; width: 60%; }

.lesson-view .lesson-content .content-title .clickable.properties { padding-bottom: 2px; padding-left: 8px; }

.lesson-view .lesson-content .attempts-allowed-label { align-items: center; display: flex; margin-left: auto; margin-right: 5px; text-transform: none; }

.lesson-view .lesson-content ul:not(.lrn_toolbar_left) li { list-style-type: disc; }

.lesson-view .lesson-content .iframe-container { height: 100%; width: 100%; }

.lesson-view .lesson-content .iframe-card { height: 100%; width: 100%; }

.lesson-view .lesson-content .content-title-container { display: flex; width: 100%; }

.lesson-view .lesson-content .edit-gear-container { align-items: center; display: flex; }

.lesson-view .lesson-content .default-text > p { color: #505050; font-style: italic; }

.lesson-view .lesson-header { align-items: center; background-color: #ffffff; display: flex; flex-direction: row; height: 80px; justify-content: space-between; padding: 4px; padding-right: 10px; z-index: 7; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.lesson-view .lesson-header span.lesson-title { color: #2f5bb4; display: flex; font-family: 'Roboto', sans-serif; font-kerning: normal; font-size: 2.25rem; font-weight: 500; letter-spacing: 0.0175em; line-height: 1.1em; max-height: 2.25em; overflow: hidden; padding-left: calc(24px - 5px); }

.lesson-view .lesson-header span.lesson-title.project-lesson-title { color: #d64c1d; }

.lesson-view .lesson-header span.lesson-title span:nth-child(1) { width: 75%; }

.lesson-view .lesson-header span.lesson-title span:nth-child(2) { width: 75%; }

.lesson-view .lesson-header .lesson-properties, .lesson-view .lesson-header .external-resources { margin-right: 5px; }

.lesson-view .lesson-header .lesson-properties i { font-size: 1.5rem; }

.lesson-view .lesson-header .external-resources svg { width: 20px; }

.lesson-view .lesson-header .lesson-features { display: flex; flex-direction: row; z-index: 7; }

.lesson-view .lesson-header .lesson-features .menu-opener { cursor: pointer; height: 35px; width: 35px; }

.lesson-view .lesson-header .lesson-features .menu-opener > .icon { height: 36px; width: 36px; }

.lesson-view .lesson-header .lesson-features .menu-opener > .icon.lesson-objectives-icon svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.lesson-assignments-icon svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.lesson-books-materials-icon svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.standards-icon svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.texthelp-icon svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.more-options-icon svg { fill: #2f5bb4; }

.lesson-view .lesson-header .lesson-features .menu-opener > .icon.lesson-objectives-icon.disabled svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.lesson-assignments-icon.disabled svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.lesson-books-materials-icon.disabled svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.standards-icon.disabled svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.texthelp-icon.disabled svg, .lesson-view .lesson-header .lesson-features .menu-opener > .icon.more-options-icon.disabled svg { fill: #eceeef; }

.lesson-view .lesson-header .lesson-features .menu-opener > .icon .texthelp-icon { display: none; }

.lesson-view .lesson-header .lesson-features .menu { font-size: 0.75rem; }

.lesson-view .lesson-header .lesson-features .menu > ul { list-style-type: disc; margin-left: 16px; padding: 0; padding-left: 14px; }

.lesson-view .lesson-header .lesson-features .menu > ul li { font-size: 14pt; list-style-type: none; }

.lesson-view .lesson-header .lesson-features .menu > ul li::before { content: '•'; font-size: 1em; left: 0; position: absolute; }

.lesson-view .lesson-header .lesson-features .menu > ul .li-overflow-wrap { overflow-wrap: break-word; }

.lesson-view .lesson-header .lesson-features .menu > ul.print-options { list-style-type: none; }

.lesson-view .lesson-header .lesson-features .menu > ul.print-options li { cursor: pointer; height: 32px; list-style-type: none; }

.lesson-view .lesson-header .lesson-features .menu > ul.print-options li:hover { background-color: rgba(0, 128, 0, 0.1); }

.lesson-view .lesson-header .lesson-features .menu > ul.print-options li span { line-height: 32px; }

.lesson-view .lesson-header .lesson-features .link-setting-section { border-right: 1px solid #d8d8d8; }

.lesson-view .lesson-header .lesson-features connected-menu .menu-opener { position: relative; z-index: 10; }

.lesson-view .lesson-header .lesson-features connected-menu .menu-opener .selected-lesson-feature-icon { height: 53px; left: -8px; position: absolute; top: -5px; width: 53px; }

.lesson-view .lesson-header .lesson-features connected-menu .menu-opener .icon { position: absolute; }

.lesson-view .lesson-header .lesson-features connected-menu .menu { top: 40px; z-index: 0; }

.lesson-view .lesson-header .teacher-notes-toggle, .lesson-view .lesson-header .edit-preview-toggle { border-right: 1px solid #d8d8d8; display: flex; flex-direction: column; font-family: 'Roboto', sans-serif; margin-right: 10px; padding-right: 10px; text-align: center; width: 120px; }

.lesson-view .lesson-header .toggle-label { font-size: 0.8rem; }

.lesson-view .lesson-header .switch { display: inline-block; height: 25px; position: relative; width: 75px; }

.lesson-view .lesson-header .switch input { display: none; }

.lesson-view .lesson-header .slider-off { background-color: #ed2024; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.lesson-view .lesson-header .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 20px; left: 3px; position: absolute; transition: 0.2s; width: 20px; }

.lesson-view .lesson-header .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.lesson-view .lesson-header .switch-button.active > .slider-on::before { transform: translateX(50px); }

.lesson-view .lesson-header .on, .lesson-view .lesson-header .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }

.lesson-view .lesson-header input:checked + .slider .on { display: block; }

.lesson-view .lesson-header .slider.round { border-radius: 34px; }

.lesson-view .lesson-header .slider.round::before { border-radius: 50%; }

.lesson-view .lesson-header .switch.edit-preview-switch { width: 100px; }

.lesson-view .lesson-header .edit-preview-slider { background-color: #355caa; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.lesson-view .lesson-header .switch-button.active > .edit-preview-slider::before { transform: translateX(75px); }

.lesson-view .lesson-header .preview-mode-label { float: left; margin-left: 10px; }

.lesson-view .lesson-header .edit-mode-label { float: right; margin-right: 10px; }

.lesson-view .lesson-header .active-mode { font-weight: 800; }

.lesson-view .lesson-header .lesson-header-button { background-color: #00a2a2; color: #ffffff; font-size: 0.8rem; padding: 0 3px; text-align: center; width: 135px; }

.lesson-view .lesson-header .lesson-header-button:hover { background-color: #008080; }

.lesson-view span.card-title-icon { align-items: center; display: flex; padding-right: 0.55em; }

.lesson-view .section-journal { background-color: #0091ea; }

.lesson-view .section-journal span, .lesson-view .section-journal a, .lesson-view .section-journal p { color: #ffffff; line-height: 24px; }

.lesson-view .section-journal p { margin-left: -35px; }

.lesson-view .section-journal .section-journal-header { margin-left: -35px; }

.lesson-view .section-essential-question-test { background-color: #8bc34a; }

.lesson-view .section-essential-question-test span, .lesson-view .section-essential-question-test a, .lesson-view .section-essential-question-test p { color: #ffffff; line-height: 24px; }

.lesson-view .section-essential-question-test p { margin-left: -35px; }

.lesson-view .section-essential-question-test .section-essential-question-test-header { margin-left: -35px; }

.lesson-view .section-more-to-explore { background-color: #ccefff; }

.lesson-view .section-more-to-explore span, .lesson-view .section-more-to-explore a, .lesson-view .section-more-to-explore p { line-height: 24px; }

.lesson-view .section-more-to-explore p { margin-left: -35px; }

.lesson-view .section-more-to-explore .section-more-to-explore-header { margin-left: -35px; }

.lesson-view .section-more-to-explore .section-more-to-explore-header .content-title { color: #8c4b9d; }

.lesson-view .section-more-to-explore .section-4-header .content-title { color: #225eac; }

.lesson-view div.section-teaching-notes { background-color: rgba(150, 23, 46, 0.1); color: #000000; padding: 0; }

.lesson-view div.section-teaching-notes .section-teaching-notes-header { background-color: #96172e; color: #ffffff; font-weight: bold; margin-top: 0; padding-bottom: 4px; padding-top: 4px; }

.lesson-view div.section-teaching-notes div { margin-left: 72px; margin-right: 72px; }

.lesson-view div.section-teaching-notes .teaching-notes-title { margin-left: 72px; width: calc(100% - 155px); }

.lesson-view div.section-ellsupport-notes { background-color: #f7f8f0; color: #000000; padding: 0; }

.lesson-view div.section-ellsupport-notes .section-ellsupport-notes-header { background-color: #548300; color: #ffffff; font-weight: bold; margin-top: 0; padding-bottom: 4px; padding-top: 4px; }

.lesson-view div.section-ellsupport-notes div { margin-left: 72px; margin-right: 72px; }

.lesson-view div.section-ellsupport-notes .ellsupport-notes-title { margin-left: 72px; width: calc(100% - 155px); }

.lesson-view .project-type-lesson-section-header { color: #d64c1d !important; }

.lesson-view .project-type-lesson-section-header svg { fill: #d64c1d !important; }

.lesson-view .project-type-lesson-section-header .content-title { color: #d64c1d !important; }

.lesson-view div.grading-button > .icon { border-left: 1px solid #d8d8d8; width: 26px; }

.lesson-view div.grading-button > .icon svg { height: 26px; position: relative; top: 3px; width: 26px; }

.lesson-view .badge { background-color: #ff0000; border-radius: 39px; color: #ffffff; font-size: 0.7rem; font-weight: bold; padding: 0 8px; position: absolute; right: 4px; top: 40px; vertical-align: middle; }

.lesson-view div.card.section-answer-key h3 span.card-title-icon svg path:first-of-type, .lesson-view div.card.section-answer-key h3 span.card-title-icon svg path:first-of-type, .lesson-view div.section-answer-key .section-answer-key-header svg path:first-of-type, .lesson-view div.section-answer-key .section-answer-key-header span.answer-key-icon div.section-teaching-notes .section-teaching-notes-header svg path:first-of-type, .lesson-view div.card.section-teaching-notes h3.section-teaching-notes-header span svg path:first-of-type, .lesson-view div.section-teaching-notes .section-teaching-notes-header span.ellsupport-notes-icon svg path:first-of-type, .lesson-view div.section-ellsupport-notes .section-ellsupport-notes-header svg path:first-of-type, .lesson-view div.card.section-ellsupport-notes h3.section-ellsupport-notes-header span svg path:first-of-type, .lesson-view div.section-ellsupport-notes .section-ellsupport-notes-header span.ellsupport-notes-icon svg path:first-of-type { fill: #ffffff; }

.lesson-view div.card.section-answer-key h3 span.card-title-icon span, .lesson-view div.card.section-answer-key h3 span.card-title-icon span, .lesson-view div.section-answer-key .section-answer-key-header span, .lesson-view div.section-answer-key .section-answer-key-header span.answer-key-icon div.section-teaching-notes .section-teaching-notes-header span, .lesson-view div.card.section-teaching-notes h3.section-teaching-notes-header span span, .lesson-view div.section-teaching-notes .section-teaching-notes-header span.ellsupport-notes-icon span, .lesson-view div.section-ellsupport-notes .section-ellsupport-notes-header span, .lesson-view div.card.section-ellsupport-notes h3.section-ellsupport-notes-header span span, .lesson-view div.section-ellsupport-notes .section-ellsupport-notes-header span.ellsupport-notes-icon span { color: #ffffff; }

.lesson-view div.section-answer-key { background-color: rgba(105, 0, 77, 0.1); color: #000000; padding: 0; }

.lesson-view div.section-answer-key .section-answer-key-header { background-color: #69004d; color: #ffffff; font-weight: bold; margin-top: 0; padding-bottom: 4px; padding-top: 4px; }

.lesson-view div.section-answer-key div { margin-left: 72px; margin-right: 72px; }

.lesson-view div.section-answer-key .answer-keys-title { margin-left: 72px; width: calc(100% - 155px); }

.lesson-view .supplemental-link-icon { position: relative; }

.lesson-view div.section-project-description { border-top: 12px solid #d64c1d; }

.lesson-view div.section-project-description .content-title { color: #d64c1d; font-weight: bold; }

.lesson-view div.section-standards { border-top: 12px solid #007f8a; }

.lesson-view div.section-standards .content-title { font-weight: bold; }

.lesson-view .project-icon svg { fill: #d64c1e; }

.lesson-view table td p { margin: 0; padding: 4px; }

.lesson-view .readable { border-radius: 3px; box-sizing: border-box; }

.lesson-view .readable.mouseenter.debug { background-color: rgba(135, 222, 255, 0.25); }

.lesson-view .readable .readable.mouseenter.debug { background-color: rgba(135, 222, 255, 0.5); }

.lesson-view .readable .readable .readable.mouseenter.debug { background-color: #87deff; }

.lesson-view .readable sentence.debug { border: 4px dashed orange; box-sizing: border-box; }

.lesson-view .readable sentence.mouseenter { background-color: rgba(255, 255, 4, 0.1); }

.lesson-view .readable sentence[data-bound-visible='false'] { display: none; }

.lesson-view .readable sentence.activated.loading { -webkit-animation: shine 2s infinite; animation: shine 2s infinite; /*animation: sentenceActivatedFadeInOut 2s infinite;*/ background-color: rgba(255, 255, 4, 0.5); background-image: linear-gradient(to right, transparent 33%, rgba(255, 0, 0, 0.25) 50%, transparent 66%); background-size: 300% 100%; }

.lesson-view .readable sentence.loading { -webkit-animation: shine 2s infinite; animation: shine 2s infinite; /*animation: sentenceLoadingFadeInOut 2s infinite;*/ background-color: rgba(0, 255, 0, 0.05); background-image: linear-gradient(to right, transparent 33%, rgba(255, 238, 0, 0.25) 50%, transparent 66%); background-size: 300% 100%; }

.lesson-view .readable sentence.loaded { -webkit-animation: none; animation: none; background-color: rgba(0, 255, 0, 0.05); color: inherit; }

.lesson-view .readable sentence.playing { background-color: #ffee00; color: #000000; }

.lesson-view .readable sentence word.debug { outline: 1px dotted lime; }

.lesson-view .readable sentence word.mouseenter { background-color: rgba(255, 255, 4, 0.2); }

.lesson-view .readable sentence wordgroup.debug { outline: 1px dotted lime; }

.lesson-view .readable sentence wordgroup.mouseenter.debug { background-color: rgba(255, 255, 4, 0.5); }

.lesson-view .readable sentence word.markable.mark { background-color: #0d00ff; color: #ffffff; }

.lesson-view .readable sentence wordgroup.markable.mark { background-color: #0d00ff; color: #ffffff; }

.lesson-view .readable.playing { background-color: rgba(255, 0, 0, 0.05); box-sizing: border-box; }

.lesson-view .readable .mouseover { background-color: rgba(229, 228, 18, 0.5); }

.lesson-view .readable .mouseout { -webkit-animation: fadeOut 1s; animation: fadeOut 1s; background-color: orange; color: #ffffff; }

.lesson-view .sentenceActivatedFadeInOut { -webkit-animation-name: sentenceActivatedFadeInOut; animation-name: sentenceActivatedFadeInOut; }

.lesson-view .sentenceActivatedLoadingFadeInOut { -webkit-animation-name: sentenceActivatedLoadingFadeInOut; animation-name: sentenceActivatedLoadingFadeInOut; }

.lesson-view .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; }

@-webkit-keyframes fadeInOut-yellow-black { 0% { background: rgba(255, 235, 0, 0.1); }
  25% { background: rgba(255, 235, 0, 0.3); }
  50% { background: rgba(255, 235, 0, 0.4); }
  75% { background: rgba(255, 235, 0, 0.3); }
  100% { background: rgba(255, 235, 0, 0.2); } }

@keyframes fadeInOut-yellow-black { 0% { background: rgba(255, 235, 0, 0.1); }
  25% { background: rgba(255, 235, 0, 0.3); }
  50% { background: rgba(255, 235, 0, 0.4); }
  75% { background: rgba(255, 235, 0, 0.3); }
  100% { background: rgba(255, 235, 0, 0.2); } }

@-webkit-keyframes fadeInOut-black-yellow { 0% { background: rgba(0, 0, 0, 0.1); }
  25% { background: rgba(0, 0, 0, 0.3); }
  50% { background: rgba(0, 0, 0, 0.4); }
  75% { background: rgba(0, 0, 0, 0.3); }
  100% { background: rgba(0, 0, 0, 0.2); } }

@keyframes fadeInOut-black-yellow { 0% { background: rgba(0, 0, 0, 0.1); }
  25% { background: rgba(0, 0, 0, 0.3); }
  50% { background: rgba(0, 0, 0, 0.4); }
  75% { background: rgba(0, 0, 0, 0.3); }
  100% { background: rgba(0, 0, 0, 0.2); } }

@-webkit-keyframes fadeInOut-blue-black { 0% { background: rgba(0, 91, 182, 0.1); }
  25% { background: rgba(0, 91, 182, 0.3); }
  50% { background: rgba(0, 91, 182, 0.4); }
  75% { background: rgba(0, 91, 182, 0.3); }
  100% { background: rgba(0, 91, 182, 0.2); } }

@keyframes fadeInOut-blue-black { 0% { background: rgba(0, 91, 182, 0.1); }
  25% { background: rgba(0, 91, 182, 0.3); }
  50% { background: rgba(0, 91, 182, 0.4); }
  75% { background: rgba(0, 91, 182, 0.3); }
  100% { background: rgba(0, 91, 182, 0.2); } }

@-webkit-keyframes shine { 0% { background-position: right; }
  /*100% { background-position: left; it's the default value, no need to define it }*/ }

@keyframes shine { 0% { background-position: right; }
  /*100% { background-position: left; it's the default value, no need to define it }*/ }

@-webkit-keyframes sentenceActivatedFadeInOut { 0% { background-color: rgba(255, 38, 0, 0.5); }
  50% { background-color: rgba(255, 136, 0, 0.1); }
  100% { background-color: rgba(255, 136, 0, 0.4); } }

@keyframes sentenceActivatedFadeInOut { 0% { background-color: rgba(255, 38, 0, 0.5); }
  50% { background-color: rgba(255, 136, 0, 0.1); }
  100% { background-color: rgba(255, 136, 0, 0.4); } }

@-webkit-keyframes sentenceLoadingFadeInOut { 0% { background-color: rgba(255, 196, 0, 0.1); }
  50% { background-color: rgba(255, 196, 0, 0.1); }
  100% { background-color: rgba(255, 196, 0, 0.1); } }

@keyframes sentenceLoadingFadeInOut { 0% { background-color: rgba(255, 196, 0, 0.1); }
  50% { background-color: rgba(255, 196, 0, 0.1); }
  100% { background-color: rgba(255, 196, 0, 0.1); } }

@-webkit-keyframes sentenceActivatedLoadingFadeInOut { 0% { background-color: rgba(255, 38, 0, 0.5); }
  50% { background-color: rgba(255, 136, 0, 0.1); }
  100% { background-color: rgba(255, 136, 0, 0.4); } }

@keyframes sentenceActivatedLoadingFadeInOut { 0% { background-color: rgba(255, 38, 0, 0.5); }
  50% { background-color: rgba(255, 136, 0, 0.1); }
  100% { background-color: rgba(255, 136, 0, 0.4); } }

@-webkit-keyframes fadeOut { from { background-color: orange; }
  to { background-color: orange; } }

@keyframes fadeOut { from { background-color: orange; }
  to { background-color: orange; } }

/* END: views/lesson/_lesson.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/lesson/_lti-lesson.scss */
.view.lti-lesson-view { overflow: hidden; }

.lti-lesson-view { border-color: #ff0000; border-style: dotted; border-width: 4px; background-color: #115aa6; }

/* END: views/lesson/_lti-lesson.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/lesson/_content-editor-lesson-edit.scss */
.lesson-editor-view #new-card { border-top: 12px solid #999999; color: #999999; }

.lesson-editor-view #new-card p.new-card-creator { color: #999999; float: left; }

.lesson-editor-view #new-card p.new-card-creator .card-type-label { margin-right: 15px; }

.lesson-editor-view #new-card p.new-card-creator .tab-type-label { margin-right: 10px; }

.lesson-editor-view #new-card p.new-card-creator .card-type-combo, .lesson-editor-view #new-card p.new-card-creator .tab-type-combo { width: 250px; }

.lesson-editor-view #new-card .create-card-button { background-color: #40ad48; border: 0; color: #ffffff; font-size: 1rem; font-weight: bold; margin-top: 15px; padding: 5px 10px; text-transform: uppercase; }

.lesson-editor-view #new-card .create-card-button i { margin-right: 5px; }

.lesson-editor-view h3.section-teaching-notes { display: block; }

.lesson-editor-view h3.section-ellsupport-notes { display: block; }

.lesson-editor-view .lesson-error { position: absolute; left: 50%; transform: translate(-50%, 0); background-color: #ffffff; border: 2px solid red; border-radius: 0.2rem; margin-top: 4px; padding: 10px; position: absolute; width: calc(50%); z-index: 8; }

.lesson-editor-view .lesson-error span.tag { color: red; font-weight: bold; }

.lesson-editor-view .lesson-error span.message { color: #292b2c; }

.lesson-editor-view .no-transformation-btn { text-transform: none; }

.lesson-editor-view .question-section { align-items: center; padding: 5px 0; }

.lesson-editor-view .question-section .question-code-section { align-items: center; display: flex; padding: 5px 0; }

.lesson-editor-view .question-section .question-code-section .question-code-input { width: 400px; }

.lesson-editor-view .question-section .question-code-section .question-code-input:disabled { color: #000000; }

.lesson-editor-view .question-section .question-code-section .add-question-section { align-items: center; display: flex; }

.lesson-editor-view .question-section .drag-icon { cursor: move; height: 22px; margin-right: 5px; }

.lesson-editor-view .question-section .drag-icon > svg { fill: #000000 !important; }

.lesson-editor-view .question-section .trash-icon-btn { background-color: inherit; }

.lesson-editor-view .add-question-button { margin-top: 20px; }

.editor-status-bar { background-color: #eef1f3; color: #ffffff; display: flex; font-weight: bold; padding-left: 24px; padding-right: 12px; text-transform: uppercase; }

.editor-status-bar .status-modified { background-color: #f0ad4e; padding: 1px 8px; line-height: 2.1em; }

.editor-status-bar .status-published { background-color: #5cb85c; padding: 1px 8px; line-height: 2.1em; }

.editor-status-bar .status-unpublished { background-color: #999999; padding: 1px 8px; line-height: 2.1em; }

.editor-status-bar .save-button { color: #24408e; cursor: pointer; font-size: 1rem; margin-left: auto; margin-right: 0; line-height: 2.1em; }

.editor-status-bar .no-transformation-btn { text-transform: none; }

.editor-status-bar .caret-icon { margin-right: 4px; }

/* END: views/lesson/_content-editor-lesson-edit.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/homes/_content-editor-home.scss */
.view.home-view.content-editor-home-view { height: 100%; overflow: hidden; }

.view.home-view.content-editor-home-view .btn-new-lesson { float: right; }

.view.home-view.content-editor-home-view .search-controls { display: flex; flex-direction: row; }

.view.home-view.content-editor-home-view .search-controls .search-bar { border-radius: 2px; margin-left: 14px; padding: 10px; width: 50%; }

.view.home-view.content-editor-home-view .search-controls .search-bar .message { color: #3c4043; padding-bottom: 8px; text-shadow: 0 1px 1px #ffffff; }

.view.home-view.content-editor-home-view .search-controls .search-bar span.calvert-btn { cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; -moz-user-select: none; user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ }

.view.home-view.content-editor-home-view .search-controls .search-bar input[type='text'].search { border: 1px solid #cccccc; padding: 4px; width: 80%; }

.view.home-view.content-editor-home-view .search-controls .button-container { display: flex; height: unset; padding: 10px 24px; width: 50%; }

.view.home-view.content-editor-home-view .search-controls .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.view.home-view.content-editor-home-view .search-controls .button-container .calvert-btn-dark-gray { height: 35px; }

.view.home-view.content-editor-home-view .search-controls .button-container .pull-right { margin-left: auto; margin-right: 0; }

.view.home-view.content-editor-home-view .search-results { margin-left: 24px; margin-right: 24px; }

.view.home-view.content-editor-home-view .search-results-header button { color: #ffffff; }

.view.home-view.content-editor-home-view .search-results-header .sort-button { background: none; border: 0; }

.view.home-view.content-editor-home-view .search-results-header .sort-row { display: flex; }

.view.home-view.content-editor-home-view .search-results-header .sort-row .col-title { margin-right: 10px; width: 30%; }

.view.home-view.content-editor-home-view .search-results-header .sort-row .col-alignment { margin-right: 10px; width: 25%; }

.view.home-view.content-editor-home-view .search-results-header .sort-row .col-code { margin-right: 10px; width: 15%; }

.view.home-view.content-editor-home-view .search-results-header .sort-row .col-owner { width: 30%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row { display: flex; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-title { width: 30%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-alignment { width: 25%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-code { width: 15%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-owner { width: 30%; }

.view.home-view.content-editor-home-view .search-results-header .sort-row { background-color: #8e8e8e; color: #ffffff; font-size: 1.2rem; font-weight: 500; letter-spacing: 1px; margin: 0; padding: 6px 10px; text-transform: uppercase; }

.view.home-view.content-editor-home-view .search-results-header .filter-row { background-color: #ffffff; padding-bottom: 6px; padding-top: 6px; }

.view.home-view.content-editor-home-view .search-results-header .filter-row * { box-sizing: border-box; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-title { width: 30%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-alignment { width: 25%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-code { width: 15%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .col-owner { width: 30%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row input { width: 100%; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .searchable-combo { color: #000000; font-family: sans-serif; font-size: 100%; height: 0; overflow: visible; position: relative; z-index: 999; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .searchable-combo ul { background: rgba(255, 255, 255, 0.95); border: 1px #bfbfbf solid; border-radius: 4px; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.35); max-height: 200px; overflow: scroll; padding: 4px; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .searchable-combo ul li { padding: 4px; }

.view.home-view.content-editor-home-view .search-results-header .filter-row .searchable-combo ul li:hover { background-color: #d3d3d3; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.view.home-view.content-editor-home-view .scrollable { box-sizing: border-box; height: calc(100vh - 240px); }

.view.home-view.content-editor-home-view .scrollable table { border-collapse: collapse; width: 100%; }

.view.home-view.content-editor-home-view .scrollable table colgroup col.col-title { width: 30%; }

.view.home-view.content-editor-home-view .scrollable table colgroup col.col-alignment { width: 25%; }

.view.home-view.content-editor-home-view .scrollable table colgroup col.col-code { width: 16%; }

.view.home-view.content-editor-home-view .scrollable table colgroup col.col-owner { width: 24%; }

.view.home-view.content-editor-home-view .scrollable table colgroup col.col-edit { width: 5%; }

.view.home-view.content-editor-home-view .scrollable table colgroup col.col-edit i { color: #000000; }

.view.home-view.content-editor-home-view .scrollable table tr:nth-child(even) { background-color: #ffffff; }

.view.home-view.content-editor-home-view .scrollable table tr:nth-child(odd) { background-color: #f1f1f1; }

.view.home-view.content-editor-home-view .scrollable table tr { width: 100%; }

.view.home-view.content-editor-home-view .scrollable table tr td.col-title { padding-left: 8px; }

.view.home-view.content-editor-home-view .scrollable table tr td.col-code { padding-left: 8px; }

.view.home-view.content-editor-home-view .scrollable table tr td.col-owner { padding-left: 4px; }

.view.home-view.content-editor-home-view .scrollable table tr td { padding-bottom: 4px; padding-top: 4px; }

.view.home-view.content-editor-home-view .scrollable table tr td i { color: #000000; }

/* END: views/homes/_content-editor-home.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/lesson/_assessments-pending-grade.scss */
.view.assessments-pending-grade-view .header-content { width: auto; }

.view.assessments-pending-grade-view .header-content .assessment-count { background-color: red; border-radius: 10px; color: #ffffff; font-size: 0.7rem; font-weight: bold; padding: 3px 6px; vertical-align: middle; }

.view.assessments-pending-grade-view .view-content-area { background-color: whitesmoke; border-top: 1px solid gainsboro; }

.view.assessments-pending-grade-view .assessments-pending-grade-header { background-color: #8e8e8e; color: #ffffff; text-transform: uppercase; }

.view.assessments-pending-grade-view table.dataTable { border: 1px solid gainsboro; border-radius: 8px; border-spacing: 0; margin-top: 20px; width: 100%; }

.view.assessments-pending-grade-view table.dataTable th { border-bottom: 2px solid gainsboro; padding: 15px 10px; text-align: left; }

.view.assessments-pending-grade-view table.dataTable td { padding: 10px; }

.view.assessments-pending-grade-view table.dataTable tbody tr { background-color: #ffffff; }

.view.assessments-pending-grade-view table.dataTable tbody tr.alt { background-color: whitesmoke; }

.view.assessments-pending-grade-view table.dataTable tr.filter-row { background-color: whitesmoke; border-top: 1px solid #e0e0e0; font-size: 0.9rem; padding: 8px 10px; text-align: left; }

.view.assessments-pending-grade-view table.dataTable tr.filter-row input, .view.assessments-pending-grade-view table.dataTable tr.filter-row select { font-size: 1rem; padding: 0 5px 2px; width: calc(100% - 20px); }

.view.assessments-pending-grade-view table.dataTable tr.filter-row input:focus { background-color: #eff5fb; border: 1px solid #c1c1c1; outline: none; }

/* END: views/lesson/_assessments-pending-grade.scss */
/* ========================================================================= */
.view.create-lesson-view { overflow: hidden; padding: 10px; }

.course-item { padding: 5px; }

.view-lesson-content-area { height: calc(100% - 40px); }

.create-lesson-container { border: 2px solid #26b69e; height: calc(100% - 130px); margin-top: 10px; padding: 30px; }

.view.reuse-lesson-view { overflow: hidden; padding: 10px; }

.view.reuse-lesson-view .course-item { padding: 5px; }

.view.reuse-lesson-view .scrollable { height: calc(100% - 40px); }

.view.reuse-lesson-view .reuse-lesson-container { border: 2px solid #dea027; height: calc(100% - 130px); margin-top: 10px; padding: 30px; }

.view.copy-lesson-view { overflow: hidden; padding: 10px; }

.view.copy-lesson-view .course-item { padding: 5px; }

.view.copy-lesson-view .scrollable { height: calc(100% - 40px); }

.view.copy-lesson-view .copy-lesson-container { border: 2px solid #b44385; height: calc(100% - 130px); margin-top: 10px; padding: 30px; }

.property-row { display: flex; margin-bottom: 10px; }

.property-row .property-label { width: 250px; }

.property-row .property-input { width: 200px; }

.button-row { bottom: 10px; position: absolute; width: calc(100% - 80px); }

.large-bottom-button { border-radius: 5px; padding: 5px 0; text-align: center; text-transform: uppercase; width: 100%; }

.large-bottom-button.disabled { background-color: #c7c7c7; border-color: #c7c7c7; cursor: not-allowed; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/users/user-selector/_user-selector.scss */
.user-selector-view.tile { overflow: scroll; }

.user-selector-view.list { overflow: hidden; }

.user-selector-view .layout-selector { width: 100%; text-align: right; padding: 8px; font-size: 1.3em; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.user-selector-view .layout-selector .toggle-label { padding-top: 0; margin-top: 0; top: -2px; position: relative; font-size: .75em; }

.user-selector-view .layout-selector i { cursor: pointer; }

.user-selector-view .tile-layout { align-items: center; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; }

.user-selector-view .list-layout { display: flex; flex-direction: column; }

.user-selector-view .list-layout .search-results-header button { color: #ffffff; }

.user-selector-view .list-layout .search-results-header .sort-button { border: none; background: none; }

.user-selector-view .list-layout .search-results-header .sort-row { max-height: 40px; }

.user-selector-view .list-layout .search-results-header .sort-row, .user-selector-view .list-layout .search-results-header .filter-row { display: flex; }

.user-selector-view .list-layout .search-results-header .sort-row .col-login-name, .user-selector-view .list-layout .search-results-header .filter-row .col-login-name { width: 25%; padding: 0 10px; }

.user-selector-view .list-layout .search-results-header .sort-row .col-first-name, .user-selector-view .list-layout .search-results-header .filter-row .col-first-name { width: 20%; padding: 0 10px; }

.user-selector-view .list-layout .search-results-header .sort-row .col-last-name, .user-selector-view .list-layout .search-results-header .filter-row .col-last-name { width: 20%; padding: 0 10px; }

.user-selector-view .list-layout .search-results-header .sort-row .col-institution, .user-selector-view .list-layout .search-results-header .filter-row .col-institution { width: 35%; padding: 0 10px; }

.user-selector-view .list-layout .search-results-header .sort-row { padding: 6px 0; color: #ffffff; margin: 0; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-size: 1.2rem; background-color: #8e8e8e; }

.user-selector-view .list-layout .search-results-header .sort-row .col-code { margin-left: 10px; }

.user-selector-view .list-layout .search-results-header .sort-row .col-owner { margin-left: 10px; }

.user-selector-view .list-layout .user-rows { display: flex; flex-direction: column; box-sizing: border-box; overflow-y: scroll; overflow-x: hidden; padding-top: 10px; height: calc(100vh - 210px); }

/* END: views/users/user-selector/_user-selector.scss */
/* ========================================================================= */
.action-message.failure-message { border: 1px solid #d9534f; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.user-details-view-conatiner { padding: 15px 15px 0; /** ============================================== Dot Flashing ============================================== */ }

.user-details-view-conatiner .user-details-list-container { border-radius: 10px; margin-bottom: 20px; }

.user-details-view-conatiner .user-details-list-container .user-details-list { box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.2); list-style-type: none; }

.user-details-view-conatiner .user-details-list-container .user-details-list .user-details-header { background-color: #d3e5f3; margin-bottom: 0; margin-top: 0; padding: 5px 10px; }

.user-details-view-conatiner .user-details-list-container .user-details-list li { background: #f5f5f5; padding: 2px 10px; }

.user-details-view-conatiner .user-details-list-container .user-details-list li .record-label { display: inline-block; width: 15%; }

.user-details-view-conatiner .user-details-list-container .user-details-list li .record-value { display: inline-block; width: 82%; }

.user-details-view-conatiner .user-details-list-container .user-details-list li .record-value input { width: 40%; }

.user-details-view-conatiner .user-details-list-container .user-details-list li .edit-button { cursor: pointer; }

.user-details-view-conatiner .user-details-list-container .user-details-list li:nth-child(odd) { background: #ffffff; }

.user-details-view-conatiner .user-details-list-container .user-details-list .expandable-item { cursor: pointer; display: flex; }

.user-details-view-conatiner .user-details-list-container .user-details-list .expand-icon-wrapper { margin-left: auto; margin-right: 0; }

.user-details-view-conatiner .user-details-list-container .user-details-list .inner-list-conatiner { border: 2px dotted #e6e9fb; border-radius: 10px; padding: 10px; }

.user-details-view-conatiner .user-details-list-container .user-details-list .user-details-inner-list { list-style-type: none; }

.user-details-view-conatiner .user-details-list-container .user-details-list table { border-collapse: collapse; width: 100%; }

.user-details-view-conatiner .user-details-list-container .user-details-list th { background-color: #d3e5f3; }

.user-details-view-conatiner .user-details-list-container .user-details-list tr:nth-child(odd) { background: #f5f5f5; }

.user-details-view-conatiner .user-details-list-container .user-details-list tr:nth-child(even) { background-color: #ffffff; }

.user-details-view-conatiner .buttons-container { display: flex; height: 25px; margin-bottom: 20px; }

.user-details-view-conatiner .buttons-container .right-margin { margin-right: 10px; }

.user-details-view-conatiner .toggle-switch-container { display: flex; margin-left: 10px; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.user-details-view-conatiner .toggle-switch-container .switch-label { margin-right: 5px; }

.user-details-view-conatiner .toggle-switch-container .switch { display: inline-block; position: relative; }

.user-details-view-conatiner .toggle-switch-container .switch input { display: none; }

.user-details-view-conatiner .toggle-switch-container .slider-off { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.user-details-view-conatiner .toggle-switch-container .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.user-details-view-conatiner .toggle-switch-container .slider-on { bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.user-details-view-conatiner .toggle-switch-container .on { display: none; }

.user-details-view-conatiner .toggle-switch-container .on, .user-details-view-conatiner .toggle-switch-container .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625em; left: 50%; position: absolute; text-transform: uppercase; top: 50%; }

.user-details-view-conatiner .toggle-switch-container .on { transform: translate(-50%, -50%); }

.user-details-view-conatiner .toggle-switch-container .off { transform: translate(-50%, -50%); }

.user-details-view-conatiner .toggle-switch-container input:checked + .slider .on { display: block; }

.user-details-view-conatiner .toggle-switch-container .slider.round { border-radius: 34px; }

.user-details-view-conatiner .toggle-switch-container .slider.round::before { border-radius: 50%; }

.user-details-view-conatiner .toggle-switch-container .switch.product-state-switch { height: 20px; width: 90px; }

.user-details-view-conatiner .toggle-switch-container .switch.product-state-switch input:checked + .slider-on::before { transform: translateX(70px); }

.user-details-view-conatiner .toggle-switch-container .switch.product-state-switch .slider-on { background-color: #64be34; }

.user-details-view-conatiner .toggle-switch-container .switch.product-state-switch .slider-off { background-color: #ed2024; }

.user-details-view-conatiner .inline-dot-loading-anim { position: relative; left: 50px; top: 4px; }

.user-details-view-conatiner .dot-flashing { position: relative; width: 10px; height: 10px; border-radius: 5px; background-color: #999999; color: #999999; -webkit-animation: dot-flashing 1s infinite linear alternate; animation: dot-flashing 1s infinite linear alternate; -webkit-animation-delay: .5s; animation-delay: .5s; }

.user-details-view-conatiner .dot-flashing::before, .user-details-view-conatiner .dot-flashing::after { content: ''; display: inline-block; position: absolute; top: 0; }

.user-details-view-conatiner .dot-flashing::before { left: -15px; width: 10px; height: 10px; border-radius: 5px; background-color: #999999; color: #999999; -webkit-animation: dot-flashing 1s infinite alternate; animation: dot-flashing 1s infinite alternate; -webkit-animation-delay: 0s; animation-delay: 0s; }

.user-details-view-conatiner .dot-flashing::after { left: 15px; width: 10px; height: 10px; border-radius: 5px; background-color: #999999; color: #999999; -webkit-animation: dot-flashing 1s infinite alternate; animation: dot-flashing 1s infinite alternate; -webkit-animation-delay: 1s; animation-delay: 1s; }

@-webkit-keyframes dot-flashing { 0% { background-color: #999999; }
  50%, 100% { background-color: #cccccc; } }

@keyframes dot-flashing { 0% { background-color: #999999; }
  50%, 100% { background-color: #cccccc; } }

.user-transcript-view-conatiner { margin: 8px; padding: 8px; }

.user-transcript-view-conatiner span { color: #aaaaaa; font-size: 1.2rem; padding-bottom: 10px; padding-top: 10px; text-align: center; }

.user-transcript-view-conatiner [type='checkbox'] { transform: scale(1.2); }

.user-transcript-view-conatiner [type='checkbox'] + label { cursor: pointer; }

.user-transcript-view-conatiner .notify-student-selection { float: right; }

.user-transcript-view-conatiner table { border: 1px solid #e0e0e0; padding: 10px; width: 100%; }

.user-transcript-view-conatiner table thead th { color: #aaaaaa; font-size: 1.2rem; padding-bottom: 10px; padding-top: 10px; text-align: left; }

.user-transcript-view-conatiner table thead th.select-all-checkbox { text-align: right; }

.user-transcript-view-conatiner table thead th.select-all-checkbox input { position: relative; top: -3px; vertical-align: middle; }

.user-transcript-view-conatiner table tbody tr td:nth-child(2) { text-align: right; }

.user-transcript-view-conatiner table tbody tr td:nth-child(2) input { position: relative; top: -2px; vertical-align: middle; }

.user-transcript-view-conatiner table tbody tr.alt { background-color: rgba(212, 33, 33, 0.02); }

.user-transcript-view-conatiner .buttons-container { display: flex; flex-direction: column; margin-bottom: 20px; padding-top: 15px; }

.user-transcript-view-conatiner .buttons-container h1 { left: -10px; margin-bottom: 5px; position: relative; }

.user-transcript-view-conatiner .buttons-container .input-field { padding-bottom: 5px; padding-top: 5px; }

.user-transcript-view-conatiner .buttons-container label { float: left; padding-right: 0; padding-top: 0.1em; text-align: left; width: 12em; }

.user-transcript-view-conatiner .buttons-container span { border: 1px solid #aaaaaa; color: #000000; padding: 5px; }

.user-transcript-view-conatiner .buttons-container input { display: block; font-size: 100%; margin: 0; padding: 0; width: 9em; }

.user-transcript-view-conatiner .buttons-container label[for='enrollment-grade'] { position: relative; top: 7px; }

.user-transcript-view-conatiner .buttons-container #enrollment-grade { font-size: 1.2rem; padding: 5px; width: 98px; }

.user-transcript-view-conatiner .buttons-container .right-margin { margin-right: 10px; }

.user-transcript-view-conatiner .buttons-container #notify-student { left: 140px; position: relative; top: 3px; }

.user-transcript-view-conatiner .buttons-container button { display: block; left: 40px; margin-top: 5px; padding-bottom: 5px; padding-top: 5px; position: relative; width: 250px; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/users/_school-admin-manage-users-student.scss */
.view.school-admin-manage-users-staff-view { overflow: hidden; }

.school-admin-manage-users-staff-view .overview-header { display: flex; flex-direction: row; }

.school-admin-manage-users-staff-view .overview-header .right-side { width: 32px; height: 32px; margin-left: auto; }

.school-admin-manage-users-staff-view .button-container { float: none; padding: 10px 20px 0; }

.school-admin-manage-users-staff-view .button-container .data-extract-container { border-left: 1px solid #c2c2c2f6; padding-left: 10px; }

.school-admin-manage-users-staff-view .button-container .clear-filter { padding-right: 10px; }

.school-admin-manage-users-staff-view .guides-list-view .scrollable { height: calc(100vh - 302px); }

.school-admin-manage-users-staff-view .guides-list-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px; }

.school-admin-manage-users-staff-view .guides-list-view .order-body { background: #ffffff; border: 2px solid #c2c0c0; margin-left: 25px; margin-right: 25px; }

.school-admin-manage-users-staff-view .guides-list-view .icon-small { font-size: small; }

.school-admin-manage-users-staff-view .guides-list-view .clear-filter { background: #ffffff; color: #2f5bb4; }

.school-admin-manage-users-staff-view .guides-list-view .line-height td { height: 40px; }

.school-admin-manage-users-staff-view .guides-list-view .button-container { display: flex; height: unset; padding: 10px 24px 0; }

.school-admin-manage-users-staff-view .guides-list-view .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.school-admin-manage-users-staff-view .guides-list-view .button-container .pull-right { margin-left: auto; margin-right: 0; margin-top: 7px; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list { background-color: #ffffff; margin: 10px 20px 24px; padding: 0; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table { border: 1px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; text-align: left; width: 100%; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .text-center { text-align: center; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table th button { color: #ffffff; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .filter-input { border: 1px solid #a9a9a9; border-radius: 5px; padding-left: 6px; width: 100%; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .disabled { background-color: #d3d3d3; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .line-height { line-height: 21px; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .no-underline { text-decoration: none; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .padding-right { padding-right: 20px; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table tr:nth-child(even) { background: #ffffff; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table tr:nth-child(odd) { background: whitesmoke; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table tr.filter-row { background-color: #ffffff; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table tr.filter-row td { padding-top: 12px; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table tr.filter-row td select { height: 25px; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table tr.filter-row td input { height: 21px; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table select .select-placeholder { color: darkgray; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .filter-tag-row .filter-tag { background-color: #f1f1f1; border-radius: 25px; color: darkgray; font-size: 0.8rem; font-style: italic; padding: 2px 4px; }

.school-admin-manage-users-staff-view .guides-list-view .guides-list table .filter-tag-row .filter-tag button { background-color: #f1f1f1; border: 0; color: darkgray; font-size: 0.8rem; font-style: italic; margin-left: 2px; }

.school-admin-manage-users-staff-view .guides-list-view .new-order td { background-color: #c7e6c7; }

.school-admin-manage-users-staff-view .guides-list-view .sort-button { background: none; border: 0; }

/* END: views/users/_school-admin-manage-users-student.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/users/_school-admin-manage-users-student.scss */
.view.school-admin-manage-users-guides-view { overflow: hidden; }

.school-admin-manage-users-guides-view .overview-header { display: flex; flex-direction: row; }

.school-admin-manage-users-guides-view .overview-header .right-side { width: 32px; height: 32px; margin-left: auto; }

.school-admin-manage-users-guides-view .button-container { float: none; padding: 10px 20px 0; }

.school-admin-manage-users-guides-view .button-container .associate-filter { display: table; padding: 0 10px; /* Rounded sliders */ }

.school-admin-manage-users-guides-view .button-container .associate-filter .filter-title { display: table-cell; font-weight: bold; padding: 0 5px; vertical-align: middle; }

.school-admin-manage-users-guides-view .button-container .associate-filter .switch { display: inline-block; height: 25px; position: relative; width: 60px; }

.school-admin-manage-users-guides-view .button-container .associate-filter .switch input { height: 0; opacity: 0; width: 0; }

.school-admin-manage-users-guides-view .button-container .associate-filter .slider { background-color: #cccccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 10px; top: 0; transition: 0.4s; }

.school-admin-manage-users-guides-view .button-container .associate-filter .slider::before { background-color: #ffffff; bottom: 4px; content: ''; height: 17px; left: 4px; position: absolute; transition: 0.4s; width: 17px; }

.school-admin-manage-users-guides-view .button-container .associate-filter input:checked + .slider { background-color: #2196f3; }

.school-admin-manage-users-guides-view .button-container .associate-filter input:focus + .slider { box-shadow: 0 0 1px #2196f3; }

.school-admin-manage-users-guides-view .button-container .associate-filter input:checked + .slider::before { transform: translateX(26px); }

.school-admin-manage-users-guides-view .button-container .associate-filter .slider.round { border-radius: 34px; }

.school-admin-manage-users-guides-view .button-container .associate-filter .slider.round::before { border-radius: 50%; }

.school-admin-manage-users-guides-view .button-container .data-extract-container { border-left: 1px solid #c2c2c2f6; padding-left: 10px; }

.school-admin-manage-users-guides-view .button-container .clear-filter { padding-right: 10px; }

.school-admin-manage-users-guides-view .guides-list-view .scrollable { height: calc(100vh - 302px); }

.school-admin-manage-users-guides-view .guides-list-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px; }

.school-admin-manage-users-guides-view .guides-list-view .order-body { background: #ffffff; border: 2px solid #c2c0c0; margin-left: 25px; margin-right: 25px; }

.school-admin-manage-users-guides-view .guides-list-view .icon-small { font-size: small; }

.school-admin-manage-users-guides-view .guides-list-view .clear-filter { background: #ffffff; color: #2f5bb4; }

.school-admin-manage-users-guides-view .guides-list-view .line-height td { height: 40px; }

.school-admin-manage-users-guides-view .guides-list-view .button-container { display: flex; height: unset; padding: 10px 24px 0; }

.school-admin-manage-users-guides-view .guides-list-view .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.school-admin-manage-users-guides-view .guides-list-view .button-container .pull-right { margin-left: auto; margin-right: 0; margin-top: 7px; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list { background-color: #ffffff; margin: 10px 20px 24px; padding: 0; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table { border: 1px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; text-align: left; width: 100%; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .text-center { text-align: center; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table th button { color: #ffffff; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .filter-input { border: 1px solid #a9a9a9; border-radius: 5px; padding-left: 6px; width: 100%; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .disabled { background-color: #d3d3d3; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .line-height { line-height: 21px; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .no-underline { text-decoration: none; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .padding-right { padding-right: 20px; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table tr:nth-child(even) { background: #ffffff; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table tr:nth-child(odd) { background: whitesmoke; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table tr.filter-row { background-color: #ffffff; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table tr.filter-row td { padding-top: 12px; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table tr.filter-row td select { height: 25px; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table tr.filter-row td input { height: 21px; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table select .select-placeholder { color: darkgray; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .filter-tag-row .filter-tag { background-color: #f1f1f1; border-radius: 25px; color: darkgray; font-size: 0.8rem; font-style: italic; padding: 2px 4px; }

.school-admin-manage-users-guides-view .guides-list-view .guides-list table .filter-tag-row .filter-tag button { background-color: #f1f1f1; border: 0; color: darkgray; font-size: 0.8rem; font-style: italic; margin-left: 2px; }

.school-admin-manage-users-guides-view .guides-list-view .new-order td { background-color: #c7e6c7; }

.school-admin-manage-users-guides-view .guides-list-view .sort-button { background: none; border: 0; }

/* END: views/users/_school-admin-manage-users-student.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/users/_school-admin-manage-users-student.scss */
.view.school-admin-manage-users-student-view { overflow: hidden; }

.school-admin-manage-users-student-view .overview-header { display: flex; flex-direction: row; }

.school-admin-manage-users-student-view .overview-header .right-side { width: 32px; height: 32px; margin-left: auto; }

.school-admin-manage-users-student-view .button-container { float: none; padding: 10px 20px 0; }

.school-admin-manage-users-student-view .button-container .associate-filter { display: table; padding: 0 10px; /* Rounded sliders */ }

.school-admin-manage-users-student-view .button-container .associate-filter .filter-title { display: table-cell; font-weight: bold; padding: 0 5px; vertical-align: middle; }

.school-admin-manage-users-student-view .button-container .associate-filter .switch { display: inline-block; height: 25px; position: relative; width: 60px; }

.school-admin-manage-users-student-view .button-container .associate-filter .switch input { height: 0; opacity: 0; width: 0; }

.school-admin-manage-users-student-view .button-container .associate-filter .slider { background-color: #cccccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 10px; top: 0; transition: 0.4s; }

.school-admin-manage-users-student-view .button-container .associate-filter .slider::before { background-color: #ffffff; bottom: 4px; content: ''; height: 17px; left: 4px; position: absolute; transition: 0.4s; width: 17px; }

.school-admin-manage-users-student-view .button-container .associate-filter input:checked + .slider { background-color: #2196f3; }

.school-admin-manage-users-student-view .button-container .associate-filter input:focus + .slider { box-shadow: 0 0 1px #2196f3; }

.school-admin-manage-users-student-view .button-container .associate-filter input:checked + .slider::before { transform: translateX(26px); }

.school-admin-manage-users-student-view .button-container .associate-filter .slider.round { border-radius: 34px; }

.school-admin-manage-users-student-view .button-container .associate-filter .slider.round::before { border-radius: 50%; }

.school-admin-manage-users-student-view .button-container .data-extract-container { border-left: 1px solid #c2c2c2f6; padding-left: 10px; }

.school-admin-manage-users-student-view .button-container .clear-filter { padding-right: 10px; }

.school-admin-manage-users-student-view .student-list-view .scrollable { height: calc(100vh - 302px); }

.school-admin-manage-users-student-view .student-list-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px; }

.school-admin-manage-users-student-view .student-list-view .order-body { background: #ffffff; border: 2px solid #c2c0c0; margin-left: 25px; margin-right: 25px; }

.school-admin-manage-users-student-view .student-list-view .icon-small { font-size: small; }

.school-admin-manage-users-student-view .student-list-view .clear-filter { background: #ffffff; color: #2f5bb4; }

.school-admin-manage-users-student-view .student-list-view .line-height td { height: 40px; }

.school-admin-manage-users-student-view .student-list-view .button-container { display: flex; height: unset; padding: 10px 24px 0; }

.school-admin-manage-users-student-view .student-list-view .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.school-admin-manage-users-student-view .student-list-view .button-container .pull-right { margin-left: auto; margin-right: 0; margin-top: 7px; }

.school-admin-manage-users-student-view .student-list-view .student-list { background-color: #ffffff; margin: 10px 20px 24px; padding: 0; }

.school-admin-manage-users-student-view .student-list-view .student-list table { border: 1px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; text-align: left; width: 100%; }

.school-admin-manage-users-student-view .student-list-view .student-list table .text-center { text-align: center; }

.school-admin-manage-users-student-view .student-list-view .student-list table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.school-admin-manage-users-student-view .student-list-view .student-list table th button { color: #ffffff; }

.school-admin-manage-users-student-view .student-list-view .student-list table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.school-admin-manage-users-student-view .student-list-view .student-list table .filter-input { border: 1px solid #a9a9a9; border-radius: 5px; padding-left: 6px; width: 100%; }

.school-admin-manage-users-student-view .student-list-view .student-list table .disabled { background-color: #d3d3d3; }

.school-admin-manage-users-student-view .student-list-view .student-list table .line-height { line-height: 21px; }

.school-admin-manage-users-student-view .student-list-view .student-list table .no-underline { text-decoration: none; }

.school-admin-manage-users-student-view .student-list-view .student-list table .padding-right { padding-right: 20px; }

.school-admin-manage-users-student-view .student-list-view .student-list table tr:nth-child(even) { background: #ffffff; }

.school-admin-manage-users-student-view .student-list-view .student-list table tr:nth-child(odd) { background: whitesmoke; }

.school-admin-manage-users-student-view .student-list-view .student-list table tr.filter-row { background-color: #ffffff; }

.school-admin-manage-users-student-view .student-list-view .student-list table tr.filter-row td { padding-top: 12px; }

.school-admin-manage-users-student-view .student-list-view .student-list table tr.filter-row td select { height: 25px; }

.school-admin-manage-users-student-view .student-list-view .student-list table tr.filter-row td input { height: 21px; }

.school-admin-manage-users-student-view .student-list-view .student-list table select .select-placeholder { color: darkgray; }

.school-admin-manage-users-student-view .student-list-view .student-list table .filter-tag-row .filter-tag { background-color: #f1f1f1; border-radius: 25px; color: darkgray; font-size: 0.8rem; font-style: italic; padding: 2px 4px; }

.school-admin-manage-users-student-view .student-list-view .student-list table .filter-tag-row .filter-tag button { background-color: #f1f1f1; border: 0; color: darkgray; font-size: 0.8rem; font-style: italic; margin-left: 2px; }

.school-admin-manage-users-student-view .student-list-view .new-order td { background-color: #c7e6c7; }

.school-admin-manage-users-student-view .student-list-view .sort-button { background: none; border: 0; }

/* END: views/users/_school-admin-manage-users-student.scss */
/* ========================================================================= */
.view.add-user-view { background-color: #f5f5f5; }

.view.add-user-view .action-message.failure-message { border: 1px solid #d9534f; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-view .action-message.success-message { border: 1px solid #5cb85c; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-view .add-user-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-user-view .add-user-view h1 { color: #000000; padding: 0; }

.view.add-user-view .add-user-view label { font-weight: 400; }

.view.add-user-view .add-user-view .input-box { margin: 12px 0; }

.view.add-user-view .add-user-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-user-view .add-user-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-user-view .add-user-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-user-view .add-user-view .input-box.half { float: left; width: 50%; }

.view.add-user-guide-view { background-color: #f5f5f5; }

.view.add-user-guide-view .action-message { display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-guide-view .failure-message { border: 1px solid #d9534f; }

.view.add-user-guide-view .success-message { border: 1px solid #5cb85c; }

.view.add-user-guide-view .add-user-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-user-guide-view .add-user-view h1 { color: #000000; padding: 0; }

.view.add-user-guide-view .add-user-view label { font-weight: 400; }

.view.add-user-guide-view .add-user-view .input-box { margin: 12px 0; }

.view.add-user-guide-view .add-user-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-user-guide-view .add-user-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-user-guide-view .add-user-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-user-guide-view .add-user-view .input-box.half { float: left; width: 50%; }

.view.add-user-guide-view { background-color: #f5f5f5; }

.view.add-user-guide-view .action-message.failure-message { border: 1px solid #d9534f; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-guide-view .required-input { color: rgba(0, 0, 0, 0.5); }

.view.add-user-guide-view .add-user-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-user-guide-view .add-user-view #address-line-1.invalid-address-item, .view.add-user-guide-view .add-user-view #address-line-2.invalid-address-item, .view.add-user-guide-view .add-user-view #address-city.invalid-address-item, .view.add-user-guide-view .add-user-view #address-state.invalid-address-item, .view.add-user-guide-view .add-user-view #address-zip.invalid-address-item, .view.add-user-guide-view .add-user-view #address-country.invalid-address-item { border: 1px solid red; }

.view.add-user-guide-view .add-user-view #address-line-1.invalid-address-item::-moz-placeholder, .view.add-user-guide-view .add-user-view #address-line-2.invalid-address-item::-moz-placeholder, .view.add-user-guide-view .add-user-view #address-city.invalid-address-item::-moz-placeholder, .view.add-user-guide-view .add-user-view #address-state.invalid-address-item::-moz-placeholder, .view.add-user-guide-view .add-user-view #address-zip.invalid-address-item::-moz-placeholder, .view.add-user-guide-view .add-user-view #address-country.invalid-address-item::-moz-placeholder { color: rgba(255, 0, 0, 0.25); }

.view.add-user-guide-view .add-user-view #address-line-1.invalid-address-item::placeholder, .view.add-user-guide-view .add-user-view #address-line-2.invalid-address-item::placeholder, .view.add-user-guide-view .add-user-view #address-city.invalid-address-item::placeholder, .view.add-user-guide-view .add-user-view #address-state.invalid-address-item::placeholder, .view.add-user-guide-view .add-user-view #address-zip.invalid-address-item::placeholder, .view.add-user-guide-view .add-user-view #address-country.invalid-address-item::placeholder { color: rgba(255, 0, 0, 0.25); }

.view.add-user-guide-view .add-user-view select[disabled] { background-color: #ebebe4; }

.view.add-user-guide-view .add-user-view h1 { color: #000000; padding: 0; }

.view.add-user-guide-view .add-user-view label { font-weight: 400; }

.view.add-user-guide-view .add-user-view .input-box { margin: 12px 0; }

.view.add-user-guide-view .add-user-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-user-guide-view .add-user-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-user-guide-view .add-user-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-user-guide-view .add-user-view .input-box.half { float: left; width: 50%; }

.view.add-user-student-view { background-color: #f5f5f5; }

.view.add-user-student-view .action-message { display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-student-view .failure-message { border: 1px solid #d9534f; }

.view.add-user-student-view .success-message { border: 1px solid #5cb85c; }

.view.add-user-student-view .add-user-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-user-student-view .add-user-view h1 { color: #000000; padding: 0; }

.view.add-user-student-view .add-user-view label { font-weight: 400; }

.view.add-user-student-view .add-user-view .input-box { margin: 12px 0; }

.view.add-user-student-view .add-user-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-user-student-view .add-user-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-user-student-view .add-user-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-user-student-view .add-user-view .input-box.half { float: left; width: 50%; }

.view.add-user-student-view { background-color: #f5f5f5; }

.view.add-user-student-view .action-message.failure-message { border: 1px solid #d9534f; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-student-view .add-user-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-user-student-view .add-user-view select[disabled] { background-color: #ebebe4; }

.view.add-user-student-view .add-user-view h1 { color: #000000; padding: 0; }

.view.add-user-student-view .add-user-view label { font-weight: 400; }

.view.add-user-student-view .add-user-view .input-box { margin: 12px 0; }

.view.add-user-student-view .add-user-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-user-student-view .add-user-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-user-student-view .add-user-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-user-student-view .add-user-view .input-box.half { float: left; width: 50%; }

.view.add-user-staff-view { background-color: #f5f5f5; }

.view.add-user-staff-view .action-message { display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-staff-view .failure-message { border: 1px solid #d9534f; }

.view.add-user-staff-view .success-message { border: 1px solid #5cb85c; }

.view.add-user-staff-view .add-user-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-user-staff-view .add-user-view h1 { color: #000000; padding: 0; }

.view.add-user-staff-view .add-user-view label { font-weight: 400; }

.view.add-user-staff-view .add-user-view .input-box { margin: 12px 0; }

.view.add-user-staff-view .add-user-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-user-staff-view .add-user-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-user-staff-view .add-user-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-user-staff-view .add-user-view .input-box.half { float: left; width: 50%; }

.view.add-user-staff-view { background-color: #f5f5f5; }

.view.add-user-staff-view .action-message.failure-message { border: 1px solid #d9534f; display: flex; float: right; margin-right: 25px; margin-top: 20px; padding: 5px; right: 20px; top: 50%; }

.view.add-user-staff-view .required-input { color: rgba(0, 0, 0, 0.5); }

.view.add-user-staff-view .add-user-view { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; margin: 32px 144px; padding: 24px; }

.view.add-user-staff-view .add-user-view #address-line-1.invalid-address-item, .view.add-user-staff-view .add-user-view #address-line-2.invalid-address-item, .view.add-user-staff-view .add-user-view #address-city.invalid-address-item, .view.add-user-staff-view .add-user-view #address-state.invalid-address-item, .view.add-user-staff-view .add-user-view #address-zip.invalid-address-item, .view.add-user-staff-view .add-user-view #address-country.invalid-address-item { border: 1px solid red; }

.view.add-user-staff-view .add-user-view #address-line-1.invalid-address-item::-moz-placeholder, .view.add-user-staff-view .add-user-view #address-line-2.invalid-address-item::-moz-placeholder, .view.add-user-staff-view .add-user-view #address-city.invalid-address-item::-moz-placeholder, .view.add-user-staff-view .add-user-view #address-state.invalid-address-item::-moz-placeholder, .view.add-user-staff-view .add-user-view #address-zip.invalid-address-item::-moz-placeholder, .view.add-user-staff-view .add-user-view #address-country.invalid-address-item::-moz-placeholder { color: rgba(255, 0, 0, 0.25); }

.view.add-user-staff-view .add-user-view #address-line-1.invalid-address-item::placeholder, .view.add-user-staff-view .add-user-view #address-line-2.invalid-address-item::placeholder, .view.add-user-staff-view .add-user-view #address-city.invalid-address-item::placeholder, .view.add-user-staff-view .add-user-view #address-state.invalid-address-item::placeholder, .view.add-user-staff-view .add-user-view #address-zip.invalid-address-item::placeholder, .view.add-user-staff-view .add-user-view #address-country.invalid-address-item::placeholder { color: rgba(255, 0, 0, 0.25); }

.view.add-user-staff-view .add-user-view select[disabled] { background-color: #ebebe4; }

.view.add-user-staff-view .add-user-view h1 { color: #000000; padding: 0; }

.view.add-user-staff-view .add-user-view label { font-weight: 400; }

.view.add-user-staff-view .add-user-view .input-box { margin: 12px 0; }

.view.add-user-staff-view .add-user-view .input-box .half-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 49%; }

.view.add-user-staff-view .add-user-view .input-box .full-box { border: 1px solid #e0e0e0; border-radius: 4px; margin: 12px 0; width: 99%; }

.view.add-user-staff-view .add-user-view .editLink { color: blue; cursor: pointer; float: right; font-weight: 600; }

.view.add-user-staff-view .add-user-view .input-box.half { float: left; width: 50%; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/info/_parent-simplified-info.scss */
.view.parent-simplified-info-view { overflow: hidden; }

.parent-simplified-info-view { background-color: #115aa6; padding: 10px; padding-top: 0; }

.parent-simplified-info-view .info-container { height: 50%; left: 50%; top: 50%; transform: translate(50%, calc(50% - 60px)); width: 50%; }

.parent-simplified-info-view .info-container h2 { color: #686b69; font-family: roboto; font-kerning: normal; font-size: 1.75rem; font-weight: 400; letter-spacing: 0.0175em; line-height: 1.67em; margin-bottom: 1em; }

.parent-simplified-info-view .info-container p { font-family: roboto; font-size: 1rem; font-weight: 400; line-height: 1.375em; margin-bottom: -0.75em; }

.parent-simplified-info-view .info-container div { margin-top: 50px; width: 100%; }

.parent-simplified-info-view .info-container #content-1 { border: 1px solid red; height: 100px; width: 100px; }

/* END: views/info/_parent-simplified-info.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/reports/_reports.scss */
.reports-view { background-color: #f5f5f5; left: 0; }

.reports-view .view-content-area { background-color: #f5f5f5; font-size: 1rem; overflow-y: initial; }

.reports-view .view-content-area .school-term-selector { padding-top: 2em; }

.reports-view .view-content-area .school-term-selector select { border-radius: 0.25rem; font-size: 1rem; padding: 0.5rem 1rem; transition: all 0.2s ease-in-out; border: 1px solid transparent; font-weight: normal; line-height: 1.25; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; text-overflow: ellipsis; width: 200px; height: 40px; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: white; background-color: #2F5BB4; background-repeat: no-repeat; background-size: 0.65em; background-position: 175px; background-image: url("/common/assets/images/caret-down.svg"); }

.reports-view .view-content-area .reports-header { background-color: #ffffff; border-bottom: 0.5px solid #c6c6c6; padding: 2.25em 10%; }

.reports-view .view-content-area .reports-header h1 { color: #000000; font-size: 1.875rem; font-weight: 500; line-height: 1.2; margin-top: 0; }

.reports-view .view-content-area .reports-header p { font-size: 1rem; font-weight: 400; line-height: 1.3125; margin-bottom: 0; }

.reports-view .view-content-area .reports { padding: 0.5em 0 2em 10%; width: 80%; }

.reports-view .view-content-area .reports .date-range { margin-top: 1em; overflow: hidden; padding-bottom: 1em; text-transform: uppercase; }

.reports-view .view-content-area .reports .date-range .start, .reports-view .view-content-area .reports .date-range .dash, .reports-view .view-content-area .reports .date-range .end { float: left; }

.reports-view .view-content-area .reports .date-range .dash { padding: 2em 1em 0; }

.reports-view .view-content-area .reports .date-range .label { display: block; margin-bottom: 0.5em; }

.reports-view .view-content-area .reports .date-range .date { background-color: #ffffff; border: 1px solid #d7d7d7; color: #d7d7d7; display: block; min-width: 100px; padding: 5px; }

.reports-view .view-content-area .reports .report { background-color: #ffffff; border: 0.5px solid #c6c6c6; border-radius: 3px; margin-top: 2em; padding: 1.5em; position: relative; }

.reports-view .view-content-area .reports .report h2 { color: #276fc3; font-size: 1.125rem; font-weight: 500; line-height: 1; margin: 0; }

.reports-view .view-content-area .reports .report p { color: #666666; font-size: 1rem; font-weight: 400; line-height: 1.3125; margin: 8px 0 0; padding-right: 100px; }

.reports-view .view-content-area .reports .report p.note { font-style: oblique; }

.reports-view .view-content-area .reports .report .btn-download { position: absolute; right: 1.5em; top: 50%; transform: translateY(-50%); padding: 0; border: none; background: none; }

.reports-view .view-content-area .reports .report .btn-download.disabled { cursor: not-allowed; }

.reports-view .view-content-area .reports .report select { color: #276fc3; margin: 0 10px; padding: 5px; }

.reports-view .view-content-area .footer-divider { margin-top: 2em; }

/* END: views/reports/_reports.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/upload/_upload.scss */
.view.upload-view { overflow: hidden; }

.upload-view { background-color: #ffffff; }

.upload-view .content-area-for-simple-nav { margin: 10px; }

.upload-view .uploader-container { margin: 10px; text-align: center; }

.upload-view li { padding: 4px; }

/* END: views/upload/_upload.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/upload/_tracking
.scss */
.view.tracking-view { overflow: hidden; }

.tracking-view { background-color: #ffffff; }

.tracking-view .content-area-for-simple-nav { margin: 10px; }

.tracking-view .uploader-container { margin: 10px; }

/* END: views/upload/_tracking
.scss */
/* ========================================================================= */
.order-list-view { background: #f1f1f1; }

.order-list-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px; }

.order-list-view .order-body { background: #ffffff; border: 2px solid #c2c0c0; margin-left: 25px; margin-right: 25px; }

.order-list-view .icon-small { font-size: small; }

.order-list-view .clear-filter { background: #ffffff; color: #2f5bb4; }

.order-list-view .line-height td { height: 40px; }

.order-list-view .button-container { display: flex; height: unset; padding: 10px 24px 0; }

.order-list-view .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.order-list-view .button-container .pull-right { margin-left: auto; margin-right: 0; margin-top: 7px; }

.order-list-view .order-list { background-color: #ffffff; margin: 20px 20px 24px; padding: 0; }

.order-list-view .order-list table { border: 2px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; text-align: left; width: 100%; }

.order-list-view .order-list table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.order-list-view .order-list table th button { color: #ffffff; }

.order-list-view .order-list table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.order-list-view .order-list table .filter-input { border: 1px solid #a9a9a9; border-radius: 5px; padding-left: 6px; width: 100%; }

.order-list-view .order-list table .disabled { background-color: #d3d3d3; }

.order-list-view .order-list table .line-height { line-height: 21px; }

.order-list-view .order-list table .no-underline { text-decoration: none; }

.order-list-view .order-list table .padding-right { padding-right: 20px; }

.order-list-view .order-list table tr:nth-child(even) { background: #ffffff; }

.order-list-view .order-list table tr:nth-child(odd) { background: whitesmoke; }

.order-list-view .order-list table tr.filter-row { background-color: #ffffff; }

.order-list-view .order-list table tr.filter-row td { padding-top: 12px; }

.order-list-view .order-list table tr.filter-row td select { height: 25px; }

.order-list-view .order-list table tr.filter-row td input { height: 21px; }

.order-list-view .order-list table select .select-placeholder { color: darkgray; }

.order-list-view .order-list table .filter-tag-row .filter-tag { background-color: #f1f1f1; border-radius: 25px; color: darkgray; font-size: 0.8rem; font-style: italic; padding: 2px 4px; }

.order-list-view .order-list table .filter-tag-row .filter-tag button { background-color: #f1f1f1; border: 0; color: darkgray; font-size: 0.8rem; font-style: italic; margin-left: 2px; }

.order-list-view .new-order td { background-color: #c7e6c7; }

.order-list-view .sort-button { background: none; border: 0; }

.order-list-view { background: #f1f1f1; }

.order-list-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px; }

.order-list-view .order-body { background: #ffffff; border: 2px solid #c2c0c0; margin-left: 25px; margin-right: 25px; }

.order-list-view .icon-small { font-size: small; }

.order-list-view .clear-filter { background: #ffffff; color: #2f5bb4; }

.order-list-view .line-height td { height: 40px; }

.order-list-view .button-container { display: flex; height: unset; padding: 10px 24px 0; }

.order-list-view .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.order-list-view .button-container .pull-right { margin-left: auto; margin-right: 0; margin-top: 7px; }

.order-list-view .order-list { background-color: #ffffff; margin: 20px 20px 24px; padding: 0; }

.order-list-view .order-list table { border: 2px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; text-align: left; width: 100%; }

.order-list-view .order-list table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.order-list-view .order-list table th button { color: #ffffff; }

.order-list-view .order-list table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.order-list-view .order-list table .filter-input { border: 1px solid #a9a9a9; border-radius: 5px; padding-left: 6px; width: 100%; }

.order-list-view .order-list table .disabled { background-color: #d3d3d3; }

.order-list-view .order-list table .line-height { line-height: 21px; }

.order-list-view .order-list table .no-underline { text-decoration: none; }

.order-list-view .order-list table .padding-right { padding-right: 20px; }

.order-list-view .order-list table tr:nth-child(even) { background: #ffffff; }

.order-list-view .order-list table tr:nth-child(odd) { background: whitesmoke; }

.order-list-view .order-list table tr.filter-row { background-color: #ffffff; }

.order-list-view .order-list table tr.filter-row td { padding-top: 12px; }

.order-list-view .order-list table tr.filter-row td select { height: 25px; }

.order-list-view .order-list table tr.filter-row td input { height: 21px; }

.order-list-view .order-list table select .select-placeholder { color: darkgray; }

.order-list-view .order-list table .filter-tag-row .filter-tag { background-color: #f1f1f1; border-radius: 25px; color: darkgray; font-size: 0.8rem; font-style: italic; padding: 2px 4px; }

.order-list-view .order-list table .filter-tag-row .filter-tag button { background-color: #f1f1f1; border: 0; color: darkgray; font-size: 0.8rem; font-style: italic; margin-left: 2px; }

.order-list-view .new-order td { background-color: #c7e6c7; }

.order-list-view .sort-button { background: none; border: 0; }

.order-details-view { background: #f1f1f1; }

.order-details-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px 24px 0; }

.order-details-view .ordered-date { margin: 10px 24px 24px; }

.order-details-view .order-body { background: #ffffff; border: 1px solid #9d9a9a; margin-left: 25px; margin-right: 25px; }

.order-details-view .section-title { font-weight: bold; }

.order-details-view .icon-small { font-size: small; }

.order-details-view .buttons-container { line-height: 24px; padding: 10px 24px 0; }

.order-details-view .buttons-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.order-details-view .buttons-container .pull-right { margin-left: auto; margin-right: 0; }

.order-details-view .order-details { background-color: #ffffff; margin: 20px 20px 24px 24px; padding: 0; }

.order-details-view .order-details table { border: 2px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; margin-top: 9px; text-align: left; width: 100%; }

.order-details-view .order-details table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.order-details-view .order-details table th button { color: #ffffff; }

.order-details-view .order-details table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.order-details-view .order-details table .disabled { background-color: #d3d3d3; }

.order-details-view .order-details table .line-height { border: 2px solid #d5d4d4; line-height: 21px; }

.order-details-view .order-details table .padding-right { padding-right: 20px; }

.order-details-view .order-details table tr:nth-child(even) { background: #ffffff; }

.order-details-view .order-details table tr:nth-child(odd) { background: whitesmoke; }

.order-details-view .new-order td { background-color: #c7e6c7; }

.order-details-view .back-button { background-color: #2f5bb4; border: 1px solid #2f5bb4; border-radius: 25px; color: #ffffff; font-size: 1rem; font-weight: 600; height: 36px; left: 24px; margin: 20px 45px 0 0; padding: 10px; position: relative; }

.order-details-view { background: #f1f1f1; }

.order-details-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px 24px 0; }

.order-details-view .ordered-date { margin: 10px 24px 24px; }

.order-details-view .order-body { background: #ffffff; border: 1px solid #9d9a9a; margin-left: 25px; margin-right: 25px; }

.order-details-view .section-title { font-weight: bold; }

.order-details-view .icon-small { font-size: small; }

.order-details-view .button-container { line-height: 24px; padding: 10px 24px 0; }

.order-details-view .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.order-details-view .button-container .pull-right { margin-left: auto; margin-right: 0; }

.order-details-view .order-details { background-color: #ffffff; margin: 20px 20px 24px 24px; padding: 0; }

.order-details-view .order-details table { border: 2px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; margin-top: 9px; text-align: left; width: 100%; }

.order-details-view .order-details table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.order-details-view .order-details table th button { color: #ffffff; }

.order-details-view .order-details table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.order-details-view .order-details table .disabled { background-color: #d3d3d3; }

.order-details-view .order-details table .line-height { border: 2px solid #d5d4d4; line-height: 21px; }

.order-details-view .order-details table .padding-right { padding-right: 20px; }

.order-details-view .order-details table tr:nth-child(even) { background: #ffffff; }

.order-details-view .order-details table tr:nth-child(odd) { background: whitesmoke; }

.order-details-view .new-order td { background-color: #c7e6c7; }

.order-details-view .back-button { background-color: #2f5bb4; border: 1px solid #2f5bb4; border-radius: 25px; color: #ffffff; font-size: 1rem; font-weight: 600; height: 36px; left: 24px; margin: 20px 45px 0 0; padding: 10px; position: relative; }

.order-details-view { background: #f1f1f1; }

.order-details-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px 24px 0; }

.order-details-view .ordered-date { margin: 10px 24px 24px; }

.order-details-view .order-body { background: #ffffff; border: 1px solid #9d9a9a; margin-left: 25px; margin-right: 25px; }

.order-details-view .section-title { font-weight: bold; }

.order-details-view .icon-small { font-size: small; }

.order-details-view .buttons-container { line-height: 24px; padding: 10px 24px 0; }

.order-details-view .buttons-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.order-details-view .buttons-container .pull-right { margin-left: auto; margin-right: 0; }

.order-details-view .order-details { background-color: #ffffff; margin: 20px 20px 24px 24px; padding: 0; }

.order-details-view .order-details table { border: 2px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; margin-top: 9px; text-align: left; width: 100%; }

.order-details-view .order-details table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.order-details-view .order-details table th button { color: #ffffff; }

.order-details-view .order-details table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.order-details-view .order-details table .disabled { background-color: #d3d3d3; }

.order-details-view .order-details table .line-height { border: 2px solid #d5d4d4; line-height: 21px; }

.order-details-view .order-details table .padding-right { padding-right: 20px; }

.order-details-view .order-details table tr:nth-child(even) { background: #ffffff; }

.order-details-view .order-details table tr:nth-child(odd) { background: whitesmoke; }

.order-details-view .new-order td { background-color: #c7e6c7; }

.order-details-view .back-button { background-color: #2f5bb4; border: 1px solid #2f5bb4; border-radius: 25px; color: #ffffff; font-size: 1rem; font-weight: 600; height: 36px; left: 24px; margin: 20px 45px 0 0; padding: 10px; position: relative; }

.order-list-view { background: #f1f1f1; }

.order-list-view .order-header { font-size: 1.9rem; font-weight: 500; margin: 24px; }

.order-list-view .order-body { background: #ffffff; border: 2px solid #c2c0c0; margin-left: 25px; margin-right: 25px; }

.order-list-view .icon-small { font-size: small; }

.order-list-view .clear-filter { background: #ffffff; color: #2f5bb4; }

.order-list-view .line-height td { height: 40px; }

.order-list-view .button-container { display: flex; height: unset; padding: 10px 24px 0; }

.order-list-view .button-container .blue-btn { background-color: #365daa; color: #ffffff; text-transform: none; }

.order-list-view .button-container .pull-right { margin-left: auto; margin-right: 0; margin-top: 7px; }

.order-list-view .order-list { background-color: #ffffff; margin: 20px 20px 24px; padding: 0; }

.order-list-view .order-list table { border: 2px solid #c2c0c0; border-collapse: collapse; font-size: 1rem; text-align: left; width: 100%; }

.order-list-view .order-list table th { background-color: #8e8e8e; border: 0; color: #ffffff; font-size: 1rem; font-weight: 500; height: 40px; letter-spacing: 1px; padding: 6px 10px; text-transform: uppercase; width: 10%; }

.order-list-view .order-list table th button { color: #ffffff; }

.order-list-view .order-list table td { margin: 0; padding: 4px 10px; vertical-align: middle; }

.order-list-view .order-list table .filter-input { border: 1px solid #a9a9a9; border-radius: 5px; padding-left: 6px; width: 100%; }

.order-list-view .order-list table .disabled { background-color: #d3d3d3; }

.order-list-view .order-list table .line-height { line-height: 21px; }

.order-list-view .order-list table .no-underline { text-decoration: none; }

.order-list-view .order-list table .padding-right { padding-right: 20px; }

.order-list-view .order-list table tr:nth-child(even) { background: #ffffff; }

.order-list-view .order-list table tr:nth-child(odd) { background: whitesmoke; }

.order-list-view .order-list table tr.filter-row { background-color: #ffffff; }

.order-list-view .order-list table tr.filter-row td { padding-top: 12px; }

.order-list-view .order-list table tr.filter-row td select { height: 25px; }

.order-list-view .order-list table tr.filter-row td input { height: 21px; }

.order-list-view .order-list table select .select-placeholder { color: darkgray; }

.order-list-view .order-list table .filter-tag-row .filter-tag { background-color: #f1f1f1; border-radius: 25px; color: darkgray; font-size: 0.8rem; font-style: italic; padding: 2px 4px; }

.order-list-view .order-list table .filter-tag-row .filter-tag button { background-color: #f1f1f1; border: 0; color: darkgray; font-size: 0.8rem; font-style: italic; margin-left: 2px; }

.order-list-view .new-order td { background-color: #c7e6c7; }

.order-list-view .sort-button { background: none; border: 0; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/support/_support.scss */
.support-view-center { margin: auto; position: relative; text-align: center; }

.gray-background { background-color: #f5f5f5; }

.support-view { left: 0; }

.support-view .view-content-area { font-size: 1rem; }

.support-view .view-content-area .support-view-container { display: flex; flex-direction: column; overflow-x: hidden; }

.support-view .view-content-area .support-view-container .support-header { background-color: #ffffff; border-bottom: 0.5px solid #c6c6c6; display: flex; flex-direction: column; justify-content: center; padding-bottom: 3.25em; padding-left: 10.125em; padding-top: 3.25em; width: 100%; }

.support-view .view-content-area .support-view-container .support-header .title { color: #000000; font-family: 'Roboto', sans-serif; font-size: 1.875rem; font-weight: 500; line-height: 1.2; }

.support-view .view-content-area .support-view-container .support-header .sub-title { color: #000000; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.3125; }

.support-view .view-content-area .support-view-container .support-body { align-items: center; display: flex; flex-direction: column; padding: 0 10.125em 2.5em; }

.support-view .view-content-area .support-view-container .support-body .support-section { align-items: center; background-color: #ffffff; border-radius: 5px; display: flex; margin-top: 2.5em; padding: 10px; width: 100%; /* Smartphone Portrait and Landscape */ /* Smartphone Portrait and Landscape */ }

.support-view .view-content-area .support-view-container .support-body .support-section .support-left-section { border-right: 0.5px solid #d8d8d8; height: 100%; padding: 0.45em 0.9em 0.45em 0.45em; width: 4em; }

.support-view .view-content-area .support-view-container .support-body .support-section .support-right-section { padding-left: 0.9em; }

.support-view .view-content-area .support-view-container .support-body .support-section .support-right-section a { font-family: 'Roboto', sans-serif; font-size: 1.125rem; font-weight: 600; text-decoration: none; }

.support-view .view-content-area .support-view-container .support-body .support-section .support-right-section a:visited { color: #0000ff; }

.support-view .view-content-area .support-view-container .support-body .support-section .support-right-section .support-type-details { color: #666666; font-family: 'Roboto', sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.3125; }

.support-view .view-content-area .support-view-container .support-body .support-section .mobile-show { display: none; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .support-view .view-content-area .support-view-container .support-body .support-section .mobile-show { display: inline; } }

.support-view .view-content-area .support-view-container .support-body .support-section .mobile-hide { display: inline; }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { .support-view .view-content-area .support-view-container .support-body .support-section .mobile-hide { display: none; } }

.support-view h1 { color: #000000; font-size: 2rem; margin-bottom: 20px; margin-top: 20px; }

.support-view .support-phone-number { font-size: 1.6rem; font-weight: bold; margin-bottom: 5px; margin-top: 15px; }

.support-view .support-phone-number img { height: 25px; vertical-align: middle; width: 25px; }

.support-view .ed-counselor-hours { font-weight: bold; }

.support-view .link-box { background-color: #f9f9f9; font-weight: bold; margin-left: 10%; margin-top: 40px; width: 80%; }

.support-view .link-box .link-box-header { background-color: #dbeaf4; border: 1px solid #4483cc; color: #2870c4; padding-bottom: 5px; padding-top: 5px; text-align: center; }

.support-view .link-box .support-link { border: 1px solid #4483cc; border-top: 0; padding-bottom: 10px; padding-left: 20px; padding-top: 10px; }

.support-view .link-box .support-link a { color: blue; text-decoration: none; }

.support-view .link-box .support-link a:hover { color: blue; text-decoration: underline; }

.support-view .link-box .support-link img { height: 25px; margin-right: 8px; vertical-align: middle; width: 25px; }

.support-view .link-box .two-column { width: 100%; /* .left { box-sizing: border-box; display: table-cell; width: 50%; } .right { box-sizing: border-box; display: table-cell; width: 50%; } */ }

.support-view .demo header { background-color: #195aaa; display: table; height: 80px; margin: 0 auto; width: 600px; }

.support-view .demo article { background-color: #f4f4f4; box-sizing: border-box; color: #505050; font-size: 1.125rem; margin: 0 auto; overflow: hidden; padding: 20px; width: 600px; }

.support-view .demo footer { background-color: #195aaa; height: 80px; margin: 0 auto; width: 600px; }

/* END: views/support/_support.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/lesson-manuals/_lesson-manuals.scss */
.view.lesson-manuals-view { overflow: hidden; }

.lesson-manuals-view { background-color: #f5f5f5; }

.lesson-manuals-view h1 { background-color: inherit; color: #686b69; text-align: center; font-size: xx-large; }

.lesson-manuals-view h2 { text-align: center; color: #686b69; margin: 0; }

.lesson-manuals-view section.description { padding: 2em; }

.lesson-manuals-view section.description ul { margin-left: 1em; font-weight: bold; }

.lesson-manuals-view section.grade-level-tabs { text-align: center; }

.lesson-manuals-view section.grade-level-tabs p { font-weight: bold; }

.lesson-manuals-view section.grade-level { display: none; padding: 2em; }

.lesson-manuals-view section.grade-level h1 { text-align: left; padding: 0; padding-bottom: 0.75em; color: black; font-weight: bold; }

.lesson-manuals-view section.grade-level.selected { display: block; }

.lesson-manuals-view section.grade-level a.lesson-link { background-color: #0099db; border-radius: 6px; color: white; padding: 1em; font-weight: bold; margin: 0.25em; line-height: 4em; }

.lesson-manuals-view button { background-color: #0099db; border: none; border-radius: 6px; color: white; padding: 1em; }

.lesson-manuals-view button.selected { background-color: #dddddd; color: #ea5f5f; }

/* END: views/lesson-manuals/_lesson-manuals.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: calculations/_calculations.scss */
.calculations-view { left: 0; }

.calculations-view .content-area-for-simple-nav { font-size: 1.375rem; margin-top: 20px; padding-left: 10%; width: 80%; }

.calculations-view .outside-header { color: #2183d5; font-size: 1.625rem; font-weight: bold; margin-bottom: 10px; }

.calculations-view .inside-header { font-size: 1.625rem; font-weight: bold; margin-bottom: 10px; }

.calculations-view .inside-sub-header { font-weight: bold; margin-bottom: 10px; }

.calculations-view .quick-stats-details { background-color: #faf5f0; border-radius: 8px; padding: 10px 0; }

.calculations-view .quick-stats-details table { border-collapse: collapse; }

.calculations-view .quick-stats-details table tr td { border-top: 1px solid #8dbfd3; padding: 10px 20px; }

.calculations-view .quick-stats-details table tr .quick-stat-name { font-weight: bold; width: 20%; }

.calculations-view .quick-stats-details table tr.first td { border-top: 0; }

.calculations-view .tile-container { border-spacing: 10px 5px; margin-top: 10px; }

.calculations-view .tile-container .left { box-sizing: border-box; display: table-cell; width: 48%; }

.calculations-view .tile-container .right { box-sizing: border-box; display: table-cell; width: 50%; }

.calculations-view .two-column-container { margin-top: 25px; }

.calculations-view .two-column-container .left { border-right: 1px solid #8dbfd3; box-sizing: border-box; display: table-cell; padding-right: 15px; width: 49%; }

.calculations-view .two-column-container .right { box-sizing: border-box; display: table-cell; padding-left: 25px; }

.calculations-view .tile-header { font-weight: bold; margin-bottom: 5px; }

.calculations-view .tile-green { background-color: #66ce00; border-radius: 8px; color: #ffffff; padding: 15px; }

.calculations-view .tile-yellow { background-color: #676b69; border-radius: 8px; color: #ffffff; padding: 15px; }

.calculations-view .tile-red { background-color: red; border-radius: 8px; color: #ffffff; margin-top: 10px; padding: 15px; }

.calculations-view .tile-grey { background-color: #c2c2c2; border-radius: 8px; margin-top: 10px; padding: 15px; }

.calculations-view .details-container { background-color: #f0faf0; border-radius: 8px; margin-top: 25px; padding: 20px; }

.calculations-view .details-container:last-child { background-color: #f0fafa; }

.calculations-view .bordered-tile { border: 1px solid #8dbfd3; border-radius: 8px; margin-top: 15px; padding: 20px; }

.calculations-view .gauge-container { border-top: 1px solid #8dbfd3; margin-bottom: 20px; padding-top: 20px; }

.calculations-view .gauge-container .left { box-sizing: border-box; display: table-cell; padding-right: 20px; width: 420px; }

.calculations-view .gauge-container .right { box-sizing: border-box; display: table-cell; padding-left: 20px; vertical-align: middle; width: calc(100% - $gauge-width); }

.calculations-view .gauge-container.first { border-top: 0; }

.calculations-view .gauge { background-position: top; background-repeat: no-repeat; background-size: 100% 100%; border: 1px solid whitesmoke; font-size: 1.625rem; font-weight: bold; height: 150px; margin-top: 20px; text-align: center; width: 420px; }

.calculations-view .gauge div { margin-top: 100px; }

.calculations-view .gauge-high { background-image: url("/dist/images/rank-chart-high.svg"); color: #66ce00; }

.calculations-view .gauge-med { background-image: url("/dist/images/rank-chart-med.svg"); color: #676b69; }

.calculations-view .gauge-low { background-image: url("/dist/images/rank-chart-low.svg"); color: red; }

.view.calculations-view.reports-calculations-view .details-container { background-color: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; font-size: 0.9375rem; }

.view.calculations-view.reports-calculations-view .details-container table { background-color: #f5f5f5; border-collapse: separate; border-radius: 4px; border-spacing: 0 5px; font-size: 0.9375rem; text-align: left; width: 100%; }

.view.calculations-view.reports-calculations-view .details-container table tr { background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 20px; }

.view.calculations-view.reports-calculations-view .details-container table tr td { border-bottom: 1px solid #e0e0e0; border-radius: 4px; border-top: 1px solid #e0e0e0; font-size: 0.9375rem; padding: 10px; }

.view.calculations-view.reports-calculations-view .details-container table tr td:first-child { border-left: 1px solid #e0e0e0; font-weight: bold; }

.view.calculations-view.reports-calculations-view .details-container table tr td:last-child { border-right: 1px solid #e0e0e0; }

/* END: calculations/_calculations.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/inbox/_inbox.scss */
.view.inbox-view { overflow: hidden; }

.inbox-view { background-color: #ffffff; /* Create a custom checkbox */ /* On mouse-over, add a grey background color */ /* When the checkbox is checked, add a blue background */ /* Create the checkmark/indicator (hidden when not checked) */ /* Show the checkmark when checked */ /* Style the checkmark/indicator */ }

.inbox-view .content-area-for-simple-nav { height: calc(100% - 75px); }

.inbox-view .inbox-header { font-size: 1.5rem; font-weight: 700; margin-bottom: 20px; padding-left: 30px; padding-top: 1em; }

.inbox-view .inbox-header .unreadCount { border: 2px solid #115aa6; border-radius: 25%; color: #115aa6; font-size: 0.6rem; margin-left: 0.3em; padding-left: 3px; padding-right: 3px; vertical-align: middle; }

.inbox-view .inbox-header .new-message-btn > div { color: #4483cd; float: right; margin-right: 20px; position: relative; top: -10px; }

.inbox-view .inbox-header .new-message-btn { left: 10px; position: relative; top: -2px; }

.inbox-view .inbox-header .new-message-btn .label { font-size: 0.6rem; position: relative; vertical-align: middle; }

.inbox-view .inbox-header .new-message-btn .left-divider { border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 1px; height: 35px; width: 1px; }

.inbox-view .inbox-header .new-message-btn .envelope-icon { font-size: 1.2rem; }

.inbox-view .inbox-header .new-message-btn .add-icon { position: absolute; top: 8px; left: 28px; font-size: 0.6rem; text-shadow: -1px -1px white; }

.inbox-view .inbox-operations { align-items: center; display: flex; padding: 0 30px; flex-direction: row; justify-content: space-between; }

.inbox-view .inbox-operations .inbox-buttons { margin-left: 5px; padding: 5px 5px 3px; text-transform: none; }

.inbox-view .inbox-operations .markAsRead, .inbox-view .inbox-operations .pagination { display: flex; align-items: center; justify-content: flex-start; }

.inbox-view .inbox-operations .pagination { justify-content: flex-end; }

.inbox-view .inbox-operations .pagination span { display: inline-block; padding: 0 10px; text-align: center; width: 50px; }

.inbox-view .inbox-operations .pagination .calvert-flat-btn { padding: 6px 16px; margin-left: 0px; }

.inbox-view .thread-list { height: calc(100% - 75px); list-style-type: none; }

.inbox-view .thread-list .thread-item { background-color: #ffffff; border-color: rgba(60, 106, 179, 0.4); border-radius: 6px; border-style: solid; border-width: 1px; margin: 10px; padding-bottom: 5px; }

.inbox-view .thread-list .thread-item .thread-container .message-list { list-style-type: none; min-width: 100%; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item.not-first { position: relative; right: -28px; width: calc(100% - 45px); }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item { background: linear-gradient(to bottom, #ffffff 50%, #f1f1f1 100%); min-height: 80px; border-radius: 6px; border-style: solid; border-width: 1px; display: flex; margin-left: 8px; margin-right: 8px; margin-top: 8px; flex-direction: row; align-items: stretch; justify-content: flex-start; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container { padding: 10px; width: 100%; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-icon { float: left; height: 70px; margin-right: 5px; width: 45px; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-icon svg { fill: #606061; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-icon.new svg { fill: black; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-author { color: #606061; font-family: sans-serif; font-size: 1.1rem; font-weight: 500; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-author.new { color: #3c6ab3; font-weight: 600; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-subject { color: #606061; font-family: 'Roboto', sans-serif; font-size: 0.85rem; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-subject.new { color: #000000; font-size: 1rem; font-weight: bolder; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body { font-family: sans-serif; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body p { color: #606061; margin: 0; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body p.new { color: #000000; font-weight: bold; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body.truncated { color: #606061; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body.truncated.new { color: #000000; font-weight: 400; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body.truncated { /* use this value to count block height */ line-height: 1.625em; /* max-height = line-height (1.2) * lines max number (3) */ max-height: 1.625em; /* hide text if it more than N lines  */ overflow: hidden; /* */ padding-right: 1em; /* for set '...' in absolute position */ position: relative; /* fix problem when last visible word doesn't adjoin right side  */ text-align: justify; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body.truncated::before { bottom: 0; /* points in the end */ content: '...'; /* absolute position */ position: absolute; /* set position to right bottom corner of block */ right: 0; }

.inbox-view .thread-list .thread-item .thread-container .message-list .message-item .message-container .message-body.truncated::after { /* set width and height */ background: #ffffff; /* points in the end */ content: ''; /* absolute position */ position: absolute; /* set position to right bottom corner of text */ right: 0; width: 1em; }

.inbox-view .thread-list .thread-item .thread-selector-container { padding-left: 10px; display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 35px; }

.inbox-view .thread-list .thread-item .thread-selector-container .checkbox-container { width: 20px; height: 20px; margin: 0px 15px 0 6px; padding-left: 0; }

.inbox-view .thread-list .thread-item.new { background-color: rgba(60, 106, 179, 0.2); }

.inbox-view .thread-list .message-indent { border-left: 2px solid #e0e0e0; margin-left: 20px; padding-left: 10px; }

.inbox-view .message-controls { display: flex; flex-direction: row; justify-content: flex-end; align-items: flex-start; flex: 0 0 auto; padding: 10px; }

.inbox-view .message-controls .reply-link { float: right; margin-right: 16px; margin-top: 5px; }

.inbox-view .message-controls .reply-link .fa-reply { color: #4583cc; }

.inbox-view .message-controls .message-expansion-icon { color: #3c6ab3; float: right; font-size: 1.2rem; margin-left: 16px; }

.inbox-view .message-controls .date-details { float: right; font-family: sans-serif; position: relative; right: 0px; top: 5px; }

.inbox-view .message-controls .date-details .day-text { color: #3c6ab3; font-weight: bold; }

.inbox-view .checkbox-container { cursor: pointer; display: block; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.inbox-view .checkbox-container .checkbox-text { font-style: italic; margin-right: 20px; }

.inbox-view .centerd-checkbox { margin-top: 100%; }

.inbox-view .checkbox-container input { cursor: pointer; opacity: 0; position: absolute; }

.inbox-view .checkmark { background-color: #eeeeee; border-radius: 5px; height: 20px; left: 0; position: absolute; top: 0; width: 20px; }

.inbox-view .checkbox-container:hover input ~ .checkmark { background-color: #cccccc; }

.inbox-view .checkbox-container input:checked ~ .checkmark-white { background-color: #25408d; }

.inbox-view .checkmark::after { content: ''; display: none; position: absolute; }

.inbox-view .checkbox-container input:checked ~ .checkmark::after { display: block; }

.inbox-view .checkbox-container .checkmark-white::after { border: solid white; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

.inbox-view .checkbox-container .checkmark-black::after { border: solid #000000; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

/* END: views/inbox/_inbox.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: messages/_messages.scss */
/* END: messages/_messages.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/messages/_send-message.scss */
.send-message-view { height: calc(100% - 40px); overflow: hidden; position: absolute; width: 100%; }

.send-message-view h1 { color: limegreen; margin: 0; }

.view.send-message-view.sidenav-closed { width: calc(100%); }

/* END: views/messages/_send-message.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/messages/_student-all-clazzes-send-message.scss */
.view.student-all-clazzes-send-message-view { overflow: hidden; position: absolute; width: 100%; }

.view.student-all-clazzes-send-message-view.sidenav-closed { width: calc(100%); }

.student-all-clazzes-send-message-view { box-sizing: border-box; display: flex; flex-direction: column; height: calc(100% - 60px); overflow-x: scroll; }

/* END: views/messages/_student-all-clazzes-send-message.scss */
/* ========================================================================= */
.view.send-message-view.student-clazz-send-message-view { width: 100%; }

/* ------------------------------------------------------------------------- */
/* BEGIN: views/messages/_call.scss */
.call-view { height: calc(100% - 40px); overflow: hidden; position: absolute; width: 100%; }

.call-view h1 { color: limegreen; margin: 0; }

/* END: views/messages/_call.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/milestones/_milestones-settings.scss */
.view.milestones-settings-view { overflow: hidden; }

.milestones-settings-view { background-color: #ffffff; box-sizing: border-box; font-weight: bold; height: 100%; left: 0; overflow: auto; width: 100%; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.milestones-settings-view .content-area-for-simple-nav { height: calc(100% - 62px); }

.milestones-settings-view .admin-header { background-color: #ffffff; border-bottom: solid 1px #4483cc; font-family: 'Roboto', sans-serif; font-weight: 300; margin-bottom: 20px; min-height: 40px; position: relative; }

.milestones-settings-view .admin-header .header-content { display: inline-block; }

.milestones-settings-view .admin-header .header-content .title { display: inline-block; font-size: 1.8rem; font-weight: 700; margin: 20px; }

.milestones-settings-view .admin-header .actions { cursor: pointer; float: right; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

.milestones-settings-view .admin-header .actions .action { color: #115aa6; float: left; margin-left: 30px; }

.milestones-settings-view .admin-header .actions .action.danger { color: red; }

.milestones-settings-view .card-wrapper { display: block; float: left; }

.milestones-settings-view .card-wrapper .clazz-card-component { height: 192px; width: 192px; }

.milestones-settings-view .card-wrapper .clazz-lesson-count { clear: both; padding: 10px 20px; width: 280px; }

.milestones-settings-view .card-wrapper .clazz-name { font-size: 1.125rem; left: 40px; top: 45px; }

.milestones-settings-view .milestones-details { background-color: #fbfafa; border: 1px solid #d7d7d7; border-top: 0; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; float: right; margin-right: 20px; margin-top: 20px; width: calc(100% - 255px); }

.milestones-settings-view .milestones-details ul { list-style-type: none; }

.milestones-settings-view .milestones-details h1 { background-color: #115aa6; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-radius: 5px; color: #ffffff; font-size: 1.3rem; font-weight: 300; margin: 0; margin-bottom: 10px; padding: 10px; }

.milestones-settings-view .milestones-details .toggle-entry { height: 28px; padding-left: 10px; width: 40%; }

.milestones-settings-view .milestones-details .toggle-entry label:nth-child(1) { float: left; }

.milestones-settings-view .milestones-details .toggle-entry label:nth-child(2) { float: right; text-align: right; }

.milestones-settings-view .milestones-details .date-entry { display: flex; height: 28px; padding-left: 10px; width: 100%; }

.milestones-settings-view .milestones-details .date-entry label { flex: 0 0 230px; }

.milestones-settings-view .milestones-details .date-entry input[type='text'] { text-align: right; width: 105px; }

.milestones-settings-view .milestones-details .date-entry input[type='text']::-moz-placeholder { color: #d3d3d3; }

.milestones-settings-view .milestones-details .date-entry input[type='text']::placeholder { color: #d3d3d3; }

.milestones-settings-view .milestones-details .date-entry span { color: #ff0000; flex: 1; font-size: 0.95rem; padding-left: 10px; position: relative; top: 5px; }

.milestones-settings-view .milestones-details .class-list { margin-top: 10px; }

.milestones-settings-view .milestones-details .class-list > .list-header { display: flex; justify-content: space-between; }

.milestones-settings-view .milestones-details .class-list > .list-header label { padding-left: 10px; }

.milestones-settings-view .milestones-details .class-list > .list-header .checkbox-header { display: flex; flex-direction: column; justify-content: center; text-align: right; }

.milestones-settings-view .milestones-details .class-list > .list-header .checkbox-header a { padding-right: 10px; }

.milestones-settings-view .milestones-details .class-list ul li { display: flex; justify-content: space-between; }

.milestones-settings-view .milestones-details .class-list ul li span.class-title { font-size: 1rem; font-weight: lighter; padding: 8px; position: relative; top: 50%; }

.milestones-settings-view .milestones-details .class-list ul li .calvert-checkbox { margin-top: 6px; right: 20px; }

.milestones-settings-view .milestones-details .class-list ul li:nth-child(even) { background-color: #dddddd; }

.milestones-settings-view .milestones-details .class-list ul li:nth-child(odd) { background-color: #eeeeee; }

.milestones-settings-view .milestones-details .class-list ul .calvert-checkbox label { background-color: #ffffff; }

.milestones-settings-view .toggle-switch { align-items: stretch; display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; height: 100%; margin-left: 10px; margin-right: 10px; width: 100%; }

.milestones-settings-view .switch-title { flex: 0 0 220px; padding: 0.75em 5px 0.75em 0; }

.milestones-settings-view .switch-container { padding: 0.25em 0 0 0.5em; text-align: right; width: 105px; }

.milestones-settings-view .switch { display: inline-block; height: 20px; position: relative; top: 7px; width: 70px; }

.milestones-settings-view .switch input { display: none; }

.milestones-settings-view .slider-off { background-color: #ed2024; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.milestones-settings-view .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.milestones-settings-view .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.milestones-settings-view input:checked + .slider-on::before { transform: translateX(50px); }

.milestones-settings-view .on { display: none; }

.milestones-settings-view .on, .milestones-settings-view .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }

.milestones-settings-view input:checked + .slider .on { display: block; }

.milestones-settings-view .slider.round { border-radius: 34px; }

.milestones-settings-view .slider.round::before { border-radius: 50%; }

.milestones-settings-view .download-options-container { display: flex; flex-direction: row; }

.milestones-settings-view .download-options-container .download-button { margin-bottom: 10px; margin-left: 10px; }

.milestones-settings-view .download-options-container .download-button button { background-color: #64be34; color: #ffffff; font-family: 'Roboto', sans-serif; font-weight: bold; padding: 8px; }

.milestones-settings-view .download-options-container .download-button button:disabled { background-color: #dddddd; cursor: default; }

.milestones-settings-view .download-options-container .labeled-checkbox { cursor: pointer; display: flex; margin-left: 10px; padding-left: 35px; position: relative; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

.milestones-settings-view .download-options-container .labeled-checkbox input { cursor: pointer; opacity: 0; position: absolute; }

.milestones-settings-view .download-options-container .labeled-checkbox .checkmark::after { content: ''; display: block; position: absolute; }

.milestones-settings-view .download-options-container .labeled-checkbox .checkmark-black::after { border: solid #2183d5; border-width: 0 3px 3px 0; height: 10px; left: 6px; top: 2px; transform: rotate(45deg); width: 5px; }

.milestones-settings-view .download-options-container .labeled-checkbox.disabled { color: #808080; }

.milestones-settings-view .download-options-container .labeled-checkbox .unchecked::after { color: #000000; display: none; }

.milestones-settings-view .download-options-container span.checkmark-label { left: -10px; position: relative; top: 7px; }

.milestones-settings-view .download-options-container span.checkmark-label.disabled { color: #808080; }

.milestones-settings-view div.notice { color: #ff0000; font-weight: 300; left: 10px; padding-bottom: 8px; position: relative; }

.milestones-settings-view form { margin: 10px; }

.milestones-settings-view form span { font-size: 0.875rem; font-weight: normal; }

.milestones-settings-view form label { display: block; padding-bottom: 4px; }

.milestones-settings-view form p { margin: 0 0 16px 0; }

.milestones-settings-view form .form-field { margin-bottom: 16px; width: 100%; }

.milestones-settings-view form .form-field input { width: 75%; }

/* END: views/milestones/_milestones-settings.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: views/settings/_settings.scss */
.view.settings-view { overflow: hidden; }

.settings-view { background-color: #ffffff; box-sizing: border-box; font-weight: bold; height: 100%; left: 0; overflow: auto; width: 100%; /*------ ADDED CSS ---------*/ /*--------- END --------*/ /* Rounded sliders */ }

.settings-view .content-area-for-simple-nav { height: calc(100% - 62px); }

.settings-view .courses-filter { background-color: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; display: flex; flex-direction: column; margin: 8px; padding: 8px; }

.settings-view .courses-filter h3 { background-color: #115aa6; border-radius: 3px; color: #ffffff; font-size: 1rem; font-weight: normal; line-height: 18px; margin: 0; padding: 8px; }

.settings-view .courses-filter form { padding: 8px; }

.settings-view .courses-filter form span { font-size: 0.875rem; font-weight: normal; }

.settings-view .courses-filter form select { right: 0; }

.settings-view .admin-header { background-color: #ffffff; border-bottom: solid 1px #4483cc; font-family: 'Roboto', sans-serif; font-weight: 300; margin-bottom: 20px; min-height: 40px; position: relative; }

.settings-view .admin-header .header-content { display: inline-block; }

.settings-view .admin-header .header-content .title { display: inline-block; font-size: 1.8rem; font-weight: 700; margin: 20px; }

.settings-view .admin-header .actions { cursor: pointer; float: right; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }

.settings-view .admin-header .actions .action { color: #115aa6; float: left; margin-left: 30px; }

.settings-view .admin-header .actions .action.danger { color: red; }

.settings-view .card-wrapper { display: block; float: left; }

.settings-view .card-wrapper .clazz-card-component { height: 192px; width: 192px; }

.settings-view .card-wrapper .clazz-lesson-count { clear: both; padding: 10px 20px; width: 280px; }

.settings-view .card-wrapper .clazz-name { font-size: 1.125rem; left: 40px; top: 45px; }

.settings-view .settings-details { background-color: #fbfafa; border: 1px solid #d7d7d7; float: right; margin-right: 20px; margin-top: 20px; width: calc(100% - 255px); }

.settings-view .settings-details ul { list-style-type: none; }

.settings-view .settings-details h1 { background-color: #115aa6; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-radius: 5px; color: #ffffff; font-size: 1.3rem; font-weight: 300; margin: 0; margin-bottom: 10px; padding: 10px; }

.settings-view .settings-details .toggle-entry { height: 28px; padding-left: 10px; width: 40%; }

.settings-view .settings-details .toggle-entry label:nth-child(1) { float: left; }

.settings-view .settings-details .toggle-entry label:nth-child(2) { float: right; text-align: right; }

.settings-view .settings-details .date-entry { display: flex; height: 28px; padding-left: 10px; width: 100%; }

.settings-view .settings-details .date-entry label { flex: 0 0 230px; }

.settings-view .settings-details .date-entry input[type='text'] { text-align: right; width: 105px; }

.settings-view .settings-details .date-entry input[type='text']::-moz-placeholder { color: #d3d3d3; }

.settings-view .settings-details .date-entry input[type='text']::placeholder { color: #d3d3d3; }

.settings-view .settings-details .date-entry span { color: #ff0000; flex: 1; font-size: 0.95rem; padding-left: 10px; position: relative; top: 5px; }

.settings-view .settings-details .class-list { margin-top: 10px; }

.settings-view .settings-details .class-list > .list-header { display: flex; justify-content: space-between; }

.settings-view .settings-details .class-list > .list-header label { padding-left: 10px; }

.settings-view .settings-details .class-list > .list-header .checkbox-header { display: flex; flex-direction: column; justify-content: center; text-align: right; }

.settings-view .settings-details .class-list > .list-header .checkbox-header a { padding-right: 10px; }

.settings-view .settings-details .class-list ul li { display: flex; justify-content: space-between; }

.settings-view .settings-details .class-list ul li span.class-title { font-size: 1rem; font-weight: lighter; padding: 8px; position: relative; top: 50%; }

.settings-view .settings-details .class-list ul li .calvert-checkbox { margin-top: 6px; right: 20px; }

.settings-view .settings-details .class-list ul li:nth-child(even) { background-color: #dddddd; }

.settings-view .settings-details .class-list ul li:nth-child(odd) { background-color: #eeeeee; }

.settings-view .settings-details .class-list ul .calvert-checkbox label { background-color: #ffffff; }

.settings-view .toggle-switch { align-items: center; display: flex; flex-direction: row; font-family: 'Roboto', sans-serif; height: 100%; margin-left: 10px; margin-right: 10px; width: 100%; }

.settings-view .switch-title { flex: 0 0 220px; padding: 0.75em 5px 0.75em 0; }

.settings-view .switch-container { padding: 0.25em 0 0 0.5em; text-align: right; width: 105px; }

.settings-view .switch { display: inline-block; height: 20px; position: relative; top: 7px; width: 70px; }

.settings-view .switch input { display: none; }

.settings-view .slider-off { background-color: #ed2024; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.settings-view .slider::before { background-color: #ffffff; bottom: 3px; content: ''; height: 15px; left: 3px; position: absolute; transition: 0.2s; width: 15px; }

.settings-view .slider-on { background-color: #64be34; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: 0.4s; }

.settings-view input:checked + .slider-on::before { transform: translateX(50px); }

.settings-view .on { display: none; }

.settings-view .on, .settings-view .off { color: #ffffff; font-family: Verdana, sans-serif; font-size: 0.625rem; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }

.settings-view input:checked + .slider .on { display: block; }

.settings-view .slider.round { border-radius: 34px; }

.settings-view .slider.round::before { border-radius: 50%; }

.settings-view .section.course-selection-section { box-sizing: inherit; margin-bottom: 20px; margin-right: 20px; margin-top: 20px; overflow: auto; padding: 0; float: right; width: calc(100% - 192px - 60px); }

.settings-view .course-selection-section { background-color: #fbfafa; border: 1px solid #d7d7d7; border-top: 0; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }

.settings-view .course-selection-section h3 { background-color: #115aa6; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; color: #ffffff; font-size: 1.3rem; font-weight: 300; margin: 0; padding: 10px; }

.settings-view .course-selection-section form { margin: 10px; }

.settings-view .course-selection-section form span { font-size: 0.875rem; font-weight: normal; }

.settings-view .course-selection-section .class-notice { color: #ff0000; font-size: 1rem; font-weight: 300; margin-bottom: 20px; margin-left: 10px; }

.settings-view .checklist-section { display: flex; flex-wrap: wrap; font-weight: normal; }

.settings-view .checklist { list-style-type: none; min-width: 340px; padding: 10px; }

.settings-view .checklist li { font-size: 0.875rem; margin: 2px 0; }

.settings-view input[type='checkbox'] + label { color: #d3d3d3; }

.settings-view input[type='checkbox']:checked + label { color: #000000; }

/* END: views/settings/_settings.scss */
/* ========================================================================= */
/* ------------------------------------------------------------------------- */
/* BEGIN: common/_common-overrides.scss */
.no-transition { transition: none; }

/* END: common/_common-overrides.scss */
/* ========================================================================= */
.lesson-view .lesson-content ul:not(.lrn_toolbar_left) { display: block; list-style-type: disc; -webkit-margin-after: 1em; -webkit-margin-before: 1em; -webkit-margin-end: 0; -webkit-margin-start: 2.5em; -webkit-padding-start: 0 !important; }

.lesson-view .lesson-content ul:not(.lrn_toolbar_left) ul { display: block; list-style-type: circle; -webkit-margin-after: 0.25em; -webkit-margin-before: 0; -webkit-margin-end: 0; -webkit-margin-start: -1.25em; -webkit-padding-start: 40px !important; }

.lesson-view .lesson-content ul:not(.lrn_toolbar_left) ul li { list-style-type: circle; }

.lesson-view .lesson-content :not(.lrn_response_input) ol { display: block; list-style-type: decimal; -webkit-margin-after: 1em; -webkit-margin-before: 1em; -webkit-margin-end: 0; -webkit-margin-start: 2.5em; -webkit-padding-start: 0 !important; }

.lesson-view .lesson-content :not(.lrn_response_input) ol ol { display: block; list-style-type: lower-alpha; -webkit-margin-after: 0.25em; -webkit-margin-before: 0; -webkit-margin-end: 0; -webkit-margin-start: -1.25em; -webkit-padding-start: 40px !important; }

.lesson-view .lesson-content :not(.lrn_response_input) ol ol li { list-style-type: lower-alpha; }

.lesson-view .lesson-content :not(.lrn_response_input) ol ul { display: block; list-style-type: circle; -webkit-margin-after: 0.25em; -webkit-margin-before: 0; -webkit-margin-end: 0; -webkit-margin-start: -1.2em; -webkit-padding-start: 40px !important; }

.lesson-view .lesson-content :not(.lrn_response_input) ol ul li { list-style-type: circle; }

.lesson-view .lesson-content blockquote p { color: #000000; display: block; font-family: 'Georgia', 'Cambria', 'Hoefler Text', 'Times', 'Times New Roman', 'serif'; font-size: 1.045em; font-weight: 400; letter-spacing: 0.017em; line-height: 1.6125em; -webkit-margin-after: 1.75em; -webkit-margin-before: 1.75em; -webkit-margin-end: 3em; -webkit-margin-start: 3em; word-spacing: 0.05em; }

.lesson-view .lesson-content .embed-240p { margin: 0 auto; max-height: 240px; max-width: 426px; }

.lesson-view .lesson-content .embed-360p { margin: 0 auto; max-height: 360px; max-width: 640px; }

.lesson-view .lesson-content .embed-480p { margin: 0 auto; max-height: 480px; max-width: 854px; }

.lesson-view .lesson-content .embed-720p { margin: 0 auto; max-height: 720px; max-width: 1280px; }

.lesson-view .lesson-content .embed-1080p { margin: 0 auto; max-height: 1080px; max-width: 1920px; }

/* stylelint-enable */
/* END: styles.scss */
/* ========================================================================= */