@text-color: #42515f;
@main-color: #43aaa3;
@secondary-color: #2d9ec6;
@button-text-color: #fff;
@content-body-color: #fff;
@correct-color: #4caf50;
@incorrect-color: #f16162;

@main-font-fontFamily: Roboto Slab;

@Heading1-color: #42515f;
@Heading1-fontFamily: Roboto Slab;
@Heading1-fontStyle: normal;
@Heading1-fontWeight: 700;
@Heading1-size: 24px;
@Heading1-textDecoration: none;
@Heading1-textBackgroundColor: transparent;

@Heading2-color: #42515f;
@Heading2-fontFamily: Roboto Slab;
@Heading2-fontStyle: normal;
@Heading2-fontWeight: 700;
@Heading2-size: 22px;
@Heading2-textDecoration: none;
@Heading2-textBackgroundColor: transparent;

@Heading3-color: #42515f;
@Heading3-fontFamily: Roboto Slab;
@Heading3-fontStyle: normal;
@Heading3-fontWeight: 700;
@Heading3-size: 20px;
@Heading3-textDecoration: none;
@Heading3-textBackgroundColor: transparent;

@Highlighted-color: #fff;
@Highlighted-fontFamily: Roboto Slab;
@Highlighted-fontStyle: normal;
@Highlighted-fontWeight: normal;
@Highlighted-size: 18px;
@Highlighted-textDecoration: none;
@Highlighted-textBackgroundColor: #43aaa3;

@links-color: #43aaa3;
@links-fontFamily: Roboto Slab;
@links-fontStyle: normal;
@links-fontWeight: normal;
@links-size: 18px;
@links-textDecoration: underline;
@links-textBackgroundColor: transparent;

@Normal-color: #42515f;
@Normal-fontFamily: Roboto Slab;
@Normal-fontStyle: normal;
@Normal-fontWeight: normal;
@Normal-size: 18px;
@Normal-textDecoration: none;
@Normal-textBackgroundColor: transparent;

@Quote-color: #42515f;
@Quote-fontFamily: Roboto Slab;
@Quote-fontStyle: italic;
@Quote-fontWeight: normal;
@Quote-size: 18px;
@Quote-textDecoration: none;
@Quote-textBackgroundColor: transparent;


body {
    color: @text-color;
    font-family: @main-font-fontFamily;
}

.header:before {
    background-color: fade(@main-color, 70%);
}

.button {
    font-family: @main-font-fontFamily;

    &.primary {
        color: @button-text-color;
        border-color: @main-color;
        background-color: @main-color;

        &:not(.disabled):hover, &:not(.disabled):focus {
            background-color: shade(@main-color,10%);
            border-color: shade(@main-color,10%);
        }
    }

    &.default {
        border-color: @main-color;
        color: @main-color;

        &:not(.disabled):hover, &:not(.disabled):focus {
            color: @button-text-color;
            background-color: @main-color;
        }
    }

    &.link {
        color: fade(@text-color, 60%);

        &:not(.disabled):hover, &:not(.disabled):focus {
            color: fade(@text-color, 90%);
            border-bottom-color: @text-color;
        }
    }

    &.check {
        border-color: fade(@main-color, 10%);
        color: fade(@text-color, 70%);

        &:hover, &:focus {
            border-color: fade(@main-color, 20%);
            color: fade(@text-color, 80%);

            &:before {
                border-color: @main-color;
            }
        }

        &:before {
            border-color: fade(@text-color, 20%);
        }

        &.active {

            &:before {
                border-color: @main-color;
                background-color: @main-color;
            }
        }
    }

    &.transparent {
        background-color: transparent;
        border-color: fade(@main-color, 30%);
        color: @main-color;

        &:hover, &:focus {
            border-color: @main-color;
        }
    }
}

.login {
    h2 {
        color: @text-color;
    }

    h3 {
        color: @text-color;
    }

    h4 {
        color: fade(@text-color, 70%);
    }

    footer {
        color: fade(@text-color,50%);
    }

    .icon-container {
        color: @main-color;
        background: fade(@main-color, 20%);
    }

    form {
        .form-row {
            h4 {
                color: fade(@text-color, 70%);
            }

            input {
                color: @text-color;

                + label {
                    color: fade(@text-color,50%);
                }
            }

            .link {
                a {
                    color: fade(@main-color, 70%);

                    &:hover, &:focus {
                        color: @main-color;
                        text-decoration: underline;
                    }
                }
            }

            .checkbox-container {
                color: fade(@text-color, 50%);

                &:hover, &:focus {
                    color: fade(@text-color, 70%);
                }

                &.active {

                    .checkbox-box {
                        background-color: @main-color;
                        border-color: @main-color;
                    }
                }
            }

            .secret-link-confirm-container {
                color: fade(@text-color, 70%);

                .secret-link-confirm-wrapper {
                    background-color: fade(@main-color, 10%);

                    .icon-envelope {
                        color: fade(@main-color, 70%);
                    }
                }
            }
        }
    }
}

