@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700,700i&display=swap);
@charset "UTF-8";

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1,
.editable--help--h1-heading {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 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
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 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 */
}

/**
 * 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 size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 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;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * 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;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 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 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

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 in Chrome and Safari on macOS.
 */

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* Set draggable elements for safari
*/

[draggable=true] {
  -khtml-user-drag: element;
}

/**
 * 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 Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/**
* Remove webkit outline on focus
*/

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-Light.ttf?8e4b01844ace913e46fc5023f57a2cfc) format("truetype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-Regular.ttf?37a4d906e92edcd9484c83065d6a1838) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-Medium.ttf?4ddab52b8ff256c808344c15164118c6) format("truetype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-Bold.ttf?d6173c485abd77e07f4bd8342c35cbe6) format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-Black.ttf?1e6fa1dea7576c4673fb54234bf2507f) format("truetype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "OpenCL";
  src: url(/fonts/OpenSans-Regular.ttf?1b0809d519837cb7aad36a73433f655c) format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "OpenCL";
  src: url(/fonts/OpenSans-SemiBold.ttf?a16d8201b06a03c6c365341748a5cba0) format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "OpenCL";
  src: url(/fonts/OpenSans-Bold.ttf?dbb97fd982ce1b96b6de90a9f1c2ecaa) format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-LightItalic.ttf?9e78ffc36d6ec1f72822bda1ada204ce) format("truetype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-Italic.ttf?d8523505d6112979022c9601be948307) format("truetype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-MediumItalic.ttf?ed3ef1e51c95266ab847a16f319e7cbd) format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-BoldItalic.ttf?53884386468c3ae6b3065909488606c5) format("truetype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "RubikCL";
  src: url(/fonts/Rubik-BlackItalic.ttf?ef6cbe4e36e8d9d00ad62ef342a9e823) format("truetype");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: "OpenCL";
  src: url(/fonts/OpenSans-Italic.ttf?20653d2fac6285bf4deac9919fcb434d) format("truetype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "OpenCL";
  src: url(/fonts/OpenSans-BoldItalic.ttf?9572470e485d8e0fd2adc5b2559bb072) format("truetype");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "Annie Use Your Telescope";
  src: url(/fonts/Annie_Use_Your_Telescope_regular.ttf?d840ec50cdcce00149009c184a0248fa) format("truetype");
  font-weight: normal;
  font-style: normal;
}

html {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1,
.editable--help--h1-heading,
h2,
#adminLayout .admin-assessment-intro--heading,
#adminLayout .admin-lesson-intro--heading,
.admin-homework--heading,
.assessment-builder--heading,
.teacher-pre-assessment--heading,
.editable--help--h2-heading,
h3,
h4,
h5,
.modal--upload-spinner,
h6 {
  font-family: "RubikCL", "Rubik", sans-serif;
}

p,
a,
strong,
small {
  font-family: "OpenCL", "Open Sans", sans-serif;
}

h1,
.editable--help--h1-heading {
  font-size: 21px;
  color: #333333;
  font-weight: 500;
  line-height: 34px;
}

h2,
#adminLayout .admin-assessment-intro--heading,
#adminLayout .admin-lesson-intro--heading,
.admin-homework--heading,
.assessment-builder--heading,
.teacher-pre-assessment--heading,
.editable--help--h2-heading {
  font-size: 30px;
  font-weight: 400;
  color: #444444;
  line-height: 34px;
}

h3 {
  font-size: 27px;
  font-weight: 500;
  color: #333333;
  line-height: 21px;
  font-family: "Open Sans", sans-serif;
}

p {
  font-size: 13px;
  line-height: 21px;
}

ul {
  list-style: none;
}

ul li {
  margin: 0 0 10px 0;
  padding: 0 0 0 5px;
  line-height: 1.6;
}

ul li ul {
  margin: 0 0 10px 0;
}

ol {
  counter-reset: li;
  margin: 0 0 25px 0;
  padding: 5px 0 0 0;
  padding: 0;
}

ol > li {
  position: relative;
  margin: 0 0 8px 20px;
  padding-left: 5px;
  list-style: none;
  line-height: 1.4;
}

a,
a:visited {
  color: #d0112b;
}

a:hover {
  text-decoration: underline;
}

@keyframes slideInFromBottom {
  0% {
    bottom: -300px;
  }

  100% {
    bottom: 0px;
  }
}

.material {
  width: 25%;
  height: 100px;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  margin: 0 5px 5px 0;
}

.material--pencil {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0ZGNzQ0Mzt9LnN0MXtmaWxsOiNGRkRBNDA7fS5zdDJ7ZmlsbDojRjRDQjZFO30uc3Qze2Rpc3BsYXk6bm9uZTt9LnN0NHtmaWxsOm5vbmU7c3Ryb2tlOiNCM0IzQjM7c3Ryb2tlLXdpZHRoOjY7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fS5zdDV7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS1taXRlcmxpbWl0OjEwO30uc3Q2e2Rpc3BsYXk6bm9uZTtmaWxsOm5vbmU7c3Ryb2tlOiMwMDAwMDA7c3Ryb2tlLW1pdGVybGltaXQ6MTA7fTwvc3R5bGU+PHBvbHlnb24gcG9pbnRzPSI1MCw1LjQgNDkuMSw1LjMgNDcuOCwxMS4yIDUyLjgsMTAuOSAiLz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjQyLjksODguNyA1Ni42LDg4LjYgNTYuNSw5NC44IDQzLjIsOTUuMiAiLz48cG9seWdvbiBjbGFzcz0ic3QxIiBwb2ludHM9IjQzLjksMjEuMyA1Ny4zLDIxLjEgNTcuMSw4OC4zIDQzLjcsODguNiAiLz48cG9seWdvbiBjbGFzcz0ic3QyIiBwb2ludHM9IjQ4LDExIDUyLjgsMTAuOSA1Ni40LDIxLjEgNDMuNywyMS4yICIvPjxwYXRoIGNsYXNzPSJzdDMiIGQ9Ik01OSw5Ni41YzAsMC44LTAuNywxLjUtMS41LDEuNWwtMTUsMGMtMC44LDAtMS41LTAuNy0xLjUtMS41YzAtMjUuNSwwLTUxLDAtNzYuNWw5LTE4bDksMThDNTksNDUuNSw1OSw3MSw1OSw5Ni41TDU5LDk2LjV6IE00My40LDIwbDEzLjMsMGwtNC05bC01LjMsMEw0My40LDIwTDQzLjQsMjB6IE01Nyw4OWwtMTQsMGwwLDdsMTQsMFY4OUw1Nyw4OXogTTQzLDg3bDE0LDBsMC02NWwtMTQsMEw0Myw4N3oiLz48cGF0aCBjbGFzcz0ic3Q0IiBkPSJNNTYuNSw4NS44Yy0wLjYsMC4xLTEuNiwwLTIuMy0wLjFjLTMuOS0wLjEtNy0wLjEtMTAuOS0wLjIiLz48cGF0aCBjbGFzcz0ic3Q1IiBkPSJNNDMsOTQuM2MwLTguOSwwLjEtMTQuOCwwLjEtMjMuNmMwLTMuMywwLTYuNSwwLTkuOGMwLTEyLjEsMC4xLTI0LjMsMC4xLTM2LjRjMC0xLjYsMC4yLTMuMSwwLjYtNC42YzAuNS0xLjcsMS40LTMuNCwyLjEtNWMxLjctMy44LDIuMi02LjEsMy43LTEwYzIuMyw0LjksMy43LDguOCw2LDEzLjdjMC40LDAuOSwwLjksMS44LDEuMSwyLjhjMC4zLDEuMSwwLjMsMi4zLDAuMywzLjVDNTcsMzUuMyw1Nyw0NS43LDU2LjksNTYuMWMwLDIuMiwwLDQuNCwwLDYuNmMtMC4xLDExLjMtMC4xLDE5LjUtMC4yLDMwLjhjMCwwLjQsMCwwLjgtMC4zLDFjLTAuMiwwLjItMC41LDAuMy0wLjgsMC4zYy0zLjgsMC41LTUuNiwwLTkuMywwLjVjLTAuNywwLjEtMS41LDAuMi0yLjQsMC4xQzQzLjEsOTUuMyw0Myw5NS4xLDQzLDk0LjMiLz48cGF0aCBjbGFzcz0ic3Q2IiBkPSJNNDMuNSwyMS40YzYuMS0wLjIsOC44LTAuMywxMi45LTAuNSIvPjxwYXRoIGNsYXNzPSJzdDYiIGQ9Ik00My40LDg4LjhjMC42LDAuMSwxLjYsMCwyLjMtMC4xYzMuOS0wLjEsNy0wLjEsMTAuOS0wLjIiLz48L3N2Zz4=");
}

.material--paper {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEwMCAxMDA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7ZmlsbDojRkZGRkZGO30uc3Qxe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6bm9uZTtzdHJva2U6IzAwMDAwMDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9PC9zdHlsZT48ZyBpZD0iTGF5ZXJfMSI+PHBhdGggY2xhc3M9InN0MCIgZD0iTTEzLjgsNi45YzAuOCwxLjktMC44LDguMS0wLjYsMTAuMmMwLjIsMS42LDAuNCwzLjMsMC42LDQuOWMwLjUsNSwwLDEwLjEsMCwxNS4xYzAsOC43LDEuMywxNy4yLDEuNiwyNS44YzAuMiw0LjgsMC4yLDkuMywwLjksMTQuMWMwLjUsMy45LDAsOC4zLDAsMTIuNGMwLDEuMy0wLjMsMy4xLDAuOSwzLjhjMSwwLjYsMy45LDAuNyw1LjEsMC44YzUuOCwwLjMsMTEuNiwwLjIsMTcuMywwLjRjOS45LDAuNCwxNywwLjcsMjYuOSwwLjNjMy42LTAuMSw5LjgsMC4zLDEzLjQsMC43YzIuMSwwLjIsNC45LTAuMyw3LTAuNGMwLjctMi4xLDAuNi01LjIsMC4zLTcuOWMtMC4xLTAuNi0wLjMtMS4zLTAuMy0xLjhjMC0wLjctMC4xLTEuNSwwLTIuM2MwLjMtMi43LDAuNC01LDAuNi03LjdjMC4zLTcuMS0wLjgtMTMuOC0wLjgtMjAuOEM4Ni44LDM4LjgsODYsMjMuNyw4Niw4YzAtMS45LDAuMS0zLjEtMi4xLTMuMmMtMS40LTAuMS0zLjIsMC41LTQuNywwLjZDNzUsNS41LDcxLDMuOSw2Ni44LDQuMWMtOC4xLDAuMy0xNi40LDAuNy0yNC41LDEuNWMtNS40LDAuNS0xMC45LDEtMTYuNSwxYy00LjIsMC03LjMtMC4zLTExLjQtMC40Ii8+PC9nPjxnIGlkPSJMYXllcl8yIj48cGF0aCBjbGFzcz0ic3QxIiBkPSJNMTQuNyw2LjRDMzkuMSw1LjMsNjAuNSw0LjIsODQuOSw1YzAuMywwLDAuNiwwLDAuOCwwLjJjMC40LDAuMywwLjUsMC44LDAuNCwxLjNjMCwxLjMsMC42LDIuNywwLjMsNGMtMS4xLDUuMy0wLjcsMTAuNy0wLjUsMTYuMWMwLjgsMjIuOS0xLjksNDUuOSwwLjIsNjguN2MtMTQuNCwxLjUtMjktMC40LTQzLjUtMC42Yy00LjUtMC4xLTksMC4xLTEzLjYtMC4xQzI2LjEsOTQuMywyMyw5NSwyMCw5NC40Yy0xLTAuMi0yLjEtMC40LTIuOS0xLjJjLTEuMS0xLTEuMi0yLjctMS4zLTQuM2MtMC4yLTcuMi0wLjItMTYuNCwwLTIzLjdjMC4yLTcsMC43LTE0LjEsMC4xLTIxLjFjLTAuMy0zLjctMC45LTcuNC0xLjMtMTFjLTEtOC40LDAuOC0xOC44LDAuNy0yNy4yIi8+PC9nPjwvc3ZnPg==");
}

.material--scissors {
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMDAgMTAwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I0I1QjVCNTt9LnN0MXtmaWxsOiM0ODU0RUQ7fS5zdDJ7ZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS1taXRlcmxpbWl0OjEwO308L3N0eWxlPjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iODMuMSw4My43IDg0LjQsOTEuNCA4Mi40LDk3LjEgNDkuOSw1NS4xIDI0LjIsOTAuNyAxOS43LDk2LjggMTcuNyw5Ni40IDE2LjgsODUuNCA0Mi43LDQ1LjYgMzEuNSwyNC4xIDI4LjMsMTQuMSAyNS4xLDguNiAxOC45LDYuNiAxMi4zLDExLjQgMTIuNCwyMC4zIDE3LjksMjQuMyAyMi42LDI0LjQgMjguNywxOS41IDMwLjYsMjIgMjcsMjYuNCAxNi45LDI4LjMgMTAuMiwyMy4yIDguMywxNy4zIDkuMiwxMC41IDE1LjYsMy44IDI1LjUsMy44IDI5LjEsOC4zIDM0LjEsMTguMSA0MC45LDI5LjkgNTAuMSwzOC4zIDY0LjEsMjQgNjYuMSwxOC43IDcwLjcsOC4zIDc0LjUsNC45IDgwLDMgODcuOSw0LjkgOTEsMTEuOSA5MS44LDE5LjcgODQuMiwyNy43IDczLjgsMjYuMiA3MS44LDIyLjggNzIuNCwyMS41IDc1LjksMjMuOSA4NS4yLDIyLjggODguNywxNy40IDg1LjksNy43IDgwLjEsNS45IDcyLjUsOS43IDcyLjMsMTYuNiA3My4yLDIyLjEgNzAuMSwyNC4yIDU3LjMsNDUuMiAiLz48cG9seWxpbmUgY2xhc3M9InN0MSIgcG9pbnRzPSI2MS42LDI4LjEgNzAuMSw4LjIgNzUsNC4yIDgwLjYsMi45IDg4LDUuMyA5MS42LDExLjggOTEuNCwxOS42IDg5LjUsMjMuNCA4NC4yLDI3LjQgNzguOCwyOC4yIDc0LjQsMjYgNzEuNCwyMy42IDczLDIxLjQgNzYuNiwyMy44IDg1LjIsMjIuMiA4OC4xLDE3LjcgODguNCwxMi41IDg1LjksOC4zIDgwLjgsNi4zIDczLjgsMTAgNzEuNCwxNi41IDczLjgsMjEuOSA3MS40LDIzLjYgNjQuNywzMS4zICIvPjxwb2x5bGluZSBjbGFzcz0ic3QxIiBwb2ludHM9IjI4LjIsMjAgMjguMywxMy45IDI1LDguOSAxOS4yLDcgMTIuNiwxMS40IDExLjksMTUuNyAxMi43LDIwLjIgMTguMiwyNC4zIDIyLjksMjQuMyAyOC4zLDE5LjMgNDIuNCwzMi4xIDM3LjEsMzQuNCAzMC4xLDI0LjQgMjguNywyNC43IDI2LjQsMjYuOCAyMS42LDI4LjIgMTcuMiwyOC4zIDEwLjUsMjMuMiA4LjYsMTcuMyA5LjUsMTAuNSAxMi40LDUuOCAxNS45LDMuNyAyMC4xLDMuMSAyNS44LDQuNiAyOS40LDguMiAzMSwxMC41IDM3LDI0LjQgNDEuMiwzMC45ICIvPjxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik04NC40LDMuNWMtNi0yLjMtMTMuMywxLjQtMTUuNiw3LjNjLTMuMiw2LjktNC42LDE2LTE0LjcsMjQuM2wtNC4xLDMuMmwtMy43LTIuN2MtMTAuMS03LjgtMTEuNS0xNy0xNC43LTI0LjNjLTIuMy02LTkuMi05LjYtMTUuNi03LjhjLTYsMS44LTguNyw5LjItNy4zLDE1LjFzNy4zLDExLDEzLjMsOS42YzYuNC0xLjQsNS0zLjcsNy4zLTQuMWMzLjItMC45LDUsOC4yLDEzLjcsMjAuNmwwLjUsMC41TDE5LjgsNzkuNmMtMi43LDUtNC42LDExLjUtMC45LDE3LjlsMzEuNi00My4xbDMxLjYsNDMuNWMzLjctNi40LDIuMy0xMi44LTAuOS0xNy45TDU2LjksNDUuMmwwLjUtMC45YzguNy0xMi40LDEwLjUtMjEuNSwxMy43LTIwLjZjMi4zLDAuNSwxLjQsMi43LDcuMyw0LjFjNiwxLjQsMTEuOS0zLjcsMTMuMy05LjZDOTMuMSwxMi43LDkwLjQsNS4zLDg0LjQsMy41eiBNMjguNSwxNi44YzAsNi45LTkuMiwxMC4xLTE0LjIsNWMtMy43LTMuNy0zLjctMTEsMS40LTEzLjNDMjEuMiw0LjQsMjksMTAuNCwyOC41LDE2Ljh6IE04NS44LDIxLjRjLTUsNS0xNC4yLDEuOC0xNC4yLTVDNzEuMSw5LjksNzguOSw0LDg0LjksNy42Qzg5LjUsMTAuNCw4OSwxNy43LDg1LjgsMjEuNHoiLz48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjMuNCw4OC43Ii8+PC9zdmc+");
}

.swal2-popup.swal2-toast {
  flex-direction: row;
  align-items: center;
  width: auto;
  padding: 0.625em;
  overflow-y: hidden;
  box-shadow: 0 0 0.625em #d9d9d9;
}

.swal2-popup.swal2-toast .swal2-header {
  flex-direction: row;
}

.swal2-popup.swal2-toast .swal2-title {
  flex-grow: 1;
  justify-content: flex-start;
  margin: 0 0.6em;
  font-size: 1em;
}

.swal2-popup.swal2-toast .swal2-footer {
  margin: 0.5em 0 0;
  padding: 0.5em 0 0;
  font-size: 0.8em;
}

.swal2-popup.swal2-toast .swal2-close {
  position: static;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.8;
}

.swal2-popup.swal2-toast .swal2-content {
  justify-content: flex-start;
  font-size: 1em;
}

.swal2-popup.swal2-toast .swal2-icon {
  width: 2em;
  min-width: 2em;
  height: 2em;
  margin: 0;
}

.swal2-popup.swal2-toast .swal2-icon::before {
  display: flex;
  align-items: center;
  font-size: 2em;
  font-weight: bold;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-popup.swal2-toast .swal2-icon::before {
    font-size: 0.25em;
  }
}

.swal2-popup.swal2-toast .swal2-icon.swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  top: 0.875em;
  width: 1.375em;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 0.3125em;
}

.swal2-popup.swal2-toast .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 0.3125em;
}

.swal2-popup.swal2-toast .swal2-actions {
  flex-basis: auto !important;
  width: auto;
  height: auto;
  margin: 0 0.3125em;
}

.swal2-popup.swal2-toast .swal2-styled {
  margin: 0 0.3125em;
  padding: 0.3125em 0.625em;
  font-size: 1em;
}

.swal2-popup.swal2-toast .swal2-styled:focus {
  box-shadow: 0 0 0 0.0625em #fff, 0 0 0 0.125em rgba(50, 100, 150, 0.4);
}

.swal2-popup.swal2-toast .swal2-success {
  border-color: #a5dc86;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 1.6em;
  height: 3em;
  transform: rotate(45deg);
  border-radius: 50%;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.8em;
  left: -0.5em;
  transform: rotate(-45deg);
  transform-origin: 2em 2em;
  border-radius: 4em 0 0 4em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.25em;
  left: 0.9375em;
  transform-origin: 0 1.5em;
  border-radius: 0 4em 4em 0;
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-ring {
  width: 2em;
  height: 2em;
}

.swal2-popup.swal2-toast .swal2-success .swal2-success-fix {
  top: 0;
  left: 0.4375em;
  width: 0.4375em;
  height: 2.6875em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line] {
  height: 0.3125em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=tip] {
  top: 1.125em;
  left: 0.1875em;
  width: 0.75em;
}

.swal2-popup.swal2-toast .swal2-success [class^=swal2-success-line][class$=long] {
  top: 0.9375em;
  right: 0.1875em;
  width: 1.375em;
}

.swal2-popup.swal2-toast.swal2-show {
  animation: swal2-toast-show 0.5s;
}

.swal2-popup.swal2-toast.swal2-hide {
  animation: swal2-toast-hide 0.1s forwards;
}

.swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-tip {
  animation: swal2-toast-animate-success-line-tip 0.75s;
}

.swal2-popup.swal2-toast .swal2-animate-success-icon .swal2-success-line-long {
  animation: swal2-toast-animate-success-line-long 0.75s;
}

.swal2-container {
  display: flex;
  position: fixed;
  z-index: 1060;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.625em;
  overflow-x: hidden;
  transition: background-color 0.1s;
  background-color: transparent;
  -webkit-overflow-scrolling: touch;
}

.swal2-container.swal2-top {
  align-items: flex-start;
}

.swal2-container.swal2-top-start,
.swal2-container.swal2-top-left {
  align-items: flex-start;
  justify-content: flex-start;
}

.swal2-container.swal2-top-end,
.swal2-container.swal2-top-right {
  align-items: flex-start;
  justify-content: flex-end;
}

.swal2-container.swal2-center {
  align-items: center;
}

.swal2-container.swal2-center-start,
.swal2-container.swal2-center-left {
  align-items: center;
  justify-content: flex-start;
}

.swal2-container.swal2-center-end,
.swal2-container.swal2-center-right {
  align-items: center;
  justify-content: flex-end;
}

.swal2-container.swal2-bottom {
  align-items: flex-end;
}

.swal2-container.swal2-bottom-start,
.swal2-container.swal2-bottom-left {
  align-items: flex-end;
  justify-content: flex-start;
}

.swal2-container.swal2-bottom-end,
.swal2-container.swal2-bottom-right {
  align-items: flex-end;
  justify-content: flex-end;
}

.swal2-container.swal2-bottom > :first-child,
.swal2-container.swal2-bottom-start > :first-child,
.swal2-container.swal2-bottom-left > :first-child,
.swal2-container.swal2-bottom-end > :first-child,
.swal2-container.swal2-bottom-right > :first-child {
  margin-top: auto;
}

.swal2-container.swal2-grow-fullscreen > .swal2-modal {
  display: flex !important;
  flex: 1;
  align-self: stretch;
  justify-content: center;
}

.swal2-container.swal2-grow-row > .swal2-modal {
  display: flex !important;
  flex: 1;
  align-content: center;
  justify-content: center;
}

.swal2-container.swal2-grow-column {
  flex: 1;
  flex-direction: column;
}

.swal2-container.swal2-grow-column.swal2-top,
.swal2-container.swal2-grow-column.swal2-center,
.swal2-container.swal2-grow-column.swal2-bottom {
  align-items: center;
}

.swal2-container.swal2-grow-column.swal2-top-start,
.swal2-container.swal2-grow-column.swal2-center-start,
.swal2-container.swal2-grow-column.swal2-bottom-start,
.swal2-container.swal2-grow-column.swal2-top-left,
.swal2-container.swal2-grow-column.swal2-center-left,
.swal2-container.swal2-grow-column.swal2-bottom-left {
  align-items: flex-start;
}

.swal2-container.swal2-grow-column.swal2-top-end,
.swal2-container.swal2-grow-column.swal2-center-end,
.swal2-container.swal2-grow-column.swal2-bottom-end,
.swal2-container.swal2-grow-column.swal2-top-right,
.swal2-container.swal2-grow-column.swal2-center-right,
.swal2-container.swal2-grow-column.swal2-bottom-right {
  align-items: flex-end;
}

.swal2-container.swal2-grow-column > .swal2-modal {
  display: flex !important;
  flex: 1;
  align-content: center;
  justify-content: center;
}

.swal2-container:not(.swal2-top):not(.swal2-top-start):not(.swal2-top-end):not(.swal2-top-left):not(.swal2-top-right):not(.swal2-center-start):not(.swal2-center-end):not(.swal2-center-left):not(.swal2-center-right):not(.swal2-bottom):not(.swal2-bottom-start):not(.swal2-bottom-end):not(.swal2-bottom-left):not(.swal2-bottom-right):not(.swal2-grow-fullscreen) > .swal2-modal {
  margin: auto;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-container .swal2-modal {
    margin: 0 !important;
  }
}

.swal2-container.swal2-shown {
  background-color: rgba(0, 0, 0, 0.4);
}

.swal2-popup {
  display: none;
  position: relative;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  width: 32em;
  max-width: 100%;
  padding: 1.25em;
  border: none;
  border-radius: 0.3125em;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
}

.swal2-popup:focus {
  outline: none;
}

.swal2-popup.swal2-loading {
  overflow-y: hidden;
}

.swal2-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swal2-title {
  position: relative;
  max-width: 100%;
  margin: 0 0 0.4em;
  padding: 0;
  color: rgb(89.25, 89.25, 89.25);
  font-size: 1.875em;
  font-weight: 600;
  text-align: center;
  text-transform: none;
  word-wrap: break-word;
}

.swal2-actions {
  display: flex;
  z-index: 1;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.25em auto 0;
}

.swal2-actions:not(.swal2-loading) .swal2-styled[disabled] {
  opacity: 0.4;
}

.swal2-actions:not(.swal2-loading) .swal2-styled:hover {
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.swal2-actions:not(.swal2-loading) .swal2-styled:active {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}

.swal2-actions.swal2-loading .swal2-styled.swal2-confirm {
  box-sizing: border-box;
  width: 2.5em;
  height: 2.5em;
  margin: 0.46875em;
  padding: 0;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border: 0.25em solid transparent;
  border-radius: 100%;
  border-color: transparent;
  background-color: transparent !important;
  color: transparent;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.swal2-actions.swal2-loading .swal2-styled.swal2-cancel {
  margin-right: 30px;
  margin-left: 30px;
}

.swal2-actions.swal2-loading :not(.swal2-styled).swal2-confirm::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border: 3px solid #999999;
  border-radius: 50%;
  border-right-color: transparent;
  box-shadow: 1px 1px 1px #fff;
}

.swal2-styled {
  margin: 0.3125em;
  padding: 0.625em 2em;
  box-shadow: none;
  font-weight: 500;
}

.swal2-styled:not([disabled]) {
  cursor: pointer;
}

.swal2-styled.swal2-confirm {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #3085d6;
  color: #fff;
  font-size: 1.0625em;
}

.swal2-styled.swal2-cancel {
  border: 0;
  border-radius: 0.25em;
  background: initial;
  background-color: #aaa;
  color: #fff;
  font-size: 1.0625em;
}

.swal2-styled:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(50, 100, 150, 0.4);
}

.swal2-styled::-moz-focus-inner {
  border: 0;
}

.swal2-footer {
  justify-content: center;
  margin: 1.25em 0 0;
  padding: 1em 0 0;
  border-top: 1px solid #eee;
  color: rgb(84.15, 84.15, 84.15);
  font-size: 1em;
}

.swal2-image {
  max-width: 100%;
  margin: 1.25em auto;
}

.swal2-close {
  position: absolute;
  z-index: 2;
  /* 1617 */
  top: 0;
  right: 0;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  padding: 0;
  overflow: hidden;
  transition: color 0.1s ease-out;
  border: none;
  border-radius: 0;
  outline: initial;
  background: transparent;
  color: #cccccc;
  font-family: serif;
  font-size: 2.5em;
  line-height: 1.2;
  cursor: pointer;
}

.swal2-close:hover {
  transform: none;
  background: transparent;
  color: #f27474;
}

.swal2-content {
  z-index: 1;
  justify-content: center;
  margin: 0;
  padding: 0;
  color: rgb(84.15, 84.15, 84.15);
  font-size: 1.125em;
  font-weight: normal;
  line-height: normal;
  text-align: center;
  word-wrap: break-word;
}

.swal2-input,
.swal2-file,
.swal2-textarea,
.swal2-select,
.swal2-radio,
.swal2-checkbox {
  margin: 1em auto;
}

.swal2-input,
.swal2-file,
.swal2-textarea {
  box-sizing: border-box;
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
  border: 1px solid rgb(216.75, 216.75, 216.75);
  border-radius: 0.1875em;
  background: inherit;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 1.125em;
}

.swal2-input.swal2-inputerror,
.swal2-file.swal2-inputerror,
.swal2-textarea.swal2-inputerror {
  border-color: #f27474 !important;
  box-shadow: 0 0 2px #f27474 !important;
}

.swal2-input:focus,
.swal2-file:focus,
.swal2-textarea:focus {
  border: 1px solid #b4dbed;
  outline: none;
  box-shadow: 0 0 3px #c4e6f5;
}

.swal2-input::-moz-placeholder, .swal2-file::-moz-placeholder, .swal2-textarea::-moz-placeholder {
  color: #cccccc;
}

.swal2-input::placeholder,
.swal2-file::placeholder,
.swal2-textarea::placeholder {
  color: #cccccc;
}

.swal2-range {
  margin: 1em auto;
  background: inherit;
}

.swal2-range input {
  width: 80%;
}

.swal2-range output {
  width: 20%;
  color: inherit;
  font-weight: 600;
  text-align: center;
}

.swal2-range input,
.swal2-range output {
  height: 2.625em;
  padding: 0;
  font-size: 1.125em;
  line-height: 2.625em;
}

.swal2-input {
  height: 2.625em;
  padding: 0 0.75em;
}

.swal2-input[type=number] {
  max-width: 10em;
}

.swal2-file {
  background: inherit;
  font-size: 1.125em;
}

.swal2-textarea {
  height: 6.75em;
  padding: 0.75em;
}

.swal2-select {
  min-width: 50%;
  max-width: 100%;
  padding: 0.375em 0.625em;
  background: inherit;
  color: inherit;
  font-size: 1.125em;
}

.swal2-radio,
.swal2-checkbox {
  align-items: center;
  justify-content: center;
  background: inherit;
  color: inherit;
}

.swal2-radio label,
.swal2-checkbox label {
  margin: 0 0.6em;
  font-size: 1.125em;
}

.swal2-radio input,
.swal2-checkbox input {
  margin: 0 0.4em;
}

.swal2-validation-message {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.625em;
  overflow: hidden;
  background: rgb(239.7, 239.7, 239.7);
  color: #666666;
  font-size: 1em;
  font-weight: 300;
}

.swal2-validation-message::before {
  content: "!";
  display: inline-block;
  width: 1.5em;
  min-width: 1.5em;
  height: 1.5em;
  margin: 0 0.625em;
  border-radius: 50%;
  background-color: #f27474;
  color: #fff;
  font-weight: 600;
  line-height: 1.5em;
  text-align: center;
}

.swal2-icon {
  position: relative;
  box-sizing: content-box;
  justify-content: center;
  width: 5em;
  height: 5em;
  margin: 1.25em auto 1.875em;
  border: 0.25em solid transparent;
  border-radius: 50%;
  font-family: inherit;
  line-height: 5em;
  cursor: default;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.swal2-icon::before {
  display: flex;
  align-items: center;
  height: 92%;
  font-size: 3.75em;
}

.swal2-icon.swal2-error {
  border-color: #f27474;
}

.swal2-icon.swal2-error .swal2-x-mark {
  position: relative;
  flex-grow: 1;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line] {
  display: block;
  position: absolute;
  top: 2.3125em;
  width: 2.9375em;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: #f27474;
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
  left: 1.0625em;
  transform: rotate(45deg);
}

.swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=right] {
  right: 1em;
  transform: rotate(-45deg);
}

.swal2-icon.swal2-warning {
  border-color: rgb(249.95234375, 205.965625, 167.74765625);
  color: #f8bb86;
}

.swal2-icon.swal2-warning::before {
  content: "!";
}

.swal2-icon.swal2-info {
  border-color: rgb(156.7033492823, 224.2822966507, 246.2966507177);
  color: #3fc3ee;
}

.swal2-icon.swal2-info::before {
  content: "i";
}

.swal2-icon.swal2-question {
  border-color: rgb(200.8064516129, 217.9677419355, 225.1935483871);
  color: #87adbd;
}

.swal2-icon.swal2-question::before {
  content: "?";
}

.swal2-icon.swal2-question.swal2-arabic-question-mark::before {
  content: "؟";
}

.swal2-icon.swal2-success {
  border-color: #a5dc86;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line] {
  position: absolute;
  width: 3.75em;
  height: 7.5em;
  transform: rotate(45deg);
  border-radius: 50%;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=left] {
  top: -0.4375em;
  left: -2.0635em;
  transform: rotate(-45deg);
  transform-origin: 3.75em 3.75em;
  border-radius: 7.5em 0 0 7.5em;
}

.swal2-icon.swal2-success [class^=swal2-success-circular-line][class$=right] {
  top: -0.6875em;
  left: 1.875em;
  transform: rotate(-45deg);
  transform-origin: 0 3.75em;
  border-radius: 0 7.5em 7.5em 0;
}

.swal2-icon.swal2-success .swal2-success-ring {
  position: absolute;
  z-index: 2;
  top: -0.25em;
  left: -0.25em;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: 0.25em solid rgba(165, 220, 134, 0.3);
  border-radius: 50%;
}

.swal2-icon.swal2-success .swal2-success-fix {
  position: absolute;
  z-index: 1;
  top: 0.5em;
  left: 1.625em;
  width: 0.4375em;
  height: 5.625em;
  transform: rotate(-45deg);
}

.swal2-icon.swal2-success [class^=swal2-success-line] {
  display: block;
  position: absolute;
  z-index: 2;
  height: 0.3125em;
  border-radius: 0.125em;
  background-color: #a5dc86;
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
  top: 2.875em;
  left: 0.875em;
  width: 1.5625em;
  transform: rotate(45deg);
}

.swal2-icon.swal2-success [class^=swal2-success-line][class$=long] {
  top: 2.375em;
  right: 0.5em;
  width: 2.9375em;
  transform: rotate(-45deg);
}

.swal2-progress-steps {
  align-items: center;
  margin: 0 0 1.25em;
  padding: 0;
  background: inherit;
  font-weight: 600;
}

.swal2-progress-steps li {
  display: inline-block;
  position: relative;
}

.swal2-progress-steps .swal2-progress-step {
  z-index: 20;
  width: 2em;
  height: 2em;
  border-radius: 2em;
  background: #3085d6;
  color: #fff;
  line-height: 2em;
  text-align: center;
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step {
  background: #3085d6;
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step {
  background: #add8e6;
  color: #fff;
}

.swal2-progress-steps .swal2-progress-step.swal2-active-progress-step ~ .swal2-progress-step-line {
  background: #add8e6;
}

.swal2-progress-steps .swal2-progress-step-line {
  z-index: 10;
  width: 2.5em;
  height: 0.4em;
  margin: 0 -1px;
  background: #3085d6;
}

[class^=swal2] {
  -webkit-tap-highlight-color: transparent;
}

.swal2-show {
  animation: swal2-show 0.3s;
}

.swal2-show.swal2-noanimation {
  animation: none;
}

.swal2-hide {
  animation: swal2-hide 0.15s forwards;
}

.swal2-hide.swal2-noanimation {
  animation: none;
}

.swal2-rtl .swal2-close {
  right: auto;
  left: 0;
}

.swal2-animate-success-icon .swal2-success-line-tip {
  animation: swal2-animate-success-line-tip 0.75s;
}

.swal2-animate-success-icon .swal2-success-line-long {
  animation: swal2-animate-success-line-long 0.75s;
}

.swal2-animate-success-icon .swal2-success-circular-line-right {
  animation: swal2-rotate-success-circular-line 4.25s ease-in;
}

.swal2-animate-error-icon {
  animation: swal2-animate-error-icon 0.5s;
}

.swal2-animate-error-icon .swal2-x-mark {
  animation: swal2-animate-error-x-mark 0.5s;
}

@supports (-ms-accelerator: true) {
  .swal2-range input {
    width: 100% !important;
  }

  .swal2-range output {
    display: none;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swal2-range input {
    width: 100% !important;
  }

  .swal2-range output {
    display: none;
  }
}

@-moz-document url-prefix()  {
  .swal2-close:focus {
    outline: 2px solid rgba(50, 100, 150, 0.4);
  }
}

@keyframes swal2-toast-show {
  0% {
    transform: translateY(-0.625em) rotateZ(2deg);
  }

  33% {
    transform: translateY(0) rotateZ(-2deg);
  }

  66% {
    transform: translateY(0.3125em) rotateZ(2deg);
  }

  100% {
    transform: translateY(0) rotateZ(0deg);
  }
}

@keyframes swal2-toast-hide {
  100% {
    transform: rotateZ(1deg);
    opacity: 0;
  }
}

@keyframes swal2-toast-animate-success-line-tip {
  0% {
    top: 0.5625em;
    left: 0.0625em;
    width: 0;
  }

  54% {
    top: 0.125em;
    left: 0.125em;
    width: 0;
  }

  70% {
    top: 0.625em;
    left: -0.25em;
    width: 1.625em;
  }

  84% {
    top: 1.0625em;
    left: 0.75em;
    width: 0.5em;
  }

  100% {
    top: 1.125em;
    left: 0.1875em;
    width: 0.75em;
  }
}

@keyframes swal2-toast-animate-success-line-long {
  0% {
    top: 1.625em;
    right: 1.375em;
    width: 0;
  }

  65% {
    top: 1.25em;
    right: 0.9375em;
    width: 0;
  }

  84% {
    top: 0.9375em;
    right: 0;
    width: 1.125em;
  }

  100% {
    top: 0.9375em;
    right: 0.1875em;
    width: 1.375em;
  }
}

@keyframes swal2-show {
  0% {
    transform: scale(0.7);
  }

  45% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(0.95);
  }

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

@keyframes swal2-hide {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

@keyframes swal2-animate-success-line-tip {
  0% {
    top: 1.1875em;
    left: 0.0625em;
    width: 0;
  }

  54% {
    top: 1.0625em;
    left: 0.125em;
    width: 0;
  }

  70% {
    top: 2.1875em;
    left: -0.375em;
    width: 3.125em;
  }

  84% {
    top: 3em;
    left: 1.3125em;
    width: 1.0625em;
  }

  100% {
    top: 2.8125em;
    left: 0.875em;
    width: 1.5625em;
  }
}

@keyframes swal2-animate-success-line-long {
  0% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }

  65% {
    top: 3.375em;
    right: 2.875em;
    width: 0;
  }

  84% {
    top: 2.1875em;
    right: 0;
    width: 3.4375em;
  }

  100% {
    top: 2.375em;
    right: 0.5em;
    width: 2.9375em;
  }
}

@keyframes swal2-rotate-success-circular-line {
  0% {
    transform: rotate(-45deg);
  }

  5% {
    transform: rotate(-45deg);
  }

  12% {
    transform: rotate(-405deg);
  }

  100% {
    transform: rotate(-405deg);
  }
}

@keyframes swal2-animate-error-x-mark {
  0% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0;
  }

  50% {
    margin-top: 1.625em;
    transform: scale(0.4);
    opacity: 0;
  }

  80% {
    margin-top: -0.375em;
    transform: scale(1.15);
  }

  100% {
    margin-top: 0;
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes swal2-animate-error-icon {
  0% {
    transform: rotateX(100deg);
    opacity: 0;
  }

  100% {
    transform: rotateX(0deg);
    opacity: 1;
  }
}

@keyframes swal2-rotate-loading {
  0% {
    transform: rotate(0deg);
  }

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

body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
  overflow: hidden;
}

body.swal2-height-auto {
  height: auto !important;
}

body.swal2-no-backdrop .swal2-shown {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  max-width: calc(100% - 0.625em * 2);
  background-color: transparent;
}

body.swal2-no-backdrop .swal2-shown > .swal2-modal {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
}

body.swal2-no-backdrop .swal2-shown.swal2-top {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-top-start,
body.swal2-no-backdrop .swal2-shown.swal2-top-left {
  top: 0;
  left: 0;
}

body.swal2-no-backdrop .swal2-shown.swal2-top-end,
body.swal2-no-backdrop .swal2-shown.swal2-top-right {
  top: 0;
  right: 0;
}

body.swal2-no-backdrop .swal2-shown.swal2-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-center-start,
body.swal2-no-backdrop .swal2-shown.swal2-center-left {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-center-end,
body.swal2-no-backdrop .swal2-shown.swal2-center-right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-bottom {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

body.swal2-no-backdrop .swal2-shown.swal2-bottom-start,
body.swal2-no-backdrop .swal2-shown.swal2-bottom-left {
  bottom: 0;
  left: 0;
}

body.swal2-no-backdrop .swal2-shown.swal2-bottom-end,
body.swal2-no-backdrop .swal2-shown.swal2-bottom-right {
  right: 0;
  bottom: 0;
}

@media print {
  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) {
    overflow-y: scroll !important;
  }

  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) > [aria-hidden=true] {
    display: none;
  }

  body.swal2-shown:not(.swal2-no-backdrop):not(.swal2-toast-shown) .swal2-container {
    position: static !important;
  }
}

body.swal2-toast-shown .swal2-container {
  background-color: transparent;
}

body.swal2-toast-shown .swal2-container.swal2-shown {
  background-color: transparent;
}

body.swal2-toast-shown .swal2-container.swal2-top {
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
}

body.swal2-toast-shown .swal2-container.swal2-top-start,
body.swal2-toast-shown .swal2-container.swal2-top-left {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}

body.swal2-toast-shown .swal2-container.swal2-center-start,
body.swal2-toast-shown .swal2-container.swal2-center-left {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 0;
  transform: translateY(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-center {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

body.swal2-toast-shown .swal2-container.swal2-center-end,
body.swal2-toast-shown .swal2-container.swal2-center-right {
  top: 50%;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translateY(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-bottom-start,
body.swal2-toast-shown .swal2-container.swal2-bottom-left {
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
}

body.swal2-toast-shown .swal2-container.swal2-bottom {
  top: auto;
  right: auto;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

body.swal2-toast-shown .swal2-container.swal2-bottom-end,
body.swal2-toast-shown .swal2-container.swal2-bottom-right {
  top: auto;
  right: 0;
  bottom: 0;
  left: auto;
}

body.swal2-toast-column .swal2-toast {
  flex-direction: column;
  align-items: stretch;
}

body.swal2-toast-column .swal2-toast .swal2-actions {
  flex: 1;
  align-self: stretch;
  height: 2.2em;
  margin-top: 0.3125em;
}

body.swal2-toast-column .swal2-toast .swal2-loading {
  justify-content: center;
}

body.swal2-toast-column .swal2-toast .swal2-input {
  height: 2em;
  margin: 0.3125em auto;
  font-size: 1em;
}

body.swal2-toast-column .swal2-toast .swal2-validation-message {
  font-size: 1em;
}

.sp-buidler {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.sp-buidler--heading {
  padding-top: 20px;
  position: relative;
}

.sp-buidler--heading h2,
.sp-buidler--heading #adminLayout .admin-assessment-intro--heading,
#adminLayout .sp-buidler--heading .admin-assessment-intro--heading,
.sp-buidler--heading #adminLayout .admin-lesson-intro--heading,
#adminLayout .sp-buidler--heading .admin-lesson-intro--heading,
.sp-buidler--heading .admin-homework--heading,
.sp-buidler--heading .assessment-builder--heading,
.sp-buidler--heading .teacher-pre-assessment--heading,
.sp-buidler--heading .editable--help--h2-heading {
  font-family: "Annie Use Your Telescope";
  font-size: 2rem;
  font-weight: 500;
}

.sp-buidler--heading svg.underline {
  margin-right: 300px;
  position: relative;
  top: -5px;
}

.sp-buidler--description {
  font-style: italic;
  font-size: 14px;
  margin-top: -15px;
  margin-bottom: 30px;
  width: 600px;
}

.sp-buidler__preview-button {
  position: absolute;
  top: 15px;
  right: -15px;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9em;
  padding: 0.5em 1em;
}

.sp-buidler__language_selector {
  position: absolute;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9rem;
  padding: 0.5em 1em;
  line-height: 1.15;
  top: 15px;
  right: 8rem;
}

.sp-buidler__slide {
  background: #efefef;
  border: 1px solid #bfbfbf;
  padding: 0;
  display: flex;
  justify-content: space-between;
  cursor: all-scroll;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 1rem;
}

.sp-buidler__slide-content {
  padding: 1rem;
}

.sp-buidler__slide-type {
  text-transform: capitalize;
  font-weight: 700;
}

.sp-buidler__slide-description {
  font-size: 12.6px;
}

.sp-buidler__buttons {
  margin: -1rem;
  font-size: 0;
}

.sp-buidler__slide-delete-button {
  background: #d0112b;
  color: #ffffff;
  padding: 1rem;
  font-size: 1rem;
}

.sp-buidler__slide-edit-button {
  font-weight: 400;
  padding: 1rem 1.75rem;
  font-size: 14px;
  background: #ddd;
  box-shadow: 0 1px #ccc;
  border: none;
  border-left: 1px #333;
  margin-bottom: 2rem;
}

.sp-buidler .draggable + button {
  padding: 15px 40px;
  margin-top: 10px;
}

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

.mr-auto {
  margin-right: auto;
}

@media screen and (min-width: 1025px) and (-webkit-min-device-pixel-ratio: 2) {
  .show-mobile {
    display: none !important;
  }
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .hide-mobile {
    display: none !important;
  }
}

.tablet-only {
  display: none !important;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .tablet-only {
    display: initial !important;
  }
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.sr-only {
  display: none;
}

.page-content--title {
  margin: 20px 0;
}

#adminLayout select,
#adminLayout input,
#adminLayout textarea {
  display: block;
  min-height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  color: #444444;
  border: 1px solid #777777;
  background-color: #ffffff;
  border-radius: 4px;
}

#adminLayout .page-content {
  padding-top: 60px;
  margin-top: 90px;
  min-height: 800px;
}

#adminLayout .page-content--large-header {
  padding-top: 12rem;
}

#adminLayout .page-content--column {
  width: 1170px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

#adminLayout .page-content--builder {
  width: 1170px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
}

#adminLayout .page-content--builder p {
  font-size: 1em;
  line-height: 25px;
  font-family: "Open Sans", sans-serif;
  color: #000000;
  margin-top: 10px 0px;
}

#adminLayout .page-content--builder h1,
#adminLayout .page-content--builder .editable--help--h1-heading,
#adminLayout .page-content--builder h2,
#adminLayout .page-content--builder .admin-assessment-intro--heading,
#adminLayout .page-content--builder .admin-lesson-intro--heading,
#adminLayout .page-content--builder .admin-homework--heading,
#adminLayout .page-content--builder .assessment-builder--heading,
#adminLayout .page-content--builder .teacher-pre-assessment--heading,
#adminLayout .page-content--builder .editable--help--h2-heading {
  font-family: "Annie Use Your Telescope";
}

#adminLayout .page-content--builder h2,
#adminLayout .page-content--builder .admin-assessment-intro--heading,
#adminLayout .page-content--builder .admin-lesson-intro--heading,
#adminLayout .page-content--builder .admin-homework--heading,
#adminLayout .page-content--builder .assessment-builder--heading,
#adminLayout .page-content--builder .teacher-pre-assessment--heading,
#adminLayout .page-content--builder .editable--help--h2-heading {
  font-size: 2rem;
  font-weight: 500;
}

#adminLayout .page-content--builder h1,
#adminLayout .page-content--builder .editable--help--h1-heading {
  font-size: 3rem;
  font-weight: 500;
  line-height: 3.5rem;
}

#adminLayout .page-content--builder h3 {
  font-size: 16px;
  line-height: 24px;
  margin: 16px 0px 10px;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
}

#adminLayout .page-content--builder .illustration {
  width: 33%;
}

#adminLayout .page-content--builder .content {
  width: 67%;
  padding-left: 8%;
}

#adminLayout .page-content--builder .tooltip {
  max-width: 500px;
}

#adminLayout .editable--preview {
  border: 1px solid transparent;
  position: relative;
  cursor: pointer;
}

#adminLayout .editable--preview .edit-button {
  display: none;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 10;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 7px 14px;
  transition: all 0.25s ease;
}

