/**
 * src/shared/styles/lighthouse-runtime.css
 *
 * Styles specific to the lighthouse-runtime package itself (error states, stubs).
 * These are NOT from authoring — they are local to this repo.
 * All selectors scoped to .lighthouse-runtime by PostCSS.
 */

/* Error state — rendered by Canvas-level catch handler (AR12) */
.lh-widget-error {
  padding: 1rem;
  border: 1px solid #e53e3e;
  background: #fff5f5;
  color: #c53030;
  font-family: sans-serif;
  font-size: 0.875rem;
  border-radius: 4px;
}

/* Development scaffold stub indicator (Story 1.1 — removed in Epic 2) */
.lh-widget-stub {
  padding: 1rem;
  border: 2px dashed #a0aec0;
  background: #f7fafc;
  color: #4a5568;
  font-family: monospace;
  font-size: 0.8125rem;
  border-radius: 4px;
}

/* When a legacy widget opens a floating MCE editor, keep the host in layout
   for sizing/positioning but stop painting it behind the overlay. */
.lh-mce-host-active {
  visibility: hidden;
}

/* Keep DataTable controls constrained to their own cell box. The legacy vendor
   CSS does not size these controls explicitly, which lets browser default form
   control widths overflow into neighbouring cells in Storybook/runtime. */
.dataTableTable th input,
.dataTableTable td textarea {
  display: block;
  width: 100%;
  height: 100%;
}

/*! normalize.css v2.0.1 | MIT License | git.io/normalize */

/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects `block` display not defined in IE 8/9.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block;
}

/*
 * Corrects `inline-block` display not defined in IE 8/9.
 */

audio,
canvas,
video {
    display: inline-block;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
    display: none;
    height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE 8/9.
 */

[hidden] {
    display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

/*
 * 1. Sets default font family to sans-serif.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
    font-family: sans-serif; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Removes default margin.
 */

body {
    margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */

/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */

a:focus, a:focus-visible {
    outline: 2px solid black;
    outline-offset: 1px;
}

a:focus:not(:focus-visible) {
    outline: none;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
    outline: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/*
 * Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
 * Safari 5, and Chrome.
 */

h1 {
    font-size: 2em;
}

/*
 * Addresses styling not present in IE 8/9, Safari 5, and Chrome.
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */

b,
strong {
    font-weight: bold;
}

/*
 * Addresses styling not present in Safari 5 and Chrome.
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE 8/9.
 */

mark {
    background: #ff0;
    color: #000;
}


/*
 * Corrects font family set oddly in Safari 5 and Chrome.
 */

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * Sets consistent quote types.
 */

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

/*
 * Addresses inconsistent and variable font size in all browsers.
 */

small {
    font-size: 80%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 */

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

/*
sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}*/

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

/*
 * Removes border when inside `a` element in IE 8/9.
 */

img {
    border: 0;
}

/*
 * Corrects overflow displayed oddly in IE 9.
 */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE 8/9 and Safari 5.
 */

figure {
    margin: 0;
}

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

/*
 * Define consistent border, margin, and padding.
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
    border: 0; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Corrects font family not being inherited in all browsers.
 * 2. Corrects font size not being inherited in all browsers.
 * 3. Addresses margins set differently in Firefox 4+, Safari 5, and Chrome
 */

button,
input,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 2 */
    margin: 0; /* 3 */
}

/*
 * Addresses Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
    line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button; /* 2 */
    cursor: pointer; /* 3 */
}

/*
 * Re-set default cursor for disabled elements.
 */

button[disabled],
input[disabled] {
    cursor: default;
}

/*
 * 1. Addresses box sizing set to `content-box` in IE 8/9.
 * 2. Removes excess padding in IE 8/9.
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE 8/9.
 * 2. Improves readability and alignment in all browsers.
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */

/*
 * Remove most spacing between table cells.
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}
@font-face {
  font-family: 'FontAwesome';
  src: url(8b43027f47b20503057d.eot?v=4.7.0);
  src: url(8b43027f47b20503057d.eot?#iefix&v=4.7.0) format('embedded-opentype'), url(20fd1704ea223900efa9.woff2?v=4.7.0) format('woff2'), url(f691f37e57f04c152e23.woff?v=4.7.0) format('woff'), url(1e59d2330b4c6deb84b3.ttf?v=4.7.0) format('truetype'), url(c1e38fd9e0e74ba58f7a.svg?v=4.7.0#fontawesomeregular) format('svg');
  font-weight: normal;
  font-style: normal;
}
.unhilightable
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* behavior css
*  highlight, etc
*/
[item-behavior=highlight]
{
    background-color:yellow;
    -webkit-transition: background-color 500ms linear;
    -ms-transition: background-color 500ms linear;
    transition: background-color 500ms linear;
}

.lighthouse-canvas
{
    overflow-y:auto;
    padding: 0px;
    font-size: 12pt;
    font-family: Open Sans;
    line-height: normal;
    overflow-x:hidden;
    width: 980px; /*default size for innovative items (fits on iTester 3 on iPad)*/
    min-height: 640px;
}

.lighthouse-canvas.gridIsShown
{
    overflow:hidden; /*when something is being dragged or resized, prevent the grid from causing scrollbars*/
}
.lighthouse-canvas > div[widget], .Column > div[widget]
{
    padding: 8px;
    word-spacing: 1px;
    overflow: visible;
    -webkit-touch-callout: none;
    position: absolute;
    max-width: 100%;
    word-wrap: break-word;
}
.lighthouse-canvas.layout-flow
{
    box-sizing: border-box;
    height: auto;
    overflow:visible;
    /* in layout-flow, the canvas' height is allowed to expand to fit the content.
       any scrollbars will appear on the parent element, #canvas-container.
       the .lighthouse-canvas needs overflow: visible to prevent a rare double-scrollbar
       situation
    */
}
.lighthouse-canvas.layout-flow div[widget]
{
    position:relative;
    box-sizing: border-box;
}
.lighthouse-canvas div[widget]:not(.styleAdded,.HotSpot, .MathResponse)
{
    border-style: none;
}
.lighthouse-canvas div[widget] img
{
    max-width: 100%;
    max-height: 100%;
}
.lighthouse-canvas div.Stimulus
{
    /* 17px to match the student interface; .Stimulus class not used by student interface
       see: .stimulusWrapper class used by the student interface
    */
    font-size: 17px;
    box-sizing: border-box;
    padding: 0px 11px 0px 11px;
    height: 100%;
    overflow: auto;
}

.lighthouse-canvas.layout-flow .StimulusColumns > div, .lighthouse-canvas.layout-flow .StimulusColumns
{
    height: 100%;
    min-height: 640px;
}
.lighthouse-canvas table:not([border])
{   /*default style for all tables*/
    border: solid 1px #333;
    border-collapse: collapse;
}
.lighthouse-canvas table td:not(.mceLast)
{
    border: solid 1px #666;
}

/*but not for Connections widget*/
.lighthouse-canvas .Connections > table, .lighthouse-canvas .Connections > table > tbody > tr > td,
.lighthouse-canvas .MatchTable > table, .lighthouse-canvas .MatchTable > table > tbody > tr > td
{
    border: none;
}

.lighthouse-canvas input[type=text],
.lighthouse-canvas textarea
{ /*default input box style for lighthouse items - they should be "invisible", they get their style from the parent or another rule*/
    background: none;
    border: none;
    border-radius: 0px;
    padding:1px 3px;
}
.lighthouse-canvas.runtime > div
{
    /*word-wrap: break-word;
    overflow-y: auto; */
}
.lighthouse-canvas.runtime.layoutFluid
{

}
.lighthouse-canvas.runtime .DragBox .mathquill-rendered-math,
.lighthouse-canvas.runtime .TileBox .mathquill-rendered-math {
    pointer-events: none;
}
.lighthouse-canvas.runtime > .DragBox:hover, .lighthouse-canvas.runtime > .TileBoxSpawn:hover
{
    cursor: move;
}
.lighthouse-canvas.runtime > .TileBox:hover
{
    cursor: default;
}
.lighthouse-canvas .MultipleChoiceItem .TextBox
{
    padding-bottom: 30px;
    height: auto;
    overflow-y: visible !important;
}

.lighthouse-canvas .TextBox table th {
    border: 1px solid #333;
}
.mathquill-embedded-latex
{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    cursor:default;
}
.mathquill-wrapper .mq-root-block, .mathquill-wrapper .mq-math-mode .mq-root-block {
    white-space:normal;
}

.mq-linefeed:after
{
    content: '\A';
    white-space: pre !important;
}

div:not(#iTesterEditor_mathKeyboard) .mathquill-embedded-latex .mq-root-block::after {
    content: "\00a0";
}
/*.textEditableWidget
{
    overflow-x: hidden !important;
}

.textEditableWidget img, .textEditableWidget video, .textEditableWidget audio
{
    max-height: 95%;
    max-width: 100%;
}
*/

.i-stim-pager
{
    position: relative;
    top: 0px;
    left: 0px;
    margin-bottom: 10px;
}

.i-stim-content
{
    display:none;
    margin: 15px 0;
}
.i-stim-content.active
{
    display: block;
}
.i-stim-content.out-of-date::after {
    content:"";
    width:20px;
    height:20px;
    display:inline-block;
    position:absolute;
    top:0px;
    left:0px;
    background-image: url(21fedaaa25be34027837.png);
    background-position: -507px 0;
    background-repeat: no-repeat;
}
.i-stim-content table:not([border]),.stimulusWrapper table:not([border])
{
    border: solid 2px #666;
}

.i-stim-page
{
    display:inline-block;
    padding: 10px;
    cursor: pointer;
    background-color: #eee;
    border:solid 1px #ddd;
}
.i-stim-page:hover
{
    background-color: #ddd;
}
.i-stim-page.active
{
    border-bottom: solid 1px #fff;
    background-color: transparent;
}
    .i-stim-page.out-of-date::after {
        content:"";
        width:20px;
        height:18px;
        display:inline-block;
        vertical-align:middle;
        background-image: url(21fedaaa25be34027837.png);
        background-position: -507px 0;
        background-repeat: no-repeat;
    }
sup
{
    top: 0;
    vertical-align: super;
    font-size: smaller;
}

ol, ul
{
  margin: 0;
}

.button, .button-large {
  position: relative;
  display: inline-block;
  padding: 0.25em 0.5em 0.3em 0.5em;
  text-align: center;
  cursor: pointer;
  border: 1px solid #666;
  box-shadow: rgba(0,0,0,0.45) 0px 2px 3px;
  color: #fff;
  text-decoration: none;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

  /*background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(128,128,128,0.9)));*/
  background-image: -webkit-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: -moz-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: -o-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: -ms-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZlcnNpb249IjEuMCIgd2lkdGg9IjEwMCUiCiAgIGhlaWdodD0iMTAwJSIKICAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAKICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjkwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYig2NCw2NCw2NCk7c3RvcC1vcGFjaXR5OjAuNzUiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iOTAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2IoMTI4LDEyOCwxMjgpO3N0b3Atb3BhY2l0eTowLjkiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KIAogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiCiAgICAgc3R5bGU9ImZpbGw6dXJsKCNncmFkKTsiIC8+Cjwvc3ZnPg==);

  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  border-radius: 16px;
}
.button span.btn_glare, .button-large span.btn_glare {
  position: absolute;
  display: block;
  width: 90%;
  left: 6%;
  top: -1px;
  height: 50%;

  /*background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));*/
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.75), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,0.75), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,0.75), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,0.75), rgba(255,255,255,0));
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,0));
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  -ms-border-radius: 8px;
  border-radius: 8px;
}
.button:hover, .button-large:hover, #review-panel a.button-large:hover, .button:focus {
  border-color: #555;

  /*background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(96,96,96,0.75)), to(rgba(64,64,64,0.9)));*/
  background-image: -webkit-linear-gradient(rgba(96,96,96,0.75) 0%, rgba(64,64,64,0.9) 90%);
  background-image: -moz-linear-gradient(rgba(96,96,96,0.75) 0%, rgba(64,64,64,0.9) 90%);
  background-image: -o-linear-gradient(rgba(96,96,96,0.75) 0%, rgba(64,64,64,0.9) 90%);
  background-image: -ms-linear-gradient(rgba(96,96,96,0.75) 0%, rgba(64,64,64,0.9) 90%);
  background-image: linear-gradient(rgba(96,96,96,0.75) 0%, rgba(64,64,64,0.9) 90%);
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYwNjA2MCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzQwNDA0MCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
}
.blue_button {
  border-color: #6699cc;

  background-image: -webkit-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: -moz-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: -o-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: -ms-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: linear-gradient(to bottom, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEwNjBjMCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzYwYzBmZiIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
}

.blue_button:hover, .blue_button:focus, .blue_button.active {
  border-color: #003575;

  background-image: -webkit-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: -moz-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: -o-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: -ms-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: linear-gradient(to bottom, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNjFkOCIgc3RvcC1vcGFjaXR5PSIwLjc1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjkwJSIgc3RvcC1jb2xvcj0iIzAwMzU3NSIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
}

.wcag-btn {
    background-image: none;
    box-shadow: 0px 2px 2px #222;
    text-shadow: 0 0 0 #fff;
    border: none;
}

.blue_button.useButton.wcag-btn {
    background-color: #3A74B0;
}

.blue_button.useButton.wcag-btn:focus,
.blue_button.useButton.wcag-btn:hover,
.blue_button.useButton.wcag-btn:active {
    background-color: #6aaaec;
    background-image: none;
}

.button.wcag-btn {
    background-color: #637275;
}

sub .non-leaf {
    bottom: 0;
}

.integerPicker input::-webkit-outer-spin-button,
.numberPicker input::-webkit-outer-spin-button,
.integerPicker input::-webkit-inner-spin-button,
.numberPicker input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.mce-ico.mce-i-mathquill
{
    width: 20px;
    font-size: 16px;
    vertical-align: text-top;
    font-family: "Times New Roman",Symbola,serif;
    font-style: italic;
}
.mce-ico.mce-i-mathquill:after
{
    content:"f(x)";
}

.mce-math-button .mce-txt {
    font-family: sans-serif;
    font-weight: bold;
    display: inline-block;
    margin-top: 1px;
}

.guidelineExpander
{
    float: right;
    right: 0;
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 20px;
    background-image: url(8ecd6d2eac7beed94076.png);
    cursor:se-resize;
}
.guideline
{
    position: absolute;
    z-index: 99;
    display: block;
    overflow: hidden;
    width: 100%;
    min-width: 60px;
    height: 80px;
    min-height: 80px;
    margin: 0;
    margin: 0;
    cursor: move;
    border: 1px solid #ddd;
    border-radius: 5px;
    outline: none;
}

.toolContainer.guideline {
    top: -15px;
}

.gl_view
{
    position: absolute;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 60px);
    background: transparent;
}

.gl_midpiece
{
    width: 100%;
    height: calc(100% - 60px);
    background: transparent;
}
.gl_toppiece,
.gl_bottompiece
{
    width: 100%;
    height: 30px;
}
.gl_leftpiece
{
    position: absolute;
    left: 0;
    width: 10px;
    height: 100%;
}
.gl_rightpiece
{
    position: absolute;
    right: 0;
    width: 10px;
    height: 100%;
}

.tts_reading {
  background-color: #F5ED65;
  outline: solid 1px #dd3 !important;
}

.image-wrapper {
    position: relative;
    display: inline-block;
}

.ocr-element-canvas {
  position: absolute;
  top: 0px;
  left: 0px;
}

.ocr-ondemand-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  cursor: pointer;
  z-index: 1000;
  border: 2px solid transparent;
}

#stimulusEditForm .mce-tinymce
{
    margin:0 auto;
    width:518px;
}

#stimulusEditForm #editor-container
{
    padding: 0 !important;
}

.x-btn-delete {
    color: red;
    cursor: pointer;
    margin-left: .5rem;
}

[showborder="true"] .partitionNumberLineArea svg
{
  border: 1px solid;
}

#session-properties-content {
  margin: 20px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

#session-properties-content h2 {
  text-align: center;
  margin-bottom: 20px;
}

#session-properties-content .calculator-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

#session-properties-content .calculator-table th,
#session-properties-content .calculator-table td {
  border: 1px solid #ddd;
  padding: 10px;
}

#session-properties-content .calculator-table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

#session-properties-content .calculator-table td {
  background-color: #fff;
}

#session-properties-content td input[type="checkbox"] {
  transform: scale(1.2);
}

#session-properties-content .calculator-table tbody tr:nth-child(even) {
  background-color: #f7f7f7;
}

#session-properties-content .calculator-table tbody tr:hover {
  background-color: #eaeaea;
}

.item-card-page {
    width: 21cm;
    height: 31.7cm;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    font-size: 12pt;
    padding-bottom: 45px;
}

.item-card-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    min-height: 100px;
    padding-top: 10px;
    border-bottom: 6px solid #ccc;
    font-family: 'open sans';
}

.item-card-body {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    font-family: 'Open Sans';
}

.item-card-header-column {
    font-size: 9pt;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 45%;
}
.item-sections {
    font-family: 'open sans';
    table-layout: fixed;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 21cm;
}
.item-card-header-line
{
    display: flex;
    width: 100%;
    margin-bottom: 5px;
}
.item-card-header-title
{
    width: 40%;
    justify-content: flex-start;
    display: flex;
}

.item-card-logo {
    display: flex !important;
    width: 10% !important;
    height: 80px !important;
    margin-left: 2%;
    margin-right: 2%;
}

.item-card-secure-mark {
    font-size: 18pt;
    text-transform: uppercase;
    color: grey;
    font-weight: bold;
    width: 47%;
    height: 100%;
    padding-left: 15px;
}

.item-card-bold {
    font-weight: bold;
}

.item-card-header-value {
    display: flex;
    font-weight: 500;
    width: 60%;
    text-align: start;
}

.single-attribute-value {
    width: 75%;
    max-height: 775px;
    overflow: hidden;
    display: flex;
}

