@import "preset";
@import "AXUtils";

/* ---------------------------- AXMobileModal ------------------------------- */
.AXMobileModal{
	z-index:6000;
	position:fixed;
	left:0px;top:0px;
	.AXMobileModalPanel{
		position:absolute;
		left:0px;top:0px;
		background:@bgcolor-b;
		border-radius:4px;
		box-shadow:0px 0px 3px rgba(0,0,0,10);
		
		.mobileModalHead{
			position:relative;
			height:44px;
			.modalTitle{
				padding:0px 10px;
				line-height:44px;
				color:@bgcolor;font-size:15px;
				font-weight:bold;
			}
			
			.AXDateControlBox{
				.prevbutton{
					display:block;
					position:absolute;
					left:0px;top:0px;
					width:44px;height:44px;
					background:url(images/mx-modal-icon-prev.png) center center no-repeat;
					background-size:50% 50%;
					text-indent:-9999;overflow:hidden;
				}
				.nextbutton{
					display:block;
					position:absolute;
					right:0px;top:0px;
					width:44px;height:44px;
					background:url(images/mx-modal-icon-next.png) center center no-repeat;
					background-size:50% 50%;
					text-indent:-9999;overflow:hidden;
				}
				.yearbutton{
					display:block;
					position:absolute;
					left:100px;top:0px;
					height:44px;line-height:44px;
					text-decoration:none;
					color:#3b3b3b;font-size:15px;font-weight:bold;
				}
				.monthbutton{
					display:block;
					position:absolute;
					left:160px;top:0px;
					height:44px;line-height:44px;
					text-decoration:none;
					color:#3b3b3b;font-size:15px;font-weight:bold;
				}
			}
			
			.AXContextMenuHome{
				display:block;
				position:absolute;
				left:0px;
				top:0px;
				width:44px;height:44px;
				background:url(images/mx-modal-icon-home.png) center center no-repeat;
				background-size:50% 50%;
				line-height:1000px;overflow:hidden;
			}

            .AXContextMenuPrev{
              display:block;
              position:absolute;
              left:44px;
              top:0px;
              height:44px;
              line-height:44px;
              padding-left:30px;
              color:#3b3b3b;font-size:13px;
              font-weight:bold;
              text-decoration:none;
              background:url(images/mx-modal-icon-prev.png) 0px center no-repeat;
              background-size:22px auto;
              cursor: pointer;
            }

		}
		
		.mobileModelClose{
			display:block;
			position:absolute;
			right:0px;
			top:0px;
			width:44px;height:44px;
			background:url(images/mx-modal-icon-close.png) center center no-repeat;
			background-size:50% 50%;
			line-height:1000px;overflow:hidden;
		}
		
		.mobileModalBody{ /* 모달창 바디 */
			.AXContextMenuContainer{ /* 모달창 바디 안에 위치한 스크롤 컨테이너 */	
				background:#fff;
			}
			.AXDateDisplayBox{ /* 모달창 바디 안에 위치한 달력 컨테이너 */	
				background:#fff;
				border-top:1px solid #b9babc;
				border-bottom:1px solid #b9babc;
			}
			.AXTimeDisplayBox{
				height:144px;
				background:#fff;
			}
			
			.AXContextMenuContainer{
				.AXContextMenuScroll{
					.contextMenuItem{
                        position:relative;
						display:block;padding:0px 10px;
						font-size:12px;line-height:43px;
						color:#3b3b3b;text-decoration:none;
						border-bottom:1px solid #c8c8c8;background:#fff;
						&:nth-child(odd){
							background:#f7f7f7;
						}
						&.on{
							background:#5ea3db;
						}
                      .tool-checkbox{
                        display:inline-block;vertical-align:middle;
                        width:43px;height:43px;
                        background:url('images/mx-item-check.png') no-repeat center center;
                        background-size:30px 30px;
                        &.on{
                          background:url('images/mx-item-checkOn.png') no-repeat center center;
                          background-size:30px 30px;
                        }
                      }
                      .label{
                        display:inline;
                      }
                      .tool-rightGroup{
                        position:absolute;right:0px;top:0px;
                        height:43px;
                        .contextSubMenuIcon{
                          display:inline-block;
                          width: 44px;height: 44px;
                          background:url('images/mx-modal-icon-next.png') no-repeat center center;
                          background-size:15px 15px;
                        }
                        .tool-sort{
                          display:inline-block;
                          width:43px;height:43px;
                          background:url('images/mx-item-sort.png') no-repeat center center;
                          background-size:30px 30px;
                          &.asc{
                            background:url('images/mx-item-sortAsc.png') no-repeat center center;
                            background-size:30px 30px;
                          }
                          &.desc{
                            background:url('images/mx-item-sortDesc.png') no-repeat center center;
                            background-size:30px 30px;
                          }
                        }
                      }
					}
				}
			}
		}
		
		.mobileModalFoot{
			.AXDateButtonBox{
				text-align:center;
				padding:7px;
			}
		}
	}
}