/**
 * NeoGrow admin styles.
 *
 * The --neoplugin-* custom properties are defined at runtime from the current
 * user's WordPress admin colour scheme; see NeoGrow\Admin\Assets.
 */

/* Shell layout.
 *
 * No `overflow: hidden` here: it would make the shell a clipping container,
 * and `position: sticky` never fires inside one — which is what the sidebar
 * billboard rides on. The rounded corners are therefore drawn on the first
 * and last children instead of being clipped off the shell.
 */
.neoplugin-shell {
	display: flex;
	flex-direction: column;
	min-height: 600px;
	background: #f0f0f1;
	border: 1px solid #dcdcde;
	border-radius: 8px;
	margin-top: 20px;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.05 );
}

/*
 * Horizontal navbar.
 *
 * The strip scrolls sideways rather than wrapping or being clipped — the
 * same answer WooCommerce's settings shell reaches. It is a scroll
 * container at every width and simply has nothing to scroll on a desktop;
 * that avoids a breakpoint flip between two layouts.
 *
 * box-sizing matters here: with width:100% and 20px of side padding the
 * strip used to overflow .neoplugin-shell by 40px, and the shell's
 * overflow:hidden then clipped the tabs with no scrollbar to recover them.
 */
.neoplugin-nav {
	box-sizing: border-box;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	background: #fff;
	border-bottom: 1px solid #dcdcde;
	border-radius: 8px 8px 0 0;
	padding: 0 20px;
	flex-shrink: 0;
	overflow-x: auto;
	overflow-y: hidden;
}

.neoplugin-nav a {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 16px 20px;
	margin-right: 5px;
	color: #50575e;
	text-decoration: none;
	font-weight: 500;
	transition: all 0.2s;
	font-size: 14px;
	border-bottom: 3px solid transparent;
}

.neoplugin-nav a:hover {
	color: var( --neoplugin-accent-color );
	background: transparent;
}

.neoplugin-nav a.active,
.neoplugin-nav a[aria-current="page"] {
	color: var( --neoplugin-accent-color );
	background: transparent;
	border-bottom: 3px solid var( --neoplugin-accent-color );
	font-weight: 600;
}

.neoplugin-nav a:focus-visible {
	outline: 2px solid var( --neoplugin-accent-color );
	outline-offset: -2px;
}

.neoplugin-nav .dashicons {
	margin-right: 8px;
	color: inherit;
}

/* Content area.
 *
 * `overflow-y` is left alone for the same reason as the shell: the column has
 * no fixed height to scroll against, so it never scrolled anything — it only
 * ever cost the sidebar its sticky billboard.
 */
.neoplugin-content {
	flex-grow: 1;
	padding: 32px;
	background: #fff;
}

/* Body: content + the sidebar billboard that rides along on every tab.
 *
 * The billboard is optional — NeoGrow Pro filters it away — so the content
 * column is sized to grow into the gap rather than to a fixed fraction.
 */
.neoplugin-body {
	display: flex;
	align-items: stretch;
	flex-grow: 1;
	gap: 20px;
	min-height: 0;

	/* The billboard floats on the same white the content sits on, so the
	   gutter beside it must not fall through to the shell's grey. */
	background: #fff;
	border-radius: 0 0 8px 8px;
}

.neoplugin-body > .neoplugin-content {
	flex: 3 1 auto;
	min-width: 0;
}

.neoplugin-sidebar {
	flex: 1 0 300px;
	max-width: 340px;
	padding: 32px 32px 32px 0;
}

.neo-sidebar-billboard {
	position: sticky;
	top: 40px;
	background: #fff;
	padding: 25px;
	border: 1px solid #ccd0d4;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.04 );
}

.neo-billboard-title {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: #1d2327;
}

.neo-sidebar-billboard p {
	margin: 0 0 15px;
	color: #646970;
	font-size: 13px;
	line-height: 1.5;
}

.neo-billboard-sep {
	margin: 25px 0;
	border: 0;
	border-top: 1px solid #eee;
}

.neo-billboard-btn {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 35px;
	margin-bottom: 8px;
	font-weight: 600 !important;
	text-align: center;
	text-decoration: none !important;
	border-radius: 4px !important;
}

.neo-billboard-btn:last-child {
	margin-bottom: 0;
}

/* The review call to action takes an outlined treatment in the star gold, so
   it reads as the softer ask of the three buttons. */
