body {
    .custom-danger-row {
        background-color: rgba(248, 113, 113, 0.1);

        &:hover {
            background-color: rgba(248, 113, 113, 0.15) !important;
        }
    }

    .custom-success-row {
        background-color: rgba(74, 222, 128, 0.1);

        &:hover {
            background-color: rgba(74, 222, 128, 0.15) !important;
        }
    }

    .custom-light-success-row {
        background-color: rgba(74, 222, 128, 0.25);

        &:hover {
            background-color: rgba(74, 222, 128, 0.45) !important;
        }
    }



    .custom-pending-row {
        background-color: rgba(245, 158, 11, 0.1);

        &:hover {
            background-color: rgba(245, 158, 11, 0.15) !important;
        }
    }


    .custom-info-row {
        background-color: rgba(59, 130, 246, 0.1);

        &:hover {
            background-color: rgba(59, 130, 246, 0.15) !important;
        }
    }
}


.dark body {
    & .custom-danger-row {
        background-color: rgba(248, 113, 113, 0.1);

        &:hover {
            background-color: rgba(248, 113, 113, 0.15) !important;
        }
    }

    & .custom-success-row {
        background-color: rgba(74, 222, 128, 0.1);

        &:hover {
            background-color: rgba(74, 222, 128, 0.15) !important;
        }
    }

    & .custom-light-success-row {
        background-color: rgba(74, 222, 128, 0.25);

        &:hover {
            background-color: rgba(74, 222, 128, 0.45) !important;
        }
    }



    & .custom-pending-row {
        background-color: rgba(245, 158, 11, 0.1);

        &:hover {
            background-color: rgba(245, 158, 11, 0.15) !important;
        }
    }


    & .custom-info-row {
        background-color: rgba(59, 130, 246, 0.1);

        &:hover {
            background-color: rgba(59, 130, 246, 0.15) !important;
        }
    }

}



.custom-table-styles {
    & span {
        word-break: break-word;
    }
}

@media (max-width:1000px) {
    .custom-table-styles {
        & span {
            font-size: 12px;
        }
    }
}


.custom-section-danger-color {
    &>section {
        background-color: rgba(248, 113, 113, 0.1);
    }

    &>ul>li {
        background-color: rgba(248, 113, 113, 0.1);
    }
}


.custom-section-success-color {
    &>section {
        background-color: rgba(74, 222, 128, 0.1);
    }

    &>ul>li {
        background-color: rgba(74, 222, 128, 0.1);
    }
}


.custom-section-info-color {
    &>section {
        background-color: rgba(59, 130, 246, 0.1);
    }

    &>ul>li {
        background-color: rgba(59, 130, 246, 0.1);
    }
}


.custom-section-warning-color {
    &>section {
        background-color: rgba(245, 158, 11, 0.1);
    }

    &>ul>li {
        background-color: rgba(245, 158, 11, 0.1);
    }
}

.custom-section-center-all {
    &>section>div>div div {
        justify-content: center;
    }
}

.custom-badge-12px {
    & span {
        white-space: normal;
        word-break: break-word;
        font-size: 12px;
    }
}

.custom-badge-14px {
    & span {
        white-space: normal;
        word-break: break-word;
        font-size: 14px;
    }
}

.custom-badge-16px {
    & span {
        white-space: normal;
        word-break: break-word;
        font-size: 16px;
    }
}

.custom-badge-18px {
    & span {
        white-space: normal;
        word-break: break-word;
        font-size: 18px;
    }
}

.custom-badge-20px {
    & span {
        white-space: normal;
        word-break: break-word;
        font-size: 20px;
    }
}

.custom-repeater-simple {
    &>ul {
        column-gap: calc(var(--spacing) * 8);

        &>li {
            --tw-ring-color: unset;
            box-shadow: unset;
            background: unset;

            &:where(.dark *) {
                background-color: unset;
            }

            &>div {
                padding: unset;
            }
        }
    }
}


html {
    & .custom-light-mode-item {
        display: block;
    }

    & .custom-dark-mode-item {
        display: none;
    }
}

html.dark {
    & .custom-light-mode-item {
        display: none;
    }

    & .custom-dark-mode-item {
        display: block;
    }
}