*,
*:before,
*:after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
  touch-action: none;
  user-drag: none;
  -ms-content-zooming: none;
  color: #333;
  font-size: 100%;
}
.app-main {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
button {
  background: none;
  outline: none;
  padding: 0;
  margin: 0;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: normal;
  overflow: visible;
  cursor: pointer;
}
.hidden {
  display: none;
}
.light-on-dark {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.soft-shadow {
  box-shadow: 0 0 300px rgba(0, 0, 0, 0.25);
}
#canvas {
  flex: 1 0;
  background-color: #f8f8f8;
  outline: none;
}
/* Styling for branch/hash identifier element. */
.alpha-tag,
.beta-tag {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 0.3em;
  right: 0.3em;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  background-color: #551A8B;
  color: #fff;
  opacity: 0.75;
  font-size: 1.35em;
  font-weight: 600;
  text-align: right;
}
.alpha-tag {
  background-color: #551a8b;
}
/* -----
Toolbar
----- */
#toolbar {
  order: 3;
  flex: 0 0 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: #0081c6;
  margin: 0;
  padding: 0;
}
#toolbar.top {
  order: 1;
}
#toolbar.top .popup {
  bottom: auto;
  top: 64px;
}
#toolbar.top .popup::after {
  top: -24px;
  background: url(images/popup-tail.0db73b9a40e84df2129fa18c260682ff.svg) no-repeat;
  content: '';
}
#toolbar.top .popup .popup-body {
  border-radius: 10px;
}
#toolbar.top .popup.tail-right .popup-body {
  border-top-right-radius: 0;
}
#toolbar.top .popup.tail-right::after {
  background-position: 24px 0;
  right: 48px;
}
#toolbar.top .popup.tail-left .popup-body {
  border-top-left-radius: 0;
}
#toolbar.top .popup.tail-left::after {
  background-position: -24px 0;
  left: 48px;
}
#toolbar .toolbar-spacer {
  display: flex;
  flex-grow: 1;
}
#toolbar .divider {
  height: 48px;
  -ms-flex: 0 0 16px;
  flex: 0 0 16px;
  background-image: url(images/divider.02bc31187a2f02ac82d5561446a29559.png);
  background-repeat: no-repeat;
  background-position: center;
}
#toolbar .button-group {
  position: relative;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#toolbar .popup {
  bottom: 64px;
}
#toolbar .toolbar-button {
  height: 48px;
  width: 64px;
  background-repeat: no-repeat;
  background-position: center;
}
#toolbar .toolbar-button.narrow {
  width: 40px;
}
#toolbar .toolbar-button.wide {
  width: 96px;
}
#toolbar .toolbar-button.disabled,
#toolbar .toolbar-button:active {
  opacity: 0.5;
}
.text-button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #629d34;
  color: white;
  padding: 0.8em 0;
  font-size: 0.825em;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.025em;
  word-spacing: 0.1em;
  white-space: nowrap;
}
.text-button:hover {
  opacity: 0.8;
}
.text-button:active {
  background-color: #4a7727;
}
.text-button:disabled {
  background-color: #b2b2b2;
  cursor: default;
}
.text-button:disabled:hover {
  background-color: #b2b2b2;
  opacity: 1;
}
.button-field {
  display: flex;
  flex-direction: row;
}
.button-field input {
  border: 1px solid #CCC;
  border-right: none;
  border-radius: 3px 0 0 3px;
  box-shadow: inset 2px 2px 5px #CCC;
  padding: 5px;
  font-size: 0.9em;
  margin: 0;
  flex-grow: 1;
}
.button-field button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
/* -----
Dialog
----- */
/* jquery dialogs */
#dialog-modal {
  display: none;
}
/* background overlay */
.ui-front {
  z-index: 101;
  /* same as toolbar or higher */
}
.ui-widget-overlay {
  background: none repeat scroll 0 0 gray;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* our app's generic dialog */
.ui-dialog.alert {
  padding: 0;
  background-image: none;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  outline: none;
}
.ui-dialog.alert .ui-dialog-titlebar {
  padding-top: 20px;
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #000000;
  background: none;
  border: none;
  text-align: center;
  font-size: 16px;
}
.ui-dialog.alert .ui-dialog-titlebar .ui-dialog-title.no-title {
  /* Fix to JQuery UI 1.12 update where empty titles
      are replaced with an nbsp;.
      Manually hiding to prevent extra padding.
   */
  display: none;
}
.ui-dialog.alert .ui-dialog-titlebar-close {
  display: none;
}
.ui-dialog.alert .ui-dialog-content {
  font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  padding: 5px 20px 20px;
  line-height: 1.2em;
}
.ui-dialog.alert .ui-dialog-buttonpane {
  margin: 0;
  padding: 0;
}
.ui-dialog.alert .ui-dialog-buttonset {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-top: solid 1px #BBB;
}
.ui-dialog.alert .ui-button {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 35px;
  background: none;
  border: none;
  color: #1C81C4;
  /*font-size: 14px;*/
  /*text-transform: uppercase;*/
}
.ui-dialog.alert.confirm .ui-button {
  width: 50%;
}
.ui-dialog.alert.confirm .ui-button:first-child {
  border-right: solid 1px #BBB;
}
.ui-dialog.alert .ui-button:hover {
  background-color: #F7F7F7;
}
.ui-dialog.alert .ui-button:active {
  background-color: #DDD;
}
.ui-dialog.alert.has-close button.ui-dialog-titlebar-close {
  display: block;
  position: absolute;
  color: transparent;
  top: 0;
  right: 0;
  border-radius: 18px;
  margin: 5px;
  width: 36px;
  background: black url(images/icon-trash.cd1cc38719bf3ab0f2d180bc12931bfe.png) no-repeat center;
}
.ui-dialog.alert.has-close button.ui-dialog-titlebar-close:hover {
  background-color: darkgrey;
}
#templates {
  display: none;
}
/* -----
  Modal styles
----- */
.modal-backdrop {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .modal-backdrop {
    height: 200vh;
    width: 200vw;
    transform: translateX(-50%), translateY(-50%);
  }
}
.modal {
  z-index: 100;
}
.modal.dark-backdrop .modal-backdrop {
  background-color: rgba(108, 118, 128, 0.5);
}
.modal.popup {
  position: absolute;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .modal.popup {
    transform: translateX(-50%);
    left: 50%;
  }
}
.modal.popup::after {
  content: '';
  position: absolute;
  bottom: -24px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  height: 24px;
  width: 48px;
  background: url(images/popup-tail.0db73b9a40e84df2129fa18c260682ff.svg) no-repeat;
}
.modal.popup.tail-right .popup-body {
  transform: translateX(-50%);
  border-bottom-right-radius: 0;
}
.modal.popup.tail-right::after {
  background-position: 0 0;
  top: 0;
  bottom: 0;
  right: -36px;
  left: auto;
  margin-top: auto;
  margin-bottom: auto;
  transform: rotate(-90deg);
}
.modal.popup.tail-left .popup-body {
  transform: translateX(50%);
  border-bottom-left-radius: 0;
}
.modal.popup.tail-left::after {
  background-position: 0 0;
  top: 0;
  bottom: 0;
  right: auto;
  left: -36px;
  margin-top: auto;
  margin-bottom: auto;
  transform: rotate(90deg);
}
.modal.dialog {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.modal.dialog.hidden {
  display: none;
}
.modal.dialog .modal-box {
  top: -24px;
}
.modal-box {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.modal-box .content {
  background: white;
}
.modal-box .header {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 0 15px;
  background: #0081c6;
  color: white;
  height: 46px;
  font-weight: 600;
  font-size: 1.1em;
}
.modal-box .header .close-button {
  height: 46px;
  width: 46px;
  background: url(images/close.a8895026f3f042c443ecd3f9feaa346a.svg) no-repeat center;
  background-size: 40%;
}
.modal-box .header .close-button.close-dark {
  background-image: url(images/close-dark.8854b0fd2d715a7f7d80363ed275a34e.svg);
}
.modal-box .header .close-button:active {
  opacity: 0.5;
}
.modal.alert .modal-box {
  display: flex;
  flex-flow: column nowrap;
  width: 300px;
  text-align: center;
  position: relative;
  top: -24px;
}
.modal.alert .title {
  margin: 20px 20px 0;
  font-weight: 600;
}
.modal.alert .message {
  margin: 0.5em 20px 20px;
}
.modal.alert .button-container {
  display: flex;
  flex-flow: row wrap;
}
.modal.alert .button-container button {
  color: #1C81C4;
  flex: 1 0 100%;
  padding: 0.5em 0;
  border-top: 1px solid #BBB;
}
.modal.alert .button-container button:nth-last-child(-n + 2):first-child,
.modal.alert .button-container button:nth-last-child(-n + 2):first-child ~ button {
  flex: 1 0 40%;
}
.modal.alert .button-container button:first-child:nth-last-child(2) {
  border-right: 1px solid #BBB;
}
.modal.alert .button-container button:hover {
  background-color: #e6e6e6;
}
.modal.alert .button-container button:hover:active {
  background-color: #cccccc;
}
.modal.alert .button-container button.default {
  background-color: #afd8ee;
  color: #0a609a;
  animation: pulse-alert-default 3s ease infinite;
}
.modal.alert .button-container button.default:hover {
  background-color: #9aceea;
  animation: none;
}
.modal.alert .button-container button.default:hover:active {
  background-color: #85c3e5;
}
@keyframes pulse-alert-default {
  0% {
    background-color: #afd8ee;
  }
  50% {
    background-color: #daeef9;
  }
  100% {
    background-color: #afd8ee;
  }
}
.modal.popup {
  user-select: text;
  -moz-user-select: text;
  -webkit-user-select: text;
  -ms-user-select: text;
  -webkit-user-drag: auto;
}
.modal.popup .content {
  background-color: white;
  padding: 15px;
  display: flex;
  flex-direction: column;
}
.modal.popup .description {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  margin-bottom: 0.75em;
}
.modal.popup .description .description-icon {
  height: 24px;
  width: 24px;
  margin-right: 0.5em;
}
.modal.popup .description .description-icon.short {
  height: 20px;
}
.modal.popup .text-button {
  margin: 0 5px;
  padding-left: 0;
  padding-right: 0;
  flex-basis: 0;
  flex-grow: 1;
}
.modal.popup input {
  height: 100%;
  padding: 0 0.5em;
  border: 1px solid #CCC;
  border-radius: 3px;
  box-shadow: inset 2px 2px 5px #CCC;
  margin: 0;
}
.modal.popup .modal-box {
  position: relative;
}
.modal.popup .popup-divider {
  margin: 1em -15px;
  flex-grow: 0;
  flex-basis: 2px;
  background: #CCC;
}
#save-popup {
  width: 380px;
}
#save-popup .modal-box {
  right: 130px;
}
#save-popup #share-image-ui-container,
#save-popup #share-activity-ui-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#save-popup .share-image-button-container {
  display: flex;
  flex-flow: row nowrap;
  width: calc(100% + 10px);
  margin: 0 -5px;
}
#save-popup #share-link-ui-container input {
  width: 240px;
}
#save-popup #link-copy {
  margin: 0;
  padding-left: 1.5em;
  padding-right: 1.5em;
}
#copy-container {
  position: relative;
  overflow: hidden;
  padding: 0;
}
#copy-container #image-copy {
  width: 100%;
  height: 100%;
}
html.disable-copy-image #copy-container {
  background-color: #b2b2b2;
}
#share-activity-ui-container {
  display: flex;
  flex-flow: row nowrap;
  width: calc(100% + 10px);
  margin: 0 -5px;
}
#share-activity-ui-container .input-container,
#share-activity-ui-container .text-button {
  margin: 0 5px;
  flex: 1 0 0;
}
#share-activity-ui-container input {
  font-family: Monaco, monospace;
  font-size: 1em;
  width: 100%;
}
.submit-container {
  display: flex;
  justify-content: space-between;
}
.submit-container .field-container {
  width: 100%;
}
.submit-container .input-container {
  margin: 0 5px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  overflow: hidden;
}
.submit-container .input-container input {
  border: 1px solid #CCC;
  border-radius: 3px;
  box-shadow: inset 2px 2px 5px #CCC;
  padding: 5px;
  font-size: 4em;
  font-weight: 400;
  margin: 0;
  flex-grow: 1;
  letter-spacing: -0.01em;
}
.submit-container .text-button {
  padding: 0.75em 1.2em;
  font-size: 1.4em;
}
/* Default styling: show desktop instructions. */
#copy-image-modal .copy-image-instructions .mobile {
  display: none;
}
/*
 * If touch is detected, hide desktop instructions and show mobileinstructions.
 */
