/* STORY SELECTOR */
.tooltip {
    position: relative;
    display: inline-block;
    font-family: 'SadsamBold' !important;
    font-size: 1.1em !important;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
.game-container .selection-title {
    position: absolute;
    width: 70%;
    font-size: 10vh;
    color: #fff;
    text-align: center;
    margin: 4% 15% 0 15%;
    font-weight: 600;
}

.game-container .select-user {
    position: absolute;
    width: 27.2%;
    font-size: 4.6vh;
    padding: .8%;
    color: #fff;
    text-align: center;
    margin: 41% 72% 0 7%;
    font-weight: 600;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.20);
    cursor: pointer;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.05);
}

.game-container .select-user>span {
    font-size: 4vh;
}

.game-container .select-user:hover {
    background-color: rgba(255, 255, 255, 0.35);
}

.game-container .select-user.right {
    margin: 41% 72% 0 65%;
}

.game-container .selector-container {
    position: absolute;
    width: 90%;
    margin-left: 5%;
    margin-top: 16%;
    height: 53%;
}

.game-container .selector-container .story-selector {
    width: 30%;
    height: 27vh;
    position: relative;
    display: block;
    float: left;
}

.game-container .selector-container .story-selector .title {
    position: absolute;
    bottom: 3%;
    height: 10%;
    font-size: 2.5vh;
    color: #fff;
    text-align: center;
    width: 75%;
    margin-left: 20%;
}

.game-container .selector-container .story-selector .frame {
    position: absolute;
    width: 30vh;
    height: 25vh;
    margin-left: 5vh;

    width: 80%;
    height: 90%;
    margin-left: 16%;
}

.game-container .selector-container .story-selector .cover {
    background-color: #fff;
    position: absolute;

    width: 25.5vh;
    height: 20.5vh;
    margin-top: 3vh;
    margin-left: 8vh;

    width: 67%;
    height: 73%;
    margin-top: 10%;
    margin-left: 25%;
}

.game-container .selector-container .story-selector .cover.down {
    margin-top: 6.66%;
    margin-left: 21%;
}



/* READER */

.game-container .reader {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: transform ease-out 666ms;
}

.game-container .reader.hideme {
    transform: translate3d(0, -100vh, 0);
}

    .game-container .reader .last-word {
        transition: 333ms ease-in margin, z-index 444ms;
        position: absolute;
        width: 40%;
        margin: 51% 30%;
        color: #fff;
        font-size: 5vh;
        line-height: 5vh;
        text-align: center;
        font-weight: 600;
        background-color: #AC8DB0;
        padding-top: 2vh;
        border-radius: 2vh;
        z-index: 1;
    }

.game-container .reader .last-word.ng-hide {
    margin: 39% 30%;
    display: inherit !important;
    z-index: -1000;
}

.game-container .monitor {
    position: absolute;
    width: 87%;
    height: 67.86%;
    margin: 2% 10%;
    pointer-events: none;
}

    .game-container .monitor.mask {
        opacity: .3;
        transition: opacity ease-in 999ms;
        display: none;
    }

.game-container .reader-area {
    position: absolute;
    width: 75%;
    height: 62%;
    margin: 4% 13%;
    background-color: #fff;
}

.game-container .reader-area .text {
    padding: 2vh 3vh;
    font-size: 35px;
    position: relative;
    overflow-y: auto;
    height: 90%;
}
.game-container .bigger-smaller-buttons-pr {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 8%;
    height: 18%;
    margin: 10.5% 2.5%;
}

.game-container .text-bigger-pr {
    width: 100%;
    height: 50%;
    right: 16%;
    top: 0%;
}

.game-container .text-smaller-pr {
    width: 100%;
    height: 50%;
    right: 16%;
    top: 52%;
}

.game-container .bigger-smaller-buttons-pr.ng-hide {
    margin: 10.5% 24.5%;
    display: inherit !important;
}
.game-container .reader-area .text span.highlight {
    background-color: #F0F0CB;
    color: #5F5F5F;
}

