:root {
    --bs-hpqred-rgb: 166, 0, 79;
    --bs-pink-100-color: #f7d6e6;
    --bs-royalblue-rgb: 65, 105, 225;
    --bs-darkred-rgb: 139, 0, 0;
    --bs-chat-rgb: 235, 239, 244;
    --bs-hpqaccordion-rgb: 221, 243, 238;
    --bs-pink-100-rgb: 247, 214, 230;
    --bs-orange-100-rgb: 255, 229, 208;
    --bs-blue-700-rgb: 8, 66, 152;
}

.border-hpqred {
    --bs-border-opacity: 1;
    --bs-border-color: rgba(var(--bs-hpqred-rgb), var(--bs-border-opacity)) !important;
}

.btn-outline-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #dc3545;
    --bs-btn-hover-border-color: #dc3545;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #dc3545;
    --bs-btn-active-border-color: #dc3545;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #dc3545;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #dc3545;
    --bs-gradient: none;
}

.btn-hpqred {
    --bs-btn-color: #fff;
    --bs-btn-bg: #A6004F;
    --bs-btn-border-color: #A6004F;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #A6004F;
    --bs-btn-disabled-border-color: #A6004F;
}

.btn-outline-hpqred {
    --bs-btn-color: #A6004F;
    --bs-btn-border-color: #A6004F;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #A6004F;
    --bs-btn-hover-border-color: #A6004F;
    --bs-btn-focus-shadow-rgb: 166, 0, 79;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #A6004F;
    --bs-btn-active-border-color: #A6004F;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #A6004F;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #A6004F;
    --bs-gradient: none;
}

/*dc3545*/

.w-15 {
    width: 15% !important;
}

.w-70 {
    width: 70% !important;
}


.custom-offcanvas {
    --bs-offcanvas-width: 800px !important;
}

.offcanvas-body {
    overflow-y: auto;
}

.offcanvas-header .btn-close {
    margin-right: 0.5rem;
}

@media (max-width: 768px) {
    .custom-offcanvas {
        --bs-offcanvas-width: 100% !important;
    }

    .offcanvas-body {
        padding: 0.75rem !important;
    }

        .offcanvas-body label {
            font-size: 0.8rem !important;
            margin-bottom: 2px !important;
        }

        .offcanvas-body .form-control {
            font-size: 0.9rem !important;
            padding: 0.4rem 0.5rem !important;
        }

        .offcanvas-body .row {
            gap: 0.4rem !important;
        }
}

@media (min-width: 835px) {
    .custom-admin-offcanvas-start {
        top: 70px !important;
        height: calc(100% - 70px) !important;
    }
}

.table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
}

.bg-color-chat {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-chat-rgb), var(--bs-bg-opacity))
}

.bg-color-chat-li {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-chat-rgb), var(--bs-bg-opacity))
}

    .bg-color-chat-li:hover {
        background-color: rgba(var(--bs-orange-100-rgb), 0.8);
    }

.bg-pink-100 {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-pink-100-rgb), var(--bs-bg-opacity))
}

    .bg-pink-100:hover {
        background-color: rgba(var(--bs-pink-100-rgb), 0.8);
    }

.text-blue-700 {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-blue-700-rgb), var(--bs-text-opacity)) !important;
}

.table thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background-color: #fff !important;
}

.nav-item.dropdown {
    overflow: visible !important;
}

.dropdown-menu .dropdown-item {
    color: #212529 !important;
}

    .dropdown-menu .dropdown-item.active {
        background-color: #e9ecef;
        color: #212529;
    }

/*grid-css用カラム調整*/



　
.grid-cols-3 {
    --bs-columns: 3 !important;
    --bs-gap: 0.8rem !important;
}

.grid-cols-6 {
    --bs-columns: 6 !important;
    --bs-gap: 0.8rem !important;
}

.grid-cols-12 {
    --bs-columns: 12 !important;
    --bs-gap: 0.8rem !important;
}

.grid-cols-12A {
    --bs-columns: 12 !important;
    --bs-gap: 0.8rem !important;
}

.grid-cols-24 {
    --bs-columns: 24 !important;
    --bs-gap: 0.8rem !important;
}

.grid-cols-24-1100 {
    --bs-columns: 24 !important;
    --bs-gap: 0.8rem !important;
}


@media (max-width: 834px) {
    .grid-cols-24 {
        --bs-columns: 1 !important;
        --bs-gap: 0.5rem !important;
    }

    .grid-cols-3 {
        --bs-columns: 1 !important;
    }

    .grid-cols-12 {
        --bs-columns: 6 !important;
        --bs-gap: 0.5rem !important;
        padding-bottom: 0.3rem;
        border-bottom: 1px solid #ccc;
    }

    .grid-cols-12A {
        --bs-columns: 6 !important;
        --bs-gap: 0.5rem !important;
    }
}

@media (max-width: 1100px) {
    .grid-cols-24-1100 {
        --bs-columns: 1 !important;
        --bs-gap: 0.5rem !important;
    }
}