.touch #copy-image-modal .desktop {
  display: none;
}
.touch #copy-image-modal .mobile {
  display: block;
}
#copy-image-modal {
  z-index: 110;
}
#copy-image-modal .modal-box {
  position: relative;
  top: -24px;
}
#copy-image-modal .content {
  padding: 20px;
  display: flex;
  flex-flow: row nowrap;
}
#copy-image-modal .content .copy-image-instructions {
  width: 10em;
  margin-right: 20px;
}
#copy-image-modal .content .copy-image-instructions p:first-child {
  margin-top: 0;
}
#copy-image-modal .content .copy-image-instructions .sub-head {
  font-size: 0.9em;
}
#copy-image-modal .content .copy-image-source-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
}
#copy-image-modal .content .copy-image-source-container .copy-image-source {
  max-width: 50vw;
  max-height: 50vh;
  box-shadow: 0 5px 10px 0 grey;
}
#activity-display .header {
  border-bottom: solid 2px #CCC;
  background-color: white;
  color: #333;
  justify-content: center;
  padding: 0 15px;
}
#activity-display .header .close-button {
  /* Give the title full width to center itself. */
  position: absolute;
  right: 0;
  top: 0;
}
#activity-display .content {
  padding: 5px 10px 10px 10px;
}
#activity-display .content .description {
  font-size: 10pt;
  font-weight: 500;
  text-align: center;
}
#activity-display .content #activity-display-code {
  padding: 15px 25px;
  font-family: Monaco, monospace;
  font-size: 6em;
  text-align: center;
  text-transform: uppercase;
}
#activity-display .submit-glyph-inline {
  height: 1.2em;
  width: 24px;
  vertical-align: bottom;
}
#submit-activity-submit-box .header .error-text {
  display: none;
}
#submit-activity-submit-box.show-error .header {
  background: #ac312e;
}
#submit-activity-submit-box.show-error .header span {
  display: none;
}
#submit-activity-submit-box.show-error .header .error-text {
  display: inline;
}
#submit-activity-submit-box.show-error input {
  color: #ac312e;
}
#submit-activity-ui-container {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#submit-activity-ui-container .submit-icon {
  width: 48px;
}
#submit-activity-ui-container .input-container {
  margin: 0 15px;
}
#submit-activity-ui-container .input-container input {
  font-family: Monaco, monospace;
  text-transform: uppercase;
  padding-left: 15px;
  padding-right: 15px;
  width: 6em;
}
#submit-activity-ui-container #submit-activity-target-background {
  box-shadow: none;
  background: white;
  color: grey;
}
#submit-activity-ui-container #submit-activity-target {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
}
/* --- End Modal styles --- */
.mlc-framework--equation-tools-input input {
  width: 414px;
  height: 44px;
  font: 300 32px Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 2px 4px;
}
.mlc-framework--text-tools-textarea textarea {
  width: 414px;
  height: 202px;
  font: 300 30px Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.1;
  padding: 2px 4px;
  resize: none;
  overflow: auto;
}
.infopage {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 200;
  background-color: #cce0ff;
  /* hide about initially */
}
.infopage .titlebar {
  display: flex;
  position: absolute;
  width: 100%;
  z-index: 10;
  height: 50px;
  background-color: #0287cf;
  color: white;
  text-align: center;
  font-weight: bold;
  line-height: 50px;
}
.infopage .sectionwrapper {
  display: flex;
  justify-content: center;
  text-align: center;
  line-height: 13px;
  margin: auto;
}
.infopage .title {
  display: inline-block;
  color: white;
  font-size: 13px;
  cursor: pointer;
  margin: 5px 0;
  padding: 6px 5px;
  text-align: center;
  width: 100px;
  border: solid 1px white;
}
.infopage .title:first-child {
  border-bottom-left-radius: 5px;
  border-right: medium none;
  border-top-left-radius: 5px;
}
.infopage .title:last-child {
  border-bottom-right-radius: 5px;
  border-right: 1px solid white;
  border-top-right-radius: 5px;
}
.infopage .title.selected {
  color: #0287CF;
  background-color: white;
}
.infopage .close {
  display: inline-block;
}
.infopage .close {
  float: right;
  cursor: pointer;
  padding-right: 15px;
  font-weight: normal;
}
.infopage .infowrapper {
  height: 100%;
}
.infopage .contents-wrapper {
  height: 100%;
  background-color: #cce0ff;
  overflow-y: scroll;
  overflow-x: hidden;
}
.infopage .contents {
  padding-top: 50px;
  margin: 0 10px 10px;
}
.infopage .contents.about {
  display: none;
}
.infopage .box {
  background-color: white;
  border-radius: 10px;
  margin: 10px auto;
  max-width: 810px;
  min-width: 500px;
  padding: 30px;
}
.infopage .infohead {
  color: #0081c6;
  font: bold 36px Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  text-align: center;
}
.infopage .infohead.howto {
  margin-bottom: 1em;
}
.infopage .infohead.rule-line {
  border-top: 4px solid #a4dfff;
  margin: 30px -30px 0;
  padding-top: 30px;
}
.infopage .info-subhead {
  color: #0081c6;
  font: bold 28px Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0 0 20px;
  text-align: left;
}
.infopage .info-subhead-description {
  color: #0081c6;
  font: 18px Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  margin: -15px 0 30px;
  text-align: left;
}
.infopage .infobody,
.infopage .box ul,
.infopage .info-buttons p {
  color: #666;
  font: 18px/1.4em Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.infopage .infolink {
  text-align: center;
  font-size: 24px;
  padding-bottom: 10px;
}
.infopage img {
  text-decoration: none;
  border: 0px;
}
.infopage .info_illus {
  margin: 40px 0;
  text-align: center;
}
.infopage .info_illus img {
  max-width: 100%;
}
.infopage .infoversion {
  font-size: 11pt;
  text-align: center;
  color: #666;
}
.infopage a.about-link {
  color: #0287CF;
  display: block;
  font-weight: bold;
  text-align: center;
  transition: opacity 0.2s ease 0s;
  width: 100%;
}
.infopage a.about-link:hover {
  opacity: 0.5;
}
#toolbar-shade {
  display: none;
  cursor: pointer;
  position: fixed;
  height: 49px;
  width: 100%;
  bottom: 0px;
  background-color: rgba(128, 128, 128, 0.3);
}
#toolbar-shade.top {
  top: 0px;
}
#toolbar-shade.show {
  display: block;
}
#loading-spinner {
  position: fixed;
  left: 50%;
  top: 50%;
}
#canvas {
  order: 2;
  background-image: url(images/canvas-pattern.896b5eba71e6a91a6e0ec77db2e61d92.png);
  -webkit-tap-highlight-color: transparent;
}
#canvas.draw-cursor:not(.pan-cursor) {
  cursor: url(images/cursor-pen.0b17119d63b2cfbafc7dbf35237eb0ac.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='BLACK']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-black.ce126635a6d4f9077f92f6321aa13cb8.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='BLUE']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-blue.b3f587ef7da1838c24fa7ac75fb7755b.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='GREEN']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-green.6949408f0884124a8ba60d17dfc5f4fe.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='YELLOW']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-yellow.e13797f060a36f9320b95b25bb7e652f.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='ORANGE']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-orange.28db2f9b823a2cb61d96260bba054c39.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='RED']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-red.32160fe5e8f18bece26dfeb35558b341.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='PURPLE']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-purple.826ffa372880a0d83a294d1be405f4a4.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='BROWN']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-brown.22fab077b649e713b0c2064d1636e025.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.draw-cursor[data-draw-color='GREY']:not(.pan-cursor) {
  cursor: url(images/cursor-pen-grey.6bb5ed0f602137b5cc380a6c585b975a.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.erase-cursor:not(.pan-cursor) {
  cursor: url(images/eraser-transparent.7aff2caa355213dd627839573ffe82e1.cur), crosshair !important;
  /* !important gets around bugginess with EaselJS cursor setting and IE */
}
#canvas.pan-cursor {
  cursor: grab;
}
#canvas.pan-cursor:active {
  cursor: grabbing;
}
/* -----
Toolbar
----- */
#toolbar.author-mode {
  background: url(images/author-stripe.f925314e02508ec31c03d619f961447b.png);
}
/* Toolbar above canvas */
#toolbar.top {
  order: 1;
}
/* -----
Toolbar Structure
----- */
#toolbar .button-container {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
#toolbar #resource-container {
  position: relative;
  flex-basis: 48px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #dddddd;
}
#toolbar #resource-container.hidden {
  display: none;
}
#toolbar #help-container {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
#toolbar .popup {
  margin-top: 3px;
  margin-bottom: 3px;
  position: absolute;
}
#toolbar .popup .header {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  justify-content: space-between;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 0 0 15px;
  background: #0081c6;
  color: #fff;
  height: 46px;
  font-weight: 600;
  font-size: 1.1em;
}
#toolbar .popup .popup-body {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
#toolbar .popup .modal-backdrop {
  background-color: rgba(108, 118, 128, 0.5);
}
#toolbar .divider {
  height: 48px;
  flex: 0 0 2px;
  background-image: url(images/divider.083581a00abf9c15bd7d1c66b5952a7d.png);
  background-repeat: no-repeat;
  background-position: center;
}
#toolbar .divider.dark {
  background-image: none;
  background-color: #b2b2b2;
}
#toolbar .divider.no-line {
  background: none;
}
#toolbar .button-group {
  height: 48px;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
