* {

    -webkit-font-variant-ligatures: no-common-ligatures;

    font-variant-ligatures: no-common-ligatures;

}

div:not(.export),
a,
span,
img,
button,
br,
svg {
    cursor: default !important;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.fill {
    cursor: default;
}

svg {
    overflow: visible;
}

html,
body {
    font-family: 'Stag Sans Web';
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    -webkit-font-variant-ligatures: no-common-ligatures;
    font-variant-ligatures: no-common-ligatures;
}

body {
    z-index: 2;
    overflow: hidden;
}

.IWB {
    width: 1280px;
    height: 960px;
    /*overflow: hidden;box shadow problem*/
    transform-origin: top left;
    position: absolute;
    background: #0a73b4;
    /* background: rgb(178,254,252);
background: -moz-linear-gradient(top, rgba(178,254,252,1) 0%, rgba(178,216,255,1) 100%);
background: -webkit-linear-gradient(top, rgba(178,254,252,1) 0%,rgba(178,216,255,1) 100%);
background: linear-gradient(to bottom, rgba(178,254,252,1) 0%,rgba(178,216,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2fefc', endColorstr='#b2d8ff',GradientType=0 ); */
}


[data-disabled] {
    opacity: 0.3
}

.alwaysDisabled {
    opacity: 0.3
}

.fill {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.fillTxt {
    z-index: 100 !important;
}

.introR {
    position: absolute;
    bottom: 20px;
    left: 20px;
    font-weight: bold;
    font-size: 20px;
}

img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.interactive {
    position: absolute;
    border: 3px solid black;
    z-index: 9001;
    color: black;
    background: white;
    text-align: center;
    border-radius: 15px;
    font-size: 30px;
    line-height: 34px;
}

[data-secondtarget="VW"] {
    font-size: 26px !important;
}


.dragTransparent {
    display: none;
}

.dropInteractive .dragInteractive {
    position: relative;
    top: 0px !important;
    left: 0px !important;
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0px !important;
    background: #ef9a2d;
}

.selected,
.dragging {
    background: #ef9a2d !important;
}

.intCorrect {
    background: #61e164 !important;
}

.intWrong {
    background: #ff0000 !important;
}

.dropInteractive {
    overflow: hidden;
}

[data-secondtarget="VW"] {
    font-size: 26px !important;
}


.interactivePanel {
    background: #00052d;
    position: absolute;
    top: 750px;
    left: 0px;
    z-index: 9001;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    padding: 10px;
    font-size: 40px;
    color: white;
    padding-left: 35px;
}

/* .interactiveCorrect svg,.interactiveWrong svg{width:40px;height:40px;} */

.interactiveShow,
.interactiveReset {
    width: 70px;
    height: 70px;
}

.interactiveCheck {
    opacity: 0.3;
    width: 140px;
    display: inline-block;
    font-size: 30px;
    text-align: center;
    color: #FFFF00;
    border-radius: 35px;
    font-family: CFAsty Book;
    height: 70px;
    /* font-weight: bold; */
    line-height: 72px;
}


.interactiveCheck.interactiveEnabled {
    opacity: 1
}

.interactiveCorrect span {
    color: #61e164;
    margin-right: 2px;
}

.interactiveWrong span {
    color: #ff0000;
    margin-right: 2px;
}

.interactivePanel>svg {
    margin: 0px 15px;
    vertical-align: middle;
    display: inline-block
}

.interactivePanel>span {
    margin: 0px 15px;
    vertical-align: middle;
    display: none;
}

.preLoad {
    display: none !important;

}


/* [data-second]:not([data-second='ABC']){overflow:hidden;} */
/* .leftCorrelation  .portalCor{ */
/* height:130px !important; */
/* border-top-left-radius: 75px !important; */
/* border-bottom-left-radius: 75px !important; */
/* font-size:14px !important; */
/* }  */
.rightCorrelation .portalCor span {
    /* display:none; */
}

/* [data-video="Portal-to-Grammar-2c-B"] span,[data-video="Portal-to-Grammar-2c-A"] span{width:98px !important;;} */

/*[data-video="PTCNoSub4"] span{font-size:13px !important;}*/

.leftCorrelation .portalCor span {
    display: block !important;
    position: relative !important;
    float: none !important;
    width: 94px !important;
    letter-spacing: -0.5px;
    /* left: 0px; */
    left: -7px;
}

.loadingGif {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: none;
}

.loading .loadingGif {
    display: block;
}

.loading .helpBtn {
    display: none;
}

#tmp_canvas {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: block;
}

#sketch {
    box-sizing: border-box;
    display: none;
    overflow: hidden;
}

#sketch.enabled {
    display: block;
}

.blockPanel {
    width: 100%;
    height: 100%;
    z-index: 9002;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}

[data-sticker] {
    z-index: 11;
    position: absolute;
    cursor: pointer;
}

.txtAreaInput {
    overflow: hidden;
}

.line {
    position: absolute;
    z-index: 10;
}


[data-phrase] {
    z-index: 10;
    position: absolute;
    cursor: pointer;
    z-index: 20;
    background: rgb(235, 255, 0);
    opacity: 0;


}

