.ui-datepicker {display:none; background-color: var(--color-white); border-radius:1.2rem; margin:0; padding:0; width:31.4rem; position: relative; box-shadow:0.1rem 0.1rem 2rem rgba(0,0,0,0.1); z-index:99999!important; padding:1.6rem;}
.ui-datepicker * {box-sizing: border-box; font-family: 'Pretendard', sans-serif!important;}

.ui-widget-header {border: 0px solid #dddddd; background: var(--color-white); width:100%;}
.ui-datepicker-calendar>thead>tr>th {font-size:13px!important;}
.ui-datepicker .ui-datepicker-header {position: relative; padding:0; width:100%;}
.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: 0px solid #c5c5c5; background-color: transparent; font-weight: normal; color: var(--color-gray-600); text-align: center; font-size:1.4rem;}
.ui-datepicker .ui-datepicker-title {margin: 0; text-align: center; padding:0.8rem 0px; font-size:1.8rem; color:var(--color-gray-700); font-weight:500; display:flex; justify-content: center; align-items: center; line-height:2.4rem;}
.ui-datepicker .ui-datepicker-title span {font-size:18px;}


.ui-widget.ui-widget-content {border: 1px solid var(--color-gray-200);}
#datepicker:focus>.ui-datepicker {display: block;}
.ui-datepicker-prev,
.ui-datepicker-next {cursor: pointer;}
.ui-state-disabled {cursor: auto; color: hsla(0, 0%, 80%, 1);}
.ui-datepicker-title {text-align: center; padding:1rem; font-weight: 100; font-size:1.4rem;}
.ui-datepicker-calendar {width: 100%;}
.ui-datepicker table {margin:0;}
.ui-datepicker-calendar>thead>tr>th {padding:1rem 0.5rem; font-size:1.4rem; color:var(--color-gray-600); font-weight:400;}
.ui-datepicker-calendar>thead>tr>th>span {display: block; font-size:1.4rem; color:var(--color-gray-600); font-weight:400;}
.ui-datepicker-calendar>tbody>tr>td>a {color: var(--color-gray-600); font-size:1.4rem!important; font-weight:400; text-decoration: none; width:100%!important; height:100%!important; margin: auto; padding:0; display:flex; justify-content: center; align-items: center; border-radius:100%; line-height:2rem;}
.ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {cursor: auto; background-color: var(--color-white);}
.ui-datepicker-calendar>tbody>tr>td { cursor: pointer; padding:0!important; font-weight: 100; text-align: center; font-size:1.4rem; width:4rem; height:4rem!important; }

.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: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {width:2.6rem!important; height:2.6rem!important; top:50%!important; transform: translateY(-50%); z-index:2;}
.ui-datepicker .ui-datepicker-prev {left:0!important;}
.ui-datepicker .ui-datepicker-next {right:0!important;}
.ui-widget-header .ui-icon {background-image: url('../img/common/btns.png'); width:2.6rem; height:2.6rem; top:0!important; margin:0!important; left:0!important; transition:all 0.2s; border-radius:5px;}
.ui-icon-circle-triangle-e {background-position: -2.6rem 0px; background-size:auto 2.6rem;}
.ui-icon-circle-triangle-w {background-position:0px 0px; background-size:auto 2.6rem;}

.ui-datepicker-calendar>tbody>tr>td:first-child a {color:var(--color-alert)!important;}
.ui-datepicker-calendar>tbody>tr>td:last-child a {color:var(--color-action)!important;}
.ui-datepicker-calendar>thead>tr>th:first-child {color:var(--color-alert)!important;}
.ui-datepicker-calendar>thead>tr>th:last-child {color:var(--color-action)!important;}
.ui-datepicker-calendar>tbody>tr>td>a.ui-state-active {color:var(--color-white)!important;}

.ui-datepicker-calendar>tbody>tr>td a { display: block; border-radius:0.5rem; background:none; font-size:1.6rem; color:var(--color-gray-600); letter-spacing:-0.025em; line-height:2rem; border-radius:100%; display:flex; align-items: center; justify-content: center; position: relative; background:none;}
.ui-datepicker-calendar>tbody>tr>td a::before {content:""; width:3.2rem; height:3.2rem; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); border-radius:100%; z-index:-1;}
.ui-datepicker-calendar>tbody>tr>td a.ui-state-highlight::before {background-color:var(--color-gray-200);}
.ui-datepicker-calendar>tbody>tr>td>a.ui-state-active {color:var(--color-white)!important;}
.ui-datepicker-calendar>tbody>tr>td a.ui-state-active::before {background-color:var(--color-action)!important;}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 0px; border-radius: 50%; line-height:18px;}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {width:auto; line-height:2.4rem; font-size:1.8rem; color:var(--color-gray-700); font-weight:500; cursor: pointer; background:none; border:0; -webkit-appearance:none; appearance:none;}
.ui-datepicker .ui-datepicker-title select {margin:0; height:2.4rem;}
.ui-datepicker .ui-datepicker-title select:focus {outline:none;}
.ui-datepicker .ui-datepicker-title select + select {margin-left:8px;}

