/* COLMN */
.calendar-col {width:100%!important;}
.calendar-col-1 {width:8.3%!important;}
.calendar-col-2 {width:16.6%!important;}
.calendar-col-3 {width:24.9%!important;}
.calendar-col-4 {width:33.2%!important;}
.calendar-col-5 {width:41.5%!important;}
.calendar-col-6 {width:49.8%!important;}
.calendar-col-7 {width:58.1%!important;}
.calendar-col-8 {width:66.4%!important;}
.calendar-col-9 {width:74.7%!important;}
.calendar-col-10 {width:83%!important;}
.calendar-col-11 {width:91.3%!important;}
.calendar-col-12 {width:100%!important;}

body.show-calendar {overflow-y:hidden;}
.calendar .ui-popup-body {margin-left: 20px; padding-right: 20px;}

.datepicker-calendar abbr {text-decoration:none;}
.datepicker-calendar {position:fixed; left:50%; top:50%; margin-left:-250px; margin-top:-135px; width:500px; border:1px solid #999; z-index:9000;}/* background-color:#fff;*/
.datepicker-calendar.after {position:absolute; left:0; top:2.5rem; margin-left:0; margin-top:0;}
.datepicker-month-wrap {position:relative; text-align:center; height:2rem;}
.datepicker-month-wrap.datepicker-flex {display:flex; display:-ms-flexbox; justify-content:start; align-items:center; padding-left: 13px;}
.datepicker-month-wrap.datepicker-flex .calendar-select-year-group + .calendar-select-month-group {margin-left:17px;}
.datepicker-month-fast-prev {position:absolute; left:0; top:0; width:2rem; height:2rem; border:1px solid #ccc; box-sizing:border-box;}
.datepicker-month-fast-next {position:absolute; right:2rem; top:0; width:2rem; height:2rem; border:1px solid #ccc; box-sizing:border-box;}
.datepicker-month-prev {position:absolute; left:2rem; top:0; width:2rem; height:2rem; border:1px solid #ccc; box-sizing:border-box;}
.datepicker-month-next {position:absolute; right:4rem; top:0; width:2rem; height:2rem; border:1px solid #ccc; box-sizing:border-box;}
.datepicker-month {height:2rem; line-height:2rem;}
.datepicker-grid {width:100%; border:0;}
.datepicker-grid thead th,
.datepicker-grid tbody td {position: relative; width:54px; padding: 8px 16px !important; font-weight: 400; text-align:center; border:none; box-sizing:border-box; }/*background-color: #fff;*/
.datepicker-grid thead th {height: 50px !important; padding-bottom: 18px !important;}
.datepicker-grid tbody td {height: 48px !important;}
.datepicker-grid tbody td:focus span {margin-top:-1px;}
.datepicker-grid tbody td span {position:relative; display:flex; display:-ms-flexbox; justify-content:center; align-items:center; height:30px; width:30px; margin:0 auto; border-radius:50%;}
/* .datepicker-grid tbody td.focus .day-txt {border:1px solid orangered; background-color:#eee; box-sizing:border-box;} */
.datepicker-grid tbody td.select-day.focus .day-txt {border:1px solid #4c80f1; background-color:#4c80f1;}
.datepicker-grid tbody td.select-day.focus:focus span {margin-top:0;}

.datepicker-grid tbody td.today .day-txt {color:#4c80f1;}  /* 오늘*/
.datepicker-grid tbody td.today.select-day .day-txt {color:#fff;}

.datepicker-grid tbody td.empty .day-txt,
.datepicker-grid tbody td.select-day .day-txt {color:#fff;}

.datepicker-grid tbody td.saturday.disabled,
.datepicker-grid tbody td.saturday.disabled-over {color:#3074f0;opacity: 0.3;}
.datepicker-grid tbody td.sunday.disabled,
.datepicker-grid tbody td.sunday.disabled-over {color:#ed281f;opacity: 0.3;}

/* .datepicker-grid tbody td.saturday {color:#555;}
.datepicker-grid tbody td.sunday {color:#555;} */
.datepicker-grid tbody td.disabled,
.datepicker-grid tbody td.disabled-over {color:#ccc;}
.datepicker-grid tbody th:nth-of-type(1),
.datepicker-grid tbody th:nth-of-type(2),
.datepicker-grid tbody th:nth-of-type(3),
.datepicker-grid tbody th:nth-of-type(4),
.datepicker-grid tbody th:nth-of-type(5),
.datepicker-grid tbody th:nth-of-type(6) {width:14.3%;}
.datepicker-grid tbody th:nth-of-type(7) {width:14.2%;}

.datepicker-grid tbody td.month {width:25%; padding-top:2px; padding-bottom:2px;}
.datepicker-grid .cur-month {background-color:orangered; color:#fff;}
.datepicker-grid tbody td.month.focus {border:1px solid orangered; background-color:#eee;}
.datepicker-grid tbody td.month.cur-month.focus {border:1px solid orangered; background-color:orangered;}

.datepicker-close {position:absolute; top:0; right:0; right:0; width:2rem; height:2rem;}
.datepicker-grid .select-day .day-txt {background-color:#4c80f1; color:#fff;}
.datepicker-calendar [role=gridcell],
.datepicker-calendar *[role=button] {cursor:pointer;}
.calendar-black-bg {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; opacity:0.5; filter:alpha(opacity=50); z-index:8000;}

@media screen and (min-width:320px) and (orientation:portrait) {
	.datepicker-calendar {width:300px; margin-left:-150px;}
}
@media screen and (min-width:360px) and (orientation:portrait) {
	.datepicker-calendar {width:350px; margin-left:-175px;}
}
@media screen and (min-width:411px) and (orientation:portrait) {
	.datepicker-calendar {width:350px; margin-left:-175px;}
}
@media screen and (min-width:768px) {
	.datepicker-calendar {width:500px; margin-left:-250px;}
}
@media screen and (min-width:568px) and (orientation:landscape) {
	.datepicker-calendar {width:400px; margin-left:-200px;}
}
@media screen and (min-width:640px) and (orientation:landscape) {
	.datepicker-calendar {width:400px; margin-left:-200px;}
}
@media screen and (min-width:731px) and (orientation:landscape) {
	.datepicker-calendar {width:400px; margin-left:-200px;}
}

/*********************
    CALENDAR GROUP 
*********************/
.calendar-group {display:flex; display:-ms-flexbox; align-items:center; -ms-flex-align:center;}
.calendar-group > .text-group {flex:1;}
.calendar-dash {display:flex; display:-ms-flexbox; justify-content:center; -ms-flex-pack:center; align-items:center; -ms-flex-align:center; padding:0 10px;}
.btn.ui-calendar {position:absolute; width:44px; height:44px; padding: 0; margin: 0; right:1px; top:0; border-radius: 0; background:url(../img/common/ui_btn_calendar.png) no-repeat center center;}
.btn.ui-calendar:hover {background-color: transparent;}
.combinate-group .ui-calendar {margin-bottom:0;}
input.ui-calendar[data-date] {background-color: #fff;}
.calendar-select-all-group .text-group + .btn-group {margin-top:16px;}

.datepicker-calendar.after {width:auto!important; border:1px solid #dbdbdb; } /*background-color:#fff; padding-top:16px; padding-bottom:5px; */
/* .datepicker-calendar.after .datepicker-grid thead .datepicker-day {height: 40px; padding: 8px 16px; font-weight: 400; background-color: #fff;} */
/* .datepicker-calendar.after .datepicker-grid thead .datepicker-day[aria-label="일요일"] {color:#ff0000;}
.datepicker-calendar.after .datepicker-grid thead .datepicker-day[aria-label="토요일"] {color:#0031ff;} */
/* .datepicker-calendar.after .datepicker-grid thead .datepicker-day:first-child {color: #ff0000;}
.datepicker-calendar.after .datepicker-grid thead .datepicker-day:last-child {color: #0031ff;} */
.datepicker-calendar.after .datepicker-grid tbody {margin-top:12px;}
/* .datepicker-calendar.after .datepicker-grid tbody td {position:relative; height:40px; padding: 8px 16px; text-align:center;}  */
.datepicker-calendar.after .datepicker-grid tbody td:first-child {border: 0;}
.datepicker-calendar.after .datepicker-grid tbody td > .day-txt {position: absolute; display:inline-block; top: 7px; left: 11px; width: 3.2rem; height: 3.2rem; border-radius:10px; font-size:16px; cursor:pointer;}
/* .datepicker-calendar.after .datepicker-grid td .day-txt {display:flex; display:-ms-flexbox; justify-content:center; -ms-flex-pack:center;} */
/* .datepicker-calendar.after .datepicker-grid tbody td.today .day-txt {background-color:transparent; border:transparent; color:#1682de; font-weight: 700;} */
.datepicker-calendar.after .datepicker-grid tbody td .today-txt {display: none; position:absolute; bottom: 0; left:50%; font-size:12px; transform:translateX(-50%); color:#1682de;}
/* .datepicker-calendar.after .datepicker-grid tbody td.select-day.focus .day-txt {background-color:#4c80f1; border:1px solid #4c80f1;} */
/* .datepicker-calendar.after .datepicker-grid tbody td.today.select-day.focus .day-txt {color:#fff;} */
.datepicker-calendar.after .datepicker-grid tbody td.today.disabled .day-txt {color:#ccc;}
.datepicker-calendar.after .datepicker-grid tbody td.today.disabled .today-txt {color:#ccc;}
.datepicker-calendar.after .datepicker-grid tbody td.select-day .today-txt {color:#fff;}
/* .datepicker-calendar.after .datepicker-grid tbody td.focus .day-txt {border:none; } 
.datepicker-calendar.after .datepicker-grid tbody td.from-day .day-txt {width:32px; height:32px; background-color:#4c80f1; border:transparent; color:#fff;}
*/
/*
.datepicker-calendar.after .datepicker-grid tbody td.from-day::before {content:""; position:absolute; display:block; left:50%; top: 7px; width:50%; height:32px; background-color:#e4ecfd; color:#000;}
.datepicker-calendar.after .datepicker-grid tbody td.middle-day::before {content:""; position:absolute; display:block; left: 0; top: 7px; width:100%; height:32px; background-color:#e4ecfd; color:#000;}
*/
.datepicker-calendar.after .datepicker-grid tbody td.middle-day .day-txt {border:transparent; color:#000;}
/*.datepicker-calendar.after .datepicker-grid tbody td.to-day::before {content:""; position:absolute; display:block; left:0; top: 7px; width:50%; height:32px; background-color:#e4ecfd; color:#000;}
.datepicker-calendar.after .datepicker-grid tbody td.to-day .day-txt {background-color:#4c80f1; border:transparent; color:#fff;} */
.datepicker-calendar.after .datepicker-grid tbody td.to-day .today-txt {color:#fff;}
.datepicker-calendar.after .datepicker-grid tbody td.from-day.focus .day-txt {background-color:#4c80f1; border:transparent; color:#fff;}
.datepicker-calendar.after .datepicker-grid tbody td.middle-day.focus .day-txt {background-color:#4c80f1; border:transparent; color:#fff;}
/* .datepicker-calendar.after .datepicker-grid tbody td.to-day.focus .day-txt {background-color:#4c80f1; border:transparent; color:#fff;} */

.datepicker-calendar.after .datepicker-grid .empty {text-align:center; vertical-align:middle;}
.datepicker-calendar.after .datepicker-grid .empty .day-txt {display:inline-flex; justify-content:center; align-items:center; color:#ccc;}
.datepicker-calendar.after .datepicker-month-wrap.datepicker-flex .datepicker-month-fast-prev,
.datepicker-calendar.after .datepicker-month-wrap.datepicker-flex .datepicker-month-fast-next,
.datepicker-calendar.after .datepicker-month-wrap.datepicker-flex .datepicker-month-prev,
.datepicker-calendar.after .datepicker-month-wrap.datepicker-flex .datepicker-month-next {position:relative; width:auto; right:0; left:0; border: 0;}
.datepicker-calendar.after .datepicker-month-wrap.datepicker-flex .datepicker-month {padding-right:0;}
.datepicker-calendar.after .datepicker-month-wrap .datepicker-today {position:absolute; right:4px; top:0; width:58px; height:32px; font-size: 14px; border:1px solid #dbdbdb; border-radius:3px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1); cursor:pointer;}
.datepicker-calendar.after .datepicker-year {font-size:17px; font-weight: 700; margin:0 .4rem;}
.datepicker-calendar.after .datepicker-month {font-size:17px; font-weight: 700; margin:0 .4rem;}
.datepicker-calendar.after .datepicker-year + button + button {margin-left:8px;}
.datepicker-calendar.after .datepicker-month-fast-prev .glyphicon {display:inline-block; width:27px; height:22px; background:url(../img/common/ui_btn_cal_prev.png) no-repeat center center;}
.datepicker-calendar.after .datepicker-month-fast-next .glyphicon {display:inline-block; width:27px; height:22px; background:url(../img/common/ui_btn_cal_next.png) no-repeat center center;}
.datepicker-calendar.after .datepicker-month-prev .glyphicon {display:inline-block; width:27px; height:22px; background:url(../img/common/ui_btn_cal_prev.png) no-repeat center center;}
.datepicker-calendar.after .datepicker-month-next .glyphicon {display:inline-block; width:27px; height:22px; background:url(../img/common/ui_btn_cal_next.png) no-repeat center center;}
.datepicker-calendar.after .datepicker-month-fast-prev.disabled .glyphicon,
.datepicker-calendar.after .datepicker-month-fast-next.disabled .glyphicon,
.datepicker-calendar.after .datepicker-month-prev.disabled .glyphicon,
.datepicker-calendar.after .datepicker-month-next.disabled .glyphicon {opacity:0.1;}

/* .calendar-select-year-group {width:118px; height: 32px;} */
.calendar-select-year-group select.calendar-year-select,
.calendar-select-month-group select.calendar-month-select {height: 32px; padding:0 30px 0 8px; border: 0; font-size:20px; color:#000; font-weight: 700;}
.calendar-select-year-group select.calendar-year-select {width:112px;}
.calendar-select-month-group select.calendar-month-select {width: 85px;}

.datepicker-calendar {width:300px;}
/* .datepicker-grid tbody td {padding:1px 0;} */
.datepicker-month {padding-right:28px;}
.datepicker-month-wrap .pull-left,
.datepicker-month-wrap .pull-right {display:flex; display:-ms-flexbox; justify-content:center; align-items:center; border-radius:3px; background-color:#fff; cursor:pointer;}
/* .datepicker-grid tbody td.select-day.focus .day-txt {background-color:#0085c7; border:1px solid #0085c7;} */
/* .datepicker-grid tbody td.focus .day-txt {border:1px solid #0085c7;}
.datepicker-grid .select-day .day-txt {background-color:#0085c7;} */
.datepicker-close {top:10px; right:8px;}
.datepicker-month-wrap + .datepicker-grid {margin-top:12px;}


/* 이체 - 조회기간 캘린더 */
.calendar-fromto-group {display:flex; display:-ms-flexbox;}
.calendar-fromto-group > * {width: 50%;}
.calendar-fromto-group .from-cal + .to-cal {margin-left:36px;}
.calendar-fromto-group h5 {padding: 0 0 6px 20px; font-size: 16px; line-height: 1;}
.calendar-fromto-group .datepicker-calendar.after {border: 0;}
.calendar-select-group {display:flex; display:-ms-flexbox; align-items:center; -ms-flex-align:center;}
.calendar-fromto-group + .calendar-select-group {margin-bottom: 24px;}
.calendar-select-group .title {width:140px; padding-left: 10px; font-weight:700;}
.calendar-select-group .etc-text {margin-left: 24px; font-weight:700;}
.calendar-group .title {width:140px; padding-left: 10px; font-weight:700;}
.calendar-group .title + .text-group {width: 244px; flex: inherit;}
.calendar-group .title + .text-group input.ui-calendar {margin-bottom: 0;}
.calendar-group .title ~ .title {margin-left: 32px;}
.calendar-group .title ~ .title::before {content: '~'; display: inline-block; position: relative; left: -20px;}

/* 이체일지정 */
.reserv-group {position: relative;}
.reserv-group .reserv-day {display: inline-block; position: absolute; left: calc(50% - 50px); top: 0; margin-left: 6px; vertical-align: text-top;}
.reserv-group .calendar-view-group {margin-bottom: 40px;}
.reserv-group .calendar-view-group .datepicker-calendar {padding: 32px 16px 16px;}
.reserv-group .check-group + .calendar-view-group, .reserv-group .reserv-day ~ .calendar-view-group {margin-top: 16px;}
.reserv-group .datepicker-calendar.after {width: 428px !important; margin: 0 auto;}
.reserv-group .reserv-time-area {display: flex; margin-bottom: 28px;}
.reserv-group .reserv-time {width: 120px; margin-right: 10px; color: #000; font-size: 15px; line-height: 20px; font-weight: 700;}
.reserv-group .check-group .chk-list {letter-spacing: 0;}
.reserv-group + .btn-group {margin-top: 36px !important;}