@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Open+Sans:wght@400;700&display=swap');

html {
    height: auto;
    min-height: 100%;
    font-size: 62.5%;
    background-color: lightgray;
}

body {
    background-color: transparent;
    font-family: 'Roboto', 'Open Sans', sans-serif;
}

* {
    --color-main-start: #1f618d; /* メインカラー(開始) */
    --color-main-end: #3498db; /* メインカラー(終了) */
    --color-main2-start: #33b5e5; /* メインカラー2(開始) */
    --color-main2-end: #66d9ff; /* メインカラー2(終了) */
    --color-header-menu-hover: #5dade2; /* ヘッダーメニューの背景色(ホバー時) */
    --color-btn-execute-start: #1f618d; /* ポジティブボタン(開始) */
    --color-btn-execute-end: #3498db; /* ポジティブボタン(終了) */
    --color-btn-execute-hover: #3498db; /* ポジティブボタン(ホバー時) */
    --color-btn-execute2-start: #33b5e5; /* ポジティブボタン2(開始) */
    --color-btn-execute2-end: #66d9ff; /* ポジティブボタン2(終了) */
    --color-btn-execute2-hover: #66d9ff; /* ポジティブボタン2(ホバー時) */
    --color-btn-cancel-start: #707070; /* ネガティブボタン(開始) */
    --color-btn-cancel-end: #b0b0b0; /* ネガティブボタン(終了) */
    --color-btn-cancel-hover: #b0b0b0; /* ネガティブボタン(ホバー時) */
    --color-btn-back-start: #dc3545; /* 戻るボタン(開始) */
    --color-btn-back-end: #bb2d3b; /* 戻るボタン(終了) */
    --color-btn-back-hover: #bb2d3b; /* 戻るボタン(ホバー時) */
    --color-btn-send-start: #1f618d; /* 送信ボタン(開始) */
    --color-btn-send-end: #3498db; /* 送信ボタン(終了) */
    --color-btn-send-hover: #3498db; /* 送信ボタン(ホバー時) */
    --color-btn-history-start: #198754; /* 履歴ボタン(開始) */
    --color-btn-history-end: #157347; /* 履歴ボタン(終了) */
    --color-btn-history-hover: #157347; /* 履歴ボタン(ホバー時) */
    --color-btn-delete-start: #dc3545; /* 削除ボタン(開始) */
    --color-btn-delete-end: #bb2d3b; /* 削除ボタン(終了) */
    --color-btn-delete-hover: #bb2d3b; /* 削除ボタン(ホバー時) */
    --color-btn-history-delete-start: #ffc107; /* ハンディー削除ボタン(開始) */
    --color-btn-history-delete-end: #ffca2c; /* ハンディー削除ボタン(終了) */
    --color-btn-history-delete-hover: #ffca2c; /* ハンディー削除ボタン(ホバー時) */
    --color-btn-important-start: #FF5733; /* 重要なボタン(開始) */
    --color-btn-important-end: #FF8D47; /* 重要なボタン(終了) */
    --color-btn-important-hover: #FF8D47; /* 重要なボタン(ホバー時) */
    --color-error: #ff0000; /* エラーメッセージ */
    --color-error-background: #fef5f0; /* エラーメッセージの背景色 */
    --color-locked: #6c757d; /* 入力不可 */
    --color-locked-background: #eee; /* 入力不可の背景色 */
    --color-diff-background: #ffffcc; /* 差異の背景色 */
    --font-size-header-company: 2rem;
    --font-size-header-system: 1.6rem;
    --font-size-header-menu: 1.4rem; /* ヘッダーメニューのフォントサイズ */
    --font-size-title: 2rem; /* 画面タイトルのフォントサイズ */
    --font-size-label-small: 1.4rem; /* ラベル(小)のフォントサイズ */
    --font-size-label-medium: 1.6rem; /* ラベル(中)のフォントサイズ */
    --font-size-label-large: 4rem; /* ラベル(大)のフォントサイズ */
    --font-size-error: 1.4rem; /* バリデーションエラーのフォントサイズ */
    --font-size-error-small: 1.2rem; /* バリデーションエラー(小)のフォントサイズ */
    --font-size-button: 1.4rem; /* ボタンのフォントサイズ */
    --width-button: 100px; /* ボタンの横幅 */
    --width-check: 84px; /* チェックボックスの横幅 */
    --width-date: 98px; /* 日付の横幅 */
    --width-date-input: 140px; /* 日付の横幅(入力) */
    --width-datetime: 168px; /* 日時の横幅 */
    --width-name: 350px; /* 名称の横幅 */
    --width-product-name: 168px; /* 品名の横幅 */
    --width-material-type: 140px; /* HS名の横幅 */
    --width-location: 392px; /* 住所名・所在地名の横幅 */
    --width-number: 140px; /* 番号の横幅 */
    --width-management-number: 112px; /* 管理CDの横幅 */
    --width-branch-number: 70px; /* 枝番の横幅 */
    --width-branch-number: 112px; /* 変更前枝番の横幅 */
    --width-part-number: 168px; /* 金型部品CD・製品部品CDの横幅 */
    --width-code: 112px; /* コードの横幅 */
    --width-category: 210px; /* 区分の横幅 */
    --width-tooling-category: 98px; /* 金型区分の横幅 */
    --width-asset-category: 210px; /* 資産区分の横幅 */
    --width-cost-category: 490px; /* 費用区分の横幅 */
    --width-obic-category: 350px; /* OBIC区分の横幅 */
    --width-weight: 84px; /* 重量(金型)の横幅 */
    --width-material-dimension: 140px; /* 鋼種寸法の横幅 */
    --width-price: 112px; /* 金額の横幅 */
    --width-discount: 112px; /* 引下の横幅 */
    --width-dimensions: 252px; /* 寸法の横幅 */
    --width-flag: 84px; /* フラグの横幅 */
    --width-count: 84px; /* 数量の横幅 */
    --width-rethink-count: 112px; /* ﾚｼﾝｸ回数の横幅 */
    --width-password: 224px; /* ﾊﾟｽﾜｰﾄﾞの横幅 */
    --width-status: 98px; /* ステータスの横幅 */
    --width-content: 350px; /* 内容の横幅 */
    --width-total-amount: 70px; /* 合計の横幅 */
    --width-cration-cost: 168px; /* 新規材料_金額/旧型簿価の横幅 */
    --width-customer-code: 55px; /*得意先CDの横幅*/
    --width-pack-id: 155px; /*パックIDの横幅*/
    --width-coefficient: 112px; /* 係数の横幅 */
    --content-width-sm: 15rem; /* レイアウトの横幅(小) */
    --content-width-md: 25rem; /* レイアウトの横幅(中) */
    --content-width-lg: 45rem; /* レイアウトの横幅(大) */
    --header-height: 4.5rem; /* ヘッダーの高さ */
}


