@import "../common/header.css";
@import "../common/footer.css";
@import "../common/section_title.css";
@import "../common/label_hidden.css";
@import "./components/input_container.css";
@import "../common/banner.css";

.wrapper_container{
    padding-block: 8rem;
    .w-560{
        padding:5.6rem;
        border:1px solid rgb(228, 229, 237);
        border-radius: 0.8rem;
    }
}
.profile_image_container{
    width:10rem;
    height:10rem;
    margin:0 auto;
    border:1px solid #e8e8e8;
    border-radius: 50%;
    overflow: hidden;
    img{
        display: block;
        width:100%;
        height:100%;
        object-fit: cover;
    }
}
.profile_button_container{
    input{
        display: none;
    }
    label{
        display: flex !important;
        align-items: center;
        justify-content: center;
        width:5rem;
        height:5rem;
        margin:-3rem auto 0!important;
        color:#aaa;
        font-size:3rem !important;
        line-height: 1;
        border-radius: 50%;
        border:1px solid #e8e8e8;
        background-color:#fff;
        cursor: pointer;
        &:after{
            display: none;
        }
    }
}
.input_item_container{
    margin-bottom:2rem;
    &:last-child{
        margin-bottom:0;
    }
    input[type=text],
    input[type=password]{
        width: 100%;
        height:4.2rem;
        padding:1rem 5rem 1rem 1rem;
        font-size:1.6rem;
        border:1px solid rgb(228, 229, 237);
        border-radius: 0.8rem;
        &::placeholder{
            color:#e8e8e8;
            font-size:1.6rem;
        }
    }
    input[type=date] {
        width: 100%;
        height:4.2rem;
        position: relative;
        padding:1rem;
        font-family: var(--font-400);
        font-size:1.6rem;
        border:1px solid rgb(228, 229, 237);
        border-radius: 0.8rem;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        &::placeholder{
            color:#e8e8e8;
            font-size:1.6rem;
        }
        &::-webkit-calendar-picker-indicator {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
            background: transparent;
            color: transparent;
        }
    }
    input:checked{
        & + label{
            background-color:#000;
            color:#fff;
        }
    }
    label,legend{
        display: block;
        position:relative;
        margin-bottom:0.8rem;
        font-size:1.6rem;
        &.required {
            &:after{
                content:"*";
                position:relative;
                left:0.4rem;
                color:#ff402b;
                font-size:1.4rem;
            }
        }
    }
    .gender_label{
        flex:1;
        display: flex;
        align-items: center;
        justify-content: center;
        height:4rem;
        font-size:1.6rem;
        border:1px solid #e8e8e8;
        border-radius: 0.8rem;
        cursor: pointer;
        &:after{
            display: none;
        }
    }
    .email_at{
        color:rgb(228, 229, 237);
        font-size:1.6rem;
    }
    .calander_input_box {
        width: 100%;
        position: relative;
        &::after {
            content: "🗓️";
            font-size: 1.8rem;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            right: 0.5rem;
        }
    }
}
.select_box_container{
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position:relative;
    width:20rem;
    height:4.2rem;
    padding-inline:1rem;
    font-size:1.6rem;
    border:1px solid rgb(228, 229, 237);
    border-radius: 0.8rem;
    cursor: pointer;
    &.visible{
        .select_box_button{
            transform: translateY(-50%) rotate(180deg);
        }
        .select_option_list{
            display: block;
        }
    }
    .select_box_button{
        display: flex;
        align-items: center;
        justify-content: center;
        position:absolute;
        right:0.5rem;
        top:50%;
        transform: translateY(-50%);
        width:2.4rem;
        height:2.4rem;
        svg{
            color:rgb(228, 229, 237);
            width:2.4rem;
        }
    }
    .select_option_list{
        display: none;
        position:absolute;
        bottom:-0.5rem;
        left:0;
        transform: translateY(100%);
        width:100%;
        padding-block:0.5rem;
        border:1px solid rgb(228, 229, 237);
        background-color:#fff;
        border-radius: 1rem;
        box-shadow: 0.5rem 0.5rem 0.5rem rgb(228, 229, 237);
        z-index: 1;
        button{
            display: block;
            text-align: left;
            width:100%;
            padding:0.5rem 1rem;
            font-size:1.6rem;
            border:none;
            background-color:#fff;
            cursor: pointer;
            @media (hover: hover) {
                &:hover{
                    background-color:#f5f5f5;
                }
            }
        }
    }
}
.user_email_local,
.user_email_domain{
    padding-right:1rem !important;
}
.input_button_container{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap:0.8rem;
    button{
        flex:1 0 auto;
        padding-inline:1rem;
        height:4.2rem;
        background-color:rgb(228, 229, 237);
        border-radius: 0.8rem;
        border:none;
    }
}
.password_button_container{
    position:relative;
    width: 100%;
    button{
        position:absolute;
        right:0.5rem;
        top:45%;
        transform: translateY(-50%);
        padding:0.5rem;
        width:3rem;
        height:3rem;
        font-size:1.8rem;
        border:none;
        background-color:#fff;
        cursor: pointer;
        &.off{
            opacity: 0.5;
            filter: grayscale(1);
        }
        @media (hover:hover) {
            &:hover{
                scale: 0.9;
            }
        }
    }
}
.chk_input {
    width: fit-content;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    cursor: pointer;
}
.submit_button{
    display: flex;
    align-items: center;
    justify-content: center;
    width:20rem;
    height:4rem;
    margin:3rem auto 0;
    font-size:1.6rem;
    border:1px solid #e8e8e8;
    border-radius: 0.5rem;
    background-color:#eee;
}
.error_notice{
    margin-top:0.5rem;
    color:#ff402b;
    font-size:1.4rem;
}