@import url("fonts/Diagramm/diagramm.css");
@import url("fonts/font-awesome.css");
@import url("borders.css");
html {
    scroll-behavior: smooth;
}

:root {
    --gray: #E5E6E5;
    --red: #FF341C;
    --green: #00B05E;
    --blue: #008CF9;
    --purple: #6B53A0;
    --black: #000000;
    --white: #FFFFFF;
    --pink: #FF92B6;
    --orange: #F6791E;
    --yellow: #FFC81A;
    --dark-gray: #999999;
    --primary-bg-color: var(--black);
    --primary-font-color: var(--white);
    --secondary-bg-color: var(--white);
    --secondary-font-color: var(--black);
    --border-width: .5px;
    --border-color: var(--gray);
    --nav-height: 50px;
    --nav-progress-height: 65px;
    --footer-height: 69px;
    --light-blue: #cce8fe;
    --key-color: var(--primary-font-color);
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */

input[type=number] {
    -moz-appearance: textfield;
}

.main {
    margin-top: var(--nav-height);
    min-height: calc(100vh - (var(--footer-height) + var(--nav-height)));
}

.no-header {
    margin-top: calc(-1 * var(--nav-height));
}

.dashboard-wrapper {
    margin-top: var(--nav-height);
}

.onboarding-wrapper {
    margin-top: var(--nav-height);
    min-height: calc(100vh - (var(--footer-height) + var(--nav-height)));
    display: block;
}

.onboarding-countdown {
    max-height: 250px;
    object-fit: cover;
}

.onboarding-activities {
    position: relative;
    width: 100%;
    height: 470px;
}

.onboarding-reflection-journal {
    position: absolute;
    top: 0;
    left: 0;
}

.onboarding-assessment {
    position: absolute;
    top: 160px;
    left: 30px;
}

.navbar-expand {
    padding-top: 0;
    padding-bottom: 0;
}

.nav-item {
    height: var(--nav-height);
    display: flex;
    align-items: center;
}

.nav-item-title:before {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='23' viewBox='0 0 40 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='1.5' x2='40' y2='1.5' stroke='white' stroke-width='3'/%3E%3Cline y1='11.5' x2='40' y2='11.5' stroke='white' stroke-width='3'/%3E%3Cline y1='21.5' x2='40' y2='21.5' stroke='white' stroke-width='3'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: left center;
    margin-right: 1.5rem;
    width: 40px;
    height: 100%;
    cursor: pointer;
}

.nav-item-title:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.6156 0.329519L21.968 11.9359C21.2357 17.135 17.135 21.2357 11.9359 21.968L0.329519 23.6156C-0.10984 23.6888 -0.10984 24.3112 0.329519 24.3844L11.9359 26.032C17.135 26.7643 21.2357 30.865 21.968 36.0641L23.6156 47.6705C23.6888 48.1098 24.3112 48.1098 24.3844 47.6705L26.032 36.0641C26.7643 30.865 30.865 26.7643 36.0641 26.032L47.6705 24.3844C48.1098 24.3112 48.1098 23.6888 47.6705 23.6156L36.0641 21.968C30.865 21.2357 26.7643 17.135 26.032 11.9359L24.3844 0.329519C24.3112 -0.10984 23.6888 -0.10984 23.6156 0.329519Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    width: 50px;
    height: 100%;
    position: absolute;
    left: calc( 50% - 25px);
}

.dark-theme {
    --primary-bg-color: var(--black);
    --primary-font-color: var(--white);
    --secondary-bg-color: var(--white);
    --secondary-font-color: var(--black);
    background-color: var(--primary-bg-color);
    color: var(--primary-font-color);
    --border-color: var(--gray);
    --btn-primary-background-color: var(--blue);
    --btn-primary-font-color: var(--black);
    --btn-primary-background-color-hover: var(--white);
    --btn-primary-font-color-hover: var(--blue);
}

.light-theme {
    --primary-bg-color: var(--gray);
    --primary-font-color: var(--black);
    --secondary-bg-color: var(--black);
    --secondary-font-color: var(--white);
    background-color: var(--primary-bg-color);
    color: var(--primary-font-color);
    --border-color: var(--black);
    --btn-primary-background-color: var(--black);
    --btn-primary-font-color: var(--white);
    --btn-primary-background-color-hover: var(--blue);
    --btn-primary-font-color-hover: var(--white);
}

.white-theme {
    --primary-bg-color: var(--gray);
    --primary-font-color: var(--black);
    --secondary-bg-color: var(--black);
    --secondary-font-color: var(--white);
    background-color: #FFFFFF;
    color: var(--primary-font-color);
    --border-color: var(--black);
    --btn-primary-background-color: var(--black);
    --btn-primary-font-color: var(--white);
    --btn-primary-background-color-hover: var(--blue);
    --btn-primary-font-color-hover: var(--white);
}

.light-theme-alt {
    --primary-bg-color: var(--white);
    --primary-font-color: var(--black);
    --secondary-bg-color: var(--black);
    --secondary-font-color: var(--white);
    background-color: var(--primary-bg-color);
    color: var(--primary-font-color);
    --border-color: var(--black);
    --btn-primary-background-color: var(--black);
    --btn-primary-font-color: var(--white);
    --btn-primary-background-color-hover: var(--blue);
    --btn-primary-font-color-hover: var(--white);
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px var(--primary-bg-color) inset !important;
    -webkit-text-fill-color: var(--primary-font-color) !important;
    -webkit-mask-clip: text;
}

.journey-course .available {
    background-color: var(--white);
}

.journey-course .completed {
    background-color: var(--light-blue);
}

.svg-btn {
    cursor: pointer;
    fill: var(--primary-font-color);
    stroke: var(--primary-font-color);
}

.svg-btn.course-content-collapsable[aria-expanded="true"] {
    /* close */
}

.self-assessment-theme, .reflection-journal-theme {
    --primary-bg-color: var(--white);
    --primary-font-color: var(--black);
    --secondary-bg-color: var(--black);
    --secondary-font-color: var(--white);
    background-color: var(--primary-bg-color);
    color: var(--primary-font-color);
    --border-color: var(--black);
}

body {
    font-family: 'Diagramm';
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 18px;
    overflow-x: hidden;
    background-color: var(--primary-bg-color);
    color: var(--primary-font-color);
}

textarea {
    resize: none;
    overflow: hidden;
}

input, input.form-control, textarea, textarea.form-control {
    background-color: transparent!important;
    padding-left: 0!important;
    color: var(--primary-font-color);
    border: none;
    border-radius: 0;
}

input.form-control:active, input.form-control:focus, textarea.form-control:active, textarea.form-control:focus {
    outline: none;
    box-shadow: none;
    color: var(--blue);
}

a {
    color: var(--blue);
}

a:hover {
    color: var(--blue);
    text-decoration: none;
}

.text-default {
    color: var(--primary-font-color);
}

.text-decoration-underline {
    text-decoration: underline;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0;
}

h1, .h1 {
    font-weight: bold;
    font-size: 32px;
    line-height: 36px;
    text-transform: uppercase;
}

h2, .h2 {
    font-weight: bold;
    font-size: 26px;
    line-height: 28px;
}

h3, .h3 {
    font-size: 21px;
    line-height: 25px;
    text-transform: uppercase;
}

.subtitle {
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.02em;
}

.text-xlarge {
    font-weight: normal;
    font-size: 20px;
    line-height: 26px;
    letter-spacing: 0.01em;
}

.text-large {
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
}

.text-btn {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.btn {
    font-weight: 600;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 10px 2rem;
}

.btn-primary {
    background-color: var(--btn-primary-background-color);
    border-color: var(--btn-primary-background-color);
    color: var(--btn-primary-font-color);
    border-radius: 40px;
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary:hover {
    background-color: var(--btn-primary-background-color-hover);
    border-color: var(--btn-primary-background-color-hover);
    color: var(--btn-primary-font-color-hover);
    box-shadow: none!important;
}

.btn-locked {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
    color: var(--black);
    pointer-events: none;
    cursor: default;
    width: 200px;
    border-radius: 40px;
}

.block-link {
    pointer-events: none;
}

.btn-locked:not(:disabled):not(.disabled).active, .btn-locked:not(:disabled):not(.disabled):active, .show>.btn-locked.dropdown-toggle, .btn-locked:hover {
    background-color: var(--dark-gray);
    border-color: var(--dark-gray);
    color: var(--black);
    box-shadow: none!important;
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--primary-font-color);
    color: var(--primary-font-color);
    border-radius: 40px;
}

.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: transparent;
    border-color: var(--blue);
    color: var(--blue);
    box-shadow: none!important;
}

