/*========================================================================*\
|| ###################################################################### ||
|| # vBulletin 6.2.3
|| # ------------------------------------------------------------------ # ||
|| # Copyright 2000-2026 MH Sub I, LLC dba vBulletin. All Rights Reserved.  # ||
|| # This file may not be redistributed in whole or significant part.   # ||
|| # ----------------- VBULLETIN IS NOT FREE SOFTWARE ----------------- # ||
|| # http://www.vbulletin.com | http://www.vbulletin.com/license.html   # ||
|| ###################################################################### ||
\*========================================================================*/
:root {
	--root-font-size: 12px;
}
#acp-head-wrapper {
	font-family: Arial;
}
#acp-top-links {
	background: #F5F4F4;
	margin: 0;
	padding: 0 35px;
	height: 28px;
	font-size: var(--root-font-size);
	border-bottom: 1px solid #21282d;
	color: #e9e9e9;
}
#acp-top-links li {
	list-style: none;
	display: block;
	height: 28px;
	line-height: 28px;
	padding: 0 20px;
}
#acp-top-links li.divider {
	border-left: 1px solid #DBDCDD;
	border-right: 1px solid #F7F7F7;
	padding: 0;
}
#acp-top-links li#acp-top-link-acp {
	border-top: 1px solid #21282d;
	border-left: 1px solid #21282d;
	border-right: 1px solid #21282d;
	background: #303942;
	color: #FFF;
	font-family: Helvetica;
	font-weight: bold;
}
#acp-top-links li > a {
	display: block;
	height: 28px;
	line-height: 28px;
}
#acp-top-links li#acp-top-link-site a {
	color: #262d35;
	text-decoration: none;
}
#acp-logo-bar {
	background: url("admincp_hd_back.png") repeat;
	height: 57px;
	clear: both;
}
#acp-logo-bar a {
	color: #FFF;
	text-decoration: none;
}
#acp-logo-bar .logo {
	margin: 12px 12px 0;
}
#acp-logo-bar .logo img {
	height: 29px;
}
#acp-logo-bar .links {
	margin-top: 22px;
}
#acp-logo-bar .search {
	margin-top: 15px;
}
#acp-logo-bar .search input[type="text"] {
	width: 300px;
}
#acp-nav-wrapper {
	width:240px;
	padding: 10px 0;
	background-color:#686C73;
}
.acp-nav-controls {
	clear: both;
	margin: 0;
}
.acp-nav-controls a {
	border: 1px solid #41454C;
	color: #DEE1E3;
	background-color: #595D64;
	font-family: Arial;
	font-size: 11px;
	display: block;
	height: 22px;
	margin: 4px 20px 0 20px;
	text-align: center;
	line-height: 22px;
	text-decoration: none;
	border-radius: 2px;
}
.acp-nav-controls a.nav-left {
	width: 96px;
}
.acp-nav-controls a.nav-right {
	width: 96px;
}
.acp-nav-controls > div {
	clear: both;
}

