/* Preset Tags *******************/

* {
    padding: 0;
    margin: 0;
}

html {
    min-height: 100%;
}

body {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
    text-align: left;
}

    body.logged-in {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

.text-reminder {
    font-size: 10px;
}

.img-container {
    text-align: center;
}

img {
    max-width: 100%;
}

@media (max-width: 768px) {

    .wide-phone {
        margin-left: -20px;
        width: calc(100% + 40px);
    }

        .wide-phone img {
            width: 100%;
        }
}

hr {
    width: 100%;
    border: none;
    height: 4px;
    margin: 20px 0;
}

h1 {
    display: block;
    position: relative;
    font-size: 48px;
    font-family: Neuton, Serif;
    font-weight: normal;
    line-height: normal;
    padding-bottom: 24px;
}

    h1:before {
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 48px;
        height: 4px;
    }

@media (max-width: 768px) {

    h1 {
        font-size: 36px;
    }
}

h1.center:before {
    left: 50%;
    margin-left: -24px;
}

h1.page-title {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-size: 36px;
    font-weight: 300;
    padding-bottom: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

    h1.page-title:before {
        content: none;
    }

h1.simplified {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-size: 30px;
    line-height: 42px;
    font-weight: 600;
    padding-bottom: 20px;
}

    h1.simplified:before {
        content: none;
    }

h1 .course-categories {
    position: absolute;
    bottom: -4px;
    left: 70px;
}

h2 {
    font-size: 24px;
    font-weight: lighter;
    line-height: normal;
}

    h2.highlight {
        display: flex;
        align-items: center;
        margin: 0 auto;
        justify-content: center;
    }

        h2.highlight:before,
        h2.highlight:after {
            content: '';
            display: block;
            width: 100px;
            height: 2px;
            margin: 20px;
        }

h3 {
    position: relative;
    font-family: Neuton, Serif;
    font-weight: normal;
    font-size: 24px;
    line-height: normal;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

    h3.simplified {
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-size: 24px;
        line-height: 42px;
        font-weight: 600;
        padding-bottom: 5px;
    }

    h3:not(.question):before, h3.question span:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 24px;
    }

    h3:not(.question):before {
        bottom: 0;
        height: 4px;
    }

    h3.text-center:before {
        left: 50%;
        margin-left: -12px;
    }

    h3.question span:before {
        top: 0;
        height: 2px;
        margin-top: 6px;
    }

    h3.question {
        font-size: 18px;
    }

        h3.question span {
            display: block;
            position: relative;
            top: 100%;
            padding-top: 12px;
            font-size: 24px;
        }

h4 {
    font-size: 18px;
    font-weight: 300;
    line-height: normal;
}

    h4.simplified {
        line-height: 24px;
        font-weight: 600;
        padding: 10px;
    }

    h4 > img {
        display: inline-block;
    }

h5 {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
}

h6 {
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 5px;
}

.title-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

    .title-container .cta-contextual {
        margin-left: 20px;
    }

    .title-container h1.simplified {
        padding-bottom: 0;
    }

    .title-container h3 + .cta-contextual {
        margin-bottom: 20px;
    }

    .title-container .custom-select-container {
        margin-left: 20px;
    }

    .title-container #filterDiv .custom-select-container {
        margin-left: 0px;
        padding: 0px;
    }


.filter-container + .title-container {
    margin-top: 10px;
}

@media (max-width: 768px) {

    .title-container {
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

        .title-container > .back-btn {
            position: absolute;
            top: 0;
            left: 0;
        }

            .title-container > .back-btn + h1,
            .title-container > .back-btn + h2,
            .title-container > .back-btn + h3,
            .title-container > .back-btn + h4 {
                margin-left: 56px;
            }

            .title-container > .back-btn + h1 {
                margin-top: -6px;
            }

            .title-container > .back-btn + h2,
            .title-container > .back-btn + h4 {
                line-height: 38px;
            }

        .title-container .custom-select-container {
            margin-top: 20px;
            margin-left: 0;
        }

        .title-container h3 + .cta-contextual {
            margin-left: 0;
        }
}

.title-choice {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
}

    .title-choice h2 {
        width: auto;
        margin-bottom: 0;
    }

        .title-choice h2 + h2 {
            margin-left: 40px;
        }

        .title-choice h2 a {
            font-size: 18px;
            text-decoration: underline;
        }

            .title-choice h2 a.cta-action.small {
                text-decoration: none;
            }

@media (max-width: 768px) {

    .title-choice {
        flex-wrap: wrap !important;
    }

        .title-choice h2 {
            min-width: 100%;
            margin-right: 0 !important;
        }
}

.cta-container.steps-btn-container {
    display: flex;
    justify-content: flex-end;
}

    .cta-container.steps-btn-container a + a {
        margin-left: auto;
    }

p {
    line-height: 24px;
}

.intro-p {
    font-size: 18px;
    line-height: 1.67;
}

@media (max-width: 768px) {

    .intro-p {
        font-size: 16px;
        line-height: 1.88;
    }
}

.legend-p {
    font-family: Neuton, Serif;
    font-size: 18px;
}

a {
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}

    a:hover {
        text-decoration: underline;
    }

    a > .fa {
        font-size: 18px;
        padding-right: 8px;
    }

.simple-icon-container {
    display: inline-flex;
    align-items: center;
}

a.simple-icon-container:hover {
    text-decoration: none;
}

.full-width {
    width: 100%;
    max-width: 100% !important;
    box-sizing: border-box;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

@media (max-width: 768px) {

    .text-center-phone {
        text-align: center;
    }
}

.round-container-36 {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 32px;
    text-align: center;
    border-radius: 50%;
    min-width: 36px;
    border-width: 2px;
    border-style: solid;
    border-color: #ffffff;
    box-sizing: border-box;
    font-size: 18px;
}

.obsolete {
    font-size: 14px;
    text-decoration: line-through;
}

.disabled {
    cursor: default;
    pointer-events: none;
}

.unstyled {
    list-style-type: none;
    display: inline-block;
}

.fl-content-inline {
    margin-left: 10px;
}

.fl-container-inline {
    display: inline-block;
    margin-left: 20px;
}

.following-content {
    display: block;
    margin-top: 20px;
}

@media (max-width: 768px) {

    .following-content-phone {
        margin-top: 20px;
    }
}

table.following-content {
    display: table;
    width: 100%;
    margin-top: 20px;
}

.following-container {
    display: block;
    margin-top: 40px;
}

.following-data {
    display: block;
    margin-top: 10px;
}

.inner {
    padding: 20px;
    box-sizing: border-box;
}

@media (max-width: 768px) {

    .full-width-phone {
        width: 100%;
        box-sizing: border-box;
    }

    .fl-container-inline:not(.fl-container-inline-phone) {
        margin-top: 20px;
        display: block;
        margin: 20px auto 0;
        margin-left: 0;
    }

    .inner {
        padding: 20px 0;
    }

    .inner-mobile {
        padding: 20px;
        box-sizing: border-box;
    }

    .following-container-phone {
        display: block;
        margin-top: 20px;
    }
}

section.inner {
    padding: 40px 30px;
}
/*
    section.inner:not(.colored-row-container) + section.inner:not(.colored-row-container) {
        padding: 0 30px 40px;
    }
*/
@media (max-width: 768px) {

    section.inner {
        padding: 20px;
    }
}

.col-container {
    display: flex;
}

    .col-container.top {
        align-items: flex-start;
        flex-wrap: nowrap;
    }

    .col-container.middle {
        align-items: center;
        flex-wrap: nowrap;
    }

    .col-container.bottom {
        align-items: flex-end;
        flex-wrap: nowrap;
    }

    .col-container.center {
        justify-content: center;
    }

    .col-container.space-between {
        justify-content: space-between;
    }

    .col-container.flex-end {
        justify-content: flex-end;
    }

    .col-container .col-1,
    .col-container .col-2,
    .col-container .col-3,
    .col-container .col-4,
    .col-container .col-5,
    .col-container .col-6,
    .col-container .col-7,
    .col-container .col-8,
    .col-container .col-9,
    .col-container .col-10,
    .col-container .col-11,
    .col-container .col-12 {
        box-sizing: border-box;
    }

body .col-1 {
    width: 8.33%;
}

body .col-2 {
    width: 16.66%;
}

body .col-3 {
    width: 25%;
}

body .col-4 {
    width: 33.33%;
}

body .col-5 {
    width: 41.66%;
}

body .col-6 {
    width: 50%;
}

body .col-7 {
    width: 58.33%;
}

body .col-8 {
    width: 66.66%;
}

body .col-9 {
    width: 75%;
}

body .col-10 {
    width: 83.33%;
}

body .col-11 {
    width: 91.66%;
}

body .col-12 {
    width: 100%;
}

body .col-unique {
    margin: 0 auto;
    display: block;
    padding: 0 !important;
}

.col-container:not(.three-col-container) > [class*="col-"]:not(.col-12):first-child {
    padding-right: 15px;
}

.col-container:not(.three-col-container) > [class*="col-"]:not(.col-12) + [class*="col-"]:nth-child(2n) {
    padding-left: 15px;
}

.three-col-container > [class*="col-"]:not(.col-12):not(:nth-child(3n)) {
    padding-right: 7.5px;
}

.three-col-container > [class*="col-"]:not(.col-12):first-child {
    padding-right: 15px;
}

.three-col-container > [class*="col-"]:not(.col-12):nth-child(2n) {
    padding-left: 7.5px;
}

.three-col-container > [class*="col-"]:not(.col-12):nth-child(3n) {
    padding-left: 15px;
}

@media (max-width: 768px) {

    .col-container {
        flex-wrap: wrap;
    }

        .col-container .col-1,
        .col-container .col-2,
        .col-container .col-3,
        .col-container .col-4,
        .col-container .col-5,
        .col-container .col-6,
        .col-container .col-7,
        .col-container .col-8,
        .col-container .col-9,
        .col-container .col-10,
        .col-container .col-11,
        .col-container .col-12 {
            width: 100%;
        }

        .col-container:not(.three-col-container) > [class*="col-"]:not(.col-12):first-child {
            padding-right: 0;
        }

        .col-container:not(.three-col-container) > [class*="col-"]:not(.col-12) + [class*="col-"]:nth-child(2n) {
            padding-left: 0;
        }

    .three-col-container > [class*="col-"]:not(:first-child) {
        margin-top: 20px;
    }

    .three-col-container > [class*="col-"]:not(.col-12):not(:nth-child(3n)) {
        padding-right: 0;
    }

    .three-col-container > [class*="col-"]:not(.col-12):nth-child(2n),
    .three-col-container > [class*="col-"]:not(.col-12):nth-child(3n) {
        padding-left: 0;
    }
}

.pull-right {
    align-self: flex-end;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 55%;
}

    .video-wrapper iframe {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
    }

#sticky-container.active {
    position: fixed;
    top: 0;
    z-index: 10;
}

/* Favorite *******************/

.favorite i {
    font-size: 14px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    border-style: solid;
    border-width: 1px;
    padding: 0;
}

/* Visibility *******************/

@media (max-width: 1024px) {

    .visible-desktop {
        display: none !important;
    }
}

@media (min-width: 1025px) {

    .hidden-desktop {
        display: none !important;
    }
}

@media (max-width: 768px) {

    .hidden-phone {
        display: none !important;
    }
}

@media (min-width: 769px) {

    .visible-phone {
        display: none !important;
    }
}

/* Scrollbar *******************/

.custom-scrollbar {
    overflow-x: auto;
    padding-bottom: 20px;
}

.custom-scrollbar-y {
    overflow-y: auto;
    padding-bottom: 20px;
}

    .custom-scrollbar::-webkit-scrollbar-track,
    .custom-scrollbar-y::-webkit-scrollbar-track,
    .custom-scrollbar ::-webkit-scrollbar-track,
    .custom-scrollbar-y ::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar,
    .custom-scrollbar-y::-webkit-scrollbar,
    .custom-scrollbar ::-webkit-scrollbar,
    .custom-scrollbar-y ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb,
    .custom-scrollbar-y::-webkit-scrollbar-thumb,
    .custom-scrollbar ::-webkit-scrollbar-thumb,
    .custom-scrollbar-y ::-webkit-scrollbar-thumb {
        border-radius: 6px;
    }

/* Profile Picture *******************/

.pic-220 {
    display: inline-block;
    width: 220px;
    max-width: 220px;
    height: 220px;
    max-height: 220px;
    border-radius: 50%;
}

.pic-120 {
    display: inline-block;
    width: 120px;
    max-width: 120px;
    height: 120px;
    max-height: 120px;
    border-radius: 50%;
}


.pic-84 {
    display: inline-block;
    width: 84px;
    max-width: 84px;
    height: 84px;
    border-radius: 50%;
}

.pic-64 {
    display: block;
    width: 64px;
    max-width: 64px;
    min-width: 64px;
    height: 64px;
    max-height: 64px;
    border-radius: 50%;
}

.pic-48 {
    display: block;
    width: 48px;
    max-width: 48px;
    min-width: 48px;
    height: 48px;
    max-height: 48px;
    border-radius: 50%;
}

.pic-36 {
    display: block;
    width: 36px;
    height: 36px;
    max-height: 36px;
    max-width: 36px;
    min-width: 36px;
    border-radius: 50%;
}

.pic-36-max {
    display: flex;
    max-width: 36px;
    max-height: 36px;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.pic-30 {
    display: block;
    width: 30px;
    height: 30px;
    max-height: 30px;
    max-width: 30px;
    min-width: 30px;
    border-radius: 50%;
}

@media (max-width: 768px) {

    .pic-220 {
        width: 170px;
        max-width: 170px;
        min-width: 170px;
        max-height: 170px;
        height: 170px;
    }

    .pic-64,
    .pic-48 {
        width: 36px;
        max-width: 36px;
        min-width: 36px;
        height: 36px;
        max-height: 36px;
    }
}

/* Label / Input Text *******************/

label {
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

    label.large {
        max-width: 460px;
    }

    label.full-width {
        max-width: 100%;
    }

    label.above {
        font-size: 12px;
        text-transform: uppercase;
    }

        label.above input[type="text"],
        label.above input[type="password"],
        label.above input[type="number"],
        label.above select,
        label.above textarea {
            display: block;
        }

@media (max-width: 768px) {
    label,
    label.large {
        max-width: inherit;
    }
}

::placeholder {
    font-size: 14px;
}

.discreet {
    font-size: 12px;
}

input[type="text"],
input[type="password"],
input[type="number"],
.input-file {
    display: inline-block;
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    resize: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
}

    input[type="text"]:disabled,
    input[type="password"]:disabled,
    input[type="number"]:disabled {
        border-bottom: none;
    }

input[type="number"] {
    width: 75px;
}

label input[type="text"],
label input[type="password"],
label input[type="number"] {
    height: 30px;
    margin-top: -5px;
    font-size: 18px;
    line-height: 22px;
}

.select-button {
    display: inline-block;
    padding: 6px 40px 6px 10px;
    box-sizing: border-box;
    line-height: 22px;
    height: 34px;
    border-radius: 3px;
    white-space: nowrap;
    position: relative;
    text-decoration: none;
    min-width: 200px;
}

    .select-button:hover {
        text-decoration: none;
    }

    .select-button i {
        display: block;
        position: absolute;
        right: 2px;
        top: 0;
        line-height: 30px;
    }

/* Email Field *******************/

label.email-field {
    display: inline-block;
    background-image: none;
    box-sizing: border-box;
    position: relative;
    border-width: 2px;
    border-style: solid;
    max-width: 220px;
}

    label.email-field input {
        background-color: transparent;
        border: none;
        line-height: 30px;
        outline: none;
        padding: 0 40px 0 10px;
        width: 100%;
        height: 30px;
        box-sizing: border-box;
        margin: 0;
        font-size: inherit;
        overflow: inherit;
    }

    label.email-field a,
    label.email-field button {
        line-height: 30px;
        width: 20px;
        display: inline-block;
        text-align: center;
        position: absolute;
        top: 0;
        right: 10px;
        border: none;
        background: none;
    }

    label.email-field .fa {
        line-height: 30px;
    }

/* Textarea *******************/

textarea {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    resize: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin-bottom: 20px;
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-size: 18px;
    line-height: 24px;
}

    textarea:focus {
        font-style: initial;
    }

/* Radio / Checkbox *******************/

.input-option-container {
    display: inline-block;
    text-align: left;
    position: relative;
    width: auto;
    max-width: inherit;
    font-size: 12px;
}

    .input-option-container input[type=checkbox],
    .input-option-container input[type=radio] {
        display: none;
    }

.col-12 .checkbox-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(33%, 1fr));
    align-items: center;
}

.col-6 .checkbox-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    align-items: center;
}

input[type=checkbox] + span,
input[type=radio] + span {
    display: inline-flex;
    box-sizing: border-box;
    position: relative;
}

    input[type=checkbox] + span span:not(:empty),
    input[type=radio] + span span:not(:empty) {
        padding: 10px 25px 10px 35px;
    }

    input[type=checkbox] + span span:empty,
    input[type=radio] + span span:empty {
        display: inline-block;
        width: 24px;
    }

    input[type=checkbox] + span:before,
    input[type=radio] + span:before {
        content: '';
        display: block;
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 50%;
        border-width: 2px;
        border-style: solid;
        margin-top: -12px;
    }

    input[type=checkbox] + span i {
        display: none;
    }

input[type=checkbox]:checked + span i {
    content: '';
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -12px;
    border-radius: 50%;
    text-align: center;
    line-height: 24px;
}

input[type=checkbox]:checked + span .fa-check {
    display: block;
}

input[type=radio] + span:before {
    border-radius: 50%;
}

input[type=radio]:checked + span:after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    box-sizing: border-box;
    position: absolute;
    left: 8px;
    top: 50%;
    margin-top: -4px;
    border-radius: 50%;
}

label input[type=checkbox] + span,
label input[type=radio] + span {
    cursor: pointer;
}

input[disabled],
input[disabled] + span,
input[disabled] + span i,
input[disabled] + span:before {
    cursor: default !important;
    pointer-events: none !important;
}

.input-option-container.inversed-checkbox input[type=checkbox] + span:before {
    left: inherit;
    right: 25px;
}

.input-option-container.inversed-checkbox input[type=checkbox] + span span:not(:empty) {
    padding: 10px 60px 10px 0px;
}

.input-option-container.inversed-checkbox input[type=checkbox]:checked + span i {
    left: inherit;
    right: 25px;
}

@media (max-width: 768px) {

    .col-12 .checkbox-container,
    .col-6 .checkbox-container {
        display: flex;
        flex-wrap: wrap;
    }

    .checkbox-container .input-option-container {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Input File *******************/

.input-file {
    box-sizing: border-box;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

    .input-file .label {
        display: block;
    }

    .input-file .filename {
        display: block;
        font-size: 18px;
        font-weight: normal;
        line-height: 22px;
        text-transform: initial;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .input-file input {
        display: none;
    }

.input-icon {
    position: relative;
}

    .input-icon input,
    .input-icon.input-file {
        padding-right: 30px;
        box-sizing: border-box;
    }

    .input-icon > a,
    .input-icon .fa {
        display: inline-block;
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        position: absolute;
        right: 0;
        bottom: 0;
        text-align: center;
        line-height: 30px;
        padding-right: 0;
    }

/* UI Menu *******************/

.ui-autocomplete {
    display: inline-block;
    list-style-type: none;
    z-index: 2;
    line-height: 48px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    margin-top: 10px;
    overflow-y: auto;
    max-height: 250px;
}

    .ui-autocomplete li {
        padding: 0 20px;
        font-weight: 500;
    }

.ui-helper-hidden-accessible {
    display: none;
}

/* Select *******************/

.custom-select-container {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    min-width: 120px;
}

    .custom-select-container.large {
        max-width: 200px;
        min-width: 200px;
    }

    .custom-select-container.small {
        max-width: 120px;
        min-width: 120px;
    }

    .custom-select-container label {
        position: relative;
    }

.custom-select {
    display: inline-block;
    position: relative;
    max-width: 300px;
    width: 100%;
    height: 30px;
    white-space: nowrap;
    line-height: 30px;
    box-sizing: border-box;
}

    .custom-select ul {
        list-style-type: none;
    }

    .custom-select:not(.open) > ul {
        height: 30px;
        border-bottom-style: solid;
        border-bottom-width: 1px;
    }

    .custom-select.multiline {
        height: auto;
    }

        .custom-select.multiline .select-list {
            font-size: 12px;
            min-height: 30px;
            position: relative;
        }

        .custom-select.multiline:not(.open) .select-list {
            position: relative;
        }

        .custom-select.multiline.open .select-list {
            border-bottom: 1px solid transparent;
        }

        .custom-select.multiline .select-list > li:last-child {
            position: absolute;
            top: 100%;
            overflow-y: auto;
            border-width: 1px;
            border-style: solid;
        }

        .custom-select.multiline:not(.open) > ul,
        .custom-select.multiline .select-list .placeholder {
            height: auto;
        }

        .custom-select.multiline .select-list .placeholder {
            margin-bottom: -1px;
            min-height: 30px;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
        }

            .custom-select.multiline .select-list .placeholder .option-legend {
                font-size: 14px;
                line-height: 14px;
                padding-bottom: 8px;
            }

        .custom-select.multiline.open .select-list > li:last-child,
        .custom-select.multiline.open .select-list ul {
            display: block;
            min-width: 100%;
            width: 100%;
        }

        .custom-select.multiline .select-list ul li {
            display: block;
            padding: 0;
            min-width: 100%;
            width: 100%;
            box-sizing: border-box;
        }

            .custom-select.multiline .select-list ul li[data-value] {
                padding: 0 20px;
                box-sizing: border-box;
            }

        .custom-select.multiline .select-list ul ul {
            border: none;
            box-shadow: none;
        }

        .custom-select.multiline .select-list ul .ligroup {
            padding-bottom: 10px;
        }

            .custom-select.multiline .select-list ul .ligroup > span {
                display: block;
                padding: 5px 10px;
                text-transform: uppercase;
                font-size: 12px;
                line-height: 20px;
                box-sizing: border-box;
            }

        .custom-select.multiline .select-list .ligroup ul {
            padding: 0 20px;
        }

            .custom-select.multiline .select-list .ligroup ul > li {
                border-top-width: 1px;
                border-top-style: solid;
                padding: 6px 0;
                font-weight: bold;
                line-height: 14px;
                box-sizing: border-box;
            }

        .custom-select.multiline li > span {
            pointer-events: none;
        }

        .custom-select.multiline .select-list .ligroup .option-legend {
            display: block;
            font-weight: normal;
        }

    .custom-select.flag-select {
        width: 75px;
    }

    .custom-select i {
        display: block;
        position: absolute;
        right: 10px;
        top: 0;
        pointer-events: none;
        line-height: 30px;
    }

    .custom-select.flag-select i {
        top: 2px;
    }

.select-list {
    position: absolute;
    width: 100%;
    top: 0;
    box-sizing: border-box;
}

    .select-list .placeholder {
        display: block;
        cursor: pointer;
        padding: 0;
        border-left: none;
        border-right: none;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        font-size: 14px;
        background-color: transparent;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 32px;
        height: 30px;
        font-weight: 400;
        margin-top: -1px;
    }

.custom-select-container.disabled .select-list {
    border-bottom: none !important;
}

.select-list .placeholder.selected {
    font-size: 18px;
}

.custom-select.flag-select:not(.open) > ul {
    border: none;
}

.flag-select .select-list .placeholder {
    padding: 2px 10px;
    font-size: 12px;
}

.flag-select .placeholder img {
    padding-top: 4px;
}

.select-list > li:last-child {
    display: none;
    box-sizing: border-box;
    overflow-y: auto;
    max-height: 250px;
    position: relative;
    z-index: 5;
    overflow: visible;
    top: 0;
    min-width: 100%;
    width: intrinsic;
    width: -moz-max-content;
    width: -webkit-max-content;
    width: max-content;
}

.flag-select .select-list > li:last-child {
    max-height: 180px;
    min-width: 100%;
}

.select-list ul {
    width: auto;
    border-style: solid;
    border-width: 1px;
    max-width: 250px;
    min-width: 100%;
    box-sizing: border-box;
    overflow-x: visible;
    overflow-y: auto;
}

    .select-list ul li {
        position: relative;
        padding: 10px 20px;
        line-height: 30px;
        font-weight: 500;
        box-sizing: border-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.flag-select .select-list ul li {
    height: 30px;
    padding: 3px 10px 6px 10px;
    line-height: 22px;
    min-height: 20px;
}

.flag-select img {
    float: left;
    padding-right: 10px;
    pointer-events: none;
}

.flag-select:not(.open) .select-list .placeholder {
    border: none;
}

.custom-select.open .select-list > li:last-child {
    display: flex;
}

.custom-select.open .select-list ul li:hover {
    cursor: pointer;
}

@media (max-width: 768px) {

    .custom-select-container,
    .custom-select-container .custom-select {
        max-width: inherit;
    }
}

/* Multiselect *******************/

.multiple-select-container {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    position: relative;
}

    .multiple-select-container label {
        bottom: -2px;
        position: relative;
    }

    .multiple-select-container input[type="text"] {
        margin-top: -6px;
        font-size: 18px;
        border-bottom: none;
    }

    .multiple-select-container .multiple-select-btn {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
    }

        .multiple-select-container .multiple-select-btn .fa {
            position: static;
        }

    .multiple-select-container .custom-select {
        max-width: 100%;
        min-height: 30px;
        height: inherit !important;
    }

    .multiple-select-container .select-list {
        position: relative;
        min-height: 30px;
        height: inherit !important;
        border-bottom-width: 1px !important;
        border-bottom-style: solid !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

        .multiple-select-container .select-list ul,
        .multiple-select-container .select-list ul .multiple-select-option {
            display: block;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
            box-sizing: border-box;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .multiple-select-container .select-list .placeholder {
            white-space: normal;
            overflow: auto;
            min-height: 30px;
            height: inherit;
            line-height: initial;
            padding-top: 5px;
            box-sizing: border-box;
            margin-bottom: -1px;
            cursor: default;
        }

        .multiple-select-container .select-list > li:last-child {
            position: absolute;
            top: 100%;
            max-width: 100%;
        }

    .multiple-select-container .multiple-select-option .fa {
        border-radius: 50%;
        position: static;
        display: inline-block;
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        text-align: center;
        line-height: 30px;
        padding-right: 0;
        margin-left: -10px;
        margin-right: 10px;
    }

    .multiple-select-container .selected-option {
        display: inline-block;
        border-width: 1px;
        border-style: solid;
        border-radius: 10px;
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        padding-left: 5px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

        .multiple-select-container .selected-option .delete-option {
            display: inline-block;
            position: static;
            pointer-events: auto;
            line-height: 16px;
            padding: 0 5px;
            cursor: pointer;
        }

/* Call To Action *******************/

.cta-contextual {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    border-radius: 3px;
    padding-left: 40px;
    padding-right: 40px;
    border-width: 2px;
    border-style: solid;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    outline: none;
    white-space: nowrap;
}

    .cta-contextual.disabled {
        opacity: 0.5;
    }

    .cta-contextual .fa {
        display: inline-block;
        height: 48px;
        line-height: 48px;
    }

    .cta-contextual > span + .fa {
        padding-right: 0;
        padding-left: 10px;
    }

    .cta-contextual:hover {
        text-decoration: none;
    }

    .cta-contextual:active:before,
    .cta-contextual.selected:before {
        content: '';
        display: block;
        border-width: 1px;
        border-style: solid;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        pointer-events: none;
    }

    .cta-contextual.multiline {
        display: inline-block;
        height: auto;
        line-height: 18px;
        padding-top: 10px;
        padding-bottom: 10px;
        white-space: normal;
    }

        .cta-contextual.multiline span span {
            display: block;
            font-weight: normal;
            font-size: 12px;
        }

    .cta-contextual.simplified {
        height: auto;
        line-height: inherit;
        padding: 5px 20px;
    }

.cta-action {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    white-space: nowrap;
    text-align: left;
    position: relative;
    background-image: none;
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
}

    .cta-action.cta-action-multiline {
        display: inline-flex;
        align-items: center;
        white-space: normal;
        font-size: 12px;
        font-weight: 500;
        line-height: 14px;
    }

        .cta-action.cta-action-multiline span span {
            display: block;
        }

    .cta-action:hover {
        text-decoration: none;
    }

    .cta-action .fa {
        display: inline-block;
        width: 48px;
        min-width: 48px;
        height: 48px;
        border-radius: 50%;
        text-align: center;
        font-size: 18px;
        line-height: 48px;
        text-align: center;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
        padding: 0;
    }

    .cta-action.light .fa {
        box-shadow: none;
        border-width: 2px;
        border-style: solid;
        box-sizing: border-box;
        line-height: 44px;
    }

    .cta-action .fa + span,
    .cta-action span + .fa {
        margin-left: 15px;
    }

    .cta-action.small {
        height: 36px;
        line-height: 36px;
    }

        .cta-action.small .fa {
            width: 36px;
            min-width: 36px;
            height: 36px;
            line-height: 36px;
            font-size: 14px;
        }

@media (max-width: 768px) {

    .cta-action:not(.light):not(.cta-timer) {
        display: inline-flex;
        border-radius: 8px;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
        max-width: 100%;
        max-width: 300px;
        justify-content: center;
    }

    .cta-action.small:not(.light):not(.cta-timer) {
        border-radius: 36px;
    }

    .cta-action:not(.light):not(.cta-timer) .fa {
        box-shadow: none;
        background-color: transparent !important;
    }

    .cta-action:not(.light):not(.cta-timer):not(.cta-action-multiline) span:first-child {
        padding-left: 20px;
    }

    .cta-action:not(.light):not(.cta-timer) .fa + span {
        padding-right: 20px;
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .cta-action:not(.light):not(.cta-timer) .fa + span,
    .cta-action:not(.light):not(.cta-timer) span + .fa {
        margin-left: 0;
    }
}

.cta-timer .timer-progression {
    position: absolute;
    display: block;
    width: 56px;
    height: 56px;
    top: -1px;
    left: -4px;
}

.cta-action .fa + .timer-progression {
    margin-left: 0;
}

.cta-timer .timer-data {
    display: inline-block;
    font-size: 24px;
    line-height: 48px;
    font-weight: 300;
    margin-left: 15px;
}

.cta-timer .semi-circle span:before {
    border-width: 4px;
    border-style: solid;
}

.progression-circle .semi-circle + .semi-circle span {
    -webkit-transition-delay: 0;
    -moz-transition-delay: 0;
    -ms-transition-delay: 0;
    -o-transition-delay: 0;
    transition-delay: 0;
}

/* Progression circles *******************/

.progression-circle {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

    .progression-circle .semi-circle:first-child,
    .progression-circle .semi-circle + .semi-circle {
        content: '';
        display: block;
        width: 50%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .progression-circle .semi-circle:first-child {
        left: 50%;
    }

.semi-circle span {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    -webkit-transition: 500ms;
    -moz-transition: 500ms;
    -ms-transition: 500ms;
    -o-transition: 500ms;
    transition: 500ms;
    -webkit-transition-timing-function: linear;
    -moz-transition-timing-function: linear;
    -ms-transition-timing-function: linear;
    -o-transition-timing-function: linear;
    transition-timing-function: linear;
    -webkit-transform-origin: center left;
    -moz-transform-origin: center left;
    -ms-transform-origin: center left;
    -o-transform-origin: center left;
    transform-origin: center left;
}

.progression-circle .semi-circle + .semi-circle span {
    left: 100%;
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.semi-circle span:before {
    content: '';
    display: block;
    width: 200%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    border-radius: 50%;
    box-sizing: border-box;
}

.progression-circle[data-value="0"] .semi-circle:first-child span {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.progression-circle[data-value="1"] .semi-circle:first-child span {
    -webkit-transform: rotate(183.6deg);
    -moz-transform: rotate(183.6deg);
    -ms-transform: rotate(183.6deg);
    -o-transform: rotate(183.6deg);
    transform: rotate(183.6deg);
}

.progression-circle[data-value="2"] .semi-circle:first-child span {
    -webkit-transform: rotate(187.2deg);
    -moz-transform: rotate(187.2deg);
    -ms-transform: rotate(187.2deg);
    -o-transform: rotate(187.2deg);
    transform: rotate(187.2deg);
}

.progression-circle[data-value="3"] .semi-circle:first-child span {
    -webkit-transform: rotate(190.8deg);
    -moz-transform: rotate(190.8deg);
    -ms-transform: rotate(190.8deg);
    -o-transform: rotate(190.8deg);
    transform: rotate(190.8deg);
}

.progression-circle[data-value="4"] .semi-circle:first-child span {
    -webkit-transform: rotate(194.4deg);
    -moz-transform: rotate(194.4deg);
    -ms-transform: rotate(194.4deg);
    -o-transform: rotate(194.4deg);
    transform: rotate(194.4deg);
}

.progression-circle[data-value="5"] .semi-circle:first-child span {
    -webkit-transform: rotate(198deg);
    -moz-transform: rotate(198deg);
    -ms-transform: rotate(198deg);
    -o-transform: rotate(198deg);
    transform: rotate(198deg);
}

.progression-circle[data-value="6"] .semi-circle:first-child span {
    -webkit-transform: rotate(201.6deg);
    -moz-transform: rotate(201.6deg);
    -ms-transform: rotate(201.6deg);
    -o-transform: rotate(201.6deg);
    transform: rotate(201.6deg);
}

.progression-circle[data-value="7"] .semi-circle:first-child span {
    -webkit-transform: rotate(205.2deg);
    -moz-transform: rotate(205.2deg);
    -ms-transform: rotate(205.2deg);
    -o-transform: rotate(205.2deg);
    transform: rotate(205.2deg);
}

.progression-circle[data-value="8"] .semi-circle:first-child span {
    -webkit-transform: rotate(208.8deg);
    -moz-transform: rotate(208.8deg);
    -ms-transform: rotate(208.8deg);
    -o-transform: rotate(208.8deg);
    transform: rotate(208.8deg);
}

.progression-circle[data-value="9"] .semi-circle:first-child span {
    -webkit-transform: rotate(212.4deg);
    -moz-transform: rotate(212.4deg);
    -ms-transform: rotate(212.4deg);
    -o-transform: rotate(212.4deg);
    transform: rotate(212.4deg);
}

.progression-circle[data-value="10"] .semi-circle:first-child span {
    -webkit-transform: rotate(216deg);
    -moz-transform: rotate(216deg);
    -ms-transform: rotate(216deg);
    -o-transform: rotate(216deg);
    transform: rotate(216deg);
}

.progression-circle[data-value="11"] .semi-circle:first-child span {
    -webkit-transform: rotate(219.6deg);
    -moz-transform: rotate(219.6deg);
    -ms-transform: rotate(219.6deg);
    -o-transform: rotate(219.6deg);
    transform: rotate(219.6deg);
}

.progression-circle[data-value="12"] .semi-circle:first-child span {
    -webkit-transform: rotate(223.2deg);
    -moz-transform: rotate(223.2deg);
    -ms-transform: rotate(223.2deg);
    -o-transform: rotate(223.2deg);
    transform: rotate(223.2deg);
}

.progression-circle[data-value="13"] .semi-circle:first-child span {
    -webkit-transform: rotate(226.8deg);
    -moz-transform: rotate(226.8deg);
    -ms-transform: rotate(226.8deg);
    -o-transform: rotate(226.8deg);
    transform: rotate(226.8deg);
}

.progression-circle[data-value="14"] .semi-circle:first-child span {
    -webkit-transform: rotate(230.4deg);
    -moz-transform: rotate(230.4deg);
    -ms-transform: rotate(230.4deg);
    -o-transform: rotate(230.4deg);
    transform: rotate(230.4deg);
}

.progression-circle[data-value="15"] .semi-circle:first-child span {
    -webkit-transform: rotate(234deg);
    -moz-transform: rotate(234deg);
    -ms-transform: rotate(234deg);
    -o-transform: rotate(234deg);
    transform: rotate(234deg);
}

.progression-circle[data-value="16"] .semi-circle:first-child span {
    -webkit-transform: rotate(237.6deg);
    -moz-transform: rotate(237.6deg);
    -ms-transform: rotate(237.6deg);
    -o-transform: rotate(237.6deg);
    transform: rotate(237.6deg);
}

.progression-circle[data-value="17"] .semi-circle:first-child span {
    -webkit-transform: rotate(241.2deg);
    -moz-transform: rotate(241.2deg);
    -ms-transform: rotate(241.2deg);
    -o-transform: rotate(241.2deg);
    transform: rotate(241.2deg);
}

.progression-circle[data-value="18"] .semi-circle:first-child span {
    -webkit-transform: rotate(244.8deg);
    -moz-transform: rotate(244.8deg);
    -ms-transform: rotate(244.8deg);
    -o-transform: rotate(244.8deg);
    transform: rotate(244.8deg);
}

.progression-circle[data-value="19"] .semi-circle:first-child span {
    -webkit-transform: rotate(248.4deg);
    -moz-transform: rotate(248.4deg);
    -ms-transform: rotate(248.4deg);
    -o-transform: rotate(248.4deg);
    transform: rotate(248.4deg);
}

.progression-circle[data-value="20"] .semi-circle:first-child span {
    -webkit-transform: rotate(252deg);
    -moz-transform: rotate(252deg);
    -ms-transform: rotate(252deg);
    -o-transform: rotate(252deg);
    transform: rotate(252deg);
}

.progression-circle[data-value="21"] .semi-circle:first-child span {
    -webkit-transform: rotate(255.6deg);
    -moz-transform: rotate(255.6deg);
    -ms-transform: rotate(255.6deg);
    -o-transform: rotate(255.6deg);
    transform: rotate(255.6deg);
}

.progression-circle[data-value="22"] .semi-circle:first-child span {
    -webkit-transform: rotate(259.2deg);
    -moz-transform: rotate(259.2deg);
    -ms-transform: rotate(259.2deg);
    -o-transform: rotate(259.2deg);
    transform: rotate(259.2deg);
}

.progression-circle[data-value="23"] .semi-circle:first-child span {
    -webkit-transform: rotate(262.8deg);
    -moz-transform: rotate(262.8deg);
    -ms-transform: rotate(262.8deg);
    -o-transform: rotate(262.8deg);
    transform: rotate(262.8deg);
}

.progression-circle[data-value="24"] .semi-circle:first-child span {
    -webkit-transform: rotate(266.4deg);
    -moz-transform: rotate(266.4deg);
    -ms-transform: rotate(266.4deg);
    -o-transform: rotate(266.4deg);
    transform: rotate(266.4deg);
}

.progression-circle[data-value="25"] .semi-circle:first-child span {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
}

.progression-circle[data-value="26"] .semi-circle:first-child span {
    -webkit-transform: rotate(273.6deg);
    -moz-transform: rotate(273.6deg);
    -ms-transform: rotate(273.6deg);
    -o-transform: rotate(273.6deg);
    transform: rotate(273.6deg);
}

.progression-circle[data-value="27"] .semi-circle:first-child span {
    -webkit-transform: rotate(277.2deg);
    -moz-transform: rotate(277.2deg);
    -ms-transform: rotate(277.2deg);
    -o-transform: rotate(277.2deg);
    transform: rotate(277.2deg);
}

.progression-circle[data-value="28"] .semi-circle:first-child span {
    -webkit-transform: rotate(280.8deg);
    -moz-transform: rotate(280.8deg);
    -ms-transform: rotate(280.8deg);
    -o-transform: rotate(280.8deg);
    transform: rotate(280.8deg);
}

.progression-circle[data-value="29"] .semi-circle:first-child span {
    -webkit-transform: rotate(284.4deg);
    -moz-transform: rotate(284.4deg);
    -ms-transform: rotate(284.4deg);
    -o-transform: rotate(284.4deg);
    transform: rotate(284.4deg);
}

.progression-circle[data-value="30"] .semi-circle:first-child span {
    -webkit-transform: rotate(288deg);
    -moz-transform: rotate(288deg);
    -ms-transform: rotate(288deg);
    -o-transform: rotate(288deg);
    transform: rotate(288deg);
}

.progression-circle[data-value="31"] .semi-circle:first-child span {
    -webkit-transform: rotate(291.6deg);
    -moz-transform: rotate(291.6deg);
    -ms-transform: rotate(291.6deg);
    -o-transform: rotate(291.6deg);
    transform: rotate(291.6deg);
}

.progression-circle[data-value="32"] .semi-circle:first-child span {
    -webkit-transform: rotate(295.2deg);
    -moz-transform: rotate(295.2deg);
    -ms-transform: rotate(295.2deg);
    -o-transform: rotate(295.2deg);
    transform: rotate(295.2deg);
}

.progression-circle[data-value="33"] .semi-circle:first-child span {
    -webkit-transform: rotate(298.8deg);
    -moz-transform: rotate(298.8deg);
    -ms-transform: rotate(298.8deg);
    -o-transform: rotate(298.8deg);
    transform: rotate(298.8deg);
}

.progression-circle[data-value="34"] .semi-circle:first-child span {
    -webkit-transform: rotate(302.4deg);
    -moz-transform: rotate(302.4deg);
    -ms-transform: rotate(302.4deg);
    -o-transform: rotate(302.4deg);
    transform: rotate(302.4deg);
}

.progression-circle[data-value="35"] .semi-circle:first-child span {
    -webkit-transform: rotate(306deg);
    -moz-transform: rotate(306deg);
    -ms-transform: rotate(306deg);
    -o-transform: rotate(306deg);
    transform: rotate(306deg);
}

.progression-circle[data-value="36"] .semi-circle:first-child span {
    -webkit-transform: rotate(309.6deg);
    -moz-transform: rotate(309.6deg);
    -ms-transform: rotate(309.6deg);
    -o-transform: rotate(309.6deg);
    transform: rotate(309.6deg);
}

.progression-circle[data-value="37"] .semi-circle:first-child span {
    -webkit-transform: rotate(313.2deg);
    -moz-transform: rotate(313.2deg);
    -ms-transform: rotate(313.2deg);
    -o-transform: rotate(313.2deg);
    transform: rotate(313.2deg);
}

.progression-circle[data-value="38"] .semi-circle:first-child span {
    -webkit-transform: rotate(316.8deg);
    -moz-transform: rotate(316.8deg);
    -ms-transform: rotate(316.8deg);
    -o-transform: rotate(316.8deg);
    transform: rotate(316.8deg);
}

.progression-circle[data-value="39"] .semi-circle:first-child span {
    -webkit-transform: rotate(320.4deg);
    -moz-transform: rotate(320.4deg);
    -ms-transform: rotate(320.4deg);
    -o-transform: rotate(320.4deg);
    transform: rotate(320.4deg);
}

.progression-circle[data-value="40"] .semi-circle:first-child span {
    -webkit-transform: rotate(324deg);
    -moz-transform: rotate(324deg);
    -ms-transform: rotate(324deg);
    -o-transform: rotate(324deg);
    transform: rotate(324deg);
}

.progression-circle[data-value="41"] .semi-circle:first-child span {
    -webkit-transform: rotate(327.6deg);
    -moz-transform: rotate(327.6deg);
    -ms-transform: rotate(327.6deg);
    -o-transform: rotate(327.6deg);
    transform: rotate(327.6deg);
}

.progression-circle[data-value="42"] .semi-circle:first-child span {
    -webkit-transform: rotate(331.2deg);
    -moz-transform: rotate(331.2deg);
    -ms-transform: rotate(331.2deg);
    -o-transform: rotate(331.2deg);
    transform: rotate(331.2deg);
}

.progression-circle[data-value="43"] .semi-circle:first-child span {
    -webkit-transform: rotate(334.8deg);
    -moz-transform: rotate(334.8deg);
    -ms-transform: rotate(334.8deg);
    -o-transform: rotate(334.8deg);
    transform: rotate(334.8deg);
}

.progression-circle[data-value="44"] .semi-circle:first-child span {
    -webkit-transform: rotate(338.4deg);
    -moz-transform: rotate(338.4deg);
    -ms-transform: rotate(338.4deg);
    -o-transform: rotate(338.4deg);
    transform: rotate(338.4deg);
}

.progression-circle[data-value="45"] .semi-circle:first-child span {
    -webkit-transform: rotate(342deg);
    -moz-transform: rotate(342deg);
    -ms-transform: rotate(342deg);
    -o-transform: rotate(342deg);
    transform: rotate(342deg);
}

.progression-circle[data-value="46"] .semi-circle:first-child span {
    -webkit-transform: rotate(345.6deg);
    -moz-transform: rotate(345.6deg);
    -ms-transform: rotate(345.6deg);
    -o-transform: rotate(345.6deg);
    transform: rotate(345.6deg);
}

.progression-circle[data-value="47"] .semi-circle:first-child span {
    -webkit-transform: rotate(349.2deg);
    -moz-transform: rotate(349.2deg);
    -ms-transform: rotate(349.2deg);
    -o-transform: rotate(349.2deg);
    transform: rotate(349.2deg);
}

.progression-circle[data-value="48"] .semi-circle:first-child span {
    -webkit-transform: rotate(352.8deg);
    -moz-transform: rotate(352.8deg);
    -ms-transform: rotate(352.8deg);
    -o-transform: rotate(352.8deg);
    transform: rotate(352.8deg);
}

.progression-circle[data-value="49"] .semi-circle:first-child span {
    -webkit-transform: rotate(356.4deg);
    -moz-transform: rotate(356.4deg);
    -ms-transform: rotate(356.4deg);
    -o-transform: rotate(356.4deg);
    transform: rotate(356.4deg);
}

.progression-circle[data-value="50"] .semi-circle:first-child span,
.progression-circle[data-value="51"] .semi-circle:first-child span,
.progression-circle[data-value="52"] .semi-circle:first-child span,
.progression-circle[data-value="53"] .semi-circle:first-child span,
.progression-circle[data-value="54"] .semi-circle:first-child span,
.progression-circle[data-value="55"] .semi-circle:first-child span,
.progression-circle[data-value="56"] .semi-circle:first-child span,
.progression-circle[data-value="57"] .semi-circle:first-child span,
.progression-circle[data-value="58"] .semi-circle:first-child span,
.progression-circle[data-value="59"] .semi-circle:first-child span,
.progression-circle[data-value="60"] .semi-circle:first-child span,
.progression-circle[data-value="61"] .semi-circle:first-child span,
.progression-circle[data-value="62"] .semi-circle:first-child span,
.progression-circle[data-value="63"] .semi-circle:first-child span,
.progression-circle[data-value="64"] .semi-circle:first-child span,
.progression-circle[data-value="65"] .semi-circle:first-child span,
.progression-circle[data-value="66"] .semi-circle:first-child span,
.progression-circle[data-value="67"] .semi-circle:first-child span,
.progression-circle[data-value="68"] .semi-circle:first-child span,
.progression-circle[data-value="69"] .semi-circle:first-child span,
.progression-circle[data-value="70"] .semi-circle:first-child span,
.progression-circle[data-value="71"] .semi-circle:first-child span,
.progression-circle[data-value="72"] .semi-circle:first-child span,
.progression-circle[data-value="73"] .semi-circle:first-child span,
.progression-circle[data-value="74"] .semi-circle:first-child span,
.progression-circle[data-value="75"] .semi-circle:first-child span,
.progression-circle[data-value="76"] .semi-circle:first-child span,
.progression-circle[data-value="77"] .semi-circle:first-child span,
.progression-circle[data-value="78"] .semi-circle:first-child span,
.progression-circle[data-value="79"] .semi-circle:first-child span,
.progression-circle[data-value="80"] .semi-circle:first-child span,
.progression-circle[data-value="81"] .semi-circle:first-child span,
.progression-circle[data-value="82"] .semi-circle:first-child span,
.progression-circle[data-value="83"] .semi-circle:first-child span,
.progression-circle[data-value="84"] .semi-circle:first-child span,
.progression-circle[data-value="85"] .semi-circle:first-child span,
.progression-circle[data-value="86"] .semi-circle:first-child span,
.progression-circle[data-value="87"] .semi-circle:first-child span,
.progression-circle[data-value="88"] .semi-circle:first-child span,
.progression-circle[data-value="89"] .semi-circle:first-child span,
.progression-circle[data-value="90"] .semi-circle:first-child span,
.progression-circle[data-value="91"] .semi-circle:first-child span,
.progression-circle[data-value="92"] .semi-circle:first-child span,
.progression-circle[data-value="93"] .semi-circle:first-child span,
.progression-circle[data-value="94"] .semi-circle:first-child span,
.progression-circle[data-value="95"] .semi-circle:first-child span,
.progression-circle[data-value="96"] .semi-circle:first-child span,
.progression-circle[data-value="97"] .semi-circle:first-child span,
.progression-circle[data-value="98"] .semi-circle:first-child span,
.progression-circle[data-value="99"] .semi-circle:first-child span,
.progression-circle[data-value="100"] .semi-circle:first-child span {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}

.progression-circle[data-value="51"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(363.6deg);
    -moz-transform: rotate(363.6deg);
    -ms-transform: rotate(363.6deg);
    -o-transform: rotate(363.6deg);
    transform: rotate(363.6deg);
}

.progression-circle[data-value="52"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(367.2deg);
    -moz-transform: rotate(367.2deg);
    -ms-transform: rotate(367.2deg);
    -o-transform: rotate(367.2deg);
    transform: rotate(367.2deg);
}

.progression-circle[data-value="53"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(370.8deg);
    -moz-transform: rotate(370.8deg);
    -ms-transform: rotate(370.8deg);
    -o-transform: rotate(370.8deg);
    transform: rotate(370.8deg);
}

.progression-circle[data-value="54"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(374.4deg);
    -moz-transform: rotate(374.4deg);
    -ms-transform: rotate(374.4deg);
    -o-transform: rotate(374.4deg);
    transform: rotate(374.4deg);
}

.progression-circle[data-value="55"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(378deg);
    -moz-transform: rotate(378deg);
    -ms-transform: rotate(378deg);
    -o-transform: rotate(378deg);
    transform: rotate(378deg);
}

.progression-circle[data-value="56"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(381.6deg);
    -moz-transform: rotate(381.6deg);
    -ms-transform: rotate(381.6deg);
    -o-transform: rotate(381.6deg);
    transform: rotate(381.6deg);
}

.progression-circle[data-value="57"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(385.2deg);
    -moz-transform: rotate(385.2deg);
    -ms-transform: rotate(385.2deg);
    -o-transform: rotate(385.2deg);
    transform: rotate(385.2deg);
}

.progression-circle[data-value="58"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(388.8deg);
    -moz-transform: rotate(388.8deg);
    -ms-transform: rotate(388.8deg);
    -o-transform: rotate(388.8deg);
    transform: rotate(388.8deg);
}

.progression-circle[data-value="59"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(392.4deg);
    -moz-transform: rotate(392.4deg);
    -ms-transform: rotate(392.4deg);
    -o-transform: rotate(392.4deg);
    transform: rotate(392.4deg);
}

.progression-circle[data-value="60"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(396deg);
    -moz-transform: rotate(396deg);
    -ms-transform: rotate(396deg);
    -o-transform: rotate(396deg);
    transform: rotate(396deg);
}

.progression-circle[data-value="61"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(399.6deg);
    -moz-transform: rotate(399.6deg);
    -ms-transform: rotate(399.6deg);
    -o-transform: rotate(399.6deg);
    transform: rotate(399.6deg);
}

.progression-circle[data-value="62"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(403.2deg);
    -moz-transform: rotate(403.2deg);
    -ms-transform: rotate(403.2deg);
    -o-transform: rotate(403.2deg);
    transform: rotate(403.2deg);
}

.progression-circle[data-value="63"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(406.8deg);
    -moz-transform: rotate(406.8deg);
    -ms-transform: rotate(406.8deg);
    -o-transform: rotate(406.8deg);
    transform: rotate(406.8deg);
}

.progression-circle[data-value="64"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(410.4deg);
    -moz-transform: rotate(410.4deg);
    -ms-transform: rotate(410.4deg);
    -o-transform: rotate(410.4deg);
    transform: rotate(410.4deg);
}

.progression-circle[data-value="65"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(414deg);
    -moz-transform: rotate(414deg);
    -ms-transform: rotate(414deg);
    -o-transform: rotate(414deg);
    transform: rotate(414deg);
}

.progression-circle[data-value="66"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(417.6deg);
    -moz-transform: rotate(417.6deg);
    -ms-transform: rotate(417.6deg);
    -o-transform: rotate(417.6deg);
    transform: rotate(417.6deg);
}

.progression-circle[data-value="67"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(421.2deg);
    -moz-transform: rotate(421.2deg);
    -ms-transform: rotate(421.2deg);
    -o-transform: rotate(421.2deg);
    transform: rotate(421.2deg);
}

.progression-circle[data-value="68"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(424.8deg);
    -moz-transform: rotate(424.8deg);
    -ms-transform: rotate(424.8deg);
    -o-transform: rotate(424.8deg);
    transform: rotate(424.8deg);
}

.progression-circle[data-value="69"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(428.4deg);
    -moz-transform: rotate(428.4deg);
    -ms-transform: rotate(428.4deg);
    -o-transform: rotate(428.4deg);
    transform: rotate(428.4deg);
}

.progression-circle[data-value="70"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(432deg);
    -moz-transform: rotate(432deg);
    -ms-transform: rotate(432deg);
    -o-transform: rotate(432deg);
    transform: rotate(432deg);
}

.progression-circle[data-value="71"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(435.6deg);
    -moz-transform: rotate(435.6deg);
    -ms-transform: rotate(435.6deg);
    -o-transform: rotate(435.6deg);
    transform: rotate(435.6deg);
}

.progression-circle[data-value="72"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(439.2deg);
    -moz-transform: rotate(439.2deg);
    -ms-transform: rotate(439.2deg);
    -o-transform: rotate(439.2deg);
    transform: rotate(439.2deg);
}

.progression-circle[data-value="73"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(442.8deg);
    -moz-transform: rotate(442.8deg);
    -ms-transform: rotate(442.8deg);
    -o-transform: rotate(442.8deg);
    transform: rotate(442.8deg);
}

.progression-circle[data-value="74"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(446.4deg);
    -moz-transform: rotate(446.4deg);
    -ms-transform: rotate(446.4deg);
    -o-transform: rotate(446.4deg);
    transform: rotate(446.4deg);
}

.progression-circle[data-value="75"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(450deg);
    -moz-transform: rotate(450deg);
    -ms-transform: rotate(450deg);
    -o-transform: rotate(450deg);
    transform: rotate(450deg);
}

.progression-circle[data-value="76"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(453.6deg);
    -moz-transform: rotate(453.6deg);
    -ms-transform: rotate(453.6deg);
    -o-transform: rotate(453.6deg);
    transform: rotate(453.6deg);
}

.progression-circle[data-value="77"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(457.2deg);
    -moz-transform: rotate(457.2deg);
    -ms-transform: rotate(457.2deg);
    -o-transform: rotate(457.2deg);
    transform: rotate(457.2deg);
}

.progression-circle[data-value="78"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(460.8deg);
    -moz-transform: rotate(460.8deg);
    -ms-transform: rotate(460.8deg);
    -o-transform: rotate(460.8deg);
    transform: rotate(460.8deg);
}

.progression-circle[data-value="79"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(464.4deg);
    -moz-transform: rotate(464.4deg);
    -ms-transform: rotate(464.4deg);
    -o-transform: rotate(464.4deg);
    transform: rotate(464.4deg);
}

.progression-circle[data-value="80"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(468deg);
    -moz-transform: rotate(468deg);
    -ms-transform: rotate(468deg);
    -o-transform: rotate(468deg);
    transform: rotate(468deg);
}

.progression-circle[data-value="81"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(471.6deg);
    -moz-transform: rotate(471.6deg);
    -ms-transform: rotate(471.6deg);
    -o-transform: rotate(471.6deg);
    transform: rotate(471.6deg);
}

.progression-circle[data-value="82"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(475.2deg);
    -moz-transform: rotate(475.2deg);
    -ms-transform: rotate(475.2deg);
    -o-transform: rotate(475.2deg);
    transform: rotate(475.2deg);
}

.progression-circle[data-value="83"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(478.8deg);
    -moz-transform: rotate(478.8deg);
    -ms-transform: rotate(478.8deg);
    -o-transform: rotate(478.8deg);
    transform: rotate(478.8deg);
}

.progression-circle[data-value="84"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(482.4deg);
    -moz-transform: rotate(482.4deg);
    -ms-transform: rotate(482.4deg);
    -o-transform: rotate(482.4deg);
    transform: rotate(482.4deg);
}

.progression-circle[data-value="85"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(486deg);
    -moz-transform: rotate(486deg);
    -ms-transform: rotate(486deg);
    -o-transform: rotate(486deg);
    transform: rotate(486deg);
}

.progression-circle[data-value="86"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(489.6deg);
    -moz-transform: rotate(489.6deg);
    -ms-transform: rotate(489.6deg);
    -o-transform: rotate(489.6deg);
    transform: rotate(489.6deg);
}

.progression-circle[data-value="87"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(493.2deg);
    -moz-transform: rotate(493.2deg);
    -ms-transform: rotate(493.2deg);
    -o-transform: rotate(493.2deg);
    transform: rotate(493.2deg);
}

.progression-circle[data-value="88"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(496.8deg);
    -moz-transform: rotate(496.8deg);
    -ms-transform: rotate(496.8deg);
    -o-transform: rotate(496.8deg);
    transform: rotate(496.8deg);
}

.progression-circle[data-value="89"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(500.4deg);
    -moz-transform: rotate(500.4deg);
    -ms-transform: rotate(500.4deg);
    -o-transform: rotate(500.4deg);
    transform: rotate(500.4deg);
}

.progression-circle[data-value="90"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(504deg);
    -moz-transform: rotate(504deg);
    -ms-transform: rotate(504deg);
    -o-transform: rotate(504deg);
    transform: rotate(504deg);
}

.progression-circle[data-value="91"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(507.6deg);
    -moz-transform: rotate(507.6deg);
    -ms-transform: rotate(507.6deg);
    -o-transform: rotate(507.6deg);
    transform: rotate(507.6deg);
}

.progression-circle[data-value="92"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(511.2deg);
    -moz-transform: rotate(511.2deg);
    -ms-transform: rotate(511.2deg);
    -o-transform: rotate(511.2deg);
    transform: rotate(511.2deg);
}

.progression-circle[data-value="93"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(514.8deg);
    -moz-transform: rotate(514.8deg);
    -ms-transform: rotate(514.8deg);
    -o-transform: rotate(514.8deg);
    transform: rotate(514.8deg);
}

.progression-circle[data-value="94"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(518.4deg);
    -moz-transform: rotate(518.4deg);
    -ms-transform: rotate(518.4deg);
    -o-transform: rotate(518.4deg);
    transform: rotate(518.4deg);
}

.progression-circle[data-value="95"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(522deg);
    -moz-transform: rotate(522deg);
    -ms-transform: rotate(522deg);
    -o-transform: rotate(522deg);
    transform: rotate(522deg);
}

.progression-circle[data-value="96"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(525.6deg);
    -moz-transform: rotate(525.6deg);
    -ms-transform: rotate(525.6deg);
    -o-transform: rotate(525.6deg);
    transform: rotate(525.6deg);
}

.progression-circle[data-value="97"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(529.2deg);
    -moz-transform: rotate(529.2deg);
    -ms-transform: rotate(529.2deg);
    -o-transform: rotate(529.2deg);
    transform: rotate(529.2deg);
}

.progression-circle[data-value="98"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(532.8deg);
    -moz-transform: rotate(532.8deg);
    -ms-transform: rotate(532.8deg);
    -o-transform: rotate(532.8deg);
    transform: rotate(532.8deg);
}

.progression-circle[data-value="99"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(536.4deg);
    -moz-transform: rotate(536.4deg);
    -ms-transform: rotate(536.4deg);
    -o-transform: rotate(536.4deg);
    transform: rotate(536.4deg);
}

.progression-circle[data-value="100"] .semi-circle + .semi-circle span {
    -webkit-transform: rotate(540deg);
    -moz-transform: rotate(540deg);
    -ms-transform: rotate(540deg);
    -o-transform: rotate(540deg);
    transform: rotate(540deg);
}

/* Gauges *******************/

.gauge-circle {
    display: inline-block;
    height: 48px;
    line-height: 48px;
    white-space: nowrap;
    text-align: left;
    position: relative;
}

    .gauge-circle.large {
        transform: scale(1.4);
    }

        .gauge-circle.large.filled {
            margin-top: 10px;
            height: 52px;
        }

    .gauge-circle.large-120 {
        height: 120px;
    }

    .gauge-circle .gauge-value {
        display: inline-block;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        text-align: center;
        font-size: 14px;
        line-height: 48px;
        padding: 0;
        border-width: 2px;
        border-style: solid;
    }

    .gauge-circle.large-120 .gauge-value {
        display: flex;
        flex-direction: column;
        width: 120px;
        height: 120px;
        line-height: initial;
        border-style: dashed;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .gauge-circle.large-120 .gauge-value-number {
        display: block;
        margin-top: -10px;
        font-size: 14px;
        font-weight: bold;
    }

    *::-ms-backdrop, .gauge-circle.large-120 .gauge-value-number { /* IE11 */
        margin-top: 20px;
        line-height: 16px;
    }

        .gauge-circle.large-120 .gauge-value-number span {
            font-size: 36px;
        }

.gauge-horizontal.simple-gauge {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    height: 6px;
    margin-top: 30px;
    border-radius: 4px;
}

    .gauge-horizontal.simple-gauge .gauge-value {
        display: block;
        width: 100%;
        position: absolute;
        bottom: 12px;
    }

        .gauge-horizontal.simple-gauge .gauge-value b {
            font-size: 16px;
        }

    .gauge-horizontal.simple-gauge .gauge-display {
        height: 6px;
        border-radius: 4px;
    }

.gauge-horizontal .gauge-value {
    position: absolute;
    display: flex;
}

.gauge-horizontal.simple-gauge.filled {
    height: 24px;
    margin-top: 0;
    border-radius: 12px;
    overflow: hidden;
}

    .gauge-horizontal.simple-gauge.filled .gauge-value {
        line-height: 20px;
        height: 24px;
        width: 100%;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        border-width: 2px;
        border-style: solid;
        z-index: 1;
        border-radius: 12px;
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
    }

        .gauge-horizontal.simple-gauge.filled .gauge-value b {
            font-size: 12px;
        }

    .gauge-horizontal.simple-gauge.filled .gauge-display {
        height: 24px;
        border-radius: 12px;
    }

.gauge-circle .gauge-progression {
    position: absolute;
    display: block;
    width: 52px;
    height: 52px;
    top: 0px;
    left: 0px;
}

.gauge-circle.large-120 .gauge-progression {
    width: 124px;
    height: 124px;
}

.gauge-circle .semi-circle span:before {
    border-width: 2px;
    border-style: solid;
}

.gauge-circle.filled.large {
    margin-bottom: 10px;
}

.gauge-circle.filled .semi-circle span:before {
    border-width: 30px;
}

.gauge-circle.large-120 .semi-circle span:before {
    border-width: 4px;
}

.gauge-circle.filled .gauge-value {
    font-size: 10px;
    position: relative;
    z-index: 1;
    font-weight: bold;
}

.gauge-circle.large-120 .progression-circle {
    overflow: visible;
}

    .gauge-circle.large-120 .progression-circle:before {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        position: absolute;
        top: 0;
        left: 50%;
        margin-top: -2px;
        margin-left: -2px;
        border-radius: 50%;
    }

    .gauge-circle.large-120 .progression-circle:after {
        content: '';
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        top: 0;
        left: 50%;
        box-sizing: border-box;
        margin-top: -4px;
        margin-left: 0;
        border-width: 3px;
        border-style: solid;
        border-radius: 50%;
        transform-origin: 0 66px;
        -webkit-transition: 500ms;
        -moz-transition: 500ms;
        -ms-transition: 500ms;
        -o-transition: 500ms;
        transition: 500ms;
        -webkit-transition-timing-function: linear;
        -moz-transition-timing-function: linear;
        -ms-transition-timing-function: linear;
        -o-transition-timing-function: linear;
    }

    .gauge-circle.large-120 .progression-circle[data-value="0"]:after {
        -webkit-transform: rotate(-3.6deg);
        -moz-transform: rotate(-3.6deg);
        -ms-transform: rotate(-3.6deg);
        -o-transform: rotate(-3.6deg);
        transform: rotate(-3.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="1"]:after {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="2"]:after {
        -webkit-transform: rotate(3.6deg);
        -moz-transform: rotate(3.6deg);
        -ms-transform: rotate(3.6deg);
        -o-transform: rotate(3.6deg);
        transform: rotate(3.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="3"]:after {
        -webkit-transform: rotate(7.2deg);
        -moz-transform: rotate(7.2deg);
        -ms-transform: rotate(7.2deg);
        -o-transform: rotate(7.2deg);
        transform: rotate(7.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="4"]:after {
        -webkit-transform: rotate(10.8deg);
        -moz-transform: rotate(10.8deg);
        -ms-transform: rotate(10.8deg);
        -o-transform: rotate(10.8deg);
        transform: rotate(10.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="5"]:after {
        -webkit-transform: rotate(14.4deg);
        -moz-transform: rotate(14.4deg);
        -ms-transform: rotate(14.4deg);
        -o-transform: rotate(14.4deg);
        transform: rotate(14.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="6"]:after {
        -webkit-transform: rotate(18deg);
        -moz-transform: rotate(18deg);
        -ms-transform: rotate(18deg);
        -o-transform: rotate(18deg);
        transform: rotate(18deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="7"]:after {
        -webkit-transform: rotate(21.6deg);
        -moz-transform: rotate(21.6deg);
        -ms-transform: rotate(21.6deg);
        -o-transform: rotate(21.6deg);
        transform: rotate(21.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="8"]:after {
        -webkit-transform: rotate(25.2deg);
        -moz-transform: rotate(25.2deg);
        -ms-transform: rotate(25.2deg);
        -o-transform: rotate(25.2deg);
        transform: rotate(25.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="9"]:after {
        -webkit-transform: rotate(28.8deg);
        -moz-transform: rotate(28.8deg);
        -ms-transform: rotate(28.8deg);
        -o-transform: rotate(28.8deg);
        transform: rotate(28.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="10"]:after {
        -webkit-transform: rotate(32.4deg);
        -moz-transform: rotate(32.4deg);
        -ms-transform: rotate(32.4deg);
        -o-transform: rotate(32.4deg);
        transform: rotate(32.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="11"]:after {
        -webkit-transform: rotate(36deg);
        -moz-transform: rotate(36deg);
        -ms-transform: rotate(36deg);
        -o-transform: rotate(36deg);
        transform: rotate(36deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="12"]:after {
        -webkit-transform: rotate(39.6deg);
        -moz-transform: rotate(39.6deg);
        -ms-transform: rotate(39.6deg);
        -o-transform: rotate(39.6deg);
        transform: rotate(39.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="13"]:after {
        -webkit-transform: rotate(43.2deg);
        -moz-transform: rotate(43.2deg);
        -ms-transform: rotate(43.2deg);
        -o-transform: rotate(43.2deg);
        transform: rotate(43.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="14"]:after {
        -webkit-transform: rotate(46.8deg);
        -moz-transform: rotate(46.8deg);
        -ms-transform: rotate(46.8deg);
        -o-transform: rotate(46.8deg);
        transform: rotate(46.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="15"]:after {
        -webkit-transform: rotate(50.4deg);
        -moz-transform: rotate(50.4deg);
        -ms-transform: rotate(50.4deg);
        -o-transform: rotate(50.4deg);
        transform: rotate(50.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="16"]:after {
        -webkit-transform: rotate(54deg);
        -moz-transform: rotate(54deg);
        -ms-transform: rotate(54deg);
        -o-transform: rotate(54deg);
        transform: rotate(54deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="17"]:after {
        -webkit-transform: rotate(57.6deg);
        -moz-transform: rotate(57.6deg);
        -ms-transform: rotate(57.6deg);
        -o-transform: rotate(57.6deg);
        transform: rotate(57.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="18"]:after {
        -webkit-transform: rotate(61.2deg);
        -moz-transform: rotate(61.2deg);
        -ms-transform: rotate(61.2deg);
        -o-transform: rotate(61.2deg);
        transform: rotate(61.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="19"]:after {
        -webkit-transform: rotate(64.8deg);
        -moz-transform: rotate(64.8deg);
        -ms-transform: rotate(64.8deg);
        -o-transform: rotate(64.8deg);
        transform: rotate(64.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="20"]:after {
        -webkit-transform: rotate(68.4deg);
        -moz-transform: rotate(68.4deg);
        -ms-transform: rotate(68.4deg);
        -o-transform: rotate(68.4deg);
        transform: rotate(68.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="21"]:after {
        -webkit-transform: rotate(72deg);
        -moz-transform: rotate(72deg);
        -ms-transform: rotate(72deg);
        -o-transform: rotate(72deg);
        transform: rotate(72deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="22"]:after {
        -webkit-transform: rotate(75.6deg);
        -moz-transform: rotate(75.6deg);
        -ms-transform: rotate(75.6deg);
        -o-transform: rotate(75.6deg);
        transform: rotate(75.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="23"]:after {
        -webkit-transform: rotate(79.2deg);
        -moz-transform: rotate(79.2deg);
        -ms-transform: rotate(79.2deg);
        -o-transform: rotate(79.2deg);
        transform: rotate(79.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="24"]:after {
        -webkit-transform: rotate(82.8deg);
        -moz-transform: rotate(82.8deg);
        -ms-transform: rotate(82.8deg);
        -o-transform: rotate(82.8deg);
        transform: rotate(82.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="25"]:after {
        -webkit-transform: rotate(86.4deg);
        -moz-transform: rotate(86.4deg);
        -ms-transform: rotate(86.4deg);
        -o-transform: rotate(86.4deg);
        transform: rotate(86.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="26"]:after {
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="27"]:after {
        -webkit-transform: rotate(93.6deg);
        -moz-transform: rotate(93.6deg);
        -ms-transform: rotate(93.6deg);
        -o-transform: rotate(93.6deg);
        transform: rotate(93.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="28"]:after {
        -webkit-transform: rotate(97.2deg);
        -moz-transform: rotate(97.2deg);
        -ms-transform: rotate(97.2deg);
        -o-transform: rotate(97.2deg);
        transform: rotate(97.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="29"]:after {
        -webkit-transform: rotate(100.8deg);
        -moz-transform: rotate(100.8deg);
        -ms-transform: rotate(100.8deg);
        -o-transform: rotate(100.8deg);
        transform: rotate(100.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="30"]:after {
        -webkit-transform: rotate(104.4deg);
        -moz-transform: rotate(104.4deg);
        -ms-transform: rotate(104.4deg);
        -o-transform: rotate(104.4deg);
        transform: rotate(104.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="31"]:after {
        -webkit-transform: rotate(108deg);
        -moz-transform: rotate(108deg);
        -ms-transform: rotate(108deg);
        -o-transform: rotate(108deg);
        transform: rotate(108deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="32"]:after {
        -webkit-transform: rotate(111.6deg);
        -moz-transform: rotate(111.6deg);
        -ms-transform: rotate(111.6deg);
        -o-transform: rotate(111.6deg);
        transform: rotate(111.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="33"]:after {
        -webkit-transform: rotate(115.2deg);
        -moz-transform: rotate(115.2deg);
        -ms-transform: rotate(115.2deg);
        -o-transform: rotate(115.2deg);
        transform: rotate(115.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="34"]:after {
        -webkit-transform: rotate(118.8deg);
        -moz-transform: rotate(118.8deg);
        -ms-transform: rotate(118.8deg);
        -o-transform: rotate(118.8deg);
        transform: rotate(118.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="35"]:after {
        -webkit-transform: rotate(122.4deg);
        -moz-transform: rotate(122.4deg);
        -ms-transform: rotate(122.4deg);
        -o-transform: rotate(122.4deg);
        transform: rotate(122.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="36"]:after {
        -webkit-transform: rotate(126deg);
        -moz-transform: rotate(126deg);
        -ms-transform: rotate(126deg);
        -o-transform: rotate(126deg);
        transform: rotate(126deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="37"]:after {
        -webkit-transform: rotate(129.6deg);
        -moz-transform: rotate(129.6deg);
        -ms-transform: rotate(129.6deg);
        -o-transform: rotate(129.6deg);
        transform: rotate(129.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="38"]:after {
        -webkit-transform: rotate(133.2deg);
        -moz-transform: rotate(133.2deg);
        -ms-transform: rotate(133.2deg);
        -o-transform: rotate(133.2deg);
        transform: rotate(133.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="39"]:after {
        -webkit-transform: rotate(136.8deg);
        -moz-transform: rotate(136.8deg);
        -ms-transform: rotate(136.8deg);
        -o-transform: rotate(136.8deg);
        transform: rotate(136.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="40"]:after {
        -webkit-transform: rotate(140.4deg);
        -moz-transform: rotate(140.4deg);
        -ms-transform: rotate(140.4deg);
        -o-transform: rotate(140.4deg);
        transform: rotate(140.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="41"]:after {
        -webkit-transform: rotate(144deg);
        -moz-transform: rotate(144deg);
        -ms-transform: rotate(144deg);
        -o-transform: rotate(144deg);
        transform: rotate(144deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="42"]:after {
        -webkit-transform: rotate(147.6deg);
        -moz-transform: rotate(147.6deg);
        -ms-transform: rotate(147.6deg);
        -o-transform: rotate(147.6deg);
        transform: rotate(147.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="43"]:after {
        -webkit-transform: rotate(151.2deg);
        -moz-transform: rotate(151.2deg);
        -ms-transform: rotate(151.2deg);
        -o-transform: rotate(151.2deg);
        transform: rotate(151.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="44"]:after {
        -webkit-transform: rotate(154.8deg);
        -moz-transform: rotate(154.8deg);
        -ms-transform: rotate(154.8deg);
        -o-transform: rotate(154.8deg);
        transform: rotate(154.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="45"]:after {
        -webkit-transform: rotate(158.4deg);
        -moz-transform: rotate(158.4deg);
        -ms-transform: rotate(158.4deg);
        -o-transform: rotate(158.4deg);
        transform: rotate(158.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="46"]:after {
        -webkit-transform: rotate(162deg);
        -moz-transform: rotate(162deg);
        -ms-transform: rotate(162deg);
        -o-transform: rotate(162deg);
        transform: rotate(162deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="47"]:after {
        -webkit-transform: rotate(165.6deg);
        -moz-transform: rotate(165.6deg);
        -ms-transform: rotate(165.6deg);
        -o-transform: rotate(165.6deg);
        transform: rotate(165.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="48"]:after {
        -webkit-transform: rotate(169.2deg);
        -moz-transform: rotate(169.2deg);
        -ms-transform: rotate(169.2deg);
        -o-transform: rotate(169.2deg);
        transform: rotate(169.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="49"]:after {
        -webkit-transform: rotate(172.8deg);
        -moz-transform: rotate(172.8deg);
        -ms-transform: rotate(172.8deg);
        -o-transform: rotate(172.8deg);
        transform: rotate(172.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="50"]:after {
        -webkit-transform: rotate(176.4deg);
        -moz-transform: rotate(176.4deg);
        -ms-transform: rotate(176.4deg);
        -o-transform: rotate(176.4deg);
        transform: rotate(176.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="51"]:after {
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="52"]:after {
        -webkit-transform: rotate(183.6deg);
        -moz-transform: rotate(183.6deg);
        -ms-transform: rotate(183.6deg);
        -o-transform: rotate(183.6deg);
        transform: rotate(183.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="53"]:after {
        -webkit-transform: rotate(187.2deg);
        -moz-transform: rotate(187.2deg);
        -ms-transform: rotate(187.2deg);
        -o-transform: rotate(187.2deg);
        transform: rotate(187.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="54"]:after {
        -webkit-transform: rotate(190.8deg);
        -moz-transform: rotate(190.8deg);
        -ms-transform: rotate(190.8deg);
        -o-transform: rotate(190.8deg);
        transform: rotate(190.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="55"]:after {
        -webkit-transform: rotate(194.4deg);
        -moz-transform: rotate(194.4deg);
        -ms-transform: rotate(194.4deg);
        -o-transform: rotate(194.4deg);
        transform: rotate(194.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="56"]:after {
        -webkit-transform: rotate(198deg);
        -moz-transform: rotate(198deg);
        -ms-transform: rotate(198deg);
        -o-transform: rotate(198deg);
        transform: rotate(198deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="57"]:after {
        -webkit-transform: rotate(201.6deg);
        -moz-transform: rotate(201.6deg);
        -ms-transform: rotate(201.6deg);
        -o-transform: rotate(201.6deg);
        transform: rotate(201.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="58"]:after {
        -webkit-transform: rotate(205.2deg);
        -moz-transform: rotate(205.2deg);
        -ms-transform: rotate(205.2deg);
        -o-transform: rotate(205.2deg);
        transform: rotate(205.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="59"]:after {
        -webkit-transform: rotate(208.8deg);
        -moz-transform: rotate(208.8deg);
        -ms-transform: rotate(208.8deg);
        -o-transform: rotate(208.8deg);
        transform: rotate(208.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="60"]:after {
        -webkit-transform: rotate(212.4deg);
        -moz-transform: rotate(212.4deg);
        -ms-transform: rotate(212.4deg);
        -o-transform: rotate(212.4deg);
        transform: rotate(212.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="61"]:after {
        -webkit-transform: rotate(216deg);
        -moz-transform: rotate(216deg);
        -ms-transform: rotate(216deg);
        -o-transform: rotate(216deg);
        transform: rotate(216deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="62"]:after {
        -webkit-transform: rotate(219.6deg);
        -moz-transform: rotate(219.6deg);
        -ms-transform: rotate(219.6deg);
        -o-transform: rotate(219.6deg);
        transform: rotate(219.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="63"]:after {
        -webkit-transform: rotate(223.2deg);
        -moz-transform: rotate(223.2deg);
        -ms-transform: rotate(223.2deg);
        -o-transform: rotate(223.2deg);
        transform: rotate(223.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="64"]:after {
        -webkit-transform: rotate(226.8deg);
        -moz-transform: rotate(226.8deg);
        -ms-transform: rotate(226.8deg);
        -o-transform: rotate(226.8deg);
        transform: rotate(226.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="65"]:after {
        -webkit-transform: rotate(230.4deg);
        -moz-transform: rotate(230.4deg);
        -ms-transform: rotate(230.4deg);
        -o-transform: rotate(230.4deg);
        transform: rotate(230.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="66"]:after {
        -webkit-transform: rotate(234deg);
        -moz-transform: rotate(234deg);
        -ms-transform: rotate(234deg);
        -o-transform: rotate(234deg);
        transform: rotate(234deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="67"]:after {
        -webkit-transform: rotate(237.6deg);
        -moz-transform: rotate(237.6deg);
        -ms-transform: rotate(237.6deg);
        -o-transform: rotate(237.6deg);
        transform: rotate(237.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="68"]:after {
        -webkit-transform: rotate(241.2deg);
        -moz-transform: rotate(241.2deg);
        -ms-transform: rotate(241.2deg);
        -o-transform: rotate(241.2deg);
        transform: rotate(241.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="69"]:after {
        -webkit-transform: rotate(244.8deg);
        -moz-transform: rotate(244.8deg);
        -ms-transform: rotate(244.8deg);
        -o-transform: rotate(244.8deg);
        transform: rotate(244.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="70"]:after {
        -webkit-transform: rotate(248.4deg);
        -moz-transform: rotate(248.4deg);
        -ms-transform: rotate(248.4deg);
        -o-transform: rotate(248.4deg);
        transform: rotate(248.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="71"]:after {
        -webkit-transform: rotate(252deg);
        -moz-transform: rotate(252deg);
        -ms-transform: rotate(252deg);
        -o-transform: rotate(252deg);
        transform: rotate(252deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="72"]:after {
        -webkit-transform: rotate(255.6deg);
        -moz-transform: rotate(255.6deg);
        -ms-transform: rotate(255.6deg);
        -o-transform: rotate(255.6deg);
        transform: rotate(255.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="73"]:after {
        -webkit-transform: rotate(259.2deg);
        -moz-transform: rotate(259.2deg);
        -ms-transform: rotate(259.2deg);
        -o-transform: rotate(259.2deg);
        transform: rotate(259.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="74"]:after {
        -webkit-transform: rotate(262.8deg);
        -moz-transform: rotate(262.8deg);
        -ms-transform: rotate(262.8deg);
        -o-transform: rotate(262.8deg);
        transform: rotate(262.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="75"]:after {
        -webkit-transform: rotate(266.4deg);
        -moz-transform: rotate(266.4deg);
        -ms-transform: rotate(266.4deg);
        -o-transform: rotate(266.4deg);
        transform: rotate(266.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="76"]:after {
        -webkit-transform: rotate(270deg);
        -moz-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
        -o-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="77"]:after {
        -webkit-transform: rotate(273.6deg);
        -moz-transform: rotate(273.6deg);
        -ms-transform: rotate(273.6deg);
        -o-transform: rotate(273.6deg);
        transform: rotate(273.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="78"]:after {
        -webkit-transform: rotate(277.2deg);
        -moz-transform: rotate(277.2deg);
        -ms-transform: rotate(277.2deg);
        -o-transform: rotate(277.2deg);
        transform: rotate(277.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="79"]:after {
        -webkit-transform: rotate(280.8deg);
        -moz-transform: rotate(280.8deg);
        -ms-transform: rotate(280.8deg);
        -o-transform: rotate(280.8deg);
        transform: rotate(280.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="80"]:after {
        -webkit-transform: rotate(284.4deg);
        -moz-transform: rotate(284.4deg);
        -ms-transform: rotate(284.4deg);
        -o-transform: rotate(284.4deg);
        transform: rotate(284.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="81"]:after {
        -webkit-transform: rotate(288deg);
        -moz-transform: rotate(288deg);
        -ms-transform: rotate(288deg);
        -o-transform: rotate(288deg);
        transform: rotate(288deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="82"]:after {
        -webkit-transform: rotate(291.6deg);
        -moz-transform: rotate(291.6deg);
        -ms-transform: rotate(291.6deg);
        -o-transform: rotate(291.6deg);
        transform: rotate(291.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="83"]:after {
        -webkit-transform: rotate(295.2deg);
        -moz-transform: rotate(295.2deg);
        -ms-transform: rotate(295.2deg);
        -o-transform: rotate(295.2deg);
        transform: rotate(295.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="84"]:after {
        -webkit-transform: rotate(298.8deg);
        -moz-transform: rotate(298.8deg);
        -ms-transform: rotate(298.8deg);
        -o-transform: rotate(298.8deg);
        transform: rotate(298.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="85"]:after {
        -webkit-transform: rotate(302.4deg);
        -moz-transform: rotate(302.4deg);
        -ms-transform: rotate(302.4deg);
        -o-transform: rotate(302.4deg);
        transform: rotate(302.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="86"]:after {
        -webkit-transform: rotate(306deg);
        -moz-transform: rotate(306deg);
        -ms-transform: rotate(306deg);
        -o-transform: rotate(306deg);
        transform: rotate(306deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="87"]:after {
        -webkit-transform: rotate(309.6deg);
        -moz-transform: rotate(309.6deg);
        -ms-transform: rotate(309.6deg);
        -o-transform: rotate(309.6deg);
        transform: rotate(309.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="88"]:after {
        -webkit-transform: rotate(313.2deg);
        -moz-transform: rotate(313.2deg);
        -ms-transform: rotate(313.2deg);
        -o-transform: rotate(313.2deg);
        transform: rotate(313.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="89"]:after {
        -webkit-transform: rotate(316.8deg);
        -moz-transform: rotate(316.8deg);
        -ms-transform: rotate(316.8deg);
        -o-transform: rotate(316.8deg);
        transform: rotate(316.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="90"]:after {
        -webkit-transform: rotate(320.4deg);
        -moz-transform: rotate(320.4deg);
        -ms-transform: rotate(320.4deg);
        -o-transform: rotate(320.4deg);
        transform: rotate(320.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="91"]:after {
        -webkit-transform: rotate(324deg);
        -moz-transform: rotate(324deg);
        -ms-transform: rotate(324deg);
        -o-transform: rotate(324deg);
        transform: rotate(324deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="92"]:after {
        -webkit-transform: rotate(327.6deg);
        -moz-transform: rotate(327.6deg);
        -ms-transform: rotate(327.6deg);
        -o-transform: rotate(327.6deg);
        transform: rotate(327.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="93"]:after {
        -webkit-transform: rotate(331.2deg);
        -moz-transform: rotate(331.2deg);
        -ms-transform: rotate(331.2deg);
        -o-transform: rotate(331.2deg);
        transform: rotate(331.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="94"]:after {
        -webkit-transform: rotate(334.8deg);
        -moz-transform: rotate(334.8deg);
        -ms-transform: rotate(334.8deg);
        -o-transform: rotate(334.8deg);
        transform: rotate(334.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="95"]:after {
        -webkit-transform: rotate(338.4deg);
        -moz-transform: rotate(338.4deg);
        -ms-transform: rotate(338.4deg);
        -o-transform: rotate(338.4deg);
        transform: rotate(338.4deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="96"]:after {
        -webkit-transform: rotate(342deg);
        -moz-transform: rotate(342deg);
        -ms-transform: rotate(342deg);
        -o-transform: rotate(342deg);
        transform: rotate(342deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="97"]:after {
        -webkit-transform: rotate(345.6deg);
        -moz-transform: rotate(345.6deg);
        -ms-transform: rotate(345.6deg);
        -o-transform: rotate(345.6deg);
        transform: rotate(345.6deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="98"]:after {
        -webkit-transform: rotate(349.2deg);
        -moz-transform: rotate(349.2deg);
        -ms-transform: rotate(349.2deg);
        -o-transform: rotate(349.2deg);
        transform: rotate(349.2deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="99"]:after {
        -webkit-transform: rotate(352.8deg);
        -moz-transform: rotate(352.8deg);
        -ms-transform: rotate(352.8deg);
        -o-transform: rotate(352.8deg);
        transform: rotate(352.8deg);
    }

    .gauge-circle.large-120 .progression-circle[data-value="100"]:after {
        -webkit-transform: rotate(356.4deg);
        -moz-transform: rotate(356.4deg);
        -ms-transform: rotate(356.4deg);
        -o-transform: rotate(356.4deg);
        transform: rotate(356.4deg);
    }


.gauge-horizontal {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
}

    .gauge-horizontal .gauge-display {
        display: block;
        height: 3px;
    }

/* Award Badge *******************/

ul.award-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.award-list li {
    display: flex;
    padding: 25px 15px;
    flex-direction: column;
    align-items: center;
    background-color: #f3f7fa;
}

    .award-list li:hover {
        cursor: pointer;
    }

        .award-list li:hover a {
            text-decoration: none;
            transform: scale(1.02);
        }

.award-badge {
    width: 140px;
    height: 140px;
    background-image: url(../image/award-badge.png);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .award-badge.received {
        background-image: url(../image/award-badge-received.png);
    }

    .award-badge .award-badge-icon {
        font-size: 40px;
    }

    .award-badge .gauge-circle-container {
        position: absolute;
        left: 50%;
        width: 106px;
        height: 106px;
        transform: translate(-53px, 0);
    }

    .award-badge .gauge-circle {
        height: 106px;
        line-height: 100px;
    }

    .award-badge .gauge-value {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .award-badge .gauge-progression {
        width: 108px;
        height: 108px;
        top: -1px;
        left: -1px;
    }

    .award-badge .gauge-circle .gauge-value {
        border-width: 3px;
    }

    .award-badge.received .semi-circle {
        display: none;
    }

    .award-badge .progression-circle .semi-circle + .semi-circle {
        left: 1px;
    }

    .award-badge .semi-circle span:before {
        border-width: 4px;
    }

.award-badge-name {
    margin-top: 10px;
    font-weight: bold;
    text-align: center;
}

.award-popup {
    width: 460px;
    height: 540px;
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 768px) {

    ul.award-list {
        grid-template-columns: repeat(auto-fill, 140px);
        grid-gap: 15px;
    }

    .award-list li {
        padding: 10px;
    }

    .award-list .award-badge {
        transform: scale(0.8);
    }

    .award-badge-name {
        margin-top: 0;
    }

    .award-popup {
        width: 100%;
        height: 100%;
    }
}

/* Toolbar *******************/

.toolbar ul {
    display: inline-block;
    height: 48px;
    font-size: 0;
    white-space: nowrap;
    vertical-align: top;
}

    .toolbar ul li {
        display: inline-block;
        height: 48px;
        box-sizing: border-box;
        padding: 8px 0;
    }

    .toolbar ul li {
        margin-left: 10px;
    }

    .toolbar ul a .fa {
        display: inline-block;
        width: 32px;
        text-align: center;
        line-height: 32px;
        font-size: 20px;
        padding-right: 0;
        border-radius: 50%;
    }

.toolbar .toolbar-toggle-btn + ul {
    max-width: 0;
    width: auto;
    overflow: hidden;
    -webkit-transition: max-width 1s; /* Safari */
    transition: max-width 1s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
}

.toolbar .toolbar-toggle-btn.open + ul {
    max-width: 400px;
}

/* Badge *******************/

.badge-container {
    display: inline-block;
    position: relative;
    padding: 0;
    white-space: nowrap;
}

    .badge-container i {
        padding-right: 0;
    }

.badge {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    z-index: 1;
    position: relative;
    padding: 0 2px;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
}

.badge-container .badge {
    top: -2px;
    margin-left: -4px;
}

/* Ranking Badge *******************/

.ranking-badge-container {
    display: flex;
    justify-content: center;
}

    .ranking-badge-container li + li {
        margin-left: 10px;
    }

/* Keyword *******************/

.keyword {
    display: inline-block;
    width: auto;
    max-width: inherit;
    margin-bottom: 10px;
}

    .keyword > span,
    .keyword input:not(disabled) + span {
        display: inline-block;
        padding: 2px 14px;
        border-width: 2px;
        border-style: solid;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 400;
        box-sizing: border-box;
    }

        .keyword input,
        .keyword input:not(disabled) + span:before {
            display: none;
        }

            .keyword input:not(disabled) + span {
                cursor: pointer;
            }

/* Skill *******************/

.skill-list {
    list-style-type: none;
}

    .skill-list li {
        padding: 5px 10px;
        display: inline-block;
        border-radius: 20px;
        margin-right: 10px;
    }

/* indicator *******************/

.indicator {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    display: inline-block;
}

    .indicator + .indicator {
        margin-left: 30px;
    }

    .indicator i {
        font-size: 20px;
    }

        .indicator i + span {
            padding-left: 4px;
        }

@media (max-width: 768px) {

    .indicator {
        font-size: 18px;
    }

        .indicator + .indicator {
            margin-left: 15px;
        }

        .indicator i {
            font-size: 24px;
        }
}

/* Banner *******************/

.banner-container {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    overflow: hidden;
}

.banner {
    display: block;
    width: 200px;
    position: relative;
    left: -100px;
    top: 0;
    padding: 26px 0 10px;
    transform-origin: 100px 0;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    text-align: center;
    font-size: 10px;
    line-height: 12px;
}

.list-mode .banner {
    padding: 22px 0 6px;
}

.banner.small {
    padding: 15px 0 5px;
}

@media (max-width: 768px) {

    .banner {
        padding: 22px 0 6px;
    }
}

/* Icon Container *******************/

.icon-container {
    width: 64px;
    min-width: 64px;
    line-height: 64px;
    height: 64px;
    font-size: 24px;
    text-align: center;
    margin-right: 20px;
}

/* Star Ranking *******************/

.star-ranking {
    display: inline-block;
    font-size: 0;
}

    .star-ranking:not(.disabled) {
        cursor: pointer;
    }

    .star-ranking i {
        font-size: 18px;
        padding-right: 5px;
    }

    .star-ranking.small i,
    .star-ranking-container.small i {
        font-size: 12px;
        padding-right: 4px;
    }

.star-ranking-container.large .legend {
    font-size: 24px;
    margin-right: 15px;
}

.star-ranking-container.large .star-ranking i {
    font-size: 28px;
    padding-right: 8px;
}

/* Radio Ranking *******************/

.radio-ranking-container {
    display: inline-block;
    position: relative;
}

label + .radio-ranking-container {
    margin-top: 10px;
}

.radio-ranking {
    display: flex;
    flex-direction: row-reverse;
    position: relative;
}

    .radio-ranking input[type=radio] {
        display: none;
    }

    .radio-ranking label {
        width: auto;
        max-width: inherit;
    }

    .radio-ranking input[type=radio] + label {
        display: inline-flex;
        width: 30px;
        min-height: 24px;
        box-sizing: border-box;
        cursor: pointer;
        padding-right: 6px;
    }

        .radio-ranking input[type=radio] + label:before,
        .radio-ranking input[type=radio] + label ~ label:before {
            content: '';
            display: block;
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            position: relative;
            left: 0;
            top: 50%;
            border-width: 2px;
            border-style: solid;
            margin-top: -12px;
            border-radius: 50%;
        }

    .radio-ranking input[type=radio]:checked + label:after,
    .radio-ranking input[type=radio]:checked + label ~ label:after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        box-sizing: border-box;
        position: relative;
        margin-left: -16px;
        top: 50%;
        margin-top: -4px;
        border-radius: 50%;
    }

    .radio-ranking input[type=radio] + label span {
        position: absolute;
        left: 100%;
        transform: translate(0px, -50%);
        top: 50%;
        margin-left: 5px;
        display: none;
        white-space: nowrap;
    }

    .radio-ranking input[type=radio]:checked + label span {
        display: inline-block;
    }

    .radio-ranking:hover input[type=radio] + label span {
        display: none;
    }

    .radio-ranking input[type=radio]:hover + label span {
        display: inline-block !important;
    }

/* Counter *******************/

.counter {
    display: inline-block;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

    .counter span {
        display: block;
        font-size: 24px;
        font-weight: 500;
        letter-spacing: 1px;
    }

@media (max-width: 768px) {

    .counter.inline-phone {
        display: inline-flex;
        align-items: center;
    }

        .counter.inline-phone span {
            display: inline-block;
            margin-left: 10px;
        }
}

/* Stats Graphic *******************/

.stats-graphic {
    display: block;
    width: 400px;
    height: 360px;
    position: relative;
    margin: 0 auto 40px;
}

    .stats-graphic.small {
        width: 360px;
        height: 200px;
        transform: scale(0.5);
    }

    .stats-graphic .cover,
    .stats-graphic .stats-graphic-section {
        position: absolute;
        display: block;
        width: 160px;
        height: 160px;
        left: 50%;
        top: 50%;
        margin-left: -80px;
        margin-top: -80px;
    }

    .stats-graphic .third-circle {
        content: '';
        display: block;
        width: 200px;
        height: 400px;
        position: absolute;
        top: 50%;
        left: 50%;
        overflow: hidden;
        margin-top: -200px;
        -webkit-transform-origin: center left;
        -moz-transform-origin: center left;
        -ms-transform-origin: center left;
        -o-transform-origin: center left;
        transform-origin: center left;
    }

        .stats-graphic .third-circle span {
            content: '';
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            -webkit-transform-origin: center left;
            -moz-transform-origin: center left;
            -ms-transform-origin: center left;
            -o-transform-origin: center left;
            transform-origin: center left;
            -webkit-transform: rotate(300deg);
            -moz-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            -o-transform: rotate(300deg);
            transform: rotate(300deg);
        }

    .stats-graphic .stats-graphic-section-2 .third-circle {
        -webkit-transform: rotate(240deg);
        -moz-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
        -o-transform: rotate(240deg);
        transform: rotate(240deg);
    }

    .stats-graphic .stats-graphic-section-3 .third-circle {
        -webkit-transform: rotate(120deg);
        -moz-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
        -o-transform: rotate(120deg);
        transform: rotate(120deg);
    }

    .stats-graphic .third-circle span:before {
        content: '';
        display: block;
        width: 160px;
        height: 160px;
        position: absolute;
        top: 50%;
        left: -80px;
        border-radius: 50%;
        margin-top: -80px;
        opacity: 0.7;
        box-shadow: 0 0 0 0 transparent;
        -webkit-transition: 500ms;
        -moz-transition: 500ms;
        -ms-transition: 500ms;
        -o-transition: 500ms;
        transition: 500ms;
    }

    .stats-graphic .cover {
        z-index: 1;
        border-radius: 50%;
        text-align: center;
        line-height: 160px;
        font-size: 60px;
        box-shadow: 0 0 24px 0 rgba(51, 106, 152, 0.54);
    }

.stats-text-section {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 250px;
}

.stats-text-section-1 {
    margin-left: 160px;
    margin-top: -110px;
}

.stats-text-section-2 {
    right: 380px;
    margin-top: -70px;
    text-align: right;
    left: auto;
}

.stats-text-section-3 {
    margin-top: 185px;
    margin-left: 0;
}

.stats-graphic [data-value="0"] + .stats-text-section-1,
.stats-graphic [data-value="1"] + .stats-text-section-1,
.stats-graphic [data-value="2"] + .stats-text-section-1,
.stats-graphic [data-value="3"] + .stats-text-section-1,
.stats-graphic [data-value="4"] + .stats-text-section-1,
.stats-graphic [data-value="5"] + .stats-text-section-1 {
    margin-left: 130px;
    margin-top: -100px;
}

.stats-graphic [data-value="0"] + .stats-text-section-2,
.stats-graphic [data-value="1"] + .stats-text-section-2,
.stats-graphic [data-value="2"] + .stats-text-section-2,
.stats-graphic [data-value="3"] + .stats-text-section-2,
.stats-graphic [data-value="4"] + .stats-text-section-2,
.stats-graphic [data-value="5"] + .stats-text-section-2 {
    right: 345px;
    margin-top: -70px;
}

.stats-graphic [data-value="0"] + .stats-text-section-3,
.stats-graphic [data-value="1"] + .stats-text-section-3,
.stats-graphic [data-value="2"] + .stats-text-section-3,
.stats-graphic [data-value="3"] + .stats-text-section-3,
.stats-graphic [data-value="4"] + .stats-text-section-3,
.stats-graphic [data-value="5"] + .stats-text-section-3 {
    margin-top: 150px;
    margin-left: 0;
}

.stats-text-section i {
    float: left;
    line-height: 28px;
    font-size: 14px;
}

.stats-text-section-2 i {
    float: right;
    margin-left: 0;
}

.stats-text-section span {
    display: block;
    line-height: 24px;
}

.stats-text-section .value {
    display: inline-block;
    font-size: 48px;
    font-weight: 300;
    position: absolute;
    left: 10px;
    width: 60px;
    text-align: center;
}

    .stats-text-section .value + span {
        font-size: 18px;
        padding-left: 70px;
    }

.stats-text-section-2 .value {
    left: auto;
    right: 10px;
}

    .stats-text-section-2 .value + span {
        padding-left: 0;
        padding-right: 70px;
    }

@media (max-width: 768px) {

    .stats-graphic {
        margin-bottom: 180px;
    }

        .stats-graphic.small {
            width: 400px;
            height: 360px;
            transform: scale(1);
            margin-bottom: 220px;
        }

    .stats-text-section {
        margin: 0 !important;
        text-align: left;
        width: 100%;
        position: relative;
        top: 380px !important;
        left: 0 !important;
        display: flex;
        align-items: center;
        line-height: 48px;
    }

        .stats-text-section i {
            float: none;
            padding-right: 10px;
            position: relative;
            bottom: -5px;
        }

        .stats-text-section .value {
            left: 0;
            right: auto;
            position: static;
            width: auto;
            text-align: left;
            padding-right: 15px;
            line-height: inherit;
        }

            .stats-text-section .value + span {
                padding-left: 0;
                padding-right: 0;
                position: relative;
                bottom: -5px;
            }
}

@media (max-width: 480px) {

    .stats-graphic {
        margin-top: 20px;
        margin-bottom: 170px;
        width: 300px;
        height: 300px;
    }

    .stats-text-section {
        top: 320px !important;
    }
}

/* Category Course And Community Preview *******************/

.preview {
    display: block;
    position: relative;
}

    .preview > a {
        display: block;
        width: 100%;
    }

    .preview:hover,
    .preview:hover a {
        text-decoration: none;
    }

    .preview .inner > p {
        font-weight: 400;
    }

    .preview.category-preview::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

/* Course Choices *******************/

.course-choices {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-gap: 25px;
    justify-items: center;
}

*::-ms-backdrop, .course-choices { /* IE11 */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.course-choice {
    width: 220px;
}

*::-ms-backdrop, .course-choice { /* IE11 */
    margin: 10px;
}

    .course-choice label {
        cursor: pointer;
    }

    .course-choice .img-container:before {
        content: '';
        border-width: 1px;
        border-style: solid;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .course-choice img {
        display: block;
    }

    .course-choice .course-choice-content {
        padding: 10px 10px 10px 44px;
        position: relative;
    }

    .course-choice input[type=checkbox] {
        display: none;
    }

        .course-choice input[type=checkbox] ~ .course-choice-content i {
            content: '';
            display: block;
            width: 24px;
            height: 24px;
            box-sizing: border-box;
            position: absolute;
            left: 10px;
            top: 12px;
            border-width: 2px;
            border-style: solid;
            text-align: center;
            line-height: 20px;
        }

/* Card Mode *******************/

.card-mode {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-gap: 25px;
    align-items: stretch;
    list-style-type: none;
}

*::-ms-backdrop, .card-mode { /* IE11 */
    display: flex !important;
    justify-content: space-around !important;
    flex-wrap: wrap;
}

    *::-ms-backdrop, .card-mode li, /* IE11 */
    *::-ms-backdrop, .card-mode > a {
        width: 280px;
        min-width: 280px;
    }

    *::-ms-backdrop, .card-mode .course-preview { /* IE11 */
        max-width: 300px;
        margin-bottom: 20px;
    }

    .card-mode.small {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }

        .card-mode.small .course-preview {
            max-width: 220px;
        }

    .card-mode .gauge-horizontal .gauge-value {
        right: 12px;
        bottom: 20px;
    }

    *::-ms-backdrop, .card-mode .category-preview { /* IE11 */
        margin-bottom: 20px;
    }

    .card-mode .preview.category-preview img,
    .card-mode .preview.course-preview img,
    .card-mode .preview.community-preview img {
        display: block;
        width: 100%;
    }

    .card-mode .preview.category-preview .inner {
        position: absolute;
        bottom: 24px;
        left: 60px;
        right: 24px;
    }

    .card-mode .preview.category-preview .fa {
        position: absolute;
        right: 100%;
        width: 40px;
        font-size: 18px;
        text-align: right;
        padding-right: 20px;
    }

    .card-mode .preview.course-preview,
    .card-mode .preview.community-preview {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .card-mode .preview.default-course-preview {
        overflow: hidden;
        height: 100%;
    }

    *::-ms-backdrop, .card-mode .preview.default-course-preview { /* IE11 */
        height: auto;
    }

        .card-mode .preview.default-course-preview:hover .banner-container {
            display: none;
        }

        .card-mode .preview.default-course-preview .banner-container .banner {
            text-transform: uppercase;
            font-size: 12px;
            line-height: 14px;
        }

.preview.default-course-preview .banner-container .banner {
    border-radius: 0;
}

.card-mode .preview.default-course-preview > div.inner {
    padding: 20px;
}

.card-mode .preview.default-course-preview .card-preview-content .gauge-horizontal {
    position: relative;
    width: 100px;
    height: 5px;
}

.card-mode .preview.default-course-preview .card-preview-content .gauge-display {
    height: 5px;
}

.card-mode .preview.default-course-preview .card-preview-content .gauge-value,
.card-mode .preview.default-course-preview .list-preview-content {
    display: none;
}

.card-mode .preview.default-course-preview .metadata {
    align-items: center;
    justify-content: space-between;
}

.preview.default-course-preview .subject-type {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 13px;
}

    .preview.default-course-preview .subject-type i,
    .preview.default-course-preview .subject-type img {
        font-size: 18px;
        padding-right: 10px;
    }

    *::-ms-backdrop, .preview.default-course-preview .subject-type img { /* IE11 */
        width: auto;
    }

.card-mode .preview.default-course-preview .optional-action i {
    font-size: 24px;
    padding-right: 0;
}

.hearted i {
    display: block;
    position: relative;
}

    .hearted i span {
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

.hearted > i::before {
    font-size: 18px;
}

.hearted.selected span i {
    display: flex;
    align-items: center;
}

    .hearted.selected span i::before {
        font-size: 12px;
    }

.hearted:hover,
.hearted:hover i {
    text-decoration: none;
}

.preview.default-course-preview h3 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 0;
}

.card-mode .preview.default-course-preview h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    height: auto;
    line-height: 26px;
    max-height: 72px; /* 3 lines */
    margin-top: 10px;
    padding-bottom: 10px;
}

.preview.default-course-preview h3::before {
    display: none;
}

.preview.default-course-preview .other-data {
    display: -webkit-box;
    margin-top: 10px;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .preview.default-course-preview .other-data i {
        font-size: 14px;
        padding-right: 10px;
    }

    .preview.default-course-preview .other-data span:not(:last-child) {
        margin-right: 20px;
    }

.card-mode .preview.default-course-preview h3:empty {
    margin-top: 0;
}

.card-mode .preview.default-course-preview .card-preview-content .gauge-horizontal,
.card-mode .preview.default-course-preview .card-preview-content .gauge-display {
    border-radius: 12px;
    overflow: hidden;
    height: 8px;
}

.card-mode .preview.default-course-preview .subject-type {
    font-size: 14px;
}

.card-mode .preview.default-course-preview .hashtag {
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}

.card-mode .preview.course-preview .star-ranking-container {
    white-space: nowrap;
}

.card-mode .preview.course-preview .star-ranking-container {
    padding-left: 10px;
}

.card-mode .preview.course-preview .star-ranking {
    line-height: 12px;
}

.card-mode .preview.default-course-preview .other-data {
    font-size: 12px;
    font-weight: 600;
}

    .card-mode .preview.default-course-preview .other-data i {
        display: inline-flex;
        align-items: center;
    }

.card-mode .preview.default-course-preview .preview-hover {
    display: none;
}

.card-mode .preview.default-course-preview:hover .preview-hover {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

    .card-mode .preview.default-course-preview:hover .preview-hover p {
        line-height: 24px;
    }

    .card-mode .preview.default-course-preview:hover .preview-hover b i {
        padding-right: 10px;
    }

    .card-mode .preview.default-course-preview:hover .preview-hover .cta-container {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 0;
    }

    .card-mode .preview.default-course-preview:hover .preview-hover p,
    .card-mode .preview.default-course-preview:hover .preview-hover b,
    .card-mode .preview.default-course-preview:hover .preview-hover > div:not(.cta-container) {
        display: none;
    }

    .card-mode .preview.default-course-preview:hover .preview-hover .cta-container .cta-action {
        position: static;
        padding: 0;
    }

.card-mode .preview.course-preview .image-container,
.card-mode .preview.community-preview .image-container {
    width: 100%;
    position: relative;
}

.card-mode .preview.course-preview:hover .image-container::before,
.card-mode .preview.community-preview:hover .image-container::before,
.card-mode .preview.course-preview .counter-container,
.card-mode .preview.community-preview .counter-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.card-mode .preview.course-preview:hover .image-container::before,
.card-mode .preview.community-preview:hover .image-container::before {
    content: '';
    display: block;
}

.card-mode .preview.course-preview .counter-container,
.card-mode .preview.community-preview .counter-container {
    display: none;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    grid-gap: 5px;
    align-items: center;
    padding: 20px 40px;
}

.card-mode .preview.course-preview .image-container.stats .counter-container {
    padding: 20px 74px 44px 10px;
    align-items: flex-end;
}

.card-mode .preview.course-preview .gauge-circle-container {
    display: none;
}

.card-mode .preview.course-preview:hover .counter-container,
.card-mode .preview.community-preview:hover .counter-container {
    display: flex;
    display: grid;
}

*::-ms-backdrop, .card-mode .preview.course-preview:hover .counter-container { /* IE11 */
    justify-content: center;
}


.card-mode .preview.course-preview .cta-container,
.card-mode .preview.community-preview .cta-container {
    display: none;
}

.card-mode .preview.course-preview .cta-stats {
    display: block;
    position: absolute;
    right: 12px;
    bottom: 44px;
    z-index: 2;
    pointer-events: none;
    border-width: 1px;
    border-style: solid;
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 24px;
    border-radius: 100%;
    text-align: center;
    box-sizing: border-box;
}

.card-mode .preview.course-preview .cta-action,
.card-mode .preview.community-preview .cta-action {
    display: block;
    position: absolute;
    right: 12px;
    bottom: -24px;
    z-index: 2;
}

    .card-mode .preview.course-preview .cta-action span {
        display: none;
    }

.card-mode .preview.course-preview:hover .cta-container,
.card-mode .preview.community-preview:hover .cta-container {
    display: block;
}

.card-mode .preview.course-preview .inner,
.card-mode .preview.community-preview .inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.card-mode .preview.course-preview .inner {
    padding: 12px 24px 18px;
}

.card-mode .preview.community-preview .inner {
    padding: 12px 24px 0;
}

.card-mode .preview.course-preview .inner > span {
    display: inline-block;
}

.card-mode .preview.course-preview .inner > .course-categories {
    display: none;
}

.card-mode .preview.course-preview .inner > p,
.card-mode .preview.community-preview .inner > p {
    display: inline-block;
    margin-top: 12px;
    margin-bottom: 12px;
}

.card-mode .preview.course-preview .inner > h5,
.card-mode .preview.community-preview .inner > h5,
.card-mode .preview.course-preview .inner > span,
.card-mode .preview.community-preview .inner > span {
    padding-right: 48px;
}

.card-mode .preview.course-preview .inner > span,
.card-mode .preview.community-preview .inner > span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 100%;
    box-sizing: border-box;
}

.card-mode .preview.course-preview p,
.card-mode .preview.community-preview p {
    height: 54px;
    height: calc(18px * 3); /* 3 Lines */
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 18px;
}

.card-mode .preview.community-preview .users-container {
    display: grid;
    grid-template-columns: repeat(6, 16.6667%);
    padding: 0 24px 18px;
    grid-gap: 4px 0;
    width: 100%;
    box-sizing: border-box;
}

    .card-mode .preview.community-preview .users-container > a,
    .card-mode .preview.community-preview .users-container > span,
    .card-mode .preview.community-preview .users-container .more {
        display: flex;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

    *::-ms-backdrop, .card-mode .preview.community-preview .users-container > span {
        display: inline-block;
    }

    *::-ms-backdrop, .card-mode .preview.community-preview .users-container .more {
        display: inline-block;
        width: 36px;
        height: 36px;
    }

        .card-mode .preview.community-preview .users-container .more > span {
            margin: auto;
            box-sizing: border-box;
            border-style: solid;
            border-width: 2px;
            font-size: 12px;
            font-weight: 500;
            line-height: 100%;
            align-items: center;
            justify-content: center;
        }

.card-mode .preview.default-course-preview .add-button-container {
    position: absolute;
    top: 30px;
    right: 0;
}

    .card-mode .preview.default-course-preview .add-button-container .cta-container {
        display: block;
    }

@media (max-width: 1024px) {

    .card-mode.small {
        grid-template-columns: repeat(auto-fill, 220px);
    }

        .card-mode.small .preview.course-preview .inner {
            padding: 12px;
        }

    .preview.default-course-preview .other-data span:not(:last-child) {
        margin-right: 20px;
    }
}

@media (max-width: 768px) {

    .card-mode:not(.news-wall) {
        grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
        justify-content: center;
    }

    .card-mode.three-col-container {
        display: flex;
    }

        .card-mode.three-col-container .user-preview + .user-preview {
            margin-top: 20px;
        }

    .card-mode .preview.default-course-preview h3 {
        height: auto;
    }
}

/* List Mode *******************/

.list-mode .gauge-horizontal .gauge-value {
    right: 12px;
    bottom: 12px;
}

.list-mode > li + li,
.list-mode > .preview + .preview {
    margin-top: 10px;
}

.list-mode .preview.category-preview {
    display: flex;
}

    .list-mode .preview.category-preview img,
    .list-mode .preview.category-preview::before {
        display: block;
        width: 100px;
    }

    .list-mode .preview.category-preview img {
        max-width: inherit;
    }

    .list-mode .preview.category-preview::before {
        right: auto;
    }

    .list-mode .preview.category-preview .inner {
        padding: 10px 20px;
        overflow: hidden;
    }

    .list-mode .preview.category-preview .fa {
        position: absolute;
        width: 100px;
        text-align: center;
        left: 0;
        font-size: 18px;
        padding-top: 20px;
    }

.list-mode .preview.course-preview {
    display: flex;
}

    .list-mode .preview.course-preview p,
    .list-mode .preview.course-preview .gauge-horizontal,
    .list-mode .preview.course-preview .counter-container,
    .list-mode .preview.course-preview .cta-stats {
        display: none;
    }

    .list-mode .preview.course-preview img,
    .list-mode .preview.course-preview::before {
        display: block;
        width: 64px;
        height: 64px;
        max-width: inherit;
    }

    .list-mode .preview.course-preview::before {
        right: auto;
    }

    .list-mode .preview.course-preview .cta-container {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        width: 25%;
        padding-right: 20px;
        box-sizing: border-box;
    }

    .list-mode .preview.course-preview .gauge-circle-container {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list-mode .preview.course-preview .inner {
        width: calc(75% - 164px);
        padding: 10px 20px;
        position: relative;
    }

    .list-mode .preview.course-preview.progression-preview .inner {
        padding: 0 20px 0 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .list-mode .preview.course-preview .inner .star-ranking-container {
        position: absolute;
        width: 100px;
        right: -100px;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

.list-mode .preview .inner h5,
.list-mode .preview .inner span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    white-space: nowrap;
    max-width: 100%;
}

.list-mode .preview.default-course-preview {
    border-radius: 6px;
    overflow: hidden;
}

.card-mode .preview.default-course-preview.hoverless:hover .image-container:before,
.card-mode .preview.default-course-preview.hoverless:hover .preview-hover {
    display: none;
}

.card-mode .preview.default-course-preview.hoverless:hover .banner-container {
    display: block;
}

.list-mode .preview.default-course-preview .banner-container {
    top: 12px;
    left: 12px;
    border-top-left-radius: 4px;
}

    .list-mode .preview.default-course-preview .banner-container .banner {
        text-transform: uppercase;
        font-size: 10px;
        line-height: 12px;
    }

.list-mode .preview.default-course-preview .image-container {
    position: relative;
    width: 128px;
    min-width: 128px;
    margin: 12px;
}

    .list-mode .preview.default-course-preview .image-container img {
        width: auto;
        height: auto;
        max-width: 100%;
        border-radius: 4px;
        overflow: hidden;
    }

.list-mode .preview.default-course-preview > div.inner {
    width: 100%;
    padding: 20px 24px 20px 10px;
}

.list-mode .preview.default-course-preview .inner span {
    display: inline;
    width: auto;
}

.list-mode .preview.default-course-preview .preview-hover {
    width: 100% !important;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

    .list-mode .preview.default-course-preview .preview-hover *,
    .list-mode .preview.default-course-preview .card-preview-content {
        display: none;
    }

.list-mode .preview.default-course-preview .list-preview-content {
    display: flex;
    align-items: center;
}

    .list-mode .preview.default-course-preview .list-preview-content .data-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

.list-mode .preview.default-course-preview .data-container .hashtag {
    padding-right: 20px;
    box-sizing: border-box;
}

.list-mode .preview.default-course-preview h3 {
    width: 100%;
    margin-top: 5px;
    padding-bottom: 5px;
}

.list-mode .preview.default-course-preview .data {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.list-mode .preview.course-preview.default-course-preview .metadata {
    display: flex;
    align-items: center;
    width: 100%;
}

.list-mode .preview.default-course-preview .other-data {
    margin-top: 0;
}

.list-mode .preview.default-course-preview .subject-type {
    display: inline-flex;
    margin-right: 20px;
}

    .list-mode .preview.default-course-preview .subject-type img {
        display: inline-block;
        width: auto !important;
        height: auto !important;
    }

.list-mode .preview.default-course-preview .inner .star-ranking-container {
    position: relative;
    right: 0;
    display: block;
}

.list-mode .preview.default-course-preview > div.inner .cta-container {
    width: 48px;
    display: flex;
    align-items: center;
    padding-right: 0;
    position: static;
    margin: 0 20px;
}

.list-mode .preview.default-course-preview > div.inner .cta-action {
    overflow: visible;
}

.list-mode .preview.default-course-preview > div.inner .optional-action {
    margin: 0 20px;
}

.list-mode .preview.default-course-preview .optional-action i {
    font-size: 24px;
    padding-right: 0;
}

.list-mode .preview.default-course-preview .add-button-container {
    width: 200px;
}

@media (max-width: 1024px) {

    .list-mode .preview.default-course-preview .data-container h3 {
        padding-right: 40px;
        box-sizing: border-box;
    }

    .list-mode .preview.course-preview .inner .star-ranking-container {
        width: auto;
        white-space: nowrap;
    }

    .list-mode .preview.default-course-preview > div.inner .cta-container,
    .list-mode .preview.default-course-preview > div.inner .add-button-container .cta-action span {
        display: none;
    }

    .list-mode .preview.default-course-preview > div.inner .optional-action {
        position: absolute;
        top: 20px;
        right: 0;
    }

    .list-mode .preview.default-course-preview > div.inner .add-button-container {
        width: auto;
        position: absolute;
        top: 10px;
        right: 10px;
    }

        .list-mode .preview.default-course-preview > div.inner .add-button-container .cta-container {
            display: block;
            margin: 0;
        }
}

@media (max-width: 768px) {

    .list-mode .preview.course-preview:not(.progression-preview) img,
    .list-mode .preview.course-preview:not(.progression-preview)::before {
        width: 48px;
        height: 48px;
    }

    .list-mode .preview.course-preview .cta-container {
        display: none;
    }

    .list-mode .preview.course-preview .inner,
    .list-mode .preview.course-preview.progression-preview .inner {
        width: calc(100% - 48px);
        display: flex;
        flex-wrap: wrap;
        padding: 12px;
    }

        .list-mode .preview.course-preview .inner h5 {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .list-mode .preview.course-preview .inner span {
            display: inline-block;
            width: calc(100% - 100px);
        }

        .list-mode .preview.course-preview .inner .subject-type {
            margin-right: 0;
        }

        .list-mode .preview.course-preview .inner .star-ranking-container {
            position: static;
            display: flex;
            display: inline-flex;
            text-align: right;
            justify-content: flex-end;
            align-items: center;
        }

    .list-mode .preview:not(.category-preview) .inner h5 {
        overflow: inherit;
        text-overflow: inherit;
        white-space: inherit;
    }

    .list-mode .preview .inner h5,
    .list-mode .preview .inner span {
        line-height: 18px;
    }

    .list-mode .preview.course-preview .gauge-circle-container {
        display: none;
    }

    .list-mode .preview.course-preview .gauge-horizontal {
        display: block;
    }

    .list-mode .preview.default-course-preview > div.inner {
        padding: 15px 24px 20px 10px;
    }

    .list-mode .preview.default-course-preview .list-preview-content {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .list-mode .preview.default-course-preview .banner-container {
        width: 48px;
        height: 48px;
    }

    .list-mode .preview.default-course-preview .banner {
        padding: 18px 0 5px;
    }

    .list-mode .preview.default-course-preview .image-container {
        width: 64px;
        min-width: 64px;
        max-width: 64px;
        height: 48px;
    }

        .list-mode .preview.default-course-preview .image-container img {
            width: 100%;
            height: 48px;
        }

    .list-mode .preview.default-course-preview .inner span {
        width: auto;
    }

    .list-mode .preview.default-course-preview .data-container {
        min-height: 52px;
    }

    .list-mode .preview.default-course-preview .data {
        margin-top: 5px;
        justify-content: flex-start;
    }

    .list-mode .preview.course-preview.default-course-preview .metadata {
        width: auto;
    }

    .list-mode .preview.default-course-preview .list-data-phone {
        width: calc(100% + 86px);
        margin-left: -86px;
        flex-direction: column;
    }
}

/* User Preview *******************/

.user-preview span {
    font-size: 14px;
    font-weight: 500;
}

.card-mode .user-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 20px 40px;
    font-weight: 300;
}

    .card-mode .user-preview h4 {
        margin-top: 10px;
    }

    .card-mode .user-preview .image-container img {
        display: inline-block;
        width: 84px;
        max-width: 84px;
        height: 84px;
        border-radius: 50%;
    }

    .card-mode .user-preview hr {
        width: 30px;
        border: none;
        height: 1px;
        margin: 20px 0;
    }

.list-mode {
    list-style-type: none;
}

    .list-mode .user-preview {
        display: flex;
        padding: 12px 24px 12px 12px;
        font-weight: 300;
        justify-content: space-between;
        align-items: stretch;
    }

        .list-mode .user-preview .image-container {
            margin-right: 12px;
        }

            .list-mode .user-preview .image-container img {
                display: inline-block;
                width: 64px;
                max-width: 64px;
                height: 64px;
                border-radius: 50%;
            }

        .list-mode .user-preview hr {
            display: none;
        }

        .list-mode .user-preview .profile-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

            .list-mode .user-preview .profile-container,
            .list-mode .user-preview .profile-container span,
            .list-mode .user-preview span {
                width: 100%;
                text-align: left;
            }

        .list-mode .user-preview span {
            width: 100%;
            text-align: center;
            align-self: center;
        }

@media (max-width: 768px) {

    .list-mode .user-preview {
        flex-wrap: wrap;
        min-height: 68px;
    }

        .list-mode .user-preview .image-container {
            display: block;
            position: absolute;
            left: 12px;
            top: 16px;
        }

            .list-mode .user-preview .image-container img {
                width: 36px;
                max-width: 36px;
                height: 36px;
            }

        .list-mode .user-preview .profile-container,
        .list-mode .user-preview > span {
            width: 100%;
            box-sizing: border-box;
            padding-left: 48px;
            text-align: left;
        }
}

/* Subject Preview *******************/

.subject-preview {
    display: flex;
}

.subject-highlights {
    width: 15%;
    max-width: 120px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 25px 20px;
    justify-content: space-between;
    box-sizing: border-box;
}

    .subject-highlights .category {
        font-size: 46px;
        margin-bottom: 20px;
    }

.subject-data {
    display: flex;
    padding: 25px;
    flex-wrap: wrap;
    align-items: center;
    width: 85%;
    box-sizing: border-box;
}

    .subject-data h5,
    .subject-data .indicator-container {
        width: 100%;
    }

    .subject-data h5 {
        margin-bottom: 10px;
    }

    .subject-data .image-container {
        display: inherit;
        margin-right: 20px;
    }

        .subject-data .image-container img {
            margin-right: 10px;
        }

    .subject-data .subject-author {
        display: inline-block;
        line-height: 36px;
    }

    .subject-data .keyword {
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .subject-data .indicator-container {
        white-space: nowrap;
        margin-top: 20px;
    }

@media (max-width: 768px) {

    .subject-highlights {
        padding: 20px 10px;
    }

        .subject-highlights .category {
            font-size: 36px;
        }

    .subject-data {
        padding: 20px 15px;
    }

        .subject-data .image-container {
            width: 100%;
            margin-right: 0;
            margin-bottom: 10px;
        }

            .subject-data .image-container span {
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
}

/* Lesson Preview *******************/

.lesson-preview-container {
    display: flex;
    flex-wrap: wrap;
}

    .lesson-preview-container > li:nth-child(n + 3) {
        margin-top: 15px;
    }

.lesson-preview .lesson-preview-content {
    width: calc(100% - 84px);
    padding-right: 20px;
    box-sizing: border-box;
}

    .lesson-preview .lesson-preview-content h4 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

@media (max-width: 768px) {

    .lesson-preview-container > li + li {
        margin-top: 15px;
    }
}

/* Accordion *******************/

.accordion {
    padding: 25px 50px;
    position: relative;
}

.accordion-simple > a {
    text-decoration: none;
}

    .accordion-simple > a i {
        font-size: 14px;
    }

.accordion-button {
    background-image: none;
    background-color: transparent;
    border: none;
    outline: none;
    position: absolute;
    top: 25px;
    left: 15px;
    cursor: pointer;
}

    .accordion-button .fa {
        display: block;
        width: 20px;
        min-width: 20px;
        height: 20px;
        line-height: 20px;
        box-sizing: border-box;
        font-size: 12px;
        border-style: solid;
        border-width: 1px;
        border-radius: 50%;
        text-align: center;
    }

.accordion-simple.active .fa-chevron-right,
.accordion.active .fa-chevron-right {
    display: none;
}

.accordion-simple:not(.active) .fa-chevron-down,
.accordion:not(.active) .fa-chevron-down,
.accordion-simple:not(.active) .accordion-panel,
.accordion:not(.active) .accordion-panel {
    display: none;
}

/* Comments *******************/

.comment-author {
    display: flex;
    flex-wrap: wrap;
}

    .comment-author h4 {
        margin-right: 10px;
    }

    .comment-author .author-status {
        margin-right: 20px;
    }

    .comment-author i {
        line-height: 24px;
    }

.comments > .comment-author {
    align-items: center;
    padding-bottom: 20px;
}

    .comments > .comment-author img {
        margin-right: 20px;
    }

.comment-list {
    display: block;
    width: 100%;
    margin-top: 20px;
}

.title-container + .comment-list {
    margin-top: 0;
}

.comment-list .comment {
    border-top-width: 2px;
    border-top-style: solid;
    margin-top: 10px;
    padding-top: 20px;
    padding-left: 58px;
    box-sizing: border-box;
}

.comment-list > .comment:last-child {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    padding-bottom: 10px;
}

.comment-list .comment-author {
    align-items: flex-start;
    padding-left: 0;
    box-sizing: border-box;
    position: relative;
}

    .comment-list .comment-author img {
        position: absolute;
        left: -58px;
    }

.comment-list .star-ranking-container {
    width: 100%;
    margin-left: 0;
}

.comment-list p {
    box-sizing: border-box;
    padding-bottom: 10px;
}

.comment-list ul {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.new-comment-block {
    padding: 20px;
    position: relative;
}

.comment-author + .new-comment-block::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    position: absolute;
    left: 20px;
    top: -10px;
}

.new-comment-block .star-ranking-container {
    margin-bottom: 10px;
}

.author-status {
    padding: 2px 6px;
}

@media (max-width: 768px) {

    .comments .comment-author img {
        margin-right: 10px;
    }

    .comment-list .comment {
        padding-left: 46px;
    }

    .comment-list .comment-author img {
        left: -46px;
    }

    .comment-list .comment-author h4 {
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
    }

    .comment-list .comment-author .col-container {
        width: 100%;
    }

        .comment-list .comment-author .col-container i {
            white-space: nowrap;
            margin-bottom: 5px;
        }

    .comment-list p {
        padding-top: 10px;
    }

    .comment-list ul {
        position: relative;
        left: -46px;
        width: calc(100% + 46px);
    }

    .comment-author + .new-comment-block::before {
        left: 8px;
    }
}

/* Tables *******************/

.table-container table {
    white-space: nowrap;
    border-collapse: collapse;
    width: 100%;
}

table.complex th,
table.complex td {
    padding: 18px 24px 12px 0;
}

table.simplified th,
table.simplified td {
    padding: 15px 24px 15px 0;
}

table.complex tbody tr:not(:first-child),
table.simplified tbody tr:not(:first-child) {
    border-top-width: 1px;
    border-top-style: solid;
}

table.complex thead th:not(.checkbox-container):first-child,
table.complex td:not(.checkbox-container):first-child {
    padding: 24px;
}

table.complex thead th.checkbox-container:first-child,
table.complex td.checkbox-container:first-child {
    padding: 24px 10px 24px 24px;
}

    table.complex thead th.checkbox-container:first-child .input-option-container,
    table.complex td.checkbox-container:first-child .input-option-container {
        display: block;
        height: 24px;
        width: 24px;
        margin-top: 4px;
    }

table.complex thead {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

table.complex tbody td:first-child {
    box-sizing: border-box;
    border-left-width: 3px;
    border-left-style: solid;
    font-size: 18px;
    font-family: Neuton;
    font-weight: Normal;
}

    table.complex tbody td:first-child a {
        text-decoration: none;
        cursor: pointer;
    }

table.complex tbody td:not(:first-child) {
    font-size: 12px;
}

    table.complex tbody td:not(:first-child).pending,
    table.complex tbody td:not(:first-child).valid,
    table.complex tbody td:not(:first-child).attention,
    table.complex tbody td:not(:first-child).error {
        font-weight: bold;
    }

table.simplified td {
    font-weight: normal;
}

    table.simplified td:first-child {
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
    }

.table-list {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;
}

    .table-list li {
        display: flex;
        position: relative;
        padding: 5px 20px;
        page-break-inside: avoid;
    }

    .table-list .header {
        padding: 10px 20px;
        background-color: transparent;
    }

    .table-list li:not(:first-child) {
        margin-top: 4px;
    }

.table-list-col {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 5px 0;
    position: relative;
}

    .table-list-col:not(:first-child) {
        padding-left: 10px;
    }

    .table-list-col:not(:last-child) {
        padding-right: 10px;
    }

.table-list .input-option-container input[type=checkbox] + span span:not(:empty),
.table-list .header .input-option-container input[type=checkbox] + span h4:not(:empty) {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 0;
    padding-left: 35px;
}

.table-list .input-option-container input[type=checkbox] + span img + span:not(:empty),
.table-list .input-option-container input[type=checkbox] + span img + a:not(:empty) {
    padding-left: 0;
}

.table-list .header .input-option-container input[type=checkbox] + span h4:not(:empty) {
    padding-top: 2px;
}

.table-list .input-option-container img {
    display: inline-block;
    margin-right: 10px;
}

.table-list .input-option-container span {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
}

.table-list-col > i {
    font-size: 24px;
    margin-right: 10px;
}

.table-list li.selected {
    position: relative;
}

    .table-list li.selected:before {
        content: '';
        display: block;
        width: 2px;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1;
    }

.table-list li.highlighted .table-list-col-chevron,
.table-list li.active .table-list-col-chevron {
    display: inline-block;
}

.table-list li.active {
    z-index: 2;
}

.table-list-col-chevron {
    display: none;
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: -5px;
}

.table-list-button {
    display: inline-block;
    font-size: 16px;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 50%;
    text-align: center;
}

.table-list-menu {
    display: none;
    width: 200px;
    position: absolute;
    right: 0;
    z-index: 1;
}

.table-list-button.active + .table-list-menu {
    display: block;
}

.table-list .table-list-menu {
    text-align: left;
    padding: 10px 0;
}

    .table-list .table-list-menu li {
        padding: 6px 12px;
        width: 100%;
        margin-top: 0 !important;
    }

        .table-list .table-list-menu li a {
            display: block;
            width: 100%;
            text-decoration: none;
            font-size: 14px;
            line-height: 14px;
        }

            .table-list .table-list-menu li a:hover {
                text-decoration: underline;
            }

@media screen and (max-width: 1024px) {

    .table-list .header {
        display: none;
    }

    .table-list li {
        width: 100%;
        padding: 0;
        flex-direction: column;
    }

        .table-list li:not(:first-child) {
            margin-top: 0;
        }

        .table-list li:nth-child(n + 3) {
            margin-top: 20px;
        }

    .table-list .table-list-col {
        width: 100% !important;
        padding: 10px;
        border-bottom-width: 2px;
        border-bottom-style: solid;
    }

    .table-list .table-list-mobile-col {
        width: 30%;
        min-width: 120px;
    }

    .table-list-col-chevron {
        right: 10px;
    }
}

@media screen and (max-width: 768px) {

    table.complex tbody td:first-child {
        font-size: 14px;
    }
}

/* Timeline Table *******************/

.timeline-table-accordion-button {
    border-top-width: 4px;
    border-bottom-width: 4px;
    border-top-style: solid;
    border-bottom-style: solid;
    padding: 20px 20px 20px 50px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    cursor: pointer;
}

    .timeline-table-accordion-button h5 {
        font-weight: bold;
    }

    .timeline-table-accordion-button .chevron-right,
    .timeline-table-accordion-button .chevron-down {
        position: absolute;
        top: 18px;
        left: 12px;
        font-size: 20px;
    }

    .timeline-table-accordion-button.active .chevron-right,
    .timeline-table-accordion-button:not(.active) .chevron-down {
        display: none;
    }

.timeline-table-wrapper {
    padding-left: 20px;
    border-top-width: 2px;
    border-top-style: solid;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    box-sizing: border-box;
}

.timeline-table-accordion-button + .timeline-table-wrapper {
    border-top: none;
    border-bottom: none;
}

.timeline-table-wrapper table {
    border-top-width: 2px;
    border-top-style: solid;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    position: relative;
    top: -2px;
    margin-bottom: -4px;
}

.timeline-table-accordion-button:not(.active) + .timeline-table-wrapper,
.timeline-table-accordion-button:not(.active) + .timeline-table {
    display: none;
}

.table-container .timeline-table tr {
    width: calc(100% - 20px);
}

.timeline-table tr:first-child > td {
    padding-top: 30px;
}

.timeline-table tr:last-child > td {
    padding-bottom: 30px;
}

.timeline-table tr td:first-child {
    border-left-width: 1px;
    border-left-style: solid;
}

.timeline-table td {
    padding: 15px 0 15px 30px;
    position: relative;
}

.timeline-table .indentation {
    margin-left: 50px;
    position: relative;
}


.timeline-table .status {
    position: absolute;
    left: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
}

.timeline-table .status-current::before {
    content: '';
    display: block;
    width: 1px;
    height: 21px;
    position: absolute;
    bottom: 18px;
    left: 7px;
    border-left-width: 1px;
    border-left-style: solid;
}

.timeline-table td .content {
    width: 100%;
    display: block;
    overflow: hidden;
    max-width: 100%;
}

.timeline-table td b {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-table td p {
    white-space: normal;
    font-weight: normal;
}

/* Popup *******************/

.popup-container {
    display: none;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
}

    .popup-container.visible {
        display: block;
        position: absolute;
    }

    *::-ms-backdrop, .popup-container.visible { /* IE11 */
        display: flex;
        align-items: center;
        justify-content: center;
    }

.popup-background {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: 1;
}

.popup {
    position: fixed;
    left: 4rem;
    top: 2rem;
    right: 4rem;
    bottom: 4rem;
    max-width: 960px;
    width: 100%;
    margin: auto;
    z-index: 2;
}

    .popup > .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 1;
        display: block;
        width: 21px;
        height: 21px;
        overflow: hidden;
    }

        .popup > .close-btn::before,
        .popup > .close-btn::after {
            content: '';
            display: block;
            position: absolute;
            width: 21px;
            height: 21px;
            box-sizing: border-box;
            transform: rotate(45deg);
        }

        .popup > .close-btn::before {
            border-right-style: solid;
            border-right-width: 1px;
            right: 7px;
            bottom: 7px;
        }

        .popup > .close-btn::after {
            border-bottom-style: solid;
            border-bottom-width: 1px;
            right: -7px;
            bottom: 7px;
        }

.popup-sidebar,
.popup-content {
    height: 100%;
    padding: 50px 20px 20px;
    box-sizing: border-box;
    position: relative;
}

    .popup-sidebar > .custom-scrollbar,
    .popup-content > .custom-scrollbar {
        max-height: 100%;
        padding: 0 20px 20px;
        box-sizing: border-box;
    }

    .popup-sidebar i {
        display: inline-block;
        width: 10px;
        padding-right: 4px;
    }

    .popup-sidebar ul ul {
        display: block;
        padding-left: 14px;
    }

    .popup-content h1 {
        text-align: center;
        margin-bottom: 20px;
    }

        .popup-content h1::before {
            left: 50%;
            margin-left: -24px;
        }

    .popup-content .cta-container a {
        margin-right: 20px;
    }

.popup.small {
    max-width: 600px;
    top: 6rem;
    bottom: 8rem;
    padding: 60px 40px 40px;
}

*::-ms-backdrop, .popup.small { /* IE11 */
    left: 50%;
    margin-left: -340px;
}

@media (max-width: 1024px) {

    *::-ms-backdrop, .popup { /* IE11 */
        left: 2rem;
        right: 2rem;
    }
}

@media (max-width: 768px) {

    body .popup,
    body .popup.small {
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        max-width: 100%;
        padding: 0;
        margin-left: auto;
    }

        body .popup.small .popup-content {
            padding: 50px 20px 20px;
        }

    .popup.visible-content .popup-sidebar,
    .popup:not(.visible-content) .popup-sidebar + .popup-content {
        display: none;
    }
}

/* Advanced Search *******************/

.advanced-search-container {
    position: relative;
}

.advanced-search {
    display: none;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    width: 100%;
    z-index: 1;
}

    .advanced-search.visible {
        display: block;
    }

/* Notification *******************/

.notification {
    display: flex;
    align-items: center;
    font-style: italic;
}

    .notification .notification-icon {
        margin-right: 20px;
    }

    .notification .cta-contextual {
        margin-left: 20px;
    }

/* Category Menu *******************/

.category-menu-container {
    display: inline-flex;
    position: relative;
}

.category-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    margin-top: 10px;
}

    .category-menu::before {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        position: absolute;
        top: -8px;
        left: 20px;
        z-index: 1;
    }

    .category-menu::after {
        content: '';
        display: block;
        width: 250px;
        height: 10px;
        position: absolute;
        top: -10px;
    }

    .category-menu ul {
        display: none;
        width: 250px;
        position: absolute;
        top: 0;
        padding: 10px 0;
        left: 100%;
    }

    .category-menu > ul {
        left: 0;
    }

    .category-menu-container:hover .category-menu,
    .category-menu-container.active .category-menu,
    .category-menu-container:hover .category-menu > ul,
    .category-menu-container.active .category-menu > ul,
    .category-menu li:hover > ul,
    .category-menu li.active > ul {
        display: block;
    }

    .category-menu li {
        display: flex;
        width: 100%;
        padding: 0 20px 0 15px;
        box-sizing: border-box;
        font-size: 14px;
        line-height: 32px;
    }

        .category-menu li a {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .category-menu li > i {
            position: absolute;
            line-height: 32px;
            right: 10px;
        }

@media (max-width: 768px) {

    .category-menu li:hover,
    .category-menu li.active {
        flex-wrap: wrap;
    }

        .category-menu li:hover > ul,
        .category-menu li.active > ul {
            position: relative;
            left: -15px;
            min-width: 250px;
            width: 250px;
        }
}

/**************************************************/
/* Navigation */
/**************************************************/

.main-container > section.inner,
.main-container .colored-row-container > section {
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Header *******************/

header {
    width: 100%;
    display: flex;
    min-height: 160px;
}

.header-content {
    width: calc(100% - 280px);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    white-space: nowrap;
}

    .header-content .help {
        display: none;
    }

header .logged-in-profile-container {
    display: flex;
    align-items: center;
    width: 280px;
    padding: 25px 80px 25px 30px;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
    flex-direction: column;
}

header .logged-out-profile-container {
    display: flex;
    width: 280px;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

    header .logged-out-profile-container .cta-contextual {
        position: relative;
        left: -10px;
    }

        header .logged-out-profile-container .cta-contextual + .cta-contextual {
            margin-left: 10px;
        }

header .logged-in-profile-container img {
    display: block;
}

header .logged-in-profile-container .profile-pic {
    display: block;
    max-width: 64px;
    margin: 0 auto;
    padding-bottom: 10px;
}

header .logged-in-profile {
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

    header .logged-in-profile > span {
        display: block;
        text-align: center;
        text-overflow: ellipsis;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
    }

    header .logged-in-profile > .name {
        font-size: 20px;
        font-weight: 300;
    }

    header .logged-in-profile > .score {
        font-size: 14px;
        font-weight: bold;
    }

header .logged-in-profile-container .profile-pic:hover ~ .logged-in-profile .nav-submenu,
header .logged-in-profile-container .logged-in-profile:hover .nav-submenu {
    display: block;
}

header .logged-in-profile-container .logged-in-profile:hover {
    cursor: pointer;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu {
    margin-top: -10px;
    text-transform: uppercase;
}

    header .logged-in-profile-container .logged-in-profile .nav-submenu .li-lang {
        line-height: 12px;
    }

    header .logged-in-profile-container .logged-in-profile .nav-submenu .flag-select {
        width: 100%;
        height: auto;
        line-height: 44px;
    }

header .flag-select .placeholder img {
    padding-top: 8px;
}

header .custom-select.flag-select i {
    top: 6px;
}

header .logged-in-profile-container .logged-in-profile .nav-submenu .flag-select .select-list {
    position: relative;
}

header .flag-select .select-list .placeholder {
    padding-bottom: 7px;
}

header .profile-reminders {
    position: absolute;
    top: 25px;
    right: 20px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

    header .profile-reminders a + a {
        margin-top: 15px;
    }

header .manager-logo-container {
    display: inline-block;
    padding: 20px 25px;
    position: absolute;
}

.header-search-block {
    transition: all 1s;
    top: 20px;
    right: 300px;
    border-radius: 5px;
    position: absolute;
    z-index: 10;
    min-width: 20%;
    background-color: #ffffff;
}

    .header-search-block .multiselect-input-auto-complete {
        padding-left: 10px;
    }

    .header-search-block .multiple-select-btn {
        bottom: 3px;
    }

.main-nav {
    display: flex;
    padding-top: 25px;
    line-height: 30px;
    align-self: flex-end;
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 280px;
    max-width: 1024px;
    width: 100%;
}

    .main-nav ul {
        display: flex;
        align-items: center;
        text-transform: uppercase;
        font-size: 16px;
        font-stretch: condensed;
        flex-wrap: wrap;
    }

        .main-nav ul a {
            font-weight: bold;
        }

        .main-nav ul > li {
            position: relative;
        }

    .main-nav a:hover {
        text-decoration: none;
    }

    .main-nav > ul > li + li {
        margin-left: 20px;
    }

    .main-nav > ul > li:hover .nav-submenu {
        display: block;
    }

    .main-nav a.selected .fa {
        position: relative;
    }

    .main-nav > ul > li > a.selected .fa:after {
        content: '';
        position: absolute;
        height: 4px;
        width: 40px;
        bottom: -25px;
        right: -44px;
    }

.side-nav-btn {
    display: flex;
    width: 84px;
    height: 48px;
    float: right;
    cursor: pointer;
    text-align: center;
    flex-direction: column;
    justify-content: center;
}

    .side-nav-btn .fa {
        font-size: 24px;
        padding-right: 0;
    }

    .side-nav-btn span {
        display: block;
    }

@media (max-width: 1600px) {

    .main-nav {
        width: auto;
        margin-left: 0;
    }
}

@media (max-width: 1280px) {

    header .manager-logo-container {
        position: static;
    }

    .main-nav {
        padding-left: 0;
    }

        .main-nav ul {
            font-size: 12px;
        }

        .main-nav > ul > li + li {
            margin-left: 10px;
        }
}

@media (max-width: 1024px) {

    header .manager-logo-container {
        padding: 10px;
        order: 2;
    }

    .manager-logo-container img {
        max-height: 60px;
    }

    .header-row {
        display: flex;
        width: auto;
        position: relative;
    }

    .header-search-block {
        top: auto;
        max-width: 240px;
    }

    .header-content {
        width: calc(100% - 260px);
    }


    header .logged-in-profile-container {
        width: 260px;
        padding: 25px;
    }

        header .logged-in-profile-container .profile-pic,
        header .logged-in-profile,
        header .logged-in-profile > span {
            cursor: auto;
        }

        header .logged-in-profile-container img {
            width: 48px;
            height: 48px;
            min-width: 48px;
            min-height: 48px;
        }

        header .logged-in-profile-container .profile-pic .badge-container {
            min-width: 48px;
        }

        header .logged-in-profile-container .profile-pic .badge {
            position: absolute;
            top: auto;
            bottom: -4px;
            margin-left: -10px;
            left: 48px;
        }

    header .logged-out-profile-container {
        width: 260px;
    }
}

@media (max-width: 768px) {

    header {
        min-height: auto;
    }

    .header-content {
        width: calc(100% - 80px);
    }

    header .manager-logo-container {
        padding: 0;
        margin: auto;
    }

        header .manager-logo-container img {
            max-height: 36px;
        }

    header .logged-in-profile-container {
        width: 80px;
        padding: 5px 10px;
        box-sizing: border-box;
    }

        header .logged-in-profile-container .profile-pic {
            font-size: 0;
            margin: 0 auto 0 5px;
            padding-bottom: 0;
        }

        header .logged-in-profile-container img {
            width: 36px;
            height: 36px;
            min-width: 36px;
            min-height: 36px;
            margin-bottom: 0;
        }

        header .logged-in-profile-container .profile-pic .badge {
            position: absolute;
            top: 2px;
            bottom: auto;
            margin-left: auto;
            left: 30px;
        }

    header .logged-out-profile-container {
        width: auto;
        padding: 0 20px;
    }

        header .logged-out-profile-container .cta-contextual {
            padding: 0;
            border: none;
        }

    .side-nav-btn {
        width: 48px;
        height: 48px;
        font-size: 10px;
    }

        .side-nav-btn .fa {
            font-size: 18px;
        }
}

/* Nav Submenu *******************/

header .nav-submenu {
    display: none;
    position: absolute;
    padding: 10px 0;
    min-width: 180px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
    white-space: nowrap;
    z-index: 10;
    margin-top: 8px;
    margin-left: -60px;
    left: 50%;
    top: 100%;
    font-size: 12px;
    line-height: 30px;
}

    header .nav-submenu::before {
        content: '';
        display: block;
        width: 100%;
        height: 8px;
        position: absolute;
        top: -8px;
    }

    header .nav-submenu::after {
        content: '';
        display: block;
        width: 0;
        height: 0;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        position: absolute;
        top: -8px;
        left: 50px;
    }

    header .nav-submenu > li a {
        padding: 5px 20px;
        display: block;
        text-align: left;
        text-decoration: none;
    }

/* Footer *******************/

footer {
    padding: 30px;
    font-size: 12px;
    line-height: 20px;
    display: flex;
    justify-content: space-between;
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: 4fr 3fr 230px;
}

*::-ms-backdrop, .footer-tagline { /* IE11 */
    max-width: 40%;
}

.freetext ul {
    marging: 15px;
}

footer .footer-logo-container,
footer .col h5 {
    height: 60px;
}

footer .footer-logo-container,
footer .footer-tagline {
    grid-column-start: 1;
    grid-column-end: 2;
}

footer .social-media-col {
    grid-column-start: 2;
    grid-column-end: 3;
}

footer .newsletter-col {
    grid-column-start: 3;
    grid-column-end: 4;
}

footer .social-media-list {
    display: block;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
    padding-left: 20px;
    box-sizing: border-box;
}

    footer .social-media-list li {
        display: block;
        width: 20px;
    }

    *::-ms-backdrop, footer .social-media-list li { /* IE11 */
        display: inline-block;
        width: 20px;
        margin-right: 5px;
    }

    footer .social-media-list i {
        font-size: 18px;
    }

@media (max-width: 1024px) {

    *::-ms-backdrop, .footer-tagline { /* IE11 */
        max-width: 25%;
    }
}


@media (max-width: 768px) {

    footer {
        flex-direction: column;
        grid-column-gap: 0;
        grid-row-gap: 40px;
        grid-template-columns: 1fr;
    }

    *::-ms-backdrop, .footer-tagline { /* IE11 */
        max-width: 100%;
    }

    *::-ms-backdrop, footer > div { /* IE11 */
        display: block;
        width: 100%;
    }

        *::-ms-backdrop, footer > div + div { /* IE11 */
            margin-top: 20px !important;
        }

    footer .footer-logo-container,
    footer .col h5 {
        height: inherit;
    }

    footer .col h5 {
        margin-bottom: 20px;
    }

    footer .footer-logo-container,
    footer .footer-tagline,
    footer .col {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    footer .footer-tagline {
        grid-row: 4;
    }
}

/* Side Nav *******************/

#sidebar-nav-container {
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
}

.open-side-menu #sidebar-nav-container {
    opacity: 1;
    pointer-events: inherit;
}

#sidebar-nav-container:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

#sidebar-nav-container .sidebar-nav {
    width: 60%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1001;
    padding-top: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translate(-100%, 0);
    transition: 200ms;
}

.open-side-menu #sidebar-nav-container .sidebar-nav {
    transform: translate(0, 0);
}

#sidebar-nav-container .sidebar-header {
    margin-bottom: 16px;
    padding: 0 0 10px 20px;
}

    #sidebar-nav-container .sidebar-header a {
        display: inline-block;
    }

    #sidebar-nav-container .sidebar-header .fa {
        font-size: 14px;
        padding-right: 0;
    }

    #sidebar-nav-container .sidebar-header .close-btn {
        background-color: transparent !important;
        display: inline-block;
        padding: 0;
        width: 24px;
        height: 24px;
        line-height: 24px;
        border-radius: 50%;
        float: right;
        margin-right: 20px;
        margin-top: 5px;
        border-width: 1px;
        border-style: solid;
        text-align: center;
    }

#sidebar-nav-container .sidebar-nav-list ~ .sidebar-nav-list {
    border-top-style: solid;
    border-top-width: 1px;
    margin-top: 10px;
}

#sidebar-nav-container .sidebar-nav-list > li {
    display: block;
}

    #sidebar-nav-container .sidebar-nav-list > li > a {
        display: block;
        position: relative;
        padding: 10px 40px 10px 60px;
    }

    #sidebar-nav-container .sidebar-nav-list > li > .custom-select {
        display: block;
        position: relative;
        padding: 0 40px 10px 60px;
    }

#sidebar-nav-container .sidebar-nav-list li:not(.active) > a:not(.selected) {
    font-weight: 300;
}

#sidebar-nav-container .sidebar-nav-list a:hover {
    text-decoration: none;
}

#sidebar-nav-container .sidebar-nav-list a.selected {
    text-transform: uppercase;
}

#sidebar-nav-container .sidebar-nav-list a .fa {
    position: absolute;
    margin-left: -35px;
}

#sidebar-nav-container .sidebar-nav-list .fa-chevron-left {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
}

#sidebar-nav-container .sidebar-nav-list .fa-chevron-left,
#sidebar-nav-container .sidebar-nav-list > li > ul:not(.select-list) {
    display: none;
}

#sidebar-nav-container.open-side-submenu .sidebar-header,
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li:not(.active),
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active .fa {
    display: none;
}

#sidebar-nav-container.open-side-submenu .sidebar-nav-list ul,
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active > a > .fa-chevron-left,
#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active ul .fa:not(.fa-chevron-left) {
    display: block;
}

#sidebar-nav-container.open-side-submenu .sidebar-nav-list > li.active > a {
    text-transform: uppercase;
    margin-bottom: 20px;
}

#sidebar-nav-container .sidebar-nav-list .custom-select {
    width: 100%;
    max-width: none;
    height: auto;
}

    #sidebar-nav-container .sidebar-nav-list .custom-select .fa {
        right: 20px;
        top: 0;
    }

    #sidebar-nav-container .sidebar-nav-list .custom-select .select-list {
        position: relative;
    }

        #sidebar-nav-container .sidebar-nav-list .custom-select .select-list .placeholder {
            font-size: 14px;
            font-weight: 300;
            padding: 2px 0;
        }

        #sidebar-nav-container .sidebar-nav-list .custom-select .select-list ul {
            border: none;
            box-shadow: none;
        }

            #sidebar-nav-container .sidebar-nav-list .custom-select .select-list ul li {
                padding: 0;
                line-height: 30px;
                height: 30px;
            }

                #sidebar-nav-container .sidebar-nav-list .custom-select .select-list ul li img {
                    padding: 3px 10px 3px 0;
                }

#sidebar-nav-container .sidebar-nav-list .logout {
    border-top-style: solid;
    border-top-width: 1px;
    margin-top: 10px;
}

@media (max-width: 768px) {

    #sidebar-nav-container .sidebar-nav {
        width: 85%;
    }
}

/* Sidebar Column *******************/

.main-container.sidebar-column-display {
    display: grid;
    grid-template-columns: 1fr 1024px 1fr;
    overflow: hidden;
}

    .main-container.sidebar-column-display .main-column {
        grid-column-start: 1;
        grid-column-end: 3;
        display: grid;
        grid-template-columns: 1fr 1024px;
    }

        .main-container.sidebar-column-display .main-column > section {
            grid-column-start: 2;
            grid-column-end: 3;
            max-width: 1024px;
            width: 100%;
            box-sizing: border-box;
        }

    .main-container.sidebar-column-display .sidebar-column-container {
        grid-column-start: 3;
        grid-column-end: 4;
        display: flex;
        justify-content: flex-end;
    }

    .main-container.sidebar-column-display .sidebar-column {
        width: 280px;
    }

    .main-container.sidebar-column-display .sidebar-column-content li {
        position: relative;
        display: flex;
        align-items: center;
    }

        .main-container.sidebar-column-display .sidebar-column-content li span {
            display: block;
        }

@media (max-width: 1304px) {

    .main-container.sidebar-column-display {
        display: flex;
    }

        .main-container.sidebar-column-display .main-column {
            display: block;
            width: calc(100% - 280px);
        }
}

@media (max-width: 1024px) {

    .main-container.sidebar-column-display {
        flex-wrap: wrap;
    }

        .main-container.sidebar-column-display .main-column,
        .main-container.sidebar-column-display .sidebar-column-container,
        .main-container.sidebar-column-display .sidebar-column-container .sidebar-column {
            width: 100%;
        }

        .main-container.sidebar-column-display .sidebar-column {
            padding: 20px 30px;
        }

        .main-container.sidebar-column-display .sidebar-column-button {
            margin-bottom: 0;
        }

        .main-container.sidebar-column-display .sidebar-column:not(.active) .sidebar-column-button .fa-chevron-down,
        .main-container.sidebar-column-display .sidebar-column.active .sidebar-column-button .fa-chevron-up,
        .main-container.sidebar-column-display .sidebar-column:not(.active) .sidebar-column-content {
            display: none;
        }

        .main-container.sidebar-column-display .sidebar-column.active .sidebar-column-button {
            margin-bottom: 30px;
        }
}

@media (max-width: 768px) {

    .main-container.sidebar-column-display .sidebar-column-container .sidebar-column {
        padding: 20px;
    }
}

/* Leaderboard *******************/

.leaderboard {
    width: 100%;
}

    .leaderboard li {
        position: relative;
        padding: 5px 30px;
        margin-left: -30px;
        width: calc(100% + 60px);
        box-sizing: border-box;
    }

        .leaderboard li + li {
            margin-top: 10px;
        }

        .leaderboard li > div {
            overflow: hidden;
        }

    .leaderboard .image-container {
        position: relative;
        margin-right: 10px;
        min-width: 48px;
    }

        .leaderboard .image-container span {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            font-size: 18px;
            line-height: 48px;
            font-weight: normal;
            text-align: center;
            font-weight: bold;
            box-sizing: border-box;
            border-radius: 50%;
        }

    .leaderboard span {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .leaderboard li.selected:before {
        content: '';
        display: block;
        position: absolute;
        left: -20px;
        width: 0;
        height: 0;
        border-top: 29px solid transparent;
        border-bottom: 29px solid transparent;
        border-right-width: 20px;
        border-right-style: solid;
    }

    .leaderboard li.selected .image-container span {
        border-width: 2px;
        border-style: solid;
    }

    .leaderboard li.selected span {
        font-weight: bold;
    }

@media (max-width: 768px) {

    .leaderboard .image-container {
        min-width: 36px;
    }

        .leaderboard .image-container span {
            line-height: 36px;
        }
}

/* Content Menu *******************/

.contextual-menu {
    height: 68px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

    .contextual-menu ul {
        display: block;
        height: 68px;
        border-bottom-width: 1px;
        border-bottom-style: solid;
        box-sizing: border-box;
    }

    .contextual-menu > ul > li {
        display: inline-block;
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
        height: 68px;
    }

        .contextual-menu > ul > li.selected {
            border-bottom-width: 1px;
            border-bottom-style: solid;
        }

        .contextual-menu > ul > li .badge {
            margin-left: 10px;
        }

    .contextual-menu > .options > li .fa {
        padding-left: 10px;
    }

    .contextual-menu > ul > li > a,
    .contextual-menu > ul > li > span {
        display: inline-block;
        text-transform: uppercase;
        font-size: 12px;
        text-decoration: none;
        line-height: 68px;
    }

    .contextual-menu ul ul {
        display: none;
        z-index: 101;
    }

    .contextual-menu > ul > li:hover ul,
    .contextual-menu > ul > li.hover ul {
        display: block;
        position: absolute;
        border-width: 1px;
        border-style: solid;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.14);
    }

    .contextual-menu > ul > li li {
        display: block;
        padding: 0 20px;
        line-height: 48px;
        white-space: nowrap;
    }

    .contextual-menu > ul.options > li + li {
        margin-left: 2rem;
    }

    .contextual-menu > ul.options > li:last-child {
        margin-right: 2rem;
    }

    .contextual-menu > ul > li li a,
    .contextual-menu > ul > li li span {
        text-decoration: none;
    }

@media (max-width: 768px) {

    .contextual-menu > ul.options > li + li {
        margin-left: 10px;
    }
}

}

/* Settings *******************/

.settings-container {
    display: flex;
    justify-content: space-between;
    white-space: nowrap;
    max-width: 100%;
    width: 100%;
}

    .settings-container.title-container h1,
    .settings-container.title-container h2,
    .settings-container.title-container h3,
    .settings-container.title-container h4 {
        white-space: normal;
    }

.settings {
    display: inline-flex;
    align-self: center;
    list-style-type: none;
    text-decoration: none;
}

.settings-container.title-container .settings {
    align-self: center;
}

.settings-container.title-container h3 + .settings {
    margin-bottom: 20px;
}

.settings > li .fa {
    padding: 0 10px;
}

.settings-container .settings {
    text-decoration: none;
    white-space: nowrap;
}

    .settings-container .settings:hover span {
        text-decoration: underline;
    }

@media (max-width: 768px) {

    .settings-container.title-container {
        flex-wrap: nowrap;
    }

        .settings-container.title-container .settings .card-mode-btn,
        .settings-container.title-container .settings .list-mode-btn {
            display: none;
        }

    .default-settings-container {
        display: flex;
        justify-content: space-between;
    }

        .default-settings-container.title-container .settings .card-mode-btn,
        .default-settings-container.title-container .settings .list-mode-btn {
            display: block;
        }
}

/* Filter Container *******************/

.filter-container {
    display: none;
    margin-top: -20px;
}

    .filter-container.active {
        display: block;
    }

    .filter-container .filter-group {
        margin-bottom: 20px;
    }

    .filter-container .cta-container a + a {
        margin-left: 20px;
    }

@media (max-width: 1024px) {

    .filter-container {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {

    .filter-container {
        display: block;
        opacity: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        pointer-events: none;
        margin-top: 0;
    }

        .filter-container.active {
            opacity: 1;
            pointer-events: inherit;
        }

        .filter-container .filter-group {
            margin-bottom: 0;
        }

        .filter-container:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 1000;
        }

        .filter-container .filter-content {
            width: 60%;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 1001;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: hidden;
            transform: translate(100%, 0);
            transition: 200ms;
        }

        .filter-container.active .filter-content {
            transform: translate(0, 0);
        }

        .filter-container .filter-content .close-btn {
            display: inline-block;
            padding: 0;
            width: 24px;
            height: 24px;
            line-height: 24px;
            border-radius: 50%;
            float: right;
            margin-top: 5px;
            border-width: 1px;
            border-style: solid;
            text-align: center;
        }

            .filter-container .filter-content .close-btn .fa {
                font-size: 14px;
                padding-right: 0;
            }

        .filter-container h5,
        .filter-container .cta-container {
            margin-top: 20px;
        }

            .filter-container .cta-container a + a {
                display: table;
                margin-top: 20px;
                margin-left: 0;
            }
}

/* Breadcrumbs *******************/

.breadcrumbs-container {
    width: 100%;
    font-size: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
}

.back-btn {
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    display: inline-block;
    width: 36px;
    min-width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    margin-right: 20px;
}

    .back-btn .fa {
        font-size: 25px;
        line-height: 36px;
        padding-right: 0;
    }

.breadcrumbs {
    display: inline-flex;
    padding: 20px 0 0;
    line-height: 38px;
    list-style-type: none;
    font-size: 12px;
    white-space: nowrap;
    overflow-x: auto;
    align-items: center;
    box-sizing: border-box;
    box-sizing: border-box;
}

.back-btn + .breadcrumbs {
    width: calc(100% - 58px);
}

.breadcrumbs li:last-child {
    padding-right: 20px;
}

.breadcrumbs li:before {
    content: '';
    display: inline-block;
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    top: -1px;
}

.breadcrumbs li + li {
    margin-left: 12px;
}

.breadcrumbs li a {
    text-decoration: none;
}

.breadcrumbs-links {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
}

    .breadcrumbs-links li {
        margin-right: 10px;
    }

    .breadcrumbs-links a,
    .breadcrumbs-links span {
        border-style: solid;
        border-width: 1px;
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        line-height: 24px;
        border-radius: 15px;
    }

        .breadcrumbs-links a:hover {
            text-decoration: none;
        }

    .breadcrumbs-links i {
        margin-left: 5px;
        padding-right: 0;
    }

@media (max-width: 768px) {

    .breadcrumbs-container {
        border-bottom: none;
        margin-bottom: 10px;
    }

    .breadcrumbs {
        width: 100%;
    }

        .breadcrumbs li:last-child {
            padding-right: 0;
        }
}

/* Stats Recap *******************/

.recap-data-container {
    display: flex;
    align-items: stretch;
}

.recap-data {
    display: inline-block;
    border-radius: 3px;
    width: 180px;
    border-width: 1px;
    border-style: solid;
}

    .recap-data:hover {
        text-decoration: none;
    }

    .recap-data:not(:first-child) {
        margin-left: 10px;
    }

    .recap-data .value-number {
        font-size: 42px;
        font-weight: bold;
    }

@media (max-width: 1024px) {

    .recap-data {
        width: 140px;
        min-width: 140px;
        padding: 10px;
    }

        .recap-data .value-number {
            font-size: 24px;
        }
}

/* Column Nav Container *******************/

.column-nav-container {
    padding: 0 30px 20px;
}

@media (max-width: 768px) {

    .main-container section.column-nav-container {
        width: calc(100% - 40px);
        margin: 0 20px 0;
        padding: 0 0 20px;
    }

        .main-container section.column-nav-container .col-4 img {
            display: none;
        }
}

/**************************************************/
/* Pages */
/**************************************************/

/* Login *******************/

#login {
    display: flex;
}

    #login .login-background {
        width: 50%;
        position: fixed;
        top: 0;
        left: 0;
        right: 50%;
        bottom: 0;
        background-position: center center;
        background-size: cover;
    }

    #login .login-content {
        margin-left: 50%;
        width: 50%;
        height: 100%;
        padding: 2rem 2rem 2rem 4rem;
        display: flex;
        flex-direction: column;
    }

    #login .flag-select {
        align-self: flex-end;
    }

    #login h1 {
        margin-bottom: 1rem;
    }

    #login form {
        margin-top: 4rem;
    }

    #login .cta-container {
        margin-top: 2rem;
        clear: both;
    }

    #login input[type="text"] {
        margin-bottom: 2rem;
    }

    #login input[type="password"] {
        margin-bottom: 1rem;
    }

    #login .forgotten-password {
        line-height: 36px;
    }

    #login footer {
        padding: 0;
        margin-top: 6rem;
        display: flex;
        align-items: flex-end;
    }

        #login footer ul {
            list-style-type: none;
            width: 50%;
        }

        #login footer .app-version {
            display: block;
            width: 50%;
            text-align: right;
            padding-left: 1rem;
            box-sizing: border-box;
        }

@media (max-width: 1280px) and (min-width: 1025px) {

    #login .login-background {
        width: 40%;
    }

    #login .login-content {
        width: 60%;
        margin-left: 40%;
    }
}

@media (max-width: 1024px) and (min-width: 481px) {

    #login .login-background {
        width: 25%;
    }

    #login .login-content {
        width: 75%;
        margin-left: 25%;
    }
}

@media (max-width: 768px) {

    #login .login-content {
        padding: 2rem;
        position: relative;
    }

    #login .flag-select {
        position: absolute;
        top: 2rem;
        right: 2rem;
        z-index: 1;
        margin-top: 10px;
    }

    #login form {
        display: flex;
        flex-wrap: wrap;
    }

    #login .cta-container {
        width: 100%;
        text-align: center;
        order: 1;
    }

    #login .forgotten-password {
        display: block;
        order: 2;
        width: 100%;
        margin-top: 1rem;
        text-align: center;
    }

    #login footer {
        flex-wrap: wrap;
        margin-top: 4rem;
    }

        #login footer .footer-options {
            width: 100%;
            text-align: center;
        }
}

@media (max-width: 480px) {

    #login .login-background {
        display: none;
    }

    #login .login-content {
        width: 100%;
        margin-left: 0;
        padding: 2rem;
    }
}

/* Home *******************/

.home-col-left {
    box-sizing: border-box;
    padding: 50px 15px 0 30px;
}

    .home-col-left > section,
    .home-col-right > section {
        padding-bottom: 40px;
    }

        .home-col-left > section:not(:first-child),
        .home-col-right > section:not(:first-child) {
            border-top-width: 1px;
            border-top-style: solid;
        }

        .home-col-left > section:not(:first-child) {
            margin-left: -30px;
            width: 100%;
            padding: 30px 15px 40px 30px;
        }

    .home-col-left h3 {
        width: 100%;
    }

.main-presentation-container {
    background-size: cover;
    background-position: bottom right;
    background-repeat: no-repeat;
    padding: 100px 0 0;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
}

.home-col-left .multi-col-presentation-container img {
    width: auto;
}

.home-col-left .multi-col-presentation-container .profile-highlights {
    justify-content: center;
}

.home-col-left .multi-col-presentation-container .courses-highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .home-col-left .multi-col-presentation-container .courses-highlight h5 {
        max-width: 320px;
        width: 100%;
    }

    .home-col-left .multi-col-presentation-container .courses-highlight p {
        font-size: 12px;
        max-width: 320px;
        width: 100%;
    }

.home-col-left .cta-contextual + .cta-contextual {
    margin-left: 10px;
}

.home-col-left .multi-col-presentation-container .col-more {
    font-style: italic;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.home-col-right {
    box-sizing: border-box;
    border-left-width: 1px;
    border-left-style: solid;
    padding: 50px 30px 0 15px;
}

    .home-col-right > section:not(:first-child) {
        margin-left: -15px;
        width: 100%;
        padding: 30px 30px 40px 15px;
    }

    .home-col-right .table-container {
        max-width: 100%;
    }

.home-stats-graphic-container {
    overflow: hidden;
}

.news-item:not(:last-child) {
    margin-bottom: 10px;
}

.news-item {
    display: inline-flex;
    font-size: 12px;
}

    .news-item .image-container {
        display: block;
        margin-right: 10px;
    }

        .news-item .image-container img {
            max-width: 60px;
        }

.home-col-right .social-media-list {
    font-size: 0;
}

    .home-col-right .social-media-list li {
        display: inline-block;
        margin-bottom: 5px;
    }

        .home-col-right .social-media-list li:not(:last-child) {
            margin-right: 5px;
        }

.campagne-main-container {
    position: relative;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -50px;
    margin-right: -15px;
    width: calc(100% + 45px);
    left: -30px;
}

    .campagne-main-container .image-container {
        background-size: cover;
        background-position: bottom left;
        background-repeat: no-repeat;
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }

.campagne-main-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .campagne-main-content h2 {
        max-width: 75%;
        font-weight: bold;
        text-align: center;
    }

    *::-ms-backdrop, .campagne-main-content h2 { /* IE11 */
        margin-top: 20px;
    }

    .campagne-main-content p,
    .campagne-main-content .cta-contextual {
        margin-top: 10px;
        max-width: 75%;
    }

    .campagne-main-content .cta-contextual {
        border: none !important;
    }

.formation-decision-popup-active:before {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.formation-decision-popup-container .popup {
    max-width: 600px;
    top: auto;
    left: auto;
    right: 2rem;
    bottom: 2rem;
    padding: 0;
}

.formation-decision-container {
    padding: 0;
}

    .formation-decision-container section.inner {
        padding: 20px !important;
    }

    .formation-decision-container section + section {
        border-top-width: 1px;
        border-top-style: solid;
    }

    .formation-decision-container textarea,
    .formation-decision-container label.above + p {
        margin-top: 5px;
    }

    .formation-decision-container .cta-container a {
        margin-right: 20px;
    }

.formation-request-sidebar {
    width: calc(100% + 30px);
    margin-left: -30px;
    margin-top: -40px;
    margin-bottom: -40px;
    padding: 20px !important;
}

.preview.formation-summary {
    border-radius: 6px;
    overflow: hidden;
    max-width: 345px;
}

    .preview.formation-summary .image-container:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    .preview.formation-summary .image-container img {
        display: block;
        width: 100%;
    }

    .preview.formation-summary .card-preview-content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
    }

    .preview.formation-summary h3 {
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
        margin-top: 20px;
        margin-bottom: 0;
        max-width: 100%;
    }

        .preview.formation-summary h3:before {
            display: none;
        }

.formation-request-label {
    margin-bottom: 5px;
}

.formation-request-data {
    margin-top: 5px;
}

.formation-request-main-col {
    padding-left: 30px !important;
}

    .formation-request-main-col .formation-request-header {
        display: flex;
        justify-content: space-between;
    }

    .formation-request-main-col .formation-request-owner,
    .formation-request-main-col .formation-request-session {
        display: flex;
        align-items: center;
    }

        .formation-request-main-col .formation-request-owner img,
        .formation-request-main-col .formation-request-session img {
            margin-right: 10px;
        }

    .formation-request-main-col .formation-request-comment {
        position: relative;
    }

        .formation-request-main-col .formation-request-comment::before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 10px 10px 10px;
            position: absolute;
            left: 15px;
            top: -10px;
        }

        .formation-request-main-col .formation-request-comment p {
            line-height: 20px;
        }

    .formation-request-main-col .formation-request-decision {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .formation-request-main-col .formation-request-status {
        display: flex;
        align-items: center;
    }

        .formation-request-main-col .formation-request-status img {
            margin-right: 10px;
        }

.formation-creation-chosen-collaborator ul {
    width: 100%;
}

.formation-creation-chosen-collaborator li {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    padding: 5px 10px 5px 0;
    justify-content: space-between;
}

.formation-choice-filters-container {
    display: flex;
    justify-content: space-between;
}

    .formation-choice-filters-container .custom-select-container {
        max-width: 200px;
    }

    .formation-choice-filters-container > section {
        display: flex;
        width: 100%;
        justify-content: flex-start;
        align-items: center;
    }

.collaborator-choice-list .table-list-col:last-child {
    justify-content: flex-end;
}

.generic-news-carousel-container.generic-courses-carousel-container .card-mode {
    grid-template-columns: repeat(auto-fill, 100%);
}

.generic-news-carousel-container.generic-courses-carousel-container .news-wall,
.generic-news-carousel-container.generic-courses-carousel-container .generic-news-carousel-content-banner {
    height: auto;
}

.generic-news-carousel-container.generic-courses-carousel-container .course-carousel-left-col {
    max-width: inherit;
    margin-left: 0;
}

.generic-news-carousel-container.generic-courses-carousel-container .course-carousel-right-col {
    width: 100%;
}
/*
.generic-news-carousel-container.generic-courses-carousel-container .news-wall-pagination {
    left: 320px !important;
}
*/
.generic-news-carousel-container.generic-courses-carousel-container .card-mode .preview.default-course-preview {
    max-width: 300px;
    width: 300px;
}

.home-col-left .generic-news-carousel-container,
.home-col-right .generic-news-carousel-container {
    position: relative;
}

    .home-col-left .generic-news-carousel-container > .col-container > h1,
    .home-col-left .generic-news-carousel-container > .col-container > h2,
    .home-col-left .generic-news-carousel-container > .col-container > h3,
    .home-col-right .generic-news-carousel-container > .col-container > h1,
    .home-col-right .generic-news-carousel-container > .col-container > h2,
    .home-col-right .generic-news-carousel-container > .col-container > h3 {
        padding-right: 100px;
    }

    .home-col-left .generic-news-carousel-container .news-wall-container,
    .home-col-right .generic-news-carousel-container .news-wall-container {
        padding-right: 0;
        position: static;
    }

    .home-col-left .generic-news-carousel-container .news-wall-col,
    .home-col-right .generic-news-carousel-container .news-wall-col {
        min-width: 100%;
    }

    .home-col-left .generic-news-carousel-container .image-container,
    .home-col-right .generic-news-carousel-container .image-container {
        position: relative;
    }

        .home-col-left .generic-news-carousel-container .image-container img,
        .home-col-right .generic-news-carousel-container .image-container img {
            position: relative;
            min-height: auto;
            top: 0;
            left: 0;
            transform: translate(0, 0);
            max-width: 100%;
        }

    .home-col-left .generic-news-carousel-container .generic-news-carousel-content-banner-image,
    .home-col-right .generic-news-carousel-container .generic-news-carousel-content-banner-image {
        border: none !important;
    }

    .home-col-left .generic-news-carousel-container .news-wall-pagination,
    .home-col-right .generic-news-carousel-container .news-wall-pagination {
        left: auto !important;
        bottom: auto !important;
        top: 0;
        right: 0;
        justify-content: flex-end;
        margin-right: 20px;
    }

.generic-news-carousel-main-slider .course-carousel-right-col {
    max-width: 500px !important;
    width: 100% !important;
    box-sizing: border-box;
}

    .generic-news-carousel-main-slider .course-carousel-right-col h2 {
        max-width: 100%;
        box-sizing: border-box;
    }

.widget-categories-list .categories-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .widget-categories-list .categories-list li {
        width: 180px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 40px 20px 0;
    }

    .widget-categories-list .categories-list .image-container {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .widget-categories-list .categories-list li h4 {
        margin-top: 15px;
        display: block;
        max-width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    .widget-categories-list .categories-list li:hover img {
        box-shadow: none;
    }

@media (max-width: 1280px) {

    .campagne-main-container .image-container {
        background-size: contain;
    }
}

@media (max-width: 1080px) {

    .home-more-news .card-mode {
        grid-template-columns: repeat(auto-fill, minmax(220px, 320px));
        justify-content: center;
        justify-items: center;
    }
}

@media (max-width: 1024px) {

    .generic-news-carousel-container.generic-courses-carousel-container .news-wall-col {
        min-width: 100%;
    }

    .generic-news-carousel-container.generic-courses-carousel-container .news-wall-container {
        padding-right: 0;
    }

    .generic-news-carousel-container.generic-courses-carousel-container .generic-news-carousel-main-slider .generic-news-carousel-content-banner {
    }

    .home-col-left .main-presentation-container .col-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-col-left .main-presentation-container .cta-contextual + .cta-contextual {
        margin-left: 0;
        margin-top: 10px;
    }

    .home-col-left .course-presentation-container,
    .home-col-left .profile-presentation-container {
        flex-wrap: wrap;
    }

        .home-col-left .course-presentation-container [class*="col-"],
        .home-col-left .profile-presentation-container [class*="col-"] {
            width: 100%;
            padding-left: 0 !important;
            padding-right: 0 !important;
            padding-bottom: 20px;
        }

        .home-col-left .course-presentation-container .card-mode {
            grid-template-columns: repeat(1, minmax(220px, 320px));
            justify-content: center;
        }

            .home-col-left .course-presentation-container .card-mode .preview {
                max-width: 320px;
            }

    .formation-request-container {
        flex-wrap: wrap;
    }

    .formation-request-sidebar {
        width: 100% !important;
        order: 2;
        margin: 20px 0 0 0 !important;
        padding: 20px !important;
    }

        .formation-request-sidebar .preview.formation-summary {
            margin-top: 0;
        }

    .formation-request-main-col {
        width: 100% !important;
        padding: 0 !important;
    }

        .formation-request-main-col .simple-icon-container:first-child {
            margin-bottom: 10px;
        }

        .formation-request-main-col .formation-request-header {
            flex-wrap: wrap;
        }

        .formation-request-main-col .formation-request-owner,
        .formation-request-main-col .formation-request-session {
            width: 100%;
        }

        .formation-request-main-col .formation-request-session {
            margin-top: 20px;
        }

        .formation-request-main-col .formation-request-comment::before {
            display: none;
        }

        .formation-request-main-col .formation-request-decision {
            flex-wrap: wrap;
        }

            .formation-request-main-col .formation-request-decision > * {
                width: 100%;
            }

                .formation-request-main-col .formation-request-decision > * + * {
                    margin-top: 20px;
                }

    .formation-choice-filters-container section {
        flex-wrap: wrap;
    }

    .collaborator-choice-list .table-list .input-option-container input[type=checkbox] + span span span:not(:empty),
    .collaborator-choice-list .table-list .input-option-container input[type=checkbox] + span span a,
    .collaborator-choice-list .table-list .input-option-container input[type=checkbox] + span span b {
        display: block;
        padding-left: 0;
    }

    .collaborator-choice-list .table-list .table-list-col {
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

    .collaborator-choice-list .table-list li:nth-child(n + 3) {
        margin-top: 4px;
    }
}

@media (max-width: 768px) {

    .generic-news-carousel-container.generic-courses-carousel-container .generic-news-carousel-main-slider .course-carousel-right-col {
        padding-left: 0;
    }

        .generic-news-carousel-container.generic-courses-carousel-container .generic-news-carousel-main-slider .course-carousel-right-col h2 {
            margin-top: 20px;
        }

    .generic-news-carousel-container.generic-courses-carousel-container .news-wall-pagination {
        bottom: 0 !important;
    }

    .generic-news-carousel-container > section + section {
        padding-left: 20px !important;
    }

        .generic-news-carousel-container > section + section .generic-news-carousel-content-banner {
            margin-top: 20px;
        }

    .home-main-image img {
        width: 100%;
    }

    .home-more-news .card-mode {
        grid-template-columns: repeat(4, minmax(220px, 220px));
        justify-content: flex-start;
    }

    .home-more-news .home-col-left,
    .home-more-news .home-col-right {
        padding: 0;
    }

        .home-more-news .home-col-left > section,
        .home-more-news .home-col-right > section {
            box-sizing: border-box;
            padding: 20px;
            margin-left: 0;
        }

    .home-col-right {
        border-left-width: 0;
        border-top-width: 1px;
        border-top-style: solid;
    }

    .home-col-left .main-presentation-container .col-container {
        flex-direction: row;
    }

    .home-col-left .main-presentation-container .cta-contextual + .cta-contextual {
        margin-left: 10px;
        margin-top: 0;
    }

    .home-col-left .profile-presentation-container [class*="col-"] {
        width: 100%;
        padding-top: 20px;
        padding-left: 20px !important;
        padding-right: 20px !important;
        padding-bottom: 20px;
    }

    .campagne-main-container {
        width: 100%;
        margin-top: 0;
        margin-right: 0;
        left: 0;
    }

    .formation-decision-popup-container .popup {
        max-width: 100%;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
    }

    .formation-choice-container .cta-contextual,
    .formation-collaborator-choice-container .cta-contextual {
        width: 100%;
        height: 52px;
        box-sizing: border-box;
    }

    .formation-choice-container .col-container > .fl-container-inline-phone {
        text-align: right;
    }

    .formation-choice-cta-container {
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        z-index: 2;
    }

    .main-container .formation-choice-list,
    .main-container .collaborator-choice-list {
        padding-bottom: 120px;
    }

    .formation-choice-filters-container .hearted-total {
        position: absolute;
        top: 45px;
        right: 20px;
    }

    .formation-choice-filters-container > section .col-container {
        display: flex;
        width: 100%;
    }

    .home-col-left .generic-news-carousel-content-banner-image .image-container img,
    .home-col-right .generic-news-carousel-content-banner-image .image-container img {
        min-width: initial;
    }
}

/* Courses *******************/

.course-highlights .counter-container {
    display: grid;
    grid-template-columns: repeat(7, minmax(100px, 1fr));
    align-items: center;
    justify-content: center;
    text-align: center;
}

    .course-highlights .counter-container img {
        margin: 5px auto 0;
    }

@media (max-width: 768px) {

    .course-highlights .counter-container {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

        .course-highlights .counter-container > div {
            display: flex;
            width: 50%;
            flex-direction: column;
            justify-content: flex-start;
            margin: 20px 0;
        }

            .course-highlights .counter-container > div:nth-child(1) {
                order: 0;
            }

            .course-highlights .counter-container > div:nth-child(2) {
                order: 2;
            }

            .course-highlights .counter-container > div:nth-child(3) {
                order: 4;
            }

            .course-highlights .counter-container > div:nth-child(4) {
                order: 3;
            }

            .course-highlights .counter-container > div:nth-child(5) {
                order: 1;
            }

            .course-highlights .counter-container > div:nth-child(7) {
                order: 5;
            }
}

/* Parcours *******************/

.parcours-header-icon {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

@media (max-width: 768px) {

    .parcours-header-icon {
        width: 52px;
        height: 52px;
    }

    .parcours-conditions {
        display: flex;
        align-items: center;
    }

    .parcours-header-icon + .parcours-conditions-description {
        padding-left: 10px;
    }
}

/* Catalogue *******************/

.catalogue-search-container {
    display: inline-flex;
    align-items: flex-end;
    margin-right: 20px;
}

    .catalogue-search-container label {
        margin-left: 20px;
    }

    .catalogue-search-container .fa-search {
        font-size: 28px;
        bottom: 8px;
    }

.catalogue-search-results {
    max-width: 964px;
    padding: 20px 0 10px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.default-catalogue-search-container {
    width: 100%;
}

    .default-catalogue-search-container .select-group-container {
        display: inline-flex;
        width: 100%;
    }

    *::-ms-backdrop, .default-catalogue-search-container .select-group-container { /* IE11 */
        width: auto;
    }

.select-group-container .select-list ul li.selected {
    font-weight: bold;
}

.default-catalogue-search-container label input {
    height: 46px;
    font-size: 16px;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 40px;
}

.default-catalogue-search-container.large {
    justify-content: flex-start !important;
}

    .default-catalogue-search-container.large label {
        width: 100%;
    }

    .default-catalogue-search-container.large input {
        width: 480px !important;
        max-width: 100%;
    }

.default-catalogue-search-container label input::placeholder {
    font-size: 16px;
}

.default-catalogue-search-container label.input-icon > a {
    right: 5px;
}

.default-catalogue-search-container label .fa-search {
    font-size: 20px;
}

.default-catalogue-search-container .custom-select-container:not(:first-child) {
    margin-left: 20px;
}

.default-catalogue-search-container .settings {
    white-space: nowrap;
    margin-left: 20px;
}

    .default-catalogue-search-container .settings:hover {
        text-decoration: none;
    }

        .default-catalogue-search-container .settings:hover span {
            text-decoration: underline;
        }

.default-catalogue-search-container .hearted-total {
    margin-top: -5px;
    margin-left: 20px;
}

.hearted-total {
    display: inline-flex;
    align-self: center;
}

    .hearted-total i {
        display: block;
        position: relative;
    }

        .hearted-total i span {
            font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
            font-size: 14px;
            font-weight: bold;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hearted-total i::before {
            font-size: 36px;
        }

.criteria-group-container:empty {
    display: none;
}

.selected-criteria {
    padding: 4px 10px;
    border-radius: 20px;
    white-space: nowrap;
}

    .selected-criteria:not(:last-child) {
        margin-right: 10px;
    }

    .selected-criteria i {
        margin-left: 10px;
        font-size: 14px;
        cursor: pointer;
        position: relative;
    }

.catalogue-requests-search-container {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

    .catalogue-requests-search-container .settings-container {
        margin-left: 20px;
    }

.catalogue-requests-search-filters {
    align-items: flex-start;
}

    .catalogue-requests-search-filters .settings {
        margin-top: -5px;
    }

        .catalogue-requests-search-filters .settings,
        .catalogue-requests-search-filters .settings i {
            line-height: 30px;
        }

@media (max-width: 1080px) {

    .default-catalogue-search-container.large input {
        width: 360px !important;
    }
}

@media (max-width: 1024px) {

    .catalogue-search-results {
        margin: 0 30px;
        width: auto;
    }

    .catalogue-requests-search-container {
        flex-wrap: wrap;
    }

    .catalogue-requests-search-filters {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {

    .default-catalogue-search-container {
        flex-wrap: wrap;
        position: relative;
    }

        .default-catalogue-search-container .select-group-container {
            padding-right: 50px;
        }

        .default-catalogue-search-container > .input-icon {
            margin-top: 20px;
            margin-left: 0;
            width: calc(100% - 150px);
        }

        .default-catalogue-search-container > .settings {
            margin-top: 15px;
        }

        .default-catalogue-search-container .hearted-total {
            position: absolute;
            top: 0;
            right: 0;
        }
}

/* Profile *******************/

.profile-highlights {
    position: relative;
    display: flex;
    align-items: center;
    padding: 20px 30px 40px;
}

    .profile-highlights::before {
        content: '';
        display: block;
        position: absolute;
        left: -1000px;
        top: -1000px;
        right: -1000px;
        bottom: 0;
        z-index: -1;
    }

    .profile-highlights .profile-preview-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: -20px;
    }

        .profile-highlights .profile-preview-container h2 {
            margin-top: 20px;
            text-align: center;
        }

    .profile-highlights .profile-highlight {
        width: 136px;
        height: 136px;
        border-style: solid;
        border-width: 4px;
        border-radius: 50%;
        display: flex;
        align-content: center;
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-left: -20px;
        padding: 0 15px;
        box-sizing: border-box;
        font-size: 18px;
    }

    .profile-highlights.small .profile-highlight {
        width: 80px;
        height: 80px;
        min-width: 80px;
        align-self: flex-start;
        margin-top: 20px;
        margin-left: -40px;
        font-size: 12px;
    }

    .profile-highlights .profile-highlight span {
        display: block;
        width: 100%;
        font-size: 36px;
    }

    .profile-highlights.small .profile-highlight span {
        font-size: 20px;
    }

    .profile-highlights .profile-options {
        width: 100%;
        max-width: 220px;
        position: absolute;
        top: 20px;
        right: 30px;
    }

.profile-password-container {
    display: flex;
    align-items: center;
    white-space: none;
}

    .profile-password-container label {
        width: inherit;
    }

        .profile-password-container label + a {
            margin-left: 20px;
        }

.profile-feed li + li {
    margin-top: 25px;
}

.profile-feed i {
    display: block;
    width: 36px;
    text-align: center;
    margin-right: 10px;
}

@media (max-width: 768px) {

    .profile-highlights {
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 20px 40px;
    }

        .profile-highlights .profile-preview-container {
            width: 100%;
            margin-right: 0;
            margin-bottom: 20px;
        }

        .profile-highlights .profile-highlight {
            width: 84px;
            height: 84px;
            font-size: 12px;
            position: relative;
            left: 16px;
        }

            .profile-highlights .profile-highlight span {
                font-size: 16px;
            }

        .profile-highlights .profile-options {
            position: static;
            width: 100%;
            max-width: inherit;
            margin-top: 20px;
        }
}

/* Community *******************/

.community-subject-header .counter + .counter {
    margin-left: 20px;
}

.community-subject-header-participants {
    display: flex;
    align-items: center;
}

    .community-subject-header-participants ul {
        display: inline-flex;
    }

    .community-subject-header-participants li {
        margin-right: 10px;
    }

.community-subjects-container {
    max-width: 1024px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.community-subjects-filters {
    border-right-width: 2px;
    border-right-style: solid;
    padding: 20px 30px;
}

    .community-subjects-filters .filter-container {
        display: block;
        margin-top: 0;
    }

    .community-subjects-filters .keyword-list {
        margin-left: 35px;
    }

.main-container .community-subjects-container.col-container .community-subjects-filters + .community-subjects {
    padding: 20px 30px;
}

.community-subjects-list li + li {
    margin-top: 20px;
}

.community-subject-author {
    text-align: center;
}

.community-subject-appreciation .indicator {
    display: inline-flex;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
}

.community-subject ul {
    padding-left: 20px;
}

@media (max-width: 768px) {

    .community-subject-header .counter-container {
        margin-left: 58px;
        margin-bottom: 20px;
    }

    .main-container .community-subjects-container.col-container .community-subjects-filters {
        padding: 20px;
    }

    .community-subject-header-participants .cta-action.light span {
        display: none;
    }

    .community-subjects-sorting .custom-select-container {
        margin-right: 20px;
        max-width: 300px;
    }

    .community-subjects {
        display: flex;
        flex-direction: column;
        padding: 30px 20px !important;
    }

        .community-subjects > .community-subjects-list {
            order: -1;
        }

        .community-subjects > .cta-container {
            order: 2;
            margin-top: 20px;
            text-align: center;
        }

    .community-subject-header .settings-container.title-container {
        flex-wrap: wrap;
    }

        .community-subject-header .settings-container.title-container .settings {
            margin-top: 20px;
            margin-left: 56px;
        }

    .subject-author-mobile {
        display: flex;
        align-items: center;
    }

        .subject-author-mobile img {
            margin-right: 10px;
        }
}

/* Pricing *******************/

.pricing-container {
    display: flex;
    justify-content: stretch;
    flex-wrap: wrap;
}

    .pricing-container > .inner {
        width: 100%;
    }

.pricing-content {
    position: relative;
    border-width: 1px;
    border-style: solid;
}

    .pricing-content img {
        display: block;
        margin: 0 auto;
    }

    .pricing-content .pricing-highlights-list {
        position: relative;
        list-style-type: none;
        margin-left: 20px;
    }

        .pricing-content .pricing-highlights-list .icon {
            position: absolute;
            right: 100%;
            padding-right: 10px;
        }

        .pricing-content .pricing-highlights-list li span {
            font-size: 12px;
        }

        .pricing-content .pricing-highlights-list li + li {
            margin-top: 20px;
        }

/* Agenda *******************/

.agenda-left-col {
    padding: 50px 20px;
    min-width: 260px;
    box-sizing: border-box;
    margin-top: -40px;
    margin-bottom: -40px;
    margin-left: -30px
}

    .agenda-left-col .agenda-entry-content {
        margin-left: 10px;
    }

        .agenda-left-col .agenda-entry-content span {
            font-family: Neuton, Serif;
            font-size: 16px;
        }

.agenda-content {
    margin-top: -40px;
    overflow-x: auto;
    position: relative;
}

    .agenda-content::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    .agenda-content::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .agenda-content::-webkit-scrollbar-thumb {
        border-radius: 6px;
    }

    .agenda-content .rsContentScrollArea {
        height: auto !important;
    }

    .agenda-content .rsHeader {
        display: flex;
        align-items: center;
        padding: 20px;
    }

        .agenda-content .rsHeader > p {
            order: 1;
            white-space: nowrap;
        }

        .agenda-content .rsHeader > h2 {
            order: 2;
            position: relative;
            font-family: Neuton, Serif;
            font-weight: normal;
            font-size: 32px;
            line-height: normal;
            padding-bottom: 12px;
            margin-left: 20px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            width: 100%;
        }

            .agenda-content .rsHeader > h2:before {
                content: '';
                display: block;
                position: absolute;
                left: 0;
                width: 24px;
                bottom: 0;
                height: 4px;
            }

        .agenda-content .rsHeader .rsPrevDay,
        .agenda-content .rsHeader .rsNextDay {
            font-family: FontAwesome;
            font-size: 0;
        }

            .agenda-content .rsHeader .rsPrevDay:hover,
            .agenda-content .rsHeader .rsNextDay:hover {
                text-decoration: none;
            }

            .agenda-content .rsHeader .rsPrevDay:before,
            .agenda-content .rsHeader .rsNextDay:before {
                font-size: 20px;
                padding: 0 10px;
                line-height: 80px;
            }

            .agenda-content .rsHeader .rsPrevDay:before {
                content: "\f053";
            }

            .agenda-content .rsHeader .rsNextDay:before {
                content: "\f054";
            }

        .agenda-content .rsHeader > ul {
            order: 3;
            list-style-type: none;
            display: flex;
        }

            .agenda-content .rsHeader > ul li {
                font-family: FontAwesome;
                font-size: 0;
            }

            .agenda-content .rsHeader > ul .rsLast {
                margin-left: 20px;
            }

            .agenda-content .rsHeader > ul li:hover {
                cursor: pointer;
            }

        .agenda-content .rsHeader .rsToday,
        .agenda-content .rsHeader .rsDatePickerActivator {
            display: none;
        }

        .agenda-content .rsHeader > ul li:first-child,
        .agenda-content .rsHeader > ul li:nth-child(2) {
            display: none;
        }

        .agenda-content .rsHeader > ul li:nth-child(3):before,
        .agenda-content .rsHeader > ul li:nth-child(4):before {
            font-size: 14px;
        }

        .agenda-content .rsHeader > ul li:nth-child(3):before {
            content: "\f00a";
        }

        .agenda-content .rsHeader > ul li:nth-child(4):before {
            content: "\f039";
        }

    .agenda-content .rsHorizontalHeaderTable th {
        padding: 5px;
        width: 20%;
        box-sizing: border-box;
        text-transform: capitalize;
    }

    .agenda-content .rsContent > table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    .agenda-content .rsContentTable {
        border-collapse: collapse;
        border-spacing: 0;
    }

        .agenda-content .rsContentTable td {
            border-width: 1px;
            border-style: solid;
            padding: 5px;
            box-sizing: border-box;
        }

    .agenda-content .rsApt {
        height: auto !important;
        border-radius: 5px;
        box-sizing: border-box;
        max-width: 100%;
        padding: 5px 20px 5px 5px;
        position: relative;
        font-size: 10px;
    }

        .agenda-content .rsApt br {
            display: none;
        }

    .agenda-content .rsAptContent {
        font-weight: bold;
    }

        .agenda-content .rsAptContent:before {
            content: '● ';
        }

    .agenda-content .rsAptDelete {
        font-size: 0;
        font-family: FontAwesome;
        position: absolute;
        right: 5px;
        top: 5px;
    }

        .agenda-content .rsAptDelete:before {
            font-size: 14px;
            content: "\f00d";
        }

    .agenda-content .rsApt .rsAptDelete:hover {
        text-decoration: none;
    }

@media (max-width: 1024px) {

    .agenda-content .rsHeader > ul {
        order: 0;
        margin-right: 20px;
    }
}

@media (max-width: 768px) {

    .agenda-left-col {
        min-width: calc(100% + 40px);
        margin-top: -20px;
        margin-left: -20px;
        box-sizing: border-box;
        margin-bottom: 40px;
    }
}

.agenda-content .rsHorizontalHeaderWrapper {
    display: none;
}

.agenda-content .rsAgendaView,
.agenda-content .rsContentWrapper {
    height: auto !important;
}

.agenda-content .rsAgendaTable {
    width: 100%;
    border-collapse: collapse;
}

    .agenda-content .rsAgendaTable .rsAgendaRow td {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding: 0 20px;
        box-sizing: border-box;
    }

.agenda-content .rsAgendaDateHeader {
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    padding: 10px;
    text-align: center;
    width: 100px;
}

    .agenda-content .rsAgendaDateHeader .rsDateHeader {
        font-size: 20px;
        font-weight: bold;
    }

    .agenda-content .rsAgendaDateHeader em {
        font-size: 12px;
        font-weight: normal;
        font-style: inherit;
    }

    .agenda-content .rsAgendaDateHeader small {
        font-size: 10px;
        font-weight: normal;
        font-style: inherit;
    }

    .agenda-content .rsAgendaDateHeader .rsDateBox strong,
    .agenda-content .rsAgendaDateHeader .rsDateBox em,
    .agenda-content .rsAgendaDateHeader .rsDateBox small {
        display: block;
    }

/* Lesson *******************/

.lesson-container {
    width: 100%;
}

.lesson-timeline-container {
    min-width: 320px;
}

.lesson-timeline-intro {
    position: relative;
}

    .lesson-timeline-intro .breadcrumbs {
        padding: 0;
    }

    .lesson-timeline-intro .counter-container {
        display: flex;
        justify-content: space-around;
    }

    .lesson-timeline-intro .gauge-horizontal {
        bottom: 1px;
    }

        .lesson-timeline-intro .gauge-horizontal .gauge-value {
            bottom: 10px;
            left: 20px;
        }

.lesson-timeline {
    list-style-type: none;
    width: calc(100% + 15px);
}

    .lesson-timeline .lesson-step {
        padding: 25px 20px 25px 80px;
        position: relative;
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

        .lesson-timeline .lesson-step > span {
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-weight: bold;
        }

        .lesson-timeline .lesson-step .lesson-step-status {
            position: absolute;
            left: 39px;
            top: 22px;
            width: 22px;
            height: 22px;
            line-height: 20px;
            border-radius: 50%;
            text-align: center;
            font-size: 10px;
            border-width: 1px;
            border-style: solid;
            box-sizing: border-box;
            z-index: 1;
        }

        .lesson-timeline .lesson-step i + span {
            padding-left: 5px;
        }

        .lesson-timeline .lesson-step.done:before,
        .lesson-timeline .lesson-step.current:before {
            content: '';
            display: block;
            width: 1px;
            position: absolute;
            bottom: 50%;
            top: -50%;
            left: 50px;
        }

.lesson-content {
    position: relative;
}

    .lesson-content .video-container,
    .lesson-content .img-container {
        margin-left: -45px;
        width: calc(100% + 75px);
        max-width: calc(100% + 75px);
    }

@media (max-width: 768px) {

    .lesson-timeline-container {
        width: 100%;
    }

    .lesson-content {
        padding-top: 50px;
    }

        .lesson-content .title-container {
            justify-content: space-between;
            align-items: flex-end;
        }

        .lesson-content .video-container,
        .lesson-content .img-container {
            margin-left: -20px;
            width: calc(100% + 55px);
            max-width: calc(100% + 55px);
        }
}

/* Revision *******************/

.revision-steps {
    display: flex;
    margin: 20px auto 0;
    justify-content: center;
}

.revision-step {
    display: flex;
    flex-wrap: wrap;
    width: 170px;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    text-align: center;
}

    .revision-step span {
        display: block;
        width: 36px;
        height: 36px;
        line-height: 36px;
        border-width: 1px;
        border-style: solid;
        text-align: center;
        border-radius: 50%;
        margin-bottom: 10px;
        position: relative;
    }

    .revision-step + .revision-step span:before {
        content: '';
        display: block;
        width: 110px;
        height: 1px;
        border-top-width: 1px;
        border-top-style: solid;
        position: absolute;
        top: 18px;
        right: 48px;
    }

.revision-btn-container {
    border-top-style: solid;
    border-top-width: 1px;
    display: flex;
    justify-content: center;
}

    .revision-btn-container .cta-container {
        width: 100%;
        max-width: 640px;
    }

/* Message Box *******************/

.sidebar-message-box {
    padding: 50px 20px;
    min-width: 260px;
    box-sizing: border-box;
    margin-top: -40px;
    margin-bottom: -40px;
    margin-left: -30px;
}

.sidebar-message-box-menu {
    list-style-type: none;
    margin-top: 20px;
}

    .sidebar-message-box-menu li {
        position: relative;
        left: -20px;
        width: calc(100% + 35px);
        box-sizing: border-box;
        line-height: 14px;
    }

    .sidebar-message-box-menu .input-option-container {
        display: none;
    }

    .sidebar-message-box-menu li a {
        display: block;
        padding: 10px 10px 10px 20px;
        font-size: 12px;
        text-decoration: none;
        height: 20px;
    }

        .sidebar-message-box-menu li a i {
            padding-right: 15px;
            display: inline-block;
            width: 20px;
        }

    .sidebar-message-box-menu li.selected a {
        font-weight: bold;
    }

.message-box-options {
    display: inline-block;
    list-style-type: none;
    margin-left: 10px;
    padding-left: 5px;
    border-left-style: solid;
    border-left-width: 1px;
}

    .message-box-options li {
        display: inline-block;
    }

        .message-box-options li a {
            padding: 0 5px;
        }

        .message-box-options li i {
            padding-right: 0;
        }

.message-box-header {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin-top: 20px;
    margin-bottom: 20px;
}

    .message-box-header h4 {
        padding-bottom: 20px;
    }

table.message-box-content thead {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    text-transform: uppercase;
}

    table.message-box-content thead th {
        font-weight: normal;
    }


table.message-box-content th,
table.message-box-content td {
    padding: 20px 0 20px 24px;
    box-sizing: border-box;
    height: 64px;
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

    table.message-box-content th:last-child,
    table.message-box-content td:last-child {
        padding-right: 24px;
    }

table.message-box-content td {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

    table.message-box-content th > a,
    table.message-box-content th > span,
    table.message-box-content td > a,
    table.message-box-content td > span {
        white-space: nowrap;
    }

    table.message-box-content th .input-option-container,
    table.message-box-content td .input-option-container,
    table.message-box-content th .input-option-container > span,
    table.message-box-content td .input-option-container > span {
        display: block;
    }

.message-box-content td a {
    text-decoration: none;
}

.message-box-content tr.unread a {
    font-weight: bold;
}

.message-box-content .message-box-date {
    font-size: 11px;
}

.message-attachments-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.message-attachment-list {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}

    .message-attachment-list li {
        display: inline-flex;
        width: 150px;
        height: 50px;
        position: relative;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 10px;
    }

    .message-attachment-list .message-attachment-thumbnail {
        display: flex;
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        min-width: 50px;
        min-height: 50px;
        max-width: 50px;
        max-height: 50px;
        margin-right: 10px;
        align-items: center;
        justify-content: center;
    }

    .message-attachment-list span {
        overflow: hidden;
        display: block;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 10px;
        font-size: 12px;
        font-weight: bold;
    }

    .message-attachment-list img {
        max-height: 50px;
    }

    .message-attachment-list .delete-attachement {
        width: 24px;
        height: 24px;
        text-align: center;
        line-height: 24px;
        border-radius: 50%;
        position: absolute;
        top: -12px;
        right: -12px;
    }

        .message-attachment-list .delete-attachement .fa {
            font-size: 12px;
            padding: 0;
        }

.message-attachments-container .add-attachment {
    display: block;
    height: 50px;
    line-height: 50px;
}

@media (max-width: 768px) {

    .sidebar-message-box {
        padding: 20px 30px;
        padding-right: 30px !important;
        min-width: 260px;
        box-sizing: border-box;
        margin-top: -20px;
        margin-bottom: 0;
        margin-left: 0;
        position: relative;
        left: -20px;
        width: calc(100% + 40px);
        min-width: calc(100% + 40px);
    }

    *::-ms-backdrop, .sidebar-message-box { /* IE11 */
        min-width: 100%;
    }

    .sidebar-message-box-menu li {
        left: -30px;
        width: calc(100% + 60px);
    }

    *::-ms-backdrop, .sidebar-message-box-menu li { /* IE11 */
        width: calc(100% + 80px);
    }

        .sidebar-message-box-menu li a {
            padding: 10px 60px 10px 30px;
        }

    .sidebar-message-box-menu .input-option-container {
        display: block;
        width: 24px;
        height: 24px;
        pointer-events: none;
        position: absolute;
        right: 20px;
        top: 10px;
    }

    .sidebar-message-box-menu li input[type=checkbox] + span i {
        content: '';
        width: 24px;
        height: 24px;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -12px;
        border-radius: 50%;
        text-align: center;
        line-height: 24px;
        padding-right: 0;
    }

    .sidebar-message-box-menu li input[type=checkbox] + span .fa-check {
        display: none;
    }

    .sidebar-message-box-menu li.selected input[type=checkbox] + span .fa-check {
        display: block;
    }

    table.message-box-content {
        margin-left: -20px;
        width: calc(100% + 40px);
    }

        table.message-box-content th,
        table.message-box-content td {
            padding: 10px 0 10px 20px;
        }

            table.message-box-content th:last-child,
            table.message-box-content td:last-child {
                padding-right: 20px;
            }

            table.message-box-content th > a,
            table.message-box-content th > span,
            table.message-box-content td > a,
            table.message-box-content td > span {
                display: block;
                position: relative;
            }

                table.message-box-content td > a + a {
                    margin-top: 5px;
                }

        table.message-box-content .message-box-date {
            text-align: right;
            right: 0;
        }
}

/* News Page *******************/

.news-filter {
    display: flex;
}

    .news-filter .custom-select-container + .custom-select-container {
        margin-left: 20px;
    }

.news-cards {
    display: flex;
    flex-wrap: wrap;
    display: grid;
    column-gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    list-style-type: none;
}

    .news-cards > li {
        width: 100%;
    }

.news-preview {
    display: block;
    border-top-style: solid;
    border-top-width: 1px;
    padding: 20px 5px 20px 0;
}

.news-header {
    display: flex;
    position: relative;
}

    .news-header .bookmarking-container {
        position: absolute;
        top: -10px;
        right: 0;
    }

.bookmarking-container {
    width: 18px;
    height: 24px;
    background-image: url('../image/bookmark.png');
    cursor: pointer;
}

    .bookmarking-container.bookmarked {
        background-image: url('../image/bookmarked.png');
    }

.news-header .img-container {
    display: block;
    min-width: 96px;
    max-width: 96px;
    margin-right: 10px;
}

    .news-header .img-container img {
        display: block;
    }

.news-header-content {
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

    .news-header-content .course-categories {
        padding-right: 35px;
    }

    .news-header-content h5 {
        white-space: normal;
        line-height: 18px;
        overflow: hidden;
        max-height: 36px;
    }

.news-preview-info {
    display: flex;
    align-items: center;
    margin-top: 5px;
}

    .news-preview-info .news-date {
        font-size: 10px;
    }

.star-ranking-container {
    margin-left: 10px;
}

.news-body-content {
    display: block;
    margin-top: 15px;
}

    .news-body-content p {
        font-size: 12px;
        line-height: 18px;
    }

.month-feed-container ul {
    margin-left: -20px;
    position: relative;
    width: calc(100% + 40px);
}

.month-feed-container ul {
    margin-left: -20px;
    position: relative;
    width: calc(100% + 40px);
}

.month-feed-container li + li {
    margin-top: 10px;
}

.monthly-news,
.monthly-news a,
.monthly-news:hover,
.monthly-news:hover a {
    display: flex;
    text-decoration: none;
}

    .monthly-news .img-container {
        display: block;
        min-width: 96px;
        max-width: 96px;
        padding: 2px;
        position: relative;
    }

        .monthly-news .img-container img {
            display: block;
        }

        .monthly-news .img-container .fa {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            top: 2px;
            left: 2px;
            right: 2px;
            bottom: 2px;
        }

.monthly-news-content {
    margin: 10px;
    overflow: hidden;
}

    .monthly-news-content p {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .monthly-news-content .cta-action {
        margin-top: 10px;
        font-size: 12px;
    }

.newsletter-feed-container li {
    display: flex;
    align-items: center;
}

    .newsletter-feed-container li + li {
        margin-top: 6px;
    }

.newsletter-item .image-container {
    width: 48px;
    min-width: 48px;
    height: 48px;
    margin-right: 10px;
}

.newsletter-item {
    overflow: hidden;
}

    .newsletter-item h5 {
        display: block;
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .newsletter-item a {
        display: block;
        height: 48px;
        line-height: 48px;
        margin-left: 10px;
        text-align: center;
    }

@media (max-width: 768px) {

    .month-feed-container ul {
        margin-left: 0;
        width: 100%;
    }
}

.news-intro-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

    .news-intro-info .star-ranking-container {
        margin-left: 40px;
    }

.news-source {
    font-style: italic;
}

.news-intro-container,
.news-image-container {
    min-height: 250px;
}

    .news-image-container img {
        display: block;
        margin: 0 auto;
    }

@media (max-width: 768px) {

    .news-intro-container,
    .news-image-container {
        min-height: inherit;
    }
}

/* Coaching *******************/

.coaching-intro {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

    .coaching-intro .image-container {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

.resources-cards {
    display: flex;
    flex-wrap: wrap;
    display: grid;
    row-gap: 24px;
    column-gap: 30px;
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr));
    list-style-type: none;
}

.resource-preview {
    display: block;
    position: relative;
}

*::-ms-backdrop, .resource-preview { /* IE11 */
    width: 215px;
    margin: 0 20px 20px 0;
}

    .resource-preview .resource-preview-action-container,
    .resource-preview .resource-preview-info {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .resource-preview .resource-preview-action-container {
        align-items: center;
        justify-content: center;
        font-size: 24px;
    }

    .resource-preview .resource-preview-info {
        align-items: flex-start;
        justify-content: flex-end;
        font-size: 12px;
    }

        .resource-preview .resource-preview-info h5 {
            margin-top: 5px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
        }

    .resource-preview img {
        display: block;
        width: 100%;
    }

/* News Wall *******************/

.news-wall-container {
    position: relative;
    overflow: hidden;
    padding: 0 60px 0 0;
}

.col-12 > .news-wall-container {
    padding: 0 60px;
}

@media (max-width: 1024px) {

    .col-12 > .news-wall-container {
        padding: 0 60px 0 0;
    }
}

.news-wall {
    display: flex;
    height: 430px;
    position: relative;
    width: 100%;
    -webkit-transition: transform 1s;
    transition: transform 1s;
}

.news-wall-btn {
    display: flex;
    position: absolute;
    width: 60px;
    height: 430px;
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}

    .news-wall-btn i {
        display: flex;
        font-size: 36px;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
    }

.widget-wall .news-wall-btn i {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    font-size: 12px;
    padding: 0;
}

.news-wall-previous-btn {
    left: -2px;
    display: none;
}

.col-12 > .news-wall-container .news-wall-previous-btn {
    display: flex;
}

@media (max-width: 1024px) {

    .col-12 > .news-wall-container .news-wall-previous-btn {
        display: none;
    }
}

.news-wall-next-btn {
    right: -2px;
    z-index: 2;
}

.news-wall-pagination {
    margin-top: 40px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: calc(100% + 60px);
}

.col-12 > .news-wall-container .news-wall-pagination {
    width: 100%;
}

@media (max-width: 1024px) {

    .col-12 > .news-wall-container .news-wall-pagination {
        width: calc(100% + 60px);
    }
}

.col-12 > .news-wall-container .news-wall-pagination {
    justify-content: center;
}

.news-wall-pagination a + a {
    margin-left: 10px;
}

.news-wall-pagination a,
.news-wall-pagination a .fa,
.news-wall-pagination a:hover .fa {
    font-size: 10px;
    padding: 0;
    -webkit-transition: color 500ms;
    transition: color 500ms;
}

.news-wall-pagination .current,
.news-wall-pagination .current .fa,
.news-wall-pagination .current:hover .fa {
    font-size: 14px;
}

.news-wall-col {
    display: inline-flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
    font-size: 14px;
    white-space: normal;
    padding-right: 30px;
}

.news-wall-row {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 300px;
    min-width: 300px;
}

    .news-wall-row:hover {
        cursor: pointer;
        text-decoration: none;
    }

.news-wall-file-container {
    justify-content: center;
}

.news-wall-category {
    display: block;
    position: relative;
    z-index: 1;
    margin-bottom: 10px;
}

.news-wall-row-xl {
    padding: 30px 20px;
    height: 100%;
}

.news-wall-file-container.news-wall-row-xl {
    padding-bottom: 68px;
}

.news-wall-row-m {
    padding: 20px;
    height: 205px;
    width: 248px;
    min-width: 248px;
}

.news-wall-file-container.news-wall-row-m {
    padding-bottom: 68px;
}

.news-wall-row-m + .news-wall-row-m {
    margin-top: 20px;
}

.news-wall-row-xs {
    padding: 15px;
    height: 130px;
    width: 248px;
    min-width: 248px;
}

.news-wall-file-container.news-wall-row-xs {
    padding-bottom: 63px;
}

.news-wall-row-xs + .news-wall-row-xs {
    margin-top: 20px;
}

.news-wall-title {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-weight: 600;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 1;
}

    .news-wall-title:before,
    .news-wall-title:after {
        display: none !important;
    }

.news-wall-row-xl .news-wall-title {
    font-size: 36px;
}

.news-wall-row-m .news-wall-title {
    font-size: 24px;
}

.news-wall-row-xs .news-wall-title {
    font-size: 20px;
}

.news-wall-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 0;
}

    .news-wall-background:before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    .news-wall-background img {
        width: 100%;
        position: relative;
        top: 50%;
        transform: translate(0, -50%);
        min-width: 100%;
        min-height: 100%;
    }

.news-wall-row p {
    margin-top: 10px;
    line-height: 20px;
}

.news-wall-file {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    align-items: center;
    font-weight: bold;
}

    .news-wall-file .img-container {
        width: 48px;
        min-width: 48px;
        height: 48px;
        overflow: hidden;
        position: relative;
    }

        .news-wall-file .img-container img {
            display: block;
            width: 48px;
            position: relative;
            top: 50%;
            transform: translate(0, -50%);
            min-height: 48px;
        }

.news-wall-file-desc {
    padding: 0 12px;
}

/* SPOC Menu *******************/

.spoc-container {
    display: flex;
    min-height: 100vh;
}

/* SPOC Left */

.spoc-sidebar-container {
    width: 320px;
    min-width: 320px;
}

.spoc-sidebar-header {
    position: relative;
}

.spoc-sidebar-breadcrumbs {
    height: 48px;
    padding: 10px 20px;
    box-sizing: border-box;
}

    .spoc-sidebar-breadcrumbs a:hover {
        text-decoration: none;
    }

    .spoc-sidebar-breadcrumbs a i {
        font-size: inherit;
        padding-right: 0;
    }

.spoc-sidebar-header .img-container:before {
    content: '';
    display: block;
    position: absolute;
    height: 100px;
    left: 0;
    right: 0;
    bottom: 0;
}

.spoc-sidebar-header img {
    display: block;
}

.spoc-sidebar-header .gauge-horizontal {
    height: inherit;
    bottom: 0;
    z-index: 2;
}

.spoc-sidebar-header .gauge-value {
    position: relative;
    left: 20px;
    bottom: 12px;
    font-size: 16px;
    font-weight: bold;
}

.spoc-sidebar-header .gauge-display {
    bottom: 0;
    height: 4px;
}

.spoc-sidebar-title {
    padding: 20px;
}

    .spoc-sidebar-title h5 {
        font-weight: bold;
    }

.spoc-side-menu {
    width: 100%;
    margin-top: 10px;
}

    .spoc-side-menu li,
    .spoc-side-menu a {
        display: block;
        width: 100%;
    }

    .spoc-side-menu a {
        padding: 15px 40px 15px 60px;
        box-sizing: border-box;
        text-decoration: none;
        line-height: 16px;
    }

        .spoc-side-menu a i {
            position: absolute;
            display: inline-block;
            width: 40px;
            text-align: center;
            margin-left: -50px;
            padding-right: 0;
            margin-right: 0;
            font-size: 14px;
            line-height: 16px;
        }

.spoc-sidebar .lesson-timeline {
    width: 100%;
    overflow: hidden;
}

    .spoc-sidebar .lesson-timeline .lesson-step .lesson-step-status {
        top: 12px;
    }

    .spoc-sidebar .lesson-timeline .lesson-step {
        padding: 15px 20px 15px 80px;
    }

        .spoc-sidebar .lesson-timeline .lesson-step:before {
            display: none;
        }

        .spoc-sidebar .lesson-timeline .lesson-step > span {
            display: block;
            white-space: normal;
            line-height: 18px;
            position: relative;
            overflow: visible;
        }

        .spoc-sidebar .lesson-timeline .lesson-step.done > span:before,
        .spoc-sidebar .lesson-timeline .lesson-step.current > span:before {
            content: '';
            display: block;
            position: absolute;
            width: 1px;
            left: -30px;
            bottom: 100%;
            top: -150px;
        }

@media (max-width: 768px) {

    .spoc-sidebar-container {
        position: fixed;
        top: 0;
        width: 320px;
        left: -320px;
        bottom: 0;
        z-index: 10;
        right: 50%;
        -webkit-transition: left 200ms;
        transition: left 200ms;
    }

        .spoc-sidebar-container.active {
            left: 0;
        }

        .spoc-sidebar-container:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            left: 100%;
            width: 100px;
            bottom: 0;
            opacity: 0;
            pointer-events: none;
            -webkit-transition: opacity 200ms;
            transition: opacity 200ms;
        }

        .spoc-sidebar-container.active:before {
            opacity: 1;
        }

        .spoc-sidebar-container .close-btn {
            position: absolute;
            right: 20px;
            top: 12px;
            z-index: 1;
            display: inline-flex;
            padding: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border-width: 1px;
            border-style: solid;
            align-items: center;
            justify-content: center;
        }

            .spoc-sidebar-container .close-btn i {
                padding-right: 0;
            }

    .spoc-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
    }
}

/* SPOC Right */

.spoc-content {
    width: calc(100% - 320px);
}

@media (max-width: 768px) {

    .spoc-content {
        width: 100%;
    }
}

/* SPOC Banner */

.spoc-banner {
    height: 48px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
}

    .spoc-banner a {
        display: flex;
        align-items: center;
    }

        .spoc-banner a.previous {
            margin-right: auto;
        }

        .spoc-banner a.next {
            margin-left: auto;
        }

        .spoc-banner a:hover {
            text-decoration: none;
        }

            .spoc-banner a:hover span {
                text-decoration: underline;
            }

/* SPOC Main Container */

.spoc-main-container .table-container > .timeline-table-accordion-button,
.spoc-main-container .table-container > .timeline-table-wrapper {
    min-width: 480px;
}

.spoc-main-container .table-container .timeline-table td {
    padding-right: 20px;
}

.spoc-main-container .table-container .timeline-table .status {
    border-width: 1px;
    left: -11px;
}

.spoc-main-container .table-container .timeline-table .status-current::before {
    left: 9px;
}

.spoc-cta-container {
    display: flex;
    text-align: left;
    align-items: center;
}

    .spoc-cta-container a {
        margin-right: 10px;
    }

.spoc-lesson-container {
    width: calc(100% - 20px);
    padding-left: 20px;
}

.spoc-lesson {
    display: flex;
    min-width: 480px;
    width: calc(100% - 20px);
    border-top-width: 2px;
    border-top-style: solid;
}

    .spoc-lesson:last-child {
        border-bottom-width: 2px;
        border-bottom-style: solid;
    }

    .spoc-lesson > div {
        padding: 15px 20px 30px 30px;
        position: relative;
    }

.spoc-lesson-content {
    width: 70%;
    padding-bottom: 30px;
    position: relative;
}

.spoc-lesson-action {
    width: 30%;
    display: flex;
    align-items: center;
}

.spoc-lesson:first-child > .spoc-lesson-content {
    padding-top: 30px;
}

.spoc-lesson-content .indentation {
    margin-left: 50px;
    position: relative;
}

.spoc-lesson-content .status {
    position: absolute;
    left: -10px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    z-index: 1;
}

.spoc-lesson .status-current::before {
    content: '';
    display: block;
    width: 1px;
    height: 21px;
    position: absolute;
    bottom: 18px;
    left: 7px;
}

.spoc-lesson-content .content {
    width: 100%;
    display: block;
    max-width: 100%;
    position: relative;
}

    .spoc-lesson-content .content:before {
        content: '';
        display: block;
        position: absolute;
        width: 1px;
        left: -30px;
        bottom: 100%;
        top: -150px;
    }

.spoc-lesson-content b {
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spoc-lesson-content p {
    white-space: normal;
    font-weight: normal;
}

.spoc-main-tutor-container {
    display: flex;
    width: 100%;
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

    .spoc-main-tutor-container .img-container {
        margin-right: 20px;
    }

.spoc-main-tutor h4 {
    display: block;
    margin-bottom: 10px;
}

.spoc-main-tutor .author-status {
    display: inline-block;
    margin-bottom: 10px;
}

/* Stakes - Learning Place */

.generic-wall-container {
    position: relative;
    overflow: hidden;
}

    .generic-wall-container .news-wall {
        flex-wrap: nowrap;
    }

    .generic-wall-container .preview,
    .generic-wall-container .news-wall-row {
        box-shadow: none;
    }

    .generic-wall-container .news-wall-small-row {
        height: 84px;
        padding: 20px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        border-radius: 4px;
        font-size: 18px;
        line-height: 24px;
    }

        .generic-wall-container .news-wall-small-row:first-child {
            margin-top: 40px;
        }
    /*
    .generic-wall-container .preview {
        margin-bottom: 10px;
    }
    */
    .generic-wall-container .news-wall-col > a,
    .generic-wall-container .news-wall-col > div {
        min-height: 100%;
    }

    *::-ms-backdrop, .generic-wall-container .news-wall-col > a,
    *::-ms-backdrop, .generic-wall-container .news-wall-col > div { /* IE11 */
        min-height: 0;
    }

    .generic-wall-container .news-wall-col > div {
        cursor: inherit;
    }

    .generic-wall-container .news-wall,
    .generic-wall-container .news-wall-btn {
        height: auto;
    }

    .generic-wall-container .news-wall-btn {
        z-index: 8;
    }

#progression-stakes .news-wall,
#progression-stakes .news-wall-btn {
    height: 390px;
}

#progression-stakes .news-wall-row {
    width: 275px;
    min-width: 275px;
}

#progression-stakes .news-wall-pagination {
    display: none;
}

.learning-main-container,
.learning-main-presentation {
    height: 280px;
}

.learning-main-presentation {
    border-radius: 12px;
    overflow: hidden;
    width: 380px;
    min-width: 380px;
    overflow: hidden;
    position: relative;
}

    .learning-main-presentation .generic-wall-container {
        margin-left: 0;
        width: 100%;
    }

        .learning-main-presentation .generic-wall-container .news-wall-col {
            position: relative;
            height: 280px;
            padding-left: 0;
            padding-right: 0;
        }

            .learning-main-presentation .generic-wall-container .news-wall-col > a,
            .learning-main-presentation .generic-wall-container .news-wall-col > div {
                width: 380px;
                height: 280px;
            }

    .learning-main-presentation .news-wall-col,
    .learning-main-presentation .news-wall-col img {
        width: 380px;
        min-width: 380px;
    }

    .learning-main-presentation .learning-video-title {
        position: absolute;
        bottom: 100px;
        left: 50%;
        z-index: 1;
        margin-left: -30px;
    }

        .learning-main-presentation .learning-video-title,
        .learning-main-presentation .learning-video-title h2 {
            line-height: 30px;
        }

    .learning-main-presentation .news-wall-col .cta-action {
        position: absolute;
        bottom: 30px;
        margin: 0 auto;
        z-index: 1;
        left: 50%;
        width: 60px;
        height: 60px;
        margin-left: -30px;
    }

        .learning-main-presentation .news-wall-col .cta-action .fa {
            width: 60px;
            min-width: 60px;
            height: 60px;
            line-height: 60px;
        }

    .learning-main-presentation .news-wall-btn {
        display: none;
    }

    .learning-main-presentation .news-wall-pagination {
        position: absolute;
        width: auto;
        left: 0;
        right: 30px;
        bottom: 30px;
        justify-content: flex-end;
    }

    .learning-main-presentation .news-wall-shortcut .fa,
    .learning-main-presentation .news-wall-shortcut:hover .fa,
    .learning-main-presentation .news-wall-shortcut .fa:hover,
    .learning-main-presentation .news-wall-shortcut .fa {
        font-size: 14px;
    }

    .learning-main-presentation .news-wall-pagination .current,
    .learning-main-presentation .news-wall-pagination .current .fa,
    .learning-main-presentation .news-wall-pagination .current:hover .fa {
        font-size: 18px;
    }

    .learning-main-presentation .news-wall-pagination a + a {
        margin-left: 12px;
    }

@media (max-width: 768px) {

    .learning-main-presentation {
        margin: 0 auto 20px;
    }
}

.stake-header {
    padding: 20px 20px 35px;
    position: relative;
}

    .stake-header h4 {
        margin-left: 20px;
    }

.stake-card:not(.has-progress) .gauge-horizontal {
    display: none;
}

.stake-header .gauge-value {
    bottom: 10px;
    left: 20px;
    display: inline-block;
    width: 48px;
    text-align: center;
}

.stake-content {
    padding: 20px;
}

    .stake-content .counter {
        padding: 0 20px;
        text-transform: inherit;
        font-size: 14px;
    }

        .stake-content .counter > span {
            font-size: 42px;
            font-weight: bolder;
            margin-bottom: 10px;
        }

        .stake-content .counter span span {
            display: inline;
            font-size: 24px;
            font-weight: normal;
        }

    .stake-content .stake-value {
        min-width: 30px;
        font-size: 24px;
        font-weight: normal;
        margin-right: 20px;
    }

        .stake-content .stake-value.large {
            font-size: 42px;
            font-weight: bolder;
        }

    .stake-content .collab-pic-list {
        margin-bottom: 2px;
    }

    .stake-content .cta-contextual {
        width: 100%;
        box-sizing: border-box;
        height: 52px;
    }

.collab-pic-list {
    display: flex;
}

    .collab-pic-list.small img:first-child {
        z-index: 6;
    }

    .collab-pic-list.small img:nth-child(2) {
        z-index: 5;
    }

    .collab-pic-list.small img:nth-child(3) {
        z-index: 4;
    }

    .collab-pic-list.small img:nth-child(4) {
        z-index: 3;
        opacity: 0.8;
    }

    .collab-pic-list.small img:nth-child(5) {
        z-index: 2;
        opacity: 0.6;
    }

    .collab-pic-list.small img:nth-child(6) {
        z-index: 1;
        opacity: 0.4;
    }

    .collab-pic-list img {
        border-width: 4px;
        border-style: solid;
    }

    .collab-pic-list.small img {
        border-width: 2px;
        border-style: solid;
    }

    .collab-pic-list img:not(:first-child) {
        margin-left: -18px;
    }

    .collab-pic-list.small img:not(:first-child) {
        margin-left: -15px;
    }

.learning-current-stakes-container .card-mode {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.learning-formations-container .news-wall-pagination,
.learning-top-formations-container .news-wall-pagination {
    display: none;
}

.learning-formations-container .news-wall,
.learning-top-formations-container .news-wall {
    padding-bottom: 10px;
}

*::-ms-backdrop, .my-stakes-container .card-mode { /* IE11 */
    flex-wrap: nowrap;
}

.my-stakes-container .title-container .pic-84 {
    margin-right: 20px;
}

.my-stakes-container .title-container h4 {
    margin-top: 20px;
}

.my-stakes-container .news-wall-pagination {
    display: none;
}

.my-stakes-container .generic-wall-container .card-mode {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: inherit;
    grid-gap: 0;
}

.my-stakes-container .generic-wall-container .news-wall-col.intro {
    height: 100%;
}

.my-stakes-container .generic-wall-container .intro-p {
    padding: 0 20px;
    line-height: 30px;
}

.my-stakes-container .generic-wall-container .news-wall-col.ending {
    position: relative;
    min-height: calc(100% - 10px);
    height: calc(100% - 10px);
}

    .my-stakes-container .generic-wall-container .news-wall-col.ending .news-wall-row {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        line-height: 36px;
        border-width: 2px;
        border-style: solid;
        border-radius: 5px;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
    }

*::-ms-backdrop, .my-stakes-container .generic-wall-container .card-mode { /* IE11 */
    align-items: center;
}

.my-stakes-container .generic-wall-container {
    margin-left: -20px;
    padding-left: 20px;
}

    .my-stakes-container .generic-wall-container .news-wall-btn {
        height: 100%;
        border-radius: 0;
        width: 40px;
        display: flex;
        top: 0;
    }

        .my-stakes-container .generic-wall-container .news-wall-btn i {
            position: relative;
            z-index: 1;
            width: 40px;
            height: 40px;
            font-size: 12px;
            padding: 0;
        }

        .my-stakes-container .generic-wall-container .news-wall-btn:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 20px;
        }

    .my-stakes-container .generic-wall-container .news-wall-previous-btn {
        left: 0;
    }

        .my-stakes-container .generic-wall-container .news-wall-previous-btn:before {
            left: 0;
            border-right-style: solid;
            border-right-width: 2px;
        }

    .my-stakes-container .generic-wall-container .news-wall-next-btn {
        right: 0;
    }

        .my-stakes-container .generic-wall-container .news-wall-next-btn:before {
            right: 0;
            border-left-style: solid;
            border-left-width: 2px;
        }

@media (max-width: 1024px) {

    .learning-current-stakes-container .title-container {
        justify-content: space-between;
    }

    .learning-current-stakes-container > .col-container {
        flex-wrap: wrap;
    }

        .learning-current-stakes-container > .col-container > .col-4,
        .learning-current-stakes-container > .col-container > .col-8 {
            width: 100%;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .learning-current-stakes-container > .col-container > [class*="col-"] + [class*="col-"] {
            margin-top: 40px;
        }

    .learning-current-stakes-container .default-course-preview {
        max-width: 300px;
        min-width: 280px;
    }

    .learning-formations-container .card-mode,
    .learning-top-formations-container .card-mode {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {

    .my-stakes-container .title-container .pic-84 {
        display: none;
    }

    .my-stakes-container .title-container {
        justify-content: space-between;
    }
}

/* Lesson Menu */

.lesson-menu-main-container {
    width: 100%;
}

.col-lesson-menu-container {
    position: relative;
    min-height: 240px;
    padding-top: 20px !important;
}

    .col-lesson-menu-container .col-lesson-menu-sidebar {
        width: 300px;
        min-width: 300px;
        position: absolute;
        top: 100%;
        margin-top: -200px;
        padding-right: 0 !important;
        border-radius: 4px;
        overflow: hidden;
    }

.col-lesson-menu-sidebar .image-container {
    overflow: hidden;
    width: 300px;
    min-width: 300px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .col-lesson-menu-sidebar .image-container img {
        min-width: 100%;
        min-height: 200px;
        width: auto;
    }

.col-lesson-menu-sidebar .subject-type {
    display: inline-flex;
    align-items: center;
    font-weight: bold;
    font-size: 13px;
}

    .col-lesson-menu-sidebar .subject-type img {
        display: inline-block;
        width: auto !important;
        height: auto !important;
        padding-right: 10px;
    }

.col-lesson-menu-sidebar a i + span {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    position: relative;
    top: -2px;
}

.col-lesson-menu-sidebar p {
    font-size: 13px;
    line-height: 20px;
}

.col-lesson-menu-container .col-lesson-menu-header {
    margin-left: 300px;
    padding-left: 30px !important;
}

.col-lesson-menu-header .breadcrumbs-container {
    margin-top: -20px;
    margin-bottom: 10px;
}

.col-lesson-menu-header .three-col-container {
    align-items: center;
}

.col-lesson-menu-header .data {
    display: inline-flex;
    align-items: center;
    padding-right: 25px;
    padding-bottom: 10px;
}

    .col-lesson-menu-header .data span {
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
        padding-top: 4px;
    }

        .col-lesson-menu-header .data span.nowrap {
            white-space: nowrap;
        }

.col-lesson-menu-header a.data:hover span {
    text-decoration: underline;
}

.col-lesson-menu-header .data i {
    font-size: 24px;
    margin-right: 10px;
}

.col-lesson-menu-header .data:hover,
.col-lesson-menu-header .data:hover i {
    text-decoration: none;
}

.col-lesson-menu-header .data img {
    height: 30px;
    width: 30px;
    min-width: 30px;
    margin-right: 10px;
}

.col-lesson-menu-content {
    margin-left: 330px;
    width: calc(100% - 330px);
    min-height: 400px;
}

    .col-lesson-menu-content .list-mode .preview.default-course-preview .list-preview-content .optional-action,
    .col-lesson-menu-content .list-mode .preview.default-course-preview .list-preview-content .cta-container {
        display: none;
    }

.lesson-list-container {
    list-style-type: none;
}

.lesson-list-instance {
    display: flex;
    border-top-style: solid;
    border-top-width: 4px;
}

    .lesson-list-instance:last-child {
        border-bottom-style: solid;
        border-bottom-width: 4px;
    }

    .lesson-list-instance.current,
    .lesson-list-instance.current + .lesson-list-instance {
        border-top: none;
    }

.lesson-list-instance-option {
    width: 100px;
    min-width: 100px;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .lesson-list-instance-option a {
        justify-content: center;
    }

    .lesson-list-instance-option i {
        font-size: 32px;
    }

.lesson-list-instance-content {
    border-left-width: 1px;
    border-left-style: solid;
    padding: 20px 20px 20px 30px;
    position: relative;
    width: 100%;
    line-height: 22px;
    display: flex;
    align-items: center;
}

    .lesson-list-instance-content > .status {
        position: absolute;
        left: -13px;
        top: 50%;
        margin-top: -10px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 10px;
        line-height: 20px;
        text-align: center;
        border-width: 2px;
        border-style: solid;
        z-index: 1;
    }

        .lesson-list-instance-content > .status i {
            font-size: inherit;
            padding-right: 0;
        }

    .lesson-list-instance-content h5 {
        font-size: 16px;
        font-weight: 600;
    }

    .lesson-list-instance-content .content .status {
        font-weight: bold;
    }

.lesson-list-instance-action {
    padding: 20px;
    position: relative;
    width: 30%;
    min-width: 160px;
    display: flex;
    align-items: center;
}

    .lesson-list-instance .cta-action,
    .lesson-list-instance-action a {
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
    }

.lesson-list-instance-content .stats span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
}

    .lesson-list-instance-content .stats span + span {
        margin-left: 10px;
        padding-left: 10px;
        border-left-style: solid;
        border-left-width: 1px;
    }

@media (max-width: 1024px) {

    .lesson-menu-main-container {
        position: static !important;
    }

        .lesson-menu-main-container + * {
            margin-top: 0 !important;
        }

    .col-lesson-menu-container {
        display: flex;
        flex-wrap: wrap;
    }

        .col-lesson-menu-container .col-lesson-menu-sidebar {
            position: relative;
            display: flex;
            min-width: auto;
            width: auto !important;
            margin-top: 40px;
            flex-wrap: wrap;
            padding: 20px !important;
        }

    .col-lesson-menu-sidebar .image-container {
        min-width: auto;
        max-width: 100%;
    }

    .col-lesson-menu-container .col-lesson-menu-sidebar > .inner {
        padding-bottom: 0;
    }

    .col-lesson-menu-container .col-lesson-menu-header {
        order: -1;
        margin-left: 0;
        padding-left: 0 !important;
    }

    .col-lesson-menu-header .col-container {
        flex-wrap: wrap;
    }

    .col-lesson-menu-content {
        margin-left: 0;
        width: 100%;
    }

    .lesson-list-instance {
        width: -webkit-fill-available;
        width: fit-content;
        min-width: 100%;
    }

    .lesson-list-instance-option {
        width: 60px;
        min-width: 60px;
        min-height: 60px;
    }

        .lesson-list-instance-option i {
            font-size: 24px;
        }

    .lesson-list-instance-content {
        padding: 20px;
        min-width: 120px;
    }

        .lesson-list-instance-content .stats span {
            display: block;
            height: auto;
            line-height: 18px;
        }

            .lesson-list-instance-content .stats span + span {
                margin-left: 0;
                padding-left: 0;
                border: none;
            }
}

/* Lesson Catalogue Menu */

.col-lesson-catalogue-main-container {
    position: relative;
    min-height: 240px;
    padding-top: 20px !important;
}

    .col-lesson-catalogue-main-container .col-lesson-menu-header {
        width: calc(100% - 300px);
        padding-right: 30px !important;
    }

    .col-lesson-catalogue-main-container .col-lesson-menu-sidebar {
        width: 300px;
        min-width: 300px;
        position: absolute;
        top: 100%;
        margin-top: -200px;
        padding-left: 0 !important;
        border-radius: 4px;
        overflow: hidden;
        right: 0;
    }

        .col-lesson-catalogue-main-container .col-lesson-menu-sidebar.active {
            right: auto;
            left: 50%;
            transform: translate(212px, 0);
            margin-top: 0px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

.col-lesson-menu-sidebar .col-container + .col-container {
    margin-top: 10px;
}

.col-lesson-menu-sidebar .data {
    font-size: 15px;
}

    .col-lesson-menu-sidebar .data i {
        font-size: 16px;
        display: inline-block;
        width: 15px;
    }

.col-lesson-menu-sidebar .star-ranking-container {
    margin-left: 0;
}

.col-lesson-menu-sidebar .star-ranking {
    padding-right: 10px;
}

.followers-pic-list {
    display: flex;
    align-items: center;
}

    .followers-pic-list.small img:first-child {
        z-index: 3;
    }

    .followers-pic-list.small img:nth-child(2) {
        z-index: 2;
        opacity: 0.6;
    }

    .followers-pic-list.small img:nth-child(3) {
        z-index: 1;
        opacity: 0.4;
    }

    .followers-pic-list img {
        border-width: 4px;
        border-style: solid;
    }

    .followers-pic-list.small img {
        border-width: 2px;
        border-style: solid;
    }

    .followers-pic-list img:not(:first-child) {
        margin-left: -18px;
    }

    .followers-pic-list.small img:not(:first-child) {
        margin-left: -15px;
    }

    .followers-pic-list span {
        padding-left: 10px;
    }

.col-lesson-catalogue-content {
    margin-right: 330px;
    width: calc(100% - 330px);
    min-height: 400px;
}

    *::-ms-backdrop, .col-lesson-catalogue-content .col-container img { /* IE11 */
        width: 100%;
    }

.lesson-list-container.small .lesson-list-instance:first-child {
    border-top: none;
}

.lesson-list-container.small .lesson-list-instance {
    border-top-width: 2px;
}

    .lesson-list-container.small .lesson-list-instance:last-child {
        border-bottom-width: 2px;
    }

.lesson-list-container.small .lesson-list-instance-option {
    width: 40px;
    min-width: 40px;
    min-height: 60px;
}

    .lesson-list-container.small .lesson-list-instance-option i {
        font-size: 18px;
    }

.lesson-list-container.small .lesson-list-instance-content {
    padding: 15px;
}

    .lesson-list-container.small .lesson-list-instance-content h5 {
        font-size: 14px;
        font-weight: 600;
    }

.col-lesson-catalogue-content .list-mode .preview.default-course-preview .list-preview-content .optional-action,
.col-lesson-catalogue-content .list-mode .preview.default-course-preview .list-preview-content .cta-container {
    display: none;
}

@media (max-width: 1024px) {

    .col-lesson-catalogue-main-container {
        display: flex;
        flex-wrap: wrap;
    }

        .col-lesson-catalogue-main-container .col-lesson-menu-header {
            width: 100%;
            padding-right: 0 !important;
        }

        .col-lesson-catalogue-main-container .col-lesson-menu-sidebar,
        .col-lesson-catalogue-main-container .col-lesson-menu-sidebar.active {
            position: static !important;
            transform: none;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            margin-top: 20px !important;
            padding: 20px !important;
            display: flex;
            min-width: auto;
            width: auto !important;
            flex-wrap: wrap;
        }

            .col-lesson-catalogue-main-container .col-lesson-menu-sidebar .image-container {
                min-width: auto;
                max-width: 100%;
                margin-right: 20px;
            }

                .col-lesson-catalogue-main-container .col-lesson-menu-sidebar .image-container + .inner {
                    padding-left: 0;
                    padding-bottom: 0;
                }

    .col-lesson-catalogue-content {
        width: 100%;
        margin-right: 0;
    }
}

/* Learning Place Catalogue *******************/

.catalogue-search-container.default-catalogue-search-container {
    align-items: center;
    justify-content: space-between;
}

    .catalogue-search-container.default-catalogue-search-container label input {
        border-radius: 0;
    }

.catalogue-sidebar-button {
    cursor: pointer;
    min-width: 240px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.catalogue-sidebar-button {
    line-height: 46px;
    font-size: 16px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    padding: 0 10px;
}

.catalogue-sidebar-list-container:not(.open) {
    display: none;
}

.catalogue-sidebar-list li > .catalogue-sidebar-list {
    display: none;
}

.catalogue-sidebar-list li.selected > .catalogue-sidebar-list {
    display: block;
}

.catalogue-sidebar-list-container {
    position: relative;
    top: -40px;
    bottom: 0;
    width: 300px;
    z-index: 10;
}

.catalogue-sidebar-list {
    width: 300px;
    position: absolute;
    top: 0;
    padding: 30px;
    box-sizing: border-box;
    min-height: 640px;
}

    .catalogue-sidebar-list h4 {
        margin-bottom: 10px;
    }

    .catalogue-sidebar-list .catalogue-sidebar-list {
        left: 300px;
        top: 0;
        bottom: 0;
    }

    .catalogue-sidebar-list .catalogue-sidebar-list-shadow {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        bottom: 0;
        width: 50px;
        left: 0;
        overflow: hidden;
        pointer-events: none;
    }

        .catalogue-sidebar-list .catalogue-sidebar-list-shadow:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 150px;
            left: -150px;
        }

    .catalogue-sidebar-list .title-container {
        margin-bottom: 20px;
    }

        .catalogue-sidebar-list .title-container h4 {
            margin-bottom: 0;
        }

        .catalogue-sidebar-list .title-container i {
            padding-right: 0;
        }

    .catalogue-sidebar-list ul {
        list-style-type: none;
    }

    .catalogue-sidebar-list li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-left: -30px;
        padding: 15px 30px;
        width: calc(100% + 60px);
        box-sizing: border-box;
        cursor: pointer;
    }

        .catalogue-sidebar-list li > i,
        .catalogue-sidebar-list li > span {
            pointer-events: none;
        }

        .catalogue-sidebar-list li a:not(.close-btn) {
            display: block;
            width: 100%;
        }

.catalogue-sidebar-filter.accordion {
    padding: 0;
}

.catalogue-sidebar-filter:not(:last-child) {
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding-bottom: 10px;
}

.catalogue-sidebar-filter h4 {
    margin-bottom: 10px;
}

.catalogue-sidebar-filter .accordion-button {
    display: flex;
    position: static;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .catalogue-sidebar-filter .accordion-button h4 {
        margin-bottom: 0;
    }

.catalogue-sidebar-list-container ~ .title-container .settings {
    margin-left: 20px;
}

.catalogue-main-container .catalogue-sidebar-filter-container > .cta-contextual {
    margin-bottom: 20px;
}

@media (max-width: 1024px) {

    .catalogue-sidebar-list-container.open {
        position: fixed;
        top: 0;
        left: 0;
    }

        .catalogue-sidebar-list-container.open .catalogue-sidebar-list {
            bottom: 0;
        }

    .catalogue-sidebar-list li.selected > .catalogue-sidebar-list {
        left: 20px;
    }

    .catalogue-sidebar-list .catalogue-sidebar-list-shadow {
        display: none;
    }

    .catalogue-main-container {
        flex-wrap: wrap;
    }

        .catalogue-main-container .catalogue-sidebar-filter-container {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-right: 0 !important;
        }

            .catalogue-main-container .catalogue-sidebar-filter-container > .cta-contextual {
                margin-top: 40px;
                margin-bottom: 0;
                order: 2;
            }

        .catalogue-main-container .catalogue-course-preview-container {
            width: 100%;
            margin-top: 40px;
            padding-left: 0 !important;
        }

            .catalogue-main-container .catalogue-course-preview-container .card-mode,
            .catalogue-main-container .catalogue-course-preview-container .list-mode {
                margin-top: 40px;
            }
}

@media (max-width: 768px) {

    .catalogue-sidebar-list .title-container {
        justify-content: space-between;
    }

    .catalogue-search-container.default-catalogue-search-container .hearted-total {
        position: static;
    }

    .catalogue-search-container.default-catalogue-search-container .catalogue-sidebar-button {
        width: 100%;
        margin-bottom: 20px;
    }

    .catalogue-search-container.default-catalogue-search-container > .col-container label {
        margin-left: 0;
    }

    .catalogue-sidebar-list-container ~ .title-container {
        flex-wrap: wrap;
    }

        .catalogue-sidebar-list-container ~ .title-container .custom-select-container {
            margin-left: 0;
        }
}

/* Dashboard *******************/

.dashboard-presentation-container {
    position: relative;
    display: flex;
    width: 100%;
}

    .dashboard-presentation-container .image-container {
        width: 380px;
        display: flex;
        align-items: center;
    }

.dashboard-presentation-content {
    width: calc(100% - 380px);
    padding: 0 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.dashboard-presentation-container.logged-in {
    position: relative;
    overflow: hidden;
}

    .dashboard-presentation-container.logged-in:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }

    .dashboard-presentation-container.logged-in .dashboard-presentation-content {
        flex-direction: row;
        padding-right: 0;
        position: relative;
        box-sizing: border-box;
        width: calc(100% - 380px);
    }

    *::-ms-backdrop, .dashboard-presentation-container.logged-in .dashboard-presentation-content { /* IE11 */
        padding: 20px 20px 10px 40px;
    }

.dashboard-presentation-objectives {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 200px);
}

.dashboard-presentation-cta-container {
    width: 100%;
}

.dashboard-presentation-achievements {
    display: flex;
    margin: 10px 0;
}

.dashboard-latest-achievement {
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    .dashboard-latest-achievement h5 {
        margin-bottom: 5px;
    }

    .dashboard-latest-achievement .dashboard-trophy {
        width: 100%;
        margin: auto;
    }

.dashboard-presentation-status {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dashboard-presentation-status p {
        font-size: 14px;
        line-height: 18px;
    }

.dashboard-presentation-ranking {
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    overflow: hidden;
    text-align: right;
    box-sizing: border-box;
    padding-right: 20px;
    padding-bottom: 20px;
    right: 0;
}

    .dashboard-presentation-ranking span,
    .dashboard-presentation-ranking div {
        position: relative;
        z-index: 1;
    }

    .dashboard-presentation-ranking:after {
        content: '';
        display: block;
        position: absolute;
        width: 220px;
        height: 200px;
        right: 10px;
        bottom: 10px;
        border-radius: 10px;
        transform: rotate(45deg) translate(85px, -10px);
    }

.dashboard-ranking-icon {
    font-size: 42px;
}

.dashboard-ranking-position {
    font-size: 16px;
}

    .dashboard-ranking-position .value {
        font-size: 24px;
        font-weight: bold;
    }

.dashboard-ranking-caption {
    margin-top: 10px;
}

.dashboard-presentation-content h1 {
    margin-bottom: 20px;
    line-height: 48px;
}

.dashboard-skills-container {
    display: flex;
    margin-top: 20px;
}

.dashboard-skills-content {
    display: flex;
    flex-wrap: wrap;
    width: 25%;
}

    .dashboard-skills-content h4 {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

.dashboard-skill {
    width: calc(50% - 20px);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    text-align: center;
    justify-content: center;
}

    .dashboard-skill:nth-of-type(1) {
        margin-left: 20px;
    }

    .dashboard-skill:nth-of-type(2) {
        margin-right: 20px;
    }

    .dashboard-skill h5 {
        width: 100%;
        margin-bottom: 10px;
    }

.dashboard-leaderboard-container {
    display: flex;
    width: 100%;
    font-size: 12px;
}

.dashboard-leaderboard-col {
    display: flex;
    flex-direction: column;
    width: calc(24% - 15px);
    justify-content: space-between;
}

    .dashboard-leaderboard-col:not(:last-child) {
        margin-right: 15px;
    }

.dashboard-leaderboard-row {
    display: flex;
    align-items: center;
}

    .dashboard-leaderboard-row:not(:first-child) {
        margin-top: 10px;
    }

    .dashboard-leaderboard-row img {
        margin-right: 5px;
    }

.dashboard-leaderboard-col:not(.active) .dashboard-leaderboard-position {
    display: block;
    font-weight: bold;
    font-size: 14px;
}

.dashboard-leaderboard-col.active {
    width: 28%;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: right;
    padding-right: 20px;
    box-sizing: border-box;
}

    .dashboard-leaderboard-col.active > span {
        display: block;
        width: 100%;
        text-align: left;
        font-size: 14px;
        margin-bottom: 5px;
    }

    .dashboard-leaderboard-col.active .dashboard-leaderboard-row {
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-start;
        width: 100%;
        margin-top: 0;
    }

    .dashboard-leaderboard-col.active .dashboard-leaderboard-position {
        display: block;
        height: 36px;
        line-height: 36px;
        text-align: right;
        width: calc(100% - 32px);
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        padding: 0 10px;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 20px;
        margin: 5px 0 5px 32px;
        position: relative;
    }

    .dashboard-leaderboard-col.active .dashboard-leaderboard-row > b {
        margin-left: 48px;
    }

    .dashboard-leaderboard-col.active .image-container {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 50%;
        margin-top: -32px;
        position: absolute;
        z-index: 1;
        left: -32px;
        top: 50%;
        margin-top: -32px;
    }

        .dashboard-leaderboard-col.active .image-container img {
            margin-right: 0;
        }

.dashboard-trophies {
    display: flex;
    flex-wrap: wrap;
}

.dashboard-trophy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(25% - 4px);
    text-align: center;
    font-size: 12px;
    margin: 0 2px;
    box-sizing: border-box;
}

    .dashboard-trophy img {
        margin-bottom: 5px;
    }

    .dashboard-trophy span {
        font-size: 10px;
    }

@media (max-width: 1024px) {

    .dashboard-presentation-container.logged-in {
        flex-wrap: wrap;
    }

        .dashboard-presentation-container.logged-in .dashboard-presentation-content {
            width: 100%;
            padding: 0;
            margin-top: 20px;
        }

    .dashboard-presentation-container .image-container {
        width: 35%;
    }

    .dashboard-presentation-container.logged-in .image-container {
        margin: 20px auto 0;
    }

    .dashboard-presentation-content {
        width: 65%;
    }

    .dashboard-skills-container {
        flex-wrap: wrap;
    }

    .dashboard-skills-content {
        width: 50%;
    }

        .dashboard-skills-content:nth-child(n + 3) {
            margin-top: 20px;
        }

    .dashboard-skill {
        width: 50%;
    }

        .dashboard-skill:nth-of-type(1),
        .dashboard-skill:nth-of-type(2) {
            margin-left: 0;
            margin-right: 0;
        }

    .dashboard-prizes {
        flex-wrap: wrap;
    }

        .dashboard-prizes > [class*="col-"] {
            width: 100%;
            padding: 0 !important;
        }

            .dashboard-prizes > [class*="col-"] + [class*="col-"] {
                margin-top: 20px;
            }

    .dashboard-leaderboard-col.active {
        padding-right: 0;
    }

    .dashboard-prizes > [class*="col-"] {
        width: 100%;
        padding: 0 !important;
    }
}

@media (max-width: 768px) {

    .dashboard-presentation-container {
        flex-wrap: wrap;
    }

        .dashboard-presentation-container .image-container {
            width: 100%;
            text-align: center;
        }

            .dashboard-presentation-container .image-container img {
                margin: 0 auto;
            }

    .dashboard-presentation-content {
        width: 100%;
        margin-top: 20px;
    }

    .dashboard-presentation-container.logged-in .dashboard-presentation-content {
        flex-wrap: wrap;
    }

    .dashboard-presentation-objectives {
        width: 100% !important;
    }

    .dashboard-presentation-ranking {
        margin-top: 20px;
        height: 220px;
        width: 100%;
    }

    .dashboard-presentation-gauge-container {
        position: absolute;
        bottom: 20px;
        left: 20px;
        width: calc(100% - 240px);
    }

    .dashboard-skills-content {
        width: 100%;
    }

        .dashboard-skills-content:nth-child(n + 2) {
            margin-top: 20px;
        }

    .dashboard-leaderboard-container {
        flex-wrap: wrap;
    }

    .dashboard-leaderboard-col,
    .dashboard-leaderboard-col.active {
        width: 50%;
        padding-right: 20px;
        box-sizing: border-box;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

        .dashboard-leaderboard-col:nth-child(n + 3) {
            margin-top: 20px;
        }

        .dashboard-leaderboard-col.active .dashboard-leaderboard-position img {
            display: block;
            width: 64px;
            max-width: 64px;
            min-width: 64px;
            height: 64px;
            max-height: 64px;
        }

    .dashboard-gauges {
        flex-wrap: wrap !important;
    }

        .dashboard-gauges > [class*="col-"] + [class*="col-"] {
            margin-top: 20px;
        }
}

/* Trainings *******************/

.main-container .colored-row-container.trainings {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.trainings-main-container {
    display: flex;
    display: grid;
    grid-template-columns: 1fr 320px;
    width: 100%;
    margin-top: -40px;
    margin-bottom: -40px;
}

.trainings-main-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-right: 20px;
    border-right-width: 1px;
    border-right-style: solid;
    margin-top: 0;
    padding-top: 40px;
    box-sizing: border-box;
}

    .trainings-main-content .breadcrumbs-container {
        margin-top: 10px;
        margin-bottom: 10px;
    }

.trainings-numbers-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
    gap: 20px;
    margin-left: inherit;
    margin-right: inherit;
}

.training-numbers-summary {
    width: 100%;
    height: 220px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.training-value-container {
    display: flex;
    width: 100%;
    align-items: center;
    line-height: 48px;
}

    .training-value-container:not(:first-child) {
        border-top: 1px solid transparent;
    }

.training-numbers-summary .training-value {
    font-size: 30px;
    font-weight: bold;
    margin-right: 10px;
}

.training-counter {
    width: 100%;
    height: 220px;
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .training-counter .training-value {
        font-size: 48px;
        line-height: 48px;
        font-weight: bold;
    }

    .training-counter span {
        display: block;
        font-size: 16px;
        font-weight: inherit;
        letter-spacing: 0;
        text-transform: inherit;
    }

.training-counter-footer {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    bottom: 0;
    height: 40px;
    left: 0;
    right: 0;
    text-align: center;
}

.trainings-badges-container.inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: center;
    padding-bottom: 10px;
}

.trainings-main-current.list-mode,
.trainings-main-current.card-mode {
    grid-gap: 0;
    padding: 20px 20px 30px;
    text-align: left;
}

    .trainings-main-current.list-mode h3,
    .trainings-main-current.card-mode h3 {
        width: 100%;
        text-align: left;
    }

.trainings-main-current .preview {
    max-width: 320px;
    justify-self: center;
}

.training-badge {
    width: 110px;
    margin-right: 24px;
    text-align: center;
    margin-bottom: 20px;
}

    .training-badge .img-container {
        width: 84px;
        height: 84px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        border-radius: 50%;
        overflow: hidden;
    }

        .training-badge .img-container img {
            max-width: 84px;
            max-height: 84px;
        }

    .training-badge:not(.owned) .img-container {
        border: 2px dashed transparent;
    }

.trainings-list-container .custom-select-container {
    margin-right: 20px;
}

.trainings-list-container .trainings-list {
    max-width: 960px;
    margin: 40px auto 0;
}

.trainings-list-container .list-mode,
.trainings-list-container .card-mode {
    margin: 20px auto 0;
}

.trainings-list-container .card-mode {
    grid-template-columns: repeat(auto-fill, minmax(1fr, 320px));
}

@media (max-width: 1280px) {

    .trainings-main-container {
        display: block;
    }

        .trainings-main-container .trainings-main-content {
            width: 100%;
            padding-bottom: 20px;
        }

    .training-numbers-summary,
    .training-counter {
        width: calc(25% - 15px);
    }

        .training-counter:last-child {
            margin-right: 0;
        }

    .trainings-main-container .trainings-main-current {
        width: calc(100% + 60px);
        margin-top: 20px;
        padding: 30px;
        margin-left: -30px;
        display: block;
    }

        .trainings-main-container .trainings-main-current .preview {
            margin: 0 auto;
        }

    .trainings-list-container .custom-select-container {
        margin-right: 0;
    }
}

@media (max-width: 768px) {

    .trainings-main-container {
        margin-bottom: -20px;
    }

    .trainings-numbers-container {
        flex-wrap: wrap;
    }

    .training-numbers-summary,
    .training-counter {
        width: calc(50% - 10px);
    }

        .training-counter:nth-child(2n) {
            margin-right: 0;
        }

        .training-counter:nth-child(n + 2) {
            margin-top: 20px;
        }

    .trainings-main-container .trainings-main-current {
        width: calc(100% + 40px);
        margin-left: -20px;
    }

    .trainings-list-container .title-container {
        flex-wrap: wrap;
    }

    .trainings-list-container h1 {
        width: 100%;
    }
}

/* Passeport Formation *******************/

.passeport-formation-header {
    max-width: 964px !important;
    position: relative;
    top: 40px;
    padding: 40px;
    display: flex;
    align-items: center;
}

    .passeport-formation-header .img-container {
        min-width: 120px;
    }

.passeport-formation-user-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

    .passeport-formation-user-container h1 {
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

.passeport-formation-user {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    font-weight: bold;
}

.user-badge-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.user-badge {
    display: inline-flex;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
}

.user-badge-container h2 {
    margin-top: 16px;
    margin-bottom: 0;
}

.passeport-formation-header .recap-data {
    width: 200px;
    min-width: 200px;
}

.passeport-formation-table-container .table-list li:not(.header) .table-list-col {
    font-size: 14px;
}

.passeport-formation-table-container h3 {
    font-size: 20px;
    margin-bottom: 10px;
}

.passeport-formation-table-container i {
    font-size: 16px;
}

.passeport-formation-table-container .table-list-col:last-child {
    justify-content: center;
}

@media screen and (max-width: 1080px) {

    .passeport-formation-header {
        margin: 0 30px !important;
        width: auto !important;
    }
}

@media screen and (max-width: 1024px) {

    .passeport-formation-user {
        flex-wrap: wrap;
    }

        .passeport-formation-user .user-badge-container {
            width: 100%;
        }

    .passeport-formation-table-container .table-list-col:last-child {
        justify-content: flex-start;
    }
}

@media screen and (max-width: 960px) {

    .passeport-formation-header {
        flex-wrap: wrap;
    }

    .passeport-formation-user-container {
        width: calc(100% - 148px);
        margin-right: 0;
    }

    .passeport-formation-header .recap-data {
        margin-top: 20px;
        margin-left: 0;
    }
}

@media screen and (max-width: 768px) {

    .passeport-formation-header {
        margin: 0 20px 20px !important;
    }

    .passeport-formation-user-container {
        width: 100%;
    }
}

/* Lesson Catalogue Menu */

.col-lesson-catalogue-main-container .col-lesson-menu-sidebar > .inner {
    width: 100%;
}

/* Habitat Knowledge *******************/

.habitat-knowledge-container {
    align-items: stretch;
    margin-bottom: 20px;
}

    .habitat-knowledge-container .activity-flow > .inner {
        height: 100%;
    }

.featured-steps-container {
    width: calc(100% - 360px);
    padding-right: 15px;
}

.featured-steps {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

    .featured-steps > span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(50% - 10px);
        height: 100px;
        font-size: 14px;
        font-weight: bold;
        padding: 20px;
        box-sizing: border-box;
        text-align: center;
        line-height: 16px;
        border-radius: 4px;
    }

        .featured-steps > span:nth-child(2n+1) {
            margin-right: 10px;
        }

        .featured-steps > span:nth-child(n+3) {
            margin-top: 10px;
        }

.learning-main-presentation-container {
    width: 380px;
}

.habitat-knowledge-container .learning-main-presentation {
    overflow: visible
}

.habitat-knowledge-container .generic-wall-container {
    border-radius: 12px;
}

    .habitat-knowledge-container .generic-wall-container .learning-video-title {
        top: 20px;
        left: 20px;
        margin-left: 0;
    }

.habitat-knowledge-container .learning-main-presentation .cta-action {
    bottom: 45px !important;
}

.habitat-knowledge-container .learning-main-presentation .news-wall-pagination {
    right: 0;
    bottom: 10px;
    justify-content: center;
}

@media (max-width: 1280px) {

    .featured-steps {
        flex-wrap: wrap;
    }

        .featured-steps > span {
            width: 100%;
            height: auto;
        }

            .featured-steps > span:nth-child(2n+1) {
                margin-right: 0;
            }

            .featured-steps > span:nth-child(n+1) {
                margin-top: 10px;
            }

    .habitat-knowledge-container .highlighted-container {
        flex-wrap: wrap;
    }

        .habitat-knowledge-container .highlighted-container [class*="col-"] {
            width: 100%;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .habitat-knowledge-container .highlighted-container .cta-contextual {
            margin-top: 20px;
        }
}

@media (max-width: 1080px) {

    .habitat-knowledge-container {
        flex-wrap: wrap;
    }

        .habitat-knowledge-container > [class*="col-"] {
            width: 100%;
            padding-right: 0 !important;
        }

        .habitat-knowledge-container .activity-flow {
            margin-top: 20px;
        }
}

@media (max-width: 768px) {

    .habitat-knowledge-container .learning-main-presentation {
        margin-top: 40px;
    }

    .featured-steps-container {
        width: 100% !important;
        padding-right: 0 !important;
    }

    .featured-steps > span {
        width: calc(50% - 10px);
        height: 100px;
    }

        .featured-steps > span:nth-child(2n+1) {
            margin-right: 10px;
        }

    .learning-main-presentation-container {
        width: 100%;
    }
}

/* All Leaders *******************/

.all-news-container {
    margin-top: -40px;
    margin-bottom: -40px;
}

    .all-news-container .featured {
        padding: 30px 40px;
        padding-right: 40px !important;
    }

    .all-news-container .featured-timeline {
        padding: 30px 40px;
        padding-left: 40px !important;
    }

    .all-news-container .news-wall-btn {
        display: none !important;
    }

    .all-news-container .featured .generic-wall-container {
        padding-bottom: 40px;
    }

    .all-news-container .featured .card-mode {
        grid-template-columns: 300px;
    }

    .all-news-container .card-mode .preview {
        max-width: inherit;
    }

    .all-news-container .news-wall-col {
        min-width: 100%;
    }

    .all-news-container .featured .news-wall-pagination {
        position: absolute;
        bottom: 0;
        left: 320px;
        width: auto;
    }

    .all-news-container .featured-timeline .news-wall-col {
        padding-bottom: 40px;
    }

    .all-news-container .featured-timeline .news-wall-pagination {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

.misc-courses .news-wall-pagination {
    display: none;
}

@media (max-width: 1280px) {

    .all-news-container {
        margin-left: -30px;
        width: calc(100% + 60px);
    }

        .all-news-container .featured .news-wall-pagination {
            left: 350px;
        }

        .all-news-container .featured-timeline .news-wall-pagination {
            left: 30px;
        }
}

@media (max-width: 1024px) {

    .all-news-container {
        flex-wrap: wrap;
        margin-top: -20px;
        margin-bottom: -20px;
    }

        .all-news-container .featured {
            width: 100%;
        }

        .all-news-container .featured-timeline {
            width: 100%;
        }
}

@media (max-width: 768px) {

    .all-news-container {
        width: calc(100% + 40px) !important;
        box-sizing: border-box;
        margin-left: -20px;
    }

        .all-news-container .featured .news-wall-col > .col-container {
            flex-wrap: wrap;
        }

        .all-news-container .featured .news-wall-pagination {
            left: 30px;
        }

    .shorts-title-container {
        justify-content: space-between;
    }
}

/* Espace Management Home *******************/

h2 + .ms-team-details-container {
    margin-top: 20px;
}

.ms-team-details-container .followers-pic-list {
    justify-content: center;
}

.ms-team-details-container .value-container {
    text-align: center;
}

    .ms-team-details-container .value-container .value {
        font-size: 42px;
        line-height: 36px;
        font-weight: 800;
        margin-bottom: 10px;
    }

.ms-team-details-collaborators .topic {
    font-weight: bold;
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 15px;
}

.ms-team-details-main-container .followers-pic-list {
    justify-content: center;
}

.ms-team-details-container .col-6 {
    position: relative;
}

@media (max-width: 1280px) {

    .ms-team-details-main-container {
        flex-wrap: wrap;
    }

        .ms-team-details-main-container > [class*="col-"] {
            width: 100%;
            padding-right: 0 !important;
            padding-left: 0 !important;
        }

            .ms-team-details-main-container > [class*="col-"] + [class*="col-"] {
                margin-top: 40px;
            }

    .ms-team-details-container {
        flex-wrap: wrap;
    }

        .ms-team-details-container .col-6:before {
            display: none;
        }

        .ms-team-details-container .ms-team-details-content {
            width: 100%;
            flex-wrap: wrap;
            padding-left: 0 !important;
        }

            .ms-team-details-container .ms-team-details-content [class*="col-"] {
                width: 100%;
            }

            .ms-team-details-container .ms-team-details-content .image-container {
                text-align: right;
                margin-bottom: 20px;
            }
}

@media (max-width: 768px) {

    .ms-team-details-container .ms-team-details-content {
        padding: 20px !important;
    }
}

/* Espace Management *******************/

*::-ms-backdrop, .ms-title-container.title-container > .col-container { /* IE11 */
    display: inline-flex;
}

*::-ms-backdrop, .ms-title-container .ms-filter-select { /* IE11 */
    margin-right: 400px;
}

*::-ms-backdrop, .ms-title-container .ms-filter-container + .cta-contextual { /* IE11 */
    min-width: 100px;
}

.ms-filter-container {
    width: 100%;
    white-space: nowrap;
    position: relative;
    padding-right: 0 !important;
}

.ms-filter-search {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    box-shadow: 0 5px 30px 0 rgba(16,27,79,0.15);
    max-height: 420px;
}

.ms-filter-select.active .ms-filter-search {
    display: block;
}

.ms-filter-search input {
    border-width: 1px;
    border-style: solid;
    padding-left: 10px;
    padding-right: 10px;
}

.ms-filter-container .ms-filter-search ul {
    list-style-type: none;
    position: relative;
    padding-left: 0;
    line-height: 26px;
}

.ms-filter-search ul span {
    margin-bottom: -2px;
    font-size: 14px;
}

.ms-filter-container .ms-filter-search ul ul {
    padding-left: 20px;
}

.ms-filter-search ul ul:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    left: 13px;
    bottom: 13px;
    top: 0;
}

.ms-filter-search ul li {
    padding-top: 11px;
    padding-left: 6px;
}

    .ms-filter-search ul li li {
        padding-top: 6px;
    }

.ms-filter-search li li:before {
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 1px;
    left: 13px;
    margin-top: 13px;
}

.ms-filter-search img {
    padding-right: 5px;
}

.ms-filter-select.active .ms-filter-search a {
    text-decoration: none;
}

.grid-box-container {
    border-radius: 4px;
}

    .grid-box-container.high {
        height: 100%;
    }

.main-container .grid-box-container .title-container {
    justify-content: space-between;
}

.main-container .grid-box-container h2 {
    margin-bottom: 20px;
}

.grid-box-container .title-container h3,
.grid-box-container .title-container h4 {
    margin-bottom: 0;
}

.grid-box-container .title-container .value {
    font-size: 42px;
    line-height: 42px;
    font-weight: 800;
}

.ms-light-container {
    padding: 8px;
    border-style: solid;
    border-width: 1px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 16px;
}

.ms-status-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.ms-light-container .value {
    display: block;
    font-size: 16px;
    font-weight: bold;
}

.ms-lesson-percentage .image-container {
    margin-left: 20px;
}

.ms-lesson-percentage .value {
    display: block;
    font-size: 42px;
    line-height: 36px;
    font-weight: 800;
    margin-bottom: 10px;
}

    .ms-lesson-percentage .value span {
        font-size: 24px;
    }

.ms-lesson-percentage .topic {
    font-weight: bold;
}

.ms-lessons-status-container {
    position: relative;
    min-height: 300px
}

    .ms-lessons-status-container .ms-collaborators-container {
        padding: 20px;
        height: 100%;
    }

    .ms-lessons-status-container h4,
    .ms-lessons-requests-container h4 {
        margin-bottom: 0;
    }

.ms-lessons-requests-container .recap-data-container .recap-data {
    width: 33%;
}

.ms-lessons-status-content {
    padding-right: 55px !important;
}

.ms-lessons-gauges-container {
    position: relative;
    margin-bottom: 40px;
}

.ms-lessons-gauge-container {
    display: flex;
    padding: 10px 55px 10px 10px;
    margin-right: -55px;
}

    .ms-lessons-gauge-container .label {
        display: block;
        position: absolute;
        width: 140px;
        text-align: right;
        font-size: 12px;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.ms-lessons-gauge {
    display: flex;
    width: 100%;
    margin-left: 160px;
}

    .ms-lessons-gauge .value {
        display: block;
        border-radius: 10px;
        text-align: center;
        font-size: 12px;
        line-height: 20px;
        height: 20px;
        font-weight: bold;
    }

.ms-lessons-gauge-grid-container {
    display: flex;
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: 0;
    left: 170px;
}

    .ms-lessons-gauge-grid-container div {
        display: block;
        width: 25%;
    }

        .ms-lessons-gauge-grid-container div:last-child {
            display: block;
            width: 0;
        }

        .ms-lessons-gauge-grid-container div:before {
            content: '';
            display: block;
            position: absolute;
            width: 1px;
            top: 0;
            bottom: 0;
        }

        .ms-lessons-gauge-grid-container div:first-child:before {
            right: 100%;
        }

        .ms-lessons-gauge-grid-container div:nth-child(2):before {
            right: 75%;
        }

        .ms-lessons-gauge-grid-container div:nth-child(3):before {
            right: 50%;
        }

        .ms-lessons-gauge-grid-container div:nth-child(4):before {
            right: 25%;
        }

        .ms-lessons-gauge-grid-container div:last-child:before {
            right: 0;
        }

    .ms-lessons-gauge-grid-container span {
        display: inline-block;
        transform: translateX(-50%);
        position: absolute;
        bottom: -25px;
        font-size: 12px;
    }

.ms-lessons-gauge-legend-container {
    margin-left: 170px;
}

    .ms-lessons-gauge-legend-container .ms-light-container {
        min-width: 120px;
        padding-left: 8px !important
    }

.ms-collaborators-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    min-width: 220px;
}

    .ms-collaborators-container .followers-pic-list {
        justify-content: center;
    }

    .ms-collaborators-container .value-container .value {
        display: block;
        font-size: 42px;
        line-height: 36px;
        font-weight: 800;
        margin-bottom: 10px;
        margin-top: 50px;
    }

    .ms-collaborators-container .value-container .topic {
        font-weight: bold;
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 15px;
    }

.ms-lessons-gauge-details {
    margin-top: -20px;
    margin-bottom: -20px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    max-height: 360px;
}

    .ms-lessons-gauge-details .ms-lessons-gauges-container {
        margin-bottom: 0;
    }

        .ms-lessons-gauge-details .ms-lessons-gauges-container h4 {
            padding: 0 10px;
        }

        .ms-lessons-gauge-details .ms-lessons-gauges-container .ms-lessons-gauge-container {
            flex-wrap: wrap;
            padding: 10px;
            margin-right: 0;
        }

        .ms-lessons-gauge-details .ms-lessons-gauges-container .label {
            width: 100%;
            position: relative;
            text-align: left;
            padding-right: 0;
            font-size: 14px;
            line-height: 20px;
            font-weight: normal;
        }

        .ms-lessons-gauge-details .ms-lessons-gauges-container .ms-lessons-gauge {
            margin-left: 0;
        }

.ms-lessons-evaluations-container .ms-lessons-evaluations-content {
    margin-top: 20px;
}

.ms-lessons-evaluations-container .ms-light-container {
    margin-bottom: 20px;
}

.ms-lessons-evaluations-container .image-container {
    margin-left: 20px;
}

.ms-lessons-evaluations-content .value {
    display: block;
    font-size: 42px;
    line-height: 36px;
    font-weight: 800;
    margin-bottom: 10px;
}

.ms-lessons-evaluations-container .topic {
    font-weight: bold;
}

@media (max-width: 1080px) {

    .ms-title-container.title-container {
        flex-wrap: wrap;
    }

    .ms-title-container .title-choice {
        width: 100%;
    }

    .ms-title-container .col-container {
        width: 100%;
    }

    .ms-lessons-recap-container {
        flex-wrap: wrap;
    }

        .ms-lessons-recap-container .ms-lessons-recap-content {
            width: 100%;
            padding-right: 0 !important;
            display: flex;
        }

    .ms-lessons-recap-content .grid-box-container:first-child {
        width: calc(50% - 10px);
        margin-right: 10px;
    }

    .ms-lessons-recap-content .grid-box-container:nth-child(2) {
        width: calc(50% - 10px);
        margin-left: 10px;
        margin-top: 0;
    }

    .ms-lessons-recap-container .ms-lessons-recap-mandatory {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: calc(50% - 10px);
        margin-right: 10px;
        margin-top: 20px;
    }

    .ms-lessons-recap-container .ms-lessons-recap-late {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: calc(50% - 10px);
        margin-left: 10px;
        margin-top: 20px;
    }

    .ms-lessons-gauge .value span {
        display: none;
    }

    .ms-lessons-gauge-legend-container .ms-light-container {
        margin-left: 0;
    }

    .ms-lessons-gauge-legend-container > .col-container {
        display: flex;
        flex-direction: column;
    }

    .ms-lessons-gauge-legend-container .ms-light-container ~ .ms-light-container {
        margin-top: 10px;
    }

    .ms-lessons-requests-row-container {
        flex-wrap: wrap;
    }

        .ms-lessons-requests-row-container .ms-lessons-requests-container,
        .ms-lessons-requests-row-container .ms-lessons-evaluations-container,
        .ms-lessons-requests-row-container .ms-collaborators-container {
            width: 100%;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        .ms-lessons-requests-row-container .ms-lessons-evaluations-container,
        .ms-lessons-requests-row-container .ms-collaborators-container {
            margin-top: 20px;
        }

    .ms-lessons-evaluations-container .image-container {
        margin-left: 0;
    }

    .ms-lessons-status-container .ms-lessons-status-content {
        width: calc(100% - 235px);
    }

    .ms-collaborators-container .value-container .value {
        margin-top: 10px;
    }
}

@media (max-width: 768px) {

    .ms-title-container h2 + h2 {
        margin-left: 0;
    }

    .ms-lessons-recap-container .ms-lessons-recap-content {
        flex-wrap: wrap;
    }

    .ms-lessons-recap-content .grid-box-container:first-child {
        width: 100%;
        margin-right: 0;
    }

    .ms-lessons-recap-content .grid-box-container:nth-child(2) {
        width: 100%;
        margin-left: 0;
        /*margin-top: 20px;*/
    }

    .ms-collaborators-container .value-container .value {
        margin-top: 0px;
    }

    .ms-lessons-recap-container .ms-lessons-recap-mandatory,
    .ms-lessons-recap-container .ms-lessons-recap-late {
        width: 100%;
    }

    .ms-lessons-recap-mandatory [class*="col-"] + [class*="col-"] .ms-light-container,
    .ms-lessons-recap-late [class*="col-"] + [class*="col-"] .ms-light-container {
        margin-top: 10px;
    }

    .ms-lessons-status-container .ms-lessons-status-content {
        width: 100%;
        padding: 10px 0 10px 10px !important;
    }

    .ms-lessons-status-container .ms-lessons-gauge-legend-container {
        margin-bottom: 10px !important;
        margin-left: 110px;
    }

    .ms-lessons-gauge-details {
        margin-top: 20px;
    }

    .ms-lessons-gauge-container {
        padding: 10px 20px 10px 10px;
        margin-right: -20px;
    }

        .ms-lessons-gauge-container .label {
            width: 100px;
        }

    .ms-lessons-gauge {
        margin-left: 110px;
    }

    .ms-lessons-gauge-grid-container {
        left: 120px;
    }
}

/* Suivi Formations *******************/
/* Suivi Collaborateurs *******************/

.course-followup-title-container h2 {
    margin-bottom: 0;
}

.course-preview-tag {
    display: block;
    padding: 2px 15px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
    height: 20px;
    line-height: 16px;
}

.table-list li[onclick] {
    cursor: pointer;
}

.table-course-preview {
    border: none !important;
    box-shadow: none !important;
}

    .table-course-preview .table-list-col {
        padding: 10px 0;
    }

    .table-course-preview .image-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
    }

    .table-course-preview .inner {
        padding: 10px 24px 10px 10px !important;
    }

.table-list .table-course-preview {
    background-color: transparent;
}

.table-list-value {
    font-size: 20px;
    font-weight: 600;
}

.collaborator-followup-details-popup-active:before,
.course-followup-details-popup-active:before {
    content: '';
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.collaborator-followup-details-popup-container .popup {
    max-width: 740px;
    max-height: calc(100% - 4rem);
    top: auto;
    left: auto;
    right: 2rem;
    bottom: 2rem;
    padding: 0;
    overflow: auto;
}

.course-followup-details-popup-container .popup {
    max-width: 600px;
    max-height: calc(100% - 4rem);
    top: auto;
    left: auto;
    right: 2rem;
    bottom: 2rem;
    padding: 0;
    overflow: auto;
}

.collaborator-followup-details-popup-container .title-container,
.course-followup-details-popup-container .title-container {
    margin-top: 10px;
}

.collaborator-followup-details-popup-container h4,
.course-followup-details-popup-container h4 {
    margin-bottom: 0;
}

.collaborator-followup-details-popup-container hr,
.course-followup-details-popup-container hr {
    opacity: 0.1;
    height: 1px;
}

.collaborator-followup-details-popup-container .table-list {
    margin-left: 20px;
    box-sizing: border-box;
    width: auto;
}

.course-followup-details-popup-container .table-list {
    margin-top: 0;
}

.collaborator-followup-details-popup-container .metadata {
    display: flex;
    justify-content: center;
}

.collaborator-followup-details-popup-container .table-course-preview {
    border-radius: 0 !important;
    margin-right: 20px;
}

    .collaborator-followup-details-popup-container .table-course-preview + .table-course-preview,
    .course-followup-details-popup-container .course-followup-collaborator-row + .course-followup-collaborator-row {
        border-top-style: solid;
        border-top-width: 1px;
        margin-top: 10px;
        padding-top: 10px;
    }

.collaborator-followup-details-popup-container .course-preview-tag-container,
.course-followup-details-popup-container .course-preview-tag-container {
    margin-left: auto;
}

@media (max-width: 768px) {

    .course-followup-title-container {
        flex-wrap: wrap !important;
    }

        .course-followup-title-container .course-followup-filters {
            flex-wrap: wrap !important;
            width: 100%;
            justify-content: flex-start;
            margin-top: 20px;
        }

            .course-followup-title-container .course-followup-filters > div {
                width: 100%;
                margin-left: 0;
            }

                .course-followup-title-container .course-followup-filters > div + div {
                    margin-top: 10px;
                }

            .course-followup-title-container .course-followup-filters .custom-select-container {
                margin-top: 0;
            }

    .list-mode .table-course-preview.preview.default-course-preview .metadata {
        width: 100%;
        justify-content: space-between;
        align-items: center !important;
        line-height: 24px;
    }

    .list-mode .table-course-preview.preview.default-course-preview .inner .subject-type {
        margin-right: 20px;
    }

    .list-mode .table-course-preview.preview.default-course-preview .metadata > div {
        height: 24px;
    }

    .list-mode .table-course-preview.preview.default-course-preview .other-data {
        margin-bottom: -10px;
    }

    .list-mode .table-course-preview.preview.default-course-preview > .inner {
        padding-right: 0 !important;
    }

    .collaborator-followup-details-popup-container .popup,
    .course-followup-details-popup-container .popup {
        max-width: 100%;
        max-height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 40px 0 0;
    }
}

/* Presential Popup *******************/

.presential-popup-content {
    margin-top: -50px;
    margin-left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 70px);
    max-height: initial !important;
}

    .presential-popup-content:before {
        content: '';
        display: block;
        position: absolute;
        left: 420px;
        z-index: 0;
        width: 1px;
        height: 100%;
    }

.presential-popup-col-1 {
    padding: 20px 10px 0;
    padding-right: 120px !important;
    box-sizing: border-box;
    max-width: 420px;
}

    .presential-popup-col-1 .preview {
        margin-bottom: 20px;
    }

.presential-popup-col-2 {
    width: 100%;
    margin-right: -20px;
    height: 100%;
    padding: 60px 40px 20px;
    box-sizing: border-box;
    text-align: left;
}

    .presential-popup-col-2 h1 {
        margin-bottom: 0;
        padding-bottom: 0;
        text-align: left;
        line-height: 36px;
    }

.presential-popup-status-container {
    position: relative;
}

.presential-popup-content .presential-popup-status-bookmark {
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: -110px;
    font-size: 10px;
    top: -12px;
    pointer-events: none;
}

.presential-popup-content.current .presential-popup-status-bookmark {
    pointer-events: auto;
}

.presential-popup-status-bookmark i {
    font-size: 32px;
    padding-right: 0;
}

.presential-popup-status-container .status {
    display: block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    left: -46px;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    font-size: 10px;
    top: -4px;
    z-index: 1;
}

*::-ms-backdrop, .presential-popup-status-container .status { /* IE11 */
    left: -56px;
}

.presential-popup-data-container {
    padding: 10px 0 20px;
}

.presential-popup-data {
    display: flex;
    margin-top: 20px;
    font-size: 12px;
    line-height: 16px;
}

    .presential-popup-data:first-child span {
        font-size: 14px;
        font-weight: bold;
    }

    .presential-popup-data i {
        display: block;
        width: 22px;
        font-size: 20px;
        padding-right: 10px;
    }

.presential-popup-col-2 .cta-container {
    padding-bottom: 40px;
}

.presential-popup-col-2 .cta-contextual {
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 1024px) {

    .presential-popup-col-2 {
        padding-top: 50px;
    }

        .presential-popup-col-2 .cta-container {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .presential-popup-col-2 .cta-contextual + .cta-contextual {
            margin-top: 10px;
        }
}

@media (max-width: 960px) {

    .presential-popup-content {
        flex-wrap: wrap;
    }

        .presential-popup-content:before {
            display: none;
        }

    .presential-popup-col-1 {
        padding: 20px 0 0;
    }

    .presential-popup-col-2 {
        border-left-width: 2px;
        border-left-style: solid;
        margin-top: 20px;
        padding-top: 10px;
        height: auto;
        padding-left: 20px !important;
    }

    .presential-popup-status-container {
        display: flex;
        align-items: center;
        margin-top: 10px;
        margin-left: -8px;
    }

    .presential-popup-content .presential-popup-status-bookmark {
        position: static;
        margin-right: 10px;
    }

    .presential-popup-status-container .status {
        position: static;
        margin-right: 10px;
    }

    .presential-popup-data-container {
        padding-top: 0;
    }

    .presential-popup-col-2 .cta-container {
        padding-bottom: 0;
    }
}

/**************************************************/
/* Print */
/**************************************************/

@media print {

    header,
    footer,
    .hidden-desktop {
        display: none !important;
    }

    .visible-desktop,
    .table-list {
        display: block !important;
    }

    .passeport-formation-table-container .table-list .header {
        border-bottom-width: 2px;
        border-bottom-style: solid;
    }

    .passeport-formation-table-container .table-list li:not(.header) {
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }
}

#WinButtonAdmin2 {
    text-align: right;
    margin-right: 30px;
}

.widgetFreeText ul {
    margin-left: 15px;
}


/**************************************************/
/* Resource */
/**************************************************/

.learning-ressource .main-container {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.learning-popup .resource-main-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.resource-main-container {
    display: flex;
    position: relative;
}

.resource-main-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: left;
    width: 100%;
}

.resource-module-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.resource-other-chapter-button {
    margin: 0 auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    min-height: 100px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    text-align: center;
}

    .resource-other-chapter-button:hover {
        text-decoration: none;
    }

/* Sidebar */

.resource-sidebar-main-button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    padding: 0 24px;
}

.resource-main-container.has-sidebar .resource-sidebar-main-button {
    display: none;
}

.resource-sidebar-button-icon {
    position: relative;
    top: 50px;
    transform: translate(0, -50%);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 24px;
}

.resource-sidebar-main-button .fa {
    padding: 0;
}

.resource-sidebar {
    width: 300px;
    min-width: 300px;
    margin-left: -300px;
    transition: margin-left 400ms;
    z-index: 5;
    visibility: hidden;
}

.resource-main-container.has-sidebar .resource-sidebar {
    visibility: visible;
    margin-left: 0;
}

.resource-sidebar-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 272px;
    padding: 0 24px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

    .resource-sidebar-header:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-sidebar-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.resource-sidebar-header .resource-sidebar-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100px;
    padding: 0 24px;
    z-index: 1;
}

.resource-sidebar-header .resource-sidebar-button-icon i {
    position: relative;
    left: -1px;
}

.resource-sidebar-header .resource-sidebar-chapter-user {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.resource-sidebar-header .resource-sidebar-picture {
    display: block;
    width: 24px;
    height: 24px;
    max-height: 24px;
    max-width: 24px;
    min-width: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.resource-sidebar-header h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 0;
    margin-bottom: 0;
}

    .resource-sidebar-header h3:before {
        display: none;
    }

.resource-sidebar-header .resource-sidebar-chapter-metadata {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.resource-sidebar-header .resource-sidebar-chapter-data + .resource-sidebar-chapter-data {
    margin-left: 12px;
    padding-left: 12px;
    border-left-style: solid;
    border-left-width: 1px;
}

.resource-sidebar-header .resource-sidebar-gauge-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
}

.resource-sidebar-header .resource-sidebar-gauge {
    display: block;
    width: 100%;
    height: 4px;
    position: relative;
}

    .resource-sidebar-header .resource-sidebar-gauge:before {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0.6;
    }

.resource-sidebar-header .resource-sidebar-gauge-value {
    display: block;
    width: 100%;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.resource-sidebar-chapter-list {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    list-style-type: none;
}

.resource-sidebar-chapter-element {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 48px;
    padding: 12px 20px 12px 48px;
    box-sizing: border-box;
    position: relative;
}

    .resource-sidebar-chapter-element:hover {
        text-decoration: none;
    }

    .resource-sidebar-chapter-element.selected {
        border-right-width: 4px;
        border-right-style: solid;
    }

    .resource-sidebar-chapter-element .resource-sidebar-chapter-status,
    .resource-sidebar-chapter-element.done .gauge-circle-container {
        display: none;
    }

    .resource-sidebar-chapter-element.done .resource-sidebar-chapter-status {
        display: block;
        font-size: 24px;
        margin-top: -2px;
    }

    .resource-sidebar-chapter-element .resource-sidebar-chapter-status,
    .resource-sidebar-chapter-element .gauge-circle-container {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 12px;
    }

    .resource-sidebar-chapter-element .gauge-circle-container {
        display: flex;
        align-items: center;
    }

        .resource-sidebar-chapter-element .gauge-circle-container .gauge-circle {
            height: 20px;
            line-height: 20px;
            width: 20px;
        }

        .resource-sidebar-chapter-element .gauge-circle-container .gauge-value {
            width: 16px;
            height: 16px;
            line-height: 16px;
        }

        .resource-sidebar-chapter-element .gauge-circle-container .gauge-circle .gauge-progression {
            width: 20px;
            height: 20px;
        }

@media (max-width: 991px) {

    .resource-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
    }
}

@media (max-width: 480px) {

    .resource-sidebar {
        width: 100%;
        margin-left: -100%;
    }
}

/*Adapted generic styles */

.resource-main-content h1 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 38px;
    line-height: 46px;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

    .resource-main-content h1:before {
        width: 72px;
        height: 6px;
        border-radius: 3px;
    }

.resource-main-content h2 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    padding-bottom: 0;
    margin-bottom: 16px;
}

    .resource-main-content h2:before {
        display: none;
    }

.resource-main-content h3 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 0;
    margin-bottom: 12px;
}

    .resource-main-content h3:before {
        display: none;
    }

.resource-main-content h4 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 0;
    margin-bottom: 8px;
}

    .resource-main-content h4:before {
        display: none;
    }

.resource-main-content p {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.resource-main-content intro-p {
    font-size: 18px;
    line-height: 26px;
}

.resource-main-content .cta-contextual.primary {
    display: inline-block;
    height: 42px;
    font-size: 16px;
    line-height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    position: relative;
    outline: none;
    white-space: nowrap;
}

    .resource-main-content .cta-contextual.primary:hover {
        text-decoration: none;
    }

.resource-main-content .cta-contextual .fa {
    display: inline;
    line-height: 40px;
}

@media (max-width: 768px) {

    .resource-main-content h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .resource-main-content h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .resource-main-content h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .resource-main-content h4 {
        font-size: 18px;
        line-height: 24px;
    }

    .resource-main-content p {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Module Text */

.resource-module-text {
    max-width: 888px;
    width: 100%;
    padding: 48px 24px;
    box-sizing: border-box;
}

    .resource-module-text .double-col-text-container {
        column-count: 2;
        column-gap: 24px;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-text {
        margin: 0 48px;
        width: calc(100% - 96px);
    }
}

@media (max-width: 1080px) {

    .resource-module-text {
        max-width: 100%;
        width: calc(100% - 144px);
        padding: 48px 0;
        margin: 0 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-text {
        margin: 0 48px;
        width: calc(100% - 96px);
    }
}

@media (max-width: 768px) {

    .resource-module-text {
        padding: 24px 0;
        width: calc(100% - 48px);
        margin: 0 24px;
    }

        .resource-module-text .double-col-text-container {
            column-count: auto;
        }
}

/* Module Cover */

.resource-module-cover {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 462px;
}

    .resource-module-cover:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-module-cover-content {
    max-width: 888px;
    padding: 150px 24px 96px;
    margin: auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.resource-module-cover h1 {
    font-weight: 400;
    font-size: 38px;
    line-height: 54px;
    padding-bottom: 0;
    margin-bottom: 0;
}

    .resource-module-cover h1:before {
        display: none;
    }

@media (max-width: 991px) {

    .resource-module-cover-content {
        margin: 0;
        max-width: 100%;
        padding: 150px 48px 96px;
    }
}

@media (max-width: 768px) {

    .resource-module-cover {
        min-height: inherit;
    }

    .resource-module-cover-content {
        padding: 84px 24px 48px;
    }

    .resource-module-cover h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

/* Module Image */

.resource-module-image {
    width: 100%;
}

    .resource-module-image.large {
        max-width: 100%;
        margin: 0 auto;
    }

    .resource-module-image.standard {
        max-width: 888px;
        margin: 24px auto;
    }

    .resource-module-image.textual {
        display: flex;
        max-width: 888px;
        margin: 24px auto;
        gap: 48px;
        align-items: center;
    }

    .resource-module-image .image-container img {
        display: block;
    }

    .resource-module-image.large .image-container {
        width: 100%;
        min-height: 462px;
        overflow: hidden;
        position: relative;
    }

        .resource-module-image.large .image-container img {
            width: 100%;
            min-height: 462px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.resource-module-image-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.resource-module-image.standard .resource-module-image-content,
.resource-module-image.textual .resource-module-image-content {
    padding: 24px 0;
}

.resource-module-image.textual .resource-module-image-content {
    width: 320px;
    min-width: 320px;
}

.resource-module-image figcaption {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
}

.resource-module-image.large figcaption {
    padding: 0 24px;
}

.resource-module-image.textual figcaption {
    text-align: left;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-image.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-main-container.has-sidebar .resource-module-image.standard .resource-module-image-content {
            padding: 24px 96px;
        }

    .resource-main-container.has-sidebar .resource-module-image.textual {
        width: auto;
        margin: 24px 96px;
    }

        .resource-main-container.has-sidebar .resource-module-image.textual .resource-module-image-content {
            padding: 0;
        }
}

@media (max-width: 1080px) {

    .resource-module-image.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-module-image.standard .resource-module-image-content {
            padding: 24px 96px;
        }

    .resource-module-image.textual {
        width: auto;
        margin: 24px 96px;
    }

        .resource-module-image.textual .resource-module-image-content {
            padding: 0;
        }
}

@media (max-width: 991px) {

    .resource-module-image.standard .resource-module-image-content {
        padding: 24px 48px;
    }

    .resource-module-image.textual {
        gap: 24px;
        flex-wrap: wrap;
        justify-content: center;
        margin: 24px 48px;
    }

        .resource-module-image.textual .resource-module-image-content {
            width: 420px;
        }
}

@media (max-width: 768px) {

    .resource-module-image.large .image-container img {
        width: auto;
        max-width: inherit;
    }

    .resource-module-image.standard .resource-module-image-content {
        padding: 24px;
    }

    .resource-module-image.textual {
        margin: 24px;
    }

        .resource-module-image.textual .resource-module-image-content {
            width: 100%;
        }
}

/* Module PDF */

.resource-module-pdf {
    max-width: 888px;
    width: 100%;
    margin: 24px auto;
}

    .resource-module-pdf.large {
        max-width: 1280px;
        margin: 0 auto;
    }

.resource-module-pdf-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .resource-module-pdf-content img {
        display: block;
    }

.resource-module-pdf figcaption {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
    text-align: center;
}

.resource-module-pdf.large figcaption {
    padding: 0 24px;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-pdf.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-main-container.has-sidebar .resource-module-pdf.standard .resource-module-pdf-content {
            padding: 24px 96px;
        }
}

@media (max-width: 1080px) {

    .resource-module-pdf.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-module-pdf.standard .resource-module-pdf-content {
            padding: 24px 96px;
        }
}

@media (max-width: 991px) {

    .resource-module-pdf.standard .resource-module-pdf-content {
        padding: 24px 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-pdf.standard .resource-module-pdf-content {
        padding: 24px;
    }
}

.resource-module-pdf-content iframe {
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
    padding-top: 10px;
    height: 800px;
}

/* Module Quiz */

.resource-module-quiz {
    max-width: 888px;
    width: 100%;
    margin: 48px auto;
}

    .resource-module-quiz h5 {
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        text-align: center;
        margin-bottom: 24px;
    }

.resource-module-quiz-content {
    border-radius: 4px;
    padding: 48px;
}

    .resource-module-quiz-content p {
        font-size: 18px;
        line-height: 26px;
        text-align: center;
    }

.resource-module-quiz-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-left: 48px;
    box-sizing: border-box;
    margin-top: 36px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

    .resource-module-quiz-options label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: inherit;
        padding: 4px 12px 4px 12px;
        box-sizing: border-box;
    }

        .resource-module-quiz-options label + label {
            margin-top: 24px;
        }

    .resource-module-quiz-options .answer {
        border-radius: 4px;
    }

    .resource-module-quiz-options i {
        display: none;
        font-size: 24px;
    }

    .resource-module-quiz-options .answer i {
        display: inline-block;
    }

.resource-module-quiz-validation {
    margin-top: 36px;
    display: flex;
    justify-content: center;
}

.resource-module-quiz-result {
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-top: 36px;
}

.resource-module-quiz-result-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
}

    .resource-module-quiz-result-value i {
        font-size: 40px;
        display: inline-block;
        margin-bottom: 12px;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-quiz {
        max-width: 100%;
        margin: 48px 96px;
    }
}

@media (max-width: 1080px) {

    .resource-module-quiz {
        max-width: 100%;
        width: auto;
        margin: 48px 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-quiz {
        margin: 48px;
    }

    .resource-module-quiz-content {
        padding: 36px;
    }

    .resource-module-quiz-options {
        padding-left: 12px;
    }
}

@media (max-width: 768px) {

    .resource-module-quiz {
        margin: 48px 24px;
    }

    .resource-module-quiz-content {
        padding: 24px;
    }

    .resource-module-quiz-result-value {
        font-size: 22px;
        line-height: 28px;
    }
}

.resource-module-quiz input[type="checkbox"] {
    margin-right: 5px;
}

/* Module Video */

.resource-module-video {
    max-width: 888px;
    width: 100%;
    margin: 24px auto;
}

    .resource-module-video.large {
        max-width: 1280px;
        margin: 0 auto;
    }

.resource-module-video-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.resource-module-video figcaption {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
}

.resource-module-video.large figcaption {
    padding: 0 24px;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-video.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-main-container.has-sidebar .resource-module-video.standard .resource-module-video-content {
            padding: 24px 96px;
        }
}

@media (max-width: 1080px) {

    .resource-module-video.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-module-video.standard .resource-module-video-content {
            padding: 24px 96px;
        }
}

@media (max-width: 991px) {

    .resource-module-video.standard .resource-module-video-content {
        padding: 24px 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-video.standard .resource-module-video-content {
        padding: 24px;
    }
}

/* Module Audio */

.resource-module-audio {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

    .resource-module-audio:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-module-audio-content {
    max-width: 888px;
    margin: 0 auto;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.resource-module-audio h1 {
    font-weight: 400;
    font-size: 38px;
    line-height: 54px;
    margin-top: 48px;
    padding-bottom: 0;
    padding-bottom: 48px;
}

    .resource-module-audio h1:before {
        display: none;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-audio-content {
        padding: 48px 96px;
    }
}

@media (max-width: 1080px) {

    .resource-module-audio-content {
        padding: 48px 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-audio-content {
        padding: 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-audio-content {
        padding: 48px 24px;
    }

    .resource-module-audio h1 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 0;
    }
}

/* Module Flipcards */

.resource-module-flipcards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding: 48px 16px;
}

.flipcard-container {
    width: 308px;
    max-width: 100%;
    height: 504px;
    position: relative;
    perspective: 500px;
    perspective-origin: center center;
}

.flipcard {
    width: 100%;
    height: 100%;
    transition: transform 400ms;
    transform: rotateY(0);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
}

    .flipcard[onclick],
    .flipcard [onclick] {
        cursor: pointer;
    }

.flipcard-button {
    position: absolute;
    z-index: 1;
    bottom: 48px;
    left: 50%;
    transform: translate(-50%, 0);
}

.flipcard.flipped {
    transform: rotateY(180deg);
}

.flipcard .flipcard-img-container {
    max-width: 130px;
    margin: 0 auto 30px;
}

    .flipcard .flipcard-img-container img {
        border-radius: 8px;
    }

.flipcard .front,
.flipcard .back {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    padding: 48px 40px 96px;
    box-sizing: border-box;
    transition-property: opacity;
    transition-delay: 100ms;
}

.flipcard-face-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flipcard .front {
    opacity: 1;
}

.flipcard .back {
    transform: rotateY(180deg);
    opacity: 0;
}

.flipcard.flipped .front {
    opacity: 0;
}

.flipcard.flipped .back {
    opacity: 1;
}

.flipcard .background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

    .flipcard .background .flipcard-face-content {
        z-index: 1;
    }

    .flipcard .background:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

/* Module Carousel */

.resource-module-carousel {
    padding: 24px 0;
}

.resource-carousel-container {
    max-width: 888px;
    width: 100%;
    position: relative;
}

.resource-carousel-slides-container {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
}

.resource-carousel-slides {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    transition: margin-left 1s;
}

.resource-carousel-container.prepare-loop .resource-carousel-slides,
.resource-carousel-container.ended-animation .resource-carousel-slides {
    transition: none;
}

.resource-carousel-slide {
    width: 100%;
    position: relative;
    z-index: 3;
    transition: margin-left 1s;
    padding: 96px 48px 144px;
    box-sizing: border-box;
    text-align: center;
}

    .resource-carousel-slide.background:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

    .resource-carousel-slide.background {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

.resource-carousel-slide-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.resource-carousel-slide:hover,
.resource-carousel-slide a,
.resource-carousel-slide a:hover {
    text-decoration: none;
}

.resource-carousel-slide p {
    font-size: 20px;
    line-height: 32px;
}

.resource-carousel-slide .col-container {
    text-align: left;
}

.resource-carousel-slide .carousel-img-container img {
    display: block;
    border-radius: 8px;
}

.resource-carousel-container .resource-carousel-slide:first-child,
.resource-carousel-container .resource-carousel-slide:last-child {
    z-index: 2;
}

.resource-carousel-container[data-total-slides="2"][data-current-slide="1"] .resource-carousel-slide:last-child,
.resource-carousel-container[data-current-slide="2"] .resource-carousel-slide:last-child:not(:nth-child(2)) {
    z-index: 1;
}

.resource-carousel-container.prepare-loop .resource-carousel-slide,
.resource-carousel-container.ended-animation .resource-carousel-slide {
    transition: none;
}

.resource-carousel-container.hide-end-of-loop .resource-carousel-slide:last-child {
    visibility: hidden;
}

.resource-carousel-container[data-total-slides="1"] .resource-carousel-slides {
    width: 100%;
}

.resource-carousel-container[data-total-slides="2"] .resource-carousel-slides {
    width: 200%;
}

.resource-carousel-container[data-total-slides="3"] .resource-carousel-slides {
    width: 300%;
}

.resource-carousel-container[data-total-slides="4"] .resource-carousel-slides {
    width: 400%;
}

.resource-carousel-container[data-total-slides="5"] .resource-carousel-slides {
    width: 500%;
}

.resource-carousel-container[data-total-slides="6"] .resource-carousel-slides {
    width: 600%;
}

.resource-carousel-container[data-total-slides="7"] .resource-carousel-slides {
    width: 700%;
}

.resource-carousel-container[data-total-slides="8"] .resource-carousel-slides {
    width: 800%;
}

.resource-carousel-container[data-total-slides="9"] .resource-carousel-slides {
    width: 900%;
}

.resource-carousel-container[data-total-slides="10"] .resource-carousel-slides {
    width: 1000%;
}

.resource-carousel-container[data-current-slide="1"] .resource-carousel-slides {
    margin-left: 0;
}

.resource-carousel-container[data-current-slide="2"] .resource-carousel-slides {
    margin-left: -100%;
}

.resource-carousel-container[data-current-slide="3"] .resource-carousel-slides {
    margin-left: -200%;
}

.resource-carousel-container[data-current-slide="4"] .resource-carousel-slides {
    margin-left: -300%;
}

.resource-carousel-container[data-current-slide="5"] .resource-carousel-slides {
    margin-left: -400%;
}

.resource-carousel-container[data-current-slide="6"] .resource-carousel-slides {
    margin-left: -500%;
}

.resource-carousel-container[data-current-slide="7"] .resource-carousel-slides {
    margin-left: -600%;
}

.resource-carousel-container[data-current-slide="8"] .resource-carousel-slides {
    margin-left: -700%;
}

.resource-carousel-container[data-current-slide="9"] .resource-carousel-slides {
    margin-left: -800%;
}

.resource-carousel-container[data-current-slide="10"] .resource-carousel-slides {
    margin-left: -900%;
}

.resource-carousel-container[data-total-slides="2"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -200%;
}

.resource-carousel-container[data-total-slides="3"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -300%;
}

.resource-carousel-container[data-total-slides="4"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -400%;
}

.resource-carousel-container[data-total-slides="5"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -500%;
}

.resource-carousel-container[data-total-slides="6"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -600%;
}

.resource-carousel-container[data-total-slides="7"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -700%;
}

.resource-carousel-container[data-total-slides="8"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -800%;
}

.resource-carousel-container[data-total-slides="9"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -900%;
}

.resource-carousel-container[data-total-slides="10"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -1000%;
}

.resource-carousel-container[data-total-slides="2"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 200%;
}

.resource-carousel-container[data-total-slides="3"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 300%;
}

.resource-carousel-container[data-total-slides="4"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 400%;
}

.resource-carousel-container[data-total-slides="5"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 500%;
}

.resource-carousel-container[data-total-slides="6"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 600%;
}

.resource-carousel-container[data-total-slides="7"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 700%;
}

.resource-carousel-container[data-total-slides="8"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 800%;
}

.resource-carousel-container[data-total-slides="9"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 900%;
}

.resource-carousel-container[data-total-slides="10"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 1000%;
}

.resource-carousel-container.prepare-loop.clockwise .resource-carousel-slides {
    margin-left: 100%;
}

.resource-carousel-container[data-total-slides="2"].clockwise .resource-carousel-slide:last-child {
    margin-left: -200%;
}

.resource-carousel-container[data-total-slides="3"].clockwise .resource-carousel-slide:last-child {
    margin-left: -300%;
}

.resource-carousel-container[data-total-slides="4"].clockwise .resource-carousel-slide:last-child {
    margin-left: -400%;
}

.resource-carousel-container[data-total-slides="5"].clockwise .resource-carousel-slide:last-child {
    margin-left: -500%;
}

.resource-carousel-container[data-total-slides="6"].clockwise .resource-carousel-slide:last-child {
    margin-left: -600%;
}

.resource-carousel-container[data-total-slides="7"].clockwise .resource-carousel-slide:last-child {
    margin-left: -700%;
}

.resource-carousel-container[data-total-slides="8"].clockwise .resource-carousel-slide:last-child {
    margin-left: -800%;
}

.resource-carousel-container[data-total-slides="9"].clockwise .resource-carousel-slide:last-child {
    margin-left: -900%;
}

.resource-carousel-container[data-total-slides="10"].clockwise .resource-carousel-slide:last-child {
    margin-left: -1000%;
}

.resource-carousel-container[data-total-slides="1"] .resource-carousel-buttons {
    display: none;
}

.resource-carousel-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    text-decoration: none;
}

    .resource-carousel-button.previous {
        left: -56px;
    }

    .resource-carousel-button.next {
        right: -56px;
    }

    .resource-carousel-button:hover {
        text-decoration: none;
    }

    .resource-carousel-button i {
        font-size: 12px;
        padding: 0;
    }

.resource-carousel-container.locked .resource-carousel-button {
    pointer-events: none;
}

.resource-carousel-container[data-total-slides="1"] .resource-carousel-shortcuts {
    display: none;
}

.resource-carousel-shortcuts {
    display: flex;
    gap: 6px;
    justify-content: center;
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 4;
}

.resource-carousel-shortcut {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.resource-carousel-container.locked .resource-carousel-shortcut {
    pointer-events: none;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-carousel {
        padding: 24px 96px;
    }

    .resource-main-container.has-sidebar .resource-carousel-slide-content {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 1080px) {

    .resource-module-carousel {
        padding: 24px 96px;
    }

    .resource-carousel-slide-content {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 991px) {

    .resource-carousel-slide {
        display: flex;
        align-items: center;
        padding: 24px 24px 72px;
    }

        .resource-carousel-slide .col-container {
            flex-wrap: wrap;
            gap: 24px;
            text-align: center;
        }

            .resource-carousel-slide .col-container > [class*="col-"] {
                width: 100%;
                padding: 0 !important;
            }

        .resource-carousel-slide .carousel-img-container {
            max-width: 288px;
            margin: auto;
        }

        .resource-carousel-slide h3 {
            font-size: 20px;
            line-height: 26px;
        }

    .resource-carousel-shortcuts {
        bottom: 24px;
    }
}

@media (max-width: 768px) {

    .resource-module-carousel {
        padding: 24px;
    }

    .resource-carousel-buttons {
        display: none;
    }
}

/* Module Accordion */

.resource-module-accordion {
    max-width: 888px;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

    .resource-module-accordion.open:before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .resource-module-accordion + .resource-module-accordion {
        margin-top: 0;
    }

.resource-module-accordion-group {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    width: 100%;
}

    .resource-module-accordion-group .resource-module-accordion:not(:last-child) {
        margin-bottom: 0;
    }

.resource-module-accordion-header {
    cursor: pointer;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.resource-module-accordion.open .resource-module-accordion-header {
    padding-bottom: 30px;
}

.resource-module-accordion-icon {
    font-size: 20px;
}

.resource-module-accordion-content {
    padding: 0 30px 30px;
}

.resource-module-accordion.open .resource-module-accordion-icon.plus,
.resource-module-accordion .resource-module-accordion-icon.minus,
.resource-module-accordion-content {
    display: none;
}

.resource-module-accordion .resource-module-accordion-icon.plus,
.resource-module-accordion.open .resource-module-accordion-icon.minus,
.resource-module-accordion.open .resource-module-accordion-content {
    display: block;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-accordion {
        width: calc(100% - 192px);
        margin: 24px 96px;
    }
}

@media (max-width: 1080px) {

    .resource-module-accordion {
        width: calc(100% - 192px);
        margin: 24px 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-accordion {
        width: calc(100% - 96px);
        margin: 24px 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-accordion {
        width: calc(100% - 48px);
        margin: 24px;
    }
}

/* Module Quote */

.resource-module-quote {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

    .resource-module-quote.background:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-module-quote-content {
    max-width: calc(888px - 96px);
    width: 100%;
    margin: 72px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.resource-module-quote-picture {
    display: inline-block;
    width: 96px;
    max-width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
}

.resource-module-quote blockquote {
    text-align: center;
    padding: 0 48px;
    border: none;
    margin: 0;
    position: relative;
}

    .resource-module-quote blockquote,
    .resource-module-quote blockquote p {
        font-weight: 300;
        font-size: 30px;
        line-height: 44px;
    }

.resource-module-quote-icon {
    display: block;
    width: 48px;
    height: 48px;
    position: absolute;
    font-size: 24px;
    line-height: 48px;
    text-align: center;
    transform: scale(1, -1);
}

    .resource-module-quote-icon.start {
        top: -12px;
        left: 0;
    }

    .resource-module-quote-icon.end {
        bottom: -12px;
        right: 0;
    }

.resource-module-quote figcaption {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-quote-content {
        margin: 72px auto;
        max-width: inherit;
        width: calc(100% - 192px);
    }
}

@media (max-width: 1080px) {

    .resource-module-quote-content {
        margin: 72px auto;
        max-width: inherit;
        width: calc(100% - 192px);
    }
}

@media (max-width: 768px) {

    .resource-module-quote-content {
        width: calc(100% - 144px);
    }

    .resource-module-quote blockquote,
    .resource-module-quote blockquote p {
        font-size: 24px;
        line-height: 34px;
    }
}

/* Module Feedback */

.resource-module-feedback {
    max-width: 888px;
    width: 100%;
    margin: 48px auto;
    display: flex;
    gap: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 12px 20px;
    box-sizing: border-box;
}

.resource-module-feedback-icon i {
    position: relative;
    top: -2px;
}

.resource-module-feedback-content,
.resource-module-feedback-content p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

    .resource-module-feedback-content h5 {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-feedback {
        max-width: inherit;
        width: calc(100% - 144px);
    }
}

@media (max-width: 1080px) {

    .resource-module-feedback {
        max-width: inherit;
        width: calc(100% - 144px);
    }
}

@media (max-width: 991px) {

    .resource-module-feedback {
        width: calc(100% - 96px);
    }
}

@media (max-width: 768px) {

    .resource-module-feedback {
        width: calc(100% - 48px);
    }
}

.audioplayer .player-but .the-icon-bg, .audioplayer .playbtn .the-icon-bg, .audioplayer .pausebtn .the-icon-bg, .audioplayer.skin-wave .ap-controls .scrubbar .scrubBox-hover {
    background-color: white !important;
}

.audioplayer .meta-artist .the-artist {
    color: white !important;
}


.audioplayer.skin-wave.button-aspect-noir {
    color: #444444;
}

.audioplayer .volumeicon {
    background: #ffffff !important;
}

.audioplayer.skin-wave .volumeicon:before {
    border-right-color: #ffffff !important;
}

/********** DISCONNECTED PAGES REVIEW **********/

/* Generic Login */

@media (max-width: 480px) {

    #login .login-content {
        padding: 2rem !important;
    }
}

body#login h1 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
}

body#login h1 {
    font-style: normal;
    font-weight: bold;
    font-size: 38px;
    line-height: 46px;
    padding-bottom: 20px;
    margin-bottom: 0;
}

    body#login h1:before {
        display: none;
    }

body#login h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 20px;
}

.login-field-container input[type="text"],
.login-field-container input[type="password"],
.login-field-container input[type="number"] {
    font-size: 14px;
    line-height: 30px;
    padding: 5px 10px;
    border-style: solid;
    border-width: 1px;
    box-sizing: border-box;
    border-radius: 6px;
    outline: none;
    -webkit-box-shadow: none;
    margin-top: 0;
    margin-bottom: 0;
}

.login-field-container {
    position: relative;
    width: 100%;
    max-width: 400px;
}

    .login-field-container input[type="text"],
    .login-field-container input[type="password"],
    .login-field-container input[type="number"] {
        max-width: 100%;
    }


    .login-field-container label {
        line-height: 30px;
        font-weight: bold;
    }
/*
body#login .cta-action {
	display: inline-flex;
	height: 36px;
	font-size: 14px;
	line-height: 36px;
	border-radius: 5px;
	padding-left: 20px;
	padding-right: 20px;
	border-width: 2px;
	border-style: solid;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	position: relative;
	background-color: transparent;
	outline: none;
	white-space: nowrap;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
}


body#login .cta-contextual:not(.large) {
	height: 36px;
	font-size: 14px;
	line-height: 36px;
	border-radius: 5px;
	padding-left: 20px;
	padding-right: 20px;
}



body#login .cta-action .fa {
	width: auto;
	height: auto;
	min-width: inherit;
	line-height: inherit;
}

body#login .cta-action > span + .fa {
	padding-right: 0;
	padding-left: 0;
}

body#login .cta-action .fa + span,
body#login .cta-action span + .fa {
	margin-left: 0;
}

body#login .cta-action:hover {
	text-decoration: none;
}

body#login .cta-container {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media (max-width: 768px) {
	
	body#login .cta-container {
		flex-direction: column;
		align-items: flex-start;
	}
}

body#login .cta-action-separator {
	padding-left: 0;
	padding-right: 0;
}

body#login .external-auth-container {
	margin-left: 0;
}

body#login .external-auth-container h2 {
	font-size: 14px;
	font-weight: 300;
	line-height: normal;
}

body#login .custom-select,
.login-field-container .custom-select {
	display: inline-block;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	height: 42px;
	max-width: 400px;
}

body#login .custom-select .select-list,
.login-field-container .custom-select .select-list {
	position: absolute;
	width: 100%;
	top: 0;
	box-sizing: border-box;
	white-space: nowrap;
	font-size: 14px;
	list-style-type: none;
	height: 42px;
	padding: 5px 10px;
	line-height: 32px;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	border-radius: 6px;
}

body#login .custom-select i,
.login-field-container .custom-select i{
	display: block;
	position: absolute;
	right: 10px;
	top: 0;
	pointer-events: none;
	line-height: 42px;
}

body#login .select-list .placeholder {
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding-right: 32px;
	height: 32px;
	font-size: 14px;
	font-weight: 400;
}

body#login .select-list:hover .placeholder {
	border: none;
}

body#login .select-list > li:last-child {
	display: none;
}

body#login .custom-select.open .select-list > li:last-child {
	display: flex;
	box-sizing: border-box;
	z-index: 5;
	overflow: visible;
	position: absolute;
	top: -1px;
	left: -1px;
	min-width: calc(100% + 2px);
	min-height: 42px;
	border-radius: 6px;
}

body#login .select-list ul {
	list-style-type: none;
	width: 100%;
	position: absolute;
	top: 0;
	width: 100%;
	max-height: 250px;
	border-style: solid;
	border-width: 1px;
	border-radius: 6px;
	box-sizing: border-box;
	overflow-x: visible;
	overflow-y: auto;
	white-space: nowrap;
	padding: 0;
	line-height: 32px;
}

body#login .select-list ul::-webkit-scrollbar-track {
	border-radius: 6px;
}

body#login .select-list ul::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

body#login .select-list ul::-webkit-scrollbar-thumb {
	border-radius: 6px;
}

body#login .select-list ul li {
	position: relative;
	line-height: 32px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body#login .select-list ul li:hover {
	cursor: pointer;
}

@media (max-width: 768px) {
	
	body#login .custom-select-container,
	body#login .custom-select-container .custom-select {
		max-width: inherit;
	}
}

body#login .custom-select.flag-select {
	width: 75px;
}

body#login .flag-select .placeholder img {
	padding-top: 0;
}

body#login .flag-select .select-list ul li {
	height: 30px;
	padding: 0;
	line-height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

body#login .flag-select .select-list ul li img {
	pointer-events: none;
	padding: 0;
}

body#login .input-option-container,
body#login .footer-options,
body#login .footer-options a,
body#login footer .app-version {
	font-size: 14px;
}

body#login .footer-options .support-block-login .cta-contextual {
	border: none;
	padding: 0;
	margin: 0;
	line-height: inherit;
	display: inline-flex;
	height: auto;
	min-height: initial;
	gap: 5px;
	align-items: center;
	position: relative;
}

body#login .footer-options .support-block-login .cta-contextual i {
	position: absolute;
	right: 100%;
	margin-right: 10px;
}

body#login .footer-options .support-block-login .support-text {
	padding: 0;
	font-weight: normal;
}


body#login .footer-options .support-block-login a:hover .support-text {
	text-decoration: underline;
}

body#login .login-loader {
	position: fixed;
}

@media (max-width: 1280px) {
	
	body#login .login-loader {
		left: 40%;
	}
}

@media (max-width: 1024px) {
	
	body#login .login-loader {
		left: 25%;
	}
}

@media (max-width: 480px) {
	
	body#login .login-loader {
		left: 0;
	}
}
*/
/* Cookies popup */

body.front-popup-body.logged-in h3 {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 0;
    margin-bottom: 20px;
}

    body.front-popup-body.logged-in h3:before {
        display: none;
    }

body.front-popup-body.logged-in h4 {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
}

body.front-popup-body.logged-in .cookie-form .cta-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
}

    body.front-popup-body.logged-in .cookie-form .cta-container .cta-action {
        border-radius: 3px;
    }

        body.front-popup-body.logged-in .cookie-form .cta-container .cta-action.secondary {
            font-weight: normal;
        }

    body.front-popup-body.logged-in .cookie-form .cta-container .cookie-popup-link {
        padding: 0;
    }

/* Signup */
/*
body#login .NewAccount .custom-select {
    margin-bottom: 0;
}

body#login #PasswordStrenght {
    position: absolute;
    top: 0;
    left: initial;
    right: 0;
    bottom: initial;
    line-height: 30px;
}

body#login .createnewaccount .cta-container .cta-contextual:not(.primary) {
    border: none;
    background-color: transparent;
    box-shadow: none;
    font-weight: normal;
}

    body#login .createnewaccount .cta-container .cta-contextual:not(.primary):hover {
        text-decoration: underline;
    }
*/
/* Password recover */
/*
body#login .WinButtonDetailsAdmin {
    display: flex;
    align-items: center;
    gap: 10px;
}

    body#login .WinButtonDetailsAdmin .cta-contextual:not(.primary) {
        border: none;
        background-color: transparent;
        box-shadow: none;
        font-weight: normal;
    }

        body#login .WinButtonDetailsAdmin .cta-contextual:not(.primary):hover {
            text-decoration: underline;
        }
*/
/* Forgotten password */

body#login .ForgottenPassword h2 {
    padding-top: 20px;
    padding-bottom: 0;
    font-size: 14px;
    font-weight: 300;
    line-height: normal;
}

/*
body#login .loginMainContainer .cta-container .cta-contextual:not(.primary) {
	border: none;
	background-color: transparent;
	box-shadow: none;
	font-weight: normal;
}

body#login .loginMainContainer .cta-container .cta-contextual:not(.primary):hover {
	text-decoration: underline;
}
*/
/* App download */

body#login .login-download-app-container {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    max-width: 600px;
}

body#login .login-download-app-code-container {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin: 50px auto;
    width: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    body#login .login-download-app-code-container h3 {
        font-style: normal;
        font-weight: bold;
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 0;
        padding-bottom: 10px;
    }

        body#login .login-download-app-code-container h3:before {
            display: none;
        }

body#login .login-download-app-code {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 26px;
}

body#login .login-dowload-app-store-links {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 600px;
    gap: 20px;
    margin-top: 30px;
}

body#login .login-download-app-store-android,
body#login .login-dowload-app-store-ios {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}
/* Job evaluation popup */

.job-popup-content {
    font-size: 16px;
    line-height: 24px;
}

.job-evaluation-levels {
    display: flex;
    gap: 10px;
    padding: 0 12px;
    box-sizing: border-box;
    width: 60%;
}

    .job-evaluation-levels span {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
    }

    /* Start copied checkbox / radio styles from xLMS */

    .job-evaluation-levels .input-option-container {
        display: inline-block;
        font-size: 14px;
    }

        .job-evaluation-levels .input-option-container input[type=checkbox],
        .job-evaluation-levels .input-option-container input[type=radio] {
            display: none;
        }

    .job-evaluation-levels input[type=checkbox] + span,
    .job-evaluation-levels input[type=radio] + span {
        display: inline-flex;
        box-sizing: border-box;
        position: relative;
    }

        .job-evaluation-levels input[type=checkbox] + span span:not(:empty),
        .job-evaluation-levels input[type=radio] + span span:not(:empty) {
            padding: 5px 15px 5px 25px;
        }

        .job-evaluation-levels input[type=checkbox] + span span:empty,
        .job-evaluation-levels input[type=radio] + span span:empty {
            display: inline-block;
            width: 16px;
        }

        .job-evaluation-levels input[type=checkbox] + span:before,
        .job-evaluation-levels input[type=radio] + span:before {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 50%;
            border-width: 1px;
            border-style: solid;
            margin-top: -8px;
        }

        .job-evaluation-levels input[type=checkbox] + span i {
            display: none;
        }

    .job-evaluation-levels input[type=checkbox]:checked + span i {
        content: '';
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -8px;
        border-radius: 50%;
        text-align: center;
        font-size: 10px;
        line-height: 16px;
    }

    .job-evaluation-levels input[type=checkbox]:checked + span .fa-check {
        display: block;
    }

    .job-evaluation-levels input[type=radio] + span:before {
        border-radius: 50%;
    }

    .job-evaluation-levels input[type=radio]:checked + span:after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        box-sizing: border-box;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -3px;
        border-radius: 50%;
    }

    .job-evaluation-levels label input[type=checkbox] + span,
    .job-evaluation-levels label input[type=radio] + span {
        cursor: pointer;
    }

    .job-evaluation-levels input[disabled],
    .job-evaluation-levels input[disabled] + span,
    .job-evaluation-levels input[disabled] + span i,
    .job-evaluation-levels input[disabled] + span:before {
        cursor: default !important;
        pointer-events: none !important;
    }

    .job-evaluation-levels .input-option-container.inversed-checkbox input[type=checkbox] + span:before {
        left: inherit;
        right: 15px;
    }

    .job-evaluation-levels .input-option-container.inversed-checkbox input[type=checkbox] + span span:not(:empty) {
        padding: 5px 40px 5px 0px;
    }

    .job-evaluation-levels .input-option-container.inversed-checkbox input[type=checkbox]:checked + span i {
        left: inherit;
        right: 15px;
    }

/* End copied styles from xLMS */

.job-eval-level-desc {
    width: 100%;
    display: flex;
    gap: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 12px 20px;
    box-sizing: border-box;
    display: none;
    font-size: 14px;
    line-height: 20px;
}

    .job-eval-level-desc h5 {
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
    }

.job-level-comment-container h4 {
    padding-bottom: 10px;
}

.job-level-comment-container textarea {
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 0;
    box-sizing: border-box;
}

.job-level-btn-container {
    margin-top: 20px;
    padding-top: 10px;
    gap: 10px;
}

/* Job Graph */

.graph-job-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.graph-job-container {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 80px 120px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.graph-job {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.graphic-job-line {
    width: 1px;
    height: 50%;
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    transform-origin: bottom right;
}

.graph-job[data-skills-total="3"] .graphic-job-line:nth-child(2) {
    transform: rotate(120deg);
}

.graph-job[data-skills-total="3"] .graphic-job-line:nth-child(3) {
    transform: rotate(240deg);
}

.graph-job[data-skills-total="4"] .graphic-job-line:nth-child(2) {
    transform: rotate(90deg);
}

.graph-job[data-skills-total="4"] .graphic-job-line:nth-child(3) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="4"] .graphic-job-line:nth-child(4) {
    transform: rotate(270deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(2) {
    transform: rotate(72deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(3) {
    transform: rotate(144deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(4) {
    transform: rotate(216deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(5) {
    transform: rotate(288deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(2) {
    transform: rotate(60deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(3) {
    transform: rotate(120deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(4) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(5) {
    transform: rotate(240deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(6) {
    transform: rotate(300deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(2) {
    transform: rotate(51.43deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(3) {
    transform: rotate(102.86deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(4) {
    transform: rotate(154.29deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(5) {
    transform: rotate(205.71deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(6) {
    transform: rotate(257.14deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(7) {
    transform: rotate(308.57deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(2) {
    transform: rotate(45deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(3) {
    transform: rotate(90deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(4) {
    transform: rotate(135deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(5) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(6) {
    transform: rotate(225deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(7) {
    transform: rotate(270deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(8) {
    transform: rotate(315deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(2) {
    transform: rotate(40deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(3) {
    transform: rotate(80deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(4) {
    transform: rotate(120deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(5) {
    transform: rotate(160deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(6) {
    transform: rotate(200deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(7) {
    transform: rotate(240deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(8) {
    transform: rotate(280deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(9) {
    transform: rotate(320deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(2) {
    transform: rotate(36deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(3) {
    transform: rotate(72deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(4) {
    transform: rotate(108deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(5) {
    transform: rotate(144deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(6) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(7) {
    transform: rotate(216deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(8) {
    transform: rotate(252deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(9) {
    transform: rotate(288deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(10) {
    transform: rotate(324deg);
}

.graphic-job-line.background {
    z-index: 1;
}

.graph-job svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

    .graph-job svg polygon {
        stroke-linejoin: round;
    }

.graph-job-polygon.goals {
    stroke-dasharray: 1;
}

.graph-job-polygon.reach {
    stroke-width: 1;
}

.graphic-job-line.value,
.graphic-job-descriptions {
    z-index: 3;
}

    .graphic-job-line.value:before,
    .graphic-job-line.value:after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
    }

    .graphic-job-line.value:before {
        width: 8px;
        height: 8px;
    }

    .graphic-job-line.value:after {
        width: 10px;
        height: 10px;
        margin-bottom: -10px;
    }

    .graphic-job-line.value[data-percentage="0"]:after {
        bottom: 20%;
    }

    .graphic-job-line.value[data-percentage="1"]:after {
        bottom: 20.8%;
    }

    .graphic-job-line.value[data-percentage="2"]:after {
        bottom: 21.6%;
    }

    .graphic-job-line.value[data-percentage="3"]:after {
        bottom: 22.4%;
    }

    .graphic-job-line.value[data-percentage="4"]:after {
        bottom: 23.2%;
    }

    .graphic-job-line.value[data-percentage="5"]:after {
        bottom: 24%;
    }

    .graphic-job-line.value[data-percentage="6"]:after {
        bottom: 24.8%;
    }

    .graphic-job-line.value[data-percentage="7"]:after {
        bottom: 25.6%;
    }

    .graphic-job-line.value[data-percentage="8"]:after {
        bottom: 26.4%;
    }

    .graphic-job-line.value[data-percentage="9"]:after {
        bottom: 27.2%;
    }

    .graphic-job-line.value[data-percentage="10"]:after {
        bottom: 28%;
    }

    .graphic-job-line.value[data-percentage="11"]:after {
        bottom: 28.8%;
    }

    .graphic-job-line.value[data-percentage="12"]:after {
        bottom: 29.6%;
    }

    .graphic-job-line.value[data-percentage="13"]:after {
        bottom: 30.4%;
    }

    .graphic-job-line.value[data-percentage="14"]:after {
        bottom: 31.2%;
    }

    .graphic-job-line.value[data-percentage="15"]:after {
        bottom: 32%;
    }

    .graphic-job-line.value[data-percentage="16"]:after {
        bottom: 32.8%;
    }

    .graphic-job-line.value[data-percentage="17"]:after {
        bottom: 33.6%;
    }

    .graphic-job-line.value[data-percentage="18"]:after {
        bottom: 34.4%;
    }

    .graphic-job-line.value[data-percentage="19"]:after {
        bottom: 35.2%;
    }

    .graphic-job-line.value[data-percentage="20"]:after {
        bottom: 36%;
    }

    .graphic-job-line.value[data-percentage="21"]:after {
        bottom: 36.8%;
    }

    .graphic-job-line.value[data-percentage="22"]:after {
        bottom: 37.6%;
    }

    .graphic-job-line.value[data-percentage="23"]:after {
        bottom: 38.4%;
    }

    .graphic-job-line.value[data-percentage="24"]:after {
        bottom: 39.2%;
    }

    .graphic-job-line.value[data-percentage="25"]:after {
        bottom: 40%;
    }

    .graphic-job-line.value[data-percentage="26"]:after {
        bottom: 40.8%;
    }

    .graphic-job-line.value[data-percentage="27"]:after {
        bottom: 41.6%;
    }

    .graphic-job-line.value[data-percentage="28"]:after {
        bottom: 42.4%;
    }

    .graphic-job-line.value[data-percentage="29"]:after {
        bottom: 43.2%;
    }

    .graphic-job-line.value[data-percentage="30"]:after {
        bottom: 44%;
    }

    .graphic-job-line.value[data-percentage="31"]:after {
        bottom: 44.8%;
    }

    .graphic-job-line.value[data-percentage="32"]:after {
        bottom: 45.6%;
    }

    .graphic-job-line.value[data-percentage="33"]:after {
        bottom: 46.4%;
    }

    .graphic-job-line.value[data-percentage="34"]:after {
        bottom: 47.2%;
    }

    .graphic-job-line.value[data-percentage="35"]:after {
        bottom: 48%;
    }

    .graphic-job-line.value[data-percentage="36"]:after {
        bottom: 48.8%;
    }

    .graphic-job-line.value[data-percentage="37"]:after {
        bottom: 49.6%;
    }

    .graphic-job-line.value[data-percentage="38"]:after {
        bottom: 50.4%;
    }

    .graphic-job-line.value[data-percentage="39"]:after {
        bottom: 51.2%;
    }

    .graphic-job-line.value[data-percentage="40"]:after {
        bottom: 52%;
    }

    .graphic-job-line.value[data-percentage="41"]:after {
        bottom: 52.8%;
    }

    .graphic-job-line.value[data-percentage="42"]:after {
        bottom: 53.6%;
    }

    .graphic-job-line.value[data-percentage="43"]:after {
        bottom: 54.4%;
    }

    .graphic-job-line.value[data-percentage="44"]:after {
        bottom: 55.2%;
    }

    .graphic-job-line.value[data-percentage="45"]:after {
        bottom: 56%;
    }

    .graphic-job-line.value[data-percentage="46"]:after {
        bottom: 56.8%;
    }

    .graphic-job-line.value[data-percentage="47"]:after {
        bottom: 57.6%;
    }

    .graphic-job-line.value[data-percentage="48"]:after {
        bottom: 58.4%;
    }

    .graphic-job-line.value[data-percentage="49"]:after {
        bottom: 59.2%;
    }

    .graphic-job-line.value[data-percentage="50"]:after {
        bottom: 60%;
    }

    .graphic-job-line.value[data-percentage="51"]:after {
        bottom: 60.8%;
    }

    .graphic-job-line.value[data-percentage="52"]:after {
        bottom: 61.6%;
    }

    .graphic-job-line.value[data-percentage="53"]:after {
        bottom: 62.4%;
    }

    .graphic-job-line.value[data-percentage="54"]:after {
        bottom: 63.2%;
    }

    .graphic-job-line.value[data-percentage="55"]:after {
        bottom: 64%;
    }

    .graphic-job-line.value[data-percentage="56"]:after {
        bottom: 64.8%;
    }

    .graphic-job-line.value[data-percentage="57"]:after {
        bottom: 65.6%;
    }

    .graphic-job-line.value[data-percentage="58"]:after {
        bottom: 66.4%;
    }

    .graphic-job-line.value[data-percentage="59"]:after {
        bottom: 67.2%;
    }

    .graphic-job-line.value[data-percentage="60"]:after {
        bottom: 68%;
    }

    .graphic-job-line.value[data-percentage="61"]:after {
        bottom: 68.8%;
    }

    .graphic-job-line.value[data-percentage="62"]:after {
        bottom: 69.6%;
    }

    .graphic-job-line.value[data-percentage="63"]:after {
        bottom: 70.4%;
    }

    .graphic-job-line.value[data-percentage="64"]:after {
        bottom: 71.2%;
    }

    .graphic-job-line.value[data-percentage="65"]:after {
        bottom: 72%;
    }

    .graphic-job-line.value[data-percentage="66"]:after {
        bottom: 72.8%;
    }

    .graphic-job-line.value[data-percentage="67"]:after {
        bottom: 73.6%;
    }

    .graphic-job-line.value[data-percentage="68"]:after {
        bottom: 74.4%;
    }

    .graphic-job-line.value[data-percentage="69"]:after {
        bottom: 75.2%;
    }

    .graphic-job-line.value[data-percentage="70"]:after {
        bottom: 76%;
    }

    .graphic-job-line.value[data-percentage="71"]:after {
        bottom: 76.8%;
    }

    .graphic-job-line.value[data-percentage="72"]:after {
        bottom: 77.6%;
    }

    .graphic-job-line.value[data-percentage="73"]:after {
        bottom: 78.4%;
    }

    .graphic-job-line.value[data-percentage="74"]:after {
        bottom: 79.2%;
    }

    .graphic-job-line.value[data-percentage="75"]:after {
        bottom: 80%;
    }

    .graphic-job-line.value[data-percentage="76"]:after {
        bottom: 80.8%;
    }

    .graphic-job-line.value[data-percentage="77"]:after {
        bottom: 81.6%;
    }

    .graphic-job-line.value[data-percentage="78"]:after {
        bottom: 82.4%;
    }

    .graphic-job-line.value[data-percentage="79"]:after {
        bottom: 83.2%;
    }

    .graphic-job-line.value[data-percentage="80"]:after {
        bottom: 84%;
    }

    .graphic-job-line.value[data-percentage="81"]:after {
        bottom: 84.8%;
    }

    .graphic-job-line.value[data-percentage="82"]:after {
        bottom: 85.6%;
    }

    .graphic-job-line.value[data-percentage="83"]:after {
        bottom: 86.4%;
    }

    .graphic-job-line.value[data-percentage="84"]:after {
        bottom: 87.2%;
    }

    .graphic-job-line.value[data-percentage="85"]:after {
        bottom: 88%;
    }

    .graphic-job-line.value[data-percentage="86"]:after {
        bottom: 88.8%;
    }

    .graphic-job-line.value[data-percentage="87"]:after {
        bottom: 89.6%;
    }

    .graphic-job-line.value[data-percentage="88"]:after {
        bottom: 90.4%;
    }

    .graphic-job-line.value[data-percentage="89"]:after {
        bottom: 91.2%;
    }

    .graphic-job-line.value[data-percentage="90"]:after {
        bottom: 92%;
    }

    .graphic-job-line.value[data-percentage="91"]:after {
        bottom: 92.8%;
    }

    .graphic-job-line.value[data-percentage="92"]:after {
        bottom: 93.6%;
    }

    .graphic-job-line.value[data-percentage="93"]:after {
        bottom: 94.4%;
    }

    .graphic-job-line.value[data-percentage="94"]:after {
        bottom: 95.2%;
    }

    .graphic-job-line.value[data-percentage="95"]:after {
        bottom: 96%;
    }

    .graphic-job-line.value[data-percentage="96"]:after {
        bottom: 96.8%;
    }

    .graphic-job-line.value[data-percentage="97"]:after {
        bottom: 97.6%;
    }

    .graphic-job-line.value[data-percentage="98"]:after {
        bottom: 98.4%;
    }

    .graphic-job-line.value[data-percentage="99"]:after {
        bottom: 99.2%;
    }

    .graphic-job-line.value[data-percentage="100"]:after {
        bottom: 100%;
    }

.graph-job .graphic-job-description {
    display: block;
    position: absolute;
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    z-index: 1;
    text-align: center;
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(4),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(5),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(6),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(5),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(6),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(6),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(10) {
    display: none;
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(1) {
    bottom: calc(100% + 10px);
    left: 50%;
    width: 120px;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(2) {
    width: 120px;
    top: 78%;
    left: 95%;
    transform: translate(-30%, 0);
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(3) {
    width: 120px;
    top: 78%;
    right: 95%;
    transform: translate(30%, 0);
}

.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(2) {
    width: 100px;
    top: 50%;
    left: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(3) {
    width: 120px;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(4) {
    width: 100px;
    top: 50%;
    right: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(2) {
    width: 100px;
    bottom: 66%;
    left: 100%;
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(3) {
    width: 120px;
    top: 94%;
    left: 75%;
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: 94%;
    right: 75%;
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(5) {
    width: 100px;
    bottom: 66%;
    right: 100%;
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(2) {
    width: 100px;
    bottom: 78%;
    left: 92%;
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(3) {
    width: 100px;
    top: 78%;
    left: 92%;
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(5) {
    width: 100px;
    top: 78%;
    right: 92%;
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(6) {
    width: 100px;
    bottom: 78%;
    right: 92%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 84%;
    left: 86%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(3) {
    width: 100px;
    bottom: 35%;
    left: calc(100% + 2px);
    transform: translate(0, 25%);
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: 96%;
    left: 65%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: 96%;
    right: 65%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(6) {
    width: 100px;
    bottom: 35%;
    right: calc(100% + 2px);
    transform: translate(0, 25%);
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(7) {
    width: 120px;
    bottom: 84%;
    right: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 86%;
    left: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(3) {
    width: 100px;
    top: 50%;
    left: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: 86%;
    left: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(6) {
    width: 120px;
    top: 86%;
    right: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(7) {
    width: 100px;
    top: 50%;
    right: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(8) {
    width: 120px;
    bottom: 86%;
    right: 86%;
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 92%;
    left: 80%;
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(3) {
    width: 100px;
    bottom: 58%;
    left: calc(100% + 2px);
    transform: translate(0, 30%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(4) {
    width: 100px;
    top: 75%;
    left: 98%;
    transform: translate(0, -45%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: 100%;
    left: 70%;
    transform: translate(-25%, 0);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(6) {
    width: 120px;
    top: 100%;
    right: 70%;
    transform: translate(25%, 0);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(7) {
    width: 100px;
    top: 75%;
    right: 98%;
    transform: translate(0, -45%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(8) {
    width: 100px;
    bottom: 58%;
    right: calc(100% + 2px);
    transform: translate(0, 30%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(9) {
    width: 120px;
    bottom: 92%;
    right: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 92%;
    left: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(3) {
    width: 100px;
    bottom: 66%;
    left: calc(100% + 2px);
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(4) {
    width: 100px;
    top: 66%;
    left: calc(100% + 2px);
    transform: translate(0, -40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: 92%;
    left: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(6) {
    top: calc(100% + 10px);
    left: 50%;
    width: 120px;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(7) {
    width: 120px;
    top: 92%;
    right: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(8) {
    width: 100px;
    top: 66%;
    right: calc(100% + 2px);
    transform: translate(0, -40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(9) {
    width: 100px;
    bottom: 66%;
    right: calc(100% + 2px);
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(10) {
    width: 120px;
    bottom: 92%;
    right: 80%;
}

/* Line Graph */

.line-graph-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

    .line-graph-wrapper .line-graph-horizontal-background,
    .line-graph-wrapper .line-graph-vertical-background,
    .line-graph-wrapper .line-graph-references {
        display: flex;
        position: absolute;
        width: calc(100% - 170px);
        height: calc(100% - 60px);
        margin: 20px 50px 40px 100px;
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
    }

    .line-graph-wrapper .line-graph-horizontal-background {
        flex-direction: column-reverse;
        justify-content: space-between;
        z-index: 1;
    }

        .line-graph-wrapper .line-graph-horizontal-background .line {
            height: 1px;
            width: calc(100% + 100px);
            margin-left: -50px;
        }

        .line-graph-wrapper .line-graph-horizontal-background .value {
            transform: translate(-30px,-50%);
            width: 20px;
        }

        .line-graph-wrapper .line-graph-horizontal-background .value,
        .line-graph-wrapper .line-graph-vertical-background .value {
            position: absolute;
            display: block;
            text-align: center;
            font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
        }

    .line-graph-wrapper .line-graph-vertical-background {
        justify-content: space-between;
        z-index: 2;
    }

        .line-graph-wrapper .line-graph-vertical-background .line {
            width: 1px;
            height: 100%;
        }

        .line-graph-wrapper .line-graph-vertical-background .value {
            bottom: 0;
            transform: translate(-50%,100%);
            max-width: 100px;
            padding-top: 20px;
        }

    .line-graph-wrapper .line-graph-references .line-graph-reference {
        position: absolute;
        height: 1px;
        width: calc(100% + 100px);
        margin-left: -50px;
        margin-bottom: -1px;
        z-index: 3;
        bottom: 0;
    }

    .line-graph-wrapper .line-graph {
        position: absolute;
        width: calc(100% - 170px);
        height: calc(100% - 60px);
        margin: 20px 50px 40px 100px;
        transform: scaleY(-1);
        z-index: 4;
    }

        .line-graph-wrapper .line-graph line {
            stroke-width: 1;
        }

    .line-graph-wrapper .line-graph-points {
        display: flex;
        position: absolute;
        width: calc(100% - 170px);
        height: calc(100% - 60px);
        margin: 20px 50px 40px 100px;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 5;
    }

    .line-graph-wrapper .line-graph-point {
        display: block;
        position: relative;
        width: 1px;
        height: 100%;
    }

        .line-graph-wrapper .line-graph-point:hover {
            z-index: 1;
        }

    .line-graph-wrapper .graph-point {
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
        width: 30px;
        height: 30px;
        left: 0;
        transform: translate(-50%,50%);
        border-style: solid;
        border-width: 8px;
        border-radius: 50%;
        box-sizing: border-box;
        bottom: 0;
    }

        .line-graph-wrapper .graph-point .icon {
            display: none;
        }

    .line-graph-wrapper .goal-reached .graph-point {
        border-width: 4px;
    }

        .line-graph-wrapper .goal-reached .graph-point .icon {
            display: inline-flex;
        }

    .line-graph-wrapper .graph-point-tooltip {
        display: none;
        position: absolute;
        padding: 24px;
        left: 50%;
        /* bottom: calc(100% + 12px); */
        transform: translate(-50%, 0);
        border-radius: 6px;
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-style: normal;
        font-size: 14px;
        text-align: left;
        line-height: 20px;
        min-width: 120px;
        z-index: 1;
    }

        .line-graph-wrapper .graph-point-tooltip:before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
        }

    .line-graph-wrapper .line-graph-point:hover .graph-point-tooltip {
        display: block;
    }

    .line-graph-wrapper .graph-point-tooltip h5 {
        font-size: 18px;
        line-height: 26px;
        font-weight: 700;
        margin: 0;
    }

    .line-graph-wrapper .graph-point-tooltip span {
        display: block;
    }

.line-graph-references-legend {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .line-graph-references-legend .line-graph-references {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .line-graph-references-legend .line-graph-reference {
        width: 24px;
        height: 1px;
        margin-bottom: -1px;
    }

    .line-graph-references-legend .description {
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
    }


/* Catalogue Specific *******************/

.catalog-page .catalog-main-search-content {
    display: flex;
    align-items: center;
    min-height: 68px;
    padding: 0 30px;
}

.catalog-page .catalogue-search-container.default-catalogue-search-container {
    max-width: 280px;
    padding-right: 20px;
    margin-right: 0;
}

.catalog-page .catalogue-search-container .multiple-select-container .custom-select > .select-list .placeholder,
.catalog-page .catalogue-search-container .placeholder input[type="text"].multiselect-input-auto-complete {
    width: 280px;
    box-sizing: border-box;
}

.catalog-page .catalogue-search-container .placeholder input[type="text"].multiselect-input-auto-complete {
    border-width: 1px;
    border-style: solid;
}

.catalog-page .search-container .placeholder input[type='text'].multiselect-input-auto-complete {
    border-bottom-width: 1px !important;
}

.catalog-page .catalog-result-sorting-header {
    display: flex;
    align-items: center;
    width: calc(100% - 300px);
}

.catalog-page .catalog-search.search-container {
    margin-left: 0;
}

.catalog-page .catalog-main-search-content h3 {
    margin-bottom: 0;
    padding-bottom: 0;
    white-space: nowrap;
}

    .catalog-page .catalog-main-search-content h3:before {
        content: none;
    }

.catalog-page .catalog-entries {
    padding-top: 40px !important;
}

.catalog-page .catalogue-main-container {
    margin-top: 0;
}

.catalog-page .catalog-sidebar-filter-container {
    position: relative;
}

.catalog-page .catalog-sidebar-filter-tab {
    height: 42px;
    display: flex;
    align-items: center;
    margin-left: -15px;
    width: calc(100% + 30px);
    padding-left: 15px;
    box-sizing: border-box;
    text-decoration: none !important;
}

.catalog-page .catalog-sidebar-filter-btns {
    padding-bottom: 20px !important;
}

.catalog-page .catalogue-sidebar-filter h4 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
}

.catalog-page .catalog-sidebar-filters-chosen {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}

.catalog-page .catalog-sidebar-filter-col-container {
    border-width: 1px;
    border-style: solid;
    position: absolute;
    left: 100%;
    top: -40px;
    z-index: 10;
    display: flex;
}

.catalog-page .catalog-sidebar-filter-col {
    width: 250px;
    padding: 0 20px;
    overflow-y: auto;
}

    .catalog-page .catalog-sidebar-filter-col ul {
        list-style-type: none;
    }

    .catalog-page .catalog-sidebar-filter-col ~ .catalog-sidebar-filter-col .catalog-sidebar-filter-col-close {
        display: none;
    }

    .catalog-page .catalog-sidebar-filter-col h3 {
        margin-bottom: 5px;
        padding-bottom: 0;
    }

        .catalog-page .catalog-sidebar-filter-col h3:before {
            content: none;
        }

    .catalog-page .catalog-sidebar-filter-col a {
        text-decoration: none;
    }

    .catalog-page .catalog-sidebar-filter-col .advanced-search-container {
        margin-bottom: 10px;
    }

        .catalog-page .catalog-sidebar-filter-col .advanced-search-container label {
            height: 42px;
        }

        .catalog-page .catalog-sidebar-filter-col .advanced-search-container input {
            border-width: 1px;
            border-style: solid;
            border-radius: 6px;
            padding: 5px 0 5px 30px;
            line-height: 32px;
            height: 42px;
            margin-top: 0;
        }

        .catalog-page .catalog-sidebar-filter-col .advanced-search-container .input-icon > a,
        .catalog-page .catalog-sidebar-filter-col .advanced-search-container .input-icon > a:hover,
        .catalog-page .catalog-sidebar-filter-col .advanced-search-container .input-icon > .fa {
            left: 0;
            right: auto;
            top: 6px;
            bottom: auto;
            font-size: 18px;
        }

.catalog-page .catalog-sidebar-filter-option {
    display: flex;
    box-sizing: border-box;
    width: calc(100% + 40px);
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    margin-left: -20px;
}

.catalog-page .catalog-sidebar-filter-option-text {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .catalog-page .catalog-sidebar-filter-option-text + i,
    .catalog-page i + .catalog-sidebar-filter-option-text {
        margin-left: 10px;
    }

@media (max-width: 1280px) {

    .catalog-page .catalog-sidebar-filter-tab {
        margin-left: 0;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .catalog-page .catalog-sidebar-filter-col ~ .catalog-sidebar-filter-col {
        display: none;
        box-shadow: none;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }

        .catalog-page .catalog-sidebar-filter-col ~ .catalog-sidebar-filter-col .catalog-sidebar-filter-col-close {
            display: block;
        }
}

@media (max-width: 1024px) {

    .catalog-page .catalogue-main-container {
        flex-wrap: nowrap;
    }

        .catalog-page .catalogue-main-container .catalogue-course-preview-container,
        .catalog-page .catalogue-main-container .catalogue-course-preview-container .card-mode,
        .catalog-page .catalogue-main-container .catalogue-course-preview-container .list-mode {
            margin-top: 0 !important;
        }

    .catalog-page .catalog-sidebar-filter-btns {
        flex-wrap: wrap !important;
        justify-content: center;
    }

        .catalog-page .catalog-sidebar-filter-btns a {
            margin-left: 0;
            margin-right: 0;
        }

            .catalog-page .catalog-sidebar-filter-btns a ~ a {
                margin-top: 10px;
            }
}

@media (max-width: 960px) {

    .catalog-page .catalog-main-search-content {
        height: auto;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .catalog-page .catalog-result-sorting-header.with-results {
        width: 100% !important;
    }
}

@media (max-width: 768px) {

    .catalog-page .catalog-result-sorting-header {
        width: 100% !important;
        flex-wrap: wrap !important;
        margin-bottom: 10px;
    }

        .catalog-page .catalog-result-sorting-header .custom-select-container,
        .catalog-page .catalog-result-sorting-header .custom-select-container .custom-select {
            margin-top: 0;
            margin-bottom: 0;
        }

    .catalog-page .catalog-result-sorting-options {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: 10px;
    }

        .catalog-page .catalog-result-sorting-options .hearted-total,
        .catalog-page .catalog-result-sorting-options .badge-container {
            margin-right: 20px;
        }

    .catalog-page .catalogue-main-container {
        flex-wrap: wrap;
    }

    .catalog-page .catalog-sidebar-filter-col-container {
        margin-top: 10px;
        min-height: inherit !important;
        position: relative;
        left: 0;
        top: 0;
        flex-direction: column;
        z-index: 100;
    }

    .catalog-page .catalog-sidebar-filter-col {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: calc(100% - 40px);
    }

        .catalog-page .catalog-sidebar-filter-col ~ .catalog-sidebar-filter-col {
            position: fixed;
        }
}

/* Job Specific *******************/

.job-page .job-popup-title {
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.job-page .custom-scrollbar {
    overflow-x: auto;
    padding-bottom: 20px;
}

.job-page .custom-scrollbar-y {
    overflow-y: auto;
    padding-bottom: 20px;
}

    .job-page .custom-scrollbar::-webkit-scrollbar-track,
    .job-page .custom-scrollbar-y::-webkit-scrollbar-track,
    .job-page .custom-scrollbar ::-webkit-scrollbar-track,
    .job-page .custom-scrollbar-y ::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    .job-page .custom-scrollbar::-webkit-scrollbar,
    .job-page .custom-scrollbar-y::-webkit-scrollbar,
    .job-page .custom-scrollbar ::-webkit-scrollbar,
    .job-page .custom-scrollbar-y ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .job-page .custom-scrollbar::-webkit-scrollbar-thumb,
    .job-page .custom-scrollbar-y::-webkit-scrollbar-thumb,
    .job-page .custom-scrollbar ::-webkit-scrollbar-thumb,
    .job-page .custom-scrollbar-y ::-webkit-scrollbar-thumb {
        border-radius: 6px;
    }

.job-main-container {
    padding-top: 20px;
}

    .job-main-container section,
    .job-skills-container section {
        max-width: 1240px;
        margin: 0 auto;
        width: 100%;
        box-sizing: border-box;
    }

    .job-main-container section {
        border-radius: 12px;
        padding: 20px;
    }

    .job-main-container input {
        padding: 8px 5px;
        border: none;
        border-radius: 6px;
    }

    .job-main-container a i {
        font-size: 12px;
        position: relative;
        top: -1px;
    }

.job-main-banner-left {
    padding-top: 60px;
    padding-left: 100px;
}

    .job-main-banner-left h1 {
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-style: normal;
        font-weight: 700;
        font-size: 38px;
        line-height: 46px;
    }

        .job-main-banner-left h1:before {
            display: none;
        }

.job-main-dates-calculation {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.job-main-banner-right {
    position: relative;
    padding-top: 10px;
}

.graph-type-container {
    position: absolute;
    top: 0;
    right: 0;
}

    .graph-type-container .custom-select-container {
        width: 200px;
        max-width: 200px;
        min-width: auto;
    }

    .graph-type-container .select-list .placeholder {
        padding-left: 10px;
        font-size: 14px;
        border-radius: 6px;
    }

    .graph-type-container .select-list .placeholder,
    .graph-type-container .custom-select.open .select-list .placeholder,
    .graph-type-container .select-list:hover .placeholder {
        border-width: 1px;
        border-style: solid;
    }

    .graph-type-container .custom-select ul {
        border-radius: 6px;
    }

.job-main-banner-gauges {
    padding: 50px 40px 20px 0;
}

.job-main-banner-gauges-cols {
    display: flex;
    gap: 30px;
}

.job-main-banner-gauges p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 5px;
}

.job-main-banner-gauges .gauge-job-horizontal:not(:last-child) {
    margin-bottom: 15px;
}

@media (max-width: 1280px) {

    .job-main-container {
        margin: 0 20px;
    }

        .job-main-container .col-container {
            flex-wrap: wrap;
        }

        .job-main-container .job-main-banner-left,
        .job-main-container .job-main-banner-right {
            width: 100%;
        }

    .job-main-banner-left {
        padding: 0 !important;
    }

    .job-main-banner-right {
        margin-top: 20px;
        padding: 0 !important;
    }

    .graph-job-wrapper {
        margin: 0 auto;
        max-width: 520px;
        width: 100%;
        margin-top: 30px;
    }

    .job-main-banner-gauges {
        overflow-x: auto;
    }

    .graph-type-container {
        right: auto;
        left: 0;
    }
}

@media (max-width: 768px) {

    .job-main-container {
        margin: 0;
        padding: 0;
    }

        .job-main-container section {
            border-radius: 0;
        }

        .job-main-container h4 {
            font-size: 18px;
            line-height: 26px;
        }

    .job-main-banner-left h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .job-main-banner-right {
        overflow-x: auto;
    }

    .graph-job-wrapper {
        margin-top: 0;
    }

    .job-main-banner-gauges {
        padding: 0 0 20px 0;
    }

    .job-main-banner-gauges-col {
        min-width: 250px;
    }

    .graph-type-container {
        display: none;
    }
}

/* Skills list */

.job-skills-content {
    margin-left: -30px;
    width: calc(100% + 60px);
}

    .job-skills-content + .job-skills-content {
        margin-top: 40px;
    }

    .job-skills-content h3 {
        font-weight: 700;
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 0;
    }

        .job-skills-content h3:before {
            display: none;
        }

.job-skills-details-list {
    list-style-type: none;
}

.job-skill-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    padding: 20px;
    border-radius: 12px;
    position: relative;
}

    .job-skill-details + .job-skill-details {
        margin-top: 10px;
    }

    .job-skill-details p {
        min-width: 220px;
        font-size: 16px;
        line-height: 20px;
    }

.job-skill-status-gauge-container {
    display: flex;
    width: 100%;
    align-items: center;
}

.job-skill-status-gauge-content {
    width: 100%;
    height: 8px;
    border-radius: 10px;
    position: relative;
}

.job-skill-status-gauge {
    display: block;
    height: 8px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

    .job-skill-status-gauge .reach {
        display: none;
    }

.job-skill-details .job-skill-status-gauge:before,
.job-skill-details .job-skill-status-gauge .reach {
    position: absolute;
    right: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 30px;
    width: 30px;
    height: 30px;
    top: 50%;
    transform: translate(50%, -50%);
    border-style: solid;
    border-radius: 50%;
    box-sizing: border-box;
}

.job-skill-details .job-skill-status-gauge:before {
    content: '';
    display: flex;
    border-width: 8px;
}

.job-skill-details.goal-reached .job-skill-status-gauge-bg,
.job-skill-details.goal-reached .job-skill-status-gauge:before {
    display: none;
}

.job-skill-details.goal-reached .job-skill-status-gauge .reach {
    display: flex;
    border-width: 4px;
}

.job-skill-status-gauge-bg-container {
    display: block;
    height: 8px;
    position: relative;
}

.job-skill-status-gauge-bg {
    display: block;
    height: 8px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
}

    .job-skill-status-gauge-bg .goal {
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 30px;
        width: 30px;
        height: 30px;
        top: 50%;
        transform: translate(50%, -50%);
        border-width: 1px;
        border-style: dashed;
        border-radius: 50%;
    }

.job-skill-status-gauge-user {
    display: block;
    height: 8px;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    text-decoration: none;
}

    .job-skill-status-gauge-user .job-skill-status-user-pic {
        position: absolute;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 30px;
        width: 30px;
        height: 30px;
        top: 50%;
        transform: translate(50%, -50%);
        border-width: 4px;
        border-style: solid;
        border-radius: 50%;
        box-sizing: border-box;
    }

.user-overlay .job-skill-status-gauge-user .job-skill-status-user-pic {
    margin-top: -20px;
}

    .user-overlay .job-skill-status-gauge-user .job-skill-status-user-pic .pic-30 {
        width: 22px;
        height: 22px;
        max-height: 22px;
        max-width: 22px;
        min-width: 22px;
    }

.job-skill-actions {
    min-width: 320px;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
}

.job-skill-cta-history {
    font-size: 16px;
    line-height: 24px;
}

.job-skill-tooltip {
    display: none;
    position: absolute;
    padding: 20px 10px;
    left: 50%;
    bottom: calc(100% + 12px);
    transform: translate(-50%, 0);
    border-radius: 6px;
    font-size: 14px;
    line-height: 20px;
    min-width: 120px;
    z-index: 1;
}

.job-skill-status-gauge .reach:hover .job-skill-tooltip {
    display: block;
}

.job-skill-tooltip:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
}

.job-skill-tooltip h5 {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}

@media (max-width: 1280px) {

    .job-skills-content {
        margin-left: 0;
        width: 100%;
    }
}

@media (max-width: 960px) {

    .job-skill-details {
        flex-wrap: wrap;
        gap: 20px;
    }

        .job-skill-details p,
        .job-skill-details .job-skill-status-gauge-container,
        .job-skill-details .job-skill-actions {
            width: 100%;
        }

    .job-skill-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {

    .job-skills-content h3 {
        font-size: 20px;
        line-height: 26px;
    }
}

/* Job Graph */

.graph-job-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
}

.graph-job-container {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 80px 120px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.graph-job {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.graphic-job-line {
    width: 1px;
    height: 50%;
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    transform-origin: bottom right;
}

.graph-job[data-skills-total="3"] .graphic-job-line:nth-child(2) {
    transform: rotate(120deg);
}

.graph-job[data-skills-total="3"] .graphic-job-line:nth-child(3) {
    transform: rotate(240deg);
}

.graph-job[data-skills-total="4"] .graphic-job-line:nth-child(2) {
    transform: rotate(90deg);
}

.graph-job[data-skills-total="4"] .graphic-job-line:nth-child(3) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="4"] .graphic-job-line:nth-child(4) {
    transform: rotate(270deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(2) {
    transform: rotate(72deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(3) {
    transform: rotate(144deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(4) {
    transform: rotate(216deg);
}

.graph-job[data-skills-total="5"] .graphic-job-line:nth-child(5) {
    transform: rotate(288deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(2) {
    transform: rotate(60deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(3) {
    transform: rotate(120deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(4) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(5) {
    transform: rotate(240deg);
}

.graph-job[data-skills-total="6"] .graphic-job-line:nth-child(6) {
    transform: rotate(300deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(2) {
    transform: rotate(51.43deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(3) {
    transform: rotate(102.86deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(4) {
    transform: rotate(154.29deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(5) {
    transform: rotate(205.71deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(6) {
    transform: rotate(257.14deg);
}

.graph-job[data-skills-total="7"] .graphic-job-line:nth-child(7) {
    transform: rotate(308.57deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(2) {
    transform: rotate(45deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(3) {
    transform: rotate(90deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(4) {
    transform: rotate(135deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(5) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(6) {
    transform: rotate(225deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(7) {
    transform: rotate(270deg);
}

.graph-job[data-skills-total="8"] .graphic-job-line:nth-child(8) {
    transform: rotate(315deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(2) {
    transform: rotate(40deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(3) {
    transform: rotate(80deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(4) {
    transform: rotate(120deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(5) {
    transform: rotate(160deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(6) {
    transform: rotate(200deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(7) {
    transform: rotate(240deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(8) {
    transform: rotate(280deg);
}

.graph-job[data-skills-total="9"] .graphic-job-line:nth-child(9) {
    transform: rotate(320deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(2) {
    transform: rotate(36deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(3) {
    transform: rotate(72deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(4) {
    transform: rotate(108deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(5) {
    transform: rotate(144deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(6) {
    transform: rotate(180deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(7) {
    transform: rotate(216deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(8) {
    transform: rotate(252deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(9) {
    transform: rotate(288deg);
}

.graph-job[data-skills-total="10"] .graphic-job-line:nth-child(10) {
    transform: rotate(324deg);
}

.graphic-job-line.background {
    z-index: 1;
}

.graph-job svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

    .graph-job svg polygon {
        stroke-linejoin: round;
    }

.graph-job-polygon.goals {
    stroke-dasharray: 1;
}

.graph-job-polygon.reach {
    stroke-width: 1;
}

.graphic-job-line.value,
.graphic-job-descriptions {
    z-index: 3;
}

    .graphic-job-line.value:before,
    .graphic-job-line.value:after {
        content: '';
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
    }

    .graphic-job-line.value:before {
        width: 8px;
        height: 8px;
    }

    .graphic-job-line.value:after {
        width: 10px;
        height: 10px;
        margin-bottom: -10px;
    }

    .graphic-job-line.value[data-percentage="0"]:after {
        bottom: 20%;
    }

    .graphic-job-line.value[data-percentage="1"]:after {
        bottom: 20.8%;
    }

    .graphic-job-line.value[data-percentage="2"]:after {
        bottom: 21.6%;
    }

    .graphic-job-line.value[data-percentage="3"]:after {
        bottom: 22.4%;
    }

    .graphic-job-line.value[data-percentage="4"]:after {
        bottom: 23.2%;
    }

    .graphic-job-line.value[data-percentage="5"]:after {
        bottom: 24%;
    }

    .graphic-job-line.value[data-percentage="6"]:after {
        bottom: 24.8%;
    }

    .graphic-job-line.value[data-percentage="7"]:after {
        bottom: 25.6%;
    }

    .graphic-job-line.value[data-percentage="8"]:after {
        bottom: 26.4%;
    }

    .graphic-job-line.value[data-percentage="9"]:after {
        bottom: 27.2%;
    }

    .graphic-job-line.value[data-percentage="10"]:after {
        bottom: 28%;
    }

    .graphic-job-line.value[data-percentage="11"]:after {
        bottom: 28.8%;
    }

    .graphic-job-line.value[data-percentage="12"]:after {
        bottom: 29.6%;
    }

    .graphic-job-line.value[data-percentage="13"]:after {
        bottom: 30.4%;
    }

    .graphic-job-line.value[data-percentage="14"]:after {
        bottom: 31.2%;
    }

    .graphic-job-line.value[data-percentage="15"]:after {
        bottom: 32%;
    }

    .graphic-job-line.value[data-percentage="16"]:after {
        bottom: 32.8%;
    }

    .graphic-job-line.value[data-percentage="17"]:after {
        bottom: 33.6%;
    }

    .graphic-job-line.value[data-percentage="18"]:after {
        bottom: 34.4%;
    }

    .graphic-job-line.value[data-percentage="19"]:after {
        bottom: 35.2%;
    }

    .graphic-job-line.value[data-percentage="20"]:after {
        bottom: 36%;
    }

    .graphic-job-line.value[data-percentage="21"]:after {
        bottom: 36.8%;
    }

    .graphic-job-line.value[data-percentage="22"]:after {
        bottom: 37.6%;
    }

    .graphic-job-line.value[data-percentage="23"]:after {
        bottom: 38.4%;
    }

    .graphic-job-line.value[data-percentage="24"]:after {
        bottom: 39.2%;
    }

    .graphic-job-line.value[data-percentage="25"]:after {
        bottom: 40%;
    }

    .graphic-job-line.value[data-percentage="26"]:after {
        bottom: 40.8%;
    }

    .graphic-job-line.value[data-percentage="27"]:after {
        bottom: 41.6%;
    }

    .graphic-job-line.value[data-percentage="28"]:after {
        bottom: 42.4%;
    }

    .graphic-job-line.value[data-percentage="29"]:after {
        bottom: 43.2%;
    }

    .graphic-job-line.value[data-percentage="30"]:after {
        bottom: 44%;
    }

    .graphic-job-line.value[data-percentage="31"]:after {
        bottom: 44.8%;
    }

    .graphic-job-line.value[data-percentage="32"]:after {
        bottom: 45.6%;
    }

    .graphic-job-line.value[data-percentage="33"]:after {
        bottom: 46.4%;
    }

    .graphic-job-line.value[data-percentage="34"]:after {
        bottom: 47.2%;
    }

    .graphic-job-line.value[data-percentage="35"]:after {
        bottom: 48%;
    }

    .graphic-job-line.value[data-percentage="36"]:after {
        bottom: 48.8%;
    }

    .graphic-job-line.value[data-percentage="37"]:after {
        bottom: 49.6%;
    }

    .graphic-job-line.value[data-percentage="38"]:after {
        bottom: 50.4%;
    }

    .graphic-job-line.value[data-percentage="39"]:after {
        bottom: 51.2%;
    }

    .graphic-job-line.value[data-percentage="40"]:after {
        bottom: 52%;
    }

    .graphic-job-line.value[data-percentage="41"]:after {
        bottom: 52.8%;
    }

    .graphic-job-line.value[data-percentage="42"]:after {
        bottom: 53.6%;
    }

    .graphic-job-line.value[data-percentage="43"]:after {
        bottom: 54.4%;
    }

    .graphic-job-line.value[data-percentage="44"]:after {
        bottom: 55.2%;
    }

    .graphic-job-line.value[data-percentage="45"]:after {
        bottom: 56%;
    }

    .graphic-job-line.value[data-percentage="46"]:after {
        bottom: 56.8%;
    }

    .graphic-job-line.value[data-percentage="47"]:after {
        bottom: 57.6%;
    }

    .graphic-job-line.value[data-percentage="48"]:after {
        bottom: 58.4%;
    }

    .graphic-job-line.value[data-percentage="49"]:after {
        bottom: 59.2%;
    }

    .graphic-job-line.value[data-percentage="50"]:after {
        bottom: 60%;
    }

    .graphic-job-line.value[data-percentage="51"]:after {
        bottom: 60.8%;
    }

    .graphic-job-line.value[data-percentage="52"]:after {
        bottom: 61.6%;
    }

    .graphic-job-line.value[data-percentage="53"]:after {
        bottom: 62.4%;
    }

    .graphic-job-line.value[data-percentage="54"]:after {
        bottom: 63.2%;
    }

    .graphic-job-line.value[data-percentage="55"]:after {
        bottom: 64%;
    }

    .graphic-job-line.value[data-percentage="56"]:after {
        bottom: 64.8%;
    }

    .graphic-job-line.value[data-percentage="57"]:after {
        bottom: 65.6%;
    }

    .graphic-job-line.value[data-percentage="58"]:after {
        bottom: 66.4%;
    }

    .graphic-job-line.value[data-percentage="59"]:after {
        bottom: 67.2%;
    }

    .graphic-job-line.value[data-percentage="60"]:after {
        bottom: 68%;
    }

    .graphic-job-line.value[data-percentage="61"]:after {
        bottom: 68.8%;
    }

    .graphic-job-line.value[data-percentage="62"]:after {
        bottom: 69.6%;
    }

    .graphic-job-line.value[data-percentage="63"]:after {
        bottom: 70.4%;
    }

    .graphic-job-line.value[data-percentage="64"]:after {
        bottom: 71.2%;
    }

    .graphic-job-line.value[data-percentage="65"]:after {
        bottom: 72%;
    }

    .graphic-job-line.value[data-percentage="66"]:after {
        bottom: 72.8%;
    }

    .graphic-job-line.value[data-percentage="67"]:after {
        bottom: 73.6%;
    }

    .graphic-job-line.value[data-percentage="68"]:after {
        bottom: 74.4%;
    }

    .graphic-job-line.value[data-percentage="69"]:after {
        bottom: 75.2%;
    }

    .graphic-job-line.value[data-percentage="70"]:after {
        bottom: 76%;
    }

    .graphic-job-line.value[data-percentage="71"]:after {
        bottom: 76.8%;
    }

    .graphic-job-line.value[data-percentage="72"]:after {
        bottom: 77.6%;
    }

    .graphic-job-line.value[data-percentage="73"]:after {
        bottom: 78.4%;
    }

    .graphic-job-line.value[data-percentage="74"]:after {
        bottom: 79.2%;
    }

    .graphic-job-line.value[data-percentage="75"]:after {
        bottom: 80%;
    }

    .graphic-job-line.value[data-percentage="76"]:after {
        bottom: 80.8%;
    }

    .graphic-job-line.value[data-percentage="77"]:after {
        bottom: 81.6%;
    }

    .graphic-job-line.value[data-percentage="78"]:after {
        bottom: 82.4%;
    }

    .graphic-job-line.value[data-percentage="79"]:after {
        bottom: 83.2%;
    }

    .graphic-job-line.value[data-percentage="80"]:after {
        bottom: 84%;
    }

    .graphic-job-line.value[data-percentage="81"]:after {
        bottom: 84.8%;
    }

    .graphic-job-line.value[data-percentage="82"]:after {
        bottom: 85.6%;
    }

    .graphic-job-line.value[data-percentage="83"]:after {
        bottom: 86.4%;
    }

    .graphic-job-line.value[data-percentage="84"]:after {
        bottom: 87.2%;
    }

    .graphic-job-line.value[data-percentage="85"]:after {
        bottom: 88%;
    }

    .graphic-job-line.value[data-percentage="86"]:after {
        bottom: 88.8%;
    }

    .graphic-job-line.value[data-percentage="87"]:after {
        bottom: 89.6%;
    }

    .graphic-job-line.value[data-percentage="88"]:after {
        bottom: 90.4%;
    }

    .graphic-job-line.value[data-percentage="89"]:after {
        bottom: 91.2%;
    }

    .graphic-job-line.value[data-percentage="90"]:after {
        bottom: 92%;
    }

    .graphic-job-line.value[data-percentage="91"]:after {
        bottom: 92.8%;
    }

    .graphic-job-line.value[data-percentage="92"]:after {
        bottom: 93.6%;
    }

    .graphic-job-line.value[data-percentage="93"]:after {
        bottom: 94.4%;
    }

    .graphic-job-line.value[data-percentage="94"]:after {
        bottom: 95.2%;
    }

    .graphic-job-line.value[data-percentage="95"]:after {
        bottom: 96%;
    }

    .graphic-job-line.value[data-percentage="96"]:after {
        bottom: 96.8%;
    }

    .graphic-job-line.value[data-percentage="97"]:after {
        bottom: 97.6%;
    }

    .graphic-job-line.value[data-percentage="98"]:after {
        bottom: 98.4%;
    }

    .graphic-job-line.value[data-percentage="99"]:after {
        bottom: 99.2%;
    }

    .graphic-job-line.value[data-percentage="100"]:after {
        bottom: 100%;
    }

.graph-job .graphic-job-description {
    display: block;
    position: absolute;
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    z-index: 1;
    text-align: center;
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(4),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(5),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(6),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(5),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(6),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(6),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(7),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(8),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(9),
.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(10),
.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(10) {
    display: none;
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(1),
.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(1) {
    bottom: calc(100% + 10px);
    left: 50%;
    width: 120px;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(2) {
    width: 120px;
    top: 78%;
    left: 95%;
    transform: translate(-30%, 0);
}

.graph-job[data-skills-total="3"] .graphic-job-description:nth-child(3) {
    width: 120px;
    top: 78%;
    right: 95%;
    transform: translate(30%, 0);
}

.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(2) {
    width: 100px;
    top: 50%;
    left: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(3) {
    width: 120px;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="4"] .graphic-job-description:nth-child(4) {
    width: 100px;
    top: 50%;
    right: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(2) {
    width: 100px;
    bottom: 66%;
    left: 100%;
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(3) {
    width: 120px;
    top: 94%;
    left: 75%;
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: 94%;
    right: 75%;
}

.graph-job[data-skills-total="5"] .graphic-job-description:nth-child(5) {
    width: 100px;
    bottom: 66%;
    right: 100%;
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(2) {
    width: 100px;
    bottom: 78%;
    left: 92%;
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(3) {
    width: 100px;
    top: 78%;
    left: 92%;
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(5) {
    width: 100px;
    top: 78%;
    right: 92%;
}

.graph-job[data-skills-total="6"] .graphic-job-description:nth-child(6) {
    width: 100px;
    bottom: 78%;
    right: 92%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 84%;
    left: 86%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(3) {
    width: 100px;
    bottom: 35%;
    left: calc(100% + 2px);
    transform: translate(0, 25%);
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: 96%;
    left: 65%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: 96%;
    right: 65%;
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(6) {
    width: 100px;
    bottom: 35%;
    right: calc(100% + 2px);
    transform: translate(0, 25%);
}

.graph-job[data-skills-total="7"] .graphic-job-description:nth-child(7) {
    width: 120px;
    bottom: 84%;
    right: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 86%;
    left: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(3) {
    width: 100px;
    top: 50%;
    left: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(4) {
    width: 120px;
    top: 86%;
    left: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(6) {
    width: 120px;
    top: 86%;
    right: 86%;
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(7) {
    width: 100px;
    top: 50%;
    right: calc(100% + 2px);
    transform: translate(0, -50%);
}

.graph-job[data-skills-total="8"] .graphic-job-description:nth-child(8) {
    width: 120px;
    bottom: 86%;
    right: 86%;
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 92%;
    left: 80%;
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(3) {
    width: 100px;
    bottom: 58%;
    left: calc(100% + 2px);
    transform: translate(0, 30%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(4) {
    width: 100px;
    top: 75%;
    left: 98%;
    transform: translate(0, -45%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: 100%;
    left: 70%;
    transform: translate(-25%, 0);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(6) {
    width: 120px;
    top: 100%;
    right: 70%;
    transform: translate(25%, 0);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(7) {
    width: 100px;
    top: 75%;
    right: 98%;
    transform: translate(0, -45%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(8) {
    width: 100px;
    bottom: 58%;
    right: calc(100% + 2px);
    transform: translate(0, 30%);
}

.graph-job[data-skills-total="9"] .graphic-job-description:nth-child(9) {
    width: 120px;
    bottom: 92%;
    right: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(2) {
    width: 120px;
    bottom: 92%;
    left: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(3) {
    width: 100px;
    bottom: 66%;
    left: calc(100% + 2px);
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(4) {
    width: 100px;
    top: 66%;
    left: calc(100% + 2px);
    transform: translate(0, -40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(5) {
    width: 120px;
    top: 92%;
    left: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(6) {
    top: calc(100% + 10px);
    left: 50%;
    width: 120px;
    transform: translate(-50%, 0);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(7) {
    width: 120px;
    top: 92%;
    right: 80%;
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(8) {
    width: 100px;
    top: 66%;
    right: calc(100% + 2px);
    transform: translate(0, -40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(9) {
    width: 100px;
    bottom: 66%;
    right: calc(100% + 2px);
    transform: translate(0, 40%);
}

.graph-job[data-skills-total="10"] .graphic-job-description:nth-child(10) {
    width: 120px;
    bottom: 92%;
    right: 80%;
}

/* Line Graph */

.line-graph-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

    .line-graph-wrapper .line-graph-horizontal-background,
    .line-graph-wrapper .line-graph-vertical-background,
    .line-graph-wrapper .line-graph-references {
        display: flex;
        position: absolute;
        width: calc(100% - 170px);
        height: calc(100% - 60px);
        margin: 20px 50px 40px 100px;
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
    }

    .line-graph-wrapper .line-graph-horizontal-background {
        flex-direction: column-reverse;
        justify-content: space-between;
        z-index: 1;
    }

        .line-graph-wrapper .line-graph-horizontal-background .line {
            height: 1px;
            width: calc(100% + 100px);
            margin-left: -50px;
        }

        .line-graph-wrapper .line-graph-horizontal-background .value {
            transform: translate(-30px,-50%);
            width: 20px;
        }

        .line-graph-wrapper .line-graph-horizontal-background .value,
        .line-graph-wrapper .line-graph-vertical-background .value {
            position: absolute;
            display: block;
            text-align: center;
            font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
            font-style: normal;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
        }

    .line-graph-wrapper .line-graph-vertical-background {
        justify-content: space-between;
        z-index: 2;
    }

        .line-graph-wrapper .line-graph-vertical-background .line {
            width: 1px;
            height: 100%;
        }

        .line-graph-wrapper .line-graph-vertical-background .value {
            bottom: 0;
            transform: translate(-50%,100%);
            max-width: 100px;
            padding-top: 20px;
        }

    .line-graph-wrapper .line-graph-references .line-graph-reference {
        position: absolute;
        height: 1px;
        width: calc(100% + 100px);
        margin-left: -50px;
        margin-bottom: -1px;
        z-index: 3;
        bottom: 0;
    }

    .line-graph-wrapper .line-graph {
        position: absolute;
        width: calc(100% - 170px);
        height: calc(100% - 60px);
        margin: 20px 50px 40px 100px;
        transform: scaleY(-1);
        z-index: 4;
    }

        .line-graph-wrapper .line-graph line {
            stroke-width: 1;
        }

    .line-graph-wrapper .line-graph-points {
        display: flex;
        position: absolute;
        width: calc(100% - 170px);
        height: calc(100% - 60px);
        margin: 20px 50px 40px 100px;
        justify-content: space-between;
        align-items: flex-end;
        z-index: 5;
    }

    .line-graph-wrapper .line-graph-point {
        display: block;
        position: relative;
        width: 1px;
        height: 100%;
    }

        .line-graph-wrapper .line-graph-point:hover {
            z-index: 1;
        }

    .line-graph-wrapper .graph-point {
        display: flex;
        position: absolute;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        text-align: center;
        line-height: 30px;
        width: 30px;
        height: 30px;
        left: 0;
        transform: translate(-50%,50%);
        border-style: solid;
        border-width: 8px;
        border-radius: 50%;
        box-sizing: border-box;
        bottom: 0;
    }

        .line-graph-wrapper .graph-point .icon {
            display: none;
        }

    .line-graph-wrapper .goal-reached .graph-point {
        border-width: 4px;
    }

        .line-graph-wrapper .goal-reached .graph-point .icon {
            display: inline-flex;
        }

    .line-graph-wrapper .graph-point-tooltip {
        display: none;
        position: absolute;
        padding: 24px;
        left: 50%;
        /* bottom: calc(100% + 12px); */
        transform: translate(-50%, 0);
        border-radius: 6px;
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-style: normal;
        font-size: 14px;
        text-align: left;
        line-height: 20px;
        min-width: 120px;
        z-index: 1;
    }

        .line-graph-wrapper .graph-point-tooltip:before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, 0);
        }

    .line-graph-wrapper .line-graph-point:hover .graph-point-tooltip {
        display: block;
    }

    .line-graph-wrapper .graph-point-tooltip h5 {
        font-size: 18px;
        line-height: 26px;
        font-weight: 700;
        margin: 0;
    }

    .line-graph-wrapper .graph-point-tooltip span {
        display: block;
    }

.line-graph-references-legend {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .line-graph-references-legend .line-graph-references {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .line-graph-references-legend .line-graph-reference {
        width: 24px;
        height: 1px;
        margin-bottom: -1px;
    }

    .line-graph-references-legend .description {
        font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
    }

/* Job gauge */

.gauge-job-horizontal {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
}

    .gauge-job-horizontal .gauge-display {
        display: block;
        height: 8px;
        border-radius: 10px;
        position: relative;
    }

/* Job evaluation popup */

.job-popup-content {
    font-size: 16px;
    line-height: 24px;
    max-height: 300px;
    overflow-y: auto;
}

.job-evaluation-levels {
    display: flex;
    gap: 10px;
    padding: 0 12px;
    box-sizing: border-box;
}

    .job-evaluation-levels span {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
    }

    /* Start copied checkbox / radio styles from xLMS */

    .job-evaluation-levels .input-option-container {
        display: inline-block;
        font-size: 14px;
    }

        .job-evaluation-levels .input-option-container input[type=checkbox],
        .job-evaluation-levels .input-option-container input[type=radio] {
            display: none;
        }

    .job-evaluation-levels input[type=checkbox] + span,
    .job-evaluation-levels input[type=radio] + span {
        display: inline-flex;
        box-sizing: border-box;
        position: relative;
    }

        .job-evaluation-levels input[type=checkbox] + span span:not(:empty),
        .job-evaluation-levels input[type=radio] + span span:not(:empty) {
            padding: 5px 15px 5px 25px;
        }

        .job-evaluation-levels input[type=checkbox] + span span:empty,
        .job-evaluation-levels input[type=radio] + span span:empty {
            display: inline-block;
            width: 16px;
        }

        .job-evaluation-levels input[type=checkbox] + span:before,
        .job-evaluation-levels input[type=radio] + span:before {
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            top: 50%;
            border-width: 1px;
            border-style: solid;
            margin-top: -8px;
        }

        .job-evaluation-levels input[type=checkbox] + span i {
            display: none;
        }

    .job-evaluation-levels input[type=checkbox]:checked + span i {
        content: '';
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -8px;
        border-radius: 50%;
        text-align: center;
        font-size: 10px;
        line-height: 16px;
    }

    .job-evaluation-levels input[type=checkbox]:checked + span .fa-check {
        display: block;
    }

    .job-evaluation-levels input[type=radio] + span:before {
        border-radius: 50%;
    }

    .job-evaluation-levels input[type=radio]:checked + span:after {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        box-sizing: border-box;
        position: absolute;
        left: 5px;
        top: 50%;
        margin-top: -3px;
        border-radius: 50%;
    }

    .job-evaluation-levels label input[type=checkbox] + span,
    .job-evaluation-levels label input[type=radio] + span {
        cursor: pointer;
    }

    .job-evaluation-levels input[disabled],
    .job-evaluation-levels input[disabled] + span,
    .job-evaluation-levels input[disabled] + span i,
    .job-evaluation-levels input[disabled] + span:before {
        cursor: default !important;
        pointer-events: none !important;
    }

    .job-evaluation-levels .input-option-container.inversed-checkbox input[type=checkbox] + span:before {
        left: inherit;
        right: 15px;
    }

    .job-evaluation-levels .input-option-container.inversed-checkbox input[type=checkbox] + span span:not(:empty) {
        padding: 5px 40px 5px 0px;
    }

    .job-evaluation-levels .input-option-container.inversed-checkbox input[type=checkbox]:checked + span i {
        left: inherit;
        right: 15px;
    }

/* End copied styles from xLMS */

.job-eval-level-desc {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 12px 20px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
}

    .job-eval-level-desc h5 {
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
    }

.job-level-comment-container h4 {
    padding-bottom: 10px;
}

.job-level-comment-container textarea {
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 0;
    box-sizing: border-box;
}

.job-level-btn-container {
    margin-top: 20px;
    padding-top: 10px;
    gap: 10px;
}

/* Course comments */

.course-comments-container {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
    box-sizing: border-box;
    pointer-events: none;
}

    .course-comments-container.open {
        pointer-events: auto;
    }

.course-comments-content {
    position: absolute;
    padding: 24px;
    z-index: 1;
    width: 420px;
    max-width: 100%;
    box-sizing: border-box;
    top: 0;
    right: -420px;
    bottom: 0;
    transition: right 400ms;
}

.course-comments-container.open .course-comments-content {
    right: 0;
}

.custom-comments-container-background {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 400ms;
}

.course-comments-container.open .custom-comments-container-background {
    opacity: 0.4;
    pointer-events: auto;
}

.course-comments-container .close-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 1;
    display: block;
    width: 21px;
    height: 21px;
    overflow: hidden;
}

    .course-comments-container .close-btn::before,
    .course-comments-container .close-btn::after {
        content: '';
        display: block;
        position: absolute;
        width: 21px;
        height: 21px;
        box-sizing: border-box;
        transform: rotate(45deg);
    }

    .course-comments-container .close-btn::before {
        border-right-style: solid;
        border-right-width: 1px;
        right: 7px;
        bottom: 7px;
    }

    .course-comments-container .close-btn::after {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        right: -7px;
        bottom: 7px;
    }

.course-comments-content h4 {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
}

.course-comments-content .course-comments-legend {
    font-size: 16px;
    line-height: 24px;
}

/* Start markdown textarea */

.markdown-textarea-container {
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 20px;
    display: flex;
    flex-direction: column;
}

    .markdown-textarea-container .markdown-textarea-header,
    .markdown-textarea-container .markdown-textarea-validation {
        display: none;
    }

    .markdown-textarea-container.has-input .markdown-textarea-header,
    .markdown-textarea-container.has-input .markdown-textarea-validation,
    .markdown-textarea-container.force-open .markdown-textarea-header,
    .markdown-textarea-container.force-open .markdown-textarea-validation,
    .markdown-textarea-container.has-focus .markdown-textarea-header,
    .markdown-textarea-container.has-focus .markdown-textarea-validation {
        display: flex;
    }

    .markdown-textarea-container .markdown-textarea-header {
        height: 48px;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .markdown-textarea-container .markdown-textarea-user-pic {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        width: 48px;
        height: 48px;
    }

    .markdown-textarea-container .markdown-textearea-options {
        display: flex;
        gap: 10px;
    }

    .markdown-textarea-container .markdown-textearea-option-group {
        display: flex;
        position: relative;
    }

        .markdown-textarea-container .markdown-textearea-option-group ~ .markdown-textearea-option-group:before {
            content: '';
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 1px;
            left: -5px;
        }

    .markdown-textarea-container .markdown-textearea-option {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        text-decoration: none;
    }

        .markdown-textarea-container .markdown-textearea-option i {
            font-size: 14px;
            line-height: 20px;
            padding: 0;
        }

    .markdown-textarea-container textarea {
        outline: 0px solid transparent;
        border: none;
        resize: vertical;
        margin-bottom: 0;
    }

    .markdown-textarea-container .markdown-textarea-preview ul {
        list-style-position: inside;
    }

    .markdown-textarea-container .markdown-textarea-validation {
        padding-top: 10px;
        gap: 10px;
    }

        .markdown-textarea-container .markdown-textarea-validation .cta-contextual:before {
            border: none;
        }

        .markdown-textarea-container .markdown-textarea-validation .primary {
            pointer-events: none;
        }

    .markdown-textarea-container.has-input .markdown-textarea-validation .primary {
        pointer-events: auto;
    }

/* End markdown textarea */

.course-comments-content .course-comment-legend {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
}

.course-comments-content .course-comments-none {
    display: flex;
    height: 380px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 26px;
    font-style: italic;
}

.course-comments-content .course-comments-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .course-comments-content .course-comments-filters select {
        border: none;
        font-size: 14px;
        line-height: 20px;
        cursor: pointer;
    }

.course-comments-content .course-comment {
    list-style-type: none;
    padding-top: 12px;
    border-top-width: 1px;
    border-top-style: solid;
    display: flex;
    gap: 12px;
}

    .course-comments-content .course-comment ~ .course-comment {
        margin-top: 20px;
    }

.course-comments-content .course-comment-main-profile-col {
    width: 48px;
    min-width: 48px;
}

.course-comments-content .course-comment.deleted .course-comment-deleted-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    max-height: 48px;
    font-size: 18px;
}

.course-comments-content .course-comment-main-col {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.course-comments-content .course-comment-header {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

    .course-comments-content .course-comment-header h5 {
        font-size: 16px;
        line-height: 24px;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .course-comments-content .course-comment-header i {
        font-size: 12px;
        line-height: 16px;
        white-space: nowrap;
    }

.course-comments-content .course-comment-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.course-comments-content .course-comment.deleted .course-comment-content {
    padding-top: 12px;
}

.course-comments-content .course-comment-content p {
    font-size: 16px;
    line-height: 24px;
}

.course-comments-content .course-comment-actions {
    display: inline-flex;
    gap: 24px;
    margin-top: 6px;
    align-items: center;
}

.course-comments-content .course-comment-action-like,
.course-comments-content .course-comment-action-answer {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

    .course-comments-content .course-comment-action-like:hover span,
    .course-comments-content .course-comment-action-answer:hover span {
        text-decoration: underline;
    }

.course-comments-content .course-comment-actions i {
    padding: 0;
    font-size: 14px;
}

.course-comments-content .course-comment-action-answer i {
    transform: scaleX(-1);
}

.pic-24 {
    display: block;
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    max-height: 24px;
    border-radius: 50%;
}

.course-comments-content .course-comment-deleted-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.course-comments-content .course-comment-answer.deleted .course-comment-deleted-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    max-width: 24px;
    max-height: 24px;
    font-size: 14px;
}

.course-comments-content .course-comment.deleted .course-comment-answer .course-comment-content {
    padding-top: 0;
}

.course-comments-content .course-comment-answer,
.course-comments-content .course-comment-more-answers {
    display: flex;
    align-items: flex-start;
    list-style-type: none;
    gap: 12px;
    padding-top: 12px;
    border-top-width: 1px;
    border-top-style: solid;
    margin-top: 12px;
}

.course-comments-content .course-comment-profile-col {
    width: 24px;
    min-width: 24px;
}

.course-comments-content .course-comment-answer .course-comment-content {
    min-height: 24px;
}

.course-comments-content .course-comment-more-answers a {
    text-decoration: none;
    display: flex;
    align-items: center;
}

    .course-comments-content .course-comment-more-answers a:hover span,
    .course-comments-content .course-comment-more-answers a:hover span {
        text-decoration: underline;
    }

    .course-comments-content .course-comment-more-answers a i {
        font-size: 12px;
    }

.course-comments-content .course-comment .markdown-textarea-container {
    margin-top: 10px;
    margin-left: -60px;
    width: calc(100% + 86px);
}

.course-comments-content .course-comment-options-col {
    width: 36px;
    min-width: 36px;
}

.course-comments-content .course-comment-options-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    text-decoration: none;
}

    .course-comments-content .course-comment-options-icon i {
        padding: 0;
    }

/* Copied CSS from latest xLMS version *******************/

.nowrap {
    white-space: nowrap;
}

.col-container.column {
    flex-direction: column;
}

/*Adapted CSS from latest xLMS version *******************/

.catalog-page .selected-option {
    display: inline-block;
    border-radius: 10px;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    padding: 4px 8px;
    margin-right: 10px;
    margin-bottom: 10px;
    white-space: nowrap;
    border-width: 1px;
    border-style: solid;
}

    .catalog-page .selected-option .delete-option {
        display: inline-block;
        position: static;
        pointer-events: auto;
        line-height: 16px;
        padding-left: 5px;
        cursor: pointer;
    }

/* Call To Action *******************/

/*.custom-transition-page .cta-contextual,
.markdown-textarea-container .cta-contextual,
.job-page .cta-contextual {
    display: inline-block;
    height: 42px;
    font-size: 16px;
    line-height: 42px;
    border-radius: 22px;
    padding-left: 15px;
    padding-right: 15px;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    outline: none;
    white-space: nowrap;
}

    .custom-transition-page .cta-contextual:before {
        border: none;
    }

    .custom-transition-page .cta-contextual:hover,
    .markdown-textarea-container .cta-contextual:hover,
    .job-page .cta-contextual:hover {
        text-decoration: none;
    }

    .custom-transition-page .cta-contextual.dotted,
    .markdown-textarea-container .cta-contextual.dotted,
    .job-page .cta-contextual.dotted {
        border-style: dotted;
    }

    .custom-transition-page .cta-contextual i,
    .markdown-textarea-container .cta-contextual i,
    .job-page .cta-contextual i {
        display: inline-block;
        height: 42px;
        line-height: 42px;
    }

        .custom-transition-page .cta-contextual i:first-child,
        .markdown-textarea-container .cta-contextual i:first-child,
        .job-page .cta-contextual i:first-child {
            padding-right: 8px;
        }

        .custom-transition-page .cta-contextual i:last-child,
        .markdown-textarea-container .cta-contextual i:last-child,
        .job-page .cta-contextual i:last-child {
            padding-right: 0;
            padding-left: 8px;
        }

        .custom-transition-page .cta-contextual i:first-child:last-child,
        .markdown-textarea-container .cta-contextual i:first-child:last-child,
        .job-page .cta-contextual i:first-child:last-child {
            padding-right: 0;
            padding-left: 0;
        }

    .custom-transition-page .cta-contextual.multiline,
    .markdown-textarea-container .cta-contextual.multiline,
    .job-page .cta-contextual.multiline {
        display: inline-block;
        height: auto;
        line-height: 18px;
        padding-top: 10px;
        padding-bottom: 5px;
        white-space: normal;
    }

        .custom-transition-page .cta-contextual.multiline span span,
        .markdown-textarea-container .cta-contextual.multiline span span,
        .job-page .cta-contextual.multiline span span {
            display: block;
            font-weight: normal;
            font-size: 12px;
        }*/

/* Select *******************/
/*
.catalog-result-sorting-options .custom-select-container {
    display: inline-flex;
    flex-direction: column;
    min-width: 180px;
}

    .catalog-result-sorting-options .custom-select-container.large {
        max-width: 180px;
        min-width: 180px;
    }

    .catalog-result-sorting-options .custom-select-container.small {
        max-width: 120px;
        min-width: 120px;
    }

    .catalog-result-sorting-options .custom-select-container.full-width {
        width: 100%;
    }

    .catalog-result-sorting-options .custom-select-container label {
        position: relative;
    }

.catalog-result-sorting-options .custom-select {
    display: inline-block;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    height: 42px;
}

.catalog-result-sorting-options .above ~ .custom-select {
    margin-top: 5px;
}

.catalog-result-sorting-options .custom-select .select-list {
    position: absolute;
    width: 100%;
    top: 0;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 14px;
    list-style-type: none;
    height: 42px;
    padding: 5px 10px;
    line-height: 32px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
}

.catalog-result-sorting-options .custom-select i {
    display: block;
    position: absolute;
    right: 10px;
    top: 0;
    pointer-events: none;
    line-height: 42px;
}

.catalog-result-sorting-options .select-list .placeholder {
    display: block;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 32px;
    height: 32px;
    font-weight: 400;
}

.catalog-result-sorting-options .select-list > li:last-child {
    display: none;
}

.catalog-result-sorting-options .custom-select.open .select-list > li:last-child {
    display: flex;
    box-sizing: border-box;
    z-index: 5;
    overflow: visible;
    position: absolute;
    top: -1px;
    left: -1px;
    min-width: calc(100% + 2px);
    min-height: 42px;
    border-radius: 6px;
}

.catalog-result-sorting-options .select-list ul {
    list-style-type: none;
    width: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    max-height: 250px;
    border-style: solid;
    border-width: 1px;
    border-radius: 6px;
    box-sizing: border-box;
    overflow-x: visible;
    overflow-y: auto;
    white-space: nowrap;
    padding: 5px 10px;
    line-height: 32px;
}

    .catalog-result-sorting-options .select-list ul::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    .catalog-result-sorting-options .select-list ul::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .catalog-result-sorting-options .select-list ul::-webkit-scrollbar-thumb {
        border-radius: 6px;
    }

    .catalog-result-sorting-options .select-list ul li {
        position: relative;
        line-height: 32px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

        .catalog-result-sorting-options .select-list ul li:hover {
            cursor: pointer;
        }

@media (max-width: 768px) {

    .catalog-result-sorting-options .custom-select-container,
    .catalog-result-sorting-options .custom-select-container .custom-select {
        max-width: inherit;
    }
}*/

/* Radio / Checkbox *******************/

/*.catalog-page .input-option-container {
    display: inline-block;
    font-size: 14px;
}

    .catalog-page .input-option-container input[type=checkbox],
    .catalog-page .input-option-container input[type=radio] {
        display: none;
    }

.catalog-page input[type=checkbox] + span,
.catalog-page input[type=radio] + span {
    display: inline-flex;
    box-sizing: border-box;
    position: relative;
}

    .catalog-page input[type=checkbox] + span span:not(:empty),
    .catalog-page input[type=radio] + span span:not(:empty) {
        padding: 5px 15px 5px 25px;
    }

    .catalog-page input[type=checkbox] + span span:empty,
    .catalog-page input[type=radio] + span span:empty {
        display: inline-block;
        width: 16px;
    }

    .catalog-page input[type=checkbox] + span:before,
    .catalog-page input[type=radio] + span:before {
        content: '';
        display: block;
        width: 16px;
        height: 16px;
        box-sizing: border-box;
        position: absolute;
        left: 0;
        top: 50%;
        border-width: 1px;
        border-style: solid;
        margin-top: -8px;
        border-radius: 2px;
    }

    .catalog-page input[type=checkbox] + span i {
        display: none;
    }

.catalog-page input[type=checkbox]:checked + span i {
    content: '';
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    border-radius: 50%;
    text-align: center;
    font-size: 10px;
    line-height: 16px;
}

.catalog-page input[type=checkbox]:checked + span .fa-check {
    display: block;
}

.catalog-page input[type=radio] + span:before {
    border-radius: 50%;
}

.catalog-page input[type=radio]:checked + span:after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    box-sizing: border-box;
    position: absolute;
    left: 5px;
    top: 50%;
    margin-top: -3px;
    border-radius: 50%;
}

.catalog-page label input[type=checkbox] + span,
.catalog-page label input[type=radio] + span {
    cursor: pointer;
}

.catalog-page input[disabled],
.catalog-page input[disabled] + span,
.catalog-page input[disabled] + span i,
.catalog-page input[disabled] + span:before {
    cursor: default !important;
    pointer-events: none !important;
}

.catalog-page .input-option-container.inversed-checkbox input[type=checkbox] + span:before {
    left: inherit;
    right: 15px;
}

.catalog-page .input-option-container.inversed-checkbox input[type=checkbox] + span span:not(:empty) {
    padding: 5px 40px 5px 0px;
}

.catalog-page .input-option-container.inversed-checkbox input[type=checkbox]:checked + span i {
    left: inherit;
    right: 15px;
}

@media (max-width: 768px) {

    .catalog-page .col-12 .checkbox-container,
    .catalog-page .col-6 .checkbox-container {
        display: flex;
        flex-wrap: wrap;
    }

    .catalog-page .checkbox-container .input-option-container {
        width: 100%;
        box-sizing: border-box;
    }
}*/

/* Badge *******************/

.catalog-main-search-container .badge-container {
    display: inline-block;
    position: relative;
    padding: 0;
    white-space: nowrap;
    font-size: 20px;
    text-decoration: none;
}

.catalog-main-search-container .badge {
    display: inline-block;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    line-height: 20px;
    z-index: 0;
    position: relative;
    padding: 0 4px;
    text-align: center;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    text-decoration: none;
}

.catalog-main-search-container .badge-container .badge {
    top: -10px;
    margin-left: -4px;
}

/**************************************************/
/* Resource */
/**************************************************/

.learning-ressource .main-container {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.learning-popup .resource-main-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.resource-main-container {
    display: flex;
    position: relative;
}

.resource-main-content {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: left;
    width: 100%;
}

.resource-module-container {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

.resource-other-chapter-button {
    margin: 0 auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px;
    min-height: 100px;
    box-sizing: border-box;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    cursor: pointer;
    text-align: center;
}

    .resource-other-chapter-button:hover {
        text-decoration: none;
    }

/* Sidebar */

.resource-sidebar-main-button {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    padding: 0 24px;
}

.resource-main-container.has-sidebar .resource-sidebar-main-button {
    display: none;
}

.resource-sidebar-button-icon {
    position: relative;
    top: 50px;
    transform: translate(0, -50%);
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 24px;
}

.resource-sidebar-main-button .fa {
    padding: 0;
}

.resource-sidebar {
    width: 300px;
    min-width: 300px;
    margin-left: -300px;
    transition: margin-left 400ms;
    z-index: 5;
    visibility: hidden;
}

.resource-main-container.has-sidebar .resource-sidebar {
    visibility: visible;
    margin-left: 0;
}

.resource-sidebar-header {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 272px;
    padding: 0 24px 12px;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

    .resource-sidebar-header:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-sidebar-header-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.resource-sidebar-header .resource-sidebar-button {
    position: absolute;
    top: 0;
    right: 0;
    height: 100px;
    padding: 0 24px;
    z-index: 1;
}

.resource-sidebar-header .resource-sidebar-button-icon i {
    position: relative;
    left: -1px;
}

.resource-sidebar-header .resource-sidebar-chapter-user {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.resource-sidebar-header .resource-sidebar-picture {
    display: block;
    width: 24px;
    height: 24px;
    max-height: 24px;
    max-width: 24px;
    min-width: 24px;
    border-radius: 50%;
    overflow: hidden;
}

.resource-sidebar-header h3 {
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 0;
    margin-bottom: 0;
}

    .resource-sidebar-header h3:before {
        display: none;
    }

.resource-sidebar-header .resource-sidebar-chapter-metadata {
    font-weight: 500;
    font-size: 12px;
    line-height: 16px;
}

.resource-sidebar-header .resource-sidebar-chapter-data + .resource-sidebar-chapter-data {
    margin-left: 12px;
    padding-left: 12px;
    border-left-style: solid;
    border-left-width: 1px;
}

.resource-sidebar-header .resource-sidebar-gauge-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    line-height: 16px;
}

.resource-sidebar-header .resource-sidebar-gauge {
    display: block;
    width: 100%;
    height: 4px;
    position: relative;
}

    .resource-sidebar-header .resource-sidebar-gauge:before {
        content: '';
        display: block;
        width: 100%;
        height: 4px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        opacity: 0.6;
    }

.resource-sidebar-header .resource-sidebar-gauge-value {
    display: block;
    width: 100%;
    height: 4px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.resource-sidebar-chapter-list {
    display: flex;
    flex-direction: column;
    margin-top: 50px;
    list-style-type: none;
}

.resource-sidebar-chapter-element {
    display: flex;
    gap: 12px;
    align-items: center;
    height: 48px;
    padding: 12px 20px 12px 48px;
    box-sizing: border-box;
    position: relative;
}

    .resource-sidebar-chapter-element:hover {
        text-decoration: none;
    }

    .resource-sidebar-chapter-element.selected {
        border-right-width: 4px;
        border-right-style: solid;
    }

    .resource-sidebar-chapter-element .resource-sidebar-chapter-status,
    .resource-sidebar-chapter-element.done .gauge-circle-container {
        display: none;
    }

    .resource-sidebar-chapter-element.done .resource-sidebar-chapter-status {
        display: block;
        font-size: 24px;
        margin-top: -2px;
    }

    .resource-sidebar-chapter-element .resource-sidebar-chapter-status,
    .resource-sidebar-chapter-element .gauge-circle-container {
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 12px;
    }

    .resource-sidebar-chapter-element .gauge-circle-container {
        display: flex;
        align-items: center;
    }

        .resource-sidebar-chapter-element .gauge-circle-container .gauge-circle {
            height: 20px;
            line-height: 20px;
            width: 20px;
        }

        .resource-sidebar-chapter-element .gauge-circle-container .gauge-value {
            width: 16px;
            height: 16px;
            line-height: 16px;
        }

        .resource-sidebar-chapter-element .gauge-circle-container .gauge-circle .gauge-progression {
            width: 20px;
            height: 20px;
        }

@media (max-width: 991px) {

    .resource-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
    }
}

@media (max-width: 480px) {

    .resource-sidebar {
        width: 100%;
        margin-left: -100%;
    }
}

/*Adapted generic styles */

.resource-main-content h1 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 38px;
    line-height: 46px;
    padding-bottom: 12px;
    margin-bottom: 24px;
}

    .resource-main-content h1:before {
        width: 72px;
        height: 6px;
        border-radius: 3px;
    }

.resource-main-content h2 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 30px;
    line-height: 36px;
    padding-bottom: 0;
    margin-bottom: 16px;
}

    .resource-main-content h2:before {
        display: none;
    }

.resource-main-content h3 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 0;
    margin-bottom: 12px;
}

    .resource-main-content h3:before {
        display: none;
    }

.resource-main-content h4 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 0;
    margin-bottom: 8px;
}

    .resource-main-content h4:before {
        display: none;
    }

.resource-main-content p {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.resource-main-content intro-p {
    font-size: 18px;
    line-height: 26px;
}

.resource-main-content .cta-contextual.primary {
    display: inline-block;
    height: 42px;
    font-size: 16px;
    line-height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    position: relative;
    outline: none;
    white-space: nowrap;
}

    .resource-main-content .cta-contextual.primary:hover {
        text-decoration: none;
    }

.resource-main-content .cta-contextual .fa {
    display: inline;
    line-height: 40px;
}

@media (max-width: 768px) {

    .resource-main-content h1 {
        font-size: 32px;
        line-height: 42px;
    }

    .resource-main-content h2 {
        font-size: 28px;
        line-height: 34px;
    }

    .resource-main-content h3 {
        font-size: 22px;
        line-height: 28px;
    }

    .resource-main-content h4 {
        font-size: 18px;
        line-height: 24px;
    }

    .resource-main-content p {
        font-size: 16px;
        line-height: 24px;
    }
}

/* Module Text */

.resource-module-text {
    max-width: 888px;
    width: 100%;
    padding: 48px 24px;
    box-sizing: border-box;
}

    .resource-module-text .double-col-text-container {
        column-count: 2;
        column-gap: 24px;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-text {
        margin: 0 48px;
        width: calc(100% - 96px);
    }
}

@media (max-width: 1080px) {

    .resource-module-text {
        max-width: 100%;
        width: calc(100% - 144px);
        padding: 48px 0;
        margin: 0 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-text {
        margin: 0 48px;
        width: calc(100% - 96px);
    }
}

@media (max-width: 768px) {

    .resource-module-text {
        padding: 24px 0;
        width: calc(100% - 48px);
        margin: 0 24px;
    }

        .resource-module-text .double-col-text-container {
            column-count: auto;
        }
}

/* Module Cover */

.resource-module-cover {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    min-height: 462px;
}

    .resource-module-cover:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-module-cover-content {
    max-width: 888px;
    padding: 150px 24px 96px;
    margin: auto;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.resource-module-cover h1 {
    font-weight: 400;
    font-size: 38px;
    line-height: 54px;
    padding-bottom: 0;
    margin-bottom: 0;
}

    .resource-module-cover h1:before {
        display: none;
    }

@media (max-width: 991px) {

    .resource-module-cover-content {
        margin: 0;
        max-width: 100%;
        padding: 150px 48px 96px;
    }
}

@media (max-width: 768px) {

    .resource-module-cover {
        min-height: inherit;
    }

    .resource-module-cover-content {
        padding: 84px 24px 48px;
    }

    .resource-module-cover h1 {
        font-size: 30px;
        line-height: 40px;
    }
}

/* Module Image */

.resource-module-image {
    width: 100%;
}

    .resource-module-image.large {
        max-width: 100%;
        margin: 0 auto;
    }

    .resource-module-image.standard {
        max-width: 888px;
        margin: 24px auto;
    }

    .resource-module-image.textual {
        display: flex;
        max-width: 888px;
        margin: 24px auto;
        gap: 48px;
        align-items: center;
    }

    .resource-module-image .image-container img {
        display: block;
    }

    .resource-module-image.large .image-container {
        width: 100%;
        min-height: 462px;
        overflow: hidden;
        position: relative;
    }

        .resource-module-image.large .image-container img {
            width: 100%;
            min-height: 462px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

.resource-module-image-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.resource-module-image.standard .resource-module-image-content,
.resource-module-image.textual .resource-module-image-content {
    padding: 24px 0;
}

.resource-module-image.textual .resource-module-image-content {
    width: 320px;
    min-width: 320px;
}

.resource-module-image figcaption {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
}

.resource-module-image.large figcaption {
    padding: 0 24px;
}

.resource-module-image.textual figcaption {
    text-align: left;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-image.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-main-container.has-sidebar .resource-module-image.standard .resource-module-image-content {
            padding: 24px 96px;
        }

    .resource-main-container.has-sidebar .resource-module-image.textual {
        width: auto;
        margin: 24px 96px;
    }

        .resource-main-container.has-sidebar .resource-module-image.textual .resource-module-image-content {
            padding: 0;
        }
}

@media (max-width: 1080px) {

    .resource-module-image.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-module-image.standard .resource-module-image-content {
            padding: 24px 96px;
        }

    .resource-module-image.textual {
        width: auto;
        margin: 24px 96px;
    }

        .resource-module-image.textual .resource-module-image-content {
            padding: 0;
        }
}

@media (max-width: 991px) {

    .resource-module-image.standard .resource-module-image-content {
        padding: 24px 48px;
    }

    .resource-module-image.textual {
        gap: 24px;
        flex-wrap: wrap;
        justify-content: center;
        margin: 24px 48px;
    }

        .resource-module-image.textual .resource-module-image-content {
            width: 420px;
        }
}

@media (max-width: 768px) {

    .resource-module-image.large .image-container img {
        width: auto;
        max-width: inherit;
    }

    .resource-module-image.standard .resource-module-image-content {
        padding: 24px;
    }

    .resource-module-image.textual {
        margin: 24px;
    }

        .resource-module-image.textual .resource-module-image-content {
            width: 100%;
        }
}

/* Module PDF */

.resource-module-pdf {
    max-width: 888px;
    width: 100%;
    margin: 24px auto;
}

    .resource-module-pdf.large {
        max-width: 1280px;
        margin: 0 auto;
    }

.resource-module-pdf-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .resource-module-pdf-content img {
        display: block;
    }

.resource-module-pdf figcaption {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
    text-align: center;
}

.resource-module-pdf.large figcaption {
    padding: 0 24px;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-pdf.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-main-container.has-sidebar .resource-module-pdf.standard .resource-module-pdf-content {
            padding: 24px 96px;
        }
}

@media (max-width: 1080px) {

    .resource-module-pdf.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-module-pdf.standard .resource-module-pdf-content {
            padding: 24px 96px;
        }
}

@media (max-width: 991px) {

    .resource-module-pdf.standard .resource-module-pdf-content {
        padding: 24px 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-pdf.standard .resource-module-pdf-content {
        padding: 24px;
    }
}

/* Module Quiz */

.resource-module-quiz {
    max-width: 888px;
    width: 100%;
    margin: 48px auto;
}

    .resource-module-quiz h5 {
        font-style: normal;
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        text-align: center;
        margin-bottom: 24px;
    }

.resource-module-quiz-content {
    border-radius: 4px;
    padding: 48px;
}

    .resource-module-quiz-content p {
        font-size: 18px;
        line-height: 26px;
        text-align: center;
    }

.resource-module-quiz-options {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding-left: 48px;
    box-sizing: border-box;
    margin-top: 36px;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

    .resource-module-quiz-options label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: inherit;
        padding: 4px 12px 4px 12px;
        box-sizing: border-box;
    }

        .resource-module-quiz-options label + label {
            margin-top: 24px;
        }

    .resource-module-quiz-options .answer {
        border-radius: 4px;
    }

    .resource-module-quiz-options i {
        display: none;
        font-size: 24px;
    }

    .resource-module-quiz-options .answer i {
        display: inline-block;
    }

.resource-module-quiz-validation {
    margin-top: 36px;
    display: flex;
    justify-content: center;
}

.resource-module-quiz-result {
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 24px 36px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    margin-top: 36px;
}

.resource-module-quiz-result-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 12px;
}

    .resource-module-quiz-result-value i {
        font-size: 40px;
        display: inline-block;
        margin-bottom: 12px;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-quiz {
        max-width: 100%;
        width: auto;
        margin: 48px 96px;
    }
}

@media (max-width: 1080px) {

    .resource-module-quiz {
        max-width: 100%;
        width: auto;
        margin: 48px 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-quiz {
        margin: 48px;
    }

    .resource-module-quiz-content {
        padding: 36px;
    }

    .resource-module-quiz-options {
        padding-left: 12px;
    }
}

@media (max-width: 768px) {

    .resource-module-quiz {
        margin: 48px 24px;
    }

    .resource-module-quiz-content {
        padding: 24px;
    }

    .resource-module-quiz-result-value {
        font-size: 22px;
        line-height: 28px;
    }
}

/* Module Video */

.resource-module-video {
    max-width: 888px;
    width: 100%;
    margin: 24px auto;
}

    .resource-module-video.large {
        max-width: 1280px;
        margin: 0 auto;
    }

.resource-module-video-content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

.resource-module-video figcaption {
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    margin-top: 10px;
}

.resource-module-video.large figcaption {
    padding: 0 24px;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-video.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-main-container.has-sidebar .resource-module-video.standard .resource-module-video-content {
            padding: 24px 96px;
        }
}

@media (max-width: 1080px) {

    .resource-module-video.standard {
        max-width: 100%;
        margin: 0 auto;
    }

        .resource-module-video.standard .resource-module-video-content {
            padding: 24px 96px;
        }
}

@media (max-width: 991px) {

    .resource-module-video.standard .resource-module-video-content {
        padding: 24px 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-video.standard .resource-module-video-content {
        padding: 24px;
    }
}

/* Module Audio */

.resource-module-audio {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
}

    .resource-module-audio:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-module-audio-content {
    max-width: 888px;
    margin: 0 auto;
    padding: 48px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.resource-module-audio h1 {
    font-weight: 400;
    font-size: 38px;
    line-height: 54px;
    margin-top: 48px;
    padding-bottom: 0;
    padding-bottom: 48px;
}

    .resource-module-audio h1:before {
        display: none;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-audio-content {
        padding: 48px 96px;
    }
}

@media (max-width: 1080px) {

    .resource-module-audio-content {
        padding: 48px 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-audio-content {
        padding: 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-audio-content {
        padding: 48px 24px;
    }

    .resource-module-audio h1 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 0;
    }
}

/* Module Flipcards */

.resource-module-flipcards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    padding: 48px 16px;
}

.flipcard-container {
    width: 308px;
    max-width: 100%;
    height: 504px;
    position: relative;
    perspective: 500px;
    perspective-origin: center center;
}

.flipcard {
    width: 100%;
    height: 100%;
    transition: transform 400ms;
    transform: rotateY(0);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    font-weight: 400;
    font-size: 20px;
    line-height: 32px;
    text-align: center;
}

    .flipcard[onclick],
    .flipcard [onclick] {
        cursor: pointer;
    }

.flipcard-button {
    position: absolute;
    z-index: 1;
    bottom: 48px;
    left: 50%;
    transform: translate(-50%, 0);
}

.flipcard.flipped {
    transform: rotateY(180deg);
}

.flipcard .flipcard-img-container {
    max-width: 130px;
    margin: 0 auto 30px;
}

    .flipcard .flipcard-img-container img {
        border-radius: 8px;
    }

.flipcard .front,
.flipcard .back {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    padding: 48px 40px 96px;
    box-sizing: border-box;
    transition-property: opacity;
    transition-delay: 100ms;
}

.flipcard-face-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.flipcard .front {
    opacity: 1;
}

.flipcard .back {
    transform: rotateY(180deg);
    opacity: 0;
}

.flipcard.flipped .front {
    opacity: 0;
}

.flipcard.flipped .back {
    opacity: 1;
}

.flipcard .background {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

    .flipcard .background .flipcard-face-content {
        z-index: 1;
    }

    .flipcard .background:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

/* Module Carousel */

.resource-module-carousel {
    padding: 24px 0;
}

.resource-carousel-container {
    max-width: 888px;
    width: 100%;
    position: relative;
}

.resource-carousel-slides-container {
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
}

.resource-carousel-slides {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    transition: margin-left 1s;
}

.resource-carousel-container.prepare-loop .resource-carousel-slides,
.resource-carousel-container.ended-animation .resource-carousel-slides {
    transition: none;
}

.resource-carousel-slide {
    width: 100%;
    position: relative;
    z-index: 3;
    transition: margin-left 1s;
    padding: 96px 48px 144px;
    box-sizing: border-box;
    text-align: center;
}

    .resource-carousel-slide.background:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

    .resource-carousel-slide.background {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
    }

.resource-carousel-slide-content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.resource-carousel-slide:hover,
.resource-carousel-slide a,
.resource-carousel-slide a:hover {
    text-decoration: none;
}

.resource-carousel-slide p {
    font-size: 20px;
    line-height: 32px;
}

.resource-carousel-slide .col-container {
    text-align: left;
}

.resource-carousel-slide .carousel-img-container img {
    display: block;
    border-radius: 8px;
}

.resource-carousel-container .resource-carousel-slide:first-child,
.resource-carousel-container .resource-carousel-slide:last-child {
    z-index: 2;
}

.resource-carousel-container[data-total-slides="2"][data-current-slide="1"] .resource-carousel-slide:last-child,
.resource-carousel-container[data-current-slide="2"] .resource-carousel-slide:last-child:not(:nth-child(2)) {
    z-index: 1;
}

.resource-carousel-container.prepare-loop .resource-carousel-slide,
.resource-carousel-container.ended-animation .resource-carousel-slide {
    transition: none;
}

.resource-carousel-container[data-total-slides="1"] .resource-carousel-slides {
    width: 100%;
}

.resource-carousel-container[data-total-slides="2"] .resource-carousel-slides {
    width: 200%;
}

.resource-carousel-container[data-total-slides="3"] .resource-carousel-slides {
    width: 300%;
}

.resource-carousel-container[data-total-slides="4"] .resource-carousel-slides {
    width: 400%;
}

.resource-carousel-container[data-total-slides="5"] .resource-carousel-slides {
    width: 500%;
}

.resource-carousel-container[data-total-slides="6"] .resource-carousel-slides {
    width: 600%;
}

.resource-carousel-container[data-total-slides="7"] .resource-carousel-slides {
    width: 700%;
}

.resource-carousel-container[data-total-slides="8"] .resource-carousel-slides {
    width: 800%;
}

.resource-carousel-container[data-total-slides="9"] .resource-carousel-slides {
    width: 900%;
}

.resource-carousel-container[data-total-slides="10"] .resource-carousel-slides {
    width: 1000%;
}

.resource-carousel-container[data-current-slide="1"] .resource-carousel-slides {
    margin-left: 0;
}

.resource-carousel-container[data-current-slide="2"] .resource-carousel-slides {
    margin-left: -100%;
}

.resource-carousel-container[data-current-slide="3"] .resource-carousel-slides {
    margin-left: -200%;
}

.resource-carousel-container[data-current-slide="4"] .resource-carousel-slides {
    margin-left: -300%;
}

.resource-carousel-container[data-current-slide="5"] .resource-carousel-slides {
    margin-left: -400%;
}

.resource-carousel-container[data-current-slide="6"] .resource-carousel-slides {
    margin-left: -500%;
}

.resource-carousel-container[data-current-slide="7"] .resource-carousel-slides {
    margin-left: -600%;
}

.resource-carousel-container[data-current-slide="8"] .resource-carousel-slides {
    margin-left: -700%;
}

.resource-carousel-container[data-current-slide="9"] .resource-carousel-slides {
    margin-left: -800%;
}

.resource-carousel-container[data-current-slide="10"] .resource-carousel-slides {
    margin-left: -900%;
}

.resource-carousel-container[data-total-slides="2"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -200%;
}

.resource-carousel-container[data-total-slides="3"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -300%;
}

.resource-carousel-container[data-total-slides="4"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -400%;
}

.resource-carousel-container[data-total-slides="5"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -500%;
}

.resource-carousel-container[data-total-slides="6"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -600%;
}

.resource-carousel-container[data-total-slides="7"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -700%;
}

.resource-carousel-container[data-total-slides="8"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -800%;
}

.resource-carousel-container[data-total-slides="9"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -900%;
}

.resource-carousel-container[data-total-slides="10"].prepare-loop.counterclockwise .resource-carousel-slides {
    margin-left: -1000%;
}

.resource-carousel-container[data-total-slides="2"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 200%;
}

.resource-carousel-container[data-total-slides="3"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 300%;
}

.resource-carousel-container[data-total-slides="4"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 400%;
}

.resource-carousel-container[data-total-slides="5"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 500%;
}

.resource-carousel-container[data-total-slides="6"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 600%;
}

.resource-carousel-container[data-total-slides="7"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 700%;
}

.resource-carousel-container[data-total-slides="8"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 800%;
}

.resource-carousel-container[data-total-slides="9"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 900%;
}

.resource-carousel-container[data-total-slides="10"].counterclockwise .resource-carousel-slide:first-child {
    margin-left: 1000%;
}

.resource-carousel-container.prepare-loop.clockwise .resource-carousel-slides {
    margin-left: 100%;
}

.resource-carousel-container[data-total-slides="2"].clockwise .resource-carousel-slide:last-child {
    margin-left: -200%;
}

.resource-carousel-container[data-total-slides="3"].clockwise .resource-carousel-slide:last-child {
    margin-left: -300%;
}

.resource-carousel-container[data-total-slides="4"].clockwise .resource-carousel-slide:last-child {
    margin-left: -400%;
}

.resource-carousel-container[data-total-slides="5"].clockwise .resource-carousel-slide:last-child {
    margin-left: -500%;
}

.resource-carousel-container[data-total-slides="6"].clockwise .resource-carousel-slide:last-child {
    margin-left: -600%;
}

.resource-carousel-container[data-total-slides="7"].clockwise .resource-carousel-slide:last-child {
    margin-left: -700%;
}

.resource-carousel-container[data-total-slides="8"].clockwise .resource-carousel-slide:last-child {
    margin-left: -800%;
}

.resource-carousel-container[data-total-slides="9"].clockwise .resource-carousel-slide:last-child {
    margin-left: -900%;
}

.resource-carousel-container[data-total-slides="10"].clockwise .resource-carousel-slide:last-child {
    margin-left: -1000%;
}

.resource-carousel-container[data-total-slides="1"] .resource-carousel-buttons {
    display: none;
}

.resource-carousel-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    text-decoration: none;
}

    .resource-carousel-button.previous {
        left: -56px;
    }

    .resource-carousel-button.next {
        right: -56px;
    }

    .resource-carousel-button:hover {
        text-decoration: none;
    }

    .resource-carousel-button i {
        font-size: 12px;
        padding: 0;
    }

.resource-carousel-container.locked .resource-carousel-button {
    pointer-events: none;
}

.resource-carousel-container[data-total-slides="1"] .resource-carousel-shortcuts {
    display: none;
}

.resource-carousel-shortcuts {
    display: flex;
    gap: 6px;
    justify-content: center;
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 4;
}

.resource-carousel-shortcut {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.resource-carousel-container.locked .resource-carousel-shortcut {
    pointer-events: none;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-carousel {
        padding: 24px 96px;
    }

    .resource-main-container.has-sidebar .resource-carousel-slide-content {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 1080px) {

    .resource-module-carousel {
        padding: 24px 96px;
    }

    .resource-carousel-slide-content {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media (max-width: 991px) {

    .resource-carousel-slide {
        display: flex;
        align-items: center;
        padding: 24px 24px 72px;
    }

        .resource-carousel-slide .col-container {
            flex-wrap: wrap;
            gap: 24px;
            text-align: center;
        }

            .resource-carousel-slide .col-container > [class*="col-"] {
                width: 100%;
                padding: 0 !important;
            }

        .resource-carousel-slide .carousel-img-container {
            max-width: 288px;
            margin: auto;
        }

        .resource-carousel-slide h3 {
            font-size: 20px;
            line-height: 26px;
        }

    .resource-carousel-shortcuts {
        bottom: 24px;
    }
}

@media (max-width: 768px) {

    .resource-module-carousel {
        padding: 24px;
    }

    .resource-carousel-buttons {
        display: none;
    }
}

/* Module Accordion */

.resource-module-accordion {
    max-width: 888px;
    width: 100%;
    border-width: 1px;
    border-style: solid;
    box-sizing: border-box;
    margin: 24px auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
}

    .resource-module-accordion.open:before {
        content: '';
        display: block;
        width: 4px;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
    }

    .resource-module-accordion + .resource-module-accordion {
        margin-top: 0;
    }

.resource-module-accordion-group {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    width: 100%;
}

    .resource-module-accordion-group .resource-module-accordion:not(:last-child) {
        margin-bottom: 0;
    }

.resource-module-accordion-header {
    cursor: pointer;
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.resource-module-accordion.open .resource-module-accordion-header {
    padding-bottom: 30px;
}

.resource-module-accordion-icon {
    font-size: 20px;
}

.resource-module-accordion-content {
    padding: 0 30px 30px;
}

.resource-module-accordion.open .resource-module-accordion-icon.plus,
.resource-module-accordion .resource-module-accordion-icon.minus,
.resource-module-accordion-content {
    display: none;
}

.resource-module-accordion .resource-module-accordion-icon.plus,
.resource-module-accordion.open .resource-module-accordion-icon.minus,
.resource-module-accordion.open .resource-module-accordion-content {
    display: block;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-accordion {
        width: calc(100% - 192px);
        margin: 24px 96px;
    }
}

@media (max-width: 1080px) {

    .resource-module-accordion {
        width: calc(100% - 192px);
        margin: 24px 96px;
    }
}

@media (max-width: 991px) {

    .resource-module-accordion {
        width: calc(100% - 96px);
        margin: 24px 48px;
    }
}

@media (max-width: 768px) {

    .resource-module-accordion {
        width: calc(100% - 48px);
        margin: 24px;
    }
}

/* Module Quote */

.resource-module-quote {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

    .resource-module-quote.background:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 0;
    }

.resource-module-quote-content {
    max-width: calc(888px - 96px);
    width: 100%;
    margin: 72px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 1;
}

.resource-module-quote-picture {
    display: inline-block;
    width: 96px;
    max-width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 16px;
}

.resource-module-quote blockquote {
    text-align: center;
    padding: 0 48px;
    border: none;
    margin: 0;
    position: relative;
}

    .resource-module-quote blockquote,
    .resource-module-quote blockquote p {
        font-weight: 300;
        font-size: 30px;
        line-height: 44px;
    }

.resource-module-quote-icon {
    display: block;
    width: 48px;
    height: 48px;
    position: absolute;
    font-size: 24px;
    line-height: 48px;
    text-align: center;
    transform: scale(1, -1);
}

    .resource-module-quote-icon.start {
        top: -12px;
        left: 0;
    }

    .resource-module-quote-icon.end {
        bottom: -12px;
        right: 0;
    }

.resource-module-quote figcaption {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    margin-top: 16px;
}

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-quote-content {
        margin: 72px auto;
        max-width: inherit;
        width: calc(100% - 192px);
    }
}

@media (max-width: 1080px) {

    .resource-module-quote-content {
        margin: 72px auto;
        max-width: inherit;
        width: calc(100% - 192px);
    }
}

@media (max-width: 768px) {

    .resource-module-quote-content {
        width: calc(100% - 144px);
    }

    .resource-module-quote blockquote,
    .resource-module-quote blockquote p {
        font-size: 24px;
        line-height: 34px;
    }
}

/* Module Feedback */

.resource-module-feedback {
    max-width: 888px;
    width: 100%;
    margin: 48px auto;
    display: flex;
    gap: 12px;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    padding: 12px 20px;
    box-sizing: border-box;
}

.resource-module-feedback-icon i {
    position: relative;
    top: -2px;
}

.resource-module-feedback-content,
.resource-module-feedback-content p {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

    .resource-module-feedback-content h5 {
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
    }

@media (max-width: 1280px) and (min-width: 1081px) {

    .resource-main-container.has-sidebar .resource-module-feedback {
        max-width: inherit;
        width: calc(100% - 144px);
    }
}

@media (max-width: 1080px) {

    .resource-module-feedback {
        max-width: inherit;
        width: calc(100% - 144px);
    }
}

@media (max-width: 991px) {

    .resource-module-feedback {
        width: calc(100% - 96px);
    }
}

@media (max-width: 768px) {

    .resource-module-feedback {
        width: calc(100% - 48px);
    }
}

/* Contest Details */

.contest-details-main-container {
    display: grid;
    max-width: 1280px;
    width: 100%;
    row-gap: 24px;
    column-gap: 32px;
    margin: 0 auto;
    padding: 24px 32px;
    box-sizing: border-box;
    grid-template-rows: auto 1fr;
}

.contest-details-banner {
    display: flex;
    align-items: flex-start;
    padding: 16px;
    box-sizing: border-box;
    gap: 20px;
    border-radius: 12px;
    font-size: 16px;
    line-height: 24px;
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.contest-details-desc-container {
    padding-top: 8px;
}

.contest-details-banner h1 {
    font-family: Roboto, Myriad, Arial, Verdana, Sans-Serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 36px;
    padding-bottom: 12px;
}

    .contest-details-banner h1:before {
        content: none;
    }

.contest-details-desc-container p {
    line-height: 24px;
}

.contest-details-img-container {
    width: 300px;
    max-width: calc(100% - 40px);
    min-width: 300px;
    height: 240px;
    border-radius: 12px;
    overflow: hidden;
}

    .contest-details-img-container img {
        display: block;
        max-width: 100%;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.contest-details-steps-container {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: auto;
    height: 100%;
}

.contest-details-steps {
    display: flex;
    flex-direction: column;
}

    .contest-details-steps:not(:empty) {
        border-bottom-width: 1px;
        border-bottom-style: solid;
    }

.contest-details-step {
    border-top-width: 1px;
    border-top-style: solid;
}

.contest-details-step-header {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 24px 36px 24px 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: padding 200ms;
}

.contest-details-step.open .contest-details-step-header {
    padding: 12px 36px 12px 0;
}

.contest-details-step-header h3 {
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 0;
    margin-bottom: 0;
}

    .contest-details-step-header h3:before {
        content: none;
    }

.contest-details-step-status {
    display: none;
    width: 42px;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
}

.contest-details-step.done .contest-details-step-status {
    display: flex;
}

.contest-details-step-open,
.contest-details-step-closed {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.contest-details-step .contest-details-step-open,
.contest-details-step.open .contest-details-step-closed {
    display: none;
}

.contest-details-step .contest-details-step-closed,
.contest-details-step.open .contest-details-step-open {
    display: block;
}

.contest-details-goals-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 200ms;
}

.contest-details-step.open .contest-details-goals-container {
    grid-template-rows: 1fr;
}

.contest-details-goals {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
}

.contest-details-step.open .contest-details-goals {
    padding-bottom: 16px;
}

.contest-details-goal {
    display: flex;
    align-items: flex-start;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 12px;
    gap: 24px;
}

.contest-details-goal-badge {
    min-width: 42px;
    width: 42px;
}

.contest-details-goal-progress-container {
    display: flex;
    flex-direction: column;
    min-width: 212px;
    width: 212px;
    gap: 16px;
}

    .contest-details-goal-progress-container h4 {
        font-size: 16px;
        line-height: 24px;
        font-weight: bold;
    }

.contest-details-goal-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
}

.contest-details-goal-progress-bar {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 12px;
    overflow: hidden;
}

    .contest-details-goal-progress-bar .value {
        display: block;
        height: 6px;
        border-radius: 12px;
    }

.contest-details-goal-description,
.contest-details-goal-description p {
    font-size: 14px;
    line-height: 20px;
}

.contest-details-goal-status-container {
    display: flex;
    min-width: 108px;
    flex-direction: column;
    white-space: nowrap;
    align-items: flex-end;
    gap: 10px;
}

.contest-details-goal-status {
    display: flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
}

.contest-details-goal-action .cta-action .fa {
    width: 42px;
    min-width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 14px;
}

.contest-details-goal.doneAll {
    border: 2px solid #21AD7B;
}

.contest-details-goal:not(.done) .contest-details-goal-status,
.contest-details-goal.done .contest-details-goal-action {
    display: none;
}

.contest-details-goal-points {
    font-size: 12px;
    line-height: 16px;
}

.contest-details-ranking-container {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    width: 400px;
    min-width: 400px;
}

.contest-details-ranking-content {
    border-radius: 12px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 0;
}

.contest-details-team-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 12px;
    padding: 32px 24px;
    box-sizing: border-box;
}

.contest-details-team-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    font-size: 24px;
}

.contest-details-team-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.contest-details-ranking-container h3 {
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
    padding-bottom: 0;
    margin-bottom: 0;
}

    .contest-details-ranking-container h3:before {
        content: none;
    }

.contest-details-team-members {
    display: flex;
}

    .contest-details-team-members li {
        display: flex;
        width: 24px;
        min-width: 24px;
        max-width: 24px;
        height: 24px;
        align-items: center;
        justify-content: center;
        border-width: 1px;
        border-style: solid;
        font-size: 12px;
        line-height: 16px;
        border-radius: 50%;
        overflow: hidden;
    }

        .contest-details-team-members li ~ li {
            margin-left: -4px;
        }

        .contest-details-team-members li,
        .contest-details-team-members li a {
            text-decoration: none;
        }

.contest-details-team-points {
    font-size: 14px;
    line-height: 20px;
}

    .contest-details-team-points b {
        font-size: 18px;
        line-height: 26px;
    }

.contest-details-ranking-container h4 {
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}

.contest-details-ranking-list {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    box-sizing: border-box;
    min-height: 430px;
}

    .contest-details-ranking-list li {
        border-top-width: 1px;
        border-top-style: solid;
        display: flex;
        align-items: center;
        gap: 16px;
        height: 42px;
        min-height: 42px;
        margin-left: -16px;
        width: calc(100% + 32px);
        padding: 0 16px 0 32px;
        box-sizing: border-box;
        position: relative;
    }

.contest-details-ranking-position {
    width: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .contest-details-ranking-position .value {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        min-width: 26px;
        height: 26px;
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        font-size: 12px;
        line-height: 16px;
        background-size: contain;
        background-position: top center;
        background-repeat: no-repeat;
        border-radius: 50%;
    }

.contest-details-ranking-top .contest-details-ranking-position .value {
    width: 30px;
    min-width: 30px;
    height: 42px;
    border: none;
    font-size: 0;
    border-radius: 0;
}

.contest-details-ranking-team-position {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 5px;
}

.contest-details-ranking-top .contest-details-ranking-team-position {
    bottom: 6px;
}

.contest-details-ranking-name {
    display: flex;
    width: 100%;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.contest-details-ranking-points {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 80px;
    min-width: 80px;
    white-space: nowrap;
}

    .contest-details-ranking-points .value {
        display: flex;
        align-items: center;
        border-radius: 5px;
        padding: 3px 8px;
        font-size: 12px;
        line-height: 16px;
    }

.contest-details-ranking-ellipsis {
    justify-content: center;
    text-align: center;
}

/* Popup */

.contest-details-ranking-popup {
    display: flex;
    flex-direction: column;
    height: calc(100% - 10px);
    width: calc(100% - 40px);
    position: absolute;
    top: 0;
}

    .contest-details-ranking-popup h4 {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

.contest-details-ranking-popup-header {
    padding: 0 16px;
    box-sizing: border-box;
}

.contest-details-popoup-legend {
    font-size: 12px;
    line-height: 16px;
}

.custom-transition-page .custom-scrollbar {
    overflow-x: auto;
    padding-bottom: 20px;
}

.custom-transition-page .custom-scrollbar-y {
    overflow-y: auto;
}

    .custom-transition-page .custom-scrollbar::-webkit-scrollbar-track,
    .custom-transition-page .custom-scrollbar-y::-webkit-scrollbar-track,
    .custom-transition-page .custom-scrollbar ::-webkit-scrollbar-track,
    .custom-transition-page .custom-scrollbar-y ::-webkit-scrollbar-track {
        border-radius: 6px;
    }

    .custom-transition-page .custom-scrollbar::-webkit-scrollbar,
    .custom-transition-page .custom-scrollbar-y::-webkit-scrollbar,
    .custom-transition-page .custom-scrollbar ::-webkit-scrollbar,
    .custom-transition-page .custom-scrollbar-y ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .custom-transition-page .custom-scrollbar::-webkit-scrollbar-thumb,
    .custom-transition-page .custom-scrollbar-y::-webkit-scrollbar-thumb,
    .custom-transition-page .custom-scrollbar ::-webkit-scrollbar-thumb,
    .custom-transition-page .custom-scrollbar-y ::-webkit-scrollbar-thumb {
        border-radius: 6px;
    }

.contest-details-ranking-popup .contest-details-ranking-list {
    display: flex;
    flex-direction: column;
    padding-left: 15px;
    padding-bottom: 0;
    padding-top: 0;
    margin-top: 10px;
}

    .contest-details-ranking-popup .contest-details-ranking-list li {
        width: calc(100% + 15px);
    }

/* Responsive */

@media (max-width: 1280px) {

    .contest-details-main-container {
        grid-template-rows: auto;
    }

    .contest-details-steps-container {
        grid-row-start: 3;
        grid-row-end: auto;
    }

    .contest-details-ranking-container {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
        width: 100%;
        min-width: initial;
    }

    .contest-details-ranking-content {
        position: relative;
    }
}

@media (max-width: 768px) {

    .contest-details-banner {
        flex-direction: column;
        align-items: center;
    }

    .contest-details-desc-container {
        width: 100%;
    }

    .contest-details-team-summary {
        flex-direction: row;
        gap: 16px;
        padding: 24px 16px;
    }

    .contest-details-team-icon {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }

    .contest-details-team-info {
        align-items: flex-start;
        gap: 4px;
    }

    .contest-details-goal {
        padding: 16px;
        gap: 16px;
        display: grid;
        grid-template-rows: auto 1fr;
    }

    .contest-details-goal-badge {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
        width: auto;
        text-align: right;
    }

    .contest-details-goal-progress-container {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    .contest-details-goal-description {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 2;
        grid-row-end: 3;
    }

    .contest-details-goal-status-container {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 2;
        grid-row-end: 3;
        padding-right: 4px;
        box-sizing: border-box;
    }

    .contest-details-goal-action .cta-action {
        height: 42px;
        line-height: 42px;
    }
}

/* Contest List */

.contest-list-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .contest-list-header h2 {
        position: absolute;
        left: 0;
        font-weight: bold;
        font-size: 30px;
        line-height: 36px;
    }

.contest-list-categories {
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 24px;
}

    .contest-list-categories a {
        text-decoration: none;
        padding-bottom: 20px;
        position: relative;
    }

    .contest-list-categories li.selected a:before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        border-radius: 3px 3px 0px 0px;
    }

    .contest-list-categories li + li {
        margin-left: 18px;
        padding-left: 18px;
        border-left-width: 1px;
        border-left-style: solid;
    }

ul.contest-list {
    display: flex;
    border-top-style: solid;
    border-top-width: 1px;
    margin-top: 16px;
    padding-top: 24px;
    flex-wrap: wrap;
    gap: 24px;
}

.contest-preview-container {
    flex: 1 0 320px;
    max-width: 376px;
}

.contest-preview {
    display: flex;
    flex-direction: column;
    padding: 12px;
    box-sizing: border-box;
    border-radius: 12px;
}

    .contest-preview,
    .contest-preview:hover {
        text-decoration: none;
    }

        .contest-preview img {
            width: auto;
            border-radius: 12px;
        }

.contest-preview-label {
    display: none;
    padding: 3px 8px;
    font-size: 12px;
    line-height: 16px;
    border-radius: 5px;
}

.contest-preview h3 {
    font-weight: bold;
    font-size: 20px;
    line-height: 26px;
    padding-top: 16px;
    margin-bottom: 12px;
    padding-bottom: 0;
}

    .contest-preview h3:before {
        display: none;
    }

.contest-preview-metadata {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    font-size: 14px;
    line-height: 20px;
}

    .contest-preview-metadata .value {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.contest-preview p {
    display: none;
    font-size: 14px;
    line-height: 20px;
}

@media (max-width: 1280px) {

    .contest-list-header {
        justify-content: space-between;
    }

        .contest-list-header h2 {
            position: static;
        }
}

@media (max-width: 768px) {


    .contest-list-header {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* Contest Widgets */

.contest-list-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .contest-list-widget-header h3 {
        font-weight: 700;
        font-size: 20px;
        line-height: 26px;
        padding-bottom: 0;
        margin-bottom: 0;
    }

        .contest-list-widget-header h3:before {
            display: none;
        }

    .contest-list-widget-header a {
        white-space: nowrap;
    }

.contest-slider ul.contest-list,
.contest-carousel ul.contest-list,
section.contest-list ul.contest-list {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* Contest Slider = 3 cols */

.contest-slider {
    width: 100%;
}

    .contest-slider .contest-list-widget-header {
        margin-bottom: 12px;
    }

    .contest-slider .contest-list-widget-content {
        position: relative;
    }

    .contest-slider .contest-list-container {
        overflow: hidden;
    }

    .contest-slider ul.contest-list {
        flex-wrap: nowrap;
        gap: 0;
        position: relative;
        left: 0;
    }

        .contest-slider ul.contest-list li {
            margin: 5px;
        }

    .contest-slider .contest-list-widget-content[data-total-slides="1"] .contest-list-slider-buttons {
        display: none;
    }

    .contest-slider .contest-slider-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        line-height: 32px;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        text-decoration: none;
    }

        .contest-slider .contest-slider-button.previous {
            left: -56px;
        }

        .contest-slider .contest-slider-button.next {
            right: -56px;
        }

        .contest-slider .contest-slider-button:hover {
            text-decoration: none;
        }

        .contest-slider .contest-slider-button i {
            font-size: 12px;
            padding: 0;
        }

.contest-list-widget-content.locked .contest-slider-button {
    pointer-events: none;
}

@media (max-width: 1380px) {

    .contest-slider .contest-list-widget-content {
        margin-left: -20px;
        width: calc(100% + 40px);
    }

    .contest-slider .contest-slider-button.previous {
        left: 32px;
    }

    .contest-slider .contest-slider-button.next {
        right: 32px;
    }
}

/* Contest Carousel = 2 cols */

.contest-carousel .contest-list-widget-content {
    max-width: 100%;
    width: 100%;
    position: relative;
    padding-bottom: 48px;
}

.contest-carousel .contest-list-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.contest-carousel ul.contest-list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    transition: margin-left 1s;
    gap: 0;
}

.contest-carousel .contest-list-widget-content.prepare-loop ul.contest-list,
.contest-carousel .contest-list-widget-content.ended-animation ul.contest-list {
    transition: none;
}

.contest-carousel .contest-preview-container {
    width: 100%;
    max-width: inherit;
    position: relative;
    z-index: 3;
    transition: margin-left 1s;
}

.contest-carousel .contest-preview {
    flex-direction: row;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    gap: 24px;
    box-shadow: none;
}

.contest-carousel .contest-preview-container:hover,
.contest-carousel .contest-preview-container a,
.contest-carousel .contest-preview-container a:hover {
    text-decoration: none;
}

.contest-carousel .contest-preview-container .contest-preview-details {
    text-align: left;
    padding-top: 16px;
}

.contest-carousel .contest-preview-container .contest-preview-label {
    display: inline-flex;
}

.contest-carousel .contest-preview-container p:not(:empty) {
    display: block;
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
}

.contest-carousel .contest-list-widget-content .contest-preview-container:first-child,
.contest-carousel .contest-list-widget-content .contest-preview-container:last-child {
    z-index: 2;
}

.contest-carousel .contest-list-widget-content[data-total-slides="2"][data-current-slide="1"] .contest-preview-container:last-child,
.contest-carousel .contest-list-widget-content[data-current-slide="2"] .contest-preview-container:last-child:not(:nth-child(2)) {
    z-index: 1;
}

.contest-carousel .contest-list-widget-content.prepare-loop .contest-preview-container,
.contest-carousel .contest-list-widget-content.ended-animation .contest-preview-container {
    transition: none;
}

.contest-carousel .contest-list-widget-content[data-total-slides="1"] ul.contest-list {
    width: 100%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="2"] ul.contest-list {
    width: 200%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="3"] ul.contest-list {
    width: 300%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="4"] ul.contest-list {
    width: 400%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="5"] ul.contest-list {
    width: 500%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="6"] ul.contest-list {
    width: 600%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="7"] ul.contest-list {
    width: 700%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="8"] ul.contest-list {
    width: 800%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="9"] ul.contest-list {
    width: 900%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="10"] ul.contest-list {
    width: 1000%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="1"] ul.contest-list {
    margin-left: 0;
}

.contest-carousel .contest-list-widget-content[data-current-slide="2"] ul.contest-list {
    margin-left: -100%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="3"] ul.contest-list {
    margin-left: -200%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="4"] ul.contest-list {
    margin-left: -300%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="5"] ul.contest-list {
    margin-left: -400%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="6"] ul.contest-list {
    margin-left: -500%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="7"] ul.contest-list {
    margin-left: -600%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="8"] ul.contest-list {
    margin-left: -700%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="9"] ul.contest-list {
    margin-left: -800%;
}

.contest-carousel .contest-list-widget-content[data-current-slide="10"] ul.contest-list {
    margin-left: -900%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="2"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -200%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="3"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -300%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="4"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -400%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="5"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -500%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="6"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -600%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="7"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -700%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="8"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -800%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="9"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -900%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="10"].prepare-loop.counterclockwise ul.contest-list {
    margin-left: -1000%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="2"].counterclockwise .contest-preview-container:first-child {
    margin-left: 200%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="3"].counterclockwise .contest-preview-container:first-child {
    margin-left: 300%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="4"].counterclockwise .contest-preview-container:first-child {
    margin-left: 400%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="5"].counterclockwise .contest-preview-container:first-child {
    margin-left: 500%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="6"].counterclockwise .contest-preview-container:first-child {
    margin-left: 600%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="7"].counterclockwise .contest-preview-container:first-child {
    margin-left: 700%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="8"].counterclockwise .contest-preview-container:first-child {
    margin-left: 800%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="9"].counterclockwise .contest-preview-container:first-child {
    margin-left: 900%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="10"].counterclockwise .contest-preview-container:first-child {
    margin-left: 1000%;
}

.contest-carousel .contest-list-widget-content.prepare-loop.clockwise ul.contest-list {
    margin-left: 100%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="2"].clockwise .contest-preview-container:last-child {
    margin-left: -200%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="3"].clockwise .contest-preview-container:last-child {
    margin-left: -300%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="4"].clockwise .contest-preview-container:last-child {
    margin-left: -400%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="5"].clockwise .contest-preview-container:last-child {
    margin-left: -500%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="6"].clockwise .contest-preview-container:last-child {
    margin-left: -600%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="7"].clockwise .contest-preview-container:last-child {
    margin-left: -700%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="8"].clockwise .contest-preview-container:last-child {
    margin-left: -800%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="9"].clockwise .contest-preview-container:last-child {
    margin-left: -900%;
}

.contest-carousel .contest-list-widget-content[data-total-slides="10"].clockwise .contest-preview-container:last-child {
    margin-left: -1000%;
}

.contest-carousel .contest-list-slider-buttons {
    display: none;
}

.contest-carousel .contest-list-widget-content[data-total-slides="1"] .contest-list-carousel-shortcuts {
    display: none;
}

.contest-carousel .contest-list-carousel-shortcuts {
    display: flex;
    gap: 6px;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 4;
}

.contest-carousel .contest-carousel-shortcut {
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.contest-carousel .contest-list-widget-content.locked .contest-carousel-shortcut {
    pointer-events: none;
}

@media (max-width: 1080px) {

    .contest-carousel .contest-preview-container .contest-preview-details {
        padding-top: 0;
    }

    .contest-carousel .contest-preview {
        flex-direction: column;
    }
}

/* Contest List = 1 col */

section.contest-list ul.contest-list {
    gap: 12px;
}

section.contest-list .contest-preview-container {
    display: flex;
    flex-direction: column;
    flex: none;
    max-width: 100%;
    width: 100%;
}

section.contest-list .contest-preview {
    flex-direction: row;
    gap: 16px;
}

    section.contest-list .contest-preview img {
        border-radius: 4px;
        max-width: 96px;
    }

    section.contest-list .contest-preview h3 {
        font-size: 16px;
        line-height: 24px;
        padding-top: 0;
        margin-bottom: 4px;
    }

section.contest-list .contest-preview-metadata {
    gap: 4px;
}

section.contest-list .contest-list-slider-buttons,
section.contest-list .contest-list-carousel-shortcuts {
    display: none;
}

.relavive {
    position: relative
}

.eye-login {
    position: absolute;
    right: -20px;
    top: 50px;
}

.fs-15 {
    font-size: 15px
}

#sticky-container > div.WinButtonAdmin > div {
    margin: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
}


/* Home Community Messages Widget */

.widgetFreeText:has(.home-widget-community-messages-container) {
    width: 100%;
}

.home-widget-community-messages-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.home-community-message-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 16px;
    width: 100%;
    max-width: calc(33% - 8px);
}

.home-widget-community-messages-container .home-community-message-header {
    width: 100%;
    padding: 8px 16px;
    box-sizing: border-box;
    display: flex;
    gap: 5px;
    font-size: 12px;
}

.home-widget-community-messages-container .comment-author .author-status {
    margin-right: 10px;
}

.home-widget-community-messages-container .home-community-message {
    width: 100%;
    margin-top: 0;
    padding: 16px 16px 16px 74px;
    box-sizing: border-box;
}

.home-widget-community-messages-container .comment-interactions-container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.home-community-no-messages-container {
    display: flex;
    gap: 24px;
}

.home-widget-community-messages-container .home-community-no-messages,
.home-widget-community-messages-container .home-community-message-add-container {
    width: 50%;
}

.home-widget-community-messages-container .home-community-message-add-container {
    box-sizing: border-box;
    border-radius: 16px;
}

.home-widget-community-messages-container .home-community-message-form {
    display: flex;
    gap: 10px;
    padding: 16px;
    box-sizing: border-box;
    align-items: center;
    border-top-width: 2px;
    border-top-style: solid;
}

    .home-widget-community-messages-container .home-community-message-form textarea {
        margin-bottom: 0;
    }

.home-widget-community-messages-container .home-community-message-add-button {
    white-space: nowrap;
}

@media (max-width: 1080px) {

    .home-widget-community-messages-list,
    .home-community-no-messages-container {
        flex-wrap: wrap;
    }

    .home-community-message-container {
        max-width: calc(50% - 8px);
    }

    .home-widget-community-messages-container .home-community-no-messages,
    .home-widget-community-messages-container .home-community-message-add-container {
        width: 100%;
    }
}

@media (max-width: 768px) {

    .home-community-message-container {
        max-width: 100%;
    }
}

/* Home Graph Widget */

.home-widget-graph-job {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 24px;
    gap: 30px;
    border-radius: 12px;
}

.home-widget-graph-job-content {
    width: 56%;
}

.home-widget-graph-job-container .graphic-job-line.value:before {
    display: none;
}

.home-widget-graph-job-container .home-widget-graph-side-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.home-widget-graph-job-container h4 span {
    display: block;
    font-size: 24px;
    font-weight: bold;
}

@media (max-width: 1080px) {

    .home-widget-graph-job {
        flex-direction: column;
        align-items: center;
    }

    .home-widget-graph-job-content,
    .home-widget-graph-job-side-column {
        width: 100%;
    }

    .home-widget-graph-job-container .home-widget-graph-side-column {
        margin-right: auto;
    }

    .home-widget-graph-job-container .graph-job .graphic-job-description {
        max-width: inherit;
    }
}

/* Home Badges Widget */

.home-widget-awards .award-list {
    grid-gap: 10px;
}

    .home-widget-awards .award-list li:has(.cta-contextual),
    .home-widget-awards .award-list li:has(.cta-contextual):hover {
        background-color: transparent;
        box-shadow: none;
        align-items: center;
        justify-content: center;
    }

/* Home Search Widget With Keywords */

.header-widget:has(.search-banner-keywords-container) {
    max-width: 100% !important;
    min-height: 300px;
}

    .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget {
        width: 100%;
        max-width: 1040px;
        display: flex;
        align-items: center;
        gap: 80px;
        justify-content: space-evenly;
        padding: 0 20px;
    }

        .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget h4 {
            font-size: 36px;
            line-height: 44px;
            font-weight: bold;
            text-align: left;
        }

        .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget .searchBox {
            min-width: 40%;
        }

            .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget .searchBox .inner:has(.header-search-block) {
                padding: 30px 0 0;
            }

        .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget .multiple-select-container input[type="text"] {
            height: 40px;
            line-height: 40px;
        }

        .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget .placeholder {
            border: none;
            padding-top: 0;
            padding-right: 40px;
        }

        .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget .multiple-select-container.search-container .multiple-select-btn {
            bottom: 0;
            height: 40px;
            display: flex;
            align-items: center;
        }

            .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget .multiple-select-container.search-container .multiple-select-btn i {
                width: 40px;
            }

.search-banner-keywords-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    list-style-type: none;
}

    .search-banner-keywords-container li {
        padding: 8px 16px;
        border-radius: 18px;
        border-width: 1px;
        border-style: solid;
    }

@media (max-width: 1024px) {

    .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget {
        gap: 20px;
        padding: 0;
    }
}

@media (max-width: 768px) {

    .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget {
        flex-wrap: wrap;
    }

        .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget .searchBox {
            min-width: inherit;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .header-widget:has(.search-banner-keywords-container) .SearchBoxWidget h4 {
            text-align: center;
        }
}
/**************************/
/*  Job page : new gauge  */
/**************************/


.job-skills-content h3 {
  margin-bottom: 6px;
}
.job-skills-content .job-skills-details-list + .job-skills-details-list {
  padding-top: 12px;
}
.job-skills-content .job-skills-details-list .job-skill-details {
  gap: 24px;
  padding: 24px;
}
.job-skills-content .job-skills-details-list .job-skill-details p {
  max-width: 293px;
  min-width: 293px;
  font-size: 18px;
  line-height: 26px;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-actions {
  gap: 4px;
  flex-wrap: inherit;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-actions .job-skill-cta-history img {
  min-width: 24px;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list {
  position: relative;
  display: flex;
  gap: 2px;
  width: 443px;
  max-width: 443px;
  margin: 0;
  padding: 8px 0 0 0;
  list-style-type: none;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list .popover {
  position: absolute;
  top: -140px;
  left: 50%;
  transform: translate(-50%, 0);
  padding: 15px 24px;
  border: none;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  z-index: 5;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list .popover p {
  font-size: 14px !important;
  line-height: 20px !important;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list .popover p:first-child {
  font-size: 18px !important;
  line-height: 26px !important;
  font-weight: 700;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list .popover:after {
  top: 100%;
  left: 50%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-width: 6px;
  margin-left: -6px;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list:hover .popover.main-popover {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-1 li:nth-child(-n+2) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-2 li:nth-child(-n+3) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-3 li:nth-child(-n+4) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-4 li:nth-child(-n+5) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-5 li:nth-child(-n+6) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-6 li:nth-child(-n+7) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-7 li:nth-child(-n+8) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-8 li:nth-child(-n+9) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-9 li:nth-child(-n+10) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.list-by-10 li:nth-child(-n+11) {
  display: flex;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-1 li:nth-child(2) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-1 li:nth-child(2) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-2 li:nth-child(3) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-2 li:nth-child(3) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-3 li:nth-child(4) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-3 li:nth-child(4) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-4 li:nth-child(5) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-4 li:nth-child(5) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-5 li:nth-child(6) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-5 li:nth-child(6) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-6 li:nth-child(7) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-6 li:nth-child(7) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-7 li:nth-child(8) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-7 li:nth-child(8) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-8 li:nth-child(9) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-8 li:nth-child(9) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-9 li:nth-child(10) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-9 li:nth-child(10) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-10 li:nth-child(11) .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.objective-is-10 li:nth-child(11) .job-skill-info .fa-check {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-1 li:nth-child(2) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-2 li:nth-child(3) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-3 li:nth-child(4) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-4 li:nth-child(5) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-5 li:nth-child(6) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-6 li:nth-child(7) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-7 li:nth-child(8) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-8 li:nth-child(9) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-9 li:nth-child(10) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.user-objective-is-10 li:nth-child(11) .avatar {
  display: block;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.bigger-is-1 li:nth-child(2) {
  min-width: 60%;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.bigger-is-2 li:nth-child(3) {
  min-width: 60%;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.bigger-is-3 li:nth-child(4) {
  min-width: 60%;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.bigger-is-4 li:nth-child(5) {
  min-width: 60%;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list.bigger-is-5 li:nth-child(6) {
  min-width: 60%;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list li {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: -webkit-fill-available;
  width: -moz-available;
  width: fill-available;
  text-align: center;
  list-style-type: none;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list li .avatar {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list li .avatar .avatar-img {
  min-width: 24px;
  width: 24px;
  height: auto;
  position: absolute;
  top: -26px;
  left: calc(50% - 12px);
  left: -moz-calc(50% - 12px);
  left: -webkit-calc(50% - 12px);
  left: calc(50% - 12px);
  left: -moz-calc(50% - 12px);
  left: -webkit-calc(50% - 12px);
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list li .bar {
  width: 100%;
  height: 6px;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list li .job-skill-info {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 26px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  padding: 0 4px;
}
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list li .job-skill-info svg,
.job-skills-content .job-skills-details-list .job-skill-details .job-skill-list li .job-skill-info .fa-check {
  display: none;
}