#adminLayout .editable--preview:hover {
  border: 1px dashed rgba(0, 0, 0, 0.5);
  transition: border 0.5s ease;
}

#adminLayout .editable--preview:hover .edit-button {
  display: block;
}

#authLayout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "RubikCL", "Rubik", sans-serif;
  background-color: #f7f9fb;
}

@media screen and (max-width: 640px) {
  #authLayout {
    min-height: auto;
  }
}

#authLayout h1,
#authLayout .editable--help--h1-heading {
  margin: 32px auto;
}

@media screen and (max-width: 640px) {
  #authLayout h1,
  #authLayout .editable--help--h1-heading {
    width: 100%;
    text-align: center;
    padding: 12px 0 12px 0;
    margin: 0 0 16px 0;
    border-bottom: 1px solid #000000;
    box-sizing: border-box;
  }
}

#authLayout h2,
#authLayout #adminLayout .admin-assessment-intro--heading,
#adminLayout #authLayout .admin-assessment-intro--heading,
#authLayout #adminLayout .admin-lesson-intro--heading,
#adminLayout #authLayout .admin-lesson-intro--heading,
#authLayout .admin-homework--heading,
#authLayout .assessment-builder--heading,
#authLayout .teacher-pre-assessment--heading,
#authLayout .editable--help--h2-heading {
  color: #444444;
  font-family: "RubikCL", "Rubik", sans-serif;
  font-size: 14px;
  letter-spacing: 0.4px;
  line-height: 14px;
  text-align: center;
  margin: 0 0 40px 0;
}

@media screen and (max-width: 640px) {
  #authLayout h2,
  #authLayout #adminLayout .admin-assessment-intro--heading,
  #adminLayout #authLayout .admin-assessment-intro--heading,
  #authLayout #adminLayout .admin-lesson-intro--heading,
  #adminLayout #authLayout .admin-lesson-intro--heading,
  #authLayout .admin-homework--heading,
  #authLayout .assessment-builder--heading,
  #authLayout .teacher-pre-assessment--heading,
  #authLayout .editable--help--h2-heading {
    margin-bottom: 24px;
  }
}

#authLayout label {
  font-weight: 500;
  display: inline-block;
  margin-bottom: 4px;
}

#authLayout .logo {
  display: block;
  margin: 0 auto;
  width: 86px;
  height: 44px;
  outline: none;
}

@media screen and (max-width: 640px) {
  #authLayout .logo {
    width: 62px;
    height: 32px;
  }
}

#authLayout .footer {
  background-image: none;
  background-color: #000000;
  min-height: 0;
  margin-top: auto;
}

#authLayout .footer--menu,
#authLayout .footer--copyright {
  top: 0;
}

#authLayout .form-control {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid #000000;
  margin-bottom: 15px;
  transition: border 200ms ease-in-out;
}

#authLayout .form-control::-moz-placeholder, #authLayout .form-control input::-moz-placeholder {
  color: #a1a1a1;
}

#authLayout .form-control::placeholder,
#authLayout .form-control input::placeholder {
  color: #a1a1a1;
}

#authLayout .form-control.is-invalid {
  border-color: #d0112b;
}

#authLayout .form-control.Password {
  padding-left: 0;
  padding-right: 0;
}

#authLayout .form-control.Password .Password__field {
  background-color: transparent;
  border: none;
  height: 40px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
  border-radius: 8px;
}

#authLayout .form-control.Password .Password__strength-meter {
  margin-top: 5px;
  margin-bottom: 0;
}

#authLayout .invalid-feedback {
  color: #d0112b;
  margin: 0px 0 15px 0;
  font-size: 14px;
  font-weight: 700;
}

#authLayout .password-feedback {
  color: #444444;
  font-size: 12px;
  display: block;
  margin: 10px auto;
  text-align: center;
}

#authLayout .password-comment {
  color: #444444;
  font-size: 14px;
  display: block;
  margin: -20px auto 20px auto;
}

#authLayout .auth-form--column {
  padding-top: 0;
  padding-bottom: 12px;
}

#authLayout .auth-form--column.col-4 {
  padding-right: 0;
}

#authLayout .form-group {
  position: relative;
}

#authLayout .form-group .correct-field {
  display: block;
  background-image: url("/assets/ic_check.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #444444;
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -8px;
  width: 13px;
  height: 13px;
}

#authLayout .auth-form--group {
  margin: 16px;
}

#authLayout .auth-form--group legend {
  font-weight: 600;
  margin-top: 23px;
  margin-bottom: 7px;
}

#authLayout .auth-form--group .col-sm-3 {
  padding-top: 7px;
  padding-bottom: 7px;
}

#authLayout .auth-form--recaptcha {
  margin: 30px -65px 10px -65px;
  display: flex;
  justify-content: center;
}

#authLayout .auth-form--submit {
  display: block;
  width: 100%;
  height: 40px;
  max-width: 477px;
  margin: 0 auto 25px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #3967fe;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 0;
  text-transform: uppercase;
  transition: all 200ms ease-in-out;
}

#authLayout .auth-form--submit:disabled {
  background-color: rgba(57, 103, 254, 0.5);
}

#authLayout .auth-nav {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 640px) {
  #authLayout .auth-nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

#authLayout .auth-nav a,
#authLayout .auth-nav .password-reset--resend {
  display: block;
  color: #3967fe;
  text-decoration: underline;
  font-size: 13px;
}

#authLayout .auth-nav a:hover,
#authLayout .auth-nav .password-reset--resend:hover {
  font-weight: 600;
}

@media screen and (max-width: 640px) {
  #authLayout .auth-nav a,
  #authLayout .auth-nav .password-reset--resend {
    margin: 5px auto;
  }
}

#authLayout .login-divider {
  color: rgba(68, 68, 68, 0.8);
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: block;
  margin: 22px auto 16px auto;
}

#authLayout .password-reset--sent {
  text-align: center;
  color: #444444;
  font-size: 14px;
}

#authLayout .password-reset--sent svg {
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto 20px auto;
}

#authLayout .password-reset--sent h2,
#authLayout .password-reset--sent #adminLayout .admin-assessment-intro--heading,
#adminLayout #authLayout .password-reset--sent .admin-assessment-intro--heading,
#authLayout .password-reset--sent #adminLayout .admin-lesson-intro--heading,
#adminLayout #authLayout .password-reset--sent .admin-lesson-intro--heading,
#authLayout .password-reset--sent .admin-homework--heading,
#authLayout .password-reset--sent .assessment-builder--heading,
#authLayout .password-reset--sent .teacher-pre-assessment--heading,
#authLayout .password-reset--sent .editable--help--h2-heading {
  font-size: 18px;
  margin: 15px 0;
  font-weight: bold;
}

#authLayout .alert {
  width: 100%;
  padding: 15px;
  margin: -20px 0 20px 0;
  font-size: 14px;
  color: #ffffff;
}

#authLayout .alert-success {
  background-color: #00aa00;
}

#authLayout .alert-error {
  background-color: #d0112b;
}

#authLayout .verification-error {
  text-align: center;
}

#authLayout .verification-error .button,
#authLayout .verification-error .teacher-pre-assessment--add-question-button,
#authLayout .verification-error .form-file__button,
#authLayout .verification-error .asset-browser__upload-button {
  margin-top: 5px;
}

#authLayout .grade-col {
  flex: 0 0 20%;
  max-width: 20%;
  width: 100%;
  padding: 12px;
}

#authLayout .auth-nav,
#authLayout .auth-footer {
  flex-flow: row wrap;
  justify-content: center;
  font-size: 15px;
}

#authLayout .auth-nav a,
#authLayout .auth-footer a {
  font-size: 15px;
  flex-basis: 100%;
  text-align: center;
  text-decoration: underline;
}

#authLayout .auth-nav a:first-child,
#authLayout .auth-footer a:first-child {
  margin-bottom: 8px;
}

.auth-label {
  color: white;
  padding: 8px;
}

.auth-back-button {
  position: absolute;
  left: 0;
  margin-left: 20px;
  color: #3967fe;
  font-size: 12px;
  font-weight: 700;
}

.auth-back-button:visited {
  color: #3967fe;
}

.auth-container {
  background: white;
  box-sizing: border-box;
  max-width: 477px;
  padding: 40px 65px;
  margin: 0 auto 25px auto;
  border-radius: 8px;
  box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
  position: relative;
}

.auth-container.auth-container--method-selector {
  padding-bottom: 40px;
}

@media screen and (max-width: 640px) {
  .auth-container {
    margin: 0 7px 8px 7px;
    padding: 32px 31px 10px 31px;
  }

  .auth-container.auth-container--method-selector {
    padding-bottom: 40px;
  }
}

.auth-method-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  width: 100%;
  height: 40px;
  border: 1px solid #000000;
  border-radius: 20px;
  margin-bottom: 8px;
  color: #444444;
  font-family: "RubikCL", "Rubik", sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition: all 400ms ease-in-out;
}

.auth-method-selector:visited {
  color: #444444;
}

.auth-method-selector:hover {
  border-color: #3967fe;
}

.auth-method-selector:active {
  transition: none;
  background-color: #3967fe;
  color: #ffffff;
}

.auth-method-selector.auth-method-selector--static,
.auth-method-selector.auth-method-selector--static:hover,
.auth-method-selector.auth-method-selector--static:active {
  border-color: #3967fe;
  background-color: transparent;
  color: #444444;
  margin-top: 20px;
  margin-bottom: 10px;
}

.auth-method-selector svg {
  outline: none;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.auth-method-selected {
  color: #3967fe;
  font-size: 12px;
  display: block;
  text-align: center;
  margin-bottom: 40px;
}

.auth-footer {
  display: block;
  margin: 75px auto 0 auto;
  font-family: "RubikCL", "Rubik", sans-serif;
  text-align: center;
}

.auth-footer a,
.auth-footer a:visited {
  color: #3967fe;
}

.auth-comment {
  display: block;
  margin: 25px auto;
  font-family: "RubikCL", "Rubik", sans-serif;
  font-size: 14px;
  color: #000000;
  text-align: center;
  font-weight: bold;
}

.auth-comment a,
.auth-comment a:visited {
  color: #3967fe;
  text-decoration: underline;
}

@media screen and (max-width: 640px) {
  .auth-comment {
    margin-top: 10px;
  }
}

@keyframes slideInFromBottom {
  0% {
    bottom: -300px;
  }

  100% {
    bottom: 0px;
  }
}

* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  justify-content: space-between;
  min-height: 100vh;
}

.grid nav {
  background-color: #fefbfc;
  width: 250px;
  min-width: 250px;
  color: #333;
}

.grid nav .nav-wrapper {
  height: 90vh;
  width: 250px;
  position: fixed;
  padding: 20px;
  z-index: 1000;
}

.grid nav .nav-wrapper .logo {
  width: 115px;
  margin: 0 auto;
  display: block;
  padding-right: 15px;
}

.grid nav .nav-wrapper .logo > svg path {
  fill: #333;
}

.grid nav .nav-wrapper .sponsor {
  text-align: center;
  padding-top: 20px;
}

.grid nav .nav-wrapper .sponsor p,
.grid nav .nav-wrapper .sponsor img {
  display: block;
  margin: 0 auto;
}

.grid nav .nav-wrapper .sponsor p {
  font-size: 14px;
  margin-bottom: 8px;
}

.grid nav .nav-wrapper .sponsor img {
  background-color: white;
  width: 85%;
  box-shadow: -4px 4px 16px 0 rgba(116, 116, 116, 0.16);
  padding: 10px;
  border-radius: 8px;
}

.grid nav .nav-wrapper .nav-toggle {
  display: none;
  cursor: pointer;
  width: 20px;
  height: 20px;
}

.grid nav .nav-wrapper #level {
  width: 100%;
  margin-top: 35px;
  margin-bottom: 20px;
  position: relative;
}

.grid nav .nav-wrapper #level .v-snack:not(.v-snack--active)::before {
  content: none;
}

.grid nav .nav-wrapper #level .v-snack:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #323232;
  left: 90px;
  top: -7px;
  transform: rotate(90deg);
}

.grid nav .nav-wrapper #level .v-snack--absolute {
  top: 50px;
  bottom: initial;
}

.grid nav .nav-wrapper #level .v-snack__wrapper {
  min-width: 250px;
  max-width: 300px;
}

.grid nav .nav-wrapper #level .v-snack__content {
  font-size: 15px;
}

.grid nav .nav-wrapper #level .v-snack .row {
  margin-top: 10px;
}

.grid nav .nav-wrapper #level .v-snack .col {
  display: flex;
  align-items: center;
}

.grid nav .nav-wrapper #level .v-snack .col button {
  align-self: center;
  margin-top: 0px;
  border: 1px solid #ffffff;
  border-radius: 15px;
}

.grid nav .nav-wrapper #level .v-snack .col button span {
  font-size: 15px;
}

.grid nav .nav-wrapper #level .v-snack .col label {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.grid nav .nav-wrapper #level .v-snack .col label input {
  margin-right: 10px;
  margin-left: 10px;
}

.grid nav .nav-wrapper #level .dropdown {
  position: relative;
  margin: 0;
  padding: 0;
  line-height: initial;
}

.grid nav .nav-wrapper #level .dropdown--button {
  padding: 5px 8px;
  color: #d0112b;
  font-weight: bold;
  height: 50px;
  line-height: 35px;
  font-size: 95%;
}

.grid nav .nav-wrapper #level .dropdown--button svg {
  width: 8px;
}

.grid nav .nav-wrapper #level .dropdown a {
  color: #ffffff;
}

.grid nav .nav-wrapper #level .dropdown a:visited {
  color: #ffffff;
}

.grid nav .nav-wrapper #level .dropdown > button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid nav .nav-wrapper #level .dropdown--menu li {
  padding: 0;
  margin: 0;
}

.grid nav .nav-wrapper #level .dropdown--menu li.active {
  background-color: #d0112b;
}

.grid nav .nav-wrapper #level .dropdown--menu li.active a,
.grid nav .nav-wrapper #level .dropdown--menu li.active a:visited,
.grid nav .nav-wrapper #level .dropdown--menu li.active a:hover {
  color: #ffffff !important;
  background-color: #d0112b !important;
  background-image: none !important;
}

.grid nav .nav-wrapper #level .dropdown--menu li.is404 {
  background-color: initial;
}

.grid nav .nav-wrapper #level .dropdown--menu li.is404 .router-link-active {
  background-color: initial;
}

.grid nav .nav-wrapper #level .dropdown--menu li a,
.grid nav .nav-wrapper #level .dropdown--menu li a:visited {
  color: #000000 !important;
}

.grid nav .nav-wrapper #level .dropdown--open > .dropdown--button {
  background-image: linear-gradient(to bottom, #dbdbdb 0, #e2e2e2 100%);
  background-repeat: repeat-x;
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
}

.grid nav .nav-wrapper #level .dropdown > .dropdown--menu {
  position: absolute;
  top: 48px;
  left: 0px;
  z-index: 1001;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.grid nav .nav-wrapper #level .dropdown > .dropdown--menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  color: #ffffff;
  white-space: nowrap;
}

.grid nav .nav-wrapper #level .dropdown > .dropdown--menu > li > a:hover {
  background-color: #e8e8e8;
  background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
  background-repeat: repeat-x;
  text-decoration: none;
}

.grid nav .nav-wrapper #level .dropdown > .dropdown--menu > li > a:visited {
  color: #ffffff;
}

.grid nav .nav-wrapper #level .dropdown--open > .dropdown--menu {
  display: block;
}

.grid nav .nav-wrapper .navigation {
  color: #333;
  margin: 0px;
  padding: 0px;
}

.grid nav .nav-wrapper .navigation > li {
  margin: 1.5em 0;
  font-size: 14px;
}

.grid nav .nav-wrapper .navigation > li:last-child {
  margin-left: -25px;
  margin-right: -20px;
  padding-left: 30px;
}

.grid nav .nav-wrapper .navigation > li.sidebar-divider {
  position: relative;
  padding-top: 1.5em;
}

.grid nav .nav-wrapper .navigation > li.sidebar-divider:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #333;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
}

.grid nav .nav-wrapper .navigation > li a {
  color: #333;
  font-weight: 400;
  font-size: 110%;
}

.grid nav .nav-wrapper .navigation > li a.router-link-exact-active.router-link-active,
.grid nav .nav-wrapper .navigation > li a:hover {
  color: #d0112b;
  font-weight: bold;
  border-left: 5px solid #d0112b;
  padding-left: 5px;
  margin-left: -10px;
}

.grid nav .nav-wrapper .navigation > li a.router-link-exact-active.router-link-active a,
.grid nav .nav-wrapper .navigation > li a:hover a {
  color: #d0112b;
  font-weight: bold;
}

.grid nav .nav-wrapper .navigation > li a.disabled:hover {
  border: none;
}

.grid .content-area {
  width: calc(100% - 250px);
  position: relative;
  background-color: #fefbfc;
  flex-grow: 1;
  box-shadow: -4px 4px 16px 0 rgba(116, 116, 116, 0.16);
}

.grid .content-area .top-bar {
  padding: 0px;
  position: fixed;
  width: calc(100% - 250px);
  background: #d0112b;
  z-index: 100;
}

.grid .content-area .top-bar--wrapper {
  border-bottom: 1px solid #d0112b;
  padding: 10px 60px 10px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.grid .content-area .top-bar--wrapper .sponsor {
  display: flex;
  align-items: center;
  width: 450px;
  font-size: 12px;
}

.grid .content-area .top-bar--wrapper .sponsor img {
  height: 50px;
  margin-left: 30px;
}

.grid .content-area .top-bar--wrapper .title {
  display: block;
  color: white;
  font-weight: bold;
  font-size: 24px;
  letter-spacing: 0.2px;
  line-height: 28px;
}

.grid .content-area .top-bar--wrapper .top-link {
  background-color: white;
  color: #d0112b;
  padding: 14px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
}

.grid .content-area .top-bar--wrapper .top-link svg {
  margin-left: 5px;
  fill: #d0112b;
}

.grid .content-area .main-content {
  padding: 0px;
  margin-top: 100px;
}

.grid .content-area .main-content .page-wrapper {
  min-height: 90vh;
}

@media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1) {
  .grid .content-area .main-content .page-wrapper {
    padding-right: 16px;
  }
}

.grid .content-area .main-content .footer {
  background-size: cover;
  background-repeat: no-repeat;
  color: #ffffff;
}

.grid .content-area .main-content .footer .ucec-logo .cls-1 {
  fill: #f9f9f9;
}

.grid .content-area .main-content .footer .ucec-logo .cls-2 {
  fill: #ce0e2d;
}

.grid .content-area .main-content .footer .uc-logo {
  height: 50px;
}

.grid .content-area .main-content .footer ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 500px;
}

.grid .content-area .main-content .copyright {
  color: #ffffff;
  background-color: #000000;
  padding: 20px;
}

.isloading[data-clicked=true] {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.isloading[data-clicked=true]:after {
  content: "spinner";
  display: inline-block;
  background-image: url("https://smartpath2-production.s3.us-east-1.amazonaws.com/static/loading.gif");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: 10000px;
}

.isloading--white[data-clicked=true] {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 10px;
}

.isloading--white[data-clicked=true]:after {
  content: "spinner";
  display: inline-block;
  background-image: url("https://smartpath2-production.s3.us-east-1.amazonaws.com/static/loading-white.gif");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: 10000px;
}

.lesson-card {
  background: white;
  box-sizing: border-box;
  margin: 0 auto 25px auto;
  border-radius: 8px;
  box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
}

.lesson-card h2,
.lesson-card #adminLayout .admin-assessment-intro--heading,
#adminLayout .lesson-card .admin-assessment-intro--heading,
.lesson-card #adminLayout .admin-lesson-intro--heading,
#adminLayout .lesson-card .admin-lesson-intro--heading,
.lesson-card .admin-homework--heading,
.lesson-card .assessment-builder--heading,
.lesson-card .teacher-pre-assessment--heading,
.lesson-card .editable--help--h2-heading {
  color: #333333;
  font-family: Rubik;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 34px;
  order: 2;
}

.lesson-card p {
  font-size: 15px;
}

.lesson-card ul {
  margin: 10px 0 10px 50px;
  padding: 0;
  font-size: 16px;
  list-style: disc;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

.lesson-card ul li {
  margin: 0;
  padding: 0 20px 0 0;
}

.lesson-card--heading {
  display: flex;
  align-items: center;
  width: 100%;
}

.lesson-card--heading > .img-wrapper {
  width: 15%;
}

.lesson-card--heading img {
  order: 1;
  height: 80px;
  margin: 5px auto;
  display: block;
}

.lesson-card--content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.lesson-card--content > .text-wrapper {
  width: 70%;
}

.lesson-card--content a svg {
  margin-right: 10px;
}

.lesson-card--padding-wrap {
  padding: 20px 0 45px 0;
}

.lesson-card--padding-wrap-even {
  padding: 20px;
}

.lesson-card--padding-wrap-even h2 + p,
.lesson-card--padding-wrap-even #adminLayout .admin-assessment-intro--heading + p,
#adminLayout .lesson-card--padding-wrap-even .admin-assessment-intro--heading + p,
.lesson-card--padding-wrap-even #adminLayout .admin-lesson-intro--heading + p,
#adminLayout .lesson-card--padding-wrap-even .admin-lesson-intro--heading + p,
.lesson-card--padding-wrap-even .admin-homework--heading + p,
.lesson-card--padding-wrap-even .assessment-builder--heading + p,
.lesson-card--padding-wrap-even .teacher-pre-assessment--heading + p,
.lesson-card--padding-wrap-even .editable--help--h2-heading + p {
  padding-top: 20px;
}

.lesson-card--link-container {
  border-radius: 0 0 8px 8px;
  border-top: 1px solid #333333;
  padding: 12px;
}

.lesson-card--link-container > div {
  display: flex;
  padding: 12px;
}

.lesson-card--link-container button {
  font-size: 18px;
  text-decoration: underline;
  color: #3967fe;
  font-weight: 700;
  padding-left: 20px;
}

.lesson-card--link-container button svg {
  margin-right: 10px;
}

.lesson-card--link-container button svg > path {
  fill: black;
}

.lesson-card .download-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  border-top: 1px solid #dddddd;
  padding: 20px 0px;
}

.lesson-card .download-container .download {
  text-decoration: none;
  color: #3967fe;
  padding-left: 20px;
}

.lesson-card .download-container .download::before {
  content: "";
  display: inline-block;
  background-image: url("/assets/icon_download.svg");
  background-repeat: no-repeat;
  width: 22px;
  height: 22px;
  margin-right: 10px;
}

.lesson-card .download-container:nth-child(2) {
  border-top: none !important;
}

.screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  top: -9999px;
}

#staticLayout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "RubikCL", "Rubik", sans-serif;
  background-color: #f7f9fb;
}

@media screen and (max-width: 640px) {
  #staticLayout {
    min-height: auto;
  }
}

#staticLayout h1,
#staticLayout .editable--help--h1-heading {
  margin: 32px auto;
}

@media screen and (max-width: 640px) {
  #staticLayout h1,
  #staticLayout .editable--help--h1-heading {
    width: 100%;
    text-align: center;
    padding: 12px 0 12px 0;
    margin: 0 0 16px 0;
    border-bottom: 1px solid #000000;
    box-sizing: border-box;
  }
}

#staticLayout h2,
#staticLayout #adminLayout .admin-assessment-intro--heading,
#adminLayout #staticLayout .admin-assessment-intro--heading,
#staticLayout #adminLayout .admin-lesson-intro--heading,
#adminLayout #staticLayout .admin-lesson-intro--heading,
#staticLayout .admin-homework--heading,
#staticLayout .assessment-builder--heading,
#staticLayout .teacher-pre-assessment--heading,
#staticLayout .editable--help--h2-heading {
  color: #333;
  font-family: "RubikCL", "Rubik", sans-serif;
  font-size: 18px;
  letter-spacing: 0.4px;
  line-height: 18px;
  margin: 30px 0 10px 0;
}

#staticLayout p {
  margin-bottom: 15px;
}

#staticLayout .logo {
  display: block;
  margin: 0 auto;
  width: 86px;
  height: 44px;
  outline: none;
}

@media screen and (max-width: 640px) {
  #staticLayout .logo {
    width: 62px;
    height: 32px;
  }
}

#staticLayout .footer {
  background-image: none;
  background-color: #000000;
  min-height: 0;
  margin-top: auto;
}

#staticLayout .footer--menu,
#staticLayout .footer--copyright {
  top: 0;
}

#staticLayout .static-container {
  background: white;
  box-sizing: border-box;
  max-width: 60%;
  padding: 0px 40px 30px;
  margin: 0 auto 25px auto;
  border-radius: 8px;
  box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
  position: relative;
}

@media screen and (max-width: 640px) {
  #staticLayout .static-container {
    max-width: 80%;
  }
}

.navbar {
  min-height: 50px;
  margin-bottom: 20px;
  z-index: 9999;
}

.navbar--default {
  background-image: none;
  background-color: #ffffff;
  border: none;
  padding: 0;
  box-shadow: none;
}

.navbar--bottom-ribbon {
  border-bottom: 20px solid #d0112b;
}

.navbar--fixed-top {
  top: 0;
  left: 0;
  right: 0;
  position: fixed;
}

.navbar--logo {
  background: url("https://smartpathv2-staging.s3.us-east-2.amazonaws.com/static/ilearn-logo.svg") no-repeat;
  display: block;
  height: 44px;
  width: 125px;
  text-indent: -9999px;
  margin: 15px;
  float: left;
}

.navbar--body {
  display: block !important;
  height: auto;
}

.navbar--menu {
  float: right !important;
  margin-right: 15px;
}

.navbar--menu > li {
  float: left;
  position: relative;
  display: block;
  list-style: none;
}

.navbar--menu > li > a {
  display: block;
  position: relative;
  padding: 24px 15px 10px 15px;
  color: #777777;
  font-weight: 600;
  font-size: 15px;
}

.navbar--menu > li > a:hover {
  color: #333;
}

.navbar--menu > li > a.router-link-active,
.navbar--menu > li > a.curriculum-active {
  border-bottom: 2px solid rgba(0, 0, 0, 0.5);
  padding-bottom: 2px;
  padding-left: 0px;
  padding-right: 0px;
  margin-right: 15px;
  margin-left: 15px;
}

.navbar--lessons {
  clear: both;
  display: flex;
  justify-content: space-evenly;
  color: #666666;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid #d0112b;
}

