.border-primary {
    border-color: #fe5e10 !important
}

.border-left {
    border-left: 2px solid
}

.btn-outline-primary {
    color: #fe5e10 !important;
    border-color: #fe5e10 !important
}

.btn-outline-primary:active {
    background-color: #fe5e10 !important
}

.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.2rem #ed5f2a
}

.btn-primary {
    background-color: #fe5e10 !important
}

.btn-primary:disabled {
    background-color: #f0f2f5 !important;
    box-shadow: none
}

.btn-info:disabled {
    color: #000;
    background-color: #f0f2f5 !important;
    box-shadow: none
}

.text-xs {
    font-size: 01.75rem;
}

.text-dark {
    color: #101010 !important
}

.text-grey {
    color: #767676 !important
}

.bg-dark {
    background-color: #101010 !important
}

.bg-grey {
    background-color: #e5e5e5 !important;
}

.btn-text {
    font-weight: bold;
    color: #ccc;
    border-bottom: 1px #ccc solid;
}

.btn-text:hover {
    color: #7b809a;
    border-bottom: 1px #7b809a solid;
}

.btn-text-primary {
    color: #fe5e10;
    border-bottom: 1px #fe5e10 solid;
}

.ml-5 {
    margin-left: 3rem !important
}

.mr-5 {
    margin-right: 3rem !important
}

.mr-3 {
    margin-right: 1rem !important
}

.mr-2 {
    margin-right: 0.5rem !important
}

.sidenav {
    z-index: 999
}

.modal-dialog {
    margin-left: 8rem;
    max-width: 90%
}

.modal-content.full-screen {
    height: 95vh
}

.modal-content .config-modal {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 4
}

.modal-content .config-modal .modal-overlay {
    top: 0;
    left: 0;
    opacity: 50%;
    z-index: 9998
}

.modal-content .config-modal .card {
    z-index: 9999
}

.modal-content .modal-nav {
    top: 0;
    right: 2rem;
    bottom: 0
}

.nav-modal .material-icons {
    width: 20px;
    height: 20px;
    font-size: 1.3rem
}

#modalHeader .btn-close {
    top: 0.5rem;
    right: 1.5rem
}

.card {
    box-shadow: -2px 2px 7px 0px rgba(0, 0, 0, 0.2)
}

.card:hover[data-animation="true"] .card-header {
    transform: translate3d(0, -10px, 0)
}

.card .image-overlay {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 0.45rem
}

.form-check:not(.form-switch) .form-check-input[type="radio"]:checked {
    border-color: #fe5e10 !important
}

.form-check:not(.form-switch) .form-check-input[type="radio"]:after {
    background-image: none;
    background-color: #fe5e10 !important
}

#fullscreenOptions .material-icons,
#closeFullScreen .material-icons {
    font-size: 2rem
}

#quiz-container label {
    min-height: 100%
}

#quiz-container .form-check-input {
    max-width: 20px;
    min-height: 20px;
    width: 100%;
    float: none;
    margin-left: 0
}

.full-video .modal-dialog {
    max-width: 100vw;
    max-height: 100vh;
    width: 100%;
    height: 100%;
    margin: 0
}

.full-video .modal-dialog .modal-content {
    height: 100%
}

.full-video .modal-module-header {
    display: none !important
}

.full-video .modal-nav {
    display: none !important
}

.full-video .modal-body {
    padding: 1rem;
    height: 100%;
    display: flex;
    align-items: center
}

.full-video #video-container {
    margin: 0 !important;
    width: 100%;
    height: 100%
}

.full-video .w-lg-70 {
    width: 100% !important;
    height: 95%
}

.full-video .w-lg-70>.container {
    max-width: 100%
}

.full-video #video_player {
    background-color: #000;
    border-radius: 0.25rem;
    overflow: visible !important
}

.full-video .close-fullscreen {
    display: flex !important
}

.full-video .fullscreen {
    display: none
}

.full-video .controls {
    bottom: 0
}

.full-video #modalHeader {
    display: none
}

.full-video .nav-modal {
    display: none
}

.full-video .video-wrapper {
    width: 90% !important
}

.full-video #videoPlayer {
    max-height: 95vh
}

.controls-left .material-icons {
    font-size: 1.75rem
}

