@font-face {
	font-display: block;
    font-family: "basic";
    src: url("fonts/Nunito-Light.ttf");
}
@font-face {
	font-display: block;
    font-family: "basic";
    src: url("fonts/Nunito-Bold.ttf");
    font-weight: bold;
}
@font-face {
	font-display: block;
    font-family: "basic";
    src: url("fonts/Nunito-LightItalic.ttf");
    font-style: italic, oblique;
}
@font-face {
	font-display: block;
    font-family: "basic";
    src: url("fonts/Nunito-BoldItalic.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

html {
	background-image: url("img/retina_wood.png");
  background-repeat: repeat;
}

:root {
	--main-bg-color: hsl(35, 60%, 95%);
}

.title {
	font-style: italic;
	opacity: 50%;
}

/*https://www.tilingtextures.com/light-cork-board/*/
/*https://www.toptal.com/designers/subtlepatterns/retina-wood/*/
html,body {

	font-family: basic, sans-serif;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0px;
}

h1, h2, h3, h4 {
	margin: 0px;
}

body {
	flex-direction: column;
	display: flex;
}

#app {
	width: 100%;
	height: 100%;
	margin: 0px;
	display: flex;
	flex-direction: column;
}

#app-sections {
/*border: 2px solid green;*/
	position: relative;
	display: flex;
	flex-direction: row;
	flex: 1;
	overflow: hidden;
}

#app-sections>.main-section {
	
	/*border: 2px solid hotpink;*/
	overflow: hidden;
	/*min-width: 100px;
	width: 40%;*/
	display: flex;
	flex-direction: column;
	
}

#app-sections>.main-section:nth-child(1) {
	resize: horizontal;
	background-color: var(--main-bg-color);
	width: 30%;
	box-shadow: 1px 0px 5px rgba(0, 0, 0, .4);
	z-index: 300;
}

#app-sections>.main-section:nth-child(2) {
	resize: horizontal;
	width: 30%;
	z-index: 100;
	padding:  6px;

}

#app-sections>.main-section:nth-child(3) {
	flex:1;
	z-index: 200;
	box-shadow: -1px 0px 5px rgba(0, 0, 0, .4);
	background-color: var(--main-bg-color);
}


.minibutton {
	border-radius: 100px;
	padding: 1px;
	font-size: 50%;
}

.icon-button {
	overflow: hidden;
	position: relative;
	box-shadow: 0px 1px 2px rgba(0,0,0);
	border-radius: 100px;
	border: none;
	margin: 1px;
	width: 1.8em;
	height: 1.8em;
	padding: 1px;
}


.icon-button:hover {
	top: -1px;
	box-shadow: 0px 3px 4px rgba(0,0,0);
	background-color: hsla(320,100%,90%,1);
}


.icon-button:active {
	top: 1px;
	
	background-color: hsla(320,100%,80%,1);
}



.icon-button img {

	width: 90%;

}
.inline-button {
	width: 1.5em;
	height: 1.5em;
	border: none;
	box-shadow: 0px 1px 2px rgba(0,0,0);
	
}

.toggle-button {
	top: -1px;
	border: none;
	box-shadow: 0px 1px 2px rgba(0,0,0);
	
}

.toggle-button.active {
	top: 1px;
	box-shadow: inset 1px 2px 4px rgba(0,0,0);
	background-color: hsla(200,100%,80%,1);
}



.tile {
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid hotpink;
	padding: 1px 3px;
	display: inline-block;
}

.tile.selected {
	background-color: hsla(320,100%,90%,1);
}
.chip {
	
}


.chip {
	display: inline-block;
	font-weight: bold;
	padding: 1px 3px;
	margin: 2px;
	
	border-radius: 10px;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, .4);
}

.detail {
	font-style: italic;
	padding: 1px 3px;
	
	font-size: 10px;
}

header {

	
	padding: 2px 4px;
	z-index: 10;
	min-height: 18px;
	position: relative;
	background-color: hsla(0, 100%, 100%, .8);
	box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
}

header.row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


.section {
	overflow: hidden;
	/*border: 1px solid rgba(0, 0, 0, .3);*/
	position: relative;
	display: flex;
	flex-direction: column;
	
	/*background-color: hsla(0, 0%, 80%, .5);*/
}

.section>.content {
	position: relative;
	z-index: 5;
	
	flex: 1;
	overflow: scroll;
	
}

.section:not(:last-child) {
	/*background-color: cyan;*/
	resize: vertical;
}

.section:last-child {
	/*border:  3px solid green;*/
	flex:  1;
}

.debug-view,.web-view{
	box-sizing: border-box;
	border-radius: 10px;
	background-color: hsla(0, 0%, 100%, 100);
	box-shadow: 0px 2px 3px rgba(0, 0, 0, .5);
	font-size: 70%;
	overflow: scroll;
}

.tile {
	display: inline-block;
	margin: 10px;
	box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
}

table  .label {
	font-size: 80%;
	vertical-align: top;
	text-align: right;
	
	font-weight: bold;
}
table  .value {
	vertical-align: top;
	
}