body {
    background-color:#f8f8f8;
}
.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 4px 10px #00000030;
}
.navbar .dropdown-menu.bg-dark .dropdown-item {
    color: #fff;
}
.navbar .dropdown-menu.bg-dark .dropdown-item:hover,
.navbar .dropdown-menu.bg-dark .dropdown-item:active{
    background-color: #474747;
}
.wrapper {
    min-height: calc(100vh - 108.25px);
}

#side-menu {
    flex: 0 0 280px;
}
#side-menu .nav-pills .nav-link.active, .nav-pills li {
    max-width: 100%;
}
#side-menu .nav-pills .nav-link.active, .nav-pills li:hover {
    max-width: unset;
    z-index: 2;
}
#side-menu .nav-pills .nav-link.active, .nav-pills .nav-link {
    white-space: nowrap;
    overflow: hidden;
    padding:8px 12px;
    color:#000;
}
#side-menu .nav-pills .nav-link.active, .nav-pills .nav-link.active {
    color:#fff;
}
#side-menu .nav-pills .nav-link.active, .nav-pills .nav-link:hover {
    background-color: #ddd;
}
#side-menu .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    background-color: #545454;
}
#side-menu .fa, #side-menu .fas, #side-menu .fab {
    margin-right:12px;
}
#main-content {
    border-radius: 10px 0 0 0;
    background-color: #fff;
}
.dropstart > ul {
    top:-5px!important;
    right:5px!important;
    box-shadow: 0 4px 10px #00000030;
    border: none;
    border-radius:12px;
}
.dropstart > ul:before {
    content: "";
    position: absolute;
    top: 6px;
    right: -13px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #fff;
    filter: drop-shadow(3px 1px 3px rgba(0, 0, 0, .06));
}


@media(max-width:800px) {
    #side-menu {
        flex-basis:72px;
        width:72px;
    }
}
.progress {
    border-radius: 0;
    border: 1px solid #333;
    background-color: #333;
    height: 10px;
}
.poll .progress {
    height: 20px;
}

#module-page {
    padding:0 20px;
}
#module-page h1,
#module-review h1 {
    margin-bottom:10px;
}
#module-page h4 {
    position: relative;
}
#module-page p,
#module-page .module-question,
#module-page .module-question li {
    font-size:15px;
}
#module-page .module-question h2 span {
    font-size:14px;
    font-weight:400;
}
#module-page .module-question img {
    max-width: 100%;
}
#module-page .research-document {
    background-color: #f9f9f9;
    padding:12px 20px;
    border:1px solid #ccc;
}
#module-page .research-document h5 {
    margin:0;
}
#module-page #important-msg {
    margin-bottom:48px;
}
#module-page .research-document.closed {
    cursor: pointer;
}
#module-page .research-document .btn-top,
#module-page .research-document .btn-top:hover {
    background-color: transparent;
    color:inherit;
    margin-left:10px;
}
#module-page .research-document.open .btn.btn-top,
#module-page .research-document.open .btn.btn-top:hover {
    margin-right:-15px;
    margin-top:-5px;
}
#module-page .research-document.open .btn-top,
#module-page .research-document.open .btn-top:hover {
    margin-top:0;
}
#module-page .research-document .btn-top:hover,
#module-page .research-document.closed:hover .btn-top {
    /*color:#fafafa;*/
}
#module-page .research-document .btn-top .fa {
    font-size:24px;
    vertical-align: middle;
    font-style: normal;
}
#inline-research-doc-frame {
    width: 100%;
    height:70vh;
    border:none;
    margin:12px 0;
}
#module-page .btns {
    margin-bottom:10px;
}
#module-page .btns .btn {
    margin-bottom:5px;
    width:49%;
}
#module-page .btns a {
    display: inline-block;
    clear:both;
    margin:10px 0;
    padding:10px 0;
    color:#f7be39;
    font-weight:500;
}
@media(max-width:600px) {
    .research-document .btn:not(.btn-top) {
        display: block;
        width: 100%;
        margin:5px 0!important;
    }
}
@media(max-width:400px) {
    #module-page .btns .btn {
        display: block;
        width:100%;
    }
}

