/*

    drag & drop

*/
.vcl .draginfo {
	pointer-events: none;
	color:rgba(0,0,0,0.2);
	background:rgba(0,255,0,0.2);
	font-size:80px;

	display:flex;	
	position:absolute;
	left:0;
	top:0;
	right:0;
	bottom:0;	
	align-items: center;
	justify-content: center;
	z-index:9999;
}
.vcl .draginfo.hidden {
	display:none;
}
/*

    TabSheet

*/
vcl-tabsheet {
    display: flex;    
    flex-grow: 1;
}
vcl-tabsheet.default {
    flex-direction: column;
}
vcl-tabsheet > .buttons {
    height:64px;
}
vcl-tabsheet > .pages {
    display:flex;
    flex-grow: 1;
}
vcl-tabsheet > .pages > .tab-page {
    display:flex;
    flex-grow: 1;
}
vcl-tabsheet > .pages > .tab-page.hidden {
    display:none;
}

/*

    TextEditor

*/
.caret-anim { animation: blinker 1s ease infinite;  }
@keyframes caret-anim { 0% { opacity:1 } 49% { opacity:1 } 50% { opacity : 0 } 51% { opacity : 0 } 99% { opacity : 0 } 100% { opacity : 1 }}

vcl-texteditor {
    position:relative;
    display:block;
    padding:1px;
    flex:1;
    border:1px solid gray;                
}
vcl-texteditor .editor-controls {
    display:flex;
    height:32px;
    background: gainsboro;
    border-bottom:1px solid silver;
    align-items:center;
}
vcl-texteditor .editor-controls > vcl-button {
    width:24px;
    height:24px;   
    margin:2px; 
    border-radius:3px;
}
vcl-texteditor .editor-controls > vcl-button:hover {
    background: silver;
}
vcl-texteditor .editor-textarea {
    white-space: pre;
    overflow:hidden;
    position:absolute;
    margin:1px;
    left:0;
    right:0;
    top:auto;
    bottom:auto;
}
vcl-texteditor .caret {    
    pointer-events: none;               /* make the caret invisible to mouse events just in case */
    position:absolute;
    opacity:1;
    border-left:2px solid black;     
}
vcl-texteditor .caret.hidden {
    display:none;
}
vcl-texteditor .editor-textarea > .row {
    line-height: 125%;
    height:1.25em;
}
/*
-------------------------------
    Resizer widget (visualComponent)
-------------------------------
*/
.vcl .resizer-widget {
    position:absolute;
}
.vcl .resizer-area {
    position:absolute;
}
.vcl .resizer-area:hover {
    background:rgba(255,0,0,0.8);
}

/*
-------------------------------
    This is added in the document body
-------------------------------
*/
.vcl.fixed-cover {
    position: fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}

.vcl {    
    font:14px segoe ui; 
}
.vcl .box-shadow {
    box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.5);
}
.vcl .face {
    background: gainsboro;
}
.vcl .workspace {
    background: white;
}
.vcl .disabled {
    pointer-events: none;
    color: gray;    
}
.vcl .disabled input {
    background:#efefef;
    color: gray;    
}
.vcl .cover {
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
}
.vcl .hidden {
    display:none;
}

/*
-------------------------------
    TreeView
-------------------------------
*/
vcl-treeview {
    display:flex;
    flex-direction: column;
    flex-grow:1;
    border:1px solid black;
    padding:1px 2px;
    user-select:none;
}

vcl-treeview .child-container {
    margin-left:16px;
}
vcl-treeview .label {
    box-sizing:border-box;
    margin-left:16px;
    padding:1px 2px;    
}
vcl-treeview .label.selected {
    background:gainsboro;
}
vcl-treeview input.label {
    outline: 0;
    font: inherit;
    width: 100%;
    border: 0;
    box-sizing:border-box;
    position: relative;
    background: gainsboro; 
}
vcl-treeview .label:hover {
    background:blue;
    color:white;
}

