:root {
    --font-hc-primary: Segoe UI;
    --color-txt-hc-white-pure: rgba(255, 255, 255);
    --color-txt-hc-white-semi: rgba(255, 255, 255,0.87);
    --color-txt-hc-white-neutral: rgba(255, 255, 255,0.52);
    --color-txt-hc-white-light: rgba(255, 255, 255,0.24);
    --color-txt-hc-white-disabled: rgba(255, 255, 255,0.12);
    --color-txt-hc-black-pure: rgba(8, 10, 10);
    --color-txt-hc-black-semi: rgba(8, 10, 10,0.87);
    --color-txt-hc-black-neutral: rgba(8, 10, 10,0.52);
    --color-txt-hc-black-light: rgba(8, 10, 10,0.24);
    --color-txt-hc-black-disabled: rgba(8, 10, 10,0.12);
    --color-hc-primary-950: #054273;
    --color-hc-primary-900: #064F8B;
    --color-hc-primary-800: #075FA7;
    --color-hc-primary-700: #206fb0;
    --color-hc-primary-600: #397fb9;
    --color-hc-primary-500: #518FC1;
    --color-hc-primary-400: #6a9fca;
    --color-hc-primary-300: #83afd3;
    --color-hc-primary-200: #9cbfdc;
    --color-hc-primary-100: #b5cfe5;
    --color-hc-primary-50: #CDDFED;
    --color-hc-primary-25: #E6EFF6;
    --color-hc-neutral-black-100: rgba(30, 30, 36);
    --color-hc-neutral-black-88: rgba(30, 30, 36,0.88);
    --color-hc-neutral-black-72: rgba(30, 30, 36,0.72);
    --color-hc-neutral-black-64: rgba(30, 30, 36,0.64);
    --color-hc-neutral-black-52: rgba(30, 30, 36,0.52);
    --color-hc-neutral-black-48: rgba(30, 30, 36,0.48);
    --color-hc-neutral-black-32: rgba(30, 30, 36,0.32);
    --color-hc-neutral-black-24: rgba(30, 30, 36,0.24);
    --color-hc-neutral-black-16: rgba(30, 30, 36,0.16);
    --color-hc-neutral-black-12: rgba(30, 30, 36,0.12);
    --color-hc-neutral-black-8: rgba(30, 30, 36,0.8);
    --color-hc-neutral-black-4: rgba(30, 30, 36,0.4);
    --color-hc-bg: #FCFCFC;
    --color-hc-fg: #F6F6F6;
    --color-hc-fg-01: #F0F0F0;
    --color-hc-fg-02: #ECECEC;
    --color-hc-elev-01: #FCFCFC;
    --color-hc-elev-02: #F6F6F6;
    --color-hc-elev-03: #F0F0F0;
    --color-hc-elev-04: #ECECEC;
    --color-hc-elev-05: #ECECEC;
    --color-hc-elev-06: #ECECEC;
}

/*panel*/
.bg-hc-primary {
    background-color: var(--color-hc-bg);
}

.bg-hc-secondary-radius {
    border-radius: 10px;
    background: #FFF;
}

/*button*/
.btn-hc-primary {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border-style: none;
    border-width: 0px;
    background: var(--color-hc-primary-700);
    color: var(--color-hc-primary-25);
    text-align: center;
    font-family: var(--font-hc-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


.btn-hc-primary:hover {
    background-color: var(--color-hc-primary-700);
}


.btn-hc-primary:focus 
{
    background-color: var(--color-hc-primary-700);
    border: 3px solid var(--color-hc-primary-100);
}

    .btn-hc-primary:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }

.btn-hc-secondary {
    font-family: var(--font-hc-primary);
    font-size: 14px;
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-hc-primary-25);
    border-style: none;
    border-width: 0px;
}

    .btn-hc-secondary:hover {
        background: var(--color-hc-primary-50);
    }

    .btn-hc-secondary:focus {
        border: 3px solid var(--color-hc-primary-200);
        background: var(--color-hc-primary-25);
    }

    .btn-hc-secondary:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }

.btn-hc-tertiary {
    font-family: var(--font-hc-primary);
    font-size: 14px;
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-primary-700);
    background: var(--color-neutral-white-8);
}

    .btn-hc-tertiary:hover {
       
        border: 1px solid var(--color-primary-800);
        background: var(--color-primary-25);
    }

    .btn-hc-tertiary:focus {
       
        border: 3px solid var(--color-primary-100);
        background: var(--color-primary-25);
    }

    .btn-hc-tertiary:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }


.btn-hc-quaternary {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--Neutral-White-White-8, rgba(255, 255, 255, 0.08));
    color: var(--color-hc-primary-700);
    text-align: center;
    font-family: var(--font-hc-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


    .btn-hc-quaternary:hover {
        background: var(--color-hc-primary-25);
    }

    .btn-hc-quaternary:focus {
        border: 3px solid var(--color-hc-primary-100);
    }


    .btn-hc-quaternary:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }

.btn-hc-success {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-hc-success-800);
    color: var(--color-txt-hc-black-pure);
    text-align: center;
    font-family: var(--font-hc-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}

    .btn-hc-success:hover {
        background: var(--color-hc-success-900);
    }

    .btn-hc-success:focus {
        border: 3px solid var(--color-hc-success-100);
        background: var(--color-hc-success-800);
    }

    .btn-hc-success:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }

.btn-hc-info {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-hc-info-800);
    color: var(--color-hc-info-25);
    text-align: center;
    font-family: var(--font-hc-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


    .btn-hc-info:hover {
        background: var(--color-hc-info-900);
    }

    .btn-hc-info:focus {
        border: 3px solid var(--color-hc-primary-50);
        background: var(--color-hc-info-800);
    }


    .btn-hc-info:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }

.btn-hc-warning {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-hc-warning-400);
    color: var(--color-txt-hc-black-semi);
    text-align: center;
    font-family: var(--font-hc-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}


    .btn-hc-warning:hover {
        background: var(--color-hc-warning-500);
    }

    .btn-hc-warning:focus {
        border: 3px solid var(--color-hc-warning-100);
        background: var(--color-hc-warning-400);
    }

    .btn-hc-warning:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }


.btn-hc-danger {
    display: flex;
    height: 32px;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    background: var(--color-hc-danger-600);
    color: var(--color-txt-white-pure);
    text-align: center;
    font-family: var(--font-hc-primary);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 12px;
}

    .btn-hc-danger:hover {
        background: var(--color-hc-danger-700);
    }

    .btn-hc-danger:focus {
        border: 3px solid var(--color-hc-danger-100);
        background: var(--color-hc--danger-600);
    }

    .btn-hc-danger:disabled {
        color: var(--color-txt-hc-black-disabled);
        background: var(--color-hc-neutral-black-8);
    }