/*Module take*/
#answers {
    max-width: 800px;
}
#answers .row {
    margin-bottom:10px;
}
.module-answer-box {
    position: relative;
    width:100%;
    margin:5px 0;
    padding:11px;
    font-weight: 600;
    cursor: pointer;
    background-color: #f9f9f9;
    border:2px solid transparent;
}
.sortable .module-answer-box {
    cursor:move;
}
.results .module-answer-box {
    cursor: default;
    padding-left:44px;
    border:2px solid transparent;
}
.results .module-answer-box.truefalse {
    padding:20px;
    border-color:#e5e5e5;
    text-align: center;
}
.results .module-answer-box.image {
    display: inline-block;
    border-color:#e5e5e5;
}
.results .module-answer-box.truefalse.selected,
.results .module-answer-box.image.selected {
    margin:4px 0;
}
.results .module-answer-box:after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    left:10px;
    top:5px;
    font-size:25px;
}
.results .module-answer-box.correct:after {
    content:'\f058';
    color:#32c671;
}
.results .module-answer-box.incorrect:after {
    content:'\f057';
    color:#da4453;
}
.results .module-answer-box.selected {
    border-color: #437bc9;
}
.results .module-answer-box.ordered.selected {
    background:none;
}
.results .module-answer-box.ordered.correct {
    border-color:#32c671;
}
.results .module-answer-box.ordered.incorrect {
    border-color:#da4453;
}
.module-answer-box .progress {
    padding-right:50px;
    margin-bottom:0;
    background:transparent;
    margin-top:5px;
}
.module-answer-box.poll:after {
    top:15px;
}
#answers .module-answer-box:hover {
    background-color:#f4f4f4;
}
#answers .module-answer-box.selected {
    border-color:#437bc9;
}
.module-answer-box.with_indicator {
    padding-left:30px;
}
.module-answer-box.with_indicator:after {
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    content: "\f1db";
    position: absolute;
    left:10px;
    top:10px;
}
.module-answer-box.selected.with_indicator:after {
    content: "\f111";
    color:#00b585;
}
.module-answer-box .fa-bars {
    color:#666;
    margin-right:10px;
}
.module-answer-box h2 {
    margin-bottom: 0;
}
.module-answer-box .answer-image-text {
    display: inline-block;
    position: absolute;
    width: 40%;
    top: 10px;
    bottom: 15px;
}
.module-answer-box .answer-image-text h3 {
    margin-top:0;
}
.module-answer-box .answer-image-text h3 span {
    font-size:12px;
    visibility:hidden;
}
.module-answer-box .answer-image-text h3 span {
    display: block;
}
.module-answer-box.selected .answer-image-text h3 span {
    visibility:visible;
}
.module-answer-box .answer-image-text a,
.module-answer-box .answer-image-text p {
    font-weight:400;
    position:absolute;
    margin:0;
}
.module-answer-box .answer-image-text a {
    bottom:20px;
}
.module-answer-box .answer-image-text p {
    bottom:0;
}
.module-answer-box .answer-image {
    position: relative;
    margin:-5px;
    width:60%;
    float:right;
}
.module-answer-box .answer-image img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    right:0;
    bottom:0;
}
@media(max-width:590px) {
    .module-answer-box .answer-image-text a,
    .module-answer-box .answer-image-text p {
        font-size:12px!important;
    }
}
@media(max-width:767px) {
    .results .col-sm-6 {
        margin-bottom:15px;
    }
}
@media(min-width:1200px) and (max-width:1600px) {
    .module-answer-box .answer-image-text a,
    .module-answer-box .answer-image-text p {
        font-size:12px!important;
    }
}

input.missing_word {
    display:inline-block;
    width:120px;
    height:40px;
    font: inherit;
    line-height: 1;
    border:none;
    border-bottom:2px solid #437bc9;
    background-color:#f0f0f0;
    text-align: center;
    vertical-align: middle;
}
input.missing_word:focus {
    background-color: #f8f8f8;
    color:#000;
    outline: none;
}
.mock-style {
    background-color:#66d5ca;
    color:#fff;
    font-size:40px;
    font-weight:600;
    text-align: center;
    padding:40px 10px;
    margin:10px 0;

}
.quickfire-style,
.ve-warning-style,
.forum-link-style {
    color:#fff;
    font-size:30px;
    font-weight:600;
    text-align: center;
    padding:30px 10px;
    margin:10px 0;
}
.quickfire-style {
    background-color:#be5ad2;
}
.ve-warning-style {
    background-color:#de6161;
}
.forum-link-style {
    background-color:#6188de;
}
.quickfire-style span,
.ve-warning-style span,
.forum-link-style span {
    display: block;
    font-size: 14px;
    font-weight:400;
}
.tribe-power-style {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color:#000;
    font-size:40px;
    font-weight:600;
    text-align: center;
    width:100%;
    height:124px;
    background-image:url('../images/tribe-power.png');
    background-position: center center;
    background-repeat: no-repeat;
    margin:10px 0;
}
.tribe-power-style span {
    display: block;
    font-size: 14px;
    font-weight:400;
}
#speech-controls {
    font-size:0;
    margin-bottom:16px;
}
#speech-controls .btn {
    min-width:100px;
    margin-right:5px;
}
.speaker {
    position: absolute;
    left: -34px;
    top: 4px;
    font-size: 26px;
    cursor: pointer;
    margin-right: 8px;
}
.speaker:not(.text-warning) {
    color: #333;
}
#answers .speaker {
    vertical-align: text-top;
    margin-top: 20px;
    top: -3px;
    left: -34px;
}

