.flex_container_transcript_text_quiz_and_image {    
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: flex-start;
    padding: 20px 0px;
    position: relative; 
}

.flex_container_transcript_text_and_quiz {    
    width: 50%;
    display: flex;
    flex-direction: column; 
    align-items: stretch;
    justify-content: center;
}

.flex_container_transcript_text {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    border-radius: 7px;
    padding: 13px 10px 13px 14px;    
    margin-left: 5px;    
    margin-right: 10px;
    font-size: clamp(10px, 1vw, 15px);
    cursor: pointer;
}

.flex_container_transcript_text:hover {    
    box-shadow: 0px 0px 5px 2px #0000001a;    
}

.flex_container_transcript_text:hover .emojis_edit_button_transcript_paragraph {    
    display: flex;
}

.transcript_paragraph_higlightet {
    box-shadow: 0px 0px 5px 2px #0000001a;    
}

.transcript_timestamp {
    text-align: center;
    padding: 3px 7px;
    margin: 2px 0px;
    width: fit-content;
    margin-left: auto;
    border-radius: 5px;    
    display: flex;
    align-items: center;
    gap: 3px
}

.flex_container_transcript_text:hover .transcript_timestamp {    
    background-color: #edf6ff;
    color: #48a3eb;
    margin-top: -1px;
    margin-bottom: 5px;
}

.transcript_timestamp:hover {        
    outline: solid 2px #99d0fb; 
}

.emoji_thumbnails_below_transcript_text_section {
    padding: 0px 7px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-height: 18px;
}

.emoji_thumbnails_below_transcript_text_section:empty {
    padding: 0px 2px;
}

.img_element_emoji_transcript_paragraph {
    height: 18px;
}

.html_element_text_notes_transcript_paragraph {
    display: none;    
}

.flex_container_transcript_quiz {
    height: 100px;
    background-color: aliceblue;
    border-radius: 7px;
    margin-top: 10px;
    display: none;
}

.container_transcript_image {
    width: 50%;
    display: flex;
    align-items: center; 
    justify-content: center;    
    padding: 0px 100px;
    box-sizing: border-box;    
}

/*if there is no image to the transcript paragraph, hide the element, so that missing image placeholder is not showing*/
.container_transcript_image[src=""]  {
    visibility: hidden;
    width: 0;
    height: 0; 
}

.container_transcript_image_and_quiz {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

.container_transcript_quiz_inside_transcript {
    padding: 9px 12px 23px 12px;
    border-radius: 10px;
    /* box-shadow: 0px 0px 5px 0px #00000052; */
    border: solid 3px #f7f7f7;
    font-size: clamp(9px, 0.9vw, 14px);
    position: relative;
    display: none;
}

.question_transcript_quiz_inside_transcript {
    padding: 10px 5px clamp(0px, 1vw, 10px) 5px;
    max-width: 270px;
    color: #b1b1b1;
    line-height: 17px;
    display: inline-block;    
    width: calc(100% - 25px);    
}

.button_that_resets_status_of_trans_quiz {
    background-color: #e6f3ff;
    color: #008eff;    
    float: right;   
    margin-top: 2px; 
    font-weight: 500;
    padding: 1px 5.5px 1px 4.5px;
    border-radius: 50%;    
    cursor: pointer;
    visibility: hidden;
}

.button_that_resets_status_of_trans_quiz:hover {
    outline: solid 2px #99d0fb;
}

.container_for_quiz_answer_trans_quiz_inside_transcript {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 310px;
}

.container_trans_quiz_response_button {

}

.quiz_answer_tab_tran_quiz {
    text-align: center;
    min-width: 60px;    
    padding: 7px 10px;
    background: #f3f9ff;
    border: 2px solid #f3f9ff;
    border-radius: 5px;
    cursor: pointer;
    color: #6680bd;
    user-select: none; /* Disable text selection */    
}

.quiz_answer_tab_tran_quiz:hover {
    border-color: #dceeff !important;
}

.quiz_answer_tab_tran_quiz.user_have_delivered_correct_ans_alt:hover {
    border-color: #c7ff72;
}

.quiz_response_tran_quiz_button_orange {
    display: none;
    background: linear-gradient(to bottom, #f4c414 0%, #fea856 100%);
    padding: 10px 10px;
    border-radius: clamp(6px, 0.5vw, 10px);
    color: #fff;
    font-weight: 500;
    font-size: clamp(9.5px, 0.85vw, 14px);
    text-align: center;
    letter-spacing: .15px;
    text-shadow: 0 0 10px rgb(227 147 0);
    margin-top: 10px;
    cursor: pointer;
}

.feedback_transcript_quiz_hr_element {
    width: 100%;
    margin-top: 10px;
    border-bottom: solid lightgrey 1.5px;
    position: relative;
}

.feedback_transcript_quiz_close_button {
    color: rgb(33, 33, 33);
    font-family: 'Times New Roman', Times, serif;
    font-size: clamp(25px, 4vw, 35px);
    font-weight: 400;
    position: absolute;
    text-align: right;    
    cursor: pointer;
    right: 0;
}

.feedback_transcript_quiz_notification_message {
    margin-top: 35px;
}

.feedback_transcript_quiz_reset_button {
    color: white;
    background-color: lightgrey;
    border-radius: 7px;
    width: fit-content;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
}

.quiz_answer_tab_tran_quiz.user_have_delivered_correct_ans_alt {
    background: #e3ffb9;
    border: 2px solid #c7ff72;
    color: #48812f;
}

.container_emojis_and_edit_button_transcript_paragraph {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;  
    margin-top: 10px;
    margin-bottom: 3px;  
}

.emojis_edit_button_transcript_paragraph {
    width: 18px;
    height: 18px;
    margin-left: 2px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #54b2fd;
    background-color: #e2f1ff;
    border-radius: 50%;
    display: none;
}

.emojis_edit_button_transcript_paragraph:hover {    
    outline: solid 2px #99d0fb; 
}


@media screen and (max-width: 480px) {

    .flex_container_transcript_text_quiz_and_image {
        flex-wrap: wrap; 
    }

    .flex_container_transcript_text_and_quiz, 
    .container_transcript_image, 
    .container_transcript_image_and_quiz 
    {
        width: 100%;
    }

}