@text-color: #252728;
@main-color: #43aaa3;
@secondary-color: #2d9ec6;
@button-text-color: #fff;
@content-body-color: #fff;

@main-font-fontFamily: Roboto Slab;

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

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

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

@Highlighted-color: #252728;
@Highlighted-fontFamily: Roboto Slab;
@Highlighted-fontStyle: normal;
@Highlighted-fontWeight: normal;
@Highlighted-size: 18px;
@Highlighted-textDecoration: none;
@Highlighted-textBackgroundColor: #2d9ec6;

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

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

@Quote-color: #252728;
@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: tint(@main-color,20%);
}

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

    &.primary {
        color: @button-text-color;
        border-color: shade(@main-color,10%);
        background-color: @main-color;

        &:not(.disabled):hover, &:not(.disabled):focus {
            background-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: tint(@main-color,20%);
    color: @button-text-color;

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

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

.question-navigation-bar {
    a {
        &:not(.disabled):hover, &:not(.disabled):focus {
            &:before, &:after {
                border-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: @main-color;
        }
    }
}

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

.mastered-score-tooltip {
    background-color: @secondary-color;
    color: @button-text-color;

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

.styled-content {
    color: @text-color;

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

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

        mark {
            .h1-styled-text;
        }
    }

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

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

        mark {
            .h2-styled-text;
        }
    }

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

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

        mark {
            .h3-styled-text;
        }
    }

    p {
        color: @Normal-color;
        font-family: @Normal-fontFamily;
        font-style: @Normal-fontStyle;
        font-weight: @Normal-fontWeight;
        font-size: @Normal-size;
        text-decoration: @Normal-textDecoration;
        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;
    }

    cite {
        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 {

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

                + caption {
                    + tbody {
                        tr {
                            &:first-child {
                                td, th {
                                    background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 2px, fade(@secondary-color, 10%) 2px, fade(@secondary-color, 10%) 100%);
                                }
                            }
                        }
                    }
                }

                + tbody {
                    tr {
                        &:first-child {
                            td, th {
                                background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 2px, fade(@secondary-color, 10%) 2px,fade(@secondary-color, 10%) 100%);
                            }
                        }
                    }
                }
            }

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

            tr {
                + tr {
                    td, th {
                        background: linear-gradient(rgba(255, 255, 255, 0) 0px, rgba(255, 255, 255, 0) 2px, fade(@secondary-color, 10%) 2px, fade(@secondary-color, 10%) 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 {
                color: @secondary-color;
            }
        }
    }
}

.radio {
    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 {
    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 {
    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 {
        color: @text-color;
        font-family: @main-font-fontFamily;
    }
}

.select-container {
    ul {
        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 {
    .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;
        }
    }
}

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

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

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

.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 {

        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, 50%);
                }

                .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;
                }
            }
        }

        footer {
            background-color: fade(@main-color, 10%);

            &.background-transparent {
                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: @main-color;
    }
}

.canvas-styles {
    border-color: @secondary-color;

    &.mastered {
        border-color: @main-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;
                }
            }
        }
    }

    &.Tiles {
        &:hover, &:focus {
            box-shadow: 0px 0px 0px 3px @main-color;
        }
    }
}

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

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

.tree-of-content-panel {
    .tree-of-content-panel-tail {
        background-color: tint(@main-color,20%);

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

        .tree-of-content-panel-tail-icon {
            color: @content-body-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: shade(@content-body-color,10%);

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

            &:hover, &:focus {
                background-color: shade(@content-body-color,15%);
            }
        }
    }

    &.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: shade(@content-body-color,10%);

        .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 {
                            background-color: fade(@main-color,10%);

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

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

                                    &.question:before {
                                        background-color: @button-text-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*/

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

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

.social-networks-btn {
    color: fade(@main-color, 70%);

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

.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;
    }
}

.blockout {

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