/* font size */
.text-xs {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
}

.text-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}

.text-md {
    font-size: 1rem;
    line-height: 1.5rem;
}

.text-xl {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
}

/* text color */
.text-black {
    color: #2E2E2E;
}

.text-gray {
    color: #848484;
}

.text-gray-deep {
    color: #4B465C;
}

.text-orange {
    color: #FF7B31;
}

.text-blue-light {
    color: #349DFF;
}

.text-blue {
    color: #4286F3;
}


/* text elips */
.text-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* space */
.space-p-2 {
    /* padding 8px */
    padding: 0.5rem;
}

.space-p-3 {
    /* padding 12px */
    padding: 0.75rem;
}

.space-p-4 {
    /* padding 16px */
    padding: 1rem;
}

.space-px-3 {
    /* padding 12px */
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.space-px-4 {
    /* padding 16px */
    padding-left: 1rem;
    padding-right: 1rem;
}

.space-px-5 {
    /* padding 20px */
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.space-py-2 {
    /* padding 8px */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.space-py-3 {
    /* padding 12px */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.space-py-4 {
    /* padding 16px */
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.space-px-7 {
    /* padding 28px */
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

.space-pt-1 {
    padding-top: 0.25rem;
}

.space-pt-2 {
    padding-top: 0.5rem;
}

.space-pt-3 {
    padding-top: 0.75rem;
}

.space-pt-4 {
    /* padding 16px */
    padding-top: 1rem;
}

.space-pt-5 {
    /* padding 16px */
    padding-top: 1.25rem;
}

.space-pb-7 {
    /* padding 28px */
    padding-bottom: 1.75rem;
}

.space-py-1 {
    /* padding 4px */
    padding-bottom: 0.25rem;
    padding-top: 0.25rem;
}

.space-py-4 {
    /* padding 16px */
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.space-py-5 {
    /* padding px */
    padding-bottom: 1.25rem;
    padding-top: 1.25rem;
}

.space-mb-160 {
    /* pc margin bottom 160px */
    @media (min-width: 1024px) {
        margin-bottom: 160px;
    }
}

.space-mb-150 {
    /* pad margin bottom 150px */
    @media (min-width: 768px) {
        margin-bottom: 150px;
    }
}

.space-mb-120 {
    /* mobile margin bottom 120px */
    @media (min-width: 320px) {
        margin-bottom: 120px;
    }
}

/* radius */
.rounded-progress {
    border-radius: 30px;
}

.rounded-md {
    border-radius: 0.375rem; /* 6px */
}

.rounded-xl {
    border-radius: 0.75rem; /* 12px */
}

.rounded-b-xl {
    border-radius: 0 0 0.75rem 0.75rem; /* 12px */
}

.rounded-full {
    border-radius: 100%; /* 12px */
}

/* border-color */

.border-orange {
    border-color: #FFF5EF !important;
}

.border-orange-deep {
    border-color: #FF4F3E !important;
}

.border-blue-deep {
    border-color: #3457FF !important;
}

.border-blue-light {
    border-color: #349DFF !important;
}

    .border-blue-light:hover {
        border-color: #4B465C !important;
    }


/* background color */
.bg-orange {
    background-color: #FFF5EF;
}

.bg-orange-deep {
    background-color: #FFECE1;
}

.bg-blue-light {
    background-color: #349DFF;
}

.bg-gray-light-1 {
    background-color: #F0F0F0;
}

.bg-gray-light-2 {
    background-color: #EEEEEE;
}
/* Btn */

.btn-orange-light {
    background-color: #FFF5EF;
}

.btn-orange {
    background-color: #FF7B31;
    color: white;
}

.btn-outline-orange {
    border: 1px solid #FF7B31;
    color: #FF7B31;
}

    .btn-outline-orange:hover {
        border: 1px solid #FF4F3E;
        color: #FF4F3E;
    }

.btn-orange:disabled {
    background-color: #E4E4E4;
    color: #848484;
}

.btn-orange:hover {
    background-color: #f06d21;
    color: white;
}

.btn-blue-light {
    background-color: #349DFF;
    color: white;
}

    .btn-blue-light:hover {
        background-color: #2690f4;
        color: white;
    }

.cursor-pointer {
    cursor: pointer;
}

/*  */
.nav-item:hover > * {
    color: #FF7B31 !important;
}

.nav-item:hover > .svg-icon > * {
    stroke: #FF7B31 !important;
}

/* ellipsis */
.ellipsis {
    height: 56px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-wrap: break-word;
    max-width: 100%; /* 確保寬度不會擴大 */
    line-height: 1.5; /* 根據你的字體大小調整 */
    max-height: 3em; /* 兩行高度, 如果每行是 1.5em 高 */
}

/* header 菜單按鈕 */
.active {
    background: #FFF5EF;
    border-radius: 8px;
    color: #FF7B31;
}


@keyframes loadingAnimation {
    0% {
        opacity: 0.5;
        background-color: #f0f0f0;
    }

    50% {
        opacity: 1;
        background-color: #e0e0e0;
    }

    100% {
        opacity: 0.5;
        background-color: #f0f0f0;
    }
}

.loading {
    animation: loadingAnimation 1s infinite;
}