.neo-billboard-btn-review {
	background-color: transparent !important;
	color: #b26c00 !important;
	border: 1px solid #dba617 !important;
	transition: all 0.2s ease-in-out !important;
}

.neo-billboard-btn-review:hover,
.neo-billboard-btn-review:focus {
	background-color: #dba617 !important;
	color: #1d2327 !important;
}

.neo-billboard-btn .dashicons {
	margin-right: 8px;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1 !important;
	color: inherit !important;
}

.neo-billboard-stars {
	margin-bottom: 8px !important;
	color: #dba617 !important;
	font-size: 16px;
	letter-spacing: 3px;
}

/* The Design tab lays out two columns of its own, which no longer fit beside
   the billboard on a laptop screen. */
@media ( max-width: 1280px ) {

	.neoplugin-design-grid {
		grid-template-columns: 1fr;
	}
}

/* Below this the billboard stacks under the content rather than beside it:
   documentation, support and review live only here, so hiding the card would
   lose them on a phone rather than merely rearrange them. */
@media ( max-width: 960px ) {

	.neoplugin-body {
		flex-direction: column;
		gap: 0;
	}

	.neoplugin-sidebar {
		flex: 1 1 auto;
		max-width: none;
		padding: 0 32px 32px;
	}

	.neo-sidebar-billboard {
		position: static;
	}
}

.neoplugin-content h2 {
	font-size: 20px;
	margin-bottom: 20px;
	margin-top: 0;
}

.neoplugin-shell .notice {
	margin: 0 0 20px 0;
}

/* Cards and stats */
.neoplugin-card,
.neogrow-card {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: none;
}

.neoplugin-card-stat,
.neogrow-card-stat {
	text-align: center;
}

/*
 * A stat card that is itself a link.
 *
 * Every rule here either cancels something an anchor brings with it — the link
 * colour, the underline, the admin's focus box-shadow — or restores something
 * the inline children lost: the figure and the label are spans inside the
 * anchor, so they need display:block for the stat's own margin to apply. The
 * card's appearance still comes entirely from .neoplugin-card and
 * .neoplugin-card-stat, so a linked tile and a plain one are identical at rest.
 */
.neoplugin-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: all 0.2s;
}

.neoplugin-card-link .neoplugin-stat,
.neoplugin-card-link .neoplugin-label {
	display: block;
}

.neoplugin-card-link:hover,
.neoplugin-card-link:focus {
	border-color: var( --neoplugin-accent-color );
	color: inherit;
	box-shadow: none;
}

.neoplugin-card-link:focus-visible {
	outline: 2px solid var( --neoplugin-accent-color );
	outline-offset: -2px;
}

.neoplugin-stat,
.neogrow-stat {
	font-size: 24px;
	font-weight: bold;
	color: var( --neoplugin-accent-color );
	margin-bottom: 5px;
}

.neoplugin-label,
.neogrow-label {
	font-size: 13px;
	color: #646970;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.neoplugin-grid,
.neogrow-grid {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 200px, 1fr ) );
	gap: 20px;
	margin-top: 0;
}

.neoplugin-chart-container,
.neogrow-chart-container {
	background: #fff;
	padding: 20px;
	margin-top: 20px;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	position: relative;
	height: 350px;
}

/* Design tab preview */
.neoplugin-design-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	margin-top: 30px;
}

.neoplugin-preview-card {
	background: #fff;
	padding: 40px;
	border-radius: 12px;
	border: 1px solid #e5e5e5;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.neoplugin-preview-button {
	padding: 12px 24px;
	border-radius: var( --preview-radius, 4px );
	background: var( --preview-primary, var( --neoplugin-accent-color ) );
	color: #fff;
	font-weight: 600;
	border: none;
	margin-top: 20px;
}