.controls-left .speedBtn:after {
    content: '1x';
    position: absolute;
    right: 0;
    bottom: 0;
    color: #fe5e10 !important;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 900
}

#closeFullScreen {
    top: -1rem;
    right: -1rem;
    z-index: 2
}

.card-header.completed .d-none {
    display: block !important
}

.card-header.completed .material-icons {
    top: 1rem;
    right: 1rem
}

.card-header.completed:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fe5e10 !important;
    opacity: 85%;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center
}

#videoControls {
    bottom: 7px;
    right: 1px;
    left: 0;
    height: 60px;
    background-color: rgba(16, 16, 16, 0.8) !important
}

#videoControls .btn img {
    max-width: 35px
}

#videoControls .video-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.2)
}

#videoControls .video-progress .noUi-base {
    height: 6px
}

#videoControls .video-progress .noUi-connects {
    height: 6px;
    border-radius: 0
}

#videoControls .video-progress .noUi-connects .noUi-connect {
    background: #fe5e10 !important
}

#videoControls .volume-wrapper {
    width: 100%
}

#videoControls .volume {
    height: 4px
}

.quiz-wrapper .form-check-input {
    width: 1.5rem;
    height: 1.5rem;
    transition: none
}

.quiz-wrapper .form-check-input[type="checkbox"] {
    border-radius: 50%
}

.quiz-wrapper .form-check-input[type="checkbox"]:after {
    border: 2px solid white;
    border-radius: 50%;
    color: #fe5e10 !important;
    transition: none !important
}

.quiz-wrapper .custom-control-label {
    flex-basis: min-content;
    flex-grow: 1
}

#correctionOptions {
    max-height: 85vh;
    overflow-y: visible
}

#correctionOptions .correction-content {
    max-height: 80vh
}

@media screen and (max-width: 767px) {
    #videoControls {
        height: 45px
    }
}

.study-guide-wrapper>.row:not(:first-child) {
    min-height: 290px
}

.study-guide-wrapper>.row:not(:first-child) .icon-lg {
    min-width: 64px
}

.study-guide-wrapper .progress-wrapper {
    min-width: 250px
}

.study-guide-wrapper .slick-list {
    padding: 1rem 0
}

.study-guide-wrapper .slick-next {
    display: none
}

.study-guide-wrapper .slick-prev {
    display: none
}

.study-guide-wrapper .next-item {
    z-index: 2;
    left: 7.5rem
}

.study-guide-wrapper .previous-item {
    right: 50px
}

.card-study-guide {
    /* min-width: 280px; */
    max-width: 340px;
    min-height: 243px;
    box-shadow: 0 3px 4px 3px rgba(0, 0, 0, 0.2)
}

.card-study-guide.border-left {
    border-left-width: 4px
}

.streamcast-link {
    color: #0000EE
}

.promo-code-container {
    --bs-gutter-x: 1em;
    margin: 0 auto;
}

.promo-code {
    width: 100%;
}

.promo-code-card {
    border-radius: 1em;
}

.promo-input {
    margin: 0;
    padding: 5px 7px;
    border: 1px solid #7b809a;
    border-right: 0;
    border-radius: 5px 0 0 5px;
    font-size: 0.825rem;
    line-height: 20px;
    width: 180px;
}

.btn-promo,
.btn-promo-remove {
    margin: 0;
    border-radius: 0 5px 5px 0;
    padding: 5px 10px;
    line-height: 22px;
    width: 80px;
}

.promo-applied {
    color: #0e930b !important;
    font-weight: bold;
    font-size: 0.875rem !important;
    line-height: 1.5;
}

.promo-code .error-message {
    color: #F44335 !important;
    font-weight: bold;
    font-size: 0.875rem !important;
    line-height: 1.5;
}

.upgrade-plan-options label {
    height: 40px
}

.upgrade-plan-options .btn-outline-primary {
    text-transform: capitalize;
    font-size: 1rem;
    line-height: 1rem;
    font-weight: normal;
    background-color: #f8f9fa;
    border-color: transparent !important;
    border-width: 3px;
    color: #000000 !important
}

