/* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the top of the * compiled file, but it's generally better to create a new file per style scope. * */ @keyframes plyr-progress{to{background-position:25px 0}}@keyframes plyr-popup{0%{opacity:.5;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes plyr-fade-in{from{opacity:0}to{opacity:1}}.plyr{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;direction:ltr;font-family:Avenir,"Avenir Next","Helvetica Neue","Segoe UI",Helvetica,Arial,sans-serif;font-variant-numeric:tabular-nums;font-weight:500;line-height:1.7;max-width:100%;min-width:200px;position:relative;text-shadow:none;transition:box-shadow .3s ease}.plyr audio,.plyr video{border-radius:inherit;height:auto;vertical-align:middle;width:100%}.plyr button{font:inherit;line-height:inherit;width:auto}.plyr:focus{outline:0}.plyr--full-ui{box-sizing:border-box}.plyr--full-ui *,.plyr--full-ui ::after,.plyr--full-ui ::before{box-sizing:inherit}.plyr--full-ui a,.plyr--full-ui button,.plyr--full-ui input,.plyr--full-ui label{touch-action:manipulation}.plyr__badge{background:#4f5b5f;border-radius:2px;color:#fff;font-size:9px;line-height:1;padding:3px 4px}.plyr--full-ui ::-webkit-media-text-track-container{display:none}.plyr__captions{animation:plyr-fade-in .3s ease;bottom:0;color:#fff;display:none;font-size:14px;left:0;padding:10px;position:absolute;text-align:center;transform:translateY(-40px);transition:transform .4s ease-in-out;width:100%}.plyr__captions .plyr__caption{background:rgba(0,0,0,.8);border-radius:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone;line-height:185%;padding:.2em .5em;white-space:pre-wrap}.plyr__captions .plyr__caption div{display:inline}.plyr__captions span:empty{display:none}@media (min-width:480px){.plyr__captions{font-size:16px;padding:20px}}@media (min-width:768px){.plyr__captions{font-size:18px}}.plyr--captions-active .plyr__captions{display:block}.plyr--hide-controls .plyr__captions{transform:translateY(-15px)}.plyr__control{background:0 0;border:0;border-radius:3px;color:inherit;cursor:pointer;flex-shrink:0;overflow:visible;padding:7px;position:relative;transition:all .3s ease}.plyr__control svg{display:block;fill:currentColor;height:18px;pointer-events:none;width:18px}.plyr__control:focus{outline:0}.plyr__control.plyr__tab-focus{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__control.plyr__control--pressed .icon--not-pressed,.plyr__control.plyr__control--pressed .label--not-pressed,.plyr__control:not(.plyr__control--pressed) .icon--pressed,.plyr__control:not(.plyr__control--pressed) .label--pressed{display:none}.plyr--audio .plyr__control.plyr__tab-focus,.plyr--audio .plyr__control:hover,.plyr--audio .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr__control--overlaid{background:rgba(26,175,255,.8);border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15);color:#fff;display:none;left:50%;padding:15px;position:absolute;top:50%;transform:translate(-50%,-50%);z-index:2}.plyr__control--overlaid svg{height:20px;left:2px;position:relative;width:20px}.plyr__control--overlaid:focus,.plyr__control--overlaid:hover{background:#1aafff}.plyr--playing .plyr__control--overlaid{opacity:0;visibility:hidden}.plyr--full-ui.plyr--video .plyr__control--overlaid{display:block}.plyr--full-ui ::-webkit-media-controls{display:none}.plyr__controls{align-items:center;display:flex;justify-content:flex-end;text-align:center}.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:5px}.plyr__controls .plyr__menu:first-child,.plyr__controls .plyr__menu:first-child+[data-plyr=pause],.plyr__controls .plyr__progress:first-child,.plyr__controls .plyr__progress:first-child+[data-plyr=pause],.plyr__controls .plyr__time:first-child,.plyr__controls .plyr__time:first-child+[data-plyr=pause],.plyr__controls>.plyr__control:first-child,.plyr__controls>.plyr__control:first-child+[data-plyr=pause]{margin-left:0;margin-right:auto}.plyr__controls .plyr__volume{margin-left:5px}@media (min-width:480px){.plyr__controls .plyr__menu,.plyr__controls .plyr__progress,.plyr__controls .plyr__time,.plyr__controls>.plyr__control{margin-left:10px}.plyr__controls .plyr__menu+.plyr__control,.plyr__controls>.plyr__control+.plyr__control,.plyr__controls>.plyr__control+.plyr__menu{margin-left:5px}}.plyr--video .plyr__controls{background:linear-gradient(transparent,rgba(0,0,0,.7));border-bottom-left-radius:inherit;border-bottom-right-radius:inherit;bottom:0;color:#fff;left:0;padding:35px 10px 10px;position:absolute;right:0;transition:opacity .4s ease-in-out,transform .4s ease-in-out;z-index:2}.plyr--video .plyr__controls .plyr__control svg{-webkit-filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15));filter:drop-shadow(0 1px 1px rgba(0, 0, 0, .15))}.plyr--video .plyr__controls .plyr__control.plyr__tab-focus,.plyr--video .plyr__controls .plyr__control:hover,.plyr--video .plyr__controls .plyr__control[aria-expanded=true]{background:#1aafff;color:#fff}.plyr--audio .plyr__controls{background:#fff;border-radius:inherit;color:#4f5b5f;padding:10px}.plyr--video.plyr--hide-controls .plyr__controls{opacity:0;pointer-events:none;transform:translateY(100%)}.plyr [data-plyr=airplay],.plyr [data-plyr=captions],.plyr [data-plyr=fullscreen],.plyr [data-plyr=pip]{display:none}.plyr--airplay-supported [data-plyr=airplay],.plyr--captions-enabled [data-plyr=captions],.plyr--fullscreen-enabled [data-plyr=fullscreen],.plyr--pip-supported [data-plyr=pip]{display:inline-block}.plyr__controls:empty{display:none}.plyr__controls:empty~.plyr__captions{transform:translateY(0)}.plyr__video-embed{height:0;padding-bottom:56.25%;position:relative}.plyr__video-embed iframe{border:0;height:100%;left:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr--full-ui .plyr__video-embed>.plyr__video-embed__container{padding-bottom:240%;position:relative;transform:translateY(-38.28125%)}.plyr__menu{display:flex;position:relative}.plyr__menu .plyr__control svg{transition:transform .3s ease}.plyr__menu .plyr__control[aria-expanded=true] svg{transform:rotate(90deg)}.plyr__menu .plyr__control[aria-expanded=true] .plyr__tooltip{display:none}.plyr__menu__container{animation:plyr-popup .2s ease;background:rgba(255,255,255,.9);border-radius:4px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:16px;margin-bottom:10px;position:absolute;right:-3px;text-align:left;white-space:nowrap;z-index:3}.plyr__menu__container>div{overflow:hidden;transition:height .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1)}.plyr__menu__container::after{border:4px solid transparent;border-top-color:rgba(255,255,255,.9);content:'';height:0;position:absolute;right:15px;top:100%;width:0}.plyr__menu__container ul{list-style:none;margin:0;overflow:hidden;padding:7px}.plyr__menu__container ul li{margin-top:2px}.plyr__menu__container ul li:first-child{margin-top:0}.plyr__menu__container .plyr__control{align-items:center;color:#4f5b5f;display:flex;font-size:14px;padding:4px 14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.plyr__menu__container .plyr__control::after{border:4px solid transparent;content:'';position:absolute;top:50%;transform:translateY(-50%)}.plyr__menu__container .plyr__control--forward{padding-right:28px}.plyr__menu__container .plyr__control--forward::after{border-left-color:rgba(79,91,95,.8);right:5px}.plyr__menu__container .plyr__control--forward.plyr__tab-focus::after,.plyr__menu__container .plyr__control--forward:hover::after{border-left-color:currentColor}.plyr__menu__container .plyr__control--back{font-weight:500;margin:7px;margin-bottom:3px;padding-left:28px;position:relative;width:calc(100% - 14px)}.plyr__menu__container .plyr__control--back::after{border-right-color:rgba(79,91,95,.8);left:7px}.plyr__menu__container .plyr__control--back::before{background:#b7c5cd;box-shadow:0 1px 0 #fff;content:'';height:1px;left:0;margin-top:4px;overflow:hidden;position:absolute;right:0;top:100%}.plyr__menu__container .plyr__control--back.plyr__tab-focus::after,.plyr__menu__container .plyr__control--back:hover::after{border-right-color:currentColor}.plyr__menu__container label.plyr__control{padding-left:7px}.plyr__menu__container label.plyr__control input[type=radio]+span{background:rgba(0,0,0,.1);border-radius:100%;display:block;flex-shrink:0;height:16px;margin-right:10px;position:relative;transition:all .3s ease;width:16px}.plyr__menu__container label.plyr__control input[type=radio]+span::after{background:#fff;border-radius:100%;content:'';height:6px;left:5px;opacity:0;position:absolute;top:5px;transform:scale(0);transition:transform .3s ease,opacity .3s ease;width:6px}.plyr__menu__container label.plyr__control input[type=radio]:checked+span{background:#1aafff}.plyr__menu__container label.plyr__control input[type=radio]:checked+span::after{opacity:1;transform:scale(1)}.plyr__menu__container label.plyr__control input[type=radio]:focus+span{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr__menu__container label.plyr__control.plyr__tab-focus input[type=radio]+span,.plyr__menu__container label.plyr__control:hover input[type=radio]+span{background:rgba(0,0,0,.1)}.plyr__menu__container .plyr__menu__value{align-items:center;display:flex;margin-left:auto;margin-right:-7px;overflow:hidden;padding-left:25px;pointer-events:none}.plyr--full-ui input[type=range]{-webkit-appearance:none;background:0 0;border:0;border-radius:28px;color:#1aafff;display:block;height:20px;margin:0;padding:0;transition:box-shadow .3s ease;width:100%}.plyr--full-ui input[type=range]::-webkit-slider-runnable-track{background:0 0;border:0;border-radius:3px;height:6px;-webkit-user-select:none;user-select:none;background-image:linear-gradient(to right,currentColor var(--value,0),transparent var(--value,0))}.plyr--full-ui input[type=range]::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;-webkit-appearance:none;margin-top:-4px}.plyr--full-ui input[type=range]::-moz-range-track{background:0 0;border:0;border-radius:3px;height:6px;-moz-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px}.plyr--full-ui input[type=range]::-moz-range-progress{background:currentColor;border-radius:3px;height:6px}.plyr--full-ui input[type=range]::-ms-track{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;color:transparent}.plyr--full-ui input[type=range]::-ms-fill-upper{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none}.plyr--full-ui input[type=range]::-ms-fill-lower{background:0 0;border:0;border-radius:3px;height:6px;-ms-user-select:none;user-select:none;background:currentColor}.plyr--full-ui input[type=range]::-ms-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2);box-sizing:border-box;height:14px;position:relative;transition:all .2s ease;width:14px;margin-top:0}.plyr--full-ui input[type=range]::-ms-tooltip{display:none}.plyr--full-ui input[type=range]:focus{outline:0}.plyr--full-ui input[type=range]::-moz-focus-outer{border:0}.plyr--full-ui input[type=range].plyr__tab-focus::-webkit-slider-runnable-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-moz-range-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui input[type=range].plyr__tab-focus::-ms-track{box-shadow:0 0 0 3px rgba(26,175,255,.35);outline:0}.plyr--full-ui.plyr--video input[type=range]::-webkit-slider-runnable-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-moz-range-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]::-ms-track{background-color:rgba(255,255,255,.25)}.plyr--full-ui.plyr--video input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--video input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(255,255,255,.5)}.plyr--full-ui.plyr--audio input[type=range]::-webkit-slider-runnable-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-moz-range-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]::-ms-track{background-color:rgba(183,197,205,.66)}.plyr--full-ui.plyr--audio input[type=range]:active::-webkit-slider-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-moz-range-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr--full-ui.plyr--audio input[type=range]:active::-ms-thumb{box-shadow:0 1px 1px rgba(0,0,0,.15),0 0 0 1px rgba(47,52,61,.2),0 0 0 3px rgba(0,0,0,.1)}.plyr__poster{background-color:#000;background-position:50% 50%;background-repeat:no-repeat;background-size:contain;height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%;z-index:1}.plyr--stopped.plyr__poster-enabled .plyr__poster{opacity:1;pointer-events:none}.plyr__time{font-size:14px}.plyr__time+.plyr__time::before{content:'\2044';margin-right:10px}@media (max-width:767px){.plyr__time+.plyr__time{display:none}}.plyr--video .plyr__time{text-shadow:0 1px 1px rgba(0,0,0,.15)}.plyr__tooltip{background:rgba(255,255,255,.9);border-radius:3px;bottom:100%;box-shadow:0 1px 2px rgba(0,0,0,.15);color:#4f5b5f;font-size:14px;font-weight:500;line-height:1.3;margin-bottom:10px;opacity:0;padding:5px 7.5px;pointer-events:none;position:absolute;transform:translate(-50%,10px) scale(.8);transform-origin:50% 100%;transition:transform .2s .1s ease,opacity .2s .1s ease;white-space:nowrap;z-index:2}.plyr__tooltip::before{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(255,255,255,.9);bottom:-4px;content:'';height:0;left:50%;position:absolute;transform:translateX(-50%);width:0;z-index:2}.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,.plyr .plyr__control:hover .plyr__tooltip,.plyr__tooltip--visible{opacity:1;transform:translate(-50%,0) scale(1)}.plyr .plyr__control:hover .plyr__tooltip{z-index:3}.plyr__controls>.plyr__control:first-child .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip{left:0;transform:translate(0,10px) scale(.8);transform-origin:0 100%}.plyr__controls>.plyr__control:first-child .plyr__tooltip::before,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip::before{left:16px}.plyr__controls>.plyr__control:last-child .plyr__tooltip{right:0;transform:translate(0,10px) scale(.8);transform-origin:100% 100%}.plyr__controls>.plyr__control:last-child .plyr__tooltip::before{left:auto;right:16px;transform:translateX(50%)}.plyr__controls>.plyr__control:first-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control .plyr__tooltip--visible,.plyr__controls>.plyr__control:first-child+.plyr__control.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child+.plyr__control:hover .plyr__tooltip,.plyr__controls>.plyr__control:first-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:first-child:hover .plyr__tooltip,.plyr__controls>.plyr__control:last-child .plyr__tooltip--visible,.plyr__controls>.plyr__control:last-child.plyr__tab-focus .plyr__tooltip,.plyr__controls>.plyr__control:last-child:hover .plyr__tooltip{transform:translate(0,0) scale(1)}.plyr--video{overflow:hidden}.plyr--video.plyr--menu-open{overflow:visible}.plyr__video-wrapper{background:#000;border-radius:inherit;overflow:hidden;position:relative;z-index:0}.plyr__progress{display:flex;flex:1;left:7px;margin-right:14px;position:relative}.plyr__progress input[type=range],.plyr__progress__buffer{margin-left:-7px;margin-right:-7px;width:calc(100% + 14px)}.plyr__progress input[type=range]{position:relative;z-index:2}.plyr__progress .plyr__tooltip{font-size:14px;left:0}.plyr__progress__buffer{-webkit-appearance:none;background:0 0;border:0;border-radius:100px;height:6px;left:0;margin-top:-3px;padding:0;position:absolute;top:50%}.plyr__progress__buffer::-webkit-progress-bar{background:0 0;transition:width .2s ease}.plyr__progress__buffer::-webkit-progress-value{background:currentColor;border-radius:100px;min-width:6px}.plyr__progress__buffer::-moz-progress-bar{background:currentColor;border-radius:100px;min-width:6px;transition:width .2s ease}.plyr__progress__buffer::-ms-fill{border-radius:100px;transition:width .2s ease}.plyr--video .plyr__progress__buffer{box-shadow:0 1px 1px rgba(0,0,0,.15);color:rgba(255,255,255,.25)}.plyr--audio .plyr__progress__buffer{color:rgba(183,197,205,.66)}.plyr--loading .plyr__progress__buffer{animation:plyr-progress 1s linear infinite;background-image:linear-gradient(-45deg,rgba(47,52,61,.6) 25%,transparent 25%,transparent 50%,rgba(47,52,61,.6) 50%,rgba(47,52,61,.6) 75%,transparent 75%,transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent}.plyr--video.plyr--loading .plyr__progress__buffer{background-color:rgba(255,255,255,.25)}.plyr--audio.plyr--loading .plyr__progress__buffer{background-color:rgba(183,197,205,.66)}.plyr__volume{flex:1;position:relative}.plyr__volume input[type=range]{position:relative;z-index:2}@media (min-width:480px){.plyr__volume{max-width:50px}}@media (min-width:768px){.plyr__volume{max-width:80px}}.plyr--is-ios .plyr__volume{display:none!important}.plyr--is-ios.plyr--vimeo [data-plyr=mute]{display:none!important}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:fullscreen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:fullscreen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}.plyr:fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}.plyr:-moz-full-screen .plyr__captions{font-size:21px}.plyr:-ms-fullscreen .plyr__captions{font-size:21px}.plyr:fullscreen .plyr__captions{font-size:21px}}.plyr:-webkit-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-webkit-full-screen video{height:100%}.plyr:-webkit-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-webkit-full-screen .plyr__video-embed{overflow:visible}.plyr:-webkit-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-webkit-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-webkit-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-webkit-full-screen .plyr__captions{font-size:21px}}.plyr:-moz-full-screen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-moz-full-screen video{height:100%}.plyr:-moz-full-screen .plyr__video-wrapper{height:100%;width:100%}.plyr:-moz-full-screen .plyr__video-embed{overflow:visible}.plyr:-moz-full-screen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-moz-full-screen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-moz-full-screen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-moz-full-screen .plyr__captions{font-size:21px}}.plyr:-ms-fullscreen{background:#000;border-radius:0!important;height:100%;margin:0;width:100%}.plyr:-ms-fullscreen video{height:100%}.plyr:-ms-fullscreen .plyr__video-wrapper{height:100%;width:100%}.plyr:-ms-fullscreen .plyr__video-embed{overflow:visible}.plyr:-ms-fullscreen.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen{display:block}.plyr:-ms-fullscreen .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr:-ms-fullscreen.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr:-ms-fullscreen .plyr__captions{font-size:21px}}.plyr--fullscreen-fallback{background:#000;border-radius:0!important;height:100%;margin:0;width:100%;bottom:0;left:0;position:fixed;right:0;top:0;z-index:10000000}.plyr--fullscreen-fallback video{height:100%}.plyr--fullscreen-fallback .plyr__video-wrapper{height:100%;width:100%}.plyr--fullscreen-fallback .plyr__video-embed{overflow:visible}.plyr--fullscreen-fallback.plyr--vimeo .plyr__video-wrapper{height:0;top:50%;transform:translateY(-50%)}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen{display:block}.plyr--fullscreen-fallback .plyr__control .icon--exit-fullscreen+svg{display:none}.plyr--fullscreen-fallback.plyr--hide-controls{cursor:none}@media (min-width:1024px){.plyr--fullscreen-fallback .plyr__captions{font-size:21px}}.plyr__ads{border-radius:inherit;bottom:0;cursor:pointer;left:0;overflow:hidden;position:absolute;right:0;top:0;z-index:-1}.plyr__ads>div,.plyr__ads>div iframe{height:100%;position:absolute;width:100%}.plyr__ads::after{background:rgba(47,52,61,.8);border-radius:2px;bottom:10px;color:#fff;content:attr(data-badge-text);font-size:11px;padding:2px 6px;pointer-events:none;position:absolute;right:10px;z-index:3}.plyr__ads::after:empty{display:none}.plyr__cues{background:currentColor;display:block;height:6px;left:0;margin:-3px 0 0;opacity:.8;position:absolute;top:50%;width:3px;z-index:3}.plyr--no-transition{transition:none!important}.plyr__sr-only{clip:rect(1px,1px,1px,1px);overflow:hidden;border:0!important;height:1px!important;padding:0!important;position:absolute!important;width:1px!important} /* qTip2 v2.0.1-183 basic css3 | qtip2.com | Licensed MIT, GPL | Wed Aug 28 2013 08:56:19 */ .qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;direction:ltr;box-shadow:none;padding:0}.qtip-content{position:relative;padding:5px 9px;overflow:hidden;text-align:left;word-wrap:break-word}.qtip-titlebar{position:relative;padding:5px 35px 5px 10px;overflow:hidden;border-width:0 0 1px;font-weight:700}.qtip-titlebar+.qtip-content{border-top-width:0!important}.qtip-close{position:absolute;right:-9px;top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;border-color:transparent}.qtip-titlebar .qtip-close{right:4px;top:50%;margin-top:-9px}* html .qtip-titlebar .qtip-close{top:16px}.qtip-titlebar .ui-icon,.qtip-icon .ui-icon{display:block;text-indent:-1000em;direction:ltr}.qtip-icon,.qtip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;text-decoration:none}.qtip-icon .ui-icon{width:18px;height:14px;line-height:14px;text-align:center;text-indent:0;font:400 bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em}.qtip-focus{}.qtip-hover{}.qtip-default{border-width:1px;border-style:solid;border-color:#F1D031;background-color:#FFFFA3;color:#555}.qtip-default .qtip-titlebar{background-color:#FFEF93}.qtip-default .qtip-icon{border-color:#CCC;background:#F1F1F1;color:#777}.qtip-default .qtip-titlebar .qtip-close{border-color:#AAA;color:#111} .qtip-light{background-color:#fff;border-color:#E2E2E2;color:#454545}.qtip-light .qtip-titlebar{background-color:#f1f1f1} .qtip-dark{background-color:#505050;border-color:#303030;color:#f3f3f3}.qtip-dark .qtip-titlebar{background-color:#404040}.qtip-dark .qtip-icon{border-color:#444}.qtip-dark .qtip-titlebar .ui-state-hover{border-color:#303030} .qtip-cream{background-color:#FBF7AA;border-color:#F9E98E;color:#A27D35}.qtip-cream .qtip-titlebar{background-color:#F0DE7D}.qtip-cream .qtip-close .qtip-icon{background-position:-82px 0} .qtip-red{background-color:#F78B83;border-color:#D95252;color:#912323}.qtip-red .qtip-titlebar{background-color:#F06D65}.qtip-red .qtip-close .qtip-icon{background-position:-102px 0}.qtip-red .qtip-icon{border-color:#D95252}.qtip-red .qtip-titlebar .ui-state-hover{border-color:#D95252} .qtip-green{background-color:#CAED9E;border-color:#90D93F;color:#3F6219}.qtip-green .qtip-titlebar{background-color:#B0DE78}.qtip-green .qtip-close .qtip-icon{background-position:-42px 0} .qtip-blue{background-color:#E5F6FE;border-color:#ADD9ED;color:#5E99BD}.qtip-blue .qtip-titlebar{background-color:#D0E9F5}.qtip-blue .qtip-close .qtip-icon{background-position:-2px 0}.qtip-shadow{-webkit-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);-moz-box-shadow:1px 1px 3px 1px rgba(0,0,0,.15);box-shadow:1px 1px 3px 1px rgba(0,0,0,.15)}.qtip-rounded,.qtip-tipsy,.qtip-bootstrap{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}.qtip-rounded .qtip-titlebar{-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px 4px 0 0;border-radius:4px 4px 0 0}.qtip-youtube{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 3px #333;-moz-box-shadow:0 0 3px #333;box-shadow:0 0 3px #333;color:#fff;border-width:0;background:#4A4A4A;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,#000));background-image:-webkit-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-moz-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-ms-linear-gradient(top,#4A4A4A 0,#000 100%);background-image:-o-linear-gradient(top,#4A4A4A 0,#000 100%)}.qtip-youtube .qtip-titlebar{background-color:#4A4A4A;background-color:rgba(0,0,0,0)}.qtip-youtube .qtip-content{padding:.75em;font:12px arial,sans-serif;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#4a4a4a, EndColorStr=#000000);-ms-filter:"progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#4a4a4a, EndColorStr=#000000);"}.qtip-youtube .qtip-icon{border-color:#222}.qtip-youtube .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-jtools{background:#232323;background:rgba(0,0,0,.7);background-image:-webkit-gradient(linear,left top,left bottom,from(#717171),to(#232323));background-image:-moz-linear-gradient(top,#717171,#232323);background-image:-webkit-linear-gradient(top,#717171,#232323);background-image:-ms-linear-gradient(top,#717171,#232323);background-image:-o-linear-gradient(top,#717171,#232323);border:2px solid #ddd;border:2px solid rgba(241,241,241,1);-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;-webkit-box-shadow:0 0 12px #333;-moz-box-shadow:0 0 12px #333;box-shadow:0 0 12px #333}.qtip-jtools .qtip-titlebar{background-color:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171, endColorstr=#4A4A4A);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171, endColorstr=#4A4A4A)"}.qtip-jtools .qtip-content{filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A, endColorstr=#232323);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A, endColorstr=#232323)"}.qtip-jtools .qtip-titlebar,.qtip-jtools .qtip-content{background:transparent;color:#fff;border:0 dashed transparent}.qtip-jtools .qtip-icon{border-color:#555}.qtip-jtools .qtip-titlebar .ui-state-hover{border-color:#333}.qtip-cluetip{-webkit-box-shadow:4px 4px 5px rgba(0,0,0,.4);-moz-box-shadow:4px 4px 5px rgba(0,0,0,.4);box-shadow:4px 4px 5px rgba(0,0,0,.4);background-color:#D9D9C2;color:#111;border:0 dashed transparent}.qtip-cluetip .qtip-titlebar{background-color:#87876A;color:#fff;border:0 dashed transparent}.qtip-cluetip .qtip-icon{border-color:#808064}.qtip-cluetip .qtip-titlebar .ui-state-hover{border-color:#696952;color:#696952}.qtip-tipsy{background:#000;background:rgba(0,0,0,.87);color:#fff;border:0 solid transparent;font-size:11px;font-family:'Lucida Grande',sans-serif;font-weight:700;line-height:16px;text-shadow:0 1px #000}.qtip-tipsy .qtip-titlebar{padding:6px 35px 0 10px;background-color:transparent}.qtip-tipsy .qtip-content{padding:6px 10px}.qtip-tipsy .qtip-icon{border-color:#222;text-shadow:none}.qtip-tipsy .qtip-titlebar .ui-state-hover{border-color:#303030}.qtip-tipped{border:3px solid #959FA9;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-color:#F9F9F9;color:#454545;font-weight:400;font-family:serif}.qtip-tipped .qtip-titlebar{border-bottom-width:0;color:#fff;background:#3A79B8;background-image:-webkit-gradient(linear,left top,left bottom,from(#3A79B8),to(#2E629D));background-image:-webkit-linear-gradient(top,#3A79B8,#2E629D);background-image:-moz-linear-gradient(top,#3A79B8,#2E629D);background-image:-ms-linear-gradient(top,#3A79B8,#2E629D);background-image:-o-linear-gradient(top,#3A79B8,#2E629D);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8, endColorstr=#2E629D);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8, endColorstr=#2E629D)"}.qtip-tipped .qtip-icon{border:2px solid #285589;background:#285589}.qtip-tipped .qtip-icon .ui-icon{background-color:#FBFBFB;color:#555}.qtip-bootstrap{font-size:14px;line-height:20px;color:#333;padding:1px;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,.2);-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;-webkit-box-shadow:0 5px 10px rgba(0,0,0,.2);-moz-box-shadow:0 5px 10px rgba(0,0,0,.2);box-shadow:0 5px 10px rgba(0,0,0,.2);-webkit-background-clip:padding-box;-moz-background-clip:padding;background-clip:padding-box}.qtip-bootstrap .qtip-titlebar{padding:8px 14px;margin:0;font-size:14px;font-weight:400;line-height:18px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.qtip-bootstrap .qtip-titlebar .qtip-close{right:11px;top:45%;border-style:none}.qtip-bootstrap .qtip-content{padding:9px 14px}.qtip-bootstrap .qtip-icon{background:transparent}.qtip-bootstrap .qtip-icon .ui-icon{width:auto;height:auto;float:right;font-size:20px;font-weight:700;line-height:18px;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.qtip-bootstrap .qtip-icon .ui-icon:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;filter:alpha(opacity=40)}.qtip:not(.ie9haxors) div.qtip-content,.qtip:not(.ie9haxors) div.qtip-titlebar{filter:none;-ms-filter:none}.qtip .qtip-tip{margin:0 auto;overflow:hidden;z-index:10}x:-o-prefocus,.qtip .qtip-tip{visibility:hidden}.qtip .qtip-tip,.qtip .qtip-tip .qtip-vml,.qtip .qtip-tip canvas{position:absolute;color:#123456;background:transparent;border:0 dashed transparent}.qtip .qtip-tip canvas{top:0;left:0}.qtip .qtip-tip .qtip-vml{behavior:url(#default#VML);display:inline-block;visibility:visible}#qtip-overlay{position:fixed;left:-10000em;top:-10000em}#qtip-overlay.blurs{cursor:pointer}#qtip-overlay div{position:absolute;left:0;top:0;width:100%;height:100%;background-color:#000;opacity:.7;filter:alpha(opacity=70);-ms-filter:"alpha(Opacity=70)"}.qtipmodal-ie6fix{position:absolute!important} @font-face { font-family: "ChunkFive"; src: url("https://webassets.zearn.org/app_assets/fonts/chunkfive/ChunkFive-Regular.woff2") format("woff2"); } /* Arvo latin */ @font-face { font-family: "Arvo"; font-style: normal; font-weight: 400; src: url("https://webassets.zearn.org/app_assets/fonts/Arvo/woff2/arvo_latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Dosis latin regular bold */ @font-face { font-family: "Dosis"; font-style: normal; font-weight: 700; src: url("https://webassets.zearn.org/app_assets/fonts/Dosis/woff2/dosis-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Oxygen latin thin */ @font-face { font-family: "Oxygen"; font-style: normal; font-weight: 300; src: url("https://webassets.zearn.org/app_assets/fonts/Oxygen/woff2/oxygen-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Oxygen latin regular */ @font-face { font-family: "Oxygen"; font-style: normal; font-weight: 400; src: url("https://webassets.zearn.org/app_assets/fonts/Oxygen/woff2/oxygen-latin-regular.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Oxygen latin bold */ @font-face { font-family: "Oxygen"; font-style: normal; font-weight: 700; src: url("https://webassets.zearn.org/app_assets/fonts/Oxygen/woff2/oxygen-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cubano regular */ @font-face { font-family: "cubano"; font-style: normal; font-weight: 400; src: url("https://webassets.zearn.org/app_assets/fonts/Cubano/woff2/Cubano.woff2") format("woff2"); } .flex-table { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .flex-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100%; height: 100%; } .flex-row:not(:last-of-type) .flex-cell { border-bottom-width: 0; } .flex-row .flex-cell:not(:first-of-type) { border-left-width: 0; } .flex-cell { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-flex-grow: 1; flex-grow: 1; border: 2px solid black; } .final-screen #footer { background-color: transparent; } .final-screen .page { width: 960px; min-height: 540px; position: relative; margin: 0 auto; background-color: #fff; box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 0 50px 50px rgba(209, 209, 209, 0.1); font-family: Oxygen, Verdana, Geneva, sans-serif; } .final-screen .activity-final-sp-bg-owl { position: absolute; bottom: 0; left: 20px; } .final-screen .activity-final-sp-bg-cat { position: absolute; right: 30px; top: 40px; } .final-screen .blurb { text-align: center; margin: auto; padding: 120px 0 0 0; color: #444; height: 540px; } .final-screen .blurb h1 { font-size: 50px; font-weight: 300; margin: 0 0 10px; } .final-screen .blurb .sub-title { font-size: 24px; font-weight: 300; margin: 0 0 30px 0; } .blue-button { border: none; padding: 6px 30px; border-radius: 50px; cursor: pointer; text-align: center; font-size: 15px; width: auto; display: inline-block; font-weight: normal; } .blue-button { color: white; background-color: #007b94; } .blue-button:hover { background-color: #005c73; } .blue-button a { color: white; } button { border: none; background-color: transparent; } .zearn-button { background-color: #007b94; color: white; font-weight: 600; padding: 4px 10px; font-size: 20px; border-radius: 20px; } .zearn-button.with-arrow { padding: 8px 10px 7px 10px; } .zearn-button.with-arrow .go-arrow { vertical-align: middle; position: relative; top: -1px; width: 24px; height: 23px; background-image: url("https://webassets.zearn.org/app_assets/general/arrows/go_arrow.png"); display: inline-block; } .zearn-button:hover, .zearn-button:focus { background-color: #005c73; } .zearn-button:disabled { background-color: #cccccc; color: white; } .plus-button, .minus-button, .zearn-button { cursor: pointer; } .plus-button:hover:enabled, .minus-button:hover:enabled, .zearn-button:hover:enabled { -webkit-box-shadow: 0px 1px 3px 1px #cccccc; -moz-box-shadow: 0px 1px 3px 1px #cccccc; -ms-box-shadow: 0px 1px 3px 1px #cccccc; -o-box-shadow: 0px 1px 3px 1px #cccccc; box-shadow: 0px 1px 3px 1px #cccccc; } .plus-button:disabled, .minus-button:disabled, .zearn-button:disabled { cursor: default; } .plus-button:active:enabled, .plus-button.active, .minus-button:active:enabled, .minus-button.active, .zearn-button:active:enabled, .zearn-button.active { -webkit-box-shadow: 0px 0px 3px 1px #cccccc; -moz-box-shadow: 0px 0px 3px 1px #cccccc; -ms-box-shadow: 0px 0px 3px 1px #cccccc; -o-box-shadow: 0px 0px 3px 1px #cccccc; box-shadow: 0px 0px 3px 1px #cccccc; } .plus-button img, .minus-button img, .zearn-button img { vertical-align: middle; } .plus-button, .minus-button { background-color: #007b94; width: 32px; height: 32px; border-radius: 50%; color: white; } .plus-button i, .minus-button i { font-size: 16px; } .plus-button.small, .minus-button.small { width: 24px; height: 24px; } .plus-button.small i, .minus-button.small i { font-size: 12px; } .plus-button:not(:disabled):hover, .plus-button:not(:disabled):focus, .minus-button:not(:disabled):hover, .minus-button:not(:disabled):focus { background-color: #005c73; } .plus-button:not(:disabled):active, .minus-button:not(:disabled):active { background-color: #003e4d; } .plus-button:disabled, .minus-button:disabled { background-color: #cccccc; } .super-reset-button { width: 46px; height: 46px; margin-right: 3px; background-color: #007b94; border-radius: 50%; color: white; cursor: pointer; } .super-reset-button i { font-size: 24px; } .super-reset-button.small { height: 40px; width: 40px; } .super-reset-button.small i { font-size: 22px; } .super-reset-button:not(:disabled):hover, .super-reset-button:not(:disabled):focus { background-color: #005c73; } .super-reset-button:not(:disabled):active { background-color: #003e4d; } .super-reset-button:disabled { background-color: #cccccc; cursor: default; } .super-rotate-button { width: 46px; height: 46px; background-size: 46px 46px; position: relative; background-color: transparent; background-repeat: no-repeat; background-position: center; cursor: pointer; opacity: 1; -webkit-transition: opacity 250ms linear; -moz-transition: opacity 250ms linear; -ms-transition: opacity 250ms linear; -o-transition: opacity 250ms linear; transition: opacity 250ms linear; background-image: url("https://webassets.zearn.org/app_assets/general/buttons/restart_active.svgz"); transform: scale(-1, 1) rotate(180deg); margin-right: 3px; position: absolute; bottom: 20px; right: 30px; cursor: pointer; } .super-rotate-button.reverse { transform: scale(1, 1) rotate(180deg); } .super-rotate-button:disabled { background-image: url("https://webassets.zearn.org/app_assets/general/buttons/restart_inactive_2017.svgz"); cursor: default; } .super-rotate-button:not(:disabled):hover { background-image: url("https://webassets.zearn.org/app_assets/general/buttons/restart_hover.svgz"); } .scroll-left, .scroll-right { width: 40px; height: 40px; border-radius: 50%; position: absolute; top: 50%; margin-top: -30px; display: none; background-color: #007b94; cursor: pointer; } .scroll-left i, .scroll-right i { color: white; font-size: 24px; margin-top: 7px; } .scroll-left.disabled, .scroll-right.disabled { background-color: #cccccc; } .scroll-left:not(.disabled).hover, .scroll-left:not(.disabled):hover, .scroll-left:not(.disabled):focus, .scroll-right:not(.disabled).hover, .scroll-right:not(.disabled):hover, .scroll-right:not(.disabled):focus { background-color: #005c73; } .scroll-left:not(.disabled):active, .scroll-right:not(.disabled):active { background-color: #003e4d; } .scroll-left { left: 0px; } .scroll-right { right: 0px; } .text-with-sound { padding-bottom: 2px; } .text-with-sound-hovering, .text-with-sound-playing { background-size: 12px 2px; background-position: center bottom; background-repeat: repeat-x; } .text-with-sound-hovering { background-image: url("https://webassets.zearn.org/app_assets/general/buttons/Text2SpeechDashBlue.svg"); } .text-with-sound-playing { background-image: url("https://webassets.zearn.org/app_assets/general/buttons/Text2SpeechDashGray.svg"); } .combo-label { position: relative; display: inline-block; background: white; color: black; border: 2px solid #c1d8ed; border-radius: 4px; min-width: 20px; white-space: nowrap; padding: 2px; } .combo-label.static { padding: 10px 4px; background: transparent; border-color: transparent; } .combo-label .combo-label-num-input { display: inline-block; margin: 6px 4px; font-size: 20px; width: 60px; vertical-align: middle; } .combo-label .combo-label-static-num, .combo-label .combo-label-static-units { vertical-align: middle; margin: 4px; font-size: 20px; } .combo-label .combo-label-select-container { display: inline-block; vertical-align: middle; } .combo-label .combo-label-select { background: transparent; padding: 0 20px 0 0; cursor: pointer; height: 40px; font-size: 20px; -webkit-appearance: none; border: 0; border-radius: 0; } .combo-label .combo-label-select option { color: black; } .combo-label .combo-label-select:disabled { color: black; } .combo-label .combo-label-select:focus { outline: none; } .combo-label .combo-label-select-arrow { color: #0c91cc; background: white; position: absolute; right: 0px; top: 0px; font-size: 20px; height: 100%; line-height: 44px; pointer-events: none; text-align: center; width: 18px; border-left: 1px solid #c1d8ed; } @-moz-document url-prefix() { .combo-label .combo-label-num-input { margin: 4px; } .combo-label .combo-label-select { padding-right: 0px; padding-top: 6px; } } .curly-bracket { color: #303b40; } .bracket { position: relative; overflow: hidden; min-width: 4px; } .bracket .bracket-point-side1, .bracket .bracket-point-side2 { position: absolute; border-radius: 12px; z-index: 2; border: 4px solid; } .bracket .bracket-long-1, .bracket .bracket-long-2 { z-index: 0; position: absolute; border-radius: 12px; border: 4px solid; } .bracket-right, .bracket-left { width: 24px; } .bracket-right .bracket-point-side1, .bracket-right .bracket-point-side2, .bracket-left .bracket-point-side1, .bracket-left .bracket-point-side2 { max-height: 30%; height: 30px; width: 40px; border-bottom-width: 4px; } .bracket-right .bracket-point-side1, .bracket-left .bracket-point-side1 { border-top: 0; bottom: 50%; margin-bottom: -2px; } .bracket-right .bracket-point-side2, .bracket-left .bracket-point-side2 { border-bottom: 0; top: 50%; margin-top: -2px; } .bracket-right .bracket-long-1, .bracket-left .bracket-long-1 { border-bottom: 0; } .bracket-right .bracket-long-2, .bracket-left .bracket-long-2 { bottom: 0; border-top: 0; } .bracket-right .bracket-long-1, .bracket-right .bracket-long-2, .bracket-left .bracket-long-1, .bracket-left .bracket-long-2 { height: calc(50% - 8px); min-height: 10px; width: 40px; } .bracket-right .bracket-point-side1, .bracket-right .bracket-point-side2 { left: 12px; } .bracket-right .bracket-point-side1 { border-top-left-radius: 0; } .bracket-right .bracket-point-side2 { border-bottom-left-radius: 0; } .bracket-right .bracket-long-1 { border-bottom-right-radius: 0; } .bracket-right .bracket-long-2 { border-top-right-radius: 0; } .bracket-right .bracket-long-1, .bracket-right .bracket-long-2 { right: 8px; } .bracket-left .bracket-point-side1, .bracket-left .bracket-point-side2 { right: 12px; } .bracket-left .bracket-point-side1 { border-top-right-radius: 0; } .bracket-left .bracket-point-side2 { border-bottom-right-radius: 0; } .bracket-left .bracket-long-1 { border-bottom-left-radius: 0; } .bracket-left .bracket-long-2 { border-top-left-radius: 0; } .bracket-left .bracket-long-1, .bracket-left .bracket-long-2 { left: 8px; } .bracket-top, .bracket-bottom { height: 24px; } .bracket-top .bracket-point-side1, .bracket-top .bracket-point-side2, .bracket-bottom .bracket-point-side1, .bracket-bottom .bracket-point-side2 { width: calc(50% - 8px); height: 40px; border-right-width: 4px; } .bracket-top .bracket-point-side1, .bracket-bottom .bracket-point-side1 { right: 50%; margin-right: -2px; border-left: 0; } .bracket-top .bracket-point-side2, .bracket-bottom .bracket-point-side2 { left: 50%; margin-left: -2px; border-right: 0; } .bracket-top .bracket-long-1, .bracket-bottom .bracket-long-1 { border-right: 0; } .bracket-top .bracket-long-2, .bracket-bottom .bracket-long-2 { border-left: 0; right: 0; } .bracket-top .bracket-long-1, .bracket-top .bracket-long-2, .bracket-bottom .bracket-long-1, .bracket-bottom .bracket-long-2 { width: calc(50% - 8px); min-width: 10px; height: 40px; } .bracket-top .bracket-point-side1, .bracket-top .bracket-point-side2 { bottom: 12px; } .bracket-top .bracket-point-side1 { border-bottom-left-radius: 0px; } .bracket-top .bracket-point-side2 { border-bottom-right-radius: 0px; } .bracket-top .bracket-long-1 { border-top-right-radius: 0; } .bracket-top .bracket-long-2 { border-top-left-radius: 0; } .bracket-top .bracket-long-1, .bracket-top .bracket-long-2 { top: 8px; } .bracket-bottom .bracket-point-side1, .bracket-bottom .bracket-point-side2 { top: 12px; } .bracket-bottom .bracket-point-side1 { border-top-left-radius: 0px; } .bracket-bottom .bracket-point-side2 { border-top-right-radius: 0px; } .bracket-bottom .bracket-long-1 { border-bottom-right-radius: 0; } .bracket-bottom .bracket-long-2 { border-bottom-left-radius: 0; } .bracket-bottom .bracket-long-1, .bracket-bottom .bracket-long-2 { bottom: 8px; } .doodle-bg { background-image: url("https://webassets.zearn.org/app_assets/general/background_doodles/feed/0_grey.png"); background-attachment: fixed; } footer.external-footer { font-family: "Source Sans Pro", Verdana, Geneva, sans-serif; background: #303b40; width: 100%; color: white; margin-top: 55px; } footer.external-footer .ef-bottom { height: 72px; display: flex; align-items: center; justify-content: center; border-top: 1px solid white; } footer.external-footer h4, footer.external-footer a, footer.external-footer .ef-copyright, footer.external-footer li { font-size: 14px; white-space: nowrap; } footer.external-footer a { color: white; } footer.external-footer ul { padding-left: 0; display: flex; font-size: 0; } footer.external-footer .ef-bottom-container { padding: 12px 0; display: flex; justify-content: space-between; margin: 0 16px; } footer.external-footer .ef-bottom-container .ef-bottom-links, footer.external-footer .ef-bottom-container .ef-copyright { display: flex; } footer.external-footer .ef-bottom-container .ef-bottom-links { justify-content: flex-start; } footer.external-footer .ef-bottom-container .ef-bottom-links li { margin: 0 8px; } footer.external-footer .ef-bottom-container .ef-bottom-links li:first-child { margin-left: 0px; } @media only screen and (min-width: 992px) { footer.external-footer .ef-bottom-container { width: 960px; } footer.external-footer .ef-bottom-container .ef-bottom-links { width: 468px; justify-content: center; } } @media only screen and (max-width: 991px) and (min-width: 767px) { footer.external-footer .ef-bottom-container { width: 768px; margin: 0 8px; } footer.external-footer .ef-bottom-container .ef-copyright { justify-content: center; width: 240px; } footer.external-footer .ef-bottom-container .ef-bottom-links { width: 480px; justify-content: center; } } @media only screen and (max-width: 767px) { footer.external-footer .ef-bottom { height: unset; } footer.external-footer .ef-bottom-container { padding: 20px 12px; margin: 0; width: 100%; } footer.external-footer .ef-bottom-container .ef-copyright, footer.external-footer .ef-bottom-container .ef-bottom-links { justify-content: flex-end; width: auto; } footer.external-footer .ef-bottom-container .ef-bottom-links li, footer.external-footer .ef-bottom-container .ef-bottom-links li a, footer.external-footer .ef-bottom-container .ef-copyright { font-size: 10px; font-weight: 600; } footer.external-footer .ef-bottom-container .ef-bottom-links li:not(.list-bullet), footer.external-footer .ef-bottom-container .ef-bottom-links li a:not(.list-bullet), footer.external-footer .ef-bottom-container .ef-copyright:not(.list-bullet) { margin: 0; } } .flag-main, .flag-end, .flag-fold { vertical-align: top; position: relative; display: inline-block; } .flag-main { z-index: 12; } .flag-end { z-index: 10; } .flag-fold { z-index: 11; } .flag-left, .flag-right { display: inline-block; vertical-align: top; position: relative; } .flag-left .flag-end, .flag-right .flag-end { background-color: #a8cfe6; height: 40px; line-height: 32px; color: white; font-size: 18px; } .flag-left .flag-end img, .flag-right .flag-end img { margin-top: 1px; } .flag-left .flag-fold, .flag-right .flag-fold { background-color: #86b5ce; width: 19px; height: 46px; } .flag-left .flag-main, .flag-right .flag-main { background-color: #bfdcee; height: 40px; line-height: 40px; letter-spacing: 1px; font-size: 14px; color: #0c91cc; } .flag-right { text-align: left; } .flag-right .flag-end { right: 34px; top: 6px; padding: 4px 16px 0px 26px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; } .flag-right .flag-fold { right: 19px; border-top-right-radius: 60px; border-bottom-right-radius: 50px; } .flag-right .flag-main { padding: 0px 20px 0px 12px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .flag-left { text-align: right; } .flag-left .flag-end { left: 34px; top: 6px; padding: 4px 26px 0px 16px; border-top-left-radius: 40px; border-bottom-left-radius: 40px; } .flag-left .flag-fold { left: 19px; border-top-left-radius: 60px; border-bottom-left-radius: 50px; } .flag-left .flag-main { padding: 0px 12px 0px 20px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } #footer { position: relative; width: 100%; text-align: center; font-size: 12px; line-height: 12px; font-family: Oxygen, Verdana, Geneva, sans-serif; color: #444; } #footer .content.internal-footer { padding: 0; } #footer .content ul { padding: 0; } #footer .content li { display: inline-block; border-right: 1px solid #444; padding: 0 10px; margin: 5px 0; } #footer .content li:last-of-type { border-right: none; } #footer a { color: #444; text-decoration: underline; } #footer p { font-size: 12px; margin-bottom: 0px; } #footer .cci-footer { max-width: 1024px; line-height: 1.5; margin: 5px auto; } .g6plus #footer { min-height: 120px; } body:not(.student) #footer { margin-top: 100px; } .horizontal-number-line { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .horizontal-number-line .hnl-axis { position: relative; width: 840px; height: 35px; margin: 0 30px; font-size: 0; } .horizontal-number-line .hnl-axis-svg { position: absolute; left: -29px; top: 11px; width: 898px; height: 15px; stroke: #4d4d4d; stroke-width: 4px; } .horizontal-number-line .hnl-left-arrow-svg, .horizontal-number-line .hnl-right-arrow-wrapper { position: absolute; top: 6.5px; } .horizontal-number-line .hnl-arrow-svg { width: 13px; height: 22px; stroke: #4d4d4d; stroke-width: 3; fill: none; stroke-linejoin: round; } .horizontal-number-line .hnl-left-arrow-svg { left: -31px; } .horizontal-number-line .hnl-right-arrow-wrapper { right: -31px; } .horizontal-number-line .hnl-label { white-space: nowrap; } .horizontal-number-line .hnl-label .token-container { line-height: normal; } .horizontal-number-line .hnl-label .token-container .fraction, .horizontal-number-line .hnl-label .token-container .zearn-input.number-input { font-size: 18px; } .horizontal-number-line .hnl-ticks { position: absolute; width: 100%; } .horizontal-number-line .hnl-ticks .hnl-unit { position: absolute; height: 35px; display: inline-block; } .horizontal-number-line .hnl-ticks .hnl-unit .hnl-tick-label { position: relative; left: -49%; top: 5px; font-size: 18px; text-align: center; pointer-events: none; } .horizontal-number-line .hnl-ticks .hnl-unit .hnl-tick-label > * { pointer-events: auto; } .horizontal-number-line .hnl-ticks .hnl-unit .hnl-tick-label.has-adjacent-fraction { line-height: 35px; } .horizontal-number-line .hnl-ticks .hnl-unit .hnl-tick-label.has-tile-slots { line-height: 55px; } .horizontal-number-line .hnl-ticks .hnl-unit .hnl-tick-label.bold { font-weight: bold; } .horizontal-number-line .hnl-ticks .hnl-tick-svg line { stroke: #4d4d4d; stroke-linecap: round; } .double-number-line-partition .correctable .in-between line { stroke: #ff4d76; } .horizontal-number-line .hnl-ticks .hnl-whole-tick .hnl-whole-tick-line { stroke-width: 4px; } .horizontal-number-line .hnl-ticks .hnl-whole-tick .hnl-tick-label { height: 21px; } .horizontal-number-line .hnl-ticks .hnl-segment-tick .hnl-segment-tick-line { stroke-width: 2px; } .horizontal-number-line .hnl-ticks .hnl-segment-tick .hnl-tick-label { height: 21px; } .horizontal-number-line .point { border-radius: 50%; width: 24px; height: 24px; background-color: #a1adb3; border: solid 2px #435259; } .horizontal-number-line .hnl-arrows { display: flex; flex-direction: column-reverse; width: 840px; } .horizontal-number-line .hnl-arrows .horiz-number-line-arrow:not(:first-of-type) { margin-bottom: 8px; } .horizontal-number-line .hnl-greater-less-arrows { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 693px; height: 26px; margin: 0 auto; } .horizontal-number-line .hnl-greater-less-arrows .horiz-number-line-greater-less-arrow { position: relative; width: 250px; height: 26px; } .horizontal-number-line .hnl-greater-less-arrows .horiz-number-line-greater-less-arrow .arrow-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; stroke: #4d4d4d; stroke-width: 3px; fill: #4d4d4d; overflow: visible; } .horizontal-number-line .hnl-greater-less-arrows .horiz-number-line-greater-less-arrow .arrow-label { position: absolute; top: 2px; left: 50%; width: 80px; margin-left: -40px; } .horizontal-number-line .hnl-greater-less-arrows .horiz-number-line-greater-less-arrow .arrow-label .arrow-label-inner { display: inline-block; vertical-align: top; padding: 0 10px; color: #4d4d4d; font-size: 16px; } .horizontal-number-line .hnl-greater-less-arrows .less-arrow .arrow-svg { transform: scale(-1, 1); } .operational-buttons, .super-operational-buttons { display: inline-block; vertical-align: middle; text-align: center; margin-right: 10px; } .operational-buttons .buttons-container, .super-operational-buttons .buttons-container { display: inline-block; float: right; } .operational-buttons { min-width: 136px; } .super-operational-buttons { min-width: 102px; } .split-button, .directional-button, .undo-button, .shade-button { border: 0px; padding: 3px 0px; background-color: transparent; display: block; margin: 0 auto; } .split-button .split-icon, .split-button .directional-icon, .split-button .undo-icon, .split-button .shade-icon, .directional-button .split-icon, .directional-button .directional-icon, .directional-button .undo-icon, .directional-button .shade-icon, .undo-button .split-icon, .undo-button .directional-icon, .undo-button .undo-icon, .undo-button .shade-icon, .shade-button .split-icon, .shade-button .directional-icon, .shade-button .undo-icon, .shade-button .shade-icon { height: 53px; width: 53px; background-image: url("https://webassets.zearn.org/app_assets/tasks/fraction_area_model/sprite6.png"); } .split-button .split-horizontal-icon { background-position: -284px -68px; } .split-button.colored .split-horizontal-icon { background-position: -257px -194px; } .split-button:disabled .split-horizontal-icon, .split-button.colored:disabled .split-horizontal-icon { background-position: -257px -131px; } .split-button .split-vertical-icon { background-position: -131px -194px; } .split-button.colored .split-vertical-icon { background-position: -284px -5px; } .split-button:disabled .split-vertical-icon, .split-button.colored:disabled .split-vertical-icon { background-position: -194px -194px; } .split-button .split-clear-icon { background-position: -5px -131px; } .split-button:disabled .split-clear-icon { background-position: -68px -131px; } .split-button .split-clone-icon { background-position: -131px -131px; } .split-button:disabled .split-clone-icon { background-position: -194px -131px; } .directional-buttons { display: table; margin: 0 auto; } .directional-button { display: table-cell; float: none; } .directional-button .arrow-left-icon { background-position: -132px -317px; } .directional-button:disabled .arrow-left-icon { background-position: -195px -317px; } .directional-button .arrow-right-icon { background-position: -5px -317px; } .directional-button:disabled .arrow-right-icon { background-position: -68px -317px; } .directional-button .double-arrow-left-icon { background-position: -257px -254px; } .directional-button:disabled .double-arrow-left-icon { background-position: -320px -254px; } .directional-button .double-arrow-right-icon { background-position: -257px -317px; } .directional-button:disabled .double-arrow-right-icon { background-position: -320px -317px; } .undo-button .undo-icon { background-position: -5px -257px; } .undo-button:disabled .undo-icon { background-position: -68px -257px; } .shade-button .shade-icon { background-position: -5px -194px; } .shade-button .shade-icon.vertical { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .shade-button:disabled .shade-icon { background-position: -68px -194px; } .shade-button.cross-out .shade-icon { background-position: -132px -256px; } .shade-button.cross-out:disabled .shade-icon { background-position: -195px -255px; } .alignment-button { border: 0px; padding: 0px; background-color: transparent; } .alignment-button .arrow-down-icon { height: 19px; width: 41px; background-image: url("https://webassets.zearn.org/app_assets/tasks/fraction_area_model/sprite6.png"); background-position: -56px -68px; } .alignment-button.disabled .arrow-down-icon { background-position: -56px -5px; } .alignment-button .arrow-up-drag-icon { height: 61px; width: 41px; background-image: url("https://webassets.zearn.org/app_assets/tasks/fraction_area_model/sprite6.png"); background-position: -107px -5px; } .alignment-button.disabled .arrow-up-drag-icon { background-position: -5px -5px; } .number-bond-2017 .nb2017-controls { margin: 20px 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .number-bond-2017 .plus-button, .number-bond-2017 .minus-button, .number-bond-2017 .nb2017-part-icon { display: inline-block; } .number-bond-2017 .nb2017-part-icon { background-image: url("https://webassets.zearn.org/app_assets/tasks/number_bond_2017/numberBondPartIcon2.svg"); background-repeat: no-repeat; width: 19px; height: 31px; margin: 0 5px; } .number-bond-2017 .number-bond-parts-token .nbp-part-line.ghost { stroke: #808080; stroke-dasharray: 6; stroke-miterlimit: 10; } .number-bond-2017 .number-bond-parts-token .nbp-part-token-wrapper.ghost.small, .number-bond-2017 .number-bond-parts-token .nbp-part-token-wrapper.ghost.large { border: 2px dashed #808080; background: #e4e4e4; } .number-bond-2017 .number-bond-parts-token .nbp-part-token-wrapper.ghost .nbp-whole-part-token { display: none; } /* TODO: SFI / SLAS tasks convert to vue - keep variables for number_bond_parts move nbp-specific scss into SFI / SLAS tasks when converted */ body:not(.g6plus):not(.grade-k) .super-fill-in-widget .number-bond-parts-token .nbp-whole-token-wrapper .fraction, body:not(.g6plus):not(.grade-k) .super-fill-in-widget .number-bond-parts-token .nbp-whole-token-wrapper .number-input { font-size: 24px; } body.g6plus .super-fill-in-widget .number-bond-parts-token .nbp-whole-token-wrapper .fraction, body.g6plus .super-fill-in-widget .number-bond-parts-token .nbp-whole-token-wrapper .number-input { font-size: 25px; } body.grade-k .super-fill-in-widget .number-bond-parts-token .nbp-whole-token-wrapper .fraction, body.grade-k .super-fill-in-widget .number-bond-parts-token .nbp-whole-token-wrapper .number-input { font-size: 24px; } body:not(.g6plus):not(.grade-k) .super-fill-in-widget .number-bond-parts-token .nbp-part-token-wrapper .fraction, body:not(.g6plus):not(.grade-k) .super-fill-in-widget .number-bond-parts-token .nbp-part-token-wrapper .number-input { font-size: 18px; } body.g6plus .super-fill-in-widget .number-bond-parts-token .nbp-part-token-wrapper .fraction, body.g6plus .super-fill-in-widget .number-bond-parts-token .nbp-part-token-wrapper .number-input { font-size: 19px; } body.grade-k .super-fill-in-widget .number-bond-parts-token .nbp-part-token-wrapper .fraction, body.grade-k .super-fill-in-widget .number-bond-parts-token .nbp-part-token-wrapper .number-input { font-size: 18px; } .super-fill-in-widget .number-bond-parts-token .graded .nbp-whole-part-token { height: calc(100% + 2 * 2px); width: calc(100% + 2 * 2px); } .super-fill-in-widget .number-bond-parts-token .super-input:not(.correct):not(.try-again):not(.incorrect), .super-fill-in-widget .number-bond-parts-token .super-input.correct.done { border-color: #435259; } .super-fill-in-widget .number-bond-parts-token .large .super-input, .super-fill-in-widget .number-bond-parts-token .whole .super-input { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 104px; height: 104px; border-radius: 52px; position: relative; top: -2px; left: -2px; } .super-fill-in-widget .number-bond-parts-token .large .super-input.fraction-input, .super-fill-in-widget .number-bond-parts-token .whole .super-input.fraction-input { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; } .super-fill-in-widget .number-bond-parts-token .small .super-input { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 70px; height: 70px; border-radius: 35px; position: relative; top: -2px; left: -2px; } .super-fill-in-widget .number-bond-parts-token .small .super-input.fraction-input { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 0; } .super-label-a-sentence .number-bond-parts-token .graded .nbp-whole-part-token { height: calc(100% + 2 * 2px); width: calc(100% + 2 * 2px); } .super-label-a-sentence .number-bond-parts-token .tile-destination-slot { position: relative; top: -2px; left: -2px; } .super-label-a-sentence .number-bond-parts-token .large .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct-tile, .super-label-a-sentence .number-bond-parts-token .large .tile-destination-slot:not(.prepopulated):not(.autocorrected).try-again, .super-label-a-sentence .number-bond-parts-token .large .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect-tile, .super-label-a-sentence .number-bond-parts-token .whole .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct-tile, .super-label-a-sentence .number-bond-parts-token .whole .tile-destination-slot:not(.prepopulated):not(.autocorrected).try-again, .super-label-a-sentence .number-bond-parts-token .whole .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect-tile { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 104px; height: 104px; border-radius: 52px; transition: none; min-width: 0 !important; min-height: 0 !important; } .super-label-a-sentence .number-bond-parts-token .large .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct-tile .tile, .super-label-a-sentence .number-bond-parts-token .large .tile-destination-slot:not(.prepopulated):not(.autocorrected).try-again .tile, .super-label-a-sentence .number-bond-parts-token .large .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect-tile .tile, .super-label-a-sentence .number-bond-parts-token .whole .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct-tile .tile, .super-label-a-sentence .number-bond-parts-token .whole .tile-destination-slot:not(.prepopulated):not(.autocorrected).try-again .tile, .super-label-a-sentence .number-bond-parts-token .whole .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect-tile .tile { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-width: 0; border-radius: 52px; width: 100% !important; height: 100% !important; } .super-label-a-sentence .number-bond-parts-token .small .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct-tile, .super-label-a-sentence .number-bond-parts-token .small .tile-destination-slot:not(.prepopulated):not(.autocorrected).try-again, .super-label-a-sentence .number-bond-parts-token .small .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect-tile { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 70px; height: 70px; border-radius: 35px; transition: none; min-width: 0 !important; min-height: 0 !important; } .super-label-a-sentence .number-bond-parts-token .small .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct-tile .tile, .super-label-a-sentence .number-bond-parts-token .small .tile-destination-slot:not(.prepopulated):not(.autocorrected).try-again .tile, .super-label-a-sentence .number-bond-parts-token .small .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect-tile .tile { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-width: 0; border-radius: 35px; width: 100% !important; height: 100% !important; } .super-label-a-sentence .number-bond-parts-token .tile-destination-slot.autocorrected { min-width: 0 !important; min-height: 0 !important; } .super-label-a-sentence .number-bond-parts-token .correct-answer { height: auto !important; width: auto !important; } .number-line-token path, .double-number-line.token path { fill: none; stroke-width: 2px; stroke: #4d4d4d; } .number-line-token polygon, .double-number-line.token polygon { fill: #4d4d4d; } .super-fill-in .number-line-token .nl-top-label { bottom: 37px; } .super-fill-in .number-line-token .nl-bottom-labels { top: 37px; } .super-fill-in .number-line-token .super-input.number-input { height: 36px; } body:not(.g6plus):not(.grade-k) .super-fill-in-widget .number-line-token input.number-input, body:not(.g6plus):not(.grade-k) .super-fill-in-widget .number-line-token .fraction { font-size: 18px; } body.g6plus .super-fill-in-widget .number-line-token input.number-input, body.g6plus .super-fill-in-widget .number-line-token .fraction { font-size: 19px; } body.grade-k .super-fill-in-widget .number-line-token input.number-input, body.grade-k .super-fill-in-widget .number-line-token .fraction { font-size: 18px; } .super-fill-in-widget .number-line-token .fraction.token:not(.fraction-input) { width: calc(1.7em + 8px); } .super-fill-in-widget .number-line-token .fraction.token:not(.fraction-input) .numerator .token-text, .super-fill-in-widget .number-line-token .fraction.token:not(.fraction-input) .denominator .token-text { display: block; border: 2px solid transparent; margin: 4px 0; } .super-fill-in-widget .number-line-token .nl-fraction .token-text { line-height: 41px; } .super-fill-in-widget .number-line-token .nl-fraction .fraction-token .token-text { line-height: normal; } .super-label-a-sentence .number-line-token { font-size: 18px; } .super-label-a-sentence .number-line-token .nl-axis { margin: 50px auto; } .super-label-a-sentence .number-line-token .nl-label:not(.nl-fraction) { margin-top: 9px; } .super-label-a-sentence .number-line-token .nl-fraction { line-height: 102px; } .super-input:not(.correct):not(.incorrect) .zearn-input:not(.full):not(.inactive):not(.dropdown-selected-display)::after, .zearn-input:not(.correct):not(.incorrect):not(.full):not(.inactive):not(.dropdown-selected-display)::after { content: "|"; font-weight: 100; position: relative; top: -3px; left: 2px; margin-left: -2px; -webkit-animation: blink 1300ms linear infinite; -moz-animation: blink 1300ms linear infinite; -ms-animation: blink 1300ms linear infinite; -o-animation: blink 1300ms linear infinite; animation: blink 1300ms linear infinite; } .zearn-input:focus { outline: none !important; } .number-sense-task-group .zearn-input-box, .number-sense-task-group .zearn-input { border: 4px solid black; border-radius: 8px; min-width: 85px; display: inline-block; } .number-sense-task-group .zearn-input { font-size: 40px; transition: background 250ms, color 250ms, border-color 250ms; } .number-sense-task-group .zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(:empty) { padding-left: 15px; } .number-sense-task-group .zearn-input.correct:not(.correct-done) { background-color: #50cb13; color: white; border-color: #50cb13; } .number-sense-task-group .zearn-input.correct.correct-done { border-color: transparent; } .number-sense-task-group .zearn-input.incorrect { background-color: #ff005b; color: white; border-color: #ff005b; } .number-sense-task-group .zearn-input.try-again { border-color: #ff4d76; color: #323232; background-color: #ffe3ee; } .number-sense-task-group .zearn-input.incorrect-done { border-color: transparent; } .number-sense-task-group .zearn-input.clickable { cursor: pointer; z-index: 20; } .number-sense-task-group .zearn-input.grayed { border-color: #e4e4e4; background-color: #e4e4e4; } .number-sense-task-group .zearn-input.unknown { border-color: transparent; } .number-sense-task-group .zearn-input.jiggle { -webkit-animation: jiggle 250ms ease-in-out infinite; -moz-animation: jiggle 250ms ease-in-out infinite; -ms-animation: jiggle 250ms ease-in-out infinite; -o-animation: jiggle 250ms ease-in-out infinite; animation: jiggle 250ms ease-in-out infinite; } .super-fill-in-widget .zearn-input, .super-fill-in-widget .number-input, .super-fill-in-widget .super-input, .place-value-mat-widget .zearn-input, .place-value-mat-widget .number-input, .place-value-mat-widget .super-input, .sf-problems .zearn-input, .sf-problems .number-input, .sf-problems .super-input, .sprint-rows .zearn-input, .sprint-rows .number-input, .sprint-rows .super-input { -webkit-transition: all 200ms; -moz-transition: all 200ms; -ms-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; border-width: 2px; border-style: solid; border-radius: 4px; background-color: white; display: inline-block; margin-top: 1px; } .super-fill-in-widget .zearn-input:not(.zearn-input), .super-fill-in-widget .number-input:not(.zearn-input), .super-fill-in-widget .super-input:not(.zearn-input), .place-value-mat-widget .zearn-input:not(.zearn-input), .place-value-mat-widget .number-input:not(.zearn-input), .place-value-mat-widget .super-input:not(.zearn-input), .sf-problems .zearn-input:not(.zearn-input), .sf-problems .number-input:not(.zearn-input), .sf-problems .super-input:not(.zearn-input), .sprint-rows .zearn-input:not(.zearn-input), .sprint-rows .number-input:not(.zearn-input), .sprint-rows .super-input:not(.zearn-input) { border-color: transparent; } .super-fill-in-widget .zearn-input.try-again, .super-fill-in-widget .zearn-input.correct, .super-fill-in-widget .zearn-input.incorrect, .super-fill-in-widget .zearn-input.pre-ghost-autocorrect, .super-fill-in-widget .number-input.try-again, .super-fill-in-widget .number-input.correct, .super-fill-in-widget .number-input.incorrect, .super-fill-in-widget .number-input.pre-ghost-autocorrect, .super-fill-in-widget .super-input.try-again, .super-fill-in-widget .super-input.correct, .super-fill-in-widget .super-input.incorrect, .super-fill-in-widget .super-input.pre-ghost-autocorrect, .place-value-mat-widget .zearn-input.try-again, .place-value-mat-widget .zearn-input.correct, .place-value-mat-widget .zearn-input.incorrect, .place-value-mat-widget .zearn-input.pre-ghost-autocorrect, .place-value-mat-widget .number-input.try-again, .place-value-mat-widget .number-input.correct, .place-value-mat-widget .number-input.incorrect, .place-value-mat-widget .number-input.pre-ghost-autocorrect, .place-value-mat-widget .super-input.try-again, .place-value-mat-widget .super-input.correct, .place-value-mat-widget .super-input.incorrect, .place-value-mat-widget .super-input.pre-ghost-autocorrect, .sf-problems .zearn-input.try-again, .sf-problems .zearn-input.correct, .sf-problems .zearn-input.incorrect, .sf-problems .zearn-input.pre-ghost-autocorrect, .sf-problems .number-input.try-again, .sf-problems .number-input.correct, .sf-problems .number-input.incorrect, .sf-problems .number-input.pre-ghost-autocorrect, .sf-problems .super-input.try-again, .sf-problems .super-input.correct, .sf-problems .super-input.incorrect, .sf-problems .super-input.pre-ghost-autocorrect, .sprint-rows .zearn-input.try-again, .sprint-rows .zearn-input.correct, .sprint-rows .zearn-input.incorrect, .sprint-rows .zearn-input.pre-ghost-autocorrect, .sprint-rows .number-input.try-again, .sprint-rows .number-input.correct, .sprint-rows .number-input.incorrect, .sprint-rows .number-input.pre-ghost-autocorrect, .sprint-rows .super-input.try-again, .sprint-rows .super-input.correct, .sprint-rows .super-input.incorrect, .sprint-rows .super-input.pre-ghost-autocorrect { border-width: 4px; } .super-fill-in-widget .zearn-input.correct, .super-fill-in-widget .number-input.correct, .super-fill-in-widget .super-input.correct, .place-value-mat-widget .zearn-input.correct, .place-value-mat-widget .number-input.correct, .place-value-mat-widget .super-input.correct, .sf-problems .zearn-input.correct, .sf-problems .number-input.correct, .sf-problems .super-input.correct, .sprint-rows .zearn-input.correct, .sprint-rows .number-input.correct, .sprint-rows .super-input.correct { border-color: #00c372; background-color: #ccffd9; } .super-fill-in-widget .zearn-input.try-again, .super-fill-in-widget .zearn-input.incorrect:not(.correctable):not(.done), .super-fill-in-widget .zearn-input.pre-ghost-autocorrect, .super-fill-in-widget .number-input.try-again, .super-fill-in-widget .number-input.incorrect:not(.correctable):not(.done), .super-fill-in-widget .number-input.pre-ghost-autocorrect, .super-fill-in-widget .super-input.try-again, .super-fill-in-widget .super-input.incorrect:not(.correctable):not(.done), .super-fill-in-widget .super-input.pre-ghost-autocorrect, .place-value-mat-widget .zearn-input.try-again, .place-value-mat-widget .zearn-input.incorrect:not(.correctable):not(.done), .place-value-mat-widget .zearn-input.pre-ghost-autocorrect, .place-value-mat-widget .number-input.try-again, .place-value-mat-widget .number-input.incorrect:not(.correctable):not(.done), .place-value-mat-widget .number-input.pre-ghost-autocorrect, .place-value-mat-widget .super-input.try-again, .place-value-mat-widget .super-input.incorrect:not(.correctable):not(.done), .place-value-mat-widget .super-input.pre-ghost-autocorrect, .sf-problems .zearn-input.try-again, .sf-problems .zearn-input.incorrect:not(.correctable):not(.done), .sf-problems .zearn-input.pre-ghost-autocorrect, .sf-problems .number-input.try-again, .sf-problems .number-input.incorrect:not(.correctable):not(.done), .sf-problems .number-input.pre-ghost-autocorrect, .sf-problems .super-input.try-again, .sf-problems .super-input.incorrect:not(.correctable):not(.done), .sf-problems .super-input.pre-ghost-autocorrect, .sprint-rows .zearn-input.try-again, .sprint-rows .zearn-input.incorrect:not(.correctable):not(.done), .sprint-rows .zearn-input.pre-ghost-autocorrect, .sprint-rows .number-input.try-again, .sprint-rows .number-input.incorrect:not(.correctable):not(.done), .sprint-rows .number-input.pre-ghost-autocorrect, .sprint-rows .super-input.try-again, .sprint-rows .super-input.incorrect:not(.correctable):not(.done), .sprint-rows .super-input.pre-ghost-autocorrect { border-color: #ff4d76; background-color: #ffe3ee; } .super-fill-in-widget .zearn-input.incorrect.correctable, .super-fill-in-widget .number-input.incorrect.correctable, .super-fill-in-widget .super-input.incorrect.correctable, .place-value-mat-widget .zearn-input.incorrect.correctable, .place-value-mat-widget .number-input.incorrect.correctable, .place-value-mat-widget .super-input.incorrect.correctable, .sf-problems .zearn-input.incorrect.correctable, .sf-problems .number-input.incorrect.correctable, .sf-problems .super-input.incorrect.correctable, .sprint-rows .zearn-input.incorrect.correctable, .sprint-rows .number-input.incorrect.correctable, .sprint-rows .super-input.incorrect.correctable { background-color: #ff4d76; color: white; border-color: #ff4d76; } .super-fill-in-widget .zearn-input.incorrect.correctable .zearn-input, .super-fill-in-widget .zearn-input.incorrect.correctable .number-input, .super-fill-in-widget .number-input.incorrect.correctable .zearn-input, .super-fill-in-widget .number-input.incorrect.correctable .number-input, .super-fill-in-widget .super-input.incorrect.correctable .zearn-input, .super-fill-in-widget .super-input.incorrect.correctable .number-input, .place-value-mat-widget .zearn-input.incorrect.correctable .zearn-input, .place-value-mat-widget .zearn-input.incorrect.correctable .number-input, .place-value-mat-widget .number-input.incorrect.correctable .zearn-input, .place-value-mat-widget .number-input.incorrect.correctable .number-input, .place-value-mat-widget .super-input.incorrect.correctable .zearn-input, .place-value-mat-widget .super-input.incorrect.correctable .number-input, .sf-problems .zearn-input.incorrect.correctable .zearn-input, .sf-problems .zearn-input.incorrect.correctable .number-input, .sf-problems .number-input.incorrect.correctable .zearn-input, .sf-problems .number-input.incorrect.correctable .number-input, .sf-problems .super-input.incorrect.correctable .zearn-input, .sf-problems .super-input.incorrect.correctable .number-input, .sprint-rows .zearn-input.incorrect.correctable .zearn-input, .sprint-rows .zearn-input.incorrect.correctable .number-input, .sprint-rows .number-input.incorrect.correctable .zearn-input, .sprint-rows .number-input.incorrect.correctable .number-input, .sprint-rows .super-input.incorrect.correctable .zearn-input, .sprint-rows .super-input.incorrect.correctable .number-input { color: white; } .super-fill-in-widget .zearn-input.incorrect.done, .super-fill-in-widget .number-input.incorrect.done, .super-fill-in-widget .super-input.incorrect.done, .place-value-mat-widget .zearn-input.incorrect.done, .place-value-mat-widget .number-input.incorrect.done, .place-value-mat-widget .super-input.incorrect.done, .sf-problems .zearn-input.incorrect.done, .sf-problems .number-input.incorrect.done, .sf-problems .super-input.incorrect.done, .sprint-rows .zearn-input.incorrect.done, .sprint-rows .number-input.incorrect.done, .sprint-rows .super-input.incorrect.done { color: #ff4d76; } .super-fill-in-widget .zearn-input.incorrect.done .zearn-input, .super-fill-in-widget .zearn-input.incorrect.done .number-input, .super-fill-in-widget .number-input.incorrect.done .zearn-input, .super-fill-in-widget .number-input.incorrect.done .number-input, .super-fill-in-widget .super-input.incorrect.done .zearn-input, .super-fill-in-widget .super-input.incorrect.done .number-input, .place-value-mat-widget .zearn-input.incorrect.done .zearn-input, .place-value-mat-widget .zearn-input.incorrect.done .number-input, .place-value-mat-widget .number-input.incorrect.done .zearn-input, .place-value-mat-widget .number-input.incorrect.done .number-input, .place-value-mat-widget .super-input.incorrect.done .zearn-input, .place-value-mat-widget .super-input.incorrect.done .number-input, .sf-problems .zearn-input.incorrect.done .zearn-input, .sf-problems .zearn-input.incorrect.done .number-input, .sf-problems .number-input.incorrect.done .zearn-input, .sf-problems .number-input.incorrect.done .number-input, .sf-problems .super-input.incorrect.done .zearn-input, .sf-problems .super-input.incorrect.done .number-input, .sprint-rows .zearn-input.incorrect.done .zearn-input, .sprint-rows .zearn-input.incorrect.done .number-input, .sprint-rows .number-input.incorrect.done .zearn-input, .sprint-rows .number-input.incorrect.done .number-input, .sprint-rows .super-input.incorrect.done .zearn-input, .sprint-rows .super-input.incorrect.done .number-input { color: #ff4d76; } .super-fill-in-widget .zearn-input.try-again, .super-fill-in-widget .zearn-input.incorrect.correctable, .super-fill-in-widget .number-input.try-again, .super-fill-in-widget .number-input.incorrect.correctable, .super-fill-in-widget .super-input.try-again, .super-fill-in-widget .super-input.incorrect.correctable, .place-value-mat-widget .zearn-input.try-again, .place-value-mat-widget .zearn-input.incorrect.correctable, .place-value-mat-widget .number-input.try-again, .place-value-mat-widget .number-input.incorrect.correctable, .place-value-mat-widget .super-input.try-again, .place-value-mat-widget .super-input.incorrect.correctable, .sf-problems .zearn-input.try-again, .sf-problems .zearn-input.incorrect.correctable, .sf-problems .number-input.try-again, .sf-problems .number-input.incorrect.correctable, .sf-problems .super-input.try-again, .sf-problems .super-input.incorrect.correctable, .sprint-rows .zearn-input.try-again, .sprint-rows .zearn-input.incorrect.correctable, .sprint-rows .number-input.try-again, .sprint-rows .number-input.incorrect.correctable, .sprint-rows .super-input.try-again, .sprint-rows .super-input.incorrect.correctable { cursor: pointer; } .super-fill-in-widget .zearn-input.try-again .zearn-input, .super-fill-in-widget .zearn-input.try-again .number-input, .super-fill-in-widget .zearn-input.incorrect.correctable .zearn-input, .super-fill-in-widget .zearn-input.incorrect.correctable .number-input, .super-fill-in-widget .number-input.try-again .zearn-input, .super-fill-in-widget .number-input.try-again .number-input, .super-fill-in-widget .number-input.incorrect.correctable .zearn-input, .super-fill-in-widget .number-input.incorrect.correctable .number-input, .super-fill-in-widget .super-input.try-again .zearn-input, .super-fill-in-widget .super-input.try-again .number-input, .super-fill-in-widget .super-input.incorrect.correctable .zearn-input, .super-fill-in-widget .super-input.incorrect.correctable .number-input, .place-value-mat-widget .zearn-input.try-again .zearn-input, .place-value-mat-widget .zearn-input.try-again .number-input, .place-value-mat-widget .zearn-input.incorrect.correctable .zearn-input, .place-value-mat-widget .zearn-input.incorrect.correctable .number-input, .place-value-mat-widget .number-input.try-again .zearn-input, .place-value-mat-widget .number-input.try-again .number-input, .place-value-mat-widget .number-input.incorrect.correctable .zearn-input, .place-value-mat-widget .number-input.incorrect.correctable .number-input, .place-value-mat-widget .super-input.try-again .zearn-input, .place-value-mat-widget .super-input.try-again .number-input, .place-value-mat-widget .super-input.incorrect.correctable .zearn-input, .place-value-mat-widget .super-input.incorrect.correctable .number-input, .sf-problems .zearn-input.try-again .zearn-input, .sf-problems .zearn-input.try-again .number-input, .sf-problems .zearn-input.incorrect.correctable .zearn-input, .sf-problems .zearn-input.incorrect.correctable .number-input, .sf-problems .number-input.try-again .zearn-input, .sf-problems .number-input.try-again .number-input, .sf-problems .number-input.incorrect.correctable .zearn-input, .sf-problems .number-input.incorrect.correctable .number-input, .sf-problems .super-input.try-again .zearn-input, .sf-problems .super-input.try-again .number-input, .sf-problems .super-input.incorrect.correctable .zearn-input, .sf-problems .super-input.incorrect.correctable .number-input, .sprint-rows .zearn-input.try-again .zearn-input, .sprint-rows .zearn-input.try-again .number-input, .sprint-rows .zearn-input.incorrect.correctable .zearn-input, .sprint-rows .zearn-input.incorrect.correctable .number-input, .sprint-rows .number-input.try-again .zearn-input, .sprint-rows .number-input.try-again .number-input, .sprint-rows .number-input.incorrect.correctable .zearn-input, .sprint-rows .number-input.incorrect.correctable .number-input, .sprint-rows .super-input.try-again .zearn-input, .sprint-rows .super-input.try-again .number-input, .sprint-rows .super-input.incorrect.correctable .zearn-input, .sprint-rows .super-input.incorrect.correctable .number-input { cursor: pointer; } .super-fill-in-widget .zearn-input.done:not(.pre-ghost-autocorrect), .super-fill-in-widget .number-input.done:not(.pre-ghost-autocorrect), .super-fill-in-widget .super-input.done:not(.pre-ghost-autocorrect), .place-value-mat-widget .zearn-input.done:not(.pre-ghost-autocorrect), .place-value-mat-widget .number-input.done:not(.pre-ghost-autocorrect), .place-value-mat-widget .super-input.done:not(.pre-ghost-autocorrect), .sf-problems .zearn-input.done:not(.pre-ghost-autocorrect), .sf-problems .number-input.done:not(.pre-ghost-autocorrect), .sf-problems .super-input.done:not(.pre-ghost-autocorrect), .sprint-rows .zearn-input.done:not(.pre-ghost-autocorrect), .sprint-rows .number-input.done:not(.pre-ghost-autocorrect), .sprint-rows .super-input.done:not(.pre-ghost-autocorrect) { border-color: transparent; background-color: transparent; } .super-fill-in-widget .zearn-input.correct .zearn-input, .super-fill-in-widget .zearn-input.correct .number-input, .super-fill-in-widget .zearn-input.incorrect .zearn-input, .super-fill-in-widget .zearn-input.incorrect .number-input, .super-fill-in-widget .zearn-input.try-again .zearn-input, .super-fill-in-widget .zearn-input.try-again .number-input, .super-fill-in-widget .zearn-input.pre-ghost-autocorrect .zearn-input, .super-fill-in-widget .zearn-input.pre-ghost-autocorrect .number-input, .super-fill-in-widget .number-input.correct .zearn-input, .super-fill-in-widget .number-input.correct .number-input, .super-fill-in-widget .number-input.incorrect .zearn-input, .super-fill-in-widget .number-input.incorrect .number-input, .super-fill-in-widget .number-input.try-again .zearn-input, .super-fill-in-widget .number-input.try-again .number-input, .super-fill-in-widget .number-input.pre-ghost-autocorrect .zearn-input, .super-fill-in-widget .number-input.pre-ghost-autocorrect .number-input, .super-fill-in-widget .super-input.correct .zearn-input, .super-fill-in-widget .super-input.correct .number-input, .super-fill-in-widget .super-input.incorrect .zearn-input, .super-fill-in-widget .super-input.incorrect .number-input, .super-fill-in-widget .super-input.try-again .zearn-input, .super-fill-in-widget .super-input.try-again .number-input, .super-fill-in-widget .super-input.pre-ghost-autocorrect .zearn-input, .super-fill-in-widget .super-input.pre-ghost-autocorrect .number-input, .place-value-mat-widget .zearn-input.correct .zearn-input, .place-value-mat-widget .zearn-input.correct .number-input, .place-value-mat-widget .zearn-input.incorrect .zearn-input, .place-value-mat-widget .zearn-input.incorrect .number-input, .place-value-mat-widget .zearn-input.try-again .zearn-input, .place-value-mat-widget .zearn-input.try-again .number-input, .place-value-mat-widget .zearn-input.pre-ghost-autocorrect .zearn-input, .place-value-mat-widget .zearn-input.pre-ghost-autocorrect .number-input, .place-value-mat-widget .number-input.correct .zearn-input, .place-value-mat-widget .number-input.correct .number-input, .place-value-mat-widget .number-input.incorrect .zearn-input, .place-value-mat-widget .number-input.incorrect .number-input, .place-value-mat-widget .number-input.try-again .zearn-input, .place-value-mat-widget .number-input.try-again .number-input, .place-value-mat-widget .number-input.pre-ghost-autocorrect .zearn-input, .place-value-mat-widget .number-input.pre-ghost-autocorrect .number-input, .place-value-mat-widget .super-input.correct .zearn-input, .place-value-mat-widget .super-input.correct .number-input, .place-value-mat-widget .super-input.incorrect .zearn-input, .place-value-mat-widget .super-input.incorrect .number-input, .place-value-mat-widget .super-input.try-again .zearn-input, .place-value-mat-widget .super-input.try-again .number-input, .place-value-mat-widget .super-input.pre-ghost-autocorrect .zearn-input, .place-value-mat-widget .super-input.pre-ghost-autocorrect .number-input, .sf-problems .zearn-input.correct .zearn-input, .sf-problems .zearn-input.correct .number-input, .sf-problems .zearn-input.incorrect .zearn-input, .sf-problems .zearn-input.incorrect .number-input, .sf-problems .zearn-input.try-again .zearn-input, .sf-problems .zearn-input.try-again .number-input, .sf-problems .zearn-input.pre-ghost-autocorrect .zearn-input, .sf-problems .zearn-input.pre-ghost-autocorrect .number-input, .sf-problems .number-input.correct .zearn-input, .sf-problems .number-input.correct .number-input, .sf-problems .number-input.incorrect .zearn-input, .sf-problems .number-input.incorrect .number-input, .sf-problems .number-input.try-again .zearn-input, .sf-problems .number-input.try-again .number-input, .sf-problems .number-input.pre-ghost-autocorrect .zearn-input, .sf-problems .number-input.pre-ghost-autocorrect .number-input, .sf-problems .super-input.correct .zearn-input, .sf-problems .super-input.correct .number-input, .sf-problems .super-input.incorrect .zearn-input, .sf-problems .super-input.incorrect .number-input, .sf-problems .super-input.try-again .zearn-input, .sf-problems .super-input.try-again .number-input, .sf-problems .super-input.pre-ghost-autocorrect .zearn-input, .sf-problems .super-input.pre-ghost-autocorrect .number-input, .sprint-rows .zearn-input.correct .zearn-input, .sprint-rows .zearn-input.correct .number-input, .sprint-rows .zearn-input.incorrect .zearn-input, .sprint-rows .zearn-input.incorrect .number-input, .sprint-rows .zearn-input.try-again .zearn-input, .sprint-rows .zearn-input.try-again .number-input, .sprint-rows .zearn-input.pre-ghost-autocorrect .zearn-input, .sprint-rows .zearn-input.pre-ghost-autocorrect .number-input, .sprint-rows .number-input.correct .zearn-input, .sprint-rows .number-input.correct .number-input, .sprint-rows .number-input.incorrect .zearn-input, .sprint-rows .number-input.incorrect .number-input, .sprint-rows .number-input.try-again .zearn-input, .sprint-rows .number-input.try-again .number-input, .sprint-rows .number-input.pre-ghost-autocorrect .zearn-input, .sprint-rows .number-input.pre-ghost-autocorrect .number-input, .sprint-rows .super-input.correct .zearn-input, .sprint-rows .super-input.correct .number-input, .sprint-rows .super-input.incorrect .zearn-input, .sprint-rows .super-input.incorrect .number-input, .sprint-rows .super-input.try-again .zearn-input, .sprint-rows .super-input.try-again .number-input, .sprint-rows .super-input.pre-ghost-autocorrect .zearn-input, .sprint-rows .super-input.pre-ghost-autocorrect .number-input { border-color: transparent; background-color: transparent; } .super-fill-in-widget .zearn-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .zearn-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input.orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input .orange:not(.try-again):not(.correct):not(.incorrect) .zearn-input { color: #f75e00; border-color: #f75e00; } .super-fill-in-widget .zearn-input.orange.correct.done .zearn-input, .super-fill-in-widget .zearn-input.orange.autocorrected .zearn-input, .super-fill-in-widget .zearn-input .orange.correct.done .zearn-input, .super-fill-in-widget .zearn-input .orange.autocorrected .zearn-input, .super-fill-in-widget .number-input.orange.correct.done .zearn-input, .super-fill-in-widget .number-input.orange.autocorrected .zearn-input, .super-fill-in-widget .number-input .orange.correct.done .zearn-input, .super-fill-in-widget .number-input .orange.autocorrected .zearn-input, .super-fill-in-widget .super-input.orange.correct.done .zearn-input, .super-fill-in-widget .super-input.orange.autocorrected .zearn-input, .super-fill-in-widget .super-input .orange.correct.done .zearn-input, .super-fill-in-widget .super-input .orange.autocorrected .zearn-input, .place-value-mat-widget .zearn-input.orange.correct.done .zearn-input, .place-value-mat-widget .zearn-input.orange.autocorrected .zearn-input, .place-value-mat-widget .zearn-input .orange.correct.done .zearn-input, .place-value-mat-widget .zearn-input .orange.autocorrected .zearn-input, .place-value-mat-widget .number-input.orange.correct.done .zearn-input, .place-value-mat-widget .number-input.orange.autocorrected .zearn-input, .place-value-mat-widget .number-input .orange.correct.done .zearn-input, .place-value-mat-widget .number-input .orange.autocorrected .zearn-input, .place-value-mat-widget .super-input.orange.correct.done .zearn-input, .place-value-mat-widget .super-input.orange.autocorrected .zearn-input, .place-value-mat-widget .super-input .orange.correct.done .zearn-input, .place-value-mat-widget .super-input .orange.autocorrected .zearn-input, .sf-problems .zearn-input.orange.correct.done .zearn-input, .sf-problems .zearn-input.orange.autocorrected .zearn-input, .sf-problems .zearn-input .orange.correct.done .zearn-input, .sf-problems .zearn-input .orange.autocorrected .zearn-input, .sf-problems .number-input.orange.correct.done .zearn-input, .sf-problems .number-input.orange.autocorrected .zearn-input, .sf-problems .number-input .orange.correct.done .zearn-input, .sf-problems .number-input .orange.autocorrected .zearn-input, .sf-problems .super-input.orange.correct.done .zearn-input, .sf-problems .super-input.orange.autocorrected .zearn-input, .sf-problems .super-input .orange.correct.done .zearn-input, .sf-problems .super-input .orange.autocorrected .zearn-input, .sprint-rows .zearn-input.orange.correct.done .zearn-input, .sprint-rows .zearn-input.orange.autocorrected .zearn-input, .sprint-rows .zearn-input .orange.correct.done .zearn-input, .sprint-rows .zearn-input .orange.autocorrected .zearn-input, .sprint-rows .number-input.orange.correct.done .zearn-input, .sprint-rows .number-input.orange.autocorrected .zearn-input, .sprint-rows .number-input .orange.correct.done .zearn-input, .sprint-rows .number-input .orange.autocorrected .zearn-input, .sprint-rows .super-input.orange.correct.done .zearn-input, .sprint-rows .super-input.orange.autocorrected .zearn-input, .sprint-rows .super-input .orange.correct.done .zearn-input, .sprint-rows .super-input .orange.autocorrected .zearn-input { color: #f75e00; } .super-fill-in-widget .zearn-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input.orange.correct.done .denominator, .super-fill-in-widget .zearn-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input .orange.correct.done .denominator, .super-fill-in-widget .number-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input.orange.correct.done .denominator, .super-fill-in-widget .number-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input .orange.correct.done .denominator, .super-fill-in-widget .super-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input.orange.correct.done .denominator, .super-fill-in-widget .super-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input .orange.correct.done .denominator, .place-value-mat-widget .zearn-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input.orange.correct.done .denominator, .place-value-mat-widget .zearn-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input .orange.correct.done .denominator, .place-value-mat-widget .number-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input.orange.correct.done .denominator, .place-value-mat-widget .number-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input .orange.correct.done .denominator, .place-value-mat-widget .super-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input.orange.correct.done .denominator, .place-value-mat-widget .super-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input .orange.correct.done .denominator, .sf-problems .zearn-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input.orange.correct.done .denominator, .sf-problems .zearn-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input .orange.correct.done .denominator, .sf-problems .number-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input.orange.correct.done .denominator, .sf-problems .number-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input .orange.correct.done .denominator, .sf-problems .super-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input.orange.correct.done .denominator, .sf-problems .super-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input .orange.correct.done .denominator, .sprint-rows .zearn-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input.orange.correct.done .denominator, .sprint-rows .zearn-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input .orange.correct.done .denominator, .sprint-rows .number-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input.orange.correct.done .denominator, .sprint-rows .number-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input .orange.correct.done .denominator, .sprint-rows .super-input.orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input.orange.correct.done .denominator, .sprint-rows .super-input .orange:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input .orange.correct.done .denominator { border-top-color: #f75e00; } .super-fill-in-widget .zearn-input.orange .zearn-input.focus, .super-fill-in-widget .zearn-input .orange .zearn-input.focus, .super-fill-in-widget .number-input.orange .zearn-input.focus, .super-fill-in-widget .number-input .orange .zearn-input.focus, .super-fill-in-widget .super-input.orange .zearn-input.focus, .super-fill-in-widget .super-input .orange .zearn-input.focus, .place-value-mat-widget .zearn-input.orange .zearn-input.focus, .place-value-mat-widget .zearn-input .orange .zearn-input.focus, .place-value-mat-widget .number-input.orange .zearn-input.focus, .place-value-mat-widget .number-input .orange .zearn-input.focus, .place-value-mat-widget .super-input.orange .zearn-input.focus, .place-value-mat-widget .super-input .orange .zearn-input.focus, .sf-problems .zearn-input.orange .zearn-input.focus, .sf-problems .zearn-input .orange .zearn-input.focus, .sf-problems .number-input.orange .zearn-input.focus, .sf-problems .number-input .orange .zearn-input.focus, .sf-problems .super-input.orange .zearn-input.focus, .sf-problems .super-input .orange .zearn-input.focus, .sprint-rows .zearn-input.orange .zearn-input.focus, .sprint-rows .zearn-input .orange .zearn-input.focus, .sprint-rows .number-input.orange .zearn-input.focus, .sprint-rows .number-input .orange .zearn-input.focus, .sprint-rows .super-input.orange .zearn-input.focus, .sprint-rows .super-input .orange .zearn-input.focus { outline: 0; box-shadow: #f75e00 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input.orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input .orange:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect) { color: #f75e00; border-color: #f75e00; } .super-fill-in-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input.orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input.orange:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input .orange:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input .orange:not(.fraction):not(.mixed-fraction-input).autocorrected { color: #f75e00; } .super-fill-in-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input .orange:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input.orange:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input .orange:not(.fraction):not(.mixed-fraction-input).focus { box-shadow: #f75e00 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .zearn-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input.orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input .orange-60:not(.try-again):not(.correct):not(.incorrect) .zearn-input { color: #f15b01; border-color: #f15b01; } .super-fill-in-widget .zearn-input.orange-60.correct.done .zearn-input, .super-fill-in-widget .zearn-input.orange-60.autocorrected .zearn-input, .super-fill-in-widget .zearn-input .orange-60.correct.done .zearn-input, .super-fill-in-widget .zearn-input .orange-60.autocorrected .zearn-input, .super-fill-in-widget .number-input.orange-60.correct.done .zearn-input, .super-fill-in-widget .number-input.orange-60.autocorrected .zearn-input, .super-fill-in-widget .number-input .orange-60.correct.done .zearn-input, .super-fill-in-widget .number-input .orange-60.autocorrected .zearn-input, .super-fill-in-widget .super-input.orange-60.correct.done .zearn-input, .super-fill-in-widget .super-input.orange-60.autocorrected .zearn-input, .super-fill-in-widget .super-input .orange-60.correct.done .zearn-input, .super-fill-in-widget .super-input .orange-60.autocorrected .zearn-input, .place-value-mat-widget .zearn-input.orange-60.correct.done .zearn-input, .place-value-mat-widget .zearn-input.orange-60.autocorrected .zearn-input, .place-value-mat-widget .zearn-input .orange-60.correct.done .zearn-input, .place-value-mat-widget .zearn-input .orange-60.autocorrected .zearn-input, .place-value-mat-widget .number-input.orange-60.correct.done .zearn-input, .place-value-mat-widget .number-input.orange-60.autocorrected .zearn-input, .place-value-mat-widget .number-input .orange-60.correct.done .zearn-input, .place-value-mat-widget .number-input .orange-60.autocorrected .zearn-input, .place-value-mat-widget .super-input.orange-60.correct.done .zearn-input, .place-value-mat-widget .super-input.orange-60.autocorrected .zearn-input, .place-value-mat-widget .super-input .orange-60.correct.done .zearn-input, .place-value-mat-widget .super-input .orange-60.autocorrected .zearn-input, .sf-problems .zearn-input.orange-60.correct.done .zearn-input, .sf-problems .zearn-input.orange-60.autocorrected .zearn-input, .sf-problems .zearn-input .orange-60.correct.done .zearn-input, .sf-problems .zearn-input .orange-60.autocorrected .zearn-input, .sf-problems .number-input.orange-60.correct.done .zearn-input, .sf-problems .number-input.orange-60.autocorrected .zearn-input, .sf-problems .number-input .orange-60.correct.done .zearn-input, .sf-problems .number-input .orange-60.autocorrected .zearn-input, .sf-problems .super-input.orange-60.correct.done .zearn-input, .sf-problems .super-input.orange-60.autocorrected .zearn-input, .sf-problems .super-input .orange-60.correct.done .zearn-input, .sf-problems .super-input .orange-60.autocorrected .zearn-input, .sprint-rows .zearn-input.orange-60.correct.done .zearn-input, .sprint-rows .zearn-input.orange-60.autocorrected .zearn-input, .sprint-rows .zearn-input .orange-60.correct.done .zearn-input, .sprint-rows .zearn-input .orange-60.autocorrected .zearn-input, .sprint-rows .number-input.orange-60.correct.done .zearn-input, .sprint-rows .number-input.orange-60.autocorrected .zearn-input, .sprint-rows .number-input .orange-60.correct.done .zearn-input, .sprint-rows .number-input .orange-60.autocorrected .zearn-input, .sprint-rows .super-input.orange-60.correct.done .zearn-input, .sprint-rows .super-input.orange-60.autocorrected .zearn-input, .sprint-rows .super-input .orange-60.correct.done .zearn-input, .sprint-rows .super-input .orange-60.autocorrected .zearn-input { color: #f15b01; } .super-fill-in-widget .zearn-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input.orange-60.correct.done .denominator, .super-fill-in-widget .zearn-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input .orange-60.correct.done .denominator, .super-fill-in-widget .number-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input.orange-60.correct.done .denominator, .super-fill-in-widget .number-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input .orange-60.correct.done .denominator, .super-fill-in-widget .super-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input.orange-60.correct.done .denominator, .super-fill-in-widget .super-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input .orange-60.correct.done .denominator, .place-value-mat-widget .zearn-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input.orange-60.correct.done .denominator, .place-value-mat-widget .zearn-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input .orange-60.correct.done .denominator, .place-value-mat-widget .number-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input.orange-60.correct.done .denominator, .place-value-mat-widget .number-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input .orange-60.correct.done .denominator, .place-value-mat-widget .super-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input.orange-60.correct.done .denominator, .place-value-mat-widget .super-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input .orange-60.correct.done .denominator, .sf-problems .zearn-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input.orange-60.correct.done .denominator, .sf-problems .zearn-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input .orange-60.correct.done .denominator, .sf-problems .number-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input.orange-60.correct.done .denominator, .sf-problems .number-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input .orange-60.correct.done .denominator, .sf-problems .super-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input.orange-60.correct.done .denominator, .sf-problems .super-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input .orange-60.correct.done .denominator, .sprint-rows .zearn-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input.orange-60.correct.done .denominator, .sprint-rows .zearn-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input .orange-60.correct.done .denominator, .sprint-rows .number-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input.orange-60.correct.done .denominator, .sprint-rows .number-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input .orange-60.correct.done .denominator, .sprint-rows .super-input.orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input.orange-60.correct.done .denominator, .sprint-rows .super-input .orange-60:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input .orange-60.correct.done .denominator { border-top-color: #f15b01; } .super-fill-in-widget .zearn-input.orange-60 .zearn-input.focus, .super-fill-in-widget .zearn-input .orange-60 .zearn-input.focus, .super-fill-in-widget .number-input.orange-60 .zearn-input.focus, .super-fill-in-widget .number-input .orange-60 .zearn-input.focus, .super-fill-in-widget .super-input.orange-60 .zearn-input.focus, .super-fill-in-widget .super-input .orange-60 .zearn-input.focus, .place-value-mat-widget .zearn-input.orange-60 .zearn-input.focus, .place-value-mat-widget .zearn-input .orange-60 .zearn-input.focus, .place-value-mat-widget .number-input.orange-60 .zearn-input.focus, .place-value-mat-widget .number-input .orange-60 .zearn-input.focus, .place-value-mat-widget .super-input.orange-60 .zearn-input.focus, .place-value-mat-widget .super-input .orange-60 .zearn-input.focus, .sf-problems .zearn-input.orange-60 .zearn-input.focus, .sf-problems .zearn-input .orange-60 .zearn-input.focus, .sf-problems .number-input.orange-60 .zearn-input.focus, .sf-problems .number-input .orange-60 .zearn-input.focus, .sf-problems .super-input.orange-60 .zearn-input.focus, .sf-problems .super-input .orange-60 .zearn-input.focus, .sprint-rows .zearn-input.orange-60 .zearn-input.focus, .sprint-rows .zearn-input .orange-60 .zearn-input.focus, .sprint-rows .number-input.orange-60 .zearn-input.focus, .sprint-rows .number-input .orange-60 .zearn-input.focus, .sprint-rows .super-input.orange-60 .zearn-input.focus, .sprint-rows .super-input .orange-60 .zearn-input.focus { outline: 0; box-shadow: #f15b01 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input.orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input .orange-60:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect) { color: #f15b01; border-color: #f15b01; } .super-fill-in-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).autocorrected { color: #f15b01; } .super-fill-in-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input.orange-60:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input .orange-60:not(.fraction):not(.mixed-fraction-input).focus { box-shadow: #f15b01 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .zearn-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input.purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input .purple:not(.try-again):not(.correct):not(.incorrect) .zearn-input { color: #7a00c9; border-color: #7a00c9; } .super-fill-in-widget .zearn-input.purple.correct.done .zearn-input, .super-fill-in-widget .zearn-input.purple.autocorrected .zearn-input, .super-fill-in-widget .zearn-input .purple.correct.done .zearn-input, .super-fill-in-widget .zearn-input .purple.autocorrected .zearn-input, .super-fill-in-widget .number-input.purple.correct.done .zearn-input, .super-fill-in-widget .number-input.purple.autocorrected .zearn-input, .super-fill-in-widget .number-input .purple.correct.done .zearn-input, .super-fill-in-widget .number-input .purple.autocorrected .zearn-input, .super-fill-in-widget .super-input.purple.correct.done .zearn-input, .super-fill-in-widget .super-input.purple.autocorrected .zearn-input, .super-fill-in-widget .super-input .purple.correct.done .zearn-input, .super-fill-in-widget .super-input .purple.autocorrected .zearn-input, .place-value-mat-widget .zearn-input.purple.correct.done .zearn-input, .place-value-mat-widget .zearn-input.purple.autocorrected .zearn-input, .place-value-mat-widget .zearn-input .purple.correct.done .zearn-input, .place-value-mat-widget .zearn-input .purple.autocorrected .zearn-input, .place-value-mat-widget .number-input.purple.correct.done .zearn-input, .place-value-mat-widget .number-input.purple.autocorrected .zearn-input, .place-value-mat-widget .number-input .purple.correct.done .zearn-input, .place-value-mat-widget .number-input .purple.autocorrected .zearn-input, .place-value-mat-widget .super-input.purple.correct.done .zearn-input, .place-value-mat-widget .super-input.purple.autocorrected .zearn-input, .place-value-mat-widget .super-input .purple.correct.done .zearn-input, .place-value-mat-widget .super-input .purple.autocorrected .zearn-input, .sf-problems .zearn-input.purple.correct.done .zearn-input, .sf-problems .zearn-input.purple.autocorrected .zearn-input, .sf-problems .zearn-input .purple.correct.done .zearn-input, .sf-problems .zearn-input .purple.autocorrected .zearn-input, .sf-problems .number-input.purple.correct.done .zearn-input, .sf-problems .number-input.purple.autocorrected .zearn-input, .sf-problems .number-input .purple.correct.done .zearn-input, .sf-problems .number-input .purple.autocorrected .zearn-input, .sf-problems .super-input.purple.correct.done .zearn-input, .sf-problems .super-input.purple.autocorrected .zearn-input, .sf-problems .super-input .purple.correct.done .zearn-input, .sf-problems .super-input .purple.autocorrected .zearn-input, .sprint-rows .zearn-input.purple.correct.done .zearn-input, .sprint-rows .zearn-input.purple.autocorrected .zearn-input, .sprint-rows .zearn-input .purple.correct.done .zearn-input, .sprint-rows .zearn-input .purple.autocorrected .zearn-input, .sprint-rows .number-input.purple.correct.done .zearn-input, .sprint-rows .number-input.purple.autocorrected .zearn-input, .sprint-rows .number-input .purple.correct.done .zearn-input, .sprint-rows .number-input .purple.autocorrected .zearn-input, .sprint-rows .super-input.purple.correct.done .zearn-input, .sprint-rows .super-input.purple.autocorrected .zearn-input, .sprint-rows .super-input .purple.correct.done .zearn-input, .sprint-rows .super-input .purple.autocorrected .zearn-input { color: #7a00c9; } .super-fill-in-widget .zearn-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input.purple.correct.done .denominator, .super-fill-in-widget .zearn-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input .purple.correct.done .denominator, .super-fill-in-widget .number-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input.purple.correct.done .denominator, .super-fill-in-widget .number-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input .purple.correct.done .denominator, .super-fill-in-widget .super-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input.purple.correct.done .denominator, .super-fill-in-widget .super-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input .purple.correct.done .denominator, .place-value-mat-widget .zearn-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input.purple.correct.done .denominator, .place-value-mat-widget .zearn-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input .purple.correct.done .denominator, .place-value-mat-widget .number-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input.purple.correct.done .denominator, .place-value-mat-widget .number-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input .purple.correct.done .denominator, .place-value-mat-widget .super-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input.purple.correct.done .denominator, .place-value-mat-widget .super-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input .purple.correct.done .denominator, .sf-problems .zearn-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input.purple.correct.done .denominator, .sf-problems .zearn-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input .purple.correct.done .denominator, .sf-problems .number-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input.purple.correct.done .denominator, .sf-problems .number-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input .purple.correct.done .denominator, .sf-problems .super-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input.purple.correct.done .denominator, .sf-problems .super-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input .purple.correct.done .denominator, .sprint-rows .zearn-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input.purple.correct.done .denominator, .sprint-rows .zearn-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input .purple.correct.done .denominator, .sprint-rows .number-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input.purple.correct.done .denominator, .sprint-rows .number-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input .purple.correct.done .denominator, .sprint-rows .super-input.purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input.purple.correct.done .denominator, .sprint-rows .super-input .purple:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input .purple.correct.done .denominator { border-top-color: #7a00c9; } .super-fill-in-widget .zearn-input.purple .zearn-input.focus, .super-fill-in-widget .zearn-input .purple .zearn-input.focus, .super-fill-in-widget .number-input.purple .zearn-input.focus, .super-fill-in-widget .number-input .purple .zearn-input.focus, .super-fill-in-widget .super-input.purple .zearn-input.focus, .super-fill-in-widget .super-input .purple .zearn-input.focus, .place-value-mat-widget .zearn-input.purple .zearn-input.focus, .place-value-mat-widget .zearn-input .purple .zearn-input.focus, .place-value-mat-widget .number-input.purple .zearn-input.focus, .place-value-mat-widget .number-input .purple .zearn-input.focus, .place-value-mat-widget .super-input.purple .zearn-input.focus, .place-value-mat-widget .super-input .purple .zearn-input.focus, .sf-problems .zearn-input.purple .zearn-input.focus, .sf-problems .zearn-input .purple .zearn-input.focus, .sf-problems .number-input.purple .zearn-input.focus, .sf-problems .number-input .purple .zearn-input.focus, .sf-problems .super-input.purple .zearn-input.focus, .sf-problems .super-input .purple .zearn-input.focus, .sprint-rows .zearn-input.purple .zearn-input.focus, .sprint-rows .zearn-input .purple .zearn-input.focus, .sprint-rows .number-input.purple .zearn-input.focus, .sprint-rows .number-input .purple .zearn-input.focus, .sprint-rows .super-input.purple .zearn-input.focus, .sprint-rows .super-input .purple .zearn-input.focus { outline: 0; box-shadow: #7a00c9 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input.purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input .purple:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect) { color: #7a00c9; border-color: #7a00c9; } .super-fill-in-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input.purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input.purple:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input .purple:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input .purple:not(.fraction):not(.mixed-fraction-input).autocorrected { color: #7a00c9; } .super-fill-in-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input .purple:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input.purple:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input .purple:not(.fraction):not(.mixed-fraction-input).focus { box-shadow: #7a00c9 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .zearn-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .number-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .super-fill-in-widget .super-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .zearn-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .number-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .place-value-mat-widget .super-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .zearn-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .number-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sf-problems .super-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .zearn-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .number-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input.purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input, .sprint-rows .super-input .purple-90:not(.try-again):not(.correct):not(.incorrect) .zearn-input { color: #7029a5; border-color: #7029a5; } .super-fill-in-widget .zearn-input.purple-90.correct.done .zearn-input, .super-fill-in-widget .zearn-input.purple-90.autocorrected .zearn-input, .super-fill-in-widget .zearn-input .purple-90.correct.done .zearn-input, .super-fill-in-widget .zearn-input .purple-90.autocorrected .zearn-input, .super-fill-in-widget .number-input.purple-90.correct.done .zearn-input, .super-fill-in-widget .number-input.purple-90.autocorrected .zearn-input, .super-fill-in-widget .number-input .purple-90.correct.done .zearn-input, .super-fill-in-widget .number-input .purple-90.autocorrected .zearn-input, .super-fill-in-widget .super-input.purple-90.correct.done .zearn-input, .super-fill-in-widget .super-input.purple-90.autocorrected .zearn-input, .super-fill-in-widget .super-input .purple-90.correct.done .zearn-input, .super-fill-in-widget .super-input .purple-90.autocorrected .zearn-input, .place-value-mat-widget .zearn-input.purple-90.correct.done .zearn-input, .place-value-mat-widget .zearn-input.purple-90.autocorrected .zearn-input, .place-value-mat-widget .zearn-input .purple-90.correct.done .zearn-input, .place-value-mat-widget .zearn-input .purple-90.autocorrected .zearn-input, .place-value-mat-widget .number-input.purple-90.correct.done .zearn-input, .place-value-mat-widget .number-input.purple-90.autocorrected .zearn-input, .place-value-mat-widget .number-input .purple-90.correct.done .zearn-input, .place-value-mat-widget .number-input .purple-90.autocorrected .zearn-input, .place-value-mat-widget .super-input.purple-90.correct.done .zearn-input, .place-value-mat-widget .super-input.purple-90.autocorrected .zearn-input, .place-value-mat-widget .super-input .purple-90.correct.done .zearn-input, .place-value-mat-widget .super-input .purple-90.autocorrected .zearn-input, .sf-problems .zearn-input.purple-90.correct.done .zearn-input, .sf-problems .zearn-input.purple-90.autocorrected .zearn-input, .sf-problems .zearn-input .purple-90.correct.done .zearn-input, .sf-problems .zearn-input .purple-90.autocorrected .zearn-input, .sf-problems .number-input.purple-90.correct.done .zearn-input, .sf-problems .number-input.purple-90.autocorrected .zearn-input, .sf-problems .number-input .purple-90.correct.done .zearn-input, .sf-problems .number-input .purple-90.autocorrected .zearn-input, .sf-problems .super-input.purple-90.correct.done .zearn-input, .sf-problems .super-input.purple-90.autocorrected .zearn-input, .sf-problems .super-input .purple-90.correct.done .zearn-input, .sf-problems .super-input .purple-90.autocorrected .zearn-input, .sprint-rows .zearn-input.purple-90.correct.done .zearn-input, .sprint-rows .zearn-input.purple-90.autocorrected .zearn-input, .sprint-rows .zearn-input .purple-90.correct.done .zearn-input, .sprint-rows .zearn-input .purple-90.autocorrected .zearn-input, .sprint-rows .number-input.purple-90.correct.done .zearn-input, .sprint-rows .number-input.purple-90.autocorrected .zearn-input, .sprint-rows .number-input .purple-90.correct.done .zearn-input, .sprint-rows .number-input .purple-90.autocorrected .zearn-input, .sprint-rows .super-input.purple-90.correct.done .zearn-input, .sprint-rows .super-input.purple-90.autocorrected .zearn-input, .sprint-rows .super-input .purple-90.correct.done .zearn-input, .sprint-rows .super-input .purple-90.autocorrected .zearn-input { color: #7029a5; } .super-fill-in-widget .zearn-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input.purple-90.correct.done .denominator, .super-fill-in-widget .zearn-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .zearn-input .purple-90.correct.done .denominator, .super-fill-in-widget .number-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input.purple-90.correct.done .denominator, .super-fill-in-widget .number-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .number-input .purple-90.correct.done .denominator, .super-fill-in-widget .super-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input.purple-90.correct.done .denominator, .super-fill-in-widget .super-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .super-fill-in-widget .super-input .purple-90.correct.done .denominator, .place-value-mat-widget .zearn-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input.purple-90.correct.done .denominator, .place-value-mat-widget .zearn-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .zearn-input .purple-90.correct.done .denominator, .place-value-mat-widget .number-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input.purple-90.correct.done .denominator, .place-value-mat-widget .number-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .number-input .purple-90.correct.done .denominator, .place-value-mat-widget .super-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input.purple-90.correct.done .denominator, .place-value-mat-widget .super-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .place-value-mat-widget .super-input .purple-90.correct.done .denominator, .sf-problems .zearn-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input.purple-90.correct.done .denominator, .sf-problems .zearn-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .zearn-input .purple-90.correct.done .denominator, .sf-problems .number-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input.purple-90.correct.done .denominator, .sf-problems .number-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .number-input .purple-90.correct.done .denominator, .sf-problems .super-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input.purple-90.correct.done .denominator, .sf-problems .super-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sf-problems .super-input .purple-90.correct.done .denominator, .sprint-rows .zearn-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input.purple-90.correct.done .denominator, .sprint-rows .zearn-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .zearn-input .purple-90.correct.done .denominator, .sprint-rows .number-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input.purple-90.correct.done .denominator, .sprint-rows .number-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .number-input .purple-90.correct.done .denominator, .sprint-rows .super-input.purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input.purple-90.correct.done .denominator, .sprint-rows .super-input .purple-90:not(.try-again):not(.correctable):not(.correct):not(.incorrect) .denominator, .sprint-rows .super-input .purple-90.correct.done .denominator { border-top-color: #7029a5; } .super-fill-in-widget .zearn-input.purple-90 .zearn-input.focus, .super-fill-in-widget .zearn-input .purple-90 .zearn-input.focus, .super-fill-in-widget .number-input.purple-90 .zearn-input.focus, .super-fill-in-widget .number-input .purple-90 .zearn-input.focus, .super-fill-in-widget .super-input.purple-90 .zearn-input.focus, .super-fill-in-widget .super-input .purple-90 .zearn-input.focus, .place-value-mat-widget .zearn-input.purple-90 .zearn-input.focus, .place-value-mat-widget .zearn-input .purple-90 .zearn-input.focus, .place-value-mat-widget .number-input.purple-90 .zearn-input.focus, .place-value-mat-widget .number-input .purple-90 .zearn-input.focus, .place-value-mat-widget .super-input.purple-90 .zearn-input.focus, .place-value-mat-widget .super-input .purple-90 .zearn-input.focus, .sf-problems .zearn-input.purple-90 .zearn-input.focus, .sf-problems .zearn-input .purple-90 .zearn-input.focus, .sf-problems .number-input.purple-90 .zearn-input.focus, .sf-problems .number-input .purple-90 .zearn-input.focus, .sf-problems .super-input.purple-90 .zearn-input.focus, .sf-problems .super-input .purple-90 .zearn-input.focus, .sprint-rows .zearn-input.purple-90 .zearn-input.focus, .sprint-rows .zearn-input .purple-90 .zearn-input.focus, .sprint-rows .number-input.purple-90 .zearn-input.focus, .sprint-rows .number-input .purple-90 .zearn-input.focus, .sprint-rows .super-input.purple-90 .zearn-input.focus, .sprint-rows .super-input .purple-90 .zearn-input.focus { outline: 0; box-shadow: #7029a5 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .super-fill-in-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .place-value-mat-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .number-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sf-problems .super-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .number-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input.purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect), .sprint-rows .super-input .purple-90:not(.fraction):not(.mixed-fraction-input):not(.try-again):not(.correct):not(.incorrect) { color: #7029a5; border-color: #7029a5; } .super-fill-in-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .super-fill-in-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .super-fill-in-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .place-value-mat-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .place-value-mat-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sf-problems .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sf-problems .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected, .sprint-rows .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).correct.done, .sprint-rows .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).autocorrected { color: #7029a5; } .super-fill-in-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .super-fill-in-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .place-value-mat-widget .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sf-problems .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .zearn-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .number-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input.purple-90:not(.fraction):not(.mixed-fraction-input).focus, .sprint-rows .super-input .purple-90:not(.fraction):not(.mixed-fraction-input).focus { box-shadow: #7029a5 0 0 0 2px inset; -webkit-appearance: none; } .super-fill-in-widget .zearn-input.fraction-input, .super-fill-in-widget .number-input.fraction-input, .super-fill-in-widget .super-input.fraction-input, .place-value-mat-widget .zearn-input.fraction-input, .place-value-mat-widget .number-input.fraction-input, .place-value-mat-widget .super-input.fraction-input, .sf-problems .zearn-input.fraction-input, .sf-problems .number-input.fraction-input, .sf-problems .super-input.fraction-input, .sprint-rows .zearn-input.fraction-input, .sprint-rows .number-input.fraction-input, .sprint-rows .super-input.fraction-input { padding: 0px 5px; } .super-fill-in-widget .zearn-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .super-fill-in-widget .number-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .super-fill-in-widget .super-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .place-value-mat-widget .zearn-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .place-value-mat-widget .number-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .place-value-mat-widget .super-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .sf-problems .zearn-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .sf-problems .number-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .sf-problems .super-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .sprint-rows .zearn-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .sprint-rows .number-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect), .sprint-rows .super-input.fraction-input:not(.correct):not(.try-again):not(.correctable):not(.incorrect) { background-color: transparent; } .super-fill-in-widget .zearn-input.fraction-input .zearn-input, .super-fill-in-widget .zearn-input.fraction-input .number-input, .super-fill-in-widget .number-input.fraction-input .zearn-input, .super-fill-in-widget .number-input.fraction-input .number-input, .super-fill-in-widget .super-input.fraction-input .zearn-input, .super-fill-in-widget .super-input.fraction-input .number-input, .place-value-mat-widget .zearn-input.fraction-input .zearn-input, .place-value-mat-widget .zearn-input.fraction-input .number-input, .place-value-mat-widget .number-input.fraction-input .zearn-input, .place-value-mat-widget .number-input.fraction-input .number-input, .place-value-mat-widget .super-input.fraction-input .zearn-input, .place-value-mat-widget .super-input.fraction-input .number-input, .sf-problems .zearn-input.fraction-input .zearn-input, .sf-problems .zearn-input.fraction-input .number-input, .sf-problems .number-input.fraction-input .zearn-input, .sf-problems .number-input.fraction-input .number-input, .sf-problems .super-input.fraction-input .zearn-input, .sf-problems .super-input.fraction-input .number-input, .sprint-rows .zearn-input.fraction-input .zearn-input, .sprint-rows .zearn-input.fraction-input .number-input, .sprint-rows .number-input.fraction-input .zearn-input, .sprint-rows .number-input.fraction-input .number-input, .sprint-rows .super-input.fraction-input .zearn-input, .sprint-rows .super-input.fraction-input .number-input { margin: 4px 0px; } .super-fill-in-widget .zearn-input, .super-fill-in-widget .number-input, .place-value-mat-widget .zearn-input, .place-value-mat-widget .number-input, .sf-problems .zearn-input, .sf-problems .number-input, .sprint-rows .zearn-input, .sprint-rows .number-input { border-color: #0097b6; color: black; font-size: 30px; min-width: 1em; width: 36px; height: 1.5em; text-align: center; } .super-fill-in-widget .zearn-input:disabled, .super-fill-in-widget .number-input:disabled, .place-value-mat-widget .zearn-input:disabled, .place-value-mat-widget .number-input:disabled, .sf-problems .zearn-input:disabled, .sf-problems .number-input:disabled, .sprint-rows .zearn-input:disabled, .sprint-rows .number-input:disabled { color: black; opacity: 1; pointer-events: none; } .super-fill-in-widget .zearn-input.hidden, .super-fill-in-widget .number-input.hidden, .place-value-mat-widget .zearn-input.hidden, .place-value-mat-widget .number-input.hidden, .sf-problems .zearn-input.hidden, .sf-problems .number-input.hidden, .sprint-rows .zearn-input.hidden, .sprint-rows .number-input.hidden { opacity: 0; } .super-fill-in-widget .zearn-input.focus, .super-fill-in-widget .number-input.focus, .place-value-mat-widget .zearn-input.focus, .place-value-mat-widget .number-input.focus, .sf-problems .zearn-input.focus, .sf-problems .number-input.focus, .sprint-rows .zearn-input.focus, .sprint-rows .number-input.focus { box-shadow: #0097b6 0 0 0 2px inset; -webkit-appearance: none; } #sprint-fluencies .sf-problems .number-input, #sprint-fluencies .sprint-rows .number-input { font-size: 20px; line-height: 26px; transition: opacity 200ms ease-in-out; } #sprint-fluencies .sf-problems .number-input, #sprint-fluencies .sf-problems .number-input.inactive, #sprint-fluencies .sprint-rows .number-input, #sprint-fluencies .sprint-rows .number-input.inactive { color: #646464; opacity: 1; } #sprint-fluencies .sf-problems .number-input.animate-width, #sprint-fluencies .sprint-rows .number-input.animate-width { transition: opacity 200ms ease-in-out, width 200ms ease-in-out; } #sprint-fluencies .sf-problems .number-input.correct, #sprint-fluencies .sf-problems .number-input.correct.inactive, #sprint-fluencies .sf-problems .number-input.incorrect, #sprint-fluencies .sf-problems .number-input.incorrect.inactive, #sprint-fluencies .sf-problems .number-input.unanswered, #sprint-fluencies .sf-problems .number-input.unanswered.inactive, #sprint-fluencies .sprint-rows .number-input.correct, #sprint-fluencies .sprint-rows .number-input.correct.inactive, #sprint-fluencies .sprint-rows .number-input.incorrect, #sprint-fluencies .sprint-rows .number-input.incorrect.inactive, #sprint-fluencies .sprint-rows .number-input.unanswered, #sprint-fluencies .sprint-rows .number-input.unanswered.inactive { border-color: transparent; background-color: transparent; font-weight: 200; } #sprint-fluencies .sf-problems tr.active-row .zearn-input, #sprint-fluencies .sprint-rows tr.active-row .zearn-input { font-size: 28px; line-height: 36px; } #sprint-fluencies .sf-problems tr.active-row .zearn-input.incorrect, #sprint-fluencies .sf-problems tr.active-row .zearn-input.incorrect.inactive, #sprint-fluencies .sprint-rows tr.active-row .zearn-input.incorrect, #sprint-fluencies .sprint-rows tr.active-row .zearn-input.incorrect.inactive { color: #f75e00; font-weight: bold; } #sprint-fluencies .sf-problems tr.active-row .zearn-input.correct, #sprint-fluencies .sf-problems tr.active-row .zearn-input.correct.inactive, #sprint-fluencies .sprint-rows tr.active-row .zearn-input.correct, #sprint-fluencies .sprint-rows tr.active-row .zearn-input.correct.inactive { color: black; font-weight: bold; } #sprint-fluencies .sf-problems tr.active-row .super-input:not(.zearn-input), #sprint-fluencies .sprint-rows tr.active-row .super-input:not(.zearn-input) { background-color: transparent; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } #sprint-fluencies .sf-problems tr.active-row .super-input:not(.zearn-input) .zearn-input:not(.correct):not(.incorrect), #sprint-fluencies .sprint-rows tr.active-row .super-input:not(.zearn-input) .zearn-input:not(.correct):not(.incorrect) { background-color: white; } #sprint-fluencies .sf-problems tr:not(.active-row) .zearn-input, #sprint-fluencies .sf-problems tr:not(.active-row) .super-input, #sprint-fluencies .sprint-rows tr:not(.active-row) .zearn-input, #sprint-fluencies .sprint-rows tr:not(.active-row) .super-input { background-color: transparent; border-width: 0px; } #sprint-fluencies .sf-problems tr:not(.active-row) .zearn-input.super-input, #sprint-fluencies .sprint-rows tr:not(.active-row) .zearn-input.super-input { border-radius: 0px; border-style: solid; border-width: 0px 0px 2px 0px; border-color: #646464; } #sprint-fluencies .sf-problems .correct-problem .number-input.inactive, #sprint-fluencies .sprint-rows .correct-problem .number-input.inactive { font-size: 30px; font-weight: 600; vertical-align: middle; } #sprint-fluencies .sf-problems .correct-problem .super-input, #sprint-fluencies .sprint-rows .correct-problem .super-input { background-color: transparent; } #sprint-fluencies .sf-problems .correct-problem .super-input .number-input, #sprint-fluencies .sprint-rows .correct-problem .super-input .number-input { border: 0px; } #sprint-fluencies .sf-problems.smaller-text .correct-problem, #sprint-fluencies .sf-problems.smaller-text .correct-problem .number-input.inactive, #sprint-fluencies .sprint-rows.smaller-text .correct-problem, #sprint-fluencies .sprint-rows.smaller-text .correct-problem .number-input.inactive { font-size: 20px; } #sprint-fluencies .sf-problems.smaller-text .sf-problems-table tr, #sprint-fluencies .sf-problems.smaller-text .sf-problems-table .number-input, #sprint-fluencies .sprint-rows.smaller-text .sf-problems-table tr, #sprint-fluencies .sprint-rows.smaller-text .sf-problems-table .number-input { font-size: 16px; } #sprint-fluencies .sf-problems.smaller-text .sf-problems-table .sf-correctness-cell, #sprint-fluencies .sprint-rows.smaller-text .sf-problems-table .sf-correctness-cell { width: 40%; } #sprint-fluencies .sf-problems.smaller-text .sf-problems-table .active-row, #sprint-fluencies .sprint-rows.smaller-text .sf-problems-table .active-row { font-size: 18px; } #sprint-fluencies .sf-problems.smaller-text .sf-problems-table .active-row .number-input, #sprint-fluencies .sprint-rows.smaller-text .sf-problems-table .active-row .number-input { font-size: 18px; line-height: 22px; } #sprint-fluencies.blast .sf-problems .sf-row.active-row .zearn-input.incorrect, #sprint-fluencies.blast .sf-problems .sf-row.active-row .zearn-input.incorrect:disabled { color: #ffb04d; } #sprint-fluencies.blast .sf-problems .sf-row:not(.active-row) .zearn-input, #sprint-fluencies.blast .sf-problems .sf-row:not(.active-row) .super-input { color: rgba(255, 255, 255, 0.5); } #sprint-fluencies.blast .sf-problems .sf-row:not(.active-row) .zearn-input.super-input { border-color: rgba(255, 255, 255, 0.5); } #sprint-fluencies .sf-mc-problems .sf-row .number-input.inactive { border-radius: 0px; border-style: solid; border-width: 2px 0px 2px 0px; border-bottom-color: #646464; border-top-color: transparent; background-color: transparent; color: black; } #sprint-fluencies .sf-fraction-mc-problems tr.sf-row .super-input:not(.zearn-input) { background-color: transparent; border: 0px; } #sprint-fluencies .sf-fraction-mc-problems tr.sf-row .super-input:not(.zearn-input) .zearn-input, #sprint-fluencies .sf-fraction-mc-problems tr.sf-row .super-input:not(.zearn-input) .zearn-input:not(.correct):not(.incorrect) { height: 32px; width: 32px; min-width: 32px; font-size: 18px; line-height: 26px; border-color: transparent; margin: 0px; background-color: transparent; } #sprint-fluencies .sf-fraction-mc-problems .correct-popup .fraction, #sprint-fluencies .sf-fraction-mc-problems .incorrect-popup .fraction { background-color: transparent; font-size: 24px; } #sprint-fluencies .sf-fraction-mc-problems .correct-popup .fraction .number-input, #sprint-fluencies .sf-fraction-mc-problems .incorrect-popup .fraction .number-input { font-size: 24px; border: 0px; margin: 0px; } .feed #top-space { height: 46px; margin-bottom: 8px; } @media only screen and (device-width: 768px) { .feed #top-space { /* For iPad */ height: 0px; } } .feed .navbar { position: fixed; width: 100%; height: 46px; background-color: #fff; font-family: Oxygen, Verdana, Geneva, sans-serif; -webkit-font-smoothing: subpixel-antialiased; z-index: 16000; -webkit-box-shadow: 1px 5px 6px -1px #b3b3b3; -moz-box-shadow: 1px 5px 6px -1px #b3b3b3; -ms-box-shadow: 1px 5px 6px -1px #b3b3b3; -o-box-shadow: 1px 5px 6px -1px #b3b3b3; box-shadow: 1px 5px 6px -1px #b3b3b3; } @media only screen and (device-width: 768px) { .feed .navbar { /* For iPad */ position: relative; } } .feed .navbar .back { display: inline-block; height: 46px; } .feed .navbar .back .zearn-logo, .feed .navbar .back .zearn-home { display: inline-block; position: relative; top: -2px; } .feed .navbar .actions { position: absolute; right: 0px; top: 0px; z-index: 2; font-size: 0; } .feed .navbar a { height: 46px; display: inline-block; margin-left: 8px; } .feed .navbar a:hover .btn, .feed .navbar a:active .btn { border: 2px solid #005c73; color: #005c73; } .feed .navbar a:hover .btn.signout-btn, .feed .navbar a:hover .btn.action-btn, .feed .navbar a:active .btn.signout-btn, .feed .navbar a:active .btn.action-btn { color: white; background-color: #005c73; } .feed .navbar .btn { display: inline-block; height: 29px; line-height: 25px; border: 1px solid #007b94; color: #007b94; min-width: 104px; text-align: center; border-radius: 15px; font-size: 14px; font-weight: bold; vertical-align: middle; position: relative; top: -2px; } .feed .navbar .btn.signout-btn, .feed .navbar .btn.action-btn { background-color: #007b94; color: #fff; } .feed .navbar-feed { line-height: 46px; } .feed .navbar-feed .back-links { position: absolute; width: 136px; height: 46px; left: 1px; top: 0px; z-index: 3; } .feed .navbar-feed .back { width: 64px; height: 100%; padding: 0 14px; margin: 0; } .feed .navbar-feed .back:not(:last-of-type) { border-right: 1px solid #cccccc; } .feed .navbar-feed .back .zearn-logo { width: 36px; height: 36px; background-image: url("https://webassets.zearn.org/app_assets/general/logos/zearn-icon.svg"); background-size: 32px 32px; background-repeat: no-repeat; vertical-align: middle; } .feed .navbar-feed .back .zearn-home { width: 36px; height: 36px; background-image: url("https://webassets.zearn.org/app_assets/general/logos/zearn-home-icons2.svg"); background-size: cover; vertical-align: middle; background-position: left; } .feed .navbar-feed .back:hover .zearn-home { background-position: center; } .feed .navbar-feed .back:active .zearn-home { background-position: right; } .feed .navbar-feed h1.title { position: absolute; left: 0; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; color: #444; font-weight: 700; font-size: 14px; z-index: 1; margin: 0; padding: 0 24px 0 24px; text-overflow: ellipsis; overflow: hidden; } .feed .navbar-feed h1.title .content { margin: 0 10px; } .feed .navbar-feed h1.title .activity-icon { display: inline-block; vertical-align: middle; margin-top: -5px; } .feed .navbar-feed h1.title .activity { font-weight: 300; font-size: 24px; padding-right: 12px; } .feed .navbar-feed .actions { right: 10px; } .feed .navbar-feed .actions .btn { top: 1px; } .feed .navbar-feed .actions .btn .icon-uni-nav-notes { display: inline-block; vertical-align: middle; width: 13px; height: 18px; margin-right: 2px; background-image: url("https://webassets.zearn.org/app_assets/general/icons/icon-notes.svg"); background-position: 0 0; background-size: 26px 18px; position: relative; top: -2px; } .feed .navbar-feed .actions .admin-delete-btn { background-color: red; padding: 0px 12px; color: white; text-transform: uppercase; } .feed .navbar-feed .actions #vue-locale-toggle { display: inline-block; } .feed .navbar-feed .actions .action-spacer { display: inline-block; position: relative; vertical-align: bottom; height: 29px; width: 1px; top: -8px; margin: 0 16px; background-color: #6e6e6e; visibility: hidden; } .feed .navbar-feed a { line-height: 46px; } .feed.video_guided_practices .navbar .title .title-wrap { max-width: 490px; } .activity-icon.activity-icon-set-fluency { background: url("https://webassets.zearn.org/app_assets/general/activity/icons/set_fluency.svg"); width: 36px; height: 30px; } .activity-icon.activity-icon-signs-on-number-lines { background: url("https://webassets.zearn.org/app_assets/general/activity/icons/signs_on_number_lines.svg"); width: 32px; height: 32px; } .activity-icon.activity-icon-sort-assort { background: url("https://webassets.zearn.org/app_assets/general/activity/icons/sort_assort.svg"); width: 32px; height: 32px; } .activity-icon { background-image: url("https://webassets.zearn.org/app_assets/general/activity/activity_sprite_2017_11_30.svg"); background-repeat: no-repeat; display: inline-block; vertical-align: middle; background-size: 500px 500px; width: 30px; height: 30px; } .activity-icon.activity-icon-lg { background-size: 1000px 1000px; width: 60px; height: 60px; } .activity-icon.activity-icon-sm { background-size: 250px 250px; width: 15px; height: 15px; } .activity-icon-learning_lab { background-position: -5px -5px; } .activity-icon-learning_lab.activity-icon-lg { background-position: -10px -10px; } .activity-icon-learning_lab.activity-icon-sm { background-position: -2.5px -2.5px; } .activity-icon-learning_lab-wh { background-position: -40px -5px; } .activity-icon-learning_lab-wh.activity-icon-lg { background-position: -80px -10px; } .activity-icon-learning_lab-wh.activity-icon-sm { background-position: -20px -2.5px; } .activity-icon-sprint_fluency { background-position: -75px -5px; } .activity-icon-sprint_fluency.activity-icon-lg { background-position: -150px -10px; } .activity-icon-sprint_fluency.activity-icon-sm { background-position: -37.5px -2.5px; } .activity-icon-sprint_fluency-wh { background-position: -110px -5px; } .activity-icon-sprint_fluency-wh.activity-icon-lg { background-position: -220px -10px; } .activity-icon-sprint_fluency-wh.activity-icon-sm { background-position: -55px -2.5px; } .activity-icon-z_squad { background-position: -145px -5px; } .activity-icon-z_squad.activity-icon-lg { background-position: -290px -10px; } .activity-icon-z_squad.activity-icon-sm { background-position: -72.5px -2.5px; } .activity-icon-z_squad-wh { background-position: -180px -5px; } .activity-icon-z_squad-wh.activity-icon-lg { background-position: -360px -10px; } .activity-icon-z_squad-wh.activity-icon-sm { background-position: -90px -2.5px; } .activity-icon-math_chat { background-position: -215px -5px; } .activity-icon-math_chat.activity-icon-lg { background-position: -430px -10px; } .activity-icon-math_chat.activity-icon-sm { background-position: -107.5px -2.5px; } .activity-icon-math_chat-wh { background-position: -250px -5px; } .activity-icon-math_chat-wh.activity-icon-lg { background-position: -500px -10px; } .activity-icon-math_chat-wh.activity-icon-sm { background-position: -125px -2.5px; } .activity-icon-bonus { background-position: -285px -5px; } .activity-icon-bonus.activity-icon-lg { background-position: -570px -10px; } .activity-icon-bonus.activity-icon-sm { background-position: -142.5px -2.5px; } .activity-icon-bonus-wh { background-position: -320px -5px; } .activity-icon-bonus-wh.activity-icon-lg { background-position: -640px -10px; } .activity-icon-bonus-wh.activity-icon-sm { background-position: -160px -2.5px; } .activity-icon-tower { background-position: -355px -5px; } .activity-icon-tower.activity-icon-lg { background-position: -710px -10px; } .activity-icon-tower.activity-icon-sm { background-position: -177.5px -2.5px; } .activity-icon-tower-wh { background-position: -390px -5px; } .activity-icon-tower-wh.activity-icon-lg { background-position: -780px -10px; } .activity-icon-tower-wh.activity-icon-sm { background-position: -195px -2.5px; } .activity-icon-multiply_magic { background-position: -425px -5px; } .activity-icon-multiply_magic.activity-icon-lg { background-position: -850px -10px; } .activity-icon-multiply_magic.activity-icon-sm { background-position: -212.5px -2.5px; } .activity-icon-multiply_magic-wh { background-position: -460px -5px; } .activity-icon-multiply_magic-wh.activity-icon-lg { background-position: -920px -10px; } .activity-icon-multiply_magic-wh.activity-icon-sm { background-position: -230px -2.5px; } .activity-icon-pair-compare { background-position: -5px -40px; } .activity-icon-pair-compare.activity-icon-lg { background-position: -10px -80px; } .activity-icon-pair-compare.activity-icon-sm { background-position: -2.5px -20px; } .activity-icon-pair-compare-wh { background-position: -40px -40px; } .activity-icon-pair-compare-wh.activity-icon-lg { background-position: -80px -80px; } .activity-icon-pair-compare-wh.activity-icon-sm { background-position: -20px -20px; } .activity-icon-bulb { background-position: -75px -40px; } .activity-icon-bulb.activity-icon-lg { background-position: -150px -80px; } .activity-icon-bulb.activity-icon-sm { background-position: -37.5px -20px; } .activity-icon-bulb-wh { background-position: -110px -40px; } .activity-icon-bulb-wh.activity-icon-lg { background-position: -220px -80px; } .activity-icon-bulb-wh.activity-icon-sm { background-position: -55px -20px; } .activity-icon-light_bulb { background-position: -75px -40px; } .activity-icon-light_bulb.activity-icon-lg { background-position: -150px -80px; } .activity-icon-light_bulb.activity-icon-sm { background-position: -37.5px -20px; } .activity-icon-light_bulb-wh { background-position: -110px -40px; } .activity-icon-light_bulb-wh.activity-icon-lg { background-position: -220px -80px; } .activity-icon-light_bulb-wh.activity-icon-sm { background-position: -55px -20px; } .activity-icon-totally-times { background-position: -75px -40px; } .activity-icon-totally-times.activity-icon-lg { background-position: -150px -80px; } .activity-icon-totally-times.activity-icon-sm { background-position: -37.5px -20px; } .activity-icon-totally-times-wh { background-position: -110px -40px; } .activity-icon-totally-times-wh.activity-icon-lg { background-position: -220px -80px; } .activity-icon-totally-times-wh.activity-icon-sm { background-position: -55px -20px; } .activity-icon-mix-and-match { background-position: -145px -40px; } .activity-icon-mix-and-match.activity-icon-lg { background-position: -290px -80px; } .activity-icon-mix-and-match.activity-icon-sm { background-position: -72.5px -20px; } .activity-icon-mix-and-match-wh { background-position: -180px -40px; } .activity-icon-mix-and-match-wh.activity-icon-lg { background-position: -360px -80px; } .activity-icon-mix-and-match-wh.activity-icon-sm { background-position: -90px -20px; } .activity-icon-fraction-action { background-position: -215px -40px; } .activity-icon-fraction-action.activity-icon-lg { background-position: -430px -80px; } .activity-icon-fraction-action.activity-icon-sm { background-position: -107.5px -20px; } .activity-icon-fraction-action-wh { background-position: -250px -40px; } .activity-icon-fraction-action-wh.activity-icon-lg { background-position: -500px -80px; } .activity-icon-fraction-action-wh.activity-icon-sm { background-position: -125px -20px; } .activity-icon-survey { background-position: -285px -40px; } .activity-icon-survey.activity-icon-lg { background-position: -570px -80px; } .activity-icon-survey.activity-icon-sm { background-position: -142.5px -20px; } .activity-icon-survey-wh { background-position: -320px -40px; } .activity-icon-survey-wh.activity-icon-lg { background-position: -640px -80px; } .activity-icon-survey-wh.activity-icon-sm { background-position: -160px -20px; } .activity-icon-addition-magician { background-position: -355px -40px; } .activity-icon-addition-magician.activity-icon-lg { background-position: -710px -80px; } .activity-icon-addition-magician.activity-icon-sm { background-position: -177.5px -20px; } .activity-icon-addition-magician-wh { background-position: -390px -40px; } .activity-icon-addition-magician-wh.activity-icon-lg { background-position: -780px -80px; } .activity-icon-addition-magician-wh.activity-icon-sm { background-position: -195px -20px; } .activity-icon-addition-magician-returns { background-position: -425px -40px; } .activity-icon-addition-magician-returns.activity-icon-lg { background-position: -850px -80px; } .activity-icon-addition-magician-returns.activity-icon-sm { background-position: -212.5px -20px; } .activity-icon-addition-magician-returns-wh { background-position: -460px -40px; } .activity-icon-addition-magician-returns-wh.activity-icon-lg { background-position: -920px -80px; } .activity-icon-addition-magician-returns-wh.activity-icon-sm { background-position: -230px -20px; } .activity-icon-take-from-10 { background-position: -5px -75px; } .activity-icon-take-from-10.activity-icon-lg { background-position: -10px -150px; } .activity-icon-take-from-10.activity-icon-sm { background-position: -2.5px -37.5px; } .activity-icon-take-from-10-wh { background-position: -40px -75px; } .activity-icon-take-from-10-wh.activity-icon-lg { background-position: -80px -150px; } .activity-icon-take-from-10-wh.activity-icon-sm { background-position: -20px -37.5px; } .activity-icon-make-and-break { background-position: -75px -75px; } .activity-icon-make-and-break.activity-icon-lg { background-position: -150px -150px; } .activity-icon-make-and-break.activity-icon-sm { background-position: -37.5px -37.5px; } .activity-icon-make-and-break-wh { background-position: -110px -75px; } .activity-icon-make-and-break-wh.activity-icon-lg { background-position: -220px -150px; } .activity-icon-make-and-break-wh.activity-icon-sm { background-position: -55px -37.5px; } .activity-icon-next-stop-top { background-position: -145px -75px; } .activity-icon-next-stop-top.activity-icon-lg { background-position: -290px -150px; } .activity-icon-next-stop-top.activity-icon-sm { background-position: -72.5px -37.5px; } .activity-icon-next-stop-top-wh { background-position: -180px -75px; } .activity-icon-next-stop-top-wh.activity-icon-lg { background-position: -360px -150px; } .activity-icon-next-stop-top-wh.activity-icon-sm { background-position: -90px -37.5px; } .activity-icon-number-bond-dash { background-position: -215px -75px; } .activity-icon-number-bond-dash.activity-icon-lg { background-position: -430px -150px; } .activity-icon-number-bond-dash.activity-icon-sm { background-position: -107.5px -37.5px; } .activity-icon-number-bond-dash-wh { background-position: -250px -75px; } .activity-icon-number-bond-dash-wh.activity-icon-lg { background-position: -500px -150px; } .activity-icon-number-bond-dash-wh.activity-icon-sm { background-position: -125px -37.5px; } .activity-icon-story_time { background-position: -285px -75px; } .activity-icon-story_time.activity-icon-lg { background-position: -570px -150px; } .activity-icon-story_time.activity-icon-sm { background-position: -142.5px -37.5px; } .activity-icon-story_time-wh { background-position: -320px -75px; } .activity-icon-story_time-wh.activity-icon-lg { background-position: -640px -150px; } .activity-icon-story_time-wh.activity-icon-sm { background-position: -160px -37.5px; } .activity-icon-form-to-form { background-position: -355px -75px; } .activity-icon-form-to-form.activity-icon-lg { background-position: -710px -150px; } .activity-icon-form-to-form.activity-icon-sm { background-position: -177.5px -37.5px; } .activity-icon-form-to-form-wh { background-position: -390px -75px; } .activity-icon-form-to-form-wh.activity-icon-lg { background-position: -780px -150px; } .activity-icon-form-to-form-wh.activity-icon-sm { background-position: -195px -37.5px; } .activity-icon-counting-train { background-position: -425px -75px; } .activity-icon-counting-train.activity-icon-lg { background-position: -850px -150px; } .activity-icon-counting-train.activity-icon-sm { background-position: -212.5px -37.5px; } .activity-icon-counting-train-wh { background-position: -460px -75px; } .activity-icon-counting-train-wh.activity-icon-lg { background-position: -920px -150px; } .activity-icon-counting-train-wh.activity-icon-sm { background-position: -230px -37.5px; } .activity-icon-hop-skip-splash { background-position: -5px -110px; } .activity-icon-hop-skip-splash.activity-icon-lg { background-position: -10px -220px; } .activity-icon-hop-skip-splash.activity-icon-sm { background-position: -2.5px -55px; } .activity-icon-hop-skip-splash-wh { background-position: -40px -110px; } .activity-icon-hop-skip-splash-wh.activity-icon-lg { background-position: -80px -220px; } .activity-icon-hop-skip-splash-wh.activity-icon-sm { background-position: -20px -55px; } .activity-icon-blast { background-position: -75px -110px; } .activity-icon-blast.activity-icon-lg { background-position: -150px -220px; } .activity-icon-blast.activity-icon-sm { background-position: -37.5px -55px; } .activity-icon-blast-wh { background-position: -110px -110px; } .activity-icon-blast-wh.activity-icon-lg { background-position: -220px -220px; } .activity-icon-blast-wh.activity-icon-sm { background-position: -55px -55px; } .activity-icon-number-gym { background-position: -145px -110px; } .activity-icon-number-gym.activity-icon-lg { background-position: -290px -220px; } .activity-icon-number-gym.activity-icon-sm { background-position: -72.5px -55px; } .activity-icon-number-gym-wh { background-position: -180px -110px; } .activity-icon-number-gym-wh.activity-icon-lg { background-position: -360px -220px; } .activity-icon-number-gym-wh.activity-icon-sm { background-position: -90px -55px; } .activity-icon-sum-snacks { background-position: -215px -110px; } .activity-icon-sum-snacks.activity-icon-lg { background-position: -430px -220px; } .activity-icon-sum-snacks.activity-icon-sm { background-position: -107.5px -55px; } .activity-icon-sum-snacks-wh { background-position: -250px -110px; } .activity-icon-sum-snacks-wh.activity-icon-lg { background-position: -500px -220px; } .activity-icon-sum-snacks-wh.activity-icon-sm { background-position: -125px -55px; } .activity-icon-bundle-the-sea { background-position: -285px -110px; } .activity-icon-bundle-the-sea.activity-icon-lg { background-position: -570px -220px; } .activity-icon-bundle-the-sea.activity-icon-sm { background-position: -142.5px -55px; } .activity-icon-bundle-the-sea-wh { background-position: -320px -110px; } .activity-icon-bundle-the-sea-wh.activity-icon-lg { background-position: -640px -220px; } .activity-icon-bundle-the-sea-wh.activity-icon-sm { background-position: -160px -55px; } .activity-icon-discovery_canyon { background-position: -355px -110px; } .activity-icon-discovery_canyon.activity-icon-lg { background-position: -710px -220px; } .activity-icon-discovery_canyon.activity-icon-sm { background-position: -177.5px -55px; } .activity-icon-discovery_canyon-wh { background-position: -390px -110px; } .activity-icon-discovery_canyon-wh.activity-icon-lg { background-position: -780px -220px; } .activity-icon-discovery_canyon-wh.activity-icon-sm { background-position: -195px -55px; } .activity-icon-count-the-cosmos { background-position: -425px -110px; } .activity-icon-count-the-cosmos.activity-icon-lg { background-position: -850px -220px; } .activity-icon-count-the-cosmos.activity-icon-sm { background-position: -212.5px -55px; } .activity-icon-count-the-cosmos-wh { background-position: -460px -110px; } .activity-icon-count-the-cosmos-wh.activity-icon-lg { background-position: -920px -220px; } .activity-icon-count-the-cosmos-wh.activity-icon-sm { background-position: -230px -55px; } .activity-icon-polar-place-values { background-position: -5px -145px; } .activity-icon-polar-place-values.activity-icon-lg { background-position: -10px -290px; } .activity-icon-polar-place-values.activity-icon-sm { background-position: -2.5px -72.5px; } .activity-icon-polar-place-values-wh { background-position: -40px -145px; } .activity-icon-polar-place-values-wh.activity-icon-lg { background-position: -80px -290px; } .activity-icon-polar-place-values-wh.activity-icon-sm { background-position: -20px -72.5px; } .activity-final-sp { background-image: url("https://webassets.zearn.org/app_assets/general/activity-final-screen-sp.png"); background-repeat: no-repeat; display: inline-block; line-height: 0; } .activity-final-sp-bg-cat { width: 135px; height: 148px; background-position: 0 0; } .activity-final-sp-bg-owl { width: 171px; height: 164px; background-position: -135px 0; } .icon-uni-nav { background-image: url("https://webassets.zearn.org/app_assets/general/arrows/feed-uni-nav-sp-v2.png"); background-repeat: no-repeat; display: inline-block; line-height: 0; } .icon-uni-nav-arrow-blue-lg-left { width: 27px; height: 25px; background-position: 0 0; } .icon-uni-nav-arrow-blue-micro-right { width: 9px; height: 8px; background-position: -27px 0; } .icon-uni-nav-arrow-blue-sm-up, .icon-uni-nav-arrow-blue-sm-right, .icon-uni-nav-arrow-blue-sm-down, .icon-uni-nav-arrow-blue-sm-left { width: 13px; height: 14px; background-position: -27px -8px; } .icon-uni-nav-arrow-blue-sm-right { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .icon-uni-nav-arrow-blue-sm-down { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } .icon-uni-nav-arrow-blue-sm-left { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } .icon-uni-nav-arrow-green-md-down { width: 22px; height: 23px; background-position: -40px 0; } .icon-uni-nav-notes { width: 16px; height: 17px; background-position: -27px -23px; } @-webkit-keyframes doublePulse { 37.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 41.88% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 46.25% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 54.38% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 62.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes doublePulse { 37.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 41.88% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 46.25% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 54.38% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 62.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes doublePulse { 37.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 41.88% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 46.25% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 54.38% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 62.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes doublePulse { 37.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 41.88% { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } 46.25% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 54.38% { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } 62.5% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes quadruplePulse { 0%, 16%, 32%, 48% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: ease-in; } 8%, 24%, 40%, 56% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); animation-timing-function: ease-out; } 64% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: linear; } } @-moz-keyframes quadruplePulse { 0%, 16%, 32%, 48% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: ease-in; } 8%, 24%, 40%, 56% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); animation-timing-function: ease-out; } 64% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: linear; } } @-o-keyframes quadruplePulse { 0%, 16%, 32%, 48% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: ease-in; } 8%, 24%, 40%, 56% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); animation-timing-function: ease-out; } 64% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: linear; } } @keyframes quadruplePulse { 0%, 16%, 32%, 48% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: ease-in; } 8%, 24%, 40%, 56% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); animation-timing-function: ease-out; } 64% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); animation-timing-function: linear; } } @-webkit-keyframes manipsPulse { 0%, 12.5% { transform: scale(1); animation-timing-function: ease-in; } 6.25%, 18.75% { transform: scale(1.2); animation-timing-function: ease-out; } 25% { transform: scale(1); animation-timing-function: linear; } } @-moz-keyframes manipsPulse { 0%, 12.5% { transform: scale(1); animation-timing-function: ease-in; } 6.25%, 18.75% { transform: scale(1.2); animation-timing-function: ease-out; } 25% { transform: scale(1); animation-timing-function: linear; } } @-o-keyframes manipsPulse { 0%, 12.5% { transform: scale(1); animation-timing-function: ease-in; } 6.25%, 18.75% { transform: scale(1.2); animation-timing-function: ease-out; } 25% { transform: scale(1); animation-timing-function: linear; } } @keyframes manipsPulse { 0%, 12.5% { transform: scale(1); animation-timing-function: ease-in; } 6.25%, 18.75% { transform: scale(1.2); animation-timing-function: ease-out; } 25% { transform: scale(1); animation-timing-function: linear; } } @-webkit-keyframes wobble { 0% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } } @-moz-keyframes wobble { 0% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } } @-o-keyframes wobble { 0% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } } @keyframes wobble { 0% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); -moz-transform: rotate(4deg); -ms-transform: rotate(4deg); -o-transform: rotate(4deg); transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); transform: rotate(-4deg); } } @-webkit-keyframes jiggle { 0% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } 50% { -webkit-transform: translateX(2px) rotate(10deg); -moz-transform: translateX(2px) rotate(10deg); -ms-transform: translateX(2px) rotate(10deg); -o-transform: translateX(2px) rotate(10deg); transform: translateX(2px) rotate(10deg); } 100% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } } @-moz-keyframes jiggle { 0% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } 50% { -webkit-transform: translateX(2px) rotate(10deg); -moz-transform: translateX(2px) rotate(10deg); -ms-transform: translateX(2px) rotate(10deg); -o-transform: translateX(2px) rotate(10deg); transform: translateX(2px) rotate(10deg); } 100% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } } @-o-keyframes jiggle { 0% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } 50% { -webkit-transform: translateX(2px) rotate(10deg); -moz-transform: translateX(2px) rotate(10deg); -ms-transform: translateX(2px) rotate(10deg); -o-transform: translateX(2px) rotate(10deg); transform: translateX(2px) rotate(10deg); } 100% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } } @keyframes jiggle { 0% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } 50% { -webkit-transform: translateX(2px) rotate(10deg); -moz-transform: translateX(2px) rotate(10deg); -ms-transform: translateX(2px) rotate(10deg); -o-transform: translateX(2px) rotate(10deg); transform: translateX(2px) rotate(10deg); } 100% { -webkit-transform: translateX(-2px) rotate(-10deg); -moz-transform: translateX(-2px) rotate(-10deg); -ms-transform: translateX(-2px) rotate(-10deg); -o-transform: translateX(-2px) rotate(-10deg); transform: translateX(-2px) rotate(-10deg); } } @-webkit-keyframes jiggleWithInterval { 0% { transform: translateX(-2px) rotate(-10deg); } 2.38% { transform: translateX(2px) rotate(10deg); } 4.76% { transform: translateX(-2px) rotate(-10deg); } 7.14% { transform: none; } } @-moz-keyframes jiggleWithInterval { 0% { transform: translateX(-2px) rotate(-10deg); } 2.38% { transform: translateX(2px) rotate(10deg); } 4.76% { transform: translateX(-2px) rotate(-10deg); } 7.14% { transform: none; } } @-o-keyframes jiggleWithInterval { 0% { transform: translateX(-2px) rotate(-10deg); } 2.38% { transform: translateX(2px) rotate(10deg); } 4.76% { transform: translateX(-2px) rotate(-10deg); } 7.14% { transform: none; } } @keyframes jiggleWithInterval { 0% { transform: translateX(-2px) rotate(-10deg); } 2.38% { transform: translateX(2px) rotate(10deg); } 4.76% { transform: translateX(-2px) rotate(-10deg); } 7.14% { transform: none; } } @-webkit-keyframes nod { 0% { margin-top: 0; } 25% { margin-top: 3px; } 50% { margin-top: 0; } 75% { margin-top: -3px; } 100% { margin-top: 0; } } @-moz-keyframes nod { 0% { margin-top: 0; } 25% { margin-top: 3px; } 50% { margin-top: 0; } 75% { margin-top: -3px; } 100% { margin-top: 0; } } @-o-keyframes nod { 0% { margin-top: 0; } 25% { margin-top: 3px; } 50% { margin-top: 0; } 75% { margin-top: -3px; } 100% { margin-top: 0; } } @keyframes nod { 0% { margin-top: 0; } 25% { margin-top: 3px; } 50% { margin-top: 0; } 75% { margin-top: -3px; } 100% { margin-top: 0; } } @-webkit-keyframes shake { 0% { margin-left: 0; } 25% { margin-left: 3px; } 50% { margin-left: 0; } 75% { margin-left: -3px; } 100% { margin-left: 0; } } @-moz-keyframes shake { 0% { margin-left: 0; } 25% { margin-left: 3px; } 50% { margin-left: 0; } 75% { margin-left: -3px; } 100% { margin-left: 0; } } @-o-keyframes shake { 0% { margin-left: 0; } 25% { margin-left: 3px; } 50% { margin-left: 0; } 75% { margin-left: -3px; } 100% { margin-left: 0; } } @keyframes shake { 0% { margin-left: 0; } 25% { margin-left: 3px; } 50% { margin-left: 0; } 75% { margin-left: -3px; } 100% { margin-left: 0; } } @-webkit-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes matBackgroundFlashCorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ccffd9; } 100% { background-color: #f3fdff; } } @-moz-keyframes matBackgroundFlashCorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ccffd9; } 100% { background-color: #f3fdff; } } @-o-keyframes matBackgroundFlashCorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ccffd9; } 100% { background-color: #f3fdff; } } @keyframes matBackgroundFlashCorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ccffd9; } 100% { background-color: #f3fdff; } } @-webkit-keyframes matBackgroundFlashIncorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ffe3ee; } 100% { background-color: #f3fdff; } } @-moz-keyframes matBackgroundFlashIncorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ffe3ee; } 100% { background-color: #f3fdff; } } @-o-keyframes matBackgroundFlashIncorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ffe3ee; } 100% { background-color: #f3fdff; } } @keyframes matBackgroundFlashIncorrect { 0% { background-color: #f3fdff; } 50% { background-color: #ffe3ee; } 100% { background-color: #f3fdff; } } @-webkit-keyframes whiteMatBackgroundFlashCorrect { 50% { background-color: #ccffd9; } 100% { background-color: white; } } @-moz-keyframes whiteMatBackgroundFlashCorrect { 50% { background-color: #ccffd9; } 100% { background-color: white; } } @-o-keyframes whiteMatBackgroundFlashCorrect { 50% { background-color: #ccffd9; } 100% { background-color: white; } } @keyframes whiteMatBackgroundFlashCorrect { 50% { background-color: #ccffd9; } 100% { background-color: white; } } @-webkit-keyframes whiteMatBackgroundFlashIncorrect { 50% { background-color: #ffe3ee; } 100% { background-color: white; } } @-moz-keyframes whiteMatBackgroundFlashIncorrect { 50% { background-color: #ffe3ee; } 100% { background-color: white; } } @-o-keyframes whiteMatBackgroundFlashIncorrect { 50% { background-color: #ffe3ee; } 100% { background-color: white; } } @keyframes whiteMatBackgroundFlashIncorrect { 50% { background-color: #ffe3ee; } 100% { background-color: white; } } @-webkit-keyframes initialInFadeOut { 0% { opacity: 1; } 83% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes initialInFadeOut { 0% { opacity: 1; } 83% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes initialInFadeOut { 0% { opacity: 1; } 83% { opacity: 1; } 100% { opacity: 0; } } @keyframes initialInFadeOut { 0% { opacity: 1; } 83% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes initialOutFadeIn { 0% { opacity: 0; } 83% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes initialOutFadeIn { 0% { opacity: 0; } 83% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes initialOutFadeIn { 0% { opacity: 0; } 83% { opacity: 0; } 100% { opacity: 1; } } @keyframes initialOutFadeIn { 0% { opacity: 0; } 83% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes hideFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes hideFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes hideFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes hideFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .task-group { min-height: 522px; padding-top: 1px; position: relative; } .task-group .task-group-header { position: relative; } .task-group .task-group-header .dialog-arrow { position: absolute; left: -12px; top: 50%; height: 0; width: 0; margin-top: -12px; border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-right: 12px solid #fad232; } .task-group .task-group-header .dialog-character { position: absolute; left: -80px; top: 50%; margin-top: -29.1375px; width: 63.375px; height: 58.275px; } .task-group-header .dialog-arrow, .task-group-header .dialog-character { display: none; } .task-group-feedback { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: none; position: absolute; bottom: 0px; left: 0px; width: 1024px; pointer-events: none; } .task-group-feedback.fade-in { -webkit-animation: hideFadeIn 200ms ease-in-out; -moz-animation: hideFadeIn 200ms ease-in-out; -ms-animation: hideFadeIn 200ms ease-in-out; -o-animation: hideFadeIn 200ms ease-in-out; animation: hideFadeIn 200ms ease-in-out; } .task-group-feedback .task-group-feedback-icon { height: 60px; margin-right: 18px; } .task-group-feedback .task-group-feedback-message { font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 30px; font-weight: 300; } .task-group-feedback.correct, .task-group-feedback.incorrect, .task-group-feedback.try-again, .task-group-feedback.correctable, .task-group-feedback.pre-ghost-autocorrect { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .task-group-feedback.incorrect .task-group-feedback-message, .task-group-feedback.try-again .task-group-feedback-message, .task-group-feedback.correctable .task-group-feedback-message, .task-group-feedback.pre-ghost-autocorrect .task-group-feedback-message { color: #cc1f50; } .task-group-feedback.correct .task-group-feedback-icon { background-image: url("https://webassets.zearn.org/app_assets/task_group/correct.svg"); background-size: 44px 60px; width: 44px; } .task-group-feedback.correct .task-group-feedback-message { color: #006644; } .task-group-feedback.incorrect .task-group-feedback-icon { background-image: url("https://webassets.zearn.org/app_assets/task_group/incorrect.svg"); background-size: 9px 60px; width: 9px; } .task-group-feedback .interactable-feedback { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 50px; } .task-group-feedback.try-again .task-group-feedback-icon { background-image: url("https://webassets.zearn.org/app_assets/task_group/try_again.svg"); background-size: 26px 60px; width: 26px; } .task-group-feedback.correctable .task-group-feedback-icon, .task-group-feedback.pre-ghost-autocorrect .task-group-feedback-icon { background-image: url("https://webassets.zearn.org/app_assets/task_group/correctable.svg"); background-size: 31px 60px; width: 31px; } #tower-of-power .task-group { background-color: #ffffff; border: none; margin-bottom: 35px; opacity: 0.4; -webkit-transition: opacity, 500ms, linear; -moz-transition: opacity, 500ms, linear; -ms-transition: opacity, 500ms, linear; -o-transition: opacity, 500ms, linear; transition: opacity, 500ms, linear; transition-delay: 1s; } #tower-of-power .task-group:last-of-type { opacity: 1; } #tower-of-power.remediation .task-group { -webkit-transition: all 2000ms; -moz-transition: all 2000ms; -ms-transition: all 2000ms; -o-transition: all 2000ms; transition: all 2000ms; } #tower-of-power.remediation .task-group .default-task-group-header { font-size: 20px; margin: 20px 80px 20px 120px; width: 824px; } #tower-of-power.remediation .task-group .default-task-group-header .header-inner { background: #fad232; padding: 10px; box-shadow: 2px 2px 0px #888; } #tower-of-power.remediation .task-group .default-task-group-header .header-inner:empty { background: transparent; box-shadow: none; } #tower-of-power.remediation .task-group .default-task-group-header .dialog-arrow, #tower-of-power.remediation .task-group .default-task-group-header .dialog-character { display: block; } #tower-of-power .auto-read-task-group-header { margin-top: 8px; } .tasks-page { background: white; font-size: 0px; text-align: center; position: relative; width: 1024px; padding-top: 8px; margin: 0px auto; } .tasks-page.ended { margin-bottom: 10px; } #tower-of-power .tasks-page { background: none; } .task-container { position: relative; min-height: 60px; display: inline-block; vertical-align: middle; margin-bottom: 16px; margin-left: 8px; margin-right: 8px; } .task-container.grid-1 { width: 64px; } .task-container.grid-2 { width: 144px; } .task-container.grid-3 { width: 224px; } .task-container.grid-4 { width: 304px; } .task-container.grid-5 { width: 384px; } .task-container.grid-6 { width: 464px; } .task-container.grid-7 { width: 544px; } .task-container.grid-8 { width: 624px; } .task-container.grid-9 { width: 704px; } .task-container.grid-10 { width: 784px; } .task-container.grid-11 { width: 864px; } .task-container.grid-12 { width: 944px; } .task-container.valign-top { vertical-align: top; } .task-container.valign-bottom { vertical-align: bottom; } .task-container.highlighted { background-color: rgba(250, 210, 50, 0.5); } .task-header, .task-group-header { margin: 5px; white-space: normal; text-align: left; } body:not(.g6plus):not(.grade-k) .task-header, body:not(.g6plus):not(.grade-k) .task-group-header { font-size: 22px; font-weight: 700; } body.g6plus .task-header, body.g6plus .task-group-header { font-size: 22px; font-weight: 600; } body.grade-k .task-header, body.grade-k .task-group-header { font-size: 22px; font-weight: 700; } #tower-of-power .task-header, .checkpoints-taskable .task-header, .lab-sections .task-header, #tower-of-power .task-group-header, .checkpoints-taskable .task-group-header, .lab-sections .task-group-header { text-align: center; } .std-text { font-size: 20px; } .task { margin-top: 10px; margin-bottom: 10px; } #touch-keypad { display: none; margin-bottom: 5px; } #touch-keypad button { font-size: 0px; width: 70px; height: 60px; margin: 5px; } #touch-keypad button span { font-size: 30px; } #touch-keypad button.touch-keypad-delete-button { width: 75px; } .touched-input { transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -webkit-appearance: none; -webkit-box-shadow: 0px 0px 5px 2px #0497e7; -moz-box-shadow: 0px 0px 5px 2px #0497e7; -ms-box-shadow: 0px 0px 5px 2px #0497e7; -o-box-shadow: 0px 0px 5px 2px #0497e7; box-shadow: 0px 0px 5px 2px #0497e7; } .number-input { text-align: center; font-size: 24px; } .fraction { display: inline-block; text-align: center; vertical-align: middle; margin-left: 2px; margin-right: 2px; } .fraction .denominator { border-top: 2px solid; padding-left: 4px; padding-right: 4px; } .fraction.small { font-size: 0.67em; } .algorithm-2016-task .algo-row-answer { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .algorithm-2016-task .algo-operator-column.algo-answer-placeholder { width: 1.2em; margin-right: 7px; } .algorithm-2016-task .super-reset-button { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 0; vertical-align: top; font-size: inherit; height: 1.2em; width: 1.2em; } .algorithm-2016-task .super-reset-button i { font-size: 0.6em; } .algorithm-2016-task .super-fill-in-widget .super-input.try-again.correct { border-color: #aaaaaa; background: #ffffff; } @charset "UTF-8"; .multiplication-algorithm-2016-task:not(.vueified) { font-family: Oxygen, Verdana, Geneva, sans-serif; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-wrap { font-size: 0; margin-left: 24px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-row.has-bundle { margin: 13px 0; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-row.highlight .multiplication-col:not(:empty) { background: #fde999; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-row.highlight .multiplication-col:not(:empty) + .multiplication-gutter-col { height: 26px; background: #fde999; } .multiplication-algorithm-2016-task:not(.vueified) .units-factor, .multiplication-algorithm-2016-task:not(.vueified) .units-product { margin-left: 10px; font-size: 20px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-equals-row { margin: 5px 0; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-answer-row { height: 30px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-bundle-row { height: 26px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-bundle-row .multiplication-col .token-text, .multiplication-algorithm-2016-task:not(.vueified) .multiplication-bundle-row .multiplication-col .number-input { font-size: 14px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-bundle-row.overlaps-equals { margin-top: -28px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-bundle-row.cross-out .multiplication-col:not(:empty)::before { content: ""; position: absolute; display: block; width: 100%; height: 100%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2026%2031.2%27%20%3E%3Cline%20x1%3D%2790%25%27%20y1%3D%2710%25%27%20x2%3D%2710%25%27%20y2%3D%2790%25%27%20stroke%3D%27rgba(122%2C%200%2C%20201%2C%201.0)%27%20stroke-width%3D%272%27%2F%3E%3C%2Fsvg%3E") no-repeat center center; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col { display: inline-block; position: relative; width: 20px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col .token-text, .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col .number-input { font-size: 20px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col.has-times-operator:empty, .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col.has-plus-operator:empty { height: 20px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col.has-times-operator::before, .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col.has-plus-operator::before { position: absolute; left: -100%; font-size: 20px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col.has-times-operator::before { content: "×"; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col.has-plus-operator::before { content: "+"; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-col.highlight { background: #fde999; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-gutter-col { display: inline-block; width: 4px; font-size: 20px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg { display: inline-block; height: 2px; vertical-align: top; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-1 { width: 26px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-2 { width: 50px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-3 { width: 74px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-4 { width: 98px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-5 { width: 122px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-6 { width: 146px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-7 { width: 170px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-8 { width: 194px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-9 { width: 218px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg.num-cols-10 { width: 242px; } .multiplication-algorithm-2016-task:not(.vueified) .multiplication-line-svg line { stroke: black; stroke-width: 2; } .area-plot .task { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; margin-top: 50px; } .area-plot .plot-mat-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .area-plot .plot-mat { background-color: #f3fdff; border: 2px solid #999999; border-radius: 12px; padding: 25px; position: relative; } .area-plot .plot-mat.with-controls.small { padding: 0 30px 30px 0; } .area-plot .plot-mat.with-controls.medium { padding: 0 40px 40px 0; } .area-plot .plot-mat.with-controls.large { padding: 0 50px 50px 0; } .area-plot .plot-mat.with-scaffold .scaffold-cell:not(.plotted):not(.hover) { background-color: #e4e4e4; } .area-plot .plot-mat.with-scaffold.hide-scaffold-units .scaffold-cell { outline-color: transparent; border-style: dashed; border-width: 2px; } .area-plot .plot-mat.with-scaffold.hide-scaffold-units .scaffold-cell.plotted, .area-plot .plot-mat.with-scaffold.hide-scaffold-units .scaffold-cell.hover { border-color: transparent; } .area-plot .plot-mat.with-scaffold.hide-scaffold-units .plot-row:not(.scaffold-start) .scaffold-cell { border-top-width: 0; } .area-plot .plot-mat.with-scaffold.hide-scaffold-units .plot-row:not(.scaffold-end) .scaffold-cell { border-bottom-width: 0; } .area-plot .plot-mat.with-scaffold.hide-scaffold-units .scaffold-cell:not(.scaffold-start) { border-left-width: 0; } .area-plot .plot-mat.with-scaffold.hide-scaffold-units .scaffold-cell:not(.scaffold-end) { border-right-width: 0; } .area-plot .plot-mat.with-scaffold:not(.hide-scaffold-units) .scaffold-cell { border: none; } .area-plot .plot-mat.with-scaffold:not(.hide-scaffold-units) .scaffold-cell:not(.plotted):not(.hover) { outline-color: #999999; outline-style: dashed; } .area-plot .plot-mat.hide-grid .plot-cell:not(.scaffold-cell) { border-color: transparent; } .area-plot .plot-mat.correct { border-color: #00c372; } .area-plot .plot-mat.incorrect { border-color: #ff4d76; } .area-plot .plot-mat.try-again { background-color: #ffe3ee; cursor: pointer; } .area-plot .plot-mat:not(.try-again).correct.final, .area-plot .plot-mat:not(.try-again).incorrect.final { background-color: white; } .area-plot .plot-mat:not(.try-again).correct:not(.final), .area-plot .plot-mat:not(.try-again).incorrect:not(.final) { -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -ms-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: forwards; -moz-animation-fill-mode: forwards; -ms-animation-fill-mode: forwards; -o-animation-fill-mode: forwards; animation-fill-mode: forwards; } .area-plot .plot-mat:not(.try-again).correct:not(.final) { -webkit-animation-name: whiteMatBackgroundFlashCorrect; -moz-animation-name: whiteMatBackgroundFlashCorrect; -ms-animation-name: whiteMatBackgroundFlashCorrect; -o-animation-name: whiteMatBackgroundFlashCorrect; animation-name: whiteMatBackgroundFlashCorrect; } .area-plot .plot-mat:not(.try-again).incorrect:not(.final) { -webkit-animation-name: whiteMatBackgroundFlashIncorrect; -moz-animation-name: whiteMatBackgroundFlashIncorrect; -ms-animation-name: whiteMatBackgroundFlashIncorrect; -o-animation-name: whiteMatBackgroundFlashIncorrect; animation-name: whiteMatBackgroundFlashIncorrect; } .area-plot .plot-row { height: auto; } .area-plot .plot-row:not(:last-child) .plot-cell { background-position: 50% calc(50% - 1px); } .area-plot .plot-row .plot-cell:not(:first-child) { background-position: calc(50% - 1px) 50%; } .area-plot .plot-cell { border: 1px solid #999999; outline: 2px solid transparent; outline-offset: -1px; background-color: transparent; position: relative; } .area-plot .plot-cell:not(.button-cell).plotted, .area-plot .plot-cell:not(.button-cell).hover { z-index: 1; } .area-plot .plot-cell:not(.button-cell).plotted.purple, .area-plot .plot-cell:not(.button-cell).hover.purple { background-color: #7029a5; outline-color: #f1d9ff; } .area-plot .plot-cell:not(.button-cell).plotted.blue, .area-plot .plot-cell:not(.button-cell).hover.blue { background-color: #136fcb; outline-color: #65c6fd; } .area-plot .plot-cell:not(.button-cell).hover:not(.ui-draggable-dragging) { cursor: pointer; opacity: 0.5; background-repeat: no-repeat; background-size: 24px 24px; background-position: center; } .area-plot .plot-cell:not(.button-cell).hover:not(.ui-draggable-dragging):not(.plotted) { background-image: url("https://webassets.zearn.org/app_assets/tasks/area_plot/plus.svg"); } .area-plot .plot-cell:not(.button-cell).hover:not(.ui-draggable-dragging).plotted { background-image: url("https://webassets.zearn.org/app_assets/tasks/area_plot/minus.svg"); } .area-plot .plot-cell.ui-draggable:not(.ui-draggable-disabled) { cursor: -webkit-grab; cursor: -moz-grab; cursor: -ms-grab; cursor: -o-grab; cursor: grab; } .area-plot .plot-cell.ui-draggable.ui-draggable-dragging { cursor: -webkit-grabbing; cursor: -moz-grabbing; cursor: -ms-grabbing; cursor: -o-grabbing; cursor: grabbing; z-index: 2; } .area-plot .plot-mat.small .plot-cell, .area-plot .bank-tile.small { width: 30px; height: 30px; } .area-plot .plot-mat.small .plot-cell .plus-button, .area-plot .plot-mat.small .plot-cell .minus-button, .area-plot .bank-tile.small .plus-button, .area-plot .bank-tile.small .minus-button { width: 24px; height: 24px; } .area-plot .plot-mat.small .plot-cell .plus-button i, .area-plot .plot-mat.small .plot-cell .minus-button i, .area-plot .bank-tile.small .plus-button i, .area-plot .bank-tile.small .minus-button i { vertical-align: middle; font-size: 12px; } .area-plot .plot-mat.medium .plot-cell, .area-plot .bank-tile.medium { width: 40px; height: 40px; } .area-plot .plot-mat.medium .plot-cell .plus-button, .area-plot .plot-mat.medium .plot-cell .minus-button, .area-plot .bank-tile.medium .plus-button, .area-plot .bank-tile.medium .minus-button { width: 27px; height: 27px; } .area-plot .plot-mat.medium .plot-cell .plus-button i, .area-plot .plot-mat.medium .plot-cell .minus-button i, .area-plot .bank-tile.medium .plus-button i, .area-plot .bank-tile.medium .minus-button i { vertical-align: middle; font-size: 13.5px; } .area-plot .plot-mat.large .plot-cell, .area-plot .bank-tile.large { width: 50px; height: 50px; } .area-plot .plot-mat.large .plot-cell .plus-button, .area-plot .plot-mat.large .plot-cell .minus-button, .area-plot .bank-tile.large .plus-button, .area-plot .bank-tile.large .minus-button { width: 30px; height: 30px; } .area-plot .plot-mat.large .plot-cell .plus-button i, .area-plot .plot-mat.large .plot-cell .minus-button i, .area-plot .bank-tile.large .plus-button i, .area-plot .bank-tile.large .minus-button i { vertical-align: middle; font-size: 15px; } .area-plot .plot-row:first-child .button-cell { border-right-width: 0; } .area-plot .button-cell { border-bottom-width: 0; border-top-width: 0; border-left-width: 0; } .area-plot .plus-button, .area-plot .minus-button { display: none; position: relative; margin: auto; } .area-plot .minus-button { opacity: 0; } .area-plot .minus-button:hover { opacity: 1; } .area-plot .counter { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0px; right: 0px; font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 18px; background-color: #666666; color: white; border-radius: 8px; width: 35px; } .area-plot .plot-mat.small .counter { height: 25px; margin-top: 3px; margin-right: 3px; } .area-plot .plot-mat.medium .counter { height: 35px; margin-top: 5px; margin-right: 5px; } .area-plot .plot-mat.large .counter { height: 35px; margin-top: 10px; margin-right: 10px; } .area-plot .tile-bank { margin: 20px; } .area-plot .tile-bank.infinite { position: relative; top: 20px; width: 75px; height: 75px; } .area-plot .tile-bank.infinite .bank-tile { position: absolute; } .area-plot .tile-bank.infinite .bank-tile:nth-child(2) { top: 6px; left: 6px; } .area-plot .tile-bank.infinite .bank-tile:nth-child(3) { top: 12px; left: 12px; } .area-plot .tile-bank.organized, .area-plot .tile-bank.scattered { margin-right: 50px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .area-plot .tile-bank.organized.small .bank-row { height: 30px; } .area-plot .tile-bank.organized.medium .bank-row { height: 40px; } .area-plot .tile-bank.organized.large .bank-row { height: 50px; } .area-plot .tile-bank.organized .flex-row .bank-cell:not(:first-child) .flex-cell { border-left-width: 0; } .area-plot .tile-bank.scattered { width: 320px; } .area-plot .tile-bank.scattered .bank-cell { -webkit-flex-grow: 1; flex-grow: 1; } .area-plot .tile-bank.scattered .bank-cell .flex-cell { border: 0; } .area-plot .tile-bank.scattered .bank-tile:not(.visible) { visibility: hidden; } .decimal-tape-diagram .controls-group button:not(:disabled), .decimal-tape-diagram .alignment-button:not(.disabled) { cursor: pointer; } .decimal-tape-diagram .controls-group { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-top: 20px; width: 100%; display: table; border-collapse: collapse; } .decimal-tape-diagram .controls-group .controls-left, .decimal-tape-diagram .controls-group .controls-center, .decimal-tape-diagram .controls-group .controls-right { display: table-cell; vertical-align: top; } .decimal-tape-diagram .controls-group .controls-left { width: 50%; text-align: right; } .decimal-tape-diagram .controls-group .controls-right { width: 50%; text-align: left; } .decimal-tape-diagram .controls-group .directional-button, .decimal-tape-diagram .controls-group .split-button { display: inline-block; padding: 0; margin: 0 4px; width: 53px; height: 53px; background-color: transparent; } .decimal-tape-diagram .controls-group .directional-button::-moz-focus-inner, .decimal-tape-diagram .controls-group .split-button::-moz-focus-inner { border: 0; padding: 0; } .decimal-tape-diagram .controls-group .directional-button:last-child, .decimal-tape-diagram .controls-group .split-button:last-child { margin-bottom: 0; } .decimal-tape-diagram .controls-group .split-clear-icon { display: inline-block; } .decimal-tape-diagram .controls-group .total-container { border: 2px dotted #bdbec0; border-radius: 10px; -moz-margin-start: 2px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; display: inline-block; margin: 2px 4px 0 4px; padding: 0 4px; height: 50px; min-width: 53px; vertical-align: top; font-size: 0px; white-space: nowrap; } .decimal-tape-diagram .controls-group .total-container .total-decimal { padding: 5px 2px; color: #0f9ed9; display: inline-block; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 20px; } .decimal-tape-diagram .controls-group .total-container .total-whole, .decimal-tape-diagram .controls-group .total-container .total-unit { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; padding: 5px 2px; color: #0f9ed9; font-size: 20px; } .decimal-tape-diagram .controls-group .total-container .total-unit { color: black; vertical-align: top; } .decimal-tape-diagram .controls-group .total-container .total-fraction { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; font-size: 16px; padding-left: 4px; padding-right: 4px; } .decimal-tape-diagram .controls-group .total-container .total-fraction .total-numerator { padding-top: 2px; color: #0f9ed9; } .decimal-tape-diagram .controls-group .total-container .total-fraction .total-denominator { padding-bottom: 2px; color: black; border-top: 2px solid black; min-width: 32px; } .decimal-tape-diagram .controls-group .total-container.disabled .total-whole, .decimal-tape-diagram .controls-group .total-container.disabled .total-unit, .decimal-tape-diagram .controls-group .total-container.disabled .total-numerator, .decimal-tape-diagram .controls-group .total-container.disabled .total-decimal { color: #8c8c8c; } .decimal-tape-diagram .controls-group .total-container.disabled .total-denominator { border-top: 2px solid #8c8c8c; } .decimal-tape-diagram .line-box { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; display: inline-block; width: 800px; } .decimal-tape-diagram .line-box.has-marker { margin-bottom: 60px; } .decimal-tape-diagram .line-box .bracket-top { margin-bottom: 10px; } .decimal-tape-diagram .line-box .lines-container { position: relative; background-color: #f7f8f8; border-top: solid 2px #6d6e70; border-bottom: solid 2px #6d6e70; } .decimal-tape-diagram .line-box .lines-container .vertical-split { display: inline-block; border-right-color: #6d6e70; border-right-style: solid; border-right-width: 0; height: 80px; width: 8px; } .decimal-tape-diagram .line-box .lines-container .vertical-split.first { border-left: solid 2px #6d6e70; } .decimal-tape-diagram .line-box .lines-container .vertical-split.hundredths { border-right-width: 1px; } .decimal-tape-diagram .line-box .lines-container .vertical-split.tenths { border-right-width: 2px; } .decimal-tape-diagram .line-box .lines-container .vertical-split.shaded { background-color: #0f9ed9; } .decimal-tape-diagram .line-box .lines-container .marker { position: absolute; height: 100%; } .decimal-tape-diagram .line-box .lines-container .marker .marker-middle { position: absolute; height: 100%; top: -80px; left: -1px; width: 3px; background-color: #0f9ed9; opacity: 0.5; } .decimal-tape-diagram .line-box .lines-container .marker .arrow-down-button { position: absolute; left: -20px; top: -100px; } .decimal-tape-diagram .line-box .lines-container .marker .arrow-up-drag-button { position: absolute; left: -20px; top: 2px; } .estimate-to-partition *:focus { outline: none; } .estimate-to-partition .task { text-align: left; } .estimate-to-partition:not(.grid-12) .operational-buttons { min-width: 106px; } .estimate-to-partition .zearn-button { display: block; } .estimate-to-partition .e2p-area-model { display: inline-block; vertical-align: middle; } .estimate-to-partition .e2p-area-model { position: relative; min-height: 100px; margin: 60px 0 60px 20px; } .estimate-to-partition .e2p-area-model.default-height { height: 100px; } .estimate-to-partition .e2p-area-model-bg { width: 604px; border: 4px solid #6d6e70; height: 100%; margin-left: -2px; } .estimate-to-partition .e2p-area-model-bg.light-color { border-color: white; } .estimate-to-partition .e2p-area-model-bg.with-img { border-width: 0; margin-left: 0; width: auto; } .estimate-to-partition .e2p-line-box { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } .estimate-to-partition .e2p-marker { position: absolute; height: 100%; } .estimate-to-partition .e2p-marker .e2p-marker-middle { position: absolute; height: 100%; top: 1px; left: -1px; width: 3px; background-color: #6d6e70; opacity: 0.5; } .estimate-to-partition .e2p-marker .e2p-marker-middle.light-color { background-color: white; } .estimate-to-partition .e2p-marker .arrow-down-button { position: absolute; left: -20px; top: -19px; } .estimate-to-partition .e2p-marker .arrow-up-drag-button { position: absolute; bottom: -63px; left: -20px; } .estimate-to-partition .e2p-hint-line, .estimate-to-partition .e2p-split-line { position: absolute; height: 100%; border-width: 0 0 0 5px; margin-left: -2px; border-color: #6d6e70; } .estimate-to-partition .e2p-hint-line.light-color, .estimate-to-partition .e2p-split-line.light-color { border-color: white; } .estimate-to-partition .e2p-hint-line { border-style: dashed; } .estimate-to-partition .e2p-split-line { border-style: solid; } .estimate-to-partition.active-task .arrow-up-drag-button, .estimate-to-partition.active-task .arrow-down-button, .estimate-to-partition.active-task .operational-buttons button:not(:disabled) { cursor: pointer; } .geometry.task { padding: 64px; font-size: 20px; } .geometry.task .point-label { font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .number-bond-2017 .nb2017-controls { margin: 20px 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .number-bond-2017 .plus-button, .number-bond-2017 .minus-button, .number-bond-2017 .nb2017-part-icon { display: inline-block; } .number-bond-2017 .nb2017-part-icon { background-image: url("https://webassets.zearn.org/app_assets/tasks/number_bond_2017/numberBondPartIcon2.svg"); background-repeat: no-repeat; width: 19px; height: 31px; margin: 0 5px; } .number-bond-2017 .number-bond-parts-token .nbp-part-line.ghost { stroke: #808080; stroke-dasharray: 6; stroke-miterlimit: 10; } .number-bond-2017 .number-bond-parts-token .nbp-part-token-wrapper.ghost.small, .number-bond-2017 .number-bond-parts-token .nbp-part-token-wrapper.ghost.large { border: 2px dashed #808080; background: #e4e4e4; } .number-bond-2017 .number-bond-parts-token .nbp-part-token-wrapper.ghost .nbp-whole-part-token { display: none; } .number-grid-row { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .number-grid-row:first-child .number-grid-cell { border-top: 1px solid #b3b3b3; } .number-grid-cell { position: relative; font-size: 16px; width: 40px; height: 40px; line-height: 40px; display: inline-block; vertical-align: top; border-color: #b3b3b3; border-style: solid; border-width: 0px 1px 1px 0px; } .number-grid-cell:first-child { border-left-width: 1px; } .number-grid-input { position: absolute; left: 2px; font-size: 16px; width: 35px; height: 32px; margin: 4px 0; box-shadow: 0 0 5px 2px #fff088; } .axis-cell { background: #e1e1e1; font-weight: bold; font-size: 17px; } .active-task .number-grid-cell.val-cell { cursor: pointer; } .active-task .number-grid-cell.axis-cell.selectable { cursor: pointer; } .sieve-of-eratosthenes .number-grid-row.axis-row .axis-cell { background: url("https://webassets.zearn.org/app_assets/tasks/sieve/SieveColumnSelector.png") no-repeat center center; width: 40px; padding-bottom: 5px; font-size: 0; background-color: transparent; color: transparent; border: none; border-bottom: 1px solid #b3b3b3; } .sieve-of-eratosthenes .number-grid-row.val-row:nth-last-child(11) .val-cell:first-child { background: #e6e7e8; } .sieve-of-eratosthenes .val-cell.hover:not(.selected) { background: #dce1ef; opacity: 0.63; } .sieve-of-eratosthenes .val-cell.prime.permanent:not(.selected-disabled) { background: #fce139; } .sieve-of-eratosthenes .number-grid.prime-mode .val-cell.selected:not(.permanent):not(.selected-disabled) { background: #f9ca06; } .sieve-of-eratosthenes .number-grid-cell.selected:not(.selected-disabled) { color: white; background: #7a8ded; } .sieve-of-eratosthenes .number-grid-cell.permanent:not(.selected-disabled) { color: black; background: #c3cbe7; cursor: default; } .sieve-of-eratosthenes .number-grid-cell.missing { border: 4px solid #f75e00; line-height: 32px; } .sieve-of-eratosthenes .number-grid-incorrect { position: absolute; width: 32px; height: 4px; top: 17px; left: 3px; opacity: 0.63; background-color: #f75e00; } .sieve-of-eratosthenes .sieve-autocorrect-box { position: absolute; right: 5px; top: 175px; width: 200px; height: 120px; padding: 30px 15px; background-color: #e6e7e8; font-size: 22px; } .sieve-of-eratosthenes .sieve-autocorrect-box.large { height: 170px; top: 150px; } .sieve-of-eratosthenes .sieve-autocorrect-box .sieve-autocorrect-text { color: #f75e00; font-weight: bold; } .sieve-of-eratosthenes .sieve-autocorrect-box .sieve-autocorrect-subtext { color: #f75e00; font-size: 18px; } .sieve-of-eratosthenes .sieve-autocorrect-box .sieve-autocorrect-ok { position: absolute; right: 70px; bottom: 10px; width: 60px; background-color: #0097b6; font-size: 22px; } .times-table-chart .number-grid-cell.unselectable { color: #aaa; background: white; cursor: default; } .times-table-chart .number-grid-cell.selected { background: #fff088; } .times-table-chart .number-grid-cell.correct { color: white; background: #0fa566; } .times-table-chart .number-grid-cell.incorrect { color: #f75e00; background: white; } .times-table-chart .number-grid-cell.missing { color: #555; background: #9CD7B6; } .times-table-chart .number-grid-cell.hover { background: #FFF8C6; } .times-table-chart .number-grid-cell.hover-unselect { color: black; background: white; } .times-table-chart .number-grid-cell.permanent { color: white; background: #0fa566; cursor: default; } .times-table-chart .number-grid-cell.axis-cell.incorrect { color: #f75e00; background: #e1e1e1; } .times-table-chart .number-grid-cell.axis-cell.hover-unselect { color: black; background: #e1e1e1; } .times-table-chart .number-grid-cell.axis-cell.preselected { color: white; background: #0fa566; cursor: pointer; } .times-table-chart .number-grid-cell.axis-cell.preselected.hover, .times-table-chart .number-grid-cell.axis-cell.preselected.selected { color: black; background: #fff088; } .times-table-chart .number-grid-cell.axis-cell.preselected.hover-unselect { color: white; background: #0fa566; } .number-grid { position: relative; } .number-grid .number-grid-backdrop { display: none; position: absolute; top: 0; left: 50%; margin-left: -220px; width: 440px; height: 440px; background: black; opacity: 0.2; filter: alpha(opacity=20); } .parallel-line-annotation .geometry-pad .caret { pointer-events: none; } .parallel-line-annotation .geometry-pad .click-zone { stroke-width: 40px; stroke: rgba(0, 0, 0, 0); } .parallel-line-annotation.active-task .click-zone:not(.prepop) { cursor: pointer; } .parallel-line-annotation.active-task .maxed .click-zone:not(.prepop):not(.paired-zone) { cursor: default; } .protractor-angle-measurement-2017 .protractor-2017-button:not(.hide-show-button), .protractor-angle-creation-2017 .protractor-2017-button:not(.hide-show-button) { background-color: #007b94; color: white; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; z-index: 1; margin-left: 10px; } .protractor-angle-measurement-2017 .protractor-2017-button:not(.hide-show-button).disabled, .protractor-angle-measurement-2017 .protractor-2017-button:not(.hide-show-button):disabled, .protractor-angle-creation-2017 .protractor-2017-button:not(.hide-show-button).disabled, .protractor-angle-creation-2017 .protractor-2017-button:not(.hide-show-button):disabled { pointer-events: none; cursor: default; background-color: #cfdee6; } .protractor-angle-measurement-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled).hover, .protractor-angle-measurement-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled):hover, .protractor-angle-creation-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled).hover, .protractor-angle-creation-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled):hover { background-color: #005c73; } .protractor-angle-measurement-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled).active, .protractor-angle-measurement-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled):active, .protractor-angle-creation-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled).active, .protractor-angle-creation-2017 .protractor-2017-button:not(.hide-show-button):not(.disabled):active { background-color: #003e4d; } .protractor-angle-creation-2017 { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .protractor-angle-creation-2017 .ray-controls { position: relative; left: 0; z-index: 2; } .protractor-angle-creation-2017 .ray-controls span { display: inline-block; height: 42px; width: 42px; margin-right: 10px; } .protractor-angle-creation-2017 .ray-controls .ray-big-right { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/rotatearrow02.png"); } .protractor-angle-creation-2017 .ray-controls .ray-right { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/rotatearrow04.png"); } .protractor-angle-creation-2017 .ray-controls .ray-left { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/rotatearrow03.png"); } .protractor-angle-creation-2017 .ray-controls .ray-big-left { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/rotatearrow01.png"); } .protractor-angle-creation-2017 .protractor-area { display: inline-block; position: relative; vertical-align: top; margin: 100px 0 70px 0; } .protractor-angle-creation-2017 .protractor-area.correctable .protractor-img { z-index: 4; } .protractor-angle-creation-2017 .protractor-area.correctable .protractor-img::after { content: "?"; width: 40px; height: 40px; background: #ff4d76; border-radius: 20px; position: absolute; left: 183px; top: 183px; font-size: 20px; color: white; line-height: 40px; } .protractor-angle-creation-2017 .protractor-area.correctable { cursor: pointer; } .protractor-angle-creation-2017 .protractor-area.correctable:not(.autocorrect) .protractor-img::after { cursor: pointer; } .protractor-angle-creation-2017 .protractor-area .protractor-img { position: relative; z-index: 1; width: 406px; height: 406px; background-repeat: no-repeat; -webkit-transform-origin: 203px 203px; -moz-transform-origin: 203px 203px; -ms-transform-origin: 203px 203px; -o-transform-origin: 203px 203px; transform-origin: 203px 203px; margin: 0; } .protractor-angle-creation-2017 .protractor-area .protractor-img.p90 { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/90-active.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p90.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/90-inactive.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180 { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-active2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-inactive2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180.highlight { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-activehighlight2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_mirror { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-doubleactive2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_mirror.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-doubleinactive2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_mirror.highlight { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-doubleactivehighlight2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p360 { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/360-active2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p360.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/360-inactive2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p360.highlight { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/360-activehighlight2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p4_quadrants { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/4quadrants-active.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p4_quadrants.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/4quadrants-inactive.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p8_quadrants { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/8quadrants-active.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p8_quadrants.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/8quadrants-inactive.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_outer { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-outer-highlight-active2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_outer.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-outer-highlight2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_outer.highlight { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-outer-highlight-highlight2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_inner { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-inner-highlight-active2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_inner.inactive { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-inner-highlight2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_inner.highlight { background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor/180-inner-highlight-highlight2.svg"); } .protractor-angle-creation-2017 .protractor-area .protractor-img.p180, .protractor-angle-creation-2017 .protractor-area .protractor-img.p180_mirror { height: 216px; } .protractor-angle-creation-2017 .protractor-area .protractor-img.p90 { background-size: 206px; width: 203px; height: 206px; left: 203px; -webkit-transform-origin: 0 203px; -moz-transform-origin: 0 203px; -ms-transform-origin: 0 203px; -o-transform-origin: 0 203px; transform-origin: 0 203px; margin-right: 203px; } .protractor-angle-creation-2017 .protractor-area .ray-wrap { position: absolute; z-index: 3; top: 0; left: 0; } .protractor-angle-creation-2017 .protractor-area .ray { width: 284px; height: 30px; position: absolute; top: 188px; left: 203px; -webkit-transform-origin: 0px 15px; -moz-transform-origin: 0px 15px; -ms-transform-origin: 0px 15px; -o-transform-origin: 0px 15px; transform-origin: 0px 15px; } .protractor-angle-creation-2017 .protractor-area .ray path { fill: #303b40; } .protractor-angle-creation-2017 .protractor-area .ray.moveable, .protractor-angle-creation-2017 .protractor-area .ray.try-again { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/tasks/protractor_2017/rays3.svg"); background-size: 284px 120px; } .protractor-angle-creation-2017 .protractor-area .ray.moveable .inline-ray-svg, .protractor-angle-creation-2017 .protractor-area .ray.try-again .inline-ray-svg { display: none; } .protractor-angle-creation-2017 .protractor-area .ray.moveable { background-position: 0px -30px; } .protractor-angle-creation-2017 .protractor-area .ray.try-again { background-position: 0px -60px; } .protractor-angle-creation-2017 .protractor-area .ray.incorrect:not(.autocorrect-animation):not(.autocorrect) path { fill: #ff4d76; } .protractor-angle-creation-2017 .protractor-area .ray.correctable path { cursor: pointer; } .protractor-angle-creation-2017 .protractor-area .ray.incorrect.autocorrect-animation path { opacity: 0; -webkit-transition: all 500ms; -moz-transition: all 500ms; -ms-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .protractor-angle-creation-2017 .protractor-area .ray.incorrect.autocorrect path { opacity: 1; fill: black; -webkit-transition: all 1200ms; -moz-transition: all 1200ms; -ms-transition: all 1200ms; -o-transition: all 1200ms; transition: all 1200ms; } @-webkit-keyframes correctRay { 0%, 88% { fill: #00c372; } 100% { fill: #303b40; } } @-moz-keyframes correctRay { 0%, 88% { fill: #00c372; } 100% { fill: #303b40; } } @-o-keyframes correctRay { 0%, 88% { fill: #00c372; } 100% { fill: #303b40; } } @keyframes correctRay { 0%, 88% { fill: #00c372; } 100% { fill: #303b40; } } .protractor-angle-creation-2017 .protractor-area .ray.correct path { -webkit-animation: correctRay 1700ms linear; -moz-animation: correctRay 1700ms linear; -ms-animation: correctRay 1700ms linear; -o-animation: correctRay 1700ms linear; animation: correctRay 1700ms linear; } .protractor-angle-creation-2017 .protractor-area .ray-dot { position: absolute; width: 10px; height: 10px; background: #354359; top: 198px; left: 198px; border-radius: 10px; } .protractor-angle-creation-2017 .geometry-pad { position: absolute; z-index: 2; top: -24px; left: -24px; padding: 0; width: 454px; height: 454px; -webkit-transform-origin: 227px 227px; -moz-transform-origin: 227px 227px; -ms-transform-origin: 227px 227px; -o-transform-origin: 227px 227px; transform-origin: 227px 227px; } .protractor-angle-creation-2017 .geometry-pad.p180, .protractor-angle-creation-2017 .geometry-pad.p180_mirror { height: 240px; } .protractor-angle-creation-2017 .geometry-pad.p90 { width: 227px; height: 227px; left: 227px; -webkit-transform-origin: 0 227px; -moz-transform-origin: 0 227px; -ms-transform-origin: 0 227px; -o-transform-origin: 0 227px; transform-origin: 0 227px; } .protractor-angle-creation-2017 .geometry-pad .geometry-canvas { width: 100%; height: 100%; } .protractor-angle-creation-2017 .geometry-pad .geometry-canvas .geometry-arc { stroke: #303b40; stroke-width: 3px; } .protractor-angle-creation-2017 .geometry-pad .geometry-canvas .circular-sector { opacity: 0; } @-webkit-keyframes circularSectorFadeout { 0%, 88% { opacity: 0.3; } 100% { opacity: 0; } } @-moz-keyframes circularSectorFadeout { 0%, 88% { opacity: 0.3; } 100% { opacity: 0; } } @-o-keyframes circularSectorFadeout { 0%, 88% { opacity: 0.3; } 100% { opacity: 0; } } @keyframes circularSectorFadeout { 0%, 88% { opacity: 0.3; } 100% { opacity: 0; } } @-webkit-keyframes correctStrokeFadeout { 0%, 88% { stroke: #00c372; } 100% { stroke: #303b40; } } @-moz-keyframes correctStrokeFadeout { 0%, 88% { stroke: #00c372; } 100% { stroke: #303b40; } } @-o-keyframes correctStrokeFadeout { 0%, 88% { stroke: #00c372; } 100% { stroke: #303b40; } } @keyframes correctStrokeFadeout { 0%, 88% { stroke: #00c372; } 100% { stroke: #303b40; } } .protractor-angle-creation-2017 .geometry-pad.correct .geometry-canvas .circular-sector { -webkit-animation: circularSectorFadeout 1700ms linear; -moz-animation: circularSectorFadeout 1700ms linear; -ms-animation: circularSectorFadeout 1700ms linear; -o-animation: circularSectorFadeout 1700ms linear; animation: circularSectorFadeout 1700ms linear; fill: #ccffd9; } .protractor-angle-creation-2017 .geometry-pad.correct .geometry-canvas .geometry-arc { stroke: #303b40; -webkit-animation: correctStrokeFadeout 1700ms linear; -moz-animation: correctStrokeFadeout 1700ms linear; -ms-animation: correctStrokeFadeout 1700ms linear; -o-animation: correctStrokeFadeout 1700ms linear; animation: correctStrokeFadeout 1700ms linear; } .protractor-angle-creation-2017 .geometry-pad.incorrect:not(.correctable):not(.autocorrect-animation):not(.autocorrect) .geometry-canvas .circular-sector { fill: #fea5ba; opacity: 0.3; } .protractor-angle-creation-2017 .geometry-pad.incorrect:not(.correctable):not(.autocorrect-animation):not(.autocorrect) .geometry-canvas .geometry-arc { opacity: 0; } .protractor-angle-creation-2017 .geometry-pad.incorrect.correctable .geometry-canvas .circular-sector { fill: #fea5ba; opacity: 0.3; } .protractor-angle-creation-2017 .geometry-pad.incorrect.correctable .geometry-canvas .geometry-arc { opacity: 0; } .protractor-angle-creation-2017 .geometry-pad.incorrect.autocorrect-animation .geometry-canvas .circular-sector { opacity: 0; -webkit-transition: all 500ms; -moz-transition: all 500ms; -ms-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; } .protractor-angle-creation-2017 .geometry-pad.incorrect.autocorrect-animation .geometry-canvas .geometry-arc { opacity: 0; } .protractor-angle-creation-2017 .geometry-pad.incorrect.autocorrect .geometry-canvas .circular-sector { opacity: 0; } .protractor-angle-creation-2017 .geometry-pad.incorrect.autocorrect .geometry-canvas .geometry-arc { opacity: 1; -webkit-transition: all 1200ms; -moz-transition: all 1200ms; -ms-transition: all 1200ms; -o-transition: all 1200ms; transition: all 1200ms; } .protractor-angle-creation-2017 .geometry-pad.incorrect:not(.correctable):not(.autocorrect):not(.autocorrect-animation) .geometry-canvas { -webkit-animation: circularSectorFadeout 1700ms linear; -moz-animation: circularSectorFadeout 1700ms linear; -ms-animation: circularSectorFadeout 1700ms linear; -o-animation: circularSectorFadeout 1700ms linear; animation: circularSectorFadeout 1700ms linear; } .protractor-angle-creation-2017.active-task.moveable .ray-controls span { cursor: pointer; } .protractor-angle-creation-2017.active-task.moveable .protractor-area .ray.moveable, .protractor-angle-creation-2017.active-task.moveable .protractor-area .ray.try-again { cursor: pointer; } .protractor-angle-creation-2017.active-task.moveable .geometry-pad .geometry-canvas .geometry-arc { stroke: #007b94; } .protractor-angle-creation-2017.active-task.moveable .geometry-pad.try-again .geometry-canvas .circular-sector { fill: #fea5ba; opacity: 0.3; } .protractor-angle-creation-2017.active-task.moveable .geometry-pad.try-again .geometry-canvas .geometry-arc { stroke: #ff4d76; } .right-angle-annotation .geometry-pad .angle-group .click-zone { fill: transparent; } .right-angle-annotation .geometry-pad .angle-group .right-angle-line, .right-angle-annotation .geometry-pad .angle-group .edge-line { display: none; stroke: #000; stroke-width: 4px; } .right-angle-annotation .geometry-pad .angle-group .edge-line { stroke-width: 4px; } .right-angle-annotation .geometry-pad .angle-group.selected .right-angle-line, .right-angle-annotation .geometry-pad .angle-group.selected .edge-line, .right-angle-annotation .geometry-pad .angle-group.prepop .right-angle-line, .right-angle-annotation .geometry-pad .angle-group.prepop .edge-line { display: block; } .right-angle-annotation .geometry-pad .angle-group.selected .right-angle-line, .right-angle-annotation .geometry-pad .angle-group.selected .edge-line { stroke: #156abb; } .right-angle-annotation.active-task .geometry-pad .angle-group:not(.prepop) .click-zone { cursor: pointer; } .right-angle-annotation.active-task .geometry-pad .angle-group:not(.prepop).hover:not(.selected):not(.prepop) .right-angle-line, .right-angle-annotation.active-task .geometry-pad .angle-group:not(.prepop).hover:not(.selected):not(.prepop) .edge-line { display: block; stroke: #0097b6; } .right-angle-annotation.active-task .geometry-pad.max-selected .angle-group:not(.selected) .click-zone { cursor: default; } .super-label-a-product.super-label-a-thing .tiles-repo { margin-top: 20px; font-family: Oxygen, Verdana, Geneva, sans-serif; } .super-label-a-product.super-label-a-thing .tile-destination-slot { margin-left: 10px; } .super-label-a-product.super-label-a-thing .correct-answer { text-align: left; font-size: 20px; } .super-label-a-thing .tile { display: flex; justify-content: center; align-items: center; padding: 7px 9px 9px 9px; z-index: 3; white-space: nowrap; border-radius: 4px; box-shadow: 0 0 5px 0 #4d4d4d; position: relative; background-color: white; cursor: pointer; font-weight: 400; } .super-label-a-thing .tile .token { white-space: nowrap; } .super-label-a-thing .tile.hidden { display: none; } .super-label-a-thing .tile.incorrect.correctable, .super-label-a-thing .tile.incorrect-tile.correctable { -webkit-animation: multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white 200ms linear; -moz-animation: multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white 200ms linear; -ms-animation: multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white 200ms linear; -o-animation: multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white 200ms linear; animation: multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white { 0% { background-color: white; box-shadow: inset 0 0 0 4px #0097b6; color: black; } 100% { background-color: #ff4d76; box-shadow: none; color: white; } } @-moz-keyframes multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white { 0% { background-color: white; box-shadow: inset 0 0 0 4px #0097b6; color: black; } 100% { background-color: #ff4d76; box-shadow: none; color: white; } } @-o-keyframes multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white { 0% { background-color: white; box-shadow: inset 0 0 0 4px #0097b6; color: black; } 100% { background-color: #ff4d76; box-shadow: none; color: white; } } @keyframes multi-animation-animation-background-color-white-ff4d76-animation-box-shadow-inset_0_0_0_4px_0097b6-none-animation-color-black-white { 0% { background-color: white; box-shadow: inset 0 0 0 4px #0097b6; color: black; } 100% { background-color: #ff4d76; box-shadow: none; color: white; } } .super-label-a-thing .tile.ghost { position: absolute; top: 0; left: 0; width: 100%; opacity: 0.3; z-index: 1; cursor: default; } .super-label-a-thing .tile.underneath { position: absolute; background-color: white; cursor: default; } .super-label-a-thing .tile.correct-answer { white-space: nowrap; border-radius: 3px; box-shadow: none; background-color: transparent; } .super-label-a-thing .tile.correct-answer.hidden { display: none; } .super-label-a-thing .tile.impression { background-color: #e4e4e4; box-shadow: none; color: #b3b3b3; cursor: default; } .super-label-a-thing .destination-box .tile:not(.hidden) { line-height: normal; text-align: center; } .super-label-a-thing .destination-box .tile:not(.hidden).prepopulated { background-color: transparent; box-shadow: none; } .super-label-a-thing .destination-box .tile:not(.hidden) .token { white-space: nowrap; } .super-label-a-thing .destination-box .tile:not(.hidden) .token .token { white-space: normal; } .super-label-a-thing .destination-box .tile:not(.hidden) .nowrap-bundle { display: inline-block; } .super-label-a-thing .tile-destination-slot { display: flex; position: relative; } .super-label-a-thing .tile-destination-slot .tile { flex-grow: 1; box-shadow: 0 0 5px 0 #4d4d4d, inset 0 0 0 2px #0097b6; } .super-label-a-thing .tile-destination-slot .tile.autocorrected { background-color: transparent; border-color: transparent; box-shadow: none; } .super-label-a-thing .tile-destination-slot .tile.correctable .token-text { color: white; } .super-label-a-thing .tile-destination-slot:not(.prepopulated):not(.autocorrected) .tile.try-again { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; cursor: pointer; transition: 1s; } .super-label-a-thing .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect-no-autocorrect .tile, .super-label-a-thing .tile-destination-slot:not(.prepopulated):not(.autocorrected).incorrect:not(.correctable) .tile { cursor: default; -webkit-animation: multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 { 0% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 83% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 100% { background-color: transparent; box-shadow: none; color: #ff4d76; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 { 0% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 83% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 100% { background-color: transparent; box-shadow: none; color: #ff4d76; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 { 0% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 83% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 100% { background-color: transparent; box-shadow: none; color: #ff4d76; } } @keyframes multi-animation-animation-background-color-ffe6ee-transparent-animation-box-shadow-inset_0_0_0_4px_ff4d76-none-animation-color-black-ff4d76 { 0% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 83% { background-color: #ffe6ee; box-shadow: inset 0 0 0 4px #ff4d76; color: black; } 100% { background-color: transparent; box-shadow: none; color: #ff4d76; } } .super-label-a-thing .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct .tile, .super-label-a-thing .tile-destination-slot:not(.prepopulated):not(.autocorrected).correct-tile .tile { -webkit-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none 1200ms linear; -moz-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none 1200ms linear; -ms-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none 1200ms linear; -o-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none 1200ms linear; animation: multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none { 0% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 83% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 100% { background-color: transparent; box-shadow: none; } } @-moz-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none { 0% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 83% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 100% { background-color: transparent; box-shadow: none; } } @-o-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none { 0% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 83% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 100% { background-color: transparent; box-shadow: none; } } @keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-box-shadow-inset_0_0_0_4px_00c372-none { 0% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 83% { background-color: #ccffd9; box-shadow: inset 0 0 0 4px #00c372; } 100% { background-color: transparent; box-shadow: none; } } .super-label-a-thing .tile-destination-slot:not(.prepopulated):not(.autocorrected).disabled { box-shadow: none; cursor: default; } .super-label-a-thing .tile-destination-slot .hidden, .super-label-a-thing .tile-destination-slot .tile.hidden { display: none; } .super-label-a-thing:not(.touch) .tile:not(.underneath):not(.impression):not(.incorrect):not(.disabled):not(.prepopulated):not(.correctable):not(.try-again):not(.correct-tile):not(.correct):not(.ghost):not(.underneath):hover { box-shadow: 0 0 5px 0 #4d4d4d, inset 0 0 0 4px #0097b6; } .super-label-a-thing:not(.touch) .smooth-dnd-ghost .tile { box-shadow: 0 0 5px 0 #4d4d4d, inset 0 0 0 4px #0097b6; } .super-label-a-thing:not(.touch) .tile:not(.underneath):not(.impression):not(.inncorrect):not(.disabled):not(.prepopulated):not(.correct-tile):not(.correct):not(.ghost):not(.underneath) { cursor: pointer; } .super-label-a-thing:not(.touch) .tiles-repo.disable-hover, .super-label-a-thing:not(.touch) .tile:hover { cursor: default; } .super-label-a-thing .tiles-repo .tile-origin-slot { display: inline-block; vertical-align: middle; margin: 3px; position: relative; box-sizing: border-box; } .super-label-a-thing .sortable-ghost { display: none; } .super-label-a-thing .tile-destination-slot { border-radius: 4px; } .super-label-a-thing .tile-destination-slot.active { box-shadow: inset 0 0 0 4px #0097b6; background-color: #f3fdff; } .super-label-a-thing .tile-destination-slot.active .tile { box-shadow: 0 0 5px 0 #4d4d4d, inset 0 0 0 4px #0097b6; } .super-label-a-thing:not(.touch) .tile-destination-slot:not(.prepopulated):not(.autocorrected):not(.disabled):not(.active):not(.incorrect-tile):not(.incorrect):not(.correct-tile):not(.correct) { cursor: pointer; } .super-label-a-thing .tile-destination-slot:not(.correct-tile):not(.ui-droppable-disabled):not(.prepopulated):not(.autocorrected):not(.correct):not(.active):not(.disabled) { box-shadow: inset 0 0 0 2px #808080; background-color: #f3fdff; } .super-label-a-thing .tile-destination-slot:not(.correct-tile):not(.ui-droppable-disabled):not(.prepopulated):not(.autocorrected):not(.correct):not(.active):not(.disabled):not(.filled):hover { box-shadow: inset 0 0 0 4px #808080; background-color: #ccffff; } .super-label-a-thing .tile-destination-slot:not(.correct-tile):not(.ui-droppable-disabled):not(.prepopulated):not(.autocorrected):not(.correct).jiggle { -webkit-animation: jiggle 250ms ease-in-out infinite; -moz-animation: jiggle 250ms ease-in-out infinite; -ms-animation: jiggle 250ms ease-in-out infinite; -o-animation: jiggle 250ms ease-in-out infinite; animation: jiggle 250ms ease-in-out infinite; } .super-label-a-thing .tile-destination-slot.autocorrected { background-color: transparent; border-color: transparent; } .super-label-a-thing.super-label-a-sentence .tile-destination-slot, .super-label-a-thing.super-label-an-expression .tile-destination-slot { display: inline-flex; margin-bottom: 1px; vertical-align: middle; position: relative; } .super-label-a-thing .tiles-repo .tile-origin-slot { display: inline-block; vertical-align: middle; margin: 3px; position: relative; box-sizing: border-box; } .super-label-a-thing .tiles-repo { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; min-height: 80px; padding: 10px 0; margin: 0 auto; } .super-label-a-thing .tiles-repo.hidden-repo { opacity: 0; transition: 1s; } .super-label-a-thing .image-place .tile:not(.hidden), .super-label-a-thing .destination-box .tile:not(.hidden) { line-height: normal; } .super-label-a-thing .image-place .tile:not(.hidden).prepopulated, .super-label-a-thing .destination-box .tile:not(.hidden).prepopulated { box-shadow: none; } .super-label-a-thing .tile img { pointer-events: none; } .super-label-a-thing .correct-answer { display: flex; justify-content: center; align-items: center; white-space: nowrap; border-radius: 3px; vertical-align: middle; border-color: transparent; background-color: transparent; } .super-label-a-thing .correct-answer.hidden { display: none; } .super-label-a-thing .inline-number-bond .part1-node .token.token-text, .super-label-a-thing .inline-number-bond .part2-node .token.token-text { line-height: 7px; } .super-label-a-thing .inline-number-bond .part1-node .token.fraction, .super-label-a-thing .inline-number-bond .part2-node .token.fraction { margin-bottom: 3px; } .super-label-a-thing .inline-number-bond .part1-node .token.fraction .token-text, .super-label-a-thing .inline-number-bond .part2-node .token.fraction .token-text { line-height: normal; } .super-label-a-thing:not(.touch).active.task .tiles-repo.disable-hover, .super-label-a-thing:not(.touch).active-task .tiles-repo.disable-hover { cursor: default; } .super-label-a-thing .arrow-way-jump .token-text { line-height: 75px; } .super-label-a-thing .arrow-way-jump .token .token-text { line-height: normal; } .super-label-an-image { font-size: 16px; } .super-label-an-image .slai-tile-slot-wrapper, .super-label-an-image .prepop-label { position: absolute; } .super-label-an-image .prepop-label { transform: translate(-50%, 50%); } .super-label-an-image .has-image .tile { padding: 5px; line-height: 0; } .super-label-an-image .image-place .image-background { position: relative; display: inline-block; } .super-label-an-image .destination-box { height: 0; } body:not(.g6plus):not(.grade-k) .super-label-a-sentence, body:not(.g6plus):not(.grade-k) .super-label-an-expression { font-size: 25px; } body.g6plus .super-label-a-sentence, body.g6plus .super-label-an-expression { font-size: 24px; } body.grade-k .super-label-a-sentence, body.grade-k .super-label-an-expression { font-size: 25px; } .super-label-a-sentence .destination-box, .super-label-an-expression .destination-box { margin: 8px 0; } .super-label-a-sentence .destination-box .vert-number-line-token-nowrap, .super-label-an-expression .destination-box .vert-number-line-token-nowrap { display: inline-block; } .super-label-a-sentence .destination-box .nowrap-bundle, .super-label-an-expression .destination-box .nowrap-bundle { display: inline; } .super-label-a-sentence .destination-box .nowrap-bundle .trailer:empty, .super-label-an-expression .destination-box .nowrap-bundle .trailer:empty { display: none; } .super-label-a-sentence .destination-box .fraction.token, .super-label-an-expression .destination-box .fraction.token { line-height: initial; } .super-label-a-sentence .destination-box { display: inline-block; } .super-label-a-sentence .destination-box-inner { display: inline; } .super-matching-slot { position: relative; min-height: 60px; min-width: 150px; } .super-matching-slot.top { border-radius: 8px 8px 0 0; } .super-matching-slot.top .slot-wrapper .item-wrapper .item { border-radius: 8px 8px 0 0; border-bottom-width: 0; } .super-matching-slot.right { border-radius: 0 8px 8px 0; } .super-matching-slot.right .match, .super-matching-slot.right .slot-button { border-radius: 0 8px 8px 0; } .super-matching-slot.bottom { border-radius: 0 0 8px 8px; } .super-matching-slot.bottom .match, .super-matching-slot.bottom .slot-button { border-radius: 0 0 8px 8px; } .super-matching-slot.left { border-radius: 8px 0 0 8px; } .super-matching-slot.left .slot-wrapper .item-wrapper .item { border-radius: 8px 0 0 8px; border-right-width: 0; } .super-matching-slot.match-pair-item-slot, .super-matching-slot.match-pair-match-slot { background-color: white; color: #808080; } .super-matching-slot.match-pair-item-slot.faded, .super-matching-slot.match-pair-match-slot.faded { opacity: 0.3; } .super-matching-slot.match-pair-item-slot.hidden, .super-matching-slot.match-pair-match-slot.hidden { visibility: hidden; } .super-matching-slot.match-pair-item-slot.left.selected .item, .super-matching-slot.match-pair-item-slot.top.selected .item { border: 6px solid #007b94; padding: 6px; } .super-matching-slot.match-pair-item-slot.left.hovered.active:not(.selected) .item, .super-matching-slot.match-pair-item-slot.top.hovered.active:not(.selected) .item { border: 4px solid #005c73; padding: 8px; } .super-matching-slot.match-pair-item-slot.selected.top .item, .super-matching-slot.match-pair-item-slot.hovered.active:not(.selected).top .item { border-bottom-width: 0; padding-bottom: 10px; } .super-matching-slot.match-pair-item-slot.selected.left .item, .super-matching-slot.match-pair-item-slot.hovered.active:not(.selected).left .item { border-right-width: 0; padding-right: 10px; } .super-matching-slot.match-pair-match-slot::before { content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; box-sizing: inherit; border-radius: inherit; z-index: 1; pointer-events: none; } .super-matching-slot.match-pair-match-slot.active { background-color: #f3fdff; } .super-matching-slot.match-pair-match-slot.active::before { border: 2px dashed #007b94; } .super-matching-slot.match-pair-match-slot.selected::before { border: 6px solid #007b94; } .super-matching-slot.match-pair-match-slot.hovered.active:not(.selected)::before { border: 4px solid #005c73; } .super-matching-slot.match-pair-match-slot.faded::before { border: 2px solid; } .super-matching-slot.match-pair-match-slot.shadowed::before { box-shadow: inset 0 0 0 5px rgba(0, 151, 182, 0.4); } .super-matching-slot.match-pair-match-slot.try-again, .super-matching-slot.match-pair-match-slot.correctable { -webkit-animation: pulseunr8z0m 4600ms ease-in-out 0ms infinite; -moz-animation: pulseunr8z0m 4600ms ease-in-out 0ms infinite; -ms-animation: pulseunr8z0m 4600ms ease-in-out 0ms infinite; -o-animation: pulseunr8z0m 4600ms ease-in-out 0ms infinite; animation: pulseunr8z0m 4600ms ease-in-out 0ms infinite; z-index: 1; } @keyframes pulseunr8z0m { 43.4782608696% { transform: scale(1); } 50% { transform: scale(1.1); } 56.5217391304% { transform: scale(1); } } .super-matching-slot.match-slot:not(.selected) { background-color: #e4e4e4; color: #e4e4e4; } .super-matching-slot.match-slot:not(.selected) .match.active { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.25); } .super-matching-slot.match-slot:not(.selected).hovered .match.active { border: 4px solid #005c73; padding: 8px; } .super-matching-slot.match-slot.selected .match.active { border: 6px solid #007b94; padding: 6px; } .super-matching-slot .slot-wrapper { height: 100%; width: 100%; } .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button { position: absolute; top: 0; left: 0; height: 100%; width: 100%; cursor: pointer; } .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.select-slot-button, .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.try-again-button { background-color: transparent; } .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.select-slot-button:hover, .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.select-slot-button:focus, .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.select-slot-button:active, .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.try-again-button:hover, .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.try-again-button:focus, .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.try-again-button:active { background-color: transparent; } .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.mouse-disabled { pointer-events: none; } .super-matching-slot .slot-wrapper button.slot-button.manipulatives-button.autocorrect-button { font-size: 15px; z-index: 2; } .super-matching-slot .slot-wrapper .item-wrapper, .super-matching-slot .slot-wrapper .match-wrapper, .super-matching-slot .slot-wrapper .item, .super-matching-slot .slot-wrapper .match { height: 100%; width: 100%; } .super-matching-slot .slot-wrapper .item-wrapper, .super-matching-slot .slot-wrapper .match-wrapper { display: flex; overflow: visible; } .super-matching-slot .slot-wrapper .item-wrapper .item, .super-matching-slot .slot-wrapper .item-wrapper .match, .super-matching-slot .slot-wrapper .match-wrapper .item, .super-matching-slot .slot-wrapper .match-wrapper .match { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: white; border: 2px solid; padding: 10px; color: #808080; } .super-matching-slot .slot-wrapper .item-wrapper .item.active, .super-matching-slot .slot-wrapper .item-wrapper .match.active, .super-matching-slot .slot-wrapper .match-wrapper .item.active, .super-matching-slot .slot-wrapper .match-wrapper .match.active { cursor: pointer; color: #007b94; } .super-matching-slot .slot-wrapper .item-wrapper .item.correct, .super-matching-slot .slot-wrapper .item-wrapper .match.correct, .super-matching-slot .slot-wrapper .match-wrapper .item.correct, .super-matching-slot .slot-wrapper .match-wrapper .match.correct { -webkit-animation: multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white 1200ms linear; -moz-animation: multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white 1200ms linear; -ms-animation: multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white 1200ms linear; -o-animation: multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white 1200ms linear; animation: multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white { 0% { color: #00c372; background: #f1fff4; } 83% { color: #00c372; background: #f1fff4; } 100% { color: #808080; background: white; } } @-moz-keyframes multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white { 0% { color: #00c372; background: #f1fff4; } 83% { color: #00c372; background: #f1fff4; } 100% { color: #808080; background: white; } } @-o-keyframes multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white { 0% { color: #00c372; background: #f1fff4; } 83% { color: #00c372; background: #f1fff4; } 100% { color: #808080; background: white; } } @keyframes multi-animation-animation-color-00c372-808080-animation-background-f1fff4-white { 0% { color: #00c372; background: #f1fff4; } 83% { color: #00c372; background: #f1fff4; } 100% { color: #808080; background: white; } } .super-matching-slot .slot-wrapper .item-wrapper .item.try-again, .super-matching-slot .slot-wrapper .item-wrapper .item.incorrect, .super-matching-slot .slot-wrapper .item-wrapper .item.correctable, .super-matching-slot .slot-wrapper .item-wrapper .match.try-again, .super-matching-slot .slot-wrapper .item-wrapper .match.incorrect, .super-matching-slot .slot-wrapper .item-wrapper .match.correctable, .super-matching-slot .slot-wrapper .match-wrapper .item.try-again, .super-matching-slot .slot-wrapper .match-wrapper .item.incorrect, .super-matching-slot .slot-wrapper .match-wrapper .item.correctable, .super-matching-slot .slot-wrapper .match-wrapper .match.try-again, .super-matching-slot .slot-wrapper .match-wrapper .match.incorrect, .super-matching-slot .slot-wrapper .match-wrapper .match.correctable { color: #ff0d5e; } .super-matching-slot .slot-wrapper .item-wrapper .item.try-again, .super-matching-slot .slot-wrapper .item-wrapper .match.try-again, .super-matching-slot .slot-wrapper .match-wrapper .item.try-again, .super-matching-slot .slot-wrapper .match-wrapper .match.try-again { background: #fff3f7; } .super-matching-slot .slot-wrapper .item-wrapper .item.incorrect, .super-matching-slot .slot-wrapper .item-wrapper .match.incorrect, .super-matching-slot .slot-wrapper .match-wrapper .item.incorrect, .super-matching-slot .slot-wrapper .match-wrapper .match.incorrect { -webkit-animation: animation-background-fff3f7-white 1200ms linear; -moz-animation: animation-background-fff3f7-white 1200ms linear; -ms-animation: animation-background-fff3f7-white 1200ms linear; -o-animation: animation-background-fff3f7-white 1200ms linear; animation: animation-background-fff3f7-white 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-fff3f7-white { 0% { background: #fff3f7; } 83% { background: #fff3f7; } 100% { background: white; } } @-moz-keyframes animation-background-fff3f7-white { 0% { background: #fff3f7; } 83% { background: #fff3f7; } 100% { background: white; } } @-o-keyframes animation-background-fff3f7-white { 0% { background: #fff3f7; } 83% { background: #fff3f7; } 100% { background: white; } } @keyframes animation-background-fff3f7-white { 0% { background: #fff3f7; } 83% { background: #fff3f7; } 100% { background: white; } } .super-matching-slot .slot-wrapper .item-wrapper .item .item-image, .super-matching-slot .slot-wrapper .item-wrapper .item .match-image, .super-matching-slot .slot-wrapper .item-wrapper .match .item-image, .super-matching-slot .slot-wrapper .item-wrapper .match .match-image, .super-matching-slot .slot-wrapper .match-wrapper .item .item-image, .super-matching-slot .slot-wrapper .match-wrapper .item .match-image, .super-matching-slot .slot-wrapper .match-wrapper .match .item-image, .super-matching-slot .slot-wrapper .match-wrapper .match .match-image { pointer-events: none; max-width: 100%; } .super-matching-slot .slot-wrapper .item-wrapper .item .item-label, .super-matching-slot .slot-wrapper .item-wrapper .item .match-label, .super-matching-slot .slot-wrapper .item-wrapper .match .item-label, .super-matching-slot .slot-wrapper .item-wrapper .match .match-label, .super-matching-slot .slot-wrapper .match-wrapper .item .item-label, .super-matching-slot .slot-wrapper .match-wrapper .item .match-label, .super-matching-slot .slot-wrapper .match-wrapper .match .item-label, .super-matching-slot .slot-wrapper .match-wrapper .match .match-label { color: black; } .super-matching-slot .slot-wrapper .item-wrapper .item .item-label img, .super-matching-slot .slot-wrapper .item-wrapper .item .match-label img, .super-matching-slot .slot-wrapper .item-wrapper .match .item-label img, .super-matching-slot .slot-wrapper .item-wrapper .match .match-label img, .super-matching-slot .slot-wrapper .match-wrapper .item .item-label img, .super-matching-slot .slot-wrapper .match-wrapper .item .match-label img, .super-matching-slot .slot-wrapper .match-wrapper .match .item-label img, .super-matching-slot .slot-wrapper .match-wrapper .match .match-label img { max-width: 100%; } .super-matching-slot .slot-wrapper .match-wrapper.animating { position: relative; z-index: 3; } .video-task button.continue { margin-top: 30px; width: 200px; } .try-again-overlay { display: none; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background-color: white; opacity: 0.93; z-index: 10; } .try-again-container { display: none; z-index: 11; position: absolute; width: 700px; left: 50%; margin-left: -350px; top: 50%; margin-top: -35px; font-size: 22px; font-weight: bold; color: #004080; cursor: pointer; } .try-again-message { vertical-align: middle; display: inline-block; } .try-again-icon { width: 70px; height: 70px; display: inline-block; vertical-align: middle; background: url("https://webassets.zearn.org/assets/try_again.png"); } .empty .try-again-icon { background: url("https://webassets.zearn.org/assets/feedback_incorrect.png"); width: 45px; height: 45px; } .number-sense-activity.vue { margin: 0 auto; height: 590px; width: 1024px; } .activity-complete-buttons .activity-complete-buttons-area { margin-left: auto; margin-right: auto; margin-top: 200px; } .activity-complete-buttons .activity-complete-buttons-area .zearn-button { border-radius: 30px; text-transform: uppercase; font-weight: 700; font-size: 18px; } .activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn { vertical-align: top; width: 185px; padding: 10px 25px 10px 65px; color: #757575; background-color: #e1e1e1; position: relative; } .activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn .love-it-img { position: absolute; top: 10px; left: 25px; width: 28px; height: 27px; background-image: url("https://webassets.zearn.org/app_assets/general/activity/heart-gray.png"); background-repeat: no-repeat; } .activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn .love-it-img.selected { background-image: url("https://webassets.zearn.org/app_assets/general/activity/heart-red.png"); } .activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn { display: inline-block; width: 148px; padding: 10px 45px; color: #fff; } .activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn.disabled { background-color: #b3b3b3; border-color: #b3b3b3; color: #4d4d4d; pointer-events: none; } .activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn:hover { box-shadow: 0px 1px 3px 1px #cccccc; } .activity-complete-buttons .activity-complete-buttons-area .done-area { vertical-align: top; margin-left: 70px; text-align: center; display: inline-block; } .activity-complete-buttons .activity-complete-buttons-area .done-area .saving-message { width: 148px; font-size: 13px; } .rotate-manipulative-button { background-color: #007b94; color: white; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: scaleX(1); transition: transform 300ms; } .rotate-manipulative-button.disabled, .rotate-manipulative-button:disabled { pointer-events: none; cursor: default; background-color: #cfdee6; } .rotate-manipulative-button:not(.disabled).hover, .rotate-manipulative-button:not(.disabled):hover { background-color: #005c73; } .rotate-manipulative-button:not(.disabled).active, .rotate-manipulative-button:not(.disabled):active { background-color: #003e4d; } .rotate-manipulative-button.reverse { transform: scaleX(-1); } .array-2017-widget { display: block; position: relative; } .array-2017-widget .array-col-button-wrapper { position: absolute; height: 30px; top: -30px; } .array-2017-widget .array-row-button-wrapper { position: absolute; width: 30px; left: -30px; } .array-2017-widget .array-button { position: absolute; } .array-2017-widget .array-button:active:enabled { position: absolute; } .array-2017-widget .array-button.transparent { opacity: 0; } .array-2017-widget .array-col-add, .array-2017-widget .array-col-subtract { bottom: 2px; } .array-2017-widget .array-col-add:active:enabled, .array-2017-widget .array-col-subtract:active:enabled { position: absolute; top: auto; } .array-2017-widget .array-row-add, .array-2017-widget .array-row-subtract { right: 2px; } .array-2017-widget .array-grid-wrapper { position: relative; display: inline-block; vertical-align: top; } .array-2017-widget .array-grid-wrapper.discs .slot-item { display: inline-block; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; margin: 3px; border: 3px solid transparent; } .array-2017-widget .array-grid-wrapper.discs .slot-item.hidden { display: none; } .array-2017-widget .array-grid-wrapper.discs .slot-item.selected { border-color: #0097b6; } .array-2017-widget .array-grid-wrapper.discs .slot-item.ghost { border: 3px dotted #999999; background-color: rgba(153, 153, 153, 0.4); } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost) { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.58); } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).thousandths { background-color: #77cc00; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).hundredths { background-color: #136fcb; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).tenths { background-color: #ee589e; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).ones { background-color: #b7a993; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).tens { background-color: #ea2429; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).hundreds { background-color: #eb731c; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).thousands { background-color: #eebc1c; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).tenthousands { background-color: #31b643; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).hundredthousands { background-color: #67aad3; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).millions { background-color: #7a00c9; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).orange { background-image: url("https://webassets.zearn.org/app_assets/tasks/discs/disc_orange.png"); } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).purple { background-image: url("https://webassets.zearn.org/app_assets/tasks/discs/disc_purple.png"); } .array-2017-widget .array-grid-wrapper.discs.has-discs-num .slot-item:not(.ghost)::before { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; width: 100%; height: 100%; font-size: 12px; font-weight: bold; color: white; } .array-2017-widget .array-grid-wrapper.discs.has-discs-num .slot-item:not(.ghost).ones::before { content: "1"; } .array-2017-widget .array-grid-wrapper.discs.has-discs-num .slot-item:not(.ghost).tens::before { content: "10"; } .array-2017-widget .array-grid-wrapper.discs.has-discs-num .slot-item:not(.ghost).hundreds::before { content: "100"; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost) { background-color: #7029a5; width: 26px; height: 26px; margin: 0; border: 0; background-size: 26px 26px; } .array-2017-widget .array-grid-wrapper.discs .slot-item:not(.ghost).with-image { background-color: transparent; box-shadow: none; border-radius: 0; } .array-2017-widget .array-grid { display: table; border-collapse: collapse; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .array-2017-widget .array-grid.rotate { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .array-2017-widget .array-grid-row { display: table-row; } .array-2017-widget .array-grid-row.with-lines:not(:last-of-type) { border-bottom: 5px solid #0c91cc; } .array-2017-widget .array-grid-cell { display: table-cell; width: 34px; height: 34px; } .array-2017-widget .array-grid-cell.with-lines:not(:last-child) { border-right: 5px solid #0c91cc; } .array-2017-widget .array-grid-cell .array-grid-cell-inner { position: relative; width: 34px; height: 34px; } .array-2017-widget .array-grid-cell.sectioned, .array-2017-widget .array-grid-cell.filled.sectioned { background-color: #c1d8ed; } .array-2017-widget .array-grid-cell .array-cell-dot { position: absolute; background: #b3b3b3; width: 6px; height: 6px; border-radius: 3px; top: 14px; left: 14px; } .array-2017-widget .array-grid-cell.no-dot .array-cell-dot { display: none; } .array-2017-widget .array-grid-cell .array-cell-image.slot-item { position: absolute; top: 4px; left: 4px; display: none; } .array-2017-widget .array-grid-cell.filled .array-cell-image { display: block; } .array-2017-widget .array-grid-cell.filled.highlight-subtract .array-cell-minus, .array-2017-widget .array-grid-cell.filled:not(.just-added).clickable:hover .array-cell-minus { display: block; } .array-2017-widget .array-grid-cell:not(.filled).highlight-add .array-cell-image, .array-2017-widget .array-grid-cell:not(.filled).clickable:hover .array-cell-image { display: block; opacity: 0.5; } .array-2017-widget .array-grid-cell:not(.filled).highlight-add .array-cell-plus, .array-2017-widget .array-grid-cell:not(.filled).clickable:hover .array-cell-plus { display: block; } .array-2017-widget.touch-enabled .array-button.transparent { opacity: 1; } .array-2017-widget.touch-enabled .array-grid-cell:not(.filled).highlight-add .array-cell-image, .array-2017-widget.touch-enabled .array-grid-cell:not(.filled).clickable:hover .array-cell-image { display: none; } .array-2017-widget.touch-enabled .array-grid-cell:not(.filled).highlight-add .array-cell-plus, .array-2017-widget.touch-enabled .array-grid-cell:not(.filled).clickable:hover .array-cell-plus { display: none; } .array-2017-widget.touch-enabled .array-grid-cell.filled.highlight-subtract .array-cell-minus, .array-2017-widget.touch-enabled .array-grid-cell.filled:not(.just-added).clickable:hover .array-cell-minus { display: none; } .active-task .array-2017-widget .array-grid-cell.clickable { cursor: pointer; } .array-rotate-2017 .array-2017-widget { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .array-rotate-2017 .array-2017-widget .array-active-area { margin-left: 0; } .array-rotate-2017 .array-2017-widget .no-button-wrapper { margin-top: 0; } .sound-widget { display: inline-block; cursor: pointer; margin: 0 4px; padding: 0; font-size: inherit; color: inherit; vertical-align: middle; user-select: none; width: 1em; text-align: left; } .sound-widget .fa-volume-mute { display: none; } .sound-widget.playing .fa-volume { display: none; } .sound-widget.playing .fa-volume-mute { display: inline; } .sound-widget:hover { transform: scale(1.3); } .token-container .sound-widget { margin-left: 10px; } .ac-toggle { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; margin-left: auto; margin-right: auto; margin-bottom: 5px; position: relative; display: none; width: 300px; height: 68px; border-radius: 14px 14px 0 0; background-color: #f2f3f3; } .ac-toggle div { cursor: pointer; } .ac-toggle-mine, .ac-toggle-answer { width: 144px; height: 60px; display: inline-block; font-size: 18px; font-weight: bold; vertical-align: bottom; line-height: 22px; padding: 6px 12px 12px 12px; color: #8c8c8c; text-align: center; position: absolute; bottom: 0; margin: 0 0 4px 0; border-radius: 12px 12px 0 0; } .ac-toggle-answer { right: 2px; margin: 0 4px 0 0; } .ac-toggle-answer.active { background-color: white; color: #0fa566; } .ac-toggle-mine { left: 2px; margin: 0 0 0 4px; } .ac-toggle-mine.active { background-color: white; color: #0c91cc; } .task-container.highlighted .ac-toggle-answer.active, .task-container.highlighted .ac-toggle-mine.active { background-color: rgba(250, 210, 50, 0.5); } .ac-toggle-selection-box { position: absolute; width: 144px; height: 56px; background-color: transparent; margin: 0 4px; border-radius: 12px 12px 0 0; bottom: 0px; left: 144px; } .super-mat, .super-mat-bank { height: 190px; width: 100%; position: relative; } .super-mat { background-color: #f3fdff; font-size: 18px; border: 3px solid #cdd6d6; margin: 0 auto; border-radius: 10px; } .super-mat.droppable-hover { border-color: #0097b6; } .super-mat .super-counter { background-color: #787778; color: #fff; position: absolute; right: 0; margin: 10px; padding: 5px 20px; border-radius: 4px; min-width: 80px; top: 0; } .coin-mat-widget .coin-mat-slot { width: 50px; height: 50px; display: inline-block; margin: 8px; } .coin-mat-widget .coin-mat-coin { background-repeat: no-repeat; } .coin-mat-widget .coin-mat-coin.quarter { background-image: url("https://webassets.zearn.org/app_assets/tasks/coins/quarter_front.png"); width: 49px; height: 49px; border-radius: 30px; background-size: 49px 49px; } .coin-mat-widget .coin-mat-coin.dime { background-image: url("https://webassets.zearn.org/app_assets/tasks/coins/dime_front.png"); width: 37px; height: 37px; border-radius: 30px; background-size: 37px 37px; margin: 9px; } .coin-mat-widget .coin-mat-coin.dime.back { background-image: url("https://webassets.zearn.org/app_assets/tasks/coins/dime_back.png"); } .coin-mat-widget .coin-mat-coin.nickel { background-image: url("https://webassets.zearn.org/app_assets/tasks/coins/nickel_front.png"); width: 43px; height: 43px; border-radius: 30px; background-size: 43px 43px; margin: 5px; } .coin-mat-widget .coin-mat-coin.nickel.back { background-image: url("https://webassets.zearn.org/app_assets/tasks/coins/nickel_back.png"); } .coin-mat-widget .coin-mat-coin.penny { background-image: url("https://webassets.zearn.org/app_assets/tasks/coins/penny_front.png"); width: 39px; height: 39px; border-radius: 30px; background-size: 39px 39px; margin: 8px; } .coin-mat-widget .coin-mat-coin.penny.back { background-image: url("https://webassets.zearn.org/app_assets/tasks/coins/penny_back.png"); } .coin-mat-widget .coin-mat-bank, .coin-mat-widget .coin-mat { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .coin-mat-widget .coin-mat-bank .coin-mat-inner-vert, .coin-mat-widget .coin-mat .coin-mat-inner-vert { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .coin-mat-widget .coin-mat-bank .coin-mat-inner-vert .coin-mat-inner-horiz, .coin-mat-widget .coin-mat .coin-mat-inner-vert .coin-mat-inner-horiz { text-align: left; display: inline-block; } .coin-mat-widget .coin-mat-bank .coin-mat-inner-vert .coin-mat-inner-horiz.has-counter, .coin-mat-widget .coin-mat .coin-mat-inner-vert .coin-mat-inner-horiz.has-counter { margin-right: 100px; } .coin-mat-widget .coin-mat-bank .coin-mat-cover, .coin-mat-widget .coin-mat .coin-mat-cover { display: none; width: 100%; height: 100%; position: absolute; z-index: 1; } .coin-mat-widget .coin-mat.correct { border-color: #00c372; background-color: #ccffd9; } .coin-mat-widget .coin-mat.incorrect { border-color: #ff4d76; background-color: #ffe3ee; } .coin-mat-widget .coin-mat .coin-mat-cover { cursor: pointer; } .coin-mat-widget .coin-mat-buttons { text-align: right; margin: 10px 10px 0 10px; } .active-task .coin-mat-widget .coin-mat-coin.ui-draggable { cursor: pointer; } .active-task .coin-mat-widget .coin-mat-coin.ui-draggable:hover { border: 3px solid #0097b6; background-position: -3px -3px; } .countdown-bar { width: 100%; height: 100%; position: relative; background-color: #44BE4F; overflow: hidden; } .countdown-bar .progress-bar { z-index: 2; background-color: grey; position: absolute; height: 100%; top: 0; right: 0; } .countdown-clock { position: relative; width: 50px; } .countdown-clock .clock-wrapper { position: relative; height: 50px; width: 50px; background: white; } .countdown-clock .clock-wrapper .pie { /* Don't change anything */ width: 50%; height: 100%; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; position: absolute; /* Change what you want there */ background: #b3b3b3; } .countdown-clock .clock-wrapper .spinner { /* Thanks @Joshua Hibbert for the border-radius trick */ background: #b3b3b3; border-radius: 100% 0 0 100%/50% 0 0 50%; z-index: 200; /* Change the border if you want */ border-right: none; } .countdown-clock .clock-wrapper .filler { border-radius: 0 100% 100% 0/0 50% 50% 0; left: 50%; opacity: 0; z-index: 100; border-left: none; } .countdown-clock .clock-wrapper .mask { /* Don't change anything */ width: 50%; height: 100%; border-top-left-radius: 100% 50%; border-bottom-left-radius: 100% 50%; position: absolute; background: #4d4d4d; opacity: 1; z-index: 300; } .countdown-clock .clock-wrapper .back-pie { border-radius: 50%; height: 50px; width: 50px; background: #4d4d4d; } .countdown-clock.warning .clock-wrapper .pie { background: #fb9eaa; } .countdown-clock.warning .clock-wrapper .back-pie { background: #ff0026; } .ie8 .countdown-clock .clock-wrapper .pie, .ie8 .countdown-clock .clock-wrapper .spinner { background: white; border-color: white; } .counter { width: 60px; height: 140px; font-size: 0px; text-align: center; } .counter button { height: 45px; width: 45px; cursor: pointer; font-size: 0; } .counter button span { font-size: 20px; } .counter .counter-count { width: 40px; height: 40px; margin: 5px; line-height: 40px; font-size: 30px; font-family: "Lucida Sans Typewriter", "Monaco", "Bitstream Vera Sans Mono", monospace; margin-left: auto; margin-right: auto; } .counter.horizontal { height: 50px; margin-top: 5px; margin-bottom: 5px; width: 140px; } .counter.horizontal button, .counter.horizontal div { float: right; } .counter.horizontal .counter-count { margin-left: 5px; margin-right: 5px; } @keyframes dot1 { 0% { opacity: 0; } 24% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; } } @keyframes dot2 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } } @keyframes dot3 { 0% { opacity: 0; } 74% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } .waiting-dots .one, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn.animate .one { animation: dot1 2s infinite; } .waiting-dots .two, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn.animate .two { animation: dot2 2s infinite; } .waiting-dots .three, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn.animate .three { animation: dot3 2s infinite; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area { margin-top: 0; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .acb-zearned-it { box-sizing: border-box; font-size: 50px; font-weight: bold; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .done-area { margin: 0 20px; line-height: 55px; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .done-area .saving-message { display: none; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn { vertical-align: top; border-width: 0 0 2px 0; border-style: solid; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn:active:not(:disabled), .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn:active:not(:disabled), .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn:active:not(:disabled) { border-width: 2px 0 0 0; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn:active:enabled, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn:hover:enabled, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn:active:enabled, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn:hover:enabled, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn:active:enabled, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn:hover:enabled { -webkit-box-shadow: 0 0 0 0 #b3b3b3; -moz-box-shadow: 0 0 0 0 #b3b3b3; -ms-box-shadow: 0 0 0 0 #b3b3b3; -o-box-shadow: 0 0 0 0 #b3b3b3; box-shadow: 0 0 0 0 #b3b3b3; cursor: pointer; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn:disabled, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn:disabled, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn:disabled { opacity: 1; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.love-it-btn:active { border-color: #757575; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn, .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn { width: 185px; text-transform: none; font-size: 36px; padding: 0 0 2px 0; border-radius: 40px; color: white; background: #0294f8; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn { display: none; align-items: center; justify-content: center; line-height: 1.3em; -webkit-animation: pulse 500ms; -moz-animation: pulse 500ms; -ms-animation: pulse 500ms; -o-animation: pulse 500ms; animation: pulse 500ms; border-color: #0673bf; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.done-btn:active { border-color: #0673bf; } .fluency-complete-buttons.activity-complete-buttons .activity-complete-buttons-area .zearn-button.saving-btn { color: #757575; background-color: #e1e1e1; } .fluency-complete-buttons.activity-complete-buttons.horiz { color: #ff5400; margin-top: 15%; } .fluency-complete-buttons.activity-complete-buttons.horiz .activity-complete-buttons-area { width: 420px; padding: 0 8px; } .fluency-complete-buttons.activity-complete-buttons.horiz .activity-complete-buttons-area .acb-zearned-it { padding-bottom: 20px; } .fluency-complete-buttons.activity-complete-buttons.horiz .activity-complete-buttons-area .done-area { float: right; margin: 0 10px 0 0; } .fluency-complete-buttons.activity-complete-buttons.horiz .activity-complete-buttons-area .love-it-btn { margin: 3px 10px; } .geometry-pad { padding: 4px; } .geometry-pad .geometry-canvas { margin: 0 auto; background-repeat: no-repeat; background-position: 60px 60px; position: relative; } .geometry-pad .geometry-canvas line { stroke-linecap: round; stroke-width: 2px; stroke: rgb(53, 67, 89); } .geometry-pad .geometry-canvas line.highlight { stroke: #fbc920; stroke-width: 6px; } .geometry-pad .geometry-canvas line.highlighted, .geometry-pad .geometry-canvas line.hover { stroke: rgb(28, 199, 230); } .geometry-pad .geometry-canvas line.paired:not(.force-hover), .geometry-pad .geometry-canvas line.dark-blue { stroke: rgb(31, 104, 193); } .geometry-pad .geometry-canvas ellipse.point-circle, .geometry-pad .geometry-canvas circle.point-circle { fill: rgb(28, 199, 230); stroke-width: 2px; stroke: rgb(53, 67, 89); } .geometry-pad .geometry-canvas ellipse.point-click-circle, .geometry-pad .geometry-canvas circle.point-click-circle { fill: rgba(0, 0, 0, 0); } .geometry-pad .geometry-canvas text { font-family: Verdana, Geneva, sans-serif; text-anchor: middle; fill: rgb(53, 67, 89); } .geometry-pad .geometry-canvas text.angle-label { font-weight: normal; } .geometry-pad .geometry-canvas text.point-label { font-weight: bold; } .geometry-pad .geometry-canvas text.point-label.clickable { fill: rgb(28, 199, 230); } .geometry-pad .geometry-canvas text.highlight { fill: #fbb03b; font-weight: bold; } .geometry-pad .geometry-canvas .geometry-arc { fill: none; stroke-width: 2px; stroke: rgb(53, 67, 89); } .geometry-pad .geometry-canvas .geometry-arc.highlight { stroke-width: 6px; stroke: #fbc920; } .active-task .geometry-pad:not(.disabled) .point-click-circle { cursor: pointer; } .graded-mat-partial-correctness { display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; } .graded-mat-partial-correctness.try-again, .graded-mat-partial-correctness.pre-ghost-autocorrect { cursor: pointer; } .graded-mat-partial-correctness .question-mark-tab.manipulatives-button.show { -webkit-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -moz-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -ms-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -o-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; background-color: #ff4d76; border-color: #ff4d76; display: inline-block; opacity: 1; transform-origin: right; } @-webkit-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-moz-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-o-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-webkit-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-moz-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-o-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } .graded-mat-partial-correctness .question-mark-tab.manipulatives-button.show.top { transform-origin: bottom; } .graded-mat-partial-correctness .autocorrect-button:not(.question-mark-tab) { -webkit-animation: animation-background-color-transparent-ff4d76 200ms linear; -moz-animation: animation-background-color-transparent-ff4d76 200ms linear; -ms-animation: animation-background-color-transparent-ff4d76 200ms linear; -o-animation: animation-background-color-transparent-ff4d76 200ms linear; animation: animation-background-color-transparent-ff4d76 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-moz-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-o-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } .graded-mat-partial-correctness .autocorrect-button:not(.question-mark-tab) i { -webkit-animation: animation-color-transparent-white 200ms linear; -moz-animation: animation-color-transparent-white 200ms linear; -ms-animation: animation-color-transparent-white 200ms linear; -o-animation: animation-color-transparent-white 200ms linear; animation: animation-color-transparent-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-moz-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-o-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } .graded-mat-partial-correctness.active { background-color: #f3fdff; border-color: #0097b6; } .graded-mat-partial-correctness.active .mat-item:not(.locked), .graded-mat-partial-correctness.active .dark-mat-item:not(.locked) { cursor: pointer; } .graded-mat-partial-correctness.active .mat-item.locked { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.active .mat-item:not(.locked):not(.ghost) { background-color: #1cc7e6; border-color: #005c73; } .graded-mat-partial-correctness.active .dark-mat-item.locked { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.active .dark-mat-item:not(.locked):not(.ghost) { background-color: #0097b6; border-color: #0097b6; } .graded-mat-partial-correctness.try-again:not(.partial-correct) { background-color: #ffe6ee; border-color: #ff4d76; } .graded-mat-partial-correctness.try-again:not(.partial-correct) .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.try-again:not(.partial-correct) .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.try-again:not(.partial-correct) .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.try-again:not(.partial-correct) .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.try-again:not(.partial-correct) .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.try-again:not(.partial-correct) .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.try-again:not(.partial-correct) .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.try-again:not(.partial-correct) .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.try-again:not(.partial-correct) .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.try-again:not(.partial-correct) .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.incorrect:not(.partial-correct) { background-color: white; border-color: #ff4d76; } .graded-mat-partial-correctness.incorrect:not(.partial-correct) .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.incorrect:not(.partial-correct) .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.incorrect:not(.partial-correct) .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.incorrect:not(.partial-correct) .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.incorrect:not(.partial-correct) .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.incorrect:not(.partial-correct) .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.incorrect:not(.partial-correct) .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.incorrect:not(.partial-correct) .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.incorrect:not(.partial-correct) .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.incorrect:not(.partial-correct) .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.try-again.partial-correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-white-ffe6ee-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } } .graded-mat-partial-correctness.try-again.partial-correct .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.try-again.partial-correct .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.try-again.partial-correct .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.try-again.partial-correct .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.try-again.partial-correct .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.try-again.partial-correct .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.try-again.partial-correct .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.try-again.partial-correct .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.try-again.partial-correct .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.try-again.partial-correct .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.incorrect.partial-correct { background-color: white; border-color: #ff4d76; } .graded-mat-partial-correctness.incorrect.partial-correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-partial-correctness.incorrect.partial-correct .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.incorrect.partial-correct .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.incorrect.partial-correct .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.incorrect.partial-correct .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.incorrect.partial-correct .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.incorrect.partial-correct .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.incorrect.partial-correct .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.incorrect.partial-correct .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.incorrect.partial-correct .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.incorrect.partial-correct .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.correct { background-color: white; border-color: #b3b3b3; } .graded-mat-partial-correctness.correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } .graded-mat-partial-correctness.correct .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.correct .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.correct .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.correct .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.correct .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.correct .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.correct .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.correct .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.correct .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.correct .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.pre-ghost-autocorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-white-white-animation-border-color-b3b3b3-ff4d76-animation-border-width-3px-3px { 0% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 83% { background-color: white; border-color: #b3b3b3; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-partial-correctness.pre-ghost-autocorrect .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.pre-ghost-autocorrect .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.pre-ghost-autocorrect .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.pre-ghost-autocorrect .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.pre-ghost-autocorrect .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.pre-ghost-autocorrect .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.pre-ghost-autocorrect .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.pre-ghost-autocorrect .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.pre-ghost-autocorrect .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.pre-ghost-autocorrect .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.correctable .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.correctable .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.correctable .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.correctable .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.correctable .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.correctable .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.correctable .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.correctable .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.correctable .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.correctable .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-partial-correctness.autocorrected { background-color: white; border-color: #b3b3b3; } .graded-mat-partial-correctness.autocorrected .mat-item:not(.locked).try-again, .graded-mat-partial-correctness.autocorrected .mat-item:not(.locked).incorrect, .graded-mat-partial-correctness.autocorrected .dark-mat-item:not(.locked).try-again, .graded-mat-partial-correctness.autocorrected .dark-mat-item:not(.locked).incorrect { background-color: #ff4d76; border-color: #ff4d76; } .graded-mat-partial-correctness.autocorrected .mat-item:not(.locked).ghost { cursor: pointer; background-color: #e4e4e4; border-color: #4d4d4d; border-style: dotted; -webkit-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -moz-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -ms-animation: pulseGhost 3200ms ease-in-out 300ms infinite; -o-animation: pulseGhost 3200ms ease-in-out 300ms infinite; animation: pulseGhost 3200ms ease-in-out 300ms infinite; box-shadow: none; } @-webkit-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-moz-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @-o-keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } @keyframes pulseGhost { 37.5% { transform: scale(1); box-shadow: none; } 50% { transform: scale(1.2); box-shadow: 0px 0px 0px 5px #ff0d5e; } 62.5% { transform: scale(1); box-shadow: none; } } .graded-mat-partial-correctness.autocorrected .mat-item:not(.locked).ghost:hover { background-color: #1cc7e6; border-color: #005c73; border-style: solid; opacity: 0.5; } .graded-mat-partial-correctness.autocorrected .mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-a1adb3-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #a1adb3; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.autocorrected .mat-item.done { background-color: #a1adb3; border-color: #435259; } .graded-mat-partial-correctness.autocorrected .dark-mat-item.locked:not(.done):not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } @keyframes multi-animation-animation-background-color-00c372-435259-animation-border-color-00c372-435259-animation-border-width-3px-3px { 0% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 83% { background-color: #00c372; border-color: #00c372; border-width: 3px; } 100% { background-color: #435259; border-color: #435259; border-width: 3px; } } .graded-mat-partial-correctness.autocorrected .dark-mat-item.done { background-color: #435259; border-color: #435259; } .graded-mat-active-binary-correctness { display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; } .graded-mat-active-binary-correctness.try-again, .graded-mat-active-binary-correctness.pre-ghost-autocorrect { cursor: pointer; } .graded-mat-active-binary-correctness .question-mark-tab.manipulatives-button.show { -webkit-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -moz-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -ms-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -o-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; background-color: #ff4d76; border-color: #ff4d76; display: inline-block; opacity: 1; transform-origin: right; } @-webkit-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-moz-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-o-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-webkit-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-moz-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-o-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } .graded-mat-active-binary-correctness .question-mark-tab.manipulatives-button.show.top { transform-origin: bottom; } .graded-mat-active-binary-correctness .autocorrect-button:not(.question-mark-tab) { -webkit-animation: animation-background-color-transparent-ff4d76 200ms linear; -moz-animation: animation-background-color-transparent-ff4d76 200ms linear; -ms-animation: animation-background-color-transparent-ff4d76 200ms linear; -o-animation: animation-background-color-transparent-ff4d76 200ms linear; animation: animation-background-color-transparent-ff4d76 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-moz-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-o-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } .graded-mat-active-binary-correctness .autocorrect-button:not(.question-mark-tab) i { -webkit-animation: animation-color-transparent-white 200ms linear; -moz-animation: animation-color-transparent-white 200ms linear; -ms-animation: animation-color-transparent-white 200ms linear; -o-animation: animation-color-transparent-white 200ms linear; animation: animation-color-transparent-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-moz-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-o-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } .graded-mat-active-binary-correctness.active { background-color: #f3fdff; border-color: #0097b6; } .graded-mat-active-binary-correctness.active .mat-item:not(.locked), .graded-mat-active-binary-correctness.active .dark-mat-item:not(.locked) { cursor: pointer; } .graded-mat-active-binary-correctness.active .mat-item.locked { background-color: #a1adb3; border-color: #435259; } .graded-mat-active-binary-correctness.active .mat-item:not(.locked):not(.ghost) { background-color: #1cc7e6; border-color: #005c73; } .graded-mat-active-binary-correctness.active .dark-mat-item.locked { background-color: #435259; border-color: #435259; } .graded-mat-active-binary-correctness.active .dark-mat-item:not(.locked):not(.ghost) { background-color: #0097b6; border-color: #0097b6; } .graded-mat-active-binary-correctness.try-again, .graded-mat-active-binary-correctness.pre-ghost-autocorrect { cursor: pointer; } .graded-mat-active-binary-correctness .question-mark-tab.manipulatives-button.show { -webkit-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -moz-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -ms-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -o-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; background-color: #ff4d76; border-color: #ff4d76; display: inline-block; opacity: 1; transform-origin: right; } @-webkit-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-moz-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-o-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-webkit-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-moz-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-o-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } .graded-mat-active-binary-correctness .question-mark-tab.manipulatives-button.show.top { transform-origin: bottom; } .graded-mat-active-binary-correctness .autocorrect-button:not(.question-mark-tab) { -webkit-animation: animation-background-color-transparent-ff4d76 200ms linear; -moz-animation: animation-background-color-transparent-ff4d76 200ms linear; -ms-animation: animation-background-color-transparent-ff4d76 200ms linear; -o-animation: animation-background-color-transparent-ff4d76 200ms linear; animation: animation-background-color-transparent-ff4d76 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-moz-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-o-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } .graded-mat-active-binary-correctness .autocorrect-button:not(.question-mark-tab) i { -webkit-animation: animation-color-transparent-white 200ms linear; -moz-animation: animation-color-transparent-white 200ms linear; -ms-animation: animation-color-transparent-white 200ms linear; -o-animation: animation-color-transparent-white 200ms linear; animation: animation-color-transparent-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-moz-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-o-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } .graded-mat-active-binary-correctness.try-again { background-color: #ffe6ee; border-color: #ff4d76; } .graded-mat-active-binary-correctness.incorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-active-binary-correctness.pre-ghost-autocorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-active-binary-correctness.correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } .graded-mat-active-binary-correctness-blended-inputs { display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; } .graded-mat-active-binary-correctness-blended-inputs.try-again, .graded-mat-active-binary-correctness-blended-inputs.pre-ghost-autocorrect { cursor: pointer; } .graded-mat-active-binary-correctness-blended-inputs .question-mark-tab.manipulatives-button.show { -webkit-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -moz-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -ms-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -o-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; background-color: #ff4d76; border-color: #ff4d76; display: inline-block; opacity: 1; transform-origin: right; } @-webkit-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-moz-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-o-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-webkit-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-moz-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-o-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } .graded-mat-active-binary-correctness-blended-inputs .question-mark-tab.manipulatives-button.show.top { transform-origin: bottom; } .graded-mat-active-binary-correctness-blended-inputs .autocorrect-button:not(.question-mark-tab) { -webkit-animation: animation-background-color-transparent-ff4d76 200ms linear; -moz-animation: animation-background-color-transparent-ff4d76 200ms linear; -ms-animation: animation-background-color-transparent-ff4d76 200ms linear; -o-animation: animation-background-color-transparent-ff4d76 200ms linear; animation: animation-background-color-transparent-ff4d76 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-moz-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-o-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } .graded-mat-active-binary-correctness-blended-inputs .autocorrect-button:not(.question-mark-tab) i { -webkit-animation: animation-color-transparent-white 200ms linear; -moz-animation: animation-color-transparent-white 200ms linear; -ms-animation: animation-color-transparent-white 200ms linear; -o-animation: animation-color-transparent-white 200ms linear; animation: animation-color-transparent-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-moz-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-o-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } .graded-mat-active-binary-correctness-blended-inputs.active { background-color: #f3fdff; border-color: #0097b6; } .graded-mat-active-binary-correctness-blended-inputs.active .mat-item:not(.locked), .graded-mat-active-binary-correctness-blended-inputs.active .dark-mat-item:not(.locked) { cursor: pointer; } .graded-mat-active-binary-correctness-blended-inputs.active .mat-item.locked { background-color: #a1adb3; border-color: #435259; } .graded-mat-active-binary-correctness-blended-inputs.active .mat-item:not(.locked):not(.ghost) { background-color: #1cc7e6; border-color: #005c73; } .graded-mat-active-binary-correctness-blended-inputs.active .dark-mat-item.locked { background-color: #435259; border-color: #435259; } .graded-mat-active-binary-correctness-blended-inputs.active .dark-mat-item:not(.locked):not(.ghost) { background-color: #0097b6; border-color: #0097b6; } .graded-mat-active-binary-correctness-blended-inputs.try-again, .graded-mat-active-binary-correctness-blended-inputs.pre-ghost-autocorrect { cursor: pointer; } .graded-mat-active-binary-correctness-blended-inputs .question-mark-tab.manipulatives-button.show { -webkit-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -moz-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -ms-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -o-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; background-color: #ff4d76; border-color: #ff4d76; display: inline-block; opacity: 1; transform-origin: right; } @-webkit-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-moz-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-o-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-webkit-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-moz-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-o-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } .graded-mat-active-binary-correctness-blended-inputs .question-mark-tab.manipulatives-button.show.top { transform-origin: bottom; } .graded-mat-active-binary-correctness-blended-inputs .autocorrect-button:not(.question-mark-tab) { -webkit-animation: animation-background-color-transparent-ff4d76 200ms linear; -moz-animation: animation-background-color-transparent-ff4d76 200ms linear; -ms-animation: animation-background-color-transparent-ff4d76 200ms linear; -o-animation: animation-background-color-transparent-ff4d76 200ms linear; animation: animation-background-color-transparent-ff4d76 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-moz-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-o-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } .graded-mat-active-binary-correctness-blended-inputs .autocorrect-button:not(.question-mark-tab) i { -webkit-animation: animation-color-transparent-white 200ms linear; -moz-animation: animation-color-transparent-white 200ms linear; -ms-animation: animation-color-transparent-white 200ms linear; -o-animation: animation-color-transparent-white 200ms linear; animation: animation-color-transparent-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-moz-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-o-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } .graded-mat-active-binary-correctness-blended-inputs.try-again { background-color: #ffe6ee; border-color: #ff4d76; } .graded-mat-active-binary-correctness-blended-inputs.incorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-active-binary-correctness-blended-inputs.pre-ghost-autocorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-active-binary-correctness-blended-inputs.correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ccffd9-white-animation-border-color-00c372-b3b3b3-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: white; border-color: #b3b3b3; border-width: 3px; } } .graded-mat-active-binary-correctness-blended-inputs.correct .zearn-input.done, .graded-mat-active-binary-correctness-blended-inputs.correct .zearn-input:not(.done), .graded-mat-active-binary-correctness-blended-inputs.correct .super-input.done, .graded-mat-active-binary-correctness-blended-inputs.correct .super-input:not(.done), .graded-mat-active-binary-correctness-blended-inputs.try-again .zearn-input.done, .graded-mat-active-binary-correctness-blended-inputs.try-again .zearn-input:not(.done), .graded-mat-active-binary-correctness-blended-inputs.try-again .super-input.done, .graded-mat-active-binary-correctness-blended-inputs.try-again .super-input:not(.done), .graded-mat-active-binary-correctness-blended-inputs.incorrect:not(.correctable) .zearn-input.done, .graded-mat-active-binary-correctness-blended-inputs.incorrect:not(.correctable) .zearn-input:not(.done), .graded-mat-active-binary-correctness-blended-inputs.incorrect:not(.correctable) .super-input.done, .graded-mat-active-binary-correctness-blended-inputs.incorrect:not(.correctable) .super-input:not(.done), .graded-mat-active-binary-correctness-blended-inputs.correctable .zearn-input.done, .graded-mat-active-binary-correctness-blended-inputs.correctable .zearn-input:not(.done), .graded-mat-active-binary-correctness-blended-inputs.correctable .super-input.done, .graded-mat-active-binary-correctness-blended-inputs.correctable .super-input:not(.done) { background-color: transparent; border-color: transparent; color: black; } .graded-mat-spontaneous-binary-correctness { display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; } .graded-mat-spontaneous-binary-correctness.try-again, .graded-mat-spontaneous-binary-correctness.pre-ghost-autocorrect { cursor: pointer; } .graded-mat-spontaneous-binary-correctness .question-mark-tab.manipulatives-button.show { -webkit-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -moz-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -ms-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -o-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; background-color: #ff4d76; border-color: #ff4d76; display: inline-block; opacity: 1; transform-origin: right; } @-webkit-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-moz-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-o-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-webkit-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-moz-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-o-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } .graded-mat-spontaneous-binary-correctness .question-mark-tab.manipulatives-button.show.top { transform-origin: bottom; } .graded-mat-spontaneous-binary-correctness .autocorrect-button:not(.question-mark-tab) { -webkit-animation: animation-background-color-transparent-ff4d76 200ms linear; -moz-animation: animation-background-color-transparent-ff4d76 200ms linear; -ms-animation: animation-background-color-transparent-ff4d76 200ms linear; -o-animation: animation-background-color-transparent-ff4d76 200ms linear; animation: animation-background-color-transparent-ff4d76 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-moz-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-o-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } .graded-mat-spontaneous-binary-correctness .autocorrect-button:not(.question-mark-tab) i { -webkit-animation: animation-color-transparent-white 200ms linear; -moz-animation: animation-color-transparent-white 200ms linear; -ms-animation: animation-color-transparent-white 200ms linear; -o-animation: animation-color-transparent-white 200ms linear; animation: animation-color-transparent-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-moz-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-o-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } .graded-mat-spontaneous-binary-correctness.try-again { background-color: #ffe6ee; border-color: #ff4d76; } .graded-mat-spontaneous-binary-correctness.incorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-spontaneous-binary-correctness.pre-ghost-autocorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-spontaneous-binary-correctness.correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } .graded-mat-spontaneous-binary-correctness-blended-inputs { display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; } .graded-mat-spontaneous-binary-correctness-blended-inputs.try-again, .graded-mat-spontaneous-binary-correctness-blended-inputs.pre-ghost-autocorrect { cursor: pointer; } .graded-mat-spontaneous-binary-correctness-blended-inputs .question-mark-tab.manipulatives-button.show { -webkit-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -moz-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -ms-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; -o-animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; animation: transparentToRed 1200ms linear, pulseAutocorrect 4600ms ease-in-out infinite; background-color: #ff4d76; border-color: #ff4d76; display: inline-block; opacity: 1; transform-origin: right; } @-webkit-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-moz-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-o-keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @keyframes transparentToRed { 0% { background-color: transparent; border-color: transparent; } 83% { background-color: transparent; border-color: transparent; } 100% { background-color: #ff4d76; border-color: #ff4d76; } } @-webkit-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-moz-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @-o-keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } @keyframes pulseAutocorrect { 4% { transform: scale(1); } 10.5% { transform: scale(1.4); } 17% { transform: scale(1); } } .graded-mat-spontaneous-binary-correctness-blended-inputs .question-mark-tab.manipulatives-button.show.top { transform-origin: bottom; } .graded-mat-spontaneous-binary-correctness-blended-inputs .autocorrect-button:not(.question-mark-tab) { -webkit-animation: animation-background-color-transparent-ff4d76 200ms linear; -moz-animation: animation-background-color-transparent-ff4d76 200ms linear; -ms-animation: animation-background-color-transparent-ff4d76 200ms linear; -o-animation: animation-background-color-transparent-ff4d76 200ms linear; animation: animation-background-color-transparent-ff4d76 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-moz-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @-o-keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } @keyframes animation-background-color-transparent-ff4d76 { 0% { background-color: transparent; } 100% { background-color: #ff4d76; } } .graded-mat-spontaneous-binary-correctness-blended-inputs .autocorrect-button:not(.question-mark-tab) i { -webkit-animation: animation-color-transparent-white 200ms linear; -moz-animation: animation-color-transparent-white 200ms linear; -ms-animation: animation-color-transparent-white 200ms linear; -o-animation: animation-color-transparent-white 200ms linear; animation: animation-color-transparent-white 200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-moz-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @-o-keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } @keyframes animation-color-transparent-white { 0% { color: transparent; } 100% { color: white; } } .graded-mat-spontaneous-binary-correctness-blended-inputs.try-again { background-color: #ffe6ee; border-color: #ff4d76; } .graded-mat-spontaneous-binary-correctness-blended-inputs.incorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-spontaneous-binary-correctness-blended-inputs.pre-ghost-autocorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ffe6ee-white-animation-border-color-ff4d76-ff4d76-animation-border-width-3px-3px { 0% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 83% { background-color: #ffe6ee; border-color: #ff4d76; border-width: 3px; } 100% { background-color: white; border-color: #ff4d76; border-width: 3px; } } .graded-mat-spontaneous-binary-correctness-blended-inputs.correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; -moz-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; -ms-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; -o-animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; animation: multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px 1200ms linear; animation-fill-mode: forwards; } @-webkit-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } @-moz-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } @-o-keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } @keyframes multi-animation-animation-background-color-ccffd9-transparent-animation-border-color-00c372-transparent-animation-border-width-3px-3px { 0% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 83% { background-color: #ccffd9; border-color: #00c372; border-width: 3px; } 100% { background-color: transparent; border-color: transparent; border-width: 3px; } } .graded-mat-spontaneous-binary-correctness-blended-inputs.correct .zearn-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.correct .zearn-input:not(.done), .graded-mat-spontaneous-binary-correctness-blended-inputs.correct .super-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.correct .super-input:not(.done), .graded-mat-spontaneous-binary-correctness-blended-inputs.try-again .zearn-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.try-again .zearn-input:not(.done), .graded-mat-spontaneous-binary-correctness-blended-inputs.try-again .super-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.try-again .super-input:not(.done), .graded-mat-spontaneous-binary-correctness-blended-inputs.incorrect:not(.correctable) .zearn-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.incorrect:not(.correctable) .zearn-input:not(.done), .graded-mat-spontaneous-binary-correctness-blended-inputs.incorrect:not(.correctable) .super-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.incorrect:not(.correctable) .super-input:not(.done), .graded-mat-spontaneous-binary-correctness-blended-inputs.correctable .zearn-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.correctable .zearn-input:not(.done), .graded-mat-spontaneous-binary-correctness-blended-inputs.correctable .super-input.done, .graded-mat-spontaneous-binary-correctness-blended-inputs.correctable .super-input:not(.done) { background-color: transparent; border-color: transparent; color: black; } .graded-mat { display: inline-block; padding: 16px; border: 3px solid transparent; border-radius: 10px; border-width: 2px; padding: 10px; } .graded-mat.graded-mat-only-with-grading.try-again, .graded-mat.graded-mat-always-visible.try-again { border-color: #ff4d76; background-color: #ffe3ee; cursor: pointer; } @-webkit-keyframes gradedMatIncorrect { 0% { background-color: #ffe6ee; } 83% { background-color: #ffe3ee; } 100% { background-color: transparent; } } @-moz-keyframes gradedMatIncorrect { 0% { background-color: #ffe6ee; } 83% { background-color: #ffe3ee; } 100% { background-color: transparent; } } @-o-keyframes gradedMatIncorrect { 0% { background-color: #ffe6ee; } 83% { background-color: #ffe3ee; } 100% { background-color: transparent; } } @keyframes gradedMatIncorrect { 0% { background-color: #ffe6ee; } 83% { background-color: #ffe3ee; } 100% { background-color: transparent; } } .graded-mat.graded-mat-only-with-grading.incorrect, .graded-mat.graded-mat-always-visible.incorrect { border-color: #ff4d76; background-color: transparent; } .graded-mat.graded-mat-only-with-grading.incorrect:not(.page-refreshed):not(.done-animating), .graded-mat.graded-mat-always-visible.incorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: gradedMatIncorrect 1200ms linear; -moz-animation: gradedMatIncorrect 1200ms linear; -ms-animation: gradedMatIncorrect 1200ms linear; -o-animation: gradedMatIncorrect 1200ms linear; animation: gradedMatIncorrect 1200ms linear; } .graded-mat.graded-mat-only-with-grading.active:not(.correct):not(.try-again):not(.incorrect):not(.done-animating):not(.page-refreshed) { border-color: transparent; background-color: transparent; } @-webkit-keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: transparent; } 100% { border-color: transparent; } } @-moz-keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: transparent; } 100% { border-color: transparent; } } @-o-keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: transparent; } 100% { border-color: transparent; } } @keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: transparent; } 100% { border-color: transparent; } } .graded-mat.graded-mat-only-with-grading.correct { border-color: transparent; background-color: transparent; } .graded-mat.graded-mat-only-with-grading.correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: gradedMat01Correct 1200ms linear; -moz-animation: gradedMat01Correct 1200ms linear; -ms-animation: gradedMat01Correct 1200ms linear; -o-animation: gradedMat01Correct 1200ms linear; animation: gradedMat01Correct 1200ms linear; } .graded-mat.graded-mat-always-visible { border-color: #bdbec0; background-color: white; } .graded-mat.graded-mat-always-visible.active { background-color: #f3fdff; } @-webkit-keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: #bdbec0; } 100% { border-color: #bdbec0; } } @-moz-keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: #bdbec0; } 100% { border-color: #bdbec0; } } @-o-keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: #bdbec0; } 100% { border-color: #bdbec0; } } @keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 83% { border-color: #00c372; background-color: #ccffd9; } 92% { -webkit-transition: border 100ms ease; -moz-transition: border 100ms ease; -o-transition: border 100ms ease; transition: border 100ms ease; } 100% { background-color: transparent; } 92% { border-color: #bdbec0; } 100% { border-color: #bdbec0; } } .graded-mat.graded-mat-always-visible.correct { border-color: #bdbec0; background-color: transparent; } .graded-mat.graded-mat-always-visible.correct:not(.page-refreshed):not(.done-animating) { -webkit-animation: gradedMat02Correct 1200ms linear; -moz-animation: gradedMat02Correct 1200ms linear; -ms-animation: gradedMat02Correct 1200ms linear; -o-animation: gradedMat02Correct 1200ms linear; animation: gradedMat02Correct 1200ms linear; } @-webkit-keyframes gradedMatIncorrect { 0% { background-color: #ffe3ee; } 88% { background-color: #ffe3ee; } 100% { background-color: transparent; } } @-moz-keyframes gradedMatIncorrect { 0% { background-color: #ffe3ee; } 88% { background-color: #ffe3ee; } 100% { background-color: transparent; } } @-o-keyframes gradedMatIncorrect { 0% { background-color: #ffe3ee; } 88% { background-color: #ffe3ee; } 100% { background-color: transparent; } } @keyframes gradedMatIncorrect { 0% { background-color: #ffe3ee; } 88% { background-color: #ffe3ee; } 100% { background-color: transparent; } } .graded-mat.graded-mat-only-with-grading.incorrect:not(.page-refreshed):not(.done-animating), .graded-mat.graded-mat-always-visible.incorrect:not(.page-refreshed):not(.done-animating) { -webkit-animation: gradedMatIncorrect 1700ms linear; -moz-animation: gradedMatIncorrect 1700ms linear; -ms-animation: gradedMatIncorrect 1700ms linear; -o-animation: gradedMatIncorrect 1700ms linear; animation: gradedMatIncorrect 1700ms linear; } @-webkit-keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } @-moz-keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } @-o-keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } @keyframes gradedMat01Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } .graded-mat.graded-mat-only-with-grading.correct { border-color: transparent; background-color: transparent; } .graded-mat.graded-mat-only-with-grading.correct:not(.done-animating):not(.page-refreshed) { -webkit-animation: gradedMat01Correct 1700ms linear; -moz-animation: gradedMat01Correct 1700ms linear; -ms-animation: gradedMat01Correct 1700ms linear; -o-animation: gradedMat01Correct 1700ms linear; animation: gradedMat01Correct 1700ms linear; } @-webkit-keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } @-moz-keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } @-o-keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } @keyframes gradedMat02Correct { 0% { border-color: #00c372; background-color: #ccffd9; } 88% { border-color: #00c372; background-color: #ccffd9; } 100% { border-color: #bdbec0; background-color: transparent; } } .graded-mat.graded-mat-always-visible.correct:not(.done-animating):not(.page-refreshed) { -webkit-animation: gradedMat02Correct 1700ms linear; -moz-animation: gradedMat02Correct 1700ms linear; -ms-animation: gradedMat02Correct 1700ms linear; -o-animation: gradedMat02Correct 1700ms linear; animation: gradedMat02Correct 1700ms linear; } .lines-of-symmetry .geometry-pad .symmetry-line { stroke: rgb(31, 104, 193); stroke-width: 3; stroke-dasharray: 10, 7; } .lines-of-symmetry .geometry-pad .symmetry-line.prepop { stroke: rgb(53, 67, 89); } .lines-of-symmetry .geometry-pad .symmetry-point { position: absolute; height: 20px; width: 20px; border-radius: 50%; border: rgb(31, 104, 193) solid 3px; } .lines-of-symmetry .geometry-pad .symmetry-point .point-fill-in { height: 16px; width: 16px; margin-top: -1px; margin-left: -1px; border-radius: 50%; opacity: 0.5; background-color: #fff; border: rgb(31, 104, 193) solid 1px; } .lines-of-symmetry .geometry-pad .symmetry-point.connected .point-fill-in { background-color: rgb(31, 104, 193); opacity: 1; } .lines-of-symmetry .geometry-pad .symmetry-point.selected .point-fill-in { background-color: rgb(28, 199, 230); opacity: 1; } .lines-of-symmetry .geometry-pad .symmetry-point.inactive { border-color: rgb(31, 104, 193); } .lines-of-symmetry .geometry-pad .symmetry-point.inactive .point-fill-in { background-color: rgb(31, 104, 193); opacity: 1; } .lines-of-symmetry .geometry-pad .symmetry-point.disabled { border-color: rgba(31, 104, 193, 0.5); } .lines-of-symmetry .geometry-pad .symmetry-point.prepop { border-color: rgb(53, 67, 89); } .lines-of-symmetry .geometry-pad .symmetry-point.prepop .point-fill-in { background-color: rgb(53, 67, 89); border-color: rgb(53, 67, 89); } .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-line { cursor: pointer; } .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-line:not(.prepop):hover { stroke: rgb(28, 199, 230); } .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-line.prepop { cursor: default; } .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-point { cursor: pointer; } .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-point.prepop, .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-point.disabled { cursor: default; } .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-point:hover:not(.just-added):not(.disabled):not(.prepop) { border-color: rgb(28, 199, 230); } .lines-of-symmetry.active-task .geometry-pad:not(.disabled) .symmetry-point:hover:not(.just-added):not(.disabled):not(.prepop) .point-fill-in { background-color: rgb(28, 199, 230); border-color: rgb(28, 199, 230); opacity: 1; } .ns-fill-in.super-fill-in-widget .number-input:disabled.active { border-color: #0097b6; } .place-value-mat-widget { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; position: relative; font-family: Oxygen, Verdana, Geneva, sans-serif; } .place-value-mat-widget.discs .slot-item { display: inline-block; top: 0; left: 0; width: 34px; height: 34px; border-radius: 50%; margin: 3px; border: 3px solid transparent; } .place-value-mat-widget.discs .slot-item.hidden { display: none; } .place-value-mat-widget.discs .slot-item.selected { border-color: #0097b6; } .place-value-mat-widget.discs .slot-item.ghost { border: 3px dotted #999999; background-color: rgba(153, 153, 153, 0.4); } .place-value-mat-widget.discs .slot-item:not(.ghost) { box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.58); } .place-value-mat-widget.discs .slot-item:not(.ghost).thousandths { background-color: #77cc00; } .place-value-mat-widget.discs .slot-item:not(.ghost).hundredths { background-color: #136fcb; } .place-value-mat-widget.discs .slot-item:not(.ghost).tenths { background-color: #ee589e; } .place-value-mat-widget.discs .slot-item:not(.ghost).ones { background-color: #b7a993; } .place-value-mat-widget.discs .slot-item:not(.ghost).tens { background-color: #ea2429; } .place-value-mat-widget.discs .slot-item:not(.ghost).hundreds { background-color: #eb731c; } .place-value-mat-widget.discs .slot-item:not(.ghost).thousands { background-color: #eebc1c; } .place-value-mat-widget.discs .slot-item:not(.ghost).tenthousands { background-color: #31b643; } .place-value-mat-widget.discs .slot-item:not(.ghost).hundredthousands { background-color: #67aad3; } .place-value-mat-widget.discs .slot-item:not(.ghost).millions { background-color: #7a00c9; } .place-value-mat-widget.discs .slot-item:not(.ghost).orange { background-image: url("https://webassets.zearn.org/app_assets/tasks/discs/disc_orange.png"); } .place-value-mat-widget.discs .slot-item:not(.ghost).purple { background-image: url("https://webassets.zearn.org/app_assets/tasks/discs/disc_purple.png"); } .place-value-mat-widget.discs.has-discs-num .slot-item:not(.ghost)::before { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; width: 100%; height: 100%; font-size: 12px; font-weight: bold; color: white; } .place-value-mat-widget.discs.has-discs-num .slot-item:not(.ghost).ones::before { content: "1"; } .place-value-mat-widget.discs.has-discs-num .slot-item:not(.ghost).tens::before { content: "10"; } .place-value-mat-widget.discs.has-discs-num .slot-item:not(.ghost).hundreds::before { content: "100"; } .place-value-mat-widget.money .slot-item { display: inline-block; top: 0; left: 0; width: 68px; height: 32px; border: 3px solid transparent; background-repeat: no-repeat; } .place-value-mat-widget.money .slot-item.hidden { display: none; } .place-value-mat-widget.money .slot-item.selected { border-color: #007b94; position: absolute; top: 0; left: 0; } .place-value-mat-widget.money .slot-item.ghost { height: 26px; width: 62px; margin: 3px 0 0 3px; border: 3px dotted #999999; background-color: rgba(153, 153, 153, 0.4); } .place-value-mat-widget.money .slot-item:not(.ghost).ones { background-image: url("https://webassets.zearn.org/app_assets/tasks/money/1dollar.svg"); } .place-value-mat-widget.money .slot-item:not(.ghost).tens { background-image: url("https://webassets.zearn.org/app_assets/tasks/money/10dollar.svg"); } .place-value-mat-widget.money .slot-item:not(.ghost).hundreds { background-image: url("https://webassets.zearn.org/app_assets/tasks/money/100dollar.svg"); } .place-value-mat-widget .pvm-bank { z-index: 2; } .place-value-mat-widget .pvm-mat { z-index: 1; } .place-value-mat-widget .pvm-mat.has-dragging-tile { z-index: 2; } .place-value-mat-widget .pvm-mat.has-units { background-color: transparent; display: table; border: 0; } .place-value-mat-widget .pvm-counter { z-index: 3; } .place-value-mat-widget .pvm-unit-mat-title-row, .place-value-mat-widget .pvm-unit-mat-row, .place-value-mat-widget .pvm-unit-counter-row { display: table-row; position: relative; } .place-value-mat-widget .pvm-unit-title, .place-value-mat-widget .pvm-unit-mat, .place-value-mat-widget .pvm-unit-counter-wrap { display: table-cell; position: relative; width: 33.33%; border: 0 solid #cdd6d6; } .place-value-mat-widget .pvm-unit-title { color: #333; font-weight: bold; border-width: 3px 2px 0 0; padding: 5px 0; } .place-value-mat-widget .pvm-unit-title:first-child { border-left-width: 3px; } .place-value-mat-widget .pvm-unit-title:last-child { border-right-width: 3px; } .place-value-mat-widget .pvm-unit-mat { height: 210px; background-color: #f3fdff; border-width: 2px 2px 3px 0; } .place-value-mat-widget .pvm-unit-mat:first-child { border-left-width: 3px; } .place-value-mat-widget .pvm-unit-mat:last-child { border-right-width: 3px; } .place-value-mat-widget .pvm-unit-mat.droppable-hover .pvm-mat-highlight { visibility: visible; } .place-value-mat-widget .pvm-unit-mat.droppable-hover.incorrect .pvm-mat-highlight { border-color: #ff4d76; } .place-value-mat-widget .pvm-mat-highlight { visibility: hidden; border: 3px solid #0097b6; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 6; } .place-value-mat-widget .pvm-unit-counter-wrap { z-index: 7; } .place-value-mat-widget .pvm-unit-counter { color: #fff; display: inline-block; position: relative; top: -10px; padding: 5px 20px; border: 0; background-color: #787778; border-radius: 4px; } .place-value-mat-widget .pvm-unit-counter .pvm-num { font-weight: bold; } .place-value-mat-widget .pvm-unit-counter.ones, .place-value-mat-widget .pvm-unit-counter.tens { min-width: 110px; } .place-value-mat-widget .pvm-unit-counter.hundreds { min-width: 150px; } .place-value-mat-widget .pvm-unit-counter.hidden { visibility: hidden; } .place-value-mat-widget.display-only .pvm-mat, .place-value-mat-widget.display-only .pvm-unit-mat { background-color: #fff; } .place-value-mat-widget .pvm-tile { transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-in-out; position: absolute; z-index: 5; visibility: visible; opacity: 1; font-size: 0; line-height: 0; } .place-value-mat-widget .pvm-tile.no-transition { transition-property: none; } .place-value-mat-widget .pvm-tile > .tile-inner { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; border: 2px solid #666; } .place-value-mat-widget .pvm-tile.ghost:not(.money), .place-value-mat-widget .pvm-tile.ghost.money { z-index: 4; transition-property: none; } .place-value-mat-widget .pvm-tile.ghost:not(.money).ones > .tile-inner, .place-value-mat-widget .pvm-tile.ghost:not(.money).tens > .tile-inner, .place-value-mat-widget .pvm-tile.ghost:not(.money).hundreds > .tile-inner, .place-value-mat-widget .pvm-tile.ghost.money.ones > .tile-inner, .place-value-mat-widget .pvm-tile.ghost.money.tens > .tile-inner, .place-value-mat-widget .pvm-tile.ghost.money.hundreds > .tile-inner { background-color: rgba(153, 153, 153, 0.4); background-image: none; border-style: dotted; border-color: #999999; } .place-value-mat-widget .pvm-tile.ghost:not(.money).hidden, .place-value-mat-widget .pvm-tile.ghost.money.hidden { visibility: hidden; opacity: 0; transition-property: all; transition-delay: 0.2s; } .place-value-mat-widget .pvm-tile.ghost:not(.money).bundle-highlight, .place-value-mat-widget .pvm-tile.ghost.money.bundle-highlight { z-index: 9; } .place-value-mat-widget .pvm-tile.ghost:not(.money).bundle-highlight > .tile-inner, .place-value-mat-widget .pvm-tile.ghost.money.bundle-highlight > .tile-inner { border-color: #808080; background-color: rgba(0, 151, 182, 0.5); } .place-value-mat-widget .pvm-tile > .click-zone { display: none; } .place-value-mat-widget .pvm-tile.active, .place-value-mat-widget .pvm-tile.stacked:not(.locked) { position: absolute; } .place-value-mat-widget .pvm-tile.active.ones > .tile-inner, .place-value-mat-widget .pvm-tile.stacked:not(.locked).ones > .tile-inner { border-left-color: #ffdcb0; border-top-color: #ffdcb0; } .place-value-mat-widget .pvm-tile.active.tens > .tile-inner, .place-value-mat-widget .pvm-tile.stacked:not(.locked).tens > .tile-inner { border-left-color: #ffb3b2; border-top-color: #ffb3b2; } .place-value-mat-widget .pvm-tile.active.hundreds > .tile-inner, .place-value-mat-widget .pvm-tile.stacked:not(.locked).hundreds > .tile-inner { border-left-color: #FDEADC; border-top-color: #FDEADC; } .place-value-mat-widget .pvm-tile.active > .click-zone, .place-value-mat-widget .pvm-tile.stacked:not(.locked) > .click-zone { display: block; position: absolute; z-index: 2; } .place-value-mat-widget .pvm-tile.active.ui-draggable-dragging, .place-value-mat-widget .pvm-tile.stacked:not(.locked).ui-draggable-dragging { transition-property: none; } .place-value-mat-widget .pvm-tile.glow > .tile-inner { -webkit-box-shadow: 0 0 0 2px #007b94; -moz-box-shadow: 0 0 0 2px #007b94; -ms-box-shadow: 0 0 0 2px #007b94; -o-box-shadow: 0 0 0 2px #007b94; box-shadow: 0 0 0 2px #007b94; transition-property: all; transition-duration: 0.2s; transition-timing-function: ease-in-out; } .place-value-mat-widget .pvm-tile.bundling { z-index: 10; } .place-value-mat-widget .pvm-tile.bundleable { cursor: pointer; } .place-value-mat-widget .pvm-tile.bundleable > .click-zone { display: block; } .place-value-mat-widget.tiles .pvm-tile.ones { width: 16px; height: 16px; } .place-value-mat-widget.tiles .pvm-tile.ones > .tile-inner { background: #b7a993; border-color: #804800; border-radius: 2px; } .place-value-mat-widget.tiles .pvm-tile.ones.active > .tile-inner, .place-value-mat-widget.tiles .pvm-tile.ones.stacked:not(.locked) > .tile-inner { border-left-color: #ffdcb0; border-top-color: #ffdcb0; } .place-value-mat-widget.tiles .pvm-tile.ones .click-zone { width: 32px; height: 32px; margin-left: -8px; margin-top: -8px; } .place-value-mat-widget.tiles .pvm-tile.ones.bundling > .tile-inner { background-color: #cd1f2e; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .place-value-mat-widget.tiles .pvm-tile.tens { width: 16px; height: 142px; } .place-value-mat-widget.tiles .pvm-tile.tens .click-zone { width: 32px; height: 100%; margin-left: -8px; } .place-value-mat-widget.tiles .pvm-tile.tens > .tile-inner { background-color: #cd1f2e; border-color: #810000; border-radius: 2px; background-image: url(data:image/gif;base64,R0lGODlhDACKAIABAP+zsv///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNzZDMTdFMEJEQjExRTU5QTQxREI3RUU2N0E0NTU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNzZDMTdGMEJEQjExRTU5QTQxREI3RUU2N0E0NTU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MEI5OEFGN0YwQkRBMTFFNTlBNDFEQjdFRTY3QTQ1NTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MEI5OEFGODAwQkRBMTFFNTlBNDFEQjdFRTY3QTQ1NTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4B//79/Pv6+fj39vX08/Lx8O/u7ezr6uno5+bl5OPi4eDf3t3c29rZ2NfW1dTT0tHQz87NzMvKycjHxsXEw8LBwL++vby7urm4t7a1tLOysbCvrq2sq6qpqKempaSjoqGgn56dnJuamZiXlpWUk5KRkI+OjYyLiomIh4aFhIOCgYB/fn18e3p5eHd2dXRzcnFwb25tbGtqaWhnZmVkY2JhYF9eXVxbWllYV1ZVVFNSUVBPTk1MS0pJSEdGRURDQkFAPz49PDs6OTg3NjU0MzIxMC8uLSwrKikoJyYlJCMiISAfHh0cGxoZGBcWFRQTEhEQDw4NDAsKCQgHBgUEAwIBAAAh+QQBAAABACwAAAAADACKAAACPIyPqcvtD6OctB6As8a2+w+GYrOVwIim6vqZGwvHMutq843nUp3p/u/jcYDE4kp4MiqXHiTzCYU4o1RiAQA7); } .place-value-mat-widget.tiles .pvm-tile.tens.active > .tile-inner, .place-value-mat-widget.tiles .pvm-tile.tens.stacked:not(.locked) > .tile-inner { border-left-color: #ffb3b2; border-top-color: #ffb3b2; } .place-value-mat-widget.tiles .pvm-tile.tens.bundling > .tile-inner { background-color: #eb731c; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .place-value-mat-widget.tiles .pvm-tile.hundreds { width: 142px; height: 142px; } .place-value-mat-widget.tiles .pvm-tile.hundreds > .click-zone { width: 100%; height: 100%; } .place-value-mat-widget.tiles .pvm-tile.hundreds > .tile-inner { background-color: #eb731c; border-color: #8C3800; border-radius: 2px; background-image: url(data:image/gif;base64,R0lGODlhigCKAIABAP/Ssf///yH/C1hNUCBEYXRhWE1QPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS4zLWMwMTEgNjYuMTQ1NjYxLCAyMDEyLzAyLzA2LTE0OjU2OjI3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOkZCN0YxMTc0MDcyMDY4MTE4MDgzOUFERDUzMEM2OTEwIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjdCNzZDMTgzMEJEQjExRTU5QTQxREI3RUU2N0E0NTU4IiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjdCNzZDMTgyMEJEQjExRTU5QTQxREI3RUU2N0E0NTU4IiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzYgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGQjdGMTE3NDA3MjA2ODExODA4MzlBREQ1MzBDNjkxMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGQjdGMTE3NDA3MjA2ODExODA4MzlBREQ1MzBDNjkxMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PgH//v38+/r5+Pf29fTz8vHw7+7t7Ovq6ejn5uXk4+Lh4N/e3dzb2tnY19bV1NPS0dDPzs3My8rJyMfGxcTDwsHAv769vLu6ubi3trW0s7KxsK+urayrqqmop6alpKOioaCfnp2cm5qZmJeWlZSTkpGQj46NjIuKiYiHhoWEg4KBgH9+fXx7enl4d3Z1dHNycXBvbm1sa2ppaGdmZWRjYmFgX15dXFtaWVhXVlVUU1JRUE9OTUxLSklIR0ZFRENCQUA/Pj08Ozo5ODc2NTQzMjEwLy4tLCsqKSgnJiUkIyIhIB8eHRwbGhkYFxYVFBMSERAPDg0MCwoJCAcGBQQDAgEAACH5BAEAAAEALAAAAACKAIoAAAL/jI8HybadHlQTyXpnhrv1yoGOGHwRaVroKqbk2LKgC88ydr9eHsa+/cMFdQxaibcb9oBMITHZ1CCL05MS+rRGl86u9EoFP43kqkp83mKzFHRbHYZrvVx2jb6u6/P8OD5b5nb3JZf2N2d3JKhY+HZoSPioE9g4uOcXmXlpAdDp+QkaKjpKWmp6ipqqukopadmHuAkp65jYqgk7m1tL+wpoxrvrGyvM6Ao8rIvZa4y7XLx4yyxdTP0bjdw8nW2E7V2pXZ39fWxN/Ix+PsbNTu6sTmSuDB+cPn9fv+6+vS+emI8vGcCBAguGszepHTh5BA/SK8EqosSJFCtOVFgO47uA/w7jaeS38CMbhgZJdmxosh/CkiJXnnxhMmbLhy9ncpSpkmbOmzZRjgu502dQg0Nr4gQKrujRjEWV9mTZFClTqRuF/jP6FKvTGRa7ev0K9lTWpVWhJqUKcqrasmPbbr1KNi3buCPdovV3dq3cvXiPvdXbd+5Vs4Bd0nX5V3BiZosD8zU8WOtdyI2vTaZ5GHPkzDwrPwwLOrToi547Xzb9j7PVwpoHqyas+HTC0qtj+5UN+3HrvLZ760bNlnZux8Qtswb+u7ad15KPK68rvLlvaLilJx+OuDrz7ZvtOsf+ebT48eQ9eZ9OuXp07lG/Wy+++7Z79tq7rz/PuP799ujj9/9HTt18+MHH0X76qXeggNEZqCCCDT74X0MMRgheQOVdiCFYA6YHYX4dEvgch7Zs6N91NU1oInMoglihhAlS+J6Iy5EIoIwBwkjfh8bhSGOI+ryYYlYr2kikTkCyGGOJ0B1ZZI3hZQhllKv02GKVSXo0pJJNzsakll4W2KWTYvqIZZhknkmUmVbmOGKWY1rpJppXuqjjl3KmpOaca/5U55t6/hnnnvwFGaieUh6KKClU/snmjIU2umSfdwqZJ6RbwrSopUZKKmiej2ZqX6WgujaqqKR+uqCpqsrHI6q8EboqhYnOSmupnAIaK6zuuXprN7kiqeKvlzIaaq+2timsnXAVJutnsMbyiuyzzHIpbbXRtjptQQUAADs=); } .place-value-mat-widget.tiles .pvm-tile.hundreds.active > .tile-inner, .place-value-mat-widget.tiles .pvm-tile.hundreds.stacked:not(.locked) > .tile-inner { border-left-color: #FDEADC; border-top-color: #FDEADC; } .place-value-mat-widget.money .pvm-bank { height: 70px; } .place-value-mat-widget.money .pvm-tile, .place-value-mat-widget.money .pvm-tile > .click-zone { width: 68px; height: 32px; } .place-value-mat-widget.money .pvm-tile > .tile-inner, .place-value-mat-widget.money .pvm-tile.active > .tile-inner, .place-value-mat-widget.money .pvm-tile.stacked:not(.locked) > .tile-inner { border-width: 3px; border-color: transparent; } .place-value-mat-widget.discs .pvm-mat { width: 826px; } .place-value-mat-widget.discs .pvm-tile, .place-value-mat-widget.discs .pvm-tile > .click-zone { width: 34px; height: 34px; } .place-value-mat-widget.discs .pvm-tile > .tile-inner, .place-value-mat-widget.discs .pvm-tile.active > .tile-inner, .place-value-mat-widget.discs .pvm-tile.stacked:not(.locked) > .tile-inner { border-width: 3px; border-color: transparent; } .place-value-mat-widget.correct .pvm-mat:not(.has-units), .place-value-mat-widget.correct .pvm-unit-mat { -webkit-animation: matBackgroundFlashCorrect 1s; -moz-animation: matBackgroundFlashCorrect 1s; -ms-animation: matBackgroundFlashCorrect 1s; -o-animation: matBackgroundFlashCorrect 1s; animation: matBackgroundFlashCorrect 1s; } .place-value-mat-widget.correct .pvm-mat:not(.has-units) { border-color: #00c372; } .place-value-mat-widget.correct .pvm-unit-mat { border-bottom-color: #00c372; } .place-value-mat-widget.correct .pvm-unit-mat:first-child { border-left-color: #00c372; } .place-value-mat-widget.correct .pvm-unit-mat:last-child { border-right-color: #00c372; } .place-value-mat-widget.correct .pvm-unit-title { border-top-color: #00c372; } .place-value-mat-widget.correct .pvm-unit-title:first-child { border-left-color: #00c372; } .place-value-mat-widget.correct .pvm-unit-title:last-child { border-right-color: #00c372; } .place-value-mat-widget.incorrect.try-again .pvm-mat:not(.has-units), .place-value-mat-widget.incorrect.try-again .pvm-unit-mat { background-color: #ffe3ee; } .place-value-mat-widget.incorrect:not(.try-again) .pvm-mat:not(.has-units), .place-value-mat-widget.incorrect:not(.try-again) .pvm-unit-mat { -webkit-animation: matBackgroundFlashIncorrect 1s; -moz-animation: matBackgroundFlashIncorrect 1s; -ms-animation: matBackgroundFlashIncorrect 1s; -o-animation: matBackgroundFlashIncorrect 1s; animation: matBackgroundFlashIncorrect 1s; } .place-value-mat-widget.incorrect .pvm-mat:not(.has-units) { border-color: #ff4d76; } .place-value-mat-widget.incorrect .pvm-unit-mat { border-bottom-color: #ff4d76; } .place-value-mat-widget.incorrect .pvm-unit-mat:first-child { border-left-color: #ff4d76; } .place-value-mat-widget.incorrect .pvm-unit-mat:last-child { border-right-color: #ff4d76; } .place-value-mat-widget.incorrect .pvm-unit-title { border-top-color: #ff4d76; } .place-value-mat-widget.incorrect .pvm-unit-title:first-child { border-left-color: #ff4d76; } .place-value-mat-widget.incorrect .pvm-unit-title:last-child { border-right-color: #ff4d76; } .place-value-mat-widget .pvm-buttons { text-align: right; margin-top: 10px; } .place-value-mat-widget .pvm-try-again-cover { display: block; position: absolute; z-index: 11; cursor: pointer; } .place-value-mat-widget .pvm-try-again-cover.hidden { display: none; } .active-task .place-value-mat-widget.input-enabled .pvm-tile.active { cursor: pointer; } .active-task .place-value-mat-widget.input-enabled .pvm-tile.active.hover, .active-task .place-value-mat-widget.input-enabled .pvm-tile.active.ui-draggable-dragging { z-index: 8; } .active-task .place-value-mat-widget.input-enabled .pvm-tile.active.hover > .tile-inner, .active-task .place-value-mat-widget.input-enabled .pvm-tile.active.ui-draggable-dragging > .tile-inner { box-shadow: 0 0 0 3px #007b94; } .active-task .place-value-mat-widget.input-enabled .pvm-mat .pvm-tile.ghost:not(.taken) { cursor: pointer; } .active-task .place-value-mat-widget.input-enabled.money .pvm-tile.active { cursor: pointer; } .active-task .place-value-mat-widget.input-enabled.money .pvm-tile.active.hover, .active-task .place-value-mat-widget.input-enabled.money .pvm-tile.active.ui-draggable-dragging { z-index: 8; } .active-task .place-value-mat-widget.input-enabled.money .pvm-tile.active.hover > .tile-inner, .active-task .place-value-mat-widget.input-enabled.money .pvm-tile.active.ui-draggable-dragging > .tile-inner { border: 3px solid #007b94; box-shadow: 0 0 0 3px transparent; } .super-fill-in .task.align-left { text-align: left; } .super-fill-in .task.align-right { text-align: right; } .task .super-fill-in-widget:not(.vueified-widget) { font-size: 30px; font-family: Oxygen, Verdana, Geneva, sans-serif; color: black; display: inline-block; vertical-align: baseline; } .task .super-fill-in-widget:not(.vueified-widget).align-left { text-align: left; } .task .super-fill-in-widget:not(.vueified-widget).align-right { text-align: right; } .task .super-fill-in-widget:not(.vueified-widget) .token-text.token, .task .super-fill-in-widget:not(.vueified-widget) .math-token.token, .task .super-fill-in-widget:not(.vueified-widget) .div-token.inline.token { vertical-align: baseline; } .task .super-fill-in-widget:not(.vueified-widget) .arrow-way-jump .zearn-input, .task .super-fill-in-widget:not(.vueified-widget) .arrow-way-jump .token { font-size: 25px; } .task .super-fill-in-widget:not(.vueified-widget) .array-token.discs .number-input { font-size: 18px; } .ten-frames-widget { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; font-family: Oxygen, Verdana, Geneva, sans-serif; margin: 10px 0 0 0; vertical-align: middle; } .ten-frames-widget .ten-frame-disc { position: absolute; left: 0px; width: 40px; height: 40px; background-color: transparent; background-size: 40px 40px; -webkit-transition: opacity, 250ms, linear; -moz-transition: opacity, 250ms, linear; -ms-transition: opacity, 250ms, linear; -o-transition: opacity, 250ms, linear; transition: opacity, 250ms, linear; } .ten-frames-widget .ten-frame-disc.tf-disc-a { background-image: url("https://webassets.zearn.org/app_assets/tasks/ten_frames/disc_purple.svg"); } .ten-frames-widget .ten-frame-disc.tf-disc-b { background-image: url("https://webassets.zearn.org/app_assets/tasks/ten_frames/disc_orange.svg"); } .ten-frames-widget .ten-frame-disc.tf-disc-a .face-img, .ten-frames-widget .ten-frame-disc.tf-disc-b .face-img { display: none; background-repeat: no-repeat; height: 150%; margin: -5px 1px; } .ten-frames-widget .ten-frame-disc.tf-disc-a.show-face .face-img, .ten-frames-widget .ten-frame-disc.tf-disc-b.show-face .face-img { display: block; } .ten-frames-widget .ten-frame-disc.ui-draggable:not(.ui-draggable-disabled) { cursor: pointer; } .ten-frames-widget .ten-frame-disc.tf-subtracted { -webkit-transition: all 250ms; -moz-transition: all 250ms; -ms-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; left: 72px; opacity: 0.3; } .ten-frames-widget .ten-frame-disc.tf-subtracted-extra { -webkit-transition: all 250ms; -moz-transition: all 250ms; -ms-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; left: 140px; opacity: 0.3; } .ten-frames-widget .ten-frame-disc.inactive { opacity: 0.3; } .ten-frames-widget .ten-frame-disc.jiggle { -webkit-animation: jiggle 250ms ease-in-out infinite; -moz-animation: jiggle 250ms ease-in-out infinite; -ms-animation: jiggle 250ms ease-in-out infinite; -o-animation: jiggle 250ms ease-in-out infinite; animation: jiggle 250ms ease-in-out infinite; } .ten-frames-widget .ten-frame-disc.pulse { -webkit-animation: pulseunr8z0n 700ms ease-in-out 0ms infinite; -moz-animation: pulseunr8z0n 700ms ease-in-out 0ms infinite; -ms-animation: pulseunr8z0n 700ms ease-in-out 0ms infinite; -o-animation: pulseunr8z0n 700ms ease-in-out 0ms infinite; animation: pulseunr8z0n 700ms ease-in-out 0ms infinite; } @keyframes pulseunr8z0n { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .ten-frames-widget .ten-frame-overflow, .ten-frames-widget .ten-frame { position: relative; display: inline-block; vertical-align: middle; } .ten-frames-widget .ten-frame-overflow .ten-frame-col, .ten-frames-widget .ten-frame .ten-frame-col { display: inline-block; vertical-align: top; } .ten-frames-widget .ten-frame-overflow .ten-frame-col:first-child .ten-frame-cell, .ten-frames-widget .ten-frame .ten-frame-col:first-child .ten-frame-cell { border-right-width: 2px; } .ten-frames-widget .ten-frame-overflow .ten-frame-col:last-child .ten-frame-cell, .ten-frames-widget .ten-frame .ten-frame-col:last-child .ten-frame-cell { border-left-width: 2px; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell, .ten-frames-widget .ten-frame .ten-frame-cell { width: 50px; height: 50px; border-style: solid; border-width: 0px 0px 4px 0; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell:last-child, .ten-frames-widget .ten-frame .ten-frame-cell:last-child { border-bottom-width: 0; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell .ten-frame-slot, .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot { position: relative; width: 40px; height: 40px; top: 3px; left: 4px; border: 4px dotted transparent; border-radius: 30px; -webkit-transition: border-color, 250ms, linear; -moz-transition: border-color, 250ms, linear; -ms-transition: border-color, 250ms, linear; -o-transition: border-color, 250ms, linear; transition: border-color, 250ms, linear; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell .ten-frame-slot .ten-frame-disc, .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc { top: -4px; left: -4px; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-subtracted, .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-subtracted { left: 72px; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-subtracted-extra, .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-subtracted-extra { left: 140px; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell .ten-frame-slot.ui-droppable .ten-frame-disc.ui-draggable.ui-draggable-disabled, .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot.ui-droppable .ten-frame-disc.ui-draggable.ui-draggable-disabled { cursor: default; } .ten-frames-widget .ten-frame-overflow .ten-frame-cell { border-color: transparent; } .ten-frames-widget .ten-frame { border: 3px solid #808080; border-radius: 4px; margin: 0 5px; } .ten-frames-widget .ten-frame.full { background: yellow; } .ten-frames-widget .ten-frame .ten-frame-cell { border-color: #808080; border-width: 2px; background: #f3fdff; -webkit-transition: background, 250ms, linear; -moz-transition: background, 250ms, linear; -ms-transition: background, 250ms, linear; -o-transition: background, 250ms, linear; transition: background, 250ms, linear; } .ten-frames-widget .ten-frame .ten-frame-cell.tf-hint-a .ten-frame-slot:empty, .ten-frames-widget .ten-frame .ten-frame-cell.tf-hint-b .ten-frame-slot:empty { border-color: #808080; } .ten-frames-widget .ten-frame .ten-frame-cell.tf-hint-a { background: #bc7fe3; } .ten-frames-widget .ten-frame .ten-frame-cell.tf-hint-b { background: #f5bfa0; } .ten-frames-widget .ten-frame .ten-frame-cell.tf-hint { background: #6ecbdb; } .ten-frames-widget .ten-frame.tf-incorrect { border: 2px solid red; box-shadow: 0 0 0px 4px red; } .ten-frames-widget .ten-frame.tf-correct { border: 2px solid #0fa566; box-shadow: 0 0 0px 4px #0fa566; } .ten-frames-widget .ten-frame.five-frame .ten-frame-col { margin-right: 0px; } .ten-frames-widget .ten-frame.five-frame .ten-frame-col:nth-child(2) { display: none; } .ten-frames-widget .ten-frame-op { vertical-align: middle; font-size: 40px; margin: 0 20px; } .active-task .ten-frames-widget .ten-frame-disc.ui-draggable:not(.ui-draggable-disabled), .active-task .ten-frames-widget .ten-frame-slot.ui-droppable:not(.ui-droppable-disabled) { cursor: pointer; } .touch-numpad { position: fixed; bottom: 0px; left: 0px; width: 100%; background: #aeadb3; /* Old browsers */ background: -moz-linear-gradient(top, #aeadb3 0%, #43444b 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #aeadb3 0%, #43444b 100%); /* Chrome10+,Safari5.1+ */ background: -ms-linear-gradient(top, #aeadb3 0%, #43444b 100%); /* IE10+ */ background: linear-gradient(to bottom, #aeadb3 0%, #43444b 100%); /* W3C */ min-height: 120px; z-index: 50; border-top: 1px solid black; } .touch-numpad .touch-numpad-button { -webkit-apperance: none; background: #fefefe; /* Old browsers */ background: -moz-linear-gradient(top, #fefefe 0%, #959595 100%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #fefefe 0%, #959595 100%); /* Chrome10+,Safari5.1+ */ background: -ms-linear-gradient(top, #fefefe 0%, #959595 100%); /* IE10+ */ background: linear-gradient(to bottom, #fefefe 0%, #959595 100%); /* W3C */ font-size: 30px; height: 100px; border-radius: 30px; margin: 10px 5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .touch-numpad .touch-numpad-button:active { opacity: 0.5; } .video-player { background: black; width: 800px; margin-top: 20px; margin-left: auto; margin-right: auto; } .video-player .plyr .plyr__captions { transform: translateY(-15px); } .video-player .plyr .plyr__captions span { font-family: Oxygen, Verdana, Geneva, sans-serif; background-color: rgba(0, 0, 0, 0.75); color: white; } .video-player.with-border { width: 802px; } .video-player.with-border .video-wrapper { min-height: 451px; border: 1px solid #b8c5cc; border-bottom: none; } .video-player .video-wrapper { position: relative; } .video-player .video-overlay { position: absolute; width: 100%; height: 100%; cursor: pointer; z-index: 1; background: #323232; opacity: 1; } .video-player .video-circle-play, .video-player .video-buffering-icon, .video-player .long-buffer-menu { position: absolute; top: 50%; left: 50%; } .video-player .video-circle-play { width: 96px; height: 96px; margin-top: -48px; margin-left: -48px; background: url("https://webassets.zearn.org/assets/lessons/circle_play.png"); } .video-player .video-buffering-icon { width: 100px; height: 100px; margin-top: -50px; margin-left: -50px; background: url("https://webassets.zearn.org/app_assets/video_guided_practices/buffering.gif"); border-radius: 10px; z-index: 2; display: none; } .video-player .long-buffer-menu { display: none; background-image: url("https://webassets.zearn.org/assets/DS_Pattern.png"); z-index: 3; width: 300px; height: 200px; margin-top: -100px; margin-left: -150px; text-align: center; padding: 10px; border: 10px solid #b8c5cc; border-radius: 5px; } .video-player .long-buffer-menu .lower-bitrate-link { width: 75%; margin-top: 30px; margin-left: auto; margin-right: auto; } .video-player .video-controls { background: #1cc7e6; height: 60px; padding: 0 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } .video-player .video-controls .play-button { width: 46px; height: 46px; border-radius: 23px; cursor: pointer; border: none; box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.25); background-color: white; color: #007b94; padding: 0 7px; } .video-player .video-controls .play-button:not(.touch-enabled):hover, .video-player .video-controls .play-button:not(.touch-enabled):focus { background-color: #007b94; color: white; } .video-player .video-controls .play-button:not(.touch-enabled):focus:not(:focus-visible):not(:hover) { background-color: white; color: #007b94; } .video-player .video-controls .play-button:not(.touch-enabled):active { background-color: #005c73; color: white; } .video-player .video-controls .play-button:active { background-color: #005c73; color: white; } .video-player .video-controls .play-button .fa-play { display: inline-block; margin-left: 5px; font-size: 24px; } .video-player .video-controls .play-button .fa-pause { display: none; margin-left: 1px; font-size: 24px; } .video-player .video-controls .play-button.playing .fa-play { display: none; } .video-player .video-controls .play-button.playing .fa-pause { display: inline-block; } .video-player .video-controls .play-button.playing:active { background-color: #005c73; } .video-player .video-controls .cc-button { margin: 3px; width: 40px; height: 30px; border-radius: 17.5px; box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.25); background-image: url("https://webassets.zearn.org/app_assets/video_player/video_player_sprites.svg"); background-repeat: no-repeat; background-color: white; background-size: 700%; background-position: -25px -8px; } .video-player .video-controls .cc-button .cc-button-on { display: none; position: relative; transform: rotate(223deg); right: 9px; top: 9px; width: 35px; height: 35px; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/video_player/video_player_sprites.svg"); background-repeat: no-repeat; background-size: 700%; } .video-player .video-controls .cc-button.caption-on .cc-button-on { display: inline-block; background-position: -189px -11px; } .video-player .video-controls .cc-button:not(.touch-enabled):hover, .video-player .video-controls .cc-button:not(.touch-enabled):focus { background-color: #007b94; background-position: -90px -8px; cursor: pointer; } .video-player .video-controls .cc-button:not(.touch-enabled):hover.caption-on .cc-button-on, .video-player .video-controls .cc-button:not(.touch-enabled):focus.caption-on .cc-button-on { background-position: -161px -11px; } .video-player .video-controls .cc-button:not(.touch-enabled):hover:active, .video-player .video-controls .cc-button:not(.touch-enabled):focus:active { background-color: #005c73; } .video-player .video-controls .cc-button:not(.touch-enabled):hover:active .cc-button-on, .video-player .video-controls .cc-button:not(.touch-enabled):focus:active .cc-button-on { background-position: -132px -11px; } .video-player .video-controls .cc-button.touch-enabled:active { background-color: #005c73; background-position: -90px -8px; } .video-player .video-controls .cc-button.touch-enabled:active.caption-on .cc-button-on { background-position: -132px -11px; } .video-player .video-controls #progress-area { width: 559px; display: inline-block; vertical-align: middle; position: relative; } .video-player .video-controls #time-label, .video-player .video-controls #end-label { display: inline-block; vertical-align: middle; color: #303b40; font-size: 15px; min-width: 32px; text-align: center; font-weight: bold; } .video-player .video-controls #time-label { margin-left: 8px; } .video-player .video-controls #end-label { margin-right: 8px; visibility: hidden; } .video-player .video-controls #progress-bar { width: 559px; height: 34px; border-radius: 18px; overflow: hidden; position: relative; background: white; background: linear-gradient(to bottom, white 0%, #e4e4e4 100%); } .video-player .video-controls #progress-bar-shadow { position: absolute; border-radius: 18px; width: 100%; height: 100%; box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, 0.5); } .video-player .video-controls #progress-loaded { background-color: #e4e4e4; height: 100%; width: 0px; } .video-player .video-controls #current-progress { height: 100%; width: 0px; background-color: #005c73; } .video-player .video-stoppage-marker { position: absolute; top: 0; width: 2px; height: 100%; background: #303b40; } .video-player .video-stoppage-marker .video-stoppage-marker-circle-container { position: absolute; width: 18px; height: 18px; left: -8px; top: 9px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .video-player .video-stoppage-marker .video-stoppage-marker-circle { width: 18px; height: 18px; border-radius: 15px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5); overflow: hidden; border: 1px solid #303b40; } .video-player .video-stoppage-marker .video-stoppage-marker-circle .video-stoppage-marker-circle-top, .video-player .video-stoppage-marker .video-stoppage-marker-circle .video-stoppage-marker-circle-bottom { background: white; width: 100%; height: 50%; } @-webkit-keyframes circlePulse { 0%, 100% { border-width: 1px; } 50% { border-width: 3px; } } @-moz-keyframes circlePulse { 0%, 100% { border-width: 1px; } 50% { border-width: 3px; } } @-o-keyframes circlePulse { 0%, 100% { border-width: 1px; } 50% { border-width: 3px; } } @keyframes circlePulse { 0%, 100% { border-width: 1px; } 50% { border-width: 3px; } } .video-player .video-stoppage-marker.pulse .video-stoppage-marker-circle-container { width: 21px; height: 21px; left: -10px; top: 7px; } .video-player .video-stoppage-marker.pulse .video-stoppage-marker-circle { box-sizing: content-box; width: 15px; height: 15px; -webkit-animation: circlePulse 800ms; -moz-animation: circlePulse 800ms; -ms-animation: circlePulse 800ms; -o-animation: circlePulse 800ms; animation: circlePulse 800ms; } .video-player .video-stoppage-marker.started .video-stoppage-marker-circle-bottom, .video-player .video-stoppage-marker.completed .video-stoppage-marker-circle-top { background: #1cc7e6; } .video-player .video-stoppage-marker:hover.completed .video-stoppage-marker-circle-bottom, .video-player .video-stoppage-marker:hover.completed .video-stoppage-marker-circle-top { background: #ccffff; } .video-player:not(.simple) .video-controls #progress-bar { cursor: pointer; } .qtip.tooltip { background: white; background: linear-gradient(to bottom, white 0%, #e4e4e4 100%); border-radius: 6px; color: #303b40; font-size: 12px; line-height: 10px; min-width: 10px; border-color: #e4e4e4; box-shadow: 0px 1px 1px 2px rgba(0, 0, 0, 0.25); font-weight: bold; } .qtip.tooltip .qtip-content { text-align: center; padding: 2px 5px; } .feed #footer { margin-bottom: 70px; } .zearn-keypad { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: fixed; width: 1024px; height: 60px; left: 50%; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); bottom: 0px; border-top: 1px solid #e4e4e4; background: white; text-align: center; z-index: 20; font-family: Oxygen, Verdana, Geneva, sans-serif; white-space: nowrap; box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); } .zearn-keypad:not(.pinned-to-tg) { box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5), 0px -4px 12px #cccccc; } .zearn-keypad:not(.pinned-to-tg).extended { height: 244px; } .zearn-keypad.pinned-to-tg { position: absolute; bottom: -60px; top: auto !important; } .zearn-keypad.with-fading { -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .zearn-keypad.with-fading.fade-out { opacity: 0; pointer-events: none; } .zearn-keypad.extended { z-index: 100; } .zearn-keypad .zearn-keypad-controls-left { width: 30px; margin-left: 20px; margin-right: auto; } .zearn-keypad .zearn-keypad-input-keys { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 770px; } .zearn-keypad .zearn-keypad-controls-right { margin-left: auto; margin-right: 20px; } .zearn-keypad .zearn-keypad-choice { display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; height: 45px; margin: 0px 5px; font-size: 24px; font-weight: 600; border-width: 1px; border-style: solid; } .zearn-keypad .zearn-keypad-choice:not(.inactive) { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; cursor: pointer; } .zearn-keypad .zearn-keypad-choice.hidden { display: none; } .zearn-keypad .zearn-keypad-choice:not(.zearn-keypad-enter):not(.zearn-keypad-back) { width: 45px; color: #007b94; border-color: #0097b6; border-radius: 100%; background-color: white; } .zearn-keypad .zearn-keypad-choice:not(.zearn-keypad-enter):not(.zearn-keypad-back):hover:not(.inactive):not(.touch), .zearn-keypad .zearn-keypad-choice:not(.zearn-keypad-enter):not(.zearn-keypad-back).pressed.touch { background-color: #e9fbff; } .zearn-keypad .zearn-keypad-choice:not(.zearn-keypad-enter):not(.zearn-keypad-back).inactive { color: #cccccc; border-color: #cccccc; } .zearn-keypad .zearn-keypad-choice.zearn-keypad-undo .zearn-keypad-undo-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -14px -91px; width: 21px; height: 14px; } .zearn-keypad .zearn-keypad-choice.zearn-keypad-undo.inactive .zearn-keypad-undo-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -55px -91px; } .zearn-keypad .zearn-keypad-enter { color: white; background-color: #007b94; border-radius: 25px; padding: 0 24px; border: 1px; letter-spacing: 0.5px; } .zearn-keypad .zearn-keypad-enter:hover:not(.inactive):not(.touch), .zearn-keypad .zearn-keypad-enter.pressed.touch { border-color: #005c73; background-color: #005c73; } .zearn-keypad .zearn-keypad-enter.inactive { border-color: #cccccc; background-color: #cccccc; } .zearn-keypad .zearn-keypad-enter.with-right-arrow .zearn-keypad-enter-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -53px -15px; } .zearn-keypad .zearn-keypad-enter.with-down-arrow .zearn-keypad-enter-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -91px -15px; } .zearn-keypad .zearn-keypad-enter .zearn-keypad-enter-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -15px -15px; display: inline-block; width: 18px; height: 18px; margin-left: 8px; } .zearn-keypad .zearn-keypad-enter .zearn-keypad-enter-text { display: inline-block; } .zearn-keypad .zearn-keypad-back { border-color: transparent; } .zearn-keypad .zearn-keypad-back .zearn-keypad-back-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -15px -53px; width: 18px; height: 18px; } .zearn-keypad .zearn-keypad-back:hover:not(.inactive):not(.touch) .zearn-keypad-back-icon, .zearn-keypad .zearn-keypad-back.pressed.touch .zearn-keypad-back-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -53px -53px; } .zearn-keypad .zearn-keypad-back.inactive .zearn-keypad-back-icon { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -91px -53px; } /* apply a natural box layout model to all elements */ * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .tooltip { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } input { padding: 0px; font-family: Oxygen, Verdana, Geneva, sans-serif; } input[type=checkbox] { cursor: pointer; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0px; font-family: Oxygen, Verdana, Geneva, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } body.g6plus { font-family: "Source Sans Pro", Verdana, Geneva, sans-serif; } body.g6plus input { font-family: "Source Sans Pro", Verdana, Geneva, sans-serif; } body.modal-popup-present { overflow: hidden; } a { cursor: pointer; text-decoration: none; } a img { border: 0; } p { font-size: 20px; } li { list-style-type: none; } main { margin: 10px; margin-bottom: 0px; position: relative; } .stack > *:not(.active) { display: none; } .ie8 .stack.problems .tower, .ie8 .stack.problems .stage { display: none; } .ie8 .stack.problems .tower.active, .ie8 .stack.problems .stage.active { display: block; } .ie8 #learning-lab .stack .learning-lab-home, .ie8 #learning-lab .stack .lab-sections { display: none; } .ie8 #learning-lab .stack .learning-lab-home.active, .ie8 #learning-lab .stack .lab-sections.active { display: block; } .header { background: gray; color: white; text-align: right; padding: 2px; padding-left: 10px; padding-right: 10px; margin-bottom: 30px; height: 30px; font-size: 20px; line-height: 30px; } .header a { color: lightGray; } .clear { clear: both; } .left { float: left; } .right { float: right; } .flash-message { padding: 10px; margin: 5px; text-align: center; } .caret { margin-top: 23px; margin-left: 5px; display: inline-block; vertical-align: top; border-top: 4px solid white; border-right: 4px solid transparent; border-left: 4px solid transparent; } .caret.black { margin-top: 13px; border-top: 4px solid black; } .dropdown-menu { font-size: 15px; text-align: left; padding: 0; margin: 5px; border-top: 1px solid #c1d8ed; color: black; list-style-type: none; list-style: none; display: none; } .dropdown-menu a, .dropdown-menu .dropdown-item { display: block; padding: 5px; line-height: 20px; color: #333333; white-space: nowrap; } .dropdown-menu a:hover { background: #f0f5f7; } .roadblock main { margin-bottom: 55px; } html.landing-page { height: 100%; } html.landing-page body { font-family: Oxygen, Verdana, Geneva, sans-serif; height: 100%; } @media (max-width: 767px) { html.landing-page body .inner { margin: auto; } html.landing-page body .inner .content { width: 100%; } } body.inquiry_forms { background-color: white; } body.inquiry_forms header.external-header { margin-bottom: 0; } body.inquiry_forms footer.external-footer { background-color: #2b124c; margin-top: 0; } body.landing_page { background-color: #ebebeb; } body.landing_page:not(.vue) { font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 0px; color: #444; /*start jobs styles */ /*end jobs styles */ } body.landing_page:not(.vue) .inner { width: 90%; margin: auto; } body.landing_page:not(.vue) .jobs-page .content { max-width: 960px; margin: 0 auto; padding-top: 40px; background-color: white; border-radius: 4px; -webkit-box-shadow: 1px 1px 3px 0 rgba(128, 128, 128, 0.5); -moz-box-shadow: 1px 1px 3px 0 rgba(128, 128, 128, 0.5); -ms-box-shadow: 1px 1px 3px 0 rgba(128, 128, 128, 0.5); -o-box-shadow: 1px 1px 3px 0 rgba(128, 128, 128, 0.5); box-shadow: 1px 1px 3px 0 rgba(128, 128, 128, 0.5); } body.landing_page:not(.vue) .jobs-page #yellow-box { margin-top: 30px; padding: 50px 70px; width: 100%; background-color: #fad232; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media only screen and (max-width: 767px) { body.landing_page:not(.vue) .jobs-page #yellow-box { padding: 20px; } } body.landing_page:not(.vue) .jobs-page #brainy { width: 150px; height: 145px; background-image: url("https://webassets.zearn.org/app_assets/general/characters/Brain.png"); background-repeat: no-repeat; background-size: contain; } body.landing_page:not(.vue) .jobs-page h1 { font-size: 30px; font-weight: 300; line-height: 34px; text-align: center; color: #303b40; margin-top: 45px; margin-bottom: 25px; } body.landing_page:not(.vue) .jobs-page .box-title { font-size: 20px; font-weight: 300; line-height: 28px; color: #303b40; text-align: center; max-width: 100%; margin-top: 0px; margin-bottom: 0px; } body.landing_page:not(.vue) .jobs-page .title { text-align: center; font-size: 36px; font-weight: 300; color: #303b40; margin: 0 auto; } body.landing_page:not(.vue) .jobs-page h2 { font-size: 16px; color: #303b40; margin: 40px 0 0 60px; } @media only screen and (max-width: 767px) { body.landing_page:not(.vue) .jobs-page h2 { text-align: center; margin-left: 0; } } body.landing_page:not(.vue) .jobs-page #textcontainer { padding: 35px 50px 45px 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media only screen and (max-width: 767px) { body.landing_page:not(.vue) .jobs-page #textcontainer { padding: 20px; } } body.landing_page:not(.vue) .jobs-page #roles { width: 250px; margin-right: 60px; margin-bottom: 30px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } body.landing_page:not(.vue) .jobs-page #descriptions { min-width: 400px; -webkit-flex-grow: 1; flex-grow: 1; -webkit-flex-shrink: 1; flex-shrink: 1; -webkit-flex-basis: 300px; flex-basis: 300px; } @media only screen and (max-width: 767px) { body.landing_page:not(.vue) .jobs-page #descriptions { min-width: 100%; } } body.landing_page:not(.vue) .jobs-page .job-title { cursor: pointer; font-weight: normal; font-size: 18px; color: #303b40; margin: 7px 0; } body.landing_page:not(.vue) .jobs-page .job-title.selected { font-size: 18px; color: #007b94; font-weight: 700; } body.landing_page:not(.vue) .jobs-page .job-title.selected:hover { color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-title:hover { color: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text { display: none; } body.landing_page:not(.vue) .jobs-page .job-text.showing { display: block; } body.landing_page:not(.vue) .jobs-page .job-text .whr-title { color: #303b40; font-size: 20px; margin-top: 6px; margin-bottom: 20px; display: inline-block; } body.landing_page:not(.vue) .jobs-page .job-text .whr-info .whr-code { display: none; } body.landing_page:not(.vue) .jobs-page .job-text .whr-info .whr-date { display: none; } body.landing_page:not(.vue) .jobs-page .job-text a { line-height: inherit; font-size: inherit; display: inline; font-weight: 600; } body.landing_page:not(.vue) .jobs-page .job-text a .standard-link-main { position: relative; border-bottom: 1px solid; margin-bottom: -1px; } body.landing_page:not(.vue) .jobs-page .job-text a.stand-alone-link:not(:hover) .standard-link-main { border-bottom: 0 solid; margin-bottom: 0; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled) { color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled) i { color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled) :deep(svg.side-icon) .stroke { stroke: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled) :deep(svg.side-icon) .fill { fill: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus i { color: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus :deep(svg.side-icon) .stroke { stroke: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus :deep(svg.side-icon) .fill { fill: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus:not(:focus-visible):not(:hover) i { color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):active i { color: #003e4d; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):active :deep(svg.side-icon) .stroke { stroke: #003e4d; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):active :deep(svg.side-icon) .fill { fill: #003e4d; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled) .standard-link-main::after { background: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):hover, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus { color: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus .standard-link-main::after { background: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus:not(:focus-visible):not(:hover) { color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):active { color: #003e4d; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):active .standard-link-main::after { background: #003e4d; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):hover .standard-link-main, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus .standard-link-main { border-bottom: 4px solid; margin-bottom: -4px; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus:not(:focus-visible):not(:hover).stand-alone-link .standard-link-main { border-bottom: 0 solid; margin-bottom: 0; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled):focus:not(:focus-visible):not(:hover) .standard-link-main { border-bottom: 1 solid; margin-bottom: -1; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus:not(:focus-visible):not(:hover) i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:active i { color: rgba(255, 255, 255, 0.8); } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:active :deep(svg.side-icon) .stroke { stroke: rgba(255, 255, 255, 0.8); } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:active :deep(svg.side-icon) .fill { fill: rgba(255, 255, 255, 0.8); } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link .standard-link-main::after { background: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:hover, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus .standard-link-main::after { background: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus:not(:focus-visible):not(:hover) { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:active { color: rgba(255, 255, 255, 0.8); } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link:active .standard-link-main::after { background: rgba(255, 255, 255, 0.8); } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua { color: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua i { color: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua :deep(svg.side-icon) .stroke { stroke: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua :deep(svg.side-icon) .fill { fill: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus i { color: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus :deep(svg.side-icon) .stroke { stroke: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus :deep(svg.side-icon) .fill { fill: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus:not(:focus-visible):not(:hover) i { color: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:active i { color: #6dddf2; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:active :deep(svg.side-icon) .stroke { stroke: #6dddf2; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:active :deep(svg.side-icon) .fill { fill: #6dddf2; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua .standard-link-main::after { background: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:hover, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus { color: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus .standard-link-main::after { background: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus:not(:focus-visible):not(:hover) { color: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #1cc7e6; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:active { color: #6dddf2; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-link-aqua:active .standard-link-main::after { background: #6dddf2; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple i { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple :deep(svg.side-icon) .stroke { stroke: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple :deep(svg.side-icon) .fill { fill: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus i { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus :deep(svg.side-icon) .stroke { stroke: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus :deep(svg.side-icon) .fill { fill: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus:not(:focus-visible):not(:hover) i { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:active i { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:active :deep(svg.side-icon) .stroke { stroke: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:active :deep(svg.side-icon) .fill { fill: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple .standard-link-main::after { background: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:hover, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus .standard-link-main::after { background: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus:not(:focus-visible):not(:hover) { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:active { color: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-purple:active .standard-link-main::after { background: #2b124c; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red { color: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red i { color: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red :deep(svg.side-icon) .stroke { stroke: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red :deep(svg.side-icon) .fill { fill: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus i { color: #981339; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus :deep(svg.side-icon) .stroke { stroke: #981339; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus :deep(svg.side-icon) .fill { fill: #981339; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus:not(:focus-visible):not(:hover) i { color: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:active i { color: #66002b; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:active :deep(svg.side-icon) .stroke { stroke: #66002b; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:active :deep(svg.side-icon) .fill { fill: #66002b; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red .standard-link-main::after { background: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:hover, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus { color: #981339; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus .standard-link-main::after { background: #981339; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus:not(:focus-visible):not(:hover) { color: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #cc1f50; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:active { color: #66002b; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-red:active .standard-link-main::after { background: #66002b; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus:not(:focus-visible):not(:hover) i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:active i { color: black; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:active :deep(svg.side-icon) .stroke { stroke: black; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:active :deep(svg.side-icon) .fill { fill: black; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:hover, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus:not(:focus-visible):not(:hover) { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:active { color: black; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-charcoal:active .standard-link-main::after { background: black; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal { color: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal i { color: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal :deep(svg.side-icon) .stroke { stroke: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal :deep(svg.side-icon) .fill { fill: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus i { color: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus :deep(svg.side-icon) .stroke { stroke: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus :deep(svg.side-icon) .fill { fill: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus:not(:focus-visible):not(:hover) i { color: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:active i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:active :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:active :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal .standard-link-main::after { background: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:hover, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus { color: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus .standard-link-main::after { background: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus:not(:focus-visible):not(:hover) { color: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #435259; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:active { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).color-variant-light-charcoal:active .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background i { justify-content: center; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; background-color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus i { background-color: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus:not(:focus-visible):not(:hover) i { background-color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:active i { background-color: #003e4d; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background i { color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background :deep(svg.side-icon) .stroke { stroke: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background :deep(svg.side-icon) .fill { fill: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus:not(:focus-visible):not(:hover) i { color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:active i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:active :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:active :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus i { border-color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background:focus:not(:focus-visible):not(:hover) i { border-color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).secondary-icon-rounded-background i { border: 1px solid; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background i { justify-content: center; border-radius: 50%; width: 32px; height: 32px; display: inline-flex; align-items: center; background-color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus i { background-color: #005c73; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus:not(:focus-visible):not(:hover) i { background-color: #007b94; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:active i { background-color: #003e4d; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:hover i, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus:not(:focus-visible):not(:hover) i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:active i { color: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:active :deep(svg.side-icon) .stroke { stroke: white; } body.landing_page:not(.vue) .jobs-page .job-text a:not(.disabled).inverted-icon-rounded-background:active :deep(svg.side-icon) .fill { fill: white; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:hover i, body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus:not(:focus-visible):not(:hover) i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:active i { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:active :deep(svg.side-icon) .stroke { stroke: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:active :deep(svg.side-icon) .fill { fill: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:hover, body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus:not(:focus-visible):not(:hover) { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:active { color: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled:active .standard-link-main::after { background: #303b40; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled .standard-link-main { border-bottom: 0 solid; margin-bottom: 0; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04 { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04 i { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04 :deep(svg.side-icon) .stroke { stroke: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04 :deep(svg.side-icon) .fill { fill: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:hover i, body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus i { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:hover :deep(svg.side-icon) .stroke, body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus :deep(svg.side-icon) .stroke { stroke: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:hover :deep(svg.side-icon) .fill, body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus :deep(svg.side-icon) .fill { fill: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus:not(:focus-visible):not(:hover) i { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .stroke { stroke: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus:not(:focus-visible):not(:hover) :deep(svg.side-icon) .fill { fill: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:active i { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:active :deep(svg.side-icon) .stroke { stroke: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:active :deep(svg.side-icon) .fill { fill: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04 .standard-link-main::after { background: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:hover, body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:hover .standard-link-main::after, body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus .standard-link-main::after { background: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus:not(:focus-visible):not(:hover) { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:focus:not(:focus-visible):not(:hover) .standard-link-main::after { background: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:active { color: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04:active .standard-link-main::after { background: #b3b3b3; } body.landing_page:not(.vue) .jobs-page .job-text a.disabled.disabled-variant-black04 .standard-link-main { border-bottom: 1px solid; margin-bottom: -1px; } body.landing_page:not(.vue) .jobs-page .job-text a .side-icon { vertical-align: middle; margin-top: -4.16px; } body.landing_page:not(.vue) .jobs-page .job-text a .side-icon.side-icon-left { margin-right: 8px; } body.landing_page:not(.vue) .jobs-page .job-text a .side-icon.side-icon-right { margin-left: 8px; } body.landing_page:not(.vue) .jobs-page .job-text p { margin-top: 0px; margin-bottom: 20px; font-size: 16px; color: #303b40; font-weight: 300; line-height: 24px; } body.landing_page:not(.vue) .jobs-page .job-text ul { margin-top: 5px; margin-bottom: 20px; } body.landing_page:not(.vue) .jobs-page .job-text ol { margin-top: 5px; margin-bottom: 0px; } body.landing_page:not(.vue) .jobs-page .job-text li { margin-top: 5px; color: #303b40; font-size: 16px; font-weight: 300; line-height: 24px; list-style-type: circle; } body.video_guided_practices, body.pd_video_sessions { background-color: #ebebeb; } body.video_guided_practices #footer, body.pd_video_sessions #footer { background: none; } #guided-practice { width: 1024px; margin-left: auto; margin-right: auto; margin-bottom: 20px; position: relative; } #guided-practice #guided-practice-header { margin-left: 60px; } #guided-practice #guided-practice-checkpoint { display: none; position: absolute; top: 700px; z-index: 2; transition: all 500ms; } #guided-practice #guided-practice-checkpoint .checkpoint-time { position: absolute; top: 10px; right: 140px; font-size: 12px; z-index: 4; } #guided-practice #guided-practice-checkpoint .tasks-page { -webkit-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); -moz-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); -ms-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); -o-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); } #guided-practice #guided-practice-checkpoint .task-group { padding-bottom: 50px; } #guided-practice #guided-practice-checkpoint.raise { transform: translate(0px, -700px); } #guided-practice #guided-practice-checkpoint.raise.reset { position: relative; z-index: auto; top: 0; transition: none; transform: none; } #guided-practice #guided-practice-checkpoint.lower { transform: translate(0px, 700px); } .tower-sprite, .tower #tower-bottom, .tower .tower-cell, .tower #lockup { background-image: url("https://webassets.zearn.org/app_assets/towers/tower_sprites4.png"); background-repeat: no-repeat; } body.towers main { margin: 0px auto; width: 100%; min-width: 1024px; } body.towers.tower-page { background-color: #ebebeb; } body.tower-page .stage, body.tower-page .final-screen { margin: 0px; } body.tower-page .task-group { box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); min-height: 422px; padding-bottom: 60px; } body.tower-page .zearn-keypad.pinned-to-tg { bottom: 0px; } body.towers.old-tower { background-image: url("https://webassets.zearn.org/assets/DS_Pattern.png"); } body.towers #footer { min-height: initial; background: transparent; } body.towers .flag-pole { background-image: url("https://webassets.zearn.org/app_assets/general/flags/flagpole.png"); background-size: 14px; height: 87px; width: 14px; } .tower .white-bar { position: absolute; z-index: 1; top: 0px; height: 150px; width: 100%; min-width: 960px; opacity: 0.7; filter: alpha(opacity=70); background: white; } .tower #lockup { z-index: 2; position: absolute; left: 50%; margin-left: -83px; top: 32px; width: 166px; height: 73px; background-position: 0px -651px; } .tower .tower-area { position: relative; margin: 0px auto 60px auto; left: 22px; background-image: url("https://webassets.zearn.org/app_assets/towers/tower_bg_sprites.png"); background-repeat: no-repeat; width: 1022px; height: 625px; } .tower .tower-area.completed-0 { background-position: 0 0; } .tower .tower-area.completed-1 { background-position: 0 -625px; } .tower .tower-area.completed-2 { background-position: -1022px 0; } .tower .tower-area.completed-3 { background-position: -1022px -622px; } .tower .tower-area.completed-4, .tower .tower-area.completed-5 { background-position: -1022px -1247px; } .tower .tower-background { z-index: -1; position: absolute; top: -122px; left: -10px; opacity: 0.6; } .tower .tower-button { margin-left: auto; margin-right: auto; position: relative; right: 3px; height: 34px; } .tower .tower-button:hover { height: 32px; } .tower .whole-tower { position: relative; height: 410px; z-index: 1; } .tower .whole-tower.height-3 { top: 123px; } .tower .whole-tower.height-3 .flag-right { position: absolute; top: 42px; left: 635px; } .tower .whole-tower.height-3 .tower-row.stage-3 { z-index: 2; top: 0px; } .tower .whole-tower.height-3 .tower-row.stage-3 .tower-cell { left: -16px; } .tower .whole-tower.height-3 .tower-row.stage-3 .tower-button { top: 60px; left: 22px; } .tower .whole-tower.height-3 .tower-row.stage-2 { z-index: 1; top: 160px; } .tower .whole-tower.height-3 .tower-row.stage-2 .tower-cell { left: 38px; } .tower .whole-tower.height-3 .tower-row.stage-2 .tower-button { top: 64px; left: -26px; } .tower .whole-tower.height-3 .tower-row.stage-1 { top: 327px; } .tower .whole-tower.height-3 .tower-row.stage-1 .tower-cell { left: -20px; } .tower .whole-tower.height-3 .tower-row.stage-1 .tower-button { top: 68px; left: 20px; } .tower .whole-tower.height-3 .tower-cell.stage-1 { width: 271px; height: 176px; } .tower .whole-tower.height-3 .tower-cell.stage-1.not-started { background-position: -570px -1074px; } .tower .whole-tower.height-3 .tower-cell.stage-1.in-progress { background-position: -285px -1074px; } .tower .whole-tower.height-3 .tower-cell.stage-1.completed { background-position: 0 -1074px; } .tower .whole-tower.height-3 .tower-cell.stage-1.completed { background-position: 0 0; } .tower .whole-tower.height-3 .tower-cell.stage-1.in-progress { background-position: -271px 0; } .tower .whole-tower.height-3 .tower-cell.stage-1.not-started { background-position: -542px 0; } .tower .whole-tower.height-3 .tower-cell.stage-2 { width: 271px; height: 208px; } .tower .whole-tower.height-3 .tower-cell.stage-2.completed { background-position: -813px 0; } .tower .whole-tower.height-3 .tower-cell.stage-2.in-progress { background-position: -1084px 0; } .tower .whole-tower.height-3 .tower-cell.stage-2.locked { background-position: 0 -208px; } .tower .whole-tower.height-3 .tower-cell.stage-2.not-started { background-position: -271px -208px; } .tower .whole-tower.height-3 .tower-cell.stage-3 { width: 279px; height: 199px; } .tower .whole-tower.height-3 .tower-cell.stage-3.completed { background-position: -542px -208px; } .tower .whole-tower.height-3 .tower-cell.stage-3.in-progress { background-position: -821px -208px; } .tower .whole-tower.height-3 .tower-cell.stage-3.locked { background-position: -1100px -208px; } .tower .whole-tower.height-3 .tower-cell.stage-3.not-started { background-position: -542px -407px; } .tower .whole-tower.height-4, .tower .whole-tower.height-1, .tower .whole-tower.height-2 { top: 207px; left: -22px; } .tower .whole-tower.height-4 .tower-row.stage-4, .tower .whole-tower.height-1 .tower-row.stage-4, .tower .whole-tower.height-2 .tower-row.stage-4 { top: 0px; } .tower .whole-tower.height-4 .tower-row.stage-4 .tower-cell, .tower .whole-tower.height-1 .tower-row.stage-4 .tower-cell, .tower .whole-tower.height-2 .tower-row.stage-4 .tower-cell { width: 190px; left: 4px; } .tower .whole-tower.height-4 .tower-row.stage-3, .tower .whole-tower.height-1 .tower-row.stage-3, .tower .whole-tower.height-2 .tower-row.stage-3 { top: 96px; } .tower .whole-tower.height-4 .tower-row.stage-3 .tower-cell, .tower .whole-tower.height-1 .tower-row.stage-3 .tower-cell, .tower .whole-tower.height-2 .tower-row.stage-3 .tower-cell { left: 25px; width: 233px; } .tower .whole-tower.height-4 .tower-row.stage-3 .tower-button, .tower .whole-tower.height-1 .tower-row.stage-3 .tower-button, .tower .whole-tower.height-2 .tower-row.stage-3 .tower-button { right: 28px; } .tower .whole-tower.height-4 .tower-row.stage-2, .tower .whole-tower.height-1 .tower-row.stage-2, .tower .whole-tower.height-2 .tower-row.stage-2 { top: 193px; } .tower .whole-tower.height-4 .tower-row.stage-1, .tower .whole-tower.height-1 .tower-row.stage-1, .tower .whole-tower.height-2 .tower-row.stage-1 { height: 120px; top: 290px; } .tower .whole-tower.height-4 .tower-row.stage-1 .tower-cell, .tower .whole-tower.height-4 .tower-row.stage-2 .tower-cell, .tower .whole-tower.height-1 .tower-row.stage-1 .tower-cell, .tower .whole-tower.height-1 .tower-row.stage-2 .tower-cell, .tower .whole-tower.height-2 .tower-row.stage-1 .tower-cell, .tower .whole-tower.height-2 .tower-row.stage-2 .tower-cell { width: 284px; } .tower .whole-tower.height-4 .tower-cell.stage-1, .tower .whole-tower.height-1 .tower-cell.stage-1, .tower .whole-tower.height-2 .tower-cell.stage-1 { width: 285px; height: 121px; } .tower .whole-tower.height-4 .tower-cell.stage-1.not-started, .tower .whole-tower.height-1 .tower-cell.stage-1.not-started, .tower .whole-tower.height-2 .tower-cell.stage-1.not-started { background-position: -570px -1074px; } .tower .whole-tower.height-4 .tower-cell.stage-1.in-progress, .tower .whole-tower.height-1 .tower-cell.stage-1.in-progress, .tower .whole-tower.height-2 .tower-cell.stage-1.in-progress { background-position: -285px -1074px; } .tower .whole-tower.height-4 .tower-cell.stage-1.completed, .tower .whole-tower.height-1 .tower-cell.stage-1.completed, .tower .whole-tower.height-2 .tower-cell.stage-1.completed { background-position: 0 -1074px; } .tower .whole-tower.height-4 .tower-cell.stage-2, .tower .whole-tower.height-1 .tower-cell.stage-2, .tower .whole-tower.height-2 .tower-cell.stage-2 { width: 285px; height: 131px; } .tower .whole-tower.height-4 .tower-cell.stage-2.locked, .tower .whole-tower.height-1 .tower-cell.stage-2.locked, .tower .whole-tower.height-2 .tower-cell.stage-2.locked { background-position: -285px -1205px; } .tower .whole-tower.height-4 .tower-cell.stage-2.not-started, .tower .whole-tower.height-1 .tower-cell.stage-2.not-started, .tower .whole-tower.height-2 .tower-cell.stage-2.not-started { background-position: -570px -1205px; } .tower .whole-tower.height-4 .tower-cell.stage-2.in-progress, .tower .whole-tower.height-1 .tower-cell.stage-2.in-progress, .tower .whole-tower.height-2 .tower-cell.stage-2.in-progress { background-position: 0 -1205px; } .tower .whole-tower.height-4 .tower-cell.stage-2.completed, .tower .whole-tower.height-1 .tower-cell.stage-2.completed, .tower .whole-tower.height-2 .tower-cell.stage-2.completed { background-position: -855px -1074px; } .tower .whole-tower.height-4 .tower-cell.stage-3, .tower .whole-tower.height-1 .tower-cell.stage-3, .tower .whole-tower.height-2 .tower-cell.stage-3 { width: 234px; height: 131px; } .tower .whole-tower.height-4 .tower-cell.stage-3.locked, .tower .whole-tower.height-1 .tower-cell.stage-3.locked, .tower .whole-tower.height-2 .tower-cell.stage-3.locked { background-position: -1089px -1205px; } .tower .whole-tower.height-4 .tower-cell.stage-3.not-started, .tower .whole-tower.height-1 .tower-cell.stage-3.not-started, .tower .whole-tower.height-2 .tower-cell.stage-3.not-started { background-position: -1355px 0px; } .tower .whole-tower.height-4 .tower-cell.stage-3.in-progress, .tower .whole-tower.height-1 .tower-cell.stage-3.in-progress, .tower .whole-tower.height-2 .tower-cell.stage-3.in-progress { background-position: -855px -1205px; } .tower .whole-tower.height-4 .tower-cell.stage-3.completed, .tower .whole-tower.height-1 .tower-cell.stage-3.completed, .tower .whole-tower.height-2 .tower-cell.stage-3.completed { background-position: -1140px -1074px; } .tower .whole-tower.height-4 .tower-cell.stage-4, .tower .whole-tower.height-1 .tower-cell.stage-4, .tower .whole-tower.height-2 .tower-cell.stage-4 { width: 191px; height: 130px; } .tower .whole-tower.height-4 .tower-cell.stage-4.completed, .tower .whole-tower.height-1 .tower-cell.stage-4.completed, .tower .whole-tower.height-2 .tower-cell.stage-4.completed { background-position: -1379px -131px; } .tower .whole-tower.height-4 .tower-cell.stage-4.in-progress, .tower .whole-tower.height-1 .tower-cell.stage-4.in-progress, .tower .whole-tower.height-2 .tower-cell.stage-4.in-progress { background-position: -1379px -261px; } .tower .whole-tower.height-4 .tower-cell.stage-4.locked, .tower .whole-tower.height-1 .tower-cell.stage-4.locked, .tower .whole-tower.height-2 .tower-cell.stage-4.locked { background-position: -1379px -391px; } .tower .whole-tower.height-4 .tower-cell.stage-4.not-started, .tower .whole-tower.height-1 .tower-cell.stage-4.not-started, .tower .whole-tower.height-2 .tower-cell.stage-4.not-started { background-position: -1363px -521px; } .tower .whole-tower.height-5 { top: 123px; } .tower .whole-tower.height-5 .flag-right { position: absolute; top: 42px; left: 637px; } .tower .whole-tower.height-5 .tower-row.stage-5 { z-index: 4; top: 0px; } .tower .whole-tower.height-5 .tower-row.stage-5 .tower-cell { left: -14px; } .tower .whole-tower.height-5 .tower-row.stage-5 .tower-button { top: 16px; left: 27px; } .tower .whole-tower.height-5 .tower-row.stage-4 { z-index: 3; top: 102px; } .tower .whole-tower.height-5 .tower-row.stage-4 .tower-cell { left: 40px; } .tower .whole-tower.height-5 .tower-row.stage-4 .tower-button { top: 0px; left: -32px; } .tower .whole-tower.height-5 .tower-row.stage-3 { z-index: 2; top: 188px; } .tower .whole-tower.height-5 .tower-row.stage-3 .tower-cell { left: -18px; } .tower .whole-tower.height-5 .tower-row.stage-3 .tower-button { top: 16px; left: 27px; } .tower .whole-tower.height-5 .tower-row.stage-2 { z-index: 1; top: 294px; } .tower .whole-tower.height-5 .tower-row.stage-2 .tower-cell { left: 39px; } .tower .whole-tower.height-5 .tower-row.stage-2 .tower-button { top: 6px; left: -28px; } .tower .whole-tower.height-5 .tower-row.stage-1 { top: 384px; } .tower .whole-tower.height-5 .tower-row.stage-1 .tower-cell { left: -19px; } .tower .whole-tower.height-5 .tower-row.stage-1 .tower-button { top: 24px; left: 28px; } .tower .whole-tower.height-5 .tower-cell.stage-5 { width: 279px; height: 149px; } .tower .whole-tower.height-5 .tower-cell.stage-5.completed { background-position: -271px -925px; } .tower .whole-tower.height-5 .tower-cell.stage-5.in-progress { background-position: -550px -925px; } .tower .whole-tower.height-5 .tower-cell.stage-5.locked { background-position: -829px -925px; } .tower .whole-tower.height-5 .tower-cell.stage-5.not-started { background-position: -1108px -925px; } .tower .whole-tower.height-5 .tower-cell.stage-4 { width: 271px; height: 135px; } .tower .whole-tower.height-5 .tower-cell.stage-4.completed { background-position: -271px -790px; } .tower .whole-tower.height-5 .tower-cell.stage-4.in-progress { background-position: -542px -790px; } .tower .whole-tower.height-5 .tower-cell.stage-4.locked { background-position: -813px -790px; } .tower .whole-tower.height-5 .tower-cell.stage-4.not-started { background-position: -1084px -790px; } .tower .whole-tower.height-5 .tower-cell.stage-3 { width: 271px; height: 151px; } .tower .whole-tower.height-5 .tower-cell.stage-3.completed { background-position: -542px -639px; } .tower .whole-tower.height-5 .tower-cell.stage-3.in-progress { background-position: -813px -639px; } .tower .whole-tower.height-5 .tower-cell.stage-3.locked { background-position: -1084px -639px; } .tower .whole-tower.height-5 .tower-cell.stage-3.not-started { background-position: 0 -790px; } .tower .whole-tower.height-5 .tower-cell.stage-2 { width: 271px; height: 115px; } .tower .whole-tower.height-5 .tower-cell.stage-2.completed { background-position: -271px -524px; } .tower .whole-tower.height-5 .tower-cell.stage-2.in-progress { background-position: -821px -524px; } .tower .whole-tower.height-5 .tower-cell.stage-2.locked { background-position: -1092px -524px; } .tower .whole-tower.height-5 .tower-cell.stage-2.not-started { background-position: -271px -639px; } .tower .whole-tower.height-5 .tower-cell.stage-1 { width: 271px; height: 117px; } .tower .whole-tower.height-5 .tower-cell.stage-1.completed { background-position: -821px -407px; } .tower .whole-tower.height-5 .tower-cell.stage-1.in-progress { background-position: -1092px -407px; } .tower .whole-tower.height-5 .tower-cell.stage-1.not-started { background-position: 0 -524px; } .tower .tower-row { width: 100%; position: absolute; pointer-events: none; } .tower .tower-cell { pointer-events: auto; margin-left: auto; margin-right: auto; cursor: pointer; position: relative; padding-top: 45px; } .tower .tower-cell.locked, .tower .tower-cell.completed { cursor: default; } .tower #tower-bottom { position: relative; top: 190px; right: -35px; width: 892px; height: 196px; background-position: -1589px 0; } .tower-completer .loading-message { height: 400px; margin-top: 100px; } body.job_results { background-image: url("https://webassets.zearn.org/app_assets/student_home/background-doodle-stars-f.png"); text-align: center; } body.job_results .loading_box { padding: 20px; display: inline-block; background-color: white; border-radius: 10px; } body.job_results .logo { height: 100px; } body.job_results #footer { display: none; } @-webkit-keyframes curve-left { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -moz-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -ms-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -o-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); } } @-moz-keyframes curve-left { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -moz-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -ms-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -o-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); } } @-o-keyframes curve-left { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -moz-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -ms-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -o-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); } } @keyframes curve-left { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -moz-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -ms-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); -o-transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); transform: rotate(-120deg) translate(320px, -900px) rotate(120deg); } } @-webkit-keyframes curve-right { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -moz-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -ms-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -o-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); } } @-moz-keyframes curve-right { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -moz-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -ms-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -o-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); } } @-o-keyframes curve-right { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -moz-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -ms-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -o-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); } } @keyframes curve-right { 0% { -webkit-transform: rotate(0deg) translate(0px) rotate(0deg); -moz-transform: rotate(0deg) translate(0px) rotate(0deg); -ms-transform: rotate(0deg) translate(0px) rotate(0deg); -o-transform: rotate(0deg) translate(0px) rotate(0deg); transform: rotate(0deg) translate(0px) rotate(0deg); } 100% { -webkit-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -moz-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -ms-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); -o-transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); transform: rotate(120deg) translate(-320px, -900px) rotate(-120deg); } } .addition-magician.number-sense-task-group { height: 500px; background: #136fcb; } .addition-magician.number-sense-task-group .ns-video .ns-video-button .ns-video-button-image { background-image: url("https://webassets.zearn.org/app_assets/number_sense/teacher_images/am.jpg"); } .addition-magician.number-sense-task-group .ns-video .ns-video-button:not(.expanded) .ns-video-button-image { background-position: -63px -6px; } .addition-magician.number-sense-task-group .ns-video .ns-video-button.expanded { bottom: 26px; } .addition-magician.number-sense-task-group .ns-video .ns-video-button.expanded .ns-video-button-image { bottom: 34px; background-position: -161px 0px; } .addition-magician.number-sense-task-group .ns-video .ns-video-button.expanded.rectify .ns-video-button-image { background-position: -53px 0px; } .addition-magician.number-sense-task-group .ns-video .ns-video-player { bottom: 26px; } .addition-magician.number-sense-task-group .ns-hole-board { z-index: 12; height: 500px; } .addition-magician.number-sense-task-group .ns-hole-board .ns-hole-bg { height: 500px; } .addition-magician.number-sense-task-group .ns-hole-board .ns-hole-mask-rect { height: 500px; } .addition-magician.number-sense-task-group .ns-welcome { padding-top: 25px; } .addition-magician.number-sense-task-group .ns-welcome .am-welcome { width: 100%; height: calc(100% - 25px); } .addition-magician.number-sense-task-group .ns-welcome .am-welcome img { height: 446px; } .addition-magician.number-sense-task-group .ns-welcome .am-welcome .ns-welcome-button { top: 170px; left: 633px; width: 143px; height: 143px; } .addition-magician.number-sense-task-group .ns-welcome .ns-green-circle:not(.big) { top: 170px; left: 633px; width: 143px; height: 143px; } .addition-magician.number-sense-task-group .ns-main { background: white; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; } .addition-magician.number-sense-task-group .ns-main .ns-main-tasks { height: 246px; } .addition-magician.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-equation-task:not(.active-task) .nb-eq-widget { opacity: 0; z-index: 0; -webkit-transition: all 250ms; -moz-transition: all 250ms; -ms-transition: all 250ms; -o-transition: all 250ms; transition: all 250ms; } .addition-magician.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-equation-task.active-task { z-index: 1; } .addition-magician.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-equation-task { position: absolute; left: 0; } .addition-magician.number-sense-task-group .ns-main .ns-main-tasks .task-container { margin: 0; } .addition-magician.number-sense-task-group .ns-main .fluency-complete-buttons { position: absolute; width: 500px; left: calc(50% - 250px); } .addition-magician.number-sense-task-group .nb-eq-widget { height: 0; position: relative; -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; -ms-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; -webkit-transition: margin-top 600ms; -moz-transition: margin-top 600ms; -ms-transition: margin-top 600ms; -o-transition: margin-top 600ms; transition: margin-top 600ms; } .addition-magician.number-sense-task-group .nb-eq-widget.lower { margin-top: 125px; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-a, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b1, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-c { color: #7a00c9; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-a.correct:not(.correct-done), .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-a.incorrect, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b1.correct:not(.correct-done), .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b1.incorrect, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-c.correct:not(.correct-done), .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-c.incorrect { color: white; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-a.try-again, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b1.try-again, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-c.try-again { color: #323232; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-a.zearn-input-box:not(.correct):not(.incorrect):not(.try-again), .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-a.zearn-input-box.correct.correct-done, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b1.zearn-input-box:not(.correct):not(.incorrect):not(.try-again), .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b1.zearn-input-box.correct.correct-done, .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-c.zearn-input-box:not(.correct):not(.incorrect):not(.try-again), .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-c.zearn-input-box.correct.correct-done { border-color: #7a00c9; color: #7a00c9; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b2.zearn-input-box:not(.zearn-input) { border-color: #e4e4e4; background-color: #e4e4e4; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-b2.zearn-input-box.zearn-input.incorrect-done { border-color: black; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-bottom-whole { position: relative; bottom: 4px; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-bottom-whole.correct-done:not(.incorrect-done) { border-color: black; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-top-whole { position: relative; top: 0px; -webkit-transition: top 500ms ease-in; -moz-transition: top 500ms ease-in; -ms-transition: top 500ms ease-in; -o-transition: top 500ms ease-in; transition: top 500ms ease-in; } .addition-magician.number-sense-task-group .nb-eq-widget .nb-eq-top-whole.bottom { top: 166px; } .addition-magician.number-sense-task-group .ten-frames-widget { position: absolute; left: 280px; margin: 0; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards { margin: auto; height: 194px; -webkit-perspective: 1300px; -moz-perspective: 1300px; -ms-perspective: 1300px; -o-perspective: 1300px; perspective: 1300px; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards.active { display: inline-block; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card { position: relative; height: 100%; width: 171px; float: left; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card.preserve { transform-style: preserve-3d; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .front, .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .back { height: 100%; width: 100%; position: absolute; background-repeat: no-repeat; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .back { border-radius: 8px; border: 1px solid #cccccc; background-color: #f6f6f6; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-left .front { background: url("https://webassets.zearn.org/app_assets/number_sense/addition_magician/left-card.svg") no-repeat; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-left .back { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-left.flipped { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-left.flipped .back { -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-left.flipped .front { -ms-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-left:not(.flipped) { overflow: hidden; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-left.swipe { -webkit-animation: curve-left 1s ease-in-out 1 forwards; -moz-animation: curve-left 1s ease-in-out 1 forwards; -ms-animation: curve-left 1s ease-in-out 1 forwards; -o-animation: curve-left 1s ease-in-out 1 forwards; animation: curve-left 1s ease-in-out 1 forwards; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-right .front { background: url("https://webassets.zearn.org/app_assets/number_sense/addition_magician/right-card.svg") no-repeat; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-right .back { -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); -ms-transform: rotateY(-180deg); -o-transform: rotateY(-180deg); transform: rotateY(-180deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-right.flipped { -webkit-transform: rotateY(180deg) translateZ(-1px); -moz-transform: rotateY(180deg) translateZ(-1px); -ms-transform: rotateY(180deg) translateZ(-1px); -o-transform: rotateY(180deg) translateZ(-1px); transform: rotateY(180deg) translateZ(-1px); -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-right.flipped .back { -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-right.flipped .front { -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-right:not(.flipped) { overflow: hidden; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card-right.swipe { -webkit-animation: curve-right 1s ease-in-out 1 forwards; -moz-animation: curve-right 1s ease-in-out 1 forwards; -ms-animation: curve-right 1s ease-in-out 1 forwards; -o-animation: curve-right 1s ease-in-out 1 forwards; animation: curve-right 1s ease-in-out 1 forwards; } .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .am-task-card, .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .front, .addition-magician.number-sense-task-group .ten-frames-widget .am-task-cards .back { -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.22, 0.86, 0.45, 1), left 500ms, right 500ms; -moz-transition: -moz-transform 1.5s cubic-bezier(0.22, 0.86, 0.45, 1), left 500ms, right 500ms; -o-transition: -o-transform 1.5s cubic-bezier(0.22, 0.86, 0.45, 1), left 500ms, right 500ms; transition: transform 1.5s cubic-bezier(0.22, 0.86, 0.45, 1), left 500ms, right 500ms; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer { padding: 13px 0; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame { padding: 2px; background: #656565; border-radius: 0; border: none; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-col:first-child { margin-right: 2px; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell { width: 30px; height: 30px; border: none; background: white; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell:not(:last-child) { margin-bottom: 2px; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell.highlight { background: #fff265; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot { border: none; top: 2px; left: 2px; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc { border-radius: 28px; top: 0; left: 0; width: 26px; height: 26px; -webkit-transition: top 400ms ease-in, left 400ms ease-in, border 500ms; -moz-transition: top 400ms ease-in, left 400ms ease-in, border 500ms; -ms-transition: top 400ms ease-in, left 400ms ease-in, border 500ms; -o-transition: top 400ms ease-in, left 400ms ease-in, border 500ms; transition: top 400ms ease-in, left 400ms ease-in, border 500ms; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-a { background: #7a00c9; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-a.scale { -webkit-animation: pulse 800ms ease-in 1; -moz-animation: pulse 800ms ease-in 1; -ms-animation: pulse 800ms ease-in 1; -o-animation: pulse 800ms ease-in 1; animation: pulse 800ms ease-in 1; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-b { z-index: 1; background: #656565; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-b.scale { -webkit-animation: pulse 800ms ease-in 1; -moz-animation: pulse 800ms ease-in 1; -ms-animation: pulse 800ms ease-in 1; -o-animation: pulse 800ms ease-in 1; animation: pulse 800ms ease-in 1; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-b.tf-hint { background: none; border: solid 1px #656565; } .addition-magician.number-sense-task-group .ten-frames-widget .ten-frame-outer .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-b.fill { border: solid 5px #7a00c9; background: #656565; } .addition-magician-returns.number-sense-task-group { height: 440px; background: #136fcb; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-button .ns-video-button-image { background-image: url("https://webassets.zearn.org/app_assets/number_sense/teacher_images/amr.jpg"); } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-button:not(.expanded) .ns-video-button-image { background-size: 177.7419354839px 100px; background-position: -61px -4px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-button.expanded { bottom: 18px; left: 285.5px; width: 389px; height: 389px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-button.expanded .ns-video-button-image { bottom: 26px; left: 334.2661290323px; width: 375px; height: 375px; background-size: 666.5322580645px 375px; background-position: -133px 0px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-button.expanded.rectify { width: 567px; left: 196.5px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-button.expanded.rectify .ns-video-button-image { background-position: -45px 0px; width: 551px; left: 188.5px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-player:not(.hidden) { bottom: 18px; left: 196.5px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-player:not(.hidden) .ns-video-x { left: 545px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-player:not(.hidden) .video-player { width: 567px; height: 389px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-player:not(.hidden) .video-player .video-wrapper { min-height: 310px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-player:not(.hidden) .video-player .video-controls { height: 63px; } .addition-magician-returns.number-sense-task-group .ns-video .ns-video-player:not(.hidden) .video-player .video-controls #progress-area #progress-bar { width: 317px; } .addition-magician-returns.number-sense-task-group .ns-welcome .amr-welcome { width: 100%; height: 100%; margin-top: -30px; } .addition-magician-returns.number-sense-task-group .ns-welcome .amr-welcome .ns-welcome-button { top: 110px; left: 670px; width: 130px; height: 130px; } .addition-magician-returns.number-sense-task-group .ns-welcome .amr-welcome .ns-green-circle:not(.big) { top: 110px; left: 670px; width: 130px; height: 130px; } .addition-magician-returns.number-sense-task-group .ns-main { background: white; transition: 1s; } .addition-magician-returns.number-sense-task-group .ns-main .ns-hole-board { z-index: 12; } .addition-magician-returns.number-sense-task-group .ns-main .pick-a-card { z-index: 1; width: 30%; height: 20%; position: absolute; left: 35%; top: 30%; font-size: 48px; color: #ff5400; font-weight: 500; transition: 100ms opacity linear; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks { height: 88%; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card { position: absolute; width: 470px; height: 300px; left: 0px; top: 0px; z-index: 2; -webkit-perspective: 1000px; -moz-perspective: 1000px; -ms-perspective: 1000px; -o-perspective: 1000px; perspective: 1000px; cursor: pointer; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.center { -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; top: 100px; left: 245px; transition: 750ms linear; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.center.left-spin { -webkit-transform: rotate(-360deg) scale(1); -moz-transform: rotate(-360deg) scale(1); -ms-transform: rotate(-360deg) scale(1); -o-transform: rotate(-360deg) scale(1); transform: rotate(-360deg) scale(1); } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.center.right-spin { -webkit-transform: rotate(360deg) scale(1); -moz-transform: rotate(360deg) scale(1); -ms-transform: rotate(360deg) scale(1); -o-transform: rotate(360deg) scale(1); transform: rotate(360deg) scale(1); } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.center.shrink { -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); transition: 100ms linear; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.center.disappear { -webkit-transform: translateY(-600px) scale(0.75); -moz-transform: translateY(-600px) scale(0.75); -ms-transform: translateY(-600px) scale(0.75); -o-transform: translateY(-600px) scale(0.75); transform: translateY(-600px) scale(0.75); transition: 200ms linear; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.disabled { cursor: auto; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card .flipper { width: 100%; height: 100%; transition: 600ms; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; -webkit-transform-origin: 100% 50%; -moz-transform-origin: 100% 50%; -ms-transform-origin: 100% 50%; -o-transform-origin: 100% 50%; transform-origin: 100% 50%; -ms-transform-origin: initial; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card .flipper.flipped { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); -ms-transform: rotateX(0deg); } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card .flipper .back, .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card .flipper .front { width: 100%; height: 100%; position: absolute; top: 0; left: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; transition: 600ms; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card .flipper .back { background-repeat: no-repeat; background: url("https://webassets.zearn.org/app_assets/number_sense/addition_magician_returns/back-of-card.svg"); z-index: 2; -webkit-transform: rotateX(0deg); -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card .flipper .front { -webkit-transform: rotateX(180deg); -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotateX(180deg); transform: rotateX(180deg); background-color: white; border-radius: 3px; border: 3px solid lightgray; z-index: 1; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.left { -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -ms-transform-origin: bottom left; -o-transform-origin: bottom left; transform-origin: bottom left; left: 2px; top: -223px; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .amr-task-card.right { left: 490px; top: -223px; -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; -o-transform-origin: bottom right; transform-origin: bottom right; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task { position: absolute; z-index: 1; top: 15px; left: 0px; width: 100%; height: 100%; margin: 0px; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-wrapper .nb-eq-top { left: 0px; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-wrapper .nb-eq-top .nb-eq-top-whole.zearn-input-box.inactive:not(.disabled):not(.grayed) { cursor: pointer; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-wrapper .nb-eq-top .nb-eq-top-whole.zearn-input-box.inactive:not(.disabled).grayed { border-color: #e4e4e4; background-color: #e4e4e4; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-wrapper .nb-eq-bottom { top: 200px; left: 0px; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-part-wrapper { position: absolute; top: 29px; left: 153px; padding: 0; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-part-wrapper .nb-eq-parts { top: 15px; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-part-wrapper .nb-eq-parts .nb-eq-b1:not(.zearn-input) { padding-left: 14px; border: 4px solid transparent; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-part-wrapper .nb-eq-parts .nb-eq-b2:not(.zearn-input) { padding-right: 14px; border: 4px solid transparent; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-part-wrapper .nb-eq-parts .zearn-input.inactive:not(.incorrect):not(.try-again) { border: 4px solid transparent; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-arrows-left { -webkit-transform: scale(0.95); -moz-transform: scale(0.95); -ms-transform: scale(0.95); -o-transform: scale(0.95); transform: scale(0.95); left: 28px; top: 70px; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-arrows-left .left-arrow-1, .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-arrows-left .left-arrow-2 { fill: #323232; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-arrow-right { left: 254px; top: 155px; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .nb-eq-arrow-right .right-arrow-1 { fill: #323232; } .addition-magician-returns.number-sense-task-group .ns-main .ns-main-tasks .addition-magician-returns-equation-task .task .nb-eq-widget .zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(.try-again) { background-color: white; } @-webkit-keyframes jiggleAlien { 0% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 10% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 20% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 30% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 40% { -webkit-transform: translateX(5px) rotate(-5deg); -moz-transform: translateX(5px) rotate(-5deg); -ms-transform: translateX(5px) rotate(-5deg); -o-transform: translateX(5px) rotate(-5deg); transform: translateX(5px) rotate(-5deg); } 50% { -webkit-transform: translateX(5px) rotate(5deg); -moz-transform: translateX(5px) rotate(5deg); -ms-transform: translateX(5px) rotate(5deg); -o-transform: translateX(5px) rotate(5deg); transform: translateX(5px) rotate(5deg); } 60% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 70% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 80% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 90% { -webkit-transform: translateX(0px) rotate(0px); -moz-transform: translateX(0px) rotate(0px); -ms-transform: translateX(0px) rotate(0px); -o-transform: translateX(0px) rotate(0px); transform: translateX(0px) rotate(0px); } } @-moz-keyframes jiggleAlien { 0% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 10% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 20% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 30% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 40% { -webkit-transform: translateX(5px) rotate(-5deg); -moz-transform: translateX(5px) rotate(-5deg); -ms-transform: translateX(5px) rotate(-5deg); -o-transform: translateX(5px) rotate(-5deg); transform: translateX(5px) rotate(-5deg); } 50% { -webkit-transform: translateX(5px) rotate(5deg); -moz-transform: translateX(5px) rotate(5deg); -ms-transform: translateX(5px) rotate(5deg); -o-transform: translateX(5px) rotate(5deg); transform: translateX(5px) rotate(5deg); } 60% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 70% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 80% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 90% { -webkit-transform: translateX(0px) rotate(0px); -moz-transform: translateX(0px) rotate(0px); -ms-transform: translateX(0px) rotate(0px); -o-transform: translateX(0px) rotate(0px); transform: translateX(0px) rotate(0px); } } @-o-keyframes jiggleAlien { 0% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 10% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 20% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 30% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 40% { -webkit-transform: translateX(5px) rotate(-5deg); -moz-transform: translateX(5px) rotate(-5deg); -ms-transform: translateX(5px) rotate(-5deg); -o-transform: translateX(5px) rotate(-5deg); transform: translateX(5px) rotate(-5deg); } 50% { -webkit-transform: translateX(5px) rotate(5deg); -moz-transform: translateX(5px) rotate(5deg); -ms-transform: translateX(5px) rotate(5deg); -o-transform: translateX(5px) rotate(5deg); transform: translateX(5px) rotate(5deg); } 60% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 70% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 80% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 90% { -webkit-transform: translateX(0px) rotate(0px); -moz-transform: translateX(0px) rotate(0px); -ms-transform: translateX(0px) rotate(0px); -o-transform: translateX(0px) rotate(0px); transform: translateX(0px) rotate(0px); } } @keyframes jiggleAlien { 0% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 10% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 20% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 30% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 40% { -webkit-transform: translateX(5px) rotate(-5deg); -moz-transform: translateX(5px) rotate(-5deg); -ms-transform: translateX(5px) rotate(-5deg); -o-transform: translateX(5px) rotate(-5deg); transform: translateX(5px) rotate(-5deg); } 50% { -webkit-transform: translateX(5px) rotate(5deg); -moz-transform: translateX(5px) rotate(5deg); -ms-transform: translateX(5px) rotate(5deg); -o-transform: translateX(5px) rotate(5deg); transform: translateX(5px) rotate(5deg); } 60% { -webkit-transform: translateX(0px) rotate(0deg); -moz-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); -o-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); } 70% { -webkit-transform: translateX(-5px) rotate(-5deg); -moz-transform: translateX(-5px) rotate(-5deg); -ms-transform: translateX(-5px) rotate(-5deg); -o-transform: translateX(-5px) rotate(-5deg); transform: translateX(-5px) rotate(-5deg); } 80% { -webkit-transform: translateX(-5px) rotate(5deg); -moz-transform: translateX(-5px) rotate(5deg); -ms-transform: translateX(-5px) rotate(5deg); -o-transform: translateX(-5px) rotate(5deg); transform: translateX(-5px) rotate(5deg); } 90% { -webkit-transform: translateX(0px) rotate(0px); -moz-transform: translateX(0px) rotate(0px); -ms-transform: translateX(0px) rotate(0px); -o-transform: translateX(0px) rotate(0px); transform: translateX(0px) rotate(0px); } } @-webkit-keyframes shakeAlien { 0% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } 6.6% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 13.2% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 20% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 26.6% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 33.2% { -webkit-transform: translateX(0px) translateY(10px); -moz-transform: translateX(0px) translateY(10px); -ms-transform: translateX(0px) translateY(10px); -o-transform: translateX(0px) translateY(10px); transform: translateX(0px) translateY(10px); } 100% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } } @-moz-keyframes shakeAlien { 0% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } 6.6% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 13.2% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 20% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 26.6% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 33.2% { -webkit-transform: translateX(0px) translateY(10px); -moz-transform: translateX(0px) translateY(10px); -ms-transform: translateX(0px) translateY(10px); -o-transform: translateX(0px) translateY(10px); transform: translateX(0px) translateY(10px); } 100% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } } @-o-keyframes shakeAlien { 0% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } 6.6% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 13.2% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 20% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 26.6% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 33.2% { -webkit-transform: translateX(0px) translateY(10px); -moz-transform: translateX(0px) translateY(10px); -ms-transform: translateX(0px) translateY(10px); -o-transform: translateX(0px) translateY(10px); transform: translateX(0px) translateY(10px); } 100% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } } @keyframes shakeAlien { 0% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } 6.6% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 13.2% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 20% { -webkit-transform: translateX(-5px) translateY(10px); -moz-transform: translateX(-5px) translateY(10px); -ms-transform: translateX(-5px) translateY(10px); -o-transform: translateX(-5px) translateY(10px); transform: translateX(-5px) translateY(10px); } 26.6% { -webkit-transform: translateX(5px) translateY(10px); -moz-transform: translateX(5px) translateY(10px); -ms-transform: translateX(5px) translateY(10px); -o-transform: translateX(5px) translateY(10px); transform: translateX(5px) translateY(10px); } 33.2% { -webkit-transform: translateX(0px) translateY(10px); -moz-transform: translateX(0px) translateY(10px); -ms-transform: translateX(0px) translateY(10px); -o-transform: translateX(0px) translateY(10px); transform: translateX(0px) translateY(10px); } 100% { -webkit-transform: translateX(0px) translateY(0px); -moz-transform: translateX(0px) translateY(0px); -ms-transform: translateX(0px) translateY(0px); -o-transform: translateX(0px) translateY(0px); transform: translateX(0px) translateY(0px); } } .bundle-the-sea.number-sense-task-group { background: #004080; height: 590px; } .bundle-the-sea.number-sense-task-group .ns-welcome .alien-1 { z-index: 5; position: absolute; left: 775px; top: 256px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Alien1.svg"); background-size: 75px 78px; width: 75px; height: 78px; } .bundle-the-sea.number-sense-task-group .ns-welcome .alien-10 { z-index: 6; position: absolute; left: 416px; top: 204px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Alien10.svg"); background-size: 382px 377px; width: 382px; height: 377px; -webkit-transform: rotate(-1deg); -moz-transform: rotate(-1deg); -ms-transform: rotate(-1deg); -o-transform: rotate(-1deg); transform: rotate(-1deg); } .bundle-the-sea.number-sense-task-group .ns-welcome .alien-10-shadow { z-index: 4; position: absolute; left: 441px; top: 531px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_10shadow.svg"); background-size: 223px 70px; width: 223px; height: 70px; } .bundle-the-sea.number-sense-task-group .ns-welcome .alien-100 { z-index: 5; position: absolute; left: 83px; top: 309px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Alien100.svg"); background-size: 160px 164px; width: 160px; height: 164px; } .bundle-the-sea.number-sense-task-group .ns-welcome .alien-100-shadow { z-index: 4; position: absolute; left: 117px; top: 474px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_100shadow.svg"); background-size: 90px 30px; width: 90px; height: 30px; } .bundle-the-sea.number-sense-task-group .ns-welcome .dunes { z-index: 1; position: absolute; left: 0px; bottom: 0px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Dunes.svg"); background-size: 960px 275px; width: 960px; height: 275px; } .bundle-the-sea.number-sense-task-group .ns-welcome .ground { z-index: 3; position: absolute; left: 0px; bottom: 0px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Ground.svg"); background-size: 960px 253px; width: 960px; height: 253px; } .bundle-the-sea.number-sense-task-group .ns-welcome .jellyfish { position: absolute; left: 860px; top: 73px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Jellyfish.svg"); background-size: 84px 158px; width: 84px; height: 158px; } .bundle-the-sea.number-sense-task-group .ns-welcome .octopus { z-index: 2; position: absolute; left: -1px; top: 1px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Octopus.svg"); background-size: 960px 588px; width: 960px; height: 588px; } .bundle-the-sea.number-sense-task-group .ns-welcome .plants { z-index: 5; position: absolute; left: 0px; bottom: 0px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Plants.svg"); background-size: 932px 230px; width: 932px; height: 230px; } .bundle-the-sea.number-sense-task-group .ns-welcome .tentacle { z-index: 6; position: absolute; left: 275px; top: 205px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Tentacle.svg"); background-size: 25px 25px; width: 25px; height: 25px; } .bundle-the-sea.number-sense-task-group .ns-welcome .title { z-index: 5; position: absolute; left: 244px; top: 37px; font-family: "cubano", "Arial Black", sans-serif; color: #ffff73; } .bundle-the-sea.number-sense-task-group .ns-welcome .title .bundle { font-size: 125px; line-height: 151px; } .bundle-the-sea.number-sense-task-group .ns-welcome .title .the-sea { position: relative; top: -54px; left: 3px; font-size: 115px; line-height: 139px; } .bundle-the-sea.number-sense-task-group .ns-welcome .fish-front { z-index: 6; position: absolute; top: 440px; -webkit-animation: fishFront 21000ms linear infinite; -moz-animation: fishFront 21000ms linear infinite; -ms-animation: fishFront 21000ms linear infinite; -o-animation: fishFront 21000ms linear infinite; animation: fishFront 21000ms linear infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_FishFront.svg"); background-size: 275px 70px; width: 275px; height: 70px; } @-webkit-keyframes fishFront { 0% { left: -300px; } 43%, 100% { left: 970px; } } @-moz-keyframes fishFront { 0% { left: -300px; } 43%, 100% { left: 970px; } } @-o-keyframes fishFront { 0% { left: -300px; } 43%, 100% { left: 970px; } } @keyframes fishFront { 0% { left: -300px; } 43%, 100% { left: 970px; } } .bundle-the-sea.number-sense-task-group .ns-welcome .fish-school { z-index: 1; position: absolute; top: 280px; -webkit-animation: fishSchool 21000ms linear infinite; -moz-animation: fishSchool 21000ms linear infinite; -ms-animation: fishSchool 21000ms linear infinite; -o-animation: fishSchool 21000ms linear infinite; animation: fishSchool 21000ms linear infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_FishSchool.svg"); background-size: 110px 100px; width: 110px; height: 100px; } @-webkit-keyframes fishSchool { 0% { left: -240px; } 71%, 100% { left: 970px; } } @-moz-keyframes fishSchool { 0% { left: -240px; } 71%, 100% { left: 970px; } } @-o-keyframes fishSchool { 0% { left: -240px; } 71%, 100% { left: 970px; } } @keyframes fishSchool { 0% { left: -240px; } 71%, 100% { left: 970px; } } .bundle-the-sea.number-sense-task-group .ns-welcome .bubbles-1 { z-index: 0; position: absolute; left: 0px; opacity: 0.5; -webkit-animation: bubbles1 21000ms linear infinite; -moz-animation: bubbles1 21000ms linear infinite; -ms-animation: bubbles1 21000ms linear infinite; -o-animation: bubbles1 21000ms linear infinite; animation: bubbles1 21000ms linear infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Bubbles1.svg"); background-size: 960px 2360px; width: 960px; height: 2360px; } @-webkit-keyframes bubbles1 { from { top: 0px; } to { top: -2360px; } } @-moz-keyframes bubbles1 { from { top: 0px; } to { top: -2360px; } } @-o-keyframes bubbles1 { from { top: 0px; } to { top: -2360px; } } @keyframes bubbles1 { from { top: 0px; } to { top: -2360px; } } .bundle-the-sea.number-sense-task-group .ns-welcome .bubbles-2 { z-index: 6; position: absolute; left: 0px; opacity: 0.5; -webkit-animation: bubbles2 21000ms linear infinite; -moz-animation: bubbles2 21000ms linear infinite; -ms-animation: bubbles2 21000ms linear infinite; -o-animation: bubbles2 21000ms linear infinite; animation: bubbles2 21000ms linear infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/title_Bubbles2.svg"); background-size: 960px 1770px; width: 960px; height: 1770px; } @-webkit-keyframes bubbles2 { from { top: 0px; } to { top: -1180px; } } @-moz-keyframes bubbles2 { from { top: 0px; } to { top: -1180px; } } @-o-keyframes bubbles2 { from { top: 0px; } to { top: -1180px; } } @keyframes bubbles2 { from { top: 0px; } to { top: -1180px; } } .bundle-the-sea.number-sense-task-group .ns-welcome .ns-welcome-button { z-index: 6; position: absolute; left: 695px; top: 98px; width: 110px; height: 110px; } .bundle-the-sea.number-sense-task-group .ns-welcome .ns-welcome-button.ready.fade-out { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-welcome.fade-out { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main { display: block; -webkit-transition: top 500ms ease-in-out, opacity 500ms ease-in-out; -moz-transition: top 500ms ease-in-out, opacity 500ms ease-in-out; -ms-transition: top 500ms ease-in-out, opacity 500ms ease-in-out; -o-transition: top 500ms ease-in-out, opacity 500ms ease-in-out; transition: top 500ms ease-in-out, opacity 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main.pan-up { top: 240px; -webkit-transition: top 1000ms ease-in-out; -moz-transition: top 1000ms ease-in-out; -ms-transition: top 1000ms ease-in-out; -o-transition: top 1000ms ease-in-out; transition: top 1000ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main.hidden { opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .task-container { margin: auto; } .bundle-the-sea.number-sense-task-group .ns-main .bundling-mat-widget { margin-top: 20px; height: 550px; } .bundle-the-sea.number-sense-task-group .ns-main .bundling-input-widget { z-index: 3; position: absolute; width: 100%; bottom: 62px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 125px; position: relative; top: -2px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button { z-index: 3; position: relative; left: 0px; top: 0px; -webkit-transition: left 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: left 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: left 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: left 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: left 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.jiggle { -webkit-animation: jiggleAlien 1000ms ease-in-out; -moz-animation: jiggleAlien 1000ms ease-in-out; -ms-animation: jiggleAlien 1000ms ease-in-out; -o-animation: jiggleAlien 1000ms ease-in-out; animation: jiggleAlien 1000ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.shake { -webkit-animation: shakeAlien 500ms ease-in-out; -moz-animation: shakeAlien 500ms ease-in-out; -ms-animation: shakeAlien 500ms ease-in-out; -o-animation: shakeAlien 500ms ease-in-out; animation: shakeAlien 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.slide-in { left: 960px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.swim-up { top: -375px; -webkit-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); -moz-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); -ms-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); -o-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper { width: 136px; height: 116px; margin: auto; -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; transition: opacity 300ms linear; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper .alien { -webkit-transition: background-position 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition: background-position 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition: background-position 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition: background-position 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: background-position 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275); margin: auto; position: relative; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper .button-label { font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 18px; font-weight: bold; position: relative; top: -28px; left: -2px; padding-top: 4px; pointer-events: none; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/AlienBottom_Active4.svg"); background-size: 140px 34px; width: 140px; height: 34px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper .hundreds-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien100_Active4.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper .tens-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien10_Active5.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper .ones-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien1_Active5.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper.grayed { opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper.grayed .hundreds-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien100_Gray4.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper.grayed .tens-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien10_Gray4.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper.grayed .ones-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien1_Gray4.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper.grayed .button-label { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/AlienBottom_Gray4.svg"); background-size: 140px 34px; width: 140px; height: 34px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .button-wrapper:not(.grayed) { position: relative; top: -116px; opacity: 1; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button:not(.disabled):not(.inactive) .button-wrapper:hover { cursor: pointer; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button:not(.disabled):not(.inactive) .button-wrapper:hover .hundreds-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien100_Hover4.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button:not(.disabled):not(.inactive) .button-wrapper:hover .tens-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien10_Hover4.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button:not(.disabled):not(.inactive) .button-wrapper:hover .ones-alien { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Alien1_Hover4.svg"); background-size: 91px 114px; width: 91px; height: 114px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button:not(.disabled):not(.inactive) .button-wrapper:hover .button-label { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/AlienBottom_Hover4.svg"); background-size: 140px 34px; width: 140px; height: 34px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.inactive .button-wrapper { cursor: auto; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.inactive .button-wrapper .alien { background-position: 0px 62px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.inactive .button-wrapper.grayed { opacity: 1; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button.inactive .button-wrapper:not(.grayed) { opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .claw { position: relative; top: -90px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .claw .claw-arm, .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .claw #claw-head { z-index: -1; position: relative; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area .button .claw #arm-path { stroke-dasharray: 335px; stroke-dashoffset: 335px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.no-hundreds { margin: 0px 180px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.no-hundreds .tens-button, .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.no-hundreds .ones-button { width: 50%; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.no-hundreds .claw-arm { left: 114px; top: -99px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.no-hundreds #claw-head { left: 114px; top: -319px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds { margin: 0px 90px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .hundreds-button, .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .tens-button, .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .ones-button { width: 33.33%; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .hundreds-button .claw-arm, .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .hundreds-button #claw-head { width: 280px; height: 170px; left: 90px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .hundreds-button .claw-arm { top: -85px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .hundreds-button #claw-head { top: -255px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .tens-button .claw-arm, .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .tens-button #claw-head { width: 340px; height: 170px; left: 80px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .tens-button .claw-arm { top: -95px; } .bundle-the-sea.number-sense-task-group .ns-main .buttons-area.with-hundreds .tens-button #claw-head { top: -265px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ground-area { width: 800px; height: 210px; z-index: 2; position: absolute; top: 270px; left: 80px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ground-area .leaf { position: absolute; -webkit-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out; transition: opacity 300ms ease-in-out, background-color 300ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ground-area .leaf.fade-in { opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ground-area .leaf.highlight { background-color: #ffff73; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ground-area .leaf.animate { -webkit-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out; -moz-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out; -ms-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out; -o-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out; transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out; -webkit-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out; -moz-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out; -ms-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out; -o-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out; transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; position: absolute; z-index: 2; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area:not(.inactive) .leaf, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area:not(.inactive) .leaf, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area:not(.inactive) .leaf { cursor: pointer; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf { position: relative; visibility: visible; top: 0px; -webkit-transition: opacity 34ms ease-in-out 466ms, left 500ms ease-in-out, top 500ms ease-in-out, background-color 500ms ease-in-out; -moz-transition: opacity 34ms ease-in-out 466ms, left 500ms ease-in-out, top 500ms ease-in-out, background-color 500ms ease-in-out; -ms-transition: opacity 34ms ease-in-out 466ms, left 500ms ease-in-out, top 500ms ease-in-out, background-color 500ms ease-in-out; -o-transition: opacity 34ms ease-in-out 466ms, left 500ms ease-in-out, top 500ms ease-in-out, background-color 500ms ease-in-out; transition: opacity 34ms ease-in-out 466ms, left 500ms ease-in-out, top 500ms ease-in-out, background-color 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf > .leaf, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf > .leaf, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf > .leaf { position: absolute; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf.animate, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf.animate, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf.animate { -webkit-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; -moz-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; -ms-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; -o-transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; transition: left 500ms ease-in-out, top 500ms ease-in-out, -webkit-transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; -webkit-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; -moz-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; -ms-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; -o-transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; transition: left 500ms ease-in-out, top 500ms ease-in-out, transform 500ms ease-in-out, opacity 34ms ease-in-out 466ms; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf.slow, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf.slow, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf.slow { -webkit-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; -moz-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; -ms-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; -o-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; transition: left 1000ms ease-in-out, top 1000ms ease-in-out, -webkit-transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; -webkit-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; -moz-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; -ms-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; -o-transition: left 1000ms ease-in-out, top 1000ms ease-in-out, transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; transition: left 1000ms ease-in-out, top 1000ms ease-in-out, transform 1000ms ease-in-out, opacity 34ms ease-in-out 966ms; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf.hidden, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf.hidden, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf.hidden { -webkit-transition: opacity 34ms ease-in-out; -moz-transition: opacity 34ms ease-in-out; -ms-transition: opacity 34ms ease-in-out; -o-transition: opacity 34ms ease-in-out; transition: opacity 34ms ease-in-out; opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf.display, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf.display, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf.display { -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf.highlight, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf.highlight, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf.highlight { -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; background-color: #ffff73; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf.fade-out-end, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf.fade-out-end, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf.fade-out-end { -webkit-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; transition: opacity 300ms ease-in-out, top 300ms ease-in-out; top: 12px; opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .leaf.no-animation, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .bubble.no-animation, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .leaf.no-animation, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .bubble.no-animation, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .leaf.no-animation, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .bubble.no-animation { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .ghost, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .ghost, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .ghost { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .ones-area .ghost.hidden, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .tens-area .ghost.hidden, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .hundreds-area .ghost.hidden { opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .mat-area .tens-area, .bundle-the-sea.number-sense-task-group .ns-main .objects-area .mat-area .hundreds-area { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .mat-area .ones-area { -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .mat-area .flag { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/AutocorrectFlag.svg"); background-size: 60px 72px; width: 72px; height: 72px; font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 24px; font-weight: bold; padding-top: 14px; position: absolute; z-index: 3; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .mat-area .flag.hidden { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .mat-area .flag .flag-num { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area .mat-area .reset-area { z-index: 10; position: absolute; cursor: pointer; height: calc(100% + 20px); width: calc(100% + 20px); top: -10px; left: -10px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .leaf.one { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf1.svg"); background-size: 20px 20px; width: 28px; height: 28px; border-radius: 8px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .leaf.one.ghost { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf1_Ghost.svg"); background-size: 20px 20px; width: 28px; height: 28px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .leaf.one.ghost.hidden { opacity: 0; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .leaf.ten { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf10.svg"); background-size: 40px 92px; width: 44px; height: 98px; border-radius: 8px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .leaf.ten.ghost { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf10_Ghost.svg"); background-size: 40px 92px; width: 44px; height: 98px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .leaf.ten.forming { background-image: none; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .leaf.ten.stem { position: absolute; left: 20px; top: 14px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf10_Stem.svg"); background-size: 6px 81px; width: 6px; height: 81px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .bubble { z-index: 2; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .bubble.one { width: 35px; height: 35px; margin-bottom: 5px; margin-right: 4px; border-radius: 50%; left: -3px; top: -3px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .bubble.ten { width: 45px; height: 98px; margin-bottom: 4px; margin-right: 5px; border-radius: 8px; left: 0px; top: 0px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .tens-area { left: 207px; top: 143px; width: 250px; height: 194px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .tens-area .leaf { margin-bottom: 4px; margin-right: 6px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .ones-area { left: 596px; top: 142px; width: 68px; height: 200px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.no-hundreds .ones-area .leaf { margin-bottom: 12px; margin-right: 12px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.one { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf1.svg"); background-size: 12px 12px; width: 16px; height: 16px; border-radius: 5px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.one.ghost { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf1_Ghost.svg"); background-size: 12px 12px; width: 16px; height: 16px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.one.ghost.hidden { opacity: 0; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.ten { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf10.svg"); background-size: 24px 56px; width: 30px; height: 62px; border-radius: 5px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.ten.ghost { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf10_Ghost.svg"); background-size: 24px 56px; width: 30px; height: 62px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.ten.forming { background-image: none; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.ten.stem { position: absolute; left: 14px; top: 9px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf10_Stem.svg"); background-size: 4px 50px; width: 4px; height: 50px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.hundred { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf100_2.svg"); background-size: 73px 105px; width: 77px; height: 107px; border-radius: 7px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.hundred.ghost { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf100_Ghost.svg"); background-size: 73px 105px; width: 77px; height: 107px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.hundred.forming { background-image: none; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.hundred.stem:not(.full) { position: absolute; left: 35px; top: 19px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf100_Stem.svg"); background-size: 9px 86px; width: 9px; height: 86px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .leaf.hundred.stem.full { position: absolute; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Leaf100_StemFull.svg"); background-size: 73px 105px; width: 77px; height: 107px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .bubble { z-index: 2; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .bubble.one { width: 20px; height: 20px; margin-bottom: 4px; margin-right: 4px; border-radius: 50%; top: -3px; left: -2px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .bubble.ten { width: 29px; height: 62px; margin-bottom: 4px; margin-right: 5px; border-radius: 5px; left: 1px; top: 0px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .bubble.hundred { width: 77px; height: 108px; border-radius: 5px; left: 0px; top: -1px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .hundreds-area { left: 100px; top: 144px; width: 243px; height: 219px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .hundreds-area .leaf, .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .hundreds-area .bubble { margin-bottom: 5px; margin-right: 4px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .hundreds-area .leaf:nth-child(4).hundred, .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .hundreds-area .leaf:nth-child(4).bubble, .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .hundreds-area .bubble:nth-child(4).hundred, .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .hundreds-area .bubble:nth-child(4).bubble { margin-left: 41px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .tens-area { left: 397px; top: 144px; width: 170px; height: 128px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .tens-area .leaf { margin-bottom: 4px; margin-right: 4px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .ones-area { left: 720px; top: 144px; width: 40px; height: 120px; } .bundle-the-sea.number-sense-task-group .ns-main .objects-area.with-hundreds .ones-area .leaf { margin-bottom: 8px; margin-right: 8px; } .bundle-the-sea.number-sense-task-group .ns-main .input-area { position: relative; top: 0px; font-size: 30px; font-weight: bold; -webkit-transition: opacity 100ms ease-in-out, top 600ms ease-in-out; -moz-transition: opacity 100ms ease-in-out, top 600ms ease-in-out; -ms-transition: opacity 100ms ease-in-out, top 600ms ease-in-out; -o-transition: opacity 100ms ease-in-out, top 600ms ease-in-out; transition: opacity 100ms ease-in-out, top 600ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .input-area.hidden { opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .input-area.over-card { top: -133px; } .bundle-the-sea.number-sense-task-group .ns-main .input-area.fade-out-end { -webkit-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out, top 300ms ease-in-out; transition: opacity 300ms ease-in-out, top 300ms ease-in-out; opacity: 0; top: 12px; } .bundle-the-sea.number-sense-task-group .ns-main .input-area .label span { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .input-area .label span.highlight { background-color: #ffff73; box-shadow: 0px 1px 0px 5px #ffff73; border-radius: 5px; } .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input { min-width: 66px; height: 58px; font-size: 30px; font-weight: bold; padding-top: 5px; } .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input:not(.correct):not(.correct-done):not(.try-again):not(.incorrect):not(.incorrect-done):not(.unknown) { background-color: white; } .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(:empty) { padding-left: 10px; } .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input.correct, .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input.try-again, .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input.incorrect, .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input.highlight, .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input.unknown { -webkit-transition: background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; transition: background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .input-area .zearn-input.highlight { background-color: #ffff73; } .bundle-the-sea.number-sense-task-group .ns-main .octopus-card { position: relative; top: 56px; left: 142px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/OctopusCard.svg"); background-size: 638px 440px; width: 638px; height: 440px; -webkit-transition: opacity 500ms ease-in-out, top 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out, top 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out, top 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out, top 500ms ease-in-out; transition: opacity 500ms ease-in-out, top 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .octopus-card.hidden { opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .octopus-card.slide-down { top: 590px; -webkit-transition: opacity 300ms ease-in-out, top 1000ms ease-in-out; -moz-transition: opacity 300ms ease-in-out, top 1000ms ease-in-out; -ms-transition: opacity 300ms ease-in-out, top 1000ms ease-in-out; -o-transition: opacity 300ms ease-in-out, top 1000ms ease-in-out; transition: opacity 300ms ease-in-out, top 1000ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .meter-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; position: absolute; left: 10px; top: 20px; z-index: 2; -webkit-transition: left 300ms ease-in-out; -moz-transition: left 300ms ease-in-out; -ms-transition: left 300ms ease-in-out; -o-transition: left 300ms ease-in-out; transition: left 300ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .meter-wrapper.slide-off { left: -60px; } .bundle-the-sea.number-sense-task-group .ns-main .meter { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; min-height: 105px; max-height: 415px; } .bundle-the-sea.number-sense-task-group .ns-main .meter .apparatus { position: absolute; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Apparatus.svg"); background-size: 54px 34px; width: 60px; height: 34px; } .bundle-the-sea.number-sense-task-group .ns-main .meter .tank { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; z-index: -1; background-color: #032640; position: relative; top: 20px; width: 60px; border-radius: 91px; padding: 30px 10px 25px 10px; } .bundle-the-sea.number-sense-task-group .ns-main .bubble { background-color: white; border: 0px solid white; width: 15px; height: 15px; border-radius: 100%; margin-bottom: 5px; } .bundle-the-sea.number-sense-task-group .ns-main .bubble.animate { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .bubble.delayed { -webkit-transition: all 0ms ease-in-out 500ms; -moz-transition: all 0ms ease-in-out 500ms; -ms-transition: all 0ms ease-in-out 500ms; -o-transition: all 0ms ease-in-out 500ms; transition: all 0ms ease-in-out 500ms; } .bundle-the-sea.number-sense-task-group .ns-main .bubble.empty { background-color: #b3b3b3; opacity: 0.4; } .bundle-the-sea.number-sense-task-group .ns-main .bubble.filled { background-color: rgba(241, 217, 255, 0.2); border: 1px solid #f1d9ff; } .bundle-the-sea.number-sense-task-group .ns-main .bubble.filled.wrong { -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out; background-color: rgba(255, 77, 118, 0.3); border: 2px solid #ff4d76; } .bundle-the-sea.number-sense-task-group .ns-main .bubble.filled.wrong.flashing { -webkit-animation: flashBubbles 4000ms ease-in-out infinite; -moz-animation: flashBubbles 4000ms ease-in-out infinite; -ms-animation: flashBubbles 4000ms ease-in-out infinite; -o-animation: flashBubbles 4000ms ease-in-out infinite; animation: flashBubbles 4000ms ease-in-out infinite; } @-webkit-keyframes flashBubbles { 0%, 75% { background-color: rgba(255, 77, 118, 0.3); } 81.25% { background-color: rgb(255, 77, 118); } 87.5% { background-color: rgba(255, 77, 118, 0.3); } 93.75% { background-color: rgb(255, 77, 118); } 100% { background-color: rgba(255, 77, 118, 0.3); } } @-moz-keyframes flashBubbles { 0%, 75% { background-color: rgba(255, 77, 118, 0.3); } 81.25% { background-color: rgb(255, 77, 118); } 87.5% { background-color: rgba(255, 77, 118, 0.3); } 93.75% { background-color: rgb(255, 77, 118); } 100% { background-color: rgba(255, 77, 118, 0.3); } } @-o-keyframes flashBubbles { 0%, 75% { background-color: rgba(255, 77, 118, 0.3); } 81.25% { background-color: rgb(255, 77, 118); } 87.5% { background-color: rgba(255, 77, 118, 0.3); } 93.75% { background-color: rgb(255, 77, 118); } 100% { background-color: rgba(255, 77, 118, 0.3); } } @keyframes flashBubbles { 0%, 75% { background-color: rgba(255, 77, 118, 0.3); } 81.25% { background-color: rgb(255, 77, 118); } 87.5% { background-color: rgba(255, 77, 118, 0.3); } 93.75% { background-color: rgb(255, 77, 118); } 100% { background-color: rgba(255, 77, 118, 0.3); } } .bundle-the-sea.number-sense-task-group .ns-main .bubble.filled.no-animation { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .bundle-the-sea.number-sense-task-group .ns-main .bubble.filled.fade-out { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; opacity: 0; } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; z-index: 2; position: absolute; width: 100%; top: -190px; } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area.start { top: 10px; } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area.swim-up { top: -450px; -webkit-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); -moz-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); -ms-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); -o-transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); transition: top 1000ms cubic-bezier(0.6, -0.28, 0.735, 0.045); } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Jellyfish.svg"); background-size: 55px 100px; width: 55px; height: 100px; margin: 0px 15px; position: relative; } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="0"] { -webkit-animation: floatJellyfish31 4s ease-in-out 310ms infinite; -moz-animation: floatJellyfish31 4s ease-in-out 310ms infinite; -ms-animation: floatJellyfish31 4s ease-in-out 310ms infinite; -o-animation: floatJellyfish31 4s ease-in-out 310ms infinite; animation: floatJellyfish31 4s ease-in-out 310ms infinite; top: 36px; } @-webkit-keyframes floatJellyfish31 { 0% { top: 26px; } 50% { top: 36px; } 100% { top: 26px; } } @-moz-keyframes floatJellyfish31 { 0% { top: 26px; } 50% { top: 36px; } 100% { top: 26px; } } @-o-keyframes floatJellyfish31 { 0% { top: 26px; } 50% { top: 36px; } 100% { top: 26px; } } @keyframes floatJellyfish31 { 0% { top: 26px; } 50% { top: 36px; } 100% { top: 26px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="1"] { -webkit-animation: floatJellyfish32 4s ease-in-out 320ms infinite; -moz-animation: floatJellyfish32 4s ease-in-out 320ms infinite; -ms-animation: floatJellyfish32 4s ease-in-out 320ms infinite; -o-animation: floatJellyfish32 4s ease-in-out 320ms infinite; animation: floatJellyfish32 4s ease-in-out 320ms infinite; top: 37px; } @-webkit-keyframes floatJellyfish32 { 0% { top: 27px; } 50% { top: 37px; } 100% { top: 27px; } } @-moz-keyframes floatJellyfish32 { 0% { top: 27px; } 50% { top: 37px; } 100% { top: 27px; } } @-o-keyframes floatJellyfish32 { 0% { top: 27px; } 50% { top: 37px; } 100% { top: 27px; } } @keyframes floatJellyfish32 { 0% { top: 27px; } 50% { top: 37px; } 100% { top: 27px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="2"] { -webkit-animation: floatJellyfish2 4s ease-in-out 20ms infinite; -moz-animation: floatJellyfish2 4s ease-in-out 20ms infinite; -ms-animation: floatJellyfish2 4s ease-in-out 20ms infinite; -o-animation: floatJellyfish2 4s ease-in-out 20ms infinite; animation: floatJellyfish2 4s ease-in-out 20ms infinite; top: 7px; } @-webkit-keyframes floatJellyfish2 { 0% { top: -3px; } 50% { top: 7px; } 100% { top: -3px; } } @-moz-keyframes floatJellyfish2 { 0% { top: -3px; } 50% { top: 7px; } 100% { top: -3px; } } @-o-keyframes floatJellyfish2 { 0% { top: -3px; } 50% { top: 7px; } 100% { top: -3px; } } @keyframes floatJellyfish2 { 0% { top: -3px; } 50% { top: 7px; } 100% { top: -3px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="3"] { -webkit-animation: floatJellyfish12 4s ease-in-out 120ms infinite; -moz-animation: floatJellyfish12 4s ease-in-out 120ms infinite; -ms-animation: floatJellyfish12 4s ease-in-out 120ms infinite; -o-animation: floatJellyfish12 4s ease-in-out 120ms infinite; animation: floatJellyfish12 4s ease-in-out 120ms infinite; top: 17px; } @-webkit-keyframes floatJellyfish12 { 0% { top: 7px; } 50% { top: 17px; } 100% { top: 7px; } } @-moz-keyframes floatJellyfish12 { 0% { top: 7px; } 50% { top: 17px; } 100% { top: 7px; } } @-o-keyframes floatJellyfish12 { 0% { top: 7px; } 50% { top: 17px; } 100% { top: 7px; } } @keyframes floatJellyfish12 { 0% { top: 7px; } 50% { top: 17px; } 100% { top: 7px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="4"] { -webkit-animation: floatJellyfish27 4s ease-in-out 270ms infinite; -moz-animation: floatJellyfish27 4s ease-in-out 270ms infinite; -ms-animation: floatJellyfish27 4s ease-in-out 270ms infinite; -o-animation: floatJellyfish27 4s ease-in-out 270ms infinite; animation: floatJellyfish27 4s ease-in-out 270ms infinite; top: 32px; } @-webkit-keyframes floatJellyfish27 { 0% { top: 22px; } 50% { top: 32px; } 100% { top: 22px; } } @-moz-keyframes floatJellyfish27 { 0% { top: 22px; } 50% { top: 32px; } 100% { top: 22px; } } @-o-keyframes floatJellyfish27 { 0% { top: 22px; } 50% { top: 32px; } 100% { top: 22px; } } @keyframes floatJellyfish27 { 0% { top: 22px; } 50% { top: 32px; } 100% { top: 22px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="5"] { -webkit-animation: floatJellyfish17 4s ease-in-out 170ms infinite; -moz-animation: floatJellyfish17 4s ease-in-out 170ms infinite; -ms-animation: floatJellyfish17 4s ease-in-out 170ms infinite; -o-animation: floatJellyfish17 4s ease-in-out 170ms infinite; animation: floatJellyfish17 4s ease-in-out 170ms infinite; top: 22px; } @-webkit-keyframes floatJellyfish17 { 0% { top: 12px; } 50% { top: 22px; } 100% { top: 12px; } } @-moz-keyframes floatJellyfish17 { 0% { top: 12px; } 50% { top: 22px; } 100% { top: 12px; } } @-o-keyframes floatJellyfish17 { 0% { top: 12px; } 50% { top: 22px; } 100% { top: 12px; } } @keyframes floatJellyfish17 { 0% { top: 12px; } 50% { top: 22px; } 100% { top: 12px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="6"] { -webkit-animation: floatJellyfish44 4s ease-in-out 440ms infinite; -moz-animation: floatJellyfish44 4s ease-in-out 440ms infinite; -ms-animation: floatJellyfish44 4s ease-in-out 440ms infinite; -o-animation: floatJellyfish44 4s ease-in-out 440ms infinite; animation: floatJellyfish44 4s ease-in-out 440ms infinite; top: 49px; } @-webkit-keyframes floatJellyfish44 { 0% { top: 39px; } 50% { top: 49px; } 100% { top: 39px; } } @-moz-keyframes floatJellyfish44 { 0% { top: 39px; } 50% { top: 49px; } 100% { top: 39px; } } @-o-keyframes floatJellyfish44 { 0% { top: 39px; } 50% { top: 49px; } 100% { top: 39px; } } @keyframes floatJellyfish44 { 0% { top: 39px; } 50% { top: 49px; } 100% { top: 39px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="7"] { -webkit-animation: floatJellyfish1 4s ease-in-out 10ms infinite; -moz-animation: floatJellyfish1 4s ease-in-out 10ms infinite; -ms-animation: floatJellyfish1 4s ease-in-out 10ms infinite; -o-animation: floatJellyfish1 4s ease-in-out 10ms infinite; animation: floatJellyfish1 4s ease-in-out 10ms infinite; top: 6px; } @-webkit-keyframes floatJellyfish1 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } @-moz-keyframes floatJellyfish1 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } @-o-keyframes floatJellyfish1 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } @keyframes floatJellyfish1 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="8"] { -webkit-animation: floatJellyfish9 4s ease-in-out 90ms infinite; -moz-animation: floatJellyfish9 4s ease-in-out 90ms infinite; -ms-animation: floatJellyfish9 4s ease-in-out 90ms infinite; -o-animation: floatJellyfish9 4s ease-in-out 90ms infinite; animation: floatJellyfish9 4s ease-in-out 90ms infinite; top: 14px; } @-webkit-keyframes floatJellyfish9 { 0% { top: 4px; } 50% { top: 14px; } 100% { top: 4px; } } @-moz-keyframes floatJellyfish9 { 0% { top: 4px; } 50% { top: 14px; } 100% { top: 4px; } } @-o-keyframes floatJellyfish9 { 0% { top: 4px; } 50% { top: 14px; } 100% { top: 4px; } } @keyframes floatJellyfish9 { 0% { top: 4px; } 50% { top: 14px; } 100% { top: 4px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish[data-num="9"] { -webkit-animation: floatJellyfish37 4s ease-in-out 370ms infinite; -moz-animation: floatJellyfish37 4s ease-in-out 370ms infinite; -ms-animation: floatJellyfish37 4s ease-in-out 370ms infinite; -o-animation: floatJellyfish37 4s ease-in-out 370ms infinite; animation: floatJellyfish37 4s ease-in-out 370ms infinite; top: 42px; } @-webkit-keyframes floatJellyfish37 { 0% { top: 32px; } 50% { top: 42px; } 100% { top: 32px; } } @-moz-keyframes floatJellyfish37 { 0% { top: 32px; } 50% { top: 42px; } 100% { top: 32px; } } @-o-keyframes floatJellyfish37 { 0% { top: 32px; } 50% { top: 42px; } 100% { top: 32px; } } @keyframes floatJellyfish37 { 0% { top: 32px; } 50% { top: 42px; } 100% { top: 32px; } } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish.swim-up { -webkit-transition: -webkit-transform 500ms ease-in-out; -moz-transition: -webkit-transform 500ms ease-in-out; -ms-transition: -webkit-transform 500ms ease-in-out; -o-transition: -webkit-transform 500ms ease-in-out; transition: -webkit-transform 500ms ease-in-out; -webkit-transition: transform 500ms ease-in-out; -moz-transition: transform 500ms ease-in-out; -ms-transition: transform 500ms ease-in-out; -o-transition: transform 500ms ease-in-out; transition: transform 500ms ease-in-out; -webkit-transform: translateY(-240px); -moz-transform: translateY(-240px); -ms-transform: translateY(-240px); -o-transform: translateY(-240px); transform: translateY(-240px); } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish .highlight { z-index: -1; background-color: white; position: relative; top: -54px; left: -48px; width: 150px; height: 150px; border-radius: 100%; -webkit-transform: scale(0.0067); -moz-transform: scale(0.0067); -ms-transform: scale(0.0067); -o-transform: scale(0.0067); transform: scale(0.0067); -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish .highlight.active { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 0; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .jellyfish-area .jellyfish.done { background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/Jellyfish_Done.svg"); background-size: 55px 100px; width: 55px; height: 100px; } .bundle-the-sea.number-sense-task-group .ns-main .hills { position: absolute; left: 0px; bottom: 0px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/bg_Hills2.svg"); background-size: 960px 365px; width: 960px; height: 365px; -webkit-transition: all 500ms ease-in-out, bottom 1000ms ease-in-out; -moz-transition: all 500ms ease-in-out, bottom 1000ms ease-in-out; -ms-transition: all 500ms ease-in-out, bottom 1000ms ease-in-out; -o-transition: all 500ms ease-in-out, bottom 1000ms ease-in-out; transition: all 500ms ease-in-out, bottom 1000ms ease-in-out; } .bundle-the-sea.number-sense-task-group .ns-main .hills.slide-down { bottom: -125px; } .bundle-the-sea.number-sense-task-group .ns-main .ground { position: absolute; z-index: 2; left: -20px; bottom: -20px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/bg_Ground5.svg"); background-size: 1000px 245px; width: 1000px; height: 245px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group .blur-layer { width: 100%; height: 100%; position: absolute; top: 0px; opacity: 0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .bundle-the-sea.number-sense-task-group.remediating .blur-layer { z-index: 1; background-color: black; opacity: 0.3; } .bundle-the-sea.number-sense-task-group.remediating .hills { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } .bundle-the-sea.number-sense-task-group.blurred .blur-layer { z-index: 3; background-color: #f3fdff; opacity: 0.1; } .bundle-the-sea.number-sense-task-group.blurred .hills, .bundle-the-sea.number-sense-task-group.blurred .ground { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } .bundle-the-sea.number-sense-task-group.blurred .buttons-area { opacity: 0.5; -webkit-filter: blur(7px); -moz-filter: blur(7px); -ms-filter: blur(7px); -o-filter: blur(7px); filter: blur(7px); } .bundle-the-sea.number-sense-task-group .number-sense-finish { display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: none; -webkit-transition: opacity 1000ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out; -o-transition: opacity 1000ms ease-in-out; transition: opacity 1000ms ease-in-out; } .bundle-the-sea.number-sense-task-group .number-sense-finish.hidden { opacity: 0; } .bundle-the-sea.number-sense-task-group .number-sense-finish .fluency-complete-buttons { z-index: 3; display: block; position: relative; top: 163px; } .bundle-the-sea.number-sense-task-group .number-sense-finish .fluency-complete-buttons .activity-complete-buttons-area { width: 450px; } .bundle-the-sea.number-sense-task-group .number-sense-finish .fluency-complete-buttons .activity-complete-buttons-area .acb-zearned-it { color: #ffff73; font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 90px; font-weight: lighter; position: relative; top: -257px; } .bundle-the-sea.number-sense-task-group .number-sense-finish .alien { z-index: 3; position: absolute; left: 375px; -webkit-animation: alienBobs 2000ms ease-in-out infinite; -moz-animation: alienBobs 2000ms ease-in-out infinite; -ms-animation: alienBobs 2000ms ease-in-out infinite; -o-animation: alienBobs 2000ms ease-in-out infinite; animation: alienBobs 2000ms ease-in-out infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/end_Alien.svg"); background-size: 215px 219px; width: 215px; height: 219px; } @-webkit-keyframes alienBobs { 0% { top: 170px; } 50% { top: 190px; } 100% { top: 170px; } } @-moz-keyframes alienBobs { 0% { top: 170px; } 50% { top: 190px; } 100% { top: 170px; } } @-o-keyframes alienBobs { 0% { top: 170px; } 50% { top: 190px; } 100% { top: 170px; } } @keyframes alienBobs { 0% { top: 170px; } 50% { top: 190px; } 100% { top: 170px; } } .bundle-the-sea.number-sense-task-group .number-sense-finish .ground { z-index: 2; position: absolute; bottom: -4px; -webkit-animation: groundSlides 12000ms linear infinite; -moz-animation: groundSlides 12000ms linear infinite; -ms-animation: groundSlides 12000ms linear infinite; -o-animation: groundSlides 12000ms linear infinite; animation: groundSlides 12000ms linear infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/end_Ground2.svg"); background-size: 3840px 590px; width: 3840px; height: 590px; } @-webkit-keyframes groundSlides { from { left: -2880px; } to { left: 0px; } } @-moz-keyframes groundSlides { from { left: -2880px; } to { left: 0px; } } @-o-keyframes groundSlides { from { left: -2880px; } to { left: 0px; } } @keyframes groundSlides { from { left: -2880px; } to { left: 0px; } } .bundle-the-sea.number-sense-task-group .number-sense-finish .hills { z-index: 1; position: absolute; bottom: -3px; -webkit-animation: hillSlides 12000ms linear infinite; -moz-animation: hillSlides 12000ms linear infinite; -ms-animation: hillSlides 12000ms linear infinite; -o-animation: hillSlides 12000ms linear infinite; animation: hillSlides 12000ms linear infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/end_Hills3.svg"); background-size: 1918px 233px; width: 1918px; height: 233px; } @-webkit-keyframes hillSlides { from { left: -958px; } to { left: 0px; } } @-moz-keyframes hillSlides { from { left: -958px; } to { left: 0px; } } @-o-keyframes hillSlides { from { left: -958px; } to { left: 0px; } } @keyframes hillSlides { from { left: -958px; } to { left: 0px; } } .bundle-the-sea.number-sense-task-group .number-sense-finish .peaks { z-index: 0; position: absolute; left: 0px; bottom: 10px; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/end_Peaks.svg"); background-size: 960px 235px; width: 960px; height: 235px; } .bundle-the-sea.number-sense-task-group .number-sense-finish .fish { position: absolute; top: 0; -webkit-animation: fishSlides 14000ms linear infinite; -moz-animation: fishSlides 14000ms linear infinite; -ms-animation: fishSlides 14000ms linear infinite; -o-animation: fishSlides 14000ms linear infinite; animation: fishSlides 14000ms linear infinite; background-repeat: no-repeat; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/bundling/end_Fish.svg"); background-size: 960px 590px; width: 960px; height: 590px; } @-webkit-keyframes fishSlides { from { left: -960px; } to { left: 960px; } } @-moz-keyframes fishSlides { from { left: -960px; } to { left: 960px; } } @-o-keyframes fishSlides { from { left: -960px; } to { left: 960px; } } @keyframes fishSlides { from { left: -960px; } to { left: 960px; } } .bundle-the-sea.number-sense-task-group .number-sense-finish .bubble { border: 1px #ccffff solid; position: absolute; } @-webkit-keyframes bubbleFloat { 0% { opacity: 0; border-width: 1px; width: 10px; height: 10px; border-radius: 5px; left: 600px; top: 350px; } 20% { opacity: 1; } 60%, 100% { opacity: 0; border-width: 3px; width: 30px; height: 30px; border-radius: 15px; left: 740px; top: 300px; } } @-moz-keyframes bubbleFloat { 0% { opacity: 0; border-width: 1px; width: 10px; height: 10px; border-radius: 5px; left: 600px; top: 350px; } 20% { opacity: 1; } 60%, 100% { opacity: 0; border-width: 3px; width: 30px; height: 30px; border-radius: 15px; left: 740px; top: 300px; } } @-o-keyframes bubbleFloat { 0% { opacity: 0; border-width: 1px; width: 10px; height: 10px; border-radius: 5px; left: 600px; top: 350px; } 20% { opacity: 1; } 60%, 100% { opacity: 0; border-width: 3px; width: 30px; height: 30px; border-radius: 15px; left: 740px; top: 300px; } } @keyframes bubbleFloat { 0% { opacity: 0; border-width: 1px; width: 10px; height: 10px; border-radius: 5px; left: 600px; top: 350px; } 20% { opacity: 1; } 60%, 100% { opacity: 0; border-width: 3px; width: 30px; height: 30px; border-radius: 15px; left: 740px; top: 300px; } } .bundle-the-sea.number-sense-task-group .number-sense-finish .bubble.bubble-1 { -webkit-animation: bubbleFloat 5000ms linear 0ms infinite; -moz-animation: bubbleFloat 5000ms linear 0ms infinite; -ms-animation: bubbleFloat 5000ms linear 0ms infinite; -o-animation: bubbleFloat 5000ms linear 0ms infinite; animation: bubbleFloat 5000ms linear 0ms infinite; } .bundle-the-sea.number-sense-task-group .number-sense-finish .bubble.bubble-2 { -webkit-animation: bubbleFloat 5000ms linear 1000ms infinite; -moz-animation: bubbleFloat 5000ms linear 1000ms infinite; -ms-animation: bubbleFloat 5000ms linear 1000ms infinite; -o-animation: bubbleFloat 5000ms linear 1000ms infinite; animation: bubbleFloat 5000ms linear 1000ms infinite; } .bundle-the-sea.number-sense-task-group .number-sense-finish .bubble.bubble-3 { -webkit-animation: bubbleFloat 5000ms linear 2000ms infinite; -moz-animation: bubbleFloat 5000ms linear 2000ms infinite; -ms-animation: bubbleFloat 5000ms linear 2000ms infinite; -o-animation: bubbleFloat 5000ms linear 2000ms infinite; animation: bubbleFloat 5000ms linear 2000ms infinite; } .polar-place-values.number-sense-task-group { height: 590px; } .polar-place-values.number-sense-task-group .task-container { margin: auto; } .polar-place-values.number-sense-task-group .ns-welcome .title { font-family: "cubano", "Arial Black", sans-serif; color: #003e4d; position: absolute; left: 310px; top: 90px; } .polar-place-values.number-sense-task-group .ns-welcome .title .title-polar-place { font-size: 120px; line-height: 100px; } .polar-place-values.number-sense-task-group .ns-welcome .title .title-values { line-height: 90px; font-size: 100px; } .polar-place-values.number-sense-task-group .ns-welcome .ns-welcome-button { position: absolute; left: 431px; top: 395px; width: 98px; height: 98px; } .polar-place-values.number-sense-task-group .ns-welcome .sky { position: absolute; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_Sky.svg"); background-size: 960px 590px; width: 960px; height: 590px; } .polar-place-values.number-sense-task-group .ns-welcome .mountains { position: absolute; top: 198px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_Mountains.svg"); background-size: 960px 392px; width: 960px; height: 392px; } .polar-place-values.number-sense-task-group .ns-welcome .slope { position: absolute; top: 12px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_Slope3.svg"); background-size: 960px 590px; width: 960px; height: 590px; } .polar-place-values.number-sense-task-group .ns-welcome .moose { position: absolute; left: 96px; top: 213px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_Moose.svg"); background-size: 170px 223px; width: 170px; height: 223px; } .polar-place-values.number-sense-task-group .ns-welcome .snow { position: absolute; top: 0px; left: 0px; } @-webkit-keyframes snowFalling { 0% { top: -590px; } 100% { top: 0px; } } @-moz-keyframes snowFalling { 0% { top: -590px; } 100% { top: 0px; } } @-o-keyframes snowFalling { 0% { top: -590px; } 100% { top: 0px; } } @keyframes snowFalling { 0% { top: -590px; } 100% { top: 0px; } } .polar-place-values.number-sense-task-group .ns-welcome .snow.snow-back { -webkit-animation: snowFalling 10000ms linear infinite; -moz-animation: snowFalling 10000ms linear infinite; -ms-animation: snowFalling 10000ms linear infinite; -o-animation: snowFalling 10000ms linear infinite; animation: snowFalling 10000ms linear infinite; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_SnowBack.svg"); background-size: 960px 1180px; width: 960px; height: 1180px; } .polar-place-values.number-sense-task-group .ns-welcome .snow.snow-front { -webkit-animation: snowFalling 16000ms linear infinite; -moz-animation: snowFalling 16000ms linear infinite; -ms-animation: snowFalling 16000ms linear infinite; -o-animation: snowFalling 16000ms linear infinite; animation: snowFalling 16000ms linear infinite; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_SnowFront.svg"); background-size: 960px 1180px; width: 960px; height: 1180px; } .polar-place-values.number-sense-task-group .ns-welcome .ice-cubes { position: absolute; left: 309px; top: 29px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_IceCubes3.svg"); background-size: 651px 207px; width: 651px; height: 207px; } .polar-place-values.number-sense-task-group .ns-welcome .foreground { position: absolute; left: 0; top: 0; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_Foreground2.svg"); background-size: 960px 590px; width: 960px; height: 590px; } .polar-place-values.number-sense-task-group .ns-welcome .seal-fin { position: absolute; top: 300px; left: 630px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/title_SealFin2.svg"); background-size: 328px 174px; width: 328px; height: 174px; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade { opacity: 0; -webkit-transition: opacity 1000ms ease-in-out 1000ms; -moz-transition: opacity 1000ms ease-in-out 1000ms; -ms-transition: opacity 1000ms ease-in-out 1000ms; -o-transition: opacity 1000ms ease-in-out 1000ms; transition: opacity 1000ms ease-in-out 1000ms; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .ns-welcome-button { opacity: 0; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .title { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; -o-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .mountains { top: 258px; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .slope { top: 112px; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .moose { top: 363px; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .ice-cubes { top: 99px; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .foreground { top: 63px; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .seal-fin { top: 363px; } .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .mountains, .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .slope, .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .moose, .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .ice-cubes, .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .foreground, .polar-place-values.number-sense-task-group .ns-welcome.slide-and-fade .seal-fin { -webkit-transition: top 2000ms ease-in-out; -moz-transition: top 2000ms ease-in-out; -ms-transition: top 2000ms ease-in-out; -o-transition: top 2000ms ease-in-out; transition: top 2000ms ease-in-out; } .polar-place-values.number-sense-task-group .background .sky { position: absolute; width: 960px; height: 590px; background-image: linear-gradient(24deg, #ffdfd9, #f3dcf8 38%, #efe9f7 51%, #e9fdf6 63%, #c5ebf8 100%, #49abff); } .polar-place-values.number-sense-task-group .ns-main { display: block; margin-top: 10px; -webkit-transition: opacity 1000ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out; -o-transition: opacity 1000ms ease-in-out; transition: opacity 1000ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main.hidden { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; opacity: 0; } .polar-place-values.number-sense-task-group .ns-main .aurora { position: absolute; top: 0px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/bg_Aurora.svg"); background-size: 960px 344px; width: 960px; height: 344px; } .polar-place-values.number-sense-task-group .ns-main .slope { position: absolute; left: -1921px; top: -1058px; -webkit-transition: all 2000ms ease-in-out; -moz-transition: all 2000ms ease-in-out; -ms-transition: all 2000ms ease-in-out; -o-transition: all 2000ms ease-in-out; transition: all 2000ms ease-in-out; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/bg_Slope2.svg"); background-size: 2881px 1640px; width: 2881px; height: 1640px; } .polar-place-values.number-sense-task-group .ns-main .slope.begin { left: 0px; top: 131px; } .polar-place-values.number-sense-task-group .ns-main .sled { position: absolute; z-index: 1; } .polar-place-values.number-sense-task-group .ns-main .sled.seal { left: 25px; top: 76px; } .polar-place-values.number-sense-task-group .ns-main .sled.seal .character { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/SealSled.svg"); background-size: 125px 125px; width: 125px; height: 125px; } .polar-place-values.number-sense-task-group .ns-main .sled.seal.abstract { left: 132px; top: 240px; } .polar-place-values.number-sense-task-group .ns-main .sled.seal.abstract.animate { -webkit-animation: moveSealToAbstract 1000ms ease-in-out; -moz-animation: moveSealToAbstract 1000ms ease-in-out; -ms-animation: moveSealToAbstract 1000ms ease-in-out; -o-animation: moveSealToAbstract 1000ms ease-in-out; animation: moveSealToAbstract 1000ms ease-in-out; } @-webkit-keyframes moveSealToAbstract { 0%, 20% { left: 25px; top: 76px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 132px; top: 240px; } } @-moz-keyframes moveSealToAbstract { 0%, 20% { left: 25px; top: 76px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 132px; top: 240px; } } @-o-keyframes moveSealToAbstract { 0%, 20% { left: 25px; top: 76px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 132px; top: 240px; } } @keyframes moveSealToAbstract { 0%, 20% { left: 25px; top: 76px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 132px; top: 240px; } } .polar-place-values.number-sense-task-group .ns-main .sled.seal.concrete { -webkit-animation: moveSealToConcrete 1000ms linear forwards; -moz-animation: moveSealToConcrete 1000ms linear forwards; -ms-animation: moveSealToConcrete 1000ms linear forwards; -o-animation: moveSealToConcrete 1000ms linear forwards; animation: moveSealToConcrete 1000ms linear forwards; } @-webkit-keyframes moveSealToConcrete { 0% { left: 132px; top: 240px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 80%, 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 25px; top: 76px; } } @-moz-keyframes moveSealToConcrete { 0% { left: 132px; top: 240px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 80%, 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 25px; top: 76px; } } @-o-keyframes moveSealToConcrete { 0% { left: 132px; top: 240px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 80%, 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 25px; top: 76px; } } @keyframes moveSealToConcrete { 0% { left: 132px; top: 240px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); } 80%, 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); left: 25px; top: 76px; } } .polar-place-values.number-sense-task-group .ns-main .sled.moose { left: 25px; top: 236px; } .polar-place-values.number-sense-task-group .ns-main .sled.moose .character { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/MooseSled.svg"); background-size: 125px 125px; width: 125px; height: 125px; } .polar-place-values.number-sense-task-group .ns-main .sled.moose.abstract { left: 678px; top: 240px; -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -webkit-transform-origin: 62% center; -moz-transform-origin: 62% center; -ms-transform-origin: 62% center; -o-transform-origin: 62% center; transform-origin: 62% center; } .polar-place-values.number-sense-task-group .ns-main .sled.moose.abstract .shadow { left: 52px; } .polar-place-values.number-sense-task-group .ns-main .sled.moose.abstract.animate { -webkit-animation: moveMooseToAbstract 1000ms ease-in-out both; -moz-animation: moveMooseToAbstract 1000ms ease-in-out both; -ms-animation: moveMooseToAbstract 1000ms ease-in-out both; -o-animation: moveMooseToAbstract 1000ms ease-in-out both; animation: moveMooseToAbstract 1000ms ease-in-out both; } @-webkit-keyframes moveMooseToAbstract { 0% { left: 25px; top: 236px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 99% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } } @-moz-keyframes moveMooseToAbstract { 0% { left: 25px; top: 236px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 99% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } } @-o-keyframes moveMooseToAbstract { 0% { left: 25px; top: 236px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 99% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } } @keyframes moveMooseToAbstract { 0% { left: 25px; top: 236px; -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 99% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; } 100% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } } .polar-place-values.number-sense-task-group .ns-main .sled.moose.abstract.animate .shadow { -webkit-transition: left 0ms ease-in-out 1000ms; -moz-transition: left 0ms ease-in-out 1000ms; -ms-transition: left 0ms ease-in-out 1000ms; -o-transition: left 0ms ease-in-out 1000ms; transition: left 0ms ease-in-out 1000ms; } .polar-place-values.number-sense-task-group .ns-main .sled.moose.concrete { -webkit-animation: moveMooseToConcrete 1000ms ease-in-out forwards; -moz-animation: moveMooseToConcrete 1000ms ease-in-out forwards; -ms-animation: moveMooseToConcrete 1000ms ease-in-out forwards; -o-animation: moveMooseToConcrete 1000ms ease-in-out forwards; animation: moveMooseToConcrete 1000ms ease-in-out forwards; } @-webkit-keyframes moveMooseToConcrete { 0% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } 99% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left: 25px; top: 236px; } } @-moz-keyframes moveMooseToConcrete { 0% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } 99% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left: 25px; top: 236px; } } @-o-keyframes moveMooseToConcrete { 0% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } 99% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left: 25px; top: 236px; } } @keyframes moveMooseToConcrete { 0% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); left: 678px; top: 240px; } 99% { -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); } 100% { -webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; left: 25px; top: 236px; } } .polar-place-values.number-sense-task-group .ns-main .sled .snow { position: absolute; left: 40px; top: 80px; opacity: 0; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/SledSnow.svg"); background-size: 102px 62px; width: 102px; height: 62px; } .polar-place-values.number-sense-task-group .ns-main .sled .shadow { position: absolute; z-index: -1; left: 5px; top: 116px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/SledShadow.svg"); background-size: 95px 9px; width: 95px; height: 9px; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .sled .shadow.hidden { opacity: 0; } .polar-place-values.number-sense-task-group .ns-main .sled.off-screen { left: -150px; } @-webkit-keyframes sealOnscreen { from { left: -150px; top: 46px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 46px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes sealOnscreen { from { left: -150px; top: 46px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 46px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes sealOnscreen { from { left: -150px; top: 46px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 46px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes sealOnscreen { from { left: -150px; top: 46px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 46px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes mooseOnscreen { from { left: -150px; top: 206px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 206px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes mooseOnscreen { from { left: -150px; top: 206px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 206px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes mooseOnscreen { from { left: -150px; top: 206px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 206px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes mooseOnscreen { from { left: -150px; top: 206px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } to { left: 150px; top: 206px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .polar-place-values.number-sense-task-group .ns-main .sled.sledding.concrete-start.seal { -webkit-animation: sealOnscreen 500ms ease-out, sealrotateSled 2000ms ease-in-out 500ms, sealslideBack 500ms ease-in-out 500ms, sealfinalPos 1500ms ease-in-out 1000ms; -moz-animation: sealOnscreen 500ms ease-out, sealrotateSled 2000ms ease-in-out 500ms, sealslideBack 500ms ease-in-out 500ms, sealfinalPos 1500ms ease-in-out 1000ms; -ms-animation: sealOnscreen 500ms ease-out, sealrotateSled 2000ms ease-in-out 500ms, sealslideBack 500ms ease-in-out 500ms, sealfinalPos 1500ms ease-in-out 1000ms; -o-animation: sealOnscreen 500ms ease-out, sealrotateSled 2000ms ease-in-out 500ms, sealslideBack 500ms ease-in-out 500ms, sealfinalPos 1500ms ease-in-out 1000ms; animation: sealOnscreen 500ms ease-out, sealrotateSled 2000ms ease-in-out 500ms, sealslideBack 500ms ease-in-out 500ms, sealfinalPos 1500ms ease-in-out 1000ms; } @-webkit-keyframes sealslideBack { from { left: 150px; top: 46px; } to { left: 110px; top: 56px; } } @-moz-keyframes sealslideBack { from { left: 150px; top: 46px; } to { left: 110px; top: 56px; } } @-o-keyframes sealslideBack { from { left: 150px; top: 46px; } to { left: 110px; top: 56px; } } @keyframes sealslideBack { from { left: 150px; top: 46px; } to { left: 110px; top: 56px; } } @-webkit-keyframes sealfinalPos { from { left: 110px; top: 56px; } to { left: 25px; top: 76px; } } @-moz-keyframes sealfinalPos { from { left: 110px; top: 56px; } to { left: 25px; top: 76px; } } @-o-keyframes sealfinalPos { from { left: 110px; top: 56px; } to { left: 25px; top: 76px; } } @keyframes sealfinalPos { from { left: 110px; top: 56px; } to { left: 25px; top: 76px; } } @-webkit-keyframes sealrotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes sealrotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes sealrotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes sealrotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .polar-place-values.number-sense-task-group .ns-main .sled.sledding.concrete-start.moose { -webkit-animation: mooseOnscreen 500ms ease-out, mooserotateSled 2000ms ease-in-out 500ms, mooseslideBack 500ms ease-in-out 500ms, moosefinalPos 1500ms ease-in-out 1000ms; -moz-animation: mooseOnscreen 500ms ease-out, mooserotateSled 2000ms ease-in-out 500ms, mooseslideBack 500ms ease-in-out 500ms, moosefinalPos 1500ms ease-in-out 1000ms; -ms-animation: mooseOnscreen 500ms ease-out, mooserotateSled 2000ms ease-in-out 500ms, mooseslideBack 500ms ease-in-out 500ms, moosefinalPos 1500ms ease-in-out 1000ms; -o-animation: mooseOnscreen 500ms ease-out, mooserotateSled 2000ms ease-in-out 500ms, mooseslideBack 500ms ease-in-out 500ms, moosefinalPos 1500ms ease-in-out 1000ms; animation: mooseOnscreen 500ms ease-out, mooserotateSled 2000ms ease-in-out 500ms, mooseslideBack 500ms ease-in-out 500ms, moosefinalPos 1500ms ease-in-out 1000ms; } @-webkit-keyframes mooseslideBack { from { left: 150px; top: 206px; } to { left: 110px; top: 216px; } } @-moz-keyframes mooseslideBack { from { left: 150px; top: 206px; } to { left: 110px; top: 216px; } } @-o-keyframes mooseslideBack { from { left: 150px; top: 206px; } to { left: 110px; top: 216px; } } @keyframes mooseslideBack { from { left: 150px; top: 206px; } to { left: 110px; top: 216px; } } @-webkit-keyframes moosefinalPos { from { left: 110px; top: 216px; } to { left: 25px; top: 236px; } } @-moz-keyframes moosefinalPos { from { left: 110px; top: 216px; } to { left: 25px; top: 236px; } } @-o-keyframes moosefinalPos { from { left: 110px; top: 216px; } to { left: 25px; top: 236px; } } @keyframes moosefinalPos { from { left: 110px; top: 216px; } to { left: 25px; top: 236px; } } @-webkit-keyframes mooserotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes mooserotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes mooserotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes mooserotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .polar-place-values.number-sense-task-group .ns-main .sled.sledding.concrete-start .shadow { -webkit-animation: fadeSledShadow 2500ms linear; -moz-animation: fadeSledShadow 2500ms linear; -ms-animation: fadeSledShadow 2500ms linear; -o-animation: fadeSledShadow 2500ms linear; animation: fadeSledShadow 2500ms linear; } @-webkit-keyframes fadeSledShadow { 0%, 88% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeSledShadow { 0%, 88% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeSledShadow { 0%, 88% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeSledShadow { 0%, 88% { opacity: 0; } 100% { opacity: 1; } } .polar-place-values.number-sense-task-group .ns-main .sled.sledding.abstract-start.seal { -webkit-animation: sealOnscreen 500ms ease-out, abstractSealRotateSled 2500ms ease-in-out 500ms, abstractSealSlideBack 1500ms ease-in-out 500ms, abstractSealFinalPos 1000ms ease-in-out 2000ms; -moz-animation: sealOnscreen 500ms ease-out, abstractSealRotateSled 2500ms ease-in-out 500ms, abstractSealSlideBack 1500ms ease-in-out 500ms, abstractSealFinalPos 1000ms ease-in-out 2000ms; -ms-animation: sealOnscreen 500ms ease-out, abstractSealRotateSled 2500ms ease-in-out 500ms, abstractSealSlideBack 1500ms ease-in-out 500ms, abstractSealFinalPos 1000ms ease-in-out 2000ms; -o-animation: sealOnscreen 500ms ease-out, abstractSealRotateSled 2500ms ease-in-out 500ms, abstractSealSlideBack 1500ms ease-in-out 500ms, abstractSealFinalPos 1000ms ease-in-out 2000ms; animation: sealOnscreen 500ms ease-out, abstractSealRotateSled 2500ms ease-in-out 500ms, abstractSealSlideBack 1500ms ease-in-out 500ms, abstractSealFinalPos 1000ms ease-in-out 2000ms; } @-webkit-keyframes abstractSealSlideBack { from { left: 150px; top: 46px; } to { left: 132px; top: 170px; } } @-moz-keyframes abstractSealSlideBack { from { left: 150px; top: 46px; } to { left: 132px; top: 170px; } } @-o-keyframes abstractSealSlideBack { from { left: 150px; top: 46px; } to { left: 132px; top: 170px; } } @keyframes abstractSealSlideBack { from { left: 150px; top: 46px; } to { left: 132px; top: 170px; } } @-webkit-keyframes abstractSealFinalPos { from { left: 132px; top: 170px; } to { left: 132px; top: 240px; } } @-moz-keyframes abstractSealFinalPos { from { left: 132px; top: 170px; } to { left: 132px; top: 240px; } } @-o-keyframes abstractSealFinalPos { from { left: 132px; top: 170px; } to { left: 132px; top: 240px; } } @keyframes abstractSealFinalPos { from { left: 132px; top: 170px; } to { left: 132px; top: 240px; } } @-webkit-keyframes abstractSealRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes abstractSealRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes abstractSealRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes abstractSealRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 60% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .polar-place-values.number-sense-task-group .ns-main .sled.sledding.abstract-start.moose { -webkit-animation: mooseOnscreen 500ms ease-out, abstractMooseRotateSled 2000ms ease-in-out 500ms, abstractMooseSlideBack 1500ms ease-in-out 500ms, abstractMooseFinalPos 1000ms ease-in-out 2000ms; -moz-animation: mooseOnscreen 500ms ease-out, abstractMooseRotateSled 2000ms ease-in-out 500ms, abstractMooseSlideBack 1500ms ease-in-out 500ms, abstractMooseFinalPos 1000ms ease-in-out 2000ms; -ms-animation: mooseOnscreen 500ms ease-out, abstractMooseRotateSled 2000ms ease-in-out 500ms, abstractMooseSlideBack 1500ms ease-in-out 500ms, abstractMooseFinalPos 1000ms ease-in-out 2000ms; -o-animation: mooseOnscreen 500ms ease-out, abstractMooseRotateSled 2000ms ease-in-out 500ms, abstractMooseSlideBack 1500ms ease-in-out 500ms, abstractMooseFinalPos 1000ms ease-in-out 2000ms; animation: mooseOnscreen 500ms ease-out, abstractMooseRotateSled 2000ms ease-in-out 500ms, abstractMooseSlideBack 1500ms ease-in-out 500ms, abstractMooseFinalPos 1000ms ease-in-out 2000ms; } @-webkit-keyframes abstractMooseSlideBack { from { left: 150px; top: 206px; } to { left: 28px; top: 245px; } } @-moz-keyframes abstractMooseSlideBack { from { left: 150px; top: 206px; } to { left: 28px; top: 245px; } } @-o-keyframes abstractMooseSlideBack { from { left: 150px; top: 206px; } to { left: 28px; top: 245px; } } @keyframes abstractMooseSlideBack { from { left: 150px; top: 206px; } to { left: 28px; top: 245px; } } @-webkit-keyframes abstractMooseFinalPos { from { left: 28px; top: 245px; } to { left: 678px; top: 240px; } } @-moz-keyframes abstractMooseFinalPos { from { left: 28px; top: 245px; } to { left: 678px; top: 240px; } } @-o-keyframes abstractMooseFinalPos { from { left: 28px; top: 245px; } to { left: 678px; top: 240px; } } @keyframes abstractMooseFinalPos { from { left: 28px; top: 245px; } to { left: 678px; top: 240px; } } @-webkit-keyframes abstractMooseRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes abstractMooseRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes abstractMooseRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes abstractMooseRotateSled { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 75% { -webkit-transform: rotate(50deg); -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -o-transform: rotate(50deg); transform: rotate(50deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .polar-place-values.number-sense-task-group .ns-main .sled.sledding.abstract-start .shadow { -webkit-animation: abstractFadeSledShadow 3000ms linear; -moz-animation: abstractFadeSledShadow 3000ms linear; -ms-animation: abstractFadeSledShadow 3000ms linear; -o-animation: abstractFadeSledShadow 3000ms linear; animation: abstractFadeSledShadow 3000ms linear; } @-webkit-keyframes abstractFadeSledShadow { 0%, 93% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes abstractFadeSledShadow { 0%, 93% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes abstractFadeSledShadow { 0%, 93% { opacity: 0; } 100% { opacity: 1; } } @keyframes abstractFadeSledShadow { 0%, 93% { opacity: 0; } 100% { opacity: 1; } } .polar-place-values.number-sense-task-group .ns-main .sled.sledding .snow { -webkit-animation: blinkSledSnow 2500ms linear; -moz-animation: blinkSledSnow 2500ms linear; -ms-animation: blinkSledSnow 2500ms linear; -o-animation: blinkSledSnow 2500ms linear; animation: blinkSledSnow 2500ms linear; } @-webkit-keyframes blinkSledSnow { 0% { opacity: 0; } 20% { opacity: 0.5; } 40% { opacity: 1; } 60% { opacity: 0.5; } 80% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes blinkSledSnow { 0% { opacity: 0; } 20% { opacity: 0.5; } 40% { opacity: 1; } 60% { opacity: 0.5; } 80% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes blinkSledSnow { 0% { opacity: 0; } 20% { opacity: 0.5; } 40% { opacity: 1; } 60% { opacity: 0.5; } 80% { opacity: 1; } 100% { opacity: 0; } } @keyframes blinkSledSnow { 0% { opacity: 0; } 20% { opacity: 0.5; } 40% { opacity: 1; } 60% { opacity: 0.5; } 80% { opacity: 1; } 100% { opacity: 0; } } .polar-place-values.number-sense-task-group .ns-main .ice-cubes { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; position: absolute; left: 805px; top: 65px; width: 120px; height: 425px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.off-screen { left: 960px; top: 150px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-cube { top: 18px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-cube:nth-child(even) { left: 31px; margin-top: -14px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/IcePurpleLarge.svg"); background-size: 78px 78px; width: 78px; height: 78px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-cube:nth-child(odd) { left: 33px; margin-top: -17px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/IceBlueLarge.svg"); background-size: 86px 78px; width: 86px; height: 78px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-shadow { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/IceShadow.svg"); background-size: 107px 17px; width: 107px; height: 17px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-cube { top: 6px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-cube:nth-child(even) { left: 41px; margin-top: -11px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/IcePurpleSmall.svg"); background-size: 50px 50px; width: 50px; height: 50px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-cube:nth-child(odd) { left: 43px; margin-top: -9px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/IceBlueSmall.svg"); background-size: 56px 50px; width: 56px; height: 50px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-shadow { position: relative; left: 22px; top: -4px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/IceShadow.svg"); background-size: 66px 10px; width: 66px; height: 10px; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-cube, .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-cube { position: relative; -webkit-transition: -webkit-transform 200ms; -moz-transition: -moz-transform 200ms; -o-transition: -o-transform 200ms; transition: transform 200ms; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-cube.off-screen, .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-cube.off-screen { -webkit-transition: all 200ms ease-in-out; -moz-transition: all 200ms ease-in-out; -ms-transition: all 200ms ease-in-out; -o-transition: all 200ms ease-in-out; transition: all 200ms ease-in-out; left: 170px; top: 100px; opacity: 0; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-shadow, .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-shadow { -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .ice-cubes.larger .ice-shadow.hidden, .polar-place-values.number-sense-task-group .ns-main .ice-cubes.smaller .ice-shadow.hidden { opacity: 0; } .polar-place-values.number-sense-task-group .ns-main .snowball { position: absolute; top: -80px; left: -120px; z-index: 5; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/Snowball2.svg"); background-size: 100px 100px; width: 100px; height: 100px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete.hidden, .polar-place-values.number-sense-task-group .ns-main .cpv-abstract.hidden { opacity: 0; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat { margin-top: 10px; position: relative; z-index: 1; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat.abstract { visibility: hidden; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat.abstract .label.under-choice { opacity: 1; visibility: visible; -webkit-transform: translate(227px, 129px); -moz-transform: translate(227px, 129px); -ms-transform: translate(227px, 129px); -o-transform: translate(227px, 129px); transform: translate(227px, 129px); color: black; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat.abstract .label.under-choice.on-sled { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; -webkit-transform: translate(107px, 164px); -moz-transform: translate(107px, 164px); -ms-transform: translate(107px, 164px); -o-transform: translate(107px, 164px); transform: translate(107px, 164px); color: white; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat.abstract .label.under-choice.on-sled.back-to-start { -webkit-animation: moveSealLabelToConcrete 1000ms linear forwards; -moz-animation: moveSealLabelToConcrete 1000ms linear forwards; -ms-animation: moveSealLabelToConcrete 1000ms linear forwards; -o-animation: moveSealLabelToConcrete 1000ms linear forwards; animation: moveSealLabelToConcrete 1000ms linear forwards; } @-webkit-keyframes moveSealLabelToConcrete { 0% { -webkit-transform: translate(107px, 164px) rotate(0deg); -moz-transform: translate(107px, 164px) rotate(0deg); -ms-transform: translate(107px, 164px) rotate(0deg); -o-transform: translate(107px, 164px) rotate(0deg); transform: translate(107px, 164px) rotate(0deg); } 40% { -webkit-transform: translate(32px, 86px) rotate(30deg); -moz-transform: translate(32px, 86px) rotate(30deg); -ms-transform: translate(32px, 86px) rotate(30deg); -o-transform: translate(32px, 86px) rotate(30deg); transform: translate(32px, 86px) rotate(30deg); } 80%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } } @-moz-keyframes moveSealLabelToConcrete { 0% { -webkit-transform: translate(107px, 164px) rotate(0deg); -moz-transform: translate(107px, 164px) rotate(0deg); -ms-transform: translate(107px, 164px) rotate(0deg); -o-transform: translate(107px, 164px) rotate(0deg); transform: translate(107px, 164px) rotate(0deg); } 40% { -webkit-transform: translate(32px, 86px) rotate(30deg); -moz-transform: translate(32px, 86px) rotate(30deg); -ms-transform: translate(32px, 86px) rotate(30deg); -o-transform: translate(32px, 86px) rotate(30deg); transform: translate(32px, 86px) rotate(30deg); } 80%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } } @-o-keyframes moveSealLabelToConcrete { 0% { -webkit-transform: translate(107px, 164px) rotate(0deg); -moz-transform: translate(107px, 164px) rotate(0deg); -ms-transform: translate(107px, 164px) rotate(0deg); -o-transform: translate(107px, 164px) rotate(0deg); transform: translate(107px, 164px) rotate(0deg); } 40% { -webkit-transform: translate(32px, 86px) rotate(30deg); -moz-transform: translate(32px, 86px) rotate(30deg); -ms-transform: translate(32px, 86px) rotate(30deg); -o-transform: translate(32px, 86px) rotate(30deg); transform: translate(32px, 86px) rotate(30deg); } 80%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } } @keyframes moveSealLabelToConcrete { 0% { -webkit-transform: translate(107px, 164px) rotate(0deg); -moz-transform: translate(107px, 164px) rotate(0deg); -ms-transform: translate(107px, 164px) rotate(0deg); -o-transform: translate(107px, 164px) rotate(0deg); transform: translate(107px, 164px) rotate(0deg); } 40% { -webkit-transform: translate(32px, 86px) rotate(30deg); -moz-transform: translate(32px, 86px) rotate(30deg); -ms-transform: translate(32px, 86px) rotate(30deg); -o-transform: translate(32px, 86px) rotate(30deg); transform: translate(32px, 86px) rotate(30deg); } 80%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2) .ns-ten-rod-cell, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2) .ns-one-unit { background: #a96dd2; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2) .ns-ten-rod, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2) .ns-hundred-flat { background-color: #7029a5; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2) .ns-ten-rod .ns-hundred-flat-cell, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2) .ns-hundred-flat .ns-hundred-flat-cell { background-color: #a96dd2; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2).abstract .label.under-choice { -webkit-transform: translate(527px, -31px); -moz-transform: translate(527px, -31px); -ms-transform: translate(527px, -31px); -o-transform: translate(527px, -31px); transform: translate(527px, -31px); } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2).abstract .label.under-choice.on-sled { -webkit-transform: translate(653px, 4px); -moz-transform: translate(653px, 4px); -ms-transform: translate(653px, 4px); -o-transform: translate(653px, 4px); transform: translate(653px, 4px); } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat:nth-child(2).abstract .label.under-choice.on-sled.back-to-start { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; -webkit-transition: all 970ms ease-in-out; -moz-transition: all 970ms ease-in-out; -ms-transition: all 970ms ease-in-out; -o-transition: all 970ms ease-in-out; transition: all 970ms ease-in-out; -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .label { font-size: 30px; font-weight: bold; color: white; position: absolute; width: 92px; left: 57px; top: 101px; opacity: 0; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .label.fade-in { opacity: 1; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat { width: 620px; height: 150px; background: none; margin-top: 0px; border-radius: 10px; opacity: 0; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat.fade-in { opacity: 1; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box { width: 100%; height: 100%; top: 0px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box.inactive { background-color: white; border-color: #cccccc; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box.activate, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box.correct { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box:not(.with-hundreds) .f2f-concrete-tens-area { width: 308px; text-align: left; padding: 12px 10px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box:not(.with-hundreds) .f2f-concrete-ones-area { width: 308px; text-align: left; padding: 13px 11px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-area { padding: 12px 0px 12px 10px; width: 427px; text-align: left; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot { margin-left: 0px; margin-right: 10px; width: 129px; height: 122px; top: 0px; left: 0px; position: inherit; display: inline-block; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-area { padding: 12px 0px 12px 5px; width: 158px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-area .f2f-concrete-ten-slot { margin-left: 0px; margin-right: 5px; width: 12px; height: 122px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-area { padding: 13px 0px 13px 10px; width: 31px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-area .f2f-concrete-one-slot { margin: 1px 1px 2px 1px; width: 10px; height: 10px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-area .f2f-concrete-one-slot.slot-4 { margin-bottom: 2px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat.condensed .f2f-concrete-box .f2f-concrete-hundreds-area, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat.condensed .f2f-concrete-box .f2f-concrete-tens-area, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat.condensed .f2f-concrete-box .f2f-concrete-ones-area { -webkit-transition: margin-left 500ms ease-in-out; -moz-transition: margin-left 500ms ease-in-out; -ms-transition: margin-left 500ms ease-in-out; -o-transition: margin-left 500ms ease-in-out; transition: margin-left 500ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-mat.condensed .f2f-concrete-box .f2f-concrete-ten-slot { -webkit-transition: margin-right 500ms ease-in-out; -moz-transition: margin-right 500ms ease-in-out; -ms-transition: margin-right 500ms ease-in-out; -o-transition: margin-right 500ms ease-in-out; transition: margin-right 500ms ease-in-out; margin-right: 1px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-ten-rod-cell, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-one-unit { background: #eb731c; border: none; width: 10px; height: 10px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-ten-rod { background-color: #cd1424; border: none; width: 12px; height: 122px; padding-top: 1px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-ten-rod .ns-ten-rod-cell { margin: 1px 1px 2px 1px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-hundred-flat { background-color: #cd1424; border: none; width: 129px; height: 122px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-hundred-flat .ns-hundred-flat-cell { background: #eb731c; border: 0px solid transparent; border-width: 2px 1px 0px 2px; width: 13px; height: 12px; background-clip: padding-box; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-hundred-flat .ns-hundred-flat-cell:first-child { border-left-width: 1px; width: 12px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-hundred-flat .ns-hundred-flat-row:last-child .ns-hundred-flat-cell { border-bottom-width: 2px; height: 14px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-hundred-flat.pre-animate, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-ten-rod.pre-animate, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-one-unit.pre-animate { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: opacity 300ms; -moz-transition: opacity 300ms; -ms-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-hundred-flat.pre-animate.animate, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-ten-rod.pre-animate.animate, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .ns-one-unit.pre-animate.animate { -webkit-transition: all 500ms; -moz-transition: all 500ms; -ms-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons { border: none; margin-top: 10px; opacity: 0; -webkit-transition: -webkit-transform 300ms ease-in-out; -moz-transition: -moz-transform 300ms ease-in-out; -o-transition: -o-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons:not(.show) { -webkit-transform: translateY(200px); -moz-transform: translateY(200px); -ms-transform: translateY(200px); -o-transform: translateY(200px); transform: translateY(200px); } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons.fade-in { opacity: 1; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-hundreds-buttons, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-tens-buttons, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-ones-buttons { margin: 0px 20px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-hundreds-buttons .plus-button, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-hundreds-buttons .minus-button, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-tens-buttons .plus-button, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-tens-buttons .minus-button, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-ones-buttons .plus-button, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-ones-buttons .minus-button { width: 30px; height: 30px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-hundreds-buttons { width: 189px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-tens-buttons { width: 92px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .f2f-concrete-ones-buttons { width: 90px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .ns-hundred-flat { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); margin: 0px; } .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .ns-ten-rod, .polar-place-values.number-sense-task-group .ns-main .cpv-concrete-mat .f2f-concrete-buttons .ns-one-unit { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); margin: 0px 10px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget { margin-top: 15px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice { width: 120px; height: 120px; border-radius: 50%; z-index: 1; background-color: white; border: 2px solid #0097b6; padding: 1px; margin: 0px 15px; overflow: hidden; -webkit-transform: translateY(330px); -moz-transform: translateY(330px); -ms-transform: translateY(330px); -o-transform: translateY(330px); transform: translateY(330px); -webkit-transition: -webkit-transform 500ms ease-in-out; -moz-transition: -moz-transform 500ms ease-in-out; -o-transition: -o-transform 500ms ease-in-out; transition: transform 500ms ease-in-out; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice .label { position: absolute; text-align: center; width: 116px; margin-top: 20px; font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 30px; font-weight: bold; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice .seal, .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice .same, .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice .moose { position: relative; margin-top: -1px; left: 0px; top: 0px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice .seal { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/button_Seal.svg"); background-size: 116px 116px; width: 116px; height: 116px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice .same { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/button_Same.svg"); background-size: 116px 116px; width: 116px; height: 116px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice .moose { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/button_Moose.svg"); background-size: 116px 116px; width: 116px; height: 116px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.show { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice:hover:not(.disabled):not(.correct):not(.incorrect):not(.selected) { cursor: pointer; border: 3px solid #007b94; padding: 0px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.selected { border: 3px solid #0097b6; padding: 0px; background-color: #ccffff; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.disabled:not(.correct):not(.incorrect) { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; border: 2px solid rgba(93, 111, 120, 0.25); background-color: white; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.disabled:not(.correct):not(.incorrect) * { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; opacity: 0.25; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.correct { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; border: 3px solid #00c372; padding: 0px; background-color: #ccffd9; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.correct.disabled { border: 3px solid #5d6f78; background-color: white; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.incorrect { -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; border: 3px solid #ff4d76; padding: 0px; background-color: #ffe6ee; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget .cpv-multiple-choice .choice.incorrect.disabled.final { background-color: white; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget.abstract { margin-top: -243px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget.abstract .choice .seal, .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget.abstract .choice .same, .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget.abstract .choice .moose { display: none; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget.abstract .choice .label { margin-top: 38px; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget.abstract .choice.disabled.final .label { opacity: 1; } .polar-place-values.number-sense-task-group .ns-main .cpv-multiple-choice-widget.abstract.fade-out { -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; opacity: 0; } .polar-place-values.number-sense-task-group .remediation-layer { position: absolute; width: 100%; height: 100%; background-color: white; opacity: 0; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .polar-place-values.number-sense-task-group.remediating .remediation-layer { opacity: 0.6; z-index: 1; } .polar-place-values.number-sense-task-group.remediating .slope, .polar-place-values.number-sense-task-group.remediating .ice-cubes { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } .polar-place-values.number-sense-task-group .number-sense-finish { display: none; position: absolute; left: 0px; top: 0px; border-radius: 0px; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/end_Sky.svg"); background-size: 960px 590px; width: 960px; height: 590px; } .polar-place-values.number-sense-task-group .number-sense-finish.hidden { opacity: 0; } .polar-place-values.number-sense-task-group .number-sense-finish .aurora-2 { -webkit-animation: animateAurora2 12000ms ease-in-out infinite; -moz-animation: animateAurora2 12000ms ease-in-out infinite; -ms-animation: animateAurora2 12000ms ease-in-out infinite; -o-animation: animateAurora2 12000ms ease-in-out infinite; animation: animateAurora2 12000ms ease-in-out infinite; position: absolute; left: -110px; top: -100px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/end_Aurora2-2.svg"); background-size: 1308px 542px; width: 1308px; height: 542px; } @-webkit-keyframes animateAurora2 { 0%, 100% { opacity: 1; } 17%, 83% { opacity: 0.75; } 33%, 67% { opacity: 0.5; } 50% { opacity: 0.25; } } @-moz-keyframes animateAurora2 { 0%, 100% { opacity: 1; } 17%, 83% { opacity: 0.75; } 33%, 67% { opacity: 0.5; } 50% { opacity: 0.25; } } @-o-keyframes animateAurora2 { 0%, 100% { opacity: 1; } 17%, 83% { opacity: 0.75; } 33%, 67% { opacity: 0.5; } 50% { opacity: 0.25; } } @keyframes animateAurora2 { 0%, 100% { opacity: 1; } 17%, 83% { opacity: 0.75; } 33%, 67% { opacity: 0.5; } 50% { opacity: 0.25; } } .polar-place-values.number-sense-task-group .number-sense-finish .aurora-1 { -webkit-animation: animateAurora1 12000ms ease-in-out infinite; -moz-animation: animateAurora1 12000ms ease-in-out infinite; -ms-animation: animateAurora1 12000ms ease-in-out infinite; -o-animation: animateAurora1 12000ms ease-in-out infinite; animation: animateAurora1 12000ms ease-in-out infinite; position: absolute; left: -110px; top: -100px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/end_Aurora1-2.svg"); background-size: 1596px 585px; width: 1596px; height: 585px; } @-webkit-keyframes animateAurora1 { 0%, 100% { opacity: 0.25; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 17%, 83% { opacity: 0.5; } 33%, 67% { opacity: 0.75; } 50% { opacity: 1; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } } @-moz-keyframes animateAurora1 { 0%, 100% { opacity: 0.25; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 17%, 83% { opacity: 0.5; } 33%, 67% { opacity: 0.75; } 50% { opacity: 1; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } } @-o-keyframes animateAurora1 { 0%, 100% { opacity: 0.25; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 17%, 83% { opacity: 0.5; } 33%, 67% { opacity: 0.75; } 50% { opacity: 1; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } } @keyframes animateAurora1 { 0%, 100% { opacity: 0.25; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 17%, 83% { opacity: 0.5; } 33%, 67% { opacity: 0.75; } 50% { opacity: 1; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -o-transform: rotate(-2deg); transform: rotate(-2deg); } } .polar-place-values.number-sense-task-group .number-sense-finish .background { position: absolute; top: 6px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/end_Background.svg"); background-size: 960px 584px; width: 960px; height: 584px; } .polar-place-values.number-sense-task-group .number-sense-finish .foreground { position: absolute; top: 240px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/compare_by_place_value/end_Foreground.svg"); background-size: 960px 352px; width: 960px; height: 352px; } .polar-place-values.number-sense-task-group .number-sense-finish .fluency-complete-buttons { z-index: 3; display: block; position: relative; top: 170px; } .polar-place-values.number-sense-task-group .number-sense-finish .fluency-complete-buttons .activity-complete-buttons-area { width: 450px; } .polar-place-values.number-sense-task-group .number-sense-finish .fluency-complete-buttons .activity-complete-buttons-area .acb-zearned-it { color: #f3fdff; font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 90px; font-weight: lighter; position: relative; top: -219px; } @-webkit-keyframes moveRight { 0% { right: 0px; } 100% { right: -1143px; } } @-moz-keyframes moveRight { 0% { right: 0px; } 100% { right: -1143px; } } @-o-keyframes moveRight { 0% { right: 0px; } 100% { right: -1143px; } } @keyframes moveRight { 0% { right: 0px; } 100% { right: -1143px; } } @-webkit-keyframes smokeRelease { 0% { left: -20px; top: -80px; } 33% { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } 50% { top: -150px; left: 28px; } 60% { opacity: 1; } 100% { opacity: 0; -webkit-filter: blur(12px); -moz-filter: blur(12px); -ms-filter: blur(12px); -o-filter: blur(12px); filter: blur(12px); top: -170px; left: 38px; } } @-moz-keyframes smokeRelease { 0% { left: -20px; top: -80px; } 33% { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } 50% { top: -150px; left: 28px; } 60% { opacity: 1; } 100% { opacity: 0; -webkit-filter: blur(12px); -moz-filter: blur(12px); -ms-filter: blur(12px); -o-filter: blur(12px); filter: blur(12px); top: -170px; left: 38px; } } @-o-keyframes smokeRelease { 0% { left: -20px; top: -80px; } 33% { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } 50% { top: -150px; left: 28px; } 60% { opacity: 1; } 100% { opacity: 0; -webkit-filter: blur(12px); -moz-filter: blur(12px); -ms-filter: blur(12px); -o-filter: blur(12px); filter: blur(12px); top: -170px; left: 38px; } } @keyframes smokeRelease { 0% { left: -20px; top: -80px; } 33% { -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); } 50% { top: -150px; left: 28px; } 60% { opacity: 1; } 100% { opacity: 0; -webkit-filter: blur(12px); -moz-filter: blur(12px); -ms-filter: blur(12px); -o-filter: blur(12px); filter: blur(12px); top: -170px; left: 38px; } } @-webkit-keyframes tilt { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 85% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes tilt { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 85% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-o-keyframes tilt { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 85% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes tilt { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 85% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } .counting-train.number-sense-task-group { height: 590px; overflow: hidden; } .counting-train.number-sense-task-group .ns-welcome { z-index: 4; } .counting-train.number-sense-task-group .scene { background-color: #c4edf6; height: 922px; width: 100%; position: absolute; top: 0px; -webkit-transition: top 1500ms ease-in-out; -moz-transition: top 1500ms ease-in-out; -ms-transition: top 1500ms ease-in-out; -o-transition: top 1500ms ease-in-out; transition: top 1500ms ease-in-out; } .counting-train.number-sense-task-group .scene.pan-down { top: -332px; } .counting-train.number-sense-task-group .scene.pan-down .sky { top: -600px; } .dark.counting-train.number-sense-task-group .scene { background-color: #004080; } .counting-train.number-sense-task-group .scene .sky { position: relative; top: 0; height: 100%; -webkit-transition: top 1500ms ease-in-out; -moz-transition: top 1500ms ease-in-out; -ms-transition: top 1500ms ease-in-out; -o-transition: top 1500ms ease-in-out; transition: top 1500ms ease-in-out; } .counting-train.number-sense-task-group .scene .sky .title-1, .counting-train.number-sense-task-group .scene .sky .title-2 { position: absolute; z-index: 2; opacity: 1; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); -webkit-transition: all 1000ms ease-in-out 300ms; -moz-transition: all 1000ms ease-in-out 300ms; -ms-transition: all 1000ms ease-in-out 300ms; -o-transition: all 1000ms ease-in-out 300ms; transition: all 1000ms ease-in-out 300ms; } .counting-train.number-sense-task-group .scene .sky .title-1.fade-out, .counting-train.number-sense-task-group .scene .sky .title-2.fade-out { opacity: 0; -webkit-filter: blur(10px); -moz-filter: blur(10px); -ms-filter: blur(10px); -o-filter: blur(10px); filter: blur(10px); } .counting-train.number-sense-task-group .scene .sky .title-1 { top: 50px; left: 115px; width: 712.3px; height: 227.8px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/title_1.svg"); background-size: 712.3px 227.8px; } .dark.counting-train.number-sense-task-group .scene .sky .title-1 { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/title_1_dark.svg"); background-size: 712.3px 227.8px; } .counting-train.number-sense-task-group .scene .sky .title-2 { top: 460px; left: 308px; width: 341.1px; height: 83.4px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/title_2.svg"); background-size: 341.1px 83.4px; } .dark.counting-train.number-sense-task-group .scene .sky .title-2 { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/title_2_dark.svg"); background-size: 341.1px 83.4px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon { position: absolute; } .counting-train.number-sense-task-group .scene .sky .intro-balloon .front, .counting-train.number-sense-task-group .scene .sky .intro-balloon .shadow { position: absolute; } .counting-train.number-sense-task-group .scene .sky .intro-balloon .front { z-index: 3; } .counting-train.number-sense-task-group .scene .sky .intro-balloon .shadow { opacity: 0.25; z-index: 2; } .counting-train.number-sense-task-group .scene .sky .intro-balloon.fly-up { margin-top: -500px; -webkit-transition: margin-top 1000ms ease-in-out; -moz-transition: margin-top 1000ms ease-in-out; -ms-transition: margin-top 1000ms ease-in-out; -o-transition: margin-top 1000ms ease-in-out; transition: margin-top 1000ms ease-in-out; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=left] { top: 205px; left: 320px; -webkit-animation: left-float 2s ease-in-out -700ms infinite; -moz-animation: left-float 2s ease-in-out -700ms infinite; -ms-animation: left-float 2s ease-in-out -700ms infinite; -o-animation: left-float 2s ease-in-out -700ms infinite; animation: left-float 2s ease-in-out -700ms infinite; } @-webkit-keyframes left-float { 0% { top: 200px; } 50% { top: 210px; } 100% { top: 200px; } } @-moz-keyframes left-float { 0% { top: 200px; } 50% { top: 210px; } 100% { top: 200px; } } @-o-keyframes left-float { 0% { top: 200px; } 50% { top: 210px; } 100% { top: 200px; } } @keyframes left-float { 0% { top: 200px; } 50% { top: 210px; } 100% { top: 200px; } } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=left] .front, .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=left] .shadow { width: 88.6px; height: 188px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=left] .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/left_balloon.svg"); background-size: 88.6px 188px; } .dark.counting-train.number-sense-task-group .scene .sky .intro-balloon[data=left] .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/left_balloon_dark.svg"); background-size: 88.6px 188px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=left] .shadow { margin-top: 5px; margin-left: 6px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/left_balloon_shadow.svg"); background-size: 88.6px 188px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=left].fly-up { -webkit-transition-delay: 700ms; -moz-transition-delay: 700ms; -ms-transition-delay: 700ms; -o-transition-delay: 700ms; transition-delay: 700ms; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=right] { top: 225px; left: 555px; -webkit-animation: right-float 2s ease-in-out -300ms infinite; -moz-animation: right-float 2s ease-in-out -300ms infinite; -ms-animation: right-float 2s ease-in-out -300ms infinite; -o-animation: right-float 2s ease-in-out -300ms infinite; animation: right-float 2s ease-in-out -300ms infinite; } @-webkit-keyframes right-float { 0% { top: 220px; } 50% { top: 230px; } 100% { top: 220px; } } @-moz-keyframes right-float { 0% { top: 220px; } 50% { top: 230px; } 100% { top: 220px; } } @-o-keyframes right-float { 0% { top: 220px; } 50% { top: 230px; } 100% { top: 220px; } } @keyframes right-float { 0% { top: 220px; } 50% { top: 230px; } 100% { top: 220px; } } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=right] .front, .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=right] .shadow { width: 81.5px; height: 173.4px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=right] .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/right_balloon.svg"); background-size: 81.5px 173.4px; } .dark.counting-train.number-sense-task-group .scene .sky .intro-balloon[data=right] .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/right_balloon_dark.svg"); background-size: 81.5px 173.4px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=right] .shadow { margin-top: 4px; margin-left: 5px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/right_balloon_shadow.svg"); background-size: 81.5px 173.4px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=right].fly-up { -webkit-transition-delay: 800ms; -moz-transition-delay: 800ms; -ms-transition-delay: 800ms; -o-transition-delay: 800ms; transition-delay: 800ms; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] { top: 155px; left: 414px; -webkit-animation: center-float 2s ease-in-out -1000ms infinite; -moz-animation: center-float 2s ease-in-out -1000ms infinite; -ms-animation: center-float 2s ease-in-out -1000ms infinite; -o-animation: center-float 2s ease-in-out -1000ms infinite; animation: center-float 2s ease-in-out -1000ms infinite; } @-webkit-keyframes center-float { 0% { top: 150px; } 50% { top: 160px; } 100% { top: 150px; } } @-moz-keyframes center-float { 0% { top: 150px; } 50% { top: 160px; } 100% { top: 150px; } } @-o-keyframes center-float { 0% { top: 150px; } 50% { top: 160px; } 100% { top: 150px; } } @keyframes center-float { 0% { top: 150px; } 50% { top: 160px; } 100% { top: 150px; } } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] .front, .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] .shadow { width: 132.8px; height: 282.6px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/center_balloon2.svg"); background-size: 132.8px 282.6px; } .dark.counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/center_balloon_dark2.svg"); background-size: 132.8px 282.6px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] .shadow { margin-top: 6px; margin-left: 7px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/center_balloon_shadow.svg"); background-size: 132.8px 282.6px; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center].fly-up { -webkit-transition-delay: 500ms; -moz-transition-delay: 500ms; -ms-transition-delay: 500ms; -o-transition-delay: 500ms; transition-delay: 500ms; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] .ns-welcome-button { position: absolute; top: 18px; left: 21px; height: 90px; width: 90px; border: 2px solid #eff8ec; z-index: 4; } .counting-train.number-sense-task-group .scene .sky .intro-balloon[data=center] .ns-welcome-button.ready.fade-out { -webkit-transition: all 200ms ease-in-out 100ms; -moz-transition: all 200ms ease-in-out 100ms; -ms-transition: all 200ms ease-in-out 100ms; -o-transition: all 200ms ease-in-out 100ms; transition: all 200ms ease-in-out 100ms; border-color: transparent; opacity: 0; } .counting-train.number-sense-task-group .scene .sky .balloon { width: 81px; height: 164px; position: relative; display: inline-block; margin: 20px 7px; opacity: 0; top: 1000px; } .counting-train.number-sense-task-group .scene .sky .balloon.show { opacity: 1; cursor: pointer; z-index: 3; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="0"] { top: 6px; -webkit-transition: top 1000ms ease-in-out 198ms; -moz-transition: top 1000ms ease-in-out 198ms; -ms-transition: top 1000ms ease-in-out 198ms; -o-transition: top 1000ms ease-in-out 198ms; transition: top 1000ms ease-in-out 198ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="0"].floating { -webkit-animation: float0 2s ease-in-out -802ms infinite; -moz-animation: float0 2s ease-in-out -802ms infinite; -ms-animation: float0 2s ease-in-out -802ms infinite; -o-animation: float0 2s ease-in-out -802ms infinite; animation: float0 2s ease-in-out -802ms infinite; } @-webkit-keyframes float0 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } @-moz-keyframes float0 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } @-o-keyframes float0 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } @keyframes float0 { 0% { top: -4px; } 50% { top: 6px; } 100% { top: -4px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="0"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="0"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="1"] { top: 61px; -webkit-transition: top 1000ms ease-in-out 94ms; -moz-transition: top 1000ms ease-in-out 94ms; -ms-transition: top 1000ms ease-in-out 94ms; -o-transition: top 1000ms ease-in-out 94ms; transition: top 1000ms ease-in-out 94ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="1"].floating { -webkit-animation: float1 2s ease-in-out -906ms infinite; -moz-animation: float1 2s ease-in-out -906ms infinite; -ms-animation: float1 2s ease-in-out -906ms infinite; -o-animation: float1 2s ease-in-out -906ms infinite; animation: float1 2s ease-in-out -906ms infinite; } @-webkit-keyframes float1 { 0% { top: 51px; } 50% { top: 61px; } 100% { top: 51px; } } @-moz-keyframes float1 { 0% { top: 51px; } 50% { top: 61px; } 100% { top: 51px; } } @-o-keyframes float1 { 0% { top: 51px; } 50% { top: 61px; } 100% { top: 51px; } } @keyframes float1 { 0% { top: 51px; } 50% { top: 61px; } 100% { top: 51px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="1"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="1"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="2"] { top: 92px; -webkit-transition: top 1000ms ease-in-out 460ms; -moz-transition: top 1000ms ease-in-out 460ms; -ms-transition: top 1000ms ease-in-out 460ms; -o-transition: top 1000ms ease-in-out 460ms; transition: top 1000ms ease-in-out 460ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="2"].floating { -webkit-animation: float2 2s ease-in-out -540ms infinite; -moz-animation: float2 2s ease-in-out -540ms infinite; -ms-animation: float2 2s ease-in-out -540ms infinite; -o-animation: float2 2s ease-in-out -540ms infinite; animation: float2 2s ease-in-out -540ms infinite; } @-webkit-keyframes float2 { 0% { top: 82px; } 50% { top: 92px; } 100% { top: 82px; } } @-moz-keyframes float2 { 0% { top: 82px; } 50% { top: 92px; } 100% { top: 82px; } } @-o-keyframes float2 { 0% { top: 82px; } 50% { top: 92px; } 100% { top: 82px; } } @keyframes float2 { 0% { top: 82px; } 50% { top: 92px; } 100% { top: 82px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="2"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="2"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="3"] { top: 95px; -webkit-transition: top 1000ms ease-in-out 410ms; -moz-transition: top 1000ms ease-in-out 410ms; -ms-transition: top 1000ms ease-in-out 410ms; -o-transition: top 1000ms ease-in-out 410ms; transition: top 1000ms ease-in-out 410ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="3"].floating { -webkit-animation: float3 2s ease-in-out -590ms infinite; -moz-animation: float3 2s ease-in-out -590ms infinite; -ms-animation: float3 2s ease-in-out -590ms infinite; -o-animation: float3 2s ease-in-out -590ms infinite; animation: float3 2s ease-in-out -590ms infinite; } @-webkit-keyframes float3 { 0% { top: 85px; } 50% { top: 95px; } 100% { top: 85px; } } @-moz-keyframes float3 { 0% { top: 85px; } 50% { top: 95px; } 100% { top: 85px; } } @-o-keyframes float3 { 0% { top: 85px; } 50% { top: 95px; } 100% { top: 85px; } } @keyframes float3 { 0% { top: 85px; } 50% { top: 95px; } 100% { top: 85px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="3"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="3"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="4"] { top: 53px; -webkit-transition: top 1000ms ease-in-out 239ms; -moz-transition: top 1000ms ease-in-out 239ms; -ms-transition: top 1000ms ease-in-out 239ms; -o-transition: top 1000ms ease-in-out 239ms; transition: top 1000ms ease-in-out 239ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="4"].floating { -webkit-animation: float4 2s ease-in-out -761ms infinite; -moz-animation: float4 2s ease-in-out -761ms infinite; -ms-animation: float4 2s ease-in-out -761ms infinite; -o-animation: float4 2s ease-in-out -761ms infinite; animation: float4 2s ease-in-out -761ms infinite; } @-webkit-keyframes float4 { 0% { top: 43px; } 50% { top: 53px; } 100% { top: 43px; } } @-moz-keyframes float4 { 0% { top: 43px; } 50% { top: 53px; } 100% { top: 43px; } } @-o-keyframes float4 { 0% { top: 43px; } 50% { top: 53px; } 100% { top: 43px; } } @keyframes float4 { 0% { top: 43px; } 50% { top: 53px; } 100% { top: 43px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="4"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="4"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="5"] { top: 88px; -webkit-transition: top 1000ms ease-in-out 477ms; -moz-transition: top 1000ms ease-in-out 477ms; -ms-transition: top 1000ms ease-in-out 477ms; -o-transition: top 1000ms ease-in-out 477ms; transition: top 1000ms ease-in-out 477ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="5"].floating { -webkit-animation: float5 2s ease-in-out -523ms infinite; -moz-animation: float5 2s ease-in-out -523ms infinite; -ms-animation: float5 2s ease-in-out -523ms infinite; -o-animation: float5 2s ease-in-out -523ms infinite; animation: float5 2s ease-in-out -523ms infinite; } @-webkit-keyframes float5 { 0% { top: 78px; } 50% { top: 88px; } 100% { top: 78px; } } @-moz-keyframes float5 { 0% { top: 78px; } 50% { top: 88px; } 100% { top: 78px; } } @-o-keyframes float5 { 0% { top: 78px; } 50% { top: 88px; } 100% { top: 78px; } } @keyframes float5 { 0% { top: 78px; } 50% { top: 88px; } 100% { top: 78px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="5"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="5"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="6"] { top: 74px; -webkit-transition: top 1000ms ease-in-out 235ms; -moz-transition: top 1000ms ease-in-out 235ms; -ms-transition: top 1000ms ease-in-out 235ms; -o-transition: top 1000ms ease-in-out 235ms; transition: top 1000ms ease-in-out 235ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="6"].floating { -webkit-animation: float6 2s ease-in-out -765ms infinite; -moz-animation: float6 2s ease-in-out -765ms infinite; -ms-animation: float6 2s ease-in-out -765ms infinite; -o-animation: float6 2s ease-in-out -765ms infinite; animation: float6 2s ease-in-out -765ms infinite; } @-webkit-keyframes float6 { 0% { top: 64px; } 50% { top: 74px; } 100% { top: 64px; } } @-moz-keyframes float6 { 0% { top: 64px; } 50% { top: 74px; } 100% { top: 64px; } } @-o-keyframes float6 { 0% { top: 64px; } 50% { top: 74px; } 100% { top: 64px; } } @keyframes float6 { 0% { top: 64px; } 50% { top: 74px; } 100% { top: 64px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="6"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="6"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="7"] { top: 10px; -webkit-transition: top 1000ms ease-in-out 139ms; -moz-transition: top 1000ms ease-in-out 139ms; -ms-transition: top 1000ms ease-in-out 139ms; -o-transition: top 1000ms ease-in-out 139ms; transition: top 1000ms ease-in-out 139ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="7"].floating { -webkit-animation: float7 2s ease-in-out -861ms infinite; -moz-animation: float7 2s ease-in-out -861ms infinite; -ms-animation: float7 2s ease-in-out -861ms infinite; -o-animation: float7 2s ease-in-out -861ms infinite; animation: float7 2s ease-in-out -861ms infinite; } @-webkit-keyframes float7 { 0% { top: 0px; } 50% { top: 10px; } 100% { top: 0px; } } @-moz-keyframes float7 { 0% { top: 0px; } 50% { top: 10px; } 100% { top: 0px; } } @-o-keyframes float7 { 0% { top: 0px; } 50% { top: 10px; } 100% { top: 0px; } } @keyframes float7 { 0% { top: 0px; } 50% { top: 10px; } 100% { top: 0px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="7"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="7"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="8"] { top: 91px; -webkit-transition: top 1000ms ease-in-out 234ms; -moz-transition: top 1000ms ease-in-out 234ms; -ms-transition: top 1000ms ease-in-out 234ms; -o-transition: top 1000ms ease-in-out 234ms; transition: top 1000ms ease-in-out 234ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="8"].floating { -webkit-animation: float8 2s ease-in-out -766ms infinite; -moz-animation: float8 2s ease-in-out -766ms infinite; -ms-animation: float8 2s ease-in-out -766ms infinite; -o-animation: float8 2s ease-in-out -766ms infinite; animation: float8 2s ease-in-out -766ms infinite; } @-webkit-keyframes float8 { 0% { top: 81px; } 50% { top: 91px; } 100% { top: 81px; } } @-moz-keyframes float8 { 0% { top: 81px; } 50% { top: 91px; } 100% { top: 81px; } } @-o-keyframes float8 { 0% { top: 81px; } 50% { top: 91px; } 100% { top: 81px; } } @keyframes float8 { 0% { top: 81px; } 50% { top: 91px; } 100% { top: 81px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="8"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="8"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="9"] { top: 15px; -webkit-transition: top 1000ms ease-in-out 199ms; -moz-transition: top 1000ms ease-in-out 199ms; -ms-transition: top 1000ms ease-in-out 199ms; -o-transition: top 1000ms ease-in-out 199ms; transition: top 1000ms ease-in-out 199ms; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="9"].floating { -webkit-animation: float9 2s ease-in-out -801ms infinite; -moz-animation: float9 2s ease-in-out -801ms infinite; -ms-animation: float9 2s ease-in-out -801ms infinite; -o-animation: float9 2s ease-in-out -801ms infinite; animation: float9 2s ease-in-out -801ms infinite; } @-webkit-keyframes float9 { 0% { top: 5px; } 50% { top: 15px; } 100% { top: 5px; } } @-moz-keyframes float9 { 0% { top: 5px; } 50% { top: 15px; } 100% { top: 5px; } } @-o-keyframes float9 { 0% { top: 5px; } 50% { top: 15px; } 100% { top: 5px; } } @keyframes float9 { 0% { top: 5px; } 50% { top: 15px; } 100% { top: 5px; } } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="9"].open { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .counting-train.number-sense-task-group .scene .sky .balloon.show[data-num="9"].fly-up { top: -200px; -webkit-transition-delay: 0ms; -moz-transition-delay: 0ms; -ms-transition-delay: 0ms; -o-transition-delay: 0ms; transition-delay: 0ms; } .counting-train.number-sense-task-group .scene .sky .balloon .front, .counting-train.number-sense-task-group .scene .sky .balloon .shadow { position: absolute; } .counting-train.number-sense-task-group .scene .sky .balloon .front { z-index: 3; } .counting-train.number-sense-task-group .scene .sky .balloon .shadow { opacity: 0.25; margin-top: 6px; margin-left: 7px; z-index: 2; } .counting-train.number-sense-task-group .scene .sky .balloon:not(.open) .front, .counting-train.number-sense-task-group .scene .sky .balloon:not(.open) .shadow { width: 73.4px; height: 156.3px; } .counting-train.number-sense-task-group .scene .sky .balloon:not(.open) .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/balloon_closed.svg"); background-size: 73.4px 156.3px; } .dark.counting-train.number-sense-task-group .scene .sky .balloon:not(.open) .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/balloon_closed_dark.svg"); background-size: 73.4px 156.3px; } .counting-train.number-sense-task-group .scene .sky .balloon:not(.open) .shadow { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/balloon_closed_shadow.svg"); background-size: 73.4px 156.3px; } .counting-train.number-sense-task-group .scene .sky .balloon.open .front, .counting-train.number-sense-task-group .scene .sky .balloon.open .shadow { width: 79.4px; height: 168.3px; left: -4px; } .counting-train.number-sense-task-group .scene .sky .balloon.open .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/balloon_open.svg"); background-size: 79.4px 168.3px; } .dark.counting-train.number-sense-task-group .scene .sky .balloon.open .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/balloon_open_dark.svg"); background-size: 79.4px 168.3px; } .counting-train.number-sense-task-group .scene .sky .balloon.open .shadow { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/balloon_open_shadow.svg"); background-size: 79.4px 168.3px; } .counting-train.number-sense-task-group .scene .sky .balloon.disabled { cursor: default; } .counting-train.number-sense-task-group .scene .sky .clouds { width: 2286px; height: 1177.4px; position: absolute; top: 5px; z-index: 1; } .counting-train.number-sense-task-group .scene .sky .clouds .cloud-1, .counting-train.number-sense-task-group .scene .sky .clouds .cloud-2 { position: absolute; width: 1143px; height: 1177.4px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/clouds.svg"); background-size: 1143px 1177.4px; } .counting-train.number-sense-task-group .scene .sky .clouds .cloud-1.cloud-2, .counting-train.number-sense-task-group .scene .sky .clouds .cloud-2.cloud-2 { left: 1143px; } .counting-train.number-sense-task-group .scene .sky .clouds.moving { -webkit-animation: moveRight 50s linear infinite; -moz-animation: moveRight 50s linear infinite; -ms-animation: moveRight 50s linear infinite; -o-animation: moveRight 50s linear infinite; animation: moveRight 50s linear infinite; } .counting-train.number-sense-task-group .scene .mountains { position: absolute; bottom: 0px; width: 962px; height: 323.9px; } .counting-train.number-sense-task-group .scene .mountains .front, .counting-train.number-sense-task-group .scene .mountains .shadow { width: 962px; height: 323.9px; position: absolute; } .counting-train.number-sense-task-group .scene .mountains .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/mountains.svg"); background-size: 962px 323.9px; z-index: 2; } .dark.counting-train.number-sense-task-group .scene .mountains .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/mountains_dark.svg"); background-size: 962px 323.9px; } .counting-train.number-sense-task-group .scene .mountains .shadow { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/mountains_shadow.svg"); background-size: 962px 323.9px; opacity: 0.6; margin-left: 5px; margin-top: -1px; } .dark.counting-train.number-sense-task-group .scene .mountains .shadow { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/mountains_shadow_dark.svg"); background-size: 962px 323.9px; } .counting-train.number-sense-task-group .scene .track { position: absolute; bottom: 30px; width: 976px; height: 20px; } .counting-train.number-sense-task-group .scene .track .front, .counting-train.number-sense-task-group .scene .track .shadow { width: 976px; height: 20px; left: -4px; position: absolute; } .counting-train.number-sense-task-group .scene .track .front { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/tracks.svg"); background-size: 976px 20px; z-index: 4; } .counting-train.number-sense-task-group .scene .track .shadow { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/tracks_shadow.svg"); background-size: 976px 20px; opacity: 1; margin-top: 1px; margin-left: 1px; z-index: 3; } .counting-train.number-sense-task-group .scene .ground { background-color: #c69c6d; width: 960px; height: 31px; bottom: 0px; position: absolute; z-index: 3; } .counting-train.number-sense-task-group .scene .fluency-complete-buttons { top: 302px; left: 950px; position: absolute; z-index: 3; -webkit-transition: left 500ms ease-in-out 100ms; -moz-transition: left 500ms ease-in-out 100ms; -ms-transition: left 500ms ease-in-out 100ms; -o-transition: left 500ms ease-in-out 100ms; transition: left 500ms ease-in-out 100ms; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; } .counting-train.number-sense-task-group .scene .fluency-complete-buttons.enter { left: 260px; -webkit-animation: tilt 800ms linear; -moz-animation: tilt 800ms linear; -ms-animation: tilt 800ms linear; -o-animation: tilt 800ms linear; animation: tilt 800ms linear; } .dark.counting-train.number-sense-task-group .scene .fluency-complete-buttons { color: #ffe919; } .counting-train.number-sense-task-group .task-container.grid-12 { position: absolute; top: 0px; left: 0px; font-weight: bold; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=black_bear] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/black_bear.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=brown_bear] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/brown_bear.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=dog] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/dog.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=fox] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/fox.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=frog] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/frog.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=koala] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/koala.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=lion] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/lion.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=monkey] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/monkey.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=pig] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/pig.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=rabbit] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/rabbit.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object[data-img=tiger] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/tiger.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object[data-img=apple] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/apple.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object[data-img=broccoli] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/broccoli.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object[data-img=carrot] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/carrot.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object[data-img=orange] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/orange.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object[data-img=pear] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/pear.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object[data-img=radish] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/radish.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object[data-img=strawberry] { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/strawberry.svg"); background-size: 38.6px 44px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables { top: 0px; left: -10px; position: relative; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container, .counting-train.number-sense-task-group .task-container.grid-12 .countables .basket { display: inline-block; position: relative; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-1 { width: 38.6px; height: 44px; top: -13.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-2 { width: 107.2px; height: 44px; top: -13.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-3 { width: 175.8px; height: 44px; top: -13.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-4 { width: 244.4px; height: 44px; top: -13.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-5 { width: 175.8px; height: 132px; top: 30.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-6 { width: 304.4px; height: 118px; top: 23.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-7 { width: 304.4px; height: 118px; top: 23.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-8 { width: 304.4px; height: 118px; top: 23.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-9 { width: 304.4px; height: 118px; top: 23.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container.object-container-10 { width: 304.4px; height: 118px; top: 23.5px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .object-container .object { position: absolute; z-index: 2; } .counting-train.number-sense-task-group .task-container.grid-12 .countables .basket { margin-right: 30px; z-index: 2; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .counting-train.number-sense-task-group .task-container.grid-12 .countables .basket.drop { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 400ms ease-in-out, top 500ms ease-in-out, left 500ms ease-in-out; -moz-transition: -moz-transform 400ms ease-in-out, top 500ms ease-in-out, left 500ms ease-in-out; -o-transition: -o-transform 400ms ease-in-out, top 500ms ease-in-out, left 500ms ease-in-out; transition: transform 400ms ease-in-out, top 500ms ease-in-out, left 500ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread { top: 450px; -webkit-transition: top 800ms ease-in-out; -moz-transition: top 800ms ease-in-out; -ms-transition: top 800ms ease-in-out; -o-transition: top 800ms ease-in-out; transition: top 800ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object, .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .basket { -webkit-transition: top 800ms ease-in-out, left 800ms ease-in-out; -moz-transition: top 800ms ease-in-out, left 800ms ease-in-out; -ms-transition: top 800ms ease-in-out, left 800ms ease-in-out; -o-transition: top 800ms ease-in-out, left 800ms ease-in-out; transition: top 800ms ease-in-out, left 800ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="1"] { top: -43px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="2"] { top: -36px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="3"] { top: -9px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="4"] { top: 21px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="5"] { top: 12px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="6"] { top: -42px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="7"] { top: -3px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="8"] { top: 15px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="9"] { top: -32px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.spread .object[data-num="10"] { top: 27px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation { top: 150px; -webkit-transition: top 1500ms ease-in-out; -moz-transition: top 1500ms ease-in-out; -ms-transition: top 1500ms ease-in-out; -o-transition: top 1500ms ease-in-out; transition: top 1500ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object, .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .basket { -webkit-transition: top 1500ms ease-in-out, left 1500ms ease-in-out; -moz-transition: top 1500ms ease-in-out, left 1500ms ease-in-out; -ms-transition: top 1500ms ease-in-out, left 1500ms ease-in-out; -o-transition: top 1500ms ease-in-out, left 1500ms ease-in-out; transition: top 1500ms ease-in-out, left 1500ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="1"] { top: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="1"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="6"] { left: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="2"] { top: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="2"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="7"] { left: 68.6px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="3"] { top: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="3"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="8"] { left: 137.2px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="4"] { top: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="4"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="9"] { left: 205.8px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="5"] { top: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="5"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="10"] { left: 274.4px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="6"] { top: 74px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="7"] { top: 74px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="8"] { top: 74px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="9"] { top: 74px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object[data-num="10"] { top: 74px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="1"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="2"] { top: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="4"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="5"] { top: 88px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="1"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="4"] { left: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="2"], .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="5"] { left: 137.2px; } .counting-train.number-sense-task-group .task-container.grid-12 .countables.formation .object-container-5 .object[data-num="3"] { top: 44px; left: 68.6px; } .counting-train.number-sense-task-group .task-container.grid-12 .train { bottom: 59px; position: absolute; height: 87px; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; left: 1000px; -webkit-transition: left 1000ms ease-in-out, bottom 1000ms ease-in-out; -moz-transition: left 1000ms ease-in-out, bottom 1000ms ease-in-out; -ms-transition: left 1000ms ease-in-out, bottom 1000ms ease-in-out; -o-transition: left 1000ms ease-in-out, bottom 1000ms ease-in-out; transition: left 1000ms ease-in-out, bottom 1000ms ease-in-out; font-size: 40px; z-index: 5; } .counting-train.number-sense-task-group .task-container.grid-12 .train.enter { left: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .train.exit { left: -1200px; } .counting-train.number-sense-task-group .task-container.grid-12 .train.choo-choo .smoke { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform 500ms linear; -moz-transition: -moz-transform 500ms linear; -o-transition: -o-transform 500ms linear; transition: transform 500ms linear; -webkit-animation: smokeRelease 1000ms linear; -moz-animation: smokeRelease 1000ms linear; -ms-animation: smokeRelease 1000ms linear; -o-animation: smokeRelease 1000ms linear; animation: smokeRelease 1000ms linear; } .counting-train.number-sense-task-group .task-container.grid-12 .train .smoke { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/smoke.svg"); background-size: 112.7px 144.6px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); top: -150px; left: 28px; width: 112.7px; height: 144.6px; opacity: 0; position: absolute; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front, .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .shadow { background-repeat: no-repeat; background-color: transparent; position: relative; top: -4px; height: 106.1px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front { width: 156.1px; z-index: 3; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front .train-engine { position: absolute; top: 0; left: 0; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front .number { position: absolute; top: 35px; right: 22px; width: 30px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front .st6 { fill: #00b7ff; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st3, .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st4, .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st5, .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st6 { -webkit-transition: fill 500ms ease-in-out; -moz-transition: fill 500ms ease-in-out; -ms-transition: fill 500ms ease-in-out; -o-transition: fill 500ms ease-in-out; transition: fill 500ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st3, .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st5, .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st6 { fill: #666666; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .front.remediating .st4 { fill: #333333; } .counting-train.number-sense-task-group .task-container.grid-12 .train .engine .shadow { width: 143.7px; left: 12.4px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/engine_shadow.svg"); background-size: 143.7px 106.1px; margin-left: 4px; margin-right: 12.4px; opacity: 0.8; top: -109px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car { top: 26px; position: relative; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car[data-num="1"] { margin-left: 3px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car:not([data-num="1"]) { margin-left: 7px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .body { background-color: #00b7ff; width: 70px; height: 60px; border-radius: 0px 0px 10px 10px; -webkit-box-shadow: 4px 2px rgba(0, 0, 0, 0.7); -moz-box-shadow: 4px 2px rgba(0, 0, 0, 0.7); -ms-box-shadow: 4px 2px rgba(0, 0, 0, 0.7); -o-box-shadow: 4px 2px rgba(0, 0, 0, 0.7); box-shadow: 4px 2px rgba(0, 0, 0, 0.7); } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .body .number { position: relative; top: 5px; -webkit-transition: color 1000ms ease-out; -moz-transition: color 1000ms ease-out; -ms-transition: color 1000ms ease-out; -o-transition: color 1000ms ease-out; transition: color 1000ms ease-out; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .base { width: 50px; height: 5px; background-color: #323232; left: 10px; position: relative; border-radius: 0px 0px 2px 2px; -webkit-box-shadow: 3px 1px rgba(0, 0, 0, 0.7); -moz-box-shadow: 3px 1px rgba(0, 0, 0, 0.7); -ms-box-shadow: 3px 1px rgba(0, 0, 0, 0.7); -o-box-shadow: 3px 1px rgba(0, 0, 0, 0.7); box-shadow: 3px 1px rgba(0, 0, 0, 0.7); } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .wheel { width: 12px; height: 12px; background-color: #b3b3b3; border-radius: 6px; position: relative; border: 1px solid #808080; -webkit-box-shadow: 2px 0px rgba(0, 0, 0, 0.7); -moz-box-shadow: 2px 0px rgba(0, 0, 0, 0.7); -ms-box-shadow: 2px 0px rgba(0, 0, 0, 0.7); -o-box-shadow: 2px 0px rgba(0, 0, 0, 0.7); box-shadow: 2px 0px rgba(0, 0, 0, 0.7); } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .wheel[data-num="0"] { top: -2px; left: 15px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .wheel[data-num="1"] { top: -14px; left: 43px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .wheel .axel { background-color: #808080; width: 4px; height: 4px; border-radius: 2px; position: relative; top: 3px; left: 3px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car:not(.disabled) .body:hover { cursor: pointer; background-color: #76d6ff; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car.correct .body, .counting-train.number-sense-task-group .task-container.grid-12 .train .car.incorrect .body, .counting-train.number-sense-task-group .task-container.grid-12 .train .car.faded .body { -webkit-transition: background-color 250ms ease-in-out; -moz-transition: background-color 250ms ease-in-out; -ms-transition: background-color 250ms ease-in-out; -o-transition: background-color 250ms ease-in-out; transition: background-color 250ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car.correct .body { background-color: #50cb13; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car.incorrect .body { background-color: #ff005b; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car.faded .body { background-color: #ff9ab1; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car.remediating.correct .body { -webkit-transition: background-color 500ms ease-in-out 500ms; -moz-transition: background-color 500ms ease-in-out 500ms; -ms-transition: background-color 500ms ease-in-out 500ms; -o-transition: background-color 500ms ease-in-out 500ms; transition: background-color 500ms ease-in-out 500ms; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car.remediating:not(.correct) .body { background-color: #666666; -webkit-transition: background-color 500ms ease-in-out; -moz-transition: background-color 500ms ease-in-out; -ms-transition: background-color 500ms ease-in-out; -o-transition: background-color 500ms ease-in-out; transition: background-color 500ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car.highlight-num .body .number { -webkit-transition: color 500ms ease-in 500ms; -moz-transition: color 500ms ease-in 500ms; -ms-transition: color 500ms ease-in 500ms; -o-transition: color 500ms ease-in 500ms; transition: color 500ms ease-in 500ms; color: #f6f6f6; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .object-slot { width: 70px; height: 44px; position: absolute; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .object-slot .object { position: relative; margin: auto; top: 0px; left: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .train .car .object-slot .object.moving { z-index: 3; -webkit-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; -moz-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; -ms-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; -o-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; transition: top 1000ms ease-in-out, left 1000ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12 .object { width: 38.6px; height: 44px; position: absolute; opacity: 1; z-index: 1; } .counting-train.number-sense-task-group .task-container.grid-12 .object.hidden { opacity: 0; } .counting-train.number-sense-task-group .task-container.grid-12 .basket { background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/basket.svg"); background-size: 80.6px 71px; width: 80.6px; height: 71px; z-index: 1; opacity: 1; top: 0px; left: 0px; } .counting-train.number-sense-task-group .task-container.grid-12 .basket .card { background-color: white; width: 45px; height: 37px; top: 22px; left: 20px; position: absolute; border-radius: 2px; font-size: 30px; } .counting-train.number-sense-task-group .task-container.grid-12 .basket.hidden { opacity: 0; } .counting-train.number-sense-task-group .task-container.grid-12 .basket-object { position: absolute; } .counting-train.number-sense-task-group .task-container.grid-12 .basket-object.moving { z-index: 1; -webkit-transition: top 500ms ease-in-out, left 500ms ease-in-out; -moz-transition: top 500ms ease-in-out, left 500ms ease-in-out; -ms-transition: top 500ms ease-in-out, left 500ms ease-in-out; -o-transition: top 500ms ease-in-out, left 500ms ease-in-out; transition: top 500ms ease-in-out, left 500ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="1"] { top: -46px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="2"] { top: -92px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="3"] { top: -138px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="4"] { top: -184px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="5"] { top: -230px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="6"] { top: -276px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="7"] { top: -322px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="8"] { top: -368px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="9"] { top: -414px; } .counting-train.number-sense-task-group .task-container.grid-12.count-all .object-slot[data-num="10"] { top: -460px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .basket-slot { width: 80.6px; height: 71px; position: absolute; top: -73px; left: -8px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .basket-slot .basket { margin: auto; position: relative; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .basket-slot .basket.moving { z-index: 3; -webkit-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; -moz-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; -ms-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; -o-transition: top 1000ms ease-in-out, left 1000ms ease-in-out; transition: top 1000ms ease-in-out, left 1000ms ease-in-out; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="1"] { top: -119px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="2"] { top: -165px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="3"] { top: -211px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="4"] { top: -257px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="5"] { top: -303px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="6"] { top: -349px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="7"] { top: -395px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="8"] { top: -441px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="9"] { top: -487px; } .counting-train.number-sense-task-group .task-container.grid-12.count-on .object-slot[data-num="10"] { top: -533px; } .counting-train.number-sense-task-group .scene:not(.pan-down) ~ .task-container .train.exit { bottom: -110px; } .counting-train.number-sense-task-group .ns-video .ns-video-button .ns-video-button-image { background-image: url("https://webassets.zearn.org/app_assets/number_sense/teacher_images/counting_train.jpg"); } .counting-train.number-sense-task-group .ns-video .ns-video-button:not(.expanded) .ns-video-button-image { background-position: -60px -2px; } .counting-train.number-sense-task-group .ns-video .ns-video-button.expanded { bottom: 63px; } .counting-train.number-sense-task-group .ns-video .ns-video-button.expanded .ns-video-button-image { bottom: 71px; background-position: -168px 0px; } .counting-train.number-sense-task-group .ns-video .ns-video-button.expanded.rectify .ns-video-button-image { background-position: -60px 0px; } .counting-train.number-sense-task-group .ns-video .ns-video-player { bottom: 63px; } .sum-snacks.number-sense-task-group { background: #fff4ce; height: 590px; } .sum-snacks.number-sense-task-group .welcome-scene { background-color: #ccffff; top: -899px; width: 100%; height: 100%; position: relative; -webkit-transition: top 1300ms ease-in-out; -moz-transition: top 1300ms ease-in-out; -ms-transition: top 1300ms ease-in-out; -o-transition: top 1300ms ease-in-out; transition: top 1300ms ease-in-out; } .sum-snacks.number-sense-task-group .welcome-scene .ground { position: absolute; bottom: 0px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/sum_snacks/Ground.svg"); background-size: 960px 60px; width: 960px; height: 60px; } .sum-snacks.number-sense-task-group .welcome-scene .bushes { position: absolute; bottom: 0px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/sum_snacks/Bushes.svg"); background-size: 960px 157px; width: 960px; height: 157px; } .sum-snacks.number-sense-task-group .welcome-scene.welcome { top: 0px; } .sum-snacks.number-sense-task-group .welcome-scene.finish { -webkit-transition: top 1000ms ease-in-out; -moz-transition: top 1000ms ease-in-out; -ms-transition: top 1000ms ease-in-out; -o-transition: top 1000ms ease-in-out; transition: top 1000ms ease-in-out; top: -309px; } .sum-snacks.number-sense-task-group .ns-welcome { position: absolute; top: 0px; } .sum-snacks.number-sense-task-group .ns-welcome .title { position: relative; font-family: "cubano", "Arial Black", sans-serif; color: #052f3c; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-welcome .title.fade-out { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } .sum-snacks.number-sense-task-group .ns-welcome .title .sum { font-size: 225px; line-height: 243px; } .sum-snacks.number-sense-task-group .ns-welcome .title .snacks { font-size: 121.4px; line-height: 145px; top: -60px; position: relative; } .sum-snacks.number-sense-task-group .ns-welcome .title .bite { width: 100px; height: 100px; position: absolute; top: 10px; left: 635px; background: url("https://webassets.zearn.org/app_assets/number_sense/counting/sum_snacks/Bite2.svg") no-repeat; } .sum-snacks.number-sense-task-group .ns-welcome .ns-welcome-button { position: absolute; left: 710px; top: 140px; width: 110px; height: 110px; } .sum-snacks.number-sense-task-group .ns-welcome .ns-welcome-button.ready.fade-out { -webkit-transition: all 300ms ease-in-out 300ms; -moz-transition: all 300ms ease-in-out 300ms; -ms-transition: all 300ms ease-in-out 300ms; -o-transition: all 300ms ease-in-out 300ms; transition: all 300ms ease-in-out 300ms; opacity: 0; } .sum-snacks.number-sense-task-group .ns-welcome .welcome-animals { position: absolute; width: 738px; height: 293px; left: 111px; bottom: 10px; background: url("https://webassets.zearn.org/app_assets/number_sense/counting/sum_snacks/Group.svg") no-repeat; } .sum-snacks.number-sense-task-group .ns-main { background: #fff4ce; display: block; -webkit-transition: top 1300ms ease-in-out; -moz-transition: top 1300ms ease-in-out; -ms-transition: top 1300ms ease-in-out; -o-transition: top 1300ms ease-in-out; transition: top 1300ms ease-in-out; top: 0px; } .sum-snacks.number-sense-task-group .ns-main.welcome { top: 899px; } .sum-snacks.number-sense-task-group .ns-main.finish { -webkit-transition: top 1000ms ease-in-out; -moz-transition: top 1000ms ease-in-out; -ms-transition: top 1000ms ease-in-out; -o-transition: top 1000ms ease-in-out; transition: top 1000ms ease-in-out; top: 309px; } .sum-snacks.number-sense-task-group .ns-main .grass { position: absolute; bottom: 0px; left: 0px; width: 960px; height: 110px; background: url("https://webassets.zearn.org/app_assets/number_sense/counting/sum_snacks/Grass2.svg") no-repeat; -webkit-transition: filter 300ms ease-in-out; -moz-transition: filter 300ms ease-in-out; -ms-transition: filter 300ms ease-in-out; -o-transition: filter 300ms ease-in-out; transition: filter 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .label, .sum-snacks.number-sense-task-group .ns-main .zearn-input, .sum-snacks.number-sense-task-group .ns-main .rem-num { font-size: 30px; font-weight: bold; } .sum-snacks.number-sense-task-group .ns-main .label.fade-out, .sum-snacks.number-sense-task-group .ns-main .zearn-input.fade-out, .sum-snacks.number-sense-task-group .ns-main .rem-num.fade-out { opacity: 0; } .sum-snacks.number-sense-task-group .ns-main .label.hidden, .sum-snacks.number-sense-task-group .ns-main .zearn-input.hidden, .sum-snacks.number-sense-task-group .ns-main .rem-num.hidden { visibility: hidden; } .sum-snacks.number-sense-task-group .ns-main .label.fade-out-end, .sum-snacks.number-sense-task-group .ns-main .zearn-input.fade-out-end, .sum-snacks.number-sense-task-group .ns-main .rem-num.fade-out-end { opacity: 0; -webkit-transition: opacity 100ms ease-in-out; -moz-transition: opacity 100ms ease-in-out; -ms-transition: opacity 100ms ease-in-out; -o-transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .label.fade-out-close-the-loop, .sum-snacks.number-sense-task-group .ns-main .zearn-input.fade-out-close-the-loop, .sum-snacks.number-sense-task-group .ns-main .rem-num.fade-out-close-the-loop { opacity: 0; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .label { position: relative; margin-top: 15px; -webkit-transition: all 500ms ease-in-out, opacity 300ms ease-in-out; -moz-transition: all 500ms ease-in-out, opacity 300ms ease-in-out; -ms-transition: all 500ms ease-in-out, opacity 300ms ease-in-out; -o-transition: all 500ms ease-in-out, opacity 300ms ease-in-out; transition: all 500ms ease-in-out, opacity 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .label[data-pv="0"] { width: 30px; margin-left: 40px; } .sum-snacks.number-sense-task-group .ns-main .label[data-pv="0"].pocket { width: 70px; margin-left: 10px; } .sum-snacks.number-sense-task-group .ns-main .label[data-pv="1"] { width: 80px; margin-left: 30px; } .sum-snacks.number-sense-task-group .ns-main .label[data-pv="1"].pocket { width: 100px; margin-left: 10px; } .sum-snacks.number-sense-task-group .ns-main .counting-out-input-box { position: relative; } .sum-snacks.number-sense-task-group .ns-main .counting-out-input-box[data-pv="0"] { margin-left: 22px; margin-right: -18px; } .sum-snacks.number-sense-task-group .ns-main .counting-out-input-box[data-pv="1"] { margin-left: 37px; margin-right: 7px; } .sum-snacks.number-sense-task-group .ns-main .zearn-input { min-width: 66px; height: 58px; margin-top: 6px; padding-top: 5px; position: relative; } .sum-snacks.number-sense-task-group .ns-main .zearn-input:not(.fade-out-end):not(.fade-out-close-the-loop) { -webkit-transition: opacity 300ms ease-in-out 700ms, background-color 100ms ease-in-out, border 100ms ease-in-out, color 100ms ease-in-out; -moz-transition: opacity 300ms ease-in-out 700ms, background-color 100ms ease-in-out, border 100ms ease-in-out, color 100ms ease-in-out; -ms-transition: opacity 300ms ease-in-out 700ms, background-color 100ms ease-in-out, border 100ms ease-in-out, color 100ms ease-in-out; -o-transition: opacity 300ms ease-in-out 700ms, background-color 100ms ease-in-out, border 100ms ease-in-out, color 100ms ease-in-out; transition: opacity 300ms ease-in-out 700ms, background-color 100ms ease-in-out, border 100ms ease-in-out, color 100ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .zearn-input:not(.fade-out-end):not(.fade-out-close-the-loop).correct, .sum-snacks.number-sense-task-group .ns-main .zearn-input:not(.fade-out-end):not(.fade-out-close-the-loop).try-again, .sum-snacks.number-sense-task-group .ns-main .zearn-input:not(.fade-out-end):not(.fade-out-close-the-loop).incorrect { -webkit-transition: opacity 300ms ease-in-out 700ms, background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out 700ms, background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out 700ms, background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out 700ms, background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; transition: opacity 300ms ease-in-out 700ms, background-color 300ms ease-in-out, border 300ms ease-in-out, color 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .zearn-input:not(.grayed):not(.correct):not(.correct-done):not(.try-again):not(.incorrect):not(.incorrect-done) { background-color: white; } .sum-snacks.number-sense-task-group .ns-main .zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(:empty) { padding-left: 10px; } .sum-snacks.number-sense-task-group .ns-main .counting-out-arrow { position: absolute; top: -48px; left: 33px; -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; -o-transition: opacity 200ms ease-in-out; transition: opacity 200ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .counting-out-arrow figure { margin: 0; } .sum-snacks.number-sense-task-group .ns-main .counting-out-arrow figure path:not(:last-child) { fill: none; stroke: black; stroke-width: 2px; } .sum-snacks.number-sense-task-group .ns-main .counting-out-arrow .arrow-label { font-size: 20px; font-weight: bold; color: #323232; width: 80px; height: 80px; line-height: 60px; border-radius: 40px; margin: auto; top: -95px; position: relative; -webkit-transition: background-color 100ms ease-in-out, font-size 500ms ease-in-out; -moz-transition: background-color 100ms ease-in-out, font-size 500ms ease-in-out; -ms-transition: background-color 100ms ease-in-out, font-size 500ms ease-in-out; -o-transition: background-color 100ms ease-in-out, font-size 500ms ease-in-out; transition: background-color 100ms ease-in-out, font-size 500ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .counting-out-arrow .arrow-label.highlight { background-color: #ffe919; } .sum-snacks.number-sense-task-group .ns-main .counting-out-arrow.fade-out { opacity: 0; -webkit-transition: opacity 100ms ease-in-out; -moz-transition: opacity 100ms ease-in-out; -ms-transition: opacity 100ms ease-in-out; -o-transition: opacity 100ms ease-in-out; transition: opacity 100ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .task-container { margin: auto; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget { width: 100%; margin-top: 20px; } .sum-snacks.number-sense-task-group .ns-main .mat { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 200px; min-width: 100%; padding: 0px 60px; position: absolute; margin-left: 0px; -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .mat.hidden .given-mat-container, .sum-snacks.number-sense-task-group .ns-main .mat.hidden .given-mat-objects .given-grouping, .sum-snacks.number-sense-task-group .ns-main .mat.hidden .counting-mat-container, .sum-snacks.number-sense-task-group .ns-main .mat.hidden .counting-mat-objects .food-row { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; opacity: 0; } .sum-snacks.number-sense-task-group .ns-main .mat.hidden.fade-in .given-mat-container, .sum-snacks.number-sense-task-group .ns-main .mat.hidden.fade-in .given-mat-objects .given-grouping, .sum-snacks.number-sense-task-group .ns-main .mat.hidden.fade-in .counting-mat-container, .sum-snacks.number-sense-task-group .ns-main .mat.hidden.fade-in .counting-mat-objects .food-row { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; opacity: 1; } .sum-snacks.number-sense-task-group .ns-main .scroll-left, .sum-snacks.number-sense-task-group .ns-main .scroll-right { margin: -110px 10px 0 10px; } .sum-snacks.number-sense-task-group .ns-main .scroll-left.disabled, .sum-snacks.number-sense-task-group .ns-main .scroll-right.disabled { cursor: default; } .sum-snacks.number-sense-task-group .ns-main .scroll-left.fade-out, .sum-snacks.number-sense-task-group .ns-main .scroll-right.fade-out { opacity: 0; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .food { position: relative; left: 0px; top: 0px; } .sum-snacks.number-sense-task-group .ns-main .food.hidden { visibility: hidden; } .sum-snacks.number-sense-task-group .ns-main .food.on-start { opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .sum-snacks.number-sense-task-group .ns-main .food.fly-out { -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .food.fly-out[data-pv="0"] { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } .sum-snacks.number-sense-task-group .ns-main .food.fly-out[data-pv="1"] { -webkit-transform: scale(0.25); -moz-transform: scale(0.25); -ms-transform: scale(0.25); -o-transform: scale(0.25); transform: scale(0.25); } .sum-snacks.number-sense-task-group .ns-main .food[data-img=apple][data-pv="0"] { min-width: 30px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/apple1.svg"); background-size: 30px 30px; width: 30px; height: 30px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=apple][data-pv="1"] { min-width: 80px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/apple10_noborder.svg"); background-size: 80px 80px; width: 80px; height: 80px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=broccoli][data-pv="0"] { min-width: 30px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/broccoli1.svg"); background-size: 30px 30px; width: 30px; height: 30px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=broccoli][data-pv="1"] { min-width: 80px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/broccoli10_noborder.svg"); background-size: 80px 80px; width: 80px; height: 80px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=carrot][data-pv="0"] { min-width: 30px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/carrot1.svg"); background-size: 30px 30px; width: 30px; height: 30px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=carrot][data-pv="1"] { min-width: 80px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/carrot10_noborder.svg"); background-size: 80px 80px; width: 80px; height: 80px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=orange][data-pv="0"] { min-width: 30px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/orange1.svg"); background-size: 30px 30px; width: 30px; height: 30px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=orange][data-pv="1"] { min-width: 80px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/orange10_noborder.svg"); background-size: 80px 80px; width: 80px; height: 80px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=pear][data-pv="0"] { min-width: 30px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/pear1.svg"); background-size: 30px 30px; width: 30px; height: 30px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=pear][data-pv="1"] { min-width: 80px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/pear10_noborder.svg"); background-size: 80px 80px; width: 80px; height: 80px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=radish][data-pv="0"] { min-width: 30px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/radish1.svg"); background-size: 30px 30px; width: 30px; height: 30px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=radish][data-pv="1"] { min-width: 80px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/radish10_noborder.svg"); background-size: 80px 80px; width: 80px; height: 80px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=strawberry][data-pv="0"] { min-width: 30px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/strawberry1.svg"); background-size: 30px 30px; width: 30px; height: 30px; } .sum-snacks.number-sense-task-group .ns-main .food[data-img=strawberry][data-pv="1"] { min-width: 80px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/strawberry10_noborder.svg"); background-size: 80px 80px; width: 80px; height: 80px; } .sum-snacks.number-sense-task-group .ns-main .food[data-pv="1"].with-border[data-img=apple] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/apple10.svg"); } .sum-snacks.number-sense-task-group .ns-main .food[data-pv="1"].with-border[data-img=broccoli] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/broccoli10.svg"); } .sum-snacks.number-sense-task-group .ns-main .food[data-pv="1"].with-border[data-img=carrot] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/carrot10.svg"); } .sum-snacks.number-sense-task-group .ns-main .food[data-pv="1"].with-border[data-img=orange] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/orange10.svg"); } .sum-snacks.number-sense-task-group .ns-main .food[data-pv="1"].with-border[data-img=pear] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/pear10.svg"); } .sum-snacks.number-sense-task-group .ns-main .food[data-pv="1"].with-border[data-img=radish] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/radish10.svg"); } .sum-snacks.number-sense-task-group .ns-main .food[data-pv="1"].with-border[data-img=strawberry] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/strawberry10.svg"); } .sum-snacks.number-sense-task-group .ns-main .food.slid-down { top: 500px; } .sum-snacks.number-sense-task-group .ns-main .food.slide-up:not(.rem-food) { -webkit-animation: slideUp 1000ms ease-in-out; -moz-animation: slideUp 1000ms ease-in-out; -ms-animation: slideUp 1000ms ease-in-out; -o-animation: slideUp 1000ms ease-in-out; animation: slideUp 1000ms ease-in-out; top: 0px; } @keyframes slideUp { 0% { top: 500px; } 100% { top: 0px; } } .sum-snacks.number-sense-task-group .ns-main .given-mat-container { border-radius: 10px; background-color: #ffffff; border: solid 2px #cccccc; position: relative; margin-right: 4px; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .given-mat-container.fade-out { opacity: 0; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-width: 120px; height: 200px; position: absolute; padding: 0px 3px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .given-grouping { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .given-column { height: 100%; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0px 3px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .given-column[data-pv="0"] ~ .given-column[data-pv="0"] { -webkit-box-align: end; -webkit-align-self: flex-end; -ms-flex-align: end; align-self: flex-end; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .food.fly-in { opacity: 1; transform: none; -webkit-transition: all 700ms ease-in-out, opacity 33ms; -moz-transition: all 700ms ease-in-out, opacity 33ms; -ms-transition: all 700ms ease-in-out, opacity 33ms; -o-transition: all 700ms ease-in-out, opacity 33ms; transition: all 700ms ease-in-out, opacity 33ms; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .food[data-pv="0"] { margin-bottom: 3.5px; margin-top: 3.5px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .food[data-pv="0"]:first-child, .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .food[data-pv="0"]:nth-child(5n+1) { margin-top: 10px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .food[data-pv="0"]:nth-child(5n), .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .food[data-pv="0"]:last-child { margin-bottom: 10px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .food[data-pv="1"]:first-child:nth-last-child(3) ~ .food[data-pv="1"] { margin-top: -25px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .given-column[data-pv="1"]:nth-last-child(3) ~ .given-column[data-pv="1"] { margin-left: -20px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .label { position: absolute; top: 200px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .counting-out-input-box { position: absolute; top: 200px; right: -10px; } .sum-snacks.number-sense-task-group .ns-main .given-mat-objects .counting-out-input-box .zearn-input:not(.fade-out-end) { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic) .counting-mat-container { background-color: white; border: solid 2px #cccccc; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.incorrect .counting-mat-container { border: solid 2px #ff4d76; background-color: #ffe6ee; cursor: pointer; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.correct .counting-mat-container { border: solid 2px #00c372; background-color: #ccffd9; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.inefficient .counting-mat-container { border: solid 2px #f3cd84; background-color: #f9e5b6; cursor: pointer; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.inefficient .counting-mat-container:hover { background-color: #f6d99b; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-container { position: relative; border-radius: 10px; background-color: #f3fdff; border: solid 2px #0097b6; padding-right: 20px; -webkit-flex-grow: 1; flex-grow: 1; -webkit-transition: opacity 300ms ease-in-out, all 500ms ease-in-out; -moz-transition: opacity 300ms ease-in-out, all 500ms ease-in-out; -ms-transition: opacity 300ms ease-in-out, all 500ms ease-in-out; -o-transition: opacity 300ms ease-in-out, all 500ms ease-in-out; transition: opacity 300ms ease-in-out, all 500ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-container.fade-out { opacity: 0; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-container.highlight-hint { -webkit-animation: highlightMat 667ms linear 3; -moz-animation: highlightMat 667ms linear 3; -ms-animation: highlightMat 667ms linear 3; -o-animation: highlightMat 667ms linear 3; animation: highlightMat 667ms linear 3; } @-webkit-keyframes highlightMat { 50% { background-color: #ffff73; border-color: #ffe919; } } @-moz-keyframes highlightMat { 50% { background-color: #ffff73; border-color: #ffe919; } } @-o-keyframes highlightMat { 50% { background-color: #ffff73; border-color: #ffe919; } } @keyframes highlightMat { 50% { background-color: #ffff73; border-color: #ffe919; } } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects { position: absolute; padding-right: 20px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food { opacity: 1; position: relative; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food.preanimate { opacity: 0; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food.animate { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food.fade-out { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transition: all 300ms ease-in-out 100ms; -moz-transition: all 300ms ease-in-out 100ms; -ms-transition: all 300ms ease-in-out 100ms; -o-transition: all 300ms ease-in-out 100ms; transition: all 300ms ease-in-out 100ms; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food[data-pv="0"] { margin-left: 40px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food[data-pv="1"] { margin-left: 30px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food-row, .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .label-row, .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food-row { position: relative; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .label-row { position: absolute; top: 200px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .food-row, .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row, .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row { height: 200px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row { position: relative; top: -200px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row.hidden { display: none; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; opacity: 0; border: solid 1px #99dcff; border-radius: 10px; margin-left: 10px; width: 50px; height: calc(100% - 2 * 10px); -webkit-transition: all 300ms ease-in-out 100ms; -moz-transition: all 300ms ease-in-out 100ms; -ms-transition: all 300ms ease-in-out 100ms; -o-transition: all 300ms ease-in-out 100ms; transition: all 300ms ease-in-out 100ms; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket .food { margin: 0; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket.filled[data-pv="0"] { width: 70px; padding-left: 20px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket.filled[data-pv="1"] { width: 100px; padding-left: 10px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket.active { opacity: 1; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket.incorrect { border: solid 1px #ff4d76; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket.correct { border: solid 1px #00c372; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket.fade-out { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); -webkit-transition: all 300ms ease-in-out 100ms; -moz-transition: all 300ms ease-in-out 100ms; -ms-transition: all 300ms ease-in-out 100ms; -o-transition: all 300ms ease-in-out 100ms; transition: all 300ms ease-in-out 100ms; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .pocket-row .pocket.fade-out-end { border-color: transparent; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; min-width: calc(100% - 20px); left: 0px; top: 0px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost { opacity: 0; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.active { opacity: 1; -webkit-transition: all 300ms ease-in-out 100ms; -moz-transition: all 300ms ease-in-out 100ms; -ms-transition: all 300ms ease-in-out 100ms; -o-transition: all 300ms ease-in-out 100ms; transition: all 300ms ease-in-out 100ms; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=apple][data-pv="1"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/apple10_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=apple][data-pv="0"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/apple_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=broccoli][data-pv="1"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/broccoli10_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=broccoli][data-pv="0"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/broccoli_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=carrot][data-pv="1"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/carrot10_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=carrot][data-pv="0"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/carrot_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=orange][data-pv="1"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/orange10_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=orange][data-pv="0"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/orange_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=pear][data-pv="1"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/pear10_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=pear][data-pv="0"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/pear_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=radish][data-pv="1"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/radish10_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=radish][data-pv="0"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/radish_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=strawberry][data-pv="1"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/strawberry10_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects .ghost-row .ghost.food[data-img=strawberry][data-pv="0"] { background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/foods/strawberry_ghost.svg"); } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects.spaced-out .food { width: 100px; min-width: 100px; margin-left: 10px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects.spaced-out .counting-out-input-box { width: 100px; min-width: 100px; margin-left: 10px; margin-right: 0px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-objects.spaced-out .counting-out-input-box .counting-out-arrow { left: 50px; } .sum-snacks.number-sense-task-group .ns-main .bank { position: relative; margin-top: 275px; -webkit-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 600ms; -moz-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 600ms; -ms-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 600ms; -o-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 600ms; transition: top 600ms ease-in-out, z-index 0ms ease-in-out 600ms; top: 0px; } .sum-snacks.number-sense-task-group .ns-main .bank.slide-down { -webkit-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 200ms; -moz-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 200ms; -ms-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 200ms; -o-transition: top 600ms ease-in-out, z-index 0ms ease-in-out 200ms; transition: top 600ms ease-in-out, z-index 0ms ease-in-out 200ms; top: 250px; } .sum-snacks.number-sense-task-group .ns-main .bank .qty-wrap { display: inline-block; margin: 0px 27px; } .sum-snacks.number-sense-task-group .ns-main .bank .qty-wrap.ones .food { margin: 25px 0px; } .sum-snacks.number-sense-task-group .ns-main .bank .plus-button, .sum-snacks.number-sense-task-group .ns-main .bank .minus-button { -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } .sum-snacks.number-sense-task-group .ns-main .animal { display: inline-block; position: absolute; top: 0px; -webkit-transition: left 1000ms ease-in-out; -moz-transition: left 1000ms ease-in-out; -ms-transition: left 1000ms ease-in-out; -o-transition: left 1000ms ease-in-out; transition: left 1000ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=black_bear] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/black_bear.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=black_bear].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/black_bear_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=brown_bear] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/brown_bear.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=brown_bear].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/brown_bear_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=dog] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/dog.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=dog].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/dog_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=fox] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/fox.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=fox].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/fox_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=frog] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/frog.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=frog].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/frog_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=koala] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/koala.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=koala].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/koala_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=lion] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/lion.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=lion].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/lion_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=monkey] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/monkey.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=monkey].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/monkey_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=pig] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/pig.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=pig].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/pig_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=rabbit] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/rabbit.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=rabbit].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/rabbit_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=tiger] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/tiger.svg"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-img=tiger].eating { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/animals/tiger_eating.svg"); } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="1"] { left: 160px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="2"] { left: 255px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="3"] { left: 350px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="4"] { left: 445px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="5"] { left: 540px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="6"] { left: 635px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="7"] { left: 730px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="8"] { left: 825px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="9"] { left: 920px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="10"] { left: 1015px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="11"] { left: 1110px; } .sum-snacks.number-sense-task-group .ns-main .animal[data-num="12"] { left: 1205px; } .sum-snacks.number-sense-task-group .ns-main .animal.in-front { -webkit-transform: scale(2.1); -moz-transform: scale(2.1); -ms-transform: scale(2.1); -o-transform: scale(2.1); transform: scale(2.1); width: 100px; top: -55px; left: 40px; -webkit-transition: all 750ms ease-in-out, z-index 0ms ease-in-out 500ms; -moz-transition: all 750ms ease-in-out, z-index 0ms ease-in-out 500ms; -ms-transition: all 750ms ease-in-out, z-index 0ms ease-in-out 500ms; -o-transition: all 750ms ease-in-out, z-index 0ms ease-in-out 500ms; transition: all 750ms ease-in-out, z-index 0ms ease-in-out 500ms; } .sum-snacks.number-sense-task-group .ns-main .animal.in-front.slide-off { margin-left: -500px; -webkit-transition: margin-left 1500ms ease-in-out; -moz-transition: margin-left 1500ms ease-in-out; -ms-transition: margin-left 1500ms ease-in-out; -o-transition: margin-left 1500ms ease-in-out; transition: margin-left 1500ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .animal-lineup { position: absolute; top: 600px; -webkit-transition: top 1000ms ease-in-out, filter 300ms ease-in-out; -moz-transition: top 1000ms ease-in-out, filter 300ms ease-in-out; -ms-transition: top 1000ms ease-in-out, filter 300ms ease-in-out; -o-transition: top 1000ms ease-in-out, filter 300ms ease-in-out; transition: top 1000ms ease-in-out, filter 300ms ease-in-out; } .sum-snacks.number-sense-task-group .ns-main .animal-lineup.behind-grass { display: block; top: 480px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.counting .given-mat-objects .label { left: 0px; width: 100%; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.more .given-mat-objects .label, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.adding .given-mat-objects .label, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.goal .given-mat-objects .label { right: 10px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.more .label-row .label, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.adding .label-row .label, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.goal .label-row .label { margin-top: 4px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.more .label-row .label.and-more, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.adding .label-row .label.and-more, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.goal .label-row .label.and-more { margin-right: 10px; white-space: nowrap; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.more .close-the-loop, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.adding .close-the-loop, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.goal .close-the-loop { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; width: auto; opacity: 1; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.more .close-the-loop.fade-out, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.adding .close-the-loop.fade-out, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.goal .close-the-loop.fade-out { opacity: 0; width: 0; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.more .close-the-loop .label:not(:first-child), .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.adding .close-the-loop .label:not(:first-child), .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.goal .close-the-loop .label:not(:first-child) { white-space: nowrap; margin-left: 10px; } .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.more .close-the-loop .zearn-input, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.adding .close-the-loop .zearn-input, .sum-snacks.number-sense-task-group .ns-main .counting-mat-widget.goal .close-the-loop .zearn-input { margin-left: 10px; } .sum-snacks.number-sense-task-group .remediation-layer { width: 100%; height: 100%; background-color: white; position: absolute; top: 0px; opacity: 0; -webkit-transition: opacity 1000ms ease-in-out, z-index 0ms ease-in-out 1000ms; -moz-transition: opacity 1000ms ease-in-out, z-index 0ms ease-in-out 1000ms; -ms-transition: opacity 1000ms ease-in-out, z-index 0ms ease-in-out 1000ms; -o-transition: opacity 1000ms ease-in-out, z-index 0ms ease-in-out 1000ms; transition: opacity 1000ms ease-in-out, z-index 0ms ease-in-out 1000ms; } .sum-snacks.number-sense-task-group.remediating .remediation-layer { opacity: 0.95; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; } .sum-snacks.number-sense-task-group.remediating .grass, .sum-snacks.number-sense-task-group.remediating .animal-lineup, .sum-snacks.number-sense-task-group.remediating .ns-prompt-bar.behind, .sum-snacks.number-sense-task-group.remediating .counting-mat-widget:not(.dynamic) > div:not(.remediation-area) { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } .sum-snacks.number-sense-task-group .remediation-area .rem-foods .food.rem-food { position: absolute; } .sum-snacks.number-sense-task-group .remediation-area .rem-foods .food.rem-food.rem-moment { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .rem-foods .food.rem-food.rem-moment[data-pv="1"] { min-width: 40px; width: 40px; height: 40px; background-size: 40px 40px; } .sum-snacks.number-sense-task-group .remediation-area .rem-foods .food.rem-food.rem-moment[data-pv="0"] { min-width: 15px; width: 15px; height: 15px; background-size: 15px 15px; } .sum-snacks.number-sense-task-group .remediation-area .rem-foods .food.rem-food.fade-out { opacity: 0; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .rem-num, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc { position: absolute; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .rem-num .tens, .sum-snacks.number-sense-task-group .remediation-area .rem-num .ones, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .tens, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .ones { display: inline-block; height: 100%; } .sum-snacks.number-sense-task-group .remediation-area .rem-num { min-width: 66px; padding-top: 5px; border: 4px solid transparent; top: 6px; left: 0px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num .ones { margin-left: -8px; min-width: 0px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num .tens { margin-left: 0px; min-width: 0px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.moving { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.moving .ones, .sum-snacks.number-sense-task-group .remediation-area .rem-num.moving .tens { -webkit-transition: margin-left 500ms ease-in-out, min-width 500ms ease-in-out; -moz-transition: margin-left 500ms ease-in-out, min-width 500ms ease-in-out; -ms-transition: margin-left 500ms ease-in-out, min-width 500ms ease-in-out; -o-transition: margin-left 500ms ease-in-out, min-width 500ms ease-in-out; transition: margin-left 500ms ease-in-out, min-width 500ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment { padding-top: 0px; border-width: 0px; font-size: 72px; top: 300px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment .ones { margin-left: -12px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment .tens { margin-left: 4px; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc { border-radius: 5px; border: 4px solid black; top: 270px; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc.fade-out { opacity: 0; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .ones { border-left: 4px solid black; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .ones, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .tens { -webkit-transition: background-color 100ms ease-in-out, color 100ms ease-in-out; -moz-transition: background-color 100ms ease-in-out, color 100ms ease-in-out; -ms-transition: background-color 100ms ease-in-out, color 100ms ease-in-out; -o-transition: background-color 100ms ease-in-out, color 100ms ease-in-out; transition: background-color 100ms ease-in-out, color 100ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-row { height: 93px; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-row .ones.highlight, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-row .tens.highlight { background-color: #ffe919; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-row .tens { width: 85.5px; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-row .ones { width: 89.5px; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-header { background-color: black; color: white; font-size: 20px; height: 30px; } .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-header .ones.highlight, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .pvc-header .tens.highlight { color: #ffe919; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc { min-width: 180px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment.previous, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc.previous { left: 235px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment.current, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc.current { left: 545px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment .ones, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .ones { min-width: 88px; } .sum-snacks.number-sense-task-group .remediation-area .rem-num.rem-moment .tens, .sum-snacks.number-sense-task-group .remediation-area .rem-pvc .tens { min-width: 82px; } .sum-snacks.number-sense-task-group .remediation-area .counting-out-arrow.fade-out { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .sum-snacks.number-sense-task-group .remediation-area .counting-out-arrow.rem-moment { top: 310px; left: 430px; } .sum-snacks.number-sense-task-group .remediation-area .counting-out-arrow.rem-moment .arrow-label { font-size: 30px; } .sum-snacks.number-sense-task-group .remediation-area .counting-out-arrow.rem-moment:not(.fade-out) { -webkit-transition: all 500ms ease-in-out; -moz-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out; } .sum-snacks.number-sense-task-group .number-sense-finish { position: absolute; left: 0px; width: 100%; height: 100%; display: none; top: 309px; background: none; } .sum-snacks.number-sense-task-group .number-sense-finish .fluency-complete-buttons { display: block; } .sum-snacks.number-sense-task-group .number-sense-finish .fluency-complete-buttons .activity-complete-buttons-area .acb-zearned-it { color: #ff5959; position: relative; top: -280px; } .sum-snacks.number-sense-task-group .number-sense-finish .zzz { left: 360px; top: 165px; position: absolute; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/sum_snacks/ZZZ.gif"); background-size: 80px 100px; width: 80px; height: 100px; } .sum-snacks.number-sense-task-group .number-sense-finish .sleeping-rabbit { position: relative; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/counting/sum_snacks/Rabbit_sleeping.svg"); background-size: 300px 200px; width: 300px; height: 200px; top: 210px; margin: auto; } @supports (-ms-accelerator: true) { .counting-out.number-sense-task-group.remediating .grass, .counting-out.number-sense-task-group.remediating .animal-lineup, .counting-out.number-sense-task-group.remediating .ns-prompt-bar.behind, .counting-out.number-sense-task-group.remediating .counting-mat-widget:not(.dynamic) > div:not(.remediation-area) { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; } } .counting-out.number-sense-task-group .welcome-scene { z-index: 2; } .counting-out.number-sense-task-group .ns-welcome .title .bite { z-index: 1; } .counting-out.number-sense-task-group .ns-welcome .ns-welcome-button { z-index: 2; } .counting-out.number-sense-task-group .ns-welcome .welcome-animals { z-index: 1; } .counting-out.number-sense-task-group .ns-main .grass { z-index: 1; } .counting-out.number-sense-task-group .ns-main .food { z-index: 7; } .counting-out.number-sense-task-group .ns-main .animal { z-index: 1; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget .scroll-left, .counting-out.number-sense-task-group .ns-main .counting-mat-widget .scroll-right { z-index: 8; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .given-mat-container, .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .counting-mat-container { z-index: 5; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .given-mat-objects { z-index: 6; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .counting-mat-objects .ghost-row { z-index: 4; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .counting-mat-objects .pocket-row .pocket, .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .counting-mat-objects .ghost-row .ghost { z-index: 6; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .label { z-index: 6; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .bank { z-index: 7; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget.dynamic .bank.slide-down { z-index: 1; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .given-mat-container, .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .counting-mat-container { z-index: 1; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .given-mat-objects .given-grouping, .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .given-mat-objects .zearn-input, .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .counting-mat-objects .food-row, .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .counting-mat-objects .label-row .zearn-input:not(.clickable) { z-index: 2; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .counting-out-arrow { z-index: 8; } .counting-out.number-sense-task-group .ns-main .counting-mat-widget:not(.dynamic):not(.more):not(.adding) .counting-out-arrow .arrow-label { z-index: -1; } .counting-out.number-sense-task-group .ns-prompt-bar.behind { z-index: 3; } .counting-out.number-sense-task-group .remediation-layer { z-index: 0; } .counting-out.number-sense-task-group.remediating .remediation-layer { z-index: 4; } .counting-out.number-sense-task-group.remediating .ns-main .counting-mat-widget.dynamic .counting-mat-objects .ghost-row { z-index: 5; } .counting-out.number-sense-task-group.remediating .ns-main .animal.in-front:not(.eating) { z-index: 1; } .counting-out.number-sense-task-group .remediation-area .rem-num { z-index: 7; } .counting-out.number-sense-task-group .remediation-area .rem-pvc { z-index: 6; } .counting-out.number-sense-task-group .remediation-area .counting-out-arrow.rem-moment { z-index: 6; } .ns-hundred-flat { display: table; background: #f26d00; border-style: solid; border-color: #994500; border-width: 2px 4px 4px 2px; } .ns-hundred-flat .ns-hundred-flat-row { display: table-row; } .ns-hundred-flat .ns-hundred-flat-cell { width: 17px; height: 17px; display: table-cell; border-style: solid; border-color: #994500; border-width: 2px 0px 0px 2px; } .ns-ten-rod { border-bottom: 4px solid #991900; } .ns-ten-rod .ns-ten-rod-cell { background: #ff5433; border: 4px solid #991900; border-bottom: none; width: 21px; height: 17px; } .ns-one-unit { width: 13px; height: 13px; background: #505759; } .f2f-concrete-hundreds-buttons, .f2f-concrete-tens-buttons, .f2f-concrete-ones-buttons, .f2f-concrete-hundreds-area, .f2f-concrete-tens-area, .f2f-concrete-ones-area { display: inline-block; vertical-align: middle; height: 100%; } .f2f-concrete-hundreds-buttons, .f2f-concrete-tens-buttons, .f2f-concrete-hundreds-area, .f2f-concrete-tens-area { width: 358px; } .f2f-concrete-ones-buttons, .f2f-concrete-ones-area { width: 180px; } .f2f-concrete-buttons, .f2f-concrete-mat { width: 900px; margin: 0 auto; } .f2f-concrete-buttons { border: 2px solid transparent; -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); -webkit-transition: -webkit-transform 300ms ease-in-out; -moz-transition: -moz-transform 300ms ease-in-out; -o-transition: -o-transform 300ms ease-in-out; transition: transform 300ms ease-in-out; } .f2f-concrete-buttons.show { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .f2f-concrete-buttons .plus-button, .f2f-concrete-buttons .minus-button { vertical-align: middle; } .f2f-concrete-buttons .ns-hundred-flat, .f2f-concrete-buttons .ns-ten-rod, .f2f-concrete-buttons .ns-one-unit { display: inline-block; vertical-align: middle; margin: 0 4px; } .f2f-concrete-buttons .ns-hundred-flat-cell, .f2f-concrete-buttons .ns-ten-rod-cell { width: 6px; height: 6px; } .f2f-concrete-buttons .ns-hundred-flat { border-width: 1px 2px 2px 1px; } .f2f-concrete-buttons .ns-hundred-flat .ns-hundred-flat-cell { border-width: 1px 0px 0px 1px; } .f2f-concrete-buttons .ns-ten-rod { border-width: 1px; } .f2f-concrete-buttons .ns-ten-rod .ns-ten-rod-cell { border-width: 1px; } .f2f-concrete-buttons .ns-one-unit { border-width: 1px; width: 8px; height: 8px; } .f2f-concrete-mat { margin-top: 20px; background: #048ec3; border-radius: 10px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .f2f-concrete-mat.correct { background-color: #00c372; } .f2f-concrete-mat.incorrect { background-color: #ff4d76; } .f2f-concrete-mat.clickable { cursor: pointer; } .f2f-concrete-mat .f2f-concrete-box { height: 360px; background: #f3fdff; border: 2px solid #0097b6; border-radius: 10px; position: relative; top: 0px; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .f2f-concrete-mat .f2f-concrete-box.activate { -webkit-animation: bounceUp 1000ms; -moz-animation: bounceUp 1000ms; -ms-animation: bounceUp 1000ms; -o-animation: bounceUp 1000ms; animation: bounceUp 1000ms; top: -10px; } .f2f-concrete-mat .f2f-concrete-box.incorrect { border-color: #ff4d76; background-color: #ffe6ee; } .f2f-concrete-mat .f2f-concrete-box.correct { border-color: #00c372; background-color: #ccffd9; -webkit-animation: bounceDown 1000ms; -moz-animation: bounceDown 1000ms; -ms-animation: bounceDown 1000ms; -o-animation: bounceDown 1000ms; animation: bounceDown 1000ms; top: 0px; } .f2f-concrete-mat .ns-hundred-flat, .f2f-concrete-mat .ns-ten-rod, .f2f-concrete-mat .ns-one-unit { opacity: 0; position: relative; -webkit-transition: opacity 500ms, transform 500ms; -moz-transition: opacity 500ms, transform 500ms; -ms-transition: opacity 500ms, transform 500ms; -o-transition: opacity 500ms, transform 500ms; transition: opacity 500ms, transform 500ms; } .f2f-concrete-mat .ns-hundred-flat.active, .f2f-concrete-mat .ns-ten-rod.active, .f2f-concrete-mat .ns-one-unit.active { opacity: 1; } .f2f-concrete-mat .ns-hundred-flat.active.pre-animate, .f2f-concrete-mat .ns-ten-rod.active.pre-animate, .f2f-concrete-mat .ns-one-unit.active.pre-animate { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); -webkit-transform-origin: top left; -moz-transform-origin: top left; -ms-transform-origin: top left; -o-transform-origin: top left; transform-origin: top left; -webkit-transition: opacity 100ms; -moz-transition: opacity 100ms; -ms-transition: opacity 100ms; -o-transition: opacity 100ms; transition: opacity 100ms; } .f2f-concrete-mat .ns-hundred-flat.active.pre-animate.animate, .f2f-concrete-mat .ns-ten-rod.active.pre-animate.animate, .f2f-concrete-mat .ns-one-unit.active.pre-animate.animate { -webkit-transition: all 500ms; -moz-transition: all 500ms; -ms-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .f2f-concrete-mat .f2f-concrete-hundreds-remediation-area, .f2f-concrete-mat .f2f-concrete-tens-remediation-area, .f2f-concrete-mat .f2f-concrete-ones-remediation-area { opacity: 0; } .f2f-concrete-mat .f2f-concrete-hundreds-remediation-area.show, .f2f-concrete-mat .f2f-concrete-tens-remediation-area.show, .f2f-concrete-mat .f2f-concrete-ones-remediation-area.show { opacity: 1; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot { position: absolute; width: 176px; height: 176px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-0 { top: 20px; left: 10px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-1 { top: 28px; left: 26px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-2 { top: 36px; left: 42px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-3 { top: 44px; left: 58px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-4 { top: 52px; left: 74px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-5 { top: 60px; left: 90px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-6 { top: 68px; left: 106px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-7 { top: 76px; left: 122px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-8 { top: 84px; left: 138px; } .f2f-concrete-mat .f2f-concrete-hundreds-area .f2f-concrete-hundred-slot.slot-9 { top: 92px; left: 154px; } .f2f-concrete-mat .f2f-concrete-tens-area { padding-top: 20px; } .f2f-concrete-mat .f2f-concrete-tens-area .f2f-concrete-ten-slot { display: inline-block; vertical-align: top; margin: 0 6px; width: 21px; height: 174px; } .f2f-concrete-mat .f2f-concrete-ones-area { padding: 20px 0; } .f2f-concrete-mat .f2f-concrete-ones-area .f2f-concrete-one-slot { margin: 0px auto 4px auto; width: 13px; height: 13px; } .f2f-concrete-mat .f2f-concrete-ones-area .f2f-concrete-one-slot.slot-4 { margin-bottom: 12px; } .f2f-concrete-mat .f2f-concrete-hundred-slot, .f2f-concrete-mat .f2f-concrete-ten-slot, .f2f-concrete-mat .f2f-concrete-one-slot { border-color: #f3fdff; } .f2f-concrete-mat .f2f-concrete-hundred-slot.ghost, .f2f-concrete-mat .f2f-concrete-ten-slot.ghost, .f2f-concrete-mat .f2f-concrete-one-slot.ghost { border: 2px dotted #999999; background: #e4e4e4; opacity: 1; -webkit-transition: border-color 500ms, background 500ms; -moz-transition: border-color 500ms, background 500ms; -ms-transition: border-color 500ms, background 500ms; -o-transition: border-color 500ms, background 500ms; transition: border-color 500ms, background 500ms; } .f2f-concrete-mat .f2f-concrete-hundred-slot.ghost .ns-hundred-flat, .f2f-concrete-mat .f2f-concrete-ten-slot.ghost .ns-hundred-flat, .f2f-concrete-mat .f2f-concrete-one-slot.ghost .ns-hundred-flat { width: 176px; height: 176px; margin: -2px 0px 0px -2px; } .f2f-concrete-mat .f2f-concrete-hundred-slot.ghost .ns-ten-rod, .f2f-concrete-mat .f2f-concrete-ten-slot.ghost .ns-ten-rod, .f2f-concrete-mat .f2f-concrete-one-slot.ghost .ns-ten-rod { width: 21px; height: 174px; margin: -2px 0px 0px -2px; } .f2f-concrete-mat .f2f-concrete-hundred-slot.ghost .ns-one-unit, .f2f-concrete-mat .f2f-concrete-ten-slot.ghost .ns-one-unit, .f2f-concrete-mat .f2f-concrete-one-slot.ghost .ns-one-unit { width: 13px; height: 13px; margin: -2px 0px 0px -2px; } @-webkit-keyframes bounceUp { 0% { top: 0px; } 20% { top: -10px; } 40% { top: -6px; } 60% { top: -10px; } 80% { top: -9px; } 100% { top: -10px; } } @-moz-keyframes bounceUp { 0% { top: 0px; } 20% { top: -10px; } 40% { top: -6px; } 60% { top: -10px; } 80% { top: -9px; } 100% { top: -10px; } } @-o-keyframes bounceUp { 0% { top: 0px; } 20% { top: -10px; } 40% { top: -6px; } 60% { top: -10px; } 80% { top: -9px; } 100% { top: -10px; } } @keyframes bounceUp { 0% { top: 0px; } 20% { top: -10px; } 40% { top: -6px; } 60% { top: -10px; } 80% { top: -9px; } 100% { top: -10px; } } @-webkit-keyframes bounceDown { 0% { top: -10px; } 20% { top: 0px; } 40% { top: -4px; } 60% { top: 0px; } 80% { top: -1px; } 100% { top: 0px; } } @-moz-keyframes bounceDown { 0% { top: -10px; } 20% { top: 0px; } 40% { top: -4px; } 60% { top: 0px; } 80% { top: -1px; } 100% { top: 0px; } } @-o-keyframes bounceDown { 0% { top: -10px; } 20% { top: 0px; } 40% { top: -4px; } 60% { top: 0px; } 80% { top: -1px; } 100% { top: 0px; } } @keyframes bounceDown { 0% { top: -10px; } 20% { top: 0px; } 40% { top: -4px; } 60% { top: 0px; } 80% { top: -1px; } 100% { top: 0px; } } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group { height: 560px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right { position: absolute; width: 0px; height: 0px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-bottom { border-left: 480px solid transparent; border-right: 480px solid transparent; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-top.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-bottom.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-top.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-bottom.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-top.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-bottom.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-top.f2f-bg-top, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-bottom.f2f-bg-top { top: 0px; border-top: 280px solid #00afcc; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-top.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-bottom.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-top.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-bottom.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-top.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-bottom.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-top.f2f-bg-bottom, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-bottom.f2f-bg-bottom { bottom: 0px; border-bottom: 280px solid #6700cc; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-right { border-top: 280px solid transparent; border-bottom: 280px solid transparent; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-left.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-right.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-left.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-right.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-left.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-right.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-left.f2f-bg-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-right.f2f-bg-left { left: 0px; border-left: 480px solid #00cc80; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-left.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-top.f2f-bg-right.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-left.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-bottom.f2f-bg-right.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-left.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-left.f2f-bg-right.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-left.f2f-bg-right, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-bg-right.f2f-bg-right.f2f-bg-right { right: 0px; border-right: 480px solid #00cc80; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .center-circle, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-brain { position: absolute; border-radius: 250px; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; -moz-transition: -moz-transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; -o-transition: -o-transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; transition: transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -ms-transform-style: none; left: 245px; width: 450px; height: 450px; bottom: 55px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal.flipped { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); -ms-transform: rotateY(0deg); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal.flipped .center-circle { -ms-transform: rotateY(180deg); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal.flipped .f2f-brain { -ms-transform: rotateY(0deg); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-form-text, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-t-text { background-repeat: no-repeat; background-color: transparent; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle { background: #ffec00; width: 100%; height: 100%; z-index: 1; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .f2f-form-bg, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .f2f-t-text, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .ns-welcome-button { position: absolute; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .f2f-form-bg { background-color: #6700cc; height: 70px; width: 260px; padding: 10px; left: 95px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .f2f-form-bg.top { top: 70px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .f2f-form-bg.bottom { bottom: 70px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .f2f-form-bg .f2f-form-text { background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/asset-word-form.svg"); width: 168px; height: 100%; margin: auto; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .f2f-t-text { background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/asset-word-t.svg"); width: 75px; height: 130px; top: 160px; left: 130px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .ns-welcome-button { top: 192px; left: 220px; width: 100px; height: 100px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .center-circle .fluency-complete-buttons { margin-top: 160px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain { -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); transform: rotateY(180deg); width: 100%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain.effort { background-color: white; background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/EFOE_brain_effort.gif"); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain.thinking { background-color: white; background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/EFOE_brain_thinking.gif"); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain.strong { background-color: #ffec00; background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/EFOE_brain_strong.gif"); } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain { background-size: 80%; background-position: center; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain.effort { background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/EFOE_brain_effort_v2.svg"); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain.thinking { background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/EFOE_brain_thinking_v2.svg"); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-goal .f2f-brain.strong { background-image: url("https://webassets.zearn.org/app_assets/number_sense/form_2_form/EFOE_brain_strong_v2.svg"); } } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-gate { position: absolute; -webkit-transition: -webkit-transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; -moz-transition: -moz-transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; -o-transition: -o-transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; transition: transform 2000ms ease-in-out, height 1000ms ease-in-out, width 1000ms ease-in-out, bottom 1000ms ease-in-out, left 1000ms ease-in-out; background: white; overflow: hidden; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-gate.active { z-index: 3; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .task-container.grid-12 { margin: 0; width: 940px; height: 430px; position: absolute; top: 0; left: 0; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .task-container.grid-12.small { -webkit-transition: -webkit-transform 1000ms ease-in-out; -moz-transition: -moz-transform 1000ms ease-in-out; -o-transition: -o-transform 1000ms ease-in-out; transition: transform 1000ms ease-in-out; top: -65px; left: -34px; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-text-input { margin-top: 156px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat { background: transparent; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box { height: 280px; border-color: #cbcbcb; background: white; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-area { -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -ms-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-area.faded, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-area.faded, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-area.faded, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-area.faded, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-area.faded, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-area.faded { opacity: 0.5; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area { position: relative; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area.show { -webkit-transition: opacity 800ms; -moz-transition: opacity 800ms; -ms-transition: opacity 800ms; -o-transition: opacity 800ms; transition: opacity 800ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area.show .f2f-mc-button:hover:not(.correct):not(.incorrect):not(.hidden), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area.show .f2f-mc-button:hover:not(.correct):not(.incorrect):not(.hidden), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area.show .f2f-mc-button:hover:not(.correct):not(.incorrect):not(.hidden), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area.show .f2f-mc-button:hover:not(.correct):not(.incorrect):not(.hidden), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area.show .f2f-mc-button:hover:not(.correct):not(.incorrect):not(.hidden), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area.show .f2f-mc-button:hover:not(.correct):not(.incorrect):not(.hidden) { border-color: #00d6ff; background: #f3fdff; cursor: pointer; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button { position: absolute; height: 40px; width: 198px; font-size: 20px; color: #323232; border: 1px solid #323232; border-radius: 22px; margin-bottom: 4px; line-height: 40px; -webkit-transition: opacity 200ms; -moz-transition: opacity 200ms; -ms-transition: opacity 200ms; -o-transition: opacity 200ms; transition: opacity 200ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.correct, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.correct, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.correct, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.correct, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.correct, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.correct { border-color: #00c372; background: #ccffd9; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.incorrect, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.incorrect, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.incorrect, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.incorrect, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.incorrect, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.incorrect { border-color: #ff4d76; background: #ffe3ee; opacity: 0.5; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; -ms-transition: all 200ms ease-in; -o-transition: all 200ms ease-in; transition: all 200ms ease-in; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.hidden, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.hidden, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.hidden, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.hidden, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.hidden, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.hidden { opacity: 0; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.float, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.float, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.float, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button.float, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button.float, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button.float { top: -29px; -webkit-transition: all 350ms ease-in; -moz-transition: all 350ms ease-in; -ms-transition: all 350ms ease-in; -o-transition: all 350ms ease-in; transition: all 350ms ease-in; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button:nth-child(1):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button:nth-child(1):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button:nth-child(1):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button:nth-child(1):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button:nth-child(1):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button:nth-child(1):not(.float) { top: 0px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button:nth-child(2):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button:nth-child(2):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button:nth-child(2):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button:nth-child(2):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button:nth-child(2):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button:nth-child(2):not(.float) { top: 44px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button:nth-child(3):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button:nth-child(3):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button:nth-child(3):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area .f2f-mc-button:nth-child(3):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area .f2f-mc-button:nth-child(3):not(.float), #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area .f2f-mc-button:nth-child(3):not(.float) { top: 88px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-hundreds-remediation-area { top: 286px; left: 56px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-tens-remediation-area { top: 92px; left: 76px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-concrete-ones-remediation-area { top: 87px; left: -12px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus { position: absolute; width: 20px; height: 20px; font-size: 20px; background-color: white; opacity: 0; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus[data-pv=hundred-one], #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus[data-pv=hundred-one] { left: 418px; top: -24px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus[data-pv=ten], #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus[data-pv=ten] { left: -100px; top: -23px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus[data-pv=one], #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus[data-pv=one] { left: -48px; top: -22px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-concrete-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-mat .f2f-concrete-box .f2f-remediation-plus.show { opacity: 1; -webkit-transition: opacity 200ms ease-in; -moz-transition: opacity 200ms ease-in; -ms-transition: opacity 200ms ease-in; -o-transition: opacity 200ms ease-in; transition: opacity 200ms ease-in; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-concrete-hundreds-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-concrete-tens-remediation-area, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-concrete-ones-remediation-area { position: absolute; top: 290px; font-size: 30px; font-weight: 700; color: #656565; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-concrete-hundreds-remediation-area.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-concrete-tens-remediation-area.show, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-concrete-ones-remediation-area.show { -webkit-transition: opacity 50ms, top 500ms ease-in-out, left 500ms ease-in-out; -moz-transition: opacity 50ms, top 500ms ease-in-out, left 500ms ease-in-out; -ms-transition: opacity 50ms, top 500ms ease-in-out, left 500ms ease-in-out; -o-transition: opacity 50ms, top 500ms ease-in-out, left 500ms ease-in-out; transition: opacity 50ms, top 500ms ease-in-out, left 500ms ease-in-out; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-t2c-text { font-size: 30px; color: #323232; border: 2px solid #323232; border-radius: 8px; height: 74px; width: 900px; padding: 15px; margin: 10px auto; font-weight: 700; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-t2c-text .f2f-text-input-box { display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-t2c-text .f2f-text-input-box .f2f-text-input-pv, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-concrete .f2f-t2c-text .f2f-text-input-box .f2f-text-input-plus { margin: 0px 10px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation { position: absolute; top: 245px; left: 0px; right: 0px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation.remediating { top: 456px; -webkit-transition: top, 250ms; -moz-transition: top, 250ms; -ms-transition: top, 250ms; -o-transition: top, 250ms; transition: top, 250ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-left, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-equal, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-right { color: #323232; font-size: 30px; display: inline-block; vertical-align: middle; height: 100%; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-left .f2f-text-input-num, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-left .f2f-text-input-pv, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-left .f2f-text-input-plus { display: inline-block; -webkit-transition: color, 500ms; -moz-transition: color, 500ms; -ms-transition: color, 500ms; -o-transition: color, 500ms; transition: color, 500ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-left .f2f-text-input-num.grayed, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-left .f2f-text-input-pv.grayed, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-left .f2f-text-input-plus.grayed { color: #cbcbcb; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-equal { margin-left: 20px; margin-right: 20px; width: 40px; -webkit-transition: color, 500ms; -moz-transition: color, 500ms; -ms-transition: color, 500ms; -o-transition: color, 500ms; transition: color, 500ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-text-equation .f2f-t2t-equal.grayed { color: #cbcbcb; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-box { opacity: 0; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-2-text .f2f-concrete-box.show { opacity: 1; -webkit-transition: opacity, 1000ms; -moz-transition: opacity, 1000ms; -ms-transition: opacity, 1000ms; -o-transition: opacity, 1000ms; transition: opacity, 1000ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input { display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; position: relative; background: #656565; border-radius: 8px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input.correct { background: #00c372; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input.grayed { background: #cbcbcb; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input.grayed .f2f-text-input-box { color: #cbcbcb; border-color: #e4e4e4; -webkit-transition: color, 500ms; -moz-transition: color, 500ms; -ms-transition: color, 500ms; -o-transition: color, 500ms; transition: color, 500ms; -webkit-transition: border-color, 500ms; -moz-transition: border-color, 500ms; -ms-transition: border-color, 500ms; -o-transition: border-color, 500ms; transition: border-color, 500ms; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box { position: relative; top: 0px; color: #323232; font-size: 30px; font-weight: bold; background: white; border: 2px solid #656565; border-radius: 8px; height: 82px; width: auto; display: -webkit-inline-flex; display: -moz-inline-flex; display: -ms-inline-flex; display: -o-inline-flex; display: inline-flex; padding-top: 10px; padding-left: 20px; padding-right: 20px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box.activate { -webkit-animation: bounceUp 1000ms; -moz-animation: bounceUp 1000ms; -ms-animation: bounceUp 1000ms; -o-animation: bounceUp 1000ms; animation: bounceUp 1000ms; top: -10px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box.deactivate { -webkit-animation: bounceDown 1000ms; -moz-animation: bounceDown 1000ms; -ms-animation: bounceDown 1000ms; -o-animation: bounceDown 1000ms; animation: bounceDown 1000ms; top: 0px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box.clickable { cursor: pointer; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box.correct { border-color: #00c372; background: #ccffd9; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num { color: #323232; height: 60px; width: 85px; font-size: 30px; border: 2px solid transparent; border-radius: 10px; padding-top: 8px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num.off { border-color: #cbcbcb; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num.available { border-color: #00d6ff; cursor: pointer; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num.grayed { border-color: #e4e4e4; background: #e4e4e4; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num.try-again { border-color: #ff4d76; background: #ffe3ee; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num.correct { border-color: #00c372; background: #ccffd9; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num.correct-done { border-color: transparent; background: transparent; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-num.incorrect { border-color: #ff4d76; background: #ff4d76; color: white; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-pv, #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-plus { margin-top: 10px; margin-left: 10px; margin-right: 10px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-pv { text-align: left; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-pv[data-pv=hundred] { width: 140px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-pv[data-pv=ten], #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .f2f-text-input .f2f-text-input-box .f2f-text-input-pv[data-pv=one] { width: 70px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .ns-video .ns-video-button .ns-video-button-image { background-image: url("https://webassets.zearn.org/app_assets/number_sense/teacher_images/f2f.jpg"); } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .ns-video .ns-video-button.upper { bottom: 480px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .ns-video .ns-video-button:not(.expanded) .ns-video-button-image { background-position: -59px -2px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .ns-video .ns-video-button.expanded { bottom: 53px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .ns-video .ns-video-button.expanded .ns-video-button-image { bottom: 61px; background-position: -148px 0px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .ns-video .ns-video-button.expanded.rectify .ns-video-button-image { background-position: -40px 0px; } #number-sense-activity .tasks-page .form-to-form.number-sense-task-group .ns-video .ns-video-player { bottom: 53px; } @charset "UTF-8"; #number-sense-activity .tasks-page .make-and-break.number-sense-task-group { height: 490px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-hole-board { z-index: 12; height: 490px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-hole-board .ns-hole-bg { fill: #7b00ff; height: 490px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome { z-index: 13; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome.animating { z-index: 11; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-logo { width: 315px; margin-top: 100px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-slot { width: 72px; height: 72px; position: absolute; left: 360px; top: 280px; background-color: #ffea00; border: 4px solid black; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-slot .mab-welcome-slot-inner { border: 2px solid #7e7e7e; width: 60px; height: 60px; border-radius: 30px; margin: 2px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-discs { top: 260px; right: 360px; width: 68px; position: absolute; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-discs .ns-welcome-button { position: absolute; width: 62px; height: 62px; top: 3px; left: 3px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-discs .ns-welcome-button.moved { transition: top 1000ms, left 1000ms; top: 25px; left: -167px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-discs .mab-welcome-disc { width: 68px; height: 68px; background-color: #323232; border-radius: 44px; border: 4px solid #cbcbcb; position: absolute; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-discs .mab-welcome-disc:first-child { top: 32px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-welcome .mab-welcome-discs .mab-welcome-disc:nth-child(2) { top: 16px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-main-tasks { white-space: nowrap; position: relative; left: -10px; height: 380px; transition: left 1250ms; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-main-tasks .task-container.grid-12 { display: inline-block; vertical-align: top; width: 960px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-main-tasks .task-container.grid-12 .task { text-align: left; height: 360px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames { display: inline-block; position: relative; margin: 0; text-align: center; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame { border: 4px solid #323232; border-radius: 0; margin: 0 64px 0 60px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame .ten-frame-cell { border-color: #323232; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame:nth-child(2) { margin: 0 64px 0 0; border: 0; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame:nth-child(2) .ten-frame-cell { border: 1px solid #cb9e13; margin: 1px; width: 69px; height: 69px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame .ten-frame-cell, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame-overflow .ten-frame-cell { width: 70px; height: 70px; background-color: #ffea00; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame .ten-frame-cell .ten-frame-slot, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame-overflow .ten-frame-cell .ten-frame-slot { height: 60px; width: 60px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame .ten-frame-cell .ten-frame-slot.ui-droppable:empty, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame-overflow .ten-frame-cell .ten-frame-slot.ui-droppable:empty { border: 2px solid #7e7e7e; border-radius: 30px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame-disc { background: #323232; border-radius: 60px; width: 60px; height: 60px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame-disc.colored.tf-disc-a { background: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ten-frames-widget.number-sense-ten-frames .ten-frame-disc.colored.tf-disc-b { background: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank { display: inline-block; position: relative; opacity: 0; transition: opacity 500ms linear; min-width: 680px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank:nth-child(3) { min-width: 450px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-fake-discs { display: inline-block; vertical-align: middle; width: 68px; height: 100px; position: relative; transition: opacity 500ms linear; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-fake-discs .ns-tf-fake-disc { background: #323232; border-radius: 60px; width: 68px; height: 68px; border: 4px solid #cbcbcb; position: absolute; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-fake-discs .ns-tf-fake-disc:first-child { top: 32px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-fake-discs .ns-tf-fake-disc:nth-child(2) { top: 16px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-fake-discs .ns-tf-drag-disc { position: absolute; background: #323232; border-radius: 60px; width: 60px; height: 60px; top: 4px; left: 4px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-fake-discs .ns-tf-drag-disc:not(.ui-draggable-disabled) { cursor: pointer; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-fake-discs .ns-tf-drag-disc.moving { transition: 400ms; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-bank-text { vertical-align: middle; font-size: 40px; display: inline-block; margin: 0 20px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-bank-text .ns-tf-bank-make-text, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-bank-text .ns-tf-bank-sum-text, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-tf-bank-text .ns-tf-bank-exclamation-text { display: inline; transition: opacity 500ms linear; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-bank .ns-next-button { visibility: hidden; vertical-align: middle; transition: opacity 500ms linear; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-counter { display: none; opacity: 1; transition: opacity 500ms, top 250ms; position: absolute; font-size: 40px; width: 60px; height: 60px; margin-top: -24px; background-image: url("https://webassets.zearn.org/app_assets/number_sense/make_and_break/counter.svg"); background-repeat: no-repeat; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-counter.purple { color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-counter.orange { color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-counter .ns-tf-counter-text { margin: 0 10px 0 0px; line-height: 60px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-counter.flipped { -webkit-transform: scale(-1); -moz-transform: scale(-1); -ms-transform: scale(-1); -o-transform: scale(-1); transform: scale(-1); } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .ns-tf-counter.flipped .ns-tf-counter-text { -webkit-transform: scale(-1); -moz-transform: scale(-1); -ms-transform: scale(-1); -o-transform: scale(-1); transform: scale(-1); } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget { display: inline-block; font-size: 0px; vertical-align: middle; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper { display: table; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence-spacer { height: 20px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-equation, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence { display: table-row; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper span { display: table-cell; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence { margin-top: 10px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence span { opacity: 0; transition: opacity 500ms; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence span:not(.correct):not(.incorrect):not(.try-again).mabs-a { color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence span:not(.correct):not(.incorrect):not(.try-again).mabs-a.zearn-input { border-color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence span:not(.correct):not(.incorrect):not(.try-again).mabs-b { color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence span:not(.correct):not(.incorrect):not(.try-again).mabs-b.zearn-input { border-color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence span.correct.correct-done.mabs-a { color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence span.correct.correct-done.mabs-b { color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence-wrapper .make-and-break-sentence.inactive span:not(.correct):not(.incorrect):not(.try-again).zearn-input { border-color: transparent; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence span { vertical-align: baseline; min-width: 85px; font-size: 40px; margin: 0 5px; height: 58px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span:not(.zearn-input), #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence span:not(.zearn-input) { border: 4px solid transparent; padding: 0 10px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span:not(.zearn-input):empty::after, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span.zearn-input.inactive:empty::after, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence span:not(.zearn-input):empty::after, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-sentence span.zearn-input.inactive:empty::after { content: " "; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation { opacity: 0; transition: opacity 500ms; margin-top: 10px; min-height: 58px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span:not(.correct):not(.incorrect):not(.try-again).mab-eq-a { color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span:not(.correct):not(.incorrect):not(.try-again).mab-eq-a.zearn-input { border-color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span:not(.correct):not(.incorrect):not(.try-again).mab-eq-b { color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span:not(.correct):not(.incorrect):not(.try-again).mab-eq-b.zearn-input { border-color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span.correct.correct-done.mab-eq-a { color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-equation-widget .make-and-break-equation span.correct.correct-done.mab-eq-b { color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side { display: inline-block; vertical-align: middle; text-align: center; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb { margin: 0 auto; opacity: 0; transition: opacity 500ms; height: 280px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-a, #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-b { top: 180px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-a { left: 10px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-a.highlight:not(.correct):not(.incorrect):not(.try-again) { border-color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-a .ns-nb-a-text.highlight:not(.correct):not(.incorrect):not(.try-again) { color: #7b00ff; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-b { left: 190px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-b.highlight:not(.correct):not(.incorrect):not(.try-again) { border-color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .mab-right-side .ns-nb .ns-nb-b .ns-nb-b-text.highlight:not(.correct):not(.incorrect):not(.try-again) { color: #ff5400; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-progress-bar { overflow: hidden; background: #323232; position: relative; width: 90%; height: 40px; margin: 5px auto; border-radius: 20px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-progress-bar .mab-pb-filled { background: #50cb13; height: 40px; width: 0; transition: width 1000ms; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .make-and-break-progress-bar .mab-pb-face { background: #0294f8; width: 48px; height: 48px; border: 4px solid white; position: absolute; top: -4px; left: 20px; margin-left: -24px; border-radius: 24px; transition: left 1000ms; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .fluency-complete-buttons { display: inline-block; vertical-align: middle; width: 360px; height: 360px; background: #ff005b; border-radius: 200px; margin-top: 10px; padding-top: 100px; margin: 10px 300px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .fluency-complete-buttons .acb-zearned-it { color: white; margin-bottom: 20px; } #number-sense-activity .tasks-page .make-and-break.number-sense-task-group .fluency-complete-buttons .done-area { display: block; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 { width: 960px; height: 531px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-video .ns-video-button .ns-video-button-image { background-image: url("https://webassets.zearn.org/app_assets/number_sense/teacher_images/subtraction.jpg"); } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-video .ns-video-button:not(.expanded) .ns-video-button-image { background-position: -69px -2px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-video .ns-video-button.expanded { bottom: 43px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-video .ns-video-button.expanded .ns-video-button-image { bottom: 51px; background-position: -178px 0px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-video .ns-video-button.expanded.rectify .ns-video-button-image { background-position: -70px 0px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-video .ns-video-player { bottom: 43px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-prompt-bar { position: absolute; left: 0; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-hole-board { z-index: 12; height: 531px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-hole-board .ns-hole-bg { height: 531px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-hole-board .ns-hole-mask-rect { height: 531px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-welcome .tft-welcome { width: 900px; height: 460px; margin-top: 35px; margin-left: 30px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-welcome .tft-welcome img.show { display: inline-block; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-welcome .tft-welcome img:not(.show) { display: none; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-welcome .tft-welcome .ns-welcome-button { width: 135px; height: 135px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-welcome .ns-green-circle:not(.big) { width: 135px; height: 135px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main { background-color: #f5f1de; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ready-message { width: 30%; height: 20%; position: absolute; left: 35%; top: 30%; font-size: 48px; color: #ff5400; font-weight: 500; transition: 100ms opacity linear; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks { -webkit-perspective: 6960px; -moz-perspective: 6960px; -ms-perspective: 6960px; -o-perspective: 6960px; perspective: 6960px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .task-container { margin-bottom: 20px; margin-left: 10px; margin-right: 10px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-equation-task, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-2-equation-task { background-color: white; border-color: #7e7e7e; border-style: solid; border-width: 2px 2px 2px 2px; height: 523px; margin-left: 0px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: left; -moz-transform-origin: left; -ms-transform-origin: left; -o-transform-origin: left; transform-origin: left; -webkit-transition: -webkit-transform 1000ms ease-in-out; -moz-transition: -moz-transform 1000ms ease-in-out; -o-transition: -o-transform 1000ms ease-in-out; transition: transform 1000ms ease-in-out; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-equation-task.flipped, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-2-equation-task.flipped { z-index: 5; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-equation-task .task, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-2-equation-task .task { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; position: relative; top: 51px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-equation-task .task .nb-eq-widget, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-equation-task .task .ten-frames-widget, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-2-equation-task .task .nb-eq-widget, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .ns-main-tasks .ns-take-from-ten-2-equation-task .task .ten-frames-widget { position: absolute; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10 .ns-main .fluency-complete-buttons { position: absolute; width: 500px; left: calc(50% - 250px); } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10:not(.take-two) { background: #136fcb; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10:not(.take-two) .ns-welcome-button, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10:not(.take-two) .ns-green-circle:not(.big) { top: 343px; left: 412px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two { background: #7b00ff; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .logo, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .pattern { position: absolute; left: 0px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .logo { top: 20px; bottom: 0px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .pattern { top: 0px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .ns-welcome-button, #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .ns-green-circle:not(.big) { top: 270px; left: 416px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .nb-eq-widget { top: 129px; } #number-sense-activity .tasks-page .number-sense-task-group.take-from-10.take-two .nb-eq-widget.top { top: 10px; -webkit-transition: top 800ms ease-in-out; -moz-transition: top 800ms ease-in-out; -ms-transition: top 800ms ease-in-out; -o-transition: top 800ms ease-in-out; transition: top 800ms ease-in-out; } .tft-nb-eq-wrapper { font-size: 40px; font-weight: 700; } .tft-nb-eq-wrapper .tft-nb-eq { position: relative; left: 248px; } .tft-nb-eq-wrapper .tft-nb-part-wrapper { display: inline-block; padding: 10px 0 26px 0; position: absolute; left: 264px; } .tft-nb-eq-wrapper .tft-nb-part-wrapper .nb-lines, .tft-nb-eq-wrapper .tft-nb-part-wrapper .nb-eq-parts { position: relative; } .tft-nb-eq-wrapper .tft-nb-part-wrapper .nb-lines { background-repeat: no-repeat; opacity: 0; } .tft-nb-eq-wrapper .tft-nb-part-wrapper .nb-lines.show { opacity: 1; } .tft-nb-eq-wrapper .tft-nb-part-wrapper .nb-lines.animate-show { opacity: 1; -webkit-transition: opacity 500ms linear 100ms; -moz-transition: opacity 500ms linear 100ms; -ms-transition: opacity 500ms linear 100ms; -o-transition: opacity 500ms linear 100ms; transition: opacity 500ms linear 100ms; } .tft-nb-eq-wrapper .tft-nb-part-wrapper .nb-lines-wrapper { padding: 5px; height: 62px; } .tft-nb-eq-wrapper .tft-nb-part-wrapper .nb-lines-wrapper .nb-lines { top: 30px; height: 39px; width: 56px; margin: 0 auto; background-image: url("https://webassets.zearn.org/app_assets/number_sense/addition_magician/nb-eq-part-lines.svg"); } .tft-nb-eq-wrapper span { float: left; width: 100px; opacity: 0; } .tft-nb-eq-wrapper span.show { opacity: 1; } .tft-nb-eq-wrapper span.animate-show { opacity: 1; -webkit-transition: opacity 500ms linear 100ms; -moz-transition: opacity 500ms linear 100ms; -ms-transition: opacity 500ms linear 100ms; -o-transition: opacity 500ms linear 100ms; transition: opacity 500ms linear 100ms; } .tft-nb-eq-wrapper span.nb-eq-op { width: 125px; } .tft-nb-eq-wrapper span.nb-eq-diff { position: absolute; height: 58px; top: 0px; } .tft-nb-eq-wrapper span.grayed { border-color: #e4e4e4; background-color: #e4e4e4; } .tft-nb-eq-wrapper span.nb-eq-a1, .tft-nb-eq-wrapper span.nb-eq-a2 { margin: 0 5px; position: absolute; top: 10px; } .tft-nb-eq-wrapper span.nb-eq-a1.nb-eq-a1, .tft-nb-eq-wrapper span.nb-eq-a2.nb-eq-a1 { left: -60px; } .tft-nb-eq-wrapper span.nb-eq-a1.nb-eq-a1.big-numbers, .tft-nb-eq-wrapper span.nb-eq-a2.nb-eq-a1.big-numbers { left: -70px; } .tft-nb-eq-wrapper span.nb-eq-a1.nb-eq-a2, .tft-nb-eq-wrapper span.nb-eq-a2.nb-eq-a2 { left: 20px; } .tft-nb-eq-wrapper span.nb-eq-a1.nb-eq-a2.big-numbers, .tft-nb-eq-wrapper span.nb-eq-a2.nb-eq-a2.big-numbers { left: 30px; } .ns-take-from-ten-ten-frames { position: relative; top: 75px; left: 96px; } .ns-take-from-ten-ten-frames .ten-frame-op { margin: 0 10px; } .ns-take-from-ten-ten-frames .ten-frame { border: 2px solid #323232; border-radius: 0px; opacity: 0; left: -165px; } .ns-take-from-ten-ten-frames .ten-frame.show { opacity: 1; } .ns-take-from-ten-ten-frames .ten-frame.animate-show { opacity: 1; -webkit-transition: opacity 500ms linear 100ms; -moz-transition: opacity 500ms linear 100ms; -ms-transition: opacity 500ms linear 100ms; -o-transition: opacity 500ms linear 100ms; transition: opacity 500ms linear 100ms; } .ns-take-from-ten-ten-frames .ten-frame.ten-frame-a .ten-frame-cell { border-color: #323232; } .ns-take-from-ten-ten-frames .ten-frame.ten-frame-b { border-color: white; } .ns-take-from-ten-ten-frames .ten-frame.ten-frame-b.incorrect .ten-frame-cell { -webkit-transition: border-color 300ms linear, background-color 300ms linear; -moz-transition: border-color 300ms linear, background-color 300ms linear; -ms-transition: border-color 300ms linear, background-color 300ms linear; -o-transition: border-color 300ms linear, background-color 300ms linear; transition: border-color 300ms linear, background-color 300ms linear; border-color: #ffdbca; background-color: #ffdbca; } .ns-take-from-ten-ten-frames .ten-frame.ten-frame-b.faded { -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; transition: opacity 300ms linear; opacity: 0.25; } .ns-take-from-ten-ten-frames .ten-frame.ten-frame-b .ten-frame-cell { border-color: white; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell { background-color: white; border-width: 0 2px 2px 0; padding: 1px 0; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell:last-child { height: 48px; border-bottom: 0; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col:last-child .ten-frame-cell { border-right: 0; border-left: 0; width: 48px; } .ns-take-from-ten-ten-frames .tft-multchoice { opacity: 0; border: 8px solid #0097b6; border-radius: 10px; width: 114px; height: 264px; position: absolute; top: -6px; z-index: 0; -webkit-transition: width 200ms ease-in-out, left 200ms ease-in-out, height 200ms ease-in-out, top 200ms ease-in-out; -moz-transition: width 200ms ease-in-out, left 200ms ease-in-out, height 200ms ease-in-out, top 200ms ease-in-out; -ms-transition: width 200ms ease-in-out, left 200ms ease-in-out, height 200ms ease-in-out, top 200ms ease-in-out; -o-transition: width 200ms ease-in-out, left 200ms ease-in-out, height 200ms ease-in-out, top 200ms ease-in-out; transition: width 200ms ease-in-out, left 200ms ease-in-out, height 200ms ease-in-out, top 200ms ease-in-out; } .ns-take-from-ten-ten-frames .tft-multchoice:hover { border-color: #048ec3; } .ns-take-from-ten-ten-frames .tft-multchoice.show { z-index: 3; opacity: 1; cursor: pointer; -webkit-animation: pulse 250ms ease-in-out; -moz-animation: pulse 250ms ease-in-out; -ms-animation: pulse 250ms ease-in-out; -o-animation: pulse 250ms ease-in-out; animation: pulse 250ms ease-in-out; } .ns-take-from-ten-ten-frames .tft-multchoice.show.tft-multchoice-b { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; -ms-animation-delay: 100ms; -o-animation-delay: 100ms; animation-delay: 100ms; } .ns-take-from-ten-ten-frames .tft-multchoice.pulse:not(.incorrect) { width: 124px; height: 284px; top: -16px; } .ns-take-from-ten-ten-frames .tft-multchoice.tft-multchoice-a { left: 79px; } .ns-take-from-ten-ten-frames .tft-multchoice.tft-multchoice-a.pulse { left: 74px; } .ns-take-from-ten-ten-frames .tft-multchoice.tft-multchoice-b { left: 210px; } .ns-take-from-ten-ten-frames .tft-multchoice.tft-multchoice-b.incorrect { -webkit-transition: border-color 300ms linear; -moz-transition: border-color 300ms linear; -ms-transition: border-color 300ms linear; -o-transition: border-color 300ms linear; transition: border-color 300ms linear; border-color: #ff005b; } .ns-take-from-ten-ten-frames .tft-multchoice.tft-multchoice-b.incorrect:hover { cursor: default; } .ns-take-from-ten-ten-frames .tft-multchoice.tft-multchoice-b.faded { -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; transition: opacity 300ms linear; opacity: 0.25; } .ns-take-from-ten-ten-frames .tft-multchoice.tft-multchoice-b.pulse:not(.incorrect) { left: 205px; } .ns-take-from-ten-ten-frames .tft-graveyard { position: relative; top: 60px; left: 22px; margin-left: 50px; margin-right: 90px; margin-bottom: 54px; width: 594px; height: 0px; border: 4px solid #5c6b72; border-radius: 4px; background-color: #e5e5e5; background-image: url("https://webassets.zearn.org/app_assets/tasks/trash/trashcan.svg"); background-repeat: no-repeat; background-position: center; background-size: 45px 57px; opacity: 0; } .ns-take-from-ten-ten-frames .tft-graveyard.show { opacity: 1; height: 78px; top: 21px; -webkit-transition: height 300ms ease-out, top 300ms ease-out; -moz-transition: height 300ms ease-out, top 300ms ease-out; -ms-transition: height 300ms ease-out, top 300ms ease-out; -o-transition: height 300ms ease-out, top 300ms ease-out; transition: height 300ms ease-out, top 300ms ease-out; } .ns-take-from-ten-ten-frames .tft-graveyard.show.correct, .ns-take-from-ten-ten-frames .tft-graveyard.show.try-again, .ns-take-from-ten-ten-frames .tft-graveyard.show.incorrect { transition: all 250ms ease-in-out; } .ns-take-from-ten-ten-frames .tft-graveyard.show.correct { border-color: #00c372; background-color: #ccffd9; } .ns-take-from-ten-ten-frames .tft-graveyard.show.try-again { border-color: #ff4d76; background-color: #ffe3ee; } .ns-take-from-ten-ten-frames .tft-graveyard.show.incorrect { border-color: #ff005b; background-color: #ff005b; } .ns-take-from-ten-ten-frames .tft-graveyard.show.clickable { cursor: pointer; } .ns-take-from-ten-ten-frames .tft-graveyard.show.faded { -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; transition: opacity 300ms linear; opacity: 0.25; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot { position: absolute; width: 50px; height: 50px; top: 10px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="0"] { left: 6px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="1"] { left: 56px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="2"] { left: 106px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="3"] { left: 156px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="4"] { left: 206px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="5"] { left: 330px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="6"] { left: 380px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="7"] { left: 430px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="8"] { left: 480px; } .ns-take-from-ten-ten-frames .tft-graveyard.show .disc-slot[data-slot="9"] { left: 530px; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc { background-color: #323232; background-image: none; border-radius: 20px; z-index: 2; opacity: 1; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.ui-draggable-dragging, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.ui-draggable-dragging { z-index: 5; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.expand, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.expand { background-color: #0097b6; width: 48px; height: 48px; top: -8px; left: -8px; border-radius: 24px; -webkit-transition: background-color 100ms linear, width 100ms linear, height 100ms linear, border-radius 100ms linear, top 100ms linear, left 100ms linear; -moz-transition: background-color 100ms linear, width 100ms linear, height 100ms linear, border-radius 100ms linear, top 100ms linear, left 100ms linear; -ms-transition: background-color 100ms linear, width 100ms linear, height 100ms linear, border-radius 100ms linear, top 100ms linear, left 100ms linear; -o-transition: background-color 100ms linear, width 100ms linear, height 100ms linear, border-radius 100ms linear, top 100ms linear, left 100ms linear; transition: background-color 100ms linear, width 100ms linear, height 100ms linear, border-radius 100ms linear, top 100ms linear, left 100ms linear; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc:not(.expand), .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc:not(.expand) { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.image, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.image { width: 40px; height: 40px; background-color: #0097b6; background-image: url("https://webassets.zearn.org/app_assets/number_sense/ns_take_from_ten/blue-disc.svg"); } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.image.disc-active:not(.ui-draggable-disabled), .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.image.disc-active:not(.ui-draggable-disabled) { cursor: pointer; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.moving, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.moving { z-index: 3; -webkit-transition: top 500ms ease-in-out, left 500ms ease-in-out; -moz-transition: top 500ms ease-in-out, left 500ms ease-in-out; -ms-transition: top 500ms ease-in-out, left 500ms ease-in-out; -o-transition: top 500ms ease-in-out, left 500ms ease-in-out; transition: top 500ms ease-in-out, left 500ms ease-in-out; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.ghost, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.ghost { -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; transition: opacity 300ms linear; border: 3px dotted #5c6b72; background-color: white; opacity: 0.5; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.faded, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.faded { -webkit-transition: opacity 300ms linear; -moz-transition: opacity 300ms linear; -ms-transition: opacity 300ms linear; -o-transition: opacity 300ms linear; transition: opacity 300ms linear; opacity: 0.25; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-col .ten-frame-cell .ten-frame-disc.hidden, .ns-take-from-ten-ten-frames .tft-graveyard .disc-slot .ten-frame-disc.hidden { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; opacity: 0; cursor: default; } .ns-take-from-ten-ten-frames .ten-frame .ten-frame-disc.image { left: -4px; top: -4px; } .ns-take-from-ten-ten-frames .tft-graveyard .ten-frame-disc { left: 5px; top: 5px; } .ns-take-from-ten-ten-frames .tft-graveyard.clickable .disc-slot .ten-frame-disc.hidden { cursor: pointer; } @-webkit-keyframes arrive { 10% { width: 102.2%; height: 102.2%; top: -4px; left: -4px; } 60% { width: 80%; height: 80%; top: 30px; left: 30px; } } @-moz-keyframes arrive { 10% { width: 102.2%; height: 102.2%; top: -4px; left: -4px; } 60% { width: 80%; height: 80%; top: 30px; left: 30px; } } @-o-keyframes arrive { 10% { width: 102.2%; height: 102.2%; top: -4px; left: -4px; } 60% { width: 80%; height: 80%; top: 30px; left: 30px; } } @keyframes arrive { 10% { width: 102.2%; height: 102.2%; top: -4px; left: -4px; } 60% { width: 80%; height: 80%; top: 30px; left: 30px; } } @-webkit-keyframes star-grow { 0% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } 25% { opacity: 1; } 50% { font-size: 400px; line-height: 400px; width: 400px; height: 400px; top: -25px; left: -20px; } 100% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } } @-moz-keyframes star-grow { 0% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } 25% { opacity: 1; } 50% { font-size: 400px; line-height: 400px; width: 400px; height: 400px; top: -25px; left: -20px; } 100% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } } @-o-keyframes star-grow { 0% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } 25% { opacity: 1; } 50% { font-size: 400px; line-height: 400px; width: 400px; height: 400px; top: -25px; left: -20px; } 100% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } } @keyframes star-grow { 0% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } 25% { opacity: 1; } 50% { font-size: 400px; line-height: 400px; width: 400px; height: 400px; top: -25px; left: -20px; } 100% { opacity: 0; font-size: 200px; line-height: 200px; width: 200px; height: 200px; top: 70px; left: 80px; } } .number-bond-dash.number-sense-task-group .ns-welcome { background: #ffea00; } .number-bond-dash.number-sense-task-group .ns-welcome .ns-welcome-button { left: 410px; top: 180px; z-index: 1; } .number-bond-dash.number-sense-task-group .ns-welcome .nbd-welcome-text { position: absolute; background: url("https://webassets.zearn.org/app_assets/number_sense/number_bond_dash/number_bond_dash.svg"); width: 100%; height: 100%; } .number-bond-dash.number-sense-task-group .ns-welcome .nbd-flying { position: absolute; width: 128px; height: 40px; top: 230px; left: -128px; z-index: 0; } .number-bond-dash.number-sense-task-group .ns-welcome .nbd-flying.fly { transition: left 700ms linear; left: 100%; } .number-bond-dash.number-sense-task-group .ns-welcome .nbd-flying .nbd-flying-dot { background: #ff4419; width: 40px; height: 40px; border-radius: 20px; position: absolute; right: 0; top: 0; } .number-bond-dash.number-sense-task-group .ns-welcome .nbd-flying .nbd-flying-line-1, .number-bond-dash.number-sense-task-group .ns-welcome .nbd-flying .nbd-flying-line-2 { position: absolute; background: #ff4419; width: 60px; height: 4px; border-radius: 8px; } .number-bond-dash.number-sense-task-group .ns-welcome .nbd-flying .nbd-flying-line-1 { top: 10px; right: 46px; } .number-bond-dash.number-sense-task-group .ns-welcome .nbd-flying .nbd-flying-line-2 { top: 26px; right: 64px; } .number-bond-dash.number-sense-task-group .ns-welcome .ns-green-circle { z-index: 2; top: 180px; left: 410px; } .number-bond-dash.number-sense-task-group .ns-main { background: #511fcf; transition: background 700ms; } .number-bond-dash.number-sense-task-group .ns-main.unfocus { background: #a581ff; } .number-bond-dash.number-sense-task-group .ns-main .nbd-countdown-box { position: absolute; top: 10px; left: 30px; width: 900px; height: 40px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-countdown-box .countdown-bar { border-radius: 20px; background: #55ff4d; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls { position: absolute; top: 70px; height: 360px; white-space: nowrap; transition: 700ms; left: 300px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls.ending { transition-timing-function: linear; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls { display: inline-block; vertical-align: middle; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container { margin: 0; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .task { margin: 0; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left { display: inline-block; position: absolute; right: 450px; padding: 0 10px; top: 25px; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left.wide { right: 360px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget { display: inline-block; margin: 0; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame { padding: 5px; background: #3f3f3f; border-radius: 0; border: none; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame:first-child { margin-left: 15px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame:last-child { margin-right: 15px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-col:first-child { margin-right: 5px; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell { border: none; background: #fffee8; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell:not(:last-child) { margin-bottom: 5px; -webkit-transition: all 400ms; -moz-transition: all 400ms; -ms-transition: all 400ms; -o-transition: all 400ms; transition: all 400ms; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot { border: 0; top: 5px; left: 5px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc { border-radius: 28px; top: 0; left: 0; transition: 100ms ease-in; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-a { background: #3f3f3f; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-a.highlight { background: #7a00c9; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-a.scale { -webkit-animation: pulse 800ms ease-in 1; -moz-animation: pulse 800ms ease-in 1; -ms-animation: pulse 800ms ease-in 1; -o-animation: pulse 800ms ease-in 1; animation: pulse 800ms ease-in 1; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-b { background: #3f3f3f; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-b.highlight { background: #ff4419; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame .ten-frame-cell .ten-frame-slot .ten-frame-disc.tf-disc-b.scale { -webkit-animation: pulse 800ms ease-in 1; -moz-animation: pulse 800ms ease-in 1; -ms-animation: pulse 800ms ease-in 1; -o-animation: pulse 800ms ease-in 1; animation: pulse 800ms ease-in 1; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame.five-frame { position: absolute; right: 10px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left .ten-frames-widget .ten-frame.five-frame .ten-frame-col:first-child .ten-frame-cell { border-right-width: 20px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left.small { padding-right: 50px; top: 160px; transition: 800ms ease-in-out; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left.small .ten-frame { padding: 0px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left.small .ten-frame .ten-frame-col:first-child { margin-right: 0px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left.small .ten-frame .ten-frame-cell { height: 0px; width: 0px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .dash-nb-left.small .ten-frame .ten-frame-cell:not(:last-child) { margin-bottom: 0px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .feedback-message { text-align: center; margin: 0; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .feedback-message .feedback-message-text { line-height: 20px; font-size: 30px; font-weight: 600; color: #ff4419; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb { margin: 0 auto; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b-line, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a-line { stroke: #323232; stroke-width: 8px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b-line.unfocus, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a-line.unfocus { stroke: #cbcbcb; transition: stroke 400ms linear; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(:empty) { padding: 0 0 0 12px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum { border: 8px solid #323232; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.correct, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.correct, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum.correct { background: #19ff00; transition: 150ms linear; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.incorrect, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.incorrect, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum.incorrect { background: #ffdbca; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.incorrect .ns-nb-a-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.incorrect .ns-nb-b-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.incorrect .ns-nb-sum-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.incorrect .ns-nb-a-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.incorrect .ns-nb-b-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.incorrect .ns-nb-sum-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum.incorrect .ns-nb-a-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum.incorrect .ns-nb-b-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum.incorrect .ns-nb-sum-text { color: #323232; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.unknown, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.unknown, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum.unknown { background: #0294f8; border-color: #0294f8; transition: 150ms linear; -webkit-animation: pulseunr8z0w 1.2s ease-in-out 0ms infinite; -moz-animation: pulseunr8z0w 1.2s ease-in-out 0ms infinite; -ms-animation: pulseunr8z0w 1.2s ease-in-out 0ms infinite; -o-animation: pulseunr8z0w 1.2s ease-in-out 0ms infinite; animation: pulseunr8z0w 1.2s ease-in-out 0ms infinite; } @keyframes pulseunr8z0w { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.unfocus, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.unfocus, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum.unfocus { border-color: #cbcbcb; transition: border-color 400ms linear; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a.highlight { border-color: #7a00c9; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a-text.highlight { color: #7a00c9; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b.highlight { border-color: #ff4419; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b-text.highlight { color: #ff4419; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum-text { font-size: 46px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-a-text.unfocus, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-b-text.unfocus, .number-bond-dash.number-sense-task-group .ns-main .nbd-balls .nbd-task-balls .dash-nb.task-container .ns-nb .ns-nb-sum-text.unfocus { color: #cbcbcb; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball { position: relative; width: 100px; height: 100px; display: inline-block; vertical-align: middle; margin: 130px 5px; transition: 700ms; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .nbd-ball-bg { position: absolute; background: #a581ff; border-radius: 180px; width: 100%; height: 100%; top: 0; left: 0; transition: 700ms; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .nbd-ball-star { display: none; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .nbd-proficiency-message { position: absolute; left: 20px; color: white; width: calc(100% - 40px); white-space: normal; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .nbd-ball-redo { display: none; position: relative; width: 100%; height: 80%; background: url("https://webassets.zearn.org/app_assets/number_sense/number_bond_dash/redo_icon.svg") no-repeat; background-position: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.previous { cursor: pointer; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.previous .nbd-ball-redo { display: block; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.active, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball { width: 360px; height: 360px; margin: 0 5px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.hidden { width: 0; height: 0; margin: 0; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-stars-ball.active.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-stars-ball.nbd-game-over-ball.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-time-ball.active.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-time-ball.nbd-game-over-ball.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball.active.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball.nbd-game-over-ball.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball.active.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball.nbd-game-over-ball.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball.active.arrive .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball.nbd-game-over-ball.arrive .nbd-ball-text { font-size: 60px; -webkit-backface-visibility: hidden; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-stars-ball.active.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-stars-ball.nbd-game-over-ball.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-time-ball.active.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-time-ball.nbd-game-over-ball.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball.active.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball.nbd-game-over-ball.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball.active.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball.nbd-game-over-ball.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball.active.arrive .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball.nbd-game-over-ball.arrive .nbd-ball-bg { -webkit-animation: arrive 700ms linear; -moz-animation: arrive 700ms linear; -ms-animation: arrive 700ms linear; -o-animation: arrive 700ms linear; animation: arrive 700ms linear; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-stars-ball .nbd-ball-bg { background: #0294f8; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-stars-ball .nbd-stars-ball-star { position: absolute; color: #ffea00; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-stars-ball.animate .nbd-stars-ball-star { -webkit-animation: star-grow 750ms ease-out 250ms; -moz-animation: star-grow 750ms ease-out 250ms; -ms-animation: star-grow 750ms ease-out 250ms; -o-animation: star-grow 750ms ease-out 250ms; animation: star-grow 750ms ease-out 250ms; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball .nbd-ball-bg, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball .nbd-ball-bg { background: #ff4419; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball.check .nbd-ball-bg { background: #0294f8; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball.check .nbd-ball-text { top: 120px; font-size: 58px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-done-ball.check.unfocus .nbd-ball-bg { background: #a581ff; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-time-ball .nbd-ball-bg { background: #ff4419; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball .nbd-ball-bg { background: #50cb13; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball.check .nbd-ball-bg { background: #0294f8; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball.check.active.arrive .nbd-ball-text { font-size: 0; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-go-ball.unfocus .nbd-ball-bg { background: #a581ff; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-task-ball .nbd-ball-bg { background: #a581ff; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-task-ball.active .nbd-ball-bg { background: #f6f6f6; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-task-ball.check .nbd-ball-bg { background: #19ff00; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-task-ball.check.correct .nbd-ball-star { color: #ffea00; font-size: 40px; display: block; position: absolute; width: 100%; height: 50px; line-height: 50px; top: calc(50% - 27px); } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-task-ball.check.correct.unfocus .nbd-ball-star { display: none; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-task-ball.unfocus:not(.active) .nbd-ball-bg { background: #a581ff; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-task-ball.unfocus.active .nbd-ball-bg { background: #e4e4e4; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball { display: none; position: absolute; left: 300px; top: 70px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-ball-text, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-ball-text { font-size: 60px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-game-over-ball .nbd-proficiency-message, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-proficiency-message, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-proficiency-message { display: none; font-size: 20px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-ball-bg { background: #0294f8; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-ball-text { top: 120px; display: none; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-left-star, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-right-star, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-num { position: absolute; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-left-star, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-right-star { color: #ffea00; font-size: 40px; width: 50px; height: 50px; top: calc(50% - 27px); } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-left-star { left: 80px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-left-star .nbd-count-star { position: absolute; top: 0; width: 50px; transition-property: initial; transition-timing-function: linear; transition-delay: initial; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-right-star { right: 80px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-final-count-ball .nbd-final-count-num { font-size: 60px; color: #ffea00; width: 80px; height: 80px; top: calc(50% - 40px); left: calc(50% - 40px); } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-ball-bg { background: #ffea00; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-ball-text { top: 175px; color: #323232; font-size: 50px; font-weight: 600; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-keep-going, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-start-over { position: relative; display: inline; top: 35px; width: 150px; height: 40px; border-width: 0px 0px 2px 0px; border-radius: 20px; font-size: 20px; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-keep-going:active, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-start-over:active { border-top-color: #ffea00; border-width: 2px 0 0 0; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-keep-going .yes-icon, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-keep-going .do-over-icon, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-start-over .yes-icon, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-start-over .do-over-icon { width: 14px; height: 16px; display: inline-block; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-keep-going { background: #50cb13; border-color: #156615; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-keep-going .yes-icon { margin-left: 4px; background: url("https://webassets.zearn.org/app_assets/number_sense/number_bond_dash/yes_icon.svg") no-repeat; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-start-over { background: #ff005b; border-color: #971937; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball.nbd-inactivity-ball .nbd-start-over .do-over-icon { margin-right: 4px; background: url("https://webassets.zearn.org/app_assets/number_sense/number_bond_dash/do_over_icon.svg") no-repeat; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .fluency-complete-buttons { display: none; position: absolute; top: 220px; left: 30px; width: 300px; text-align: center; white-space: normal; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .fluency-complete-buttons .zearn-button.done-btn:active, .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .fluency-complete-buttons .zearn-button.love-it-btn:active { border-color: #0294f8; } .number-bond-dash.number-sense-task-group .ns-main .nbd-ball .fluency-complete-buttons .zearn-button.done-btn { background: #ff4419; border-color: #971937; } body.number_gym_activities, body.number_sense_fluencies { background-color: #ebebeb; } #number-sense-activity { text-align: center; margin: 0px auto; width: 960px; border-radius: 6px; position: relative; -webkit-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); -moz-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); -ms-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); -o-box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); box-shadow: 1px 1px 2px 0 rgba(179, 179, 179, 0.5); } #number-sense-activity .tasks-page { width: 100%; padding-top: 0px; } #number-sense-activity .tasks-page .task-group-header { margin: 0; } #number-sense-activity .tasks-page .task-container.grid-12 { width: 100%; height: 100%; } #number-sense-activity .tasks-page.ended { margin-bottom: 0px; } #number-sense-activity .zearn-keypad { width: 960px; } .number-sense-task-group .ns-nb { position: relative; width: 300px; height: 300px; transition: opacity 500ms linear; } .number-sense-task-group .ns-nb .ns-nb-sum, .number-sense-task-group .ns-nb .ns-nb-a, .number-sense-task-group .ns-nb .ns-nb-b, .number-sense-task-group .ns-nb .ns-nb-a-line, .number-sense-task-group .ns-nb .ns-nb-b-line, .number-sense-task-group .ns-nb .ns-nb-enter { position: absolute; } .number-sense-task-group .ns-nb .ns-nb-sum, .number-sense-task-group .ns-nb .ns-nb-a, .number-sense-task-group .ns-nb .ns-nb-b { width: 100px; height: 100px; border: 4px solid black; border-radius: 60px; line-height: 72px; background: white; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .number-sense-task-group .ns-nb .ns-nb-sum.jiggle, .number-sense-task-group .ns-nb .ns-nb-a.jiggle, .number-sense-task-group .ns-nb .ns-nb-b.jiggle { -webkit-animation: jiggle 250ms ease-in-out infinite; -moz-animation: jiggle 250ms ease-in-out infinite; -ms-animation: jiggle 250ms ease-in-out infinite; -o-animation: jiggle 250ms ease-in-out infinite; animation: jiggle 250ms ease-in-out infinite; } .number-sense-task-group .ns-nb .ns-nb-sum.correct, .number-sense-task-group .ns-nb .ns-nb-a.correct, .number-sense-task-group .ns-nb .ns-nb-b.correct { background: #50cb13; border-color: #50cb13; } .number-sense-task-group .ns-nb .ns-nb-sum.correct .zearn-input.correct, .number-sense-task-group .ns-nb .ns-nb-a.correct .zearn-input.correct, .number-sense-task-group .ns-nb .ns-nb-b.correct .zearn-input.correct { background: transparent; } .number-sense-task-group .ns-nb .ns-nb-sum.incorrect, .number-sense-task-group .ns-nb .ns-nb-a.incorrect, .number-sense-task-group .ns-nb .ns-nb-b.incorrect { background: #ff005b; border-color: #ff005b; } .number-sense-task-group .ns-nb .ns-nb-sum.incorrect .zearn-input.incorrect, .number-sense-task-group .ns-nb .ns-nb-a.incorrect .zearn-input.incorrect, .number-sense-task-group .ns-nb .ns-nb-b.incorrect .zearn-input.incorrect { background: transparent; } .number-sense-task-group .ns-nb .ns-nb-sum.try-again, .number-sense-task-group .ns-nb .ns-nb-a.try-again, .number-sense-task-group .ns-nb .ns-nb-b.try-again { border-color: #ff4d76; background: #ffe3ee; } .number-sense-task-group .ns-nb .ns-nb-sum.try-again .zearn-input.try-again, .number-sense-task-group .ns-nb .ns-nb-a.try-again .zearn-input.try-again, .number-sense-task-group .ns-nb .ns-nb-b.try-again .zearn-input.try-again { background: transparent; } .number-sense-task-group .ns-nb .ns-nb-sum-text, .number-sense-task-group .ns-nb .ns-nb-a-text, .number-sense-task-group .ns-nb .ns-nb-b-text { font-size: 60px; text-align: center; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .number-sense-task-group .ns-nb .ns-nb-sum-text.blink, .number-sense-task-group .ns-nb .ns-nb-a-text.blink, .number-sense-task-group .ns-nb .ns-nb-b-text.blink { -webkit-animation: blink 1300ms linear infinite; -moz-animation: blink 1300ms linear infinite; -ms-animation: blink 1300ms linear infinite; -o-animation: blink 1300ms linear infinite; animation: blink 1300ms linear infinite; } .number-sense-task-group .ns-nb .ns-nb-sum-text.zearn-input, .number-sense-task-group .ns-nb .ns-nb-a-text.zearn-input, .number-sense-task-group .ns-nb .ns-nb-b-text.zearn-input { border-color: rgba(255, 255, 255, 0.01); } .number-sense-task-group .ns-nb .ns-nb-sum-text.zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(.try-again):not(:empty), .number-sense-task-group .ns-nb .ns-nb-a-text.zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(.try-again):not(:empty), .number-sense-task-group .ns-nb .ns-nb-b-text.zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(.try-again):not(:empty) { padding: 0 0 0 23px; } .number-sense-task-group .ns-nb .ns-nb-a, .number-sense-task-group .ns-nb .ns-nb-b { top: 200px; } .number-sense-task-group .ns-nb .ns-nb-b { left: 200px; } .number-sense-task-group .ns-nb .ns-nb-sum { left: 100px; } .number-sense-task-group .ns-nb .ns-nb-b-line, .number-sense-task-group .ns-nb .ns-nb-a-line { top: 0; left: 0; stroke: black; stroke-width: 4px; } .nb-eq-wrapper { font-size: 40px; font-weight: 700; } .nb-eq-wrapper .nb-eq { position: absolute; left: 338px; } .nb-eq-wrapper .nb-eq .nb-eq-bottom-op, .nb-eq-wrapper .nb-eq .nb-eq-top-op { width: 125px; } .nb-eq-wrapper .nb-part-wrapper { display: inline-block; padding: 15px 0 26px 205px; } .nb-eq-wrapper .nb-part-wrapper .nb-part-btn, .nb-eq-wrapper .nb-part-wrapper .nb-lines, .nb-eq-wrapper .nb-part-wrapper .nb-eq-parts { position: relative; } .nb-eq-wrapper .nb-part-wrapper .nb-part-btn, .nb-eq-wrapper .nb-part-wrapper .nb-lines { background-repeat: no-repeat; opacity: 0; -webkit-transition: all 0ms; -moz-transition: all 0ms; -ms-transition: all 0ms; -o-transition: all 0ms; transition: all 0ms; } .nb-eq-wrapper .nb-part-wrapper .nb-part-btn.show, .nb-eq-wrapper .nb-part-wrapper .nb-lines.show { opacity: 1; } .nb-eq-wrapper .nb-part-wrapper .nb-part-btn.show { -webkit-transition: all 200ms; -moz-transition: all 200ms; -ms-transition: all 200ms; -o-transition: all 200ms; transition: all 200ms; } .nb-eq-wrapper .nb-part-wrapper .nb-part-btn.show:hover:not(.disabled) { -webkit-transition: all 0ms; -moz-transition: all 0ms; -ms-transition: all 0ms; -o-transition: all 0ms; transition: all 0ms; cursor: pointer; background-color: #048ec3; } .nb-eq-wrapper .nb-part-wrapper .nb-part-btn.pulse { -webkit-animation: pulse 500ms; -moz-animation: pulse 500ms; -ms-animation: pulse 500ms; -o-animation: pulse 500ms; animation: pulse 500ms; } .nb-eq-wrapper .nb-part-wrapper .nb-lines.show { -webkit-transition: opacity 500ms linear 100ms; -moz-transition: opacity 500ms linear 100ms; -ms-transition: opacity 500ms linear 100ms; -o-transition: opacity 500ms linear 100ms; transition: opacity 500ms linear 100ms; } .nb-eq-wrapper .nb-part-wrapper .nb-lines-wrapper { padding: 5px; height: 62px; } .nb-eq-wrapper .nb-part-wrapper .nb-lines-wrapper .nb-part-btn { background-color: #0097b6; width: 40px; height: 40px; z-index: 1; margin: 0 auto; border-width: 0 0 3px 0px; border-style: solid; border-color: #047699; border-radius: 5px; background-size: cover; bottom: 7px; } .nb-eq-wrapper .nb-part-wrapper .nb-lines-wrapper .nb-part-btn .nb-part-btn-icon { width: 32px; height: 32px; position: absolute; top: 5px; left: 4px; background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/number_sense/addition_magician/split-number.svg"); } .nb-eq-wrapper .nb-part-wrapper .nb-lines-wrapper .nb-lines { top: 30px; height: 39px; width: 56px; margin: 0 auto; background-image: url("https://webassets.zearn.org/app_assets/number_sense/addition_magician/nb-eq-part-lines.svg"); } .nb-eq-wrapper span { opacity: 0; float: left; width: 80px; height: 60px; transition: opacity 400ms; } .nb-eq-wrapper span.show { opacity: 1; } .nb-eq-wrapper span.nb-eq-b1, .nb-eq-wrapper span.nb-eq-b2 { margin: 0 5px; } .nb-eq-wrapper .zearn-input-box { height: 58px; background: white; } .nb-eq-wrapper .zearn-input-box.correct:not(.correct-done) { background: #50cb13; } .nb-eq-wrapper .zearn-input-box.incorrect { background: #ff005b; } .nb-eq-wrapper .zearn-input-box.try-again { border-color: #ff4d76; background: #ffe3ee; } .nb-eq-wrapper .nb-eq-arrows, .nb-eq-wrapper .nb-eq-arrows-left, .nb-eq-wrapper .nb-eq-arrow-right { position: absolute; background-repeat: no-repeat; opacity: 0; transition: opacity 500ms; } .nb-eq-wrapper .nb-eq-arrows.show, .nb-eq-wrapper .nb-eq-arrows-left.show, .nb-eq-wrapper .nb-eq-arrow-right.show { opacity: 1; } .nb-eq-wrapper .nb-eq-arrows-left { height: 120px; width: 164px; left: 373px; top: 59px; } .nb-eq-wrapper .nb-eq-arrows-left .left-arrow-1, .nb-eq-wrapper .nb-eq-arrows-left .left-arrow-2 { fill: #a865ff; } .nb-eq-wrapper .nb-eq-arrow-right { height: 42px; width: 42px; left: 587px; top: 137px; } .nb-eq-wrapper .nb-eq-arrow-right .right-arrow-1 { fill: #656565; } @keyframes dot1 { 0% { opacity: 0; } 24% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 1; } } @keyframes dot2 { 0% { opacity: 0; } 49% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 1; } } @keyframes dot3 { 0% { opacity: 0; } 74% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 1; } } .waiting-dots .one { animation: dot1 2s infinite; } .waiting-dots .two { animation: dot2 2s infinite; } .waiting-dots .three { animation: dot3 2s infinite; } .ns-welcome-button { position: absolute; width: 140px; height: 140px; border-radius: 70px; background-color: #e4e4e4; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .ns-welcome-button .waiting-text { font-size: 24px; color: #808080; margin-bottom: 4px; } .ns-welcome-button .waiting-dots { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .ns-welcome-button .waiting-dots .one, .ns-welcome-button .waiting-dots .two, .ns-welcome-button .waiting-dots .three { width: 12px; height: 12px; background-color: #808080; border-radius: 6px; margin: 0 2px; } .ns-welcome-button.small .waiting-text { font-size: 18px; } .ns-welcome-button.small .waiting-dots .one, .ns-welcome-button.small .waiting-dots .two, .ns-welcome-button.small .waiting-dots .three { width: 8px; height: 8px; } .ns-welcome-button.extra-small .waiting-text { font-size: 14px; } .ns-welcome-button.extra-small .waiting-dots .one, .ns-welcome-button.extra-small .waiting-dots .two, .ns-welcome-button.extra-small .waiting-dots .three { width: 6px; height: 6px; } .ns-welcome-button.ready { cursor: pointer; background-color: #7bcc0a; -webkit-transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -ms-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; transition: background-color 300ms ease-in-out; } .ns-welcome-button.ready .play-arrow { -webkit-animation: slideArrow 2000ms linear infinite; -moz-animation: slideArrow 2000ms linear infinite; -ms-animation: slideArrow 2000ms linear infinite; -o-animation: slideArrow 2000ms linear infinite; animation: slideArrow 2000ms linear infinite; background-image: url("https://webassets.zearn.org/app_assets/number_sense/PlayButton_Arrow.svg"); background-repeat: no-repeat; width: 100%; height: 100%; background-size: 50% 80%; background-position: 50% 50%; position: relative; } @-webkit-keyframes slideArrow { 0%, 50%, 100% { background-position-x: 50%; } 25% { background-position-x: 42%; } 75% { background-position-x: 58%; } } @-moz-keyframes slideArrow { 0%, 50%, 100% { background-position-x: 50%; } 25% { background-position-x: 42%; } 75% { background-position-x: 58%; } } @-o-keyframes slideArrow { 0%, 50%, 100% { background-position-x: 50%; } 25% { background-position-x: 42%; } 75% { background-position-x: 58%; } } @keyframes slideArrow { 0%, 50%, 100% { background-position-x: 50%; } 25% { background-position-x: 42%; } 75% { background-position-x: 58%; } } .ns-welcome-button.ready:hover { background-color: #80ff00; -webkit-transition: background-color 100ms ease-in-out, left 100ms ease-in-out; -moz-transition: background-color 100ms ease-in-out, left 100ms ease-in-out; -ms-transition: background-color 100ms ease-in-out, left 100ms ease-in-out; -o-transition: background-color 100ms ease-in-out, left 100ms ease-in-out; transition: background-color 100ms ease-in-out, left 100ms ease-in-out; } .ns-welcome-button.ready:hover .play-arrow { -webkit-animation: none; -moz-animation: none; -ms-animation: none; -o-animation: none; animation: none; } .ns-welcome-button.ready .waiting-dots, .ns-welcome-button.ready .waiting-text { display: none; } .number-sense-task-group { overflow: hidden; position: relative; width: 960px; height: 500px; font-family: Oxygen, Verdana, Geneva, sans-serif; } .number-sense-task-group.resizing * { transition: none !important; } .number-sense-task-group .task, .number-sense-task-group button { font-family: Oxygen, Verdana, Geneva, sans-serif; } .number-sense-task-group .ns-welcome { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; } .number-sense-task-group .ns-welcome.ready { cursor: pointer; } .number-sense-task-group .ns-welcome .ns-green-circle { position: absolute; display: none; width: 140px; height: 140px; background-color: #50cb13; border-radius: 100px; transition: 1000ms; } .number-sense-task-group .ns-welcome .ns-green-circle.big { border-radius: 2000px; width: 1200px; height: 1200px; top: -350px; left: -120px; } .number-sense-task-group .ns-main { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .number-sense-task-group .ns-hole-board { position: absolute; top: 0; left: 0; z-index: 2; height: 500px; } .number-sense-task-group .ns-hole-board .ns-hole-bg { fill: #50cb13; height: 500px; } .number-sense-task-group .ns-hole-board .ns-hole-mask-rect { fill: white; } .number-sense-task-group .ns-hole-board .ns-hole { fill: black; } .number-sense-task-group .ns-button { cursor: pointer; vertical-align: top; font-size: 40px; color: white; border-radius: 40px; border-width: 0 0 4px 0; border-style: solid; text-transform: none; padding: 2px 12px 4px 12px; } .number-sense-task-group .ns-button:active { border-width: 4px 0 0 0; } .number-sense-task-group .ns-button.ns-next-button { background: #0294f8; border-color: #0673bf; width: 80px; height: 40px; border-radius: 10px; font-size: 30px; padding-left: 16px; } .number-sense-task-group .ns-button.ns-next-button:active { border-top-color: #e4e4e4; } .number-sense-task-group .ns-button.ns-next-button .ns-next-triangle { width: 0; height: 0; margin: 4px auto; border-style: solid; border-width: 12.5px 0 12.5px 21.7px; border-color: transparent transparent transparent #ffffff; } .ns-video-overlay.hidden, .ns-video-player.hidden { left: -960px; } .ns-video-overlay { position: absolute; width: 100%; height: 100%; background-color: black; cursor: pointer; opacity: 0; z-index: 11; -webkit-transition: opacity 1200ms ease-in; -moz-transition: opacity 1200ms ease-in; -ms-transition: opacity 1200ms ease-in; -o-transition: opacity 1200ms ease-in; transition: opacity 1200ms ease-in; } .ns-video-overlay.fade-in { opacity: 0.65; } .ns-video-button { position: absolute; left: 20px; width: 60px; height: 60px; border-radius: 100%; border: 5px solid transparent; z-index: 12; -webkit-transition: opacity 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, border-width 600ms ease-in-out, border-radius 600ms ease-in-out; -moz-transition: opacity 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, border-width 600ms ease-in-out, border-radius 600ms ease-in-out; -ms-transition: opacity 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, border-width 600ms ease-in-out, border-radius 600ms ease-in-out; -o-transition: opacity 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, border-width 600ms ease-in-out, border-radius 600ms ease-in-out; transition: opacity 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, border-width 600ms ease-in-out, border-radius 600ms ease-in-out; } .ns-video-button:hover:not(.hidden) { cursor: pointer; border-color: #fad232; } .ns-video-button.hidden { opacity: 0; } .ns-video-button.lower { bottom: 20px; } .ns-video-button.upper { bottom: 420px; } .ns-video-button.expanding { cursor: default; border-color: #fad232; } .ns-video-button.expanding .ns-video-button-image { border-color: transparent; } .ns-video-button.expanded { border-width: 8px; bottom: 23px; left: 260.5px; width: 439px; height: 439px; } .ns-video-button.expanded .ns-video-button-image { bottom: 31px; left: 309.2777777778px; width: 425px; height: 425px; background-size: 755.5555555556px 425px; background-position: 0px 0px; } .ns-video-button.expanded.rectify { border-radius: 5px; width: 656px; left: 152px; } .ns-video-button.expanded.rectify .ns-video-button-image { border-radius: 0px; width: 640px; left: 144px; } .ns-video-button .ns-video-button-image { width: 50px; height: 50px; border: 1px solid #7e7e7e; border-radius: 100%; background-color: white; background-repeat: no-repeat; background-size: 177.7777777778px 100px; -webkit-transition: border-radius 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, background-size 600ms ease-in-out, background-position 600ms ease-in-out; -moz-transition: border-radius 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, background-size 600ms ease-in-out, background-position 600ms ease-in-out; -ms-transition: border-radius 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, background-size 600ms ease-in-out, background-position 600ms ease-in-out; -o-transition: border-radius 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, background-size 600ms ease-in-out, background-position 600ms ease-in-out; transition: border-radius 600ms ease-in-out, bottom 600ms ease-in-out, left 600ms ease-in-out, width 600ms ease-in-out, height 600ms ease-in-out, background-size 600ms ease-in-out, background-position 600ms ease-in-out; } .ns-video-player { opacity: 0; position: absolute; bottom: 23px; left: 152px; z-index: 13; -webkit-transition: opacity 400ms ease-in-out; -moz-transition: opacity 400ms ease-in-out; -ms-transition: opacity 400ms ease-in-out; -o-transition: opacity 400ms ease-in-out; transition: opacity 400ms ease-in-out; } .ns-video-player .ns-video-x { position: relative; top: 20px; left: 634px; z-index: 2; width: 40px; height: 40px; border-radius: 20px; background-color: #0c91cc; background-image: url("https://webassets.zearn.org/app_assets/number_sense/video_player/x-close.svg"); background-size: 100%; background-repeat: no-repeat; cursor: pointer; } .ns-video-player .video-player { margin: auto; width: 656px; border: 8px solid #ffea00; } .ns-video-player .video-player .video-wrapper { min-height: 360px; } .ns-video-player .video-player .video-controls .play-button { height: 40px; width: 40px; } .ns-video-player .video-player .video-controls #time-label, .ns-video-player .video-player .video-controls #end-label { margin: 0 8px; } .ns-video-player .video-player .video-controls #progress-area { width: auto; } .ns-video-player .video-player .video-controls #progress-area #progress-bar { max-width: 400px; } .ns-video-player.fade-in { opacity: 1; } .ns-prompt-bar { font-size: 24px; text-align: center; font-weight: 700; width: 100%; height: 51px; top: 0; position: relative; z-index: 10; -webkit-transition: top 300ms ease-in-out; -moz-transition: top 300ms ease-in-out; -ms-transition: top 300ms ease-in-out; -o-transition: top 300ms ease-in-out; transition: top 300ms ease-in-out; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .ns-prompt-bar .audio-control { height: 51px; width: 70px; } .ns-prompt-bar .audio-control .audio-icon { height: 34px; width: 34px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/prompt_bar/Toggle_Spritesheet.svg"); background-size: 400px 60px; z-index: 10; left: 16px; position: absolute; -webkit-transition: top 166ms ease-in-out; -moz-transition: top 166ms ease-in-out; -ms-transition: top 166ms ease-in-out; -o-transition: top 166ms ease-in-out; transition: top 166ms ease-in-out; } .ns-prompt-bar .audio-control .shadow { border-radius: 50%; position: absolute; -webkit-transition: filter 166ms ease-in-out, top 166ms ease-in-out, left 166ms ease-in-out, width 166ms ease-in-out, height 166ms ease-in-out; -moz-transition: filter 166ms ease-in-out, top 166ms ease-in-out, left 166ms ease-in-out, width 166ms ease-in-out, height 166ms ease-in-out; -ms-transition: filter 166ms ease-in-out, top 166ms ease-in-out, left 166ms ease-in-out, width 166ms ease-in-out, height 166ms ease-in-out; -o-transition: filter 166ms ease-in-out, top 166ms ease-in-out, left 166ms ease-in-out, width 166ms ease-in-out, height 166ms ease-in-out; transition: filter 166ms ease-in-out, top 166ms ease-in-out, left 166ms ease-in-out, width 166ms ease-in-out, height 166ms ease-in-out; top: 46px; left: 24.5px; width: 17px; height: 3px; -webkit-filter: blur(0px); -moz-filter: blur(0px); -ms-filter: blur(0px); -o-filter: blur(0px); filter: blur(0px); background-color: #a1adb3; z-index: 9; } .ns-prompt-bar .audio-control .z-icon { height: 21px; width: 20px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/prompt_bar/Toggle_Spritesheet.svg"); background-size: 400px 60px; position: absolute; background-position: -205px -10px; z-index: 11; left: 39px; top: 8px; transform: rotate(0deg) scale(1); -webkit-transition: left 100ms ease-in-out 166ms, top 100ms ease-in-out 166ms, opacity 100ms ease-in-out 166ms, transform 100ms ease-in-out 166ms; -moz-transition: left 100ms ease-in-out 166ms, top 100ms ease-in-out 166ms, opacity 100ms ease-in-out 166ms, transform 100ms ease-in-out 166ms; -ms-transition: left 100ms ease-in-out 166ms, top 100ms ease-in-out 166ms, opacity 100ms ease-in-out 166ms, transform 100ms ease-in-out 166ms; -o-transition: left 100ms ease-in-out 166ms, top 100ms ease-in-out 166ms, opacity 100ms ease-in-out 166ms, transform 100ms ease-in-out 166ms; transition: left 100ms ease-in-out 166ms, top 100ms ease-in-out 166ms, opacity 100ms ease-in-out 166ms, transform 100ms ease-in-out 166ms; opacity: 1; } .ns-prompt-bar .prompt-bar { background-color: #e6b923; width: 890px; position: absolute; top: 0px; right: 0px; height: 51px; border-top-left-radius: 25px; border-bottom-left-radius: 25px; z-index: 10; } .ns-prompt-bar .prompt-bar .prompt-text { margin-top: 10px; display: inline-block; } .ns-prompt-bar .prompt-bar .sound-widget { position: relative; top: -2px; } .ns-prompt-bar .prompt-bar .prompt-bar-tail { position: absolute; left: 4px; top: 22px; width: 30.5px; height: 20px; background-repeat: no-repeat; background-color: transparent; background-image: url("https://webassets.zearn.org/app_assets/number_sense/prompt_bar/Toggle_Spritesheet.svg"); background-size: 400px 60px; background-position: -303px -10px; -webkit-transform: rotate(-23deg); -moz-transform: rotate(-23deg); -ms-transform: rotate(-23deg); -o-transform: rotate(-23deg); transform: rotate(-23deg); -webkit-transition: left 266ms ease-in-out, top 266ms ease-in-out, transform 266ms ease-in-out; -moz-transition: left 266ms ease-in-out, top 266ms ease-in-out, transform 266ms ease-in-out; -ms-transition: left 266ms ease-in-out, top 266ms ease-in-out, transform 266ms ease-in-out; -o-transition: left 266ms ease-in-out, top 266ms ease-in-out, transform 266ms ease-in-out; transition: left 266ms ease-in-out, top 266ms ease-in-out, transform 266ms ease-in-out; } .ns-prompt-bar.autoplay-on .prompt-bar-tail { top: 20px; left: -18px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .ns-prompt-bar.autoplay-on .audio-icon { top: 9px; background-position: -9px -10px; } .ns-prompt-bar.autoplay-on .shadow { top: 45px; left: 21px; width: 23px; height: 4px; -webkit-filter: blur(1px); -moz-filter: blur(1px); -ms-filter: blur(1px); -o-filter: blur(1px); filter: blur(1px); background-color: #cfdee6; } .ns-prompt-bar.autoplay-on .z-icon { left: 29px; top: 13px; opacity: 0; transform: rotate(-90deg) scale(0.5); -webkit-transition: left 100ms ease-in-out, top 100ms ease-in-out, opacity 100ms ease-in-out, transform 100ms ease-in-out; -moz-transition: left 100ms ease-in-out, top 100ms ease-in-out, opacity 100ms ease-in-out, transform 100ms ease-in-out; -ms-transition: left 100ms ease-in-out, top 100ms ease-in-out, opacity 100ms ease-in-out, transform 100ms ease-in-out; -o-transition: left 100ms ease-in-out, top 100ms ease-in-out, opacity 100ms ease-in-out, transform 100ms ease-in-out; transition: left 100ms ease-in-out, top 100ms ease-in-out, opacity 100ms ease-in-out, transform 100ms ease-in-out; } .ns-prompt-bar.autoplay-on .audio-control:hover .audio-icon { background-position: -58px -10px; } .ns-prompt-bar:not(.autoplay-on) .audio-icon { top: 14px; background-position: -107px -10px; } .ns-prompt-bar:not(.autoplay-on) .audio-control:hover .audio-icon { background-position: -156px -10px; } .ns-prompt-bar:not(.autoplay-on) .audio-control:hover .z-icon { background-position: -254px -10px; } .ns-prompt-bar.playing .prompt-bar { background-color: #f5a623; } .ns-prompt-bar.playing .prompt-bar .prompt-bar-tail { background-position: -352px -10px; } .ns-prompt-bar.playing .sound-widget .fa-volume { display: none; } .ns-prompt-bar.playing .sound-widget .fa-volume-mute { display: inline; } .ns-prompt-bar.with-audio { cursor: pointer; } .ns-prompt-bar.with-audio .prompt-bar:hover { background-color: #f5a623; } .ns-prompt-bar.with-audio .prompt-bar:hover .prompt-bar-tail { background-position: -352px -10px; } .ns-prompt-bar:not(.with-audio) .sound-widget { display: none; } .ns-prompt-bar.slide-up { top: -51px; } @-webkit-keyframes floatCenterPlanet { 0%, 100% { margin-top: 0px; } 50% { margin-top: 20px; } } @-moz-keyframes floatCenterPlanet { 0%, 100% { margin-top: 0px; } 50% { margin-top: 20px; } } @-o-keyframes floatCenterPlanet { 0%, 100% { margin-top: 0px; } 50% { margin-top: 20px; } } @keyframes floatCenterPlanet { 0%, 100% { margin-top: 0px; } 50% { margin-top: 20px; } } @-webkit-keyframes floatPlanets1 { 0%, 100% { margin-top: 0px; } 50% { margin-top: 10px; } } @-moz-keyframes floatPlanets1 { 0%, 100% { margin-top: 0px; } 50% { margin-top: 10px; } } @-o-keyframes floatPlanets1 { 0%, 100% { margin-top: 0px; } 50% { margin-top: 10px; } } @keyframes floatPlanets1 { 0%, 100% { margin-top: 0px; } 50% { margin-top: 10px; } } @-webkit-keyframes floatPlanets2 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -5px; } } @-moz-keyframes floatPlanets2 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -5px; } } @-o-keyframes floatPlanets2 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -5px; } } @keyframes floatPlanets2 { 0%, 100% { margin-top: 0px; } 50% { margin-top: -5px; } } @-webkit-keyframes floatApe { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(30px) rotate(5deg); -moz-transform: translateY(30px) rotate(5deg); -ms-transform: translateY(30px) rotate(5deg); -o-transform: translateY(30px) rotate(5deg); transform: translateY(30px) rotate(5deg); } } @-moz-keyframes floatApe { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(30px) rotate(5deg); -moz-transform: translateY(30px) rotate(5deg); -ms-transform: translateY(30px) rotate(5deg); -o-transform: translateY(30px) rotate(5deg); transform: translateY(30px) rotate(5deg); } } @-o-keyframes floatApe { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(30px) rotate(5deg); -moz-transform: translateY(30px) rotate(5deg); -ms-transform: translateY(30px) rotate(5deg); -o-transform: translateY(30px) rotate(5deg); transform: translateY(30px) rotate(5deg); } } @keyframes floatApe { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(30px) rotate(5deg); -moz-transform: translateY(30px) rotate(5deg); -ms-transform: translateY(30px) rotate(5deg); -o-transform: translateY(30px) rotate(5deg); transform: translateY(30px) rotate(5deg); } } @-webkit-keyframes floatTiger { 0%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 50% { -webkit-transform: translate(5px, -10px) rotate(-5deg); -moz-transform: translate(5px, -10px) rotate(-5deg); -ms-transform: translate(5px, -10px) rotate(-5deg); -o-transform: translate(5px, -10px) rotate(-5deg); transform: translate(5px, -10px) rotate(-5deg); } } @-moz-keyframes floatTiger { 0%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 50% { -webkit-transform: translate(5px, -10px) rotate(-5deg); -moz-transform: translate(5px, -10px) rotate(-5deg); -ms-transform: translate(5px, -10px) rotate(-5deg); -o-transform: translate(5px, -10px) rotate(-5deg); transform: translate(5px, -10px) rotate(-5deg); } } @-o-keyframes floatTiger { 0%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 50% { -webkit-transform: translate(5px, -10px) rotate(-5deg); -moz-transform: translate(5px, -10px) rotate(-5deg); -ms-transform: translate(5px, -10px) rotate(-5deg); -o-transform: translate(5px, -10px) rotate(-5deg); transform: translate(5px, -10px) rotate(-5deg); } } @keyframes floatTiger { 0%, 100% { -webkit-transform: translate(0px, 0px) rotate(0deg); -moz-transform: translate(0px, 0px) rotate(0deg); -ms-transform: translate(0px, 0px) rotate(0deg); -o-transform: translate(0px, 0px) rotate(0deg); transform: translate(0px, 0px) rotate(0deg); } 50% { -webkit-transform: translate(5px, -10px) rotate(-5deg); -moz-transform: translate(5px, -10px) rotate(-5deg); -ms-transform: translate(5px, -10px) rotate(-5deg); -o-transform: translate(5px, -10px) rotate(-5deg); transform: translate(5px, -10px) rotate(-5deg); } } @-webkit-keyframes floatPig { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(5px) rotate(5deg); -moz-transform: translateY(5px) rotate(5deg); -ms-transform: translateY(5px) rotate(5deg); -o-transform: translateY(5px) rotate(5deg); transform: translateY(5px) rotate(5deg); } } @-moz-keyframes floatPig { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(5px) rotate(5deg); -moz-transform: translateY(5px) rotate(5deg); -ms-transform: translateY(5px) rotate(5deg); -o-transform: translateY(5px) rotate(5deg); transform: translateY(5px) rotate(5deg); } } @-o-keyframes floatPig { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(5px) rotate(5deg); -moz-transform: translateY(5px) rotate(5deg); -ms-transform: translateY(5px) rotate(5deg); -o-transform: translateY(5px) rotate(5deg); transform: translateY(5px) rotate(5deg); } } @keyframes floatPig { 0%, 100% { -webkit-transform: translateY(0px) rotate(0deg); -moz-transform: translateY(0px) rotate(0deg); -ms-transform: translateY(0px) rotate(0deg); -o-transform: translateY(0px) rotate(0deg); transform: translateY(0px) rotate(0deg); } 50% { -webkit-transform: translateY(5px) rotate(5deg); -moz-transform: translateY(5px) rotate(5deg); -ms-transform: translateY(5px) rotate(5deg); -o-transform: translateY(5px) rotate(5deg); transform: translateY(5px) rotate(5deg); } } @-webkit-keyframes flickerFlame { 0%, 100% { opacity: 0.5; } 50% { opacity: 0; } } @-moz-keyframes flickerFlame { 0%, 100% { opacity: 0.5; } 50% { opacity: 0; } } @-o-keyframes flickerFlame { 0%, 100% { opacity: 0.5; } 50% { opacity: 0; } } @keyframes flickerFlame { 0%, 100% { opacity: 0.5; } 50% { opacity: 0; } } @-webkit-keyframes bobRocket { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } } @-moz-keyframes bobRocket { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } } @-o-keyframes bobRocket { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } } @keyframes bobRocket { 0%, 100% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); } } @-webkit-keyframes dropFlame { 0% { opacity: 0; height: 80px; margin-top: 170px; } 27% { opacity: 0.5; height: 80px; margin-top: 170px; } 55%, 100% { opacity: 0.5; height: 250px; margin-top: 0px; } } @-moz-keyframes dropFlame { 0% { opacity: 0; height: 80px; margin-top: 170px; } 27% { opacity: 0.5; height: 80px; margin-top: 170px; } 55%, 100% { opacity: 0.5; height: 250px; margin-top: 0px; } } @-o-keyframes dropFlame { 0% { opacity: 0; height: 80px; margin-top: 170px; } 27% { opacity: 0.5; height: 80px; margin-top: 170px; } 55%, 100% { opacity: 0.5; height: 250px; margin-top: 0px; } } @keyframes dropFlame { 0% { opacity: 0; height: 80px; margin-top: 170px; } 27% { opacity: 0.5; height: 80px; margin-top: 170px; } 55%, 100% { opacity: 0.5; height: 250px; margin-top: 0px; } } @-webkit-keyframes flyInFlame { 0%, 64% { opacity: 0.5; height: 250px; margin-top: 0px; } 91% { opacity: 0.5; height: 80px; margin-top: 170px; } 100% { opacity: 0; height: 80px; margin-top: 170px; } } @-moz-keyframes flyInFlame { 0%, 64% { opacity: 0.5; height: 250px; margin-top: 0px; } 91% { opacity: 0.5; height: 80px; margin-top: 170px; } 100% { opacity: 0; height: 80px; margin-top: 170px; } } @-o-keyframes flyInFlame { 0%, 64% { opacity: 0.5; height: 250px; margin-top: 0px; } 91% { opacity: 0.5; height: 80px; margin-top: 170px; } 100% { opacity: 0; height: 80px; margin-top: 170px; } } @keyframes flyInFlame { 0%, 64% { opacity: 0.5; height: 250px; margin-top: 0px; } 91% { opacity: 0.5; height: 80px; margin-top: 170px; } 100% { opacity: 0; height: 80px; margin-top: 170px; } } .skip-counting.task-container { margin: auto; } .skip-counting.task-container.rotate-out { -webkit-transition: -webkit-transform 1500ms ease-in-out; -moz-transition: -moz-transform 1500ms ease-in-out; -o-transition: -o-transform 1500ms ease-in-out; transition: transform 1500ms ease-in-out; -webkit-transform: translate(-450px, 500px) rotate(10deg); -moz-transform: translate(-450px, 500px) rotate(10deg); -ms-transform: translate(-450px, 500px) rotate(10deg); -o-transform: translate(-450px, 500px) rotate(10deg); transform: translate(-450px, 500px) rotate(10deg); } .skip-counting.task-container .inactive:not(.zearn-input), .skip-counting.task-container .active:not(.zearn-input) { margin-right: 20px; z-index: 3; -webkit-flex-shrink: 0; flex-shrink: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-transform: translate3d(0, 0, 0); /*fixes safari flicker bug*/ } .skip-counting.task-container .planet-row { top: 159px; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-transition: left 1000ms ease-in-out, -webkit-transform 2000ms ease-in-out; -moz-transition: left 1000ms ease-in-out, -webkit-transform 2000ms ease-in-out; -ms-transition: left 1000ms ease-in-out, -webkit-transform 2000ms ease-in-out; -o-transition: left 1000ms ease-in-out, -webkit-transform 2000ms ease-in-out; transition: left 1000ms ease-in-out, -webkit-transform 2000ms ease-in-out; -webkit-transition: left 1000ms ease-in-out, transform 2000ms ease-in-out; -moz-transition: left 1000ms ease-in-out, transform 2000ms ease-in-out; -ms-transition: left 1000ms ease-in-out, transform 2000ms ease-in-out; -o-transition: left 1000ms ease-in-out, transform 2000ms ease-in-out; transition: left 1000ms ease-in-out, transform 2000ms ease-in-out; } .skip-counting.task-container .planet-row.fast-pan { -webkit-transition: left 500ms ease-in-out, -webkit-transform 2000ms ease-in-out; -moz-transition: left 500ms ease-in-out, -webkit-transform 2000ms ease-in-out; -ms-transition: left 500ms ease-in-out, -webkit-transform 2000ms ease-in-out; -o-transition: left 500ms ease-in-out, -webkit-transform 2000ms ease-in-out; transition: left 500ms ease-in-out, -webkit-transform 2000ms ease-in-out; -webkit-transition: left 500ms ease-in-out, transform 2000ms ease-in-out; -moz-transition: left 500ms ease-in-out, transform 2000ms ease-in-out; -ms-transition: left 500ms ease-in-out, transform 2000ms ease-in-out; -o-transition: left 500ms ease-in-out, transform 2000ms ease-in-out; transition: left 500ms ease-in-out, transform 2000ms ease-in-out; } .skip-counting.task-container .planet-row.rotated-up { -webkit-transform: translate(500px, -550px) rotate(10deg); -moz-transform: translate(500px, -550px) rotate(10deg); -ms-transform: translate(500px, -550px) rotate(10deg); -o-transform: translate(500px, -550px) rotate(10deg); transform: translate(500px, -550px) rotate(10deg); } .skip-counting.task-container .planet-row.count-up { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .skip-counting.task-container .planet-row.count-down { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .skip-counting.task-container .planet-row .blurring { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); z-index: 1; } .skip-counting.task-container .planet-row .moon { position: relative; left: 0px; } .skip-counting.task-container .planet-row.finish { -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; top: 226px; } .skip-counting.task-container .planet-row.finish.count-up { margin-left: -500px; } .skip-counting.task-container .planet-row.finish.count-down { margin-right: -480px; } .skip-counting.task-container .planet-row.finish .earth { -webkit-transition: margin 1000ms ease-in-out; -moz-transition: margin 1000ms ease-in-out; -ms-transition: margin 1000ms ease-in-out; -o-transition: margin 1000ms ease-in-out; transition: margin 1000ms ease-in-out; margin: 0px 400px; -webkit-animation: floatCenterPlanet 2000ms ease-in-out infinite; -moz-animation: floatCenterPlanet 2000ms ease-in-out infinite; -ms-animation: floatCenterPlanet 2000ms ease-in-out infinite; -o-animation: floatCenterPlanet 2000ms ease-in-out infinite; animation: floatCenterPlanet 2000ms ease-in-out infinite; } .skip-counting.task-container .planet { position: relative; left: 0px; -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; } .skip-counting.task-container .planet.no-animation { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .skip-counting.task-container .planet.active[data-num="0"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-0.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="1"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-1.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="2"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-2.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="3"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-3.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="4"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-4.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="5"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-5.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="6"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-6.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="7"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-7.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="8"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-8.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active[data-num="9"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-planet-9.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.active.earth[data-num="0"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/earth2-0.svg"); background-size: 150px 150px; width: 150px; height: 150px; } .skip-counting.task-container .planet.active.earth[data-num="1"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/earth2-1.svg"); background-size: 150px 150px; width: 150px; height: 150px; } .skip-counting.task-container .planet.active.earth[data-num="2"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/earth2-2.svg"); background-size: 150px 150px; width: 150px; height: 150px; } .skip-counting.task-container .planet.active.earth[data-num="3"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/earth2-3.svg"); background-size: 150px 150px; width: 150px; height: 150px; } .skip-counting.task-container .planet.active.earth[data-num="4"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/earth2-4.svg"); background-size: 150px 150px; width: 150px; height: 150px; } .skip-counting.task-container .planet.inactive[data-num="0"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-planet-0.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.inactive[data-num="1"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-planet-1.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .planet.inactive[data-num="2"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-planet-2.svg"); background-size: 110px 110px; width: 110px; height: 110px; } .skip-counting.task-container .moon { position: absolute; } .skip-counting.task-container .moon[data-num="0"].active { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-moon-0.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="0"].inactive { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-moon-0.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="0"].drop-down { -webkit-transition: all 1000ms ease-in-out 0ms; -moz-transition: all 1000ms ease-in-out 0ms; -ms-transition: all 1000ms ease-in-out 0ms; -o-transition: all 1000ms ease-in-out 0ms; transition: all 1000ms ease-in-out 0ms; } .skip-counting.task-container .moon[data-num="1"].active { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-moon-1.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="1"].inactive { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-moon-1.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="1"].drop-down { -webkit-transition: all 1000ms ease-in-out 25ms; -moz-transition: all 1000ms ease-in-out 25ms; -ms-transition: all 1000ms ease-in-out 25ms; -o-transition: all 1000ms ease-in-out 25ms; transition: all 1000ms ease-in-out 25ms; } .skip-counting.task-container .moon[data-num="2"].active { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-moon-2.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="2"].inactive { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-moon-2.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="2"].drop-down { -webkit-transition: all 1000ms ease-in-out 50ms; -moz-transition: all 1000ms ease-in-out 50ms; -ms-transition: all 1000ms ease-in-out 50ms; -o-transition: all 1000ms ease-in-out 50ms; transition: all 1000ms ease-in-out 50ms; } .skip-counting.task-container .moon[data-num="3"].active { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-moon-3.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="3"].inactive { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-moon-3.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="3"].drop-down { -webkit-transition: all 1000ms ease-in-out 75ms; -moz-transition: all 1000ms ease-in-out 75ms; -ms-transition: all 1000ms ease-in-out 75ms; -o-transition: all 1000ms ease-in-out 75ms; transition: all 1000ms ease-in-out 75ms; } .skip-counting.task-container .moon[data-num="4"].active { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/active-moon-4.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="4"].inactive { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/inactive-moon-4.svg"); background-size: 70px 70px; width: 70px; height: 70px; } .skip-counting.task-container .moon[data-num="4"].drop-down { -webkit-transition: all 1000ms ease-in-out 100ms; -moz-transition: all 1000ms ease-in-out 100ms; -ms-transition: all 1000ms ease-in-out 100ms; -o-transition: all 1000ms ease-in-out 100ms; transition: all 1000ms ease-in-out 100ms; } .skip-counting.task-container .moon.no-margin { margin-right: -70px; } .skip-counting.task-container .zearn-input { min-width: 66px; height: 58px; padding-top: 7px; } .skip-counting.task-container .zearn-input:not(.correct):not(.correct-done):not(.try-again):not(.incorrect):not(.incorrect-done):not(.unknown) { background-color: white; } .skip-counting.task-container .zearn-input:not(.full):not(.inactive):not(.correct):not(.incorrect):not(:empty) { padding-left: 10px; } .skip-counting.task-container .label, .skip-counting.task-container .zearn-input { font-size: 30px; font-weight: bold; -webkit-transition: margin-top 500ms ease-in-out, opacity 500ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out; -moz-transition: margin-top 500ms ease-in-out, opacity 500ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out; -ms-transition: margin-top 500ms ease-in-out, opacity 500ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out; -o-transition: margin-top 500ms ease-in-out, opacity 500ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out; transition: margin-top 500ms ease-in-out, opacity 500ms ease-in-out, background-color 300ms ease-in-out, border-color 300ms ease-in-out, color 300ms ease-in-out; } .skip-counting.task-container .label.hidden, .skip-counting.task-container .zearn-input.hidden { margin-top: 10px; opacity: 0; } .skip-counting.task-container .label.disappear, .skip-counting.task-container .zearn-input.disappear { -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; opacity: 0; } .skip-counting.task-container .pulse { position: absolute; opacity: 0; top: 0px; background-color: white; width: 150px; height: 100%; border-radius: 50%; -webkit-animation: whitePulse 1000ms ease-in-out; -moz-animation: whitePulse 1000ms ease-in-out; -ms-animation: whitePulse 1000ms ease-in-out; -o-animation: whitePulse 1000ms ease-in-out; animation: whitePulse 1000ms ease-in-out; } @-webkit-keyframes whitePulse { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 1; } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); opacity: 0; } } @-moz-keyframes whitePulse { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 1; } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); opacity: 0; } } @-o-keyframes whitePulse { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 1; } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); opacity: 0; } } @keyframes whitePulse { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 1; } 100% { -webkit-transform: scale(1.8); -moz-transform: scale(1.8); -ms-transform: scale(1.8); -o-transform: scale(1.8); transform: scale(1.8); opacity: 0; } } .count-the-cosmos.number-sense-task-group { height: 590px; } .count-the-cosmos.number-sense-task-group .ns-welcome .bg-layer { top: -590px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/title-background.svg"); background-size: 960px 1180px; width: 960px; height: 1180px; } .count-the-cosmos.number-sense-task-group .ns-welcome .bg-planets { left: 0; top: 0; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/title-planets2.svg"); background-size: 960px 590px; width: 960px; height: 590px; } .count-the-cosmos.number-sense-task-group .ns-welcome .purple-layer { height: 590px; width: 960px; background-color: #2b004d; opacity: 0; } .count-the-cosmos.number-sense-task-group .ns-welcome .ns-welcome-button { left: 758px; top: 110px; width: 100px; height: 100px; -webkit-transition: opacity 300ms ease-in-out, filter 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out, filter 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out, filter 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out, filter 300ms ease-in-out; transition: opacity 300ms ease-in-out, filter 300ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-welcome .ape { left: 387px; top: 200px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/title-ape.svg"); background-size: 418px 390px; width: 418px; height: 390px; } .count-the-cosmos.number-sense-task-group .ns-welcome .tiger { left: 75px; top: 320px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/title-tiger.svg"); background-size: 292px 204px; width: 292px; height: 204px; } .count-the-cosmos.number-sense-task-group .ns-welcome .pig { left: 795px; top: 190px; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/title-pig.svg"); background-size: 92px 106px; width: 92px; height: 106px; } .count-the-cosmos.number-sense-task-group .ns-welcome.animate-animals .ape { -webkit-animation: floatApe 10000ms ease-in-out infinite; -moz-animation: floatApe 10000ms ease-in-out infinite; -ms-animation: floatApe 10000ms ease-in-out infinite; -o-animation: floatApe 10000ms ease-in-out infinite; animation: floatApe 10000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .ns-welcome.animate-animals .tiger { -webkit-animation: floatTiger 10000ms ease-in-out infinite; -moz-animation: floatTiger 10000ms ease-in-out infinite; -ms-animation: floatTiger 10000ms ease-in-out infinite; -o-animation: floatTiger 10000ms ease-in-out infinite; animation: floatTiger 10000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .ns-welcome.animate-animals .pig { -webkit-animation: floatPig 10000ms ease-in-out infinite; -moz-animation: floatPig 10000ms ease-in-out infinite; -ms-animation: floatPig 10000ms ease-in-out infinite; -o-animation: floatPig 10000ms ease-in-out infinite; animation: floatPig 10000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .ns-welcome .bg-layer, .count-the-cosmos.number-sense-task-group .ns-welcome .bg-planets, .count-the-cosmos.number-sense-task-group .ns-welcome .purple-layer, .count-the-cosmos.number-sense-task-group .ns-welcome .ns-welcome-button, .count-the-cosmos.number-sense-task-group .ns-welcome .ape, .count-the-cosmos.number-sense-task-group .ns-welcome .tiger, .count-the-cosmos.number-sense-task-group .ns-welcome .pig, .count-the-cosmos.number-sense-task-group .ns-welcome .title { position: absolute; } .count-the-cosmos.number-sense-task-group .ns-welcome .title { left: 203px; top: 30px; font-family: "cubano", "Arial Black", sans-serif; color: #ffff73; text-align: center; -webkit-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; -o-transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; transition: opacity 1000ms ease-in-out, filter 1000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-welcome .title .title-count { letter-spacing: 2px; font-size: 184px; line-height: 134px; } .count-the-cosmos.number-sense-task-group .ns-welcome .title .title-cosmos { font-size: 92px; letter-spacing: 1px; line-height: 106px; } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .purple-layer { opacity: 1; } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .ns-welcome-button, .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .title { opacity: 0; -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .bg-layer { top: 0px; } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .bg-planets { top: 113px; } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .ape { top: 500px; } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .tiger { top: 520px; } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .pig { top: 290px; } .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .bg-layer, .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .bg-planets, .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .ape, .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .tiger, .count-the-cosmos.number-sense-task-group .ns-welcome.slide-and-fade .pig { opacity: 0; -webkit-transition: top 2000ms ease-in-out, opacity 1000ms ease-in-out 1000ms; -moz-transition: top 2000ms ease-in-out, opacity 1000ms ease-in-out 1000ms; -ms-transition: top 2000ms ease-in-out, opacity 1000ms ease-in-out 1000ms; -o-transition: top 2000ms ease-in-out, opacity 1000ms ease-in-out 1000ms; transition: top 2000ms ease-in-out, opacity 1000ms ease-in-out 1000ms; } .count-the-cosmos.number-sense-task-group .ns-welcome.ease-purple-layer { z-index: 1; -webkit-transition: opacity 2000ms ease-in-out; -moz-transition: opacity 2000ms ease-in-out; -ms-transition: opacity 2000ms ease-in-out; -o-transition: opacity 2000ms ease-in-out; transition: opacity 2000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-welcome.fade-back .purple-layer { opacity: 0; -webkit-transition: opacity 1000ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out; -o-transition: opacity 1000ms ease-in-out; transition: opacity 1000ms ease-in-out; } .count-the-cosmos.number-sense-task-group.remediating .stars, .count-the-cosmos.number-sense-task-group.remediating .purple-haze, .count-the-cosmos.number-sense-task-group.remediating .astronaut, .count-the-cosmos.number-sense-task-group.remediating .spaceship { -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); } .count-the-cosmos.number-sense-task-group.remediating .ns-main .astronaut, .count-the-cosmos.number-sense-task-group.remediating .ns-main .rocket-wrapper { z-index: 1; } .count-the-cosmos.number-sense-task-group.remediating .blur-layer { opacity: 0.7; z-index: 2; } .count-the-cosmos.number-sense-task-group .ns-main { display: block; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/space_bg.svg"); background-size: 960px 590px; width: 960px; height: 590px; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main.hidden { opacity: 0; } .count-the-cosmos.number-sense-task-group .ns-main .rem-highlight { top: 0; border-radius: 50%; background-color: #ffff73; position: absolute; width: 150px; height: 100%; opacity: 0; z-index: 2; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; -ms-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .rem-highlight.appear { opacity: 1; } .count-the-cosmos.number-sense-task-group .ns-main .purple-haze { top: 0px; position: absolute; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/purple_haze_bg.svg"); background-size: 960px 590px; width: 960px; height: 590px; } .count-the-cosmos.number-sense-task-group .ns-main .stars { left: 0px; top: -1180px; position: absolute; background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/stars_bg.svg"); background-size: 4800px 2950px; width: 4800px; height: 2950px; -webkit-transition: left 1000ms ease-in-out; -moz-transition: left 1000ms ease-in-out; -ms-transition: left 1000ms ease-in-out; -o-transition: left 1000ms ease-in-out; transition: left 1000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .stars.initial-shift { left: -1250px; } .count-the-cosmos.number-sense-task-group .ns-main .stars.fast-pan { -webkit-transition: left 500ms ease-in-out; -moz-transition: left 500ms ease-in-out; -ms-transition: left 500ms ease-in-out; -o-transition: left 500ms ease-in-out; transition: left 500ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .flame { position: absolute; width: 80px; height: 80px; border-radius: 40px; opacity: 0; background: linear-gradient(rgba(247, 107, 28, 0) 15%, rgba(247, 107, 28, 0.75) 40%, #fbda61); z-index: 3; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down { -webkit-transition: -webkit-transform 1000ms ease-in-out; -moz-transition: -moz-transform 1000ms ease-in-out; -o-transition: -o-transform 1000ms ease-in-out; transition: transform 1000ms ease-in-out; -webkit-animation: dropFlame 1100ms ease-in-out; -moz-animation: dropFlame 1100ms ease-in-out; -ms-animation: dropFlame 1100ms ease-in-out; -o-animation: dropFlame 1100ms ease-in-out; animation: dropFlame 1100ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down.flicker { z-index: 1; -webkit-animation: dropFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out 300ms infinite; -moz-animation: dropFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out 300ms infinite; -ms-animation: dropFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out 300ms infinite; -o-animation: dropFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out 300ms infinite; animation: dropFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out 300ms infinite; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="0"] { transition-delay: 0ms; animation-delay: 0ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="0"].flicker { animation-delay: 0ms, 300ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="1"] { transition-delay: 25ms; animation-delay: 25ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="1"].flicker { animation-delay: 25ms, 325ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="2"] { transition-delay: 50ms; animation-delay: 50ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="2"].flicker { animation-delay: 50ms, 350ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="3"] { transition-delay: 75ms; animation-delay: 75ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="3"].flicker { animation-delay: 75ms, 375ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="4"] { transition-delay: 100ms; animation-delay: 100ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.drop-down[data-num="4"].flicker { animation-delay: 100ms, 400ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in { -webkit-transition: -webkit-transform 1000ms ease-in-out; -moz-transition: -moz-transform 1000ms ease-in-out; -o-transition: -o-transform 1000ms ease-in-out; transition: transform 1000ms ease-in-out; -webkit-animation: flyInFlame 1100ms ease-in-out; -moz-animation: flyInFlame 1100ms ease-in-out; -ms-animation: flyInFlame 1100ms ease-in-out; -o-animation: flyInFlame 1100ms ease-in-out; animation: flyInFlame 1100ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in.flicker { z-index: 1; -webkit-animation: flyInFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out infinite; -moz-animation: flyInFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out infinite; -ms-animation: flyInFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out infinite; -o-animation: flyInFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out infinite; animation: flyInFlame 1100ms ease-in-out, flickerFlame 200ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="0"] { transition-delay: 0ms; animation-delay: 0ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="0"].flicker { animation-delay: 0ms, 0ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="1"] { transition-delay: 25ms; animation-delay: 25ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="1"].flicker { animation-delay: 25ms, 25ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="2"] { transition-delay: 50ms; animation-delay: 50ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="2"].flicker { animation-delay: 50ms, 50ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="3"] { transition-delay: 75ms; animation-delay: 75ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="3"].flicker { animation-delay: 75ms, 75ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="4"] { transition-delay: 100ms; animation-delay: 100ms; } .count-the-cosmos.number-sense-task-group .ns-main .flame.fly-in[data-num="4"].flicker { animation-delay: 100ms, 100ms; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper { left: 10px; top: 433px; z-index: 4; position: absolute; -webkit-transition: z-index 500ms ease-in-out, top 2000ms ease-in-out, left 2000ms ease-in-out; -moz-transition: z-index 500ms ease-in-out, top 2000ms ease-in-out, left 2000ms ease-in-out; -ms-transition: z-index 500ms ease-in-out, top 2000ms ease-in-out, left 2000ms ease-in-out; -o-transition: z-index 500ms ease-in-out, top 2000ms ease-in-out, left 2000ms ease-in-out; transition: z-index 500ms ease-in-out, top 2000ms ease-in-out, left 2000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper.float-down { -webkit-animation: bobRocket 1000ms ease-in-out; -moz-animation: bobRocket 1000ms ease-in-out; -ms-animation: bobRocket 1000ms ease-in-out; -o-animation: bobRocket 1000ms ease-in-out; animation: bobRocket 1000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper.float-down.fast-pan { -webkit-animation: bobRocket 500ms ease-in-out; -moz-animation: bobRocket 500ms ease-in-out; -ms-animation: bobRocket 500ms ease-in-out; -o-animation: bobRocket 500ms ease-in-out; animation: bobRocket 500ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper.bob-down { -webkit-animation: bobRocket 2000ms ease-in-out; -moz-animation: bobRocket 2000ms ease-in-out; -ms-animation: bobRocket 2000ms ease-in-out; -o-animation: bobRocket 2000ms ease-in-out; animation: bobRocket 2000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper.off-screen { left: -412px; top: 360px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper.rotate-away { -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); top: 565px; left: -450px; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .flame { position: relative; top: -158px; left: -178px; width: 70px; height: 210px; z-index: 0; opacity: 0.5; -webkit-transform: rotate(-100deg); -moz-transform: rotate(-100deg); -ms-transform: rotate(-100deg); -o-transform: rotate(-100deg); transform: rotate(-100deg); } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .flame.flicker { top: 51px; -webkit-animation: flickerFlame 200ms ease-in-out infinite; -moz-animation: flickerFlame 200ms ease-in-out infinite; -ms-animation: flickerFlame 200ms ease-in-out infinite; -o-animation: flickerFlame 200ms ease-in-out infinite; animation: flickerFlame 200ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship { top: -438px; left: -54px; padding: 66px 46px 0px 0px; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/spaceship.svg"); background-size: 412px 247px; width: 412px; height: 247px; -webkit-transition: filter 500ms ease-in-out; -moz-transition: filter 500ms ease-in-out; -ms-transition: filter 500ms ease-in-out; -o-transition: filter 500ms ease-in-out; transition: filter 500ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window { border-radius: 50%; margin-right: 8px; width: 42px; height: 42px; background-color: #11274c; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window.closed { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/window-closed.svg"); background-size: 42px 42px; width: 42px; height: 42px; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window .character[data-num="0"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/window2-0.svg"); background-size: 42px 42px; width: 42px; height: 42px; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window .character[data-num="1"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/window2-1.svg"); background-size: 42px 42px; width: 42px; height: 42px; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window .character[data-num="2"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/window2-2.svg"); background-size: 42px 42px; width: 42px; height: 42px; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window .character[data-num="3"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/window2-3.svg"); background-size: 42px 42px; width: 42px; height: 42px; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window .character[data-num="4"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/window2-4.svg"); background-size: 42px 42px; width: 42px; height: 42px; } .count-the-cosmos.number-sense-task-group .ns-main .rocket-wrapper .spaceship .window .character.empty { opacity: 0; -webkit-transition: opacity 300ms ease-in-out; -moz-transition: opacity 300ms ease-in-out; -ms-transition: opacity 300ms ease-in-out; -o-transition: opacity 300ms ease-in-out; transition: opacity 300ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main.transition-flight .stars { -webkit-transition: left 5000ms ease-in-out; -moz-transition: left 5000ms ease-in-out; -ms-transition: left 5000ms ease-in-out; -o-transition: left 5000ms ease-in-out; transition: left 5000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .ns-main.transition-flight .rocket-wrapper { top: 188px; left: 330px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut { position: absolute; z-index: 4; left: 50px; top: 73px; -webkit-transition: all 1000ms ease-in-out, opacity 1ms ease-in-out, filter 500ms ease-in-out, z-index 0ms ease-in-out 400ms; -moz-transition: all 1000ms ease-in-out, opacity 1ms ease-in-out, filter 500ms ease-in-out, z-index 0ms ease-in-out 400ms; -ms-transition: all 1000ms ease-in-out, opacity 1ms ease-in-out, filter 500ms ease-in-out, z-index 0ms ease-in-out 400ms; -o-transition: all 1000ms ease-in-out, opacity 1ms ease-in-out, filter 500ms ease-in-out, z-index 0ms ease-in-out 400ms; transition: all 1000ms ease-in-out, opacity 1ms ease-in-out, filter 500ms ease-in-out, z-index 0ms ease-in-out 400ms; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut[data-num="0"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/astronauts-sprite-0.svg"); background-size: 750px 200px; width: 750px; height: 200px; width: 160px; height: 150px; background-position: -250px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success { width: 120px; height: 170px; background-position: -500px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.final { width: 211px; height: 178px; background-position: 0px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut[data-num="1"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/astronauts-sprite-1.svg"); background-size: 750px 200px; width: 750px; height: 200px; width: 160px; height: 150px; background-position: -250px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success { width: 120px; height: 170px; background-position: -500px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.final { width: 211px; height: 178px; background-position: 0px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut[data-num="2"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/astronauts-sprite-2.svg"); background-size: 750px 200px; width: 750px; height: 200px; width: 160px; height: 150px; background-position: -250px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success { width: 120px; height: 170px; background-position: -500px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.final { width: 211px; height: 178px; background-position: 0px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut[data-num="3"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/astronauts-sprite-3.svg"); background-size: 750px 200px; width: 750px; height: 200px; width: 160px; height: 150px; background-position: -250px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success { width: 120px; height: 170px; background-position: -500px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.final { width: 211px; height: 178px; background-position: 0px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut[data-num="4"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/astronauts-sprite-4.svg"); background-size: 750px 200px; width: 750px; height: 200px; width: 160px; height: 150px; background-position: -250px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success { width: 120px; height: 170px; background-position: -500px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.final { width: 211px; height: 178px; background-position: 0px 0px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.inactive { opacity: 0; top: 440px; z-index: 3; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.floating { -webkit-animation: floatAstronaut 2500ms ease-in-out infinite; -moz-animation: floatAstronaut 2500ms ease-in-out infinite; -ms-animation: floatAstronaut 2500ms ease-in-out infinite; -o-animation: floatAstronaut 2500ms ease-in-out infinite; animation: floatAstronaut 2500ms ease-in-out infinite; } @-webkit-keyframes floatAstronaut { 0%, 100% { top: 68px; } 50% { top: 78px; } } @-moz-keyframes floatAstronaut { 0%, 100% { top: 68px; } 50% { top: 78px; } } @-o-keyframes floatAstronaut { 0%, 100% { top: 68px; } 50% { top: 78px; } } @keyframes floatAstronaut { 0%, 100% { top: 68px; } 50% { top: 78px; } } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.on-home-planet { top: 91px; -webkit-transform: rotate(-21deg); -moz-transform: rotate(-21deg); -ms-transform: rotate(-21deg); -o-transform: rotate(-21deg); transform: rotate(-21deg); } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.on-home-planet.count-up { left: 499px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.on-home-planet.count-down { left: 299px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success { top: 85px; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.count-up { left: 528px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.count-down { left: 328px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.final { top: 81px; } .count-the-cosmos.number-sense-task-group .ns-main .astronaut.success.finish { -webkit-transition: all 1000ms ease-in-out; -moz-transition: all 1000ms ease-in-out; -ms-transition: all 1000ms ease-in-out; -o-transition: all 1000ms ease-in-out; transition: all 1000ms ease-in-out; left: 428px; top: 148px; -webkit-animation: floatCenterPlanet 2000ms ease-in-out infinite; -moz-animation: floatCenterPlanet 2000ms ease-in-out infinite; -ms-animation: floatCenterPlanet 2000ms ease-in-out infinite; -o-animation: floatCenterPlanet 2000ms ease-in-out infinite; animation: floatCenterPlanet 2000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .blur-layer { position: absolute; width: 100%; height: 100%; background-color: #2b004d; opacity: 0; -webkit-transition: all 500ms ease-in-out, z-index 0ms ease-in-out; -moz-transition: all 500ms ease-in-out, z-index 0ms ease-in-out; -ms-transition: all 500ms ease-in-out, z-index 0ms ease-in-out; -o-transition: all 500ms ease-in-out, z-index 0ms ease-in-out; transition: all 500ms ease-in-out, z-index 0ms ease-in-out; } .count-the-cosmos.number-sense-task-group .number-sense-finish { display: none; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background-color: transparent; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet { position: absolute; top: 200px; -webkit-transition: top 1000ms ease-in-out; -moz-transition: top 1000ms ease-in-out; -ms-transition: top 1000ms ease-in-out; -o-transition: top 1000ms ease-in-out; transition: top 1000ms ease-in-out; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet[data-num="0"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/zearned-planet-0.svg"); background-size: 100px 190px; width: 100px; height: 190px; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet[data-num="1"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/zearned-planet-1.svg"); background-size: 100px 190px; width: 100px; height: 190px; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet[data-num="2"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/zearned-planet-2.svg"); background-size: 100px 190px; width: 100px; height: 190px; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet[data-num="3"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/zearned-planet-3.svg"); background-size: 100px 190px; width: 100px; height: 190px; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet[data-num="4"] { background-repeat: no-repeat; background-color: transparent; background-position: center; background-image: url("https://webassets.zearn.org/app_assets/number_sense/skip_counting/zearned-planet-4.svg"); background-size: 100px 190px; width: 100px; height: 190px; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet:nth-child(1) { left: 605px; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); transform: rotate(10deg); -webkit-animation: floatPlanets1 2000ms ease-in-out infinite; -moz-animation: floatPlanets1 2000ms ease-in-out infinite; -ms-animation: floatPlanets1 2000ms ease-in-out infinite; -o-animation: floatPlanets1 2000ms ease-in-out infinite; animation: floatPlanets1 2000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet:nth-child(2) { left: 255px; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-animation: floatPlanets1 2000ms ease-in-out infinite; -moz-animation: floatPlanets1 2000ms ease-in-out infinite; -ms-animation: floatPlanets1 2000ms ease-in-out infinite; -o-animation: floatPlanets1 2000ms ease-in-out infinite; animation: floatPlanets1 2000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet:nth-child(3) { left: 722px; -webkit-transform: rotate(20deg) scale(0.75); -moz-transform: rotate(20deg) scale(0.75); -ms-transform: rotate(20deg) scale(0.75); -o-transform: rotate(20deg) scale(0.75); transform: rotate(20deg) scale(0.75); -webkit-animation: floatPlanets2 2000ms ease-in-out infinite; -moz-animation: floatPlanets2 2000ms ease-in-out infinite; -ms-animation: floatPlanets2 2000ms ease-in-out infinite; -o-animation: floatPlanets2 2000ms ease-in-out infinite; animation: floatPlanets2 2000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet:nth-child(4) { left: 137px; -webkit-transform: rotate(-20deg) scale(0.75); -moz-transform: rotate(-20deg) scale(0.75); -ms-transform: rotate(-20deg) scale(0.75); -o-transform: rotate(-20deg) scale(0.75); transform: rotate(-20deg) scale(0.75); -webkit-animation: floatPlanets2 2000ms ease-in-out infinite; -moz-animation: floatPlanets2 2000ms ease-in-out infinite; -ms-animation: floatPlanets2 2000ms ease-in-out infinite; -o-animation: floatPlanets2 2000ms ease-in-out infinite; animation: floatPlanets2 2000ms ease-in-out infinite; } .count-the-cosmos.number-sense-task-group .number-sense-finish .zearned-planet.off-screen { top: 590px; } .count-the-cosmos.number-sense-task-group .number-sense-finish .fluency-complete-buttons { z-index: 2; display: block; position: relative; top: 180px; opacity: 0; } .count-the-cosmos.number-sense-task-group .number-sense-finish .fluency-complete-buttons.fade-in { opacity: 1; -webkit-transition: opacity 500ms ease-in-out; -moz-transition: opacity 500ms ease-in-out; -ms-transition: opacity 500ms ease-in-out; -o-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; } .count-the-cosmos.number-sense-task-group .number-sense-finish .fluency-complete-buttons .activity-complete-buttons-area { width: 450px; } .count-the-cosmos.number-sense-task-group .number-sense-finish .fluency-complete-buttons .activity-complete-buttons-area .acb-zearned-it { color: #ffff73; font-family: Oxygen, Verdana, Geneva, sans-serif; font-size: 90px; font-weight: lighter; position: relative; top: -284px; } .number-sense-activity.vue { margin: 0 auto; height: 590px; width: 1024px; } body.curriculum main { margin: 0; } body.pd-session { font-family: Oxygen, Verdana, Geneva, sans-serif; background-color: #ebebeb; } body.pd-session #top-space { height: 70px; margin-bottom: 8px; } @media only screen and (device-width: 768px) { body.pd-session #top-space { /* For iPad */ height: 0px; } } body.pd-session .navbar { position: fixed; width: 100%; height: 70px; background-color: #fff; font-family: Oxygen, Verdana, Geneva, sans-serif; -webkit-font-smoothing: subpixel-antialiased; z-index: 16000; -webkit-box-shadow: 1px 5px 6px -1px #b3b3b3; -moz-box-shadow: 1px 5px 6px -1px #b3b3b3; -ms-box-shadow: 1px 5px 6px -1px #b3b3b3; -o-box-shadow: 1px 5px 6px -1px #b3b3b3; box-shadow: 1px 5px 6px -1px #b3b3b3; } @media only screen and (device-width: 768px) { body.pd-session .navbar { /* For iPad */ position: relative; } } body.pd-session .navbar .back { display: inline-block; height: 70px; } body.pd-session .navbar .back .zearn-logo, body.pd-session .navbar .back .zearn-home { display: inline-block; position: relative; top: -2px; } body.pd-session .navbar .actions { position: absolute; right: 0px; top: 0px; z-index: 2; font-size: 0; } body.pd-session .navbar a { height: 70px; display: inline-block; margin-left: 8px; } body.pd-session .navbar a:hover .btn, body.pd-session .navbar a:active .btn { border: 2px solid #005c73; color: #005c73; } body.pd-session .navbar a:hover .btn.signout-btn, body.pd-session .navbar a:hover .btn.action-btn, body.pd-session .navbar a:active .btn.signout-btn, body.pd-session .navbar a:active .btn.action-btn { color: white; background-color: #005c73; } body.pd-session .navbar .btn { display: inline-block; height: 29px; line-height: 25px; border: 1px solid #007b94; color: #007b94; min-width: 104px; text-align: center; border-radius: 15px; font-size: 14px; font-weight: bold; vertical-align: middle; position: relative; top: -2px; } body.pd-session .navbar .btn.signout-btn, body.pd-session .navbar .btn.action-btn { background-color: #007b94; color: #fff; } body.pd-session main { margin-top: 90px; } body.pd-session #guided-practice { width: 960px; } body.pd-session #guided-practice .tasks-page { width: 960px; } body.pd-session #guided-practice .zearn-keypad { width: 960px; } body.pd-session .zearn-keypad { background-color: #f6f6f6; } body.pd-session .zearn-keypad .standard-button, body.pd-session .zearn-keypad .zearn-keypad-choice { border-radius: 25px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter { width: 125px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter .standard-button-inner > span::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter .standard-button-inner > span::before { content: "Continue"; font-weight: normal; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter .zearn-keypad-enter-text, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter .zearn-keypad-enter-text { display: none; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter .zearn-keypad-enter-icon, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter .zearn-keypad-enter-icon { transform: translatey(2px); } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back { position: relative; width: 125px; color: #007b94; border: 2px solid #007b94; background: none; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back::before { position: absolute; content: ""; width: 18px; height: 18px; left: 18px; background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -15px -53px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back::after, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back::after { content: "Back"; font-size: 18px; font-weight: normal; margin-left: 18px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back:hover, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back:hover { border-color: #005c73; color: #005c73; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back:hover::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back:hover::before { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -53px -53px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back.inactive, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back.inactive { color: #cccccc; border-color: #cccccc; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back.inactive::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back.inactive::before { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -91px -53px; } body.pd-session { font-family: Oxygen, Verdana, Geneva, sans-serif; background-color: #ebebeb; } body.pd-session #top-space { height: 70px; margin-bottom: 8px; } @media only screen and (device-width: 768px) { body.pd-session #top-space { /* For iPad */ height: 0px; } } body.pd-session .navbar { position: fixed; width: 100%; height: 70px; background-color: #fff; font-family: Oxygen, Verdana, Geneva, sans-serif; -webkit-font-smoothing: subpixel-antialiased; z-index: 16000; -webkit-box-shadow: 1px 5px 6px -1px #b3b3b3; -moz-box-shadow: 1px 5px 6px -1px #b3b3b3; -ms-box-shadow: 1px 5px 6px -1px #b3b3b3; -o-box-shadow: 1px 5px 6px -1px #b3b3b3; box-shadow: 1px 5px 6px -1px #b3b3b3; } @media only screen and (device-width: 768px) { body.pd-session .navbar { /* For iPad */ position: relative; } } body.pd-session .navbar .back { display: inline-block; height: 70px; } body.pd-session .navbar .back .zearn-logo, body.pd-session .navbar .back .zearn-home { display: inline-block; position: relative; top: -2px; } body.pd-session .navbar .actions { position: absolute; right: 0px; top: 0px; z-index: 2; font-size: 0; } body.pd-session .navbar a { height: 70px; display: inline-block; margin-left: 8px; } body.pd-session .navbar a:hover .btn, body.pd-session .navbar a:active .btn { border: 2px solid #005c73; color: #005c73; } body.pd-session .navbar a:hover .btn.signout-btn, body.pd-session .navbar a:hover .btn.action-btn, body.pd-session .navbar a:active .btn.signout-btn, body.pd-session .navbar a:active .btn.action-btn { color: white; background-color: #005c73; } body.pd-session .navbar .btn { display: inline-block; height: 29px; line-height: 25px; border: 1px solid #007b94; color: #007b94; min-width: 104px; text-align: center; border-radius: 15px; font-size: 14px; font-weight: bold; vertical-align: middle; position: relative; top: -2px; } body.pd-session .navbar .btn.signout-btn, body.pd-session .navbar .btn.action-btn { background-color: #007b94; color: #fff; } body.pd-session main { margin-top: 90px; } body.pd-session #guided-practice { width: 960px; } body.pd-session #guided-practice .tasks-page { width: 960px; } body.pd-session #guided-practice .zearn-keypad { width: 960px; } body.pd-session .zearn-keypad { background-color: #f6f6f6; } body.pd-session .zearn-keypad .standard-button, body.pd-session .zearn-keypad .zearn-keypad-choice { border-radius: 25px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter { width: 125px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter .standard-button-inner > span::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter .standard-button-inner > span::before { content: "Continue"; font-weight: normal; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter .zearn-keypad-enter-text, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter .zearn-keypad-enter-text { display: none; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-enter .zearn-keypad-enter-icon, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-enter .zearn-keypad-enter-icon { transform: translatey(2px); } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back { position: relative; width: 125px; color: #007b94; border: 2px solid #007b94; background: none; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back::before { position: absolute; content: ""; width: 18px; height: 18px; left: 18px; background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -15px -53px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back::after, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back::after { content: "Back"; font-size: 18px; font-weight: normal; margin-left: 18px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back:hover, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back:hover { border-color: #005c73; color: #005c73; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back:hover::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back:hover::before { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -53px -53px; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back.inactive, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back.inactive { color: #cccccc; border-color: #cccccc; } body.pd-session .zearn-keypad .standard-button.zearn-keypad-back.inactive::before, body.pd-session .zearn-keypad .zearn-keypad-choice.zearn-keypad-back.inactive::before { background-repeat: no-repeat; background-image: url("https://webassets.zearn.org/app_assets/keypad/keypad_buttons.svg"); background-size: 124px 120px; background-position: -91px -53px; } body.pd-session .pages-image-container { width: 53%; height: 100%; } body.pd-session .pages-image-container img { max-width: 100%; max-height: 100%; } body.pd-session .teacher-materials .teacher-materials-note { font-size: 14px; font-weight: lighter; color: white; margin-top: 60px; } body.pd-session .teacher-materials .teacher-materials-note a { font-weight: bold; color: #007b94; } body.pd-session .teacher-materials .teacher-materials-note a:hover { color: #005c73; } body.pd-session .teacher-materials .directions { min-height: 355px; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } body.pd-session .teacher-materials .directions .directions-content { width: 100%; } body.pd-session .directions { position: relative; border-top: 1px solid #303b40; font-size: 25px; line-height: 33px; margin-top: 15px; padding-top: 15px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-flex-grow: 1; flex-grow: 1; } body.pd-session .directions.wide-padding { margin-top: 20px; padding-top: 35px; } body.pd-session .directions.large { padding-bottom: 15px; font-weight: lighter; font-size: 36px; line-height: 40px; min-height: 300px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } body.pd-session .directions.small { font-size: 25px; } body.pd-session .task-container { min-height: 585px; width: 960px; } body.pd-session .task-container.professional-development-directions .directions-container { width: 45%; height: 100%; font-family: Oxygen, Verdana, Geneva, sans-serif; text-align: left; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } body.pd-session .task-container.professional-development-directions .directions-header { margin-top: 40px; font-size: 25px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } body.pd-session .task-container.professional-development-directions .directions-header .header-text { font-weight: bold; } body.pd-session .task-container.professional-development-directions .directions-header .top-aligned { position: relative; top: -8px; } body.pd-session .task-container.professional-development-directions .directions-header { color: #fad232; font-size: 20px; text-transform: uppercase; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } body.pd-session .task-container.professional-development-directions .directions-header .clock { background-image: url("https://webassets.zearn.org/app_assets/professional_development/clock_yellow1.svg"); width: 50px; height: 50px; } body.pd-session .task-container.professional-development-directions .directions-header .notebook { background-image: url("https://webassets.zearn.org/app_assets/professional_development/notebook_yellow1.svg"); margin-left: 35px; height: 45px; width: 45px; } body.pd-session .task-container.professional-development-directions .directions-header .pages-to-read, body.pd-session .task-container.professional-development-directions .directions-header .clock-time { padding-left: 10px; } body.pd-session .task-container.professional-development-directions .directions-container { padding-right: 40px; } body.professional_development { font-family: Oxygen, Verdana, Geneva, sans-serif; background-color: #ebebeb; } body.professional_development .icon-text-pair { display: flex; } body.professional_development .icon-text-pair .pair-icon { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; } body.professional_development .icon-text-pair .pair-text { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding-left: 20px; } body.professional_development .icon-text-pair .pair-text p { margin: 0; } body.professional_development .icon-text-pair .pair-text p:not(.label) { font-size: 18px; font-weight: 100; color: #303b40; } body.professional_development .instruction-item { margin-top: 20px; line-height: 21px; } .classroom_presentations { font-family: "Source Sans Pro", Verdana, Geneva, sans-serif; background-color: #ebebeb; } .classroom_presentations #top-space { height: 46px; margin-bottom: 8px; } @media only screen and (device-width: 768px) { .classroom_presentations #top-space { /* For iPad */ height: 0px; } } .classroom_presentations .navbar { position: fixed; width: 100%; height: 46px; background-color: #fff; font-family: Oxygen, Verdana, Geneva, sans-serif; -webkit-font-smoothing: subpixel-antialiased; z-index: 16000; -webkit-box-shadow: 1px 5px 6px -1px #b3b3b3; -moz-box-shadow: 1px 5px 6px -1px #b3b3b3; -ms-box-shadow: 1px 5px 6px -1px #b3b3b3; -o-box-shadow: 1px 5px 6px -1px #b3b3b3; box-shadow: 1px 5px 6px -1px #b3b3b3; } @media only screen and (device-width: 768px) { .classroom_presentations .navbar { /* For iPad */ position: relative; } } .classroom_presentations .navbar .back { display: inline-block; height: 46px; } .classroom_presentations .navbar .back .zearn-logo, .classroom_presentations .navbar .back .zearn-home { display: inline-block; position: relative; top: -2px; } .classroom_presentations .navbar .actions { position: absolute; right: 0px; top: 0px; z-index: 2; font-size: 0; } .classroom_presentations .navbar a { height: 46px; display: inline-block; margin-left: 8px; } .classroom_presentations .navbar a:hover .btn, .classroom_presentations .navbar a:active .btn { border: 2px solid #005c73; color: #005c73; } .classroom_presentations .navbar a:hover .btn.signout-btn, .classroom_presentations .navbar a:hover .btn.action-btn, .classroom_presentations .navbar a:active .btn.signout-btn, .classroom_presentations .navbar a:active .btn.action-btn { color: white; background-color: #005c73; } .classroom_presentations .navbar .btn { display: inline-block; height: 29px; line-height: 25px; border: 1px solid #007b94; color: #007b94; min-width: 104px; text-align: center; border-radius: 15px; font-size: 14px; font-weight: bold; vertical-align: middle; position: relative; top: -2px; } .classroom_presentations .navbar .btn.signout-btn, .classroom_presentations .navbar .btn.action-btn { background-color: #007b94; color: #fff; } .classroom_presentations .navbar-cp { line-height: 46px; } .classroom_presentations .navbar-cp .back-links { position: absolute; width: 136px; height: 46px; left: 1px; top: 0px; z-index: 3; } .classroom_presentations .navbar-cp .back { width: 64px; height: 100%; padding: 0 14px; margin: 0; } .classroom_presentations .navbar-cp .back:not(:last-of-type) { border-right: 1px solid #cccccc; } .classroom_presentations .navbar-cp .back .zearn-logo { width: 36px; height: 36px; background-image: url("https://webassets.zearn.org/app_assets/general/logos/zearn-icon.svg"); background-size: 32px 32px; background-repeat: no-repeat; vertical-align: middle; } .classroom_presentations .navbar-cp .back .zearn-home { width: 36px; height: 36px; background-image: url("https://webassets.zearn.org/app_assets/general/logos/zearn-home-icons2.svg"); background-size: cover; vertical-align: middle; background-position: left; } .classroom_presentations .navbar-cp .back:hover .zearn-home { background-position: center; } .classroom_presentations .navbar-cp .back:active .zearn-home { background-position: right; } .classroom_presentations .navbar-cp .header-content { width: 1024px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; } .classroom_presentations .navbar-cp .title { position: absolute; left: 0; top: 0; width: 100%; white-space: nowrap; text-align: center; color: #303b40; font-family: "Source Sans Pro", Verdana, Geneva, sans-serif; font-size: 22px; z-index: 1; } .classroom_presentations .navbar-cp .title .mission.grade-k, .classroom_presentations .navbar-cp .title .mission.grade-0 { color: #136fcb; } .classroom_presentations .navbar-cp .title .mission.grade-1 { color: #f75e00; } .classroom_presentations .navbar-cp .title .mission.grade-2 { color: #0497e7; } .classroom_presentations .navbar-cp .title .mission.grade-3 { color: #a96dd2; } .classroom_presentations .navbar-cp .title .mission.grade-4 { color: #ff4d76; } .classroom_presentations .navbar-cp .title .mission.grade-5 { color: #0fa566; } .classroom_presentations .navbar-cp .title .mission.grade-6 { color: #8d55ec; } .classroom_presentations .navbar-cp .title .mission.grade-7 { color: #d53965; } .classroom_presentations .navbar-cp .title .mission.grade-8 { color: #899400; } .classroom_presentations .navbar-cp .title .mission, .classroom_presentations .navbar-cp .title .lesson { font-weight: 600; } .classroom_presentations main { margin: 20px auto; width: 1024px; } .classroom_presentations .presentation-box { min-height: 585px; }