.neoplugin-preview-text {
	color: var( --preview-text, #3c434a );
}

@media ( max-width: 782px ) {
	.neoplugin-design-grid {
		grid-template-columns: 1fr;
	}

	/*
	 * Tighter tabs on a phone: more of the strip is readable before it has
	 * to be scrolled, and the partly-visible tab at the right edge is what
	 * tells the merchant there is more to reach.
	 */
	.neoplugin-nav {
		padding: 0 8px;
	}

	.neoplugin-nav a {
		padding: 14px 12px;
		margin-right: 0;
	}

	.neoplugin-nav .dashicons {
		margin-right: 6px;
	}

	/* 64px of padding on a 360px screen leaves very little for the fields. */
	.neoplugin-content {
		padding: 20px 16px;
	}

	.neoplugin-sidebar {
		padding: 0 16px 20px;
	}
}

/* Guide tab */
.neoplugin-guide-list {
	padding-left: 0;
	list-style: none;
	margin: 0;
}

.neoplugin-guide-list li {
	margin-bottom: 15px;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 10px;
}

.neoplugin-guide-list li:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.neoplugin-guide-list strong {
	color: #1d1d1f;
	display: block;
	margin-bottom: 4px;
	font-size: 14px;
}

.neoplugin-faq-container {
	margin-top: 40px;
	background: #fff;
	padding: 30px;
	border-radius: 8px;
	border: 1px solid #c3c4c7;
}

.neoplugin-faq {
	margin-bottom: 15px;
	border-bottom: 1px solid #f0f0f0;
	padding-bottom: 15px;
}

.neoplugin-faq summary {
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	color: var( --neoplugin-accent-color );
}

.neoplugin-faq p {
	margin-top: 10px;
	color: #50575e;
	line-height: 1.6;
}

/* Support box */
.neo-support-box {
	margin-top: 40px;
	padding: 25px;
	background: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 4px;
	border-left: 4px solid var( --neoplugin-accent-color );
}

.neo-support-box .support-link {
	font-size: 13px;
	color: #646970;
	margin: 0;
}

/* Unified settings table */
.neo-unified-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

.neo-unified-table th,
.neo-unified-table td {
	padding: 20px;
	text-align: left;
	vertical-align: top;
}

.neo-unified-table th {
	width: 200px;
	font-weight: 600;
	color: #1d2327;
}

.neo-unified-table tr:nth-child( even ) {
	background-color: #f6f7f7;
}

.neo-unified-table tr.neo-section-header-row:nth-child( even ) {
	background-color: transparent;
}

.neo-unified-table tr:hover:not( .neo-section-header-row ) {
	background-color: #fcfcfc;
}

.neo-section-header-row {
	background: transparent;
}

.neo-section-header-row td {
	padding: 30px 0 10px 0;
	border-bottom: none;
}

.neo-section-header-row h3 {
	margin: 0 0 5px;
	font-size: 1.3em;
	font-weight: 600;
	color: #1d2327;
}

.neo-section-header-row .neo-section-description {
	margin: 0;
	color: #50575e;
	font-size: 14px;
}

/* Generic ribbon system */
.neo-unified-table tr.neo-ribbon th {
	position: relative;
	overflow: hidden;
}

.neo-unified-table tr.neo-ribbon th::before {
	position: absolute;
	top: 8px;
	left: -18px;
	font-size: 8px;
	font-weight: 800;
	padding: 2px 20px;
	transform: rotate( -45deg );
	z-index: 2;
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.1 );
	pointer-events: none;
	line-height: 1.2;
	text-align: center;
}

.neo-unified-table tr.neo-ribbon.new th::before {
	content: "NEW";
	background: #e21010;
	color: #fff;
}

.neo-unified-table tr.neo-ribbon.updated th::before {
	content: "UPDATED";
	background: #149300;
	color: #fff;
	top: 10px;
	left: -27px;
	padding: 3px 25px;
}


/*
 * The disclosure statement field only matters while the disclosure is on,
 * so its row follows the toggle's live state — CSS only, via :has(), no
 * script. On a browser without :has() the row simply stays visible, which
 * is the right way for this to degrade.
 */
.neo-unified-table tr:has(#neogrow_review_disclosure_enabled:not(:checked)) ~ tr:has(#neogrow_review_disclosure_text) {
	display: none;
}

/* Review photo size limit, and the tooltip that explains where it comes from */
.neogrow-upload-limit {
	margin: 0 0 6px;
}

.neogrow-upload-limit__warning {
	margin: 0 0 8px;
	padding: 8px 10px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #4a3a00;
	max-width: 620px;
}

.neogrow-tip {
	position: relative;
	display: inline-block;
	margin-left: 4px;
	vertical-align: middle;
	cursor: help;
}

.neogrow-tip__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #787c82;
	color: #fff;
	font-size: 11px;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
}

.neogrow-tip__bubble {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	z-index: 20;
	width: 300px;
	transform: translateX(-50%);
	padding: 10px 12px;
	border-radius: 4px;
	background: #1d2327;
	color: #f0f0f1;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transition: opacity 120ms ease;
}