.navigation-home-link {
    background-color: transparent;
    border-color: tint(@main-color,20%);
    color: tint(@main-color,20%);

    &:not(.disabled):hover, &:not(.disabled):focus {
        background-color: @main-color;
        border-color: @main-color;
        color: @button-text-color;
    }
}

.question-navigation-bar {
    color: @text-color;

    a {
        &:before {
            background-color: tint(@main-color,20%);
        }
                        
        &:after {
            border-color: @button-text-color;
        }

        &:not(.disabled):hover, &:not(.disabled):focus {
            &:before {
                background-color: @main-color;
            }
        }
    }
}

.learning-content {
    .learning-content-title {
        background-color: tint(@main-color,20%);
        color: @button-text-color;
    }
}

.result-block-wrapper {
    .question-result-block {
        &::before {
            background-color: @correct-color;
        }

        &.incorrect::before{
            background-color: @incorrect-color;
        }
    }
}

.content {
    background-color: @content-body-color;
}

.mastered-score-tooltip {
    background-color: @content-body-color;
    color: @text-color;

    &.mastered {
        background-color: @correct-color;
        color: @button-text-color;
    }
}

.information-content-title {
    .h3-styled-text;
    color: @Heading3-color;
    background-color: @Heading3-textBackgroundColor;

    border-bottom-color: fade(@Normal-color, 10%);
}

.normal-styled-text {
    font-family: @Normal-fontFamily;
    font-style: @Normal-fontStyle;
    font-weight: @Normal-fontWeight;
    font-size: @Normal-size;
    text-decoration: @Normal-textDecoration;
}

.h1-styled-text {
    font-size: @Heading1-size;
    font-weight: @Heading1-fontWeight;
    font-family: @Heading1-fontFamily;
    font-style: @Heading1-fontStyle;
    text-decoration: @Heading1-textDecoration;
}

.h2-styled-text {
    font-size: @Heading2-size;
    font-weight: @Heading2-fontWeight;
    font-family: @Heading2-fontFamily;
    font-style: @Heading2-fontStyle;
    text-decoration: @Heading2-textDecoration;
}

.h3-styled-text {
    font-size: @Heading3-size;
    font-weight: @Heading3-fontWeight;
    font-family: @Heading3-fontFamily;
    font-style: @Heading3-fontStyle;
    text-decoration: @Heading3-textDecoration;
}

