@charset "UTF-8";
/**
 * 入力 css
 * @version 23.05.26
 * @version 2024.01.24 カレンダーアイコン付きを追加
 * @version 2024.03.25 時間入力を追加
 */

:root {
 --placeholder-color: #b7b1b1;
 --inp-br-color: #cccccc;
 --inp-br: 1px solid var(--inp-br-color);
}

/* placeholder */
:placeholder-shown { color: var(--placeholder-color); }
::-webkit-input-placeholder { color: var(--placeholder-color); } /* Google Chrome, Safari, Opera 15+, Android, iOS */
:-moz-placeholder { color: var(--placeholder-color); opacity: 1; } /* Firefox 18- */
::-moz-placeholder { color: var(--placeholder-color); opacity: 1; } /* Firefox 19+ */
:-ms-input-placeholder { color: var(--placeholder-color); } /* IE 10+ */

/*input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { background: none; }*/
input[type="date"][value=""][readonly]::-webkit-datetime-edit, input[type="date"][value=""]:disabled::-webkit-datetime-edit { visibility: hidden; }
input[type="date"][value=""][readonly], input[type="date"][value=""]:disabled { color: #fff; }
textarea.no-border { border: none; border-radius: 0; }

input,textarea,select { border-radius: 7px; padding: 4px; font-size: 15px; color: #555555; border: var(--inp-br); width: 100%; }
input[readonly], input[readonly]:disabled, textarea[readonly], textarea[readonly]:disabled, select[readonly], select[readonly]:disabled { cursor: default; background-color: transparent; border-color: transparent; outline: none; }
input[type="number"][readonly]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input:not(.datepicker-cc):focus, textarea:not(.datepicker-cc):focus, select:not(.datepicker-cc):focus { /*background-color: #f1f8ff;*/ outline: var(--blu) 2px solid; outline-offset: -2px; }
select { padding: 1px 4px; min-height: 29px; }

/* textareaデータのラベル表示 */
.txa-box { min-height: 46px; border-radius: 6px; padding: 4px; color: #555555; border: var(--inp-br); }
.txa-box.no-border { border: none; }
.txa-box > div { display: block; text-overflow: clip; white-space: normal; word-break: break-all; min-height: 1em; }

/* selectのplaceholder */
.select-box { position: relative; }
.select-box[data-select-val=""]::after { content: attr(data-select-placeholder); position: absolute; top: 50%; left: 4px; transform: translateY(-50%); color: var(--placeholder-color); pointer-events: none; }


/* range */
/*
[html]
<div class="range p-left v-sub"><input type="range" min="0" max="100" /></div>
-option-
・p-left:valueを左側に表示
・v-sub:「max-value」を表示
*/
input[type="range"]:not(:disabled):not([readonly]) { cursor: pointer; }
.range-box { display: flex; }
.range-box.p-left { flex-direction: row; }
.range-box.p-right { flex-direction: row-reverse; }
.range-box.p-left input[type="range"] { width: 80%; margin-left: 3%; }
.range-box.p-right input[type="range"] { width: 80%; margin-right: 3%; }
.range-box.v-sub input[type="range"] { width: 60%; margin-left: 3%; margin-right: 3%; }
.range-box .v-val, .range-box .v-sub { width: 17%; }


/* datepicker */
/*
[html]
(月までの例)
<input type="text" name="hogeDt" placeholder="hogeDt" value="${_f.out(_f.hogeDt, 'yyyy-MM')}" autocomplete="off" class="datepicker-here" data-language="orgin-cal" data-min-view="months" data-view="months" data-date-format="yyyy-mm" readonly data-position="bottom left" />
option
・cngWithSubmit 変更時にsubmitされる
・with-clear 入力クリアボタンを付与する ※クリアボタンの表示有無判定のためにplaceholderの指定が必要
・with-icn カレンダーアイコン付き
*/
input.datepicker-here { border-color: #ccc; background-color: #fff; cursor: text; }
.datepicker-here-wrap { position: relative; display: inline-block; font-size: 0; width: fit-content; }
.datepicker-here-wrap .datepicker-here.hid ~ .date-clear-btn{ display: none; }
.datepicker-here-wrap .date-clear-btn.btn.bdg.min { position: absolute; top: -3px; right: -6px; opacity: 0.5; display: block; border-width: 0; border-radius: 0; background-color: transparent; background-image: none; box-shadow: none; padding: 2px 2px 2px 4px; -webkit-transform: none; transform: none; }
.datepicker-here-wrap .date-clear-btn:hover { opacity: 0.9; }
/* 入力がなかったらクリアボタンを非表示(placeholderの指定が必要) */
.datepicker-here-wrap input.datepicker-here:placeholder-shown ~ .date-clear-btn.btn.bdg.min,
.datepicker-here-wrap input.datepicker-here:disabled ~ .date-clear-btn.btn.bdg.min { display: none; }
.datepicker-here-wrap.icn-cal::after { content: '\f073'; font-family: 'Font Awesome 5 Free'; position: absolute; bottom: 1px; right: 6px; font-size: 15px; color: var(--placeholder-color); pointer-events: none; }
/* datepicker入力確認用 */
.datepicker-cc { height: 0 !important; line-height: 0 !important; padding: 0 !important; border: 0 !important; margin: 0 !important; position: absolute; left: 0; bottom: 0; }
.datepicker--cell.-disabled { position: relative; color: #ccc; }
.datepicker--cell.-disabled::before { content: ' '; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--gra-op10); cursor: auto; z-index: 9999; }

/* エラー・警告・成功 */
.box-err { box-shadow: 0 0 1px 1px var(--danger) inset; }
.box-wrn { box-shadow: 0 0 1px 1px var(--warning) inset; }
.box-suc { box-shadow: 0 0 1px 1px var(--success) inset; }
.val-err { font-size: 12px; color: var(--danger); word-break: break-all; white-space: normal; line-height: 1.2; }
.val-err::before { content: '\f06a'; margin-right: 0.3em; font-weight: 900; font-family: "Font Awesome 5 Free"; }

/* バリデーションエラー時に時計などのアイコンがズレないようにする */
.datepicker-here-wrap .val-err, .fjtime-box .val-err { position: absolute; top: 2px; left: 4px; }
.datepicker-here-wrap .box-err:placeholder-shown { color: transparent; }
.datepicker-here-wrap .box-err::-webkit-input-placeholder { color: transparent; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
.datepicker-here-wrap .box-err:-moz-placeholder { color: var(--placeholder-color); opacity: 0; } /* Firefox 18- */
.datepicker-here-wrap .box-err::-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 19+ */
.datepicker-here-wrap .box-err:-ms-input-placeholder { color: transparent; } /* IE 10+ */
.fjtime-box .box-err:placeholder-shown { color: transparent; }
.fjtime-box .box-err::-webkit-input-placeholder { color: transparent; } /* Google Chrome, Safari, Opera 15+, Android, iOS */
.fjtime-box .box-err:-moz-placeholder { color: var(--placeholder-color); opacity: 0; } /* Firefox 18- */
.fjtime-box .box-err::-moz-placeholder { color: transparent; opacity: 0; } /* Firefox 19+ */
.fjtime-box .box-err:-ms-input-placeholder { color: transparent; } /* IE 10+ */
.fjtime-box.inping .val-err { display: none; }

/* 必須項目 */
.required_clm, .ctrlenter_clm { position: relative; }
.required_clm:not(.in-textarea), .ctrlenter_clm:not(.in-textarea) { width: fit-content; }
.required_clm::after { content: '*必須'; font-size: 10px; position: absolute; right: 4px; top: 1px; color: var(--danger); }


/* Ctrl + Enter */
.ctrlenter_clm::after { content: 'C + Enter'; font-size: 10px; position: absolute; right: 4px; bottom: 1px; color: #aaa; }

/* 期間From～To */
/*
<div class="fromto-box jc-c">
  <div><fmt:formatDate value="${fr}" pattern="yyyy-MM" /></div>
  <div><fmt:formatDate value="${to}" pattern="yyyy-MM" /></div>
</div>
*/
.fromto-box { display: flex; justify-content: space-between; align-items: center; }
.fromto-box.jc-c { justify-content: center; }
.fromto-box.jc-r { justify-content: right; }
.fromto-box::after { content: '～'; display: block; order: 1; }
.fromto-box.jc-c::after { margin: 0 8px; font-size: 15px; }
.fromto-box *:last-of-type { order: 2; }

/* 入力可能なプルダウン */
.inp-sel-box .srh-box { position: relative; }
.inp-sel-box .srh-box .angle { position: absolute; right: 2px; top: 0; bottom: 0; right: 2px; width: 16px; }
.inp-sel-box .srh-box .angle::before { content: '\f107'; font-family: 'Font Awesome 5 Free'; font-weight: 900; color: #bbb; font-size: 14px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.inp-sel-box .srh-box:hover .angle { background-color: var(--gra-op10); }
.inp-sel-box .srh-box input { cursor: default; }
.inp-sel-box .sel { position: fixed; background-color: #fff; left: -3000px; z-index: 1; opacity: 0; box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2); overflow: auto; }
.inp-sel-box .sel > li:hover { background-color: var(--blu); color: #fff; }

/* 3桁カンマ区切り表示 */
input[data-use-sep3="true"] +.val-err {
  display: none;
}

/* 時間入力 */
.fjtime-box { width: 120px; position: relative; }
.fjtime-box.inping { z-index: 1; }
.fjtime-box::before { content: '\f017'; font-family: 'Font Awesome 5 Free'; position: absolute; top: 50%; transform: translateY(-50%); right: 4px; opacity: 0.8; pointer-events: none; }
.fjtime-box input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.fjtime-box input[type="time"]::-webkit-calendar-picker-indicator
 { background: none; }

.fjtime-box.inping::before { display: none; }
.fjtime-box.inping input { margin-top: 2px; }

.fjtime-box:not(.inping) dl { height: 1px; overflow: hidden; color: transparent; border-color: transparent; padding: 0; }
.fjtime-box.inping dl { position: fixed; }

.fjtime-box.no-sec dl dt select:nth-of-type(3),
.fjtime-box.no-sec dl dt::after
 { display: none; }

.fjtime-box dl { border: var(--inp-br); border-radius: 7px; padding: 2px; background-color: #fff; width: 120px; }
.fjtime-box dl dt { display: flex; gap: 2px; }
.fjtime-box dl dt::before,
.fjtime-box dl dt::after { content: ':'; display: block; }
.fjtime-box dl dt select:nth-of-type(1) { order: 1; }
.fjtime-box dl dt select:nth-of-type(2) { order: 3; }
.fjtime-box dl dt select:nth-of-type(3) { order: 5; }
.fjtime-box dl dt::before { order: 2; }
.fjtime-box dl dt::after { order: 4; }
.fjtime-box dl dt select { padding: 0 4px; min-height: auto; border: none; background-color: #f1f1f1; }
.fjtime-box dl dt select:focus { outline: none;	background-color: var(--pri); color: #fff; }
.fjtime-box dl dt select:focus option {	background-color: #fff; color: #555; }
.fjtime-box dl dd { display: flex; justify-content: space-around; padding: 4px 0; margin-top: 6px; }
.fjtime-box .btn.bdg.min { border-radius: 6px; min-width: auto; padding: 1px 14px; height: fit-content; }
.fjtime-box .btn.bdg.min.clear-btn { padding: 1px 6px; }
.fjtime-inping-overlay::before { content: ' '; background-color: transparent; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; }