vcl-treeview .title-row {           /* container for icon and label */
    display:flex;
}

vcl-treeview .icon {
    display: flex;
    align-self: center;
    position: absolute;  
    left: 0px;
    color:silver;              
}
vcl-treeview .icon:hover {
    color:black;
}

vcl-treenode {    
    display: flex;
    flex-direction: column;
    position: relative;
    margin:1px;
}


/*
-------------------------------
    Memo
-------------------------------
*/
vcl-memo {
    margin:1px;
}
vcl-memo > span {
    display:block;
}
vcl-memo > textarea {
    resize: none;
    box-sizing: border-box;
}

/*
-------------------------------
    CUE
-------------------------------    
*/

vcl-cue {
    position:absolute;
    pointer-events: none;
    border: 1px solid white;
    border-radius: 3px;
    background: rgba(0,0,0,0.85);
    padding:1px 4px;
    font:12px arial;
    color: white;   
    max-width:240px;
    transition: all 300ms;    
}

/*
-------------------------------
    TOOLTIP
-------------------------------    
*/

vcl-tooltip {
    position: absolute;
    display:block;
    background:rgba(0,0,0,0.85);
    border:1px solid white;
    padding:4px;    
    font:12px arial;
    color:white;
    border-radius:3px;
    opacity:0;    
    transition: opacity 100ms linear 500ms;
}
vcl-tooltip.visible {
    opacity:1;
}

/* 
-------------------------------
    EDIT 
-------------------------------    
*/
vcl-edit {
    display: flex;
    flex-direction: column;
}

vcl-edit vcl-inline-edit {
    display: flex;
    
    border-radius: 1em;
    padding: 1px 5px;    
    outline: none;
    height: 1em;
    line-height: 1em;
    border: 1px solid rgba(0,0,0,0.5);        
    white-space: pre;
}

vcl-edit vcl-inline-edit > span {
    position: relative;
}

/* caret */
vcl-caret {
    position: relative;
    pointer-events: none;
    margin-left: -1px;
    border-left: 1px solid;
    border-left-color: black;    
    animation: vcl-kf-caret 1s steps(1) infinite;
}
vcl-caret.hidden {
    display: none;
}
@keyframes vcl-kf-caret {
    50% { border-left-color: transparent }
}

/*
-------------------------------
    COMBOBOX
-------------------------------
*/
vcl-combobox {
    display:flex;
    margin:1px;    
}
/*
-------------------------------
    LISTBOX
-------------------------------
*/
vcl-listbox {
    display:flex;    
}
vcl-listbox > .body {
    position: relative;
    border:1px solid black;
    height:200px;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;    
    flex-direction: column;
    width:100%;
}
vcl-listbox > .body .list-item {
    flex-shrink: 0;
    display:flex;         
    padding:2px;    
}
vcl-listbox > .body .list-item:hover {    
    background:silver;
}
vcl-listbox > .body .list-item .text {
    order:1;
    padding:2px;
}
vcl-listbox > .body .list-item .icon {
    border:1px solid black;        
    width:20px;
}
vcl-listbox > .body .list-item.selected {
    background:navy;    
    color:white;
}

/*
-------------------------------
    LISTVIEW
-------------------------------
*/
vcl-listview {
    display:flex;
    flex-direction: column;
}
vcl-listview > .body {
    position: relative;
    border:1px solid black;
    height:200px;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;    
    flex-direction: column;
}
vcl-listview > .body .listview-row {
    flex: 0 1 auto;                         /* don't allow shrinking, set fixed height */
    display:flex;         
    padding:2px;    
    align-items: center;        
}
vcl-listview > .body .listview-head {
    flex-shrink: 0;
    display:flex;         
    padding:2px;    
    align-items: center;
    border-bottom:1px solid gray;
    background: gray;
    color:white;
}
vcl-listview > .body .listview-row:hover {    
    background:silver;
}
vcl-listview > .body .listview-row.selected {
    background:navy;    
    color:white;
}