.item-card-alt-text-value {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.section-header-label {
    font-size: 18px;
    color: grey;
    display: flex;
    font-weight: bold;
    width: 30%;
}

.single-attribute-label {
    font-size: 18px;
    color: grey;
    display: flex;
    width: 100%;
    border-bottom: 2px solid #ccc;
    font-weight: bold;
}

.single-attribute-line,
.section-header {
    display: flex;
    justify-content: space-between;
    width: 95%;
    margin-left: 17px;
    padding-top: 5px;
    flex-direction: column;
}

.single-attribute-line{
    page-break-inside: avoid;
    break-inside: avoid;
}

.section-header {
    padding-top: 15px;
    border-bottom: 2px solid #ccc;
    margin-left: 0px;
}

.multi-attribute-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    margin-left: 17px;
    padding-top: 5px;
    page-break-inside: avoid;
    break-inside: avoid;
}

.multi-attribute-label {
    font-size: 21px;
    color: grey;
    display: flex;
    width: 30%;
}

.multi-attribute-value {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.multi-attribute-line {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    page-break-inside: avoid;
    break-inside: avoid;
}

.multi-attribute-line-label {
    font-weight: bold;
    padding-right: 10px;
    color: gray;
    width: 36%;
}

.multi-attribute-line-label.semi-bold-font {
    font-weight: 600;
}

.multi-attribute-line-value {
    width: 75%;
    overflow: hidden;
}

.multi-attribute-line--detail-card .multi-attribute-line-label {
    display: flex;
    align-items: flex-end;
    flex: 0 0 30%;
    width: 30%;
}

.multi-attribute-line--detail-card .multi-attribute-line-separator {
    display: flex;
    align-items: flex-end;
    flex: 0 0 2%;
    width: 2%;
}

.multi-attribute-line--detail-card .multi-attribute-line-value {
    display: flex;
    align-items: flex-end;
    flex: 0 0 68%;
    width: 68%;
}

.item-preview {
    position: relative;
    width: 75%;
    display: flex;
    flex-direction: column;
    max-height: 35%;
    justify-items: flex-start;
    align-items: flex-start;
    border: 2px solid #ccc;
    overflow: hidden;
    box-sizing: border-box;
    margin-left: 13px;
    border-radius: 8px;
    margin-top: 18px;
}
.item-sections
{
    width: 210mm; 
    table-layout: fixed;
}
.compact-table-row
{
    width: 100%;
    max-height: 775px;
    overflow: hidden;
    display: flex;
}
.item-card-compact-table
{
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    font-family: 'open sans';
    border: 1px solid black;
    font-size: 9pt;
}
.item-card-compact-table th,
.item-card-compact-table td
{
    border: 1px solid black;
    word-break: break-word;
    overflow-wrap: break-word;
}
.item-card-compact-table th,
.item-card-compact-table thead,
.item-card-standards-label
{
    font-weight: bold;
    background-color: #e6f2ff;
}
.item-card-compact-table .compact-table-value
{
    min-height: 35px;
    max-height: 263px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 3px;
}
.item-card-compact-table .compact-table-header
{
    min-height: 45px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 5px;
}
.compact-standards-list
{
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.compact-standard-entry
{
    text-align: left;
}

.compact-standard-code
{
    font-weight: 600;
}

.item-card-compact-tables
{
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.item-card-standards-table
{
    width: 100%;
}

.item-card-standards-label
{
    width: 15%;
    vertical-align: top;
}

.item-card-standards-value
{
    text-align: left;
}

.compact-table-value--left
{
    justify-content: flex-start;
    text-align: left;
}

.single-attribute-line.compact
{
    align-items: center;
}
.item-card-background
{
    background-color: white;
}
@keyframes blinker {
  0%  { opacity:1;}
  50% { opacity: .5; }
  100%  { opacity:1;}
}
@-moz-keyframes blinker /* Firefox */
{
    0%  { opacity:1;}
    99% { opacity:1;}
    100%{ opacity:0;}
}

@-webkit-keyframes blinker /* Safari 和 Chrome */
{
    0%  { opacity:1;}
    99% { opacity:1;}
    100%{ opacity:0;}
}

@-o-keyframes blinker /* Opera */
{
    0%  { opacity:1;}
    99% { opacity:1;}
    100%{ opacity:0;}
}

.moveable[widget]
{
    cursor: move;
}
#multipleChoiceDeleteSelector
{
    position: absolute;
}
#multipleChoiceDeleteSelector div
{
    padding: 4px 8px;
    cursor: pointer;
}
#multipleChoiceDeleteSelector div:hover
{
    background-color: #ddd;
}

p
{
    padding: 0px;
    line-height: 1.4em;
    margin-top: 0em;
    margin-bottom: 0.5em;
    word-spacing: 1px;
    -webkit-margin-before: 0px;
    -webkit-margin-after: 0px;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}

.lighthouse-canvas [widget] p {
    margin-bottom: 0;
}

p.autoNumPara, p.autoNumPoem {
    position: relative;
    margin-left: 40px;
}

p.autoNumPoem {
  padding-left: 2em;
  text-indent: -2em;
}

p .autoNum {
    position: absolute;
    left: -40px;
    min-width: 20px;
    text-align: right;
    font-weight: bold;
    pointer-events: none;
}

.lighthouse-canvas div[widget].OpenEndedResponse
{
    /*override special case where OpenEndedResponse is a child of a TextBox from QTI importer*/
    overflow: hidden;
    /*default height and width*/
    width: 364px;
    height: 384px;
    border:1px solid #ccc;
}

.lighthouse-canvas div[interaction].ExtendedTextInteraction,
.lighthouse-canvas div[interaction].TextEntryInteraction {
    /*override special case where OpenEndedResponse is a child of a TextBox from QTI importer*/
    overflow: hidden;
    /*default height and width*/
    width: 364px;
    height: 384px;
    padding: 0;
}

.lighthouse-canvas div[interaction].TextEntryInteraction {
    overflow: visible;
}
.lighthouse-canvas div[interaction].ExtendedTextInteraction > div[widget].OpenEndedResponse,
.lighthouse-canvas div[interaction].TextEntryInteraction > div[widget].SimpleTextResponse {
    position: relative;
    top:0 !important;
    left:0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 150px !important;
}

.lighthouse-canvas.layout-flow > div.OpenEndedResponse, .lighthouse-canvas.layout-flow div.OpenEndedResponse
{
    width: auto;
}
/* multiple choice widget */
.lighthouse-canvas div.MultipleChoice[numberofcolumns] .distractor
{
    display: table-cell;
}
.lighthouse-canvas .distractor,
.lighthouse-canvas div.MultipleChoice[numberofcolumns="1"] .distractor
{
    vertical-align: baseline;
    display: table-row;
    word-wrap: break-word;
}
.lighthouse-canvas .distractors
{
    display: table;
    width: 100%;
}
.lighthouse-canvas .distractors > div:not(.distractor):not(.multipleChoiceSpacer)
{
    display: table-row;
}
.lighthouse-canvas .distractor > .bubble
{
    display: table-cell;
    width: 1px;
}

.lighthouse-canvas .maskControl
{
    width:24px;
    height:24px;
    margin-right:5px;
    margin-top:1px;
    padding: 0;
    box-sizing: border-box;
}
.lighthouse-canvas .maskControl-button {
    opacity:0.6;
    vertical-align: top;
    font-size: 14px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    border: none;
    -webkit-border-radius: 0.5em;
    -moz-border-radius: 0.5em;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    color: unset;
}
.lighthouse-canvas .maskControlAll
{
    margin-right:5px;
    margin-bottom:10px;
    background:none;
    opacity:1;
    padding: 0.2em 0.7em;
}
.lighthouse-canvas .maskControl-button.maskControl .maskControl-icon::after {
    font-family:FontAwesome;
    color:inherit;
    content:"\f06e";
}
.lighthouse-canvas .maskControl-button.maskControl.toShow .maskControl-icon::after {
    content:"\f070";
}
.lighthouse-canvas .maskControl-button:hover {
    text-decoration: none;
}
.lighthouse-canvas .maskControl-button:active {
    position: relative;
    top: 1px;
}
.lighthouse-canvas .translation-keyword::after,
.stimulusWrapper .translation-keyword::after {
    font-family:FontAwesome;
    font-weight:100;
    color:inherit;
    content:"\f02d";
    position:relative;
    top:-.5em;
    opacity:.2;
}
.lighthouse-canvas .translation-keyword:hover::after,
.stimulusWrapper .translation-keyword:hover::after {
    opacity:1;
}
.lighthouse-canvas .translation-keyword:hover,
.stimulusWrapper .translation-keyword:hover {
    opacity:.9;
    text-shadow:0px 2px rgba(0,0,0,0.4);
}
.lighthouse-canvas .maskControl-button.disabled, .aperture-button.disabled:active
{
    cursor:default;
    opacity:0.5;
    top: 0px;
}
.lighthouse-canvas .distractor > .selected span
{
    background-color: #74df74;
}
.lighthouse-canvas .bubble span
{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width: 20px;
    height: 20px;
    border: solid 1px #000;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 10px;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}
.lighthouse-canvas .distractorContent
{
    display: table-cell;
    padding-top: 6px; /*doesn't do anything, but helps tinyMCE position over distractors*/
    width: 99%; /* maintains text alignment */
}
lighthouse-canvas .distractorContent > .p
{
    word-wrap: break-word;
}
.lighthouse-canvas div[widget="MultipleChoice"] .distractorContent img, .lighthouse-canvas div[widget="MultipleChoice"] .distractorContent audio, .lighthouse-canvas div[widget="MultipleChoice"] .distractorContent video,
.lighthouse-canvas div[widget="TextBox"] span > img
{
    max-width: 100%;
    max-height:none;
}

.lighthouse-canvas.runtime .distractor > .bubble, .lighthouse-canvas.runtime .distractor > .distractorContent, .lighthouse-canvas.runtime > .HotSpot
{
    cursor: pointer;
}

.lighthouse-canvas div[widget].SVGHotSpotInteraction {
    width: 660px;
    height: 560px;
    min-height: 100px;
    min-width: 180px;
    padding: 0px;
}

.lighthouse-canvas .SVGHotSpotInteraction > .import-svg-hot-spot-btn {
    height: 40px;
    font-size: 20px;
    border: 4px solid gray;
    border-radius: 5px;
    background-color: #0095cd;
    color:#fff;
    position: absolute;
    bottom: 5px;
    right: 45px;
    cursor: pointer;
}

.lighthouse-canvas div[widget].HotSpotInteraction {
    width: 100%;
    height: 100%;
    min-height: 100px;
    min-width: 100px;
    padding: 0px;
}

.HotSpotInteraction .HotSpotStem {
    margin: 8px;
}

.lighthouse-canvas > div.MultipleChoice, .lighthouse-canvas > div.MultipleChoiceItem
{
    height:auto !important;
    overflow-y:auto;
    overflow-x:hidden; /*never allow multiple choice widget to show horizontal scrollbar */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/**
 * FIXME:
 * All of these new multiple choice styles can be simplified dramatically.
 * The intention was to reduce the number of changes required for the QTI importer.
 * As such, the only classes added were to the multiple choice widget div element.
 * If it's not too much QTI work to add additional classes to elements within the
 * widget div, then style selectors like ".multiplechoice--alpha .bubble span" can be
 * simplified to one class like ".bubble__span--alpha", which is a better practice, closer
 * to BEM css design principles, and reduces css specificity wars.  Furthermore
 * this practice reduces the number of different selectors receiving one style
 * resulting in DRYer code.
 *
 * BEGIN Additional multiple choice styles
 */

.lighthouse-canvas .multiplechoice--s1 .distractors {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, Older property first */
  display: -webkit-flex; /* Safari */
  display: -ms-flexbox;  /* IE - Tweener */
  display: flex;
  flex-wrap: wrap;

  -webkit-box-direction: normal;
     -webkit-box-orient: horizontal;
     -ms-flex-direction: row;
         flex-direction: row;


  padding-right: 10px;
}

.lighthouse-canvas .multiplechoice--s1 .distractors > div.multiplechoice-column {
  width: 100%;
}

.lighthouse-canvas .multiplechoice--s1 .distractor {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, Older property first */
  display: -webkit-flex; /* Safari */
  display: -ms-flexbox;  /* IE - Tweener */
  display: flex;
  width: 42px;
  flex-grow: 1;

  -webkit-align-items: stretch;
    -webkit-box-align: stretch;
       -ms-flex-align: stretch;
          align-items: stretch;

  max-width: 939px;
}

.lighthouse-canvas .multiplechoice--s1 .distractor .bubble {
  -webkit-box-flex: 0;
      -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;

  display: inline-block;
  width: auto;
}

.lighthouse-canvas .multiplechoice--s1 .distractor .distractorContent {
  -webkit-box-flex: 0;
      -webkit-flex: 0 1 auto;
          -ms-flex: 0 1 auto;
              flex: 0 1 auto;

  display: block;
}

.lighthouse-canvas .multiplechoice--s1 .distractor .maskControl {
  -webkit-box-flex: 0;
      -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;

  margin-top: 5px;
}

/* for multiple columns */
.multiplechoice--s1 .distractors > div:not(.distractor):not(.multipleChoiceSpacer) {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, Older property first */
  display: -webkit-flex; /* Safari */
  display: -ms-flexbox;  /* IE - Tweener */
  display: flex;
}
.multipleChoiceSpacer {
  width: 100%;
}
.lighthouse-canvas div.multiplechoice--s1[numberofcolumns] .distractor {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6, Older property first */
  display: -webkit-flex; /* Safari */
  display: -ms-flexbox;  /* IE - Tweener */
  display: flex;
}

/* default 1 column */
.multiplechoice--s1 .distractorContent {
  width: 85%;
}

/* 2 columns ...etc. */
.multiplechoice--col-2 .distractor {
  width: 50%;
}

.multiplechoice--col-2 .distractorContent {
  width: 80%;
}

.multiplechoice--col-3 .distractor {
  width: 33%;
}

.multiplechoice--col-3 .distractorContent {
  width: 70%;
}

.multiplechoice--col-4 .distractor {
  width: 25%;
}

.multiplechoice--col-4 .distractorContent {
  width: 65%;
}

.multiplechoice--col-5 .distractor {
  width: 20%;
}

.multiplechoice--col-5 .distractorContent {
  width: 65%;
}

.multiplechoice--col-6 .distractor {
  width: 16.6%;
}

.multiplechoice--col-6 .distractorContent {
  width: 60%;
}

.multiplechoice--s1 .bubble span {
    position: relative;
    vertical-align: middle;
    color: #3b81c9;
    border: 1px solid #3b81c9;
}

.multiplechoice--s1 .distractor .bubble span {
  background-color: transparent;
}

.multiplechoice--s1 .bubble span:before {
    position: absolute;
    top: -1px;
    left: -1px;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    content: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27><circle cx=%275%27 cy=%275%27 r=%275%27 fill=%27rgb%2859,129,201%29%27 /></svg>");
    opacity: 0;
    z-index: -1;
}

.multiplechoice--s1 .selected .bubble span:before {
    opacity: 1;
}

.multiplechoice--circle .bubble span {
    border-radius: 11px;
}

.multiplechoice--rect .bubble span {
    border-radius: 4px;
}

.multiplechoice--circle.multiplechoice--radio .bubble span:before {
    content: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27><circle cx=%275%27 cy=%275%27 r=%273.5%27 fill=%27rgb%2859,129,201%29%27 /></svg>");
}

.multiplechoice--s1.multiplechoice--rect .bubble span:before {
    content: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27><rect x=%270%27 y=%270%27 rx=%271.8%27 width=%2710%27 height=%2710%27 fill=%27rgb%2859,129,201%29%27 /></svg>");
}

.multiplechoice--rect.multiplechoice--radio .bubble span:before {
    content: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 10 10%27><rect x=%271.5%27 y=%271.5%27 rx=%271.8%27 width=%277%27 height=%277%27 fill=%27rgb%2859,129,201%29%27 /></svg>");
}

.multiplechoice--radio .selected .bubble span {
    background-color: transparent;
}

.multiplechoice--alpha .selected .bubble span,
.multiplechoice--number .selected .bubble span,
.multiplechoice--check .selected .bubble span {
    color: white;
}

.multiplechoice--alpha .selected .bubble.tts_reading span,
.multiplechoice--number .selected .bubble.tts_reading span,
.multiplechoice--check .selected .bubble.tts_reading span:after {
    color: #3b81c9;
}

.multiplechoice--alpha .selected .bubble.ondemandtts.tts_ondemand_hover span,
.multiplechoice--number .selected .bubble.ondemandtts.tts_ondemand_hover span,
.multiplechoice--check .selected .bubble.ondemandtts.tts_ondemand_hover span:after {
    color: #3b81c9;
}

.multiplechoice--check .selected .bubble span:after {
    font-weight: bold;
    position: absolute;
    top: -1px;
    left: 4px;
    content: "\2713";
    color: white;
    text-shadow: 0 0 1px rgba(50,50,128,0.5);
}

.multiplechoice--selectoverlay .distractor {
    border-radius: 5px;
}

.multiplechoice--selectoverlay .distractor.selected {
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Crect%20width%3D%2710%27%20height%3D%2710%27%20fill%3D%27rgba%2857%2C171%2C255%2C0.3%29%27%20%2F%3E%3C%2Fsvg%3E");
}

.multiplechoice--selectoverlay .distractor:after {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    content: '';
    opacity: 0;
    border: 1px solid #39abff;
    border-radius: 5px;
    pointer-events: none;
    overflow: hidden;
    z-index: -1;
}

.multiplechoice--selectoverlay .distractor.selected:after {
    opacity: 1
}

.distractor--masked.distractor.selected {
    background: initial;
    border-radius: 5px;
}

.multiplechoice--s1 .distractorContent {
    padding: 5px 7px;
}

.multiplechoice--s1 .bubble {
  vertical-align: top;
}

.MultipleChoice .deletebutton-wrapper {
    position: absolute;
    top: 7px;
    left: -8px;
    display: none;
    width: 15px;
    height: 20px;
    cursor: pointer;
}

html:not(.isReadOnly) .MultipleChoice .deletebutton {
    -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: white;
    background-image: url(21fedaaa25be34027837.png);
    background-position: -207px -22px;
}

.MultipleChoice .addbutton-wrapper {
    position: absolute;
    bottom: 3px;
    left: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* override lighthouse style */
.lighthouse-canvas .MultipleChoice .distractors .editorObject.addbutton-wrapper {
  display: none;
}

html:not(.isReadOnly) .MultipleChoice .addbutton {
    -webkit-transform: translateY(-50%) translateX(-50%);
        -ms-transform: translateY(-50%) translateX(-50%);
            transform: translateY(-50%) translateX(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: white;
    background-image: url(21fedaaa25be34027837.png);
    background-position: -237px -22px;
}

.lighthouse-canvas .MultipleChoiceItem.selected .distractors .editorObject.addbutton-wrapper,
.lighthouse-canvas .MultipleChoiceItem.selected .deletebutton-wrapper,
.lighthouse-canvas .MultipleChoice.selected .distractors .editorObject.addbutton-wrapper,
.lighthouse-canvas .MultipleChoice.selected .deletebutton-wrapper,
.lighthouse-canvas .ChoiceInteraction.selected .distractors .editorObject.addbutton-wrapper,
.lighthouse-canvas .ChoiceInteraction.selected .deletebutton-wrapper
{
    display: block;
}

.lighthouse-canvas .ChoiceInteraction  .TextBox{
    overflow: unset !important;
}

.MultipleChoice .distractor {
    position: relative;
    z-index: 0;
}

.MultipleChoice .distractor .distractorContent,
.MultipleChoice .distractor .bubble {
    position: relative;
}

.MultipleChoice .distractor.selected,
.MultipleChoice .distractor .bubble.selected {
    box-shadow: none;
}

/* make room for the delete & add button icons for old saved items */
.MultipleChoice .bubble span {
    margin-left: 10px;
    vertical-align: middle;
    line-height: 20px;
}

.MultipleChoice .maskControl-button {
    vertical-align: middle;
}

.lighthouse-canvas .distractor.eliminated .bubble,
.lighthouse-canvas .distractor.eliminated .distractorContent {
    opacity: 0.8;
}

.lighthouse-canvas .distractor .content-eliminator {
    background-image: url(052dd807ba407f2a55ad.svg);
    background-repeat:no-repeat;
    background-size: 100% 100%;
    background-color: transparent !important;

    position: absolute;
    top: 0;
    left: 0;

    display: none;
}

.lighthouse-canvas .distractor.eliminated .content-eliminator {
    display: block;
}

/* Only show hover effect on devices that can actually hover (not touch devices) */
@media (hover: hover) {
    .lighthouse-canvas.is-eliminating .distractor:not(.eliminated):hover .content-eliminator {
        display: block;
        filter: grayscale(100%);
        opacity: 0.6;
    }
}
/* END additional multiple choice styles */

.lighthouse-canvas.runtime > .TextBox .mathquill-embedded-latex
{
    cursor: default !important;
}
.lighthouse-canvas.runtime div[widget].OpenEndedResponse {
    text-shadow: none;
    color: transparent;
    opacity: 0;
    overflow: auto;
    border-bottom: solid 10px rgba(255,255,255,0.01); /*invisible border ensures MCE has room on screen */
}
.lighthouse-canvas.runtime div[widget].ExtendedTextInteraction {
    border-bottom: solid 10px rgba(255,255,255,0.01);
}

.lighthouse-canvas div.SimpleTextResponse > textarea
{
    margin:0px auto;
    color: inherit;
}
.lighthouse-canvas div.SimpleTextResponse > .wordcountbar
{
    padding: 5px;
    text-align: right;
    font-size: 12px;
    color: #555;
    border: 1px solid #ddd;
    position: relative;
    top: -1px;
}
.lighthouse-canvas div.SimpleTextResponse > .wordcountbar #wordcount.alert
{
    color: red
}

.lighthouse-canvas div.DragBox, .lighthouse-canvas.layout-flow div.DragBox,
.lighthouse-canvas div.TileBox, .lighthouse-canvas.layout-flow div.TileBox,
.lighthouse-canvas div.TileBoxSpawn, .lighthouse-canvas.layout-flow div.TileBoxSpawn,
.lighthouse-canvas div.HotSpot, .lighthouse-canvas.layout-flow div.HotSpot,
.lighthouse-canvas div.GoalBox, .lighthouse-canvas.layout-flow div.GoalBox
{
    /* This is necessary to solve the problem described in Bug #9227. */
    /* Without a default width and height the widget will resize to fit the content inside TinyMCE. */
    width: 235px;
    height: 40px;
    touch-action: none;
}

.lighthouse-canvas div.SimpleTextResponse[widget]
{   /*simpletextresponse is just a textarea, no padding needed, only apply to new SimpleTextResponses (do not retroactively affect previously saved items)*/
    padding: 0px;

    /*default styles to look like a textarea*/
    background: #fff;
    border: dotted 1px #888;
    border-radius: 4px;
}
.lighthouse-canvas > div.ExtendedTextInteraction[widget],
.lighthouse-canvas > div.TextEntryInteraction[widget]
{
    background: #fff;
    box-shadow: 0px 0px 1px #888;
}

/* only apply this invisible border during runtime to avoid editor mode looking strange */
.lighthouse-canvas.runtime div[widget].ExtendedTextInteraction[wordscountbar="Character"],
.lighthouse-canvas.runtime div[widget].ExtendedTextInteraction[wordscountbar="Word"],
.lighthouse-canvas.runtime div[widget].ExtendedTextInteraction[wordscountbar="true"],
.lighthouse-canvas.runtime div[widget].OpenEndedResponse[wordscountbar="Character"],
.lighthouse-canvas.runtime div[widget].OpenEndedResponse[wordscountbar="Word"],
.lighthouse-canvas.runtime div[widget].OpenEndedResponse[wordscountbar="true"],
.lighthouse-canvas.runtime div[widget].OpenEndedItem[wordscountbar="Character"] .OpenEndedResponse,
.lighthouse-canvas.runtime div[widget].OpenEndedItem[wordscountbar="Word"] .OpenEndedResponse,
.lighthouse-canvas.runtime div[widget].OpenEndedItem[wordscountbar="true"] .OpenEndedResponse
{
    /* this invisible border ensures scrollbars will contain the character and word counter */
    border-bottom: solid 35px rgba(255,255,255,0.01);
}

.lighthouse-canvas > div[class="trashCan"]
{
    background-image: url(c1edcde038287b5c4575.png);
    display: inline-block;
    width: 80px;
    height: 80px;
    padding: 0px;
    position: absolute;
    right: 10;
    bottom: 10;
}

.TileBoxSpawn
{
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    transition: opacity 1s;
    position:absolute;
}

/* data table widget */

.dataTableToolbar
{
    padding: 10px;
}

.dataTableContainer
{
    overflow: visible;
}

.dataTableBody
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 8px;
}

.dataTableOverlay
{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 0;
}

.dataTableTable
{
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.dataTableTable td
{
    padding: 0px;
    background-color: transparent;
    vertical-align: middle;
}

.dataTableTable textarea
{
    resize: none;
    margin: 0px;
    padding: none;
    border: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.dataTableTable textarea:focus
{
    outline: none;
    background-color: yellow;
}

/* connections widget */
.connectionsItem
{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: normal;
    border: 2px solid transparent;
    padding: 10px;
    min-width: 1px;
    position: relative;
}

.connectionsItemRemoveChoice
{
    display: block;
    margin: 5px;
    padding: 5px;
    word-wrap: break-word;
}
.connectionsItemRemoveChoice img
{
    width:100%;
    height:100%;
}

.connectionsDialogCancel
{
    margin: 5px;
    padding: 5px;
}

.connectionsSelectedItem
{
    border: 2px solid black !important;
}

.connectionsLine
{
    border: 3px solid;
    position: absolute;
    border-radius: 5px;
}

.connectionsLine:hover
{
    cursor: pointer;
    border: 3px solid #a00 !important;
}
.Connections > table.connectionRadioTypeTable .connectionsItem,
.MatchTable > table.connectionRadioTypeTable .connectionsItem
{
    background: none;
    border: none;
    display: inline;
}
.Connections > table.connectionRadioTypeTable td,
.MatchTable > table.connectionRadioTypeTable td
{
    border: 1px solid #555555 !important;
    padding: 3px;
    vertical-align: middle;
}
.Connections.on-mac .connection-radio-container,
.MatchTable.on-mac .connection-radio-container
{
    background:#eee;
    border-radius: 50% 50% 50% 50%;
    width: 16px;
    height: 16px;
    box-shadow: 0px 0px 1px #888;
    position: relative;
    display: inline-block;
}
.Connections.on-mac .connection-radio-container > input,
.MatchTable.on-mac .connection-radio-container > input
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 16px;
    height: 16px;
    opacity: 0;
}
.Connections .connection-radio-container > .radio-circle,
.MatchTable .connection-radio-container > .radio-circle
{
    display: none;
}
.Connections.on-mac .connection-radio-container > .radio-circle,
.MatchTable.on-mac .connection-radio-container > .radio-circle
{
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50% 50% 50% 50%;
    opacity: 0;
    z-index: 0;
    -ms-transition:-ms-transition .5s, opacity .5s;
    -webkit-transition: .5s, opacity .5s;;
    transition: .5s, opacity .5s;;
}
.Connections.on-mac .connection-radio-container[checked="checked"] > .radio-circle,
.MatchTable.on-mac .connection-radio-container[checked="checked"] > .radio-circle
{
    background-color: #666;
    box-shadow: 0px 0px 1px #888;
    opacity: 1;
}

.MatchTable input[type="checkbox"]
{
    height: unset !important;
    width: unset !important;
}

.runtime .MatchTable input[type="checkbox"],
.runtime .MatchTable input[type="radio"]
{
    cursor: pointer;
}

.runtime .MatchTable #radio_r0 .connectionsItem:hover,
.runtime .MatchTable #radio_c0 .connectionsItem:hover,
.runtime .MatchTable #radio_r0 #radio_c0:hover
{
    cursor: default;
}

.rearrangeItemRemoveChoice
{
    display: block;
    margin: 5px;
    padding: 5px;
}
.rearrangeItem > img
{
    max-height: inherit !important;
    max-width: inherit !important;
}

.connectionsItem, .rearrangeItem, .rearrangeItemClone
{
    cursor: default;
    background: rgb(255,255,255); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI5JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmM2YzZjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 9%, rgba(243,243,243,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(9%,rgba(255,255,255,1)), color-stop(100%,rgba(243,243,243,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 9%,rgba(243,243,243,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 9%,rgba(243,243,243,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 9%,rgba(243,243,243,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 9%,rgba(243,243,243,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3',GradientType=0 ); /* IE6-8 */
    padding: 6px 10px;
    margin-bottom: 20px;
    border: solid 1px #eee;
    border-radius: 3px;
    border-collapse: separate;
}

.MatchTable .connectionsItem {
    color: black;
    margin-right: 8px;
    max-width: none;
    display: table;
    padding: 0;
}

.rearrangeItem, .rearrangeItemClone
{
    display: inline-block;
    cursor: move;
    touch-action: none;
    z-index: 2;
}
.Connections .cn_r1,.Connections .cn_r2,.Connections .cn_r3,.Connections .cn_r4,
.MatchTable .cn_r1,.MatchTable .cn_r2,.MatchTable .cn_r3,.MatchTable .cn_r4
{
    white-space: nowrap;
    width: auto;
}
.Connections .cn_spacer1,.Connections .cn_spacer2,.Connections .cn_spacer3,
.MatchTable .cn_spacer1,.MatchTable .cn_spacer2,.MatchTable .cn_spacer3
{
    width: 94px;
}

.Connections .cn_spacerh1,.Connections .cn_spacerh2,.Connections .cn_spacerh3,
.MatchTable .cn_spacerh1,.MatchTable .cn_spacerh2,.MatchTable .cn_spacerh3
{
    height: 94px;
}

.Connections > table,
.MatchTable > table
{
    width: 100%;
    table-layout: fixed;
}

.MatchTable > table.manualColumnWidth
{
    width: auto;
}

.Connections[isvertical="true"] .connectionsItem {
    margin-right: 8px;
}
.rearranging
{
    -webkit-transition: none !important;
    transition: none !important;
}

.forChangePlaceholder
{
    z-index: -1;
    padding: 0px 3px;
    margin: 0;
    display: inline-block;
}
.ul.forChange
{
    position: absolute;
    display: inline-block;
    cursor: default; /* no text cursor */
    list-style: none;
    background: rgb(255,255,255); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWVlZWVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: -moz-linear-gradient(top,  rgba(255,255,255,1) 33%, rgba(238,238,238,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(33%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00eeeeee',GradientType=0 ); /* IE6-8 */
    border: solid 1px #aaa;
    font-size: 0.9em;
    color:#000;
    border-radius: 4px;
    padding:1px 3px;
    margin: 0;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.lighthouse-canvas .ul.forChange
{
    outline:none;
    padding-bottom: 5px;
    background: none;
}
.lighthouse-canvas .ul.forChange.clone {
    background: transparent !important;
    display: flex;
    flex-wrap: wrap;
}
.lighthouse-canvas .ul.forChange.clone.at-bottom {
    flex-direction: column-reverse;
}
.lighthouse-canvas .ul.forChange.clone > .li {
    flex: 0 1 100%;
}
.lighthouse-canvas .ul.forChange.clone > .li:not(.forChangeInit) {
    display:none;
}
.lighthouse-canvas .ul.forChange.clone.expanded > .li:not(.forChangeInit) {
    display: list-item;
}
.ul.forChange .li
{
    /*display: list-item;*/ /* this causes issues when SelectDropDown is placed inside an <ol> tag.  it is also unnecessary */
}
.ul.forChange .li:not(.forChangeInit)
{
    padding: 6px;
    display: none;
    position: relative;
    background-color:#fff;
    white-space: nowrap;
}
.ul.forChange .li:not(.forChangeInit):hover
{
    color: #FFFFFF;
    background-color: #3399FF !important;
    cursor: pointer;
}

.ul.forChange .li:not(.forChangeInit):hover .mq-math-mode * {
    border-color: white;
}

.ul.forChange .li.selected {
    /* for showing the highlight box shadow */
    z-index: 99;
}
.ul.forChange .li.forChangeInit
{
    background-size: 17px 10px;
    background-repeat: no-repeat;
    background-position: right center;
/*-webkit-appearance: menulist;
  -moz-appearance: menulist;*/
}
  .ul.forChange > .li.forChangeInit > .dropdown-default {
    color: #000;
    font-family: 'Open Sans';
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
  }
    .ul.forChange .li.forChangeInit > *:not(sub):not(sup) {
        vertical-align:top;
    }
      .ul.forChange .li.forChangeInit::after {
          position:absolute;
          right:0;
          top:50%;
          margin-top:-.4em;
          font-size:.8em;
          line-height:.8em;
          width:.8em;
          height:.8em;
          font-family:FontAwesome;
          content:"\f0d7";
          color:inherit;
      }
.ul.forChange .li img {
    max-width: 100%;
    box-sizing: border-box;
}

.ul.forChangeInit img {
    padding-right: 20px;
}

.lighthouse-canvas:not(.runtime) .SelectDropDown .selectNode {
    visibility: hidden;
    min-width: 152px;
    position: relative;
    display: inline-block;
    margin-right: 4px;
}

.lighthouse-canvas:not(.runtime) .SelectDropDown .selectNode > *:not(:nth-last-child(2)) {
    display: none;
}

.lighthouse-canvas:not(.runtime) .SelectDropDown .selectNode > *:nth-last-child(2) {
    font-size: 0.9em;
    padding-right: 27px;
}

.lighthouse-canvas:not(.runtime) .SelectDropDown .selectNode::after {
    visibility: visible;
    padding-top: 0;
    padding-right: 19px;
    padding-bottom: 0;
    padding-left: 4px;
    content: "-Select an Answer-";
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    position: absolute;
    left: 0;
    right: 0;
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtNiw1bDUsMGwtMi4zOTM4Miw0Ljc3ODMybC0yLjYwNjE4LC00Ljc3ODMyeiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMyNjZjYzEiIGZpbGw9IiMyNjZjYzEiLz4KIDwvZz4KPC9zdmc+), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZWVlZWVlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtNiw1bDUsMGwtMi4zOTM4Miw0Ljc3ODMybC0yLjYwNjE4LC00Ljc3ODMyeiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMyNjZjYzEiIGZpbGw9IiMyNjZjYzEiLz4KIDwvZz4KPC9zdmc+), -moz-linear-gradient(top,  rgba(255,255,255,1) 33%, rgba(238,238,238,1) 100%); /* FF3.6+ */
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtNiw1bDUsMGwtMi4zOTM4Miw0Ljc3ODMybC0yLjYwNjE4LC00Ljc3ODMyeiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMyNjZjYzEiIGZpbGw9IiMyNjZjYzEiLz4KIDwvZz4KPC9zdmc+), -webkit-gradient(linear, left top, left bottom, color-stop(33%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1))); /* Chrome,Safari4+ */
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtNiw1bDUsMGwtMi4zOTM4Miw0Ljc3ODMybC0yLjYwNjE4LC00Ljc3ODMyeiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMyNjZjYzEiIGZpbGw9IiMyNjZjYzEiLz4KIDwvZz4KPC9zdmc+), -webkit-linear-gradient(top,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* Chrome10+,Safari5.1+ */
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtNiw1bDUsMGwtMi4zOTM4Miw0Ljc3ODMybC0yLjYwNjE4LC00Ljc3ODMyeiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMyNjZjYzEiIGZpbGw9IiMyNjZjYzEiLz4KIDwvZz4KPC9zdmc+), -o-linear-gradient(top,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* Opera 11.10+ */
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtNiw1bDUsMGwtMi4zOTM4Miw0Ljc3ODMybC0yLjYwNjE4LC00Ljc3ODMyeiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMyNjZjYzEiIGZpbGw9IiMyNjZjYzEiLz4KIDwvZz4KPC9zdmc+), -ms-linear-gradient(top,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* IE10+ */
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiA8IS0tIENyZWF0ZWQgd2l0aCBTVkctZWRpdCAtIGh0dHA6Ly9zdmctZWRpdC5nb29nbGVjb2RlLmNvbS8gLS0+CiA8Zz4KICA8dGl0bGU+TGF5ZXIgMTwvdGl0bGU+CiAgPHBhdGggaWQ9InN2Z18xIiBkPSJtNiw1bDUsMGwtMi4zOTM4Miw0Ljc3ODMybC0yLjYwNjE4LC00Ljc3ODMyeiIgc3Ryb2tlLXdpZHRoPSI1IiBzdHJva2U9IiMyNjZjYzEiIGZpbGw9IiMyNjZjYzEiLz4KIDwvZz4KPC9zdmc+), linear-gradient(to bottom,  rgba(255,255,255,1) 33%,rgba(238,238,238,1) 100%); /* W3C */
    background-size: 17px 10px, auto;
    background-repeat: no-repeat, repeat;
    background-position: right center, 0% 0%;
    display: inline-block;
    cursor: default; /* no text cursor */
    list-style: none;
    border: solid 1px #aaa;
    font-size: 0.9em;
    color:#000;
    border-radius: 4px;
    margin: 0;
    text-align: left;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.runtime .connectionsItem:hover
{
    border: solid 1px #aaa;
    cursor: pointer;
}
.runtime .rearrangeItem
{
    cursor: move;
}
.runtime .TextBox
{
/*pointer-events: none;  prevent TextBox from receiving mouse events on runtime - Cancel this, use zindex instead*/
}
/* z-index controls */
.lighthouse-canvas > div
{
    z-index: 5; /*default z of 5*/
}
.lighthouse-canvas.layout-flow > div
{
    z-index: 1;  /*default z of 1 for new items using flow layout*/
}
.lighthouse-canvas.layout-flow div[widget].absolute {
    top: 20px; /* default positioning */
    left: 20px;
    position: absolute;
    z-index: 10; /*absolute elements appear over others*/
}
.lighthouse-canvas .TextBox, .lighthouse-canvas .MediaBox
{
    z-index: 2; /*TextBox usually goes below most widgets*/
}
.lighthouse-canvas .MediaBox > img.init::after {
    content: "Double click to edit background image";
    position: absolute;
    top: 50%;
    width: 100%;
    text-align: center;
    margin-top: -.5em
}
#editor-container .lighthouse-canvas div.Stimulus
{
    z-index: 1; /*Stimulus is large and should go under most things*/
    overflow: unset;
}
.lighthouse-canvas .Stimulus video, .lighthouse-canvas .Stimulus audio,
.lighthouse-canvas div[widget].Stimulus img
{
    max-height: 100%;
    max-width: 100%;
}
.lighthouse-canvas .Directions + .Stimulus
{
    position: relative;
    /* 40px: direction default height */
    height: calc(100% - 40px);
}
.lighthouse-canvas .Stimulus .i-stim-content.active {
    /* margin of i-stim-content */
    height: calc(100% - 30px);
    overflow-y: auto;
}
.lighthouse-canvas .Stimulus .i-stim-pager ~ .i-stim-content.active {
    /* stimulus pager height, margin of i-stim-content */
    height: calc(100% - 45px - 30px);
}
.lighthouse-canvas div.Directions[widget]
{
    box-sizing: border-box;
    position: initial;
    padding-left: 15px;
}
.lighthouse-canvas .GoalBox
{
    z-index: 3; /*Goalbox should be underneath most things, except Textbox*/
    /*That way Goalboxes that have Textboxes inside can still be dragged into*/
    overflow:visible !important; /*GoalBox should never have scrollbars */
}
.lighthouse-canvas .DragBox
{
    z-index: 100; /*DragBox should be above most widgets so it is always interactable */
}
.lighthouse-canvas .Connections,
.lighthouse-canvas .MatchTable
{
    overflow:auto !important;
}
.lighthouse-canvas .Circuit
{
    display:table;
}
.lighthouse-canvas  > div[widget].Browser
{
    z-index:1;
    padding:0;
}
  .lighthouse-canvas > div[widget].Browser.activated {
    z-index:999;
    background:white;
  }
img
{ vertical-align: middle; }

.multi-cell_table {
    border: 1pt solid black;
    border-collapse: collapse;
}

/*Added for sketchpad*/
/*
  .gray{
  color: #e9e9e9;
  border: solid 1px #555;
  background: #6e6e6e;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjODg4ODg4Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNTc1NzU3Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
  }
  .gray:hover {
  background: #616161;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNzU3NTc1Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNGI0YjRiIi8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
  }
  .gray.active {
  color: #afafaf;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjNTc1NzU3Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjODg4ODg4Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
  }
  .blue{
  color: #d9eef7 !important;
  border: solid 1px #0076a3;
  background: #0095cd;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDA5MmVkIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA2OGE2Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
  }
  .blue:hover {
  background: #007ead;
  background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjMDA3OWVkIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjMDA1N2E2Ii8+PC9saW5lYXJHcmFkaWVudD48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz48L3N2Zz4=);
  }*/
.lighthouse-canvas div[widget].SketchPad
{
    padding:0px;
    min-height:300px;
    min-width:300px;
    border:solid 1px #ccc;
    overflow-y:hidden;
}
/* IT-36091: Raise SketchPad z-index when dropdown menu is expanded so it appears above DragBox (z-index:100) */
.lighthouse-canvas div[widget].SketchPad.sketchpad-menu-expanded
{
    z-index: 101;
}
.svg-container
{
    cursor: auto;
    position:relative;
    z-index:1 !important;
}

.sketchpad-toolbox
{
    background: #eee;
    border-bottom: solid 1px #ddd;
}
.sketchpad-toolbox div
{
    z-index:5;
}

.sketchpad-svg-icon {
  width: 100%;
  height: 100%;
}

.selectpoint-toolbox
{
    position: absolute;
    font-size: 11px;
    background: #eee;
    border: solid 1px #ddd;
    padding: 3px;
    width: 100%;
}
.sketchpad-toolbox .edit-button
{
    padding:5px 15px;
    cursor:pointer;
}
.sketchpad-toolbox .style-item
{
    display:table;
    width:100%;
    color:black;
}
.sketchpad-toolbox .style-item > *
{
    display:table-cell;
}
.sketchpad-toolbox .style-item > label
{
    width:70%;
    padding:2px 5px;
}
.sketchpad-toolbox input
{
    width:30px;
    font-size:11px;
}
.sketchpad-toolbox .edit-button:hover
{
    background-color:rgba(200,200,200,0.8);
}
.hoverExpandButton
{
    min-width:30px;
    min-height:30px;
    margin-right:5px;
    position:relative;
}
.hoverExpandButton.expand
{
    background-color:rgba(255,255,255,0.8);
}
.hoverExpandButton > .hoverExpandMenu
{
    display:none;
    position:absolute;
    background-color:rgba(255,255,255,0.8);
    border:solid 1px #ddd;
}
.up .hoverExpandButton > .hoverExpandMenu
{
    box-shadow:0px 2px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.3);
    -moz-box-shadow:0px 2px 2px rgba(0,0,0,0.3);
}
.down .hoverExpandButton > .hoverExpandMenu
{
    box-shadow:0px -2px 2px rgba(0,0,0,0.3);
    -webkit-box-shadow:0px -2px 2px rgba(0,0,0,0.3);
    -moz-box-shadow:0px -2px 2px rgba(0,0,0,0.3);
}
.hoverExpandButton.expand > .hoverExpandMenu
{
    display:inline-block;
}
.selectpoint-toolbox .button-container
{
    margin-right: 50px;
}
.sketchpad-toolbox .tbutton
{
    width:30px;
    height:30px;
    display:inline-block;
    cursor: pointer;
    border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    font-size: 14px;
    vertical-align: top;
    line-height: 30px;
    box-sizing: border-box;
    padding: 2px;
}
.sketchpad-toolbox > .tbutton:hover
{
    box-shadow:0px 0px 1px -3px rgba(70,120,180,0.3);
    -moz-box-shadow:0px 0px -3px 8px rgba(70,120,180,0.3);
    -ms-box-shadow:0px 0px -3px 8px rgba(70,120,180,0.3);
}
.sketchpad-toolbox > .tbutton.actived
{
    background-color:rgba(120,150,180,0.8);
}
.sketchpad-toolbox > .tbutton.disabled
{
    background-color: #bba58d;
    filter: grayscale(1);
    cursor: not-allowed;
}
.hoverExpandMenu .tbutton
{
    margin:10px;
}
.hoverExpandMenu .tbutton:hover
{
    box-shadow:0px 0px 1px 8px rgba(70,120,180,0.3);
    -moz-box-shadow:0px 0px 1px 8px rgba(70,120,180,0.3);
    -ms-box-shadow:0px 0px 1px 8px rgba(70,120,180,0.3);
}
.sketchpad-toolbox .tbutton.edit, .sketchpad-toolbox .tbutton.style
{
    background:none;
    width:auto;
}
.sketchpad-toolbox .tbutton.style
{
    float:right;
}
.sketchpad-toolbox .tbutton.selected
{
    box-shadow:0px 0px 1px 4px rgba(70,120,180,0.8);
    -moz-box-shadow:0px 0px 1px 4px rgba(70,120,180,0.8);
    -ms-box-shadow:0px 0px 1px 4px rgba(70,120,180,0.8);
}
.sketchpad-toolbox .tbutton[type="select"]
{
    background-position: -280px 0px;
}
.sketchpad-toolbox .tbutton[type="line"]
{
    background-position: -310px 0px;
}
.sketchpad-toolbox .tbutton[type="label"]
{
    background-position: -340px 0px;
}
.sketchpad-toolbox .tbutton[type="pencil"]
{
    background-position: -280px -30px;
}
.sketchpad-toolbox .tbutton[type="star"]
{
    background-position: -310px -30px;
}
.sketchpad-toolbox .tbutton[type="math"]
{
    background-position: -340px -30px;
}
.sketchpad-toolbox .tbutton[type="circle"]
{
    background-position: -280px -60px;
}
.sketchpad-toolbox .tbutton[type="triangle"]
{
    background-position: -310px -60px;
}
.sketchpad-toolbox .tbutton[type="hexagon"]
{
    background-position: -340px -60px;
}
.sketchpad-toolbox .tbutton[type="rectangle"]
{
    background-position: -280px -90px;
}
.sketchpad-toolbox .tbutton[type="arrow"]
{
    background-position: -310px -90px;
}
.sketchpad-toolbox .tbutton[type="erase"]
{
    background-position: -340px -90px;
}

.sketchpad-button, .selectpoint-button
{
    padding: 2px 6px;
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    vertical-align: top;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.SketchPad #moreDialog .item-container
{
    height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
}
.sketchpad-button-icon
{
    vertical-align: -5%;
    display: inline-block;
    background-image: url(21fedaaa25be34027837.png);
    background-repeat: no-repeat;
    width:30px; height: 30px;
}
.sketchpad-button-icon.apply-button
{
    background-position: -245px -125px;
}
.sketchpad-button-icon.reset-button
{
    background-position: -0px -90px;
}
.sketchpad-button-icon.remove-button
{
    background-position: -325px -125px;
}
.sketchpad-button text, .selectpoint-button text
{
    text-shadow:none;
}

#sketchpad-styleButton, .selectpoint-trashcan-container
{
    position:absolute;
    right:10px;
    top:5px;
    font-size:12px;
}
.sketchpad-dialog, .selectpoint-dialog
{
    position: absolute;
    -webkit-user-select: none;
}
.sketchpad-dialog .close_Button, .selectpoint-dialog .close_Button
{
    position: absolute;
    top: -1px;
    right: 4px;
    cursor: pointer;
}
.sketchpad-dialog input
{
    border: solid 2px #ddd !important;
    padding: 2px 0px 2px 4px !important;
}
.sketchpad-button.selected
{
    background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc1NjIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNEREREREQiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMC40Ii8+CjwvbGluZWFyR3JhZGllbnQ+CjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZzU2MikiIC8+Cjwvc3ZnPg==);
}
.selectpoint-shape-dialog .selectpoint-button:not(selected)
{
    -ms-opacity: 0.5;
    opacity: 0.5;
}
.selectpoint-shape-dialog .selectpoint-button.selected
{
    -ms-opacity: 0.5;
    opacity: 1;
}
.sketchpad-button svg, .selectpoint-button svg
{
    width: 23px;
    height:23px;
}
.sketchpad-button:hover, .selectpoint-button:hover {
    text-decoration: none;
}
.sketchpad-button:active, .selectpoint-button:active {
    position: relative;
    top: 1px;
}
.medium {
    font-size: 14px;
    padding: .1em 1em .2em;
}
.uiDialog
{
    background-color: #fff;
    border: solid 1px #ddd;
    padding: 12px;
    z-index: 99;
    -webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    2px 2px 5px rgba(50, 50, 50, 0.75);
    box-shadow:         2px 2px 5px rgba(50, 50, 50, 0.75);
    background-image: linear-gradient(bottom, rgb(247,247,247) 25%, rgb(255,255,255) 74%);
    background-image: -o-linear-gradient(bottom, rgb(247,247,247) 25%, rgb(255,255,255) 74%);
    background-image: -moz-linear-gradient(bottom, rgb(247,247,247) 25%, rgb(255,255,255) 74%);
    background-image: -webkit-linear-gradient(bottom, rgb(247,247,247) 25%, rgb(255,255,255) 74%);
    background-image: -ms-linear-gradient(bottom, rgb(247,247,247) 25%, rgb(255,255,255) 74%);

    background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.25, rgb(247,247,247)),
	color-stop(0.74, rgb(255,255,255))
    );
    font-size: 10.5pt;
}
textarea.resizing
{
    cursor: nw-resize;
}
textarea.moving
{
    cursor: pointer;
}
.SketchPad svg path, .SketchPad svg circle, .SketchPad svg rect
{
    pointer-events: all;
}

/* text editable widgets */
.lighthouse-canvas .FillInBlank, .lighthouse-canvas .DragBox, .lighthouse-canvas .HotSpot, .lighthouse-canvas .SelectDropDown,
.lighthouse-canvas .TileBox, .lighthouse-canvas .TextBox, .lighthouse-canvas .SelectText {
    overflow-y: auto !important;
}

div.HotSpot.CircularHotSpot {
    overflow-y: visible !important;
    border-radius: 100% !important;
}

.lighthouse-canvas .DragBox p,
.lighthouse-canvas .HotSpot p,
.lighthouse-canvas .TileBox p
{
    margin-bottom: 0px;
    line-height: normal;
}

.lighthouse-canvas .FillInBlank input[type="text"] {
  color: inherit;
}

.error-popup {
    color: white;
    background-color: black;
    box-shadow: 1px 1px 1px #808080a6;
    border: 1px solid black;
    z-index: 1000;
    border-radius: 10px;
    padding: 5px;
}

.error-popup::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 10px solid black;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    top: 100%;
    left: 10px;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,.5));
}

.ReplaceText
{
    display: block;
    border-radius: 4px !important;
    border:solid 1px #ccc !important;
    background: rgb(244,247,249) !important; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y0ZjdmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU3JSIgc3RvcC1jb2xvcj0iI2ZlZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=) !important;
    background: -moz-linear-gradient(top,  rgba(244,247,249,1) 0%, rgba(254,255,255,1) 57%) !important; /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,247,249,1)), color-stop(57%,rgba(254,255,255,1))) !important; /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(244,247,249,1) 0%,rgba(254,255,255,1) 57%) !important; /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(244,247,249,1) 0%,rgba(254,255,255,1) 57%) !important; /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(244,247,249,1) 0%,rgba(254,255,255,1) 57%) !important; /* IE10+ */
    background: linear-gradient(to bottom,  rgba(244,247,249,1) 0%,rgba(254,255,255,1) 57%) !important; /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f7f9', endColorstr='#feffff',GradientType=0 ) !important; /* IE6-8 */
    padding: 1px 3px;
    outline-color: #48a;
    margin: 5px auto 5px auto;
}

.uiDialog .closeButton
{
    position: absolute;
    right: 0px;
    top: -5px;
    cursor: pointer;
    -webkit-user-select: none;
}

/* css for browser */
.lighthouseBrowser
{
    opacity:0;
    pointer-events:none;
    overflow-x: visible;
    height: 100%;
    box-shadow: 0px 0px 2px 1px #aaa;
    padding-bottom: 40px;
    box-sizing: border-box;
    -ms-transform: scale(0.01); /* IE 9 */
    -ms-transform-origin: left bottom;
    -webkit-transform: scale(0.01); /* Safari */
    -webkit-transform-origin: left bottom;
    transform: scale(0.01);
    transform-origin: left bottom;
    -ms-transition:-ms-transition 1s, opacity 1s; /* IE 9 */
    -webkit-transition: -webkit-transform 1s, opacity 1s;
    transition: transform 1s, opacity 1s;
}
  .lighthouseBrowser.show {
    z-index:999;
    opacity:1;
    pointer-events:initial;
    -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari */
    transform: scale(1);
  }

.browserContainer
{
    overflow:hidden;
    height:100%;
}
.browserContainer-ios
{
    overflow: scroll !important;
    -webkit-overflow-scrolling: touch;
}

.browserIframe
{
    width: 100%;
    height:100%;
    border: none;
    border-top:1px solid #ddd;
}
.Browser:not(.activated) .browserToolbarControl {
  pointer-events:none;
  opacity:.2;
}
.browserToolbarControl
{
    position:absolute;
    left: 0px;
    top: 0px;
    width: 20px;
    height: 20px;
    line-height:20px;
    display:inline-block;
    cursor:pointer;
}
  .browserToolbarControl::after {
    font-family:fontAwesome;
    content:"\f1de";
  }
  .browserToolbarControl.toolbarHide::after {
    font-family:fontAwesome;
    content:"\f077";
  }
.browserToolbarControl:hover {
    opacity: 0.8;
}
.browserClose
{
    position:absolute;
    right: 0px;
    top: 0px;
    width: 39px;
    height: 40px;
    line-height:40px;
    display:inline-block;
    cursor:pointer;
    border-left:1px solid #ddd;
}
  .browserClose::after {
    content: "\f068";
  }
.browserClose:hover
{
    opacity: 0.8;
}
.browserTabTable
{
    width: 100%;
    display: table;
    border-bottom:1px solid #ddd;
}
.broswerTabBar
{
    display: table-row;
}
.browserTab
{
    display: table-cell;
    width: 100px;
    max-height: 20px;
    overflow:hidden;
    background: rgba(255,255,255,0.8);
    border: solid 2px #eee;
    border-radius:4px;
    border-bottom:0;
    cursor: pointer;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    padding:2px 0px 4px 25px;
    margin:10px;
    font-family: 'Open Sans';
}
.browserTab:hover
{
    background: rgba(255,255,255,1);
}
.browserTab > div.tabTitle
{
    float:left;
    padding: 2px 0px 2px 4px;
    margin-top: 2px;
    white-space:nowrap;
    width:75px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}
.activeTab
{
    background: #eee;
}
.activeTab:hover
{
    background: #eee;
}
.closeTab
{
    float:right;
    margin-top:2px;
    margin-right:2px;
    padding: 2px;
}
.closeTab:hover
{
    background: rgba(125, 125, 125, 0.1);
}
.addTab
{
    display: table-cell;
    max-height: 20px;
    width:10px;
    background: rgba(255,255,255,0.8);
    border: solid 2px #eee;
    border-radius:4px;
    border-bottom:0;
    cursor: pointer;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    line-height: 12px;
    padding:0px 5px;
    margin:10px;
    vertical-align: middle;
}
.addTab:hover
{
    background: rgba(255,255,255,1);
}
.browserContextMenu
{
    display: table;
    position:absolute;
    border: solid 1px #eee;
    box-shadow: 2px 2px 2px #888888;
}
.browserMenuRow
{
    display: table-row;
}
.browserMenuItem
{
    vertical-align:middle;
    display:table-cell;
    background: #fff;
    padding:2px 20px 2px 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 12px;
    height:25px;
    cursor:default;
}
.browserMenuItem:hover
{
    background:#eee;
}
.newTabDisabled
{
    color: rgba(0,0,0,0.3);
}
.browserToolbar
{
    display:table-row;
}
.browserToolbarTable
{
    width:100%;
    display: table;
    font-size:24px;
}
.browserNavButtons
{
    display: table-cell;
    vertical-align: bottom;
    width: 120px;
    padding-left: 20px;
}
.urlInput
{
    position:relative;
    padding-right: 80px;
    display:table-cell;
    font-size:initial;
}
.browserBackButton, .browserForwardButton, .browserHomeButton
{
    display:inline-block;
    width: 40px;
    height: 40px;
    border: none;
}
.browserButton::after {
    display: inline-block;
    width: 100%;
    font-family:FontAwesome;
    font-size:inherit;
    color:inherit;
    text-align: center;
}
.browserForwardButton::after
{
    content:"\f061";
}
.browserHomeButton::after
{
    content:"\f015";
}
.browserBackButton::after
{
    content:"\f060";
}
.browserBackButton.disabled, .browserForwardButton.disabled, .browserHomeButton.disabled, .browserBackButton.disabled:hover, .browserForwardButton.disabled:hover, .browserHomeButton.disabled:hover
{
    cursor:default;
    opacity:0.4;
    background-color:rgba(0,0,0,0);
}

.browserBackButton:hover, .browserForwardButton:hover, .browserHomeButton:hover
{
    opacity: 0.7;
}
.lighthouse-canvas input.browserUrlInput
{
    width: 100%;
    height:40px;
    padding: 8px 0px 8px 8px;
    background: #fff;
    box-sizing:border-box;
    box-shadow:0px 0px 1px 1px #ddd;
    border-radius:3px;
}
.browserUrlControl
{
    position:absolute;
    width:40px;
    height:40px;
    line-height:40px;
    top:0px;
    right:40px;
    opacity:0.2;
    cursor:pointer;
}
.browserUrlControl:hover {
    opacity:0.7;
}
.browserRefresh::after {
    content:"\f021";
}
.browserGo::after {
    content:"\f054";
}
.lighthouse-canvas .Browser .browserToolIcon
{
    /*default position is bottom left*/
    bottom: 5px;
    left: 0px;
    position:absolute;
}
.lighthouse-canvas .Browser.iconTopLeft .browserToolIcon
{
    top: 5px;
}
.lighthouse-canvas .Browser.iconTopRight .browserToolIcon
{
    top: 5px;
    right: 0px;
    left:auto;
}
.lighthouse-canvas .Browser.iconHidden .browserToolIcon
{
    top: 0px;
    left: 0px;
    opacity: 0.3;
}
.lighthouse-canvas.runtime .Browser.iconHidden .browserToolIcon
{
    display:none !important;
}
.lighthouse-canvas.runtime > div.ExtendedTextInteraction[widget]
{
    opacity: 0;
}
.lighthouse-canvas .Browser.iconBottomRight .browserToolIcon
{
    bottom: 5px;
    right: 0px;
    left:auto;
}

.lighthouse-canvas .Browser.activated.fullCanvas
{
    position: absolute;
    top: 5px !important;
    left:0px !important;
    width: 98% !important;
    height: 96% !important;
}
.browserToolIcon
{
    display:inline-block;
    width: 40px;
    height: 40px;
    font-size:36px;
    color:#006dc5;
    margin: 0px 4px;
    border: none;
}
  .browserToolIcon::after {
    content: "\f108";
  }
.runtime .browserToolIcon:hover
{
    cursor: pointer;
    opacity: 0.8;
}

.lighthouse-canvas .Browser .loading
{
    position: absolute;
    top: 40px;
    left:0px;
    background-color: rgba(0,0,0,0.1);
}
.lighthouse-canvas .Browser .loading img
{
    margin-left: 45%;
    margin-right: 45%;
}

.TabbedBox > ul
{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-padding-start: 0px;
}

.TabbedBox > div.contentDiv
{
    padding: 20px 20px 20px 20px;
    border: solid 1px #ddd;
    overflow: auto;
    box-shadow: 2px 2px 3px rgb(160,160,160);
}

.TabbedBox > ul li.tab
{
    height:22px;
    display: table-cell;
    cursor: pointer;
    white-space: nowrap;
    border: solid 1px #ddd;
    background: rgb(244,244,244);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding-left: 18px;
    padding-right: 18px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin: 0px;
    position: relative;
    top: 1px;
}
.TabbedBox > ul li.tab.active
{
    background: rgb(255,255,255);
    cursor: default;
    border-bottom: none;
}

#tabbedBoxEditSelector
{
    position: absolute;
}
#tabbedBoxEditSelector div
{
    padding: 5px;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 9%,rgba(243,243,243,1) 100%);
    border: solid 1px #eee;
}
#tabbedBoxEditSelector input
{
    height: 20px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: normal;
    font-family: 'Open Sans';
    padding: 0px;
    background: linear-gradient(to bottom, rgba(244,247,249,1) 0%,rgba(254,255,255,1) 57%);
    border: solid 1px #ccc;
}
.markerButton
{
    font-size: 12px;
    margin:2px;
    background: rgba(128, 128, 128, 0.1);
    border-radius: 5px;
    width:35px;
    padding-left:6px;
    padding-top:2px;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);

    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.activeMarkerButton
{
    background:rgba(0, 0, 0, 0.2);
}
tspan {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;

    -ms-user-select: none;
    user-select: none;
}
.leftIndent {
    margin-left: 25px;
}