.navtitle {
	padding-left: 20px;
	background: linear-gradient(#6E7278, #686C73);
	height: 26px;
	padding-top: 3px;
	padding-bottom: 3px;
	border-top: 1px solid #7C8189;
	border-bottom: 1px solid #4F545B;
	font-family: Arial;
	font-weight: 900;
	font-size: var(--root-font-size);
	color: #F2F2F2;
	user-select: none;
	cursor: pointer;
}

html[dir="rtl"] .navtitle {
	padding-left: 0px;
	padding-right: 20px;
}

.navtitle-open {
	background: linear-gradient(#ACE1FF, #6EBFEE);
	color: #000C1D;
}

.navgroup a {
	display:flex;
	align-items:center;
	padding: 8px 8px 7px 20px;
	box-sizing:border-box;
	min-height: 29px;
	background: #E0E0E1;
	border-bottom: 1px solid #B1B1B1;
	text-decoration: none;
	font-family: Arial;
	font-size: 11px;
	color: #000C1D;
}

html[dir="rtl"] .navgroup a {
	padding-left: 8px;
	padding-right: 20px;
}

.navgroup a:hover {
	background: #D1D2D4;
}
.nav-spacer {
	height: 9px;
	clear: both;
	background: #595D64;
}
.nav-spacer-wide {
	margin-bottom: 12px;
	clear: both;
}
body {
	background: #E9E9E9;
	font-family: Arial;
	font-size: var(--root-font-size);
	color: #262D35;
}
.pagetitle-container {
	margin: 25px 35px;
}

.pagetitle
{
	display: inline-block;
	font-family: Arial;
	font-weight: bold;
	font-size: 16px;
	color: #0086D3;
}

.pagetitle-note {
	float:right;
}

.warning-message {
	padding: 1px 6px 2px 6px;
	margin-top: -1px;
	font-weight: bold;
	color: #FFF;
	background: #C10000;
}

table.tborder {
	margin-bottom: 20px;
}

.tcat {
	font-family: Arial;
	font-weight: bold;
	font-size: 14px;
	color: #FFF;
	background: #53575E url("admincp_modhd_back.png") repeat-x;
	height: 24px;
	padding-left: 20px;
	padding-right: 20px;
	border-bottom: 1px solid #B4BCC7;
}

.tcat .helplink {
	font-size: 11px;
	font-weight: normal;
	text-decoration: none;
	color: #FFF;
}

.helplink img {height: 16px; width:16px; max-height: 16px; max-width: 16px; display:inline;}

p.header
{
	font-weight:bold;
	margin-top:1em;
	margin-bottom: 0;
}

p.header + p
{
	margin-top: 0;
}

.tcat a {
	color: #ACE1FF;
	text-decoration: none;
}

div.tcat > div {
	margin-top: 4px;
}
div.tcat > b {
	display: block;
	padding-top: 4px;
}
.thead,
.optiontitle {
	background: url("admincp_modtitle_back.png");
	min-height: 30px;
	font-family: Arial;
	font-weight: bold;
	font-size: var(--root-font-size);
	color: #262D35;
	padding-left: 20px;
	padding-right: 20px;
}
/* Meant for single-line (no wrapping) text, match min-height so that it'll be vertically centered*/
.thead--v-centered {
	line-height: 30px;
}


.alt1,
.alt2,
.bg-auto,
.warning,
.warning-red,
.alt-disabled {
	background: #FFF;
	padding: 6px 20px;
}

.main-table-row:nth-child(even of .main-table-row:not(:has(.hide-row))) > .bg-auto, 
.alt2 
{
	background: #F6F6F6;
}

.alt-disabled {
	color: #b8b8b8;
}

.datepicker-selected {
	font-weight:bold;
}


.cms.alt1,
.cms.alt2  {
	background: #FFF;
	padding: 6px 0px;
	word-wrap: break-word;
}
.cms.alt2 {
	background: #F6F6F6;
}
.cms.tfoot {
	padding-left: 4px;
	padding-right: 4px;
}
.cms.thead {
	padding-left: 0px;
	padding-right: 0px;
}
.cms.actionbar select{
	max-width: 200px;
}
.cms.filterlist span {
	white-space: nowrap;
}
@media (max-width: 1000px) {
	.cms.filterlist {
		clear: both;
	}
}
.cms .taglist {
	border: 1px solid #B3B7BF;
}

/* channel permission editor styling */
.channel-permission-row .value-column {
	display: flex;
	justify-content: space-between;
}
.channel-permission-row .value-column .value-wrapper {
	flex-grow: 1;
	white-space: nowrap;
	display: flex;
	justify-content: space-between;
}
.channel-permission-row .value-column .value-wrapper label,
.channel-permission-row .value-column .value-wrapper label input[type="radio"] {
	cursor: pointer;
}
.channel-permission-row .helplink-wrapper {
	width: 16px;
	height: auto;
	flex-shrink: 0;
	flex-grow: 0;
	margin-left: 12px;
}
.channel-permission-row .helplink-wrapper a {
	text-decoration: none;
}
html[dir="rtl"] .channel-permission-row .helplink-wrapper {
	margin-right: 12px;
}

/* Start Styles for Diagnostics Pages */
.diagnostics--imagick-test-png-out section {
	display: flex;
	flex-wrap: wrap;
}
.diagnostics--imagick-test-png-out figure {
	border: 1px solid black;
	padding: 5px;
}
.diagnostics--imagick-test-png-out figure figcaption {
	background-color: black;
	color: white;
	padding: 2px;
}
.diagnostics--imagick-test-png-out figure img {
	padding-top: 5px;
	display: block;
	margin: 0 auto;
}
/* End Styles for Diagnostics Pages */

/* for the tag page */
.cbsubgroup
{
	list-style-type: none;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.acp-style-readonly-mark:before {
	color: red;
	content: "(*)";
}
dfn {
    display: block;
    font-size: 11px;
	/*
	This is actually the default style for dfn in most browsers, but explicitly setting it
	as a reminder of what we need to maintain if/when we use other elements in its place
	in adminCP (e.g. summary/details tags below).
	Probably better to put this in a css-reset, but don't think we have that in adminCP.
	*/
	font-style: italic;
}
/*This is meant to emulate the current dfn styling above for setting descriptions etc*/
details {
	font-size: 11px;
	font-style: italic;
}
details > summary {
	/*Hide the expand/collapse arrow, and also disable the collapse*/
	list-style: none;
	pointer-events: none;
	/*Restore fontsize & style back to regular*/
	font-size: var(--root-font-size);
	font-style: normal;
}

.option-error {
	background: #FFF0F0;
	border: 1px solid red;
	padding: 6px 20px;
	color:black;
}

.warning {
	background: #D5E7F1;
	border: 1px solid #B4BCC7;
}

.warning-red {
	font-weight: bold;
	color: #C10000;
}

.thead .smallfont,
.optiontitle .smallfont {
	font-size: 11px;
	font-weight: normal;
}
.tcat .normal {
	font-size: var(--root-font-size);
	font-weight: normal;
}
.tcat .normal a {
	color: #FFF;
}
.tfoot {
	background: #F1F1F1;
	padding: 8px 20px;
}
a {
	color: #0085D2;
}

a.nohref
{
	cursor: pointer;
	text-decoration: underline;
}

.acp-content-wrapper {
	margin: 0 35px 35px 35px;
}
#tform_table {
	background: #FFF;
}
.stylerow {
	padding: 1px 14px;
}
.acp-footer {
	height: 40px;
	line-height: 40px;
	text-align: center;
	background: #313A43;
	color: #A8ABB1;
	font-family: Arial;
	font-size: var(--root-font-size);
}
.acp-footer a {
	color: #A8ABB1;
	text-decoration: none;
}
input[type="text"],
input[type="password"] {
	border-radius: 2px;
	height: 20px;
	border: 1px solid #B3B7BF;
	padding-left: 5px;
	padding-right: 5px;
}

/* For display order boxes.  This is not currently used as much as it should be */
.display-order {
	width: 2.5rem;
}

/* keep in sync with css_b_icon.css b-icon__channel-icon rules*/
img.channel-icon {
	width: auto;
	height: auto;
	max-width: 32px;
	max-height: 32px;
	padding-right: 12px;
}
.channel-icon-next-to {
	/* to match with .channel-icon width & height above */
	font-size: 32px;
}
img.channel-icon--read {
	opacity: 0.5;
	padding-left: 12px;
}
.image-upload-preview-wrapper {
	display: flex;
	align-items: center;
}
.image-upload-preview-wrapper img {
	max-width: 300px;
	max-height: 300px;
}

/* More reliably align the control to the label */ 
.radiorow label
{
	display: flex;
	align-items: center;
	gap: 3px;
}

.radiorow-horizontal
{
	display: flex;
	align-items: center;
	gap: 3px;
}

.radiorow-vertical
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}

.radiorow input[type="radio"] {
	margin-top: 0px;
	margin-inline-end: 0px;
}

/* We need this for vertical radio lists and some functions that don't use the new flex */
label input[type="radio"] {
	vertical-align: bottom;
}

label input[type="checkbox"],
label .text {
	vertical-align: middle;
}


select {
	border-radius: 2px;
	border: 1px solid #B3B7BF;
}
select option {
	padding-left: 7px;
	padding-right: 7px;
}

/* template select */
select optgroup .template-option {
	padding-left: 22px;
	padding-right: 22px;
}

textarea {
	border: 1px solid #B3B7BF;
	border-radius: 2px;
}


/*
	intended to allow select boxes to match the height of the
	buttons next to them without constraining the actual contents
	if they are larger
*/
.picklist {
	min-height: 24px;
}

.button {
	height: 24px;
	background: url("admincp_btn_secondary.png");
	border: 1px solid #B3B7BF;
	border-radius: 2px;
	margin-left: 10px;
	margin-right: 10px;
	font-family: Arial;
	font-weight: bold;
	font-size: var(--root-font-size);
	color: #262D35;
}
a.button {
	display: inline-block;
	text-decoration: none;
	padding: 0 12px;
	vertical-align: bottom;
	box-sizing: border-box;
	/* line-height matches height of .button minus borders */
	line-height: 22px;
	cursor: default;
}
.button-line-height {
	line-height: 24px;
	box-sizing: border-box;
}
.button:disabled {
	opacity: 0.5;
}
.tcat .button {
	height: 20px;
	background: url("admincp_btn_title.png");
	border: 1px solid #B4BCC7;
	border-radius: 2px;
}
.tfoot .button {
	margin-left: 10px;
	margin-right: 10px;
}
.login-logo {
	background-color: #F1F1F1; /* 595D64 686C73 F1F1F1 */
}
.login-logo img {
	padding: 8px;
}

.checkbox-in-thead {
	font-weight: normal;
}
.acpsmallfont {
	font-size: 9px;
}
.boldrow {
	font-weight: bold;
	padding: 6px 20px;
}

/*
Make the jump controls align with one another.  We might want to apply
these more generally to picklists/buttons but taking a first do no harm approach.
*/
.jump-button {
	vertical-align: middle;
}

.jump-select {
	/* match the button height */
	height: 24px;
	vertical-align: middle;
}


/* Upgrade/install */
#all .tborder {
	background: #D5E7F1;
	border: 1px solid #B4BCC7;
}


