@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v78/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

.tree-item { user-select: none; }

body, html {
	height:100%;
}

.master {
	width: 100%;
	height: 100%;
	display: flex;
}

.sidebar {
	overflow-x: auto;
	resize: horizontal;
	
	width: 350px;
	min-width: 250px;
	max-width: 600px;

	height:100%;
	
	display: flex;
	align-items: stretch;
}

	.sidebar .first {
		width: 64px;
		border-right: 1px solid #ccc;
	}
	
	.sidebar .first button {
		width: 100%;
		font-size: 32px;
		padding: 12px 0;
		text-align: center;
	}
	
	.sidebar .second {
		flex-grow: 1;
		display:flex;
		overflow-y:auto; 
		flex-direction:column
	}

.mainsection {
	flex-grow: 1;
	background: gray;
	overflow-y: scroll;
}

.tree .material-icons {
	font-size: 20px;
}

th, td { text-align: left !important; }

.sidebarMenu { display: none; }

@media only screen and (max-width: 770px) {
	.master {
		width: 100%;
		min-height: 100%;
		display: block;
	}
	
  .sidebar {
  	background: white;
		
		overflow-x: hidden;
		resize: none;

		width: 100%;
		min-width: none;
		max-width: none;
		
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;

		display: none;
	}
	
	.sidebar.active { display: flex !important; }

		.sidebar .first {
			width: 64px;
			border-right: 1px solid #ccc;
		}

		.sidebar .first button {
			width: 100%;
			font-size: 32px;
			padding: 12px 0;
			text-align: center;
		}

		.sidebar .second {
			flex-grow: 1;
		}
		
		.sidebarMenu { display: inline-block; }
}