/*<style>*/
body.NoTitleBar #TitleBar{display: none;}
body.NoTitleBar #GameBox {top: 0px; height: 100%; width: 100%;}
small {font-size: 36pt;}
.EquationTable {text-align: left;}
.CenterAlign {text-align: center;}
.LeftAlign, tr.LeftAlign td, td.LeftAlign {text-align: left;}
.RightAlign {text-align: right;}
.Input {position: relative; display: inline-block; background-color: white; vertical-align: middle; border: solid 2px black;}
.Activity .PictureVariable input[type=text], .Activity input[type=text].Answer, .Activity .Input, .Activity select.Answer {border-radius: 10px; text-align: center; outline: none; padding: 0px; box-sizing: content-box; vertical-align: middle; line-height: normal !important;}
.WordIcon {width: 60px; height: 60px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center center; vertical-align: middle; box-sizing: border-box; margin: 0px 20px;}

#SelectionBox {position: absolute; top: 0px; left: 0px; width: 0px; height: 0px; background: rgba(0, 144, 255, 0.5); border: solid 1px rgba(0, 144, 255,0.8); box-sizing: border-box; z-index: 10000;}

.Activity {--TextFontSize: 46pt; --AnswerInputWidth: 110px; --AnswerInputHeight: 90px; --EmojiWidth: 60px; --EmojiHeight: var(--EmojiWidth); --EmojiFontSize: 28pt; --PictureVariableAndInputFontFamily: anton, impact, NotoColorEmoji, "Segoe UI Emoji", AppleColorEmoji, sans-serif;}
.Activity .Answers {--EmojiWidth: 70px;}
.Activity .ScoreStatus, .Activity .ShieldStatus, .Activity #Player {display: none;}
.Activity #Background1 {display: block; background-image: url('graphics/titles/mathematicsactivity.jpg');}
.Activity .CenterContainer {display: inline-table; height: 442px;}
.Activity .CenterContainerCell {display: table-cell; vertical-align: middle;}
.Activity .DistributedHalfWidthContainer {display: inline-table; width: 76%; box-sizing: border-box; table-layout: fixed;}
.Activity .DistributedHalfWidthContainer td {border: none; width: 50%; text-align: right; vertical-align: middle;}
.Activity .DistributedQuarterContainer {display: inline-table; margin-top: -35px; width: 88%; box-sizing: border-box; table-layout: fixed; border-spacing: 10px;}
.Activity .DistributedQuarterContainer td {position: relative; border: solid 1px white; border-radius: 10px; background-color: rgba(255, 255, 255, 0.5); font-size: 20pt !important; width: 50%; height: 180px; text-align: center; vertical-align: middle;}
.Activity .DistributedQuarterContainer td strong {position: absolute; top: 6px; left: 6px; border: solid 2px black; color: black; border-radius: 30px; width: 36px; height: 36px; text-align: center; padding-top: 4px; text-align: center; box-sizing: border-box;}

.Activity .WorldContent {display: block; text-align: center; position: absolute; padding: 0px; top: 0px; left: 0px; width: 100%; height: 100%; background: transparent; box-sizing: border-box;}
.Activity .WorldFrame {z-index: -1000; display: block; text-align: center; position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); padding: 20px; box-sizing: border-box; background-color: rgba(255,255,255,0.8); border-radius: 20px; background-size: cover; background-position: center;}
    .WorldContent.Scene .ProblemText {background-color: rgba(255,255,255,0.9); border: solid 1px black; border-radius: 20px; margin: 15px; padding: 15px; box-sizing: border-box; width: calc(100% - 30px);}
    .WorldContent.Scene .ProblemNumber {z-index: 2;}
    .WorldContent.Scene .WorldFrame {left: -0.5%; top: -0.5%; width: 101%; height: 101%; xfilter: blur(1px); background-size: cover; background-position: center bottom; padding: 20px; box-sizing: border-box; border-radius: 0px;}
    .WorldContent.Scene .CenterContainerCell table, .SimpleEquation {xbackground: rgba(0,0,0,0.4); border-radius: 10px; text-shadow: 0px 0px 3px rgba(255,255,255,0.5), 0px 0px 4px rgba(255,255,255,0.3);}
    .WorldContent.Scene .Answers {color: white;}
    .WorldContent.Scene .AnswerText {filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.5)) drop-shadow(0px 0px 4px rgba(0,0,0,0.2));}


    .Chunk .Scene .ProblemText, .Chunk .Scene .Answers {opacity: 0;}
    .Chunk .Scene.AnimateIn .ProblemText, .Chunk .Scene.AnimateIn .Answers {animation: FlyDown 0.8s forwards; animation-delay: 0.4s;}

    .Chunk .Scene .ProblemNumber {transform: scale(0);}
    .Chunk .Scene.AnimateIn .ProblemNumber {animation: PopIn 0.2s forwards; animation-delay: 0.6s;}


.Activity .Problems {position: absolute; top: 120px; width: 100%; box-sizing: border-box; height: 484px; padding-left: 15px; padding-right: 15px; font-size: var(--TextFontSize);}
.Activity .Problems td {font-size: var(--TextFontSize);}
.Activity .Problems.CutOffBottomAnswer, .Activity .Problems.CutOffBottomAnswer .CenterContainer {height: 390px;}
.Activity .ProblemNumber {position: absolute; top: 5px; left: 5px; border: solid 2px black; border-radius: 50px; background: blue; color: white; font-size: 18pt; min-width: 32px; height: 32px; padding: 2px 4px; box-sizing: border-box;}
.Activity .ProblemContent {z-index: 1; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%; overflow: hidden;}
.Activity .ProblemText {z-index: 1; position: absolute; display: block; top: 0px; left: 0px; width: 100%; padding: 30px; box-sizing: border-box;}
.Activity .ProblemText small {font-size: 80%;}
.Activity .SpeakButton {display: inline-block; margin: 0px 10px; vertical-align: middle; cursor: pointer; border: solid 3px white; border-radius: 50px; width: 28px; height: 28px; background-image: url('graphics/icons/say.png');}