.icon {
    --icon-person-circle: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='black' class='bi bi-person-circle' viewBox='0 0 16 16'%3e %3cpath d='M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3e %3cpath fill-rule='evenodd' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z'/%3e %3c/svg%3e");
    --icon-box-arrow-right: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-box-arrow-right' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z'/%3e%3cpath fill-rule='evenodd' d='M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z'/%3e%3c/svg%3e");
    --icon-warning: url("data:image/svg+xml, %3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='width: 256px; height: 256px; opacity: 1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%234B4B4B;}%3C/style%3E%3Cg%3E %3Cpath class='st0' d='M256.007,357.113c-16.784,0-30.411,13.613-30.411,30.397c0,16.791,13.627,30.405,30.411,30.405 s30.397-13.614,30.397-30.405C286.405,370.726,272.792,357.113,256.007,357.113z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E %3Cpath class='st0' d='M505.097,407.119L300.769,53.209c-9.203-15.944-26.356-25.847-44.777-25.847 c-18.407,0-35.544,9.904-44.747,25.847L6.902,407.104c-9.203,15.943-9.203,35.751,0,51.694c9.204,15.943,26.356,25.84,44.763,25.84 h408.67c18.406,0,35.559-9.897,44.762-25.84C514.301,442.855,514.301,423.047,505.097,407.119z M464.465,432.405 c-2.95,5.103-8.444,8.266-14.35,8.266H61.878c-5.892,0-11.394-3.163-14.329-8.281c-2.964-5.11-2.979-11.445-0.014-16.548 l194.122-336.24c2.943-5.103,8.436-8.274,14.35-8.274c5.9,0,11.386,3.171,14.336,8.282l194.122,336.226 C467.415,420.945,467.415,427.295,464.465,432.405z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E %3Cpath class='st0' d='M256.007,152.719c-16.784,0-30.411,13.613-30.411,30.405l11.68,137.487c0,10.346,8.378,18.724,18.731,18.724 c10.338,0,18.731-8.378,18.731-18.724l11.666-137.487C286.405,166.331,272.792,152.719,256.007,152.719z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --icon-calendar: url("data:image/svg+xml, %3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-calendar' viewBox='0 0 16 16'%3e %3cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/%3e %3c/svg%3e");
    --icon-tooling-list: url("data:image/svg+xml, %3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='width: 256px; height: 256px; opacity: 1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%234B4B4B;}%3C/style%3E%3Cg%3E %3Cpath class='st0' d='M499.139,318.571l-37.178-5.407c-2.329-0.178-4.336-1.642-5.228-3.8l-12.054-29.086 c-0.901-2.15-0.526-4.613,1-6.379l22.243-29.88c3.533-4.141,3.301-10.314-0.554-14.168l-17.602-17.594 c-3.846-3.854-10.029-4.104-14.159-0.553l-29.889,22.233c-1.758,1.518-4.238,1.91-6.38,1.018l-29.094-12.062 c-2.151-0.883-3.622-2.926-3.81-5.228l-5.389-37.169c-0.428-5.442-4.96-9.635-10.402-9.635h-24.893 c-5.45,0-9.983,4.193-10.402,9.635l-5.407,37.169c-0.17,2.32-1.642,4.345-3.792,5.228l-29.103,12.062 c-2.151,0.892-4.613,0.5-6.388-1.018l-29.872-22.233c-4.13-3.542-10.304-3.302-14.167,0.553l-17.594,17.594 c-3.854,3.854-4.086,10.028-0.554,14.168l22.234,29.888c1.508,1.758,1.91,4.229,1.009,6.371l-12.054,29.086 c-0.874,2.159-2.908,3.622-5.219,3.81l-37.195,5.398c-5.425,0.429-9.618,4.961-9.618,10.412v24.883 c0,5.442,4.194,9.993,9.618,10.403l37.195,5.398c2.311,0.188,4.345,1.659,5.219,3.81l12.054,29.086 c0.901,2.159,0.5,4.63-1.009,6.388l-22.234,29.889c-3.533,4.14-3.301,10.295,0.554,14.168l17.594,17.594 c3.863,3.854,10.037,4.086,14.167,0.544l29.872-22.243c1.775-1.498,4.237-1.9,6.388-0.998l29.103,12.044 c2.151,0.902,3.622,2.918,3.802,5.246l5.398,37.169c0.428,5.433,4.952,9.636,10.402,9.636h24.893c5.451,0,9.974-4.203,10.402-9.636 l5.389-37.169c0.188-2.328,1.659-4.344,3.81-5.246l29.103-12.044c2.142-0.902,4.622-0.5,6.379,0.998l29.881,22.243 c4.13,3.542,10.314,3.31,14.159-0.544l17.602-17.594c3.864-3.873,4.087-10.028,0.554-14.168l-22.243-29.889 c-1.499-1.758-1.9-4.229-1-6.388l12.054-29.086c0.892-2.151,2.899-3.622,5.228-3.81l37.178-5.398 c5.434-0.41,9.627-4.961,9.627-10.403v-24.883C508.766,323.532,504.573,319,499.139,318.571z M379.093,382.328 c-10.93,10.912-25.445,16.926-40.898,16.926c-15.444,0-29.978-6.014-40.898-16.926c-10.92-10.938-16.943-25.454-16.943-40.907 c0-15.444,6.022-29.969,16.943-40.89c10.92-10.939,25.454-16.934,40.898-16.934c15.454,0,29.969,5.995,40.898,16.934 c10.92,10.92,16.934,25.446,16.934,40.89C396.027,356.874,390.014,371.39,379.093,382.328z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E %3Cpath class='st0' d='M187.351,252.156c4.032-1.445,6.254-5.746,5.122-9.868l-5.898-28.854c-0.472-1.767,0.072-3.649,1.419-4.88 l18.263-16.621c1.338-1.222,3.284-1.588,4.97-0.946l27.961,8.466c3.989,1.508,8.485-0.294,10.306-4.166l8.297-17.656 c1.837-3.881,0.366-8.485-3.346-10.591l-24.339-16.14c-1.58-0.91-2.535-2.632-2.436-4.452l1.16-24.66 c0.098-1.829,1.186-3.444,2.838-4.194l26.008-13.874c3.898-1.74,5.781-6.218,4.336-10.215l-6.603-18.371 c-1.454-4.024-5.755-6.254-9.876-5.121l-28.863,5.879c-1.767,0.5-3.632-0.053-4.871-1.41L195.185,56.23 c-1.24-1.357-1.614-3.265-0.955-4.978l8.468-27.944c1.507-4.006-0.294-8.494-4.175-10.306l-17.648-8.306 c-3.872-1.821-8.494-0.366-10.608,3.354l-16.131,24.34c-0.902,1.58-2.623,2.533-4.444,2.445l-24.66-1.169 c-1.82-0.08-3.462-1.205-4.202-2.847L106.974,4.821c-1.758-3.898-6.219-5.782-10.234-4.336L78.379,7.096 c-4.024,1.446-6.254,5.738-5.112,9.859l5.888,28.872c0.482,1.748-0.062,3.64-1.418,4.862l-18.264,16.63 c-1.356,1.222-3.274,1.597-4.987,0.955l-27.944-8.476c-3.988-1.516-8.476,0.304-10.305,4.175L7.939,81.622 c-1.82,3.872-0.366,8.494,3.346,10.599l24.339,16.14c1.588,0.902,2.534,2.615,2.436,4.435l-1.16,24.66 c-0.071,1.838-1.187,3.444-2.837,4.193L8.055,155.522c-3.9,1.749-5.782,6.219-4.336,10.216l6.611,18.37 c1.445,4.024,5.746,6.254,9.859,5.131l28.881-5.906c1.749-0.482,3.64,0.071,4.862,1.427l16.612,18.255 c1.24,1.356,1.598,3.283,0.954,4.987l-8.466,27.944c-1.499,3.997,0.304,8.485,4.175,10.305l17.648,8.297 c3.881,1.829,8.493,0.357,10.608-3.346l16.122-24.348c0.91-1.57,2.623-2.534,4.452-2.428l24.661,1.16 c1.829,0.09,3.453,1.178,4.211,2.846l13.847,25.989c1.767,3.9,6.219,5.8,10.233,4.354L187.351,252.156z M148.229,172.296 c-11.394,4.095-23.714,3.524-34.68-1.633c-10.965-5.157-19.245-14.275-23.358-25.678c-4.095-11.402-3.524-23.714,1.634-34.67 c5.156-10.974,14.283-19.254,25.677-23.357c11.402-4.105,23.714-3.534,34.67,1.641c10.956,5.139,19.254,14.258,23.366,25.66 c4.096,11.403,3.516,23.706-1.632,34.672C168.731,159.886,159.621,168.183,148.229,172.296z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --icon-tooling: url("data:image/svg+xml, %3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='512px' height='512px' viewBox='0 0 512 512' style='width: 256px; height: 256px; opacity: 1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%234B4B4B;}%3C/style%3E%3Cg%3E %3Cpath class='st0' d='M496,293.984c9.031-0.703,16-8.25,16-17.297v-41.375c0-9.063-6.969-16.594-16-17.313l-54.828-4.281 c-3.484-0.266-6.484-2.453-7.828-5.688l-18.031-43.516c-1.344-3.219-0.781-6.906,1.5-9.547l35.75-41.813 c5.875-6.891,5.5-17.141-0.922-23.547l-29.25-29.25c-6.406-6.406-16.672-6.813-23.547-0.922l-41.813,35.75 c-2.641,2.266-6.344,2.844-9.547,1.516l-43.531-18.047c-3.219-1.328-5.422-4.375-5.703-7.828l-4.266-54.813 C293.281,6.969,285.75,0,276.688,0h-41.375c-9.063,0-16.594,6.969-17.297,16.016l-4.281,54.813c-0.266,3.469-2.469,6.5-5.688,7.828 l-43.531,18.047c-3.219,1.328-6.906,0.75-9.563-1.516l-41.797-35.75c-6.875-5.891-17.125-5.484-23.547,0.922l-29.25,29.25 c-6.406,6.406-6.797,16.656-0.922,23.547l35.75,41.813c2.25,2.641,2.844,6.328,1.5,9.547l-18.031,43.516 c-1.313,3.234-4.359,5.422-7.813,5.688L16,218c-9.031,0.719-16,8.25-16,17.313v41.359c0,9.063,6.969,16.609,16,17.313l54.844,4.266 c3.453,0.281,6.5,2.484,7.813,5.703l18.031,43.516c1.344,3.219,0.75,6.922-1.5,9.563l-35.75,41.813 c-5.875,6.875-5.484,17.125,0.922,23.547l29.25,29.25c6.422,6.406,16.672,6.797,23.547,0.906l41.797-35.75 c2.656-2.25,6.344-2.844,9.563-1.5l43.531,18.031c3.219,1.344,5.422,4.359,5.688,7.844l4.281,54.813 c0.703,9.031,8.234,16.016,17.297,16.016h41.375c9.063,0,16.594-6.984,17.297-16.016l4.266-54.813 c0.281-3.484,2.484-6.5,5.703-7.844l43.531-18.031c3.203-1.344,6.922-0.75,9.547,1.5l41.813,35.75 c6.875,5.891,17.141,5.5,23.547-0.906l29.25-29.25c6.422-6.422,6.797-16.672,0.922-23.547l-35.75-41.813 c-2.25-2.641-2.844-6.344-1.5-9.563l18.031-43.516c1.344-3.219,4.344-5.422,7.828-5.703L496,293.984z M256,342.516 c-23.109,0-44.844-9-61.188-25.328c-16.344-16.359-25.344-38.078-25.344-61.203c0-23.109,9-44.844,25.344-61.172 c16.344-16.359,38.078-25.344,61.188-25.344c23.125,0,44.844,8.984,61.188,25.344c16.344,16.328,25.344,38.063,25.344,61.172 c0,23.125-9,44.844-25.344,61.203C300.844,333.516,279.125,342.516,256,342.516z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --icon-inventory: url("data:image/svg+xml, %3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='width: 256px; height: 256px; opacity: 1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%234B4B4B;}%3C/style%3E%3Cg%3E %3Cpath class='st0' d='M159.963,122.502h125.034c19.128,0,34.692-15.564,34.692-34.692V60.963c0-19.128-15.564-34.692-34.692-34.692 h-27.394C253.088,10.884,239.06,0,222.48,0c-16.584,0-30.616,10.884-35.13,26.271h-27.387c-19.128,0-34.692,15.564-34.692,34.692 V87.81C125.271,106.938,140.835,122.502,159.963,122.502z M222.488,23.562c7.282,0,13.208,5.926,13.208,13.209 c0,7.304-5.927,13.232-13.208,13.232c-7.293,0-13.232-5.927-13.232-13.232C209.256,29.488,215.195,23.562,222.488,23.562z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E %3Cpolygon class='st0' points='154.867,204.871 186.526,173.204 175.019,161.697 143.352,193.356 123.208,173.204 111.693,184.72 143.352,216.386 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E %3Cpolygon class='st0' points='154.867,287.632 186.526,255.965 175.019,244.458 143.352,276.117 123.208,255.965 111.693,267.481 143.352,299.147 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E %3Cpolygon class='st0' points='186.526,338.726 175.019,327.22 143.352,358.878 123.208,338.726 111.693,350.242 143.352,381.908 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E %3Cpath class='st0' d='M479.692,206.502l-15.128-15.11c-9.172-9.19-24.054-9.175-33.225,0l-14.148,14.155l48.347,48.34l14.155-14.148 C488.863,230.557,488.863,215.686,479.692,206.502z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E %3Cpolygon class='st0' points='284.597,338.134 284.597,386.48 332.944,386.48 452.348,267.08 404.001,218.734 ' style='fill: rgb(255, 255, 255);'%3E%3C/polygon%3E %3Cpath class='st0' d='M340.871,104.506h30.312c0.582,0,1.055,0.47,1.055,1.055v111.495l47.292-47.292v-62.355 c0-28.989-23.581-52.565-52.564-52.565h-23.958c0.212,2.017,0.327,4.049,0.327,6.12V87.81 C343.335,93.615,342.457,99.21,340.871,104.506z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E %3Cpath class='st0' d='M372.238,374.658v76.388c0,0.585-0.473,1.055-1.055,1.055H73.776c-0.581,0-1.055-0.47-1.055-1.055V105.561 c0-0.585,0.474-1.055,1.055-1.055h30.312c-1.586-5.296-2.463-10.891-2.463-16.696V60.963c0-2.071,0.116-4.103,0.327-6.12H77.995 c-28.985,0-52.565,23.576-52.565,52.565v352.027c0,28.988,23.58,52.564,52.565,52.564h288.971 c28.984,0,52.564-23.577,52.564-52.564V333.331l-41.323,41.326H372.238z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    --icon-db: url("data:image/svg+xml, %3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='width: 256px; height: 256px; opacity: 1;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%234B4B4B;}%3C/style%3E%3Cg%3E %3Cpath class='st0' d='M256.002,0C141.984,0,56,49.392,56,114.894v282.211C56,462.608,141.984,512,256.002,512 S456,462.608,456,397.106V114.894C456,49.392,370.02,0,256.002,0z M387.082,202.952c0.703-0.343,1.338-0.73,2.033-1.079 c4.238-2.091,8.4-4.241,12.34-6.551v60.211c0,25.777-55.334,61.73-145.453,61.73c-90.117,0-145.457-35.953-145.457-61.73v-60.34 c35.916,21.522,86.938,34.597,145.457,34.597c50.553,0,95.455-9.792,129.91-26.323 C386.293,203.288,386.703,203.133,387.082,202.952z M110.545,335.83c35.916,21.524,86.938,34.598,145.457,34.598 c50.736,0,95.797-9.853,130.301-26.494c0.238-0.113,0.498-0.211,0.736-0.324c0.855-0.418,1.627-0.886,2.469-1.312 c4.094-2.03,8.133-4.105,11.947-6.342v61.15c0,25.777-55.334,61.73-145.453,61.73c-90.117,0-145.457-35.953-145.457-61.73V335.83z M256.002,176.625c-90.117,0-145.457-35.953-145.457-61.731c0-25.777,55.34-61.73,145.457-61.73 c90.119,0,145.453,35.953,145.453,61.73C401.455,140.672,346.121,176.625,256.002,176.625z' style='fill: rgb(255, 255, 255);'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

    .icon[class*="icon-"] {
        margin: 0.4rem;
        mask-repeat: no-repeat;
    }

    .icon.icon-16 {
        --current-size: 1.6rem;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
        mask-size: var(--current-size);
    }

    .icon.icon-20 {
        --current-size: 2rem;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
        mask-size: var(--current-size);
    }

    .icon.icon-24 {
        --current-size: 2.4rem;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
        mask-size: var(--current-size);
    }

    .icon.icon-28 {
        --current-size: 2.8rem;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
        mask-size: var(--current-size);
    }

    .icon.icon-32 {
        --current-size: 3.2rem;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
        mask-size: var(--current-size);
    }

    .icon.icon-40 {
        --current-size: 4rem;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
        mask-size: var(--current-size);
    }

    .icon.icon-150 {
        --current-size: 15rem;
        width: var(--current-size);
        min-width: var(--current-size);
        height: var(--current-size);
        min-height: var(--current-size);
        mask-size: var(--current-size);
    }

    .icon.icon-person {
        background-color: white;
        mask-image: var(--icon-person-circle);
    }

    .icon.icon-logout {
        background-color: white;
        mask-image: var(--icon-box-arrow-right);
    }

.body-content,
.body-content * {
    font-size: var(--font-size-label-small);
}

.body-content {
    margin-bottom: 1.5rem;
}

#inputForm header {
    margin-top: 0.8rem;
    margin-right: 2rem;
    margin-left: 2rem;
}

#inputForm header .header-title {
    padding-right: 2rem;
    font-size: var(--font-size-title);
    font-weight: bold;
    cursor: default;
    background: linear-gradient(to bottom, var(--color-btn-execute-start), var(--color-btn-execute-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#inputForm header .header-contents {
    display: inline-block;
    vertical-align: bottom;
}

#inputForm header .header-contents span {
    font-size: var(--font-size-label-medium);
}

#inputForm div[class$="-container"] {
    padding-right: 3rem;
    padding-left: 3rem;
    margin-top: 1.5rem;
}

#inputForm div[class*="-container"] [class*="-content"] {
    text-align: center;
    background-color: white;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 0.5rem;
}

    #inputForm div[class*="-container"] [class*="-content"] .wj-content {
        padding: 0;
    }

