/* LEGACY */


/* ***************************************
	RESET CSS
*************************************** */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
body {
	background-color: white;
}
html, body {
	height: 100%;
	margin-bottom: 1px;
}
img {
	border-width:0;
	border-color:transparent;
}
:focus {
	outline: 0 none;
}
ol, ul {
	list-style: none;
}
em, i {
	font-style:italic;
}
ins {
	text-decoration:none;
}
del {
	text-decoration:line-through;
}
strong, b {
	font-weight:bold;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
	vertical-align: top;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a {
	text-decoration: none;
}

/* Clearfix */
.clearfix:after,
.elgg-grid:after,
.elgg-layout:after,
.elgg-inner:after,
.elgg-page-header:after,
.elgg-page-footer:after,
.elgg-head:after,
.elgg-foot:after,
.elgg-col:after,
.elgg-image-block:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;	
}

/* Fluid width container that does not wrap floats */
.elgg-body,
.elgg-col-last {
	display: block;
	width: auto;
	word-wrap: break-word;
	overflow: hidden;
	
	/* IE 6, 7 */
	zoom:1;
	*overflow:visible;
}

.elgg-body:after,
.elgg-col-last:after {
	display: block;
	visibility: hidden;
	height: 0 !important;
	line-height: 0;
	overflow: hidden;
	
	/* Stretch to fill up available space */
	font-size: xx-large;
	content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x ";
}

/* ***************************************
 * MENUS
 *
 * To add separators to a menu:
 * .elgg-menu-$menu > li:after {content: '|'; background: ...;}
 *************************************** */
/* Enabled nesting of dropdown/flyout menus */
.elgg-menu > li { position: relative; }

.elgg-menu > li:last-child::after {
	display: none;
}

/* Maximize click target */
.elgg-menu > li > a { display: block }

/* Horizontal menus w/ separator support */
.elgg-menu-hz > li,
.elgg-menu-hz > li:after,
.elgg-menu-hz > li > a,
.elgg-menu-hz > li > span {
	vertical-align: middle;
}

/* Allow inline image blocks in horizontal menus */
.elgg-menu-hz .elgg-body:after { content: '.'; }

/* Inline block */
.elgg-gallery > li,
.elgg-button,
.elgg-icon,
.elgg-menu-hz > li,
.elgg-menu-hz > li:after,
.elgg-menu-hz > li > a,
.elgg-menu-hz > li > span {
	/* Google says do this, but why? */
	position: relative;

	display: inline-block;
}

/* ***************************************
	GRID
*************************************** */
.elgg-col {
	float: left;
}
.elgg-col-1of1 {
	float: none;
}
.elgg-col-1of2 {
	width: 50%;
}
.elgg-col-1of3 {
	width: 33.33%;
}
.elgg-col-2of3 {
	width: 66.66%;
}
.elgg-col-1of4 {
	width: 25%;
}
.elgg-col-3of4 {
	width: 75%;
}
.elgg-col-1of5 {
	width: 20%;
}
.elgg-col-2of5 {
	width: 40%;
}
.elgg-col-3of5 {
	width: 60%;
}
.elgg-col-4of5 {
	width: 80%;
}
.elgg-col-1of6 {
	width: 16.66%;
}
.elgg-col-5of6 {
	width: 83.33%;
}

/* ***************************************
	Typography
*************************************** */
body {
	font-size: 80%;
	line-height: 1.4em;
	font-family: "Lucida Grande", Arial, Tahoma, Verdana, sans-serif;
}

a {
	color: #4690D6;
}

a:hover,
a.selected { 	color: #555555;
	text-decoration: underline;
}

p {
	margin-bottom: 15px;
}

p:last-child {
	margin-bottom: 0;
}

pre, code {
	font-family: Monaco, "Courier New", Courier, monospace;
	font-size: 12px;
	
	background:#EBF5FF;
	color:#000000;
	overflow:auto;

	overflow-x: auto; /* Use horizontal scroller if needed; for Firefox 2, not needed in Firefox 3 */

	white-space: pre-wrap;
	word-wrap: break-word; /* IE 5.5-7 */
	
}

pre {
	padding:3px 15px;
	margin:0px 0 15px 0;
	line-height:1.3em;
}

code {
	padding:2px 3px;
}

.elgg-monospace {
	font-family: Monaco, "Courier New", Courier, monospace;
}

