/* EVC Token Wallet — front-end */

.evc-tw-balance p {
    margin: 0;
}

.evc-tw-spend {
    margin: 1em 0;
}

.evc-tw-btn {
    display: inline-block;
    padding: .7em 1.4em;
    border: 0;
    border-radius: 4px;
    background: #2271b1;
    color: #fff;
    font-size: 1em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
}

.evc-tw-btn:hover,
.evc-tw-btn:focus {
    background: #135e96;
    color: #fff;
}

.evc-tw-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

.evc-tw-btn--success {
    background: #00a32a;
}

.evc-tw-btn--success:hover,
.evc-tw-btn--success:focus {
    background: #008a20;
}

.evc-tw-spend__meta {
    margin: .5em 0 0;
    font-size: .875em;
    color: #646970;
}

.evc-tw-spend__warn,
.evc-tw-spend__msg.is-error {
    color: #b32d2e;
}

.evc-tw-history {
    width: 100%;
    border-collapse: collapse;
}

.evc-tw-history th,
.evc-tw-history td {
    padding: .5em .6em;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
}

.evc-tw-history .evc-tw-neg { color: #b32d2e; }
.evc-tw-history .evc-tw-pos { color: #007017; }

@media screen and (max-width: 600px) {
    .evc-tw-history thead {
        display: none;
    }

    .evc-tw-history,
    .evc-tw-history tbody,
    .evc-tw-history tr,
    .evc-tw-history td {
        display: block;
        width: auto;
    }

    .evc-tw-history tr {
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        margin-bottom: .6em;
        padding: .4em .6em;
    }

    .evc-tw-history td {
        display: flex;
        justify-content: space-between;
        gap: 1em;
        border-bottom: 0;
        padding: .3em 0;
        text-align: right;
    }

    .evc-tw-history td::before {
        content: attr(data-label);
        font-weight: 600;
        text-align: left;
    }
}