body,
html {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-size: 20px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -o-user-select: none
}

body {
    color: #000
}

.d-cont {
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%
}

.d-cont,
.d-cont>.body {
    width: 100%;
    height: 100%
}

.d-cont>.body {
    position: relative
}

.d-box {
    position: relative;
    /* top: 50%; */
    /* left: 50%; */
    /* -webkit-transform: translate(-50%,-50%); */
    /* transform: translate(-50%,-50%); */
    max-width: 900px;
    width: 98%;
    text-align: center;
    margin: 90px auto 0 auto;
}

.d-box>.body {
    position: relative;
    width: 100%;
    height: 100%
}

.d-box>.body>.content {
    position: relative;
    padding: 20px;
    border: 5px solid #000;
    margin-bottom: 20px;
    color: #000;
    border-radius: 10px
}

.d-box>.body>.footer {
    text-align: right
}

.d-game {
    position: relative;
    /* top: 50%; */
    /* left: 50%; */
    /* -webkit-transform: translate(-50%, -50%); */
    /* transform: translate(-50%, -50%); */
    max-width: 900px;
    width: 98%;
    text-align: center;
    margin: 90px auto 0 auto;
}

.d-game>.body {
    position: relative;
    width: 100%;
    height: 100%
}

.d-game>.body>.header {
    font-size: 35px;
    font-weight: 700
}

.d-game>.body>.header,
.d-game>.body>.target {
    position: relative;
    padding: 20px;
    border: 5px solid #000;
    margin-bottom: 20px;
    border-radius: 10px
}

.d-game>.body>.target {
    height: auto;
    max-height: 500px;
    text-align: left
}

.d-game>.body>.target>.content {
    position: relative;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    padding: 10px;
    max-width: 500px;
    max-height: 200px
}

.d-game>.body>.footer {
    text-align: right
}

.btn {
    background-color: #ddd!important
}

.d-cont.d-scroll {
    max-height: unset;
    position: absolute;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    top: 0;
    overflow: auto;
    width: 100%;
    max-width: unset
}

.d-cont.d-scroll>.body {
    padding: 10px
}

.d-cont.d-scroll .d-box, .d-cont.d-scroll .d-game {
    position: relative;
    top: 70px;
    /* -webkit-transform: translate(-50%); */
    /* transform: translate(-50%); */
    /* margin: 0 0; */
}

.d-progress {
    border: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 5px;
    z-index: 9999;
    background: #86888b
}

.d-progress::-moz-progress-bar {
    background: #86888b
}

.d-progress::-webkit-progress-value {
    background: #86888b
}

.d-progress::-webkit-progress-bar {
    background: #ddd
}

.d-header {
    position: fixed;
    top: 0;
    font-size: 30px;
    font-weight: 700;
    background: #000;
    width: 100%;
    color: #fff;
    padding: 10px;
    text-align: center;
    z-index: 9998
}

.checker-red {
    color: red
}

.checker-green,
.checker-red {
    font-size: .68rem;
    display: inline
}

.checker-green {
    color: #28a745
}

.btn-check {
    font-size: .68rem;
    top: 5px;
    font-weight: 600;
    text-align: right;
    display: inline
}

.choices {
    border: 1px dashed #989898;
    min-height: 250px;
    padding: 10px
}

.list-group-item-drag {
    position: relative;
    display: block;
    padding: 5px 2px;
    margin-bottom: -1px;
    background-color: #959698;
    border: 1px solid rgba(0, 0, 0, .125);
    font-size: .73rem;
    margin-top: 3px;
    margin-bottom: 3px
}

.list-group-ans {
    position: absolute;
    min-width: 180px;
    min-height: 33px;
    border: 1px dashed #c5c5c5;
    top: 60px
}

.list-group-ans-drag {
    position: relative
}

.list-group-ans-item-drag {
    position: relative;
    border: 1px dashed #f9f9f9;
    background-color: #959698;
    font-size: .68rem;
    padding: 5px 2px
}

.list-group-ans2 {
    position: absolute;
    min-width: 180px;
    min-height: 33px;
    border: 1px dashed #c5c5c5;
    top: 50px;
    -webkit-transform: translate(240px, 30px);
    transform: translate(240px, 30px)
}

.list-group-ans2-drag,
.list-group-ans3-drag,
.list-group-ans4-drag,
.list-group-ans5-drag,
.list-group-ans6-drag,
.list-group-ans7-drag,
.list-group-ans8-drag,
.list-group-ans9-drag,
.list-group-ans10-drag,
.list-group-ans11-drag {
    position: relative
}

.list-group-ans2-item-drag,
.list-group-ans3-item-drag,
.list-group-ans4-item-drag,
.list-group-ans5-item-drag,
.list-group-ans6-item-drag,
.list-group-ans7-item-drag,
.list-group-ans8-item-drag,
.list-group-ans9-item-drag,
.list-group-ans10-item-drag,
.list-group-ans11-item-drag {
    position: relative;
    background-color: #959698;
    font-size: .68rem;
    padding: 5px 2px
}

.left-big-arrow {
    position: absolute;
    top: 90px;
    width: 152px;
    height: 195px
}

.right-big-arrow {
    position: absolute;
    top: 95px;
    width: 135px;
    height: 55px
}

.right-small-arrow {
    position: absolute;
    top: 161px;
    width: 24px;
    height: 13px;
    left: 447px
}

.left-solid-arrow {
    top: 308px
}

.left-dash-arrow,
.left-solid-arrow {
    position: absolute;
    width: 42px;
    height: 17px;
    left: 204px
}

.left-dash-arrow {
    top: 367px
}

.center-one-arrow {
    top: 185px
}

.center-one-arrow,
.center-two-arrow {
    position: absolute;
    width: 19px;
    height: 26px;
    left: 334px
}

