:root {
	--color1:#35E5CC;
	--color:rgb(216, 170, 17);
}
/* * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    transition: 1s;
} */

*::-webkit-scrollbar {
	display: none; 
	background-color: blue;
}

* {
	scrollbar-width: none;
}
body {
	user-select: none;
	/* overflow: hidden; */
	background-color: #222;
}
#container-resizable {
    height:  100vh; /*old 100vh*/
    width: 100%;/* old none */
	padding: 0 5px ;
	position: relative;
overflow: hidden;
}

#page {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-areas: 
		'header header header header header '
		'leftcol leftdragbar tabpages rightdragbar tabs '
		'leftcol leftdragbar tabpages rightdragbar rightcol '
		'leftcol leftdragbar topdragbar rightdragbar rightcol'
		'leftcol leftdragbar console rightdragbar rightcol'
		'footer footer footer footer footer ';
	grid-template-rows:40px 50px 2fr 6px 1fr 30px  ;
	grid-template-columns: 60px 6px 2fr 6px 2fr;	
}
#pageMobile {
	height: 100vh;
	overflow: auto;
	width: 100%;
	display: grid;
	grid-template-areas: 
		'header header header '
		'leftcol leftcol leftcol '
		'tabpages tabpages tabpages  '
		'topdragbar topdragbar topdragbar  '
		'console console console'
		'rightcol rightcol rightcol '
		'footer footer footer  ';
	grid-template-rows:auto auto 2fr 6px  1fr 2fr auto ;
	grid-template-columns: 30px 6px 1fr;	
}
/*****************************/
#header {
	background-color: rgb(32, 111, 140);
	overflow-x: hidden;
	grid-area: header;
}
#leftcol {
	background-color:#222;
	overflow: scroll;
	grid-area: leftcol;
}
#leftdragbar {
	grid-area: leftdragbar;
	cursor: ew-resize;
}
#leftdragbar,
#rightdragbar,
#topdragbar {
	transition: .5s;
	background-color: rgb(36, 28, 28);
}
#leftdragbar:active,
#rightdragbar:active,
#topdragbar:active {
	/* background-color: rgb(216, 170, 17); */
	background-color: var(--color1);
}
#leftdragbar:hover ,
#rightdragbar:hover,
#topdragbar:hover {
	background-color:#dabe09;
	background-color: var(--color1);
}
#tabs {
	background-color: #1a1919;
	overflow: scroll;
	grid-area: tabs;
	color: white;
}
#tabpages {
	background-color: #888888;
	overflow: auto;
	grid-area: tabpages;
}
#rightdragbar {
	grid-area: rightdragbar;
	cursor: ew-resize;
}
#rightcol {
	overflow: hidden;
	grid-area: rightcol;
	position: relative;
}
#footer {
	grid-area: footer;
	background-color: #4a635c;
	color: rgba(255, 255, 255, 0.299);
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}
#topdragbar {
	/* background-color: rgb(216, 170, 17); */
	cursor: n-resize;
	overflow: auto;
	grid-area: topdragbar;
}
#terminal {
	background-color: rgb(0, 0, 0);
	color: white;
	overflow: hidden;
	grid-area: console;
	/* position: relative; */
}
.consolehead {
	background-color: #222;
	padding: 10px;
	border-bottom: .5px solid rgb(216, 170, 17);
	display: flex;
	align-items: center;
	justify-content: space-between;
}