.grid-container{
    display:table;
    table-layout:fixed;
    border-collapse:collapse;
    width:100%;
}

.grid-item{
    display:table-cell;
    padding:0px 2px 0px 2px;
}

.df-green{
    color:yellow;
    background-color:#003600;
    border:1px solid white;
}

.df-green td[data-can-edit=true],
.df-green td[data-can-edit=true] input,
.df-green td[data-can-edit=true] textarea,
.df-green td[data-can-edit=true] select {
    font-size: 14px;
    line-height: 16px;
    color: #f0f8ff;
    background-color: #333333;
    border: 0px;
    outline: none;
    width: 100%;
}

.df-green td[data-can-edit=false],
.df-green td[data-can-edit=false] input,
.df-green td[data-can-edit=false] textarea,
.df-green td[data-can-edit=false] select {
    font-size: 14px;
    line-height: 16px;
    color: #f0f8ff;
    background-color: #335533;
    border: 0px;
    outline: none;
    width: 100%;
}


.df-green input[type="date"]::-webkit-calendar-picker-indicator{
    cursor:pointer;
    filter:invert(1);
}

.df-green td[data-computed-val=true] {
    font-size: 14px;
    line-height: 16px;
    color: #00ffff;
    background-color: #111166;
    border: 1px solid #009600;
    outline: none;
    width: 100%;
}


.df-green td[data-fcase="u"],
.df-green td[data-fcase="u"] input,
.df-green td[data-fcase="u"] textarea{
        text-transform:uppercase;
}

.df-green td[data-fcase="l"],
.df-green td[data-fcase="l"] input,
.df-green td[data-fcase="l"] textarea {
    text-transform: lowercase;
}

.df-green td[data-can-edit=true],
.df-green td[data-can-edit=true] input:focus,
.df-green td[data-can-edit=true] textarea:focus,
.df-green td[data-can-edit=true] select:focus {
    outline: none;
    background-color: #111111
}

.df-green i {
    width: 10%;
    cursor: pointer;
    font-size: 16px;
    display: inline-block;
}

.df-green th, .df-green td{
    padding-top:0px;
    padding-bottom:0px;
    border:1px solid #009600;
    overflow:hidden;
}

.df-green td[data-can-edit=true] {
    cursor: pointer;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #f0f8ff;
    background-color: #333333;
    border: 1px solid #009600;
    overflow: hidden;
}

.df-green td[data-fieldtype="Text"]{
    white-space:pre-wrap;
}
.df-green td[contenteditable=true]:focus,
.df-green td[data-can-edit=true]:focus-within,
.df-green td[data-fieldtype="Select"]:focus-within,
.df-green td[data-fieldtype="SelectKey"]:focus-within,
.df-green td[data-fieldtype="Data"]:focus-within {
    outline: none;
    background-color: #111111;
}

.layout-div {
    border-radius: 3px;
    background-color: transparent;
    border: 1px solid #009600;
    overflow: hidden;
}

.layout-table{
    color:yellow;
    width:100%;
    font-size:14px;
    line-height:16px;
    border:1px solid yellow;
    table-layout:fixed;
    overflow:hidden;
}

.layout-table th, layout-table td {
    padding-top: 0px;
    padding-bottom: 0px;
    border: 1px solid yellow;
    overflow: hidden;
    word-wrap: break-word;
}

.layout-table tr:not(:first-child) td:not(:first-child) {
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    padding: 2px;
}

.layout-table td:first-child {
    text-align: center;
    vertical-align: middle;
    color: #ffff00;
    cursor: pointer;
    width: 20px;
    padding: 0px;
    marging 0px;
}

.layout-hide {
    display:none;
}

.layout-selected{
    background-color:#004800;
}

.layout-table tr:first-child {
    text-align: center;
    vertical-align: middle;
    color:#ffff00;
    cursor:pointer;
    height:6px;
    padding:0px;
    marging 0px;
}

.layout-row {
    text-align: center;
    vertical-align: middle;
    background-color: darkgreen;
    cursor: pointer;
    padding: 0px;
    width: 20px;
}

.layout-col {
    text-align: center;
    vertical-align: middle;
    background-color: darkgreen;
    cursor:pointer;
    padding: 2px;
}

.layout-empty {
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border-radius: 3px;
    color: #666666;
    background-color: transparent;
    border: 1px solid #666666;
    margin: 2px;
    width: 90%;
    height: 100%;
}

.layout-label {
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border-radius: 3px;
    color: #ffff00;
    background: #444400;
    border: 1px solid #aaaa00;
    margin: 2px;
    width: 90%;
    height: 100%;
}

.layout-data {
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border-radius: 3px;
    color: #00ffff;
    background: #004444;
    border: 1px solid #00aaaa;
    margin: 2px;
    width: 90%;
    height: 100%;
}

.layout-button {
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    border-radius: 3px;
    color: #ffff00;
    background: #440044;
    border: 1px solid #00aaaa;
    margin: 2px;
    width: 90%;
    height: 100%;
}