.center-two-arrow {
    top: 245px
}

.center-three-arrow {
    top: 305px
}

.center-four-arrow,
.center-three-arrow {
    position: absolute;
    width: 19px;
    height: 26px;
    left: 334px
}

.center-four-arrow {
    top: 365px
}

.center-up-arrow {
    position: absolute;
    top: 114px;
    width: 23px;
    height: 37px;
    left: 332px
}

.center-down-arrow {
    position: absolute;
    top: 425px;
    width: 23px;
    height: 35px;
    left: 330px
}

.draggable-groups {
    min-height: 224px;
    top: 110px;
    -webkit-transform: translate(230px, 30px);
    transform: translate(230px, 30px)
}

.draggable-groups,
.draggable-groups2 {
    position: absolute;
    min-width: 190px;
    border: 1px dashed #848484;
    background-color: #ececec;
    padding: 10px
}

.draggable-groups2 {
    min-height: 100px;
    top: 254px;
    -webkit-transform: translateY(30px);
    transform: translateY(30px)
}

.list-group-ans3,
.list-group-ans4,
.list-group-ans5,
.list-group-ans6,
.list-group-ans7,
.list-group-ans10,
.list-group-ans11 {
    position: relative;
    min-width: 180px;
    min-height: 33px;
    border: 1px dashed #c5c5c5;
    background-color: #fff;
    max-width: 180px
}

.list-group-ans4,
.list-group-ans5,
.list-group-ans6,
.list-group-ans7,
.list-group-ans11 {
    margin-top: 27px;
    max-width: 180px
}

.list-group-ans8 {
    -webkit-transform: translate(240px, 30px);
    transform: translate(240px, 30px)
}

.list-group-ans8,
.list-group-ans9 {
    position: absolute;
    min-width: 180px;
    min-height: 33px;
    border: 1px dashed #c5c5c5
}

.list-group-ans9 {
    top: 121px;
    -webkit-transform: translate(452px, 30px);
    transform: translate(452px, 30px)
}

.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>strong {
    font-size: .7rem
}

.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans>.list-group-ans-item-drag {
    min-width: 95px;
    min-height: 20px;
    font-size: .52rem;
    padding: 0 0;
    max-width: 95px
}

.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans2,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans2>.list-group-ans2-item-drag {
    min-width: 95px;
    min-height: 20px;
    font-size: .52rem;
    padding: 0 0;
    max-width: 95px;
    -webkit-transform: unset;
    transform: unset
}

.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans3,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans3>.list-group-ans3-item-drag,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans4,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans4>.list-group-ans4-item-drag,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans5,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans5>.list-group-ans5-item-drag,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans6,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans6>.list-group-ans6-item-drag,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans7,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans7>.list-group-ans7-item-drag {
    min-width: 95px;
    min-height: 20px;
    font-size: .52rem;
    padding: 0 0;
    max-width: 95px
}

.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans8,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans8>.list-group-ans8-item-drag,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans9,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div.list-group-ans9>.list-group-ans9-item-drag {
    min-width: 95px;
    min-height: 20px;
    font-size: .52rem;
    padding: 0 0;
    max-width: 95px;
    -webkit-transform: unset;
    transform: unset
}

.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans10,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans10>.list-group-ans10-item-drag,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans11,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>div>div.list-group-ans11>.list-group-ans11-item-drag {
    min-width: 95px;
    min-height: 20px;
    font-size: .52rem;
    padding: 0 0;
    max-width: 95px
}

.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>.draggable-groups,
.d-cont.d-scroll>div.body>div>div>div.content>div>div.col-sm-9>div>.draggable-groups2 {
    min-width: 116px;
    min-height: 50px;
    -webkit-transform: unset;
    transform: unset
}

.correct {
    background: #70ce86
}

.wrong {
    background: #c36e76
}

.cons-sideways {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    font-size: .7rem;
    top: 185px;
    left: 185px
}

.cons-sideways,
.successShow {
    position: absolute;
    font-weight: 700
}

.successShow {
    left: 50%;
    -webkit-transform: translate(-61%);
    transform: translate(-61%);
    width: 67%;
    font-size: .9rem;
    text-align: center
}

@media only screen and (max-width:1000px) {
    .d-ins .ins-img {
        width: auto;
        height: 80px;
        margin: 0 5px
    }
    .d-game>.body>.header {
        padding: 10px;
        border: 5px solid #000;
        margin-bottom: 10px;
        border-radius: 10px;
        font-size: 20px
    }
    .list-group-item-drag {
        font-size: .55rem
    }
    .col-sm-9>strong {
        font-size: .69rem
    }
    .checker {
        font-size: .55rem;
        margin-bottom: 5px;
        margin-top: 10px
    }
}

@media only screen and (max-width:700px) {
    .list-group-item-drag {
        font-size: .55rem
    }
    .col-sm-9>strong {
        font-size: .69rem
    }
    .checker {
        font-size: .55rem;
        margin-bottom: 5px;
        margin-top: 10px
    }
    .d-header {
        font-size: 17px
    }
    .btn-check {
        font-size: .58rem
    }
    .body>.target {
        margin-bottom: .6rem;
        font-size: .9rem
    }
    .body>.content>h1 {
        font-size: 1.6rem
    }
    .body>.content>h4 {
        font-size: 1.3rem
    }
}

h3[data-v-b9167eee] {
    margin: 40px 0 0
}

ul[data-v-b9167eee] {
    list-style-type: none;
    padding: 0
}

li[data-v-b9167eee] {
    display: inline-block;
    margin: 0 10px
}

a[data-v-b9167eee] {
    color: #42b983
}