/* 날짜 선택 */
.datepicker {overflow:hidden; display:inline-block; vertical-align:middle; font-size:12px;}
.datepicker > span.err input {border-color:#ff0000;}
.datepicker > span {display:block; position:relative; float:left;}
.datepicker > span + span:before {content:"-"; display:block; float:left; width:20px; text-align:center; line-height:36px;}
.datepicker > span input {display:block; width:134px; height:36px; margin:0; padding:0 34px 0 10px; border:1px solid #ccc; border-radius:4px;}
.datepicker > span input[readonly] {color:#333; background-color:#f4f4f4;}
.datepicker > span input[disabled] {color:#999; background-color:#f4f4f4;}
.datepicker > span .ui-datepicker-trigger {overflow:hidden; display:block; position:absolute; right:1px; top:1px; width:34px; height:34px; margin:0; padding:0; font-size:1px; line-height:1px; text-indent:-9999px; background:url('../img/common/btn/ico-calendar.png') no-repeat 0 0;}
.datepicker .txt {vertical-align:middle;}
.datepicker.readonly span .ui-datepicker-trigger {cursor:default;}
.datepicker.disabled span .ui-datepicker-trigger {cursor:default; opacity:0.5;}

/* 기간 설정 */
.date-period {overflow:hidden;}
.date-period .date {display:inline-block; position:relative; vertical-align:middle;}
.date-period .date + .date:before {content:"~"; display:inline-block; margin:0 6px; line-height:36px;}
.date-period .date > span {display:inline-block; margin:0 10px 0 4px; line-height:36px; vertical-align:middle;}
.date-period .date > span:last-child {margin-right:0;}

.date-period .period {display:inline-block; margin:0 0 0 11px; vertical-align:middle; border-radius:4px;}
.date-period .period .button {display:block; float:left; width:70px; height:36px; line-height:34px; margin:0 0 0 -1px; padding:0; border:0; color:#111; border-radius:0; border:1px solid #ccc; background-color:#fff;}
.date-period .period .button.on {position:relative; z-index:2; color:#fff; border-color:#3a3b4a; background-color:#3a3b4a;}
.date-period .period .button:first-child {border-radius:4px 0 0 4px;}
.date-period .period .button:last-child {border-radius:0 4px 4px 0;}

/* datepicker */
.ui-widget {font-family:'Noto Sans KR', 'Roboto', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', sans-serif;}
.ui-datepicker {min-width:264px; padding:0 !important; box-shadow:20px 20px 20px 0 rgba(0,0,0,0.1);}
#ui-datepicker-div {z-index:2002 !important;}
.ui-widget-content {color:#111;}
.ui-datepicker.ui-widget.ui-widget-content {overflow:hidden; border-color:#3a3b4a; border-radius:5px;}
.ui-datepicker .ui-datepicker-header {height:40px; margin:0; padding:0 !important; border:0;color:#fff; font-weight:400; border-radius:0; background-color:#3a3b4a;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {position:absolute; top:50%; width:24px; height:24px; margin:-12px 0 0 0; cursor:pointer;}
.ui-datepicker .ui-datepicker-prev {left:10px;}
.ui-datepicker .ui-datepicker-next {right:10px;}
.ui-datepicker .ui-datepicker-prev-hover {border:0; background-color:#44465c;}
.ui-datepicker .ui-datepicker-next-hover {border:0; background-color:#44465c;}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {left:0; top:0; margin-left:0; margin-top:0;}
.ui-datepicker .ui-datepicker-prev .ui-icon-circle-triangle-w {width:24px; height:24px; background:url('../img/common/btn/btn-prev-month.png') no-repeat 0 0;}
.ui-datepicker .ui-datepicker-next .ui-icon-circle-triangle-e {width:24px; height:24px; background:url('../img/common/btn/btn-next-month.png') no-repeat 0 0;}
.ui-datepicker .ui-datepicker-title {margin:0; padding:0 38px; line-height:39px;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-year {margin-right:2px;}
.ui-datepicker .ui-datepicker-title .ui-datepicker-month {margin-left:10px;}
.ui-datepicker table {font-size:0.8em;}
.ui-datepicker table.ui-datepicker-calendar {margin:0; padding:3px 9px 0; border-collapse:separate; border-spacing:0;}
.ui-datepicker table.ui-datepicker-calendar thead th {height:32px;}
.ui-datepicker table.ui-datepicker-calendar thead th:first-child,
.ui-datepicker table.ui-datepicker-calendar td:first-child a {color:#d7021b}
.ui-datepicker table.ui-datepicker-calendar thead th:last-child,
.ui-datepicker table.ui-datepicker-calendar td:last-child a {color:#257ed1}
.ui-datepicker table.ui-datepicker-calendar th,
.ui-datepicker table.ui-datepicker-calendar td {margin:0; padding:0; text-align:center;}
.ui-datepicker table.ui-datepicker-calendar td {height:26px; font-family:'Roboto', sans-serif;}
.ui-datepicker table.ui-datepicker-calendar td a {display:block; width:100%; height:24px; margin:0; padding:0; line-height:24px; text-align:center; color:#111; border-radius:0;}
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-default {border:0; background:#fff; line-height:25px;}
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-default.ui-state-hover {color:#fff; max-width:24px; height:24px; line-height:24px; margin:0 auto; border:0; border-radius:10px; background-color:#0369d1;}
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-default.ui-state-active {color:#fff; max-width:24px; height:24px; line-height:24px; margin:0 auto; border:0; border-radius:10px; background-color:#0369d1;}
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a {max-width:24px; height:24px; line-height:22px; margin:0 auto; color:#111; border:1px solid #0369d1; border-radius:10px; background-color:#fff;}
.ui-datepicker table.ui-datepicker-calendar td.ui-datepicker-today a.ui-state-highlight {max-width:24px; height:24px; line-height:22px; margin:0 auto; border-radius:10px;}
.ui-datepicker table.ui-datepicker-calendar td a.ui-state-highlight.ui-state-active {color:#fff; background-color:#0369d1; border:0; line-height:27px;}
.ui-datepicker table.ui-datepicker-calendar td.ui-state-disabled,
.ui-datepicker table.ui-datepicker-calendar td.ui-widget-content .ui-state-disabled,
.ui-datepicker table.ui-datepicker-calendar td.ui-widget-header .ui-state-disabled {opacity:0.5; /* filter:Alpha(Opacity=50); support:IE8  */background-image:none;}
.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:none;}
.ui-datepicker table.ui-datepicker-calendar td:first-child span {color:#dc320a;}
.ui-datepicker table.ui-datepicker-calendar td:last-child span {color:#257ed1;}
.ui-datepicker td span, .ui-datepicker td a {text-align:center;}
.ui-datepicker .ui-datepicker-buttonpane {overflow:hidden; position:relative; width:calc(100% - 34px); margin:7px auto 14px; padding:8px 5px 0 0; border:0; border-top:1px solid #e5ebf2; ;}
.ui-datepicker .ui-datepicker-buttonpane button {position:static; width:auto; height:auto; margin:0; padding:0; border:0; font-size:1em; color:#333; font-weight:400; border-radius:0; background-color:transparent;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {display:block; position:relative; float:left; width:40px; height:20px; margin:0; padding:0; background-color:transparent; border:1px solid #ccc; border-radius:10px; color:#666; font-size:0.8em; line-height:18px;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:focus {outline:1px solid #000;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current.ui-state-hover {background-color:transparent;}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {display:inline-block; position:relative; top:2px; width:20px; height:20px; font-size:0; line-height:0; text-indent:-999px; background:url('../img/common/btn/btn-close-datepicker.png') no-repeat center;}
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary {opacity:1;}
.ui-datepicker .ui-datepicker-title select {
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis; width:auto; height:36px; margin:0; padding:0 29px 0 10px; line-height:36px; color:#fff; font-size:0.933em; vertical-align:middle; border-radius:0; border:0; background:url('../img/common/btn/bg-select-arr-datepicker.png') no-repeat right center;
    -webkit-appearance:none;
    -moz-appearance:none;
}
.ui-datepicker .ui-datepicker-title select option {color:#fff; background-color:#3a3b4a;}
.ui-datepicker-current, .onlyMonth .ui-datepicker-calendar {display:none;}

/* monthpicker */
.monthpicker {overflow:hidden; display:inline-block; vertical-align:middle;}
.monthpicker > span.err input {border-color:#ff0000;}
.monthpicker > span {display:block; position:relative; float:left;}
.monthpicker > span + span:before {content:"-"; display:block; float:left; width:20px; text-align:center; line-height:36px;}
.monthpicker > span input {display:block; width:134px; height:36px; margin:0; padding:0 34px 0 10px; border:1px solid #ccc; border-radius:4px;}
.monthpicker > span input[readonly] {color:#333; background-color:#f4f4f4;}
.monthpicker > span input[disabled] {color:#999; background-color:#f4f4f4;}
.monthpicker > span .btn-month {overflow:hidden; display:block; position:absolute; right:1px; top:1px; width:34px; height:34px; margin:0; padding:0; font-size:1px; line-height:1px; text-indent:-9999px; background:url('../img/common/btn/ico-calendar.png') no-repeat 0 0;}
.monthpicker .txt {vertical-align:middle;}
.monthpicker.readonly span .btn-month {cursor:default;}
.monthpicker.disabled span .btn-month {cursor:default; opacity:0.5;}
.month-picker .month-picker-previous .ui-button,
.month-picker .month-picker-next .ui-button {width:24px; height:24px; padding:0; margin:0; cursor:pointer;}
.month-picker .month-picker-previous .ui-button:hover,
.month-picker .month-picker-next .ui-button:hover {border:none; background-color:#44465c;} 
.month-picker .month-picker-previous .ui-button {background:url('../img/common/btn/btn-prev-month.png') no-repeat 0 0;}
.month-picker .month-picker-next .ui-button {background:url('../img/common/btn/btn-next-month.png') no-repeat 0 0;}
.month-picker.ui-widget.ui-widget-content {width:204px; border:1px solid #3a3b4a; border-radius:4px;   box-shadow: 20px 20px 20px 0 rgba(0, 0, 0, 0.1); background-color:#fff; z-index:2002 !important;}
.month-picker-header {width:100%; padding:8px 12px; border:none; border-radius:0px; background-color:#3a3b4a;}
.month-picker-header .month-picker-title {text-align:center;}
.month-picker-header .month-picker-title .ui-button {padding:0; margin:0; color:#fff; font-size:0.933em; vertical-align:initial;}
.month-picker-header .month-picker-title .ui-button:hover {border:none; background-color:transparent;}
.month-picker > div:last-child {padding:10px 15px;}
.month-picker .month-picker-month-table td { text-align:center;}
.month-picker .month-picker-month-table td:nth-child(3n) > .ui-button {margin-right:0;}
.month-picker .month-picker-month-table tr:nth-child(4) > td > .ui-button {margin-bottom:0;}
.month-picker .month-picker-month-table .ui-button {width:53px; margin:0 6px 6px 0; padding:3px 0; color:#111; font-size:0.8em; vertical-align:initial; border:1px solid #f1f1f1; border-radius:4px;}
.month-picker .month-picker-month-table .ui-button:hover,
.month-picker .month-picker-month-table .ui-button.ui-state-active {border:none; color:#fff; background-color:#0369d1;}
.month-picker .month-picker-month-table .ui-button.ui-state-highlight {border:none; outline:1px solid #0369d1; background-color:#fff; color:#111;}