blockquote {
	line-height: 1.3em;
	padding:3px 15px;
	margin:0px 0 15px 0;
	background:#EBF5FF;
	border:none;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	color: #0054A7;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.5em; line-height: 1.1em; padding-bottom:5px}
h3 { font-size: 1.2em; }
h4 { font-size: 1.0em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.8em; }

.elgg-heading-site, .elgg-heading-site:hover {
	font-size: 2em;
	line-height: 1.4em;
	color: white;
	font-style: italic;
	font-family: Georgia, times, serif;
	text-shadow: 1px 2px 4px #333333;
	text-decoration: none;
}

.elgg-heading-main {
	float: left;
	max-width: 530px;
	margin-right: 10px;
}
.elgg-heading-basic {
	color: #0054A7;
	font-size: 1.2em;
	font-weight: bold;
}

.elgg-subtext {
	color: #666666;
	font-size: 125%;
	line-height: 1.4em;
	font-style: italic;
}

.elgg-text-help {
	display: block;
	font-size: 85%;
	font-style: italic;
}

.elgg-quiet {
	color: #666;
}

.elgg-loud {
	color: #0054A7;
}

/* ***************************************
	USER INPUT DISPLAY RESET
*************************************** */
.elgg-output {
	margin-top: 10px;
}

.elgg-output dt { font-weight: bold }
.elgg-output dd { margin: 0 0 1em 1em }

.elgg-output ul, .elgg-output ol {
	margin: 0 1.5em 1.5em 0;
	padding-left: 1.5em;
}
.elgg-output ul {
	list-style-type: disc;
}
.elgg-output ol {
	list-style-type: decimal;
}
.elgg-output table {
	border: 1px solid #ccc;
}
.elgg-output table td {
	border: 1px solid #ccc;
	padding: 3px 5px;
}
.elgg-output img {
	max-width: 100%;
	height: auto;
}

/* ***************************************
	Form Elements
*************************************** */
fieldset > div {
	margin-bottom: 15px;
}
fieldset > div:last-child {
	margin-bottom: 0;
}
.elgg-form-alt > fieldset > .elgg-foot {
	border-top: 1px solid #CCC;
	padding: 10px 0;
}

label {
	font-weight: bold;
	color: #333;
	font-size: 110%;
}

input, textarea {
	border: 1px solid #ccc;
	color: #666;
	font: 120% Arial, Helvetica, sans-serif;
	padding: 5px;
	width: 100%;	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input[type=text]:focus, textarea:focus {
	border: solid 1px #4690d6;
	background: #e4ecf5;
	color:#333;
}

textarea {
	height: 200px;
}


.elgg-longtext-control {
	float: right;
	margin-left: 14px;
	font-size: 80%;
	cursor: pointer;
}


.elgg-input-access {
	margin:5px 0 0 0;
}

input[type="checkbox"],
input[type="radio"] {
	margin:0 3px 0 0;
	padding:0;
	border:none;
	width:auto;
}
.elgg-input-checkboxes.elgg-horizontal li,
.elgg-input-radios.elgg-horizontal li {
	display: inline;
	padding-right: 10px;
}

.elgg-form-login, .elgg-form-account {
	max-width: 450px;
}

/* ***************************************
	FRIENDS PICKER
*************************************** */
.friends-picker-main-wrapper {
	margin-bottom: 15px;
}
.friends-picker-container h3 {
	font-size:4em !important;
	text-align: left;
	margin:10px 0 20px !important;
	color:#999 !important;
	background: none !important;
	padding:0 !important;
}
.friends-picker .friends-picker-container .panel ul {
	text-align: left;
	margin: 0;
	padding:0;
}
.friends-picker-wrapper {
	margin: 0;
	padding:0;
	position: relative;
	width: 730px;
}
.friends-picker {
	position: relative;
	overflow: hidden;
	margin: 0;
	padding:0;
	width: 730px;
	height: auto;
	background-color: #dedede;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.friendspicker-savebuttons {
	background: white;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	margin:0 10px 10px;
}
.friends-picker .friends-picker-container { /* long container used to house end-to-end panels. Width is calculated in JS  */
	position: relative;
	left: 0;
	top: 0;
	width: 100%;
	list-style-type: none;
}
.friends-picker .friends-picker-container .panel {
	float:left;
	height: 100%;
	position: relative;
	width: 730px;
	margin: 0;
	padding:0;
}
.friends-picker .friends-picker-container .panel .wrapper {
	margin: 0;
	padding:4px 10px 10px 10px;
	min-height: 230px;
}
.friends-picker-navigation {
	margin: 0 0 10px;
	padding:0 0 10px;
	border-bottom:1px solid #ccc;
}
.friends-picker-navigation ul {
	list-style: none;
	padding-left: 0;
}
.friends-picker-navigation ul li {
	float: left;
	margin:0;
	background:white;
}
.friends-picker-navigation a {
	font-weight: bold;
	text-align: center;
	background: white;
	color: #999;
	text-decoration: none;
	display: block;
	padding: 0;
	width:20px;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.tabHasContent {
	background: white;
	color:#333 !important;
}
.friends-picker-navigation li a:hover {
	background: #333;
	color:white !important;
}
.friends-picker-navigation li a.current {
	background: #4690D6;
	color:white !important;
}
.friends-picker-navigation-l, .friends-picker-navigation-r {
	position: absolute;
	top: 46px;
	text-indent: -9000em;
}
.friends-picker-navigation-l a, .friends-picker-navigation-r a {
	display: block;
	height: 40px;
	width: 40px;
}
.friends-picker-navigation-l {
	right: 48px;
	z-index:1;
}
.friends-picker-navigation-r {
	right: 0;
	z-index:1;
}
.friends-picker-navigation-l {
	background: url("https://12andus.com/_graphics/friendspicker.png") no-repeat left top;
}
.friends-picker-navigation-r {
	background: url("https://12andus.com/_graphics/friendspicker.png") no-repeat -60px top;
}
.friends-picker-navigation-l:hover {
	background: url("https://12andus.com/_graphics/friendspicker.png") no-repeat left -44px;
}
.friends-picker-navigation-r:hover {
	background: url("https://12andus.com/_graphics/friendspicker.png") no-repeat -60px -44px;
}
.friendspicker-savebuttons .elgg-button-submit,
.friendspicker-savebuttons .elgg-button-cancel {
	margin:5px 20px 5px 5px;
}
.friendspicker-members-table {
	background: #dedede;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	margin:10px 0 0;
	padding:10px 10px 0;
}

/* ***************************************
	AUTOCOMPLETE
*************************************** */
.ui-autocomplete {
	position: absolute;
	cursor: default;
}
.elgg-autocomplete-item .elgg-body {
	max-width: 600px;
}
.ui-autocomplete {
	background-color: white;
	border: 1px solid #ccc;
	overflow: hidden;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.ui-autocomplete .ui-menu-item {
	padding: 0px 4px;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.ui-autocomplete .ui-menu-item:hover {
	background-color: #eee;
}
.ui-autocomplete a:hover {
	text-decoration: none;
	color: #4690D6;
}
.ui-autocomplete a.ui-state-hover {
	background-color: #eee;
	display: block;
}

/* ***************************************
	USER PICKER
*************************************** */
.elgg-user-picker-list li:first-child {
	border-top: 1px dotted #ccc;
	margin-top: 5px;
}
.elgg-user-picker-list > li {
	border-bottom: 1px dotted #ccc;
}

/* ***************************************
      DATE PICKER
**************************************** */
.ui-datepicker {
	display: none;

	margin-top: 3px;
	width: 208px;
	background-color: white;
	border: 1px solid #0054A7;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	overflow: hidden;

	-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.ui-datepicker-inline {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.ui-datepicker-header {
	position: relative;
	background: #4690D6;
	color: white;
	padding: 2px 0;
	border-bottom: 1px solid #0054A7;
}
.ui-datepicker-header a {
	color: white;
}
.ui-datepicker-prev, .ui-datepicker-next {
	position: absolute;
	top: 5px;
	cursor: pointer;
}
.ui-datepicker-prev {
	left: 6px;
}
.ui-datepicker-next {
	right: 6px;
}
.ui-datepicker-title {
	line-height: 1.8em;
	margin: 0 30px;
	text-align: center;
	font-weight: bold;
}
.ui-datepicker-calendar {
	margin: 4px;
}
.ui-datepicker th {
	color: #0054A7;
	border: none;
	font-weight: bold;
	padding: 5px 6px;
	text-align: center;
}
.ui-datepicker td {
	padding: 1px;
}
.ui-datepicker td span, .ui-datepicker td a {
	display: block;
	padding: 2px;
	line-height: 1.2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker-calendar .ui-state-default {
	border: 1px solid #ccc;
	color: #4690D6;;
	background: #fafafa;
}
.ui-datepicker-calendar .ui-state-hover {
	border: 1px solid #aaa;
	color: #0054A7;
	background: #eee;
}
.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-calendar .ui-state-active.ui-state-hover {
	font-weight: bold;
	border: 1px solid #0054A7;
	color: #0054A7;
	background: #E4ECF5;
}
/* **************************
	BUTTONS
************************** */

/* Base */
.elgg-button {
	font-size: 14px;
	font-weight: bold;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	width: auto;
	padding: 2px 4px;
	cursor: pointer;
	outline: none;
	
	-webkit-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
	-moz-box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
	box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.40);
}
a.elgg-button {
	padding: 3px 6px;
}

/* Submit: This button should convey, "you're about to take some definitive action" */
.elgg-button-submit {
	color: white;
	text-shadow: 1px 1px 0px black;
	text-decoration: none;
	border: 1px solid #4690d6;
	background: #4690d6 url(https://12andus.com/_graphics/button_graduation.png) repeat-x left 10px;
}

.elgg-button-submit:hover {
	border-color: #0054a7;
	text-decoration: none;
	color: white;
	background: #0054a7 url(https://12andus.com/_graphics/button_graduation.png) repeat-x left 10px;
}

.elgg-button-submit.elgg-state-disabled {
	background: #999;
	border-color: #999;
	cursor: default;
}

/* Cancel: This button should convey a negative but easily reversible action (e.g., turning off a plugin) */
.elgg-button-cancel {
	color: #333;
	background: #ddd url(https://12andus.com/_graphics/button_graduation.png) repeat-x left 10px;
	border: 1px solid #999;
}
.elgg-button-cancel:hover {
	color: #444;
	background-color: #999;
	background-position: left 10px;
	text-decoration: none;
}

/* Action: This button should convey a normal, inconsequential action, such as clicking a link */
.elgg-button-action {
	background: #ccc url(https://12andus.com/_graphics/button_background.gif) repeat-x 0 0;
	border:1px solid #999;
	color: #333;
	padding: 2px 15px;
	text-align: center;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0 1px 0 white;
	cursor: pointer;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.elgg-button-action:hover,
.elgg-button-action:focus {
	background: #ccc url(https://12andus.com/_graphics/button_background.gif) repeat-x 0 -15px;
	color: #111;
	text-decoration: none;
	border: 1px solid #999;
}

/* Delete: This button should convey "be careful before you click me" */
.elgg-button-delete {
	color: #bbb;
	text-decoration: none;
	border: 1px solid #333;
	background: #555 url(https://12andus.com/_graphics/button_graduation.png) repeat-x left 10px;
	text-shadow: 1px 1px 0px black;
}
.elgg-button-delete:hover {
	color: #999;
	background-color: #333;
	background-position: left 10px;
	text-decoration: none;
}

.elgg-button-dropdown {
	padding:3px 6px;
	text-decoration:none;
	display:block;
	font-weight:bold;
	position:relative;
	margin-left:0;
	color: white;
	border:1px solid #71B9F7;
	
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
	
	-webkit-box-shadow: 0 0 0;
	-moz-box-shadow: 0 0 0;
	box-shadow: 0 0 0;
	
	/*background-image:url(https://12andus.com/_graphics/elgg_sprites.png);
	background-position:-150px -51px;
	background-repeat:no-repeat;*/
}

.elgg-button-dropdown:after {
	content: " \25BC ";
	font-size:smaller;
}

.elgg-button-dropdown:hover {
	background-color:#71B9F7;
	text-decoration:none;
}

.elgg-button-dropdown.elgg-state-active {
	background: #ccc;
	outline: none;
	color: #333;
	border:1px solid #ccc;
	
	-webkit-border-radius:4px 4px 0 0;
	-moz-border-radius:4px 4px 0 0;
	border-radius:4px 4px 0 0;
}

/* ***************************************
	ICONS
*************************************** */

.elgg-icon {
	background: transparent url(https://12andus.com/_graphics/elgg_sprites.png) no-repeat left;
	width: 16px;
	height: 16px;
	margin: 0 2px;
}
.elgg-icon-arrow-left {
	background-position: 0 -0px;
}
.elgg-icon-arrow-right {
	background-position: 0 -18px;
}
.elgg-icon-arrow-two-head {
	background-position: 0 -36px;
}
.elgg-icon-attention:hover {
	background-position: 0 -54px;
}
.elgg-icon-attention {
	background-position: 0 -72px;
}
.elgg-icon-calendar {
	background-position: 0 -90px;
}
.elgg-icon-cell-phone {
	background-position: 0 -108px;
}
.elgg-icon-checkmark:hover {
	background-position: 0 -126px;
}
.elgg-icon-checkmark {
	background-position: 0 -144px;
}
.elgg-icon-clip:hover {
	background-position: 0 -162px;
}
.elgg-icon-clip {
	background-position: 0 -180px;
}
.elgg-icon-cursor-drag-arrow {
	background-position: 0 -198px;
}
.elgg-icon-delete-alt:hover {
	background-position: 0 -216px;
}
.elgg-icon-delete-alt {
	background-position: 0 -234px;
}
.elgg-icon-delete:hover {
	background-position: 0 -252px;
}
.elgg-icon-delete {
	background-position: 0 -270px;
}
.elgg-icon-download:hover {
	background-position: 0 -288px;
}
.elgg-icon-download {
	background-position: 0 -306px;
}
.elgg-icon-eye {
	background-position: 0 -324px;
}
.elgg-icon-facebook {
	background-position: 0 -342px;
}
.elgg-icon-grid:hover {
	background-position: 0 -360px;
}
.elgg-icon-grid {
	background-position: 0 -378px;
}
.elgg-icon-home:hover {
	background-position: 0 -396px;
}
.elgg-icon-home {
	background-position: 0 -414px;
}
.elgg-icon-hover-menu:hover {
	background-position: 0 -432px;
}
.elgg-icon-hover-menu {
	background-position: 0 -450px;
}
.elgg-icon-info:hover {
	background-position: 0 -468px;
}
.elgg-icon-info {
	background-position: 0 -486px;
}
.elgg-icon-link:hover {
	background-position: 0 -504px;
}
.elgg-icon-link {
	background-position: 0 -522px;
}
.elgg-icon-list {
	background-position: 0 -540px;
}
.elgg-icon-lock-closed {
	background-position: 0 -558px;
}
.elgg-icon-lock-open {
	background-position: 0 -576px;
}
.elgg-icon-mail-alt:hover {
	background-position: 0 -594px;
}
.elgg-icon-mail-alt {
	background-position: 0 -612px;
}
.elgg-icon-mail:hover {
	background-position: 0 -630px;
}
.elgg-icon-mail {
	background-position: 0 -648px;
}
.elgg-icon-photo {
	background-position: 0 -666px;
}
.elgg-icon-print-alt {
	background-position: 0 -684px;
}
.elgg-icon-print {
	background-position: 0 -702px;
}
.elgg-icon-push-pin-alt {
	background-position: 0 -720px;
}
.elgg-icon-push-pin {
	background-position: 0 -738px;
}
.elgg-icon-redo {
	background-position: 0 -756px;
}
.elgg-icon-refresh:hover {
	background-position: 0 -774px;
}
.elgg-icon-refresh {
	background-position: 0 -792px;
}
.elgg-icon-round-arrow-left {
	background-position: 0 -810px;
}
.elgg-icon-round-arrow-right {
	background-position: 0 -828px;
}
.elgg-icon-round-checkmark {
	background-position: 0 -846px;
}
.elgg-icon-round-minus {
	background-position: 0 -864px;
}
.elgg-icon-round-plus {
	background-position: 0 -882px;
}
.elgg-icon-rss {
	background-position: 0 -900px;
}
.elgg-icon-search-focus {
	background-position: 0 -918px;
}
.elgg-icon-search {
	background-position: 0 -936px;
}
.elgg-icon-settings-alt:hover {
	background-position: 0 -954px;
}
.elgg-icon-settings-alt {
	background-position: 0 -972px;
}
.elgg-icon-settings {
	background-position: 0 -990px;
}
.elgg-icon-share:hover {
	background-position: 0 -1008px;
}
.elgg-icon-share {
	background-position: 0 -1026px;
}
.elgg-icon-shop-cart:hover {
	background-position: 0 -1044px;
}
.elgg-icon-shop-cart {
	background-position: 0 -1062px;
}
.elgg-icon-speech-bubble-alt:hover {
	background-position: 0 -1080px;
}
.elgg-icon-speech-bubble-alt {
	background-position: 0 -1098px;
}
.elgg-icon-speech-bubble:hover {
	background-position: 0 -1116px;
}
.elgg-icon-speech-bubble {
	background-position: 0 -1134px;
}
.elgg-icon-star-alt {
	background-position: 0 -1152px;
}
.elgg-icon-star-empty:hover {
	background-position: 0 -1170px;
}
.elgg-icon-star-empty {
	background-position: 0 -1188px;
}
.elgg-icon-star:hover {
	background-position: 0 -1206px;
}
.elgg-icon-star {
	background-position: 0 -1224px;
}
.elgg-icon-tag:hover {
	background-position: 0 -1242px;
}
.elgg-icon-tag {
	background-position: 0 -1260px;
}
.elgg-icon-thumbs-down-alt:hover {
	background-position: 0 -1278px;
}
.elgg-icon-thumbs-down:hover,
.elgg-icon-thumbs-down-alt {
	background-position: 0 -1296px;
}
.elgg-icon-thumbs-down {
	background-position: 0 -1314px;
}
.elgg-icon-thumbs-up-alt:hover {
	background-position: 0 -1332px;
}
.elgg-icon-thumbs-up:hover,
.elgg-icon-thumbs-up-alt {
	background-position: 0 -1350px;
}
.elgg-icon-thumbs-up {
	background-position: 0 -1368px;
}
.elgg-icon-trash {
	background-position: 0 -1386px;
}
.elgg-icon-twitter {
	background-position: 0 -1404px;
}
.elgg-icon-undo {
	background-position: 0 -1422px;
}
.elgg-icon-user:hover {
	background-position: 0 -1440px;
}
.elgg-icon-user {
	background-position: 0 -1458px;
}
.elgg-icon-users:hover {
	background-position: 0 -1476px;
}
.elgg-icon-users {
	background-position: 0 -1494px;
}
.elgg-icon-video {
	background-position: 0 -1512px;
}


.elgg-avatar > .elgg-icon-hover-menu {
	display: none;
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	cursor: pointer;
}

.elgg-ajax-loader {
	background: white url(https://12andus.com/_graphics/ajax_loader_bw.gif) no-repeat center center;
	min-height: 31px;
	min-width: 31px;
}

/* ***************************************
	AVATAR ICONS
*************************************** */
.elgg-avatar {
	position: relative;
	display: inline-block;
}
.elgg-avatar > a > img {
	display: block;
}
.elgg-avatar-tiny > a > img {
	width: 25px;
	height: 25px;
	
	/* remove the border-radius if you don't want rounded avatars in supported browsers */
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	-moz-background-clip:  border;
	background-clip:  border;

	-webkit-background-size: 25px;
	-khtml-background-size: 25px;
	-moz-background-size: 25px;
	-o-background-size: 25px;
	background-size: 25px;
}
.elgg-avatar-small > a > img {
	width: 40px;
	height: 40px;
	
	/* remove the border-radius if you don't want rounded avatars in supported browsers */
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	-moz-background-clip:  border;
	background-clip:  border;

	-webkit-background-size: 40px;
	-khtml-background-size: 40px;
	-moz-background-size: 40px;
	-o-background-size: 40px;
	background-size: 40px;
}
.elgg-avatar-medium > a > img {
	width: 100px;
	height: 100px;
}
.elgg-avatar-large > a > img {
	width: 200px;
	height: 200px;
}

/* ***************************************
	PAGINATION
*************************************** */
.elgg-pagination {
	margin: 10px 0;
	display: block;
	text-align: center;
}
.elgg-pagination li {
	display: inline-block;
	margin: 0 6px 0 0;
	text-align: center;
}
.elgg-pagination a, .elgg-pagination span {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	display: block;
	padding: 2px 6px;
	color: #4690d6;
	border: 1px solid #4690d6;
	font-size: 12px;
}
.elgg-pagination a:hover {
	background: #4690d6;
	color: white;
	text-decoration: none;
}
.elgg-pagination .elgg-state-disabled span {
	color: #CCCCCC;
	border-color: #CCCCCC;
}
.elgg-pagination .elgg-state-selected span {
	color: #555555;
	border-color: #555555;
}

/* ***************************************
	TABS
*************************************** */
.elgg-tabs {
	margin-bottom: 5px;
	border-bottom: 2px solid #cccccc;
	display: table;
	width: 100%;
}
.elgg-tabs li {
	float: left;
	border: 2px solid #ccc;
	border-bottom: 0;
	background: #eee;
	margin: 0 0 0 10px;
	
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.elgg-tabs a {
	text-decoration: none;
	display: block;
	padding: 3px 10px 0 10px;
	text-align: center;
	height: 21px;
	color: #999;
}
.elgg-tabs a:hover {
	background: #dedede;
	color: #4690D6;
}
.elgg-tabs .elgg-state-selected {
	border-color: #ccc;
	background: white;
}
.elgg-tabs .elgg-state-selected a {
	position: relative;
	top: 2px;
	background: white;
}

/* ***************************************
	BREADCRUMBS
*************************************** */
.elgg-breadcrumbs {
	font-size: 80%;
	font-weight: bold;
	line-height: 1.2em;
	color: #bababa;
}
.elgg-breadcrumbs > li {
	display: inline-block;
}
.elgg-breadcrumbs > li:after {
	content: "\003E";
	padding: 0 4px;
	font-weight: normal;
}
.elgg-breadcrumbs > li > a {
	display: inline-block;
	color: #999;
}
.elgg-breadcrumbs > li > a:hover {
	color: #0054a7;
	text-decoration: underline;
}

.elgg-main .elgg-breadcrumbs {
	position: relative;
	top: -6px;
	left: 0;
}

/* ***************************************
	TOPBAR MENU
*************************************** */
.elgg-menu-topbar {
	float: left;
}

.elgg-menu-topbar > li {
	float: left;
}

.elgg-menu-topbar > li > a {
	padding-top: 2px;
	color: #eee;
	margin: 1px 15px 0;
}

.elgg-menu-topbar > li > a:hover {
	color: #4690D6;
	text-decoration: none;
}

.elgg-menu-topbar-alt {
	float: right;
}

.elgg-menu-topbar .elgg-icon {
	vertical-align: middle;
	margin-top: -1px;
}

.elgg-menu-topbar > li > a.elgg-topbar-logo {
	margin-top: 0;
	padding-left: 5px;
	width: 38px;
	height: 20px;
}

.elgg-menu-topbar > li > a.elgg-topbar-avatar {
	width: 18px;
	height: 18px;
}

/* ***************************************
	SITE MENU
*************************************** */
.elgg-menu-site {
	z-index: 1;
}

.elgg-menu-site > li > a {
	font-weight: bold;
	padding: 3px 13px 0px 13px;
	height: 20px;
}

.elgg-menu-site > li > a:hover {
	text-decoration: none;
}

.elgg-menu-site-default {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 23px;
}

.elgg-menu-site-default > li {
	float: left;
	margin-right: 1px;
}

.elgg-menu-site-default > li > a {
	color: white;
}

.elgg-menu-site > li > ul {
	display: none;
	background-color: white;
}

.elgg-menu-site > li:hover > ul {
	display: block;
}

.elgg-menu-site-default > .elgg-state-selected > a,
.elgg-menu-site-default > li:hover > a {
	background: white;
	color: #555;

	-webkit-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);
	box-shadow: 2px -1px 1px rgba(0, 0, 0, 0.25);

	-webkit-border-radius: 4px 4px 0 0;
	-moz-border-radius: 4px 4px 0 0;
	border-radius: 4px 4px 0 0;
}

.elgg-menu-site-more {
	position: relative;
	left: -1px;
	width: 100%;
	min-width: 150px;
	border: 1px solid #999;
	border-top: 0;

	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;

	-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
	-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.elgg-menu-site-more > li > a {
	background-color: white;
	color: #555;

	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;

	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

.elgg-menu-site-more > li > a:hover {
	background: #4690D6;
	color: white;
}

.elgg-menu-site-more > li:last-child > a,
.elgg-menu-site-more > li:last-child > a:hover {
	-webkit-border-radius: 0 0 4px 4px;
	-moz-border-radius: 0 0 4px 4px;
	border-radius: 0 0 4px 4px;
}

.elgg-more > a:before {
	content: "\25BC";
	font-size: smaller;
	margin-right: 4px;
}

/* ***************************************
	TITLE
*************************************** */
.elgg-menu-title {
	float: right;
}

.elgg-menu-title > li {
	display: inline-block;
	margin-left: 4px;
}

/* ***************************************
	FILTER MENU
*************************************** */
.elgg-menu-filter {
	margin-bottom: 5px;
	border-bottom: 2px solid #ccc;
	display: table;
	width: 100%;
}
.elgg-menu-filter > li {
	float: left;
	border: 2px solid #ccc;
	border-bottom: 0;
	background: #eee;
	margin: 0 0 0 10px;
	
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}
.elgg-menu-filter > li:hover {
	background: #dedede;
}
.elgg-menu-filter > li > a {
	text-decoration: none;
	display: block;
	padding: 3px 10px 0;
	text-align: center;
	height: 21px;
	color: #999;
}
.elgg-menu-filter > li > a:hover {
	background: #dedede;
	color: #4690D6;
}
.elgg-menu-filter > .elgg-state-selected {
	border-color: #ccc;
	background: white;
}
.elgg-menu-filter > .elgg-state-selected > a {
	position: relative;
	top: 2px;
	background: white;
}

/* ***************************************
	PAGE MENU
*************************************** */
.elgg-menu-page {
	margin-bottom: 15px;
}

.elgg-menu-page a {
	display: block;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	background-color: white;
	margin: 0 0 3px;
	padding: 2px 4px 2px 8px;
}
.elgg-menu-page a:hover {
	background-color: #0054A7;
	color: white;
	text-decoration: none;
}
.elgg-menu-page li.elgg-state-selected > a {
	background-color: #4690D6;
	color: white;
}
.elgg-menu-page .elgg-child-menu {
	display: none;
	margin-left: 15px;
}
.elgg-menu-page .elgg-menu-closed:before, .elgg-menu-opened:before {
	display: inline-block;
	padding-right: 4px;
}
.elgg-menu-page .elgg-menu-closed:before {
	content: "\002B";
}
.elgg-menu-page .elgg-menu-opened:before {
	content: "\002D";
}

/* ***************************************
	HOVER MENU
*************************************** */
.elgg-menu-hover {
	display: none;
	position: absolute;
	z-index: 10000;

	overflow: hidden;

	min-width: 165px;
	max-width: 250px;
	border: solid 1px;
	border-color: #E5E5E5 #999 #999 #E5E5E5;
	background-color: #FFF;
	
	-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.50);
}
.elgg-menu-hover > li {
	border-bottom: 1px solid #ddd;
}
.elgg-menu-hover > li:last-child {
	border-bottom: none;
}
.elgg-menu-hover .elgg-heading-basic {
	display: block;
}
.elgg-menu-hover a {
	padding: 2px 8px;
	font-size: 92%;
}
.elgg-menu-hover a:hover {
	background: #ccc;
	text-decoration: none;
}
.elgg-menu-hover-admin a {
	color: red;
}
.elgg-menu-hover-admin a:hover {
	color: white;
	background-color: red;
}

/* ***************************************
	SITE FOOTER
*************************************** */
.elgg-menu-footer > li,
.elgg-menu-footer > li > a {
	display: inline-block;
	color: #999;
}

.elgg-menu-footer > li:after {
	content: "\007C";
	padding: 0 4px;
}

.elgg-menu-footer-default {
	float: right;
}

.elgg-menu-footer-alt {
	float: left;
}

/* ***************************************
	GENERAL MENU
*************************************** */
.elgg-menu-general > li,
.elgg-menu-general > li > a {
	display: inline-block;
	color: #999;
}

.elgg-menu-general > li:after {
	content: "\007C";
	padding: 0 4px;
}

/* ***************************************
	ENTITY AND ANNOTATION
*************************************** */
.elgg-menu-entity, .elgg-menu-annotation {
	float: right;
	margin-left: 15px;
	font-size: 90%;
	color: #aaa;
	line-height: 16px;
	height: 16px;
}
.elgg-menu-entity > li, .elgg-menu-annotation > li {
	margin-left: 15px;
}
.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a {
	color: #aaa;
}
.elgg-menu-entity > li > a, .elgg-menu-annotation > li > a {
	display: block;
}
.elgg-menu-entity > li > span, .elgg-menu-annotation > li > span {
	vertical-align: baseline;
}

/* ***************************************
	OWNER BLOCK
*************************************** */
.elgg-menu-owner-block li a {
	display: block;
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	background-color: white;
	margin: 3px 0 5px 0;
	padding: 2px 4px 2px 8px;
}
.elgg-menu-owner-block li a:hover {
	background-color: #0054A7;
	color: white;
	text-decoration: none;
}
.elgg-menu-owner-block li.elgg-state-selected > a {
	background-color: #4690D6;
	color: white;
}

/* ***************************************
	LONGTEXT
*************************************** */
.elgg-menu-longtext {
	float: right;
}

/* ***************************************
	RIVER
*************************************** */
.elgg-menu-river {
	float: right;
	margin-left: 15px;
	font-size: 90%;
	color: #aaa;
	line-height: 16px;
	height: 16px;
}
.elgg-menu-river > li {
	display: inline-block;
	margin-left: 5px;
}
.elgg-menu-river > li > a {
	color: #aaa;
	height: 16px;
}
.elgg-menu-river > li > a {
	display: block;
}
.elgg-menu-river > li > span {
	vertical-align: baseline;
}

/* ***************************************
	SIDEBAR EXTRAS (rss, bookmark, etc)
*************************************** */
.elgg-menu-extras {
	margin-bottom: 15px;
}

/* ***************************************
	WIDGET MENU
*************************************** */
.elgg-menu-widget > li {
	position: absolute;
	top: 4px;
	display: inline-block;
	width: 18px;
	height: 18px;
	padding: 2px 2px 0 0;
}

.elgg-menu-widget > .elgg-menu-item-collapse {
	left: 5px;
}
.elgg-menu-widget > .elgg-menu-item-delete {
	right: 5px;
}
.elgg-menu-widget > .elgg-menu-item-settings {
	right: 25px;
}
/* ***************************************
	Modules
*************************************** */
.elgg-module {
	overflow: hidden;
	margin-bottom: 20px;
}

/* Aside */
.elgg-module-aside .elgg-head {
	border-bottom: 1px solid #CCC;
	
	margin-bottom: 5px;
	padding-bottom: 5px;
}

/* Info */
.elgg-module-info > .elgg-head {
	background: #e4e4e4;
	padding: 5px;
	margin-bottom: 10px;
	
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.elgg-module-info > .elgg-head * {
	color: #333;
}

/* Popup */
.elgg-module-popup {
	background-color: white;
	border: 1px solid #ccc;
	
	z-index: 9999;
	margin-bottom: 0;
	padding: 5px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	-webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.elgg-module-popup > .elgg-head {
	margin-bottom: 5px;
}
.elgg-module-popup > .elgg-head * {
	color: #0054A7;
}

/* Dropdown */
.elgg-module-dropdown {
	background-color:white;
	border:5px solid #CCC;
	
	-webkit-border-radius: 5px 0 5px 5px;
	-moz-border-radius: 5px 0 5px 5px;
	border-radius: 5px 0 5px 5px;
	
	display:none;
	
	width: 210px;
	padding: 12px;
	margin-right: 0px;
	z-index:100;
	
	-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45);
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.45);
	
	position:absolute;
	right: 0px;
	top: 100%;
}

/* Featured */
.elgg-module-featured {
	border: 1px solid #4690D6;
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.elgg-module-featured > .elgg-head {
	padding: 5px;
	background-color: #4690D6;
}
.elgg-module-featured > .elgg-head * {
	color: white;
}
.elgg-module-featured > .elgg-body {
	padding: 10px;
}

/* ***************************************
	Widgets
*************************************** */
.elgg-widgets {
	float: right;
	min-height: 30px;
}
.elgg-widget-add-control {
	text-align: right;
	margin: 5px 5px 15px;
}
.elgg-widgets-add-panel {
	padding: 10px;
	margin: 0 5px 15px;
	background: #dedede;
	border: 2px solid #ccc;
}
.elgg-widgets-add-panel li {
	float: left;
	margin: 2px 10px;
	width: 200px;
	padding: 4px;
	background-color: #ccc;
	border: 2px solid #b0b0b0;
	font-weight: bold;
}
.elgg-widgets-add-panel li a {
	display: block;
}
.elgg-widgets-add-panel .elgg-state-available {
	color: #333;
	cursor: pointer;
}
.elgg-widgets-add-panel .elgg-state-available:hover {
	background-color: #bcbcbc;
}
.elgg-widgets-add-panel .elgg-state-unavailable {
	color: #888;
}

.elgg-module-widget {
	background-color: #dedede;
	padding: 2px;
	margin: 0 5px 15px;
	position: relative;
}
.elgg-module-widget:hover {
	background-color: #ccc;
}
.elgg-module-widget > .elgg-head {
	background-color: #eeeeee;
	height: 26px;
	overflow: hidden;
}
.elgg-module-widget > .elgg-head h3 {
	float: left;
	padding: 4px 45px 0 20px;
	color: #666;
}
.elgg-module-widget.elgg-state-draggable .elgg-widget-handle {
	cursor: move;
}
a.elgg-widget-collapse-button {
	color: #c5c5c5;
}
a.elgg-widget-collapse-button:hover,
a.elgg-widget-collapsed:hover {
	color: #9d9d9d;
	text-decoration: none;
}
a.elgg-widget-collapse-button:before {
	content: "\25BC";
}
a.elgg-widget-collapsed:before {
	content: "\25BA";
}
.elgg-module-widget > .elgg-body {
	background-color: white;
	width: 100%;
	overflow: hidden;
	border-top: 2px solid #dedede;
}
.elgg-widget-edit {
	display: none;
	width: 96%;
	padding: 2%;
	border-bottom: 2px solid #dedede;
	background-color: #f9f9f9;
}
.elgg-widget-content {
	padding: 10px;
}
.elgg-widget-placeholder {
	border: 2px dashed #dedede;
	margin-bottom: 15px;
}

/* ***************************************
	Image Block
*************************************** */
.elgg-image-block {
	padding: 3px 0;
}
.elgg-image-block .elgg-image {
	float: left;
	margin-right: 5px;
}
.elgg-image-block .elgg-image-alt {
	float: right;
	margin-left: 5px;
}

/* ***************************************
	List
*************************************** */
.elgg-list {
	border-top: 1px dotted #CCCCCC;
	margin: 5px 0;
	clear: both;
}
.elgg-list > li {
	border-bottom: 1px dotted #CCCCCC;
}

.elgg-item .elgg-subtext {
	margin-bottom: 5px;
}
.elgg-item .elgg-content {
	margin: 10px 5px;
}

/* ***************************************
	Gallery
*************************************** */
.elgg-gallery {
	border: none;
	margin-right: auto;
	margin-left: auto;
}
.elgg-gallery td {
	padding: 5px;
}
.elgg-gallery-fluid > li {
	float: left;
}
.elgg-gallery-users > li {
	margin: 0 2px;
}

/* ***************************************
	Tables
*************************************** */
.elgg-table {
	width: 100%;
	border-top: 1px solid #ccc;
}
.elgg-table td, .elgg-table th {
	padding: 4px 8px;
	border: 1px solid #ccc;
}
.elgg-table th {
	background-color: #ddd;
}
.elgg-table tr:nth-child(odd), .elgg-table tr.odd {
	background-color: #fff;
}
.elgg-table tr:nth-child(even), .elgg-table tr.even {
	background-color: #f0f0f0;
}
.elgg-table-alt {
	width: 100%;
	border-top: 1px solid #ccc;
}
.elgg-table-alt th {
	background-color: #eee;
	font-weight: bold;
}
.elgg-table-alt td, .elgg-table-alt th {
	padding: 2px 4px 2px 4px;
	border-bottom: 1px solid #ccc;
}
.elgg-table-alt td:first-child {
	width: 200px;
}
.elgg-table-alt tr:hover {
	background: #E4E4E4;
}

/* ***************************************
	Owner Block
*************************************** */
.elgg-owner-block {
	margin-bottom: 20px;
}

/* ***************************************
	Messages
*************************************** */
.elgg-message {
	color: white;
	font-weight: bold;
	display: block;
	padding: 3px 10px;
	cursor: pointer;
	opacity: 0.9;
	
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
	
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.elgg-state-success {
	background-color: black;
}
.elgg-state-error {
	background-color: red;
}
.elgg-state-notice {
	background-color: #4690D6;
}

/* ***************************************
	River
*************************************** */
.elgg-list-river {
	border-top: 1px solid #CCC;
}
.elgg-list-river > li {
	border-bottom: 1px solid #CCC;
}
.elgg-river-item {
	padding: 7px 0;
}
.elgg-river-item .elgg-pict {
	margin-right: 20px;
}
.elgg-river-timestamp {
	color: #666;
	font-size: 85%;
	font-style: italic;
	line-height: 1.2em;
}

.elgg-river-attachments,
.elgg-river-message,
.elgg-river-content {
	border-left: 1px solid #CCC;
	font-size: 85%;
	line-height: 1.5em;
	margin: 8px 0 5px 0;
	padding-left: 5px;
}
.elgg-river-attachments .elgg-avatar,
.elgg-river-attachments .elgg-icon {
	float: left;
}
.elgg-river-layout .elgg-input-dropdown {
	float: right;
	margin: 10px 0;
}

.elgg-river-comments-tab {
	display: block;
	background-color: #EEE;
	color: #4690D6;
	margin-top: 5px;
	width: auto;
	float: right;
	font-size: 85%;
	padding: 1px 7px;
	
	-webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
}

.elgg-river-comments {
	margin: 0;
	border-top: none;
}
.elgg-river-comments li:first-child {
	-webkit-border-radius: 5px 0 0;
	-moz-border-radius: 5px 0 0;
	border-radius: 5px 0 0;
}
.elgg-river-comments li:last-child {
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius-bottomleft: 0 0 5px 5px;
	border-radius-bottomleft: 0 0 5px 5px;
}
.elgg-river-comments li {
	background-color: #EEE;
	border-bottom: none;
	padding: 4px;
	margin-bottom: 2px;
}
.elgg-river-comments .elgg-media {
	padding: 0;
}
.elgg-river-more {
	background-color: #EEE;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	padding: 2px 4px;
	font-size: 85%;
	margin-bottom: 2px;
}

.elgg-river-item form {
	background-color: #EEE;
	padding: 4px;
	
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	
	height: 30px;
}
.elgg-river-item input[type=text] {
	width: 80%;
}
.elgg-river-item input[type=submit] {
	margin: 0 0 0 10px;
}


/* **************************************
	Comments (from elgg_view_comments)
************************************** */
.elgg-comments {
	margin-top: 25px;
}
.elgg-comments > form {
	margin-top: 15px;
}

/* ***************************************
	Image-related
*************************************** */
.elgg-photo {
	border: 1px solid #ccc;
	padding: 3px;
	background-color: white;
}

/* ***************************************
	Tags
*************************************** */
.elgg-tags {
	font-size: 85%;
}
.elgg-tags > li {
	float:left;
	margin-right: 5px;
}
.elgg-tags li.elgg-tag:after {
	content: ",";
}
.elgg-tags li.elgg-tag:last-child:after {
	content: "";
}
.elgg-tagcloud {
	text-align: justify;
}

/* ***************************************
	PAGE LAYOUT
*************************************** */
/***** DEFAULT LAYOUT ******/
.elgg-page-default {
	min-width: 998px;
}
.elgg-page-default .elgg-page-header > .elgg-inner {
	width: 990px;
	margin: 0 auto;
	height: 90px;
}
.elgg-page-default .elgg-page-body > .elgg-inner {
	width: 990px;
	margin: 0 auto;
}
.elgg-page-default .elgg-page-footer > .elgg-inner {
	width: 990px;
	margin: 0 auto;
	padding: 5px 0;
	border-top: 1px solid #DEDEDE;
}

/***** TOPBAR ******/
.elgg-page-topbar {
	background: #333333 url(https://12andus.com/_graphics/toptoolbar_background.gif) repeat-x top left;
	border-bottom: 1px solid #000000;
	position: relative;
	height: 24px;
	z-index: 9000;
}
.elgg-page-topbar > .elgg-inner {
	padding: 0 10px;
}

/***** PAGE MESSAGES ******/
.elgg-system-messages {
	position: fixed;
	top: 24px;
	right: 20px;
	max-width: 500px;
	z-index: 2000;
}
.elgg-system-messages li {
	margin-top: 10px;
}
.elgg-system-messages li p {
	margin: 0;
}

/***** PAGE HEADER ******/
.elgg-page-header {
	position: relative;
	background: #4690D6 url(https://12andus.com/_graphics/header_shadow.png) repeat-x bottom left;
}
.elgg-page-header > .elgg-inner {
	position: relative;
}

/***** PAGE BODY LAYOUT ******/
.elgg-layout {
	min-height: 360px;
}
.elgg-layout-one-sidebar {
	background: transparent url(https://12andus.com/_graphics/sidebar_background.gif) repeat-y right top;
}
.elgg-layout-two-sidebar {
	background: transparent url(https://12andus.com/_graphics/two_sidebar_background.gif) repeat-y right top;
}
.elgg-layout-error {
	margin-top: 20px;
}
.elgg-sidebar {
	position: relative;
	padding: 20px 10px;
	float: right;
	width: 210px;
	margin: 0 0 0 10px;
}
.elgg-sidebar-alt {
	position: relative;
	padding: 20px 10px;
	float: left;
	width: 160px;
	margin: 0 10px 0 0;
}
.elgg-main {
	position: relative;
	min-height: 360px;
	padding: 10px;
}
.elgg-main > .elgg-head {
	padding-bottom: 3px;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 10px;
}

/***** PAGE FOOTER ******/
.elgg-page-footer {
	position: relative;
}
.elgg-page-footer {
	color: #999;
}
.elgg-page-footer a:hover {
	color: #666;
}
/* ***************************************
	MISC
*************************************** */
#login-dropdown {
	position: absolute;
	top:10px;
	right:0;
	z-index: 100;
}

/* ***************************************
	AVATAR UPLOADING & CROPPING
*************************************** */

#current-user-avatar {
	border-right:1px solid #ccc;
}
#avatar-croppingtool {
	border-top: 1px solid #ccc;
}
#user-avatar-cropper {
	float: left;
}
#user-avatar-preview {
	float: left;
	position: relative;
	overflow: hidden;
	width: 100px;
	height: 100px;
}

/* ***************************************
	FRIENDS COLLECTIONS
*************************************** */

#friends_collections_accordian li {
	color: #666;
}
#friends_collections_accordian li h2 {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	
	background: none repeat scroll 0 0 #4690D6;
	color: white;
	cursor: pointer;
	font-size: 1.2em;
	margin: 10px 0;
	padding: 4px 2px 4px 6px;
}
#friends_collections_accordian li h2:hover {
	background-color: #333;
}
#friends_collections_accordian .friends_collections_controls {
	float: right;
	font-size: 70%;
}
#friends_collections_accordian .friends-picker-main-wrapper {
	background: none repeat scroll 0 0 white;
	display: none;
	padding: 0;
}

.clearfloat { 
	clear: both;
}

.hidden {
	display: none;
}

.centered {
	margin: 0 auto;
}

.center {
	text-align: center;
}

.float {
	float: left;
}

.float-alt {
	float: right;
}

.link {
	cursor: pointer;
}

.elgg-discover .elgg-discoverable {
	display: none;
}

.elgg-discover:hover .elgg-discoverable {
	display: block;
}

.elgg-transition:hover {
	opacity: .7;
}

/* ***************************************
	BORDERS AND SEPARATORS
*************************************** */
.elgg-border-plain {
	border: 1px solid #eeeeee;
}
.elgg-border-transition {
	border: 1px solid #eeeeee;
}
.elgg-divide-top {
	border-top: 1px solid #CCCCCC;
}
.elgg-divide-bottom {
	border-bottom: 1px solid #CCCCCC;
}
.elgg-divide-left {
	border-left: 1px solid #CCCCCC;
}
.elgg-divide-right {
	border-right: 1px solid #CCCCCC;
}

/* ***************************************
	Spacing (from OOCSS)
*************************************** */
/* Padding */
.pan{padding:0}
.prn, .phn{padding-right:0}
.pln, .phn{padding-left:0}
.ptn, .pvn{padding-top:0}
.pbn, .pvn{padding-bottom:0}

.pas{padding:5px}
.prs, .phs{padding-right:5px}
.pls, .phs{padding-left:5px}
.pts, .pvs{padding-top:5px}
.pbs, .pvs{padding-bottom:5px}

.pam{padding:10px}
.prm, .phm{padding-right:10px}
.plm, .phm{padding-left:10px}
.ptm, .pvm{padding-top:10px}
.pbm, .pvm{padding-bottom:10px}

.pal{padding:20px}
.prl, .phl{padding-right:20px}
.pll, .phl{padding-left:20px}
.ptl, .pvl{padding-top:20px}
.pbl, .pvl{padding-bottom:20px}

/* Margin */
.man{margin:0}
.mrn, .mhn{margin-right:0}
.mln, .mhn{margin-left:0}
.mtn, .mvn{margin-top:0}
.mbn, .mvn{margin-bottom:0}

.mas{margin:5px}
.mrs, .mhs{margin-right:5px}
.mls, .mhs{margin-left:5px}
.mts, .mvs{margin-top:5px}
.mbs, .mvs{margin-bottom:5px}

.mam{margin:10px}
.mrm, .mhm{margin-right:10px}
.mlm, .mhm{margin-left:10px}
.mtm, .mvm{margin-top:10px}
.mbm, .mvm{margin-bottom:10px}

.mal{margin:20px}
.mrl, .mhl{margin-right:20px}
.mll, .mhl{margin-left:20px}
.mtl, .mvl{margin-top:20px}
.mbl, .mvl{margin-bottom:20px}.language_selector {
	float: left;
	padding-top: 25px;
	z-index: 99;
}

.navbar.scroll .language_selector {
	padding-top: 10px;
	z-index: 99;
}

.language_selector > a {
	color: white;
}/* <style> /**/
/* ***************************************
	Profile
*************************************** */
.profile {
	float: left;
	margin-bottom: 15px;
}
.profile .elgg-inner {
	border: 2px solid #eee;
	border-radius: 8px;
	margin: 0 5px;
}
#profile-details {
	padding: 15px;
}
/*** ownerblock ***/
#profile-owner-block {
	width: 200px;
	float: left;
	background-color: #eee;
	padding: 15px;
}
#profile-owner-block .large {
	margin-bottom: 10px;
}
#profile-owner-block a.elgg-button-action {
	margin-bottom: 4px;
	display: table;
}
.profile-content-menu a {
	display: block;
	border-radius: 8px;	
	background-color: white;
	margin: 3px 0 5px 0;
	padding: 2px 4px 2px 8px;
}
.profile-content-menu a:hover {
	background: #0054A7;
	color: white;
	text-decoration: none;
}
.profile-admin-menu {
	display: none;
}
.profile-admin-menu-wrapper a {
	display: block;
	border-radius: 8px;	
	background-color: white;
	margin: 3px 0 5px 0;
	padding: 2px 4px 2px 8px;
}
.profile-admin-menu-wrapper {
	background-color: white;
	border-radius: 8px;
}
.profile-admin-menu-wrapper li a {
	background-color: white;
	color: red;
	margin-bottom: 0;
}
.profile-admin-menu-wrapper a:hover {
	color: black;
}
/*** profile details ***/
#profile-details .odd {
	background-color: #f4f4f4;
	border-radius: 4px;	
	margin: 0 0 7px;
	padding: 2px 4px;
}
#profile-details .even {
	background-color:#f4f4f4;
	border-radius: 4px;	
	margin: 0 0 7px;
	padding: 2px 4px;
}
.profile-aboutme-title {
	background-color:#f4f4f4;
	border-radius: 4px;	
	margin: 0;
	padding: 2px 4px;
}
.profile-aboutme-contents {
	padding: 2px 0 0 3px;
}
.profile-banned-user {
	margin: 10px 0;
	padding: 20px;
	color: #B94A48;
	background-color: #F8E8E8;
	border: 1px solid #E5B7B5;
	border-radius: 5px;
}
.profile-banned-user h4 {
	color: #B94A48;
}
/**********************************
LiangLee Framework
***********************************/
.LiangLeeButton {
	-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	box-shadow:inset 0px 1px 0px 0px #bbdaf7;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
	background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
	background-color:#79bbff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #84bbf3;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:1px 1px 0px #528ecc;
}.LiangLeeButton:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
	background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
	background-color:#378de5;
}.LiangLeeButton:active {
	position:relative;
	top:1px;
}

