/* This file is used as dependency in:
   ../../modules/sec-guide.module/module.html */

.pwr-guide {
    opacity: 0;
}

.pwr-guide.active {
    opacity: 1;
}

.pwr-guide__question + .pwr-guide__desc {
    margin-top: 30px;
}

.pwr-guide__desc {
    font-size: 18px; /* fallback */
    font-size: var(--fs-desc-sec);
    font-weight: var(--fw-desc-sec);
    letter-spacing: var(--ls-desc-sec);
    line-height: var(--lh-desc-sec);
}

.pwr-guide__back {
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: block;
    font-weight: 600;
    margin-top: 32px;
    opacity: 0.6;
    padding: 0px;
}

.pwr-guide__back:not(.active) {
    height: 0;
    margin: 0;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
}

.pwr--dark .pwr-guide__back {
    color: var(--clr-text-dk);
}

.pwr-guide__back:hover {
    color: var(--clr-primary);
    opacity: 1;
    outline: 0;
}

.pwr-guide__back:focus {
    color: var(--clr-primary);
    opacity: 1;
    outline: 0;
}

.pwr--dark .pwr-guide__back:hover {
    color: var(--clr-primary);
    opacity: 1;
    outline: 0;
}

.pwr--dark .pwr-guide__back:focus {
    color: var(--clr-primary);
    opacity: 1;
    outline: 0;
}

.pwr-guide__answers {
    background-color: transparent;
    margin: 50px -5px -5px;
}

.pwr-guide__answer--btn {
    background-color: var(--clr-background-accent-lt);
    border: 0px;
    border-radius: var(--br);
    color: var(--clr-text-lt);
    cursor: pointer;
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6em;
    margin: 5px;
    padding: 14px 28px;
}

.pwr-guide__answer--btn:disabled {
    background-color: var(--clr-background-accent-lt);
    border: 0px;
    border-radius: var(--br);
    color: var(--clr-text-lt);
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6em;
    margin: 5px;
    padding: 14px 28px;
}

.pwr-guide__answer--link {
    background-color: var(--clr-background-accent-lt);
    border: 0px;
    border-radius: var(--br);
    color: var(--clr-text-lt);
    display: inline-block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.6em;
    margin: 5px;
    padding: 14px 28px;
}

.pwr--dark .pwr-guide__answer--btn {
    background-color: var(--clr-background-accent-dk);
    color: var(--clr-text-dk);
}

.pwr--dark .pwr-guide__answer--btn:disabled {
    background-color: var(--clr-background-accent-dk);
    color: var(--clr-text-dk);
}

.pwr--dark .pwr-guide__answer--link {
    background-color: var(--clr-background-accent-dk);
    color: var(--clr-text-dk);
}

.pwr-guide__answers.pwr--light .pwr-guide__answer--btn {
    background-color: var(--clr-background-accent-lt);
    color: var(--clr-text-lt) !important;
}

.pwr-guide__answers.pwr--light .pwr-guide__answer--btn:disabled {
    background-color: var(--clr-background-accent-lt);
    color: var(--clr-text-lt) !important;
}

.pwr-guide__answers.pwr--light .pwr-guide__answer--link {
    background-color: var(--clr-background-accent-lt);
    color: var(--clr-text-lt) !important;
}

.pwr-guide__answer--btn:disabled {
    background-color: transparent;
    color: inherit;
    cursor: default;
    opacity: 0.5;
    outline: 0;
}

.pwr-guide__answer--btn:disabled:hover {
    background-color: transparent;
    color: inherit;
    cursor: default;
    opacity: 0.5;
    outline: 0;
}

.pwr-guide__answer--btn:disabled:focus {
    background-color: transparent;
    color: inherit;
    cursor: default;
    opacity: 0.5;
    outline: 0;
}

.pwr-guide__back:disabled {
    background-color: transparent;
    color: inherit;
    cursor: default;
    opacity: 0.5;
    outline: 0;
}

.pwr-guide__back:disabled:hover {
    background-color: transparent;
    color: inherit;
    cursor: default;
    opacity: 0.5;
    outline: 0;
}

.pwr-guide__back:disabled:focus {
    background-color: transparent;
    color: inherit;
    cursor: default;
    opacity: 0.5;
    outline: 0;
}

.pwr--dark .pwr-guide__answer--btn {
    border: 0px;
    color: var(--clr-text-dk);
}

.pwr--dark .pwr-guide__answer--link {
    border: 0px;
    color: var(--clr-text-dk);
}

.pwr-guide__answer--btn:hover {
    background-color: var(--clr-primary);
    border: 0px;
    color: var(--clr-text-dk) !important;
    outline: 0;
}

.pwr-guide__answer--btn:focus {
    background-color: var(--clr-primary);
    border: 0px;
    color: var(--clr-text-dk) !important;
    outline: 0;
}

.pwr-guide__answer--link:hover {
    background-color: var(--clr-primary);
    border: 0px;
    color: var(--clr-text-dk) !important;
    outline: 0;
}

.pwr-guide__answer--link:focus {
    background-color: var(--clr-primary);
    border: 0px;
    color: var(--clr-text-dk) !important;
    outline: 0;
}

.pwr-guide__answer--text-only {
    margin: 16px 0;
}

@media (max-width: 767px) {

    .pwr-guide__desc {
        font-size: var(--fs-desc-sec-tablet);
        letter-spacing: var(--ls-desc-sec-tablet);
        line-height: var(--lh-desc-sec-tablet);
    }
}

@media (max-width: 575px) {

    .pwr-guide__desc {
        font-size: var(--fs-desc-sec-mobile);
        letter-spacing: var(--ls-desc-sec-mobile);
        line-height: var(--lh-desc-sec-mobile);
    }
}

.pwr-sec-guide {
    padding: 140px 0;
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.pwr-sec-guide--centered .pwr-guide__inner {
    margin: 0 auto;
}

.pwr-sec-guide--centered .pwr-guide__question {
    margin: 0 auto;
}

.pwr-sec-guide--centered .pwr-guide__back {
    margin-left: auto;
    margin-right: auto;
}