/* Import common fonts */
@import 'font-open-sans.css';

/* General CSS for H5P. Licensed under the MIT License.*/
/* Custom H5P font to use for icons. */
@font-face {
    font-family: 'h5p';
    src: url('../fonts/h5p-core-30.eot?h1atjl');
    src: url('../fonts/h5p-core-30.eot?h1atjl#iefix') format('embedded-opentype'),
    url('../fonts/h5p-core-30.ttf?h1atjl') format('truetype'),
    url('../fonts/h5p-core-30.woff?h1atjl') format('woff'),
    url('../fonts/h5p-core-30.svg?h1atjl#h5p-core-30') format('svg');
    font-weight: normal;
    font-style: normal;
}


.scene-image {
    height: 325px !important;
    width: auto;
}

@media screen and (max-width: 768px) {
    .scene-image {
        height: auto !important;
        width: 100%;
    }
}

.hide-on-mobile {
    display: block;
    height: auto;

}

.hide-on-desktop {
    display: none;
}

@media screen and (max-width: 768px) {
    .hide-on-mobile {
        display: none;
        height: 0;
    }

    .hide-on-desktop {
        display: block;
    }
}

.copyright {
    display: flex !important;
    width: 100%;
    justify-content: space-between;
    align-items: end;
}

#scene-container {
    display: flex;
    flex-direction: row;
    justify-content: center
}

.flex-md-row {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.flex-md-half {
    width: 50%;
}

/*.teal-bullets {
  color: #000000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
*/

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

    .flex-md-half {
        width: 100%;
    }

    /*
    .teal-bullets {
      color: #000000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  */
    .flex-md-row {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    #scene-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto !important;
    }

    #scene-container li {
        margin: 10px auto;
        list-style: none;
    }
}

.qs-solutionbutton {
    display: none !important;
}

.button_right .button_size_1 {
    .border-radius: 32px !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
    /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
}

.return-button-wrapper .button {
    border-radius: 29px;
    padding: 20px;
    max-width: 248px;
}

.return-button-wrapper span.button_label {
    display: flex;
    justify-content: space-around;
    min-width: 208px;
    padding: 0 10px;
    font-size: 18px;
}

i.icon-right-1 {
    font-size: 24px;
}

.mcb-item-icon_box_2-inner {
    transition: all 200ms linear;
}

.mcb-item-icon_box_2-inner:hover .icon-right-1 {
    margin-left: 10px;
    transition: all 200ms linear;
}

a.button.button_right.button_size_1 {
    min-width: 150px;
}

.h5p-slidecontrols {
    z-index: 1;
}

#credit-report-video-container .section_video {
    border-radius: 76px;
    overflow: hidden;
    width: calc(100% - 40px);
    margin: auto;
}

@media screen and (max-width: 768px) {
    #credit-report-video-container .section_video {
        border-radius: 26px;
        overflow: hidden;
        width: 100%;
        margin: auto;
    }

}

.scene-image {
    position: relative;
}

.scene-image::after {
    content: "";
    background-image: url(/app/uploads/2026/01/Group-405-1.svg);
    position: absolute;
    right: 10%;
    bottom: 5px;
    z-index: 1;
    transform: translate(0, 0);
    width: 250px;
    height: 280px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

@media screen and (max-width: 768px) {
    .scene-image::after {
        content: "";
        background-image: url(/app/uploads/2026/01/Group-405-1.svg);
        position: absolute;
        right: 0%;
        bottom: 5px;
        z-index: 1;
        transform: translate(0, 0);
        width: 120px;
        height: 100px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
    }
}

.h5p-image-pair-desc {
    display: none;
}

div#selected-timeline div {
    cursor: pointer;
}

.timeline.active {
    background: #E4B449 !important;
    color: black !important;
}

#quiz-response.active {
    display: block;
    width: 100%;
    height: 100%;
    background: #E3E3E3;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 30px;
}

#quiz-response.active div {
    text-align: center;
    text-align: center;
    background: #F8F8F8;
    padding: 30px;
    margin-bottom: 30px;
}

#quiz-response.active div>b {
    display: block;
    font-size: 24px;
}

#quiz-response {
    display: none;
}

#saving_scenarios .answer {
    position: relative;
}

#saving_scenarios .answer::before {
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    left: 10%;
    top: 50%;
    border: 3px solid black;
    transform: translate(-50%, -50%);
}