.navbar--lessons a {
  height: 60px;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666666;
  flex-grow: 1;
  padding: 1.5vh 0;
  text-align: center;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}

.navbar--lessons a:visited {
  color: inherit;
}

.navbar--lessons a:hover {
  background-color: #efefef;
}

.navbar--lessons a:last-of-type {
  border-right: revert;
}

.navbar--lessons a.router-link-exact-active {
  color: #ffffff;
  background-color: #d0112b;
}

.navbar--lessons a.router-link-exact-active:hover {
  color: #000000;
}

.navbar--lessons a.active-lesson,
.navbar--lessons a.active-assessment {
  color: #ffffff;
  background-color: #d0112b;
}

.navbar--lessons a.active-lesson:hover,
.navbar--lessons a.active-assessment:hover {
  color: #000000;
}

.navbar--reports {
  background: #d0112b;
  clear: both;
  display: block;
  height: 50px;
  text-align: center;
  width: 100%;
}

.navbar--reports a {
  color: white;
  display: inline-block;
  line-height: 24px;
  padding: 0;
  font-weight: 600;
  text-align: center;
  margin: 12px 2vw;
}

.navbar--reports a:hover {
  color: #000000;
}

.navbar--reports a.router-link-exact-active {
  border-bottom: solid 2px white;
}

.navbar--reports a.router-link-exact-active:hover {
  color: #000000;
}

.navbar--submenu-wrapper {
  background-color: #d0112b;
}

.navbar--submenu-wrapper .router-link-exact-active {
  border-bottom: 2px solid #ffffff;
}

.navbar--submenu {
  display: flex;
  justify-content: center;
}

.navbar--submenu-link,
.navbar--submenu-link:hover,
.navbar--submenu-link:visited {
  color: #ffffff;
  display: inline-block;
  font-size: 1em;
  border-top: 2px solid transparent;
  border-bottom: 2px solid transparent;
  margin: 10px 20px;
}

.navbar--submenu-link.router-link-active {
  border-bottom-color: #ffffff;
}

.navbar--submenu-link:hover {
  color: #000000;
}

.navbar--submenu-button,
.navbar--submenu-button:hover,
.navbar--submenu-button:visited {
  color: #ffffff;
  border: 2px solid #ffffff;
  border-radius: 5px;
  padding: 5px 25px;
  margin: 5px 40px;
  font-size: 0.9em;
}

.dropdown--open > .dropdown--button {
  background-image: linear-gradient(to bottom, #dbdbdb 0, #e2e2e2 100%);
  background-repeat: repeat-x;
  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
}

.dropdown--open > .dropdown--button > span {
  display: flex;
  align-items: center;
}

.dropdown--open > .dropdown--button > span svg {
  margin-left: 5px;
}

.dropdown > .dropdown--menu {
  position: absolute;
  top: 100%;
  z-index: 1001;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-clip: padding-box;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

.dropdown > .dropdown--menu > li {
  padding: 0px;
  margin-bottom: 0px;
}

.dropdown > .dropdown--menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
}

.dropdown > .dropdown--menu > li > a:hover {
  background-color: #e8e8e8;
  background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
  background-repeat: repeat-x;
  text-decoration: none;
}

.dropdown--open > .dropdown--menu {
  display: block;
}

.dropdown .router-link-active {
  color: #ffffff !important;
  background-color: #d0112b;
}

.footer {
  background-color: black;
  padding: 30px 20px 15px 20px;
  color: #ffffff;
  font-size: 14px;
  font-family: "RubikCL", "Rubik", sans-serif;
}

.footer a {
  color: #ffffff;
  font-weight: 700;
  font-size: 16px;
}

.footer--menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer--menu-item {
  background-repeat: no-repeat;
  background-size: contain;
}

.footer--menu-item--ec svg {
  height: 50px;
}

.footer--menu-item--ec svg .cls-1 {
  fill: #f9f9f9;
}

.footer--menu-item--ec svg .cls-2 {
  fill: #ce0e2d;
}

.footer--menu-item--ec svg .st0 {
  fill: #f9f9f9;
}

.footer--menu-item--ec svg .st1 {
  fill: #ce0e2d;
}

.footer--menu-item--uc {
  position: relative;
  top: 10px;
}

.footer--menu-item--uc svg {
  height: 50px;
  width: 115px;
}

.footer--menu--links a {
  margin: 0 30px;
  white-space: nowrap;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .footer--menu--links a {
    margin: 0 15px;
    font-size: 12px;
  }
}

.footer--menu--links a:last-child {
  margin-right: 0;
}

.footer--menu--links a:hover {
  text-decoration: underline;
}

.footer--copyright {
  position: relative;
  text-align: left;
}

.footer.stick-to-bottom {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 10000;
  overflow: auto;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal--content {
  z-index: 10001;
  background-color: #ffffff;
  width: 80%;
  margin: 30px auto;
}

.modal--title {
  color: #555555;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #dddddd;
  padding: 15px;
}

.modal--title svg.fa-times {
  cursor: pointer;
}

.modal--body {
  padding: 30px 60px;
}

.modal--body__section {
  margin: 1.25rem 0;
  display: flex;
  flex-direction: row;
}

.modal--body__section > span:first-child {
  flex: 0 0 30%;
  margin-right: 3rem;
  font-size: 12.6px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

.modal--body__section input {
  flex: 1 1 0;
  display: block;
  height: 34px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
  background-color: #ffffff;
}

.modal--upload-spinner {
  margin-top: 30vh;
}

.modal--upload-spinner > p {
  color: #ffffff;
  text-align: center;
  font-size: 2rem;
  line-height: 3rem;
}

.modal--upload-spinner > img {
  display: block;
  margin: 0 auto;
}

.modal--footer {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  border-top: 1px solid #dddddd;
}

.modal--footer button {
  margin-left: 0.5rem;
}

.student-name-modal {
  z-index: 10001;
}

.student-name-modal .modal--content {
  max-width: 600px;
  border-radius: 5px;
}

.student-name-modal .modal--title {
  border-bottom: none;
  justify-content: center;
  font-size: 24px;
  line-height: 1.5;
}

@media screen and (max-width: 640px) {
  .student-name-modal .modal--title {
    font-size: 16px;
  }
}

.student-name-modal .modal--body {
  padding: 10px 30px;
}

.student-name-modal .modal--footer {
  justify-content: center;
}

.student-name-modal .modal--footer button.button,
.student-name-modal .modal--footer button.teacher-pre-assessment--add-question-button,
.student-name-modal .modal--footer button.form-file__button,
.student-name-modal .modal--footer button.asset-browser__upload-button {
  margin: 0px !important;
  width: 140px;
  padding: 10px;
  font-size: 14px;
}

.student-name-modal .student-name-modal__form {
  display: flex;
  gap: 20px;
  width: 100%;
}

.student-name-modal .student-name-modal__form .input-group {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.student-name-modal .student-name-modal__form label {
  font-size: 14px;
  margin-bottom: 5px;
  text-transform: capitalize;
}

.student-name-modal .student-name-modal__form input {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: #444444;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  transition: all 0.25s ease;
}

.student-name-modal .student-name-modal__form input:focus {
  border-color: #3967fe;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

@media screen and (max-width: 640px) {
  .student-name-modal .student-name-modal__form {
    display: block;
  }

  .student-name-modal .student-name-modal__form input {
    width: 100%;
    margin: 0 0 20px 0;
  }
}

.student-name-modal .button,
.student-name-modal .teacher-pre-assessment--add-question-button,
.student-name-modal .form-file__button,
.student-name-modal .asset-browser__upload-button {
  margin: 0 auto;
  transition: all 0.25s ease;
}

.student-name-modal .button:disabled,
.student-name-modal .teacher-pre-assessment--add-question-button:disabled,
.student-name-modal .form-file__button:disabled,
.student-name-modal .asset-browser__upload-button:disabled {
  opacity: 0.5;
}

@media screen and (max-width: 640px) {
  .student-name-modal .button,
  .student-name-modal .teacher-pre-assessment--add-question-button,
  .student-name-modal .form-file__button,
  .student-name-modal .asset-browser__upload-button {
    background-color: #3967fe;
    width: calc(100% - 30px);
    margin: -20px 15px 20px 15px;
    border-radius: 20px;
  }

  .student-name-modal .button:hover,
  .student-name-modal .teacher-pre-assessment--add-question-button:hover,
  .student-name-modal .form-file__button:hover,
  .student-name-modal .asset-browser__upload-button:hover {
    background-color: rgb(6.256281407, 64.0452261307, 253.743718593);
  }
}

.confirmation {
  z-index: 10001;
}

.confirmation .modal--content {
  max-width: 960px;
}

.confirmation .modal--footer {
  padding: 15px;
}

.confirmation .modal--footer button:first-child {
  border: 1px solid #ccc;
  background-color: #fff;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  text-shadow: 0 1px 0 #fff;
  outline: 0;
  background-image: linear-gradient(to bottom, #fff 0, #e0e0e0 100%);
}

.confirmation .modal--footer button:first-child:hover {
  background-color: #e0e0e0;
}

.question-text-container {
  display: flex;
  flex-direction: column;
  width: 80%;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .question-text-container {
    width: 100%;
  }
}

.question-text-container .question-text-container {
  width: 100%;
  text-align: left;
}

.question-text-container .question-text-container h3 {
  font-size: 27px;
  margin: 0 auto 30px auto;
}

.question-text-container .question-text-container p {
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}

.question-text-container .question-text-container .with-audio h3 {
  width: 80%;
}

.question-text-container .question-text-container .with-audio .body-text {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.question-text-container .question-text-container .question-text {
  position: relative;
  display: block !important;
  width: 100%;
  margin: 0 auto;
}

.question-text-container .question-text-container .question-text .audio-player {
  position: absolute;
  top: -55px;
  left: 0px;
}

.question-text-container .question-text-container .question-text .audio-player .button,
.question-text-container .question-text-container .question-text .audio-player .teacher-pre-assessment--add-question-button,
.question-text-container .question-text-container .question-text .audio-player .form-file__button,
.question-text-container .question-text-container .question-text .audio-player .asset-browser__upload-button {
  background-color: #3967fe;
  padding: 0px;
  width: 40px;
  height: 40px;
}

.question-text-container .question-text-container .question-text .audio-player .button svg path,
.question-text-container .question-text-container .question-text .audio-player .teacher-pre-assessment--add-question-button svg path,
.question-text-container .question-text-container .question-text .audio-player .form-file__button svg path,
.question-text-container .question-text-container .question-text .audio-player .asset-browser__upload-button svg path {
  fill: #fff;
}

.question-text-container .question-text-container .question-text .audio-player p {
  font-size: 13px;
  text-align: center;
}

.question-text-container .question-text-container .question-image {
  max-width: 60%;
  margin: 0 auto;
  padding-bottom: 20px;
}

.question-text-container .question-text-container .question-image img {
  max-width: 100%;
}

.question-text-container ul {
  display: inline-block;
  margin: 40px auto;
}

.question-text-container ul li {
  display: flex;
  align-items: center;
  text-align: left;
  padding-bottom: 20px;
  font-size: 22px;
}

.question-text-container ul li .answer-radio,
.question-text-container ul li .answer-checkbox {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  margin-right: 30px;
  border: 2px solid black;
  border-radius: 50%;
  cursor: pointer;
}

.question-text-container ul li .answer-radio:hover,
.question-text-container ul li .answer-checkbox:hover {
  border-color: #3967fe;
}

.question-text-container ul li .answer-radio svg,
.question-text-container ul li .answer-checkbox svg {
  color: #00aa00;
  width: 40px;
  height: 40px;
}

.question-text-container ul li .answer-checkbox {
  border-radius: 0px;
}

.question-text-container ul li .answer-checkbox svg {
  width: 26px;
  height: 26px;
}

.question-text-container ul li:focus {
  outline: none;
}

.question-text-container ul li:focus .answer-checkbox,
.question-text-container ul li:focus .answer-radio {
  border-color: #3967fe;
}

.question-text-container ul li.selected-answer .answer-radio,
.question-text-container ul li.selected-answer .answer-checkbox {
  border-width: 3px;
}

.question-text-container .item-matching--headers {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(2, 200px);
  justify-content: space-between;
  width: 100%;
}

.question-text-container .item-matching--headers h3 {
  grid-column: auto;
  text-align: center !important;
  margin: 0;
}

.question-text-container .item-matching--headers h3:first-child {
  grid-column: 2;
}

.question-text-container .item-matching--headers h3:last-child {
  grid-column: 3;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .question-text-container .item-matching--headers h3 {
    font-size: 16px;
  }
}

.question-text-container .item-matching--row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) repeat(2, 200px);
  align-items: center;
  border-top: 2px solid rgba(51, 51, 51, 0.2);
  width: 100%;
}

.question-text-container .item-matching--row:first-of-type {
  border-top: none;
}

.question-text-container .item-matching--row .image-container,
.question-text-container .item-matching--row .text-container {
  grid-column: 1;
  justify-self: left;
}

.question-text-container .item-matching--row .image-container {
  display: flex;
  width: 120px;
  height: 120px;
  box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
  margin: 20px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .question-text-container .item-matching--row .image-container {
    width: 100px;
    height: 100px;
  }
}

.question-text-container .item-matching--row .image-container img {
  margin: auto;
  width: 90%;
  align-self: center;
}

.question-text-container .item-matching--row .text-container {
  min-height: 120px;
  display: flex;
  align-items: center;
  font-size: 24px;
  padding: 10px;
}

.question-text-container .item-matching--row ul {
  grid-column: 2/span 2;
  display: grid;
  grid-template-columns: subgrid;
  margin: 0;
  width: 100%;
  padding: 0;
}

.question-text-container .item-matching--row ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  height: 100%;
}

.question-text-container .item-matching--row ul li:first-child {
  grid-column: 1;
}

.question-text-container .item-matching--row ul li:last-child {
  grid-column: 2;
}

.question-text-container .item-matching--row ul li .answer-radio,
.question-text-container .item-matching--row ul li .answer-checkbox {
  margin-right: 0;
}

.question-text-container .item-matching--row ul li .mobile-title {
  display: none;
}

.question-text-container .item-ordering--row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid rgba(51, 51, 51, 0.2);
  position: relative;
}

.question-text-container .item-ordering--row:first-of-type {
  border-top: none;
}

.question-text-container .item-ordering--row .text-container {
  min-height: 120px;
  display: flex;
  align-items: center;
  font-size: 24px;
  padding: 10px;
}

.question-text-container .item-ordering--row .image-container {
  display: flex;
  width: 120px;
  height: 120px;
  box-shadow: 0 2px 0 2px rgba(0, 0, 0, 0.05);
  margin: 20px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .question-text-container .item-ordering--row .image-container {
    width: 100px;
    height: 100px;
  }
}

.question-text-container .item-ordering--row .image-container img {
  margin: auto;
  width: 90%;
  align-self: center;
}

.question-text-container .item-ordering--row ul {
  display: flex;
  margin: 0;
  width: 66%;
}

.question-text-container .item-ordering--row ul .order-header {
  position: absolute;
  top: -14px;
  white-space: nowrap;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .question-text-container .item-ordering--row ul .order-header {
    font-size: 20px;
  }
}

.question-text-container .item-ordering--row ul li {
  font-size: 13px;
  text-align: right;
  width: 200px;
  padding: 0px;
  margin: auto;
  justify-content: center;
  height: 60px;
}

.question-text-container .item-ordering--row ul li .answer-radio,
.question-text-container .item-ordering--row ul li .answer-checkbox {
  margin-right: 0;
  margin-top: -5px;
}

.question-text-container .multiple-choice-image--list {
  display: flex;
  justify-content: center;
  margin: 40px auto;
  min-width: 480px;
  width: 40vw;
  flex-wrap: wrap;
}

.question-text-container .multiple-choice-image--item {
  margin: 10px 20px;
  width: 120px;
  height: 120px;
  overflow: hidden;
  position: relative;
}

.question-text-container .multiple-choice-image--item img {
  width: 100%;
  height: auto;
}

.question-text-container .multiple-choice-image--item:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px dashed #dddddd;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.25s ease;
}

.question-text-container .multiple-choice-image--selected:after {
  border: 6px solid rgba(57, 103, 254, 0.5);
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .question-text-container .multiple-choice-image--selected:after {
    border-color: #3967fe;
  }
}

.question-text-container--with-image ul {
  margin-left: 0;
}

.question-container {
  margin-bottom: 40px !important;
}

.question-text-section,
.question-answer-section {
  position: relative;
  width: 100%;
  width: calc(100% + 30px);
  box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
  padding: 40px 20px;
  border-radius: 8px;
  background-color: #ffffff;
  z-index: 1;
}

.question-answer-section {
  margin-top: 20px;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-text {
    display: block;
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text-section h3,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-text-section h3 {
    font-family: "Open Sans", sans-serif;
    text-align: left;
    font-size: 22px;
    margin-bottom: 20px;
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text-section .audio-player,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-text-section .audio-player {
    top: -63px;
    left: -17px;
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text-section p,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-text-section p {
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text-section .question-image,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-text-section .question-image {
    display: block;
    max-width: 80%;
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text-section .question-image img,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-text-section .question-image img {
    width: 100%;
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text-section .question-image img.loader,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-text-section .question-image img.loader {
    width: 20px;
    position: absolute;
    left: calc(50% - 10px);
    top: calc(50% - 10px);
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-answer-section,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-answer-section {
    text-align: left !important;
  }

  .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-answer-section ul,
  .page-wrapper.student-assessment .assessment-question-container .question-text-container .question-answer-section ul {
    margin: 20px 0 0 0;
  }
}

.assessment-question-container {
  display: flex;
  margin: 20px 0 85px 0;
  justify-content: center;
}

@media screen and (max-width: 640px) {
  .assessment-question-container {
    margin-top: 0;
  }
}

.color-picker {
  position: absolute;
  margin-top: 4vh;
}

.button.audio-player--control,
.audio-player--control.teacher-pre-assessment--add-question-button,
.audio-player--control.form-file__button,
.audio-player--control.asset-browser__upload-button {
  display: flex;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  padding: 0;
  border-radius: 20px;
}

.button.audio-player--control svg,
.audio-player--control.teacher-pre-assessment--add-question-button svg,
.audio-player--control.form-file__button svg,
.audio-player--control.asset-browser__upload-button svg {
  width: 20px;
  height: 20px;
}

.button.audio-player--control svg.play-icon,
.audio-player--control.teacher-pre-assessment--add-question-button svg.play-icon,
.audio-player--control.form-file__button svg.play-icon,
.audio-player--control.asset-browser__upload-button svg.play-icon {
  margin-left: 3px;
}

@media screen and (max-width: 640px) {
  .audio-player {
    position: absolute;
    left: 15px;
    top: 25px;
  }

  .audio-player .button.audio-player--control,
  .audio-player .audio-player--control.teacher-pre-assessment--add-question-button,
  .audio-player .audio-player--control.form-file__button,
  .audio-player .audio-player--control.asset-browser__upload-button {
    width: 20px;
    height: 20px;
    background: transparent;
  }

  .audio-player .button.audio-player--control svg,
  .audio-player .audio-player--control.teacher-pre-assessment--add-question-button svg,
  .audio-player .audio-player--control.form-file__button svg,
  .audio-player .audio-player--control.asset-browser__upload-button svg {
    color: #3967fe;
  }
}

.editable p:last-child {
  margin-bottom: 30px;
}

.editable--help--bold {
  font-weight: bolder;
}

.editable--help--numbered-list,
.editable--help--numbered-list > li {
  list-style: decimal;
}

.editable--help--list,
.editable--help--list > li {
  list-style: disc;
}

.editable--help--list,
.editable--help--numbered-list {
  margin: 0;
}

.editable--help--list li,
.editable--help--numbered-list li {
  margin: 0;
}

.editable--help--list-indented {
  list-style: circle;
}

.editable--help--list-indented li {
  margin: 0;
}

.editable--help table {
  border-spacing: 0 1rem;
}

.editable--help table tr td:last-of-type {
  padding-left: 2rem;
}

.editable--help pre {
  background-color: #dddddd;
  padding: 0.5rem;
}

.editable--help pre span {
  background-color: #ffffff;
  width: 0.75rem;
  display: inline-block;
}

.editable--preview ul li:before {
  display: block;
  content: "";
  width: 0.5rem;
  background: #d0112b;
  height: 1rem;
  float: left;
  margin-right: 0.5rem;
  margin-left: 1rem;
  margin-top: 0.25rem;
}

.editable--preview ul:first-of-type {
  margin-top: 1rem;
}

.editable--preview p {
  margin-bottom: 1.5rem;
}

.editable--textarea {
  width: 100%;
  height: 100%;
  padding: 10px;
}

.editable--controls {
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
}

.editable--controls button.button path,
.editable--controls button.teacher-pre-assessment--add-question-button path,
.editable--controls button.form-file__button path,
.editable--controls button.asset-browser__upload-button path {
  fill: white;
}

.editable:hover {
  border: 1px dashed rgba(0, 0, 0, 0.5);
}

.editable--editing {
  position: relative;
  z-index: 9999;
}

.editable--editing p {
  margin-bottom: 30px;
  padding-bottom: 30px;
}

.editable--editing .editable-text-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.editable--editing p,
.editable--editing textarea {
  font-size: 15px;
  line-height: 25px;
}

.editable--editing:hover {
  border: none;
}

.editable--editing .modal--content {
  text-align: left;
  font-style: normal;
}

.editable--editing .modal--footer {
  line-height: 14px;
}

.editable--editing .modal--footer button {
  font-style: normal;
}

body:has(.v-popper__popper--show-to) .presentation-controller {
  opacity: 1;
  bottom: 200px;
}

.presentation-controller {
  position: fixed;
  bottom: -60px;
  width: 80%;
  left: 10%;
  border-radius: 12px;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
  min-height: 60px;
  background: rgba(0, 0, 0, 0.85);
  opacity: 0;
  transition: all 0.25s ease-in;
}

.presentation-controller:hover,
.presentation-controller:has(*:focus),
.presentation-controller--visible {
  opacity: 1;
  bottom: 200px;
}

.presentation-controller:hover.presentation-controller--static,
.presentation-controller:has(*:focus).presentation-controller--static,
.presentation-controller--visible.presentation-controller--static {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  bottom: 0px;
}

.presentation-controller button {
  border: none;
  color: #ffffff;
  cursor: pointer;
  height: 60px;
  width: 40px;
  line-height: 40px;
  font-size: 30px;
}

.presentation-controller button:focus {
  border: 2px solid #ffffff;
  border-radius: 5px;
}

.presentation-controller button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media screen and (max-width: 640px) {
  .presentation-controller button {
    height: 30px;
    width: 20px;
    line-height: 20px;
    font-size: 20px;
  }
}

.presentation-controller__buttons {
  display: flex;
}

.presentation-controller .slide-volume-toggle,
.presentation-controller .slide-menu-button {
  margin: 0 20px;
}

.presentation-controller .slide-play-control-container {
  width: 30%;
  min-width: 200px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .presentation-controller .slide-play-control-container {
    min-width: 120px;
  }
}

.presentation-controller .video--controls-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.presentation-controller .video--current-time,
.presentation-controller .video--remaining {
  width: 100px;
  text-align: center;
  color: #999999;
  font-size: 14px;
  padding: 4px 0;
}

.presentation-controller .video--progress .vue-slider-rail {
  background-color: #999999;
}

.presentation-controller .video--progress .vue-slider-process {
  background-color: #b2102b;
}

.presentation-controller .video--progress .vue-slider-dot {
  background: transparent;
  border: none;
}

.presentation-controller .video--progress .vue-slider-dot .vue-slider-dot-handle {
  background-color: #b2102b;
  border: 4px solid #fff;
  box-sizing: border-box;
  cursor: ew-resize;
}

.slide-grid-container {
  padding: 15px 10px 20px 20px;
  background-color: #ffffff;
}

@media screen and (max-width: 640px) {
  .slide-grid-container {
    padding: 10px;
  }
}

.slide-grid-title {
  margin: 0 0 15px 0;
}

.slide-grid-wrapper {
  width: 720px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 120px;
}

@media screen and (max-width: 640px) {
  .slide-grid-wrapper {
    width: initial;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: initial;
  }
}

.slide-grid-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 160px;
  height: 120px;
  border: 1px solid #dddddd;
  position: relative;
  cursor: pointer;
}

@media screen and (max-width: 640px) {
  .slide-grid-slide {
    width: initial;
    height: initial;
  }
}

.slide-grid-slide:after {
  pointer-events: none;
  position: absolute;
  content: "";
  display: block;
  box-sizing: border-box;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
}

.slide-grid-slide .slide-type {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  background-repeat: no-repeat;
  width: 25%;
  height: 25%;
  background-size: contain;
}

.slide-grid-slide .slide-type.video {
  background-image: url("/assets/icon_video.png");
}

.slide-grid-slide .slide-type.static {
  background-image: url("/assets/icon_image.png");
}

.slide-grid-slide .slide-type.interactive {
  background-image: url("/assets/icon_game.png");
}

.slide-grid-slide img {
  max-width: 160px;
  max-height: 120px;
}

@media screen and (max-width: 640px) {
  .slide-grid-slide img {
    width: 100%;
  }
}

.slide-grid-slide--active:after {
  content: "";
  display: block;
  transition: all 0.5s ease;
  border: 5px solid #619acf;
}

.volume-bar-container .vue-slider-rail {
  background-color: #999999;
}

.volume-bar-container .vue-slider-process {
  background-color: #b2102b;
}

.volume-bar-container .vue-slider-dot {
  background: transparent;
  border: none;
}

.volume-bar-container .vue-slider-dot .vue-slider-dot-handle {
  background-color: #ffffff;
  box-sizing: border-box;
}

.volume-bar-container .vue-slider-dot-tooltip-inner {
  background-color: #000000;
  border-color: #000000;
}

.icon-card {
  display: flex;
  margin-bottom: 4vh;
}

.icon-card--header {
  margin: 0 0 2vh 0;
}

.icon-card--icon {
  background-size: contain;
  background-position: center top;
  flex-shrink: 0;
  width: 10vw;
  height: 10vh;
  margin-right: 4vw;
}

.icon-card--body {
  width: 100%;
}

/* component style */

.vue-slider-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* rail style */

.vue-slider-rail {
  background-color: #ccc;
  border-radius: 15px;
}

/* process style */

.vue-slider-process {
  background-color: #3498db;
  border-radius: 15px;
}

/* mark style */

.vue-slider-mark {
  z-index: 4;
}

.vue-slider-mark:first-child .vue-slider-mark-step,
.vue-slider-mark:last-child .vue-slider-mark-step {
  display: none;
}

.vue-slider-mark-step {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.16);
}

.vue-slider-mark-label {
  font-size: 14px;
  white-space: nowrap;
}

/* dot style */

.vue-slider-dot-handle {
  cursor: pointer;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 0.5px 0.5px 2px 1px rgba(0, 0, 0, 0.32);
}

.vue-slider-dot-handle-focus {
  box-shadow: 0px 0px 1px 2px rgba(52, 152, 219, 0.36);
}

.vue-slider-dot-handle-disabled {
  cursor: not-allowed;
  background-color: #ccc;
}

.vue-slider-dot-tooltip-inner {
  font-size: 14px;
  white-space: nowrap;
  padding: 2px 5px;
  min-width: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  border-color: #3498db;
  background-color: #3498db;
  box-sizing: content-box;
}

.vue-slider-dot-tooltip-inner::after {
  content: "";
  position: absolute;
}

.vue-slider-dot-tooltip-inner-top::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-top-color: inherit;
}

.vue-slider-dot-tooltip-inner-bottom::after {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-bottom-color: inherit;
}

.vue-slider-dot-tooltip-inner-left::after {
  left: 100%;
  top: 50%;
  transform: translate(0, -50%);
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-left-color: inherit;
}

.vue-slider-dot-tooltip-inner-right::after {
  right: 100%;
  top: 50%;
  transform: translate(0, -50%);
  height: 0;
  width: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px;
  border-right-color: inherit;
}

.vue-slider-dot-tooltip-wrapper {
  opacity: 0;
  transition: all 0.3s;
}

.vue-slider-dot-tooltip-wrapper-show {
  opacity: 1;
}

.slider .vue-slider-rail {
  background-image: linear-gradient(to bottom, #f0f0f0 0, #efefef 100%);
  background-repeat: repeat-x;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  filter: none;
  opacity: 0.9;
  border: 0 solid transparent;
}

.slider .vue-slider-process {
  background-image: linear-gradient(to bottom, #89cdef 0, #81bfde 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff89cdef",endColorstr="#ff81bfde",GradientType=0);
}

.slider .vue-slider-dot {
  width: 20px;
  height: 20px;
}

.slider .vue-slider-dot-handle {
  width: 20px;
  height: 20px;
  background-color: #337ab7;
  background-image: linear-gradient(to bottom, #149bdf 0, #0480be 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff149bdf",endColorstr="#ff0480be",GradientType=0);
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border: 0 solid transparent;
  border-radius: 50%;
}

.slider .vue-slider-mark-step {
  width: 20px;
  height: 20px;
  background-image: linear-gradient(to bottom, #f9f9f9 0, #f5f5f5 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff9f9f9",endColorstr="#fff5f5f5",GradientType=0);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  filter: none;
  opacity: 0.8;
  border: 0 solid transparent;
  margin-left: -5px;
  margin-top: -5px;
}

.slider .vue-slider-mark-step.vue-slider-mark-step-active {
  background-image: linear-gradient(to bottom, #89cdef 0, #81bfde 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff89cdef",endColorstr="#ff81bfde",GradientType=0);
  opacity: 1;
}

.slider .vue-slider-mark:first-child .vue-slider-mark-step,
.slider .vue-slider-mark:last-child .vue-slider-mark-step {
  display: block;
}

.slider .slider-labels {
  margin-top: 10px;
  display: flex;
  font-size: 18px;
  font-weight: 700;
  justify-content: space-between;
}

.slider .slider-labels .slider-label {
  padding: 0 5px;
}

.slider .vue-slider-rail,
.slider .vue-slider-process {
  background: transparent;
  box-shadow: none;
}

.slider .slider-labels {
  display: none;
}

.slider .vue-slider-marks {
  width: calc(100% - 50px);
}

.slider .vue-slider-mark-step {
  width: 60px;
  height: 66px;
  background-color: transparent;
  background-image: url("/assets/star-empty.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: none;
  left: -5px;
  cursor: pointer;
}

.slider .vue-slider-mark-step.vue-slider-mark-step-active {
  background-image: url("/assets/star-filled.svg");
}

.slider .vue-slider-dot-handle {
  opacity: 0;
}

.tooltip {
  display: block !important;
  z-index: 10000;
  max-width: 760px;
}

.tooltip.post-assessment-tooltip {
  max-width: 560px;
  font-size: 12px;
}

.tooltip.post-assessment-tooltip h2,
.tooltip.post-assessment-tooltip #adminLayout .admin-assessment-intro--heading,
#adminLayout .tooltip.post-assessment-tooltip .admin-assessment-intro--heading,
.tooltip.post-assessment-tooltip #adminLayout .admin-lesson-intro--heading,
#adminLayout .tooltip.post-assessment-tooltip .admin-lesson-intro--heading,
.tooltip.post-assessment-tooltip .admin-homework--heading,
.tooltip.post-assessment-tooltip .assessment-builder--heading,
.tooltip.post-assessment-tooltip .teacher-pre-assessment--heading,
.tooltip.post-assessment-tooltip .editable--help--h2-heading {
  margin: 20px 0;
}

.tooltip.post-assessment-tooltip h3 {
  margin: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
}

.tooltip.hidden {
  display: none !important;
}

.tooltip .tooltip-inner {
  background: #333333;
  color: white;
  border-radius: 5px;
  padding: 10px 15px;
}

.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: #333333;
  z-index: 1;
}

.tooltip[x-placement^=top] {
  margin-bottom: 5px;
}

.tooltip[x-placement^=top] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^=bottom] {
  margin-top: 5px;
}

.tooltip[x-placement^=bottom] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^=right] {
  margin-left: 5px;
}

.tooltip[x-placement^=right] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[x-placement^=left] {
  margin-right: 5px;
}

.tooltip[x-placement^=left] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip.popover .popover-inner {
  background: #f9f9f9;
  color: #333333;
  padding: 24px;
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(51, 51, 51, 0.1);
}

.tooltip.popover .popover-arrow {
  border-color: #f9f9f9;
}

.tooltip[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s, visibility 0.15s;
}

.tooltip[aria-hidden=false] {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.15s;
}

.tooltip.tooltip--light.v-popper--theme-dropdown .v-popper__arrow-container {
  background-color: transparent;
}

.tooltip.tooltip--light .v-popper__inner {
  background: #ffffff;
  color: #000000;
  border-radius: 10px;
  border: 1px solid rgba(153, 153, 153, 0.6);
  box-shadow: 0 4px 10px 0 rgba(51, 51, 51, 0.5);
}

.tooltip.tooltip--light .v-popper__inner p {
  padding: 10px 0;
}

.tooltip.tooltip--light .v-popper__arrow-container {
  background-color: white;
}

.tooltip.tooltip--light .v-popper__arrow-outer {
  border-color: white;
}

.tooltip.tooltip--light[x-placement^=top] {
  margin-bottom: 10px;
}

.tooltip.tooltip--light[x-placement^=top] .tooltip-arrow {
  border-width: 10px 10px 0 10px;
  bottom: 1px;
  left: calc(50% - 10px);
  margin-top: 0;
  margin-bottom: 0;
  transform: rotate(180deg);
}

.tooltip.tooltip--light[x-placement^=top] .tooltip-arrow:after {
  content: "";
  display: block;
  border-color: #ffffff;
  position: absolute;
  border-width: 9px 8px 0 9px;
}

.tooltip.tooltip--light[x-placement^=top] .tooltip-arrow:after,
.tooltip.tooltip--light[x-placement^=top] .tooltip-arrow:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.tooltip.tooltip--light[x-placement^=top] .tooltip-arrow:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

.tooltip.tooltip--light[x-placement^=top] .tooltip-arrow:before {
  border-color: rgba(153, 153, 153, 0);
  border-bottom-color: rgba(153, 153, 153, 0.6);
  border-width: 11px;
  margin-left: -11px;
}

.tooltip.tooltip--light[x-placement^=bottom] {
  margin-top: 10px;
}

.tooltip.tooltip--light[x-placement^=bottom] .tooltip-arrow {
  margin-top: 6px;
  margin-left: 5px;
  z-index: 1000000;
}

.tooltip.tooltip--light[x-placement^=bottom] .tooltip-arrow:after,
.tooltip.tooltip--light[x-placement^=bottom] .tooltip-arrow:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.tooltip.tooltip--light[x-placement^=bottom] .tooltip-arrow:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

.tooltip.tooltip--light[x-placement^=bottom] .tooltip-arrow:before {
  border-color: rgba(153, 153, 153, 0);
  border-bottom-color: rgba(153, 153, 153, 0.6);
  border-width: 11px;
  margin-left: -11px;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark .v-popper__inner {
  background: #000000;
  color: #000000;
  border-radius: 5px;
  border: none;
  box-shadow: 0 4px 10px 0 rgba(51, 51, 51, 0.5);
  padding: 20px 10px;
  overflow: visible;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark .v-popper__arrow-outer {
  border-color: #000000;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark .v-popper__arrow-inner {
  border-color: #000000;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=top] {
  margin-bottom: 10px;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=top] .tooltip-arrow {
  margin-top: 6px;
  margin-left: 5px;
  z-index: 1000000;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=top] .tooltip-arrow:after,
.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=top] .tooltip-arrow:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=top] .tooltip-arrow:after {
  border-color: rgba(0, 0, 0, 0);
  border-top-color: #000000;
  border-width: 10px;
  margin-left: -10px;
  bottom: -15px;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=bottom] {
  margin-top: 10px;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=bottom] .tooltip-arrow {
  margin-top: 6px;
  margin-left: 5px;
  z-index: 1000000;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=bottom] .tooltip-arrow:after,
.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=bottom] .tooltip-arrow:before {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.tooltip.v-popper--theme-dropdown.tooltip--dark[x-placement^=bottom] .tooltip-arrow:after {
  border-color: rgba(0, 0, 0, 0);
  border-bottom-color: #000000;
  border-width: 10px;
  margin-left: -10px;
}

.tooltip.tooltip--smalltext .tooltip-inner {
  max-width: 160px;
  color: #ffffff;
  font-size: 11px;
  padding: 10px 10px 15px 10px;
  text-align: center;
  line-height: 1em;
}

.form-image__delete {
  cursor: pointer;
  position: relative;
  top: 10px;
  left: 10px;
  fill-opacity: 0.3;
}

.form-image__delete:hover {
  fill-opacity: 1;
  transition: all 1s ease;
}

.form-image__confirm-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 50%;
}

.form-image__preview {
  background-position: center !important;
  background-size: contain;
  min-height: 30vh;
}

.form-image__preview svg {
  float: right;
  margin-top: 8px;
  margin-right: 8px;
}

.form-image__image {
  max-width: 95%;
  display: block;
  margin: 15px auto 0 auto;
}

.form-image__upload-wrapper {
  align-items: center;
  border: 1px dotted #777777;
  display: flex;
  flex-direction: column;
  height: 10vh;
  justify-content: center;
  width: 100%;
}

.asset-browser__upload-wrapper {
  align-items: center;
  border: 1px dotted #777777;
  display: flex;
  flex-direction: column;
  font-family: "OpenCL", "Open Sans", sans-serif;
  height: 30vh;
  justify-content: center;
  text-transform: none;
  width: 100%;
}

.asset-browser__upload-wrapper input {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}

.asset-browser__upload-wrapper small {
  flex-basis: initial !important;
  font-size: 15px;
  margin-bottom: 30px;
}

.asset-browser__gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.asset-browser .modal--body {
  max-height: 75vh;
  overflow-y: scroll;
}

.asset-browser .modal--footer {
  justify-content: center;
}

.asset-browser__thumbnail {
  max-height: 90px;
  min-width: 50px;
  min-height: 50px;
  cursor: pointer;
  margin: 10px;
}

.asset-browser__thumbnail--selected {
  border: 4px solid #3967fe;
}

.asset-browser__title {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

.asset-browser__upload-button {
  cursor: pointer;
  display: block;
}

.asset-browser__upload-spinner {
  margin-top: 1em;
  vertical-align: middle;
}

.asset-browser__upload-spinner img {
  vertical-align: middle;
}

.asset-browser__upload-header {
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}

.asset-browser__upload-filename {
  background-color: #efefef;
  border-radius: 8px;
  border-width: 0;
  font-size: 13px;
  margin-top: 20px;
  padding: 20px;
  transition: all 0.25s ease;
}

.form-audio__delete {
  cursor: pointer;
  position: relative;
  top: 10px;
  left: 10px;
  fill-opacity: 0.3;
}

.form-audio__delete:hover {
  fill-opacity: 1;
  transition: all 1s ease;
}

.form-audio__confirm-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 50%;
}

.form-audio__preview {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 2vw;
}

.form-audio__preview .editable--preview--audio {
  display: flex;
  align-items: center;
}

.form-audio__preview .editable--preview--audio svg {
  position: absolute;
  right: 8px;
  font-size: 13px;
}

.form-audio__image {
  max-width: 95%;
  display: block;
  margin: 15px auto 0 auto;
}

.form-audio__upload-wrapper {
  align-items: center;
  border: 1px dotted #777777;
  display: flex;
  flex-direction: column;
  height: 10vh;
  justify-content: center;
  width: 100%;
}

.asset-browser__upload-wrapper {
  align-items: center;
  border: 1px dotted #777777;
  display: flex;
  flex-direction: column;
  font-family: "OpenCL", "Open Sans", sans-serif;
  height: 30vh;
  justify-content: center;
  text-transform: none;
  width: 100%;
}

.asset-browser__upload-wrapper input {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}

.asset-browser__upload-wrapper small {
  flex-basis: initial !important;
  font-size: 15px;
  margin-bottom: 30px;
}

.asset-browser__gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 350px;
  overflow-y: scroll;
}

.asset-browser__gallery .individual-audio-asset {
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid #999;
  padding: 5px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.asset-browser__gallery .individual-audio-asset:hover {
  cursor: pointer;
}

.asset-browser__gallery .individual-audio-asset audio {
  width: 75%;
}

.asset-browser__gallery .individual-audio-asset p {
  width: 40%;
  text-align: center;
  font-weight: bold;
}

.asset-browser .modal--footer {
  justify-content: center;
}

.asset-browser__thumbnail {
  max-height: 90px;
  min-width: 50px;
  min-height: 50px;
  cursor: pointer;
  margin: 10px;
}

.asset-browser__thumbnail--selected {
  border: 4px solid #3967fe !important;
}

.asset-browser__title {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

.asset-browser__upload-button {
  cursor: pointer;
  display: block;
}

.asset-browser__upload-spinner {
  margin-top: 1em;
  vertical-align: middle;
}

.asset-browser__upload-spinner img {
  vertical-align: middle;
}

.asset-browser__upload-header {
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}

.asset-browser__upload-filename {
  background-color: #efefef;
  border-radius: 8px;
  border-width: 0;
  font-size: 13px;
  margin-top: 20px;
  padding: 20px;
  transition: all 0.25s ease;
}

.form-file {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  font-family: "OpenCL", "Open Sans", sans-serif;
  padding: 20px 20px;
}

.form-file > .form-file__upload-wrapper {
  align-items: center;
  border: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-transform: none;
}

.form-file > .form-file__upload-wrapper input {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}

.form-file > .form-file__upload-wrapper small {
  flex-basis: initial !important;
  font-size: 15px;
  margin-bottom: 30px;
}

.form-file__button {
  cursor: pointer;
  display: block;
}

.form-file__header {
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}

.form-file__file-name {
  background-color: #efefef;
  border-radius: 8px;
  border-width: 0;
  font-size: 13px;
  margin-top: 20px;
  padding: 20px;
  transition: all 0.25s ease;
}

.custom-select {
  position: relative;
}

.custom-select .form-control:invalid {
  color: rgba(68, 68, 68, 0.5);
}

.custom-select option {
  color: black;
}

.custom-select option:disabled {
  color: rgba(68, 68, 68, 0.5);
}

.custom-select::after {
  content: "";
  background-image: url("/assets/select-arrow.svg");
  background-position: center center;
  background-repeat: no-repeat;
  height: 6px;
  width: 10px;
  position: absolute;
  right: 8px;
  top: 70%;
  margin-top: -3px;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}

.custom-select:focus-within::after {
  opacity: 1;
}

.custom-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-checkbox label {
  font-size: 18px;
  position: relative;
  transition: color 200ms ease-in-out;
  height: 19px;
}

.custom-checkbox label span {
  position: absolute;
  left: 32px;
  top: 3px;
  font-weight: 400;
}

.custom-checkbox label::before {
  content: "";
  cursor: pointer;
  display: inline-block;
  margin-right: 4px;
  border: 1px solid #000000;
  width: 24px;
  height: 24px;
  position: relative;
  top: 1px;
  border-radius: 5px;
}

.custom-checkbox input:focus + label::before {
  outline: 2px solid;
}

.custom-checkbox input:checked + label {
  color: #444444;
}

.custom-checkbox input:checked + label::before {
  background-color: #007700;
}

.custom-checkbox input:checked + label::after {
  content: "";
  background-image: url("/assets/ic_check_white.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #444444;
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-checkbox--large label::before {
  border: 1px solid #333333;
  width: 45px;
  height: 45px;
  margin-right: 10px;
  padding: 0;
  border-radius: 8px;
}

.custom-checkbox--large input:checked + label::after {
  content: "";
  cursor: pointer;
  background-image: url("/assets/checkmark.svg");
  background-size: 24px 24px;
  background-position: center center;
  color: #dfdfdf;
  width: 24px;
  height: 24px;
  left: 11px;
  top: -16px;
}

.input-group {
  display: flex;
}

.form-inline .input-group {
  display: inline-flex;
}

.input-group input {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #444444;
  background-color: white;
  background-image: none;
  border: 1px solid #dddddd;
  border-radius: 4px 0 0 4px;
}

.input-group input:focus {
  border-color: #3967fe;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

.input-group .input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #444444;
  text-align: center;
  background-color: #efefef;
  border: 1px solid #dddddd;
  border-left: none;
  border-radius: 0 4px 4px 0;
  height: 34px;
}

.form-row {
  display: flex;
  margin-bottom: 2rem;
  align-items: center;
}

.form-row label {
  width: 30%;
  flex-shrink: 0;
  text-align: right;
  margin-right: 3rem;
  text-transform: uppercase;
}

.form-row input,
.form-row select {
  flex-grow: 1;
  padding: 1rem;
}

.form-video {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  font-family: "OpenCL", "Open Sans", sans-serif;
  padding: 20px 20px;
}

.form-video > .form-video__upload-wrapper {
  align-items: center;
  border: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-transform: none;
}

.form-video > .form-video__upload-wrapper input {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}

.form-video > .form-video__upload-wrapper small {
  flex-basis: initial !important;
  font-size: 15px;
  margin-bottom: 30px;
}

.form-video__button {
  cursor: pointer;
  display: block;
}

.form-video__header {
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}

.form-video__file-name {
  background-color: #efefef;
  border-radius: 8px;
  border-width: 0;
  font-size: 13px;
  margin-top: 20px;
  padding: 20px;
  transition: all 0.25s ease;
}

.form-interactive {
  min-height: 150px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  background: white;
  font-family: "OpenCL", "Open Sans", sans-serif;
  padding: 20px 20px;
}

.form-interactive > .form-interactive__upload-wrapper {
  align-items: center;
  border: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-transform: none;
}

.form-interactive > .form-interactive__upload-wrapper input {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}

.form-interactive > .form-interactive__upload-wrapper small {
  flex-basis: initial !important;
  font-size: 15px;
  margin-bottom: 30px;
}

.form-interactive__button {
  cursor: pointer;
  display: block;
}

.form-interactive__header {
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}

.form-interactive__file-name {
  background-color: #efefef;
  border-radius: 8px;
  border-width: 0;
  font-size: 13px;
  margin-top: 20px;
  padding: 20px;
  transition: all 0.25s ease;
}

.form-audio__delete {
  cursor: pointer;
  position: relative;
  top: 10px;
  left: 10px;
  fill-opacity: 0.3;
}

.form-audio__delete:hover {
  fill-opacity: 1;
  transition: all 1s ease;
}

.form-audio__confirm-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 50%;
}

.form-audio__preview {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 2vw;
}

.form-audio__preview .editable--preview--audio {
  display: flex;
  align-items: center;
}

.form-audio__preview .editable--preview--audio svg {
  position: absolute;
  right: 8px;
  font-size: 13px;
}

.form-audio__image {
  max-width: 95%;
  display: block;
  margin: 15px auto 0 auto;
}

.form-audio__upload-wrapper {
  align-items: center;
  border: 1px dotted #777777;
  display: flex;
  flex-direction: column;
  height: 10vh;
  justify-content: center;
  width: 100%;
}

.asset-browser__upload-wrapper {
  align-items: center;
  border: 1px dotted #777777;
  display: flex;
  flex-direction: column;
  font-family: "OpenCL", "Open Sans", sans-serif;
  height: 30vh;
  justify-content: center;
  text-transform: none;
  width: 100%;
}

.asset-browser__upload-wrapper input {
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 0.1px;
  z-index: -1;
}

.asset-browser__upload-wrapper small {
  flex-basis: initial !important;
  font-size: 15px;
  margin-bottom: 30px;
}

.asset-browser__gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 350px;
  overflow-y: scroll;
}

.asset-browser__gallery .individual-audio-asset {
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 1px solid #999;
  padding: 5px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.asset-browser__gallery .individual-audio-asset:hover {
  cursor: pointer;
}

.asset-browser__gallery .individual-audio-asset audio {
  width: 75%;
}

.asset-browser__gallery .individual-audio-asset p {
  width: 40%;
  text-align: center;
  font-weight: bold;
}

.asset-browser .modal--footer {
  justify-content: center;
}

.asset-browser__thumbnail {
  max-height: 90px;
  min-width: 50px;
  min-height: 50px;
  cursor: pointer;
  margin: 10px;
}

.asset-browser__thumbnail--selected {
  border: 4px solid #3967fe !important;
}

.asset-browser__title {
  display: grid;
  grid-template-columns: 25% 50% 25%;
}

.asset-browser__upload-button {
  cursor: pointer;
  display: block;
}

.asset-browser__upload-spinner {
  margin-top: 1em;
  vertical-align: middle;
}

.asset-browser__upload-spinner img {
  vertical-align: middle;
}

.asset-browser__upload-header {
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 10px;
  margin-left: 0;
  margin-right: 0;
  margin-top: 10px;
}

.asset-browser__upload-filename {
  background-color: #efefef;
  border-radius: 8px;
  border-width: 0;
  font-size: 13px;
  margin-top: 20px;
  padding: 20px;
  transition: all 0.25s ease;
}

.draggable {
  position: relative;
}

.draggable__loading:before {
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  content: "Saving...";
  position: absolute;
  font-size: 2rem;
  text-align: center;
  padding-top: 30%;
  color: #ffffff;
}

/**
* Contains styles for the curriculum slide builder
*/

.slide-editor h4 {
  font-size: 18px;
  line-height: 1.42857143;
  font-weight: 500;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

.slide-editor .modal--content {
  max-width: 960px;
}

.slide-editor .modal--content .modal--title__done {
  color: #0A0;
  -webkit-appearance: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid #0a0;
  border-radius: 20px;
  padding: 7px 5px;
  transition: all 300ms;
}

.slide-editor .modal--content .modal--title__done:hover {
  color: white;
  background: #0A0;
}

.slide-editor .modal--body {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.slide-editor .modal--body__section {
  font-size: 12.6px;
  font-weight: 400;
  text-align: right;
  text-transform: uppercase;
  margin-right: 5%;
  margin-bottom: 15px;
  flex-basis: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.slide-editor .modal--body__section span.section-description {
  flex-basis: 20%;
  display: block;
  text-align: right;
}

.slide-editor .modal--body__section span.section-description + * {
  flex-basis: 75%;
}

.slide-editor .modal--body__section .time {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-transform: lowercase;
  color: #333;
  font-size: 14px;
  font-family: "RubikCL", "Rubik", sans-serif;
}

.slide-editor .modal--body__section .time input {
  width: 60px;
  display: inline-block !important;
  margin-right: 15px;
  flex: 0 0 0 !important;
  border: 1px solid #ccc !important;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
}

.slide-editor .modal--body__section .talking-points {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  font-family: "RubikCL", "Rubik", sans-serif;
  flex-flow: row wrap;
}

.slide-editor .modal--body__section .talking-points input {
  max-width: 500px;
  flex-basis: 70%;
  margin-bottom: 10px;
  font-size: 14px;
  border: 1px solid #ccc !important;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
}

.slide-editor .modal--body__section .talking-points button.button,
.slide-editor .modal--body__section .talking-points button.teacher-pre-assessment--add-question-button,
.slide-editor .modal--body__section .talking-points button.asset-browser__upload-button,
.slide-editor .modal--body__section .talking-points button.form-file__button {
  flex-basis: 100%;
  width: 200px;
  display: flex;
  justify-content: flex-start;
  padding: 0px;
  color: #0A0;
}

.slide-editor .modal--body__section .talking-points button.button:hover,
.slide-editor .modal--body__section .talking-points button.teacher-pre-assessment--add-question-button:hover,
.slide-editor .modal--body__section .talking-points button.asset-browser__upload-button:hover,
.slide-editor .modal--body__section .talking-points button.form-file__button:hover {
  color: #333;
}

.slide-editor .modal--body__section .talking-points button.button:hover svg > path,
.slide-editor .modal--body__section .talking-points button.teacher-pre-assessment--add-question-button:hover svg > path,
.slide-editor .modal--body__section .talking-points button.asset-browser__upload-button:hover svg > path,
.slide-editor .modal--body__section .talking-points button.form-file__button:hover svg > path {
  fill: #333;
}

.slide-editor .modal--body__section .talking-points button.button svg,
.slide-editor .modal--body__section .talking-points button.teacher-pre-assessment--add-question-button svg,
.slide-editor .modal--body__section .talking-points button.asset-browser__upload-button svg,
.slide-editor .modal--body__section .talking-points button.form-file__button svg {
  margin-right: 5px;
}

.slide-editor .modal--body__section .talking-points button.button svg > path,
.slide-editor .modal--body__section .talking-points button.teacher-pre-assessment--add-question-button svg > path,
.slide-editor .modal--body__section .talking-points button.asset-browser__upload-button svg > path,
.slide-editor .modal--body__section .talking-points button.form-file__button svg > path {
  fill: #0A0;
}

.slide-editor .modal--body__section:last-child {
  position: relative;
  padding-bottom: 60px;
}

.slide-editor .modal--body__section:last-child button.button,
.slide-editor .modal--body__section:last-child button.teacher-pre-assessment--add-question-button,
.slide-editor .modal--body__section:last-child button.asset-browser__upload-button,
.slide-editor .modal--body__section:last-child button.form-file__button {
  right: 0px;
  bottom: 0px;
}

.slide-editor .modal--body__section:last-child button.button svg,
.slide-editor .modal--body__section:last-child button.teacher-pre-assessment--add-question-button svg,
.slide-editor .modal--body__section:last-child button.asset-browser__upload-button svg,
.slide-editor .modal--body__section:last-child button.form-file__button svg {
  margin-right: 5px;
}

.slide-editor .modal--body__section input[type=checkbox] {
  border: 0px;
  box-shadow: none;
  min-height: initial;
  flex-shrink: initial;
  flex-grow: initial;
  flex-basis: 20px;
  height: 20px;
  margin-right: auto;
  margin-top: -5px;
}

.slide-editor .confirmation .modal--body {
  align-items: flex-start;
}

.slide-editor .v-select {
  height: 35px;
}

.slide-editor .v-select .vs__dropdown-toggle {
  height: 35px;
}

.slide-editor .v-select .vs__dropdown-toggle .vs__selected {
  border: none;
  line-height: 33px;
  margin: 0;
  padding: 0 0.5em;
}

.slide-editor .v-select .vs__dropdown-menu li {
  margin: 0;
}

.slide-editor .v-select .vs__dropdown-option--highlight {
  background: #d0112b;
}

.slide-editor .v-select .vs__selected-options .vs__search {
  background: transparent !important;
  border: none !important;
  display: inherit !important;
  min-height: auto !important;
  height: 35px !important;
  margin: 0 !important;
}

.alert--invalid-file .modal--body {
  align-items: flex-start;
  text-transform: none;
}

.swal2-container {
  z-index: 9999999 !important;
}

#static-notice {
  background: #444444;
  clear: both;
  color: white;
  display: block;
  font-family: "OpenCL", "Open Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  height: auto;
  margin: 0 auto;
  padding: 0px 24px;
  position: relative;
  text-transform: uppercase;
  width: 95%;
}

#static-notice a {
  color: white;
  text-decoration: underline;
}

#static-notice a,
#static-notice .text {
  display: inline-block;
  height: auto;
  line-height: 1.25em;
  margin: 12px 0;
  max-width: 90%;
  overflow: visible;
  word-break: break-word;
}

#static-notice .close-button {
  display: inline-block;
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
}

#static-notice .close-button > * {
  cursor: pointer;
}

.static-notice-fade-leave-active {
  transition: all 0.33s ease-out;
}

.static-notice-fade-leave-to {
  opacity: 0;
}

.admin-index {
  margin: 0 4vw;
}

.admin-index--button-row {
  display: flex;
  flex-direction: row;
  padding-bottom: 5vh;
}

.admin-index--button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  height: 200px;
  color: #ffffff !important;
  font-size: 2em;
  font-weight: 700;
  margin-left: 20px;
  border: 1px solid #000000;
  border-radius: 0;
  font-family: "OpenCL", "Open Sans", sans-serif;
  transition: background-color 1s;
  background-position-x: 50%;
  background-size: cover;
  background-color: transparent;
  text-align: center;
}

.admin-index--button:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

#adminLayout .admin-overview__state-dropdown-trigger {
  justify-content: space-between !important;
}

#adminLayout .admin-overview__state-dropdown {
  position: absolute;
  z-index: 9999;
  padding: 1rem;
  background-color: #efefef;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
}

#adminLayout .admin-overview__state-dropdown > li {
  cursor: pointer;
  margin: 1rem 0;
}

#adminLayout .admin-overview__state-dropdown__title {
  width: 100%;
}

#adminLayout .admin-overview__state-dropdown__title > svg {
  float: right;
}

#adminLayout .admin-overview__standard-form > .input-group {
  align-items: center;
  margin-bottom: 2rem;
}

#adminLayout .page-content .illustration .form-image__preview {
  height: 80vh;
}

