.jxhtml { --body-background-color: #F8F9FC; --body-background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.2) 1px, transparent 0); --body-background-size: 24px 24px; --bar-max-width: 100%; --bar-background: linear-gradient(to top, rgba(255, 244, 241, 0), rgba(251, 226, 210, 1)); --bar-background-color: #EAF5F6; --bar-box-shadow: none; --barContent-width: 100%; --button-background-color: #1B3557; --menu-box-shadow: 0 6px 6px 0 rgba(234, 229, 223, 1); --menuTitle-background-color: #000000; --menuButton-background-color: #F9F5F0; --menuButton-border-bottom: 2px solid #999999; --menuButton-border-bottom-color: #EFC9B1; --menuButton-box-shadow: rgb(255 244 241 / 100%) 0px -12px 12px 0px; --menuButton-color: #000000; --front-max-width: auto; --front-background: transparent; --front-box-shadow: none; --frontItem-text-align: center; --alert-background: rgba(234, 229, 223, 0.8); }
* { cursor: default; user-select: none; outline: none; }
.jxhtml { width: 100%; max-width: 100%; height: 100%; overflow-y: scroll; }
.jxbody { top: 0px; margin-left: 0px; margin-right: 0px; padding: 0px; width: 100%; max-width: 100%; height: 100%; min-height: 100%; background-color: var(--body-background-color); background-image: var(--body-background-image); background-attachment: fixed; background-size: var(--body-background-size); background-position: 0px 0px; color: var(--body-color); font-family: sans-serif; font-weight: 200; font-size: 18px; }
.jxbody::-webkit-scrollbar { display: none; }
.scrollNo { scrollbar-width: none; }
.scrollNo::-webkit-scrollbar { display: none; }
svg { display: block; margin: auto; }
.clipClose { position: absolute; right: 18px; top: 12px; width: 24px; height: 24px; line-height: 24px; border: 2px solid rgb(134, 133, 133); border-radius: 50%; font-size: 0px; font-weight: bold; text-align: center; color: rgb(134, 133, 133); box-sizing: content-box; }
.clipClose::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background-color: currentcolor; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.75 2V4.25977C6.75 4.55802 6.85676 4.84673 7.05078 5.07324L12 10.8467L16.9492 5.07324C17.1432 4.84673 17.25 4.55802 17.25 4.25977V2H18.75V4.25977C18.75 4.91622 18.5151 5.55139 18.0879 6.0498L12.9873 12L18.0879 17.9502C18.5151 18.4486 18.75 19.0838 18.75 19.7402V22H17.25V19.7402C17.25 19.442 17.1432 19.1533 16.9492 18.9268L12 13.1523L7.05078 18.9268C6.85676 19.1533 6.75 19.442 6.75 19.7402V22H5.25V19.7402C5.25 19.0838 5.48489 18.4486 5.91211 17.9502L11.0117 12L5.91211 6.0498C5.48489 5.55139 5.25 4.91622 5.25 4.25977V2H6.75Z'/></svg>") center center / contain no-repeat; pointer-events: none; }
.calendarItem { position: relative; margin-top: 108px; box-sizing: border-box; width: 1012px; overflow: visible; }
.calendarItem .clipClose { z-index: 7; top: 76px; right: 48px; color: rgb(78, 51, 36); border-color: rgb(78, 52, 35); }
.calendarRings { position: absolute; top: 14px; left: 48px; right: 48px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.calendarRing { position: relative; width: 28px; height: 52px; background: url("/image/theme/calendarRing.png") center top / contain no-repeat transparent; }
.calendarToolbar { position: relative; z-index: 20; flex: 0 0 auto; display: flex; justify-content: flex-start; align-items: center; gap: 24px; box-sizing: border-box; width: 100%; padding: 46px 64px 24px; overflow: visible; }
.calendarSelectSlot { position: relative; flex: 1 1 0px; min-width: 0px; height: 42px; }
.calendarSelectSlot:only-child { flex: 0 1 33%; }
.calendarToolbar .calendarSelectSlot .formSelect { position: absolute; top: 0px; left: 0px; right: 0px; z-index: 1; margin-top: 0px; box-sizing: border-box; }
.calendarToolbar .formSelectOption { background-color: rgb(249, 240, 232); }
.calendarToolbar .calendarSelectSlot .formSelect[open="false"] { height: 42px !important; max-height: 42px !important; }
.calendarBody { position: relative; box-sizing: border-box; overflow: hidden; height: calc(calc(var(--vh, 1vh) * 100) - 132px); display: flex; flex-direction: column; border-radius: 28px; padding: 28px; background-color: rgb(26, 19, 16); background-image: radial-gradient(at 18% 22%, rgba(90, 60, 42, 0.45) 0%, transparent 42%), radial-gradient(at 82% 78%, rgba(0, 0, 0, 0.35) 0%, transparent 48%), linear-gradient(145deg, rgb(42, 28, 22) 0%, rgb(26, 19, 16) 42%, rgb(18, 13, 11) 100%); box-shadow: rgba(40, 60, 80, 0.16) 0px 10px 28px, rgba(140, 160, 180, 0.35) 0px 0px 0px 1px; }
.calendarBody::before { content: ""; position: absolute; inset: 10px; border-radius: 22px; border: 1.5px dashed rgba(120, 78, 52, 0.55); pointer-events: none; z-index: 1; }
.calendarPaper { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0px; display: flex; flex-direction: column; border-radius: 18px; overflow: visible; background: rgb(249, 240, 232); box-shadow: rgb(239, 232, 220) 0px 1px 0px, rgb(230, 223, 210) 2px 2px 0px, rgb(220, 212, 197) 4px 4px 0px, rgb(208, 199, 182) 6px 6px 0px, rgba(0, 0, 0, 0.35) 8px 10px 18px, rgba(0, 0, 0, 0.05) 0px 2px 4px inset; }
.calendarGrid { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0px; display: flex; flex-direction: column; overflow: hidden; border-radius: 0px 0px 18px 18px; background: rgb(249, 240, 232); }
.calendarScroll { flex: 1 1 auto; min-height: 0px; overflow: auto; scrollbar-width: thin; position: relative; background: rgb(249, 240, 232); }
.calendarScrollInner { display: flex; flex-direction: column; min-height: 100%; }
.calendarGridHead { position: sticky; top: 0px; z-index: 4; display: flex; align-items: stretch; border-bottom: 1px solid rgba(70, 55, 40, 0.14); background: rgb(249, 240, 232); }
.calendarTimeCorner { position: sticky; left: 0px; z-index: 5; flex: 0 0 64px; width: 64px; border-right: 1px solid rgba(70, 55, 40, 0.12); background: rgb(249, 240, 232); }
.calendarDays { display: flex; flex: 0 0 auto; }
.calendarDay { flex: 0 0 auto; box-sizing: border-box; padding: 8px 4px; text-align: center; color: rgb(58, 50, 43); user-select: none; border-right: 1px solid rgba(70, 55, 40, 0.08); background: transparent; }
.calendarDayName { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: rgb(90, 74, 60); }
.calendarDayNumber { margin: 2px 0px; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 16px; font-weight: bold; line-height: 1.2; color: rgb(44, 36, 28); }
.calendarDayMonth { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 10px; letter-spacing: 0.08em; color: rgb(122, 106, 88); }
.calendarDayFull { display: none; }
.calendarClose { display: none; }
.calendarDayWeekend { background: transparent; }
.calendarDayToday { background: rgb(255, 250, 245); }
.calendarDayToday .calendarDayNumber { background: transparent; box-shadow: none; color: rgb(44, 36, 28); }
.calendarScrollBody { display: flex; position: relative; }
.calendarTimeCol { position: sticky; left: 0px; z-index: 3; flex: 0 0 64px; width: 64px; background: rgb(249, 240, 232); border-right: 1px solid rgba(70, 55, 40, 0.14); }
.calendarTimeSlot { position: absolute; left: 0px; right: 0px; box-sizing: border-box; padding: 0px 6px 0px 0px; font-size: 11px; font-weight: 600; color: rgb(110, 98, 86); text-align: right; line-height: 72px; border-bottom: 1px solid rgba(70, 55, 40, 0.06); }
.calendarPage { flex: 0 0 auto; position: relative; background: rgb(249, 240, 232); }
.calendarPageContent { position: relative; width: 100%; height: 100%; }
.calendarDayCols { display: flex; width: 100%; height: 100%; }
.calendarDayCol { flex: 0 0 auto; box-sizing: border-box; border-right: 1px solid rgba(70, 55, 40, 0.08); background: transparent; }
.calendarDayColToday { background: rgb(255, 250, 245); }
.calendarSlot { box-sizing: border-box; border-bottom: 1px solid rgba(70, 55, 40, 0.06); cursor: grab; }
.calendarSlotPreHour { border-bottom-color: transparent; }
.calendarSlotHour { border-top: 1px solid rgba(70, 55, 40, 0.2); }
.calendarEvent { position: absolute; box-sizing: border-box; padding: 4px 7px 4px 8px; overflow: hidden; border-radius: 4px; cursor: pointer; z-index: 1; background: rgb(255, 255, 255); border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(213, 224, 236) rgb(213, 224, 236) rgb(213, 224, 236) rgb(0, 87, 168); border-image: initial; box-shadow: rgba(0, 45, 90, 0.08) 0px 1px 2px; }
.calendarEvent.calendarEventBusy { cursor: default; background: repeating-linear-gradient(135deg, rgb(243, 239, 233), rgb(243, 239, 233) 8px, rgb(235, 229, 221) 8px, rgb(235, 229, 221) 16px); border-width: 1px 1px 1px 3px; border-style: solid; border-color: rgb(221, 213, 202) rgb(221, 213, 202) rgb(221, 213, 202) rgb(154, 143, 130); border-image: initial; box-shadow: none; }
.calendarEventBusy .calendarEventTime { color: rgb(107, 97, 87); }
.calendarEventBusy .calendarEventName { color: rgb(107, 97, 87); }
.calendarEventTime { font-size: 15px; font-weight: 700; letter-spacing: 0.02em; color: rgb(0, 75, 135); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 2px; }
.calendarEventRow { display: flex; align-items: center; gap: 4px; width: 100%; box-sizing: border-box; margin-top: 2px; min-width: 0px; }
.calendarEventIcon { flex: 0 0 14px; width: 14px; height: 14px; line-height: 14px; overflow: hidden; color: rgb(51, 51, 51); fill: rgb(51, 51, 51); }
.calendarEventIcon svg { display: block; width: 14px; height: 14px; color: rgb(51, 51, 51); fill: currentcolor; }
.calendarEventStaff { flex: 1 1 auto; min-width: 0px; font-size: 15px; font-weight: 500; line-height: 1.2; color: rgb(61, 79, 99); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.calendarEventName { flex: 1 1 auto; min-width: 0px; font-size: 15px; font-weight: 700; line-height: 1.2; color: rgb(27, 42, 61); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
*, ::before, ::after { cursor: default !important; }
.jxhtml, .jxbody { overflow: hidden; height: 100%; max-height: 100%; touch-action: manipulation; }
.formSimple { border-radius: 0px !important; border-width: 0px 0px 1px !important; border-style: none none solid !important; border-color: currentcolor currentcolor rgb(153, 153, 153) !important; border-image: initial !important; background-color: transparent !important; }
.formTextHide { display: none; }
.formTextIcon { display: inline-block; vertical-align: top; width: 40px; font-size: 22px; text-align: center; }
.formTextIcon svg path { fill: currentcolor; }
.formTextText { display: inline-block; vertical-align: top; width: calc(100% - 40px); min-height: 1.2em; text-align: left; color: rgb(0, 0, 0); caret-color: rgb(0, 0, 0); }
.formSelect { position: relative; margin-top: 12px; height: 42px; max-height: 300px; line-height: 40px; border: 1px solid rgb(153, 153, 153); border-radius: 12px; background-color: rgb(255, 255, 255); box-sizing: border-box; overflow: hidden; transition: height 500ms, background-color 500ms linear, border-color 500ms linear, color 500ms linear; }
.formSelectDetector { position: absolute; width: 100%; height: 40px; }
.formSelectDetectorArrow { float: right; margin: 18px 14px; border-top: 6px solid rgb(140, 140, 140); border-right: 6px solid transparent; border-left: 6px solid transparent; }
.formSelectOption { padding-left: 40px; width: calc(100% - 40px); border-top: 1px dotted rgb(153, 153, 153); text-align: left; }
:host { display: block; }
.jxhtml, .jxbody { width: auto; max-width: none; height: auto; min-height: 0; overflow: visible; background: none; }
.jxhtml { ; }
.jxbody { font-family: 'IBM Plex Sans', sans-serif; }
#dItemCalendar0 { position: relative; margin: 0; width: 500px; }
#dItemCalendar0 .calendarBody { height: var(--jSheet, 640px); }
#dItemCalendar0 .calendarToolbar { padding: 46px 28px 20px; }
#dItemCalendar0 .calendarSelectSlot:only-child { flex: 0 1 220px; }
#dItemCalendar0 .calendarScroll { overflow: hidden; }
#dItemCalendar0 .calendarRings { left: 36px; right: 36px; }