@font-face {
    font-family: 'h5p-hub-publish';
    src: url('../fonts/h5p-hub-publish.eot?wy8ylc');
    src: url('../fonts/h5p-hub-publish.eot?wy8ylc#iefix') format('embedded-opentype'),
    url('../fonts/h5p-hub-publish.ttf?wy8ylc') format('truetype'),
    url('../fonts/h5p-hub-publish.woff?wy8ylc') format('woff'),
    url('../fonts/h5p-hub-publish.svg?wy8ylc#h5p-hub') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

html.h5p-iframe,
html.h5p-iframe>body {
    font-family: Sans-Serif;
    /* Use the browser's default sans-serif font. (Since Heletica doesn't look nice on Windows, and Arial on OS X.) */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.h5p-semi-fullscreen,
.h5p-fullscreen,
html.h5p-iframe .h5p-container {
    overflow: hidden;
}

.h5p-content {
    position: relative;
    /*background: #fefefe;*/
    background: transparent;
    border: 1px solid #EEE;
    border-bottom: none;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.h5p-noselect {
    -khtml-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

html.h5p-iframe .h5p-content {
    font-size: 16px;
    line-height: 1.5em;
    width: 100%;
    height: auto;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

html.h5p-iframe .h5p-fullscreen .h5p-content,
html.h5p-iframe .h5p-semi-fullscreen .h5p-content {
    height: 100%;
}

.h5p-content.h5p-no-frame,
.h5p-fullscreen .h5p-content,
.h5p-semi-fullscreen .h5p-content {
    border: 0;
}

.h5p-container {
    position: relative;
    z-index: 1;
}

.h5p-iframe-wrapper.h5p-fullscreen {
    background-color: #000;
}

body.h5p-semi-fullscreen {
    position: fixed;
    width: 100%;
    height: 100%;
}

.h5p-container.h5p-semi-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    width: 100%;
    height: 100%;
    background-color: #FFF;
}

.h5p-course-presentation .h5p-presentation-wrapper {
    background: #E3E3E3 !important;
}

.h5p-question-feedback-content-text {
    color: #000000;
}

.h5p-course-presentation .h5p-footer {
    background: #E3E3E3 !important;
    width: 99% !important;
    margin: auto;
    left: 50%;
    transform: translate(-50%, 0%);
}

.h5p-course-presentation .h5p-box-wrapper {
    padding-top: 6.5%;
    background: #E3E3E3 !important;
}

.h5p-course-presentation .h5p-footer {
    position: absolute;
    top: 0;
    z-index: 1;
}

.h5p-image-juxtaposition-container {
    width: 90%;
}

.h5p-dragquestion .h5p-dropped.h5p-wrong,
.h5p-dragquestion .h5p-dropped.h5p-wrong,
.h5p-dragquestion .h5p-dropped.h5p-correct {
    padding-left: 20px;
}

.h5p-dragquestion .h5p-draggable.h5p-correct:after,
.h5p-dragquestion .h5p-draggable.h5p-wrong:after {
    font-family: 'H5PFontAwesome4';
    font-size: 1.5rem !important;
    position: absolute;
    right: 0 !important;
    bottom: -50% !important;
    transform: translate(-60%, -130%);
    background: inherit;
    -webkit-border-radius: 0.25em;
    -moz-border-radius: 0.25em;
    border-radius: 0.25em;
    line-height: 1;
    padding: 0.15em 0 0 0.2em;
}

button.h5p-question-try-again.h5p-joubelui-button {
    max-width: 200px;
    margin: auto !important;
}

.h5p-question-content.h5p-dragquestion-has-no-background {
    max-width: 100% !important;
    width: 100%;
}

.h5p-content-controls {
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
}

.h5p-fullscreen .h5p-content-controls {
    display: none;
}

div#check-container {
    position: relative;
}

div#check-button {
    background: #e4b449;
    display: flex;
    text-align: center;
    justify-content: center;
    max-width: 200px;
    padding: 10px 20px;
    border-radius: 20px;
    font-weight: bold;
    margin: 20px auto;
}

.check-parts {
    position: absolute;
    transform: translate(-50%, -50%);
}

.check-parts label {
    opacity: 0;
}

.check-parts.check-name {
    top: 35%;
    left: 42%;
    width: 55%;
}

.check-parts.check-date {
    top: 20%;
    left: 69%;
    width: 23%;
}

.check-parts.check-amount {
    top: 36%;
    left: 88%;
    width: 15%;
}

.check-parts input {
    height: 40px;
    width: 100%;
}

.check-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    color: #000000;
}

@media screen and (max-width: 768px) {
    .check-list {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #000000 !important;
        text-align: center;
        margin: 0 !important;
    }

    .check-list li {
        margin-bottom: 0 !important;
    }

    .check-parts input {
        height: 25px;
        width: 100%;
    }

    .check-parts.check-amount {
        top: 20%;
        left: 88%;
        width: 15%;
    }

    .check-parts.check-name {
        top: 25%;
        left: 42%;
        width: 55%;
    }

    .check-parts.check-date {
        top: 10%;
        left: 69%;
        width: 23%;
    }
}

.check-parts.invalid span {
    display: block;
}

.check-parts span {
    display: none;
    position: absolute;
    left: 0;
    bottom: 60%;
    width: 300px;
    padding: 5px;
    background: #ffeeee;
    color: #8d0000;
    font-size: 15px;
    line-height: 17px;
    transform: translate(0%, 0);
}

.h5p-content-controls>a:link,
.h5p-content-controls>a:visited,
a.h5p-disable-fullscreen:link,
a.h5p-disable-fullscreen:visited {
    color: #e5eef6;
}

.h5p-enable-fullscreen:before {
    font-family: 'H5P';
    content: "\e88c";
}

.h5p-disable-fullscreen:before {
    font-family: 'H5P';
    content: "\e891";
}

.h5p-enable-fullscreen,
.h5p-disable-fullscreen {
    cursor: pointer;
    color: #EEE;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.3);
    line-height: 0.975em;
    font-size: 2em;
    width: 1.125em;
    height: 1em;
    text-indent: 0.04em;
}

.h5p-disable-fullscreen {
    line-height: 0.925em;
    width: 1.1em;
    height: 0.9em;
}

progress::-moz-progress-bar {
    background: #009311 !important;
    height: 5px
}

progress::-webkit-progress-value {
    background: #009311 !important;
    height: 5px;
}

progress {
    color: #009311 !important;
    height: 5px;
}

input[disabled] {
    background: #d0d0d0 !important;
    pointer-events: none !important;
;
    opacity: .9 !important;
}

.h5p-container.h5p-standalone.h5p-question.h5p-image-juxtaposition>.h5p-question-content {
    max-width: 100% !important;
    width: 100%;
}

#expenses input,
input#total_income {
    border: 1px solid black;
    border-radius: 10px;
}

div#password-feedback {
    background: #E3E3E3;
    /* padding: 30px; */
    margin-top: 20px;
}

.h5p-enable-fullscreen:focus,
.h5p-disable-fullscreen:focus {
    outline-style: solid;
    outline-width: 1px;
    outline-offset: 0.25em;
}

.h5p-enable-fullscreen:hover,
.h5p-disable-fullscreen:hover {
    background: rgba(0, 0, 0, 0.5);
}