.txtAreaDrag {
    height: 30px;
    width: 100%;
    background: rgb(247, 242, 155);
    background: -moz-linear-gradient(left, rgba(247, 242, 155, 1) 0%, rgba(251, 226, 54, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(247, 242, 155, 1) 0%, rgba(251, 226, 54, 1) 100%);
    background: linear-gradient(to right, rgba(247, 242, 155, 1) 0%, rgba(251, 226, 54, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f7f29b', endColorstr='#fbe236', GradientType=1);
}

.txtAreaInput {
    height: 170px;
    width: 200px;
    background: rgb(251, 226, 54);
    background: -moz-linear-gradient(top, rgba(251, 226, 54, 1) 0%, rgba(247, 242, 155, 1) 99%);
    background: -webkit-linear-gradient(top, rgba(251, 226, 54, 1) 0%, rgba(247, 242, 155, 1) 99%);
    background: linear-gradient(to bottom, rgba(251, 226, 54, 1) 0%, rgba(247, 242, 155, 1) 99%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fbe236', endColorstr='#f7f29b', GradientType=0);
    box-sizing: border-box;
    padding: 10px;
    font-size: 22px;
    font-family: calibri;
    border: 0px;
    outline: 0px solid transparent;
}

[data-phrase] {
    z-index: 50;
}

.textTool {
    position: absolute;
    background: white;
    box-sizing: border-box;
    width: 200px;
    height: 200px;
    -webkit-box-shadow: -1px 1px 5px 0px rgba(176, 138, 74, 1);
    -moz-box-shadow: -1px 1px 5px 0px rgba(176, 138, 74, 1);
    box-shadow: -1px 1px 5px 0px rgba(176, 138, 74, 1);
}

.textTool textarea {
    width: 100%;
    height: 100%;
    resize: none;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.textTool img:first-child {
    position: absolute;
    top: 3px;
    cursor: move;
    left: 5px;
}

.textTool img:last-child {
    position: absolute;
    bottom: -1px;
    right: -1px;
}

.toolX {
    position: absolute;
    top: 3px;
    cursor: move;
    right: 5px;
}

.textTool img:hover {
    cursor: nw-resize;
}

.textTool span {
    display: block;
    width: 100%;
    height: 30px;
}

.outer {
    margin-left: 60px;
    overflow: hidden;
}

.hide {
    width: 100%;
    height: 100%;
    top: 285px;
    left: 440px;
    background: white;
    position: absolute;
    width: 400px;
    height: 400px;
    border: 3px solid #939598;
}

.main {
    background: white;
    width: 1085px;
    position: relative;
    height: 762px;
    border-radius: 12px;
    box-shadow: 0px 0px 12px #919191;
    overflow: hidden;
    left: 104px;
    top: 0px;
}

.mainFrame .main {
    width: 1230px;
    height: 740px;
    left: 25px;
    top: 25px
}

.mainFrames {
    top: 26px !important;
}


#sketch {
    position: absolute;
    width: 1230px;
    height: 740px;
    top: 0;
    left: 0;
    z-index: 9600;
}

.sketchCurtain {
    width: 1200px !important;
    height: 870px !important;
}


.fill p {
    margin: 10px;
}


.container {
    width: 1085px;
    height: 762px;
    position: absolute;
    overflow: hidden;
    background: white;
}

.zoomedCont {
    width: 1216px;
    height: 854px;
}

.staticImg {
    z-index: -1;
}

.staticImgActive {
    z-index: 2;
}

.backgroundImage {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;
}

.unzoomedBI {
    /* width: 100%; */
    height: 100%;
}

.unzoomedBI2 {
    height: 100%;
}

/* .zoomedCont .half{left:619px !important;} */

.stickerZoom {
    transform: scale(1.1);
}

.justification svg {
    width: 35px;
    height: 35px;
}

.justificationWrapper {
    font-size: 33px;
}

.mainGroupLeft svg.pressed .svgCircle,
.mainGroupRight svg.pressed .svgCircle {
    fill: #FF007D;
    stroke: #FF007D;
}

.mainGroupLeft svg.pressed .svgInvert,
.mainGroupRight svg.pressed .svgInvert {
    fill: white;
}



.phraseActive {
    opacity: 0.5;
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

.phraseActive {}

.soundTimer,
.videoTimer {
    font-size: 22px;
    color: #00052d;
    float: left;
    margin-right: -6px;
    width: 93px;
    margin-left: -10px;
    font-family: 'CFAsty';
}

.soundBar,
.videoBar {
    width: 280px;
    height: 16px;
    background: #777a8d;
    position: relative;
    float: left;
    margin-top: 6px;
    border-radius: 10px;
}

.wlScroll {}

.justActive svg>circle,
.justification.pressed svg>circle {
    fill: black;
}

.justActive .gMain,
.justification.pressed .gMain {
    fill: #C8C8C8
}

.soundBarWrapper,
.videoBarWrapper {
    /* height: 65px; */
    width: 358px;
    padding: 6px 0px 6px 0px;
    box-sizing: border-box;
}

.barRed,
.videobarRed {
    background: #00052d;
    width: 0%;
    height: 100%;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.barRedBall {
    display: none;
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: white;
    left: -7px;
    top: -8px;
}

.fill {
    position: absolute;
    z-index: 60;
    opacity: 0;
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-align: center;
    font-family: 'Stag Sans Web SemiBold';
}

.hovered[data-sticker]:not(.stickerInter):not(.stickerAnimation),
.pressed[data-sticker]:not(.stickerInter):not(.stickerAnimation) {
    background: rgba(235, 255, 0, 0.5);
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

[data-txtmc {
    z-index: 40;
}

] .line {
    position: absolute;
    z-index: 10;
}

.keyMask {
    background: white;
    padding: 40px 50px 40px 30px;
    box-sizing: border-box;
    color: green;
    font-family: Stag Sans Web SemiBold;
}

.keyMaskBig {
    height: auto;
    padding: 0px;
}

.line line,
.line path {
    opacity: 0
}

.justificationMaskHighlights .fill {
    opacity: 1 !important;
}

.lineVisible svg {
    overflow: visible
}

.lineVisible line,
.lineVisible path {
    opacity: 1
}

.fillVisible {
    opacity: 1;
}

[data-fill]:not(.fill) {
    position: absolute;
    z-index: 51;
}

[data-fill] {
    position: absolute;
    z-index: 15;
}

.line circle {
    cursor: pointer;
}

.resizeDiag {
    width: 45px;
    height: 45px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.portalCor span:nth-child(3) {
    font-style: italic
}

.justification {
    position: absolute;
    z-index: 80;
}

.audioL {
    position: absolute;
    z-index: 100;
}

.justificationWrapper {
    width: 410px;
    height: 740px;
    position: absolute;
    left: 825px;
    overflow: hidden;
    display: none;
}

.justScrollTop {
    position: relative;
    width: 410px;
    height: 740px;
    overflow: hidden;
}

.reverseTools {
    margin-left: 14px !important;
    margin-top: 6px;
    display: block;
    margin-bottom: 4px;
}

.justHide {
    width: 410px;
    height: 800px;
    position: absolute;
    left: 825px;
    display: none;
    background: url('Images/pattern-mm.png'), #dcdcdc;
    z-index: 600;
}

.justHide:after,
.justMask:after,
.keyMask:after {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 20px;
    height: 100%;
    content: '';
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d000000', endColorstr='#00000000', GradientType=1);
}

.subsOn {
    height: 52px;
    position: relative;
    width: 61px;
}


.clVideo {
    /* background:#737373; */
    height: 52px;
    position: relative;
    width: 64px;
    border-radius: 100px;
}


.mainFrame .justHide {
    display: block;
}

.justDisabled {
    display: none !important;
}

/* .split .container{width:658px !important;}
 */
.mainFrame .justificationWrapper {
    display: block !important;
}

.justMask,
.keyMask {
    position: absolute;
    top: 0px;
    left: 0px;
}

.justMask img,
.keyMask img {
    vertical-align: top;
}

.referenceImg {
    position: absolute;
    right: 366px;
    z-index: 700;
    display: none;
}

.hideCenter {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.hideRight {
    right: 0px;
    bottom: 0px;
    position: absolute;
}

.mainFrame .referenceImg {
    display: block;
}

.justMask {
    z-index: 10
}

.justificationWrapper [data-phrase] {
    z-index: 120;
}

.keyMask {
    z-index: 9;
    display: none;
}

.highlight {
    position: absolute;
    background: rgb(235, 255, 0);
    mix-blend-mode: multiply;
    opacity: 0;
    z-index: 110;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

.videoContainer {
    position: relative;
    display: block;
    overflow: hidden;
    height: 780px;
    text-align: center;
    line-height: 780px;
}

.videoContainer {}

.videoContainer video {
    display: inline-block;
    vertical-align: middle;
}

.highlightActive {
    opacity: 0.5 !important;
}

.videoWrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    background: rgba(48, 48, 48, 1);
    width: 100%;
    height: 100%;
    z-index: 9800;
    display: none;
    overflow: hidden;
}

.justmaskClose {
    position: absolute;
    z-index: 100;
    top: -15px;
    right: -15px;
}

.txt,
.txtmc {
    line-height: 30px;
}

.justificationMask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    display: none;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9800;
    justify-content: center;
    align-items: center;
}

.justificationMaskWrapper {
    position: relative;
}

.check {
    line-height: 20px;
}

.justificationText {
    background: white;
    max-width: 500px;
    text-align: center;
    padding: 30px;
    position: relative;
}

.justificationMaskHighlights {
    position: relative;
}


.subtitleToggle {
    position: absolute;
    bottom: 45px;
    top: 500px;
    background: white;
    width: 100%;
    height: 70px;
    z-index: 100;
    display: none;
}



.justSound {
    position: absolute;
    top: 0px;
    left: 334px;
    width: 20px;
    height: 100%;
    z-index: 20;
}

.justSound svg,
.audioL svg {
    display: block;
    position: absolute;
    left: -2px;
    padding: 8px 6px;
    width: 30px;
    height: 30px;
}

.audioL svg {
    padding: 8px 6px;
}



.scroll {
    position: absolute;
    bottom: 20px;
    width: 6px;
    height: 135px;
    right: 433px;
    z-index: 500;
    background: rgb(200, 200, 200);
    background: -moz-linear-gradient(left, rgba(200, 200, 200, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(200, 200, 200, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(200, 200, 200, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(200, 200, 200, 1) 100%);
    background: linear-gradient(to right, rgba(200, 200, 200, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(200, 200, 200, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c8c8c8', endColorstr='#c8c8c8', GradientType=1);
    display: none;
    border-radius: 3px;
}

.justScroll {
    position: absolute;
    bottom: 20px;
    width: 6px;
    height: 135px;
    right: 23px;
    display: none;
    z-index: 500;
    background: rgb(200, 200, 200);
    background: -moz-linear-gradient(left, rgba(200, 200, 200, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(200, 200, 200, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(200, 200, 200, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(200, 200, 200, 1) 100%);
    background: linear-gradient(to right, rgba(200, 200, 200, 1) 0%, rgba(240, 240, 240, 1) 50%, rgba(200, 200, 200, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c8c8c8', endColorstr='#c8c8c8', GradientType=1);
    border-radius: 3px;

}

.logoSmall {
    vertical-align: middle;
    margin-top: -5px;
}

.scrollHandle,
.justScrollHandle {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background: #ff0037;
    left: -7px;
    top: 0px;
}

.justiActive .justPlayBtn,
.justiActive,
.soundSelected svg,
.soundSelected .justPlayBtn {
    fill: yellow;
    background: #231F20;
    border-radius: 100%;
}

.justiActive {
    background: #231F20;
    border-radius: 100%;
    padding: 10px;
}

.saveTool {
    position: absolute;
    right: 25px;
    top: 4px;
    color: #505050;
    border: 1px solid #505050;
    width: 45px !important;
    height: 18px !important;
    border-radius: 9px;
    text-align: center;
    font-size: 15px;
}

.saveTool.pressed {
    background: #505050;
    color: rgb(251, 226, 54)
}

html {
    background: #0a73b4;
}

.mainOptions {
    height: 105px;
    line-height: 50px;
    width: 1280px;
    display: inline-block;
    bottom: 0px;
    left: 0px;
    position: absolute;
    background: #0a73b4;
    /* background: rgb(171,220,251);
background: -moz-linear-gradient(top, rgb(172, 221, 252) 0%,rgb(171, 215, 252) 100%);
background: -webkit-linear-gradient(top, rgb(172, 221, 252) 0%,rgb(171, 215, 252) 100%);
background: linear-gradient(to bottom, rgb(172, 221, 252) 0%,rgb(171, 215, 252) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#abdcfb', endColorstr='#b2fefc',GradientType=0 ); */
}

.mainOptionsSpread {
    height: 105px;
    line-height: 50px;
    /*width: 300px;*/
    width: 490px;
    display: inline-block;
    z-index: 1;
    /*9699*/
    ;
    bottom: 0px;
    left: 0px;
    position: absolute;
    background: #0a73b4;
}

.modulesMore {
    position: relative;
    display: inline-block;
    width: 330px;
    margin-right: 16px;
    /*z-index: 100;*/
    z-index: 9002;
}

.rightFloated {
    position: absolute;
    right: 0px;
    bottom: 30px;
}


.mainFrame .mainBack {
    display: none
}



.logoSmall {
    vertical-align: middle;
    margin-top: -2px;
}


.mainBg {}








[data-frame].pressed .svgInvert {
    fill: #FF007D;
}



.bInactive {
    opacity: 0.2
}

.salonShadow {
    height: 800px;
    width: 120px;
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 75%);
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 75%);
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 75%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#08000000', endColorstr='#08000000', GradientType=1);
    position: absolute;
    top: 0px;
    left: 492px;
    z-index: 10;
}

.zoomedShadow {
    height: 870px;
    left: 559px;
}

.moduleInfos {
    font-family: CFAsty Book;
    font-weight: 300;
    position: absolute;
    top: 5px;
    left: 105px;
    font-size: 24px;
    color: rgba(255, 255, 255, 1);
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 1px;
}


.moduleInfos:not(.Reader)>div:nth-child(2):after {
    content: "\00a0/\00a0";
}

.moduleInfos.AbcBook>div:nth-child(2):after {
    content: "";
}

.moduleInfos.SpDays>div:nth-child(2):after {
    content: "";
}

.moduleInfos.ModuleTests>div:nth-child(2):after {
    content: "";
}

.moduleInfos.GrammarTest>div:nth-child(2):after {
    content: "";
}


.mainFrame span.mType {
    display: none;
}

.IWB:not(.mainFrame) .moduleInfos {
    z-index: 500;
    line-height: 32px;
}

.lessonsHeader,
.lessons {}

.wrapper {
    width: 100%;
    height: 100%;
}

.leftCorrelation {
    position: absolute;
    left: 1px;
    top: 110px;
}

.rightCorrelation {
    position: absolute;
    left: 1190px;
    top: 110px;
}

.leftCorrelation [data-correlation] {
    width: 100px;
    height: auto;
    color: #ffffff;
    letter-spacing: 1px;
    font-size: 14px;
    position: relative;
    margin-bottom: 20px;
    font-family: CFAstyStd Bold;
    /* background: rgba(0,0,0,0.7); */
    /* border-top-left-radius:60px; */
    /* border-bottom-left-radius:60px; */

    /* border:3px solid rgba(0,0,0,0.7); */
    /* border-right:none; */
}



/* .justRemovePhrases+.justificationWrapper [data-phrase]{display:none !important;}
 */
.rightCorrelation [data-correlation] {
    width: 100px;
    height: auto;
    color: #ffffff;
    letter-spacing: 1px;
    font-size: 14px;
    position: relative;
    margin-bottom: 20px;
    font-family: CFAstyStd Bold;
    /* background: rgba(0,0,0,0.7); */
    /* border-top-left-radius:60px; */
    /* border-bottom-left-radius:60px; */

    /* border:3px solid rgba(0,0,0,0.7); */
    /* border-right:none; */
}

/* [data-correlation].pressed:not(.vocabularyBtn ){ */
/* background: #ffffff; */
/* color:black; */
/* } */

[data-correlation].pressed svg path {
    fill: #FF007D;
}

[data-correlation].pressed svg circle {
    fill: #ffffff;
    opacity: 1;
}

/* [data-correlation].pressed .sBlack { */
/* fill:black; */
/* } */

/* [data-correlation] svg path{ */
/* fill:#ffffff; */
/* } */

/* .rightCorrelation  [data-correlation].pressed{
background: white;
color:black;
} */

/* [data-video="PTCNoSub4"] span{ */
/* padding-left: 0px!important; */
/* } */

.leftCorrelation span {
    display: inline-block;
    text-align: center;
    /* width: 98px; */
    width: 86px;
    letter-spacing: -0.3px;
    padding-left: 7px;
    /* vertical-align: middle; */
    /* left: 4px; */
    /* position: absolute; */
    /* top: 55px; */
}

/*.leftCorrelation  svg{
	position: absolute;
	right: 20px;*/
/*top: 14px;*/
/*display: inline-block;
	vertical-align: middle;
	}*/

/* .leftCorrelation  svg{padding-left: 30px;} */
.leftCorrelation svg {
    padding-left: 25px;
}

.rightCorrelation span {
    /* vertical-align: middle; */
    /* right: 4px; */
    /* position: absolute; */
    /* top: 55px; */
    display: inline-block;
    width: 90px;
    text-align: center;
    letter-spacing: -0.3px;
}

.rightCorrelation svg {
    padding-left: 20px;
}

/*.rightCorrelation  svg{
	fill:#e4e4e4;
	position: absolute;
	left: 20px;*/
/*top: 19px;*/
/*display: inline-block;
	vertical-align: middle;
	margin-right: 3px;
}*/

.leftReference {
    position: absolute;
    left: 120px;
    top: 802px;
}

.rightReference {
    position: absolute;
    left: 698px;
    top: 802px;
    width: 480px;
}

.leftReference [data-game] {
    max-width: 175px;
    height: 27px;
    color: #ff0000;
    letter-spacing: 1px;
    font-size: 17px;
    position: relative;
    background: #e4e4e4;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    font-family: Stag Sans Web;
    padding: 6px 16px 1px 16px;
    text-align: center;
    border: 3px solid #ff0000;
    border-top: none;
    font-weight: bold;
    margin-right: 10px;
}

.rightReference [data-game] {
    max-width: 175px;
    height: 27px;
    color: #ff0000;
    letter-spacing: 1px;
    font-size: 17px;
    position: relative;
    background: #e4e4e4;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    font-family: Stag Sans Web;
    padding: 6px 16px 1px 16px;
    text-align: center;
    float: right;
    border: 3px solid #ff0000;
    border-top: none;
    font-weight: bold;
    margin-left: 10px;
}



[data-type="RE"].pressed,
.reference [data-sticker].pressed {
    background: #ff0000;
    color: #e4e4e4;
}

.mainOptionsSpread .drop-Curtain {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 16px;
    left: 100px;
    z-index: 9860;

}


.extraInfo,
.extraInfoVideo {
    position: absolute;
    bottom: 95px;
    left: 0px;
    width: 100%;
    text-align: center;
    height: 50px;
    z-index: 500;
    display: none;
    z-index: 9700;
}

.extraInfoVideo {
    bottom: 20px;
}

.extraInfoVideo {
    display: block;
}

.extraInfoCenter,
.extraInfoCenterVideo {
    display: inline-block;
    background: #ededed;
    border-radius: 60px;
    padding-top: 1px;
    box-sizing: border-box;
}

.extraInfoCenter>div,
.extraInfoCenterVideo>div {
    float: left;
}

.playBtnWrapper {
    width: 61px;
    height: 40px;
    position: relative;
    line-height: 35px;
    box-sizing: border-box;
}

.playBtnWrapper:first-child svg {
    vertical-align: middle;
    top: 4px;
    position: absolute;
}

.subsOn svg,
.clVideo svg {
    vertical-align: middle;
    left: 1px;
    position: absolute;
    top: 6px;
    height: 50px;
    width: 65px;
}

.subsOn.pressed svg circle {
    fill: white;
}

.subsOn.pressed svg g {
    fill: #737373;
}


.subsOn:not(.subsOff) line {
    display: none
}


.videostopBtn svg {
    vertical-align: middle;
    right: 28px;
    position: absolute;
    top: 7px;
}


.playBtnWrapper:first-child {
    border-top-left-radius: 100%;
    border-bottom-left-radius: 100%;
}

.videostopBtn {}

.worksheetSelect>div:not(.videoExtra) {
    display: none !important;
}

.worksheetSelect {
    text-align: center;
    box-shadow: 7px 7px 5px 0px rgba(0, 0, 0, 0.4);
    background-image: url(../Images/Main/BGW.jpg);

}

.videoExtra {
    margin-top: 210px;
    overflow: hidden;
    display: inline-block;
    font-family: 'CFAstyStd Bold';
    padding-bottom: 30px;
}

.videoExtra>div:not(.IconImg) {
    /*border: 5px solid white;*/
    color: white;
    font-size: 33px;
    text-align: center;
    float: left;
    width: 500px;
    height: 180px;
    background-color: #000A46;
    border-radius: 35px;
    line-height: 170px;
    margin: 0px 22px;
    font-family: 'CFAstyStd Bold';
    -webkit-box-shadow: 10px 10px 11px -1px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 10px 10px 11px -1px rgba(0, 0, 0, 0.75);
    box-shadow: 10px 10px 11px -1px rgba(0, 0, 0, 0.75);
}

.IconImg {
    margin-bottom: 25px;
}

.videoExtra>div.pressed {
    background: white;
    color: #000A46;
}

.videoExtra>span {
    display: block;
    color: white;
    font-size: 41px;
    margin-bottom: 99px;
    text-align: center;
    margin-top: 20px;
}

.mainFrame .container {
    width: 825px;
    height: 740px;
    background: white;
}

.mainFrame .moduleInfos {
    display: none;
}

.mainFrame .moduleInfos>div {
    float: left;
}

.mainFrame .moduleInfos:not(.Reader)>div:first-child,
.mainFrame .lessonsHeader {
    display: none;
}


[data-videopart] {
    height: 25px;
    width: 25px;
    background: gray;
    top: -25px;
    position: absolute;
    color: white;
    text-align: center;
    font-size: 22px;
}

[data-videopart].pressed {
    color: black;
}

[data-videopart]:after {
    content: "";
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    bottom: -10px;
    border-top: 10px solid gray;
    position: absolute;
    left: 7px;
}


/* .mainFrame .mLeft:before,.mainFrame .mRight:after{content:"\00a0/\00a0";opacity:0.5}
 */

.mainFrame .lessons {
    font-family: 'CFAsty Book';
    color: white;
    font-size: 42px;
    line-height: 53px;
    background: black;
}

.mainGroupLeft {
    position: absolute;
    bottom: 21px;
    right: 760px;
    z-index: 0;
}

.moduleInfos>div {
    float: left;
}

.extraInfo .stopBtn svg {
    vertical-align: middle;
    position: absolute;
    top: 7px;
    right: 28px;
}

.extraInfo .stopBtn {}

.mainSvgs span {
    font-size: 30px;
    font-weight: 400;
}

.mainSvgs span {
    height: 72px;
    display: block;
    float: left;
    padding-top: 8px;
    padding-right: 12px;
    background: black;
    margin-left: -55px;
    z-index: 1;
    position: relative;
    padding-left: 57px;
    border-radius: 11px;
}

.mainSvgs {
    display: none;
    position: absolute;
    right: 59px;
    /* background: black; */
    font-size: 24px;
    font-family: 'CFAsty Book';
    font-weight: 300;
    color: white;
    top: 15px;
    height: 50px;
    overflow: hidden;
}

.mainFrame .mainSvgs {
    display: block;
}

.mainGroupLeft svg {
    float: left;
    width: 70px;
    height: 70px;
}

.mainGroupLeft svg:not(:last-child) {
    margin-right: 15px;
}

.mainGroupRight {
    position: absolute;
    bottom: 21px;
    left: 760px;
}

.mainGroupRight svg {
    float: left;
    width: 70px;
    height: 70px;
}

.mainGroupRight svg:not(:last-child) {
    margin-right: 15px;
}

.audioPause .gPlay,
.gPause,
.videoPause .gPlay,
.gPause {
    opacity: 0;
}

.audioPause .gPause,
.videoPause .gPause {
    opacity: 1;
}

.playBtnWrapper svg.pressed circle,
.stopBtn.pressed circle {
    fill: white
}

.playBtnWrapper svg.pressed path,
.playBtnWrapper svg.pressed rect,
.stopBtn.pressed path {
    fill: #ff007d
}

.closeVideo {}





.mainImg {
    display: none;
    position: absolute;
    top: 10px;
    left: 52px;
}

.buildTxt {
    position: absolute;
    text-align: center;
    top: 10px;
    width: 100%;
    text-align: center;
    left: 0px;
    z-index: 10000;
}

.buildTxt input {
    width: 100%;
}

.fill {
    font-size: 33px;
    color: #197319;
}

.fill text {
    fill: #0000ff
}

.txtmc {
    color: black;
}



.toolsWrapper {
    position: absolute;
    bottom: 25px;
    left: 22px;
    /* background: black; */
    z-index: 9701;
    /* width: 50px;
height: 50px; */
    border-radius: 30px;
}

.righttoolBox {
    left: 1209px;
}

/* .toolFrame{bottom:90px !important;} */

.justmaskClose.pressed circle {
    fill: black
}

.justmaskClose {
    cursor: pointer;
}

.justmaskClose.pressed path {
    fill: white
}

.gr {
    width: 0px;
    height: 0px;
}

.toolBox {

    width: 50px;

    box-sizing: border-box;

    padding: 10px 0px;

}



.verticalSVG {
    display: none;
}

.mainFrame .mBook {
    display: none;
}



.mainFrame span.mModule {}


.horizontalSVG svg {
    display: block;
    margin-left: 6px;
    margin-bottom: 3px;
}

.verticalSVG svg {
    display: inline-block;
    margin-left: 6px;
    margin-top: -191px;
}

.toolBoxVertical {
    width: 525px !important;
    height: 50px;
}

.toolBoxVertical .reverseTools {
    margin-top: 0px;
    margin-bottom: 8px;
    display: inline-block;
}

.toolBoxVertical .verticalSVG {
    display: inline-block !important;
}

.toolBoxVertical .horizontalSVG {
    display: none !important;
}

.fill>div {
    width: 100%;
    height: 100%;
}

.toolActive .toolCircle,
.pressed .toolCircle {
    fill: #9F9F9F;
    z-index: 100;
}

.toolActive .toolCircleReverse,
.pressed .toolCircleReverse {
    fill: white;
}

.mainFrame .lessons {
    margin-right: 50px;
    margin-top: -11px;
    display: block;
}

.mSvg {
    margin-top: -10px;
    font-size: 24px;
    font-family: 'CFAsty Book';
    font-weight: 300;
    display: none;
}

.tSvg {
    font-size: 30px;
    font-family: 'CFAsty Book';
    font-weight: 400;
    display: none;
    float: left;
    z-index: 2;
    position: relative;
    margin-top: -1px;
}

.mainFrame .mSvg,
.mainFrame .tSvg {
    display: block;
}

.toolExpand {
    display: none;
}

.toolActive .toolExpand {
    display: block
}

.toolSelected .toolExpand {
    display: none !important
}

.toolBox {
    display: none;
}

.toolBox.enabled {
    display: block;
}

.mainWrapper {
    width: 100%;
    height: 810px;
    position: relative;
    margin: 0px auto;
    padding-top: 40px;
    background: #0a73b4;
    overflow: hidden;
}

.white-curtain {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 0%;
    background: white;
    z-index: 9701;
    display: block;
    transition: height 0.5s ease-in;
}

.white-curtain .MM-logo {
    position: absolute;
    right: 25px;
    display: none;
    top: 35px;
}

.white-curtain .exitbtn {
    position: absolute;
    right: 40px;
    display: none;
    bottom: 80px;
}

.mainWrapper.zoomedWr {
    height: 860px;
}

.mainFrame .mainWrapper {
    background: transparent;
}

.export {
    width: 100%;
    background: white;
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 20px;
    overflow: hidden;
}

.export {}

.subs {
    color: black;
    letter-spacing: -0.5px;
    text-align: center;
    font-size: 48px;
    height: 70px;
    line-height: 67px;
    width: 100%;
    font-family: 'CFAstyPro';
    background: rgb(150, 150, 150);
    background: -moz-linear-gradient(top, rgba(150, 150, 150, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(150, 150, 150, 1) 100%);
    background: -webkit-linear-gradient(top, rgba(150, 150, 150, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(150, 150, 150, 1) 100%);
    background: linear-gradient(to bottom, rgba(150, 150, 150, 1) 0%, rgba(255, 255, 255, 1) 15%, rgba(255, 255, 255, 1) 85%, rgba(150, 150, 150, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#969696', GradientType=0);
    margin-top: 30px;
}

.loader {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    margin: 0px auto;
    margin-top: 260px;
    color: white;
    position: relative;
}

.loadingText {
    position: absolute;
    bottom: -100px;
    width: 100%;
    text-align: center;
    font-size: 42px;
}

/* .primary .leftCorrelation [data-type=WB],.primary .rightCorrelation [data-type=WB]{height: 70px;} */


#loader-1:before,
#loader-1:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 10px solid transparent;
    border-top-color: #ff3333;
}

#loader-1:before {
    z-index: 100;
    animation: spin 10s infinite;
}

#loader-1:after {
    border: 10px solid #fff;
}


.bounceCurtainDown {
    animation: bounceDown 0.3s ease-in;

}

@keyframes bounceDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    57% {
        -webkit-transform: translateY(-10%);
        -ms-transform: translateY(-10%);
        -o-transform: translateY(-10%);
        transform: translateY(-10%);
    }

    100% {

        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);

    }
}

.bounceCurtainUp {
    animation: bounceUp 0.3s ease-in;

}


@keyframes bounceUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
    }

    57% {
        -webkit-transform: translateY(-95%);
        -ms-transform: translateY(-95%);
        -o-transform: translateY(-95%);
        transform: translateY(-95%);
    }

    100% {

        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);

    }
}




@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.scrollHandle:before,
.justScrollHandle:before {
    position: absolute;
    content: '';
    top: 0px;
    right: -20px;
    left: -20px;
    bottom: 0px;
}

.soundBar:before,
.videoBar:before {
    position: absolute;
    content: '';
    top: -10px;
    right: 0px;
    left: 0px;
    bottom: -10px;
}

.justScroll:before,
.scroll:before {
    position: absolute;
    content: '';
    position: absolute;
    top: 0px;
    right: -20px;
    left: -20px;
    bottom: 0px;
}

.containerExpanded {}

.pencil {
    stroke-linejoin: round;
    fill: none;
    position: absolute;
}

.rectangle,
.ellipse {
    position: absolute;
}

.inverse {
    position: absolute;
    box-shadow: 0 0 0 1280px rgba(255, 255, 255, 0.5);
}

.containerExpanded .container {
    width: 1237px !important;
}

.containerExpanded .justHide,
.containerExpanded .justificationWrapper,
.containerExpanded .referenceImg {
    display: none !important;
}

.containerExpanded .scroll {
    right: 42px !important;
}

/* .secondButton,.demoModuleButton{margin-top:40px;position:relative;}

[data-secondmodule] .secondModuleButton{border:10px solid #ffcd2e;}
.demoModuleButton .secondModuleButton{border:5px solid #ffcd2e;}

[data-secondmodule] .secondTitle{padding-top: 21px !important;}
.demoModuleButton .secondTitle{padding-top: 21px !important;}
[data-secondmodule="Hello"] .secondTitle{padding-top: 55px !important;}

[data-secondmodule] .secondModuleButton:before,.demoModuleButton:before{content:url('Images/demo.png');position: absolute;
width: 100%;
text-align: center;
top: -48px;
left: 0px;}

.demoModuleButton:before{top: -40px;}

.demoGrammar{position:relative;}

.demoGrammar:before{content:url('Images/demo-portal-to-grammar.png');position: absolute;
width: 100%;
text-align: center;
top: -42px;
left: 0px;}

.secondCustomHeader{overflow:visible}

.secondCustomTiles{padding-top:7px;} */
.stickerIcons {
    position: absolute;
    z-index: 5;
}

.mBook img {
    height: 30px;
    margin: 0px 15px;
}

.modulesMore {
    position: absolute !important;
    top: 27px;
    right: 150px;
    z-index: 9001;
}

.modulesExtra {
    position: absolute;
    left: 0px;
    bottom: 50px;
    display: none;
    width: 316px;
    font-family: Stag Sans Web;
    font-weight: 400;
}

.modulesExtra>div {
    line-height: 50px;
    min-height: 50px;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
    background: transparent;
}

.modulesExtraExp {
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0) !important;
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0) !important;

}

.modulesExtra>div>span.pressed,
.modulesExtraSub>span.pressed {
    background: #505050;
    color: #ffffff;
    font-family: 'CFAsty';
    /*font-weight:600;*/
}

.modulesExtra>div>span {
    padding-left: 20px;
    font-size: 29px;
    color: black;
    display: block;
    cursor: pointer;
    background: white;
    font-family: 'CFAsty';
}

.modulesExtraSub {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
    -webkit-transition: max-height 0.3s ease-in-out;
}

.modulesExtraSub>span {
    display: block;
    height: 45px;
    line-height: 43px;
    margin-left: 18px;
    padding-left: 20px;
    background: #dcdcdc;
    color: black;
    font-size: 25px;
    font-family: "CFAsty Book";
    cursor: pointer;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.4);
}

.modulesExtraExp>span {
    background: #505050 !important;
    color: #ffffff !important;
    /*font-weight:600 !important;*/
}


/*Readers*/
.Reader>div:first-child:after {
    content: "\00a0/\00a0";
}

.mainFrame .Reader .mBook {
    display: block;
    line-height: 35px;
    margin-left: 5px;
}

.mainFrame .Reader.moduleInfos {
    display: block;
}

.mainFrame .ReaderLvl {
    display: block !important;
    margin-left: 30px;
    border-radius: 17px;
    background: #ffffff;
    color: #ee7d00;
    width: 95px;
    height: 30px;
    font-size: 20px;
    text-align: center;
    font-family: 'mmAsap Bold';
    line-height: 30px;
}


.mainFrame .Reader .mModule.mLeft {
    display: none;
}

.mainFrame .Reader>div:first-child:after {
    display: none;
}

.mainFrame .Reader {
    left: 23px !important;
    top: 26px;
    font-family: 'mmAsap Bold';
}

.mainSvgs .ReaderLesson {
    display: block !important;
    border-radius: 17px;
    background: #ee7d00;
    padding: 5px 15px;
    color: #ffffff;
    width: max-content;
    height: 25px;
    min-width: 73px;
    text-align: center;
    line-height: 24px;
    font-size: 20px;
    font-family: 'mmAsap Bold';
}

.mainSvgs.ReaderMain {
    top: 21px;
    right: 45px;
    height: auto;
}

/*Interactive Activities*/

[data-sticker] {

    z-index: 11;

    position: absolute;

    cursor: pointer;

}

.hovered[data-sticker]:not(.stickerInter):not(.stickerAnimation),
.pressed[data-sticker]:not(.stickerInter):not(.stickerAnimation) {
    background: rgba(235, 255, 0, 0.5);
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

.leftReference [data-sticker] {
    max-width: 175px;
    height: 38px;
    color: #ff0000;
    letter-spacing: 1px;
    font-size: 17px;
    position: relative;
    background: #e4e4e4;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    font-family: Stag Sans Web;
    padding: 6px 16px 1px 16px;
    text-align: center;
    border: 3px solid #ff0000;
    border-top: none;
    font-weight: bold;
    margin-right: 10px;
    line-height: 18px;
}

.rightReference [data-sticker] {
    max-width: 175px;
    height: 38px;
    color: #ff0000;
    letter-spacing: 1px;
    font-size: 17px;
    position: relative;
    background: #e4e4e4;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 30px;
    font-family: Stag Sans Web;
    padding: 6px 16px 1px 16px;
    text-align: center;
    float: right;
    border: 3px solid #ff0000;
    border-top: none;
    font-weight: bold;
    margin-left: 10px;
    line-height: 18px;
}


[data-type="RE"].pressed,
.reference [data-sticker].pressed {
    background: #ff0000;
    color: #e4e4e4;
}




/*Spread - frames Buttons*/
.mainOptionsSpread .drop-Curtain {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 21px;
    left: 110px;

}

.spreadHomeBtn {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 21px;
    left: 195px;
}

.mainBack {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 21px;
    left: 280px;
}

.zoomSpread {
    width: 70px;
    height: 70px;
    position: absolute;
    bottom: 21px;
    left: 365px;
}

.mainGroupLeft .drop-Curtain {
    width: 70px;
    float: left;
    height: 70px;
    margin-right: 15px;
}




.zoomed {
    /* transform: scale(1.1); */
    width: 1216px;
    height: 854px;
    top: -40px;
    left: 22px;
    border-radius: 30px;
    z-index: 9000;
}

.exitBtn {
    vertical-align: middle;
    margin-right: 50px;
    margin-top: -3px;
}

.homeBtn {
    vertical-align: middle;
    width: 70px;
    height: 70px;
    position: absolute;
    top: 15px;
    left: 50px;
}


.homeBtn.pressed path:not(:first-child) {
    fill: #FF007D;
}

.homeBtn.pressed path:first-child {
    fill: #FFFFFF;
}

.exitBtn.pressed path {
    fill: rgba(255, 255, 255, 1)
}

.mainOptionsSpread svg.pressed path:not(:first-child) {
    fill: #ff007d
}

.mainOptionsSpread svg.pressed path:first-child {
    fill: #FFFFFF
}

.activated path:not(:first-child) {
    fill: #FFFFFF;
}

.activated path:first-child {
    fill: #ff007d;
}


.mainGroupLeft svg.pressed path:not(:first-child) {
    fill: #ff007d
}

.mainGroupLeft svg.pressed path:first-child {
    fill: #FFFFFF
}

.secondBackbtn2.pressed rect {
    fill: #ff007d;
}

.alwaysDisabled.pressed path:first-child {
    fill: #00052d !important;
}

.alwaysDisabled.pressed path:not(:first-child) {
    fill: #FFFFFF !important;
}


.mainGroupRight svg.pressed path:not(:first-child) {
    fill: #ff007d
}

.mainGroupRight svg.pressed path:first-child {
    fill: #FFFFFF
}

.mainGroupRight svg.pressed circle {
    fill: #ff007d
}

.enabledTool {
    background-color: #00052d;
    margin-bottom: 3px;
    height: 480px;
}


.rightTool path:first-child,
.leftTool path:first-child {
    fill: #00052d
}

.rightTool.pressed path:not(:first-child),
.leftTool.pressed path:not(:first-child) {
    fill: #ff007d
}

.horizontalSVG svg>circle {
    fill: #00052d;
    stroke: #00052d;
}


.mainOptions a {
    position: absolute;
    z-index: 400;
    height: 31px;
    display: inline-block;
    bottom: 50px;
    right: 100px;
    width: 100px;
    vertical-align: top;
    text-align: center;
}


.modulesTrigger {
    font-family: 'CFAsty Book';
    font-size: 30px;
    letter-spacing: 1px;
    color: #e4e4e4;
    cursor: pointer;
}

.mainOptionsSpread {
    height: 105px;
    line-height: 50px;
    /*width: 300px;*/
    width: 490px;
    display: inline-block;
    z-index: 9001;
    bottom: 0px;
    left: 0px;
    position: absolute;
    background: #0a73b4;
}

[data-frame] {
    position: absolute;
    bottom: 27px;
}

/* [data-frame="previous"]{right: 640px;} */

/* [data-frame="next"]{left: 640px;} */


[data-frame="previous"] {
    left: 570px;
}

[data-frame="next"] {
    right: 570px;
}


/*Interactive panel*/

.interactivePanel svg.pressed path:not(:first-child) {
    fill: #ff007d
}

.interactivePanel svg.pressed path:first-child {
    fill: #FFFFFF
}

/*Video player*/
.clVideo,
.subsOn,
.subsOff {
    display: inline-block;
}

.closeVideo.pressed circle {
    fill: #00052d
}

.closeVideo.pressed path:first-child {
    fill: #00052d;
}

.closeVideo.pressed path:last-child {
    fill: white;
}


/*Spread Stickers*/
[data-icon="sugAns"],
[data-icon="modelAns"],
[data-icon="extraAct"],
[data-icon="extraInt"] {
    width: 60px;
    height: 60px;
}

[data-icon="wWatch"] {
    background-image: url('Images/WW_Interactive_icon.png');
    background-position: 52500px 0;
    width: 210px;
    height: 50px;
}

[data-icon="sugAns"] {
    background-image: url('Images/suggestive-sprite.png');

}

[data-icon="modelAns"] {
    background-image: url('Images/model-sprite.png');
}


[data-icon="extraAct"] {
    background-image: url('Images/extra-sprite.png');
}

[data-icon="extraInt"] {
    background-image: url('Images/interactive-sprite.png');
}

[data-icon="grRef"] {
    background-image: url('Images/grammar-sprite.png');
    width: 70px;
    height: 70px;
}

.zoomedCont [data-icon="sugAns"],
.zoomedCont [data-icon="modelAns"],
.zoomedCont [data-icon="extraAct"],
.zoomedCont [data-icon="grRef"],
.zoomedCont [data-icon="extraInt"] {
    transform: scale(1.15);
}


@keyframes stickerMoveWW {
    0% {
        background-position-x: 52500px;
    }

    100% {
        background-position-x: 0px;
    }
}

.stickerAnimation[data-icon="wWatch"] {
    -webkit-animation: stickerMoveWW 24s steps(250) infinite;
    -moz-animation: stickerMoveWW 12s steps(250) infinite;
    -o-animation: stickerMoveWW 12s steps(250) infinite;
    animation: stickerMoveWW 12s steps(250) infinite;
}

@keyframes stickerMove {
    0% {
        background-position: left center;
    }

    30% {
        background-position: center center;
    }

    70% {
        background-position: right center;
    }

    100% {
        background-position: left center;
    }
}

.stickerAnimation {
    -webkit-animation: stickerMove 1.1s steps(1) infinite;
    -moz-animation: stickerMove 1.1s steps(1) infinite;
    -o-animation: stickerMove 1.1s steps(1) infinite;
    animation: stickerMove 1.1s steps(1) infinite;
}


/* .hovered[data-sticker].stickerAnimation,.pressed[data-sticker].stickerAnimation{ */
/* background-color: rgba(235, 255, 0, 0.5); */
/* mix-blend-mode: multiply; */
/* -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5); */
/* -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5); */
/* box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5); */
/* } */

.hovered[data-sticker].stickerAnimation:not(.disabled-icon),
.pressed[data-sticker].stickerAnimation:not(.disabled-icon) {
    background-color: rgba(235, 255, 0, 0.5);
    mix-blend-mode: multiply;
    -moz-box-shadow: 1px 2px 10px rgba(255, 255, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
    box-shadow: 0px 0px 10px rgba(235, 255, 0, 0.5);
}

/* teacher's key button */
.pressed.justKeyT circle {
    fill: #ff0080;
}

.circle svg ellipse,
.line svg circle,
.line svg path,
.gr svg path {
    stroke-width: 4 !important;
}