/*--------------------------------------------------------------
# Courses List
--------------------------------------------------------------*/
:root {
    --course-page-bg: var(--orthogram-bg);
    --course-surface: var(--orthogram-surface);
    --course-card-bg: var(--orthogram-bg);
    --course-text: var(--orthogram-text);
    --course-muted: var(--orthogram-muted);
    --course-border: var(--orthogram-border);
    --course-link: var(--orthogram-text);
    --course-link-hover: var(--orthogram-brand-hover);
    --course-soft-bg: rgba(245, 158, 11, 0.10);
    --course-soft-bg-hover: rgba(245, 158, 11, 0.16);
    --course-icon-bg: rgba(245, 158, 11, 0.12);
    --course-code-bg: #f8fafc;
    --course-table-bg: var(--orthogram-bg);
    --course-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
}

[data-bs-theme="dark"] {
    --course-page-bg: var(--orthogram-bg);
    --course-surface: var(--orthogram-surface);
    --course-card-bg: var(--orthogram-surface);
    --course-text: var(--orthogram-text);
    --course-muted: var(--orthogram-muted);
    --course-border: var(--orthogram-border);
    --course-link: var(--orthogram-text);
    --course-link-hover: var(--orthogram-brand);
    --course-soft-bg: rgba(245, 158, 11, 0.13);
    --course-soft-bg-hover: rgba(245, 158, 11, 0.20);
    --course-icon-bg: rgba(245, 158, 11, 0.16);
    --course-code-bg: #101720;
    --course-table-bg: #151b22;
    --course-shadow: 0 20px 48px rgba(0, 0, 0, 0.26);
}

.section-programs .card {
    margin-bottom: 30px;
    border: 1px solid #d5d7d9;
    border-radius: 5px;
    box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
    overflow: hidden;
}

.section-programs h1,
.main-content-courses h1 {
    font-size: 1.375rem;
}

.card-sub-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: 500;
    color: #012970;
}

.spacer-section {
    margin-bottom: 24px !important;
}

@media (min-width: 576px) {
    .spacer-section {
        margin-bottom: 32px !important;
    }
}

@media (min-width: 768px) {
    .flex-fill.mb-6.mb-md-0 {
        margin-bottom: 0 !important;
    }
}

.mb-6 {
    margin-bottom: 24px !important
}

@media (min-width: 768px) {

    .pr-md-6,
    .px-md-6 {
        padding-right: 24px !important;
    }
}

.nt-0 {
    margin-top: 0;
}

@media (min-width: 768px) {

    .mt-md-n2,
    .my-md-n2 {
        margin-top: -8px !important;
    }
}

@media (min-width: 992px) {

    .mt-lg-n4,
    .my-lg-n4 {
        margin-top: -16px !important;
    }
}

/* Bordered Tabs */
.xfue0z {
    margin-top: 1.25rem;
}

.x0g3fk {
    margin-right: 1.25rem;
}

.owoe4k {
    padding: 0.5rem 0 !important;
}

.qpguv1 {
    font-size: 1.375rem;
}

.nav-tabs-bordered {
    border-bottom: 2px solid #ebeef4 !important;
}

.nav-tabs-bordered .nav-link {
    margin-bottom: -2px !important;
    border: none !important;
    color: #2c384e !important;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: #06040E !important;
}

.nav-tabs-bordered .nav-link.active {
    background-color: #fff !important;
    color: #06040E !important;
    border-bottom: 2px solid #06040E !important;
}

.filterbar {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 15px;
}

.card-container {
    display: grid;
    grid-gap: 1rem;
    padding: 1rem;
    max-width: 1024px;
    margin: 0 auto;
}

@media (min-width: 600px) {
    .card-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .card-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

.thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #edeff0;
    min-width: 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    -o-object-fit: cover;
    object-fit: cover;
}

.thumb-photo {
    box-shadow: inset 0 0 0 1px rgba(13, 22, 27, 0.18);
}


.thumb-lg {
    min-width: 4rem;
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem
}

