.promocode-list-placeholder {
    padding: 32px;

    text-align: center;

    color: #bbb;
}

.promocode-list .details {
    margin: 8px 0;
    padding-left: 36px;
}

.promocode-list [data-status='activated'] .details {
    color: #9b9b9b;
}

.promocode-list .status-badge {
    position: relative;

    margin-top: -3px;
    padding: 3px 0 0 36px;
}

.promocode-list .status-badge::before {
    position: absolute;
    top: 0;
    left: 0;

    display: inline-block;

    width: 24px;
    height: 24px;

    content: '';
}

.promocode-list [data-status='activated'] .status-badge::before {
    background: url('../../../static/i/status-check.v2.svg') 0 2px/24px no-repeat;
}

.promocode-list table {
    width: 100%;
    margin: 18px 0;

    border-collapse: collapse;

    border: none;
}

.promocode-list table th,
.promocode-list table td {
    padding: 14px 24px 14px 0;

    text-align: start;
    vertical-align: top;

    color: #bbb;
}

.promocode-list table tr[data-status='activated'] th,
.promocode-list table tr[data-status='activated'] td {
    color: #000;
}
