/* Scroller */
::-webkit-scrollbar {
    width: 6px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #7c7c7c;
    min-width: 30px;
}

/* Icon */
.icon-medium {
    font-size: medium !important;
}

.icon-larger {
    font-size: larger !important;
}

.icon-x-large {
    font-size: x-large !important;
}

/* Header nav etc*/
.nav-header{
    z-index: 1111 !important;
}

header.container {
    margin-bottom: 10px;
}

.container {
    max-width: 1200px;
    padding-bottom: 5px;
}

/* Sidebar */
.question-content .question-sidebar {
    width: 40%;
    float: right;
    margin-left: 15px;
}

/* Question footer hint button */
.check-question {
    display: flex;
}

.question-hint-solution {
    width: 100%;
    display: flex;
    gap: 10px;
}

/* Question footer next and check button */
.check-next-container {
    display: flex;
    gap: 10px;
    place-items: center;
}

/* Question Pattern and design */
.main-question .card-header {
    padding-left: 20px;
}

.main-question .card-header h4 {
    font-weight: 500;
}

.main-question i {
    margin-right: 10px;
}

.main-question .custom-switches-stacked {
    padding-left: 10px;
}

.main-question .card-body {
    padding-left: 30px;
    font-weight: 350;
}
/* Progress */
.card-primary .progress-bar {
    background-color: var(--fg-pink);
    color: var(--background-black)
}

.card-secondary .progress-bar {
    background-color: var(--fg-orange);
    color: var(--background-black)
}

.card-light .progress-bar {
    background-color: var(--fg-white);
    color: var(--background-black)
}

.card-success .progress-bar {
    background-color: var(--fg-green);
    color: var(--background-black)
}

.card-danger .progress-bar {
    background-color: var(--fg-red);
    color: var(--background-black)
}

.card-warning .progress-bar {
    background-color: var(--fg-yellow);
    color: var(--background-black)
}

.card-info .progress-bar {
    background-color: var(--fg-cyan);
    color: var(--background-black)
}

/* Pricing */
.pricing {
    background-color: var(--background-darkest);
    color: var(--fg-white);
}

.pricing.pricing-highlight {
    border: 1px solid var(--fg-pink);
    box-shadow: 0 4px 8px var(--trans-pink);
}

.pricing.pricing-highlight .pricing-title {
    background-color: var(--fg-pink);
    color: var(--background-black);
}

.pricing.pricing-highlight .pricing-cta a {
    background-color: var(--fg-pink);
    color: var(--fg-white);
}

.pricing.pricing-highlight .pricing-cta a:hover {
    background-color: var(--hover-pink) !important;
}

.pricing .pricing-title {
    background-color: var(--trans-pink);
    color: var(--fg-pink);
}

.pricing .pricing-details .pricing-item .pricing-item-icon {
    color: var(--fg-pink);
}

.pricing .pricing-details .pricing-item .pricing-item-icon.danger {
    color: var(--fg-red) !important;
}

.pricing .pricing-details .pricing-item .pricing-item-label.danger {
    color: var(--background-lightest);
}

.pricing .pricing-cta a {
    color: var(--fg-pink);
    background-color: transparent;
}

.pricing .pricing-cta a:hover {
    background-color: var(--trans-pink);
}

/* Nav Header FIB-CODE-MCQ */
.header {
    box-shadow: 0px 5px 12px 0px rgba(0, 0, 0, 0.50);
    background-color: var(--background-dark);
    position: sticky;
    top: 0;
    padding: 10px 0;
    z-index: 110;
    margin-bottom: 20px;
}

.header a.dropdown-item {
    white-space: normal;
    margin: 0 15px;
    padding: .3rem .8rem;
    line-height: 1.8 !important;
}

.header a.dropdown-item:active,
a.dropdown-item:focus {
    color: var(--fg-white) !important;
}

@media screen and (max-width: 768px) {
    .header {
        position: relative;
    }
}

/* Custom Switch Input MCQ */
.custom-switch-input:checked~.custom-switch-indicator.success:before {
    background: var(--fg-green) !important;
}

/* Hint and Solution of fib and mcq */
#arlarse-cramming-exercise.card {
    outline: 2px solid var(--background-dark-light);
}

#arlarse-cramming-exercise.card p {
    padding: 0 !important;
}

#arlarse-cramming-exercise .card-header {
    background-color: var(--background-darkest);
    padding: .75rem 1.25rem;
}

#arlarse-cramming-exercise .card-body {
    background-color: var(--background-darkest);
}

#arlarse-cramming-exercise .card-footer {
    background-color: var(--background-dark-light);
}

.hint-solution {
    color: white;
    display: none;
    background-color: transparent;
    padding: 0 1px;
}

