@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

* {
    font-family: "Pretendard";
}

.modal {
    background: rgba(0, 0, 0, 0.50);
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    > div, > form {
        border-radius: 20px;
        background: var(--White, #FFF);
    }

    button {
        cursor: pointer;
        padding: 8px 11.2px;
        border-radius: 8px;
    }

    .button1 {
        color: var(--Grey-700, #404040);
        text-align: center;

        /* Body/18px */
        font-family: Pretendard;
        font-size: 14.4px;
        font-style: normal;
        font-weight: 500;
        line-height: 150%; /* 27px */
        background: var(--Grey-100, #D9D9D9);
    }

    .button2 {
        color: var(--White, #FFF);
        text-align: center;

        /* Title/18px */
        font-family: Pretendard;
        font-size: 14.4px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%; /* 27px */
        background: var(--Grey-100, #516FEB);
    }
}

.empty-img {
    width: 177px
}

.empty-1 {
    color: var(--Grey-400, #8C8C8C);
    text-align: center;

    /* Title/18px */
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 27px */
}

.empty-2 {
    color: var(--Grey-400, #8C8C8C);
    text-align: center;

    /* Body/16px */
    font-family: Pretendard;
    font-size: 12.8px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 24px */
}

.div91 {
    color: #595959;
    text-align: center;
    /* Body/12px */
    font-size: 9.6px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 18px */
    margin-bottom: 11.2px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.div92 {
    color: #0D0D0D;
    padding-left: 14px;
    /* Title/12px */
    font-family: Pretendard, sans-serif;
    font-size: 9.6px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 18px */
    margin-bottom: -30px;
}

.circle-chart {
    position: relative;
    width: 220.8px;
    height: 220.8px;
    border-radius: 50%;
    background: conic-gradient(
            #6b82ec 0% calc(var(--percent) * 1%),
            #DAE1FB calc(var(--percent) * 1%) 100%
    );
}

.circle-chart-empty {
    top: 0;
    width: 220.8px;
    height: 220.8px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

.circle-chart-empty div {

    width: 168.8px;
    height: 168.8px;
    border-radius: 50%;
    background-color: #fff;

    color: #000;
    font-family: Pretendard;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 90px */

    display: flex;
    justify-content: center;
    align-items: center;
}