@oat-sa/tao-test-runner-qti/css/new-test-runner.css

TAO Test Runner QTI implementation

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.qti-navigator-default {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  -moz-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  padding: 0;
  cursor: default;
  min-width: calc(18rem - 8px);
  height: 100%;
  position: relative;
}
.qti-navigator-default span {
  display: inline-block;
}
.qti-navigator-default .collapsed .collapsible-panel {
  display: none !important;
}
.qti-navigator-default .collapsed .qti-navigator-label .icon-up {
  display: none;
}
.qti-navigator-default .collapsed .qti-navigator-label .icon-down {
  display: inline-block;
}
.qti-navigator-default .collapsible > .qti-navigator-label, .qti-navigator-default .qti-navigator-item > .qti-navigator-label {
  cursor: pointer;
}
.qti-navigator-default.scope-test-section .qti-navigator-part > .qti-navigator-label {
  display: none !important;
}
.qti-navigator-default .qti-navigator-label {
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  min-width: calc(100% - 12px);
  padding: 0 6px;
  line-height: 3rem;
}
.qti-navigator-default .qti-navigator-label .icon-up, .qti-navigator-default .qti-navigator-label .icon-down {
  line-height: 3rem;
  margin-left: auto;
}
.qti-navigator-default .qti-navigator-label .icon-down {
  display: none;
}
.qti-navigator-default .qti-navigator-label .qti-navigator-number {
  display: none;
}
.qti-navigator-default .qti-navigator-icon, .qti-navigator-default .icon {
  position: relative;
  top: 1px;
  display: inline-block;
  line-height: 2.8rem;
  margin-right: 0.5rem;
}
.qti-navigator-default .unseen .qti-navigator-icon {
  cursor: default;
}
.qti-navigator-default.prevents-unseen:not(.skipahead-enabled) .unseen .qti-navigator-icon, .qti-navigator-default.prevents-unseen:not(.skipahead-enabled) .unseen .qti-navigator-label {
  cursor: not-allowed !important;
}
.qti-navigator-default .icon-answered:before {
  content: "\e69a";
}
.qti-navigator-default .icon-viewed:before {
  content: "\e631";
}
.qti-navigator-default .icon-flagged:before {
  content: "\e64e";
}
.qti-navigator-default .icon-unanswered:before,
.qti-navigator-default .icon-unseen:before {
  content: "\e6a5";
}
.qti-navigator-default .qti-navigator-counter {
  text-align: right;
  margin-left: auto;
  font-size: 12px;
  font-size: 1.2rem;
}
.qti-navigator-default .qti-navigator-actions {
  text-align: center;
}
.qti-navigator-default .qti-navigator-info.collapsed {
  height: calc(3rem + 1px);
}
.qti-navigator-default .qti-navigator-info {
  height: calc(5 * (3rem + 1px));
  overflow: hidden;
}
.qti-navigator-default .qti-navigator-info > .qti-navigator-label {
  min-width: calc(100% - 16px);
  padding: 0 8px;
}
.qti-navigator-default .qti-navigator-info ul {
  padding: 0 4px;
}
.qti-navigator-default .qti-navigator-info ul .qti-navigator-label span.qti-navigator-text {
  padding: 0 6px;
  min-width: 10rem;
}
.qti-navigator-default .qti-navigator-info ul .qti-navigator-label span.qti-navigator-icon {
  min-width: 1.5rem;
}
.qti-navigator-default .qti-navigator-info ul .qti-navigator-label span.qti-navigator-counter {
  min-width: 5rem;
}
.qti-navigator-default .qti-navigator-filters {
  margin-top: 1rem;
  text-align: center;
  width: 15rem;
  height: calc(3rem + (2 * 1px));
}
.qti-navigator-default .qti-navigator-filters ul {
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
}
.qti-navigator-default .qti-navigator-filters li {
  display: block;
}
.qti-navigator-default .qti-navigator-filters li .qti-navigator-tab {
  border: 1px solid #ddd;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  border-left: none;
  line-height: 3rem;
  min-width: 5rem;
  cursor: pointer;
  white-space: nowrap;
}
.qti-navigator-default .qti-navigator-tree {
  -moz-flex: 1;
  -o-flex: 1;
  flex: 1;
  overflow-y: auto;
}
.qti-navigator-default .qti-navigator-linear,
.qti-navigator-default .qti-navigator-linear-part {
  padding: 8px;
}
.qti-navigator-default .qti-navigator-linear .icon,
.qti-navigator-default .qti-navigator-linear-part .icon {
  display: none;
}
.qti-navigator-default .qti-navigator-linear .qti-navigator-label,
.qti-navigator-default .qti-navigator-linear-part .qti-navigator-label {
  font-size: 14px;
  font-size: 1.4rem;
}
.qti-navigator-default .qti-navigator-linear .qti-navigator-title,
.qti-navigator-default .qti-navigator-linear-part .qti-navigator-title {
  font-size: 14px;
  font-size: 1.4rem;
  margin: 8px 0;
}
.qti-navigator-default .qti-navigator-linear .qti-navigator-message,
.qti-navigator-default .qti-navigator-linear-part .qti-navigator-message {
  font-size: 14px;
  font-size: 1.4rem;
}
.qti-navigator-default .qti-navigator-part > .qti-navigator-label {
  padding: 0 8px;
}
.qti-navigator-default .qti-navigator-part:not(:first-child) {
  margin-top: 1px;
}
.qti-navigator-default .qti-navigator-section > .qti-navigator-label {
  padding: 0 8px;
}
.qti-navigator-default .qti-navigator-item {
  margin: 1px 0;
  padding-left: 10px;
}
.qti-navigator-default .qti-navigator-item:first-child {
  margin-top: 0;
}
.qti-navigator-default .qti-navigator-item.disabled > .qti-navigator-label {
  cursor: not-allowed;
}
.qti-navigator-default .qti-navigator-collapsible {
  cursor: pointer;
  text-align: center;
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding-top: 50%;
}
.qti-navigator-default .qti-navigator-collapsible .icon {
  font-size: 20px;
  font-size: 2rem;
  width: 1rem !important;
  height: 2rem !important;
}
.qti-navigator-default .qti-navigator-collapsible .qti-navigator-expand {
  display: none;
}
.qti-navigator-default.collapsible {
  padding-right: calc(1rem + 10px) !important;
}
.qti-navigator-default.collapsible .qti-navigator-collapsible {
  display: block;
}
.qti-navigator-default.collapsed {
  width: calc(8rem + 1rem + 10px);
  min-width: 8rem;
}
.qti-navigator-default.collapsed ul {
  padding: 0 !important;
}
.qti-navigator-default.collapsed .qti-navigator-text,
.qti-navigator-default.collapsed .qti-navigator-info > .qti-navigator-label,
.qti-navigator-default.collapsed .qti-navigator-part > .qti-navigator-label,
.qti-navigator-default.collapsed .qti-navigator-section > .qti-navigator-label,
.qti-navigator-default.collapsed .qti-navigator-message {
  display: none !important;
}
.qti-navigator-default.collapsed .qti-navigator-label {
  padding: 0 2px !important;
  width: calc(8rem - 4px);
  min-width: calc(8rem - 4px);
}
.qti-navigator-default.collapsed .qti-navigator-icon, .qti-navigator-default.collapsed .icon {
  width: auto;
}
.qti-navigator-default.collapsed .qti-navigator-counter {
  margin-left: 0;
  min-width: 4rem !important;
}
.qti-navigator-default.collapsed .qti-navigator-collapsible .qti-navigator-collapse {
  display: none;
}
.qti-navigator-default.collapsed .qti-navigator-collapsible .qti-navigator-expand {
  display: block;
}
.qti-navigator-default.collapsed .qti-navigator-info {
  height: calc(4 * (3rem + 1px));
}
.qti-navigator-default.collapsed .qti-navigator-info.collapsed .collapsible-panel {
  display: block !important;
}
.qti-navigator-default.collapsed .qti-navigator-filters {
  width: calc(8rem - 16px);
}
.qti-navigator-default.collapsed .qti-navigator-filter span {
  display: none;
}
.qti-navigator-default.collapsed .qti-navigator-filter.active span {
  display: block;
  border: 0 none;
  width: calc(8rem - 16px);
}
.qti-navigator-default.collapsed .qti-navigator-item,
.qti-navigator-default.collapsed .qti-navigator-linear,
.qti-navigator-default.collapsed .qti-navigator-linear-part {
  padding-left: 2px;
  text-align: center;
}
.qti-navigator-default.collapsed .qti-navigator-item {
  overflow: hidden;
}
.qti-navigator-default.collapsed .qti-navigator-item .qti-navigator-icon {
  padding-left: 6px;
  width: 2rem;
}
.qti-navigator-default.collapsed .qti-navigator-item .qti-navigator-number {
  display: inline-block;
  margin-left: 6px;
  margin-right: 8rem;
}
.qti-navigator-default.collapsed .qti-navigator-linear,
.qti-navigator-default.collapsed .qti-navigator-linear-part {
  padding: 0 0 8px 0;
}
.qti-navigator-default.collapsed .qti-navigator-linear .icon,
.qti-navigator-default.collapsed .qti-navigator-linear-part .icon {
  display: block;
}
.qti-navigator-default.collapsed .qti-navigator-actions button {
  padding: 0 9px 0 5px;
}
.qti-navigator-default .qti-navigator-info > .qti-navigator-label {
  background-color: #d4d5d7;
  color: #222;
  border-top: 1px solid #d4d5d7;
}
.qti-navigator-default .qti-navigator-info li {
  border-bottom: 1px solid white;
}
.qti-navigator-default .qti-navigator-filter .qti-navigator-tab {
  background-color: rgb(255, 255, 255);
}
.qti-navigator-default .qti-navigator-filter .qti-navigator-tab:hover {
  background-color: #3e7da7;
  color: white;
}
.qti-navigator-default .qti-navigator-filter.active .qti-navigator-tab {
  background-color: #a4a9b1;
  color: white;
}
.qti-navigator-default .qti-navigator-linear,
.qti-navigator-default .qti-navigator-linear-part {
  background: rgb(255, 255, 255);
}
.qti-navigator-default .qti-navigator-part > .qti-navigator-label {
  background-color: #dddfe2;
}
.qti-navigator-default .qti-navigator-part > .qti-navigator-label:hover {
  background-color: #c6cacf;
}
.qti-navigator-default .qti-navigator-part.active > .qti-navigator-label {
  background-color: #c0c4ca;
}
.qti-navigator-default .qti-navigator-section > .qti-navigator-label {
  border-bottom: 1px solid white;
}
.qti-navigator-default .qti-navigator-section > .qti-navigator-label:hover {
  background-color: #ebe8e4;
}
.qti-navigator-default .qti-navigator-section.active > .qti-navigator-label {
  background-color: #ded9d4;
}
.qti-navigator-default .qti-navigator-item {
  background: rgb(255, 255, 255);
}
.qti-navigator-default .qti-navigator-item.active {
  background: rgb(14, 93, 145);
  color: white;
}
.qti-navigator-default .qti-navigator-item:hover {
  background: #0a3f62;
  color: white;
}
.qti-navigator-default .qti-navigator-item.disabled {
  background-color: #e2deda !important;
}
.qti-navigator-default .qti-navigator-collapsible {
  background-color: #dfe1e4;
  color: #222;
}
.qti-navigator-default .qti-navigator-collapsible .icon {
  color: white;
}

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.qti-navigator-fizzy {
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  -moz-flex-direction: column;
  -o-flex-direction: column;
  flex-direction: column;
  cursor: default;
  min-width: calc(18rem - 8px);
  height: 100%;
  position: relative;
  background-color: #f2f2f2 !important;
  width: 30rem;
}
.qti-navigator-fizzy .qti-navigator-tree {
  overflow-y: auto;
  max-height: 100%;
  display: block;
  background: none;
  margin: 0 5px;
}
.qti-navigator-fizzy .qti-navigator-linear {
  padding: 8px;
  margin: 0 5px;
  background: rgb(255, 255, 255);
}
.qti-navigator-fizzy .qti-navigator-linear .qti-navigator-message {
  font-size: 14px;
  font-size: 1.4rem;
}
.qti-navigator-fizzy .qti-navigator-section {
  display: block;
}
.qti-navigator-fizzy .qti-navigator-section .qti-navigator-label {
  background-color: initial;
  border: none;
  padding: 0;
  line-height: initial;
  margin: 13px 0 10px 0;
  font-size: 15px;
  font-size: 1.5rem;
}
.qti-navigator-fizzy .qti-navigator-header {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #cec7bf;
  padding: 15px 0 5px 0;
  margin: 0 5px;
  line-height: initial;
}
.qti-navigator-fizzy .qti-navigator-header .qti-navigator-text {
  font-size: 20px;
  font-size: 2rem;
  font-weight: bold;
}
.qti-navigator-fizzy .qti-navigator-header .icon-close {
  font-size: 28px;
  font-size: 2.8rem;
  line-height: 3rem;
  color: hsl(0, 0%, 12%);
}
.qti-navigator-fizzy .qti-navigator-header .icon-close:hover {
  color: hsl(0, 0%, 12%);
  text-decoration: none;
  cursor: pointer;
}

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.document-viewer-plugin {
  position: relative;
}
.document-viewer-plugin .viewer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10000;
  width: 100%;
  opacity: 0.5;
  background-color: rgb(228, 236, 239);
}
.document-viewer-plugin .viewer-panel {
  position: fixed;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
  z-index: 100000;
  color: #222;
  background: #f3f1ef;
  font-size: 14px;
  font-size: 1.4rem;
  border: 1px solid #ddd;
  border-radius: 2px;
  -webkit-border-radius: 2px;
}
.document-viewer-plugin .viewer-header {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 5px 0;
  z-index: 1;
}
.document-viewer-plugin .viewer-header .viewer-title {
  font-size: 15px;
  font-size: 1.5rem;
  padding: 0;
  margin: 0 0 0 1.6rem;
}
.document-viewer-plugin .viewer-header .icon {
  float: right;
  font-size: 20px;
  font-size: 2rem;
  color: #266d9c;
  margin: 1px 6px;
  top: 3px;
}
.document-viewer-plugin .viewer-header .icon:hover {
  cursor: pointer;
  opacity: 0.75;
}
.document-viewer-plugin .viewer-content {
  padding: 0 20px;
  margin-top: 4px;
  position: relative;
  height: calc(100% - 40px);
  overflow: auto;
}