.thumb-program-numerology {
    background-size: cover;
}

.thumb-img {
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 0.5rem;
}

.ml-3 {
    margin-left: 12px !important;
}

.r4x24e {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
}

@media (min-width: 450px) {
    .minw315 {
        min-width: 315px;
    }
}

.ml30 {
    margin-left: 30px;
}

.text-grey-dark {
    color: #0d161b !important;
}

.opacity-2 {
    opacity: .6 !important;
}

.h4-title {
    color: #0d161b;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 0
}

.text-md,
.bulleted-md .bulleted-item {
    font-size: 1rem !important;
    line-height: 1.75 !important;
    color: #0d161b !important;
    font-weight: 600 !important;
}

.bulleted {
    --item-gap: 0 0.375rem;
    display: flex;
    flex-wrap: wrap;
}

.bulleted-item {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #53595c;
    font-size: 0.875rem !important;
    line-height: 1.7142857143 !important;
}

.nc80xb {
    --item-gap: 0 0.375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
    list-style-type: none;
}

.tvyx52 {
    color: #59585A;
}

.rs8f42 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rs8f42:not(:first-child)::before {
    content: "•";
    margin: var(--item-gap);
    color: #98989A;
}

.svg-green-soft {
    fill: #006d3f !important;
}

.pj9s5g {
    --item-gap: 0 0.375rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 0;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
    list-style-type: none;
}

.vhqzub {
    color: #59585A;
}

.z4aw8h {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.z4aw8h:not(:first-child)::before {
    content: "•";
    margin: var(--item-gap);
    color: #98989A;
}

/*--------------------------------------------------------------
# Courses Section
--------------------------------------------------------------*/
.container-fluid {
    max-width: 1440px !important;
}

.container-fluid {
    padding-right: 20px !important;
    padding-left: 20px !important;
}

@media (min-width: 576px) {
    .container-fluid {
        padding-right: 32px !important;
        padding-left: 32px !important;
    }
}

@media (min-width: 992px) {
    .container-fluid {
        padding-right: 48px !important;
        padding-left: 48px !important;
    }
}

.container-fluid.container-padding {
    padding-bottom: 24px !important;
    padding-top: 24px !important;
}

@media (min-width: 576px) {
    .container-fluid.container-padding {
        padding-bottom: 32px !important;
    }
}

@media (min-width: 576px) {
    .container-fluid.container-padding {
        padding-top: 32px !important;
    }
}

.sidebar-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 1.5rem;
}

@media (min-width: 576px) {
    .sidebar-container {
        gap: 2rem;
    }
}

@media (min-width: 768px) {
    .sidebar-container:not(.embedded-checkout *) {
        grid-template-columns: minmax(0, 280px) minmax(0, 940px);
        grid-gap: 2em;
    }
}

@media (min-width: 992px) {
    .sidebar-container:not(.embedded-checkout *) {
        grid-template-columns: minmax(0, 372px) minmax(0, 940px);
        grid-gap: 2em;
    }
}

.sidebar-container .sidebar-contents {
    position: relative;
    width: 100%;
    display: none;
    min-width: 240px
}

@media (min-width: 768px) {
    .sidebar-container .sidebar-contents {
        display: grid
    }
}

.sidebar-container .sidebar-contents .sticky-contents {
    position: -webkit-sticky;
    position: sticky;
    top: var(--navbar-offset, 0);
    z-index: 1;
    display: grid;
    align-self: start
}

.sidebar-container .sidebar-contents .sticky-contents {
    position: -webkit-sticky;
    position: sticky;
    top: var(--navbar-offset, 0);
    z-index: 1;
    display: grid;
    align-self: start
}

.sticky-contents a {
    text-decoration: none;
}

.sidebar-container .main-content {
    display: grid;
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content;
    grid-template-columns: minmax(0, 940px);
    order: 2;
    position: relative
}

.sidebar-container.reverse .main-content {
    order: 1
}

.sidebar-container #lesson-content {
    max-width: calc(100vw - 24px);
}