.hintTip
{
    padding: 4px 6px;
    background-color: #000;
    border-radius: 4px;
    color: #fff;
    position: absolute;
    z-index: 99;
    font-size: 12px;
}
.partitionChangeMessage
{
    background-color:rgb(245,245,250);
}

 .hintTip
{
    -webkit-animation:slowhide 5s;
    -moz-animation:slowhide 5s;
    -o-animation:slowhide 5s;
    animation:slowhide 5s;
    opacity:0;
}

@keyframes slowhide
{
    0%  { opacity:1;}
    99% { opacity:1;}
    100%{ opacity:0;}
}

@-moz-keyframes slowhide /* Firefox */
{
    0%  { opacity:1;}
    99% { opacity:1;}
    100%{ opacity:0;}
}

@-webkit-keyframes slowhide /* Safari 和 Chrome */
{
    0%  { opacity:1;}
    99% { opacity:1;}
    100%{ opacity:0;}
}

@-o-keyframes slowhide /* Opera */
{
    0%  { opacity:1;}
    99% { opacity:1;}
    100%{ opacity:0;}
}

/*The following are for keyword Translation*/

.translationContainer
{
    background-color: #FFFFFF;
    color:#000000;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
    width: 200px;
    border: 2px solid #3A74B0;
    border-radius: 5px;
    padding-bottom: 26px;
    position:absolute;
    z-index: 5;
}
/*this is necessary to overwirte the default hover css set on the page*/
.translationContainer:hover {
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) !important;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3) !important;
}
.languageBar
{
    height:15px;
    margin-left:5px;
    display:table;
    cursor:pointer;
}
.tagHolder
{
    display: table-cell;
    color:#3A74B0;
}
.ltag
{
    width:70px;
    white-space:nowrap;
    text-align:center;
    border-right: 2px solid #3A74B0;
    padding: 0 4px 2px 4px;
    cursor: pointer;
}
.selectedLtag .ltag
{
    background-color: #3A74B0;
    color: #fff;
}

