/* グローバルcssに記述しないとradzenコンポーネント内部にcssが適用できない。そのためここにradzenコンポーネントへのcss定義を記述する */

/* 共通CSS */
:root {
    --rz-primary: #FECB09; /* 基本色は黄色 */
    --rz-on-primary: #554016; /* 背景色が黄色の場合に文字色が白だと、視認性が悪いため黒に変更 */
    --rz-primary-light: #FFB442;
    --rz-primary-lighter: rgba(255, 207, 74, 0.12);
    --rz-primary-dark: #B97000;
    --rz-primary-darker: #554016;
    --rz-on-primary-lighter: #E88C00;
    --rz-steps-number-selected-background: #E88C00;
    --rz-steps-title-selected-color: #E88C00;
    --rz-datepicker-calendar-selected-hover-background-color: #E88C00;
    --rz-layout-body-background-color: #F6F4F3;
    --rz-base-500: #9E9E9E;
    --rz-secondary: #FFCF4A1F;
    --rz-on-secondary: #E88C00;
    --rz-text-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 各ページのbody要素リセット */
.rz-body {
    padding: 0;
}

/* カスタムダイアログの最大幅,高さ指定 */
.custom-dialog {
    max-width: 1057px !important;
    max-height: 90vh;
}

/* カスタムダイアログ要素 */
.custom-dialog .rz-dialog-content {
    display: flex;
    flex-direction: column;
    /* ダイアログの高さ */
    height: 100%;
    /* ダイアログの背景色 */
    background-color: var(--background-gray);
    min-height: 0;
    padding: 0;
}

/* 白色のボタン */
.large-menu-button {
    width: 210px;
    height: 40px;
    background-color: white !important;
    color: black;
    border: 1px solid #dcdcdc;
    font-size: 1.1rem;
    font-weight: 500;
    /* 小文字が大文字に自動変換されるのを抑止 */
    text-transform: none;
}

    .large-menu-button:hover {
        background-color: #f5f5f5 !important;
    }

/* PR特典の在庫設定カラム内の削除ボタン */
.benefit-grid .rz-button-md {
    padding: 0;
}

/* PR特典の個別説明カラム */
.benefit-grid textarea {
    height: 40px;
    margin-top: 5px;
}

/* スクロールロック(scroll.js) */
body.modal-open,
.rz-body.modal-open {
    overflow: hidden !important;
}

/* DataGridオプションCSS一覧 */

/* DataGridに行マウスホバー付与 */
.add-hover .rz-grid-table tr:hover > td {
    background-color: var(--rz-primary-lighter) !important;
    cursor: pointer !important;
}

/* DataGridに対し強制的に横スクロールを付与 */
.add-scroll-wrapper {
    overflow-x: auto;
    width: 100%;
}

    .add-scroll-wrapper .rz-grid-table {
        table-layout: auto;
        width: max-content;
        min-width: 100%;
    }

    .add-scroll-wrapper .rz-text-truncate {
        overflow: visible;
        text-overflow: unset;
        white-space: nowrap;
    }

/* DataGridのヘッダーの境界線にボーダーを追加 */
.add-header-border .rz-grid-table th{
    border-right: 1px solid #dcdcdc !important;
}

    .add-header-border .rz-grid-table th:last-child{
        border-right: none !important;
    }

/* DataGrid行選択状態の色 */
.selected-row {
    background-color: #FFCF4A1F;
}