#iw_date_picker_popup {
	position: absolute;
	z-index: 19999;
	outline: 1px solid #EEEEEE;
    border-radius: 6px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
}

.iw_date_picker {
	box-sizing: border-box;
	width: 568px;
	height: 400px;
    border-radius: 6px;
	background: #FFFFFF;
}

.list_mode .iw_date_picker{
	height : 376px !important;
}

.iw_date_picker:has(.picker_box .six_row){
	height: 440px;
}

.iw_date_picker .picker_wrapper {
	display: flex;
	height: fit-content;
}

.iw_date_picker * {
  user-select: none;
}

.iw_date_picker .left_view {	
	width:120px;
	border-right: 1px solid #EEEEEE;
	box-sizing: border-box;
	
	padding-top: 24px;
}

/* button left right */
.iw_date_picker .btn_move,
.iw_date_picker .btn_year_move{
	height: 28px;
	width: 28px;
	top: 17px;
	box-sizing: border-box;
	background-size: 18px;
	background-repeat: no-repeat;
	background-position: center;
	cursor: pointer;
	user-select: none;
}

.iw_date_picker .btn_move.left {
	background-image:url("/resources/img/common/btn_calander_next_btn.svg");
}

.iw_date_picker .btn_move.right {
	transform: scaleX(-1);
	background-image:url("/resources/img/common/btn_calander_next_btn.svg");
}

.iw_date_picker .btn_year_move.left {
	background-image:url("/resources/img/common/btn_calander_year_btn.svg");
}

.iw_date_picker .btn_year_move.right {
	transform: scaleX(-1);
	background-image:url("/resources/img/common/btn_calander_year_btn.svg");
}

.iw_date_picker :where(#btn_next, #btn_year_next) .tooltip_crew {
	transform: translateX(-50%) scaleX(-1);
}

.iw_date_picker .btn_move:not(.disabled):hover,
.iw_date_picker .btn_year_move:not(.disabled):hover{
	border-radius: 4px;
	background-color: rgba(0, 0, 0, 0.02);
}

.iw_date_picker .btn_move.disabled {
	opacity: 0.3;
}

/**/
.iw_date_picker .info_box {
	display: flex;
	align-items: center;
	gap: 6px;
}

.iw_date_picker .info_box .icon {
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px;
	background-image: url("/resources/img/common/ic_picker_info.svg");
}

.iw_date_picker .info_box .msg {
	color: #707683;
	font-size: 13px;
	font-style: normal;
	font-weight: 300;
	line-height: normal;
	padding-top: 2px;
}

.iw_date_picker .title {
	height: 16px;
	text-align: center;
	color: #353C49;
	font-size: 16px;
	/* width: 150px; */
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iw_date_picker .title_btn_area {
	width: 150px;
	display : flex;
	justify-content : center;
	align-items: center;
	padding: 6px 0;
	margin: 0 auto;
	height: 16px;
}

.picker:nth-child(1) .title_area .title_btn_area {
	margin-left: 20px;
	margin-right: unset;
}

.picker:nth-child(2) .title_area .title_btn_area {
	margin-right: 20px;
	margin-left : unset;
}

.reverse_row .picker:nth-child(1) .title_area .title_btn_area {
	margin-right: 20px;
	margin-left : unset;
}

.reverse_row .picker:nth-child(2) .title_area .title_btn_area {
	margin-left: 20px;
	margin-right: unset;
}

.list_mode .picker .title_area .title_btn_area {
	margin : unset !important;
}


.iw_date_picker .picker .title_area .title_btn_area #btn_sub_calander{
	display : block;
	transform: scaleY(-1);
	height: 12px;
	width: 12px;
	top: unset;
	left: 0;
	position: relative;
	background-size: 12px;
	background-position: center;
	background-repeat:no-repeat;
	background-image:url("/resources/img/common/btn_calander_dropdown_btn.svg");
}

.iw_date_picker .picker .title_area .title_btn_area #btn_sub_calander.selected{
	transform: scaleY(1);
}

.list_mode .picker .title_area .title_btn_area #btn_sub_calander,
.picker .title_area .title_btn_area #btn_sub_calander{
	margin-left : 4px;
}

.iw_date_picker .title_btn_area:hover {
	cursor : pointer;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
}

.iw_date_picker .picker_view {
	width: 568px;
	position: relative;
}

.iw_date_picker .picker_box {
	min-width: 568px;
	height: 330px;
	/* overflow:hidden; */
	position: relative;
	display: flex;
}