.translationContent
{
    margin-top: 0px;
    max-height:400px;
    padding: 8px;
    border-top:2px solid #3A74B0;
    border-radius:5px;
    overflow: auto;
}

.translationClose
{
    position:absolute;
    right: -5px;
    top: -5px;
    width: 20px;
    height: 20px;
    display:inline-block;
    background-image: url(44ceab97843475e30007.png);
    cursor:pointer;
}

.keyword{
    border-top: 1px dotted gray;
    border-bottom: 1px dotted gray;
}
.keyword.inactive {
    border-top: none;
    border-bottom: none;
}

/* mce container style*/
.lighthouseMCE {
  z-index: 99;
  opacity:0;
  -webkit-transition: opacity .5s;
  transition: opacity .5s;
}
  .lighthouseMCE:not(.ready) {
    display:none !important;
  }
  .lighthouseMCE.ready {
    display:block;
    opacity:1;
  }
  .lighthouseMCE.processing {
    display:block;
    opacity:0;
  }
  .lighthouseMCE.syncEnabled {
    position:absolute;
  }
  .lighthouseMCE > .mce-tinymce {
    width:100%;
    border-color: rgb(221, 221, 221);
  }
  .lighthouseMCE .mce-edit-area {
    border-width:1px 0px 0px 0px !important;
  }
