@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --primary-color: #00E5D9;
    --primary-color-00: #CAFEF4;
    --primary-color-20: #00D3BD;
    --primary-color-40: #00B99E;
    --primary-color-60: #00957E;
    --primary-color-80: #00725D;
    --primary-color-100: #004F3D;
    --background-primary: #DFFFF9;
    --primary-text-color: #004F3D;
    --secondary-color: #281434;
    --secondary-color-00: #E3E6EA;
    --white: #FFFFFF;
    --neutral-00: #FFFFFF;
    --neutral-05: #F9F9F9;
    --neutral-20: #CDCDCD;
    --text-dark: #282828;
    --text-medium: #686868;
    --text-light: #9A9A9A;
    --text-link: #00B99E;
    --color-dark-05: rgba(0, 0, 0, 5%);
    --color-dark-10: rgba(0,0,0, 10%);
    --feedback-info-dark: #7069FF;
    --feedback-info-medium: #9797FF;
    --feedback-info-light: #EBEBFF;
    --feedback-error-dark: #FF4444;
    --feedback-error-light: #FFD3CC;
    --special-light-dare: #FFF0DD;
    --special-dark-dare: #FF9208;
    --special-light-exercise: #FFFCDF;
    --special-dark-exercise: #EEC700;
    --special-light-text: #FFF0F0;
    --special-dark-text: #FF6666;
    --special-light-quiz: #EDEDFF;
    --special-dark-quiz: #5353FF;
    --special-light-video: #F6FFDD;
    --special-dark-video: #9FCB28;
    --special-light-infography: #CAFEF4;
    --special-dark-infography: #00957E;
    --0-25-rem: 4px;
    --0-5-rem: 8px;
    --0-75-rem: 12px;
    --1-rem: 16px;
    --1-5-rem: 24px;
    --2-rem: 32px;
    --2-5-rem: 40px;
    --3-rem: 48px;
    --4-rem: 64px;

}

html, body {
    font-family: "Figtree", serif;
    font-optical-sizing: auto;
    font-weight: normal;
    font-style: normal;
    height: 100%;
}
/* COLORS - BACKGROUND */
.background-primary{
    background-color: var(--primary-color);
}
.background-secondary {
    background-color: var(--secondary-color);
}
/* COLORS - TEXT */
.text-primary {
    color: var(--primary-color) !important;
}
.text-secondary {
    color: var(--secondary-color) !important;
}
.text-dark {
    color: var(--text-dark);
}
.text-medium {
    color: var(--text-medium);
}
.text-color-link {
    color: var(--text-link);
}
.text-link {
    color: var(--text-link);
    text-decoration: underline;
}
/* END COLORS */
/* TEXT SIZE */
.text-largest {
    font-size: 3em;
}
.text-larger {
    font-size: 2em;
}
.text-small {
    font-size: 0.9em;
}
.text-smaller {
    font-size: 0.75em;
}
/* END TEXT SIZE */
/* LINKS */
.pdf-link {
    font-family: 'Figtree', sans-serif; /* Asegura que usa Figtree */
    font-weight: 500;                 /* Peso de la fuente: 500 (Medium) */
    font-size: 16px;                  /* Tamaño de la fuente */
    line-height: 18px;                /* Altura de la línea */
    text-decoration: underline;       /* Subrayado */
    color: var(--text-link);          /* Usar la variable CSS para el color */
}
.link-no-decoration {
    text-decoration: none;
}
/* END LINKS */
/* MARGINS */
.m-0-5rem {
    margin: var(--0-5-rem);
}
.m-1rem {
    margin: var(--1-rem);
}
.m-2rem {
    margin: var(--2-rem);
}
.mt-0-25rem {
    margin-top: var(--0-25-rem);
}
.mb-0-25rem {
    margin-bottom: var(--0-25-rem);
}
.mt-0-5rem {
    margin-top: var(--0-5-rem);
}
.mb-0-5rem {
    margin-bottom: var(--0-5-rem);
}
.mt-1rem {
    margin-top: var(--1-rem);
}
.mt-1-5rem {
    margin-top: var(--1-5-rem);
}
.mt-2rem {
    margin-top: var(--2-rem);
}
.mt-3rem {
    margin-top: var(--3-rem);
}
.mb-1rem {
    margin-bottom: var(--1-rem);
}
.mb-1-5rem {
    margin-bottom: var(--1-5-rem);
}
.mb-2rem {
    margin-bottom: var(--2-rem);
}
.mb-3rem {
    margin-bottom: var(--3-rem);
}
.ml-1rem {
    margin-left: var(--1-rem);
}
.mr-1rem {
    margin-right: var(--1-rem);
}
/* END MARGINS */
/* PROGRESS BAR */
body.questionnaire,
body.feedback,
body.screening {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body.questionnaire .progress-card {
    color: var(--primary-color);
}
body.feedback .progress-card {
    color: var(--secondary-color);
}
body.questionnaire .progress-bar {
    background-color: var(--primary-color);
}
body.feedback .progress-bar {
    background-color: var(--secondary-color);
}
/* END PROGRESS BAR */
/* BUTTONS */
body.screening .btn-primary {
    padding-left: 100px;
    padding-right: 100px;
    box-shadow: rgba(0, 0, 0, 0.25) 0 4px 4px;
    margin-top: 40px;
    display: block;
}

body.questionnaire .btn-primary {
    padding-left: var(--2-rem);
    padding-right: var(--2-rem);
}

#formLogin .btn.btn-primary {
    margin: 30px auto var(--1-rem);
    display: block;
    padding: var(--1-rem) var(--2-rem);
}

