@oat-sa/tao-core-ui 1.60.1 → 1.60.2

package/dist/mediaplayer/css/player.css

@@ -70,6 +70,10 @@ Usage:
     background: transparent none;
 }
 
+.mediaplayer .player .player-overlay a.action span.icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer .player .action {
     position: absolute;
     z-index: 2;
@@ -104,11 +108,13 @@ Usage:
 
 .mediaplayer .player .action.reload:hover .icon {
     opacity: 1;
+    font-family: 'tao' !important;
 }
 
 .mediaplayer .player .action.reload .icon {
     opacity: 0.6;
     background: none;
+    font-family: 'tao' !important;
 }
 
 .mediaplayer .player .action.reload .message {
@@ -159,6 +165,7 @@ Usage:
 
 .mediaplayer .controls .actions .action .icon {
     line-height: 2.2rem;
+    font-family: 'tao' !important;
 }
 
 .mediaplayer .controls .actions .play {
@@ -393,6 +400,11 @@ Usage:
 
 .mediaplayer.ready.paused.canplay .player-overlay {
     cursor: pointer;
+    font-family: 'tao' !important;
+}
+
+.mediaplayer.ready.paused.canplay .player-overlay a.action span.icon {
+    font-family: 'tao' !important;
 }
 
 .mediaplayer.ready.paused.canplay:not(.audio) .player:hover [data-control="play"] {
@@ -407,14 +419,26 @@ Usage:
     cursor: pointer;
 }
 
+.mediaplayer.ready.playing.canpause .player-overlay .action .icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer.ready.playing.canpause:not(.audio) .player:hover [data-control="pause"] {
     display: inline-block;
 }
 
+.mediaplayer.playing.canpause .action .icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer.playing.canpause .controls [data-control="pause"] {
     display: inline-block;
 }
 
+.mediaplayer.paused.canplay .action .icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer.paused.canplay .controls [data-control="play"] {
     display: inline-block;
 }

package/dist/mediaplayer/css/player.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\r\n    @each $icon in $iconList {\r\n        #{$prefix}#{$icon} {\r\n            background-position: $x * 1px $y * 1px;\r\n        }\r\n        @if $direction == 'x' {\r\n            $x: $x - 16;\r\n        } @else {\r\n            $y: $y - 16;\r\n        }\r\n    }\r\n}\r\n\r\n/*\r\nUsage:\r\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\r\n   if 3 colors used then the position of each will be 33,33%\r\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\r\n   first param - color, second - position. Also you can use px or other valid units for set position.\r\n*/\r\n@mixin linear-gradient($colorList, $direction: 'to right') {\r\n    $percentage: 0;\r\n    $units: '%';\r\n    $count: length($colorList);\r\n    $increment: 100 / ($count - 1);\r\n    $css: #{$direction + ', '};\r\n    $sep: ', ';\r\n    @each $colorItem in $colorList {\r\n        $color: $colorItem;\r\n        @if (length($colorItem) > 1) {\r\n            $color: nth($colorItem, 1);\r\n            $percentage: nth($colorItem, 2);\r\n            $units: '';\r\n        }\r\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\r\n            $sep: '';\r\n        }\r\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\r\n        $percentage: $percentage + $increment;\r\n    }\r\n    background: linear-gradient( #{$css} );\r\n}\r\n\r\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\r\n    $gridPx: 840;\r\n    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\r\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\r\n    $spanPercent: widthPerc($spanPx, $gridPx);\r\n    $marginPercent: widthPerc($gutter, $gridPx);\r\n    margin-left: $marginPercent;\r\n    width: $spanPercent;\r\n}\r\n\r\n\r\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\r\n    @if $whatToPrefix == 'property' {\r\n        @each $prefix in $prefixes {\r\n            #{$prefix + $property}: #{$value};\r\n        }\r\n    }\r\n    @else if $whatToPrefix == 'value' {\r\n        @each $prefix in $prefixes {\r\n            #{$property}: #{$prefix + $value};\r\n        }\r\n    }\r\n}\r\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\r\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\r\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\r\n}\r\n\r\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\r\n\r\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\r\n    flex-item-align: stretch;\r\n    -ms-flex-item-align: stretch;\r\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\r\n\r\n    // if both, min width and width are set, width will win this conflict\r\n    @if ($width == auto) {\r\n        @if ($minWidth != 1) {\r\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\r\n        }\r\n        @else {\r\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\r\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\r\n            // for a discussion auto vs. main-size\r\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\r\n        }\r\n    }\r\n    @else {\r\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\r\n    }\r\n}\r\n\r\n\r\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\r\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\r\n}\r\n\r\n@mixin simple-border($color: #ddd) {\r\n    border: 1px solid $color;\r\n    border-radius: 2px;\r\n    -webkit-border-radius: 2px;\r\n}\r\n\r\n@mixin border-radius($radius: 2) {\r\n    -moz-border-radius: $radius * 1px;\r\n    -webkit-border-radius: $radius * 1px;\r\n    border-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom($radius: 2) {\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-left($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-right($radius: 2) {\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-left($radius: 2) {\r\n  -webkit-border-top-left-radius: $radius * 1px;\r\n  -moz-border-radius-topleft: $radius * 1px;\r\n  border-top-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-right($radius: 2) {\r\n  -webkit-border-top-right-radius: $radius * 1px;\r\n  -moz-border-radius-topright: $radius * 1px;\r\n  border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-right($radius: 2) {\r\n  -webkit-border-bottom-right-radius: $radius * 1px;\r\n  -moz-border-radius-bottomright: $radius * 1px;\r\n  border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-left($radius: 2) {\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-box() {\r\n    -moz-box-sizing: border-box;\r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n\r\n@function whiten($color, $white: 0.3) {\r\n    @return mix(#fff, $color, ($white * 100) * 1%);\r\n}\r\n\r\n@function blacken($color, $black: 0.3) {\r\n    @return mix(#000, $color, ($black * 100) * 1%);\r\n}\r\n\r\n@function widthPerc($colWidth, $context) {\r\n    @return ($colWidth * 100 / $context) * 1%\r\n}\r\n\r\n@function remDist($fontSizePx) {\r\n    @return ($fontSizePx / 10) * 1rem\r\n}\r\n\r\n@function black($alpha: 1) {\r\n    @return (rgba(0, 0, 0, $alpha))\r\n}\r\n\r\n@function white($alpha: 1) {\r\n    @return (rgba(255, 255, 255, $alpha))\r\n}\r\n\r\n@mixin font-size($remPx, $important: false) {\r\n    @if $important == true {\r\n        font-size: ($remPx) * 1px !important;\r\n        font-size: ($remPx / 10) * 1rem !important;\r\n    }\r\n    @else {\r\n        font-size: ($remPx) * 1px;\r\n        font-size: ($remPx / 10) * 1rem;\r\n    }\r\n}\r\n\r\n\r\n@mixin keyframes($name) {\r\n    @-o-keyframes #{$name} { @content };\r\n    @-moz-keyframes #{$name} { @content };\r\n    @-webkit-keyframes #{$name} { @content };\r\n    @keyframes #{$name} { @content };\r\n}\r\n\r\n\r\n@mixin animation($value, $type:'') {\r\n    $animation: animation;\r\n    @if $type != '' {\r\n        $animation:  $animation + '-' + $type;\r\n    }\r\n    @include vendor-prefix($animation, $value, property);\r\n}\r\n\r\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\r\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\r\n///\r\n/// @param {property} [$type = all] the CSS property to apply the transition to\r\n/// @param {time} [$duration = .5s] the transition property\r\n/// @param {timing-function} [$effect = ease-out] the transition property\r\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\r\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\r\n}\r\n\r\n@mixin fade($duration: 1s){\r\n\r\n    @include keyframes(fade) {\r\n        0%   {opacity:0;}\r\n        50%   {opacity:1;}\r\n        100% {opacity:0;}\r\n    }\r\n\r\n    @include vendor-prefix(animation, fade 1s forwards, property);\r\n}\r\n\r\n@mixin repeat(){\r\n    @include animation(infinite, iteration-count);\r\n}\r\n\r\n@mixin largeHeading() {\r\n    @include font-size(20);\r\n    font-family: $headingFont;\r\n    font-style: normal;\r\n}\r\n\r\n@mixin disableSelect() {\r\n    @include vendor-prefix(user-select, none, property);\r\n}\r\n\r\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\r\n@mixin visuallyHidden() {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    overflow: hidden;\r\n    clip: rect(1px, 1px, 1px, 1px);\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n","@import \"inc/bootstrap\";\r\n\r\n$playerActionSize: 2.2rem;\r\n$playerActionSpace: 1rem;\r\n$playerBackground: black();\r\n$playerBorder: $darkBar;\r\n$playerText: #999;\r\n$playerIcon: $darkBarIcon;\r\n$playerTextOverlay: white();\r\n$playerSliderBorder: $uiGeneralContentBorder;\r\n$playerSliderBackground: $uiGeneralContentBg;\r\n$playerSliderColor: $darkBar;\r\n$playerSliderHandle: whiten($playerSliderColor, .4);\r\n$playerSliderHightlight: whiten($playerSliderColor, .2);\r\n$controlsHeight: 36px;\r\n\r\n.mediaplayer {\r\n    position: relative;\r\n    @include simple-border($playerBorder);\r\n    @include border-radius(2);\r\n    background: $playerBackground;\r\n    max-width: 100%;\r\n    min-height: $controlsHeight;\r\n    min-width: 200px;\r\n    direction: ltr;\r\n\r\n    &.youtube {\r\n        .player {\r\n            width: 100%;\r\n            height: 0px;\r\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\r\n        }\r\n    }\r\n    .icon-sound:before {\r\n        @include icon-audio();\r\n    }\r\n    .icon-mute:before {\r\n        @include icon-result-nok();\r\n    }\r\n\r\n    .error {\r\n        display: none;\r\n    }\r\n\r\n    .player {\r\n        position: relative;\r\n        height: calc(100% - #{$controlsHeight});\r\n        width: 100%;\r\n\r\n        iframe {\r\n            pointer-events: none;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%\r\n        }\r\n\r\n        .media:not(.youtube) {\r\n            display: block;\r\n            width: 100%;\r\n            height: auto;\r\n            max-height: 100%;\r\n        }\r\n\r\n        .player-overlay {\r\n            position: absolute;\r\n            z-index: 1;\r\n            top: 0;\r\n            left: 0;\r\n            bottom: 0;\r\n            right: 0;\r\n            opacity: 1;\r\n            background: transparent none;\r\n        }\r\n\r\n        .action {\r\n            position: absolute;\r\n            z-index: 2;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%);\r\n            margin-top: -32px;\r\n            text-align: center;\r\n            text-decoration: none;\r\n            display: none;\r\n            @include font-size(64);\r\n            color: $playerTextOverlay;\r\n\r\n            .icon {\r\n                @include border-radius(10);\r\n                padding: 6px 12px;\r\n                background-color: $playerBackground;\r\n                opacity: 0.2;\r\n\r\n                &:hover {\r\n                    opacity: 0.6;\r\n                }\r\n            }\r\n\r\n            &.reload {\r\n                width: 100%;\r\n                font-size: 50px;\r\n                line-height: 30px;\r\n\r\n                &:hover {\r\n                    .icon {\r\n                        opacity: 1;\r\n                    }\r\n                }\r\n\r\n                .icon {\r\n                    opacity: 0.6;\r\n                    background: none;\r\n                }\r\n                .message {\r\n                    font-size: 20px;\r\n                }\r\n\r\n                .icon, .message {\r\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .controls {\r\n        visibility: hidden;\r\n        position: relative;\r\n        padding: 5px;\r\n        display: table;\r\n        table-layout: fixed;\r\n        width: 100%;\r\n        border-top: 1px solid $playerBorder;\r\n        height: $controlsHeight;\r\n\r\n        .bar {\r\n            display: table-row;\r\n        }\r\n        .control {\r\n            display: table-cell;\r\n        }\r\n\r\n        .actions {\r\n            position: relative;\r\n            @include transition(all, 0.1,ease-in-out);\r\n\r\n            .action {\r\n                text-align: center;\r\n                line-height: $playerActionSize;\r\n                width: $playerActionSize;\r\n                height: $playerActionSize;\r\n                text-decoration: none;\r\n                color: $playerIcon;\r\n                @include transition(all, 0.2, ease-in-out);\r\n\r\n                &:hover {\r\n                    opacity: 1;\r\n                }\r\n\r\n                .icon {\r\n                    line-height: $playerActionSize;\r\n                }\r\n            }\r\n\r\n            .play {\r\n                opacity: 0.7;\r\n                border-right: 1px solid $playerBorder;\r\n            }\r\n\r\n            .mute {\r\n                opacity: 0.8;\r\n                border-left: 1px solid $playerBorder;\r\n            }\r\n        }\r\n\r\n        .slider {\r\n            cursor: pointer;\r\n            @include simple-border($playerSliderBorder);\r\n            @include border-radius(10);\r\n            @include transition(all, 0.1, ease-in-out);\r\n            background: $playerSliderBackground;\r\n\r\n            .noUi-background {\r\n                @include border-radius(10);\r\n                background: $playerSliderBackground;\r\n            }\r\n            &.noUi-connect, .noUi-connect {\r\n                @include border-radius(10);\r\n                background: $playerSliderColor;\r\n            }\r\n\r\n            .noUi-handle {\r\n                width: 11px;\r\n                height: 11px;\r\n                @include simple-border($playerSliderBorder);\r\n                @include border-radius(10);\r\n                background: $playerSliderHandle;\r\n            }\r\n            .noUi-handle:hover {\r\n                background: $playerSliderHightlight;\r\n            }\r\n            .noUi-handle:after {\r\n                display: none;\r\n            }\r\n\r\n            &.noUi-horizontal {\r\n                height: 9px;\r\n\r\n                .noUi-handle {\r\n                    top: -2px;\r\n                }\r\n            }\r\n\r\n            &.noUi-vertical {\r\n                width: 9px;\r\n\r\n                .noUi-handle {\r\n                    left: -2px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .infos {\r\n            cursor: default;\r\n\r\n            margin: 0 $playerActionSpace;\r\n            line-height: $playerActionSize;\r\n\r\n            color: $playerText;\r\n            @include font-size(10);\r\n            font-weight: bold;\r\n\r\n            [data-control=\"time-end\"]:before {\r\n                content: ' / ';\r\n            }\r\n        }\r\n\r\n        .timer {\r\n            width: 8rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .seek {\r\n            position: relative;\r\n            height: 1rem;\r\n            margin-top: 5px;\r\n            padding-left: $playerActionSpace;\r\n        }\r\n\r\n        .playback {\r\n            margin-right: $playerActionSpace;\r\n            width: $playerActionSize;\r\n        }\r\n\r\n        .sound {\r\n            width: $playerActionSize;\r\n            height: $playerActionSize;\r\n\r\n            .action {\r\n                position: relative;\r\n                z-index: 1001;\r\n            }\r\n            .volume {\r\n                cursor: default;\r\n                position: absolute;\r\n                z-index: 1000;\r\n                background-color: $playerBackground;\r\n                margin: 1px 2px;\r\n                padding: 10px 0;\r\n                width: 100%;\r\n                height: 0;\r\n                top: 0;\r\n                left: -1px;\r\n                opacity : 0;\r\n                text-align: center;\r\n                border: solid 1px $playerBorder;\r\n                pointer-events: none;\r\n                overflow: hidden;\r\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\r\n\r\n                &.up, &.down {\r\n                    height: 120px;\r\n                    opacity : 1;\r\n                    pointer-events: auto;\r\n                    .slider {\r\n                        display: inline-block;\r\n                        opacity : 1;\r\n                        transition: opacity 50ms linear 200ms;\r\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\r\n                    }\r\n                }\r\n                &.up {\r\n                    top: -127px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n                &.down {\r\n                    top: 30px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n            }\r\n\r\n            .slider {\r\n                opacity : 0;\r\n                display: none;\r\n                .noUi-handle {\r\n                    cursor: pointer;\r\n                    width: 9px;\r\n                    height: 9px;\r\n                }\r\n\r\n                &.noUi-horizontal {\r\n                    width: 50px;\r\n                    height: 7px;\r\n                }\r\n\r\n                &.noUi-vertical {\r\n                    width: 7px;\r\n                    height: 100px;\r\n                }\r\n            }\r\n        }\r\n\r\n        [data-control=\"play\"] {\r\n            display: none;\r\n        }\r\n        [data-control=\"pause\"] {\r\n            display: none;\r\n        }\r\n\r\n        [data-control=\"mute\"] {\r\n            display: inline-block;\r\n        }\r\n        [data-control=\"unmute\"] {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    &.video, &.youtube {\r\n        .sound {\r\n            .volume {\r\n                width: 2.8rem;\r\n                bottom: $playerActionSize;\r\n                right: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.audio {\r\n        .sound {\r\n            .volume {\r\n                height: $playerActionSize;\r\n                right: $playerActionSize;\r\n                bottom: 0;\r\n            }\r\n        }\r\n\r\n        &.stalled {\r\n            .player {\r\n                .player-overlay {\r\n                    [data-control=\"reload\"] {\r\n                        display: flex;\r\n                        align-items: center;\r\n                        background-color: #000;\r\n                        margin: 0;\r\n                        flex-wrap: wrap;\r\n                        padding: 5px 5px 5px 50px;\r\n                        text-align: left;\r\n                        line-height: 2.3rem;\r\n                        &.reload {\r\n                            width: calc(100% + 2px);\r\n                            font-size: 20px;\r\n                            line-height: 20px;\r\n                            min-height: 36px;\r\n\r\n                            .icon {\r\n                                text-shadow: none;\r\n                                position: absolute;\r\n                                left: 0;\r\n                                font-size: 2rem;\r\n                                font-weight: bold;\r\n                            }\r\n\r\n                            .message {\r\n                                text-shadow: none;\r\n                                font-size: 1.3rem;\r\n                                margin-right: 5px;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.ready {\r\n        .controls {\r\n            visibility: visible;\r\n        }\r\n\r\n        &.paused.canplay {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.youtube.ended, &:not(.preview) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &.playing.canpause {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"pause\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.playing.canpause {\r\n        .controls {\r\n            [data-control=\"pause\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.paused.canplay {\r\n        .controls {\r\n            [data-control=\"play\"] {\r\n                display: inline-block;\r\n            }\r\n            [data-control=\"pause\"] {\r\n                display: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.muted {\r\n        .controls {\r\n            [data-control=\"mute\"] {\r\n                display: none;\r\n            }\r\n            [data-control=\"unmute\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.nogui {\r\n        .player {\r\n            iframe {\r\n                pointer-events: inherit;\r\n            }\r\n        }\r\n        .player-overlay {\r\n            display: none !important;\r\n        }\r\n        .controls {\r\n            display: none !important;\r\n        }\r\n    }\r\n\r\n    &.error:not(.stalled) {\r\n        .media, .controls {\r\n            display: none;\r\n        }\r\n\r\n        .error {\r\n            display: table;\r\n            text-align: center;\r\n            width: 100%;\r\n            height: 100%;\r\n\r\n            .message {\r\n                color: $error;\r\n                display: table-cell;\r\n                vertical-align: middle;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.loading:not(.stalled)::before {\r\n        @keyframes spinner {\r\n            to { transform: rotate(360deg); }\r\n        }\r\n\r\n        content: '';\r\n        box-sizing: border-box;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: 30px;\r\n        height: 30px;\r\n        margin-top: -15px;\r\n        margin-left: -15px;\r\n        border-radius: 50%;\r\n        border: 1px solid #ccc;\r\n        border-top-color: #07d;\r\n        animation: spinner .6s linear infinite;\r\n    }\r\n\r\n    &.stalled {\r\n        .video {\r\n            filter: blur(4px);\r\n            opacity: 0.4;\r\n        }\r\n        .player-overlay {\r\n            [data-control=\"reload\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.video:not(.preview):not(.error) {\r\n        .player-overlay {\r\n            [data-control=\"start\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/*# sourceMappingURL=player.css.map */","/* Do not edit */@mixin tao-icon-setup {\r\n  /* use !important to prevent issues with browser extensions that change fonts */\r\n  font-family: 'tao' !important;\r\n  speak: never;\r\n  font-style: normal;\r\n  font-weight: normal;\r\n  font-variant: normal;\r\n  text-transform: none;\r\n  line-height: 1;\r\n\r\n  /* Better Font Rendering =========== */\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n@mixin icon-info-bare { content: \"\\e923\"; }\r\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\r\n@mixin icon-bookmark { content: \"\\e921\"; }\r\n@mixin icon-indicator { content: \"\\e920\"; }\r\n@mixin icon-add-subsection { content: \"\\e918\"; }\r\n@mixin icon-wrap-inline { content: \"\\e915\"; }\r\n@mixin icon-wrap-left { content: \"\\e916\"; }\r\n@mixin icon-wrap-right { content: \"\\e917\"; }\r\n@mixin icon-offline { content: \"\\e913\"; }\r\n@mixin icon-online { content: \"\\e914\"; }\r\n@mixin icon-tab { content: \"\\e90d\"; }\r\n@mixin icon-untab { content: \"\\e90e\"; }\r\n@mixin icon-multi-select { content: \"\\e90b\"; }\r\n@mixin icon-clipboard { content: \"\\e90a\"; }\r\n@mixin icon-filebox { content: \"\\e909\"; }\r\n@mixin icon-click-to-speak { content: \"\\e907\"; }\r\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\r\n@mixin icon-microphone { content: \"\\f130\"; }\r\n@mixin icon-microphone-off { content: \"\\f131\"; }\r\n@mixin icon-disconnect { content: \"\\e905\"; }\r\n@mixin icon-connect { content: \"\\e906\"; }\r\n@mixin icon-eliminate { content: \"\\e904\"; }\r\n@mixin icon-wheelchair { content: \"\\e903\"; }\r\n@mixin icon-text-marker { content: \"\\e902\"; }\r\n@mixin icon-unshield { content: \"\\e32a\"; }\r\n@mixin icon-shield { content: \"\\e8e8\"; }\r\n@mixin icon-tree { content: \"\\e6b4\"; }\r\n@mixin icon-home { content: \"\\e6b3\"; }\r\n@mixin icon-shared-file { content: \"\\e6b2\"; }\r\n@mixin icon-end-attempt { content: \"\\e603\"; }\r\n@mixin icon-icon { content: \"\\f1c5\"; }\r\n@mixin icon-radio-bg { content: \"\\e600\"; }\r\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\r\n@mixin icon-tag { content: \"\\e602\"; }\r\n@mixin icon-style { content: \"\\e604\"; }\r\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\r\n@mixin icon-property-advanced { content: \"\\e606\"; }\r\n@mixin icon-property-add { content: \"\\e607\"; }\r\n@mixin icon-repository-add { content: \"\\e608\"; }\r\n@mixin icon-repository-remove { content: \"\\e609\"; }\r\n@mixin icon-repository { content: \"\\e60a\"; }\r\n@mixin icon-result-server { content: \"\\e60b\"; }\r\n@mixin icon-folder { content: \"\\e60c\"; }\r\n@mixin icon-folder-open { content: \"\\e60d\"; }\r\n@mixin icon-left { content: \"\\e60e\"; }\r\n@mixin icon-right { content: \"\\e60f\"; }\r\n@mixin icon-up { content: \"\\e610\"; }\r\n@mixin icon-down { content: \"\\e611\"; }\r\n@mixin icon-undo { content: \"\\e612\"; }\r\n@mixin icon-redo { content: \"\\e613\"; }\r\n@mixin icon-screen { content: \"\\e614\"; }\r\n@mixin icon-laptop { content: \"\\e615\"; }\r\n@mixin icon-tablet { content: \"\\e616\"; }\r\n@mixin icon-phone { content: \"\\e617\"; }\r\n@mixin icon-move { content: \"\\e618\"; }\r\n@mixin icon-bin { content: \"\\e619\"; }\r\n@mixin icon-shuffle { content: \"\\e61a\"; }\r\n@mixin icon-print { content: \"\\e61b\"; }\r\n@mixin icon-tools { content: \"\\e61c\"; }\r\n@mixin icon-settings { content: \"\\e61d\"; }\r\n@mixin icon-video { content: \"\\e61e\"; }\r\n@mixin icon-find { content: \"\\e61f\"; }\r\n@mixin icon-image { content: \"\\e620\"; }\r\n@mixin icon-edit { content: \"\\e621\"; }\r\n@mixin icon-document { content: \"\\e622\"; }\r\n@mixin icon-resize-grid { content: \"\\e623\"; }\r\n@mixin icon-resize { content: \"\\e624\"; }\r\n@mixin icon-help { content: \"\\e625\"; }\r\n@mixin icon-mobile-menu { content: \"\\e626\"; }\r\n@mixin icon-fix { content: \"\\e627\"; }\r\n@mixin icon-unlock { content: \"\\e628\"; }\r\n@mixin icon-lock { content: \"\\e629\"; }\r\n@mixin icon-ul { content: \"\\e62a\"; }\r\n@mixin icon-ol { content: \"\\e62b\"; }\r\n@mixin icon-email { content: \"\\e62c\"; }\r\n@mixin icon-download { content: \"\\e62d\"; }\r\n@mixin icon-logout { content: \"\\e62e\"; }\r\n@mixin icon-login { content: \"\\e62f\"; }\r\n@mixin icon-spinner { content: \"\\e630\"; }\r\n@mixin icon-preview { content: \"\\e631\"; }\r\n@mixin icon-external { content: \"\\e632\"; }\r\n@mixin icon-time { content: \"\\e633\"; }\r\n@mixin icon-save { content: \"\\e634\"; }\r\n@mixin icon-warning { content: \"\\e635\"; }\r\n@mixin icon-add { content: \"\\e636\"; }\r\n@mixin icon-error { content: \"\\e900\"; }\r\n@mixin icon-close { content: \"\\e637\"; }\r\n@mixin icon-success { content: \"\\e638\"; }\r\n@mixin icon-remove { content: \"\\e639\"; }\r\n@mixin icon-info { content: \"\\e63a\"; }\r\n@mixin icon-danger { content: \"\\e63b\"; }\r\n@mixin icon-users { content: \"\\e63c\"; }\r\n@mixin icon-user { content: \"\\e63d\"; }\r\n@mixin icon-test-taker { content: \"\\e63e\"; }\r\n@mixin icon-test-takers { content: \"\\e63f\"; }\r\n@mixin icon-item { content: \"\\e640\"; }\r\n@mixin icon-test { content: \"\\e641\"; }\r\n@mixin icon-delivery { content: \"\\e642\"; }\r\n@mixin icon-eye-slash { content: \"\\e643\"; }\r\n@mixin icon-result { content: \"\\e644\"; }\r\n@mixin icon-delivery-small { content: \"\\e645\"; }\r\n@mixin icon-upload { content: \"\\e646\"; }\r\n@mixin icon-result-small { content: \"\\e647\"; }\r\n@mixin icon-mobile-preview { content: \"\\e648\"; }\r\n@mixin icon-extension { content: \"\\e649\"; }\r\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\r\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\r\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\r\n@mixin icon-table { content: \"\\e64d\"; }\r\n@mixin icon-anchor { content: \"\\e64e\"; }\r\n@mixin icon-unlink { content: \"\\e64f\"; }\r\n@mixin icon-link { content: \"\\e650\"; }\r\n@mixin icon-right-left { content: \"\\e651\"; }\r\n@mixin icon-left-right { content: \"\\e652\"; }\r\n@mixin icon-special-character { content: \"\\e653\"; }\r\n@mixin icon-source { content: \"\\e654\"; }\r\n@mixin icon-new-page { content: \"\\e655\"; }\r\n@mixin icon-templates { content: \"\\e656\"; }\r\n@mixin icon-cut { content: \"\\e657\"; }\r\n@mixin icon-replace { content: \"\\e658\"; }\r\n@mixin icon-copy { content: \"\\e659\"; }\r\n@mixin icon-paste { content: \"\\e65a\"; }\r\n@mixin icon-select-all { content: \"\\e65b\"; }\r\n@mixin icon-paste-text { content: \"\\e65c\"; }\r\n@mixin icon-paste-word { content: \"\\e65d\"; }\r\n@mixin icon-bold { content: \"\\e65e\"; }\r\n@mixin icon-italic { content: \"\\e65f\"; }\r\n@mixin icon-underline { content: \"\\e660\"; }\r\n@mixin icon-subscript { content: \"\\e661\"; }\r\n@mixin icon-superscript { content: \"\\e662\"; }\r\n@mixin icon-strike-through { content: \"\\e663\"; }\r\n@mixin icon-decrease-indent { content: \"\\e664\"; }\r\n@mixin icon-increase-indent { content: \"\\e665\"; }\r\n@mixin icon-block-quote { content: \"\\e666\"; }\r\n@mixin icon-div-container { content: \"\\e667\"; }\r\n@mixin icon-align-left { content: \"\\e668\"; }\r\n@mixin icon-center { content: \"\\e669\"; }\r\n@mixin icon-align-right { content: \"\\e66a\"; }\r\n@mixin icon-justify { content: \"\\e66b\"; }\r\n@mixin icon-choice { content: \"\\e66c\"; }\r\n@mixin icon-inline-choice { content: \"\\e66d\"; }\r\n@mixin icon-match { content: \"\\e66e\"; }\r\n@mixin icon-associate { content: \"\\e66f\"; }\r\n@mixin icon-media { content: \"\\e670\"; }\r\n@mixin icon-graphic-order { content: \"\\e671\"; }\r\n@mixin icon-hotspot { content: \"\\e672\"; }\r\n@mixin icon-graphic-gap { content: \"\\e673\"; }\r\n@mixin icon-graphic-associate { content: \"\\e674\"; }\r\n@mixin icon-select-point { content: \"\\e675\"; }\r\n@mixin icon-pin { content: \"\\e676\"; }\r\n@mixin icon-import { content: \"\\e677\"; }\r\n@mixin icon-export { content: \"\\e678\"; }\r\n@mixin icon-move-item { content: \"\\e679\"; }\r\n@mixin icon-meta-data { content: \"\\e67a\"; }\r\n@mixin icon-slider { content: \"\\e67b\"; }\r\n@mixin icon-summary-report { content: \"\\e67c\"; }\r\n@mixin icon-text-entry { content: \"\\e67d\"; }\r\n@mixin icon-extended-text { content: \"\\e67e\"; }\r\n@mixin icon-eraser { content: \"\\e67f\"; }\r\n@mixin icon-row { content: \"\\e680\"; }\r\n@mixin icon-column { content: \"\\e681\"; }\r\n@mixin icon-text-color { content: \"\\e682\"; }\r\n@mixin icon-background-color { content: \"\\e683\"; }\r\n@mixin icon-spell-check { content: \"\\e684\"; }\r\n@mixin icon-polygon { content: \"\\e685\"; }\r\n@mixin icon-rectangle { content: \"\\e686\"; }\r\n@mixin icon-gap-match { content: \"\\e687\"; }\r\n@mixin icon-order { content: \"\\e688\"; }\r\n@mixin icon-hottext { content: \"\\e689\"; }\r\n@mixin icon-free-form { content: \"\\e68a\"; }\r\n@mixin icon-step-backward { content: \"\\e68b\"; }\r\n@mixin icon-fast-backward { content: \"\\e68c\"; }\r\n@mixin icon-backward { content: \"\\e68d\"; }\r\n@mixin icon-play { content: \"\\e68e\"; }\r\n@mixin icon-pause { content: \"\\e68f\"; }\r\n@mixin icon-stop { content: \"\\e690\"; }\r\n@mixin icon-forward { content: \"\\e691\"; }\r\n@mixin icon-fast-forward { content: \"\\e692\"; }\r\n@mixin icon-step-forward { content: \"\\e693\"; }\r\n@mixin icon-ellipsis { content: \"\\e694\"; }\r\n@mixin icon-circle { content: \"\\e695\"; }\r\n@mixin icon-target { content: \"\\e696\"; }\r\n@mixin icon-guide-arrow { content: \"\\e697\"; }\r\n@mixin icon-range-slider-right { content: \"\\e698\"; }\r\n@mixin icon-range-slider-left { content: \"\\e699\"; }\r\n@mixin icon-radio-checked { content: \"\\e69a\"; }\r\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\r\n@mixin icon-checkbox { content: \"\\e69b\"; }\r\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\r\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\r\n@mixin icon-result-nok { content: \"\\e69e\"; }\r\n@mixin icon-result-ok { content: \"\\e69f\"; }\r\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\r\n@mixin icon-filter { content: \"\\e6a1\"; }\r\n@mixin icon-translate { content: \"\\e6a2\"; }\r\n@mixin icon-eject { content: \"\\e6a3\"; }\r\n@mixin icon-continue { content: \"\\e6a4\"; }\r\n@mixin icon-radio { content: \"\\e6a5\"; }\r\n@mixin icon-sphere { content: \"\\e6a6\"; }\r\n@mixin icon-reset { content: \"\\e6a7\"; }\r\n@mixin icon-smaller { content: \"\\e6a8\"; }\r\n@mixin icon-larger { content: \"\\e6a9\"; }\r\n@mixin icon-clock { content: \"\\e6aa\"; }\r\n@mixin icon-font { content: \"\\e6ab\"; }\r\n@mixin icon-maths { content: \"\\e6ac\"; }\r\n@mixin icon-grip { content: \"\\e6ad\"; }\r\n@mixin icon-rubric { content: \"\\e6ae\"; }\r\n@mixin icon-audio { content: \"\\e6af\"; }\r\n@mixin icon-grip-h { content: \"\\e6b0\"; }\r\n@mixin icon-magicwand { content: \"\\e6b1\"; }\r\n@mixin icon-loop { content: \"\\ea2e\"; }\r\n@mixin icon-calendar { content: \"\\e953\"; }\r\n@mixin icon-reload { content: \"\\e984\"; }\r\n@mixin icon-speed { content: \"\\e9a6\"; }\r\n@mixin icon-volume { content: \"\\ea27\"; }\r\n@mixin icon-contrast { content: \"\\e9d5\"; }\r\n@mixin icon-headphones { content: \"\\e910\"; }\r\n@mixin icon-compress { content: \"\\f066\"; }\r\n@mixin icon-map-o { content: \"\\f278\"; }\r\n@mixin icon-variable { content: \"\\e908\"; }\r\n@mixin icon-tooltip { content: \"\\e90c\"; }\r\n@mixin icon-globe { content: \"\\e9c9\"; }\r\n@mixin icon-highlighter { content: \"\\e90f\"; }\r\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\r\n@mixin icon-play-from-here { content: \"\\e912\"; }\r\n","// buttons and alerts\r\n$success: rgb(14, 145, 75);\r\n$info: rgb(14, 93, 145);\r\n$warning: rgb(216, 174, 91);\r\n$danger: rgb(201, 96, 67);\r\n$error: rgb(186, 18, 43);\r\n$activeInteraction: rgb(195, 90, 19);\r\n\r\n// corporate identity\r\n$logoRed: rgb(186, 18, 43);\r\n$grey: rgb(173, 161, 148);\r\n$darkBlueGrey: rgb(164, 187, 197);\r\n$mediumBlueGrey: rgb(193, 212, 220);\r\n$lightBlueGrey: rgb(228, 236, 239);\r\n$brownRedGrey: rgb(154, 137, 123);\r\n$darkBrown: rgb(111, 99, 89);\r\n$websiteBorder: rgb(141, 148, 158);\r\n\r\n// ui elements, these should only variations of the above\r\n// naming convention: jQueryUi theme roller -> camelCase\r\n\r\n$textColor: #222;\r\n$textHighlight: white;\r\n\r\n$uiGeneralContentBg: white();\r\n$uiGeneralContentBorder: #ddd;\r\n\r\n$uiHeaderBg: #d4d5d7;\r\n\r\n$uiClickableDefaultBg: #f3f1ef;\r\n$uiClickableHoverBg: whiten($info, 0.2);\r\n//$uiClickableActiveBg: $uiHeaderBg;\r\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\r\n//$uiClickableActiveBg: #aaa;\r\n\r\n$uiSelectableSelectedBg: whiten($info, 0.2);\r\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\r\n$uiSelectableHoverBg: whiten($info, 0.9);\r\n\r\n$uiOverlay: $lightBlueGrey;\r\n\r\n// new layout. Implemented now only for review panel\r\n$uiReviewPanelBg: #f2f2f2;\r\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\r\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\r\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\r\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\r\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\r\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\r\n\r\n// sidebars etc.\r\n$canvas: mix(#fff, $grey, 85%);\r\n\r\n// colors taken from feedback.scss\r\n$successBgColor: whiten($success, 0.8);\r\n$successBorderColor: whiten($success, 0.1);\r\n\r\n$infoBgColor: whiten($info, 0.8);\r\n$infoBorderColor: whiten($info, 0.1);\r\n\r\n$warningBgColor: whiten($warning, 0.8);\r\n$warningBorderColor: whiten($warning, 0.1);\r\n\r\n$dangerBgColor: whiten($danger, 0.8);\r\n$dangerBorderColor: whiten($danger, 0.1);\r\n\r\n$errorBgColor: whiten($error, 0.8);\r\n$errorBorderColor: whiten($error, 0.1);\r\n\r\n$darkBar: rgb(51, 51, 51);\r\n$darkBarTxt: rgb(230, 230, 230);\r\n$darkBarIcon: rgb(220, 220, 220);\r\n\r\n$actionLinkColor: #276d9b;\r\n$actionLinkHoverColor: #4f83a7;\r\n\r\n$colorWheel-01: #c3ba13;\r\n$colorWheel-02: #84a610;\r\n$colorWheel-03: #2b8e0e;\r\n$colorWheel-04: #0f9787;\r\n$colorWheel-05: #0e5d91;\r\n$colorWheel-06: #0d2689;\r\n$colorWheel-07: #400d83;\r\n$colorWheel-08: #960e7d;\r\n$colorWheel-09: #ba122b;\r\n$colorWheel-10: #c34713;\r\n$colorWheel-11: #c36f13;\r\n$colorWheel-12: #c39413;\r\n"]}
+{"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\r\n    @each $icon in $iconList {\r\n        #{$prefix}#{$icon} {\r\n            background-position: $x * 1px $y * 1px;\r\n        }\r\n        @if $direction == 'x' {\r\n            $x: $x - 16;\r\n        } @else {\r\n            $y: $y - 16;\r\n        }\r\n    }\r\n}\r\n\r\n/*\r\nUsage:\r\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\r\n   if 3 colors used then the position of each will be 33,33%\r\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\r\n   first param - color, second - position. Also you can use px or other valid units for set position.\r\n*/\r\n@mixin linear-gradient($colorList, $direction: 'to right') {\r\n    $percentage: 0;\r\n    $units: '%';\r\n    $count: length($colorList);\r\n    $increment: 100 / ($count - 1);\r\n    $css: #{$direction + ', '};\r\n    $sep: ', ';\r\n    @each $colorItem in $colorList {\r\n        $color: $colorItem;\r\n        @if (length($colorItem) > 1) {\r\n            $color: nth($colorItem, 1);\r\n            $percentage: nth($colorItem, 2);\r\n            $units: '';\r\n        }\r\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\r\n            $sep: '';\r\n        }\r\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\r\n        $percentage: $percentage + $increment;\r\n    }\r\n    background: linear-gradient( #{$css} );\r\n}\r\n\r\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\r\n    $gridPx: 840;\r\n    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\r\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\r\n    $spanPercent: widthPerc($spanPx, $gridPx);\r\n    $marginPercent: widthPerc($gutter, $gridPx);\r\n    margin-left: $marginPercent;\r\n    width: $spanPercent;\r\n}\r\n\r\n\r\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\r\n    @if $whatToPrefix == 'property' {\r\n        @each $prefix in $prefixes {\r\n            #{$prefix + $property}: #{$value};\r\n        }\r\n    }\r\n    @else if $whatToPrefix == 'value' {\r\n        @each $prefix in $prefixes {\r\n            #{$property}: #{$prefix + $value};\r\n        }\r\n    }\r\n}\r\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\r\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\r\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\r\n}\r\n\r\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\r\n\r\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\r\n    flex-item-align: stretch;\r\n    -ms-flex-item-align: stretch;\r\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\r\n\r\n    // if both, min width and width are set, width will win this conflict\r\n    @if ($width == auto) {\r\n        @if ($minWidth != 1) {\r\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\r\n        }\r\n        @else {\r\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\r\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\r\n            // for a discussion auto vs. main-size\r\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\r\n        }\r\n    }\r\n    @else {\r\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\r\n    }\r\n}\r\n\r\n\r\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\r\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\r\n}\r\n\r\n@mixin simple-border($color: #ddd) {\r\n    border: 1px solid $color;\r\n    border-radius: 2px;\r\n    -webkit-border-radius: 2px;\r\n}\r\n\r\n@mixin border-radius($radius: 2) {\r\n    -moz-border-radius: $radius * 1px;\r\n    -webkit-border-radius: $radius * 1px;\r\n    border-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom($radius: 2) {\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-left($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-right($radius: 2) {\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-left($radius: 2) {\r\n  -webkit-border-top-left-radius: $radius * 1px;\r\n  -moz-border-radius-topleft: $radius * 1px;\r\n  border-top-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-right($radius: 2) {\r\n  -webkit-border-top-right-radius: $radius * 1px;\r\n  -moz-border-radius-topright: $radius * 1px;\r\n  border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-right($radius: 2) {\r\n  -webkit-border-bottom-right-radius: $radius * 1px;\r\n  -moz-border-radius-bottomright: $radius * 1px;\r\n  border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-left($radius: 2) {\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-box() {\r\n    -moz-box-sizing: border-box;\r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n\r\n@function whiten($color, $white: 0.3) {\r\n    @return mix(#fff, $color, ($white * 100) * 1%);\r\n}\r\n\r\n@function blacken($color, $black: 0.3) {\r\n    @return mix(#000, $color, ($black * 100) * 1%);\r\n}\r\n\r\n@function widthPerc($colWidth, $context) {\r\n    @return ($colWidth * 100 / $context) * 1%\r\n}\r\n\r\n@function remDist($fontSizePx) {\r\n    @return ($fontSizePx / 10) * 1rem\r\n}\r\n\r\n@function black($alpha: 1) {\r\n    @return (rgba(0, 0, 0, $alpha))\r\n}\r\n\r\n@function white($alpha: 1) {\r\n    @return (rgba(255, 255, 255, $alpha))\r\n}\r\n\r\n@mixin font-size($remPx, $important: false) {\r\n    @if $important == true {\r\n        font-size: ($remPx) * 1px !important;\r\n        font-size: ($remPx / 10) * 1rem !important;\r\n    }\r\n    @else {\r\n        font-size: ($remPx) * 1px;\r\n        font-size: ($remPx / 10) * 1rem;\r\n    }\r\n}\r\n\r\n\r\n@mixin keyframes($name) {\r\n    @-o-keyframes #{$name} { @content };\r\n    @-moz-keyframes #{$name} { @content };\r\n    @-webkit-keyframes #{$name} { @content };\r\n    @keyframes #{$name} { @content };\r\n}\r\n\r\n\r\n@mixin animation($value, $type:'') {\r\n    $animation: animation;\r\n    @if $type != '' {\r\n        $animation:  $animation + '-' + $type;\r\n    }\r\n    @include vendor-prefix($animation, $value, property);\r\n}\r\n\r\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\r\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\r\n///\r\n/// @param {property} [$type = all] the CSS property to apply the transition to\r\n/// @param {time} [$duration = .5s] the transition property\r\n/// @param {timing-function} [$effect = ease-out] the transition property\r\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\r\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\r\n}\r\n\r\n@mixin fade($duration: 1s){\r\n\r\n    @include keyframes(fade) {\r\n        0%   {opacity:0;}\r\n        50%   {opacity:1;}\r\n        100% {opacity:0;}\r\n    }\r\n\r\n    @include vendor-prefix(animation, fade 1s forwards, property);\r\n}\r\n\r\n@mixin repeat(){\r\n    @include animation(infinite, iteration-count);\r\n}\r\n\r\n@mixin largeHeading() {\r\n    @include font-size(20);\r\n    font-family: $headingFont;\r\n    font-style: normal;\r\n}\r\n\r\n@mixin disableSelect() {\r\n    @include vendor-prefix(user-select, none, property);\r\n}\r\n\r\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\r\n@mixin visuallyHidden() {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    overflow: hidden;\r\n    clip: rect(1px, 1px, 1px, 1px);\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n","@import \"inc/bootstrap\";\r\n\r\n$playerActionSize: 2.2rem;\r\n$playerActionSpace: 1rem;\r\n$playerBackground: black();\r\n$playerBorder: $darkBar;\r\n$playerText: #999;\r\n$playerIcon: $darkBarIcon;\r\n$playerTextOverlay: white();\r\n$playerSliderBorder: $uiGeneralContentBorder;\r\n$playerSliderBackground: $uiGeneralContentBg;\r\n$playerSliderColor: $darkBar;\r\n$playerSliderHandle: whiten($playerSliderColor, .4);\r\n$playerSliderHightlight: whiten($playerSliderColor, .2);\r\n$controlsHeight: 36px;\r\n\r\n.mediaplayer {\r\n    position: relative;\r\n    @include simple-border($playerBorder);\r\n    @include border-radius(2);\r\n    background: $playerBackground;\r\n    max-width: 100%;\r\n    min-height: $controlsHeight;\r\n    min-width: 200px;\r\n    direction: ltr;\r\n\r\n    &.youtube {\r\n        .player {\r\n            width: 100%;\r\n            height: 0px;\r\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\r\n        }\r\n    }\r\n    .icon-sound:before {\r\n        @include icon-audio();\r\n    }\r\n    .icon-mute:before {\r\n        @include icon-result-nok();\r\n    }\r\n\r\n    .error {\r\n        display: none;\r\n    }\r\n\r\n    .player {\r\n        position: relative;\r\n        height: calc(100% - #{$controlsHeight});\r\n        width: 100%;\r\n\r\n        iframe {\r\n            pointer-events: none;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%\r\n        }\r\n\r\n        .media:not(.youtube) {\r\n            display: block;\r\n            width: 100%;\r\n            height: auto;\r\n            max-height: 100%;\r\n        }\r\n\r\n        .player-overlay {\r\n            position: absolute;\r\n            z-index: 1;\r\n            top: 0;\r\n            left: 0;\r\n            bottom: 0;\r\n            right: 0;\r\n            opacity: 1;\r\n            background: transparent none;\r\n            a.action {\r\n                 span.icon {\r\n                    font-family: 'tao' !important;\r\n                }\r\n            }\r\n        }\r\n\r\n        .action {\r\n            position: absolute;\r\n            z-index: 2;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%);\r\n            margin-top: -32px;\r\n            text-align: center;\r\n            text-decoration: none;\r\n            display: none;\r\n            @include font-size(64);\r\n            color: $playerTextOverlay;\r\n\r\n            .icon {\r\n                @include border-radius(10);\r\n                padding: 6px 12px;\r\n                background-color: $playerBackground;\r\n                opacity: 0.2;\r\n\r\n                &:hover {\r\n                    opacity: 0.6;\r\n                }\r\n            }\r\n\r\n            &.reload {\r\n                width: 100%;\r\n                font-size: 50px;\r\n                line-height: 30px;\r\n\r\n                &:hover {\r\n                    .icon {\r\n                        opacity: 1;\r\n                        font-family: 'tao' !important;\r\n                    }\r\n                }\r\n\r\n                .icon {\r\n                    opacity: 0.6;\r\n                    background: none;\r\n                    font-family: 'tao' !important;\r\n                }\r\n                .message {\r\n                    font-size: 20px;\r\n                }\r\n\r\n                .icon, .message {\r\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .controls {\r\n        visibility: hidden;\r\n        position: relative;\r\n        padding: 5px;\r\n        display: table;\r\n        table-layout: fixed;\r\n        width: 100%;\r\n        border-top: 1px solid $playerBorder;\r\n        height: $controlsHeight;\r\n\r\n        .bar {\r\n            display: table-row;\r\n        }\r\n        .control {\r\n            display: table-cell;\r\n        }\r\n\r\n        .actions {\r\n            position: relative;\r\n            @include transition(all, 0.1,ease-in-out);\r\n\r\n            .action {\r\n                text-align: center;\r\n                line-height: $playerActionSize;\r\n                width: $playerActionSize;\r\n                height: $playerActionSize;\r\n                text-decoration: none;\r\n                color: $playerIcon;\r\n                @include transition(all, 0.2, ease-in-out);\r\n\r\n                &:hover {\r\n                    opacity: 1;\r\n                }\r\n\r\n                .icon {\r\n                    line-height: $playerActionSize;\r\n                    font-family: 'tao' !important;\r\n                }\r\n            }\r\n\r\n            .play {\r\n                opacity: 0.7;\r\n                border-right: 1px solid $playerBorder;\r\n            }\r\n\r\n            .mute {\r\n                opacity: 0.8;\r\n                border-left: 1px solid $playerBorder;\r\n            }\r\n        }\r\n\r\n        .slider {\r\n            cursor: pointer;\r\n            @include simple-border($playerSliderBorder);\r\n            @include border-radius(10);\r\n            @include transition(all, 0.1, ease-in-out);\r\n            background: $playerSliderBackground;\r\n\r\n            .noUi-background {\r\n                @include border-radius(10);\r\n                background: $playerSliderBackground;\r\n            }\r\n            &.noUi-connect, .noUi-connect {\r\n                @include border-radius(10);\r\n                background: $playerSliderColor;\r\n            }\r\n\r\n            .noUi-handle {\r\n                width: 11px;\r\n                height: 11px;\r\n                @include simple-border($playerSliderBorder);\r\n                @include border-radius(10);\r\n                background: $playerSliderHandle;\r\n            }\r\n            .noUi-handle:hover {\r\n                background: $playerSliderHightlight;\r\n            }\r\n            .noUi-handle:after {\r\n                display: none;\r\n            }\r\n\r\n            &.noUi-horizontal {\r\n                height: 9px;\r\n\r\n                .noUi-handle {\r\n                    top: -2px;\r\n                }\r\n            }\r\n\r\n            &.noUi-vertical {\r\n                width: 9px;\r\n\r\n                .noUi-handle {\r\n                    left: -2px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .infos {\r\n            cursor: default;\r\n\r\n            margin: 0 $playerActionSpace;\r\n            line-height: $playerActionSize;\r\n\r\n            color: $playerText;\r\n            @include font-size(10);\r\n            font-weight: bold;\r\n\r\n            [data-control=\"time-end\"]:before {\r\n                content: ' / ';\r\n            }\r\n        }\r\n\r\n        .timer {\r\n            width: 8rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .seek {\r\n            position: relative;\r\n            height: 1rem;\r\n            margin-top: 5px;\r\n            padding-left: $playerActionSpace;\r\n        }\r\n\r\n        .playback {\r\n            margin-right: $playerActionSpace;\r\n            width: $playerActionSize;\r\n        }\r\n\r\n        .sound {\r\n            width: $playerActionSize;\r\n            height: $playerActionSize;\r\n\r\n            .action {\r\n                position: relative;\r\n                z-index: 1001;\r\n            }\r\n            .volume {\r\n                cursor: default;\r\n                position: absolute;\r\n                z-index: 1000;\r\n                background-color: $playerBackground;\r\n                margin: 1px 2px;\r\n                padding: 10px 0;\r\n                width: 100%;\r\n                height: 0;\r\n                top: 0;\r\n                left: -1px;\r\n                opacity : 0;\r\n                text-align: center;\r\n                border: solid 1px $playerBorder;\r\n                pointer-events: none;\r\n                overflow: hidden;\r\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\r\n\r\n                &.up, &.down {\r\n                    height: 120px;\r\n                    opacity : 1;\r\n                    pointer-events: auto;\r\n                    .slider {\r\n                        display: inline-block;\r\n                        opacity : 1;\r\n                        transition: opacity 50ms linear 200ms;\r\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\r\n                    }\r\n                }\r\n                &.up {\r\n                    top: -127px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n                &.down {\r\n                    top: 30px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n            }\r\n\r\n            .slider {\r\n                opacity : 0;\r\n                display: none;\r\n                .noUi-handle {\r\n                    cursor: pointer;\r\n                    width: 9px;\r\n                    height: 9px;\r\n                }\r\n\r\n                &.noUi-horizontal {\r\n                    width: 50px;\r\n                    height: 7px;\r\n                }\r\n\r\n                &.noUi-vertical {\r\n                    width: 7px;\r\n                    height: 100px;\r\n                }\r\n            }\r\n        }\r\n\r\n        [data-control=\"play\"] {\r\n            display: none;\r\n        }\r\n        [data-control=\"pause\"] {\r\n            display: none;\r\n        }\r\n\r\n        [data-control=\"mute\"] {\r\n            display: inline-block;\r\n        }\r\n        [data-control=\"unmute\"] {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    &.video, &.youtube {\r\n        .sound {\r\n            .volume {\r\n                width: 2.8rem;\r\n                bottom: $playerActionSize;\r\n                right: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.audio {\r\n        .sound {\r\n            .volume {\r\n                height: $playerActionSize;\r\n                right: $playerActionSize;\r\n                bottom: 0;\r\n            }\r\n        }\r\n\r\n        &.stalled {\r\n            .player {\r\n                .player-overlay {\r\n                    [data-control=\"reload\"] {\r\n                        display: flex;\r\n                        align-items: center;\r\n                        background-color: #000;\r\n                        margin: 0;\r\n                        flex-wrap: wrap;\r\n                        padding: 5px 5px 5px 50px;\r\n                        text-align: left;\r\n                        line-height: 2.3rem;\r\n                        &.reload {\r\n                            width: calc(100% + 2px);\r\n                            font-size: 20px;\r\n                            line-height: 20px;\r\n                            min-height: 36px;\r\n\r\n                            .icon {\r\n                                text-shadow: none;\r\n                                position: absolute;\r\n                                left: 0;\r\n                                font-size: 2rem;\r\n                                font-weight: bold;\r\n                            }\r\n\r\n                            .message {\r\n                                text-shadow: none;\r\n                                font-size: 1.3rem;\r\n                                margin-right: 5px;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.ready {\r\n        .controls {\r\n            visibility: visible;\r\n        }\r\n\r\n        &.paused.canplay {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n                font-family: 'tao' !important;\r\n                a.action {\r\n                    span.icon {\r\n                        font-family: 'tao' !important;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.youtube.ended, &:not(.preview) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &.playing.canpause {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n                .action {\r\n                    .icon {\r\n                        font-family: 'tao' !important;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"pause\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.playing.canpause {\r\n        .action {\r\n            .icon {\r\n                font-family: 'tao' !important;\r\n            }\r\n        }\r\n        .controls {\r\n            [data-control=\"pause\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.paused.canplay {\r\n        .action {\r\n            .icon {\r\n                font-family: 'tao' !important;\r\n            }\r\n        }\r\n        .controls {\r\n            [data-control=\"play\"] {\r\n                display: inline-block;\r\n            }\r\n            [data-control=\"pause\"] {\r\n                display: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.muted {\r\n        .controls {\r\n            [data-control=\"mute\"] {\r\n                display: none;\r\n            }\r\n            [data-control=\"unmute\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.nogui {\r\n        .player {\r\n            iframe {\r\n                pointer-events: inherit;\r\n            }\r\n        }\r\n        .player-overlay {\r\n            display: none !important;\r\n        }\r\n        .controls {\r\n            display: none !important;\r\n        }\r\n    }\r\n\r\n    &.error:not(.stalled) {\r\n        .media, .controls {\r\n            display: none;\r\n        }\r\n\r\n        .error {\r\n            display: table;\r\n            text-align: center;\r\n            width: 100%;\r\n            height: 100%;\r\n\r\n            .message {\r\n                color: $error;\r\n                display: table-cell;\r\n                vertical-align: middle;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.loading:not(.stalled)::before {\r\n        @keyframes spinner {\r\n            to { transform: rotate(360deg); }\r\n        }\r\n\r\n        content: '';\r\n        box-sizing: border-box;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: 30px;\r\n        height: 30px;\r\n        margin-top: -15px;\r\n        margin-left: -15px;\r\n        border-radius: 50%;\r\n        border: 1px solid #ccc;\r\n        border-top-color: #07d;\r\n        animation: spinner .6s linear infinite;\r\n    }\r\n\r\n    &.stalled {\r\n        .video {\r\n            filter: blur(4px);\r\n            opacity: 0.4;\r\n        }\r\n        .player-overlay {\r\n            [data-control=\"reload\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.video:not(.preview):not(.error) {\r\n        .player-overlay {\r\n            [data-control=\"start\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/*# sourceMappingURL=player.css.map */","/* Do not edit */@mixin tao-icon-setup {\r\n  /* use !important to prevent issues with browser extensions that change fonts */\r\n  font-family: 'tao' !important;\r\n  speak: never;\r\n  font-style: normal;\r\n  font-weight: normal;\r\n  font-variant: normal;\r\n  text-transform: none;\r\n  line-height: 1;\r\n\r\n  /* Better Font Rendering =========== */\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n@mixin icon-info-bare { content: \"\\e923\"; }\r\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\r\n@mixin icon-bookmark { content: \"\\e921\"; }\r\n@mixin icon-indicator { content: \"\\e920\"; }\r\n@mixin icon-add-subsection { content: \"\\e918\"; }\r\n@mixin icon-wrap-inline { content: \"\\e915\"; }\r\n@mixin icon-wrap-left { content: \"\\e916\"; }\r\n@mixin icon-wrap-right { content: \"\\e917\"; }\r\n@mixin icon-offline { content: \"\\e913\"; }\r\n@mixin icon-online { content: \"\\e914\"; }\r\n@mixin icon-tab { content: \"\\e90d\"; }\r\n@mixin icon-untab { content: \"\\e90e\"; }\r\n@mixin icon-multi-select { content: \"\\e90b\"; }\r\n@mixin icon-clipboard { content: \"\\e90a\"; }\r\n@mixin icon-filebox { content: \"\\e909\"; }\r\n@mixin icon-click-to-speak { content: \"\\e907\"; }\r\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\r\n@mixin icon-microphone { content: \"\\f130\"; }\r\n@mixin icon-microphone-off { content: \"\\f131\"; }\r\n@mixin icon-disconnect { content: \"\\e905\"; }\r\n@mixin icon-connect { content: \"\\e906\"; }\r\n@mixin icon-eliminate { content: \"\\e904\"; }\r\n@mixin icon-wheelchair { content: \"\\e903\"; }\r\n@mixin icon-text-marker { content: \"\\e902\"; }\r\n@mixin icon-unshield { content: \"\\e32a\"; }\r\n@mixin icon-shield { content: \"\\e8e8\"; }\r\n@mixin icon-tree { content: \"\\e6b4\"; }\r\n@mixin icon-home { content: \"\\e6b3\"; }\r\n@mixin icon-shared-file { content: \"\\e6b2\"; }\r\n@mixin icon-end-attempt { content: \"\\e603\"; }\r\n@mixin icon-icon { content: \"\\f1c5\"; }\r\n@mixin icon-radio-bg { content: \"\\e600\"; }\r\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\r\n@mixin icon-tag { content: \"\\e602\"; }\r\n@mixin icon-style { content: \"\\e604\"; }\r\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\r\n@mixin icon-property-advanced { content: \"\\e606\"; }\r\n@mixin icon-property-add { content: \"\\e607\"; }\r\n@mixin icon-repository-add { content: \"\\e608\"; }\r\n@mixin icon-repository-remove { content: \"\\e609\"; }\r\n@mixin icon-repository { content: \"\\e60a\"; }\r\n@mixin icon-result-server { content: \"\\e60b\"; }\r\n@mixin icon-folder { content: \"\\e60c\"; }\r\n@mixin icon-folder-open { content: \"\\e60d\"; }\r\n@mixin icon-left { content: \"\\e60e\"; }\r\n@mixin icon-right { content: \"\\e60f\"; }\r\n@mixin icon-up { content: \"\\e610\"; }\r\n@mixin icon-down { content: \"\\e611\"; }\r\n@mixin icon-undo { content: \"\\e612\"; }\r\n@mixin icon-redo { content: \"\\e613\"; }\r\n@mixin icon-screen { content: \"\\e614\"; }\r\n@mixin icon-laptop { content: \"\\e615\"; }\r\n@mixin icon-tablet { content: \"\\e616\"; }\r\n@mixin icon-phone { content: \"\\e617\"; }\r\n@mixin icon-move { content: \"\\e618\"; }\r\n@mixin icon-bin { content: \"\\e619\"; }\r\n@mixin icon-shuffle { content: \"\\e61a\"; }\r\n@mixin icon-print { content: \"\\e61b\"; }\r\n@mixin icon-tools { content: \"\\e61c\"; }\r\n@mixin icon-settings { content: \"\\e61d\"; }\r\n@mixin icon-video { content: \"\\e61e\"; }\r\n@mixin icon-find { content: \"\\e61f\"; }\r\n@mixin icon-image { content: \"\\e620\"; }\r\n@mixin icon-edit { content: \"\\e621\"; }\r\n@mixin icon-document { content: \"\\e622\"; }\r\n@mixin icon-resize-grid { content: \"\\e623\"; }\r\n@mixin icon-resize { content: \"\\e624\"; }\r\n@mixin icon-help { content: \"\\e625\"; }\r\n@mixin icon-mobile-menu { content: \"\\e626\"; }\r\n@mixin icon-fix { content: \"\\e627\"; }\r\n@mixin icon-unlock { content: \"\\e628\"; }\r\n@mixin icon-lock { content: \"\\e629\"; }\r\n@mixin icon-ul { content: \"\\e62a\"; }\r\n@mixin icon-ol { content: \"\\e62b\"; }\r\n@mixin icon-email { content: \"\\e62c\"; }\r\n@mixin icon-download { content: \"\\e62d\"; }\r\n@mixin icon-logout { content: \"\\e62e\"; }\r\n@mixin icon-login { content: \"\\e62f\"; }\r\n@mixin icon-spinner { content: \"\\e630\"; }\r\n@mixin icon-preview { content: \"\\e631\"; }\r\n@mixin icon-external { content: \"\\e632\"; }\r\n@mixin icon-time { content: \"\\e633\"; }\r\n@mixin icon-save { content: \"\\e634\"; }\r\n@mixin icon-warning { content: \"\\e635\"; }\r\n@mixin icon-add { content: \"\\e636\"; }\r\n@mixin icon-error { content: \"\\e900\"; }\r\n@mixin icon-close { content: \"\\e637\"; }\r\n@mixin icon-success { content: \"\\e638\"; }\r\n@mixin icon-remove { content: \"\\e639\"; }\r\n@mixin icon-info { content: \"\\e63a\"; }\r\n@mixin icon-danger { content: \"\\e63b\"; }\r\n@mixin icon-users { content: \"\\e63c\"; }\r\n@mixin icon-user { content: \"\\e63d\"; }\r\n@mixin icon-test-taker { content: \"\\e63e\"; }\r\n@mixin icon-test-takers { content: \"\\e63f\"; }\r\n@mixin icon-item { content: \"\\e640\"; }\r\n@mixin icon-test { content: \"\\e641\"; }\r\n@mixin icon-delivery { content: \"\\e642\"; }\r\n@mixin icon-eye-slash { content: \"\\e643\"; }\r\n@mixin icon-result { content: \"\\e644\"; }\r\n@mixin icon-delivery-small { content: \"\\e645\"; }\r\n@mixin icon-upload { content: \"\\e646\"; }\r\n@mixin icon-result-small { content: \"\\e647\"; }\r\n@mixin icon-mobile-preview { content: \"\\e648\"; }\r\n@mixin icon-extension { content: \"\\e649\"; }\r\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\r\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\r\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\r\n@mixin icon-table { content: \"\\e64d\"; }\r\n@mixin icon-anchor { content: \"\\e64e\"; }\r\n@mixin icon-unlink { content: \"\\e64f\"; }\r\n@mixin icon-link { content: \"\\e650\"; }\r\n@mixin icon-right-left { content: \"\\e651\"; }\r\n@mixin icon-left-right { content: \"\\e652\"; }\r\n@mixin icon-special-character { content: \"\\e653\"; }\r\n@mixin icon-source { content: \"\\e654\"; }\r\n@mixin icon-new-page { content: \"\\e655\"; }\r\n@mixin icon-templates { content: \"\\e656\"; }\r\n@mixin icon-cut { content: \"\\e657\"; }\r\n@mixin icon-replace { content: \"\\e658\"; }\r\n@mixin icon-copy { content: \"\\e659\"; }\r\n@mixin icon-paste { content: \"\\e65a\"; }\r\n@mixin icon-select-all { content: \"\\e65b\"; }\r\n@mixin icon-paste-text { content: \"\\e65c\"; }\r\n@mixin icon-paste-word { content: \"\\e65d\"; }\r\n@mixin icon-bold { content: \"\\e65e\"; }\r\n@mixin icon-italic { content: \"\\e65f\"; }\r\n@mixin icon-underline { content: \"\\e660\"; }\r\n@mixin icon-subscript { content: \"\\e661\"; }\r\n@mixin icon-superscript { content: \"\\e662\"; }\r\n@mixin icon-strike-through { content: \"\\e663\"; }\r\n@mixin icon-decrease-indent { content: \"\\e664\"; }\r\n@mixin icon-increase-indent { content: \"\\e665\"; }\r\n@mixin icon-block-quote { content: \"\\e666\"; }\r\n@mixin icon-div-container { content: \"\\e667\"; }\r\n@mixin icon-align-left { content: \"\\e668\"; }\r\n@mixin icon-center { content: \"\\e669\"; }\r\n@mixin icon-align-right { content: \"\\e66a\"; }\r\n@mixin icon-justify { content: \"\\e66b\"; }\r\n@mixin icon-choice { content: \"\\e66c\"; }\r\n@mixin icon-inline-choice { content: \"\\e66d\"; }\r\n@mixin icon-match { content: \"\\e66e\"; }\r\n@mixin icon-associate { content: \"\\e66f\"; }\r\n@mixin icon-media { content: \"\\e670\"; }\r\n@mixin icon-graphic-order { content: \"\\e671\"; }\r\n@mixin icon-hotspot { content: \"\\e672\"; }\r\n@mixin icon-graphic-gap { content: \"\\e673\"; }\r\n@mixin icon-graphic-associate { content: \"\\e674\"; }\r\n@mixin icon-select-point { content: \"\\e675\"; }\r\n@mixin icon-pin { content: \"\\e676\"; }\r\n@mixin icon-import { content: \"\\e677\"; }\r\n@mixin icon-export { content: \"\\e678\"; }\r\n@mixin icon-move-item { content: \"\\e679\"; }\r\n@mixin icon-meta-data { content: \"\\e67a\"; }\r\n@mixin icon-slider { content: \"\\e67b\"; }\r\n@mixin icon-summary-report { content: \"\\e67c\"; }\r\n@mixin icon-text-entry { content: \"\\e67d\"; }\r\n@mixin icon-extended-text { content: \"\\e67e\"; }\r\n@mixin icon-eraser { content: \"\\e67f\"; }\r\n@mixin icon-row { content: \"\\e680\"; }\r\n@mixin icon-column { content: \"\\e681\"; }\r\n@mixin icon-text-color { content: \"\\e682\"; }\r\n@mixin icon-background-color { content: \"\\e683\"; }\r\n@mixin icon-spell-check { content: \"\\e684\"; }\r\n@mixin icon-polygon { content: \"\\e685\"; }\r\n@mixin icon-rectangle { content: \"\\e686\"; }\r\n@mixin icon-gap-match { content: \"\\e687\"; }\r\n@mixin icon-order { content: \"\\e688\"; }\r\n@mixin icon-hottext { content: \"\\e689\"; }\r\n@mixin icon-free-form { content: \"\\e68a\"; }\r\n@mixin icon-step-backward { content: \"\\e68b\"; }\r\n@mixin icon-fast-backward { content: \"\\e68c\"; }\r\n@mixin icon-backward { content: \"\\e68d\"; }\r\n@mixin icon-play { content: \"\\e68e\"; }\r\n@mixin icon-pause { content: \"\\e68f\"; }\r\n@mixin icon-stop { content: \"\\e690\"; }\r\n@mixin icon-forward { content: \"\\e691\"; }\r\n@mixin icon-fast-forward { content: \"\\e692\"; }\r\n@mixin icon-step-forward { content: \"\\e693\"; }\r\n@mixin icon-ellipsis { content: \"\\e694\"; }\r\n@mixin icon-circle { content: \"\\e695\"; }\r\n@mixin icon-target { content: \"\\e696\"; }\r\n@mixin icon-guide-arrow { content: \"\\e697\"; }\r\n@mixin icon-range-slider-right { content: \"\\e698\"; }\r\n@mixin icon-range-slider-left { content: \"\\e699\"; }\r\n@mixin icon-radio-checked { content: \"\\e69a\"; }\r\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\r\n@mixin icon-checkbox { content: \"\\e69b\"; }\r\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\r\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\r\n@mixin icon-result-nok { content: \"\\e69e\"; }\r\n@mixin icon-result-ok { content: \"\\e69f\"; }\r\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\r\n@mixin icon-filter { content: \"\\e6a1\"; }\r\n@mixin icon-translate { content: \"\\e6a2\"; }\r\n@mixin icon-eject { content: \"\\e6a3\"; }\r\n@mixin icon-continue { content: \"\\e6a4\"; }\r\n@mixin icon-radio { content: \"\\e6a5\"; }\r\n@mixin icon-sphere { content: \"\\e6a6\"; }\r\n@mixin icon-reset { content: \"\\e6a7\"; }\r\n@mixin icon-smaller { content: \"\\e6a8\"; }\r\n@mixin icon-larger { content: \"\\e6a9\"; }\r\n@mixin icon-clock { content: \"\\e6aa\"; }\r\n@mixin icon-font { content: \"\\e6ab\"; }\r\n@mixin icon-maths { content: \"\\e6ac\"; }\r\n@mixin icon-grip { content: \"\\e6ad\"; }\r\n@mixin icon-rubric { content: \"\\e6ae\"; }\r\n@mixin icon-audio { content: \"\\e6af\"; }\r\n@mixin icon-grip-h { content: \"\\e6b0\"; }\r\n@mixin icon-magicwand { content: \"\\e6b1\"; }\r\n@mixin icon-loop { content: \"\\ea2e\"; }\r\n@mixin icon-calendar { content: \"\\e953\"; }\r\n@mixin icon-reload { content: \"\\e984\"; }\r\n@mixin icon-speed { content: \"\\e9a6\"; }\r\n@mixin icon-volume { content: \"\\ea27\"; }\r\n@mixin icon-contrast { content: \"\\e9d5\"; }\r\n@mixin icon-headphones { content: \"\\e910\"; }\r\n@mixin icon-compress { content: \"\\f066\"; }\r\n@mixin icon-map-o { content: \"\\f278\"; }\r\n@mixin icon-variable { content: \"\\e908\"; }\r\n@mixin icon-tooltip { content: \"\\e90c\"; }\r\n@mixin icon-globe { content: \"\\e9c9\"; }\r\n@mixin icon-highlighter { content: \"\\e90f\"; }\r\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\r\n@mixin icon-play-from-here { content: \"\\e912\"; }\r\n","// buttons and alerts\r\n$success: rgb(14, 145, 75);\r\n$info: rgb(14, 93, 145);\r\n$warning: rgb(216, 174, 91);\r\n$danger: rgb(201, 96, 67);\r\n$error: rgb(186, 18, 43);\r\n$activeInteraction: rgb(195, 90, 19);\r\n\r\n// corporate identity\r\n$logoRed: rgb(186, 18, 43);\r\n$grey: rgb(173, 161, 148);\r\n$darkBlueGrey: rgb(164, 187, 197);\r\n$mediumBlueGrey: rgb(193, 212, 220);\r\n$lightBlueGrey: rgb(228, 236, 239);\r\n$brownRedGrey: rgb(154, 137, 123);\r\n$darkBrown: rgb(111, 99, 89);\r\n$websiteBorder: rgb(141, 148, 158);\r\n\r\n// ui elements, these should only variations of the above\r\n// naming convention: jQueryUi theme roller -> camelCase\r\n\r\n$textColor: #222;\r\n$textHighlight: white;\r\n\r\n$uiGeneralContentBg: white();\r\n$uiGeneralContentBorder: #ddd;\r\n\r\n$uiHeaderBg: #d4d5d7;\r\n\r\n$uiClickableDefaultBg: #f3f1ef;\r\n$uiClickableHoverBg: whiten($info, 0.2);\r\n//$uiClickableActiveBg: $uiHeaderBg;\r\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\r\n//$uiClickableActiveBg: #aaa;\r\n\r\n$uiSelectableSelectedBg: whiten($info, 0.2);\r\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\r\n$uiSelectableHoverBg: whiten($info, 0.9);\r\n\r\n$uiOverlay: $lightBlueGrey;\r\n\r\n// new layout. Implemented now only for review panel\r\n$uiReviewPanelBg: #f2f2f2;\r\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\r\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\r\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\r\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\r\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\r\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\r\n\r\n// sidebars etc.\r\n$canvas: mix(#fff, $grey, 85%);\r\n\r\n// colors taken from feedback.scss\r\n$successBgColor: whiten($success, 0.8);\r\n$successBorderColor: whiten($success, 0.1);\r\n\r\n$infoBgColor: whiten($info, 0.8);\r\n$infoBorderColor: whiten($info, 0.1);\r\n\r\n$warningBgColor: whiten($warning, 0.8);\r\n$warningBorderColor: whiten($warning, 0.1);\r\n\r\n$dangerBgColor: whiten($danger, 0.8);\r\n$dangerBorderColor: whiten($danger, 0.1);\r\n\r\n$errorBgColor: whiten($error, 0.8);\r\n$errorBorderColor: whiten($error, 0.1);\r\n\r\n$darkBar: rgb(51, 51, 51);\r\n$darkBarTxt: rgb(230, 230, 230);\r\n$darkBarIcon: rgb(220, 220, 220);\r\n\r\n$actionLinkColor: #276d9b;\r\n$actionLinkHoverColor: #4f83a7;\r\n\r\n$colorWheel-01: #c3ba13;\r\n$colorWheel-02: #84a610;\r\n$colorWheel-03: #2b8e0e;\r\n$colorWheel-04: #0f9787;\r\n$colorWheel-05: #0e5d91;\r\n$colorWheel-06: #0d2689;\r\n$colorWheel-07: #400d83;\r\n$colorWheel-08: #960e7d;\r\n$colorWheel-09: #ba122b;\r\n$colorWheel-10: #c34713;\r\n$colorWheel-11: #c36f13;\r\n$colorWheel-12: #c39413;\r\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "1.60.1",
+    "version": "1.60.2",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/src/mediaplayer/css/player.css

@@ -70,6 +70,10 @@ Usage:
     background: transparent none;
 }
 
+.mediaplayer .player .player-overlay a.action span.icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer .player .action {
     position: absolute;
     z-index: 2;
@@ -104,11 +108,13 @@ Usage:
 
 .mediaplayer .player .action.reload:hover .icon {
     opacity: 1;
+    font-family: 'tao' !important;
 }
 
 .mediaplayer .player .action.reload .icon {
     opacity: 0.6;
     background: none;
+    font-family: 'tao' !important;
 }
 
 .mediaplayer .player .action.reload .message {
@@ -159,6 +165,7 @@ Usage:
 
 .mediaplayer .controls .actions .action .icon {
     line-height: 2.2rem;
+    font-family: 'tao' !important;
 }
 
 .mediaplayer .controls .actions .play {
@@ -393,6 +400,11 @@ Usage:
 
 .mediaplayer.ready.paused.canplay .player-overlay {
     cursor: pointer;
+    font-family: 'tao' !important;
+}
+
+.mediaplayer.ready.paused.canplay .player-overlay a.action span.icon {
+    font-family: 'tao' !important;
 }
 
 .mediaplayer.ready.paused.canplay:not(.audio) .player:hover [data-control="play"] {
@@ -407,14 +419,26 @@ Usage:
     cursor: pointer;
 }
 
+.mediaplayer.ready.playing.canpause .player-overlay .action .icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer.ready.playing.canpause:not(.audio) .player:hover [data-control="pause"] {
     display: inline-block;
 }
 
+.mediaplayer.playing.canpause .action .icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer.playing.canpause .controls [data-control="pause"] {
     display: inline-block;
 }
 
+.mediaplayer.paused.canplay .action .icon {
+    font-family: 'tao' !important;
+}
+
 .mediaplayer.paused.canplay .controls [data-control="play"] {
     display: inline-block;
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"AAaA;;;;;;CCPC;AD2QD,oEAAA;AEjRA,gBAAA;ADgBA;IACI,kBAAkB;ID4FlB,yBGxCqB;IHyCrB,kBAAkB;IAOlB,kBAA4B;ICjG5B,iBDuL+B;ICtL/B,eAAe;IACf,gBARiB;IASjB,gBAAgB;IAChB,cAAc;AAFlB;;AANA;IAYY,WAAW;IACX,WAAW;IACX,sBAAsB;AAFlC;;AAZA;IC8MoB,gBAAgB;AD9LpC;;AAhBA;IC6LyB,gBAAgB;ADzKzC;;AApBA;IAyBQ,aAAa;AADrB;;AAxBA;IA6BQ,kBAAkB;IAClB,yBAAuC;IACvC,WAAW;AADnB;;AA9BA;IAkCY,oBAAoB;IACpB,kBAAkB;IAClB,OAAO;IACP,MAAM;IACN,WAAW;IACX,YACJ;AADR;;AAvCA;IA2CY,cAAc;IACd,WAAW;IACX,YAAY;IACZ,gBAAgB;AAA5B;;AA9CA;IAkDY,kBAAkB;IAClB,UAAU;IACV,MAAM;IACN,OAAO;IACP,SAAS;IACT,QAAQ;IACR,UAAU;IACV,4BAA4B;AAAxC;;AAzDA;IA6DY,kBAAkB;IAClB,UAAU;IACV,QAAQ;IACR,SAAS;IACT,0BAA0B;IAC1B,iBAAiB;IACjB,kBAAkB;IAClB,qBAAqB;IACrB,aAAa;IDmIjB,eAAyB;IACzB,iBAA+B;IClI3B,YDwH6B;ACvHzC;;AAxEA;IDqGI,mBAA4B;IC1BhB,iBAAiB;IACjB,uBD+GmB;IC9GnB,YAAY;AAI5B;;AAjFA;IAgFoB,YAAY;AAKhC;;AArFA;IAqFgB,WAAW;IACX,eAAe;IACf,iBAAiB;AAIjC;;AA3FA;IA2FwB,UAAU;AAIlC;;AA/FA;IAgGoB,YAAY;IACZ,gBAAgB;AAGpC;;AApGA;IAoGoB,eAAe;AAInC;;AAxGA;IAwGoB,qEAAqE;AAIzF;;AA5GA;IA+GQ,kBAAkB;IAClB,kBAAkB;IAClB,YAAY;IACZ,cAAc;IACd,mBAAmB;IACnB,WAAW;IACX,6BEhEiB;IFiEjB,YAxHa;AAyHrB;;AAvHA;IAyHY,kBAAkB;AAE9B;;AA3HA;IA4HY,mBAAmB;AAG/B;;AA/HA;IAgIY,kBAAkB;IDvFlB,qCAAwB;AC+FpC;;AAxIA;IAoIgB,kBAAkB;IAClB,mBAnJS;IAoJT,aApJS;IAqJT,cArJS;IAsJT,qBAAqB;IACrB,gBElFgB;IHdpB,qCAAwB;AC6GpC;;AAtJA;IA6IoB,UAAU;AAa9B;;AA1JA;IAiJoB,mBA/JK;AA4KzB;;AA9JA;IAsJgB,YAAY;IACZ,+BElGS;AF8GzB;;AAnKA;IA2JgB,YAAY;IACZ,8BEvGS;AFmHzB;;AAxKA;IAiKY,eAAe;IDpEvB,sBGpFyB;IHqFzB,kBAAkB;IAOlB,mBAA4B;IA5DpB,qCAAwB;IC4HxB,iBD0B6B;ACPzC;;AAxLA;IDqGI,mBAA4B;ICoEhB,iBDsByB;ACAzC;;AA/LA;IDqGI,mBAA4B;ICwEhB,mBExHS;AFiJzB;;AAtMA;IAiLgB,WAAW;IACX,YAAY;IDrFxB,sBGpFyB;IHqFzB,kBAAkB;IAOlB,mBAA4B;ICgFhB,mBDVkC;ACuClD;;AAlNA;IAwLgB,mBDbkC;AC2ClD;;AAtNA;IA2LgB,aAAa;AA+B7B;;AA1NA;IA+LgB,WAAW;AA+B3B;;AA9NA;IAkMoB,SAAS;AAgC7B;;AAlOA;IAuMgB,UAAU;AA+B1B;;AAtOA;IA0MoB,UAAU;AAgC9B;;AA1OA;IAgNY,eAAe;IAEf,cA/NY;IAgOZ,mBAjOa;IAmOb,WA/NK;IDkNT,eAAyB;IACzB,eAA+B;ICc3B,iBAAiB;AA6B7B;;AApPA;IA0NgB,cAAc;AA8B9B;;AAxPA;IA+NY,WAAW;IACX,kBAAkB;AA6B9B;;AA7PA;IAoOY,kBAAkB;IAClB,YAAY;IACZ,eAAe;IACf,kBApPY;AAiRxB;;AApQA;IA2OY,kBAxPY;IAyPZ,aA1Pa;AAuRzB;;AAzQA;IAgPY,aA9Pa;IA+Pb,cA/Pa;AA4RzB;;AA9QA;IAoPgB,kBAAkB;IAClB,aAAa;AA8B7B;;AAnRA;IAwPgB,eAAe;IACf,kBAAkB;IAClB,aAAa;IACb,uBDhEmB;ICiEnB,eAAe;IACf,eAAe;IACf,WAAW;IACX,SAAS;IACT,MAAM;IACN,UAAU;IACV,UAAW;IACX,kBAAkB;IAClB,yBE/MS;IFgNT,oBAAoB;IACpB,gBAAgB;ID7NpB,gFAAwB;ACiQpC;;AA1SA;IA0QoB,aAAa;IACb,UAAW;IACX,oBAAoB;AAoCxC;;AAhTA;IA8QwB,qBAAqB;IACrB,UAAW;IACX,qCAAqC;IDvOjD,qCAAwB;ACkRpC;;AA3TA;IAqRoB,WAAW;ID5OnB,oFAAwB;AC2RpC;;AApUA;IAyRoB,SAAS;IDhPjB,2DAAwB;ACoSpC;;AA7UA;IA+RgB,UAAW;IACX,aAAa;AAkD7B;;AAlVA;IAkSoB,eAAe;IACf,UAAU;IACV,WAAW;AAoD/B;;AAxVA;IAwSoB,WAAW;IACX,WAAW;AAoD/B;;AA7VA;IA6SoB,UAAU;IACV,aAAa;AAoDjC;;AAlWA;IAoTY,aAAa;AAkDzB;;AAtWA;IAuTY,aAAa;AAmDzB;;AA1WA;IA2TY,qBAAqB;AAmDjC;;AA9WA;IA8TY,aAAa;AAoDzB;;AAlXA;IAqUgB,aAAa;IACb,cApVS;IAqVT,QAAQ;AAiDxB;;AAxXA;IA+UgB,cA7VS;IA8VT,aA9VS;IA+VT,SAAS;AA6CzB;;AA9XA;IAyVwB,aAAa;IACb,mBAAmB;IACnB,sBAAsB;IACtB,SAAS;IACT,eAAe;IACf,yBAAyB;IACzB,gBAAgB;IAChB,mBAAmB;AAyC3C;;AAzYA;IAkW4B,uBAAuB;IACvB,eAAe;IACf,iBAAiB;IACjB,gBAAgB;AA2C5C;;AAhZA;IAwWgC,iBAAiB;IACjB,kBAAkB;IAClB,OAAO;IACP,eAAe;IACf,iBAAiB;AA4CjD;;AAxZA;IAgXgC,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;AA4CjD;;AA9ZA;IA6XY,mBAAmB;AAqC/B;;AAlaA;IAkYgB,eAAe;AAoC/B;;AAtaA;IAwYwB,qBAAqB;AAkC7C;;AA1aA;IAgZwB,aAAa;AA8BrC;;AA9aA;IAwZgB,eAAe;AA0B/B;;AAlbA;IA8ZwB,qBAAqB;AAwB7C;;AAtbA;IAwagB,qBAAqB;AAkBrC;;AA1bA;IAgbgB,qBAAqB;AAcrC;;AA9bA;IAmbgB,aAAa;AAe7B;;AAlcA;IA2bgB,aAAa;AAW7B;;AAtcA;IA8bgB,qBAAqB;AAYrC;;AA1cA;IAscgB,uBAAuB;AAQvC;;AA9cA;IA0cY,wBAAwB;AAQpC;;AAldA;IA6cY,wBAAwB;AASpC;;AAtdA;IAmdY,aAAa;AAOzB;;AA1dA;IAudY,cAAc;IACd,kBAAkB;IAClB,WAAW;IACX,YAAY;AAOxB;;AAjeA;IA6dgB,cExeQ;IFyeR,mBAAmB;IACnB,sBAAsB;AAQtC;;AAveA;IAyeQ,WAAW;IACX,sBAAsB;IACtB,kBAAkB;IAClB,QAAQ;IACR,SAAS;IACT,WAAW;IACX,YAAY;IACZ,iBAAiB;IACjB,kBAAkB;IAClB,kBAAkB;IAClB,sBAAsB;IACtB,sBAAsB;IACtB,sCAAsC;AAE9C;;AAlBQ;IACI;QAAK,yBAAyB;IAsBtC;AACJ;;AA7fA;IA0fY,iBAAiB;IACjB,YAAY;AAOxB;;AAlgBA;IA+fgB,qBAAqB;AAOrC;;AAtgBA;IAugBgB,qBAAqB;AAGrC","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\r\n    @each $icon in $iconList {\r\n        #{$prefix}#{$icon} {\r\n            background-position: $x * 1px $y * 1px;\r\n        }\r\n        @if $direction == 'x' {\r\n            $x: $x - 16;\r\n        } @else {\r\n            $y: $y - 16;\r\n        }\r\n    }\r\n}\r\n\r\n/*\r\nUsage:\r\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\r\n   if 3 colors used then the position of each will be 33,33%\r\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\r\n   first param - color, second - position. Also you can use px or other valid units for set position.\r\n*/\r\n@mixin linear-gradient($colorList, $direction: 'to right') {\r\n    $percentage: 0;\r\n    $units: '%';\r\n    $count: length($colorList);\r\n    $increment: 100 / ($count - 1);\r\n    $css: #{$direction + ', '};\r\n    $sep: ', ';\r\n    @each $colorItem in $colorList {\r\n        $color: $colorItem;\r\n        @if (length($colorItem) > 1) {\r\n            $color: nth($colorItem, 1);\r\n            $percentage: nth($colorItem, 2);\r\n            $units: '';\r\n        }\r\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\r\n            $sep: '';\r\n        }\r\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\r\n        $percentage: $percentage + $increment;\r\n    }\r\n    background: linear-gradient( #{$css} );\r\n}\r\n\r\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\r\n    $gridPx: 840;\r\n    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\r\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\r\n    $spanPercent: widthPerc($spanPx, $gridPx);\r\n    $marginPercent: widthPerc($gutter, $gridPx);\r\n    margin-left: $marginPercent;\r\n    width: $spanPercent;\r\n}\r\n\r\n\r\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\r\n    @if $whatToPrefix == 'property' {\r\n        @each $prefix in $prefixes {\r\n            #{$prefix + $property}: #{$value};\r\n        }\r\n    }\r\n    @else if $whatToPrefix == 'value' {\r\n        @each $prefix in $prefixes {\r\n            #{$property}: #{$prefix + $value};\r\n        }\r\n    }\r\n}\r\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\r\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\r\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\r\n}\r\n\r\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\r\n\r\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\r\n    flex-item-align: stretch;\r\n    -ms-flex-item-align: stretch;\r\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\r\n\r\n    // if both, min width and width are set, width will win this conflict\r\n    @if ($width == auto) {\r\n        @if ($minWidth != 1) {\r\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\r\n        }\r\n        @else {\r\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\r\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\r\n            // for a discussion auto vs. main-size\r\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\r\n        }\r\n    }\r\n    @else {\r\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\r\n    }\r\n}\r\n\r\n\r\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\r\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\r\n}\r\n\r\n@mixin simple-border($color: #ddd) {\r\n    border: 1px solid $color;\r\n    border-radius: 2px;\r\n    -webkit-border-radius: 2px;\r\n}\r\n\r\n@mixin border-radius($radius: 2) {\r\n    -moz-border-radius: $radius * 1px;\r\n    -webkit-border-radius: $radius * 1px;\r\n    border-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom($radius: 2) {\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-left($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-right($radius: 2) {\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-left($radius: 2) {\r\n  -webkit-border-top-left-radius: $radius * 1px;\r\n  -moz-border-radius-topleft: $radius * 1px;\r\n  border-top-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-right($radius: 2) {\r\n  -webkit-border-top-right-radius: $radius * 1px;\r\n  -moz-border-radius-topright: $radius * 1px;\r\n  border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-right($radius: 2) {\r\n  -webkit-border-bottom-right-radius: $radius * 1px;\r\n  -moz-border-radius-bottomright: $radius * 1px;\r\n  border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-left($radius: 2) {\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-box() {\r\n    -moz-box-sizing: border-box;\r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n\r\n@function whiten($color, $white: 0.3) {\r\n    @return mix(#fff, $color, ($white * 100) * 1%);\r\n}\r\n\r\n@function blacken($color, $black: 0.3) {\r\n    @return mix(#000, $color, ($black * 100) * 1%);\r\n}\r\n\r\n@function widthPerc($colWidth, $context) {\r\n    @return ($colWidth * 100 / $context) * 1%\r\n}\r\n\r\n@function remDist($fontSizePx) {\r\n    @return ($fontSizePx / 10) * 1rem\r\n}\r\n\r\n@function black($alpha: 1) {\r\n    @return (rgba(0, 0, 0, $alpha))\r\n}\r\n\r\n@function white($alpha: 1) {\r\n    @return (rgba(255, 255, 255, $alpha))\r\n}\r\n\r\n@mixin font-size($remPx, $important: false) {\r\n    @if $important == true {\r\n        font-size: ($remPx) * 1px !important;\r\n        font-size: ($remPx / 10) * 1rem !important;\r\n    }\r\n    @else {\r\n        font-size: ($remPx) * 1px;\r\n        font-size: ($remPx / 10) * 1rem;\r\n    }\r\n}\r\n\r\n\r\n@mixin keyframes($name) {\r\n    @-o-keyframes #{$name} { @content };\r\n    @-moz-keyframes #{$name} { @content };\r\n    @-webkit-keyframes #{$name} { @content };\r\n    @keyframes #{$name} { @content };\r\n}\r\n\r\n\r\n@mixin animation($value, $type:'') {\r\n    $animation: animation;\r\n    @if $type != '' {\r\n        $animation:  $animation + '-' + $type;\r\n    }\r\n    @include vendor-prefix($animation, $value, property);\r\n}\r\n\r\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\r\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\r\n///\r\n/// @param {property} [$type = all] the CSS property to apply the transition to\r\n/// @param {time} [$duration = .5s] the transition property\r\n/// @param {timing-function} [$effect = ease-out] the transition property\r\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\r\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\r\n}\r\n\r\n@mixin fade($duration: 1s){\r\n\r\n    @include keyframes(fade) {\r\n        0%   {opacity:0;}\r\n        50%   {opacity:1;}\r\n        100% {opacity:0;}\r\n    }\r\n\r\n    @include vendor-prefix(animation, fade 1s forwards, property);\r\n}\r\n\r\n@mixin repeat(){\r\n    @include animation(infinite, iteration-count);\r\n}\r\n\r\n@mixin largeHeading() {\r\n    @include font-size(20);\r\n    font-family: $headingFont;\r\n    font-style: normal;\r\n}\r\n\r\n@mixin disableSelect() {\r\n    @include vendor-prefix(user-select, none, property);\r\n}\r\n\r\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\r\n@mixin visuallyHidden() {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    overflow: hidden;\r\n    clip: rect(1px, 1px, 1px, 1px);\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n","@import \"inc/bootstrap\";\r\n\r\n$playerActionSize: 2.2rem;\r\n$playerActionSpace: 1rem;\r\n$playerBackground: black();\r\n$playerBorder: $darkBar;\r\n$playerText: #999;\r\n$playerIcon: $darkBarIcon;\r\n$playerTextOverlay: white();\r\n$playerSliderBorder: $uiGeneralContentBorder;\r\n$playerSliderBackground: $uiGeneralContentBg;\r\n$playerSliderColor: $darkBar;\r\n$playerSliderHandle: whiten($playerSliderColor, .4);\r\n$playerSliderHightlight: whiten($playerSliderColor, .2);\r\n$controlsHeight: 36px;\r\n\r\n.mediaplayer {\r\n    position: relative;\r\n    @include simple-border($playerBorder);\r\n    @include border-radius(2);\r\n    background: $playerBackground;\r\n    max-width: 100%;\r\n    min-height: $controlsHeight;\r\n    min-width: 200px;\r\n    direction: ltr;\r\n\r\n    &.youtube {\r\n        .player {\r\n            width: 100%;\r\n            height: 0px;\r\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\r\n        }\r\n    }\r\n    .icon-sound:before {\r\n        @include icon-audio();\r\n    }\r\n    .icon-mute:before {\r\n        @include icon-result-nok();\r\n    }\r\n\r\n    .error {\r\n        display: none;\r\n    }\r\n\r\n    .player {\r\n        position: relative;\r\n        height: calc(100% - #{$controlsHeight});\r\n        width: 100%;\r\n\r\n        iframe {\r\n            pointer-events: none;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%\r\n        }\r\n\r\n        .media:not(.youtube) {\r\n            display: block;\r\n            width: 100%;\r\n            height: auto;\r\n            max-height: 100%;\r\n        }\r\n\r\n        .player-overlay {\r\n            position: absolute;\r\n            z-index: 1;\r\n            top: 0;\r\n            left: 0;\r\n            bottom: 0;\r\n            right: 0;\r\n            opacity: 1;\r\n            background: transparent none;\r\n        }\r\n\r\n        .action {\r\n            position: absolute;\r\n            z-index: 2;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%);\r\n            margin-top: -32px;\r\n            text-align: center;\r\n            text-decoration: none;\r\n            display: none;\r\n            @include font-size(64);\r\n            color: $playerTextOverlay;\r\n\r\n            .icon {\r\n                @include border-radius(10);\r\n                padding: 6px 12px;\r\n                background-color: $playerBackground;\r\n                opacity: 0.2;\r\n\r\n                &:hover {\r\n                    opacity: 0.6;\r\n                }\r\n            }\r\n\r\n            &.reload {\r\n                width: 100%;\r\n                font-size: 50px;\r\n                line-height: 30px;\r\n\r\n                &:hover {\r\n                    .icon {\r\n                        opacity: 1;\r\n                    }\r\n                }\r\n\r\n                .icon {\r\n                    opacity: 0.6;\r\n                    background: none;\r\n                }\r\n                .message {\r\n                    font-size: 20px;\r\n                }\r\n\r\n                .icon, .message {\r\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .controls {\r\n        visibility: hidden;\r\n        position: relative;\r\n        padding: 5px;\r\n        display: table;\r\n        table-layout: fixed;\r\n        width: 100%;\r\n        border-top: 1px solid $playerBorder;\r\n        height: $controlsHeight;\r\n\r\n        .bar {\r\n            display: table-row;\r\n        }\r\n        .control {\r\n            display: table-cell;\r\n        }\r\n\r\n        .actions {\r\n            position: relative;\r\n            @include transition(all, 0.1,ease-in-out);\r\n\r\n            .action {\r\n                text-align: center;\r\n                line-height: $playerActionSize;\r\n                width: $playerActionSize;\r\n                height: $playerActionSize;\r\n                text-decoration: none;\r\n                color: $playerIcon;\r\n                @include transition(all, 0.2, ease-in-out);\r\n\r\n                &:hover {\r\n                    opacity: 1;\r\n                }\r\n\r\n                .icon {\r\n                    line-height: $playerActionSize;\r\n                }\r\n            }\r\n\r\n            .play {\r\n                opacity: 0.7;\r\n                border-right: 1px solid $playerBorder;\r\n            }\r\n\r\n            .mute {\r\n                opacity: 0.8;\r\n                border-left: 1px solid $playerBorder;\r\n            }\r\n        }\r\n\r\n        .slider {\r\n            cursor: pointer;\r\n            @include simple-border($playerSliderBorder);\r\n            @include border-radius(10);\r\n            @include transition(all, 0.1, ease-in-out);\r\n            background: $playerSliderBackground;\r\n\r\n            .noUi-background {\r\n                @include border-radius(10);\r\n                background: $playerSliderBackground;\r\n            }\r\n            &.noUi-connect, .noUi-connect {\r\n                @include border-radius(10);\r\n                background: $playerSliderColor;\r\n            }\r\n\r\n            .noUi-handle {\r\n                width: 11px;\r\n                height: 11px;\r\n                @include simple-border($playerSliderBorder);\r\n                @include border-radius(10);\r\n                background: $playerSliderHandle;\r\n            }\r\n            .noUi-handle:hover {\r\n                background: $playerSliderHightlight;\r\n            }\r\n            .noUi-handle:after {\r\n                display: none;\r\n            }\r\n\r\n            &.noUi-horizontal {\r\n                height: 9px;\r\n\r\n                .noUi-handle {\r\n                    top: -2px;\r\n                }\r\n            }\r\n\r\n            &.noUi-vertical {\r\n                width: 9px;\r\n\r\n                .noUi-handle {\r\n                    left: -2px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .infos {\r\n            cursor: default;\r\n\r\n            margin: 0 $playerActionSpace;\r\n            line-height: $playerActionSize;\r\n\r\n            color: $playerText;\r\n            @include font-size(10);\r\n            font-weight: bold;\r\n\r\n            [data-control=\"time-end\"]:before {\r\n                content: ' / ';\r\n            }\r\n        }\r\n\r\n        .timer {\r\n            width: 8rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .seek {\r\n            position: relative;\r\n            height: 1rem;\r\n            margin-top: 5px;\r\n            padding-left: $playerActionSpace;\r\n        }\r\n\r\n        .playback {\r\n            margin-right: $playerActionSpace;\r\n            width: $playerActionSize;\r\n        }\r\n\r\n        .sound {\r\n            width: $playerActionSize;\r\n            height: $playerActionSize;\r\n\r\n            .action {\r\n                position: relative;\r\n                z-index: 1001;\r\n            }\r\n            .volume {\r\n                cursor: default;\r\n                position: absolute;\r\n                z-index: 1000;\r\n                background-color: $playerBackground;\r\n                margin: 1px 2px;\r\n                padding: 10px 0;\r\n                width: 100%;\r\n                height: 0;\r\n                top: 0;\r\n                left: -1px;\r\n                opacity : 0;\r\n                text-align: center;\r\n                border: solid 1px $playerBorder;\r\n                pointer-events: none;\r\n                overflow: hidden;\r\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\r\n\r\n                &.up, &.down {\r\n                    height: 120px;\r\n                    opacity : 1;\r\n                    pointer-events: auto;\r\n                    .slider {\r\n                        display: inline-block;\r\n                        opacity : 1;\r\n                        transition: opacity 50ms linear 200ms;\r\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\r\n                    }\r\n                }\r\n                &.up {\r\n                    top: -127px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n                &.down {\r\n                    top: 30px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n            }\r\n\r\n            .slider {\r\n                opacity : 0;\r\n                display: none;\r\n                .noUi-handle {\r\n                    cursor: pointer;\r\n                    width: 9px;\r\n                    height: 9px;\r\n                }\r\n\r\n                &.noUi-horizontal {\r\n                    width: 50px;\r\n                    height: 7px;\r\n                }\r\n\r\n                &.noUi-vertical {\r\n                    width: 7px;\r\n                    height: 100px;\r\n                }\r\n            }\r\n        }\r\n\r\n        [data-control=\"play\"] {\r\n            display: none;\r\n        }\r\n        [data-control=\"pause\"] {\r\n            display: none;\r\n        }\r\n\r\n        [data-control=\"mute\"] {\r\n            display: inline-block;\r\n        }\r\n        [data-control=\"unmute\"] {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    &.video, &.youtube {\r\n        .sound {\r\n            .volume {\r\n                width: 2.8rem;\r\n                bottom: $playerActionSize;\r\n                right: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.audio {\r\n        .sound {\r\n            .volume {\r\n                height: $playerActionSize;\r\n                right: $playerActionSize;\r\n                bottom: 0;\r\n            }\r\n        }\r\n\r\n        &.stalled {\r\n            .player {\r\n                .player-overlay {\r\n                    [data-control=\"reload\"] {\r\n                        display: flex;\r\n                        align-items: center;\r\n                        background-color: #000;\r\n                        margin: 0;\r\n                        flex-wrap: wrap;\r\n                        padding: 5px 5px 5px 50px;\r\n                        text-align: left;\r\n                        line-height: 2.3rem;\r\n                        &.reload {\r\n                            width: calc(100% + 2px);\r\n                            font-size: 20px;\r\n                            line-height: 20px;\r\n                            min-height: 36px;\r\n\r\n                            .icon {\r\n                                text-shadow: none;\r\n                                position: absolute;\r\n                                left: 0;\r\n                                font-size: 2rem;\r\n                                font-weight: bold;\r\n                            }\r\n\r\n                            .message {\r\n                                text-shadow: none;\r\n                                font-size: 1.3rem;\r\n                                margin-right: 5px;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.ready {\r\n        .controls {\r\n            visibility: visible;\r\n        }\r\n\r\n        &.paused.canplay {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.youtube.ended, &:not(.preview) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &.playing.canpause {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"pause\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.playing.canpause {\r\n        .controls {\r\n            [data-control=\"pause\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.paused.canplay {\r\n        .controls {\r\n            [data-control=\"play\"] {\r\n                display: inline-block;\r\n            }\r\n            [data-control=\"pause\"] {\r\n                display: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.muted {\r\n        .controls {\r\n            [data-control=\"mute\"] {\r\n                display: none;\r\n            }\r\n            [data-control=\"unmute\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.nogui {\r\n        .player {\r\n            iframe {\r\n                pointer-events: inherit;\r\n            }\r\n        }\r\n        .player-overlay {\r\n            display: none !important;\r\n        }\r\n        .controls {\r\n            display: none !important;\r\n        }\r\n    }\r\n\r\n    &.error:not(.stalled) {\r\n        .media, .controls {\r\n            display: none;\r\n        }\r\n\r\n        .error {\r\n            display: table;\r\n            text-align: center;\r\n            width: 100%;\r\n            height: 100%;\r\n\r\n            .message {\r\n                color: $error;\r\n                display: table-cell;\r\n                vertical-align: middle;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.loading:not(.stalled)::before {\r\n        @keyframes spinner {\r\n            to { transform: rotate(360deg); }\r\n        }\r\n\r\n        content: '';\r\n        box-sizing: border-box;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: 30px;\r\n        height: 30px;\r\n        margin-top: -15px;\r\n        margin-left: -15px;\r\n        border-radius: 50%;\r\n        border: 1px solid #ccc;\r\n        border-top-color: #07d;\r\n        animation: spinner .6s linear infinite;\r\n    }\r\n\r\n    &.stalled {\r\n        .video {\r\n            filter: blur(4px);\r\n            opacity: 0.4;\r\n        }\r\n        .player-overlay {\r\n            [data-control=\"reload\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.video:not(.preview):not(.error) {\r\n        .player-overlay {\r\n            [data-control=\"start\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/*# sourceMappingURL=player.css.map */","/* Do not edit */@mixin tao-icon-setup {\r\n  /* use !important to prevent issues with browser extensions that change fonts */\r\n  font-family: 'tao' !important;\r\n  speak: never;\r\n  font-style: normal;\r\n  font-weight: normal;\r\n  font-variant: normal;\r\n  text-transform: none;\r\n  line-height: 1;\r\n\r\n  /* Better Font Rendering =========== */\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n@mixin icon-info-bare { content: \"\\e923\"; }\r\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\r\n@mixin icon-bookmark { content: \"\\e921\"; }\r\n@mixin icon-indicator { content: \"\\e920\"; }\r\n@mixin icon-add-subsection { content: \"\\e918\"; }\r\n@mixin icon-wrap-inline { content: \"\\e915\"; }\r\n@mixin icon-wrap-left { content: \"\\e916\"; }\r\n@mixin icon-wrap-right { content: \"\\e917\"; }\r\n@mixin icon-offline { content: \"\\e913\"; }\r\n@mixin icon-online { content: \"\\e914\"; }\r\n@mixin icon-tab { content: \"\\e90d\"; }\r\n@mixin icon-untab { content: \"\\e90e\"; }\r\n@mixin icon-multi-select { content: \"\\e90b\"; }\r\n@mixin icon-clipboard { content: \"\\e90a\"; }\r\n@mixin icon-filebox { content: \"\\e909\"; }\r\n@mixin icon-click-to-speak { content: \"\\e907\"; }\r\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\r\n@mixin icon-microphone { content: \"\\f130\"; }\r\n@mixin icon-microphone-off { content: \"\\f131\"; }\r\n@mixin icon-disconnect { content: \"\\e905\"; }\r\n@mixin icon-connect { content: \"\\e906\"; }\r\n@mixin icon-eliminate { content: \"\\e904\"; }\r\n@mixin icon-wheelchair { content: \"\\e903\"; }\r\n@mixin icon-text-marker { content: \"\\e902\"; }\r\n@mixin icon-unshield { content: \"\\e32a\"; }\r\n@mixin icon-shield { content: \"\\e8e8\"; }\r\n@mixin icon-tree { content: \"\\e6b4\"; }\r\n@mixin icon-home { content: \"\\e6b3\"; }\r\n@mixin icon-shared-file { content: \"\\e6b2\"; }\r\n@mixin icon-end-attempt { content: \"\\e603\"; }\r\n@mixin icon-icon { content: \"\\f1c5\"; }\r\n@mixin icon-radio-bg { content: \"\\e600\"; }\r\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\r\n@mixin icon-tag { content: \"\\e602\"; }\r\n@mixin icon-style { content: \"\\e604\"; }\r\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\r\n@mixin icon-property-advanced { content: \"\\e606\"; }\r\n@mixin icon-property-add { content: \"\\e607\"; }\r\n@mixin icon-repository-add { content: \"\\e608\"; }\r\n@mixin icon-repository-remove { content: \"\\e609\"; }\r\n@mixin icon-repository { content: \"\\e60a\"; }\r\n@mixin icon-result-server { content: \"\\e60b\"; }\r\n@mixin icon-folder { content: \"\\e60c\"; }\r\n@mixin icon-folder-open { content: \"\\e60d\"; }\r\n@mixin icon-left { content: \"\\e60e\"; }\r\n@mixin icon-right { content: \"\\e60f\"; }\r\n@mixin icon-up { content: \"\\e610\"; }\r\n@mixin icon-down { content: \"\\e611\"; }\r\n@mixin icon-undo { content: \"\\e612\"; }\r\n@mixin icon-redo { content: \"\\e613\"; }\r\n@mixin icon-screen { content: \"\\e614\"; }\r\n@mixin icon-laptop { content: \"\\e615\"; }\r\n@mixin icon-tablet { content: \"\\e616\"; }\r\n@mixin icon-phone { content: \"\\e617\"; }\r\n@mixin icon-move { content: \"\\e618\"; }\r\n@mixin icon-bin { content: \"\\e619\"; }\r\n@mixin icon-shuffle { content: \"\\e61a\"; }\r\n@mixin icon-print { content: \"\\e61b\"; }\r\n@mixin icon-tools { content: \"\\e61c\"; }\r\n@mixin icon-settings { content: \"\\e61d\"; }\r\n@mixin icon-video { content: \"\\e61e\"; }\r\n@mixin icon-find { content: \"\\e61f\"; }\r\n@mixin icon-image { content: \"\\e620\"; }\r\n@mixin icon-edit { content: \"\\e621\"; }\r\n@mixin icon-document { content: \"\\e622\"; }\r\n@mixin icon-resize-grid { content: \"\\e623\"; }\r\n@mixin icon-resize { content: \"\\e624\"; }\r\n@mixin icon-help { content: \"\\e625\"; }\r\n@mixin icon-mobile-menu { content: \"\\e626\"; }\r\n@mixin icon-fix { content: \"\\e627\"; }\r\n@mixin icon-unlock { content: \"\\e628\"; }\r\n@mixin icon-lock { content: \"\\e629\"; }\r\n@mixin icon-ul { content: \"\\e62a\"; }\r\n@mixin icon-ol { content: \"\\e62b\"; }\r\n@mixin icon-email { content: \"\\e62c\"; }\r\n@mixin icon-download { content: \"\\e62d\"; }\r\n@mixin icon-logout { content: \"\\e62e\"; }\r\n@mixin icon-login { content: \"\\e62f\"; }\r\n@mixin icon-spinner { content: \"\\e630\"; }\r\n@mixin icon-preview { content: \"\\e631\"; }\r\n@mixin icon-external { content: \"\\e632\"; }\r\n@mixin icon-time { content: \"\\e633\"; }\r\n@mixin icon-save { content: \"\\e634\"; }\r\n@mixin icon-warning { content: \"\\e635\"; }\r\n@mixin icon-add { content: \"\\e636\"; }\r\n@mixin icon-error { content: \"\\e900\"; }\r\n@mixin icon-close { content: \"\\e637\"; }\r\n@mixin icon-success { content: \"\\e638\"; }\r\n@mixin icon-remove { content: \"\\e639\"; }\r\n@mixin icon-info { content: \"\\e63a\"; }\r\n@mixin icon-danger { content: \"\\e63b\"; }\r\n@mixin icon-users { content: \"\\e63c\"; }\r\n@mixin icon-user { content: \"\\e63d\"; }\r\n@mixin icon-test-taker { content: \"\\e63e\"; }\r\n@mixin icon-test-takers { content: \"\\e63f\"; }\r\n@mixin icon-item { content: \"\\e640\"; }\r\n@mixin icon-test { content: \"\\e641\"; }\r\n@mixin icon-delivery { content: \"\\e642\"; }\r\n@mixin icon-eye-slash { content: \"\\e643\"; }\r\n@mixin icon-result { content: \"\\e644\"; }\r\n@mixin icon-delivery-small { content: \"\\e645\"; }\r\n@mixin icon-upload { content: \"\\e646\"; }\r\n@mixin icon-result-small { content: \"\\e647\"; }\r\n@mixin icon-mobile-preview { content: \"\\e648\"; }\r\n@mixin icon-extension { content: \"\\e649\"; }\r\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\r\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\r\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\r\n@mixin icon-table { content: \"\\e64d\"; }\r\n@mixin icon-anchor { content: \"\\e64e\"; }\r\n@mixin icon-unlink { content: \"\\e64f\"; }\r\n@mixin icon-link { content: \"\\e650\"; }\r\n@mixin icon-right-left { content: \"\\e651\"; }\r\n@mixin icon-left-right { content: \"\\e652\"; }\r\n@mixin icon-special-character { content: \"\\e653\"; }\r\n@mixin icon-source { content: \"\\e654\"; }\r\n@mixin icon-new-page { content: \"\\e655\"; }\r\n@mixin icon-templates { content: \"\\e656\"; }\r\n@mixin icon-cut { content: \"\\e657\"; }\r\n@mixin icon-replace { content: \"\\e658\"; }\r\n@mixin icon-copy { content: \"\\e659\"; }\r\n@mixin icon-paste { content: \"\\e65a\"; }\r\n@mixin icon-select-all { content: \"\\e65b\"; }\r\n@mixin icon-paste-text { content: \"\\e65c\"; }\r\n@mixin icon-paste-word { content: \"\\e65d\"; }\r\n@mixin icon-bold { content: \"\\e65e\"; }\r\n@mixin icon-italic { content: \"\\e65f\"; }\r\n@mixin icon-underline { content: \"\\e660\"; }\r\n@mixin icon-subscript { content: \"\\e661\"; }\r\n@mixin icon-superscript { content: \"\\e662\"; }\r\n@mixin icon-strike-through { content: \"\\e663\"; }\r\n@mixin icon-decrease-indent { content: \"\\e664\"; }\r\n@mixin icon-increase-indent { content: \"\\e665\"; }\r\n@mixin icon-block-quote { content: \"\\e666\"; }\r\n@mixin icon-div-container { content: \"\\e667\"; }\r\n@mixin icon-align-left { content: \"\\e668\"; }\r\n@mixin icon-center { content: \"\\e669\"; }\r\n@mixin icon-align-right { content: \"\\e66a\"; }\r\n@mixin icon-justify { content: \"\\e66b\"; }\r\n@mixin icon-choice { content: \"\\e66c\"; }\r\n@mixin icon-inline-choice { content: \"\\e66d\"; }\r\n@mixin icon-match { content: \"\\e66e\"; }\r\n@mixin icon-associate { content: \"\\e66f\"; }\r\n@mixin icon-media { content: \"\\e670\"; }\r\n@mixin icon-graphic-order { content: \"\\e671\"; }\r\n@mixin icon-hotspot { content: \"\\e672\"; }\r\n@mixin icon-graphic-gap { content: \"\\e673\"; }\r\n@mixin icon-graphic-associate { content: \"\\e674\"; }\r\n@mixin icon-select-point { content: \"\\e675\"; }\r\n@mixin icon-pin { content: \"\\e676\"; }\r\n@mixin icon-import { content: \"\\e677\"; }\r\n@mixin icon-export { content: \"\\e678\"; }\r\n@mixin icon-move-item { content: \"\\e679\"; }\r\n@mixin icon-meta-data { content: \"\\e67a\"; }\r\n@mixin icon-slider { content: \"\\e67b\"; }\r\n@mixin icon-summary-report { content: \"\\e67c\"; }\r\n@mixin icon-text-entry { content: \"\\e67d\"; }\r\n@mixin icon-extended-text { content: \"\\e67e\"; }\r\n@mixin icon-eraser { content: \"\\e67f\"; }\r\n@mixin icon-row { content: \"\\e680\"; }\r\n@mixin icon-column { content: \"\\e681\"; }\r\n@mixin icon-text-color { content: \"\\e682\"; }\r\n@mixin icon-background-color { content: \"\\e683\"; }\r\n@mixin icon-spell-check { content: \"\\e684\"; }\r\n@mixin icon-polygon { content: \"\\e685\"; }\r\n@mixin icon-rectangle { content: \"\\e686\"; }\r\n@mixin icon-gap-match { content: \"\\e687\"; }\r\n@mixin icon-order { content: \"\\e688\"; }\r\n@mixin icon-hottext { content: \"\\e689\"; }\r\n@mixin icon-free-form { content: \"\\e68a\"; }\r\n@mixin icon-step-backward { content: \"\\e68b\"; }\r\n@mixin icon-fast-backward { content: \"\\e68c\"; }\r\n@mixin icon-backward { content: \"\\e68d\"; }\r\n@mixin icon-play { content: \"\\e68e\"; }\r\n@mixin icon-pause { content: \"\\e68f\"; }\r\n@mixin icon-stop { content: \"\\e690\"; }\r\n@mixin icon-forward { content: \"\\e691\"; }\r\n@mixin icon-fast-forward { content: \"\\e692\"; }\r\n@mixin icon-step-forward { content: \"\\e693\"; }\r\n@mixin icon-ellipsis { content: \"\\e694\"; }\r\n@mixin icon-circle { content: \"\\e695\"; }\r\n@mixin icon-target { content: \"\\e696\"; }\r\n@mixin icon-guide-arrow { content: \"\\e697\"; }\r\n@mixin icon-range-slider-right { content: \"\\e698\"; }\r\n@mixin icon-range-slider-left { content: \"\\e699\"; }\r\n@mixin icon-radio-checked { content: \"\\e69a\"; }\r\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\r\n@mixin icon-checkbox { content: \"\\e69b\"; }\r\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\r\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\r\n@mixin icon-result-nok { content: \"\\e69e\"; }\r\n@mixin icon-result-ok { content: \"\\e69f\"; }\r\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\r\n@mixin icon-filter { content: \"\\e6a1\"; }\r\n@mixin icon-translate { content: \"\\e6a2\"; }\r\n@mixin icon-eject { content: \"\\e6a3\"; }\r\n@mixin icon-continue { content: \"\\e6a4\"; }\r\n@mixin icon-radio { content: \"\\e6a5\"; }\r\n@mixin icon-sphere { content: \"\\e6a6\"; }\r\n@mixin icon-reset { content: \"\\e6a7\"; }\r\n@mixin icon-smaller { content: \"\\e6a8\"; }\r\n@mixin icon-larger { content: \"\\e6a9\"; }\r\n@mixin icon-clock { content: \"\\e6aa\"; }\r\n@mixin icon-font { content: \"\\e6ab\"; }\r\n@mixin icon-maths { content: \"\\e6ac\"; }\r\n@mixin icon-grip { content: \"\\e6ad\"; }\r\n@mixin icon-rubric { content: \"\\e6ae\"; }\r\n@mixin icon-audio { content: \"\\e6af\"; }\r\n@mixin icon-grip-h { content: \"\\e6b0\"; }\r\n@mixin icon-magicwand { content: \"\\e6b1\"; }\r\n@mixin icon-loop { content: \"\\ea2e\"; }\r\n@mixin icon-calendar { content: \"\\e953\"; }\r\n@mixin icon-reload { content: \"\\e984\"; }\r\n@mixin icon-speed { content: \"\\e9a6\"; }\r\n@mixin icon-volume { content: \"\\ea27\"; }\r\n@mixin icon-contrast { content: \"\\e9d5\"; }\r\n@mixin icon-headphones { content: \"\\e910\"; }\r\n@mixin icon-compress { content: \"\\f066\"; }\r\n@mixin icon-map-o { content: \"\\f278\"; }\r\n@mixin icon-variable { content: \"\\e908\"; }\r\n@mixin icon-tooltip { content: \"\\e90c\"; }\r\n@mixin icon-globe { content: \"\\e9c9\"; }\r\n@mixin icon-highlighter { content: \"\\e90f\"; }\r\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\r\n@mixin icon-play-from-here { content: \"\\e912\"; }\r\n","// buttons and alerts\r\n$success: rgb(14, 145, 75);\r\n$info: rgb(14, 93, 145);\r\n$warning: rgb(216, 174, 91);\r\n$danger: rgb(201, 96, 67);\r\n$error: rgb(186, 18, 43);\r\n$activeInteraction: rgb(195, 90, 19);\r\n\r\n// corporate identity\r\n$logoRed: rgb(186, 18, 43);\r\n$grey: rgb(173, 161, 148);\r\n$darkBlueGrey: rgb(164, 187, 197);\r\n$mediumBlueGrey: rgb(193, 212, 220);\r\n$lightBlueGrey: rgb(228, 236, 239);\r\n$brownRedGrey: rgb(154, 137, 123);\r\n$darkBrown: rgb(111, 99, 89);\r\n$websiteBorder: rgb(141, 148, 158);\r\n\r\n// ui elements, these should only variations of the above\r\n// naming convention: jQueryUi theme roller -> camelCase\r\n\r\n$textColor: #222;\r\n$textHighlight: white;\r\n\r\n$uiGeneralContentBg: white();\r\n$uiGeneralContentBorder: #ddd;\r\n\r\n$uiHeaderBg: #d4d5d7;\r\n\r\n$uiClickableDefaultBg: #f3f1ef;\r\n$uiClickableHoverBg: whiten($info, 0.2);\r\n//$uiClickableActiveBg: $uiHeaderBg;\r\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\r\n//$uiClickableActiveBg: #aaa;\r\n\r\n$uiSelectableSelectedBg: whiten($info, 0.2);\r\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\r\n$uiSelectableHoverBg: whiten($info, 0.9);\r\n\r\n$uiOverlay: $lightBlueGrey;\r\n\r\n// new layout. Implemented now only for review panel\r\n$uiReviewPanelBg: #f2f2f2;\r\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\r\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\r\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\r\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\r\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\r\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\r\n\r\n// sidebars etc.\r\n$canvas: mix(#fff, $grey, 85%);\r\n\r\n// colors taken from feedback.scss\r\n$successBgColor: whiten($success, 0.8);\r\n$successBorderColor: whiten($success, 0.1);\r\n\r\n$infoBgColor: whiten($info, 0.8);\r\n$infoBorderColor: whiten($info, 0.1);\r\n\r\n$warningBgColor: whiten($warning, 0.8);\r\n$warningBorderColor: whiten($warning, 0.1);\r\n\r\n$dangerBgColor: whiten($danger, 0.8);\r\n$dangerBorderColor: whiten($danger, 0.1);\r\n\r\n$errorBgColor: whiten($error, 0.8);\r\n$errorBorderColor: whiten($error, 0.1);\r\n\r\n$darkBar: rgb(51, 51, 51);\r\n$darkBarTxt: rgb(230, 230, 230);\r\n$darkBarIcon: rgb(220, 220, 220);\r\n\r\n$actionLinkColor: #276d9b;\r\n$actionLinkHoverColor: #4f83a7;\r\n\r\n$colorWheel-01: #c3ba13;\r\n$colorWheel-02: #84a610;\r\n$colorWheel-03: #2b8e0e;\r\n$colorWheel-04: #0f9787;\r\n$colorWheel-05: #0e5d91;\r\n$colorWheel-06: #0d2689;\r\n$colorWheel-07: #400d83;\r\n$colorWheel-08: #960e7d;\r\n$colorWheel-09: #ba122b;\r\n$colorWheel-10: #c34713;\r\n$colorWheel-11: #c36f13;\r\n$colorWheel-12: #c39413;\r\n"]}
+{"version":3,"sources":["../../../scss/inc/_functions.scss","../scss/player.scss","../../../scss/inc/fonts/_tao-icon-vars.scss","../../../scss/inc/_colors.scss"],"names":[],"mappings":"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","file":"player.css","sourcesContent":["@mixin iterate-sprite($iconList, $x, $y, $direction, $prefix:'') {\r\n    @each $icon in $iconList {\r\n        #{$prefix}#{$icon} {\r\n            background-position: $x * 1px $y * 1px;\r\n        }\r\n        @if $direction == 'x' {\r\n            $x: $x - 16;\r\n        } @else {\r\n            $y: $y - 16;\r\n        }\r\n    }\r\n}\r\n\r\n/*\r\nUsage:\r\n- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,\r\n   if 3 colors used then the position of each will be 33,33%\r\n- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,\r\n   first param - color, second - position. Also you can use px or other valid units for set position.\r\n*/\r\n@mixin linear-gradient($colorList, $direction: 'to right') {\r\n    $percentage: 0;\r\n    $units: '%';\r\n    $count: length($colorList);\r\n    $increment: 100 / ($count - 1);\r\n    $css: #{$direction + ', '};\r\n    $sep: ', ';\r\n    @each $colorItem in $colorList {\r\n        $color: $colorItem;\r\n        @if (length($colorItem) > 1) {\r\n            $color: nth($colorItem, 1);\r\n            $percentage: nth($colorItem, 2);\r\n            $units: '';\r\n        }\r\n        @if ($percentage >= 100 or index($colorList, $colorItem) == $count) {\r\n            $sep: '';\r\n        }\r\n        $css: #{$css + $color + ' ' + $percentage + $units + $sep};\r\n        $percentage: $percentage + $increment;\r\n    }\r\n    background: linear-gradient( #{$css} );\r\n}\r\n\r\n@mixin grid-unit($span, $numCols: 12, $gutter: 0) {\r\n    $gridPx: 840;\r\n    $rawSpanPx: (($gridPx - ($numCols * $gutter)) / $numCols);\r\n    $spanPx: $rawSpanPx * $span + (($span - 1) * $gutter);\r\n    $spanPercent: widthPerc($spanPx, $gridPx);\r\n    $marginPercent: widthPerc($gutter, $gridPx);\r\n    margin-left: $marginPercent;\r\n    width: $spanPercent;\r\n}\r\n\r\n\r\n@mixin vendor-prefix($property, $value, $whatToPrefix: property, $prefixes: (-webkit-, -moz-, -ms-, -o-, '')) {\r\n    @if $whatToPrefix == 'property' {\r\n        @each $prefix in $prefixes {\r\n            #{$prefix + $property}: #{$value};\r\n        }\r\n    }\r\n    @else if $whatToPrefix == 'value' {\r\n        @each $prefix in $prefixes {\r\n            #{$property}: #{$prefix + $value};\r\n        }\r\n    }\r\n}\r\n@mixin flex-container($wrapBehavior: nowrap, $direction : row) {\r\n    @include vendor-prefix(display, flex, value, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(flex-direction, $direction, property, (-ms-, -webkit-, ''));\r\n    @include vendor-prefix(flex-wrap, $wrapBehavior, property, (-ms-, -webkit-, ''));\r\n\r\n    @include vendor-prefix(justify-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-content, flex-start, property, (-webkit-, ''));\r\n\r\n    @include vendor-prefix(align-items, stretch, property, (-webkit-, ''));\r\n}\r\n\r\n@mixin simple-flex-box($width: auto, $minWidth: 1) {\r\n\r\n    @include vendor-prefix(order, 0, property, (-ms-, -webkit-, ''));\r\n    flex-item-align: stretch;\r\n    -ms-flex-item-align: stretch;\r\n    @include vendor-prefix(align-self, stretch, property, (-webkit-, ''));\r\n\r\n    // if both, min width and width are set, width will win this conflict\r\n    @if ($width == auto) {\r\n        @if ($minWidth != 1) {\r\n            @include vendor-prefix(flex, 1 1 $minWidth, property, (-ms-, -webkit-, ''));\r\n        }\r\n        @else {\r\n            @include vendor-prefix(flex, 1 1 auto, property, (-ms-, -webkit-, ''));\r\n            // @see https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#Values\r\n            // for a discussion auto vs. main-size\r\n            @include vendor-prefix(flex, 1 1, property, (-ms-, -webkit-, ''));\r\n        }\r\n    }\r\n    @else {\r\n        @include vendor-prefix(flex, 0 0 $width, property, (-ms-, -webkit-, ''));\r\n    }\r\n}\r\n\r\n\r\n@mixin box-shadow($horiz: 1px, $vert: 1px, $blur: 2px, $spread: 0, $color: rgba(0, 0, 0, .2)) {\r\n    @include vendor-prefix(box-shadow, $horiz $vert $blur $spread $color, property);\r\n}\r\n\r\n@mixin simple-border($color: #ddd) {\r\n    border: 1px solid $color;\r\n    border-radius: 2px;\r\n    -webkit-border-radius: 2px;\r\n}\r\n\r\n@mixin border-radius($radius: 2) {\r\n    -moz-border-radius: $radius * 1px;\r\n    -webkit-border-radius: $radius * 1px;\r\n    border-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom($radius: 2) {\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-left($radius: 2) {\r\n    -webkit-border-top-left-radius: $radius * 1px;\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-topleft: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-top-left-radius: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-right($radius: 2) {\r\n    -webkit-border-top-right-radius: $radius * 1px;\r\n    -webkit-border-bottom-right-radius: $radius * 1px;\r\n    -moz-border-radius-topright: $radius * 1px;\r\n    -moz-border-radius-bottomright: $radius * 1px;\r\n    border-top-right-radius: $radius * 1px;\r\n    border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-left($radius: 2) {\r\n  -webkit-border-top-left-radius: $radius * 1px;\r\n  -moz-border-radius-topleft: $radius * 1px;\r\n  border-top-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-top-right($radius: 2) {\r\n  -webkit-border-top-right-radius: $radius * 1px;\r\n  -moz-border-radius-topright: $radius * 1px;\r\n  border-top-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-right($radius: 2) {\r\n  -webkit-border-bottom-right-radius: $radius * 1px;\r\n  -moz-border-radius-bottomright: $radius * 1px;\r\n  border-bottom-right-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-radius-bottom-left($radius: 2) {\r\n    -webkit-border-bottom-left-radius: $radius * 1px;\r\n    -moz-border-radius-bottomleft: $radius * 1px;\r\n    border-bottom-left-radius: $radius * 1px;\r\n}\r\n\r\n@mixin border-box() {\r\n    -moz-box-sizing: border-box;\r\n    -webkit-box-sizing: border-box;\r\n    box-sizing: border-box;\r\n}\r\n\r\n@function whiten($color, $white: 0.3) {\r\n    @return mix(#fff, $color, ($white * 100) * 1%);\r\n}\r\n\r\n@function blacken($color, $black: 0.3) {\r\n    @return mix(#000, $color, ($black * 100) * 1%);\r\n}\r\n\r\n@function widthPerc($colWidth, $context) {\r\n    @return ($colWidth * 100 / $context) * 1%\r\n}\r\n\r\n@function remDist($fontSizePx) {\r\n    @return ($fontSizePx / 10) * 1rem\r\n}\r\n\r\n@function black($alpha: 1) {\r\n    @return (rgba(0, 0, 0, $alpha))\r\n}\r\n\r\n@function white($alpha: 1) {\r\n    @return (rgba(255, 255, 255, $alpha))\r\n}\r\n\r\n@mixin font-size($remPx, $important: false) {\r\n    @if $important == true {\r\n        font-size: ($remPx) * 1px !important;\r\n        font-size: ($remPx / 10) * 1rem !important;\r\n    }\r\n    @else {\r\n        font-size: ($remPx) * 1px;\r\n        font-size: ($remPx / 10) * 1rem;\r\n    }\r\n}\r\n\r\n\r\n@mixin keyframes($name) {\r\n    @-o-keyframes #{$name} { @content };\r\n    @-moz-keyframes #{$name} { @content };\r\n    @-webkit-keyframes #{$name} { @content };\r\n    @keyframes #{$name} { @content };\r\n}\r\n\r\n\r\n@mixin animation($value, $type:'') {\r\n    $animation: animation;\r\n    @if $type != '' {\r\n        $animation:  $animation + '-' + $type;\r\n    }\r\n    @include vendor-prefix($animation, $value, property);\r\n}\r\n\r\n/// CSS transition mixin to the current selection (apply also vendor prefixes).\r\n/// See <https://developer.mozilla.org/en-US/docs/Web/CSS/transition> for the values\r\n///\r\n/// @param {property} [$type = all] the CSS property to apply the transition to\r\n/// @param {time} [$duration = .5s] the transition property\r\n/// @param {timing-function} [$effect = ease-out] the transition property\r\n@mixin transition($type : all, $duration : 0.5s, $effect : ease-out, $delay : 0s){\r\n    @include vendor-prefix(transition, $type + ', ' + $duration + ', ' + $effect + ', ' + $delay, property);\r\n}\r\n\r\n@mixin fade($duration: 1s){\r\n\r\n    @include keyframes(fade) {\r\n        0%   {opacity:0;}\r\n        50%   {opacity:1;}\r\n        100% {opacity:0;}\r\n    }\r\n\r\n    @include vendor-prefix(animation, fade 1s forwards, property);\r\n}\r\n\r\n@mixin repeat(){\r\n    @include animation(infinite, iteration-count);\r\n}\r\n\r\n@mixin largeHeading() {\r\n    @include font-size(20);\r\n    font-family: $headingFont;\r\n    font-style: normal;\r\n}\r\n\r\n@mixin disableSelect() {\r\n    @include vendor-prefix(user-select, none, property);\r\n}\r\n\r\n/* based on \"visually-hidden\" mixin in LDS for accessibility goals */\r\n@mixin visuallyHidden() {\r\n    position: absolute;\r\n    width: 1px;\r\n    height: 1px;\r\n    overflow: hidden;\r\n    clip: rect(1px, 1px, 1px, 1px);\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n","@import \"inc/bootstrap\";\r\n\r\n$playerActionSize: 2.2rem;\r\n$playerActionSpace: 1rem;\r\n$playerBackground: black();\r\n$playerBorder: $darkBar;\r\n$playerText: #999;\r\n$playerIcon: $darkBarIcon;\r\n$playerTextOverlay: white();\r\n$playerSliderBorder: $uiGeneralContentBorder;\r\n$playerSliderBackground: $uiGeneralContentBg;\r\n$playerSliderColor: $darkBar;\r\n$playerSliderHandle: whiten($playerSliderColor, .4);\r\n$playerSliderHightlight: whiten($playerSliderColor, .2);\r\n$controlsHeight: 36px;\r\n\r\n.mediaplayer {\r\n    position: relative;\r\n    @include simple-border($playerBorder);\r\n    @include border-radius(2);\r\n    background: $playerBackground;\r\n    max-width: 100%;\r\n    min-height: $controlsHeight;\r\n    min-width: 200px;\r\n    direction: ltr;\r\n\r\n    &.youtube {\r\n        .player {\r\n            width: 100%;\r\n            height: 0px;\r\n            padding-bottom: 56.25%; // 56.25% for widescreen 16:9 aspect ratio videos\r\n        }\r\n    }\r\n    .icon-sound:before {\r\n        @include icon-audio();\r\n    }\r\n    .icon-mute:before {\r\n        @include icon-result-nok();\r\n    }\r\n\r\n    .error {\r\n        display: none;\r\n    }\r\n\r\n    .player {\r\n        position: relative;\r\n        height: calc(100% - #{$controlsHeight});\r\n        width: 100%;\r\n\r\n        iframe {\r\n            pointer-events: none;\r\n            position: absolute;\r\n            left: 0;\r\n            top: 0;\r\n            width: 100%;\r\n            height: 100%\r\n        }\r\n\r\n        .media:not(.youtube) {\r\n            display: block;\r\n            width: 100%;\r\n            height: auto;\r\n            max-height: 100%;\r\n        }\r\n\r\n        .player-overlay {\r\n            position: absolute;\r\n            z-index: 1;\r\n            top: 0;\r\n            left: 0;\r\n            bottom: 0;\r\n            right: 0;\r\n            opacity: 1;\r\n            background: transparent none;\r\n            a.action {\r\n                 span.icon {\r\n                    font-family: 'tao' !important;\r\n                }\r\n            }\r\n        }\r\n\r\n        .action {\r\n            position: absolute;\r\n            z-index: 2;\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%);\r\n            margin-top: -32px;\r\n            text-align: center;\r\n            text-decoration: none;\r\n            display: none;\r\n            @include font-size(64);\r\n            color: $playerTextOverlay;\r\n\r\n            .icon {\r\n                @include border-radius(10);\r\n                padding: 6px 12px;\r\n                background-color: $playerBackground;\r\n                opacity: 0.2;\r\n\r\n                &:hover {\r\n                    opacity: 0.6;\r\n                }\r\n            }\r\n\r\n            &.reload {\r\n                width: 100%;\r\n                font-size: 50px;\r\n                line-height: 30px;\r\n\r\n                &:hover {\r\n                    .icon {\r\n                        opacity: 1;\r\n                        font-family: 'tao' !important;\r\n                    }\r\n                }\r\n\r\n                .icon {\r\n                    opacity: 0.6;\r\n                    background: none;\r\n                    font-family: 'tao' !important;\r\n                }\r\n                .message {\r\n                    font-size: 20px;\r\n                }\r\n\r\n                .icon, .message {\r\n                    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    .controls {\r\n        visibility: hidden;\r\n        position: relative;\r\n        padding: 5px;\r\n        display: table;\r\n        table-layout: fixed;\r\n        width: 100%;\r\n        border-top: 1px solid $playerBorder;\r\n        height: $controlsHeight;\r\n\r\n        .bar {\r\n            display: table-row;\r\n        }\r\n        .control {\r\n            display: table-cell;\r\n        }\r\n\r\n        .actions {\r\n            position: relative;\r\n            @include transition(all, 0.1,ease-in-out);\r\n\r\n            .action {\r\n                text-align: center;\r\n                line-height: $playerActionSize;\r\n                width: $playerActionSize;\r\n                height: $playerActionSize;\r\n                text-decoration: none;\r\n                color: $playerIcon;\r\n                @include transition(all, 0.2, ease-in-out);\r\n\r\n                &:hover {\r\n                    opacity: 1;\r\n                }\r\n\r\n                .icon {\r\n                    line-height: $playerActionSize;\r\n                    font-family: 'tao' !important;\r\n                }\r\n            }\r\n\r\n            .play {\r\n                opacity: 0.7;\r\n                border-right: 1px solid $playerBorder;\r\n            }\r\n\r\n            .mute {\r\n                opacity: 0.8;\r\n                border-left: 1px solid $playerBorder;\r\n            }\r\n        }\r\n\r\n        .slider {\r\n            cursor: pointer;\r\n            @include simple-border($playerSliderBorder);\r\n            @include border-radius(10);\r\n            @include transition(all, 0.1, ease-in-out);\r\n            background: $playerSliderBackground;\r\n\r\n            .noUi-background {\r\n                @include border-radius(10);\r\n                background: $playerSliderBackground;\r\n            }\r\n            &.noUi-connect, .noUi-connect {\r\n                @include border-radius(10);\r\n                background: $playerSliderColor;\r\n            }\r\n\r\n            .noUi-handle {\r\n                width: 11px;\r\n                height: 11px;\r\n                @include simple-border($playerSliderBorder);\r\n                @include border-radius(10);\r\n                background: $playerSliderHandle;\r\n            }\r\n            .noUi-handle:hover {\r\n                background: $playerSliderHightlight;\r\n            }\r\n            .noUi-handle:after {\r\n                display: none;\r\n            }\r\n\r\n            &.noUi-horizontal {\r\n                height: 9px;\r\n\r\n                .noUi-handle {\r\n                    top: -2px;\r\n                }\r\n            }\r\n\r\n            &.noUi-vertical {\r\n                width: 9px;\r\n\r\n                .noUi-handle {\r\n                    left: -2px;\r\n                }\r\n            }\r\n        }\r\n\r\n        .infos {\r\n            cursor: default;\r\n\r\n            margin: 0 $playerActionSpace;\r\n            line-height: $playerActionSize;\r\n\r\n            color: $playerText;\r\n            @include font-size(10);\r\n            font-weight: bold;\r\n\r\n            [data-control=\"time-end\"]:before {\r\n                content: ' / ';\r\n            }\r\n        }\r\n\r\n        .timer {\r\n            width: 8rem;\r\n            text-align: center;\r\n        }\r\n\r\n        .seek {\r\n            position: relative;\r\n            height: 1rem;\r\n            margin-top: 5px;\r\n            padding-left: $playerActionSpace;\r\n        }\r\n\r\n        .playback {\r\n            margin-right: $playerActionSpace;\r\n            width: $playerActionSize;\r\n        }\r\n\r\n        .sound {\r\n            width: $playerActionSize;\r\n            height: $playerActionSize;\r\n\r\n            .action {\r\n                position: relative;\r\n                z-index: 1001;\r\n            }\r\n            .volume {\r\n                cursor: default;\r\n                position: absolute;\r\n                z-index: 1000;\r\n                background-color: $playerBackground;\r\n                margin: 1px 2px;\r\n                padding: 10px 0;\r\n                width: 100%;\r\n                height: 0;\r\n                top: 0;\r\n                left: -1px;\r\n                opacity : 0;\r\n                text-align: center;\r\n                border: solid 1px $playerBorder;\r\n                pointer-events: none;\r\n                overflow: hidden;\r\n                @include vendor-prefix(transition, 'height 300ms ease-out, top 300ms ease-out, opacity 50ms linear 250ms', property);\r\n\r\n                &.up, &.down {\r\n                    height: 120px;\r\n                    opacity : 1;\r\n                    pointer-events: auto;\r\n                    .slider {\r\n                        display: inline-block;\r\n                        opacity : 1;\r\n                        transition: opacity 50ms linear 200ms;\r\n                        @include vendor-prefix(transition, 'opacity 50ms linear 200ms', property);\r\n                    }\r\n                }\r\n                &.up {\r\n                    top: -127px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, top 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n                &.down {\r\n                    top: 30px;\r\n                     @include vendor-prefix(transition, 'height 300ms ease-out 50ms, opacity 50ms linear', property);\r\n                }\r\n            }\r\n\r\n            .slider {\r\n                opacity : 0;\r\n                display: none;\r\n                .noUi-handle {\r\n                    cursor: pointer;\r\n                    width: 9px;\r\n                    height: 9px;\r\n                }\r\n\r\n                &.noUi-horizontal {\r\n                    width: 50px;\r\n                    height: 7px;\r\n                }\r\n\r\n                &.noUi-vertical {\r\n                    width: 7px;\r\n                    height: 100px;\r\n                }\r\n            }\r\n        }\r\n\r\n        [data-control=\"play\"] {\r\n            display: none;\r\n        }\r\n        [data-control=\"pause\"] {\r\n            display: none;\r\n        }\r\n\r\n        [data-control=\"mute\"] {\r\n            display: inline-block;\r\n        }\r\n        [data-control=\"unmute\"] {\r\n            display: none;\r\n        }\r\n    }\r\n\r\n    &.video, &.youtube {\r\n        .sound {\r\n            .volume {\r\n                width: 2.8rem;\r\n                bottom: $playerActionSize;\r\n                right: 0;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.audio {\r\n        .sound {\r\n            .volume {\r\n                height: $playerActionSize;\r\n                right: $playerActionSize;\r\n                bottom: 0;\r\n            }\r\n        }\r\n\r\n        &.stalled {\r\n            .player {\r\n                .player-overlay {\r\n                    [data-control=\"reload\"] {\r\n                        display: flex;\r\n                        align-items: center;\r\n                        background-color: #000;\r\n                        margin: 0;\r\n                        flex-wrap: wrap;\r\n                        padding: 5px 5px 5px 50px;\r\n                        text-align: left;\r\n                        line-height: 2.3rem;\r\n                        &.reload {\r\n                            width: calc(100% + 2px);\r\n                            font-size: 20px;\r\n                            line-height: 20px;\r\n                            min-height: 36px;\r\n\r\n                            .icon {\r\n                                text-shadow: none;\r\n                                position: absolute;\r\n                                left: 0;\r\n                                font-size: 2rem;\r\n                                font-weight: bold;\r\n                            }\r\n\r\n                            .message {\r\n                                text-shadow: none;\r\n                                font-size: 1.3rem;\r\n                                margin-right: 5px;\r\n                            }\r\n                        }\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.ready {\r\n        .controls {\r\n            visibility: visible;\r\n        }\r\n\r\n        &.paused.canplay {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n                font-family: 'tao' !important;\r\n                a.action {\r\n                    span.icon {\r\n                        font-family: 'tao' !important;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &.youtube.ended, &:not(.preview) {\r\n                .player:hover {\r\n                    [data-control=\"play\"] {\r\n                        display: none;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n\r\n        &.playing.canpause {\r\n            .player-overlay {\r\n                cursor: pointer;\r\n                .action {\r\n                    .icon {\r\n                        font-family: 'tao' !important;\r\n                    }\r\n                }\r\n            }\r\n\r\n            &:not(.audio) {\r\n                .player:hover {\r\n                    [data-control=\"pause\"] {\r\n                        display: inline-block;\r\n                    }\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n    &.playing.canpause {\r\n        .action {\r\n            .icon {\r\n                font-family: 'tao' !important;\r\n            }\r\n        }\r\n        .controls {\r\n            [data-control=\"pause\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.paused.canplay {\r\n        .action {\r\n            .icon {\r\n                font-family: 'tao' !important;\r\n            }\r\n        }\r\n        .controls {\r\n            [data-control=\"play\"] {\r\n                display: inline-block;\r\n            }\r\n            [data-control=\"pause\"] {\r\n                display: none;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.muted {\r\n        .controls {\r\n            [data-control=\"mute\"] {\r\n                display: none;\r\n            }\r\n            [data-control=\"unmute\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.nogui {\r\n        .player {\r\n            iframe {\r\n                pointer-events: inherit;\r\n            }\r\n        }\r\n        .player-overlay {\r\n            display: none !important;\r\n        }\r\n        .controls {\r\n            display: none !important;\r\n        }\r\n    }\r\n\r\n    &.error:not(.stalled) {\r\n        .media, .controls {\r\n            display: none;\r\n        }\r\n\r\n        .error {\r\n            display: table;\r\n            text-align: center;\r\n            width: 100%;\r\n            height: 100%;\r\n\r\n            .message {\r\n                color: $error;\r\n                display: table-cell;\r\n                vertical-align: middle;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.loading:not(.stalled)::before {\r\n        @keyframes spinner {\r\n            to { transform: rotate(360deg); }\r\n        }\r\n\r\n        content: '';\r\n        box-sizing: border-box;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        width: 30px;\r\n        height: 30px;\r\n        margin-top: -15px;\r\n        margin-left: -15px;\r\n        border-radius: 50%;\r\n        border: 1px solid #ccc;\r\n        border-top-color: #07d;\r\n        animation: spinner .6s linear infinite;\r\n    }\r\n\r\n    &.stalled {\r\n        .video {\r\n            filter: blur(4px);\r\n            opacity: 0.4;\r\n        }\r\n        .player-overlay {\r\n            [data-control=\"reload\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n\r\n    &.video:not(.preview):not(.error) {\r\n        .player-overlay {\r\n            [data-control=\"start\"] {\r\n                display: inline-block;\r\n            }\r\n        }\r\n    }\r\n}\r\n\r\n/*# sourceMappingURL=player.css.map */","/* Do not edit */@mixin tao-icon-setup {\r\n  /* use !important to prevent issues with browser extensions that change fonts */\r\n  font-family: 'tao' !important;\r\n  speak: never;\r\n  font-style: normal;\r\n  font-weight: normal;\r\n  font-variant: normal;\r\n  text-transform: none;\r\n  line-height: 1;\r\n\r\n  /* Better Font Rendering =========== */\r\n  -webkit-font-smoothing: antialiased;\r\n  -moz-osx-font-smoothing: grayscale;\r\n}\r\n\r\n@mixin icon-info-bare { content: \"\\e923\"; }\r\n@mixin icon-bookmark-outline { content: \"\\e922\"; }\r\n@mixin icon-bookmark { content: \"\\e921\"; }\r\n@mixin icon-indicator { content: \"\\e920\"; }\r\n@mixin icon-add-subsection { content: \"\\e918\"; }\r\n@mixin icon-wrap-inline { content: \"\\e915\"; }\r\n@mixin icon-wrap-left { content: \"\\e916\"; }\r\n@mixin icon-wrap-right { content: \"\\e917\"; }\r\n@mixin icon-offline { content: \"\\e913\"; }\r\n@mixin icon-online { content: \"\\e914\"; }\r\n@mixin icon-tab { content: \"\\e90d\"; }\r\n@mixin icon-untab { content: \"\\e90e\"; }\r\n@mixin icon-multi-select { content: \"\\e90b\"; }\r\n@mixin icon-clipboard { content: \"\\e90a\"; }\r\n@mixin icon-filebox { content: \"\\e909\"; }\r\n@mixin icon-click-to-speak { content: \"\\e907\"; }\r\n@mixin icon-speech-bubble { content: \"\\f0e5\"; }\r\n@mixin icon-microphone { content: \"\\f130\"; }\r\n@mixin icon-microphone-off { content: \"\\f131\"; }\r\n@mixin icon-disconnect { content: \"\\e905\"; }\r\n@mixin icon-connect { content: \"\\e906\"; }\r\n@mixin icon-eliminate { content: \"\\e904\"; }\r\n@mixin icon-wheelchair { content: \"\\e903\"; }\r\n@mixin icon-text-marker { content: \"\\e902\"; }\r\n@mixin icon-unshield { content: \"\\e32a\"; }\r\n@mixin icon-shield { content: \"\\e8e8\"; }\r\n@mixin icon-tree { content: \"\\e6b4\"; }\r\n@mixin icon-home { content: \"\\e6b3\"; }\r\n@mixin icon-shared-file { content: \"\\e6b2\"; }\r\n@mixin icon-end-attempt { content: \"\\e603\"; }\r\n@mixin icon-icon { content: \"\\f1c5\"; }\r\n@mixin icon-radio-bg { content: \"\\e600\"; }\r\n@mixin icon-checkbox-bg { content: \"\\e601\"; }\r\n@mixin icon-tag { content: \"\\e602\"; }\r\n@mixin icon-style { content: \"\\e604\"; }\r\n@mixin icon-ownership-transfer { content: \"\\e605\"; }\r\n@mixin icon-property-advanced { content: \"\\e606\"; }\r\n@mixin icon-property-add { content: \"\\e607\"; }\r\n@mixin icon-repository-add { content: \"\\e608\"; }\r\n@mixin icon-repository-remove { content: \"\\e609\"; }\r\n@mixin icon-repository { content: \"\\e60a\"; }\r\n@mixin icon-result-server { content: \"\\e60b\"; }\r\n@mixin icon-folder { content: \"\\e60c\"; }\r\n@mixin icon-folder-open { content: \"\\e60d\"; }\r\n@mixin icon-left { content: \"\\e60e\"; }\r\n@mixin icon-right { content: \"\\e60f\"; }\r\n@mixin icon-up { content: \"\\e610\"; }\r\n@mixin icon-down { content: \"\\e611\"; }\r\n@mixin icon-undo { content: \"\\e612\"; }\r\n@mixin icon-redo { content: \"\\e613\"; }\r\n@mixin icon-screen { content: \"\\e614\"; }\r\n@mixin icon-laptop { content: \"\\e615\"; }\r\n@mixin icon-tablet { content: \"\\e616\"; }\r\n@mixin icon-phone { content: \"\\e617\"; }\r\n@mixin icon-move { content: \"\\e618\"; }\r\n@mixin icon-bin { content: \"\\e619\"; }\r\n@mixin icon-shuffle { content: \"\\e61a\"; }\r\n@mixin icon-print { content: \"\\e61b\"; }\r\n@mixin icon-tools { content: \"\\e61c\"; }\r\n@mixin icon-settings { content: \"\\e61d\"; }\r\n@mixin icon-video { content: \"\\e61e\"; }\r\n@mixin icon-find { content: \"\\e61f\"; }\r\n@mixin icon-image { content: \"\\e620\"; }\r\n@mixin icon-edit { content: \"\\e621\"; }\r\n@mixin icon-document { content: \"\\e622\"; }\r\n@mixin icon-resize-grid { content: \"\\e623\"; }\r\n@mixin icon-resize { content: \"\\e624\"; }\r\n@mixin icon-help { content: \"\\e625\"; }\r\n@mixin icon-mobile-menu { content: \"\\e626\"; }\r\n@mixin icon-fix { content: \"\\e627\"; }\r\n@mixin icon-unlock { content: \"\\e628\"; }\r\n@mixin icon-lock { content: \"\\e629\"; }\r\n@mixin icon-ul { content: \"\\e62a\"; }\r\n@mixin icon-ol { content: \"\\e62b\"; }\r\n@mixin icon-email { content: \"\\e62c\"; }\r\n@mixin icon-download { content: \"\\e62d\"; }\r\n@mixin icon-logout { content: \"\\e62e\"; }\r\n@mixin icon-login { content: \"\\e62f\"; }\r\n@mixin icon-spinner { content: \"\\e630\"; }\r\n@mixin icon-preview { content: \"\\e631\"; }\r\n@mixin icon-external { content: \"\\e632\"; }\r\n@mixin icon-time { content: \"\\e633\"; }\r\n@mixin icon-save { content: \"\\e634\"; }\r\n@mixin icon-warning { content: \"\\e635\"; }\r\n@mixin icon-add { content: \"\\e636\"; }\r\n@mixin icon-error { content: \"\\e900\"; }\r\n@mixin icon-close { content: \"\\e637\"; }\r\n@mixin icon-success { content: \"\\e638\"; }\r\n@mixin icon-remove { content: \"\\e639\"; }\r\n@mixin icon-info { content: \"\\e63a\"; }\r\n@mixin icon-danger { content: \"\\e63b\"; }\r\n@mixin icon-users { content: \"\\e63c\"; }\r\n@mixin icon-user { content: \"\\e63d\"; }\r\n@mixin icon-test-taker { content: \"\\e63e\"; }\r\n@mixin icon-test-takers { content: \"\\e63f\"; }\r\n@mixin icon-item { content: \"\\e640\"; }\r\n@mixin icon-test { content: \"\\e641\"; }\r\n@mixin icon-delivery { content: \"\\e642\"; }\r\n@mixin icon-eye-slash { content: \"\\e643\"; }\r\n@mixin icon-result { content: \"\\e644\"; }\r\n@mixin icon-delivery-small { content: \"\\e645\"; }\r\n@mixin icon-upload { content: \"\\e646\"; }\r\n@mixin icon-result-small { content: \"\\e647\"; }\r\n@mixin icon-mobile-preview { content: \"\\e648\"; }\r\n@mixin icon-extension { content: \"\\e649\"; }\r\n@mixin icon-desktop-preview { content: \"\\e64a\"; }\r\n@mixin icon-tablet-preview { content: \"\\e64b\"; }\r\n@mixin icon-insert-horizontal-line { content: \"\\e64c\"; }\r\n@mixin icon-table { content: \"\\e64d\"; }\r\n@mixin icon-anchor { content: \"\\e64e\"; }\r\n@mixin icon-unlink { content: \"\\e64f\"; }\r\n@mixin icon-link { content: \"\\e650\"; }\r\n@mixin icon-right-left { content: \"\\e651\"; }\r\n@mixin icon-left-right { content: \"\\e652\"; }\r\n@mixin icon-special-character { content: \"\\e653\"; }\r\n@mixin icon-source { content: \"\\e654\"; }\r\n@mixin icon-new-page { content: \"\\e655\"; }\r\n@mixin icon-templates { content: \"\\e656\"; }\r\n@mixin icon-cut { content: \"\\e657\"; }\r\n@mixin icon-replace { content: \"\\e658\"; }\r\n@mixin icon-copy { content: \"\\e659\"; }\r\n@mixin icon-paste { content: \"\\e65a\"; }\r\n@mixin icon-select-all { content: \"\\e65b\"; }\r\n@mixin icon-paste-text { content: \"\\e65c\"; }\r\n@mixin icon-paste-word { content: \"\\e65d\"; }\r\n@mixin icon-bold { content: \"\\e65e\"; }\r\n@mixin icon-italic { content: \"\\e65f\"; }\r\n@mixin icon-underline { content: \"\\e660\"; }\r\n@mixin icon-subscript { content: \"\\e661\"; }\r\n@mixin icon-superscript { content: \"\\e662\"; }\r\n@mixin icon-strike-through { content: \"\\e663\"; }\r\n@mixin icon-decrease-indent { content: \"\\e664\"; }\r\n@mixin icon-increase-indent { content: \"\\e665\"; }\r\n@mixin icon-block-quote { content: \"\\e666\"; }\r\n@mixin icon-div-container { content: \"\\e667\"; }\r\n@mixin icon-align-left { content: \"\\e668\"; }\r\n@mixin icon-center { content: \"\\e669\"; }\r\n@mixin icon-align-right { content: \"\\e66a\"; }\r\n@mixin icon-justify { content: \"\\e66b\"; }\r\n@mixin icon-choice { content: \"\\e66c\"; }\r\n@mixin icon-inline-choice { content: \"\\e66d\"; }\r\n@mixin icon-match { content: \"\\e66e\"; }\r\n@mixin icon-associate { content: \"\\e66f\"; }\r\n@mixin icon-media { content: \"\\e670\"; }\r\n@mixin icon-graphic-order { content: \"\\e671\"; }\r\n@mixin icon-hotspot { content: \"\\e672\"; }\r\n@mixin icon-graphic-gap { content: \"\\e673\"; }\r\n@mixin icon-graphic-associate { content: \"\\e674\"; }\r\n@mixin icon-select-point { content: \"\\e675\"; }\r\n@mixin icon-pin { content: \"\\e676\"; }\r\n@mixin icon-import { content: \"\\e677\"; }\r\n@mixin icon-export { content: \"\\e678\"; }\r\n@mixin icon-move-item { content: \"\\e679\"; }\r\n@mixin icon-meta-data { content: \"\\e67a\"; }\r\n@mixin icon-slider { content: \"\\e67b\"; }\r\n@mixin icon-summary-report { content: \"\\e67c\"; }\r\n@mixin icon-text-entry { content: \"\\e67d\"; }\r\n@mixin icon-extended-text { content: \"\\e67e\"; }\r\n@mixin icon-eraser { content: \"\\e67f\"; }\r\n@mixin icon-row { content: \"\\e680\"; }\r\n@mixin icon-column { content: \"\\e681\"; }\r\n@mixin icon-text-color { content: \"\\e682\"; }\r\n@mixin icon-background-color { content: \"\\e683\"; }\r\n@mixin icon-spell-check { content: \"\\e684\"; }\r\n@mixin icon-polygon { content: \"\\e685\"; }\r\n@mixin icon-rectangle { content: \"\\e686\"; }\r\n@mixin icon-gap-match { content: \"\\e687\"; }\r\n@mixin icon-order { content: \"\\e688\"; }\r\n@mixin icon-hottext { content: \"\\e689\"; }\r\n@mixin icon-free-form { content: \"\\e68a\"; }\r\n@mixin icon-step-backward { content: \"\\e68b\"; }\r\n@mixin icon-fast-backward { content: \"\\e68c\"; }\r\n@mixin icon-backward { content: \"\\e68d\"; }\r\n@mixin icon-play { content: \"\\e68e\"; }\r\n@mixin icon-pause { content: \"\\e68f\"; }\r\n@mixin icon-stop { content: \"\\e690\"; }\r\n@mixin icon-forward { content: \"\\e691\"; }\r\n@mixin icon-fast-forward { content: \"\\e692\"; }\r\n@mixin icon-step-forward { content: \"\\e693\"; }\r\n@mixin icon-ellipsis { content: \"\\e694\"; }\r\n@mixin icon-circle { content: \"\\e695\"; }\r\n@mixin icon-target { content: \"\\e696\"; }\r\n@mixin icon-guide-arrow { content: \"\\e697\"; }\r\n@mixin icon-range-slider-right { content: \"\\e698\"; }\r\n@mixin icon-range-slider-left { content: \"\\e699\"; }\r\n@mixin icon-radio-checked { content: \"\\e69a\"; }\r\n@mixin icon-checkbox-indeterminate { content: \"\\e901\"; }\r\n@mixin icon-checkbox { content: \"\\e69b\"; }\r\n@mixin icon-checkbox-crossed { content: \"\\e69c\"; }\r\n@mixin icon-checkbox-checked { content: \"\\e69d\"; }\r\n@mixin icon-result-nok { content: \"\\e69e\"; }\r\n@mixin icon-result-ok { content: \"\\e69f\"; }\r\n@mixin icon-not-evaluated { content: \"\\e6a0\"; }\r\n@mixin icon-filter { content: \"\\e6a1\"; }\r\n@mixin icon-translate { content: \"\\e6a2\"; }\r\n@mixin icon-eject { content: \"\\e6a3\"; }\r\n@mixin icon-continue { content: \"\\e6a4\"; }\r\n@mixin icon-radio { content: \"\\e6a5\"; }\r\n@mixin icon-sphere { content: \"\\e6a6\"; }\r\n@mixin icon-reset { content: \"\\e6a7\"; }\r\n@mixin icon-smaller { content: \"\\e6a8\"; }\r\n@mixin icon-larger { content: \"\\e6a9\"; }\r\n@mixin icon-clock { content: \"\\e6aa\"; }\r\n@mixin icon-font { content: \"\\e6ab\"; }\r\n@mixin icon-maths { content: \"\\e6ac\"; }\r\n@mixin icon-grip { content: \"\\e6ad\"; }\r\n@mixin icon-rubric { content: \"\\e6ae\"; }\r\n@mixin icon-audio { content: \"\\e6af\"; }\r\n@mixin icon-grip-h { content: \"\\e6b0\"; }\r\n@mixin icon-magicwand { content: \"\\e6b1\"; }\r\n@mixin icon-loop { content: \"\\ea2e\"; }\r\n@mixin icon-calendar { content: \"\\e953\"; }\r\n@mixin icon-reload { content: \"\\e984\"; }\r\n@mixin icon-speed { content: \"\\e9a6\"; }\r\n@mixin icon-volume { content: \"\\ea27\"; }\r\n@mixin icon-contrast { content: \"\\e9d5\"; }\r\n@mixin icon-headphones { content: \"\\e910\"; }\r\n@mixin icon-compress { content: \"\\f066\"; }\r\n@mixin icon-map-o { content: \"\\f278\"; }\r\n@mixin icon-variable { content: \"\\e908\"; }\r\n@mixin icon-tooltip { content: \"\\e90c\"; }\r\n@mixin icon-globe { content: \"\\e9c9\"; }\r\n@mixin icon-highlighter { content: \"\\e90f\"; }\r\n@mixin icon-eliminate-crossed { content: \"\\e911\"; }\r\n@mixin icon-play-from-here { content: \"\\e912\"; }\r\n","// buttons and alerts\r\n$success: rgb(14, 145, 75);\r\n$info: rgb(14, 93, 145);\r\n$warning: rgb(216, 174, 91);\r\n$danger: rgb(201, 96, 67);\r\n$error: rgb(186, 18, 43);\r\n$activeInteraction: rgb(195, 90, 19);\r\n\r\n// corporate identity\r\n$logoRed: rgb(186, 18, 43);\r\n$grey: rgb(173, 161, 148);\r\n$darkBlueGrey: rgb(164, 187, 197);\r\n$mediumBlueGrey: rgb(193, 212, 220);\r\n$lightBlueGrey: rgb(228, 236, 239);\r\n$brownRedGrey: rgb(154, 137, 123);\r\n$darkBrown: rgb(111, 99, 89);\r\n$websiteBorder: rgb(141, 148, 158);\r\n\r\n// ui elements, these should only variations of the above\r\n// naming convention: jQueryUi theme roller -> camelCase\r\n\r\n$textColor: #222;\r\n$textHighlight: white;\r\n\r\n$uiGeneralContentBg: white();\r\n$uiGeneralContentBorder: #ddd;\r\n\r\n$uiHeaderBg: #d4d5d7;\r\n\r\n$uiClickableDefaultBg: #f3f1ef;\r\n$uiClickableHoverBg: whiten($info, 0.2);\r\n//$uiClickableActiveBg: $uiHeaderBg;\r\n$uiClickableActiveBg: whiten($websiteBorder, 0.2);\r\n//$uiClickableActiveBg: #aaa;\r\n\r\n$uiSelectableSelectedBg: whiten($info, 0.2);\r\n$uiSelectableSelectedHoverBg: whiten($info, 0.1);\r\n$uiSelectableHoverBg: whiten($info, 0.9);\r\n\r\n$uiOverlay: $lightBlueGrey;\r\n\r\n// new layout. Implemented now only for review panel\r\n$uiReviewPanelBg: #f2f2f2;\r\n$uiReviewPanelTextDisabled: hsl(0, 0%, 45%);\r\n$uiReviewPanelTextDefault: hsl(0, 0%, 12%);\r\n$uiReviewPanelBgDefault: $uiGeneralContentBg;\r\n$uiReviewPanelPrimaryHighlight: hsl(208, 100%, 32%);\r\n$uiReviewPanelBgInverted: $uiReviewPanelTextDefault;\r\n$uiReviewPanelTextInverted: $uiGeneralContentBg;\r\n\r\n// sidebars etc.\r\n$canvas: mix(#fff, $grey, 85%);\r\n\r\n// colors taken from feedback.scss\r\n$successBgColor: whiten($success, 0.8);\r\n$successBorderColor: whiten($success, 0.1);\r\n\r\n$infoBgColor: whiten($info, 0.8);\r\n$infoBorderColor: whiten($info, 0.1);\r\n\r\n$warningBgColor: whiten($warning, 0.8);\r\n$warningBorderColor: whiten($warning, 0.1);\r\n\r\n$dangerBgColor: whiten($danger, 0.8);\r\n$dangerBorderColor: whiten($danger, 0.1);\r\n\r\n$errorBgColor: whiten($error, 0.8);\r\n$errorBorderColor: whiten($error, 0.1);\r\n\r\n$darkBar: rgb(51, 51, 51);\r\n$darkBarTxt: rgb(230, 230, 230);\r\n$darkBarIcon: rgb(220, 220, 220);\r\n\r\n$actionLinkColor: #276d9b;\r\n$actionLinkHoverColor: #4f83a7;\r\n\r\n$colorWheel-01: #c3ba13;\r\n$colorWheel-02: #84a610;\r\n$colorWheel-03: #2b8e0e;\r\n$colorWheel-04: #0f9787;\r\n$colorWheel-05: #0e5d91;\r\n$colorWheel-06: #0d2689;\r\n$colorWheel-07: #400d83;\r\n$colorWheel-08: #960e7d;\r\n$colorWheel-09: #ba122b;\r\n$colorWheel-10: #c34713;\r\n$colorWheel-11: #c36f13;\r\n$colorWheel-12: #c39413;\r\n"]}

package/src/mediaplayer/scss/player.scss

@@ -72,6 +72,11 @@ $controlsHeight: 36px;
             right: 0;
             opacity: 1;
             background: transparent none;
+            a.action {
+                 span.icon {
+                    font-family: 'tao' !important;
+                }
+            }
         }
 
         .action {
@@ -106,12 +111,14 @@ $controlsHeight: 36px;
                 &:hover {
                     .icon {
                         opacity: 1;
+                        font-family: 'tao' !important;
                     }
                 }
 
                 .icon {
                     opacity: 0.6;
                     background: none;
+                    font-family: 'tao' !important;
                 }
                 .message {
                     font-size: 20px;
@@ -160,6 +167,7 @@ $controlsHeight: 36px;
 
                 .icon {
                     line-height: $playerActionSize;
+                    font-family: 'tao' !important;
                 }
             }
 
@@ -401,6 +409,12 @@ $controlsHeight: 36px;
         &.paused.canplay {
             .player-overlay {
                 cursor: pointer;
+                font-family: 'tao' !important;
+                a.action {
+                    span.icon {
+                        font-family: 'tao' !important;
+                    }
+                }
             }
 
             &:not(.audio) {
@@ -423,6 +437,11 @@ $controlsHeight: 36px;
         &.playing.canpause {
             .player-overlay {
                 cursor: pointer;
+                .action {
+                    .icon {
+                        font-family: 'tao' !important;
+                    }
+                }
             }
 
             &:not(.audio) {
@@ -436,6 +455,11 @@ $controlsHeight: 36px;
     }
 
     &.playing.canpause {
+        .action {
+            .icon {
+                font-family: 'tao' !important;
+            }
+        }
         .controls {
             [data-control="pause"] {
                 display: inline-block;
@@ -444,6 +468,11 @@ $controlsHeight: 36px;
     }
 
     &.paused.canplay {
+        .action {
+            .icon {
+                font-family: 'tao' !important;
+            }
+        }
         .controls {
             [data-control="play"] {
                 display: inline-block;