@oat-sa/tao-core-ui 3.16.0 → 3.16.2

package/src/maths/calculator/css/calculator.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../scss/calculator.scss%23sass","../../../../scss/inc/_functions.scss","../../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/calculator.scss","../../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"calculator.css","sourcesContent":["/* Style for the calculator component */\n@import 'inc/bootstrap';\n\n/* font size mixin specific to calculator to use em instead of rem unit */\n@function calc-em-size($em) {\n    @return ($em) * 1em;\n}\n@mixin calc-font-size($em) {\n    font-size: calc-em-size($em) !important;\n}\n\n.calculator {\n    $calculatorPanelBg: $uiClickableDefaultBg;\n    $calculatorPanelTxt: $textColor;\n    $calculatorKeyboardBg: $uiClickableDefaultBg;\n    $calculatorKeyboardHoverBg: $uiClickableActiveBg;\n    $calculatorKeyboardSpecialBg: $uiClickableHoverBg;\n    $calculatorKeyboardSpecialTxt: $textHighlight;\n    $calculatorKeyboardCommandTxt: $info;\n    $calculatorKeyboardSwitchBg: $uiClickableDefaultBg;\n    $calculatorKeyboardSwitchTxt: $textColor;\n    $calculatorKeyboardSwitchSelectedBg: $uiClickableHoverBg;\n    $calculatorKeyboardSwitchSelectedTxt: $textHighlight;\n    $calculatorKeyboardSwitchBorder: whiten($textColor, 0.5);\n    $calculatorKeyboardTxt: $textColor;\n    $calculatorScreenBg: $uiGeneralContentBg;\n    $calculatorScreenTxt: $textColor;\n    $calculatorScreenBorder: $info;\n    $calculatorScreenSpecialTxt: $uiClickableHoverBg;\n    $calculatorScreenSpecialBg: whiten($uiClickableHoverBg, 0.9);\n    $calculatorHistoryBorder: $uiGeneralContentBorder;\n    $calculatorHistoryTxt: whiten($textColor, 0.2);\n\n    $calculatorFontSizeBtnPrimary: 1.7;\n    $calculatorFontSizeBtnSecondary: 1.3;\n    $calculatorFontSizeBtnSwitch: 1;\n    $calculatorFontSizeBtnSvg: 1;\n    $calculatorFontSizeExpression: 1.3;\n    $calculatorFontSizeHistory: 1;\n    $calculatorLineHeightExpression: calc-em-size($calculatorFontSizeExpression + 0.3);\n    $calculatorLineHeightHistory: calc-em-size($calculatorFontSizeHistory + 0.3);\n    $calculatorTermSpace: calc-em-size(0.2);\n    $calculatorButtonSize: calc-em-size(3.2);\n    $calculatorSwitchSize: calc-em-size(3.2);\n    $calculatorButtonPadding: 2px;\n    $calculatorSwitchPadding: 4px;\n    $calculatorScreenPadding: 8px;\n    $calculatorBaseFontSize: 12px;\n\n    position: relative;\n    font-family: monospace, sans-serif;\n    font-size: $calculatorBaseFontSize;\n    width: 100%;\n    height: 100%;\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n\n    sup,\n    sub {\n        font-size: 0.75em;\n    }\n    sup {\n        top: -0.5em;\n    }\n    sub {\n        bottom: -0.5em;\n    }\n\n    [data-type='exponent'] {\n        vertical-align: super;\n        font-size: 0.75em;\n    }\n\n    [data-type='variable'] {\n        font-weight: bold;\n    }\n\n    [data-type='function']:not([data-value*='rt']) {\n        padding-right: 0.3em;\n    }\n\n    .screen,\n    .input {\n        position: relative;\n        @include vendor-prefix(flex, 0 0 auto, property, (-ms-, -webkit-, ''));\n    }\n\n    .focus {\n        outline: 2px solid $calculatorScreenBorder;\n    }\n\n    .keyboard {\n        padding: 0 20px 20px;\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n    }\n\n    .calculator-keyboard {\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n        @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n        background: $calculatorKeyboardBg;\n        color: $calculatorKeyboardTxt;\n        width: 100%;\n        height: auto;\n        padding-top: $calculatorScreenPadding;\n\n        .row {\n            position: relative;\n            @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex-direction, row, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: 100%;\n            height: 100%;\n        }\n\n        .spacer {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n        }\n\n        span {\n            position: relative;\n            display: inline-block;\n            z-index: 1;\n            @include calc-font-size($calculatorFontSizeBtnSecondary);\n        }\n\n        button {\n            position: relative;\n            background-color: $calculatorKeyboardBg;\n            color: $calculatorKeyboardTxt !important;\n            display: inline-block;\n            border-radius: 0;\n            border: none;\n            padding: 0;\n            text-align: center;\n            text-shadow: none;\n            cursor: pointer;\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n\n            @include calc-font-size(1);\n\n            &:not(.switch) {\n                &:before {\n                    content: ' ';\n                    border-radius: 50%;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    left: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    width: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                    height: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                }\n            }\n            &:hover {\n                &:before {\n                    background: $calculatorKeyboardHoverBg;\n                }\n            }\n\n            &.disabled {\n                visibility: hidden;\n            }\n            &.switch {\n                span {\n                    color: $calculatorKeyboardSwitchTxt !important;\n                    border-color: $calculatorKeyboardSwitchBorder !important;\n                    border-top: 1px solid;\n                    border-bottom: 1px solid;\n                    height: auto;\n                    width: 100%;\n                    padding: $calculatorSwitchPadding 0.5em;\n                    @include calc-font-size($calculatorFontSizeBtnSwitch);\n                }\n\n                &.first {\n                    span {\n                        border-left: 1px solid;\n                        border-top-left-radius: 2px;\n                        border-bottom-left-radius: 2px;\n                    }\n                }\n                &.last {\n                    span {\n                        border-right: 1px solid;\n                        border-top-right-radius: 2px;\n                        border-bottom-right-radius: 2px;\n                    }\n                }\n\n                &:before {\n                    content: ' ';\n                    border-radius: 2px;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    bottom: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    left: 3px;\n                    right: 3px;\n                }\n            }\n            &.operand {\n                span {\n                    font-weight: bold;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n            &.command {\n                span {\n                    color: $calculatorKeyboardCommandTxt !important;\n                }\n            }\n            &.execute {\n                &:before {\n                    background: $calculatorKeyboardSpecialBg;\n                }\n\n                span {\n                    font-weight: bold;\n                    color: $calculatorKeyboardSpecialTxt !important;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n\n            svg {\n                display: inline-block;\n                width: calc-em-size($calculatorFontSizeBtnSvg);\n                height: calc-em-size($calculatorFontSizeBtnSvg);\n                stroke-width: 0;\n                stroke: currentColor;\n                fill: currentColor;\n\n                &.backspace-outline {\n                    width: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                    height: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                }\n            }\n        }\n    }\n\n    &.degree {\n        .calculator-keyboard {\n            button.switch[data-command='degree'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n    &.radian {\n        .calculator-keyboard {\n            button.switch[data-command='radian'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n\n    .simple-screen {\n        position: relative;\n        width: 100%;\n        @include calc-font-size($calculatorFontSizeExpression);\n        color: $calculatorScreenTxt;\n        font-family: monospace;\n\n        .screen-panel {\n            position: relative;\n            width: 100%;\n            overflow: auto;\n            word-break: break-all;\n            text-align: left;\n            padding: $calculatorScreenPadding 8px;\n        }\n\n        .history {\n            @include calc-font-size($calculatorFontSizeHistory);\n            border: 1px solid $calculatorHistoryBorder;\n            color: $calculatorHistoryTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightHistory * 3});\n            line-height: $calculatorLineHeightHistory;\n\n            .history-line {\n                .history-expression {\n                    &,\n                    .term {\n                        font-weight: lighter;\n                    }\n                    text-align: left;\n                }\n                .history-result {\n                    &:before {\n                        content: '=';\n                        display: inline-block;\n                        font-weight: lighter;\n                        padding-right: $calculatorTermSpace;\n                    }\n                    text-align: right;\n                    font-weight: bolder;\n                }\n            }\n        }\n        .expression {\n            @include calc-font-size($calculatorFontSizeExpression);\n            background: $calculatorScreenBg;\n            color: $calculatorScreenTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightExpression * 2});\n            line-height: $calculatorLineHeightExpression;\n        }\n        .term {\n            padding: 0;\n\n            &.term-operator:not([data-token='POW']):not([data-token='FAC']):not([data-token='NEG']) {\n                padding: 0 $calculatorTermSpace;\n            }\n            &.term-operator[data-token='FAC'],\n            &.term-operator[data-token='NEG'] {\n                margin-left: calc(-1 * $calculatorTermSpace / 2);\n                margin-right: calc(-1 * $calculatorTermSpace / 2);\n            }\n            &.term-operator[data-token='POS'] {\n                display: none;\n            }\n            &.term-function:not([data-token='SQRT']):not([data-token='CBRT']) {\n                padding-right: $calculatorTermSpace;\n            }\n            &.term-operand {\n                font-weight: bold;\n            }\n            &.term-modificator {\n                font-weight: lighter;\n            }\n            &.term-constant {\n                font-style: italic;\n                font-weight: bold;\n            }\n            &.term-variable {\n                font-weight: bold;\n                color: $calculatorScreenSpecialTxt;\n            }\n            &.term-variable[data-token='VAR_ANS'] {\n                background: $calculatorScreenSpecialBg;\n                padding: 0;\n                margin: 0 #{$calculatorTermSpace * 2};\n                position: relative;\n                &::before,\n                &::after {\n                    background: $calculatorScreenSpecialBg;\n                    content: '';\n                    border-radius: 50%;\n                    border: 2px none;\n                    position: absolute;\n                    z-index: 0;\n                    top: 0;\n                    bottom: 0;\n                    width: #{$calculatorTermSpace * 2};\n                }\n                &::before {\n                    border-left-style: solid;\n                    border-left-color: $calculatorScreenSpecialTxt;\n                    left: #{-$calculatorTermSpace};\n                }\n                &::after {\n                    border-right-style: solid;\n                    border-right-color: $calculatorScreenSpecialTxt;\n                    right: #{-$calculatorTermSpace};\n                }\n                * {\n                    position: relative;\n                    z-index: 1;\n                }\n            }\n            &.term-unknown {\n                color: $warning;\n                text-decoration: underline wavy $error;\n            }\n            &.term-elide {\n                display: none;\n            }\n            &.term-error {\n                color: $error;\n            }\n            &.term-syntaxError {\n                color: $error;\n                text-decoration: underline wavy $error;\n            }\n        }\n    }\n\n    &.error .screen .expression {\n        background: $errorBgColor;\n    }\n}\n","@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    }\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\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        }\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    }\n    @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(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    }\n    @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} { @content };\n    @-moz-keyframes #{$name} { @content };\n    @-webkit-keyframes #{$name} { @content };\n    @keyframes #{$name} { @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\n    @include keyframes(fade) {\n        0%   {opacity:0;}\n        50%   {opacity:1;}\n        100% {opacity:0;}\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","/* 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","/* Style for the calculator component */\n@import 'inc/bootstrap';\n\n/* font size mixin specific to calculator to use em instead of rem unit */\n@function calc-em-size($em) {\n    @return ($em) * 1em;\n}\n@mixin calc-font-size($em) {\n    font-size: calc-em-size($em) !important;\n}\n\n.calculator {\n    $calculatorPanelBg: $uiClickableDefaultBg;\n    $calculatorPanelTxt: $textColor;\n    $calculatorKeyboardBg: $uiClickableDefaultBg;\n    $calculatorKeyboardHoverBg: $uiClickableActiveBg;\n    $calculatorKeyboardSpecialBg: $uiClickableHoverBg;\n    $calculatorKeyboardSpecialTxt: $textHighlight;\n    $calculatorKeyboardCommandTxt: $info;\n    $calculatorKeyboardSwitchBg: $uiClickableDefaultBg;\n    $calculatorKeyboardSwitchTxt: $textColor;\n    $calculatorKeyboardSwitchSelectedBg: $uiClickableHoverBg;\n    $calculatorKeyboardSwitchSelectedTxt: $textHighlight;\n    $calculatorKeyboardSwitchBorder: whiten($textColor, 0.5);\n    $calculatorKeyboardTxt: $textColor;\n    $calculatorScreenBg: $uiGeneralContentBg;\n    $calculatorScreenTxt: $textColor;\n    $calculatorScreenBorder: $info;\n    $calculatorScreenSpecialTxt: $uiClickableHoverBg;\n    $calculatorScreenSpecialBg: whiten($uiClickableHoverBg, 0.9);\n    $calculatorHistoryBorder: $uiGeneralContentBorder;\n    $calculatorHistoryTxt: whiten($textColor, 0.2);\n\n    $calculatorFontSizeBtnPrimary: 1.7;\n    $calculatorFontSizeBtnSecondary: 1.3;\n    $calculatorFontSizeBtnSwitch: 1;\n    $calculatorFontSizeBtnSvg: 1;\n    $calculatorFontSizeExpression: 1.3;\n    $calculatorFontSizeHistory: 1;\n    $calculatorLineHeightExpression: calc-em-size($calculatorFontSizeExpression + 0.3);\n    $calculatorLineHeightHistory: calc-em-size($calculatorFontSizeHistory + 0.3);\n    $calculatorTermSpace: calc-em-size(0.2);\n    $calculatorButtonSize: calc-em-size(3.2);\n    $calculatorSwitchSize: calc-em-size(3.2);\n    $calculatorButtonPadding: 2px;\n    $calculatorSwitchPadding: 4px;\n    $calculatorScreenPadding: 8px;\n    $calculatorBaseFontSize: 12px;\n\n    position: relative;\n    font-family: monospace, sans-serif;\n    font-size: $calculatorBaseFontSize;\n    width: 100%;\n    height: 100%;\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n\n    sup,\n    sub {\n        font-size: 0.75em;\n    }\n    sup {\n        top: -0.5em;\n    }\n    sub {\n        bottom: -0.5em;\n    }\n\n    [data-type='exponent'] {\n        vertical-align: super;\n        font-size: 0.75em;\n    }\n\n    [data-type='variable'] {\n        font-weight: bold;\n    }\n\n    [data-type='function']:not([data-value*='rt']) {\n        padding-right: 0.3em;\n    }\n\n    .screen,\n    .input {\n        position: relative;\n        @include vendor-prefix(flex, 0 0 auto, property, (-ms-, -webkit-, ''));\n    }\n\n    .focus {\n        outline: 2px solid $calculatorScreenBorder;\n    }\n\n    .keyboard {\n        padding: 0 20px 20px;\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n    }\n\n    .calculator-keyboard {\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n        @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n        background: $calculatorKeyboardBg;\n        color: $calculatorKeyboardTxt;\n        width: 100%;\n        height: auto;\n        padding-top: $calculatorScreenPadding;\n\n        .row {\n            position: relative;\n            @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex-direction, row, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: 100%;\n            height: 100%;\n        }\n\n        .spacer {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n        }\n\n        span {\n            position: relative;\n            display: inline-block;\n            z-index: 1;\n            @include calc-font-size($calculatorFontSizeBtnSecondary);\n        }\n\n        button {\n            position: relative;\n            background-color: $calculatorKeyboardBg;\n            color: $calculatorKeyboardTxt !important;\n            display: inline-block;\n            border-radius: 0;\n            border: none;\n            padding: 0;\n            text-align: center;\n            text-shadow: none;\n            cursor: pointer;\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n\n            @include calc-font-size(1);\n\n            &:not(.switch) {\n                &:before {\n                    content: ' ';\n                    border-radius: 50%;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    left: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    width: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                    height: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                }\n            }\n            &:hover {\n                &:before {\n                    background: $calculatorKeyboardHoverBg;\n                }\n            }\n\n            &.disabled {\n                visibility: hidden;\n            }\n            &.switch {\n                span {\n                    color: $calculatorKeyboardSwitchTxt !important;\n                    border-color: $calculatorKeyboardSwitchBorder !important;\n                    border-top: 1px solid;\n                    border-bottom: 1px solid;\n                    height: auto;\n                    width: 100%;\n                    padding: $calculatorSwitchPadding 0.5em;\n                    @include calc-font-size($calculatorFontSizeBtnSwitch);\n                }\n\n                &.first {\n                    span {\n                        border-left: 1px solid;\n                        border-top-left-radius: 2px;\n                        border-bottom-left-radius: 2px;\n                    }\n                }\n                &.last {\n                    span {\n                        border-right: 1px solid;\n                        border-top-right-radius: 2px;\n                        border-bottom-right-radius: 2px;\n                    }\n                }\n\n                &:before {\n                    content: ' ';\n                    border-radius: 2px;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    bottom: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    left: 3px;\n                    right: 3px;\n                }\n            }\n            &.operand {\n                span {\n                    font-weight: bold;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n            &.command {\n                span {\n                    color: $calculatorKeyboardCommandTxt !important;\n                }\n            }\n            &.execute {\n                &:before {\n                    background: $calculatorKeyboardSpecialBg;\n                }\n\n                span {\n                    font-weight: bold;\n                    color: $calculatorKeyboardSpecialTxt !important;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n\n            svg {\n                display: inline-block;\n                width: calc-em-size($calculatorFontSizeBtnSvg);\n                height: calc-em-size($calculatorFontSizeBtnSvg);\n                stroke-width: 0;\n                stroke: currentColor;\n                fill: currentColor;\n\n                &.backspace-outline {\n                    width: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                    height: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                }\n            }\n        }\n    }\n\n    &.degree {\n        .calculator-keyboard {\n            button.switch[data-command='degree'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n    &.radian {\n        .calculator-keyboard {\n            button.switch[data-command='radian'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n\n    .simple-screen {\n        position: relative;\n        width: 100%;\n        @include calc-font-size($calculatorFontSizeExpression);\n        color: $calculatorScreenTxt;\n        font-family: monospace;\n\n        .screen-panel {\n            position: relative;\n            width: 100%;\n            overflow: auto;\n            word-break: break-all;\n            text-align: left;\n            padding: $calculatorScreenPadding 8px;\n        }\n\n        .history {\n            @include calc-font-size($calculatorFontSizeHistory);\n            border: 1px solid $calculatorHistoryBorder;\n            color: $calculatorHistoryTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightHistory * 3});\n            line-height: $calculatorLineHeightHistory;\n\n            .history-line {\n                .history-expression {\n                    &,\n                    .term {\n                        font-weight: lighter;\n                    }\n                    text-align: left;\n                }\n                .history-result {\n                    &:before {\n                        content: '=';\n                        display: inline-block;\n                        font-weight: lighter;\n                        padding-right: $calculatorTermSpace;\n                    }\n                    text-align: right;\n                    font-weight: bolder;\n                }\n            }\n        }\n        .expression {\n            @include calc-font-size($calculatorFontSizeExpression);\n            background: $calculatorScreenBg;\n            color: $calculatorScreenTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightExpression * 2});\n            line-height: $calculatorLineHeightExpression;\n        }\n        .term {\n            padding: 0;\n\n            &.term-operator:not([data-token='POW']):not([data-token='FAC']):not([data-token='NEG']) {\n                padding: 0 $calculatorTermSpace;\n            }\n            &.term-operator[data-token='FAC'],\n            &.term-operator[data-token='NEG'] {\n                margin-left: calc(-1 * $calculatorTermSpace / 2);\n                margin-right: calc(-1 * $calculatorTermSpace / 2);\n            }\n            &.term-operator[data-token='POS'] {\n                display: none;\n            }\n            &.term-function:not([data-token='SQRT']):not([data-token='CBRT']) {\n                padding-right: $calculatorTermSpace;\n            }\n            &.term-operand {\n                font-weight: bold;\n            }\n            &.term-modificator {\n                font-weight: lighter;\n            }\n            &.term-constant {\n                font-style: italic;\n                font-weight: bold;\n            }\n            &.term-variable {\n                font-weight: bold;\n                color: $calculatorScreenSpecialTxt;\n            }\n            &.term-variable[data-token='VAR_ANS'] {\n                background: $calculatorScreenSpecialBg;\n                padding: 0;\n                margin: 0 #{$calculatorTermSpace * 2};\n                position: relative;\n                &::before,\n                &::after {\n                    background: $calculatorScreenSpecialBg;\n                    content: '';\n                    border-radius: 50%;\n                    border: 2px none;\n                    position: absolute;\n                    z-index: 0;\n                    top: 0;\n                    bottom: 0;\n                    width: #{$calculatorTermSpace * 2};\n                }\n                &::before {\n                    border-left-style: solid;\n                    border-left-color: $calculatorScreenSpecialTxt;\n                    left: #{-$calculatorTermSpace};\n                }\n                &::after {\n                    border-right-style: solid;\n                    border-right-color: $calculatorScreenSpecialTxt;\n                    right: #{-$calculatorTermSpace};\n                }\n                * {\n                    position: relative;\n                    z-index: 1;\n                }\n            }\n            &.term-unknown {\n                color: $warning;\n                text-decoration: underline wavy $error;\n            }\n            &.term-elide {\n                display: none;\n            }\n            &.term-error {\n                color: $error;\n            }\n            &.term-syntaxError {\n                color: $error;\n                text-decoration: underline wavy $error;\n            }\n        }\n    }\n\n    &.error .screen .expression {\n        background: $errorBgColor;\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$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/calculator.scss%23sass","../../../../scss/inc/_functions.scss","../../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/calculator.scss","../../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"calculator.css","sourcesContent":["/* Style for the calculator component */\n@import 'inc/bootstrap';\n\n/* font size mixin specific to calculator to use em instead of rem unit */\n@function calc-em-size($em) {\n    @return ($em) * 1em;\n}\n@mixin calc-font-size($em) {\n    font-size: calc-em-size($em) !important;\n}\n\n.calculator {\n    $calculatorPanelBg: $uiClickableDefaultBg;\n    $calculatorPanelTxt: $textColor;\n    $calculatorKeyboardBg: $uiClickableDefaultBg;\n    $calculatorKeyboardHoverBg: $uiClickableActiveBg;\n    $calculatorKeyboardSpecialBg: $uiClickableHoverBg;\n    $calculatorKeyboardSpecialTxt: $textHighlight;\n    $calculatorKeyboardCommandTxt: $info;\n    $calculatorKeyboardSwitchBg: $uiClickableDefaultBg;\n    $calculatorKeyboardSwitchTxt: $textColor;\n    $calculatorKeyboardSwitchSelectedBg: $uiClickableHoverBg;\n    $calculatorKeyboardSwitchSelectedTxt: $textHighlight;\n    $calculatorKeyboardSwitchBorder: whiten($textColor, 0.5);\n    $calculatorKeyboardTxt: $textColor;\n    $calculatorScreenBg: $uiGeneralContentBg;\n    $calculatorScreenTxt: $textColor;\n    $calculatorScreenBorder: $info;\n    $calculatorScreenSpecialTxt: $uiClickableHoverBg;\n    $calculatorScreenSpecialBg: whiten($uiClickableHoverBg, 0.9);\n    $calculatorHistoryBorder: $uiGeneralContentBorder;\n    $calculatorHistoryTxt: whiten($textColor, 0.2);\n\n    $calculatorFontSizeBtnPrimary: 1.7;\n    $calculatorFontSizeBtnSecondary: 1.3;\n    $calculatorFontSizeBtnSwitch: 1;\n    $calculatorFontSizeBtnSvg: 1;\n    $calculatorFontSizeExpression: 1.3;\n    $calculatorFontSizeHistory: 1;\n    $calculatorLineHeightExpression: calc-em-size($calculatorFontSizeExpression + 0.3);\n    $calculatorLineHeightHistory: calc-em-size($calculatorFontSizeHistory + 0.3);\n    $calculatorTermSpace: calc-em-size(0.2);\n    $calculatorButtonSize: calc-em-size(3.2);\n    $calculatorSwitchSize: calc-em-size(3.2);\n    $calculatorButtonPadding: 2px;\n    $calculatorSwitchPadding: 4px;\n    $calculatorScreenPadding: 8px;\n    $calculatorBaseFontSize: 12px;\n\n    position: relative;\n    font-family: monospace, sans-serif;\n    font-size: $calculatorBaseFontSize;\n    width: 100%;\n    height: 100%;\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n\n    sup,\n    sub {\n        font-size: 0.75em;\n    }\n    sup {\n        top: -0.5em;\n    }\n    sub {\n        bottom: -0.5em;\n    }\n\n    [data-type='exponent'] {\n        vertical-align: super;\n        font-size: 0.75em;\n    }\n\n    [data-type='variable'] {\n        font-weight: bold;\n    }\n\n    [data-type='function']:not([data-value*='rt']) {\n        padding-right: 0.3em;\n    }\n\n    .screen,\n    .input {\n        position: relative;\n        @include vendor-prefix(flex, 0 0 auto, property, (-ms-, -webkit-, ''));\n    }\n\n    .focus {\n        outline: 2px solid $calculatorScreenBorder;\n    }\n\n    .keyboard {\n        padding: 0 20px 20px;\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n    }\n\n    .calculator-keyboard {\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n        @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n        background: $calculatorKeyboardBg;\n        color: $calculatorKeyboardTxt;\n        width: 100%;\n        height: auto;\n        padding-top: $calculatorScreenPadding;\n\n        .row {\n            position: relative;\n            @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex-direction, row, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: 100%;\n            height: 100%;\n        }\n\n        .spacer {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n        }\n\n        span {\n            position: relative;\n            display: inline-block;\n            z-index: 1;\n            @include calc-font-size($calculatorFontSizeBtnSecondary);\n        }\n\n        button {\n            position: relative;\n            background-color: $calculatorKeyboardBg;\n            color: $calculatorKeyboardTxt !important;\n            display: inline-block;\n            border-radius: 0;\n            border: none;\n            padding: 0;\n            text-align: center;\n            text-shadow: none;\n            cursor: pointer;\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n\n            @include calc-font-size(1);\n\n            &:not(.switch) {\n                &:before {\n                    content: ' ';\n                    border-radius: 50%;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    left: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    width: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                    height: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                }\n            }\n            &:hover {\n                &:before {\n                    background: $calculatorKeyboardHoverBg;\n                }\n            }\n\n            &.disabled {\n                visibility: hidden;\n            }\n            &.switch {\n                span {\n                    color: $calculatorKeyboardSwitchTxt !important;\n                    border-color: $calculatorKeyboardSwitchBorder !important;\n                    border-top: 1px solid;\n                    border-bottom: 1px solid;\n                    height: auto;\n                    width: 100%;\n                    padding: $calculatorSwitchPadding 0.5em;\n                    @include calc-font-size($calculatorFontSizeBtnSwitch);\n                }\n\n                &.first {\n                    span {\n                        border-left: 1px solid;\n                        border-top-left-radius: 2px;\n                        border-bottom-left-radius: 2px;\n                    }\n                }\n                &.last {\n                    span {\n                        border-right: 1px solid;\n                        border-top-right-radius: 2px;\n                        border-bottom-right-radius: 2px;\n                    }\n                }\n\n                &:before {\n                    content: ' ';\n                    border-radius: 2px;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    bottom: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    left: 3px;\n                    right: 3px;\n                }\n            }\n            &.operand {\n                span {\n                    font-weight: bold;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n            &.command {\n                span {\n                    color: $calculatorKeyboardCommandTxt !important;\n                }\n            }\n            &.execute {\n                &:before {\n                    background: $calculatorKeyboardSpecialBg;\n                }\n\n                span {\n                    font-weight: bold;\n                    color: $calculatorKeyboardSpecialTxt !important;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n\n            svg {\n                display: inline-block;\n                width: calc-em-size($calculatorFontSizeBtnSvg);\n                height: calc-em-size($calculatorFontSizeBtnSvg);\n                stroke-width: 0;\n                stroke: currentColor;\n                fill: currentColor;\n\n                &.backspace-outline {\n                    width: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                    height: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                }\n            }\n        }\n    }\n\n    &.degree {\n        .calculator-keyboard {\n            button.switch[data-command='degree'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n    &.radian {\n        .calculator-keyboard {\n            button.switch[data-command='radian'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n\n    .simple-screen {\n        position: relative;\n        width: 100%;\n        @include calc-font-size($calculatorFontSizeExpression);\n        color: $calculatorScreenTxt;\n        font-family: monospace;\n\n        .screen-panel {\n            position: relative;\n            width: 100%;\n            overflow: auto;\n            word-break: break-all;\n            text-align: left;\n            padding: $calculatorScreenPadding 8px;\n        }\n\n        .history {\n            @include calc-font-size($calculatorFontSizeHistory);\n            border: 1px solid $calculatorHistoryBorder;\n            color: $calculatorHistoryTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightHistory * 3});\n            line-height: $calculatorLineHeightHistory;\n\n            .history-line {\n                .history-expression {\n                    &,\n                    .term {\n                        font-weight: lighter;\n                    }\n                    text-align: left;\n                }\n                .history-result {\n                    &:before {\n                        content: '=';\n                        display: inline-block;\n                        font-weight: lighter;\n                        padding-right: $calculatorTermSpace;\n                    }\n                    text-align: right;\n                    font-weight: bolder;\n                }\n            }\n        }\n        .expression {\n            @include calc-font-size($calculatorFontSizeExpression);\n            background: $calculatorScreenBg;\n            color: $calculatorScreenTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightExpression * 2});\n            line-height: $calculatorLineHeightExpression;\n        }\n        .term {\n            padding: 0;\n\n            &.term-operator:not([data-token='POW']):not([data-token='FAC']):not([data-token='NEG']) {\n                padding: 0 $calculatorTermSpace;\n            }\n            &.term-operator[data-token='FAC'],\n            &.term-operator[data-token='NEG'] {\n                margin-left: calc(-1 * $calculatorTermSpace / 2);\n                margin-right: calc(-1 * $calculatorTermSpace / 2);\n            }\n            &.term-operator[data-token='POS'] {\n                display: none;\n            }\n            &.term-function:not([data-token='SQRT']):not([data-token='CBRT']) {\n                padding-right: $calculatorTermSpace;\n            }\n            &.term-operand {\n                font-weight: bold;\n            }\n            &.term-modificator {\n                font-weight: lighter;\n            }\n            &.term-constant {\n                font-style: italic;\n                font-weight: bold;\n            }\n            &.term-variable {\n                font-weight: bold;\n                color: $calculatorScreenSpecialTxt;\n            }\n            &.term-variable[data-token='VAR_ANS'] {\n                background: $calculatorScreenSpecialBg;\n                padding: 0;\n                margin: 0 #{$calculatorTermSpace * 2};\n                position: relative;\n                &::before,\n                &::after {\n                    background: $calculatorScreenSpecialBg;\n                    content: '';\n                    border-radius: 50%;\n                    border: 2px none;\n                    position: absolute;\n                    z-index: 0;\n                    top: 0;\n                    bottom: 0;\n                    width: #{$calculatorTermSpace * 2};\n                }\n                &::before {\n                    border-left-style: solid;\n                    border-left-color: $calculatorScreenSpecialTxt;\n                    left: #{-$calculatorTermSpace};\n                }\n                &::after {\n                    border-right-style: solid;\n                    border-right-color: $calculatorScreenSpecialTxt;\n                    right: #{-$calculatorTermSpace};\n                }\n                * {\n                    position: relative;\n                    z-index: 1;\n                }\n            }\n            &.term-unknown {\n                color: $warning;\n                text-decoration: underline wavy $error;\n            }\n            &.term-elide {\n                display: none;\n            }\n            &.term-error {\n                color: $error;\n            }\n            &.term-syntaxError {\n                color: $error;\n                text-decoration: underline wavy $error;\n            }\n        }\n    }\n\n    &.error .screen .expression {\n        background: $errorBgColor;\n    }\n}\n","@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","/* Style for the calculator component */\n@import 'inc/bootstrap';\n\n/* font size mixin specific to calculator to use em instead of rem unit */\n@function calc-em-size($em) {\n    @return ($em) * 1em;\n}\n@mixin calc-font-size($em) {\n    font-size: calc-em-size($em) !important;\n}\n\n.calculator {\n    $calculatorPanelBg: $uiClickableDefaultBg;\n    $calculatorPanelTxt: $textColor;\n    $calculatorKeyboardBg: $uiClickableDefaultBg;\n    $calculatorKeyboardHoverBg: $uiClickableActiveBg;\n    $calculatorKeyboardSpecialBg: $uiClickableHoverBg;\n    $calculatorKeyboardSpecialTxt: $textHighlight;\n    $calculatorKeyboardCommandTxt: $info;\n    $calculatorKeyboardSwitchBg: $uiClickableDefaultBg;\n    $calculatorKeyboardSwitchTxt: $textColor;\n    $calculatorKeyboardSwitchSelectedBg: $uiClickableHoverBg;\n    $calculatorKeyboardSwitchSelectedTxt: $textHighlight;\n    $calculatorKeyboardSwitchBorder: whiten($textColor, 0.5);\n    $calculatorKeyboardTxt: $textColor;\n    $calculatorScreenBg: $uiGeneralContentBg;\n    $calculatorScreenTxt: $textColor;\n    $calculatorScreenBorder: $info;\n    $calculatorScreenSpecialTxt: $uiClickableHoverBg;\n    $calculatorScreenSpecialBg: whiten($uiClickableHoverBg, 0.9);\n    $calculatorHistoryBorder: $uiGeneralContentBorder;\n    $calculatorHistoryTxt: whiten($textColor, 0.2);\n\n    $calculatorFontSizeBtnPrimary: 1.7;\n    $calculatorFontSizeBtnSecondary: 1.3;\n    $calculatorFontSizeBtnSwitch: 1;\n    $calculatorFontSizeBtnSvg: 1;\n    $calculatorFontSizeExpression: 1.3;\n    $calculatorFontSizeHistory: 1;\n    $calculatorLineHeightExpression: calc-em-size($calculatorFontSizeExpression + 0.3);\n    $calculatorLineHeightHistory: calc-em-size($calculatorFontSizeHistory + 0.3);\n    $calculatorTermSpace: calc-em-size(0.2);\n    $calculatorButtonSize: calc-em-size(3.2);\n    $calculatorSwitchSize: calc-em-size(3.2);\n    $calculatorButtonPadding: 2px;\n    $calculatorSwitchPadding: 4px;\n    $calculatorScreenPadding: 8px;\n    $calculatorBaseFontSize: 12px;\n\n    position: relative;\n    font-family: monospace, sans-serif;\n    font-size: $calculatorBaseFontSize;\n    width: 100%;\n    height: 100%;\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n    @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n    @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n\n    sup,\n    sub {\n        font-size: 0.75em;\n    }\n    sup {\n        top: -0.5em;\n    }\n    sub {\n        bottom: -0.5em;\n    }\n\n    [data-type='exponent'] {\n        vertical-align: super;\n        font-size: 0.75em;\n    }\n\n    [data-type='variable'] {\n        font-weight: bold;\n    }\n\n    [data-type='function']:not([data-value*='rt']) {\n        padding-right: 0.3em;\n    }\n\n    .screen,\n    .input {\n        position: relative;\n        @include vendor-prefix(flex, 0 0 auto, property, (-ms-, -webkit-, ''));\n    }\n\n    .focus {\n        outline: 2px solid $calculatorScreenBorder;\n    }\n\n    .keyboard {\n        padding: 0 20px 20px;\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\n    }\n\n    .calculator-keyboard {\n        position: relative;\n        @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n        @include vendor-prefix(flex-direction, column, property, (-ms-, -webkit-, ''));\n        @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n        background: $calculatorKeyboardBg;\n        color: $calculatorKeyboardTxt;\n        width: 100%;\n        height: auto;\n        padding-top: $calculatorScreenPadding;\n\n        .row {\n            position: relative;\n            @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex-direction, row, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(align-content, stretch, property, (-ms-, -webkit-, ''));\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: 100%;\n            height: 100%;\n        }\n\n        .spacer {\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n        }\n\n        span {\n            position: relative;\n            display: inline-block;\n            z-index: 1;\n            @include calc-font-size($calculatorFontSizeBtnSecondary);\n        }\n\n        button {\n            position: relative;\n            background-color: $calculatorKeyboardBg;\n            color: $calculatorKeyboardTxt !important;\n            display: inline-block;\n            border-radius: 0;\n            border: none;\n            padding: 0;\n            text-align: center;\n            text-shadow: none;\n            cursor: pointer;\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\n            width: $calculatorButtonSize;\n            height: 100%;\n\n            @include calc-font-size(1);\n\n            &:not(.switch) {\n                &:before {\n                    content: ' ';\n                    border-radius: 50%;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    left: calc(50% - #{calc($calculatorButtonSize / 2)} + #{$calculatorButtonPadding});\n                    width: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                    height: calc(#{$calculatorButtonSize} - #{$calculatorButtonPadding * 2});\n                }\n            }\n            &:hover {\n                &:before {\n                    background: $calculatorKeyboardHoverBg;\n                }\n            }\n\n            &.disabled {\n                visibility: hidden;\n            }\n            &.switch {\n                span {\n                    color: $calculatorKeyboardSwitchTxt !important;\n                    border-color: $calculatorKeyboardSwitchBorder !important;\n                    border-top: 1px solid;\n                    border-bottom: 1px solid;\n                    height: auto;\n                    width: 100%;\n                    padding: $calculatorSwitchPadding 0.5em;\n                    @include calc-font-size($calculatorFontSizeBtnSwitch);\n                }\n\n                &.first {\n                    span {\n                        border-left: 1px solid;\n                        border-top-left-radius: 2px;\n                        border-bottom-left-radius: 2px;\n                    }\n                }\n                &.last {\n                    span {\n                        border-right: 1px solid;\n                        border-top-right-radius: 2px;\n                        border-bottom-right-radius: 2px;\n                    }\n                }\n\n                &:before {\n                    content: ' ';\n                    border-radius: 2px;\n                    display: inline-block;\n                    position: absolute;\n                    z-index: 0;\n                    top: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    bottom: calc(50% - #{calc($calculatorFontSizeBtnSwitch / 2)}em - #{$calculatorSwitchPadding});\n                    left: 3px;\n                    right: 3px;\n                }\n            }\n            &.operand {\n                span {\n                    font-weight: bold;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n            &.command {\n                span {\n                    color: $calculatorKeyboardCommandTxt !important;\n                }\n            }\n            &.execute {\n                &:before {\n                    background: $calculatorKeyboardSpecialBg;\n                }\n\n                span {\n                    font-weight: bold;\n                    color: $calculatorKeyboardSpecialTxt !important;\n                    @include calc-font-size($calculatorFontSizeBtnPrimary);\n                }\n            }\n\n            svg {\n                display: inline-block;\n                width: calc-em-size($calculatorFontSizeBtnSvg);\n                height: calc-em-size($calculatorFontSizeBtnSvg);\n                stroke-width: 0;\n                stroke: currentColor;\n                fill: currentColor;\n\n                &.backspace-outline {\n                    width: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                    height: calc-em-size($calculatorFontSizeBtnSvg * 1.2);\n                }\n            }\n        }\n    }\n\n    &.degree {\n        .calculator-keyboard {\n            button.switch[data-command='degree'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n    &.radian {\n        .calculator-keyboard {\n            button.switch[data-command='radian'] {\n                &:before {\n                    background: $calculatorKeyboardSwitchSelectedBg;\n                }\n                span {\n                    color: $calculatorKeyboardSwitchSelectedTxt !important;\n                }\n            }\n        }\n    }\n\n    .simple-screen {\n        position: relative;\n        width: 100%;\n        @include calc-font-size($calculatorFontSizeExpression);\n        color: $calculatorScreenTxt;\n        font-family: monospace;\n\n        .screen-panel {\n            position: relative;\n            width: 100%;\n            overflow: auto;\n            word-break: break-all;\n            text-align: left;\n            padding: $calculatorScreenPadding 8px;\n        }\n\n        .history {\n            @include calc-font-size($calculatorFontSizeHistory);\n            border: 1px solid $calculatorHistoryBorder;\n            color: $calculatorHistoryTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightHistory * 3});\n            line-height: $calculatorLineHeightHistory;\n\n            .history-line {\n                .history-expression {\n                    &,\n                    .term {\n                        font-weight: lighter;\n                    }\n                    text-align: left;\n                }\n                .history-result {\n                    &:before {\n                        content: '=';\n                        display: inline-block;\n                        font-weight: lighter;\n                        padding-right: $calculatorTermSpace;\n                    }\n                    text-align: right;\n                    font-weight: bolder;\n                }\n            }\n        }\n        .expression {\n            @include calc-font-size($calculatorFontSizeExpression);\n            background: $calculatorScreenBg;\n            color: $calculatorScreenTxt;\n            height: calc(#{$calculatorScreenPadding * 2} + #{$calculatorLineHeightExpression * 2});\n            line-height: $calculatorLineHeightExpression;\n        }\n        .term {\n            padding: 0;\n\n            &.term-operator:not([data-token='POW']):not([data-token='FAC']):not([data-token='NEG']) {\n                padding: 0 $calculatorTermSpace;\n            }\n            &.term-operator[data-token='FAC'],\n            &.term-operator[data-token='NEG'] {\n                margin-left: calc(-1 * $calculatorTermSpace / 2);\n                margin-right: calc(-1 * $calculatorTermSpace / 2);\n            }\n            &.term-operator[data-token='POS'] {\n                display: none;\n            }\n            &.term-function:not([data-token='SQRT']):not([data-token='CBRT']) {\n                padding-right: $calculatorTermSpace;\n            }\n            &.term-operand {\n                font-weight: bold;\n            }\n            &.term-modificator {\n                font-weight: lighter;\n            }\n            &.term-constant {\n                font-style: italic;\n                font-weight: bold;\n            }\n            &.term-variable {\n                font-weight: bold;\n                color: $calculatorScreenSpecialTxt;\n            }\n            &.term-variable[data-token='VAR_ANS'] {\n                background: $calculatorScreenSpecialBg;\n                padding: 0;\n                margin: 0 #{$calculatorTermSpace * 2};\n                position: relative;\n                &::before,\n                &::after {\n                    background: $calculatorScreenSpecialBg;\n                    content: '';\n                    border-radius: 50%;\n                    border: 2px none;\n                    position: absolute;\n                    z-index: 0;\n                    top: 0;\n                    bottom: 0;\n                    width: #{$calculatorTermSpace * 2};\n                }\n                &::before {\n                    border-left-style: solid;\n                    border-left-color: $calculatorScreenSpecialTxt;\n                    left: #{-$calculatorTermSpace};\n                }\n                &::after {\n                    border-right-style: solid;\n                    border-right-color: $calculatorScreenSpecialTxt;\n                    right: #{-$calculatorTermSpace};\n                }\n                * {\n                    position: relative;\n                    z-index: 1;\n                }\n            }\n            &.term-unknown {\n                color: $warning;\n                text-decoration: underline wavy $error;\n            }\n            &.term-elide {\n                display: none;\n            }\n            &.term-error {\n                color: $error;\n            }\n            &.term-syntaxError {\n                color: $error;\n                text-decoration: underline wavy $error;\n            }\n        }\n    }\n\n    &.error .screen .expression {\n        background: $errorBgColor;\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$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/mediaplayer/css/player.css

@@ -6,6 +6,11 @@ Usage:
    first param - color, second - position. Also you can use px or other valid units for set position.
 */
 /* based on "visually-hidden" mixin in LDS for accessibility goals */
+/*
+ * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
+   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
+     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
+ */
 /* Do not edit */
 .mediaplayer {
   position: relative;

package/src/mediaplayer/css/player.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/inc/_functions.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../scss/player.scss%23sass","../scss/player.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.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    }\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\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        }\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    }\n    @else {\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\n    }\n}\n\n\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(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    }\n    @else {\n        font-size: calc(($remPx) * 1px);\n        font-size: calc(($remPx / 10) * 1rem);\n    }\n}\n\n\n@mixin keyframes($name) {\n    @-o-keyframes #{$name} { @content };\n    @-moz-keyframes #{$name} { @content };\n    @-webkit-keyframes #{$name} { @content };\n    @keyframes #{$name} { @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\n    @include keyframes(fade) {\n        0%   {opacity:0;}\n        50%   {opacity:1;}\n        100% {opacity:0;}\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","/* 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$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n    position: relative;\n    @include simple-border($playerBorder);\n    @include border-radius(2);\n    background: $playerBackground;\n    max-width: 100%;\n    min-height: $controlsHeight;\n    min-width: 200px;\n    direction: ltr;\n    padding: 2px;\n\n    &.youtube {\n        .player {\n            width: 100%;\n            height: 0px;\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n        }\n    }\n    .icon-sound:before {\n        @include icon-audio();\n    }\n    .icon-mute:before {\n        @include icon-result-nok();\n    }\n\n    .error {\n        display: none;\n    }\n\n    .player {\n        position: relative;\n        height: calc(100% - #{$controlsHeight});\n        width: 100%;\n\n        iframe {\n            pointer-events: none;\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%\n        }\n\n        .media:not(.youtube) {\n            display: block;\n            width: 100%;\n            height: auto;\n            max-height: 100%;\n        }\n\n        .player-overlay {\n            position: absolute;\n            z-index: 1;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            opacity: 1;\n            background: transparent none;\n            a.action {\n                 span.icon {\n                    font-family: 'tao' !important;\n                }\n            }\n        }\n\n        .action {\n            position: absolute;\n            z-index: 2;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%);\n            margin-top: -32px;\n            text-align: center;\n            text-decoration: none;\n            display: none;\n            @include font-size(64);\n            color: $playerTextOverlay;\n\n            .icon {\n                @include border-radius(10);\n                padding: 6px 12px;\n                background-color: $playerBackground;\n                opacity: 0.2;\n\n                &:hover {\n                    opacity: 0.6;\n                }\n            }\n\n            &.reload {\n                width: 100%;\n                font-size: 50px;\n                line-height: 30px;\n\n                &:hover {\n                    .icon {\n                        opacity: 1;\n                        font-family: 'tao' !important;\n                    }\n                }\n\n                .icon {\n                    opacity: 0.6;\n                    background: none;\n                    font-family: 'tao' !important;\n                }\n                .message {\n                    font-size: 20px;\n                }\n\n                .icon, .message {\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n                }\n            }\n        }\n    }\n\n    .controls {\n        background-color: $playerBackground;\n        color: $playerTextOverlay;\n        visibility: hidden;\n        position: relative;\n        padding: 5px;\n        display: table;\n        table-layout: fixed;\n        width: 100%;\n        border-top: 1px solid $playerBorder;\n        height: $controlsHeight;\n\n        .bar {\n            display: table-row;\n        }\n        .control {\n            display: table-cell;\n        }\n\n        .actions {\n            position: relative;\n            @include transition(all, 0.1,ease-in-out);\n\n            .action {\n                text-align: center;\n                line-height: $playerActionSize;\n                width: $playerActionSize;\n                height: $playerActionSize;\n                text-decoration: none;\n                color: $playerIcon;\n                @include transition(all, 0.2, ease-in-out);\n\n                &:hover {\n                    opacity: 1;\n                }\n\n                .icon {\n                    line-height: $playerActionSize;\n                    font-family: 'tao' !important;\n                }\n            }\n\n            .play {\n                opacity: 0.7;\n                border-right: 1px solid $playerBorder;\n            }\n\n            .mute {\n                opacity: 0.8;\n                border-left: 1px solid $playerBorder;\n            }\n        }\n\n        .slider {\n            cursor: pointer;\n            @include simple-border($playerSliderBorder);\n            @include border-radius(10);\n            @include transition(all, 0.1, ease-in-out);\n            background: $playerSliderBackground;\n\n            .noUi-background {\n                @include border-radius(10);\n                background: $playerSliderBackground;\n            }\n            &.noUi-connect, .noUi-connect {\n                @include border-radius(10);\n                background: $playerSliderColor;\n            }\n\n            .noUi-handle {\n                width: 11px;\n                height: 11px;\n                @include simple-border($playerSliderBorder);\n                @include border-radius(10);\n                background: $playerSliderHandle;\n            }\n            .noUi-handle:hover {\n                background: $playerSliderHightlight;\n            }\n            .noUi-handle:after {\n                display: none;\n            }\n\n            &.noUi-horizontal {\n                height: 9px;\n\n                .noUi-handle {\n                    top: -2px;\n                }\n            }\n\n            &.noUi-vertical {\n                width: 9px;\n\n                .noUi-handle {\n                    left: -2px;\n                }\n            }\n        }\n\n        .infos {\n            cursor: default;\n\n            margin: 0 $playerActionSpace;\n            line-height: $playerActionSize;\n\n            color: $playerText;\n            @include font-size(10);\n            font-weight: bold;\n\n            [data-control=\"time-end\"]:before {\n                content: ' / ';\n            }\n        }\n\n        .timer {\n            width: 8rem;\n            text-align: center;\n        }\n\n        .seek {\n            position: relative;\n            height: 1rem;\n            margin-top: 5px;\n            padding-left: $playerActionSpace;\n        }\n\n        .playback {\n            margin-right: $playerActionSpace;\n            width: $playerActionSize;\n        }\n\n        .sound {\n            width: $playerActionSize;\n            height: $playerActionSize;\n\n            .action {\n                position: relative;\n                z-index: 1001;\n            }\n            .volume {\n                cursor: default;\n                position: absolute;\n                z-index: 1000;\n                background-color: $playerBackground;\n                margin: 1px 2px;\n                padding: 10px 0;\n                width: 100%;\n                height: 0;\n                top: 0;\n                left: -1px;\n                opacity : 0;\n                text-align: center;\n                border: solid 1px $playerBorder;\n                pointer-events: none;\n                overflow: hidden;\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n                &.up, &.down {\n                    height: 120px;\n                    opacity : 1;\n                    pointer-events: auto;\n                    .slider {\n                        display: inline-block;\n                        opacity : 1;\n                        transition: opacity 50ms linear 200ms;\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n                    }\n                }\n                &.up {\n                    top: -127px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n                &.down {\n                    top: 30px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n            }\n\n            .slider {\n                opacity : 0;\n                display: none;\n                .noUi-handle {\n                    cursor: pointer;\n                    width: 9px;\n                    height: 9px;\n                }\n\n                &.noUi-horizontal {\n                    width: 50px;\n                    height: 7px;\n                }\n\n                &.noUi-vertical {\n                    width: 7px;\n                    height: 100px;\n                }\n            }\n        }\n\n        [data-control=\"play\"] {\n            display: none;\n        }\n        [data-control=\"pause\"] {\n            display: none;\n        }\n\n        [data-control=\"mute\"] {\n            display: inline-block;\n        }\n        [data-control=\"unmute\"] {\n            display: none;\n        }\n    }\n\n    &.video, &.youtube {\n        .sound {\n            .volume {\n                width: 2.8rem;\n                bottom: $playerActionSize;\n                right: 0;\n            }\n        }\n    }\n\n    &.audio {\n        .sound {\n            .volume {\n                height: $playerActionSize;\n                right: $playerActionSize;\n                bottom: 0;\n            }\n        }\n\n        &.stalled {\n            .player {\n                .player-overlay {\n                    [data-control=\"reload\"] {\n                        display: flex;\n                        align-items: center;\n                        background-color: #000;\n                        margin: 0;\n                        flex-wrap: wrap;\n                        padding: 5px 5px 5px 50px;\n                        text-align: left;\n                        line-height: 2.3rem;\n                        &.reload {\n                            width: calc(100% + 2px);\n                            font-size: 20px;\n                            line-height: 20px;\n                            min-height: 36px;\n\n                            .icon {\n                                text-shadow: none;\n                                position: absolute;\n                                left: 0;\n                                font-size: 2rem;\n                                font-weight: bold;\n                            }\n\n                            .message {\n                                text-shadow: none;\n                                font-size: 1.3rem;\n                                margin-right: 5px;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    &.ready {\n        .controls {\n            visibility: visible;\n        }\n\n        &.paused.canplay {\n            .player-overlay {\n                cursor: pointer;\n                font-family: 'tao' !important;\n                a.action {\n                    span.icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n\n            &.youtube.ended, &:not(.preview) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: none;\n                    }\n                }\n            }\n        }\n\n        &.playing.canpause {\n            .player-overlay {\n                cursor: pointer;\n                .action {\n                    .icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"pause\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n        }\n    }\n\n    &.playing.canpause {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"pause\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.paused.canplay {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"play\"] {\n                display: inline-block;\n            }\n            [data-control=\"pause\"] {\n                display: none;\n            }\n        }\n    }\n\n    &.muted {\n        .controls {\n            [data-control=\"mute\"] {\n                display: none;\n            }\n            [data-control=\"unmute\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.nogui {\n        .player {\n            iframe {\n                pointer-events: inherit;\n            }\n        }\n        .player-overlay {\n            display: none !important;\n        }\n        .controls {\n            display: none !important;\n        }\n    }\n\n    &.error:not(.stalled) {\n        .media, .controls {\n            display: none;\n        }\n\n        .error {\n            display: table;\n            text-align: center;\n            width: 100%;\n            height: 100%;\n\n            .message {\n                color: $error;\n                display: table-cell;\n                vertical-align: middle;\n            }\n        }\n    }\n\n    &.loading:not(.stalled)::before {\n        @keyframes spinner {\n            to { transform: rotate(360deg); }\n        }\n\n        content: '';\n        box-sizing: border-box;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 30px;\n        height: 30px;\n        margin-top: -15px;\n        margin-left: -15px;\n        border-radius: 50%;\n        border: 1px solid #ccc;\n        border-top-color: #07d;\n        animation: spinner .6s linear infinite;\n    }\n\n    &.stalled {\n        .video {\n            filter: blur(4px);\n            opacity: 0.4;\n        }\n        .player-overlay {\n            [data-control=\"reload\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    .transcription {\n        background-color: white;\n        color: black;\n        font-size: 14px;\n        line-height: 1.5;\n        max-height: 60px;\n        margin-bottom: 2px;\n        overflow-y: scroll;\n        &.hidden {\n            display: none;\n        }\n    }\n\n    &.video:not(.preview):not(.error) {\n        .player-overlay {\n            [data-control=\"start\"] {\n                display: inline-block;\n            }\n        }\n    }\n}\n","@import \"inc/bootstrap\";\n\n$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n    position: relative;\n    @include simple-border($playerBorder);\n    @include border-radius(2);\n    background: $playerBackground;\n    max-width: 100%;\n    min-height: $controlsHeight;\n    min-width: 200px;\n    direction: ltr;\n    padding: 2px;\n\n    &.youtube {\n        .player {\n            width: 100%;\n            height: 0px;\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n        }\n    }\n    .icon-sound:before {\n        @include icon-audio();\n    }\n    .icon-mute:before {\n        @include icon-result-nok();\n    }\n\n    .error {\n        display: none;\n    }\n\n    .player {\n        position: relative;\n        height: calc(100% - #{$controlsHeight});\n        width: 100%;\n\n        iframe {\n            pointer-events: none;\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%\n        }\n\n        .media:not(.youtube) {\n            display: block;\n            width: 100%;\n            height: auto;\n            max-height: 100%;\n        }\n\n        .player-overlay {\n            position: absolute;\n            z-index: 1;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            opacity: 1;\n            background: transparent none;\n            a.action {\n                 span.icon {\n                    font-family: 'tao' !important;\n                }\n            }\n        }\n\n        .action {\n            position: absolute;\n            z-index: 2;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%);\n            margin-top: -32px;\n            text-align: center;\n            text-decoration: none;\n            display: none;\n            @include font-size(64);\n            color: $playerTextOverlay;\n\n            .icon {\n                @include border-radius(10);\n                padding: 6px 12px;\n                background-color: $playerBackground;\n                opacity: 0.2;\n\n                &:hover {\n                    opacity: 0.6;\n                }\n            }\n\n            &.reload {\n                width: 100%;\n                font-size: 50px;\n                line-height: 30px;\n\n                &:hover {\n                    .icon {\n                        opacity: 1;\n                        font-family: 'tao' !important;\n                    }\n                }\n\n                .icon {\n                    opacity: 0.6;\n                    background: none;\n                    font-family: 'tao' !important;\n                }\n                .message {\n                    font-size: 20px;\n                }\n\n                .icon, .message {\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n                }\n            }\n        }\n    }\n\n    .controls {\n        background-color: $playerBackground;\n        color: $playerTextOverlay;\n        visibility: hidden;\n        position: relative;\n        padding: 5px;\n        display: table;\n        table-layout: fixed;\n        width: 100%;\n        border-top: 1px solid $playerBorder;\n        height: $controlsHeight;\n\n        .bar {\n            display: table-row;\n        }\n        .control {\n            display: table-cell;\n        }\n\n        .actions {\n            position: relative;\n            @include transition(all, 0.1,ease-in-out);\n\n            .action {\n                text-align: center;\n                line-height: $playerActionSize;\n                width: $playerActionSize;\n                height: $playerActionSize;\n                text-decoration: none;\n                color: $playerIcon;\n                @include transition(all, 0.2, ease-in-out);\n\n                &:hover {\n                    opacity: 1;\n                }\n\n                .icon {\n                    line-height: $playerActionSize;\n                    font-family: 'tao' !important;\n                }\n            }\n\n            .play {\n                opacity: 0.7;\n                border-right: 1px solid $playerBorder;\n            }\n\n            .mute {\n                opacity: 0.8;\n                border-left: 1px solid $playerBorder;\n            }\n        }\n\n        .slider {\n            cursor: pointer;\n            @include simple-border($playerSliderBorder);\n            @include border-radius(10);\n            @include transition(all, 0.1, ease-in-out);\n            background: $playerSliderBackground;\n\n            .noUi-background {\n                @include border-radius(10);\n                background: $playerSliderBackground;\n            }\n            &.noUi-connect, .noUi-connect {\n                @include border-radius(10);\n                background: $playerSliderColor;\n            }\n\n            .noUi-handle {\n                width: 11px;\n                height: 11px;\n                @include simple-border($playerSliderBorder);\n                @include border-radius(10);\n                background: $playerSliderHandle;\n            }\n            .noUi-handle:hover {\n                background: $playerSliderHightlight;\n            }\n            .noUi-handle:after {\n                display: none;\n            }\n\n            &.noUi-horizontal {\n                height: 9px;\n\n                .noUi-handle {\n                    top: -2px;\n                }\n            }\n\n            &.noUi-vertical {\n                width: 9px;\n\n                .noUi-handle {\n                    left: -2px;\n                }\n            }\n        }\n\n        .infos {\n            cursor: default;\n\n            margin: 0 $playerActionSpace;\n            line-height: $playerActionSize;\n\n            color: $playerText;\n            @include font-size(10);\n            font-weight: bold;\n\n            [data-control=\"time-end\"]:before {\n                content: ' / ';\n            }\n        }\n\n        .timer {\n            width: 8rem;\n            text-align: center;\n        }\n\n        .seek {\n            position: relative;\n            height: 1rem;\n            margin-top: 5px;\n            padding-left: $playerActionSpace;\n        }\n\n        .playback {\n            margin-right: $playerActionSpace;\n            width: $playerActionSize;\n        }\n\n        .sound {\n            width: $playerActionSize;\n            height: $playerActionSize;\n\n            .action {\n                position: relative;\n                z-index: 1001;\n            }\n            .volume {\n                cursor: default;\n                position: absolute;\n                z-index: 1000;\n                background-color: $playerBackground;\n                margin: 1px 2px;\n                padding: 10px 0;\n                width: 100%;\n                height: 0;\n                top: 0;\n                left: -1px;\n                opacity : 0;\n                text-align: center;\n                border: solid 1px $playerBorder;\n                pointer-events: none;\n                overflow: hidden;\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n                &.up, &.down {\n                    height: 120px;\n                    opacity : 1;\n                    pointer-events: auto;\n                    .slider {\n                        display: inline-block;\n                        opacity : 1;\n                        transition: opacity 50ms linear 200ms;\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n                    }\n                }\n                &.up {\n                    top: -127px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n                &.down {\n                    top: 30px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n            }\n\n            .slider {\n                opacity : 0;\n                display: none;\n                .noUi-handle {\n                    cursor: pointer;\n                    width: 9px;\n                    height: 9px;\n                }\n\n                &.noUi-horizontal {\n                    width: 50px;\n                    height: 7px;\n                }\n\n                &.noUi-vertical {\n                    width: 7px;\n                    height: 100px;\n                }\n            }\n        }\n\n        [data-control=\"play\"] {\n            display: none;\n        }\n        [data-control=\"pause\"] {\n            display: none;\n        }\n\n        [data-control=\"mute\"] {\n            display: inline-block;\n        }\n        [data-control=\"unmute\"] {\n            display: none;\n        }\n    }\n\n    &.video, &.youtube {\n        .sound {\n            .volume {\n                width: 2.8rem;\n                bottom: $playerActionSize;\n                right: 0;\n            }\n        }\n    }\n\n    &.audio {\n        .sound {\n            .volume {\n                height: $playerActionSize;\n                right: $playerActionSize;\n                bottom: 0;\n            }\n        }\n\n        &.stalled {\n            .player {\n                .player-overlay {\n                    [data-control=\"reload\"] {\n                        display: flex;\n                        align-items: center;\n                        background-color: #000;\n                        margin: 0;\n                        flex-wrap: wrap;\n                        padding: 5px 5px 5px 50px;\n                        text-align: left;\n                        line-height: 2.3rem;\n                        &.reload {\n                            width: calc(100% + 2px);\n                            font-size: 20px;\n                            line-height: 20px;\n                            min-height: 36px;\n\n                            .icon {\n                                text-shadow: none;\n                                position: absolute;\n                                left: 0;\n                                font-size: 2rem;\n                                font-weight: bold;\n                            }\n\n                            .message {\n                                text-shadow: none;\n                                font-size: 1.3rem;\n                                margin-right: 5px;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    &.ready {\n        .controls {\n            visibility: visible;\n        }\n\n        &.paused.canplay {\n            .player-overlay {\n                cursor: pointer;\n                font-family: 'tao' !important;\n                a.action {\n                    span.icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n\n            &.youtube.ended, &:not(.preview) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: none;\n                    }\n                }\n            }\n        }\n\n        &.playing.canpause {\n            .player-overlay {\n                cursor: pointer;\n                .action {\n                    .icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"pause\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n        }\n    }\n\n    &.playing.canpause {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"pause\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.paused.canplay {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"play\"] {\n                display: inline-block;\n            }\n            [data-control=\"pause\"] {\n                display: none;\n            }\n        }\n    }\n\n    &.muted {\n        .controls {\n            [data-control=\"mute\"] {\n                display: none;\n            }\n            [data-control=\"unmute\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.nogui {\n        .player {\n            iframe {\n                pointer-events: inherit;\n            }\n        }\n        .player-overlay {\n            display: none !important;\n        }\n        .controls {\n            display: none !important;\n        }\n    }\n\n    &.error:not(.stalled) {\n        .media, .controls {\n            display: none;\n        }\n\n        .error {\n            display: table;\n            text-align: center;\n            width: 100%;\n            height: 100%;\n\n            .message {\n                color: $error;\n                display: table-cell;\n                vertical-align: middle;\n            }\n        }\n    }\n\n    &.loading:not(.stalled)::before {\n        @keyframes spinner {\n            to { transform: rotate(360deg); }\n        }\n\n        content: '';\n        box-sizing: border-box;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 30px;\n        height: 30px;\n        margin-top: -15px;\n        margin-left: -15px;\n        border-radius: 50%;\n        border: 1px solid #ccc;\n        border-top-color: #07d;\n        animation: spinner .6s linear infinite;\n    }\n\n    &.stalled {\n        .video {\n            filter: blur(4px);\n            opacity: 0.4;\n        }\n        .player-overlay {\n            [data-control=\"reload\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    .transcription {\n        background-color: white;\n        color: black;\n        font-size: 14px;\n        line-height: 1.5;\n        max-height: 60px;\n        margin-bottom: 2px;\n        overflow-y: scroll;\n        &.hidden {\n            display: none;\n        }\n    }\n\n    &.video:not(.preview):not(.error) {\n        .player-overlay {\n            [data-control=\"start\"] {\n                display: inline-block;\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$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/player.scss%23sass","../scss/player.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.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$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n    position: relative;\n    @include simple-border($playerBorder);\n    @include border-radius(2);\n    background: $playerBackground;\n    max-width: 100%;\n    min-height: $controlsHeight;\n    min-width: 200px;\n    direction: ltr;\n    padding: 2px;\n\n    &.youtube {\n        .player {\n            width: 100%;\n            height: 0px;\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n        }\n    }\n    .icon-sound:before {\n        @include icon-audio();\n    }\n    .icon-mute:before {\n        @include icon-result-nok();\n    }\n\n    .error {\n        display: none;\n    }\n\n    .player {\n        position: relative;\n        height: calc(100% - #{$controlsHeight});\n        width: 100%;\n\n        iframe {\n            pointer-events: none;\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%\n        }\n\n        .media:not(.youtube) {\n            display: block;\n            width: 100%;\n            height: auto;\n            max-height: 100%;\n        }\n\n        .player-overlay {\n            position: absolute;\n            z-index: 1;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            opacity: 1;\n            background: transparent none;\n            a.action {\n                 span.icon {\n                    font-family: 'tao' !important;\n                }\n            }\n        }\n\n        .action {\n            position: absolute;\n            z-index: 2;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%);\n            margin-top: -32px;\n            text-align: center;\n            text-decoration: none;\n            display: none;\n            @include font-size(64);\n            color: $playerTextOverlay;\n\n            .icon {\n                @include border-radius(10);\n                padding: 6px 12px;\n                background-color: $playerBackground;\n                opacity: 0.2;\n\n                &:hover {\n                    opacity: 0.6;\n                }\n            }\n\n            &.reload {\n                width: 100%;\n                font-size: 50px;\n                line-height: 30px;\n\n                &:hover {\n                    .icon {\n                        opacity: 1;\n                        font-family: 'tao' !important;\n                    }\n                }\n\n                .icon {\n                    opacity: 0.6;\n                    background: none;\n                    font-family: 'tao' !important;\n                }\n                .message {\n                    font-size: 20px;\n                }\n\n                .icon, .message {\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n                }\n            }\n        }\n    }\n\n    .controls {\n        background-color: $playerBackground;\n        color: $playerTextOverlay;\n        visibility: hidden;\n        position: relative;\n        padding: 5px;\n        display: table;\n        table-layout: fixed;\n        width: 100%;\n        border-top: 1px solid $playerBorder;\n        height: $controlsHeight;\n\n        .bar {\n            display: table-row;\n        }\n        .control {\n            display: table-cell;\n        }\n\n        .actions {\n            position: relative;\n            @include transition(all, 0.1,ease-in-out);\n\n            .action {\n                text-align: center;\n                line-height: $playerActionSize;\n                width: $playerActionSize;\n                height: $playerActionSize;\n                text-decoration: none;\n                color: $playerIcon;\n                @include transition(all, 0.2, ease-in-out);\n\n                &:hover {\n                    opacity: 1;\n                }\n\n                .icon {\n                    line-height: $playerActionSize;\n                    font-family: 'tao' !important;\n                }\n            }\n\n            .play {\n                opacity: 0.7;\n                border-right: 1px solid $playerBorder;\n            }\n\n            .mute {\n                opacity: 0.8;\n                border-left: 1px solid $playerBorder;\n            }\n        }\n\n        .slider {\n            cursor: pointer;\n            @include simple-border($playerSliderBorder);\n            @include border-radius(10);\n            @include transition(all, 0.1, ease-in-out);\n            background: $playerSliderBackground;\n\n            .noUi-background {\n                @include border-radius(10);\n                background: $playerSliderBackground;\n            }\n            &.noUi-connect, .noUi-connect {\n                @include border-radius(10);\n                background: $playerSliderColor;\n            }\n\n            .noUi-handle {\n                width: 11px;\n                height: 11px;\n                @include simple-border($playerSliderBorder);\n                @include border-radius(10);\n                background: $playerSliderHandle;\n            }\n            .noUi-handle:hover {\n                background: $playerSliderHightlight;\n            }\n            .noUi-handle:after {\n                display: none;\n            }\n\n            &.noUi-horizontal {\n                height: 9px;\n\n                .noUi-handle {\n                    top: -2px;\n                }\n            }\n\n            &.noUi-vertical {\n                width: 9px;\n\n                .noUi-handle {\n                    left: -2px;\n                }\n            }\n        }\n\n        .infos {\n            cursor: default;\n\n            margin: 0 $playerActionSpace;\n            line-height: $playerActionSize;\n\n            color: $playerText;\n            @include font-size(10);\n            font-weight: bold;\n\n            [data-control=\"time-end\"]:before {\n                content: ' / ';\n            }\n        }\n\n        .timer {\n            width: 8rem;\n            text-align: center;\n        }\n\n        .seek {\n            position: relative;\n            height: 1rem;\n            margin-top: 5px;\n            padding-left: $playerActionSpace;\n        }\n\n        .playback {\n            margin-right: $playerActionSpace;\n            width: $playerActionSize;\n        }\n\n        .sound {\n            width: $playerActionSize;\n            height: $playerActionSize;\n\n            .action {\n                position: relative;\n                z-index: 1001;\n            }\n            .volume {\n                cursor: default;\n                position: absolute;\n                z-index: 1000;\n                background-color: $playerBackground;\n                margin: 1px 2px;\n                padding: 10px 0;\n                width: 100%;\n                height: 0;\n                top: 0;\n                left: -1px;\n                opacity : 0;\n                text-align: center;\n                border: solid 1px $playerBorder;\n                pointer-events: none;\n                overflow: hidden;\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n                &.up, &.down {\n                    height: 120px;\n                    opacity : 1;\n                    pointer-events: auto;\n                    .slider {\n                        display: inline-block;\n                        opacity : 1;\n                        transition: opacity 50ms linear 200ms;\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n                    }\n                }\n                &.up {\n                    top: -127px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n                &.down {\n                    top: 30px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n            }\n\n            .slider {\n                opacity : 0;\n                display: none;\n                .noUi-handle {\n                    cursor: pointer;\n                    width: 9px;\n                    height: 9px;\n                }\n\n                &.noUi-horizontal {\n                    width: 50px;\n                    height: 7px;\n                }\n\n                &.noUi-vertical {\n                    width: 7px;\n                    height: 100px;\n                }\n            }\n        }\n\n        [data-control=\"play\"] {\n            display: none;\n        }\n        [data-control=\"pause\"] {\n            display: none;\n        }\n\n        [data-control=\"mute\"] {\n            display: inline-block;\n        }\n        [data-control=\"unmute\"] {\n            display: none;\n        }\n    }\n\n    &.video, &.youtube {\n        .sound {\n            .volume {\n                width: 2.8rem;\n                bottom: $playerActionSize;\n                right: 0;\n            }\n        }\n    }\n\n    &.audio {\n        .sound {\n            .volume {\n                height: $playerActionSize;\n                right: $playerActionSize;\n                bottom: 0;\n            }\n        }\n\n        &.stalled {\n            .player {\n                .player-overlay {\n                    [data-control=\"reload\"] {\n                        display: flex;\n                        align-items: center;\n                        background-color: #000;\n                        margin: 0;\n                        flex-wrap: wrap;\n                        padding: 5px 5px 5px 50px;\n                        text-align: left;\n                        line-height: 2.3rem;\n                        &.reload {\n                            width: calc(100% + 2px);\n                            font-size: 20px;\n                            line-height: 20px;\n                            min-height: 36px;\n\n                            .icon {\n                                text-shadow: none;\n                                position: absolute;\n                                left: 0;\n                                font-size: 2rem;\n                                font-weight: bold;\n                            }\n\n                            .message {\n                                text-shadow: none;\n                                font-size: 1.3rem;\n                                margin-right: 5px;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    &.ready {\n        .controls {\n            visibility: visible;\n        }\n\n        &.paused.canplay {\n            .player-overlay {\n                cursor: pointer;\n                font-family: 'tao' !important;\n                a.action {\n                    span.icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n\n            &.youtube.ended, &:not(.preview) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: none;\n                    }\n                }\n            }\n        }\n\n        &.playing.canpause {\n            .player-overlay {\n                cursor: pointer;\n                .action {\n                    .icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"pause\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n        }\n    }\n\n    &.playing.canpause {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"pause\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.paused.canplay {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"play\"] {\n                display: inline-block;\n            }\n            [data-control=\"pause\"] {\n                display: none;\n            }\n        }\n    }\n\n    &.muted {\n        .controls {\n            [data-control=\"mute\"] {\n                display: none;\n            }\n            [data-control=\"unmute\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.nogui {\n        .player {\n            iframe {\n                pointer-events: inherit;\n            }\n        }\n        .player-overlay {\n            display: none !important;\n        }\n        .controls {\n            display: none !important;\n        }\n    }\n\n    &.error:not(.stalled) {\n        .media, .controls {\n            display: none;\n        }\n\n        .error {\n            display: table;\n            text-align: center;\n            width: 100%;\n            height: 100%;\n\n            .message {\n                color: $error;\n                display: table-cell;\n                vertical-align: middle;\n            }\n        }\n    }\n\n    &.loading:not(.stalled)::before {\n        @keyframes spinner {\n            to { transform: rotate(360deg); }\n        }\n\n        content: '';\n        box-sizing: border-box;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 30px;\n        height: 30px;\n        margin-top: -15px;\n        margin-left: -15px;\n        border-radius: 50%;\n        border: 1px solid #ccc;\n        border-top-color: #07d;\n        animation: spinner .6s linear infinite;\n    }\n\n    &.stalled {\n        .video {\n            filter: blur(4px);\n            opacity: 0.4;\n        }\n        .player-overlay {\n            [data-control=\"reload\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    .transcription {\n        background-color: white;\n        color: black;\n        font-size: 14px;\n        line-height: 1.5;\n        max-height: 60px;\n        margin-bottom: 2px;\n        overflow-y: scroll;\n        &.hidden {\n            display: none;\n        }\n    }\n\n    &.video:not(.preview):not(.error) {\n        .player-overlay {\n            [data-control=\"start\"] {\n                display: inline-block;\n            }\n        }\n    }\n}\n","@import \"inc/bootstrap\";\n\n$playerActionSize: 2.2rem;\n$playerActionSpace: 1rem;\n$playerBackground: black();\n$playerBorder: $darkBar;\n$playerText: #999;\n$playerIcon: $darkBarIcon;\n$playerTextOverlay: white();\n$playerSliderBorder: $uiGeneralContentBorder;\n$playerSliderBackground: $uiGeneralContentBg;\n$playerSliderColor: $darkBar;\n$playerSliderHandle: whiten($playerSliderColor, .4);\n$playerSliderHightlight: whiten($playerSliderColor, .2);\n$controlsHeight: 36px;\n\n.mediaplayer {\n    position: relative;\n    @include simple-border($playerBorder);\n    @include border-radius(2);\n    background: $playerBackground;\n    max-width: 100%;\n    min-height: $controlsHeight;\n    min-width: 200px;\n    direction: ltr;\n    padding: 2px;\n\n    &.youtube {\n        .player {\n            width: 100%;\n            height: 0px;\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\n        }\n    }\n    .icon-sound:before {\n        @include icon-audio();\n    }\n    .icon-mute:before {\n        @include icon-result-nok();\n    }\n\n    .error {\n        display: none;\n    }\n\n    .player {\n        position: relative;\n        height: calc(100% - #{$controlsHeight});\n        width: 100%;\n\n        iframe {\n            pointer-events: none;\n            position: absolute;\n            left: 0;\n            top: 0;\n            width: 100%;\n            height: 100%\n        }\n\n        .media:not(.youtube) {\n            display: block;\n            width: 100%;\n            height: auto;\n            max-height: 100%;\n        }\n\n        .player-overlay {\n            position: absolute;\n            z-index: 1;\n            top: 0;\n            left: 0;\n            bottom: 0;\n            right: 0;\n            opacity: 1;\n            background: transparent none;\n            a.action {\n                 span.icon {\n                    font-family: 'tao' !important;\n                }\n            }\n        }\n\n        .action {\n            position: absolute;\n            z-index: 2;\n            top: 50%;\n            left: 50%;\n            transform: translate(-50%);\n            margin-top: -32px;\n            text-align: center;\n            text-decoration: none;\n            display: none;\n            @include font-size(64);\n            color: $playerTextOverlay;\n\n            .icon {\n                @include border-radius(10);\n                padding: 6px 12px;\n                background-color: $playerBackground;\n                opacity: 0.2;\n\n                &:hover {\n                    opacity: 0.6;\n                }\n            }\n\n            &.reload {\n                width: 100%;\n                font-size: 50px;\n                line-height: 30px;\n\n                &:hover {\n                    .icon {\n                        opacity: 1;\n                        font-family: 'tao' !important;\n                    }\n                }\n\n                .icon {\n                    opacity: 0.6;\n                    background: none;\n                    font-family: 'tao' !important;\n                }\n                .message {\n                    font-size: 20px;\n                }\n\n                .icon, .message {\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\n                }\n            }\n        }\n    }\n\n    .controls {\n        background-color: $playerBackground;\n        color: $playerTextOverlay;\n        visibility: hidden;\n        position: relative;\n        padding: 5px;\n        display: table;\n        table-layout: fixed;\n        width: 100%;\n        border-top: 1px solid $playerBorder;\n        height: $controlsHeight;\n\n        .bar {\n            display: table-row;\n        }\n        .control {\n            display: table-cell;\n        }\n\n        .actions {\n            position: relative;\n            @include transition(all, 0.1,ease-in-out);\n\n            .action {\n                text-align: center;\n                line-height: $playerActionSize;\n                width: $playerActionSize;\n                height: $playerActionSize;\n                text-decoration: none;\n                color: $playerIcon;\n                @include transition(all, 0.2, ease-in-out);\n\n                &:hover {\n                    opacity: 1;\n                }\n\n                .icon {\n                    line-height: $playerActionSize;\n                    font-family: 'tao' !important;\n                }\n            }\n\n            .play {\n                opacity: 0.7;\n                border-right: 1px solid $playerBorder;\n            }\n\n            .mute {\n                opacity: 0.8;\n                border-left: 1px solid $playerBorder;\n            }\n        }\n\n        .slider {\n            cursor: pointer;\n            @include simple-border($playerSliderBorder);\n            @include border-radius(10);\n            @include transition(all, 0.1, ease-in-out);\n            background: $playerSliderBackground;\n\n            .noUi-background {\n                @include border-radius(10);\n                background: $playerSliderBackground;\n            }\n            &.noUi-connect, .noUi-connect {\n                @include border-radius(10);\n                background: $playerSliderColor;\n            }\n\n            .noUi-handle {\n                width: 11px;\n                height: 11px;\n                @include simple-border($playerSliderBorder);\n                @include border-radius(10);\n                background: $playerSliderHandle;\n            }\n            .noUi-handle:hover {\n                background: $playerSliderHightlight;\n            }\n            .noUi-handle:after {\n                display: none;\n            }\n\n            &.noUi-horizontal {\n                height: 9px;\n\n                .noUi-handle {\n                    top: -2px;\n                }\n            }\n\n            &.noUi-vertical {\n                width: 9px;\n\n                .noUi-handle {\n                    left: -2px;\n                }\n            }\n        }\n\n        .infos {\n            cursor: default;\n\n            margin: 0 $playerActionSpace;\n            line-height: $playerActionSize;\n\n            color: $playerText;\n            @include font-size(10);\n            font-weight: bold;\n\n            [data-control=\"time-end\"]:before {\n                content: ' / ';\n            }\n        }\n\n        .timer {\n            width: 8rem;\n            text-align: center;\n        }\n\n        .seek {\n            position: relative;\n            height: 1rem;\n            margin-top: 5px;\n            padding-left: $playerActionSpace;\n        }\n\n        .playback {\n            margin-right: $playerActionSpace;\n            width: $playerActionSize;\n        }\n\n        .sound {\n            width: $playerActionSize;\n            height: $playerActionSize;\n\n            .action {\n                position: relative;\n                z-index: 1001;\n            }\n            .volume {\n                cursor: default;\n                position: absolute;\n                z-index: 1000;\n                background-color: $playerBackground;\n                margin: 1px 2px;\n                padding: 10px 0;\n                width: 100%;\n                height: 0;\n                top: 0;\n                left: -1px;\n                opacity : 0;\n                text-align: center;\n                border: solid 1px $playerBorder;\n                pointer-events: none;\n                overflow: hidden;\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\n\n                &.up, &.down {\n                    height: 120px;\n                    opacity : 1;\n                    pointer-events: auto;\n                    .slider {\n                        display: inline-block;\n                        opacity : 1;\n                        transition: opacity 50ms linear 200ms;\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\n                    }\n                }\n                &.up {\n                    top: -127px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n                &.down {\n                    top: 30px;\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\n                }\n            }\n\n            .slider {\n                opacity : 0;\n                display: none;\n                .noUi-handle {\n                    cursor: pointer;\n                    width: 9px;\n                    height: 9px;\n                }\n\n                &.noUi-horizontal {\n                    width: 50px;\n                    height: 7px;\n                }\n\n                &.noUi-vertical {\n                    width: 7px;\n                    height: 100px;\n                }\n            }\n        }\n\n        [data-control=\"play\"] {\n            display: none;\n        }\n        [data-control=\"pause\"] {\n            display: none;\n        }\n\n        [data-control=\"mute\"] {\n            display: inline-block;\n        }\n        [data-control=\"unmute\"] {\n            display: none;\n        }\n    }\n\n    &.video, &.youtube {\n        .sound {\n            .volume {\n                width: 2.8rem;\n                bottom: $playerActionSize;\n                right: 0;\n            }\n        }\n    }\n\n    &.audio {\n        .sound {\n            .volume {\n                height: $playerActionSize;\n                right: $playerActionSize;\n                bottom: 0;\n            }\n        }\n\n        &.stalled {\n            .player {\n                .player-overlay {\n                    [data-control=\"reload\"] {\n                        display: flex;\n                        align-items: center;\n                        background-color: #000;\n                        margin: 0;\n                        flex-wrap: wrap;\n                        padding: 5px 5px 5px 50px;\n                        text-align: left;\n                        line-height: 2.3rem;\n                        &.reload {\n                            width: calc(100% + 2px);\n                            font-size: 20px;\n                            line-height: 20px;\n                            min-height: 36px;\n\n                            .icon {\n                                text-shadow: none;\n                                position: absolute;\n                                left: 0;\n                                font-size: 2rem;\n                                font-weight: bold;\n                            }\n\n                            .message {\n                                text-shadow: none;\n                                font-size: 1.3rem;\n                                margin-right: 5px;\n                            }\n                        }\n                    }\n                }\n            }\n        }\n    }\n\n    &.ready {\n        .controls {\n            visibility: visible;\n        }\n\n        &.paused.canplay {\n            .player-overlay {\n                cursor: pointer;\n                font-family: 'tao' !important;\n                a.action {\n                    span.icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n\n            &.youtube.ended, &:not(.preview) {\n                .player:hover {\n                    [data-control=\"play\"] {\n                        display: none;\n                    }\n                }\n            }\n        }\n\n        &.playing.canpause {\n            .player-overlay {\n                cursor: pointer;\n                .action {\n                    .icon {\n                        font-family: 'tao' !important;\n                    }\n                }\n            }\n\n            &:not(.audio) {\n                .player:hover {\n                    [data-control=\"pause\"] {\n                        display: inline-block;\n                    }\n                }\n            }\n        }\n    }\n\n    &.playing.canpause {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"pause\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.paused.canplay {\n        .action {\n            .icon {\n                font-family: 'tao' !important;\n            }\n        }\n        .controls {\n            [data-control=\"play\"] {\n                display: inline-block;\n            }\n            [data-control=\"pause\"] {\n                display: none;\n            }\n        }\n    }\n\n    &.muted {\n        .controls {\n            [data-control=\"mute\"] {\n                display: none;\n            }\n            [data-control=\"unmute\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    &.nogui {\n        .player {\n            iframe {\n                pointer-events: inherit;\n            }\n        }\n        .player-overlay {\n            display: none !important;\n        }\n        .controls {\n            display: none !important;\n        }\n    }\n\n    &.error:not(.stalled) {\n        .media, .controls {\n            display: none;\n        }\n\n        .error {\n            display: table;\n            text-align: center;\n            width: 100%;\n            height: 100%;\n\n            .message {\n                color: $error;\n                display: table-cell;\n                vertical-align: middle;\n            }\n        }\n    }\n\n    &.loading:not(.stalled)::before {\n        @keyframes spinner {\n            to { transform: rotate(360deg); }\n        }\n\n        content: '';\n        box-sizing: border-box;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        width: 30px;\n        height: 30px;\n        margin-top: -15px;\n        margin-left: -15px;\n        border-radius: 50%;\n        border: 1px solid #ccc;\n        border-top-color: #07d;\n        animation: spinner .6s linear infinite;\n    }\n\n    &.stalled {\n        .video {\n            filter: blur(4px);\n            opacity: 0.4;\n        }\n        .player-overlay {\n            [data-control=\"reload\"] {\n                display: inline-block;\n            }\n        }\n    }\n\n    .transcription {\n        background-color: white;\n        color: black;\n        font-size: 14px;\n        line-height: 1.5;\n        max-height: 60px;\n        margin-bottom: 2px;\n        overflow-y: scroll;\n        &.hidden {\n            display: none;\n        }\n    }\n\n    &.video:not(.preview):not(.error) {\n        .player-overlay {\n            [data-control=\"start\"] {\n                display: inline-block;\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$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"]}