/* 해당 var(--admin_color) 색상코드 변경 시 디자인 일괄적용 */

/* datepicker Style */
.ui-datepicker { width: 270px; padding: 0; display: none; border: 0; margin-top: 10px;}
.ui-widget.ui-widget-content { display:inline-flex; width:270px; margin-top:0; border: 0; border-radius:6px; flex-direction:column; overflow: hidden; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3); justify-content:center; align-items:center; }
.ui-datepicker .ui-widget-header { width:100%; position: relative; padding: 10px 0 36px; border: 0; background: var(--admin_color); color: #fff; border-radius: 0; }
.ui-datepicker select.ui-datepicker-year { margin-right:5px; }
.ui-datepicker select.ui-datepicker-month { margin-left:10px; }
.ui-datepicker select.ui-datepicker-year, .ui-datepicker select.ui-datepicker-month { display:inline-flex; width:80px; min-width:auto; height:30px; background:rgba(0,0,0,0.15); border:none; border-radius:4px; justify-content:center; align-items:Center; font-size:13px; color:#fff; font-weight:bold; text-align:center; cursor:pointer; outline:none; }
.ui-datepicker select.ui-datepicker-month:hover, .ui-datepicker select.ui-datepicker-year:hover { background:rgba(0,0,0,0.3); transition:all .2s; }

.ui-datepicker select::-ms-expand { display: none; /* 화살표 없애기 for IE10, 11*/ }
.ui-datepicker .ui-datepicker-title { display:inline-flex; width:100%; margin:0; justify-content:center; align-items:center; font-size:13px; font-weight:bold; letter-spacing:0; }
.ui-datepicker-title .ui-datepicker-year option, .ui-datepicker-title .ui-datepicker-month option { background: #fff; color: #333; }
.ui-datepicker-title .ui-datepicker-year { }
.ui-datepicker-title .ui-datepicker-month { }
.ui-datepicker .ui-datepicker-calendar { position: relative; width: 260px; padding-top: 100px; margin:0; border:none; }
.ui-datepicker-calendar thead tr { display:inline-flex; width:100%; position: absolute; top:-28px; }
.ui-datepicker-calendar thead th { float: left; display: block; padding: 0; width: 14.2857%; color: #fff; font-size:11px; letter-spacing:1px; opacity: 0.6 }
.ui-datepicker-calendar thead th { background:transparent; }
.ui-datepicker-calendar thead th:not(:last-child) { border:none; }

.ui-datepicker-calendar thead th * { font-size:13px; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top:12px; width:25px; height:25px; cursor:pointer }
.ui-datepicker .ui-datepicker-prev { left:10px; }
.ui-datepicker .ui-datepicker-prev.ui-state-hover { background:transparent; border:0; }
.ui-datepicker-prev.ui-state-hover:before, .ui-datepicker-next.ui-state-hover:before { color:rgba(255,255,255,.8); transition:all .2s; }
.ui-datepicker .ui-datepicker-prev .ui-icon {  }
.ui-datepicker .ui-datepicker-next { right:10px; }
.ui-datepicker .ui-datepicker-next.ui-state-hover { background:transparent; border: 0; }
.ui-datepicker .ui-datepicker-next .ui-icon {  }
.ui-datepicker-prev:before, .ui-datepicker-next:before { display:inline-flex; width:100%; height:100%; font-family:'Font Awesome 6 Pro'; font-weight:bold; font-size:16px; color:#fff; justify-content:center; align-items:center; }
.ui-datepicker-prev:before { content:'\f137'; }
.ui-datepicker-next:before { content:'\f138'; }
.ui-datepicker .ui-state-default { display:inline-flex; border: 0; border-radius:30px; width:100%; aspect-ratio:auto 1 / 1; padding: 0; font-size: 12px; text-align: center; background: #fff; font-weight: normal; color: #333; box-sizing: border-box; justify-content:center; align-items:center; }
.ui-datepicker-today .ui-state-default { color: var(--admin_color); font-weight: bold; }
.ui-datepicker .ui-state-default.ui-state-hover { background:rgba(0,0,0,0.05); transition:all .2s; }
.ui-datepicker .ui-datepicker-today .ui-state-default { background:var(--admin_color-op10); }
.ui-datepicker-current-day .ui-state-default { background: var(--admin_color) !important; color: #fff; font-weight: bold; }

/* ie add Style */
.ui-datepicker td, .ui-datepicker th { padding:5px; border: 0; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
.ui-corner-all { border-radius: 3px; }
.ui-icon { display: block; width: 16px; height: 16px; }

/* 오늘, clear 버튼 */
.ui-datepicker .ui-datepicker-buttonpane { display:inline-flex; width:100%; margin:5px 0; padding:0 5px; padding-top:5px; border-top:1px solid #ddd; justify-content:space-between; overflow:hidden; }
.ui-datepicker .ui-datepicker-buttonpane button { display:inline-flex; width:auto; height:25px; aspect-ratio:auto; margin:0; padding:0 5px; font-size:13px; font-weight:500; overflow:visible; }
.ui-datepicker-buttonpane .ui-state-default { border-radius:4px; }
.ui-datepicker-buttonpane .ui-state-default.ui-state-hover { background:transparent; font-weight:bold; transition:all .2s; }
.ui-datepicker-buttonpane button[data-handler="today"] { color: var(--admin_color); opacity: 0.75; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close { color:#ff3019; }

/* mobile Responsive */
 @media screen and (max-width:480px) {
.ui-datepicker { width: 270px; max-width:100%; left: 50% !important; margin-left: -135px !important; }
}