/*
-------------------------------
    Main Menu - horizontal bar
-------------------------------
*/
vcl-mainmenu {
    position:absolute;
    display:flex;
    z-index:1;

    left:0;
    top:0;
    right:0;
    padding-left:16px;                                  /* indent the mainmenu bar to make the leftmost menu look nicer */

    flex-direction: row;
    align-items: center;    
    box-shadow:1px 1px 10px 1px rgba(0,0,0,0.5);    
 
    border:2px solid transparent;

    box-sizing: border-box;

    font-size: 0.9em;
}
vcl-mainmenu.active {
    background:rgba(224,224,224,0.9);
    border-bottom:2px solid teal;    
}
vcl-mainmenu .body {        
    padding:0px 20px;    
}
vcl-mainmenu > .body > .itemcontainer {
    display:flex;
}
vcl-mainmenu > .body > .itemcontainer > vcl-menuitem {
    padding:0px 20px;
}
vcl-mainmenu vcl-menu {
    margin-top:16px;
    top:0px;
}

/*
-------------------------------
    Menu
-------------------------------
*/
vcl-menu {
    position:absolute; 
    left:0px;    
}

vcl-menu .body {    
    position: absolute; 
    padding:3px 0px;               
}

vcl-menu .body .itemcontainer {    
    background: gainsboro;        
    min-width:160px;
    box-shadow: 1px 1px 10px 1px rgba(0,0,0,0.5);
    display:flex;
    flex-direction: column;    
}

vcl-menuitem {
    position: relative;
}

vcl-menuitem.option {
    padding:4px 16px;
}

vcl-menuitem .separator { 
    margin:5px 0px 5px 0px;
    border-bottom:1px solid gray;
}

vcl-menuitem.option:hover {
    background: silver;
}

/*
-------------------------------
    Panel
-------------------------------    
*/
vcl-panel {
    display:flex;    
}

vcl-panel > .head {
    background: lightcyan;
    box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.5);
}

vcl-panel .sp {
    display:flex;
    flex-grow:1;
    position: relative;
}
vcl-panel .sp-col-parent {
    display:flex;
    flex-direction: row;
}

vcl-panel .sp-row-parent {
    display:flex;
    flex-direction: column;
}

vcl-panel .sp-col {
   
}

vcl-panel .sp-row {
   
}
/*
-------------------------------
    Caption
-------------------------------
*/
vcl-caption {
    font:12px segoe ui;
}

/*
-------------------------------
    Label
-------------------------------
*/
vcl-label {
    
}

/*
------------------------------- 
    Select
-------------------------------
*/
select {
    font:12px segoe ui;
}

/*
-------------------------------
    Flexeditor
-------------------------------
*/
vcl-flexeditor {
    position:relative;
    display:flex;
    align-content: stretch;       
}

vcl-flexeditor > input {
    border-radius:8px;
    font:12px segoe ui;
    border:1px solid gray;
    padding:0px 5px;
    outline:none;
}

/*
-------------------------------
    Form
-------------------------------    
*/
vcl-form {
    display:flex;
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    z-index:1;
    margin:auto;
    background: gainsboro;  
    transition: 150ms all;  
}

vcl-form.normal {
    display:flex;
    flex-direction: column;
}
 
vcl-form.hidden {   /* supersedes vcl-form.normal */ 
    display:none;
}

vcl-modalcover {    
    background: rgba(0,0,0,0.5);
    position: absolute;
    left:0;
    top:0;
    bottom:0;
    right:0;
    z-index:1;
}

vcl-form > .head {
    line-height:200%;
    position: relative;    
    display:flex;
    align-items:center;
    justify-content: space-between;
    height:24px;
    background: gainsboro;
    border-bottom:2px solid teal;
    color:black;
    text-shadow:1px 1px 8px white, -1px -1px 8px white;
}
vcl-form > .head > vcl-label {
    margin-left:8px;
}