.qti-choiceInteraction.maskable .qti-choice .answer-mask {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  padding: 5px 10px 0 10px;
  z-index: 10;
  color: rgb(14, 93, 145);
  border: solid 1px #222;
  background-color: #c8d6dc;
  text-align: right;
  vertical-align: middle;
}
.qti-choiceInteraction.maskable .qti-choice .answer-mask:hover {
  color: #568eb2;
}
.qti-choiceInteraction.maskable .qti-choice .answer-mask .answer-mask-toggle:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "tao" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e643";
}
.qti-choiceInteraction.maskable .qti-choice .label-content {
  padding-right: 40px;
}
.qti-choiceInteraction.maskable .qti-choice.masked .answer-mask {
  width: 100%;
}
.qti-choiceInteraction.maskable .qti-choice.masked .answer-mask .answer-mask-toggle:before {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "tao" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e631";
}
.qti-choiceInteraction.maskable .qti-choice.masked .answer-mask:hover {
  background-color: #d2dde2;
}

.mask-container.mask-container {
  background-color: transparent;
}
.mask-container.mask-container .dynamic-component-title-bar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: transparent;
  border: none;
  position: absolute;
  width: 100%;
  z-index: 1;
}
.mask-container.mask-container .dynamic-component-title-bar.moving {
  background: #f3f1ef;
  border-bottom: 1px solid rgb(141, 148, 158);
}
.mask-container.mask-container .dynamic-component-title-bar .closer {
  display: none;
}
.mask-container.mask-container .dynamic-component-resize-container .dynamic-component-resize-wrapper {
  bottom: 0;
}
.mask-container.mask-container .dynamic-component-resize-container .dynamic-component-resize-wrapper:hover, .mask-container.mask-container .dynamic-component-resize-container .dynamic-component-resize-wrapper.resizing {
  bottom: 20px;
}
.mask-container.mask-container .dynamic-component-content .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: transparent;
  opacity: 1;
}
.mask-container.mask-container .dynamic-component-content .mask .inner {
  border-radius: 5px;
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgb(255, 255, 255);
  opacity: 1;
  box-sizing: content-box;
  padding-bottom: 30px;
}
.mask-container.mask-container .dynamic-component-content .mask .controls {
  background: #f3f1ef;
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 5px 0 10px;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 1px solid rgb(141, 148, 158);
  border-left: 1px solid rgb(141, 148, 158);
  height: 30px;
  z-index: 2;
}
.mask-container.mask-container .dynamic-component-content .mask .controls a {
  text-decoration: none;
  margin-right: 5px;
  vertical-align: middle;
}
.mask-container.mask-container .dynamic-component-content .mask .controls a:hover {
  color: #0a4166;
}
.mask-container.mask-container .dynamic-component-content .mask .controls .view {
  font-size: 20px;
  font-size: 2rem;
}
.mask-container.mask-container .dynamic-component-content .mask .controls .close {
  font-size: 20px;
  font-size: 2rem;
}
.mask-container.mask-container .dynamic-component-content.moving .mask .inner {
  border-color: rgba(14, 93, 145, 0.5);
  opacity: 0.55;
}
.mask-container.mask-container .dynamic-component-content.moving .mask .controls {
  border-left: none;
  border-bottom-left-radius: 0;
  z-index: 2;
}
.mask-container.mask-container .dynamic-component-content.sizing .mask {
  border-color: rgba(14, 93, 145, 0.5);
}
.mask-container.mask-container .dynamic-component-content.sizing .mask .inner {
  opacity: 0.55;
}
.mask-container.mask-container .dynamic-component-content.sizing .mask .controls {
  background-color: transparent;
  border-bottom: none;
  border-left: none;
}
.mask-container.mask-container.previewing .dynamic-component-content .mask .inner {
  opacity: 0.15;
  transition: opacity, 600ms, ease, 0s;
}
.mask-container.mask-container.previewing .dynamic-component-content .mask .controls {
  background-color: transparent;
  border-bottom: none;
  border-left: none;
}

