/**
 * forms-list-refine.css - a UI/UX refinement pass for the "All Forms" (Forms list) screen.
 *
 * Authority (user direction, 2026-09-02): color stays violet, but the
 * design should match the reference product's own UI/UX exactly. So the
 * component anatomy below is measured from that product's own shipped
 * output: card = #fff, radius 8px, shadow 0 1px 3px
 * rgba(30,31,33,.08), padding 10px 24px, transparent rows, thead #1e1f21 /
 * 600 with 0/8px padding, row dividers #ececec; Element controls (40px
 * inputs, border #dadbdd, radius 7px, 14px type); the Element switch (40x20
 * pill, 16px thumb, on = #00b27f with the adjacent active label in the
 * primary color); the gray #f2f2f2 shortcode chip; hover-revealed
 * row actions with 1px #ddd separators. Every *color* accent stays the
 * ChargeForms violet scale (#6c4ef5 primary, #5a3ee0 hover) where the reference product
 * uses its blue, exactly like the Global Settings pass before it.
 *
 * This deliberately supersedes the .dc.html handoff numbers (uppercase 11px
 * gray headers, #fafbfd zebra rows, green toggle labels, flat bordered card)
 * where the two disagree - the reference product is the UI/UX authority now.
 *
 * Loaded last, only on page=chargeforms (admin/class-menu.php), so every
 * rule here beats admin.css / design-tokens-screens.css without touching the
 * Entries/Reports/Builder screens. The toolbar and pagination were moved out
 * of .chargeforms-list-card in class-forms-list-page.php to mirror the reference product's
 * anatomy: search/filters float on the gray page canvas, only the table sits
 * inside the white padded card.
 */

/* ------------------------------------------------------------------ *
 * Page canvas - the reference product's admin pages paint the whole body #f2f2f2 and let
 * the white .ff_table card float on it; this screen matched that
 * intentionally (see this file's own header comment). Superseded by a
 * later, repeated, explicit request that the whole plugin read as fully
 * white, not off-white — this was the one screen still holding out
 * against it, since it had its own dedicated, `!important`-flagged rule
 * nothing else in the "make it white" passes ever touched. One body
 * class, added by Forms_List_Page::admin_body_class(), scopes this to
 * this screen only.
 * ------------------------------------------------------------------ */
body.chargeforms-screen-forms-list,
body.chargeforms-screen-forms-list #wpcontent,
body.chargeforms-screen-forms-list #wpbody-content {
	background: #fff !important;
}