.btn-primary {
    color: var(--primary-text-color);
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    border-radius: var(--4-rem);
    padding:var(--1-rem);
}
.btn.btn-primary:hover{
    background-color: var(--primary-color-00);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}
.btn.btn-primary:active,
.btn.btn-primary:focus{
    background-color: var(--primary-color);
    border-color: var(--primary-color-80);
    color: var(--secondary-color);
}
.btn.btn-primary.disabled {
    background-color: #2d6860;
    border-color: #2d6860;
}

.btn.btn-primary-alt {
    color: var(--primary-color-40);
    background-color: var(--background-primary);
    border: solid 1px var(--primary-color-40);
    border-radius: var(--4-rem);
    padding: var(--1-rem) var(--0-5-rem);
}

.btn.btn-primary-alt:hover,
.btn.btn-primary-alt:active,
.btn.btn-primary-alt:focus {
    color: var(--primary-text-color);
    background-color: var(--primary-color-20);
    border-color: var(--primary-color);
}

.btn-secondary,
.btn.btn-secondary:focus{
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: var(--white);
    border-radius: var(--4-rem);
    padding:var(--1-rem);
}
.btn.btn-secondary:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background-color: var(--secondary-color-00);
}

.btn-secondary:active,
.btn-secondary:active:focus{
    color: var(--white);
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}
.btn-assist {
    color: var(--primary-color-100);
    border-color: var(--secondary-color);
    background-color: var(--feedback-info-light);
    border-radius: var(--4-rem);
    padding: var(--1-rem);
}

.btn-assist:hover,
.btn-assist:active,
.btn-assist:active:focus{
    color: var(--secondary-color-00);
    background-color: var(--feedback-info-medium);
    border-color: var(--secondary-color);
}
.btn-collapse {
    color: var(--white);
    background-color: var(--feedback-info-dark);
    border-radius: var(--4-rem);
    padding: var(--1-rem) var(--2-rem);
}
.btn-collapse:hover {
    background-color: var(--feedback-info-light);
    color: var(--secondary-color);
    border: solid 1px var(--secondary-color);
}
.btn-collapse::before {
    font-family: "Font Awesome 6 Free", emoji;
    float: right;
    font-weight: 900;
    margin-left: var(--1-rem);
    content: "\f062";
}
.btn-collapse.collapsed::before {
    content: "\f063";
}
.btn-outline-dark {
    border-radius: var(--4-rem);
}
.br-1rem {
    border-radius: var(--1-rem) !important;
}
/* END BUTTONS */
/* RANGE FIELD */
.custom-form-range {
    width:100%;
    height:1.5rem;
    padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background-color:transparent
}
.custom-form-range:focus {
    outline:0
}
.custom-form-range:focus::-webkit-slider-thumb {
    box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
}
.custom-form-range:focus::-moz-range-thumb {
    box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)
}
.custom-form-range::-moz-focus-outer {
    border:0
}
.custom-form-range::-webkit-slider-thumb {
    width:1rem;
    height:1rem;
    margin-top:-.25rem;
    -webkit-appearance:none;
    appearance:none;
    background-color:var(--primary-color);
    border:0;
    border-radius:1rem;
    -webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.custom-form-range::-webkit-slider-thumb:active {
    background-color: var(--primary-color);
}
.custom-form-range::-webkit-slider-runnable-track {
    width:100%;
    height:.5rem;
    color:transparent;
    cursor:pointer;
    background-color:var(--bs-secondary-bg);
    border-color:transparent;
    border-radius:1rem
}
.custom-form-range::-moz-range-thumb {
    width:1rem;
    height:1rem;
    -moz-appearance:none;
    appearance:none;
    background-color: var(--primary-color);
    border:0;
    border-radius:1rem;
    -moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}
.custom-form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
}
.custom-form-range::-moz-range-track {
    width: 100%;
    height: .5rem;
    color: transparent;
    cursor: pointer;
    background-color: var(--bs-secondary-bg);
    border-color: transparent;
    border-radius: 1rem;
}
/* END CUSTOM RANGE */
/* QUESTIONNAIRES */
body.screening input.form-check-input,
body.questionnaire .form-check-input {
    width: 1.5em;
    height: 1.5em;
    margin-top: 0;
    margin-right: 0.5em;
}
body.screening .form-check,
body.questionnaire .form-check {
    color: var(--text-light);
}
body.questionnaire .form-check {
    display: flex;
}
body.screening .form-check input[type="checkbox"],
body.screening .form-check input[type="radio"],
body.questionnaire .form-check input[type="radio"] {
    accent-color: var(--text-light);
}
body.screening .form-check:hover,
body.questionnaire .form-check:hover {
    color: var(--text-medium);
}
body.screening .form-check:hover input[type="checkbox"],
body.screening .form-check:hover input[type="radio"],
body.questionnaire .form-check:hover input[type="radio"] {
    accent-color: var(--text-medium);
    border-width: 5px;
}
body.screening .form-check input[type="checkbox"]:checked,
body.screening .form-check input[type="radio"]:checked,
body.questionnaire .form-check input[type="radio"]:checked {
    accent-color: var(--text-link);
    background-color: var(--text-link);
}
body.questionnaire .form-check input[type="radio"]:checked ~ label {
    color: var(--text-link);
}
body.screening .form-check-label {
    display: flow-root;
}
body.questionnaire .form-check-label {
        display: flex;
        margin-bottom: 1rem;
}
/* END QUESTIONNAIRES */
/* FEEDBACK */
body.feedback div.card-body {
    background-color: var(--secondary-color-00);
    border-color: var(--secondary-color-00);
    padding: var(--1-rem);
    border-radius: var(--0-5-rem);
    text-align: left;
    color: var(--text-dark);
}
/* END FEEDBACK ^/
 */
