/**
 * Interactive Video iDevice
 *
 * Released under Attribution-ShareAlike 4.0 International License.
 * Author: Ignacio Gros (http://gros.es/) for http://exelearning.net/
 *
 * License: http://creativecommons.org/licenses/by-sa/4.0/
 */

/* Screen reader accessible - visually hidden but accessible */
.sr-av {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden;
}

#slide .exe-block-msg {
    padding: 10px 1em;
    margin: 25px 0 1.5em 0;
}

#slide .exe-block-msg p {
    margin: 0;
}

#slide .disabled .field-with-error {
    color: #973c3b;
}

.exe-interactive-video {
    margin: 2em auto;
    width: 898px;
}

.cover-on #player,
.cover-on #activity-results,
.cover-on #slide,
.cover-on #activity-results-toggler {
    display: none !important;
}

.cover-on #activity {
    width: 50% !important;
}

#activity-cover {
    background: #fff;
    width: 408px;
    padding: 20px 20px 20px 20px;
    width: 90%;
    padding-right: 5%;
    padding-left: 5%;
    height: 100%;
    margin: 0 auto;
    overflow: auto;
    display: none;
    position: relative;
}

#activity-cover.activity-cover-img {
    width: 100%;
    padding: 0;
    position: relative;
    height: 100%;
    text-align: center;
    overflow: hidden;
    background: #fff;
}

#activity-cover .activity-cover-img-content {
    line-height: 316px;
}

#activity-cover.activity-cover-img img {
    width: auto;
    height: auto;
    max-width: 408px;
    max-height: 316px;
    vertical-align: middle;
}

#activity-cover.activity-cover-img a {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.cover-on #activity-cover {
    display: block;
}

#activity-cover-logo {
    display: none;
}

/* Use this to add a logo to all the activities */
#start-activity {
    text-align: center;
    margin: 2.5em 0;
}

#start-activity a {
    padding: 8px 20px;
    background: #369;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    margin: 0 0.5em;
    text-decoration: none;
}

#start-activity a.restart {
    background: #666;
}

#start-activity a:hover {
    text-decoration: underline;
}

#activity {
    border: 1px solid #000;
    width: 448px;
    max-height: 356px;
    background: #fff;
    margin: 20px auto 0 auto;
    overflow: hidden;
}

.exe-interactive-video-content-after {
    margin-top: 20px;
}

.active #activity {
    width: 898px;
}

@media screen and (min-width: 100px) {
    #activity {
        border: none;
        box-shadow: 0 0 15px 0 #cccccc;
    }
}

#slide {
    display: none;
    background: #fff;
    width: 408px;
    padding: 20px;
    height: 316px;
    float: right;
    overflow: auto;
    position: relative;
}

#slide.image {
    padding: 0;
    width: 448px;
    height: 356px;
    background: #fff url(interactive-video-loading.gif) no-repeat 50% 50%;
}

#slide.image img {
    display: none;
    margin: 0 auto;
}

#slide.image .square {
    max-width: 356px;
    max-height: 356px;
}

#slide.image .horizontal {
    max-width: 448px;
    height: auto;
}

#slide.image .vertical {
    max-height: 356px;
    width: auto;
}

#slide.image a {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #3e3e40;
    color: #fff;
    padding: 2px 10px;
    text-decoration: none;
    font-size: 0.9em;
    border-radius: 4px;
}

#slide.image a:hover {
    background: #000;
    text-decoration: underline;
}

#slide.matchElements select {
    width: 45%;
}

#slide.matchElements .random-a {
    color: #333;
}

#slide p {
    margin: 20px 0;
}

#slide p:first-child {
    margin-top: 0;
}

#activity #player {
    margin: 0 auto;
    max-width: 100%;
}

.active #player {
    float: left;
}

.active #slide {
    display: block;
}

.active #activity #player {
    margin-left: 0;
}

#slide .question {
    font-weight: bold;
}

#slide .answers p {
    margin: 0 0 10px 0;
}

#slide .actions {
    margin-top: 2em;
}

#slide .disabled .actions,
#slide .disabled .sortable a,
#slide .disabled p.instructions {
    display: none;
}

#slide .actions input {
    font-size: 1em;
    border: none;
    padding: 8px 20px;
    background: #369;
    color: #fff;
    font-weight: bold;
    border-radius: 4px;
}

#slide .sortable {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slide .sortable li {
    background: #f3f3f3;
    padding: 0.5em 65px 0.5em 10px;
    margin: 0 0 0.5em 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    list-style-image: none;
}

#slide .sortable .first .up,
#slide .sortable .last .down {
    visibility: hidden;
}

#slide .sortable li {
    position: relative;
}

#slide .sortable li a {
    display: block;
    width: 21px;
    height: 21px;
    background: url(interactive-video-sorter.png) no-repeat 0 0;
    position: absolute;
    right: 33px;
    top: 6px;
}

#slide .sortable li a:hover,
#slide .sortable li a:focus {
    background-position: 0 -21px;
}

#slide .sortable li .down {
    background-position: -21px 0;
    right: 6px;
}

#slide .sortable li .down:hover,
#slide .sortable li .down:focus {
    background-position: -21px -21px;
}

#slide.sortableList p.instructions {
    color: #666;
    font-size: 0.9em;
    margin-bottom: -1em;
}

#activity-results-toggler a {
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    background: #f7f7f7 url(interactive-video-more.gif) no-repeat right 50%;
    display: block;
    border: 1px solid #e7e7e7;
    padding: 0.5em 1em;
    letter-spacing: 0.5px;
}

