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

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


.h-df{
    height:90% !important;
}

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

.holders {
    color: yellow;
    border: 1px solid white;
}

.multi-cusip, .df-green table {
    color: yellow;
    background-color: transparent;
    width: 100%;
    font-size: 14px;
    line-height: 16px;
    border: 1px solid #009600;
    table-layout: fixed;
    overflow: hidden;
}

.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 {
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    color: #F0F8FF;
    background-color: #333333;
    border: 0px;
    outline: none;
    width: 100%;
}

.multi-cusip th, .multi-cusip-ro th, .holders th {
    text-align: center;
    background-color: #480000;
}

.multi-cusip td,
.multi-cusip td input:read-write {
    cursor: pointer;
    font-size: 14px;
    line-height: 16px;
    color: #F0F8FF;
    background-color: #333333;
    border: 0px;
    outline: none;
    width: 100%;
}

.multi-cusip-ro td,
.multi-cusip-ro td input,
.multi-cusip td input:read-only {
    text-transform: uppercase;
    font-size: 14px;
    line-height: 16px;
    color: #F0F8FF;
    background-color: #335533;
    border: 0px;
    outline: none;
    width: 100%;
}

.multi-cusip td:last-child, .multi-cusip tr:not([data-changetype="add"]) td:first-child {
    background-color: #335533;
}

.multi-cusip tr:not([data-changetype="add"]) td:not(:first-child,:last-child):focus-within,
.multi-cusip tr[data-changetype="add"] td:not(:last-child):focus-within,
.multi-cusip td input:read-write:focus {
    outline: none;
    background-color: #111111;
}

.multi-cusip button {
    font-size: 10px;
}

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

.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 div[data-computed-val="true"],
.df-green td[data-fieldtype="costnewcusip"],
.df-green td[data-fieldtype="costorigcusip"] {
    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[data-can-edit="false"] {
    padding-top: 0px;
    padding-bottom: 0px;
    color: #F0F8FF;
    background-color: #335533;
    border: 1px solid #009600;
    overflow: hidden;
}

.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="Date"]:focus-within {
    outline: none;
    background-color: #111111;
}

/* Layout Designer */
.layout-div {
    border-radius: 3px;
    background: transparent;
    border: 1px solid red;
}

.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;
    margin: 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;
    margin: 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: 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;
    background: #444400;
    color: #ffff00;
    border: 1px solid #aaaa00;
    margin: 2px;
    width: 90%;
    height: 100%;
}

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

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