/* NEW STYLES */

#main-split {
    height: 100vh;
}

#main-split > div {
    height:100vh;
}

body.screening div.split-left,
body.feedback div.split-left{
    background-color: var(--primary-color);
}
body.questionnaire div.split-left {
    background-color: var(--secondary-color);
}
.split-left {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 20px 50px;
}

.split-right {
    padding: 50px 70px;
    overflow: auto;
    background-color: #F9F9F9;
}

body.screening .consent-container {
    height: 350px;
    overflow-y: scroll;
    margin-bottom: var(--1-rem);
    border: none;
}

body.screening div.screening-check {
    color: var(--text-medium);
    border-bottom: solid 1px #D9D9D9;
    padding: var(--1-rem);
}

body.screening div.form-field legend {
    color: var(--text-medium);
}

body.screening div.form-field {
    margin-top: var(--1-5-rem);
}
body.screening div.form-field label {
    margin-left: var(--1-rem);
}
body.screening div.form-field input {
    padding-left: var(--1-rem);
}

body.screening div.screening-result {
    background-color: #E3E6EA;
    padding: var(--1-rem);
}

body.screening div.screening-done-buttons .btn-primary {
    padding-left: 0;
    padding-right: 0;
}
div.screening-done-buttons {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));;
    grid-gap: var(--0-5-rem);
    width: 100%;
}


div.screening-done-buttons button {

}

.centered-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    flex-direction: column;
}

.screening-congrats {
    background-color: #FFFFFF;
    border-radius: 8px;
    text-align: center;
    padding: var(--4-rem) var(--2-rem);
    max-width: 650px;
    overflow: auto;
}

.screening-congrats .download-icon {
    margin: var(--1-5-rem) 0;
}

#accordionDownload .card.card-body {
    border: none;
}


/* QUESTIONNAIRES STYLES */

/* END QUESTIONNAIRES STYLES */

#formLogin img.logo {
    display: block;
    width: 50% !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}

#formLogin label {
    padding-left: var(--1-rem);
}

#formLogin .text-link {
    display: block;
    margin: 0 auto;
}

.img-centered {
    margin: 0 auto;
    display: block;
}

div.pass-field span#password_toggle,
div.pass-field span.password_toggle {
    position: absolute;
    top: 18px;
    right: 15px;
    color: var(--text-light);
    cursor: pointer;
}

.modal-content {
    border: none;
}
.modal-header {
    border-bottom-color: var(--color-dark-10);
}

.modal-header.no-border {
    border-bottom-color: transparent;
}
.modal-body {
    padding: var(--1-rem);
}
.modal-footer {
    border-top-color: var(--color-dark-10);
}

.modal-footer.no-border {
    border-top-color: transparent;
}


@media (max-width: 991px) {
    #main-split > div {
        height: auto;
    }

    #main-split > div.split-left {
        min-height: 270px;
    }

    body.screening .split-left > * {
        margin-top: var(--1-5-rem);
        margin-bottom: var(--1-5-rem);
    }
}

@media (max-width: 767px) {

    .screening-congrats {
        max-width: 90%;
    }
}

/* END NEW STYLES */

#tourModal .modal-dialog
{
    max-width: 90%;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-color: #ccc8;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
}

#activity-list {
    margin-top: 3em;
}

/**************************************
 REMOVE SLIDE TRANSITION FOR CAROUSELS
 *************************************/
#activitiesCarousel .carousel-item,
#dareCarousel .carousel-item,
#quizCarousel .carousel-item,
#textCarousel .carousel-item,
#exerciseCarousel .carousel-item,
#infographicP2Carousel .carousel-item{
    transition: transform 0s ease, opacity 0s ease-out !important;
}

.btn-block {
    width: 80%;
}

table.exercise-table {
    border-collapse: collapse;
    margin-top: 15px;
    margin-bottom: 15px;
}
table.exercise-table td {
    border: solid black 1px;
    padding: 5px 10px;
}

div.container.content-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-clip: border-box;
    padding: 0;
    background-color: var(--neutral-05);
    width: 100%;
    max-width: unset;
}

/***************
 HEADER SECTION
***************/