.h5p-semi-fullscreen .h5p-enable-fullscreen {
    display: none;
}

div.h5p-fullscreen {
    width: 100%;
    height: 100%;
}

.h5p-iframe-wrapper {
    width: auto;
    height: auto;
}

.h5p-fullscreen .h5p-iframe-wrapper,
.h5p-semi-fullscreen .h5p-iframe-wrapper {
    width: 100%;
    height: 100%;
}

.h5p-iframe-wrapper.h5p-semi-fullscreen {
    width: auto;
    height: auto;
    background: black;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100001;
}

.h5p-iframe-wrapper.h5p-semi-fullscreen .buttons {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
}

.h5p-iframe-wrapper iframe.h5p-iframe {
    /* Hack for IOS landscape / portrait */
    width: 10px;
    min-width: 100%;
    *width: 100%;
    /* End of hack */
    height: 100%;
    z-index: 10;
    overflow: hidden;
    border: 0;
    display: block;
}

.h5p-content ul.h5p-actions {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    list-style: none;
    padding: 0px 10px;
    margin: 0;
    height: 25px;
    font-size: 12px;
    background: #FAFAFA;
    border-top: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    clear: both;
    font-family: Sans-Serif;
}

.h5p-fullscreen .h5p-actions,
.h5p-semi-fullscreen .h5p-actions {
    display: none;
}

.h5p-actions>.h5p-button {
    float: left;
    cursor: pointer;
    margin: 0 0.5em 0 0;
    background: none;
    padding: 0 0.75em 0 0.25em;
    vertical-align: top;
    color: #707070;
    text-decoration: none;
    outline: none;
    line-height: 22px;
}

.h5p-actions button:hover {
    color: #333;
}

.h5p-actions button:active,
.h5p-actions button:focus,
.h5p-actions .h5p-link:active,
.h5p-actions .h5p-link:focus {
    color: #666;
}

.h5p-actions button {
    display: inline-flex;
    padding: 0;
    margin: 0;
    color: #6A6A6A;
    position: relative;

    /* Disable default button style */
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    line-height: 2;
}

.h5p-actions button:focus,
.h5p-actions .h5p-link:focus {
    outline-style: solid;
    outline-width: thin;
    outline-offset: -2px;
    outline-color: #5981A1;
}

.h5p-actions button:before {
    font-family: 'H5P';
    font-size: 20px;
    line-height: 23px;
    vertical-align: bottom;
    padding-right: 0;
}

.h5p-actions>.h5p-button.h5p-export>button:before {
    content: "\e90b";
}

.h5p-actions>.h5p-button.h5p-copyrights>button:before {
    content: "\e88f";
}

.h5p-actions>.h5p-button.h5p-embed>button:before {
    content: "\e892";
}

.h5p-actions .h5p-link {
    float: right;
    margin-right: 0;
    font-size: 2.0em;
    line-height: 23px;
    position: relative;
    color: #6a6a6a;
    text-decoration: none;
    outline: none;
}

.h5p-actions .h5p-link:before {
    font-family: 'H5P';
    content: "\e88e";
    vertical-align: bottom;
}

.h5p-actions>li {
    margin: 0;
    list-style: none;
}

.h5p-popup-dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index: 100;
    padding: 2em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    opacity: 0;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
    background: #000;
    background: rgba(0, 0, 0, 0.75);
}

.h5p-popup-dialog.h5p-open {
    opacity: 1;
}

.h5p-popup-dialog .h5p-inner {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #fff;
    height: 100%;
    max-height: 100%;
    position: relative;
}

.h5p-popup-dialog .h5p-inner>h2 {
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    margin: 0;
    background: #eee;
    display: block;
    color: #656565;
    font-size: 1.25em;
    padding: 0.325em 0.5em 0.25em;
    line-height: 1.25em;
    border-bottom: 1px solid #ccc;
    z-index: 2;
}

.h5p-popup-dialog .h5p-inner>h2>a {
    font-size: 12px;
    margin-left: 1em;
}

.h5p-embed-dialog .h5p-inner,
.h5p-reuse-dialog .h5p-inner,
.h5p-content-user-data-reset-dialog .h5p-inner {
    min-width: 316px;
    max-width: 400px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
}

