* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 1.6rem;
}

html, body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.left {
  width: 15rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 3rem;
	background-color: #FC630E;
	overflow: hidden;
}
.right {
  
}
body>ul {
	position: absolute;
	width: 15rem;
	background-color: #12B18B;
	bottom: 0;
	display: flex;
	padding: .5rem;
}
body>ul>li {
	flex: 1;
	text-align: center;
	font-size: 1.25rem;
	line-height: 2rem;
}
body>div>*, iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	border: none;
	overflow: hidden;
}
aside {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-around;
}
.none {
	display: none;
}
#cover {
	background: white;
	justify-content: space-between;
}
#cover svg {
	flex: 1;
}
#cover p {
	color:#FC630E;
	padding: 32px;
}
#block p {
	display:inline;
	width: 100px;
	height: 100px;
	border: 4px solid #FC630E;
	border-radius: 50%;
	border-bottom-color: transparent;
	animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
	to { -webkit-transform: rotate(360deg); }
}
#black {
	flex-wrap: wrap;
	align-items: center;
	flex-direction: row;
	justify-content: center;
	color: white;
	text-align: center;
	background-color: black;
}
#black a {
	cursor: pointer;
	padding: 1rem 2rem;
}
#dateBox,
#timeBox,
#calsBox,
#alertBox {
	background-color:rgba(0, 0, 0, 0.6);
}
#alertBox>div {
	background: white;
	padding: 2rem;
	border-radius: 1rem;
	min-width: 50%;
	max-width: 80%;
	text-align: center;
}
#alertBox p {
	margin-bottom: 3rem;
}
#alertBox>div>div {
	display: flex;
	justify-content: space-around;
}
#toastBox {
	top: 80%;
	height: auto;
}
#toastBox p {
	width: 80%;
	color: #FFF;
	background: #999;
	line-height: 3rem;
	border-radius: 1.5rem;
	text-align: center;
}
.picker {
	margin: 0;
	padding: 2rem 1.5rem 1.5rem;
	background: white;
	text-align: right;
}
.picker div {
	position: relative;
	padding-left: 1rem;
	margin-bottom: 2rem;
}
.picker select {
	border: none;
	outline: none;
}
.picker option {
	margin-right: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid black;
}
.picker option:last-of-type {
	border: none;
}
.picker b {
	position: absolute;
	width: 1rem;
	height: 100%;
	top: 0;
	margin-left: -1rem;
	background: white;
}
.picker button:last-of-type {
	margin-right: 1rem;
}


#calsBox>div {
	background-color: white;
}
#calsBox>div>header {
	display: flex;
	align-items: center;
	justify-content: space-around;
	background-color: #12B18B;
	color: #FFF;
	margin-bottom: 1rem;
	padding: 2rem 1rem;
}
#calsBox>div>header b {
	padding: 0 1rem;
}
#calsBox>div>footer {
	display: flex;
	align-items: center;
	margin: 2rem 1rem 1rem;
}
#calsBox>div>footer b {
	flex: 1;
	color: #FC630E;
}
#calsBox>div>div {
	margin: 0 1rem;
}
#calsBox ul {
	display: flex;
}
#calsBox li {
	width: 3rem;
	line-height: 3rem;
	text-align: center;
}
#calsBox li.o {
	color: #FFF;
	background-color: #12B18B;
	border-radius: 50%;
}
#calsBox li.x {
	color: #999;
}


ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

button {
	margin: 0 .25rem;
	padding: .5rem 1rem;
}


.view:nth-of-type(n+2) {
	display: none;
	top: 0;
	left: 0;
	opacity: 1;
	transform: scale(1.0, 1.0);
}
.view.show {
	display: block;
}



.view.pop-in-right {
	display: block;
	top: 0;
	left: 100%;
	transition: left ease 300ms;
}
.view.pop-in-right.show {
	left: 0;
}

.view.pop-in-bottom {
	display: block;
	top: 100%;
	transition: top ease 300ms;
}
.view.pop-in-bottom.show {
	top: 0;
}

.view.pop-in-scale {
	display: block;
	opacity: 0;
	transform: scale(0, 0);
	transition: all 300ms;
}
.view.pop-in-scale.show {
	opacity: 1;
	transform: scale(1.0, 1.0);
}

.view>p {
	height: 5.6rem;
	box-sizing: content-box;
	position: relative;
	left: 0;
	right: 0;
	background-color: white;
	display: none;
}
.view>p.line {
	border-bottom: 1px solid #E9EBEE;
}
.view>p i {
	position: absolute;
	left: 2.4rem;
	top: 50%;
	transform: translateY(-50%);
	width: 2.4rem;
	height: 2.4rem;
	background-size: cover;
	background-repeat: no-repeat;
}
.view>p b {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 55%;
	text-align: center;
	color: #374553;
    font-size: 1.8rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.view>p a {
	position: absolute;
	right: 2.4rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
    font-weight: 700;
    color: #567BFD;

/*
	transition: .2s;
	transition: 0.25s ease-in-out;
	*/
}
.view>p.back,
.view>p.close {
	display: flex;
}
.view>p.back i {
	background-image: url(sample/data/ico-back-black.svg);
}
.view>p.close i {
	background-image: url(sample/data/ico-close-black.svg);
}