#app {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'examheader'
        'examcontent'
        'examfooter';
}

#app > examheader {
    grid-area: examheader;
}

#app > examcontent {
    grid-area: examcontent;
    overflow: auto;
    padding: 15px 5px 10px 5px;
}

#app > examfooter {
    grid-area: examfooter;
}

#examapp {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        'examheader'
        'examcontent'
        'examfooter';
}

#examapp > examheader {
    grid-area: examheader;
}

#examapp > examcontent {
    grid-area: examcontent;
    overflow: auto;
    padding: 15px 5px 10px 5px;
}

#examapp > examfooter {
    grid-area: examfooter;
}

#titlebar {
    width: 100%;
    margin: 0;
    padding-bottom: 10px;
    top: 0;
    color: #FFFFFF;
    background-color: #00083a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#titlebar-title {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Tahoma !important;
    font-size: 16pt !important;
    font-weight: normal !important;
    color: #FFFFFF;
    background-color: #00083a;
}

#titlebar-info {
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: Tahoma !important;
    font-size: 14pt !important;
    font-weight: normal !important;
}

#toolbar {
    clear: both;
    width: 100%;
    border-bottom: 2px solid #00083a;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: lightgrey;
    font-size: 12pt;
    font-weight: normal;
    text-align: center;
}

#toolbar-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 2px;
    padding-bottom: 2px;
    align-items: center;
    justify-content: center;
}

.toolbar-icon {
    height: 30px;
    padding-right: 5px;
}

.toolbar-item {
    height: 30px;
}

#examcontentbar {
    width: 100%;
    margin: 0 0 2px 0;
    visibility: visible;
    display: block;
    background-color: white;
    overflow: auto;
    bottom: 40px;
    padding: 20px 20px 20px 20px;
    font-family: Tahoma !important;
    font-size: 12pt !important;
    font-weight: normal !important;
    color: #000000;
}

.examcontent-stem {
    display: block;
    padding-bottom: 30px;
}

.examcontent-distractor {
    display: block;
    padding-bottom: 20px;
}

.examcontent-distractor-radio {
    display: inline;
    padding-right: 5px;
}

.examcontent-distractor-letter {
    display: inline;
    padding-right: 10px;
}

.examcontent-distractor-text {
    display: inline;
}


.examfooter {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px; /* Set the fixed height of the footer here */
    line-height: 60px; /* Vertically center the text there */
    background-color: #f5f5f5;
}

#infobar {
    width: 100%;
    margin: 0;
    border-bottom: 2px solid #FFFFFF;
    padding: 0;
    color: #FFFFFF;
    background-color: #00083a;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#infobar-item {
    float: left;
    margin-left: 2px;
    color: #FFFFFF;
    text-align: left;
    padding-left: 5px;
}

#infobar-time {
    float: right;
    margin-right: 2px;
    color: #FFFFFF;
    text-align: right;
    padding-right: 5px;
}

#contentPane {
    width: 100%;
    margin: 0 0 2px 0;
    visibility: visible;
    display: block;
    background-color: white;
    overflow: auto;
    bottom: 40px;
    padding: 20px 20px 20px 20px;
}

#navigationbar {
    border-top: 0px solid #0000FF;
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 6px;
    color: #FFFFFF;
    background-color: #00083a;
    text-align: center;
    display: inline-block;
    float: none;
}

@media (min-width: 992px) {
    #lecturevideo {
        width: 100%;
        max-width: 800px;
    }

    .splitmain {
        height: calc(100% - 144px);
        width: calc(100% - 80px);
        position: fixed;
        z-index: 1;
        top: 84px;
        overflow-x: hidden;
    }

    .splitside {
        height: calc(100% - 144px);
        width: 80px;
        position: fixed;
        z-index: 1;
        top: 84px;
        overflow-x: hidden;
        padding-top: 20px;
        background-color: white;
        right: 0;
        text-align: center;
    }

    .toolbar-tools {
        height: 50px;
    }

    .abpath-font-titlebar {
        font-family: Tahoma;
        font-size: 16pt;
        font-weight: normal;
    }

    .abpath-font-infobar {
        font-family: Tahoma;
        font-size: 14pt;
        font-weight: normal;
    }

}