#arlarse-cramming-project-submit:disabled,
#arlarse-cramming-project-submit:disabled:active,
#arlarse-cramming-project-submit:disabled:hover,
#arlarse-cramming-project-submit:disabled.btn-success-:hover,
#arlarse-cramming-project-submit:disabled.btn-success-:focus,
#arlarse-cramming-project-submit:disabled.btn-success-:active,
#arlarse-cramming-exercise-submit:disabled,
#arlarse-cramming-exercise-submit:disabled:active,
#arlarse-cramming-exercise-submit:disabled:hover,
#arlarse-cramming-exercise-submit:disabled.btn-success-:hover,
#arlarse-cramming-exercise-submit:disabled.btn-success-:focus,
#arlarse-cramming-exercise-submit:disabled.btn-success-:active {
    background-color: rgba(6, 255, 0, .1) !important;
    color: hsla(0, 0%, 49%, .8) !important;
    border-color: rgba(6, 255, 0, .15) !important;
}

#arlarse-cramming-exercise-run:disabled,
#arlarse-cramming-exercise-run:disabled:active,
#arlarse-cramming-exercise-run:disabled:hover,
#arlarse-cramming-exercise-run:disabled.btn-success-:hover,
#arlarse-cramming-exercise-run:disabled.btn-success-:focus,
#arlarse-cramming-exercise-run:disabled.btn-success-:active {
    background-color: rgba(6, 255, 0, .1) !important;
    color: hsla(0, 0%, 49%, .8) !important;
    border-color: rgba(6, 255, 0, .15) !important;
}

#hint {
    display: none;
}

#solution {
    display: none;
}

#hint.show {
    background-color: #13211f;
    color: #fff;
    border-top: 1px solid var(--fg-cyan);
    border-left: 1px solid var(--fg-cyan);
    border-right: 1px solid var(--fg-cyan);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 5px 10px;
    width: 100%;
    z-index: 10;
}

#hint .close {
    color: var(--fg-cyan);
    text-shadow: none;
    box-shadow: none !important;
    outline: none;
    transition: all 0.3s;
    opacity: 1;
    line-height: .5 !important;
    margin-right: -5px;
}

#hint .close:hover,
#hint .close:active,
#hint .close:focus {
    color: var(--fg-cyan) !important;
    opacity: 0.75 !important;
}

#solution.show {
    background-color: #132213;
    color: #fff;
    border-top: 1px solid var(--fg-green);
    border-left: 1px solid var(--fg-green);
    border-right: 1px solid var(--fg-green);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 5px 10px;
    width: 100%;
    z-index: 10;
}

#solution .close {
    color: var(--fg-green);
    text-shadow: none;
    box-shadow: none !important;
    outline: none;
    transition: all 0.3s;
    opacity: 1;
    line-height: .5 !important;
    margin-right: -5px;
}

#solution .close:hover,
#solution .close:active,
#solution .close:focus {
    color: var(--fg-green) !important;
    opacity: 0.75 !important;
}

/* Editor Feedback */
.editor-style-feedback {
    padding: 20px 25px;
    border-top: 2px solid var(--background-dark-light);
}

.editor-style-feedback h5 {
    letter-spacing: 1px;
    color: var(--fg-red);
}

.editor-style-feedback ul,
.editor-style-feedback ol {
    padding: 0 22px !important;
    max-height: 190px;
    overflow-x: hidden;
    overflow-y: auto !important;
    overflow-wrap: normal;
    margin: 0 !important;
    line-height: 22px;
}

.editor-style-feedback li {
    padding-left: 10px;
    margin-bottom: 6px;
    letter-spacing: 1px;
}

/* Izitoast Styling */
.iziToast {
    background-color: var(--background-dark) !important;
    font-family: 'Ubuntu', 'Segoe UI', arial, serif;
}

.iziToast:after {
    box-shadow: -2px 0px 10px 5px rgba(0, 0, 0, 0.4) !important;
}

.iziToast-title {
    color: var(--fg-white) !important;
}

.iziToast-message {
    font-size: 11px !important;
    font-weight: 700 !important;
}

.iziToast-close {
    opacity: 1 !important;
    transition: all .3s !important;
}

.iziToast-close:hover {
    opacity: 0.7 !important;
}

.iziToast-progressbar {
    background: none !important;
}

.arlarse-izi-primary .iziToast-message {
    color: var(--hover-pink) !important;
}

.arlarse-izi-success .iziToast-message {
    color: var(--hover-green) !important;
}

.arlarse-izi-info .iziToast-message {
    color: var(--hover-cyan) !important;
}

.arlarse-izi-warning .iziToast-message {
    color: var(--hover-yellow) !important;
}

.arlarse-izi-error .iziToast-message {
    color: var(--hover-red) !important;
    font-weight: 820 !important;
}

/* Question Navbar */
header .nav-chapter{
    width: 100%;
    overflow: hidden;
    white-space: nowrap !important;
}

header .pn-exercise,
header .nav-chapter{
    background-color: var(--trans-white) !important;
    color: var(--fg-white);
    border-radius: 5px;
}

header .pn-exercise:hover,
header .nav-chapter:hover{
    background-color: var(--background-light) !important;
    color: var(--fg-white);
}

/*# sourceMappingURL=custom.css.map */