/* ############################################################################# */
/* TEMPLATE EDITOR AND COLOR KEYS */

/* Used for the <select> based template editor and color key legends */
.darkbg
{
	color: #000000;
	background: #FFFFFF;
}

/* Color for template group text */
.templategroup
{
	color: #000000;
}

/* In the <select> based template editor, set a background-color for template groups */
option.templategroup
{
	background: #EEEEEE;
}

/* Color preview buttons on the CSS editor */
.color_input_container {
	display:inline;
	float: var(--vb-left);
}

.color_input_control {
	float: var(--vb-left);
	margin-right:4px;
}

html[dir="rtl"] .color_input_control {
	margin-right:0;
	margin-left:4px;
}

.colorpreview
{
	font-weight: normal;
	border: 1px solid black;
	width: 40px;
	height: 21px;
	float: var(--vb-left);
	display: inline;
	border-style: inset;
	border-width: 1px;
	background: rgb(0, 0, 0) none repeat scroll 0% 0%;
	background-clip: initial;
	background-origin: initial;
}

/* Stylevar editor styles */
.stylevar-preview-bg {
	width: 100%;
	height: 30px;
	border: 1px solid #000000;
}
.stylevar-autocomplete-menu {
	max-width: 50%;
	height: 0;
}
.stylevar-autocomplete-menu .ui-autocomplete{
	background: #FFFFFF;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid #B3B7BF;
}
.stylevar-autocomplete-menu a {
	box-sizing: border-box;
	display: block;
	padding: 3px;
	width: 100%;
	color: inherit;
}
.stylevar-autocomplete-menu .ui-state-hover {
	background-color: #D1D2D4;
}