.Activity input[type=text].Answer {width: var(--AnswerInputWidth); height: var(--AnswerInputHeight);}
.Activity .Answer.SuperWide, .CenterContainer.SmallText .Answer.SuperWide {--AnswerInputWidth: 500px;}
.Activity .Answer.ExtremelyWide, .CenterContainer.SmallText .Answer.ExtremelyWide {--AnswerInputWidth: 250px;}
.Activity .Answer.VeryWide, .CenterContainer.SmallText .Answer.VeryWide {--AnswerInputWidth: 160px;}
.Activity .Answer.Wide, .CenterContainer.SmallText .Answer.Wide {--AnswerInputWidth: 140px;}
.Activity .Narrow, .Activity .Answer.Narrow, .CenterContainer.LargeText .Answer.Narrow {--AnswerInputWidth: 88px; display: inline-block;  text-align: center; margin: 3px 0px;}
.Activity .VeryNarrow, .Activity .Answer.VeryNarrow, .CenterContainer.LargeText .Answer.VeryNarrow {--AnswerInputWidth: 68px; display: inline-block; text-align: center; margin: 3px 0px;}
.Activity .ExtremelyNarrow, .Activity .Answer.ExtremelyNarrow, .CenterContainer.LargeText .Answer.ExtremelyNarrow {--AnswerInputWidth: 48px; display: inline-block; text-align: center; margin: 3px 0px;}
.Activity .SuperNarrow, .Activity .Answer.SuperNarrow, .CenterContainer.LargeText .Answer.SuperNarrow {--AnswerInputWidth: 32px; display: inline-block; text-align: center; margin: 3px 0px;}

.LargeText .Answer.Wide {--AnswerInputWidth: 160px;}
.SmallText .Answer {--AnswerInputWidth: 70px;}

.Activity .LargeText {--TextFontSize: 56pt; --AnswerInputHeight: 110px;}
.Activity {--TextFontSize: 46pt;}
.Activity .MediumSmallText {--TextFontSize: 42pt; font-size: var(--TextFontSize); --AnswerInputHeight: 90px;}
.Activity .SmallText {--TextFontSize: 32pt; font-size: var(--TextFontSize); --AnswerInputHeight: 70px;}
.Activity .QuiteSmallText {--TextFontSize: 26pt; font-size: var(--TextFontSize); --AnswerInputHeight: 60px;}
.Activity .VerySmallText {--TextFontSize: 16pt; font-size: var(--TextFontSize); --AnswerInputHeight: 50px;}
.Activity .ExtremelySmallText {--TextFontSize: 12pt; font-size: var(--TextFontSize); --AnswerInputHeight: 50px;}
.Activity .SmallTableHeaderText {font-size: 14pt;}

.ProblemPlainText .Answer {margin-top: 2px; margin-bottom: 2px;}
.PaddedBottom {padding-bottom: 10px;}
.Locked {pointer-events: none;}


.Activity .ProblemText, .Activity .PictureVariable, input[type=text], .Activity input[type=text].Answer, .Activity select.Answer {font-size: var(--TextFontSize); font-family: var(--PictureVariableAndInputFontFamily); line-height: normal;}
    x.iOS .Activity .Problems .Answer {height: calc(14px + var(--AnswerInputHeight));}
.Activity .ProblemText, .Activity .ProblemPlainMiddleText, .Activity .Answers {display: block; text-align: center; margin: auto;}
    .Activity .ProblemText, .Activity .ProblemPlainMiddleText, .Activity .Answers, .ProblemPlainText {text-align: center; font-size: 24pt; font-family: QuicksandAlternateBlock, QuicksandAlternate, quicksand, roboto;}
    .Activity .ProblemPlainMiddleText {padding: 30px 0px; box-sizing: border-box;}

.Activity input.Answer.LargeShapeDropValueTarget {width: 200px; height: 200px;}
.Activity input.Answer.DropValueTarget {cursor: default; color: transparent; user-select: none; font-size: 0px;}
.Activity input.Answer.DropValueTarget.VerticalCenterDropValueTarget {position: relative;}


.Draggable {position: absolute; transition: transform 0.25s; will-change: transform; cursor: grab;}
    .Dragging {transform: scale(1.1) !important; animation-fill-mode: none !important; cursor: grabbing;}
    .Dragging.NoGrow {transform: none !important;}
        .TensFrame.Dragging {transform: scale(1) !important; opacity: 1 !important;}
    .DraggableCard {position: absolute; line-height: 1.3; width: 160px; height: 104px; background: gold; border: solid 2px black; border-radius: 10px; box-sizing: border-box; font-size: 56pt;}
    .DraggableCard.VerySmallText {padding-top: 24px;}
    .DraggableCard.SmallText {padding-top: 24px;}

    .Activity .Answers, .Activity .Answers.Bottom {z-index: 4; position: absolute; bottom: 20px; left: 106px; width: calc(100% - 212px); box-sizing: border-box;}
    .Activity .CheckAnswerButton {display: inline-block; vertical-align: middle; background-color: transparent; background-image: url('graphics/icons/check.png'); position: static; width: 50px; height: 50px; border-radius: 30px;}
    .Answer {border: solid 2px black; margin-right: 10px;}
        input[type=text].Correct, .CheckAnswerButton.Correct, .DraggableCard.Correct, .DraggableCardTarget.Correct, .Activity:not(.AssessmentActivity) .MultiChoiceAnswer.Correct, .Activity:not(.AssessmentActivity) select.Correct {background-color: limegreen;}
        .Incorrect:not(.NoAutoCheck), .CheckAnswerButton.Incorrect, .DraggableCard.Incorrect:not(.NoAutoCheck), .DraggableCardTarget.Incorrect:not(.NoAutoCheck), .Activity:not(.AssessmentActivity) .MultiChoiceAnswer.Incorrect, .Activity:not(.AssessmentActivity) .MultiChoiceAnswer:not(.Correct).Selected {background-color: red;}
    /* #AnswerX {--AnswerInputWidth: 80px; --EmojiFontSize: 56pt;} */

