table.default {
    border-collapse: collapse;
    box-sizing: border-box;

    & caption {
        background: lightgray;
        border: 1px solid gray;
        padding-block: 4px;
    }

    & thead.header-only th {
        background: gray;
    }

    & th {
        color: white;
        padding-block: 6px;
        background: var(--main-bg-light);
        border: 1px solid var(--main-bg-light);
    }

    & th.accent {
        color: palegoldenrod;
    }

    & th, td {
        padding-left: 16px;
        padding-right: 12px;
        text-align: right;
    }  

    & td.text-left, th.text-left {
        text-align: left;
    }

    & th.center, td.center {
        padding-inline: 24px;
        text-align: center;
    }

    & th.no-border, td.no-border {
        border: none;
    }

    & td.border-bottom {
        border-bottom: 1px solid gray;
    }    

    & td.border-right {
        border-right: 1px solid gray;
    }        

    & td {
        padding-block: 4px;
        border: 1px solid gray;
    }

    & td input {
        border-radius: 4px;
        outline: none;
        border: 2px solid gray;
        height: 24px;
        width: 100px;
        text-align: right;
        padding-right: 12px;
    }

    & td input:disabled {
        background: gainsboro;
    }

    & td.trash {
        cursor: pointer;
    }

    & td.trash v-icon {
        width: 16px;
        color: var(--meco-red);            
    }  
}

table.result {
    
    border-collapse: collapse;
    margin-bottom: 50px;    
    position: relative;
    text-align: right;       

    
    &.modal {
        margin-top: 32px;
    }

    &.sticky {
        position: sticky;
        top: 0px;
        background: var(--page-bg-color);
        z-index: 2;
    }

    & tbody tr:nth-child(odd) {
        background: var(--page-bg-color);
    }    


    & tbody tr:nth-child(even) {
        background: whitesmoke;
    }
    
    & th, td {
        padding-inline: 10px;
        padding-block: 5px;
        box-sizing: border-box;
    }    
    
    & th {
        border-bottom: 3px solid gray;        
    }
    
    & td {
        border: 1px solid gray;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        user-select: none;
        cursor: pointer;
    }

    th.left, td.left {
        text-align: left;
    }

    th.right, td.right {
        text-align: right;
    }

    & td.overflow, td.exceeded {
        background: var(--meco-red);
        color: white;
    }    
    
    & td.invalid {
        color: var(--meco-red);
    }

    & th.svg, td.svg {
        vertical-align: middle;
        width: 400px;
    }
    
    & td.svg svg {
        display: block;
    }       

    & th.number, td.number {
        text-align: right;
        width: 100px;
    }     
}

table.summary {
    
    border-collapse: collapse;
    margin-bottom: 50px;    
    position: relative;
    text-align: right;       

    &.detail {
        width: 800px;
    }    
    
    &.modal {
        margin-top: 32px;
    }

    &.sticky {
        position: sticky;
        top: 0px;
        background: var(--page-bg-color);
        z-index: 2;
    }

    & tbody tr:nth-child(odd) {
        background: var(--page-bg-color);
    }    


    & tbody tr:nth-child(even) {
        background: whitesmoke;
    }
    
    & th, td {
        padding-inline: 10px;
        padding-block: 5px;
        box-sizing: border-box;
    }    
    
    & th {
        border-bottom: 3px solid gray;        
    }
    
    & td {
        border: 1px solid gray;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
        user-select: none;
        cursor: pointer;
    }

    th.left, td.left {
        text-align: left;
    }

    th.right, td.right {
        text-align: right;
    }

    & td.overflow, td.exceeded {
        background: var(--meco-red);
        color: white;
    }    
    
    & td.invalid {
        color: var(--meco-red);
    }

    & th.svg, td.svg {
        vertical-align: middle;
        width: 400px;
    }
    
    & td.svg svg {
        display: block;
    }       

    & th.number, td.number {
        text-align: right;
        width: 100px;
    }     
}