/* ******************************************** */
/** Profile info
/* ******************************************** */

/*
.c-profile-info__switchable[data-content="1"]{
    display: none;
}

.c-profile-info__switchable[data-content="2"]{
    display: none;
}


.c-profile-info__switchable[data-content="3"]{
    display: none;
}*/



/* ******************************************** */

.c-profile-info{
    background-color: var(--color-lightgray);
}

.c-profile-info__viewport{
    background-color: var(--color-lightest);
    width: 100%;
    max-width: var(--wrapper);
    margin-left: auto;
    margin-right: auto;
    padding: 30px calc(var(--space-x)*1.4) var(--section-y)
}

.c-profile-info__separator{
    margin-top: calc(var(--section-y)/1.8);
    margin-bottom: calc(var(--section-y)/1.8);
    border: 1px solid #e5e6e9;
}

.c-profile-info__separator--xl{
    margin-top: var(--section-y);
    margin-bottom: var(--section-y);
    margin-left: calc(var(--space-x)* -1.4);
    margin-right: calc(var(--space-x)* -1.4);
}


/* Form */

.c-profile-info__section.c-form__section{
    position: relative;
    max-width: none;
}

.c-profile-info__section.c-form ul:not(.c-form__list) li{
    padding-bottom: calc(var(--section-y)/1.3);
    margin-bottom: calc(var(--section-y)/1.8);
    border-bottom: 1px solid #e5e6e9;
}

.c-profile-info__section .c-form__label:not(.c-form__label--radio):not(.c-form__label--checkbox){
    color: var(--color-darkgray);
    font-weight: 500;
}

.c-profile-info__section .c-form__input{
    font-weight: 600;
}

.c-profile-info__section  .c-form__label--radio,
.c-profile-info__section  .c-form__label--checkbox{
    color: var(--color-darkest);
    font-weight: 600;
}

.c-profile-info__section  .c-form__label--radio{
    margin-left: 15px;
}

.c-profile-info__section .c-form__input--textarea{
    font-weight: 400;
}

/* Submit btn */

.c-profile__submit{
    position: fixed;
    z-index: 100;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 35px;
    white-space: nowrap;
    min-width: 215px;
    border-radius: 25px;
    font-size: 1.8rem;
    box-shadow: rgba(32,32,32,.6) 0px 10px 18px -10px;
}

.c-profile__submit.is-disabled{
    background-color: var(--color-gray);
    color: rgba(255,255,255,.5);
}

.c-profile-info__intro {
    position: relative;
    font-size: 1.6rem;
    margin-bottom: 3em;
    line-height: 1.7;
    max-width: 58em;
    border-radius: 1.2rem;
    padding: 1.3em;
    padding-left: 3.3em;
    background: rgb(151 188 73 / 3%);
    border: 1px solid var(--color-primary);
    color: #484848;
    margin-bottom: 3em !important;
    margin-inline: -1.2rem;
}

.c-profile-info__intro:before {
    content: "";
    position: absolute;
    left: 1.3em;
    top: 1.4em;
    width: 2.4rem;
    height: 2.5rem;
    background-image: url(/images/static/hint.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

/* ********************** de Mobile a TABLET ********************** */

@media (min-width: 768px) {

    :root{
        --form-paddings: 36px;
    }

    .c-profile-info__separator--xl{
        margin-left: calc(var(--form-paddings)* -1);
        margin-right: calc(var(--form-paddings)* -1);
    }

    .c-profile-info__viewport{
        padding-top: 0;
        padding: calc(var(--section-y) / 1.5) var(--form-paddings);
    }

    .c-profile-info__holder{
        position: relative;
        top: -48px;
        left: 0;
        width: 100%;
        max-width: var(--wrapper);
        margin-left: auto;
        margin-right: auto;
        padding-left: calc(var(--space-x)*2);
        padding-right: calc(var(--space-x)*2);

    }

}

/* ********************** de Tablet a DESKTOP ********************** */

@media (min-width: 980px) {

    :root{
        --form-paddings: 38px;
    }

    .c-profile-info__holder{
        width: 90%;
        max-width: 900px;
    }

    /* Form */

    .c-profile-info__section.c-form__section,
    .c-profile-info__section.c-form ul li{
        gap: 32px;
    }

    /* Submit btn */

    .c-profile__submit{
        bottom: 25px;
    }
    
    .c-profile__submit:hover,
    .c-profile__submit:focus{
        background-color: var(--color-hover);
        -webkit-transition: background-color 300ms ease-out;
        -moz-transition: background-color 300ms ease-out;
        transition: background-color 300ms ease-out;
    }
}

/* ********************** de Desktop a DESKTOP 2 ********************** */

@media (min-width: 1200px) {

    :root{
        --form-paddings: 50px;
    }

}


/* ********************** de Desktop 2 a HD ********************** */

@media (min-width: 1400px) {

    :root{
        --form-paddings: 60px;
    }
    
    /* Submit btn */

    .c-profile__submit{
        bottom: 35px;
        font-size: 1.9rem;
        width: 230px;
    }

}


/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {

    .c-profile-info__holder{
        max-width: 980px;
    }
    
    /* Submit btn */

    .c-profile__submit{
        bottom: 45px;
    }
}

/* ********************** de Hd a FULL HD ********************** */

@media (min-width: 1600px) {
    
    /* Submit btn */

    .c-profile__submit{
        font-size: 2rem;
        width: 240px;
        bottom: 55px;
    }
}