@import url(style/headers.css);
@import url(style/drawer.css);
@import url(style/progress_activity.css);
@import url(style/confirm.css);
@import url(style/toolbars.css);
@import url(style/app-style.css);

html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
      height: 100%;
      overflow-x: hidden;
}
body {
	background: none;
}

section[role="region"] {
	height: 100%;
	line-height: 1em;
	font-size: 2.2rem;
}

div[role="main"] {
	background: #fff;
	height: calc(100% - 5rem);
	/*overflow: hidden;*/
    overflow-x: hidden;
    overflow-y: scroll;
}

div[role="main"] p {
	margin: 2rem 2.5rem;
}

/* Base icons */
section[data-type="sidebar"] > header .icon.icon-add {
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4RTlFMTExOTIwMjA2ODExODIyQUJFQTc4MUU4NEEyOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpENjM1MzgyMUJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpENjM1MzgyMEJGNzAxMUUxQkNDOEUwRkExQ0U5N0Q0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6Mzk0RjYxOUMzMTIwNjgxMTgyMkFBRjgxQ0IyNTAxM0UiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OEU5RTExMTkyMDIwNjgxMTgyMkFCRUE3ODFFODRBMjkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz45ZU6fAAAAiklEQVR42mL8//8/w0AAJoYBAqMW0w2wkKmPH4hVoOw7QPyRVAMYyUzVD4FYDsq+DMR6o3E8avGoxbiykxAQ78KjTxeI2aDs70B8DY9aZ2z5HJfFIIMvUclzGkB8c9AXmU+B+CyVgvrFaJE5avGoxQNSZBICzEBsAGVfAOK/9LJ4NI5HLSYIAAIMAKfZJ7+0GO5HAAAAAElFTkSuQmCC);
}




#index {
	height: 100%;
}
[data-position="right"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transform: translateX(100%);
	-webkit-transform: translateX(100%);
	z-index: 15;
	z-index: 100; /* -> drawer */
}
section[role="region"][data-position="right"] {
	position: absolute;
}
[data-position="right"].current {
	animation: rightToCurrent 0.4s forwards;
	-webkit-animation: rightToCurrent 0.4s forwards;
}
[data-position="right"].right {
	animation: currentToRight 0.4s forwards;
	-webkit-animation: currentToRight 0.4s forwards;
}
[data-position="current"].left {
	animation: currentToLeft 0.4s forwards;
	-webkit-animation: currentToLeft 0.4s forwards;
}
[data-position="current"].current {
	animation: leftToCurrent 0.4s forwards;
	-webkit-animation: leftToCurrent 0.4s forwards;
}
[data-position="back"] {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	opacity: 0;
	/* z-index: 100; -> drawer */
}
[data-position="back"].fade-in {
	z-index: 120;
	animation: fadeIn 0.2s forwards;
	-webkit-animation: fadeIn 0.2s forwards;
}
[data-position="back"].fade-out {
	animation: fadeOut 0.2s forwards;
	-webkit-animation: fadeOut 0.2s forwards;
}

[data-position="edit-mode"] {
	position: absolute;
	top: -5rem;
	left: 0;
	right: 0;
	bottom: -7rem;
	z-index: -1;
	opacity: 0;
	transition: all 0.3s ease;
}
[data-position="edit-mode"].edit {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	opacity: 1;
}

/* Active state */
.active {
	background-color: #b2f2ff;
	color: #fff;
}

