.body_random {
    width: 60%;
    height: auto;
}

.mobile_question {
    display: none !important;
}

.animated {
    transition-duration: 0.3s/2;
}

.hidden {
    display: none;
}

button:focus {
    outline: 0;
}

.btn_random_register {
    width: 45%;
    height: 50px;
    text-align: center;
    padding: 0 20px;
    border: none;
    background: none;
    border-radius: 25px;
    background: linear-gradient(
180deg
 , #29F4FF -46.11%, #5257FF 151.97%);
    color: #fff;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 27%;
    font-size: 20px;
}

.btn_continue_register + .btn_random_register {
  width: auto;
  margin-left: 15px;
}


/* ------------------- Progress bar ------------------ */

progress[value] {
    margin: auto;
    /* Reset the default appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Get rid of default border in Firefox. */
    border: none;
    border-radius: 37.5px;
    /* For IE10 */
    color: EEEFF4;
}

progress[value]::-webkit-progress-bar {
    background-color: #eeeff4;
    border-radius: 37.5px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset; */
}

progress[value]::-moz-progress-bar {
    border-radius: 37.5px;
    background: linear-gradient(177.67deg, #4cd964 9.54%, #27ae60 149.18%);
}

progress[value]::-webkit-progress-value {
    background: linear-gradient(177.67deg, #4cd964 9.54%, #27ae60 149.18%);
    border-radius: 37.5px;
}

.progress-bar {
    background-color: #eeeff4;
    border-radius: 2px;
    width: 250px;
    height: 20px;
    position: relative;
    display: block;
}

.progress-bar>span {
    background: linear-gradient(175deg, #4cd964 9.54%, #27ae60 149.18%);
    border-radius: 2px;
    display: block;
    text-indent: -9999px;
}

#app {
    min-height: 290px;
    margin: auto;
    background-color: #ffffff;
    background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/background/quiz.svg);
    /* background-size: contain; */
    position: relative;
    border: 1px solid #111;
    padding-bottom: 40px;
}

.no-background {
    background-image: none !important;
}

@media (min-width: 769px) {
    #app {
        padding-top: 56px;
        border-radius: 40px;
        background-position-y: bottom;
    }
    .random_float {
        float: left;
    }
    #instruction>img {
        width: 150px;
        height: 50px;
    }
    #instruction {
        width: 150px;
        margin: auto;
        margin-bottom: 25px;
    }
}


/* ------------------- app container ------------------ */


/* ------------------- title container ------------------ */

.titleContainer {
    margin: auto;
    font-family: "SF Pro Rounded", "Varela Round", sans-serif;
    font-style: normal;
    color: #171f48;
}

@media (min-width: 769px) {
    .titleContainer {
        margin-top: 10px;
        font-weight: 600;
        font-size: 28px;
        line-height: 56px;
        text-align: center;
        letter-spacing: 0.005em;
        width: 90%;
    }
}

@media (max-width: 768px) {
    .titleContainer {
        margin-top: 10px;
        font-weight: 600;
        font-size: 25px;
        line-height: 56px;
        text-align: center;
        letter-spacing: 0.005em;
        width: 90%;
    }
    .destop_question {
        display: none !important;
    }
    .mobile_question {
        display: block !important
    }
    .btn_random_register {
   		margin-left: 50%;
    	transform: translateX(-50%);
        width: 80%;
    }
}


/* ------------------- title container ------------------ */


/* ------------------- button ------------------ */

.playback,
.recorder,
.hearback {
    background-size: contain;
    margin: auto;
}

.playback {
    background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/button/Speaker.svg);
}

.hearback {
    background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/button/Hearback.svg);
}

.playContainer .playback {
    background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/button/Speaker_disable.svg);
}

.playContainer .recorder {
    background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/button/green_mic.svg);
    border-radius: 50%;
    border: lightblue 3px;
    animation: mymove 2s infinite;
    box-sizing: border-box;
}

@keyframes mymove {
    0% {
        border: 3px solid lightblue;
    }
    50% {
        border: 15px solid lightblue;
    }
    100% {
        border: 3px solid lightblue;
    }
}

.viewContainer .recorder {
    background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/button/mic/Normal.svg);

}

.finishContainer .recorder {
    /* background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/button/waiting.gif); */
    border-radius: 50%;
    background-color: #e6e6e6;
    display: flex;
}

.finishContainer .recorder>img {
    width: 50%;
    height: 50%;
    margin: auto;
}

.pagination {
    margin: auto;
    margin-top: 15px;
}

