.common-table-wrap {
    overflow: hidden;
    border: 1px solid #D3DEE1;
    border-radius: 4px 4px 0 0;
}

.common-table {
    width: 100%;
    border-collapse: collapse;
    font: 400 1.6rem/1.8rem Roboto;
}
.common-table a {
    color: #89ABC3
}

.common-table a.button {
    color: #FFFFFF;
}

.common-table .expired {
    color: #C3C3C3;
    font-style: italic;
}

.common-table > * > tr > * {
    padding: var(--tiny-gap) var(--big-gap);
    text-align: left;
}

.common-table > * > tr > .text-align-right {
    text-align: right;
}

.common-table > thead > tr > * {
    background-color: #F5F5F5;
    font-weight: 700;
}

.common-table > tfoot > tr > * {
    padding: var(--small-gap) var(--big-gap);
    background-color: #F5F5F5;
    text-align: left;
}

.common-table > tbody > tr > * {
    background-color: #fff;
}

.common-table > tbody > tr > td {
    border-top: 1px solid #D3DEE1;
}

.counter-table > * > tr > td, .counter-table > * > tr > th {
    padding: 3px;
    /*border: 1px solid #C3C8D6;*/
}

.counter-table > thead > tr > th {
    background: #F3F1F6;
}

.counter-table > tbody > tr > td:first-child {
    background: #F3F1F6;
}

@media (max-width: 767px) {
    .common-table-wrap {
        overflow: auto;
    }

    .common-table {
        font: 400 1.1rem/1.3rem Roboto;
    }

    .common-table > * > tr > * {
        padding: var(--tiny-gap) !important;
        text-align: left;
    }

}