.container-fluid .list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border: 0 solid rgba(0, 0, 0, 0.125);
}

.container-fluid .list-group .list-group-item {
    padding: 4px !important;
    font-weight: 500 !important;
}

.container-fluid .list-group .list-group-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.25rem;
    transition: all 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4);
}

.main-content h1 {
    font-size: 1.375rem;
}

.list-group {
    border-radius: .5rem !important;
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 0;
    padding-left: 0 !important;
}

.list-group.list-group-xs .list-group-item {
    border-radius: 0.5rem !important;
}

.list-group.list-group-menu .list-group-item {
    color: rgb(6, 4, 14) !important;
    ;
}

.list-group.list-group-xs .list-group-item {
    font-size: 0.875rem !important;
    line-height: 1.7142857143 !important;
}

.list-group.list-group-menu a.list-group-item:hover {
    color: #2f3234 !important;
}

.list-group.list-group-menu a.list-group-item:focus {
    color: #2f3234 !important;
}

.container-fluid svg {
    overflow: hidden;
    vertical-align: middle;
}

.list-group .list-group-item .list-group-icon svg {
    fill: #06040E !important;
}

.list-group .list-group-item .list-group-icon {
    background-size: cover;
    background-position: center center;
}

.list-group .list-group-item .list-group-icon {
    align-self: start;
}

.list-group .list-group-item .list-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #edeff0;
    min-width: 3rem;
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    -o-object-fit: cover;
    object-fit: cover;
}

.list-group.list-group-xs .list-group-item .list-group-icon {
    margin-right: 8px !important;
}

.list-group.list-group-xs .list-group-item .list-group-icon {
    min-width: 1.75rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
}

.list-group .list-group-item.active .list-group-icon:not(.thumb-photo) {
    background: transparent !important;
    border-color: transparent !important;
    background-size: cover !important;
    background-position: center center !important;
}

.list-group .list-group-item .list-group-icon {
    background-color: #fff;
}

.list-group .list-group-item .list-group-icon.completed {
    background-color: #edeff0 !important;
}

.list-group.list-group-menu a.list-group-item.active,
.list-group.list-group-menu a.list-group-item.active:hover,
.list-group a.list-group-item:hover {
    color: black !important;
}

.list-group-item-action:hover {
    z-index: 1;
    color: #0d161b;
    text-decoration: none;
    background-color: #edeff0 !important;
}

.list-group-item-action:hover .list-group-icon {
    background-color: #edeff0 !important;
}

.container-fluid .list-group .list-group-item:hover {
    border-radius: 0.5rem !important;
}

.list-group-item.active {
    z-index: 2 !important;
    color: #0d161b !important;
    background-color: #edeff0 !important;
    border-color: #edeff0 !important;
}

.main-content .breadcrumb,
.main-content-courses .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0 0;
    margin-bottom: 0;
    list-style: none;
    background-color: transparent;
    border-radius: 0.5rem;
}

nav .breadcrumb .breadcrumb-item {
    color: #91989c !important;
    font-size: 0.875rem !important;
    line-height: 1.7142857143 !important;
}

nav .breadcrumb .breadcrumb-item a {
    font-weight: 600 !important;
}

nav .breadcrumb .breadcrumb-item a {
    text-decoration: none !important;
}

nav .breadcrumb .breadcrumb-item a {
    transition: color 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4);
}

nav .breadcrumb .breadcrumb-item a:hover {
    color: #0d161b !important;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (min-width: 577px) {
    .flex-nowrap-sm-down {
        flex-wrap: nowrap !important;
    }
}

.btn-row .btn-icon {
    display: inline-flex;
    align-items: center;
}

.btn-row .btn {
    display: inline-block;
    font-weight: 500;
    color: #0d161b;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 0 solid transparent;
    padding: 0.5rem 1.125rem;
    font-size: 1rem;
    line-height: 1.75;
    border-radius: 0.5rem;
    transition: color 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4), background-color 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4), border-color 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4), box-shadow 0.1s cubic-bezier(0.5, 0.2, 0.9, 0.4);
}