.connectivity-box {
  display: none;
  width: 40px;
  margin-left: 40px;
}
.connectivity-box.with-message {
  width: 60px;
}
.connectivity-box .icon-connect, .connectivity-box .icon-disconnect {
  display: none;
  line-height: 2;
  font-size: 16px;
  font-size: 1.6rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.connectivity-box .message-connect, .connectivity-box .message-disconnected {
  display: none;
  font-size: 14px;
  font-size: 1.4rem;
  text-shadow: none;
  margin-right: 3px;
}
.connectivity-box.connected, .connectivity-box.disconnected {
  display: inline-block;
}
.connectivity-box.connected .icon-connect, .connectivity-box.connected .message-connect {
  display: inline-block;
}
.connectivity-box.disconnected .icon-disconnect, .connectivity-box.disconnected .message-disconnected {
  display: inline-block;
}

.line-reader-mask {
  box-sizing: border-box;
  border: 0 solid #0e5d91;
  background-color: #f3f7fa;
}
.line-reader-mask.hidden {
  display: none;
}
.line-reader-mask.resizing {
  background-color: rgba(243, 247, 250, 0.8);
  border-color: rgba(14, 93, 145, 0.5);
}
.line-reader-mask.resizer {
  z-index: 99999 !important;
}
.line-reader-mask.resizer.se .resize-control {
  border-right: 2px solid #0e5d91;
  border-bottom: 2px solid #0e5d91;
  width: 40px;
  height: 40px;
}
.line-reader-mask.border-top {
  border-top-width: 1px;
}
.line-reader-mask.border-right {
  border-right-width: 1px;
}
.line-reader-mask.border-bottom {
  border-bottom-width: 1px;
}
.line-reader-mask.border-left {
  border-left-width: 1px;
}
.line-reader-mask.ne {
  border-top-right-radius: 5px;
}
.line-reader-mask.se {
  border-bottom-right-radius: 5px;
}
.line-reader-mask.sw {
  border-bottom-left-radius: 5px;
}
.line-reader-mask.nw {
  border-top-left-radius: 5px;
}
.line-reader-mask.se .resize-control {
  width: 20px;
  height: 20px;
  margin-bottom: 10px;
  margin-right: 10px;
  border-right: 1px solid #0e5d91;
  border-bottom: 1px solid #0e5d91;
  position: absolute;
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
}
.line-reader-mask.e .resize-control {
  position: absolute;
  width: 20px;
  height: 20px;
  bottom: -10px;
  left: -10px;
  border-right: 1px solid #0e5d91;
  border-bottom: 1px solid #0e5d91;
  cursor: nesw-resize;
}
.line-reader-mask.s .resize-control {
  position: absolute;
  width: 20px;
  height: 10px;
  right: -10px;
  border-bottom: 1px solid #0e5d91;
}

.line-reader-overlay {
  box-sizing: border-box;
  opacity: 0;
}
.line-reader-overlay.hidden {
  display: none;
}
.line-reader-overlay.moving {
  border-radius: 5px;
}
.line-reader-overlay.moving.n {
  max-height: none;
}
.line-reader-overlay.moving, .line-reader-overlay .inner-window {
  overflow: hidden;
  position: absolute;
  opacity: 1;
  background-color: transparent;
  border: 1px solid rgba(14, 93, 145, 0.5);
}
.line-reader-overlay .inner-window {
  box-sizing: content-box;
}
.line-reader-overlay .mask-bg {
  box-sizing: border-box;
  border: 0 solid rgba(243, 247, 250, 0.8);
  background-color: transparent;
  position: absolute;
}
.line-reader-overlay.n {
  max-height: 30px;
  opacity: 1;
}
.line-reader-overlay.n .icon-mobile-menu {
  font-size: 22px;
  font-size: 2.2rem;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  border-bottom: 1px solid #0e5d91;
  color: #0e5d91;
  position: absolute;
  left: 0;
  top: 0;
  height: 30px;
  width: 100%;
  z-index: 1;
}
.line-reader-overlay.n .icon-mobile-menu:hover {
  color: #0a4166;
}
.line-reader-overlay.n .icon-mobile-menu:before {
  position: relative;
  top: 3px;
}
.line-reader-overlay .icon-mobile-menu {
  display: none;
}

.line-reader-inner-drag {
  border-radius: 3px;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  text-align: center;
  padding-top: 3px;
  color: #0e5d91;
}
.line-reader-inner-drag.hidden {
  display: none;
}
.line-reader-inner-drag:hover {
  background-color: #87aec8;
  color: #0a4166;
}
.line-reader-inner-drag.moving {
  background-color: transparent;
  color: #9fbed3;
}
.line-reader-inner-drag .icon {
  text-shadow: none !important;
  border-bottom-left-radius: 110px;
  border-bottom-right-radius: 110px;
  border: 1px solid #0e5d91;
  border-top: 0;
  width: 50px;
  height: 25px;
  position: relative;
  bottom: 10px;
}
.line-reader-inner-drag .icon:before {
  position: relative;
  top: 5px;
  left: 1px;
}

.line-reader-closer {
  font-size: 22px;
  font-size: 2.2rem;
  cursor: pointer;
  color: #0e5d91;
  width: 12px;
  height: 12px;
}
.line-reader-closer:hover {
  color: #0a4166;
}
.line-reader-closer .icon {
  text-shadow: none !important;
}

.magnifier-container.magnifier-container {
  background-color: transparent;
}
.magnifier-container.magnifier-container .dynamic-component-title-bar {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  background-color: transparent;
  border: none;
  position: absolute;
  width: 100%;
  z-index: 3;
}
.magnifier-container.magnifier-container .dynamic-component-title-bar.moving {
  background: #f3f1ef;
  border-bottom: 1px solid rgb(141, 148, 158);
}
.magnifier-container.magnifier-container .dynamic-component-title-bar .closer {
  display: none;
}
.magnifier-container.magnifier-container .dynamic-component-resize-container .dynamic-component-resize-wrapper {
  bottom: 0;
}
.magnifier-container.magnifier-container .dynamic-component-resize-container .dynamic-component-resize-wrapper:hover, .magnifier-container.magnifier-container .dynamic-component-resize-container .dynamic-component-resize-wrapper.resizing {
  bottom: 20px;
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgb(255, 255, 255);
  opacity: 1;
  border-radius: 5px;
  box-sizing: content-box;
  padding-bottom: 30px;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes pop {
  0% {
    opacity: 0;
    visibility: visible;
  }
  50% {
    opacity: 0.5;
    visibility: visible;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(3);
  }
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier .level {
  position: absolute;
  overflow: hidden;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
  color: #3e7da7;
  opacity: 1;
  font-size: 50px;
  font-size: 5rem;
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  animation: pop 400ms forwards;
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier .level:before {
  content: "x";
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier .overlay {
  position: absolute;
  overflow: hidden;
  z-index: 2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: transparent;
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier > .controls {
  position: absolute;
  background-color: #f3f1ef;
  border: 0 solid rgb(141, 148, 158);
  min-height: 29px;
  z-index: 4;
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier > .controls a {
  color: #222;
  text-decoration: none;
  font-size: 20px;
  font-size: 2rem;
  margin: 0 2px;
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier > .controls a:hover {
  color: #0a4166;
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier > .controls.close {
  top: 0;
  right: 0;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-bottom-left-radius: 5px;
}
.magnifier-container.magnifier-container .dynamic-component-content .magnifier .inner {
  position: absolute;
}
.magnifier-container.magnifier-container .dynamic-component-content.moving .magnifier .controls {
  border-left: none;
  border-bottom-left-radius: 0;
}
.magnifier-container.magnifier-container .dynamic-component-content.sizing {
  border-color: rgba(14, 93, 145, 0.5);
}
.magnifier-container.magnifier-container .dynamic-component-content.sizing .inner, .magnifier-container.magnifier-container .dynamic-component-content.sizing .controls, .magnifier-container.magnifier-container .dynamic-component-content.sizing .level {
  opacity: 0.45 !important;
}

.progress-box .progressbar .progressbar-points {
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
}
.progress-box .progressbar .progressbar-points > span.progressbar-point {
  flex: 1;
  display: inline-block;
  border: 1px solid rgb(14, 93, 145);
  background-color: #f3f1ef;
  height: calc(1rem - 4px);
  margin: 0 1px 0 0;
}
.progress-box .progressbar .progressbar-points > span.progressbar-point:last-child {
  margin-right: 0;
}
.progress-box .progressbar .progressbar-points > span.progressbar-point.reached {
  background-color: rgb(14, 93, 145);
}
.progress-box .progressbar .progressbar-points > span.progressbar-point.current {
  background-color: #a4a9b1;
}

.tts-container .tts-controls {
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  background-color: #f3f1ef;
  -ms-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 3px 1px rgba(0, 0, 0, 0.2);
}
.tts-container .tts-controls .tts-control {
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
  color: #222;
  height: 100%;
  padding: 6px 8.5px;
  text-decoration: none;
}
.tts-container .tts-controls .tts-control .tts-control-label {
  padding-left: 7.5px;
}
.tts-container .tts-controls .tts-control .tts-icon {
  font-size: 18px;
  text-align: center;
  width: 18px;
}
.tts-container .tts-controls .tts-control .icon-pause {
  display: none;
}
.tts-container .tts-controls .tts-control.tts-control-drag {
  cursor: move;
}
.tts-container .tts-controls .tts-control.tts-control-drag .tts-icon {
  color: #555555;
}
.tts-container .tts-controls .tts-control.tts-control-drag:hover {
  background-color: transparent;
}
.tts-container .tts-controls .tts-control:hover {
  background-color: #ddd8d2;
}
.tts-container .tts-controls .tts-control-container {
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
}
.tts-container .tts-controls .tts-control-container .tts-slider-container {
  display: none;
}
.tts-container .tts-controls .tts-control-container .tts-slider-container .tts-slider {
  margin: 0 8.5px;
  width: 80px;
}
.tts-container.playing .tts-controls .tts-control .icon-pause {
  display: block;
}
.tts-container.playing .tts-controls .tts-control .icon-play {
  display: none;
}
.tts-container.sfhMode .tts-controls .tts-control.tts-control-mode {
  -ms-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  background-color: #ddd8d2;
}
.tts-container.settings .tts-controls .tts-control-container .tts-slider-container {
  display: -ms-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}
.tts-container.settings .tts-controls .tts-control-container:last-child {
  -ms-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  background-color: #ddd8d2;
}
.tts-container.settings .tts-controls .tts-control-container .tts-control-settings:hover {
  background-color: transparent;
}

.tts-content-node {
  outline: none;
}

.tts-visible.tts-component-container .test-runner-sections .tts-content-node:hover, .tts-visible.tts-component-container .test-runner-sections .tts-content-node:focus {
  background-color: transparent !important;
  color: #222 !important;
}
.tts-visible.tts-component-container .test-runner-sections .tts-content-node .label-box,
.tts-visible.tts-component-container .test-runner-sections .tts-content-node .qti-choice {
  cursor: default !important;
}

.tts-sfhMode.tts-component-container .test-runner-sections {
  cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxNHB4IiBoZWlnaHQ9IjE0cHgiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5Hcm91cCAyPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQuMDAwMDAwLCAtMTYuMDAwMDAwKSI+ICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzLjAwMDAwMCwgMTUuMDAwMDAwKSI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weS02IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjwvcmVjdD4gICAgICAgICAgICAgICAgPGcgaWQ9Imljb24tLy0xNi0vLWNoZXZyb24tYm90dG9tLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuMDAwMDAwLCAyLjAwMDAwMCkiIGZpbGw9IiMyRDJEMkQiPiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InN3YXAtaWNvbi1jb2xvciIgcG9pbnRzPSIwIDAgMCA4IDYgNCI+PC9wb2x5Z29uPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weSIgZmlsbD0iIzJEMkQyRCIgeD0iOSIgeT0iNSIgd2lkdGg9IjYiIGhlaWdodD0iMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgZmlsbD0iIzJEMkQyRCIgeD0iOSIgeT0iMSIgd2lkdGg9IjYiIGhlaWdodD0iMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktMiIgZmlsbD0iIzJEMkQyRCIgeD0iOSIgeT0iOSIgd2lkdGg9IjYiIGhlaWdodD0iMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktMyIgZmlsbD0iIzJEMkQyRCIgeD0iMSIgeT0iMTMiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyIj48L3JlY3Q+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) 0 32, auto !important;
}
.tts-sfhMode.tts-component-container .test-runner-sections .tts-content-node.tts-active-content-node:hover {
  color: #222 !important;
  background-color: yellow !important;
}
.tts-sfhMode.tts-component-container .test-runner-sections .tts-content-node:hover, .tts-sfhMode.tts-component-container .test-runner-sections .tts-content-node:focus {
  color: #222 !important;
  background-color: #f3f1ef !important;
}
.tts-sfhMode.tts-component-container .test-runner-sections .tts-content-node .label-box,
.tts-sfhMode.tts-component-container .test-runner-sections .tts-content-node .qti-choice {
  cursor: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIxNHB4IiBoZWlnaHQ9IjE0cHgiIHZpZXdCb3g9IjAgMCAxNCAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5Hcm91cCAyPC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9IkFydGJvYXJkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjQuMDAwMDAwLCAtMTYuMDAwMDAwKSI+ICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzLjAwMDAwMCwgMTUuMDAwMDAwKSI+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weS02IiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjwvcmVjdD4gICAgICAgICAgICAgICAgPGcgaWQ9Imljb24tLy0xNi0vLWNoZXZyb24tYm90dG9tLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuMDAwMDAwLCAyLjAwMDAwMCkiIGZpbGw9IiMyRDJEMkQiPiAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9InN3YXAtaWNvbi1jb2xvciIgcG9pbnRzPSIwIDAgMCA4IDYgNCI+PC9wb2x5Z29uPiAgICAgICAgICAgICAgICA8L2c+ICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtQ29weSIgZmlsbD0iIzJEMkQyRCIgeD0iOSIgeT0iNSIgd2lkdGg9IjYiIGhlaWdodD0iMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgZmlsbD0iIzJEMkQyRCIgeD0iOSIgeT0iMSIgd2lkdGg9IjYiIGhlaWdodD0iMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktMiIgZmlsbD0iIzJEMkQyRCIgeD0iOSIgeT0iOSIgd2lkdGg9IjYiIGhlaWdodD0iMiI+PC9yZWN0PiAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktMyIgZmlsbD0iIzJEMkQyRCIgeD0iMSIgeT0iMTMiIHdpZHRoPSIxNCIgaGVpZ2h0PSIyIj48L3JlY3Q+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) 0 32, auto !important;
}
.tts-sfhMode.tts-component-container .test-runner-sections img.tts-content-node:hover, .tts-sfhMode.tts-component-container .test-runner-sections img.tts-content-node:focus {
  padding: 5px;
}

.tts-playing.tts-component-container .test-runner-sections .tts-content-node.tts-active-content-node, .tts-playing.tts-component-container .test-runner-sections .tts-content-node.tts-active-content-node * {
  color: #222 !important;
  background-color: yellow !important;
}
.tts-playing.tts-component-container .test-runner-sections .tts-content-node.tts-active-content-node:hover, .tts-playing.tts-component-container .test-runner-sections .tts-content-node.tts-active-content-node *:hover {
  color: #222 !important;
  background-color: yellow !important;
}
.tts-playing.tts-component-container .test-runner-sections img.tts-content-node.tts-active-content-node {
  padding: 5px;
}

body.delivery-scope {
  min-height: 100vh;
  max-height: 100vh;
  margin-bottom: 0;
}

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.runner {
  position: relative;
}

.qti-choiceInteraction .overlay-answer-eliminator {
  display: none;
}

.test-runner-scope {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 99px);
}
.test-runner-scope .landmark-title-hidden {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
}
.test-runner-scope .test-runner-sections {
  /* flex column value */
  flex: 1 1 0%;
  overflow: hidden;
  /* is also a flex container */
  display: flex;
  flex-direction: row;
}
.test-runner-scope .test-sidebar {
  background: #f3f1ef;
  /* side bars are supposed to have no width until they've got content */
  flex: 0 1 auto;
  overflow-y: auto;
  max-width: 350px;
}
.test-runner-scope .test-sidebar > .qti-panel {
  max-width: 350px;
  padding: 10px;
}
@media only screen and (max-device-width: 800px) {
  .test-runner-scope .test-sidebar {
    max-width: 200px;
  }
  .test-runner-scope .test-sidebar > .qti-panel {
    max-width: 200px;
  }
}
@media only screen and (min-device-width: 800px) and (max-device-width: 1280px) {
  .test-runner-scope .test-sidebar {
    max-width: 250px;
  }
  .test-runner-scope .test-sidebar > .qti-panel {
    max-width: 250px;
  }
}
@media only screen and (min-device-width: 1280px) and (max-device-width: 1440px) {
  .test-runner-scope .test-sidebar {
    max-width: 300px;
  }
  .test-runner-scope .test-sidebar > .qti-panel {
    max-width: 300px;
  }
}
.test-runner-scope .test-sidebar-left {
  border-right: 1px #ddd solid;
}
.test-runner-scope .test-sidebar-right {
  border-left: 1px #ddd solid;
}
.test-runner-scope .content-wrapper {
  position: relative;
  flex: 1 1 0%;
  overflow: auto;
  padding: 0;
}
.test-runner-scope .content-wrapper .overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  opacity: 0.9;
}
.test-runner-scope .content-wrapper .overlay-full {
  background-color: rgb(255, 255, 255);
  opacity: 1;
}
.test-runner-scope #qti-content {
  -webkit-overflow-scrolling: touch;
  max-width: 1024px;
  width: 100%;
  margin: auto;
}
.test-runner-scope #qti-item {
  width: 100%;
  min-width: 100%;
  height: auto;
  overflow: visible;
}
.test-runner-scope .qti-item {
  padding: 30px;
}
.test-runner-scope .size-wrapper {
  max-width: 1280px;
  margin: auto;
  width: 100%;
}
.test-runner-scope #qti-rubrics {
  margin: auto;
  max-width: 1024px;
  width: 100%;
}
.test-runner-scope #qti-rubrics .qti-rubricBlock {
  margin: 20px 0;
}
.test-runner-scope #qti-rubrics .hidden {
  display: none;
}
.test-runner-scope .visible-hidden {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  word-wrap: normal;
}

