@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
@import url("range_input.07081f0a5c13.css");

body, html, input, textarea {
    font-family: 'Open Sans', sans-serif;
}

.dialog {
    box-shadow: 1rem 1rem 4rem rgba(0,0,0,0.4);
    border-radius: 0.5rem;
}

.dialog > h1 {
    border-radius: 0.5rem 0.5rem 0 0;
    background-color: var(--color-primary)!important;
    color: white;
}

.icon {
    filter: var(--icons-filter);
}

h1, h2, h3, h4 {
    font-weight: 700;
}

h5, h6 {
    font-weight: 500;
}

p {
    margin-bottom: 1rem;
    line-height: 1.35;
}

p a {
    color: var(--color-primary);
    text-decoration: underline;
}

p.error {
    color: red;
}

p.info {
    color: #888;
    font-size: small;
}

body {
    background-color:#f0f0f0;
    position:relative;
    min-height:100vh;
    background-size:100% auto;
    background-size:cover;
    background-attachment: fixed;
}

header {
    display: flex;
    justify-content: space-between;
    height: 6rem;
    align-items: center;
    padding: 0 1rem;
}

header > a {
    display: block;
    opacity: 0.8;
    cursor: pointer;
    transition: 0.1s;
}

header > a:hover {
    opacity: 1;
}

header .logo {
    display:inline-block;
    width:3rem;
    height:3rem;
    vertical-align:middle;
}

header h1 {
    margin:0 0.7rem;
    vertical-align:middle;
    display:inline-block;
    font-size:1.3rem;
    color:white;
    font-weight:500;
    color:var(--headings-color);
}

header div.current-user {
    font-size:90%;
}

header div.current-user a {
    color:#444;
}

header div.current-user a:hover {
    color:black;
}

header div.current-user a[role=logout] {
    margin-left:1rem;
    padding-left:1rem;
    border-left:1px solid rgba(0,0,0,0.1);
}

header div.current-user a img {
    opacity:0.4;
    transition:0.1s;
}

header div.current-user a:hover img {
    opacity:0.8;
}

footer {
    padding: 2rem 0;
    text-align:center;
    color:rgba(0, 0, 0, 0.4);
    width:100%;
    font-weight:100;
}

body > main > div.background-cover {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:100% auto;
    background-size:cover;
    background-position:50% 50%;
    z-index:-1;
}

#questionnaireModalBackground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(3px);
    background-color: rgba(0,0,0,0.3);
    z-index: 10;
}

/* Login form and password remind form */

body.auth > main {
    margin:0!important;
}

body.auth > footer {
    color:rgba(255, 255, 255, 0.3);
}

body.auth form p.error {
    text-align:center;
}

body.auth form {
    display:block;
    width:24rem;
    height:20rem;
    background-color:white;
    padding:2rem;
    max-width:calc(100% - 5rem);
    border-radius:4px;
    box-shadow:0.2rem 0.2rem 0.5rem rgba(0,0,0,0.2);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body.auth form h1 {
    margin-bottom:2rem;
    font-size:1.5rem;
    text-align:center;
}

body.auth form label {
    display:block;
    margin-bottom:0.5rem;
    text-align:center;
}

body.auth form label input {
    display:block;
    width:calc(100% - 3rem);
    margin:0 auto;
}

body.auth form label input.password-visibility-toggle {
    width:calc(100% - 4rem);
    display:inline-block;
}

body.auth form a.back-to-home {
    display:block;
    margin-top:3rem;
    text-align:center;
    color:#888;
    font-size:80%;
}

body.auth form #submit {
    padding:0.5rem 3rem;
    margin-top:1rem;
}

body.auth form input[type=button],
body.auth form input[type=submit] {
    display:block;
    margin:0 auto 0.3rem auto;
}

/* Dashboard */

body.app > main {
    width:100%;
    margin:3rem auto;
    max-width:1100px;
}

body.app > main > h1 {
    margin-bottom:2rem;
}

body.app main > section,
body.app main > #researchContainer section,
body.app main > div.sections-container section {
    padding:2rem;
    background-color:white;
    box-shadow: 2px 2px 0 #e7e7e7;
    box-sizing: border-box;
    border-radius:0.4rem;
    margin-bottom:2rem;
}

body.app > main section > h3 {
    font-size: 1.6rem;
}