.button-bar {
    position:relative;
    left:unset;
    right:unset;
    bottom:unset;
    width:100%;
    max-width: 800px;
    padding:0;
    margin:30px 0 20px 0;
    background-color: #1f1f1f;
}
.button-bar .btn {
    height:50px;
    margin:0;
    border-radius:0;
}
.button-bar .btn.center-block {
    width: 50%;
    color: #fff;
    background-color: #878787;
    border-color: #878787;
}
.button-bar .btn.center-block:hover {
    background-color: #181c1f;
    border-color: #141619;
}
.button-bar .btn-back {
    background-color: #cbcbcb;
    border-color: #cbcbcb;
    float:left;
    width:25%;
}
.button-bar .btn-forward,
.buttons .btn-forward {
    float:right;
    width:25%;
}

@media(max-width: 420px) {
    .tribe-power-style {
        font-size: 36px;
    }
    .tribe-power-style span {
        font-size: 13px;
    }
}

@media(max-width: 767px) {
    .button-bar {
        width:100%;
        margin:30px 0 0 0;
        padding:0 10px;
    }
    .button-bar {
        position: fixed;
        left: 0;
        bottom: 0;
        margin-bottom: 0;
    }
    .button-bar .btn {
        height:39px;
    }
}

@media (max-width:1130px) {
    .speaker,
    #answers .speaker {
        position: relative;
        left:unset;
        top:unset;
    }
    .speaker + .module-answer-box {
        vertical-align: text-top;
        width:calc(100% - 36px);
    }
    p .speaker {
        top:unset;
    }
}

#module-review .question-box {
    position: relative;
    background-color: #f2f2f2;
    padding:14px 42px 14px 20px;
    margin-bottom:10px;
}
#module-review .question-box.open {
    padding-bottom:20px;
}
#module-review .question-box .btn-indicator {
    position: absolute;
    right:0;
    top:10px;
    height: 50px;
    padding: 12px 14px;
    font-size:25px;
    line-height: 24px;
    cursor: pointer;
}
#module-review .question-box.closed .btn-indicator .fa-chevron-up {
    display:none;
}
#module-review .question-box.open .btn-indicator .fa-chevron-down {
    display:none;
}
#module-review .question-box .title {
    position: relative;
    padding:8px 10px 8px 0;
}
#module-review .question-box img {
    max-width: 100%;
}
#module-review .question-box.closed {
    cursor: pointer;
}
#module-review .question-box.closed .title {
    padding:8px 10px 8px 38px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
#module-review .question-box.closed .title p,
#module-review .question-box.closed .title br,
#module-review .question-box.closed .title hr,
#module-review .question-box.closed .title img {
    display:none;
}
#module-review .question-box.closed .title p:first-of-type {
    display:inline;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
#module-review .question-box.closed .title br {
    display: none;
}
#module-review .question-box.closed .title:after {
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    left:0;
    top:1px;
    font-size:25px;
}
#module-review .question-box.closed .title.correct:after {
    content:'\f00c';
    color:#32c671;
}
#module-review .question-box.closed .title.incorrect:after {
    content:'\f00d';
    color:#da4453;
}
#module-review .question-box.open .q-no {
    display: block;
}
#module-review .question-box.open .hyphen {
    display:none;
}
#module-review .question-box.closed .results {
    display:none;
}
#module-review .question-box .results {
    margin-top:20px;
}
#module-review .question-box .results .btns {
    text-align:right;
    margin-top:10px;
}
#module-review .question-box .results .btns .btn {
    margin-top:5px;
    margin-left:5px;
}

.modal.modal-right .modal-dialog {
    position:fixed;
    top:0;
    bottom:0;
    right:0;
    margin:0;
    width:600px;
    max-width:100%;
}
.modal.modal-right .modal-dialog .modal-header {
    padding:15px 20px;
}
.modal.modal-right .modal-header .close {
    margin-right:-20px;
}
.modal.modal-right .modal-dialog .modal-content {
    width:100%;
    height:100%;
    overflow:auto;
    scrollbar-width:thin;
    border-top:none;
    border-right:none;
    border-bottom:none;
    border-radius:0;
}
.modal.modal-right .modal-dialog .modal-content::-webkit-scrollbar {
    width:5px;
}