.lighthouseMCE iframe
{
  background:transparent !important;
}
.lighthouseMCE.spellchecking {
  pointer-events: none;
}
  .lighthouseMCE.spellchecking > .mce-container {
    opacity: 0.8;
  }
    .lighthouseMCE.spellchecking > .mce-container .mce-edit-area {
      opacity: .5;
      filter: blur(2px);
    }
  .lighthouseMCE.spellchecking::after {
    content: "Spell Checking";
    position:absolute;
    top:50%;
    left:0;
    width:100%;
    z-index:2;
    text-align:center;
    margin-top:-.5em;
    color: #666;
    font-size: 2em;
    animation: blinker 2s linear infinite;
    -webkit-animation: blinker 2s linear infinite;
  }
.mce-notification {
  display:none;
}
.mce-floatpanel {
  z-index: 1000 !important;
}
#mce-modal-block {
  z-index: 999 !important;
}
.ios_ghost_input {
    opacity:0;
    position:absolute;
    display:none;
}
.lighthouseMCE .ios_ghost_div {
  opacity:0;
  position:absolute;
  z-index:-1;
  pointer-events:none;
}
.lighthouseMCE .wordcountbar
{
    width:100%;
    padding:5px 0px;
    text-align:right;
    font-size:12px;
    color:#555;
    border-bottom:1px solid #ddd;
    border-right:1px solid #ddd;
    border-left:1px solid #ddd;
    position: relative;
    display:none;
}
  .lighthouseMCE.wordcountEnabled .wordcountbar {
    display:block;
  }
.lighthouseMCE .wordcountbar #wordcount
{
    min-width:20px;
    color:Black;
    display:inline-block;
    margin-right:5px;
}
.lighthouseMCE .wordcountbar #wordcount.alert
{
    color:Red;
}
.lighthouseMCE .mce-math-button, .lighthouseMCE .mce-spellchecker-button {
  display:none;
}
  .lighthouseMCE.expressionEnabled .mce-math-button {
    display:inline-block;
  }
  .lighthouseMCE.spellcheckerEnabled .mce-spellchecker-button {
    display:inline-block;
  }
.lighthouseMCE .mce-toolbar .mce-btn i {
  color:inherit !important;
}

.lighthouseMCE .mce-toolbar .mce-btn {
    padding: 3px;
}

.lighthouseMCE .mce-toolbar .mce-btn:hover {
    background: #fff;
    box-shadow: 0px 0px 2px #888;
}

.mce-ico.mce-i-indentline {
    mask-image: url(97832c3f3c28967b14a6.svg);
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    background-color: #333;
}

.GoalBox.available > div
{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    background-color:rgba(200,200,255,0.3);
}
.GoalBox.invisibleGoalBox
{
    border-style: none !important;
}
.DragBox.placeholder
{
    position:absolute;
    border:1px dashed rgb(200,200,255);
}

.lighthouse-canvas  div.ExtendedText .TextResponseString
{
    margin:2px;
    box-shadow:0px 0px 1px rgba(0,0,0,0.5);
}
.lighthouse-canvas div.ExtendedText .delete
{
    font-family: Open Sans;
    font-size: 14px;
    position: absolute;
    color: #fff;
    background-color:rgba(0,0,0,0.2);
    border-radius: 12px;
    width: 20px;
    height: 20px;
    right: 2px;
    top: -10px;
    text-align: center;
    cursor: pointer;
    z-index: 101;
    display:none;
}
.lighthouse-canvas div.ExtendedText .delete.show
{
    display:block;
}
.lighthouse-canvas div.ExtendedText .add-string
{
    text-align:center;
    height:10px;
    margin-bottom:10px;
}
.lighthouse-canvas div.ExtendedText .add-string .add-button
{
    font-size: 15px;
    width: 50px;
    height: 10px;
    padding-bottom: 10px;
    border-radius: 0px 0px 20px 20px;
    margin: 0px auto;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.5);
    display:none;
    cursor:pointer;
}
.lighthouse-canvas div.ExtendedText .add-string.show .add-button
{
    display:block;
}
.lighthouse-canvas div.ExtendedText > .wordcountbar #wordcount
{
    min-width: 20px;
    color: black;
    display: inline;
}

.lighthouse-canvas .MathResponse .editorObject
{
    color: #ddd;
    font-style:italic;
}

.lighthouse-canvas .MathResponse
{
    font-size: 1.4rem;
    display:block;
}
.lighthouse-canvas .MathResponse .mq-root-block, .lighthouse-canvas .MathResponse .mq-math-mode .mq-root-block {
    white-space:normal;
}
.lighthouse-canvas .MathResponse #backgroundText {
    font-style: italic;
    text-align: center;
}
.lighthouse-canvas .MathResponse[data-latex]:not([data-latex=""])::after {
    content:none;
}
.lighthouse-canvas [widget].NestedMathResponse {
    font-size: 24px; /* sync shown math expressions to mathquill editor's font size */
}
.lighthouse-canvas .NestedMathResponse .nestedMathPlaceholder {
    opacity: 0.7;
    font-family: 'Times New Roman';
    font-style: 'italic';
    font-size: 1.4rem;
}
.lighthouse-canvas .NestedMathResponse .duplicateVar {
    color: #f00;
    font-weight: bold;
}

.lighthouse-canvas .NestedMathResponse .responseVar {
    color: #999;
    vertical-align: 0%;
    background: #ffffdd;
    padding: 3px 6px 0px 6px;
    display: inline-block;
    border: dashed 2px #666;
    width: 32px;
    min-height: 31px;
}
.lighthouse-canvas .NestedMathResponse .mq-sup .responseVar {
    padding: 4px 4px 0px 8px;
}
.lighthouse-canvas .NestedMathResponse .mq-fraction .responseVar {
    padding: 4px 6px 0px 5px;
    position: relative;
    top: -1px;
}
.lighthouse-canvas.runtime .NestedMathResponse .mResponse,
.lighthouse-canvas.runtime .NestedMathResponse input[type="text"] {
    position: relative;
    top: -2px; /* mathquill rendering is quirky and these rules help display behavior */
    background: rgba(255,255,0,0.3);
    vertical-align: 0%;
    padding: 1px 2px 0px 0px;
    display: inline-block;
    text-align: center;
    border: dashed 2px #666;
    width: 32px;
    min-height: 31px;
    font-family: Symbola, 'Times New Roman';
    /* to enable input width animation on NestedMathResponse, uncomment
    transition: width 0.05s ease-out;
    */
}
.lighthouse-canvas.runtime .NestedMathResponse .mResponse:hover {
    cursor: pointer;
    background: rgba(0,255,255,0.2);
}
.lighthouse-canvas.runtime .NestedMathResponse .mq-sup .mResponse {
    padding: 4px 2px 0px 0px;
    top: 0px;
}

.lighthouse-canvas.runtime .NestedMathResponse .mq-fraction .mResponse {
    vertical-align: -8%;
    padding: 4px 2px 0px 0px;
    top: -1px;
}
.lighthouse-canvas.runtime .NestedMathResponse .mResponse .mq-root-block {
    padding: 0px;
    overflow: visible;
}
.lighthouse-canvas .NestedMathResponse .mResponse .mq-root-block::after {
    content: '' !important;
}

.lighthouse-canvas .GridWidget
{
    width:auto;
    height:auto;
    min-width:120px;
    min-height:120px;
    background-repeat:no-repeat;
}
.lighthouse-canvas .GridWidget > *
{
    position:absolute;
}
.lighthouse-canvas .GridWidget > img
{
    display:none;
}
.lighthouse-canvas .GridWidget > img.rSelected
{
    display:block;
}
.mce-rotated-text
{
  transform: rotate(-90deg);
}

.lighthouse-canvas .GapMatchAnswers {
    display: block;
    margin-top: 20px;
}

