// --------------------------------------------------------------------
// TABLE OF CONTENTS
// --------------------------------------------------------------------
// [!!] - THEME
//      [!!01] THEME - COLORS
//      [!!02] THEME - LAYOUT
//      [!!03] THEME - TYPOGRAPHY
//      [!!04] THEME - DARK BLUE BG
// [**] - A11Y
// [&&] - SPECIFIC
//      [&&01] SPECIFIC - LOADING FR
//      [&&02] SPECIFIC - TEXT COMPONENT - ICONBOX
//      [&&03] SPECIFIC - ASSESSMENT COMPONENT
//      [&&04] SPECIFIC - MEDIA COMPONENT
//      [&&05] SPECIFIC - QUESTION COMPONENT
//      [&&06] SPECIFIC - STACKLIST COMPONENT
//      [&&07] SPECIFIC - NARRATIVE COMPONENT
//      [&&08] SPECIFIC - NARRATIVE + STACKLIST COMPONENT
//      [&&09] SPECIFIC - HOT GRAPHIC COMPONENT
//      [&&10] SPECIFIC - HOT GRID COMPONENT
//      [&&11] SPECIFIC - HOT GRAPHIC + HOT GRID COMPONENT
//      [&&12] SPECIFIC - IMAGE SLIDER COMPONENT
//      [&&13] SPECIFIC - EXPOSE COMPONENT
//      [&&14] SPECIFIC - MATCHING COMPONENT
//      [&&15] SPECIFIC - OPEN TEXT COMPONENT
//      [&&16] SPECIFIC - LEARNERS PICK
// [^^] - UTILITY
// [//] - CUSTOM


// ====================================================================
//
// [!!01] THEME - COLORS
//
// ====================================================================

// boxmenu
.boxmenu-menu {
    .menu-header {
        background-color:@esdc-dark-blue;
    }
    .menu-header, .page .page-header{
        background-color: @esdc-dark-blue;
    }
    .menu-item-inner{
        background-color: @esdc-lightgrey;
        color: @esdc-dark-blue;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.26);
    }
    .pagelevelprogress-indicator-inner {
        background-color:@esdc-white;
        border-color:@esdc-interactive-blue;
    }
    .pagelevelprogress-indicator {
        background-color:@esdc-interactive-blue;
   }
   .pagelevelprogress-indicator-bar{
        background-color:@esdc-interactive-blue;
    }
}
.menu-item-body-inner p{
    color: @esdc-dark-blue;
    font-weight: 100;
}
.menu-item-button button {
    background-color: @esdc-interactive-blue !important;
    color: @esdc-white;
    font-weight: 400;
    max-width: 20em;;
    &:hover{
        background-color: @esdc-int-hover-color !important;
    }
    
    &.visited
    {
        background-color:@esdc-disabled !important;
        color: @esdc-disabled-text !important;
        &:hover
        {
            background-color:darken(@esdc-disabled, 30%) !important;
            color: @esdc-disabled-text !important;
        }
    }
}

// Progress bar
.drawer .pagelevelprogress-item-title .pagelevelprogress-indicator
{
    border-color:@esdc-purple;
}

// Block background color - used to apply variable based background colors on blocks
.block {
    .block-inner{
        background-color:@esdc-lightgrey;
    }
    .primary-color {
        background-color: @primary-color;
    }

    .secondary-color {
        background-color: @secondary-color;
    }

    .tertiary-color {
        background-color: @tertiary-color;
    }

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

    .background-color-inverted {
        background-color: @background-color-inverted;
        color: @font-color-inverted;
        .component-inner {
            background-color: transparent;
        }
    }
}

// Class applies alternative background color and component styling
.divider-block {
    background-color: @background-color-inverted;
    color: @foreground-color-inverted;
    text-align: center;
    .block-title,
    .block-body,
    .block-instruction,
    .component-title,
    .component-body,
    .component-instruction {
        color: @foreground-color-inverted;
        text-align: center;
    }
    .component-inner {
        background-color: transparent;
    }
}