/* Announcements */

#announcementsContainer {
    position:relative;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#announcementsContainer > .page-number {
    position:absolute;
    top: 1rem;
    right: 1rem;
    font-size:0.8rem;
    color:rgba(0,0,0,0.5);
}

#announcementsContainer > .pages-navigation {
    position:absolute;
    bottom: 1rem;
    right: 1rem;
}

#announcementsContainer > .pages-navigation .icon {
    cursor: pointer;
    transition: 0.1s;
    opacity:0.5;
}

#announcementsContainer > .pages-navigation .icon:hover {
    opacity:1;
}

#announcementsContainer > .pages-navigation .icon.disabled {
    cursor: default;
    opacity:0.15;
}

#announcementsContainer .announcement {
    margin-bottom: 1rem;
}

#announcementsContainer .announcement h3 {
    font-size: 1.1rem;
    margin-bottom: 0;
}

#announcementsContainer .announcement h3 > span {
    color: var(--color-primary);
}

#announcementsContainer .announcement h3 > span::before {
    content: "\2022";
    color: #ccc;
    display: inline-block;
    margin: 0 0.4rem;
}

#announcementsContainer .announcement .date {
    font-size: 0.9rem;
    color: rgba(0,0,0,0.5);
}

/* Modules */

section.module.locked {
    opacity: 0.5;
    pointer-events: none;
}

section.module .materials .material {
    display: block;
    background-color: var(--color-primary);
    color:white;
    margin-bottom:0.2rem;
    padding:1rem;
    cursor:pointer;
    position:relative;
    opacity:0.9;
    transition:0.1s;
}

section.module .materials .material.disabled,
section.module .materials .material.locked {
    cursor:default;
    background-color: #ccc;
    opacity: 1;
}

section.module .materials .material.not-available {
    background-color:#747474;
}

section.module .materials .material.finished {
    opacity: 0.65;
    filter: grayscale(0.2);
}

section.module .materials .material.locked {
    background-color:#ccc;
    opacity: 1;
}

section.module .materials .material:not(.disabled):hover {
    opacity:1;
}

section.module .materials .material h4 {
    color:white;
    font-size:1.2rem;
    margin-bottom:0.5rem;
}

section.module .materials .material.finished h4,
section.module .materials .material.locked h4 {
    margin-bottom: 0;
    font-size:1rem;
}

