.daterange-rect {
	display: table;
	width: 100%;
	background-color: #fff;
	padding: 10px 20px;
	border-radius: 10px;
	box-shadow: 2px 2px 15px rgba(0,0,0,0.15);
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}

.daterange-rect > .row {
	display: table-row;
}

.daterange-rect > .row > .cell {
	display: table-cell;
}
.daterange-rect > .row > .cell.align-right {
	text-align: right;
}
.daterange-rect > .row > .cell.label {
	opacity: 0.5;
	font-size: 10pt;
	padding-bottom: 5px;	
}
.daterange-rect > .row > .cell.date {
	font-size: 16pt;
	color: #3366ff;
}


/* Selector */
.dr-selector {
	display: block;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: yellow;
	z-index: 20;
	transition: top 0.4s;
}
@media(min-width: 768px) { 
	.dr-selector {
		display: block;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 350px;
		height: 600px;
		background-color: yellow;
		z-index: 20;
		transition: top 0.4s;
	}
}
.dr-selector.hide {
	top: 100vh;
}

.dr-selector-header {
	height: 50px;
	line-height: 50px;
	background-color: #3366ff;
	text-align: center;
	color: #fff;
	font-size: 12pt;
}

.dr-selector-header > .back-btn {
	position: absolute;
	top: 0;
	left: 0;
	width: 60px;
	height: 50px;
}
.dr-selector-header > .back-btn:after {
	content: "";
	position: absolute;
	top: 18px	;
	left: 28px;
	width: 12px;
	height: 12px;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	transform: rotate(-45deg);
}

.dr-selector .dates {
	display: table;
	width: 100%;
	height: 55px;
	background-color: #3366ff;
	padding: 0 20px 10px 20px;
}

.dr-selector .dates > .row {
	display: table-row;
}

.dr-selector .dates > .row > .cell {
	display: table-cell;
}
.dr-selector .dates > .row > .cell.align-right {
	text-align: right;
}
.dr-selector .dates > .row > .cell.label {
	opacity: 0.5;
	color: #fff;
	font-size: 10pt;
	padding-bottom: 5px;	
}
.dr-selector .dates > .row > .cell.date {
	font-size: 16pt;
	color: #fff;
}

.dr-selector .weekday-row {
	display: table;
	width: 100%;
	background-color: #3366ff;
}

.dr-selector .weekday-row > .cell {
	display: table-cell;
	width: calc(100vw / 7);
	height: 30px;
	line-height: 30px;
	font-size: 10pt;
	color: rgba(255,255,255, 0.5);
	text-align: center;
}
@media(min-width: 768px) { 
	.dr-selector .weekday-row > .cell {
		width: calc(350px / 7);
	}
}

.dr-selector .calender-view {
	height: calc(100vh - 50px - 55px - 30px);
	padding-bottom: 100px;
	background-color: #fff;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.dr-selector .calender-view::-webkit-scrollbar { width: 0 !important }

.dr-selector .calender-view .month > .label {
	background-color: #ddd;
	text-align: center;
	padding: 5px;
}

.dates-grid {
	display: table;
	width: 100%;
}
.dates-grid > .week-row {
	display: table-row;
}
.dates-grid > .week-row > .date-cell {
	display: table-cell;
	text-align: center;
	font-size: 11pt;
	width: calc(100vw / 7);
	height: calc(100vw / 7);
	line-height: calc(100vw / 7);
	border-top: 1px solid #eee;
}
@media(min-width: 768px) { 
	.dates-grid > .week-row > .date-cell {
		width: calc(350px / 7);
		height: calc(350px / 7);
		line-height: calc(350px / 7);
	}
}
.dates-grid > .week-row:first-child > .date-cell {
	border-top: 1px solid transparent;
}

.dates-grid > .week-row > .date-cell > .date-btn {
	position: relative;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -moz-tap-highlight-color: rgba(0, 0, 0, 0);
}
.dates-grid > .week-row > .date-cell > .date-btn > .number {
	position: relative;
	color: #888;
}
.dates-grid > .week-row > .date-cell > .date-btn.disabled > .number {
	opacity: 0.3;
}
.dates-grid > .week-row > .date-cell > .date-btn.selected > .number {
	position: relative;
	color: #fff;
}
.dates-grid > .week-row > .date-cell > .date-btn > .bg {
	position: absolute;	
	background-color: transparent;
}
.dates-grid > .week-row > .date-cell > .date-btn.selected > .bg {
	background-color: #3366ff;
	border-radius: calc((100vw / 7 - 10px) / 2);
	top: 5px;
	left: 5px;
	width: calc(100vw / 7 - 10px);
	height: calc(100vw / 7 - 10px);
	line-height: calc(100vw / 7 - 10px);
}
@media(min-width: 768px) { 
	.dates-grid > .week-row > .date-cell > .date-btn.selected > .bg {
		width: calc(350px / 7 - 10px);
		height: calc(350px / 7 - 10px);
		line-height: calc(350px / 7 - 10px);
		border-radius: calc((350px / 7 - 10px) / 2);
	}
}
.dates-grid > .week-row > .date-cell > .date-btn > .between {
	position: absolute;	
	background-color: transparent;
}
.dates-grid > .week-row > .date-cell > .date-btn.in-between > .between {
	background-color: #e3effd;
	top: 5px;
	left: 0;
	width: calc(100vw / 7);
	height: calc(100vw / 7 - 10px);
}
@media(min-width: 768px) { 
	.dates-grid > .week-row > .date-cell > .date-btn.in-between > .between {
		width: calc(350px / 7);
		height: calc(350px / 7 - 10px);
	}
}
.dates-grid > .week-row > .date-cell > .date-btn.in-between.selected.start > .between {
	left: calc((100vw / 7) / 2);
	width: calc((100vw / 7) / 2);
}
@media(min-width: 768px) { 
	.dates-grid > .week-row > .date-cell > .date-btn.in-between.selected.start > .between {
		left: calc((350px / 7) / 2);
		width: calc((350px / 7) / 2);
	}
}
.dates-grid > .week-row > .date-cell > .date-btn.in-between.selected.end > .between {
	left: 0;
	width: calc((100vw / 7) / 2);
}
@media(min-width: 768px) { 
	.dates-grid > .week-row > .date-cell > .date-btn.in-between.selected.end > .between {
		width: calc((350px / 7) / 2);
	}
}

.dr-selector-footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80px;
	padding: 10px;
	background-color: #fff;
	z-index: 10;
}

.dr-selector-footer .submit-btn {
	background-color: #3366ff;
	color: #fff;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 12pt;
	border-radius: 12px;
}
.dr-selector-footer .submit-btn.disabled {
	opacity: 0.5;
}