.btn-row .btn-outline-grey {
    color: #53595c;
    border-color: #53595c;
    box-shadow: inset 0 0 0 1px #d5d7d9;
}

[data-action="fullscreen#toggle"] {
    display: none;
}

@media (min-width: 768px) {
    [data-action="fullscreen#toggle"] {
        display: flex;
    }
}

.btn-icon svg {
    fill: currentColor;
}

.btn-icon svg {
    max-width: 1rem;
    max-height: 1rem;
}

.btn-icon svg:first-child:last-child {
    margin: 0.375rem -0.25rem;
}

.btn-outline-grey:hover {
    color: #53595c !important;
    background-color: #edeff0 !important;
    border-color: #53595c !important;
}

.mt-n4 {
    margin-top: -16px !important;
}

.text-lg {
    font-size: 1.125rem !important;
    line-height: 1.7777777778 !important;
}

.main-content .card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #d5d7d9;
    border-radius: 0.5rem;
    line-height: 1.75;
}

@media (max-width: 575.98px) {
    .main-content .card {
        margin-left: -20px;
        margin-right: -20px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

.main-content .card-header {
    padding: 0 0;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid #d5d7d9;
    height: auto;
}

@media (min-width: 576px) {

    .main-content .card-header,
    .main-content .card-body {
        padding-top: 24px !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

@media (min-width: 576px) {
    .main-content .card-body {
        padding-bottom: 24px !important;
    }
}

.main-content .card-header {
    border-bottom: none;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
}

.main-content .card-header {
    border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0 !important;
}

.main-content .card-header .card-title {
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.35;
    color: #0d161b;
    padding: 0;
    height: auto;
}

.main-content .card-header .card-title {
    font-size: 1.1875rem;
}

.main-content .card-body {
    flex: 1 1 auto;
    min-height: 1px;
}

.list-group.list-group-sm .list-group-item .list-group-icon,
.answer-group .answer label::before {
    min-width: 2.25rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    margin-right: 8px
}

.dropdown .h1 {
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.35;
    color: #0d161b;
}

@media (max-width: 1200px) {
    .dropdown .h1 {
        font-size: calc(1.2625rem + 0.15vw);
    }
}

.main-content .dropdown-toggle {
    background-position: right center;
    white-space: normal;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 0 0 1px rgba(13, 22, 27, 0.15), 0px 8px 16px rgba(13, 22, 27, 0.15);
}

.dropdown .btn:first-child:active,
.dropdown .btn.show {
    border-color: transparent;
}

.text-longform {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.75;
    color: #0d161b;
    text-align: left;
}

.text-longform a {
    color: #0d161b;
    text-decoration: none;
}

#completion-button .btn-dark {
    color: #fff;
    background-color: #0d161b;
    border-color: #0d161b;
}

#completion-button .btn-secondary {
    color: #212529;
    background-color: #edeff0;
    border-color: #edeff0;
}

#completion-button .btn-close {
    --bs-btn-close-color: #000;
    --bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e);
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
    border: 0;
    border-radius: 0.375rem;
    opacity: var(--bs-btn-close-opacity);
}

.toast {
    font-size: 0.875rem;
    color: #ffffff !important;
    background-color: rgba(13, 22, 27, 0.9) !important;
    width: var(--bs-toast-max-width);
    max-width: 100%;
    font-size: var(--bs-toast-font-size);
    color: var(--bs-toast-color);
    pointer-events: auto;
    background-clip: padding-box;
    border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
    box-shadow: var(--bs-toast-box-shadow);
    border-radius: var(--bs-toast-border-radius);
}