.modal.modal-right.fade:not(.show) .modal-dialog {
    -webkit-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
}
.modal.modal-right.fade.show .modal-dialog {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/***
Arrow icons
***/
[class^="icono-arrow1"] {
    width: 16px;
    height: 16px;
    border-width: 4px 4px 0 0;
    border-style: solid;
}
[class^="icono-arrow1"]:before {
    right: 0;
    top: -3px;
    position: absolute;
    height: 4px;
    box-shadow: inset 0 0 0 32px;
    transform: rotate(
            -45deg
    );
    width: 18px;
    transform-origin: right top;
}
[class^="icono-arrow1"][class*="-right"] {
    transform: rotate(45deg);
}
[class^="icono-arrow1"][class*="-right-sm"] {
    transform: rotate(45deg) scale(0.6);
}
[class^="icono-arrow1"][class*="-left"] {
    transform: rotate(-135deg);
}
[class^="icono-arrow1"][class*="-left-sm"] {
    transform: rotate(-135deg) scale(0.6);
}
[class^="icono-arrow1"][class*="-up"] {
    transform: rotate(-45deg);
}
[class^="icono-arrow1"][class*="-up-sm"] {
    transform: rotate(-45deg) scale(0.6);
}
[class^="icono-arrow1"][class*="-down"] {
    transform: rotate(135deg);
}
[class^="icono-arrow1"][class*="-down-sm"] {
    transform: rotate(135deg) scale(0.6);
}
[class^="icono-"] {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    box-sizing: border-box;
}
[class^="icono-"]:after, [class^="icono-"]:before {
    content: "";
    box-sizing: border-box;
}

/* Spinner */
.spinner-md {
    display:block;
    border-top:1px solid transparent;
    min-height:80px;
}
.spinner-md i {
    display:block;
    height: 40px;
    width: 40px;
    margin:40px auto;
    border-radius: 50%;
    border-top: 2px solid #4b8df8;
    border-right: 2px solid transparent;
    animation: spinner-rot 700ms linear infinite;
}
@keyframes spinner-rot {
    to {
        transform: rotate(360deg);
    }
}

input[type="color"]::-moz-color-swatch {
    border: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 0;
}
input[type="color"]::-webkit-color-swatch {
    border: none;
}
.colour-input {
    padding: 0;
    width: 38px;
    height: 38px;
    overflow: hidden;
}
.colour-input input {
    min-width: 40px;
    border: none;
    height: 38px;
    outline: none;
    margin: 0;
    margin-left: -2px;
}


.module-builder-image-box {
    position: relative;
    width:23%;
    float:left;
    border:1px solid #e5e5e5;
    margin:0 1% 10px;
    padding:6px;
    /*background-color:#292929;*/
}
.module-builder-image-box .answer-del {
    position: absolute;
    top:0;
    right:0;
}
.module-builder-image-box .image-preview {
    clear: both;
    display: block;
    margin: 20px 0 0;
    width:152px;
    height:101.334px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor:pointer;
}

.input-group-text.big-check {
    padding:0;
    min-width: 32px;
}
/* Big check boxes, Add/Remove check boxes */
.big-check input[type="checkbox"],
.big-check input[type="radio"] {
    display: none;
}
.big-check label.cbl {
    /*vertical-align: middle;*/
    margin:0;
}
.big-check label.cbl:before {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius:4px;
    height: 25px;
    width: 25px;
    display: block;
    cursor: pointer;
}
.input-group-text.big-check label.cbl:before {
    border:none;
}
.big-check input[type="checkbox"] + label.cbl:before,
.big-check input[type="radio"] + label.cbl:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 18px;
    content: '\f00c';
    color: #f8f8f8;
    line-height: 34px;
    height:34px;
    width:34px;
    text-align: center;
}
.big-check.fat input[type="checkbox"] + label.cbl:before,
.big-check.fat input[type="radio"] + label.cbl:before {
    font-size:25px;
    line-height: 50px;
    height: 50px;
    width: 50px;
}
.big-check .cbl.input_error:before {
    background-color: #ffbfc0;
}
.big-check .cbl.disabled {
    opacity:0.3;
}
.big-check .cbl.disabled:before {
    cursor:not-allowed;
}
.big-check input[type="checkbox"]:checked + label.cbl:before,
.big-check input[type="radio"]:checked + label.cbl:before {
    color: #009900;
}
.big-check input[type="checkbox"]:disabled + label.cbl:before,
.big-check input[type="radio"]:disabled + label.cbl:before {
    background:#f0f0f0;
}

.font-purple {
    color:#8e44ad;
}
.font-yellow {
    color:#ffb848 ;
}
.font-green-haze {
    color:#44b6ae;
}
.font-blue {
    color:#4b8df8;
}
.font-green-meadow {
    color:#1bbc9b;
}
.font-red-pink {
    color:#e08283;
}
.font-yellow-gold {
    color:#e87e04;
}