.h5p-embed-dialog .h5p-embed-code-container,
.h5p-embed-size {
    resize: none;
    outline: none;
    width: 100%;
    padding: 0.375em 0.5em 0.25em;
    margin: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 0 #d0d0d0 inset;
    font-size: 0.875em;
    letter-spacing: 0.065em;
    font-family: sans-serif;
    white-space: pre;
    line-height: 1.5em;
    height: 2.0714em;
    background: #f5f5f5;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

.h5p-embed-dialog .h5p-embed-code-container:focus {
    height: 5em;
}

.h5p-embed-size {
    width: 3.5em;
    text-align: right;
    margin: 0.5em 0;
    line-height: 2em;
}

.h5p-popup-dialog .h5p-scroll-content {
    border-top: 2.25em solid transparent;
    padding: 1em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    color: #555555;
    z-index: 1;
}

.h5p-popup-dialog.h5p-open .h5p-scroll-content {
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

.h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar {
    width: 8px;
}

.h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar-track {
    background: #e0e0e0;
}

.h5p-popup-dialog .h5p-scroll-content::-webkit-scrollbar-thumb {
    box-shadow: 0 0 10px #000 inset;
    border-radius: 4px;
}

.h5p-popup-dialog .h5p-close {
    cursor: pointer;
    font-size: 2em;
    position: absolute;
    right: 0;
    top: 0;
    width: 1.125em;
    height: 1.125em;
    line-height: 1.125em;
    color: #656565;
    cursor: pointer;
    text-indent: -0.065em;
    z-index: 3
}

.h5p-popup-dialog .h5p-close:after {
    font-family: 'H5P';
    content: "\e894";
}

.h5p-popup-dialog .h5p-close:hover:after,
.h5p-popup-dialog .h5p-close:focus:after {
    color: #454545;
}

.h5p-popup-dialog .h5p-close:active:after {
    color: #252525;
}

.h5p-poopup-dialog h2 {
    margin: 0.25em 0 0.5em;
}

.h5p-popup-dialog h3 {
    margin: 0.75em 0 0.25em;
}

.h5p-popup-dialog dl {
    margin: 0.25em 0 0.75em;
}

.h5p-popup-dialog dt {
    float: left;
    margin: 0 0.75em 0 0;
}

.h5p-popup-dialog dt:after {
    content: ':';
}

.h5p-popup-dialog dd {
    margin: 0;
}

.h5p-expander {
    cursor: pointer;
    font-size: 1.125em;
    margin: 0.5em 0 0;
    display: inline-block;
}

.h5p-expander:before {
    content: "+";
    width: 1em;
    display: inline-block;
    font-weight: bold;
}

.h5p-expander.h5p-open:before {
    content: "-";
    text-indent: 0.125em;
}

.h5p-expander:hover,
.h5p-expander:focus {
    color: #303030;
}

.h5p-expander:active {
    color: #202020;
}

.h5p-expander-content {
    display: none;
}

.h5p-expander-content p {
    margin: 0.5em 0;
}

.h5p-content-copyrights {
    border-left: 0.25em solid #d0d0d0;
    margin-left: 0.25em;
    padding-left: 0.25em;
}

.h5p-throbber {
    background: url('../images/throbber.gif?ver=1.2.1') 10px center no-repeat;
    padding-left: 38px;
    min-height: 30px;
    line-height: 30px;
}

.h5p-dialog-ok-button {
    cursor: default;
    float: right;
    outline: none;
    border: 2px solid #ccc;
    padding: 0.25em 0.75em 0.125em;
    background: #eee;
}

.h5p-dialog-ok-button:hover,
.h5p-dialog-ok-button:focus {
    background: #fafafa;
}

.h5p-dialog-ok-button:active {
    background: #eeffee;
}

.h5p-big-button {
    line-height: 1.25;
    display: block;
    position: relative;
    cursor: pointer;
    width: 100%;
    padding: 1em 1em 1em 3.75em;
    text-align: left;
    border: 1px solid #dedede;
    background: linear-gradient(#ffffff, #f1f1f2);
    border-radius: 0.25em;
}

.h5p-big-button:before {
    font-family: 'h5p';
    content: "\e893";
    line-height: 1;
    font-size: 3em;
    color: #2747f7;
    position: absolute;
    left: 0.125em;
    top: 0.125em;
}

.h5p-copy-button:before {
    content: "\e905";
}

.h5p-big-button:hover {
    border: 1px solid #2747f7;
    background: #eff1fe;
}

.h5p-big-button:active {
    border: 1px solid #dedede;
    background: #dfe4fe;
}

.h5p-button-title {
    color: #2747f7;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.h5p-button-description {
    color: #757575;
}

.h5p-horizontal-line-text {
    border-top: 1px solid #dadada;
    line-height: 1;
    color: #474747;
    text-align: center;
    position: relative;
    margin: 1.25em 0;
}

.h5p-horizontal-line-text>span {
    background: white;
    padding: 0.5em;
    position: absolute;
    top: -1em;
    left: 50%;
    transform: translateX(-50%);
}

.h5p-toast {
    font-size: 0.75em;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    z-index: 110;
    position: absolute;
    padding: 0 0.5em;
    line-height: 2;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    top: 0;
    opacity: 1;
    visibility: visible;
    transition: opacity 1s;
}

.h5p-toast-disabled {
    opacity: 0;
    visibility: hidden;
}

.h5p-content code,
.h5peditor code {
    color: #3d3d3d;
    background: #e0e0e0;
    border-radius: 2px;
    padding: 0 5px;
}

.h5p-content pre>code,
.h5peditor pre>code {
    background-color: #fafafa;
    padding: 5px;
    display: block;
    line-height: normal;
    border: 1px solid #c7c7c7;
    border-left-width: 4px;
    max-width: 100%;
    white-space: pre;
    overflow: auto;
}


/* This is loaded as part of Core and not Editor since this needs to be outside the editor iframe */
.h5peditor-semi-fullscreen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 101;
}

iframe.h5peditor-semi-fullscreen {
    background: #fff;
    z-index: 100001;
}

.h5p-content.using-mouse *:not(textarea):focus {
    outline: none !important;
}

.h5p-content-hub-button:before {
    font-family: "h5p";
    margin-right: 0.5em;
    font-size: 0.7em;
    line-height: 1;
}

.h5p-content-hub-button.unpublish:before {
    content: "\e916";
}

.h5p-content-hub-button.waiting:before,
.h5p-content-hub-button.sync:before {
    content: "\e917";
}

.h5p-content-hub-button.waiting:before {
    display: inline-block;
    animation: rotate 2s linear infinite;
}

@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}



.penny-box {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    background-color: #3E919B;
    border-radius: 76px;
    padding: 20px;
    margin: 30px 10px 10px;
    min-height: 572px;
    position: relative;
}

.penny-spacer {
    background-color: #E3E3E3;
    height: 150px
}

.penny-box::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    width: 320px;
    height: 350px;
    background-image: url(/app/uploads/2026/01/Group-405-1.svg);
}

@media screen and (max-width: 992px) {
    .penny-box {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #3E919B;
        border-radius: 26px;
        padding: 20px;
        margin: 30px 10px 10px;
        min-height: 392px;
        position: relative;
    }

    .penny-spacer {
        background-color: #E3E3E3;
        height: 0px
    }

    .penny-box::after {
        content: "";
        position: absolute;
        bottom: 0px;
        right: 0px;
        background-size: contain;
        background-repeat: no-repeat;
        width: 160px;
        height: 180px;
        background-image: url(/app/uploads/2026/01/Group-405-1.svg);
    }
}

