.c-loader {
    color: var(--c-ui-sub) !important;
    z-index: 100001;
}

#base-image {
    display: none;
}

.readonly-elm {
    background-color: var(--c-sf-inactive) !important;
    border-color: var(--c-sf-inactive) !important;
    border-radius: 0 !important;
    color: var(--c-text-sub) !important;
    pointer-events: none !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--c-text-sub) !important;
}

.return-elm {
    background-color: var(--c-sf-inactive) !important;
    border-color: var(--c-sf-inactive) !important;
    border-radius: 0 !important;
    color: var(--c-text-sub) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--c-text-sub) !important;
}

.d-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 6px;
    border-left: 2px solid var(--c-text-inactive);
    border-top: 2px solid var(--c-text-inactive);
}

    .d-table table th, .d-table table td {
        margin: 0;
        padding: 8px 16px;
        text-align: center;
    }

        .d-table table th.-ws-nowrap, .d-table table td.-ws-nowrap {
            width: 1px;
            white-space: nowrap;
        }

        .d-table table th.-ta-left, .d-table table td.-ta-left {
            text-align: left;
        }

        .d-table table th.-to-ellipsis, .d-table table td.-to-ellipsis {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 0;
        }

    .d-table table th {
        border-bottom: 2px solid var(--c-text-inactive);
        border-right: 2px solid var(--c-text-inactive);
        text-align: center;
        font-style: normal;
        font-weight: 500;
    }

    .d-table table td {
        border-bottom: 2px solid var(--c-text-inactive);
        border-right: 2px solid var(--c-text-inactive);
    }

    .d-table table thead {
        background-color: var(--c-gray-sub);
        font-size: 14px;
    }

        .d-table table thead tr:first-child > *:first-child {
            border-radius: 4px 0 0 0;
        }

        .d-table table thead tr:first-child > *:last-child {
            border-radius: 0 4px 0 0;
        }

    .d-table table tbody tr:last-child > *:first-child {
        border-radius: 0 0 0 4px;
    }

    .d-table table tbody tr:last-child > *:last-child {
        border-radius: 0 0 4px 0;
    }

    .d-table table tbody tr.is-active td {
        background-color: var(--c-sf-active);
    }

    .d-table table.-w-flexible {
        width: auto;
    }

    .d-table table .d-table__figure {
        width: 40px;
        margin: 0 auto;
        position: relative;
    }

        .d-table table .d-table__figure > figure img {
            width: 100%;
        }

        .d-table table .d-table__figure .d-table__balloon {
            position: absolute;
            left: calc(100% + 16px);
            top: 50%;
            transform: translateY(-50%);
            background-color: var(--c-bg-sub);
            padding: 4px;
            border-radius: 4px;
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
            display: none;
            z-index: 100;
        }

            .d-table table .d-table__figure .d-table__balloon figure img {
                max-width: 168px;
            }

            .d-table table .d-table__figure .d-table__balloon.-top {
                top: -16px;
                transform: none;
            }

            .d-table table .d-table__figure .d-table__balloon.-bottom {
                top: auto;
                bottom: -8px;
                transform: none;
            }

    .d-table table .d-table__button .d-table__icon {
        display: inline-block;
        width: 14px;
        height: 14px;
        background-color: var(--c-text-sub);
        line-height: 0;
        margin-left: 4px;
    }

        .d-table table .d-table__button .d-table__icon svg {
            margin-top: -1px;
            width: 100%;
            height: 100%;
            color: var(--c-sf-main);
        }

    .d-table table .d-table__button.is-active .d-table__text {
        text-decoration: underline;
    }

    .d-table table .d-table__button.is-up .d-table__icon {
        transform: scale(1, -1);
    }

.d-table.-w-auto table {
    width: auto;
}

.d-table.scroll__wrap {
    position: relative;
}

    .d-table.scroll__wrap .scroll {
        width: 100%;
        overflow: auto;
    }

        .d-table.scroll__wrap .scroll table {
            width: auto;
            min-width: 100%;
        }

            .d-table.scroll__wrap .scroll table th, .d-table.scroll__wrap .scroll table td {
                width: 1px;
                white-space: nowrap;
            }

    .d-table.scroll__wrap > .d-table__icon {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 24px;
        background-color: rgba(0, 0, 0, 0.4);
        pointer-events: none;
    }

        .d-table.scroll__wrap > .d-table__icon svg {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 16px;
            fill: var(--c-bg-sub);
            transform: translate(-50%, -50%) scale(-1, 1);
        }

        .d-table.scroll__wrap > .d-table__icon.is-hide {
            display: none;
        }

.d-heading + .d-table {
    margin-top: 8px;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
    z-index: 99;
    cursor: not-allowed;
}

.loading-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    z-index: 100;
    cursor: not-allowed;
}

.modal {
    display: none;
    position: absolute;
    background: rgba(0,0,0,0.2);
    border-radius: 14px;
    padding: 8px;
    z-index: 2000;
}

.modal-content {
    border-radius: 8px;
    background: #fff;
    padding: 20px;
}

.hide-input {
    -webkit-text-security: disc;
    text-security: disc;
}

.sub-btn {
    cursor: pointer;
}

input[type=date]::-webkit-calendar-picker-indicator {
    cursor: pointer !important;
}

img {
    object-fit: contain
}

.r-side__link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-flow: row nowrap;
    width: 100%;
}

.widthCode {
    width: 150px !important;
}

.widthCodeName {
    width: 150px !important;
}

.widthName {
    width: 350px !important;
}

.widthShortName {
    width: 250px !important;
}

.widthOfficeName {
    width: 1000px !important;
}

.widthAddress {
    width: 1000px !important;
}

.widthReason {
    width: 700px !important;
}

.widthDate {
    width: 150px !important;
}

.widthNumber {
    width: 200px !important;
}

.widthRemarks {
    width: 1000px !important;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    opacity: 100;
    z-index: 1;
}