.Activity .ProblemNavigationButtonsBox {z-index: 1000; position: absolute; left: 0px; bottom: 10px; width: 100%; text-align: center; box-sizing: border-box;}
    .ProblemNavigationButton {position: absolute; width: 36px; height: 36px;}
    .ProblemNavigationButton, .Activity .SpeakButton {background-size: contain; background-position: center; cursor: pointer; text-shadow: none; filter: drop-shadow(0px 0px 1px rgba(0,0,0,0.3)) drop-shadow(0px 0px 10px rgba(0,0,0,0.25))}
    .ProblemNavigationButton:active, .Activity .SpeakButton:active {filter: brightness(0.95) drop-shadow(0px 0px 1px rgba(0,0,0,0.3)) drop-shadow(0px 0px 10px rgba(0,0,0,0.25));}
    .PreviousProblemButton {background-image: url('graphics/icons/previous.png'); left: 30px; bottom: 20px;}
    .ResetProblemButton {background-image: url('graphics/icons/reload.png'); left: 80px; bottom: 20px;}
    .ToggleSceneButton {background-image: url('graphics/icons/scene.png'); right: 80px; bottom: 20px;}
    .ChooseActorsButton {background-image: url('graphics/icons/actors.png'); right: 80px; bottom: 20px;}
    .NextProblemButton {background-image: url('graphics/icons/next.png'); right: 30px; bottom: 20px;}
    .CanvasColorButtons {position: absolute; left: 180px; bottom: 20px;}
    .CanvasColorButton {bottom: 0px; border-radius: 50px;}
        .CanvasToggleHighlighterButton {bottom: 20px; left: 130px; background-image: url('graphics/icons/highlighter.png');}
        .CanvasRedColorButton {background-image: url('graphics/icons/pencolor.png'); left: 0px; background-color: rgba(255,0,0,0.5);}
        .CanvasBlueColorButton {background-image: url('graphics/icons/pencolor.png'); left: 40px; background-color: rgba(0,0,255,0.5);}
        .CanvasGreenColorButton {background-image: url('graphics/icons/pencolor.png'); left: 80px; background-color: rgba(0,255,0,0.5);}
        .CanvasYellowColorButton {background-image: url('graphics/icons/pencolor.png'); left: 120px; background-color: rgba(255,255,0,0.5);}
        .CanvasBlackColorButton {background-image: url('graphics/icons/pencolor.png'); left: 160px; background-color: rgba(0,0,0,0.5);}
        .CanvasWhiteColorButton {background-image: url('graphics/icons/pencolor.png'); left: 200px; background-color: rgba(255,255,255,0.5);}
        .CanvasEraseButton {background-image: url('graphics/icons/erase.png'); left: 240px;}
        .CanvasDeleteButton {background-image: url('graphics/icons/delete.png'); left: 290px;}
    .ProblemNavigationButton.Disabled {opacity: 0.2;}

.Answer.DraggableCardTarget {margin-right: 0px; top: 100px; width: 160px !important; height: 104px !important; box-sizing: border-box !important;}
.AssessmentActivity .DraggableCardTarget {margin-right: 10px;}
.Answer.DraggableCardTarget.Correct, .Answer.DraggableCardTarget.NoAutoCheck.Incorrect {xbackground-color: gold;}
.DraggableCard.NoAutoCheck.Correct, .DraggableCard.NoAutoCheck.Incorrect {xbackground-color: transparent; xborder: none;}
.DraggableCard .Shape, .DraggableCardTarget .Shape {width: 100%; height: 100%; pointer-events: none; background-size: 60% auto;}
.DraggableCardTarget.SquareDraggableCardTarget, .DraggableCard.SquareDraggableCard {width: 104px !important;}
.Answer.DraggableCardTarget.SquareDraggableCardTarget.DropValueTarget, .Answer.DraggableCard.SquareDraggableCard {width: 104px !important;}


.Chunk .Scene .Container, .Chunk .Scene .EquationTable, .Chunk .Scene .CenterContainer  {transform: scale(2); opacity: 0;}
        .Chunk .Scene.AnimateIn .Container, .Chunk .Scene.AnimateIn .EquationTable, .Chunk .Scene.AnimateIn .CenterContainer  {animation: HugeZoomOut 0.5s forwards; animation-delay: 0.2s;}

