* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 1rem;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    line-height: 2;
    margin: 0;
    color: #212427;
    background-color: #f5f7fa;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensures the body takes up the full viewport height */
}

input,
textarea,
select {
    font-size: 16px;
}


.custom-dropdown {border:1.5px solid lightgray; position: relative;display: inline-block; margin: 5px; padding: 4px 8px; cursor: pointer; width: 225px; border-radius: 5px; background-color: white; }
.custom-dropdown:hover {background-color: lightgray;}
.custom-dropdown-content {position: absolute; background-color: #f1f1f1;width: 200px; z-index: 1000; border:1.5px solid lightgray; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 5px; font-size: .95rem; padding: 5px 10px;
    top: 25px; 
    left: 23px;
}
.custom-dropdown-content .custom-dropdown-item {padding: 6px 6px;text-decoration: none; display: block; cursor: pointer; border-bottom:0px solid lightgray; }
.custom-dropdown-content > .custom-dropdown-item:not(:last-child) {
    border-bottom: 1px solid lightgray; /* Add your desired border style here */
}
.custom-dropdown-content .custom-dropdown-item:hover {color:#992635;}

.accents-onoff {cursor:pointer; display: none;}


.popup h2 {
    margin: auto;
}
.popup button {
    margin: auto;
}
.popup .contest {
    margin: auto;
}

.popup .page2 h2, .popup .page3 h2, .popup .page4 h2    {display: none;
}   
   
.page5 hr {margin-top:1rem; color:lightgray;}

.popup {
    width: 20rem;
    max-height: 30rem;
    min-height: 25rem;
    padding: 1rem;
    border: 1.2px solid gray;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #f0f0f0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;
    z-index: 100;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.popup h2 {
font-size: 1.45rem;
text-align: center;
line-height: 1.2;
margin-top: 1rem;
}
.popup p {
font-size: 1rem;
line-height: 1.2;
border:0px solid purple;
padding: .5rem;
}

.contest .content {display: flex;flex-direction: column; padding:10px; margin:.5rem 0rem .5rem 0rem; border: 0px solid green; line-height: 1.3;}
.contest {border: 0px solid red; margin-top: 0.5rem;}


.quiz-lines {
    display: flex;
    flex-direction: column;
    }
    
.page1 .quiz-line, .page2 .quiz-line, .page3 .quiz-line, .page5 .quiz-line {
display: flex;
align-items: center;
position: relative;
border: 0px solid red;
justify-content: space-between;
}

/* .contestScoreMessage {border: 1px solid red;} */


/* page 0 */
.page0 {width: 95%; justify-content: center; text-align: center;}

/* page 1 */

/* .page1 .pause-symbol {font-size: 1.3rem; border:0px solid red; padding-top:3px;}
.page1 .play-symbol  {font-size: 1rem; padding-top:1px;}   
.page4 .play-symbol  {font-size: 1rem; padding-bottom:3px;}   
.page4 .pause-symbol {font-size: 1.3rem; border:0px solid red; padding-bottom:4px;} */

.page1 .quiz-line.selected button {background-color: #FDCC0D; }
.page1 .quiz-line.selected button:hover {background-color: #FDCC0D;}
.page1 .quiz-line.selected.paused button {background-color: #488474;}
.page1 .quiz-line.selected.paused button:hover {background-color: #366357;}

.submit-btn {
    width: 92%;
    padding-top: .6rem;
    padding-bottom: .6rem;
    background-color: #BF3143;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: .5rem !important;
    justify-content: center; align-items: center;
    margin: auto;
    font-size: .9rem;
    }
.submit-btn:hover {background-color:#992635;}
.submit-btn.disabled {background-color: lightgray;}


.tabbi-red {background-color: #BF3143;}
.tabbi-red:hover {background-color:#992635;}

.tabbi-green {background-color: #488474;}
.tabbi-green:hover {background-color:#366357;}


.close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color:#212427;
    }


/* page 1 */
.page1 .quiz-line button {
cursor:pointer;
background-color: #488474;
color: white;
border: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
}


.page1 .quiz-line button:hover {background-color: #366357;
}


.page1 .quiz-line input
{
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    }
.page1 .quiz-line select {
flex: 1;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}

.page1 .quiz-line select {
    appearance: none;
    cursor: pointer;
    outline:none;
    }

.page1 .quiz-line select:focus {
    border-color: gray;
    background-color: #fff;
    }
    
.page1 .quiz-line option {border: 1px solid red;
}
    
.page1 .quiz-line::after {
    content: "\25BC";
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaaaaa;
}


/* page 2 */
.page2 .content {border:0px solid red; font-size: 1.5rem; line-height: 1.3; padding: 0px 10px 10px 10px;}
.page2 p {font-size: 25px;}


.page2 .button-area {display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    border: 0px solid red;}



.loading-visuals {    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #aaaaaa;}
.dot-container .dot {display: inline-block;width: 15px;height: 15px;border-radius: 15px;background-color: #aaaaaa;   position: relative; margin:.2rem;}
.dot-container .dot:nth-last-child(1) {animation: fallingAnimation 1.5s 0.6s linear infinite;}
.dot-container .dot:nth-last-child(2) {animation: fallingAnimation 1.5s 0.4s linear infinite;}
.dot-container .dot:nth-last-child(3) {animation: fallingAnimation 1.5s 0.2s linear infinite;}
    
@keyframes fallingAnimation {
    0% {transform: translate(0,-15px);opacity:0;}
    25%, 50%, 75% {transform: translate(0,0);opacity:1;}
    100% {transform: translate(0,15px);opacity:0;}
}

.page2 .tabbiai {border: 0px solid red; font-size: 1rem; color:#808080; text-align: right; margin-right: 1.5rem;}
/* End anaimation */

.page2 .fa-quote-left {border: 0px solid red; text-align: left; padding-right: 1rem; }
.page2 .fa-quote-right {border: 0px solid red; text-align: right; padding-left: 1rem;}
.tabbi-logo {border: 0px solid red; text-align: left; margin: 1rem 1rem 0rem 1rem; }
.onSubmisionMessage {border: 0px solid red; padding:0rem .5rem;}
.page2 .trainyourear {font-weight: 700; }

/* page 3 */

#recordingsList { list-style: none; padding: 0; }
#recordingsList li { margin-bottom: 10px; }
.accentScript { font-size: .9rem; border: 1px solid #aaaaaa; padding: 8px 10px; border-radius: 5px; background-color: white;}

.page3 {border: 0px solid red; }
.page3 .tabbi-logo {display: none;}
.page3 .result-text {border: 0px solid red; width: 250px; font-size: 1rem; text-align:left; font-weight: 400; }

.page3 .result-score {
    border: 0px solid red;
    width: 250px;
    font-size: 7rem;
    text-align: center;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .4rem;
    margin-top: .4rem;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
}


.score-value {
    font-size: 7rem;
    line-height: 1;
}


.page3 .percent-sign {font-size: 2rem; align-self: flex-start; margin-left:0.2rem;}


.page3 .quiz-line {border: 0px solid red; margin:0rem 3rem; text-align: left;}

.page3 .fa-check {
    color: #488474;
    text-align: center; 
    border: 0px solid blue;
    width: 30px;
    display: flex;
    align-items: center; 
    justify-content: center;
    margin: .1rem 0.5rem;
}

.page3 .fa-times {
    color: #BF3143;
    text-align: center; 
    border: 0px solid blue;
    width: 30px;
    display: flex;
    align-items: center; 
    justify-content: center; 
    margin: .1rem .5rem;
}


.add-voice-message {border: 1px solid blue; font-size: .9rem; display:none;
}

.page3 .selectedValue {font-size: .8rem;}


.page1 .button-area, .page3 .button-area, .page5 .button-area {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    border: 0px solid red;
}

.score-value {font-size: 7rem;
    line-height: 1;
    vertical-align: top;
}

/* page 4 */

.page4 .content {border: 0px solid red; line-height: 1.3;} 
.page4 .content .button-area {border: 0px solid orange; width: 100%;
    display: flex;
    flex-direction: row; 
    justify-content:space-around;
    align-items: center;
    padding: .75rem;
}
.page4 .button-area {width: 100%; border: 0px solid green; justify-content: center; text-align: center;} 
/* .page4 .submit-btn {border: 1px solid #BF3143;} */

.your-accent {border: 0px solid red; margin-bottom: 6px;} 
.your-answer {border: 1px solid #aaaaaa; border-radius: 5px; background-color: white; padding:5px; width: 100%; box-sizing: border-box; resize:none; }
.your-answer:focus {
    outline:none;
}

.accents {border: 0px solid red; border-radius: 50%; background-color: lightgray; cursor:pointer; width: 35px; height: 35px;justify-content: center;align-items: center; display: flex;text-align: center; }


.page4 .fa-circle {font-size: 1.1rem; color: #BF3143;}
.page4 .fa-circle:hover {color: #992635;}

.page4 .fa-stop {font-size: 1.1rem; color: #212427;}
.page4 .fa-stop:hover {color: #000000;}
.page4 .fa-pause {font-size: 1.1rem; color: #fff;}
.page4 .fa-pause:hover {color: #fff;}
.page4 .fa-redo {font-size: 1.3rem; color: #212427; }
.page4 .fa-redo:hover {color: #000000;}


.page4 .fa-redo {
    font-size: 1.3rem;
    color: #212427;
    -webkit-text-stroke: 1px #212427;
    -webkit-text-fill-color: #212427;
}

.page4 .fa-redo:hover {
    color: #000000;
    -webkit-text-stroke: 1px #000000;
    -webkit-text-fill-color: #000000;
}



.page4 .fa-play {font-size: 1.1rem; color: #fff;}
.page4 .fa-play:hover {color: #fff;}



.page4 .quiz-line button {
    cursor:pointer;
    background-color: #488474;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    } 
.page4 .quiz-line button:hover {background-color: #366357;}

    
.page4 .quiz-line.selected button {background-color: #FDCC0D; }
.page4 .quiz-line.selected button:hover {background-color: #FDCC0D;}


.page4 .quiz-line.selected.paused button {background-color: #488474;}
.page4 .quiz-line.selected.paused button:hover {background-color: #366357;}





.page5 .quiz-line button {
    cursor:pointer;
    background-color: #488474;
    color: white;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    }

.page5 .quiz-line button:hover {
    background-color: #366357;
    }
    

    
.page5 .quiz-line.selected button {background-color: #FDCC0D; }
.page5 .quiz-line.selected button:hover {background-color: #FDCC0D;}
.page5 .quiz-line.selected.paused button {background-color: #488474;}
.page5 .quiz-line.selected.paused button:hover {background-color: #366357;}

.page5 .quiz-line::after {display: none;
}

.page5 p {margin-top: 0rem; border:1px solid red;}
.page5 .finalPageMessage {margin: 1rem 1rem 0rem 1rem; border:0px solid green; }

    


.invisible {display:none;}