div.content-card-header {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    color: var(--secondary-color);
    padding: var(--1-rem) 0;
    margin-bottom: 0;
    border-bottom: 2px solid var(--secondary-color-00);
}

div.content-card-header .side-left {
    margin: 0 auto 0 var(--1-rem);
}

div.content-card-header p.page-title {
    font-weight: bold;
    font-size: 1.25rem;
    margin-bottom: 0;
}

div.content-card-header a.link-previous.hidden {
    display: none;
}

div.content-card-header .side-right {
    margin: 0 var(--1-rem) 0 auto;
}

div.content-card-header .side-right a + a {
    margin-left: var(--1-rem);
}

/*************
 CONTENT AREA
*************/

div.content-card-scrollable {
    overflow: auto;
    flex: 1 1 auto;
}

div.content-card-body {
    padding: var(--1-rem) var(--1-rem);
}

div.content-card-body.no-separation {
    padding: 0 var(--1-rem);
}

/****************
 CONTENT BANNERS
 ***************/

div.content-card-banner {
    text-align: center;
    width: 100%;
    border-bottom: 2px solid var(--secondary-color-00);
    padding: var(--1-5-rem);
}

div.content-card-banner.hidden {
    height: 0;
    padding: 0;
    border: none;
    display: none;
}

div.content-card-banner.special {
    background-color: var(--background-primary);
    color: var(--primary-color-20);
    font-size: 1.5rem;
}
div.content-card-banner.special > p{
    margin-top: var(--1-rem);
}

div.content-card-banner.profile {
    background-color: var(--primary-color-00);
}

div.content-card-banner.module {
    background-color: var(--background-primary);
}

div.content-card-banner.discover {
    background-color: var(--feedback-info-light);
}

div.content-card-banner.quiz {
    background-color: var(--special-light-quiz);
    color: var(--special-dark-quiz);
}

div.content-card-banner.text {
    background-color: var(--special-light-text);
    color: var(--special-dark-text);
}

div.content-card-banner.video {
    background-color: var(--special-light-video);
    color: var(--special-dark-video);
}

div.content-card-banner.dare {
    background-color: var(--special-light-dare);
    color: var(--special-dark-dare);
}

div.content-card-banner.exercise {
    background-color: var(--special-light-exercise);
    color: var(--special-dark-exercise);
}

div.content-card-banner.infographic {
    background-color: var(--special-light-infography);
    color: var(--special-dark-infography);
}

div.content-card-banner h6 {
    margin-top: var(--0-25-rem);
    margin-bottom: var(--1-rem);
    text-transform: uppercase;
}

div.content-card-banner h5 {
    margin: 0;
}

div.content-card-banner img {
    height: 64px;
}

div.content-card-banner p {
    margin-top: var(--0-5-rem);
    margin-bottom: 0;
}

/************
 FOOTER MENU
************/

div.content-card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    margin-top: 0;
    border-top: 2px solid var(--secondary-color-00);
}

div.content-card-footer.hidden {
    border: none;
    display: none;
}

footer {
    padding: var(--0-75-rem) var(--1-rem);
}

footer .navbar {
    padding: 0;
}

footer .navbar.ig2,
footer .navbar.ig0{
    justify-content: space-evenly;
}

footer a,
div.content-card-header a {
    text-decoration: none;
    color: var(--secondary-color);
    font-weight: bold;
    text-align: center;
    border-radius: var(--4-rem);
}

footer a {
    padding: var(--0-5-rem) var(--2-rem);
}

div.content-card-header a {
    padding: 8px;
}

footer a:hover,
div.content-card-header a:hover {
    background-color: var(--primary-color-00);
}

footer a.active,
div.content-card-header a.active {
    background-color: var(--primary-color);

}

/****
 TOUR
 ****/

div#tourCarousel .carousel-indicators {
    position: relative;
}

div#tourCarousel .carousel-indicators [data-bs-target] {
    width: var(--0-5-rem);
    height: var(--0-5-rem);
    border-radius: 100%;
    background-color: var(--secondary-color-00);
    opacity: 1;
}

div#tourCarousel .carousel-indicators .active {
    background-color: var(--primary-color);
}

/********
 SPECIAL
********/

#activitiesCarousel div.carousel-content {
    width: 100%;
    min-height: 100px;
    display: block;
    overflow: hidden;
    min-width: 100%;
    margin-bottom: var(--1-5-rem);
}

#activitiesCarousel .carousel-buttons button+button {
    margin-top: var(--1-rem);
}

/********
 EXPLORE
********/

div.explore-index {
    text-align: center;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: var(--1-5-rem);
    padding: var(--2-rem) 0;
}

div.module-link-container {
    position: relative;
}

.module-filter-title {
    padding: var(--1-rem);
}

.module-filter-title img {
    float: right;
}

a.module-link {
    text-align: center;
    text-decoration: none;
    color: var(--secondary-color);
    border: solid 2px white;
    width: 160px;
    padding: var(--1-5-rem);
    margin: 0;
    background-color: var(--neutral-05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
    border-radius: var(--0-5-rem);
    display: block;
}

a.module-link img {
    margin-bottom: var(--0-5-rem);
}

img.recommended-module {
    position: absolute;
    top: -15px;
    left: -15px;
    height: 64px;
}

div.explore-module div#no-results h4 {
    font-weight: normal;
}

