@charset "UTF-8";

/* datepicker만 따로 분리 */
.datepicker-container:before, .datepicker-container:after {display:none;}
.datepicker-dropdown {box-sizing: border-box;}
.datepicker-container {width:100%;max-width:343px;padding:24px 7px 16px;border:1px solid #E6E8EB;border-radius:4px;}
.datepicker-panel > ul {width:100%;}
.datepicker-panel > ul:not([data-view]) {display:flex;justify-content:space-between;align-items:center;}
.datepicker-panel > ul:not([data-view]) li[data-view*="current"] {margin:5px auto;font-size:20px;font-weight:700;}
.datepicker-panel > ul:not([data-view]) li[data-view*="current"]:hover {background-color:rgba(54, 182, 176, 0.3)}
.datepicker-panel > ul:not([data-view]) li[data-view*="prev"] {background-image:url('https://static.sparkplus.co/hompage/common/icon/icon_prev.svg');background-position:center;background-repeat:no-repeat;overflow:hidden;}
.datepicker-panel > ul:not([data-view]) li[data-view*="next"] {background-image:url('https://static.sparkplus.co/hompage/common/icon/icon_next.svg');background-position:center;background-repeat:no-repeat;overflow:hidden;}
.datepicker-panel > ul:not([data-view]) li[data-view*="years"].disabled,
.datepicker-panel > ul:not([data-view]) li[data-view*="years"].disabled:hover {color:#000;background-color:transparent}
.datepicker-panel > ul[data-view=days] {display:flex;flex-wrap:wrap;justify-content:center;width:100%;}
.datepicker-panel > ul[data-view="week"] {margin-bottom:10px;}
.datepicker-panel > ul > li {display:flex;align-items:center;justify-content:center;flex:0 0 auto;flex-wrap:wrap;width:36px;height:36px;font-size:16px;line-height:24px;margin:5px;}
.datepicker-panel > ul > li.highlighted {background-color:transparent;}
.datepicker-panel > ul[data-view=months] > li, 
.datepicker-panel > ul[data-view=years] > li {width:calc(25% - 10px);}
.datepicker-panel > ul > li[data-view="month disabled"].disabled.highlighted,
.datepicker-panel > ul > li[data-view="month disabled"].disabled:hover.highlighted {color:#000;background-color: transparent;}
.datepicker-panel > ul > li[data-view="month disabled"].disabled:hover,
.datepicker-panel > ul[data-view=day] > li.disabled:hover,
.datepicker-panel > ul[data-view=days] > li.disabled:hover {color:#D1D5D9; background-color: transparent;}
.datepicker-panel > ul[data-view=days] > li.picked,
.datepicker-panel > ul[data-view=days] > li:hover {border-radius: 50%;}
.datepicker-panel > ul > li.disabled {color:#D1D5D9;}
.datepicker-panel > ul > li.picked,
.datepicker-panel > ul[data-view=years] > li.picked:hover,
.datepicker-panel > ul[data-view=months] > li.picked:hover,
.datepicker-panel > ul[data-view=days] > li.picked:hover,
.datepicker-panel > ul > li.disabled:hover.highlighted {color:#FFF;background-color: var(--theme-primary-color);}
.datepicker-panel > ul > li[data-view=year]:hover,
.datepicker-panel > ul:not([data-view]) li[data-view*="prev"]:hover,
.datepicker-panel > ul:not([data-view]) li[data-view*="next"]:hover,
.datepicker-panel > ul > li[data-view=month]:hover,
.datepicker-panel > ul[data-view=day] > li:hover,
.datepicker-panel > ul[data-view=days] > li:hover {color:#000;background-color:rgba(54, 182, 176, 0.3)}

@media screen and (max-width: 359px) {
    .datepicker-container {width: 100%;max-width:calc(100% - 32px);padding:12px 7px 8px;}
    .datepicker-panel > ul > li {width:33px;height:33px;line-height:initial;margin:0;}
    .datepicker-panel > ul[data-view=months] > li,
    .datepicker-panel > ul[data-view=years] > li {width:25%;}
}