.penny-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 600px;
    width: 600px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(/app/uploads/2026/01/mask.svg);
}

/**** CUSTOM STYLES ****/

/** Timeline **/
.h5p-timeline-wrapper {
    position: relative;
}

.score {
    font-weight: bold;
    cursor: pointer;
    position: relative;
}


li.score:first-child:before,
li.score:last-child:after {
    content: none !important;
    height: 0 !important;
}

li#score-300–579:before {
    content: none;
}

.score>span {
    background: #3E919B;
    color: #ffffff;
    font-weight: bold;
    padding: 5px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    margin-top: 10px;

}

.score__active>span {
    background: #E4B449;
    padding: 5px;
    border-radius: 10px;
    color: #000000;
;
    font-weight: bold;
}

#credit-score {
    overflow: hidden;
}

li.score::after {
    content: "";
    height: 1px;
    width: 120%;
    position: absolute;
    right: 0;
    top: 70%;
    transform: translate(100%, -70%);
    display: block;
    background: black;
}

li.score::before {
    content: "";
    height: 1px;
    width: 120%;
    position: absolute;
    left: 0;
    top: 70%;
    transform: translate(-100%, -70%);
    display: block;
    background: black;
}

#video-full-width .section_video {
    border-radius: 76px;
    overflow: hidden;
    width: calc(100% - 40px);
    margin: auto;
}


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

    li.score::before,
    li.score::after {
        display: none;
    }

    .feedback-section {
        padding-top: 10px;
    }

    .greeting {
        color: #000000 !important;
    }

    .questionset-results .greeting {
        margin-top: 1em;
        margin: auto;
        color: #000000 !important;
        font-size: 1.25em;
        padding: 30px 20px;
        max-width: 800px;
    }


    #video-full-width .section_video {
        border-radius: 26px;
        overflow: hidden;
        width: 100%;
        margin: auto;
    }

    button.h5p-question-finish.h5p-joubelui-button {
        max-width: 307px;
        margin: auto;
    }

    .h5p-image-pair .feedback-text {
        color: #000000 !important;
        text-align: center;
    }

    /*.h5p-image-pair-item {
      width: 10em !important;
      height: 10em !important;
    }*/

}

li.h5p-image-pair-item.draggable.ui-draggable,
.h5p-image-pair .h5p-image-pair-item {
    border: 0 !important;
    box-shadow: none;
    /*   width: 26%;
      height: 24%;
  */
}

.h5p-image-pair-item .image-container {
    width: 10em !important;
    height: 10em !important;
}

.h5p-image-pair-images-paired .card-paired {
    width: 5em !important;
    height: 5em !important;
}


.image-container.ui-draggable-handle {
    box-shadow: none !important;
}

ul.h5p-answers {
    display: flex;
    flex-wrap: wrap;
}

li.h5p-answer {
    width: 48%;
    margin: 2% 1% !important;
}

@media screen and (max-width: 768px) {
    .h5p-radio .h5p-answers {
        flex-direction: column;
    }

    .h5p-radio .h5p-answers li {
        width: 99%;
        margin: .25rem auto !important;
    }
}


li.h5p-answer>div {
    padding: 20px 20px 20px 40px !important;
}

li.h5p-answer.h5p-selected {
    /*    background: #E4B449; */
    border-radius: 16px;
}

li.h5p-answer.h5p-selected .h5p-alternative-container {
    background: #E4B449 !important;
}

.h5p-multichoice .h5p-answer .h5p-alternative-container:before {
    top: 20px !important;
    font-size: 1.25rem;
}

.h5p-alternative-inner {
    margin: 0 0.75em 0 3em !important;
}

.h5p-question {
    background: transparent !important;
}

button.h5p-question-finish.h5p-joubelui-button {
    margin-top: 15px;
}

/** Fill in the blanks **/
.h5p-question-content.h5p-separate-lines>div:nth-child(1) {
    position: absolute;
    top: 34%;
    left: 80%;
    width: 160px;
    line-height: 2rem;
    /* height: 60px; */
    color: transparent;
}

.h5p-question-content.h5p-separate-lines>div:nth-child(2) {
    position: absolute;
    top: 33%;
    left: 20%;
    width: 460px;
    line-height: 2rem;
    /* height: 60px; */
    color: transparent;
}

.h5p-question-content.h5p-separate-lines>div:nth-child(3) {
    position: absolute;
    top: 19%;
    left: 60%;
    width: 160px;
    line-height: 2rem;
    /* height: 60px; */
    color: transparent;
}

.h5p-multichoice .h5p-feedback-dialog {
    position: fixed !important;
    width: calc(50% - 0.5em) !important;
    left: 0;
    bottom: 45%;
    right: 0;
    /* top: 0; */
    margin: auto;
    z-index: 999;
    pointer-events: none;
}

.h5p-question-scorebar.h5p-question-visible {
    display: none !important;
}


.h5p-blanks .h5p-question-content p {
    position: relative;
}

.h5p-blanks .h5p-input-wrapper {
    position: absolute !important;
    top: 0;
}

.h5p-blanks .h5p-question-image-wrap {
    padding: 0 !important;
}

.h5p-blanks .h5p-text-input {
    height: 2.2rem !important;
}

.h5p-blanks .h5p-question-introduction {
    display: none;
}

.h5p-blanks .h5p-question-image-wrap {
    padding: 0 !important;
}

.h5p-multichoice .h5p-answer .h5p-feedback-inner {
    padding: 3rem 2rem 3rem 13rem !important;
}