section.module .materials .material.locked h4:before {
    content: " ";
    display: inline-block;
    filter: invert();
    margin-right: 0.2rem;
    width: 1.2em;
    height: 1.2em;
    vertical-align: bottom;
    background-image: url("../../img/icons/lock.017559c2b5ab.svg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

section.module .materials .material p {
    margin-bottom:0;
    padding-bottom:0;
    width:calc(100% - 8rem);
    font-size:0.9rem;
    line-height:1.25;
}

section.module .materials .material p:empty {
    display:none;
}

section.module .materials .material p.description:empty {
    display: none;
}

section.module .materials .material p.description span:not(:last-child)::after {
    content: " \2022 ";
    color: #FFF;
    opacity: 0.5;
    margin: 0 0.3rem 0 0.1rem;
    text-align: center;
}

section.module .materials .material .call-to-action {
    padding:0.6rem 0.6rem;
    font-weight:600;
    position:absolute;
    top:50%;
    right:0.4rem;
    transform:translateY(-50%);
    opacity:0.8;
    transition:0.1s;
    cursor:inherit;
    background-color:transparent;
    box-shadow: none!important;
    border-style:none;
    font-size:1rem;
    color:white;
}

section.module .materials .material .call-to-action img {
    margin-left:0.5rem;
}

section.module .materials .material .call-to-action img {
    filter:invert();
}

section.module .materials .material .call-to-action:hover {
    opacity:1;
}

@keyframes expiringSoon {
    0% { transform: translateY(-50%) rotate(0deg); }
    5% { transform: translateY(-50%) rotate(3deg); }
    15% { transform: translateY(-50%) rotate(-3deg); }
    20% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(0deg); }
}

section.module .materials .material .call-to-action.expiring-soon {
    color:#ff753c;
    background-color:white;
    padding:0.8rem 1rem;
    margin-right: 1rem;
    animation: expiringSoon 2s infinite;
    animation-timing-function: ease-in-out;
}

section.module .materials .material .call-to-action.expiring-soon img {
    filter:none;
    filter: invert(36%) sepia(93%) saturate(6870%) hue-rotate(355deg) brightness(89%) contrast(131%);
}

section.module .materials .material div.progress-bar {
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0.5rem;
}

section.module .materials .material div.progress-bar .bar {
    position:absolute;
    height:0.5rem;
    width:50%;
    background-color:rgba(255, 255, 255, 0.4);
}

section.module .materials.cyclic-measurement-materials {
    display: flex;
    overflow: hidden;
}

section.module .materials.cyclic-measurement-materials .material {
    flex-grow: 1;
    height: 3rem;
    transition: none;
    margin-bottom: 0;
}

section.module .materials.cyclic-measurement-materials .material.previous-material {
    width: 12rem;
    flex-grow: 0;
    z-index: 10;
    filter: drop-shadow(0.3rem 0.3rem 0.8rem rgba(0, 0, 0, 0.3));
    transition: none;
    background-color: #aaa;
}

section.module .materials.cyclic-measurement-materials .material.finished {
    background-color: #88a788;
    opacity: 1;
}

section.module .materials.cyclic-measurement-materials .material.previous-material::after {
    content: " ";
    position: absolute;
    top: 0;
    right: calc(-1.9rem + 1px);
    width: 0;
    height: 0;
    border-top: 2.5rem solid transparent;
    border-bottom: 2.5rem solid transparent;
    border-left-width: 2.5rem;
    border-left-style: solid;
    border-left-color: #aaa;
    transform: scaleX(0.5);
}

section.module .materials.cyclic-measurement-materials .material.finished::after {
    border-left-color: #88a788;
}

section.module .materials.cyclic-measurement-materials .material.previous-material + .next-material {
    z-index: 9;
    padding-left: 3.5rem;
    transition: none;
}


/* Questionnaires */

body.questionnaire main {
    padding-bottom:8rem;
}

body.questionnaire .preview-notice {
    background-color: #f9d4b8;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

body.questionnaire .preview-notice h3 {
    font-size: 1.3rem;
}

body.questionnaire .preview-notice p {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.questionnaire-container > h3:first-child {
    color: var(--color-primary);;
    font-size:1.1rem;
    margin-bottom: 0.5rem;
}

.questionnaire-container.questionnaire-modal > h3:first-child {
    font-size: 1.4rem;
    margin-bottom: 2rem;
}

.questionnaire-container.questionnaire-modal > h3:first-child span:nth-of-type(1) {
    color: var(--color-primary);
}

.questionnaire-container.questionnaire-modal > h3:first-child span:nth-of-type(2) {
    color: #222;
}

.questionnaire-container.questionnaire-modal > h3:first-child span:nth-of-type(1):not(:empty) + span:not(:empty)::before {
    content: " \2192";
    color: #aaa;
    display: inline-block;
    margin: 0 0.3rem;
}

.questionnaire-container > h1 {
    font-size:1.8rem;
    margin-bottom: 1.5rem;
}

.questionnaire-container div.item {
    transition:0.3s;
    margin: -0.5rem -0.5rem 1.3rem -0.5rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.questionnaire-container div.item div.error {
    color:red;
    padding:0.5rem;
}

.questionnaire-container .end-buttons {
    display: block;
    margin-top:2rem;
    text-align:right;
}

.questionnaire-container .end-buttons [role=back]:not(.button-primary) {
    background-color: transparent;
    border-color: transparent;
}

.questionnaire-container .end-buttons [role=back]:hover {
    color: var(--color-primary);
}

.questionnaire-container .end-buttons [role=submit],
.questionnaire-container .end-buttons [role=next-page] {
    font-weight: bold;
}

.questionnaire-container div.item p.question {
    margin-bottom:0.2rem;
    padding-bottom:0;
    font-weight:600;
}

.questionnaire-container div.item p.description {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 0.3rem;
}

.questionnaire-container div.item div.answers .answer-container {
    display:block;
}

.questionnaire-container div.item div.answers .answer-container label {
    cursor: pointer;
    transition: 0.1s;
    padding: 0.5rem 0.8rem;
    display: block;
}

.questionnaire-container div.item div.answers .answer-container label:hover {
    background-color: #f4f4f4;

}

.questionnaire-container div.item div.answers.inline .answer-container {
    display: inline-block;
    margin-right:0.4rem;
}

.questionnaire-container div.item div.answers label input {
    margin-right:0.3rem;
    margin-left: 0;
}

.questionnaire-container div.item div.answers label input[type=radio],
.questionnaire-container div.item div.answers label input[type=checkbox] {
    cursor: pointer;
}

.questionnaire-container div.item div.answers input.answer-comment {
    transition: none;
    background-color:#f4f4f4;
    margin-left:2rem;
    max-width:24rem;
}

.questionnaire-container div.item.with-errors {
    background-color:#f0d1d1;
}

.questionnaire-container div.item.item-text .ce-block__content {
    max-width: none;
}

.questionnaire-container div.item.item-quiz {
    background-color: #f4f4f4;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    border-radius: 0.4rem;
}

.questionnaire-container div.item.item-quiz .question {
    text-align: center;
    margin-bottom: 0.8rem;
}

.questionnaire-container div.item.item-quiz .answers {
    text-align: center;
    margin-bottom: 0.6rem;
}

.questionnaire-container div.item.item-quiz .answers button {
    margin: 0.2rem;
}

.questionnaire-container div.item.item-quiz .answers button.wrong {
    color: white;
    background-color: #b6492e;
    transition: 0.4s;
}

.questionnaire-container div.item.item-quiz .answers button.correct {
    color: white;
    background-color: #4ca540;
    transition: 0.4s;
}

.questionnaire-container div.item.item-quiz .explanation {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.2;
    color: #444;
}

/* Items highlighting */

.questionnaire-container div.item.highlighting {
    padding: 2rem 2rem 2rem 5rem;
    border-radius: 1rem;
    background-color:#8f8f8f;
    color: white;
    position: relative;
}

.questionnaire-container div.item.highlighting::before {
    display: block;
    content: " ";
    position: absolute;
    top: 2.2rem;
    left: 2rem;
    width: 2rem;
    height: 2rem;
    filter: invert();
    background-size: 100% 100%;
}

.questionnaire-container div.item.highlighting-tip {
    background-color:#3bacff;
}

.questionnaire-container div.item.highlighting-tip::before {
    background-image: url("../../img/icons/lightbulb.e2bce91dd774.svg");
}

.questionnaire-container div.item.highlighting-example {
    background-color: var(--color-primary);
}

.questionnaire-container div.item.highlighting-example::before {
    background-image: url("../../img/icons/settings.888d09fc2eed.svg");
}

.questionnaire-container div.item.highlighting-important {
    background-color: #ffa013;
}

.questionnaire-container div.item.highlighting-important::before {
    background-image: url("../../img/icons/warning.d9c04bee1b90.svg");
}

.questionnaire-container div.item.highlighting-warning {
    background-color: #ff661e;
}

.questionnaire-container div.item.highlighting-warning::before {
    background-image: url("../../img/icons/error.45999b375b02.svg");
}

/* Text item lists */

.questionnaire-container .item .ce-block .cdx-nested-list {
    padding-left: 2.5rem;
}

/* Text item quotes */

div.item.item-text div.cdx-input.cdx-quote__text,
div.item.item-text div.cdx-input.cdx-quote__caption {
    border: 0px none transparent;
    box-shadow: none;
    min-height: 0;
    padding: 0;
}

div.item.item-text blockquote.cdx-quote {
    border-left: 0.3rem solid #f4f4f4;
    padding-left: 1rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1rem;
    position: relative;
}

div.item.item-text blockquote.cdx-quote .cdx-quote__text {
    font-size: 1rem;
    font-style: italic;
}

div.item.item-text blockquote.cdx-quote .cdx-quote__text::before {
    content: " ";
    display: block;
    background-image: url("../../img/icons/quote.e917b32cb569.svg");
    background-size: 100% 100%;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}

div.item.item-text blockquote.cdx-quote .cdx-quote__caption {
    font-size: 0.85rem;
    color: #888;
    margin-top: 0.4rem;
}

/* Expandable text in text items (expandable.editor.js) */

div.item.item-text .ce-wrapper__expandable-text {
    margin: 1rem 0;
    padding: 1rem;
    box-shadow: 2px 2px 0 #e7e7e7;
    border-radius: 0.3rem;
    background-color: rgba(0,0,0,0.05);
}

div.item.item-text .ce-wrapper__expandable-text p.question {
    margin-bottom: 0.6rem!important;
}

/* Scale items */

.questionnaire-container div.item-scale .scale {
    display: block;
    width:100%;
    max-width:30rem;
}

.questionnaire-container div.item-scale .scale input[type=range] {
    width:100%;
}

.questionnaire-container div.item-scale .scale .labels {
    display: flex;
    justify-content: space-between;
    font-size:0.8rem;
    margin-top:0.4rem;
    color:#888;
}

/* Text input items */

.questionnaire-container div.item input[type=text],
.questionnaire-container div.item textarea {
    font-size:0.9rem;
    font-style: italic;
    background-color:#f4f4f4;
    width:100%;
    max-width:30rem;
}

.questionnaire-container div.item-text-input textarea {
    resize: none;
    height:6rem;
}

.questionnaire-container div.item-text-input textarea.long-input {
    max-width:38rem;
    height:12rem;
}

.questionnaire-container div.item-text-input input.numeric-input {
    width: 8rem;
}

.questionnaire-container.questionnaire-modal div.item-text-input textarea.long-input {
    max-width: none;
    width: 100%;
    height: 6rem;
}

/* Multi text scale items */

.questionnaire-container div.item-multi-text-scale .answer {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    transition: 0.1s;
    background-color: #f2f2f2;
    padding: 1rem;
    border-radius: 0.6rem;
}

.questionnaire-container div.item-multi-text-scale.single-scale .answer {
    align-items: center;
}

.questionnaire-container div.item-multi-text-scale.single-scale .answer input[type=text] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.questionnaire-container div.item-multi-text-scale .answer:not(:last-child) {
    margin-bottom: 1rem;
}

.questionnaire-container div.item-multi-text-scale .answer > input {
    flex-grow: 1;
    min-width: 12rem;
    background-color: white;
}

.questionnaire-container div.item-multi-text-scale .answer .scales {
    flex-grow: 1;
}

.questionnaire-container div.item-multi-text-scale .answer .scales .scale {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.questionnaire-container div.item-multi-text-scale .answer .scales .scale:not(:last-child){
    padding-bottom: 0.6rem;
}

.questionnaire-container div.item-multi-text-scale .answer .scales .scale input[type=range] {
    padding: 0.5rem 0 0.4rem 0;
}


.questionnaire-container div.item-multi-text-scale .answer .scales .scale input[type=range]::-webkit-slider-runnable-track {
    background: #dddddd;
    height: 0.5rem;
}
.questionnaire-container div.item-multi-text-scale .answer .scales .scale input[type=range]::-moz-range-track {
    background: #dddddd;
    height: 0.5rem;
}

.questionnaire-container div.item-multi-text-scale .answer .scales .scale .scale-question {
    margin-bottom: 0;
    font-weight: 500;
    font-size: 0.9rem;
}

.questionnaire-container div.item-multi-text-scale .answer .scales .scale .labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #444;
}

.questionnaire-container div.item-multi-text-scale.no-scales .answers {
    background-color: #f0f0f0;
    padding: 1rem;
    border-radius: 0.8rem;
}

.questionnaire-container div.item-multi-text-scale.no-scales .answer {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0.5rem;
    gap: 0;
}

.questionnaire-container div.item-multi-text-scale.no-scales .answer:last-child {
    margin-bottom: 0;
}

.questionnaire-container div.item-multi-text-scale.no-scales .answer .scales {
    display: none;
}

/* Embedded items */

.questionnaire-container div.item-embedded {
    padding:0;
    border:0;
    background-color:transparent;
}

.questionnaire-container div.item-embedded.item-embedded-youtube iframe {
    width: 32rem;
    height: 20rem;
    max-width:100%;
    margin:2rem auto;
    display:block;
}

/* Image items */

.questionnaire-container div.item-image img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* Media players */

body > .media-player {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:9999;
}

.media-player {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

.media-player button[role=close] {
    background-image: url("../../img/icons/arrow_left.906d3d5d7203.svg");
    position: fixed;
    top: 2rem;
    left: 2rem;
}

.media-player .title {
    font-size: 1.6rem;
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.media-player .subtitle {
    font-size: 1.1rem;
    font-weight: 400;
    color: #aaa;
    margin-bottom: 0.6rem;
}

.media-player .title:empty,
.media-player .subtitle:empty {
    display: none;
}

.media-player .progress-container {
    width: 24rem;
    max-width: calc(100% - 1rem);
}

body > .media-player .progress-container {
    padding: 1rem;
}

.media-player.video-player .progress-container {
    width: 38rem;
}

.media-player .progress-container .outer {
    padding: 1rem;
    position: relative;
}

.media-player .progress-container .inner {
    height: 0.4rem;
    background-color: #ddd;
    cursor: pointer;
}

body > .media-player .progress-container .inner {
    background-color: #333;
    border-radius: 1rem;
    overflow: hidden;
}

.media-player .progress-container .inner .bar {
    height: 0.4rem;
    background-color: var(--color-primary);
}

.media-player .progress-container .handler {
    width: 0.8rem;
    height: 0.8rem;
    margin-top: -0.6rem;
    border-radius: 50%;
    background-color: white;
    position: relative;
    cursor: pointer;
    box-shadow: 0.1rem 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
}

.media-player .progress-container .time {
    margin-top: -1rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 0 0.5rem;
}

.media-player .progress-container .time span {
    padding: 0.5rem;
    color: #888;
    transition: 0.1s;
}

.media-player .progress-container .time span.active {
    color: #fff;
}

.media-player .progress-container .time span.total {
    cursor: pointer;
}

.media-player .progress-container .time span.total:hover {
    color: var(--color-primary);
}

body > .media-player .progress-container .time span.total:hover {
    color: white;
}

.media-player .controls {
    width: 22rem;
    display: flex;
    justify-content: center;
    gap: 0.2rem;
    align-items: center;
    margin-top: -2rem;
}

body > .media-player .controls {
    margin-top: 0;
}

.media-player button {
    margin: 0;
    padding: 1rem;
    border: 0px none transparent;
    background-color: transparent;
    width: 3rem;
    height: 3rem;
    background-size: 66% 66%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: opacity 0.1s;
    opacity: 0.6;
    cursor: pointer;
}

body > .media-player button {
    filter: invert();
}

.media-player button:hover {
    opacity: 1;
    background-color: transparent;
}

.media-player .controls button[role=back] {
    background-image: url("../../img/icons/backward_10.74a9fbcfd70b.svg");
}

.media-player .controls button[role=toggle-play] {
    width: 4rem;
    height: 4rem;
    background-image: url("../../img/icons/play_fill.9352633fc700.svg");
}

body > .media-player .controls button[role=toggle-play] {
    width: 4rem;
    height: 4rem;
}

.media-player .controls button[role=forward] {
    background-image: url("../../img/icons/forward_10.d1ad98b6aa0e.svg");
}

.media-player .controls button[role=fullscreen] {
    background-image: url("../../img/icons/fullscreen.406b0c7bdb1c.svg");
    background-size: 80% 80%;
}

.media-player .controls button[role=fullscreen]:hover {
    background-size: 90% 90%;
}

.media-player.video-player .media-container {
    width: 64rem;
    max-width: 100%;
}

.media-player.video-player .media-container video {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 10rem);
}

.media-player.audio-player .media-container {
    margin-bottom: -1.2rem;
    width: 21rem;
    max-width: calc(100% - 3.6rem);
}

body > .media-player.audio-player .media-container {
    margin-bottom: -2.2rem;
}

.media-player.audio-player .media-container canvas {
    width: 100%;
    height: 3rem;
}

body > .media-player.audio-player .media-container canvas {
    width: 100%;
    height: 6rem;
}

/* Cyclic measurements / questionnaire modals */

div.questionnaire-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    max-width: 960px;
    background-color: white;
    padding: 2rem;
    box-shadow: 1rem 1rem 3rem rgba(0, 0, 0, 0.2);
    border-radius: 0.8rem;
    z-index: 15;
}

div.questionnaire-modal .questionnaire-pages-container {
    max-height: calc(100vh - 13rem);
    overflow-y: auto;
    overflow-x: hidden;
}

/* Meetings */

#meetingsContainer .meetings-list .meeting {
    display: flex;
    background-color: #eee;
    margin-bottom:0.2rem;
    padding:1rem;
    position:relative;
    opacity:0.9;
    transition:0.1s;
    align-items: center;
}

#meetingsContainer .meetings-list .meeting .meeting-info {
    flex-grow: 1;
}

#meetingsContainer .meetings-list .meeting .meeting-actions {
    display: none;
    flex-grow: 0;
    font-weight: 600;
    opacity: 0.8;
}

#meetingsContainer .meetings-list .meeting .status {
    font-size: 0.85rem;
    opacity: 0.6;
}