/* 
	stylevar editor left panel styles -- should really make this use more general styling 
  or at least less generic class names but there aren't any actual conflicts
*/

.leftcontrol {
	width:325px;
}

.leftcontrol-meta-row {
	margin-bottom: 8px;
}

.leftcontrol-meta-row input[type="checkbox"] {
	margin: 0;
	vertical-align: bottom;
}

.toggle-link-selected {
	color: #000;
	text-decoration: none;
	font-weight: bold;
}

#varlist option {
	padding-left:20px;
}

#varlist option.optgroup {
	padding-left:0;
	font-weight:bold;
}

#varlist optgroup {
	font-style: normal;
}

#edit_container {
	position:relative;
}
#edit_scroller {
	width:100%;
	min-height:573px;
	border:inset 2px;
	background:white;
}

.stylevar-editor-select td {
	font:11px Verdana, Geneva, sans-serif;
}

.stylevar-editor-select input, 
.stylevar-editor-select select {
	font:11px Verdana, Geneva, sans-serif;
}

.stylevar-editor-select input[type="text"], .stylevar-editor-select select {
	margin-top:2px;
}

.stylevar-editor-select input[type="text"] {
	width:150px;
}

/* misc */
.code, .code-g, .code-i, code-c
{
	font: 10pt consolas, 'courier new', courier, monospace;
}

