table {
    width: 100%;
    font-size: 16px;
    text-align: left;
    border-spacing: 0;
    border-collapse: collapse;

    thead {
        th {
            height: 48px;
            font-weight: bold;
            border-color: $grey-2;
            border-width: 1px 0;
            border-style: solid;

            &:first-child {
                padding-left: 16px;
            }
        }
    }

    tbody {
        tr {
            td {
                background: $grey-4;
                height: 48px;
                border-color: $grey-2;
                border-width: 0 0 1px 0;
                border-style: solid;

                &:first-child {
                    padding-left: 16px;
                }
            }
        }
    }
}

table.tachonet-queue {
    width: 100%;
    font-size: 16px;
    border-collapse: separate;
    border-spacing: 0 0.5em;

    thead {
        th {
            min-height: 48px;
            border: none;
            vertical-align: bottom;
            padding-bottom: 0.5em;

            &:last-child {
                text-align: center;
            }
        }
    }

    tbody {
        tr {

            &.disabled {
                td {
                    background: $grey-4;
                }
            }

            &.urgent {
                td:first-child {
                    border-left-color: $mellow-red;
                }

                .bubble {
                    background: mix($mellow-red, white, 22%);
                }
            }

            &.waiting {
                td:first-child {
                    border-left-color: $warning;
                }

                .bubble {
                    background: mix($warning, white, 22%);
                }
            }

            &.parked {
                td:first-child {
                    border-left-color: $secondary;
                }

                .bubble {
                    background: mix($secondary, white, 22%);
                }
            }

            &.completed {
                td:first-child {
                    border-left-color: $success;
                }

                .bubble {
                    color: white;
                    background: $success;
                    &::before{
                        font-family: $icon-font;
                        content: '\e90a';
                    }
                }
            }

            td {
                background: white;
                border-width: 1px 0 2px 0;
                border-style: solid;
                border-color: $grey-2;

                &.transaction-type {
                    font-weight: bold;
                }
                
                &.tacho-number {
                    font-weight: bold;
                }

                &.status {
                    text-align: center;
                    font-weight: bold;

                    .bubble {
                        width: 32px;
                        height: 32px;
                        line-height: 34px;
                        border-radius: 16px;
                        display: inline-block;
                        padding-left: 1px;
                    }
                }


                &:first-child {
                    border-left-width: 6px;
                    border-top-left-radius: 4px;
                    border-bottom-left-radius: 4px;
                }

                &:last-child {
                    border-top-right-radius: 4px;
                    border-bottom-right-radius: 4px;
                    border-right: 1px solid $grey-2;
                }
            }
        }
    }
}