#meetingsContainer .meetings-list .meeting .name {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

#meetingsContainer .meetings-list .meeting .description {
    font-size: 1rem;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

#meetingsContainer .meetings-list .meeting .time {
    font-size: 0.9rem;
    opacity: 0.6;
}

#meetingsContainer .meetings-list .meeting p:last-child {
    margin-bottom: 0;
}

#meetingsContainer .meetings-list .meeting.meeting-current {
    background-color: var(--color-primary);
    color: white;
    cursor: pointer;
}

#meetingsContainer .meetings-list .meeting.meeting-current:hover {
    opacity: 1;
}

#meetingsContainer .meetings-list .meeting.meeting-current .time {
    font-size: 1.4rem;
    font-weight: 900;
    opacity: 1;
}

#meetingsContainer .meetings-list .meeting.meeting-current .meeting-actions {
    display: block;
}

#meetingsContainer .meetings-list .meeting.meeting-current .status {
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
}

#meetingsContainer .meetings-list .meeting.meeting-current .name {
    color: white;
    font-size: 1.2rem;
}

.calendly-dialog {
    max-height: 100vh;
    display: flex;
    flex-direction: column;
}

.calendly-dialog .content {
    flex-grow: 1;
    height: calc(90vh - 14rem);
}

/* Chat */