.textarea-full-width
{
	width: 100%;
	/* We need this so that box doesn't spill out over the boundaries */
	box-sizing: border-box;
}

optgroup
{
	font-style: italic;
	font-weight: bold;
}

/* Replacement var display */
.ldi li, .lsq a {
	font: 11px tahoma;
	list-style-type:disc;
}

/* ############################################################################# */
/* CUSTOMIZED, INHERITED, GLOBAL / STANDARD COLORS */

/* Global/ Standard elements */
.col-g, input.col-g, textarea.col-g, .code-g, .col-g a:link, .col-g a:visited, .col-g a:active, .code
{
	color: #001F30;
}

/* Inherited elements */
.col-i, input.col-i, textarea.col-i, .code-i, .col-i a:link, .col-i a:visited, .col-i a:active
{
	color: #FF5500;
}

/* Customized elements */
.col-c, input.col-c, textarea.col-c, .code-c, .col-c a:link, .col-c a:visited, .col-c a:active
{
	color: #CC0000;
}


/* ############################################################################# */
/* TEMPLATE DIFF VIEWER */
.diff-unchanged
{
	background-color: #dddddd;
	color: #000000;
}

.diff-notext
{
	background-color: #c0c0c0;
	color: #000000;
}

.diff-changed
{
	background-color: #f0f060;
	color: #000000;
}

.diff-added, .diff-inline-added
{
	background-color: #B0F0B0;
	color: #000000;
	border: 0 solid #00FF00;
}

.diff-inline-added-start
{
	border-top-width: 1px;
}

.diff-inline-added-end
{
	border-bottom-width: 1px;
}

.diff-deleted, .diff-inline-deleted
{
	background-color: #F0B0B0;
	color: #000000;
	border: 0 solid #EB5858;
}

.diff-inline-deleted-start
{
	border-top-width: 1px
}

.diff-inline-deleted-end
{
	border-bottom-width: 1px;
}

.diff-inline-break
{
	border: solid gray;
	border-width:1px 0;
}

.diff-linenumber
{
	color: #999988;
	background-color: #EEEEDD;
	border-bottom: 1px solid #999988;
	border-right: 1px solid #CCCCCC;
	vertical-align: top;
	text-align: center;
}

.merge-nochange
{
	background-color: #dddddd;
	color: #000000;
}

.merge-successful
{
	background-color: #f0f060;
	color: #000000;
}

.merge-conflict
{
	background: #F0B0B0;
	color: #000000;
}