.fixed-bottom {
    position: absolute;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.bg-color-transp {
    background-color: transparent !important;
}

.v9d3ks:not(:last-child) {
    margin-bottom: 1.25rem;
}

.lk25pol {
    color: #06040E;
    text-decoration: none;
    background-color: transparent;
}

.lk25pol h2 {
    font-size: 1.125rem;
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.35;
    color: #06040E;
}

.mt-8,
.my-8 {
    margin-top: 32px !important;
}

.pb7jep h3 {
    font-size: 1rem;
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.35;
    color: #06040E;
}

.f4lgy4 {
    margin-left: 0.25rem;
    margin-top: -0.625rem;
}

.svg-grey-dark {
    fill: #06040E !important;
}

.icon.closed.f4lgy4.collapsed svg {
    fill: #06040E !important;
}

.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.h4ktbg {
    background-color: #EDEDED !important;
    border: 1px solid #D6D6D7 !important;
    border-radius: 0.5rem !important;
    padding: 16px;
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
}

.te2ecj {
    margin-bottom: 0.563rem !important;
}

.carefull {
    color: #d73a49;
    font-weight: bold;
}

.blue {
    color: #1877f2;
    font-weight: 600;
}

.green {
    color: #18B870;
}

.violet {
    color: #B76BA3;
}

.vertolive {
    color: #88B04B;
}

.d1fo5x {
    color: #8b6f48;
    font-weight: bold;
}

.brown_u {
    color: #66352B;
    text-decoration: underline;
    font-weight: bold;
}

.brown_n {
    color: #66352B;
    font-weight: bold;
}

.thinksfull {
    color: #863339;
    font-weight: bold;
}

table.statement {
    border: 1px solid #ccc;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: fixed;
    background-color: transparent;
    border-spacing: 0;
}

table.statement tr {
    border: 1px solid #ddd;
    padding: .35em;
}

table.statement th,
table.statement td {
    padding: .625em;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 0.9em;
}

table.statement th {
    font-size: 0.9em;
    letter-spacing: .1em;
    border: 1px solid #ccc;
}

@media all and (max-width: 600px) {
    table.statement {
        border: 0;
    }

    table.statement thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    table.statement tr {
        border-bottom: 3px solid #ddd;
        display: block;
        margin-bottom: .625em;
    }

    table.statement td {
        border: 0;
        display: block;
        font-size: .8em;
        text-align: right;
    }

    table.statement td.premierchamp {
        display: none;
    }

    table.statement td.secondchamp {
        display: none;
    }

    table.statement td.troisiemechamp {
        display: none;
    }

    table.statement td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
        text-transform: uppercase;
    }

    table.statement td:last-child {
        border-bottom: 0;
    }
}

.ml132 {
    margin-left: 138px;
}

h2#replies_header {
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.35;
    color: #0d161b;
    font-size: 1rem;
}

.btn-outline-grey {
    color: #53595c;
    border-color: #53595c;
    box-shadow: inset 0 0 0 1px #d5d7d9;
    border-radius: 8px;
    border: 0 solid transparent;
    padding: 0.375rem 0.875rem;
}

a.btn-outline-grey {
    font-size: 16px;
    font-weight: 600;
}

#ajout-commentaire span {
    margin-left: 0.25rem;
}

.btn-abandonment {
    color: #212529;
    background-color: #edeff0;
    border-color: #edeff0;
}

a.btn.btn-sm.btn-abandonment {
    padding: 0.375rem 0.875rem;
    font-size: 1rem;
    line-height: 1.7142857143;
    border-radius: 0.5rem;
}

a.btn.btn-sm.btn-abandonment:hover,
button.btn.btn-abandonment:hover {
    color: #212529;
    background-color: #d1d6d9;
    border-color: #d1d6d9;
}

.btn-submit-dark {
    color: #fff;
    background-color: #0d161b;
    border-color: #0d161b;
}

.gap-x-2 {
    gap: 0 0.5rem !important;
}

.sc-img-gravatar {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: center center;
    object-position: center center;
    margin: 0px auto;
    border-radius: 0px;
    aspect-ratio: unset;
    width: 100%;
}

.sc-gravatar .sc-img-gravatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.avatar .sc-img-gravatar {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: inset 0 0 0 1px rgba(13, 22, 27, 0.18);
}

.font-weight-bold {
    font-weight: 600;
}

.text-sm {
    font-size: 1rem !important;
    line-height: 1.7142857143 !important;
}