#adminLayout .page-content .illustration p {
  font-style: italic;
  font-size: 14px;
  text-align: center;
}

#adminLayout .page-content .content .admin-lesson-card {
  margin-bottom: 25px;
}

#adminLayout .page-content .content .admin-lesson-card p {
  font-size: 15px;
}

#adminLayout .page-content .content .admin-lesson-card + .admin-lesson-card svg.underline {
  margin-right: -60px;
}

#adminLayout .page-content .content .admin-lesson-card--heading {
  display: inline-block;
}

#adminLayout .page-content .content .admin-lesson-card--heading h2 + img,
#adminLayout .page-content .content .admin-lesson-card--heading .admin-assessment-intro--heading + img,
#adminLayout .page-content .content .admin-lesson-card--heading .admin-lesson-intro--heading + img,
#adminLayout .page-content .content .admin-lesson-card--heading .admin-homework--heading + img,
#adminLayout .page-content .content .admin-lesson-card--heading .assessment-builder--heading + img,
#adminLayout .page-content .content .admin-lesson-card--heading .teacher-pre-assessment--heading + img,
#adminLayout .page-content .content .admin-lesson-card--heading .editable--help--h2-heading + img {
  display: none;
}

#adminLayout .page-content .content .admin-lesson-card--heading .underline {
  position: relative;
  top: -7px;
  z-index: 1;
}

#adminLayout .page-content .content .admin-lesson-card--content {
  display: flex;
  justify-content: left;
  align-items: center;
}

#adminLayout .page-content .content .admin-lesson-card--content > .img-wrapper {
  width: 25%;
}

#adminLayout .page-content .content .admin-lesson-card--content > .img-wrapper img {
  height: 120px;
  display: block;
  margin: 0 auto;
}

#adminLayout .page-content .content .admin-lesson-card--content > p {
  width: 75%;
}

#adminLayout .page-content .content .admin-lesson-card:first-child {
  padding-top: 30px;
}

#adminLayout .page-content .content .v-tabs--fixed-tabs > .v-tabs-bar .v-tab {
  width: initial;
}

#adminLayout .page-content .content .v-tabs {
  margin-top: 40px;
}

#adminLayout .page-content .content .v-tabs .v-slide-group__content.v-tabs-bar__content {
  background-color: #d0112b;
  border-radius: 5px;
}

#adminLayout .page-content .content .v-tabs .v-slide-group__content.v-tabs-bar__content .v-tabs-slider-wrapper > .v-tabs-slider {
  background-color: transparent;
  width: 100%;
}

#adminLayout .page-content .content .v-tabs .v-slide-group__content.v-tabs-bar__content .v-tab {
  text-transform: initial;
  font-size: 15px;
  border-radius: 5px;
  max-width: initial;
  color: #d0112b;
  background-color: #ffffff;
  border: 1px solid #d0112b;
}

#adminLayout .page-content .content .v-tabs .v-slide-group__content.v-tabs-bar__content .v-tab--active {
  background-color: #d0112b;
  color: #ffffff;
}

#adminLayout .page-content .content .v-window h3 {
  font-weight: 400;
}

#adminLayout .page-content .content .v-window h3 strong {
  font-weight: 600;
}

#adminLayout .page-content .content .v-window .v-card__text.static h3 {
  font-weight: 600;
}

.themes-list,
.users-list {
  margin: 0 auto;
  padding-top: 40px !important;
}

.themes-list .page-content--body,
.users-list .page-content--body {
  width: 1170px;
  margin: 0 auto;
  padding: 0 15px;
}

.themes-list--header,
.users-list--header {
  display: flex;
  margin-bottom: 40px;
  justify-content: space-between;
}

.themes-list--header button,
.users-list--header button {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

.themes-list--header button svg,
.users-list--header button svg {
  margin-right: 5px;
  width: 10px !important;
}

.themes-list--header label,
.users-list--header label {
  display: flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
}

.themes-list--header label input,
.users-list--header label input {
  min-height: initial !important;
  height: 29px;
  padding: 4px 10px !important;
  font-size: 13px !important;
  line-height: 1.42857143;
  color: #555;
  background: #fff;
  border: 1px solid #ccc !important;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  font-weight: 400;
  outline: none;
  margin-left: 10px;
}

.themes-list--image,
.users-list--image {
  max-height: 30px;
  vertical-align: middle;
}

.themes-list .datatable thead th,
.users-list .datatable thead th {
  position: relative;
}

.themes-list .datatable thead th span:first-child,
.users-list .datatable thead th span:first-child {
  margin-right: 8px;
}

.themes-list .datatable td,
.users-list .datatable td {
  padding: 8px;
  line-height: 10px;
}

.themes-list .datatable ~ .pagination-container,
.users-list .datatable ~ .pagination-container {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
}

.themes-list .datatable ~ .pagination-container nav ul.pagination,
.users-list .datatable ~ .pagination-container nav ul.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  flex-wrap: wrap;
}

.themes-list .datatable ~ .pagination-container nav ul.pagination > li,
.users-list .datatable ~ .pagination-container nav ul.pagination > li {
  padding: 7px 15px;
  border-radius: 2px;
  font-size: 13px;
  font-family: "OpenCL", "Open Sans", sans-serif;
  line-height: 18px;
  color: #d0112b;
  border-radius: 2px;
}

.themes-list .datatable ~ .pagination-container nav ul.pagination > li:hover,
.themes-list .datatable ~ .pagination-container nav ul.pagination > li.active,
.users-list .datatable ~ .pagination-container nav ul.pagination > li:hover,
.users-list .datatable ~ .pagination-container nav ul.pagination > li.active {
  background: #efefef;
}

.themes-list .datatable ~ .pagination-container nav ul.pagination > li.hidden,
.users-list .datatable ~ .pagination-container nav ul.pagination > li.hidden {
  display: none;
}

.themes-list .datatable--pagination-button,
.users-list .datatable--pagination-button {
  border: none;
  background: none;
  padding: 7px 15px;
  display: none;
  border-radius: 2px;
  font-size: 13px;
  font-family: "OpenCL", "Open Sans", sans-serif;
  line-height: 18px;
  color: #d0112b;
  border-radius: 2px;
  margin-top: 4px;
}

.themes-list .datatable--pagination-button:hover,
.users-list .datatable--pagination-button:hover {
  background: #efefef;
}

.themes-list .datatable--pagination-button.active,
.users-list .datatable--pagination-button.active {
  display: inline-block;
}

.themes-list .datatable--cell,
.users-list .datatable--cell {
  max-width: 15vw;
}

.themes-list .datatable--cell--truncated,
.themes-list .datatable--cell--truncated-link,
.users-list .datatable--cell--truncated,
.users-list .datatable--cell--truncated-link {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.themes-list .datatable--cell--truncated-link,
.users-list .datatable--cell--truncated-link {
  color: #d0112b;
}

.themes-list .modal small,
.users-list .modal small {
  display: block;
  font-weight: 500;
  text-align: right;
  margin-bottom: 1em;
  margin-top: -1em;
}

.themes-list span.isloading,
.users-list span.isloading {
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
}

.themes-list span.isloading:after,
.users-list span.isloading:after {
  content: "spinner";
  display: inline-block;
  background-image: url("https://smartpath2-production.s3.us-east-1.amazonaws.com/static/loading.gif");
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-position: center;
  text-indent: 10000px;
}

#adminLayout .modal--content {
  width: initial;
  max-width: 960px;
}

#adminLayout .modal .theme-form__input > input,
#adminLayout .modal .theme-form__input > select,
#adminLayout .modal .theme-form__input > textarea,
#adminLayout .modal .user-form__input > input,
#adminLayout .modal .user-form__input > select,
#adminLayout .modal .user-form__input > textarea {
  display: block;
  height: 34px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
}

#adminLayout .modal .theme-form__input > input:focus,
#adminLayout .modal .theme-form__input > select:focus,
#adminLayout .modal .theme-form__input > textarea:focus,
#adminLayout .modal .user-form__input > input:focus,
#adminLayout .modal .user-form__input > select:focus,
#adminLayout .modal .user-form__input > textarea:focus {
  outline: none;
}

#adminLayout .modal .theme-form__input > input[type=checkbox],
#adminLayout .modal .user-form__input > input[type=checkbox] {
  box-shadow: none;
  width: 34px;
}

#adminLayout .modal .theme-form__input > .form-image__preview,
#adminLayout .modal .user-form__input > .form-image__preview {
  border: 1px dotted rgba(0, 0, 0, 0.5);
}

#adminLayout .modal .user-form__input .grade label {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

#adminLayout .modal .user-form__input .grade label input[type=checkbox] {
  display: inline-block;
  flex-basis: 100%;
  margin-bottom: 5px;
  width: initial;
  height: 15px;
  min-height: initial;
  padding: 0px;
}

#adminLayout .modal--footer button {
  font-size: 13px;
  font-family: "OpenCL", "Open Sans", sans-serif;
  display: flex;
  align-items: center;
}

#adminLayout .modal--footer button svg {
  margin-right: 5px;
}

#adminLayout .users-list--header button {
  float: left;
  margin-right: 12px;
}

#adminLayout .users-list .add-edit-user .modal--body fieldset {
  border: none;
  padding: 0;
}

#adminLayout .users-list .add-edit-user .modal--body fieldset:disabled {
  opacity: 0.5;
}

#adminLayout .users-list .add-edit-user .modal--footer {
  display: table;
  font-family: "OpenCL", "Open Sans", sans-serif;
  width: 100%;
}

#adminLayout .users-list .add-edit-user .modal--footer .left {
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  width: auto;
}

#adminLayout .users-list .add-edit-user .modal--footer .left span {
  color: silver;
  font-size: 15px;
  margin-left: 4px;
}

#adminLayout .users-list .add-edit-user .modal--footer .right {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
  width: auto;
}

#adminLayout .users-list .add-edit-user .modal--footer a {
  clear: both;
  cursor: pointer;
  float: left;
  font-size: 14px;
  margin: 0;
}

#adminLayout .users-list .add-edit-user .modal--footer a:not(:first-of-type) {
  margin-top: 8px;
}

#adminLayout .users-list .add-edit-user .modal--footer a:hover {
  color: darkred;
}

#adminLayout .users-list .add-edit-user .modal--footer button {
  display: inline-block;
}

.theme-form__row,
.user-form__row {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 2vh;
}

.theme-form__error,
.user-form__error {
  margin-top: 4px;
  display: inline-block;
  color: #d0112b;
}

.theme-form__input,
.user-form__input {
  width: 75%;
}

.theme-form__input input,
.theme-form__input select,
.user-form__input input,
.user-form__input select {
  width: 100%;
}

.theme-form__input__color-badge,
.user-form__input__color-badge {
  display: flex;
}

.theme-form__input__color-badge input,
.user-form__input__color-badge input {
  width: 30%;
}

.theme-form__input .Password,
.user-form__input .Password {
  max-width: unset;
}

.theme-form__input .Password input,
.user-form__input .Password input {
  border-color: #ccc !important;
}

.theme-form__input .v-select,
.user-form__input .v-select {
  height: 35px;
}

.theme-form__input .v-select .vs__dropdown-toggle,
.user-form__input .v-select .vs__dropdown-toggle {
  height: 35px;
}

.theme-form__input .v-select .vs__dropdown-toggle .vs__selected,
.user-form__input .v-select .vs__dropdown-toggle .vs__selected {
  border: none;
  line-height: 33px;
  margin: 0;
  padding: 0 0.5em;
}

.theme-form__input .v-select .vs__dropdown-menu li,
.user-form__input .v-select .vs__dropdown-menu li {
  margin: 0;
}

.theme-form__input .v-select .vs__dropdown-option--highlight,
.user-form__input .v-select .vs__dropdown-option--highlight {
  background: #d0112b;
}

.theme-form__input .v-select .vs__selected-options .vs__search,
.user-form__input .v-select .vs__selected-options .vs__search {
  background: transparent !important;
  border: none !important;
  display: inherit !important;
  min-height: auto !important;
  height: 35px !important;
  margin: 0 !important;
}

.theme-form__label,
.user-form__label {
  text-align: right;
  font-size: 0.9em;
  font-weight: 400;
  width: 20%;
  clear: left;
  text-transform: uppercase;
  margin-right: 4vw;
  line-height: 35px;
}

.theme-form__label.required::after,
.user-form__label.required::after {
  color: red;
  content: "*";
  display: inline-block;
  font-size: 20px;
  margin-right: -14px;
  vertical-align: top;
  width: 10px;
}

.teacher-pre-assessment--question-list {
  background-color: #efefef;
  padding: 20px 40px;
  position: relative;
}

.teacher-pre-assessment--question-label {
  margin: 20px 0;
}

.teacher-pre-assessment--caption {
  margin-top: 2vh;
  text-align: center;
}

.teacher-pre-assessment--question {
  min-height: 50px;
  border-bottom: 2px solid white;
  margin-bottom: 4vh;
  padding-bottom: 4vh;
}

.teacher-pre-assessment--add-question-button {
  width: 100%;
  padding: 15px 40px !important;
  font-size: 16px;
  margin: 0px -40px;
  position: absolute;
}

.teacher-pre-assessment--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 55px;
  position: relative;
  display: inline-block;
  padding-top: 30px;
}

.teacher-pre-assessment--heading svg {
  position: relative;
  top: -15px;
}

.teacher-pre-assessment--heading + div {
  margin-top: -30px;
  margin-bottom: 20px;
  font-style: italic;
  font-size: 14px;
}

#adminLayout .assessment-review-builder {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

#adminLayout .assessment-review-builder--heading {
  padding-top: 20px;
  position: relative;
}

#adminLayout .assessment-review-builder--heading h2,
#adminLayout .assessment-review-builder--heading .admin-assessment-intro--heading,
#adminLayout .assessment-review-builder--heading .admin-lesson-intro--heading,
#adminLayout .assessment-review-builder--heading .admin-homework--heading,
#adminLayout .assessment-review-builder--heading .assessment-builder--heading,
#adminLayout .assessment-review-builder--heading .editable--help--h2-heading,
#adminLayout .assessment-review-builder--heading .teacher-pre-assessment--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 2rem;
  font-weight: 500;
}

#adminLayout .assessment-review-builder--heading svg.underline {
  margin-right: 300px;
  position: relative;
  top: -5px;
}

#adminLayout .assessment-review-builder--description {
  font-style: italic;
  font-size: 14px;
  margin-top: -15px;
  margin-bottom: 30px;
  width: 600px;
}

#adminLayout .assessment-review-builder__preview-button {
  position: absolute;
  top: 15px;
  right: -15px;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9em;
  padding: 0.5em 1em;
}

#adminLayout .assessment-review-builder__language_selector {
  position: absolute;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9rem;
  padding: 0.5em 1em;
  line-height: 1.15;
  top: 15px;
  right: 8rem;
}

#adminLayout .assessment-review-builder__slide {
  background: #efefef;
  border: 1px solid #bfbfbf;
  padding: 0;
  display: flex;
  justify-content: space-between;
  cursor: all-scroll;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 1rem;
}

#adminLayout .assessment-review-builder__slide-content {
  padding: 1rem;
}

#adminLayout .assessment-review-builder__slide-type {
  text-transform: capitalize;
  font-weight: 700;
}

#adminLayout .assessment-review-builder__slide-description {
  font-size: 12.6px;
}

#adminLayout .assessment-review-builder__buttons {
  margin: -1rem;
  font-size: 0;
}

#adminLayout .assessment-review-builder__slide-delete-button {
  background: #d0112b;
  color: #ffffff;
  padding: 1rem;
  font-size: 1rem;
}

#adminLayout .assessment-review-builder__slide-edit-button {
  font-weight: 400;
  padding: 1rem 1.75rem;
  font-size: 14px;
  background: #ddd;
  box-shadow: 0 1px #ccc;
  border: none;
  border-left: 1px #333;
  margin-bottom: 2rem;
}

#adminLayout .assessment-review-builder .draggable + button {
  padding: 15px 40px;
  margin-top: 10px;
}

#adminLayout .assessment-review-builder--heading svg.underline {
  padding-bottom: 15px;
}

#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section {
  margin: 20px 0px;
}

#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section > span:first-child {
  font-size: 12.6px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section > input,
#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section > select,
#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section > textarea {
  display: block;
  height: 34px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
}

#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section > input:focus,
#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section > select:focus,
#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section > textarea:focus {
  outline: none;
}

#adminLayout .assessment-review-builder .modal.slide-editor .modal--body__section:last-child > .form-image .form-image__preview svg {
  margin-right: 8px;
  margin-top: 8px;
}

#adminLayout .assessment-review-builder .modal.slide-editor .modal--body input[type=checkbox] {
  border: 0px;
  box-shadow: none;
}

.assessment-form__row .editable {
  min-height: 2rem;
}

.answers__text,
.answers__image {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #efefef;
}

.answers__text .editable,
.answers__image .editable {
  flex: 1 0 auto;
  margin: 0 1rem;
}

.answers__text .form-image,
.answers__image .form-image {
  flex: 1 0 auto;
  margin-right: 1rem;
}

.answers__text .editable--controls button,
.answers__image .editable--controls button {
  display: block !important;
}

.answers__text label,
.answers__image label {
  flex-basis: 10%;
  display: flex;
  align-items: center;
}

.answers__text label input,
.answers__image label input {
  display: inline !important;
  margin-right: 1rem;
}

.answers__text svg,
.answers__image svg {
  flex-basis: 5%;
}