.GridTable, .SmallGridTable, .VerySmallGridTable {border-collapse: collapse; display: inline-block;}
.GridTable.Padded td, .SmallGridTable.Padded td, .GridTable.Padded th, .SmallGridTable.Padded th {padding: 7px;}
.SmallGridTable tr:first-child, .VerySmallGridTable tr:first-child {background-color: #abd5ff;}
.GridTable td, .SmallGridTable td, .VerySmallGridTable td {border: solid 1px black; text-align: center; vertical-align: middle;}
.SmallGridTable td {width: 106px; height: 106px;}
.VerySmallGridTable td {width: 106px; height: 66px;}
.SmallGridTable .Answer, .VerySmallGridTable td {margin-right: 4px; margin-left: 4px;}

.Problems, .AlgebraTable, input[type=text] {font-family: var(--PictureVariableAndInputFontFamily); vertical-align: middle; -webkit-text-size-adjust: none;}

.AssessmentActivity img {object-fit: contain;}

.AssessmentActivity {}
.AssessmentActivity .CenterContainer, .CenterContainer.LargeText, .CenterContainer.LargeText {display: inline-table; height: 352px; font-size: var(--TextFontSize);}
/* .AssessmentActivity .Answer, .CenterContainer.LargeText .Answer, .CenterContainer.LargeText .Answer {--AnswerInputWidth: 160px; --AnswerInputHeight: 100px; font-size: 56pt; --EmojiFontSize: 56pt;} */

.AssessmentActivity .LearningIntention {display: none;}

    .MultiChoiceGridTableCell {padding: 4px 0; line-height: 0.8;}
        .MultiChoiceGridTableCell.SmallText .MultiChoiceAnswerCell {--TextFontSize: 12pt; font-size: var(--TextFontSize); padding: 8px;}
        .MultiChoiceGridTableCell.SmallText .MultiChoiceAnswer {width: 180px;}
    .MultiChoiceAnswer {display: inline-block; box-sizing: border-box; border: solid 2px black; border-radius: 20px; background-color: white; width: 200px; height: 72px; cursor: pointer; margin: 0px 4px; transition: transform 0.1s;}
    .MultiChoiceAnswer:hover {box-shadow: 1px 1px 4px #00000057; transform: scale(1.01); transform-origin: center center;}
    .MultiChoiceAnswer .MultiChoiceAnswerTable {display: table; width: 100%; height: 100%; border: none;}
    .MultiChoiceAnswer .MultiChoiceAnswerCell {display: table-cell; vertical-align: middle; padding: 10px; font-size: 16pt;}
    .AssessmentActivity:not(.MathematicsAssessmentReflection):not(.ReadingAssessmentReflection):not(.WritingAssessmentReflection):not(.GeneralAssessmentReflection) .MultiChoiceAnswer.Selected {background-color: gold;}
    .MultiChoiceAnswer.Tall, .Tall .MultiChoiceAnswer {height: 140px;}


@keyframes FlyDown {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes PopIn {
    0% {transform: scale(0);}
    80% {transform: scale(1.2);}
    100% {transform: scale(1);}
}

@keyframes HugeZoomOut {
    0% {transform: scale(2); opacity: 0;}
    70% {transform: scale(0.98); opacity: 1;}
    80% {transform: scale(1.02); opacity: 1;}
    90% {transform: scale(0.99); opacity: 1;}
    100% {transform: scale(1); opacity: 1;}
}


.Actor {pointer-events: none; position: absolute; width: 140px; height: 245px; background-size: contain; background-repeat: no-repeat; z-index: 500;}
.MathematicsActivity .Actor {z-index: -1;}
.Body {position: relative; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat}
.Head, .HeadSkin, .Helmet, .Face, .FaceItem, .Eyes, .Mouth, .Hair, .Chest, .ChestSkin, .Limbs, .Leg, .Thigh, .Calf, .Arm, .ArmSkin, .ArmSleeve, .Singlet, .Pants, .Shorts, .Shorts2, .Skirt, .Skirt2, .Skirt3, .Dress1, .Dress2, .Dress3, .TShirt, .Pants {will-change: transform, animation; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat;}
.Head {animation: RockHead 5s linear infinite;}
.CustomActor .Hair, .CustomActor .Face, .CustomActor .Eyes, .CustomActor .Mouth, .CustomActor .FaceItem {display: none !important;}
.Girl .Head {margin-left: -2px;}
.CustomActor.Girl .Head {margin-left: 0px;}
.CustomActor.Boy .Head {margin-top: -4px;}
.CustomActor .Head, .CustomActor .HeadSkin {filter: none !important; top: 2px;}
.CustomActor .ChestSkin {background-image: url('graphics/actors/large/custom/chest.png')}
.Actor.NoAnimation {pointer-events: none;}
.NoAnimation .Head {animation: none !important;}
.PhotoHeadActor .Head {z-index: 1000;}
.PhotoHeadActor .HeadSkin {background-position: 48% top; background-size: 80px 80px;}

.Clothes {display: block;}
.Arm {animation: RockArm 5s linear infinite;}

.Space .Helmet, .SunkenTreasure .Helmet, .AlienPlanet1 .Helmet, .AlienPlanet2 .Helmet, .AlienPlanet3 .Helmet, .AlienPlanet4 .Helmet, .AlienPlanet5 .Helmet, .AlienPlanet6 .Helmet {background-image: url('graphics/actors/large/clothes/bubble.png'); margin-top: -10px;}
.Clothes.TShirt {background-image: url('graphics/actors/large/clothes/boytshirt.png');}
.Girl .Clothes.TShirt {background-image: url('graphics/actors/large/clothes/girltshirt.png');}
.Clothes.Singlet {background-image: url('graphics/actors/large/clothes/singlet.png');}
.Clothes.Pants {background-image: url('graphics/actors/large/clothes/pants.png');}
.Clothes.Shorts {background-image: url('graphics/actors/large/clothes/shorts.png');}
.Clothes.Shorts2 {background-image: url('graphics/actors/large/clothes/shorts2.png');}
.Clothes.Skirt {background-image: url('graphics/actors/large/clothes/skirt.png'), url('graphics/actors/large/clothes/shorts2.png');}
.Clothes.Skirt2 {background-image: url('graphics/actors/large/clothes/skirt2.png'), url('graphics/actors/large/clothes/shorts2.png');}
.ChestSkin {background-image: url('graphics/actors/large/chest/chest.png');}
.LeftLeg {}
    .LeftThighSkin {background-image: url('graphics/actors/large/legs/leftthigh.png');}
    .LeftCalfSkin {}
    /* .LeftThighPant {background-image: url('graphics/actors/large/legs/leftthighpant.png');} */
    .LeftCalfPant {}
.RightLeg {}
    .RightThighSkin {background-image: url('graphics/actors/large/legs/rightthigh.png');}
    .RightCalfSkin {}
    /* .RightThighPant {background-image: url('graphics/actors/large/legs/rightthighpant.png');} */
    .RightCalfPant {}
.LeftArm {}
    .LeftArmSkin {background-image: url('graphics/actors/large/arms/leftarm.png');}
    .LeftArmSleeve {}
.RightArm {animation-direction: reverse;}
    .RightArmSkin {background-image: url('graphics/actors/large/arms/rightarm.png');}
    .RightArmSleeve {}
.Face {background-image: var(--background-image); --background-image: url('graphics/actors/large/face/blackeyes.png'); animation: BlinkingEyes 5s step-end infinite;}
    .BlueEyes {--background-image: url('graphics/actors/large/face/blueeyes.png');}
    .GreenEyes {--background-image: url('graphics/actors/large/face/greeneyes.png');}
    .HazelEyes {--background-image: url('graphics/actors/large/face/hazeleyes.png');}
    .BrownEyes {--background-image: url('graphics/actors/large/face/browneyes.png');}
    .DarkBrownEyes {--background-image: url('graphics/actors/large/face/darkbrowneyes.png');}
.FaceItem {display: none; --background-image: none; background-image: var(--background-image);}
.FaceItem.Glasses {display: block; --background-image: url('graphics/actors/large/face/glasses.png');}
.FaceItem.GlassesSquare {display: block; --background-image: url('graphics/actors/large/face/glassessquare.png');}

.Actor {will-change: animation;}
.Actor.Walking {--animation-duration: 1.6s; --animation-delay: 0.5; z-index: 9000; display: none;}
.Actor.Walking .Clothes {display: none;}
.Actor.Walking .Head {animation: HeadWalking var(--animation-duration) linear infinite; transform-origin: center 25%; animation-delay: var(--animation-delay);}
.Actor.Walking.PhotoHeadActor .Head .HeadSkin {transform: rotateY(15deg) skewY(5deg);}
.Actor.Walking .LeftArm {transform: rotateZ(-30deg); left: 6px; animation: ArmWalking var(--animation-duration) linear infinite; transform-origin: center 33%; animation-delay: var(--animation-delay);}
.Actor.Walking .RightArm {transform: rotateZ(-30deg); left: -2px; top: -6px; animation: ArmWalking var(--animation-duration) linear infinite; transform-origin: center 33%; animation-delay: calc((var(--animation-duration) / 2) + var(--animation-delay));}
.Actor.Walking .LeftLeg {transform: rotateZ(-30deg); animation: LegWalking var(--animation-duration) linear infinite; transform-origin: center 60%; animation-delay: calc((var(--animation-duration) / 2) + var(--animation-delay));}
.Actor.Walking .RightLeg {transform: rotateZ(-30deg); left: 0px; top: -4px; animation: LegWalking var(--animation-duration) linear infinite; transform-origin: center 60%; animation-delay: var(--animation-delay);}
.Actor.Walking .LeftCalf {transform: rotateZ(-30deg); animation: CalfWalking var(--animation-duration) linear infinite; transform-origin: center 75%; animation-delay: calc((var(--animation-duration) / 2) + var(--animation-delay));}
.Actor.Walking .RightCalf {transform: rotateZ(-30deg); animation: CalfWalking var(--animation-duration) linear infinite; transform-origin: center 75%; animation-delay: var(--animation-delay);}

.Actor.Walking .ChestSkin {background-image: url('graphics/actors/large/chest/chestwalking.png');}
.Actor.Walking .LeftArmSkin {background-image: url('graphics/actors/large/arms/armwalking.png');}
.Actor.Walking .RightArmSkin {background-image: url('graphics/actors/large/arms/armwalking.png');}

.Actor.Walking .LeftThighSkin {background-image: url('graphics/actors/large/legs/rightthighwalking.png');}
.Actor.Walking .LeftCalfSkin {background-image: url('graphics/actors/large/legs/calfwalking.png');}
.Actor.Walking .LeftThighPant {background-image: url('graphics/actors/large/clothes/rightthighpantwalking.png');}
    .Actor.Walking .LeftThighPant.Shorts {background-image: url('graphics/actors/large/clothes/rightthighshortswalking.png');}
    .Actor.Walking .LeftThighPant.Shorts2 {background-image: url('graphics/actors/large/clothes/rightthighshorts2walking.png');}
    .Actor.Walking .LeftThighPant.Skirt {background-image: url('graphics/actors/large/clothes/thighskirtwalking.png');}
    .Actor.Walking .LeftThighPant.Skirt2 {background-image: url('graphics/actors/large/clothes/thighskirt2walking.png');}
.Actor.Walking .LeftCalfPant {background-image: url('graphics/actors/large/clothes/calfpantwalking.png');}
    .Actor.Walking .LeftCalfPant.Shorts {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}
    .Actor.Walking .LeftCalfPant.Shorts2 {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}
    .Actor.Walking .LeftCalfPant.Skirt {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}
    .Actor.Walking .LeftCalfPant.Skirt2 {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}
.Actor.Walking .RightThighSkin {background-image: url('graphics/actors/large/legs/rightthighwalking.png');}
.Actor.Walking .RightCalfSkin {background-image: url('graphics/actors/large/legs/calfwalking.png');}
.Actor.Walking .RightThighPant {background-image: url('graphics/actors/large/clothes/rightthighpantwalking.png');}
    .Actor.Walking .RightThighPant.Shorts {background-image: url('graphics/actors/large/clothes/rightthighshortswalking.png');}
    .Actor.Walking .RightThighPant.Shorts2 {background-image: url('graphics/actors/large/clothes/rightthighshorts2walking.png');}
    .Actor.Walking .RightThighPant.Skirt {background-image: url('graphics/actors/large/clothes/thighskirtwalking.png');}
    .Actor.Walking .RightThighPant.Skirt2 {background-image: url('graphics/actors/large/clothes/thighskirt2walking.png');}
.Actor.Walking .RightCalfPant {background-image: url('graphics/actors/large/clothes/calfpantwalking.png');}
    .Actor.Walking .RightCalfPant.Shorts {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}
    .Actor.Walking .RightCalfPant.Shorts2 {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}
    .Actor.Walking .RightCalfPant.Skirt {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}
    .Actor.Walking .RightCalfPant.Skirt2 {background-image: url('graphics/actors/large/clothes/calfshortswalking.png');}

.Actor.Walking .ChestSkin {background-image: url('graphics/actors/large/chest/chestwalking.png');}
.Actor.Walking .TShirt {background-image: url('graphics/actors/large/clothes/boytshirtwalking.png');}
.Actor.Walking .Singlet {background-image: url('graphics/actors/large/clothes/boytshirtwalking.png');}
.Actor.Walking .ArmSleeve {background-image: url('graphics/actors/large/clothes/boysleevewalking.png');}
.Actor.Walking .ArmSleeve.Singlet {display: none;}


.Activity #World {--WorldZoomScale: 1; --WorldFrameZoomScale: 1; --WorldFrameZoomTransformOrigin: center center; --WorldZoomLeft: 0px; --WorldZoomTop: 0px; --WorldZoomDuration: 2s;}
.Activity #World .ProblemContent {transition: transform var(--WorldZoomDuration); transform: scale(var(--WorldZoomScale)) translate(var(--WorldZoomLeft), var(--WorldZoomTop)); transform-origin: center center; transition-timing-function: linear;}
.Activity .WorldFrame {transition: transform var(--WorldZoomDuration); transform: scale(calc(var(--WorldFrameZoomScale))) translate(var(--WorldZoomLeft), var(--WorldZoomTop)); transform-origin: var(--WorldFrameZoomTransformOrigin); transition-timing-function: linear; filter: blur(var(--WorldFrameBlur));}

.WorldFrame.ScrollToLeft {animation: ScrollToLeft var(--scrollDuration) linear infinite; background-size: 150.1% 100%; --scrollDuration: 10s; --left: 0px;}
.WorldFrame.ScrollToLeft.Paused {animation-play-state: paused;}

.Actor.WalkingOnSpotToLeft {display: block; --scaleX: 1; transform: scaleX(var(--scaleX)) !important;}
.Actor.WalkingOnSpotToRight {display: block; --scaleX: -1; transform: scaleX(var(--scaleX)) !important;}
.Actor.WalkingLeft {animation: WalkingLeftRight 10s linear infinite; display: block;}


.Actor.WalkingEnterFromClosestEdge {animation: WalkingEnterFromClosestEdge var(--duration) linear backwards; display: block; z-index: 500 !important;}
@keyframes WalkingEnterFromClosestEdge {
    0% {transform: translateX(var(--translateX)) scaleX(var(--scaleX));}
    100% {transform: translateX(0px) scaleX(var(--scaleX));}
}

.Actor.WalkingExitAtClosestEdge {animation: WalkingExitAtClosestEdge var(--duration) linear forwards !important; display: block; z-index: 500 !important;}
@keyframes WalkingExitAtClosestEdge {
    0% {transform: translateX(0px) scaleX(var(--scaleX));}
    100% {transform: translateX(var(--translateX)) translateY(var(--translateY)) scaleX(var(--scaleX));}
}

.Actor.WalkingToRight {transform: scaleX(-1) !important; display: block;}
@keyframes ScrollToLeft {
    0% {left: 0px;}
    100% {left: var(--left);}
}

.Actor.WalkingEnterFromLeft {animation: WalkingEnterFromLeft var(--duration) linear backwards; display: block; --duration: 5s;}
.Actor.WalkingEnterFromLeft.Slow {--duration: 10s;}
@keyframes WalkingEnterFromLeft {
    0% {transform: translateX(-780px) scaleX(-1);}
    100% {transform: translateX(0px) scaleX(-1);}
}

.Actor.WalkingEnterFromLeftShort {animation: WalkingEnterFromLeftShort 1.92s linear backwards; display: block;}
@keyframes WalkingEnterFromLeftShort {
    0% {transform: translateX(-300px) scaleX(-1);}
    100% {transform: translateX(0px) scaleX(-1);}
}

.Actor.WalkingEnterFromLeftVeryShort {animation: WalkingEnterFromLeftVeryShort 1.5s linear backwards; display: block;}
@keyframes WalkingEnterFromLeftShort {
    0% {transform: translateX(-100px) scaleX(-1);}
    100% {transform: translateX(0px) scaleX(-1);}
}

.Actor.WalkingExitToRight {animation: WalkingExitToRight 6s linear forwards; display: block;}
@keyframes WalkingExitToRight {
    0% {transform: translateX(0px) scaleX(-1);}
    100% {transform: translateX(1100px) scaleX(-1);}
}

@keyframes WalkingLeftRight {
    0% {transform: translateX(0px) scaleX(-1) ;}
    49.99% {transform: translateX(500px) scaleX(-1) ;}
    50% {transform: translateX(500px) scaleX(1) ;}
    99.99% {transform: translateX(0px) scaleX(1) ;}
    100% {transform: translateX(0px) scaleX(-1) ;}
}

@keyframes HeadWalking {
    0% {transform: rotateZ(-2deg) translateY(-2px);}
    25% {transform: rotateZ(-5deg) translateY(-4px);}
    50% {transform: rotateZ(-2deg) translateY(-2px);}
    75% {transform: rotateZ(-5deg) translateY(-4px);}
    100% {transform: rotateZ(-2deg) translateY(-2px);}
}

@keyframes ArmWalking {
    0% {transform: rotateZ(-30deg)}
    50% {transform: rotateZ(30deg)}
    100% {transform: rotateZ(-30deg)}
}

@keyframes LegWalking {
    0% {transform: rotateZ(-30deg)}
    50% {transform: rotateZ(30deg)}
    100% {transform: rotateZ(-30deg)}
}

@keyframes CalfWalking {
    0% {transform: rotateZ(-30deg)}
    50% {transform: rotateZ(0deg)}
    100% {transform: rotateZ(-30deg)}
}

@keyframes BlinkingEyes {
    0% {background-image: url('graphics/actors/large/face/blinkingeyes.png');}
    2.0% {background-image: url('graphics/actors/large/face/blinkingeyes.png');}
    2.1% {background-image: var(--background-image);}
    100% {background-image: var(--background-image);}
}

@keyframes RockHead {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(-2deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(0.5deg);}
    100% {transform: rotate(0deg);}
}

@keyframes RockArm {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(-4deg);}
    50% {transform: rotate(0deg);}
    75% {transform: rotate(4deg);}
    100% {transform: rotate(0deg);}
}

.Actor.Cheering.Boy .TShirt.Clothes {background-image: url('graphics/actors/large/clothes/boytshirtcheering.png');}
.Actor.Cheering.Girl .TShirt.Clothes {background-image: url('graphics/actors/large/clothes/girltshirtcheering.png');}
.Actor.Cheering .LeftArm {animation: Cheering 1s linear infinite; top: -80px; left: 10px;}
    .Actor.Cheering.SingletCheering .LeftArm {top: -74px; left: -2px;}
.Actor.Cheering .RightArm {animation: Cheering 1s linear infinite reverse; top: -79px; left: -10px;}
@keyframes Cheering {
    0% {transform: rotate(180deg);}
    25% {transform: rotate(174deg);}
    50% {transform: rotate(180deg);}
    75% {transform: rotate(186deg);}
    100% {transform: rotate(180deg);}
}

.Actor.Talking.Focus {z-index: 510;}
.Actor.Talking .Mouth {animation: TalkingMouth 0.4s step-end infinite;}
@keyframes TalkingMouth {
    0% {background-image: url('graphics/actors/large/face/mouthclosed.png');}
    50% {background-image: none;}
    100% {background-image: url('graphics/actors/large/face/mouthclosed.png');}
}

.Actor .SpeechBubble {z-index: 3; opacity: 0; position: absolute; top: -60px; left: -230px; width: 235px; background-color: rgba(255,255,255,1); border: solid 0.5px black; font-size: 8pt; border-radius: 22px; font-family: QuicksandAlternateBlock, QuicksandAlternate, Quicksand, sans-serif; text-rendering: optimizeLegibility;}
.iOS .SpeechBubble {font-size: 7.5pt;}
.Actor .SpeechBubbleInner {padding: 10px; transform: scaleX(var(--scaleX));}

.Actor .SpeechBubble.PointLeft .SpeechBubbleInner::before {z-index: 1; content: ""; position: absolute; transform: translateX(14.7px) translateY(7.7px) rotate(60deg) scale(0.85); width: 0; height: 0; right: 0px; bottom: 0px; border-left: 10px solid transparent; border-right: 20px solid transparent; border-top: 20px solid black;}
.Actor .SpeechBubble.PointLeft .SpeechBubbleInner::after {z-index: 2; content: ""; position: absolute; transform: translateX(14px) translateY(7px) rotate(60deg) scale(0.8); width: 0; height: 0; right: 0px; bottom: 0px; border-left: 10px solid transparent; border-right: 20px solid transparent; border-top: 20px solid white;}

.Actor .SpeechBubble.PointRight .SpeechBubbleInner::before {z-index: 1; content: ""; position: absolute; transform: scaleX(-1) translateX(14.7px) translateY(7.7px) rotate(60deg) scale(0.85); width: 0; height: 0; left: 0px; bottom: 0px; border-left: 10px solid transparent; border-right: 20px solid transparent; border-top: 20px solid black;}
.Actor .SpeechBubble.PointRight .SpeechBubbleInner::after {z-index: 2; content: ""; position: absolute; transform: scaleX(-1) translateX(14px) translateY(7px) rotate(60deg) scale(0.8); width: 0; height: 0; left: 0px; bottom: 0px; border-left: 10px solid transparent; border-right: 20px solid transparent; border-top: 20px solid white;}

.Actor .SpeechBubble.HalfwayPointer.PointLeft .SpeechBubbleInner::before {transform: translateX(23.3px) translateY(7.7px) rotate(27deg) scale(0.85);}
.Actor .SpeechBubble.HalfwayPointer.PointLeft .SpeechBubbleInner::after {transform: translateX(22.2px) translateY(7.4px) rotate(27deg) scale(0.8);}

.Actor .SpeechBubble.HalfwayPointer .SpeechBubbleInner::before, .Actor .SpeechBubble.HalfwayPointer .SpeechBubbleInner::after {top: 50px;}
.Actor .SpeechBubble.HalfwayPointer.PointRight .SpeechBubbleInner::before {transform: scaleX(-1) translateX(22.9px) translateY(20.7px) rotate(27deg) scale(0.85);}
.Actor .SpeechBubble.HalfwayPointer.PointRight .SpeechBubbleInner::after {transform: scaleX(-1) translateX(22px) translateY(20.4px) rotate(27deg) scale(0.8);}



.Actor.Talking .SpeechBubble {will-change: transform; animation: PopUpSpeechBubble 0.5s ease-out forwards; transform: translateX(150px) translateY(90px) scaleX(var(--scaleX)) scaleY(0) rotate(10deg); --scaleX: 1;}

@keyframes PopUpSpeechBubble {
    0% {opacity: 0; transform: translateX(150px) translateY(90px) scaleY(0) rotate(10deg);}
    60% {transform: translateX(0px) translateY(-2px) scaleY(1);}
    80% {opacity: 1; transform: translateY(1px) scaleY(1);}
    95% {transform: translateY(-1px) scaleY(1);}
    100% {opacity: 1; transform: translateY(0px) scaleY(1);}
}

    .Boy.Person1 .HeadSkin {background-image: url('graphics/actors/large/head/boy1.png');}
    .Boy.Person1 .Hair {background-image: url('graphics/actors/large/hair/boy1.png');}
    .Girl.Person1 .HeadSkin {background-image: url('graphics/actors/large/head/girl1.png');}
    .Girl.Person1 .Hair {background-image: url('graphics/actors/large/hair/girl1.png');}
    .Boy.Person2 .HeadSkin {background-image: url('graphics/actors/large/head/boy2.png');}
    .Boy.Person2 .Hair {background-image: url('graphics/actors/large/hair/boy2.png');}
    .Girl.Person2 .HeadSkin {background-image: url('graphics/actors/large/head/girl2.png');}
    .Girl.Person2 .Hair {background-image: url('graphics/actors/large/hair/girl2.png');}
    .Boy.Person3 .HeadSkin {background-image: url('graphics/actors/large/head/boy3.png');}
    .Boy.Person3 .Hair {background-image: url('graphics/actors/large/hair/boy3.png');}
    .Girl.Person3 .HeadSkin {background-image: url('graphics/actors/large/head/girl3.png');}
    .Girl.Person3 .Hair {background-image: url('graphics/actors/large/hair/girl3.png');}
    .Boy.Person4 .HeadSkin {background-image: url('graphics/actors/large/head/boy4.png');}
    .Boy.Person4 .Hair {background-image: url('graphics/actors/large/hair/boy4.png');}
    .Girl.Person4 .HeadSkin {background-image: url('graphics/actors/large/head/girl4.png');}
    .Girl.Person4 .Hair {background-image: url('graphics/actors/large/hair/girl4.png');}
    .Boy.Person5 .HeadSkin {background-image: url('graphics/actors/large/head/boy5.png');}
    .Boy.Person5 .Hair {background-image: url('graphics/actors/large/hair/boy5.png');}
    .Girl.Person5 .HeadSkin {background-image: url('graphics/actors/large/head/girl5.png');}
    .Girl.Person5 .Hair {background-image: url('graphics/actors/large/hair/girl5.png');}
    .Boy.Person6 .HeadSkin {background-image: url('graphics/actors/large/head/boy6.png');}
    .Boy.Person6 .Hair {background-image: url('graphics/actors/large/hair/boy6.png');}
    .Girl.Person6 .HeadSkin {background-image: url('graphics/actors/large/head/girl6.png');}
    .Girl.Person6 .Hair {background-image: url('graphics/actors/large/hair/girl6.png');}
    .Boy.Person7 .HeadSkin {background-image: url('graphics/actors/large/head/boy7.png');}
    .Boy.Person7 .Hair {background-image: url('graphics/actors/large/hair/boy7.png');}
    .Girl.Person7 .HeadSkin {background-image: url('graphics/actors/large/head/girl7.png');}
    .Girl.Person7 .Hair {background-image: url('graphics/actors/large/hair/girl7.png');}
    .Boy.Person8 .HeadSkin {background-image: url('graphics/actors/large/head/boy8.png');}
    .Boy.Person8 .Hair {background-image: url('graphics/actors/large/hair/boy8.png');}
    .Girl.Person8 .HeadSkin {background-image: url('graphics/actors/large/head/girl8.png');}
    .Girl.Person8 .Hair {background-image: url('graphics/actors/large/hair/girl8.png');}
    .Boy.Person9 .HeadSkin {background-image: url('graphics/actors/large/head/boy9.png');}
    .Boy.Person9 .Hair {background-image: url('graphics/actors/large/hair/boy9.png');}
    .Girl.Person9 .HeadSkin {background-image: url('graphics/actors/large/head/girl9.png');}
    .Girl.Person9 .Hair {background-image: url('graphics/actors/large/hair/girl9.png');}

.Panel:not(.ZoomedVeryLargeAssessment) .Page .Space .Helmet, .SunkenTreasure .Helmet {background-image: url('graphics/actors/small/clothes/bubble.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .TShirt {background-image: url('graphics/actors/small/clothes/boytshirt.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl .TShirt {background-image: url('graphics/actors/small/clothes/girltshirt.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Dress1 {background-image: url('graphics/actors/small/clothes/dress1.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Dress2 {background-image: url('graphics/actors/small/clothes/dress2.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Dress3 {background-image: url('graphics/actors/small/clothes/dress3.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Pants {background-image: url('graphics/actors/small/clothes/pants.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Shorts {background-image: url('graphics/actors/small/clothes/shorts.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Shorts2 {background-image: url('graphics/actors/small/clothes/shorts2.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .LeftThigh {background-image: url('graphics/actors/small/legs/leftthigh.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .RightThigh {background-image: url('graphics/actors/small/legs/rightthigh.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .LeftCalf {}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .RightCalf {}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .LeftArm {background-image: url('graphics/actors/small/limbs/leftarm.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .RightArm {background-image: url('graphics/actors/small/limbs/rightarm.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .Features {background-image: url('graphics/actors/small/face/blackeyes.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .BlueEyes {background-image: url('graphics/actors/small/face/blueeyes.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .GreenEyes {background-image: url('graphics/actors/small/face/greeneyes.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .HazelEyes {background-image: url('graphics/actors/small/face/hazeleyes.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .BrownEyes {background-image: url('graphics/actors/small/face/browneyes.png');}
.Panel:not(.ZoomedVeryLargeAssessment) .Page .DarkBrownEyes {background-image: url('graphics/actors/small/face/darkbrowneyes.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person1 .HeadSkin {background-image: url('graphics/actors/small/head/boy1.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person1 .Hair {background-image: url('graphics/actors/small/hair/boy1.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person1 .HeadSkin {background-image: url('graphics/actors/small/head/girl1.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person1 .Hair {background-image: url('graphics/actors/small/hair/girl1.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person2 .HeadSkin {background-image: url('graphics/actors/small/head/boy2.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person2 .Hair {background-image: url('graphics/actors/small/hair/boy2.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person2 .HeadSkin {background-image: url('graphics/actors/small/head/girl2.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person2 .Hair {background-image: url('graphics/actors/small/hair/girl2.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person3 .HeadSkin {background-image: url('graphics/actors/small/head/boy3.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person3 .Hair {background-image: url('graphics/actors/small/hair/boy3.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person3 .HeadSkin {background-image: url('graphics/actors/small/head/girl3.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person3 .Hair {background-image: url('graphics/actors/small/hair/girl3.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person4 .HeadSkin {background-image: url('graphics/actors/small/head/boy4.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person4 .Hair {background-image: url('graphics/actors/small/hair/boy4.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person4 .HeadSkin {background-image: url('graphics/actors/small/head/girl4.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person4 .Hair {background-image: url('graphics/actors/small/hair/girl4.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person5 .HeadSkin {background-image: url('graphics/actors/small/head/boy5.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person5 .Hair {background-image: url('graphics/actors/small/hair/boy5.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person5 .HeadSkin {background-image: url('graphics/actors/small/head/girl5.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person5 .Hair {background-image: url('graphics/actors/small/hair/girl5.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person6 .HeadSkin {background-image: url('graphics/actors/small/head/boy6.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person6 .Hair {background-image: url('graphics/actors/small/hair/boy6.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person6 .HeadSkin {background-image: url('graphics/actors/small/head/girl6.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person6 .Hair {background-image: url('graphics/actors/small/hair/girl6.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person7 .HeadSkin {background-image: url('graphics/actors/small/head/boy7.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person7 .Hair {background-image: url('graphics/actors/small/hair/boy7.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person7 .HeadSkin {background-image: url('graphics/actors/small/head/girl7.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person7 .Hair {background-image: url('graphics/actors/small/hair/girl7.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person8 .HeadSkin {background-image: url('graphics/actors/small/head/boy8.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person8 .Hair {background-image: url('graphics/actors/small/hair/boy8.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person8 .HeadSkin {background-image: url('graphics/actors/small/head/girl8.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person8 .Hair {background-image: url('graphics/actors/small/hair/girl8.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person9 .HeadSkin {background-image: url('graphics/actors/small/head/boy9.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Boy.Person9 .Hair {background-image: url('graphics/actors/small/hair/boy9.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person9 .HeadSkin {background-image: url('graphics/actors/small/head/girl9.png');}
    .Panel:not(.ZoomedVeryLargeAssessment) .Page .Girl.Person9 .Hair {background-image: url('graphics/actors/small/hair/girl9.png');}

.VeryLightBlondHair, .VeryLightBlondeHair {filter: saturate(0.8) brightness(2);}
.LightBlondHair, .LightBlondeHair {filter: saturate(0.8) brightness(1.3);}
.BlondHair, .BlondeHair {}
.DarkBlondHair, .DarkBlondeHair {filter: hue-rotate(350deg) saturate(1.5) brightness(0.85)}
.RedHair {filter: hue-rotate(341deg) saturate(3);}
.LightBrownHair {filter: hue-rotate(330deg) saturate(2) brightness(0.5);}
.BrownHair {filter: hue-rotate(330deg) saturate(2) brightness(0.5);}
.DarkBrownHair {filter: hue-rotate(330deg) saturate(2) brightness(0.5);}
.VeryDarkBrownHair {filter: hue-rotate(330deg) saturate(2) brightness(0.3);}
.BlackHair {filter: brightness(0.15);}

.PinkSkin {filter: hue-rotate(340deg) saturate(0.9) brightness(1.1);}
.WhiteSkin {}
.SuperLightBrownSkin {filter: hue-rotate(345deg) saturate(2.2) brightness(0.97);}
.VeryLightBrownSkin {filter: hue-rotate(348deg) saturate(2.2) brightness(0.96);}
.LightBrownSkin {filter: hue-rotate(345deg) saturate(3) brightness(0.9);}
.LightMediumBrownSkin {filter: hue-rotate(340deg) saturate(3.5) brightness(0.85);}
.MediumBrownSkin {filter: hue-rotate(340deg) saturate(5) brightness(0.8);}
.DarkBrownSkin {filter: hue-rotate(340deg) saturate(5) brightness(0.6);}

#ChooseActorsBox {display: none; width: 68%; text-align: center; border: solid 1px black; user-select: none;}
#ChooseActorsBox:modal {display: block;}
#ChooseActorsBox h3 {margin-top: 0px;}
#ChooseActorsBox .BottomButtons {text-align: center;}
#ChooseActorsBox::backdrop {
	background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
}
#SelectActor1, #SelectActor2 {height: 194px; max-height: unset;}
#ChooseActorsBox .ListViewItem {width: 98px; height: 84px; margin: 0px;}

@media print {
    .ZoomedMediumAssessment {filter: grayscale(1);}
    .ProblemNavigationButton, .CheckAnswerButton, x.WorldFrame, #GameBox.Activity #Background1, .Activity .SpeakButton {display: none !important;}
    .WorldFrame {opacity: 0.5;}
    #GameBox {top: 0px; height: 100%; width: 100%; background: transparent;}
    #GameBox.MathematicsPuzzle, #GameBox.Activity {top: 50px;}
    .AlgebraTable tr:first-child td, .AlgebraTable tr td:first-child {background: silver !important;}
    .Problem {min-width: unset;}
    input[type=date] {display: none;}
    button {display: none;}
    #TitleBar {display: none;}
    #Graphics {transform: none !important;}
    .MathematicsPuzzlePatterns .Problem {-webkit-background-clip: unset !important; background: transparent !important; color: black !important; filter: none !important;}
}

.iOS .Activity:not(.AssessmentActivity) .ProblemNavigationButtonsBox {bottom: -70px; left: -16px; width: calc(100% + 32px); height: 60px;}
.iOS .Activity:not(.AssessmentActivity) #Graphics {overflow: visible;}
.iOS .Activity:not(.AssessmentActivity) .ProblemContent {overflow: hidden;}
.Touch .Activity #TouchControl.On {display: none;}