.styled-content {
    .normal-styled-text;
    color: @Normal-color;
    color: @Normal-color;
    font-family: @Normal-fontFamily;
    font-style: @Normal-fontStyle;
    font-weight: @Normal-fontWeight;
    font-size: @Normal-size;
    text-decoration: @Normal-textDecoration;

    h1 {
        .h1-styled-text;
        color: @Heading1-color;
        background-color: @Heading1-textBackgroundColor;

        mark {
            .h1-styled-text;
        }
    }

    h2 {
        .h2-styled-text;
        color: @Heading2-color;
        background-color: @Heading2-textBackgroundColor;

        mark {
            .h2-styled-text;
        }
    }

    h3 {
        .h3-styled-text;
        color: @Heading3-color;
        background-color: @Heading3-textBackgroundColor;

        mark {
            .h3-styled-text;
        }
    }

    p {
        .normal-styled-text;
        color: @Normal-color;
        background-color: @Normal-textBackgroundColor;
    }

    a {
        color: @links-color;
        font-family: @links-fontFamily;
        font-style: @links-fontStyle;
        font-weight: @links-fontWeight;
        font-size: @links-size;
        text-decoration: @links-textDecoration;
        background-color: @links-textBackgroundColor;

        &:hover {
            color: shade(@links-color,10%);
        }
    }

    cite {
        border-left-color: @main-color;
        color: @Quote-color;
        font-family: @Quote-fontFamily;
        font-style: @Quote-fontStyle;
        font-weight: @Quote-fontWeight;
        font-size: @Quote-size;
        text-decoration: @Quote-textDecoration;
        background-color: @Quote-textBackgroundColor;

        &:before, &:after {
            color: @Quote-color;
        }
    }

    mark {
        color: @Highlighted-color;
        font-family: @Highlighted-fontFamily;
        font-style: @Highlighted-fontStyle;
        font-weight: @Highlighted-fontWeight;
        font-size: @Highlighted-size;
        text-decoration: @Highlighted-textDecoration;
        background-color: @Highlighted-textBackgroundColor;
    }

    u {
        border-bottom: 1px solid @text-color;
    }

    .table-wrapper {
        color: @Normal-color;
        font-family: @Normal-fontFamily;
        font-style: @Normal-fontStyle;
        font-weight: @Normal-fontWeight;
        font-size: @Normal-size;
        text-decoration: @Normal-textDecoration;

        table {
            th {
                background-color: fade(@secondary-color, 50%);
            }

            thead {
                + caption {
                    + tbody {
                        tr {
                            &:first-child {
                                td, th {
                                    background-image: linear-gradient(@content-body-color 0px, @content-body-color 2px, transparent 2px, transparent 100%);
                                }
                            }
                        }
                    }
                }

                + tbody {
                    tr {
                        &:first-child {
                            td, th {
                                background-image: linear-gradient(@content-body-color 0px, @content-body-color 2px, transparent 2px, transparent 100%);
                            }
                        }
                    }
                }
            }

            tbody {
                td {
                    background-color: fade(@secondary-color, 10%);
                }
            }

            tr {
                + tr {
                    td, th {
                        background-image: linear-gradient(@content-body-color 0px, @content-body-color 2px, transparent 2px, transparent 100%);
                    }
                }
            }
        }
    }

    ul, ol {
        li {
            color: @Normal-color;
            font-family: @Normal-fontFamily;
            font-style: @Normal-fontStyle;
            font-weight: @Normal-fontWeight;
            font-size: @Normal-size;
            text-decoration: @Normal-textDecoration;
        }
    }

    ul {
        & > li {
            &:before {
                background-color: @main-color;
                top: @Normal-size - 2;
            }
        }
    }

    .cource-intro-title{

        &:after{
            background: @main-color;
        }
    }

    .author-information-contacts{
        font-size: @Normal-size - 4;
    }
}

.question-title {
    .h3-styled-text;
    color: @Heading3-color;
    background-color: @Heading3-textBackgroundColor;
}

.question-content {
    .normal-styled-text;
    color: @Normal-color;
}

@media (max-width: 768px) {

    .styled-content {
        font-size: @Normal-size - 2;

        h1 {
            font-size: @Heading1-size - 2;
        }

        h2 {
            font-size: @Heading2-size - 2;
        }

        h3 {
            font-size: @Heading3-size - 2;
        }

        a {
            font-size: @links-size - 2;
        }

        cite {
            font-size: @Quote-size - 2;
        }

        mark {
            font-size: @Highlighted-size - 2;
        }

        .table-wrapper {
            font-size: @Normal-size - 2;
        }

        ul, ol {
            li {
                font-size: @Normal-size - 2;
            }
        }

        ul {
            li {
                &:before {
                    top: @Normal-size - 4;
                }
            }
        }
    }
}


.radio {
    .normal-styled-text;
    background-color: fade(@main-color,10%);
    color: @text-color;

    &.enabled {
        &:hover, &:focus {
            background: fade(@main-color,20%);

            .radio-icon {
                box-shadow: 0 0 0 2px @main-color inset;
            }
        }
    }

    &.checked {
        background-color: fade(@main-color,30%);

        .radio-icon {
            background-color: @main-color;
        }
    }
}

.ranking-item {
    .normal-styled-text;
    min-height: @Normal-size*1.5 + 32px;
    background-color: fade(@main-color,10%);
    color: @text-color;

    .ranking-item-icon {
        &:before {
            border-color: transparent transparent @text-color transparent;
        }

        &:after {
            border-color: @text-color transparent transparent transparent;
        }
    }

    &:hover, &:focus {
        background-color: fade(@main-color,20%);
    }
}

.checkbox {
    .normal-styled-text;
    background-color: fade(@main-color,10%);
    color: @text-color;

    &.enabled {
        &:hover, &:focus {
            background: fade(@main-color,20%);

            .checkbox-icon {
                box-shadow: 0 0 0 2px @main-color inset;
            }
        }
    }

    &.checked {
        background-color: fade(@main-color,30%);

        .checkbox-icon {
            background-color: @main-color;
        }
    }
}

.fill-in-the-blank {
    color: @text-color;

    .blankInput {
        .normal-styled-text;
        color: @text-color;
    }
}

.select-container {
    ul {
        .normal-styled-text;
        background-color: @main-color;

        li {
            &:first-child {
                &:after {
                    background-color: @main-color;
                }
            }

            &:hover, &:focus {
                background-color: shade(@main-color,10%);

                &:first-child {
                    &:after {
                        background-color: shade(@main-color,10%);
                    }
                }
            }
        }
    }
}