.ui-datepicker select.ui-datepicker-month option, select.ui-datepicker-year option {font-size:1.5rem; color:var(--color-gray-700);}

@media (hover: hover) {
    .ui-datepicker .ui-widget-header .ui-icon {transition:all 0.2s;}
    .ui-widget-header .ui-icon:hover {background-color:var(--color-gray-200);}
}



.m_ui-datepicker {display:none; background-color: var(--color-white); border-radius:1.2rem; margin:0; padding:0; width:100%; max-height:calc(100% - 4rem); overflow-y: auto; padding:1.6rem 1.2rem; padding-top:0;}
.m_ui-datepicker .ui-widget-header {border: 0; background: var(--color-white); width:100%;}
.m_ui-datepicker .ui-datepicker-calendar>thead>tr>th {font-size:1.3rem!important;}
.m_ui-datepicker .ui-datepicker-header {position: relative; padding:2.4rem 0; width:100%;}
.m_ui-datepicker .ui-state-default, .m_ui-datepicker .ui-widget-content .ui-state-default, .m_ui-datepicker .ui-widget-header .ui-state-default, .m_ui-datepicker .ui-button, .m_ui-datepicker  .ui-button.ui-state-disabled:hover, .m_ui-datepicker  .ui-button.ui-state-disabled:active {border:0; background-color: transparent; font-weight: normal; color: var(--color-gray-600); text-align: center; font-size:1.6rem;}
.m_ui-datepicker .ui-datepicker-title {line-height:2.2rem; font-size:2rem; color:var(--color-gray-800); font-weight:500; margin:0; padding:0;}
.m_ui-datepicker .ui-datepicker-title span {font-size:17px;}
.m_ui-datepicker .ui-datepicker-title select + select {margin-left:0.8rem;}


.m_ui-datepicker::after {display:none;}

.m_ui-datepicker .ui-widget-content {border:0;}
.m_ui-datepicker .ui-widget-content::before {display:none;}
#datepicker:focus>.m_ui-datepicker {display: block;}
.m_ui-datepicker .ui-datepicker-prev,
.m_ui-datepicker .ui-datepicker-next {cursor: pointer;}
.m_ui-datepicker .ui-state-disabled {cursor: auto; color: hsla(0, 0%, 80%, 1);}
.m_ui-datepicker .ui-datepicker-calendar {width: 100%; border:0;}
.m_ui-datepicker .ui-datepicker-calendar>thead>tr>th {padding:1.2rem 0.6rem; font-size:2rem; font-weight: 400; width:14.28%!important; background-color: transparent;}
.m_ui-datepicker .ui-datepicker-calendar>thead>tr>th>span {font-size:1.6rem; color:var(--color-gray-800);}
.m_ui-datepicker .ui-datepicker-calendar>tbody>tr>td>a {color: var(--color-gray-800); font-size:1.5rem!important; font-weight:400; text-decoration: none; width:3.2rem!important; height:3.2rem!important; margin: auto; padding:0; display:flex; justify-content: center; align-items: center; border-radius:100%; line-height:3.2rem;}
.m_ui-datepicker .ui-datepicker-calendar>tbody>tr>.ui-state-disabled {opacity:0.3;}
.m_ui-datepicker .ui-datepicker-calendar>tbody>tr>.ui-state-disabled:hover {cursor: auto; background-color: var(--color-white);}
.m_ui-datepicker .ui-datepicker-calendar>tbody>tr>td { cursor: pointer; padding:0!important; font-weight: 100; text-align: center; font-size: 14px; height:48px!important; }

