:root {
    --bs-body-font-size: 0.85rem;
}

html {
    position: relative;
    min-height: 100%;
}

th {
    text-align: center;
    white-space: nowrap
}

td {
    text-align: center;
    vertical-align: middle;
}

.min-w-100 {
    min-width: 100px !important;
}

/* バリデーション付きinputのラベル用 */
.validated-input-label {
    padding-top: 0.1rem;
}

/* メッセージ表示用のModal と トースト */
#modal-collection .modal, .toast-container {
    z-index: 9999;
}

.bg-content-header-card {
    background-color: #ccccff;
}

/* スピナー */
#spinner {
    display: none;
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5);
    text-align: center;
    z-index: 99999;
}

    #spinner > div[role="status"] {
        width: 10rem !important;
        height: 10rem !important;
    }

/* inputタグ用のスピナー */
.input-spinner {
    position: relative;
}

    .input-spinner::before {
        content: '';
        position: absolute;
        left: 3px;
        bottom: 1px;
        background: linear-gradient(90deg, transparent, transparent, #3498db, transparent);
        background-size: 200% 100%;
        background-position-x: 200%;
        width: calc(100% - 6px);
        height: 2px;
        z-index: 1;
        border-radius: 0.375rem;
        animation: inputSpinner 1.5s infinite;
    }

/* ----------------------- */
/* Bootstrapのカスタマイズ */
.form-control, .form-select, .btn {
    font-size: 0.85rem;
}

.col-form-label:not([bs-origin]) {
    line-height: 1 !important;
    padding-top: calc(0.256rem + 1px) !important;
    padding-bottom: calc(0.256rem + 1px) !important;
}

.form-control:not([bs-origin]), .input-group-text:not([bs-origin]) {
    line-height: 1 !important;
    padding: 0.15rem 0.3rem !important;
}

.form-control[type="date"]:not([bs-origin]) {
    padding-top: 0.175rem !important;
    padding-bottom: 0.175rem !important;
}

.btn:not([bs-origin]) {
    line-height: 1 !important;
    padding: 0.2878rem 0.4rem !important;
}

.form-select:not([bs-origin]) {
    line-height: 1 !important;
    padding: 0.3rem !important;
}

hr:not([bs-origin]) {
    margin: 0.35rem 0 !important;
}

.modal-header:not([bs-origin]), .modal-body:not([bs-origin]), .modal-footer:not([bs-origin]) {
    padding: 0.2rem 0.75rem !important;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-control.is-valid,
.was-validated .form-control:valid {
    background: none;
}

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"],
.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
/* ----------------------- */

/* ----------------------- */
/* Tabulatorのカスタマイズ */
.tabulator {
    font-size: 0.85rem;
}
/* ----------------------- */

@keyframes inputSpinner {
    to {
        background-position-x: 0;
    }
}