.list_mode .iw_date_picker .picker_box {
	height : 312px !important;
}


.iw_date_picker .picker_box.reverse_row {
	flex-direction: row-reverse;
}

.iw_date_picker .picker_box:has(.six_row) {
	height: 370px;
}

.list_mode .iw_date_picker .picker_box .title_area {
	position : absolute;
	left: 0px;
}

.iw_date_picker .picker_box .title_area {
	width: 100%;
	display: flex;
	height: 59px;
	align-items: center;
	position: relative;
	/* margin: 16px auto 0 auto; */
	justify-content: center;
	border-bottom: 1px solid #EEE;
}

.iw_date_picker .picker {
	width: 50%;
	display: none;
	overflow : hidden;
	border-radius: 6px;
	background-color: #ffffff;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.list_mode .iw_date_picker .picker {
	overflow : visible;
}

.iw_date_picker .label_list {
	margin-top: 12px;
	display: flex;
	justify-content: space-between;
	padding: 0 16px;
}

.iw_date_picker .label_list li {
	font-style: normal;
	font-weight: 300;
	font-size: 13px;
	text-align: center;
	align-items: center;
	display: flex;
	justify-content: center;
	color: #B8BECB;
	width: 36px;
	height: 36px;
}

.iw_date_picker .date_box {
	padding: 0 16px;
	display: flex;
	height: 196px;
	gap: 4px;
	flex-direction: column;
	padding-top: 4px;
	padding-bottom: 16px;
	justify-content: space-between;
}

.iw_date_picker .date_box .row {
	display: flex;
	justify-content: space-between;
	border-radius: 6px;
	cursor: pointer;
}

.iw_date_picker .row li {
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 32px;
	text-align: center;
	color: #707683;
	border-radius: 6px;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iw_date_picker .row li.not-month {
	opacity : 0.7 !important;
}

.iw_date_picker.week .row:not(.selected):hover li:nth-child(1), .iw_date_picker.week .row:not(.selected):hover li:nth-child(7) {
    border-radius: 6px !important;
    background: rgba(0, 0, 0, 0.05) !important;
}

.iw_date_picker.week .row:not(.disabled, .selected):hover > li {
	background: rgba(0, 0, 0, 0.02);
	border-radius: unset;
}

.iw_date_picker .row.selected {
	background-color: #F8FBFF;
}

.iw_date_picker .row.selected.from li:first-child {
	background-color: #FFFFFF;
	color: #0099FF;
	border: 1px solid #0099FF;
	box-shadow: 0px 4px 8px -2px rgba(0, 153, 255, 0.05), 0px 2px 4px -2px rgba(0, 153, 255, 0.04);
}

.iw_date_picker .row.selected.to li:last-child {
	background-color: #FFFFFF;
	color: #0099FF;
	border: 1px solid #0099FF;
	box-shadow: 0px 4px 8px -2px rgba(0, 153, 255, 0.05), 0px 2px 4px -2px rgba(0, 153, 255, 0.04);
}

.iw_date_picker.day .row:not(.disabled) li:not(.not, .selected):hover {
	background: rgba(0, 0, 0, 0.02);
}

.iw_date_picker.day .row li.selected {
	background-color: #F8FBFF;
	border-radius: unset;
}

.iw_date_picker.day .row li.selected.from {
	background-color: #FFFFFF;
	color: #0099FF;
	border: 1px solid #0099FF;
	border-radius: 6px;
	box-shadow: 0px 4px 8px -2px rgba(0, 153, 255, 0.05), 0px 2px 4px -2px rgba(0, 153, 255, 0.04);
}

.iw_date_picker.day .row li.selected.to {
	background-color: #FFFFFF;
	color: #0099FF;
	border: 1px solid #0099FF;
	border-radius: 6px;
	box-shadow: 0px 4px 8px -2px rgba(0, 153, 255, 0.05), 0px 2px 4px -2px rgba(0, 153, 255, 0.04);
}

.iw_date_picker .row:not(.selected) li.not {
	opacity: 0.3;
}

.iw_date_picker .row.disabled li.not {
	color: #707683;
}

.iw_date_picker .row.disabled  li {
	opacity: 0.3;
}

.iw_date_picker .bottom_box {
	display: flex;
	justify-content: space-between;
	padding: 12px 16px;
	align-items: center;
	height: 39px;
	border-top: 1px solid #EEE;
}

.iw_date_picker .right_button_box {
	display: flex;
	align-items: center;
	gap: 8px;
}

.iw_date_picker #btn_year_prev {
	position: absolute;
	left: 16px;
}