@media (min-width: 768px) and (max-width: 991.98px) {
    #lecturevideo {
        width: 100%;
        max-width: 100%
    }

    .splitmain {
        height: calc(100% - 117px);
        width: calc(100% - 80px);
        position: fixed;
        z-index: 1;
        top: 57px;
        overflow-x: hidden;
    }

    .splitside {
        height: calc(100% - 117px);
        width: 80px;
        position: fixed;
        z-index: 1;
        top: 57px;
        overflow-x: hidden;
        padding-top: 20px;
        background-color: white;
        right: 0;
        text-align: center;
    }

    .toolbar-tools {
        height: 40px;
    }

    .abpath-font-titlebar {
        font-family: Tahoma;
        font-size: 14pt;
        font-weight: normal;
    }

    .abpath-font-infobar {
        font-family: Tahoma;
        font-size: 12pt;
        font-weight: normal;
    }
}

@media (max-width: 767.98px) {
    #lecturevideo {
        width: 100vw;
        max-width: 100%;
    }

   .splitmain {
        height: calc(100% - 109px);
        width: calc(100% - 80px);
        position: fixed;
        z-index: 1;
        top: 49px;
        overflow-x: hidden;
    }

    .splitside {
        height: calc(100% - 109px);
        width: 80px;
        position: fixed;
        z-index: 1;
        top: 49px;
        overflow-x: hidden;
        padding-top: 20px;
        background-color: white;
        right: 0;
        text-align: center;
    }

    .toolbar-tools {
        height: 30px;
    }

    .abpath-font-titlebar {
        font-family: Tahoma;
        font-size: 12pt;
        font-weight: normal;
    }

    .abpath-font-infobar {
        font-family: Tahoma;
        font-size: 10pt;
        font-weight: normal;
    }
}


.abpath-font-Large {
    font-family: Tahoma !important;
    font-size: 16pt !important;
    font-weight: normal !important;
}

.abpath-font-Normal {
    font-family: Tahoma !important;
    font-size: 14pt !important;
    font-weight: normal !important;
}

.abpath-font-Small {
    font-family: Tahoma !important;
    font-size: 12pt !important;
    font-weight: normal !important;
}

.abpath-font-ToolTip {
    font-family: Tahoma !important;
    font-size: 10pt !important;
    font-weight: normal !important;
}

.abpath-font-ItemText {
    font-family: Tahoma !important;
    font-size: 12pt !important;
    font-weight: normal !important;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.stem-text {
    font-family: Verdana, sans-serif;
    font-size: 12pt;
    padding-bottom: 20px;
}

.distractor-row {
    padding-bottom: 20px;
    font-family: Verdana;
    font-size: 12pt;
}

.distractor-radio-button {
    display: inline-block;
    width: 25px;
}

.distractor-label {
    display: inline-block;
    width: 40px;
}

.distractor-text {
    display: inline-block;
}

.vm-button {
    display: inline-block;
    padding: 10px 10px 10px 10px;
}



#examinstructionheader {
    background-color: lightgray;
    color: black;
    font-size: larger;
    text-align: center;
    border: solid;
    border-color: darkgrey;
    padding: 5px;
    border-radius: 5px;
}

#examinstructionheaderwarning {
    background-color: mistyrose;
    color: red;
    font-size: large;
    text-align: center;
    border: solid;
    border-color: darkgrey;
    padding: 5px;
    border-radius: 5px;
}

#examinstructionbeginexam {
    background-color: blue;
    border: solid;
    border-color: darkblue;
    padding: 5px;
    border-radius: 5px;
    font-size: xx-large;
    text-align: center;
    color: white;
}

.btn-beginsubmit {
    font-size: xx-large;
    text-align: center;
    color: white;
}


li {
    padding-bottom: 10px;
}



/* Provide sufficient contrast against white background */
a {
    color: #0366d6;
}

input, select, textarea {
}

.abpathreadonly {
    color: red !important;
    font-size: small;
}

.bg-abpathadd {
    color: black !important;
    background-color: lawngreen !important;
    border-color: lawngreen !important;
}

    .bg-abpathadd:hover, a.bg-abpathadd:focus,
    button.bg-abpathadd:hover,
    button.bg-abpathadd:focus {
        color: white !important;
        background-color: green !important;
        border-color: green !important;
    }