.btn-exit {
    background-color: var(--red);
    border-color: var(--red);
    color: var(--white);
    border-radius: 40px;
}

.btn-exit:not(:disabled):not(.disabled).active, .btn-exit:not(:disabled):not(.disabled):active, .show>.btn-exit.dropdown-toggle, .btn-exit:hover {
    background-color: transparent;
    border-color: var(--red);
    color: var(--red);
    box-shadow: none!important;
}

.btn-active{
    background-color: var(--blue);
    border-color: var(--blue);
    color: var(--black);
    box-shadow: none!important;
    border-radius: 40px;
}

.btn-active:not(:disabled):not(.disabled).active, .btn-active:not(:disabled):not(.disabled):active, .show>.btn-active.dropdown-toggle, .btn-active:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--blue);
    box-shadow: none!important;
}

.footnote {
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.incourse-navigation {
    height: var(--nav-height);
    border-bottom: var(--border-color) solid var(--border-width);
}

.exit-course-content, .course-content {
    top: var(--nav-height);
}

.course-content a {
    color: var(--primary-font-color);
}

.course-content a.active {
    color: var(--blue);
}

.course-content .course-content-item.active:after {
    content: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23008CF9'/%3E%3C/svg%3E%0A");
}

.course-content a:hover {
    text-decoration: none;
}

.course-content a.disabled {
    cursor: default;
    color: var(--dark-gray);
}

.text-blue {
    color: var(--blue);
}

.text-green {
    color: var(--green);
}

.text-gray {
    color: var(--dark-gray);
}

.text-red {
    color: var(--red);
}

.green-background {
    background-color: var(--green);
}

.featured-img {
    width: 100vw;
    height: auto;
    margin-left: -15px;
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
}

.section-content ol {
    list-style-type: circle;
}

.section-content ul {
    width: 100%;
    margin-left: 15px;
    padding: 0;
    border-bottom: var(--border-width) solid var(--border-color);
    border-left: var(--border-width) solid var(--border-color);
}

.section-content ul li {
    padding: 1.2rem;
    list-style-type: none;
    font-style: italic;
    width: 100%;
    margin: 0;
    border-top: var(--border-width) solid var(--border-color);
}

.section-content .quote-container {
    margin-left: 15px;
}

.section-content .quote {
    background-color: var(--green);
    color: var(--black);
    display: flex;
    flex-direction: column;
}

.section-content .quote .emogi {
    background-image: url("data:image/svg+xml,%3Csvg width='87' height='87' viewBox='0 0 87 87' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='43.5' cy='43.5' r='43.5' fill='%23C4C4C4'/%3E%3Cpath d='M28 50C28 53.3137 25.5376 56 22.5 56C19.4624 56 17 53.3137 17 50' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M52 50C52 53.3137 49.5376 56 46.5 56C43.4624 56 41 53.3137 41 50' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M35 70C38.3137 70 41 67.3137 41 64H29C29 67.3137 31.6863 70 35 70Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 90px;
    height: 90px;
    background-position: center;
    background-repeat: no-repeat;
    justify-self: flex-start;
}

.topic-wrapper {
    display: flex;
    flex-direction: column;
}

.topic-featured-img {
    width: 100%;
    border-bottom: var(--border-width) solid var(--border-color);
}

.conclusion, .df-topic {
    width: 100%;
}

.self-assessment,
.case-study,
.reflection-journal {
    padding: 5px 0;
}

.reflection-journal:before {
    content: '';
    padding-left: 3rem;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='31' viewBox='0 0 32 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 26.667H28' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 4.66632C22.5304 4.13588 23.2499 3.83789 24 3.83789C24.3714 3.83789 24.7392 3.91105 25.0824 4.05319C25.4256 4.19533 25.7374 4.40367 26 4.66632C26.2626 4.92896 26.471 5.24076 26.6131 5.58393C26.7553 5.92709 26.8284 6.29488 26.8284 6.66632C26.8284 7.03775 26.7553 7.40555 26.6131 7.74871C26.471 8.09187 26.2626 8.40367 26 8.66632L9.33333 25.333L4 26.6663L5.33333 21.333L22 4.66632Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.case-study:before {
    content: '';
    padding-left: 3rem;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='26' viewBox='0 0 29 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.44444 6.5V21.0528C6.44444 21.9194 5.8358 22.6417 4.97654 22.75C4.04568 22.8222 3.22222 22.0639 3.22222 21.125V6.5V4.36944C3.22222 3.75556 3.72346 3.25 4.3321 3.25H14.4642C15.3235 3.25 16.0395 2.63611 16.1469 1.76944C16.1827 0.830556 15.4309 0 14.5 0H3.22222H2.8642C1.28889 0 0 1.3 0 2.88889V3.25V6.5V21.0528C0 23.7972 2.18395 26 4.90494 26H24.5247C26.9951 26 29 23.9778 29 21.5222V6.5H6.44444ZM22.1617 16.9L20.0136 17.8389C19.6198 18.0194 19.3333 18.3444 19.1543 18.7417L18.2235 21.2694C18.0086 21.8111 17.2568 21.8111 17.042 21.2694L16.1111 18.7417C15.9679 18.3444 15.6457 18.0194 15.2519 17.8389L13.1037 16.9C12.6025 16.6833 12.6025 15.9611 13.1037 15.7444L15.2519 14.8056C15.6457 14.625 15.9321 14.3 16.1111 13.9028L17.042 11.375C17.2568 10.8333 18.0086 10.8333 18.2235 11.375L19.1543 13.9028C19.2975 14.3 19.6198 14.625 20.0136 14.8056L22.1617 15.7444C22.6988 15.9611 22.6988 16.6833 22.1617 16.9Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

.worksheet:before {
    content: '';
    padding-left: 3rem;
    padding-right: 3rem;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='20' viewBox='0 0 18 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.29 11.2901C5.19627 11.383 5.12188 11.4936 5.07111 11.6155C5.02034 11.7373 4.9942 11.868 4.9942 12.0001C4.9942 12.1321 5.02034 12.2628 5.07111 12.3846C5.12188 12.5065 5.19627 12.6171 5.29 12.7101L8.29 15.7101C8.38296 15.8038 8.49356 15.8782 8.61542 15.929C8.73728 15.9797 8.86799 16.0059 9 16.0059C9.13201 16.0059 9.26272 15.9797 9.38458 15.929C9.50644 15.8782 9.61704 15.8038 9.71 15.7101L12.71 12.7101C12.8983 12.5218 13.0041 12.2664 13.0041 12.0001C13.0041 11.7338 12.8983 11.4784 12.71 11.2901C12.5217 11.1018 12.2663 10.996 12 10.996C11.7337 10.996 11.4783 11.1018 11.29 11.2901L10 12.5901V1.00006C10 0.734845 9.89464 0.480491 9.70711 0.292954C9.51957 0.105418 9.26522 6.10352e-05 9 6.10352e-05C8.73478 6.10352e-05 8.48043 0.105418 8.29289 0.292954C8.10536 0.480491 8 0.734845 8 1.00006V12.5901L6.71 11.2901C6.61704 11.1963 6.50644 11.1219 6.38458 11.0712C6.26272 11.0204 6.13201 10.9943 6 10.9943C5.86799 10.9943 5.73728 11.0204 5.61542 11.0712C5.49356 11.1219 5.38296 11.1963 5.29 11.2901ZM15 7.00006H13C12.7348 7.00006 12.4804 7.10542 12.2929 7.29295C12.1054 7.48049 12 7.73484 12 8.00006C12 8.26528 12.1054 8.51963 12.2929 8.70717C12.4804 8.8947 12.7348 9.00006 13 9.00006H15C15.2652 9.00006 15.5196 9.10542 15.7071 9.29295C15.8946 9.48049 16 9.73484 16 10.0001V17.0001C16 17.2653 15.8946 17.5196 15.7071 17.7072C15.5196 17.8947 15.2652 18.0001 15 18.0001H3C2.73478 18.0001 2.48043 17.8947 2.29289 17.7072C2.10536 17.5196 2 17.2653 2 17.0001V10.0001C2 9.73484 2.10536 9.48049 2.29289 9.29295C2.48043 9.10542 2.73478 9.00006 3 9.00006H5C5.26522 9.00006 5.51957 8.8947 5.70711 8.70717C5.89464 8.51963 6 8.26528 6 8.00006C6 7.73484 5.89464 7.48049 5.70711 7.29295C5.51957 7.10542 5.26522 7.00006 5 7.00006H3C2.20435 7.00006 1.44129 7.31613 0.87868 7.87874C0.316071 8.44135 0 9.20441 0 10.0001V17.0001C0 17.7957 0.316071 18.5588 0.87868 19.1214C1.44129 19.684 2.20435 20.0001 3 20.0001H15C15.7956 20.0001 16.5587 19.684 17.1213 19.1214C17.6839 18.5588 18 17.7957 18 17.0001V10.0001C18 9.20441 17.6839 8.44135 17.1213 7.87874C16.5587 7.31613 15.7956 7.00006 15 7.00006Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: center;
}

.self-assessment:before {
    content: '';
    padding-left: 3rem;
    padding-right: 3rem;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 32H20V0H12V32ZM0 32H8V16H0V32ZM24 10V32H32V10H24Z' fill='black' fill-opacity='0.87'/%3E%3C/svg%3E%0A");
}

.soi-assessment-option {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    border: var(--border-width) solid var(--border-color);
    border-radius: 50%;
    margin: .5rem;
}

.soi-assessment-option.active, .peb-assessment-option.active {
    background-color: var(--secondary-bg-color);
    color: var(--secondary-font-color);
}

.peb-assessment-option {
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    border: var(--border-width) solid var(--border-color);
    margin: .5rem 0;
}

.peb-assessment-option img {
    width: 95px;
    height: auto;
    margin-right: .5rem;
}

.light-theme.navigation-progress {
    background-color: var(--gray);
}

.navigation-progress .col {
    height: calc( var(--nav-progress-height) - 3px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-bar {
    position: absolute;
    top: 0;
    height: 5px;
    background-color: var(--blue);
}

.full-progress-bar {
    content: '';
    /* position: absolute; */
    width: 100%;
    height: 5px;
    background-color: var(--white);
}

.meditation-question {
    border-top: var(--border-width) solid var(--border-color);
    border-bottom: var(--border-width) solid var(--border-color);
}

.meditation-feeling-questions .meditation-feeling-question {
    border-top: var(--border-width) solid var(--border-color);
}

.meditation-feeling-questions .meditation-feeling-question:last-child {
    border-bottom: var(--border-width) solid var(--border-color);
}

.meditation-question.focus, .meditation-feeling-question.focus {
    --border-color: var(--blue);
}

.dashboard-header-title {
    display: flex;
    align-items: center;
}

.dashboard-header-icon {
    cursor: pointer;
}

.dark-theme .journey-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41663 8.49967V31.1663L11.3333 25.4997L22.6666 31.1663L32.5833 25.4997V2.83301L22.6666 8.49967L11.3333 2.83301L1.41663 8.49967Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6666 8.5V31.1667' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.3334 2.83301V25.4997' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.dark-theme .results-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='25' height='23' viewBox='0 0 25 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.375 23H15.625V0H9.375V23ZM0 23H6.25V11.5H0V23ZM18.75 7.1875V23H25V7.1875H18.75Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.dark-theme .community-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.625 28.875V26.125C31.6241 24.9063 31.2185 23.7225 30.4719 22.7594C29.7253 21.7963 28.6799 21.1084 27.5 20.8037' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23.375 28.875V26.125C23.375 24.6663 22.7955 23.2674 21.7641 22.2359C20.7326 21.2045 19.3337 20.625 17.875 20.625H6.875C5.41631 20.625 4.01736 21.2045 2.98591 22.2359C1.95446 23.2674 1.375 24.6663 1.375 26.125V28.875' fill='white'/%3E%3Cpath d='M23.375 28.875V26.125C23.375 24.6663 22.7955 23.2674 21.7641 22.2359C20.7326 21.2045 19.3337 20.625 17.875 20.625H6.875C5.41631 20.625 4.01736 21.2045 2.98591 22.2359C1.95446 23.2674 1.375 24.6663 1.375 26.125V28.875H23.375Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 4.30371C23.1831 4.60662 24.2317 5.29467 24.9805 6.25939C25.7293 7.2241 26.1358 8.4106 26.1358 9.63184C26.1358 10.8531 25.7293 12.0396 24.9805 13.0043C24.2317 13.969 23.1831 14.657 22 14.96' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.375 15.125C15.4126 15.125 17.875 12.6626 17.875 9.625C17.875 6.58743 15.4126 4.125 12.375 4.125C9.33743 4.125 6.875 6.58743 6.875 9.625C6.875 12.6626 9.33743 15.125 12.375 15.125Z' fill='white' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.dark-theme .profile-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9861 0C8.93824 0 0 8.93824 0 19.9861C0 26.0375 2.69257 31.4504 6.93962 35.1145C6.94068 35.1086 6.94175 35.1026 6.94281 35.0967C6.94177 35.1026 6.94073 35.1086 6.9397 35.1145C10.4373 38.1402 14.9897 39.9722 19.9862 39.9722C24.9827 39.9722 29.5351 38.1402 33.0327 35.1145C32.0361 29.4068 27.7315 25.6396 23.1196 24.4462C27.7323 25.6396 32.0411 29.4068 33.0604 35.1145C37.3074 31.4504 40 26.0375 40 19.9861C39.9722 8.93824 31.034 0 19.9861 0ZM19.9966 24.0389C24.4054 24.0332 27.9528 20.4545 27.9528 16.0444C27.9528 15.918 27.9499 15.7922 27.944 15.6672C27.7539 11.5892 24.4979 8.31252 20.4285 8.08978C24.5093 8.3127 27.7541 11.601 27.944 15.6672C27.9498 15.7922 27.9528 15.918 27.9528 16.0444C27.9528 20.4443 24.386 24.0111 19.9861 24.0111C15.5929 24.0111 12.0302 20.4551 12.0194 16.0644L12.0194 16.0722C12.0194 20.4546 15.5669 24.0332 19.9757 24.0389C19.9792 24.0388 19.9827 24.0388 19.9862 24.0388C19.9897 24.0388 19.9932 24.0388 19.9966 24.0389ZM16.8599 8.71447C17.6802 8.36418 18.5712 8.14755 19.5055 8.09195C18.5703 8.1475 17.6795 8.36413 16.8599 8.71447ZM19.9861 22.0111C23.2814 22.0111 25.9528 19.3397 25.9528 16.0444C25.9528 12.7491 23.2814 10.0777 19.9861 10.0777C16.6908 10.0777 14.0194 12.7491 14.0194 16.0444C14.0194 19.3397 16.6908 22.0111 19.9861 22.0111ZM19.9862 37.9722C15.9122 37.9722 12.1706 36.621 9.16174 34.3418C10.6225 29.0919 15.5187 26.0388 19.9862 26.0388C24.4537 26.0388 29.3499 29.0919 30.8106 34.3418C27.8018 36.621 24.0601 37.9722 19.9862 37.9722Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.dark-theme .settings-icon {
    width: 67px;
}

.dark-theme .settings-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='19' height='34' viewBox='0 0 19 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 10.65C11.425 10.65 13 9.15375 13 7.325C13 5.49625 11.425 4 9.5 4C7.575 4 6 5.49625 6 7.325C6 9.15375 7.575 10.65 9.5 10.65ZM9.5 13.975C7.575 13.975 6 15.4712 6 17.3C6 19.1287 7.575 20.625 9.5 20.625C11.425 20.625 13 19.1287 13 17.3C13 15.4712 11.425 13.975 9.5 13.975ZM9.5 23.95C7.575 23.95 6 25.4462 6 27.275C6 29.1037 7.575 30.6 9.5 30.6C11.425 30.6 13 29.1037 13 27.275C13 25.4462 11.425 23.95 9.5 23.95Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.dark-theme .settings-icon[aria-expanded="true"] {
    content: url("data:image/svg+xml,%3Csvg width='37' height='37' viewBox='0 0 37 37' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M27.75 9.25L9.25 27.75' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.25 9.25L27.75 27.75' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.dark-theme .settings-menu-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.7 6.29974C14.5168 6.48666 14.4141 6.73798 14.4141 6.99974C14.4141 7.26149 14.5168 7.51281 14.7 7.69974L16.3 9.29974C16.4869 9.48296 16.7382 9.58559 17 9.58559C17.2617 9.58559 17.513 9.48296 17.7 9.29974L21.47 5.52974C21.9728 6.64092 22.1251 7.87897 21.9064 9.07888C21.6878 10.2788 21.1087 11.3836 20.2463 12.246C19.3838 13.1084 18.279 13.6876 17.0791 13.9062C15.8792 14.1248 14.6412 13.9726 13.53 13.4697L6.61998 20.3797C6.22215 20.7776 5.68259 21.0011 5.11998 21.0011C4.55737 21.0011 4.0178 20.7776 3.61998 20.3797C3.22215 19.9819 2.99866 19.4423 2.99866 18.8797C2.99866 18.3171 3.22215 17.7776 3.61998 17.3797L10.53 10.4697C10.0271 9.35855 9.87489 8.1205 10.0935 6.92059C10.3121 5.72068 10.8913 4.61589 11.7537 3.75346C12.6161 2.89102 13.7209 2.3119 14.9208 2.09328C16.1207 1.87465 17.3588 2.0269 18.47 2.52974L14.71 6.28974L14.7 6.29974Z' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.dark-theme .logout-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.36 6.63965C19.6184 7.89844 20.4753 9.50209 20.8223 11.2478C21.1693 12.9936 20.9909 14.803 20.3096 16.4474C19.6284 18.0918 18.4748 19.4972 16.9948 20.486C15.5148 21.4748 13.7749 22.0026 11.995 22.0026C10.2151 22.0026 8.47515 21.4748 6.99517 20.486C5.51519 19.4972 4.36164 18.0918 3.68036 16.4474C2.99909 14.803 2.82069 12.9936 3.16772 11.2478C3.51475 9.50209 4.37162 7.89844 5.63 6.63965' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 2V12' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.light-theme .journey-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41663 8.49967V31.1663L11.3333 25.4997L22.6666 31.1663L32.5833 25.4997V2.83301L22.6666 8.49967L11.3333 2.83301L1.41663 8.49967Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6666 8.5V31.1667' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.3334 2.83301V25.4997' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.light-theme .results-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='25' height='23' viewBox='0 0 25 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.375 23H15.625V0H9.375V23ZM0 23H6.25V11.5H0V23ZM18.75 7.1875V23H25V7.1875H18.75Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.light-theme .community-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.625 28.875V26.125C31.6241 24.9063 31.2185 23.7225 30.4719 22.7594C29.7253 21.7963 28.6799 21.1084 27.5 20.8037' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23.375 28.875V26.125C23.375 24.6663 22.7955 23.2674 21.7641 22.2359C20.7326 21.2045 19.3337 20.625 17.875 20.625H6.875C5.41631 20.625 4.01736 21.2045 2.98591 22.2359C1.95446 23.2674 1.375 24.6663 1.375 26.125V28.875' fill='black'/%3E%3Cpath d='M23.375 28.875V26.125C23.375 24.6663 22.7955 23.2674 21.7641 22.2359C20.7326 21.2045 19.3337 20.625 17.875 20.625H6.875C5.41631 20.625 4.01736 21.2045 2.98591 22.2359C1.95446 23.2674 1.375 24.6663 1.375 26.125V28.875H23.375Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 4.30371C23.1831 4.60662 24.2317 5.29467 24.9805 6.25939C25.7293 7.2241 26.1358 8.4106 26.1358 9.63184C26.1358 10.8531 25.7293 12.0396 24.9805 13.0043C24.2317 13.969 23.1831 14.657 22 14.96' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.375 15.125C15.4126 15.125 17.875 12.6626 17.875 9.625C17.875 6.58743 15.4126 4.125 12.375 4.125C9.33743 4.125 6.875 6.58743 6.875 9.625C6.875 12.6626 9.33743 15.125 12.375 15.125Z' fill='black' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.light-theme .profile-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9861 0C8.93824 0 0 8.93824 0 19.9861C0 26.0375 2.69257 31.4504 6.93962 35.1145C6.94068 35.1086 6.94175 35.1026 6.94281 35.0967C6.94177 35.1026 6.94073 35.1086 6.9397 35.1145C10.4373 38.1402 14.9897 39.9722 19.9862 39.9722C24.9827 39.9722 29.5351 38.1402 33.0327 35.1145C32.0361 29.4068 27.7315 25.6396 23.1196 24.4462C27.7323 25.6396 32.0411 29.4068 33.0604 35.1145C37.3074 31.4504 40 26.0375 40 19.9861C39.9722 8.93824 31.034 0 19.9861 0ZM19.9966 24.0389C24.4054 24.0332 27.9528 20.4545 27.9528 16.0444C27.9528 15.918 27.9499 15.7922 27.944 15.6672C27.7539 11.5892 24.4979 8.31252 20.4285 8.08978C24.5093 8.3127 27.7541 11.601 27.944 15.6672C27.9498 15.7922 27.9528 15.918 27.9528 16.0444C27.9528 20.4443 24.386 24.0111 19.9861 24.0111C15.5929 24.0111 12.0302 20.4551 12.0194 16.0644L12.0194 16.0722C12.0194 20.4546 15.5669 24.0332 19.9757 24.0389C19.9792 24.0388 19.9827 24.0388 19.9862 24.0388C19.9897 24.0388 19.9932 24.0388 19.9966 24.0389ZM16.8599 8.71447C17.6802 8.36418 18.5712 8.14755 19.5055 8.09195C18.5703 8.1475 17.6795 8.36413 16.8599 8.71447ZM19.9861 22.0111C23.2814 22.0111 25.9528 19.3397 25.9528 16.0444C25.9528 12.7491 23.2814 10.0777 19.9861 10.0777C16.6908 10.0777 14.0194 12.7491 14.0194 16.0444C14.0194 19.3397 16.6908 22.0111 19.9861 22.0111ZM19.9862 37.9722C15.9122 37.9722 12.1706 36.621 9.16174 34.3418C10.6225 29.0919 15.5187 26.0388 19.9862 26.0388C24.4537 26.0388 29.3499 29.0919 30.8106 34.3418C27.8018 36.621 24.0601 37.9722 19.9862 37.9722Z' fill='black'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.light-theme .settings-icon:before {
    content: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5002 7.49989C20.1949 7.81143 20.0238 8.2303 20.0238 8.66655C20.0238 9.10281 20.1949 9.52167 20.5002 9.83322L23.1669 12.4999C23.4785 12.8053 23.8973 12.9763 24.3336 12.9763C24.7698 12.9763 25.1887 12.8053 25.5003 12.4999L31.7836 6.21655C32.6216 8.06853 32.8754 10.1319 32.511 12.1318C32.1466 14.1316 31.1814 15.973 29.744 17.4103C28.3067 18.8477 26.4653 19.8129 24.4655 20.1773C22.4656 20.5417 20.4022 20.2879 18.5502 19.4499L7.03358 30.9665C6.37054 31.6296 5.47126 32.0021 4.53358 32.0021C3.5959 32.0021 2.69662 31.6296 2.03358 30.9665C1.37054 30.3035 0.998047 29.4042 0.998047 28.4665C0.998047 27.5289 1.37054 26.6296 2.03358 25.9665L13.5502 14.4499C12.7122 12.5979 12.4584 10.5345 12.8228 8.53464C13.1872 6.53479 14.1524 4.69348 15.5898 3.25609C17.0272 1.8187 18.8685 0.8535 20.8683 0.489122C22.8682 0.124744 24.9316 0.378493 26.7836 1.21655L20.5169 7.48322L20.5002 7.49989Z' fill='black'/%3E%3C/svg%3E");
    width: 34px;
    height: 34px;
}

.journey-icon.active:before {
    content: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.41663 8.49967V31.1663L11.3333 25.4997L22.6666 31.1663L32.5833 25.4997V2.83301L22.6666 8.49967L11.3333 2.83301L1.41663 8.49967Z' stroke='%23008CF9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22.6666 8.5V31.1667' stroke='%23008CF9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.3334 2.83301V25.4997' stroke='%23008CF9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.results-icon.active:before {
    content: url("data:image/svg+xml,%3Csvg width='25' height='23' viewBox='0 0 25 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.375 23H15.625V0H9.375V23ZM0 23H6.25V11.5H0V23ZM18.75 7.1875V23H25V7.1875H18.75Z' fill='%23008CF9'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.community-icon.active:before {
    content: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.625 28.875V26.125C31.6241 24.9063 31.2185 23.7225 30.4719 22.7594C29.7253 21.7963 28.6799 21.1084 27.5 20.8037' stroke='%23008CF9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M23.375 28.875V26.125C23.375 24.6663 22.7955 23.2674 21.7641 22.2359C20.7326 21.2045 19.3337 20.625 17.875 20.625H6.875C5.41631 20.625 4.01736 21.2045 2.98591 22.2359C1.95446 23.2674 1.375 24.6663 1.375 26.125V28.875' fill='%23008CF9'/%3E%3Cpath d='M23.375 28.875V26.125C23.375 24.6663 22.7955 23.2674 21.7641 22.2359C20.7326 21.2045 19.3337 20.625 17.875 20.625H6.875C5.41631 20.625 4.01736 21.2045 2.98591 22.2359C1.95446 23.2674 1.375 24.6663 1.375 26.125V28.875H23.375Z' stroke='%23008CF9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 4.30371C23.1831 4.60662 24.2317 5.29467 24.9805 6.25939C25.7293 7.2241 26.1358 8.4106 26.1358 9.63184C26.1358 10.8531 25.7293 12.0396 24.9805 13.0043C24.2317 13.969 23.1831 14.657 22 14.96' stroke='%23008CF9' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.375 15.125C15.4126 15.125 17.875 12.6626 17.875 9.625C17.875 6.58743 15.4126 4.125 12.375 4.125C9.33743 4.125 6.875 6.58743 6.875 9.625C6.875 12.6626 9.33743 15.125 12.375 15.125Z' fill='%23008CF9' stroke='%23008CF9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.profile-icon.active:before {
    content: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.9861 0C8.93824 0 0 8.93824 0 19.9861C0 26.0375 2.69257 31.4504 6.93962 35.1145C6.94068 35.1086 6.94175 35.1026 6.94281 35.0967C6.94177 35.1026 6.94073 35.1086 6.9397 35.1145C10.4373 38.1402 14.9897 39.9722 19.9862 39.9722C24.9827 39.9722 29.5351 38.1402 33.0327 35.1145C32.0361 29.4068 27.7315 25.6396 23.1196 24.4462C27.7323 25.6396 32.0411 29.4068 33.0604 35.1145C37.3074 31.4504 40 26.0375 40 19.9861C39.9722 8.93824 31.034 0 19.9861 0ZM19.9966 24.0389C24.4054 24.0332 27.9528 20.4545 27.9528 16.0444C27.9528 15.918 27.9499 15.7922 27.944 15.6672C27.7539 11.5892 24.4979 8.31252 20.4285 8.08978C24.5093 8.3127 27.7541 11.601 27.944 15.6672C27.9498 15.7922 27.9528 15.918 27.9528 16.0444C27.9528 20.4443 24.386 24.0111 19.9861 24.0111C15.5929 24.0111 12.0302 20.4551 12.0194 16.0644L12.0194 16.0722C12.0194 20.4546 15.5669 24.0332 19.9757 24.0389C19.9792 24.0388 19.9827 24.0388 19.9862 24.0388C19.9897 24.0388 19.9932 24.0388 19.9966 24.0389ZM16.8599 8.71447C17.6802 8.36418 18.5712 8.14755 19.5055 8.09195C18.5703 8.1475 17.6795 8.36413 16.8599 8.71447ZM19.9861 22.0111C23.2814 22.0111 25.9528 19.3397 25.9528 16.0444C25.9528 12.7491 23.2814 10.0777 19.9861 10.0777C16.6908 10.0777 14.0194 12.7491 14.0194 16.0444C14.0194 19.3397 16.6908 22.0111 19.9861 22.0111ZM19.9862 37.9722C15.9122 37.9722 12.1706 36.621 9.16174 34.3418C10.6225 29.0919 15.5187 26.0388 19.9862 26.0388C24.4537 26.0388 29.3499 29.0919 30.8106 34.3418C27.8018 36.621 24.0601 37.9722 19.9862 37.9722Z' fill='%23008CF9'/%3E%3C/svg%3E%0A");
    width: 34px;
    height: 34px;
}

.dashboard-header-tasks-container {
    border-top: var(--border-color) solid var(--border-width);
}

.dashboard-header-task {
    border-bottom: var(--border-width) solid var(--border-color);
}

.dashboard-header-task:last-child {
    border-bottom: none;
}

.dashboard-header-task-true {
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='15.625' fill='black' stroke='black' stroke-width='0.75'/%3E%3Cpath d='M24 10L13 21L8 16' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.dashboard-header-task-false {
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='16' cy='16' r='15.625' stroke='black' stroke-width='0.75'/%3E%3C/svg%3E%0A");
}

.journey-status-icon {
    top: 1.5rem;
    right: 1.5rem;
    width: 105px;
    height: 105px;
    object-fit: cover;
    border-radius: 50%;
}

.journey-course-image {
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 200px;
}

.journey-course-collapse {
    cursor: pointer;
    width: 22px;
    height: 12px;
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='12' viewBox='0 0 22 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L11 11L21 1' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.journey-course-expand {
    cursor: pointer;
    width: 22px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='22' height='12' viewBox='0 0 22 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L11 11L21 1' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.settings-course-collapse {
    cursor: pointer;
    width: 22px;
    height: 12px;
    right: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='34' viewBox='0 0 19 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 10.65C11.425 10.65 13 9.15375 13 7.325C13 5.49625 11.425 4 9.5 4C7.575 4 6 5.49625 6 7.325C6 9.15375 7.575 10.65 9.5 10.65ZM9.5 13.975C7.575 13.975 6 15.4712 6 17.3C6 19.1287 7.575 20.625 9.5 20.625C11.425 20.625 13 19.1287 13 17.3C13 15.4712 11.425 13.975 9.5 13.975ZM9.5 23.95C7.575 23.95 6 25.4462 6 27.275C6 29.1037 7.575 30.6 9.5 30.6C11.425 30.6 13 29.1037 13 27.275C13 25.4462 11.425 23.95 9.5 23.95Z' fill='white'/%3E%3C/svg%3E%0A");
}

.badge {
    padding: .5rem 1rem;
    border-radius: 35px;
    text-transform: uppercase;
}

.badge-primary {
    background: #008cf94d;
    color: var(--black);
}

.profile-header {
    border-bottom: var(--border-color) solid var(--border-width);
}

.search-result {
    background: var(--primary-bg-color);
    border-bottom: var(--border-color) solid var(--border-width);
}

.search-result a {
    display: flex;
    align-items: center;
}

.search-result-detail {
    margin-left: 1rem;
}

.search-result-actions {
    display: flex;
    text-align: center;
}

.search-result-actions a {
    display: block;
}

.profile-img-pickup {
    cursor: pointer;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-img-empty {
    content: url("data:image/svg+xml,%3Csvg width='204' height='204' viewBox='0 0 204 204' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='102' cy='102' r='102' fill='%23C4C4C4'/%3E%3Ccircle cx='102' cy='102' r='102' fill='black' fill-opacity='0.2'/%3E%3Cpath d='M112.684 85.4855C113.194 84.9752 113.8 84.5704 114.467 84.2943C115.133 84.0181 115.848 83.876 116.57 83.876C117.291 83.876 118.006 84.0181 118.673 84.2943C119.339 84.5704 119.945 84.9752 120.455 85.4855C120.966 85.9958 121.37 86.6016 121.647 87.2683C121.923 87.935 122.065 88.6496 122.065 89.3712C122.065 90.0929 121.923 90.8074 121.647 91.4741C121.37 92.1409 120.966 92.7466 120.455 93.2569L94.2267 119.485L83.541 122.4L86.4553 111.714L112.684 85.4855Z' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.img-input-pickup {
    display: none;
}

.onboarding-final {
    padding-bottom: 75px;
}

.onboarding-final-img-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
}

.onboarding-final-img-container img {
    position: absolute;
}

.onboarding-final-img-container .ray {
    width: auto;
    height: 100%;
}

.profile-img, .onboarding-final-img-container .profile-pic {
    width: 105px;
    height: 105px;
    border-radius: 50%;
    bottom: 0;
    object-fit: cover;
}

.login-wrapper {
    height: 100%;
    margin-top: calc(-1 * var(--nav-height));
}

.login-img {
    height: 252px;
    width: 100%;
    object-fit: cover;
}

.pie-chart {
    border-radius: 50%;
    width: 300px;
    height: 0;
    padding-top: 300px;
    float: left;
    padding-right: 20px;
}

.red {
    --key-color: var(--red);
}

.green {
    --key-color: var(--green);
}

.blue {
    --key-color: var(--blue);
}

.purple {
    --key-color: var(--purple);
}

.pink {
    --key-color: var(--pink);
}

.yellow {
    --key-color: var(--yellow);
}

.dark-gray {
    --key-color: var(--dark-gray);
}

.orange {
    --key-color: var(--orange);
}

.chart-key {
    display: flex;
    align-items: center;
}

.chart-key:before {
    content: '';
    margin-right: 10px;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--key-color);
    display: inline-block;
}

.age-distribution {
    display: flex;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
}

.age-distribution-legend {
    width: 100%;
}

.age-name {
    /* width: calc(100% - 150px); */
    width: 100%;
}

.age-percent {
    /* width: 150px; */
    text-align: right;
}

.age-chart-container {
    width: 100%;
}

.age-chart {
    width: 100%;
    height: 60px;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    background: var(--key-color);
}

.gender-chart {
    width: 100%;
    height: 60px;
    display: flex;
}

.gender-chart-men, .gender-chart-women {
    border-radius: 35px;
    width: 50%;
    background: var(--key-color);
}

.fl-big-number {
    font-size: 59px;
}

.soi-number-container {
    /* padding: 2.5rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border: var(--green) solid var(--border-width);
    border-radius: 50%;
}

.soi-number {
    color: var(--green);
    font-size: 35px;
}

.fl-collapse[aria-expanded='false'] .btn-svg {
    transform: rotate(180deg);
}

/****************************************************  FLOWER MAP  ***************************************************/

.flower-graph-container {
    width: 100%;
}

.flower-map {
    width: 300px;
    height: 330px;
}

.flower-map-coordinates {
    margin: 20pt 15pt;
    width: 100%;
}

.flower-map-coordinates circle, .flower-map-coordinates line {
    animation: coordinates-animation 5s forwards;
    fill: transparent;
}

@keyframes flower-petal {
    0% {
        visibility: hidden;
    }
    100% {
        visibility: visible;
    }
}

@keyframes coordinates-animation {
    0% {
        stroke: transparent;
    }
    100% {
        stroke: white;
    }
}

.petal {
    transform-origin: center;
    visibility: hidden;
    animation-delay: 5s;
    animation: flower-petal 3s forwards;
    transform-origin: 167pt 168pt;
}

.flower-map-coordinates .petal-1 {
    fill: var(--red);
    animation-delay: 2s;
}

.flower-map-coordinates .petal-2 {
    fill: var(--green);
    animation-delay: 2.5s;
}

.flower-map-coordinates .petal-5 {
    fill: var(--purple);
    animation-delay: 3s;
}

.flower-map-coordinates .petal-6 {
    fill: var(--yellow);
    animation-delay: 3.5s;
}

.flower-map-coordinates .petal-3 {
    fill: var(--blue);
    animation-delay: 4s;
}

.flower-map-coordinates .petal-4 {
    fill: var(--pink);
    animation-delay: 4.5s;
}

/****************************************************  FLOWER MAP  ***************************************************/

/**************************************************** AUDIO PLAYER ***************************************************/

.audio-player {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transform-origin: top;
    position: absolute;
    /* position: fixed; */
}

.audio-player .icon {
    background-position: center;
    width: 30px;
    height: 30px;
    object-fit: contain;
    background-repeat: no-repeat;
}

.audio-player.paused .icon {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M29.6663 15.0006C29.6663 23.1008 23.0998 29.6673 14.9997 29.6673C6.8995 29.6673 0.333008 23.1008 0.333008 15.0006C0.333008 6.90047 6.8995 0.333984 14.9997 0.333984C23.0998 0.333984 29.6663 6.90047 29.6663 15.0006ZM12.333 10.7402L19.1506 15.0012L12.333 19.2622V10.7402Z' fill='%23008CF9'/%3E%3C/svg%3E%0A");
}

.audio-player.playing .icon {
    background-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.0002 29.6663C23.1003 29.6663 29.6668 23.0998 29.6668 14.9997C29.6668 6.8995 23.1003 0.333008 15.0002 0.333008C6.89999 0.333008 0.333496 6.8995 0.333496 14.9997C0.333496 23.0998 6.89999 29.6663 15.0002 29.6663ZM12.0001 10.9997H14.0001V18.9997H12.0001V10.9997ZM18.0001 10.9997H16.0001V18.9997H18.0001V10.9997Z' fill='%23FF341C'/%3E%3C/svg%3E%0A");
}

.audio-player .label {
    width: 30px;
    height: 55px;
    background-repeat: no-repeat;
    background-position: center top 10px;
}

.audio-player.paused .label {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='43' viewBox='0 0 10 43' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.088 41.7227L0.599999 41.7227L0.599999 42.7787L9 42.7787L9 37.2107L8.088 37.2107L8.088 41.7227ZM9 35.1137L9 34.0577L0.599999 34.0577L0.599999 35.1137L9 35.1137ZM9.084 28.5417C9.084 26.7777 8.124 25.3977 6.552 25.3977C5.292 25.3977 4.62 26.0697 4.356 27.4257L3.936 29.5137C3.756 30.3657 3.396 30.7137 2.664 30.7137C1.788 30.7137 1.32 29.8497 1.32 28.6857C1.32 27.5937 1.788 26.8377 2.796 26.6337L2.796 25.6257C1.308 25.8297 0.515999 26.9457 0.515999 28.6617C0.515999 30.2937 1.26 31.7457 2.724 31.7457C3.924 31.7457 4.512 31.0857 4.764 29.8257L5.172 27.8337C5.364 26.8857 5.832 26.4297 6.672 26.4297C7.632 26.4297 8.268 27.2937 8.268 28.5297C8.268 29.8257 7.692 30.6297 6.588 30.9057L6.588 31.9137C8.208 31.6377 9.084 30.3897 9.084 28.5417ZM0.599998 17.3839L0.599999 23.9959L1.512 23.9959L1.512 21.2119L9 21.2119L9 20.1559L1.512 20.1559L1.512 17.3839L0.599998 17.3839ZM8.112 14.373L5.112 14.373L5.112 10.041L4.224 10.041L4.224 14.373L1.488 14.373L1.488 9.51303L0.599998 9.51303L0.599998 15.429L9 15.429L9 9.42903L8.112 9.42903L8.112 14.373ZM0.599998 1.00728L8.532 1.00728L0.599998 5.60328L0.599998 7.35528L9 7.35528L9 6.34728L1.08 6.34728L9 1.76328L9 -0.000719551L0.599998 -0.000719184L0.599998 1.00728Z' fill='%23008CF9'/%3E%3C/svg%3E%0A");
}

.audio-player.playing .label {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='41' viewBox='0 0 10 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.599999 36.8407L0.599999 40.3807L9 40.3807L9 39.3247L5.556 39.3247L5.556 36.8407C5.556 35.1967 4.596 33.9127 3.06 33.9127C1.572 33.9127 0.599999 35.1487 0.599999 36.8407ZM4.692 36.9007L4.692 39.3247L1.452 39.3247L1.452 36.9007C1.452 35.7847 2.076 34.9567 3.06 34.9567C4.044 34.9567 4.692 35.7607 4.692 36.9007ZM9 26.819L9 25.727L0.599999 28.859L0.599999 30.443L9 33.575L9 32.483L6.864 31.727L6.864 27.575L9 26.819ZM5.976 31.415L0.995999 29.651L5.976 27.887L5.976 31.415ZM5.748 24.0815C7.812 24.0815 9.084 22.7615 9.084 20.6975C9.084 18.6695 7.836 17.3015 5.748 17.3015L0.599998 17.3015L0.599998 18.3575L5.724 18.3575C7.26 18.3575 8.172 19.2695 8.172 20.6975C8.172 22.1255 7.284 23.0255 5.724 23.0255L0.599999 23.0255L0.599999 24.0815L5.748 24.0815ZM9.084 11.8707C9.084 10.1067 8.124 8.72672 6.552 8.72672C5.292 8.72672 4.62 9.39872 4.356 10.7547L3.936 12.8427C3.756 13.6947 3.396 14.0427 2.664 14.0427C1.788 14.0427 1.32 13.1787 1.32 12.0147C1.32 10.9227 1.788 10.1667 2.796 9.96272L2.796 8.95472C1.308 9.15872 0.515998 10.2747 0.515998 11.9907C0.515999 13.6227 1.26 15.0747 2.724 15.0747C3.924 15.0747 4.512 14.4147 4.764 13.1547L5.172 11.1627C5.364 10.2147 5.832 9.75872 6.672 9.75872C7.632 9.75872 8.268 10.6227 8.268 11.8587C8.268 13.1547 7.692 13.9587 6.588 14.2347L6.588 15.2427C8.208 14.9667 9.084 13.7187 9.084 11.8707ZM8.112 5.52975L5.112 5.52975L5.112 1.19775L4.224 1.19775L4.224 5.52975L1.488 5.52975L1.488 0.66975L0.599998 0.66975L0.599998 6.58575L9 6.58575L9 0.585749L8.112 0.585749L8.112 5.52975Z' fill='%23FF341C'/%3E%3C/svg%3E%0A");
}

/**************************************************** AUDIO PLAYER ***************************************************/

/***************************************************** MEDITATION ****************************************************/

.meditation-container {
    min-height: calc(100vh - (var(--nav-height) + var(--footer-height)));
}

.meditation-intro {
    visibility: hidden;
    opacity: 0;
    animation: 2s fadeIn;
    animation-fill-mode: forwards;
}

.meditation-exercise {
    opacity: 0;
    animation: 2s fadeIn;
    animation-fill-mode: forwards;
    animation-delay: 2s;
}

.meditation-animation {
    position: relative;
    width: 300px;
    height: 240px;
    margin-top: 3rem;
    --meditation-delay: 4s;
    --meditation-round-duration: 8s;
    --meditation-round-count: 3;
}

.meditation-animation:after {
    background-image: url("data:image/svg+xml,%3Csvg width='35' height='36' viewBox='0 0 35 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.2197 0.24714L16.0183 8.95194C15.4844 12.8513 12.4943 15.9268 8.70328 16.476L0.240275 17.7117C-0.0800915 17.7666 -0.0800915 18.2334 0.240275 18.2883L8.70328 19.524C12.4943 20.0732 15.4844 23.1487 16.0183 27.0481L17.2197 35.7529C17.2731 36.0824 17.7269 36.0824 17.7803 35.7529L18.9817 27.0481C19.5156 23.1487 22.5057 20.0732 26.2967 19.524L34.7597 18.2883C35.0801 18.2334 35.0801 17.7666 34.7597 17.7117L26.2967 16.476C22.5057 15.9268 19.5156 12.8513 18.9817 8.95194L17.7803 0.24714C17.7269 -0.0823799 17.2731 -0.0823799 17.2197 0.24714Z' fill='white'/%3E%3C/svg%3E%0A");
    content: '';
    position: absolute;
    top: -17px;
    left: calc(50% - 17.5px);
    position: absolute;
    width: 35px;
    height: 35px;
}

.meditation-animation-step {
    position: absolute;
    top: 20px;
    left: 50px;
    right: 50px;
    width: 200px;
    height: 200px;
    background-color: var(--black);
    border-radius: 50%;
    animation: meditation-step var(--meditation-round-duration) linear var(--meditation-round-count);
    animation-delay: var(--meditation-delay);
}

.meditation-animation-step-content {
    top: 0;
    width: 300px;
    height: 240px;
    left: 0;
    position: absolute;
    color: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
}

.inhale, .exhale {
    opacity: 0;
}

.inhale {
    animation: meditation-content-inhale var(--meditation-round-duration) linear var(--meditation-round-count);
    animation-delay: var(--meditation-delay);
}

.exhale {
    animation: meditation-content-exhale var(--meditation-round-duration) linear var(--meditation-round-count);
    animation-delay: var(--meditation-delay);
}

.orbit {
    margin: auto;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    transition: border 3s;
    animation: spin var(--meditation-round-duration) linear var(--meditation-round-count);
    animation-delay: var(--meditation-delay);
}

.meditation-animation:before {
    content: '';
    position: absolute;
    margin: auto;
    width: 240px;
    height: 240px;
    left: 30px;
    border-radius: 50%;
    border: 1px solid var(--gray);
}

.spinner {
    width: 26px;
    height: 26px;
    background: var(--purple);
    border-radius: 50%;
    transform: translate(107px, -13px);
}

.rounded-number {
    border-radius: 50%;
    width: 106px;
    height: 116px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--green);
    color: (var(--green));
    text-align: center;
    font: 32px Arial, sans-serif;
}

.footnoteLow {
    font-weight: normal;
    font-size: 11px;
    line-height: 15px;
    letter-spacing: 0.04em;
    text-transform: lowercase;
}

@keyframes fadeIn {
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}

@keyframes spin {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes meditation-content {
    0% {
        content: 'INHALE';
    }
    49% {
        content: 'INHALE';
    }
    50% {
        content: 'EXHALE';
    }
    99% {
        content: 'EXHALE';
    }
}

@keyframes meditation-content-inhale {
    0% {
        opacity: 1;
    }
    49% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    99% {
        opacity: 0;
    }
}

@keyframes meditation-content-exhale {
    0% {
        opacity: 0;
    }
    49% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    99% {
        opacity: 1;
    }
}

@keyframes meditation-step {
    0% {
        transform: scale(50%, 50%);
        -webkit-transform: scale(0.5, 0.5);
        -moz-transform: scale(50%, 50%);
        -ms-transform: scale(50%, 50%);
        -o-transform: scale(50%, 50%);
        background-color: var(--green);
    }
    49% {
        background-color: var(--green);
    }
    50% {
        /* transform: scale(100%); */
        transform: scale(100%, 100%);
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(100%, 100%);
        -ms-transform: scale(100%, 100%);
        -o-transform: scale(100%, 100%);
        background-color: var(--blue);
    }
    99% {
        background-color: var(--blue);
    }
    100% {
        transform: scale(50%, 50%);
        -webkit-transform: scale(0.5, 0.5);
        -moz-transform: scale(50%, 50%);
        -ms-transform: scale(50%, 50%);
        -o-transform: scale(50%, 50%);
    }
}

/***************************************************** MEDITATION ****************************************************/

@media (min-width: 768px) {
    body {
        font-size: 16px;
        line-height: 18px;
    }
    h1, .h1 {
        font-size: 40px;
        line-height: 43px;
    }
    h2, .h2 {
        font-size: 32px;
        line-height: 36px;
    }
    h3, .h3 {
        font-size: 22px;
        line-height: 26px;
    }
    .subtitle {
        font-size: 22px;
        line-height: 26px;
    }
    .text-xlarge {
        font-size: 22px;
        line-height: 26px;
    }
    .text-large {
        font-size: 18px;
        line-height: 24px;
    }
    .text-btn, .btn {
        font-size: 14px;
        line-height: 18px;
    }
    .footnote {
        font-size: 12px;
        line-height: 15px;
    }
    .overview, .intro {
        width: 90vw;
    }
    .section-content ul {
        width: 70%;
        margin-left: 30%;
        position: relative;
        right: calc(-1 * (10vw + 15px));
    }
    .section-content ul li {
        margin: 0;
        border-right: none;
    }
    .section-content .quote-container {
        position: relative;
        margin-right: calc(-10vw - 15px);
    }
    .topic-wrapper {
        display: flex;
        flex-direction: column;
    }
    .topic-featured-img {
        width: 100%;
        border-bottom: var(--border-width) solid var(--border-color);
    }
    .df-topic {
        width: 100%;
    }
    .flower-map {
        width: 500px;
        height: 550px;
    }
    .flower-map-coordinates {
        margin: 40pt 28pt;
    }
    .journey-course-image {
        height: 400px;
    }
    .journey-course-image-collapsed {
        height: auto;
    }
    .search-result {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .search-result a {
        display: flex;
        align-items: center;
    }
    .search-result-actions {
        display: block;
        margin-left: 1rem;
        width: 200px;
    }
    .search-result-actions a {
        display: block;
    }
    .login-img {
        height: 400px;
    }
    .onboarding-countdown {
        max-height: 510px;
    }
    .onboarding-activities {
        height: 500px;
    }
    .onboarding-activities img {
        width: 50%;
    }
    .onboarding-assessment {
        position: absolute;
        top: 150px;
        left: 80px;
    }
    .profile-img, .onboarding-final-img-container .profile-pic {
        width: 150px;
        height: 150px;
    }
    .soi-number-container {
        width: 150px;
        height: 150px;
    }
    .soi-number {
        font-size: 65px;
    }
    .age-distribution {
        display: flex;
        align-items: center;
        flex-direction: row;
        padding-left: 15px;
        padding-right: 15px;
        margin-left: 15px;
        margin-right: 15px;
    }
    .age-distribution-legend {
        width: 50%;
    }
    .age-name {
        width: calc(100% - 150px);
    }
    .age-percent {
        width: 150px;
        text-align: center;
    }
    .age-chart-container {
        width: 50%;
    }
}

@media (min-width: 992px) {
    :root {
        --nav-height: 60px;
    }
    body {
        font-size: 18px;
        line-height: 22px;
    }
    h1, .h1 {
        font-size: 52px;
        line-height: 56px;
    }
    h2, .h2 {
        font-size: 38px;
        line-height: 42px;
    }
    h3, .h3 {
        font-size: 26px;
        line-height: 30px;
    }
    .subtitle {
        font-size: 22px;
        line-height: 28px;
    }
    .text-xlarge {
        font-size: 24px;
        line-height: 31px;
    }
    .text-large {
        font-size: 20px;
        line-height: 26px;
    }
    .text-btn, .btn {
        font-size: 16px;
        line-height: 18px;
    }
    .footnote {
        font-size: 16px;
        line-height: 18px;
    }
    .three-dots-menu {
        width: 375px;
        right: 0;
        margin-left: calc(100% - 375px);
    }
    .audio-player {
        transform: scale(1.2);
    }
    .overview, .intro {
        width: 50%;
        border-right: var(--border-width) solid var(--border-color);
    }
    .topic-wrapper {
        display: flex;
        flex-direction: row;
    }
    .topic-featured-img {
        width: 50%;
        height: auto;
        object-fit: cover;
        max-height: calc(100vh - ( var(--nav-height) + var(--nav-progress-height) + var(--footer-height)));
        box-sizing: content-box;
    }
    .df-topic {
        width: 50%;
        border-left: var(--border-width) solid var(--border-color);
    }
    .conclusion {
        width: 50%;
    }
    .conclusion.flower-graph-container {
        border-left: var(--border-width) solid var(--border-color);
    }
    .flower-map {
        width: 500px;
        height: 550px;
    }
    .flower-map-coordinates {
        margin: 40pt 28pt;
    }
    .featured-img {
        position: fixed;
        width: 50%;
        height: auto;
        top: var(--nav-height);
        object-fit: cover;
        max-height: calc(100vh - ( var(--nav-height) + var(--nav-progress-height) + var(--footer-height)));
        box-sizing: content-box;
        border-top: none;
    }
    .featured-img:not(.img-right) {
        left: 0;
        margin-left: 0;
    }
    .featured-img.img-right {
        right: 0;
    }
    .section-content ul {
        width: 80%;
        margin-left: 20%;
        right: -15px;
    }
    .section-content .quote-container {
        position: initial;
        margin-left: 15px;
        margin-right: -15px;
    }
    .topic-featured-img {
        background-size: 50% auto;
        background-repeat: no-repeat;
    }
    .right-division {
        margin-left: 50%;
        width: 50%;
    }
    .topic-img {
        position: absolute;
        width: 50%;
        height: auto;
        top: 0;
        left: 0;
    }
    .peb-images-text-container {
        display: flex;
        /* justify-content: space-between; */
    }
    .peb-image-text img {
        height: 200px;
        width: auto;
        object-fit: cover;
    }
    .peb-image-text .text-large {
        max-width: 450px;
    }
    .peb-assessment-option {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-content: center;
        max-width: 400px;
        border: var(--border-width) solid var(--border-color);
    }
    .peb-assessment-option img {
        width: 100%;
    }
    .peb-assessment-option.active {
        background-color: var(--secondary-bg-color);
        color: var(--secondary-font-color);
    }
    .meditation-feeling {
        border-top: var(--border-width) solid var(--border-color);
        border-bottom: var(--border-width) solid var(--border-color);
    }
    .meditation-feeling-questions .meditation-feeling-question {
        border-left: var(--border-width) solid var(--border-color);
        border-top: none;
        border-bottom: none;
    }
    .meditation-feeling-questions .meditation-feeling-question:last-child {
        border-right: var(--border-width) solid var(--border-color);
        border-bottom: none;
    }
    .dashboard-header {
        position: relative;
    }
    .dashboard-header::after {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        border-left: var(--border-width) solid var(--border-color);
        left: 50%;
        top: 0;
    }
    .dashboard-header-tasks-container {
        border: none;
    }
    .journey-course-collapse {
        right: 15px;
        top: 50%;
        background-repeat: no-repeat;
    }
    .journey-course-image {
        height: auto;
    }
    .profile {
        min-height: calc(100vh - (var(--nav-height) + var(--footer-height)));
    }
    .profile-detail {
        border-bottom: var(--border-color) solid var(--border-width);
    }
    .profile-header {
        border-right: var(--border-color) solid var(--border-width);
    }
    .search-results-wrapper {
        padding-left: 3rem;
        padding-right: 3rem;
        background: transparent;
    }
    .search-result {
        border-bottom: var(--border-color) solid var(--border-width);
        border-left: var(--border-color) solid var(--border-width);
        display: block;
    }
    .search-result a {
        display: block;
    }
    .search-result-detail {
        margin-left: 1rem;
    }
    .search-result-actions {
        margin: auto;
    }
    .search-result:nth-child(4n), .search-result:last-child {
        border-right: var(--border-color) solid var(--border-width);
    }
    .login-wrapper {
        height: 100%;
        margin-top: calc(-1 * var(--nav-height));
    }
    .login-img {
        height: calc(100vh - var(--footer-height));
        width: 50%;
        object-fit: cover;
    }
    .onboarding-countdown {
        max-height: 360px;
    }
    .onboarding-activities {
        height: 100%;
    }
    .onboarding-activities img {
        width: 100%;
    }
    .onboarding-assessment {
        top: 35%;
        left: 50%;
    }
    .profile-img, .onboarding-final-img-container .profile-pic {
        width: 200px;
        height: 200px;
    }
    .soi-assessment-option {
        width: 250px;
        height: 250px;
    }
    .fl-big-number {
        font-size: 72px;
    }
}