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

br + br {
    content: "";
    display: block;
    margin-top: 1em; /* ensure that there are 2 line breaks - needed for Firefox */
}

body, html {
    background-color: black;
    border-style: none;
    height: 100%;
    margin: 0;
    justify-content: center;
    align-items: center;
}

.ui-dialog {
    z-index: 3000 !important;
    text-align: center;
}

.tooltip_rectangle {
    position: absolute;
    top: 10%;
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Offset to truly center */
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: #f0f0f0;
    border: 1px solid #000;
    text-align: center;
    padding: 0.5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

    white-space: nowrap;
    font-size: 1vw;
    font-weight: bold;
    font-family: "Arial Rounded MT", sans-serif;

    z-index: 1000;
}

.graphic_field, .hotspot_field, .progressmap_field, .backgrnd
{
    width:	100%;
    height: auto;
}

.qst_graphic_field {
    position: relative;
    width:	100%;
    height: auto;
    z-index: 0;
}

.qst_bg_image {
    width: 100%;
    height: auto;
}

.qst_overlay_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;     /* needs to be 75% since 1440x1080 image */
    height: auto;
    margin-left: 25%;
}

.button_list {
    position: absolute;
    top: 4%;
    left: 5%;
    width:	15%;
    display: flex;
    flex-direction: column;
    margin-top: 2%; /* Added margin for spacing */
}

.button_item {
    display: flex;
    padding-left: 2%; /* Indent buttons from the left */
    margin-bottom: 60%; /* Spacing between each button-label pair */
}

.qst_btn1, .qst_btn2, .qst_btn3,
.qst_btn4, .qst_btn5, .qst_btn6,
.qst_btn1_png, .qst_btn2_png, .qst_btn3_png,
.qst_btn4_png, .qst_btn5_png, .qst_btn6_png {
    position: absolute;

    left: 0;
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    object-fit: cover;
    display: flex;
}

.qst_btn1, .qst_btn2, .qst_btn3,
.qst_btn4, .qst_btn5, .qst_btn6 {
    z-index: 0; /* Bottom image */
}

.qst_btn1_png, .qst_btn2_png, .qst_btn3_png,
.qst_btn4_png, .qst_btn5_png, .qst_btn6_png {
    z-index: 0;
}

/* only used for non-Marcom courses
.qst_btn1_label, .qst_btn2_label,
.qst_btn3_label, .qst_btn4_label,
.qst_btn5_label, .qst_btn6_label
{
    margin-top: 1%;

    left: 0;
    width: 15%;
    height: auto;
    object-fit: cover;

    text-shadow: 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -2px 0 0 #000;
    font: 	bold 2.1rem Arial,serif;
    color:	#ffffff;
    text-align: center;
}
*/

.menu_qst_field {
    width:	100%;
    height: auto;
}

.menu_bg_image {
    width: 100%;
    height: auto;
}

.menu_title {
    position: absolute;
    top: 1.8%;
    left: 0%;
    width:	100%;
    height: 3vh;
    display: flex;
    flex-direction: column;

    font:	bold 2.3vw "Arial rounded MT";
    color:	#000000;
    text-align:	center;
    text-decoration:	underline;
    margin-top: 1vh; /* Added margin for spacing */
}

.menu_list {
    position: absolute;
    top: 12%;       /* put below menu title */
    left: 0%;
    width:	100%;
    display: flex;
    flex-direction: column;
    margin-top: 2%; /* Added margin for spacing */
}

.menu_item {
    display: flex;
    padding-left: 12%; /* Indent buttons from the left */
    margin-bottom: 1.6%; /* Spacing between each button-label pair */
}

.menu_btn1, .menu_btn2, .menu_btn3, .menu_btn4,
.menu_btn5, .menu_btn6, .menu_btn7, .menu_btn8
{
    margin-top: 1%; /* Added margin for spacing */
    width:  2%;
    height: 2%;
}

.menu_btn1_label, .menu_btn2_label, .menu_btn3_label, .menu_btn4_label,
.menu_btn5_label, .menu_btn6_label, .menu_btn7_label, .menu_btn8_label
{
    width:	auto;
    margin-left: 1.8vw; /* Added margin for spacing next to the buttons */

    color:	#000000;

    font: bold 1.8vw "Arial Rounded MT";
}

.textqst_bg_image {
    width: 100%;
    height: auto;
}

.textqst_content {
    position: absolute;
    top: 0%;
    left: 0%;
    width:	100%;
    height: auto;
    display: flex;
    flex-direction: column;

    font:	bold 4vw "Arial Rounded MT";
    color:	#000000;
    text-align:	center;
}

.textqst_field {
    height:	auto;
    width:	75%;

    overflow: hidden;
}

#video {
    position: absolute;
    left: 29.5%;
    top: 6.7%;
    width: 70.5%;
    height: auto;
}

video::cue {
    position: absolute;
    bottom: 10%;
    word-wrap: normal;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
}