.assessment-builder {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

.assessment-builder--heading {
  padding-top: 20px;
  position: relative;
}

.assessment-builder--heading h2,
.assessment-builder--heading #adminLayout .admin-assessment-intro--heading,
#adminLayout .assessment-builder--heading .admin-assessment-intro--heading,
.assessment-builder--heading #adminLayout .admin-lesson-intro--heading,
#adminLayout .assessment-builder--heading .admin-lesson-intro--heading,
.assessment-builder--heading .admin-homework--heading,
.assessment-builder--heading .assessment-builder--heading,
.assessment-builder--heading .editable--help--h2-heading,
.assessment-builder--heading .teacher-pre-assessment--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 2rem;
  font-weight: 500;
}

.assessment-builder--heading svg.underline {
  margin-right: 300px;
  position: relative;
  top: -5px;
}

.assessment-builder--description {
  font-style: italic;
  font-size: 14px;
  margin-top: -15px;
  margin-bottom: 30px;
  width: 600px;
}

.assessment-builder__preview-button {
  position: absolute;
  top: 15px;
  right: -15px;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9em;
  padding: 0.5em 1em;
}

.assessment-builder__language_selector {
  position: absolute;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9rem;
  padding: 0.5em 1em;
  line-height: 1.15;
  top: 15px;
  right: 8rem;
}

.assessment-builder__slide {
  background: #efefef;
  border: 1px solid #bfbfbf;
  padding: 0;
  display: flex;
  justify-content: space-between;
  cursor: all-scroll;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 1rem;
}

.assessment-builder__slide-content {
  padding: 1rem;
}

.assessment-builder__slide-type {
  text-transform: capitalize;
  font-weight: 700;
}

.assessment-builder__slide-description {
  font-size: 12.6px;
}

.assessment-builder__buttons {
  margin: -1rem;
  font-size: 0;
}

.assessment-builder__slide-delete-button {
  background: #d0112b;
  color: #ffffff;
  padding: 1rem;
  font-size: 1rem;
}

.assessment-builder__slide-edit-button {
  font-weight: 400;
  padding: 1rem 1.75rem;
  font-size: 14px;
  background: #ddd;
  box-shadow: 0 1px #ccc;
  border: none;
  border-left: 1px #333;
  margin-bottom: 2rem;
}

.assessment-builder .draggable + button {
  padding: 15px 40px;
  margin-top: 10px;
}

.assessment-builder--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 55px;
  position: relative;
  padding-top: 50px;
  display: inline-block;
  position: relative;
}

.assessment-builder--heading svg.underline {
  position: relative;
  top: -15px;
  margin-right: 355px;
}

.assessment-builder__language_selector {
  position: absolute;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9rem;
  padding: 0.5em 1em;
  line-height: 1.15;
  top: 42px;
  right: 185px;
  color: white;
}

.assessment-builder__assessment-buttons {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: calc(100% - 100px);
  top: 140px;
  outline: 0;
  font-size: 13px;
}

.assessment-builder__assessment-buttons > a:not(:last-of-type) {
  margin-bottom: 1rem;
}

.assessment-builder--question {
  width: 600px;
  white-space: nowrap;
  background-color: #efefef;
  border: 1px solid #ddd;
  box-shadow: 0 1px #aaa;
  color: #252525;
  margin-bottom: 5px;
  cursor: move;
  display: flex;
  align-items: center;
  height: 50px;
  position: relative;
  padding: 10px;
}

.assessment-builder--question span:first-child {
  font-size: 15px;
  font-weight: 600;
  display: inline-block;
  font-family: "OpenCL", "Open Sans", sans-serif;
  margin-right: 10px;
}

.assessment-builder--question span:nth-child(2) {
  font-size: 12px;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.assessment-builder--question button {
  position: absolute;
  right: 0px;
  top: 0px;
  bottom: 0px;
  background: #ddd;
  box-shadow: 0 1px #ccc;
  border: none;
  border-left: 1px #333;
  width: 90px;
  display: block;
  font-size: 14px;
}

.assessment-builder--modal .modal--content {
  width: 65%;
}

.assessment-builder--modal .modal--body {
  position: relative;
}

.assessment-builder--modal .modal--body > button {
  position: absolute;
  right: 60px;
  bottom: 20px;
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 6px 12px;
  font-weight: 400;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 12.6px;
}

.assessment-builder--modal .modal--body > button svg {
  margin-right: 5px;
}

.assessment-builder--modal .assessment-form .section {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-top: 20px;
  padding-bottom: 40px;
  border: 0;
  border-bottom: 1px solid #eee;
}

.assessment-builder--modal .assessment-form .section:last-child {
  border: 0;
}

.assessment-builder--modal .assessment-form .section h4 {
  line-height: 1.1;
  font-weight: 500;
  font-size: 20px;
  color: rgb(51, 51, 51);
  margin-bottom: 30px;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

.assessment-builder--modal .assessment-form .section--row {
  font-size: 12.6px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: "OpenCL", "Open Sans", sans-serif;
  margin-bottom: 15px;
  flex-basis: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.assessment-builder--modal .assessment-form .section--row > label:first-child,
.assessment-builder--modal .assessment-form .section--row > span:first-child {
  flex-basis: 20%;
  display: block;
  text-align: right;
  text-transform: uppercase;
}

.assessment-builder--modal .assessment-form .section--row > div:nth-child(2) {
  flex-basis: 75%;
}

.assessment-builder--modal .assessment-form .section--row > div:nth-child(2).medium-wrapper {
  display: flex;
}

.assessment-builder--modal .assessment-form .section--row > div:nth-child(2).medium-wrapper label {
  flex-basis: 15%;
  display: flex;
  align-items: center;
}

.assessment-builder--modal .assessment-form .section--row > div:nth-child(2).medium-wrapper label input {
  margin-right: 5px;
}

.assessment-builder--modal .assessment-form .section--row.question-medium {
  align-items: center;
}

.assessment-builder--modal .assessment-form .section--row.question-text .wrapper {
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  padding: 5px 15px;
  border-radius: 5px;
}

.assessment-builder--modal .assessment-form .section--row.question-text .wrapper p {
  text-transform: none;
  font-size: 14px;
  margin-bottom: 45px;
}

.assessment-builder--modal .assessment-form .section--row.question-type {
  align-items: center;
}

.assessment-builder--modal .assessment-form .section--row.question-type select {
  width: 75%;
}

.assessment-builder--modal .assessment-form .section--row.question-type .v-select {
  height: 35px;
}

.assessment-builder--modal .assessment-form .section--row.question-type .v-select .vs__dropdown-toggle {
  height: 35px;
}

.assessment-builder--modal .assessment-form .section--row.question-type .v-select .vs__dropdown-toggle .vs__selected {
  border: none;
  line-height: 33px;
  margin: 0;
  padding: 0 0.5em;
}

.assessment-builder--modal .assessment-form .section--row.question-type .v-select .vs__dropdown-menu li {
  margin: 0;
}

.assessment-builder--modal .assessment-form .section--row.question-type .v-select .vs__dropdown-option--highlight {
  background: #d0112b;
}

.assessment-builder--modal .assessment-form .section--row.question-type .v-select .vs__selected-options .vs__search {
  background: transparent !important;
  border: none !important;
  display: inherit !important;
  min-height: auto !important;
  height: 35px !important;
  margin: 0 !important;
}

.assessment-builder--modal .assessment-form .section--row.question-type .vs__selected-options,
.assessment-builder--modal .assessment-form .section--row.question-type ul[role=listbox],
.assessment-builder--modal .assessment-form .section--row.question-type ul[role=listbox] li {
  text-transform: none;
  font-size: 14px;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row {
  flex-flow: row wrap;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div {
  flex-basis: 100%;
  margin-bottom: 20px;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child {
  display: flex;
  justify-content: flex-end;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child > label {
  flex-basis: 85px;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child > span {
  flex-basis: 75%;
  text-transform: capitalize;
  font-size: 14px;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child .v-select {
  height: 35px;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child .v-select .vs__dropdown-toggle {
  height: 35px;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child .v-select .vs__dropdown-toggle .vs__selected {
  border: none;
  line-height: 33px;
  margin: 0;
  padding: 0 0.5em;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child .v-select .vs__dropdown-menu li {
  margin: 0;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child .v-select .vs__dropdown-option--highlight {
  background: #d0112b;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child .v-select .vs__selected-options .vs__search {
  background: transparent !important;
  border: none !important;
  display: inherit !important;
  min-height: auto !important;
  height: 35px !important;
  margin: 0 !important;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child > div.v-select {
  flex-basis: 70%;
  text-transform: capitalize;
  font-size: 14px;
  margin-right: 5%;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:first-child > svg {
  position: absolute;
  cursor: pointer;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:nth-child(2) > label {
  flex-basis: 20%;
  text-align: right;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row > div:nth-child(2) > div {
  flex-basis: 75%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  background-color: #fff;
  padding: 5px 15px;
  border-radius: 5px;
}

.assessment-builder--modal .assessment-form .section--mapping .section--row .editable p {
  margin-bottom: 45px;
}

.assessment-builder--modal .assessment-form .section--mapping > button.button,
.assessment-builder--modal .assessment-form .section--mapping > button.asset-browser__upload-button,
.assessment-builder--modal .assessment-form .section--mapping > button.form-file__button,
.assessment-builder--modal .assessment-form .section--mapping > button.teacher-pre-assessment--add-question-button {
  width: 20%;
  background: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  font-size: 1.2em;
  color: #333;
}

.assessment-builder--modal .assessment-form .section--mapping .wrapper p,
.assessment-builder--modal .assessment-form .section--mapping .wrapper li {
  text-transform: none;
  font-size: 14px;
}

.assessment-builder--modal .assessment-form .section--answers {
  flex-direction: row;
  position: relative;
  padding-bottom: 100px;
}

.assessment-builder--modal .assessment-form .section--answers > h4 {
  font-size: 12.6px;
  font-weight: 400;
  text-transform: uppercase;
  flex-basis: 20%;
  text-align: right;
  margin-top: 7px;
}

.assessment-builder--modal .assessment-form .section--answers > div {
  flex-basis: 75%;
}

.assessment-builder--modal .assessment-form .section--answers > div .answers__text {
  align-items: flex-start;
  margin-top: 10px;
}

.assessment-builder--modal .assessment-form .section--answers > div .answers__text:first-child {
  margin-top: 0px;
}

.assessment-builder--modal .assessment-form .section--answers > div .answers__text .wrapper {
  flex-basis: 70%;
}

.assessment-builder--modal .assessment-form .section--answers > div .answers__text label {
  flex-basis: 20%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-right: 40px;
}

.assessment-builder--modal .assessment-form .section--answers > div .answers__text label input {
  margin-right: 0px;
}

.assessment-builder--modal .assessment-form .section--answers > div .answers__text svg {
  cursor: pointer;
  flex-basis: 10%;
  align-self: center;
}

.assessment-builder--modal .assessment-form .section--answers > div > button.button,
.assessment-builder--modal .assessment-form .section--answers > div > button.asset-browser__upload-button,
.assessment-builder--modal .assessment-form .section--answers > div > button.form-file__button,
.assessment-builder--modal .assessment-form .section--answers > div > button.teacher-pre-assessment--add-question-button {
  position: absolute;
  bottom: 40px;
  left: 0px;
  width: 20%;
  background: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  font-size: 1.2em;
  color: #333;
}

.assessment-builder--modal .assessment-form .section--answers .editable.editable--editing {
  margin-bottom: 60px;
}

.assessment-builder--modal .assessment-form .section--answers .editable.editable--editing button.button,
.assessment-builder--modal .assessment-form .section--answers .editable.editable--editing button.asset-browser__upload-button,
.assessment-builder--modal .assessment-form .section--answers .editable.editable--editing button.form-file__button,
.assessment-builder--modal .assessment-form .section--answers .editable.editable--editing button.teacher-pre-assessment--add-question-button {
  position: initial;
  width: initial;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching {
  flex-direction: column;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > h4 {
  font-size: 20px;
  text-align: left;
  text-transform: capitalize;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 20px;
  flex-flow: row wrap;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div > label {
  flex-basis: 20%;
  text-align: right;
  padding-right: 40px;
  font-size: 12.6px;
  font-weight: 400;
  text-transform: uppercase;
  color: #333;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div > label + * {
  flex-basis: 75%;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div .draggable-item {
  display: flex;
  flex-basis: 75%;
  flex-direction: column;
  justify-content: space-evenly;
  margin-bottom: 20px;
  border-bottom: 1px solid #efefef;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div .draggable-item label {
  display: block;
  margin-bottom: 10px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div .draggable-item .draggable-item__image {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div .draggable-item .form-image {
  flex-basis: 30%;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div .draggable-item .form-image + div {
  flex-basis: 30%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div .draggable-item .form-image__preview {
  min-height: 100px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching > div .draggable-item svg {
  flex-basis: 15%;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching input {
  border: 1px solid #ccc !important;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching button.button,
.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching button.asset-browser__upload-button,
.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching button.form-file__button,
.assessment-builder--modal .assessment-form .section--answers.drag-drop-matching button.teacher-pre-assessment--add-question-button {
  position: absolute;
  bottom: 40px;
  left: 0px;
  width: 20%;
  background: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  font-size: 1.2em;
  color: #333;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering {
  flex-direction: column;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering > h4 {
  font-size: 20px;
  text-align: left;
  text-transform: capitalize;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering > h4 + span {
  display: block;
  font-size: 11px;
  color: #333;
  margin-bottom: 30px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering hr {
  margin-top: 20px;
  margin-bottom: 20px;
  border: 0;
  border-top: 1px solid #eee;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering > button {
  width: 20%;
  margin-top: 20px;
  background: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  font-size: 1.2em;
  color: #333;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .order-titles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .order-titles label {
  display: block;
  padding-bottom: 10px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .answers__image {
  margin-bottom: 10px;
  background-color: #efefef;
  box-shadow: 0 1px solid rgba(0, 0, 0, 0.2);
  border: 1px solid #efefef;
  cursor: move;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .answers__image .alt-text-field {
  padding: 0 15px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .answers__image .alt-text-field label {
  display: block;
  margin-bottom: 10px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .answers__image .modal {
  cursor: initial;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .answers__image .form-image {
  flex-grow: initial;
  flex-basis: 200px;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .answers__image .form-image + svg {
  cursor: pointer;
}

.assessment-builder--modal .assessment-form .section--answers.drag-drop-ordering .answers__image .form-image__preview {
  min-height: 150px !important;
}

.assessment-builder--modal .assessment-form .section--answers.multiple-choice-text {
  position: relative;
}

.assessment-builder--modal .assessment-form .section--answers.multiple-choice-text > button {
  position: absolute;
  width: 20%;
  left: 0px;
  bottom: 40px;
  background: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  font-size: 1.2em;
  color: #333;
}

.assessment-builder--modal .assessment-form .section--answers.multiple-choice-image {
  position: relative;
}

.assessment-builder--modal .assessment-form .section--answers.multiple-choice-image > button {
  position: absolute;
  width: 20%;
  left: 0px;
  bottom: 40px;
  background: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  font-size: 1.2em;
  color: #333;
}

.assessment-builder--modal .assessment-form .section--answers.true-false {
  padding-top: 7px;
}

.assessment-builder--modal .assessment-form .section--answers.true-false > div {
  padding-left: 40px;
  padding-top: 5px;
  display: flex;
  align-items: flex-start;
}

.assessment-builder--modal .assessment-form .section--answers.true-false > div > label {
  display: flex;
  margin-right: 20px;
  align-items: center;
}

.assessment-builder--modal .assessment-form .section--answers.true-false > div > label > input[type=radio] {
  margin-right: 5px;
  min-height: initial !important;
}

.assessment-builder button#create-question {
  width: 600px;
  font-size: 1.4em;
  height: 50px;
  margin-top: 10px;
}

.admin-homework--caption {
  margin-top: 2vh;
  font-style: italic;
  text-align: center;
}

.admin-homework--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 55px;
  position: relative;
  padding-top: 30px;
  display: inline-block;
}

.admin-homework--heading svg.underline {
  position: relative;
  top: -20px;
  margin-right: -120px;
}

.admin-homework__language_selector {
  position: absolute;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9rem;
  padding: 0.5em 1em;
  line-height: 1.15;
  top: 22px;
  right: -602px;
}

.admin-homework .icon-card--header {
  font-size: 27px !important;
  margin-bottom: 23px !important;
  font-weight: 400 !important;
}

.admin-homework .icon-card--icon {
  height: 110px;
  width: 130px;
}

.admin-homework .icon-card:nth-child(2) {
  margin-bottom: 80px;
}

.admin-homework .icon-card .editable--preview ul {
  padding-left: 40px;
}

.admin-homework .icon-card .editable--preview ul li {
  margin-bottom: 20px;
}

.admin-homework .icon-card .editable--preview ul li:before {
  display: block;
  content: "";
  width: 5px;
  background: #d0112b;
  height: 16px;
  float: left;
  margin-left: -10px;
  margin-top: 4px;
}

.admin-homework .icon-card .video-js .vjs-big-play-button {
  width: 2.4em;
  height: 2.4em;
  left: 50%;
  top: calc(50% - 0.3em);
  border-radius: 50%;
  border: 4px solid #ffffff;
}

.admin-homework .icon-card .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  top: 15%;
}

.admin-homework .icon-card--body button.button,
.admin-homework .icon-card--body button.asset-browser__upload-button,
.admin-homework .icon-card--body button.form-file__button,
.admin-homework .icon-card--body button.teacher-pre-assessment--add-question-button {
  text-align: center;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 12px;
  font-weight: 400;
  border-radius: 4px;
  margin: 15px 0px;
  display: block;
  background-color: #d0112b;
  color: #fff;
  line-height: 1.2;
}

.admin-homework .icon-card--body button.button:hover,
.admin-homework .icon-card--body button.asset-browser__upload-button:hover,
.admin-homework .icon-card--body button.form-file__button:hover,
.admin-homework .icon-card--body button.teacher-pre-assessment--add-question-button:hover {
  color: #000;
  background-color: rgb(184.4266666667, 15.0733333333, 38.1266666667);
}

.admin-homework .icon-card--body img {
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
}

.admin-homework--handout-preview {
  display: block;
  width: 100%;
  margin-bottom: 2vh;
}

#adminLayout .admin-lesson-intro {
  padding-top: 100px;
}

#adminLayout .admin-lesson-intro--caption {
  margin-top: 2vh;
  font-style: italic;
  text-align: center;
}

#adminLayout .admin-lesson-intro--description {
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 30px;
}

#adminLayout .admin-lesson-intro--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 55px;
  position: relative;
  padding-top: 30px;
  display: inline-block;
}

#adminLayout .admin-lesson-intro--heading svg {
  position: relative;
  top: -20px;
  margin-right: -70px;
}

#adminLayout .admin-lesson-intro .icon-card--header {
  font-size: 27px !important;
  margin-bottom: 23px !important;
  font-weight: 400 !important;
}

#adminLayout .admin-lesson-intro .icon-card--icon {
  height: 110px;
  width: 130px;
}

#adminLayout .admin-lesson-intro .icon-card:nth-child(2) {
  margin-bottom: 80px;
}

#adminLayout .admin-lesson-intro .icon-card .editable--preview ul {
  padding-left: 40px;
}

#adminLayout .admin-lesson-intro .icon-card .editable--preview ul li {
  margin-bottom: 20px;
}

#adminLayout .admin-lesson-intro .icon-card .editable--preview ul li:before {
  display: block;
  content: "";
  width: 5px;
  background: #d0112b;
  height: 16px;
  float: left;
  margin-left: -10px;
  margin-top: 4px;
}

#adminLayout .admin-lesson-builder {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

#adminLayout .admin-lesson-builder--heading {
  padding-top: 20px;
  position: relative;
}

#adminLayout .admin-lesson-builder--heading h2,
#adminLayout .admin-lesson-builder--heading .admin-assessment-intro--heading,
#adminLayout .admin-lesson-builder--heading .editable--help--h2-heading,
#adminLayout .admin-lesson-builder--heading .teacher-pre-assessment--heading,
#adminLayout .admin-lesson-builder--heading .assessment-builder--heading,
#adminLayout .admin-lesson-builder--heading .admin-homework--heading,
#adminLayout .admin-lesson-builder--heading .admin-lesson-intro--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 2rem;
  font-weight: 500;
}

#adminLayout .admin-lesson-builder--heading svg.underline {
  margin-right: 300px;
  position: relative;
  top: -5px;
}

#adminLayout .admin-lesson-builder--description {
  font-style: italic;
  font-size: 14px;
  margin-top: -15px;
  margin-bottom: 30px;
  width: 600px;
}

#adminLayout .admin-lesson-builder__preview-button {
  position: absolute;
  top: 15px;
  right: -15px;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9em;
  padding: 0.5em 1em;
}

#adminLayout .admin-lesson-builder__language_selector {
  position: absolute;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 0.9rem;
  padding: 0.5em 1em;
  line-height: 1.15;
  top: 15px;
  right: 8rem;
}

#adminLayout .admin-lesson-builder__slide {
  background: #efefef;
  border: 1px solid #bfbfbf;
  padding: 0;
  display: flex;
  justify-content: space-between;
  cursor: all-scroll;
  font-family: "OpenCL", "Open Sans", sans-serif !important;
  font-size: 1rem;
}

#adminLayout .admin-lesson-builder__slide-content {
  padding: 1rem;
}

#adminLayout .admin-lesson-builder__slide-type {
  text-transform: capitalize;
  font-weight: 700;
}

#adminLayout .admin-lesson-builder__slide-description {
  font-size: 12.6px;
}

#adminLayout .admin-lesson-builder__buttons {
  margin: -1rem;
  font-size: 0;
}

#adminLayout .admin-lesson-builder__slide-delete-button {
  background: #d0112b;
  color: #ffffff;
  padding: 1rem;
  font-size: 1rem;
}

#adminLayout .admin-lesson-builder__slide-edit-button {
  font-weight: 400;
  padding: 1rem 1.75rem;
  font-size: 14px;
  background: #ddd;
  box-shadow: 0 1px #ccc;
  border: none;
  border-left: 1px #333;
  margin-bottom: 2rem;
}

#adminLayout .admin-lesson-builder .draggable + button {
  padding: 15px 40px;
  margin-top: 10px;
}

#adminLayout .admin-lesson-builder--heading svg.underline {
  padding-bottom: 15px;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section {
  margin: 20px 0px;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section > span:first-child {
  font-size: 12.6px;
  font-weight: 400;
  text-transform: uppercase;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section > input,
#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section > select,
#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section > textarea {
  display: block;
  height: 34px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  outline: none;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section > input:focus,
#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section > select:focus,
#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section > textarea:focus {
  outline: none;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section input[type=checkbox] {
  border: 0px;
  box-shadow: none;
  min-height: initial;
  flex-shrink: initial;
  flex-grow: initial;
  flex-basis: 20px;
  height: 20px;
  margin-right: auto;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body__section:last-child > .form-image .form-image__preview svg {
  margin-right: 8px;
  margin-top: 8px;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body .vs__selected-options,
#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body ul[role=listbox],
#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body ul[role=listbox] li {
  text-transform: none;
  font-size: 14px;
}

#adminLayout .admin-lesson-builder .modal.slide-editor .modal--body span.vs__selected {
  text-transform: capitalize;
  font-size: 16px;
  color: #555;
}

#adminLayout .admin-assessment-intro {
  padding-top: 100px;
}

#adminLayout .admin-assessment-intro--heading {
  font-family: "Annie Use Your Telescope";
  font-size: 55px;
  position: relative;
  padding-top: 30px;
  display: inline-block;
}

#adminLayout .admin-assessment-intro--heading svg {
  position: relative;
  top: -7px;
  margin-right: 0px;
}

#adminLayout .admin-reports--chart-button {
  margin-left: 8px;
  margin-right: 0;
  min-width: 100px;
}

#adminLayout .admin-reports--chart-button-row {
  bottom: 0;
  display: table;
  height: auto;
  max-width: 880px;
  position: absolute;
  right: 0;
  text-align: right;
}

#adminLayout .admin-reports--chart-container {
  border: 1px solid rgba(0, 0, 0, 0.2);
  height: 490px;
  margin: 0 auto;
  padding-bottom: 45px;
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 40px;
  position: relative;
  width: 880px;
}

#adminLayout .admin-reports--chart-tooltip {
  background-clip: padding-box;
  background-color: white;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-break: auto;
  max-height: 400px;
  max-width: 280px;
  overflow: visible;
  padding: 0;
  pointer-events: none;
  position: absolute;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  transition: opacity 0s ease-in-out;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
}

#adminLayout .admin-reports--chart-tooltip:after {
  border-bottom: 10px solid transparent;
  border-right: 10px solid white;
  border-top: 10px solid transparent;
  bottom: -14px;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  position: absolute;
  transform: rotate(270deg);
  width: 0;
  z-index: 99999;
}

#adminLayout .admin-reports--chart-tooltip .content {
  max-height: 372px;
  overflow-y: auto;
  padding: 14px;
  pointer-events: all;
}

#adminLayout .admin-reports--chart-tooltip .content footer {
  font-size: 12px;
  margin-top: 10px;
}

#adminLayout .admin-reports--chart-tooltip .content footer strong {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

#adminLayout .admin-reports--chart-tooltip .content header {
  font-size: 15px;
  font-weight: 700;
}

#adminLayout .admin-reports--chart-tooltip .content section {
  font-size: 12px;
  margin-top: 10px;
}

#adminLayout .admin-reports--chart-tooltip .content section header {
  font-size: 14px;
  margin-top: 14px;
}

#adminLayout .admin-reports--chart-tooltip .content section header.label {
  font-size: 12px;
  margin-top: 10px;
}

#adminLayout .admin-reports--chart-tooltip .content section section {
  margin-top: 4px;
}

#adminLayout .admin-reports--chart-tooltip .content section section.markdown,
#adminLayout .admin-reports--chart-tooltip .content section section.markdown div,
#adminLayout .admin-reports--chart-tooltip .content section section.markdown div p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 14px;
}

#adminLayout .admin-reports--filters {
  display: table;
  margin: 0 auto;
  width: auto;
}

#adminLayout .admin-reports--filter-item {
  margin: 10px 1vw;
}

#adminLayout .admin-reports--filter-item .tooltip-container {
  background-color: #eee;
  border-bottom: 1px solid rgba(60, 60, 60, 0.26);
  border-left: none;
  border-radius: 4px;
  border-right: 1px solid rgba(60, 60, 60, 0.26);
  border-top: 1px solid rgba(60, 60, 60, 0.26);
  float: right;
  height: 100%;
  margin-left: -1px;
  padding: 7.5px 12px;
  position: relative;
  white-space: normal;
  width: 40px;
}

#adminLayout .admin-reports--filter-item .tooltip-container .tooltip-mask {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 99999;
}

#adminLayout .admin-reports--filter-header {
  line-height: 34px;
  font-weight: 600;
  padding: 10px;
  width: 60px;
}

#adminLayout .admin-reports--filter-row {
  margin-left: 60px;
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  margin-bottom: 0;
  margin-left: 60px;
  margin-right: 0;
  margin-top: 0;
}

#adminLayout .admin-reports--filter-row:nth-child(1) {
  margin-left: 0;
}

#adminLayout .admin-reports--overlay {
  background: transparent;
  height: 150%;
  left: 0;
  position: absolute;
  top: 0;
  text-align: center;
  transition: all 0.75s ease;
  width: 100%;
  z-index: -1;
}

#adminLayout .admin-reports--overlay .loading-ring {
  display: inline-block;
  height: 80px;
  position: fixed;
  top: 50%;
  visibility: hidden;
  width: 80px;
}

#adminLayout .admin-reports--overlay .loading-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

#adminLayout .admin-reports--overlay .loading-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

#adminLayout .admin-reports--overlay .loading-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

#adminLayout .admin-reports--overlay .loading-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

#adminLayout .admin-reports--overlay .loading-ring.visible {
  visibility: visible;
}

@keyframes loading-ring {
  0% {
    transform: rotate(0deg);
  }

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

#adminLayout .admin-reports--overlay.visible {
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}

#adminLayout .admin-reports.page-content {
  margin-top: 124px;
  padding-top: 26px;
  position: relative;
}

#adminLayout .admin-reports .page-content--header {
  height: auto;
  margin-bottom: 0;
  margin-left: 0;
  margin-right: 0;
  margin-top: 20px;
  overflow: hidden;
  padding-bottom: 20px;
  padding-left: 0;
  padding-right: 0;
  padding-top: 20px;
  transition: all 2s ease;
}

#adminLayout .admin-reports .page-content--title {
  font-family: "Annie Use Your Telescope", cursive;
  font-weight: 600;
  margin: 0;
  padding: 0;
  text-align: center;
}

#adminLayout .admin-reports #districtFilter {
  min-width: 25vw;
}

#adminLayout .admin-reports #levelFilter {
  min-width: 20vw;
}

#adminLayout .admin-reports #schoolFilter {
  min-width: 35vw;
}

#adminLayout .admin-reports #schoolYearFilter {
  min-width: 17vw;
}

#adminLayout .admin-reports #segmentFilter {
  min-width: 20vw;
}

#adminLayout .admin-reports #stateFilter {
  min-width: 15vw;
}

#adminLayout .admin-reports #teacherFilter {
  min-width: 30vw;
}

#adminLayout .admin-reports .v-select.admin-reports__select {
  height: 35px;
  min-width: 15vw;
  max-width: 35vw;
}

#adminLayout .admin-reports .v-select.admin-reports__select .vs__dropdown-toggle {
  height: 35px;
}

#adminLayout .admin-reports .v-select.admin-reports__select .vs__dropdown-toggle .vs__selected {
  border: none;
  line-height: 33px;
  margin: 0;
  padding: 0 0.5em;
}

#adminLayout .admin-reports .v-select.admin-reports__select .vs__dropdown-menu li {
  margin: 0;
}

#adminLayout .admin-reports .v-select.admin-reports__select .vs__dropdown-option--highlight {
  background: #d0112b;
}

#adminLayout .admin-reports .v-select.admin-reports__select .vs__selected-options .vs__search {
  background: transparent !important;
  border: none !important;
  display: inherit !important;
  min-height: auto !important;
  height: 35px !important;
  margin: 0 !important;
}

#adminLayout .admin-reports--filter-tooltip {
  border-radius: 8px;
  font-size: 15px;
  line-height: 20px;
  max-width: 300px;
}

#adminLayout .admin-reports--filter-tooltip .tooltip-inner {
  padding: 20px;
}

@media print {
  #adminLayout .navbar .navbar--body,
  #adminLayout .navbar .navbar--body .navbar--menu,
  #adminLayout .navbar .navbar--reports {
    display: none;
  }

  #adminLayout .admin-reports--chart-button-row,
  #adminLayout .admin-reports--filters {
    display: none;
  }

  #adminLayout .admin-reports--chart-container {
    height: 480px;
    margin: 0 auto;
    padding-bottom: 40px;
    padding-left: 40px;
    padding-right: 40px;
    padding-top: 40px;
    position: relative;
    width: 880px;
  }

  #adminLayout .admin-reports--overlay {
    display: none;
  }

  #adminLayout .admin-reports.page-content {
    margin-top: 0;
    padding-top: 50px;
  }

  #adminLayout .admin-reports.page-content .page-content--header {
    margin-bottom: 25px;
    margin-top: 40px;
    min-height: 0;
    overflow: visible;
    padding: 0;
  }

  #adminLayout .admin-reports.page-content .page-content--title {
    font-size: 28px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 10px;
  }

  #adminLayout .footer {
    display: none;
  }
}

.page-wrapper {
  width: 80%;
  margin: 40px auto !important;
}

.page-wrapper p {
  font-size: 1em;
  line-height: 25px;
  font-family: "Open Sans", sans-serif;
  color: #000000;
}

.page-wrapper h1,
.page-wrapper .editable--help--h1-heading,
.page-wrapper h2,
.page-wrapper .editable--help--h2-heading,
.page-wrapper .teacher-pre-assessment--heading,
.page-wrapper .assessment-builder--heading,
.page-wrapper .admin-homework--heading,
.page-wrapper #adminLayout .admin-lesson-intro--heading,
#adminLayout .page-wrapper .admin-lesson-intro--heading,
.page-wrapper #adminLayout .admin-assessment-intro--heading,
#adminLayout .page-wrapper .admin-assessment-intro--heading {
  font-family: "Open Sans", sans-serif;
}

.page-wrapper h2,
.page-wrapper .editable--help--h2-heading,
.page-wrapper .teacher-pre-assessment--heading,
.page-wrapper .assessment-builder--heading,
.page-wrapper .admin-homework--heading,
.page-wrapper #adminLayout .admin-lesson-intro--heading,
#adminLayout .page-wrapper .admin-lesson-intro--heading,
.page-wrapper #adminLayout .admin-assessment-intro--heading,
#adminLayout .page-wrapper .admin-assessment-intro--heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
}

.page-wrapper h1,
.page-wrapper .editable--help--h1-heading {
  font-size: 36px;
  font-weight: 500;
  line-height: 40px;
}

.page-wrapper h3 {
  font-size: 16px;
  line-height: 24px;
  margin: 16px 0px 10px;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
}

.page-wrapper a.continue {
  color: #ffffff;
  background-color: #d0112b;
  display: block;
  margin-top: 20px;
  text-align: center;
  margin-left: 16px;
  margin-right: auto;
  padding: 14px;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 700;
  width: 200px;
}

.page-wrapper .illustration {
  text-align: center;
}

.page-wrapper .illustration > img {
  margin: 0 auto;
  display: block;
  width: 100%;
  border-radius: 8px;
}

.page-wrapper .content .lesson-card .v-card {
  border-radius: 8px;
  display: flex;
  justify-content: center;
}

.page-wrapper .content .lesson-card .v-tabs-items {
  border-radius: 8px;
}

.page-wrapper .content .lesson-card .v-tabs--fixed-tabs > .v-tabs-bar .v-tab {
  width: initial;
}

.page-wrapper .content .lesson-card .v-tabs .v-slide-group__content.v-tabs-bar__content {
  flex-basis: 0;
  background-color: #d0112b;
  border-radius: 8px;
}

.page-wrapper .content .lesson-card .v-tabs .v-slide-group__content.v-tabs-bar__content .v-tabs-slider-wrapper > .v-tabs-slider {
  background-color: transparent;
  width: 100%;
}

.page-wrapper .content .lesson-card .v-tabs .v-slide-group__content.v-tabs-bar__content .v-tab {
  text-transform: initial;
  font-size: 15px;
  font-weight: 700;
  border-radius: 8px;
  max-width: initial;
  color: #d0112b;
  background-color: #ffffff;
  border: 2px solid #d0112b;
}

.page-wrapper .content .lesson-card .v-tabs .v-slide-group__content.v-tabs-bar__content .v-tab--active {
  background-color: #d0112b;
  color: #ffffff;
}

.page-wrapper .content .lesson-card .v-tabs .v-slide-group__content.v-tabs-bar__content .v-tab:focus {
  border: 2px solid black;
}

.page-wrapper .content .lesson-card .v-window h3 {
  font-weight: 400;
}

.page-wrapper .content .lesson-card .v-window h3 strong {
  font-weight: 600;
}

.page-wrapper .content .lesson-card .v-window .v-card__text {
  width: 70%;
}

.page-wrapper .content .lesson-card .v-window .v-card__text.static h3 {
  font-weight: 600;
}

.page-wrapper.assessment .assessment-overview--heading,
.page-wrapper.assessment .assessment--section > .heading-container {
  padding: 20px 20px 0 20px;
  display: inline-block;
}

.page-wrapper.assessment .assessment-overview--heading svg,
.page-wrapper.assessment .assessment--section > .heading-container svg {
  position: relative;
  top: -20px;
  margin-right: 0px;
}

.page-wrapper.assessment .assessment-overview--heading .no-assessments,
.page-wrapper.assessment .assessment--section > .heading-container .no-assessments {
  margin: 20px 0;
}

.page-wrapper.assessment .assessment-overview--heading .no-assessments a,
.page-wrapper.assessment .assessment--section > .heading-container .no-assessments a {
  margin-top: 20px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-wrapper.assessment .content .assessment--section {
    width: 100%;
    margin: 20px 0px;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    border-radius: 8px;
    background-color: #ffffff;
  }
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content .assessment--section h2,
  .page-wrapper.assessment .content .assessment--section .editable--help--h2-heading,
  .page-wrapper.assessment .content .assessment--section .teacher-pre-assessment--heading,
  .page-wrapper.assessment .content .assessment--section .assessment-builder--heading,
  .page-wrapper.assessment .content .assessment--section .admin-homework--heading,
  .page-wrapper.assessment .content .assessment--section #adminLayout .admin-lesson-intro--heading,
  #adminLayout .page-wrapper.assessment .content .assessment--section .admin-lesson-intro--heading,
  .page-wrapper.assessment .content .assessment--section #adminLayout .admin-assessment-intro--heading,
  #adminLayout .page-wrapper.assessment .content .assessment--section .admin-assessment-intro--heading {
    font-family: "Open Sans", sans-serif;
    line-height: 24px !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
    font-weight: 700;
    display: flex;
    align-items: center;
  }

  .page-wrapper.assessment .content .assessment--section h2 .section-icon,
  .page-wrapper.assessment .content .assessment--section .editable--help--h2-heading .section-icon,
  .page-wrapper.assessment .content .assessment--section .teacher-pre-assessment--heading .section-icon,
  .page-wrapper.assessment .content .assessment--section .assessment-builder--heading .section-icon,
  .page-wrapper.assessment .content .assessment--section .admin-homework--heading .section-icon,
  .page-wrapper.assessment .content .assessment--section #adminLayout .admin-lesson-intro--heading .section-icon,
  #adminLayout .page-wrapper.assessment .content .assessment--section .admin-lesson-intro--heading .section-icon,
  .page-wrapper.assessment .content .assessment--section #adminLayout .admin-assessment-intro--heading .section-icon,
  #adminLayout .page-wrapper.assessment .content .assessment--section .admin-assessment-intro--heading .section-icon {
    height: 40px;
    width: 40px;
    min-height: 0;
    margin: 0 10px 0 0;
  }
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content .assessment--section .underline {
    display: none;
  }
}

