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

@main-font-fontFamily: OpenSans;

@Heading1-color: @text-color;
@Heading1-fontFamily: @main-font-fontFamily;
@Heading1-fontStyle: normal;
@Heading1-fontWeight: 600;
@Heading1-size: 24px;
@Heading1-textDecoration: none;
@Heading1-textBackgroundColor: transparent;
@Heading1-lineHeight: 1.8;

@Heading2-color: @text-color;
@Heading2-fontFamily: @main-font-fontFamily;
@Heading2-fontStyle: normal;
@Heading2-fontWeight: 600;
@Heading2-size: 22px;
@Heading2-textDecoration: none;
@Heading2-textBackgroundColor: transparent;
@Heading2-lineHeight: 1.8;

@Heading3-color: @text-color;
@Heading3-fontFamily: @main-font-fontFamily;
@Heading3-fontStyle: normal;
@Heading3-fontWeight: 600;
@Heading3-size: 20px;
@Heading3-textDecoration: none;
@Heading3-textBackgroundColor: transparent;
@Heading3-lineHeight: 1.8;

@Highlighted-color: #fff;
@Highlighted-fontFamily: @main-font-fontFamily;
@Highlighted-fontStyle: normal;
@Highlighted-fontWeight: normal;
@Highlighted-size: 18px;
@Highlighted-textDecoration: none;
@Highlighted-lineHeight: 1.8;

@links-fontFamily: @main-font-fontFamily;
@links-fontStyle: normal;
@links-fontWeight: normal;
@links-size: 18px;
@links-textDecoration: underline;
@links-textBackgroundColor: transparent;
@links-lineHeight: 1.8;

@Normal-color: @text-color;
@Normal-fontFamily: @main-font-fontFamily;
@Normal-fontStyle: normal;
@Normal-fontWeight: normal;
@Normal-size: 18px;
@Normal-textDecoration: none;
@Normal-textBackgroundColor: transparent;
@Normal-lineHeight: 1.8;

@Quote-color: @text-color;
@Quote-fontFamily: @main-font-fontFamily;
@Quote-fontStyle: italic;
@Quote-fontWeight: normal;
@Quote-size: 18px;
@Quote-textDecoration: none;
@Quote-textBackgroundColor: transparent;
@Quote-lineHeight: 1.8;

@content-width: 960px;

/*#region COMMON*/
.tooltip-container {
    .title {        
        color: @text-color;
        background-color: @content-body-color;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);

        &::before {            
            border-color: transparent;
            border-top-color: @content-body-color;
        }
    }
}


.button {
    @font: @main-font-fontFamily;
    @background-color: @main-color;
    @text-color: @button-text-color;
    @border-color: @main-color;

    @hover-background-color: shade(@main-color,10%);
    @hover-text-color: @button-text-color;
    @hover-border-color: shade(@main-color,10%);
    
    @disabled-background-color: transparent;
    @disabled-text-color: @main-color;
    @disabled-border-color: shade(@main-color,10%);
    
    @default-background-color: transparent;
    @default-text-color: @main-color;
    @default-border-color: shade(@main-color,10%);

    
    font-family: @font;

    color: @text-color;
    background-color: @background-color;
    border-color: @border-color;

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

    &.default {
        color: @default-text-color;
        background-color: @default-background-color;
        border-color: @default-border-color;
    }

    &.disabled {        
        color: @disabled-text-color;
        background-color: @disabled-background-color;
        border-color: @disabled-border-color;
    }
}

