body {
    background-color: #dddddd;
    margin: 0px;
    overflow: hidden;
}

.dg {
    font-family: Monospace;
    font-weight: bold;
    color: #000;
    /* text-shadow: 0 -1px 0 #ccc; */
    text-shadow: none;
    font: 12px Arial, Helvetica, sans-serif;
}

.dg .a {
    margin-right: 0px;
}


.dg .cr.boolean {
	background-color: #eee;
	border-left-color: #8F8F9D;
	border-bottom: 1px solid #8F8F9D;
	opacity: 0.95;
}

.dg .cr.boolean:hover {
	background-color: #ccc;
}

.dg .cr.boolean .c {
	width: 10%;
}

.dg .cr.boolean .property-name {
	width: 89%;
	float: right;
	line-height: 27px;
}
.dg .cr.number {
    background-color: #eee;
    border-left-color: #8F8F9D;
    border-bottom: 1px solid #8F8F9D;
    height: auto;
    opacity: 0.95;
    vertical-align: middle;
}

.dg .c .slider {
    background-color: #ccc;
}

.dg .cr.function {
    background-color: #ccc;
}

.dg .c .slider:hover {
    background-color: #bbb;
}
.dg .cr.number input[type="text"] {
    color: #000;
    background-color: #ccc;
    border: 1px solid #8F8F9D;
}

.dg .c .slider .slider-fg {
    background-color: #8F8F9D;
}

.dg .c .slider:hover .slider-fg {
    background-color: hsl(240, 7%, 49%);
}

/* .dg .cr.number .property-name {
    width:10%;
} */
/* .dg .cr.number .c {
    width:90%;
} */
.dg .cr.number .c input {
    width:15%;
}
.dg .cr.number .slider {
    width:80%;
}

.dg .cr.string {
	background-color: #eee;
	border-left-color: #aaa;
	border-bottom: 1px solid #aaa;
	height: auto;
	line-height: 20px;
	opacity: 0.95;
}
.dg .cr.string .property-name {
	width: 100%;
	float: left;
	padding-top: 4px;
	padding-bottom: 4px;
}

.dg .cr.string .property-name p {
	margin-top: 0px;
	margin-bottom: 0px;
	/* width: 100%;
	border: 1px solid black;
	border-collapse: collapse; */
}
.dg .cr.string .property-name table {
	width: 100%;
	border: 1px solid black;
	border-collapse: collapse;
}
.dg .cr.string .property-name th, td {
	border: 1px solid black;
	text-align: center;
}
.dg .cr.string .property-name input[type="text"] {
    width:20%;
    margin-left: 3px;
    color: black;
    /* margin-right: 5px; */
}
.invalidInputNumber{
    background-color: red;
}

.dg li .cr.color {
	background-color: #eee;
	border-bottom: 1px solid #8F8F9D;
}

.dg li.title {
    background-color: #ddd;
    height: auto;
    line-height: 25px;
    background-image: url("../images/arrow-down.png");
    border-bottom: 1px solid #aaa;
    border-left: 3px solid #aaa;
    opacity: 0.95;
}

.dg .closed li.title {
    background-image: url("../images/arrow-right.png");
}



.dg.main .close-button {
    background-color: #ccc;
    color: #000;
    text-shadow: 0 -1px 0 #ccc;
}

.dg.main .close-button:hover {
    background-color: #aaa;
    color: #000;
    text-shadow: 0 -1px 0 #aaa;
}