@charset "utf-8";

.pre-stepform {
    top: 2%;
    left: 4.84%;
    width: 7%;
    border: 1px solid #ff7da3;
    border-radius: 5px;
    background-color: #fff;
    margin: 0 auto;
    position: absolute;
    transition: all 0.5s;
    z-index: 10000;
}

@media screen and (max-width: 365px) {
    .pre-stepform {
        top: 3%;
        left: 1.85%;
        width: 13%;
    }
}

@media (min-width: 366px) and (max-width: 768px) {
    .pre-stepform {
        left: 0.9%;
        width: 15%;
    }
}

.pre-stepform.hide {
    display: none;
}

.pre-stepform-item {
    background-color: #fff;
    text-align: center;
}

.pre-stepform-header {
    background-color: #ff7da3;
    padding: 8px 0;
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 22px;
    border-radius: 5px 5px 0 0;
}

@media screen and (max-width: 768px) {
    .pre-stepform-header {
        font-size: 15px;
    }
}

.pre-stepform-step {
    padding: 12px 12px 25px;
}

@media screen and (max-width: 768px) {
    .pre-stepform-step {
        padding-bottom: 30px;
    }
}

.pre-stepform-step-title {
    font-weight: bold;
    font-size: 19px;
    margin-bottom: 25px;
}

@media screen and (max-width: 768px) {
    .pre-stepform-step-title {
        margin: 10px 0 25px;
    }
}

.pre-stepform-step-category {
    margin: -4px;
    justify-content: center;
}

/* ========================================
   Radio Item / Button
======================================== */

.pre-stepform-step-item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    min-width: calc((100% / 3) - 20px);
    height: auto;
    margin: 4px 4px 10px 16px;
    padding: 5px 45px 5px 12px;
    border: 2px solid #ff7da3;
    border-radius: 8px;
    background-image: linear-gradient(to bottom, #ffffff 0%, #fff4f7 100%);
    color: #634e4e;
    font-size: 14px;
    font-weight: normal;
    line-height: 19px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 4px 0 #e35f88;
    transition:
        transform 0.08s ease,
        box-shadow 0.08s ease,
        background 0.15s ease;
}

.pre-stepform-step-item::after {
    content: "›";
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28px;
    font-weight: bold;
    color: #ff7da3;
    line-height: 1;
    transition: transform 0.15s ease;
}

.pre-stepform-step-item:hover,
.pre-stepform-step-item:focus,
.pre-stepform-step-item:focus-within {
    background-image: linear-gradient(to top, #FF7DA3 0%, #ff7da291 100%);
    color: #fff;
    outline: none;
}

.pre-stepform-step-item:hover::after {
    transform: translateY(-50%) translateX(3px);
}

.pre-stepform-step-item:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #e35f88;
}

.pre-stepform-step-item:has(.radio_input:checked)::after {
    color: #fff;
}

.pre-stepform-step-item:has(.radio_input:checked):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #d94f7a;
}

@media screen and (max-width: 768px) {
    .pre-stepform-step-item {
        font-size: 13px;
    }
}

/* ========================================
   Radio Input
======================================== */

.radio_input {
    display: none;
}

/* ========================================
   Radio Icon
======================================== */

.radio_icon {
    display: none;
}

/* ========================================
   Radio Text
======================================== */

.radio_text {
    width: 100%;
    margin-left: 0;
    text-align: center;
    font-size: 17px;
    font-weight: bold;
}

@media screen and (max-width: 768px) {
    .radio_text {
        font-size: 16px;
    }
}

/* ========================================
   Inactive
======================================== */

.backgroundCover.inactive,
.qualification_col.inactive,
.js-header-nav.inactive,
footer #info.inactive {
    pointer-events: none;
}

.button-wrap.inactive {
    z-index: 0;
    pointer-events: none;
}

.navigate_cursor.inactive {
    z-index: 0;
    pointer-events: none;
}