// Component background - used to apply variable based background color and padding on components
.component-background {
    background-color: @component-background-color;
    padding: @component-padding;
}
.component-container {background-color:@esdc-white};

// Button state styles
.button[disabled="disabled"], button[disabled="disabled"] {
    color: @esdc-disabled-text;
    background-color: @esdc-disabled;
    &:hover
    {
        background-color: @esdc-disabled-hover;
    }
}
.no-touch .button:hover, .no-touch button:hover {
    background-color:@esdc-int-hover-color;
}

/*.buttons .buttons-marking-icon {
    left:unset !important;
    right:25px;
} removed as per issue #60*/ 

// ====================================================================
//
// [!!02] THEME - LAYOUT
//
// ====================================================================

html{
    margin:0;
    padding: 0;
}

// NAVIGATION
.navigation-inner.clearfix {
    display: flex; 
    button:not(.skip-nav-link) {
        margin: 20px;
    }
}
.navigation {
    min-height: 64px;
    .icon {
        padding:0 !important;
    }   
} 

// PAGE LEVEL PROGRESS
.pagelevelprogress-navigation.base {
    height: 24px !important;
    padding:0 !important;
}

@media screen and (max-width: 600px)
{
    .navigation
    {
        height:34px;
    }
    
    .navigation .icon {
    padding:5px !important; 
    }
    
    .pagelevelprogress-navigation.base
    {
        padding:5px !important; 
        height:36px;
    }
    
    .pagelevelprogress-navigation .pagelevelprogress-indicator {
        width:13vw !important;
    }
    
    #wrapper
    {
        padding-top:34px;
    }
}

// MARGINS
// Option to remove max-width on blocks
.block .block-inner when (@margin-control = noMargin) {
    max-width: 100%;  
}
 
.article .article-header when (@margin-control = noMargin) {
    max-width: calc(100% - 150px);
}


// ARTICLE LEVEL 
.article {
    .article-inner{
        padding-bottom: 0;
    }
    .article-body{
        margin-bottom: 0;
    }
    .article-title-inner, .block-title-inner{
        font-size: 36px;
    }  
    &.nth-child-1, &.nth-child-4, &.nth-child-7, &.nth-child-10, &.nth-child-13, &.nth-child-16
    {
        .article-title:before
        {
            content: '';
            height: 29px;
            width: 29px;
            margin-top: 6px;
            margin-left: -1 * 60px;
            float: left;
            background: -ms-linear-gradient(-45deg, @esdc-purple 0%, @esdc-purple 49%, transparent 49%, transparent 51%, lighten(@esdc-purple, 20%) 51%, lighten(@esdc-purple, 20%) 100%);
            background: linear-gradient(135deg, @esdc-purple 0%, @esdc-purple 49%, transparent 49%, transparent 51%, lighten(@esdc-purple, 20%) 51%, lighten(@esdc-purple, 20%) 100%);
        }
    }

    &.nth-child-2, &.nth-child-5, &.nth-child-8, &.nth-child-11, &.nth-child-14, &.nth-child-17
    {
        .article-title:before
        {
            content: '';
            height: 29px;
            width: 29px;
            margin-top: 6px;
            margin-left: -1 * 60px;
            float: left;
            background: -ms-linear-gradient(-45deg, @esdc-pink 0%, @esdc-pink 49%, transparent 49%, transparent 51%, lighten(@esdc-pink, 20%) 51%, lighten(@esdc-pink, 20%) 100%);
            background: linear-gradient(135deg, @esdc-pink 0%, @esdc-pink 49%, transparent 49%, transparent 51%, lighten(@esdc-pink, 20%) 51%, lighten(@esdc-pink, 20%) 100%);
        }
    }

    &.nth-child-3, &.nth-child-6, &.nth-child-9, &.nth-child-12, &.nth-child-15, &.nth-child-18
    {
        .article-title:before
        {
            content: '';
            height: 29px;
            width: 29px;
            margin-top: 6px;
            margin-left: -1 * 60px;
            float: left;
            background: -ms-linear-gradient(-45deg, @esdc-cyan 0%, @esdc-cyan 49%, transparent 49%, transparent 51%, lighten(@esdc-cyan, 20%) 51%, lighten(@esdc-cyan, 20%) 100%);
            background: linear-gradient(135deg, @esdc-cyan 0%, @esdc-cyan 49%, transparent 49%, transparent 51%, lighten(@esdc-cyan, 20%) 51%, lighten(@esdc-cyan, 20%) 100%);
        }
    }  
}

