@charset "utf-8";
/** 기간 달력 기본 레이아웃 **/
.calendar_pop_div.period {
display: flex;
flex-wrap: wrap;
border-radius: 5px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 5px;
width: 500px;
}
.calendar_pop_div.period:has(.hcCalendar.month) {
width: 400px;
}
/** 일반 달력 기본 레이아웃 **/
.calendar_pop_div:not(.period) .hcCalendar {
border-radius: 5px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.25) 0 0 8px 5px;
}
/** 초기 DIV 설정 **/
.calendar_pop_div .hcCalendar {
width: 250px;
font-size: 11px;
line-height: initial;
}
.calendar_pop_div.period .hcCalendar.month {
width: 200px;
}
.calendar_pop_div .hc_control_bar {
height: 30px;
padding: 5px 0;
position: relative;
display: flex;
justify-content: center;
flex-direction: row;
align-items: center;
}
/** 초기 BUTTON 설정 **/
.calendar_pop_div button {
border: none;
border-radius: 5px;
padding: 0;
background-color: unset;
cursor: pointer;
}
/** 초기 STRONG 설정 **/
.calendar_pop_div strong {
color: black;
}
/** 초기 INPUT 설정 **/
.calendar_pop_div input {
height: 25px;
margin: 0 5px;
border: 1px #A8A8A8 solid;
border-radius: 5px;
box-sizing: border-box;
color: #333333;
font-size: 14px;
text-align: center;
}
/** 초기 TABLE 설정 **/
.calendar_pop_div table {
width: calc(100% - 20px);
margin: auto;
user-select: none;
border-collapse: collapse;
}
/** 초기 COL 설정 **/
.hcCalendar table colgroup col {
width: calc(100% / 7);
}
.hcCalendar.month table colgroup col {
width: calc(100% / 3);
}
/** 초기 TD 설정 **/
.calendar_pop_div table td {
height: 25px;
box-sizing: border-box;
border-radius: 15px;
text-align: center;
font-size: 11px;
font-weight: bold;
}
/************************************** 상단 레이아웃 시작 **************************************/
/*달력 이름 */
.calendar_name {
position: absolute;
left: 10px;
}
/* 년도 input 박스*/
.calendar_pop_div .hc_control_bar input.year {
width: 50px;
}
/* 월 input 박스*/
.calendar_pop_div .hc_control_bar input.month {
width: 30px;
}
/* 버튼*/
.calendar_pop_div .hc_control_bar button {
background-repeat: no-repeat;
background-position: center left;
background-size: contain;
width: 20px;
height: 20px;
}
/* [일]셀렉트박스 이전년도 버튼*/
.calendar_pop_div .hc_control_bar button.sy_prev {
background-image: url('data:image/svg+xml;utf8,');
left: 10px;
}
/* [일]셀렉트박스 이전월 버튼*/
.calendar_pop_div .hc_control_bar button.sm_prev {
background-image: url('data:image/svg+xml;utf8,');
left: 25px;
}
/* [일]셀렉트박스 다음월 버튼*/
.calendar_pop_div .hc_control_bar button.sm_next {
background-image: url('data:image/svg+xml;utf8,');
right: 25px;
}
/* [일]셀렉트박스 다음년도 버튼*/
.calendar_pop_div .hc_control_bar button.sy_next {
background-image: url('data:image/svg+xml;utf8,');
right: 11px;
}
/* [월]셀렉트박스 이전년도 버튼*/
.calendar_pop_div .hcCalendar.month .hc_control_bar button.sy_prev {
background-image: url('data:image/svg+xml;utf8,');
left: 10px;
}
/* [월]셀렉트박스 다음년도 버튼*/
.calendar_pop_div .hcCalendar.month .hc_control_bar button.sy_next {
background-image: url('data:image/svg+xml;utf8,');
right: 11px;
}
/************************************** 상단 레이아웃 끝 **************************************/
/************************************** 중단 달력 출력 시작 **************************************/
/* 달력 데이터 마우스 오버 */
.calendar_pop_div td.mouseOver {
text-decoration: underline;
font-weight: bold;
cursor: pointer;
}
/* 달력 데이터 일요일 */
.calendar_pop_div td.red {
color: #ff4c5d;
}
/* 달력 데이터 토요일 */
.calendar_pop_div td.blue {
color: #0081ed;
}
/* 달력 선택 날짜 */
.calendar_pop_div td.selected {
background-color: #50a7ef !important;
color: white !important;
}
.calendar_pop_div td.included {
background-color: #c9e4ff !important;
border-radius: 0;
}
.calendar_pop_div td.included.start {
border-radius: 15px 0 0 15px;
}
.calendar_pop_div td.included.end {
border-radius: 0 15px 15px 0;
}
.calendar_pop_div.period .hcCalendar:nth-of-type(1) td.selected {
border-radius: 15px 0 0 15px;
}
.calendar_pop_div.period .hcCalendar:nth-of-type(2) td.selected {
border-radius: 0 15px 15px 0;
}
/* 달력 데이터 선택방지 */
.calendar_pop_div table tbody tr td.noSelect {
opacity: 0.5;
font-weight: initial;
}
/************************************** 중단 달력 출력 끝 **************************************/
/************************************** 하단 레이아웃 시작 **************************************/
/* 하단 레이아웃*/
.calendar_pop_div .hc_footer_bar {
width: 100%;
height: 30px;
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid #455a64;
box-sizing: border-box;
}
.calendar_pop_div.period .hc_footer_bar {
height: 40px;
justify-content: center;
border-top: none;
}
/* 하단 버튼 */
.calendar_pop_div .hc_footer_bar button {
height: 20px;
padding: 0 10px;
border-radius: 5px;
font-size: 13px;
font-weight: bold;
color: white;
background-color: #409ae5;
}
.calendar_pop_div.period .hc_footer_bar button {
height : 26px;
}
/* 오늘일자 */
.calendar_pop_div .hc_footer_bar strong {
font-size: 11px;
font-weight: normal;
text-decoration: underline;
}
.calendar_pop_div .hc_footer_bar > * {
margin: 0 10px;
}
/************************************** 하단 레이아웃 끝 **************************************/