.h5p-multichoice .h5p-feedback-inner:before {
    content: "";
    width: 250px !important;
    height: 250px !important;
    top: 0 !important;
    left: 0 !important;
    transform: translate(0%, -20%) !important;
    background-image: url('/app/uploads/2026/01/PennyPockets-04@2x.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


li.h5p-answer.h5p-selected.h5p-correct.h5p-has-feedback .h5p-feedback-dialog .h5p-feedback-inner:before {
    content: "";
    width: 250px !important;
    height: 250px !important;
    top: 0 !important;
    left: 0 !important;
    transform: translate(0%, -27%) !important;
    background-image: url('/app/uploads/2025/12/Group-537@2x.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.h5p-multichoice .h5p-alternative-container {
    background: #fff !important;
    border-radius: 10px !important;
    border: 0 !important;
    box-shadow: none !important !important;
}

.h5p-image-slide {
    border-radius: 60px;
    /*margin: 0 20px;*/
}

.h5p-image-slider {
    width: 97%;
    margin: auto;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: end;
}

button.h5p-question-check-answer.h5p-joubelui-button,
.h5p-question-try-again .h5p-joubelui-button,
.h5p-question-try-again .h5p-joubelui-button,
.h5p-joubelui-button {
    background: #E4B449 !important;
    color: #000000 !important;
    font-weight: bold;
    padding: 10px 35px;
    margin: auto;
}

button.h5p-question-check-answer.h5p-joubelui-button {
    max-width: 250px;
    margin: auto !important;
}

.h5p-question-buttons.h5p-question-visible.has-scorebar {
    display: flex;
    justify-content: center;
    width: 100%;
}

.h5p-true-false .h5p-question-feedback-content.has-content {
    width: 50%;
    margin: auto;
    position: absolute;
    right: 0;
    z-index: 33;
    top: 0%;
    left: 50%;
    transform: translate(-50%, -275%);
    background: white;
    font-weight: normal;
    color: black;
    padding: 3rem 2rem 3rem 13rem !important;
}

.h5p-true-false .h5p-question-feedback-content.has-content:before {
    content: "";
    position: absolute;
    width: 250px !important;
    height: 250px !important;
    top: 0% !important;
    left: 0 !important;
    transform: translate(0%, -50%) !important;
    background-image: url(/app/uploads/2026/01/PennyPockets-04@2x.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.h5p-question-feedback.h5p-question-visible {
    position: relative !important;
}


/*.h5p-true-false .h5p-question-feedback-content.has-content::after {*/
/*    content: "";*/
/*    position: fixed;*/
/*    width: 100%;*/
/*    height: 85%;*/
/*    background-color: rgba(0, 0, 0, .25);*/
/*    left: 0;*/
/*    top: 50px;*/
/*    border-radius: 76px;*/
/*    z-index: -1;*/
/*}*/


.h5p-question-buttons.h5p-question-visible {
    margin: auto;
    display: flex !important;
    justify-content: center;
    width: 100%;
    flex-direction: column !important;
}

.h5p-question-introduction {
    text-align: center;
}

.h5p-multichoice .h5p-answers {
    width: 100%;
    max-width: 788px !important;
    margin: auto !important;
}

a.h5p-question-next.h5p-joubelui-button,
a.h5p-question-prev.h5p-joubelui-button {
    position: absolute;
    bottom: 0;
    background: white;
    border: 3px solid #3E919B;

}

a.h5p-question-next.h5p-joubelui-button {
    right: 0;
    background: transparent !important;
    bottom: -30px;

}

a.h5p-question-prev.h5p-joubelui-button {
    left: 0;
    background: transparent !important;
    bottom: -30px;
}

.h5p-question-buttons.h5p-question-visible {
    margin-top: 15px;
}

.h5p-question .h5p-question-next:before,
.h5p-question .h5p-question-prev:before {
    color: #3E919B;
}

.h5p-tooltip {
    color: #000000 !important;
    font-weight: normal !important;
    background: oklch(98.7% 0.026 102.212) !important;
}

.h5p-question-image-wrap {
    padding-top: 3rem;
}

/** True / False **/
.h5p-true-false .h5p-question-introduction {
    font-size: 27px !important;
    line-height: 36px !important;
}

.h5p-true-false-answers {
    display: flex;
    justify-content: center;
}

.h5p-true-false-answer {
    min-width: 275px;
    width: 50%;
    margin: 10px;
    border-radius: 10px;
    padding: .75rem 1rem !important;
}

.h5p-true-false-answer[aria-checked=true] {
    background: #E4B449 !important;
    border-color: transparent !important;
    color: #000;
}



/** Drag and Drop **/
.h5p-dragquestion .h5p-draggable {
    background-color: #ffffff !important;
    border-radius: 10px;
}

.card-container {
    background: #E4B449;
    border-radius: 20px 0 0 20px;
}

.mate-container {
    border-radius: 0 20px 20px 0;
}

.mate-container li.h5p-image-pair-item.droppable.ui-droppable {
    background: transparent !important;
}

.mate-container .image-container {
    box-shadow: none !important;
}

.h5p-question-content {
    max-width: 798px;
    display: flex;
    justify-content: center;
    margin: auto !important;
}

.scene {
    background: #A7A7A7;
    border-radius: 29px;
    width: 290px;
    height: 57px;
    font-weight: bold;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.scene.active {
    background: #E4B449;
}

div#selected-timeline {
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}

div#selected-timeline div {
    flex-grow: 1;
    display: block;
    background: #3E919B;
    margin: 10px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    text-align: center;
    position: relative;
    max-width: 118px;
    height: 40px;
    padding-top: 5px;
}

div#selected-timeline div::before {
    content: "";
    height: 5px;
    width: 100%;
    position: absolute;
    right: 100%;
    transform: translate(0%, -50%);
    top: 50%;
    background-color: black;
}

@media screen and (max-width: 768px) {
    div#selected-timeline div::before {
        content: "";
        height: 2px;
        width: 25%;
        position: absolute;
        right: 100%;
        transform: translate(0%, -50%);
        top: 50%;
        background-color: black;
        z-index: -1;
    }
}

div#selected-timeline div:nth-child(1):before {
    display: none;
}

div#selected-timeline div:nth-child(3):after {
    display: none;
}