.neogrow-tip:hover .neogrow-tip__bubble,
.neogrow-tip:focus .neogrow-tip__bubble,
.neogrow-tip:focus-visible .neogrow-tip__bubble {
	opacity: 1;
	visibility: visible;
}

.neogrow-tip:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
	border-radius: 50%;
}

@media (max-width: 782px) {
	.neogrow-tip__bubble {
		left: 0;
		width: min(260px, 70vw);
		transform: none;
	}
}


/*
 * "On your store" — the screen that lists what the plugin changed.
 *
 * Cards come from .neoplugin-card; everything here is the status pill, the
 * preview switch and the spacing between them. The pill is deliberately NOT
 * .neo-ribbon: that is the rotated corner ribbon on the settings table, scoped
 * to a th, with its wording set in CSS content and therefore untranslatable.
 */
.neogrow-changes-intro {
	max-width: 70ch;
	margin: 0 0 20px;
	font-size: 14px;
}

/*
 * Fallback for WooCommerce's empty-state component.
 *
 * The dashboard's blank state uses Woo's own .woocommerce-BlankState classes,
 * because its guidelines ask that empty states be instructional and carry no
 * branded colours, fonts or illustrations — borrowing the component is how you
 * honour that. But woocommerce_admin_styles is only enqueued on screens listed
 * in wc_get_screen_ids(), and a third-party submenu is not one of them, so on
 * this page Woo's rules are simply absent and the component would arrive naked.
 *
 * These rules are therefore scoped to our own class rather than Woo's, and kept
 * to layout and spacing only. If Woo's stylesheet ever does load here, the two
 * agree instead of fighting.
 */
.neogrow-blank-state {
	padding: 48px 24px;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	background: #fff;
	text-align: center;
}

.neogrow-blank-state .woocommerce-BlankState-message {
	margin: 0 auto 12px;
	max-width: 46ch;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: #1d2327;
}

.neogrow-blank-state p {
	margin: 0 auto 24px;
	max-width: 60ch;
	color: #50575e;
}

.neogrow-blank-state .woocommerce-BlankState-cta {
	margin: 0 4px;
}

/*
 * Each change is described on the left and drawn on the right. The drawing is
 * inline SVG rather than a screenshot: it ships in the zip at no weight, needs
 * no remote request, scales without going soft, and — because every shape is
 * painted by the rules below rather than baked into a file — it follows the
 * merchant's admin colour scheme instead of fighting it.
 */
.neogrow-change {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
}

.neogrow-change-text {
	flex: 1 1 auto;
	/* Without this a long line makes the flex item refuse to shrink. */
	min-width: 0;
}

.neogrow-change-art {
	flex: 0 0 240px;
	align-self: center;
}

.neogrow-change-art svg {
	display: block;
	width: 100%;
	height: auto;
}

.neogrow-change h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: 0;
}

.neogrow-change p {
	max-width: 75ch;
}

/* The drawing's palette. Four roles, so every illustration reads alike. */
.neogrow-art .a-frame {
	fill: #fff;
	stroke: #dcdcde;
	stroke-width: 1.5;
}

.neogrow-art .a-panel {
	fill: #f6f7f7;
	stroke: #e2e4e7;
	stroke-width: 1;
}

/* Stands in for ordinary page text the plugin did not put there. */
.neogrow-art .a-muted {
	fill: #e2e4e7;
}

.neogrow-art .a-strong {
	fill: #c3c4c7;
}

/* Reserved for what NeoGrow itself adds, so the eye finds it immediately. */
.neogrow-art .a-accent {
	fill: var( --neoplugin-accent-color );
}

.neogrow-art .a-accent-soft {
	fill: var( --neoplugin-accent-color );
	opacity: 0.14;
}

.neogrow-art .a-stroke-accent {
	fill: none;
	stroke: var( --neoplugin-accent-color );
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Stacked well before the WordPress mobile breakpoint: the two columns get
 * cramped long before 782px, and a drawing squeezed to a sliver explains less
 * than no drawing at all.
 */
@media (max-width: 1100px) {
	.neogrow-change {
		flex-direction: column;
	}

	.neogrow-change-art {
		flex-basis: auto;
		align-self: flex-start;
		width: 240px;
		max-width: 100%;
	}
}

.neogrow-change-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 0;
}