#chatMessagesContainer::-webkit-scrollbar {
    width: 10px;
}

#chatMessagesContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#chatMessagesContainer::-webkit-scrollbar-thumb {
    background: #ccc;
}

#chatMessagesContainer:hover::-webkit-scrollbar-thumb {
    background: #aaa;
}

#chatMessagesContainer:hover::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary);
}

#chatDisplayNamePrompt {
    display: block;
    height: 20rem;
    margin: 0 -1rem -1rem -1rem;
    background-image: url("../../img/chat_placeholder.3e810857a616.jpg");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: 0% 100%;
    position: relative;
    box-shadow:
        0 0 0.5rem white inset,
        0 0 1.25rem white inset,
        0 0 3rem white inset;
}

#chatDisplayNamePrompt .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
}

#chatDisplayNamePrompt .inner p {
    font-size: 0.9rem;
    padding: 0 5rem;
    min-width: 10rem;
}

#chatDisplayNamePrompt .inner input {
    text-align: center;
}

#chatDisplayNamePrompt .inner button {
    display: block;
    margin: 0.5rem auto;
}


/* User profile */

main.profile label {
    display: block;
    margin-bottom: 0.5rem;
}

main.profile label span {
    display: block;
    font-size: 0.8rem;
    color: #666;
}

main.profile .change-password-form input:not([type=submit]) {
    width: 14rem;
}

main.profile .change-password-form input[type=submit] {
    display: block;
}

main.profile section.change-password-section {
    display: flex;
    gap: 1rem;
}

main.profile section.change-password-section > div {
    flex: 1;
}

main.profile section.change-password-section .basic-info p span {
    display: block;
}

main.profile section.change-password-section .basic-info p span:first-child {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.5rem;
}

main.profile section.change-password-section .basic-info p input {
    padding: 0.2rem;
    font-size: 1rem;
    cursor: pointer;
}

main.profile section p a {
    color: #777;
}

main.profile .account-removal-info {
    display: block;
    padding: 1rem;
    background-color: rgb(255, 222, 222);
}

main.profile section div.info {
    background-color: #eee;
    font-size: 0.8rem;
    padding: 1rem 1.5rem;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

main.profile section div.info p,
main.profile section div.info ul,
main.profile section div.info li {
    font-size: 0.8rem;
}

main.profile section div.info :last-child {
    margin-bottom: 0;
}


/* Mobile */

@media all and (max-width: 1279px){

    body > main section {
        margin:1rem 0 2rem 0;
    }

    body > main.dashboard-items {
        display:block;
        padding:0;
    }

}