div#selected-timeline div::after {
    content: "";
    height: 5px;
    width: 150%;
    position: absolute;
    left: 0%;
    transform: translate(60%, -50%);
    top: 50%;
    background-color: black;
    z-index: -1;
}

@media screen and (max-width: 768px) {
    div#selected-timeline div::after {
        content: "";
        height: 5px;
        width: 50%;
        position: absolute;
        left: 0%;
        transform: translate(60%, -50%);
        top: 50%;
        background-color: black;
        z-index: -1;
    }
}

div#selected-timeline div>span {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translate(-50%, -80%);
    background: #ffffff;
    color: black;
    font-weight: normal;
    padding: 20px 20px;
    border-radius: 76px;
    width: 308px;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #BCBCBC;
    opacity: 0;
    transition: all 150ms linear;
}

.answer {
    padding: 10px;
    margin: 10px;
    background: #ffffff;
    width: 50%;
    text-align: left;
    padding-left: 60px;
    display: flex;
    align-items: center;
}

.answer-set {
    display: flex;
    justify-content: space-between;
    position: relative;
}

.image-container {
    width: 100%;

    min-height: 325px;


    background-size: cover;

    background-position: center;

    border-radius: 26px;
}

.answer-text {
    font-size: 24px;
}

@media screen and (max-width: 768px) {
    .answer-text {
        font-size: 18px;
    }

    .answer-set {
        POSITION: ABSOLUTE;
        bottom: 5px;
        width: 95%;
        left: 50%;
        transform: translate(-50%);
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }

    .answer {
        padding: 10px;
        margin: 5px 0;
        background: #ffffff;
        width: 100%;
        text-align: left;
        padding-left: 60px;
        display: flex;
        align-items: center;

    }

    .image-container {
        width: 100%;

        min-height: 325px;
        margin-bottom: 10px;


        background-size: cover;

        background-position: center;

        border-radius: 26px;
    }

    div#selected-timeline div>span {
        position: absolute;
        top: -80%;
        left: 50%;
        transform: translate(-50%, -80%);
        background: #ffffff;
        color: black;
        font-weight: normal;
        padding: 20px 20px;
        border-radius: 76px;
        width: 308px;
        font-size: 14px;
        line-height: 16px;
        border: 1px solid #BCBCBC;
        opacity: 0;
        transition: all 150ms linear;
    }

    div#selected-timeline div:nth-child(1)>span {
        position: absolute;
        top: -80%;
        left: 220%;
        transform: translate(-50%, -80%);
        background: #ffffff;
        color: black;
        font-weight: normal;
        padding: 20px 20px;
        border-radius: 76px;
        width: 308px;
        font-size: 14px;
        line-height: 16px;
        border: 1px solid #BCBCBC;
        opacity: 0;
        transition: all 150ms linear;
    }

    div#selected-timeline div:nth-child(3)>span {
        position: absolute;
        top: -80%;
        left: -90%;
        transform: translate(-50%, -80%);
        background: #ffffff;
        color: black;
        font-weight: normal;
        padding: 20px 20px;
        border-radius: 76px;
        width: 308px;
        font-size: 14px;
        line-height: 16px;
        border: 1px solid #BCBCBC;
        opacity: 0;
        transition: all 150ms linear;
    }
}

div#selected-timeline div>span.show {
    opacity: 1;
    transition: all 150ms linear;
}

.answer-yes,
.answer-no {
    border-radius: 10px;
    position: relative;
    font-size: 15px;
}

.answer-yes.active,
.answer-no.active {
    background-color: #E4B449 !important;
}

.answer-yes::before,
.answer-no::before {
    content: "";
    width: 30px;
    height: 30px;
    position: absolute;
    left: 20px;
    border: 1px solid black;
}

.answer-yes.active::after,
.answer-no.active::after {
    content: "\2713";
    font-size: 30px;
    width: 30px;
    height: 30px;
    position: absolute;
    left: 25px;
    bottom: 10px;
}

.answer-no.scene-3.active::after {
    bottom: 20px;
}

.h5p-course-presentation .h5p-footer .h5p-footer-next-slide:after {
    content: "\f054" !important;
    color: #3E919B;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #3E919B;
}

.h5p-course-presentation .h5p-footer .h5p-footer-previous-slide:before {
    content: "\f053" !important;
    color: #3E919B;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid #3E919B;
}