.single-select-image {
    .select-image {

        .select-image-wrapper {
            .preview-thumbnail {
                border: 3px solid tint(@main-color,20%);
            }
        }

        &.enabled {
            .select-image-wrapper {
                .preview-thumbnail {
                    &:hover, &:focus {
                        border: 3px solid @main-color;
                        box-shadow: 0 0 10px 2px fade(@main-color, 75%);
                    }
                }

                button {
                    &:hover, &:focus {
                        background-color: @main-color;
                        border-color: @main-color;
                        color: @button-text-color;
                    }
                }
            }
        }

        &.checked {
            .preview-thumbnail {
                border: 3px solid @main-color;
            }
        }
    }
}

.overlay-holder {
    .overlay {
        background-color: fade(@content-body-color,90%);
    }
}

.statement {
    .normal-styled-text;

    .statement-item {
        .statement-label, .statement-option, .statement-option-separator-wrapper {
            background-color: fade(@main-color, 10%);
        }

        &:hover, &:focus {
            .statement-label, .statement-option, .statement-option-separator-wrapper {
                background-color: fade(@main-color, 20%);
            }
        }

        &.checked {
            .statement-label, .statement-option, .statement-option-separator-wrapper {
                background-color: fade(@main-color, 30%);

                &:hover, &:focus {
                    background-color: fade(@main-color, 30%);
                }
            }
        }
    }

    .radio-icon-wrapper {
        .radio-icon {
            &:hover, &:focus {
                box-shadow: 0 0 0 2px @main-color inset;
            }

            &.checked {
                background-color: @main-color;
            }
        }
    }
}

.drag-and-drop-text-draggable-container {
    &.empty, &.active {
        border-color: @main-color;
        color: fade(@text-color, 70%);
    }
}

.drag-and-drop-text-draggable-container-message {
    color: @text-color;
}

.drag-and-drop-text-draggable {
    background-color: @main-color;

    &.ui-draggable-dragging, &:hover, &:focus {
        background-color: shade(@main-color,10%);
    }
}

.text-matching-caption {
    background-color: fade(@main-color,20%);
    color: fade(@text-color,50%);

    &:after {
        background-color: fade(@main-color,20%);
    }

    &:before {
        border-right: 5px solid fade(@main-color,20%);
    }
}

.text-matching-source {
    background-color: fade(@main-color,10%);
    border: 1px solid @main-color;
    color: @text-color;

    &:after {
        background: @content-body-color;
        border: 2px solid @main-color;
    }

    &:before {
        background: @content-body-color;
    }
}

.text-matching-source-text-wrapper {
    color: @text-color;
}

.text-matching-target {
    background-color: @main-color;
    color: @button-text-color;

    &:before, &:after {
        background-color: @main-color;
    }

    &.handle {
        background-color: shade(@main-color,10%);

        &:before {
            background: shade(@main-color,10%);
        }

        &:after {
            background: shade(@main-color,10%);
        }
    }
}

.text-matching-target-placeholder-text-wrapper {
    border: 2px dashed @main-color;
}

.text-matching-target-placeholder-wrapper {
    .text-matching-target-placeholder-text {
        color: fade(@text-color, 70%);
    }

    &.hover {
        .text-matching-target-placeholder-text-wrapper {
            border: 1px solid @main-color;
            box-shadow: 0 0 3px 2px fade(@main-color,30%);
        }

        .text-matching-target-placeholder-text {
            color: @text-color;
        }
    }
}

.text-matchig-source-text,
.text-matching-target-text,
.text-matching-target-placeholder-text {
    .normal-styled-text;
}

.edit-field-wrapper {
    .edit-field {
        .normal-styled-text;
        color: @text-color;

        &:focus::-moz-placeholder {
            color: fade(@text-color,50%);
            opacity: 1;
        }

        &:focus::-webkit-input-placeholder {
            color: fade(@text-color,50%);
            opacity: 1;
        }
    }
}

.summary-extended-background,
.results-summary-heading {
    background-color: @content-body-color;
}

.exit-course-button {
    color: @button-text-color;
    background-color: @main-color;
    font-family: @main-font-fontFamily;

    &:not(.disabled):hover, &:not(.disabled):focus {
        background-color: shade(@main-color, 10%);
    }
}

