#schedule { position:relative; height:100%; display:flex; flex-direction:column; }
#schedule-container { position:relative; flex:1; background:#fff; display:flex; gap:10px; }
#schedule > p { position:absolute; left:10px; bottom:5px; font-size:11px; }


.calendar { position:relative; flex:1; height:100%; display:flex; flex-direction:column; }
.calendar > .calendar-header { display:flex; gap:10px; }
.calendar > .calendar-header > .calendar-center { flex:1; font-size:20px; display:flex; justify-content:center; align-items:center; gap:10px; }
.calendar > .calendar-header > .calendar-center > .month { margin-right:20px; }
.calendar > .calendar-header .schedule-btn-A { position:relative; padding:0 15px; height:35px; border-radius:5px; border: 1px solid #ccc; font-size:12px; }
.calendar > .calendar-header .schedule-btn-A > span { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); }
#sub02 { padding-bottom:20px; }
#sub02 .material-symbols-outlined { color:#000; }

.calendar > .calendar-header .schedule_canvas_group { display:flex; flex-direction:column; gap:10px; }
.calendar > .calendar-header .schedule_canvas { font-size:12px; }
.calendar > .calendar-header .schedule-btn-B { position:relative; padding:0 10px; height:30px; border-radius:5px; border: 1px solid #ccc; font-size:10px; }
.schedule-font-color { position:relative; --font-color:#fff; --font-background:#000; background:var(--font-background); color:var(--font-color); padding:0 10px; height:30px; border-radius:5px; border: 1px solid #ccc; font-size:10px; }


.calendar .calendar-days { height:30px; margin-top:20px; display:flex; justify-content:center; align-items:center; border: 1px solid #ccc; }
.calendar .calendar-days > div { flex:1; display:flex; justify-content:center; align-items:center; }

.calendar .calendar-content-wrap { position:relative; flex:1; display:flex; flex-direction:column; }
.calendar .calendar-content { display:flex; flex-direction:column; }
.calendar .calendar-content > div { height:150px; display:flex; justify-content:center; align-items:center; border-bottom: 1px solid #ccc; }
.calendar .calendar-content > div > .list { flex:1; position:relative; height:100%; user-select: none; }
.calendar .calendar-content > div > .list:not(:last-child) { border-right: 1px dashed #ccc; }
.calendar .calendar-content > div > .list:first-child { color:#ff5757; }
.calendar .calendar-content > div > .list:last-child { color:#6464ff; }
.calendar .calendar-content > div > .list.next_day { color:#ccc; background:#f6f6f6; }
.calendar .calendar-content > div > .list.prev_day { color:#ccc; background:#f6f6f6; }
.calendar .calendar-content > div > .list > span { position:absolute; right:5px; top:5px; width:25px; height:25px; z-index:2; display:flex; justify-content:center; align-items:center; pointer-events: none; } 

.calendar .calendar-content > div > .list.today { color:#fff; }
.calendar .calendar-content > div > .list.today:after { content:""; position:absolute; width:25px; height:25px; border-radius:50%; background:#7d7dff; right:5px; top:5px; pointer-events: none; }

.calendar .calendar-content > div > .list:has(.holiday-name) { color:#ff5757; }
.calendar .calendar-content-wrap > #canvas { position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }
.calendar .calendar-content-wrap > #canvas canvas { width:100%; height:100%; }
.calendar .calendar-content-wrap > #canvas.on { pointer-events:auto; }
.calendar .cursor { position:absolute; display:none; }
.calendar .cursor.on { --cursor:#000; display:flex; width:5px; aspect-ratio:1; left:0; top:0; transform:translate(-50%, -50%); border-radius:50%; border: 1px solid var(--cursor); pointer-events:none; }

.tempImage { z-index:3; }
.resize-status { position:absolute; border:2px dashed #000; z-index:2; }
	
.holiday-name { padding:10px; font-size:12px; color:#ff5757; }


.newItem { position:absolute; left:0; width:calc(100% + 1px); height:20px; background:rgba(0, 0, 0, 0.2); pointer-events: none; padding-left:10px; font-size:11px; }
.newItem.start { border-radius:10px 0 0 10px; }
.newItem.end { border-radius:0 10px 10px 0; }
.newItem.start.end { border-radius:10px; }


.item { position:absolute; left:0; width:calc(100% + 1px); height:20px; font-size:11px; background:var(--itembg); color:var(--itemcolor); }
.item > div { position:relative; width:100%; height:100%; }
.item:hover { z-index:10; }

.item span { padding-left:10px; overflow:hidden; }

.item .item-status { font-size:11px; }
.item.start { border-radius:10px 0 0 10px; }
.item.end { border-radius:0 10px 10px 0; }
.item.start.end { border-radius:10px; }

.item.shape2 { background:transparent; color:var(--itemcolor); }
.item.shape2.start.end { border-radius:0; }
.item.shape2 > div { border-bottom:2px solid var(--itembg); }

.item.shape3 { width:20px; color:#000; white-space: nowrap; padding-left:10px; }
.item.shape3 > div > span { display:none; }
.item.shape3.on span { overflow: visible; display:inline-block; }

.newItem.shape3 { width:20px; }
.newItem.shape3 > div > span { display:none; }

.item.inactive { pointer-events: none; }

.schedule_update { height:100%; display:flex; flex-direction:column; padding:10px; }
.schedule_update > .content { flex:1; }
.schedule_update .form-group { margin-top:20px; display:flex; }
.schedule_update .form-group .inputM { height:40px; border: 1px solid #ccc; border-radius:5px; }
.schedule_update .form-group .inputM > .box > input:focus ~ .text { color:#999; }
.schedule_update .form-group .inputM > .box > input.on ~ .text { color:#999; }
.schedule_update .form-group .inputM > .box > textarea.on ~ .text { color:#999; }
.schedule_update .form-group .selectbox { height:40px; border: 1px solid #ccc; border-radius:5px; }
.schedule_update .jw-selected { border-radius:5px; }
.schedule_update .buttonwrap > button { width:100px; }

.schedule_update .shape { display:flex; width:80px; height:20px; }
.schedule_update .shape1 { border-radius:10px; background:var(--bg); }
.schedule_update .shape2 { height:2px; background:var(--bg); }
.schedule_update .shape3 { width:20px; height:20px; border-radius:50%; background:var(--bg); }

.schedule_update .jw-select > .jw-select-list > .jw-select-item { gap:10px; }

.jw_modal section .buttonwrap > button.submit { background:#7D7DFF; }

.jw_modal .selectbox > .select_options { top:auto; bottom:0; }

dialog { overflow: visible; }

.schedule_update .jw-color { width:80px; height:35px; border-radius:5px; overflow:hidden; }

#schedule .tooltip { position:absolute; width:100%; min-height:50px; background:#333; border-radius:5px; padding:5px; display:flex; flex-direction:column; gap:10px; z-index:1000; color:#fff; }
#schedule .tooltip 
#schedule .tooltip > div { position:relative; }
#schedule .tooltip > .tooltip-date { font-size:10px; color:#fff000; display:flex; gap:10px; }
#schedule .tooltip > .tooltip-button { display:flex; justify-content:flex-end; }
#schedule .tooltip > .tooltip-button > button { width:50px; height:20px; padding:0; }

#schedule .tooltip > .tooltip-content::after { content: ''; position: absolute; top:calc(100%); left:20px; background: #333; width:20px; height:10px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: translateX(-50%) rotate(180deg); }
#schedule .tooltip.up > .tooltip-content::after { top:-10px; transform: translateX(-50%); }

#schedule .done .tooltip { background:#eee; color:#444; }
#schedule .done .tooltip > .tooltip-content::after { background:#eee; }
#schedule .done .tooltip > .tooltip-date { color:#444; }

#schedule .pause .tooltip { background:#eee; color:#000; }
#schedule .pause .tooltip > .tooltip-content::after { background:#eee; }
#schedule .pause .tooltip > .tooltip-date { color:#000; }

#schedule .jw-range-type-A { position:relative; width:100px; }
#schedule .jw-range-type-A progress { height:2px; }
#schedule .jw-range-type-A .thumb { position: absolute; top: 50%; left:0; transform: translateY(-50%); width: 8px; height: 8px; background-color: #4caf50; border-radius: 50%; pointer-events: none; z-index: 3; }

#schedule .color-label { position:relative; width:35px; height:35px; display:flex; justify-content:center; align-items:center; }
#schedule .color-label > span { font-size:16px; }
#schedule .color-label > input[type="color"] { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:100%; height:100%; opacity:0; cursor:pointer; }
#schedule .brushswitch { fill:#000; }
#schedule .brushswitch.on { fill:#ff6600; }

#memo { position:absolute; opacity:0; right: calc(-1 * min(100%, 350px)); top:20px; width:100%; max-width:350px; height:100%; background:#FCFCFC; padding:14px; z-index:2; box-shadow: 0px 0px 10px rgba(0,0,0,0.1); transition: all 0.2s ease-in; }
#memo { display:flex; flex-direction:column; gap:10px; }
#memo.on { right:0; opacity:1; }
#memo > .controls { display:flex; justify-content:space-between; gap:10px; }
#memo > .controls > button { font-size:12px; height:24px; padding:0 10px; border-radius:5px; }
#memo .memo-content { position:relative; flex:1; overflow:auto; }
#memo .memo-content > .card { margin-top:20px; margin-bottom:20px; }
#memo .memo-content > .card > .controls { margin-top:10px; display:flex; justify-content:flex-end; gap:10px; }
#memo .memo-content > .card > .controls button { font-size:12px; height:24px; padding:0 10px; border-radius:5px; font-weight:normal; }
#memo .memo-content > .card > .time { font-size:11px; }
#memo .memo-content > .card > .content { position:relative; margin-top:5px; color:#000; }
#memo .memo-content > .card > .content svg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }

#memo .memo-content::-webkit-scrollbar { display:initial; width:10px; }
#memo .memo-content::-webkit-scrollbar-track { border-radius:4px; background:#fff; }
#memo .memo-content::-webkit-scrollbar-thumb { background:#78A8FF; border-radius:5px; border:3px solid white; }


.memo-editor-container { position:relative; width:100%; height:100%; overflow:auto; }
.memo-editor-container svg { position:absolute; left:0; top:0; width:100%; height:100%; z-index:-1; }
.memo-editor-container svg.on { z-index:10; }
.memo-editor-container::-webkit-scrollbar { display:initial; }
.memo-editor-container::-webkit-scrollbar-thumb { background:#78A8FF; }
.memo-editor { position:relative; width:100%; height:100%; }

#schedule-memo-update-form .controller { margin-top:10px; display:flex; gap:20px; }
#schedule-memo-update-form .controller button { font-size:12px; padding:3px 10px; border-radius:5px; }
#schedule-memo-update-form .controller button.on { background:#4876EE; color:#fff; }