div.explore-module div#no-results h4#oops {
    font-weight: bold;
}

/**************
 EXPLORE MODULE
 **************/

div.explore-module button.btn.btn-collapse {
    text-align: left;
    box-shadow: 1px 3px 5px rgba(0, 0, 0, 20%);
}

div.explore-module button.btn.btn-collapse.collapsed {
    box-shadow: none;
}

.custom-checkbox-group .input-container-inner {
    position: relative;
}

.custom-checkbox-group .input-container .checkbox-button {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 900;
}

.custom-checkbox-group .input-container .check-tile {
    box-sizing: border-box;
    border-radius: var(--3-rem);
    margin-bottom: var(--0-5-rem);
    padding: 1.1rem 0 0.8rem;
    height: 100%;
    box-shadow: 0 0 5px #aaaaaa;
    background-color: var(--color-dark-05);
    color: var(--text-light);
    text-align: center;
}

.custom-checkbox-group .input-container .check-tile-label {
    text-align: center;
    letter-spacing: 1px;
}

.custom-checkbox-group .input-container .checkbox-button:checked + .check-tile {
    background-color: var(--feedback-info-light);
    color: var(--text-dark)
}

.btn-activity {
    width: 100%;
    margin-bottom: var(--0-5-rem);
    border-radius: var(--3-rem);
    text-align: left;
    padding: var(--1-rem) var(--1-rem) var(--1-rem) var(--3-rem);
    background-position: var(--1-rem) center;
    background-repeat: no-repeat;
}

.btn-activity:after {
    width: 24px;
    height: 24px;
    content: "";
    background-image: url("../images/arrow-right-IUiZzt0.svg");
    float: right;
}

.btn-activity-quiz {
    background-color: var(--special-light-quiz);
    background-image: url("../images/activity/quiz-sF65e6W.svg");
}

.btn-activity-quiz:hover,
.btn-activity-quiz:focus,
.btn-activity-quiz:active {
    background-color: var(--special-light-quiz) !important;
    border: solid 1px var(--special-dark-quiz) !important;
}

.btn-activity-dare {
    background-color: var(--special-light-dare);
    background-image: url("../images/activity/dare-8d2kJXJ.svg");
}

.btn-activity-dare:hover,
.btn-activity-dare:focus,
.btn-activity-dare:active {
    border: solid 1px var(--special-dark-dare) !important;
    background-color: var(--special-light-dare) !important;
}

.btn-activity-text {
    background-color: var(--special-light-text);
    background-image: url("../images/activity/text-NYtoscT.svg");
}

.btn-activity-text:hover,
.btn-activity-text:focus,
.btn-activity-text:active {
    border: solid 1px var(--special-dark-text) !important;
    background-color: var(--special-light-text) !important;
}

.btn-activity-video {
    background-color: var(--special-light-video);
    background-image: url("../images/activity/video-RrESAwc.svg");
}

.btn-activity-video:hover,
.btn-activity-video:focus,
.btn-activity-video:active {
    border: solid 1px var(--special-dark-video) !important;
    background-color: var(--special-light-video) !important;
}

.btn-activity-exercise {
    background-color: var(--special-light-exercise);
    background-image: url("../images/activity/exercise-P1fhozi.svg");
}

.btn-activity-exercise:hover,
.btn-activity-exercise:focus,
.btn-activity-exercise:active {
    border: solid 1px var(--special-dark-exercise) !important;
    background-color: var(--special-light-exercise) !important;
}

.btn-activity-infographic {
    background-color: var(--special-light-infography);
    background-image: url("../images/activity/infographic-w4bQGOx.svg");
}

.btn-activity-infographic:hover,
.btn-activity-infographic:focus,
.btn-activity-infographic:active {
    border: solid 1px var(--special-dark-infography) !important;
    background-color: var(--special-light-infography) !important;
}

.btn-activity-notype {
    background-color: var(--special-light-text);
}

.btn-activity-notype:hover,
.btn-activity-notype:focus,
.btn-activity-notype:active {
    border: solid 1px var(--special-dark-text) !important;
    background-color: var(--special-light-text) !important;
}

/**************
 TEXT ACTIVITY
 *************/

#textCarousel .carousel-inner {
    margin-bottom: var(--1-rem)
}

#textCarousel p {
    background-color: var(--special-light-text);
    padding: var(--1-rem);
    border-radius: 4px;
}

#textCarousel p:has(> a.btn.btn-collapse) {
    background: none;
    padding:0;
    border-radius: 0;
}


#textCarousel .btn-text-collapse {
    background-color: var(--special-dark-text);
    border: none;
    color: var(--neutral-00);
    width: 100%;
    text-align: left;
    margin-bottom: var(--1-rem);
}

#textCarousel .carousel-buttons img {
    margin-right: var(--0-5-rem);
}

/**************
 QUIZ ACTIVITY
 *************/

#quizCarousel .btn-quiz-group {

}