/*
 * Findings about this particular store — a block theme taking a different
 * render path, a page cache, a second points plugin. Amber rather than red:
 * none of these is a fault, they are things that change what the merchant
 * should expect to see, and colouring them like errors would send people
 * hunting for a break that isn't there.
 */
.neogrow-change-checks {
	margin: 0 0 16px;
	padding: 10px 12px 10px 30px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #4a3a00;
	max-width: 75ch;
	list-style: disc;
}

.neogrow-change-checks li {
	margin: 0 0 4px;
}

.neogrow-change-checks li:last-child {
	margin-bottom: 0;
}

.neogrow-status {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.8;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

.neogrow-status-live {
	background: #edfaea;
	color: #0f6b00;
	border: 1px solid #b7e3ad;
}

/*
 * Amber, not red. A surface waiting for its first customer is working
 * correctly, and colouring it like a fault is the exact misreading this
 * screen exists to prevent.
 */
.neogrow-status-waiting {
	background: #fcf9e8;
	color: #6a5000;
	border: 1px solid #f0d97f;
}

.neogrow-status-off {
	background: #f0f0f1;
	color: #50575e;
	border: 1px solid #dcdcde;
}

.neogrow-preview-control {
	border-left: 4px solid var( --neoplugin-accent-color );
}

.neogrow-preview-control h3 {
	margin-top: 0;
}

.neogrow-preview-control p {
	max-width: 75ch;
}

.neogrow-preview-states {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 0;
}

.neogrow-preview-live {
	margin-bottom: 0;
	padding: 10px 12px;
	border-left: 4px solid #dba617;
	background: #fcf9e8;
	color: #4a3a00;
}

/* ---------------------------------------------------------------------------
   Explainer clips
   A play button against the settings rows that have one, and the dialog it
   opens. The button is an anchor to the video file, upgraded by
   assets/js/admin-settings-videos.js; everything here has to look right
   whether or not that script ran.
   ------------------------------------------------------------------------ */

.neo-unified-table th .neo-video-tip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-left: 8px;
	/* Nudged up against a 600-weight label so the circle sits on the cap
	   height rather than the baseline. */
	vertical-align: -5px;
	border-radius: 50%;
	background: #f0f0f1;
	color: #2271b1;
	text-decoration: none;
	transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
}

.neo-unified-table th .neo-video-tip:hover,
.neo-unified-table th .neo-video-tip:focus {
	background: #2271b1;
	color: #fff;
}

.neo-unified-table th .neo-video-tip .dashicons {
	/* The glyph is optically left-heavy inside its box, so centring the box
	   leaves the triangle looking off-centre in the circle. */
	width: 16px;
	height: 16px;
	margin-left: 1px;
	font-size: 16px;
	line-height: 16px;
}

.neo-video-dialog {
	/* The clips are 854 wide. Matching it exactly means the video meets the
	   dialog edges instead of sitting in letterbox strips. */
	width: min( 854px, 92vw );
	padding: 0;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.25 );
	color: #1d2327;
}

.neo-video-dialog::backdrop {
	background: rgba( 0, 0, 0, 0.7 );
}

.neo-video-dialog__head {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border-bottom: 1px solid #dcdcde;
}

.neo-video-dialog__head h2 {
	flex: 1;
	margin: 0;
	font-size: 15px;
	line-height: 1.4;
}

.neo-video-dialog__close {
	flex: none;
	padding: 0;
	border: 0;
	background: none;
	color: #646970;
	cursor: pointer;
	line-height: 1;
}

.neo-video-dialog__close:hover,
.neo-video-dialog__close:focus {
	color: #d63638;
}

.neo-video-dialog__body {
	display: flex;
	background: #1d2327;
}

.neo-video-dialog__body video {
	/* Authored at 854x480. Capped at its own width so a wide screen does not
	   upscale it into mush, and 16/9 keeps the dialog from jumping while the
	   first frame is still loading. */
	display: block;
	width: 100%;
	max-width: 854px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}

/* Load-bearing. The script parks the clip you are not watching behind the
   `hidden` attribute, which works through the user-agent rule `[hidden] {
   display: none }` — and the class selector above outranks it, so without this
   every clip ever opened stays on screen and the first one you opened is the
   one you keep seeing. */
.neo-video-dialog__body video[hidden] {
	display: none;
}

.neo-video-dialog__foot {
	margin: 0;
	padding: 10px 16px;
	border-top: 1px solid #dcdcde;
	color: #646970;
	font-size: 12px;
}