#viewDisplayArea{top:0;left:0;z-index:0}#viewTiles{bottom:0;left:0;z-index:1}#viewSidebar{top:0;left:0;z-index:2}.view{position:absolute;width:1024px;height:384px}#viewDisplayArea p{font-size:222px;line-height:initial;text-align:center;font-weight:bold;color:#fff;margin-top:20px;position:relative;transition:all 0.3s ease-out}#viewDisplayArea p.displayResult{margin-top:-20px}#viewDisplayArea p span{font-size:60px;line-height:initial}#viewDisplayArea p span{color:#fff;display:inline-block;position:relative}#viewDisplayArea p span.green{color:#00a700}#viewDisplayArea p span.yellow{color:#ffca00}#viewDisplayArea p span.red{color:red}#viewDisplayArea p:after{content:"";width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:rgba(255,0,0,0)}#viewDisplayArea p.scale-0{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}#viewSidebar{width:342px;height:100%;background:#323232;-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;transition-duration:0.3s;transition-timing-function:ease-in}#viewSidebar.active{transition-timing-function:ease-out;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}#viewSidebar p,#viewSidebar span,#viewSidebar li{color:#fff;position:relative}.text-bold{font-weight:bold !important}#viewSidebar header{margin-bottom:calc(28px * 2);position:relative}#viewSidebar header:after{content:"";position:absolute;width:100%;height:1px;background-color:#7f7f7f;bottom:-28px;left:0}section:not(:last-of-type){margin-bottom:28px}#viewSidebar i{color:#ffad07}#viewSidebar .content-wrapper{height:100%;width:100%;overflow:hidden}#viewSidebar .content-scroll{height:100%;width:calc(100% + 15px);padding:35px 45px 35px 40px;overflow:hidden;overflow-y:auto;overflow-y:scroll;-webkit-overflow-scrolling:touch}#viewSidebar .sidebarButton-wrapper{width:48px;height:48px;position:absolute;top:38px;right:-88px}#viewSidebar #sidebarButton{width:48px;height:48px;background-image:url("../images/offCanvasButton.svg");background-repeat:no-repeat;background-position:2px 1px;cursor:pointer;-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);transition:all 0.25s ease-out}#viewSidebar.active #sidebarButton{-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);background-position:3px 2px}#viewTiles{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;padding:0 0 6px 0;overflow:hidden}#viewTiles .tile{width:250px;height:188px;padding:0 25px;position:relative;cursor:pointer;background-color:#ffca00;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);transition:background-color 0.1s linear, -webkit-transform 0.35s ease-out;transition:background-color 0.1s linear, transform 0.35s ease-out;transition:background-color 0.1s linear, transform 0.35s ease-out, -webkit-transform 0.35s ease-out}#viewTiles .tile:after{content:"";width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:rgba(255,0,0,0)}#viewTiles .tile p{color:#000;text-align:center;font-weight:bold;position:relative;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}#viewTiles .tile:nth-of-type(2),#viewTiles .tile:nth-of-type(4),#viewTiles .tile:nth-of-type(5),#viewTiles .tile:nth-of-type(7){background-color:#ffad07}#viewTiles .tile:nth-of-type(5),#viewTiles .tile:nth-of-type(6),#viewTiles .tile:nth-of-type(7),#viewTiles .tile:nth-of-type(8){margin-top:4px}#viewTiles .tile.green,#viewTiles .tile.g{background-color:#00a700}#viewTiles .tile.red,#viewTiles .tile.r{background-color:red}#viewTiles .tile.scale-0{transition:background-color 0.1s linear, -webkit-transform 0.25s ease-in;transition:background-color 0.1s linear, transform 0.25s ease-in;transition:background-color 0.1s linear, transform 0.25s ease-in, -webkit-transform 0.25s ease-in;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0)}#iconPlayAgain{width:48px;height:48px;position:absolute;right:53px;top:296px;background-image:url("../images/iconPlayAgain.svg");cursor:pointer;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);visibility:hidden;transition:all 0.3s ease-out}#iconPlayAgain.active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);visibility:visible}#Piechart{width:48px;height:48px;position:absolute;right:53px;top:296px;overflow:hidden;border-radius:50%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);visibility:hidden;background-color:#323232;transition:all 0.3s ease-out}#Piechart.active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);visibility:visible}#Piechart canvas{position:absolute;top:0;left:0}#Piechart:after{content:"";position:absolute;width:20px;height:20px;background-color:#323232;border-radius:50%;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}body{background-color:#000}.wrapper{overflow:hidden}