.btn-quiz-group {
    width: 100%;
    background-color: var(--special-dark-quiz);
    background-image: url("../images/arrow-right-white-GmbhKrc.svg");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--neutral-00);
    padding: var(--0-75-rem);
    border-radius: var(--4-rem);
    text-align: left;
    margin-bottom: var(--0-5-rem);
}

.btn-quiz-group:hover,
.btn-quiz-group:active,
.btn-quiz-group:focus {
    background-color: var(--special-light-quiz) !important;
    color: var(--secondary-color) !important;
    background-image: url("../images/arrow-right-IUiZzt0.svg") !important;
    border: none !important;
}

.btn-quiz-group.completed {
    background-color: var(--special-dark-infography);
    background-image: url("../images/completed-U_iCgxi.svg");
}

.quiz-question-title {
    margin-bottom: var(--1-5-rem);
}

p.quiz-question-paragraph {
    background-color: var(--special-light-quiz);
    color: var(--secondary-color);
    padding: var(--1-rem);
    border-radius: 4px;
    font-weight: bold;
}

div.quiz-question-responses {
    display: flex;
    gap: var(--1-rem);
}

div.quiz-question-responses button {
    flex: 25%;
    border-radius: var(--2-rem);
    padding-top: var(--1-rem);
    padding-bottom: var(--1-rem);
    border: solid 1px var(--special-dark-quiz);
}

div.quiz-question-responses button:hover,
div.quiz-question-responses button:focus,
div.quiz-question-responses button:active {
    background-color: var(--special-dark-quiz);
    color: var(--neutral-00);
    border-color: var(--special-dark-quiz);
}

div.quiz-question-responses button.btn-verdadero {
    background-color: var(--special-dark-quiz);
    color: var(--neutral-00);
    border-color: var(--special-dark-quiz);
}

div.quiz-question-responses button.btn-verdadero:hover,
div.quiz-question-responses button.btn-verdadero:focus,
div.quiz-question-responses button.btn-verdadero:active {
    background-color: var(--special-light-quiz);
    color: var(--secondary-color);
    border-color: var(--special-light-quiz);
}

div.quiz-question-responses button.btn-falso {
    background-color: var(--special-dark-text);
    color: var(--neutral-00);
    border-color: var(--special-dark-text);
}

div.quiz-question-responses button.btn-falso:hover,
div.quiz-question-responses button.btn-falso:focus,
div.quiz-question-responses button.btn-falso:active {
    background-color: var(--special-light-text);
    color: var(--secondary-color);
    border-color: var(--special-light-text);
}

/***************
 VIDEO ACTIVITY
 **************/

.video-activity {
    --plyr-color-main: var(--special-dark-video);
    --plyr-video-background: var(--special-light-video);
    --plyr-video-controls-background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
}

.video-activity div.plyr.plyr--video {
    border-radius: 4px;
}

.video-activity p {
    margin-top: var(--1-rem);
    padding: var(--1-rem);
    background-color: var(--special-light-video);
    color: var(--text-dark);
}

.video-activity a.btn-download {
    width: 100%;
    color: var(--neutral-00);
    border-radius: var(--3-rem);
    background-color: var(--special-dark-video);
    border: solid 1px var(--special-dark-video);
    text-align: center;
    padding: var(--1-rem) var(--2-rem);
    margin-top: var(--1-rem);
    margin-bottom: var(--1-rem);
}


.video-activity a.btn-download:hover,
.video-activity a.btn-download:active,
.video-activity a.btn-download:focus {
    background-color: var(--special-light-video);
    color: var(--special-dark-video);
    border-color: var(--special-light-video);

}

/**************
 DARE ACTIVITY
 *************/

#dareCarousel p {
    background-color: var(--special-light-dare);
    padding: var(--1-rem);
}

#dareCarousel .background-none p {
    background: none;
}

.dare-activity #modal .modal-header {
    color: var(--special-dark-dare);
    --bs-btn-close-color: var(--special-dark-dare);
}

.dare-activity #modal .modal-footer button {
    color: var(--special-dark-dare);
    border-color: var(--special-dark-dare);
}

.dare-activity #modal .modal-footer button:hover,
.dare-activity #modal .modal-footer button:focus,
.dare-activity #modal .modal-footer button:active {
    background-color: var(--special-dark-dare);
    color: var(--neutral-00);
}

/******************
 EXERCISE ACTIVITY
 *****************/

div.exercise-activity p,
div.exercise-activity ul,
div.exercise-activity ol{
    padding: var(--1-rem);
    background-color: var(--special-light-exercise);
}

div.exercise-activity .modal p{
    background-color: transparent;
    padding: unset;
}


div.exercise-activity ul,
div.exercise-activity ol{
    padding-left: var(--2-rem);
}

div.exercise-activity .btn-link-exercise{
    width: 100%;
    margin-bottom: var(--0-5-rem);
    display: inline-block;
    padding: var(--1-rem);
    text-decoration: none;
    color: var(--secondary-color);
    border: solid 1px var(--special-dark-exercise);
    border-radius: var(--4-rem);
    background-color: var(--special-dark-exercise);

}

div.exercise-activity .btn-link-exercise:hover,
div.exercise-activity .btn-link-exercise:focus,
div.exercise-activity .btn-link-exercise:active{
    background-color: var(--special-light-exercise);
    border-color: var(--secondary-color);
}