// BLOCK LEVEL
.block-padding when (@improved-block-padding = legacy) {
    padding: 60px;
}

.block-padding when (@improved-block-padding = improved) {
    padding: 40px 60px;
}
        
.block  {
    .block-body{
        margin-bottom: 0;
    }
    .block-inner{
        .block-padding;
        margin-top: 60px;
    }
}
.combineblock {  
    .block-inner {
        margin-top:0px !important;
        padding-top:0px !important;
    }        
}
// issue #36 - empty space between blocks
.trickle-button-component {
    padding-bottom: 0px !important;
}

.block:nth-child(2n) .block-title, .block:nth-child(2n+1) .block-title{
    text-align: left;
}

@media screen and (max-width: 640px)
{
    .block { 
        .block-inner{
            padding: 10px;
        }
    }
}
@media screen and (min-width: 641px)
{
    .block{ 
        .block-inner{
            .block-padding;
            margin-top: 60px;
        }
    }
}

// COMPONENT LEVEL 
.component {
    .component-body{
        margin: 0;
    }
    .component-title-inner{
        font-size: 24px;
    }
    .component-inner{
        padding: 30px;
    }
}

.component-container {
        @media (min-width: 760px)
        {
            .component-left .component-inner 
            {
                margin-right: 0px;
                padding-right: 15px;
            }
        }
        @media (min-width: 760px)
        {
            .component-right .component-inner 
            {
                margin-left: 0px;
                padding-left: 15px;
            }
        }
}

// ELEMENT LEVEL

// Table styles
[class$="-body"] table th, [class$="-body"] table td , .openTextInput-item-modelanswer table th,  .openTextInput-item-modelanswer table td{
    border: 2px solid @esdc-dark-blue;
    border-spacing: 0;
    padding: 10px;
}

[class$="-body"] table th , .openTextInput-item-modelanswer table th{
    background-color: @esdc-dark-blue;
    color: @esdc-white;
    text-align: left;
}
[class$="-body"] table th[scope="row"] , .openTextInput-item-modelanswer table th[scope="row"]{
    vertical-align: top;
}

figure.table {
    display: table!important;
    width: 100%;
}

.table>figcaption {
    display: table-caption!important;
}
// ====================================================================
//
// [!!03] THEME - TYPOGRAPHY
//
// ====================================================================

p{ margin: 0 0 14px 0; }

blockquote {
    border-left: 2px solid @primary-color;
    margin-left: 20px;
    padding-left: 20px;
    font-style: normal; // issue #40
} 

abbr[title] {
    text-decoration: none; // issue #59
}


// LISTS IN BODY

ol ::marker {
    font-weight: bold;
}

[class$="-body"], .openTextInput-item-modelanswer {
    ul, ol {
        padding: 0;
        margin: 0;
        margin-bottom:6px;
        li {
            padding-left: 1em;
            margin-bottom: 8px;
            list-style-position: inside;
            ul,ol {padding-top:3px;}
        }
    }
    // nested ul bullet styles
    ul li{
        text-indent: -1.4em;
    }
    // first level ul
    ul>li, ol>li>ul>li{list-style-type: disc;}
    // second level ul
    ul>li>ul>li{list-style-type:circle;}
    // third level ul 
    ul>li>ul>li>ul>li {list-style-type:square;}
    
    // simple ol under ul
    ul>li>ol>li, ul>li>ol>li>ol>li{
        text-indent: -1.1em;
    }
    
    // first level ol
    ol>li{text-indent: -1.2em;}
    // second level ol
    ol>li>ol>li {text-indent: -2em;}
    // third level ol
    ol>li>ol>li>ol>li {text-indent: -3em;}
    // fourth level ol
    ol>li>ol>li>ol>li>ol>li {text-indent: -3.7em;}
}