.LiangLeedownload2 {
	-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	box-shadow:inset 0px 1px 0px 0px #c1ed9c;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) );
	background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b');
	background-color:#9dce2c;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:2px solid #83c41a;
	display:inline-block;
	color:#ffffff;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
	padding:6px 17px;
	text-decoration:none;
	text-shadow:1px 1px 0px #689324;
}.LiangLeedownload2:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) );
	background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c');
	background-color:#8cb82b;
}.LiangLeedownload2:active {
	position:relative;
	top:1px;
}
.LiangLee-logos-youtube {
background-image:url(https://12andus.com/mod/LiangleeFramework/media/youtubelogo.jpg);
background-repeat:no-repeat;
width:auto;
height:auto;
}


.bitly-wrapper {
	text-align: right;
}

#bitly-input {
	padding: 3px;
}
/* Blog Plugin */

/* force tinymce input height for a more useful editing / blog creation area */
form#blog-post-edit #description_parent #description_ifr {
	height:400px !important;
}

/* === Blog topic hubs (SEO consolidation) === */
.blog-topic-hub h1.blog-topic-title { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .75rem; }
.blog-topic-hub .blog-topic-intro { font-size: 1.05rem; line-height: 1.6; opacity: .92; margin-bottom: 1.5rem; }
.blog-topic-hub h2 { font-size: 1.3rem; margin: 1.75rem 0 .6rem; }
.blog-topic-children { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-topic-child {
	display: inline-block;
	padding: .4rem .75rem;
	border: 1px solid var(--color-stardust, #c9b8ff);
	border-radius: 8px;
	background: var(--color-twilight, #1d2541);
	color: var(--color-moonbeam, #e8e4f0) !important;
	text-decoration: none !important;
	font-weight: 500;
}
.blog-topic-child:hover { background: #2a3555; color: #fff !important; border-color: #00d4aa; }
.blog-topic-child-count { opacity: .7; }
.blog-topic-list { list-style: none; padding: 0; line-height: 1.85; }
.blog-topic-pager { display: flex; justify-content: space-between; margin-top: 1.5rem; }
/* CKEditor */

.cke {
	clear: right;
}

.cke_bottom .cke_wordcount {
	float: left;
}

.cke_bottom .cke_path {
	float: right;
}
.embed-wrapper {
	width: 730px;
	min-height: 400px;
}
.embed-wrapper h2 {
	color: #333333;
	margin-bottom: 10px;
}
.embed-wrapper .elgg-item {
	cursor: pointer;
}

/* ***************************************
	EMBED TABBED PAGE NAVIGATION
*************************************** */
.embed-wrapper .elgg-tabs a:hover {
	color: #666;
}

.embed-wrapper p {
	color: #333;
}
.embed-item {
	padding-left: 5px;
	padding-right: 5px;
}
.embed-item:hover {
	background-color: #eee;
}


.embed-wrapper .elgg-list {
    max-height: 335px;
    overflow: auto;
}.file-photo {
	text-align: center;
	margin: 15px 0;
}
.file-gallery-item {
	text-align: center;
	width: 165px;
}

.login-as-arrow {
	vertical-align: top;
	color: white;
	font-weight: bold;
}

.login-as-arrow:hover {
	color: white;
}

.messageboard-input {
	height: 100px;
}

#notificationstable td.namefield {
	width:250px;
	text-align: left;
	vertical-align: middle;
}
#notificationstable td.namefield p {
	margin:0;
	vertical-align: middle;
	line-height: 1.1em;
	padding:5px 0 5px 0;
}
#notificationstable td.namefield p.namefieldlink {
	margin:5px 0 0 0;
}
#notificationstable td.namefield a img {
	float:left;
	width:25px;
	height:25px; 
	margin:5px 10px 5px 5px;
}
#notificationstable td.emailtogglefield,
#notificationstable td.smstogglefield {
	width:50px;
	text-align: center;
	vertical-align: middle;
}
#notificationstable td.spacercolumn {
	width:30px;
}
#notificationstable td {
	border-bottom: 1px solid silver;
}
#notificationstable td.emailtogglefield input {
	margin-right:36px;
	margin-top:5px;
}
#notificationstable td.emailtogglefield a {
	width:46px;
	height:24px;
	cursor: pointer;
	display: block;
}
#notificationstable td.sitetogglefield {
	width:50px;
	text-align: center;
	vertical-align: middle;
}
#notificationstable td.sitetogglefield input {
	margin-right:36px;
	margin-top:5px;
}
#notificationstable td.sitetogglefield a {
	width:46px;
	height:24px;
	cursor: pointer;
	display: block;
}
#notificationstable td.emailtogglefield a.emailtoggleOff {
	background: url(https://12andus.com/mod/notifications/graphics/icon_notifications_email.gif) no-repeat right 2px;
}
#notificationstable td.emailtogglefield a.emailtoggleOn {
	background: url(https://12andus.com/mod/notifications/graphics/icon_notifications_email.gif) no-repeat right -36px;
}
#notificationstable td.sitetogglefield a.sitetoggleOff {
	background: url(https://12andus.com/mod/notifications/graphics/icon_notifications_site.gif) no-repeat right 2px;
}
#notificationstable td.sitetogglefield a.sitetoggleOn {
	background: url(https://12andus.com/mod/notifications/graphics/icon_notifications_site.gif) no-repeat right -37px;
}
.notification_friends,
.notification_personal,
.notifications_per_user {
	margin-bottom: 25px;
}



/* Reported Content */
.elgg-icon-report-this {
	background: url(https://12andus.com/mod/reportedcontent/graphics/icon_reportthis.gif) no-repeat left top;
}

/**********************************
Search plugin
***********************************/
.elgg-search-header {
	bottom: 5px;
	height: 23px;
	position: absolute;
	right: 0;
}
.elgg-search input[type=text] {
	width: 230px;
}
.elgg-search input[type=submit] {
	display: none;
}
.elgg-search input[type=text] {
	border-radius: 10px;	
	border: 1px solid #71b9f7;
	color: white;
	font-size: 12px;
	font-weight: bold;
	padding: 2px 4px 2px 26px;
	background: transparent url(https://12andus.com/_graphics/elgg_sprites.png) no-repeat 2px -934px;
}
.elgg-search input[type=text]:focus, .elgg-search input[type=text]:active {
	background-color: white;
	background-position: 2px -916px;
	border: 1px solid white;
	color: #0054A7;
}

.search-list li {
	padding: 5px 0 0;
}
.search-heading-category {
	margin-top: 20px;
	color: #666666;
}

.search-highlight {
	background-color: #bbdaf7;
}
.search-highlight-color1 {
	background-color: #bbdaf7;
}
.search-highlight-color2 {
	background-color: #A0FFFF;
}
.search-highlight-color3 {
	background-color: #FDFFC3;
}
.search-highlight-color4 {
	background-color: #ccc;
}
.search-highlight-color5 {
	background-color: #4690d6;
}

#notificationstable td.sitetogglefield a.sitetoggleOff {
	background: url(https://12andus.com/mod/notifications/graphics/icon_notifications_site.gif) no-repeat right 2px;
}
#notificationstable td.sitetogglefield a.sitetoggleOn {
	background: url(https://12andus.com/mod/notifications/graphics/icon_notifications_site.gif) no-repeat right -37px;
}
.site-notifications-buttonbank {
	text-align: right;
}
.site-notifications-buttonbank input {
	margin-left: 10px;
}
/*
* Social Connect CSS for Site Connect
*/
.ha_connect_with_provider {
}
.ha_connect_with_provider img {	
}
.social_connect_site_connect {
	padding:10px;
	padding-top:0px;
	margin-top:0px;
}
.social_connect_site_connect div {
	padding:10px;
	padding-left:0px;
}
.social_connect_site_connect p {
	border-top:1px dotted #999;
	font-size: 10px;
}/********************************
The Wire
*********************************/
#thewire-textarea {
	padding: 6px;
}
#thewire-characters-remaining {
	text-align: right;
	float: right;
	font-weight: bold;
	color: #333333;
}
.thewire-characters-remaining {
	color:#333333;
	border:none;
	font-size: 100%;
	font-weight: bold;
	padding:0 2px 0 0;
	margin:0;
	text-align: right;
	background: white;
}
.thewire-characters-remaining-warning {
	color: #D40D12 !important;
}
.thewire-parent {
	margin-left: 40px;
}
.thewire-post .elgg-content {
	margin: 10px 5px;
}
/* ZAudio */
.zaudio {
	margin: 10px 0;
}

body .chat-about {
    /* Sits between the intro alert and the widget, so it needs a little air
       above and rather more below, to separate description from the thing
       being described. */
    margin: 4px auto 26px;
}

/* No measure cap: this block reads as a continuation of the chatbots intro
   alert directly above it, so it spans the same column. */

body .chat-about .chat-about-heading {
    font-family: var(--font-display), Georgia, serif;
    font-size: 1.6375rem;
    color: var(--color-stardust) !important;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-glass-border);
}

/* Typography is inherited rather than restated, which is what makes it match
   the intro paragraph above: both then resolve to the body's Source Sans Pro
   at 16px. (The root font-size here is 10px, so the old 1.2075rem set this
   copy at 12px — noticeably smaller than the intro it sits under.) */
body .chat-about p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-text-secondary) !important;
    -webkit-text-fill-color: currentColor;
    margin: 0 0 1em;
}

body .chat-about p:last-child {
    margin-bottom: 0;
}

/* Same affordance the intro alert uses for its own expand link. */
body .chat-about .chat-about-expand {
    font-weight: bold;
    white-space: nowrap;
}