.page-wrapper.assessment .content .assessment-overview--heading {
  display: inline-block;
}

.page-wrapper.assessment .content .assessment-overview--heading h2,
.page-wrapper.assessment .content .assessment-overview--heading .editable--help--h2-heading,
.page-wrapper.assessment .content .assessment-overview--heading .teacher-pre-assessment--heading,
.page-wrapper.assessment .content .assessment-overview--heading .assessment-builder--heading,
.page-wrapper.assessment .content .assessment-overview--heading .admin-homework--heading,
.page-wrapper.assessment .content .assessment-overview--heading #adminLayout .admin-lesson-intro--heading,
#adminLayout .page-wrapper.assessment .content .assessment-overview--heading .admin-lesson-intro--heading,
.page-wrapper.assessment .content .assessment-overview--heading #adminLayout .admin-assessment-intro--heading,
#adminLayout .page-wrapper.assessment .content .assessment-overview--heading .admin-assessment-intro--heading {
  font-size: 26px;
  font-weight: 700;
  line-height: 36px;
}

.page-wrapper.assessment .content .assessment-overview--heading svg {
  position: relative;
  top: -20px;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content .assessment-overview--heading svg {
    display: none;
  }
}

.page-wrapper.assessment .content .section-block {
  display: flex;
  margin: 20px 0;
}

.page-wrapper.assessment .content .lesson-card--content .text-wrapper p {
  padding-top: 20px;
}

.page-wrapper.assessment .content .lesson-card--content .text-wrapper p a {
  text-decoration: underline;
}

.page-wrapper.assessment .content .lesson-card--content .text-wrapper p:first-child {
  padding-top: 0;
}

.page-wrapper.assessment .content .post-assessment-instruction p {
  font-size: 18px;
  line-height: 28px;
  margin-right: 60px;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content .post-assessment-instruction p {
    font-size: 14px;
    line-height: 1.5;
    margin-right: 0;
    margin-bottom: 0;
  }
}

.page-wrapper.assessment .content .button--post-assessment-lesson {
  width: 171px;
  height: 48px;
  font-size: 16px;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content .section--printed-assessment {
    display: block;
    margin-left: -20px;
    width: calc(100% + 40px);
    background-color: #f9f9f9;
    margin-bottom: -20px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0 0 7px 7px;
  }

  .page-wrapper.assessment .content .section--printed-assessment .custom-checkbox label {
    height: 25px;
  }

  .page-wrapper.assessment .content .section--printed-assessment .custom-checkbox label:before {
    width: 25px;
    height: 25px;
  }

  .page-wrapper.assessment .content .section--printed-assessment .custom-checkbox label:after {
    background-size: 18px 18px;
    width: 18px;
    height: 18px;
    left: 4px;
    top: 5px;
  }

  .page-wrapper.assessment .content .section--printed-assessment .form-inline {
    display: flex;
    font-size: 12px;
  }

  .page-wrapper.assessment .content .section--printed-assessment .input-group {
    position: relative;
  }

  .page-wrapper.assessment .content .section--printed-assessment .input-group:after {
    position: absolute;
    content: "%";
    pointer-events: none;
    right: 5px;
    top: 8px;
  }
}

.page-wrapper.assessment .content .printed-assessment--mobile-pdf {
  display: flex;
  align-items: center;
  margin: 20px 0 10px 0;
}

.page-wrapper.assessment .content .printed-assessment--mobile-pdf .section-icon {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin: 0 10px 0 0;
}

.page-wrapper.assessment .content .printed-assessment--mobile-pdf a {
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
}

.page-wrapper.assessment .content .printed-assessment-form {
  display: flex;
  align-items: center;
}

.page-wrapper.assessment .content .printed-assessment-form input[type=number] {
  width: 70px;
  height: 45px;
  border: 1px solid #333333;
  border-radius: 8px 0 0 8px;
  border-right: none;
}

.page-wrapper.assessment .content .printed-assessment-form .input-group-addon {
  height: 45px;
  border: 1px solid #333333;
  border-radius: 0 8px 8px 0;
}

.page-wrapper.assessment .content .class-assessment-container {
  margin-top: 50px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-wrapper.assessment .content .class-assessment-container {
    width: 100%;
    margin: 20px 0px;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
  }
}

.page-wrapper.assessment .content .class-assessment-question {
  margin: 60px auto;
  text-align: center;
}

.page-wrapper.assessment .content .class-assessment-question h4 {
  font-size: 18px;
  font-weight: 700;
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  margin: 0 auto 1em;
  line-height: 1.5em;
  text-align: left;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-wrapper.assessment .content .class-assessment-question .slider .vue-slider-marks {
    width: calc(100% - 40px);
  }

  .page-wrapper.assessment .content .class-assessment-question .slider .vue-slider-mark-step {
    width: 40px;
    height: 45px;
  }
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content .class-assessment-question {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .page-wrapper.assessment .content .class-assessment-question h4 {
    font-size: 14px;
  }

  .page-wrapper.assessment .content .class-assessment-question .slider .vue-slider-rail,
  .page-wrapper.assessment .content .class-assessment-question .slider .vue-slider-process {
    background: transparent;
    box-shadow: none;
  }

  .page-wrapper.assessment .content .class-assessment-question .slider .slider-labels {
    display: none;
  }

  .page-wrapper.assessment .content .class-assessment-question .slider .vue-slider-mark-step {
    width: 24px;
    height: 33px;
    background-color: transparent;
    background-image: url("/assets/star-empty.svg");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: none;
    left: -5px;
  }

  .page-wrapper.assessment .content .class-assessment-question .slider .vue-slider-mark-step.vue-slider-mark-step-active {
    background-image: url("/assets/star-filled.svg");
  }

  .page-wrapper.assessment .content .class-assessment-question .slider .vue-slider-dot-handle {
    opacity: 0;
  }
}

.page-wrapper.assessment .content #submit-container {
  font-weight: 700;
}

.page-wrapper.assessment .content #submit-container p {
  margin: 15px auto;
  color: #18a91b;
  text-align: center;
}

.page-wrapper.assessment .content #submit-container .teacher-button {
  width: 120px;
  display: block;
  margin: 15px auto;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content #submit-container .teacher-button {
    margin: 40px 0 0 0;
  }
}