.mt-n1,
.my-n1 {
    margin-top: -4px !important;
}

.ml-n2,
.mx-n2 {
    margin-left: -8px !important;
}

.btn-transparent-soft {
    color: #212529;
    background-color: #edeff0;
    border-color: #edeff0;
}

#comments .btn-transparent-soft:hover {
    color: #212529;
    background-color: #edeff0;
    border-color: #edeff0;
}

#comments .btn-transparent-soft {
    background-color: transparent;
    color: #53595c;
}

.btn.btn-xs {
    padding: 0.125rem 0.625rem;
    font-size: 1rem;
    line-height: 1.7142857143;
    border-radius: 0.375rem;
}

.btn.btn-rounded {
    border-radius: 1.5rem;
}

.btn.btn-tight.btn-xs {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.btn-icon.btn-xs svg {
    max-width: 1rem;
    max-height: 1rem;
}

.btn-icon.btn-xs svg+span {
    margin-left: 0.125rem;
}

.piped {
    display: flex;
    align-items: center;
}

.btn-row-xxs {
    gap: 0.25rem;
}

.piped>span {
    display: flex;
    align-items: center;
}

.piped>span:not(:first-child)::before {
    content: "|";
    margin: 0 1rem;
    color: #d5d7d9;
}

.piped.piped-slim>span:not(:first-child)::before {
    margin: 0 0.5rem;
}

.pl-6 {
    padding-left: 24px !important;
}

.border-left {
    border-left: 1px solid #d5d7d9 !important;
}

/*--------------------------------------------------------------
# Lock Partial file
--------------------------------------------------------------*/
.zhczf8 {
    display: flex;
    flex-direction: column;
    gap: 1rem 0;
    margin: 0 auto;
    max-width: 760px;
    padding: 2rem 0;
    text-align: center;
}

.dgxtkb {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kuw4x9 {
    margin-bottom: 0;
    font-weight: 600;
    line-height: 1.35;
    color: #06040E;
    font-size: 1rem;
}

/*--------------------------------------------------------------
# Template Link partial twig
--------------------------------------------------------------*/
.nt8qdd {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #D6D6D7;
    border-radius: 0.5rem;
}

.a630tj {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0;
    padding: 20px;
}

@media (min-width: 576px) {
    .a630tj {
        padding-top: 24px;
        padding-bottom: 24px;
        padding-right: 28px;
        padding-left: 28px;
    }
}

/*--------------------------------------------------------------
# Orthogram course theme
--------------------------------------------------------------*/
.course-page {
    background-color: var(--course-page-bg);
    color: var(--course-text);
}

.section-programs,
.main-content-courses {
    background-color: var(--course-page-bg);
    color: var(--course-text);
}

.section-programs .card,
.course-page .main-content .card,
.course-page .nt8qdd {
    background-color: var(--course-card-bg);
    border-color: var(--course-border);
    box-shadow: var(--course-shadow);
    color: var(--course-text);
}

.section-programs .card-sub-title,
.main-content-courses h1,
.section-programs h1 {
    color: var(--course-text);
}

.section-programs .filterbar,
.filterbar {
    background-color: var(--course-card-bg);
    border-color: var(--course-border);
    color: var(--course-text);
}

.nav-tabs-bordered {
    border-bottom-color: var(--course-border) !important;
}

.nav-tabs-bordered .nav-link {
    color: var(--course-muted) !important;
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus {
    color: var(--course-text) !important;
}

.nav-tabs-bordered .nav-link.active {
    background-color: var(--course-card-bg) !important;
    border-bottom-color: var(--orthogram-brand) !important;
    color: var(--course-text) !important;
}

.course-page .card-body,
.course-page .sidebar-contents,
.course-page .sticky-contents,
.course-page .list-group,
.course-page .list-group-menu,
.course-page .list-group-sm {
    color: var(--course-text);
}

.course-page .card-sub-title,
.course-page .text-grey-dark,
.course-page .h4-title,
.course-page .text-md,
.course-page .lk25pol,
.course-page .lk25pol h2,
.course-page .pb7jep h3,
.course-page .dropdown .h1,
.course-page .text-longform,
.course-page .text-longform a,
.course-page h2#replies_header,
.course-page .kuw4x9,
.course-page .list-group.list-group-menu .list-group-item {
    color: var(--course-text) !important;
}

.course-page .text-muted,
.course-page .bulleted-item,
.course-page .tvyx52,
.course-page .vhqzub,
.course-page nav .breadcrumb .breadcrumb-item,
.course-page .btn-row .btn-outline-grey,
.course-page .btn-outline-grey,
.course-page #comments .btn-transparent-soft {
    color: var(--course-muted) !important;
}

.course-page .breadcrumb,
.course-page .main-content-courses .breadcrumb {
    background-color: transparent;
}

.course-page .progress {
    background-color: var(--course-soft-bg);
}

.course-page .progress-bar {
    background-color: var(--orthogram-brand) !important;
}

.course-mobile-menu {
    margin-top: 0.25rem;
    position: relative;
}

.course-mobile-menu-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--course-text);
    display: inline-flex;
    font-family: "DidactGothic", sans-serif;
    font-size: 1.8rem;
    gap: 0.5rem;
    line-height: 1.2;
    padding: 0;
    text-align: left;
}