@media (max-width: 600px) {
    body .chat-about {
        margin-top: 2px;
        margin-bottom: 18px;
    }
    body .chat-about .chat-about-heading {
        font-size: 1.4375rem;
    }
}
.aimemory-intro { margin-bottom: 1.25rem; color: var(--color-text-primary, #1d2541); }
.aimemory-summary { margin: .75rem 0 1.25rem; color: var(--color-text-primary, #1d2541); }
.aimemory-forgotten-count { color: var(--color-text-secondary, #4a5165); font-size: .9em; }

.aimemory-turn {
    border-left: 3px solid transparent;
    padding: .75rem 0 .75rem 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(128,128,128,.18);
}
.aimemory-turn-active    { border-left-color: #4caf50; }
.aimemory-turn-stored    { border-left-color: rgba(128,128,128,.45); }
.aimemory-turn-forgotten { border-left-color: #b0413e; opacity: .5; }

.aimemory-meta { font-size: .8em; color: var(--color-text-secondary, #4a5165); margin-bottom: .35rem; }
.aimemory-bot { font-family: monospace; }
.aimemory-q { font-weight: 600; margin-bottom: .35rem; }
.aimemory-a { font-size: .92em; color: var(--color-text-secondary, #4a5165); line-height: 1.5; }
.aimemory-actions { margin-top: .5rem; }

.aimemory-btn {
    display: inline-block;
    font-size: .82em;
    padding: .2rem .6rem;
    border: 1px solid rgba(128,128,128,.4);
    border-radius: 3px;
    text-decoration: none;
    margin-right: .4rem;
}
.aimemory-btn:hover { border-color: rgba(128,128,128,.8); text-decoration: none; }

.aimemory-msg { margin-bottom: 1.25rem; }
.aimemory-pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: .82em;
    line-height: 1.45;
    max-height: 32rem;
    overflow: auto;
    padding: .75rem;
    border: 1px solid rgba(128,128,128,.25);
    border-radius: 3px;
    background: rgba(128,128,128,.06);
}
.aimemory-charts td, .aimemory-charts th { padding: .4rem .75rem; }

/* The "See the prompt" link rendered under an answer in the chat itself.
   Deliberately quiet — it is an evaluation affordance for a gated account,
   not a feature of the reading. */
.aimemory-prompt-link { margin: .75rem 0 .25rem; }
.aimemory-prompt-link a {
    display: inline-block;
    font-size: .78em;
    color: var(--color-text-secondary, #4a5165);
    padding: .15rem .55rem;
    border: 1px dashed rgba(128,128,128,.5);
    border-radius: 3px;
    text-decoration: none;
}
.aimemory-prompt-link a:hover { color: var(--color-text-primary, #1d2541); text-decoration: none; }

/* The rolling digest, above the turn list. */
.aimemory-digest {
    border: 1px solid rgba(128,128,128,.3);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}
.aimemory-digest h3 { margin-top: 0; font-size: 1.05em; }
.aimemory-digest-body p { margin-bottom: .75rem; line-height: 1.55; }
.aimemory-digest-muted { opacity: .45; }
/* +2px on both: these two paragraphs are the ones that explain what the
   page is and what the ticks do, and at .9em they read as small print for
   something that is not small print. */
.aimemory-digest-off, .aimemory-digest-empty { color: var(--color-text-secondary, #4a5165); font-size: 16px; }
.aimemory-digest-meta { font-size: 14px; color: var(--color-text-secondary, #4a5165); margin-top: .75rem; }

/* Extracted facts. */
/* Bordered like the digest and consent panels beside it — it is a section in
   its own right, and on the index it sits between two framed blocks, which made
   an unframed list read as a stray part of one of them. */
.aimemory-facts {
    border: 1px solid rgba(128,128,128,.3);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
}
.aimemory-facts h3 { margin-top: 0; font-size: 1.05em; }
.aimemory-fact-cat {
    font-size: .78em; text-transform: uppercase; letter-spacing: .06em;
    color: var(--color-text-secondary, #4a5165); margin: 1rem 0 .35rem;
}
.aimemory-fact {
    padding: .3rem 0; border-bottom: 1px solid rgba(128,128,128,.12);
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
}
.aimemory-fact-text { flex: 1 1 20rem; }
.aimemory-fact-dead { opacity: .4; }
.aimemory-fact-dead .aimemory-fact-text { text-decoration: line-through; }
.aimemory-fact-flag {
    font-size: .7em; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-secondary, #4a5165); border: 1px solid rgba(128,128,128,.4);
    border-radius: 2px; padding: 0 .3rem;
}

/* Banner shown when an admin is viewing someone else's memory. */
.aimemory-adminbanner {
    border: 1px solid rgba(200,150,60,.5);
    background: rgba(200,150,60,.08);
    border-radius: 4px;
    padding: .6rem .9rem;
    margin-bottom: 1.25rem;
    font-size: .9em;
}

/* Article 9 consent checkboxes. */
.aimemory-consent {
    border: 1px solid rgba(128,128,128,.3);
    border-radius: 4px; padding: 1rem 1.25rem; margin-bottom: 2rem;
}
.aimemory-consent h3 { margin-top: 0; font-size: 1.05em; }
/* The intro paragraph carries the same +2px as the digest text above — it is
   the wording being consented to, not a caption. */
.aimemory-consent .aimemory-digest-meta { font-size: 16px; color: var(--color-text-primary, #1d2541); }
.aimemory-consent-row { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; }
.aimemory-consent-row label { font-weight: normal; margin: 0; flex: 1; font-size: 16px; }

/* Roughly double the old 1.15rem. A tick box is the control here, and at the
   previous size it read as decoration next to a full sentence of label. */
.aimemory-consent-box {
    display: inline-block; width: 2rem; height: 2rem; line-height: 1.9rem;
    font-size: 1.15rem;
    text-align: center; border: 2px solid rgba(128,128,128,.6);
    border-radius: 4px; text-decoration: none; flex: 0 0 auto;
}
.aimemory-consent-box.is-on { border-color: #4caf50; color: #4caf50; }
.aimemory-consent-box:hover { border-color: rgba(128,128,128,1); text-decoration: none; }
/* The check-all was a small outlined link lost under four full sentences.
   Given a page whose whole point is that these are off by default, the control
   that turns them on should look like a control. */
.aimemory-consent-all { margin: 1.1rem 0 .2rem; }
.aimemory-consent-all .aimemory-btn {
    font-size: 1em;
    padding: .5rem 1.1rem;
    border-width: 2px;
    border-style: solid;
    border-color: var(--color-text-secondary, #4a5165);
    border-radius: 4px;
    font-weight: 600;
}
.aimemory-consent-all .aimemory-btn:hover {
    border-color: var(--color-text-primary, #1d2541);
    color: var(--color-text-primary, #1d2541);
}
.aimemory-consent-blocked { color: var(--color-text-secondary, #4a5165); font-size: .92em; margin: 0; }

/* Entry point on the profile page.
   A bordered panel rather than a bare link: it lands at the foot of the
   profile-details column, which is ~109KB of markup down, and a line of text
   there is indistinguishable from the rest of the page. */
.aimemory-profile-link {
    margin: 1.5rem 0 .5rem;
    padding: .9rem 1.1rem;
    border: 1px solid rgba(128,128,128,.35);
    border-radius: 6px;
}
.aimemory-profile-link a { font-weight: 600; font-size: 1.02em; }
.aimemory-profile-link .aimemory-profile-note {
    display: block; font-size: .88em; color: var(--color-text-secondary, #4a5165); margin-top: .3rem;
}

/* elgg_view_friendly_time() emits a bare <time> with no class, so the earlier
   .elgg-friendly-time selector matched nothing and 'color: inherit' simply
   inherited whatever pale value was already in play — pale text on white in
   light mode.
   var(--color-text-secondary) is the fix cosmic-theme.css asks for in its own
   header: it is #9ca3b0 in dark and #4a5165 in light, so one rule reads in
   both. A literal colour here is the exact mistake that file warns about. */
.aimemory-charts td,
.aimemory-charts th { color: var(--color-text-primary, #1d2541); }
.aimemory-charts .aimemory-time,
.aimemory-charts .aimemory-time time { color: var(--color-text-secondary, #4a5165); opacity: 1; }

/* The <time> elements need an !important counter-rule to be readable in light
   mode, and the reason is worth stating so nobody "cleans it up".
   cosmic-theme.css carries a block commented "NUCLEAR OPTION - ALL TEXT
   ELEMENTS" that hardcodes #e8e4f0 — the DARK theme colour — on
       html body :not(a):not(.btn):not([class*="btn-"]):not(input)…:not(.glyphicon)
   Every :not() adds specificity, so that selector lands around (0,7,9) and beats
   any ordinary rule. Table cells escape it because a light-mode counter-rule
   already covers them; <time> has none, so it renders #e8e4f0 on white.
   Confirmed in a browser, not deduced: computed colour was rgb(232,228,240).
   Matching the file's own idiom — it is a long tail of html[data-theme="light"]
   !important rules, each added after someone reported invisible text. */
html[data-theme="light"] .aimemory-charts .aimemory-time,
html[data-theme="light"] .aimemory-charts .aimemory-time time,
html[data-theme="light"] .aimemory-digest-meta time,
html[data-theme="light"] .aimemory-meta time { color: var(--color-text-secondary) !important; }
.aimemory-charts-note { font-size: 14px; color: var(--color-text-secondary, #4a5165); margin-top: .6rem; }

/* Chart rows expand in place. */
.aimemory-toggle { text-decoration: none; }
.aimemory-caret { display: inline-block; width: 1em; font-size: .85em; }
.aimemory-detailrow > td { padding: 0 !important; border-top: 0 !important; }
.aimemory-detail {
    padding: 1rem 1.25rem 1.5rem;
    background: rgba(128,128,128,.05);
    border-left: 3px solid rgba(128,128,128,.35);
}
.aimemory-detail h3 { margin-top: 0; }

/* The one-time consent prompt beside the chatbot. Quiet — it is a notice, not
   a call to action, and it disappears for good once the person has answered. */
.aimemory-nudge {
    margin: 10px 0 0;
    padding: 10px 12px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--color-text-secondary, #4a5165);
    border-left: 3px solid rgba(128,128,128,.35);
    background: rgba(128,128,128,.05);
    border-radius: 0 4px 4px 0;
}
.aimemory-nudge a { font-weight: 600; white-space: nowrap; }
#friend_request_received_listing .elgg-image-block,
#friend_request_sent_listing .elgg-image-block {
	border: 1px solid transparent;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#friend_request_received_listing .elgg-image-block:hover,
#friend_request_sent_listing .elgg-image-block:hover {
	border-color: #cccccc;
}
.messages-container {
	min-height: 200px;
}
a.message-unread {
	font-weight: bold;
	font-style: italic;
}
td.message-unread {
	background-color: #999;
}
.messages-buttonbank {
	text-align: right;
}
.messages-buttonbank input {
	margin-left: 10px;
}

/*** message metadata ***/
.messages-head {
	background: #EEE;
	border: 1px solid #666;
	padding: 5px 0 0 10px;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.messages-head-info {
	margin-left: 10px;
}
.messages-body {
	background: white;
	border: 1px solid #666;
	-webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
	-moz-box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.45);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	padding: 5px;
	overflow: hidden;
	margin-bottom: 20px;
}
/*** topbar icon ***/
.messages-new {
	color: white;
	background-color: red;
	
	-webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
	border-radius: 10px;
	
	-webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.50);
	-moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.50);
	box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.50);
	
	position: absolute;
	text-align: center;
	top: 0px;
	left: 26px;
	min-width: 16px;
	height: 16px;
	font-size: 10px;
	font-weight: bold;
}

/*** message table styles ***/
.msg-list-attachment {
	width: 3%;
}
.msg-list-owner {
	width: 20%;
}
.msg-list-subject {
	width: 35%;
}
.msg-list-timestamp {
	width: 20%;
}
.msg-list-delete {
	width: 8%;
}
.messages-warning {
	font-weight: bold;
	line-height: 1.3em;
	padding:3px 15px;
	margin:0px 0 15px 0;
	background:#ffbd00;
	border:none;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
.messages-error {
	font-weight: bold;
	line-height: 1.3em;
	padding:3px 15px;
	margin:0px 0 15px 0;
	color:white;
	background:red;
	border:none;
	
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}
/*** message send popup ***/
.messages-popup-wrapper {
	min-width: 350px;
	min-height: 550px;

}
/*** edittags input css ***/
/*
input[type=text].messages-tagsfield {
	display: none;
	-webkit-appearance: none;
	border: 1px solid #4690d6;
	color: #333;
	font-size: 12px;
	width: 250px;
	padding: 0px 4px 2px 2px;
}
input[type=text].messages-tagsfield:focus,
input[type=text].messages-tagsfield:active,
input[type=text].messages-tagsfield:hover {
	background-position: 2px -1242px;
}
*/
.messages-label-links {

}
.messages-label-editlink {
	cursor: pointer;
	float: left;
	height: 20px;
}

/*** Chat / Conversation Styles ***/

/* Conversation List (inbox) */
.chat-conversation-list {
	display: flex;
	flex-direction: column;
}
.chat-conv-item {
	display: flex;
	align-items: flex-start;
	padding: 12px 15px;
	border-bottom: none;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s;
}
.chat-conv-item:hover {
	background-color: var(--bg-hover, rgba(0,0,0,0.04));
	text-decoration: none;
	color: inherit;
}
.chat-conv-unread {
	background-color: var(--bg-unread, rgba(0,100,200,0.04));
}
.chat-conv-avatar {
	flex-shrink: 0;
	margin-right: 12px;
	text-decoration: none;
}
a.chat-conv-content {
	text-decoration: none;
	color: inherit;
}
a.chat-conv-content:hover {
	text-decoration: none;
	color: inherit;
}
.chat-conv-avatar-img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: block;
}
.chat-conv-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-left: 5px;
}
.chat-conv-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}
.chat-conv-name {
	font-weight: 600;
	font-size: 15px;
	color: var(--color-text-primary, #e0e0e0);
}
.chat-conv-unread .chat-conv-name {
	font-weight: 700;
}
.chat-conv-time {
	font-size: 12px;
	color: var(--color-text-secondary, #9ca3b0);
	flex-shrink: 0;
	margin-left: 8px;
}
.chat-conv-unread .chat-conv-time {
	color: var(--accent-color, #25d366);
	font-weight: 600;
}
.chat-conv-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.chat-conv-preview {
	font-size: 13px;
	color: var(--color-text-secondary, #9ca3b0);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
	min-width: 0;
}
.chat-conv-unread .chat-conv-preview {
	color: var(--color-text-primary, #e0e0e0);
	font-weight: 500;
}
.chat-conv-you {
	color: var(--color-text-muted, #6b7280);
	font-weight: normal;
}
.chat-conv-badge {
	background-color: var(--accent-color, #25d366);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	flex-shrink: 0;
	margin-left: 8px;
}

/* Delete-conversation X button */
.chat-conv-delete-form {
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	align-self: center;
	margin-left: 8px;
}
.chat-conv-delete-btn {
	background: rgba(255, 70, 70, 0.10);
	border: 1px solid #ff5757;
	color: #ff5757;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	padding: 0;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.chat-conv-delete-btn:hover,
.chat-conv-delete-btn:focus {
	background-color: #d83a3a;
	border-color: #d83a3a;
	color: #fff;
	outline: none;
}

/* Inline confirm popover anchored to the X button */
.chat-conv-delete-form { position: relative; }
.chat-conv-delete-popover {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 4px;
	background: var(--color-nebula, #1a2138);
	border: 1px solid var(--color-twilight, #2a3552);
	border-radius: 6px;
	padding: 10px 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
	z-index: 30;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	font-size: 13px;
	line-height: 1.35;
	color: var(--color-text-primary, #e0e0e0);
	width: 260px;
	max-width: calc(100vw - 30px);
}
.chat-conv-delete-popover[hidden] { display: none; }
.chat-conv-delete-msg {
	flex-basis: 100%;
	margin-bottom: 2px;
}
.chat-conv-delete-yes,
.chat-conv-delete-no {
	border: none;
	border-radius: 4px;
	padding: 4px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	line-height: 1;
}
.chat-conv-delete-yes {
	background: #d83a3a;
	color: #fff;
}
.chat-conv-delete-yes:hover { background: #b82a2a; }
.chat-conv-delete-no {
	background: transparent;
	color: var(--color-text-secondary, #9ca3b0);
}
.chat-conv-delete-no:hover { color: var(--color-text-primary, #e0e0e0); }

/* Chat Conversation View */
.chat-conversation {
	display: flex;
	flex-direction: column;
	max-height: 80vh;
	min-height: 400px;
}
.chat-header {
	display: flex;
	align-items: center;
	padding: 10px 15px;
	background: var(--color-nebula, #151b2d);
	border-bottom: 1px solid var(--color-twilight, #1d2541);
	border-radius: 4px 4px 0 0;
}
.chat-header-avatar {
	margin-right: 12px;
	flex-shrink: 0;
}
.chat-header-avatar .elgg-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.chat-header-name {
	font-weight: 600;
	font-size: 16px;
	color: var(--color-text-primary, #e0e0e0);
}
.chat-header-name:hover {
	text-decoration: none;
}
.chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 15px;
	background: var(--color-void, #0a0a12);
	min-height: 300px;
	max-height: 60vh;
}
.chat-no-messages {
	text-align: center;
	padding: 40px 20px;
	color: var(--color-text-secondary, #9ca3b0);
	font-size: 14px;
}

/* Date separator */
.chat-date-separator {
	text-align: center;
	margin: 15px 0;
}
.chat-date-separator span {
	background: var(--bg-date, rgba(0,0,0,0.1));
	color: var(--text-secondary, #666);
	font-size: 11px;
	padding: 4px 12px;
	border-radius: 8px;
	display: inline-block;
}

/* Chat bubbles */
.chat-bubble-row {
	display: flex;
	align-items: flex-end;
	margin-bottom: 10px;
	gap: 6px;
}
.chat-bubble-right {
	flex-direction: row-reverse;
}
.chat-bubble-left {
	flex-direction: row;
}
.chat-bubble-avatar {
	flex-shrink: 0;
}
.chat-bubble-avatar .elgg-avatar img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
}
.chat-bubble {
	max-width: 75%;
	min-width: 80px;
	padding: 8px 12px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.4;
	position: relative;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.chat-bubble * {
	max-width: 100%;
}
.chat-bubble-mine {
	background: #365e3a;
	color: var(--color-text-primary, #e0e0e0);
	border-bottom-right-radius: 4px;
}
.chat-bubble-theirs {
	background: var(--color-nebula, #2d2d44);
	color: var(--color-text-primary, #e0e0e0);
	border-bottom-left-radius: 4px;
}
/* Light mode: --color-text-primary flips to dark navy, but the sent bubble's
   #365e3a is hardcoded, so sent messages ended up dark-on-dark. Received
   bubbles are readable because their background is a themed variable. Give
   the sent bubble a light green of the same family — readable like the
   received ones, and still recognisably "mine". */
html[data-theme="light"] body .chat-bubble-mine {
	background: #dff0e1;
	border: 1px solid rgba(54, 94, 58, 0.28);
}
html[data-theme="light"] body .chat-bubble-theirs {
	border: 1px solid rgba(30, 30, 60, 0.16);
}
.chat-bubble-subject {
	font-weight: 600;
	font-size: 12px;
	color: var(--color-text-secondary, #9ca3b0);
	margin-bottom: 2px;
}
.chat-bubble-body {
	margin: 0;
	color: var(--color-text-primary, #e0e0e0);
}
.chat-bubble-body p {
	margin: 0 0 4px 0;
	color: var(--color-text-primary, #e0e0e0);
}
.chat-bubble-body p:last-child {
	margin-bottom: 0;
}
.chat-bubble-attachment {
	margin-top: 4px;
	font-size: 12px;
}
.chat-bubble-attachment a {
	color: var(--color-aurora-teal, #00d4aa);
}
.chat-bubble-time {
	font-size: 10px;
	color: var(--color-text-muted, rgba(255,255,255,0.4));
	text-align: right;
	margin-top: 2px;
}
.chat-bubble-read {
	margin-left: 4px;
	font-size: 11px;
	cursor: help;
}
.chat-bubble-read-yes {
	color: var(--color-aurora-teal, #00d4aa);
}
.chat-bubble-read-no {
	color: var(--color-text-muted, rgba(255,255,255,0.4));
}

/* Reply form */
.chat-reply-form {
	padding: 10px 15px;
	background: var(--color-nebula, #151b2d);
	border-top: 1px solid var(--color-twilight, #1d2541);
	border-radius: 0 0 4px 4px;
}
.chat-reply-input-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
}
.chat-reply-textarea {
	flex: 1;
	border: 1px solid var(--color-twilight, #1d2541);
	border-radius: 20px;
	padding: 8px 16px;
	font-size: 14px;
	resize: none;
	outline: none;
	line-height: 1.4;
	max-height: 120px;
	background: var(--color-cosmos, #0d1321);
	color: var(--color-text-primary, #e0e0e0);
}
.chat-reply-textarea:focus {
	border-color: var(--color-aurora-teal, #00d4aa);
}
.chat-send-btn {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: none;
	background: var(--accent-color, #25d366);
	color: #fff;
	font-size: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background-color 0.15s;
}
.chat-send-btn:hover {
	background: var(--accent-hover, #1da851);
}

/* Remove any dividers/borders inside chat views */
.chat-conversation-list hr,
.chat-conversation hr,
.chat-bubble-row hr {
	display: none;
}

.poll_post h3 {
	font-size: 150%;
	margin:0 0 10px 0;
	padding:0;
}
.poll_post h3 a {
	text-decoration: none;
}
.poll_post p {
	margin: 0 0 5px 0;
}
.poll_input-poll-choice {
	width: 90%;
}
.poll-result {
	margin: 15px 0;
}
.poll-progress {
	height: 12px;
	border: 1px #00B0E4 solid;
	margin: 5px 0;
}
.poll-progress-filled {
	background-color: #00B0E4;
	height: 12px;
}
.poll_widget-title {
	margin-bottom: 10px;
}
.poll_closing-date-open {
	color: green;
}
.poll_closing-date-closed {
	color: red;
}
.poll_vote-label {
	cursor: pointer;
}
.poll_vote-label:hover {
	color: red;
}

/* Archived poll styling */
.poll_archived {
    opacity: 0.8;
    position: relative;
}

.poll_archived:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
}

.poll_archived_banner {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    color: #777;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 3px;
    font-weight: bold;
    text-align: center;
}#site-announcements-site .elgg-list,
#site-announcements-site .elgg-list > li {
	border: none;
}

#site-announcements-site .elgg-list > li {
	margin-bottom: 5px;
}

#site-announcements-site .elgg-message {
	cursor: default;
}

#site-announcements-site .elgg-item .elgg-content {
	margin: 0;
	clear: none;
}

/* questions css */

.questions-checkmark {
	width: 40px;
	height: 40px;
	background:transparent url(https://12andus.com/mod/questions/_graphics/checkmark.png) no-repeat;
}

.question-solution-time {
	border: 1px solid #CCC;
	padding: 0 5px;
	
	font-size: 80%;
	color: #CCC;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.question-solution-time-due {
	border-color: orange;
	color: orange;
}

.question-solution-time-late {
	border-color: red;
	color: red;
}

.question-listing-checkmark {
	background-position: 0 -126px;
}

/* end questions css*/

body .pdf-about {
    /* sits just under the card, not floated far below it. No horizontal padding
       of its own: the container class already supplies the same gutter the form
       above uses, and adding to it would indent the block again. */
    /* Bootstrap's .thumbnail (the product card) carries margin-bottom:20px, so
       a top margin of 0 still leaves that gap. Cancel exactly that much rather
       than guessing at a negative value. */
    margin: -20px auto 10px;
}

/* Rendered above the card there is no thumbnail margin to cancel, and the
   block needs its own air before the card starts. */
body .pdf-about.pdf-about-above {
    margin: 0 auto 18px;
}

/* No measure cap: the copy reads as a continuation of the notice above it, so
   it spans the same column. */

body .pdf-about .pdf-about-heading {
    font-family: var(--font-display), Georgia, serif;
    font-size: 1.6375rem;		/* heading, 3px up from the original 1.45 */
    color: var(--color-stardust) !important;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-glass-border);
}

body .pdf-about p {
    /* Inherited rather than restated, which is what makes this match the info
       notice at the top of the page: both resolve to the body's Source Sans Pro
       at 16px. (The root font-size here is 10px, so the old 1.2075rem set this
       copy at 12px.) Inheriting also keeps the block clear of the unicode-range
       slicing on the site's web fonts — no new face is introduced. */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: var(--color-text-secondary) !important;
    -webkit-text-fill-color: currentColor;
    margin: 0 0 1em;
}

body .pdf-about p:last-child {
    margin-bottom: 0;
}

/* Same affordance the info notice uses for its own expand link. */
body .pdf-about .pdf-about-expand {
    font-weight: bold;
    white-space: nowrap;
}

@media (max-width: 600px) {
    body .pdf-about {
        margin-top: -12px;
    }
    body .pdf-about .pdf-about-heading {
        font-size: 1.4375rem;
    }
}
/* ---- Minimal client page shell (light, flags-only chrome) ---- */
body.distributors-page {
	background: #f5f5fa !important;
	padding-top: 0 !important;
	min-height: 100vh;
}
.dist-topbar {
	display: flex; justify-content: center; align-items: center;
	padding: 12px 14px 2px; background: transparent;
}
.dist-langbar { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; align-items: center; max-width: 620px; }
.dist-flag { display: inline-block; line-height: 0; }
.dist-flag img {
	width: 27px; height: auto; display: block; border-radius: 3px;
	opacity: .55; transition: opacity .15s ease, box-shadow .15s ease;
	box-shadow: 0 1px 3px rgba(20,10,50,0.15);
}
.dist-flag:hover img { opacity: 1; }
.dist-flag.is-current img { opacity: 1; box-shadow: 0 0 0 2px #6c3fd1; }

/* ---------------------------------------------------------------- Landing card */
.dist-landing {
	max-width: 560px;
	margin: 28px auto;
	padding: 32px 30px 34px;
	background: #ffffff;
	color: #2b2b3a;
	border-radius: 18px;
	box-shadow: 0 12px 50px rgba(20, 10, 50, 0.35);
	font-family: inherit;
}
.dist-landing, .dist-landing p, .dist-landing label, .dist-landing small, .dist-landing h2 {
	color: #2b2b3a;
}

/* Partner × 12andus header lockup */
.dist-logos {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	margin-bottom: 22px;
	text-align: center;
}
.dist-lockup { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.dist-logo-partner { max-height: 150px; max-width: 240px; width: auto; height: auto; }
.dist-logo-brand   { max-height: 92px; width: auto; height: auto; }
.dist-logo-text { font-size: 26px; font-weight: 700; color: #2b2350 !important; line-height: 1.1; }
.dist-logo-amp {
	font-size: 14px; color: #9a93b0 !important; text-transform: uppercase; letter-spacing: .14em;
}
.dist-logo-12andus { font-size: 26px; font-weight: 800; color: #6c3fd1 !important; }
/* The wordmark is an <a> now, so it has to win against the theme's global link
   colour — `html[data-theme="light"] body a:not(.btn):not(.navbar-brand)` is
   !important and outranks a single class, which turned the wordmark link-blue.
   Three classes plus the container beats it whichever file loads last. */
.dist-logos a.dist-logo-text.dist-logo-12andus,
html[data-theme="light"] body .dist-logos a.dist-logo-text.dist-logo-12andus {
	color: #6c3fd1 !important;
	text-decoration: none !important;
	display: inline-block;
}
.dist-logos a.dist-logo-text.dist-logo-12andus:hover,
.dist-logos a.dist-logo-text.dist-logo-12andus:focus,
html[data-theme="light"] body .dist-logos a.dist-logo-text.dist-logo-12andus:hover {
	color: #6c3fd1 !important;
	text-decoration: underline !important;
}
.dist-logo-12andus .dist-dot { color: #b3a0e6 !important; font-weight: 700; }
/* Same specificity fight as the wordmark above: this was written to be quiet
   grey and the theme's global link rule was painting it link-blue instead. */
.dist-logos a.dist-partner-site,
html[data-theme="light"] body .dist-logos a.dist-partner-site:not(.btn) {
	display: block; font-size: 14px; font-weight: 600; color: #6a6a7a !important;
	text-decoration: none !important; margin-bottom: 2px;
}
.dist-logos a.dist-partner-site:hover,
.dist-logos a.dist-partner-site:focus,
html[data-theme="light"] body .dist-logos a.dist-partner-site:not(.btn):hover {
	color: #6c3fd1 !important; text-decoration: underline !important;
}

/* System (flash) messages — readable on the light shell (theme renders them
   white-on-light here). Error = amber/red info, success = green. */
body.distributors-page .elgg-system-messages { list-style: none; margin: 12px auto 0; padding: 0 14px; max-width: 620px; }
body.distributors-page .elgg-message {
	display: block; margin: 0 auto 10px; padding: 13px 18px; border-radius: 10px;
	font-size: 15px; line-height: 1.45; box-shadow: 0 6px 20px rgba(20,10,50,0.15);
}
/* The message text is wrapped in <p> by elgg_autop, and the cosmic theme paints
   `.elgg-message *` light (#e8e4f0) — which on this light alert was invisible.
   Colour the descendants too, not just the <li>. */
body.distributors-page .elgg-message.elgg-state-error,
body.distributors-page .elgg-message.elgg-state-error *,
html body.distributors-page .elgg-message.elgg-state-error,
html body.distributors-page .elgg-message.elgg-state-error p {
	background: transparent; color: #8a4b16 !important;
}
body.distributors-page .elgg-message.elgg-state-error {
	background: #fdf0e3 !important; border: 1px solid #f0d3ad !important;
}
body.distributors-page .elgg-message.elgg-state-success,
body.distributors-page .elgg-message.elgg-state-success *,
html body.distributors-page .elgg-message.elgg-state-success,
html body.distributors-page .elgg-message.elgg-state-success p {
	background: transparent; color: #1a7f3c !important;
}
body.distributors-page .elgg-message.elgg-state-success {
	background: #e7f6ec !important; border: 1px solid #b7e3c6 !important;
}
body.distributors-page .elgg-message p { margin: 0; }
body.distributors-page .elgg-message a { color: inherit !important; text-decoration: underline; }
/* Dismiss button: inherit the alert's own colour instead of the theme's light one. */
body.distributors-page .elgg-message > .close {
	float: right; margin-left: 14px; background: none; border: 0; font-size: 20px;
	line-height: 1; opacity: .45; cursor: pointer; color: inherit !important;
}
body.distributors-page .elgg-message > .close:hover { opacity: .8; }
body.distributors-page .elgg-system-messages .hidden { display: none !important; }

/* Google Places city autocomplete dropdown — force readable light styling on the
   light client pages (the cosmic theme renders it dark → was black-on-black). */
body.distributors-page .pac-container {
	background: #fff !important; border: 1px solid #d3d0e0 !important;
	border-radius: 10px !important; box-shadow: 0 8px 24px rgba(20,10,50,0.18) !important;
	margin-top: 4px; z-index: 100000 !important;
}
body.distributors-page .pac-item {
	color: #23232e !important; padding: 7px 12px; border-top: 1px solid #f0eef7 !important; cursor: pointer;
}
body.distributors-page .pac-item:first-child { border-top: 0 !important; }
body.distributors-page .pac-item:hover,
body.distributors-page .pac-item-selected { background: #f3effb !important; }
body.distributors-page .pac-item-query { color: #23232e !important; font-size: 14px; }
body.distributors-page .pac-matched { color: #6c3fd1 !important; font-weight: 700; }
body.distributors-page .pac-icon { filter: saturate(0.4) opacity(0.7); }

.dist-promo, .dist-promo p {
	font-size: 16px; line-height: 1.6; text-align: center; color: #3a3a4a !important;
}
.dist-promo { margin: 0 0 26px; }
.dist-promo p { margin: 0; }

/* ---------------------------------------------------------------------- Fields */
.dist-field { margin-bottom: 18px; }
.dist-field > label {
	display: block; font-weight: 600; font-size: 14px; margin-bottom: 7px; color: #2b2b3a !important;
}
/* Field hints (unknown-birth-time note, city autocomplete help). #8a86a0 on the
   white card was 3.5:1 — under WCAG AA for text this size, and it read as greyed
   out rather than as guidance. #5a5670 is 7:1 and still clearly secondary. */
.dist-field .dist-hint { display: block; margin-top: 6px; color: #5a5670 !important; font-size: 13.5px; line-height: 1.5; }

/* Inline validation messages. Drawn by the landing JS instead of the browser's
   own bubble, which iOS Safari never renders — see distributors/landing.php.
   Colour and border forced past the cosmic theme like everything else here. */
.dist-landing .dist-error {
	display: block; margin-top: 6px; color: #c0392b !important;
	font-size: 13.5px; line-height: 1.45; font-weight: 600;
}
/* Not the consent row's label — that one is a paragraph of copy with its own
   forced colour, and reddening it reads as an error in the terms themselves. */
.dist-landing .dist-field-invalid > label:not(.dist-consent-label) { color: #c0392b !important; }
/* The html[data-theme="light"] body input… rule in cosmic-theme.css paints every
   control's border and outranks a plain .dist-landing selector, and this page
   forces light mode — so the invalid border has to be stated at that weight. */
html[data-theme="light"] body .dist-landing .dist-field-invalid input[type="text"],
html[data-theme="light"] body .dist-landing .dist-field-invalid input[type="email"],
html[data-theme="light"] body .dist-landing .dist-field-invalid select,
.dist-landing .dist-field-invalid input[type="text"],
.dist-landing .dist-field-invalid input[type="email"],
.dist-landing .dist-field-invalid select {
	border-color: #c0392b !important;
}

/* Inputs + selects — force a clean light control over the dark theme */
.dist-landing input[type="text"],
.dist-landing input[type="email"],
.dist-landing select {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 11px 13px !important;
	border: 1px solid #d3d0e0 !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: #23232e !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	height: auto !important;
	min-height: 44px !important;
	box-shadow: none !important;
}
/* NB: no `appearance: none` on <select>. It was here to make room for a custom
   chevron, but it also makes Firefox drop the OS combobox popup and draw its
   own height-capped list — the day and year dropdowns opened showing ~15 rows
   and everything after that needed scrolling. /birthdata has a 528-option year
   select that behaves perfectly, and the only difference was this property.
   The native arrow is worth more than a matching chevron. */
/* Force select value + option text dark on the light client pages (beat any
   theme rule that colours selects/options light — was light-on-white). */
body.distributors-page .dist-landing select,
body.distributors-page .dist-landing select option,
.dist-landing select,
.dist-landing select option {
	color: #23232e !important;
	background-color: #fff !important;
}
.dist-landing input::placeholder { color: #b0adc0 !important; }
.dist-landing input[type="text"]:focus,
.dist-landing input[type="email"]:focus,
.dist-landing input[type="password"]:focus,
.dist-landing select:focus {
	border-color: #6c3fd1 !important;
	outline: none !important;
	background: #fff !important;               /* beat the cosmic theme's dark :focus fill */
	color: #23232e !important;
	box-shadow: 0 0 0 3px rgba(108, 63, 209, 0.15) !important;
}

/* Room so text like "Non la so" / "00" is never clipped by the native arrow.
   The custom background chevron that used to sit here is gone with
   `appearance: none` — see the note above. */
.dist-landing select {
	padding-right: 30px !important;
	text-overflow: ellipsis;
}
.dist-landing select:disabled { background-color: #f3f2f8 !important; color: #a5a1b5 !important; }

/* Inline groups (day/month/year, hour/minute) */
.dist-inline { display: flex; gap: 10px; }
.dist-inline select { flex: 1 1 0; min-width: 0; }
/* The month carries a word and the fields beside it carry two and four digits,
   so an even three-way split spent the width in the wrong place and left
   "Settembre" as "Settem…". Only the birth-date row: the hour and minute beside
   it are both selects, and scaling them together changes nothing. */
.dist-inline select[name="birthdate_month"] { flex-grow: 1.5; }
/* Three controls on one phone-width line, so the 30px reserved for the arrow
   (see the rule above) is a third of what each has to spend. Chrome and Firefox
   both draw the arrow inside about 16px; 20 leaves it clear and buys back the
   width that was truncating "Settembre" to "Settem…". Scoped to these rows —
   the full-width selects elsewhere have width to spare and are left alone. */
.dist-landing .dist-inline select { padding-right: 20px !important; }

/* Show/hide password button (distributors/passwordtoggle.php). The wrap is added
   around the input by JS, so these rules only ever apply once it has run. */
.dist-pw-wrap { position: relative; display: block; }
/* Scoped with the page class as well: the input padding is set by
   `.dist-landing input[type="password"]` at equal specificity and later in this
   file, so a bare .dist-pw-wrap rule silently lost and the text ran under the
   icon. */
.dist-landing .dist-pw-wrap input[type="password"],
.dist-landing .dist-pw-wrap input[type="text"],
.dist-dash .dist-pw-wrap input[type="password"],
.dist-dash .dist-pw-wrap input[type="text"] { padding-right: 46px !important; }
/* The theme paints every button with its own fill and border, so each of these
   has to be stated — otherwise the icon sits on a green gradient block. */
.dist-landing .dist-pw-toggle,
.dist-dash .dist-pw-toggle {
	position: absolute !important; top: 50% !important; right: 6px !important;
	transform: translateY(-50%) !important;
	display: flex !important; align-items: center; justify-content: center;
	width: 36px !important; height: 36px !important; padding: 0 !important;
	background: none !important; border: 0 !important; box-shadow: none !important;
	color: #6a6a7a !important; cursor: pointer; border-radius: 8px !important;
	opacity: .75; transition: opacity .15s ease, color .15s ease;
}
.dist-landing .dist-pw-toggle:hover,
.dist-dash .dist-pw-toggle:hover { opacity: 1; color: #6c3fd1 !important; background: #f3effb !important; }
.dist-landing .dist-pw-toggle:focus-visible,
.dist-dash .dist-pw-toggle:focus-visible { outline: 2px solid #6c3fd1 !important; outline-offset: 1px; }
.dist-pw-toggle svg { display: block; }
/* The icon strokes with currentColor, and the cosmic theme's blanket
   `html body :not(a):not(button)…` rule paints the <svg> its light text colour
   (#e8e4f0) — the button's own colour never reaches it, so the eye came out
   white on a white card. State the stroke on the shapes themselves. */
.dist-landing .dist-pw-toggle svg,
.dist-dash .dist-pw-toggle svg { color: #4a4a5a !important; }
.dist-landing .dist-pw-toggle svg *,
.dist-dash .dist-pw-toggle svg * { stroke: #4a4a5a !important; }
.dist-landing .dist-pw-toggle:hover svg *,
.dist-dash .dist-pw-toggle:hover svg * { stroke: #6c3fd1 !important; }

/* Consent rows — two of them since 2026-08-10: the required one (terms + the
   reading) and the optional marketing one. They read as a pair, so the second
   sits close under the first rather than a full row away. */
.dist-consent { margin: 22px 0 20px; }
.dist-consent-optional { margin-top: -8px; }
.dist-consent-label {
	display: flex !important; align-items: flex-start; gap: 10px;
	font-weight: 400 !important; font-size: 13px; line-height: 1.5; color: #4a4a5a !important; cursor: pointer;
}
.dist-consent-label input[type="checkbox"] {
	/* Taller than the 19.5px line box it sits beside, so the negative top margin
	   keeps it optically level with the first line of consent text. */
	flex: 0 0 auto; width: 22px; height: 22px; margin: -1px 0 0; accent-color: #6c3fd1;
}
/* Force the inner span too — the cosmic theme colours nested spans light,
   which made the consent text near-invisible on the white card. */
.dist-consent-label span { color: #4a4a5a !important; }
.dist-consent-label a { color: #6c3fd1 !important; text-decoration: underline; }

/* Submit — override the theme's green elgg-button */
.dist-landing .dist-submit { margin-top: 4px; }
.dist-landing .dist-submit input[type="submit"],
.dist-landing .dist-submit .elgg-button {
	display: block !important;
	width: 100% !important;
	padding: 14px !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: linear-gradient(135deg, #6c3fd1, #8b5cf6) !important;
	border: 0 !important;
	border-radius: 12px !important;
	cursor: pointer !important;
	box-shadow: 0 6px 18px rgba(108, 63, 209, 0.35) !important;
	text-shadow: none !important;
}
.dist-landing .dist-submit input[type="submit"]:hover { filter: brightness(1.05); }

/* Sending: the reading is being written, which takes a few seconds. The button
   is disabled for that stretch (see landing.php) and has to look it, or the
   wait reads as a button that did nothing and gets tapped again. */
.dist-landing .dist-submit input[type="submit"].dist-submit-busy,
.dist-landing .dist-submit input[type="submit"][disabled] {
	cursor: progress !important;
	opacity: 0.65;
	filter: saturate(0.7);
	box-shadow: none !important;
}
.dist-landing .dist-submit input[type="submit"][disabled]:hover { filter: saturate(0.7); }

/* Funnel strip on the dashboard (scanned → started → completed) */
.dist-funnel {
	margin: 0 0 18px; padding: 14px 16px; background: #f7f5fd !important;
	border: 1px solid #e6e1f5 !important; border-radius: 12px;
}
.dist-funnel-head {
	font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
	color: #6a6a7a !important; margin-bottom: 8px;
}
.dist-funnel-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.dist-funnel-step { color: #3a3a4a !important; font-size: 14px; }
.dist-funnel-step b { font-size: 22px; color: #2b2350 !important; margin-right: 4px; }
.dist-funnel-arrow { color: #b3a0e6 !important; font-size: 18px; }
.dist-funnel-rate {
	margin-left: auto; font-weight: 700; color: #6c3fd1 !important; font-size: 14px;
}
.dist-funnel-note { margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: #6a6a7a !important; }
/* Blocked-submissions table heading + reason chip */
.dist-dash-sub { margin: 26px 0 10px; font-size: 18px; color: #2b2350 !important; }
.dist-reason {
	display: inline-block; padding: 2px 9px; border-radius: 999px;
	background: #fdf0e3 !important; color: #8a4b16 !important; font-size: 12.5px; white-space: nowrap;
}

/* ---- Mail that never arrived.
   Red, and the only red on these screens: everything else here is a state
   (waiting, expired, sample) and this one is a thing that went wrong. The chip
   is the flag; the reason beside it is the instruction, so it is quieter. */
.dist-bounce {
	display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
	background: #fbe6e6 !important; color: #a12222 !important;
	font-size: 11.5px; font-weight: 700; white-space: nowrap; vertical-align: middle;
}
.dist-bounce-why { margin-left: 5px; font-size: 11.5px; color: #a12222 !important; }
/* On a count, the chip IS the number: no left margin inside a numeric cell. */
.dist-bounce-n { margin-left: 5px; }
.dist-stat-bad .n { color: #a12222 !important; }
.dist-bounce-note { color: #a12222 !important; }
.dist-send-warn {
	margin: 0 0 10px !important; padding: 8px 12px; border-radius: 8px;
	background: #fbe6e6 !important; color: #a12222 !important;
	font-size: 13px; line-height: 1.5; border: 1px solid #f0c9c9;
}

/* Thank-you */
.dist-thanks { text-align: center; padding: 22px 0; }
.dist-thanks h2 { color: #6c3fd1 !important; margin-bottom: 10px; }

/* ------------------------------------------------------------------ Dashboards */
/* These sit on the dark page; force colors so the cosmic theme's light text
   rules don't wash out numbers/labels on the light cards. */
.dist-dash { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.dist-stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0 24px; }
.dist-stat {
	flex: 1; min-width: 140px; padding: 18px 16px; text-align: center;
	background: #ffffff !important; border: 1px solid #e6e1f2 !important; border-radius: 12px;
	box-shadow: 0 4px 16px rgba(20, 10, 50, 0.18);
}
.dist-stat .n { display: block; font-size: 30px; font-weight: 800; color: #6c3fd1 !important; line-height: 1.1; }
.dist-stat .l {
	display: block; margin-top: 4px; font-size: 12.5px; color: #6a6a7a !important;
	text-transform: uppercase; letter-spacing: .06em;
}

/* ---------------------------------------------------- Redemptions-per-day chart */
.dist-chart {
	margin: 22px 0 26px; padding: 18px 20px 14px;
	background: #ffffff !important; border: 1px solid #e6e1f2 !important; border-radius: 12px;
	box-shadow: 0 4px 16px rgba(20, 10, 50, 0.18);
}
.dist-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dist-chart .dist-chart-title { font-size: 17px; font-weight: 700; color: #2b2350 !important; margin: 0 0 2px; }
.dist-chart .dist-chart-range { font-size: 12.5px; color: #6a6a7a !important; }
.dist-chart .dist-chart-empty { font-size: 14.5px; color: #6a6a7a !important; margin: 10px 0 4px; }

/* Dimension switch */
.dist-chart-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 6px; }
.dist-chart-tab {
	appearance: none; cursor: pointer;
	padding: 7px 14px !important; font-size: 13.5px !important; font-weight: 600 !important;
	color: #4a3a7a !important; background: #f3effb !important;
	border: 1px solid #e0d8f4 !important; border-radius: 999px !important;
	text-shadow: none !important; box-shadow: none !important;
}
.dist-chart-tab:hover { background: #eae2fa !important; }
.dist-chart-tab.is-active {
	color: #fff !important; background: #6c3fd1 !important; border-color: #6c3fd1 !important;
}

.dist-chart [hidden] { display: none !important; }
.dist-chart-svg { display: block; width: 100%; height: auto; margin-top: 6px; }
/* Gridlines and axis text stay recessive — the bars are the only loud thing. */
.dist-chart-svg .dist-grid { stroke: #ece9f5; stroke-width: 1; shape-rendering: crispEdges; }
.dist-chart-svg .dist-axis { fill: #8a86a0; font-size: 11px; font-family: inherit; }
.dist-chart-svg .dist-seg { transition: opacity .12s ease; }
.dist-chart-svg:hover .dist-seg { opacity: .55; }
.dist-chart-svg .dist-seg:hover { opacity: 1; }

.dist-legend {
	list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px;
	margin: 10px 0 0; padding: 0; font-size: 13px; color: #3a3a4a !important;
}
.dist-legend li { display: flex; align-items: center; gap: 7px; }
.dist-legend b { color: #2b2350 !important; font-weight: 700; }
.dist-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }

/* Export leads button. It used to carry the theme's .elgg-button-action, which
   on this light shell rendered as blue-on-black — the cosmic button styles
   assume the dark page. Style it like the other buttons on the light card. */
.dist-dash .dist-export-btn,
html body.distributors-page .dist-dash a.dist-export-btn {
	display: inline-block;
	padding: 11px 20px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: linear-gradient(135deg, #6c3fd1, #8b5cf6) !important;
	border: 0 !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	text-shadow: none !important;
	box-shadow: 0 4px 14px rgba(108, 63, 209, 0.3) !important;
}
.dist-dash .dist-export-btn:hover { filter: brightness(1.06); color: #fff !important; text-decoration: none !important; }

/* ---- Self-service cardboard printing (distributor dashboard) ---- */
.dist-print {
	background: #fff; border-radius: 14px; padding: 20px 22px 18px; margin: 22px 0;
	box-shadow: 0 4px 16px rgba(20, 10, 50, 0.18);
}
.dist-dash .dist-print-title {
	font-size: 19px !important; font-weight: 800 !important; margin: 0 0 6px !important;
	color: #2b2350 !important;
}
.dist-dash .dist-print-hint,
.dist-dash .dist-print-note {
	font-size: 14px !important; line-height: 1.55; color: #5c5870 !important; margin: 0 0 14px !important;
}
.dist-dash .dist-print-note { margin: 14px 0 0 !important; font-size: 13px !important; }
.dist-dash .dist-print-ideas-lead {
	font-size: 14px !important; font-weight: 700 !important; color: #2b2350 !important;
	margin: 0 0 6px !important;
}
.dist-dash ul.dist-print-ideas {
	margin: 0 0 16px !important; padding-left: 20px !important;
	font-size: 14px !important; line-height: 1.55; color: #5c5870 !important;
}
.dist-dash ul.dist-print-ideas li { margin: 0 0 4px !important; color: #5c5870 !important; }
.dist-print-batch {
	border: 1px solid #ece9f6; border-radius: 11px; padding: 13px 15px; margin-bottom: 12px;
}
.dist-print-batch:last-of-type { margin-bottom: 0; }
.dist-print-batch-head { font-size: 15px; color: #2b2350 !important; margin-bottom: 10px; }
.dist-print-range { color: #6a6a7a !important; font-size: 13.5px; margin-left: 6px; }
.dist-print-soon {
	display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
	background: #fdf0e3; color: #8a4b16 !important; font-size: 12px; font-weight: 700;
}
.dist-print-size {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
}
.dist-print-size-label {
	flex: 0 0 auto; min-width: 168px; font-size: 13.5px; font-weight: 700; color: #4a3a7a !important;
}
.dist-print-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* .btn for the same reason as the export button: the theme paints every
   a:not(.btn) link-blue with !important. */
.dist-dash a.dist-print-link,
html body.distributors-page .dist-dash a.dist-print-link {
	display: inline-block; padding: 7px 13px !important;
	font-size: 13.5px !important; font-weight: 600 !important;
	color: #4a3a7a !important; background: #f3effb !important;
	border: 1px solid #e0d8f4 !important; border-radius: 8px !important;
	text-decoration: none !important; text-shadow: none !important;
}
.dist-dash a.dist-print-link:hover,
html body.distributors-page .dist-dash a.dist-print-link:hover {
	background: #e9e1fa !important; color: #3a2a66 !important; text-decoration: none !important;
}
@media (max-width: 520px) {
	.dist-print-size-label { min-width: 100%; }
}

.dist-table {
	width: 100%; border-collapse: collapse;
	background: #ffffff !important; border-radius: 12px; overflow: hidden;
	box-shadow: 0 4px 16px rgba(20, 10, 50, 0.18);
}
.dist-table th, .dist-table td {
	text-align: left; padding: 10px 12px; border-bottom: 1px solid #efecf7; font-size: 14px;
	color: #2b2b3a !important;
}
.dist-table th { background: #f0ecfa !important; color: #4a3a7a !important; font-weight: 700; }
.dist-table tbody tr:last-child td { border-bottom: 0; }

/* -------------------------------------------------------------- Boss login card */
.dist-boss .dist-boss-title {
	text-align: center; font-size: 22px; font-weight: 800; color: #2b2350 !important;
	margin: 6px 0 4px;
}
.dist-boss .dist-boss-sub {
	text-align: center; font-size: 14.5px; color: #6a6a7a !important; margin: 0 0 22px;
}
.dist-landing input[type="password"] {
	width: 100% !important; box-sizing: border-box !important; padding: 11px 13px !important;
	border: 1px solid #d3d0e0 !important; border-radius: 10px !important; background: #fff !important;
	color: #23232e !important; font-size: 15px !important; min-height: 44px !important;
	box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.dist-landing input[type="password"]:focus {
	border-color: #6c3fd1 !important; outline: none !important;
	box-shadow: 0 0 0 3px rgba(108, 63, 209, 0.15) !important;
}

/* Dashboard header + logout */
.dist-dash-head {
	display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
	gap: 12px; margin: 8px 0 4px;
}
.dist-dash-title { font-size: 24px; font-weight: 800; color: #2b2350 !important; margin: 0; }
.dist-dash-logout form { display: inline; margin: 0; }
.dist-dash-logout .dist-logout-btn {
	background: #fff !important; color: #6c3fd1 !important;
	border: 1px solid #d3cdec !important; border-radius: 10px !important;
	padding: 9px 16px !important; font-weight: 700 !important; cursor: pointer;
	box-shadow: 0 2px 8px rgba(20,10,50,0.1) !important; text-shadow: none !important;
}
.dist-dash-logout .dist-logout-btn:hover { background: #f3effb !important; }
/* The dashboard now sits on the light shell too; keep the intro/stats readable. */
.dist-dash { color: #2b2b3a; }

/* First visit from the letter's one-click link: here is your password for next
   time. Tinted, not alarming — it is a welcome, not a warning. */
.dist-welcome {
	margin: 16px 0 4px; padding: 16px 18px; border-radius: 12px;
	background: #f6f2ff !important; border: 1px solid #ded3f7 !important;
}
.dist-welcome p { margin: 0 0 8px; color: #2b2b3a !important; line-height: 1.55; }
.dist-welcome p:last-child { margin-bottom: 0; }
.dist-welcome-lead { font-weight: 700; color: #2b2350 !important; }
.dist-welcome-note { font-size: 13.5px; color: #5a5670 !important; }
.dist-welcome-label { font-weight: 600; }
.dist-pw-value {
	display: inline-block; padding: 5px 11px; border-radius: 8px;
	background: #fff !important; border: 1px solid #d3cdec !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 16px; letter-spacing: .04em; color: #2b2350 !important;
	/* Long-press to select on a phone, for anyone without the clipboard API. */
	-webkit-user-select: all; user-select: all;
}
.dist-pw-copy {
	background: #fff !important; color: #6c3fd1 !important; border: 1px solid #d3cdec !important;
	border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 13.5px; cursor: pointer;
	margin-left: 6px; min-height: 34px;
}
.dist-pw-copy:hover { background: #f3effb !important; }
.dist-pw-copied { margin-left: 8px; font-size: 13px; color: #2e7d4f !important; font-weight: 600; }

/* Change-credentials panel on the dashboard */
.dist-cred-known { margin: 0 0 16px; color: #2b2b3a !important; line-height: 1.6; }
.dist-cred-own { color: #5a5670 !important; font-size: 13.5px; }
.dist-cred {
	margin: 26px 0 0; background: #ffffff !important; border: 1px solid #e6e1f2 !important;
	border-radius: 12px; padding: 6px 18px 4px; box-shadow: 0 4px 16px rgba(20, 10, 50, 0.18);
}
.dist-cred > summary {
	cursor: pointer; font-weight: 700; color: #4a3a7a !important; padding: 12px 0; list-style: none;
}
.dist-cred > summary::-webkit-details-marker { display: none; }
.dist-cred > summary::before { content: "⚙  "; }
.dist-cred[open] > summary { border-bottom: 1px solid #efecf7; margin-bottom: 14px; }
.dist-cred .dist-field { margin-bottom: 14px; }
.dist-cred .dist-field > label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; color: #2b2b3a !important; }
.dist-cred .dist-hint { display: block; margin-top: 6px; color: #5a5670 !important; font-size: 13.5px; }
.dist-cred input[type="email"],
.dist-cred input[type="password"] {
	width: 100% !important; max-width: 360px; box-sizing: border-box !important;
	padding: 11px 13px !important; border: 1px solid #d3d0e0 !important; border-radius: 10px !important;
	background: #fff !important; color: #23232e !important; font-size: 15px !important;
	min-height: 44px !important; box-shadow: none !important; -webkit-appearance: none; appearance: none;
}
.dist-cred input[type="email"]:focus,
.dist-cred input[type="password"]:focus {
	border-color: #6c3fd1 !important; outline: none !important; background: #fff !important;
	color: #23232e !important; box-shadow: 0 0 0 3px rgba(108, 63, 209, 0.15) !important;
}
.dist-cred input::placeholder { color: #b0adc0 !important; }
.dist-cred .dist-submit input[type="submit"] {
	width: auto !important; padding: 12px 22px !important; font-weight: 700 !important; color: #fff !important;
	background: linear-gradient(135deg, #6c3fd1, #8b5cf6) !important; border: 0 !important;
	border-radius: 12px !important; cursor: pointer !important; box-shadow: 0 6px 18px rgba(108, 63, 209, 0.3) !important;
	text-shadow: none !important;
}

/* Admin form section headings + hints */
.dist-form-sec {
	margin: 22px 0 8px; padding-top: 14px; border-top: 1px solid var(--border, #333);
	font-size: 15px; font-weight: 700; opacity: .95;
}
.dist-form-hint { font-size: 13px; opacity: .75; margin: 0 0 10px; }
.dist-nologin { opacity: .6; font-style: italic; }

/* Partnership legal pages (/partner/terms, /partner/privacy) — long prose on the
   same light card as the landing, just wider and with room to breathe. */
.dist-legal { max-width: 780px; text-align: left; margin-left: 14px; margin-right: 14px; }
@media (min-width: 810px) { .dist-legal { margin-left: auto; margin-right: auto; } }
.dist-legal .dist-legal-title {
	font-size: 26px; font-weight: 800; color: #2b2350 !important; margin: 0 0 4px; line-height: 1.25;
}
.dist-legal .dist-legal-updated {
	font-size: 13px; color: #8a86a0 !important; margin: 0 0 22px;
}
.dist-legal h2 {
	font-size: 17px; font-weight: 700; color: #6c3fd1 !important; margin: 26px 0 8px; line-height: 1.3;
}
.dist-legal p, .dist-legal li {
	font-size: 15px; line-height: 1.65; color: #3a3a4a !important; margin: 0 0 12px;
}
.dist-legal ul { margin: 0 0 14px; padding-left: 22px; }
.dist-legal li { margin: 0 0 7px; }
.dist-legal strong { color: #2b2b3a !important; font-weight: 700; }
.dist-legal a { color: #6c3fd1 !important; text-decoration: underline; }
.dist-legal .dist-legal-rule { border: 0; border-top: 1px solid #e6e1f2; margin: 30px 0 16px; }
.dist-legal .dist-legal-links { font-size: 13.5px; color: #8a86a0 !important; margin: 0; }

/* Public notice page (expired / upcoming / bare base) */
.dist-notice .dist-notice-body { text-align: center; padding: 8px 6px 6px; }
.dist-notice .dist-notice-icon { font-size: 46px; line-height: 1; margin-bottom: 10px; }
.dist-notice h2 { color: #6c3fd1 !important; font-size: 22px; margin: 0 0 12px; }
.dist-notice p { font-size: 16px; line-height: 1.6; color: #3a3a4a !important; margin: 0 auto; max-width: 460px; }

/* Live-batch escape hatch: the QR for whichever cardboard is valid today, plus
   a button, so the page is a way through rather than a dead end. */
.dist-notice-live { margin-top: 26px; padding-top: 22px; border-top: 1px solid #ece9f6; }
.dist-notice .dist-notice-live-lead {
	font-size: 15px; color: #6a6a7a !important; margin-bottom: 16px;
}
.dist-notice-qr {
	display: inline-block; padding: 12px; background: #fff; border-radius: 14px;
	border: 1px solid #e4e0f2; box-shadow: 0 6px 20px rgba(20,10,50,0.10);
	line-height: 0;
}
.dist-notice-qr img { width: 180px; height: 180px; display: block; }
/* Same specificity fight as the header links: the theme paints every <a>
   !important, which would flatten this button to plain link-blue text. */
.dist-notice a.dist-notice-cta,
html[data-theme="light"] body .dist-notice a.dist-notice-cta:not(.btn) {
	display: block; width: fit-content; margin: 20px auto 0;
	padding: 13px 26px; border-radius: 10px;
	background: #6c3fd1 !important; color: #fff !important;
	font-size: 16px; font-weight: 700; text-decoration: none !important;
	box-shadow: 0 6px 18px rgba(108,63,209,0.30);
}
.dist-notice a.dist-notice-cta:hover,
html[data-theme="light"] body .dist-notice a.dist-notice-cta:not(.btn):hover {
	background: #5a32b4 !important; color: #fff !important; text-decoration: none !important;
}

/* "Add a new … instead" links beside an edit form. They were plain
   .elgg-button, which the admin theme renders as a near-white label on a white
   panel — legible only by knowing it was there. Stated outright as a bordered
   link, and at html-body weight so the admin stylesheet cannot win. */
.dist-cancel-edit,
html body .dist-cancel-edit,
html body a.dist-cancel-edit {
	display: inline-block;
	padding: 5px 12px !important;
	margin-left: 6px;
	border: 1px solid #c9bff0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #5b3bb5 !important;
	font-size: 13px !important;
	font-weight: 600;
	text-decoration: none !important;
	line-height: 1.4;
}
html body .dist-cancel-edit:hover,
html body a.dist-cancel-edit:hover {
	background: #f3effb !important;
	color: #4a2f95 !important;
	border-color: #a58fe0 !important;
}

/* Pipeline badges in the admin list, and sample-vs-customer on a batch. */
.dist-status, .dist-kind {
	display: inline-block; padding: 2px 8px; border-radius: 999px;
	font-size: 12px; white-space: nowrap; font-weight: 600;
	background: #eeeaf7 !important; color: #4a3a7a !important;
}
.dist-status-partner      { background: #e7f6ec !important; color: #1a7f3c !important; }
.dist-status-declined     { background: #f2f2f4 !important; color: #6a6a7a !important; }
.dist-status-sample_sent,
.dist-status-sample_tried { background: #fdf0e3 !important; color: #8a4b16 !important; }
.dist-status-tried        { color: #1a7f3c !important; }
.dist-kind-sample         { background: #fdf0e3 !important; color: #8a4b16 !important; }
.dist-kind-customer       { background: #eaf1fb !important; color: #24548f !important; }

/* Cardboard batches panel (admin) */
.dist-batches { margin: 26px 0 8px; padding-top: 8px; }
.dist-inline-fields label { display: inline-block; margin-right: 18px; }
.dist-inline-fields input.dist-num { width: 70px !important; display: inline-block; }
.dist-autorot { background: #f6f3fd; border: 1px solid #e6e1f2; border-radius: 10px; padding: 4px 16px 14px; margin: 14px 0; }
.dist-plan-preview { font-size: 14.5px; margin: 6px 0 12px; }
.dist-plan-preview code { background: #efe9fc; padding: 2px 7px; border-radius: 6px; font-size: 13.5px; }
.dist-batches h3 { margin-bottom: 4px; }
.dist-badge {
	display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em;
}
.dist-badge-live     { background: #e2f6e8; color: #1a7f3c; }
.dist-badge-upcoming { background: #eef0fb; color: #4a4a9a; }
.dist-badge-expired  { background: #f3e6e6; color: #9a3a3a; }

/* Admin: wide tables. Desktop/tablet scroll if needed; on mobile each row
   stacks into a labelled card (no horizontal scrolling). */
.dist-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 18px;
	border-radius: 12px;
}
.dist-table-scroll .dist-table { min-width: 100%; margin: 0; }
.dist-table-scroll .dist-table th,
.dist-table-scroll .dist-table td { white-space: nowrap; }

@media (max-width: 700px) {
	.dist-table-scroll { overflow-x: visible; border-radius: 0; }
	.dist-table-scroll .dist-table,
	.dist-table-scroll .dist-table tbody,
	.dist-table-scroll .dist-table tr,
	.dist-table-scroll .dist-table td { display: block; width: 100%; box-sizing: border-box; }
	.dist-table-scroll .dist-table thead { display: none; }
	.dist-table-scroll .dist-table { background: transparent !important; box-shadow: none !important; overflow: visible; }
	.dist-table-scroll .dist-table tr {
		margin: 0 0 14px; padding: 10px 14px; border: 1px solid #e6e1f2 !important; border-radius: 12px;
		background: #fff !important; box-shadow: 0 3px 12px rgba(20, 10, 50, 0.12);
	}
	.dist-table-scroll .dist-table td {
		white-space: normal; padding: 7px 0; border: 0 !important;
		border-bottom: 1px solid #f2eff9 !important;
		display: flex; justify-content: space-between; align-items: baseline; gap: 14px; text-align: right;
	}
	.dist-table-scroll .dist-table tr td:last-child { border-bottom: 0 !important; }
	.dist-table-scroll .dist-table td::before {
		content: attr(data-label); font-weight: 700; color: #4a3a7a !important;
		text-align: left; flex: 0 0 auto; white-space: nowrap;
	}
	.dist-table-scroll .dist-table td[data-label=""]::before { content: none; }
	.dist-table-scroll .dist-table td small { white-space: normal; }
}

/* Admin: prominent per-row Edit button */
.dist-edit-btn {
	display: inline-block; padding: 5px 14px !important; font-weight: 700 !important;
	color: #fff !important; background: #6c3fd1 !important; border: 0 !important;
	border-radius: 8px !important; text-decoration: none !important; white-space: nowrap;
}
.dist-edit-btn:hover { background: #5a33b8 !important; }
.dist-table tr.dist-row-editing td { background: #f3effb !important; box-shadow: inset 3px 0 0 #6c3fd1; }

/* Admin: highlight the add/edit form, strongly so it's obvious when editing */
.dist-form-wrap { margin-top: 8px; }
.dist-form-wrap.dist-form-editing {
	border: 2px solid #6c3fd1; border-radius: 12px; padding: 8px 20px 18px;
	background: #faf8ff; box-shadow: 0 6px 22px rgba(108, 63, 209, 0.18);
}
.dist-form-heading { margin-top: 12px; }
.dist-form-wrap.dist-form-editing .dist-form-heading { color: #6c3fd1; }
.dist-form-editing-note {
	background: #efe9fc; border-radius: 8px; padding: 10px 14px; font-size: 13.5px;
	display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}

/* -------------------------------------------------- Agent dashboard: expandable venues
 *
 * The venue row expands into its cardboards and its leads. The caret is drawn
 * here rather than in the markup so the collapsed/expanded state has exactly
 * one source of truth: the button's aria-expanded.
 */
.dist-row-toggle {
	display: flex; align-items: center; gap: 8px; width: 100%;
	padding: 0 !important; margin: 0; border: 0 !important; background: none !important;
	font: inherit; font-weight: 700; color: #2b2350 !important;
	text-align: left; cursor: pointer; box-shadow: none !important;
}
.dist-row-toggle:hover { color: #6c3fd1 !important; }
.dist-row-toggle:focus-visible { outline: 2px solid #6c3fd1; outline-offset: 3px; border-radius: 4px; }
.dist-row-caret {
	flex: 0 0 auto; width: 0; height: 0; border-style: solid;
	border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #6c3fd1;
	transition: transform 0.15s ease;
}
.dist-row-toggle[aria-expanded="true"] .dist-row-caret { transform: rotate(90deg); }
.dist-agent-table tr.dist-agent-row-open td { background: #f3effb !important; }

.dist-agent-detail > td { padding: 0 !important; background: #faf8ff !important; }
.dist-agent-detail-inner { padding: 14px 18px 18px; border-left: 3px solid #6c3fd1; }
.dist-agent-h {
	margin: 14px 0 8px; font-size: 15px; font-weight: 700; color: #4a3a7a !important;
}
.dist-agent-detail-inner > .dist-agent-h:first-child { margin-top: 0; }

.dist-agent-cards { list-style: none; margin: 0; padding: 0; }
.dist-agent-cards li {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
	padding: 7px 0; border-bottom: 1px solid #e7e0f7;
}
.dist-agent-cards li:last-child { border-bottom: 0; }
.dist-agent-cardlink { font-weight: 700; }
.dist-agent-pdfs { margin-left: auto; white-space: nowrap; }
.dist-cbstatus {
	padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em;
}
.dist-cbstatus-live     { background: #e0f5ea; color: #1c7a4d !important; }
.dist-cbstatus-upcoming { background: #eae6f8; color: #5a3fa8 !important; }
.dist-cbstatus-expired  { background: #f0eeee; color: #77706e !important; }

@media (max-width: 700px) {
	.dist-agent-detail-inner { padding: 12px 10px 14px; }
	.dist-agent-pdfs { margin-left: 0; }
}

/* -------------------------------------------------- Admin: collapsible add/edit form
 *
 * The venue table is what the page is for; the form is what you occasionally
 * need. Collapsed it stays one line, and the summary is the click target.
 */
.dist-form-details > summary {
	cursor: pointer; list-style: none; user-select: none;
	display: flex; align-items: center; gap: 10px;
}
.dist-form-details > summary::-webkit-details-marker { display: none; }
.dist-form-details > summary::before {
	content: ""; flex: 0 0 auto; width: 0; height: 0; border-style: solid;
	border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #6c3fd1;
	transition: transform 0.15s ease;
}
.dist-form-details[open] > summary::before { transform: rotate(90deg); }
.dist-form-details > summary:hover .dist-form-heading { color: #6c3fd1 !important; }
.dist-form-details > summary:focus-visible { outline: 2px solid #6c3fd1; outline-offset: 3px; border-radius: 4px; }
/* The heading lives inside the summary so it keeps its type; the summary owns
   the spacing, or the two would fight and double the gap. */
.dist-form-details > summary > .dist-form-heading { margin: 0; display: inline; }
.dist-form-details > summary { margin: 12px 0; }
.dist-form-details-spaced { margin-top: 24px; }
.dist-form-details[open] > summary { margin-bottom: 4px; }

/* Il conteggio accanto al titolo di sezione: e' un dato, non parte del nome,
   quindi non prende il peso del titolo che lo precede. */
.dist-count {
	font-size: .62em; font-weight: 600; vertical-align: middle;
	padding: 2px 9px; border-radius: 20px;
	background: #ece9fb; color: #4a3fd0;
}

/* ---- La spunta "Pilota": grande quanto la decisione che rappresenta.
 *
 * Il selettore e' raddoppiato con .elgg-page-admin perche' il tema
 * dell'amministrazione impone la sua misura a ogni input, e a parita' di
 * specificita' vincerebbe lui. Flex e non un margine: cosi' la casella e la
 * parola restano allineate al centro anche quando la parola va a capo.
 */
.dist-pilot-check,
.elgg-page-admin .dist-pilot-check {
	display: inline-flex; align-items: center; gap: 9px;
	font-weight: 700; cursor: pointer;
}
.dist-pilot-check input[type="checkbox"],
.elgg-page-admin .dist-pilot-check input[type="checkbox"] {
	width: 22px; height: 22px; min-width: 22px; min-height: 22px;
	margin: 0; flex: 0 0 auto; cursor: pointer; accent-color: #4a3fd0;
}

/* ---- "1ª email": the ready-to-paste pitch under each distributor row ---- */
.dist-email-row > td { background: #f7f5fd !important; padding: 14px 16px !important; }
.dist-email-subject { margin: 0 0 8px !important; font-size: 14px; }
.dist-email-warn {
	margin: 0 0 8px !important; padding: 8px 12px; border-radius: 8px;
	background: #fdf0e3; border: 1px solid #f0d3ad; color: #8a4b16 !important; font-size: 13px;
}
.dist-email-pw { margin: 0 0 10px !important; font-size: 13.5px; }
.dist-email-pw input {
	width: 200px; padding: 6px 9px !important; border: 1px solid #d3d0e0 !important;
	border-radius: 7px !important; font-size: 14px !important;
}
.dist-email-pw small { display: block; margin-top: 4px; color: #6a6a7a !important; font-size: 12.5px; }
.dist-email-body {
	width: 100%; box-sizing: border-box; padding: 12px 14px !important;
	border: 1px solid #ddd8ef !important; border-radius: 10px !important;
	background: #fff !important; color: #23232e !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px !important; line-height: 1.55; resize: vertical;
}
.dist-email-copied { margin-left: 10px; color: #1a7f3c !important; font-weight: 700; font-size: 13px; }

/* La stessa lettera impaginata come esce dalla stampante: serif giustificato
   sulla misura del foglio, e il QR dentro il testo invece che solo nel PDF.
   Non e' una decorazione — e' il motivo per cui esiste questo riquadro: nella
   textarea il QR non c'e', perche' non sta nel testo, e chi rileggeva la
   versione da spedire non aveva modo di accorgersene. */
/* Nascosta ma non display:none: il pulsante "copia" ricade su
   document.execCommand('copy') dopo un ta.select(), e select() su un elemento
   tolto dal flusso non seleziona niente. Resta in pagina, larga un pixel. */
.dist-email-body-hidden {
	position: absolute !important; width: 1px !important; height: 1px !important;
	padding: 0 !important; border: 0 !important; opacity: 0 !important;
	pointer-events: none; overflow: hidden;
}
.dist-letter-rich {
	max-width: 62em; box-sizing: border-box; margin: 0; padding: 26px 32px;
	border: 1px solid #ddd8ef; border-radius: 10px;
	background: #fff !important; color: #23232e !important;
	font-family: ui-serif, "Iowan Old Style", Palatino, Georgia, serif;
	font-size: 14.5px; line-height: 1.62; text-align: justify;
	hyphens: auto; overflow-wrap: break-word;
}
.dist-letter-rich:focus { outline: 2px solid #b9a8f0; outline-offset: 2px; }
.dist-letter-rich p { margin: 0 0 0.85em; }
.dist-letter-rich p:first-child { margin-bottom: 1.2em; }
/* Gli indirizzi si battono a mano dal foglio, e nel serif l, I e 1 si
   somigliano troppo. Stessa scelta del PDF, per la stessa ragione. */
.dist-letter-rich .dist-letter-url {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px; font-weight: 700; text-align: left; color: #2b2350 !important;
}
.dist-letter-qr { margin: 1.3em 0 1.5em; text-align: center; user-select: none; }
.dist-letter-qr img { width: 132px; height: 132px; display: inline-block; }
.dist-letter-qr figcaption {
	margin-top: 5px; font-family: system-ui, -apple-system, sans-serif;
	font-size: 11.5px; color: #78788a !important;
}
/* Stesso trattamento di .dist-cancel-edit: nudo era un .elgg-button, e il tema
   dell'admin dipinge di bianco l'etichetta di ogni bottone bare su un pannello
   bianco — si legge solo sapendo che c'e'. Detto per esteso e con il peso di
   html body, cosi' il foglio dell'admin non puo' vincere. */
.dist-letter-mode,
html body .dist-letter-mode,
html body button.dist-letter-mode {
	margin-left: 10px;
	padding: 5px 12px !important;
	border: 1px solid #c9bff0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	color: #5b3bb5 !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}
html body button.dist-letter-mode:hover {
	background: #f4f0ff !important;
	border-color: #a98ee8 !important;
	color: #4a2ea0 !important;
}

/* Dashboard password shown in the admin list (admin-only page). */
.dist-pw {
	display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 5px;
	background: #f0ecfb !important; border: 1px solid #ddd6f4;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; color: #4a3a7a !important; user-select: all;
}

/* Approach email on the agent dashboard: same textarea as the admin console. */
.dist-email-block {
	background: #fff; border-radius: 14px; padding: 18px 20px 14px; margin: 14px 0;
	box-shadow: 0 4px 16px rgba(20, 10, 50, 0.18);
}
.dist-dash .dist-email-name {
	font-size: 17px !important; font-weight: 800 !important; margin: 0 0 4px !important;
	color: #2b2350 !important;
}
.dist-dash .dist-email-block .dist-email-subject {
	margin: 0 0 10px !important; font-size: 13.5px; color: #6a6a7a !important;
}
.dist-dash a.btn.dist-email-copy,
.dist-dash button.dist-email-copy {
	display: inline-block; padding: 9px 18px !important; border: 0 !important; cursor: pointer;
	font-size: 14px !important; font-weight: 700 !important;
	color: #fff !important; background: linear-gradient(135deg, #6c3fd1, #8b5cf6) !important;
	border-radius: 9px !important; text-shadow: none !important;
}
.dist-dash button.dist-email-copy:hover { filter: brightness(1.06); }

/* Letter language picker (admin console + agent dashboard). */
.dist-email-langrow { margin: 0 0 10px !important; font-size: 13.5px; }
.dist-email-langrow select {
	padding: 6px 9px !important; border: 1px solid #d3d0e0 !important;
	border-radius: 7px !important; font-size: 14px !important;
	background: #fff !important; color: #23232e !important;
}

/* Letter blocks collapse to their partner's name. */
.dist-dash .dist-email-block h3.dist-email-name { margin: 0 !important; }
.dist-email-block .dist-row-toggle {
	display: flex; align-items: center; gap: 9px; width: 100%;
	background: none !important; border: 0 !important; padding: 2px 0 !important;
	font-size: 17px !important; font-weight: 800 !important; text-align: left;
	color: #2b2350 !important; cursor: pointer;
}
.dist-email-block .dist-row-toggle:hover { color: #6c3fd1 !important; }
.dist-email-panel { margin-top: 12px; }

/* Send control under the letter (admin console). */
.dist-send-wrap { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e7e2f5; }
.dist-send-wrap form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.dist-send-to { font-size: 13.5px; font-weight: 600; color: #4a3a7a !important; }
.dist-send-to input {
	width: 260px; padding: 7px 10px !important; border: 1px solid #d3d0e0 !important;
	border-radius: 7px !important; font-size: 14px !important; margin-left: 6px;
}
.dist-send-hint { margin: 8px 0 0 !important; font-size: 12.5px; color: #6a6a7a !important; }
.dist-send-log { margin: 6px 0 0 !important; font-size: 12.5px; color: #1a7f3c !important; }

/* ---- Conversation thread (admin console) ---- */
.dist-conv { display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.dist-conv-answered { background: #e7f6ec; color: #1a7f3c !important; }
.dist-conv-waiting  { background: #fdf0e3; color: #8a4b16 !important; }
.dist-conv-new      { background: #eeecf7; color: #5c5870 !important; }
.dist-thread-h { margin: 16px 0 8px !important; font-size: 15px; font-weight: 700; color: #4a3a7a !important; }
.dist-thread { display: flex; flex-direction: column; gap: 10px; }
.dist-msg { border-radius: 10px; padding: 10px 13px; border: 1px solid #e4e0f2; background: #fff; }
.dist-msg-in  { border-left: 3px solid #1a7f3c; }
.dist-msg-out { border-left: 3px solid #6c3fd1; background: #faf8ff; }
.dist-msg-orphan { margin-bottom: 12px; }
.dist-msg-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; color: #6a6a7a !important; }
.dist-msg-who { font-weight: 700; color: #4a3a7a !important; display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
/* The sender's own signature image, stored by us and served from the page. */
.dist-msg-photo {
	width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
	flex: 0 0 auto; background: #efedf6; border: 1px solid #ded9ee;
}
.dist-msg-subj { font-size: 13.5px; font-weight: 600; margin: 4px 0 6px; color: #2b2350 !important; }
.dist-msg-body {
	margin: 0; white-space: pre-wrap; word-break: break-word;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; line-height: 1.5; color: #23232e !important;
	max-height: 240px; overflow: auto; background: transparent; border: 0; padding: 0;
}
/* Links recovered from the sender's flattened HTML. break-all because a signature
   URL is one unbroken token and would otherwise push the panel sideways. */
.dist-msg-body a { color: #4a3a7a !important; text-decoration: underline; word-break: break-all; }
.dist-msg-body a:hover { color: #6c3fd1 !important; }
.dist-reply { margin-top: 12px; }
.dist-reply-body {
	width: 100%; box-sizing: border-box; padding: 10px 12px !important; margin-bottom: 8px;
	border: 1px solid #d3d0e0 !important; border-radius: 9px !important;
	font-size: 13.5px !important; line-height: 1.5;
}
.dist-unassigned-n {
	display: inline-block; padding: 1px 9px; border-radius: 999px;
	background: #fdf0e3; color: #8a4b16 !important; font-size: 14px; font-weight: 700; vertical-align: middle;
}

/* Unassigned queue: assign, or set aside. */
.dist-orphan-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.dist-orphan-actions form { display: flex; gap: 8px; align-items: center; margin: 0; }
/* White on lavender, until the selector outscores the theme's.
   css/admin carries `.elgg-page-admin input[type="submit"] { color:#fff !important }`
   at (0,1,1); `.dist-dismiss-btn` is (0,1,0) and loses even with !important, so
   the label was invisible except on hover, where the theme repaints it. The
   bare class stays for anything outside /admin. */
.dist-dismiss-btn,
.elgg-page-admin input[type="submit"].dist-dismiss-btn {
	background: #f0eef7 !important; color: #5c5870 !important; border: 1px solid #ddd8ef !important; }
.dist-dismiss-note { margin: 4px 0 0; font-size: 12.5px; color: var(--faint, #8a90a0); }
/* 1,477 partners in a dropdown is a list you scroll, not one you use. */
.dist-assign-find { margin-bottom: 4px; padding: 4px 8px; font: inherit; font-size: 13px;
	border: 1px solid #ddd8ef; border-radius: 6px; min-width: 230px; display: block; }
.dist-dismissed { margin-top: 18px; }
.dist-dismissed > summary { cursor: pointer; font-weight: 700; color: #4a3a7a !important; padding: 6px 0; }
.dist-dismissed-row {
	display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
	padding: 7px 0; border-top: 1px solid #ece9f6; font-size: 12.5px; color: #5c5870 !important;
}
.dist-dismissed-row form { margin: 0; }

/* ---- Main distributors table: fit eleven columns without a scrollbar ----
   The letter column is the last one and was falling off the right edge. The
   three leading text columns carry the most slack, so they give it back. */
.dist-table-main { table-layout: fixed; width: 100%; }
/* THE reason the columns looked overlapped. The generic rule above keeps cells
   on one line and lets .dist-table-scroll scroll them — right for the narrow
   tables, wrong here: this one is table-layout: fixed with percentage widths, so
   a cell that will not wrap simply spills over its neighbour. Two-line venue
   names are the intended trade. */
.dist-table-scroll .dist-table.dist-table-main th,
.dist-table-scroll .dist-table.dist-table-main td { white-space: normal; }
.dist-table-main th, .dist-table-main td {
	/* Tighter than the other tables on purpose: 1,477 rows, and six vertical
	   pixels a row is a line and a half of text back on every screenful. */
	padding: 5px 7px; font-size: 11px; vertical-align: top;
	overflow-wrap: anywhere;
}
/* Twelve columns now. Nome/Codice/Area gave up the width the agent column
   needed: they are the three that were widest and the three whose content is
   shortest — a venue name wraps to two lines and reads fine, a button does not. */
/* Eleven columns: Modifica is gone, the venue name links to the form instead. */
/* Sixteen columns. City and Country are their own fields now, so the list can
   be grouped by place without parsing a street address. Everything gives up a
   point or two; the text columns wrap, the button columns cannot. */
/* Seventeen columns, numbered to match the seventeen actually rendered. They
   did not match: the widths were written for sixteen, `created` was inserted
   third afterwards, and every rule from there on landed one column to the left.
   Contact inherited the rule meant for a checkbox column — 4% and centred — so
   an email address wrapped to four lines while the tick beside it had room to
   spare. Renumbering IS the fix for "widen Contact". */
.dist-table-main th:nth-child(1),  .dist-table-main td:nth-child(1)  { width: 11%; }  /* name (+ kind, + pilot) */
.dist-table-main th:nth-child(2),  .dist-table-main td:nth-child(2)  { width: 6%; font-size: 10px; }   /* code */
.dist-table-main th:nth-child(3),  .dist-table-main td:nth-child(3)  { width: 5%; font-size: 10px; }   /* created */
.dist-table-main th:nth-child(4),  .dist-table-main td:nth-child(4)  { width: 6%; font-size: 10px; }   /* area */
.dist-table-main th:nth-child(5),  .dist-table-main td:nth-child(5)  { width: 5%; font-size: 10px; }   /* city */
.dist-table-main th:nth-child(6),  .dist-table-main td:nth-child(6)  { width: 5%; font-size: 10px; }   /* country */
.dist-table-main th:nth-child(7),  .dist-table-main td:nth-child(7)  { width: 7%; font-size: 10px; }   /* agent */
.dist-table-main th:nth-child(8),  .dist-table-main td:nth-child(8)  { width: 11%; }  /* contact */
.dist-table-main th:nth-child(9),  .dist-table-main td:nth-child(9)  { width: 4%; text-align: center; }  /* redeemed */
.dist-table-main th:nth-child(10), .dist-table-main td:nth-child(10) { width: 5%; }   /* client page */
.dist-table-main th:nth-child(11), .dist-table-main td:nth-child(11) { width: 6%; }   /* distributor */
.dist-table-main th:nth-child(12), .dist-table-main td:nth-child(12) { width: 4%; text-align: center; }  /* scans */
.dist-table-main th:nth-child(13), .dist-table-main td:nth-child(13) { width: 6%; }   /* cardboards */
.dist-table-main th:nth-child(14), .dist-table-main td:nth-child(14) { width: 7%; }   /* 1st email + thread state */
.dist-table-main th:nth-child(15), .dist-table-main td:nth-child(15) { width: 4%; }   /* label */
.dist-table-main th:nth-child(16), .dist-table-main td:nth-child(16) { width: 4%; }   /* print letter */
.dist-table-main th:nth-child(17), .dist-table-main td:nth-child(17) { width: 4%; }   /* posted */
.dist-table-main td .dist-noagent { opacity: .5; }
.dist-table-main .dist-area-n { opacity: .55; white-space: nowrap; }
/* The venue kind, shown only when it is not the default. A quiet chip rather
   than a column: it answers "what is this row" while scanning, and a column
   would spend width saying "Independent business" six hundred times. */
.dist-table-main .dist-kind-tag { display: block; opacity: .7; font-size: .82em;
  text-transform: lowercase; line-height: 1.3; margin-top: 1px; }
/* The one venue per sector and city to write to first. A chip and not a column:
   it has to be findable while scanning names, not comparable row by row. */
.dist-table-main .dist-pilot {
	font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
	padding: 1px 6px; border-radius: 20px; white-space: nowrap;
	background: #ece9fb; color: #4a3fd0; cursor: help;
}
/* City and Country filter the table when clicked, so they look like the links
   they are — the count beside them stays global on purpose. */
.dist-table-main a.dist-place { text-decoration: none; }
.dist-table-main a.dist-place:hover { text-decoration: underline; }
/* Waiting for a reply. Amber rather than red: nothing is broken, someone is
   waiting — and red on this page already means a venue with no logo. */
.dist-inbox-alert { border: 1px solid #e3c78a; background: #fdf6e6; border-radius: 10px;
	padding: 12px 16px; margin: 0 0 18px; }
.dist-inbox-h { margin: 0 0 6px; font-size: 16px; }
.dist-inbox-line { margin: 0 0 4px; font-size: 13.5px; }
.dist-inbox-list { margin: 4px 0 8px; padding-left: 20px; }
.dist-inbox-list li { margin: 2px 0; font-size: 13.5px; }
.dist-inbox-when { color: #8a6d3b; }
.dist-poll-line { margin: 4px 0 14px; font-size: 12px; color: #8a90a0;
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dist-poll-form { display: inline; }
/* Same specificity trick as the aside button: css/admin paints every submit
   white, and one class with !important loses to `.elgg-page-admin input`. */
.dist-poll-btn,
.elgg-page-admin input[type="submit"].dist-poll-btn {
	background: #eef2f7 !important; color: #33455e !important;
	border: 1px solid #cdd8e6 !important; font-size: 12.5px !important; padding: 3px 10px !important; }
.dist-filter-note { margin: 0 0 10px; font-size: 13.5px; }
/* The kinds sit on one line and read as a row of choices, so the one in force
   has to look chosen — a link that is already where you are, underlined like
   the others, is a link people keep clicking. */
.dist-kind-filter a { margin-right: 2px; }
.dist-kind-filter a.dist-kind-on { font-weight: 600; text-decoration: none; color: inherit; cursor: default; }
/* The pipeline dropdown keeps the chip's colour coding, so a column of them
   still reads as a column of states rather than a column of form controls. */
.dist-table-main select.dist-status-select {
	width: 100%; max-width: 100%; box-sizing: border-box;
	font-size: 11.5px; padding: 3px 4px; border-radius: 6px;
	border: 1px solid #d3cdec !important; cursor: pointer;
	background: #fff !important; color: #2b2b3a !important;
}
.dist-table-main select.dist-status-prospect     { background: #f4f2fb !important; }
.dist-table-main select.dist-status-contacted    { background: #eef4fd !important; }
.dist-table-main select.dist-status-sample_sent  { background: #fdf0e3 !important; }
.dist-table-main select.dist-status-sample_tried { background: #eaf7ef !important; }
.dist-table-main select.dist-status-partner      { background: #e7f6ec !important; font-weight: 700; }
.dist-table-main select.dist-status-declined     { background: #f3f3f3 !important; opacity: .7; }
/* The base /<code> address is a notice, not the redeem form; it reads as the
   lesser link because it is one. */
.dist-table-main td a.dist-link-notice { opacity: .65; }
/* The name carries the edit link now, so it has to look like one. */
.dist-table-main td a.dist-name-link { text-decoration: none; }
.dist-table-main td a.dist-name-link:hover { text-decoration: underline; }

/* Postal pipeline cell: a tick to select, then the two dates under it. */
.dist-label-pick { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer; }
.dist-label-pick input { width: 15px; height: 15px; cursor: pointer; }
/* The printer stands in for a word, so it has to read like one at a glance:
   twice the surrounding text, and line-height pinned so the taller glyph does
   not push the row open. */
.dist-print-ico { font-size: 24px; line-height: 1; }
.dist-table-main a.dist-posted { font-size: 9.5px; opacity: .75; }
.dist-table-main a.dist-posted-yes { color: #2e7d4f !important; font-weight: 700; opacity: 1; }
.dist-labels-bar { margin: 4px 0 22px; }
.dist-labels-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dist-labels-form label { font-size: 13px; }
.dist-labels-form .dist-label-skip,
.dist-return-form .dist-label-skip { width: 56px !important; }
/* The return-address bar wraps rather than sitting on one line: it carries a
   four-line address, and a textarea in a row of controls stretches the row to
   its own height. */
.dist-return-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dist-return-form label { font-size: 13px; }
.dist-return-form .dist-return-address { width: 260px !important; font-size: 13px; }
.dist-labels-btn,
.elgg-page-admin button.dist-labels-btn {
	background: #fff !important; color: #4a3a7a !important;
	border: 1px solid #d3cdec !important; border-radius: 8px !important;
	padding: 7px 14px !important; font-weight: 700; cursor: pointer;
}
.dist-labels-btn[disabled],
.elgg-page-admin button.dist-labels-btn[disabled] { opacity: .45; cursor: default; }
.dist-labels-n, .dist-posted-n, .dist-letters-n { font-weight: 700; opacity: .7; }
.dist-letters-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dist-letters-btn,
.elgg-page-admin button.dist-letters-btn {
	background: #fff !important; color: #4a3a7a !important;
	border: 1px solid #d3cdec !important; border-radius: 8px !important;
	padding: 7px 14px !important; font-weight: 700; cursor: pointer;
}
.dist-letters-btn[disabled],
.elgg-page-admin button.dist-letters-btn[disabled] { opacity: .45; cursor: default; }
.dist-posted-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dist-posted-btn,
.elgg-page-admin button.dist-posted-btn {
	background: #fff !important; color: #2e7d4f !important;
	border: 1px solid #b7e3c6 !important; border-radius: 8px !important;
	padding: 7px 14px !important; font-weight: 700; cursor: pointer;
}
.dist-posted-btn[disabled],
.elgg-page-admin button.dist-posted-btn[disabled] { opacity: .45; cursor: default; }
/* The name carries the edit link now, so it has to look like one. */
.dist-table-main td a.dist-name-link { text-decoration: none; }
.dist-table-main td a.dist-name-link:hover { text-decoration: underline; }
.dist-table-main td .dist-noagent { opacity: .5; }

/* ---- Client tables: every column on screen, no horizontal scrollbar ----
   Same treatment as .dist-table-main above, and for the same reason: these two
   were the widest tables on the page and the Reading column — the one you open
   the section for — sat off the right edge behind a scrollbar nobody thinks to
   use. Fixed layout with percentage widths, and the generic nowrap lifted, or a
   cell that will not wrap spills over its neighbour instead of scrolling.

   An email address wrapping to two lines is the trade, and it is the right one:
   a wrapped address is still readable, an address you have to scroll to is not. */
/* Guarded: under 700px each row is already a stacked card (see the rule block
   near the top of this file), and a percentage width on a display:block cell
   would undo it — these rules come later in the file and would otherwise win. */
@media (min-width: 701px) {
	.dist-table-clients, .dist-table-leads { table-layout: fixed; width: 100%; }
	.dist-table-scroll .dist-table.dist-table-clients th,
	.dist-table-scroll .dist-table.dist-table-clients td,
	.dist-table-scroll .dist-table.dist-table-leads th,
	.dist-table-scroll .dist-table.dist-table-leads td { white-space: normal; }
	.dist-table-clients th, .dist-table-clients td,
	.dist-table-leads th, .dist-table-leads td {
		padding: 7px 8px; font-size: 12.5px; vertical-align: top; overflow-wrap: anywhere;
	}
	/* The two that must never wrap: a button broken across lines stops looking like
	   one, and a status badge is a shape as much as a word. */
	.dist-table-clients .dist-reading-open, .dist-table-leads .dist-reading-open,
	.dist-table-clients .dist-status, .dist-table-leads .dist-status { white-space: nowrap; }

	/* All clients: eleven columns, counting the checkbox. */
	.dist-table-clients th:nth-child(1),  .dist-table-clients td:nth-child(1)  { width: 3%; text-align: center; }  /* tick */
	.dist-table-clients th:nth-child(2),  .dist-table-clients td:nth-child(2)  { width: 9%; }   /* date */
	.dist-table-clients th:nth-child(3),  .dist-table-clients td:nth-child(3)  { width: 13%; }  /* distributor */
	.dist-table-clients th:nth-child(4),  .dist-table-clients td:nth-child(4)  { width: 8%; }   /* agent */
	.dist-table-clients th:nth-child(5),  .dist-table-clients td:nth-child(5)  { width: 11%; }  /* name */
	.dist-table-clients th:nth-child(6),  .dist-table-clients td:nth-child(6)  { width: 17%; }  /* email */
	.dist-table-clients th:nth-child(7),  .dist-table-clients td:nth-child(7)  { width: 11%; }  /* birth date/time */
	.dist-table-clients th:nth-child(8),  .dist-table-clients td:nth-child(8)  { width: 10%; }  /* birth city */
	.dist-table-clients th:nth-child(9),  .dist-table-clients td:nth-child(9)  { width: 5%; text-align: center; }  /* consent */
	.dist-table-clients th:nth-child(10), .dist-table-clients td:nth-child(10) { width: 7%; }   /* status */
	.dist-table-clients th:nth-child(11), .dist-table-clients td:nth-child(11) { width: 6%; }   /* reading */

	/* One venue's leads: the same list without Distributor and Agent, plus Source. */
	.dist-table-leads th:nth-child(1),  .dist-table-leads td:nth-child(1)  { width: 3%; text-align: center; }
	.dist-table-leads th:nth-child(2),  .dist-table-leads td:nth-child(2)  { width: 11%; }  /* date */
	.dist-table-leads th:nth-child(3),  .dist-table-leads td:nth-child(3)  { width: 10%; }  /* source */
	.dist-table-leads th:nth-child(4),  .dist-table-leads td:nth-child(4)  { width: 13%; }  /* name */
	.dist-table-leads th:nth-child(5),  .dist-table-leads td:nth-child(5)  { width: 19%; }  /* email */
	.dist-table-leads th:nth-child(6),  .dist-table-leads td:nth-child(6)  { width: 13%; }  /* birth date/time */
	.dist-table-leads th:nth-child(7),  .dist-table-leads td:nth-child(7)  { width: 12%; }  /* birth city */
	.dist-table-leads th:nth-child(8),  .dist-table-leads td:nth-child(8)  { width: 6%; text-align: center; }  /* consent */
	.dist-table-leads th:nth-child(9),  .dist-table-leads td:nth-child(9)  { width: 7%; }   /* status */
	.dist-table-leads th:nth-child(10), .dist-table-leads td:nth-child(10) { width: 6%; }   /* reading */
}
.dist-table-main .dist-area-n { opacity: .55; white-space: nowrap; }
/* The venue kind, shown only when it is not the default. A quiet chip rather
   than a column: it answers "what is this row" while scanning, and a column
   would spend width saying "Independent business" six hundred times. */
.dist-table-main .dist-kind-tag { display: block; opacity: .7; font-size: .82em;
  text-transform: lowercase; line-height: 1.3; margin-top: 1px; }

/* Birth city is the one free-text column here, and "Modena, Province of Modena,
   Italy" on a single line made it 351px — wider than any other column in the
   table, for the least interesting field in it. Capped at half that, wrapping
   allowed: the generic .dist-table rule is nowrap, which is why it could not
   shrink on its own. */
.dist-table-scroll .dist-table td.dist-col-city,
.dist-table-scroll .dist-table th.dist-col-city {
	/* width as well as max-width: with `table-layout: auto` the browser hands
	   leftover table width back to whichever columns will take it, so a cap
	   alone only got 351px down to 229. */
	white-space: normal; width: 150px; max-width: 176px; overflow-wrap: anywhere;
}

/* The reading a client received. The trigger lives in a table cell; the text
   opens over the page, because a column one tenth of the table wide turns 600
   words into a ladder of two-word lines. */
/* Admin CSS line 91: `.elgg-page-admin button { color: #fff !important }` —
   EVERY bare <button> on an admin page is painted white, on a white table. Both
   previous attempts here lost to it on specificity (a single class cannot beat
   a class plus an element), so the label was white-on-white first with the
   brand purple and again with `inherit`; what made it show on hover was the
   theme's own hover colour, not mine.
   Hence the doubled selector: .elgg-page-admin button.dist-reading-open scores
   above it, and the plain one covers the partner shell where that wrapper does
   not exist. Anything bare-<button> added to an admin view needs the same. */
.dist-reading-open,
.elgg-page-admin button.dist-reading-open {
	background: none; border: 0; padding: 0; cursor: pointer;
	font-size: 12px; color: inherit !important; text-decoration: underline;
	text-underline-offset: 2px; font-family: inherit;
}
.dist-reading-open:hover,
.elgg-page-admin button.dist-reading-open:hover { opacity: .7; }
.dist-reading-dialog {
	width: min(820px, 92vw); max-height: 85vh; padding: 0; border: 0; border-radius: 14px;
	background: #fff; color: #23232e; box-shadow: 0 24px 70px rgba(20, 10, 50, .45);
	/* The dialog is the one thing on screen; keep it out of the flex/grid the
	   surrounding page may impose on its ancestors. */
	overflow: hidden;
}
.dist-reading-dialog::backdrop { background: rgba(20, 10, 40, .55); }
.dist-reading-dialog-head {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	padding: 14px 18px; border-bottom: 1px solid #eceaf5; background: #faf9ff;
}
.dist-reading-dialog-title { font-size: 14px; color: #2b2350 !important; overflow-wrap: anywhere; }
/* Same white-button rule reaches inside the dialog: this ✕ sits on a near-white
   header, so it was invisible there too. */
.dist-reading-dialog-close,
.elgg-page-admin button.dist-reading-dialog-close {
	background: none; border: 0; font-size: 26px; line-height: 1; cursor: pointer;
	color: #6a6a7a !important; padding: 0 4px;
}
.dist-reading-dialog-close:hover,
.elgg-page-admin button.dist-reading-dialog-close:hover { color: #23232e !important; }
.dist-reading-dialog-body {
	white-space: pre-wrap; padding: 20px 24px 26px; overflow: auto;
	max-height: calc(85vh - 58px); font-size: 15px; line-height: 1.65; color: #2b2b3a;
}

/* ---- Collapsible admin sections (All clients, stats). The marker is the "+"
   the section is opened by, drawn on the summary so no JS is involved. */
/* Both margins now that these sit above the venue table: with a top margin
   only, the collapsed stats summary sat flush against the Distributors
   heading below it. */
.dist-section { margin: 22px 0; }
.dist-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.dist-section > summary::-webkit-details-marker { display: none; }
/* A filled chip, not an outlined one. Drawn at the summary's own font size —
   80% of the admin base — a thin-bordered box held a 12px glyph that was there
   but not readable. White on brand purple is legible on the admin shell and on
   the partner one without depending on either. */
.dist-section > summary::before {
	content: "+"; display: inline-flex; align-items: center; justify-content: center;
	width: 26px; height: 26px; border-radius: 7px; border: 0;
	background: #6c3fd1; color: #fff !important;
	font-size: 20px; font-weight: 700; line-height: 1; flex: 0 0 auto;
	font-family: Arial, Helvetica, sans-serif;   /* the glyph, not the page font */
}
.dist-section > summary:hover::before { background: #5a33b8; }
.dist-section[open] > summary::before { content: "\2212"; }   /* minus sign */
.dist-section-h { display: inline; font-size: 19px; margin: 0; }
.dist-section-n { opacity: .6; font-weight: 400; font-size: 15px; }
.dist-section-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 14px; }
.dist-section-bar .dist-form-hint { margin: 0; }
.dist-stats-h { font-size: 15px; font-weight: 700; margin: 22px 0 10px; opacity: .95; }
.dist-table-compact td, .dist-table-compact th { padding: 5px 9px; font-size: 12.5px; }
/* Three short columns stretched across a 1500px page put the counts at arm's
   length from the date they belong to. */
.dist-table-compact { max-width: 460px; }

/* Per-day columns. Heights are percentages of the tallest day, so the shape is
   comparative — the axis label under each bar is the day of the month. */
.dist-chart-days {
	display: flex; align-items: flex-end; gap: 3px; height: 150px;
	padding: 8px 4px 0; margin-bottom: 14px; overflow-x: auto;
}
.dist-day { flex: 1 1 0; min-width: 14px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.dist-day-n { font-size: 10px; opacity: .75; height: 13px; line-height: 13px; }
.dist-day-bar {
	width: 100%; max-width: 26px; margin-top: auto;
	background: linear-gradient(180deg, #8b5cf6, #6c3fd1); border-radius: 3px 3px 0 0;
}
.dist-day-lab { font-size: 10px; opacity: .55; margin-top: 4px; }

/* Horizontal bars for venue / agent totals. */
.dist-hbars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.dist-hbar-row { display: grid; grid-template-columns: minmax(120px, 22%) 1fr 40px auto; align-items: center; gap: 10px; font-size: 13px; }
.dist-hbar-label { overflow-wrap: anywhere; }
.dist-hbar-track { background: rgba(140, 120, 200, .18); border-radius: 5px; height: 14px; }
.dist-hbar-fill { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #6c3fd1, #8b5cf6); }
.dist-hbar-n { text-align: right; font-weight: 700; }
.dist-hbar-sub { font-size: 11.5px; opacity: .6; white-space: nowrap; }
@media (max-width: 700px) {
	.dist-hbar-row { grid-template-columns: 1fr 44px; }
	.dist-hbar-track, .dist-hbar-sub { grid-column: 1 / -1; }
}

/* Print, beside Send. Same white-on-white trap as every other bare button on an
   admin page, so the selector is doubled here too. */
.dist-print-form { display: inline; margin-left: 8px; }
.dist-print-btn,
.elgg-page-admin button.dist-print-btn {
	background: #fff !important; color: #4a3a7a !important;
	border: 1px solid #d3cdec !important; border-radius: 8px !important;
	padding: 7px 14px !important; font-weight: 700; cursor: pointer;
}
.dist-print-btn:hover,
.elgg-page-admin button.dist-print-btn:hover { background: #f3effb !important; }

/* Bulk selection in the admin client tables. */
.dist-table-bulk th.dist-check-col, .dist-table-bulk td.dist-check-col {
	width: 30px; text-align: center; padding-left: 6px; padding-right: 6px;
}
.dist-table-bulk input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.dist-bulk-bar { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
/* The theme paints every admin button white on white — see the reading trigger.
   This one is a destructive action, so it says so in red rather than inheriting. */
.dist-bulk-del,
.elgg-page-admin button.dist-bulk-del {
	background: #fff !important; color: #b03030 !important;
	border: 1px solid #e2b4b4 !important; border-radius: 8px !important;
	padding: 7px 14px !important; font-weight: 700; cursor: pointer;
}
.dist-bulk-del:hover:not([disabled]),
.elgg-page-admin button.dist-bulk-del:hover:not([disabled]) { background: #fdf3f3 !important; }
.dist-bulk-del[disabled],
.elgg-page-admin button.dist-bulk-del[disabled] {
	opacity: .45; cursor: default; color: #7a6a6a !important; border-color: #ddd !important;
}
.dist-bulk-n { font-weight: 700; opacity: .7; }

/* Per-message delete, in the conversation panel. Quiet until hovered: it is
   the destructive control in a block you read far more often than you prune. */
.dist-msg-actions { margin-top: 6px; text-align: right; }
/* Same trap as the reading trigger: #a33 disappeared into the dark admin
   theme. A mid red reads on both, and the quietness comes from opacity. */
a.dist-msg-del {
	font-size: 12px; color: #e06060 !important; opacity: .7; text-decoration: none !important;
	border: 1px solid transparent; border-radius: 6px; padding: 2px 8px;
}
a.dist-msg-del:hover { opacity: 1; border-color: currentColor; }

/* The status chip is nowrap by default (it looks wrong broken mid-phrase), but
   in this fixed-width table that spills into the next column on a laptop. */
.dist-table-main .dist-status { white-space: normal; }

/* Sortable heads. The arrow is always there once a column is active, and the
   idle state gets a faint pair so it is discoverable without being loud. */
/* No white-space: nowrap here. The table is table-layout: fixed, so a header
   that refuses to wrap does not widen its column — it overflows into the one
   beside it, which is what made Nome/Codice and Area/Agente look overlapped. */
.dist-table-main th.dist-sortable { cursor: pointer; user-select: none; }
.dist-table-main th { overflow-wrap: anywhere; word-break: break-word; }
.dist-table-main th.dist-sortable:hover { text-decoration: underline; }
.dist-table-main th.dist-sortable:focus-visible { outline: 2px solid #6c3fd1; outline-offset: -2px; }
.dist-table-main th.dist-sortable::after { content: " \2195"; opacity: .3; font-size: 9px; }
.dist-table-main th.dist-sort-asc::after  { content: " \25B2"; opacity: .9; font-size: 8px; }
.dist-table-main th.dist-sort-desc::after { content: " \25BC"; opacity: .9; font-size: 8px; }
/* The buttons in the narrow columns must not force the cell wider than its share. */
.dist-table-main td .elgg-button { padding: 5px 9px !important; font-size: 10px !important; white-space: nowrap; }
.dist-table-main td small { font-size: 9.5px; }
/* Shared with the other tables, so changed here rather than at its own rule:
   this chip is also the tick beside an address in the client tables, which are
   not being shrunk.
   No pill in this table: the padding, the rounded background and the top margin
   cost vertical space in every one of 1,477 rows, and the colour says what the
   box was saying. Plain coloured text, a point smaller again. */
.dist-table-main .dist-conv {
	display: inline; margin-top: 0; padding: 0; border-radius: 0;
	background: none !important; font-size: 8.5px;
	/* Every cell in this table is overflow-wrap: anywhere, which is right for a
	   venue name and wrong here: it was splitting "waiting 9d" into "waiti" and
	   "ng 9d". Two words are either on the line or they are not. */
	overflow-wrap: normal; word-break: normal; white-space: nowrap;
}
/* The expanded letter row spans everything, so it keeps normal padding. */
.dist-table-main tr.dist-email-row > td { padding: 14px 16px !important; font-size: 12px; }

/* ---- Kit page: every printable format of the current card, on one page.
   The links are the point of the page, so they read as buttons rather than as
   the pale in-body links the landing stylesheet gives an <a>. */
.dist-kit-body { padding: 4px 2px 8px; }
.dist-kit-body h2 { margin: 0 0 6px; }
.dist-kit-intro { margin: 0 0 10px; }
.dist-kit-code { margin: 0 0 18px; font-size: 14px; }
.dist-kit-range { opacity: .7; margin-left: 6px; }
.dist-kit-size { margin: 0 0 20px; padding: 14px 16px; border-radius: 12px; background: rgba(120, 90, 220, .06); }
.dist-kit-size h3 { margin: 0 0 4px; font-size: 16px; }
.dist-kit-for { margin: 0 0 10px; font-size: 14px; opacity: .85; }
.dist-kit .dist-print-links { display: flex; flex-wrap: wrap; gap: 8px; }
/* Thumbnail beside the file buttons: the format is a thing you look at, not a
   measurement you read. Fixed width so five blocks line up down the page, and
   the buttons wrap under it on a phone rather than squeezing beside it. */
/* The card once, large, above the formats: what you are printing, before which
   size you are printing it at. */
/* "This is a preview" band. Deliberately plain and a little severe: it is a
   statement of fact addressed to the venue's owner, not a design element, and
   it must survive being screenshotted. */
.dist-preview-band {
	margin: 0 0 14px; padding: 9px 14px; border-radius: 9px;
	background: #fdf3e3; border: 1px solid #e8cf9d; color: #6d4c14 !important;
	font-size: 13px; line-height: 1.45; text-align: center;
}
.dist-kit-hero { margin: 0 0 18px; }
.dist-kit-hero img {
	display: block; width: 100%; max-width: 420px; height: auto;
	border: 1px solid rgba(120, 90, 220, .28); border-radius: 10px;
	background: #fff; box-shadow: 0 3px 14px rgba(20, 10, 50, .12);
}
.dist-kit-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.dist-kit-thumb {
	width: 190px; max-width: 45vw; height: auto; flex: 0 0 auto;
	border: 1px solid rgba(120, 90, 220, .28); border-radius: 8px;
	background: #fff; box-shadow: 0 2px 8px rgba(20, 10, 50, .10);
}
.dist-kit-thumb-link { display: block; flex: 0 0 auto; line-height: 0; }
.dist-kit-thumb-link:hover .dist-kit-thumb { border-color: rgba(120, 90, 220, .6); }
.dist-kit-row .dist-print-links { flex: 1 1 220px; }
@media (max-width: 480px) {
	.dist-kit-thumb { width: 100%; max-width: 100%; }
}
.dist-kit a.dist-print-link,
.dist-kit a.btn.dist-print-link {
	display: inline-block; padding: 7px 13px; border-radius: 8px;
	background: #fff !important; color: #4a3a7a !important;
	border: 1px solid #ddd6f4; font-size: 13.5px; text-decoration: none;
}
.dist-kit a.dist-print-link:hover { background: #f3effb !important; }
.dist-kit-where { margin: 24px 0 12px; }
.dist-kit-where h3 { margin: 0 0 8px; font-size: 16px; }
.dist-kit-where ul { margin: 0; padding-left: 20px; }
.dist-kit-where li { margin: 0 0 7px; font-size: 14.5px; }
.dist-kit-note { font-size: 13.5px; opacity: .8; border-top: 1px solid rgba(120, 90, 220, .18); padding-top: 12px; }

/* Scans cell: a number, not a button. The header already says what it counts. */
.dist-table-main td a.dist-scans-link { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* The dashboard password is one long unbreakable token — "humanavintage1120" —
   and an inline-block that cannot wrap does not overflow politely: it runs
   straight over the Scans column beside it. Break it instead. */
.dist-table-main td .dist-pw {
	max-width: 100%; white-space: normal;
	overflow-wrap: anywhere; word-break: break-all;
}

/* "These fields came from your partner reading", on the profile form.
   Its own colours rather than the theme's notice style: this box appears on
   the main site, where .elgg-message is painted by the cosmic theme in one
   direction and by the light theme in the other, and a sentence about
   somebody's birth data is the wrong place to discover which one won. Stated
   for both, so it stays legible either way.

   Written as .elgg-message.dist-prefill-notice with !important because the
   theme's own .elgg-message rules land later in the cascade and won on the
   first try — the same fight the landing pages already have with this theme. */
.elgg-message.dist-prefill-notice {
	margin: 0 0 16px !important; padding: 11px 14px !important; border-radius: 8px !important;
	background: #f3effb !important; color: #3b3260 !important;
	border: 1px solid #ddd6f4 !important; border-left: 3px solid #7a3fc4 !important;
	font-size: 14px !important; line-height: 1.5 !important;
}
/* Descendants too: .elgg-message * is painted by the cosmic theme, so colouring
   only the box leaves the sentence inside it the theme's colour. */
.elgg-message.dist-prefill-notice * { color: #3b3260 !important; }

:root[data-theme="dark"] .elgg-message.dist-prefill-notice,
body.cosmic-theme .elgg-message.dist-prefill-notice {
	background: rgba(122, 63, 196, .16) !important; color: #ece8f6 !important;
	border-color: rgba(122, 63, 196, .45) !important; border-left-color: #a97ce8 !important;
}
:root[data-theme="dark"] .elgg-message.dist-prefill-notice *,
body.cosmic-theme .elgg-message.dist-prefill-notice * { color: #ece8f6 !important; }

/*
 * SIZES ARE IN PX ON PURPOSE — do not "tidy" them into rem.
 *
 * Bootstrap sets `html { font-size: 62.5% }` and nothing anywhere resets it, so
 * 1rem is 10px on this site, not 16px. `body` is then set in px (14px). Every
 * font-size in this file was originally written as if 1rem were 16px, which
 * made the day headings 11.75px and the row times 9.1px — and made three
 * rounds of "+1px" land as +0.06px, which is why they kept looking unchanged.
 * Spacing still uses the theme's rem tokens: those are shared with every other
 * component and are consistent at 10px/rem.
 */

body .recentactivity-window {
    color: var(--color-text-secondary) !important;
    font-size: 15px;			/* body is 14px */
    margin-bottom: var(--space-2);
}

body .recentactivity-upsell {
    color: var(--color-solar-gold) !important;
    /* same size as the window line above it — they read as one block */
    font-size: 15px;
    border-left: 2px solid var(--color-solar-gold);
    padding-left: var(--space-3);
    margin-bottom: var(--space-6);
}

body .recentactivity-truncated {
    color: var(--color-text-muted) !important;
    -webkit-text-fill-color: currentColor;
    font-size: 13px;			/* a muted note, one under body */
    margin: 0 0 var(--space-4);
}

body .recentactivity-empty {
    color: var(--color-text-muted) !important;
    padding: var(--space-8) 0;
    text-align: center;
}

/* --- day heading ------------------------------------------------------- */

body .recentactivity-day {
    font-family: var(--font-display);
    font-size: 17px;			/* 3px larger than body copy */
    color: var(--color-stardust) !important;
    margin: var(--space-8) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-glass-border);
}

.recentactivity-day:first-child {
    margin-top: var(--space-4);
}

/* --- the list ---------------------------------------------------------- */

.recentactivity-list {
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
    /* the rail the rows hang off */
    border-left: 1px solid var(--color-glass-border);
}

.recentactivity-item {
    position: relative;
    padding: var(--space-2) var(--space-3) var(--space-2) var(--space-6);
    line-height: 1.5;
}

/* the dot on the rail; colour says which kind of activity it was */
.recentactivity-item::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 1.05em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-text-muted);
}

.recentactivity-family-reading::before,
.recentactivity-family-daily::before	{ background: var(--color-aurora-teal); }
.recentactivity-family-insight::before	{ background: var(--color-link); }
.recentactivity-family-social::before	{ background: var(--color-aurora-pink); }
.recentactivity-family-initiation::before,
.recentactivity-family-passage::before,
.recentactivity-family-crossroad::before{ background: var(--color-solar-gold); }
.recentactivity-family-trait::before	{ background: var(--color-stardust); }
.recentactivity-family-quiz::before	{ background: var(--color-solar-amber); }
.recentactivity-family-account::before	{ background: var(--color-moonbeam); }

body .recentactivity-time {
    color: var(--color-text-muted) !important;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    margin-right: var(--space-1);
}

body .recentactivity-label {
    color: var(--color-text-secondary) !important;
}

body .recentactivity-sep {
    color: var(--color-text-muted) !important;
    margin: 0 var(--space-1);
}

body .recentactivity-subject {
    color: var(--color-text-primary) !important;
    font-weight: 600;
}

body a.recentactivity-subject		{ color: var(--color-link) !important; }
body a.recentactivity-subject:hover	{ color: var(--color-link-hover) !important; }

/* A row with no subject puts the link on the verb instead. It stays the
   secondary colour so a page of them does not read as a wall of links —
   only the underline on hover says it is one. */
body a.recentactivity-label-link {
    color: var(--color-text-secondary) !important;
    text-decoration: none;
}
body a.recentactivity-label-link:hover {
    color: var(--color-link-hover) !important;
    text-decoration: underline;
}

/* --- removing a row --------------------------------------------------- */

/* Always visible, not hover-revealed: a control nobody can see is a control
   nobody uses, and on touch there is no hover to reveal it at all. Red and
   large enough to hit — 22px, well past the 14px the row's own text runs at.
   Undo is what protects against a mis-click, not obscurity. */
body .recentactivity-remove {
    float: right;
    margin-left: var(--space-2);
    padding: 0 4px;
    background: none;
    border: 0;
    line-height: 1;
    font-size: 22px;
    cursor: pointer;
    opacity: .75;
    color: #e74c3c !important;
    -webkit-text-fill-color: #e74c3c;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}
body .recentactivity-remove:hover,
body .recentactivity-remove:focus {
    opacity: 1;
    transform: scale(1.15);
}

body .recentactivity-item-removed {
    color: var(--color-text-muted) !important;
    font-size: 13px;
}
body .recentactivity-undo {
    margin-left: var(--space-2);
    padding: 0;
    background: none;
    border: 0;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    color: var(--color-link) !important;
}

body .recentactivity-detail {
    color: var(--color-text-muted) !important;
    font-style: italic;
}

/* --- the reading itself ------------------------------------------------ */

.recentactivity-body {
    margin-top: var(--space-2);
}

body .recentactivity-body > summary.recentactivity-summary {
    cursor: pointer;
    color: var(--color-text-secondary) !important;
    font-size: 13px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-glass);
    border: 1px solid var(--color-glass-border);
    border-radius: 6px;
    transition: background var(--transition-fast);
    /* keep the marker, just stop it forcing the excerpt onto its own line */
    display: list-item;
    list-style-position: outside;
    margin-left: var(--space-4);
}

.recentactivity-body > summary.recentactivity-excerpt:hover {
    background: var(--color-glass-border);
}

/* when open, the excerpt is redundant with the text below it */
body .recentactivity-body[open] > summary.recentactivity-summary {
    color: var(--color-text-muted) !important;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* Closed: the summary shows the opening words. Open: those words are about to
   be repeated by the reading itself, so show a collapse control instead. */
.recentactivity-collapse {
    display: none;
}

.recentactivity-body[open] .recentactivity-excerpt {
    display: none;
}

.recentactivity-body[open] .recentactivity-collapse {
    display: inline;
}

body .recentactivity-text {
    padding: var(--space-4);
    margin-left: var(--space-4);
    background: var(--color-surface-card);
    border: 1px solid var(--color-glass-border);
    border-top: 0;
    border-radius: 0 0 6px 6px;
    color: var(--color-text-primary) !important;
    max-height: 30rem;
    overflow-y: auto;
}

/* Some components pin -webkit-text-fill-color to #fff !important, which paints
   text white whatever `color` says. Follow the colour instead. */
body .recentactivity-list,
body .recentactivity-list *,
body .recentactivity-day,
body .recentactivity-window,
body .recentactivity-upsell,
body .recentactivity-empty {
    -webkit-text-fill-color: currentColor;
}

body .recentactivity-text strong,
body .recentactivity-text b {
    color: var(--color-stardust) !important;
}

body .recentactivity-text h2,
body .recentactivity-text h3,
body .recentactivity-text h4 {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--color-stardust) !important;
    margin: var(--space-3) 0 var(--space-2);
}

/* --- narrow screens ---------------------------------------------------- */

@media (max-width: 600px) {

    .recentactivity-item {
	padding-left: var(--space-4);
    }

    /* the time earns its own line rather than squeezing the label */
    .recentactivity-time {
	display: block;
	margin-bottom: 2px;
    }

    .recentactivity-item::before {
	top: 0.85em;
    }

    .recentactivity-body > summary.recentactivity-summary,
    .recentactivity-text {
	margin-left: 0;
    }
}