.h5p-course-presentation .h5p-footer .h5p-footer-center-adjusted {
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.h5p-course-presentation .h5p-footer .h5p-footer-right-adjusted,
.h5p-course-presentation .h5p-footer .h5p-footer-left-adjusted {
    display: none;
}

.h5p-personality-quiz .h5p-personality-quiz-columns-3 {
    width: 50% !important;
}

.h5p-personality-quiz .h5p-personality-quiz-button {
    background: rgb(255, 255, 255) !important;
    height: auto !important;
    font-size: 19px !important;
    text-align: left;
    padding-left: 75px !important;
}

.h5p-personality-quiz .h5p-personality-quiz-image-answer-image {
    border-radius: 20px 20px 0 0 !important;
}

.h5p-personality-quiz .h5p-personality-quiz-progress-text,
.h5p-personality-quiz.h5p-personality-quiz-progressbar {
    display: none;
    padding: 0 !important;
}

.h5p-personality-quiz .h5p-personality-quiz-retake-button {
    display: none;
}

.h5p-personality-quiz .h5p-personality-quiz-personality {
    text-align: center !important;
    background: #ffffff !important;
}

.h5p-personality-quiz .h5p-personality-quiz-personality p,
.h5p-personality-quiz .h5p-personality-quiz-personality h2 {
    text-align: center !important;
}

.disabled {
    background: gray !important;
    opacity: .7;
    pointer-events: none;
}

.h5p-container.h5p-standalone.h5p-question.h5p-image-juxtaposition .h5p-content-controls {
    opacity: 0;
}

.h5p-image-pair .game-container>ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.h5p-question-feedback.h5p-question-visible::after {
    content: "";
    background: rgba(0, 0, 0, .5);
    position: fixed;
    left: 0;
    top: 7%;
    width: 100%;
    height: 82%;
    border-radius: 53px 53px 53px 53px;
}

@media screen and (max-width: 768px) {
    .image-container {
        min-height: 275px !important;
    }

    .h5p-true-false-answer {
        min-width: 125px;
    }

    .h5p-question-buttons.h5p-question-visible {
        width: 100% !important;
    }


    .h5p-multichoice .h5p-feedback-dialog {
        position: fixed !important;
        width: 90% !important;
        left: -20px !important;
        bottom: 40%;
        right: 0;
        /* top: 0; */
        margin: auto;
        z-index: 999;
        pointer-events: none;
    }

    li.h5p-answer>div {
        padding: 5px;
    }

    .h5p-multichoice .h5p-answer .h5p-feedback-inner {
        padding: 1rem 2rem 1rem 6rem !important;
        overflow: hidden;
    }

    li.h5p-answer.h5p-selected.h5p-correct.h5p-has-feedback .h5p-feedback-dialog .h5p-feedback-inner:before {
        content: "";
        width: 140px !important;
        height: 170px !important;
        top: 52% !important;
        left: 0 !important;
        transform: translate(-17%, -27%) !important;
        background-image: url(/app/uploads/2025/12/Group-537@2x.png) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .h5p-multichoice .h5p-feedback-inner:before {
        content: "";
        width: 150px !important;
        height: 150px !important;
        top: 0 !important;
        left: 0 !important;
        transform: translate(0%, 10%) !important;
        background-image: url(/app/uploads/2026/01/PennyPockets-04@2x.png) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }

    .h5p-question-feedback.h5p-question-visible::after {
        content: "";
        background: rgba(0, 0, 0, .5);
        position: fixed;
        left: 0;
        top: 7%;
        width: 100%;
        height: 81%;
        border-radius: 26px;
    }

    .h5p-question-buttons.h5p-question-visible {
        display: inline-block;
        width: calc(100%);
        margin-left: 1em;
        margin-right: 0.5em;
        margin-bottom: 1em;
    }

    .questionset-results {
        text-align: center;
        background: rgba(255, 255, 255, 0.9);
        margin-top: 2rem;
    }

    .questionset-results .greeting {
        margin-top: 1em;
        margin: auto;
        color: #000000 !important;
        font-size: 1.25em;
        padding: 30px 20px !important;
        max-width: 800px;
    }

    .h5p-true-false .h5p-question-feedback-content.has-content {
        width: 60%;
        margin: auto;
        position: absolute;
        right: 0;
        z-index: 33;
        top: 0%;
        left: 50%;
        transform: translate(-50%, -150%);
        background: white;
        font-weight: normal;
        color: black;
        padding: 3rem .5rem 3rem 6rem !important;
    }

    .h5p-true-false .h5p-question-feedback-content.has-content:before {
        content: "";
        position: absolute;
        width: 150px !important;
        height: 150px !important;
        top: 0% !important;
        left: 0 !important;
        transform: translate(0%, 10%) !important;
        background-image: url(/app/uploads/2026/01/PennyPockets-04@2x.png) !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-color: transparent !important;
        box-shadow: none !important;
    }
}


.h5p-image-pair-images-paired .card-paired {
    display: inline-block;
    line-height: 5.83em;
    top: -2em;
    left: -0.5em;
    z-index: revert-layer;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #f0f0f0;
    width: 3.313em;
    height: 3.313em;
    overflow: hidden;
    background-size: cover;
    position: relative;
    border-radius: 6px 6px 6px 6px;
}

.h5p-image-pair-item {
    width: 8rem !important;
    padding: 6px;
    height: 8rem;
    float: left;
    border-radius: 6px 6px 6px 6px;
    margin: 12px 6px !important;
    cursor: pointer;
    border: 2px solid #dbe2e8;
    box-shadow: 2px 2px 0px 2px rgba(203, 213, 222, 0.2);
}

.h5p-image-pair-item .image-container {
    width: 100% !important;
    height: 100% !important;
    -webkit-box-shadow: inset 0px 2px 74px 0px rgba(203, 213, 222, 1);
    -moz-box-shadow: inset 0px 2px 74px 0px rgba(203, 213, 222, 1);
    box-shadow: inset 0px 2px 74px 0px rgba(203, 213, 222, 1);
    position: relative;
    border-radius: 6px 6px 6px 6px;
}

/* .image-container {
min-height: auto !important;
} */

.h5p-image-pair-images-paired .card-paired {
    display: inline-block;
    z-index: revert;
    line-height: 5.83em;
    top: -2em !important;
    left: -0.5em;
    border: 2px solid #ffffff;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    background: #f0f0f0;
    width: 3.313em;
    height: 3.313em;
    overflow: hidden;
    background-size: cover;
    position: relative;
    border-radius: 6px 6px 6px 6px;
}

.image-container.ui-draggable-handle,
.mate-container .image-container {
    min-height: auto !important;
}

.h5p-image-pair-images-paired .pairing-mark {
    z-index: 2 !important;
}


.h5p-image-pair .footer-container {
    flex-wrap: wrap;
}