.course-mobile-menu-toggle svg {
    flex: 0 0 auto;
    fill: currentColor;
    transition: transform 0.18s ease;
}

.course-mobile-menu.is-open .course-mobile-menu-toggle svg {
    transform: rotate(180deg);
}

.course-mobile-menu-toggle:focus-visible {
    border-radius: 0.375rem;
    outline: 3px solid var(--orthogram-focus-ring);
    outline-offset: 4px;
}

.course-mobile-menu-panel {
    background-color: var(--course-card-bg);
    border: 1px solid var(--course-border);
    border-radius: 0.5rem;
    box-shadow: var(--course-shadow);
    color: var(--course-text);
    left: 0;
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 1rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.75rem);
    z-index: 20;
}

.course-mobile-menu-panel .sticky-contents {
    margin-bottom: 0;
}

.course-mobile-menu-panel .list-group-menu:last-child {
    margin-bottom: 0 !important;
}

.course-mobile-menu-panel .list-group-item {
    min-width: 0;
}

.course-mobile-menu-panel .course-item-duration {
    display: none;
}

@media (min-width: 768px) {
    .course-mobile-menu {
        display: none;
    }
}

.course-page .sidebar-container.is-fullscreen {
    grid-template-columns: minmax(0, 1fr);
}

.course-page .sidebar-container.is-fullscreen .main-content {
    grid-template-columns: minmax(0, 100%);
    width: 100%;
}

.course-page .sidebar-container.is-fullscreen .main-content .card {
    width: 100%;
}

.course-page nav .breadcrumb .breadcrumb-item a,
.course-page .sticky-contents a,
.course-page .lk25pol {
    color: var(--course-link) !important;
}

.course-page nav .breadcrumb .breadcrumb-item a:hover,
.course-page .sticky-contents a:hover,
.course-page .lk25pol:hover,
.course-page .lk25pol:hover h2 {
    color: var(--course-link-hover) !important;
}

.course-page .thumb,
.course-page .list-group .list-group-item .list-group-icon,
.course-page .list-group .list-group-item .list-group-icon.completed {
    background-color: var(--course-icon-bg) !important;
}

.course-page .thumb-photo,
.course-page .avatar .sc-img-gravatar {
    box-shadow: inset 0 0 0 1px var(--course-border);
}

.course-page .container-fluid .list-group-item,
.course-page .list-group .list-group-item {
    background-color: transparent;
    border-color: transparent;
    color: var(--course-text) !important;
    gap: 0.5rem;
}

.course-page .course-item-title {
    min-width: 0;
}

.course-page .course-item-duration {
    margin-left: auto;
    padding-left: 0.75rem;
    white-space: nowrap;
}

