#onboarding {
    background-image: url("../../../../../../media/static/background.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
}

#onboarding  button { position: fixed; }

#onboarding > [_lang] {
    position: absolute;
    width: 2rem;
    top: 1rem;
    right: 1rem;
    border-radius: 0.2rem;
    z-index: 1;
}

#onboarding:not([_step="welcome"]) #welcome { opacity: 0; pointer-events: none; }
#onboarding:not([_step="general"]) #general { opacity: 0; pointer-events: none; }
#onboarding:not([_step="camera"]) #camera { opacity: 0; pointer-events: none; }
#onboarding:not([_step="preface"]) #preface { opacity: 0; pointer-events: none; }
#onboarding:not([_step="guide"]) #guide { opacity: 0; pointer-events: none; }

#onboarding .step {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#onboarding h1 {
    font-weight: 600; margin: 0; letter-spacing: 0.02rem; text-transform: uppercase; color: transparent; -webkit-text-stroke: 0.5px whitesmoke; text-stroke: 0.5px whitesmoke;
    font-size: 3rem;
}

#onboarding h3 {
    font-weight: 100;
    letter-spacing: 0.1rem;
    font-size: 1.2rem;
}
/*body > main > section h2 {  }*/

#onboarding .step > .content {
    width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 3rem 2rem 7rem 2rem;
    overflow-y: auto;
    -webkit-mask-image: linear-gradient(to bottom, transparent, transparent 1rem, black 4rem, black calc(100% - 8rem) , transparent calc(100% - 5rem) ,transparent 100% );
    mask-image: linear-gradient(to bottom, transparent, transparent 1rem, black 3rem, black calc(100% - 8rem) , transparent calc(100% - 5rem) ,transparent 100% );
}

/*WELCOME STEP*/
#onboarding  #welcome > .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#onboarding  #welcome > .content > [_lang] {
    text-align: center;
}

#onboarding  #welcome .fullscreen {
    margin-top: 4rem;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


/*GENERAL STEP*/

#onboarding  #general h3 {
    margin-top: 1rem;
    margin-bottom: 5rem;
}

#onboarding > #general > .content > [_lang] > section:not(:last-child) {
    margin-bottom: 4rem;
}

#onboarding  #general .more {
    color: whitesmoke;
    opacity: 0.4;
}

#onboarding section.performance .complexity-warning {
    font-size: 1.2rem;
    color: var(--alert-color);
}

#onboarding section.performance > p { margin-bottom: 1rem; }

#onboarding section.performance:not(.details) .details { display: none; }
#onboarding section.performance.details .more { display: none; }

#onboarding  #general section.detail {
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.25rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

#onboarding  #general h4 {
    opacity: 0.85;
}

#onboarding  #general section h5 {
    color: var(--tertiary-heading-color);
    margin-top: 0;
}

/*CAMERA STEP*/
#onboarding  #camera > .content > section:first-child {
    text-align: center;
    margin-top: 6rem;
}

#onboarding  #camera .icon.camera {
    font-size: 10rem;
    color: rgba(255,255,255,0.3);
}

#onboarding #camera [_phase] {
    margin-top: 4rem;
    margin-left: auto;
    margin-right: auto;
}

#onboarding  #camera [_phase="failed"] {
    padding: 1rem;
    border: 1px solid rgba(255,0,0,0.2);
    color: whitesmoke;
}
#onboarding #camera:not([_phase="failed"]) [_phase="failed"] { display: none; }

#onboarding  #camera [_phase="rejected"] {
    padding: 1rem;
    border: 1px solid rgba(255,0,0,0.2);
    color: whitesmoke;
}

#onboarding #camera:not([_phase="rejected"]) [_phase="rejected"] { display: none; }

/*TASKS*/

#onboarding #preface > .content > .tasks { margin-top: 4rem; }
#onboarding #preface > .content > .tasks.disabled { display: none; }

/*GUIDE*/

#onboarding  #guide .icon.phone {
    font-size: 10rem;
    color: rgba(255,255,255,0.3);
}
#onboarding  #guide > .content > section:first-child {
    text-align: center;
    margin-top: 4rem;
}

#onboarding  #guide p:not(:last-child) {
    margin-bottom: 2rem;
}

#onboarding  #guide .markers {
    text-align: center;
}

#onboarding  #guide img {
    width: 5rem;
}

#onboarding  #guide[_markers="1"] .multiple { display: none; }
#onboarding  #guide:not([_markers="1"]) .single { display: none; }

/*DEV SKIP*/
#onboarding .skip {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 50;
    width: 5rem;
    cursor: pointer;
}
body:not([dev]) #onboarding .skip { display: none; }