.inner-container {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.exercis-container {
    top: 5%;
    height: 90%;
    width: 40%;
    left: 0;
    right: 0;
    margin: auto;
    border: 1px solid black;
}

.exercis-container .progress-container {
    width: 100%;
    height: 7%;
    border-bottom: 1px solid black;
    background-color: black;
}

.exercis-container .top-container {
    top: 7%;
    background-size: 60% 82%;
    background-position: center;
    height: 34%;
}

.exercis-container .bottom-container {
    top: 41%;
    width: 100%;
    height: 52%;
    z-index: 10;
}

.exercis-container .controls-container {
    top: 93%;
    width: 100%;
    height: 7%;
    background-color: black;
}

.speech-bubble-exercises {
    background: #fff;
    border-radius: 1.2em;
    top: 51%;
    left: 1%;
    width: 98%;
    height: 41%;
    z-index: 0;
    border: 2px solid black;
    overflow: visible;
}

.speech-bubble-exercises::after {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    width: 0;
    height: 0;
    border: 3.07vw solid transparent;
    border-bottom-color: black;
    border-top: 0;
    border-left: 0;
    margin-left: 5.97vw;
    margin-top: -3.07vw;
    z-index: 5;
}

.exercise-progressbar {
    top: 38% !important;
    width: 92% !important;
}

.exercise-tablet {
    animation: none !important;
    top: 10% !important;
    height: 80% !important;
    width: 6% !important;
    left: 3% !important;
}

.real-exercise {
    top: 2%;
    width: 90%;
    height: 98%;
    left: 5%;
}

.test-table-exercise {
    border-collapse: collapse;
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    font-size: 1vw;
}

.test-table-exercise td,
.test-table-exercise th {
    border: 2px solid black;
    padding: 3px;
    color: black;
}

.test-table-exercise th {
    background-color: #B7B7B7;
}

.exercise-tutorial-pointer {
    position: absolute;
    top: 85%;
    left: 90%;
    z-index: 100;
    background-repeat: no-repeat;
    background-position: center;
    width: 54px;
    height: 60px;
}

.exercise-tutorial-pointer-hand {
    background-image: url('../images/exercise/cursor-hand.png');
}

.exercise-tutorial-pointer-click {
    background-image: url('../images/exercise/cursor-click.png');
}

.exercise-tutorial-pointer-drag {
    background-image: url('../images/exercise/cursor-drag.png');
}

.exercise-tutorial-pointer-ok {
    background-image: url('../images/exercise/cursor-ok.png');
}


/* TEST BRITANICA DESIGN */

.newdesign-class {
    background-image: url('../images/britanica-desgin/Background.png');
}

.newdesign-task-box {
    background-image: url('../images/britanica-desgin/Task_Box.png');
}

.help-button {
    cursor: pointer;
    z-index: 10;
    background-image: url('../images/britanica-desgin/Help_Button.png');
    filter: drop-shadow(0px 2px 2px black);
}


/* BANK FIRST LI HIGHLIGHT ANIMATION */

.bank-first-li-animation {
    animation: libankanimation 1s linear infinite;
}

@keyframes libankanimation {
    0% {
        /* transform: scale(1, 1); */
        filter: drop-shadow(0px 0px 10px red);
    }
    50% {
        /* transform: scale(1.2, 1.2); */
        filter: none;
    }
    100% {
        /* transform: scale(1, 1); */
        filter: drop-shadow(0px 0px 10px red);
    }
}