.bg-abpathdelete {
    color: black !important;
    background-color: #FB1717 !important;
    border-color: #FB1717 !important;
}

    .bg-abpathdelete:hover, a.bg-abpathdelete:focus,
    button.bg-abpathdelete:hover,
    button.bg-abpathdelete:focus {
        color: white !important;
        background-color: darkred !important;
        border-color: darkred !important;
    }

.card {
    border: 3px solid #003da5;
    border-radius: .8rem;
    margin-bottom: 10px;
}

    .card p {
        color: darkblue;
        font-size: 1.5em;
        font-weight: bolder
    }

.bg-abpath {
    background-color: #558fde !important;
    border-color: #558fde !important;
}

    .bg-abpath:hover, a.bg-abpath:focus,
    button.bg-abpath:hover,
    button.bg-abpath:focus {
        color: #fff !important;
        background-color: #6c757d !important;
        border-color: #6c757d !important;
    }

.bg-abpathalt1 {
    background-color: #8db600 !important;
    border-color: #8db600 !important;
}

    .bg-abpathalt1:hover, a.bg-abpathalt1:focus,
    button.bg-abpathalt1:hover,
    button.bg-abpathalt1:focus {
        color: #fff !important;
        background-color: #e75480 !important;
        border-color: #e75480 !important;
    }



.navbar-brand {
    float: left;
    padding: 15px;
    font-size: 18px;
    line-height: 20px;
    height: 50px;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
}

body {
    /* Margin bottom by footer height */
    margin-bottom: 60px;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px; /* Vertically center the text there */
}

.whatsnextbutton {
    display: inline-block;
    outline: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font: 14px/100% Arial, Helvetica, sans-serif;
    padding: .5em 2em .55em;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-border-radius: .5em;
    -moz-border-radius: .5em;
    border-radius: .5em;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    width: 150px;
}

.whatsnextbutton:hover {
    text-decoration: none;
    color: black;
}

.whatsnextbutton:active {
    position: relative;
    top: 1px;
}

.orange {
    color: #fef4e9;
    border: solid 1px #da7c0c;
    background: #f78d1d;
    background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
    background: -moz-linear-gradient(top, #faa51a, #f47a20);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}

.orange:hover {
    background: #f47c20;
    background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
    background: -moz-linear-gradient(top, #f88e11, #f06015);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

.orange:active {
    color: #fcd3a5;
    background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
    background: -moz-linear-gradient(top, #f47a20, #faa51a);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

.blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top, #00adee, #0078a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
}

.blue:hover {
    background: #007ead;
    background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
    background: -moz-linear-gradient(top, #0095cc, #00678e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0095cc', endColorstr='#00678e');
}

.blue:active {
    color: #80bed6;
    background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
    background: -moz-linear-gradient(top, #0078a5, #00adee);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0078a5', endColorstr='#00adee');
}

.rosy {
    color: #fae7e9;
    border: solid 1px #b73948;
    background: #da5867;
    background: -webkit-gradient(linear, left top, left bottom, from(#f16c7c), to(#bf404f));
    background: -moz-linear-gradient(top, #f16c7c, #bf404f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c', endColorstr='#bf404f');
}

.rosy:hover {
    background: #ba4b58;
    background: -webkit-gradient(linear, left top, left bottom, from(#cf5d6a), to(#a53845));
    background: -moz-linear-gradient(top, #cf5d6a, #a53845);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cf5d6a', endColorstr='#a53845');
}

.rosy:active {
    color: #dca4ab;
    background: -webkit-gradient(linear, left top, left bottom, from(#bf404f), to(#f16c7c));
    background: -moz-linear-gradient(top, #bf404f, #f16c7c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bf404f', endColorstr='#f16c7c');
}

.green {
    color: #e8f0de;
    border: solid 1px #538312;
    background: #64991e;
    background: -webkit-gradient(linear, left top, left bottom, from(#7db72f), to(#4e7d0e));
    background: -moz-linear-gradient(top, #7db72f, #4e7d0e);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7db72f', endColorstr='#4e7d0e');
}

.green:hover {
    background: #538018;
    background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c));
    background: -moz-linear-gradient(top, #6b9d28, #436b0c);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b9d28', endColorstr='#436b0c');
}

.green:active {
    color: #a9c08c;
    background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f));
    background: -moz-linear-gradient(top, #4e7d0e, #7db72f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e7d0e', endColorstr='#7db72f');
}