.no-controls .test-runner-scope {
  height: 100vh;
}

.item-writing-mode-vertical-rl #qti-content {
  height: 100%;
}
.item-writing-mode-vertical-rl .qti-item {
  padding: 15px;
}

.qti-itemBody.writing-mode-vertical-rl {
  writing-mode: vertical-rl;
  padding: 15px;
  block-size: 100%;
  inline-size: 100%;
  overflow: auto;
  overscroll-behavior: contain;
  line-height: 1.8; /* assuming ruby tags */
  /* vertical writing mode is set for whole item, to fit wavy underlines and subscripts */
}
.qti-itemBody.writing-mode-vertical-rl .custom-text-box {
  padding-block-start: 12px;
}

.qti-itemBody {
  /* vertical writing mode is set for A-block, to fit wavy underlines and subscripts */
}
.qti-itemBody .writing-mode-vertical-rl {
  padding-block-start: 12px;
}

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.test-runner-scope .action-bar.content-action-bar {
  padding: 2px;
}
.test-runner-scope .action-bar.content-action-bar li {
  margin: 2px 0 0 10px;
  border: none;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info {
  padding-top: 6px;
  height: 36px;
  margin-top: 0;
  border-bottom: solid 2px transparent;
  border-radius: 0;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info.btn-group {
  border: none !important;
  overflow: hidden;
  padding: 0;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info.btn-group a {
  float: left;
  margin: 0 2px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0px;
  display: inline-block;
  height: inherit;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info.btn-group a:first-of-type {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  margin-left: 0;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info.btn-group a:last-of-type {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  margin-right: 0;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info.btn-group a:hover, .test-runner-scope .action-bar.content-action-bar li.btn-info.btn-group a.active {
  border-color: rgba(255, 255, 255, 0.8);
}
.test-runner-scope .action-bar.content-action-bar li.btn-info.btn-group a .no-label {
  padding-right: 0;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info:hover, .test-runner-scope .action-bar.content-action-bar li.btn-info.active {
  border-bottom-color: rgba(255, 255, 255, 0.8);
}
.test-runner-scope .action-bar.content-action-bar li.btn-info:active, .test-runner-scope .action-bar.content-action-bar li.btn-info.active {
  background: #e7eff4;
  border-color: rgba(255, 255, 255, 0.8);
}
.test-runner-scope .action-bar.content-action-bar li.btn-info:active a, .test-runner-scope .action-bar.content-action-bar li.btn-info.active a {
  color: #266d9c;
  text-shadow: none;
}
.test-runner-scope .action-bar.content-action-bar li.btn-info:active:hover, .test-runner-scope .action-bar.content-action-bar li.btn-info.active:hover {
  background: rgb(255, 255, 255);
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar {
  opacity: 1;
  height: 40px;
  flex-basis: 40px;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box {
  height: 38px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box .title-box {
  font-size: 14px;
  font-size: 1.4rem;
  padding: 4px 0 0;
  flex: 0 1 auto;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box .progress-box, .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box .item-number-box {
  padding-top: 4px;
  white-space: nowrap;
  flex: 0 1 auto;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box .progress-box .qti-controls, .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box .item-number-box .qti-controls {
  display: inline-block;
  margin-left: 20px;
  white-space: nowrap;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box .timer-box {
  /*flex item of control-box */
  flex: 1 0 auto;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar.top-action-bar > .control-box .progressbar {
  margin-top: 5px;
  min-width: 150px;
  max-width: 200px;
  height: 0.6em;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 1px 1px 0 black;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box .lft, .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box .rgt {
  padding-left: 20px;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box .lft:first-child, .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box .rgt:first-child {
  padding-left: 0;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box .lft:last-child ul, .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box .rgt:last-child ul {
  display: inline-block;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box [class^=btn-], .test-runner-scope .action-bar.content-action-bar.horizontal-action-bar > .control-box [class*=" btn-"] {
  white-space: nowrap;
}
.test-runner-scope .action-bar.content-action-bar.horizontal-action-bar .tools-box .action {
  position: relative;
  overflow: visible;
}
.test-runner-scope .action-bar.content-action-bar.hor