.course-page .list-group-item-action:hover,
.course-page .list-group-item.active,
.course-page .list-group.list-group-menu a.list-group-item.active,
.course-page .list-group.list-group-menu a.list-group-item.active:hover,
.course-page .list-group a.list-group-item:hover {
    background-color: var(--course-soft-bg-hover) !important;
    border-color: var(--course-soft-bg-hover) !important;
    color: var(--course-text) !important;
}

.course-page .list-group-item-action:hover .list-group-icon,
.course-page .list-group-item.active .list-group-icon:not(.thumb-photo) {
    background-color: var(--course-icon-bg) !important;
}

.course-page .list-group .list-group-item .list-group-icon svg,
.course-page .svg-grey-dark,
.course-page .icon.closed.f4lgy4.collapsed svg {
    fill: var(--course-text) !important;
}

.course-page .main-content .card-header,
.course-page .border-left {
    border-color: var(--course-border) !important;
}

.course-page .dropdown-menu {
    background-color: var(--orthogram-dropdown-bg);
    border: 1px solid var(--orthogram-dropdown-border);
    box-shadow: var(--orthogram-dropdown-shadow);
}

.course-page .btn-outline-grey,
.course-page .btn-row .btn-outline-grey {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px var(--course-border);
}

.course-page .btn-outline-grey:hover,
.course-page .btn-abandonment,
.course-page .btn-transparent-soft,
.course-page #comments .btn-transparent-soft:hover {
    background-color: var(--course-soft-bg) !important;
    border-color: var(--course-soft-bg) !important;
    color: var(--course-text) !important;
}

.course-page .btn-submit-dark,
.course-page #completion-button .btn-dark {
    background-color: var(--orthogram-brand) !important;
    border-color: var(--orthogram-brand) !important;
    color: #111827 !important;
}

.course-page #completion-button .btn-secondary {
    background-color: var(--course-soft-bg) !important;
    border-color: var(--course-soft-bg) !important;
    color: var(--course-text) !important;
}

.course-page .h4ktbg {
    background-color: var(--course-code-bg) !important;
    border-color: var(--course-border) !important;
    color: var(--course-text);
}

.course-page table.statement {
    background-color: var(--course-table-bg);
    border-color: var(--course-border);
    color: var(--course-text);
}

.course-page table.statement tr,
.course-page table.statement th,
.course-page table.statement td {
    border-color: var(--course-border);
}

.course-page table.statement th {
    background-color: var(--course-soft-bg);
    color: var(--course-text);
}

.course-page .rs8f42:not(:first-child)::before,
.course-page .z4aw8h:not(:first-child)::before,
.course-page .piped>span:not(:first-child)::before {
    color: var(--course-border);
}

html[data-bs-theme="dark"] .course-page .dropdown-menu,
html[data-bs-theme="dark"] .course-page .main-content .card,
html[data-bs-theme="dark"] .course-page .nt8qdd {
    background-color: var(--course-card-bg);
}

html[data-bs-theme="dark"] .course-page .toast {
    background-color: rgba(16, 23, 32, 0.95) !important;
    border-color: var(--course-border);
}

html[data-bs-theme="dark"] .course-page .carefull {
    color: #fb7185;
}

html[data-bs-theme="dark"] .course-page .blue {
    color: #60a5fa;
}

html[data-bs-theme="dark"] .course-page .green {
    color: #34d399;
}

html[data-bs-theme="dark"] .course-page .violet {
    color: #c084fc;
}

html[data-bs-theme="dark"] .course-page .vertolive {
    color: #a3e635;
}

html[data-bs-theme="dark"] .course-page .d1fo5x,
html[data-bs-theme="dark"] .course-page .brown_u,
html[data-bs-theme="dark"] .course-page .brown_n {
    color: #fbbf24;
}

html[data-bs-theme="dark"] .course-page .thinksfull {
    color: #fda4af;
}

@media all and (max-width: 600px) {
    .course-page table.statement tr {
        border-bottom-color: var(--course-border);
    }
}