#compare_inline .merge-conflict
{
	background: #F0B0B0 url(../../cpstyles/vBulletin_5_Default/merge_conflict_bg.png) repeat-y;
	color: #000000;
	padding-left: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.merge-conflict-row
{
	padding-left: 20px;
	border-bottom: 1px solid #D04040;
}

.merge-conflict-final-row
{
	padding-left: 20px;
}

.template-text-merged
{
	color: #0000C0;
}

.template-text-conflicted
{
	color: #D00000;
	font-weight: bold;
}


/* ############################################################################# */
/* MODERATOR LISTING */

/* Moderator was last online today */
.modtoday
{
	color: #001F30;
}

/* Moderator was last online yesterday */
.modyesterday
{
	color: #008000;
}

/* Moderator was last online within the last 10 days */
.modlasttendays
{
	color: #0000CD;
}

/* Moderator has not been on in the last 10 days */
.modsincetendays
{
	color: #FF5500;
}

/* Moderator has not been on in last 30 days */
.modsincethirtydays
{
	color: #CC0000;
}

/* Titles for <fieldset> elements */
legend
{
	font-weight: bold;
	color: #000000;
}

.normal
{
	font-weight: normal;
}


/* ############################################################################# */
/* STYLEVAR EDITOR */

/* Stylevar editor stylevar inheritance */
.stylevar-autocomplete-menu .ui-autocomplete {
	max-height: 250px;
	min-width: 350px;
	overflow: auto;
}
.stylevar-autocomplete-menu .ui-autocomplete li:hover {
	cursor: pointer;
	background: #EEE;
}
.readonly {
	background: #EEE;
}


/* ############################################################################# */
/* Page nav */

/* partially taken from css_global */
.toolbar-pagenav-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	background: none 0 0,linear-gradient(to bottom,#FEFEFF,#D5D8DA),#E4E6E7;
	padding: 5px 10px;
}

.pagenav-controls {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pagenav-controls select,
.pagenav-controls input:not([type='button']) {
	margin-top:-1px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.pagenav-controls input:not([type='button']) {
	text-align:center;
	width:24px;
}

/*
 * partially taken from css_utilities
 */
.pagenav-controls .horizontal-arrows .arrow:first-child {
	border-right: 1px solid #CDD1D4;
}
html[dir="rtl"] .pagenav-controls .horizontal-arrows .arrow:first-child {
	border-right: none;
	border-left: 1px solid #CDD1D4;
}

.pagenav-controls .horizontal-arrows {
	border: 1px solid #AEB3B6;
	background: none 0 0,#FFFFFF;
	color: #000000;
	/*height: 2.2rem;*/
	height: 100%;
	width: auto;
	margin-left: 5px;
	cursor:pointer;
	border-radius: 2px;
	display: flex;
	flex-direction: row;
}
html[dir="rtl"] .pagenav-controls .horizontal-arrows {
	margin-left: 0;
	margin-right: 5px;
}
.pagenav-controls .horizontal-arrows .arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 13px;
	text-align: center;
	height: 100%;
	color: #000000;
}

.pagenav-controls .horizontal-arrows .arrow.h-disabled {
	color: #a9aaab;
}


/* ############################################################################# */
/* Displayname vs username disambiugation in adminCP */
.displayname {
	font-weight: bolder;
}
.username {
	font-weight: lighter;
}

.page { background-color:white; color:black; }
.time { color:silver; }
.error { color:red; }

/* Start Styles for CMS Pages */
.b-pagination {
	display: inline-block;
}
.b-pagination a {
	padding: 2px;
	cursor: pointer;
	background: #FFFFFF;
	border: 1px solid #BFC5C9;
}
.b-pagination a.selected {
	background: #37ACFE;
	border: 1px solid #2989CC;
	color: #FFFFFF;
}

.h-margin-top-s {
	margin-top:10px;
}
.h-margin-bottom-s {
	margin-bottom:10px;
}

.h-margin-top-xs {
	margin-top:3px;
}

.h-width-xl {
	width: 45%;
}

.h-width-l {
	width: 25%;
}

.h-width-m {
	width: 10%;
}

.h-width-s {
	width: 5%;
}

.h-relative {
	position: relative;
}

/* DatePicker Container */
.ui-datepicker {
	border: 1px solid #2989CC;
	padding: 5px;
	background-color: #FFFFFF;
}
.ui-datepicker td {
	padding: 1px;
}
.ui-datepicker a {
	cursor: pointer;
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
html[dir="ltr"] .ui-datepicker .ui-datepicker-prev, html[dir="rtl"] .ui-datepicker .ui-datepicker-next {left:2px;}
html[dir="ltr"] .ui-datepicker .ui-datepicker-next, html[dir="rtl"] .ui-datepicker .ui-datepicker-prev {right:2px;}

#ui-datepicker-div { display:none }
/* End of DatePicker Container */

/* End Styles for CMS Pages */

/* Start Styles for Hooks & Products System Pages */
.product-options {
	border: 1px solid #53575E;
	margin-top: 5px;
}
.product-options__label {
	margin: 5px 15px;
	font-weight: bold;
}
.product-options__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
html[dir="ltr"] .product-options__list-item {
	margin-left: 15px;
}
html[dir="rtl"] .product-options__list-item {
	margin-right: 15px;
}
.product-options__list-item:last-child {
	margin-bottom: 8px;
}
.product-options__list .collapse {
	margin: 5px 0 0;
}
.product-options__list .collapse-label {
	/* stylevar not needed since left and right values are equal */
	padding-left: 15px;
	padding-right: 15px;
}
.product-options__list .collapse-content .product-options__list-item:last-child {
	margin-bottom: 3px;
}
/* End Styles for Hooks & Products System Pages */

/* Start Styles for Manage Reactions Pages */
.reaction-cell-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.reaction-cell-wrapper > div {
	flex-grow: 1;
}
.reaction-item {
	/*--emoji-size set in adminfunctions.php print_cp_header()*/
	min-width: var(--emoji-size);
	width: auto;
	height: var(--emoji-size);
    font-size: var(--emoji-size);
    display: flex;
	/*ATM, this causes problems for single-reaction edit page. We don't need this in the list view because table-cell display tends to center things*/
    /*justify-content: center;*/
    align-items: center;
	padding: 1px;
}
.reaction-item img {
	width: auto;
	height: var(--emoji-size);
}
/* End Styles for Manage Reactions Pages */

/* Start styles for utility functions*/
.alt1 .collapse {
	background-color: #F6F6F6;
}

.alt2 .collapse {
	background-color: #FFF;
}

.collapse-label {
	display: block;
	cursor: pointer;
	color: white;
	font-weight:bold;
	padding: 3px;
	background-color: #53575E;
	user-select: none;
}

.collapse-content {
	padding-top: 5px;
	padding-bottom: 5px;
}


/* admincp icons */
.vb-icon {
	cursor: pointer;
	display: inline-block;
	background-image: var(--vb-spriteurl);
	top: 0;
}

.vb-icon.up-arrow,
.vb-icon.down-arrow {
	background-position: -16px -42px;
	width: 9px;
	height: 16px;

	/* This is needed for the sort up/down buttons.  Maybe should break up inito it's own class */
	margin: -3px 3px;
	position: absolute;
}

.vb-icon.down-arrow {
	background-position: 0px -42px;
}

.vb-icon.left-arrow,
.vb-icon.right-arrow {
	background-position:-128px -48px;
	height: 10px;
	width: 6px;
	margin: auto;
}

.vb-icon.left-arrow {
	background-position:-104px -48px;
}


/*
 Note, this is used with position: absolute, which requires the parent to be position: relative.
 iff element can't stretch, left has precedence when container is ltr & right for vice versa, and since the icon
 will likely have a fixed width, we can probably just define both above, and let the precedence take care of it, but
 this is just easier to understand.
*/
html[dir="ltr"] .vb-icons {
	right: -14px;
}
html[dir="rtl"] .vb-icons {
	left: -14px;
}

/*fontawesome related css*/
:root {
	--icon-wrapper-size: 16px;
	/* currently seems to be 12px... */
	--icon-size: inherit;
}
.fa,
.fa-classic,
.fa-sharp,
.fas,
.fa-solid,
.far,
.fa-regular,
.fab,
.fa-brands {
	width: var(--icon-wrapper-size);
	height: var(--icon-wrapper-size);
	font-size: var(--icon-size);
}

/* End styles for utility functions */

/* Styles that need Stylevars */
#acp-top-links li.rightmost {
	padding-inline-end: 0;
}

.acp-nav-controls a.nav-left {
	float: var(--vb-left);
	margin-inline-end: 0px;
}

.acp-nav-controls a.nav-right {
	float: var(--vb-left);
	margin-inline-end: 0px;
	margin-inline-start: 4px;
}

.acp-nav-arrow {
	max-height: 10px; 
	max-width:10px;
	margin-inline-end: 20px;
}

.tcat {
	text-align: var(--vb-left);
}

#acp-logo-bar .logo {
	float: var(--vb-left);
}

#acp-logo-bar .links {
	float: var(--vb-left);
}

#acp-logo-bar .header-item {
	float: var(--vb-left);
	margin-inline-end: 15px;
}

#acp-logo-bar .search {
	float: var(--vb-right);
}

#acp-logo-bar .search {
	margin-inline-end: 35px;
}

#acp-logo-bar .search .button {
	float: var(--vb-right);
	margin-inline-start: 5px;
	margin-inline-end: 0;
}

.tfoot {
	text-align: var(--vb-right);
}

.tfoot ul {
	text-align: var(--vb-left);
}

.adminmessage-button-item,
/* extra selectors to override other css */
.button.adminmessage-button-item {
	margin: 0;
	min-width: 20px;
	display: inline-block;
}

.last-column-jump tr.cellrow td:last-child {
	white-space: nowrap;
}

.last-column-jump tr.cellrow td:last-child .button {
	margin-inline-end: 0px;
}

.button.adminmessage-button-item {
	margin-inline-start: 10px;
}

/*========================================================================*\
|| ######################################################################
|| # Downloaded: 13:27, Sun Aug 30th 2026
|| # CVS: $RCSfile$ - $Revision: 122825 $
|| ######################################################################
\*========================================================================*/