.border-box() {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

/*#endregion COMMON*/

/*#region CONTENT*/

@wrapper-border-radius: 3px;

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

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

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

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

.wrapper() {
    text-align: center;
}

.default-table() {
    opacity: 0.9;
    font-size: @Normal-size;
}

.line-height() {
    line-height: @Normal-lineHeight;
}

.basic() {
    margin: 0 0 20px 0;
    .line-height;
}

.list() {
    padding-left: 40px;
}

.margin-bottom() {
    &:not(:last-child) {
        margin-bottom: 15px;
    }
}

.clear {
    &:after {
        content: "";
        display: block;
        clear: both;
    }
}

.cell() {
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10px,rgba(243,243,243,1) 10px,rgba(243,243,243,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,243,243,0)), color-stop(10px,rgba(243,243,243,0)), color-stop(10px,rgba(80,105,122,1)), color-stop(100%,rgba(80,105,122,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10px,rgba(243,243,243,1) 10px,rgba(243,243,243,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10px,rgba(243,243,243,1) 10px,rgba(243,243,243,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10px,rgba(243,243,243,1) 10px,rgba(243,243,243,1) 100%);
}

.styled-content {

    /*region MEDIA EDITOR VIDEO*/
    .video-editor {
        position: relative;
        width: 100%;
        height: 0;
        iframe {
            position: absolute;
            display: block;
            width: 100%!important;
            height: 100%!important;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            border: 0;
        }
    }
    /*endregion*/

    /*region MEDIA EDITOR AUDIO*/
    .audio-editor {
         > div {
             display: table;
             table-layout: fixed;
             width: 100%;
             max-width: 750px;
             border-top: solid 1px rgba(222,222,222,.4);
             border-bottom: solid 1px rgba(222,222,222,.4);
 
             .audio-image-container {
                 display: table-cell;
                 vertical-align: top;
                 width: 130px;
                 padding: 14px 0;
             }
 
             .audio-player-container {
                 display: table-cell;
                 vertical-align: middle;
                 padding: 14px 0;
             }
         }
 
         .audio-image {
             display: block;
             width: 113px;
             height: 113px;
             border-radius: 2px;
             background-position: center center;
             background-repeat: no-repeat;
             background-size: contain;
         }
 
         .audio-title {
             white-space: pre-wrap;
             margin-bottom: .8em;
         }
     }
    /*endregion*/

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

        .document-container {

            .document-info {
                display: flex;
                align-items: flex-start;
                margin: 4px 0 10px 0;
                justify-content: space-between;
            
                .document-title-wrapper {
                    display: flex;
                    align-items: flex-start;
                    min-width: 240px;
                    padding: 5px 0 10px;
                    flex: 0 20 750px;

                    .document-icon, .document-title {
                        display: flex;
                    }

                    .document-icon {
                        font-size: 36px;
                        color: fade(@text-color, 50%);
                        margin-right: 21px;
                        flex: 0 0 32px;

                        .icon-container {
                            position: relative;

                            .document-type-text {
                                position: absolute;
                                font-family: 'Arial';
                                font-size: 13px;
                                top: 8px;
                                left: 0;
                                white-space: nowrap;
                                width: 100%;
                                text-align: center;
                            }

                            &::after{
                                content: '';
                                display: block;
                                position: absolute;
                                top: 50%;
                                right: 0;
                                width: 1px;
                                height: 22px;
                                margin: -11px -10px 0 0;
                                background-color: rgba(66, 81, 95, 0.1);
                            }
                        }
                    }
                    
                    .document-title {
                        padding: 6px 20px 0 0;
                        font-size: 14px;
                        color: fade(@text-color, 80%);
                        word-wrap: break-word;
                        word-break: break-word; /*Fix for Safary*/
                        word-break: break-all; /*Fix  for IE11*/
                    }
                }

                .download-document-btn-container{
                    display: flex;

                    .download-document-btn {
                        padding: 10px 20px;
                        border-radius: 3px;
                        font-size: 14px;
                        white-space: nowrap;
                        text-decoration: none;
                        transition: background-color .3s;
                        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-editor-frame-wrapper {
                padding-top: 15px;
            }

            &.zip {
                .document-block-iframe-wrapper {
                    display: none;
                }
            }
            
            .document-block-iframe-wrapper {
                max-height: 550px;
                -webkit-overflow-scrolling: touch;
                overflow: auto;
            }

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

    /*#region CURATION*/
    .link-curation-block {
        min-height: 72px;
    }
    .content-inner-wrapper {
        padding: 14px 0;
        margin: 20px 0 0;
        border-top: 1px solid rgba(222,222,222,.4);
        border-bottom: 1px solid rgba(222,222,222,.4);
    
        .text-wrapper {
            display: table-cell;
            width: 600px;
            .text-block {
                float: left;
                width: 100%;
                height: 97px;
                div.link-title {
                    &.parsed {
                        text-decoration: none; 
                        height: 27px;
                        font-size: 1em;
                        overflow: hidden;
                        margin-bottom: 8px;
                        display: inline-block;
                        white-space: normal;
                        vertical-align: middle;
                        &:hover {
                            text-decoration: underline;
                            cursor: pointer; cursor: hand;
                        }
                    }
                    &.empty {
                        background-color: rgba(222,222,222,.4);
                        width: 40%;
                        height: 5px;
                        margin-top: 10px;
                        border-radius: 3px;
                    }
                    
                }
                div.link-content { 
                    overflow: hidden;
                    &.parsed {
                        height: 46px;
                        margin-bottom: 5px;
                        line-height: 23px;
                        overflow: hidden;
                        font-size: .8em;
                        color: #3a4046
                    }
                    &.empty {
                        margin-top: 20px;
                        width: 70%;
                        height: 25px;
                        &:before {
                            content: '';
                            width: 80%;
                            display: block;
                            height: 5px;
                            border-radius: 3px; 
                            background-color: rgba(222,222,222,.4);
                        }
                        &:after {
                            content: '';
                            margin-top: 10px;
                            display: block;
                            width: 60%;
                            height: 5px;
                            border-radius: 3px;
                            background-color: rgba(222,222,222,.4);
                        }
                    }
                }
                div.custom-description * {
                    margin-bottom: 5px !important;
                }
            }
            .static-link-present {
                width: 400px;
                white-space: nowrap; 
                overflow: hidden; 
                text-overflow: ellipsis;
                position: relative;
                color: #978b8b;
                bottom: -3px;
                .link-url {
                    text-decoration: none;
                    padding-left: 20px;
                    background: url(img/linkArrow.png?v=1596690357238) no-repeat scroll 0;
                    background-position-y: center;
                    font-size: 13px;
                    color: #978b8b;
                    &:hover { 
                        text-decoration: underline;
                    }
                }
            }
        }
        div.images {
            float: left;
            width: 205px;
            height: 123px;
            &.parsed {  
                margin-right: 15px;
                border-radius: 4px; 
                overflow: hidden;
                position: relative;
                background-color: rgba(222,222,222,.4);
            }
            &.deleted { 
                display: none;
            }
            .image-wrapper * {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                height: auto;
                max-width: 203px;
                max-height: 123px;
                border-radius: 3px;
            }
            
        }
    }
    /*#endregion CURATION*/

    .clear;

    &:not(:last-child) {
        margin-bottom: 60px;
    }

    p {
        .line-height;
        .margin-bottom;
    }

    ol, ul {
        .basic;
        .list;
        .margin-bottom;
        position: relative;
        padding-left: 32px;
        list-style-type: none;

        li {
            .margin-bottom;
            position: relative;

            p, div, h1, h2, h3 {
                display: inline;
            }
        }
    }

    ol {
        counter-reset: ol-counter;

        & > li:before {
            position: absolute;
            display: inline-block;
            content: counter(ol-counter)'.';
            counter-increment: ol-counter;
            width: 58px;
            margin-left: -58px;
            text-align: right;
            padding-right: 12px;
            box-sizing: border-box;
        }
    }

    ul {

        & > li:before {
            content: '';
            display: inline-block;
            position: absolute;
            top: 16px;
            margin-left: -22px;
            margin-top: -5px;
            width: 5px;
            height: 5px;
            border-radius: 50%;
        }
    }

    a {
        text-decoration: underline;
        cursor: pointer;
        .line-height;
    }

    mark {
        .line-height;
    }

    strong, em, span {
        .line-height;
    }


    u {
        text-decoration: none;
        .line-height;
    }

    cite {
        border-left-style: solid;
        border-left-width: 4px;
        display: block;
        padding-left: 18px;
        margin: 20px 0 20px 10px;
        max-width: 85%;
    }

    .hotspotOnImage {

        .image-wrapper {
            margin: 0;
        }
    }

    .image-wrapper {
        .wrapper;
        max-width: 100%;
        margin: 10px auto 0;
        max-width: 100%;
        clear: both;

        img {
            max-width: 100%;
            border-radius: @wrapper-border-radius;
        }

        &[style^="float: right"] {
            margin: 10px 0 0 20px;
        }

        &[style^="float:right"] {
            margin: 10px 0 0 20px;
        }

        &[style^="float: left"] {
            margin: 10px 20px 0 0;
        }

        &[style^="float:left"] {
            margin: 10px 20px 0 0;
        }
    }

    .image-wrapper ~ .image-wrapper {
        clear: none;
    }

    .cropped-image {
        border-radius: @wrapper-border-radius;
        z-index: 1;
    }

    iframe {
        max-width: 100%;
    }

    .table-wrapper {
        .wrapper;
        position: relative;
        display: inline-block;
        margin: 40px 0;
        width: 100%;
        overflow-x: auto;

        table {
            text-align: left;
            font-size: 16px;
            border: none;
            border-collapse: collapse;
            display: inline-table;

            caption {
                margin: 15px;
            }


            p {
                margin: 0;
                word-wrap: break-word;
            }

            thead {
                .default-table;

                tr {

                    &:last-child {

                        td, th {

                            &:first-child {
                                border-bottom-left-radius: 0;
                            }

                            &:last-child {
                                border-bottom-right-radius: 0;
                            }
                        }
                    }
                }

                & + tbody {

                    tr {

                        &:first-child {

                            td, th {
                                .cell();

                                &:first-child {
                                    border-top-left-radius: 0;
                                }

                                &:last-child {
                                    border-top-right-radius: 0;
                                }
                            }
                        }
                    }
                }

                & + caption + tbody {

                    tr {

                        &:first-child {

                            td, th {
                                .cell();

                                &:first-child {
                                    border-top-left-radius: 0;
                                }

                                &:last-child {
                                    border-top-right-radius: 0;
                                }
                            }
                        }
                    }
                }
            }

            tbody {
                .default-table;
            }

            td, th {
                padding: 25px 20px 20px 20px;
                .border-box;
                border: none;
                text-align: left;
                word-wrap: break-word;
                overflow: hidden;
            }

            tr + tr {

                td, th {
                    .cell();
                }
            }

            tr {

                &:first-child {

                    td {

                        &:first-child {
                            border-top-left-radius: @wrapper-border-radius;
                        }

                        &:last-child {
                            border-top-right-radius: @wrapper-border-radius;
                        }
                    }

                    th {

                        &:first-child {
                            border-top-left-radius: @wrapper-border-radius;
                        }

                        &:last-child {
                            border-top-right-radius: @wrapper-border-radius;
                        }
                    }
                }

                &:last-child {

                    td {

                        &:first-child {
                            border-bottom-left-radius: @wrapper-border-radius;
                        }

                        &:last-child {
                            border-bottom-right-radius: @wrapper-border-radius;
                        }
                    }

                    th {

                        &:first-child {
                            border-bottom-left-radius: @wrapper-border-radius;
                        }

                        &:last-child {
                            border-bottom-right-radius: @wrapper-border-radius;
                        }
                    }
                }
            }
        }
    }
}

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

    h1 {
        .h1-styled-text;
        margin: 0;
        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: @main-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;
        line-height: 1.8;

        &:hover {
            color: shade(@main-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;
        line-height: 1.8;

        &: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;
        line-height: 1.8;
        text-decoration: @Highlighted-textDecoration;
        background-color: @main-color;
    }

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

    .table-wrapper {
        color: @Normal-color;
        font-family: @Normal-fontFamily;
        font-style: @Normal-fontStyle;
        font-weight: @Normal-fontWeight;
        line-height: 1.8;
        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;
            line-height: 1.8;
            text-decoration: @Normal-textDecoration;
        }
    }

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

        ol {
            li {
                &:before{
                    background-color: transparent;
                    top: 0;
                }
            }
        }
    }
}
/*#endregion CONTENT*/

/*#region DRAG-AND-DROP*/

.drag-and-drop-text {
    @draggables-border-color: fade(@text-color, 10%);
    @draggables-font: @Normal-fontFamily;
    @draggables-text-color: fade(@text-color, 50%);    
    @draggables-active-border-color: fade(@main-color, 50%);

    @droptext-backround-color: mix(@content-body-color, @text-color, 95%);
    @droptext-font: @draggables-font;
    @droptext-border-color: mix(@content-body-color, @text-color, 80%);
    @droptext-color: @text-color;    
    @droptext-icon-color: fade(@text-color, 50%);

    @droptext-hover-background-color: mix(@content-body-color, @main-color, 80%);
    @droptext-hover-border-color: mix(@content-body-color, @main-color, 60%);
    @droptext-hover-icon-color: fade(@text-color, 80%);

    @droptext-drag-background-color: mix(@content-body-color, @main-color, 80%);
    @droptext-drag-border-color: mix(@content-body-color, @main-color, 60%);
    @droptext-drag-shadow-color: fade(#000, 20%);

    @dropspot-background-color: fade(#152e40, 60%);
    @dropspot-shadow-color: fade(#000, 25%);

    @dropspot-help-color: fade(#fff, 70%);

    
    .draggables {
        color: transparent;
        border-color: @draggables-border-color;

        
        &.hover {
            border-color: @draggables-active-border-color;
        }

        &.empty {            
            color: @draggables-text-color;
            font-family: @draggables-font;
        }

        &.active {
            color: transparent;
        }
    }

    
    .draggable {        
        border-bottom: 2px solid @droptext-border-color;
        background-color: @droptext-backround-color;
        
        &.ui-draggable-dragging {            
            border-color: @droptext-drag-border-color;
            background-color: @droptext-drag-background-color;                
            box-shadow: 0px 2px 5px @droptext-drag-shadow-color;

            .draggable-text-icon{                
                color: @droptext-hover-icon-color;
            }
        }
        
        &:hover {
            border-color: @droptext-hover-border-color;
            background-color: @droptext-hover-background-color;

            .draggable-text-icon {
                color: @droptext-hover-icon-color;
            }
        }

        .draggable-text-icon {
            color: @droptext-icon-color;
        }

        .draggable-text {
            font-family: @droptext-font;
            color: @droptext-color;
        }
    }

    .dropspot-wrapper {
        .dropspot {
            background-color: @dropspot-background-color;
            
            &::before {                
                color: @dropspot-help-color;
            }
        }
    }
}

/*#endregion DRAG-AND-DROP*/

/*#region ERRORS*/

.error-page-container {
    @error-code-text-color: fade(@main-color, 90%);
    @error-title-text-color: @incorrect-color;
    @error-message-text-color: @text-color;

    @error-noaccess-icon-color: @main-color;
    @error-noaccess-icon-background-color: fade(@main-color, 10%);
    @error-noacces-background-color: @content-body-color;

    
    .error-container {
        .error-content-container {
            .error-code-container {
                color: @error-code-text-color;
            }

            .error-title-container {
                color: @error-title-text-color; 
            }

            .error-message-container {
                color: @error-message-text-color;
            }

            
            &.noaccess-error {  
                box-shadow: 0 1px 3px 0 rgba(0,0,0,.3);
                background: @error-noacces-background-color;


                .noaccess-icon {
                    .icon.attention {
                        color: @error-noaccess-icon-color;
                        
                        &:after {
                            background-color: @error-noaccess-icon-background-color;
                        }
                    }
                }
            }
        }
    }
}

/*#endregion ERRORS*/

/*#region FILL-IN-THE-BLANKS*/
.fill-in-the-blank {
    @font: @Normal-fontFamily;
    @text-alt-color: fade(@text-color, 50%);
    @focus-color: @main-color;

    .highlight-border(@top,@right, @bottom,@left ) {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 5px;
        top: 50%;
        left: 0;
        margin-top: 10px;
        border-style: solid;
        border-width: @top @right @bottom @left;

        border-color: @text-alt-color;
        .border-box();
    }

    .template-content {
        font-family: @font;

		color: @text-color;
    }

    
    .input-wrapper {
        .highlight {
            &:before {                
                color: @text-alt-color;
            }

            
            &:after {                
                .highlight-border(0, 1px, 1px, 1px);
            }
        }

        input {            
            font-family: @font;

            background-color: transparent;
            color: @text-color;

            
            &:focus + .highlight {
                &:before {
                    color: @focus-color;            
                }

                &:after {
                    border-color: @focus-color;
                    box-shadow: 0 1px 1px @focus-color;
                }
            }
        }

        .no-touch &:hover {
            .highlight {
                &:before {
                    color: @focus-color;
                }

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

    .select-wrapper {
        .current {
            .default {      
                .normal-styled-text;          
                color: @text-alt-color;
            }
        }

        .highlight {
            &::before {                
                color: @text-alt-color;
            }

            &:after {
                .highlight-border(0, 0, 1px, 1px);
            }
        }

        .no-touch &:hover {
            .highlight {
                &:before {
                    color: @focus-color;                    
                }

                &:after {
                    border-color: @focus-color;
                    box-shadow: 0 1px 1px 0 fade(@focus-color, 25%);
                }
            }
        }

        &.active, .no-touch &.active:hover {
            .highlight {
                &:before {
                    color: @focus-color;
                }

                &:after {
                    border-color: @focus-color;
                    box-shadow: none;
                }
            }
        }
    }
}

.select-container {
    @font: @Normal-fontFamily;

    @color: @button-text-color;
    @background-color: @main-color;
    @background-alt-color: shade(@main-color, 10%);
    @background-separator-color: fade(@color, 10%);

    
    ul {        
        border: 1px solid @background-color;

        li {            
            font-family: @font;
            
            color: @color;
            background-color: @background-color;

            
            &:after {                
                border-bottom: 1px solid @background-separator-color;
            }

            &:last-child {
                &:after {
                    border-bottom-color: transparent;
                }
            }

            .no-touch &:hover {
                background-color: @background-alt-color;
            }
        }
    }
}

/*#endregion FILL-IN-THE-BLANKS*/

/*#region HINT*/

.question {
    .question-hint-container {
        .hint-button-container {
            .hint-button {                
                border-top: 1px dashed fade(@text-color, 10%);
                border-bottom: 1px dashed fade(@text-color, 10%);
                
                color: @main-color;

                
                .no-touch &:hover {                    
                    border-color: fade(@main-color, 70%);
                    color: @main-color;

                    .hint-button-expand-icon{                        
                        color: @main-color;
                    }
                }

                .hint-button-expand-icon{                    
                    color: fade(@text-color, 10%);
                }
            }

            .hint-button.hint-displayed {
                &::after{
                    border-left: 21px solid transparent;
                    border-right: 21px solid transparent;
                    border-top: 10px solid @content-body-color;
                }
            }
        }

        .question-hint {
            background-color: fade(@text-color, 10%);
            
            
            .hint-footer {
                .hint-hide-button {
                    .arrow-wrapper {
                        .arrow {
                            color: @button-text-color;
                        }
                    }
                }
            }
        }
    }
}

/*#endregion HINT*/

/*#region IMAGE-PREVIEW*/

.image-preview-container {
    .overlay-container {
        @image-overlay-color: @content-body-color;
        @image-close-icon-color: @text-color;

        .overlay {
            background-color: @image-overlay-color;
        }

        
        .center-containter {
            .center {
                .center-content {
                    .image-container {
                        .overlay-close-button {                            
                            color: @image-close-icon-color;
                        }
                    }
                }
            }
        }
    }
}

/*#endregion IMAGE-PREVIEW*/

/*#region INTRODUCTION*/


.main-header {
    background-color: @content-body-color;
    border-bottom: 1px solid fade(@text-color, 10%);
}


.introduction-container {
    .introduction-wrapper {
        border-bottom: 1px solid fade(@text-color, 10%);

        .intro-gone & {
            background-color: #fff;
            border-bottom: none;
        }

        @hint-color: fade(@text-color, 70%);

        .content-container {
            @shadow-block-height: 20px;
            
            .limitation-border() {
                content: '';
                position: absolute;
                display: inline-block;
                height: @shadow-block-height;
                left: 20px;
                right: 20px;
                opacity: 1;
                z-index: 1;

                background-color: fade(@text-color, 10%);
                transition: opacity 0.2s linear;
            }

            
            &:before {                
                .limitation-border;
                box-shadow: 0 7px 15px -9px @text-color;
            }

            &:after {
                .limitation-border;
                box-shadow: 0 -9px 15px -9px @text-color;
            }

            .content-wrapper {
                .header-title-container {                    
                    font-family: @main-font-fontFamily;  

                    .header-title-wrapper {                        
                        color: @text-color;

                        .header-assessment-label {                            
                            color: fade(@text-color, 70%);
                        }
                        
                        .header-assessment-title {                            
                            color: @text-color;
                        }
                        
                        .header-questions-label {                            
                            color: fade(@text-color, 70%);
                        }
                    }                  
                }
            }
        }

        .controls {
            .scroll-hint-container {                
                color: @hint-color;

                .icon-wrapper {
                    .icon {
                        border: 1px solid @hint-color;
                        border-color: fade(@text-color, 50%);
                        color: fade(@text-color, 50%);
                    }
                }
            }
        }
    }
}

.touch {
    .main-header {        
        box-shadow: 0 0 30px -10px #323232;
    }
}

/*#endregion INTRODUCTION*/

/*#region LOGIN*/

.login {
    @login-overlay-background-color: fade(@content-body-color, 80%);

    .main-background {        
        color: @text-color;
    }

    .login-container {
        @login-container-background-color: shade(@content-body-color, 10%);
        @login-container-shadow-color: fade(#000, 20%);
        
        @login-question-counter-text-color: fade(@text-color, 70%); 

        @login-tooltip-background-color: fade(@secondary-color, 20%);
        @login-tooltip-text-color: fade(@text-color, 70%);
            
        @login-skip-button-background-color: @content-body-color;
        @login-skip-button-hover-background-color: shade(@content-body-color, 5%);
        @login-skip-button-border-color: fade(#000, 15%);
        @login-skip-button-shadow-color: fade(#000, 20%);
        @login-skip-button-icon-color: fade(@text-color, 50%);

        @login-skip-text-color: fade(@text-color, 50%);
        @login-skip-link-color: fade(@text-color, 70%);
        @login-skip-link-hover-color: @text-color;

        
        background-color: @login-container-background-color;
        box-shadow: 1px 0px 3px 0px @login-container-shadow-color;

        .login-wrapper {
            .login-header-container {
                .questions-count {                    
                    color: @login-question-counter-text-color;
                }
                
                .course-title {                    
                    color: @text-color;
                }

                .login-tooltip-container {                    
                    background-color: @login-tooltip-background-color;
                    color: @login-tooltip-text-color;

                    .login-tooltip-container-arrow {
                        &:before {                            
                            background-color: @login-tooltip-background-color;  
                        }
                    }
                }
            }

            .login-content {                
                @login-input-icon-color: fade(@text-color, 30%);
                @login-input-text-color: @text-color;
                @login-input-hint-text-color: fade(@text-color, 50%);
                @login-input-underline-color: fade(@text-color, 30%);
                @login-input-placeholder-color: fade(@text-color, 50%);
                @login-input-background-color: transparent;

                @login-input-hover-icon-color: @main-color;
                @login-input-hover-underline-color: @main-color;
                @login-input-hover-shadow-color: @main-color;

                @login-input-error-icon-color: @incorrect-color;
                @login-input-error-underline-color: @incorrect-color;
                @login-input-error-shadow-color: @incorrect-color;

                @login-error-text-color: @incorrect-color;
                @login-description-text-color: fade(@text-color, 70%);

                .login-form-container {
                    .login-input-container {
                        .login-input-container-icon {                            
                            color: @login-input-icon-color;
                        }
                        
                        .login-input-container-hint {
                            color: @login-input-hint-text-color;
                        }

                        .login-input {
                            border-bottom: 2px dashed @login-input-underline-color;

                            background-color: @login-input-background-color;
                            color: @text-color;

                            &::-webkit-input-placeholder {
                                color: @login-input-placeholder-color;
                            }

                            &::-moz-placeholder {
                                color: @login-input-placeholder-color;
                            }

                            &:-ms-input-placeholder {
                                color: @login-input-placeholder-color;
                            }

                            &:active, &:focus, &:hover,
                            &.error:active, &.error:focus,
                            &.error:hover {
                                border-bottom-style: solid;
                                border-bottom-color: @login-input-hover-underline-color !important;
                                box-shadow: 0px 1px 1px -2px @login-input-hover-shadow-color !important;

                                & ~ .login-input-container-icon{
                                    color: @login-input-hover-icon-color;
                                }
                            }
                            
                            &.error {
                                border-bottom-style: solid;
                                border-bottom-color: @login-input-error-underline-color;
                                box-shadow: 0px 1px 1px -2px @login-input-error-shadow-color;
                                
                                & ~ .login-input-container-icon{
                                    color: @login-input-error-icon-color;
                                }
                            }
                        }
                        
                        .login-error-text {                            
                            color: @login-error-text-color;
                        }
                    }
                }

                .login-form-submit-container {
                    .login-description {                        
                        color: @login-description-text-color;
                    }
                }
            }
        }
        
        .login-skip-button {
            background-color: @login-skip-button-background-color;            
            border: 1px solid @login-skip-button-border-color;            
            box-shadow: inset 1px 0px 3px -1px @login-skip-button-shadow-color;

            &:hover {
                background-color: @login-skip-button-hover-background-color;
                box-shadow: none;
            }

            .login-skip-button-icon{                
                color: @login-skip-button-icon-color;
            }
        }
        
        .login-skip-text-wrapper {            
            color: @login-skip-text-color;
        }

        .login-skip-link {
            color: @login-skip-link-color;

            &:hover {
                color: @login-skip-link-hover-color;
            }
        }
    }
}

/*#endregion LOGIN*/

/*#region MAIN*/

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

.tl-wrapper {
    font: 16px @main-font-fontFamily;
    color: #fff;
}


#main-app {    
    background-color: @content-body-color;
}

/*#endregion MAIN*/

/*#region OPENQUESTION*/

.open-question {    
    @open-question-line-height: 34px;
    @open-question-text-color: @text-color;
    @open-question-line-color: fade(@text-color, 10%);
    @open-question-icon-color: fade(@text-color, 50%);
    @open-question-placeholder-color: fade(@text-color, 70%);

    @open-question-hover-line-color: fade(@main-color, 80%);
    @open-question-hover-icon-color: fade(@main-color, 80%);
    @open-question-hover-placeholder-color: fade(@text-color, 70%);

    @open-question-focus-line-color: @main-color;
    @open-question-focus-icon-color: @main-color;
    @open-question-focus-placeholder-color: fade(@text-color, 70%);
    
    .open-question-icon{ 
        color: @open-question-icon-color;        
    }
    
    .edit-field {
        .normal-styled-text;
        line-height: @open-question-line-height;
        color: @open-question-text-color;
        
        background-color: transparent;
        background-image: -webkit-linear-gradient(transparent, transparent (@open-question-line-height - 1), @open-question-line-color 0px);
        background-image: -o-linear-gradient(transparent, transparent (@open-question-line-height - 1), @open-question-line-color 0px);
        background-image: linear-gradient(transparent, transparent (@open-question-line-height - 1), @open-question-line-color 0px);
        background-size: 100% @open-question-line-height;

        &::-moz-placeholder {
            color: @open-question-placeholder-color;
            opacity: 1;
        }

        &::-webkit-input-placeholder {
            color: @open-question-placeholder-color;
            opacity: 1;
        }

        &:-ms-input-placeholder {
            color: @open-question-placeholder-color;
            opacity: 1;
        }
        
        &:hover { 
            background-image: -webkit-linear-gradient(transparent, transparent (@open-question-line-height - 1), @open-question-hover-line-color 0px);
            background-image: -o-linear-gradient(transparent, transparent (@open-question-line-height - 1), @open-question-hover-line-color 0px);
            background-image: linear-gradient(transparent, transparent (@open-question-line-height - 1), @open-question-hover-line-color 0px);
        
            &::-moz-placeholder {
                color: @open-question-hover-placeholder-color;
                opacity: 1;
            }

            &::-webkit-input-placeholder {
                color: @open-question-hover-placeholder-color;
                opacity: 1;
            }

            & ~ .open-question-icon{
                color: @open-question-hover-icon-color;
            }
        }

        &:focus {                    
            background-image: -webkit-linear-gradient(transparent, transparent (@open-question-line-height - 2), @open-question-focus-line-color 0px);
            background-image: -o-linear-gradient(transparent, transparent (@open-question-line-height - 2), @open-question-focus-line-color 0px);
            background-image: linear-gradient(transparent, transparent (@open-question-line-height - 2), @open-question-focus-line-color 0px);
        
            &::-moz-placeholder {
                color: @open-question-focus-placeholder-color;
                opacity: 1;
            }

            &::-webkit-input-placeholder {
                color: @open-question-focus-placeholder-color;
                opacity: 1;
            }

            & ~ .open-question-icon{
                color: @open-question-focus-icon-color;
            }
        }
    }
}

/*#endregion OPENQUESTION*/

/*#region PRELOADER*/

.loader-container {
    .color-ball {
        &.red {            
            background-color: #e05f5f;
        }

        &.green {
            background-color: #43aaa3;
        }

        &.blue {
            background-color: #49b8e7;
        }

        &.yellow {
            background-color: #f1d45f;
        }
    }
}

/*#endregion PRELOADER*/

/*#region QUESTIONS*/

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

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

    .question-title {
        .h2-styled-text;    
        color: @question-title-text-color;
        
        .index {            
            border-right: 1px solid @question-number-border-color;         

            color: @main-color;
        }
    }
}

/*#endregion QUESTIONS*/

/*#region RANKING-TEXT*/

.question {
    .ranking-text {
        @answer-background-color: mix(@content-body-color, @text-color, 95%);
        @answer-border-color: mix(@content-body-color, @text-color, 80%);
        @answer-icon-color: fade(@text-color, 70%);

        @answer-hover-background-color: mix(@content-body-color, @main-color, 80%);
        @answer-hover-border-color: mix(@content-body-color, @main-color, 60%);
        @answer-hover-icon-color: fade(@text-color, 90%);

        @answer-drag-background-color: mix(@content-body-color, @main-color, 70%);
        @answer-drag-border-color: mix(@content-body-color, @main-color, 50%);
        @answer-drag-icon-color: fade(@text-color, 90%);
        @answer-drag-shadow-color: fade(#000, 20%);

        @answer-number-color: fade(@text-color, 50%);
        @answer-number-fontFamily: @main-font-fontFamily;
        @answer-number-fontSize: 16px;
        @answer-number-fontStyle: italic;

        .answer-wrapper {
            &::before {                
                color: @answer-number-color;
                font-family: @answer-number-fontFamily;
                font-size: @answer-number-fontSize;
                font-style: @answer-number-fontStyle;
            }
            
            &.gu-mirror { 
                .answer {
                    background-color: @answer-drag-background-color;  
                    border-bottom: 2px solid @answer-drag-border-color;                  
                    box-shadow: 0px 2px 5px @answer-drag-shadow-color;

                    .icon.move{
                        color: @answer-drag-icon-color;
                    }
                }
            }

            .answer {                
                border-bottom: 2px solid @answer-border-color;
                background-color: @answer-background-color;

                .icon.move {
                    color: @answer-icon-color;
                }

                .text {
                    .normal-styled-text;
                }

                &:hover {
                    border-bottom: 2px solid @answer-hover-border-color;
                    background-color: @answer-hover-background-color;
                    
                    .icon.move{
                        color: @answer-hover-icon-color;
                    }
                }
            }
        }
    }
}

/*#endregion RANKING-TEXT*/

/*#region SINGLE-MULTIPLE-SELECT-TEXT*/

.question {
    .single-select-text, .multiple-select-text {        
        @answer-background-color: fade(@text-color, 5%);
        @answer-hover-background-color: fade(@main-color, 10%);
        @answer-hover-border-color: fade(@main-color, 50%);
        @answer-checked-background-color: fade(@main-color, 20%);

        @answer-checked-icon-background-color: @main-color;
        @answer-checked-icon-border-color: @main-color;
        @answer-checked-icon-color: @button-text-color;

        .answer {            
            background-color: @answer-background-color;

            .checkbox, .radio {  
                .normal-styled-text;   

                &::before {            
                    color: transparent;
                    background-color: @content-body-color;
                    box-shadow: 0 0 1px 1px fade(black, 10%) inset;
                }
            }

            .checkbox {                
                &.icon.check-mark{        
                    font-family: @Normal-fontFamily !important;
                    &:not(.checked)::before{
                        content: '';
                    }
                }
            }
            
            .radio {
                &::after {
                    background: transparent;
                }
            }

            &:hover {
                background: none repeat scroll 0 0 @answer-hover-background-color;

                .checkbox, .radio {
                    &::before {
                        box-shadow: 0 0 1px 1px @answer-hover-border-color inset;
                    }
                }
            }

            &.checked {
                background-color: @answer-checked-background-color;

                .checkbox {
                    &.icon.check-mark {
                        &::before {
                            font-family: 'Custom Icons';
                            box-shadow: none;
                            background-color: @answer-checked-icon-background-color;
                            color: @answer-checked-icon-color;
                        }
                    }
                }

                .radio{
                    &::before{
                        box-shadow: 0 0 1px 1px @answer-checked-icon-border-color inset;
                    }

                    &::after{
                        background-color: @answer-checked-icon-background-color;
                    }
                }
            }
        }
    }
}

/*#endregion SINGLE-MULTIPLE-SELECT-TEXT*/

/*#region SINGLE-SELECT-IMAGE*/

.single-select-image-list {
    @thumbnail-border-color: fade(@text-color, 10%);

    @thumbnail-round-background-color: fade(@main-color, 80%);
    @thumbnail-round-icon-color: fade(@button-text-color, 80%);

    @thumbnail-icon-border-color: fade(@text-color, 50%);
    @thumbnail-icon-background-color: @content-body-color;
    @thumbnail-icon-color: fade(@text-color, 50%);

    @thumbnail-hover-border-color: @main-color;
    @thumbnail-hover-shadow-color: fade(@main-color, 70%);

    @thumbnail-hover-icon-border-color: @main-color;
    @thumbnail-hover-icon-color: @main-color;

    @thumbnail-checked-border-color: @thumbnail-hover-border-color;

    .single-select-image-list-item {
        .thumbnail-container {
            &:hover .thumbnail-wrapper {
                border-color: @thumbnail-hover-border-color;
                box-shadow: 0px 0px 15px 0px @thumbnail-hover-shadow-color;
            }
            
            .thumbnail-wrapper {                
                border: 2px solid @thumbnail-border-color;

                .thumbnail-selected {
                    background-color: @thumbnail-round-background-color;
                    color: @thumbnail-round-icon-color;
                }
            }

            &.checked{
                .thumbnail-wrapper {
                    border-color: @thumbnail-checked-border-color;
                }
            }

            .preview-button-container {
                .preview-button {
                    .preview-button-icon {
                        background: @thumbnail-icon-background-color;
                        border: 3px solid @thumbnail-icon-background-color;
                        box-shadow: inset 0px 0px 0px 1px @thumbnail-icon-border-color;
                        color: @thumbnail-icon-color;
                    }
                }

                &:hover {
                    .preview-button {
                        .preview-button-icon {
                            color: @thumbnail-hover-icon-color;
                            box-shadow: inset 0px 0px 0px 1px @thumbnail-hover-icon-border-color;
                        }
                    }
                }
            }
        }
    }
}

/*#endregion SINGLE-SELECT-IMAGE*/

/*#region STATEMENT*/

.question {
    .statements {
        @statement-background-color: transparent;
        @statement-text-color: @text-color;

        @statement-selected-background-color: fade(@main-color, 10%);

        @statement-line-color: fade(@text-color, 10%);

        @statement-button-background-color: fade(@text-color, 10%);
        @statement-button-text-color: fade(@text-color, 90%);
        @statement-button-separator-color: fade(@text-color, 70%);

        @statement-button-hover-background-color: fade(@text-color, 30%);
        @statement-button-hover-text-color: @text-color;

        @statement-button-selected-background-color: @main-color;
        @statement-button-selected-text-color: @button-text-color;

        .statements-list {
            .answer-container { 
                &:not(:last-child) {                    
                    &::before {                        
                        background: @statement-line-color;
                    }
                }
            }
        }

        .statement-item {
            background: @statement-background-color;

            &.true, &.false {
                background: @statement-selected-background-color;
            }

            .title {
                .h3-styled-text;
                color: @statement-text-color;
            }

            .statement-buttons-container {
                .statement-separator {
                    color: @statement-button-separator-color;
                }
                
                .statement-button {                    
                    color: @statement-button-text-color;
                    background-color: @statement-button-background-color;
                    
                    &:hover {
                        background-color: @statement-button-hover-background-color;
                        color: @statement-button-hover-text-color;
                    }

                    &.selected{
                        background-color: @statement-button-selected-background-color;
                        color: @statement-button-selected-text-color;
                    }
                }
            }
        }
    }
}

/*#endregion STATEMENT*/

/*#region SUMMARY*/

.summary {
    @summary-survey-question-color: #49b8e7;

    @summary-mastery-score-text-color: fade(@text-color, 80%);
    @summary-mastery-score-background: shade(@content-body-color, 5%);
    @summary-mastery-score-border-color: fade(@text-color, 50%);

    @summary-progress-circle-secondary-color: fade(@text-color, 10%);
    @summary-progress-circle-correct-color: @correct-color;
    @summary-progress-circle-incorrect-color: @incorrect-color;

    @summary-progress-info-score-text-color: fade(@text-color, 80%);
    @summary-progress-info-text-success-color: fade(@correct-color, 80%);
    @summary-progress-info-text-fail-color: fade(@incorrect-color, 80%);

    
    .summary-header {
        .header-content-wrapper {
            .messages-wrapper {
                .call-to-action,
                .course-status {
                    font-family: @main-font-fontFamily;
                }

                .call-to-action {
                    color: @text-color;
                }

                .course-status {
                    color: @incorrect-color;

                    &.passed {
                        color: @correct-color;
                    }
                }
            }
        }
    }

    .summary-content-wrapper {
        .summary-questions {
            @questions-background-color: @content-body-color;
            @questions-title-text-color: @text-color;

            @question-border-bottom-color: fade(@text-color, 10%);
            @question-text-color: @text-color;

            @question-correct-border-left-color: fade(@correct-color, 50%);
            @question-correct-number-color: @correct-color;
            @question-correct-icon-color: @correct-color;

            @question-survey-border-left-color: fade(@secondary-color, 50%);
            @question-survey-number-color: @secondary-color;
            @question-survey-icon-color: @secondary-color;

            @question-incorrect-number-color: @incorrect-color;
            @question-incorrect-icon-color: @incorrect-color;

            background: @questions-background-color;
            
            .summary-questions-container {
                .summary-question-header-wrapper {
                    .questions-numbers,
                    .questions-expand-button {
                        font-family: @main-font-fontFamily;
                        color: fade(@questions-title-text-color, 80%);
                    }

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

                    &.passed {
                        &:before {
                            background-color: @correct-color;
                        }
                    }
                }

                .question-expandable-container {
                    .container-arrow-wrapper {
                        .arrow-wrapper {
                            border-color: transparent;
                            border-bottom-color: fade(@text-color, 2%);
                        }
                    }

                    .questions {
                        background-color: fade(@text-color, 2%);

                        .question-item {
                            border-bottom-color: @question-border-bottom-color;

                            .question-number-cell {
                                .question-number-container {
                                    .question-number {
                                        color: @question-incorrect-number-color;
                                    }

                                    .question-icon {
                                        color: @question-incorrect-icon-color;
                                    }
                                }
                            }

                            &.correct {
                                .question-number-cell {
                                    .question-number-container {
                                        .question-number {
                                            color: @question-correct-number-color;
                                        }

                                        .question-icon {
                                            color: @question-correct-icon-color;
                                        }
                                    }
                                }
                            }                    

                            &.survey {
                                .question-number-cell {
                                    .question-number-container {
                                        .question-number {
                                            color: @question-survey-number-color;
                                        }

                                        .question-icon {                                    
                                            color: @question-survey-icon-color;
                                        }
                                    }
                                }
                            }
                        }
                    }
                        
                    .summary-question-footer {
                        .summary-question-hide-button {
                            border-color: transparent;
                            background-color: fade(@text-color, 40%);

                            .arrow-wrapper {
                                .arrow {
                                    color: @button-text-color;
                                }
                            }

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


        
    .summary-header-progress-wrapper,
    .summary-scrolled-progress-wrapper {
        background-color: @content-body-color;
        box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.05);

        .score-lable {
            font-family: @main-font-fontFamily;
            color: @text-color;
        }

        .progress-control-container {
            .progress-control {
                .progress-control-wrapper {
                    .progress-control-circle {    
                        //background color of circle
                        color: @summary-progress-circle-secondary-color;
                    }

                    .progress-control-mastery-score {                
                        color: fade(@text-color, 90%);

                        &:before {
                            background-color: @content-body-color;
                        }
                    }
                        
                    &.success { 
                        .progress-control-circle {                              
                            //progress color of circle                          
                            border-color: @summary-progress-circle-correct-color;
                        }

                        .progress-control-mastery-score {
                            border-color: @correct-color;

                            &:hover {
                                .score-wrapper {
                                    background-color: fade(@correct-color, 10%);
                                }
                            }
                        }
                            
                        .progress-control-info {
                            .progress-control-info-score {
                                color: @correct-color;
                            }
                        }
                    }
                        
                    &.fail { 
                        .progress-control-circle {                        
                            //progress color of circle
                            border-color: @summary-progress-circle-incorrect-color;
                        }

                        .progress-control-mastery-score {            
                            border-color: fade(@text-color, 10%);

                            &:hover {
                                .score-wrapper {
                                    background-color: fade(@text-color, 10%);
                                }
                            }
                        }
                            
                        .progress-control-info {
                            .progress-control-info-score {
                                color: @incorrect-color;
                            }
                        }
                    }
                }
            }
        }

        .summary-buttons {
            .summary-button-container {
                .summary-retry-notification-container {
                    @summary-attempt-notification-background-color: fade(@incorrect-color, 30%);
                    @summary-attempt-notification-text-color: @text-color;

                    color: @summary-attempt-notification-text-color;
                    background-color: @summary-attempt-notification-background-color;

                    .summary-retry-notification-icon {
                        &:after {
                            background-color: @summary-attempt-notification-background-color;
                        }
                    }
                }
            }
        }
    }

    .scroll-to-top-button {
        background-color: fade(@text-color, 40%);
        color: @button-text-color;

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

.blockout {
    background: #323a45;
}

.request-loader-container {
    .request-loader-message-wrapper {
        background-color: #FFF;
        border: 4px solid #E6E6E6;
        
        .request-loader-text {
            color: #424e5e;
        }
    }
}

/*#endregion SUMMARY*/

/*#region TEXT-MATCHING*/
.text-matching {
    @text-matching-source-font: @Normal-fontFamily;
    @text-matching-source-background-color: fade(@text-color, 5%);
    @text-matching-source-border-color: fade(@text-color, 20%);
    @text-matching-source-color: @text-color;

    @text-matching-target-font: @text-matching-source-font;
    @text-matching-target-shadow-color: rgba(0, 0, 0, .2);
    @text-matching-target-color: @text-matching-source-color;
    @text-matching-target-border-color: mix(@content-body-color, @main-color, 60%);
    @text-matching-target-background-color: mix(@content-body-color, @main-color, 80%);
    @text-matching-target-icon-color: fade(@text-color, 50%);

    @text-matching-hover-target-border-color: mix(@content-body-color, @main-color, 50%);
    @text-matching-hover-target-background-color: mix(@content-body-color, @main-color, 70%);
    @text-matching-hover-target-icon-color: fade(@text-color, 80%);

    @text-matching-help-font: @text-matching-source-font;
    @text-matching-help-background-color: fade(@secondary-color, 10%);
    @text-matching-help-border-color: fade(@secondary-color, 70%);
    @text-matching-help-color: mix(@content-body-color, @secondary-color, 30%);

    .text-matching-source-wrapper-inner {
        background-color: @text-matching-source-background-color;
        border-color: @text-matching-source-border-color;
        
        &::before {
            background: @content-body-color;
            border: 2px solid @text-matching-source-border-color;
        }
    }

    .text-matching-target-wrapper-inner {
        background-color: @text-matching-target-background-color;
        border-color: @text-matching-target-border-color;

        &.ui-draggable-dragging {
            background-color: @text-matching-hover-target-background-color;
            border-color: @text-matching-hover-target-border-color;
            box-shadow: 0 25px 25px -20px @text-matching-target-shadow-color;

            .text-matching-target-text-icon {
                color: @text-matching-hover-target-icon-color;
            }

            &::before {                
                background: @text-matching-hover-target-background-color;
                border-color: @text-matching-hover-target-border-color;
            }
        }

        &::before {
            border: 2px solid @text-matching-target-border-color;
            background: @text-matching-target-background-color;
        }
        
        .text-matching-target-text-icon {
            color: @text-matching-target-icon-color;
        }
    }

    .text-matching-target-text {
        color: @text-matching-target-color;
        font: @text-matching-target-font;
        font-size: @Normal-size;
        font-weight: @Normal-fontWeight;
        font-style: @Normal-fontStyle;
        text-decoration: @Normal-textDecoration;
    }

    .text-matching-source-text {
        .normal-styled-text;
    }

    .placeholder {        
        .placeholder-help-wrapper-inner {
            border-color: @text-matching-help-border-color;
        }

        .placeholder-help-text {
            color: @text-matching-help-color;
            font: @text-matching-help-font;
            font-size: @Normal-size;
            font-weight: @Normal-fontWeight;
            font-style: @Normal-fontStyle;
            text-decoration: @Normal-textDecoration;
        }

        &.active {
            &.hover {
                &:before {             
                    background: @text-matching-help-background-color;
                }

                .placeholder-help-wrapper-inner {
                    border-color: @secondary-color;
                    background-color: @text-matching-help-background-color;

                    .placeholder-help-text{
                        color: @secondary-color;
                    }
                }
            }
        }
    }
}

/*#endregion TEXT-MATCHING*/

/*#region TIMER*/

.timer {    
    font-family: @main-font-fontFamily;
    color: @text-color;
    
    .time-part { 
        background: -moz-linear-gradient(top, @main-color 50%, shade(@main-color, 10%) 50%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,@main-color), color-stop(50%,shade(@main-color, 10%)));
        background: -webkit-linear-gradient(top, @main-color 50%, shade(@main-color, 10%) 50%);
        background: -ms-linear-gradient(top, @main-color 50%, shade(@main-color, 10%) 50%);
        background: linear-gradient(to bottom, @main-color 50%, shade(@main-color, 10%) 50%);
        color: fade(@button-text-color, 80%);
    }
}

/*#endregion TIMER*/

/*#region TOOLTIP*/

.question-tooltip {
    @tooltip-icon-background: mix(@content-body-color, @secondary-color, 90%);
    @tooltip-icon-color: fade(@secondary-color, 70%);

    @tooltip-title-background: mix(@content-body-color, @secondary-color, 90%);
    @tooltip-title-color: fade(@secondary-color, 70%);

    .question-tooltip-icon {
        background: @tooltip-icon-background;

        &::after {
            color: @tooltip-icon-color;
        }
    }
    
    .question-tooltip-title {        
        -webkit-box-shadow: 0 1px 4px 0 rgba(50, 50, 50, 0.1);
        -moz-box-shadow: 0 1px 4px 0 rgba(50, 50, 50, 0.1);
        box-shadow: 0 1px 4px 0 rgba(50, 50, 50, 0.1);
        background: @tooltip-title-background;
        color: @tooltip-title-color;
        
        &:before {
            border-right: 8px solid rgba(50, 50, 50, 0.1);
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
        
        &:after {
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-right: 8px solid @tooltip-title-background;
        }
    }
}

/*#endregion TOOLTIP*/

/*#region EXPANDABLE BLOCK*/

.expandable-block-wrapper {
    .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 {
    background-color: fade(@content-body-color, 98%);
}

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

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

        .material-icons {
            color: @incorrect-color;
        }
    }
}
/*#endregion*/