.validation-summary ul:has(li:empty) {
    margin-block: 0;
}

.validation-summary:has(li:not(:empty)),
.validation-summary:has(span:not(:empty)) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    color: var(--color-error);
    background-color: var(--color-error-background);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    font-size: var(--font-size-error);
}

.validation-summary ul:has(li:not(:empty)),
.validation-summary > span:not(:empty) {
    display: block;
    margin-top: 0;
    margin-bottom: 0rem;
    padding-left: 2rem;
}

.validation-summary li {
    list-style-type: none;
}

.btn {
    --bs-btn-color: #000;
    --bs-btn-bg: #eee;
    --bs-btn-border-color: #eee;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgb(0 0 0 / 12.5%);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa;
}

.btn-cancel,
.btn-cancel:not(:disabled):active:not(:hover) {
    min-width: 10rem !important;
    background: linear-gradient(to bottom, var(--color-btn-cancel-start), var(--color-btn-cancel-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-cancel:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-cancel-hover), var(--color-btn-cancel-hover)) !important;
        color: white !important;
    }

        .btn-cancel:not(:disabled):hover:active {
            transform: scale(0.95) !important;
            box-shadow: none !important;
        }

.btn-execute,
.btn-execute:not(:disabled):active:not(:hover) {
    min-width: 10rem !important;
    background: linear-gradient(to bottom, var(--color-btn-execute-start), var(--color-btn-execute-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-execute:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-execute-hover), var(--color-btn-execute-hover)) !important;
        color: white !important;
    }

        .btn-execute:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-execute2,