.lighthouse-canvas .GapMatchAnswer {
    margin: 5px 8px;
    display: inline-block;
    position: relative;
}

.lighthouse-canvas .GapMatch.clickmode .GapMatchAnswer, .lighthouse-canvas .GapMatch.clickmode .GapMatchAnswerClone {
    cursor: pointer;
}
.lighthouse-canvas.runtime .GapMatch .GapMatchAnswer, .lighthouse-canvas.runtime .GraphicGapMatch .GraphicAnswer {
    transition: opacity 0.2s;
    touch-action: none;
}
.lighthouse-canvas.runtime .GapMatch .GapMatchAnswerClone, .lighthouse-canvas.runtime .GraphicGapMatch .GraphicAnswerClone {
    transition: all 0.3s;
}

.lighthouse-canvas.runtime .GapMatch .GapMatchAnswerClone > img,
.lighthouse-canvas.runtime .GraphicGapMatch .GraphicAnswerClone > img {
    max-width: unset;
    max-height: unset;
}

.lighthouse-canvas .GapMatch.answersTop {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}
.lighthouse-canvas .GapMatch.answersTop .GapMatchAnswers {
    margin-top: 0px;
    margin-bottom: 20px;
    flex: 0;
}

.lighthouse-canvas .GapMatch.answersLeft {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}
.lighthouse-canvas .GapMatch.answersLeft .GapMatchAnswers {
    margin-top: 0px;
    margin-right: 20px;
    flex: 0;
}

.lighthouse-canvas .GapMatch.answersRight {
    display: flex;
    flex-direction: row;
}
.lighthouse-canvas .GapMatch.answersRight .GapMatchAnswers {
    margin-top: 0px;
    margin-left: 20px;
    flex: 0;
}

/* buttonStyle is now the DEFAULT style*/
.lighthouse-canvas .GapMatchAnswer, .lighthouse-canvas .GapMatchAnswerClone {
    padding: 0px 10px;
    border-radius: 6px;
    border: solid 1px #ccc;
    background: rgb(221,221,221);
    background: linear-gradient(0deg, rgba(221,221,221,1) 0%, rgba(255,255,255,1) 80%);
    vertical-align: top;
    text-align: center;
}

.lighthouse-canvas .GapMatchAnswer.noStyle, .lighthouse-canvas .GapMatchAnswerClone.noStyle {
    padding: 0px 2px;
    border: none;
    background: transparent;
}

.lighthouse-canvas.runtime .animated {
    transition: all 0.2s !important;
}

.lighthouse-canvas.runtime .noanimation {
    transition: none !important;
}
.lighthouse-canvas.runtime .GapMatch.dragmode .GapMatchAnswer, .lighthouse-canvas.runtime .GapMatch.dragmode .GapMatchAnswerClone,
.lighthouse-canvas.runtime .GraphicGap .GraphicAnswer, .lighthouse-canvas.runtime .GraphicAnswerClone {
    cursor: grab;
    touch-action: none;
}

.lighthouse-canvas.runtime .GapMatchAnswer.dragging, .lighthouse-canvas.runtime .GapMatchAnswerClone.dragging
 {
    cursor: grabbing !important;
    transition: all 0s !important;
    z-index: 99 !important;
}

.lighthouse-canvas .GapMatchAnswerClone, .lighthouse-canvas .GraphicAnswerClone {
    position: absolute;
}
.lighthouse-canvas .GapMatchAnswer p {
    display: inline;
}

.lighthouse-canvas .GapMatchGoal {
    display: inline-block;
    vertical-align: -20%;
    border-radius: 4px;
    box-shadow: #888 0px 0px 4px inset;
}

.lighthouse-canvas p.autoNumPara, .lighthouse-canvas p.autoNumPoem {
    position: relative;
    margin-left: 40px;
}

.lighthouse-canvas p .autoNum {
    position: absolute;
    left: -40px;
    min-width: 20px;
    text-align: right;
    font-weight: bold;
}

.lighthouse-canvas .GraphicGaps {
    position: relative;
}
.lighthouse-canvas .GraphicGap {
    border: solid 2px #555;
    border-radius: 2px;
    position: absolute;
    background: #f7f7f7;
    z-index: 2;
    font-size: 1.2rem;
    text-align: center;
    color: rgba(0,0,0,0.5);
}

.lighthouse-canvas .GraphicGap:hover {
    box-shadow: 0px 0px 2px 2px #06f;
    cursor: move;
}

.lighthouse-canvas.runtime .GraphicGap:hover {
    box-shadow: none;
    cursor: default;
}

.lighthouse-canvas .GraphicStem {
    margin-bottom: 15px;
}

.lighthouse-canvas .GraphicAnswer {
    border: dashed 2px #aaa;
    margin: 5px;
    display: inline-block;
    position:relative;
    vertical-align: middle;

    /* font-size is only affecting "Choose Answer" label */
    font-size: 0.8rem;
    text-align: center;
}

.lighthouse-canvas .GraphicAnswer.initial {
    width: 70px;
    height: 70px;
}
.lighthouse-canvas .GraphicAnswer:hover {
    cursor: pointer;
    box-shadow: 0px 0px 2px 2px #06f;
}
.lighthouse-canvas.runtime .GraphicAnswer:hover {
    cursor: default;
    box-shadow: none;
}

.lighthouse-canvas.runtime .GraphicAnswer, .lighthouse-canvas.runtime .GraphicAnswer:hover {
    border: none;
    box-shadow: none;
}

.lighthouse-canvas.runtime .GraphicAnswer, .lighthouse-canvas.runtime .GraphicAnswerClone {
    transform-origin: 50% 50%;
    z-index: 6;
}
.lighthouse-canvas.runtime .GraphicAnswer:hover, .lighthouse-canvas.runtime .GraphicAnswerClone:hover {
    cursor: grab;
}

.lighthouse-canvas.runtime .GraphicAnswer.dragging, .lighthouse-canvas.runtime .GraphicAnswerClone.dragging {
    cursor: grabbing !important;
    transition: all 0s !important;
}

.lighthouse-canvas .GraphicGap.highlight {
    box-shadow: 0px 0px 14px 4px #28f;
}

.lighthouse-canvas .GraphicGaps button {
    padding: 8px 12px;
    margin: 6px;
    border: dashed 2px #888;
    border-radius: 6px;
}

.lighthouse-canvas .GraphicGaps button:hover {
    box-shadow: 0px 0px 2px 2px #06f;
}

.SliderContainer[data-display-scale="false"] .slider-container-scale-group {
    display: none;
}

.SliderContainer .slider-container__svg--has-img .slider-container-group {
    transform: translate(1px, 1px);
}

.lighthouse-canvas .ShapeTransform .STArea {
    display: flex;
}
.lighthouse-canvas .ShapeTransform .STGraph svg {
    overflow: visible !important;
}
.lighthouse-canvas .ShapeTransform .STGraph {
    margin-top: 20px;
}

.lighthouse-canvas .ShapeTransform .STTransform {
    padding: 20px 50px 50px 20px;
    position: relative;
    z-index: 9;
    overflow: visible; /* avoid scrollbars when shapes are dragged around */
}

.lighthouse-canvas.runtime .ShapeTransform .STTransform {
    cursor: grab;
    touch-action: none;
}

.lighthouse-canvas.runtime .ShapeTransform .STTransform.animated {
    transition: 0.2s top left;
}

.lighthouse-canvas.runtime .ShapeTransform .STTransform.disabled {
    cursor: default;
    opacity: 0.4;
}
.lighthouse-canvas.runtime .ShapeTransform .STTransform.dragging {
    cursor: grabbing;
}

.lighthouse-canvas .ShapeTransform .STTransforms {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.lighthouse-canvas > div[widget="SliderContainer"]
{
    padding: 0;
}
.lighthouse-canvas > div[widget="SliderContainer"] .slider-container-handle
{
    position: absolute;
}

/* table sorter column styles */
table.sortedTable th
{   
    box-sizing: border-box;
    ms-box-sizing: border-box;
    webkit-box-sizing: border-box;
    moz-box-sizing: border-box;
    height:20px;
    background-image: url(3db6ef402fb7e1330efe.gif);
    background-repeat:no-repeat;
    background-position: left center;
    padding-left:18px;
    padding-right:5px;
}
table.sortedTable th.tablesorter-headerDesc { background-image: url(4812cae60ee686dd1794.gif); }
table.sortedTable th.tablesorter-headerAsc { background-image: url(af174707dccc83a8785b.gif); }
table.sortedTable td textarea { width: 100%; height: 100%; }
table.sortedTable th input { width: 100%; }
table.sortedTable th input.disabled 
{
    border: none;
    cursor: default;
}
div.runtime table.sortedTable th input
{
    color: inherit;
    background: transparent;
}

.styleTab 
{
    position: absolute ; z-index: 99; 
    max-width: 415px;
}
.style_selector 
{
    width: 60px;
    height: 40px;
    margin: 5px;
    cursor: pointer;
    display:inline-block;
}
#style-customcss textarea 
{
    font-family: Courier New;
    font-size: 0.9em;
    width: 100%;
    height: 100px;
}

/*All the styles. All properties marked to override default, inline widget properties. Change this later?*/
.default_style, .lighthouse-canvas div.default_style[widget]
{
    border: none 0px;
    background: transparent;
    color: Black;
}      

.default_draggable_style, .lighthouse-canvas div.default_draggable_style[widget],
.default_draggable, .lighthouse-canvas div.default_draggable[widget]
{
    border: none 0px;
    background: white;
    box-shadow: inset 0 0 3px 2px !important;
    border-radius:5px;
}

.darkborder_style, .lighthouse-canvas div.darkborder_style[widget] 
{
    border: solid 2px #888;
    background: white;
}

.blacktrans_style, .lighthouse-canvas div.blacktrans_style[widget]
{
    background: transparent;
    color: Black;
    border: solid black 2px;
}         

.grey_style, .lighthouse-canvas div.grey_style[widget]
{
    background: #e5e5e5;
    color: black;
    border: solid #b2b2b2 3px;
}

.blackwhite_style, .lighthouse-canvas div.blackwhite_style[widget]
{
    background: white ;
    color: Black;
    border: solid black 2px;
}         


.greenborder_style, .lighthouse-canvas div.greenborder_style[widget]
{
    background: white ;
    color: Black;
    border: solid #a1dd7c 2px;
}

.redborder_style, .lighthouse-canvas div.redborder_style[widget]
{
    background: white ;
    color: Black;
    border: solid #ea9191 2px;
}

.blueborder_style, .lighthouse-canvas div.blueborder_style[widget]
{
    background: white ;
    color: Black;
    border: solid #66c7f4 2px;
}

.yellowborder_style, .lighthouse-canvas div.yellowborder_style[widget]
{
    background: white ;
    color: Black;
    border: solid #f2f287 2px;
}

.greenbg_style, .lighthouse-canvas div.greenbg_style[widget] 
{
    border: none 0px;
    background: #a1dd7c;
    color: Black;
}      

.redbg_style, .lighthouse-canvas div.redbg_style[widget] 
{
    border: none 0px;
    background: #ea9191;
    color: Black;
}      

.bluebg_style, .lighthouse-canvas div.bluebg_style[widget] 
{
    border: none 0px;
    background: #66c7f4;
    color: Black;
}      

.yellowbg_style, .lighthouse-canvas div.yellowbg_style[widget] 
{
    border: none 0px;
    background: #f2f287;
    color: Black;
}      

.lighthouse_style, .lighthouse-canvas div.lighthouse_style[widget] 
{
    border: outset #084c9e 4px;
    background: #f7f7f7;
    color: #084c9e;
}     

.chalkboard_style, .lighthouse-canvas div.chalkboard_style[widget] 
{
    border: ridge #d3ae81 7px ;
    background: #4a8250;
    color: white;
}     

.stitched_input, .lighthouse-canvas div.stitched_input[widget] 
{
    background: #f7ffff;
    color: Black;
    border: dashed grey 1px;
}

.stitched_input:hover, .lighthouse-canvas div.stitched_input[widget]:hover 
{
    background: #fff;
}

.stitched_style, .lighthouse-canvas div.stitched_style[widget] 
{
    background: #f7f7f7;
    color: Black;
    border: dashed grey 2px;
}
                 

.greywhite_style, .lighthouse-canvas div.greywhite_style[widget] 
{
    background: white;
    color: Black;
    border: solid #b2b2b2 3px;
}

.green_style, .lighthouse-canvas div.green_style[widget] 
{
    background: #C7E1BA;
    color: black;
    border: solid #628B61 3px;
}


   
.blue_style, .lighthouse-canvas div.blue_style[widget] 
{
    background: #def;
    color: black;
    border: solid #6ad 3px;
}

.red_style, .lighthouse-canvas div.red_style[widget] 
{
    background: #eab4b4;
    color: black;
    border: solid #a34646 3px;
}    

.paper_style, .lighthouse-canvas div.paper_style[widget] 
{
    background-color: white;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQoJCTxzdG9wIG9mZnNldD0iMC45NTY4OTciIHN0b3AtY29sb3I9InJnYigyNTUsIDI1NSwgMTcwKSIvPg0KCQk8c3RvcCBvZmZzZXQ9IjAuOTU2ODk3IiBzdG9wLWNvbG9yPSJyZ2IoMjU1LCAyNTUsIDE3MCkiLz4NCgkJPHN0b3Agb2Zmc2V0PSIwLjk1Njg5NyIgc3RvcC1jb2xvcj0icmdiKDE5NywgMjE1LCAyMzQpIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz4NCjwvc3ZnPg==);
    -webkit-background-size:  100% 22px;
    background-size: 100% 22px;
    border: double #e8785c 3px;
    box-shadow:3px 3px 3px #bcbcbc
}    

/*For the template previews*/

.paper_style-preview
{
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPg0KCTxsaW5lYXJHcmFkaWVudCBpZD0iZzEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+DQoJCTxzdG9wIG9mZnNldD0iMC44NjIwNjkiIHN0b3AtY29sb3I9IiNmZmZmYWEiLz4NCgkJPHN0b3Agb2Zmc2V0PSIwLjg2MjA2OSIgc3RvcC1jb2xvcj0iI2ZmZmZhYSIvPg0KCQk8c3RvcCBvZmZzZXQ9IjAuODYyMDY5IiBzdG9wLWNvbG9yPSIjYzVkN2VhIi8+DQoJPC9saW5lYXJHcmFkaWVudD4NCgk8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2cxKSIgLz4NCjwvc3ZnPg==);
    -webkit-background-size:  100% 10px;
    background-size: 100% 10px;
    border: groove #e8785c 2px;
}
.default_style-preview
{
    text-align:center;
    padding-top: 8px;
    border: solid #fff 2px;
    background-image: url(/Lighthouse2/Assets/default/Js/lighthouse/editor/jpicker/images/map-opacity.png);
    background: transparent ;
    color: Black;
    border-radius:2px;
    vertical-align:top;

}
.default_draggable_style-preview 
{
    box-shadow: 2px 2px 3px 0px #ccc;
    border-radius:5px;
}
.darkborder_style-preview
{
    border: solid 2px #888;
    border-radius: 2px;
}

.greenbg_style-preview
{
    border: solid #a1dd7c 2px ;
    background: #a1dd7c ;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
}      
.redbg_style-preview
{
    border: solid #ea9191 2px ;
    background: #ea9191;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
}      

.bluebg_style-preview
{
    border: solid #66c7f4 2px ;
    background: #66c7f4 ;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
}      

.yellowbg_style-preview
{
    border: solid #f2f287 2px ;
    background: #f2f287 ;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
}      



.lighthouse_style-preview
{
    border: outset #084c9e 2px ;
    background: #f7f7f7 ;
    color: #084c9e ;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}     

.chalkboard_style-preview
{
    border: ridge #d3ae81 2px ;
    background: #4a8250;
    color: white;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}     

.stitched_style-preview
{
    background: #f7f7f7 ;
    color: Black ;
    border: dashed grey 2px;
    border-radius:2px;
}
.stitched_input-preview
{
    background: #f7ffff ;
    color: Black ;
    border: dashed grey 1px;
    border-radius:2px;
}         
.blackwhite_style-preview
{
    background: white;
    color: Black ;
    border: solid black 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}        

.blacktrans_style-preview
{
    background: white;
    color: Black ;
    background-image: url(/Lighthouse2/Assets/default/Js/lighthouse/editor/jpicker/images/map-opacity.png);
    border: solid black 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}         

.greenborder_style-preview
{
    background: white;
    color: Black ;
    border: solid #a1dd7c 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}        

.redborder_style-preview
{
    background: white;
    color: Black ;
    border: solid #ea9191 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}        

.yellowborder_style-preview
{
    background: white;
    color: Black ;
    border: solid #f2f287 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}        

.blueborder_style-preview
{
    background: white;
    color: Black ;
    border: solid #66c7f4 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}        

.greywhite_style-preview
{
    background: white ;
    color: Black;
    border: solid #b2b2b2 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0 
}

.green_style-preview
{
    background: #C7E1BA;
    color: black;
    border: solid #628B61 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
}

.grey_style-preview
{
    background: #e5e5e5;
    color: black;
    border: solid #b2b2b2 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
}
   
.blue_style-preview
{
    background: #def;
    color: black;
    border: solid #6ad 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
}

.red_style-preview
{
    background: #eab4b4;
    color: black;
    border: solid #a34646 2px;
    border-radius:2px;
    box-shadow: 0px 0px 0px 0px #e0e0e0
} 

.lighthouse-canvas .MathResponse 
{
    background: #f7f7f7;
    color: #717171;
    border: dashed grey 2px;
}

[class*="bg_template-"] .lighthouse-canvas.runtime div.MathResponse,
[class*="bg_template-"] * .lighthouse-canvas.runtime div.MathResponse
{
    background: inherit;
    color: inherit;
}
        


.lighthouse-canvas div.Barchart,.lighthouse-canvas div.Linechart
{
    overflow: visible; 
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
}

.barchartArea.active , .linechartArea.active
{
     cursor:move;
     cursor:grabbing;
     cursor:-moz-grabbing;
     cursor:-webkit-grabbing;
}

ellipse.hover , circle.hover, rect.hover, ellipse.drag , circle.drag, rect.drag
{
    opacity:0.6; 
}



/* circuit widget */

.Circuit {
    max-height: none !important;
}

.circuitTool_battery
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -80px 0px;
}

.circuitTool_batterycell
{
    height: 40px;
    width: 40px;
    background: url(0f6d4386c82d9124aa57.png);
}

.circuitTool_motor
{
    height: 40px;
    width: 40px;
    background: url(ded8b9ce4212dbed3e31.png);
}

.circuitTool_loudspeaker
{
    height: 40px;
    width: 40px;
    background: url(629679e3e82530cd2ded.png);
}

.circuitTool_photoresistor
{
    height: 40px;
    width: 40px;
    background: url(60ff4a0e81d90e159d63.png);
}

.circuitTool_lamp
{
    height: 40px;
    width: 40px;
    background: url(003ffefc1c14536f3f24.png);
}

.circuitTool_capacitor
{
    height: 40px;
    width: 40px;
    background: url(f375ebf22ea9ae1c280e.png);
}

.circuitTool_voltmeter
{
    height: 40px;
    width: 40px;
    background: url(ff556a1b8e6410c08f99.png);
}

.circuitTool_ammeter
{
    height: 40px;
    width: 40px;
    background: url(528d6b06c68bcfd2541b.png);
}

.circuitTool_buzzer
{
    height: 40px;
    width: 40px;
    background: url(677b441c4ad4557f1fe9.png);
}

.circuitTool_ground
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -80px -40px;
}

.circuitTool_intersection
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -200px -40px;
}

.circuitTool_led
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -120px 0px;
}

.circuitTool_potentiometer
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -120px -40px;
    
}

