@charset "UTF-8";
/** app css */

:root {
  --body-bgcolor: #ddddff;
  --content-width: 1300px;
  --content-bgcolor: #fff;
  --tst-color: #103184;

/*  --app-theme-color: red;*/
}

body { background-color: var(--body-bgcolor); }
.content { width: var(--content-width); max-width: var(--content-width); min-height: calc(100vh - 1px); min-height: calc(100dvh - 1px); margin: 0 auto; background-color: var(--content-bgcolor); }

/* message */
.msgbox-outer { z-index: 99; position: fixed; top: 70px; left: 50%; transform: translateX(-50%); font-size: 16px; max-height: 850px; border: 2px solid #000; padding: 8px 12px; letter-spacing: 0.1em; min-width: 350px; border-radius: 6px; max-height: 400px; overflow-y: auto; }
.msgbox-outer:empty { display: none; }
.msgbox-outer.mb-err { background-color: rgb(255, 233, 233, 0.9); border-color: var(--dan); color: var(--dan); }
.msgbox-outer.mb-wrn { background-color: rgb(255, 255, 233, 0.9); border-color: var(--war); color: var(--war); }
.msgbox-outer.mb-cmp { background-color: rgb(233, 255, 233, 0.9); border-color: var(--suc); color: var(--suc); }
.msgbox-outer > li { overflow: visible; text-overflow: clip; white-space: break-spaces; font-size: 15px; }

/* 共通エラー画面 */
.err-box { min-width: 350px; max-width: 850px; }
.err-box h1 { font-size: 25px; font-weight: bold; padding: 10px 10px; }
.err-box p { padding: 0 10px; }

/* カレンダー */
.cal-wrap { margin-bottom: 12px; }
.cal-wrap > ul { display: flex; justify-content: space-between; font-size: 24px; padding: 2px 16px; }
.cal-wrap > ul li:is(:first-of-type, :last-of-type) { color: #4080FF; cursor: pointer; }
.cal-wrap > ul li [date-fmt] span { font-weight: bold; }
.cal-wrap > ul li:is(:first-of-type, :last-of-type) [date-fmt] > span:nth-child(odd) { min-width: auto; }
.cal-wrap > ul li:is(:first-of-type, :last-of-type) [date-fmt] > span:nth-of-type(-n+2) { display: none; }
.cal-wrap > div > dl { display: flex; justify-content: space-between; flex-wrap: wrap; background-color: #fff; }
.cal-wrap > div > dl :is(dt, dd) { width: 14%; width: calc(100% / 7); text-align: center; }
.cal-wrap > div > dl dt { font-weight: bold; padding-top: 8px }
.cal-wrap > div > dl dt:nth-last-of-type(2) { color: var(--saturday); }
.cal-wrap > div > dl dt:nth-last-of-type(1) { color: var(--sunday); }
.cal-wrap > div > dl dd { position: relative; padding: 4px 4px; border-top: 1px solid #D5D4DF; border-left: 1px solid #D5D4DF; }
.cal-wrap > div > dl dd:has(div) { cursor: pointer; }
.cal-wrap > div > dl dd:nth-of-type(7n)  { border-right: 1px solid #D5D4DF; }
.cal-wrap > div > dl dd:nth-last-of-type(-n+7) { border-bottom: 1px solid #D5D4DF; }
.cal-wrap > div > dl dd > div { padding: 6px 0; margin: 4px 4px 10px; border-radius: 8px; }
.cal-wrap > div > dl dd:is(.current, :hover) > div { outline: 1px dashed #000; }
.cal-wrap > div > dl dd.-today::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background-color: #000; position: absolute; left: 50%; transform: translateX(-50%); top: 8px; font-size: 20px; }
.cal-wrap > div > dl dd::after { content: attr(data-title); position: absolute; bottom: -2px; left: 0; right: 0; font-size: 11px; padding: 0 2px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #555; }

.cal-wrap > div > dl dd[data-dow="6"] { color: var(--saturday); }
.cal-wrap > div > dl dd:is([data-dow="7"], [data-holiday="1"]) { color: var(--sunday); }

.accordion-box:not(:is(.default-open, .open)) .acrd-btn > label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* アイコン */
:is(.menu-i.mi-course, .usr-ft ul li.stamp)::before { content: '\f64a'; font-weight: 900; color: transparent; }
.menu-i.mi-course::before { -webkit-text-stroke: 1px #000; }
header .menu-i.mi-course::before { -webkit-text-stroke: 1px #fff; }
.usr-ft ul li.stamp::before { -webkit-text-stroke: 1px #999; }
:is(.menu-i.mi-leave, .usr-ft ul li.leave)::before { content: '\f073'; font-weight: 400; }
:is(.menu-i.mi-workLog, .usr-ft ul li.workLog)::before { content: '\f272'; font-weight: 400; }
:is(.menu-i.mi-event, .usr-ft ul li.event)::before { content: '\f017'; font-weight: 400; }
:is(.menu-i.mi-notice, .usr-ft ul li.notice)::before { content: '\f0f3'; font-weight: 400; }
.menu-i.mi-usr::before { content: '\f500'; font-weight: 900; color: transparent; -webkit-text-stroke: 1px #000; }
header .menu-i.mi-usr::before { -webkit-text-stroke: 1px #fff; }
.menu-i.mi-setting::before { content: '\f013'; font-weight: 900; color: transparent; -webkit-text-stroke: 1px #000; }
header .menu-i.mi-setting::before { -webkit-text-stroke: 1px #fff; }
.menu-i.mi-day::before { content: '\f111'; font-weight: 400; }
.menu-i.mi-month::before { content: '\f186'; font-weight: 400; }

.fromto-box:has(div:first-of-type:empty)::after { display: none; }
:is(form, .inp-wrap) dl ~ dl { margin-top: 16px; }
:is(form, .inp-wrap) dl dt { font-weight: bold; }
:is(form, .inp-wrap) dl dt select { font-weight: normal; }
:is(form, .inp-wrap) dl dd { padding-left: 0.5em; }

/* パンくず */
.pankuzu { margin-bottom: 4px; }
.pankuzu > li { max-width: 316px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pankuzu > li span { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pankuzu > li:last-of-type { letter-spacing: 0.1em; }
.pankuzu > li:last-of-type:empty::before { content: '新規登録'; }
.pankuzu .-to-list-btn { cursor: pointer; border-bottom: 1px solid transparent; }
.pankuzu .-to-list-btn:hover { border-bottom-color: #555; }
.pankuzu .-to-list-btn::before { font-family: 'Font Awesome 5 Free'; content: '\f060'; font-weight: 900; margin-right: 0.2em; font-size: 90%; }

/* 出勤ステータス 出勤中・退勤優先 */
.workLog-box .sts::before { content: '出勤前'; color: var(--gra); }
.workLog-box .sts[data-leave-flg="true"]::before { content: '全休'; color: var(--alert); }
.workLog-box .sts[data-half-flg="1"]::before { content: '午前休'; }
.workLog-box .sts[data-half-flg="2"]::before { content: '午後休'; }
.workLog-box .sts[data-st-flg="true"]::before { content: '勤務中'; color: #000; }
.workLog-box .sts[data-st-flg="true"][data-ed-flg="true"]::before { content: '退勤'; color: var(--gra); }