.btn-execute2:not(:disabled):active:not(:hover) {
    min-width: 10rem !important;
    background: linear-gradient(to bottom, var(--color-btn-execute2-start), var(--color-btn-execute2-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-execute2:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-execute2-hover), var(--color-btn-execute2-hover)) !important;
        color: white !important;
    }

        .btn-execute2:not(:disabled):hover:active {
            transform: scale(0.95) !important;
            box-shadow: none !important;
        }

.btn-important,
.btn-important:not(:disabled):active:not(:hover) {
    min-width: 11rem !important;
    background: linear-gradient(to bottom, var(--color-btn-important-start), var(--color-btn-important-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-important:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-important-hover), var(--color-btn-important-hover)) !important;
        color: white !important;
    }

        .btn-important:not(:disabled):hover:active {
            transform: scale(0.95) !important;
            box-shadow: none !important;
        }

.btn-deleted,
.btn-deleted:not(:disabled):active:not(:hover) {
    min-width: 10rem !important;
    background: linear-gradient(to bottom, var(--color-btn-delete-start), var(--color-btn-delete-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-deleted:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-delete-hover), var(--color-btn-delete-hover)) !important;
        color: white !important;
    }

        .btn-deleted:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-back,
.btn-back:not(:disabled):active:not(:hover) {
    min-width: 11rem !important;
    background: linear-gradient(to bottom, var(--color-btn-back-start), var(--color-btn-back-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-back:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-back-hover), var(--color-btn-back-hover)) !important;
        color: white !important;
    }

        .btn-back:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-send,
