.sxs-odt {
    text-align: start;
    margin-left: auto;
    margin-right: auto;

    @include lg-wmin {
        width: 90%;
    }

    @include xl-wmin {
        width: 70%;
    }

    &__num {
        width: fit-content;
        margin: 0 auto $spacing1 * .75;
        padding: $spacing2 * 1.25;
        font-size: $text-18;
        font-weight: 700;
        border-radius: 5px;
        background-color: $secondaryClear;
        text-align: center;
        color: #FFF;
    }

    &__tbl-wrp0 {
        overflow-x: auto;
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        margin-bottom: $spacing2;
    }

    &__tbl {
        display: block;
        table-layout: fixed;
        border-collapse: collapse;
        width: 100%;
        min-width: calc(340px + 10rem + 40ch);

        @include sm-wmin {
            min-width: calc(340px + 10rem + 30ch);
        }

        &-head {
            display: flex;
            width: 100%;
            margin-bottom: $spacing2;
            background-color: $primaryClear;
            border-radius: 3px;
            color: $duller;

            th {
                padding: $spacing2;
                font-size: $text-14;
                font-weight: 600;
                text-transform: uppercase;
                line-height: 1.2;
            }
        }

        &-bod {
            display: flex;
            flex-direction: column;
        }

        &-row {
            display: flex;
            width: 100%;

            &--bod {
                display: flex;
                border-radius: 3px;
                background-color: $accentClear3;

                &:not(:last-child) {
                    margin-bottom: $spacing2;
                }
            }
        }

        &-dat {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: $spacing2 * 1.5;
            font-size: $text-15;
            text-align: center;

            &--prod {
                justify-content: flex-start;
            }
        }
    }

    &__det {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap-reverse;
    }

    &__bill {
        &-tit {
            font-size: $text-20;
            font-weight: 800;
        }

        &-row {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            font-size: $text-15;
            padding: $spacing2 * .75 0;

            span:first-child {
                flex: 0 0 45%;
                width: 45%;
                max-width: 45%;
            }

            span:last-child {
                flex: 0 0 55%;
                width: 55%;
                max-width: 55%;
            }

            span:not(:last-child) {
                font-weight: 600;
            }
        }
    }

    &__prcs {
        height: 100%;
        font-size: $text-15;
        font-weight: 600;
        color: $duller;
        --sus-f-gtt: 1rem;

        &-con0 {
            width: 100%;
            height: 100%;
            padding: $spacing2;
            background-color: $primaryClear;
            border-radius: 3px;
        }

        &-row {
            display: flex;
            align-items: center;
            padding: $spacing2 * .75 0;
            line-height: 1;
        }

        &-prc {
            text-align: end;

            &--ht {
                font-size: $text-18;
            }
        }
    }
}