.circuitTool_resistor
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -160px 0px;
}

.circuitTool_rheostat
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -200px 0px;
}

.circuitTool_switch
{
    height: 40px;
    width: 40px;
    background: url(c1edcde038287b5c4575.png);
    background-position: -160px -40px;
}

.circuitBreadboard
{
    display: table-cell;
    vertical-align: top;
    width: 100%;
    min-width: 200px;
    border-right: 1px solid black;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background: url(c0d7fa5dd11e3f39cc52.png) repeat;
}

.circuitToolbox
{
    display: table-cell;
    vertical-align: top;
    min-width: 150px;
    border: 1px solid black;
    background-color: white;
    padding: 10px;
}

.circuitToolboxComponent
{
    display: table;
    padding: 5px 0px;
}

.circuitToolboxComponent:not([data-type=intersection])
{
    background-color: rgba(255, 255, 255, 0.0);
}

.circuitToolboxComponent > div:hover
{
    cursor: move;
}

.circuitToolboxComponent span {
    padding-left:5px;
    display: table-cell;
    vertical-align: middle;
}

.circuitComponentRemoveChoice
{
    margin: 5px;
    padding: 5px;
}

.circuitComponentInstance
{
    z-index: 40;
    font-size: x-small;
    padding: 0 !important;
    position: absolute;
}

.circuitWire:hover
{
    cursor: pointer;
}

.circuitComponentRotateHandle
{
    position: absolute;
    top: 0;
    right: 0;
    visibility: hidden;
    cursor: pointer;
    width: 16px;
    height: 16px;
    background: url(c1edcde038287b5c4575.png);
    background-position: 0px -110px;
}

div:hover > .circuitComponentRotateHandle
{
    visibility: visible;
}

[data-rotation=circuitComponentRotate0] > div
{
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

[data-rotation=circuitComponentRotate90] > div
{
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
}

[data-rotation=circuitComponentRotate180] > div
{
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

[data-rotation=circuitComponentRotate270] > div
{
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
}

.circuitTerminal
{
    width: 5px;
    height: 5px;
    position: absolute;
    z-index: 60;
    padding:5px;
}

.circuitTerminal>div
{
    border: 1px solid black;
    border-radius:3px;
    background: white;
    width: 5px;
    height: 5px;
    position: absolute;
    z-index: 60;
}

.circuitTerminal[data-haswire] {
    visibility: hidden;
}
.circuitTerminalExtension{
    width: 5px;
    height: 5px;
    position: absolute;
    z-index: 60;
    padding:5px;
}
.circuitTerminalExtension>div
{
    border: 1px solid black;
    border-radius:3px;
    background: white;
    width: 5px;
    height: 5px;
    position: absolute;
    z-index: 60;
}
.circuitTerminal>div:hover
{
    border: 1px solid red;
}
.circuitTerminal:hover
{
    cursor: pointer !important;
}
.circuitTerminalExtension>div:hover
{
    border: 1px solid red;
}
.circuitTerminalExtension:hover
{
    cursor: pointer !important;
}

div:hover > .circuitTerminal
{
    visibility: visible;
}

div:hover > .circuitTerminal[data-haswire]
{
    visibility: hidden;
}

.circuitBreadboardSelected:not(.circuitWire) {
    border: 1px dotted red;
    margin:0!important;
}

.circuitBreadboardSelected ~ .circuitTerminal
{
    visibility: visible;
}

.circuitBreadboardSelected ~ .circuitTerminal[data-haswire]
{
    visibility: hidden;
}

.circuitComponentInstance > div:not(.circuitTerminal)
{
    margin:1px;
}

.circuitWireSegment
{
    position: absolute;
}

div > .circuitWireSegmentVertical > div
{
    border-left: 2px solid rgba(0,0,0,0.5);
}

div > .circuitWireSegmentHorizontal > div
{
    border-top: 2px solid rgba(0,0,0,0.5);
}

div.circuitBreadboardSelected > .circuitWireSegmentVertical > div
{
    border-left: 2px solid red;
}

div.circuitBreadboardSelected > .circuitWireSegmentHorizontal > div
{
    border-top: 2px solid red;
}

.hasCurrent > .circuitWireSegmentVertical > div
{
    border-left: 2px solid blue;
}

.hasCurrent > .circuitWireSegmentHorizontal > div
{
    border-top: 2px solid blue;
}
.circuitWireSegmentVertical > div
{
    margin: 0px 4px;
}

.circuitWireSegmentHorizontal > div
{
    margin: 4px 0px;
}

.circuitComponentDescription {
    max-width: 55px;
    max-height:15px;
    margin-top:-20px;
}

.componentEdit {
    background: linear-gradient(to bottom, #EEE 31%, #DDD 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #CCC;
    display: inline-block;
    cursor:pointer;
}

.componentEditActive {
    background: linear-gradient(to bottom, #ddd 31%, #eee 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.componentInfo {
    border: 1px solid black;
    background:white;
    height:95px;
    width:95px;
}
.componentInfo li {
    margin-left: 2px;
    list-style-type: none;
}
.simulatorWarning {
    font-size:11px;
    color:red;
}
.simulatorReady {
    font-size:11px;
    color:black;
}

.lighthouse-canvas div[widget].Columns 
{
    display: block;
    padding: 0px;
}
.lighthouse-canvas div[widget].Columns.editing .Column
{
    outline: dotted 1px #ccc;
}
.lighthouse-canvas .Columns:hover 
{
    outline: none !important;
    box-shadow: none !important;
}
.lighthouse-canvas .Columns > div 
{
    display:table;
    table-layout: fixed;
    width:100%;
}
.lighthouse-canvas .Column
{
    display:table-cell;
    position:relative;
    vertical-align:top;
}
.lighthouse-canvas .Column.empty 
{
    height: 40px;
}
.lighthouse-canvas .Columns > div > .Column.selected, .lighthouse-canvas .Columns > div > .Column.selected:hover
{
    outline: solid 2px #abc !important;
}
.lighthouse-canvas .Column > .resizeHandle 
{
    width: 8px;
    height: 8px;
    outline: dotted 1px #036;
    z-index:99;
}

.StimulusColumns > .Column > .resizeHandle 
{
    display: none;
}


.lighthouse-canvas div.CompassTool
{
    display: table;
}
.CompassTool div[class*="compasstool"]
{
    display: table-row;
}
.CompassTool div[class*="compasstoolToolbar"]
{
    display: table-cell;
    vertical-align: top;
}
.CompassTool div[class*="compasstoolToolbar"] .button
{
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 5px 10px;
}
.CompassTool div[class*="compasstoolArea"]
{
    display: table-cell;
}
.CompassTool svg
{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

div[class*="compasstoolTooltip"]
{
    padding: 4px 6px;
    background-color: #666;
    border-radius: 4px;
    color: #fff;
    position: absolute;
    z-index: 99;
    font-size: 12px;
}
.CompassTool span[class*="compasstool"][class*="Icon"]
{
    background-image: url(c1edcde038287b5c4575.png);
    display: inline-block;
    padding: 0px !important;
    width: 30px;
    height: 30px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-repeat: no-repeat;
}


.CompassTool span[class~="compasstoolClearIcon"]
{
    background-position: -60px -80px;
}

.CompassTool span[class~="compasstoolCircleIcon"]
{
    background-image: url(40561f28c354ade574f5.png) !important;
}


.lighthouse-canvas div.Grapher
{
    display: table;
}
.Grapher div[class*="grapher"]
{
    display: table-row;
}
.Grapher div[class*="graphToolbar"]
{
    display: table-cell;
    vertical-align: top;
}

.Grapher div[class*="graphToolbar"] .button
{
    width: 30px;
    height: 30px;
    padding: 0px;
    margin: 5px 10px;
    position: relative;
}

.Grapher div[class*="graphToolbar"] .button {
  position: relative;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: 1px solid #666;
  box-shadow: rgba(0,0,0,0.45) 0px 2px 3px;
  color: #fff !important;
  text-decoration: none;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);

  /*background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(128,128,128,0.9)));*/
  background-image: -webkit-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: -moz-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: -o-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: -ms-linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);
  background-image: linear-gradient(rgba(64,64,64,0.75) 0%, rgba(128,128,128,0.9) 90%);

  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -o-border-radius: 16px;
  -ms-border-radius: 16px;
  border-radius: 16px;
}

.Grapher div[class*="graphToolbar"] .blue_button {
  border-color: #6699cc;

  background-image: -webkit-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: -moz-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: -o-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: -ms-linear-gradient(top, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
  background-image: linear-gradient(to bottom, rgba(16,96,192,0.75), rgba(96,192,255,0.9));
}

.Grapher div[class*="graphToolbar"] .blue_button:hover, .Grapher div[class*="graphToolbar"] .blue_button:focus, .Grapher div[class*="graphToolbar"] .blue_button.active {
  border-color: #003575;

  background-image: -webkit-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: -moz-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: -o-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: -ms-linear-gradient(top, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
  background-image: linear-gradient(to bottom, rgba(0,97,216,0.75), rgba(0,53,117,0.9));
}

.Grapher .graphLabel.axisY h4:empty {
    display: none !important;
}

.Grapher div[class*="graphArea"]
{
    border: solid 2px #EEE;
}
.Grapher svg
{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

div[class*="grapherTooltip"]
{
    padding: 4px 6px;
    background-color: #666;
    border-radius: 4px;
    color: #fff;
    position: absolute;
    z-index: 99;
    font-size: 12px;
}
.Grapher span[class*="grapher"][class*="Icon"]
{
    background-image: url(c1edcde038287b5c4575.png);
    display: inline-block;
    padding: 0px !important;
    width: 30px;
    height: 30px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    background-repeat: no-repeat;
}
.Grapher span[class~="grapherLineIcon"]
{
    background-position: 0px -80px;
}
.Grapher span[class~="grapherFillIcon"]
{
    background-position: -30px -80px;
}
.Grapher span[class~="grapherClearIcon"]
{
    background-position: -63px -77px;
}
.Grapher span[class~="grapherUndoIcon"]
{
    background-position: -210px -80px;
}
.Grapher span[class~="grapherRedoIcon"]
{
    background-position: -240px -80px;
}
.Grapher span[class~="grapherPolygonIcon"]
{
    background-position: -90px -80px;
}
.Grapher span[class~="grapherLineSegmentIcon"]
{
    background-image: url(6bdfaff9c9ccb3979430.png) !important;
}
.Grapher span[class~="grapherDragIcon"]
{
    background-position: -120px -80px;
}
.Grapher span[class~="grapherCircleIcon"]
{
    background-position: -150px -80px;
}
.Grapher span[class~="grapherPointIcon"]
{
    background-position: -180px -80px;
}
div.toolTypesSelectorDialog
{
    padding: 5px;
    position: absolute;
    top: 0;
    left: 100%;
    display: table;
    min-width: 180px;
    max-width: 180px;
    border-radius: 5px;
    border: solid 1px #ddd;
    z-index: 99;
    -webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
    background-image: -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0.25, rgb(247,247,247)),
            color-stop(0.74, rgb(255,255,255))
    );
}
.toolTypesNewRowPlaceholder
{
    text-align: left;
    overflow: hidden;
    background-color: #EEE;
    border: 1px dashed rgba(0, 0, 0, 0.3);
}
.toolTypesConfigureRow
{
    text-align: left;
    padding: 2px;
    overflow: hidden;
    background-color: #EEE;
    border: 3px solid #8cf;
    color: #000;
    margin-bottom: 2px;
}
.toolTypesAddButton
{
    position: relative;
    left: -2px;
    height: 26px;
    line-height: 26px;
    font-size: 30px;
    font-weight: normal;
    cursor: pointer;
    float: right;
    font-family: "Open Sans", sans-serif;
    color: rgba(0, 0, 0, 0.3);
}
.toolTypesDeleteButton
{
    position: relative;
    height: 26px;
    line-height: 30px;
    font-size: 30px;
    font-weight: normal;
    cursor: pointer;
    float: right;
    font-family: "Open Sans", sans-serif;
    color: rgba(0, 0, 0, 0.3);
}
.toolTypeSelectionContainer{
    background: #c5c5c5;
    border: black;
    padding: 3px;
    border-radius: 10px;
    margin-bottom: 3px;
}
span.button.grapherTypeSelectionButton
{
    border-radius: 10px;
    box-sizing: border-box;
    display: block;
    background-image: none;
    border-style: hidden;
    box-shadow: none;
    width: 100%;
}
span.button.grapherTypeSelectionButton.active
{
    font-weight: bold;
}
div.lineStyleCheckbox
{
    padding: 2px;
}
label.lineStyleLabel
{
    font-family: "Open Sans", sans-serif;
    margin-left: 2px;
}
span.lineStyleSolidDisplay
{
    width: 100px;
    height: 0;
    border: 2px solid #000000;
    margin: 5px;
    display: inline-block;
}
span.lineStyleDashedDisplay
{
    width: 100px;
    height: 0;
    border: 2px dashed #000000;
    margin: 5px;
    display: inline-block;
}
input.lineStyleRadio[type="radio"]
{
    transform: scale(1.4);
    margin: 5px;
}
div.lineStyleSelector
{
    margin-top: 3px;
    margin-left: 5px;
}
input.lineSegmentCheckbox
{
    margin-top: 3px;
    margin-left: 5px;
}

.lighthouse-canvas.runtime .HotSpotInteraction .HotSpot:not(.touch):hover, .lighthouse-canvas.runtime .HotSpotInteraction .HotSpot:not(.touch):hovered
{
    /* the style for HotSpots inside of HotSpotInteraction are different */
    border-width: 6px;
    outline: solid 1px #fff;
    box-shadow: 0px 0px 8px 8px #333;
}

.lighthouse-canvas.runtime .HotSpot:not(.touch).blocked:hover, .lighthouse-canvas.runtime .HotSpot.blocked.hovered
{
    background: rgba(0, 0, 0, 0) !important;
}

.lighthouse-canvas .HotSpot {
    border: dotted 1px #aaa;
    padding: 8px; /* need to preserve padding for old hotspots - for some reason inheritance is broken */
}
.lighthouse-canvas.runtime .HotSpot {
    cursor: pointer;
}
.lighthouse-canvas .HotSpotInteraction .HotSpot {
    position: absolute !important; /* !important flag is required to override .layout-flow from imported items */
}

/* default styles for HotSpots when used inside of a HotSpotInteraction widget */
.lighthouse-canvas .HotSpotInteraction .HotSpot.v24 {
    border: solid 2px rgba(0,0,255);
    background: rgba(0,136,204,0.25);
    box-sizing: border-box; /* in new HotSpots, this box-sizing will override the default padding of 8px */
    width: 70px;
    height: 70px;
    opacity: 0.7;
}

.lighthouse-canvas .HotSpot .htmlContent
{
    position: absolute;
    top: 0px;
    left: 0px;
}

.lighthouse-canvas .HotSpot.blocked
{
    border-top-width: 0px !important;
    border-bottom-width: 0px !important;
    border-left-width: 0px !important;
    border-right-width: 0px !important;
    background-color: transparent !important;
    overflow: visible !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.lighthouse-canvas.runtime .HotSpot.blocked
{
    height: 0px !important;
    width: 0px !important
}

.lighthouse-canvas .HotSpotBackground {
    position: relative;
}

.lighthouse-canvas .HotSpotInteraction.centered .HotSpotBackground {
    text-align: center;
}
.MediaBox img, .MediaBox video, .MediaBox audio
{
    max-height: 100%;
    max-width: 100%;
}
.MediaBox .video-end-message
{
    position:absolute;
    top:45%;
    width:100%;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    color:#333;
    text-shadow:0px 0px 4px #888;    
}
.partitionNumberLineControlsMinus, .partitionNumberLineControlsPlus, .partitionNumberLineControlsDelete
{
    cursor:pointer;
    display: inline-block;
    width: 15px;
    height: 15px;
    background-image: url(f05d2535e48658ed3624.png);
    background-position: 0px -75px;
    margin-top: 3px;
}

.partitionNumberLineControlsMinus 
{
    background-position: -15px -75px;
    margin-top: 12px;
}

.partitionNumberLineControlsDelete
{
    position: absolute;
    background-position: -30px -75px;
}

.PartitionNumberLine[zoomnumberline=true] {
    height: 250px !important;
    overflow: hidden !important;
}

.PartitionNumberLine > .partitionNumberLineArea > .resetBtn {
  background: rgba(128, 128, 128, 0.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  position: absolute;
  right: 15px;
  padding: 1px 3px;
  user-select: none;
}

.PartitionNumberLine > .partitionNumberLineArea > .resetBtn:hover, 
.PartitionNumberLine > .partitionNumberLineArea > .resetBtn:active {
  background: rgba(128, 128, 128, 0.2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.SelectOption 
{
    cursor: pointer;
    -webkit-transition: background-color 0.7s;
    background-color: #F0F0FF;
    color:black;
    border: 1px solid #386BAE;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
}

.SelectOption:hover
{
    background-color: #FFFFBB;
}

.SelectOption.selectedText
{
    background-color: #99C8DC;
    border: 1px solid #386BAE;
    border-radius: 5px;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: 800;
}

.SelectOption img {
    margin: 3px;
}


.SelectOption.selectedText img {
    border: 3px solid #99C8DC;
    margin: 0px;
}

.lighthouse-canvas:not(.runtime) .SelectText .selectNode {
    cursor: pointer;
    background-color: #F0F0FF;
    color: black;
}

.lighthouse-canvas:not(.runtime) .SelectText .selectNodeStart,
.lighthouse-canvas:not(.runtime) .SelectText .selectNodeSeparator,
.lighthouse-canvas:not(.runtime) .SelectText .selectNodeEnd
{
    display: none;
}
.PortableCustomInteraction {
    font-family: "Helvetica Neue",HelveticaNeue,Helvetica,Arial,sans-serif;
}

.PortableCustomInteraction .simulation .map-view > img[src*="tcc-silt-barriers"] + img[src*="tcc-silt-barriers"] + .particle-model + .barriers {
    top: -14px;
}

#app {
    position: relative !important;
}

.qti-hidden {
    display: none;
}

.lighthouse-canvas .Slider[widget] {
  padding:0px;
}
.lighthouse-canvas .Slider[widget]:not(.vertical) {
  height:25px !important;
  padding-right:1em;
}
.lighthouse-canvas .Slider[widget].vertical {
  width:25px !important;
  padding-bottom:1em;
}
.lighthouse-canvas .Slider[widget].hideSlider > input {
  background: transparent;
}
.lighthouse-canvas .Slider[widget].hideCounter > .indicator {
  display: none;
}
.lighthouse-canvas .Slider[widget] > input {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  position:absolute;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  z-index:1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.lighthouse-canvas .Slider[widget]:not(.vertical) > input {
  top: 50%;
  margin-top: -5px;
  left:0;
}
.lighthouse-canvas .Slider[widget].vertical > input {
  top:0;
  left:7.5px;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  transform-origin: 5px 5px;
  -moz-transform-origin: 5px 5px;
  -ms-transform-origin: 5px 5px;
}
.lighthouse-canvas .Slider[widget].reverse > input {
  direction: rtl;
}
.lighthouse-canvas .Slider[widget] > input:hover {
  opacity: 1;
}
.lighthouse-canvas .Slider[widget] > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #3a74b0;
  cursor: pointer;
  border-radius:50%;
}
.lighthouse-canvas .Slider[widget] > input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #3a74b0;
  cursor: pointer;
  border-radius:50%;
}

.lighthouse-canvas .Slider[widget].rotate > input::-webkit-slider-thumb {
  transform: rotate(180deg);
}
.lighthouse-canvas .Slider[widget].rotate > input::-moz-range-thumb {
  transform: rotate(180deg);
}

.lighthouse-canvas .Slider[widget].Triangle.rotate > input::-webkit-slider-thumb,
.lighthouse-canvas .Slider[widget].Arrow.rotate > input::-webkit-slider-thumb {
  margin-bottom: 0px;
  margin-top: 37px;
}
.lighthouse-canvas .Slider[widget].Triangle.rotate > input::-moz-range-thumb
.lighthouse-canvas .Slider[widget].Arrow.rotate > input::-moz-range-thumb {
  margin-bottom: 0px;
  margin-top: 37px;
}

.lighthouse-canvas .Slider[widget].Person.rotate > input::-webkit-slider-thumb {
  margin-bottom: 0px;
  margin-top: 86px;
}
.lighthouse-canvas .Slider[widget].Person.rotate > input::-moz-range-thumb {
  margin-bottom: 0px;
  margin-top: 86px;
}

.lighthouse-canvas .Slider[widget].Triangle > input::-webkit-slider-thumb,
.lighthouse-canvas .Slider[widget].Arrow > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  margin-left: -3px;
  margin-bottom: 37px;
  height: 42px;
  cursor: pointer;
}
.lighthouse-canvas .Slider[widget].Triangle > input::-moz-range-thumb
.lighthouse-canvas .Slider[widget].Arrow > input::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-left: -3px;
  margin-bottom: 37px;
  height: 42px;
  cursor: pointer;
}

.lighthouse-canvas .Slider[widget].Arrow > input::-webkit-slider-thumb {
  width: 26px;
  background: url(562a9fd3ea969e01c9aa.svg) no-repeat center center;
}
.lighthouse-canvas .Slider[widget].Arrow > input::-moz-range-thumb {
  width: 26px;
  background: url(562a9fd3ea969e01c9aa.svg) no-repeat center center;
}

.lighthouse-canvas .Slider[widget].Triangle > input::-webkit-slider-thumb {
  width: 47px;
  background: url(cadfa8a739a2b69f742a.svg) no-repeat center center;
}
.lighthouse-canvas .Slider[widget].Triangle > input::-moz-range-thumb {
  width: 47px;
  background: url(cadfa8a739a2b69f742a.svg) no-repeat center center;
}

.lighthouse-canvas .Slider[widget].Person > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  margin-left: -3px;
  margin-bottom: 86px;
  height: 98px;
  background: url(c2bc7b77e3186c701f1a.svg) no-repeat center center;
  cursor: pointer;
}
.lighthouse-canvas .Slider[widget].Person > input::-moz-range-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 32px;
  margin-left: -3px;
  margin-bottom: 86px;
  height: 98px;
  background: url(c2bc7b77e3186c701f1a.svg) no-repeat center center;
  cursor: pointer;
}


.lighthouse-canvas .Slider[widget] > .indicator {
  position: absolute;
  color: #888;
  font-size: smaller;
  width:20px;
  height:20px;
  text-align:center;
}
.lighthouse-canvas .Slider[widget]:not(.vertical) > .indicator  {
  top: 50%;
  bottom: 0;
  right: -.5em;
  margin-top: -10px;
}
.lighthouse-canvas .Slider[widget].vertical > .indicator {
  bottom: 0;
  left:50%;
  margin-left:-10px;
}

.lighthouse-canvas .Slider[widget]:not(.stepLabel) > .scale {
  display:none;
}
.lighthouse-canvas .Slider[widget] > .scale {
  display:flex;
  z-index:0;
  position:absolute;
  color: #aaa;
  font-size: smaller;
  white-space:nowrap;
}
  .lighthouse-canvas .Slider[widget]:not(.vertical) > .scale {
    left: calc(-5% + 12px);
    width: calc(100% - 42px);
    bottom:0px;
  }
  .lighthouse-canvas .Slider[widget]:not(.vertical).rotate > .scale {
    bottom: 22px;
  }
  .lighthouse-canvas .Slider[widget]:not(.vertical).reverse > .scale {
    left:14px;
  }
  .lighthouse-canvas .Slider[widget].vertical > .scale {
    top:calc(-4.4% + 11px);
    left:0px;
  }
  .lighthouse-canvas .Slider[widget].vertical.rotate > .scale {
    left:22px;
  }
  .lighthouse-canvas .Slider[widget].vertical.reverse > .scale {
    top:14px;
  }
  .lighthouse-canvas .Slider[widget].vertical > .scale {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    transform-origin: 5px 5px;
    -moz-transform-origin: 5px 5px;
    -ms-transform-origin: 5px 5px;
  }
  .lighthouse-canvas .Slider[widget].reverse > .scale {
    flex-direction:row-reverse;
  }
  .lighthouse-canvas .Slider[widget] > .scale > .mark {
    align-self:flex-start;
    display:inline-block;
    text-align:center;
    flex-grow: 0;
    flex-shrink: 0;
    font-size:12px;
  }
    .lighthouse-canvas .Slider[widget].reverse > .scale > .mark {
      text-align:right;
    }

.lighthouse-canvas .SliderContainer[widget] img.slider-container-img
{
    max-width: none;
    max-height: none;
}

/* Color contrast theme overrides for slider thumbs */

/* Dark background themes - white/light thumbs with inverted SVGs */
.txt_template-tuxedo,
.txt_template-oriental,
.txt_template-chalkboard,
.txt_template-nocturnal,
.txt_template-aquiline {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(255,255,255) !important;
      box-shadow: 0 0 0 2px black !important;
    }
    &::-moz-range-thumb {
      background: rgb(255,255,255) !important;
      box-shadow: 0 0 0 2px black !important;
    }
  }
  
  /* SVG thumbs - invert to white, keep background image */
  .Slider[widget].Arrow > input,
  .Slider[widget].Triangle > input,
  .Slider[widget].Person > input {
    &::-webkit-slider-thumb {
      border: none !important;
      filter: invert(100%) brightness(200%) drop-shadow(0 0 3px black) drop-shadow(0 0 2px black) !important;
    }
    &::-moz-range-thumb {
      border: none !important;
      filter: invert(100%) brightness(200%) drop-shadow(0 0 3px black) drop-shadow(0 0 2px black) !important;
    }
  }
}