.upgrade-plan-options .btn-check:checked+.btn-outline-primary,
.upgrade-plan-options .btn-check:active+.btn-outline-primary,
.upgrade-plan-options .btn-outline-primary:active {
    background-color: #ed5f2a;
    color: #fff !important;
    border-radius: 5px;
    border-color: #ed5f2a !important;
    border-width: 2px;
    box-shadow: none
}

.upgrade-card {
    background-color: #fff;
    width: 30%;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    border-radius: 1em;
    margin-bottom: 3rem;
    min-height: 500px;
}

#course-preview {
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
}

#course-preview.course-image {
    background-size: contain;
    min-height: 614px;
}

#course-preview.course-image p {
    color: #7b809a !important;
    display: none !important;
}

#course-preview.course-image .title,
#course-preview.course-image .desc {
    color: #101010 !important;
    display: none !important;
}

#course-preview p,
#course-preview h2 {
    color: #f0f2f5
}

#course-only .rounded-pill,
#signature-only .rounded-pill {
    width: 125px;
    height: 2em;
    background-color: #000000;
    color: #f0f2f5
}

#course-only sup,
#course-only sub,
#signature-only sup,
#signature-only sub {
    font-size: 1.125rem
}

#course-only sup,
#signature-only sup {
    top: -1.8em
}

#course-only .d-flex h1,
#signature-only .d-flex h1 {
    font-size: 3rem;
    margin-left: 0 !important;
    letter-spacing: 1px
}

#course-only h1,
#signature-only h1 {
    font-size: 4rem;
    margin-left: 1.6em
}

#course-only a,
#signature-only a {
    color: #ed5f2a
}

#signature-only .rounded-pill {
    background-color: #ed5f2a
}

.profile-icon-360 {
    width: 40px
}

.search-emma {
    height: fit-content;
    align-self: center
}

.noUi-horizontal .noUi-handle {
    height: 16px;
    width: 16px;
    border: none
}

.noUi-horizontal .noUi-origin {
    transition: auto 0s ease 0s
}

.animate-shadow .card {
    animation-name: animate;
    animation-duration: 3s
}

.animate-shadow .card .card {
    animation-duration: 5s
}

#flashcard-modal-container .btn-close {
    background: none;
}

#viewNotificationsModal .modal-header {
    border: 0;
}

#viewNotificationsModal .modal-body,
#viewNotificationInfoModal .modal-body {
    color: #101010;
    font-size: 14px !important;
    max-height: calc(100vh - 10em);
}

#viewNotificationsModal .modal-body p,
#viewNotificationInfoModal .modal-body p {
    font-size: 16px !important;
}

#viewNotificationsModal .noti-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 2.25em;
}

mjx-msup mjx-script,
mjx-msubsup mjx-script,
mjx-msub mjx-script,
mjx-msup.show-answer mjx-script,
mjx-msubsup.show-answer mjx-script,
mjx-msub.show-answer mjx-script,
.show-answer mjx-msup mjx-script,
.show-answer mjx-msubsup mjx-script,
.show-answer mjx-msub mjx-script,
mjx-msup mjx-script.show-answer,
mjx-msubsup mjx-script.show-answer,
mjx-msub mjx-script.show-answer {
    font-size: 0.9em !important;
    vertical-align: 0.8em !important;
    display: inline-block !important;
    line-height: 0 !important;
    transform: translateY(-0.5em) !important;
}

mjx-msup mjx-script mjx-mn,
mjx-msubsup mjx-script mjx-mn,
mjx-msub mjx-script mjx-mn,
.show-answer mjx-msup mjx-script mjx-mn,
.show-answer mjx-msubsup mjx-script mjx-mn,
.show-answer mjx-msub mjx-script mjx-mn,
mjx-script.show-answer mjx-mn,
mjx-mn.show-answer[size="s"],
mjx-mn[size="s"] {
    font-size: 1em !important;
}

mjx-msup mjx-script mjx-mn mjx-c,
mjx-msubsup mjx-script mjx-mn mjx-c,
mjx-msub mjx-script mjx-mn mjx-c,
.show-answer mjx-msup mjx-script mjx-mn mjx-c,
.show-answer mjx-msubsup mjx-script mjx-mn mjx-c,
.show-answer mjx-msub mjx-script mjx-mn mjx-c,
mjx-script.show-answer mjx-mn mjx-c,
mjx-c.show-answer,
mjx-mn[size="s"] mjx-c {
    font-size: 1em !important;
}

