.h5p-image-pair {
    max-width: 100%;
    height: auto;
}
.h5p-image-pair-desc {
    font-family: Helvetica, Arial, sans-serif;
    color: #000000;
    font-size: 1.125em;
    line-height: 1.125em;
    padding: 1em;
    border-bottom: 1px solid #dde4ea;
}
/*game-container*/

.h5p-image-pair .game-container {
    display: inline-block;
    table-layout: auto;
    /*max-width: 100%;*/
    width: 100%;
    padding: 0;
    margin-left: auto;
    margin-right: auto;

}
.h5p-image-pair .game-container > ul {
    width: 50%;
    /*width: auto;*/
    float: left;
    margin: 0;
    list-style: none;
    padding: 1em;
    box-sizing: border-box;
    border-bottom: 1px solid #dde4ea;
}
.h5p-image-pair-item {
    width: 6.625em;
    padding: 6px;
    height: 6.625em;
    float: left;
    border-radius: 6px 6px 6px 6px;
    margin: 6px;
    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: 6.625em;
    height: 6.625em;
    -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;
}
.h5p-image-pair-item .image-container img {
    max-height: 100%;
    max-width: 100%;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    bottom: 0;
    margin: auto;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.h5p-image-pair-overlay {
    position: absolute;
    top: 0px;
    height: 100%;
    width: 100%;
    background-color: #1a73d9;
    opacity: 0;
    border-radius: 6px 6px 6px 6px;
}
.h5p-image-pair-item-hover {
    border: 2px solid #1a73d9;
    box-shadow: 0px 0px 10px 0px rgba(64, 110, 243, 1);
    -moz-box-shadow: 0px 0px 10px 0px rgba(64, 110, 243, 1);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(64, 110, 243, 1);

}
.h5p-image-pair-item-hover .image-container {
    ​background-color: #1a73d9;
    ​ opacity​ ​: 33%;
}
.h5p-image-pair-item-hover .h5p-image-pair-overlay {
    opacity: 0.3;
}
.h5p-image-pair-item-hover img {
    opacity: 0.7;
}
.h5p-image-pair-item-disabled {
    opacity: 0.3;
    pointer-events: none;
    border: 2px solid #dbe2e8;
}
.h5p-image-pair-item-disabled .image-container {
    box-shadow: none;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}
.h5p-image-pair .event-enabled {
    pointer-events: all !important;
}
.h5p-image-pair .event-disabled {
    pointer-events: none !important;
}
.h5p-image-pair .grey-dash {
    border: 2px dashed #b7b7b7;
}
.h5p-image-pair .blue-dash {
    border: 2px dashed #1a73d9;
}
/*card-container*/

.h5p-image-pair-item-selected {
    border: 2px solid #1a73d9;
    z-index: 0 !important;
    box-shadow: 2px 2px 0px 2px rgba(203, 213, 222, 0.2);
    -webkit-box-shadow: 2px 2px 0px 2px rgba(203, 213, 222, 0.2);
    -moz-box-shadow: 2px 2px 0px 2px rgba(203, 213, 222, 0.2);
}
.h5p-image-pair .ui-draggable-dragging {
    -ms-transform: scale(.8, .8);
    -webkit-transform: scale(.8, .8);
    transform: scale(.8, .8);
    border: 2px solid #1a73d9;
    opacity: 1 !important;
    background-color: white !important;
    z-index: 5 !important;
    -webkit-box-shadow: 2px 2px 0px 2px #1a73d9;
    -moz-box-shadow: 2px 2px 0px 2px #1a73d9;
    box-shadow: 2px 2px 2px 0px #1a73d9;
}
.h5p-image-pair .ui-state-disabled {
    opacity: 1;
    z-index: 0 !important;
}
/*end-of-card-container*/
/*mate-container*/

.h5p-image-pair .mate-container {
    background-color: #eef1f4;
    box-shadow: 2px 0 0 #cbd4db inset;
}
.h5p-image-pair .mate-container .h5p-image-pair-item {
    background-color: white;
    pointer-events: none;
}
.h5p-image-pair-images-paired {
    background-size: cover;
    display: block;
    background-color: #eef1f4 !important;
    border: 2px solid #eef1f4;
    position: relative;
    box-shadow: none;
}
.h5p-image-pair-images-paired .front {
    left: 0.5em !important;
    top: 0.5em !important;
    z-index: 1;
}
.h5p-image-pair-images-paired.h5p-image-pair-item-hover {
    border: 2px solid #eef1f4;
    box-shadow: none;
}
.h5p-image-pair-images-paired .h5p-image-pair-item-hover {
    border: 2px solid #1a73d9 !important;
    cursor: pointer;
}
.h5p-image-pair-images-paired .visual-disable {
    opacity: 0.5 !important;
    pointer-events: none;
}
.h5p-image-pair-images-paired .visual-disable div {
    pointer-events: none;
}
.droppable.h5p-image-pair-item-hover {
    border: 2px dashed #1a73d9 !important;
}
.h5p-image-pair-images-paired .pairing-mark {
    border-radius: 0.8em;
    box-sizing: border-box;
    font-size: 0.75em;
    position: absolute;
    left: 75%;
    top: 10%;
    width: 1.7em;
    height: 1.7em;
    z-index: 1;
    color: #FFFFFF;
    padding-left: 2px;
    line-height: 1.7em;
}
.h5p-image-pair-images-paired .card-paired {
    display: inline-block;
    line-height: 5.83em;
    top: 2.813em;
    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;
}
.h5p-image-pair-images-paired .card-paired img {
    width: 100%;
    height: auto;
    max-height: 100%;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.h5p-image-pair-images-paired .pair-item-correct {
    border: 2px solid #64a877;
}
.h5p-image-pair-images-paired .correct-mark {
    background-color: #64a877;
}
.h5p-image-pair-images-paired .correct-mark:before,
.solved-mark:before {
    content: "\f00c";
    font-family: H5PFontAwesome4;
    padding: 2px;
}
.h5p-image-pair-images-paired .pair-item-incorrect {
    border: 2px solid #dd2e2e;
}
.h5p-image-pair-images-paired .incorrect-mark {
    background-color: #dd2e2e;
}
.h5p-image-pair-images-paired .incorrect-mark:before {
    content: "\f00d";
    font-family: H5PFontAwesome4;
    padding: 3px;
}
.h5p-image-pair-images-paired .pair-item-solved {
    border: 2px dashed #1a73d9;
}
.h5p-image-pair-images-paired .solved-mark {
    background-color: #1a73d9;
}
/*end of mate-container*/
/*end of game-container*/
/*footer-container*/

.h5p-image-pair .footer-container {
    padding: 1em 1em 1em 1em;

}
.h5p-image-pair .feedback-container {
    padding-left: 0.5em;
}
.h5p-image-pair .feedback-text {
    display: block;
    color: #1a73d9;
    font-weight: bold;
    margin-bottom: 0.8em;
}
.h5p-joubelui-score-bar {
    margin-bottom: 0.8em;
}
/*end of footer-container*/