/* Celestial - light yellow on dark background */
.txt_template-celestial {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(227,223,149) !important;
      box-shadow: 0 0 0 2px black !important;
    }
    &::-moz-range-thumb {
      background: rgb(227,223,149) !important;
      box-shadow: 0 0 0 2px black !important;
    }
  }
  
  /* SVG thumbs - invert to light, keep background image, add thick black shadow (simulating border) */
  .Slider[widget].Arrow > input,
  .Slider[widget].Triangle > input,
  .Slider[widget].Person > input {
    &::-webkit-slider-thumb {
      border: none !important;
      filter: invert(100%) brightness(200%) drop-shadow(0 0 3px black) drop-shadow(0 0 2px black) !important;
    }
    &::-moz-range-thumb {
      border: none !important;
      filter: invert(100%) brightness(200%) drop-shadow(0 0 3px black) drop-shadow(0 0 2px black) !important;
    }
  }
}

/* Light background themes - dark thumbs, SVGs stay black */
.txt_template-classic {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(21, 59, 101) !important;
    }
    &::-moz-range-thumb {
      background: rgb(21, 59, 101) !important;
    }
  }
}

.txt_template-eccentric {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(1,1,1) !important;
    }
    &::-moz-range-thumb {
      background: rgb(1,1,1) !important;
    }
  }
}

.txt_template-azure {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(4,4,4) !important;
    }
    &::-moz-range-thumb {
      background: rgb(4,4,4) !important;
    }
  }
}

.txt_template-haunted {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(0,0,0) !important;
    }
    &::-moz-range-thumb {
      background: rgb(0,0,0) !important;
    }
  }
}

.txt_template-antique {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(19,40,57) !important;
    }
    &::-moz-range-thumb {
      background: rgb(19,40,57) !important;
    }
  }
}

.txt_template-creamy {
  .Slider[widget]:not(.Arrow):not(.Triangle):not(.Person) > input {
    &::-webkit-slider-thumb {
      background: rgb(1,1,99) !important;
    }
    &::-moz-range-thumb {
      background: rgb(1,1,99) !important;
    }
  }
}

.SpeecherFlex {
  display: flex;
  justify-content: center;
  align-self: center;
  align-items: center;
}
.SpeecherFlexExpand {
  flex-grow:2;
}
.lighthouse-canvas .SpeechRecorder[widget] {
  height: 81px !important;
  min-width: 300px;
  border: 1px #aaa;
  border-style: solid !important;
}

.SpeechRecorder .wave-visual {
  position:relative;
  height: 80px;
  width: 80px;
  border-right: 1px solid #ddd;
}
  .SpeechRecorder .wave-visual > * {
    position:absolute;
    top:50%;
    left:50%;
    width:1px;
    height:1px;
    margin-left:-.5px;
    margin-top:-.5px;
    border-radius:50%;
    border-color:#43baff;
    border-width:1px;
    border-style:solid;
    box-sizing: border-box;
    box-shadow:0px 0px 1px #43baff;
    -webkit-transition:width 1s, height 1s, margin 1s, box-shadow 1s;
    -moz-transition:width 1s, height 1s, margin 1s, box-shadow 1s;
    transition:width 1s, height 1s, margin 1s, box-shadow 1s;
  }
    .SpeechRecorder .wave-visual:not(.drawing) > * {
      box-shadow:none !important;
    }

.SpeechRecorder .speecher-timer {
  margin-left:80px;
  height:40px;
  display: flex;
  justify-content: center;
  align-self: center;
  align-items: center;
}
  .SpeechRecorder .speecher-timer > .timer-bar {
    width: 70%;
    height: 4px;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0px 0px 1px #ddd;
    margin-left: 1em;
    margin-right:1em;
  }
    .SpeechRecorder .speecher-timer > .timer-bar > .progress {
      width:0;
      height:4px;
      background:#43baff;
      box-shadow:0px 0px 2px #43baff;
    }
  .SpeechRecorder .speecher-timer > .timer-status {
    font-size:60%;
  }
    .SpeechRecorder .speecher-timer > .timer-status > .time-limit {
      border-left:1px solid #ddd;
      margin-left:.5em;
      padding-left:.5em;
    }
.SpeechRecorder:not([time-limit]) .speecher-timer > .timer-bar {
  opacity:0;
  pointer-events:none;
}


.SpeechRecorder .control-container {
  height:80px;
  flex-grow: 2;
}

  .SpeechRecorder > .control-container > * {
    height:40px;
  }
  .SpeechRecorder > .control-container > .audio-container {
    border-bottom:1px solid #ddd;
  }
    .SpeechRecorder:not(.audio-loaded) > .control-container > .audio-container > * {
      opacity:0;
      pointer-events:none;
    }
  .SpeechRecorder > .control-container > *::before {
    font-family:fontAwesome;
    font-size: 32px;
    margin-left: .1em;
    opacity:.5;
    width:30px;
  }
  .SpeechRecorder > .control-container > .audio-container::before {
    content:"\f1c7";
  }
  .SpeechRecorder > .control-container > .recorder-container::before {
    content:"\f130";
  }
  .SpeechRecorder.recording-disabled > .recorder-container::before {
    content:"\f131";
  }

.SpeechRecorder > .control-container > * > .speecher-button {
  color:#aaa;
  opacity:.8;
  pointer-events:none;
  font-family:fontAwesome;
  font-size:28px;
  width:40px;
  height:40px;
  line-height:40px;
  background:none;
  border:none;
  outline:none;
  box-shadow:none;
  -webkit-transition:opacity .5s, color .5s, text-shadow 1s;
  -moz-transition:opacity .5s, color .5s;
  transition:opacity .5s, color .5s;
}
  .SpeechRecorder > .control-container > * > .speecher-button:hover {
    text-shadow: 1px 1px #aaa;
  }
  .SpeechRecorder > .control-container > * > .speecher-button:active {

    text-shadow: 0px 0px #aaa;
  }
  .SpeechRecorder > .control-container > * > .speecher-button::after {
    color:inherit;
  }
  .SpeechRecorder:not(.recording) > .control-container > * > .speecher-button.start::after {
    color:#1ea1fd;
    content:"\f111";
  }
  .SpeechRecorder.recording:not(.paused) > .control-container > * > .speecher-button.start::after {
    content:"\f04c";
  }
  .SpeechRecorder.recording.paused > .control-container > * > .speecher-button.start::after {
    content:"\f04b";
  }
  .SpeechRecorder > .control-container > * > .speecher-button.stop::after {
    content:"\f04d";
  }
  .SpeechRecorder > .control-container > * > .speecher-button.play-stop::after {
    content:"\f28e";
  }
  .SpeechRecorder > .control-container > * > .speecher-button.play::after {
    content:"\f01d";
  }
  .SpeechRecorder.playing:not(.playing-paused) > .control-container > * > .speecher-button.play::after {
    content:"\f28c";
  }

.SpeechRecorder > .control-container > * > .speecher-button.start,
.SpeechRecorder.recording > .control-container > * > .speecher-button.stop,
.SpeechRecorder.playing > .control-container > * > .speecher-button.play-stop,
.SpeechRecorder.audio-loaded > .control-container > * > .speecher-button.play {
  color:#666;
  opacity:1;
  pointer-events:initial;
}

.SpeechRecorder.recording-disabled .recorder-container > .speecher-button {
  pointer-events: none;
  opacity:0.5;
  box-shadow: none;
  text-shadow: none;
}



/**
 * src/shared/styles/index.css
 *
 * Master CSS entry point for lighthouse-runtime.
 * Mirrors the `lighthouse-client.css` bundle from authoring/bundleconfig.json:
 *
 *   reset.css
 *   lighthouse.css
 *   lighthouse.widgets.*  (glob — all per-widget CSS)
 *
 * All selectors are scoped to .lighthouse-runtime by PostCSS at build time.
 *
 * CSS source files are provided by the vendor/assets Git submodule.
 * Run `git submodule update --init` after cloning.
 */

/* ── Error/stub styles (local to this repo) ─────────────────────────────────── */

/* ── Vendor font faces used by Lighthouse CSS ──────────────────────────────── */
@font-face {
	font-family: 'Open Sans';
	src: url(dc3f4b1e33c31d9daff0.ttf) format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url(15954c0054ced574d718.ttf) format('truetype');
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: 'Open Sans';
	src: url(5145c5fa31f7cca6c474.ttf) format('truetype');
	font-weight: 400;
	font-style: italic;
}

/* ── Reset / normalize rules used by the production Lighthouse bundle ─────── */

/* ── Core canvas layout (font, sizing, positioning, input styles) ────────────── */

/* ── Widget styles — main file (3000+ lines: MC bubbles, distractors, FIB, etc) ── */

/* ── DataTable tablesorter chrome (header icons + disabled header inputs) ───── */

/* ── Per-widget CSS files (matching the lighthouse.widgets.* glob in bundleconfig) ── */