/* ------------------------------------------------------------------ *
 * Page head - the reference product's .ff_section_head: 24px #1e1f21 title on top of a
 * muted subtitle, primary action on the right. The + Add New Form CTA takes
 * Element's .el-button--primary geometry (radius 7px, 12px 20px, 14px/500)
 * in ChargeForms violet.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-page-head {
	margin: 0 0 24px !important;
}
.chargeforms-wrap .chargeforms-page-head h1 {
	font-size: 24px !important;
	font-weight: 600 !important;
	color: #1e1f21 !important;
	letter-spacing: normal !important;
	line-height: 1.3 !important;
}
.chargeforms-wrap .chargeforms-page-head-sub {
	font-size: 13px !important;
	color: #909399 !important;
	margin-top: 4px !important;
}
.chargeforms-wrap .chargeforms-page-head .chargeforms-btn-icon.button {
	border-radius: 7px !important;
	padding: 12px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	height: auto !important;
	background: #6c4ef5 !important;
	border-color: #6c4ef5 !important;
	color: #fff !important;
	box-shadow: none !important;
}
.chargeforms-wrap .chargeforms-page-head .chargeforms-btn-icon.button:hover {
	background: #5638d8 !important;
	border-color: #5638d8 !important;
	color: #fff !important;
}

/* ------------------------------------------------------------------ *
 * Toolbar row - sits on the gray canvas above the table card (the reference product keeps
 * search/filter controls outside .ff_table). Controls are Element geometry:
 * 40px tall, border #dadbdd, radius 7px, 14px type, placeholder #c0c4cc,
 * violet focus.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-list-toolbar {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 10px !important;
	padding: 0 !important;
	margin: 0 0 24px !important;
	border: 0 !important;
	background: transparent !important;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-search {
	width: 270px !important;
	max-width: 100%;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 15px !important;
	font-size: 14px !important;
	line-height: 38px !important;
	color: #606266 !important;
	background: #fff !important;
	border: 1px solid #dadbdd !important;
	border-radius: 7px !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-search:hover {
	border-color: #c0c4cc !important;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-search:focus {
	border-color: #6c4ef5 !important;
	box-shadow: 0 0 0 3px rgba(108, 78, 245, 0.12) !important;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-search::placeholder {
	color: #c0c4cc !important;
	opacity: 1;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-select {
	width: auto;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 30px 0 14px !important;
	font-size: 14px !important;
	line-height: 38px !important;
	color: #606266 !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23606266%22%2F%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px center !important;
	background-size: 16px 16px !important;
	border: 1px solid #dadbdd !important;
	border-radius: 7px !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-select:hover {
	border-color: #c0c4cc !important;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-select:focus {
	border-color: #6c4ef5 !important;
	box-shadow: 0 0 0 3px rgba(108, 78, 245, 0.12) !important;
}
.chargeforms-wrap .chargeforms-toolbar-count {
	margin-left: auto !important;
	font-size: 13px !important;
	color: #909399 !important;
	white-space: nowrap;
}

/* Custom-range reveal (the reference product's advanced-filter panel equivalent): the two
 * date inputs + Apply/Clear get the same Element control language. */
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-range {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-basis: 100%;
	margin-top: 6px;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-range[hidden] {
	display: none;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-range input[type="date"] {
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 14px !important;
	font-size: 14px !important;
	line-height: normal !important;
	color: #606266 !important;
	background: #fff !important;
	border: 1px solid #dadbdd !important;
	border-radius: 7px !important;
	box-shadow: none !important;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-range .button {
	border-radius: 7px !important;
	padding: 10px 20px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	height: auto !important;
	line-height: 1.2 !important;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-range .button-primary {
	background: #6c4ef5 !important;
	border-color: #6c4ef5 !important;
	color: #fff !important;
}
.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-range .button-primary:hover {
	background: #5638d8 !important;
	border-color: #5638d8 !important;
}

/* ------------------------------------------------------------------ *
 * Table card - the reference product's .ff_table exactly: white, radius 8px, shadow
 * 0 1px 3px rgba(30,31,33,.08), 10px 24px padding, no visible border.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-list-card {
	background: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(30, 31, 33, 0.08) !important;
	padding: 10px 24px !important;
	overflow: visible !important;
}
.chargeforms-wrap .chargeforms-list-card .chargeforms-table-scroll {
	padding: 0 !important;
}

/* ------------------------------------------------------------------ *
 * Table anatomy - the reference product zeroes Element's row hover/stripe chrome inside
 * .ff_table (every row stays white), keeps #ececec cell dividers, and the
 * last row has no bottom border. Body type is Element's 14px #606266;
 * headers are #1e1f21 / 600 with 0/8px vertical padding (not uppercase).
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-forms-table {
	border: 0 !important;
	margin: 0 !important;
	font-size: 14px !important;
	color: #606266 !important;
	border-spacing: 0 !important;
	border-collapse: separate !important;
}
.chargeforms-wrap .chargeforms-forms-table th,
.chargeforms-wrap .chargeforms-forms-table td {
	padding: 12px 14px !important;
	vertical-align: top;
	border-bottom: 1px solid #ececec !important;
}
.chargeforms-wrap .chargeforms-forms-table thead th {
	padding: 0 14px 8px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1e1f21 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	background: transparent !important;
	white-space: nowrap;
	vertical-align: middle;
}
/* Kill the .dc zebra + violet row hover - the reference product .ff_table rows are white
 * and only the row actions appear on hover. */
.chargeforms-wrap .chargeforms-forms-table tbody tr,
.chargeforms-wrap .chargeforms-forms-table tbody tr:nth-child(odd),
.chargeforms-wrap .chargeforms-forms-table tbody tr:nth-child(even),
.chargeforms-wrap .chargeforms-forms-table tbody tr:hover {
	background: #fff !important;
}
.chargeforms-wrap .chargeforms-forms-table tbody tr:last-child td {
	border-bottom-width: 0 !important;
}
.chargeforms-wrap .chargeforms-forms-table tbody td:first-child {
	vertical-align: top !important;
}

/* Numeric columns line up like the reference product's Entries/Views/Conversion: centered
 * header and centered values. (Specificity must beat the .dc right-align +
 * 11px-uppercase rules that also target .chargeforms-col-num.) */
.chargeforms-wrap .chargeforms-forms-table thead th.chargeforms-col-num,
.chargeforms-wrap .chargeforms-forms-table thead th.chargeforms-col-entries,
.chargeforms-wrap .chargeforms-forms-table thead th.chargeforms-col-views,
.chargeforms-wrap .chargeforms-forms-table thead th.chargeforms-col-conv,
.chargeforms-wrap .chargeforms-forms-table thead th.chargeforms-col-fields {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #1e1f21 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-align: center !important;
}
.chargeforms-wrap .chargeforms-forms-table td.chargeforms-col-num {
	text-align: center !important;
	color: #606266 !important;
}

/* Checkbox column - Element checkbox size (14px square, radius 4px) with
 * the ChargeForms violet used for the checked fill. */
.chargeforms-wrap .chargeforms-forms-table input[type="checkbox"] {
	width: 14px !important;
	height: 14px !important;
	min-width: 14px !important;
	min-height: 14px !important;
	margin: 2px 0 0 !important;
	border-radius: 4px !important;
	accent-color: #6c4ef5 !important;
}

/* ------------------------------------------------------------------ *
 * Title cell - the reference product renders the form name as a 14px/500 strong in
 * #1e1f21; ChargeForms keeps it clickable, so hover tints violet.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-forms-table .chargeforms-form-title {
	display: block;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #1e1f21 !important;
	text-decoration: none !important;
	line-height: 1.35 !important;
	margin: 0 0 3px !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-form-title:hover {
	color: #6c4ef5 !important;
	text-decoration: none !important;
}

/* Meta line under the title. The shortcode chip becomes the reference product's
 * .ff_shortcode_btn (.ff_shortcode_btn_thin): flat #f2f2f2 pill, radius 6px,
 * 12px #353537 text, no border. */
.chargeforms-wrap .chargeforms-forms-table .chargeforms-form-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-shortcode-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	max-width: 100%;
	background: #f2f2f2 !important;
	border: 0 !important;
	border-radius: 6px !important;
	padding: 4px 10px !important;
	cursor: pointer;
	color: #353537 !important;
	height: auto !important;
	box-shadow: none !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-shortcode-chip code {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #353537 !important;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-shortcode-chip:hover {
	background: #e9e9e9 !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-shortcode-chip:hover code {
	color: #353537 !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-shortcode-chip.is-copied code {
	color: #00b27f !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-form-meta-text {
	font-size: 13px !important;
	color: #909399 !important;
	line-height: 1.5 !important;
}

/* ------------------------------------------------------------------ *
 * Row actions - the reference product reveals a 13px link row on row hover, items divided
 * by a 1px #ddd vertical rule; links are the primary color (violet here),
 * Delete stays #ff6154. WP core already visibility-gates .row-actions on
 * hover, so only typography/color/separators need restating.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-forms-table .row-actions {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center !important;
	gap: 0 !important;
	margin-top: 6px !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.6 !important;
	color: #909399 !important;
}
.chargeforms-wrap .chargeforms-forms-table .row-actions > span {
	position: relative;
	padding-right: 10px;
}
.chargeforms-wrap .chargeforms-forms-table .row-actions > span:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 3px;
	transform: translateY(-50%);
	height: 10px;
	width: 1px;
	background: #ddd;
}
.chargeforms-wrap .chargeforms-forms-table .row-actions a {
	color: #6c4ef5 !important;
	font-weight: 400 !important;
	text-decoration: none !important;
}
.chargeforms-wrap .chargeforms-forms-table .row-actions a:hover {
	color: #5a3ee0 !important;
	text-decoration: none !important;
}
.chargeforms-wrap .chargeforms-forms-table .row-actions .chargeforms-row-action-danger {
	color: #ff6154 !important;
}
.chargeforms-wrap .chargeforms-forms-table .row-actions .chargeforms-row-action-danger:hover {
	color: #ff8176 !important;
}

/* Entries count cell - the reference product links it in the primary color (violet). */
.chargeforms-wrap .chargeforms-forms-table .chargeforms-entries-count {
	color: #6c4ef5 !important;
	font-weight: 400 !important;
	text-decoration: none !important;
	font-variant-numeric: tabular-nums;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-entries-count:hover {
	color: #5a3ee0 !important;
	text-decoration: none !important;
}

/* Created date stays a quiet secondary timestamp. */
.chargeforms-wrap .chargeforms-forms-table .chargeforms-col-created {
	font-size: 13px !important;
	color: #909399 !important;
	white-space: nowrap;
}

/* ------------------------------------------------------------------ *
 * Status cell - the reference product's Element switch: 40x20 pill with a 16px thumb,
 * off track #edeae9, on track #00b27f (Element success, unchanged from
 * the reference product), and the adjacent label in the primary color while active.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell {
	display: flex;
	align-items: center;
	gap: 0;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell .chargeforms-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0;
	color: #606266 !important;
	font-size: 14px !important;
	text-decoration: none !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell .chargeforms-toggle-track {
	display: inline-block;
	width: 40px !important;
	height: 20px !important;
	min-width: 40px !important;
	border-radius: 10px !important;
	background: #edeae9 !important;
	border: 1px solid #edeae9 !important;
	box-sizing: border-box !important;
	position: relative;
	transition: background-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
	flex-shrink: 0;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell .chargeforms-toggle-thumb {
	position: absolute;
	top: 1px !important;
	left: 1px !important;
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: none !important;
	transition: left 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell .chargeforms-toggle.is-on .chargeforms-toggle-track {
	background: #00b27f !important;
	border-color: #00b27f !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell .chargeforms-toggle.is-on .chargeforms-toggle-thumb {
	left: 21px !important;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell .chargeforms-toggle-label {
	margin-left: 10px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: #606266 !important;
	line-height: 1 !important;
	white-space: nowrap;
}
.chargeforms-wrap .chargeforms-forms-table .chargeforms-status-cell .chargeforms-toggle.is-on .chargeforms-toggle-label {
	color: #6c4ef5 !important;
}

/* ------------------------------------------------------------------ *
 * Empty state (no rows match) - padded center inside the white card.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-list-card .chargeforms-empty-state {
	padding: 48px 0 40px !important;
}

/* Bulk action bar - Element-style white pill when rows are selected. */
.chargeforms-wrap .chargeforms-bulk-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px !important;
	padding: 10px 16px !important;
	background: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(30, 31, 33, 0.08) !important;
}
.chargeforms-wrap .chargeforms-bulk-bar[hidden] {
	display: none;
}
.chargeforms-wrap .chargeforms-bulk-bar-count {
	font-weight: 600 !important;
	color: #6c4ef5 !important;
	font-size: 13px !important;
}
.chargeforms-wrap .chargeforms-bulk-bar select {
	height: 32px !important;
	padding: 0 26px 0 10px !important;
	font-size: 13px !important;
	color: #606266 !important;
	background: #fff url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23606266%22%2F%3E%3C%2Fsvg%3E") no-repeat right 8px center !important;
	background-size: 14px 14px !important;
	border: 1px solid #dadbdd !important;
	border-radius: 7px !important;
	-webkit-appearance: none;
	appearance: none;
}
.chargeforms-wrap .chargeforms-bulk-bar .button-primary {
	border-radius: 7px !important;
	padding: 8px 16px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	height: auto !important;
	line-height: 1.2 !important;
	background: #6c4ef5 !important;
	border-color: #6c4ef5 !important;
	color: #fff !important;
}
.chargeforms-wrap .chargeforms-bulk-bar .button-primary:hover {
	background: #5638d8 !important;
	border-color: #5638d8 !important;
}

/* ------------------------------------------------------------------ *
 * Pagination - the reference product's .ff_pagination pill below the table: white, radius
 * 8px, same soft shadow as .ff_table, 12px 20px padding, right-aligned.
 * Total reads muted, the per-page select is the small gray Element input,
 * prev/next are #ededed pills and the current page is the violet active pill.
 * ------------------------------------------------------------------ */
.chargeforms-wrap .chargeforms-pagination {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap;
	gap: 20px !important;
	width: fit-content;
	max-width: 100%;
	margin: 24px 0 0 auto !important;
	padding: 12px 20px !important;
	background: #fff !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 1px 3px rgba(30, 31, 33, 0.08) !important;
}
.chargeforms-wrap .chargeforms-pagination-total {
	font-size: 13px !important;
	font-weight: 400 !important;
	color: #606266 !important;
}
.chargeforms-wrap .chargeforms-per-page-form select {
	height: 30px !important;
	padding: 0 24px 0 10px !important;
	font-size: 13px !important;
	color: #606266 !important;
	background: #f2f2f2 url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23606266%22%2F%3E%3C%2Fsvg%3E") no-repeat right 8px center !important;
	background-size: 14px 14px !important;
	border: 1px solid #f2f2f2 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	outline: none !important;
	-webkit-appearance: none;
	appearance: none;
}
.chargeforms-wrap .chargeforms-pagination-nav {
	display: flex;
	align-items: center;
	gap: 6px;
}
.chargeforms-wrap .chargeforms-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px !important;
	height: 28px !important;
	border: 0 !important;
	border-radius: 4px !important;
	background: #ededed !important;
	color: #606266 !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
}
.chargeforms-wrap .chargeforms-page-btn:hover:not(.is-disabled) {
	background: #e2e2e2 !important;
	color: #606266 !important;
}
.chargeforms-wrap .chargeforms-page-btn.is-disabled {
	opacity: 1 !important;
	background: #f5f5f5 !important;
	color: #afb3ba !important;
	pointer-events: none;
}
.chargeforms-wrap .chargeforms-page-current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	border-radius: 4px !important;
	background: #6c4ef5 !important;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}
.chargeforms-wrap .chargeforms-page-of {
	font-size: 13px !important;
	color: #909399 !important;
}

/* ------------------------------------------------------------------ *
 * Narrow screens - the reference product stacks the toolbar controls full-width.
 * ------------------------------------------------------------------ */
@media (max-width: 782px) {
	.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-search,
	.chargeforms-wrap .chargeforms-list-toolbar .chargeforms-toolbar-select {
		width: 100% !important;
	}
	.chargeforms-wrap .chargeforms-pagination {
		width: 100% !important;
		margin-left: 0 !important;
	}
}