.btn-send:not(:disabled):active:not(:hover) {
    min-width: 11rem !important;
    background: linear-gradient(to bottom, var(--color-btn-send-start), var(--color-btn-send-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-send:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-send-hover), var(--color-btn-send-hover)) !important;
        color: white !important;
    }

        .btn-send:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-history,
.btn-history:not(:disabled):active:not(:hover) {
    min-width: 11rem !important;
    background: linear-gradient(to bottom, var(--color-btn-history-start), var(--color-btn-history-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-history:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-history-hover), var(--color-btn-history-hover)) !important;
        color: white !important;
    }

        .btn-history:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.btn-history-deleted,
.btn-history-deleted:not(:disabled):active:not(:hover) {
    min-width: 11rem !important;
    background: linear-gradient(to bottom, var(--color-btn-history-delete-start), var(--color-btn-history-delete-end)) !important;
    color: white !important;
    font-size: var(--font-size-button) !important;
    border: none !important;
}

    .btn-history-deleted:not(:disabled):hover {
        background: linear-gradient(to bottom right, var(--color-btn-history-delete-hover), var(--color-btn-history-delete-hover)) !important;
        color: white !important;
    }

        .btn-history-deleted:not(:disabled):hover:active {
            transform: scale(0.95);
            box-shadow: none;
        }

