.component.panel {
	width:auto;
	height:auto;
	border:1px solid gray;
	background-color:yellow;
}


.component.dialog {
	border:1px solid gray;
	background-color:#eee;
	position:absolute;
	border-radius: .3em;
	overflow: hidden;
	display: block;
	z-index:3;
	
}

.component.dialog .titlebar {
	display:inline-block;
	width:100%;
	background-color:#9a9996;
	color:#fff;
	user-select: none;
	padding: .3em 0em;
	border-radius: .3em .3em 0px 0px;
	}

.component.dialog .title {
	pointer-events: none;
	user-select: none;
	vertical-align: top;
}

.component.dialog .icon {
	vertical-align: middle;
	margin-right: .4em;
}

.component.dialog .minimizer, .closer {
	vertical-align: top;
	float:right;
}

.dialog.made {
	width:auto;
	height: auto;
	overflow: auto;
	zzpointer-events: none;
}

.component.dialog .buttons {
	background-color:rgb(154, 153, 150);
	width:100%;
	height: 28px;
  	position: absolute;	
  	bottom: 0px;
	pointer-events: none;
	text-align: center;
}

.component.dialog .buttons:empty { display: none; }

.component.dialog .content {
	width:100%;
	min-height: 100px;
	padding:.6em;
	box-sizing: border-box;
}

.component.dialog.focused .titlebar{background-color:red;}
.component.dialog.focused {
filter: drop-shadow(4px 4px 6px #9a9996);
}

.component.dialog.vi_inline {
	position:unset !important;
	width:100%
}

.component.dialog.vi_inline {
	position:unset !important;
	width:100%
}


.component.dialog.vi_inline .buttons {
  	position: unset;	
}

.component.dialog.vi_modal{
	position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}​

.component.grid {
	border:1px solid red;
	background-color:black;
	padding:2px;
}

.grid .gridcontainer{
	border:1px solid red;
	display:grid;
	gap:5px ;
	zgrid-template-columns: auto ;
	zgrid-template-rows: auto;
	height:100%
}

.grid .griditem{  
		zbackground-color:yellow;
}

.grid .griditem .title{  
		background-color:red;
		color:white;
}

::-webkit-resizer {
    border: 2px solid yellow;
    background: blue;
    box-shadow: 0 0 2px 5px red;
    outline: 2px dashed green;

    /*size does not work*/  
    display:block;  
    width: 150px !important;
    height: 150px !important;
}