#pagelist {
  display: flex;
  flex-basis: auto;
  flex-flow: row;
  justify-content: center;
  padding: 0 10px;
  background-color: #dddddd;
  border-bottom-left-radius: 10px;
}
#toolbar.top #pagelist {
  border-bottom-left-radius: 0;
  border-top-left-radius: 10px;
}
/* -----
Toolbar Buttons
----- */
#toolbar .toolbar-button {
  height: 48px;
  flex-basis: 52px;
  flex-shrink: 1;
  flex-grow: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  min-width: 52px;
}
#toolbar .toolbar-button .btn-img {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-clip: border-box;
  flex-shrink: 1;
  flex-grow: 0;
  height: 32px;
  flex-basis: 52px;
}
#toolbar .toolbar-button.wide {
  flex-basis: 68px;
}
#toolbar .toolbar-button.wide .btn-img {
  flex-basis: 68px;
}
#toolbar .toolbar-button:active {
  opacity: 0.5;
}
#toolbar .toolbar-button.disabled {
  opacity: 0.5;
  cursor: default;
}
#curriculum-finder .btn-img {
  background-image: url(images/finder.71d3dc7c2d750083516bd417d7bf5a9e.png);
}
#language-toggle .btn-img {
  background-image: url(images/language-es.871922e584d080171a99b38b96cff0c0.png);
}
#language-toggle.es .btn-img {
  background-image: url(images/language-en.46757cfe9f02cc501e9fc3fcccb17e70.png);
}
#toggle-tray .btn-img {
  background-image: url(images/tray-close.adff3ca78cbfa9b2b107d3918e700360.png);
}
#toggle-tray.tray-open .btn-img {
  background-image: url(images/tray-open.fb6613d874ab604638e9607f42c2c72e.png);
}
#flip-toolbar .btn-img {
  background-image: url(images/move-toolbar-up.c8474fe9dd0de1da8a75df09afb07b9e.png);
}
#toolbar.top #flip-toolbar .btn-img {
  background-image: url(images/move-toolbar-down.523527e6a04b6d8a7b4da068eba2b219.png);
}
#zoom .btn-img {
  background-image: url(images/zoom-out.a1b03e02946651be50740bd4a3cfb9a5.png);
}
#zoom.zoomed-out .btn-img {
  background-image: url(images/zoom-in.e1f64e037c6fd0aea7a0c5d06603f281.png);
}
#shade .btn-img {
  background-image: url(images/shade.9f8144acf82ca74a1ae1a165b3934e63.png);
}
#draw .btn-img {
  background-image: url(images/draw-tools.947e0316a8474c175c53002ad58bf06a.png);
}
#draw.selected .btn-img {
  background-image: url(images/draw-tools-active.071cb79d1d1419791e61c17ba33cc9a5.png);
}
#text .btn-img {
  background-image: url(images/text-tool.d229e7b14330fd5e4488596a45f3e840.png);
}
#equation .btn-img {
  background-image: url(images/equation-tool.26d58db445ac4c2832c0b4e4f33f17dc.png);
}
#delete .btn-img {
  background-image: url(images/delete.632ad8ffb9b8903acf9ddc8bdacc0187.png);
}
#startover .btn-img {
  background-image: url(images/start-over.30990032b0d783d37991e7311e8776b1.png);
}
#resource .btn-img {
  background-image: url(images/resource-links.f5f5d1a635428f6f08bc0d129b43c83a.png);
}
#help .btn-img {
  background-image: url(images/info.5364b6bac2fe31785f555ec5dc9a086a.png);
}
#toolbar #resource .btn-img {
  height: 42px;
}
#save.toolbar-button {
  color: white;
  flex-basis: 80px;
}
#save.toolbar-button.saving {
  opacity: 0.5;
  cursor: default;
}
#save.toolbar-button.saved {
  opacity: 0.5;
  cursor: default;
}
#pagelist .page-button {
  height: 48px;
  flex-basis: auto;
  flex-grow: 1;
  min-width: 29px;
  max-width: 36px;
  background-image: url(images/page.685a632e6cd4251f7f74aca4ec4d6db3.png);
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
#pagelist .page-button:active {
  opacity: 0.5;
}
#pagelist .page-button.selected {
  background-image: url(images/page-active.85577291e90cdb380f737f2a4c2b0c7f.png);
}
/* -----
Resource Link popup
----- */
#help-popup {
  width: 820px;
}
#help-popup .popup-body {
  left: 360px;
}
#help-popup .content {
  width: auto;
  overflow-y: auto;
  padding: 14px;
  padding-bottom: 20px;
  font-size: 14px;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
}
#help-popup .content #tutorial-icon {
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
}
#help-popup .content #toolbar-help-div {
  margin-bottom: 8px;
}
#help-popup .content p {
  margin: 0;
}
#help-popup .content a {
  font-weight: 600;
}
#help-popup .content a:link {
  text-decoration: none;
  color: #003e7e;
}
#help-popup .content a:visited {
  text-decoration: inherit;
  color: #003e7e;
}
#help-popup .content #tutorial-button {
  cursor: pointer;
  border: 1px solid #003e7e;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
}
#help-popup .content #tutorial-button:hover {
  background-color: #ddd;
}
#help-popup .content #tutorial-button:active {
  background-color: #ccc;
}
.link-button {
  cursor: pointer;
  font-size: 1.4em;
  background-color: #0081c6;
  color: white;
  padding: 5px 12px;
  border-radius: 5px;
}
.link-button:active {
  opacity: 0.5;
}
#toolbar #resource-popup {
  width: 320px;
}
#toolbar #resource-popup .popup-body {
  transform: translateX(-50%);
  border-bottom-right-radius: 0;
}
#toolbar #resource-popup .resource-link {
  display: flex;
  flex-flow: column nowrap;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #f2f2f2;
}
#toolbar #resource-popup .resource-link .resource-header {
  display: flex;
  flex-flow: row nowrap;
  margin-bottom: 5px;
  align-items: center;
}
#toolbar #resource-popup .resource-link .resource-header .title {
  font-weight: bold;
  font-size: 1em;
}
#toolbar #resource-popup .resource-link .resource-header .preview {
  background-color: white;
  border-bottom: 1px solid #AAAAAA;
  box-shadow: 0 1px 2px #888888;
  padding: 3px;
  max-width: 100px;
  max-height: 100px;
  margin-right: 10px;
}
#toolbar #resource-popup .resource-link .resource-header .preview[src=""] {
  display: none;
}
#toolbar #resource-popup .resource-link .link {
  margin-top: 8px;
  align-self: flex-end;
}
#toolbar #resource-popup .resource-link .link[href=""] {
  display: none;
}
#toolbar #resource-popup .resource-link .description {
  margin-bottom: 0;
  margin-top: 0.5em;
}
.howto-toolbar table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5em;
}
.howto-toolbar table td {
  border: 1px solid #ddd;
  padding: 6px;
  text-align: center;
}
.howto-toolbar table td.icon,
.howto-toolbar table th.icon {
  background-color: #0081c6;
  text-align: center;
  color: white;
  width: 100px;
  height: 45px;
}
.howto-toolbar table td.icon.side,
.howto-toolbar table th.icon.side {
  background-color: #dddddd;
  border-color: white;
  padding: 0;
}
.howto-toolbar table td.tool {
  font-weight: bold;
}
.howto-toolbar table td.icon-description,
.howto-toolbar table th.icon-description {
  text-align: left;
  padding-left: 1em;
}
.howto-toolbar table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #0273af;
  color: white;
}
.howto-toolbar table img {
  margin: 0;
  vertical-align: middle;
  height: 32px;
}
.howto-toolbar table img.resource {
  height: 42px;
}
.howto-toolbar .keyboard-support-table {
  margin-bottom: 1em;
}
.howto-toolbar .keyboard-support-table td.tool {
  text-align: left;
  padding-left: 1em;
}
.howto-toolbar table.standalone {
  display: none;
}
#version {
  color: white;
}
/* jquery dialogs */
#dialog-modal {
  display: none;
}
/* background overlay */
.ui-front {
  z-index: 101;
  /* same as toolbar or higher */
}
.ui-widget-overlay {
  background: none repeat scroll 0 0 gray;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* our app's generic dialog */
.ui-dialog.alert {
  padding: 0;
  background-image: none;
  background-color: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  outline: none;
}
.ui-dialog.alert .ui-dialog-titlebar {
  padding-top: 20px;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  color: #000000;
  background: none;
  border: none;
  text-align: center;
  font-size: 16px;
}
.ui-dialog.alert .ui-dialog-titlebar-close {
  display: none;
}
.ui-dialog.alert .ui-dialog-content {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 16px;
  text-align: center;
  padding: 5px 20px 20px;
  line-height: 1.2em;
}
.ui-dialog.alert .ui-dialog-buttonpane {
  margin: 0;
  padding: 0;
}
.ui-dialog.alert .ui-dialog-buttonset {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border-top: solid 1px #BBB;
}
.ui-dialog.alert .ui-button {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 35px;
  background: none;
  border: none;
  color: #1C81C4;
  font-size: 14px;
  text-transform: uppercase;
}
.ui-dialog.alert.confirm .ui-button {
  width: 50%;
}
.ui-dialog.alert.confirm .ui-button:first-child {
  border-right: solid 1px #BBB;
}
.ui-dialog.alert .ui-button:hover {
  background-color: #F7F7F7;
}
.ui-dialog.alert .ui-button:active {
  background-color: #DDD;
}
.ui-dialog .ui-dialog-title {
  white-space: normal;
}
.mlc-framework--equation-tools-input,
.mlc-framework--text-tools-textarea {
  margin-left: 0 !important;
}
#update-warning-startover-image {
  display: inline-block;
  background-image: url(images/alert-startover-icon.b546a0a1f7658c2f676365e429a5d3ad.png);
  height: 48px;
  width: 98px;
}
/**
 * Decoupled style modifications.
 */
.is-decoupled #curriculum-finder {
  display: none;
}
.is-decoupled #startover + .divider {
  display: none;
}
.is-decoupled #save.toolbar-button {
  display: none;
}
.is-decoupled .howto-toolbar table.standalone {
  display: table;
}
.is-decoupled .howto-toolbar table.general {
  display: none;
}
.is-decoupled #tutorial-link {
  display: none;
}