/* ================================================================
   TPMT Contacts — Frontend + Admin styles
   ================================================================ */

/* ── Shared: initials fallback avatar ─────────────────────── */
.tnb-ct-initials {
 width: 90px;
 height: 90px;
 border-radius: 50%;
 background: var(--c-accent, #e63946);
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
}
.tnb-ct-initials span {
 color: #fff;
 font-size: 2rem;
 font-weight: 700;
 line-height: 1;
 letter-spacing: -.02em;
}
.tnb-ct-initials--sm {
 width: 40px;
 height: 40px;
}
.tnb-ct-initials--sm span {
 font-size: 1rem;
}

/* ── Shared: email link ────────────────────────────────────── */
.tnb-ct-email {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: .78rem;
 color: inherit !important;
 text-decoration: none !important;
 font-weight: 500;
 border-radius: 20px;
 padding: 3px 10px 3px 7px;
 border: 1px solid currentColor;
 opacity: .7;
 transition: opacity .15s;
 word-break: break-all;
 margin-top: 4px;
}
.tnb-ct-email::before {
 content: '';
 display: inline-block;
 width: 13px;
 height: 13px;
 flex-shrink: 0;
 background-color: currentColor;
 -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4zm2 0v.01L10 9l6-4.99V4H4zm0 2.53V16h12V6.53l-5.6 4.67a.75.75 0 0 1-.96 0L4 6.53z'/%3E%3C/svg%3E") no-repeat center / contain;
 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4zm2 0v.01L10 9l6-4.99V4H4zm0 2.53V16h12V6.53l-5.6 4.67a.75.75 0 0 1-.96 0L4 6.53z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.tnb-ct-email:hover {
 opacity: 1 !important;
 text-decoration: none !important;
}

/* ── Card layout ─────────────────────────────────────────── */
.tnb-ct-cards {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
 gap: 24px;
}
.tnb-ct-card {
 background: var(--c-white, #fff);
 border-radius: var(--r-lg, 6px);
 box-shadow: var(--sh, 0 2px 10px rgba(0,0,0,.08));
 border: 1px solid var(--c-border, #e2e2e2);
 padding: 32px 20px 24px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 transition: transform var(--tr, .18s ease), box-shadow var(--tr, .18s ease);
 position: relative;
 overflow: hidden;
}
.tnb-ct-card::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 height: 3px;
 background: var(--c-accent, #e63946);
}
.tnb-ct-card:hover {
 transform: translateY(-4px);
 box-shadow: var(--sh-md, 0 6px 24px rgba(0,0,0,.12));
}
/* Clickable card/row link resets */
a.tnb-ct-card, a.tnb-ct-plain-row, a.tnb-ct-org-head, a.tnb-ct-org-card {
 text-decoration: none;
 color: inherit;
 cursor: pointer;
 display: block;
}
a.tnb-ct-card { display: flex; }
a.tnb-ct-plain-row { display: flex; }
a.tnb-ct-org-head, a.tnb-ct-org-card { display: flex; }
.tnb-ct-list-row--link { cursor: pointer; }
.tnb-ct-list-row--link:hover { background: var(--c-bg-soft, #f5f5f5); }
.tnb-ct-acc-link { display: inline-block; margin-top: 6px; font-size: .8rem; color: var(--c-accent, #e63946); text-decoration: underline; }
.tnb-ct-avatar {
 width: 90px;
 height: 90px;
 border-radius: 50%;
 overflow: hidden;
 margin-bottom: 16px;
 border: 3px solid var(--c-border, #e2e2e2);
 flex-shrink: 0;
}
.tnb-ct-avatar img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 object-position: top center;
 display: block;
}
.tnb-ct-card .tnb-ct-initials {
 margin-bottom: 16px;
}
.tnb-ct-info {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 4px;
 width: 100%;
}
.tnb-ct-name {
 font-size: 1rem;
 font-weight: 700;
 color: var(--c-dark, #141414);
 line-height: 1.3;
 font-family: var(--ff-heading, inherit);
}
.tnb-ct-pos {
 font-size: .72rem;
 color: var(--c-accent, #e63946);
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .06em;
}

/* ── Accordion layout ────────────────────────────────────── */
.tnb-ct-accordion {
 border: 1px solid var(--c-border, #e2e2e2);
 border-radius: var(--r-lg, 6px);
 overflow: hidden;
 background: var(--c-white, #fff);
}
.tnb-ct-acc-item + .tnb-ct-acc-item {
 border-top: 1px solid var(--c-border, #e2e2e2);
}
.tnb-ct-acc-head {
 width: 100%;
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 14px 18px;
 background: var(--c-white, #fff);
 border: none;
 cursor: pointer;
 text-align: left;
 transition: background var(--tr, .18s ease);
 font-family: inherit;
}
.tnb-ct-acc-head:hover {
 background: var(--c-bg, #f5f5f5);
}
.tnb-ct-acc-item.is-open > .tnb-ct-acc-head {
 background: var(--c-bg, #f5f5f5);
}
.tnb-ct-acc-avatar {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 object-fit: cover;
 object-position: top center;
 flex-shrink: 0;
 border: 2px solid var(--c-border, #e2e2e2);
}
.tnb-ct-acc-text {
 flex: 1;
 display: flex;
 flex-direction: column;
 gap: 2px;
 min-width: 0;
}
.tnb-ct-acc-text .tnb-ct-name {
 font-size: .95rem;
}
.tnb-ct-acc-text .tnb-ct-pos {
 font-size: .7rem;
}
.tnb-ct-acc-chevron {
 width: 24px;
 height: 24px;
 flex-shrink: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--c-mid, #555);
}
.tnb-ct-acc-item.is-open > .tnb-ct-acc-head .tnb-ct-acc-chevron {
 color: var(--c-accent, #e63946);
}
.tnb-ct-acc-chevron::after {
 content: '';
 display: block;
 border: 2px solid currentColor;
 border-left: 0;
 border-top: 0;
 width: 7px;
 height: 7px;
 transform: rotate(45deg) translate(-1px, -3px);
 transition: transform .2s ease;
}
.tnb-ct-acc-item.is-open > .tnb-ct-acc-head .tnb-ct-acc-chevron::after {
 transform: rotate(-135deg) translate(-1px, -3px);
}
.tnb-ct-acc-body {
 padding: 16px 20px 18px 76px;
 background: var(--c-bg, #f5f5f5);
 border-top: 1px solid var(--c-border, #e2e2e2);
}

/* ── Plain layout ────────────────────────────────────────── */
.tnb-ct-plain {
 display: flex;
 flex-direction: column;
}
.tnb-ct-plain-row {
 display: grid;
 grid-template-columns: 56px 1fr;
 align-items: center;
 gap: 16px;
 padding: 16px 0;
 border-bottom: 1px solid #e8e8e8;
}
.tnb-ct-plain-row:last-child {
 border-bottom: none;
}
.tnb-ct-plain-avatar {
 width: 52px;
 height: 52px;
 border-radius: 50%;
 object-fit: cover;
 object-position: top center;
 flex-shrink: 0;
 display: block;
}
.tnb-ct-plain-row .tnb-ct-initials--sm {
 width: 52px;
 height: 52px;
}
.tnb-ct-plain-row .tnb-ct-initials--sm span {
 font-size: 1.3rem;
}
.tnb-ct-plain-body {
 display: flex;
 flex-direction: column;
 gap: 2px;
}
.tnb-ct-plain-top {
 display: flex;
 align-items: baseline;
 flex-wrap: wrap;
 gap: 6px;
}
.tnb-ct-plain-text .tnb-ct-name {
 font-weight: 700;
 font-size: 1rem;
}
.tnb-ct-plain-text .tnb-ct-pos-sep {
 display: none;
}
.tnb-ct-plain-text .tnb-ct-pos {
 font-size: .75rem;
 color: #888;
 font-weight: 400;
}
.tnb-ct-plain-text .tnb-ct-email {
 margin-top: 0;
 font-size: .8rem;
 border: none;
 padding: 0;
 border-radius: 0;
 opacity: .7;
 background: none;
}
.tnb-ct-plain-text .tnb-ct-email::before {
 display: none;
}
.tnb-ct-plain-text .tnb-ct-email:hover {
 opacity: 1 !important;
}

/* ── Org (tree) layout ──────────────────────────────────── */
.tnb-ct-org {
 display: flex;
 flex-direction: column;
 align-items: center;
}
.tnb-ct-org-top {
 position: relative;
 padding-bottom: 36px;
}
.tnb-ct-org-top::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 2px;
 height: 36px;
 background: var(--c-border, #e2e2e2);
}
.tnb-ct-org-head {
 background: var(--c-white, #fff);
 border-radius: var(--r-lg, 6px);
 box-shadow: var(--sh-md, 0 6px 24px rgba(0,0,0,.12));
 padding: 32px 40px 26px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 min-width: 200px;
 position: relative;
 overflow: hidden;
}
.tnb-ct-org-head::before {
 content: '';
 position: absolute;
 top: 0; left: 0; right: 0;
 height: 4px;
 background: var(--c-accent, #e63946);
}
.tnb-ct-org-head .tnb-ct-name {
 font-size: 1.15rem;
}
.tnb-ct-avatar--lg {
 width: 110px;
 height: 110px;
 margin-bottom: 16px;
}
.tnb-ct-initials--lg {
 width: 110px;
 height: 110px;
 margin-bottom: 16px;
}
.tnb-ct-initials--lg span {
 font-size: 2.6rem;
}
.tnb-ct-org-tier {
 position: relative;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 20px;
 padding-top: 36px;
 width: 100%;
}
.tnb-ct-org-tier::before {
 content: '';
 position: absolute;
 top: 0;
 left: 10%;
 right: 10%;
 height: 2px;
 background: var(--c-border, #e2e2e2);
}
.tnb-ct-org-card {
 position: relative;
 background: var(--c-white, #fff);
 border-radius: var(--r-lg, 6px);
 box-shadow: var(--sh, 0 2px 10px rgba(0,0,0,.08));
 border: 1px solid var(--c-border, #e2e2e2);
 padding: 20px 20px 18px;
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 min-width: 150px;
 transition: transform var(--tr, .18s ease), box-shadow var(--tr, .18s ease);
}
.tnb-ct-org-card:hover {
 transform: translateY(-3px);
 box-shadow: var(--sh-md, 0 6px 24px rgba(0,0,0,.12));
}
.tnb-ct-org-card::before {
 content: '';
 position: absolute;
 top: -36px;
 left: 50%;
 transform: translateX(-50%);
 width: 2px;
 height: 36px;
 background: var(--c-border, #e2e2e2);
}
.tnb-ct-org-card .tnb-ct-avatar {
 width: 72px;
 height: 72px;
 margin-bottom: 10px;
}
.tnb-ct-org-card .tnb-ct-name {
 font-size: .9rem;
}
@media (max-width: 640px) {
 .tnb-ct-org-tier {
  flex-direction: column;
  align-items: center;
 }
 .tnb-ct-org-tier::before { display: none; }
 .tnb-ct-org-card::before { display: none; }
}

/* ── List layout ─────────────────────────────────────────── */
.tnb-ct-list {
 overflow-x: auto;
}
.tnb-ct-list-table {
 width: 100%;
 border-collapse: collapse;
 font-size: .9rem;
}
.tnb-ct-list-table thead tr {
 border-bottom: 2px solid var(--c-border, #e2e2e2);
}
.tnb-ct-list-table thead th {
 padding: 10px 14px 10px 0;
 font-size: .68rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .07em;
 color: var(--c-mid, #555);
 text-align: left;
}
.tnb-ct-list-table thead th:first-child {
 padding-left: 0;
}
.tnb-ct-list-row {
 border-bottom: 1px solid var(--c-border, #e2e2e2);
 transition: opacity .13s;
}
.tnb-ct-list-row:last-child {
 border-bottom: none;
}
.tnb-ct-list-row:hover {
 opacity: .8;
}
.tnb-ct-list-av {
 width: 56px;
 padding: 10px 12px 10px 0;
}
.tnb-ct-list-avatar {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 object-fit: cover;
 object-position: top center;
 border: 2px solid var(--c-border, #e2e2e2);
 display: block;
}
.tnb-ct-list-name {
 font-weight: 700;
 color: var(--c-dark, #141414);
 padding: 10px 14px 10px 0;
 font-family: var(--ff-heading, inherit);
}
.tnb-ct-list-pos {
 color: var(--c-accent, #e63946);
 padding: 10px 14px 10px 0;
 font-size: .72rem;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .05em;
}
.tnb-ct-list-email {
 padding: 10px 0;
}

/* ================================================================
   Admin styles
   ================================================================ */

/* ── Form layout containers ──────────────────────────────────── */

/* Strip any box the form plugin or theme adds around the form */
.tnb-ct-form-wrap,
.tnb-ct-form-wrap .wpcf7,
.tnb-ct-form-wrap form,
.tnb-ct-form-wrap .gform_wrapper,
.tnb-ct-form-wrap .wpforms-container {
 background: none !important;
 background-color: transparent !important;
 border: none !important;
 box-shadow: none !important;
 padding: 0 !important;
 margin: 0 !important;
 border-radius: 0 !important;
}

/* Form title */
.tnb-ct-form-wrap h3,
.tnb-ct-form-wrap h4 {
 font-family: var(--ff-heading, inherit);
 font-size: 1.15rem;
 color: var(--c-dark, #141414);
 margin: 0 0 20px !important;
 padding-bottom: 12px !important;
 border-bottom: 2px solid var(--c-accent, #e63946) !important;
}

/* Labels */
.tnb-ct-form-wrap label,
.tnb-ct-form-wrap .gfield_label,
.tnb-ct-form-wrap .wpforms-field-label {
 display: block !important;
 font-size: .8rem !important;
 font-weight: 700 !important;
 text-transform: uppercase !important;
 letter-spacing: .05em !important;
 color: var(--c-mid, #555) !important;
 margin-bottom: 6px !important;
}

/* Inputs, textarea, select */
.tnb-ct-form-wrap input[type=text],
.tnb-ct-form-wrap input[type=email],
.tnb-ct-form-wrap input[type=tel],
.tnb-ct-form-wrap input[type=url],
.tnb-ct-form-wrap input[type=number],
.tnb-ct-form-wrap select,
.tnb-ct-form-wrap textarea {
 width: 100% !important;
 box-sizing: border-box !important;
 padding: 11px 14px !important;
 border: 1.5px solid var(--c-border, #e2e2e2) !important;
 border-radius: var(--r, 3px) !important;
 background: var(--c-white, #fff) !important;
 color: var(--c-dark, #141414) !important;
 font-family: var(--ff-body, inherit) !important;
 font-size: .9rem !important;
 line-height: 1.5 !important;
 outline: none !important;
 box-shadow: none !important;
 transition: border-color var(--tr, .18s ease) !important;
 -webkit-appearance: none !important;
}
.tnb-ct-form-wrap input[type=text]:focus,
.tnb-ct-form-wrap input[type=email]:focus,
.tnb-ct-form-wrap input[type=tel]:focus,
.tnb-ct-form-wrap input[type=url]:focus,
.tnb-ct-form-wrap input[type=number]:focus,
.tnb-ct-form-wrap select:focus,
.tnb-ct-form-wrap textarea:focus {
 border-color: #999 !important;
 box-shadow: none !important;
}
.tnb-ct-form-wrap textarea {
 resize: vertical !important;
 min-height: 130px !important;
}

/* Field spacing */
.tnb-ct-form-wrap p,
.tnb-ct-form-wrap .gfield,
.tnb-ct-form-wrap .wpforms-field {
 margin-bottom: 18px !important;
}

/* Submit button */
.tnb-ct-form-wrap input[type=submit],
.tnb-ct-form-wrap button[type=submit],
.tnb-ct-form-wrap .wpcf7-submit,
.tnb-ct-form-wrap .gform_button,
.tnb-ct-form-wrap .wpforms-submit,
.tnb-ct-form-wrap .form-submit input,
.tnb-ct-form-wrap .submit input {
 display: inline-block !important;
 padding: 11px 28px !important;
 background: #333 !important;
 color: #fff !important;
 border: none !important;
 border-radius: var(--r, 3px) !important;
 font-family: inherit !important;
 font-size: .9rem !important;
 font-weight: 600 !important;
 cursor: pointer !important;
 box-shadow: none !important;
 transition: background .15s !important;
 -webkit-appearance: none !important;
}
.tnb-ct-form-wrap input[type=submit]:hover,
.tnb-ct-form-wrap button[type=submit]:hover,
.tnb-ct-form-wrap .wpcf7-submit:hover,
.tnb-ct-form-wrap .gform_button:hover,
.tnb-ct-form-wrap .wpforms-submit:hover,
.tnb-ct-form-wrap .form-submit input:hover {
 background: #111 !important;
}

/* CF7 validation */
.tnb-ct-form-wrap .wpcf7-not-valid {
 border-color: #c00 !important;
}
.tnb-ct-form-wrap .wpcf7-not-valid-tip {
 font-size: .75rem !important;
 color: #c00 !important;
 margin-top: 4px !important;
 display: block !important;
}
.tnb-ct-form-wrap .wpcf7-response-output {
 border-radius: var(--r, 3px) !important;
 padding: 10px 14px !important;
 font-size: .84rem !important;
 margin-top: 12px !important;
}

.tnb-ct-layout--side {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 48px;
 align-items: start;
}
.tnb-ct-layout--stack {
 display: flex;
 flex-direction: column;
 gap: 40px;
}
@media (max-width: 768px) {
 .tnb-ct-layout--side {
  grid-template-columns: 1fr;
 }
}

/* Entries builder */
.tnb-ct-entries-header {
 display: flex;
 align-items: baseline;
 gap: 10px;
 margin: 18px 0 10px;
 padding-bottom: 6px;
 border-bottom: 1px solid #e2e2e2;
}
.tnb-ct-entries-label {
 font-weight: 700;
 font-size: .78rem;
 text-transform: uppercase;
 letter-spacing: .07em;
 color: #555;
}
.tnb-ct-entries-hint {
 font-size: .75rem;
 color: #999;
}
.tnb-ct-entries-list {
 display: flex;
 flex-direction: column;
 gap: 8px;
 margin-bottom: 2px;
}
.tnb-ct-entry {
 display: grid;
 grid-template-columns: 96px 1fr 28px;
 gap: 12px;
 align-items: start;
 background: #fafafa;
 border: 1px solid #e2e2e2;
 border-left: 3px solid #e2e2e2;
 border-radius: 6px;
 padding: 12px;
 transition: border-left-color .15s;
}
.tnb-ct-entry:focus-within {
 border-left-color: #e63946;
 background: #fff;
}
.tnb-ct-entry-avatar-col {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 6px;
}
.tnb-ct-entry-av-preview {
 width: 70px;
 height: 70px;
 border-radius: 50%;
 overflow: hidden;
 border: 2px dashed #d4d4d4;
 background: #f5f5f5;
 display: flex;
 align-items: center;
 justify-content: center;
}
.tnb-ct-entry-av-preview img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 display: block;
}
.tnb-ct-av-placeholder {
 font-size: 1.8rem;
 color: #ccc;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
}
.tnb-ct-pick-av {
 font-size: .72rem !important;
 padding: 2px 7px !important;
 height: auto !important;
 white-space: nowrap;
}
.tnb-ct-clear-av {
 font-size: .7rem !important;
 color: #e63946 !important;
 cursor: pointer;
 border: none;
 background: none;
 padding: 0;
}
.tnb-ct-clear-av:hover {
 text-decoration: underline;
}
.tnb-ct-entry-fields {
 display: flex;
 flex-direction: column;
 gap: 7px;
}
.tnb-ct-entry-fields input {
 width: 100%;
 box-sizing: border-box;
}
.tnb-ct-remove-entry {
 background: none;
 border: 1px solid #e2e2e2;
 border-radius: 4px;
 width: 26px;
 height: 26px;
 cursor: pointer;
 font-size: 13px;
 color: #aaa;
 display: flex;
 align-items: center;
 justify-content: center;
 padding: 0;
 margin-top: 2px;
 flex-shrink: 0;
 transition: color .12s, border-color .12s;
}
.tnb-ct-remove-entry:hover {
 color: #e63946;
 border-color: #e63946;
}
.tnb-ct-add-wrap {
 margin: 6px 0 0;
}

/* Set card avatars strip */
.tnb-ct-set-card .tnb-gal-card-body {
 padding: 12px 14px 14px;
}
.tnb-ct-set-avatars {
 display: flex;
 align-items: center;
 padding: 14px 14px 0;
 min-height: 52px;
}
.tnb-ct-set-av {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 object-fit: cover;
 border: 2px solid #fff;
 margin-left: -8px;
 box-shadow: 0 0 0 1px #e2e2e2;
}
.tnb-ct-set-av:first-child {
 margin-left: 0;
}
.tnb-ct-set-av-init {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: #e63946;
 border: 2px solid #fff;
 margin-left: -8px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .72rem;
 font-weight: 700;
 color: #fff;
 box-shadow: 0 0 0 1px #e2e2e2;
}
.tnb-ct-set-av-init:first-child {
 margin-left: 0;
}
.tnb-ct-av-more {
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background: #e2e2e2;
 border: 2px solid #fff;
 margin-left: -8px;
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: .7rem;
 font-weight: 700;
 color: #666;
 box-shadow: 0 0 0 1px #e2e2e2;
}
.tnb-ct-set-no-av {
 height: 38px;
 display: flex;
 align-items: center;
 font-size: 1.5rem;
 color: #ccc;
}

/* Inline card form section */
.tnb-ct-card-form-section {
 border-top: 1px solid #e2e2e2;
 margin-top: 10px;
 padding-top: 10px;
}
.tnb-ct-card-form-header {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 10px;
}
.tnb-ct-card-form-label {
 font-size: .72rem;
 font-weight: 700;
 color: #888;
 text-transform: uppercase;
 letter-spacing: .06em;
}
.tnb-ct-form-enable-btn {
 font-size: .75rem !important;
 padding: 2px 10px !important;
 height: auto !important;
 color: #555 !important;
}
.tnb-ct-form-active-btn {
 font-size: .75rem !important;
 padding: 2px 10px !important;
 height: auto !important;
 background: #fff3f3 !important;
 border-color: #e63946 !important;
 color: #c0202c !important;
}
.tnb-ct-card-form-panel {
 margin-top: 10px;
 display: flex;
 flex-direction: column;
 gap: 7px;
}
.tnb-ct-sc-input {
 width: 100% !important;
 box-sizing: border-box;
 font-size: .82rem !important;
}
.tnb-ct-pos-sel {
 width: 100%;
 font-size: .82rem;
}
.tnb-ct-form-apply-row {
 display: flex;
 align-items: center;
 gap: 7px;
 flex-wrap: wrap;
}
.tnb-ct-form-apply-row .button {
 font-size: .78rem !important;
 padding: 3px 12px !important;
 height: auto !important;
}
.tnb-ct-form-disable-btn {
 color: #e63946 !important;
 border-color: #e63946 !important;
}
.tnb-ct-form-disable-btn:hover {
 background: #fff3f3 !important;
}
.tnb-ct-form-inline-msg {
 font-size: .76rem;
 font-style: italic;
}
.tnb-ct-form-inline-msg.tnb-save-msg--ok  { color: #1e8e3e; }
.tnb-ct-form-inline-msg.tnb-save-msg--err { color: #c00; }
.tnb-ct-pills {
 display: flex;
 gap: 5px;
 flex-wrap: wrap;
}
.tnb-ct-layout-pill {
 display: inline-block;
 background: #f0f0f0;
 color: #555;
 border-radius: 3px;
 padding: 2px 8px;
 font-size: .7rem;
 font-weight: 600;
 text-transform: capitalize;
}
.tnb-ct-form-pill {
 display: inline-block;
 background: #fff3f3;
 color: #c0202c;
 border-radius: 3px;
 padding: 2px 8px;
 font-size: .7rem;
 font-weight: 600;
}