.popup-layout {
    background-color: fade(@content-body-color,90%);

    .popup {

        .close-btn {
            color: @text-color;
        }

        article {
            background-color: @content-body-color;

            .icon-container {

                .icon-wrapper {
                    color: @main-color;
                    background-color: fade(@main-color, 10%);
                }
            }

            header {
                p {
                    color: fade(@text-color, 70%);
                }

                .icon-container {
                    color: @main-color;
                    background: fade(@main-color, 20%);
                }
            }

            aside {
                background-color: fade(@main-color, 20%);
                color: @text-color;

                .icon-envelope {
                    color: @main-color;
                }
            }

            section {
                background-color: shade(@content-body-color, 5%);
                border-color: @main-color;

                ul {
                    li {
                        color: @text-color;
                    }
                }
            }
        }

        footer {
            background-color: transparent;
        }

        .popup-switch-options {
            color: fade(@text-color, 50%);
        }

        .popup-table {
            .popup-cell {
                p {
                    color: fade(@text-color, 70%);
                }

                &.seperator {
                    color: fade(@text-color, 50%);
                }

                .icon-container {
                    color: @main-color;
                    background: fade(@main-color, 10%);
                }

                .input-wrapper {
                    [class^="icon-"], [class*=" icon-"] {
                        color: fade(@text-color, 50%);
                    }
                }

                input {
                    color: fade(@text-color, 90%);
                    background-color: fade(@main-color, 10%);

                    &::selection {
                        background-color: @main-color;
                        color: @button-text-color;
                    }

                    &::-moz-selection {
                        background-color: @main-color;
                        color: @button-text-color;
                    }
                }
            }
        }
    }
}

.toggle-expand-container {
    .expand-button {
        border: 1px solid @main-color;

        &:after {
            border-color: @main-color;
        }
    }

    &:hover, &:focus {
        .expand-button {
            background-color: @main-color;

            &:after {
                border-color: #fff;
            }
        }
    }
}

.text-404 {
    .title-404 {
        color: @text-color;
    }
}

.canvas-styles {
    color: fade(white, 50%);
    border-color: @secondary-color;
    outline-color: @correct-color;
}

.sections-title-container{
    &:before,
    &:after{
        background-color: fade(@text-color, 20%);
    }
    .sections-title{
        color: @text-color;
    }
}


.sections-list-item {

    &:not(.disabled):hover, &:not(.disabled):focus {
        border-color: @main-color;
    }

    .section-info {
        background: @content-body-color;
    }

    &.List {

        &:not(.disabled):hover, &:not(.disabled):focus {
            box-shadow: 0 0px 0px 2px @main-color;
        }

        .section-info {
            background-color: @content-body-color;
        }

        .progressbar {
            background-color: #f0f0f0;

            .progressbar-value {
                background-color: @secondary-color;

                &.mastered {
                    background-color: @main-color;
                }
            }
        }

        .section-progress {
            .progress-value-text{
                &.completed{
                    color: @correct-color;
                }
            }
        }
    }

    &.Tiles {
        &:hover, &:focus {
            box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.10);
        }

        .section-info::after {
            background-color: @content-body-color;
        }

        .section-image-holder .button {
            background-color: @content-body-color;
            border-color: @content-body-color;
            color: @main-color;

            &:hover, &:focus, &:active {
                background-color: @main-color;
                border-color: @main-color;
                color: @button-text-color;
            }
        }

        .section-progress {
            background-color: fade(@text-color, 40%);
            color: @button-text-color;
        }
    }
}

.exit-course-wrapper {
    .exit-course-link-wrapper {
        .exit-course-link {
            color: fade(@text-color, 80%);

            &:hover, &:focus {
                border-color: fade(@text-color, 80%);
            }
        }
    }
}

.noaccess {
    .noaccess-icon .icon-attention {
        color: @main-color;

        &:after {
            background-color: fade(@main-color,10%);
        }
    }
}