.game-container .reader-area .cover {
    height: 100%;
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
}

.game-container .reader-area .image.left {
    max-width: 20%;
    display: inline-block;
    width: initial;
    height: auto;
    position: relative;
    float: left;
    margin: 10px;
    border-radius: 10px;
    cursor: pointer;
}

.game-container .reader-area .image.center {
    width: 100%;
    display: block;
    width: auto;
    width: initial;
    height: 60%;
    position: relative;
    margin: 0 auto;
    border-radius: 10px;
    cursor: pointer;
}

.game-container .next-last-buttons {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 47.5% 41.5%;
}

.game-container .start-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 47.5% 41.5%;
}
.game-container .keynotes-button.ng-hide {
    margin: 37.5% 41.5%;
    display: inherit !important;
}
.game-container .keynotes-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 47.5% 41.5%;
}
.game-container .passage-button.ng-hide {
    margin: 37.5% 33.5%;
    display: inherit !important;
}
.game-container .passage-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 47.5% 33.5%;
}
.game-container .save-button.ng-hide {
    margin: 37.5% 47.5%;
    display: inherit !important;
}
.game-container .save-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 47.5% 52.5%;
}
.game-container .results-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 17%;
    height: 17%;
    margin: 47.5% 67.5%;
}

.game-container .done-reading-button {
    transition: 333ms ease-in margin;
    position: absolute;
    width: 16.35%;
    height: 20.666%;
    margin: 60% 70%;
}

.game-container .done-reading-button.ng-hide {
    margin: 50% 70%;
}

.game-container .start-button.left {
    margin: 47.5% 60%;
}

.game-container .start-button.big {
    width: 24.8%;
    margin: 47.5% 37.6%;
}

.game-container .start-button.ng-hide {
    margin: 37.5% 41.5%;
    display: inherit !important;
}

.game-container .start-button.left.ng-hide {
    margin: 37.5% 60%;
}

.game-container .start-button.big.ng-hide {
    margin: 37.5% 37.6%;
}

.game-container .next-last-buttons .half {
    width: 50%;
    height: 100%;
}

.game-container .next-last-buttons .half.right {
    margin-left: 50%;
}

.game-container .next-last-buttons.ng-hide {
    margin: 38.5% 41.5%;
    display: inherit !important;
}

.game-container .scroll-buttons {
    transition: 333ms ease-out transform;
    position: absolute;
    width: 8%;
    height: 18%;
    margin: 16.5% 89.7%;
    transform-origin: left;
}

.game-container .scroll-buttons.ng-hide {
    transform: scale3d(0, 0, 0);
    display: inherit !important;
}

.game-container .scroll-buttons .half {
    height: 50%;
    width: 100%;
}

.game-container .scroll-buttons .half.bottom {
    top: 50%;
}

.game-container .page-counter {
    font-size: 4vh;
    position: absolute;
    width: 8%;
    margin: 48.7% 86.5%;
    color: #fff;
    font-weight: 800;
    text-align: right;
}

.game-container .max-image-x-btn {
    position: fixed;
    width: 10vh;
    height: 10.5vh;
    right: 0;
    top: 0;
    margin: 2vh;
    z-index: 2;
}

.game-container .max-image-background {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
    left: 0;
    z-index: 1;
}

.game-container .max-image-background.ng-hide {
    transition: 333ms ease-out opacity;
    opacity: 0;
    display: inherit !important;
    pointer-events: none;
}

.game-container .max-image-container {
    transition: 333ms ease-out transform;
    transform: scale3d(1, 1, 1);
    width: 52.5%;
    height: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    margin: 0 auto;
    overflow: hidden;
    z-index: 1;
}

.game-container .max-image-container .image {
    width: 100%;
    height: auto;
    top: 50%;
    transform: translateY(-50%);
}

.game-container .max-image-container.ng-hide {
    transform: scale3d(0, 0, 0);
    display: inherit !important;
}