div.exercise-activity form input,
div.exercise-activity form .input,
div.exercise-activity form select,
div.exercise-activity form textarea{
    border-color: var(--special-dark-exercise);
    background-color: var(--neutral-00)
}


div.exercise-activity-worry .worry-part{
    background-color: var(--special-light-exercise);
    padding: var(--1-rem);
    margin-bottom: var(--1-rem);
}

div.exercise-activity div.exercise-bordered {
    padding: var(--1-rem);
    border: solid 2px var(--special-dark-exercise);
    border-radius: var(--0-75-rem);
}
div.exercise-activity div.exercise-bordered  ul {
    background-color: transparent;
    padding: 0 var(--1-rem);
}

div.exercise-activity .text-exercise {
    color: var(--special-dark-exercise);
}

div.exercise-activity .custom-exercise-intro{
    font-weight: normal;
    font-size: 1.15em;
    line-height: 1.4em;
    text-align: justify;
    margin-bottom: var(--1-rem);
}


div.exercise-activity h3{
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    font-style: normal;
}

div.exercise-activity div.input,
div.exercise-activity input[type=text].form-control {
    padding: var(--1-rem);
    border-radius: var(--0-5-rem);
    margin: var(--1-rem) 0;
}

div.exercise-activity .exercise-section {
    width: 100%;
    margin-bottom: var(--0-5-rem);
    padding: var(--1-rem);
    color: var(--secondary-color);
    border: solid 1px var(--special-dark-exercise);
    border-radius: var(--4-rem);
    background-color: var(--special-dark-exercise);
    font-weight: bold;
    font-size: 1.1em;
    display: flex;
    justify-content: space-evenly;
    text-align: center;
}

/************
 VAULT MODAL
 ***********/

div.modal-vault.modal#modal .modal-header {
    color: var(--special-dark-dare);
    --bs-btn-close-color: var(--special-dark-dare);
}

div.modal-vault.modal#modal .modal-footer button {
    color: var(--special-dark-dare);
    border-color: var(--special-dark-dare);
}

div.modal-vault.modal#modal  .modal-footer button:hover,
div.modal-vault.modal#modal  .modal-footer button:focus,
div.modal-vault.modal#modal  .modal-footer button:active {
    background-color: var(--special-dark-dare);
    color: var(--neutral-00);
}

/************
 P2 ACTIVITY
 ***********/

div#infographicP2Carousel a.btn-text-collapse {
    display: block;
    text-align: left;
    background-color: var(--special-dark-text);
    color: var(--neutral-00);
    border-width: 0;
    margin-bottom: var(--0-5-rem);
}

div#infographicP2Carousel div.collapse,
div#infographicP2Carousel div.collapsing {
    background-color: var(--special-light-text);
    padding: var(--1-rem);
    margin-bottom: var(--1-rem);
}

/**************
 RATE ACTIVITY
 *************/

div.rate-intro {
    text-align: center;
}

div.rate-form {
    margin: var(--1-rem) 0;
    padding: var(--2-rem) var(--1-5-rem);
    border-radius: var(--1-5-rem);
    background-color: var(--secondary-color-00);
    color: var(--text-light);
}


div.rate-form input[type="radio"]:checked + label {
    color: var(--secondary-color);
}


div.rate-form div.form-check + div.form-check {
    margin-top: var(--0-5-rem);
}

/*******
 PROFILE
 *******/

div.advances {
    background-color: var(--primary-color);
    border-radius: var(--1-5-rem);
    padding: var(--1-5-rem);
    text-align: center;
    border: solid 2px var(--white);
    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 6px;
    margin-bottom: var(--1-rem);
}

div.advances p {
    margin-bottom: 0;
    font-size: 1.2rem;
}

.btn-profile#configuration{
    background-image: url("../images/profile/configuration-vW3ZaRU.svg");
}
.btn-profile#wellbeing{
    background-image: url("../images/profile/feedback-YydfS57.svg");
}
.btn-profile#objectives{
    background-image: url("../images/profile/purpose-BrPTRzj.svg");
}

.btn-profile#password{
    background-image: url("../images/profile/password-xJRxgpf.svg");
}
.btn-profile#notifications{
    background-image: url("../images/profile/notification-aifg-Sf.svg");
}
.btn-profile#evidence{
    background-image: url("../images/profile/quality-kxengre.svg");
}
.btn-profile#terms,
.btn-profile#privacy,
.btn-profile#cookies{
    background-image: url("../images/profile/legal-pC9OvHD.svg");
}
.btn-profile#unsubscribe{
    background-image: url("../images/profile/unsubscribe-ZjU0FWX.svg");
}
.btn-profile#logout{
    background-image: url("../images/profile/logout-cr5-qVd.svg");
}

a.btn-profile,
button.btn-profile {
    background-color: var(--primary-color-00);
    width: 100%;
    margin-bottom: var(--0-5-rem);
    border-radius: var(--3-rem);
    display: inline-block;
    padding: var(--1-rem);
    padding-left: 64px;
    text-decoration: none;
    color: var(--secondary-color);
    border: solid 2px var(--white);
    text-align: left;
    box-shadow: rgba(0, 0, 0, 0.15) 0 2px 6px;
    background-position: left 16px center;
    background-repeat: no-repeat;

}