/* Override inline vertical-align styles */
mjx-script[style*="vertical-align"],
.show-answer mjx-script[style*="vertical-align"],
mjx-script.show-answer[style*="vertical-align"] {
    vertical-align: 1em !important;
    font-size: 0.9em !important;
    display: inline-block !important;
    line-height: 0 !important;
    transform: translateY(-0.5em) !important;
}

.show-answer sup,
.modal-body mjx-msup mjx-script,
.modal-body mjx-msubsup mjx-script,
.modal-body mjx-msub mjx-script,
.flashcard-container mjx-msup mjx-script,
.flashcard-container mjx-msubsup mjx-script,
.flashcard-container mjx-msub mjx-script,
.question-data mjx-msup mjx-script,
.question-data mjx-msubsup mjx-script,
.question-data mjx-msub mjx-script,
.answer_title mjx-msup mjx-script,
.answer_title mjx-msubsup mjx-script,
.answer_title mjx-msub mjx-script,
.fr-view mjx-msup mjx-script,
.fr-view mjx-msubsup mjx-script,
.fr-view mjx-msub mjx-script {
    vertical-align: 1em !important;
    font-size: 0.6em !important;
    display: inline-block !important;
    line-height: 0 !important;
    transform: translateY(-0.5em) !important;
}

#modal-default mjx-script[style*="vertical-align"],
#FlashcardContainer5462 mjx-script[style*="vertical-align"],
.carousel-item mjx-script[style*="vertical-align"],
#carouselExampleControls mjx-script[style*="vertical-align"] {
    vertical-align: 0.3em !important;
    font-size: 0.6em !important;
    display: inline-block !important;
    line-height: 0 !important;
    transform: translateY(-0.5em) !important;
}

.answer_title mjx-script[style],
.answer_title mjx-msup mjx-script[style],
div[style*="margin-bottom"] mjx-script[style] {
    vertical-align: 1em !important;
    font-size: 0.6em !important;
    transform: translateY(-0.5em) !important;
}

.question-data .show-answer:not(sup) {
    font-size: 1.2rem !important;
}

.question sup,
.answer_title sup,
.fr-view sup,
.question-data sup.show-answer {
    font-size: 0.65em !important;
    vertical-align: super !important;
    line-height: 0 !important;
    position: relative !important;
    top: -0.1em !important;
}

/* Exclude both sup and MathJax from universal font sizing */
.question *:not(mjx-container):not(mjx-container *):not(sup),
.answer_title *:not(mjx-container):not(mjx-container *):not(sup) {
    font-size: 2rem !important;
    font-weight: 700 !important;
}

/* Fix for MathJax superscripts in questions and answers */
.question mjx-container mjx-math mjx-msup mjx-script,
.question mjx-container mjx-math mjx-msubsup mjx-script,
.question mjx-container mjx-math mjx-msub mjx-script,
.answer_title mjx-container mjx-math mjx-msup mjx-script,
.answer_title mjx-container mjx-math mjx-msubsup mjx-script,
.answer_title mjx-container mjx-math mjx-msub mjx-script {
    font-size: 0.6em !important;
    font-weight: normal !important;
    vertical-align: 1em !important;
    display: inline-block !important;
    line-height: 0 !important;
    transform: translateY(-0.5em) !important;
}

@media screen and (min-width: 992px) {

    #viewNotificationsModal .modal-dialog,
    #viewNotificationInfoModal .modal-dialog {
        max-width: 800px !important;
        margin-left: auto !important;
    }

}

@keyframes animate {
    from {
        box-shadow: none
    }

    to {
        box-shadow: -2px 2px 7px 0px rgba(0, 0, 0, 0.2)
    }
}

@media screen and (max-width: 991px) {
    .study-guide-wrapper .next-item {
        z-index: 2;
        left: 10px;
    }
}

@media screen and (max-width: 1199px) {
    .modal-dialog {
        margin: 2em 4em !important;
    }
}

@media screen and (max-width: 1024px) {
    .modal-dialog {
        margin-left: 0;
        max-width: 100%
    }
}

@media screen and (min-width: 1024px) {
    .promo-code {
        margin: 0 0.25em;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    #course-preview {
        height: 30em;
    }
}