#activity-results-toggler .hide {
    background-image: url(interactive-video-less.gif);
}

#activity-results-toggler {
    font-size: 1.1em;
    font-weight: normal;
    margin: 20px 0 0;
}

#activity-results table {
    font-size: 12px;
    background: #fff;
    margin: 10px 0 25px 0;
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

#activity-results th,
#activity-results #resultsSummary {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    padding: 10px 0;
    border-bottom: 2px solid #808080;
}

#activity-results #resultsSummaryTH {
    font-weight: bold;
}

#activity-results #resultsSummaryTH em {
    font-style: normal;
    font-weight: normal;
    color: #000;
    margin-left: 0.2em;
    font-size: 12px;
}

.activity-completed #resultsSummaryTH em {
    display: none;
}

#activity-results td {
    border-bottom: 1px solid #e7e7e7;
    color: #000;
    padding: 6px 0;
}

tr.even td {
    background: #f7f7f7;
}

#activity-results .title,
#activity-results .order span,
#activity-results tr a {
    display: block;
}

#activity-results tr a,
#activity-results tr span {
    text-indent: 8px;
    display: inline-block;
}

#activity-results tr span span {
    text-indent: 0;
}

#activity-results tbody tr:hover td {
    color: #009;
}

.is-mobile #activity-cover {
    height: auto;
    min-height: 316px;
}

.is-mobile #activity {
    overflow: auto;
    background: #fff url(interactive-video-bg.gif) repeat-y 0 0;
}

.is-mobile #slide {
    height: auto;
    min-height: 316px;
}

.exe-interactive-video-img img {
    width: 100px;
    height: auto;
}

.interactive-videoIdevice .mejs-container {
    display: none;
}

.interactive-videoIdevice .exe-interactive-video .mejs-container {
    display: block;
}

@media screen and (max-width: 900px) {
    .full-version {
        display: none;
    }

    #all {
        width: 100%;
    }

    #slide {
        width: 46%;
        padding-right: 2%;
        padding-left: 2%;
    }

    #slide.image {
        width: 50%;
    }

    #slide.image img {
        max-width: 100% !important;
    }

    #activity #player {
        max-width: 100%;
    }

    .active #activity #player {
        max-width: 50%;
    }
}

.Games-ReportIconDiv {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.1em;
    width: 100%;
    margin-bottom: 6px;
}

.Games-ReportIconDiv img {
    width: 16px;
    height: 16px;
    display: block;
}

.Games-ReportIconDiv span {
    font-size: 0.9em;
}

#interactive-BottonContainer {
    display: none;
    margin: 0.1em auto;
    padding: 0;
    width: 100%;
}

.interactive-GetScore input[type="button"] {
    width: auto;
}

.interactive-GetScore p {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 1em;
    gap: 0.6em;
}

.interactive-EvaluationDivIcon {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.1em;
    width: 100%;
    margin-bottom: 6px;
}

.interactive-EvaluationDivIcon img {
    width: 16px;
    height: 16px;
    display: block;
}

.interactive-EvaluationDivIcon span {
    font-size: 0.9em;
}

@media screen and (min-width: 1200px) {
    .exe-interactive-video {
        width: 100%;
        max-width: 1280px;
    }

    #player {
        width: 100% !important;
        max-width: 100% !important;
    }

    #activity,
    body.cover-on #activity {
        width: 50% !important;
    }

    .active #activity {
        width: 100% !important;
    }

    .active #player {
        width: 50% !important;
        max-width: 50% !important;
    }

    #slide {
        width: calc(50% - 40px);
    }

    #slide.image {
        width: 50% !important;
    }

    #slide.image .horizontal {
        max-width: 100% !important;
    }

    #activity #player {
        max-width: 100%;
    }

    /* Height */
    body:not(.exe-web-site) #activity-cover .activity-cover-img-content,
    body.no-nav #activity-cover .activity-cover-img-content {
        line-height: 438px;
    }

    body:not(.exe-web-site) #activity-cover.activity-cover-img,
    body.no-nav #activity-cover.activity-cover-img {
        height: 478px;
    }

    body:not(.exe-web-site) #activity-cover.activity-cover-img img,
    body.no-nav #activity-cover.activity-cover-img img {
        max-height: 478px;
        max-width: 100%;
    }

    body:not(.exe-web-site) #player,
    body.no-nav #player {
        height: 478px !important;
        max-height: 478px;
    }

    body:not(.exe-web-site) #activity,
    body.no-nav #activity,
    body:not(.exe-web-site) .cover-on #activity,
    body.no-nav.cover-on #activity {
        height: 478px;
        max-height: 478px !important;
    }

    body:not(.exe-web-site) #slide,
    body.no-nav #slide {
        height: calc(478px - 40px);
    }

    body:not(.exe-web-site) #slide.image,
    body.no-nav #slide.image {
        height: 478px;
    }

    body:not(.exe-web-site) #slide.image .square,
    body.no-nav #slide.image .square {
        max-width: 100%;
        max-height: 478px;
    }

    body:not(.exe-web-site) #slide.image .horizontal,
    body.no-nav #slide.image .horizontal {
        max-width: 100%;
        height: auto;
    }

    body:not(.exe-web-site) #slide.image .vertical,
    body.no-nav #slide.image .vertical {
        max-height: 478px;
        width: auto;
    }
}