.form-check-input {
    margin-top: 0;
}

.wj-flexgrid [wj-part=root] {
    overflow: auto !important;
}

.wj-flexgrid .wj-cell:not([wj-state-measuring]) button.wj-cell-maker.btn-grid-item {
    position: relative;
    display: block;
    max-width: 90%;
    max-height: 2.75rem;
    margin-right: auto;
    margin-left: auto;
}

.wj-flexgrid .wj-cell:not([wj-state-measuring]).single-line button.wj-cell-maker.btn-grid-item {
    padding: 0;
}

.wj-flexgrid .wj-cell.wj-state-selected.wj-cell-nofocus {
    background: white;
    box-shadow: none;
}

.wj-flexgrid .wj-cell.wj-alt.wj-state-selected.wj-cell-nofocus {
    background: #f7f7f7;
    box-shadow: none;
}

.wj-flexgrid .wj-cell label input[type=checkbox]:has( + span:empty) {
    margin-inline: 0;
    margin-block: auto;
    padding: 0;
}

[class*="col-content"] {
    --col-content-title-width: 10rem;
    --col-content-value-max-width: var(--content-width-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

@media (min-width: 992px) {
    [class*="col-content"] {
        flex: 1;
        max-width: calc(var(--col-content-title-width) + var(--col-content-value-max-width) + var(--bs-gutter-x));
    }
}

.col-content-md {
    --col-content-value-max-width: var(--content-width-md);
}

.col-content-lg {
    --col-content-value-max-width: var(--content-width-lg);
}

.col-content-auto {
    max-width: 100%;
}

.col-content-date {
    --col-content-value-max-width: 25rem;
}

[class*="col-content"] .title {
    display: flex;
    align-items: center;
    width: var(--col-content-title-width);
}

[class*="col-content"] > .value {
    width: calc(100% - var(--col-content-title-width));
}

[class*="col-content"] .value {
    display: flex;
    align-items: center;
    font-size: var(--font-size-label-small);
}

[class*="col-content"] span.value {
    min-height: 3.05rem;
    border-bottom: 1px solid black;
}

.date-picker {
    min-width: 8.8rem;
    max-width: 100%;
}

div.icon:has(> .date-picker) {
    position: relative;
}

    div.icon:has(> .date-picker)::after {
        --icon-size: var(--font-size-label-small);
        position: absolute;
        top: calc(50% - (var(--icon-size) / 2));
        right: 0.5rem;
        left: auto;
        width: var(--icon-size);
        height: var(--icon-size);
        content: '';
        background-color: black;
        mask-image: var(--icon-calendar);
        -webkit-mask-repeat: no-repeat;
        mask-size: var(--icon-size);
        pointer-events: none;
    }

.tilde {
    margin-inline: auto;
}

    .tilde::after {
        content: "～";
    }

@media (min-width: 992px) {
    .tilde::after {
        margin-inline: 0.5rem;
    }
}

div.collapse-title {
    font-size: var(--font-size-label-medium);
    font-weight: bold;
}

.accordion-button {
    width: auto;
}

    .accordion-button.collapsed {
        background: none;
        -webkit-text-fill-color: white;
        color: white;
    }

[class*="-content"]:not(.body-content):has(.accordion-button.collapsed) {
    background: linear-gradient(to bottom, var(--color-btn-execute-start), var(--color-btn-execute-end));
}

.accordion-button:not(.collapsed) {
    background: linear-gradient(to bottom, var(--color-btn-execute-start), var(--color-btn-execute-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

label.content-title {
    font-size: var(--font-size-label-small);
    font-weight: bold;
}

.content-value {
    margin-left: 1rem;
    margin-right: 1rem;
}

span.error {
    color: var(--color-error);
}

div.single-border {
    border: 1px solid black;
}

div.error-comment {
    font-size: var(--font-size-label-large);
    padding-top: 1rem;
}

div.no-result {
    margin: 2rem;
}

    div.no-result > span {
        font-size: var(--font-size-label-medium);
        cursor: default;
    }

div.wj-cell.locked {
    color: var(--color-locked);
    background-color: var(--color-locked-background);
}

div.wj-cell.diff {
    background-color: var(--color-diff-background);
}

input.import {
    cursor: pointer;
    width: 35rem;
}

.fadein {
    animation: fadein 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}