/*******************************************************************************
* .grid-
*******************************************************************************/

.grid-Table {
    display: grid;
    grid-template-columns: max-content 20px max-content 1fr;
    align-items: baseline;
}

.grid-Table > .grid-Row {
    display: contents;
}

.grid-Table .grid-Ignore {
    display: contents;
}

.grid-Table > .grid-Row > *, .grid-Table > .grid-Row .grid-Ignore > * {
    margin-top: 0;
    margin-bottom: 15px;
}

.grid-Table > .grid-Row > *:first-child, .grid-Table > .grid-Row .grid-Ignore > *:first-child {
    margin-top: 10px;
}

.grid-Table .grid-LabelCell {
    grid-column: 1; 
}

.grid-Table .grid-UniqueCell {
    grid-column: 1 / span 4; 
}

.grid-Table .grid-ColonCell {
    grid-column: 2; 
}

.grid-Table .grid-InputCell {
    grid-column: 3 / span 2;
}

.grid-Table .grid-StartAlign {
    align-self: start;
    margin-top: 10px;
}


/*******************************************************************************
* .grid-Subtable
*******************************************************************************/


.grid-Table.grid-Subtable {
    font-size: small;
}

.grid-Table.grid-Subtable .CodeMirror {
    font-size: medium;
}

.grid-Table.grid-Subtable > .grid-Row > * {
    margin-bottom: 10px;
}


/*******************************************************************************
* form elements
*******************************************************************************/

.grid-InputCell, .grid-UniqueCell {
    overflow: hidden;
}

.grid-InputCell > select {
    max-width: calc(100% - 10px);
    display: block;
}

.grid-InputCell > input[type="text"] {
    max-width: calc(100% - 10px);
}

.grid-InputCell > textarea {
    max-width: calc(100% - 10px);
    vertical-align: top;
}

.grid-UniqueCell > textarea {
    max-width: calc(100% - 10px);
    display: block;
}


/*******************************************************************************
* .grid-choice-
*******************************************************************************/

.grid-choice-DetailCell {
    grid-column: 4;
}

.grid-choice-Fieldset {
    border: none;
    background: none;
    margin: 0;
    padding: 0;
}

.grid-choice-InputCell {
    grid-column: 3;
    margin-right: 3px;
    position: relative;
    top: 1px;
}

.grid-choice-LabelCell {
    grid-column: 4; 
    font-size: smaller;
    line-height: 1.2;
}

.grid-choice-Legend {
    font-size: inherit;
    font-weight: inherit;
}


/*******************************************************************************
* @media
*******************************************************************************/

@media (max-width: 480px) {
    
    .grid-Table {
        display: block;
    }

    .grid-Table > .grid-Row {
        display: block;
        margin-top: 15px;
    }
    
    .grid-Table .grid-Ignore {
        display: block;
    }
    
    .grid-Table .grid-InputCell {
        display: block;
    }
    
    .grid-Table > .grid-Row > *, .grid-Table > .grid-Row .grid-Ignore > * {
        margin-top: 0;
        margin-bottom: 0;
    }

    .grid-Table > .grid-Row > *:first-child, .grid-Table > .grid-Row .grid-Ignore > *:first-child {
        margin-top: 0;
    }
    
    .grid-Table .grid-Ignore.grid-choice-Content {
        display: grid;
        grid-template-columns: max-content 1fr;
        align-items: baseline;
        margin-left: 10px;
        margin-top: 5px;
    }
    
    .grid-choice-InputCell {
        grid-column: 1;
    }

    .grid-choice-LabelCell {
        grid-column: 2; 
    }
}

