@oat-sa/tao-core-ui 3.24.1 → 3.24.2

package/src/searchModal/css/searchModal.css

@@ -12,9 +12,6 @@ Usage:
      so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
  */
 /* Do not edit */
-.section-container {
-  top: 0 !important;
-}
 .section-container .flex-container-full {
   -ms-order: 0;
   order: 0;
@@ -69,6 +66,9 @@ Usage:
   align-self: stretch;
   flex: 0 0 414px;
 }
+.section-container {
+  top: 0 !important;
+}
 .section-container .section-header {
   border: none;
 }
@@ -99,9 +99,9 @@ Usage:
   top: 0;
   padding: 0;
   margin: 0 1px 0px 0;
-  border-top: 1px solid #f3f1ef !important;
-  border-bottom: 1px solid #f3f1ef !important;
-  background: #f3f1ef !important;
+  border-top: 1px solid rgb(95.1764705882%, 94.4705882353%, 93.7058823529%) !important;
+  border-bottom: 1px solid rgb(95.1764705882%, 94.4705882353%, 93.7058823529%) !important;
+  background: rgb(95.1764705882%, 94.4705882353%, 93.7058823529%) !important;
 }
 .section-container .tab-container li a {
   top: 0 !important;
@@ -113,9 +113,9 @@ Usage:
   float: left;
 }
 .section-container .tab-container li.active, .section-container .tab-container li:hover {
-  border-bottom-color: #4a86ad !important;
-  border-top-color: #6e9ebd !important;
-  background: #266d9c !important;
+  border-bottom-color: rgb(29.1176470588%, 52.3529411765%, 67.6470588235%) !important;
+  border-top-color: rgb(43.2941176471%, 61.8823529412%, 74.1176470588%) !important;
+  background: rgb(14.9411764706%, 42.8235294118%, 61.1764705882%) !important;
 }
 .section-container .tab-container li.active a, .section-container .tab-container li:hover a {
   background: transparent !important;
@@ -124,7 +124,7 @@ Usage:
   text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
 }
 .section-container .tab-container li.disabled:hover {
-  background: #f3f1ef !important;
+  background: rgb(95.1764705882%, 94.4705882353%, 93.7058823529%) !important;
 }
 .section-container .tab-container li.disabled:hover a {
   cursor: not-allowed !important;
@@ -132,7 +132,7 @@ Usage:
 }
 .section-container .ui-container {
   display: none;
-  background: #f3f1ef;
+  background: rgb(95.1764705882%, 94.4705882353%, 93.7058823529%);
   -ms-order: 0;
   order: 0;
   flex-item-align: stretch;
@@ -241,7 +241,7 @@ Usage:
 .section-container .content-block .data-container-wrapper > section .ui-widget-header,
 .section-container .content-block .data-container-wrapper .data-container > header,
 .section-container .content-block .data-container-wrapper .data-container .ui-widget-header {
-  background: #f3f1ef;
+  background: rgb(95.1764705882%, 94.4705882353%, 93.7058823529%);
   border-width: 0px !important;
   border-bottom: 1px #ddd solid !important;
 }
@@ -285,7 +285,7 @@ Usage:
 .section-container .content-block .data-container-wrapper > section .data-container-footer,
 .section-container .content-block .data-container-wrapper .data-container > footer,
 .section-container .content-block .data-container-wrapper .data-container .data-container-footer {
-  background: #f3f1ef;
+  background: rgb(95.1764705882%, 94.4705882353%, 93.7058823529%);
   text-align: right !important;
   padding: 4px;
   border-width: 0px !important;
@@ -314,7 +314,7 @@ Usage:
 }
 .section-container .content-block form:not(.list-container) {
   border: 1px #ddd solid;
-  background: #f3f1ef;
+  background: rgb(95.1764705882%, 94.4705882353%, 93.7058823529%);
   padding: 30px;
   border: 1px solid #ddd;
   border-radius: 2px;

package/src/searchModal/css/searchModal.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/searchModal.scss%23sass","../scss/searchModal.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"searchModal.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: calc(100 / ($count - 1));\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient(#{$css});\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: calc((($gridPx - ($numCols * $gutter)) / $numCols));\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-inline-start: $marginPercent;\n    inline-size: $spanPercent;\n}\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    } @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction: row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        } @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    } @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return calc(($colWidth * 100 / $context) * 1%);\n}\n\n@function remDist($fontSizePx) {\n    @return calc(($fontSizePx / 10) * 1rem);\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha));\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha));\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: calc(($remPx) * 1px) !important;\n        font-size: calc(($remPx / 10) * 1rem) !important;\n    } @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} {\n        @content;\n    }\n    @-moz-keyframes #{$name} {\n        @content;\n    }\n    @-webkit-keyframes #{$name} {\n        @content;\n    }\n    @keyframes #{$name} {\n        @content;\n    }\n}\n\n@mixin animation($value, $type: '') {\n    $animation: animation;\n    @if $type != '' {\n        $animation: $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s) {\n    @include keyframes(fade) {\n        0% {\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n        }\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat() {\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n\n/*\n * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.\n   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;\n     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.\n */\n@mixin writing-mode-vertical-rl {\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl\")} {\n            @content;\n        }\n    }\n}\n@mixin writing-mode-horizontal-tb {\n    & {\n        @content;\n    }\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl .writing-mode-horizontal-tb\")} {\n            @content;\n        }\n    }\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-restricted { content: \"\\e92c\"; }\n@mixin icon-blocked { content: \"\\e92d\"; }\n@mixin icon-copy { content: \"\\e92b\"; }\n@mixin icon-align-center { content: \"\\e92a\"; }\n@mixin icon-multiple-magicwand { content: \"\\e929\"; }\n@mixin icon-sd-import { content: \"\\e91f\"; }\n@mixin icon-sd-export { content: \"\\e924\"; }\n@mixin icon-browse { content: \"\\e925\"; }\n@mixin icon-minus { content: \"\\e926\"; }\n@mixin icon-plus { content: \"\\e927\"; }\n@mixin icon-sd-save { content: \"\\e928\"; }\n@mixin icon-back-button { content: \"\\e91e\"; }\n@mixin icon-japan-incorrect { content: \"\\e91b\"; }\n@mixin icon-japan-correct { content: \"\\e91c\"; }\n@mixin icon-japan-partial { content: \"\\e91d\"; }\n@mixin icon-score-partial { content: \"\\e91a\"; }\n@mixin icon-furigana { content: \"\\e919\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-duplicate { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","@import 'inc/bootstrap';\n$classTreeVariables: (\n    top: 27px,\n    left: 0px,\n    width: 275px,\n    font-size: 1.2rem\n);\n\n.section-container {\n    // some variations of flex children\n    $flexCols: full, half, third, quarter;\n    @for $i from 1 through length($flexCols) {\n        $width: calc((100 / ($i)) * 1%);\n        $flexCol: #{nth($flexCols, $i)};\n        .flex-container-#{$flexCol} {\n            @include simple-flex-box($width);\n        }\n    }\n\n    // 'whatever-is-left' container\n    .flex-container-remaining {\n        @include simple-flex-box(auto, 480px);\n    }\n\n    // main form on left hand side\n    .flex-container-main-form {\n        @include simple-flex-box(500px);\n        margin: 0 20px 20px 0;\n        width: 100%;\n\n        .form-content {\n            max-width: 100%;\n        }\n    }\n\n    // the one for the sidebar that usually holds tree\n    .flex-container-navi {\n        @include simple-flex-box($treeSidebar * 1px);\n    }\n\n    // @todo all simple-flex-box references below should be removed once all templates are upgraded\n\n    top: 0 !important;\n\n    .section-header {\n        border: none;\n    }\n\n    .content-panel {\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        border: none !important;\n        @include flex-container();\n    }\n\n    .tab-container {\n        border: none;\n        display: none;\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n        li {\n            float: left;\n            position: relative;\n            top: 0;\n            padding: 0;\n            margin: 0 1px 0px 0;\n            border-top: 1px solid $canvas !important;\n            border-bottom: 1px solid $canvas !important;\n            background: $canvas !important;\n            a {\n                top: 0 !important;\n                margin-bottom: 0 !important;\n                padding: 6px 16px;\n                text-decoration: none;\n                min-height: 32px;\n                color: $textColor;\n                float: left;\n            }\n            &.active,\n            &:hover {\n                border-bottom-color: whiten($info, 0.25) !important;\n                border-top-color: whiten($info, 0.4) !important;\n                background: whiten($info, 0.1) !important;\n                a {\n                    background: transparent !important;\n                    border-color: transparent !important;\n                    color: $textHighlight !important;\n                    text-shadow: 1px 1px 0 black(0.2);\n                }\n            }\n            &.disabled:hover {\n                background: $canvas !important;\n                a {\n                    cursor: not-allowed !important;\n                    color: $textColor !important;\n                }\n            }\n        }\n    }\n\n    .ui-container {\n        display: none;\n        background: $canvas;\n        @include simple-flex-box($treeSidebar * 1px);\n        border-right: 1px $uiGeneralContentBorder solid;\n        .block-title {\n            @include font-size(14);\n            padding: 2px 8px;\n            margin: 0;\n        }\n        .tree-action-bar-box {\n            margin: 10px 0;\n            opacity: 0;\n            &.active {\n                opacity: 1;\n                @include vendor-prefix(opacity, 0.25s ease-in-out, property, (-webkit-, -moz-, ''));\n            }\n        }\n    }\n\n    .content-container {\n        border: none;\n        @include simple-flex-box();\n        overflow: auto;\n    }\n\n    .content-toolbar {\n        height: 2rem;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-end;\n    }\n\n    .toggle-modal-button {\n        user-select: none;\n        margin: 0 2rem;\n        .icon-add {\n            font-size: 1.6rem;\n            position: relative;\n            top: 2px;\n            margin-right: 8px;\n        }\n    }\n\n    .content-block {\n        padding: 20px;\n        overflow-y: auto;\n        @include flex-container(wrap);\n        & > .grid-container {\n            width: 100%;\n        }\n\n        .data-container-wrapper {\n            padding: 0px 20px 0 0;\n            &:before,\n            &:after {\n                content: ' ';\n                display: table;\n            }\n            &:after {\n                clear: both;\n            }\n            & > section,\n            .data-container {\n                width: 260px;\n                margin: 0 20px 20px 0;\n                float: left;\n                @include simple-border();\n                &.double {\n                    width: 540px;\n                }\n                .emptyContentFooter {\n                    display: none;\n                }\n                .tree {\n                    border: none;\n                    max-width: none;\n                    max-height: none;\n                }\n                form {\n                    background: none;\n                    border: none;\n                    margin: 0;\n                    padding: 0;\n                }\n                & > header,\n                .ui-widget-header {\n                    background: $canvas;\n                    border-width: 0px !important;\n                    border-bottom: 1px #ddd solid !important;\n                    h1,\n                    h6 {\n                        padding: 4px;\n                        margin: 0;\n                        @include font-size(14);\n                    }\n                }\n                & > div,\n                .ui-widget-content,\n                .container-content {\n                    border-width: 0px !important;\n                    overflow-y: auto;\n                    min-height: 250px;\n                    padding: 5px;\n                    .icon-grip {\n                        cursor: move;\n                    }\n                }\n\n                & > footer {\n                    min-height: 33px;\n                }\n                & > footer,\n                .data-container-footer {\n                    background: $canvas;\n                    text-align: right !important;\n                    padding: 4px;\n                    border-width: 0px !important;\n                    border-top: 1px #ddd solid !important;\n                    .square {\n                        width: 28px;\n                        span {\n                            padding: 0;\n                            left: 0;\n                        }\n                    }\n                }\n                ol {\n                    margin: 0 0 0 15px;\n                    padding: 10px;\n                }\n            }\n        }\n\n        #form-container.ui-widget-content {\n            border: none !important;\n        }\n        form:not(.list-container) {\n            border: 1px $uiGeneralContentBorder solid;\n            background: $canvas;\n            padding: 30px;\n            @include simple-border();\n        }\n        [class^='btn-'],\n        [class*=' btn-'] {\n            margin: 0 2px;\n        }\n    }\n}\n\n.search-modal {\n    width: 100% !important;\n    // Increasing specificity\n    &.search-modal {\n        max-height: 100%;\n        min-height: 320px;\n        height: 100%;\n        padding: 0px;\n    }\n    .ui-container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        padding: 64px 0px 20px 20px;\n        .filters-container {\n            flex: 1 1 auto;\n            height: 100%;\n            min-height: 0;\n            display: flex;\n            flex-direction: column;\n        }\n        .basic-search-container {\n            padding-right: 20px;\n            flex: 0 0 auto;\n            .class-filter-container {\n                cursor: pointer;\n                z-index: 2;\n            }\n        }\n        .filter-container {\n            position: relative;\n            z-index: 1;\n            margin-bottom: 8px;\n            &:last-child {\n                padding-bottom: 16px;\n            }\n            > .icon-find,\n            > .icon-folder {\n                position: absolute;\n                top: 7px;\n                left: 8px;\n                color: #666;\n            }\n            .icon-down {\n                position: absolute;\n                top: 1px;\n                right: 1px;\n                padding: 5px;\n                background: white;\n            }\n            > input,\n            > textarea {\n                width: 100%;\n                padding-left: 28px;\n                max-width: unset;\n            }\n            .class-filter {\n                cursor: pointer;\n                resize: none;\n                white-space: nowrap;\n                overflow: hidden;\n                &[readonly]{\n                    opacity: 1 !important;\n                }\n            }\n            .class-tree {\n                display: none;\n                position: absolute;\n                top: map-get($classTreeVariables, top);\n                left: map-get($classTreeVariables, left);\n                width: map-get($classTreeVariables, width);\n                font-size: map-get($classTreeVariables, font-size);\n\n                main {\n                    overflow-y: auto;\n                    border: 1px solid black;\n                }\n            }\n        }\n        .buttons-container {\n            flex: 0 0 auto;\n            padding-right: 4px;\n            display: flex;\n            justify-content: space-between;\n            button {\n                flex: 1 1 auto;\n                margin-right: 16px;\n                vertical-align: top;\n            }\n            .btn-transparent {\n                background-color: transparent;\n                border: 1px solid black;\n                color: black;\n                text-shadow: none;\n            }\n        }\n    }\n    .content-container {\n        @media screen and (min-width: 840px) {\n            padding: 44px 64px 64px;\n        }\n        .no-datatable-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            .no-datatable-icon {\n                color: $lightBlueGrey;\n                font-size: 3.5em;\n                margin-bottom: 30px;\n            }\n        }\n    }\n\n    // Overwrite some not customizable styles of datatable and pagination components\n    .go-to-item {\n        background-color: transparent !important;\n        border: 1px solid black;\n        color: black !important;\n        text-shadow: none !important;\n    }\n\n    .actions {\n        width: 12%;\n    }\n\n    // Custom class for close modal button, so it positioned on the top-left corner instead of top-right (default)\n    .modal-close-left {\n        position: absolute;\n        left: 20px;\n        top: 20px;\n        cursor: pointer;\n        font-weight: bold;\n        color: $textColor !important;\n        background-color: transparent;\n        padding: 0;\n        height: 24px;\n        .icon-close {\n            font-size: 2.4rem;\n        }\n    }\n}\n\n","@import 'inc/bootstrap';\n$classTreeVariables: (\n    top: 27px,\n    left: 0px,\n    width: 275px,\n    font-size: 1.2rem\n);\n\n.section-container {\n    // some variations of flex children\n    $flexCols: full, half, third, quarter;\n    @for $i from 1 through length($flexCols) {\n        $width: calc((100 / ($i)) * 1%);\n        $flexCol: #{nth($flexCols, $i)};\n        .flex-container-#{$flexCol} {\n            @include simple-flex-box($width);\n        }\n    }\n\n    // 'whatever-is-left' container\n    .flex-container-remaining {\n        @include simple-flex-box(auto, 480px);\n    }\n\n    // main form on left hand side\n    .flex-container-main-form {\n        @include simple-flex-box(500px);\n        margin: 0 20px 20px 0;\n        width: 100%;\n\n        .form-content {\n            max-width: 100%;\n        }\n    }\n\n    // the one for the sidebar that usually holds tree\n    .flex-container-navi {\n        @include simple-flex-box($treeSidebar * 1px);\n    }\n\n    // @todo all simple-flex-box references below should be removed once all templates are upgraded\n\n    top: 0 !important;\n\n    .section-header {\n        border: none;\n    }\n\n    .content-panel {\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        border: none !important;\n        @include flex-container();\n    }\n\n    .tab-container {\n        border: none;\n        display: none;\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n        li {\n            float: left;\n            position: relative;\n            top: 0;\n            padding: 0;\n            margin: 0 1px 0px 0;\n            border-top: 1px solid $canvas !important;\n            border-bottom: 1px solid $canvas !important;\n            background: $canvas !important;\n            a {\n                top: 0 !important;\n                margin-bottom: 0 !important;\n                padding: 6px 16px;\n                text-decoration: none;\n                min-height: 32px;\n                color: $textColor;\n                float: left;\n            }\n            &.active,\n            &:hover {\n                border-bottom-color: whiten($info, 0.25) !important;\n                border-top-color: whiten($info, 0.4) !important;\n                background: whiten($info, 0.1) !important;\n                a {\n                    background: transparent !important;\n                    border-color: transparent !important;\n                    color: $textHighlight !important;\n                    text-shadow: 1px 1px 0 black(0.2);\n                }\n            }\n            &.disabled:hover {\n                background: $canvas !important;\n                a {\n                    cursor: not-allowed !important;\n                    color: $textColor !important;\n                }\n            }\n        }\n    }\n\n    .ui-container {\n        display: none;\n        background: $canvas;\n        @include simple-flex-box($treeSidebar * 1px);\n        border-right: 1px $uiGeneralContentBorder solid;\n        .block-title {\n            @include font-size(14);\n            padding: 2px 8px;\n            margin: 0;\n        }\n        .tree-action-bar-box {\n            margin: 10px 0;\n            opacity: 0;\n            &.active {\n                opacity: 1;\n                @include vendor-prefix(opacity, 0.25s ease-in-out, property, (-webkit-, -moz-, ''));\n            }\n        }\n    }\n\n    .content-container {\n        border: none;\n        @include simple-flex-box();\n        overflow: auto;\n    }\n\n    .content-toolbar {\n        height: 2rem;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-end;\n    }\n\n    .toggle-modal-button {\n        user-select: none;\n        margin: 0 2rem;\n        .icon-add {\n            font-size: 1.6rem;\n            position: relative;\n            top: 2px;\n            margin-right: 8px;\n        }\n    }\n\n    .content-block {\n        padding: 20px;\n        overflow-y: auto;\n        @include flex-container(wrap);\n        & > .grid-container {\n            width: 100%;\n        }\n\n        .data-container-wrapper {\n            padding: 0px 20px 0 0;\n            &:before,\n            &:after {\n                content: ' ';\n                display: table;\n            }\n            &:after {\n                clear: both;\n            }\n            & > section,\n            .data-container {\n                width: 260px;\n                margin: 0 20px 20px 0;\n                float: left;\n                @include simple-border();\n                &.double {\n                    width: 540px;\n                }\n                .emptyContentFooter {\n                    display: none;\n                }\n                .tree {\n                    border: none;\n                    max-width: none;\n                    max-height: none;\n                }\n                form {\n                    background: none;\n                    border: none;\n                    margin: 0;\n                    padding: 0;\n                }\n                & > header,\n                .ui-widget-header {\n                    background: $canvas;\n                    border-width: 0px !important;\n                    border-bottom: 1px #ddd solid !important;\n                    h1,\n                    h6 {\n                        padding: 4px;\n                        margin: 0;\n                        @include font-size(14);\n                    }\n                }\n                & > div,\n                .ui-widget-content,\n                .container-content {\n                    border-width: 0px !important;\n                    overflow-y: auto;\n                    min-height: 250px;\n                    padding: 5px;\n                    .icon-grip {\n                        cursor: move;\n                    }\n                }\n\n                & > footer {\n                    min-height: 33px;\n                }\n                & > footer,\n                .data-container-footer {\n                    background: $canvas;\n                    text-align: right !important;\n                    padding: 4px;\n                    border-width: 0px !important;\n                    border-top: 1px #ddd solid !important;\n                    .square {\n                        width: 28px;\n                        span {\n                            padding: 0;\n                            left: 0;\n                        }\n                    }\n                }\n                ol {\n                    margin: 0 0 0 15px;\n                    padding: 10px;\n                }\n            }\n        }\n\n        #form-container.ui-widget-content {\n            border: none !important;\n        }\n        form:not(.list-container) {\n            border: 1px $uiGeneralContentBorder solid;\n            background: $canvas;\n            padding: 30px;\n            @include simple-border();\n        }\n        [class^='btn-'],\n        [class*=' btn-'] {\n            margin: 0 2px;\n        }\n    }\n}\n\n.search-modal {\n    width: 100% !important;\n    // Increasing specificity\n    &.search-modal {\n        max-height: 100%;\n        min-height: 320px;\n        height: 100%;\n        padding: 0px;\n    }\n    .ui-container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        padding: 64px 0px 20px 20px;\n        .filters-container {\n            flex: 1 1 auto;\n            height: 100%;\n            min-height: 0;\n            display: flex;\n            flex-direction: column;\n        }\n        .basic-search-container {\n            padding-right: 20px;\n            flex: 0 0 auto;\n            .class-filter-container {\n                cursor: pointer;\n                z-index: 2;\n            }\n        }\n        .filter-container {\n            position: relative;\n            z-index: 1;\n            margin-bottom: 8px;\n            &:last-child {\n                padding-bottom: 16px;\n            }\n            > .icon-find,\n            > .icon-folder {\n                position: absolute;\n                top: 7px;\n                left: 8px;\n                color: #666;\n            }\n            .icon-down {\n                position: absolute;\n                top: 1px;\n                right: 1px;\n                padding: 5px;\n                background: white;\n            }\n            > input,\n            > textarea {\n                width: 100%;\n                padding-left: 28px;\n                max-width: unset;\n            }\n            .class-filter {\n                cursor: pointer;\n                resize: none;\n                white-space: nowrap;\n                overflow: hidden;\n                &[readonly]{\n                    opacity: 1 !important;\n                }\n            }\n            .class-tree {\n                display: none;\n                position: absolute;\n                top: map-get($classTreeVariables, top);\n                left: map-get($classTreeVariables, left);\n                width: map-get($classTreeVariables, width);\n                font-size: map-get($classTreeVariables, font-size);\n\n                main {\n                    overflow-y: auto;\n                    border: 1px solid black;\n                }\n            }\n        }\n        .buttons-container {\n            flex: 0 0 auto;\n            padding-right: 4px;\n            display: flex;\n            justify-content: space-between;\n            button {\n                flex: 1 1 auto;\n                margin-right: 16px;\n                vertical-align: top;\n            }\n            .btn-transparent {\n                background-color: transparent;\n                border: 1px solid black;\n                color: black;\n                text-shadow: none;\n            }\n        }\n    }\n    .content-container {\n        @media screen and (min-width: 840px) {\n            padding: 44px 64px 64px;\n        }\n        .no-datatable-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            .no-datatable-icon {\n                color: $lightBlueGrey;\n                font-size: 3.5em;\n                margin-bottom: 30px;\n            }\n        }\n    }\n\n    // Overwrite some not customizable styles of datatable and pagination components\n    .go-to-item {\n        background-color: transparent !important;\n        border: 1px solid black;\n        color: black !important;\n        text-shadow: none !important;\n    }\n\n    .actions {\n        width: 12%;\n    }\n\n    // Custom class for close modal button, so it positioned on the top-left corner instead of top-right (default)\n    .modal-close-left {\n        position: absolute;\n        left: 20px;\n        top: 20px;\n        cursor: pointer;\n        font-weight: bold;\n        color: $textColor !important;\n        background-color: transparent;\n        padding: 0;\n        height: 24px;\n        .icon-close {\n            font-size: 2.4rem;\n        }\n    }\n}\n\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorBrand: #266d9c;\n$colorBrandLight: #e4ecef;\n$colorGsDark: #121212; //color ported from nextgen TAO design system\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}
+{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/searchModal.scss%23sass","../scss/searchModal.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"searchModal.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: calc(100 / ($count - 1));\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient(#{$css});\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: calc((($gridPx - ($numCols * $gutter)) / $numCols));\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-inline-start: $marginPercent;\n    inline-size: $spanPercent;\n}\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    } @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction: row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        } @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    } @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return calc(($colWidth * 100 / $context) * 1%);\n}\n\n@function remDist($fontSizePx) {\n    @return calc(($fontSizePx / 10) * 1rem);\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha));\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha));\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: calc(($remPx) * 1px) !important;\n        font-size: calc(($remPx / 10) * 1rem) !important;\n    } @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} {\n        @content;\n    }\n    @-moz-keyframes #{$name} {\n        @content;\n    }\n    @-webkit-keyframes #{$name} {\n        @content;\n    }\n    @keyframes #{$name} {\n        @content;\n    }\n}\n\n@mixin animation($value, $type: '') {\n    $animation: animation;\n    @if $type != '' {\n        $animation: $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s) {\n    @include keyframes(fade) {\n        0% {\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n        }\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat() {\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n\n/*\n * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.\n   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;\n     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.\n */\n@mixin writing-mode-vertical-rl {\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl\")} {\n            @content;\n        }\n    }\n}\n@mixin writing-mode-horizontal-tb {\n    & {\n        @content;\n    }\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl .writing-mode-horizontal-tb\")} {\n            @content;\n        }\n    }\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-restricted { content: \"\\e92c\"; }\n@mixin icon-blocked { content: \"\\e92d\"; }\n@mixin icon-copy { content: \"\\e92b\"; }\n@mixin icon-align-center { content: \"\\e92a\"; }\n@mixin icon-multiple-magicwand { content: \"\\e929\"; }\n@mixin icon-sd-import { content: \"\\e91f\"; }\n@mixin icon-sd-export { content: \"\\e924\"; }\n@mixin icon-browse { content: \"\\e925\"; }\n@mixin icon-minus { content: \"\\e926\"; }\n@mixin icon-plus { content: \"\\e927\"; }\n@mixin icon-sd-save { content: \"\\e928\"; }\n@mixin icon-back-button { content: \"\\e91e\"; }\n@mixin icon-japan-incorrect { content: \"\\e91b\"; }\n@mixin icon-japan-correct { content: \"\\e91c\"; }\n@mixin icon-japan-partial { content: \"\\e91d\"; }\n@mixin icon-score-partial { content: \"\\e91a\"; }\n@mixin icon-furigana { content: \"\\e919\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-duplicate { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","@import 'inc/bootstrap';\n$classTreeVariables: (\n    top: 27px,\n    left: 0px,\n    width: 275px,\n    font-size: 1.2rem\n);\n\n.section-container {\n    // some variations of flex children\n    $flexCols: full, half, third, quarter;\n    @for $i from 1 through length($flexCols) {\n        $width: calc((100 / ($i)) * 1%);\n        $flexCol: #{nth($flexCols, $i)};\n        .flex-container-#{$flexCol} {\n            @include simple-flex-box($width);\n        }\n    }\n\n    // 'whatever-is-left' container\n    .flex-container-remaining {\n        @include simple-flex-box(auto, 480px);\n    }\n\n    // main form on left hand side\n    .flex-container-main-form {\n        @include simple-flex-box(500px);\n        margin: 0 20px 20px 0;\n        width: 100%;\n\n        .form-content {\n            max-width: 100%;\n        }\n    }\n\n    // the one for the sidebar that usually holds tree\n    .flex-container-navi {\n        @include simple-flex-box($treeSidebar * 1px);\n    }\n\n    // @todo all simple-flex-box references below should be removed once all templates are upgraded\n\n    top: 0 !important;\n\n    .section-header {\n        border: none;\n    }\n\n    .content-panel {\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        border: none !important;\n        @include flex-container();\n    }\n\n    .tab-container {\n        border: none;\n        display: none;\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n        li {\n            float: left;\n            position: relative;\n            top: 0;\n            padding: 0;\n            margin: 0 1px 0px 0;\n            border-top: 1px solid $canvas !important;\n            border-bottom: 1px solid $canvas !important;\n            background: $canvas !important;\n            a {\n                top: 0 !important;\n                margin-bottom: 0 !important;\n                padding: 6px 16px;\n                text-decoration: none;\n                min-height: 32px;\n                color: $textColor;\n                float: left;\n            }\n            &.active,\n            &:hover {\n                border-bottom-color: whiten($info, 0.25) !important;\n                border-top-color: whiten($info, 0.4) !important;\n                background: whiten($info, 0.1) !important;\n                a {\n                    background: transparent !important;\n                    border-color: transparent !important;\n                    color: $textHighlight !important;\n                    text-shadow: 1px 1px 0 black(0.2);\n                }\n            }\n            &.disabled:hover {\n                background: $canvas !important;\n                a {\n                    cursor: not-allowed !important;\n                    color: $textColor !important;\n                }\n            }\n        }\n    }\n\n    .ui-container {\n        display: none;\n        background: $canvas;\n        @include simple-flex-box($treeSidebar * 1px);\n        border-right: 1px $uiGeneralContentBorder solid;\n        .block-title {\n            @include font-size(14);\n            padding: 2px 8px;\n            margin: 0;\n        }\n        .tree-action-bar-box {\n            margin: 10px 0;\n            opacity: 0;\n            &.active {\n                opacity: 1;\n                @include vendor-prefix(opacity, 0.25s ease-in-out, property, (-webkit-, -moz-, ''));\n            }\n        }\n    }\n\n    .content-container {\n        border: none;\n        @include simple-flex-box();\n        overflow: auto;\n    }\n\n    .content-toolbar {\n        height: 2rem;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-end;\n    }\n\n    .toggle-modal-button {\n        user-select: none;\n        margin: 0 2rem;\n        .icon-add {\n            font-size: 1.6rem;\n            position: relative;\n            top: 2px;\n            margin-right: 8px;\n        }\n    }\n\n    .content-block {\n        padding: 20px;\n        overflow-y: auto;\n        @include flex-container(wrap);\n        & > .grid-container {\n            width: 100%;\n        }\n\n        .data-container-wrapper {\n            padding: 0px 20px 0 0;\n            &:before,\n            &:after {\n                content: ' ';\n                display: table;\n            }\n            &:after {\n                clear: both;\n            }\n            & > section,\n            .data-container {\n                width: 260px;\n                margin: 0 20px 20px 0;\n                float: left;\n                @include simple-border();\n                &.double {\n                    width: 540px;\n                }\n                .emptyContentFooter {\n                    display: none;\n                }\n                .tree {\n                    border: none;\n                    max-width: none;\n                    max-height: none;\n                }\n                form {\n                    background: none;\n                    border: none;\n                    margin: 0;\n                    padding: 0;\n                }\n                & > header,\n                .ui-widget-header {\n                    background: $canvas;\n                    border-width: 0px !important;\n                    border-bottom: 1px #ddd solid !important;\n                    h1,\n                    h6 {\n                        padding: 4px;\n                        margin: 0;\n                        @include font-size(14);\n                    }\n                }\n                & > div,\n                .ui-widget-content,\n                .container-content {\n                    border-width: 0px !important;\n                    overflow-y: auto;\n                    min-height: 250px;\n                    padding: 5px;\n                    .icon-grip {\n                        cursor: move;\n                    }\n                }\n\n                & > footer {\n                    min-height: 33px;\n                }\n                & > footer,\n                .data-container-footer {\n                    background: $canvas;\n                    text-align: right !important;\n                    padding: 4px;\n                    border-width: 0px !important;\n                    border-top: 1px #ddd solid !important;\n                    .square {\n                        width: 28px;\n                        span {\n                            padding: 0;\n                            left: 0;\n                        }\n                    }\n                }\n                ol {\n                    margin: 0 0 0 15px;\n                    padding: 10px;\n                }\n            }\n        }\n\n        #form-container.ui-widget-content {\n            border: none !important;\n        }\n        form:not(.list-container) {\n            border: 1px $uiGeneralContentBorder solid;\n            background: $canvas;\n            padding: 30px;\n            @include simple-border();\n        }\n        [class^='btn-'],\n        [class*=' btn-'] {\n            margin: 0 2px;\n        }\n    }\n}\n\n.search-modal {\n    width: 100% !important;\n    // Increasing specificity\n    &.search-modal {\n        max-height: 100%;\n        min-height: 320px;\n        height: 100%;\n        padding: 0px;\n    }\n    .ui-container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        padding: 64px 0px 20px 20px;\n        .filters-container {\n            flex: 1 1 auto;\n            height: 100%;\n            min-height: 0;\n            display: flex;\n            flex-direction: column;\n        }\n        .basic-search-container {\n            padding-right: 20px;\n            flex: 0 0 auto;\n            .class-filter-container {\n                cursor: pointer;\n                z-index: 2;\n            }\n        }\n        .filter-container {\n            position: relative;\n            z-index: 1;\n            margin-bottom: 8px;\n            &:last-child {\n                padding-bottom: 16px;\n            }\n            > .icon-find,\n            > .icon-folder {\n                position: absolute;\n                top: 7px;\n                left: 8px;\n                color: #666;\n            }\n            .icon-down {\n                position: absolute;\n                top: 1px;\n                right: 1px;\n                padding: 5px;\n                background: white;\n            }\n            > input,\n            > textarea {\n                width: 100%;\n                padding-left: 28px;\n                max-width: unset;\n            }\n            .class-filter {\n                cursor: pointer;\n                resize: none;\n                white-space: nowrap;\n                overflow: hidden;\n                &[readonly]{\n                    opacity: 1 !important;\n                }\n            }\n            .class-tree {\n                display: none;\n                position: absolute;\n                top: map-get($classTreeVariables, top);\n                left: map-get($classTreeVariables, left);\n                width: map-get($classTreeVariables, width);\n                font-size: map-get($classTreeVariables, font-size);\n\n                main {\n                    overflow-y: auto;\n                    border: 1px solid black;\n                }\n            }\n        }\n        .buttons-container {\n            flex: 0 0 auto;\n            padding-right: 4px;\n            display: flex;\n            justify-content: space-between;\n            button {\n                flex: 1 1 auto;\n                margin-right: 16px;\n                vertical-align: top;\n            }\n            .btn-transparent {\n                background-color: transparent;\n                border: 1px solid black;\n                color: black;\n                text-shadow: none;\n            }\n        }\n    }\n    .content-container {\n        @media screen and (min-width: 840px) {\n            padding: 44px 64px 64px;\n        }\n        .no-datatable-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            .no-datatable-icon {\n                color: $lightBlueGrey;\n                font-size: 3.5em;\n                margin-bottom: 30px;\n            }\n        }\n    }\n\n    // Overwrite some not customizable styles of datatable and pagination components\n    .go-to-item {\n        background-color: transparent !important;\n        border: 1px solid black;\n        color: black !important;\n        text-shadow: none !important;\n    }\n\n    .actions {\n        width: 12%;\n    }\n\n    // Custom class for close modal button, so it positioned on the top-left corner instead of top-right (default)\n    .modal-close-left {\n        position: absolute;\n        left: 20px;\n        top: 20px;\n        cursor: pointer;\n        font-weight: bold;\n        color: $textColor !important;\n        background-color: transparent;\n        padding: 0;\n        height: 24px;\n        .icon-close {\n            font-size: 2.4rem;\n        }\n    }\n}\n\n","@import 'inc/bootstrap';\n$classTreeVariables: (\n    top: 27px,\n    left: 0px,\n    width: 275px,\n    font-size: 1.2rem\n);\n\n.section-container {\n    // some variations of flex children\n    $flexCols: full, half, third, quarter;\n    @for $i from 1 through length($flexCols) {\n        $width: calc((100 / ($i)) * 1%);\n        $flexCol: #{nth($flexCols, $i)};\n        .flex-container-#{$flexCol} {\n            @include simple-flex-box($width);\n        }\n    }\n\n    // 'whatever-is-left' container\n    .flex-container-remaining {\n        @include simple-flex-box(auto, 480px);\n    }\n\n    // main form on left hand side\n    .flex-container-main-form {\n        @include simple-flex-box(500px);\n        margin: 0 20px 20px 0;\n        width: 100%;\n\n        .form-content {\n            max-width: 100%;\n        }\n    }\n\n    // the one for the sidebar that usually holds tree\n    .flex-container-navi {\n        @include simple-flex-box($treeSidebar * 1px);\n    }\n\n    // @todo all simple-flex-box references below should be removed once all templates are upgraded\n\n    top: 0 !important;\n\n    .section-header {\n        border: none;\n    }\n\n    .content-panel {\n        width: 100%;\n        height: 100%;\n        margin: 0;\n        padding: 0;\n        border: none !important;\n        @include flex-container();\n    }\n\n    .tab-container {\n        border: none;\n        display: none;\n        list-style-type: none;\n        padding: 0;\n        margin: 0;\n        li {\n            float: left;\n            position: relative;\n            top: 0;\n            padding: 0;\n            margin: 0 1px 0px 0;\n            border-top: 1px solid $canvas !important;\n            border-bottom: 1px solid $canvas !important;\n            background: $canvas !important;\n            a {\n                top: 0 !important;\n                margin-bottom: 0 !important;\n                padding: 6px 16px;\n                text-decoration: none;\n                min-height: 32px;\n                color: $textColor;\n                float: left;\n            }\n            &.active,\n            &:hover {\n                border-bottom-color: whiten($info, 0.25) !important;\n                border-top-color: whiten($info, 0.4) !important;\n                background: whiten($info, 0.1) !important;\n                a {\n                    background: transparent !important;\n                    border-color: transparent !important;\n                    color: $textHighlight !important;\n                    text-shadow: 1px 1px 0 black(0.2);\n                }\n            }\n            &.disabled:hover {\n                background: $canvas !important;\n                a {\n                    cursor: not-allowed !important;\n                    color: $textColor !important;\n                }\n            }\n        }\n    }\n\n    .ui-container {\n        display: none;\n        background: $canvas;\n        @include simple-flex-box($treeSidebar * 1px);\n        border-right: 1px $uiGeneralContentBorder solid;\n        .block-title {\n            @include font-size(14);\n            padding: 2px 8px;\n            margin: 0;\n        }\n        .tree-action-bar-box {\n            margin: 10px 0;\n            opacity: 0;\n            &.active {\n                opacity: 1;\n                @include vendor-prefix(opacity, 0.25s ease-in-out, property, (-webkit-, -moz-, ''));\n            }\n        }\n    }\n\n    .content-container {\n        border: none;\n        @include simple-flex-box();\n        overflow: auto;\n    }\n\n    .content-toolbar {\n        height: 2rem;\n        display: flex;\n        flex-direction: row;\n        justify-content: flex-end;\n    }\n\n    .toggle-modal-button {\n        user-select: none;\n        margin: 0 2rem;\n        .icon-add {\n            font-size: 1.6rem;\n            position: relative;\n            top: 2px;\n            margin-right: 8px;\n        }\n    }\n\n    .content-block {\n        padding: 20px;\n        overflow-y: auto;\n        @include flex-container(wrap);\n        & > .grid-container {\n            width: 100%;\n        }\n\n        .data-container-wrapper {\n            padding: 0px 20px 0 0;\n            &:before,\n            &:after {\n                content: ' ';\n                display: table;\n            }\n            &:after {\n                clear: both;\n            }\n            & > section,\n            .data-container {\n                width: 260px;\n                margin: 0 20px 20px 0;\n                float: left;\n                @include simple-border();\n                &.double {\n                    width: 540px;\n                }\n                .emptyContentFooter {\n                    display: none;\n                }\n                .tree {\n                    border: none;\n                    max-width: none;\n                    max-height: none;\n                }\n                form {\n                    background: none;\n                    border: none;\n                    margin: 0;\n                    padding: 0;\n                }\n                & > header,\n                .ui-widget-header {\n                    background: $canvas;\n                    border-width: 0px !important;\n                    border-bottom: 1px #ddd solid !important;\n                    h1,\n                    h6 {\n                        padding: 4px;\n                        margin: 0;\n                        @include font-size(14);\n                    }\n                }\n                & > div,\n                .ui-widget-content,\n                .container-content {\n                    border-width: 0px !important;\n                    overflow-y: auto;\n                    min-height: 250px;\n                    padding: 5px;\n                    .icon-grip {\n                        cursor: move;\n                    }\n                }\n\n                & > footer {\n                    min-height: 33px;\n                }\n                & > footer,\n                .data-container-footer {\n                    background: $canvas;\n                    text-align: right !important;\n                    padding: 4px;\n                    border-width: 0px !important;\n                    border-top: 1px #ddd solid !important;\n                    .square {\n                        width: 28px;\n                        span {\n                            padding: 0;\n                            left: 0;\n                        }\n                    }\n                }\n                ol {\n                    margin: 0 0 0 15px;\n                    padding: 10px;\n                }\n            }\n        }\n\n        #form-container.ui-widget-content {\n            border: none !important;\n        }\n        form:not(.list-container) {\n            border: 1px $uiGeneralContentBorder solid;\n            background: $canvas;\n            padding: 30px;\n            @include simple-border();\n        }\n        [class^='btn-'],\n        [class*=' btn-'] {\n            margin: 0 2px;\n        }\n    }\n}\n\n.search-modal {\n    width: 100% !important;\n    // Increasing specificity\n    &.search-modal {\n        max-height: 100%;\n        min-height: 320px;\n        height: 100%;\n        padding: 0px;\n    }\n    .ui-container {\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n        padding: 64px 0px 20px 20px;\n        .filters-container {\n            flex: 1 1 auto;\n            height: 100%;\n            min-height: 0;\n            display: flex;\n            flex-direction: column;\n        }\n        .basic-search-container {\n            padding-right: 20px;\n            flex: 0 0 auto;\n            .class-filter-container {\n                cursor: pointer;\n                z-index: 2;\n            }\n        }\n        .filter-container {\n            position: relative;\n            z-index: 1;\n            margin-bottom: 8px;\n            &:last-child {\n                padding-bottom: 16px;\n            }\n            > .icon-find,\n            > .icon-folder {\n                position: absolute;\n                top: 7px;\n                left: 8px;\n                color: #666;\n            }\n            .icon-down {\n                position: absolute;\n                top: 1px;\n                right: 1px;\n                padding: 5px;\n                background: white;\n            }\n            > input,\n            > textarea {\n                width: 100%;\n                padding-left: 28px;\n                max-width: unset;\n            }\n            .class-filter {\n                cursor: pointer;\n                resize: none;\n                white-space: nowrap;\n                overflow: hidden;\n                &[readonly]{\n                    opacity: 1 !important;\n                }\n            }\n            .class-tree {\n                display: none;\n                position: absolute;\n                top: map-get($classTreeVariables, top);\n                left: map-get($classTreeVariables, left);\n                width: map-get($classTreeVariables, width);\n                font-size: map-get($classTreeVariables, font-size);\n\n                main {\n                    overflow-y: auto;\n                    border: 1px solid black;\n                }\n            }\n        }\n        .buttons-container {\n            flex: 0 0 auto;\n            padding-right: 4px;\n            display: flex;\n            justify-content: space-between;\n            button {\n                flex: 1 1 auto;\n                margin-right: 16px;\n                vertical-align: top;\n            }\n            .btn-transparent {\n                background-color: transparent;\n                border: 1px solid black;\n                color: black;\n                text-shadow: none;\n            }\n        }\n    }\n    .content-container {\n        @media screen and (min-width: 840px) {\n            padding: 44px 64px 64px;\n        }\n        .no-datatable-container {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            .no-datatable-icon {\n                color: $lightBlueGrey;\n                font-size: 3.5em;\n                margin-bottom: 30px;\n            }\n        }\n    }\n\n    // Overwrite some not customizable styles of datatable and pagination components\n    .go-to-item {\n        background-color: transparent !important;\n        border: 1px solid black;\n        color: black !important;\n        text-shadow: none !important;\n    }\n\n    .actions {\n        width: 12%;\n    }\n\n    // Custom class for close modal button, so it positioned on the top-left corner instead of top-right (default)\n    .modal-close-left {\n        position: absolute;\n        left: 20px;\n        top: 20px;\n        cursor: pointer;\n        font-weight: bold;\n        color: $textColor !important;\n        background-color: transparent;\n        padding: 0;\n        height: 24px;\n        .icon-close {\n            font-size: 2.4rem;\n        }\n    }\n}\n\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorBrand: #266d9c;\n$colorBrandLight: #e4ecef;\n$colorGsDark: #121212; //color ported from nextgen TAO design system\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}

package/src/switch/css/switch.css

@@ -25,7 +25,7 @@ Usage:
   cursor: pointer;
 }
 .switch label {
-  border: solid 1px #a4a9b1;
+  border: solid 1px rgb(64.2352941176%, 66.431372549%, 69.568627451%);
   background-color: #f3f1ef;
   border-radius: 2px;
   padding: 1px;
@@ -44,7 +44,7 @@ Usage:
 }
 .switch input ~ label .off {
   color: white;
-  background-color: #a4a9b1;
+  background-color: rgb(64.2352941176%, 66.431372549%, 69.568627451%);
   transition: background-color 0.4s ease-out;
 }
 .switch input:checked ~ label .on {

package/src/switch/css/switch.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/switch.scss%23sass","../scss/switch.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"AAaA;;;;;;CAAA;AAwQA,oEAAA;AAWA;;;;EAAA;AChSA,gBAAA;ACoBA;EAEI,qBAAA;EACA,kBAAA;ACNJ;ADQI;EACI,kBAAA;ECNR,WAAA;EDQQ,YAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACNR;ADQI;EACI,yBAAA;EACA,yBEDe;EJ6EnB,kBAAA;EEzEI,YAAA;ACLR;ADMQ;EACI,qBAAA;EACA,kBAAA;EAEA,eAAA;EFoER,kBAAA;EEjEQ,kBAAA;ACJZ;ADQQ;EA/CJ,WEkBQ;EFjBR,yBAAA;EACA,0CAAA;AC0CJ;ADMQ;EAtCJ,YAAA;EACA,yBAAA;EACA,0CAAA;ACmCJ;ADMQ;EAjDJ,YAAA;EACA,kCAAA;EACA,0CAAA;AC8CJ;ADIQ;EA1DJ,WEkBQ;EFjBR,yBAAA;EACA,0CAAA;ACyDJ;ADGI;EACI,kCAAA;ACDR;ADOY;EA/DR,YAAA;EACA,kCERG;EFSH,0CAAA;AC2DJ;ADOY;EA1ER,WEkBQ;EFjBR,yBAAA;EACA,0CAAA;ACsEJ","file":"switch.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: calc(100 / ($count - 1));\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient(#{$css});\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: calc((($gridPx - ($numCols * $gutter)) / $numCols));\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-inline-start: $marginPercent;\n    inline-size: $spanPercent;\n}\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    } @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction: row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        } @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    } @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return calc(($colWidth * 100 / $context) * 1%);\n}\n\n@function remDist($fontSizePx) {\n    @return calc(($fontSizePx / 10) * 1rem);\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha));\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha));\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: calc(($remPx) * 1px) !important;\n        font-size: calc(($remPx / 10) * 1rem) !important;\n    } @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} {\n        @content;\n    }\n    @-moz-keyframes #{$name} {\n        @content;\n    }\n    @-webkit-keyframes #{$name} {\n        @content;\n    }\n    @keyframes #{$name} {\n        @content;\n    }\n}\n\n@mixin animation($value, $type: '') {\n    $animation: animation;\n    @if $type != '' {\n        $animation: $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s) {\n    @include keyframes(fade) {\n        0% {\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n        }\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat() {\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n\n/*\n * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.\n   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;\n     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.\n */\n@mixin writing-mode-vertical-rl {\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl\")} {\n            @content;\n        }\n    }\n}\n@mixin writing-mode-horizontal-tb {\n    & {\n        @content;\n    }\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl .writing-mode-horizontal-tb\")} {\n            @content;\n        }\n    }\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-restricted { content: \"\\e92c\"; }\n@mixin icon-blocked { content: \"\\e92d\"; }\n@mixin icon-copy { content: \"\\e92b\"; }\n@mixin icon-align-center { content: \"\\e92a\"; }\n@mixin icon-multiple-magicwand { content: \"\\e929\"; }\n@mixin icon-sd-import { content: \"\\e91f\"; }\n@mixin icon-sd-export { content: \"\\e924\"; }\n@mixin icon-browse { content: \"\\e925\"; }\n@mixin icon-minus { content: \"\\e926\"; }\n@mixin icon-plus { content: \"\\e927\"; }\n@mixin icon-sd-save { content: \"\\e928\"; }\n@mixin icon-back-button { content: \"\\e91e\"; }\n@mixin icon-japan-incorrect { content: \"\\e91b\"; }\n@mixin icon-japan-correct { content: \"\\e91c\"; }\n@mixin icon-japan-partial { content: \"\\e91d\"; }\n@mixin icon-score-partial { content: \"\\e91a\"; }\n@mixin icon-furigana { content: \"\\e919\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-duplicate { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","@import 'inc/bootstrap';\n\n@mixin switch-default {\n    color: $textColor;\n    background-color : $uiClickableDefaultBg;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-on {\n    color: white;\n    background-color: $info;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-off {\n    color: white;\n    background-color: $uiClickableActiveBg;\n    transition: background-color .4s ease-out;\n}\n\n.switch {\n\n    display: inline-block;\n    position: relative;\n\n    input {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        z-index: 100;\n        opacity: 0;\n        cursor: pointer;\n    }\n    label {\n        border: solid 1px $uiClickableActiveBg;\n        background-color : $uiClickableDefaultBg;\n\n        @include border-radius(2);\n        padding: 1px;\n        span {\n            display: inline-block;\n            position: relative;\n\n            min-width: 50px;\n\n            @include border-radius(2);\n            text-align: center;\n        }\n    }\n    input ~ label {\n        .on{\n            @include switch-default;\n        }\n        .off{\n            @include switch-active-off;\n        }\n    }\n    input:checked ~ label {\n        .on{\n            @include switch-active-on;\n        }\n        .off{\n            @include switch-default;\n        }\n    }\n    input:focus ~ label {\n        border: solid 1px $info;\n    }\n\n    // optional class which makes 'off' appearance match 'on'\n    &.monostyle {\n        input ~ label {\n            .off{\n                @include switch-active-on;\n            }\n        }\n        input:checked ~ label {\n            .off{\n                @include switch-default;\n            }\n        }\n    }\n}\n","@import 'inc/bootstrap';\n\n@mixin switch-default {\n    color: $textColor;\n    background-color : $uiClickableDefaultBg;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-on {\n    color: white;\n    background-color: $info;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-off {\n    color: white;\n    background-color: $uiClickableActiveBg;\n    transition: background-color .4s ease-out;\n}\n\n.switch {\n\n    display: inline-block;\n    position: relative;\n\n    input {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        z-index: 100;\n        opacity: 0;\n        cursor: pointer;\n    }\n    label {\n        border: solid 1px $uiClickableActiveBg;\n        background-color : $uiClickableDefaultBg;\n\n        @include border-radius(2);\n        padding: 1px;\n        span {\n            display: inline-block;\n            position: relative;\n\n            min-width: 50px;\n\n            @include border-radius(2);\n            text-align: center;\n        }\n    }\n    input ~ label {\n        .on{\n            @include switch-default;\n        }\n        .off{\n            @include switch-active-off;\n        }\n    }\n    input:checked ~ label {\n        .on{\n            @include switch-active-on;\n        }\n        .off{\n            @include switch-default;\n        }\n    }\n    input:focus ~ label {\n        border: solid 1px $info;\n    }\n\n    // optional class which makes 'off' appearance match 'on'\n    &.monostyle {\n        input ~ label {\n            .off{\n                @include switch-active-on;\n            }\n        }\n        input:checked ~ label {\n            .off{\n                @include switch-default;\n            }\n        }\n    }\n}\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorBrand: #266d9c;\n$colorBrandLight: #e4ecef;\n$colorGsDark: #121212; //color ported from nextgen TAO design system\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}
+{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/switch.scss%23sass","../scss/switch.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"AAaA;;;;;;CAAA;AAwQA,oEAAA;AAWA;;;;EAAA;AChSA,gBAAA;ACoBA;EAEI,qBAAA;EACA,kBAAA;ACNJ;ADQI;EACI,kBAAA;ECNR,WAAA;EDQQ,YAAA;EACA,YAAA;EACA,UAAA;EACA,eAAA;ACNR;ADQI;EACI,mEAAA;EACA,yBEDe;EJ6EnB,kBAAA;EEzEI,YAAA;ACLR;ADMQ;EACI,qBAAA;EACA,kBAAA;EAEA,eAAA;EFoER,kBAAA;EEjEQ,kBAAA;ACJZ;ADQQ;EA/CJ,WEkBQ;EFjBR,yBAAA;EACA,0CAAA;AC0CJ;ADMQ;EAtCJ,YAAA;EACA,mEAAA;EACA,0CAAA;ACmCJ;ADMQ;EAjDJ,YAAA;EACA,kCAAA;EACA,0CAAA;AC8CJ;ADIQ;EA1DJ,WEkBQ;EFjBR,yBAAA;EACA,0CAAA;ACyDJ;ADGI;EACI,kCAAA;ACDR;ADOY;EA/DR,YAAA;EACA,kCERG;EFSH,0CAAA;AC2DJ;ADOY;EA1ER,WEkBQ;EFjBR,yBAAA;EACA,0CAAA;ACsEJ","file":"switch.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix: '') {\n    @each $icon in $iconList {\n        #{$prefix}#{$icon} {\n            background-position: $x * 1px $y * 1px;\n        }\n        @if $direction == 'x' {\n            $x: $x - 16;\n        } @else {\n            $y: $y - 16;\n        }\n    }\n}\n\n/*\nUsage:\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\n   if 3 colors used then the position of each will be 33,33%\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\n   first param - color, second - position. Also you can use px or other valid units for set position.\n*/\n@mixin linear-gradient($colorList, $direction: 'to right') {\n    $percentage: 0;\n    $units: '%';\n    $count: length($colorList);\n    $increment: calc(100 / ($count - 1));\n    $css: #{$direction + ', '};\n    $sep: ', ';\n    @each $colorItem in $colorList {\n        $color: $colorItem;\n        @if (length($colorItem) > 1) {\n            $color: nth($colorItem, 1);\n            $percentage: nth($colorItem, 2);\n            $units: '';\n        }\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\n            $sep: '';\n        }\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\n        $percentage: $percentage + $increment;\n    }\n    background: linear-gradient(#{$css});\n}\n\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\n    $gridPx: 840;\n    $rawSpanPx: calc((($gridPx - ($numCols * $gutter)) / $numCols));\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\n    $spanPercent: widthPerc($spanPx, $gridPx);\n    $marginPercent: widthPerc($gutter, $gridPx);\n    margin-inline-start: $marginPercent;\n    inline-size: $spanPercent;\n}\n\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\n    @if $whatToPrefix == 'property' {\n        @each $prefix in $prefixes {\n            #{$prefix + $property}: #{$value};\n        }\n    } @else if $whatToPrefix == 'value' {\n        @each $prefix in $prefixes {\n            #{$property}: #{$prefix + $value};\n        }\n    }\n}\n@mixin flex-container($wrapBehavior: nowrap, $direction: row) {\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\n\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\n\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\n}\n\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\n    flex-item-align: stretch;\n    -ms-flex-item-align: stretch;\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\n\n    // if both, min width and width are set, width will win this conflict\n    @if ($width == auto) {\n        @if ($minWidth != 1) {\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\n        } @else {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\n            // for a discussion auto vs. main-size\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n        }\n    } @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, 0.2)) {\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\n}\n\n@mixin simple-border($color: #ddd) {\n    border: 1px solid $color;\n    border-radius: 2px;\n    -webkit-border-radius: 2px;\n}\n\n@mixin border-radius($radius: 2) {\n    -moz-border-radius: $radius * 1px;\n    -webkit-border-radius: $radius * 1px;\n    border-radius: $radius * 1px;\n}\n\n@mixin border-radius-top($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-left($radius: 2) {\n    -webkit-border-top-left-radius: $radius * 1px;\n    -moz-border-radius-topleft: $radius * 1px;\n    border-top-left-radius: $radius * 1px;\n}\n\n@mixin border-radius-top-right($radius: 2) {\n    -webkit-border-top-right-radius: $radius * 1px;\n    -moz-border-radius-topright: $radius * 1px;\n    border-top-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-right($radius: 2) {\n    -webkit-border-bottom-right-radius: $radius * 1px;\n    -moz-border-radius-bottomright: $radius * 1px;\n    border-bottom-right-radius: $radius * 1px;\n}\n\n@mixin border-radius-bottom-left($radius: 2) {\n    -webkit-border-bottom-left-radius: $radius * 1px;\n    -moz-border-radius-bottomleft: $radius * 1px;\n    border-bottom-left-radius: $radius * 1px;\n}\n\n@mixin border-box() {\n    -moz-box-sizing: border-box;\n    -webkit-box-sizing: border-box;\n    box-sizing: border-box;\n}\n\n@function whiten($color, $white: 0.3) {\n    @return mix(#fff, $color, ($white * 100) * 1%);\n}\n\n@function blacken($color, $black: 0.3) {\n    @return mix(#000, $color, ($black * 100) * 1%);\n}\n\n@function widthPerc($colWidth, $context) {\n    @return calc(($colWidth * 100 / $context) * 1%);\n}\n\n@function remDist($fontSizePx) {\n    @return calc(($fontSizePx / 10) * 1rem);\n}\n\n@function black($alpha: 1) {\n    @return (rgba(0, 0, 0, $alpha));\n}\n\n@function white($alpha: 1) {\n    @return (rgba(255, 255, 255, $alpha));\n}\n\n@mixin font-size($remPx, $important: false) {\n    @if $important == true {\n        font-size: calc(($remPx) * 1px) !important;\n        font-size: calc(($remPx / 10) * 1rem) !important;\n    } @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} {\n        @content;\n    }\n    @-moz-keyframes #{$name} {\n        @content;\n    }\n    @-webkit-keyframes #{$name} {\n        @content;\n    }\n    @keyframes #{$name} {\n        @content;\n    }\n}\n\n@mixin animation($value, $type: '') {\n    $animation: animation;\n    @if $type != '' {\n        $animation: $animation + '-' + $type;\n    }\n    @include vendor-prefix($animation, $value, property);\n}\n\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\n///\n/// @param {property} [$type = all] the CSS property to apply the transition to\n/// @param {time} [$duration = .5s] the transition property\n/// @param {timing-function} [$effect = ease-out] the transition property\n@mixin transition($type: all, $duration: 0.5s, $effect: ease-out, $delay: 0s) {\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\n}\n\n@mixin fade($duration: 1s) {\n    @include keyframes(fade) {\n        0% {\n            opacity: 0;\n        }\n        50% {\n            opacity: 1;\n        }\n        100% {\n            opacity: 0;\n        }\n    }\n\n    @include vendor-prefix(animation, fade 1s forwards, property);\n}\n\n@mixin repeat() {\n    @include animation(infinite, iteration-count);\n}\n\n@mixin largeHeading() {\n    @include font-size(20);\n    font-family: $headingFont;\n    font-style: normal;\n}\n\n@mixin disableSelect() {\n    @include vendor-prefix(user-select, none, property);\n}\n\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\n@mixin visuallyHidden() {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    overflow: hidden;\n    clip: rect(1px, 1px, 1px, 1px);\n    margin: 0;\n    padding: 0;\n}\n\n/*\n * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.\n   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;\n     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.\n */\n@mixin writing-mode-vertical-rl {\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl\")} {\n            @content;\n        }\n    }\n}\n@mixin writing-mode-horizontal-tb {\n    & {\n        @content;\n    }\n    @at-root {\n        #{selector-replace(&, $mainContainer, $mainContainer + \" .writing-mode-vertical-rl .writing-mode-horizontal-tb\")} {\n            @content;\n        }\n    }\n}\n","/* Do not edit */@mixin tao-icon-setup {\n  /* use !important to prevent issues with browser extensions that change fonts */\n  font-family: 'tao' !important;\n  speak: never;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n\n  /* Better Font Rendering =========== */\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n@mixin icon-restricted { content: \"\\e92c\"; }\n@mixin icon-blocked { content: \"\\e92d\"; }\n@mixin icon-copy { content: \"\\e92b\"; }\n@mixin icon-align-center { content: \"\\e92a\"; }\n@mixin icon-multiple-magicwand { content: \"\\e929\"; }\n@mixin icon-sd-import { content: \"\\e91f\"; }\n@mixin icon-sd-export { content: \"\\e924\"; }\n@mixin icon-browse { content: \"\\e925\"; }\n@mixin icon-minus { content: \"\\e926\"; }\n@mixin icon-plus { content: \"\\e927\"; }\n@mixin icon-sd-save { content: \"\\e928\"; }\n@mixin icon-back-button { content: \"\\e91e\"; }\n@mixin icon-japan-incorrect { content: \"\\e91b\"; }\n@mixin icon-japan-correct { content: \"\\e91c\"; }\n@mixin icon-japan-partial { content: \"\\e91d\"; }\n@mixin icon-score-partial { content: \"\\e91a\"; }\n@mixin icon-furigana { content: \"\\e919\"; }\n@mixin icon-add-subsection { content: \"\\e918\"; }\n@mixin icon-info-bare { content: \"\\e923\"; }\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\n@mixin icon-bookmark { content: \"\\e921\"; }\n@mixin icon-indicator { content: \"\\e920\"; }\n@mixin icon-wrap-inline { content: \"\\e915\"; }\n@mixin icon-wrap-left { content: \"\\e916\"; }\n@mixin icon-wrap-right { content: \"\\e917\"; }\n@mixin icon-offline { content: \"\\e913\"; }\n@mixin icon-online { content: \"\\e914\"; }\n@mixin icon-tab { content: \"\\e90d\"; }\n@mixin icon-untab { content: \"\\e90e\"; }\n@mixin icon-multi-select { content: \"\\e90b\"; }\n@mixin icon-clipboard { content: \"\\e90a\"; }\n@mixin icon-filebox { content: \"\\e909\"; }\n@mixin icon-click-to-speak { content: \"\\e907\"; }\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\n@mixin icon-microphone { content: \"\\f130\"; }\n@mixin icon-microphone-off { content: \"\\f131\"; }\n@mixin icon-disconnect { content: \"\\e905\"; }\n@mixin icon-connect { content: \"\\e906\"; }\n@mixin icon-eliminate { content: \"\\e904\"; }\n@mixin icon-wheelchair { content: \"\\e903\"; }\n@mixin icon-text-marker { content: \"\\e902\"; }\n@mixin icon-unshield { content: \"\\e32a\"; }\n@mixin icon-shield { content: \"\\e8e8\"; }\n@mixin icon-tree { content: \"\\e6b4\"; }\n@mixin icon-home { content: \"\\e6b3\"; }\n@mixin icon-shared-file { content: \"\\e6b2\"; }\n@mixin icon-end-attempt { content: \"\\e603\"; }\n@mixin icon-icon { content: \"\\f1c5\"; }\n@mixin icon-radio-bg { content: \"\\e600\"; }\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\n@mixin icon-tag { content: \"\\e602\"; }\n@mixin icon-style { content: \"\\e604\"; }\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\n@mixin icon-property-advanced { content: \"\\e606\"; }\n@mixin icon-property-add { content: \"\\e607\"; }\n@mixin icon-repository-add { content: \"\\e608\"; }\n@mixin icon-repository-remove { content: \"\\e609\"; }\n@mixin icon-repository { content: \"\\e60a\"; }\n@mixin icon-result-server { content: \"\\e60b\"; }\n@mixin icon-folder { content: \"\\e60c\"; }\n@mixin icon-folder-open { content: \"\\e60d\"; }\n@mixin icon-left { content: \"\\e60e\"; }\n@mixin icon-right { content: \"\\e60f\"; }\n@mixin icon-up { content: \"\\e610\"; }\n@mixin icon-down { content: \"\\e611\"; }\n@mixin icon-undo { content: \"\\e612\"; }\n@mixin icon-redo { content: \"\\e613\"; }\n@mixin icon-screen { content: \"\\e614\"; }\n@mixin icon-laptop { content: \"\\e615\"; }\n@mixin icon-tablet { content: \"\\e616\"; }\n@mixin icon-phone { content: \"\\e617\"; }\n@mixin icon-move { content: \"\\e618\"; }\n@mixin icon-bin { content: \"\\e619\"; }\n@mixin icon-shuffle { content: \"\\e61a\"; }\n@mixin icon-print { content: \"\\e61b\"; }\n@mixin icon-tools { content: \"\\e61c\"; }\n@mixin icon-settings { content: \"\\e61d\"; }\n@mixin icon-video { content: \"\\e61e\"; }\n@mixin icon-find { content: \"\\e61f\"; }\n@mixin icon-image { content: \"\\e620\"; }\n@mixin icon-edit { content: \"\\e621\"; }\n@mixin icon-document { content: \"\\e622\"; }\n@mixin icon-resize-grid { content: \"\\e623\"; }\n@mixin icon-resize { content: \"\\e624\"; }\n@mixin icon-help { content: \"\\e625\"; }\n@mixin icon-mobile-menu { content: \"\\e626\"; }\n@mixin icon-fix { content: \"\\e627\"; }\n@mixin icon-unlock { content: \"\\e628\"; }\n@mixin icon-lock { content: \"\\e629\"; }\n@mixin icon-ul { content: \"\\e62a\"; }\n@mixin icon-ol { content: \"\\e62b\"; }\n@mixin icon-email { content: \"\\e62c\"; }\n@mixin icon-download { content: \"\\e62d\"; }\n@mixin icon-logout { content: \"\\e62e\"; }\n@mixin icon-login { content: \"\\e62f\"; }\n@mixin icon-spinner { content: \"\\e630\"; }\n@mixin icon-preview { content: \"\\e631\"; }\n@mixin icon-external { content: \"\\e632\"; }\n@mixin icon-time { content: \"\\e633\"; }\n@mixin icon-save { content: \"\\e634\"; }\n@mixin icon-warning { content: \"\\e635\"; }\n@mixin icon-add { content: \"\\e636\"; }\n@mixin icon-error { content: \"\\e900\"; }\n@mixin icon-close { content: \"\\e637\"; }\n@mixin icon-success { content: \"\\e638\"; }\n@mixin icon-remove { content: \"\\e639\"; }\n@mixin icon-info { content: \"\\e63a\"; }\n@mixin icon-danger { content: \"\\e63b\"; }\n@mixin icon-users { content: \"\\e63c\"; }\n@mixin icon-user { content: \"\\e63d\"; }\n@mixin icon-test-taker { content: \"\\e63e\"; }\n@mixin icon-test-takers { content: \"\\e63f\"; }\n@mixin icon-item { content: \"\\e640\"; }\n@mixin icon-test { content: \"\\e641\"; }\n@mixin icon-delivery { content: \"\\e642\"; }\n@mixin icon-eye-slash { content: \"\\e643\"; }\n@mixin icon-result { content: \"\\e644\"; }\n@mixin icon-delivery-small { content: \"\\e645\"; }\n@mixin icon-upload { content: \"\\e646\"; }\n@mixin icon-result-small { content: \"\\e647\"; }\n@mixin icon-mobile-preview { content: \"\\e648\"; }\n@mixin icon-extension { content: \"\\e649\"; }\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\n@mixin icon-table { content: \"\\e64d\"; }\n@mixin icon-anchor { content: \"\\e64e\"; }\n@mixin icon-unlink { content: \"\\e64f\"; }\n@mixin icon-link { content: \"\\e650\"; }\n@mixin icon-right-left { content: \"\\e651\"; }\n@mixin icon-left-right { content: \"\\e652\"; }\n@mixin icon-special-character { content: \"\\e653\"; }\n@mixin icon-source { content: \"\\e654\"; }\n@mixin icon-new-page { content: \"\\e655\"; }\n@mixin icon-templates { content: \"\\e656\"; }\n@mixin icon-cut { content: \"\\e657\"; }\n@mixin icon-replace { content: \"\\e658\"; }\n@mixin icon-duplicate { content: \"\\e659\"; }\n@mixin icon-paste { content: \"\\e65a\"; }\n@mixin icon-select-all { content: \"\\e65b\"; }\n@mixin icon-paste-text { content: \"\\e65c\"; }\n@mixin icon-paste-word { content: \"\\e65d\"; }\n@mixin icon-bold { content: \"\\e65e\"; }\n@mixin icon-italic { content: \"\\e65f\"; }\n@mixin icon-underline { content: \"\\e660\"; }\n@mixin icon-subscript { content: \"\\e661\"; }\n@mixin icon-superscript { content: \"\\e662\"; }\n@mixin icon-strike-through { content: \"\\e663\"; }\n@mixin icon-decrease-indent { content: \"\\e664\"; }\n@mixin icon-increase-indent { content: \"\\e665\"; }\n@mixin icon-block-quote { content: \"\\e666\"; }\n@mixin icon-div-container { content: \"\\e667\"; }\n@mixin icon-align-left { content: \"\\e668\"; }\n@mixin icon-center { content: \"\\e669\"; }\n@mixin icon-align-right { content: \"\\e66a\"; }\n@mixin icon-justify { content: \"\\e66b\"; }\n@mixin icon-choice { content: \"\\e66c\"; }\n@mixin icon-inline-choice { content: \"\\e66d\"; }\n@mixin icon-match { content: \"\\e66e\"; }\n@mixin icon-associate { content: \"\\e66f\"; }\n@mixin icon-media { content: \"\\e670\"; }\n@mixin icon-graphic-order { content: \"\\e671\"; }\n@mixin icon-hotspot { content: \"\\e672\"; }\n@mixin icon-graphic-gap { content: \"\\e673\"; }\n@mixin icon-graphic-associate { content: \"\\e674\"; }\n@mixin icon-select-point { content: \"\\e675\"; }\n@mixin icon-pin { content: \"\\e676\"; }\n@mixin icon-import { content: \"\\e677\"; }\n@mixin icon-export { content: \"\\e678\"; }\n@mixin icon-move-item { content: \"\\e679\"; }\n@mixin icon-meta-data { content: \"\\e67a\"; }\n@mixin icon-slider { content: \"\\e67b\"; }\n@mixin icon-summary-report { content: \"\\e67c\"; }\n@mixin icon-text-entry { content: \"\\e67d\"; }\n@mixin icon-extended-text { content: \"\\e67e\"; }\n@mixin icon-eraser { content: \"\\e67f\"; }\n@mixin icon-row { content: \"\\e680\"; }\n@mixin icon-column { content: \"\\e681\"; }\n@mixin icon-text-color { content: \"\\e682\"; }\n@mixin icon-background-color { content: \"\\e683\"; }\n@mixin icon-spell-check { content: \"\\e684\"; }\n@mixin icon-polygon { content: \"\\e685\"; }\n@mixin icon-rectangle { content: \"\\e686\"; }\n@mixin icon-gap-match { content: \"\\e687\"; }\n@mixin icon-order { content: \"\\e688\"; }\n@mixin icon-hottext { content: \"\\e689\"; }\n@mixin icon-free-form { content: \"\\e68a\"; }\n@mixin icon-step-backward { content: \"\\e68b\"; }\n@mixin icon-fast-backward { content: \"\\e68c\"; }\n@mixin icon-backward { content: \"\\e68d\"; }\n@mixin icon-play { content: \"\\e68e\"; }\n@mixin icon-pause { content: \"\\e68f\"; }\n@mixin icon-stop { content: \"\\e690\"; }\n@mixin icon-forward { content: \"\\e691\"; }\n@mixin icon-fast-forward { content: \"\\e692\"; }\n@mixin icon-step-forward { content: \"\\e693\"; }\n@mixin icon-ellipsis { content: \"\\e694\"; }\n@mixin icon-circle { content: \"\\e695\"; }\n@mixin icon-target { content: \"\\e696\"; }\n@mixin icon-guide-arrow { content: \"\\e697\"; }\n@mixin icon-range-slider-right { content: \"\\e698\"; }\n@mixin icon-range-slider-left { content: \"\\e699\"; }\n@mixin icon-radio-checked { content: \"\\e69a\"; }\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\n@mixin icon-checkbox { content: \"\\e69b\"; }\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\n@mixin icon-result-nok { content: \"\\e69e\"; }\n@mixin icon-result-ok { content: \"\\e69f\"; }\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\n@mixin icon-filter { content: \"\\e6a1\"; }\n@mixin icon-translate { content: \"\\e6a2\"; }\n@mixin icon-eject { content: \"\\e6a3\"; }\n@mixin icon-continue { content: \"\\e6a4\"; }\n@mixin icon-radio { content: \"\\e6a5\"; }\n@mixin icon-sphere { content: \"\\e6a6\"; }\n@mixin icon-reset { content: \"\\e6a7\"; }\n@mixin icon-smaller { content: \"\\e6a8\"; }\n@mixin icon-larger { content: \"\\e6a9\"; }\n@mixin icon-clock { content: \"\\e6aa\"; }\n@mixin icon-font { content: \"\\e6ab\"; }\n@mixin icon-maths { content: \"\\e6ac\"; }\n@mixin icon-grip { content: \"\\e6ad\"; }\n@mixin icon-rubric { content: \"\\e6ae\"; }\n@mixin icon-audio { content: \"\\e6af\"; }\n@mixin icon-grip-h { content: \"\\e6b0\"; }\n@mixin icon-magicwand { content: \"\\e6b1\"; }\n@mixin icon-loop { content: \"\\ea2e\"; }\n@mixin icon-calendar { content: \"\\e953\"; }\n@mixin icon-reload { content: \"\\e984\"; }\n@mixin icon-speed { content: \"\\e9a6\"; }\n@mixin icon-volume { content: \"\\ea27\"; }\n@mixin icon-contrast { content: \"\\e9d5\"; }\n@mixin icon-headphones { content: \"\\e910\"; }\n@mixin icon-compress { content: \"\\f066\"; }\n@mixin icon-map-o { content: \"\\f278\"; }\n@mixin icon-variable { content: \"\\e908\"; }\n@mixin icon-tooltip { content: \"\\e90c\"; }\n@mixin icon-globe { content: \"\\e9c9\"; }\n@mixin icon-highlighter { content: \"\\e90f\"; }\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\n@mixin icon-play-from-here { content: \"\\e912\"; }\n","@import 'inc/bootstrap';\n\n@mixin switch-default {\n    color: $textColor;\n    background-color : $uiClickableDefaultBg;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-on {\n    color: white;\n    background-color: $info;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-off {\n    color: white;\n    background-color: $uiClickableActiveBg;\n    transition: background-color .4s ease-out;\n}\n\n.switch {\n\n    display: inline-block;\n    position: relative;\n\n    input {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        z-index: 100;\n        opacity: 0;\n        cursor: pointer;\n    }\n    label {\n        border: solid 1px $uiClickableActiveBg;\n        background-color : $uiClickableDefaultBg;\n\n        @include border-radius(2);\n        padding: 1px;\n        span {\n            display: inline-block;\n            position: relative;\n\n            min-width: 50px;\n\n            @include border-radius(2);\n            text-align: center;\n        }\n    }\n    input ~ label {\n        .on{\n            @include switch-default;\n        }\n        .off{\n            @include switch-active-off;\n        }\n    }\n    input:checked ~ label {\n        .on{\n            @include switch-active-on;\n        }\n        .off{\n            @include switch-default;\n        }\n    }\n    input:focus ~ label {\n        border: solid 1px $info;\n    }\n\n    // optional class which makes 'off' appearance match 'on'\n    &.monostyle {\n        input ~ label {\n            .off{\n                @include switch-active-on;\n            }\n        }\n        input:checked ~ label {\n            .off{\n                @include switch-default;\n            }\n        }\n    }\n}\n","@import 'inc/bootstrap';\n\n@mixin switch-default {\n    color: $textColor;\n    background-color : $uiClickableDefaultBg;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-on {\n    color: white;\n    background-color: $info;\n    transition: background-color .4s ease-out;\n}\n\n@mixin switch-active-off {\n    color: white;\n    background-color: $uiClickableActiveBg;\n    transition: background-color .4s ease-out;\n}\n\n.switch {\n\n    display: inline-block;\n    position: relative;\n\n    input {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        z-index: 100;\n        opacity: 0;\n        cursor: pointer;\n    }\n    label {\n        border: solid 1px $uiClickableActiveBg;\n        background-color : $uiClickableDefaultBg;\n\n        @include border-radius(2);\n        padding: 1px;\n        span {\n            display: inline-block;\n            position: relative;\n\n            min-width: 50px;\n\n            @include border-radius(2);\n            text-align: center;\n        }\n    }\n    input ~ label {\n        .on{\n            @include switch-default;\n        }\n        .off{\n            @include switch-active-off;\n        }\n    }\n    input:checked ~ label {\n        .on{\n            @include switch-active-on;\n        }\n        .off{\n            @include switch-default;\n        }\n    }\n    input:focus ~ label {\n        border: solid 1px $info;\n    }\n\n    // optional class which makes 'off' appearance match 'on'\n    &.monostyle {\n        input ~ label {\n            .off{\n                @include switch-active-on;\n            }\n        }\n        input:checked ~ label {\n            .off{\n                @include switch-default;\n            }\n        }\n    }\n}\n","// buttons and alerts\n$success: rgb(14, 145, 75);\n$info: rgb(14, 93, 145);\n$warning: rgb(216, 174, 91);\n$danger: rgb(201, 96, 67);\n$error: rgb(186, 18, 43);\n$activeInteraction: rgb(195, 90, 19);\n\n// corporate identity\n$logoRed: rgb(186, 18, 43);\n$grey: rgb(173, 161, 148);\n$darkBlueGrey: rgb(164, 187, 197);\n$mediumBlueGrey: rgb(193, 212, 220);\n$lightBlueGrey: rgb(228, 236, 239);\n$brownRedGrey: rgb(154, 137, 123);\n$darkBrown: rgb(111, 99, 89);\n$websiteBorder: rgb(141, 148, 158);\n\n// ui elements, these should only variations of the above\n// naming convention: jQueryUi theme roller -> camelCase\n\n$textColor: #222;\n$textHighlight: white;\n$textSecondary: #737373;\n$shadowColor: rgba(0, 0, 0, 0.25);\n\n$modalBorderColor: #dddfe2;\n$searchInp: #dddfe2;\n\n$uiGeneralContentBg: white();\n$uiGeneralContentBorder: #ddd;\n\n$uiHeaderBg: #d4d5d7;\n\n$uiClickableDefaultBg: #f3f1ef;\n$uiClickableHoverBg: whiten($info, 0.2);\n//$uiClickableActiveBg: $uiHeaderBg;\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\n//$uiClickableActiveBg: #aaa;\n\n$uiSelectableSelectedBg: whiten($info, 0.2);\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\n$uiSelectableHoverBg: whiten($info, 0.9);\n\n$uiOverlay: $lightBlueGrey;\n\n// new layout. Implemented now only for review panel\n$uiReviewPanelBg: #f2f2f2;\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\n\n// sidebars etc.\n$canvas: mix(#fff, $grey, 85%);\n\n// colors taken from feedback.scss\n$successBgColor: whiten($success, 0.8);\n$successBorderColor: whiten($success, 0.1);\n\n$infoBgColor: whiten($info, 0.8);\n$infoBorderColor: whiten($info, 0.1);\n\n$warningBgColor: whiten($warning, 0.8);\n$warningBorderColor: whiten($warning, 0.1);\n\n$dangerBgColor: whiten($danger, 0.8);\n$dangerBorderColor: whiten($danger, 0.1);\n\n$errorBgColor: whiten($error, 0.8);\n$errorBorderColor: whiten($error, 0.1);\n\n$darkBar: rgb(51, 51, 51);\n$darkBarTxt: rgb(230, 230, 230);\n$darkBarIcon: rgb(220, 220, 220);\n\n$actionLinkColor: #276d9b;\n$actionLinkHoverColor: #4f83a7;\n\n$colorBrand: #266d9c;\n$colorBrandLight: #e4ecef;\n$colorGsDark: #121212; //color ported from nextgen TAO design system\n\n$colorWheel-01: #c3ba13;\n$colorWheel-02: #84a610;\n$colorWheel-03: #2b8e0e;\n$colorWheel-04: #0f9787;\n$colorWheel-05: #0e5d91;\n$colorWheel-06: #0d2689;\n$colorWheel-07: #400d83;\n$colorWheel-08: #960e7d;\n$colorWheel-09: #ba122b;\n$colorWheel-10: #c34713;\n$colorWheel-11: #c36f13;\n$colorWheel-12: #c39413;\n"]}

package/src/tabs/css/tabs.css

@@ -36,7 +36,7 @@ Usage:
   text-shadow: none;
 }
 .tab-group .tab button:hover {
-  background-color: #e7eff4;
+  background-color: rgb(90.5490196078%, 93.6470588235%, 95.6862745098%);
 }
 .tab-group .tab button:focus {
   outline: 1px dotted rgb(14, 93, 145);
@@ -64,6 +64,6 @@ Usage:
   color: white;
 }
 .tab-group .tab.active button:hover {
-  background-color: #3e7da7;
+  background-color: rgb(24.3921568627%, 49.1764705882%, 65.4901960784%);
 }
 /*# sourceMappingURL=tabs.css.map */