video::cue(v) {         /* <v Narrator: ></v>How's your back? */
    color: red;
    font-weight: bold;
}

video::cue(c) {     /* <c>[Applause and cheering]</c> */
    color: yellow;
    font-style: italic;
    font-size: 14px;
}

/* start nav bar assets */
.navbar {
    position: relative;
    width:    100%;
    height:   5vh;
    display: flex;
    z-index: 2000;
    background-color: #404040;
    border-radius: 25px;
    opacity: 0.75;
}

.exit_btn, .next_btn, .hi_res_btn, .lo_res_btn, .back_btn, .audio_pause_btn, .audio_play_btn, .audio_replay_btn,
.about_btn, .print_btn, .fullscreen_btn, .pin_btn, .unpin_btn, .CC_btn, .video_play_btn, .video_pause_btn, .qst_exit_btn,
.video_replay_btn, .video_rewind_btn, .progmap_btn, .menu_btn, .next_mod_btn, .video_ff_btn, .video_sf_btn, .video_sb_btn, .video_time,
.access_btn, .message
{
    position: absolute;
    width:  4.2%;
    height: auto;
    display: flex;
}

.exit_btn {
    left:	95%;
}

.next_btn {
    left:	75%;
}

.hi_res_btn {
    left:	20%;
}

.lo_res_btn {
    left:	25%;
}

.access_btn {
    left:	30%;
}

.back_btn {
    left:	 70%;
}

.audio_pause_btn {
    left:	90%;
}

.audio_play_btn {
    left:	90%;
}

.audio_replay_btn {
    left:	 85%;
}

.about_btn {
    left:	 15%;
}

.print_btn {
    left:	7%;
}

.fullscreen_btn {
    left:	  10%;
}

.next_mod_btn {
    left:	  20%;
}

.message {
    top: 15%;
    left:	40%;
    width:  40%;
}

.pin_btn {
    left:   45%;
}

.unpin_btn {
    left:   45%;
}

.CC_btn {
    left:	35%;
}

.video_play_btn {
    left:	 60%;
}

.video_pause_btn {
    left:	 60%;
}

.video_replay_btn {
    left:	 85%;
}

.video_rewind_btn {
    left:	 50%;
}

.qst_exit_btn {
    left:	 50%;
}

.menu_btn {
    left:	 65%;
    display:    none;
}

.video_ff_btn {
    left:	 55%;
}

.video_sf_btn {
    left:	 45%;
}

.video_sb_btn {
    left:	 40%;
}

.video_time {
    left:	 0%;
    width: 100px;
    border: 1px solid black;
    background-color: #ffffff;
    text-align: center;
}

/* end nav bar assets */


.correct_ans, .incorrect_ans {
    position:   absolute;
    top:    89%;
    left:   25%;
    width:  75%;
    height: 10%;
    display: flex;
    z-index: 1000;
}


.msg_field_graphic {
    width:	100%;
    height: auto;
}

.msg_bg_image {
    width: 100%;
    height: auto;
}

.msg_text {
    position: absolute;
    top: 20%;   /* allow for border */
    left: 8%;   /* allow for border */
    width:	85%;
    height: 90%;
    display: flex;
    flex-direction: column;

    font:	bold 2.4vw Arial rounded MT;
    color:	#000000;
    text-align:	center;
    z-index: 100;   /* place above msg_bg_image */
}


/* no longer used in Marcom courses */
.text_field {

    position:	absolute;
    background-color:   #ffffff;
    top:		  20px;
    left:		275px;
    width:		841px;
    height:	455px;
    padding-top: 25px;
    padding-left: 6px;
    display: flex;

    font:	bold 4vw "Arial Rounded MT";
    color:  #ffffff;
    text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;

    text-align:	left;
    word-wrap:  break-word;
    overflow-y:	scroll;
    white-space:pre-wrap;
}

.adl_roadmap {
    width:	100%;
    height: auto;
}

.adl_bg_image {
    width: 100%;
    height: auto;
}

.adl_list {
    position: absolute;
    top: 12vh;       /* put below adl title */
    left: 0%;
    width: 100%;

    display: flex;
    flex-direction: column;
}

.adl_item {
    display: flex;
    padding-left: 4%; /* Indent buttons from the left */
    width: 100%;
}

.chapter_name {

    width:	auto;
    word-break: break-word;
    overflow-wrap: break-word;
    display: flex;
    flex: 1;
    min-width: 0;

    font: italic bold 1.79vw "Arial Rounded MT";
    text-shadow:
        -1px -1px 0 #B0B0B0,
        1px -1px 0 #B0B0B0,
        -1px  1px 0 #B0B0B0,
        1px  1px 0 #B0B0B0;
}

.chapter_name_ck {

    margin-left: 1vw;
    width: 1.7vw;
    height: 1.7vw;
    display: flex;
    flex-shrink: 0;
}

/* styling for landscape mode on laptop */
@media (orientation: landscape) and (min-width: 1000px) {

    video::cue {
        font: bold 1.2vw Arial, serif;
    }
}