.resultPlayback {
    /* display: flex;  */
    /* for inline children or centering one child by margin auto  */
    text-align: center;
    /* center a group of childs  */
}

@media (min-width: 769px) {
    .playback,
    .hearback {
        width: 38px;
        height: 38px;
    }
    .resultPlayback>.playback,
    .hearback {
        display: inline-block;
    }
    .recorder {
        margin-top: 40px;
        width: 80px;
        height: 80px;
    }
    .tooltiptext {
        bottom: 118px;
    }
    .pagination {
        width: 544px;
    }
    .retry {
        width: 260px;
    }
    .continue {
        width: 260px;
    }
}

@media (max-width: 768px) {
    .playback,
    .hearback {
        margin-top: 24px;
        width: 32px;
        height: 32px;
    }
    .resultPlayback>.playback,
    .hearback {
        display: inline-block;
    }
    .recorder {
        margin-top: 69px;
        width: 78px;
        height: 78px;
    }
    .tooltiptext {
        bottom: 84px;
    }
    .pagination {
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .retry {
        width: 260px;
        margin-bottom: 5px;
    }
    .continue {
        width: 260px;
    }
}


/* ------------------- button ------------------ */


/* ------------------- result ------------------ */

.result {
    margin: auto;
    display: flex;
}

.power_by {
    background-image: url(https://d1t11jpd823i7r.cloudfront.net/assessment/power_by_elsa.svg);
}

.level {
    font-family: "SF Pro Rounded", "Varela Round", sans-serif;
    font-style: normal;
    font-weight: normal;
    color: #0000006b;
}

.level>span {
    font-weight: 600;
    color: #121131;
}

.chart .naitive-score {
    font-family: "SF Pro Rounded", "Varela Round", sans-serif;
    font-style: normal;
    font-weight: bold;
    /* identical to box height, or 150% */
    text-align: center;
    /* Dark */
    color: #121131;
}

.result .text {
    margin: auto;
}

@media (min-width: 769px) {
    .chart .naitive-score {
        margin-top: 10px;
        font-size: 28px;
        line-height: 60px;
    }
    .chart {
        width: 80px;
        height: 80px;
    }
    .result .text {
        width: 260px;
        height: 139px;
    }
    .power_by {
        width: 171px;
        height: 27px;
        margin-top: 40px;
    }
    .result {
        height: auto;
    }
    .level>span {
        font-size: 18px;
    }
    .result_text_line {
        background: #e6e6e6;
        width: 128px;
        height: 1px;
        margin-top: 24px;
        margin-bottom: 23px;
    }
}

@media (max-width: 768px) {
    .resultContainer{
    	margin-top: -10px;
    }
    .chart .naitive-score {
        font-size: 20px;
        line-height: 40px;
        margin-top:20px !important;

    }
    .chart {
        width: 80px;
        height: 80px;
    }
    .radial-progress-container {
        width: 90px !important;
        height: 90px !important;
    }
    .radial-progress-container>svg {
        width: 84px !important;
        height: 84px !important;
    }
    .result .text {
        width: 160px;
        height: 101px;
    }
    .power_by {
        width: 124px;
        height: 28px;
        margin-top: 20px;
    }
    .result {
        margin-top: 6px;
        height: 144px;
    }
    .level {
        font-size: 12px;
    }
    .level>span {
        font-size: 18px;
        line-height: 16px;
        /* identical to box height, or 89% */
        display: flex;
        align-items: center;
    }
    .result_text_line {
        width: 46px;
        height: 1px;
        background: #e6e6e6;
        margin-top: 24px;
        margin-bottom: 20px;
    }
}

.score-warning {
    color: #ff7a00;
}

.score-normal {
    color: #05c150;
}

.score-error {
    color: #ff0000;
}

.m-0 {
    margin: 0 !important;
}

.test_random span {
    display: inline-block;
}

.inactive {
    cursor: not-allowed;
    opacity: 0.4;
}

.radial-progress-container {
    position: relative;
}

.radial-progress-inner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    border-radius: 50%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.playContainer,
.viewContainer {
    position: relative;
}

.tooltiptext {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 40px;
    animation: fadein 2s ease-in;
    opacity: 0;
    pointer-events: none;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.test-progress {
    max-width: 600px;
    margin: 0 auto;
    background: #EEEFF4;
    height: 10px;
    border-radius: 10px;
    position: relative;
}
.test-progress .bar {
    position: absolute;
    height: 100%;
    left: 0;
    background: linear-gradient(166.74deg, #4CD964 9.54%, #27AE60 149.18%);
    top: 0;
    border-radius: 10px;
}