.iw_date_picker #btn_year_next {
	position: absolute;
	right: 16px;
}

.iw_date_picker #btn_prev {
	position: absolute;
	left: 44px;
}

.iw_date_picker #btn_next {
	position: absolute;
	right: 44px;
}


.iw_date_picker:where(.month, .quarter) #btn_prev {
	left: 16px;
}

.iw_date_picker:where(.month, .quarter) #btn_next {
	right: 16px;
}

.iw_date_picker .n_button {
	width: 81px;
}

/**/
.iw_date_picker.month {
	width: 568px;
	height: 324px;
}

.iw_date_picker.month .picker_view {
	width: 568px;
}

.list_mode .iw_date_picker.month {
	height: 172px !important;
}

#iw_date_picker_popup.list_mode .iw_date_picker.quarter,
#iw_date_picker_popup.list_mode .iw_date_picker.quarter .picker_box,
#iw_date_picker_popup.list_mode .iw_date_picker.quarter .picker{
	height : 172px !important;
}

.iw_date_picker.month .picker_box {
	min-width: 568px;
	height: fit-content !important;
}

.iw_date_picker .month_box {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	margin: 12px 16px 16px 16px;
	height: 164px;
	gap: 4px;
}

.iw_date_picker .month_box .mrow {
	display: flex;
}

.iw_date_picker .month_box li {
	display: flex;
	position: relative;
	cursor: pointer;
	width: 84px;
	height: 36px;
	justify-content: center;
}

.iw_date_picker .month_box li .text {
	width: 84px;
	height: 36px;
	box-sizing: border-box;
	font-style: normal;
	font-weight: 400;
	font-size: 13px;
	line-height: 32px;
	text-align: center;
	color: #707683;
	z-index: 2;
	display: flex;
    justify-content: center;
    align-items: center;
}

.iw_date_picker .month_box li:not(.disabled):hover .text {
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
}

.iw_date_picker .month_box li.selected:not(.disabled):hover .text {
	border-radius: 6px;
	background: rgba(0, 153, 255, 0.05);
}

.iw_date_picker .month_box li.selected.from .text,
.iw_date_picker .month_box li.selected.to .text {
	color: #0099ff;
	border-radius: 6px;
	border: 1.002px solid #09F;
	background: #F8FBFF;
}

.iw_date_picker .month_box li.disabled {
	opacity: 0.3;
	cursor: unset;
}

.iw_date_picker .month_box li .bg_box {
	position: absolute;
	display: flex;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	z-index: 1;
}

.iw_date_picker .month_box li .bg_box .bg {
	width: 50%;
	height: 100%;
}

.iw_date_picker .month_box li.selected .bg_box .bg {
	background: #F8FBFF;
}

.iw_date_picker .month_box li.selected.from.to .bg_box .bg {
	background: #FFFFFF;
}

.iw_date_picker .month_box li.from .bg:nth-child(1) {
	background: #FFFFFF;
}

.iw_date_picker .month_box li.to .bg:nth-child(2) {
	background: #FFFFFF;
}

.iw_date_picker .month_box li.selected .bg_box .bg {
	background: #F8FBFF;
}

.iw_date_picker.quarter {
	width: 568px;
	height: 308px;
}

.iw_date_picker.quarter .picker_view {
	height: 320px;
}

.iw_date_picker.quarter .picker_box {
	min-width: 568px;
	height: 244px;
}

.iw_date_picker.quarter .picker {
	height: 244px;
}

.iw_date_picker .quarter_box {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding: 12px 0 16px 0;
	height: 156px;
	gap: 4px;
	align-items: center;
}

.iw_date_picker .quarter_box .qrow {
	display: flex;
	width: 252px;
}

.iw_date_picker .quarter_box li {
	display: flex;
	position: relative;
	cursor: pointer;
	width: 252px;
	justify-content: center;
}

.iw_date_picker .quarter_box li .text {
	width: 252px;
	height: 36px;
	box-sizing: border-box;
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
	line-height: 32px;
	text-align: center;
	color: #707683;
	z-index: 2;
    display: flex;
	border-radius: 6px;
    align-items: center;
    justify-content: center;
}
.iw_date_picker li:where(.from, .to):not(.disabled):hover .text {
	background: linear-gradient(0deg, rgba(0, 153, 255, 0.02) 0%, rgba(0, 153, 255, 0.02) 100%), #F8FBFF !important;
}

