#payment-account-types {
    width:100%;
    max-width:1000px;
    margin:20px auto;

    border-collapse:separate;
    border-spacing:0;

    font-family:Arial, sans-serif;
    font-size:14px;

    background:var(--bg-panel);
    color:var(--text-main);

    border:1px solid rgba(255,255,255,0.14);
    border-radius:10px;

    box-shadow:0 2px 4px rgba(0,0,0,0.05);
    overflow:hidden;
}

/* internal grid */

#payment-account-types th,
#payment-account-types td {
    text-align:center;
    padding:12px 14px;
    vertical-align:middle;
    word-break:break-word;
}

#payment-account-types th {
    position:relative;
    background: var(--bg-hover);
    font-weight: bold;
    letter-spacing:0.3px;
}

#payment-account-types th:first-child,
#payment-account-types td:first-child {
    min-width: 120px;
    max-width: 220px;
    white-space: normal;
    word-break: break-word;
}

#payment-account-types th:not(:first-child),
#payment-account-types td:not(:first-child) {
    min-width: 120px;
    word-break: keep-all;
    font-size:15px;
    letter-spacing:0.3px;
}

#payment-account-types th:nth-child(2),
#payment-account-types td:nth-child(2) {
    min-width: 100px;
    max-width: 160px;
    word-break: normal;
}

#payment-account-types th:not(:first-child)::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:var(--border-subtle);
}

#payment-account-types th.active-account-type::before {
    background:#4caf50;
}

#payment-account-types .active-account-type {
    background-color: lightgreen !important;
    font-weight: bold;
    color: #2d662d;
}

#payment-account-types .new-account-type {
    background-color: orange !important;
    font-weight: bold;
    color: #663c00;
}

#payment-account-types i.fa-check {
    color: green;
    font-size: 16px;
}

#payment-account-types i.fa-remove {
    color: red;
    font-size: 16px;
}

#payment-account-types .fa-check, #Team-Info .fa-check {
    color: green;
}

#payment-account-types .fa-remove, #Team-Info .fa-remove {
    color: red;
}

#payment-account-types tr:hover {
    background:var(--bg-hover);
}

#payment-account-types th{
    font-weight:600;
}

#payment-account-types tr:nth-child(even) {
    background: var(--bg-hover);
}

#payment-account-types th.active-account-type {
    box-shadow:0 0 0 2px #4caf50 inset;
}

#payment-account-types th.active-account-type,
#payment-account-types th.active-account-type ~ td {
    background:color-mix(in srgb, #4caf50 18%, transparent);
}

#payment-account-types tr:hover td {
    background:var(--bg-hover);
}

@media (max-width: 768px) {
    .fc-toolbar.fc-header-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

    .fc-toolbar .fc-left, .fc-toolbar .fc-right {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    .fc-toolbar .fc-center {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
    }

    #payment-account-types {
        font-size: 12px;
    }

    #payment-account-types th,
    #payment-account-types td {
        padding: 8px 6px;
    }

    #payment-interval-wrapper {
        flex-direction: column;
    }
}