a.btn-profile > img,
button.btn-profile > img {
    margin-right: var(--1-rem);
}

/****************
 CHANGE PASSWORD
 ***************/

div.change-password .pass-field {
    position: relative;
    margin-bottom: var(--1-5-rem);
}

div.change-password label {
    margin-left: var(--1-rem);
}

div.change-password label.text-error {
    color: var(--feedback-error-dark);
}

div.change-password label.text-correct {
    color: var(--text-link);
}

div.change-password p.text-error {
    font-size: 0.9em;
    color: var(--feedback-error-dark);
    margin-left: var(--1-rem);
}

div.toast.toast-password {
    background-color: transparent;
    border: none;
    box-shadow: none;
}

/**********************
 NOTIFICATION SETTINGS
 *********************/

.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28 255, 255, 255, 1%29'/%3e%3c/svg%3e");
    background-color: var(--neutral-20);
    border-color: var(--neutral-20);
}

.form-switch .form-check-input:checked {
    background-position: right center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28 255, 255, 255, 1%29'/%3e%3c/svg%3e");
    border-color: var(--primary-color);
    background-color: var(--primary-color);
}

div.form-switch label {
    float: left;
}

/******************
 WELLBEING REPORTS
 *****************/

div.wellbeing-reports {
    text-align: center;
}

div.wellbeing-inner {
    margin-bottom: var(--2-rem);
}

div.wellbeing-inner h4 {
    font-size: 0.8em;
    text-transform: uppercase;
}

div.wellbeing-inner a {
    width: 100%;
    border-radius: var(--2-5-rem);
    padding: var(--0-5-rem) var(--1-rem);
    background-color: var(--neutral-05);
    border-width: 1px;
    border-style: solid;
    text-decoration: none;
    display: block;
    margin-bottom: var(--0-5-rem);
    text-align: left;
}

div.wellbeing-inner a > img {
    float: right;
}

div.feedback-section-t0 h4 {
    color: var(--primary-color-20);
}

div.feedback-section-t0 a {
    border-color: var(--primary-color-20);
    color: var(--primary-color-20);
}

div.feedback-section-t1 h4 {
    color: var(--primary-color-40);
}

div.feedback-section-t1 a {
    border-color: var(--primary-color-40);
    color: var(--primary-color-40);
}

div.feedback-section-t6 h4 {
    color: var(--primary-color-60);
}

div.feedback-section-t6 a {
    border-color: var(--primary-color-60);
    color: var(--primary-color-60);
}

div.feedback-section-t12 h4 {
    color: var(--primary-color-100);
}

div.feedback-section-t12 a {
    border-color: var(--primary-color-100);
    color: var(--primary-color-100);
}

/*********
 PURPOSES
 ********/

div.purposes {
    text-align: center;

}

div.purposes a.purpose-link {
    display: block;
    width: 100%;
    background-color: var(--neutral-05);
    border: solid 1px var(--secondary-color);
    text-align: left;
    color: var(--secondary-color);
    border-radius: var(--2-5-rem);
    margin-bottom: var(--0-5-rem);
    text-decoration: none;
    padding: var(--1-rem);
}

div.purposes a.purpose-link.finished {
    background-color: var(--background-primary);
    border-color: var(--primary-color-40);
}

div.purposes a.purpose-link img.finished-badge {
    float: right;
}

div.single-objective {
    text-align: center;
    padding: var(--0-5-rem);
}

div.single-objective h3 {
    margin-bottom: var(--1-rem);
}


/**************************************
 * DESIGN CHANGES FOR DESKTOP VERSION *
 **************************************/

@media (min-width: 700px) and (min-height: 900px) {
    div.container.content-card {
        border: 2px solid var(--secondary-color-00);
        border-radius: var(--1-rem);
        max-width: 700px;

    }

    div.content-card-header {
        padding: var(--2-rem) 0;
    }

    body {
        padding-top: var(--2-5-rem);
        padding-bottom: var(--2-5-rem);
    }

    div.content-card-header .side-left {
        margin-left: var(--2-rem);
    }

    div.content-card-header .side-right {
        margin-right: var(--2-rem);
    }
}

/*********
 PANDORIN
 ********/

img.pandorin-120 {
    display: block;
    margin: var(--1-rem) auto;
    width: 120px;
    height: 120px;
}

img.pandorin-240 {
    display: block;
    margin: var(--1-rem) auto;
    width: 240px;
    height: 240px;
}

/*************
 VIDEO PLAYER
 ************/

iframe.note-video-clip {
    max-width: 100%;
}

/********************************
 DESIGN CHANGES FOR SMALL PHONES
 *******************************/

@media (max-width: 400px) {
    footer {
        padding: var(--0-75-rem) var(--0-25-rem);
    }

    footer a{
        padding: var(--0-5-rem) var(--1-rem);
    }

    a.module-link {
        width: auto;
        padding: var(--1-rem);
    }

    .split-right {
        padding: 50px 40px;
    }

    div.screening-done-buttons {
        grid-template-columns: 1fr;
    }
}