.iw_date_picker .quarter_box li:not(.disabled):hover .text {
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.02);
}

.iw_date_picker .quarter_box li.selected:not(.disabled):hover .text {
	border-radius: 6px;
	background: rgba(0, 153, 255, 0.05);
}

.iw_date_picker .quarter_box li.selected .text {
	background: #F8FBFF;
}

.iw_date_picker .quarter_box li.selected.from .text,
.iw_date_picker .quarter_box li.selected.to .text {
	border: 1px solid #0099FF;
	background-color: #ffffff;
	color: #0099ff;
	font-weight : 400;
}

.iw_date_picker .quarter_box li.disabled {
	opacity: 0.3;
	cursor: unset;
}

.iw_date_picker .quarter_box li .bg_box {
	position: absolute;
	display: flex;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;
	z-index: 1;
}

.iw_date_picker .n_button {
	box-sizing: border-box;
	height: 40px;
	border-radius: 6px;
	background: #0099FF;
	color: #FFFFFF;
	padding-left: 12px;
	padding-right: 12px;
	/* min-width: 100px; */
	font-weight: 300;
	font-size: 14px;
	text-align: center;
	line-height: 40px;
	user-select: none;
	cursor: pointer;
}

.iw_date_picker .n_button:not(.disabled):hover {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%), #09F !important;
}

.iw_date_picker .n_button.disabled {
	cursor: default;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #0099FF;
}

.iw_date_picker .n_button.disabled .title {
	opacity: 0.3;
}

.iw_date_picker .n_button.cancel {
	background: #FFFFFF;
	border: 1px solid #EAEAEA;
	color: #707683;
	box-sizing: border-box;
}

.iw_date_picker .n_button.cancel:hover {
	background: rgba(0, 0, 0, 0.02) !important;
}


.picker-animate {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.picker-animate.active {
    transform: translateX(0); /* 원하는 위치 */
    opacity: 1;
}


/* list view */
.iw_date_picker .year_month_box {
	display : none;
}

#iw_date_picker_popup.list_mode .iw_date_picker .year_month_box {
	height: 220px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	gap: 4px 8px;
	align-self: stretch;
	flex-wrap: wrap;
	padding-bottom: 16px;
	margin: 0 16px;
	width: 536px;
	margin-top: 76px;
}

#iw_date_picker_popup.list_mode .quarter .iw_date_picker .year_month_box .year_box,
#iw_date_picker_popup.list_mode .quarter .iw_date_picker .year_month_box .month_box{
	display : none;
}	


.iw_date_picker .year_month_box .year_box,
.iw_date_picker .year_month_box .month_box{
	display: flex;
	width: fit-content;
	height: 204px;
	max-height: 204px;
	padding: 8px;
	flex-direction: column;
	gap: 4px;
	flex: 1 0 0;
	position: relative;
	overflow-x: hidden;
	overflow-y: scroll;
	align-items: center;
	border-radius: 6px;
	background: #00000005;
	margin: 0;
}

.iw_date_picker .year_list_box {
	width: 536px;
	max-height: 156px;
	padding: 16px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px 4px;
	position: absolute;
	margin-top: 60px;
}

.iw_date_picker .year_month_box :where(.year_box, .month_box) .year_month_row {
	width: 240px;
}

.iw_date_picker .year_month_box :where(.year_box, .month_box) .year_month_row.selected,
.iw_date_picker.month .year_list_box .year_month_row.selected,
.iw_date_picker.quarter .year_list_box .year_month_row.selected{
	border: 1.002px solid #09F;
    background: #F8FBFF;
    color: #09F;
}

.iw_date_picker .year_month_box :where(.year_box, .month_box) .year_month_row.selected span,
.iw_date_picker.month .year_list_box .year_month_row.selected span,
.iw_date_picker.quarter .year_list_box .year_month_row.selected span{
	font-weight : 400;
}

.iw_date_picker .year_month_box :where(.year_box, .month_box)::-webkit-scrollbar,
.iw_date_picker.month .year_list_box::-webkit-scrollbar {
	width : 8px;
}

.iw_date_picker .year_month_box :where(.year_box, .month_box)::-webkit-scrollbar-thumb,
.iw_date_picker.month .year_list_box::-webkit-scrollbar-thumb{
	border-radius: 30px;
	background-clip: padding-box;
	border: 2px solid #FAFAFA;
	background: #EAEAEA;
}

.iw_date_picker .has_tooltip_btn:not(.dim):hover .tooltip_crew {
	display: inline-flex;
}