.game-container .outro-back-plate {
    width: 50%;
    height: 26.8%;
    position: absolute;
    left: 27%;
}

.game-container .outro-congratulations-tilted {
    position: absolute;
    margin-left: 26%;
    margin-top: 10%;
    font-size: 8vh;
    font-weight: 600;
    color: #fff;
    transform: rotateZ(-1.3deg);
}

    .game-container .outro-congratulations-tilted.main {
        color: #0277E6;
        margin-top: 0%;
        font-size: 8.1vh;
        margin-left: 29%;
    }

    .game-container .outro-congratulations-tilted.sub {
        margin-top: 4.5%;
        margin-left: 48%;
        font-size: 7.5vh;
    }

    .game-container .outro-congratulations-tilted.goal {
        margin-top: 10.5%;
        font-size: 10vh;
        margin-left: 47%;
        width: 12%;
        text-align: center;
    }

.game-container .outro-score {
    position: absolute;
    margin-left: 6%;
    width: 28%;
    text-align: center;
    color: #fff;
    font-size: 6vh;
    font-weight: 600;
    line-height: 9vh;
    margin-top: 40%;
    transition: opacity ease-in 666ms;
}

.game-container .outro-score.right {
    margin-left: 66%;
}

.game-container .outro-score p {
    font-size: 9vh;
}

.game-container .simpleContainer {
    text-align: center;
    width: 100%;
    margin: 0 auto;
    margin-top: 24vh;
}

.game-container .simpleContainerItem {
    display: inline-block;
}

.game-container .simpleContainerGridItem {
    padding: 3em;
    display: inline-block;
}
.game-container .resultsSopcres {
    font-size: 35px;
    font-size: 3.5vh;
    font-weight: 600;
}
.game-container .reader-score {
    font-size: 3em;
    position: absolute;
    width: 75%;
    height: 300px;
    text-align: center;
    color: white;
    left: 13%;
    top: -25%;
    background-image: url(../../../res/webapp/games/power_reader/banner.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.game-container .vocab-definition {
    font-size: 3em;
    position: absolute;
    width: 75%;
    height: 300px;
    text-align: center;
    color: white;
    left: 13%;
    top: -25%;
    background-image: url(../../../res/webapp/games/power_reader/vocab.png);
    background-repeat: no-repeat;
    background-size: 100%;
}
.game-container .vocab-definition-show {
    transition: top .5s ease 0s;
    top: 0%;
    
}
.game-container .vocab-x-btn {
    width: 4vh;
    height: 4vh;
    right: 91.7vh;
    top: 10.6vh;
}
.game-container .vocab-content {
    width: 85%;
    position: relative;
    left: 9%;
    top: 5%;
    line-height: 1em;
}

.game-container .scoreIn {
    top: 3%;
    /*-webkit-animation-duration: 4s;*/
    -webkit-animation: _bounceInDown 2s forwards, _tada 2.5s forwards 2s,_bounceOutUp 1s forwards 3.5s;
}
.game-container .vocabIn {
    top: 3%;
    /*-webkit-animation-duration: 4s;*/
    -webkit-animation: _bounceInDown 2s forwards;
}
.game-container .scoreInStick {
    top: 0%;
    -webkit-animation-duration: 3s;
    -webkit-animation: _bounceInDown 2s forwards, _tada 2s forwards 1.5s;
}

.moveDown {
    top: 20px;
    position: relative;
}

/* SCROLLBARS */

    #readerTextArea::-webkit-scrollbar-track {
    border-radius: 0;
    background-color: #D1EFF9;
}

#readerTextArea::-webkit-scrollbar {
    width: 12px;
}

#readerTextArea::-webkit-scrollbar-thumb {
    border-radius: 0;
    background-color: #8DD9FF;
}

#readerTextArea::-webkit-scrollbar {
    width: 3vh;
}
.vocabWord {
    color: blue;

}
.vocabWord-hide {
    color: #000000;
}