.page-wrapper.assessment .content .assessment-results-container {
  border-top: 1px solid #dddddd;
  margin-top: 20px;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-in-progress {
  padding: 0px 20px 20px 20px;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-header {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-header {
    display: block;
  }
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-header .assessment-name {
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 130px;
  font-size: 18px;
  line-height: 50px;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .button,
.page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .asset-browser__upload-button,
.page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .form-file__button,
.page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .teacher-pre-assessment--add-question-button {
  width: 150px;
  margin-left: 15px;
  padding: 6px 12px;
  border-radius: 8px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .button,
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .asset-browser__upload-button,
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .form-file__button,
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-header .button-container .teacher-pre-assessment--add-question-button {
    margin: 10px 10px 10px 0px;
  }
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results {
  position: relative;
  min-height: 100px;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table {
  border-spacing: 0;
  border-collapse: collapse;
  background-color: transparent;
  color: #333333;
  width: calc(100% - 40px);
  margin: 0 20px;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table thead th {
  color: #ffffff;
  background-color: #333333;
  font-size: 18px;
  font-weight: 400;
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
  padding: 20px 8px;
  line-height: 1.5;
  text-align: center;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table thead th:nth-child(1) {
  text-align: left;
  width: 150px;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table thead th:nth-child(3) {
  text-align: right;
  width: 120px;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table tbody > tr:nth-child(odd) {
  background-color: #f9f9f9;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table tbody td {
  padding: 8px;
  line-height: 1.5;
  vertical-align: top;
  border-top: 1px solid #dddddd;
  font-size: 14px;
  text-align: center;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table tbody td:nth-child(1) {
  text-align: left;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table .progress-container {
  display: flex;
  width: 100%;
  height: 20px;
  position: relative;
  justify-content: space-around;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table .progress-container::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 44%;
  border-bottom: dotted 2px rgba(0, 0, 0, 0.5);
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table .progress-container .answer-status {
  width: 16px;
  height: 16px;
  border-radius: 16px;
  position: relative;
  z-index: 10;
  float: none;
  display: inline-block;
  margin: 0;
  border: 1px solid #333333;
  background-color: #ffffff;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table .progress-container .answer-status.correct {
  background-color: #00aa00;
  border-color: #007700;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table .progress-container .answer-status.incorrect {
  background-color: #d0112b;
  border-color: #b2102b;
}

.page-wrapper.assessment .content .assessment-results-container .assessment-results-table .progress-container .answer-status.incomplete {
  background-color: #ffffff;
  border-color: #333333;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table {
    width: 100%;
    margin: 0;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > th {
    font-size: 14px;
  }

  .page-wrapper.assessment .content .assessment-results-container .answer-status {
    width: 10px;
    height: 10px;
  }
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-header {
    height: auto;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-header .assessment-name {
    font-size: 13px;
    line-height: 14px;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results {
    min-height: 0;
    margin-bottom: 40px;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results .button,
  .page-wrapper.assessment .content .assessment-results-container .assessment-results .asset-browser__upload-button,
  .page-wrapper.assessment .content .assessment-results-container .assessment-results .form-file__button,
  .page-wrapper.assessment .content .assessment-results-container .assessment-results .teacher-pre-assessment--add-question-button {
    border-radius: 20px;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > th {
    background: transparent;
    color: #666666;
    font-size: 12px;
    border-bottom: none;
    padding-bottom: 0;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > th:first-child,
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > td:first-child {
    padding-left: 20px;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > th:nth-child(2),
  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > td:nth-child(2) {
    display: none;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > th:last-child {
    text-align: center;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr {
    background-color: transparent !important;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr:first-child > td {
    border-top: none;
  }

  .page-wrapper.assessment .content .assessment-results-container .assessment-results-table tr > td {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 14px;
    font-weight: bold;
  }
}

.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 99999;
}

.loading-overlay--white {
  background: #ffffff;
}

.loading-overlay .loading-icon {
  background-image: url("https://smartpath2-production.s3.us-east-1.amazonaws.com/static/loading.gif");
  width: 32px;
  height: 32px;
}

.loading-overlay .loading-message {
  width: 560px;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}

.loading-overlay .loading-message svg {
  color: #003366;
  animation: loading-spin 2s linear infinite;
  margin-right: 20px;
}

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

.page-wrapper.assessment-test {
  margin-top: 0 !important;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 124px;
  flex-direction: column;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment-test {
    background-color: #efefef;
    margin-bottom: 0 !important;
    padding-bottom: 10px;
  }
}

.page-wrapper.assessment-test .navbar {
  position: absolute;
  min-height: auto;
  margin-top: 12px;
}

.page-wrapper.assessment-test .test-name {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  width: 100%;
  font-size: 20px;
  padding: 0 20px;
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
  pointer-events: none;
}

.page-wrapper.assessment-test nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}

.page-wrapper.assessment-test nav > div {
  display: flex;
}

.page-wrapper.assessment-test nav .button,
.page-wrapper.assessment-test nav .asset-browser__upload-button,
.page-wrapper.assessment-test nav .form-file__button,
.page-wrapper.assessment-test nav .teacher-pre-assessment--add-question-button {
  margin: 10px 20px 10px auto;
  height: 40px;
  font-size: 14px;
}

.page-wrapper.assessment-test nav .progress-container {
  margin: 24px auto -8px auto;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.page-wrapper.assessment-test nav .progress-container:after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px dashed #333333;
  position: absolute;
  top: 7px;
  z-index: 1;
}

.page-wrapper.assessment-test nav .progress-container .progress-step {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  border: 2px solid #333333;
  background-color: #ffffff;
  z-index: 2;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 25px;
}

.page-wrapper.assessment-test nav .progress-container .progress-step:first-child {
  margin-left: 0;
}

.page-wrapper.assessment-test nav .progress-container .progress-step--active {
  border-color: #619acf;
}

.page-wrapper.assessment-test .button--start-assessment {
  background-color: white;
  border-radius: 20px;
  font-weight: bold;
  margin-top: 20px;
  margin-left: -15px;
  width: 35%;
}

.page-wrapper.assessment-test .fade-enter-active,
.page-wrapper.assessment-test .fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.page-wrapper.assessment-test .fade-enter,
.page-wrapper.assessment-test .fade-leave-to {
  opacity: 0;
}

.page-wrapper.assessment-test .controls-container {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: space-between;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: #fafafa;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
  z-index: 100;
}

.page-wrapper.assessment-test .controls-container .assessment-control-arrows {
  display: flex;
  width: 20%;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container {
  margin: 0 20px;
  width: 25%;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container--md {
  height: 65px;
  overflow-y: scroll;
  font-size: 14px;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container h3 {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  height: 24px;
  position: relative;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .question-core-mapping {
  font-size: 11px;
  overflow-x: hidden;
  overflow-y: auto;
  height: 66px;
  padding-right: 15px;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .question-core-mapping p {
  font-size: 11px;
  line-height: 14px;
  margin-bottom: 10px;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .curriculum-info {
  width: 16px;
  height: 16px;
  color: #3967fe;
  margin-left: 6px;
  position: absolute;
  top: 2px;
  cursor: pointer;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack__content {
  position: relative;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack__wrapper {
  background-color: #222222;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack--bottom {
  bottom: 30px;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack--active:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #222222;
  left: 20%;
  bottom: -7px;
  transform: rotate(-90deg);
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack p {
  color: #fff;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack svg {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack svg > path {
  fill: #fff;
}

.page-wrapper.assessment-test .controls-container .assessment-control {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.page-wrapper.assessment-test .controls-container .assessment-control .button,
.page-wrapper.assessment-test .controls-container .assessment-control .asset-browser__upload-button,
.page-wrapper.assessment-test .controls-container .assessment-control .form-file__button,
.page-wrapper.assessment-test .controls-container .assessment-control .teacher-pre-assessment--add-question-button {
  background-color: transparent;
  color: #666666;
  border: none;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  transition: 0.25s ease all;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.page-wrapper.assessment-test .controls-container .assessment-control .button svg,
.page-wrapper.assessment-test .controls-container .assessment-control .asset-browser__upload-button svg,
.page-wrapper.assessment-test .controls-container .assessment-control .form-file__button svg,
.page-wrapper.assessment-test .controls-container .assessment-control .teacher-pre-assessment--add-question-button svg {
  width: 32px;
  height: 52px;
  fill: #666666;
  transition: 0.25s ease all;
}

.page-wrapper.assessment-test .controls-container .assessment-control .button:hover,
.page-wrapper.assessment-test .controls-container .assessment-control .asset-browser__upload-button:hover,
.page-wrapper.assessment-test .controls-container .assessment-control .form-file__button:hover,
.page-wrapper.assessment-test .controls-container .assessment-control .teacher-pre-assessment--add-question-button:hover {
  color: #333333;
}

.page-wrapper.assessment-test .controls-container .assessment-control .button:hover svg,
.page-wrapper.assessment-test .controls-container .assessment-control .asset-browser__upload-button:hover svg,
.page-wrapper.assessment-test .controls-container .assessment-control .form-file__button:hover svg,
.page-wrapper.assessment-test .controls-container .assessment-control .teacher-pre-assessment--add-question-button:hover svg {
  fill: #333333;
}

.page-wrapper.assessment-test .controls-container .assessment-control .button:active,
.page-wrapper.assessment-test .controls-container .assessment-control .asset-browser__upload-button:active,
.page-wrapper.assessment-test .controls-container .assessment-control .form-file__button:active,
.page-wrapper.assessment-test .controls-container .assessment-control .teacher-pre-assessment--add-question-button:active {
  transition: none;
}

.page-wrapper.assessment-test .controls-container .assessment-control .button:disabled,
.page-wrapper.assessment-test .controls-container .assessment-control .asset-browser__upload-button:disabled,
.page-wrapper.assessment-test .controls-container .assessment-control .form-file__button:disabled,
.page-wrapper.assessment-test .controls-container .assessment-control .teacher-pre-assessment--add-question-button:disabled,
.page-wrapper.assessment-test .controls-container .assessment-control .button:disabled:hover,
.page-wrapper.assessment-test .controls-container .assessment-control .button:disabled:active {
  opacity: 0.2;
  cursor: default;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment-test .controls-container {
    display: block;
  }

  .page-wrapper.assessment-test .controls-container .core-mapping-container {
    width: 100%;
    margin: 10px 0;
    padding: 0;
  }

  .page-wrapper.assessment-test .controls-container .core-mapping-container h3 {
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    margin-bottom: 5px;
  }

  .page-wrapper.assessment-test .controls-container .core-mapping-container .question-core-mapping {
    height: initial;
    padding-right: 0;
    overflow: initial;
  }

  .page-wrapper.assessment-test .controls-container .assessment-control-arrows {
    margin: 0 auto;
    width: 50% !important;
  }

  .page-wrapper.assessment-test .controls-container .assessment-control svg {
    width: 20px !important;
    height: 20px !important;
    color: #3967fe;
  }

  .page-wrapper.assessment-test .controls-container .assessment-control:first-child {
    text-align: right;
  }

  .page-wrapper.assessment-test .controls-container .assessment-control:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }

  .page-wrapper.assessment-test .controls-container .assessment-control:last-child {
    text-align: left;
  }
}

.assessment-test-nav {
  display: block !important;
  z-index: 100 !important;
}

.assessment-test-nav .navbar--logo {
  width: 100%;
  height: 60px;
  margin: 0 !important;
  padding: 15px;
  background-color: #ffffff;
  background-position: center center;
  background-size: auto 30px;
}

.assessment-test-nav .navbar--assessment-control {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  background-color: #d0112b;
  height: 80px;
  display: flex;
  align-items: center;
  padding-left: 15px;
  padding-right: 15px;
  color: #ffffff;
  font-size: 14px;
}

.assessment-test-nav .navbar--assessment-control .navbar--back {
  text-align: center;
  color: #ffffff;
  margin-right: 10px;
  width: 70px;
}

.assessment-test-nav .navbar--assessment-control .navbar--back span {
  margin-left: 5px;
  font-size: 14px;
  font-weight: bold;
  text-decoration: underline;
}

.assessment-test-nav .navbar--assessment-control .navbar--back svg {
  width: 20px;
  height: 20px;
  margin-right: 6px;
}

.assessment-test-nav .navbar--assessment-control .button,
.assessment-test-nav .navbar--assessment-control .asset-browser__upload-button,
.assessment-test-nav .navbar--assessment-control .form-file__button,
.assessment-test-nav .navbar--assessment-control .teacher-pre-assessment--add-question-button {
  margin-left: auto;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
}

.assessment-test-nav .navbar--assessment-control .test-name-container {
  width: 100%;
}

.assessment-test-nav .navbar--assessment-control .test-name {
  font-size: 24px;
  font-weight: bold;
  position: static !important;
  text-align: left;
  padding: 0;
  width: 100% !important;
  color: #ffffff;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.assessment-test-nav .navbar--assessment-control .test-name .test-name-title {
  width: auto !important;
  font-size: 18px;
  font-weight: bold;
  height: auto !important;
  display: flex;
}

.assessment-test-nav .navbar--assessment-control .test-name .test-name-edit-button {
  display: flex;
  align-items: center;
  margin-left: 20px;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: underline;
}

.assessment-test-nav .navbar--assessment-control .test-name .test-name-edit-button svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}

.assessment-test-nav .navbar--assessment-control .test-name-form {
  display: flex;
  align-items: center;
  justify-content: center;
}

.assessment-test-nav .navbar--assessment-control .test-name-form input {
  width: calc(100% - 80px);
  font-size: 16px;
  margin-right: 10px;
}

.assessment-test-nav .navbar--assessment-control .test-name-form .test-name-actions {
  margin-top: 0;
}

.assessment-test-nav .navbar--assessment-control .test-name-form .test-name-actions svg {
  width: 20px !important;
  height: 20px !important;
}

.page-wrapper.assessment-control-panel {
  margin-top: 0 !important;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 124px;
  flex-direction: column;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment-control-panel {
    background-color: #efefef;
  }
}

.page-wrapper.assessment-control-panel nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 101;
}

.page-wrapper.assessment-control-panel nav .navbar--assessment-control {
  top: initial;
  height: 80px;
}

.page-wrapper.assessment-control-panel nav .navbar--assessment-control .test-name-title {
  line-height: 28px;
  font-size: 24px;
  padding: 5px;
}

.page-wrapper.assessment-control-panel nav .navbar--assessment-control .test-name-title span {
  display: initial;
  align-items: initial;
}

.page-wrapper.assessment-control-panel nav .navbar--assessment-control .test-name-title:focus,
.page-wrapper.assessment-control-panel nav .navbar--assessment-control .test-name-title:hover {
  color: crimson;
  background-color: white;
  border-radius: 4px;
}

.page-wrapper.assessment-control-panel nav .navbar--assessment-control .test-name-form.editing {
  color: black;
  background-color: white;
  border-radius: 4px;
  padding: 5px;
  width: 50%;
}

.page-wrapper.assessment-control-panel nav .navbar--assessment-control .test-name-form.editing input {
  border: none;
  line-height: 28px;
  font-size: 24px;
  font-family: "RubikCL", "Rubik", sans-serif;
}

.page-wrapper.assessment-control-panel nav .navbar--assessment-control + button {
  width: 180px;
  height: 40px;
}

.page-wrapper.assessment-control-panel .test-name .test-name-title {
  width: 500px;
  height: 30px;
  font-size: 24px;
  cursor: pointer;
  white-space: normal;
}

.page-wrapper.assessment-control-panel .test-name--complete {
  width: 100%;
  left: 0;
}

.page-wrapper.assessment-control-panel .test-name--complete .test-name-title {
  width: 100%;
  cursor: default;
  text-align: center;
}

.page-wrapper.assessment-control-panel .test-name .test-name-form input {
  font-size: 20px;
  padding: 3px;
  border: 1px solid #dddddd;
  transition: all 0.25s ease;
}

.page-wrapper.assessment-control-panel .test-name .test-name-form .test-name-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 5px;
  padding-right: 5px;
}

.page-wrapper.assessment-control-panel .test-name .test-name-form .test-name-actions .test-name-discard {
  display: block;
  margin-right: 12px;
}

.page-wrapper.assessment-control-panel .test-name .test-name-form .test-name-actions .test-name-discard svg {
  width: 26px;
  height: 26px;
  color: #d0112b;
}

.page-wrapper.assessment-control-panel .test-name .test-name-form .test-name-actions .test-name-save svg {
  display: block;
  width: 26px;
  height: 26px;
  color: #00aa00;
}

.page-wrapper.assessment-control-panel .assessment-test-status {
  margin: 0 0 320px 0;
  padding: 20px 0;
}

.page-wrapper.assessment-control-panel .assessment-test-status h2,
.page-wrapper.assessment-control-panel .assessment-test-status .editable--help--h2-heading,
.page-wrapper.assessment-control-panel .assessment-test-status .teacher-pre-assessment--heading,
.page-wrapper.assessment-control-panel .assessment-test-status .assessment-builder--heading,
.page-wrapper.assessment-control-panel .assessment-test-status .admin-homework--heading,
.page-wrapper.assessment-control-panel .assessment-test-status #adminLayout .admin-lesson-intro--heading,
#adminLayout .page-wrapper.assessment-control-panel .assessment-test-status .admin-lesson-intro--heading,
.page-wrapper.assessment-control-panel .assessment-test-status #adminLayout .admin-assessment-intro--heading,
#adminLayout .page-wrapper.assessment-control-panel .assessment-test-status .admin-assessment-intro--heading {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  padding: 0 0 20px 0;
}

.page-wrapper.assessment-control-panel .control-panel-link-container {
  margin: 0px 0 40px 0;
}

.page-wrapper.assessment-control-panel .control-panel-link-container p {
  font-size: 16px;
  padding-bottom: 20px;
}

.page-wrapper.assessment-control-panel .control-panel-link-container div {
  width: 50%;
  display: flex;
  margin-top: 10px;
}

.page-wrapper.assessment-control-panel .control-panel-link-container div a {
  color: #3967fe;
  text-decoration: underline;
  font-size: 16px;
  font-weight: 700;
  width: calc(100% - 110px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-wrapper.assessment-control-panel .control-panel-link-container div .control-panel-copy-link {
  width: 140px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

.page-wrapper.assessment-control-panel .control-panel-link-container div .control-panel-copy-link svg {
  margin-right: 10px;
}

.page-wrapper.assessment-control-panel .control-panel-link-container div .control-panel-copy-link.link-copied {
  color: #3967fe;
}

.page-wrapper.assessment-control-panel .assessment-test-students {
  margin: 0 0 85px 0;
  padding: 20px 40px;
}

.page-wrapper.assessment-control-panel .assessment-test-students .assessment-test-students__header {
  display: flex;
}

.page-wrapper.assessment-control-panel .assessment-test-students .assessment-test-students__header div {
  font-size: 16px;
  font-weight: 700;
  font-family: "OpenCL", "Open Sans", sans-serif;
}

.page-wrapper.assessment-control-panel .assessment-test-students .assessment-test-students__header div:nth-child(1) {
  flex: 3;
  text-align: left;
  padding-left: 40px;
}

.page-wrapper.assessment-control-panel .assessment-test-students .assessment-test-students__header div:nth-child(2) {
  flex: 7;
  text-align: center;
}

.page-wrapper.assessment-control-panel .assessment-test-students .assessment-test-students__header div:nth-child(3) {
  flex: 2;
  text-align: center;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list {
  margin-top: 40px;
  box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
  border-radius: 8px;
  padding: 0px 20px 40px 20px;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student {
  display: flex;
  height: 30px;
  padding: 40px 20px;
  border-bottom: 2px solid rgba(51, 51, 51, 0.33);
  align-items: center;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student > div:nth-child(1) {
  flex: 3;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student > div:nth-child(2) {
  flex: 7;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student > div:nth-child(3) {
  flex: 2;
  display: flex;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__status {
  display: flex;
  margin: 0 auto;
  width: 21px;
  height: 21px;
  align-items: center;
  justify-content: center;
  background-color: #333333;
  border-radius: 50%;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__status.assessment-test__status--complete {
  background-color: #00aa00;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__status svg {
  display: block;
  width: 12px;
  height: 12px;
  color: #ffffff;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress:after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px dashed #333333;
  position: absolute;
  top: 8px;
  z-index: 1;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress .progress-step {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 16px;
  border: 1px solid #333333;
  background-color: #ffffff;
  z-index: 2;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress .progress-step--correct {
  content: "";
  background-image: url("/assets/checkmark.svg");
  background-size: 8px 8px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #00aa00;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress .progress-step--incorrect {
  background-color: #d0112b;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress .progress-step--incomplete {
  background-color: rgba(51, 51, 51, 0.33);
  border-width: 3px;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress .progress-step--current {
  border-color: #3967fe;
  background-color: white;
  border-width: 3px;
}

.page-wrapper.assessment-control-panel .assessment-test-students__student-list .assessment-test-students__student .assessment-test__progress .progress-step:focus {
  outline: 2px solid;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment-control-panel .assessment-test-students {
    padding: 0;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__header > div {
    font-size: 13px !important;
    font-weight: normal !important;
    color: #666666;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__header > div:first-child {
    text-align: left;
    width: 100%;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__header > div:nth-child(2) {
    display: none;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__header > div:last-child {
    text-align: center;
    width: 70px;
    flex: 1 !important;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__student-list {
    width: calc(100% + 28px);
    margin: 10px -14px;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    padding: 0;
    border-radius: 8px;
    background-color: #ffffff;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__student {
    height: 50px !important;
    margin: 0 !important;
    padding: 0 14px;
    border-bottom: 1px solid #dddddd;
    font-size: 14px;
    font-weight: bold;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__student:last-child {
    border-bottom: none;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__student > div:first-child {
    text-align: left;
    width: 100%;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__student > div:nth-child(2) {
    display: none;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__student > div:last-child {
    text-align: center;
    width: 70px;
    flex: 1 1 !important;
  }

  .page-wrapper.assessment-control-panel .assessment-test-students__student .assessment-test__status {
    width: 14px !important;
    height: 14px !important;
  }
}

.page-wrapper.assessment-control-panel .control-panel-results-students {
  width: 80%;
  margin: 0 auto;
}

@media screen and (max-width: 640px) {
  .page-wrapper.assessment-control-panel .control-panel-results-students {
    width: 100%;
  }
}

.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students {
  margin-bottom: 70px;
}

.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students .assessment-test-students__header > div:nth-child(1),
.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students .assessment-test-students__student > div:nth-child(1) {
  flex: 2;
  -moz-text-align-last: left;
       text-align-last: left;
}

.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students .assessment-test-students__header > div:nth-child(2),
.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students .assessment-test-students__student > div:nth-child(2) {
  flex: 8;
}

.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students .assessment-test-students__header > div:nth-child(3),
.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students .assessment-test-students__student > div:nth-child(3) {
  flex: 2;
  display: block;
  text-align: right;
}

.page-wrapper.assessment-control-panel .control-panel-results-students .assessment-test-students .assessment-test-students__header div {
  font-size: 18px;
}

.page-wrapper.assessment-control-panel .control-panel-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: #fafafa;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend {
  height: 80px;
  width: 100%;
  padding: 10px 20px;
  display: flex;
  align-items: center;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend label {
  font-size: 18px;
  font-weight: 400;
  display: block;
  margin-right: 20px;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend ul {
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend ul li {
  display: inline-flex;
  align-items: center;
  margin: 0 20px 0 0;
  padding: 0;
  min-width: 100px;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend ul li:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 30px;
  border: 1px solid #000000;
  margin-right: 10px;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend ul li.control-panel-legend-item--correct:before {
  content: "";
  background-image: url("/assets/checkmark.svg");
  background-size: 8px 8px;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #00aa00;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend ul li.control-panel-legend-item--incorrect:before {
  background-color: #d0112b;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend ul li.control-panel-legend-item--current:before {
  border-color: #3967fe;
  border-width: 3px;
}

.page-wrapper.assessment-control-panel .control-panel-container .control-panel-legend ul li.control-panel-legend-item--incomplete:before {
  background-color: rgba(51, 51, 51, 0.33);
  border-width: 3px;
}

.page-wrapper.assessment-control-panel .control-panel-container.control-panel-container--complete {
  background-color: #ffffff;
  width: 100%;
  text-align: center;
  padding: 10px;
}

.page-wrapper.assessment-control-panel .control-panel-container.control-panel-container--complete .button,
.page-wrapper.assessment-control-panel .control-panel-container.control-panel-container--complete .asset-browser__upload-button,
.page-wrapper.assessment-control-panel .control-panel-container.control-panel-container--complete .form-file__button,
.page-wrapper.assessment-control-panel .control-panel-container.control-panel-container--complete .teacher-pre-assessment--add-question-button {
  display: block;
  margin: 0 auto;
  padding: 15px 30px;
}

.page-wrapper.assessment-control-panel .control-panel-container.control-panel-container--complete small {
  color: #777777;
}

.page-wrapper.assessment-control-panel .control-panel-results {
  width: 80%;
  margin: 30px auto 30px auto;
}

.page-wrapper.assessment-control-panel .control-panel-results > div {
  display: flex;
  align-items: center;
  justify-content: left;
  margin: 0 40px 40px 40px;
}

.page-wrapper.assessment-control-panel .control-panel-results > div button {
  text-decoration: underline;
  color: #3967fe;
  font-size: 16px;
  font-weight: 700;
  font-family: "OpenCL", "Open Sans", sans-serif;
  padding-left: 20px;
}

.page-wrapper.assessment-control-panel .control-panel-results__icon_certificate {
  width: 24px;
  height: 24px;
  background-image: url("/assets/icon_ribbon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.page-wrapper.assessment-control-panel .control-panel-results__icon_csv {
  width: 24px;
  height: 24px;
  background-image: url("/assets/icon_csv.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.page-wrapper.assessment-control-panel.assessment-results-panel {
  padding-top: 80px;
}

.page-wrapper.assessment-control-panel.assessment-results-panel nav .test-name-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-wrapper.assessment-control-panel.assessment-results-panel nav .test-name-title button {
  background-color: white;
  color: #d0112b;
  width: initial;
  text-transform: capitalize;
  padding: 0 15px;
  margin-top: 0px !important;
  font-weight: 700;
}

.page-wrapper.assessment-control-panel .button--return-assessment {
  background-color: #3967fe;
  border-radius: 20px;
  width: 100%;
  color: #ffffff;
  font-weight: normal;
  font-size: 14px;
  height: 40px;
  text-transform: uppercase;
  margin-top: 20px;
  margin-left: -15px;
  width: calc(100% + 30px);
}

.page-wrapper.assessment-control-panel .button--return-assessment {
  margin-top: 50px !important;
}

.assessment-test__progress-tooltip .tooltip-inner {
  font-size: 12px;
}

.assessment-test__progress-tooltip .tooltip-inner h2,
.assessment-test__progress-tooltip .tooltip-inner .editable--help--h2-heading,
.assessment-test__progress-tooltip .tooltip-inner .teacher-pre-assessment--heading,
.assessment-test__progress-tooltip .tooltip-inner .assessment-builder--heading,
.assessment-test__progress-tooltip .tooltip-inner .admin-homework--heading,
.assessment-test__progress-tooltip .tooltip-inner #adminLayout .admin-lesson-intro--heading,
#adminLayout .assessment-test__progress-tooltip .tooltip-inner .admin-lesson-intro--heading,
.assessment-test__progress-tooltip .tooltip-inner #adminLayout .admin-assessment-intro--heading,
#adminLayout .assessment-test__progress-tooltip .tooltip-inner .admin-assessment-intro--heading {
  margin: 20px 0;
}

.assessment-test__progress-tooltip .tooltip-inner h3 {
  margin: 10px 0 0 0;
  font-size: 14px;
  font-weight: bold;
}

.page-wrapper.student-assessment {
  margin-top: 0 !important;
  width: 100%;
  flex-direction: column;
}

.page-wrapper.student-assessment nav {
  z-index: 2;
}

@media screen and (max-width: 640px) {
  .page-wrapper.student-assessment {
    padding-bottom: 0;
    margin-bottom: 0 !important;
  }
}

.page-wrapper.student-assessment .student-assessment--student-name {
  position: absolute;
  height: 80px;
  margin: 0 0;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 28px;
  font-size: 24px !important;
  font-family: "RubikCL", "Rubik", sans-serif;
  font-weight: 500;
  color: #fff;
  left: 0px;
  right: 0px;
  top: 0px;
}

.page-wrapper.student-assessment .student-assessment--student-name svg {
  width: 90px;
}

.page-wrapper.student-assessment .student-assessment--student-name svg g {
  fill: #ffffff;
}

.page-wrapper.student-assessment .progress-container {
  margin: 24px auto -8px auto;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.page-wrapper.student-assessment .progress-container:after {
  content: "";
  display: block;
  width: 100%;
  border-bottom: 1px dashed #333333;
  position: absolute;
  top: 7px;
  z-index: 1;
}

.page-wrapper.student-assessment .progress-container .progress-step {
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 15px;
  border: 2px solid #333333;
  background-color: #ffffff;
  z-index: 2;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 25px;
}

.page-wrapper.student-assessment .progress-container .progress-step:first-child {
  margin-left: 0;
}

.page-wrapper.student-assessment .progress-container .progress-step--active {
  border-color: #619acf;
}

.page-wrapper.student-assessment .progress-container .progress-step--complete {
  background-color: #333333;
}

.page-wrapper.student-assessment .assessment-actions {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  background-color: #fafafa;
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.16);
  z-index: 100;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows {
  position: absolute;
  right: 30px;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control {
  width: 33.3%;
  padding: 10px 0;
  text-align: center;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control .button,
.page-wrapper.student-assessment .assessment-actions .assessment-control .asset-browser__upload-button,
.page-wrapper.student-assessment .assessment-actions .assessment-control .form-file__button,
.page-wrapper.student-assessment .assessment-actions .assessment-control .teacher-pre-assessment--add-question-button {
  padding: 0 8px;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control .button svg,
.page-wrapper.student-assessment .assessment-actions .assessment-control .asset-browser__upload-button svg,
.page-wrapper.student-assessment .assessment-actions .assessment-control .form-file__button svg,
.page-wrapper.student-assessment .assessment-actions .assessment-control .teacher-pre-assessment--add-question-button svg {
  width: 80px;
  height: 52px;
  transition: 0.25s ease all;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control .button svg path,
.page-wrapper.student-assessment .assessment-actions .assessment-control .asset-browser__upload-button svg path,
.page-wrapper.student-assessment .assessment-actions .assessment-control .form-file__button svg path,
.page-wrapper.student-assessment .assessment-actions .assessment-control .teacher-pre-assessment--add-question-button svg path {
  fill: #666666;
}

.page-wrapper.student-assessment .assessment-actions .button__previous-question {
  background-color: transparent;
  color: #666666;
  border: none;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
  transition: 0.25s ease all;
}

.page-wrapper.student-assessment .assessment-actions .button__previous-question svg {
  width: 80px;
  height: 52px;
  fill: #666666;
  transition: 0.25s ease all;
}

.page-wrapper.student-assessment .assessment-actions .button__previous-question:hover {
  color: #333333;
}

.page-wrapper.student-assessment .assessment-actions .button__previous-question:hover svg {
  fill: #333333;
}

.page-wrapper.student-assessment .assessment-actions .button__previous-question:active {
  transition: none;
  box-shadow: none;
}

.page-wrapper.student-assessment .assessment-actions .button__previous-question > div {
  display: flex;
  flex-direction: column;
}

.page-wrapper.student-assessment .assessment-actions .button__next_question {
  width: 168px;
  height: 48px;
  font-family: "OpenCL", "Open Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  cursor: default;
  transition: all 0.25s ease;
  color: #ffffff;
  background-color: #3967fe;
}

.page-wrapper.student-assessment .assessment-actions .button__next_question:hover {
  background-color: #009500;
}

.page-wrapper.student-assessment .assessment-actions .button__next_question.button__inactive {
  opacity: 0.5;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows {
  display: flex;
  justify-content: center;
  width: 20%;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control {
  display: flex;
  justify-content: center;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .button,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .asset-browser__upload-button,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .form-file__button,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .teacher-pre-assessment--add-question-button {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 400;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .button svg,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .asset-browser__upload-button svg,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .form-file__button svg,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .teacher-pre-assessment--add-question-button svg {
  width: 32px;
  height: 52px;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .button:disabled,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .asset-browser__upload-button:disabled,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .form-file__button:disabled,
.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control .teacher-pre-assessment--add-question-button:disabled {
  opacity: 0.2;
}

.page-wrapper.student-assessment .assessment-actions .assessment-control-arrows .assessment-control:nth-child(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
}

.page-wrapper.student-assessment .assessment-end {
  position: relative;
  width: 80%;
  margin: auto;
  box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
  padding: 40px 20px;
  border-radius: 8px;
  background-color: #ffffff;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .page-wrapper.student-assessment .assessment-end {
    width: 90%;
  }
}

.page-wrapper.student-assessment .assessment-end p {
  font-size: 16px;
  text-align: center;
  max-width: 600px;
  margin: 40px auto;
}

.page-wrapper.student-assessment .assessment-end .button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-wrapper.student-assessment .assessment-end .button,
.page-wrapper.student-assessment .assessment-end .asset-browser__upload-button,
.page-wrapper.student-assessment .assessment-end .form-file__button,
.page-wrapper.student-assessment .assessment-end .teacher-pre-assessment--add-question-button {
  width: 180px;
  height: 48px;
  font-size: 16px;
  margin-left: 20px;
  background-color: #3967fe;
}

.page-wrapper.student-assessment .assessment-end .button:first-child,
.page-wrapper.student-assessment .assessment-end .asset-browser__upload-button:first-child,
.page-wrapper.student-assessment .assessment-end .form-file__button:first-child,
.page-wrapper.student-assessment .assessment-end .teacher-pre-assessment--add-question-button:first-child {
  margin-left: 0;
}

.page-wrapper.student-assessment .assessment-end--next h4 {
  margin: 30px 0px;
  font-family: "OpenCL", "Open Sans", sans-serif;
  font-weight: 400;
  line-height: 25px;
  text-align: center;
}

.page-wrapper.student-assessment .assessment-end--next .button-container + p {
  font-style: italic;
  margin-left: auto;
  margin-right: auto;
  margin-top: 3em;
  max-width: 20em;
  text-align: center;
}

.viewer-one-to-one::before {
  background-position: 0px 3px !important;
  background-size: 12px !important;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJzZWFyY2giIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1zZWFyY2ggZmEtdy0xNiIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZmZmZmZmIiBkPSJNNTA1IDQ0Mi43TDQwNS4zIDM0M2MtNC41LTQuNS0xMC42LTctMTctN0gzNzJjMjcuNi0zNS4zIDQ0LTc5LjcgNDQtMTI4QzQxNiA5My4xIDMyMi45IDAgMjA4IDBTMCA5My4xIDAgMjA4czkzLjEgMjA4IDIwOCAyMDhjNDguMyAwIDkyLjctMTYuNCAxMjgtNDR2MTYuM2MwIDYuNCAyLjUgMTIuNSA3IDE3bDk5LjcgOTkuN2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMGwyOC4zLTI4LjNjOS40LTkuNCA5LjQtMjQuNi4xLTM0ek0yMDggMzM2Yy03MC43IDAtMTI4LTU3LjItMTI4LTEyOCAwLTcwLjcgNTcuMi0xMjggMTI4LTEyOCA3MC43IDAgMTI4IDU3LjIgMTI4IDEyOCAwIDcwLjctNTcuMiAxMjgtMTI4IDEyOHoiPjwvcGF0aD48L3N2Zz4=) !important;
}

.viewer-reset::before {
  background-position: -64px 0 !important;
}

.page-wrapper.homework .content .lesson-overview--heading {
  display: inline-block;
}

.page-wrapper.homework .content .lesson-overview--heading h2,
.page-wrapper.homework .content .lesson-overview--heading .editable--help--h2-heading,
.page-wrapper.homework .content .lesson-overview--heading .teacher-pre-assessment--heading,
.page-wrapper.homework .content .lesson-overview--heading .assessment-builder--heading,
.page-wrapper.homework .content .lesson-overview--heading .admin-homework--heading,
.page-wrapper.homework .content .lesson-overview--heading #adminLayout .admin-lesson-intro--heading,
#adminLayout .page-wrapper.homework .content .lesson-overview--heading .admin-lesson-intro--heading,
.page-wrapper.homework .content .lesson-overview--heading #adminLayout .admin-assessment-intro--heading,
#adminLayout .page-wrapper.homework .content .lesson-overview--heading .admin-assessment-intro--heading {
  font-size: 56px;
  font-weight: 500;
  line-height: 1.1;
}

.page-wrapper.homework .content .lesson-overview--heading svg {
  position: relative;
  top: -20px;
  margin-right: -120px;
}

.page-wrapper.homework .content .lesson-card .video-container {
  max-width: 80%;
  padding: 0px 20px 20px 20px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .page-wrapper.homework .content .lesson-card .video-container {
    max-width: 100%;
  }
}

.page-wrapper.homework .content .lesson-card .video-container .video-tile {
  margin-bottom: 20px;
}

.page-wrapper.homework .content .lesson-card .video-container .video-tile p {
  margin-bottom: 5px;
}

.page-wrapper.homework .content .lesson-card .video-container .video-tile .video-js .vjs-big-play-button {
  width: 2.4em;
  height: 2.4em;
  left: calc(50% - 1.2em);
  top: calc(50% - 1.2em);
  border-radius: 50%;
  border: 4px solid #ffffff;
}

.page-wrapper.homework .content .lesson-card .video-container .video-tile .video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  top: 15%;
}

.page-wrapper.lesson .content .lesson-section .lesson-tile {
  display: flex;
}

.page-wrapper.lesson .content .lesson-section.overview {
  position: relative;
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-card--description {
  padding: 20px 0px;
}

.page-wrapper.lesson .content .lesson-section.overview button {
  margin-left: 15px;
  position: absolute;
  top: 20px;
  right: 20px;
}

@media only screen and (max-width: 640px) {
  .page-wrapper.lesson .content .lesson-section.overview .button,
  .page-wrapper.lesson .content .lesson-section.overview .asset-browser__upload-button,
  .page-wrapper.lesson .content .lesson-section.overview .form-file__button,
  .page-wrapper.lesson .content .lesson-section.overview .teacher-pre-assessment--add-question-button {
    margin-top: 10px;
    position: relative;
    margin-left: 0;
    top: 0;
    right: 0;
  }
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile {
  padding: 20px;
  border-top: 1px solid #dddddd;
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--image {
  width: 50px;
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--image .thumbnail {
  height: 25px;
  width: 25px;
  background-size: contain;
  background-position: center;
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--image .thumbnail.video {
  background-image: url("/assets/lesson_video.svg");
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--image .thumbnail.static {
  background-image: url("/assets/lesson_discussion.svg");
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--image .thumbnail.interactive {
  background-image: url("/assets/lesson_interactive.svg");
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--content {
  max-width: calc(100% - 70px);
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--content .description b {
  font-family: "OpenCL", "Open Sans", sans-serif;
  font-weight: 600;
}

.page-wrapper.lesson .content .lesson-section.overview .lesson-tile--content .talking-points b {
  font-family: "OpenCL", "Open Sans", sans-serif;
  font-weight: 500;
  margin-bottom: 10px;
  display: block;
}

@media screen and (max-width: 640px) {
  .page-wrapper.lesson .content .lesson-section.overview .lesson-tile--content .talking-points ul {
    margin: 10px 0px;
  }
}

.swal2-container,
.swal2-title,
.swal2-actions {
  font-family: "RubikCL", "Rubik", sans-serif;
}

#swal2-content,
.swal2-actions {
  font-family: "Annie Use Your Telescope";
}

#swal2-content *,
.swal2-actions * {
  font-family: "Annie Use Your Telescope";
}

#swal2-content button,
.swal2-actions button {
  background-color: #3967fe;
  text-transform: uppercase;
}

#swal2-content small,
.swal2-actions small {
  font-size: 15px;
  font-weight: bold;
}

#swal2-content {
  font-size: 24px;
}

.swal2-styled:focus {
  box-shadow: initial !important;
}

.page-wrapper.account form {
  margin: 0 auto;
}

.page-wrapper.account .form-control {
  display: block;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  padding-left: 16px;
  padding-right: 16px;
  border: 1px solid #000000;
  margin-bottom: 15px;
  transition: border 200ms ease-in-out;
}

.page-wrapper.account .form-control::-moz-placeholder {
  color: #a1a1a1;
}

.page-wrapper.account .form-control::placeholder {
  color: #a1a1a1;
}

.page-wrapper.account .form-control.is-invalid {
  border-color: #d0112b;
}

.page-wrapper.account .form-control.Password {
  padding-left: 0;
  padding-right: 0;
}

.page-wrapper.account .form-control.Password .Password__field {
  background-color: transparent;
  border: none;
  height: 40px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
  border-radius: 8px;
}

.page-wrapper.account .form-control.Password .Password__strength-meter {
  margin-top: 5px;
  margin-bottom: 0;
}

.page-wrapper.account label {
  font-weight: 600;
  display: inline-block;
  margin-bottom: 4px;
}

.page-wrapper.account .invalid-feedback {
  color: #d0112b;
  margin: 0px 0 15px 0;
  font-size: 14px;
  font-weight: 700;
}

.page-wrapper.account .password-feedback {
  color: #444444;
  font-size: 12px;
  display: block;
  margin: 10px auto;
  text-align: center;
}

.page-wrapper.account .password-comment {
  color: #444444;
  font-size: 14px;
  display: block;
  margin: -20px auto 20px auto;
}

.page-wrapper.account .row .auth-form--column {
  padding-bottom: 12px;
}

.page-wrapper.account .form-group {
  position: relative;
}

.page-wrapper.account .form-group .Password {
  max-width: initial;
}

.page-wrapper.account .form-group .correct-field {
  display: block;
  background-image: url("/assets/ic_check.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  color: #444444;
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -8px;
  width: 13px;
  height: 13px;
}

.page-wrapper.account .account-container {
  background: white;
  box-sizing: border-box;
  padding: 40px 65px;
  margin: 0 auto 25px auto;
  border-radius: 8px;
  box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
  position: relative;
}

.page-wrapper.account .account-container.account-container--method-selector {
  padding-bottom: 90px;
}

@media screen and (max-width: 640px) {
  .page-wrapper.account .account-container {
    margin: 0 7px 8px 7px;
    padding: 32px 31px 10px 31px;
  }

  .page-wrapper.account .account-container.account-container--method-selector {
    padding-bottom: 40px;
  }
}

.page-wrapper.account .auth-form--group {
  margin: 16px;
}

.page-wrapper.account .auth-form--group legend {
  font-weight: 600;
  margin-top: 23px;
  margin-bottom: 7px;
}

.page-wrapper.account .auth-form--group .col-sm-3 {
  padding-top: 7px;
  padding-bottom: 7px;
}

.page-wrapper.account .auth-form--recaptcha {
  margin: 30px -65px 10px -65px;
  display: flex;
  justify-content: center;
}

.page-wrapper.account .auth-form--submit {
  display: block;
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: #d0112b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  line-height: 0;
  text-transform: uppercase;
  transition: all 200ms ease-in-out;
}

.page-wrapper.account .auth-form--submit:disabled {
  background-color: rgba(208, 17, 43, 0.5);
}

.page-wrapper.account .auth-nav {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 640px) {
  .page-wrapper.account .auth-nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

.page-wrapper.account .auth-nav a,
.page-wrapper.account .auth-nav .password-reset--resend {
  display: block;
  color: #3967fe;
  text-decoration: underline;
  font-size: 13px;
}

.page-wrapper.account .auth-nav a:hover,
.page-wrapper.account .auth-nav .password-reset--resend:hover {
  font-weight: 600;
}

@media screen and (max-width: 640px) {
  .page-wrapper.account .auth-nav a,
  .page-wrapper.account .auth-nav .password-reset--resend {
    margin: 5px auto;
  }
}

.page-wrapper.account .login-divider {
  color: rgba(68, 68, 68, 0.5);
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: block;
  margin: 22px auto 16px auto;
}

.page-wrapper.account .password-reset--sent {
  text-align: center;
  color: #444444;
  font-size: 14px;
}

.page-wrapper.account .password-reset--sent svg {
  width: 42px;
  height: 42px;
  display: block;
  margin: 0 auto 20px auto;
}

.page-wrapper.account .password-reset--sent h2,
.page-wrapper.account .password-reset--sent .editable--help--h2-heading,
.page-wrapper.account .password-reset--sent .teacher-pre-assessment--heading,
.page-wrapper.account .password-reset--sent .assessment-builder--heading,
.page-wrapper.account .password-reset--sent .admin-homework--heading,
.page-wrapper.account .password-reset--sent #adminLayout .admin-lesson-intro--heading,
#adminLayout .page-wrapper.account .password-reset--sent .admin-lesson-intro--heading,
.page-wrapper.account .password-reset--sent #adminLayout .admin-assessment-intro--heading,
#adminLayout .page-wrapper.account .password-reset--sent .admin-assessment-intro--heading {
  font-size: 18px;
  margin: 15px 0;
  font-weight: bold;
}

.page-wrapper.account .alert {
  width: 100%;
  padding: 15px;
  background-color: #00aa00;
  margin: -20px 0 20px 0;
  font-size: 14px;
  color: #ffffff;
}

.page-wrapper.account .grade-col {
  flex: 0 0 20%;
  max-width: 20%;
  width: 100%;
  padding: 12px;
}

.page-wrapper.account #reset-password {
  color: #3967fe;
  font-family: "OpenCL", "Open Sans", sans-serif;
  font-size: 16px;
  display: block;
  margin: 20px auto 10px;
  text-decoration: underline;
  font-weight: 600;
}

.presentation-container {
  min-height: 100vh;
  width: 100%;
}

.presentation-container .lesson-start-instructions {
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.presentation-container .lesson-start-instructions--overlay {
  width: 100%;
  height: 100vh;
  background: rgba(51, 51, 51, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.presentation-container .lesson-start-instructions--overlay h1,
.presentation-container .lesson-start-instructions--overlay .editable--help--h1-heading {
  width: 30%;
  min-width: 200px;
  padding: 20px 0;
  text-align: center;
  font-family: "Annie Use Your Telescope", cursive;
  font-weight: 700;
  font-size: 44px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #efefef;
  margin: auto 0;
}

.presentation-container .lesson-start-instructions--description {
  margin-bottom: 10px;
  color: #ffffff;
  font-size: 26px;
  text-align: center;
  padding-left: 30px;
  padding-right: 30px;
}

@media screen and (max-width: 640px) {
  .presentation-container .lesson-start-instructions--description {
    font-size: 20px;
  }
}

.presentation-container .presentation-slides {
  width: 100%;
  height: 100vh;
  display: flex;
  position: relative;
}

.presentation-container .presentation-slides .slide-exit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  cursor: pointer;
  z-index: 100;
  font-size: 25px;
  font-weight: 700;
  position: absolute;
  left: 40px;
  top: 40px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 40px;
  transition: all 0.25s ease;
}

.presentation-container .presentation-slides .slide-exit-button:hover {
  transform: scale(1.25);
  color: white;
  background: black;
}

.presentation-container .confirmation .modal--content {
  margin-top: 40vh;
}

.presentation-container .video-slide {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000000;
}

.presentation-container .video-slide video {
  width: 99vw;
  max-width: 100vw;
  max-height: 100vh;
}

.presentation-container .static-slide {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: contain;
  background-position: center center;
}

.presentation-container .static-slide h1,
.presentation-container .static-slide .editable--help--h1-heading {
  font-family: "Annie Use Your Telescope", cursive;
  font-size: 5em;
  color: #000000;
  line-height: 1.25em;
  text-align: center;
}

@media screen and (max-width: 640px) {
  .presentation-container .static-slide h1,
  .presentation-container .static-slide .editable--help--h1-heading {
    line-height: 1;
    font-size: 2.5em;
  }
}

.presentation-container .interactive-slide {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.presentation-container .interactive-slide iframe {
  width: 100vw;
  height: 100vh;
  border: none;
  overflow: hidden;
}

#adminLayout .admin-materials {
  padding-top: 100px;
}

#adminLayout .admin-materials--heading {
  display: inline-block;
  padding-top: 30px;
  width: -moz-max-content;
  width: max-content;
}

#adminLayout .admin-materials .materials {
  width: 100%;
  height: 12.5rem;
  display: flex;
  flex-flow: row wrap;
}

#adminLayout .admin-materials .materials__wrapper {
  flex: 1 1 auto;
  position: relative;
  background-color: #efefef;
  display: flex;
  flex-direction: column;
  border: 2px solid #fff;
  border-left: 0px;
}

#adminLayout .admin-materials .materials__list {
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#adminLayout .admin-materials .materials__edit-button {
  text-align: center;
  background-color: #dddddd;
  height: 1.5rem;
  height: 27px;
  padding-top: 3px;
  cursor: pointer;
}

#adminLayout .admin-materials .material--selected {
  border: 2px solid #619acf;
}

#adminLayout .admin-materials .resources {
  display: flex;
  flex: 0 1 auto;
  position: relative;
  flex-flow: row wrap;
}

#adminLayout .admin-materials .resources__add-button {
  max-width: 12.5rem;
  text-align: center;
  flex: 1 1 auto;
  background: #d0112b;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 200px;
}

#adminLayout .admin-materials .resources__add-button button {
  width: 180px;
  height: 180px;
  font-size: 14px;
  padding: 20px;
}

#adminLayout .admin-materials .resources__add-button button:hover {
  background-color: #b2102b;
}

#adminLayout .admin-materials .resources .resource {
  width: 12.5rem;
  height: 12.5rem;
  text-align: center;
  border: solid 2px #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  background-color: #efefef;
}

#adminLayout .admin-materials .resources .resource:first-child {
  border-left: solid 2px #ffffff;
}

#adminLayout .admin-materials .resources .resource__title {
  font-size: 1rem;
  font-weight: 400;
  font-family: "RubikCL", "Rubik", sans-serif;
  overflow: hidden;
  padding: 0 5px;
  --lh: 16px;
  --max-lines: 3;
  position: relative;
  width: 12rem;
  line-height: var(--lh);
  height: calc(var(--lh) * var(--max-lines) + 10px);
  padding-right: 16px;
  padding-top: 10px;
}

#adminLayout .admin-materials .resources .resource__title.overflowing:before {
  position: absolute;
  content: "...";
  bottom: 0;
  right: 0;
  z-index: 2;
}

#adminLayout .admin-materials .resources .resource__title.overflowing:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  background: #EFEFEF;
  z-index: 1;
}

#adminLayout .admin-materials .resources .resource__icon {
  display: flex;
  font-size: 6rem;
  margin: 0 auto;
  width: 60px;
  height: 70px;
  align-items: center;
}

#adminLayout .admin-materials .resources .resource__icon > svg {
  width: 100%;
}

#adminLayout .admin-materials .resources .resource__controls {
  width: 100%;
  height: 1.5rem;
  background-color: #dddddd;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

#adminLayout .admin-materials .resources .resource__controls > span {
  flex: 1 1 auto;
}

#adminLayout .admin-materials .resources .resource__controls > span + a {
  flex: 1 1 auto;
  background-color: #666;
  color: #fff;
  margin: -2px 0px;
  display: block;
  padding: 2px 0px;
}

#adminLayout .admin-materials .modal--body {
  position: relative;
}

#adminLayout .admin-materials .modal--body__section > span:first-child {
  flex-basis: initial;
}

#adminLayout .admin-materials .modal--body__section > input {
  min-height: initial !important;
  height: 29px;
  padding: 4px 10px !important;
  font-size: 13px !important;
  line-height: 1.42857143;
  color: #555;
  background: #fff;
  border: 1px solid #ccc !important;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  font-weight: 400;
  outline: none;
}

#adminLayout .admin-materials .modal--body > button.button,
#adminLayout .admin-materials .modal--body > button.asset-browser__upload-button,
#adminLayout .admin-materials .modal--body > button.form-file__button,
#adminLayout .admin-materials .modal--body > button.teacher-pre-assessment--add-question-button {
  position: absolute;
  right: 60px;
  bottom: 25px;
  font-size: 12.6px;
}

#adminLayout .admin-materials .modal--body > button.button svg,
#adminLayout .admin-materials .modal--body > button.asset-browser__upload-button svg,
#adminLayout .admin-materials .modal--body > button.form-file__button svg,
#adminLayout .admin-materials .modal--body > button.teacher-pre-assessment--add-question-button svg {
  margin-right: 5px;
}

#adminLayout .admin-materials .modal.form-file .modal--body {
  padding-bottom: 80px;
}

.page-wrapper.page-wrapper__404 {
  flex-direction: column;
  justify-content: flex-start;
  min-height: initial !important;
}

.page-wrapper.page-wrapper__404 h1,
.page-wrapper.page-wrapper__404 .editable--help--h1-heading {
  font-size: 80px;
}

.page-wrapper.page-wrapper__404 h3 {
  font-size: 18px;
}

.page-wrapper.page-wrapper__404 p {
  font-size: 14px;
}

#adminLayout .page-wrapper.page-wrapper__404 {
  min-height: 300px !important;
  padding-top: 45px;
}

.card {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}

.button,
.asset-browser__upload-button,
.form-file__button,
.teacher-pre-assessment--add-question-button {
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 12px 8px;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid transparent;
  border-radius: 8px;
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .button,
  .asset-browser__upload-button,
  .form-file__button,
  .teacher-pre-assessment--add-question-button {
    font-size: 13px;
    padding: 10px 8px;
  }
}

.button--red-background,
.asset-browser__upload-button,
.form-file__button,
.teacher-pre-assessment--add-question-button {
  background-color: #d0112b;
  transition: all 0.25s ease;
}

.button--red-background:hover,
.asset-browser__upload-button:hover,
.form-file__button:hover,
.teacher-pre-assessment--add-question-button:hover {
  background-color: #b2102b;
}

.button--transparent-background {
  background-color: transparent;
}

.button--transparent-background:hover {
  transition: all 0.25s ease;
  background: rgba(0, 0, 0, 0.2);
  border-color: transparent;
}

.button--white-text,
.asset-browser__upload-button,
.form-file__button,
.teacher-pre-assessment--add-question-button,
.button--white-text:visited {
  color: #ffffff;
}

.button--red-text {
  color: #d0112b;
}

.button--red-border {
  border-color: #d0112b;
  background: transparent;
  border-width: 1px;
  transition: all 0.25s ease;
}

.button--red-border:hover {
  background-color: #b2102b;
  color: #ffffff;
}

.button--black-border {
  border-color: #000000;
}

.button--white-border {
  border-color: #ffffff;
  transition: all 0.25s ease;
}

.button--green-background {
  background-color: #00aa00;
  transition: all 0.25s ease;
}

.button--green-background:hover {
  background-color: #009500;
}

.button--white-background {
  background-color: #ffffff;
  transition: all 0.25s ease;
}

.button--white-background:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

.button--dark-gray-background {
  background-color: #444444;
  transition: all 0.25s ease;
}

.button--dark-gray-background:hover {
  background-color: black;
}

.button--gray-background {
  background-color: #666666;
  transition: all 0.25s ease;
}

.button--gray-background:hover {
  background-color: #444444;
}

.button--green-border {
  border-color: #00aa00;
  color: #00aa00;
  background: transparent;
  border-radius: 20px;
  border-width: 1px;
}

.button--green-border:disabled {
  border-color: #c0c0c0;
  color: #c0c0c0;
}

.button--green-border:disabled:hover {
  background-color: transparent;
  color: #c0c0c0;
}

.button--green-border:hover {
  color: #ffffff;
  background: #00aa00;
  transition: all 0.25s ease;
}

.button--full-width {
  width: 100%;
  font-size: 18px;
  margin-bottom: 30px;
  font-weight: 400;
  padding: 15px;
}

.button--small {
  padding: 6px 12px;
  border-width: 1px;
  font-size: 13px;
}

.button--modal-grey,
.form-video__button,
.form-interactive__button {
  background-color: #efefef;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px rgba(0, 0, 0, 0.2);
  font-size: 1.2em;
  padding: 5px 10px;
  transition: all 0.25s ease;
}

.button--modal-grey:hover,
.form-video__button:hover,
.form-interactive__button:hover {
  background-color: #dddddd;
}

.button--grey-gradient {
  border: 1px solid #ccc;
  background-color: #ffffff;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  text-shadow: 0 1px 0 #ffffff;
  outline: 0;
  background-image: linear-gradient(to bottom, #ffffff 0, #e0e0e0 100%);
}

.button--grey-gradient:hover {
  background-color: #e0e0e0;
}

.button:active,
.asset-browser__upload-button:active,
.form-file__button:active,
.teacher-pre-assessment--add-question-button:active {
  transition: none;
  background-image: none;
  outline: 0;
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}

.btn-loading:after {
  animation: spinAround 500ms infinite linear;
  border: 2px solid #dbdbdb;
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
  content: "";
  display: block;
  height: 1em;
  width: 1em;
  position: absolute;
  left: calc(50% - 0.5em);
  top: calc(50% - 0.5em);
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s;
}

.page-enter,
.page-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease-in-out;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.datatable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.datatable thead tr th {
  border-bottom: 4px solid #dddddd;
  padding: 8px;
}

.datatable--centered {
  text-align: center;
}

.datatable--cell {
  padding: 8px;
  border-bottom: 2px solid #dddddd;
  vertical-align: middle;
  font-size: 14px;
}

.datatable--cell--bold {
  font-weight: 700;
}

.datatable--cell--centered {
  text-align: center;
}

.datatable--row {
  background-color: #ffffff;
}

.datatable--row:nth-of-type(2n+1) {
  background-color: #f9f9f9;
}

.color-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.color-badge--badge {
  border-radius: 10px;
  border: 1px solid #777777;
  width: 30px;
  height: 30px;
  margin-left: 15px;
  display: inline-block;
}

.color-badge--label {
  margin: 1vw;
}

@keyframes slideInFromBottom {
  0% {
    bottom: -300px;
  }

  100% {
    bottom: 0px;
  }
}

@media screen and (max-width: 1200px), only screen and (max-width: 1200px) and (orientation: landscape), only screen and (min-device-width: 1200px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  .grid nav {
    width: 20%;
    min-width: initial;
    background-color: #fefbfc;
  }

  .grid nav .nav-wrapper {
    left: 0px;
    width: 20%;
    padding: 0px;
    padding-top: 20px;
    z-index: 1;
    height: 98vh;
  }

  .grid nav .nav-wrapper .logo {
    width: 85px;
  }

  .grid nav .nav-wrapper .logo > svg {
    display: block;
    margin: 0 auto;
  }

  .grid nav .nav-wrapper .logo > svg path {
    fill: #333;
  }

  .grid nav .nav-wrapper #level {
    background-color: transparent;
    padding: 0px 10px;
  }

  .grid nav .nav-wrapper #level a.dropdown--button {
    color: #d0112b;
    border: none;
    background-color: transparent;
    font-weight: bold;
  }

  .grid nav .nav-wrapper .navigation > li {
    border-left: 5px solid #ffffff;
    padding-left: 15px;
  }

  .grid nav .nav-wrapper .navigation > li:last-child {
    margin-right: 0px;
    padding-left: 40px;
  }

  .grid nav .nav-wrapper .navigation > li:last-child:before {
    background: rgba(116, 116, 116, 0.5);
  }

  .grid nav .nav-wrapper .navigation > li.portraitAssessment {
    line-height: 2;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .grid nav .nav-wrapper .navigation > li.router-link-exact-active.router-link-active {
    margin-left: -15px;
  }

  .grid .content-area {
    width: 80%;
    background-color: #fefbfc;
    box-shadow: -4px 4px 16px 0 rgba(116, 116, 116, 0.16);
  }

  .grid .content-area .top-bar {
    width: 80%;
  }

  .grid .content-area .top-bar--wrapper {
    padding: 10px 25px;
    height: 80px;
  }

  .grid .content-area .top-bar--wrapper .sponsor {
    display: none;
  }

  .grid .content-area .top-bar--wrapper .title {
    display: block;
    color: #ffffff;
    font-weight: bold;
    font-size: 24px;
    letter-spacing: 0.2px;
    line-height: 28px;
  }

  .grid .content-area .top-bar--wrapper .top-link {
    color: #d0112b;
    border-radius: 50px;
    font-weight: bold;
    padding: 10px 20px;
    font-size: 13px;
    letter-spacing: 0.3px;
  }

  .grid .content-area .top-bar--wrapper .top-link svg > path {
    fill: #d0112b;
  }

  .grid .content-area .main-content {
    background-color: #fefbfc;
  }

  .grid .content-area .main-content .page-wrapper {
    display: block;
  }

  .grid .content-area .main-content .page-wrapper .illustration {
    width: 100%;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    border-radius: 5px;
    background-color: #ffffff;
  }

  .grid .content-area .main-content .page-wrapper .illustration > img {
    max-height: 200px;
  }

  .grid .content-area .main-content .page-wrapper .content {
    width: 100%;
    margin: 20px 0px;
    padding: 0px;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview {
    width: 100%;
    margin: 20px 0px;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    border-radius: 8px;
    background-color: #ffffff;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading img {
    order: 1;
    height: 50px;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading h2,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .admin-assessment-intro--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading h2,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .admin-assessment-intro--heading {
    color: #333333;
    font-family: Rubik;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 34px;
    order: 2;
    margin-left: 20px;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading h2 + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .editable--help--h2-heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .teacher-pre-assessment--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .assessment-builder--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .admin-homework--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading #adminLayout .admin-lesson-intro--heading + img,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .admin-lesson-intro--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-card--heading #adminLayout .admin-assessment-intro--heading + img,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-card--heading .admin-assessment-intro--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading h2 + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .editable--help--h2-heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .teacher-pre-assessment--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .assessment-builder--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .admin-homework--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading #adminLayout .admin-lesson-intro--heading + img,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .admin-lesson-intro--heading + img,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading #adminLayout .admin-assessment-intro--heading + img,
  #adminLayout .grid .content-area .main-content .page-wrapper .content .lesson-overview--heading .admin-assessment-intro--heading + img {
    display: block;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--content .img-wrapper,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--content .img-wrapper {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--content .text-wrapper,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--content .text-wrapper {
    width: 100%;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--content p,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--content p {
    width: initial;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card--padding-wrap,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview--padding-wrap {
    padding: 20px;
  }

  .grid .content-area .main-content .page-wrapper .content .lesson-card .v-card__text,
  .grid .content-area .main-content .page-wrapper .content .lesson-overview .v-card__text {
    width: 100%;
  }

  .grid .content-area .main-content .page-wrapper .content .v-tabs .v-slide-group__prev {
    display: none !important;
  }

  .grid .content-area .main-content .page-wrapper .content .v-tabs .v-slide-group__content {
    width: 98%;
  }

  .grid .content-area .main-content .page-wrapper .content .v-tabs .v-slide-group__content .v-tabs-slider-wrapper {
    position: absolute;
  }

  .grid .content-area .main-content .page-wrapper .content .v-window h1,
  .grid .content-area .main-content .page-wrapper .content .v-window .editable--help--h1-heading {
    font-family: "OpenCL", "Open Sans", sans-serif;
    font-weight: 700;
    font-size: 24px;
  }

  .grid .content-area .main-content .page-wrapper .content .assessment--section {
    width: 100%;
    margin: 20px 0px;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    border-radius: 8px;
    background-color: #ffffff;
  }

  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading {
    display: initial;
  }

  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading h2,
  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading .admin-assessment-intro--heading {
    margin: 0px;
    margin-bottom: 20px;
  }

  .grid .content-area .main-content .page-wrapper.homework .content .lesson-overview--heading svg {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading h2,
  .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-overview--heading .admin-assessment-intro--heading {
    font-family: Rubik;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 34px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile {
    position: relative;
    margin-top: 0px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--image {
    position: absolute;
    top: 30px;
    height: 40px !important;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--image img {
    height: 40px !important;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--content li:before {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--content ul {
    list-style-type: disc;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--content h3 {
    font-family: Rubik;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 34px;
    margin-bottom: 20px;
    margin-left: 60px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:last-child {
    flex-flow: row wrap;
    padding: 0px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:last-child .lesson-tile--image,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:last-child .lesson-tile--content {
    padding: 20px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:last-child .lesson-tile--image {
    top: 10px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:last-child .handout-link {
    flex-basis: 100%;
    background-color: #fafafa;
    border-top: 1px solid #d9d9d9;
    padding: 20px;
    display: flex;
    align-items: center;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:last-child .handout-link img {
    height: 32px;
    width: initial;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:last-child .handout-link a {
    font-size: 12px;
    font-family: "OpenCL", "Open Sans", sans-serif;
    font-weight: bold;
    line-height: 17px;
    letter-spacing: 0px;
    text-decoration: underline;
    margin-left: 15px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile {
    width: 100%;
    margin: 20px 0px;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading img {
    order: 1;
    height: 50px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading h2,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-assessment-intro--heading {
    color: #333333;
    font-family: Rubik;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 34px;
    order: 2;
    margin-left: 20px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading h2 + img,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .editable--help--h2-heading + img,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .teacher-pre-assessment--heading + img,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .assessment-builder--heading + img,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-homework--heading + img,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading #adminLayout .admin-lesson-intro--heading + img,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-lesson-intro--heading + img,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading #adminLayout .admin-assessment-intro--heading + img,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-assessment-intro--heading + img {
    display: block;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading h2 + img + svg,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .editable--help--h2-heading + img + svg,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .teacher-pre-assessment--heading + img + svg,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .assessment-builder--heading + img + svg,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-homework--heading + img + svg,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading #adminLayout .admin-lesson-intro--heading + img + svg,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-lesson-intro--heading + img + svg,
  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading #adminLayout .admin-assessment-intro--heading + img + svg,
  #adminLayout .grid .content-area .main-content .page-wrapper.homework .lesson-tile--heading .admin-assessment-intro--heading + img + svg {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--content .img-wrapper {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--content p {
    width: initial;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading {
    display: initial;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading h2,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .admin-assessment-intro--heading {
    margin: 0px;
    margin-bottom: 20px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading svg {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading h2,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.lesson .lesson-section--heading .admin-assessment-intro--heading {
    font-family: Rubik;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 34px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section .lesson-tile {
    position: relative;
    margin-top: 0px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section .lesson-tile--image {
    position: absolute;
    top: 14px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section .lesson-tile--content li:before {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.intro .lesson-tile {
    position: relative;
    margin-top: 0px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.intro .lesson-tile--image {
    position: absolute;
    top: 14px;
    height: 40px !important;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.intro .lesson-tile--image img {
    height: 40px !important;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.intro .lesson-tile--content li:before {
    display: none;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.intro .lesson-tile--content ul {
    list-style-type: disc;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.intro .lesson-tile--content h3 {
    line-height: 34px !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
    font-weight: 700;
    margin-left: 50px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--materials .checklist--grid {
    margin: 0px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--materials .checklist--grid .grid-item {
    transform: scale(0.7);
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.overview .lesson-section--description {
    margin-bottom: 32px;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.overview .lesson-tile {
    margin: 0px -20px;
    border-top: 1px solid #dfdfdf;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.overview .lesson-tile:nth-child(odd) {
    background-color: #ffffff;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.overview .lesson-tile--image {
    position: relative;
  }

  .grid .content-area .main-content .page-wrapper.assessment h2,
  .grid .content-area .main-content .page-wrapper.assessment .editable--help--h2-heading,
  .grid .content-area .main-content .page-wrapper.assessment .teacher-pre-assessment--heading,
  .grid .content-area .main-content .page-wrapper.assessment .assessment-builder--heading,
  .grid .content-area .main-content .page-wrapper.assessment .admin-homework--heading,
  .grid .content-area .main-content .page-wrapper.assessment #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.assessment .admin-lesson-intro--heading,
  .grid .content-area .main-content .page-wrapper.assessment #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .page-wrapper.assessment .admin-assessment-intro--heading {
    font-family: Rubik;
    font-size: 21px;
    font-weight: 500;
    letter-spacing: 0.2px;
    line-height: 34px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section-icon {
    height: 46px;
    min-height: initial;
    width: 60px;
    position: absolute;
    left: 0px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section-block {
    display: block;
    margin-bottom: 0px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section-block .section-button {
    margin-top: 20px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment {
    margin: -20px;
    padding: 20px;
    margin-top: 0px;
    background-color: #fafafa;
    flex-flow: row wrap;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment .printed-assessment--mobile-pdf {
    flex-basis: 100%;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment .printed-assessment--mobile-pdf .section-icon {
    height: 30px;
    min-height: initial;
    width: 30px;
    position: initial;
    left: initial;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment .section-text .custom-checkbox--large label:before {
    width: 25px;
    height: 25px;
    border: 1px solid #333333;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment .section-text .custom-checkbox--large label:after {
    background-size: 20px 20px;
    width: 20px;
    height: 20px;
    left: 3px;
    top: -5px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment .section-text p.form-inline {
    margin-bottom: 0px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment .section-text .printed-assessment-form input[type=number] {
    height: 34px;
    width: 70px;
    margin-left: 10px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .section--printed-assessment .section-text .printed-assessment-form .input-group-addon {
    height: 34px;
  }

  .grid .content-area .main-content .page-wrapper.assessment .assessment-results-container .assessment-results .button-container {
    position: initial;
    top: initial;
    left: initial;
  }

  .grid .content-area .main-content .page-wrapper.assessment .assessment--section h4 {
    font-size: 14px;
  }

  .grid .content-area .main-content .page-wrapper__404 .content-card {
    width: 100%;
    margin: 20px 0px;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    padding: 20px;
    border-radius: 8px;
    background-color: #ffffff;
  }

  .grid .content-area .main-content .footer {
    background-image: none;
    background-color: #000000;
    min-height: initial;
  }

  .grid .content-area .main-content .footer--menu {
    top: initial;
  }

  .grid .content-area .main-content .footer--copyright {
    font-size: 12px;
    top: initial;
  }

  #assessmentLayout {
    background-color: #fefbfc;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel {
    padding-top: 80px;
    background-color: #fefbfc;
    height: 100vh;
    position: relative;
    margin: 0px !important;
    justify-content: initial;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel nav .navbar--assessment-control .test-name-form input {
    line-height: 28px;
    font-size: 16px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .control-panel-link-container {
    padding-top: 20px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress {
    margin: 0px 0 auto 0;
    flex-basis: initial;
    padding: 10px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-status {
    margin: 0px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students {
    margin: 0;
    padding: 0;
    position: relative;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__header {
    padding: 0 20px 15px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__header > div {
    font-size: 14px;
    line-height: 15px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__header > div:nth-child(1) {
    flex: 2;
    padding-left: 0px;
    text-align: initial;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__header > div:nth-child(2) {
    flex: 8;
    padding: 0 150px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__header > div:nth-child(3) {
    flex: 2;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list {
    padding-top: 40px;
    max-height: 60vh;
    overflow-y: scroll;
    box-shadow: 0 2px 24px 0 rgba(116, 116, 116, 0.24);
    padding: 20px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list .assessment-test-students__student {
    margin: 0 -20px;
    padding: 40px 20px;
    border-bottom: 1px solid #d9d9d9;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list .assessment-test-students__student:first-child {
    margin-top: -10px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list .assessment-test-students__student:last-child {
    border-bottom: none;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list .assessment-test-students__student > div:nth-child(1) {
    flex: 2;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list .assessment-test-students__student > div:nth-child(2) {
    flex: 8;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list .assessment-test-students__student > div:nth-child(3) {
    flex: 2;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel.assessment-results-panel nav .test-name-title {
    font-size: 18px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel.assessment-results-panel .control-panel-results {
    width: 100%;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel.assessment-results-panel .control-panel-results > div {
    margin: 0 0 20px 0;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel.assessment-results-panel .control-panel-results-students {
    margin: initial;
    width: 100%;
  }

  #assessmentLayout .page-wrapper.assessment-test {
    padding-top: 40px;
    background-color: #fefbfc;
    width: 95%;
    margin-bottom: 0px !important;
    min-height: 100vh;
  }

  #assessmentLayout .page-wrapper.assessment-test nav .navbar--assessment-control {
    top: initial;
    height: 80px;
  }

  #assessmentLayout .page-wrapper.assessment-test nav .navbar--assessment-control a.button--start-assessment {
    background-color: #ffffff;
    width: 40%;
    display: flex !important;
  }

  #assessmentLayout .page-wrapper.assessment-test nav .navbar--assessment-control .test-name {
    line-height: 28px;
    font-size: 24px !important;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .assessment-control-arrows {
    align-items: center;
    width: 35%;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack__content {
    position: relative;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack__wrapper {
    background-color: #222222;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack--bottom {
    bottom: 30px;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #222222;
    left: 78%;
    bottom: -14px;
    transform: rotate(-90deg);
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack p {
    color: #fff;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack svg {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 16px;
    height: 16px;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack svg > path {
    fill: #fff;
  }

  #assessmentLayout .page-wrapper.assessment-test .assessment-question-container .question-text-container h3 {
    text-align: left;
  }

  #assessmentLayout .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text {
    justify-content: flex-start;
  }

  #assessmentLayout .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-text p {
    text-align: left;
  }

  #assessmentLayout .page-wrapper.assessment-test .assessment-question-container .question-text-container .question-answer-section {
    margin-top: 16px;
  }

  #assessmentLayout .student-assessment {
    padding: 0 50px;
  }

  #assessmentLayout .student-assessment.assessment-test {
    z-index: 2;
  }

  #assessmentLayout .student-assessment--student-name {
    position: absolute;
    height: 80px;
    margin: 0 0;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 28px;
    font-size: 24px !important;
    font-family: "RubikCL", "Rubik", sans-serif;
    font-weight: 500;
    color: #fff;
    left: 0px;
    right: 0px;
    top: 0px;
  }

  #assessmentLayout .student-assessment--student-name svg {
    width: 90px;
  }

  #assessmentLayout .student-assessment--student-name svg g {
    fill: #ffffff;
  }

  #assessmentLayout .student-assessment .student-name-modal .modal--content {
    max-width: 35vw;
  }

  #assessmentLayout .student-assessment .student-name-modal .modal--content .modal--body > div {
    flex-flow: row wrap;
  }

  #assessmentLayout .student-assessment .student-name-modal .modal--content .modal--body > div input {
    display: inline-block;
    flex-basis: 80%;
    margin: 10px auto;
    height: 40px;
  }

  #assessmentLayout .student-assessment .student-name-modal .modal--content .modal--body > div input:first-child {
    margin-top: 0px;
  }

  #assessmentLayout .student-assessment .student-name-modal .modal--content .modal--footer button {
    margin: 0 auto !important;
    width: 80%;
    border: 2px solid #3967fe;
    background-color: #3967fe;
    color: #fff;
    border-radius: 20px;
    height: 40px;
  }

  #assessmentLayout .student-assessment .assessment-end {
    margin-top: 100px;
  }

  #assessmentLayout .student-assessment .assessment-end h2,
  #assessmentLayout .student-assessment .assessment-end .editable--help--h2-heading,
  #assessmentLayout .student-assessment .assessment-end .teacher-pre-assessment--heading,
  #assessmentLayout .student-assessment .assessment-end .assessment-builder--heading,
  #assessmentLayout .student-assessment .assessment-end .admin-homework--heading,
  #assessmentLayout .student-assessment .assessment-end #adminLayout .admin-lesson-intro--heading,
  #adminLayout #assessmentLayout .student-assessment .assessment-end .admin-lesson-intro--heading,
  #assessmentLayout .student-assessment .assessment-end #adminLayout .admin-assessment-intro--heading,
  #adminLayout #assessmentLayout .student-assessment .assessment-end .admin-assessment-intro--heading {
    font-size: 21px;
    line-height: 34px;
  }

  #assessmentLayout .student-assessment .assessment-end .button-container {
    flex-flow: row wrap;
  }

  #assessmentLayout .student-assessment .assessment-end .button-container button {
    background-color: #3967fe !important;
    width: initial;
    height: initial;
    padding: 10px;
    text-transform: capitalize;
    flex-basis: 100%;
    width: 150px;
    margin: 20px auto 0px;
    border-radius: 50px;
    font-size: 14px;
    line-height: 17px;
  }

  #assessmentLayout .student-assessment .assessment-end .button-container button:first-child {
    margin-top: 0px;
  }

  #assessmentLayout .assessment-actions button.submit {
    border-radius: 50px;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows {
    flex-basis: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto 10px;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows button:focus {
    outline: none;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows button:active {
    box-shadow: none;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows button svg {
    width: 20px;
    height: 25px;
  }

  .assessment-question-container {
    margin-top: 65px;
  }

  .assessment-question-container .question-container .question-text-section {
    margin: 0;
    width: 100%;
    padding: 30px;
  }

  .assessment-question-container .question-container .question-text-section .question-text {
    position: relative;
    flex-flow: row wrap;
  }

  .assessment-question-container .question-container .question-text-section .question-text .audio-player {
    position: absolute;
    top: -60px;
    left: -7px;
  }

  .assessment-question-container .question-container .question-text-section .question-text .audio-player .button,
  .assessment-question-container .question-container .question-text-section .question-text .audio-player .asset-browser__upload-button,
  .assessment-question-container .question-container .question-text-section .question-text .audio-player .form-file__button,
  .assessment-question-container .question-container .question-text-section .question-text .audio-player .teacher-pre-assessment--add-question-button {
    background-color: #3967fe;
    padding: 0px;
    width: 40px;
    height: 40px;
  }

  .assessment-question-container .question-container .question-text-section .question-text .audio-player .button svg path,
  .assessment-question-container .question-container .question-text-section .question-text .audio-player .asset-browser__upload-button svg path,
  .assessment-question-container .question-container .question-text-section .question-text .audio-player .form-file__button svg path,
  .assessment-question-container .question-container .question-text-section .question-text .audio-player .teacher-pre-assessment--add-question-button svg path {
    fill: #fff;
  }

  .assessment-question-container .question-container .question-answer-section {
    width: 100%;
    margin: 0;
    margin-top: 30px;
    padding-left: 30px;
  }

  .assessment-question-container .question-container .question-answer-section ul {
    margin: 20px 0px;
  }

  .assessment-question-container .question-container .question-answer-section ul li:last-child {
    margin-bottom: 0px;
    padding-bottom: 0px;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-section h3 {
    text-align: left;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-section .question-text p {
    text-align: initial;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-section h3 {
    text-align: left;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-section .question-text {
    justify-content: initial;
  }

  .assessment-question-container .question--multiple-choice-image {
    width: 100%;
  }

  .assessment-question-container .question--multiple-choice-image .multiple-choice-image--item {
    margin: 10px;
    width: 150px;
    height: 150px;
    border: 1px solid #FAFAFA;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24);
  }

  .assessment-question-container .question--multiple-choice-image .multiple-choice-image--item img {
    width: 150px;
    height: 150px;
  }

  .assessment-question-container .question--multiple-choice-image .multiple-choice-image--item:after {
    width: 150px;
    height: 150px;
    border: 0px;
  }

  .assessment-question-container .question--multiple-choice-image .multiple-choice-image--selected {
    border: 0px;
    box-shadow: none;
  }

  .assessment-question-container .question--multiple-choice-image .multiple-choice-image--selected:after {
    border: 4px solid #3967fe;
  }

  .assessment-question-container .question--multiple-choice-text {
    width: 100%;
  }

  #authLayout {
    padding-bottom: 120px;
  }

  #authLayout .footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    right: 0px;
  }

  .question-text-container--with-image,
  .question-text-container--with-image#multi-select,
  .question-text-container .multiple-choice-image--list {
    width: 100% !important;
    min-width: auto;
  }

  .computer-mobile {
    margin-top: 30px !important;
    background-image: url("/assets/icon_computer.png");
  }

  .tooltip {
    max-width: 560px;
  }

  .tooltip.assessment-test__progress-tooltip .tooltip-arrow {
    display: none;
  }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1366px) and (min-device-width: 1200px) {
  .grid nav {
    background-color: #fefbfc !important;
  }

  .grid nav .nav-wrapper #level a.dropdown--button {
    color: #479f4c !important;
    background-color: #fefbfc !important;
  }

  .grid .content-area .top-bar--wrapper .top-link {
    color: #479f4c !important;
    background-color: #ffffff !important;
  }
}

@keyframes slideInFromBottom {
  0% {
    bottom: -300px;
  }

  100% {
    bottom: 0px;
  }
}

@media screen and (max-width: 640px) {
  .grid {
    display: block;
  }

  .grid .v-navigation-drawer {
    background-color: #fefbfc;
  }

  .grid .v-navigation-drawer.v-navigation-drawer--absolute {
    position: fixed;
    z-index: 101;
  }

  .grid .v-navigation-drawer--open .sponsor {
    position: absolute;
    width: 100vw;
    animation: 1s ease-out 300ms 1 slideInFromBottom;
    animation-fill-mode: forwards;
  }

  .grid .v-navigation-drawer div[role=list] {
    margin-top: 80px;
    margin-bottom: 200px;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item {
    min-height: 45px;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item a {
    color: #333;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item:first-child a {
    color: #d0112b;
    font-weight: bold;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item.active {
    color: #d0112b;
    font-weight: bold;
    border-left: 5px solid #d0112b;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item.active a {
    color: #d0112b;
    font-weight: bold;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item.active.lesson {
    color: #333;
    font-weight: initial;
    border-left: none;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item.active.lesson a {
    color: #333;
    font-weight: initial;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item .dropdown a[role=button] > span {
    margin-right: 15px;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item .dropdown--menu a {
    color: #333;
    font-weight: initial;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item .dropdown--menu li.active {
    background-color: #d0112b;
  }

  .grid .v-navigation-drawer div[role=list] .v-list-item .dropdown--menu li.active a,
  .grid .v-navigation-drawer div[role=list] .v-list-item .dropdown--menu li.active a:visited,
  .grid .v-navigation-drawer div[role=list] .v-list-item .dropdown--menu li.active a:hover {
    color: #ffffff !important;
    background-color: #d0112b !important;
    background-image: none !important;
  }

  .grid .v-navigation-drawer__append .sponsor {
    text-align: center;
    margin-bottom: 0;
    padding-top: 16px;
    background: #f5f5f5;
    padding-bottom: 16px;
    box-shadow: 1px 0px 3px #999;
    bottom: -300px;
  }

  .grid .v-navigation-drawer__append .sponsor p,
  .grid .v-navigation-drawer__append .sponsor img {
    display: block;
    margin: 0 auto;
  }

  .grid .v-navigation-drawer__append .sponsor p {
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 0.75px;
    color: #777;
    margin-bottom: 8px;
  }

  .grid .v-navigation-drawer__append .sponsor img {
    height: 80px;
    box-shadow: -4px 4px 16px 0 rgba(116, 116, 116, 0.16);
    padding: 10px;
  }

  .grid nav {
    height: 60px;
    width: 100%;
    position: fixed;
    z-index: 102;
    top: 0px;
  }

  .grid nav .nav-wrapper {
    position: fixed;
    background-color: #ffffff;
    height: 60px;
    width: 100vw;
    z-index: 102;
  }

  .grid nav .nav-wrapper .logo {
    order: 2;
    position: fixed;
    left: calc(50vw - 50px);
    top: 10px;
    width: 90px;
  }

  .grid nav .nav-wrapper .nav-toggle {
    display: block;
    order: 1;
    margin-left: 10px;
    position: fixed;
    left: 15px;
    top: 20px;
  }

  .grid nav .nav-wrapper #level {
    display: none;
  }

  .grid nav .nav-wrapper .navigation {
    display: none;
  }

  .grid nav .nav-wrapper .sponsor {
    display: none;
  }

  .grid .content-area {
    width: 100%;
  }

  .grid .content-area .top-bar {
    padding: 0px;
    position: fixed;
    top: 60px;
    width: 100vw;
    z-index: 100;
  }

  .grid .content-area .top-bar--wrapper {
    padding: 10px;
    height: initial;
    width: 100vw;
  }

  .grid .content-area .top-bar--wrapper .title {
    margin-left: 8px;
    font-size: 14px;
  }

  .grid .content-area .top-bar--wrapper .top-link {
    font-size: 13px;
    padding: 10px 14px;
  }

  .grid .content-area .top-bar--wrapper .top-link svg {
    display: none;
  }

  .grid .content-area .top-bar--review-assessment .top-bar--wrapper .title {
    margin-left: 8px;
    font-size: 12px;
  }

  .grid .content-area .top-bar--review-assessment .top-bar--wrapper .top-link {
    font-size: 11px;
    padding: 10px 8px;
  }

  .grid .content-area .main-content {
    margin-top: 130px;
  }

  .grid .content-area .main-content .content h1,
  .grid .content-area .main-content .content .editable--help--h1-heading {
    font-size: 24px;
  }

  .grid .content-area .main-content .content .button.button--red-background.button--white-text,
  .grid .content-area .main-content .content .asset-browser__upload-button,
  .grid .content-area .main-content .content .form-file__button,
  .grid .content-area .main-content .content .teacher-pre-assessment--add-question-button {
    font-size: 13px;
  }

  .grid .content-area .main-content .content .lesson-card--heading h2,
  .grid .content-area .main-content .content .lesson-card--heading .editable--help--h2-heading,
  .grid .content-area .main-content .content .lesson-card--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .content .lesson-card--heading .assessment-builder--heading,
  .grid .content-area .main-content .content .lesson-card--heading .admin-homework--heading,
  .grid .content-area .main-content .content .lesson-card--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .content .lesson-card--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .content .lesson-card--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .content .lesson-card--heading .admin-assessment-intro--heading {
    line-height: 34px !important;
    font-size: 15px !important;
    margin-bottom: 0px !important;
  }

  .grid .content-area .main-content .content .lesson-card--heading img {
    height: 30px !important;
    width: initial;
  }

  .grid .content-area .main-content .content .lesson-card--content p,
  .grid .content-area .main-content .content .lesson-card--content ul {
    font-size: 13px;
  }

  .grid .content-area .main-content .content .lesson-card--padding-wrap-even h2,
  .grid .content-area .main-content .content .lesson-card--padding-wrap-even .editable--help--h2-heading,
  .grid .content-area .main-content .content .lesson-card--padding-wrap-even .teacher-pre-assessment--heading,
  .grid .content-area .main-content .content .lesson-card--padding-wrap-even .assessment-builder--heading,
  .grid .content-area .main-content .content .lesson-card--padding-wrap-even .admin-homework--heading,
  .grid .content-area .main-content .content .lesson-card--padding-wrap-even #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .content .lesson-card--padding-wrap-even .admin-lesson-intro--heading,
  .grid .content-area .main-content .content .lesson-card--padding-wrap-even #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .content .lesson-card--padding-wrap-even .admin-assessment-intro--heading {
    line-height: 34px !important;
    font-size: 15px !important;
  }

  .grid .content-area .main-content .content .lesson-card--padding-wrap-even p,
  .grid .content-area .main-content .content .lesson-card--padding-wrap-even ul {
    font-size: 13px;
  }

  .grid .content-area .main-content .content .lesson-card .download-container {
    display: block;
  }

  .grid .content-area .main-content .content .lesson-card .download-container .download {
    display: block;
    padding: 0px;
    margin-top: 15px;
    font-size: 13px;
  }

  .grid .content-area .main-content .content .lesson-card .download-container .download::before {
    background-size: auto 13px;
    height: 13px;
    width: 13px;
  }

  .grid .content-area .main-content .content .lesson-overview--heading h2,
  .grid .content-area .main-content .content .lesson-overview--heading .editable--help--h2-heading,
  .grid .content-area .main-content .content .lesson-overview--heading .teacher-pre-assessment--heading,
  .grid .content-area .main-content .content .lesson-overview--heading .assessment-builder--heading,
  .grid .content-area .main-content .content .lesson-overview--heading .admin-homework--heading,
  .grid .content-area .main-content .content .lesson-overview--heading #adminLayout .admin-lesson-intro--heading,
  #adminLayout .grid .content-area .main-content .content .lesson-overview--heading .admin-lesson-intro--heading,
  .grid .content-area .main-content .content .lesson-overview--heading #adminLayout .admin-assessment-intro--heading,
  #adminLayout .grid .content-area .main-content .content .lesson-overview--heading .admin-assessment-intro--heading {
    line-height: 34px !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }

  .grid .content-area .main-content .content .lesson-overview--content p {
    font-size: 13px;
  }

  .grid .content-area .main-content .content .lesson-tile {
    position: relative;
  }

  .grid .content-area .main-content .content .lesson-tile--image {
    height: 40px !important;
    width: initial;
    top: -10px !important;
  }

  .grid .content-area .main-content .content .lesson-tile--image img {
    height: 40px !important;
  }

  .grid .content-area .main-content .content .lesson-tile--content h3 {
    line-height: 34px !important;
    font-size: 15px !important;
    margin-bottom: 20px !important;
    font-weight: 700;
    margin-left: 50px;
  }

  .grid .content-area .main-content .content .lesson-tile--content p,
  .grid .content-area .main-content .content .lesson-tile--content li {
    font-size: 13px;
  }

  .grid .content-area .main-content .content .lesson-tile--content li:before {
    display: none;
  }

  .grid .content-area .main-content .content .lesson-tile--content ul {
    list-style-type: disc;
    padding-left: 15px;
  }

  .grid .content-area .main-content .content .v-tabs .v-slide-group__content .v-tab {
    font-size: 12px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile--image {
    position: absolute;
    top: 30px !important;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:nth-child(4) .lesson-tile--image img {
    height: 35px !important;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:nth-child(4) .vjs-controls-enabled {
    width: 85vw;
    height: 200px;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:nth-child(5) .lesson-tile--content h3 {
    line-height: 1;
    margin-left: 40px;
    justify-content: space-between;
  }

  .grid .content-area .main-content .page-wrapper.homework .lesson-tile:nth-child(5) .lesson-tile--content h3 a {
    padding: 5px;
    line-height: 1;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section.intro .lesson-tile--image {
    top: 14px !important;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--materials .checklist--grid {
    flex-flow: row wrap;
  }

  .grid .content-area .main-content .page-wrapper.lesson .lesson-section--materials .checklist--grid .grid-item {
    flex-basis: 30% !important;
  }

  .grid .content-area .main-content .page-wrapper.assessment .content .section--printed-assessment .input-group:after {
    content: none;
  }

  .grid .content-area .main-content .page-wrapper.assessment > a.button--post-assessment-lesson {
    height: 40px;
    font-size: 13px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 50px;
  }

  #authLayout {
    padding-bottom: 0px;
  }

  .footer {
    position: relative !important;
    background-image: none;
    background-color: #000000;
    min-height: initial;
  }

  .footer--menu {
    top: initial;
    flex-flow: row wrap;
  }

  .footer--menu--links {
    display: flex;
    flex-basis: 100%;
    flex-flow: row wrap;
    margin-top: 15px;
    margin-bottom: 0px;
  }

  .footer--menu--links a {
    flex-basis: 100%;
    font-size: 13px;
    line-height: 14px;
    margin: 10px 0px;
  }

  .footer--menu--links + .footer--menu-item {
    width: 100px;
    margin-bottom: 30px;
  }

  .footer--copyright {
    font-size: 10px;
    top: initial;
  }

  .footer--copyright p {
    font-size: 10px;
  }

  .footer.stick-to-bottom {
    position: fixed !important;
  }

  .assessment-question-container .question-container .question-answer-section {
    padding-left: 15px;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-container .question-answer-section {
    padding: 0px;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-container .question-answer-section .item-ordering--row {
    display: block;
    padding: 20px;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-container .question-answer-section .item-ordering--row .image-container {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-container .question-answer-section .item-ordering--row .text-container span {
    margin: 0 auto;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-container .question-answer-section .item-ordering--row ul {
    margin: 20px auto 0 auto;
    position: relative;
    padding-top: 35px;
  }

  .assessment-question-container .question--drag-drop-ordering .question-container .question-text-container .question-answer-section .item-ordering--row ul .order-header {
    position: absolute;
    font-size: 16px;
    top: 0px;
    display: block;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-container .question-answer-section {
    padding: 0px;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-container .question-answer-section .item-matching--headers {
    display: none;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-container .question-answer-section .item-matching--row {
    display: block;
    padding: 20px;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-container .question-answer-section .item-matching--row .image-container {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-container .question-answer-section .item-matching--row .radio-options {
    margin: 20px auto 0 auto;
    width: 100%;
    justify-items: center;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-container .question-answer-section .item-matching--row .radio-options li {
    width: 50%;
    flex-direction: column;
  }

  .assessment-question-container .question--drag-drop-matching .question-container .question-text-container .question-answer-section .item-matching--row .radio-options .mobile-title {
    display: block;
    text-align: center !important;
    font-size: 16px;
    margin: 0 auto 20px auto;
  }

  #assessmentLayout .page-wrapper.assessment-test {
    padding: 0px;
    padding-top: 130px;
  }

  #assessmentLayout .page-wrapper.assessment-test nav .navbar--assessment-control {
    width: 100vw;
    flex-direction: column;
  }

  #assessmentLayout .page-wrapper.assessment-test nav .navbar--assessment-control .navbar--back {
    position: absolute;
    left: 15px;
    top: 18px;
    display: flex;
  }

  #assessmentLayout .page-wrapper.assessment-test nav .navbar--assessment-control .test-name {
    letter-spacing: 0.2px;
    font-size: 12px !important;
    padding-left: 70px;
  }

  #assessmentLayout .page-wrapper.assessment-test nav .navbar--assessment-control .button--start-assessment {
    width: 100% !important;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container h3 {
    text-align: center;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container h3 > svg {
    position: initial;
  }

  #assessmentLayout .page-wrapper.assessment-test .controls-container .core-mapping-container .v-snack:after {
    left: 40%;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel {
    padding-top: 130px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .test-name--complete {
    display: flex;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .test-name--complete > .test-name-title {
    flex-basis: 100%;
    flex-flow: row wrap;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .test-name--complete > .test-name-title button {
    flex-basis: 100%;
    margin: 0px;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel.assessment-results-panel nav .test-name-title button {
    margin-top: 15px !important;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student-list {
    padding: 0px !important;
  }

  #assessmentLayout .page-wrapper.assessment-control-panel .assessment-test-progress .assessment-test-students__student {
    padding: 30px !important;
  }

  #assessmentLayout .navbar--assessment-control {
    flex-flow: row wrap;
    height: initial !important;
    padding: 15px;
  }

  #assessmentLayout .navbar--assessment-control .test-name-form {
    width: 100%;
    margin-bottom: 15px;
  }

  #assessmentLayout .navbar--assessment-control button {
    flex-basis: 100%;
  }

  #assessmentLayout .control-panel-link-container > div {
    width: 100% !important;
  }

  #assessmentLayout .assessment-question-container .question-container .question-text-section .question-text .audio-player .button,
  #assessmentLayout .assessment-question-container .question-container .question-text-section .question-text .audio-player .asset-browser__upload-button,
  #assessmentLayout .assessment-question-container .question-container .question-text-section .question-text .audio-player .form-file__button,
  #assessmentLayout .assessment-question-container .question-container .question-text-section .question-text .audio-player .teacher-pre-assessment--add-question-button {
    padding: 0px;
    width: 35px;
    height: 35px;
  }

  #assessmentLayout .page-wrapper.student-assessment {
    padding-top: 80px;
    padding-bottom: 40px;
  }

  #assessmentLayout .student-name-modal {
    width: 100vw;
  }

  #assessmentLayout .student-name-modal .modal--content {
    max-width: initial !important;
  }

  #assessmentLayout .assessment-actions {
    padding: 0px 20px;
    margin: 0px;
    display: block;
    height: -moz-fit-content;
    height: fit-content;
  }

  #assessmentLayout .assessment-actions .button-submit-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows {
    position: initial;
    width: 75%;
    font-weight: 400;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows .assessment-control:nth-child(2) {
    font-size: 14px;
    font-weight: 400;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows button svg {
    width: 20px;
    height: 20px;
  }

  #assessmentLayout .assessment-actions .assessment-control-arrows path {
    fill: #3967fe;
  }

  .question-text-container--with-image#multi-select,
  .question-text-container .multiple-choice-image--list {
    width: 100%;
    min-width: auto;
  }

  .modal--title > .text-wrapper {
    flex-basis: 90%;
    white-space: normal;
  }

  .assessment-question-container {
    margin-top: 25px;
  }

  .control-panel-legend {
    display: none !important;
  }

  .drag-drop-matching--targets > .drop-zone > h3 {
    min-height: 90px;
    margin-bottom: 15px !important;
  }

  .presentation-container .lesson-start-instructions {
    height: 100%;
  }

  .presentation-container,
  .presentation-container .lesson-start-instructions--overlay {
    max-height: -webkit-fill-available;
    min-height: 0;
  }

  #slide-navigation-container {
    opacity: 1 !important;
    bottom: 0px !important;
  }
}

@media only screen and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
  #authLayout .auth-container {
    padding-top: 20px;
  }

  #authLayout .auth-container h2,
  #authLayout .auth-container .editable--help--h2-heading,
  #authLayout .auth-container .teacher-pre-assessment--heading,
  #authLayout .auth-container .assessment-builder--heading,
  #authLayout .auth-container .admin-homework--heading,
  #authLayout .auth-container #adminLayout .admin-lesson-intro--heading,
  #adminLayout #authLayout .auth-container .admin-lesson-intro--heading,
  #authLayout .auth-container #adminLayout .admin-assessment-intro--heading,
  #adminLayout #authLayout .auth-container .admin-assessment-intro--heading {
    margin-bottom: 12px;
  }
}

/**
    Support for SASS is deprecated as of v3.18.

    The files remain here if your build is dependent on them
    but they will not receive updates in future releases. All
    SASS variables have been translated into CSS variables, so
    migration should be quite simple if you'd like to move over.

    In v4, these files will be removed.
 */

.v-select {
  position: relative;
  font-family: inherit;
}

.v-select,
.v-select * {
  box-sizing: border-box;
}

/* KeyFrames */

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

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

/* Dropdown Default Transition */

.vs__fade-enter-active,
.vs__fade-leave-active {
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(1, 0.5, 0.8, 1);
}

.vs__fade-enter,
.vs__fade-leave-to {
  opacity: 0;
}

/** Component States */

/*
 * Disabled
 *
 * When the component is disabled, all interaction
 * should be prevented. Here we modify the bg color,
 * and change the cursor displayed on the interactive
 * components.
 */

.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__clear,
.vs--disabled .vs__search,
.vs--disabled .vs__selected,
.vs--disabled .vs__open-indicator {
  cursor: not-allowed;
  background-color: rgb(248, 248, 248);
}

/*
 *  RTL - Right to Left Support
 *
 *  Because we're using a flexbox layout, the `dir="rtl"`
 *  HTML attribute does most of the work for us by
 *  rearranging the child elements visually.
 */

.v-select[dir=rtl] .vs__actions {
  padding: 0 3px 0 6px;
}

.v-select[dir=rtl] .vs__clear {
  margin-left: 6px;
  margin-right: 0;
}

.v-select[dir=rtl] .vs__deselect {
  margin-left: 0;
  margin-right: 2px;
}

.v-select[dir=rtl] .vs__dropdown-menu {
  text-align: right;
}

/**
    Dropdown Toggle

    The dropdown toggle is the primary wrapper of the component. It
    has two direct descendants: .vs__selected-options, and .vs__actions.

    .vs__selected-options holds the .vs__selected's as well as the
    main search input.

    .vs__actions holds the clear button and dropdown toggle.
 */

.vs__dropdown-toggle {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  display: flex;
  padding: 0 0 4px 0;
  background: none;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  white-space: normal;
}

.vs__selected-options {
  display: flex;
  flex-basis: 100%;
  flex-grow: 1;
  flex-wrap: wrap;
  padding: 0 2px;
  position: relative;
}

.vs__actions {
  display: flex;
  align-items: center;
  padding: 4px 6px 0 3px;
}

/* Dropdown Toggle States */

.vs--searchable .vs__dropdown-toggle {
  cursor: text;
}

.vs--unsearchable .vs__dropdown-toggle {
  cursor: pointer;
}

.vs--open .vs__dropdown-toggle {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.vs__open-indicator {
  fill: rgba(60, 60, 60, 0.5);
  transform: scale(1);
  transition: transform 150ms cubic-bezier(1, -0.115, 0.975, 0.855);
  transition-timing-function: cubic-bezier(1, -0.115, 0.975, 0.855);
}

.vs--open .vs__open-indicator {
  transform: rotate(180deg) scale(1);
}

.vs--loading .vs__open-indicator {
  opacity: 0;
}

/* Clear Button */

.vs__clear {
  fill: rgba(60, 60, 60, 0.5);
  padding: 0;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  margin-right: 8px;
}

/* Dropdown Menu */

.vs__dropdown-menu {
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  z-index: 1000;
  padding: 5px 0;
  margin: 0;
  width: 100%;
  max-height: 350px;
  min-width: 160px;
  overflow-y: auto;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-top-style: none;
  border-radius: 0 0 4px 4px;
  text-align: left;
  list-style: none;
  background: #fff;
}

.vs__no-options {
  text-align: center;
}

/* List Items */

.vs__dropdown-option {
  line-height: 1.42857143;
  /* Normalize line height */
  display: block;
  padding: 3px 20px;
  clear: both;
  color: #333;
  /* Overrides most CSS frameworks */
  white-space: nowrap;
  cursor: pointer;
}

.vs__dropdown-option--highlight {
  background: #5897fb;
  color: #fff;
}

.vs__dropdown-option--deselect {
  background: #fb5858;
  color: #fff;
}

.vs__dropdown-option--disabled {
  background: inherit;
  color: rgba(60, 60, 60, 0.5);
  cursor: inherit;
}

/* Selected Tags */

.vs__selected {
  display: flex;
  align-items: center;
  background-color: #f0f0f0;
  border: 1px solid rgba(60, 60, 60, 0.26);
  border-radius: 4px;
  color: #333;
  line-height: 1.4;
  margin: 4px 2px 0px 2px;
  padding: 0 0.25em;
  z-index: 0;
}

.vs__deselect {
  display: inline-flex;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  margin-left: 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: none;
  fill: rgba(60, 60, 60, 0.5);
  text-shadow: 0 1px 0 #fff;
}

/* States */

.vs--single .vs__selected {
  background-color: transparent;
  border-color: transparent;
}

.vs--single.vs--open .vs__selected,
.vs--single.vs--loading .vs__selected {
  position: absolute;
  opacity: 0.4;
}

.vs--single.vs--searching .vs__selected {
  display: none;
}

/* Search Input */

/**
 * Super weird bug... If this declaration is grouped
 * below, the cancel button will still appear in chrome.
 * If it's up here on it's own, it'll hide it.
 */

.vs__search::-webkit-search-cancel-button {
  display: none;
}

.vs__search::-webkit-search-decoration,
.vs__search::-webkit-search-results-button,
.vs__search::-webkit-search-results-decoration,
.vs__search::-ms-clear {
  display: none;
}

.vs__search,
.vs__search:focus {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  line-height: 1.4;
  font-size: 1em;
  border: 1px solid transparent;
  border-left: none;
  outline: none;
  margin: 4px 0 0 0;
  padding: 0 7px;
  background: none;
  box-shadow: none;
  width: 0;
  max-width: 100%;
  flex-grow: 1;
  z-index: 1;
}

.vs__search::-moz-placeholder {
  color: inherit;
}

.vs__search::placeholder {
  color: inherit;
}

/**
    States
 */

.vs--unsearchable .vs__search {
  opacity: 1;
}

.vs--unsearchable:not(.vs--disabled) .vs__search {
  cursor: pointer;
}

.vs--single.vs--searching:not(.vs--open):not(.vs--loading) .vs__search {
  opacity: 0.2;
}

/* Loading Spinner */

.vs__spinner {
  align-self: center;
  opacity: 0;
  font-size: 5px;
  text-indent: -9999em;
  overflow: hidden;
  border-top: 0.9em solid rgba(100, 100, 100, 0.1);
  border-right: 0.9em solid rgba(100, 100, 100, 0.1);
  border-bottom: 0.9em solid rgba(100, 100, 100, 0.1);
  border-left: 0.9em solid rgba(60, 60, 60, 0.45);
  transform: translateZ(0);
  animation: vSelectSpinner 1.1s infinite linear;
  transition: opacity 0.1s;
}

.vs__spinner,
.vs__spinner:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}

/* Loading Spinner States */

.vs--loading .vs__spinner {
  opacity: 1;
}