@charset "utf-8";

/* 달력 */
.ui-widget.ui-widget-content { padding: 0; border: 0; width: 100%; }
.ui-datepicker .ui-datepicker-header { padding: 0; line-height: 50px; }
.ui-widget-header { border: 0; background: #fff; font-size: 18px; font-weight: 700; }
.ui-datepicker .ui-datepicker-prev { top: 1px; left: 15px; width: 30px; height: 50px; }
.ui-datepicker .ui-datepicker-next { top: 1px; right: 15px; width: 30px; height: 50px; }
.ui-widget-header .ui-icon { background: none; }
.ui-icon, .ui-widget-content .ui-icon { background: none; }
.ui-datepicker .ui-datepicker-title { line-height: 50px; }
.ui-datepicker .ui-datepicker-next > span { top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: url(/static/images/ico/next02.svg) no-repeat center/contain; }
.ui-datepicker .ui-datepicker-prev > span { top: 0; left: 0; margin: 0; width: 100%; height: 100%; background: url(/static/images/ico/prev02.svg) no-repeat center/contain; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, 
.ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus,
.ui-button:hover, .ui-button:focus { border:  0; background: none; }
.ui-widget-header a { cursor: pointer; }
/*.ui-datepicker .ui-datepicker-next-hover { right: 2px; } 
.ui-datepicker .ui-datepicker-prev-hover { left: 2px; } */
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 0.5; }
.ui-datepicker thead th { padding: 1.7% 0; height: auto; font-size: 16px; font-weight: 700; }
.ui-datepicker td { padding: 0; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, 
.ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { border: 0; background: #fff; font-size: 13px; font-weight: 500; }
.ui-datepicker td span, .ui-datepicker td a { padding: 25% 0; height: auto; text-align: center; }
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { color: var(--default-font-color); font-weight: 500; font-size: 13px; }
.ui-datepicker-calendar > tbody td.ui-datepicker-week-end:first-child a { color: #FF3400; }
.ui-datepicker-week-end:first-child > span { color: #FF3400; }
#datepicker tbody > tr > td a.ui-state-active { position: relative; z-index: 2; color: #fff; }
#datepicker tbody > tr > td a.ui-state-active::after { position: absolute; top: 50%; left: 50%; z-index: -1; transform: translate(-50%, -50%); width: 100%; height: 100%; background: var(--main); display: block; content: ""; }
#datepicker.off tbody > tr > td a.ui-state-active::after { display: none; }
#datepicker.off tbody > tr > td a.ui-state-active { color: var(--default-font-color); }
#datepicker { margin-top: 10px; }
/*
.hasData > a { background: url(/static/images/ico/ico_bar.png) no-repeat center 90% !important; }
*/
.hasData > a { background-color: #65b1f529 !important; }

@media all and (max-width:400px) {
    .ui-widget-header { font-size: 16px; }
    .ui-datepicker .ui-datepicker-prev { width: 26px; left: 9px; }
    .ui-datepicker .ui-datepicker-next { width: 26px; right: 9px; }
    .ui-datepicker thead th { font-size: 14px; }
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, 
    .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active { font-size: 12px; }
    #datepicker tbody > tr > td a.ui-state-active::after { width: 100%; height: 100%; }
    .ui-datepicker td span, .ui-datepicker td a { padding: 21% 0; }
}