/* 해당 #3f51b5 색상코드 변경 시 디자인 일괄적용 */
/* datepicker Style */
.ui-datepicker {
    width: 270px !important;
    padding: 0;
    display: none;
    border: 0;
    margin-top: 10px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.ui-widget.ui-widget-content {
    padding: 0;
    border: 0;
    border-radius: 3px;
    overflow: hidden;
    background: #fff;
}

.ui-datepicker .ui-widget-header {
    position: relative;
    padding: 6px 0 36px 0 !important;
    border: 0;
    background: #003967;
    color: #fff;
    border-radius: 0;
    font-family: 'Pretendard', 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'sans-serif';
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
    width: 70px;
    height: 26px;
    line-height: 26px;
    background: rgba(0,0,0,0.15) url('/images/arrow-button.png') 100% -27px no-repeat;
    margin: 0 4px;
    padding: 0 6px;
    border: 0;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* 화살표 없애기 */
    font-family: 'Pretendard', 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'sans-serif';
}

.ui-datepicker select.ui-datepicker-month:hover, .ui-datepicker select.ui-datepicker-year:hover {
    background: rgba(0,0,0,0.3) url('/images/arrow-button.png') 100% -27px no-repeat;
}

.ui-datepicker select::-ms-expand {
    display: none;
    /* 화살표 없애기 for IE10, 11*/
}

.ui-datepicker .ui-datepicker-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    line-height: 2em;
    text-align: center;
    margin: 0px 2.3em;
    font-size: 14px;
    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 auto;
}

.ui-datepicker-calendar thead tr {
    position: absolute;
    top: -24px;
    left: 5px;
    right: 5px;
}

.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 .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    position: absolute !important;
    top: 3px !important;
    width: 33px !important;
    height: 33px !important;
    text-indent: -9999px;
    cursor: pointer
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-prev-hover {
    left: 0 !important;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover {
    background: rgba(0,0,0,0.1);
    border: 0;
}

.ui-datepicker .ui-datepicker-prev .ui-icon {
    background: url('/images/arrow-button.png') 0 0 no-repeat;
}

.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-next-hover {
    right: 0 !important;
}

.ui-datepicker .ui-datepicker-next.ui-state-hover {
    background: rgba(0,0,0,0.1);
    border: 0;
}

.ui-datepicker .ui-datepicker-next .ui-icon {
    background: url('/images/arrow-button.png') -16px 0 no-repeat;
}

.ui-datepicker .ui-state-default {
    display: block;
    border: 0 !important;
    border-radius: 15px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin: 4px auto;
    font-size: 12px;
    text-align: center;
    background: #fff !important;
    font-weight: normal !important;
    color: #333 !important;
    box-sizing: border-box;
    font-family: 'Pretendard', 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'sans-serif';
}

.ui-datepicker .ui-state-default.ui-state-hover {
}

.ui-datepicker-today .ui-state-default {
    color: #003967 !important;
    font-weight: bold !important;
}

.ui-datepicker-current-day .ui-state-default {
    background: #003967 !important;
    color: #fff !important;
}

.ui-datepicker-buttonpane {
    overflow: hidden;
    border-top: 1px solid #eee;
    margin-top: 1rem !important;
}

.ui-datepicker-buttonpane button[data-handler="today"] {
    color: #003967 !important;
    opacity: 0.75;
    font-weight: 600 !important;
}

.ui-datepicker-buttonpane button[data-handler="hide"] {
}

/* ie add Style */
.ui-datepicker td, .ui-datepicker th {
    border: 0
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: right;
    cursor: pointer;
    width: auto;
    margin: 0.5em 0.2em 0.4em;
    padding: 0.2em 0.6em 0.3em;
    overflow: visible;
    line-height: 1;
}

.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
    float: left;
    color: #003967 !important;
    font-weight: 600 !important
}

.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;
}

.ui-timepicker-oneLine {
    margin: 10px 0;
    padding: 0;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
    padding-top: 4px;
}

.ui-timepicker-div.ui-timepicker-oneLine {
    padding-right: 10px;
}

.ui-timepicker-oneLine .ui_tpicker_time_label {
    padding: 4px 0 0 16px;
    font-size: 14px;
}

.ui-timepicker-oneLine .ui-timepicker-select {
    width: 50px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    border: 1px solid #eee;
    background: #f7f7f7 url("../../images/default/icon/icon_select.svg") no-repeat right 0.15rem center;
    background-size: 15px 15px;
    margin: 0;
    border-radius: 3px;
    padding: 0 20px 0 5px;
    text-align: left;
}

.ui-timepicker-div {
    margin-top: 1rem;
    padding: 0 15px;
    font-family: 'Pretendard', 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'sans-serif';
}

.ui-timepicker-div dl {
    text-align: left;
}

.ui-timepicker-div dl dt {
    float: left;
    clear: left;
    padding: 0 !important
}

.ui-timepicker-div dl dd {
    margin: 0 0 10px 40% !important;
}

.ui-timepicker-div td {
    font-size: 90%;
}

.ui-tpicker-grid-label {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
}

.ui-timepicker-div .ui-timepicker-select {
    width: 100%;
    padding: 0 15px;
    font-family: 'Pretendard', 'Noto Sans KR', '나눔고딕', 'Nanum Gothic', 'sans-serif';
}

.ui-timepicker-div .ui_tpicker_hour_label, .ui-timepicker-div .ui_tpicker_minute_label {
    line-height: 1;
}

.ui-timepicker-div .ui_tpicker_minute_slider, .ui-timepicker-div .ui_tpicker_hour_slider {
    background: #f4f4f4 !important;
}

.ui-timepicker-div .ui-slider-handle {
    background: #003967 !important;
    border-radius: 0 !important;
}

.ui-timepicker-rtl {
    direction: rtl;
}

.ui-timepicker-rtl dl {
    text-align: right;
    padding: 0 5px 0 0;
}

.ui-timepicker-rtl dl dt {
    float: right;
    clear: right;
}

.ui-timepicker-rtl dl dd {
    margin: 0 40% 10px 10px;
}