.m_ui-datepicker .ui-state-hover,
.m_ui-datepicker .ui-widget-content .ui-state-hover,
.m_ui-datepicker .ui-widget-header .ui-state-hover,
.m_ui-datepicker .ui-state-focus,
.m_ui-datepicker .ui-widget-content .ui-state-focus,
.m_ui-datepicker .ui-widget-header .ui-state-focus,
.m_ui-datepicker .ui-button:hover,
.m_ui-datepicker .ui-button:focus {border: 0px solid #cccccc; background-color: transparent; font-weight: normal; color: #2b2b2b;}
.m_ui-datepicker .ui-datepicker-prev, .m_ui-datepicker .ui-datepicker-next {width:2.6rem!important; height:2.6rem!important; top:50%!important; z-index:2;}
.m_ui-datepicker .ui-datepicker-prev {left:1.6rem!important;}
.m_ui-datepicker .ui-datepicker-next {right:1.6rem!important;}
.m_ui-datepicker .ui-widget-header .ui-icon {background-image: url('../img/common/btns.png'); width:2.6rem; height:2.6rem; top:0!important; margin:0!important; left:0!important;}

.m_ui-datepicker .ui-icon-circle-triangle-e {background-position: -2.6rem 0px; background-size:auto 2.6rem;}
.m_ui-datepicker .ui-icon-circle-triangle-w {background-position:0px 0px; background-size:auto 2.6rem;}

.m_ui-datepicker select.ui-datepicker-month, .m_ui-datepicker select.ui-datepicker-year, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {width:auto; line-height:2.2rem; font-size:2rem; font-weight:500; color:var(--color-gray-800); cursor: pointer; background:none;}


@media (hover: hover) {
    .ui-datepicker .ui-widget-header .ui-icon {transition:all 0.2s;}
    .ui-widget-header .ui-icon:hover {background-color:var(--color-gray-200);}
    .ui-icon-circle-triangle-e:hover {background-position: -2.6rem 0px!important;}
    .ui-icon-circle-triangle-w:hover {background-position:0px 0px!important;}
    .m_ui-datepicker .ui-icon-circle-triangle-e:hover {background-position: -2.6rem 0px!important;}
    .m_ui-datepicker .ui-icon-circle-triangle-w:hover {background-position:0px 0px!important;}
    
    .ui-datepicker-calendar>tbody>tr>td:hover a {color:var(--color-gray-400);}
    .ui-datepicker-calendar>tbody>tr>td:hover a::before {background-color:var(--color-gray-50);}

    .m_ui-datepicker .ui-datepicker-calendar>tbody>tr>td:hover { background-color: transparent; opacity: 0.6;}
}
@media screen and (max-width:600px) {
    .m_ui-datepicker {border:0!important; box-shadow:none;}
    .datepickerBg {width:100%; height:100%; background-color:rgba(0,0,0,0.3); position: fixed; top:0; left:0; z-index:10001; display:none;}
}
@media screen and (max-width:479px) {
    .m_ui-datepicker {border-radius:2.4rem 2.4rem 0 0; width:100%!important; padding-bottom:2.4rem;}
}