vcl-form > .body {
    display:flex;
    flex-direction: column;
    position: relative;
    flex-grow: 1;                   /* fill remaining space */    
    padding:1px;           
    overflow: auto;
}

/* 
    Container for form buttons: close, max, min, etc 
*/
vcl-form .button-wrap {             
    display:flex;
    position:absolute;
    right:0px;
    top:1px;
    bottom:1px;
}
vcl-form > .head vcl-button {
    position: relative;
    display: flex; 
    width: 48px;
    height: 100%;

    font-weight:bold;
    border:none;
    background: transparent;
    border-radius: 0px;

    margin-left:1px;        
}

vcl-form > .head vcl-button.minimize:hover {
    background: silver;
}

vcl-form > .head vcl-button.maximize:hover {
    background: silver;
}

vcl-form > .head vcl-button.close:hover {
    background: red;
    color:white;    
}

/* 
-------------------------------
    BUTTON
-------------------------------     
*/
vcl-button {
    background: gainsboro;
    color:black;
    display:flex;
    align-items: center;
    justify-content: center;
    border:1px solid black;
    border-radius:9999px;
    cursor:default;
}

/*
-------------------------------
    Popup Menu
-------------------------------
*/
vcl-popupmenu {
    position:absolute;
    min-width:100px;
    height:auto;
    cursor:default;
    z-index:999;
    font-size:0.9em;
}

vcl-popupmenu .itemcontainer {
    display:flex;
    flex-direction: column;
    max-height:400px;
    overflow-y:auto;
    border:1px solid gray;
}
vcl-popupmenu vcl-menuitem.option {
    padding:2px 16px;
}
/*
-------------------------------
    STRING GRID
-------------------------------
*/
vcl-stringgrid {
    position:relative;
    display:flex;    
    box-sizing: border-box;            
    margin:1px; 
    border:1px solid black;
    flex-grow:1;    
}
vcl-stringgrid input.cell-edit {
    position: absolute;
    display: none;
    left:-2px;
    top:-2px;
    bottom:-2px;
    right:-2px;
    padding:1px 4px;
    border: none;
    outline: none;
    width: calc(100% + 4px);
    box-sizing: border-box;
}
vcl-stringgrid table {
    display:table;
    border-collapse: collapse;
    width: 100%;                
    box-sizing: border-box;
    border:1px solid silver;
}
vcl-stringgrid th, vcl-stringgrid td {
    position:relative;
    padding:1px 4px;
    border: 1px solid silver;
}
vcl-stringgrid th {
    text-align: center;    
    font-weight: normal;
}
vcl-stringgrid td {
    text-align: left;        
}
vcl-stringgrid td:first-child {
    text-align: center;
}
vcl-stringgrid thead {
}
vcl-stringgrid tbody {
}
vcl-stringgrid tbody tr {    
}
vcl-stringgrid tbody td {
    height:1em;
}

vcl-stringgrid .fixed-cell {
    background:gainsboro;
}


/* 
-------------------------------
    SPINEDIT 
-------------------------------    
*/
vcl-spinedit {
    display:flex;
    flex-direction:column;
}
vcl-spinedit > .panel {
    display:flex;
    flex-direction:row;
    background: silver;
    border: 1px solid gray;
    border-radius: 1em;
}
vcl-spinedit input {
    order:2;
    font:12px segoe ui;
    border-radius:1em;
    padding:1px 8px;    
    outline:none;
    border:1px solid rgba(0,0,0,0.5);
    border-top:none;
    border-bottom:none;
}
vcl-spinedit input[type=number] {
    text-align:center;
    width:40px;
}

vcl-spinedit vcl-button.less {
    order:1;
    border-radius:1em 0px 0px 1em;
}   
vcl-spinedit vcl-button.more {
    order:3;
    border-radius:0px 1em 1em 0px;
}
vcl-spinedit vcl-button {
    width:20px;
    background: silver;
    border:none;
    font:12px segoe ui;
    color:white;    
}
vcl-spinedit vcl-button:hover {
    background: gray;
}