// TITLES
.component .component-title{
    margin-bottom: 10px;
}

.block-title-margin when (@improved-block-padding = Legacy) {
    margin-bottom: 10px;
 }
 
.block-title-margin when (@improved-block-padding = Improved) {
    margin-bottom: 30px;
}

@media screen and (max-width: 640px)
{
    .block .block-title {
        margin-bottom: 10px;
    }
}

@media screen and (min-width: 641px)
{
    .block .block-title {
        .block-title-margin;
    }
}

// DRAWER TITLES
.drawer-item-title-inner {
    font-weight: 700;
}
.drawer-item-description-inner{
    font-weight:100;
}

// COMPONENT LEVEL

.component .component-instruction-inner {
    padding: 5px;
}

.component .component-instruction-inner.validation-error {
    color: #000000 !important;
    background: #f3e9e8;
    border-top: none!important;
    border-bottom: none!important;
    border-right: none!important;
    border-left: 4px solid #d3080c!important;
}

// Link styles
// default
[class$="-body"] a {
    &:link{color: blue }
    &:visited{color: purple }
}

// ====================================================================
//
// [!!04] DARK BLUE BG
//
// ====================================================================
// dark blue bg
.notify-popup-body-inner, .narrative-content-inner, .stacklist-items-inner, .page-body-inner {
    // a styles with dark blue background
    a {
        &:link { color: #9EC3FF !important; }
        &:visited { color: #DEADFF !important; }
    }
    // white table border
    table th, table td {
        border: 1px solid @esdc-white;
        border-spacing: 0;
        padding:10px;
    }
    table th {
        background-color: @esdc-white;
        color: @esdc-dark-blue;
    }
}


// ====================================================================
//
// [**] - A11Y
//
// ====================================================================

// pop up
.notify  {
    .notify-popup {
        background-color:@esdc-dark-blue;
    }
    .notify-popup-done:hover {
        border-color: lighten(@esdc-pink,20%) !important;
    }
    .notify-popup-icon-close:hover {
        color:lighten(@esdc-pink,20%) !important;
    }
    a {
        text-decoration: underline!important;
    }
}

// non interactive box
div, p
{
    &:focus
    {
        outline:1px dotted rgba(170,170,170, 0.7) !important;
    }
}

// interactive box
button, label, input, .mcq-item input:focus + label {
    &:focus
    {
        outline:3px solid @esdc-pink !important;
    }
}

//visible focus indicator on all interactive elements
html *:focus, body div:focus, body p:focus, body button:focus, body label:focus, body input:focus, body *:focus {
    outline:3px solid #CD1C6A !important;
}

//fixed visible focus indicator on titles (previously on invisible aria-label)
html:not(.a11y-disable-focusoutline) {
    .js-heading {
        &:focus-within {
            //focus indicator visible on component title when child aria-label is focused
            ~.component-title-inner {
                outline: 3px solid @esdc-pink !important;
            }
        }
    }
    .js-heading-inner {
        // visible focus indicator outline on visible title instead of not visible aria-label
        &:focus {
            outline: none !important;
        }
    }
}


// ====================================================================
//
// [&&01] SPECIFIC - LOADING FR
//
// ====================================================================
html:lang(fr) {
    .loader-gif
    {
        div { 
            visibility: hidden; 
            position: relative; 
        } 
        div:after { 
            visibility: visible; 
            position: absolute; 
            top: 0; 
            left: 0; 
            content: "Chargement..."; 
        } 
    }
}

// ====================================================================
//
// [&&02] SPECIFIC - TEXT COMPONENT - ICONBOX
//
// ====================================================================
.iconbox{
    .text-title.component-title {
        background-color: @esdc-dark-blue;
        padding: 0.2em 0.6em;
        color: @esdc-white;
    }
    .text-header-inner.component-header-inner { border: 1px solid @esdc-dark-blue; }
    .text-body.component-body { padding: 1em; } .text-instruction { padding: 0 1em; }
    .text-inner { padding: 0; }
}

// ====================================================================
//
// [&&02] SPECIFIC - GRAPHIC COMPONENT
//
// ====================================================================
.graphic-widget.component-widget {
    text-align: center;
}


// ====================================================================
//
// [&&03] SPECIFIC - ASSESSEMENT COMPONENT
//
// ====================================================================
// remove graphic components for mobile view (when components snap down to single span).
.assessment {
    .graphic-component {
        display: block;
        @media all and (max-width: @device-width-medium) {
            display: none;
        }
    }
}

// ====================================================================
//
// [&&04] SPECIFIC - MEDIA COMPONENT
//
// ====================================================================
.mejs-offscreen {
    clip: unset !important;
    clip-path: unset !important;
    overflow: unset;
}
.mejs-overlay-button {
    background-color:rgba(0,0,0,0.8);
    border-radius:999px;
}
// FIX FOR MEDIA CC SELECTOR
.mejs-controls .mejs-captions-button .mejs-captions-selector {
    width: 120px !important;
    right:-120px;
    label
    {
        margin-left: 18px;    
        width:48px !important;
    }
}
// fix captions button keypresses
.mejs-captions-text {
    font-size: 2vw;
    line-height: 1.2;
}
.mejs-captions-position-hover {
    bottom: 0 !important;
}
.mejs-controls .mejs-captions-button .mejs-captions-selector {
    visibility: visible;
    overflow: unset !important;
}
span.mejs-offscreen {
    overflow: hidden;
}
.media-transcript-container {
    margin-top: 30px !important;
}

.mejs-controls {
    margin-bottom:-30px !important;
}
// fix for cc overlap
video::cue {
    line-height: 160%;
}

// ====================================================================
//
// [&&05] SPECIFIC - QUESTION COMPONENT
//
// ====================================================================
//Fix for MCQ colored X and check
.component .question-component .mcq-component .buttons-marking-icon .icon 
{
    .icon-tick, .icon-cross
    {
        color:black !important;
    }
    
}
/* DUPLICATE
.buttons-marking-icon .icon
{
    .icon-cross, .icon-tick
    {
        color:@esdc-black;
    }
}*/

.correct, .show-correct-answer
{
    .slider-scale-marker
    {
        color:black !important;
        font-weight:bold !important;
    }
}
// focus outline
.mcq-widget[role="radiogroup"]:focus-within, .mcq-widget[role="group"]>.mcq-item:focus-within {
    outline: 3px solid @esdc-pink;
}


// secondary focus for radio buttons
.mcq-component div[role="radiogroup"] {
    outline: none!important;
}

.mcq-component div[role="radiogroup"] .highlighted {
    outline: 3px solid @esdc-pink;
}

// ====================================================================
//
// [&&06] SPECIFIC - STACKLIST COMPONENT
//
// ====================================================================
.stacklist-item{
    background-color:@esdc-dark-blue;
}

.stacklist-next {
    background-color:@esdc-interactive-blue;
}
// ====================================================================
//
// [&&07] SPECIFIC - NARRATIVE COMPONENT
//
// ====================================================================
.narrative-component .narrative-text-controls .narrative-content .narrative-content-inner .narrative-controls-container .narrative-indicators .narrative-progress
{ background-color:grey; }

.narrative-content-inner{
    background-color: @esdc-dark-blue; 
}

// ====================================================================
//
// [&&08] SPECIFIC - NARRATIVE + STACKLIST COMPONENT
//
// ====================================================================
/*.narrative-content-inner, .stacklist-items-inner {
    a {
        color:#00E9FA !important; // @esdc-cyan-text
        &:visited
        {
            color:#e9e9f8 !important; // @esdc-white
        }
        &:hover
        {
              color:#BDFFEB !important; // @esdc-cyan
        }
    }
}*/

// ====================================================================
//
// [&&09] SPECIFIC - HOT GRAPHIC COMPONENT
//
// ====================================================================
//visited pins not using the default pin icon
.hotgraphic-graphic-pin-list-item .hotgraphic-graphic-pin 
{
    &.visited img
    {
       -webkit-filter:  drop-shadow(0px 0px 2px purple);
    }
}    

// ====================================================================
//
// [&&10] SPECIFIC - HOT GRID COMPONENT
//
// ====================================================================
// Hot grid item title style - issue #45
button.hotgrid-grid-item .hotgrid-item-title{
    color: #333;
    font-weight: 500;
}
.hotgrid-component .visited:after {
    background-color: rgba(172,172,172,0.2);
    button.hotgrid-grid-item .hotgrid-item-title{
        color: #000;
    }
}


// ====================================================================
//
// [&&11] SPECIFIC - HOT GRAPHIC + HOT GRID COMPONENT
//
// ====================================================================
// Hotgraphic and hot grid distinct title styles
.hotgraphic-content-title, .hotgrid-content-title {
    font-size: 22px;
    line-height: @component-title-line-height;
    margin-bottom: 10px;
    color: @esdc-cyan-text;
}
// overflow for hotspots & hotgrid
.hotgraphic-popup, .hotgrid-popup {
    overflow-y:auto;
    height:400px !important;
 }

 // hotgrapgic and hotgrid focus indicator fixes for new popup focus
html:not(.a11y-disable-focusoutline) {
    .notify-popup {
        /* adds focus indicator to hotgrid-popup instead of notify-popup when hotgrid or hotgraphic */
        &:focus {
            .hotgrid-popup , .hotgraphic-popup {
                outline: 3px solid @esdc-pink !important;
            }
        }
        /* removes focus indicator from notify-popup when hotgrid or hotgraphic */
        &:has(.hotgrid-popup):focus, &:has(.hotgraphic-popup):focus {
            outline: none !important;
        }
        /* adds focus indicator to hotgrid-popup instead of title when hotgrid or hotgraphic */
        .hotgrid-popup:has(.hotgrid-content-title:focus), .hotgraphic-popup:has(.hotgraphic-content-title:focus) {
            outline: 3px solid @esdc-pink !important;
        }
        /* removes focus indicator from content-title when hotgrid or hotgraphic */
        .hotgrid-content-title:focus,.hotgraphic-content-title:focus {
            outline: none !important;
        }
    }
}

// ====================================================================
//
// [&&12] SPECIFIC - IMAGE SLIDER
//
// ====================================================================
.slider-widget input:focus + div .rangeslider__handle {
    background-color: 3px solid @esdc-cyan !important;
    border:2px solid @esdc-pink !important;
    top:-12px;
}

// ====================================================================
//
// [&&13] SPECIFIC - EXPOSE COMPONENT
//
// ====================================================================
.expose-item-inner .expose-item-cover  {
    .front {
        background-color:@esdc-interactive-blue;
        &:hover
        {
            background-color:@esdc-int-hover-color;
        }
    }    
    .text
    {
        width:90% !important;
        line-height:28px !important;
    }   
}


// ====================================================================
//
// [&&14] SPECIFIC - MATCHING COMPONENT
//
// ====================================================================
// MATCHING LI STYLES
.dropdown>li {
    padding-left: 0em; 
    text-indent: 0em;
}

// ====================================================================
//
// [&&15] SPECIFIC - OPEN TEXT COMPONENT
//
// ====================================================================
.openTextInput-component{
    .openTextInput-item-textbox, .openTextInput-answer-container{
        border:1px solid @esdc-dark-blue;
    }
    .openTextInput-count-characters{
        background-color: transparent;
        color: @esdc-black;
        padding: 0;
    }
    .buttons .buttons-marking-icon {
        left: 90% !important;
    }
}

// ====================================================================
//
// [&&16] SPECIFIC - LEARNERS PICK
//
// ====================================================================
.bubble-answer {
    background: #fff;
    color: #0F2A4A;
    font-weight: bold;
    padding: 7.5px 15px;
    display: inline-block;
    margin: 0;
    border-radius: 20px;
    font-size: 95%;
}

.icon-answer {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 95%;
}

.info-icon {
    margin-right: 10px;
}

// ====================================================================
//
// [^^] - UTILITY
//
// ====================================================================
.important-box { border:6px solid @esdc-dark-blue !important; }
.biggerfont { font-size:22px; }
.center-image {
    img{
        display:block;
        margin-left:auto;
        margin-right:auto;
    }
}
/* duplicate 
//Image styles
.image img{
    display: block;
    margin-left: auto;
    margin-right: auto;
}*/
    
.invert-link {
    a {
        color:#00E9FA !important; // @esdc-cyan-text
        &:visited {
            color:#e9e9f8 !important; // @esdc-white
        }
        &:hover {
            color:#BDFFEB !important; // @esdc-cyan
        }
    }
}

//margin for submit button - used for Open Text Input fixes
.button-margin {
    margin-right:.5%
}

// ====================================================================
//
// [//] - CUSTOM
//
// ====================================================================

// SPEECHBUBBLES
.speechbubbles
{
    .component-container
    {
        display:flex
    }
    
    .component
    {
        align-self: flex-end;
        
        p
        {
            margin:0px;
        }
        
        .component-body-inner
        {
            background-color:@esdc-dark-blue;
            color:white;
            padding:20px;
            border-radius:30px;
            margin-bottom:40px;
        }
        .component-body:after 
        {
            content: '';
            position: relative;
            bottom: 0px;
            width: 0;
            height: 0;
            border: 40px solid transparent;
            border-top-color: @esdc-dark-blue;
        }
        
        &.component-left
        {
            img
            {
                margin-right:-150px;
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
            }
        }
        &.component-right
        {
            img
            {
                margin-left:-150px;
            }
        }
        &.component-left .component-body:after
        {
            left: 10%;  
            border-bottom: 0;
            border-right: 0;
        }
        
        &.component-right .component-body:after
        {
            left: 80%;   
            border-bottom: 0;
            border-left: 0;
        } 
        
        
        &.component-left.thoughtbubble
        {
           .component-body:after {
                content: "OO";
                background-color: @esdc-dark-blue;
                width: 20px;
                height: 20px;
                left: 10%;
                bottom: 47px;
                border-radius: 50%;
                border-left: 2px solid @esdc-dark-blue;
                border-top:2px solid @esdc-dark-blue;
                border-right: 2px solid @esdc-dark-blue;
                border-bottom:2px solid @esdc-dark-blue;
                box-shadow: 20px 20px  @esdc-dark-blue;
            }
        }
        &.component-right.thoughtbubble
        {
           .component-body:after {
                content: "OO";
                background-color: @esdc-dark-blue;
                width: 20px;
                height: 20px;
                right: 10%;
                bottom: 47px;
                border-radius: 50%;
                border-left: 2px solid @esdc-dark-blue;
                border-top:2px solid @esdc-dark-blue;
                border-right: 2px solid @esdc-dark-blue;
                border-bottom:2px solid @esdc-dark-blue;
                box-shadow: -20px 20px  @esdc-dark-blue;
            }
        }
        &.component-full.thoughtbubble
        {
           .component-body:after {
                content: "OO";
                background-color: @esdc-dark-blue;
                width: 20px;
                height: 20px;
                left: 20%;
                bottom: 47px;
                border-radius: 50%;
                border-left: 2px solid @esdc-dark-blue;
                border-top:2px solid @esdc-dark-blue;
                border-right: 2px solid @esdc-dark-blue;
                border-bottom:2px solid @esdc-dark-blue;
                box-shadow: 20px 20px  @esdc-dark-blue;
            }
        }
    }
}

// THIS CLASS IS FOR THE PURPOSE OF THE ADAPT DEMO 
// blank component demo - applied at block level to add a background image in place of a blank component
.blank-background {
    background-image: url(assets/blank-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;

    @media all and (max-width: @device-width-large) {
        background-image: url(assets/blank-bg-900.jpg);
        background-position: right;
    }

    @media all and (max-width: @device-width-medium) {
        background-image: none;
    }
}

// THIS IS TO FIX THE WORD COPY-PASTE FEATURE ON CKEDITOR5 THAT MIGHT CONTAIN SOME UNWANTED P TAGS IN BULLET LIST
li p {
  display: inline;
}

a:not(a[href]) {
  text-decoration: none !important;
}