﻿body, html{
    height:100%;
    box-sizing: border-box;
    margin:0px; 
    padding:0px;
}

#jqxSplitterLeft{
    margin-left:auto;
    margin-right:auto;
}

#testArea{
    width:100%;
    height:100%;
    display:flex; 
    align-items:center; 
    justify-content:center;
    position:relative;
}

#codePreview{
    margin:10px;
}

jqx-scroll-bar {
    width:200px;
    height:20px;
}

jqx-scroll-bar[orientation="vertical"] {
    width:20px;
    height:200px;
}

jqx-progress-bar,
jqx-slider{
    width:200px;
    height:50px;
}

jqx-list-box{
    width:200px;
    height:400px;
}

#testArea>jqx-item{
    background-color:lightblue;
    color:lightblue;
    width:200px;
    height:50px;
}

#testArea>jqx-led{
    width:200px;
    height:200px;
}

#testArea>jqx-button,
#testArea>jqx-toggle-button,
#testArea>jqx-repeat-button{
    width:200px;
    height:30px;
    background-color:lightblue;
}

.non-editable-cell{
    background-color:aliceblue;
    color:#aaa;
}

.css-property{
    color:indianred;
}

.jqx-grid-cell-hover.css-property,
.jqx-grid-cell-selected.css-property {
    color: white;
}

.code-preview-tag-name{
    font-weight:bold;
}

.code-preview-attribute-name{
    color:orange;
}

#menu {
    width: 100%;
    height: 90%;
}

#menu .jqx-items-inner-container{
    background-color:#60aad2;
}

#menu jqx-item,
#menu jqx-item div{
    cursor:pointer!important;
    color:white;
    font-size:12px;
    border-radius:5px;
    margin:0px 5px 0px 2px;
}

#menu jqx-item.hovered{
    background-color:#449bca;
}

#menu jqx-item.jqx-header-item.hovered{
    background-color:inherit;
}

#menu jqx-item.jqx-header-item .jqx-item-container{
    color:#1f83bb;
    font-weight:bold;
    font-style:italic;
    font-size:16px;
    width:50px;
}

#menu jqx-item[selected]{
    background-color:#004a73;
}

#toggleMenuSorting{
    width:100%; 
    height:10%; 
	padding-bottom:30px;
	padding-left:5%;
    background-color:#60aad2; 
    color:black;
	display:flex;
	justify-content:flex-end;
	align-content:flex-end;
	flex-direction: column;
}

#CSSVarSupport{
	color:white;
	background-color:red;
	border-radius:50%;
	display:inline-block;
	font-size:10px;
	padding: 0px 5px 0px 5px;
}

#CSSVarSupport.supported{
	background-color:green;
}