@media screen and (max-width: 768px) {
    div.study-plan-row .ml-5 {
        margin-left: 0 !important
    }

    .card-study-guide {
        margin: 1em 0
    }

    #upgrade-content {
        padding-left: 2rem !important;
        padding-right: 2rem !important
    }

    #upgrade-content div.row.text-center.my-5 {
        margin-top: 2rem !important;
        margin-bottom: 1rem !important
    }

    .card-list {
        display: block
    }

    .card-list #course-preview,
    .card-list #course-only,
    .card-list #signature-only {
        width: auto
    }

    #upgrade-content .upgrade-card{
        width: 100%;
    }

    .card-list #course-only {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .modal-content .modal-nav {
        position: relative !important;
        align-items: center !important;
        right: 0
    }

    .modal-content .modal-nav .btn {
        margin: 0 0.5rem 1.2rem 0.5rem !important
    }

    #course-preview {
        background-position: 0 -100px;
    }

    #course-preview.course-image {
        background-position: center;
        height: 502px
    }

    .modal-dialog {
        margin: 2em 1em !important;
    }
}

@media screen and (max-width: 575px) {
    #viewNotificationsModal .noti-date {
        text-align: left;
    }
}

@media screen and (max-width: 499px) {
    .question-data .show-answer {
        font-size: 0.8rem !important;
    }

    .question *:not(mjx-container):not(mjx-container *):not(sup),
    .answer_title *:not(mjx-container):not(mjx-container *):not(sup) {
        font-size: 1rem !important;
    }

    .question sup,
    .answer_title sup,
    .fr-view sup {
        font-size: 0.5em !important;
    }

    /* Mobile MathJax sizing */
    .question mjx-container mjx-math mjx-msup mjx-script,
    .question mjx-container mjx-math mjx-msubsup mjx-script,
    .question mjx-container mjx-math mjx-msub mjx-script,
    .answer_title mjx-container mjx-math mjx-msup mjx-script,
    .answer_title mjx-container mjx-math mjx-msubsup mjx-script,
    .answer_title mjx-container mjx-math mjx-msub mjx-script {
        font-size: 0.5em !important;
    }
}

@media screen and (max-width: 425px) {
    .input-group.input-group-outline .form-label {
        line-height: 1 !important;
        padding-top: 1em
    }

    .modal-module-header .w-lg-50 {
        margin-top: 3rem
    }

    #video-container {
        margin-right: 0 !important;
        margin-left: 0 !important
    }

    #video-container .container {
        padding: 0
    }

    #quiz-container .bg-secondary {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }

    #options-container {
        margin: 0 !important
    }

    #options-container .col-12 {
        padding: 0 !important
    }

    .controls-left.ms-4 {
        margin-left: 0 !important
    }

    .controls-left .fullscreen {
        margin-right: 0
    }

    .correction-content>div {
        width: auto !important
    }

    #course-preview {
        background-position: 0 -50px;
    }

    #viewNotificationsModal .noti-date {
        text-align: left;
    }

    .modal-dialog {
        margin: 2em 0em !important;
    }
}

@media screen and (max-width: 320px) {
    .upgrade-plan-options label {
        height: 60px
    }

    #course-only .d-flex h1,
    #signature-only .d-flex h1 {
        font-size: 3rem
    }

    .full-video .controls-left .timer {
        display: inline-flex !important
    }
}

.btn-primary:hover {
    background-color: #fe5e10 !important;
}

.btn-primary:focus {
    background-color: #fe5e10 !important;
}

.btn-primary.active:focus {
    box-shadow: 0 0 0 0.2rem #fe5e10;
}

.show-answer {
    font-size: 1.5em !important;
}

.btn-primary:hover {
    box-shadow: 0 14px 26px -12px #ed5f2aad, 0 4px 23px 0 #ed5f2aa6, 0 8px 10px -5px #ed5f2a99 !important;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #7979791a;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #fe5e10;
    border-radius: 9px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #6c757d;
}

div#modal-video-player.full-video .video-wrapper {
    width: 100% !important;
}

div.video-container.full-video .video-wrapper {
    width: 98% !important;
}

#carouselExampleControls table td,
#carouselExampleControls table th {
    border: 1px solid #DDD !important;
}

#carouselExampleControls table td {
    min-width: 5px !important;
}