.tree-of-content-panel {
    .tree-of-content-panel-tail {
        background-color: @content-body-color;
        color: fade(@text-color,80%);

        &:hover, &:focus {
            background-color: @main-color;
            color: @button-text-color;
        }
    }

    &:not(.expanded) {
        .tree-of-content-panel-tail {
            &:focus {
                box-shadow: 0 0 0 2px shade(@main-color,10%), 3px 4px 1px 0 rgba(0,0,0,.2);
            }
        }
    }

    &.expanded {
        .tree-of-content-panel-tail {
            background-color: @content-body-color;
            color: fade(@text-color,80%);

            &:hover, &:focus {
                background-color: @main-color;
                color: @button-text-color;
            }
        }
    }

    &.keyboard-navigation {
        .tree-of-content-container {
            .tree-of-content {
                .tree-of-content-section-item {
                    .tree-of-content-section-title-wrapper, .tree-of-content-question-title-wrapper {
                        &:last-child:focus,
                        &:focus {
                            box-shadow: inset 0 0 0 2px @main-color;
                        }
                    }
                }
            }
        }
    }

    .tree-of-content-container {
        background-color: @content-body-color;

        .tree-of-content-section-title-icon {
            color: fade(@text-color,80%);
        }

        .tree-of-content {
            color: fade(@text-color, 80%);
            font-family: @main-font-fontFamily;

            .tree-of-content-header {
                color: @text-color;
            }

            .tree-of-content-section-item {
                &.active {
                    .tree-of-content-section-title-wrapper {
                        color: @text-color;
                        border-color: @main-color;
                    }
                }

                .tree-of-content-section-title-wrapper, .tree-of-content-question-title-wrapper {
                    border-color: fade(@text-color, 10%);
                    color: fade(@text-color, 80%);

                    .tree-of-content-question-title {
                        color: fade(@text-color, 80%);
                    }

                    &:last-child:hover,
                    &:hover {
                        border-color: @main-color;
                        color: @text-color;

                        .tree-of-content-question-title {
                            color: @text-color;
                        }
                    }
                }

                .tree-of-content-questions-wrapper {
                    background-color: @content-body-color;
                    border-bottom-color: fade(@text-color, 20%);

                    .tree-of-content-question-item {
                        &.active {
                            .tree-of-content-question-title-wrapper {
                                border-color: @main-color;

                                .tree-of-content-question-title-icon {
                                    color: @main-color;
                                }

                                .tree-of-content-question-title {
                                    color: @text-color;
                                }
                            }
                        }

                        &:last-child {
                            .tree-of-content-question-title-wrapper:hover,
                            .tree-of-content-question-title-wrapper:focus {
                                border-color: @main-color;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 820px) {
    .tree-of-content-panel {
        .tree-of-content-container {
            background-color: @content-body-color;

            .tree-of-content {
                .tree-of-content-header {
                    .tree-of-content-header-btn {
                        .tree-of-content-header-btn-icon {
                            color: fade(@text-color,70%);
                        }

                        &:hover, &:focus {
                            .tree-of-content-header-btn-icon {
                                color: @text-color;
                            }
                        }
                    }
                }
            }
        }
    }
}

/*#region CUSTOM SROLLBAR*/

.ps-container {
    & > .ps-scrollbar-y-rail {
        & > .ps-scrollbar-y {
            background-color: fade(@text-color, 20%) !important;
        }
    }
}

/*#endregion CUSTOM SROLLBAR*/
.helper-tooltip-container {

    .material-icons {
        color: fade(@text-color, 50%);

        &:hover, &:focus {
            color: @main-color;
        }
    }
}

.pulsar-loader {
    .pulsar-loader-item {
        background-color: @button-text-color;
    }
}

.pulsar-loader.secondary {
    .pulsar-loader-item {
        background-color: @main-color;
    }
}

.blockout {

    &.active {
        visibility: visible;
        background-color: fade(@content-body-color, 90%);
    }

    .blockout-text {
        background-color: fade(@main-color, 20%);
        color: fade(@text-color, 80%);
    }
}

/*#region RESULT PAGE */
.overall-progress{
    .canvas-styles{
        color: fade(@text-color, 20%);
    }
    .overall-progress-progressbar-text{
        .score{
            color: fade(@text-color, 70%);
        }
    }
    .overall-progress-progressbar {
        &.success { 
            .overall-progress-progressbar-canvas {                              
                border-color: @correct-color;
            }
        }
        
        &.fail { 
            .overall-progress-progressbar-canvas {                        
                border-color: @incorrect-color;
            }
        }
    }
}

.content-container.module-resultPage{
    #content{
        .result-header{
            .course-title{				
                .course-label{
                    color: fade(@text-color, 50%);
                }
            }
        }

        .result-page-content{              
            background-color: @content-body-color;
            
            .section-header{  
                &.correct{
                    background-color: fade(@correct-color, 10%);
                    border-top-color: fade(@correct-color, 20%);

                    .section-header-analytic-icon{
                        background-color: @correct-color;
                    }
                }

                &.wrong{     
                    background-color: fade(@incorrect-color, 10%);
                    border-top-color: fade(@incorrect-color, 20%);  

                    .section-header-analytic-icon{
                        background-color: @incorrect-color;
                    }
                }

                .section-header-label{
                    color: @text-color;
                }

                .section-header-analytic{
                    color: @text-color;
                }

                .section-header-content-readed,
                .section-header-correct{
                    font-family: @main-font-fontFamily;
                }
            }

            .section-content{                    
                .question-header{   
                    &.survey{
                        &::after,
                        .question-header-icon{
                            color: @secondary-color;
                        }
                    }

                    &.incorrect{
                        &::after,
                        .question-header-icon{
                            color: @incorrect-color;
                        }
                    }

                    &.correct{
                        &::after,
                        .question-header-icon{
                            color: @correct-color;
                        }
                    }
                }

                .question-title,
                .question-content{                        
                    border-color: fade(@text-color, 10%);

                    .overlay-wrapper::before{
                        background-color: fade(@content-body-color, 30%);
                    }
                    
                    .question-result-block{
                        color: @correct-color;
                        background-color: fade(@correct-color, 10%);

                        &.incorrect{
                            color: @incorrect-color;
                            background-color: fade(@incorrect-color, 10%);
                        }
                    }
                }
            }
        }   

        .result-page-go-top{
            background-color: fade(@main-color, 70%);
            color: white;
            box-shadow: 0px 0px 4px -1px black;

            &:hover{            
                background-color: @main-color;
            }
        }
    }
}
/*#endregion */

.or-separator {
    .or-separator-text {
        color: fade(@text-color, 50%);

        &:before,
        &:after {
            background: fade(@text-color, 10%);
        }
    }
}

/*#region ACCOUNT*/

.account {
    .content {
        h3,h4{
            color: fade(@text-color, 70%);
        }

        .social-container{
            .social-button{
                background-color: fade(@main-color, 70%);
                color: @button-text-color;

                &:hover, &:focus {
                    background-color: @main-color;
                }
            }
        }
        .input-container{

            &.error{
                .input-field,
                .input-field:not(.empty){
                    border-color: @incorrect-color;
                }
                .input-icon{
                    color: @incorrect-color;
                }
                .validation-container{
                    .validator{
                        color: @incorrect-color;
                        .validator-icon{
                            color: @content-body-color;
                            background-color: @incorrect-color;
                        }
                    }
                }
            }

            .input-field{
                font-family: @main-font-fontFamily;
                border-color: fade(@text-color, 30%);
                color: @text-color;

                &:hover, &:focus {
                    border-color: @main-color;
                    box-shadow: 0px 1px 0px @main-color;
                }

                &:hover ~ .input-icon, &:focus ~ .input-icon {
                    color: @main-color;

                    &.password{
                        color: fade(@text-color, 50%);
                    }
                }

                &:not(.empty){
                    &:focus,
                    &:hover{
                        border-color: @main-color;
                        box-shadow: 0px 1px 0px @main-color;
                    }
                    border-color: fade(@text-color, 30%);
                    box-shadow: none;
                }

                &:not(.empty):focus ~ .input-icon,
                &:not(.empty):hover ~ .input-icon  {
                    color: @main-color;

                    &.password{
                        color: fade(@text-color, 50%);
                    }
                }
            }

            .input-label{
                color: fade(@text-color, 50%);
            }

            .input-icon{
                color: fade(@text-color, 40%);

                &.password{
                    color: fade(@text-color, 50%);

                    &:hover{
                        color: @text-color;
                    }
                }
            }

            .error-message{
                color: @incorrect-color;
            }
            .validation-container{
                color: fade(@text-color, 40%);
                
                .validator{
                    transition: color .2s linear;
                    &.correct{
                        color: fade(@text-color, 60%);
                        .validator-icon{
                            background-color: @correct-color;
                        }
                    }
                    .validator-icon{
                        transition: color .2s linear, background-color .2s linear;
                        color: @content-body-color;
                        background-color: fade(@text-color, 40%);
                    }
                }
            }
            .forgot-password {
                color: fade(@text-color, 70%);

                &:hover{
                    color: @text-color;
                }
            }
        }
        hr{
            border-color: fade(@text-color, 10%);
        }
        .account-hint{
            color: fade(@text-color, 50%);

            a{
                color: fade(@main-color, 70%);

                &:hover{
                    color: @main-color;
                }
            }
        }
        .back-button-container{
            color: fade(@text-color, 70%);

            &:hover{
                color: @main-color;
                .back-button-arrow{
                    color: @main-color;
                }
            }

            .back-button-arrow{
                color: fade(@text-color, 70%);
            }
        }
    }
}

.secret-link-confirm-container {
    color: fade(@text-color, 70%);

    .secret-link-confirm-wrapper {
        background-color: fade(@main-color, 10%);

        .icon-envelope {
            color: fade(@main-color, 70%);
        }
    }
}
.popup-wrapper{
    .secret-link-confirm-container {
        color: fade(@text-color, 70%);
        background-color: @content-body-color;

        .secret-link-confirm-wrapper {
            background-color: fade(@correct-color, 10%);

            .icon-envelope {
                color: @correct-color
            }
        }
    }
}

/*#endregion ACCOUNT*/

/*region DOCUMENT*/
.document-editor > div {
    border-bottom: 1px solid fade(@text-color, 10%);

    .document-container {
        .download-document-btn {
            color: fade(@text-color, 90%);
            background-color: fade(@text-color, 10%);

            &:hover, &:focus, &:active {
                color: fade(@text-color, 100%);
                background-color: fade(@text-color, 20%);
            }
        }
        .document-icon {
            color: fade(@text-color, 50%);
        }
        .separator:before {
            background-color: fade(@text-color, 10%);
        }
        .document-title {
            color: fade(@text-color, 80%);
        }
    }
}

.document-block-iframe-wrapper {    
    iframe.document-block-iframe {
        border: 1px solid fade(@text-color, 10%);
    }
}
/*endregion DOCUMENT*/

/*region CURATION*/
.content-inner-wrapper {
    border-top: 1px solid fade(@Normal-color, 10%);
    border-bottom: 1px solid fade(@Normal-color, 10%);
   .text-wrapper {
        .text-block {
            div.link-title {
                &.parsed {
                    color: @main-color;
                }
                &.empty {
                    background-color: fade(@Normal-color, 10%);
                }
            }
            div.link-content {
                &.parsed {
                    color: @text-color;
                } 
                &.empty {
                    &:before {
                        background-color: fade(@Normal-color, 10%);
                    }
                    &:after {
                        background-color: fade(@Normal-color, 10%);
                    }
                }
            }
        }
        .static-link-present {
            .link-url {
                color: fade(@text-color, 70%);
            }
        }
    }
    div.images {
        &.parsed {  
            background-color: fade(@Normal-color, 5%);
        }
    }
}
/*#endregion CURATION*/
.copyright-text{
    color: fade(@text-color, 70%);
}

/*region Media editor audio*/
.audio-editor {
    > div {
        border-color: fade(@Normal-color, 10%);
    }
}

.rating-control {

    .rating-container {

        .rating-item-btn {
            background-color: tint(@main-color, 10%);
            border-color: tint(@main-color, 10%);
            color: @button-text-color;

            &.highlighted, &:focus {
                background-color: @main-color;
                border-color: rgba(0, 0, 0, 0.1);
            }

            &.checked {
                background-color: @main-color;
                border-color: rgba(0, 0, 0, 0.1);
            }
        }
    }
}

.fullscreen-popup-container{
    background-color: fade(@content-body-color, 98%);
    .fp-content-row{

        .fp-content-cell{

            .fp-content{
                .fp-rating-container{
                    .fp-rating-tips{
                        .fp-rating-tip{
                            color: fade(@text-color, 50%);
                        }
                    }
                }
                hr{
                    background-color: fade(@text-color, 10%);
                }
                .fp-field {
                    .fp-field-input {
                        color: @text-color;
                        font-family: @main-font-fontFamily;
                        border: 1px solid fade(@text-color, 20%);
                        &:focus {
                            border: solid 1px @main-color;
                        }
                    }
                }
            }

            .note{
                background: fade(@main-color, 5%);
                border-top: 4px solid fade(@main-color, 50%);
            }
        }
    }
}

/*#endregion Media editor audio*/

/*#region EXPANDABLE BLOCK*/

.expandable-block {
    &::before {
        background-color: @main-color;
    }

    &::after {
        background-color: fade(@text-color, 10%);
    }

    &:hover,
    &:focus {
        &::after {
            background-color: fade(@main-color, 30%);
        }

        .expandable-block-content {
            .expand-button {
                .material-icons {
                    color: fade(@main-color, 100%);
                }
            }
        }
    }

    .expandable-block-content {
        .expandable-block-content-title {
            font-family: @main-font-fontFamily;
            color: @text-color;
        }

        .expand-button {
            background-color: transparent;

            .material-icons {
                color: fade(@text-color, 50%);
            }
        }
    }
}

/*#endregion*/

/*region Resend results dialog*/

.fullscreen-popup-container.resend-results {
    .fp-content-row{
        .fp-content-cell{
            .note{
                background: fade(@incorrect-color, 5%);
                border-top: 4px solid fade(@incorrect-color, 50%);

                .error-message {
                    color: #fff;
                    background-color: fade(@incorrect-color, 50%);
                }
            }
        }
    }
}

/*#endregion*/

.text-main-color{
    color: @main-color;
}
.correct-color{
    color: @correct-color;
}
.incorrect-color{
    color: @incorrect-color;
}