/* App Specific CSS Document */

html {
	color: #333;
	background-color: #efefef;
}
/* Prevent click highlighting */
*, *:before, *:after {
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	-webkit-tap-highlight-color: transparent;

	-webkit-touch-callout: none;
  -webkit-user-select: none; /* Chrome/Safari */
	-khtml-user-select: none;
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+ */
	/* Not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}
input, select, textarea {
  -webkit-user-select: text; /* Chrome/Safari */
	-khtml-user-select: text;
  -moz-user-select: text; /* Firefox */
  -ms-user-select: text; /* IE10+ */
	/* Not implemented in browsers yet */
	-o-user-select: text;
	user-select: text;
}
textarea[disabled] {
	background-color: #eee;
}
p {
	letter-spacing: 1px;
	line-height: 23px;
	font-weight: 400;
	font-size: 12px;
	margin-top: 0px;
}

div.group-row {
	padding-top: 10px;
	padding-bottom: 10px;
}
div.group div.group-row:nth-child(odd) {
	background-color: rgba(0,0,0,0.06);
}
div.group div.group-row:nth-child(even) {
	background-color: rgba(0,0,0,0.02);
}
div.group .tbl-cell {
	width: 50%;
}
div.group .group-hidden {
	display: none;
}

table {
	width: 100%;
	border-collapse: collapse;
}
table.list .edit {
	float: none;
}
table.list tr:nth-child(odd) {
	background-color: #eeeeee;
}
table.list tr:nth-child(even) {
	background-color: #e5e5e5;
}
table.list td {
	padding: 7px 0px;
	font-size: 12px;
}
table.list tr.label td {
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: 200;
	color: #aaa;
}
table.list tr.blast td {
	font-weight: 500;
	line-height: 32px;
	letter-spacing: 1px;
	cursor: pointer;
}
table.list tr.blast td.email-created,
table.list tr.blast td.email-failed,
table.list tr.blast td.email-delivered,
table.list tr.blast td.email-opened,
table.list tr.blast td.email-clicked {
	font-size: 22px;
}
table.list tr.disputed:nth-child(odd) {
	background-color: rgba(115,0,0,0.098);
}
table.list tr.disputed:nth-child(even) {
	background-color: rgba(115,0,0,0.098);
}
table.list tr:hover,
table.list tr.disputed:hover {
	background-color: #fff;
}
table.list tr.label:hover {
	background-color: #eeeeee;
}
tr.blast div.email-created,
tr.blast div.email-failed,
tr.blast div.email-delivered,
tr.blast div.email-opened,
tr.blast div.email-clicked {
	font-size: 22px;
	display: table-cell;
	letter-spacing: -1px;
}
table.list td.email-created,
div.email-created {
	font-size: 11px;
	color: rgba(136,136,136,0.7);/*gray*/
}
table.list td.email-failed,
div.email-failed {
	font-size: 11px;
	color: rgba(223,49,46,0.5);/*red*/
}
table.list td.email-delivered,
div.email-delivered {
	font-size: 11px;
	color: rgba(148,31,182,0.5);/*purple*/
}
table.list td.email-opened,
div.email-opened {
	font-size: 11px;
	color: rgba(31,81,182,0.6);/*blue*/
}
table.list td.email-clicked,
div.email-clicked {
	font-size: 11px;
	color: rgba(7,130,13,0.7);/*green*/
}
table.list tr.receipt-item td:first-child {
	border-left: 3px solid #bebebe;
}
table.list tr.receipt-hl:nth-child(odd){
	background-color: rgba(0,0,255,0.09);
}
table.list tr.receipt-hl:nth-child(even) {
	background-color: rgba(0,0,255,0.09);
}
table.list tr.receipt-item.receipt-glow:nth-child(odd){
	background-color: rgba(0,0,255,0.05);
}
table.list tr.receipt-item.receipt-glow:nth-child(even) {
	background-color: rgba(0,0,255,0.05);
}
table.list tr.receipt-item.receipt-glow td:first-child {
	border-left: 3px solid rgba(0,0,255,0.15);
}
table td.pad {
	padding-left: 20px;
}
table.list .smalltxt {
	font-size: 11px;
	letter-spacing: 0px;
}

.tbl.list .tbl-row .tbl-cell {
	padding: 9px 0px 9px 10px;
	font-size: 13px;
}
.tbl.list .tbl-row.label .tbl-cell {
	font-size: 10px;
	letter-spacing: 1px;
	font-weight: 200;
	color: #aaa;
}
.tbl.list .tbl-row .tbl-cell span {
	vertical-align: middle;
}
.tbl.list .tbl-row.label:nth-child(odd) {
	background-color: transparent;
}
.tbl.list .tbl-row.label:nth-child(even) {
	background-color: transparent;
}
.tbl.list .tbl-row:nth-child(odd) {
	background-color: #eeeeee;
}
.tbl.list .tbl-row:nth-child(even) {
	background-color: #e5e5e5;
}
.tbl.list .tbl-row:hover {
	background-color: #fafafa;
}
.row-footer {
  font-size: 20px;
  font-weight: 800;
  background-color: inherit;
  color: #999;
}

.brand-color {
	color: #443287;
}
.red {
	color: rgba(223,49,46,0.5);
}
.green {
	color: rgba(7,130,13,0.7);
}
.bold {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
}
.gray {
	color: rgba(153,153,153,0.9);
}
.solid {
	vertical-align: middle;
}
.font-small {
	font-size: 12px;
}
.input-small {
	width: 50px;
}
.input-small input {
	padding-left: 0px;
	padding-right: 0px;
}

/* Row */
.flex-row {
	display: flex;
	flex-direction: row;
	align-items: center;
}
.flow-row > div {
	flex: 1;
}
.flex-row label {
	margin: 0px;
	flex: 1;
}
.flex-row input {
	margin: 0px;
	flex: 1;
}

/* Simulated Links */
.link {
	color: #a083e4;
	font-weight: 500;
	cursor: pointer;
}
/* Active Row */
.online,
.list tr.online:nth-child(odd) {
	background-color: rgba(0,153,0,0.2);
}
.list tr.online:nth-child(even) {
	background-color: rgba(0,153,0,0.18);
}
.highlight,
.list tr.highlight:nth-child(odd) {
	background-color: rgba(247,229,141,0.4);
}
.list tr.highlight:nth-child(even) {
	background-color: rgba(247,229,141,0.5);
}
.list tr.online:hover,
.list tr.highlight:hover {
	background-color: #fff;
}

/* Alternating Backgrounds */
.series label {
	margin: 0px -20px;
	width: 100%;
	display: block;
	padding: 8px 20px;
	color: #959595;
	cursor: pointer;
}
.series label:nth-child(odd) {
	background-color: #e9e9e9;
}
.series label:nth-child(even) {
	background-color: #e0e0e0;
}
.series label:hover {
	background-color: #efefef;
}
.series label input:checked + span {
	font-weight: bold;
	color: #888;
}

/* Credit Card input */
.in-exp-month,
.in-exp-year,
.in-cvv,
.in-zip {
	padding-left: 5px;
	padding-right: 2px;
}

/* Buy Menu Flow */
.class-title {
	text-align: center;
	margin-bottom: 3px;
}

.amount {
	white-space: nowrap;
}
.amount-sign {
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	color: #666;
	line-height: 50px;
	padding-right: 3px;
}
.amount-dollars {
	display: inline-block;
}
.amount-cents {
	display: inline-block;
	vertical-align: top;
	font-size: 5vmin;
	color: #444;
	line-height: 40px;
	padding-left: 4px;
	letter-spacing: -2px;
}
.amount-spacer {
	display: inline-block;
	padding: 3px;
}

.rate-value {
	display: inline-block;
}
.rate-label {
	display: inline-block;
	vertical-align: top;
	font-size: 16px;
	color: #666;
	line-height: 50px;
	padding-left: 5px;
	letter-spacing: 0px;
}
.rate-symbol {
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	color: #666;
	line-height: 50px;
	padding-right: 3px;
}
.rate-spacer {
	display: inline-block;
	vertical-align: top;
	padding: 0px 3px;
	font-size: 30px;
	color: #666;
}
.percent-symbol {
	color: #bbb;
	font-size: 14px;
	line-height: 14px;
	padding: 9px 2px;
}


.icon {
	background-color: rgba(255,0,0,0.5);
	width: 12px;
	height: 11px;
	display: inline-block;
	-webkit-mask-size: contain;
	-webkit-mask-repeat: no-repeat;
}
/* Wallet / financing brand marks in purchase rows, sized like the card-network icons */
.pay-mark { display: inline-flex; align-items: center; height: 14px; vertical-align: middle; }
.pay-mark svg { height: 14px; width: auto; display: block; }
.pay-mark .affirm-badge { display: inline-flex; align-items: center; height: 14px; padding: 0 4px; border-radius: 3px; background: #1D1C46; box-sizing: border-box; }
.pay-mark .affirm-badge img { height: 8px; width: auto; max-width: none; display: block; margin-top: -1px; }
.studio .icon-card,
.icon-card {
	opacity: 0.7;
	height: 12px;
	display: inline-block;
	vertical-align: middle;
}


.col-edge {
	margin: 0px 0px;
}
.col-edge-qtr {
	margin: 0px 10px;
}
.col-qtr {
	width: 50%;
	display: inline-block;
}
.col-edge-qtr .box-med {
	margin: 20px 10px;
}
.col-half {
	width: 100%;
	display: inline-block;
	vertical-align: top;
}
.col-half .box-wrap,
.col-half .top {
	width: 100%;
	max-width: none;
}
.col-half .dev-med,
.col-half .dev-lrg {
	display: none;
}
.col-full {
	width: 100%;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}


.page {
	width: 100%;
	text-align: left;
	display: inline-block;
	margin-top: 20px;
	position: relative;
}
.page-close {
	position: absolute;
	right: 0px;
	cursor: pointer;
	font-size: 30px;
	font-weight: 800;
	color:#888;
	padding-right: 20px;
}
.page-close:hover {
	color: #666;
}
.page#members-list {
	margin-top: 0px;
}
.title {
	color: #614591;
	font-weight: 800;
	text-align: left;
	padding-bottom: 20px;
  position: relative;
}
.title .subscript {
	padding-left: 8px;
	color: #bbb;
	font-size: 9px;
	letter-spacing: 0px;
	font-weight: 600;
}
.title-short {
	padding-bottom:10px;
}
.title div.edit {
	padding: 0px 10px;
}
.title .close {
	padding: 0px 0px 0px 10px;
}
.title button {
	margin: 0px 10px;
}
.title-simple {
	color: #614591;
	font-weight: 600;
	text-align: left;
	padding-bottom: 20px;
}
.subtitle {
	color: #bbb;
}
.text {
    color: #333;
    font-size: 23px;
    font-weight: 400;
    line-height: 36px;
    text-align: center;
    padding: 0px 40px 20px;
    margin: 0px -20px;
    overflow-wrap: break-word;
}
.text strong {
	color: #444;
	font-weight: 600;
}
.in-large {
	font-size: 18px;
	line-height: 22px;
	text-align: center;
}
.strong {
	color: #443287;
	font-weight: 600;
	opacity: 0.8;
}
.edge {
	margin: 0px -20px;
}
.footer {
	padding: 20px 0px;
	font-size: 10px;
	text-align: center;
	color: #bbb;
}
.legal {
	color: #999;
}
.full {
	width: 100%;
}
.hide {
	display: none;
}
.slash {
	font-size: 19px;
	vertical-align: middle;
	color: #bbb;
}
.gift {
	font-size: 10px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(164,215,255,0.5);
	line-height:12px;
}
.gift img {
	height: 12px;
	opacity: 0.3;
	display: inline-block;
	vertical-align: middle;
}
.discount {
	font-size: 10px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(143, 218, 255, 0.6);
	line-height: 12px;
}
.giftcard {
	font-size: 10px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(173, 251, 255, 0.6);
	line-height: 12px;
}
.note {
	font-size: 10px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(255,235,143,0.6);
	line-height: 12px;
}
.note-member {
	margin-bottom: 5px;
}
.code {
	font-size: 10px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(237,210,237,0.6);
	line-height: 12px;
}
.tag,
.dispute {
	font-size: 10px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(215,215,215,0.8);
	line-height: 12px;
}
.warn {
	font-size: 11px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(186,126,0,0.25);
	color: rgba(186,126,0,1);
	text-align: center;
	line-height: 12px;
}
.fail {
	font-size: 11px;
	padding: 4px 5px;
	border-radius: 5px;
	background-color: rgba(186,0,0,0.15);
	color: rgba(186,0,0,1);
	text-align: center;
	line-height: 12px;
}
.warn img,
.fail img {
	height: 10px;
	display: inline-block;
	vertical-align: middle;
}
.warn span,
.fail span {
	vertical-align: middle;
}
.nowrap {
	white-space: nowrap;
}
.double {
	white-space: nowrap;
	display: inline-block;
}
.double button {
	margin: 0px;
}
.rsvp-bg {
	background-color: #74c6de;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  -webkit-border-top-left-radius: 20px;
     -moz-border-radius-topleft: 20px;
          border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
     -moz-border-radius-topright: 20px;
          border-top-right-radius: 20px;
  -webkit-box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  box-shadow:inset 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
}
.rsvp-bg .rsvp {
	color: #fff;
	font-size: 11px;
	line-height: 11px;
	text-align: center;
	padding: 4px 0px 4px;
	text-shadow: 0 -1px 0 rgba(255, 0, 0, 0.25);
}

.waitlist {
	color: #000;
	font-size: 11px;
	line-height: 11px;
	text-align: center;
	padding: 4px 0px 4px;
	text-shadow: none;
}
.bar-green {
	background: linear-gradient(#62c462, #51a351);
	background: -o-linear-gradient(#62c462, #51a351);
	background: -moz-linear-gradient(#62c462, #51a351);
	background: -webkit-linear-gradient(#62c462, #51a351);
}
.bar-red {
	background-color: #bd362f;
  opacity: 0.65;
}


.page-bar {
	position: fixed;
	top: 64px;
	z-index: 71;
	width: 100%;
}
.page-bar-spacer {
	width: 100%;
	height: 34px;
}
.page-bar-inner {
	width: 100%;
	height: 34px;
	line-height: 34px;
	background-color: #007abf;
	color: #eee;
	background: linear-gradient(#5d45a2, #443287);
	background: -o-linear-gradient(#5d45a2, #443287);
	background: -moz-linear-gradient(#5d45a2, #443287);
	background: -webkit-linear-gradient(#5d45a2, #443287);
}
.page-back {
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	height: 34px;
	padding: 0px 10px 0px 15px;
	cursor: pointer;
}
.page-refresh {
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	height: 34px;
	padding: 0px 10px;
	cursor: pointer;
}
.page-info {
	display: inline-block;
	vertical-align: top;
	font-size: 20px;
	height: 34px;
	padding: 0px 10px;
	cursor: pointer;
}
.page-back img,
.page-refresh img,
.page-info img {
	height: 14px;
	opacity: 0.7;
	display: block;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.page-info img {
	-webkit-filter: invert(100%);
	filter: invert(100%);
}
.page-back:hover,
.page-refresh:hover,
.page-info:hover,
.page-button:hover {
	background-color: rgba(0,0,0,0.2);
}
.page-title,
.page-amount {
	display: inline-block;
	vertical-align: top;
	font-size: 11px;
	line-height: 34px;
	padding: 0px 0px 0px 0px;
}
.page-amount {
	padding: 0px 0px 0px 7px;
}
.page-right {
	vertical-align: middle;
	float: right;
  display: flex;
}
.page-button {
	padding: 0px 30px 0px 15px;
	font-size: 11px;
	height: 34px;
	line-height: 34px;
	cursor: pointer;
}
.page-menu {
	display: none;
	position: absolute;
	right: 0px;
	background-color: #333;
	z-index: 50;
}
.page-menu-row {
	padding: 10px 0px;
}
.page-menu-nav {
	font-size: 14px;
	width: 140px;
	line-height: 40px;
	text-align: center;
	display: inline-block;
	color: #ccc;
	cursor: pointer;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.page-menu-nav:hover {
	color: #eee;
	background-color: #222;
}
.page-menu-nav input {
	border-radius: 0px;
	text-align: center;
	position: relative;
	z-index: 100000;
}
.page-right-sel .page-button {
	background-color: rgba(0,0,0,0.2);
	color: #ddd;
}
.page-right-sel .page-menu {
	display: inline-block;
}


.drawer {
	width: 100%;
	height: 0px;
	overflow: scroll;
	z-index: 70;
	-webkit-overflow-scrolling: touch;

	background-color: #ddd;

	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	-ms-transition: all .8s ease;
	-o-transition: all .8s ease;
	transition: all .8s ease;
}
.drawer-label {
	font-size: 12px;
	background-color: #aaa;
	color: #eee;
	margin-bottom: 15px;
  vertical-align: middle;
}
.drawer-profile {
	width: 100%;
	height: auto;
	padding: 10px 0px;
	background: linear-gradient(#ddd, #ccc);
	background: -o-linear-gradient(#ddd, #ccc);
	background: -moz-linear-gradient(#ddd, #ccc);
	background: -webkit-linear-gradient(#ddd, #ccc);
}
.drawer-profile .box-profile {
	cursor: pointer;
}
.scroll-arrow {
	position: absolute;
	right: 10px;
	bottom: 50px;
	opacity: 0.7;
	pointer-events: none;
}


.edit {
	float: right;
	height: 16px;
	cursor: pointer;
	display: inline-block;
	opacity: 0.3;
}
.edit-left {
	position: absolute;
	top: 0px;
	left: 0px;
	margin: 20px;
}
.edit-right {
	position: absolute;
	top: 0px;
	right: 0px;
	margin: 20px;
}
.edit:hover {
	opacity: 0.5;
}
div.edit,
span.edit {
	opacity: 1;
}
div.edit:hover,
span.edit:hover {
	opacity: 1;
}
div.edit img,
span.edit img {
	height: 16px;
	opacity: 0.3;
}
div.edit:hover img,
span.edit:hover img {
	opacity: 0.5;
}
.extra {
	float: none;
	padding: 7px 15px 18px 15px;
}
.right-mod {
	text-align: right;
	float: right;
	width: 300px;
}


.invert {
	-webkit-filter: invert(100%);
	filter: invert(100%);
}
.lock {
	display: inline-block;
	opacity: 0.2;
	height: 16px;
}
.action {
	display: inline-block;
	text-align: center;
	cursor: pointer;
	vertical-align: top;
	width: 80px;
	height: 105px;
	position: relative;
}
.action-original,
.action-circle {
	display: inline-block;
	border-radius: 100%;
	width: 60px;
	height: 60px;
	position: relative;
	cursor: pointer;

	background: linear-gradient(#5d45a2, #443287);
	background: -o-linear-gradient(#5d45a2, #443287);
	background: -moz-linear-gradient(#5d45a2, #443287);
	background: -webkit-linear-gradient(#5d45a2, #443287);
}
.action-original img,
.action-circle img {
	max-width: 50%;
	max-height: 55%;
	position: absolute;
	left: 50%;
	top: 50%;
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
	transform: translate(-50%, -50%);
	opacity: 0.9;
}
.action-profile {
	margin-left: 15px;
	vertical-align: middle;
}
.action-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 13px;
	padding: 1px 0px 0px;
	color: #444;
}
.action:hover img {
	opacity: 1.0;
}


.box {
	background-color: #f6f6f6;
	color: #999;
	padding: 20px;
	/*border: 1px solid #CCC;*/
	display: inline-block;
	vertical-align: top;
	text-align: left;
	position: relative;

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

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

	webkit-box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12);
  box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12);
}
.box-popup {
	width: calc(100% - 40px);
	max-width: 320px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 0px 40px rgba(18, 12, 12, 0.7);
	-webkit-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
}
.box-full {
	width: 100%;
}
.box-small {
	width: 300px;
	display: inline-block;
	margin: 20px 10px 10px;
}
.box-pic {
	width: 300px;
	display: inline-block;
	margin: 20px 10px 10px;
	padding: 0px;
}
.mobile .box-responsive,
.box-responsive {
	width: 85%;
	display: inline-block;
	margin: 20px 10px 10px;
}
.mobile .col-50,
.col-50 {
	width: 100%;
	vertical-align: top;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.mobile .col-50-left,
.mobile .col-50-right {
	padding: 0px;
}
.box-med {
	padding: 20px 0px;
	display: block;
	margin: 20px;
}
.box-tight {
	padding: 10px 0px 20px;
}
.box-dual {
	display: inline-block;
	width: 50%;
	vertical-align: middle;
	text-align: center;
}
canvas {
	vertical-align:top;
}
.box-wrap {
	width: 100%;
	max-width: 500px;
	padding: 0px 10px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.view-memb .box-wrap {
	padding: 0px;
}
.box-form {
	max-width: 390px;
	display: inline-block;
	margin: 20px 10px 10px;
}
.box-dyn {
	min-width: 250px;
	display: block;
	padding: 0px;
	padding-bottom: 20px;
	margin: 20px 10px;
}
.box-dyn .title,
.box-dyn .box-main-title {
	padding: 20px;
}
.box-subinner {
	padding: 10px 10px 0px;
	margin-bottom: 5px;
	background-color: rgba(0,0,0,0.1);
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.box-outer {
	display: flex;
	flex-direction: column;
	gap: 40px;
	max-width: 350px;
	margin: 40px 20px;
	text-align: center;
}
.box-outer > .box {
	margin: 0;
}
.box-max {
	padding: 20px;
	max-width: 350px;
}
.box-online {
	position: absolute;
	top: 5px;
	right: 7px;
	font-size: 11px;
	letter-spacing: 0.5px;
	color: #1fa025;
}
.box-offline {
	position: absolute;
	top: 5px;
	right: 7px;
	font-size: 11px;
	letter-spacing: 0.5px;
	color: #999;
}
.box-profile {
	width: 64px;
	height: 64px;
	display: inline-block;
	vertical-align: middle;
	background-color: #bbb;
	position: relative;

	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
}
.box-profile img {
	width: 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.box-profile-med {
	width: 48px;
	height: 48px;
	margin: 8px 0px 8px 20px;
	vertical-align: middle;
}
.box-profile-thumb {
	width: 42px;
	height: 42px;
	min-width: 42px;
	min-height: 42px;
	margin-right: 5px;
	vertical-align: middle;

	opacity: 0.9;
}
.box-profile-mini {
	width: 32px;
	height: 32px;
	margin-right: 0px;
	vertical-align: middle;
}
.box-profile-tiny:hover,
.box-profile-thumb:hover  {
	opacity: 1;
}
.box-profile.box-profile-border {
	border: 3px #fdfdfd solid;
}
.box-profile-thumb.box-profile-border {
	border: 2px #fdfdfd solid;
}
.box-profile-tiny {
	width: 24px;
	height: 24px;
	margin-right: 5px;
	vertical-align: middle;

	opacity: 0.7;
}
table.list tr:hover .box-profile-tiny,
table.list tr:hover .box-profile-thumb {
	opacity: 1;
}
.box-right {
	float: right;
	padding-left: 20px;
	width: 166px;
}
.box-title {
	color: #666;
	font-weight: 600;
	padding: 1px 0px 2px;
	letter-spacing: -0.5px;
	text-align: left;
	font-size: 14px;
	overflow: hidden;
}
.box-title img {
	 height: 12px;
	 display: inline-block;
}
.box-text {
	padding: 4px 0px;
	letter-spacing: -0.5px;
	text-align: left;
	font-size: 12px;
	line-height: 12px;
}
img.indicator {
	height: 12px;
	margin: 0px 0px -1px 0px;
	display: inline-block;
	opacity: 0.3;
}
.box-text img.indicator {
	height: 12px;
	margin: 0px 0px -1px 5px;
	display: inline-block;
	opacity: 0.3;
}
.box-text-student {
	color: #999;
	font-weight: 600;
}
.box-text-kiosk,
.box-text-worker,
.box-text-volunteer,
.box-text-instructor,
.box-text-trainer,
.box-text-staff,
.box-text-manager,
.box-text-accountant {
	color: #007abf;
	font-weight: 600;
}
.box-text-owner {
	color: rgba(0,153,0,0.7);
	font-weight: 600;
}
.box-male {
	margin: 20px 10px 10px;
	box-shadow: inset 0 0 15px rgba(72,130,195,0.3);
	border-color: rgba(72,130,195,0.3);
	border: 1px solid #ccc;
	/*background-color: rgba(72,130,195,0.15);
	color: rgba(72,130,195,1);*/
}
.box-female {
	margin: 20px 10px 10px;
	box-shadow: inset 0 0 15px rgba(211,113,191,0.3);
	border-color: rgba(211,113,191,0.3);
	border: 1px solid #ccc;
	/*background-color: rgba(211,113,191,0.15);
	color: rgba(211,113,191,1);*/
}
.box-gender {
	margin: 20px 10px 10px;
	box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
	border-color: rgba(0,0,0,0.3);
	border: 1px solid #ccc;
}

.box-male .box-profile {
	background-color: rgba(123,169,221,0.5);
}
.box-female .box-profile {
	background-color: rgba(211,113,191,0.5);
}

.box-super {
	border: 1px solid #CCC;
	box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}
.box-user {
	border-style: solid;
}
.box-guest {
	border-style: dashed;
}
.box-hover:hover {
	background-color: rgba(255,255,255,0.9);
}
.box-main-title {
	color: #443287;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
    display: flex;
    justify-content: space-between;
}
.box-main-right {
	display: flex;
	justify-content: flex-end;
	gap: 15px;
}
.box-main-right .btn-small {
	margin: 0px;
}
.box-med .box-main-title {
	padding: 0px 20px 20px;
}
.box-small .box-main-title,
.box-max .box-main-title {
	padding: 0px 0px 20px;
}
.box-value {
	font-size: 60px;
	font-weight: 500;
	line-height: 60px;
	text-align: center;
	color: #444;
	letter-spacing: -2px;
}
.box-value img {
	display: inline-block;
}
.box-subvalue {
	font-size: 10vmin;
	font-weight: 500;
	line-height: 60px;
	text-align: center;
	color: #444;
	letter-spacing: -3px;
}
.box-subtitle {
	text-align: center;
	font-weight: 600;
	line-height: 29px;
	letter-spacing: 0px;
	color: #443287;
}
.box-value-negative .amount-dollars,
.box-value-negative .amount-cents {
	color: rgba(186,0,0,0.8);/*red*/
}
.box-value-positive .amount-dollars,
.box-value-positive .amount-cents {
	color: #039427;/*green*/
}
.box-click:hover {
  background-color: #fefefe;
	cursor: pointer;
}

.box-dark {
	min-width: 300px;
	height: 190px;
	border-radius: 30px;
	position: relative;

	background: linear-gradient(#666, #444);
	background: -o-linear-gradient(#666, #444);
	background: -moz-linear-gradient(#666, #444);
	background: -webkit-linear-gradient(#666, #444);
}
.box-dark img {
	max-width: 80%;
	max-height: 95%;
	position: absolute;
	left: 50%;
	top: 50%;
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
	transform: translate(-50%, -50%);
}
.box-dark:hover {
	background: none;
	background-color: #444;
}
.box-dark span {
	font-size: 36px;
	line-height: 40px;
	color: #eee;
	width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
  -ms-transform: translate(-50%, -50%); /* IE 9 */
	transform: translate(-50%, -50%);
}
.card-small {
	min-width: 160px;
	width: 160px;
	height: 100px;
	border-radius: 20px;
}
.card-small span {
	font-size: 18px;
}
.dark-block {
	background-color: rgba(0,0,0,0.05);
	margin: 0px -20px 0px;
	padding: 20px 20px 7px;
}
.dark-block-limit {
	background-color: rgba(0,0,0,0.05);
	padding: 10px 20px 7px;
	text-align: center;
	display: none;
}
.dark-block-cent {
	display: inline-block;
    width: 100%;
}

/* Full Row */
.col-edge-full {
	margin: 20px 0px 20px;
}
.col-tbl {
	width: 100%;
	display: block;
	table-layout: fixed;
}
.col-tbl-row {
	display: block;
}
.col-tbl-cell {
	display: block;
	vertical-align: top;
}

/* Member */
.member-buttons {
	text-align: center;
	background-color: rgba(0,0,0,0.07);
	padding: 20px 0px 10px;
	margin-top: 0px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.member-buttons .dropdown {
	display: inline-block;
}
.member-search {
	display: inline-block;
	margin-bottom: 0px;
	margin-right: 0px;
	vertical-align: middle;
	max-width: 140px;
  padding: 10px 0px 10px 7px;
  font-size: 17px;
	line-height: 22px;

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

	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;

	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
}
.btn-large.member-search-btn,
.member-search-btn {
	margin-left: 0px;
	padding-left: 6px;
	padding-right: 6px;

	-webkit-border-top-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	border-top-left-radius: 0px;

	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
}
.profile-pic {
	padding: 0px;
	max-width: 300px;
	overflow: hidden;
}
.profile-pic img {
	width: 100%;
}


/* Circle Checkmark */
.circle-green {
	display: inline-block;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	background-color: green;
	width: 40px;
	height: 40px;
	position: relative;
	vertical-align: middle;
	margin: 10px 10px 10px 0px;
}
.circle-green img {
	width: 60%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}


/* Triangle */
.triangle {
	position: relative;
}
.triangle::after {
	content: '';
	position: absolute;
	border-color: transparent;
	border-style: solid;
	border-width: 30px;
	top: 0;
	cursor: pointer;
}
.triangle.tri-topleft::after {
  border-top-left-radius: 3px;
	left: 0;
}
.triangle.tri-topright::after {
  border-top-right-radius: 3px;
	right: 0;
}


/* Messages */
.msg {
	padding-top: 5px;
	padding: 0px;
	position: relative;
	overflow: hidden;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
.msg-icon {
	position: absolute;
	top: 11px;
	right: 8px;
	z-index: 10;
	opacity: 0.7;
	-webkit-filter: invert(100%);
	filter: invert(100%);
	max-width: 20px;
	max-height: 16px;
	cursor: pointer;
}
.msg-bar {
	color: rgba(0,0,0,0.4);
	padding: 10px 10px 0px;
	cursor: pointer;

	border-top-left-radius: 10px;
	-moz-border-top-left-radius: 10px;
	-webkit-border-top-left-radius: 10px;

	border-top-right-radius: 10px;
	-moz-border-top-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
}
.msg.triangle.tri-topleft::after {
  border-top-left-radius: 9px;
}
.msg.triangle.tri-topright::after {
  border-top-right-radius: 9px;
}
.triangle.tri-topleft::after {
	border-top-color: #443287;
	border-left-color: #443287;
}
.triangle.tri-topright::after {
	border-top-color: #443287;
	border-right-color: #443287;
}
.msg.msg-open.triangle.tri-topright::after {
	border-top-color: #5d45a2;
	border-right-color: #5d45a2;
}
.msg.msg-unread .msg-bar,
.msg.msg-unread .msg-brief {
	background-color: rgba(0,150,0,0.1);
}
.msg.msg-unread .msg-date:after {
	position: absolute;
	display: inline-block;
	background-color: red;
	content: 'NEW';
	color: #fff;
	margin-top: -3px;
	margin-left: 10px;
	padding: 3px 3px;
	opacity: 0.9;

	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
.msg-date {
	font-size: 12px;
	line-height: 12px;
}
.msg-time {
	display: none;
}
.msg-brief {
	padding: 16px 20px;
	font-size: 15px;
	line-height: 23px;
	color: #888;
	cursor: pointer;
	min-height: 23px;
}
.msg-content {
	display: none;
	font-size: 15px;
	line-height: 23px;
	color: #888;
	min-height: 23px;

  -webkit-user-select: text; /* Chrome/Safari */
	-khtml-user-select: text;
  -moz-user-select: text; /* Firefox */
  -ms-user-select: text; /* IE10+ */
	/* Not implemented in browsers yet */
	-o-user-select: text;
	user-select: text;
}
.msg.msg-open .msg-icon {
	opacity: 0.8;
}
.msg.msg-open .msg-bar,
.msg.msg-open .msg-brief {
	background-color: rgba(0,0,0,0.07);
}
.msg.msg-open .msg-date {
	color: rgba(0,0,0,0.5);
}
.msg.msg-open .msg-time {
	display: inline-block;
}
.msg.msg-open .msg-content {
	display: block;
}
.msg.msg-open.msg-unread .msg-date:after {
	display: none;
}

/* Support Buttons */
.support-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
	margin: 24px 0px 32px;
	padding: 0px 20px;
}
.support-button {
	background-color: #f8f8f8;
    color: #707070;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.12);
	padding: 10px 20px;
	cursor: pointer;
	transition: background 0.3s ease;
	min-width: 255px;
	width: 100%;
}
.support-button:hover:not(.support-button-disabled) {
	background-color: #fff;
}
.support-button-disabled {
	opacity: 0.6;
	cursor: default;
}
.support-button-title {
	font-size: 18px;
	line-height: 18px;
	margin: 10px 0px;
	font-weight: 600;
	letter-spacing: 2px;
}
.support-button-icon {
	font-size: 30px;
	line-height: 30px;
	margin: 10px 0px;
}
.support-button-text {
	position: relative;
}
.support-text-copied {
	display: none;
	color: #fff;
	background-color: green;
	position: absolute;
	top: 130%;
	left: 50%;
	transform: translateX(-50%);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 5px 10px;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.19), 0 2px 2px rgba(0, 0, 0, 0.12);
}
/* For Medium Screen Desktop */
@media only screen and (min-width: 992px) {
	.support-buttons {
		flex-direction: row;
	}
	.support-button {
		max-width: 380px;
	}
}


/* Blast Creator */
.creator-outer {
	zoom: 58%;
}
.creator-outer .tip-guide {
	zoom: 165%;
	z-index: 32;
}
.creator-border {
	min-height: 400px;
}
.creator {
	background-color: #dddddd;
	display: block;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: visible;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.creator-options-pane {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 19;
}
.creator-options {
	background-color: #e8e8e8;
	display: table-cell;
	vertical-align: top;
	width: 300px;
	position: fixed;
	top: 98px;
	bottom: 0px;
	right: -400px;
	-webkit-transition: right 1s; /* Safari */
  	transition: right 1s;
	z-index: 20;
}
/* Guided Tour tips inside the email sidebar don't take on its uppercase headings */
.cc-sidebar .tip-guide { text-transform: none; letter-spacing: normal; font-weight: normal; }
/* Desktop: a wider side panel (phones keep 300px, sliding in over the canvas) */
@media (min-width: 601px) {
	.creator-options { width: 380px; }
}
.creator-buttons {
	font-size: 14px;
	font-weight: bold;
	margin: 20px 0px;
}
.creator-buttons input {
	display: none;
}
.creator-image-item {
	position: relative;
}
.creator-image-item span {
	position: absolute;
	right: 0px;
	font-size: 24px;
	line-height: 32px;
	font-weight: bold;
	color: #fff;
	background-color: #ccc;
	opacity: 0.5;
	width: 32px;
	height: 32px;
	border-radius: 100%;
	cursor: pointer;

	box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
}
.creator-image-item:hover span {
	opacity: 1.0;
}
.creator-image-item img {
	width: 100%;
}
.creator-option {
	background-color: #f3f3f3;
	border: 7px dashed #777;
	padding: 30px;
	margin: 10px 5px;
}
.creator-option:hover {
	background-color: #fff;
	border-color: #999;
	cursor: pointer;
}
.creator-block:hover {
	outline: 3px dashed #ccc;
	position: relative;
}
.creator-block.creator-block-selected {
	outline: 3px dashed #999;
	position: relative;
}
.creator-block .creator-label,
.creator-block .creator-modifiers {
	display: none;
}
.creator-block.creator-block-selected .creator-label {
	display: inline-block;
	position: absolute;
	top: -20px;
	left: 5px;
	font-size: 14px;
	letter-spacing: 0.5px;
	color: #999;
}
.creator-block.creator-block-selected .creator-modifiers {
	display: inline-block;
	position: absolute;
	z-index: 10;
}
.creator-block.creator-block-selected textarea {
	background-color: rgba(255,255,255,0.2);
}
.creator-block .creator-modifiers-top-right {
	top: -35px;
	right: 0px;
}
.creator-block .creator-modifiers-bottom-right {
	bottom: -35px;
	right: 0px;
}
.creator-block .creator-modifiers-bottom-left {
	bottom: -35px;
	left: 0px;
}
.creator-block .creator-modifier-group {
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px;
	vertical-align: middle;
}
.creator-block .creator-modifier {
	display: inline-block;
	color: #eee;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 20px;
	text-align: center;
	vertical-align: middle;
	background-color: #888;
	cursor: pointer;
	overflow: hidden;

	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
}
.creator-block .creator-modifier-group .creator-modifier {
	position: absolute;
	top: 0px;
	bottom: 0px;
	right: 0px;
	left: 0px;
	-webkit-transition: top 0.5s; /* Safari */
	transition: top 0.5s;
}
.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(2) {
	top: -40px;
	bottom: auto;
}
.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(3) {
	top: -80px;
	bottom: auto;
}
.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(4) {
	top: -120px;
	bottom: auto;
}
.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(5) {
	top: -160px;
	bottom: auto;
}
.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(6) {
	top: -200px;
	bottom: auto;
}
.creator-block .creator-modifier-group .creator-modifier.creator-modifier-sel,
.creator-block .creator-modifier-sel {
	background-color: #bbb;
}
.creator-block .creator-modifier-group .creator-modifier {
	color: #fff;
	background-color: #666;
}
.creator-block .creator-modifier-group .creator-modifier:nth-child(1) {
	color: #eee;
	background-color: #888;
	z-index: 11;
}
.creator-block .creator-modifier-group .creator-modifier:hover,
.creator-block .creator-modifier:hover {
	color: #fff;
	background-color: #ccc;
}
.creator-block .creator-modifier img {
	-webkit-filter: invert(100%);
	filter: invert(100%);
	height: 40%;
	margin: auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.creator-block .creator-modifier input {
	width: 30px;
	height: 36px;
	line-height: 36px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;
	border: 0px solid transparent;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.creator-modifier img.creator-modifier-medium {
	height: 60%;
}
.creator-modifier img.creator-modifier-bigger {
	height: 75%;
}
.creator-outer .creator-block .creator-modifier-group,
.creator-outer .creator-block .creator-modifier,
.creator-outer .creator-block .creator-modifiers .creator-modifier,
.creator-outer .creator-block .creator-modifier-group
.creator-outer .creator-block .creator-modifier-group .creator-modifier.creator-modifier-sel,
.creator-outer .creator-block .creator-modifier-sel  {
	width: 60px;
	height: 60px;
	line-height: 60px;
	font-size: 30px;
}
.creator-outer .creator-block .creator-modifier input {
	width: 46px;
	height: 50px;
	line-height: 50px;
	margin-top: 5px;
}
.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(2) {
	top: -60px;
	bottom: auto;
}
.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(3) {
	top: -120px;
	bottom: auto;
}
.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(4) {
	top: -180px;
	bottom: auto;
}
.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(5) {
	top: -240px;
	bottom: auto;
}
.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(6) {
	top: -300px;
	bottom: auto;
}
.creator-block textarea {
	font-size: 15px;
	line-height: 18px;
	color: rgb(51,51,51);
	background-color: transparent;
	margin: 0px;
	padding: 0px;
	font-family: Helvetica,Arial,sans-serif;

	border: none;
	overflow: auto;
	outline: none;
	border-radius: 0px;

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

	resize: none;
}
.blast-options {
	display: table;
	width: 100%;
	background-color: #c6c6c6;
	position: fixed;
	top: 98px;
	width: 100%;
}
.blast-content {
	margin-top: 50px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
.blast-subject {
	display: table-cell;
	padding: 5px;
	vertical-align: middle;
	background-color: #443287;
}
.blast-subject input {
	margin-bottom: 0px;
	font-size: 16px;
}
.blast-subject .blast-subject-error {
	border-color: #ff0000;
}
.blast-lang {
	display: table-cell;
	padding: 5px 10px;
	vertical-align: middle;
	width: 1%;
	white-space: nowrap;
	position: relative;
	background-color: #443287;
}
.blast-lang:hover {
	background-color: rgba(0,0,0,0.1);
}
.blast-lang.blast-lang-open {
	background-color: rgba(0,0,0,0.2);
}
.blast-lang-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 0px;
	font-size: 14px;
	color: #fff;
	cursor: pointer;
	user-select: none;
}
.blast-lang-code {
	font-weight: 600;
	letter-spacing: 0.5px;
}
.blast-lang-caret {
	font-size: 10px;
	opacity: 0.7;
}
.blast-lang-dropdown {
	position: absolute;
	top: 100%;
	right: 10px;
	margin-top: 4px;
	background-color: #443287;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	min-width: 160px;
	z-index: 1000;
	overflow: hidden;
}
.blast-lang-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	color: #fefefe;
	background-color: rgba(255,255,255,0.2);
	transition: background-color 0.15s;
}
.blast-lang-option:hover {
	background-color: rgba(255,255,255,0.05);
}
.blast-lang-active {
	background-color: rgba(255,255,255,0);
}
.blast-lang-active:hover {
	background-color: rgba(255,255,255,0);
}
.blast-lang-option-code {
	font-weight: 600;
	font-size: 12px;
	color: #fefefe;
	background-color: rgba(0,0,0,0.2);
	padding: 2px 6px;
	border-radius: 3px;
}
.blast-lang-option-name {
	font-size: 14px;
}
.blast-menu {
	display: table-cell;
	line-height: 50px;
}
.blast-menu-options {
	display: table;
	width: 100%;
	background-color: #443287;
}
.blast-menu-options-scroll {
	/* Room at the bottom so the last options scroll clear of the chat bubble */
	box-sizing: border-box;
	padding-bottom: 100px;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
.blast-target {
	width: 1%;
	position: relative;
}
.blast-target label {
	display: block;
	min-width: 32px;
	height: 50px;
	cursor: pointer;
	white-space: nowrap;
	line-height: 46px;
	padding: 0px 10px;
	background-color: rgba(0,0,0,0);
}
.blast-target label:hover {
	background-color: rgba(0,0,0,0.05);
}
.blast-target.blast-view label {
	background-color: rgba(0,0,0,0.1);
}
.blast-target.blast-target-disabled.blast-view label {
	background-color: rgba(157,8,17,0.6);
}
.blast-format-disabled {
	background-color: rgba(157,8,17,0.6);
	text-align: center;
	min-width: 320px;
	padding: 7px 0px;
	color: #fff;
	font-size: 14px;
	margin-top: 50px;
}
.blast-target input[type="checkbox"] {
	vertical-align: middle;
	margin: -4px 0px 0px;
}
.blast-target img.blast-icon {
	padding: 0px;
	opacity: 0.8;
}
.blast-target.blast-view img.blast-icon {
	opacity: 1.0;
}
.blast-target.blast-target-disabled img.blast-icon {
	opacity: 0.3;
}
.blast-close {
	cursor: pointer;
	position: absolute;
	font-size: 20px;
	font-weight: 800;
	color: #aaa;
	background-color: #c6c6c6;
	width: 48px;
	margin: 0px 2px;
	padding: 3px 0px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.blast-close:hover {
	background-color: rgb(222, 185, 185);
	color: #fff;
}
.blast-send {
	width: 1%;
}
.blast-send button {
	margin: 0px 0px;
	position: relative;
}
.blast-send .caret {
	position: absolute;
	bottom: 3px;
	left: 0px;
	right: 0px;
	margin: auto;
}
div.blast-main {
	width: 600px;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 40px;
	background-color: #ffffff;
	border: 1px #969696 solid;
	letter-spacing: 1px;
	line-height: 18px;
	font-family: Helvetica,Arial,sans-serif;
}
img.blast-logo {
	display: block;
	width: 100%;
	margin: auto;
}

/* Send Blast Pop Up */
.send-text {
	display: flex;
	color: #111;
	font-size: 14px;
}
.send-text > span {
	color: #888;
	display: inline-block;
	min-width: 70px;
}
.send-opt {
	padding: 16px 20px;
	color: #999;
	display: block;
	margin: 0px -20px;
}
.send-opt span {
	vertical-align: middle;
    display: inline-block;
}
.send-opt label {
	float: right;
	margin-top: 1px;
}
.send-opt:nth-child(odd) {
	background-color: #eeeeee;
}
.send-opt:nth-child(even) {
	background-color: #e5e5e5;
}
.send-opt:hover {
	background-color: #dedede;
	color: #777;
}
.send-icon {
	min-width: 40px;
    margin-right: 5px;
    text-align: center;
}
.send-icon img {
	opacity: 0.4;
	height: 24px;
}
span.send-type {
	font-size: 24px;
}

/* Creator Properties */
.creator-props {
	display: table;
	width: 100%;
	font-size: 12px;
	margin-top: 20px;
  background-color: #e8e8e8;
}
.creator-props .creator-props-left {
	display: table-cell;
	vertical-align: middle;
	height: 35px;
	padding: 5px 0px 5px 20px;
	text-align: left;
}
.creator-props .creator-props-right {
	display: table-cell;
	vertical-align: middle;
	width: 100px;
	height: 35px;
	padding: 5px 20px 5px 0px;
}
.creator-props input {
	padding: 0px;
	margin: 0px;
	background-color: transparent;
	border-color: transparent;
}
.creator-props select,
.creator-props input[type="text"],
.creator-props input[type="number"] {
	color: inherit;
	height: 34.5px;
	background-color: #fff;
	border-color: transparent;
	padding-left: 10px;
}
.creator-props button {
	padding-left: 5px;
	padding-right: 5px;
	margin: 0px;
}

/* Creator Templates */
.creator-templates-section {
  position: fixed;
  bottom: 0px;
  z-index: 32;
	padding: 2px 0px 0px;
	text-align: left;
	-webkit-transition: bottom 1s; /* Safari */
  transition: bottom 1s;
}
.creator-templates-tabgroup {
	position: absolute;
	top: -30px;
	padding-left: 5px;
}
.creator-templates-tab {
	background-color: #bfbfbf;
	color: #666;
	font-size: 14px;
	display: inline-block;
	cursor: pointer;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	padding: 7px 12px;
	margin: 0px 5px;
}
.creator-templates-tab-sel {
	background-color: #d2d2d2;
	color: #2f2f2f;
}
.creator-template-none {
	line-height: 26px;
	padding: 10px;
}
.creator-templates-scroll {
	overflow-x: scroll;
	overflow-y: visible;
	-webkit-overflow-scrolling: touch;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
	background-color: #d2d2d2;
	padding: 0px 10px;
}
.creator-templates {
	display: flex;
	gap: 10px;
	width: 100%;
	height: 100%;
	min-height: 120px;
	text-align: left;
	border-collapse: separate;
	border-spacing: 10px;
}
.creator-template {
	flex: 1;
	border-radius: 10px;
	padding: 10px 0px 30px;
	background-color: #e8e8e8;
	color: #555;
	min-width: 230px;
	max-width: 230px;
	cursor: pointer;
	font-size: 13px;
	line-height: 20px;
	position: relative;
	margin: 10px 0px;
}
.creator-template:hover {
	color: #333;
	background-color: #f2f2f2;
}
.creator-template:hover .creator-template-details {
	opacity: 0.6;
}
.creator-template-delete {
	position: absolute;
	top: -7px;
	right: -7px;
	width: 30px;
	height: 30px;
	background-color: #bfbfbf;
	border-radius: 50%;
	cursor: pointer;
	color: #e6e6e6;
    text-align: center;
    line-height: 30px;
    font-size: 23px;
    font-weight: 800;
}
.creator-template-delete:hover {
    background-color: #f9f9f9;
    color: #626262;
}
.creator-template-brief {
	padding: 0px 20px 0px;
}
.creator-template.creator-template-sel {
	color: #333;
	background-color: #f9f9f9;
}
.creator-template.creator-template-sel .creator-template-details {
	opacity: 0.7;
}
.creator-template .creator-template-details {
	padding: 10px 0px 0px;
	text-align: left;
	opacity: 0.4;
	padding: 0px 13px;
	box-sizing: border-box;
	width: 100%;
	position: absolute;
	bottom: 0;
}
.creator-template .creator-template-details img {
	display: inline-block;
	height: 16px;
	margin: 0px 10px 0px 0px;
	opacity: 0.5;
}
.creator-template .creator-template-details span {
	display: inline-block;
	float: right;
	font-size: 12px;
}
/* Daily / Monthly (recurring) or Scheduled, at the right of the card's details */
.creator-template .creator-template-details span.creator-template-badge {
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	color: #fff;
	background: #6a4b9e;
	padding: 2px 7px;
	border-radius: 9px;
	letter-spacing: 0.3px;
	margin-left: 6px;
}
.creator-template .creator-template-details span.creator-template-when {
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	color: #6a4b9e;
	margin-left: 4px;
}
.creator-template .creator-template-details span.creator-template-badge-off {
	background: #999;
}
.creator-template .creator-template-langs {
	float: left;
	font-size: 10px;
	font-weight: 600;
	color: #666;
	background: #e8e8e8;
	padding: 2px 6px;
	border-radius: 3px;
	letter-spacing: 0.5px;
}
@media only screen and (min-width: 600px) {
	.creator-outer {
		zoom: 100%;
	}
	.creator-outer .tip-guide {
		zoom: 100%;
	}
	.creator {
		display: table;
	}
	.creator-block .creator-modifiers-top-right {
		top: -25px;
		right: -15px;
	}
	.creator-block .creator-modifiers-bottom-right {
		bottom: -25px;
		right: -15px;
	}
	.creator-block .creator-modifiers-bottom-left {
		bottom: -25px;
		left: -15px;
	}
	.creator-block .creator-modifier-group,
	.creator-block .creator-modifier,
	.creator-block .creator-modifier-sel,
	.creator-outer .creator-block .creator-modifier-group,
	.creator-outer .creator-block .creator-modifier,
	.creator-outer .creator-block .creator-modifiers .creator-modifier,
	.creator-outer .creator-block .creator-modifier-group
	.creator-outer .creator-block .creator-modifier-group .creator-modifier.creator-modifier-sel,
	.creator-outer .creator-block .creator-modifier-sel {
		font-size: 14px;
		width: 30px;
		height: 30px;
		line-height: 30px;
	}
	.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(2),
	.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(2) {
		top: -30px;
	}
	.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(3),
	.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(3) {
		top: -60px;
	}
	.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(4),
	.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(4) {
		top: -90px;
	}
	.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(5),
	.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(5) {
		top: -120px;
	}
	.creator-block .creator-modifier-group:hover .creator-modifier:nth-child(6),
	.creator-outer .creator-block .creator-modifier-group:hover .creator-modifier:nth-child(6) {
		top: -150px;
	}
	.creator-block .creator-modifier input,
	.creator-outer .creator-block .creator-modifier input {
		width: 24px;
		height: 30px;
		line-height: 30px;
		margin-top: 0px;
	}

	.creator-options-pane {
		display: none;
	}

	.blast-menu {
		display: none;
	}
}


/* Blasts */
.blast-send-type {
	display: inline-block;
	padding: 0px 15px 15px 10px;
	cursor: pointer;
}
.blast-send-disabled {
	opacity: 0.8;
}
.blast-send-disabled input.toggle-round + label:before {
	background-color: #ccc;
	cursor: auto;
}
.blast-send-disabled input.toggle-round:checked + label:before {
	background-color: #ccc;
}
.blast-send-type.blast-send-disabled,
.blast-send-disabled .toggle + label,
.blast-send-disabled input.toggle-round + label:after {
	cursor: auto;
}
.blast-level {
	display: inline-block;
	padding: 10px 5px;
	margin: 10px;
	cursor:pointer;
}
.blast-member-count {
	color: #666;
	vertical-align: top;
	margin-left: 5px;
}
.blast-level .blast-member-count {
	color: #aaa;
}

/* Analytics */
.record-label {
  display: table;
  width: 100%;
}
.record-label .record-item {
  padding: 10px 0px;
  color: #aaa;
  background-color: rgba(0,0,0,0);
  font-size: 10px;
  line-height: 10px;
}
.record-label .record-item-left {
  padding-left: 20px;
}
.record-sort {
  font-weight: 600;
}
.triangle-up {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-bottom: 5px solid rgba(0,0,0,0.25);
  margin-bottom: 1.5px;
  margin-left: 1px;
}
.triangle-down {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-top: 5px solid rgba(0,0,0,0.25);
  margin-bottom: 1.5px;
  margin-left: 1px;
}

.record {
  display: table;
  width: 100%;
  margin: 10px 0px;
	cursor: pointer;
}
.record-footer {
  display: table;
  width: 100%;
  color: #555;
  font-size: 16px;
  font-weight: 600;
}
.record:hover .record-item {
  background-color: #e0e0e0;
}
.record.record-sel .record-item {
  background-color: #5b5b5b;
	color: #fefefe;
}
.record.record-selsub .record-item {
  background-color: transparent;
	color: #fefefe;
}
.record-row {
  display: table-row;
}
.record-item {
  color: #888;
  text-align: center;
  padding: 20px 0px;
  display: table-cell;
  width: 10%;
  background-color: #ececec;
  vertical-align: middle;
  white-space: nowrap;
}
.record-item img {
    display: inline-block;
    vertical-align: middle;
	height: 14px;
	opacity: 0.4;
}
.record-item a {
	color: inherit;
}
.record-content {
	display: flex;
	flex-direction: row;
}
.record-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	margin-left: 10px;
}
.record-nopad {
	padding: 0px;
}
.record-item-less {
	padding: 10px 0px;
}
.record-item-small {
	font-size: 12px;
}
.record-item-chunk {
	display: inline-block;
	vertical-align: middle;
	padding-left: 5px;
}
.record-item-chunck-small {
	font-size: 12px;
	line-height: 12px;
	padding-top: 2px;
}
.record-item-chunck-small img {
	display: inline-block;
	vertical-align: middle;
	height: 12px;
}
.record-item-chunck-small span {
	vertical-align: middle;
}
.record-item-chunck-small img.record-icon {
	display: inline-block;
	vertical-align: middle;
	height: 10px;
	opacity: 0.3;
}
.record-item-left {
  text-align: left;
  width: auto;
  padding-left: 20px;
}
.record-item-right {
  text-align: right;
  width: auto;
}
.record-item-color {
	width: 10px;
    min-width: 10px;
}
.record-item-limit {
    max-width: 190px;
    white-space: normal;
}
.record-selsub .record-item-color {
	width: 0px;
}
.record-empty {
  display: table-cell;
  width: auto;
}
.record-group {
	margin-top: -10px;
	border-left: 5px solid #c5c5c5;
	border-right: 5px solid #c5c5c5;
	border-bottom: 5px solid #c5c5c5;
	padding-bottom: 5px;
}
.record-subgroup .record {
	margin: auto;
}
.record-subgroup .record .record-item {
	padding-top: 10px;
	padding-bottom: 10px;
}
.record-subgroup .record:nth-child(odd) .record-item {
	background-color: #f6f6f6;
}
.record-cell-hl {
	background-color: rgba(93,69,162,0.7);
	padding: 7px;
	border-radius: 15px;
	color: #fff;
}

/* Activity Feed */
.vue-load {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.15);
	z-index: 100;
  left: 0;
  top: 0;
}
.vue-load .la-line-scale-party {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
}
.activity-scroll {
	overflow-y: scroll;
	overflow-x: visible;
	max-height: 530px;
	padding-top: 18px;
	margin-top: 2px;
	position: relative;
}
.activity-none {
	color: #999;
	font-size: 11px;
	padding: 20px 0px 0px;
}
.activity {
	padding-right: 20px;
}
.activity-icon {
	width: 50px;
	height: 50px;
	border-radius: 100%;
	background-color: #887ab7;
	border: 3px solid #fdfdfd;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
	position: relative;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
}
.activity-icon-sub {
	width: 37px;
	height: 37px;
	border-radius: 100%;
	background-color: #887ab7;
	border: 3px solid #fdfdfd;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
	position: relative;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
}
.activity-icon img,
.activity-icon-sub img  {
	max-width: 50%;
	max-height: 50%;
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.activity-line {
	height: 1px;
	width: 15px;
	background-color: #ccc;
	margin-top: 28px;
}
.activity-vline {
	width: 1px;
	height: 95%;
	background-color: #ccc;
	margin-left: 28px;
	position: absolute;
}
.activity-line-sub {
	height: 1px;
	width: 15px;
	background-color: #ccc;
	margin-top: 21px;
}
.activity-vline-sub {
	width: 1px;
	height: 80%;
	background-color: #ccc;
	margin-left: 21px;
	position: absolute;
}
.activity-box {
	width: 100%;
	min-height: 40px;
	margin: 0px 0px 35px;
	padding: 10px 10px 10px 15px;
	font-size: 14px;
	line-height: 25px;
	position: relative;
}
.activity-box:hover {
	background-color: #fefefe;
}
.activity-sub-text {
	color: #aaa;
	font-size: 11px;
  line-height: 11px;
  padding-top: 10px;
	padding-left: 10px;
}
.activity-box-sub {
	width: 100%;
	padding: 7px;
	font-size: 12px;
	margin-bottom: 20px;
}
.activity-box-sub pre {
	white-space: break-spaces;
	font-family: inherit;
	margin: 0px;
}
.activity-profile {
	position: absolute;
	bottom: -30px;
	right: -20px;
}
.activity-date {
	position: absolute;
	bottom: -27px;
	right: 40px;
	font-size: 12px;
}
.activity-filters {
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding: 7px 0px;
	font-size: 12px;
}
.activity-filter-label {
	display: inline-block;
	padding: 5px 7px;
	margin: 0px 4px;
	color: #999;
	font-size: 11px;
}
.activity-filter {
	display: inline-block;
	padding: 5px 7px;
	border-radius: 15px;
	margin: 0px 4px;
	color: #555;
	cursor: pointer;
}
.activity-filter:hover {
	background-color: #ccc;
	color: #fefefe;
}
.activity-filter-hl:hover,
.activity-filter-hl {
	background-color: #999;
	color: #fefefe;
	cursor: default;
}
.activity-count-top {
	display: inline-block;
	font-size: 12px;
	color: #999;
    padding: 5px 0px;
	margin: 0px 4px;
}
.activity-count {
	font-size: 13px;
	color: #999;
	width: 56px;
	padding-right: 15px;
}
.activity-loadmore {
	padding-left: 10px;
	padding-right: 30px;
}
.activity-arrow-parent {
	position: relative;
}
.activity-arrow-up,
.activity-arrow-down {
	width: 100%;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  padding: 7px 0px;
  color: #fff;
	z-index: 10;
}
.activity-arrow-up {
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.2),
    rgba(0,0,0,0.1)
  );
}
.activity-arrow-down {
	bottom: 0px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.2)
  );
}
.activity-arrow-up .caret {
	border-bottom: 10px dashed;
	border-bottom: 10px solid \9;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-top: 0px;
}
.activity-arrow-down .caret {
	border-top: 10px dashed;
	border-top: 10px solid \13;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}

/* Timespan */
.timespan-action {
  display: inline-block;
  margin: 0px 10px;
  padding: 10px 0px;
  color: #555;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.5px;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
}
.timespan-arrow {
  display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.2);
  text-align: center;
  vertical-align: middle;
  margin-top: -3px;
  margin-left: 2px;
}
.timespan-arrow span {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;

  border-top: 5px solid rgba(0,0,0,0.3);
  margin-bottom: 2px;
}
.timespan-arrow-hl,
.timespan-action:hover .timespan-arrow {
  background-color: rgba(0,0,0,0.1);
}
.timespan-dropdown {
	display: none;
  position: absolute;
  right: 0;
  padding: 10px 10px 0px;
  background-color: #ddd;
  border: 1px solid #ccc;
  cursor: default;
	z-index: 1000;

  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  webkit-box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12);
  box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12);
}
.timespan-down {
  display: inline-block;
  outline: none;
}
.timespan-request {
	display: table;
	width: 300px;
}
.timespan-options {
  font-size: 12px;
}
.timespan-options .tbl-cell {
  padding: 15px 0px;
  text-align: center;
  color: #888;
  cursor: pointer;
}
.metric-title {
	font-size: 20px;
	font-weight: 800;
	margin: 3px 0px 22px;
}
.metric-mini {
	color: #333;
	font-size: 18px;
}
.metric-mini-title {
	font-size: 12px;
}


/* Referral Code */
.referral-code {
	color: #999;
	font-size: 60px;
	font-weight: 800;
	line-height: 60px;
	text-align: center;

	-webkit-user-select: text; /* Chrome/Safari */
	-khtml-user-select: text;
	-moz-user-select: text; /* Firefox */
	-ms-user-select: text; /* IE10+ */
	/* Not implemented in browsers yet */
	-o-user-select: text;
	user-select: text;
}
.referral-code img {
	padding: 20px;
}
.referral-icon {
	height: 12px;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.3;
}


/* Shop */
.shop-header {
	background-color: #dedede;
}
.tbl-cell.shop-header-first {
	width: 1%;
	vertical-align: top;
}
.shop-header-click {
	display: inline-block;
	padding: 15px 20px;
	vertical-align: middle;
	cursor: pointer;
	white-space: nowrap;
}
.shop-header-click-sel,
.shop-header-click:hover {
	background-color: rgba(0,0,0,0.1);
}
.shop-header-icon {
	display: inline-block;
	height: 30px;
	opacity: 0.8;
	vertical-align: middle;
	margin-right: 5px;
}
.shop-header-title {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	font-size: 20px;
	line-height: 20px;
}
.shop-header-tags {
	display: inline-block;
	vertical-align: middle;
	padding-left: 5px;
}
.shop-header-tag {
	display: inline-block;
	vertical-align: middle;
	font-size: 14px;
	margin: 3px;
	padding: 5px;
	border-radius: 6px;
	background-color: rgba(0,0,0,0.1);
}
.shop-header-tag-del {
	font-weight: 800;
	font-size: 24px;
	line-height: 14px;
	color: #888;
	vertical-align: middle;
	cursor: pointer;
	padding: 5px 5px 5px 3px;
	margin: 0px -5px;
	display: none;
}
.shop-header-tag:hover .shop-header-tag-del {
	display: inline;
}
.shop-header-tag-del:hover {
	color: #333;
}
.shop-right {
	text-align: right;
	vertical-align: middle;
}
.shop-header-cart img {
	height: 30px;
	display: block;
}
.shop-main {
	position: relative;
}
.shop-menu-fade {
	position: absolute;
	background: rgba(0,0,50,0.4);
	width: 100%;
	height: 100%;
	min-height: 800px;
}
.shop-menu {
	position: absolute;
	left: -250px;
	top: 0px;
	width: 250px;
	height: 100%;
	min-height: 800px;
	background-color: #e3e3e3;
	z-index: 10;
	transition: left 0.5s;
}
.shop-menu-group {
	border-left: 10px solid rgba(0,0,0,0.3);
	border-top: 1px solid rgba(0,0,0,0.3);
	border-bottom: 3px solid rgba(0,0,0,0.3);
	background-color: rgba(0,0,0,0.03);
}
.shop-menu-item-target {
	outline: 2px dashed #888;
}
.shop-menu-item {
	font-size: 16px;
	padding: 16px 5px 16px 20px;
	cursor: pointer;
}
.shop-menu-item input[type=checkbox] {
	margin-left: -6px;
	margin-right: 10px;
}
.shop-menu-item:hover {
	background-color: rgba(0,0,0,0.05);
}
.shop-menu-item-sel:hover,
.shop-menu-item-sel {
	background-color: rgba(0,0,0,0.05);
}
.shop-menu-search {
	padding: 10px 10px 10px 20px;
}
.shop-menu-plus img {
	display: inline-block;
	min-width: 24px;
	height: 24px;
	opacity: 0.3;
	vertical-align: middle;
	visibility: hidden;
}
.shop-menu-item:hover .shop-menu-plus img,
.shop-menu-item-sel:hover .shop-menu-plus img {
	visibility: visible;
}
.shop-menu-item input.shop-menu-item-edit {
	color: #333;
	height: 24px;
	font-size: 16px;
	line-height: 24px;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
	border: none;
	display: inline-block;
}
.shop-menu-item input.shop-menu-item-edit::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #999;
  opacity: 1; /* Firefox */
	font-size: 14px;
}
.shop-menu-item input.shop-menu-item-edit:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #999;
	font-size: 14px;
}
.shop-menu-item input.shop-menu-item-edit::-ms-input-placeholder { /* Microsoft Edge */
  color: #999;
	font-size: 14px;
}
.shop-menu-down {
	display: inline-block;
	line-height: 1;
	content: '\u02C6';
	font-size: 30px;
	line-height: 24px;
	float: right;
	color: #999;
	margin-bottom: -20px;
}
.shop-products {
	text-align: left;
}
.shop-product {
	display: table;
	width: 100%;
	padding: 20px;
	border-bottom: 1px solid #ccc;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.shop-product:hover {
	background-color: rgba(0,0,0,0.05);
}
.shop-product-area {
	display: table-row;
}
.shop-product-preview {
	width: 150px;
	height: 120px;
	background-color: #fff;
	border-radius: 10px;
	border: 1px solid #ccc;
	overflow: hidden;
	display:table-cell;
	vertical-align: middle;
	text-align: center;
}
.shop-product-preview img {
	max-width: 100%;
	max-height: 100%;
	margin: auto;
}
.shop-product-info {
	display: table-cell;
	padding-left: 20px;
}
.shop-product-content {
	display: table;
	width: 100%;
}
.shop-product-title {
	display: block;
	text-align: right;
	font-size: 16px;
	padding-top: 10px;
}
.shop-product-price {
	display: block;
	text-align: right;
	font-size: 18px;
	font-weight: 600;
	padding: 10px 0px;
}
.shop-product-button {
	padding: 5px 10px 7px;
	color: #efefef;
	font-size: 18px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: 2px;
	text-align: center;
	cursor: pointer;
}
.shop-product-button img {
	height: 18px;
	display: inline;
	vertical-align: middle;
}
.shop-product-button span {
	vertical-align: middle;
}
/* For tablets */
@media only screen and (min-width: 600px) {
	.shop-menu-fade {
		display: none;
	}
	.shop-menu {
		left: 0px;
	}
	.shop-products {
		margin-left: 250px;
	}
	.shop-product {
		margin: 10px;
		width: auto;
		display: inline-block;
		border-radius: 10px;
		border-bottom: none;
	}
	.shop-product-area {
		display: block;
	}
	.shop-product-preview {
		width: 250px;
		height: 200px;
	}
	.shop-product-info {
		display: block;
		padding: 0px;
	}
	.shop-product-content {
		margin: 10px 0px;
	}
	.shop-product-title {
		display: table-cell;
		text-align: left;
		font-size: 14px;
		padding: 0px;
	}
	.shop-product-price {
		display: table-cell;
		font-size: 14px;
		padding: 0px;
	}
	.shop-product-button {
		padding: 15px;
	}
}

/* Tip Guide */
.tip-fade:before {
  content: "";
	background-color: rgba(255,255,255,0.3);
  -webkit-backdrop-filter: blur(0.7px);
  backdrop-filter: blur(0.7px);
	position: fixed;
	top: -10000px;
	bottom: -10000px;
	left: -10000px;
	right: -10000px;
	z-index: 50;
}
.tip {
  position: relative;
	z-index: 51;
}
.tip-guide {
	width: max-content;
  display: inline-block;
  position: absolute;
  z-index: 101;
  transition: opacity 0.5s;
}
.tip-hide {
	opacity: 0;
}
.tip-text {
  background-color: #443287;
  color: #fff;
  text-shadow: none;
  font-size: 13px;
  line-height: 20px;
	font-weight: normal;
  text-align: center;
  border-radius: 6px;
  padding: 10px;
	margin: 0px;
	width: 100%;
	max-width: 180px;
	font-family: 'Open Sans', sans-serif;
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.tip-text div {
	margin: 10px 0px 3px;
	font-size: 12px;
	color: rgba(255,255,255,0.8);
	white-space: nowrap;
  display: flex;
  justify-content: space-around;
}
.tip-text button,
.tip-text button:focus {
	margin: 0px 7px;
  border: 0px;
  background: none;
  box-shadow: none;
  text-shadow: none;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.25);
}
.tip-text button:hover {
	background-color: rgba(255, 255, 255, 0.8);
  color: #333;
}
.tip-text:before {
  content: "";
  display: inline-block;
  position: absolute;
}
.tip-top .tip-text:before {
  border-top: 7px solid #443287;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
}
.tip-top-left .tip-text:before {
  border-top: 7px solid #443287;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  bottom: -7px;
  left: 80%;
  transform: translateX(-50%);
}
.tip-top-right .tip-text:before {
  border-top: 7px solid #443287;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  bottom: -7px;
  left: 20%;
  transform: translateX(-50%);
}
.tip-top {
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);
}
.tip-top-left {
  left: 50%;
  transform: translateX(-86%);
  bottom: calc(100% + 10px);
}
.tip-top-right {
  left: 50%;
  transform: translateX(-20%);
  bottom: calc(100% + 10px);
}
.tip-bottom .tip-text:before {
  border-bottom: 7px solid #443287;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
}
.tip-bottom-left .tip-text:before {
  border-bottom: 7px solid #443287;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  top: -7px;
  left: 80%;
  transform: translateX(-50%);
}
.tip-bottom-right .tip-text:before {
  border-bottom: 7px solid #443287;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  top: -7px;
  left: 20%;
  transform: translateX(-50%);
}
.tip-bottom {
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 10px);
}
.tip-bottom-left {
  left: 50%;
  transform: translateX(-86%);
  top: calc(100% + 10px);
}
.tip-bottom-right {
  left: 50%;
  transform: translateX(-20%);
  top: calc(100% + 10px);
}
.tip-right .tip-text:before {
  border-right: 7px solid #443287;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  left: -7px;
  top: 50%;
  transform: translateY(-50%);
}
.tip-right {
  top: 50%;
  transform: translateY(-50%);
  left: calc(100% + 10px);
}
.tip-right-bottom .tip-text:before {
  border-right: 7px solid #443287;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  left: -7px;
  top: 20%;
  transform: translateY(-50%);
}
.tip-right-bottom {
  top: 50%;
  transform: translateY(-20%);
  left: calc(100% + 10px);
}
.tip-left .tip-text:before {
  border-left: 7px solid #443287;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  right: -7px;
  top: 50%;
  transform: translateY(-50%);
}
.tip-left {
  top: 50%;
  transform: translateY(-50%);
  right: calc(100% + 10px);
}
.tip-left-bottom .tip-text:before {
  border-left: 7px solid #443287;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  right: -7px;
  top: 20%;
  transform: translateY(-50%);
}
.tip-left-bottom {
  top: 50%;
  transform: translateY(-20%);
  right: calc(100% + 10px);
}

/* Tip Progress */
.tour-bg {
	display: inline-block;
	width: 130px;
	font-size: 12px;
	line-height: 12px;
	padding: 10px;
	margin: 25px 0px 30px;
	color: #fff;
	background-color: #bbb;
	border-radius: 18px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	text-align: left;
}
.tour-info {
	white-space: nowrap;
	display: flex;
	align-items: center;
}
.tour-info span {
	display: inline-block;
	vertical-align: middle;
	position: relative;
}
.tour-info img {
	display: block;
	height: 14px;
  opacity: 0.7;
  display: block;
 	-webkit-filter: invert(100%);
 	filter: invert(100%);
	margin-right: 5px;
}
.tour-bar {
	position: absolute;
	width: 50%;
	height: 34px;
	background-color: rgba(0,0,0,0.5);
	top: 0px;
	left: 0px;
	opacity: 0.5;
	border-top-right-radius: 18px;
	border-bottom-right-radius: 18px;
  transition: width 1s;
}
span.tour-percent {
	display: none;
  text-align: center;
  flex: 2;
}
.tour-bg:hover {
	color: #fff;
	background-color: #999;
}
.tour-bg:hover .tour-info img {
	opacity: 0.9;
}
.tour-bg:hover .tour-bar {
	opacity: 0.7;
}
.tour-bg:hover .tour-text {
	display: none;
}
.tour-bg:hover .tour-percent {
	display: inline-block;
}


/* Tabs */
.tab-group {
	margin: 10px 20px 0px;
}
.tab {
	display: inline-block;
	color: #999;
	background-color: #e5e5e5;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 15px 20px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	font-size: 20px;
	line-height: 20px;
	letter-spacing: 0px;
	margin: 0px 0px;
	min-width: 30px;
	text-align: center;
	cursor: pointer;
}
.tab:hover {
	background-color: #fefefe;
}
.tab span {
	vertical-align: middle;
	padding-left: 5px;
}
.tab img {
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.3;
	filter: alpha(opacity=30); /* For IE8 and earlier */
}
.tab-sel {
	color: #555;
	background-color: #f6f6f6;
	border-bottom: 1px solid #f6f6f6;
}
.tab-sel img {
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
}
/* For tablets */
@media only screen and (min-width: 600px) {
	.tab {
		margin: 0px 10px;
	}
	.tab-group {
		margin: 10px 30px 0px;
		padding-left: 10px;
		text-align: left;
	}
}



/* Studios */
.studio .studio-country {
	font-size: 18px;
}
.studio img {
	height: 11px;
	opacity: 0.3;
	display:inline-block;
	vertical-align: middle;
}
.studio .studio-app img {
	height: 13px;
	opacity: 0.3;
	display:inline-block;
}
.studio .studio-logo img {
	height: auto;
	opacity: 1;
	max-width: 100px;
	max-height: 40px;
	display:inline-block;
}
.studio .studio-logo span {
	font-size: 18px;
	font-weight: bold;
	color: #666;
}
.studio .studio-plan {
	display: block;
	vertical-align: middle;
}
.list tr.studio-unverified:nth-child(odd) {
	background-color: rgba(166,132,83,0.14);;
}
.list tr.studio-unverified:nth-child(even) {
	background-color: rgba(166,132,83,0.20);
}


/* Studio Classes */
.class-list .class-item:nth-child(odd) {
	background-color: #e5e5e5;
}
.class-list .class-item:nth-child(even) {
	background-color: #eeeeee;
}
.class-list .class-item:hover {
	background-color: #fff;
}
.class-list .class-item:nth-child(odd).class-staff {
	background-color: rgba(161,161,199,0.35);
}
.class-list .class-item:nth-child(even).class-staff {
	background-color: rgba(161,161,199,0.25);
}
.class-list .class-staff .class-title {
	color: #7373a0;
}
.class-list .class-item:nth-child(odd).class-unavailable {
	background-color: rgba(199,161,161,0.35);
}
.class-list .class-item:nth-child(even).class-unavailable {
	background-color: rgba(199,161,161,0.25);
}
.class-list .class-unavailable .class-title {
  color: #b68686;
}
.class-list .class-item:nth-child(odd).class-hidden {
	background-color: rgba(166,132,83,0.20);
}
.class-list .class-item:nth-child(even).class-hidden {
	background-color: rgba(166,132,83,0.15);
}
.class-list .class-hidden .class-title {
	color: #af9a7b;
}
.class-list .class-staff .box-profile-thumb,
.class-list .class-unavailable .box-profile-thumb,
.class-list .class-hidden .box-profile-thumb {
	opacity: 0.5;
}
.class-item .edit {
	display: none;
	vertical-align: middle;
	padding-bottom: 3px;
}
.class-item:hover .edit {
	float: none;
	display: inline-block;
}
.class-item:hover .box-profile-thumb {
	opacity: 1;
}
/* While dragging a class, the drop-position placeholder renders as a solid
   gray block; only the drag image following the cursor keeps its details */
.class-list .sortable-ghost {
	background-color: #d9d9d9;
}
.class-list .sortable-ghost * {
	visibility: hidden;
}
/* Add/Edit popups: a field the API rejected glows red for a few seconds */
input.field-error,
select.field-error,
textarea.field-error {
	border-color: #c0392b !important;
	box-shadow: 0 0 0 1px rgba(192, 57, 43, 0.35);
}
/* Add/Edit popups: chips summarizing the active advanced settings while
   the section is collapsed; clicking one opens it */
.advanced-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 6px 0px 10px;
}
.advanced-badge {
	font-size: 11px;
	line-height: 16px;
	padding: 1px 8px;
	border-radius: 9px;
	background-color: rgba(93,69,162,0.12);
	color: #5d45a2;
	cursor: pointer;
	white-space: nowrap;
}
.advanced-badge:hover {
	background-color: rgba(93,69,162,0.22);
}
/* Vue Pricing: dragging a package greys the row like the schedule does */
.pricing-category .package-list .sortable-ghost {
	background-color: #d9d9d9;
}
.pricing-category .package-list .sortable-ghost * {
	visibility: hidden;
}
.package-drag-handle {
	font-size: 14px;
	user-select: none;
	color: #777;
	opacity: 0;
}
.package-item:hover .package-drag-handle {
	opacity: 1;
}
/* Category bar drag handle reveals on hover as well */
.pricing-category .category-header .drag-handle {
	opacity: 0;
}
.pricing-category .category-header:hover .drag-handle {
	opacity: 1;
}
/* Schedule: same hover reveal on category bars, and a handle glyph on the
   class color bar that appears while the row is hovered */
.category-section .category-header .drag-handle {
	opacity: 0;
}
.category-section .category-header:hover .drag-handle {
	opacity: 1;
}
.class-drag-handle {
	text-align: center;
	vertical-align: middle;
}
.class-drag-icon {
	display: block;
	color: #fff;
	font-size: 11px;
	line-height: 1;
	opacity: 0;
	user-select: none;
}
.class-item:hover .class-drag-icon {
	opacity: 0.9;
}
/* Category drag placeholder: a blank bar that keeps the studio's category
   color, matching the grey blank the class/price rows use */
.category-section.sortable-ghost .category-header *,
.pricing-category.sortable-ghost .category-header * {
	visibility: hidden;
}
.category-section.sortable-ghost .category-header,
.pricing-category.sortable-ghost .category-header {
	opacity: 0.55;
}
/* Category bar reused as a flex header keeps its count badge inline */
.package-list-label.category-header .package-list-count {
	float: none;
}
/* Class time rows: opt the dropdowns into customizable select rendering */
#class-timeslots select {
	appearance: base-select;
}
/* Each class time is a flex row that wraps into multiple lines when narrow */
#class-timeslots .class-timeslot-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 8px;
}
#class-timeslots .class-timeslot-row select {
	flex: 1 1 90px;
	min-width: 0;
	width: auto;
	margin: 0;
}
/* With the Location picker (Multiple Locations) the row has one more select: let them all narrow so it stays one line */
#class-timeslots .class-timeslot-row.has-location select {
	flex-basis: 62px;
}
@media (max-width: 700px) {
	/* Line 1: duplicate + day + start + stop + delete; then room, instructor,
	   and assistant each on their own line */
	#class-timeslots .class-timeslot-row .ts-day,
	#class-timeslots .class-timeslot-row .ts-start,
	#class-timeslots .class-timeslot-row .ts-stop {
		flex: 1 1 0;
		min-width: 60px;
	}
	#class-timeslots .class-timeslot-row .btn-red {
		order: 5;
	}
	#class-timeslots .class-timeslot-row .ts-location {
		order: 6;
		flex: 1 1 100%;
	}
	#class-timeslots .class-timeslot-row .ts-room {
		order: 7;
		flex: 1 1 100%;
	}
	#class-timeslots .class-timeslot-row .ts-instructor {
		order: 8;
		flex: 1 1 100%;
	}
	#class-timeslots .class-timeslot-row .ts-assistant {
		order: 9;
		flex: 1 1 100%;
	}
}
/* Add/Edit Class popup: center the form box in the overlay ("safe" keeps
   the top reachable when the form is taller than the viewport) */
/* The class form centers when it fits; a tall one (long rich description)
   starts under the nav + page bars and the fade scrolls, instead of the
   centered box growing up behind them */
#add-class-fade {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 110px 0px 40px;
	box-sizing: border-box;
}
#add-class-fade > .box {
	margin: auto 0px !important;
	flex-shrink: 0;
}
/* A term banner sits above the day row, so it loses its top rounding */
.events .event-day.event-day-term {
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
}
/* Current term banner above Today's Events */
.event-term {
	background-color: #5d45a2;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 15px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
/* Stacked banners: only the first keeps the top rounding */
.event-term + .event-term {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-top: 1px solid rgba(255,255,255,0.15);
}
/* Dates left, title centered, time left right; the side columns match
   widths so the title stays centered even when one side is empty */
.event-term-dates {
	flex: 1;
	text-align: left;
	font-weight: 400;
	opacity: 0.7;
}
.event-term-title {
	text-align: center;
}
.event-term-left {
	flex: 1;
	text-align: right;
	font-weight: 400;
	opacity: 0.8;
}
/* Terms strip on the Schedule: one pill per term */
.term-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 0px 20px 10px;
}
.term-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: #ece8f5;
	color: #5d45a2;
	border-radius: 12px;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
}
.term-pill-dates {
	font-weight: 400;
	opacity: 0.7;
}
.term-pill-hidden {
	opacity: 0.5;
}
.term-pill-current {
	background-color: #5d45a2;
	color: #fff;
}
.term-pill-edit {
	height: 12px;
	cursor: pointer;
	opacity: 0.5;
}
.term-pill-edit:hover {
	opacity: 1;
}
.term-pill-current .term-pill-edit {
	filter: invert(1);
}
.term-pill-add {
	background-color: transparent;
	border: 1px dashed #b3a5d6;
	cursor: pointer;
}
/* The add pill lives inline with the SCHEDULE title; the auto right
   margin keeps it beside the title in the space-between flex row */
.term-pill-title {
	margin-left: 10px;
	margin-right: auto;
	vertical-align: middle;
	font-size: 12px;
	letter-spacing: normal;
	text-transform: none;
}
/* Clock/door icons inline with a timeslot line, sized like Today's Events */
.class-time img {
	height: 11px;
	display: inline-block;
	opacity: 0.4;
}
/* Tiny instructor/assistant profile pic inline with a timeslot line */
.class-time-pic {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background-size: cover;
	background-position: center;
	background-color: rgba(0, 0, 0, 0.1);
	vertical-align: middle;
	margin: -2px 2px 0 2px;
}
/* Category header counter doubles as the delete control: hovering the row
   swaps the count for an ×, hovering the badge itself turns it reddish */
.category-header .category-count-x {
	display: none;
}
.category-header:hover .category-count-num {
	display: none;
}
.category-header:hover .category-count-x {
	display: inline;
}
.category-count-delete {
	cursor: pointer;
}
.category-count-delete:hover {
	background-color: rgba(192, 32, 32, 0.6);
}
/* Week View layout picker: bar-chart style icons — rows are stacked
   horizontal bars of different lengths, columns are top-aligned vertical
   bars of different heights */
.schedule-layout-icon {
	cursor: pointer;
	margin-left: 12px;
	width: 28px;
	height: 24px;
	display: flex;
}
.schedule-layout-icon span {
	background-color: #ccc;
}
.schedule-layout-icon:hover span {
	background-color: #999;
}
.schedule-layout-icon.schedule-layout-active span {
	background-color: #5d45a2;
}
.schedule-layout-rows {
	flex-direction: column;
	justify-content: space-between;
}
.schedule-layout-rows span {
	width: 100%;
}
.schedule-layout-rows span:nth-child(1) { height: 4px; }
.schedule-layout-rows span:nth-child(2) { height: 9px; }
.schedule-layout-rows span:nth-child(3) { height: 6px; }
.schedule-layout-cols {
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}
.schedule-layout-cols span {
	width: 7px;
}
.schedule-layout-cols span:nth-child(1) { height: 100%; }
.schedule-layout-cols span:nth-child(2) { height: 60%; }
.schedule-layout-cols span:nth-child(3) { height: 82%; }
.class-edit {
	display: none;
	padding: 20px 30px;
}
.class-category {
	background-color: #5d45a2;
	color: #eee;
	font-size: 12px;
	padding: 7px 20px;
	margin: 10px 0px 10px;
	min-width: 200px;
}
.class-category-small {
	background-color: #5d45a2;
	color: #eee;
	font-size: 12px;
	padding: 5px 10px;
	margin: 10px -20px 5px;
	cursor: pointer;
}
.class-group-title {
	color: #eee;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 12px;
	padding: 8px 10px;
	margin: 10px 0px 10px 0px;
	border-radius: 5px;
	cursor: pointer;
}
.class-group-time {
	display: block;
	padding: 2px 0px 2px 15px;
	cursor: pointer;
}
.class-dot {
	width: 12px;
	height: 12px;
	margin: 9px;
	border-radius: 100%;
}
.class-main {
	padding: 20px;
}
.class-title {
	color: #333;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1px;
	word-break: break-word;
	vertical-align: middle;
}
.class-title-sub {
	color: #999;
	font-size: 11px;
	line-height: 11px;
	font-weight: 600;
	letter-spacing: 0px;
	padding-left: 15px;
}
.class-desc-week {
	display: none;
	width: 100%;
}
.class-description {
	display: none;
	width: 100%;
	padding: 0px 30px 10px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.class-desc-week p,
.class-description p {
	color: #555;
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
}
.class-time {
	font-size: 14px;
	line-height: 20px;
	padding-top: 1px;
	color: #777;
}
.class-add-instructor {
	float: right;
	font-size: 40px;
	font-weight: 600;
	cursor: pointer;
	line-height: 35px;
}
.class-instructor,
.class-timeslot {
	color: #999;
	padding: 5px 10px 5px 15px;
	vertical-align: middle;
	line-height: 34px;
}
.class-instructor:hover,
.class-timeslot:hover {
	color: #333;
	background-color: #fff;
}
.class-instructor:hover .class-instructor-close,
.class-timeslot:hover .class-timeslot-close {
	color: #333;
}
.class-timeslot-close,
.class-instructor-close {
	display: inline-block;
	float: right;
	font-weight: 600;
	font-size: 30px;
	line-height: 34px;
	padding: 5px;
	cursor: pointer;
	color: #bbb;
}
.class-timeslot-close {
	line-height: 24px;
}
.class-instructor:hover .box-profile-thumb {
	opacity: 1;
}
#class-instructors .class-instructor:nth-child(odd),
#class-timeslots .class-timeslot:nth-child(odd) {
	background-color: #eeeeee;
}
#class-instructors .class-instructor:nth-child(even),
#class-timeslots .class-timeslot:nth-child(even) {
	background-color: #e5e5e5;
}
.timeslots-none {
	display: inline-block;
	padding-top: 10px;
	font-size: 12px;
}
.class-rsvp {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	margin-top: 10px;
	margin-left: 5px;
	margin-right: 5px;
}
.class-rsvp-num {
	color: rgba(30,153,30,1);/* Green */
	font-size: 30px;
	font-weight: 700;
}
.class-rsvp-text {
	font-size: 12px;
	font-weight: 300;
}

/* Class Levels */
.class-level {
	display: block;
	margin: 0px -20px;
	color: #666;
}
.class-level-color {
	width: 10px;
}
.class-level-class {
	padding: 12px 0px 12px 13px;
	font-size: 16px;
}
.class-level-class span {
	font-size: 14px;
	font-weight: 300;
}
.class-level input {
	margin: 2px 5px 5px 0px;
}
.class-sub-levels {
	display: block;
	padding: 0px 20px 0px 0px;
	text-align: right;
}
.class-sub-levels label {
	white-space: nowrap;
}
.class-level:nth-child(odd) {
	background-color: #e3e3e3;
}
.class-level:nth-child(even) {
	background-color: #ededed;
}

.member-level {
	margin: 0px -20px;
}
.member-level label {
	display: block;
	padding: 5px;
}
.member-level:nth-child(odd) {
	background-color: #e3e3e3;
}
.member-level:nth-child(even) {
	background-color: #ededed;
}

.price-sublevel {
	padding: 10px 30px 0px;
	margin: 0px -20px;
	text-align: right;
	font-size: 14px;
	line-height: 14px;
	display: block;
	color: #777;
}
.price-level {
	padding: 11px 30px;
	margin: 0px -20px;
	text-align: right;
	font-size: 14px;
	line-height: 24px;
	display: block;
	color: #333;
}
.price-level:nth-child(even) {
	background-color: #e6e6e6;
}
.price-level:nth-child(odd) {
	background-color: #ededed;
}
.price-title {
	display: inline-block;
	float: left;
	text-align: left;
	font-size: 18px;
	letter-spacing: 1px;
	line-height: 24px;
}
.price-desc {
	padding-top: 2px;
	color: #555;
	font-size: 12px;
	line-height: 17px;
	letter-spacing: 1px;
	text-align: left;
}
.price-subtitle {
	display: inline-block;
	padding-right: 10px;
	color: #aaa;
	font-size: 9px;
	line-height: 17px;
	vertical-align: top;
	padding-top: 2px;
}
.price-amount {
	display: inline-block;
	vertical-align: bottom;
}
.price-agree {
	cursor: pointer;
	font-size: 10px;
	text-align: left;
	display: block;
	padding-top: 7px;
	padding-bottom: 7px;
}

/* Challenges */
.challenge {
	margin: 10px 5px 10px;
	padding-bottom: 10px;
}
.challenge button {
	margin-top: -3px;
	margin-bottom: 0px;
}
.challenge-category {
	padding: 5px 10px;
	margin: 10px -10px 10px -10px;
	font-size: 13px;
}
.challenge-menu {
	display: none;
	text-align: right;
	font-size: 10px;
	padding-top: 15px;
}
.challenge-latest-left {
	font-size: 12px;
	line-height: 14px;
	text-align: left;
	vertical-align: bottom;
}
.challenge-latest-left div {
	display: inline-block;
	color: #666;
}
.challenge-latest-right {
	color: #666;
	font-size: 30px;
	line-height: 30px;
	text-align: right;
	letter-spacing: -0.5px;
}
.challenge-desc {
	display: none;
}
.challenge-desc p {
	font-size: 16px;
	padding: 10px 0px 5px;
}

/* Progress Bar */
.progress-container {
	flex: 1;
}
.progress-bar {
	background-color: rgba(0,0,0,0.1);
	height: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	overflow: hidden;
}
.progress-bar div {
	width: 0px;
	height: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	transition: width 2s ease;
}
.progress-good {
	background-color: rgba(83,166,83,1);
}
.progress-warn {
	background-color: rgba(223,150,72,1);
}
.progress-maxed {
	background-color: rgba(200,63,63,1);
}
.progress-label {
	display: flex;
	justify-content: space-between;
	margin-top: 2px;
	font-size: 11px;
	font-weight: normal;
	line-height: 11px;
    letter-spacing: 0px;
	opacity: 0.7;
}

/* QR Scanning */
.keycard-hover {
	display: inline-block;
	position: relative;
	width: 250px;
	height: 155px;
	margin: 5px 0px 10px;
}
.keytag-hover {
	display: inline-block;
	position: relative;
	width: 300px;
	height: 141px;
	margin: 5px 0px 0px;
}
.keycircle-hover {
	display: inline-block;
	position: relative;
	width: 240px;
	height: 240px;
	margin: 5px 0px 0px;
}
.keycard {
	display: inline-block;
	position: absolute;
	left: 0;
	width: 250px;
	height: 155px;
	cursor: pointer;
	background-color: #fff;

	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;

	box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
}
.keytag {
	display: inline-block;
	position: absolute;
	left: 0;
	width: 300px;
	height: 141px;
	cursor: pointer;

	border-radius: 23px;
	-moz-border-radius: 23px;
	-webkit-border-radius: 23px;

	box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
}
.keycircle {
	display: inline-block;
	position: absolute;
	left: 0;
	width: 240px;
	height: 240px;
	cursor: pointer;

	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;

	box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: 3px 5px 6px rgba(0,0,0,0.3);
}
.keycard-front,
.keytag-front,
.keycircle-front {
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;

	transform: rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
	backface-visibility: hidden;

	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.keycard-hover.flip .keycard-front,
.keytag-hover.flip .keytag-front,
.keycircle-hover.flip .keycircle-front {
	z-index: 20;
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
.keycard-back,
.keytag-back,
.keycircle-back {
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;

	-webkit-transform: rotateY(-180deg);
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;

	-moz-transform: rotateY(-180deg);
	-moz-transform-style: preserve-3d;
	-moz-backface-visibility: hidden;

	transform: rotateY(-180deg);
  transform-style: preserve-3d;
	backface-visibility: hidden;

	/* -- transition is the magic sauce for animation -- */
	-o-transition: all .4s ease-in-out;
	-ms-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
.keycard-hover.flip .keycard-back,
.keytag-hover.flip .keytag-back,
.keycircle-hover.flip .keycircle-back {
	z-index: 25;
	-webkit-transform: rotateX(0deg) rotateY(0deg);
	-moz-transform: rotateX(0deg) rotateY(0deg);
	transform: rotateX(0deg) rotateY(0deg);
}
.keycard-back img {
	height: 120px;
	margin: auto;
	padding: 17px 0px 0px 0px;
}
.keytag-back img {
	height: 120px;
	margin: auto;
	vertical-align: middle;
	padding: 10px 0px 0px 40px;
}
.keycircle-back img {
	height: 120px;
	margin: auto;
	vertical-align: middle;
	padding: 60px;
}

/* Sales */
.modify {
	display: none;
}
.modify input,
.modify select {
	width: 90px;
	height: 26px;
	line-height: 26px;
	text-align: center;
	margin: 2px 0px 0px;
	padding: 10px 0px;
}
.modify select {
	width: 170px;
}
.modify button {
	margin-top: 2px;
	margin-left: -1px;
}
.modify input.small {
	width: 60px;
}
.modify input.large {
	width: 160px;
}
.hidden-date {
	padding: 3px 0px;
}

/* Passes */
.passes {
	font-size: 80px;
	line-height: 70px;
	text-align: center;
	padding-bottom: 20px;
	color: rgba(0,153,0,0.7);/* Green */
	font-weight: 600;
}
.points {
	font-size: 70px;
	line-height: 70px;
	text-align: center;
	padding-bottom: 20px;
	color: rgba(31,81,182,0.6);/* Blue */
	font-weight: 600;
}
.points-amount {
	font-weight: 600;
	font-size: 16px;
}
tr td.rewards,
.rewards {
	padding-left: 10px;
	color: #777;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
}
.passes-icon {
	margin: auto;
	padding: 20px 0px 30px;
}
.passes-icon-med {
	display:inline-block;
	height: 14px;
	opacity: 0.4;
}
.passes-icon-small {
	display:inline-block;
	height: 11px;
	opacity: 0.3;
}
.passes-icon-tiny {
	display:inline-block;
	height: 10px;
	opacity: 0.3;
}
.passes-icon-micro {
	display:inline-block;
	height: 8px;
	opacity: 0.3;
}
.pass-row:nth-child(odd) {
	background-color: #e3e3e3;
}
.pass-row:nth-child(even) {
	background-color: #ededed;
}
.pass-row .pass-left,
.pass-row .pass-right {
	font-size: 10px;
	padding: 4px 10px;
}

.pass-pop-row {
	background-color: #ededed;
	cursor: pointer;
}
.pass-pop-row.selected {
	background-color: rgba(0,150,0,0.1);
}
.pass-pop-row input {
	margin-bottom: 0px;
}
.pass-pop-row .pass-left,
.pass-pop-row .pass-right {
	font-size: 18px;
	padding: 15px 15px;
	border-top: 10px solid #f6f6f6;
	border-bottom: 10px solid #f6f6f6;
}
.pass-row .pass-left,
.pass-pop-row .pass-left {
	width: 65%;
	padding-right: 0px;
}
.pass-row .pass-right,
.pass-pop-row .pass-right {
	width: 35%;
	text-align: right;
	padding-left: 0px;
}
.pass-pop-row .pass-left,
.pass-book-row .pass-left {
	padding-left: 20px;
	font-weight: 600;
	color: #666;
}
.pass-pop-row .pass-left img {
	display:inline-block;
	height: 12px;
	opacity: 0.6;
}
.pass-book-row .pass-right {
	padding-right: 20px;
}
.pass-book-option {
	margin-right: 10px;
}
.pass-book-text {
	color: #aaa;
  font-size: 12px;
  line-height: 17px;
	letter-spacing: 1px;
  padding-top: 2px;
}
.pass-pop-text {
	font-size: 14px;
	color: #888;
	font-weight: 400;
	padding-top: 1px;
	display: flex;
	justify-content: space-between;
}

.pop-text {
	font-size: 16px;
	padding-bottom: 10px;
	text-align: center;
	line-height: 24px;
}
.pop-text span {
	font-style: italic;
	font-weight: bold;
}
.pop-inv-amount input {
	margin: 0px;
	text-align: center;
}
.pop-inv-stock {
	width: 30%;
	font-size: 20px;
	text-align: center;
}

.package-icon {
	display: inline-block;
	height: 18px;
}
.package-count {
	letter-spacing: 0px;
	font-size: 22px;
	font-weight: 600;
	color: #000;
}
.mobile .package-title,
.package-title {
	word-break: break-word;
	letter-spacing: 0px;
	font-size: 22px;
	font-weight: 600;
	line-height: 28px;
	color: #555;
	padding: 18px 0px 18px 20px;
	text-align: left;
}
td .package-title {
	padding-left: 0px;
}
.package-text {
	letter-spacing: 1px;
	font-size: 12px;
	line-height: 17px;
	color: #777;
	padding-top:2px;
}
.package-price {
	display: inline-block;
	vertical-align: middle;
}
.package-cost {
	white-space: nowrap;
	color: #666;
	font-size: 16px;
	line-height: 16px;
	padding-right: 5px;
	vertical-align: top;
}
.package-cost-labels {
	display: inline-block;
	vertical-align: top;
	padding-top: 10px;
	padding-right: 2px;
}
.package-cost-tax {
	color: #777;
	font-size: 10px;
	line-height: 10px;
}
.package-select {
	margin-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
.package-input {
	float: right;
	width: 44px;
	vertical-align: middle;
	margin-bottom: 0px;
	text-align: center;
	position: relative;
	padding-left: 0px;
	padding-right: 0px;
}
.package-input input {
	text-align: center;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 7px;
	padding-bottom: 13px;
}

.package-input-textarea {
	text-align: left;
	margin-bottom: 0px;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 7px;
	padding-bottom: 13px;
}
.package-input-text {
	position: absolute;
	bottom: 0;
	font-size: 9px;
	line-height: 9px;
	text-align: center;
	width: 100%;
	margin-bottom: 2px;
	color: #aaa;
}
.package-input-full {
	vertical-align: middle;
	margin-bottom: 0px;
}
.tbl-cell .package-input {
	float: none;
	display: inline-block;
}
.package-price {
	color:#222;
	font-size: 40px;
	line-height: 40px;
	font-weight: 600;
	letter-spacing: -2px;
}
.package-free {
	color:#222;
	font-size: 33px;
	line-height: 40px;
	font-weight: 600;
	letter-spacing: -2px;
}
.package-detail {
	color: #777;
	font-size: 10px;
	white-space: nowrap;
}
.cart-none {
	background-color: #ccc;
	color: #555;
	font-size: 14px;
	text-align: center;
	margin: -20px -20px 0px;
	padding: 20px;
}
.cart-list select {
	color: #624691;
}
.count-indicator {
	display: none;
	border-radius: 100%;
	background-color: red;
	color: #fff;
	width: 23px;
	height: 23px;
	line-height: 23px;
	text-align: center;
	position: absolute;
	bottom: 5px;
	right: 0px;
}
.nav-on .count-indicator {
	display: block;
	bottom: 5px;
	right: 4px;
}
.menu-item .count-indicator {
	display: block;
	bottom: none;
	top: 8px;
	right: 10px;
	line-height: 22px;
}
.action .count-indicator {
	display: block;
	bottom: none;
	top: 39px;
	right: 4px;
}
.btn-image .count-indicator {
	bottom: 0px;
	right: -10px;
}
.package-list {
	width: 100%;
	display: table;
}
.package-item {
	display: table-row;
	padding: 20px 0px 20px 40px;
	outline: none;
}
.package-list .package-item:nth-child(odd) {
	background-color: #eeeeee;
}
.package-list .package-item:nth-child(even) {
	background-color: #e5e5e5;
}
.package-list .package-item:hover {
	background-color: #fff;
}
.package-item-text {
	font-size: 10px;
	letter-spacing: 0px;
}
.mobile .package-edit,
.package-edit {
	width: 20px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
}
.package-edit .edit {
	float: none;
	padding-right: 4px;
	display: none;
}
.package-list .package-item:hover .edit {
	display: inline-block;
}
.package-list-label {
	color: #eee;
	background-color: #443287;
	margin: 10px 0px 10px;
	padding: 8px 20px;
	font-size: 12px;
	cursor: pointer;
}
.package-list-count {
	float: right;
	font-size: 12px;
	background-color: rgba(0,0,0,0.25);
	line-height: 20px;
	width: 20px;
	border-radius: 100%;
	text-align: center;
}
.package-inv {
	color: #bbb;
	font-size: 12px;
	font-weight: 600;
  line-height: 17px;
	border: 1px solid #cacaca;
	margin: 2px 3px;
	padding: 1px 4px;
	border-radius: 7px;
}
.package-item:hover .package-instock {
}

#package-classes .package-class:nth-child(odd), #package-staff .package-class:nth-child(odd) {
	background-color: #eeeeee;
}
#package-classes .package-class:nth-child(even), #package-staff .package-class:nth-child(even) {
	background-color: #e5e5e5;
}
.package-class {
	padding:10px 20px 10px 30px;
}
.package-class .class-title {
	color: #777;
}
#package-classes .package-class:hover .class-title, #package-staff .package-class:hover .class-title {
	color: #333;
}
#package-classes .package-class:hover, #package-staff .package-class:hover {
	background-color: #fff;
}
#package-classes .package-class:hover .package-class-close, #package-staff .package-class:hover .package-class-close {
	color: #333;
}
.package-class-close {
	float: right;
	font-size: 30px;
	font-weight: 600;
	line-height: 20px;
	padding: 0px 5px;
	cursor: pointer;
	color: #bbb;
}
.package-options {
	padding:0px 0px 15px;
}
.package-option-item {
	display: block;
	padding: 10px 5px;
}
.package-options .package-option-item:nth-child(odd) {
	background-color: #eeeeee;
}
.package-options .package-option-item:nth-child(even) {
	background-color: #e5e5e5;
}
.package-option-label {
	display: inline-block;
	vertical-align: middle;
}
/* "Bookable with" on a private package: one checkbox pill per staff member
   with Private Scheduling, wrapping under the label */
.package-option-title {
	display: inline-block;
	vertical-align: middle;
}
.package-option-desc {
	font-size: 10px;
	letter-spacing: 0px;
}
input.toggle-round + label.package-option-toggle {
	float: right;
	margin-top: 5px;
}
/* A row with a switch: the text takes the room and the switch sits centred on the right (a long
   description used to push the floated switch down into the next row) */
.package-option-item:has(> input.toggle-round + label.package-option-toggle) {
	display: flex;
	align-items: center;
	gap: 14px;
}
.package-option-item:has(> input.toggle-round + label.package-option-toggle) > .package-option-label {
	flex: 1 1 auto;
	min-width: 0;
}
.package-option-item > input.toggle-round + label.package-option-toggle {
	float: none;
	flex: 0 0 auto;
	margin-top: 0;
}

.package-archive {
	display: none;
}
.package-archive.not-hidden {
	display: table-row;
}
/* Category header whose packages are all archived — hidden until "View Archived" (eye) */
.package-list-label.archive-only {
	display: none;
}
.package-list-label.archive-only.not-hidden {
	display: block;
}
.package-item.package-archive:nth-child(odd) {
	background-color: rgba(199,161,161,0.35);
}
.package-item.package-archive:nth-child(even) {
	background-color: rgba(199,161,161,0.25);
}
.package-item:hover.package-item.package-archive {
	background-color: rgba(199,161,161,0.55);
}
.package-archive .package-title,
.package-archive .package-count,
.package-archive .package-text,
.package-archive .package-cost,
.package-archive .package-cost-tax,
.package-archive .package-price,
.package-archive .package-detail {
	color: #bfa6a6;
}
.package-item:hover.package-archive .package-title,
.package-item:hover.package-archive .package-count,
.package-item:hover.package-archive .package-text,
.package-item:hover.package-archive .package-cost,
.package-item:hover.package-archive .package-cost-tax,
.package-item:hover.package-archive .package-price,
.package-item:hover.package-archive .package-detail {
	color: #777;
}
.package-archive img {
	opacity: 0.2;
}
.package-archive button img {
	opacity: 1.0;
}

.package-item.package-staff:nth-child(odd) {
	background-color: rgba(166,132,83,0.15);
}
.package-item.package-staff:nth-child(even) {
	background-color: rgba(166,132,83,0.15);
}
.package-item:hover.package-item.package-staff:nth-child(even) {
	background-color: rgba(166,132,83,0.35);
}
.package-staff .package-title,
.package-staff .package-count,
.package-staff .package-text,
.package-staff .package-cost,
.package-staff .package-cost-tax,
.package-staff .package-price,
.package-staff .package-detail {
	color: #c0af97;
}
.package-staff img {
	opacity: 0.2;
}
.package-staff button img {
	opacity: 1.0;
}

.package-private .package-title,
.package-private .package-count,
.package-private .package-text,
.package-private .package-cost,
.package-private .package-cost-tax,
.package-private .package-price,
.package-private .package-detail {
	color: #bbb;
}
.package-item:hover.package-private .package-title,
.package-item:hover.package-private .package-count,
.package-item:hover.package-private .package-text,
.package-item:hover.package-private .package-cost,
.package-item:hover.package-private .package-cost-tax,
.package-item:hover.package-private .package-price,
.package-item:hover.package-private .package-detail {
	color: #777;
}
.package-private img {
	opacity: 0.2;
}
.package-private button img {
	opacity: 1.0;
}
.package-item:hover.package-private img {
	opacity: 0.7;
}

.package-hidden {
	display: none;
}
.package-hidden.not-hidden,
.package-admin.package-hidden {
	display: table-row;
}
.package-item.package-admin.package-hidden:nth-child(odd) {
	background-color: rgba(161,161,199,0.35);
}
.package-item.package-admin.package-hidden:nth-child(even) {
	background-color: rgba(161,161,199,0.25);
}
.package-item:hover.package-admin.package-hidden {
	background-color: rgba(161,161,199,0.55);
}
.package-hidden.package-admin .package-title,
.package-hidden.package-admin .package-count,
.package-hidden.package-admin .package-text,
.package-hidden.package-admin .package-cost,
.package-hidden.package-admin .package-cost-tax,
.package-hidden.package-admin .package-price,
.package-hidden.package-admin .package-detail {
	color: #a6abbf;
}
.package-item:hover.package-hidden.package-admin .package-title,
.package-item:hover.package-hidden.package-admin .package-count,
.package-item:hover.package-hidden.package-admin .package-text,
.package-item:hover.package-hidden.package-admin .package-cost,
.package-item:hover.package-hidden.package-admin .package-cost-tax,
.package-item:hover.package-hidden.package-admin .package-price,
.package-item:hover.package-hidden.package-admin .package-detail {
	color: #777;
}
.package-hidden.package-admin img {
	opacity: 0.2;
}
.package-hidden.package-admin button img {
	opacity: 1.0;
}


#pkg-tag-groups {
	display: table;
	width: 100%;
}
.pkg-tag-group {
	display: table-row;
	width: 100%;
}
.pkg-tag-group-name {
	width: 80px;
}
.pkg-tag-group-act {
	display: inline-block;
	white-space: nowrap;
}
.pkg-tag-input-title {
	width: 60px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}
.pkg-tag-group-tags {
	display: table-cell;
	vertical-align: top;
	padding: 10px 0px 10px 30px;
}
.pkg-tag-group-tags .tag-item:first-child .close {
	display: none;
}
.pkg-tag-group-tags .tag-item {
	margin-top: 2px;
	margin-bottom: 2px;
	background-color: #888;
	vertical-align: top;
	margin-left: 0px;
	margin-right: 8px;
}
.pkg-tag-group-close.close {
	display: table-cell;
	float: none;
	vertical-align: middle;
	text-align: right;
	padding-right: 15px;
}
.pkg-product-select {
	margin-bottom: 0px;
}
.pkg-product-inventory {
	width: 60px;
}
.pkg-product-input {
	padding-left: 0px;
	padding-right: 0px;
	margin-bottom: 0px;
	text-align: center;
}
.pkg-product-button {
	width: 30px;
}
.pkg-product-cell {
	padding-left: 10px;
}
.pkg-product-stock button {
	display: inline-block;
	margin: 0px;
	width: 40%;
	padding: 9px 3px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
.pkg-product-stock button img {
	max-width: 10px;
}
.pkg-product-stock input {
	display: inline-block;
	text-align: center;
	margin-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	width: 60%;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}


/* Shopping Cart */
.cart-item-tag-group {
	width: auto;
	margin-left: 6px;
}
.cart-item-start-select {
	margin: 0px;
	max-width: 250px;
}
.cart-item-cycles {
	display: inline-block;
	position: relative;
}
.cart-item-cycles img {
	height: 12px;
	position: absolute;
	top: 6.5px;
	left: 5px;
	opacity: 0.25;
}
.cart-item-cycles input {
	margin: 0px;
	width: 50px;
	padding: 5px 0px 5px 10px;
}
.cart-item-subscribe {
	font-size: 10px;
	cursor: pointer;
}
.cart-item-subscribe-agree {
	margin-bottom: 2px;
}
.cart-toggle {
	text-align: right;
	padding: 0px 10px 10px 0px;
	font-size: 10px;
}


.member-options {
	display: table;
	width: 100%;
}
.member-options .member-option {
	display: table-row;
	color: #888;
	cursor: pointer;
}
.member-option-left {
	display: table-cell;
	padding: 10px 20px;
	font-size: 12px;
	line-height: 21px;
}
.member-option-right {
	display: table-cell;
	width: 1%;
	padding: 20px;
	vertical-align: middle;
}
.member-options .member-option:nth-child(odd) {
	background-color: #eeeeee;
}
.member-options .member-option:nth-child(even) {
	background-color: #e5e5e5;
}

/* Buy Menu */
.chooser-fade {
	background-color: rgba(0,0,50,0.4);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 59;
	overflow-x: auto;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	text-align: center;
}
.chooser {
	width: calc(100% - 50px);
	max-width: 340px;
	margin: 170px 0px 100px;
	box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
}
.chooser-none {
	background-color: #ccc;
	color: #555;
	font-size: 14px;
	text-align: center;
	margin: 10px -20px 20px;
	padding: 10px;
}
.chooser-auto {
	width: calc(100% - 30px);
    max-width: 540px;
}
.chooser-cart {
    width: calc(100% - 40px);
    max-width: 460px;
}
.chooser-text {
	font-size: 15px;
	padding-top: 10px;
}
.chooser-currency {
	color: #999;
	font-size: 24px;
	line-height: 24px;
}
.chooser-input {
	font-size: 34px;
	letter-spacing: -2px;
	display: inline-block;
	color: #666;
	width: 80px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
	margin-bottom: 0px;
}
.chooser-cost {
	font-size: 40px;
	line-height: 40px;
	letter-spacing: -2px;
	padding: 0px 0px 5px;
	display: inline-block;
	vertical-align: middle;
}
.charge-total {
	padding-top: 10px;
	font-size: 14px;
	line-height: 14px;
}
.chooser-extra {
	font-size: 15px;
	line-height: 17px;
	color: #aaa;
}


.increment {
	border-top: transparent 10px solid;
}
.increment-prefix {
	color: #888;
	font-size: 12px;
	line-height: 24px;
}
.increment-value {
	width: 50px;
	height: 60px;
	font-size: 24px;
	letter-spacing: -2px;
	display: inline-block;
	text-align: center;
	margin-bottom: 0px;
	padding: 5px 0px;
}
.increment-left {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
.increment-right {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
.increment button {
	margin: 0px;
	width: 30px;
	height: 30px;
}
.increment button.plus {
	border-top-left-radius: 0px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.increment button.minus {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 3px;
}
.increment button.plus-left {
	border-top-left-radius: 3px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.increment button.minus-left {
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 0px;
}


.cal-main {
	position: relative;
}
.cal-profiles {
	text-align: right;
	margin: 0px 45px -20px 0px;
}
.mobile .cal-profiles,
.cal-profiles {
	display: none;
}
.cal-profile {
	display: inline-block;
	background-color: #e0e0e0;
	padding: 7px 20px 8px;
	margin-right: 5px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	cursor: pointer;
	vertical-align: bottom;
	color: #777;
}
.cal-profile .box-profile {
	margin-right: 0px;
	opacity: 0.6;
}
.cal-profile-sel {
	background-color: #f6f6f6;
	opacity: 1.0;
	padding: 13px 20px 12px;
	cursor: auto;
	margin-bottom: -1px;
}
.cal-profile-sel .box-profile {
	margin-right: 10px;
	opacity: 0.9;
}
.cal-profile .cal-logo {
	height: 42px;
	display: block;
	margin: 0px;
}
.cal-profile-name {
	display: none;
	vertical-align: middle;
	text-align: center;
}
.cal-profile-sel .cal-profile-name {
	display: inline-block;
}
.cal-profile-day {
	text-align: center;
	width: 100%;
	height: 100%;
}
.cal-profile-hour {
	display: inline-block;
	width: 16%;
	line-height: 35px;
	letter-spacing: 0px;
	color: #efefef;
	background-color: #df312e;
	border-collapse: collapse;
	text-align: center;
	cursor: pointer;
}
.cal-profile-hour span {
	font-size: 10px;
}
.cal-profile-halfhour {
	width: 8%;
}
.cal-hour-on {
	background-color: #07820d;
}
.mobile .cal-event,
.cal-event {
	display: none;
}

/* Popup Toast */
.toast {
	position: fixed;
	/* Sits above the chat bubble that lives in the same corner (.chat-toggle, 10px up) */
	bottom: 85px;
	right: 30px;
	/* Above popup overlays (59-60) so action feedback survives an open modal */
	z-index: 200;
	text-align: right;
	max-width: 320px;
}
.toast .close {
	margin-left: 10px;
}
.toast .close:hover {
	color: #eee;
}
.toast-card {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin: 10px 0px;
	padding: 10px 15px;
	border-radius: 5px;
	color: #fff;
	text-align: left;
	box-sizing: border-box;
	width: 100%;
    white-space: normal;
}
.toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: rgba(255,255,255,0.55);
	transform-origin: left center;
	animation: toast-progress linear forwards;
}
@keyframes toast-progress {
	from { width: 100%; }
	to { width: 0%; }
}
.toast-green {
	background-color: rgba(0,110,0,0.6);
}
.toast-card.toast-clickable { cursor: pointer; }
.toast-card.toast-clickable:hover { filter: brightness(1.1); }
.toast-red {
	background-color: rgba(150,0,0,0.6);
}
.toast-orange {
	background-color: rgba(170,95,0,0.75);
}
.toast button {
	background: none;
	background-color: rgba(0,0,0,0.2);
	color: #eee;
	border: none;
	box-shadow: none;
	text-shadow: none;
	margin: 0px 0px 0px 5px;
}
.toast button:focus,
.toast button:active,
.toast button:hover {
	background-color: rgba(0,0,0,0.3);
	color: #fff;
}
.toast-enter-active,
.toast-leave-active {
  transition: all 1s;
}
.toast-enter,
.toast-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/* List Add/Remove Animation */
.flip-list-move {
  transition: transform 1s;
}
.flip-list-enter-active,
.flip-list-leave-active {
  transition: all 1s;
}
.flip-list-enter,
.flip-list-leave-to {
  opacity: 0;
}
.flip-list-leave-active {
  transition: all 1s;
}
/* Bounce Animation */
.bounce-enter-active {
  animation: bounce-in 0.7s;
}
.bounce-leave-active {
  animation: bounce-out 0.7s;
}
.bounce-enter-active.modlist-sub-row {
  animation: none;
}
.bounce-leave-active.modlist-sub-row {
  animation: none;
}


.notify-fade,
.notify-success,
.notify-fail {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 60;
	background-color: rgba(0,0,50,0.4);
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.notify-success {
	background-color: rgba(0,50,0,0.5);
}
.notify-fail {
	background-color: rgba(50,0,0,0.5);
}
.notify {
	width: 290px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
}
.notify-wide {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 90%;
	min-height: 200px;
	max-height:70%;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
	-moz-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* For tablets */
@media only screen and (min-width: 600px) {
	.notify-wide {
		max-width: 600px;
	}
}
.form-text {
	position: relative;
	overflow-y: scroll;
	min-height: 200px;
	max-height: 400px;
	background-color: #fff;
	box-shadow: inset 0 0 5px #aaa;
	white-space: pre-wrap;
	font-size: 16px;
	color: black;
	padding: 20px;
	margin-bottom: 15px;
}
.notify-success .title {
	color: #039427;/*green*/
}
.notify-fail .title {
	color: #df312e;/*red*/
}
.notify .title {
	padding-bottom: 5px;
}
.prompt-text {
	color: #333;
	font-size: 20px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	padding: 0px 0px 20px;
	overflow-wrap: break-word;
}
.notify-text {
	color: #333;
	font-size: 23px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	padding: 20px 0px;
	margin: 0px -20px;
	overflow-wrap: break-word;
}
.failed-text {
	color: #333;
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	padding: 5px 0px 20px;
	margin: 0px -20px;
}
.transfer-text {
	color: #333;
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	padding: 0px 0px 10px;
	margin: 0px -20px;
}
.book-title {
	color: #333;
	font-size: 30px;
	font-weight: 300;
	line-height: 30px;
	text-align: center;
	padding: 10px 0px 0px;
}
.book-text {
	color: #333;
	font-size: 18px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	padding: 0px 0px 10px;
}
.book-subject {
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	text-align: center;
	padding: 10px 0px;
}
.book-name {
	font-size: 20px;
	color: #777;
	font-weight: 600;
	display: inline-block;
}
.book-option {
	display: block;
	font-size: 20px;
	text-align: center;
	padding: 15px 10px 15px 0px;
	margin: 5px 0px;
	background-color: rgba(0,0,0,0.1);
	vertical-align: middle;
	line-height: 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.book-option input {
	margin-bottom: 4px;
	vertical-align: middle;
}
.book-option select {
	color: #999;
	vertical-align: middle;
	margin: 0px 0px 0px 5px;
	max-width: 100px;
}

.sale-tbl {
	margin-top: 10px;
	background-color: #e3e3e3;
}
.sale-left {
	font-size: 12px;
	line-height: 12px;
	text-align: left;
	width: 60%;
	padding: 10px 0px 10px 40px;
}
.sale-right {
	font-size: 12px;
	line-height: 12px;
	text-align: right;
	width: 40%;
	padding: 10px 40px 10px 0px;
}
.sale-left img {
	display:inline-block;
	height: 10px;
	opacity: 0.3;
}

.calendar-button {
	float: right;
	margin-right: 10px;
}
.calendar-month {
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	padding: 0px 0px 20px;
	vertical-align: middle;
}
.calendar-month span {
	vertical-align: middle;
}
.cal-arrow-left {
	display: table-cell;
	text-align: right;
}
.cal-title {
	display: table-cell;
	width: 1%;
	white-space: nowrap;
	min-width: 170px;
}
.cal-arrow-right {
	display: table-cell;
	text-align: left;
}
.cal-arrow-left div,
.cal-arrow-right div,
.cal-arrow {
	color: #ccc;
	font-size: 30px;
	line-height: 20px;
	display: inline-block;
	padding: 0px 20px 5px;
	vertical-align: middle;
	cursor: pointer;
}
.cal-arrow-left div:hover,
.cal-arrow-right div:hover,
.cal-arrow:hover {
	color: #999;
}
.calendar-pad {
	margin: 0px 20px 0px 20px;
}
.mobile .calendar .tbl-cell,
.calendar .tbl-cell {
	height: 40px;
	text-align: center;
	vertical-align: middle;
	z-index: -1;
	width: 14.28%;
	border: 0px;
}
.calendar .show-day {
}
.mobile .cal-day,
.cal-day {
	text-align: center;
	font-size: 16px;
	line-height: 16px;
	font-weight: 400;
	padding: 5px;
	color: #999;
	letter-spacing: 0px;
}
.mobile .cal-day-weekend,
.cal-day-weekend {
	color: #ccc;
}
.mobile .cal-day-event,
.cal-day-event {
	background-color: #747474;
	color: #fff;
	width: 36px;
	height: 36px;
	line-height: 36px;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	display: inline-block;
	vertical-align: middle;
	padding: 0px;
	cursor: pointer;
}
.mobile .cal-day-today,
.cal-day-today {
	background-color: rgba(255,235,143,0.6);
}
.mobile .cal-day-today .cal-day,
.cal-day-today .cal-day {
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	font-weight: 800;
}
.mobile .calendar .cal-days .tbl-cell,
.calendar .cal-days .tbl-cell {
	height: auto;
	text-align: center;
	padding: 7px 10px;
	font-size: 12px;
	background-color: #ccc;
	color: #777;
}
.calendar .show-day:hover {
	background-color: #fff;
}
.mobile .cal-item,
.cal-item {
	display: none;
	color: #eee;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 12px;
	padding: 8px 10px;
	margin: 0px 10px 10px 10px;
	border-radius: 5px;
}
.cal-item .cal-time {
	padding-left: 10px;
}
.cal-item .close {
	color: #eee;
	font-size: 18px;
	font-weight: 600;
	display: none;
}
.cal-item:hover .close {
	display: inline-block;
}
.cal-item .close:hover {
	color: #fff;
}
.cal-private {
    border: 2px solid #999;
    color: #555;
    padding: 6px 8px;
    border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0px;
	line-height: 12px;
	margin: 0px 10px 10px 10px;
}
.cal-private:hover {
	background-color: #999;
	color: #fff;
}
.cal-circle,
.cal-number {
	position: absolute;
	top: 50%;
	left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.mobile .cal-mob,
.cal-mob {
	display: inline-block;
}
.mobile .cal-desk,
.cal-desk {
	display: none;
}


.event-day {
	background-color: #5d45a2;
	color: #eee;
	margin: 0px 0px 0px;
	padding: 9px 0px;
	text-align: center;
	font-size: 16px;
	line-height: 16px;
}
.event-none {
	line-height: 96px;
	text-align: center;
	font-size: 11px;
}
.event-checkin {
	background-color: #5d45a2;
	color: #eee;
	margin: 10px 0px 10px;
	padding: 8px 20px;
	font-size: 12px;
	cursor: pointer;
	vertical-align: middle;
}
.event-checkin:hover {
	opacity: 0.8;
	color: #fff;
}
.event-checkin img {
	height: 12px;
	margin-top: -2px;
	margin-right: 5px;
	display: inline-block;
	vertical-align: middle;

 	-webkit-filter: invert(100%);
 	filter: invert(100%);
}
.event-count {
	float: right;
	font-size: 12px;
	background-color: rgba(0,0,0,0.25);
	line-height: 20px;
	width: 20px;
	border-radius: 100%;
	text-align: center;
}
.event-list .event-item:nth-child(odd),
.staff-list .staff-item:nth-child(odd)  {
	background-color: #e5e5e5;
}
.event-list .event-item:nth-child(even),
.staff-list .staff-item:nth-child(even) {
	background-color: #eeeeee;
}
.staff-list {
	width: 100%;
}
.event-list {
	display: table;
	width: 100%;
}
.event-item {
	display: table-row;
	font-size: 14px;
	cursor: pointer;
}
.event-list .event-item:hover {
	background-color: #f9f9f9;
}
.event-item-hour {
	margin-top: 0px;
	margin-bottom: 10px;
}
.event-item-staff {
	margin-top: 20px;
}
.event-item-pre {
  display: table-cell;
  vertical-align: middle;
  width: 13px;
}
.event-item-private .box-profile {
  display: table-cell;
  vertical-align: middle;
	margin-left: 0px;
	margin-right: 10px;
}
.event-item-dot {
  border-radius: 100%;
  width: 12px;
  height: 12px;
  margin: 9px;
  background-color: #555;
}
.event-item-left {
	display: table-cell;
	padding: 15px 0px 15px 20px;
	font-size: 14px;
}
.event-item-private {
	display: table-cell;
	padding: 15px 0px 15px 5px;
	font-size: 14px;
	flex: 1;
}
.event-item-mid {
	display: table-cell;
	padding: 15px 15px 15px 0px;
	vertical-align: middle;
  text-align: right;
}
/* The member beside a booked lesson: its own cell, centered against the
   orange View Booking button (a bare div lands in an anonymous baseline cell) */
.event-item-member {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
	white-space: nowrap;
}
.event-item-right {
	display: table-cell;
	padding: 10px 15px 10px 5px;
	vertical-align: middle;
	text-align: right;
	width: 1px;
}
.event-item-end {
	display: table-cell;
	padding: 10px 15px 10px 5px;
	vertical-align: middle;
	text-align: right;
}
.event-item-cent {
	display: table-cell;
	padding: 15px 0px 15px 0px;
	vertical-align: middle;
  text-align: center;
}
.event-item-title {
	font-size: 17px;
	line-height: 17px;
	color: #555;
	font-weight: 500;
	vertical-align: middle;
	padding-bottom: 2px;
}
.event-item-title-sub {
	color: #999;
	font-size: 11px;
	line-height: 11px;
	font-weight: 500;
	letter-spacing: 0px;
	padding-left: 15px;
	vertical-align: top;
}
.event-item-text {
	padding-top: 2px;
	display: inline-block;
}
.event-item-text img {
	height: 11px;
	display: inline-block;
	opacity: 0.4;
}
.event-item-session {
	font-size: 30px;
	font-weight: 300;
	white-space: nowrap;
	letter-spacing: -0.5px;
}
.event-item-session div {
	font-size: 14px;
	line-height: 14px;
	margin: 4px 0px 0px 0px;
}
.event-item-icon {
	height: 20px;
	float: right;
	opacity: 0.23;
  filter: alpha(opacity=23); /* For IE8 and earlier */
}
.event-item-icon:hover {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
}
.event-item .close {
	font-size: 30px;
	font-weight: 800;
}
.event-ratio {
	display: inline-block;
	padding-right: 5px;
	font-size: 17px;
	letter-spacing: -1px;
	text-align: center;
}
.event-ratio-icon {
	display: inline-block;
	height: 12px;
	vertical-align: middle;
	padding-left: 3px;
}
.events {
	padding: 0px;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius-topleft: 4px;
  -moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;

  -webkit-border-bottom-right-radius: 0px;
  -webkit-border-bottom-left-radius: 0px;
  -moz-border-radius-bottomright: 0px;
  -moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}
.events .event-day {
	-webkit-border-top-left-radius: 4px;
	-webkit-border-top-right-radius: 4px;
	-moz-border-radius-topleft: 4px;
	-moz-border-radius-topright: 4px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
}
.event-profile {
	width: 62px;
}
.tbl-cell.event-mobile {
	display: none;
}
@media only screen and (min-width: 600px) {
	.tbl-cell.event-mobile {
		display:table-cell;
	}
}

.cal-day-blue {
	background-color: rgba(0,116,205,1.0);
	background-color: rgba(1,106,188,1.0);
}
.cal-day-red {
	background-color: rgba(205,0,0,0.8);
	background-color: rgba(228,53,53,1.0);
}
.cal-day-green {
	background-color: rgba(21,176,0,0.8);
	background-color: rgba(120,193,14,1.0);
}
.cal-day-orange {
	background-color: rgba(205,130,0,1.0);
	background-color: rgba(247,108,39,1.0);
}
.cal-day-purple {
	background-color: rgba(21,176,0,0.8);
	background-color: rgba(126,69,211,1.0);
}

.date-item {
    padding: 10px 10px 10px 15px;
	color: #6d6d6d;
    background-color: #ddd;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    border: 1px solid #ddd;
    margin: 0px 0px 13px;
}
.date-item:hover {
	color: #666;
	background-color: #eee;
}
.date-item .close {
	color: #a4a4a4;
}
.date-item .close:hover {
	color: #666;
}


.label .failed {
	display: inline-block;
}
.draft {
	color: #777;
	letter-spacing: 0px;
}
.estimate {
	color: #827007;
	letter-spacing: 0px;
}
.pending {
	color: #1f51b6;
	letter-spacing: 0px;
}
.canceled {
	color: #941fb6;
	letter-spacing: 0px;
}
.line {
	height: 1px;
	background-color: rgba(0,0,0,0.07);
	margin: 15px 20px 20px;
}
.full-img {
	margin: auto;
	max-width: 100%;
	max-height: 200px;
}
.success span,
.failed span,
.pending span,
.canceled span {
	vertical-align: middle;
}


/* Form */
.label {
	color: #bbb;
	font-size: 11px;
	letter-spacing: 0px;
	font-weight: 600;
}
.label.pad {
	padding-top: 5px;
	padding-bottom: 0px;
	margin-bottom: 10px;
}
.label a {
	color: #888;
}
.label a:hover {
	color: #444;
}
.label-text {
	font-size: 10px;
	font-weight: 200;
	line-height: 16px;
}
.label-period {
	color: #888;
	font-size: 10px;
	font-weight: 200;
	line-height: 10px;
	padding-bottom: 3px;
}
.label-popup {
	text-align: right;
  padding-bottom: 10px;
  padding-right: 10px;
}
.item {
	color: #999;
	font-size: 0.8em;
	letter-spacing: 0.5px;
}
.form {
	width: 250px;
	margin: auto;
	text-align: left;
}
.form-chunk {
	display: block;
	vertical-align: top;
	margin: 30px 0px;
}
.form-modify {
	width: 350px;
	text-align: left;
}
.form .title,
.form-modify .title {
	padding-bottom: 20px;
}
.saved-info {
	padding: 10px;
	background-color: #ddd;
	text-align: center;
	border-radius: 10px;
	font-weight: 600;
	margin-bottom: 25px;
	color: #555;
	position: relative;
}
.saved-info .count-indicator {
	display: inline-block;
}
.saved-pending {
	padding: 10px;
	background-color: #bec5dd;
	text-align: center;
	border-radius: 10px;
	font-weight: 600;
	margin-bottom: 25px;
	color: #555;
}
.saved-error {
	padding: 10px;
	background-color: #ddbebe;
	text-align: center;
	border-radius: 10px;
	font-weight: 600;
	margin-bottom: 25px;
	color: #555;
}
.form-option {
	cursor: pointer;
	font-size: 10px;
}
.form-option label {
	cursor: pointer;
	display: block;
	margin: 0px -20px;
	padding: 5px 20px;
}
.form-horz {
	margin: 10px -10px 0px;
}
.form-horz input,
.form-horz select {
	margin: 0px;
}
.form-horz button {
	height: 34.5px;
	white-space: nowrap;
	margin: 0px;
}
.form-wide {
	display: none;
	vertical-align: middle;
}
.form-wide input,
.form-wide select {
	margin-bottom: 0px;
}
.form-wide input[type="tel"] {
	padding-left: 0px;
	padding-right: 0px;
	width: 50px;
	text-align: center;
}

.purchase {
	text-align: center;
}
.purchase-discount select {
	margin-bottom: 5px;
}
.purchase-subtotal {
	font-size: 10px;
}
.purchase-subtotal-amount {
	font-size: 12px;
	color: #777;
}
.purchase-user {
	display: inline-block;
	text-align: center;
	color: inherit;
	margin: 0px 0px 20px;
}
.purchase-user-pic {
	display: inline-block;
	width: 120px;
	height: 120px;
	border-radius: 100%;
	background-color: #bbb;
    background-size: cover;
    background-position: center;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
}
.purchase-user-name {
	font-size: 20px;
	font-weight: 600;
}
input.input-quantity {
	width: 50px;
}
.logo {
	display: inline-block;
	height: 30px;
}

.refund-subtotal {
	color: #777;
	text-align: right;
	margin: 0px 15px 15px;
}
.refund-subtotal-amount {
	padding: 0px 0px 0px 7px;
}


/* Admin */
.adm-bar {
	background-color: #0093d4;
	color: #eaeaea;
	font-weight: 600;
	height: 40px;
	line-height: 40px;
}
.adm-left {
	width: 50%;
	display: inline-block;
	text-align: left;
	padding-left: 20px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.adm-right {
	width: 50%;
	display: inline-block;
	text-align: right;
	padding-right: 20px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}


/* Navigation */
.nav-bar-spacer {
	width: 100%;
	height: 64px;
}
.nav-bar {
	position: fixed;
	top: 0px;
	z-index: 80;

	width: 100%;
	height: 64px;

	background: linear-gradient(#444, #222);
	background: -o-linear-gradient(#444, #222);
	background: -moz-linear-gradient(#444, #222);
	background: -webkit-linear-gradient(#444, #222);
}
.nav-shadow {
	box-shadow: 0px 7px 10px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 7px 10px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 7px 10px rgba(0,0,0,0.2);
}
.nav-right {
	float: right;
}
.nav-nologo {
	max-width: 150px;
	line-height: 20px;
	color: #eaeaea;
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 1px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
	top: 50%;
  -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
  -ms-transform: translateY(-50%); /* IE 9 */
	transform: translateY(-50%);
}
.nav-logo {
	max-width: 150px;
	max-height: 50px;
	height: auto;
	display: block;
	margin: 0px;
	position: relative;
	top: 50%;
  -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */
  -ms-transform: translateY(-50%); /* IE 9 */
	transform: translateY(-50%);
}
.nav-item {
	height: 64px;
	line-height: 64px;
	color: #dadadd;
	padding: 0px 15px;
	letter-spacing: 0px;
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
}
.nav-item:hover,
.nav-click:hover .nav-item,
.nav-sub-item:hover {
	color: #fff;
	background-color: #222;

	transition: background-color 0.2s linear, color 0.2s linear;
	-o-transition: background-color 0.2s linear, color 0.2s linear;
	-moz-transition: background-color 0.2s linear, color 0.2s linear;
	-webkit-transition: background-color 0.2s linear, color 0.2s linear;
}
.nav-back {
	font-size: 40px;
	line-height: 56px;
}
.nav-text {
	font-size: 30px;
	font-weight: 700;
}
.nav-click {
	display: inline-block;
  vertical-align: top;
	position: relative;
}
.nav-click .nav-item {
	display: block;
}
.nav-sub {
	background-color: #222;
	display: none;
	position: absolute;
	float: right;
	right: 0px;
}
.nav-click:hover .nav-sub {
	display: block;
}
.nav-icon {
	display: inline-block;
  vertical-align: middle;
	opacity: 0.7;
  filter: alpha(opacity=70); /* For IE8 and earlier */
	max-width: 32px;
	max-height: 30px;
}
.nav-click:hover .nav-icon {
	opacity: 0.9;
  filter: alpha(opacity=90); /* For IE8 and earlier */
}
.nav-sub-item {
	height: 40px;
	line-height: 40px;
	padding: 0px 8px;
	display: block;
	color: #dadadd;
	cursor: pointer;
	white-space: nowrap;
}
.nav-item-sel {
	color: #75c9ff;
}
.profile-name {
	color: #ccc;
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
	text-align: center;
}
.profile-name-light {
	color: #333;
	vertical-align: middle;
	display: inline-block;
	line-height: normal;
	text-align: center;
	padding-right: 10px;
	font-weight: 700;
	cursor: pointer;
}
.profile-level {
	color: #007abf;
	line-height: normal;
	display: block;
}
.profile-icon {
	height: 12px;
	display: inline-block;
	vertical-align: middle;
}


/* Left Nav */
.menu-fade {
	display: none;
	background-color: rgba(0,0,50,0.4);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 50;
	overflow: hidden;
}
.menu-outer {
	display: none;
	position: fixed;
	left: auto;
	right: -250px;
	width: 170px;
	height: 100%;
	background-color: #333;
	z-index: 50;
	overflow: hidden;
}
.menu-scroll {
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: 100%;
	width: 200px;
	position: relative;
}
.menu {
	width: 170px;
	text-align: left;
	padding-bottom: 100px;
}
.menu-arrow {
	width: 170px;
	background-color: rgba(0,0,0,0.5);
	position: fixed;
	padding: 5px 0px;
	color: #fff;
	display: none;
}
.menu-arrow-bot {
	bottom: 0;
}
.menu-arrow-bot .caret {
	border-top: 10px dashed;
	border-top: 10px solid \13;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
}
.menu-arrow-top {
  top: 0;
  margin-top: 98px;
}
.menu-arrow-top .caret {
	border-bottom: 10px dashed;
	border-bottom: 10px solid \9;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-top: 0px;
}
.menu-category {
	color: #aaa;
	padding: 5px 15px;
	background-color: #222;
	font-size: 10px;
	letter-spacing:0px;
	display: block;
}
.menu-item {
	color: #ccc;
	padding: 11px 0px 11px 20px;
	cursor: pointer;
	position: relative;
	vertical-align: middle;
	font-size: 12px;
}
.menu-item .menu-icon {
	width: 35px;
	text-align: center;
	display: inline-block;
	vertical-align: middle;
}
.menu-item img {
	display: block;
	max-width: 19px;
	max-height: 19px;
	opacity: 0.8;
}
.menu-item span {
	vertical-align: middle;
	font-size: 11.5px;
	line-height: 16px;
}
.menu-item .menu-add {
	float: right;
	margin-right: 10px;
	opacity: 0.4;
}
.menu-item .menu-add:hover {
	opacity: 0.8;
}
.menu-item.nav-item-sel {
	background-color: #443287;
	color: #eee;
}
.menu-item:hover {
	color: #eee;
	background-color: #191919;
}
.menu-item:hover img {
	opacity: 1.0;
}
.menu-social {
	position: relative;
	vertical-align: middle;
	text-align: center;
}
.menu-social-cell {
	display: inline-block;
	text-align: center;
}
.menu-social .menu-icon {
	display: inline-block;
	cursor: pointer;
	padding: 10px 10px;
	vertical-align: middle;
}
.menu-social .menu-icon img {
	display: block;
	text-align: center;
	max-width: 23px;
	max-height: 19px;
	opacity: 0.8;
}
.menu-social .menu-icon:hover {
	background-color: #191919;
}
.menu-social .menu-icon:hover img {
	opacity: 1.0;
}


/* Toggle Checkbox */
.toggle-outer {
	color: #aaa;
	font-size: 12px;
	vertical-align: middle;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
label.toggle-outer {
	cursor: pointer;
}
.toggle-outer select {
	margin-top: 5px;
	margin-bottom: 0px;
}
.toggle-row {
	display: block;
	padding: 15px 0px 20px;
}
.toggle-row label {
	float: right;
	margin-top: 1px;
}
.toggle {
	position: absolute;
	margin-left: -9999px;
	visibility: hidden;
}
.toggle + label {
	display: inline-block;
	position: relative;
	cursor: pointer;
	outline: none;
	user-select: none;
	vertical-align: middle;
}
input.toggle-round + label {
	padding: 2px;
	width: 40px;
	height: 20px;
	background-color: #ccc;
	border-radius: 20px;
	margin-top: -3px;
}
input.toggle-round + label:before,
input.toggle-round + label:after {
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	bottom: 1px;
	content: "";
}
input.toggle-round + label:before {
	right: 1px;
	background-color: #de8383;
	border-radius: 20px;
	transition: background 0.4s;
}
input.toggle-round + label:after {
	width: 22px;
	background-color: #fff;
	border-radius: 100%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
	transition: margin 0.4s;
}
input.toggle-round:checked + label:before {
	background-color: #8ce196;
}
input.toggle-round:checked + label:after {
	margin-left: 20px;
}
.toggle-small {
	cursor: pointer;
}
.toggle-small input.toggle-round + label{
	width: 24px;
	height: 12px;
	border-radius: 12px;
	pointer-events: none;
}
.toggle-small input.toggle-round + label:before {
	border-radius: 12px;
}
.toggle-small input.toggle-round + label:after {
	width: 14px;
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}
.toggle-small input.toggle-round:checked + label:after {
	margin-left: 12px;
}
.toggle-small div {
	display: inline-block;
	width: 40px;
	font-size: 13px;
	font-weight: 400;
	color: #aaa;
}


#ptr {
	position: absolute;
	top: 96;
	left: 0;
	width: 100%;
	color: #fff;
	z-index: 10;
	text-align: center;
	height: 0px;
}
#ptr div.pull-box {
  position: relative;
	width: auto;
	height: auto;
	font-size: 20px;
	line-height: 35px;
	height: 300px;
	background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.7));
	background: -o-linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.7));
	background: -moz-linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.7));
	background: -webkit-linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.7));
  -webkit-transform: translate(0%, -100%); /* Chrome, Safari, Opera */
  -ms-transform: translate(0%, -100%); /* IE 9 */
	transform: translate(0%, -100%);
}
#ptr div.pull-box div {
	opacity: .9;
	position: absolute;
	bottom: 5px;
	display: inline-block;
  -webkit-transform: translate(-50%, 0%); /* Chrome, Safari, Opera */
  -ms-transform: translate(-50%, 0%); /* IE 9 */
	transform: translate(-50%, 0%);
}
#ptr div.pull-box img {
	height: 48px;
	margin-left: auto;
	margin-right: auto;
	transition: all .25s ease;
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(0deg); /* IE 9 */
	transform: rotate(0deg);
}
.ptr-refresh #ptr div.pull-box img {
	-webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  -ms-transform: rotate(180deg); /* IE 9 */
	transform: rotate(180deg);
}
.ptr-loading #ptr div.pull-box,
.ptr-reset #ptr div.pull-box {
	display: none;
}
.ptr-loading #ptr, .ptr-reset #ptr {
	transition: all .25s ease;
}


/* Email Account Settings */
.setting-opt {
	padding: 20px 25px;
	color: #999;
	display: block;
	margin: 0px -20px;
}
.setting-opt .caption {
	color: #999;
	font-weight: 600;
	margin-bottom: 4px;
}
.setting-opt label {
	float: right;
	margin-top: 1px;
}
.setting-opt span {
	font-size: 12px;
}
.setting-opt input {
}
.setting-opt textarea {
	margin: 5px 0px 0px;
}
.setting-opt:nth-child(odd) {
	background-color: #eeeeee;
}
.setting-opt:nth-child(even) {
	background-color: #e5e5e5;
}
.setting-opt:hover {
	background-color: #dedede;
	color: #777;
}
.setting-opt .setting-input {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	margin: 0px;
}
.sub-settings .setting-opt:nth-child(odd) {
	color: #888;
	border-left: 5px #ccc solid;
	background-color: rgba(0,0,0,0.1);
}
.sub-settings .setting-opt:nth-child(even) {
	color: #888;
	border-left: 5px #ccc solid;
	background-color: rgba(0,0,0,0.05);
}
.sub-sub-settings .setting-opt:nth-child(odd) {
	color: #888;
	border-left: 10px #c7c7c7 solid;
	background-color: rgba(0,0,0,0.1);
	padding: 10px 25px 15px;
}
.sub-sub-settings .setting-opt:nth-child(even) {
	color: #888;
	border-left: 10px #c7c7c7 solid;
	background-color: rgba(0,0,0,0.05);
	padding: 10px 25px 15px;
}
.setting-opt .setting-sub-opt,
.setting-sub-opt {
	float: none;
	display: block;
	padding: 15px 0px 0px;
}
.setting-opt-details {
	font-size: 10px;
	letter-spacing: 0px;
}
.setting-flex {
	display: flex;
}
.setting-flex .label {
	flex: 2;
}
.setting-flex input {
	flex: 1;
}
.setting-profile {
	width: 40px;
	height: 40px;
	border-radius: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}
.settings {
	padding: 0px 25px;
}
.settings input {
	margin: 0px 0px;
	font-size: 13px;
	padding-left: 0px;
	padding-right: 0px;
}
.settings:nth-child(odd) {
	background-color: #eeeeee;
}
.settings:nth-child(even) {
	background-color: #e5e5e5;
}
.settings:hover {
	background-color: #f3f3f3;
}
.settings-disabled,
.settings-disabled .settings:hover,
.settings-disabled.setting-opt:nth-child(odd),
.settings-disabled.setting-opt:nth-child(even) {
	opacity: 0.5;
	background-color: transparent;
}
.settings-disabled input {
	background-color: transparent;
	border: none;
}
.settings-pad {
	padding-top: 10px;
	padding-bottom: 10px;
}
.settings-title {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	padding: 10px 0px;
	margin: 0px -20px 5px;
}
.settings-title .label {
	color: #ececec;
	padding-top: 5px;
}
.settings .label {
	font-size: 13px;
	color: #777;
}
.settings .label-sub {
	color: #bbb;
	font-size: 11px;
	letter-spacing: 0px;
	font-weight: 600;
}
.label.error {
	color: #cd7977;
	font-size: 10px;
	outline: none;
}
.settings-failed {
	color: #fff;
	font-size: 10px;
	font-weight: 400;
	text-align: center;
	background-color: #cd7977;
	padding: 10px;
	margin: 0px -20px 5px;
}
.settings-giftcard {
	color: #fff;
	font-size: 10px;
	font-weight: 400;
	text-align: center;
	background-color: rgba(1, 170, 190, 1.0);
	padding: 10px;
	margin: 0px -20px 5px;
}
.settings-disputed {
	color: #fff;
	font-size: 10px;
	font-weight: 400;
	text-align: center;
	background-color: #e29642;
	padding: 10px;
	margin: 0px -20px 5px;
}


/* Sales Listings */
.after5 {
	display: none;
}
.paid-cash,
.paid-credit,
.paid-check,
.paid-receipt {
	display: inline-block;
	height: 12px;
	vertical-align: middle;
	-webkit-filter: invert(100%) opacity(50%);
  filter: invert(100%) opacity(50%);
}
.paid-free {
	display: inline-block;
	height: 14px;
	vertical-align: middle;
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
}
.paid-text {
	display: inline-block;
	vertical-align: middle;
}
.paid-bank {
	display: inline-block;
	height: 12px;
	vertical-align: middle;
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
	margin-top: -2px;
}
.paid-receipt {
	display: inline-block;
	height: 19px;
	vertical-align: middle;
	-webkit-filter: opacity(50%);
	filter: opacity(50%);
}
.paid-balance {
	display: inline-block;
	height: 12px;
	vertical-align: middle;
	-webkit-filter: opacity(60%);
	filter: opacity(60%);
}
.pend-recur {
	display: inline-block;
	height: 12px;
	vertical-align: middle;
	-webkit-filter: opacity(30%);
	filter: opacity(30%);
	padding-left: 1px;
	margin-bottom: 0px;
}

/* Invoices */
.failed-invoices {
	width: 100%;
	background-color: rgba(150,0,0,0.5);
	margin-top: -20px;
	margin-bottom: 10px;
	color: #fff;
	font-weight: bold;
	padding: 20px;
	text-align: center;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.failed-desc {
	color: rgba(255,220,220,1.0);
	line-height: 22px;
}
.failed-total {
	width: 30%;
	color: rgba(255,220,220,1.0);
	font-size: 40px;
	line-height: 40px;
	font-weight: 400;
	text-align: center;
}

/* Chekcins */
.checkin-color {
	width: 12px;
	height: 51px;
	display: inline-block;
	vertical-align: middle;
}
table.list td .checkin-color {
	margin: -10px 0px;
}
.checkin-pass {
	display: inline-block;
	vertical-align: middle;
	height: 12px;
}
.checkin-pass-title {
	display: inline;;
	vertical-align: middle;
}
.checkin-container {
	text-align: center;
	margin-left: -10px;
	margin-right: -10px;
}
.checkin-profile {
	display: inline-block;
	margin-bottom: 12px;
}
.checkin-labels {
	display: inline-block;
	vertical-align: middle;
	padding: 0px 7px;
}
.checkin-profile-title {
	font-size: 14px;
}
.checkin-profile-name {
	font-size: 17px;
	font-weight: 600;
	color: #888;
}
.check-profile-circle {
	background-color: rgba(0,0,0,0.045);
  border-radius: 32px;
}
.check-profile-round {
	background-color: rgba(0,0,0,0.045);
  border-radius: 10px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.anim-jump {
  animation: bounce-in 0.7s;
}
@keyframes bounce-in {
  0% {
    transform: scale(1);
		background-color: transparent;
  }
  50% {
    transform: scale(1.1);
		background-color: rgba(0,150,0,0.2);
  }
  100% {
    transform: scale(1);
		background-color: transparent;
  }
}
.anim-delete {
  animation: bounce-out 0.7s;
}
@keyframes bounce-out {
	  0% {
	    transform: scale(1);
			background-color: transparent;
	  }
	  50% {
			background-color: rgba(150,0,0,0.2);
	  }
	  100% {
	    transform: scale(1.1);
			opacity: 0;
	  }
}

.anim-group-jump-item {
  transition: all 1s;
}
.anim-group-jump-enter-active {
  animation: bounce-in 0.7s;
}
.anim-group-jump-leave-active {
  animation: bounce-out 0.7s;
}

/* Checks */
.check-outer {
	background-color: #fff;
}
.check {
	display: inline-block;
	width: 900px;
	height: 410px;
	border-top: 20px solid #b9371e;
	margin: 60px 0px;
	position: relative;
}
.check-deposited {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
	font-size: 50px;
}
.check input {
	border: 0px solid transparent;
	background-color: transparent;
	margin: 0px;
	padding: 0px;
	color: #999;
	border-radius: 0px;
}
.check .tbl-cell {
	vertical-align: top;
}
.check-business {
	padding: 20px;
	display: inline-block;
}
.check-business .check-name {
	line-height: 20px;
	font-size: 20px;
	font-weight: 600;
	color: #444;
}
.check-business .check-address {
	line-height: 15px;
	font-size: 15px;
	padding-top: 5px;
	color: #444;
}
.check .check-num {
	float: right;
	display: inline-block;
	text-align: right;
	padding: 20px 20px 0px 0px;
	font-size: 23px;
	line-height: 23px;
	color: #666;
}
.check .check-date {
	max-width: 200px;
	margin-right: 150px;
	text-align: right;
	color: #999;
}
.check .check-date-input {
	color: #333;
	font-size: 30px;
	line-height: 30px;
	text-align: center;
	border-bottom: 1px solid #666;
}
.check-nameamount {
	width: 100%;
	margin-top: 25px;
}
.check-orderof {
	text-align: right;
	color: #999;
	line-height: 14px;
	font-size: 14px;
	padding-top: 10px;
}
.check .check-recipient {
	line-height: 40px;
	font-size: 40px;
	border-bottom: 1px solid #666;
	border-right: 1px solid #666;
	padding-left: 40px;
	color: #333;
}
.check-dollarsign {
	font-size: 40px;
	line-height: 40px;
	padding-left: 20px;
}
.check .check-amount {
	line-height: 40px;
	font-size: 40px;
	border: 1px solid #aaa;
	width: 190px;
	padding-left: 5px;
	color: #333;
}
.check-written {
	text-align: left;
	padding-top: 25px;
}
.check-written input {
	width: 720px;
	font-size: 26px;
	line-height: 26px;
	border-bottom: 1px solid #666;
	margin-left: 20px;
	margin-right: 10px;
	padding-left: 20px;
	color: #333;
}
.check-written img {
	display: inline-block;
	opacity: 0.6;
	margin-left: 20px;
}
.check-written span {
	display: inline-block;
	padding-top: 20px;
	color: #999;
}
.check-notesignature {
	margin-top: 35px;
}
.check .check-for {
	color: #999;
	line-height: 40px;
	padding-top: 15px;
	padding-left: 40px;
}
.check .check-note {
	color: #333;
	font-size: 20px;
	line-height: 20px;
	text-align: center;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #666;
	width: 280px;
	padding-top: 21px;
}
.check .check-signature {
	color: #333;
	font-size: 40px;
	line-height: 40px;
	text-align: center;
	border-bottom: 1px solid #666;
	margin-right: 40px;
	width: 350px;
	font-family: Snell Roundhand, cursive;
}
.check-signature-label {
	color: #999;
	text-align: right;
	margin-right: 40px;
}
@font-face {
  font-family: 'micr_encodingregular';
  src: url('fonts/micrenc-webfont.woff2') format('woff2'),
       url('fonts/micrenc-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
.tbl.check-micr {
	font-family: 'micr_encodingregular';
	font-size: 38px;
	font-weight: 800;
	width: auto;
	margin: 10px 0px 0px 60px;
	color: #000;
}
.tbl-cell.check-routing {
	white-space: nowrap;
}
.tbl-cell.check-account {
	white-space: nowrap;
	padding-left: 30px;
	padding-right: 3px;
}
.tbl-cell.check-routing input,
.tbl-cell.check-account input,
.tbl-cell.check-number input
 {
	display: inline;
	font-family: 'micr_encodingregular';
	font-size: 38px;
	font-weight: 800;
	color: #000;
}
.check-endorse {
	color: #aaa;
	width: 300px;
  margin-left: -50px;
  margin-top: 180px;
  transform: rotate(-90deg);
  /* Safari */
  -webkit-transform: rotate(-90deg);
  /* Firefox */
  -moz-transform: rotate(-90deg);
  /* IE */
  -ms-transform: rotate(-90deg);
  /* Opera */
  -o-transform: rotate(-90deg);
  /* Internet Explorer */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.check-endorse-signature {
	font-family: Snell Roundhand, cursive;
	font-size: 40px;
	line-height: 40px;
	height: 40px;
	border-bottom: 1px solid #333;
	width: 300px;
	display: inline-block;
	text-align: center;
	color: #333;
	margin-top: 20px;
}
@media print {
	div.check-outer {
		background-image: none;
	}
	.check {
		margin: 100px 0px 100px;
	}
}

/* Timesheets */
.clock {
	display: inline-block;
	text-align: right;
}
.clock select {
  width: 125px;
}
@media only screen and (min-width: 600px) {
	.clock {
	  position: absolute;
	  top: -11px;
	  right: 20px;
	}
}
.clock input {
	width: 150px;
	margin: 0px;
    padding-right: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
.clock button {
	margin: 0px;
	vertical-align: middle;
	height: 40px;
}
input.clock-title {
	width: 125px;
	padding: 10px 5px 10px 10px;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	color: #777;
	line-height: 16px;
	margin: 0px;
	background-color: transparent;
	border: 1px transparent solid;
	min-width: 100px;
}
.clock-title:hover {
	background-color: #fff;
	border: 1px #fff solid
}
.clock-title:focus {
	background-color: #fff;
	border: 1px #dadada solid;
}
.clock-time {
	display: inline-block;
	vertical-align: middle;
	font-size: 30px;
	font-weight: 200;
	line-height: 40px;
	padding: 0px 7px;
}
button .clock-time {
	text-align: center;
	font-size: 20px;
	width: 80px;
	padding: 0px;
}
.timeclock-profile {
	display: inline-block;
	vertical-align: middle;
}
.timeclock-hide {
	display: none;
}
table.list tr.timeclock:hover {
	background-color: #fff;
}
.timeclock {
	color: #555;
}
table.list tr.timeclock-active {
	background-color: rgba(247,229,141,0.4);
}
.timeclock input {
	width: 45px;
	margin-top: 6px;
	text-align: center;
	margin: 0px;
	padding: 5px 0px;
	background-color: transparent;
	border-width: 0px;
	vertical-align: middle;
}
.timeclock input:focus {
	background-color: #fff;
}
.timeclock select {
	width: 40px;
	margin: 0px;
}
.timeclock span {
	vertical-align: middle;
}
.timeclock .time-edit {
	width: 100px;
}
.timeclock .time-staff {
	padding-left: 10px;
}
.timeclock .time-duration {
	font-size: 22px;
	color: #555;
}
.timeclock .time-interval {
	font-size: 13px;
	color: #555;
	white-space: nowrap;
}
.timeclock .time-interval span {
	display: inline-block;
}
.timeclock .close {
	float: none;
}
.time-mod {
	display: none;
}
.timeclock .time-title {
	width: 100px;
}
.timeclock .time-mod-date {
	width: 70px;
}
.clock-list {
	border-top: 6px solid #f6f6f6;
	border-bottom: 6px solid #f6f6f6;
}
.clock-list td {
	font-weight: 600;
	background-color: #5d45a2;
  color: #f9f9f9;
	font-size: 16px;
	cursor: pointer;
}
.clock-list .clock-total {
	color: #aaa;
	font-weight: 400;
}
.clock-list .package-list-count {
	float: none;
	display: inline-block;
}
.clock-fingerprint {
	display: inline-block;
	opacity: 0.7;
	width: 150px;
	padding: 10px 0px 5px;
}
.clock-text {
	color: #333;
	font-size: 23px;
	font-weight: 400;
	line-height: 36px;
	text-align: center;
	padding: 0px 0px;
	margin: 0px -20px;
	overflow-wrap: break-word;
}



/* Tags */
.tag-item {
	background-color: rgba(255,255,255,0.2);
	color: #eee;
	padding: 7px 10px;
	margin: 8px 5px 5px;
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	cursor: pointer;

	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.tag-profile {
	background-color: rgba(255,255,255,0.2);
	color: #eee;
	margin: 5px;
	display: inline-block;
	vertical-align: top;
	text-align: left;
	cursor: pointer;

	border-radius: 21px;
	-moz-border-radius: 21px;
	-webkit-border-radius: 21px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.task-box .tag-profile {
	background-color: rgba(0,0,0,0.2);
}
.tag-profile .close {
	line-height: 36px;
	cursor: pointer;
	padding: 0px 10px 0px 5px;
	display: none;
	color: #ddd;
	float: none;
	vertical-align: middle;
}
.tasks-menu .tag-profile .close {
	display: inline-block;
}
.task-tags .tag-profile .task-profile {
	margin: 0px;
}
.task-section {
	position: relative;
	padding-bottom: 46px;
}
.task-tags {
	position: absolute;
	vertical-align: bottom;
	bottom: auto;
  right: 15px;
  top: 20px;
}
.task-followers {
	position: absolute;
	vertical-align: bottom;
	bottom: 0px;
	right: 0px;
}
.task-tags .tag-item .close,
.task-followers .tag-profile .close {
	margin-left: 5px;
	color: #fff;
	opacity: 0.5;
	display: none;
}
.tag-item:hover .close,
.tag-profile:hover .close {
	display: inline-block;
}
.task-tags .tag-item .close:hover,
.tag-profile .close:hover {
	opacity: 1;
	color: #fff;
}
.input-list {
	width: 120px;
	float: right;
	margin-top: 5px;
	margin-bottom: 0px;
}
.dropdown-item {
	overflow-x: hidden;
}


/* Location Map */
.location-nav {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 30;
	margin-top: 20px;
	margin-right: 20px;
	width: 30px;
	cursor: pointer;
}
.location-nav img {
	width: 100%;
}
.location-info {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 30;
	margin-bottom: 20px;
	pointer-events: none;
}
.location-info-box {
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	padding: 20px;
	border-radius: 10px;
	display: inline-block;
	pointer-events: auto;
}
.location-title {
	font-size: 24px;
	line-height: 24px;
	padding-bottom: 10px;
}
.location-text {
  -webkit-user-select: text; /* Chrome/Safari */
	-khtml-user-select: text;
  -moz-user-select: text; /* Firefox */
  -ms-user-select: text; /* IE10+ */
	/* Not implemented in browsers yet */
	-o-user-select: text;
	user-select: text;
}


/* Drop Down Menu */
.dropdown-action {
	display: none;
}


/* Arrows */
.arrow {
	display: inline-block;
	opacity: 0.2;
	margin: 5px 7px;
}
.arrow:hover {
	opacity: 1.0;
}
.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right:10px solid black;
}
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left:10px solid black;
}


/* Tasks */
.task {
	display: inline-block;
}
.task-note {
  z-index: 1;
	position: relative;
	background-color: #f0f0f0;
	vertical-align: top;
	width: 200px;
	height: 170px;
	margin: 5px 5px 5px;
	cursor: pointer;
  white-space: normal;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;

	webkit-box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.19);
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.19);
}
.task-ghost {
	background-color: #bbb;
}
.task-ghost > div {
	visibility: hidden;
}
.task-closed {
	webkit-box-shadow: 0 0 2px rgba(0,0,0,0.12);
  box-shadow: 0 0 2px rgba(0,0,0,0.12);
}
.task-closed:hover {
	webkit-box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.19);
  box-shadow: 0 0 2px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.19);
}
.task-create {
	width: 80px;
	margin-left: 20px;
	background-color: rgba(230,230,230,1);
}
.task-orgs {
	width: 10px;
}
.task .task-content {
	vertical-align: top;
	position: relative;
}
.task-due-option {
	text-align: right;
	display: block;
}
input.pop-task-due-inputs {
	display: none;
	margin-bottom: 0px;
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
}
.pop-task-due-select {
	float: right;
	height: 38px;
	font-size: 12px;
	text-align: right;
	line-height: 35px;
	white-space: nowrap;
}
.task-top {
	position: absolute;
  top: 0px;
  left: 0px;
	width: 100%;
	text-align: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	color: #fff;
	font-size: 10px;
	line-height: 10px;
	padding: 3px 0px;
  height: 16px;
  box-sizing: border-box;
	z-index: 10;
}
.task-due {
	background-color: rgba(229,191,84,1.0);/* yellow */
}
.task-due-today {
	background-color: rgba(224,165,111,1.0);/* orange */
}
.task-due-past {
	background-color: rgba(183,130,131,1.0);/* red */
}
.task-done {
	background-color: rgba(119,187,119,1.0);/* green */
}
.task-text {
	margin: 0px;
	padding: 15px 5px 0px 10px;
	font-size: 14px;
	line-height: 24px;
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 170px;
	background-color: transparent;
	border: 0px;
	color: inherit;
	resize: none;
	cursor: pointer;
	box-sizing: border-box;
	overflow: hidden;
	/* a long word (a domain, a link) wraps inside the note instead of running off its edge */
	overflow-wrap: anywhere;
	word-break: break-word;
}
.task-label {
	padding: 15px 5px 10px 10px;
	font-size: 14px;
	line-height: 24px;
}
.task-action {
	z-index: 11;
	display: none;
	width: 40px;
	height: 40px;
	position: absolute;
	top: -5px;
	right: -5px;
	text-align: center;
	background-color: #eee;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 10px;
	border-radius: 100%;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
.task-action img {
	display: inline-block;
	max-width: 45px;
	max-height: 18px;
	padding: 5px 10px;
	margin: 5px 2px;
	opacity: 0.2;
}
.task-action:hover {
	background-color: rgba(100,230,100,1);
}
.task-action:hover img {
	opacity: 1.0;
}
.task-action-drag {
	right: auto;
	left: -5px;
	cursor: grab;
}
.task-action-drag:hover {
	background-color: rgba(51,207,238,1);
}
.task-action-drag:active {
	cursor: grabbing;
}
.task:hover .task-action {
	display: block;
	opacity: 1;
}

.task-create .task-label {
	display: none;
	color: #999;
	font-size: 16px;
	text-align: center;
	padding: 0px 0px 0px;
}
.task-plus {
  color: #ccc;
  font-size: 100px;
  text-align: center;
  margin-top: 70px;
  margin-bottom: 25px;
}
.task-create:hover {
	width: 120px;
	background-color: #f0f0f0;
}
.task-create:hover .task-label {
	color: #999;
	display: block;
}
.task-create:hover .task-plus {
	color: #999;
}

.task-timesheets {
}
.task-timesheets .task-clock {
	position: absolute;
	top: -56px;
	right: 20px;
	padding: 7px;
	background-color: #f3f3f3;
	box-sizing: border-box;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	white-space: nowrap;
}
.task-clock .clock-time {
	line-height: 30px;
	text-align: center;
}
.task-clock .clock-time > div {
	font-size: 12px;
	line-height: 12px;
	color: #666;
}
.task-clock input {
	line-height: 20px;
	padding-right: 0px;
}
.task-clock .task-profile {
	width: 42px;
	height: 42px;
}
.task-timesheets .task-clock > button {
	width: 42px;
	height: 42px;
}
.task-clock .task-profile button {
	display: none;
}
.task-clock:hover > button {
	display: inline-block;
}
.task-clock:hover > button img {
	width: 19px;
	height: 19px;
}
.task-timesheets input {
	width: 140px;
  margin: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
  background: none;
  border: none;
	min-width: 140px;
}
.task-timesheets .task-stop input {
	min-width: 50px;
}
.task-timesheets input:hover {
	background-color: #fff;
	border: 0px;
}
.task-timesheets input:focus {
	background-color: #fff;
	border: 0px;
}
.task-timesheets .clock-start,
.task-timesheets .clock-stop {
	margin: 0px;
	vertical-align: middle;
	width: 36px;
	height: 36px;
	border-radius: 100%;
	background: none;
	border: none;
	box-shadow: none;
	position: relative;
}
.task-timesheets .clock-start {
	background-color: rgba(152, 120, 183, 0.8);
}
.task-timesheets .clock-stop {
	background-color: rgba(187,86,88,0.8);
}
.task-timesheets button img {
	opacity: 0.4;
	width: 16px;
	height: 16px;
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.task-timesheets .clock-stop:hover {
	background-color: rgba(187,86,88,1.0);
}
.task-timesheets .clock-start:hover {
	background-color: rgba(152, 120, 183, 1.0);
}
.task-timesheets button:hover img {
	opacity: 0.7;
}
.task-timesheets .clock-item {
	display: flex;
	margin: 10px 0px 0px;
	align-items:center;
}
.task-timesheets .clock-item:hover {
	background-color: rgba(247,229,141,0.4);
}
.clock-item .clock-item-profile {
	flex: 0;
}
.clock-item input {
	flex: 2;
	background-color: transparent;
	color: #444;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.clock-item input:hover {
	background-color: rgba(255,255,255,0.7);
}
.clock-item input:focus {
	background-color: rgba(255,255,255,1);
}
.clock-item .clock-dates {
	flex: 1;
	white-space: nowrap;
	font-size: 12px;
	line-height: 16px;
  text-align: center;
}
.clock-item .clock-time {
	flex: 2;
	white-space: nowrap;
	text-align: center;
}
.clock-item .clock-action {
	min-width: 40px;
	flex: 0;
	white-space: nowrap;
	text-align: right;
}
.clock-item .close {
	flex: 0;
	margin: 0px 0px 0px 5px;
}

.task-subtasks {

}
.subtasks-progress-bar {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 100%;
	height: 10px;
	background-color: #bbb;
	text-align: left;
	overflow: hidden;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.subtasks-progress-bar div {
	height: 100%;
	border-radius: 5px;
	background-color: #49864a;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}
.subtasks-header {
	display: flex;
}
.subtasks-header button {
	border: 0px solid #fff;
	background: none;
	box-shadow: none;
	color: #999;
	white-space: nowrap;
}
.subtasks-header .subtasks-progress {
	width: 100%;
	margin: 15px 10px;
	height: 6px;
	border-radius: 3px;
	background-color: #bbb;
	text-align: left;
	overflow: hidden;
}
.subtasks-header .subtasks-progress div {
	height: 100%;
	border-radius: 3px;
	background-color: #49864a;
  -webkit-transition: width 1s ease-in-out;
  -moz-transition: width 1s ease-in-out;
  -o-transition: width 1s ease-in-out;
  transition: width 1s ease-in-out;
}
.subtasks-header .subtasks-percent {
	line-height: 36px;
	font-size: 12px;
  min-width: 36px;
  text-align: right;
}
.subtask-item {
	display: flex;
	align-items: flex-start;
	margin: 0px 0px 0px;
	padding: 0px;
	background-color: #f3f3f3
}
/* The drag handle (the checkbox only checks) */
.subtask-grip {
	flex: 0 0 14px;
	padding: 9px 0px 9px 4px;
	color: rgba(0,0,0,0.2);
	font-size: 12px;
	letter-spacing: -3px;
	line-height: 18px;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}
.subtask-grip:hover {
	color: rgba(0,0,0,0.5);
}
/* A finger-sized tap area around the checkbox */
.subtask-check {
	flex: 0 0 auto;
	padding: 7px 8px 7px 4px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.subtask-check:hover .subtask-checkbox {
	background-color: #bbb;
}
.subtask-duplicate {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 11px 2px 0px 6px;
	cursor: pointer;
	opacity: 0.35;
}
.subtask-duplicate:hover {
	opacity: 0.7;
}
.subtask-duplicate img {
	width: 15px;
	height: 15px;
}
.subtask-ghost {
	background-color: #ddd;
	border-radius: 5px;
}
.subtask-ghost > div,
.subtask-ghost > textarea {
	visibility: hidden;
}
.subtask-checkbox {
	display: block;
	width: 18px;
	height: 18px;
	box-sizing: border-box;
	border: 2px solid #999;
	margin: 0px;
}
.subtask-text {
	flex-grow: 5;
	color: #444;
	border: 0px solid #fff;
	background-color: transparent;
	padding: 9px 10px;
	margin: 0px;
}
.subtask-actions {
	color: rgba(0,0,0,0.2);
	font-size: 30px;
	font-weight: 800;
	cursor: pointer;
	padding: 5px 0px 5px 5px
}
.subtask-actions:hover {
	color: rgba(0,0,0,0.5);
}
.subtask-text:hover {
	background-color: rgba(255,255,255,0.7);
}
.subtask-text:focus {
	background-color: rgba(255,255,255,1);
}
.subtask-done .subtask-checkbox,
.subtask-done .subtask-check:hover .subtask-checkbox {
	background-color: #999;
}
.subtask-done .subtask-text {
	color: #777;
	text-decoration: line-through;
}

.task-group {
	padding: 50px 0px 10px 0px;
}
.task-group-extra {
	display: inline-block;
	background-color: #eee;
	border-radius: 10px;
	cursor: pointer;
}
.task-group-extra .tasks-count {
	display: inline-block;
	padding: 15px 10px;
	margin: 0px 10px;
	vertical-align: middle;
	flex: 1;
	text-align: center;
	border-bottom: 3px solid transparent;
	position: relative;
}
.task-count-indicator {
	display: inline-block;
	position: absolute;
  top: 54%;
  left: 54%;
	color: #eee;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	letter-spacing: -0.5px;
	height: 18px;
	width: 18px;
	border-radius: 100%;
	background-color: #999;
}
.task-extras .task-count-indicator {
  top: 68%;
  left: 60%;
}
.extras-mini .task-count-indicator {
	top: 60%;
}
.task-today-due {
	background-color: #d08a4b;
}
.task-past-due {
	background-color: #b5696a;
}
.task-group-extra .tasks-count img {
	opacity: 0.2;
	height: 21px;
	display: inline-block;
	vertical-align: bottom;
}
.task-group-extra:hover {
	background-color: #f7f7f7;
}
.task-group-extra:hover .tasks-count {
	border-bottom: 3px solid #bbb;
}
.task-group-extra .tasks-count-sel img {
	opacity: 0.5;
}
.task-group-extra .tasks-count-sel,
.task-group-extra .tasks-count-sel:hover  {
	border-bottom: 3px solid #888;
}
.task-group-viewer {
	display: inline-block;
	width: 100%;
	max-width: 500px;
	vertical-align: top;
}
.task-group-button {
	display: inline-block;
	vertical-align: top;
}
.task-group-title {
	display: flex;
	max-width: 500px;
	margin: 0px 0px 20px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	background-color: #eee;
  padding-right: 8px;
	gap: 20px;
}
.task-group-bar {
	display: inline-block;
	width: 10px;
	position: relative;
}
.task-group-bar input {
	position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  border: none;
  opacity: 0;
}
.task-group-title .task-profile {
  width: 54px;
  height: 54px;
}
.task-group-title img {
	display: inline-block;
	max-width: 100px;
	max-height: 54px;
	vertical-align: middle;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}
.task-group-title span {
	color: #666;
	font-size: 20px;
	vertical-align: middle;
	line-height: 34px;
}
.task-name {
	display: inline-block;
	width: auto;
	min-width: 54px;
	margin: 10px 0px 10px;
	padding: 0px;
	color: #666;
	font-size: 20px;
	font-family: Arial;
	font-weight: 570;
	background-color: transparent;
	border: none;
}
.task-name::placeholder {/* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #aaa;
  opacity: 1; /* Firefox */
}
.task-name::-ms-input-placeholder {/* Internet Explorer 10-11 */
  color: #aaa;
  opacity: 1; /* Firefox */
}
.task-name::-ms-input-placeholder {/* Microsoft Edge */
  color: #aaa;
  opacity: 1; /* Firefox */
}
.task-group-title .tasks-count {
	display: inline-block;
	padding: 15px 0px;
	vertical-align: middle;
	cursor: pointer;
	flex: 1;
	text-align: center;
}
.task-group-title .tasks-count span {
	opacity: 0.2;
	font-size: 20px;
	line-height: 15px;
	display: inline-block;
	vertical-align: bottom;
}
.task-group-title .tasks-count img {
	opacity: 0.2;
	height: 21px;
	display: inline-block;
	vertical-align: bottom;
}
.task-group-title .tasks-count-sel img {
	opacity: 0.5;
}
.task-group-title .tasks-count:hover {
	background-color: rgba(255,255,255,0.5);
	border-bottom: 3px solid #bbb;
}
.task-group-title .tasks-count-sel,
.task-group-title .tasks-count-sel:hover  {
	border-bottom: 3px solid #888;
}
.task-category {
	display: block;
	color: #888;
	font-size: 12px;
	line-height: 12px;
	letter-spacing: 1px;
	margin: 10px 0px 0px;
	padding: 0px 0px 0px 20px;
	border-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
.task-category div {
	display: inline-block;
}
.task-category img {
  opacity: 0.2;
  height: 21px;
	margin: 0px 12px;
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}
.task-category img:hover {
  opacity: 0.4;
}
.task-category .task-tag {
	display: inline-block;
  background-color: #aaa;
	vertical-align: middle;
  color: #eee;
  padding: 0px 8px 0px 0px;
  margin: 0px 5px 0px;
  text-align: left;
	font-size: 12px;
	line-height: 22px;
  border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
	white-space: nowrap;
}
.task-tag span {
	display: inline-block;
	padding: 0px 8px;
  background-color: rgb(0, 0, 0, 0.15);
  border-radius: 14px;
	letter-spacing: 0px;
	position: relative;
}
.task-tag span input {
	position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  border: none;
  opacity: 0;
}
.task-tag input {
	display: inline-block;
  width: auto;
  font-size: 12px;
  line-height: 22px;
  padding: 0px;
  margin: 0px;
  border-radius: 0px;
  border: 0px;
  background-color: transparent;
  color: #eee;
  letter-spacing: 1px;
}
.tasks-bg {
	background-color: #d5d5d5;
	margin-top: 0px;
}
.tasks-list {
	width: auto;
  overflow-x: scroll;
  overflow-y: visible;
  white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
.tasks-list::-webkit-scrollbar {
  display: none;
}
.task-indicator {
	height: 100%;
}
.task-indicator .tbl-cell {
	z-index: 10;
}
.task-indicator-top {
  -webkit-border-top-left-radius: 10px;
  -moz-border-radius-topleft: 10px;
  border-top-left-radius: 10px;
}
.task-indicator-bot {
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-bottom-left-radius: 10px;
}
.task-profiles {
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 0px 5px 10px;
	text-align: right;
	display: block;
	box-sizing: border-box;
}
.task-profile {
	width: 36px;
	height: 36px;
	margin-right: 0px;
  display: inline-block;
  vertical-align: middle;
  background-color: #bbb;
  position: relative;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
}
.task-profile-mini {
	width: 28px;
	height: 28px;
	margin-right: 5px;
	vertical-align: middle;
}
.task-assigned {
	box-shadow: 0px 0px 0px 4px #969696;
}
.task-profile-mini.task-assigned {
	box-shadow: 0px 0px 0px 2px #969696;
}
.task-details {
	font-size: 12px;
	line-height: 15px;
}

/* Mini Activity Feed */
.mini-activity {
	margin: 30px 0px 10px;
    font-size: 12px;
    line-height: 18px;
}
.mini-activity .mini-activity-item {
	padding: 5px 0px 5px 10px;
	margin: 0px 0px 0px -10px;
}
.mini-activity .mini-activity-item:hover {
	background-color: rgba(255,255,255,0.5);
}
.mini-activity .mini-activity-item > div,
.mini-activity .mini-activity-item > a,
.mini-activity .mini-activity-item span {
	display: inline-block;
	vertical-align: middle;
}
.mini-activity-icon {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	margin: 0px;
	vertical-align: middle;
	position: relative;
	-webkit-filter: invert(100%);
	filter: invert(100%);
	opacity: 0.6;
	margin: 0px 5px 0px 0px;
}
.mini-activity-icon img {
	width: 50%;
	height: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.mini-activity-by {
	padding: 0px 0px 0px 20px;
}
.mini-activity-profile img {
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	vertical-align: middle;
	margin: 0px 0px 0px 5px;
}
.mini-activity-ago {
	padding: 0px 0px 0px 20px;
}
.mini-activity-sub {
	padding: 5px 0px 5px 18px;
	position: relative;
}
.mini-activity-sub > div,
.mini-activity-sub > a,
.mini-activity-sub span {
	display: inline-block;
	vertical-align: middle;
}
.mini-activity-sub-line {
	position: absolute;
    top: -3px;
    left: 25px;
    width: 1px;
    height: 7px;
	background-color: #bbb;
}


/* Vue.js Tasks */
.task-fade {
	background-color: rgba(0,0,50,0.4);
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 60;
	overflow-x: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.task-pad {
	padding: 20px;
	top: 180px;
  max-width: 560px;
  min-width: 370px;

  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  -moz-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
}
.task-box {
	width: 100%;
  background-color: #f3f3f3;
  color: #999;
  padding: 30px 15px 5px 25px;
  display: inline-block;
  vertical-align: top;
  text-align: left;
	margin-bottom: 100px;
	position: relative;

  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;

  box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
  -moz-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
  -webkit-box-shadow: 0px 0px 40px rgba(0,0,0,0.7);
}
.task-padding {
	position: relative;
	padding-bottom: 46px;
}
.task-title textarea,
.task-details textarea,
.comment-input textarea {
	background-color: transparent;
	border: 0px solid #fff;
  color: #444;
  font-size: 14px;
  line-height: 24px;
  resize: none;
	overflow: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.task-title {
	font-size: 16px;
	font-weight: 900;
	margin: 20px 0px 10px;
}
.task-title textarea:hover,
.task-details textarea:hover,
.comment-input textarea:hover {
	background-color: rgba(255,255,255,0.7);
}
.task-title textarea:focus,
.task-details textarea:focus,
.comment-input textarea:focus {
	background-color: rgba(255,255,255,1);
}
.task-button,
.datetime-picker input {
	color: #444;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	font-size: 12px;
	margin-bottom: 10px;
	padding-left: 0px;
	padding-right: 0px;
}
.task-input {
	display: inline-block;
	position: relative;
    vertical-align: middle;
}
.task-input label {
	font-size: 16px;
	font-weight: 800;
	display: block;
	color: #fff;
	width: 31px;
	height: 36px;
	line-height: 36px;
	text-align: center;
	vertical-align: top;
	margin-bottom: 10px;
	border-right: 0px;
	background-color: rgba(0,0,0,0.2);
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.task-input label img {
	width: auto;
	height: auto;
	max-width: 16px;
	max-height: 16px;
	padding: 0px;
	opacity: 0.6;

  position: absolute;
  top: 0;
  bottom: 0;
	left: 0;
	right: 0;
  margin: auto;
}
.task-box .task-input label img {
	opacity: 1.0;
}
.task-input label:hover {
	background-color: rgba(0,0,0,0.3);
}
.task-input label:hover img {
	opacity: 0.9;
}
.task-input input {
	width: 100px;
	border: solid 0px #000;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}
.task-input-due input {
	color: #fff;
	background-color: #e5bf54;/* yellow */
}
.task-input.task-input-due label {
	background-color: #ddab20;/* darker yellow */
}
.task-input-due-today input {
	color: #fff;
	background-color: #eba666;/* orange */
}
.task-input.task-input-due-today label {
	background-color: #e6852c;/* darker orange */
}
.task-input-due-past input {
	color: #fff;
	background-color: #b78283;/* red */
}
.task-input.task-input-due-past label {
	background-color: #bb5658;/* darker red */
}
.task-input-done input {
	color: #fff;
	background-color: #77bb77;/* green */
}
.task-input.task-input-done label {
	background-color: #5faa5f;/* darker green */
}
.task-more-btn.btn-small.btn-long {
	margin: 0px 0px 0px;
  border: 0px;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
  color: #bbb;
}
.task-more-btn.btn-small.btn-long:hover {
	color: #999;
  background-color: #ddd;
}
.task-expand {
	padding: 20px 40px 10px;
	font-size: 14px;
}
.task-expand .tbl-cell {
	padding: 5px 0px;
}
/* For tablets */
@media only screen and (min-width: 600px) {
	.task-pad {
		width: 100%;
	}
}

/* Task Extras - bottom left */
.task-extras {
	position: absolute;
	bottom: 5px;
	left: 5px;
	display: flex;
	gap: 10px;
}
.extra-pill {
  height: 36px;
	color: #fff;
	font-size: 12px;
	line-height: 36px;
	text-align: right;
	background-color: #d5d5d5;
	border-radius: 18px;
	white-space: nowrap;
	display: flex;
	cursor: pointer;
}
.extra-pill-sel {
	background-color: #bbb;
}
.extra-pill span {
	vertical-align: top;
  padding: 0px 8px 0px 3px;
}
.extra-icon {
	display: inline-block;
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 100%;
	background-color: #bbb;
}
.extra-icon img {
	width: auto;
	height: auto;
	max-width: 16px;
	max-height: 16px;
	padding: 0px;

  position: absolute;
  top: 0;
  bottom: 0;
	left: 0;
	right: 0;
  margin: auto;
}
.extra-comments {
	background-color: rgba(120, 136, 183, 0.7);
}
.extra-comments .extra-icon,
.extra-comments.extra-pill-sel {
	background-color: rgb(120, 136, 183);
}
.extra-subtasks {
	background-color: rgba(118, 168, 118, 0.7);
}
.extra-subtasks .extra-icon,
.extra-subtasks.extra-pill-sel {
	background-color: rgb(118, 168, 118);
}
.extra-timesheets {
	background-color: rgba(152, 120, 183, 0.7);
}
.extra-timesheets .extra-icon,
.extra-timesheets.extra-pill-sel {
	background-color: rgb(152, 120, 183);
}
.extras-mini {
	bottom: 10px;
	left: 10px;
	gap: 5px;
}
.extras-mini .extra-pill {
  height: 20px;
	line-height: 20px;
}
.extras-mini .extra-pill span {
	letter-spacing: -0.5px;
}
.extras-mini .extra-icon {
	width: 20px;
	height: 20px;
}
.extras-mini .extra-icon img {
	max-width: 10px;
	max-height: 10px;
	opacity: 0.8;
}

/* Task Comments */
.comment-input {
	position: relative;
}
.comment-input textarea {
	font-size: 13px;
  margin: 10px 0px 0px;
}
.comment-input button {
	position: absolute;
	bottom: -24px;
	right: 5px;
	color: #eee;
	background: none;
	background-color: #76ab88;
	text-shadow: none;
	border: 0px solid #fff;
	box-shadow: none;
	margin: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
  z-index: 1;
}
.comment-input button:hover {
	background-color: #5faa79;
	color: #fff;
}
.comment-item {
	position: relative;
	margin: 10px 0px 0px;
	text-align: right;
}
.comment-card {
	display: inline-block;
	width: auto;
	padding: 10px 15px;
	margin: 14px 14px 0px;
	border-radius: 5px;
	border: 0px;
	color: #fff;
	font-size: 14px;
	text-align: left;
	background-color: #ccc;
  white-space: pre-wrap;
  font: 400 14px system-ui;
	line-height: 21px;
}
.comment-date {
	position: absolute;
	right: 34px;
	top: 0px;
	color: #aaa;
	font-size: 11px;
	line-height: 11px
}
.comment-profile {
	width: 30px;
	height: 30px;
  opacity: 0.9;
	position: absolute;
	right: 0px;
	top: 0px;

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  background-position: center;
}
.comment-self {
	text-align: left;
}
.comment-self .comment-card {
	background-color: #bbb;
}
.comment-self .comment-date {
	right: auto;
	left: 34px;
}
.comment-self .comment-profile {
	right: auto;
	left: 0px;
}

.member-class {
	padding-left: 5px;
	color: #999;
}
.member-group {
	padding-left: 5px;
	color: #999;
}
.member-group span {
	display: inline-block;
	color: #f4f4f4;
	background-color: rgba(0,0,0,0.3);
	width: 16px;
	height: 16px;
	border-radius: 100%;
	font-size: 10px;
	line-height: 16px;
	text-align: center;
}
.mgroup-item {
	background-color: rgba(0,0,0,0.4);
	color: #eee;
	padding: 7px 10px;
	margin: 8px 8px 0px 0px;
	display: inline-block;
	text-align: left;
	vertical-align: middle;
	cursor: pointer;
	position: relative;

	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.mgroup-item .close {
	display: none;
	padding: 3px;
    font-size: 24px;
    font-weight: 800;
    float: right;
	line-height: 12px;
	position: absolute;
    right: -12px;
    top: -12px;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 10px;
    border-radius: 100%;
}
.mgroup-item:hover .close {
	display: inline-block;
}
.mgroup-item:hover .close:hover {
	color: white;
}
.task-groups {
	min-width: 10px;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
}
.group-item {
	flex: 1;
}
.group-item:first-child {
	border-top-left-radius: 10px;
}
.group-item:last-child {
	border-bottom-left-radius: 10px;
}
.group-item .close {
	display: none;
	padding: 3px;
}
.group-item:hover .close {
	display: inline-block;
}

/* Task Menu Input */
.tasks-menu-fade {
	z-index: 49;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255,255,255,0);
}
.tasks-menu {
	background-color: rgba(213,213,213,1);
	padding: 0px 20px;
	text-align: left;
	width: 100%;
	color: #bbb;
	z-index: 59;
	box-sizing: border-box;
	width: 100%;
	transition: background-color 0.1s;
	position: fixed;
	opacity: 0.7;
}
.tasks-menu:hover {
	opacity: 1.0;
	background-color: #443287;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
}
@media only screen and (min-width: 768px) {
	.tasks-menu {
	  width: calc(100% - 170px);
	}
}
.tasks-menu-label {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	margin-right: 8px;
    color: #aaaaaa;
    font-weight: bold;
}
.tasks-menu .tasks-menu-pill {
	border-width: 0px;
	box-shadow: none;
	background: none;
	background-color: rgba(0,0,0,0.2);
	color: #b6b6b6;
	margin: 0px;
}
.tasks-menu .tasks-menu-pill:hover {
	background-color: rgba(0,0,0,0.3);
	color: #fff;
}
.tasks-menu .tag-profile {
	vertical-align: middle;
}
.tbl.tasks-menu-input {
	width: auto;
	display: inline-block;
	vertical-align: middle;
}
.tasks-menu-input label,
.tasks-menu-input input {
	margin-bottom: 0px;
}
.tasks-menu-input label {
	cursor: pointer;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
	position: relative;
}
.tasks-menu-input-sel label {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.task-input-due.tasks-menu-input-sel input {
  min-width: 150px;
}


/* Popup Chats */
.chat-modal {
	position: fixed;
	bottom: 10px;
	right: 30px;
	z-index: 40;
	text-align: right;
	max-width: 340px;
	width: 100%;
	margin-bottom: 10px;
	border-radius: 15px;

  box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
  -moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
  -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.4);
}
.chats-scroll {
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: scroll;
	padding: 10px 19px 0px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: rgba(100,100,150,1);
}
.chat-none {
  padding-bottom: 10px;
  color: #ccc;
  text-align: center;
}
.chat-item {
	position: relative;
	padding: 0px 0px 10px;
}
.chat-card {
	display: inline-block;
	width: auto;
	padding: 10px 15px;
	margin: 0px 0px 14px;
	border-radius: 5px;
	border: 0px;
	color: #fff;
	font-size: 14px;
	text-align: left;
	background-color: rgba(68,50,135,1.0);
  white-space: pre-wrap;
  font: 400 14px system-ui;
	line-height: 21px;
  box-shadow: 0px 5px 7px rgba(0,0,0,0.2);
  -moz-box-shadow: 0px 5px 7px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0px 5px 7px rgba(0,0,0,0.2);
}
.chat-date {
	position: absolute;
	right: 17px;
	bottom: 6px;
	color: #aaa;
	font-size: 11px;
}
.chat-profile {
	width: 30px;
	height: 30px;
  opacity: 0.9;
	position: absolute;
	right: -14px;
	bottom: 10px;

  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;

  background-position: center;
}
.chat-self {
	text-align: left;
}
.chat-self .chat-card {
	background-color: rgba(93,69,162,1.0);
}
.chat-self .chat-date {
	right: auto;
	left: 17px;
}
.chat-self .chat-profile {
	right: auto;
	left: -14px;
}
.chat-input,
.chat-input .tbl-row  {
	height: 100%;
}
.chat-input textarea {
	font-size: 14px;
	line-height: 21px;
	margin-bottom: 0px;
	padding: 8px 0px 8px 10px;
  resize: none;
	border: 0px solid #fff;
	border-radius: 0px;
	border-bottom-left-radius: 15px;
}
.chat-input button {
	height: 100%;
	margin: 0px;
  color: #eee;
  background: none;
  background-color: #aaa;
  text-shadow: none;
  border: 0px solid #fff;
	border-radius: 0px;
	border-bottom-right-radius: 15px;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}
.chat-input button:hover,
.chat-input button:focus {
	background-color: #999;
	color: #fff;
}
.chat-close {
	top: -14px;
	right: -14px;
	position: absolute;
	z-index: 41;
	text-align: center;
	color: #ccc;
	display: inline-block;
	font-weight: bold;
	font-size: 28px;
	line-height: 32px;
	width: 32px;
	height: 32px;
	border-radius: 100%;
	cursor: pointer;
	background: linear-gradient(#5d45a2, #443287);
	background: -o-linear-gradient(#5d45a2, #443287);
	background: -moz-linear-gradient(#5d45a2, #443287);
	background: -webkit-linear-gradient(#5d45a2, #443287);
  box-shadow: 0px 5px 7px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 5px 7px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0px 5px 7px rgba(0,0,0,0.4);
}
.chat-close:hover {
	color: #eee;
}
.chat-toggle {
	z-index: 40;
	bottom: 10px;
	right: 30px;
	position: fixed;
	display: inline-block;
	width: 64px;
	height: 64px;
	border-radius: 100%;
	vertical-align: middle;
	cursor: pointer;
	background: linear-gradient(#5d45a2, #443287);
	background: -o-linear-gradient(#5d45a2, #443287);
	background: -moz-linear-gradient(#5d45a2, #443287);
	background: -webkit-linear-gradient(#5d45a2, #443287);
  box-shadow: 0px 5px 7px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 5px 7px rgba(0,0,0,0.4);
  -webkit-box-shadow: 0px 5px 7px rgba(0,0,0,0.4);
}
.chat-toggle img {
	height: 32px;
	margin: 0px auto;
	padding: 16px 0px;
	opacity: 0.5;
	-webkit-filter: invert(100%);
	filter: invert(100%);
}
.chat-toggle:hover img {
	opacity: 0.8;
}
/*.slidechat-move {
  transition: transform 1s;
}*/
.slidechat-enter-active,
.slidechat-leave-active {
  transition: all 1s;
}
.slidechat-enter,
.slidechat-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* .slideup-move {
  transition: transform 1s;
} */
.slideup-enter-active,
.slideup-leave-active {
  transition: all 1s;
}
.slideup-enter {
  opacity: 0;
  transform: translateX(30px);
}
.slideup-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}


/* Vue.js Typeahead */
.typeahead {
	position: relative;
	display: inline-block;
	outline: none;
}
.typeahead input {
	padding-right: 0px;
	height: 36px;
}
.tasks-menu .typeahead input {
	max-width: 110px;
	font-size: 16px;
}
.typeahead-dropdown {
	position: absolute;
  top: 100%;
  left: 0;
  max-width: 300px;
  z-index: 70;
  float: left;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #f6f6f6;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.typeahead-dropdown-above {
  top: auto;
  bottom: 100%;
  margin: 0 0 2px;
}
.typeahead-dropdown div {
	display: block;
  padding: 5px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
  cursor: pointer;
  overflow-x: hidden;
	outline: none;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.typeahead-dropdown div:hover,
.typeahead-dropdown .typeahead-dropdown-default {
  text-decoration: none;
	color: #fff;
  background-color: #f5f5f5;
	background: linear-gradient(#5d45a2, #443287);
	background: -o-linear-gradient(#5d45a2, #443287);
	background: -moz-linear-gradient(#5d45a2, #443287);
	background: -webkit-linear-gradient(#5d45a2, #443287);
}


/* Vue.js DateTimePicker */
.datetime-container {
	display: flex;
	vertical-align: middle;
}
.datetime-container label,
.datetime-container input {
	margin-bottom: 0px;
}
.datetime-container label {
	cursor: pointer;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
	position: relative;
}
.datetime-container-sel label {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.task-input-due.datetime-container-sel input {
  min-width: 150px;
}
.datetime-container-sel label {
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}
.year-month-wrapper{
  background-color: #5d45a2;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	text-align: center;
}
.datetime-picker{
  position: relative;
	vertical-align: top;
}
.datetime-slot{
	padding-left: 10px;
    border: 1px solid #ddd;
    background-color: white;
    padding: 7px 33px 7px;
    margin-left: -3px;
    border-left: 0px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
	box-sizing: border-box;
	white-space: nowrap;
}
/* Add Event: the Event page switch under the class, its note under the label */
.event-page-opt { margin-bottom: 10px; text-align: left; }
.event-page-opt .event-page-opt-desc { display: block; font-size: 11px; color: #999; margin: 6px 60px 0 0; line-height: 1.4; }
/* Add Event's day picker: the calendar icon and "Select one or multiple days" read as one field */
.event-days-picker .datetime-container > span { display: flex; }
.event-days-picker .datetime-container label { display: flex; align-items: center; justify-content: center; width: 40px; height: auto; margin: 0; border-radius: 5px 0 0 5px; background-color: #e6e6e6; }
.event-days-picker .datetime-container label img { position: static; max-width: 18px; max-height: 18px; }
.event-days-picker .datetime-slot { display: flex; align-items: center; margin-left: 0; padding: 10px 28px; cursor: pointer; }
.calendar-div{
  min-width: 280px;
  box-shadow: 1px 2px 5px rgba(0,0,0,0.2);
  background: #FFF;
  position: absolute;
  display: inline-block;
  left: 0;
  top: 35px;
  color: #444;
  font-size: 14px;
  padding-bottom: 5px;
  z-index: 100;
	margin: 3px 0px 20px;
	border-radius: 10px;
}
.calendar-embed {
	position: relative;
	top: 0px;
	margin-bottom: 0px;
}
.calendar-today {
	background-color: #e2e2e2;
}
.port, .days{
  display: inline-block;
  width: 30px;
  height: 30px;
	line-height: 30px;
  padding: 3px;
  margin: 2px;
  border-radius: 100%;
  text-align: center;
  vertical-align: top;
  cursor: pointer;
}
.headers {
	height: 14px;
	margin: 3px 0px;
}
.headers .days{
  color: #5d45a2;
  font-weight: bold;
  padding: 0px 3px;
  margin: 0px 2px;
  line-height: 14px;
  height: 14px;
  font-size: 14px;
	cursor: auto;
}
.port:hover{
  color: #5d45a2;
  font-weight: bold;
}
.port.calendar-port-disabled, .port.calendar-port-disabled:hover {
  color: #ccc;
  font-weight: normal;
  cursor: default;
}
.activePort, activePort:hover {
  background-color: #5d45a2;
  color: white;
}
span.activePort:hover {
  color: white;
}
.month-setter, .year-setter{
  margin: 0 1px;
  width: 48.2%;
  color: white;
  font-weight: 900;
  display: inline-block;
}
.nav-l:hover, .nav-r:hover {
  background-color: rgba(0,0,0,0.25);
}
.nav-l, .nav-r {
  display: inline-block;
  width: 25px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border: 0;
  padding: 7px;
  margin:0;
}
.nav-l:focus, .nav-r:focus{
  outline: none;
}
.nav-l{
  float: left;
}
.nav-r{
  float: right;
}
.month, .year{
  width: 40px;
  display: inline-block;
  color: white;
  padding: 7px 0px;
}
.hour-selector, .minute-selector{
  width: 30px;
  display: inline-block;
  text-align: center;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}
.time-separator{
  display: inline-block;
  font-weight: bold;
	width: 5px;
}
.time-picker{
  margin: 10px
}
.nav-t, .nav-d{
  font-weight: bold;
  cursor: pointer;
}
.scroll-hider {
  display: none;
  vertical-align:top;
  overflow:hidden;
  border:0;
  position: absolute;
  top: -40px;
  left: 0;
  box-shadow: 0 0 3px #333;
  background-color: white;
}
.scroll-hider ul {
  padding:5px;
  margin:-5px -13px -5px -5px;
  list-style-type: none;
  height: 100px;
  overflow: auto;
  width:55px;
  color: #999;
  overflow-x: hidden;
}
.showSelector{
  display:inline-block;
}
li.dtp-li-active{
  background-color: #ed4d00;
  color: white;
}
li.dtp-li{
  padding: 4px;
  font-size: 16px;
  width: 100%;
  cursor: pointer;
}
.time-picker{
  display: inline-block;
}
.noDisplay{
  display: none;
}
.okButton{
  float: right;
  margin-right: 10px;
}

textarea.resize {
	overflow: hidden;
	resize: none;
}


/* Videos */
.vid {
	background-color: #fcfcfc;
	display: inline-block;
	margin: 20px 15px;
	width: 340px;
  height: 192px;
	text-align: left;
	vertical-align: middle;
  background-color: #333;
	position: relative;
	cursor: pointer;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
}
.vid-create {
	background-color: #777;
}
.vid-create .vid-label {
	background-color: rgba(0,0,0,0);
	color: #aaa;
}
.vid-plus {
  color: #aaa;
  font-size: 130px;
  text-align: center;
  margin-top: 74px;
}
.vid-create:hover {
	background-color: #555;
}
.vid-create:hover .vid-plus {
	color: #eee;
}
.vid-create:hover .vid-label {
	color: #fff;
}
.vid-label {
	position: absolute;
	bottom: 0;
	color: white;
	background-color: rgba(0,0,0,0.6);
	padding: 8px 10px;
	width: 100%;
	font-size: 17px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
	letter-spacing: 1.5px;

	-webkit-border-bottom-left-radius: 15px;
	-moz-border-bottom-left-radius: 15px;
	border-bottom-left-radius: 15px;
	-webkit-border-bottom-right-radius: 15px;
	-moz-border-bottom-right-radius: 15px;
	border-bottom-right-radius: 15px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.vid-title {
	font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #555;
    letter-spacing: 0.3px;
}
.vid-img-main {
	width: 100%;
	min-height: 192px;
	border: 1px #ddd solid;
	background-color: #333;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	position: relative;
	cursor: pointer;
}
.vid-text {
	padding-top: 10px;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: 1px;
	white-space: pre-wrap;       /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.vid-text img {
	max-height: 20px;
	opacity: 0.5;
	display: inline-block;
	vertical-align: middle;
}
.vid-step {
	padding: 10px;
	line-height: 21px;
}
.vid-edit {
	float: right;
	height: 20px;
}

.vid-search {
	width: 280px;
	display: inline-block;
}
.vid-search input {
	text-align: center;
}

.vid-img {
	width: 100%;
	border: 1px #ddd solid;
	cursor: pointer;
}
.vid-how {
	color: #aeaeae;
	font-size: 12px;
	text-align: center;
	padding-top: 5px;
}
.player-frame {
	position: absolute;
	top: 50%;
	left: 50%;

	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* Sleek UI */
.sleek-class-title {
	text-align: center;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 2px;
	margin: 0px -20px 10px;
}
/* Private Party */
.party-title {
	text-align: center;
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 2px;
	margin: 10px -20px 10px;
}

/* Members */
.member-force-row.member-row,
.member-row {
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: 0px;
	display: block;
	vertical-align: top;

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

	box-sizing: inherit;
	-moz-box-sizing: inherit;
	-webkit-box-sizing: inherit;

	position: relative;
	text-align: left;
	background: linear-gradient(#eeeeee, #e0e0e0);
	background: -o-linear-gradient(#eeeeee, #e0e0e0);
	background: -moz-linear-gradient(#eeeeee, #e0e0e0);
	background: -webkit-linear-gradient(#eeeeee, #e0e0e0);
}
.member-row:hover {
	background: rgba(255,255,255,0.9);
	cursor: pointer;
}
.member-male {
	-webkit-box-shadow: inset 0 0 15px rgba(72,130,195,0.3);
	-moz-box-shadow: inset 0 0 15px rgba(72,130,195,0.3);
	box-shadow: inset 0 0 15px rgba(72,130,195,0.3);
	border-color: rgba(72,130,195,0.3);
}
.member-female {
	-webkit-box-shadow: inset 0 0 15px rgba(211,113,191,0.3);
	-moz-box-shadow: inset 0 0 15px rgba(211,113,191,0.3);
	box-shadow: inset 0 0 15px rgba(211,113,191,0.3);
	border-color: rgba(211,113,191,0.3);
}
.member-gender {
	-webkit-box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
	-moz-box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
	box-shadow: inset 0 0 15px rgba(0,0,0,0.2);
	border-color: rgba(0,0,0,0.3);
}
.member-female.member-glow {
	-webkit-box-shadow: inset 0 0 20px rgba(210,210,0,0.6);
	-moz-box-shadow: inset 0 0 20px rgba(210,210,0,0.6);
	box-shadow: inset 0 0 20px rgba(210,210,0,0.6);
}
.member-male.member-glow {
	-webkit-box-shadow: inset 0 0 20px rgba(210,210,0,0.6);
	-moz-box-shadow: inset 0 0 20px rgba(210,210,0,0.6);
	box-shadow: inset 0 0 20px rgba(210,210,0,0.6);
}
.member-cell-profile {
	display: table-cell;
	width: 1%;
}
.member-force-row .member-profile,
.member-profile {
	width: 48px;
	height: 48px;
	margin: 15px 20px;
}
.member-force-row .member-position,
.member-position {
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 1px 15px 0px 5px;
	letter-spacing: 0px;
	text-align: left;
	font-size: 12px;
	line-height: 12px;
	border-bottom: #ccc solid 1px;
}
.member-position div {
	display: inline-block;
}
.member-position img {
	height: 12px;
	max-width: 12px;
	margin: 0px 0px -1px 5px;
	display: inline-block;
	opacity: 0.3;
}
.member-position img.ml-rep {
	opacity: 0.7;
}
.member-force-row .member-name,
.member-name {
	display: table-cell;
	color: #6f6f6f;
	font-size: 18px;
	font-weight: 400;
	padding-bottom: 5px;
	letter-spacing: 0px;
}
.member-details {
	display: table-cell;
	color: #aaa;
	font-size: 14px;
	font-weight: 600;
}
.member-details-tbl {
	display: table;
	width: 100%;
	max-width: 170px;
}
.member-details-balance {
	margin-right: -5px;
}
.member-details-balance-red {
	color: rgba(223,49,46,0.5);/*red*/
}
.member-details-balance-green {
	color: rgba(7,130,13,0.7);/*green*/
}
.member-icon {
	height: 12px;
	display: inline-block;
	vertical-align: middle;
	opacity: 0.3;
}
.member-icon-value {
	display: inline-block;
	height: 11px;
	opacity: 0.3;
}
.member-force-row .member-checkin-button,
.member-checkin-button {
	display: table-cell;
	width: 1%;
	padding-right: 20px;
	vertical-align: middle;
	position: static;
}
.member-force-row .member-indicator,
.member-indicator {
	display: table-cell;
	width: 1%;
	padding-right: 20px;
	vertical-align: middle;
	white-space: nowrap;
	text-align: left;
	float: none;
	position: static;
	top: auto;
	right: auto;
}
.member-force-row .member-indicator div,
.member-indicator div {
	text-align: left;
	position: static;
	top: auto;
	right: auto;
}
.member-force-row .member-checkin-button > div,
.member-checkin-button > div {
	text-align: left;
	position: static;
	top: auto;
	right: auto;
}
.member-force-row .member-indicator img,
.member-indicator img {
	display: inline-block;
	max-width: 32px;
	max-height: 28px;
	opacity: 0.7;
	padding-left: 5px;
	vertical-align: middle;
}
.member-indicator img:hover {
	opacity: 1;
}
.member-force-row .member-checkins,
.member-checkins {
	color: #84be84;
	font-size: 28px;
	font-weight: 600;
	line-height: 28px;
	vertical-align: middle;
}
.member-force-row .member-checkins img,
.member-checkins img {
	padding-right: 1px;
}
.member-checkins:hover {
	color: #53a653;
}
.member-checkins:hover img {
	opacity: 1;
}
.member-force-row .member-space,
.member-space {
	right: auto;
}
/* For tablets */
@media only screen and (min-width: 600px) {
	.studio .studio-plan {
		display: inline-block;
	}
	.member-row {
		width: 290px;
		margin: 20px 10px 10px;

		background: #f6f6f6;
		color: #999;
		padding: 20px 0px 20px 20px;
		border: 1px solid #CCC;
		display: inline-block;
		vertical-align: top;
		text-align: left;

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

		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	.member-profile {
		width: 64px;
		height: 64px;
		margin: 0px;
		margin-right: 20px;
	}
	.member-position {
		display: block;
		position: static;
		padding: 4px 0px;
		border-bottom: 0px;
		white-space: nowrap;
		width: 180px;
	}
	.member-name {
		color: #666;
		font-size: 14px;
		font-weight: 600;
		padding: 1px 0px 2px;
		letter-spacing: -0.5px;
	}
	.member-checkin-button {
		float: right;
		padding: 0px;
	}
	.member-indicator {
		float: right;
		padding: 0px;
		position: absolute;
	}
	.member-indicator div {
		text-align: right;
		position: absolute;
		top: -19px;
		right: 9px;
	}
	.member-checkin-button > div {
		text-align: right;
		position: absolute;
		top: -21px;
		right: -1px;
	}
	/* With the RSVP count on top (19px) the set rises by that much more, so the buttons keep their corner spot */
	.member-checkin-button > div.rsvp-bg {
		top: -40px;
	}
	.member-indicator img {
		max-width: 14px;
		max-height: 12px;
	}
	.member-space {
		/* right: 70px; */
	}
	.member-checkins {
		font-size: 14px;
	}
	.member-checkins img {
		padding-right: 2px;
	}
}
.box-inactive {
	box-shadow: inset 0 0 15px rgba(72,72,72,0.3);
	border-color: rgba(130,130,130,0.3);
}
.box-inactive .member-name {
	color: #999;
}
.box-inactive .member-profile {
	-webkit-filter: grayscale(100%) opacity(50%);
	filter: grayscale(100%) opacity(50%);
}
.box-archive {
	box-shadow: inset 0 0 15px rgba(164,9,0,0.3);
	border-color: rgba(164,9,0,0.1);
}
.box-archive .member-name {
	color: #999;
}
.box-archive .member-profile {
	-webkit-filter: grayscale(100%) opacity(50%);
	filter: grayscale(100%) opacity(50%);
}

/* Groups */
.grp-qtr {
	display: inline-block;
	width: 100%;
}

/* Devices */
.hide-mobile {
	display: none;
}
.mobile {
	display: none;
	max-width: 440px;
	vertical-align: top;
}
.mobile .event-checkin {
	margin-bottom: 0px;
}
.mobile .box-med {
	margin: 20px 10px;
}
/* Schedule page main box: centered on desktop, 20px side gutters on phones */
.box-med.schedule-narrow {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}
@media only screen and (max-width: 740px) {
	.box-med.schedule-narrow {
		margin-left: 20px;
		margin-right: 20px;
	}
}
.mobile .nav-off,
.nav-off {
	display: none;
}
.nav-on {
}
.dev-mob-only {
	display: table-cell;
}
.dev-tab {
	display: none;
}
.dev-small {
	display: none;
}
.dev-med {
	display: none;
}
.dev-med-inline {
	display: none;
}
.mob-med {
	display: block;
}
.dev-lrg {
	display: none;
}

/* For iPhone 5 small screens */
@media only screen and (max-width: 320px) {
	.nav-logo {
		max-width: 150px;
	}
	.nav-item {
		padding: 0px 10px;
	}
	.vid {
		width: 300px;
		height: 169px;
		margin: 10px;
	}
	.mobile .box-responsive,
	.box-responsive {
		width: 300px;
	}
	.chooser-auto,
	.chooser-cart {
		min-width: 300px;
	}
}
/* For tablets */
@media only screen and (min-width: 600px) {
	.hide-mobile {
		display: block;
	}
	span.hide-mobile {
		display: inline-block;
	}
	.dev-mob-only {
		display: none;
	}
	.dev-tab {
		display: table-cell;
	}
	.dev-small {
		display: none;
	}
	.dev-med {
		display: none;
	}
	.dev-lrg {
		display: none;
	}

	.col-edge {
		margin: 0px 30px;
	}
	.col-edge-qtr {
		margin: 0px 30px;
	}
	.col-edge-qtr .box-med {
		margin: 20px 20px;
	}
	.col-qtr {
		width: 50%;
	}
	.col-half {
		width: 100%;
	}
	.col-edge-full {
		margin: 20px 30px 20px;
	}
	.col-full .box-wrap,
	.col-full .top {
		width: 100%;
		max-width: none;
		display: inline-block;
	}

	.grp-qtr {
		width: 50%;
	}

	.form-horz {
		float: right;
		margin: -10px auto 0px;
	}
	.form-wide {
		float: right;
		max-width: 300px;
		margin-top: -10px;
	}

	.box-subvalue {
		font-size: 44px;
	}
	.amount-cents {
		font-size: 24px;
	}

	.event-item-mid {
		padding-right: 20px;
	}
	.event-item-icon {
		padding: 0px 5px;
		margin-right: 15px;
	}
}
/* For Small Screen Desktop */
@media only screen and (min-width: 768px) {
	.alarm-inner {
		margin-left: 170px;
		max-width: 100%; /*750px*/
		display: block;
	}
	.page {
		margin-left: 170px;
		width: auto;
		max-width: 100%; /*750px*/
		display: block;
	}
	.page#view-member {
		padding:0px 20px;
	}
	.page#members-list {
		margin-top: 20px;
	}
	.member-buttons {
		text-align: right;
		padding: 10px 20px 10px;
	}
	.menu-outer {
		left: 0;
		right: auto;
		display: block;
	}
	.nav-off {
		display: inline-block;
	}
	.nav-on {
		display: none;
	}
	.dev-tab {
		display: table-cell;
	}
	.dev-small {
		display: table-cell;
	}
	.dev-med {
		display: none;
	}
	.dev-lrg {
		display: none;
	}

	.col-qtr {
		width: 50%;
	}
	.col-half {
		width: 100%;
	}
	.col-dyn {
		width: 100%;
		max-width: 1100px;
		display: inline-block;
		vertical-align: top;
	}

	.box-responsive {
		width: 500px;
	}
	.col-50 {
		width: 50%;
		display: inline-block;
	}
	.col-50-left {
		padding-right: 4px;
	}
	.col-50-right {
		padding-left: 4px;
	}

	.cal-profiles {
		display: block;
	}

	.package-option-item {
		padding: 10px 30px;
	}
	.package-title {
		padding: 18px 0px 18px 40px;
	}
	.package-edit {
		width: 40px;
	}
}
/* For Medium Screen Desktop */
@media only screen and (min-width: 992px) {
	.dev-tab {
		display: table-cell;
	}
	.dev-small {
		display: table-cell;
	}
	.dev-med {
		display: table-cell;
	}
	.dev-med-inline {
		display: inline-block;
	}
	.mob-med {
		display: none;
	}
	.dev-lrg {
		display: none;
	}

	.col-qtr {
		width: 50%;
	}
	.col-half {
		width: 50%;
	}

	.calendar .tbl-cell {
		height: 150px;
		text-align: left;
		vertical-align: top;
		border: 1px solid #dedede;
	}
	.cal-day,
	.cal-day-event,
	.cal-day-weekend,
	.cal-day-number,
	.cal-day-today .cal-day-number {
		background-color: transparent;
		text-align: left;
		line-height: inherit;
		font-size: 12px;
		line-height: 12px;
		font-weight: 600;
		padding: 10px;
		color: inherit;
		width: auto;
		height: auto;
		padding: 10px;
		box-shadow: none;
	}
	.cal-event {
		display: block;
	}
	.cal-day-today {
		background-color: rgba(255,235,143,0.3);
	}
	.calendar .show-day:hover {
		background-color: #fff;
	}
	.calendar .show-day:hover .cal-item {
		color: #fff;
	}
	.cal-item {
		display: block;
	}
	.cal-mob {
		display: none;
	}
	.cal-desk {
		display: inline-block;
	}

	.nav-off {
		display: inline-block;
	}
	.nav-on {
		display: none;
	}

	.col-edge-full {
		margin: 40px 50px 20px;
	}
	.col-tbl {
		display: table;
	}
	.col-tbl-row {
		display: table-row;
	}
	.col-tbl-cell {
		display: table-cell;
	}
	.col-tbl-cell .box-med {
		margin: 0px;
	}

	.dropdown-action {
		display: inline-block;
	}
}
/* For Wide Screen Desktop */
@media only screen and (min-width: 1200px) {
	.nav-off {
		display: inline-block;
	}
	.nav-on {
		display: none;
	}
	.dev-tab {
		display: table-cell;
	}
	.dev-small {
		display: table-cell;
	}
	.dev-med {
		display: table-cell;
	}
	.dev-lrg {
		display: table-cell;
	}

	.col-qtr {
		width: 25%;
	}
	.col-half {
		width: 50%;
	}
	.col-full .box-wrap,
	.col-full .box-med {
		width: 50%;
		max-width: none;
		display: inline-block;
	}

	.grp-qtr {
		width: 25%;
	}

	.event-item-mid {
		padding-right: 30px;
	}

	.class-main {
		display: table-cell;
		vertical-align: top;

	  box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	}
	.class-description {
		vertical-align: top;
		padding-top: 10px;
	}
}
@media print {
	html {
		background-color: #fff;
	}
	.nav-bar,
	.nav-bar-spacer,
	.box-main-title,
	.page-bar,
	.page-bar-spacer,
	.cal-arrow,
	.legal {
		display: none;
	}
	.page {
		margin-top: 0px;
	}
	.box {
		background-color: #fff;
		color: #999;
		padding: 0px;
		margin: 0px;
		padding-top: 10px;
		border: 0px solid #CCC;
	}

	.calendar .tbl-cell {
		width: auto;
		height: auto;
		text-align: left;
		vertical-align: top;
		border: 1px solid #dedede;
	}
	.cal-day,
	.cal-day-event,
	.cal-day-weekend,
	.cal-day-today .cal-day:first-child {
		background-color: transparent;
		text-align: left;
		line-height: inherit;
		font-size: 12px;
		line-height: 12px;
		font-weight: 600;
		color: inherit;
		width: auto;
		height: auto;
		padding: 0px;
		padding-left: 3px;
		box-shadow: none;
	}
	.cal-day-today {
		background-color: rgba(255,235,143,0.3);
	}
	.calendar .show-day:hover {
		background-color: #fff;
	}
	.calendar .show-day:hover .cal-item {
		color: #fff;
	}
	.cal-item {
		display: block;
		padding: 3px 1px 3px 3px;
		margin: 0px 2px 3px;
	}
	.cal-mob {
		display: none;
	}
	.cal-desk {
		display: inline-block;
	}
	.cal-event {
		display: block;
	}
	.cal-item {
		padding: 5px 0px 5px 6px;
	}

	.box-subvalue {
		font-size: 40px;
	}
	.print-hide {
		display: none;
	}
}
.calendar .show-day:hover .cal-private {
	color: #000;
}
.calendar .show-day:hover .cal-private:hover {
	background-color: #999;
	color: #fff;
}

.kiosk .page,
.kiosk .alarm-inner {
	margin-left: 0px;
}
.nav-bar .page,
.page-bar .page {
	margin-top: 0px;
	margin-left: 0px;
	max-width: 100%;
	display:block;
  padding: 0px;
}




/* Buttons */
button {
  display: inline-block;
  *display: inline;
  padding: 2px 10px;
  margin: 5px 0px 5px 0px;
  margin-left: .3em;
  font-size: 12px;
  line-height: 20px;
  color: #333333;
  text-align: center;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  vertical-align: middle;
  cursor: pointer;
  background-color: #f5f5f5;
  *background-color: #e6e6e6;
  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
  background-repeat: repeat-x;
  border: 1px solid #cccccc;
  *border: 0;
  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  border-bottom-color: #b3b3b3;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

button:hover,
button:focus,
button:active,
button.active,
button.disabled,
button[disabled] {
  color: #333333;
  background-color: #e6e6e6;
  *background-color: #d9d9d9;
}

button:active,
button.active {
  background-color: #cccccc \9;
}

button:first-child {
  *margin-left: 0;
}

button:hover,
button:focus {
  color: #333333;
  text-decoration: none;
  background-position: 0 -15px;
  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

button:focus {
  outline: none;
}

button.active,
button:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}

button.disabled,
button[disabled] {
  cursor: default;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.btn-image {
	display:inline-block;
  padding: 10px 10px;
  font-size: 16.5px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  margin-left: 0px;
	position: relative;
}
.btn-kiosk {
	width: 280px;
	display:inline-block;
  padding: 10px 0px;
  font-size: 16.5px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  margin-left: 0px;
}
.btn-icon {
	font-size: 30px;
	padding: 0px 5px;
	height: 34.5px;
	vertical-align: top;
	margin: 0px;
	margin-bottom: 12px;
}
.btn-long {
  width: 100%;
  padding: 10px 0px;
  font-size: 16.5px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  margin-left: 0px;
  display:block;
}
.btn-right {
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;

	-webkit-border-top-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	border-top-left-radius: 0px;

	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-bottomleft: 0px;
	border-bottom-left-radius: 0px;
}
.inpt-left {
	margin-bottom: 0px;

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

	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;

	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-bottom-left-radius: 6px;
}

.btn-layer {
	margin: 0px;
	padding: 4px 18px 4px;
	font-size: 17.5px;
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;
}
.btn-layer div {
	font-size: 11px;
	line-height: 11px;
	margin-top: 1px;
}

.btn-large {
  padding: 10px 18px;
  font-size: 17.5px;
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
}
.btn-large [class^="icon-"],
.btn-large [class*=" icon-"] {
  margin-top: 4px;
}
.btn-reg {
	padding: 9px 7px;
}
.btn-text {
	font-size: 10px;
}
.btn-text img {
	height: 8px;
}
.btn-title {
	font-size: 12px;
}

.btn-small {
  padding: 5px 6px;
  margin-top: 0px;
  font-size: 10.5px;
  line-height: 10.5px;
  letter-spacing:0.05em;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
}
.btn-small [class^="icon-"],
.btn-small [class*=" icon-"] {
  margin-top: -1px;
}

.btn-blue.active,
.btn-liblue.active,
.btn-green.active,
.btn-orange.active,
.btn-red.active,
.btn-black.active,
.btn-gray.active,
.btn-brand.active {
  color: rgba(255, 255, 255, 0.75);
}
.btn-brand img {
	height: 16px;
	margin-top: -2.5px;
}

/* Button Brand */
.btn-brand {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #443287;
  *background-color: #5d45a2;
  background-image: -moz-linear-gradient(top, #5d45a2, #443287);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5d45a2), to(#443287));
  background-image: -webkit-linear-gradient(top, #5d45a2, #443287);
  background-image: -o-linear-gradient(top, #5d45a2, #443287);
  background-image: linear-gradient(to bottom, #5d45a2, #443287);
  background-repeat: repeat-x;
  border-color: #443287 #443287 #5d45a2;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active,
.btn-brand.active,
.btn-brand.disabled,
.btn-brand[disabled] {
  color: #ffffff;
  background-color: #443287;
  *background-color: #5d45a2;
}
.btn-brand:active,
.btn-brand.active {
  background-color: #443287 \9;
}

/* Button Blue */
.btn-blue {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #006dcc;
  *background-color: #0044cc;
  background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  background-repeat: repeat-x;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-blue:hover,
.btn-blue:focus,
.btn-blue:active,
.btn-blue.active,
.btn-blue.disabled,
.btn-blue[disabled] {
  color: #ffffff;
  background-color: #0044cc;
  *background-color: #003bb3;
}
.btn-blue:active,
.btn-blue.active {
  background-color: #003399 \9;
}

/* Button Orange */
.btn-orange {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #faa732;
  *background-color: #f89406;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active,
.btn-orange.active,
.btn-orange.disabled,
.btn-orange[disabled] {
  color: #ffffff;
  background-color: #f89406;
  *background-color: #df8505;
}
.btn-orange:active,
.btn-orange.active {
  background-color: #c67605 \9;
}

/* Button Red */
.btn-red {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #da4f49;
  *background-color: #bd362f;
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-red:hover,
.btn-red:focus,
.btn-red:active,
.btn-red.active,
.btn-red.disabled,
.btn-red[disabled] {
  color: #ffffff;
  background-color: #bd362f;
  *background-color: #a9302a;
}
.btn-red:active,
.btn-red.active {
  background-color: #942a25 \9;
}

/* Button Green */
.btn-green {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #5bb75b;
  *background-color: #51a351;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(to bottom, #62c462, #51a351);
  background-repeat: repeat-x;
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-green:hover,
.btn-green:focus,
.btn-green:active,
.btn-green.active,
.btn-green.disabled,
.btn-green[disabled] {
  color: #ffffff;
  background-color: #51a351;
  *background-color: #499249;
}
.btn-green:active,
.btn-green.active {
  background-color: #408140 \9;
}

.load-more-scroll {
	display: block;
  text-align: center;
	margin-top: 15px;
  margin-bottom: 0px;

  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* Button Light Blue */
.btn-lblue {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #49afcd;
  *background-color: #2f96b4;
  background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4));
  background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
  background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
  background-repeat: repeat-x;
  border-color: #2f96b4 #2f96b4 #1f6377;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-lblue:hover,
.btn-lblue:focus,
.btn-lblue:active,
.btn-lblue.active,
.btn-lblue.disabled,
.btn-lblue[disabled] {
  color: #ffffff;
  background-color: #2f96b4;
  *background-color: #2a85a0;
}
.btn-lblue:active,
.btn-lblue.active {
  background-color: #24748c \9;
}

/* Button Light Blue */
.btn-liblue {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #49afcd;
  *background-color: #3a9cb4;
  background-image: -moz-linear-gradient(top, #74c6de, #639eb4);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#79c5de), to(#639eb4));
  background-image: -webkit-linear-gradient(top, #74c6de, #639eb4);
  background-image: -o-linear-gradient(top, #74c6de, #639eb4);
  background-image: linear-gradient(to bottom, #74c6de, #639eb4);
  background-repeat: repeat-x;
  border-color: #639eb4 #639eb4 #4687a2;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-liblue:hover,
.btn-liblue:focus,
.btn-liblue:active,
.btn-liblue.active,
.btn-liblue.disabled,
.btn-liblue[disabled] {
  color: #ffffff;
  background-color: #639eb4;
  *background-color: #639eb4;
}
.btn-liblue:active,
.btn-liblue.active {
  background-color: #4687a2 \9;
}

/* Button Black */
.btn-black {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #363636;
  *background-color: #222222;
  background-image: -moz-linear-gradient(top, #444444, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222));
  background-image: -webkit-linear-gradient(top, #444444, #222222);
  background-image: -o-linear-gradient(top, #444444, #222222);
  background-image: linear-gradient(to bottom, #444444, #222222);
  background-repeat: repeat-x;
  border-color: #222222 #222222 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-black:hover,
.btn-black:focus,
.btn-black:active,
.btn-black.active,
.btn-black.disabled,
.btn-black[disabled] {
  color: #ffffff;
  background-color: #222222;
  *background-color: #151515;
}
.btn-black:active,
.btn-black.active {
  background-color: #080808 \9;
}

/* Button Gray */
.btn-gray {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #b6b6b6;
  *background-color: #888;
  background-image: -moz-linear-gradient(top, #bbb, #999);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bbb), to(#999));
  background-image: -webkit-linear-gradient(top, #bbb, #999);
  background-image: -o-linear-gradient(top, #bbb, #999);
  background-image: linear-gradient(to bottom, #bbb, #999);
  background-repeat: repeat-x;
  border-color: #999 #999 #000000;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-gray:hover,
.btn-gray:focus,
.btn-gray:active,
.btn-gray.active,
.btn-gray.disabled,
.btn-gray[disabled] {
  color: #ffffff;
  background-color: #999;
  *background-color: #858585;
}
.btn-gray:active,
.btn-gray.active {
  background-color: #777 \9;
}

.btn-left {
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
	padding-right: 12px;
	height: 100%;
	max-height: 62px;
	margin-right: 0px;
	border-right-color: rgba(0, 0, 0, 0.25);
}
.btn-right {
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	padding-left: 6px;
	padding-right: 6px;
	margin-left: 0px;
	height: 100%;
	max-height: 42px;
	border-left-color: rgba(255, 255, 255, 0.3);
}
.btn-right.disabled {
	color: #ffffff;
	background-color: #bd362f;
}
.btn-close {
	font-size: 20px;
	line-height: 20px;
}
.btn-fade-icon {
	opacity: 0.9;
	padding: 0px;
}
.btn-vert {
	padding-top: 4px;
	padding-bottom: 5px;
	padding-left: 3px;
	padding-right: 3px;
}
.btn-vert span {
	writing-mode: tb-rl;
	font-size: 12px;
}
.vert {
	writing-mode: tb-rl;
	font-size: 10px;
    height: 26px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: -3px;
	margin-bottom: -7px;
	display: inline-block;
}

.input-list {
	position: relative;
}
.input-list input {
	margin: 0px;
}
/* Simple Blast "Specific members": the search box floats right, so its results
   open from the box's right edge leftward instead of running off a phone's screen */
#members-email {
	position: relative;
}
#members-email .typeahead.dropdown-menu {
	left: auto !important;
	right: 0;
	max-width: calc(100vw - 32px);
}
.list-group {
	position: absolute;
  top: 100%;
  left: 0;
  max-width: 300px;
  z-index: 70;
  float: left;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #f6f6f6;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
.list-group a {
  display: block;
  padding: 5px 20px 5px 10px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
  cursor: pointer;
  overflow-x: hidden;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.list-group a:hover,
.list-group a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #337ab7;
}

/* Drop Down Menu */
.caret {
  display: inline-block;
  width: 0;
  height: 0;
	margin-bottom: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid \9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}
.caret-right {
  display: inline-block;
  width: 0;
  height: 0;
	margin-bottom: 2px;
  vertical-align: middle;
  border-left: 4px dashed;
  border-left: 4px solid \9;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}
.dropup,
.dropdown {
  position: relative;
	outline: none;
	display: inline-block;
}
.dropdown .nav-off {
	vertical-align: initial;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
	max-width: 300px;
  z-index: 50;
  display: none;
  float: left;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
	background-color: #f6f6f6;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
}
.dropdown-menu ul {
  list-style: none;
	padding-inline-start: 0px;
}
.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}
.dropdown-menu.pull-right-mobile {
  right: auto;
  left: auto;
}
@media only screen and (min-width: 600px) {
	.dropdown-menu.pull-right-mobile {
	  right: 0;
	  left: auto;
	}
}
.dropdown-menu .divider {
  height: 1px;
  margin: 5px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.dropdown-menu span {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #aaa;
  white-space: nowrap;
}
.dropdown-menu span.label {
  display: block;
  padding: 3px 20px;
  clear: both;
	font-size: 11px;
  font-weight: normal;
  line-height: 1.42857143;
  color: #aaa;
  white-space: nowrap;
}
.dropdown-menu li {
	width: 100%;
}
.dropdown-menu li > a,
.dropdown-menu li > label,
.dropdown-menu li > button {
	display: block;
	padding: 5px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.42857143;
	color: #333333;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    background: none;
    border: none;
    font-size: 14px;
    letter-spacing: 0.5px;
    box-shadow: none;
    text-shadow: none;
    width: 100%;
    border-radius: 0px;
}
.dropdown-menu li > label.half {
	width: 50%;
	display: inline-block;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-menu li > label:hover,
.dropdown-menu li > label:focus,
.dropdown-menu li > button:hover,
.dropdown-menu li > button:focus {
	text-decoration: none;
	color: #fff;
	background-color: #f5f5f5;
	background: linear-gradient(#5d45a2, #443287);
	background: -o-linear-gradient(#5d45a2, #443287);
	background: -moz-linear-gradient(#5d45a2, #443287);
	background: -webkit-linear-gradient(#5d45a2, #443287);
}
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover,
.dropdown-menu .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #337ab7;
}
.dropdown-menu .disabled > a,
.dropdown-menu .disabled > a:hover,
.dropdown-menu .disabled > a:focus,
.dropdown-menu .disabled > label,
.dropdown-menu .disabled > label:hover,
.dropdown-menu .disabled > label:focus {
  color: #777;
}
.dropdown-menu .disabled > a:hover,
.dropdown-menu .disabled > a:focus,
.dropdown-menu .disabled > label:hover,
.dropdown-menu .disabled > label:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.dropdown-menu li > a:hover .bold,
.dropdown-menu li > a:focus .bold,
.dropdown-menu li > label:hover .bold,
.dropdown-menu li > label:focus .bold {
	color: #fff;
}
.open > .dropdown-menu {
  display: block;
}
.open > a {
  outline: 0;
}
.pull-right > .dropdown-menu {
  right: 0;
  left: auto;
}
.dropup .caret {
  border-top: 0;
  border-bottom: 4px dashed;
  border-bottom: 4px solid \9;
  content: "";
}
.dropup .dropdown-menu {
  top: auto;
  bottom: 100%;
  margin-bottom: 2px;
}
.dropdown-menu.full {
	width: 300px;
}
.dropdown-header {
	padding: 0px 5px;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.05);
}
.dropdown-item-100 {
	width: 100%;
	margin-bottom: 0px;
	display: block;
	text-align: center;
}
.dropdown-item-50 {
	width: 50%;
	margin-bottom: 0px;
	display: inline-block;
}
div.dropdown-item-50 {
	padding: 10px 0px;
	text-align: center;
	font-size: 10px;
}
div.dropdown-item-50:hover {
	background-color: #dedede;
	color: #777;
	cursor: pointer;
}
.dropdown-opt {
	padding: 11px 10px;
	color: #999;
	display: block;
	line-height: 13px;
}
.dropdown-opt label {
	float: right;
	margin-top: 1px;
}
.dropdown-opt input[type=checkbox] {
	margin: 5px 0px 0px;
}
.dropdown-opt input[type=text] {
}
.dropdown-opt:hover {
	background-color: #dedede;
	color: #777;
}
.dropdown-menu .right-icon {
	height: 14px;
	float: right;
	opacity: 0.3;
	padding: 3px 5px 3px 0px;
	margin-right: -20px;
	cursor: pointer;
}
.dropdown-menu li > a:hover .right-icon,
.dropdown-menu li > a:focus .right-icon,
.dropdown-menu li > label:hover .right-icon,
.dropdown-menu li > label:focus .right-icon {
	-webkit-filter: invert(100%);
	filter: invert(100%);
	opacity: 0.5;
}
.dropdown-menu li > a:hover .right-icon:hover,
.dropdown-menu li > a:focus .right-icon:hover,
.dropdown-menu li > label:hover .right-icon:hover,
.dropdown-menu li > label:focus .right-icon:hover {
	opacity: 0.8;
}

/* Infinite */
.inf-small {
	font-size: 28px;
	font-weight: 300;
	margin-top: -4px;
	display: inline-block;
	vertical-align: middle;
}
.inf-small2 {
	font-size: 28px;
	font-weight: 300;
	margin-top: -6px;
	display: inline-block;
	vertical-align: middle;
}

/* Filters */
li label.filter-title,
.dropdown-menu div.filter-title {
	display: block;
	background-color: #f6f6f6;
	padding-left: 15px;
	line-height: 24px;
	font-size: 12px;
	font-weight: 700;
	color: #666;
}
.dropdown-menu li > label.filter-title:hover,
.dropdown-menu li > label.filter-title:focus {
	background: #ddd;
	color: #666;
	cursor: default;
}
li label.filter-category,
li a.filter-category {
	background-color: #eee;
	padding-left: 15px;
	line-height: 20px;
	font-size: 12px;
	font-weight: 400;
	color: #888;
}
li a.filter-option {
	padding-left: 25px;
}
li a.filter-private {
	color: #aaa;
}
li a.filter-staff {
	background-color: rgba(166,132,83,0.15);
}
li a.filter-archive {
	background-color: rgba(199,161,161,0.25);
}
li a.filter-hidden {
	background-color: rgba(161,161,199,0.25);
}
.dropdown-menu li > label.filter-category:hover,
.dropdown-menu li > label.filter-category:focus {
	color: #888;
	background: none;
	background-color: #eee;
}

.member-menu {
	overflow: hidden;
}
.member-menu input {
	margin-top: 10px;
}
.member-menu li:nth-child(even) {
	background-color: #e9e9e9;
}
.member-menu li {
	color: #999;
	font-size: 16px;
	line-height: 32px;
	padding: 0px 10px;
	white-space: auto;
	min-width: 300px;
}
.member-menu label {
	display: block;
}

/* Class Level Drop Down */
li a.class-level-item,
li label.class-level-item {
	padding-left: 15px;
	line-height: 20px;
	font-weight: 600;
	white-space: normal;
	min-width: 240px;

}
li a.class-level-sub-item,
li label.class-level-sub-item {
	white-space: normal;
	min-width: 230px;
	padding-left: 30px;
	color: #666;
}

/* ============================================
   OAuth Social Login Buttons
   ============================================ */

/* Social Login Divider */
.social-login-divider {
	display: flex;
	align-items: center;
	text-align: center;
    margin: 20px 40px;
	color: #999;
}
.social-login-divider::before,
.social-login-divider::after {
	content: '';
	flex: 1;
	border-bottom: 1px solid #ddd;
}
.social-login-divider span {
	padding: 0 15px;
	font-size: 12px;
	letter-spacing: 2px;
}

/* Social Buttons Base */
.btn-social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	border: 2px solid #ddd;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	box-sizing: border-box;
	position: relative;
	background: none;
}
.btn-social-email {
	justify-content: end;
}
.btn-social svg {
	width: 20px;
	height: 20px;
	position: absolute;
	left: 20px;
}
.btn-social:hover {
	opacity: 0.9;
	border-color: #ccc;
	background-color: #fff;
}
/* Google Button */
.btn-google {
	color: #333;
	border-color: rgba(31, 79, 176, 0.5);
}
/* Apple Button */
.btn-apple {
	color: #333;
	border-color: rgba(51, 51, 51, 0.5);
}

/* Social Buttons Container */
.social-buttons {
	margin-bottom: 15px;
}

/* Connected Accounts Section */
.notify-editor {
	text-align: left;
	margin-top: 6px;
}
.notify-editor .notify-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	padding: 7px 0;
	border-bottom: 1px solid #eee;
}
.notify-editor .notify-email {
	width: 270px;
	max-width: 100%;
	margin: 0;
}
.notify-editor .notify-group {
}
.notify-editor .notify-group-label {
	font-size: 10px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-right: 5px;
}
.notify-editor .notify-check {
	float: none;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	font-weight: 400;
	margin: 0 8px 0 0;
	cursor: pointer;
}
.notify-editor .notify-check input[type=checkbox] {
	width: auto;
	margin: 0;
}
.notify-editor .notify-remove {
	color: #c96868;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 4px;
}
.setting-opt .notify-add {
	float: right;
	margin: 0px 0px 0px 10px;
}
.package-text.clamp3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.package-text-more {
	font-size: 12px;
	font-weight: 600;
	color: #1c5bb8;
	cursor: pointer;
	margin-top: 2px;
}
.box-hint {
	padding: 10px;
	border-radius: 5px;
	font-size: 12px;
	color: #666;
}
.connected-account {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding: 15px 5px;
	border-bottom: 1px solid #eee;
}
.connected-account-email {
	flex: 1 1 100%;
	font-size: 12px;
	line-height: 12px;
	color: #51a351;
	margin-top: 5px;
	text-align: center;
	overflow-wrap: anywhere;
}
.connected-account:last-child {
	border-bottom: none;
}
.connected-account-info {
	display: flex;
	align-items: center;
	color: #666;
	min-width: 0;
	flex: 1;
	padding-right: 10px;
}
.connected-account-info svg {
	width: 36px;
	height: 36px;
	margin-right: 12px;
	flex: 0 0 auto;
}
.connected-account-info span {
	font-weight: 500;
	min-width: 0;
}
.connected-account-status {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}
.connected-account-connected {
	color: #51a351;
	font-size: 12px;
	font-weight: 500;
	overflow-wrap: anywhere;
}
.connected-account-not-connected {
	color: #999;
	font-size: 12px;
}

/* OAuth Modal Styling */
.oauth-modal-text {
	text-align: center;
	padding: 10px 0 20px;
	line-height: 1.6;
	color: #666;
}
.oauth-modal-email {
	font-weight: 600;
	color: #333;
}
.oauth-modal-provider {
	font-weight: 600;
	color: #333;
}

/* ============================================
   Blast Calendar Styles
   ============================================ */

.top-buttons {
	display: none;
	text-align: center;
}
.top-buttons button {
	font-size: 15px;
	font-weight: 400;
	padding: 8px 12px;
}
.blast-buttons {
	display: block;
}
.blast-view-toggle {
	position: absolute;
	top: 10px;
	right: 20px;
	display: flex;
	gap: 5px;
}

.blast-view-toggle button {
	padding: 6px 12px;
	font-size: 12px;
	border-radius: 4px;
	border: 1px solid #ccc;
	background: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 5px;
	transition: all 0.2s;
}

.blast-view-toggle button img {
	opacity: 0.5;
}

.blast-view-toggle button:hover {
	background: #f5f5f5;
}

.blast-view-toggle button.btn-sel {
	background: #624691;
	color: #fff;
	border-color: #624691;
}

.blast-view-toggle button.btn-sel img {
	filter: brightness(0) invert(1);
	opacity: 1;
}

/* Blast Calendar Grid */
.blast-calendar {
	width: 100%;
}

.blast-calendar .tbl-cell {
	width: 14.28%;
	min-height: 90px;
	vertical-align: top;
	padding: 8px;
	border: 1px solid #eee;
	cursor: pointer;
	transition: background-color 0.2s;
}

.blast-calendar .tbl-cell:hover {
	background-color: #f9f9f9;
}

.blast-calendar .cal-day-today {
	background-color: rgba(98, 70, 145, 0.05);
}

.blast-calendar .blast-cal-selected {
	position: relative;
}

.blast-cal-day {
	font-size: 14px;
	font-weight: 600;
	color: #666;
	margin-bottom: 8px;
}

.blast-cal-icons {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.blast-cal-icon {
	display: flex;
	gap: 2px;
	padding: 3px 5px;
	border-radius: 4px;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.blast-cal-icon:hover {
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.blast-cal-icon img {
	width: 14px;
	height: 14px;
}

.blast-icon-scheduled {
	background-color: #fff3cd;
	border: 1px dashed #ffc107;
}

.blast-icon-delivered {
	background-color: #d4edda;
	border: 1px solid #28a745;
}

.blast-more {
	font-size: 10px;
	color: #999;
	padding: 3px 6px;
	background: #f0f0f0;
	border-radius: 4px;
	align-self: center;
}

/* Blast Day Detail Panel */
.blast-day-detail {
	margin: 20px;
	padding: 20px;
	background: #fdfdfd;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.blast-day-title {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
	position: relative;
}

.blast-day-title .close {
	position: absolute;
	right: 0;
	top: -5px;
	font-size: 24px;
	cursor: pointer;
	color: #999;
}

.blast-day-empty {
	text-align: center;
	color: #999;
	padding: 20px;
}

.blast-day-item-container {
	background: #f7f7f7;
	border-radius: 8px;
	margin: 0 0 15px 0;
	padding: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	position: relative;
}

.blast-day-item-container .tab-group {
	margin: 0 0 10px 0;
	padding: 0;
	display: flex;
	gap: 5px;
}

.blast-day-item-container .tab {
	font-size: 11px;
	line-height: 11px;
	padding: 8px 12px;
	border-radius: 6px;
	border: none;
	background: #e8e8e8;
	color: #888;
	min-width: auto;
}

.blast-day-item-container .tab:hover {
	background: #ddd;
}

.blast-day-item-container .tab.tab-sel:hover,
.blast-day-item-container .tab-sel {
	background: #624691;
	color: #fff;
	border: none;
}

.blast-day-item-container .tab-sel img {
	opacity: 1;
	filter: brightness(0) invert(1);
}

.blast-day-item-container .tab img {
	height: 14px;
	opacity: 0.5;
}

.blast-day-item-container .tab span {
	padding-left: 4px;
}

.blast-day-item-container .blast-stats {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

.blast-day-item-container .blast-stat {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	color: #666;
	gap: 4px;
}

.blast-day-item-container .blast-stat img {
	max-width: 16px;
	max-height: 15px;
	opacity: 0.5;
}

.blast-day-item-container .blast-stat-failed {
	color: #e74c3c;
}

.blast-day-item-container .blast-stat-delivered {
	color: #9b59b6;
}

.blast-day-item-container .blast-stat-opened {
	color: #3498db;
}

.blast-day-item-container .blast-stat-clicked {
	color: #2ecc71;
}

.blast-day-item-container .box {
	margin: 0;
	padding: 0;
	box-shadow: none;
	border-radius: 0;
    background: none;
}

.blast-day-item-container .box-med {
	padding: 0;
}

.blast-day-item-container .title {
	font-size: 12px;
	padding: 10px 0 !important;
	color: #666;
}
.tab-list-scroll {
	overflow-x: scroll;
}

.blast-day-item-container .list {
	font-size: 11px;
}

.blast-day-item-container .list td {
	padding: 8px 6px;
}

.blast-day-item-container .list .label td {
	font-size: 10px;
	padding: 6px;
	background: #f6f6f6;
}
.blast-day-item-container table.list tr:nth-child(odd) {
	background-color: #fefefe;
	border-bottom: 1px solid #eee;
}
.blast-day-item-container table.list tr:nth-child(even) {
	background-color: #fefefe;
	border-bottom: 1px solid #eee;
}
.blast-day-item-container table.list tr:hover {
	background-color: #f3f3f3;
}

.blast-day-item-container .none {
	font-size: 12px;
	padding: 5px 15px;
	color: #999;
	background-color: #ebebeb;
}

.blast-day-item {
	display: flex;
	padding: 12px;
	margin-bottom: 10px;
	background: #f7f7f7;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.2s;
}

.blast-day-item:hover {
	background: #f0f0f0;
}

.blast-day-item-icons {
	display: flex;
	gap: 5px;
	margin-right: 15px;
}

.blast-day-item-icons img {
	opacity: 0.7;
}

.blast-day-item-info {
	flex: 1;
}

.blast-day-item-subject {
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	color: #333;
	margin-bottom: 3px;
}

.blast-day-item-time {
	font-size: 12px;
	color: #888;
}
/* How many people the blast reached, after its time */
.blast-day-item-reach { display: inline; font-weight: 600; color: #666; }
/* "Viewing 100 / 635" on the right of a blast's Emails / Messages / Notifications title */
.box .title .list-viewing { float: right; font-size: 11px; font-weight: 600; letter-spacing: 0.4px; color: #888; text-transform: none; }
/* The next page of recipients */
tr.list-more td { cursor: pointer; padding: 12px 0; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: #6a3bb8; }
tr.list-more:hover td { background: #f6f3fb; }

.blast-day-item-status {
	margin-left: 10px;
}

.blast-status-scheduled {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	background: #fff3cd;
	color: #856404;
}

.blast-status-delivered {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	background: #d4edda;
	color: #155724;
}

.blast-status-other {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	background: #e2e3e5;
	color: #6c757d;
}

/* Other Items Indicator on Calendar */
.blast-other-indicator {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
    padding: 3px 6px;
    color: #999;
    background: #d8d8d8;
    border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	cursor: pointer;
	margin-left: 3px;
}

.blast-other-indicator:hover {
	background: #5a6268;
}

/* Other Items Day Item */
.blast-day-item-other {
	background: #f5f5f5;
}

.blast-day-item-other:hover {
	background: #efefef;
}

.blast-day-item-other-selected {
	background: #e8e8e8;
}

/* Blast Detail Popup */
.blast-detail-types {
	display: flex;
	justify-content: center;
	gap: 15px;
	padding: 15px 0;
	border-bottom: 1px solid #eee;
}

.blast-detail-type {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 8px 12px;
	border-radius: 6px;
	font-size: 13px;
	color: #999;
	background: #f5f5f5;
}

.blast-detail-type.active {
	background: #e8f4fd;
	color: #333;
}

.blast-detail-type img {
	width: 16px;
	height: 16px;
	opacity: 0.5;
}

.blast-detail-type.active img {
	opacity: 1;
}

.blast-detail-subject {
	color: #333;
	font-size: 18px;
	font-weight: 600;
	text-align: left;
	margin-bottom: 10px;
}

.blast-detail-status {
	margin-bottom: 10px;
}

.blast-detail-date {
	display: flex;
	align-items: center;
	font-size: 14px;
	color: #666;
	margin-bottom: 15px;
}

.blast-detail-stats {
	display: flex;
	justify-content: center;
	gap: 20px;
	padding: 15px 0;
	border-top: 1px solid #eee;
	margin-top: 10px;
}

.blast-stat {
	text-align: center;
}

.blast-stat-num {
	font-size: 24px;
	font-weight: 600;
	color: #624691;
}

.blast-stat-label {
	font-size: 11px;
	color: #999;
	text-transform: uppercase;
}

.blast-detail-actions {
	display: flex;
	justify-content: center;
	gap: 10px;
    padding: 0px 5px;
	border-top: 1px solid #eee;
}

/* Reschedule Form */
.form-group {
	margin-bottom: 15px;
}

.form-group label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #666;
	margin-bottom: 5px;
	text-transform: uppercase;
}

.form-value {
	font-size: 14px;
	color: #333;
	padding: 8px 0;
}

.form-input {
	width: 100%;
	padding: 10px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-sizing: border-box;
}

.form-input:focus {
	border-color: #624691;
	outline: none;
}

.form-error {
	color: #dc3545;
	font-size: 13px;
	margin-top: 10px;
}

/* Mobile responsiveness */
@media only screen and (max-width: 768px) {
	.title button {
		margin: 0px 0px 0px 4px;
	}
	.top-buttons {
		display: block;
	}
	.blast-buttons {
		display: none;
	}
	.blast-view-toggle {
		position: relative;
		top: 0;
		right: 0;
		justify-content: center;
		margin-top: 10px;
	}

	.blast-calendar .tbl-cell {
		min-height: 60px;
		padding: 4px;
	}

	.blast-cal-day {
		font-size: 12px;
		margin-bottom: 4px;
	}

	.blast-cal-icon {
		padding: 2px 3px;
	}

	.blast-cal-icon img {
		width: 12px;
		height: 12px;
	}

	.blast-day-detail {
		margin: 10px;
		padding: 15px;
	}
}

/* ============================================
   CUSTOM INVOICE STYLES
   ============================================ */

.chooser-invoice {
	width: calc(100% - 40px);
	max-width: 600px;
}

.chooser-invoice-summary {
	width: calc(100% - 40px);
	max-width: 500px;
}

.chooser-invoice .title {
	display: flex;
	align-items: center;
}
.chooser-invoice .title > span {
	flex: 1;
}
.invoice-status-toggles {
	display: flex;
	gap: 0;
	margin-right: 10px;
}
button.invoice-status-toggle,
.invoice-status-toggle {
	margin: 0px;
	padding: 5px 12px;
	font-size: 11px;
	border: 1px solid #ccc;
	background: #f5f5f5;
	color: #666;
	cursor: pointer;
	transition: all 0.2s;
    border-radius: 0px;
	text-shadow: none;
}
.invoice-status-toggle:first-child {
	border-radius: 4px 0 0 4px;
}
.invoice-status-toggle:last-child {
	border-radius: 0 4px 4px 0;
}
.invoice-status-toggle:not(:first-child) {
	border-left: none;
}
.invoice-status-toggle:hover {
	background: #e8e8e8;
}
.invoice-status-toggle.active {
	background: #5d45a2;
	border-color: #443287;
	color: #fff;
}

.invoice-form {
}
.invoice-header {
	display: flex;
	flex-direction: row;
	gap: 16px;
    margin: 15px 0px 30px;
}
.invoice-header-group {
	display: flex;
	gap: 16px;
}
.invoice-field {
	flex: 1;
}
.invoice-field > label {
	display: block;
	font-size: 11px;
	color: #888;
	margin-bottom: 5px;
	text-transform: uppercase;
	text-align: left;
}
.invoice-field input {
	width: 100%;
    border: 0px;
	margin-bottom: 0px;
}

.invoice-member {
	flex: 1.7;
}

.invoice-member-label {
	color: #888;
	font-size: 11px;
	margin-right: 10px;
}

.invoice-member-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

.invoice-member-name {
	font-weight: bold;
	color: #333;
	padding: 8px 0;
}

.invoice-member-clickable {
	cursor: pointer;
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.invoice-member-clickable:hover { color: var(--brand-color, #4a9); }

.invoice-billto-search {
	display: flex;
	align-items: center;
	gap: 10px;
}

.invoice-billto-cancel {
	font-size: 12px;
	color: #999;
	cursor: pointer;
	white-space: nowrap;
}
.invoice-billto-cancel:hover { color: #333; }

.invoice-items-header {
	background-color: #eee;
	padding: 8px 10px;
	margin: 0px 0px;
	font-size: 11px;
	font-weight: bold;
	color: #666;
	text-transform: uppercase;
}

.invoice-items {
	margin: 0px 0px;
}

.invoice-item {
	padding: 2px 0px;
	border-bottom: 1px solid #f0f0f0;
	display: flex;
	gap: 10px;
}
.invoice-item:hover {
	background-color: #fafafa;
}
.invoice-item-description {
	white-space: nowrap;
}

.invoice-item textarea,
.invoice-item input[type="text"],
.invoice-item input[type="number"] {
	margin-bottom: 0px;
	padding: 15px 8px;
	font-size: 13px;
    border: 0px;
	resize: none;
}
.invoice-item-multi textarea {
	width: calc(100% - 25px);
    line-height: 20px;
    padding: 14px 8px;
}

.invoice-item input[type="number"] {
	text-align: center;
}

.invoice-price-input {
	position: relative;
}

/* A failed save outlines what it needs in red; the class drops after 5s and
   the transition fades the border back */
.invoice-form input, .invoice-form textarea {
	transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.invoice-form input.inv-invalid, .invoice-form textarea.inv-invalid, .invoice-form .inv-invalid input {
	border-color: #b3261e !important;
	box-shadow: 0 0 0 1px #b3261e;
}

.invoice-currency {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
	color: #888;
	font-size: 13px;
}

.invoice-price-input input {
	padding-left: 20px;
}

.invoice-item-total {
	font-weight: bold;
	color: #333;
	text-align: right;
	padding-right: 5px;
	line-height: 48px;
}

.invoice-item-remove {
	cursor: pointer;
	color: #bbb;
	font-size: 20px;
	font-weight: 700;
    line-height: 48px;
    padding: 0px 5px;
}
.invoice-item-remove:hover {
	color: #c00;
}

.invoice-add-item {
	padding: 15px 0px;
	text-align: left;
}

.invoice-footer {
	display: flex;
	justify-content: space-between;
	padding: 15px 0px;
    margin: 0px 0px;
}
.invoice-footer button {
	margin-left: 20px;
}
.invoice-total {
	font-size: 20px;
	font-weight: bold;
	color: #333;
	text-align: right;
    white-space: nowrap;
}
.invoice-total-label {
	font-size: 14px;
	font-weight: bold;
	color: #333;
	text-align: right;
	padding-right: 15px;
}

/* Due-date reminder settings tucked behind a caret on the Due Date label */
.invoice-due-caret {
	cursor: pointer;
	color: #b3a5d6;
	font-size: 13px;
	display: inline-block;
	transition: transform 0.15s;
}
.invoice-due-caret.open {
	transform: rotate(180deg);
}
.invoice-reminders-panel {
	position: absolute;
	right: 0px;
	top: 100%;
	z-index: 40;
	width: 220px;
	margin-top: 4px;
	padding: 10px 12px;
	background: #ffffff;
	border: 1px solid #ececf2;
	border-radius: 6px;
	box-shadow: 0px 4px 14px rgba(0,0,0,0.12);
}
.invoice-field {
	position: relative;
}
.invoice-reminder-caption {
	white-space: nowrap;
}
.invoice-reminder-caption.off {
	color: #aaa;
	font-style: italic;
}
.invoice-reminders-title {
	font-size: 11px;
	font-weight: 700;
	color: #888;
	letter-spacing: 0.5px;
	margin-bottom: 8px;
}
.invoice-reminder-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0px;
	font-size: 12.5px;
	color: #555;
}
.invoice-reminder-row input {
	width: 40px;
	text-align: center;
	margin: 0px;
	padding: 4px 2px;
	font-size: 13px;
	height: auto;
}
.invoice-reminder-step {
	width: 24px;
	height: 24px;
	line-height: 1;
	padding: 0px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	color: #666;
	cursor: pointer;
	font-size: 14px;
}
.invoice-reminder-step:hover {
	background: #f0eef8;
}
.invoice-reminder-caption {
	margin-left: 4px;
}


/* Estimate approval bar on the public page */
.invoice-approval {
	padding: 18px 20px;
	margin-bottom: 15px;
}
.invoice-approval-title {
	font-size: 16px;
	font-weight: 700;
	color: #333;
	margin-bottom: 12px;
}
.invoice-approval-actions {
	display: flex;
	gap: 10px;
}
.invoice-approval-decline {
	margin-top: 12px;
}
.invoice-approval-decline textarea {
	width: 100%;
	font-size: 13px;
	margin-bottom: 8px;
}
.invoice-approval-done {
	font-size: 14px;
	font-weight: 600;
	color: #1e7a44;
}
.invoice-approval-prior {
	font-size: 12.5px;
	color: #8a6d1a;
	margin-bottom: 8px;
}
/* Customer responses shown to staff on the invoice summary */
.invoice-comments {
	margin-top: 12px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}
.invoice-comments-title {
	font-size: 11px;
	font-weight: 700;
	color: #888;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
}
.invoice-comment {
	display: flex;
	align-items: baseline;
	flex-flow: wrap;
	gap: 8px;
	font-size: 13px;
	padding: 3px 0px;
}
.invoice-comment-type {
	font-weight: 700;
}
.invoice-comment-approved {
	color: #1e7a44;
}
.invoice-comment-declined {
	color: #c0392b;
}
.invoice-comment-amount {
	font-weight: 700;
	color: #333;
}
.invoice-comment-by {
	font-weight: 600;
	color: #333;
}
.invoice-comment-date {
	font-size: 11.5px;
	color: #999;
}
.invoice-comment-note {
	flex: 1 1 100%;
	color: #555;
	font-style: italic;
	padding-left: 22px;
}

/* Payment schedule readout under the total (staff modal + public page) */
.invoice-schedule {
	margin: 8px 0px 0px;
	border-top: 1px solid #eee;
	padding-top: 8px;
}
.invoice-schedule-row {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 13px;
	color: #444;
	padding: 3px 0px;
}
.invoice-schedule-check {
	width: 14px;
	color: #1e7a44;
	font-weight: 700;
}
.invoice-schedule-label {
	font-weight: 600;
	min-width: 96px;
}
.invoice-schedule-pct {
	color: #888;
	font-size: 12px;
	min-width: 34px;
	text-align: right;
}
.invoice-schedule-amount {
	font-weight: 700;
	min-width: 62px;
	text-align: right;
}
.invoice-schedule-due {
	color: #777;
	font-size: 12.5px;
}
.invoice-schedule-paid {
	opacity: 0.55;
}

/* Split payments: the schedule editor under the grand total */
.invoice-splits {
	margin: 10px 0px 0px;
}
.invoice-splits-btn {
	display: block;
	margin: 8px 0px 0px auto;
}
.invoice-splits-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 700;
	color: #888;
	letter-spacing: 0.5px;
	margin-bottom: 6px;
	background-color: #eee;
	padding: 10px;
}
.invoice-splits-remove {
	cursor: pointer;
	font-size: 16px;
	color: #bbb;
	line-height: 1;
}
.invoice-splits-remove:hover {
	color: #c0392b;
}
.invoice-split-row {
	display: flex;
	align-items: center;
	flex-flow: wrap;
	gap: 10px;
	padding: 6px 0px;
	border-top: 1px solid #f4f4f4;
}
.invoice-split-info {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 210px;
}
.invoice-split-label {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	min-width: 90px;
}
.invoice-split-pct {
	font-size: 12px;
	color: #888;
	min-width: 34px;
	text-align: right;
}
.invoice-split-amount {
	font-size: 13px;
	font-weight: 700;
	color: #1e7a44;
	min-width: 62px;
	text-align: right;
}
.invoice-split-click {
	cursor: pointer;
}
/* The inline edit wears the figure's own clothes - no input chrome */
.invoice-split-row input.invoice-split-inline {
	border: 0px;
	background: transparent;
	padding: 0px;
	margin: 0px;
	font: inherit;
	color: inherit;
	text-align: right;
	outline: none;
	height: auto;
	box-shadow: none;
}
.invoice-split-pct input.invoice-split-inline {
	width: 40px;
}
.invoice-split-amount input.invoice-split-inline {
	width: 64px;
}
.invoice-split-row input[type="range"] {
	flex: 1 1 120px;
	min-width: 100px;
	margin: 0px;
	padding: 0px;
	accent-color: #443287;
}
.invoice-split-extras {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 100%;
	padding-left: 24px;
}
.invoice-split-extras input.invoice-split-note {
	flex: 1;
	margin: 0px;
	font-size: 12.5px;
	border: 0px;
}

.invoice-error {
	background-color: #fee;
	border: 1px solid #c00;
	color: #c00;
	padding: 10px 15px;
    margin: 0px 0px 15px;
	border-radius: 4px;
	font-size: 13px;
}

/* Invoice Send chooser: email or text - centered like the Email/Text popups */
.chooser-send { max-width: 300px; }
.invoice-send-opts { display: flex; flex-direction: column; gap: 10px; padding: 6px 0px 4px; }
.invoice-send-opts a { display: block; text-decoration: none; }
.invoice-send-opts .btn-long { width: 100%; margin: 0px; box-sizing: border-box; }
.invoice-send-opts img { max-height: 20px; vertical-align: middle; margin-right: 6px; }
/* Text Invoice popup: the prepared payment request and its send link */
.register-fields textarea.pop-text-body { min-height: 44px; margin-bottom: 12px; font-family: inherit; line-height: 1.4; resize: none; overflow: hidden; }
.pop-text-label { align-items: center; }
.pop-text-langs { display: flex; gap: 4px; margin-left: auto; }
.pop-text-langs span { padding: 1px 8px; border: 1px solid #ccc; border-radius: 10px; font-size: 11px; font-weight: 700; color: #888; cursor: pointer; }
.pop-text-langs span.on { background: #1c5bb8; border-color: #1c5bb8; color: #fff; }
.pop-text-send { display: block; text-decoration: none; }
.pop-text-send .btn-long { margin: 0px; }
.invoice-actions {
	display: flex;
	gap: 10px;
	padding-top: 15px;
}
.invoice-settings {
	margin-top: 10px;
	border-top: 1px solid #eee;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 12px;
	padding: 12px 0;
}
.invoice-recurring-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	margin: 0;
	flex: 0 0 auto;
	white-space: nowrap;
}
.invoice-recurring-toggle input {
	width: auto;
	margin: 0;
}
.invoice-recurring-freq {
	width: auto;
	flex: 0 1 auto;
	margin: -6px 0px;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
}
.invoice-recurring-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
/* A rule between the toggle rows, none above the first */
.invoice-settings > .invoice-recurring-sub + .invoice-recurring-sub { border-top: 1px solid #eee; padding-top: 10px; }
.invoice-recurring-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.invoice-settings-click { cursor: pointer; margin: 0px; font-weight: normal; }
.invoice-recurring-status { font-size: 12px; color: #999; white-space: nowrap; }
.invoice-recurring-status.on { color: #626262; }
.invoice-pay-methods { gap: 14px; font-size: 13px; }
.invoice-pay-methods.off { opacity: 0.5; }
.invoice-pay-methods .invoice-recurring-toggle { margin: 0px; }
.invoice-pay-method-locked { cursor: not-allowed; }
.invoice-pay-method-locked input { cursor: not-allowed; }
.invoice-recurring-freq:disabled { opacity: 0.5; background-color: #f5f5f5; cursor: not-allowed; }
/* On phones the recurring toggle + cadence dropdown take their own row */
@media (max-width: 600px) {
	.invoice-settings {
		flex-wrap: wrap;
	}
	.invoice-recurring-sub {
		flex-basis: 100%;
		flex-wrap: wrap;
	}
}

.invoice-actions .tbl-cell {
	padding: 0px 5px;
}

.invoice-actions .tbl-cell:first-child {
	padding-left: 0px;
}

.invoice-actions .tbl-cell:last-child {
	padding-right: 0px;
}

.invoice-copy-success {
	background-color: #dfd;
	border: 1px solid #0a0;
	color: #080;
	padding: 10px 15px;
	margin-top: 15px;
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
}

/* Invoice Summary Styles */
.invoice-summary {
	padding: 0px 20px 0px;
}

.invoice-summary-header {
	display: flex;
	justify-content: space-between;
	padding: 15px 0px;
	border-bottom: 1px solid #eee;
}

.invoice-summary-label {
	font-size: 10px;
	color: #888;
	text-transform: uppercase;
	margin-bottom: 5px;
}

.invoice-summary-value {
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

.invoice-status-unpaid {
	/* Orange, matching the list: unpaid and partly paid must not read alike */
	color: #8a4b08;
	background-color: #ffe0b2;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

.invoice-status-paid {
	color: #080;
	background-color: #dfd;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

.invoice-status-pending {
	color: #004085;
	background-color: #cce5ff;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

.invoice-status-estimate {
	color: #4b2e83;
	background-color: #e7e0f5;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

.invoice-status-draft {
	color: #383d41;
	background-color: #e2e3e5;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

.invoice-status-partial {
	color: #856404;
	background-color: #fff3cd;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

.invoice-status-canceled {
	color: #721c24;
	background-color: #f8d7da;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

/* Same red the list already gives a failed invoice; without it the pill rendered as
   bare text while every other status had one */
.invoice-status-failed {
	color: #721c24;
	background-color: #f8d7da;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
}

/* The decline in full, across the top of the invoice details. Wraps rather than
   truncates — the list already has the short version. */
.invoice-failed-banner {
	margin: 0px 0px 12px;
	padding: 10px 12px;
	color: #721c24;
	background-color: #f8d7da;
	border-radius: 4px;
	font-size: 12px;
	line-height: 1.45;
}

/* Renews sits between Bill To and Status, so it reads as its own fact about the
   invoice rather than a footnote to the status */
.invoice-summary-renew,
.invoice-summary-status {
	text-align: center;
}

.invoice-renew-badge {
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 11px;
	text-transform: uppercase;
	white-space: nowrap;
}

.invoice-renew-on {
	color: #004085;
	background-color: #cce5ff;
}

.invoice-renew-off {
	color: #383d41;
	background-color: #e2e3e5;
}

/* Payments applied to an invoice (preview) */
.invoice-summary-subtotal { font-weight: 700; }
.invoice-summary-fee-total { font-weight: 700; }
.invoice-summary-payment {
	display: flex;
	align-items: center;
	justify-content: right;
	gap: 20px;
	font-size: 12px;
	color: #666;
	padding: 3px 0;
}
.invoice-payment-date { width: 90px; flex: 0 0 auto; }
.invoice-payment-method { flex: 0.8; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.invoice-payment-amount { flex: 0 0 auto; width: 90px; text-align: right; }
.invoice-payment-balance { font-weight: bold; color: #333; border-top: 1px solid #eee; margin-top: 4px; padding-top: 6px; }

.invoice-summary-items {
	margin: 15px -20px 0px;
}

.invoice-summary-items-header {
	background-color: #eee;
	padding: 8px 20px;
	font-size: 11px;
	font-weight: bold;
	color: #666;
	text-transform: uppercase;
}

.invoice-summary-item {
	padding: 10px 20px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
}

.invoice-summary-lines {
	margin: 0px -20px 0px;
	padding: 12px 20px 12px;
	background-color: #eee;
}

.invoice-summary-line {
	display: flex;
	justify-content: flex-end;
	gap: 20px;
	font-size: 13px;
	color: #555;
	padding: 6px 0;
}

.invoice-summary-line span:last-child {
	width: 90px;
	text-align: right;
}

.invoice-summary-total {
	padding: 15px 20px;
	text-align: right;
	border-top: 2px solid #ccc;
	margin: 0px -20px;
}

.invoice-summary-total-label {
	font-weight: bold;
	color: #333;
	margin-right: 15px;
}

.invoice-summary-total-amount {
	font-size: 20px;
	font-weight: bold;
	color: #333;
}

.invoice-summary-actions {
	display: flex;
	gap: 10px;
	padding-top: 15px;
	border-top: 1px solid #eee;
}

/* Even thirds, or even halves once a paid invoice drops the Edit button:
   a zero basis sizes them off the row rather than off their labels */
.invoice-summary-actions > button {
	flex: 1 1 0;
}

/* Responsive Invoice Styles */
@media (max-width: 600px) {
	.invoice-form {
		padding: 0px 0px 20px;
	}
	.invoice-header {
		gap: 5px;
		flex-direction: column;
	}
	.invoice-header-group {
		gap: 5px;
	}
	.invoice-member {
		flex: 1;
	}

	.invoice-items-header {
		display: none;
    	margin: 0px -20px;
	}
	.invoice-items {
		margin: 0px -20px;
	}
	.invoice-item {
		gap: 5px;
    	padding: 2px 15px;
	}

	.invoice-item-total {
		padding-left: 0px;
	}
}

/* Invoice line item descriptions have no length limit: long words and links wrap
   instead of stretching their row, and detailed views keep typed line breaks */
.line-item-text { overflow-wrap: anywhere; word-break: break-word; }
.line-item-breaks { white-space: pre-line; }
/* A long description makes a tall row: the amounts stay level with its first line */
.invoice-summary-item .tbl-cell { vertical-align: top; }

/* ===== Invoices admin screen ===== */
.invoices-screen { text-align: left; }
.invoices-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 10px 0 20px;
}
.invoices-title { margin: 0; font-size: 26px; color: #333; text-transform: uppercase; }
.invoices-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-med { padding: 8px 16px; font-size: 13px; }
.invoices-btn-icon { height: 14px; vertical-align: middle; margin-right: 4px; }
/* Phones have no side padding to pull into, so the boxes stay inside the screen (the row ran 20px wide and the page scrolled sideways) */
.invoices-metrics { margin: 0 0 20px; }
/* ...and the title row lines up with the boxes instead of touching the screen edge */
@media only screen and (max-width: 599px) { .invoices-topbar { padding: 0 10px; } }
@media only screen and (min-width: 600px) { .invoices-metrics { margin: 0 -10px 20px; } }
.box-sel { outline: 2px solid var(--sel-color, #4a9); outline-offset: -2px; }
.invoices-title-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.invoices-cust-filter { position: relative; }
.invoices-cust-filter input { margin: 5px 0px 0px; padding: 8px 12px; font-size: 13px; width: 210px; box-sizing: border-box; }
.invoices-cust-filter-drop { position: absolute; top: 100%; left: 0; right: 0; background-color: #fff; border: 1px solid #ddd; border-radius: 0 0 6px 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.15); z-index: 30; text-align: left; }
.invoices-cust-filter-opt { padding: 8px 10px; cursor: pointer; font-size: 13px; }
.invoices-cust-filter-opt:hover, .invoices-cust-filter-opt.active { background-color: #f2f6fb; }

/* Apple Pay / Google Pay (Stripe Payment Request Button) */
.wallet-pay-button { margin: 0 0 12px; }
.financing-element { margin: 0 0 12px; min-height: 40px; }
/* Pay over time button: flat black, square corners, "Pay $X" then the provider's badge, like the
   providers' own buttons. The site-wide button:hover/:focus/[disabled] rules are overridden so the
   label stays white */
.btn-financing { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; margin: 0 0 12px; padding: 0 16px; border: 0; border-radius: 0; background: #000; color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-shadow: none; cursor: pointer; }
.btn-financing:hover, .btn-financing:focus { background: #2c2c2c; color: #fff; }
.btn-financing:active { background: #1a1a1a; color: #fff; }
.btn-financing:disabled, .btn-financing[disabled] { background: #000; color: #fff; opacity: 0.6; cursor: default; }
.btn-financing .financing-mark { display: flex; }
/* The pay-form's generic button-icon sizing (20px square) would shrink the badge; it keeps its
   51:22 shape at 26px tall like Klarna's own button */
.btn-financing .financing-mark svg { height: 26px !important; width: auto !important; max-width: none !important; display: block; }
.btn-financing .financing-mark .affirm-badge { display: flex; align-items: center; justify-content: center; height: 26px; padding: 0 8px; border-radius: 4px; background: #1D1C46; box-sizing: border-box; }
.btn-financing .financing-mark .affirm-badge img { height: 15px !important; width: auto !important; max-width: none !important; display: block; margin-top: -3.5px; }
.financing-loading { color: #999; font-size: 13px; text-align: center; padding: 8px 0; }
/* Cash App Pay button: flat black like the wallet button, official symbol in brand green */
.btn-cashapp { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 44px; margin: 0 0 12px; padding: 0 16px; border: 0; border-radius: 4px; background: #000; color: #fff; font-size: 16px; font-weight: 600; line-height: 1; text-shadow: none; cursor: pointer; }
.btn-cashapp svg { width: 22px; height: 22px; flex: none; }
/* Wallet button: same black button, Apple Pay / Google Pay mark at its tab size */
.btn-wallet .pay-brand-icons { display: inline-flex; margin: 0; }
.btn-wallet .pay-brand-icons svg { width: auto; height: 24px; overflow: visible; }
/* The site-wide button:hover/:focus/[disabled] rules recolor text and background; keep the
   label white and only lift the black a shade, the way the wallet button behaves */
.btn-cashapp:hover, .btn-cashapp:focus { background: #2c2c2c; color: #fff; }
.btn-cashapp:active { background: #1a1a1a; color: #fff; }
.btn-cashapp:disabled, .btn-cashapp[disabled] { background: #000; color: #fff; opacity: 0.6; cursor: default; }
.wallet-pay-divider { display: flex; align-items: center; gap: 10px; margin: 0 auto 12px; max-width: 300px; color: #999; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.wallet-pay-divider:before, .wallet-pay-divider:after { content: ''; flex: 1; border-top: 1px solid #ccc; }
.pay-method-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.pay-method-tab { padding: 8px 10px; font-size: 13px; border: 1px solid #ddd; border-radius: 4px; background: #f7f7f7; color: #555; cursor: pointer; }
.pay-method-tab.active { background: #006dcc; border-color: #0044cc; color: #fff; text-shadow: none; }
.pay-method-tab, .invoice-pay-method-tabs .invoice-pay-tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; }
/* Tab widths follow their content (basis auto) so a tab with four card marks gets the room to keep them
   on one row, while the spare width is still shared evenly; the marks never wrap on wide screens */
.invoice-pay-method-tabs .invoice-pay-tab { flex: 1 1 auto; margin: 0; }
.invoice-pay-method-tabs .invoice-pay-tab .pay-brand-icons { flex-wrap: nowrap; }
/* Narrow screens: two tabs per row instead of four slivers */
@media (max-width: 640px) {
	.invoice-pay-method-tabs { flex-wrap: wrap; }
	/* border-box so the tab's own padding does not push the pair past 100% */
	.invoice-pay-method-tabs .invoice-pay-tab { flex: 1 1 calc(50% - 4px); min-width: 0; box-sizing: border-box; }
	.invoice-pay-method-tabs .invoice-pay-tab .pay-brand-icons { flex-wrap: wrap; }
}
.pay-method-tab .pay-brand-icons, .invoice-pay-method-tabs .invoice-pay-tab .pay-brand-icons { margin: 0; gap: 4px; flex-wrap: nowrap; justify-content: center; }
.pay-method-tab .pay-brand-icons svg, .invoice-pay-method-tabs .invoice-pay-tab .pay-brand-icons svg { height: 20px; }
/* Affirm badge (white + indigo wordmark on Affirm's dark ground) in the tab, sized like the Klarna badge */
.invoice-pay-method-tabs .invoice-pay-tab .pay-brand-icons .affirm-badge { display: flex; align-items: center; justify-content: center; height: 20px; padding: 0 6px; border-radius: 4px; background: #1D1C46; box-sizing: border-box; }
.invoice-pay-method-tabs .invoice-pay-tab .pay-brand-icons .affirm-badge img { height: 12px; width: auto; max-width: none; display: block; margin-top: -1px; }
.invoice-pay-method-tabs { display: flex; gap: 8px; margin: 0 0 14px; }
.pay-brand-icons { display: flex; justify-content: center; gap: 8px; margin: 2px 0 14px; }
.pay-brand-icons svg { height: 26px; width: auto; max-width: none; display: block; }
.invoices-filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #eef4f2;
	color: #333;
	padding: 5px 12px;
	border-radius: 14px;
	font-size: 13px;
}
.invoices-filter-pill .close { cursor: pointer; font-weight: bold; }
.invoices-empty {
	text-align: center;
	background-color: #f6f6f6;
	color: #555;
	font-size: 11px;
	padding: 10px;
	box-shadow: 0 0 0px rgba(0, 0, 0, 0.19), 0 0px 2px rgba(0, 0, 0, 0.12);
}
.invoice-row {
	background: #fff;
	border: 1px solid #eee;
	border-radius: 6px;
	margin-bottom: 8px;
	padding: 12px 16px;
	cursor: pointer;
	transition: box-shadow .15s;
}
.invoice-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.invoice-row-main { display: flex; align-items: center; gap: 16px; }
/* Background-image div (profile pic) needs explicit size or it collapses;
   the logo img sizes itself via .invoice-row-pic-logo */
div.invoice-row-pic { width: 38px; height: 38px; margin: 0px 0px 0px 62px; }
.invoice-row-pic {
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	background-color: #eee;
	flex: 0 0 auto;
	cursor: pointer;
}
.invoice-row-logo-wrap { width: 100px; text-align: right; flex: 0 0 auto; cursor: pointer; }
.invoice-row-pic-logo { display: inline-block; width: auto; max-width: 100px; max-height: 36px; border-radius: 0; background-color: transparent; }
.invoice-row-pic:hover { box-shadow: 0 0 0 2px var(--sel-color, #4a9); }
.invoice-row-who { display: contents; }
.invoice-row-right { display: contents; }
.invoice-row-ref { flex: 0 0 auto; min-width: 68px; }
.invoice-row-ref .invoice-row-sub:first-child { font-size: 16px; color: #444; font-weight: 400; }
.invoice-row-customer { flex: 1; min-width: 0; }
.invoice-row-name { font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-row-name-sub { font-weight: normal; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invoice-row-sub { font-size: 12px; color: #999; }
/* Documents list: its sub lines stay on one line */
.documents-row-sub { white-space: nowrap; }
.invoice-row-status { flex: 1; min-width: 90px; text-align: center; }
.invoice-status-amount { margin-right: 6px; font-size: 12px; font-weight: bold; color: #555; white-space: nowrap; }
.invoice-overdue-amount { color: #721c24; }
.invoice-row-due { flex: 1; width: 110px; text-align: center; }
.invoice-row-due-date { font-size: 13px; color: #333; margin-top: 2px; }
.invoice-row-due-sub { font-size: 11px; color: #999; }
.invoice-row-due-overdue { color: #721c24; font-weight: bold; }
.invoice-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}
.invoice-badge-paid { background: #d4edda; color: #155724; }
/* Tracking, folded away under the invoice actions. Mirrors the task popup's expander. */
/* A plain toggle rather than a button: btn-long supplies the background, border and
   shadow, and none of them suit a control that only folds a panel open */
.invoice-more-btn {
	margin-top: 14px;
	background: none;
	border: none;
	box-shadow: none;
}

.invoice-expand {
	padding: 14px 4px 4px;
	font-size: 13px;
}

.invoice-track-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 7px 0;
	border-bottom: 1px solid #f0f0f0;
}

.invoice-track-row:last-child {
	border-bottom: none;
}

/* Unlit until it has happened, the same distinction the row's dots make */
.invoice-track-label {
	display: flex;
	align-items: center;
	gap: 7px;
	color: #999;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.5px;
}

.invoice-track-label.on {
	color: #4a9;
}

/* The list's marks at the size they sit at there: dimmed until the step happens, and
   the image tinted rather than swapped, as the row does it */
.invoice-track-icon {
	max-width: 12px;
	max-height: 12px;
	opacity: .35;
}

.invoice-track-label.on .invoice-track-icon {
	opacity: 1;
	filter: brightness(0) saturate(100%) invert(56%) sepia(38%) saturate(560%) hue-rotate(115deg);
}

.invoice-track-glyph {
	font-size: 12px;
	line-height: 1;
	width: 12px;
	text-align: center;
	opacity: .45;
}

.invoice-track-label.on .invoice-track-glyph {
	opacity: 1;
}

.invoice-track-value {
	color: #555;
	text-align: right;
}

/* A member's own invoice, linked from their purchase history to the copy they were
   emailed. Reads as the title it replaces until hovered. */
.invoice-own-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px dotted #bbb;
}

.invoice-own-link:hover {
	color: #668cc9;
	border-bottom-color: #668cc9;
}

/* The invoice a modal is currently about. The list stays visible behind every dialog,
   and refreshes under them, so the row it belongs to says which one. */
.invoice-row.invoice-row-open {
	background-color: #eef4fb;
	box-shadow: inset 3px 0 0 #668cc9;
}

/* Orange, so an unpaid invoice is not mistaken for a partly paid one */
.invoice-badge-unpaid { background: #ffe0b2; color: #8a4b08; }
.invoice-badge-overdue { background: #f8d7da; color: #721c24; }
.invoice-badge-draft { background: #e2e3e5; color: #383d41; }
.invoice-badge-estimate { background: #e7e0f5; color: #4b2e83; }
.invoice-badge-pending { background: #cce5ff; color: #004085; }
.invoice-badge-failed { background: #f8d7da; color: #721c24; }
.invoice-badge-partial { background: #fff3cd; color: #856404; }
.invoice-badge-canceled { background: #f8d7da; color: #721c24; }
/* Its own badge beside the status: whether the invoice bills again is a separate
   fact from where it is in its life, and either can be true without the other */
.invoice-badge-renews { background: #cce5ff; padding: 6px 10px; vertical-align: middle; }
/* Blue while it is still going to happen, grey once it already has */
.invoice-badge-renewed { background: #e2e3e5; }

/* The Pay Invoice modal reports a decline here. The class was only ever styled on the
   public invoice page, so on this screen the message rendered as bare text and read
   as though nothing had happened. */
.payment-error {
	color: #721c24;
	background: #f8d7da;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 12px;
	font-size: 13px;
}
.invoice-badge-renews-icon { height: 12px; opacity: 0.7; vertical-align: middle; display: block; }
/* A badge uppercases its own text, and its tooltip is a pseudo-element inside it, so
   the tooltip inherits that and shouts the hint back. Applies to every badge now that
   the status one is hinted too. */
.invoice-badge:after { text-transform: none; }
.invoice-row-track { display: flex; gap: 6px; align-items: center; }
.invoice-track {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	color: #bbb;
	font-size: 12px;
}
.invoice-track img { max-width: 12px; max-height: 12px; opacity: .35; }
.invoice-track img.invoice-track-esign { max-width: 16px; }
.invoice-track.on { background: #4a9; color: #fff; }
.invoice-track.on img { opacity: 1; filter: brightness(0) invert(1); }
.invoice-row-amount { width: 100px; text-align: right; font-weight: bold; font-size: 16px; color: #333; }
.register-fields .rf-input { width: 100%; box-sizing: border-box; margin-bottom: 10px; padding: 11px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 15px; background: #fff; }
.register-fields .rf-gender { display: flex; gap: 10px; margin-bottom: 10px; }
.register-fields .rf-gender-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; font-size: 15px; cursor: pointer; }
.register-fields .rf-gender-opt input { display: none; }
.register-fields .rf-gender-opt img { height: 22px; margin: -2px 0px; }
.register-fields .rf-gender-sel { border-color: #1c5bb8; box-shadow: 0 0 0 1px #1c5bb8 inset; }
.register-fields .rf-gender.rf-err .rf-gender-opt { border-color: #c0392b; }
.register-fields .rf-row { display: flex; gap: 10px; }
.register-fields .rf-row .rf-input { flex: 1; min-width: 0; }
.register-fields .rf-err { border-color: #dc3545 !important; }
.register-fields .rf-card-label { font-size: 12px; color: #777; margin: 4px 0 6px; }
.register-fields .rf-card-el { padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; margin-bottom: 10px; }
.register-fields .rf-card-error { color: #dc3545; font-size: 12px; margin: -4px 0 10px; }
.invoice-billto-addr { font-size: 13px; color: #666; line-height: 1.4; }
.invoice-terms-field textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 60px; }
.invoice-terms-display { font-size: 13px; color: #666; line-height: 1.5; padding: 12px 0px; border-top: 1px solid #eee; }
.markup-body.invoice-terms-display { background-color: transparent; font-size: 13px; color: #666; }
/* Invoice signature line (summary + public page), the document's line */
.invoice-sig-section { margin-top: 28px; }
.invoice-sig-section.invoice-sig-summary { margin-top: 0px; }
.invoice-sig-img { max-height: 100px; width: 300px; display: block; margin-bottom: -10px; }
.invoice-sig-line { border-bottom: 1px solid #333; width: 300px; margin: 60px 0px 6px; }
/* Unsigned invoice: the signature line is a shortcut up to the signature box */
.invoice-sig-click { cursor: pointer; }
.invoice-sig-click:hover .invoice-sig-line { border-bottom-color: #1a54c9; }
.invoice-sig-click:hover .invoice-sig-label { color: #1a54c9; }
.invoice-sig-img + .invoice-sig-line { margin-top: 0px; }
.invoice-sig-row { display: flex; justify-content: space-between; gap: 12px; width: 300px; max-width: 100%; font-size: 12px; color: #666; }
.invoice-sig-label { white-space: nowrap; }
.invoice-sig-signed { text-align: right; }
.invoice-sig-date { white-space: nowrap; }
/* The wrapper stands in for the image: same width, and the line still hugs it */
.invoice-sig-wrap { position: relative; display: block; width: 300px; max-width: 100%; }
.invoice-sig-wrap + .invoice-sig-line { margin-top: 0px; }
.invoice-sig-remove { display: none; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0px; border: none; border-radius: 50%; background: #aaa; color: #fff; font-size: 16px; line-height: 22px; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.invoice-sig-wrap:hover .invoice-sig-remove { display: block; }
.invoice-sig-remove:hover { background: #c0392b; color: #fff; }
.invoice-public-sign-first { background: #fff8e6; color: #8a6d1a; }
/* Sign-then-pay steps on the public invoice */
.invoice-steps { display: flex; align-items: flex-start; justify-content: center; margin: 0 0 18px; }
.invoice-step { display: flex; flex-direction: column; align-items: center; width: 110px; }
.invoice-step-circle { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #c9c9c9; color: #fff; font-size: 32px; font-weight: 700; line-height: 1; box-sizing: border-box; border: 3px solid transparent; }
.invoice-step-circle.done { background: #fff; }
.invoice-step-check { width: 46px; height: 46px; display: block; }
.invoice-step-line { flex: 0 0 90px; height: 4px; margin-top: 26px; border-radius: 2px; background: #d9d9d9; }
.invoice-step-label { margin-top: 8px; font-size: 13px; font-weight: 700; color: #333; }
.invoice-step-sub { font-size: 24px; line-height: 36px; color: #666; }
@media (max-width: 640px) { .invoice-step-line { flex-basis: 48px; } }
.invoice-pay-amount { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 4px; }
.invoice-pay-currency { font-size: 28px; font-weight: bold; color: #333; }
.invoice-pay-amount-input { width: 140px !important; text-align: center; font-size: 28px; font-weight: bold; color: #333; border: none; border-bottom: 2px solid #ddd; border-radius: 0; padding: 6px 4px; margin: 0px; }
.invoice-pay-amount-input:focus { outline: none; border-bottom-color: #4a9; }
.invoice-pay-balance { text-align: center; font-size: 12px; color: #999; margin-bottom: 14px; }
.invoice-pay-note input { border: 1px solid #ddd; }
.invoice-pay-card { margin-bottom: 14px; }
.invoice-pay-card-el { padding: 12px; border: 1px solid #ddd; border-radius: 4px; background: #fff; margin-bottom: 10px; }
.invoice-row-remaining { font-size: 11px; font-weight: normal; color: #0b5e52; }
/* Same look as the link invoice's New card / card-on-file tab buttons, at the original modal sizing */
.invoice-pay-forms { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
/* The rows sit together when a second one follows; the last keeps the gap below it */
.invoice-pay-forms.invoice-pay-forms-stacked { margin-bottom: 0px; }
/* Hint wrapper: a disabled button gets no hover, so the tooltip rides on this instead */
.invoice-pay-opt-wrap { flex: 1; display: flex; }
.invoice-summary-pay { margin-top: 6px; }
.invoice-pay-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 8px; font-size: 16px; border: 1px solid #ddd; background: #f7f7f7; color: #555; cursor: pointer; text-align: center; }
.invoice-pay-opt.on { background: #4a9; border-color: #4a9; color: #fff; text-shadow: none; }
.invoice-row-actions { flex: 0 0 auto; }
.invoice-action-danger { color: #c0392b; }
.invoice-field-row { display: flex; gap: 12px; }
.invoice-field-row .invoice-field { flex: 1; }
.invoice-toggle-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0;
	font-size: 14px;
	color: #555;
	cursor: pointer;
}
.invoice-toggle-row input { width: auto; margin: 0; }
.invoices-picker-hint { font-size: 12px; color: #999; margin-top: 10px; }
/* Picking which payment on an invoice to refund */
.invoice-refund-pick {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	margin-bottom: 6px;
	border: 1px solid #eee;
	border-radius: 4px;
	font-size: 14px;
	color: #555;
	cursor: pointer;
}
.invoice-refund-pick input { width: auto; margin: 0; flex: 0 0 auto; }
.invoice-refund-pick-on { border-color: #0a0; background: #f6fff6; }
.invoice-refund-pick-off { opacity: 0.5; cursor: default; }
.invoice-refund-pick-main { flex: 1; min-width: 0; text-align: left; }
.invoice-refund-pick-form { display: block; font-weight: 600; color: #333; }
.invoice-refund-pick-date { display: block; font-size: 12px; color: #999; }
.invoice-refund-pick-amount { flex: 0 0 auto; text-align: right; font-weight: 600; color: #333; }
.invoice-refund-pick-left { display: block; font-size: 11px; font-weight: normal; color: #0b5e52; }
.invoice-refund-struck { text-decoration: line-through; color: #999; font-weight: normal; }
.invoices-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: #333;
	color: #fff;
	padding: 10px 20px;
	border-radius: 20px;
	font-size: 14px;
	z-index: 9999;
}
@media (max-width: 600px) {
	.invoice-row-due { display: none; }
	/* Badge and total pair up on one line, the six tracking dots line up beneath */
	.invoice-row-right { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; }
	.invoice-row-right .invoice-row-status { order: 1; flex: 0 0 auto; min-width: 0; }
	.invoice-row-right .invoice-row-amount { order: 2; }
	.invoice-row-right .invoice-row-track { order: 3; flex-basis: 100%; justify-content: flex-end; }
	/* Image and name merge into one stacked column */
	.invoice-row-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
	.invoice-row-logo-wrap { width: auto; text-align: left; }
	div.invoice-row-pic { margin: 0; }
	.invoice-row-status { width: auto; }
	.invoice-row-amount { width: auto; }

	/* Narrow screens buy back the horizontal padding: the item and summary rows
	   need the width for their amounts, so they run closer to the modal edge */
	.invoice-summary { padding: 0px 0px 0px; }
	.invoice-summary-items { margin: 15px -10px 0px; }
	.invoice-summary-items-header { padding: 8px 5px; }
	.invoice-summary-item { padding: 10px 5px; }
	.invoice-summary-lines { margin: 0px -10px 0px; padding: 12px 5px 12px; }
	.invoice-summary-actions { gap: 1px; }

	/* Payment rows close up and let the method column take the slack, since
	   "Refund · Visa 4242 · note" is the longest thing on the row */
	.invoice-summary-payment { gap: 5px; }
	.invoice-payment-method { flex: 1; }
}

/* Weekly availability editor (calendar private tab) */
.weekly-edit-btn {
	margin: 0px 0px 0px 6px;
	padding: 5px 12px;
	font-size: 12px;
	vertical-align: middle;
}
.weekly-edit-btn img {
	height: 12px;
	vertical-align: middle;
	margin: -2px 5px 0px 0px;
}
.weekly-overlay {
	position: fixed;
	top: 0px; right: 0px; bottom: 0px; left: 0px;
	background: rgba(0,0,0,0.55);
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.weekly-modal {
	background: #fff;
	border-radius: 8px;
	width: 100%;
	max-width: 500px;
	max-height: 92vh;
	overflow-y: auto;
	box-shadow: 0 10px 40px rgba(0,0,0,0.3);
	text-align: left;
}
.weekly-title {
	padding: 14px 18px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.weekly-close {
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	color: #999;
}
.weekly-close:hover { color: #333; }
.weekly-body { padding: 14px 18px; }
.weekly-note {
	font-size: 12px;
	color: #888;
	margin-bottom: 12px;
}
.weekly-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.weekly-row .weekly-day {
	width: 100px;
	font-weight: 600;
	color: #444;
	font-size: 13px;
}
.weekly-row input[type="time"] {
	margin: 0px;
	padding: 4px 6px;
	width: 105px;
}
.weekly-row input[type="checkbox"] { margin: 0px; }
.weekly-row .weekly-to { color: #999; font-size: 12px; }
.weekly-row .weekly-day { width: 86px; flex: none; }
.weekly-row input[type="time"] { width: 122px; flex: none; }
.weekly-check-space { width: 13px; flex: none; }
/* A range whose end isn't after its start, outlined when Save finds it */
.weekly-row-bad input[type="time"] { border-color: #d9534f; box-shadow: 0 0 0 2px rgba(217,83,79,.2); }
.weekly-day-short { display: none; }
/* + adds another time range for the weekday, x removes one */
.weekly-icon {
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: #e6f4e8;
	color: #2e7d3a;
	font-size: 17px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	user-select: none;
}
.weekly-icon:hover { background: #d3ecd7; }
.weekly-icon-remove { background: #f6e3e3; color: #b23b3b; }
.weekly-icon-remove:hover { background: #efd0d0; }
.weekly-icon-off { opacity: .35; cursor: default; }
/* Week by week: a bar per week, its 7 days lit where they have hours */
.weekly-weeks { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; }
.weekly-weeks-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.weekly-weeks-month { font-size: 13px; font-weight: 700; color: #444; }
.weekly-weeks-nav { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; color: #666; cursor: pointer; user-select: none; }
.weekly-weeks-nav:hover { background: #f0f0f0; }
.weekly-week { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 6px; cursor: pointer; }
.weekly-week:hover, .weekly-week-open { background: #f5f3fa; }
.weekly-week-past { opacity: .45; cursor: default; }
.weekly-week-past:hover { background: none; }
.weekly-week-label { width: 104px; flex: none; font-size: 12px; font-weight: 600; color: #555; }
.weekly-week-bar { flex: 1; display: flex; gap: 3px; height: 12px; }
.weekly-week-seg { flex: 1; border-radius: 3px; background: #e7e7e7; }
.weekly-week-seg.weekly-seg-on { background: #5bb75b; }
.weekly-week-seg.weekly-seg-own.weekly-seg-on { background: #e0a14a; }
.weekly-week-seg.weekly-seg-out { opacity: .4; }
.weekly-week-state { width: 62px; flex: none; text-align: right; font-size: 11px; color: #999; }
.weekly-week-state.weekly-week-changed { color: #c07a1c; font-weight: 700; }
.weekly-week-dim { opacity: .55; }
.weekly-week-dim:hover { opacity: 1; }
.weekly-week-open { box-shadow: inset 0 0 0 2px #7c62c9; }
/* What the editor is changing: every week, or one week */
.weekly-editing { margin: 0 0 12px; padding: 9px 12px; border-radius: 6px; background: #eef7ef; border-left: 4px solid #5bb75b; }
.weekly-editing.weekly-editing-week { background: #f6f0fc; border-left-color: #7c62c9; }
.weekly-editing-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-weight: 700; color: #333; }
.weekly-editing-reset { flex: none; font-size: 12px; font-weight: 600; color: #7c62c9; cursor: pointer; text-decoration: underline; }
.weekly-editing-reset.weekly-editing-clear { color: #d23b3b; }
.weekly-editing-note { margin-top: 2px; font-size: 12px; color: #777; }
@media (max-width: 540px) {
	.weekly-overlay { padding: 10px; }
	.weekly-body { padding: 12px; }
	.weekly-row { gap: 6px; }
	.weekly-row .weekly-day { width: 34px; font-size: 12px; white-space: nowrap; }
	.weekly-day-long { display: none; }
	.weekly-day-short { display: inline; }
	.weekly-row input[type="time"] { width: auto; min-width: 0; flex: 1; padding: 4px 2px; font-size: 12px; }
	/* No "to" on phones: the room goes to the times, so their AM / PM shows */
	.weekly-row .weekly-to { display: none; }
	.weekly-week-label { width: 88px; font-size: 11px; }
	.weekly-week-state { width: 54px; }
}
.weekly-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 18px;
	border-top: 1px solid #eee;
}
.weekly-actions button { margin: 0px; }
/* Save lights up once something changed */
.weekly-actions button[disabled] { opacity: .4; cursor: default; }

/* Merge Account — container uses the shared .box .box-small styling */
.merge-account {
	width: 340px;
}
.merge-hint {
	font-size: 12px;
	color: #999;
	line-height: 16px;
	margin-bottom: 14px;
}
.merge-search { position: relative; }
.merge-input-wrap { position: relative; line-height: 0; }
.merge-input-wrap .setting-input { margin: 0; padding-right: 36px; }
.merge-spinner {
	position: absolute;
	top: 50%;
	right: 12px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	border: 2px solid #e6e6e6;
	border-top-color: #888;
	border-radius: 50%;
	animation: merge-spin 0.8s linear infinite;
}
@keyframes merge-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.merge-results {
	list-style: none;
	margin: 6px 0px 0px;
	padding: 0px;
	border: 1px solid #eee;
	border-radius: 4px;
	max-height: 260px;
	overflow-y: auto;
}
.merge-results li {
	display: flex;
	align-items: center;
	padding: 8px 10px;
	cursor: pointer;
	border-bottom: 1px solid #f2f2f2;
}
.merge-results li:last-child { border-bottom: none; }
.merge-results li:hover { background-color: #f7f7f7; }
.merge-result-pic {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	flex: 0 0 34px;
	margin-right: 10px;
}
.merge-result-name { font-size: 14px; color: #444; }
.merge-result-sub { font-size: 12px; color: #999; }
.merge-none {
	font-size: 12px;
	color: #999;
	padding: 10px 2px;
}
.merge-compare {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 18px 0px 4px;
}
.merge-card {
	flex: 1 1 0;
	text-align: center;
	padding: 12px 6px;
	border: 2px solid #eee;
	border-radius: 6px;
}
.merge-card.survivor { border-color: #6fbf73; background-color: #f4fbf4; }
.merge-card-pic {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-size: cover;
	background-position: center;
	margin: 0px auto 8px;
}
.merge-card-name { font-size: 14px; font-weight: 600; color: #444; }
.merge-card-id { font-size: 12px; color: #999; margin-top: 2px; }
.merge-card-tag {
	display: inline-block;
	margin-top: 8px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #4f9d53;
}
.merge-card-tag-del { color: #cc5b5b; }
.merge-arrow {
	flex: 0 0 46px;
	text-align: center;
	font-size: 34px;
	line-height: 34px;
	color: #888;
	cursor: pointer;
	user-select: none;
}
.merge-arrow:hover { color: #444; }
.merge-actions { margin-top: 16px; }
.merge-summary {
	font-size: 12px;
	color: #777;
	line-height: 16px;
	margin-bottom: 12px;
}
.merge-error {
	font-size: 12px;
	color: #cc5b5b;
	margin-bottom: 10px;
}

/* API Keys */
.apikey-reveal {
	margin: 0px 20px 20px;
	padding: 16px;
	border: 2px solid #6fbf73;
	border-radius: 6px;
	background-color: #f4fbf4;
	text-align: left;
}
.apikey-reveal-title { font-weight: 600; color: #4f9d53; margin-bottom: 10px; }
.apikey-reveal-row { display: flex; gap: 8px; align-items: center; }
.apikey-reveal-row input {
	flex: 1 1 auto;
	font-family: monospace;
	font-size: 13px;
	margin: 0px;
}
.apikey-reveal-row button { margin: 0px; }
.apikey-reveal-hint { font-size: 12px; color: #999; margin: 10px 0px; }
.chooser .apikey-caps { margin-bottom: 4px; }
.apikey-caps { display: flex; flex-direction: column; gap: 6px; margin: 6px 0px; }
.apikey-cap { font-size: 13px; color: #666; cursor: pointer; }
.apikey-cap input { margin-right: 6px; }
.apikey-cap-desc { font-size: 11px; color: #aaa; margin-left: 6px; }
.apikey-secret-row { display: flex; gap: 8px; align-items: center; }
.apikey-secret-row input { flex: 1 1 auto; margin: 0px; }
.apikey-secret-row button { margin: 0px; }
.apikey-form-actions { margin-top: 16px; display: flex; gap: 10px; }
.apikey-form-actions button { margin: 0px; }
.apikey-prefix { font-family: monospace; font-size: 12px; }
.apikey-docs-btn { float: right; margin-right: 8px; }
/* Centered in the space under the top nav + page bar (98px), with the docs text taking what's left */
.apikey-docs { max-width: 760px; text-align: left; top: calc(50% + 49px); max-height: calc(100vh - 98px - 30px); display: flex; flex-direction: column; box-sizing: border-box; }
.apikey-docs > * { flex: 0 0 auto; }
.apikey-docs-lead { font-size: 13px; color: #666; margin: 0px 0px 10px; }
.apikey-docs > .apikey-docs-text { flex: 1 1 auto; min-height: 80px; }
.apikey-docs-text {
	overflow: auto;
	margin: 0px;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	background-color: #f8f8f8;
	font-size: 12px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
}
.apikey-chip {
	display: inline-block;
	font-size: 11px;
	padding: 2px 8px;
	margin: 1px 2px;
	border-radius: 10px;
	background-color: #eee;
	color: #fff;
}
.apikey-callback { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apikey-revoked { opacity: 0.5; }
.apikey-form-error {
	font-size: 12px;
	color: #cc5b5b;
	margin-top: 10px;
}
.pop-email-copy { display: flex; align-items: start; justify-content: flex-start; gap: 8px; font-size: 13px; cursor: pointer; margin: 10px 0px; }
.pop-email-copy input { width: auto; margin: 3px 0px 0px; }
.pop-email-copy-on { color: #555; }
.ml-powered { text-align: center; margin: 28px auto 10px; font-size: 20px; color: #999; }
.ml-powered a { color: #999; text-decoration: none; }
.ml-powered a:hover { color: #666; }
.ml-powered-logo { display: inline-block; height: 44px; vertical-align: middle; margin-left: 2px; margin-top: -4px; }
.ml-powered-cta { display: block; margin-top: 6px; }

/* Add Prospect popup */
.add-prospect-dim { font-weight: 400; color: #aaa; font-size: 11px; }
.add-prospect-color { height: 34px; padding: 2px; cursor: pointer; }
.add-prospect-error { font-size: 12px; color: #cc5b5b; margin-top: 10px; }
.add-prospect-actions { margin-top: 16px; display: flex; gap: 10px; }
.add-prospect-actions button { margin: 0px; }
.add-prospect-searching, .add-prospect-none { padding: 6px 0px 2px; font-size: 13px; color: #888; }
.add-prospect-results { margin: 8px 0px 0px; max-height: 320px; overflow-y: auto; border: 1px solid #e4e4e4; border-radius: 6px; }
.add-prospect-result { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid #eee; }
.add-prospect-result:last-child { border-bottom: 0px; }
.add-prospect-result-logo { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; background: #eee center / cover no-repeat; }
.add-prospect-result-body { flex: 1; min-width: 0; text-align: left; }
.add-prospect-result-name { font-size: 14px; font-weight: 600; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-prospect-result-meta { font-size: 12px; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.add-prospect-result button { margin: 0px; white-space: nowrap; }
.add-prospect-badge { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; vertical-align: middle; background: #e8f0fb; color: #1c5bb8; }
.add-prospect-badge-10 { background: #fff3d6; color: #8a5a00; }
.add-prospect-badge-20 { background: #eee; color: #777; }
.add-prospect-badge-inactive { background: #eee; color: #777; }

/* Documents feature */
.documents-screen .invoice-row-track { min-width: 162px; order: 1; }
.documents-screen .invoice-row-status { order: 2; }
.documents-screen .invoice-row-actions { min-width: 37px; order: 3; }
.documents-screen .doc-row-status-track { display: contents; }
@media (max-width: 600px) {
	.documents-screen .invoice-row-main { flex-wrap: wrap; gap: 0 16px; }
	.documents-screen .invoice-row-main > .invoice-row-customer { flex: 1; min-width: 0; }
	.documents-screen .invoice-row-due { display: none; }
	.documents-screen .invoice-row-actions { flex: 0 0 auto; min-width: 0; order: 1; }
	.documents-screen .doc-row-status-track { display: flex; flex: 1 0 100%; align-items: center; margin-top: 6px; order: 10; }
	.documents-screen .invoice-row-status { flex: 0 0 auto; min-width: 0; order: 0; }
	.documents-screen .invoice-row-track { min-width: 0; flex: 1; justify-content: flex-end; padding-left: 8px; order: 0; }
	.documents-screen .doc-waiver-row .invoice-row-track,
	.documents-screen .doc-waiver-row .invoice-row-actions { display: none; }
	.documents-screen .doc-waiver-row .invoice-row-who { flex: 0 0 auto; }
}
.doc-modal-body { padding: 5px 0 0; text-align: left; }
.doc-note { font-size: 13px; color: #666; margin: 0 0 14px; }
.doc-detail-card { background-color: #fff; border-radius: 8px; padding: 22px 26px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.doc-detail-modal { display: flex; flex-direction: column; max-height: calc(100vh - 140px); margin: 120px auto 0; }
.doc-detail-modal .doc-modal-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }
.doc-detail-modal .doc-detail-card { flex: 1; overflow-y: auto; min-height: 100px; }
.doc-detail-modal .doc-recipients { flex: 0 0 auto; max-height: 30vh; overflow-y: auto; }
.doc-detail-modal .invoice-actions { flex: 0 0 auto; }
.doc-detail-titlebar { display: flex; align-items: center; }
.chooser-invoice .doc-detail-titlebar > span.doc-detail-badge { flex: 0 0 auto; width: auto; margin-left: auto; margin-right: 34px; }
.doc-editor-recipients { margin: 14px 0 0; }
.doc-editor-recipients-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-editor-recipients-header label { flex: 0 0 auto; margin: 0; }
.doc-editor-recipients-left { display: flex; align-items: center; gap: 12px; }
@media (max-width: 600px) {
	.doc-editor-recipients-left { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.doc-editor-recipients-header .typeahead input { margin: 0; }
.doc-editor-recipients-header .typeahead-dropdown { left: auto; right: 0; }
.doc-detail-title { margin: 0 0 16px; font-size: 24px; line-height: 24px; color: #222; text-align: center; }
.doc-detail-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.doc-detail-req { font-size: 12px; color: #888; }
/* Standalone toggle sizes to its content so its hint centers over the text */
.doc-editor-toggle { display: inline-flex; position: relative; }
/* WYSIWYG toolbar + editable box (single what-you-see-is-what-you-get body) */
.doc-editor-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; background-color: #f5f5f7; border: 1px solid #ddd; border-bottom: none; border-radius: 6px 6px 0 0; padding: 5px 8px; }
.doc-tb-btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; border: none; border-radius: 5px; background: none; color: #555; font-size: 12px; font-weight: 600; cursor: pointer; }
.doc-tb-btn:hover { background-color: #e7e7ec; }
.doc-tb-btn.active { background-color: #dbe6f7; color: #0f62d6; }
.doc-tb-btn:disabled { opacity: .5; cursor: progress; }
.doc-tb-btn svg { display: block; }
.doc-tb-bold { font-weight: 800; font-size: 14px; }
.doc-tb-italic { font-style: italic; font-family: Georgia, serif; font-size: 15px; font-weight: 500; }
.doc-tb-under { text-decoration: underline; font-size: 13px; }
.doc-tb-strike { text-decoration: line-through; font-size: 13px; }
.doc-tb-sep { width: 1px; height: 18px; background-color: #ddd; margin: 0 6px; }
/* The editor grows with whatever is pasted into it and the overlay does the
   scrolling. Capping the modal to the viewport and squeezing the body into a
   flex column left long documents with nowhere to go. */
.doc-editor-modal { margin: 120px auto 60px; }
.doc-editor-modal .doc-wysiwyg { min-height: 120px; max-height: none; overflow-y: visible; }
.doc-wysiwyg { border: 1px solid #ddd; border-radius: 0 0 6px 6px; padding: 12px 16px; min-height: 220px; max-height: 45vh; overflow-y: auto; outline: none; cursor: text; }
.doc-wysiwyg.doc-wysiwyg-auto { max-height: none; overflow-y: visible; }
.doc-wysiwyg:focus { border-color: #bbb; }
.doc-wysiwyg.doc-wysiwyg-drop { border-color: #1c5bb8; box-shadow: 0 0 0 2px rgba(28, 91, 184, 0.25) inset; background-color: #f4f8fe; }
.doc-wysiwyg:empty::before { content: attr(data-placeholder); color: #aaa; pointer-events: none; }
/* Add Link popup stacked above the editor modal */
.doc-link-fade { z-index: 10001; }
.doc-link-box { width: 420px; max-width: 92vw; }
.doc-link-body { padding: 20px; }
.doc-link-body input { width: 100%; box-sizing: border-box; }
.doc-recipients { margin: 18px 0 0; }
.doc-recipients-label { color: #555; background-color: #eee; margin: 10px 0px 10px; padding: 8px 20px; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.doc-recipients-label .doc-detail-req { margin-left: auto; }
.doc-recipients-count { font-size: 11px; }
.doc-recipient-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.doc-recipient-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.doc-recipient-row .doc-recipient-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-recipient-track { flex: 0 0 auto; }
.doc-recipient-remove { display: inline-block; margin-left: 6px; color: #c0392b; font-size: 15px; cursor: pointer; }
.doc-recipient-pic { width: 30px; height: 30px; border-radius: 50%; background-size: cover; background-position: center; background-color: #eee; flex: 0 0 auto; cursor: pointer; }
.doc-recipient-pic:hover { box-shadow: 0 0 0 2px var(--sel-color, #4a9); }
.doc-recipient-clickable { cursor: pointer; }
.doc-recipient-clickable:hover { background-color: #fafafa; }
.doc-recipient-name { font-weight: 600; color: #333; }
.doc-recipient-name-mobile { display: none; }
/* Copy / text this person's own link. Dim until the row is hovered, so the
   names stay the thing you read first */
.doc-recipient-acts { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.doc-recipient-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; transition: background-color 0.15s; }
/* Only the icon fades. Opacity on .doc-recipient-act would take the hint
   tooltip and the hover background down with it */
.doc-recipient-act-icon { display: flex; opacity: 0.35; transition: opacity 0.15s; }
.doc-recipient-act img { height: 18px; width: auto; display: block; }
.doc-recipient-row:hover .doc-recipient-act-icon { opacity: 0.75; }
.doc-recipient-act:hover { background-color: #eee; }
.doc-recipient-act:hover .doc-recipient-act-icon { opacity: 1; }
.doc-recipient-right { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: end; }
.doc-recipient-state { color: #888; min-width: 146px; text-align: right; flex: 1; }
@media (max-width: 600px) {
	/* Two lines per recipient: the person and their tracking icons on top, the
	   state on its own line underneath. The right-hand wrapper is flattened so
	   its two children wrap independently of each other. */
	.doc-recipient-row { flex-wrap: wrap; gap: 0 12px; }
	.doc-recipient-who { align-items: center; gap: 10px; flex: 1; min-width: 0; }
	.doc-recipient-name-desktop { display: none; }
	.doc-recipient-name-mobile { display: flex; flex-direction: column; font-weight: 600; color: #333; line-height: 1.3; }
	.doc-recipient-right { display: contents; }
	.doc-recipient-track { margin-top: 0; padding-left: 0; }
	.doc-recipient-state { flex: 0 0 100%; min-width: 0; margin-top: 4px; font-size: 12px; text-align: left; padding-right: 0; }
}
.doc-sig-link { color: #0b5e52; cursor: pointer; white-space: nowrap; }
/* The signed copy download sits beside the signed-at link on a recipient row */
.doc-recipient-dl { margin-left: 8px; color: #1a54c9; cursor: pointer; font-size: 11px; }
/* The signature lines inside Document Details. The public page and the PDF
   each carry their own copy of these rules; these are scoped to the detail
   card so the three stay independent. */
.doc-detail-card .document-signature-section { margin-top: 10px; }
.doc-detail-card .document-signature-block { margin-top: 40px; margin-bottom: 0; }
/* The signature image already supplies the lead-in above the line */
.doc-detail-card .document-signature-block:has(.document-sig-img) { margin-top: 8px; }
.doc-detail-card .document-sig-img { max-height: 90px; width: 360px; display: block; margin-bottom: -10px; }
.doc-detail-card .document-sig-line { border-bottom: 1px solid #333; width: 360px; max-width: 100%; margin: 40px 0 6px; }
.doc-detail-card .document-signature-block .document-sig-line { margin-top: 0; }
.doc-detail-card .document-sig-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; width: 360px; max-width: 100%; }
.doc-detail-card .document-sig-label { font-size: 12px; color: #666; white-space: nowrap; }
.doc-detail-card .document-sig-signed { font-size: 12px; color: #666; text-align: right; }

/* Shared agreement: one signature block per signer, plus the waiting/complete note */
.document-signature-block { margin-bottom: 26px; }
.document-signature-block:last-child { margin-bottom: 0px; }
/* Sits right of the signature line, in the slot the signed note takes over */
.document-sig-who { color: #333; font-weight: 600; font-size: 12px; text-align: right; }
.document-multi-status { text-align: center; color: #555; font-size: 14px; line-height: 20px; }
/* Editor recipient rows: each party picks Signer or Recipient */
.doc-editor-recipient-list { margin-top: 10px; }
.doc-editor-recipient-row { align-items: center; }
.doc-role-switch { position: relative; display: inline-flex; align-items: center; vertical-align: middle; padding: 3px; border: 1px solid #d8d3e6; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 700; line-height: 1; }
.doc-role-slider { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; border-radius: 999px; background: var(--sel-color, #4c1485); }
.doc-role-switch.measured .doc-role-slider { transition: left 0.18s ease, width 0.18s ease; }
.doc-role-item { position: relative; z-index: 1; padding: 6px 11px; border-radius: 999px; color: #777; text-align: center; white-space: nowrap; cursor: pointer; user-select: none; transition: color 0.18s ease; }
.doc-role-item.on { color: #fff; }
.doc-role-item:not(.on):hover { color: #111; }
@media (prefers-reduced-motion: reduce) { .doc-role-switch.measured .doc-role-slider { transition: none; } }
/* Same-copy / own-copy mode sits on the right of the Recipients header */
.doc-copy-toggle { margin-left: auto; white-space: nowrap; }
.doc-recipient-dl:hover { text-decoration: underline; }
.doc-sig-fade { z-index: 10001; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.doc-sig-view { background: #fff; border-radius: 8px; padding: 24px 34px; max-width: 82vw; }
.doc-sig-view img { display: block; max-width: 100%; max-height: 55vh; }
.doc-send-drop { position: static; border-radius: 6px; margin-top: 4px; }
.doc-send-picked { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.doc-recipients-label .doc-add-recipient input { margin: 0; padding: 5px 10px; font-size: 12px; }
.doc-member-row { display: block; text-decoration: none; color: inherit; }
.doc-history-list { text-align: left; }
.doc-history-list .invoice-row { border: 1px solid #eee; }
.doc-waiver-text { white-space: pre-wrap; font-size: 13px; color: #444; max-height: 50vh; overflow-y: auto; border: 1px solid #eee; border-radius: 4px; padding: 12px 14px; }
.doc-signed-note { margin: 12px 0 0; font-size: 13px; color: #0b5e52; }
/* Rich text (markup) waiver: paragraphs and pictures, not the plain text's kept line breaks */
.waiver-markup { white-space: normal; }
.waiver-markup p, .waiver-markup li { margin: 0 0 10px; font-size: inherit; line-height: 1.45; }
.waiver-markup > :first-child { margin-top: 0; }
.waiver-kiosk-btns { display: flex; gap: 12px; }
.waiver-kiosk-btns .btn-long { flex: 1; margin: 0; }
.waiver-updated { margin: 0 0 12px; padding: 10px 14px; font-size: 14px; color: #8a5a00; background: #fff6e0; border: 1px solid #f3dca6; border-radius: 6px; }
.doc-waiver-text.doc-waiver-markup { white-space: normal; }
.doc-waiver-text.doc-waiver-markup img, .waiver-markup img { max-width: 100%; height: auto; }
/* Waiver editor (E-Sign): saving asks everyone to accept it again */
.doc-waiver-reaccept { margin: 14px 0 0; padding: 12px 14px; font-size: 13px; line-height: 1.45; color: #8a5a00; background: #fff6e0; border: 1px solid #f3dca6; border-radius: 6px; }
.doc-waiver-changed { margin: -8px 0 18px; font-size: 13px; color: #888; text-align: center; }
.doc-waiver-vars { margin-top: 8px; font-size: 12px; color: #888; }
.doc-waiver-vars code { display: inline-block; margin: 2px 4px 0 0; padding: 1px 6px; font-size: 11px; color: #555; background: #f1f1f1; border-radius: 4px; cursor: pointer; user-select: none; }
.doc-waiver-vars code:hover { color: #fff; background: #6a4b9e; }
.doc-waiver-note { margin: 18px 0 0; padding: 14px 16px; font-size: 13px; color: #666; background: #f8f8f8; border-radius: 6px; }

/* Markup-rendered bodies */
.markup-body { font-size: 14px; line-height: 1.6; color: #333; text-align: left; background-color: #fff; }
.markup-body img { max-width: 100%; height: auto; display: block; margin: 8px 0px; border-radius: 4px; break-inside: avoid; page-break-inside: avoid; }
.markup-body .markup-img { margin: 0px; break-inside: avoid; page-break-inside: avoid; }
.markup-body img { cursor: zoom-in; }
/* Lightbox for a clicked picture */
/* Sits under the nav bar (64px, z 80) and page bar (34px, z 71) and above popups (chooser-fade z 59) */
.markup-lightbox { position: fixed; top: 98px; left: 0px; right: 0px; bottom: 0px; z-index: 60; background: rgba(0, 0, 0, 0.82); display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.markup-body .markup-lightbox img { max-width: 92vw; max-height: calc(100vh - 98px - 48px); width: auto; height: auto; margin: 0px; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6); cursor: zoom-out; break-inside: auto; }
@media print { .markup-lightbox { display: none !important; } }
.markup-body h1 { font-size: 22px; margin: 18px 0 10px; }
.markup-body h2 { font-size: 18px; margin: 16px 0 8px; }
.markup-body h3 { font-size: 15px; margin: 14px 0 6px; }
.markup-body p { font-size: 14px; margin: 0 0 12px; }
.markup-body ul, .markup-body ol { margin: 0 0 12px; padding-left: 24px; }
.markup-body li { font-size: 14px; }
.markup-body hr { border: none; border-top: 1px solid #ddd; margin: 16px 0; }

/* Public document page */
.document-public-page { background: #eef1f4; }
.document-public-wrap { min-height: 100vh; }
.document-public { max-width: 640px; margin: 0 auto; padding: 20px; }
.document-public-header { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0px 25px; border-bottom: 3px solid #4a9; margin-bottom: 20px; }
.document-public-logo { max-height: 70px; max-width: 160px; }
.document-public-studio { font-size: 17px; font-weight: 600; color: #333; }
.document-public-box { background: #fff; border-radius: 8px; padding: 26px 28px; margin: 0 0 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); }
.document-public-title { font-size: 24px; margin: 0 0 16px; color: #222; text-align: center; }
.document-public-signed { text-align: center; }
.document-signed-check { width: 44px; height: 44px; line-height: 44px; border-radius: 50%; background: #d4edda; color: #1e7b34; font-size: 22px; margin: 0 auto 10px; }
.document-signed-label { font-size: 15px; color: #333; margin: 0 0 12px; }
.document-signed-date { font-size: 13px; color: #777; margin: -8px 0 12px; }
.document-signed-sig { max-width: 100%; border: 1px solid #eee; border-radius: 4px; padding: 6px 14px; background: #fff; box-sizing: border-box; }
.document-sign-label { font-size: 14px; color: #555; margin: 0 0 12px; }
.document-sig-wrap { position: relative; border: 1px dashed #bbb; border-radius: 6px; background: #fafbfc; margin: 0 0 12px; }
.document-sig-canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; }
.document-sig-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ccc; font-size: 18px; pointer-events: none; }
.document-sign-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.document-sign-clear { cursor: pointer; }
.document-sign-modes { display: flex; gap: 6px; }
.document-sign-mode { cursor: pointer; }
.document-sign-mode.active { background: #006dcc; background-image: none; border-color: #0044cc; color: #fff; }
.document-sig-typed { display: block; width: 100%; height: 180px; box-sizing: border-box; border: none; background: transparent; text-align: center; font-size: 72px; color: #1a1a2e; font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive; font-style: italic; outline: none; }
.document-sign-actions { display: flex; gap: 10px; }
.document-sign-actions .btn-green { flex: 1; }
.document-public-tools { display: flex; justify-content: center; gap: 12px; margin: 0 0 32px; }
.invoice-step.active { cursor: pointer; }

/* Events: list, editor, public event page, ticket card, door scanner */
.events-page, .event-page { width: 100%; max-width: 760px; margin: 0 auto; padding: 6px 16px 24px; box-sizing: border-box; text-align: left; }
.events-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 14px; }
.events-head-title { font-size: 22px; font-weight: 700; color: #333; }
.events-head-actions { display: flex; gap: 8px; align-items: center; }
.events-head-actions .btn-small, .event-card-actions .btn-small, .event-staff-row .btn-small, .event-share-btns .btn-small { margin: 0; padding: 7px 14px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.events-empty { text-align: center; color: #888; padding: 50px 20px; font-size: 15px; }
.events-empty-hint { font-size: 12px; color: #aaa; margin-top: 6px; }
.events-section { margin-bottom: 26px; }
.events-section-title { font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: #999; padding: 0 0 8px 2px; }
/* Promo card on top, details in the white box under it; past events keep the same look */
.event-card { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); margin: 0 0 35px; text-decoration: none; color: inherit; position: relative; transition: transform .12s ease, box-shadow .12s ease; }
.event-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 6px 14px rgba(0,0,0,0.12); }
.event-card-media { position: relative; width: 100%; aspect-ratio: 1200 / 630; min-height: 180px; background-size: cover; background-position: center; }
/* No promo card yet: a shorter color band instead of a tall empty box */
.event-card-media:has(.event-card-media-empty) { aspect-ratio: auto; height: 150px; min-height: 0; }
.event-card-media-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 64px; font-weight: 800; letter-spacing: .05em; }
.event-card-date { position: absolute; left: 12px; top: 12px; background: #fff; border-radius: 6px; padding: 5px 9px; text-align: center; line-height: 1.05; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.event-card-month { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #c33; font-weight: 700; }
.event-card-day { font-size: 20px; font-weight: 800; color: #222; }
.event-card-badge { position: absolute; right: 12px; top: 12px; background: rgba(0,0,0,.65); color: #fff; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; }
.event-card-badge-draft { background: #e69500; }
.event-card-badge-soldout { background: #c33; }
.event-card-body { min-width: 0; padding: 18px 20px 16px; }
.event-card-title { font-size: 22px; font-weight: 700; color: #222; margin-bottom: 4px; }
.event-card-meta { font-size: 14px; color: #666; line-height: 1.5; }
.event-card-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.event-card-title-row .event-card-title { min-width: 0; }
.event-card-menu { flex: none; }
/* An open menu can reach past a short card: unclip it (the media keeps its rounded corners) */
.event-card-open { overflow: visible; z-index: 5; }
.event-card-open .event-card-media { border-radius: 12px 12px 0 0; }
.event-card-past.event-card-open .event-card-media { border-radius: 12px 0 0 12px; }
.event-card-menu .dropdown-toggle { padding: 6px 10px; }
.event-card-foot { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; }
.event-card-side { margin-left: auto; }
/* Past cards (Manager+): stats line with Details on its right, the buttons on their own row */
.event-card-foot-past { align-items: baseline; }
.event-card-foot-past .event-card-staff { flex: 1 1 auto; }
.event-card-foot-past .event-card-side { flex: 1 1 100%; display: flex; justify-content: flex-end; }
.event-card-meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.event-card-meta-row .event-card-meta { min-width: 0; }
.event-card-more { flex: none; font-size: 13px; font-weight: 600; color: #555; white-space: nowrap; }
.event-card:hover .event-card-more { color: #222; }
.event-card-staff { font-size: 12px; color: #888; min-width: 0; }
.event-card-actions { display: flex; gap: 8px; }
.event-card-actions .btn-small { white-space: nowrap; }
.event-card-btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.event-card-btn img { width: 13px; height: 13px; display: block; }
.events-head-btn { display: inline-flex; align-items: center; gap: 6px; }
.events-head-btn img { width: 14px; height: 14px; display: block; }
/* Past events: a row, picture on the left and details on the right (like the old module cards) */
.event-card-past { display: grid; grid-template-columns: 280px 1fr; grid-template-rows: 1fr auto; }
.event-card-past .event-card-media { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 140px; height: 100%; }
.event-card-past .event-card-media:has(.event-card-media-empty) { height: 100%; }
.event-card-past .event-card-media-empty { font-size: 40px; }
.event-card-past .event-card-badge { display: none; }
.event-card-past .event-card-body { padding: 14px 18px; display: flex; flex-direction: column; }
.event-card-more-row { margin-top: auto; padding-top: 10px; text-align: right; }
.event-card-past .event-card-title { font-size: 18px; }
.event-card-past .event-card-meta { font-size: 13px; }
@media (max-width: 520px) { .event-card-past { grid-template-columns: 140px 1fr; } .event-card-past .event-card-media { min-height: 110px; } .event-card-past .event-card-date { left: 8px; top: 8px; } }
@media (max-width: 600px) {
	.event-card-body { padding: 14px 16px 12px; }
}

/* Editor */
.event-editor { max-width: 640px; margin-top: 130px; }
.event-editor-body { padding: 0 20px 20px; text-align: left; }
.event-editor-row { display: flex; gap: 12px; }
.event-editor-row .invoice-field { min-width: 0; }
.event-editor-grow { flex: 2; }
.event-editor-cap { flex: 1; max-width: 140px; }
.event-editor .invoice-field { margin-bottom: 12px; }
.event-editor .invoice-field select, .event-editor .invoice-field input[type=date] { width: 100%; margin: 0; box-sizing: border-box; }
@media (max-width: 520px) { .event-editor-row { flex-wrap: wrap; } .event-editor-cap { max-width: none; } }
/* Editor preview in the same poster shape the event page uses */
.event-promo { position: relative; width: 100%; max-width: 280px; aspect-ratio: 3 / 4; border-radius: 8px; background: #f1f1f1 center / cover no-repeat; margin: 14px auto 16px; cursor: pointer; border: 2px dashed transparent; display: flex; align-items: center; justify-content: center; }
.event-promo-empty { border-color: #ccc; }
.event-promo-drop { border-color: #2a9d3f; background-color: #eef8ef; }
.event-promo-hint { text-align: center; color: #888; }
.event-promo-hint-title { font-size: 14px; font-weight: 700; color: #666; }
.event-promo-hint-sub { font-size: 12px; margin-top: 4px; }
.event-promo-tools { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 6px; }
.event-promo-tools .btn-small { margin: 0; padding: 6px 12px; font-size: 11px; }
.event-editor-pricing { background: #f7f7f7; border-radius: 8px; padding: 12px 14px; margin: 4px 0 14px; }
.event-editor-pricing-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.event-editor-tier { display: flex; gap: 10px; font-size: 13px; color: #333; padding: 3px 0; }
.event-editor-tier-title { flex: 1; }
.event-editor-tier-window { color: #888; }
.event-editor-tier-price { font-weight: 700; }
.event-editor-pricing-none { font-size: 13px; color: #888; }
.event-editor-pricing-link { display: inline-block; margin-top: 8px; font-size: 12px; color: #2a70b8; text-decoration: none; }
.event-editor .invoice-actions { justify-content: flex-end; }
.event-editor .invoice-actions .btn-long { width: auto; padding-left: 22px; padding-right: 22px; text-transform: uppercase; }

/* Public event page */
.event-banner { text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 8px 12px; border-radius: 6px; background: #eee; color: #666; margin-bottom: 14px; }
.event-banner-draft { background: #fff3dc; color: #a86a00; }
.event-banner-live { background: #e6f4ea; color: #21702f; }
.event-banner { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; min-height: 18px; }
.event-banner .event-staff-stat { text-transform: none; letter-spacing: 0; font-size: 12px; color: inherit; margin-left: auto; }
.event-banner .event-banner-text:empty { display: none; }
.event-banner .event-staff-stat-clickable:hover { background: rgba(0,0,0,.06); }
/* Embed code popup (events list + event page) */
.event-embed-pop { max-width: 480px; }
.event-embed-pop-body { padding: 5px 0 0; text-align: left; }
.event-embed-pop-name { font-size: 20px; font-weight: 700; color: #222; line-height: 1.25; }
.event-embed-pop-when { font-size: 13px; color: #777; margin: 2px 0 16px; }
.event-embed-pop textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 11px; margin: 0 0 12px; resize: none; }
.event-embed-pop .btn-long { width: 100%; margin: 0; }
/* Guest ticket checkout popup */
.event-co-pop { max-width: 440px; }
.event-co-head { padding: 0 0 14px; margin: 0 0 14px; border-bottom: 1px solid #eee; }
.event-co-tier { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 18px; font-weight: 700; color: #222; }
.event-co-tier-title { min-width: 0; }
.event-co-side { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.event-co-price { color: #222; font-size: 22px; line-height: 22px; }
.event-co-event { display: block; font-size: 14px; font-weight: 600; color: #555; margin-top: 4px; }
.event-co-when { display: block; font-size: 13px; font-weight: 400; color: #777; margin-top: 1px; }
.event-co-form { display: flex; flex-direction: column; gap: 10px; }
.event-co-row { display: flex; gap: 10px; }
.event-co-row .event-co-input { flex: 1 1 0; min-width: 0; }
.event-co-pop .event-co-input { width: 100%; box-sizing: border-box; margin: 0; height: 42px; padding: 0 12px; font-size: 15px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.event-co-pop .event-co-input:focus { border-color: #888; outline: none; }
.event-co-pop .event-co-bad { border-color: #d33 !important; background: #fff6f6; }
.event-co-stepper { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; }
.event-co-stepper a { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ccc; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #333; text-decoration: none; user-select: none; }
.event-co-stepper a:hover { border-color: #888; text-decoration: none; }
.event-co-stepper a.event-co-off { opacity: .35; pointer-events: none; }
.event-co-stepper b { min-width: 18px; text-align: center; font-size: 16px; }
.event-co-card { padding: 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; }
.event-co-pop .event-co-btn { width: 100%; margin: 0; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.event-co-pay { margin-top: 4px !important; }
/* The sign-in panel posts the site form, so its buttons are real <button>s: match the link buttons */
.event-co-pop button.event-co-btn { font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .03em; border: 0; height: 42px; cursor: pointer; }
.event-co-busy { opacity: .7; pointer-events: none; }
.event-co-btns { display: flex; flex-direction: column; gap: 8px; }
.event-co-note { font-size: 12px; color: #888; line-height: 1.4; }
.event-co-center { text-align: center; }
.event-co-sent { color: #1e7e34; background: #e6f4ea; padding: 8px 10px; border-radius: 6px; }
.event-co-err { font-size: 13px; color: #c62828; background: #fdecea; padding: 8px 10px; border-radius: 6px; line-height: 1.4; }
.event-co-switch { font-size: 13px; color: #666; text-align: center; }
.event-co-switch-top { text-align: left; }
.event-co-switch a { font-weight: 700; }
.event-co-done { text-align: center; padding: 6px 0 2px; }
.event-co-check { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: #34a853; color: #fff; font-size: 28px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.event-co-done-title { font-size: 20px; font-weight: 700; color: #222; }
.event-co-done-text { font-size: 15px; color: #333; margin: 6px 0 4px; }
.event-co-done-hint { font-size: 13px; color: #888; margin-bottom: 18px; }
/* Stacked on phones: the inputs size by their own height (flex: 1 1 0 would collapse them in a column) */
@media (max-width: 420px) { .event-co-row { flex-direction: column; } .event-co-row .event-co-input { flex: none; } }

/* Instagram steps popup */
.event-ig-steps { list-style: none; margin: 0 0 16px; padding: 0; }
.event-ig-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; font-size: 14px; line-height: 1.45; color: #333; }
.event-ig-num { flex: none; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.event-ig-done .event-ig-num { background: #34a853; font-size: 13px; }
.event-ig-text { flex: 1 1 auto; min-width: 0; }
.event-ig-done .event-ig-text { color: #555; }
.event-ig-badge { flex: none; align-self: center; padding: 3px 9px; border-radius: 10px; background: #e6f4ea; color: #1e7e34; font-size: 11px; font-weight: 700; letter-spacing: .03em; animation: eventIgBadge .25s ease-out; }
@keyframes eventIgBadge { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
.event-ig-btns { display: flex; gap: 10px; }
.event-ig-pop .event-ig-btn { flex: 1 1 0; width: auto; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }
.event-ig-hint { font-size: 12px; color: #888; margin-top: 10px; text-align: center; }
.event-back-short { display: none; }
@media (max-width: 600px) { .event-back-long { display: none; } .event-back-short { display: inline; } }
/* The promo card shows as a poster (taller than wide); the lightbox has the full picture */
.event-hero { position: relative; width: 100%; aspect-ratio: 3.66 / 4; margin: 0 auto; border-radius: 12px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); background: #fff; }
.event-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.event-hero-empty { display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); font-size: 34px; font-weight: 800; text-align: center; padding: 30px; box-sizing: border-box; }
.event-main { background: #fff; border-radius: 12px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 22px 24px 24px; margin: 14px 0 20px; }
.event-title { font-size: 28px; font-weight: 800; color: #222; margin: 0 0 8px; line-height: 1.15; }
.event-when-date { font-size: 16px; font-weight: 600; color: #333; }
.event-when-time { font-size: 14px; color: #666; }
.event-where { margin-top: 12px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.event-where-copy { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; cursor: pointer; border-radius: 6px; padding: 6px 10px 6px 8px; margin-left: -8px; transition: background .15s ease; }
.event-where-copy:hover { background: #f3f3f3; }
.event-where-pin { width: 26px; height: auto; flex-shrink: 0; opacity: .7; }
.event-where-text { min-width: 0; }
.event-where-title { color: #333; font-weight: 600; }
.event-where-sub { color: #777; font-size: 13px; }
.event-where-nav { display: flex; align-items: center; justify-content: center; width: 40px; border-radius: 10px; padding: 5px; box-sizing: border-box; background: rgba(0,0,0,.5); flex-shrink: 0; transition: background .15s ease; }
.event-where-nav:hover { background: rgba(0,0,0,.8); }
.event-where-nav img { width: 20px; display: block; }
.event-tiers { margin: 20px 0 6px; border-top: 1px solid #eee; padding-top: 14px; }
.event-tiers-none { color: #888; font-size: 14px; }
.event-tiers-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #999; margin-bottom: 8px; }
/* Ticket tiers: dark cards on the white details box */
.event-tier { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: #444; border: 1px solid #444; border-radius: 8px; margin-bottom: 8px; color: #fff; }
.event-tier-off { background: #f3f3f3; border-color: #e8e8e8; color: #999; }
.event-tier-edit { cursor: pointer; }
.event-tier-edit:hover { border-color: #999; }
.event-tier-edit.event-tier-off:hover { border-color: #bbb; }
.event-tier-off .event-tier-name, .event-tier-off .event-tier-price { color: #999; }
.event-tier-off .event-tier-window, .event-tier-off .event-tier-desc, .event-tier-off .event-tier-na { color: #aaa; }
.event-tier-info { flex: 1; min-width: 0; }
.event-tier-name { font-size: 16px; font-weight: 700; color: #fff; }
.event-tier-window { font-size: 12px; color: rgba(255,255,255,.65); }
.event-tier-desc { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 4px; white-space: pre-line; }
.event-tier-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.event-tier-price { font-size: 20px; font-weight: 800; color: #fff; }
.event-tier-btn { width: auto; padding: 8px 22px; margin: 0; }
.event-tier-na { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #999; }
.event-tier-door { color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.4); border-radius: 4px; padding: 5px 9px; font-weight: 700; }
.event-soldout { text-align: center; color: #c33; font-size: 13px; font-weight: 600; padding: 6px 0 0; }
.event-desc { margin-top: 18px; color: #333; font-size: 15px; line-height: 1.55; }
.event-embed-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #999; margin-bottom: 8px; }
.event-share-note { font-size: 12px; color: #888; margin-top: 8px; }
/* Share bar between the poster and the details: brand-colored big buttons */
/* Share section: a box that says whose links these are, buttons inside */
.event-share { margin: 22px 0 8px; padding: 14px 14px 12px; background: #f4f2f9; border: 1px solid #ddd6ec; border-radius: 8px; text-align: center; box-sizing: border-box; }
.event-share-title { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 15px; font-weight: 700; color: #4a3a78; }
.event-share-title img { width: 18px; height: 18px; opacity: .8; }
.event-share-hint { font-size: 13px; color: #626262; margin-top: 4px; }
.event-share .event-share-bar { margin: 12px 0 0; }
.event-share .event-share-note-bar { margin: 8px 0 0; }
.event-share .event-promoter-note { margin: 10px 0 0; font-weight: 600; color: #4a3a78; }
.event-share-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 22px; margin: 22px 0 8px; }
/* Share: a colored circle with the network's icon and a plain label below (links, not buttons, so no global button styles) */
.event-share-btn { display: inline-flex; flex-direction: column; align-items: center; gap: 7px; min-width: 64px; margin: 0; padding: 0; background: none; text-decoration: none; cursor: pointer; }
.event-share-btn:hover, .event-share-btn:focus { text-decoration: none; }
.event-share-circle { width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.15); transition: transform .12s ease, filter .15s ease; }
.event-share-btn:hover .event-share-circle { transform: translateY(-2px); filter: brightness(1.08); }
.event-share-btn:active .event-share-circle { transform: scale(.95); }
.event-share-circle img, .event-share-circle svg { max-width: 24px; max-height: 24px; display: block; }
.event-share-label { font-size: 12px; font-weight: 600; color: #444; white-space: nowrap; }
.event-share-copy .event-share-circle { background: #555; }
.event-share-facebook .event-share-circle { background: #1877f2; }
.event-share-instagram .event-share-circle { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.event-share-text .event-share-circle { background: #865fc7; }
.event-share-whatsapp .event-share-circle { background: #25d366; }
.event-share-note-bar { text-align: center; margin: 0 0 8px; }
/* Phones: two buttons per row (border-box, or the padding pushes each past half and they stack) */
@media (max-width: 380px) { .event-share-bar { gap: 12px 16px; } .event-share-circle { width: 46px; height: 46px; } }
/* Staff box: its own card under the details */
.event-staff { margin: 0 0 20px; background: #fff; border-radius: 12px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 18px 24px 20px; text-align: left; }
@media (max-width: 520px) { .event-staff { padding: 16px; } }
.event-staff-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.event-staff-stat { font-size: 12px; color: #666; margin-left: auto; }
.event-embed { margin-top: 12px; }
.event-embed textarea { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 11px; margin: 0; }
.event-page .markup-lightbox { cursor: default; }
/* Expanded picture: the browser must not scroll or double-tap-zoom the page while fingers are on it */
.zoom-image { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; will-change: transform; transform-origin: center center; }
.markup-lightbox { overflow: hidden; }
.event-page .markup-lightbox img { max-width: 92vw; max-height: calc(100vh - 98px - 48px); border-radius: 6px; cursor: default; }
@media (max-width: 520px) { .event-main { padding: 18px 16px; } .event-title { font-size: 23px; } .event-tier { flex-wrap: wrap; } .event-tier-buy { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; } }

/* Ticket (holder view on the scan page) */
.ticket-card { display: inline-block; width: calc(100% - 20px); max-width: 360px; background: #fff; border-radius: 14px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 0 0 20px; text-align: center; overflow: hidden; }
.ticket-card-pic { display: block; width: 100%; height: 150px; object-fit: cover; }
.ticket-card-label { font-size: 10px; letter-spacing: .14em; color: #999; margin-top: 16px; }
.ticket-card-title { font-size: 20px; font-weight: 800; color: #222; margin: 4px 16px 4px; }
.ticket-card-when { font-size: 13px; color: #555; line-height: 1.45; }
.ticket-card-tier { font-size: 13px; color: #666; margin-top: 8px; }
.ticket-card-name { font-size: 14px; font-weight: 600; color: #333; margin-top: 2px; }
.ticket-card-qr { display: block; width: 200px; height: 200px; margin: 14px auto 0; }
.ticket-card-hint { font-size: 11px; color: #999; margin-top: 6px; }
.ticket-card-status { margin: 18px 16px 0; padding: 10px; border-radius: 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.ticket-card-status-invalid { background: #fdecec; color: #c33; }
.ticket-card-status-used { background: #eee; color: #666; }
.ticket-card-status-ready { background: #e7e2f4; color: #5f4b8b; }
.ticket-card-status-sub { display: block; margin-top: 5px; font-size: 12px; opacity: .75; }
.ticket-card-link { display: inline-block; margin-top: 14px; font-size: 12px; color: #2a70b8; text-decoration: none; }
.ticket-card-invalid .ticket-card-title { color: #999; }

/* Staff check-in popup on the scan page */
.ticket-pop { display: inline-block; width: calc(100% - 20px); max-width: 360px; background: #fff; border-radius: 14px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 18px 16px 20px; text-align: center; border-top: 6px solid #999; }
.ticket-pop-ok { border-top-color: #2a9d3f; }
.ticket-pop-already { border-top-color: #e69500; }
.ticket-pop-invalid, .ticket-pop-error { border-top-color: #c33; }
.ticket-pop-icon { font-size: 34px; line-height: 1; }
/* ✓ / ! / ✕ sit in a solid circle of the state's color (the 🎟 of a ready ticket stays as is) */
.ticket-pop-ok .ticket-pop-icon, .ticket-pop-already .ticket-pop-icon, .ticket-pop-invalid .ticket-pop-icon, .ticket-pop-error .ticket-pop-icon { width: 64px; height: 64px; margin: 2px auto 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 38px; font-weight: 800; box-shadow: 0 3px 10px rgba(0,0,0,.15); }
.ticket-pop-ok .ticket-pop-icon { background: #2a9d3f; }
.ticket-pop-already .ticket-pop-icon { background: #e69500; }
.ticket-pop-invalid .ticket-pop-icon, .ticket-pop-error .ticket-pop-icon { background: #c33; }
.ticket-pop-state { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #666; margin: 6px 0 8px; }
.ticket-pop-ok .ticket-pop-state { color: #2a9d3f; }
.ticket-pop-already .ticket-pop-state { color: #e69500; }
.ticket-pop-invalid .ticket-pop-state { color: #c33; }
.ticket-pop-event { font-size: 18px; font-weight: 800; color: #222; }
.ticket-pop-meta { font-size: 13px; color: #666; }
.ticket-pop-count { font-size: 12px; color: #888; margin-top: 4px; }
.ticket-pop-btn { margin: 14px 0 0; }
.ticket-pop-done { margin-top: 14px; font-size: 13px; color: #2a9d3f; }
.ticket-pop-msg { margin-top: 8px; font-size: 12px; color: #c33; }
.ticket-pop-loading { color: #888; font-size: 13px; padding: 10px; }

/* Door scanner */
.scanner { width: 100%; max-width: 480px; margin: 0 auto; padding: 6px 16px 24px; box-sizing: border-box; text-align: left; }
.scanner-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 14px; }
.scanner-title { font-size: 20px; font-weight: 700; color: #333; }
.scanner-back { font-size: 12px; color: #2a70b8; text-decoration: none; text-transform: uppercase; letter-spacing: .05em; }
.scanner-event label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #888; margin-bottom: 5px; }
.scanner-event select { width: 100%; margin: 0; box-sizing: border-box; }
.scanner-stats { display: flex; gap: 16px; font-size: 13px; color: #666; padding: 10px 2px 0; }
.scanner-btn { margin: 18px 0 8px; font-size: 18px; padding: 18px; }
.scanner-hint { text-align: center; font-size: 12px; color: #999; }
.scanner-last { margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: #eee; color: #444; }
.scanner-last-ok { background: #e6f5e9; color: #21702f; }
.scanner-last-already { background: #fff3dc; color: #a86a00; }
.scanner-last-error { background: #fdecec; color: #a12727; }
.scanner-manual { display: flex; gap: 8px; margin-top: 18px; align-items: center; }
.scanner-manual input { flex: 1; margin: 0; }
.scanner-manual .btn-small { margin: 0; white-space: nowrap; }
.scanner-flash { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; text-align: center; padding: 30px; cursor: pointer; }
.scanner-ok .scanner-flash { background: #2a9d3f; }
.scanner-already .scanner-flash { background: #e69500; }
.scanner-error .scanner-flash { background: #c62828; }
.scanner-flash-icon { font-size: 120px; line-height: 1; font-weight: 800; }
.scanner-flash-title { font-size: 22px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; margin-top: 10px; }
.scanner-flash-name { font-size: 30px; font-weight: 700; margin-top: 12px; }
.scanner-flash-sub { font-size: 16px; opacity: .9; margin-top: 6px; }
/* Member photo on green / amber: round, white-ringed, with the result mark on a badge at its lower right */
.scanner-flash-pic-wrap { position: relative; width: 160px; height: 160px; }
.scanner-flash-pic { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; display: block; background: rgba(255,255,255,.25); box-shadow: 0 0 0 5px #fff, 0 8px 24px rgba(0,0,0,.25); }
.scanner-flash-badge { position: absolute; right: -2px; bottom: -2px; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.scanner-ok .scanner-flash-badge { color: #2a9d3f; }
.scanner-already .scanner-flash-badge { color: #e69500; }
.scanner-flash-name-lead { margin-top: 18px; }
/* Person layout: thirds of the space below the nav + page bars. Photo + name centered in the top third,
   result + details + ticket centered in the middle third; the bottom third stays for "tap to continue" */
.scanner-flash.scanner-flash-person { display: flex; justify-content: space-evenly; padding: 98px 30px 80px; }
.scanner-flash-person .scanner-flash-pic-wrap { cursor: pointer; }
.scanner-flash-top { align-self: center; display: flex; flex-direction: column; align-items: center; }
.scanner-flash-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.scanner-flash-mid .scanner-flash-sub { margin-top: 0; }
.scanner-flash-ticket { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.55); font-size: 17px; font-weight: 700; max-width: 100%; }
.scanner-flash-ticket img { width: 20px; height: 20px; flex: none; }
.scanner-flash-mid .scanner-flash-title { margin-top: 0; }
.scanner-flash-tap { position: absolute; bottom: 40px; left: 0; right: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }

/* Event editor: typed venue + Draft / Live pill switch */
.event-live-switch { position: relative; display: inline-flex; align-items: center; border: 1px solid #d5d5d5; border-radius: 999px; padding: 3px; background: #eee; font-size: 12px; font-weight: 700; letter-spacing: .6px; user-select: none; }
.event-live-thumb { position: absolute; top: 3px; left: 3px; width: 72px; height: calc(100% - 6px); border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s ease; }
.event-live-switch[data-on="live"] .event-live-thumb { transform: translateX(72px); background: var(--switch-color, #2a9d3f); }
.event-live-switch a { position: relative; z-index: 1; width: 72px; text-align: center; color: #888; padding: 6px 0; border-radius: 999px; cursor: pointer; transition: color .3s ease; }
.event-live-switch[data-on="draft"] a[data-state="draft"] { color: #444; }
.event-live-switch[data-on="live"] a[data-state="live"] { color: #fff; }
@media (prefers-reduced-motion: reduce) { .event-live-thumb, .event-live-switch a { transition: none; } }

/* Event page: poster shape picker (Manager+), top right of the card on hover */
.event-hero .event-ratio { position: absolute; top: 12px; right: 12px; z-index: 3; padding: 0; letter-spacing: 0; }
.event-ratio-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; padding: 0; margin: 0; opacity: 0; transition: opacity .15s ease, background .15s ease; }
.event-hero:hover .event-ratio-btn, .event-ratio-open .event-ratio-btn, .event-ratio-btn:focus { opacity: 1; }
/* The global button rules recolor text and background on hover/focus/active; keep the icon white and only deepen the circle */
.event-ratio-btn:hover, .event-ratio-btn:focus, .event-ratio-btn:active { color: #fff; background: rgba(0,0,0,.75); background-color: rgba(0,0,0,.75); }
.event-ratio-btn svg { display: block; }
@media (hover: none) { .event-ratio-btn { opacity: .85; } }
.event-ratio-menu { position: absolute; top: 46px; right: 0; width: 160px; letter-spacing: 0px; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.35); padding: 8px 0; text-align: left; }
.event-ratio-menu-title { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); padding: 4px 12px 6px; }
.event-ratio-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 40px; box-sizing: border-box; cursor: pointer; color: rgba(255,255,255,.85); font-size: 13px; }
.event-ratio-item:hover { background: rgba(255,255,255,.12); }
.event-ratio-item.active { font-weight: 700; color: #fff; }
.event-ratio-item.active .event-ratio-icon { background: rgba(255,255,255,.22); }
.event-ratio-icon-wrap .event-ratio-icon { display: inline-block; flex-shrink: 0; border: 2px solid currentColor; border-radius: 3px; box-sizing: border-box; padding: 0; vertical-align: baseline; }
.event-ratio-icon-wrap { width: 32px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.event-ratio-item:not(.active) .event-ratio-icon { border-color: rgba(255,255,255,.7); }
.event-ratio-label { flex: 1; }
.event-ratio-dims { font-size: 11px; color: rgba(255,255,255,.55); }
.event-ratio-item.active .event-ratio-dims { color: inherit; opacity: .75; }

/* Event page: inline editing for managers */
.event-editable { position: relative; }
.event-pencil { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 50%; background: #f0f0f0; padding: 0; margin: 0 0 0 6px; vertical-align: middle; cursor: pointer; opacity: 0; transition: opacity .15s ease, background .15s ease; }
.event-pencil img { width: 14px; height: 14px; }
.event-pencil:hover { background: #e2e2e2; }
.event-editable:hover .event-pencil, .event-pencil:focus { opacity: 1; }
@media (hover: none) { .event-pencil { opacity: .6; } }
.event-pencil-inline { margin: 0; }
.event-pencil-corner { position: absolute; top: 14px; right: 0; margin: 0; }
/* Description block: rule + EVENT DETAILS heading in every state (reading, editing, empty) */
.event-desc-block { margin: 20px 0 6px; border-top: 1px solid #eee; padding-top: 14px; }
.event-desc-block .event-desc { margin-top: 0; }
.event-desc-clickable { cursor: text; }
.event-where-left { display: flex; align-items: center; gap: 4px; min-width: 0; }
.event-where-add .event-where-sub { color: #999; font-style: italic; }
.event-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 10px; }
.event-inline-form input, .event-inline-form select { margin: 0; width: auto; }
.event-inline-title { flex: 1; min-width: 200px; font-size: 22px; font-weight: 700; }
/* Location picker: once "Other location" is chosen the select gives the room to the venue field */
.event-inline-location { flex: 1; min-width: 220px; }
select.event-inline-location-other { flex: 0 0 auto; width: auto; min-width: 0; max-width: 150px; }
.event-inline-form input.event-inline-location { flex: 1 1 200px; }
.event-editor-location { display: flex; gap: 8px; }
.event-editor-location select { flex: 1; }
.event-editor-location-other select { flex: 0 0 auto; width: auto !important; max-width: 150px; }
.event-editor-location-other .event-editor-venue { flex: 1; margin: 0 !important; }
.event-inline-dash { color: #999; }
.event-inline-actions { display: flex; gap: 6px; margin-left: auto; }
.event-inline-actions .btn-small { margin: 0; padding: 7px 14px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.event-desc-edit .event-tiers-title { margin-bottom: 10px; }
.event-desc-edit .event-inline-actions { margin-top: 10px; justify-content: flex-end; }
.event-desc-add { margin-top: 0; padding: 14px; border: 1px dashed #ccc; border-radius: 8px; color: #999; font-size: 14px; text-align: center; cursor: pointer; }
.event-desc-add:hover { background: #fafafa; }
/* Title editing: an invisible input sized by a hidden mirror of its text */
.event-title-clickable { display: inline-block; cursor: text; border-radius: 6px; margin-left: -6px; padding: 0 6px; transition: background .15s ease; }
.event-title-clickable:hover { background: #f3f3f3; }
.event-when-clickable { display: inline-block; cursor: pointer; border-radius: 6px; margin-left: -6px; padding: 2px 6px; transition: background .15s ease; }
.event-when-clickable:hover { background: #f3f3f3; }
.event-title-editing { display: flex; align-items: center; gap: 8px; margin-left: -6px; padding: 0 6px; }
.event-title-grow { position: relative; display: inline-block; max-width: 100%; }
.event-title-mirror { display: inline-block; visibility: hidden; white-space: pre; padding: 0 2px; min-width: 20px; }
.event-title-input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0 2px; border: none; outline: none; box-shadow: none; background: transparent; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; text-align: inherit; border-radius: 0; }
.event-title-input:focus { border: none; outline: none; box-shadow: none; background: transparent; }
.event-title-cancel { flex-shrink: 0; width: 26px; height: 26px; border: none; border-radius: 50%; background: #eee; color: #888; font-size: 18px; line-height: 1; padding: 0; margin: 0; cursor: pointer; }
.event-title-cancel:hover { background: #e2e2e2; color: #c33; }

/* Event page top bar: back link left, duplicate right */
.event-topbar { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 0 0 12px; }
.event-topbar-back { font-size: 13px; font-weight: 600; color: #555; text-decoration: none; padding: 6px 0; }
.event-topbar-back:hover { color: #222; }
.event-topbar-dup { margin: 0; padding: 7px 14px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.event-topbar-actions { display: flex; align-items: stretch; gap: 8px; }
.event-topbar-btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; }
.event-topbar-btn img { width: 14px; height: 14px; display: block; }
.event-topbar-menu { position: relative; display: flex; }
.event-topbar-menu .dropdown-toggle { align-self: stretch; padding: 7px 10px; }
.event-topbar-menu .dropdown-menu a { cursor: pointer; }
.event-topbar-menu .dropdown-menu a.event-menu-delete { color: #c33; }
.event-topbar-menu .dropdown-menu a.event-menu-delete:hover, .event-topbar-menu .dropdown-menu a.event-menu-delete:focus { color: #ffd6d6; }
/* Menu links clip their overflow (ellipsis), which would hide a hint drawn outside the link */
.event-topbar-menu .dropdown-menu a[data-hint] { overflow: visible; }
@media (max-width: 480px) { .event-topbar { flex-wrap: wrap; } }

/* Event page: replacing the poster by drop or from the shape menu */
.event-hero-drop { outline: 3px dashed #fff; outline-offset: -12px; }
.event-hero-replace { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); pointer-events: none; }
.event-hero-replace-box { border: 2px dashed rgba(255,255,255,.9); border-radius: 10px; padding: 14px 22px; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.35); }
.event-ratio-replace { border-top: 1px solid rgba(255,255,255,.15); margin-top: 4px; padding-top: 8px; }
.event-ratio-camera { width: 20px; height: auto; display: block; opacity: .9; }

.event-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.event-title-row .event-title { flex: 1; min-width: 0; }
/* Event page: a compact Draft / Live switch at the start of the status banner */
.event-banner-switch { flex-shrink: 0; padding: 2px; font-size: 11px; background: rgba(255,255,255,.7); border-color: rgba(0,0,0,.1); }
.event-banner-switch a { width: 58px; padding: 4px 0; }
.event-banner-switch .event-live-thumb { top: 2px; left: 2px; width: 58px; height: calc(100% - 4px); }
.event-banner-switch[data-on="live"] .event-live-thumb { transform: translateX(58px); }
/* Draft on: an orange thumb, white text */
.event-banner-switch[data-on="draft"] .event-live-thumb { background: #e8892b; }
.event-banner-switch[data-on="draft"] a[data-state="draft"] { color: #fff; }
/* The text follows the switch ("[DRAFT] Only staff can see this page"); the tally stays right */
.event-banner-switch + .event-banner-text { margin-right: auto; }
.event-live-switch-busy { opacity: .6; pointer-events: none; }

/* Event page: promoter tracking */
.event-promoter-note { text-align: center; font-size: 13px; color: #626262; margin: 0 0 12px; }
/* The viewer's own tickets, above the share bar */
.event-mine { margin: 22px 0 -6px; padding: 12px 14px; background: #eef7ef; border: 1px solid #cfe7d3; border-radius: 8px; }
.event-mine-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: #21702f; margin-bottom: 6px; }
.event-mine-title img { width: 18px; height: 18px; filter: brightness(0) saturate(100%) invert(23%) sepia(68%) saturate(2077%) hue-rotate(115deg) brightness(90%) contrast(74%); } /* black icon tinted to the title's #21702f (the CDN sends no CORS headers, so a mask can't do it) */
.event-mine-ticket { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid #dcefdf; text-decoration: none; color: #333; font-size: 13px; }
.event-mine-ticket:hover .event-mine-state { text-decoration: underline; }
.event-mine-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; filter: drop-shadow(0 0 1px rgba(0,0,0,0.22)) drop-shadow(0 2px 2px rgba(0,0,0,0.12)); }
/* A half-circle notch in the bottom edge, like a ticket stub; the shadow sits on the row above so it follows the notch */
.event-mine-card { width: 100%; max-width: 300px; margin: 0; padding-bottom: 30px; text-decoration: none; color: inherit; box-shadow: none; -webkit-mask: radial-gradient(circle at 50% 100%, transparent 13px, #000 14px); mask: radial-gradient(circle at 50% 100%, transparent 13px, #000 14px); }
.event-mine-card .ticket-card-qr { width: 150px; height: 150px; margin-top: 12px; }
.event-mine-card .ticket-card-status { margin-top: 12px; margin-bottom: 2px; }
.event-mine-card .ticket-card-qr { margin-top: 8px; }
.event-mine-card .ticket-card-link { text-decoration: none; }
.event-mine-card .ticket-card-link:hover { text-decoration: underline; }
/* A ticket sold on the holder's balance */
.ticket-pop-owed, .ticket-card-owed { display: inline-block; margin: 8px 0 2px; padding: 4px 12px; border-radius: 12px; background: #fbf3d5; color: #8a6d1d; font-size: 12px; font-weight: 700; }
.ticket-pop-pay { margin-bottom: 8px; }
/* Edit Check-In: remove links on the date rows */
.checkin-edit-label { display: flex; justify-content: space-between; align-items: baseline; }
.label .checkin-edit-remove, .checkin-edit-remove { font-size: 11px; font-weight: 600; color: #c0392b; cursor: pointer; text-transform: none; letter-spacing: 0; }
.checkin-edit-remove:hover { text-decoration: underline; }
.event-promoters { }
.event-promoter { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #ececec; font-size: 13px; }
.event-promoter:first-of-type { border-top: none; }
.event-promoter-pic { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.event-promoter-name { flex: 1; color: #333; font-weight: 600; text-decoration: none; }
.event-promoter-stat { color: #666; }
.event-promoter-rev { font-weight: 700; color: #333; min-width: 60px; text-align: right; }

/* Event editor: title suggestions (recurring events) */
.event-title-pick { position: relative; }
.event-title-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); margin-top: 4px; overflow: hidden; }
.event-title-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; font-size: 14px; color: #333; }
.event-title-item:hover { background: #f3f3f3; }
.event-title-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.event-title-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-title-item-kind { font-size: 11px; color: #999; white-space: nowrap; }
.event-title-linked { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: #626262; background: #f3f3f3; border-radius: 999px; padding: 4px 10px; }
.event-title-linked-x { cursor: pointer; color: #999; font-size: 15px; line-height: 1; }
.event-title-linked-x:hover { color: #c33; }
/* Event page: other dates of a recurring event */
.event-when-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
/* The date badge sits in the row's flow on the right (the card version is absolutely placed) */
.event-when-badge { position: static; flex-shrink: 0; border: 1px solid #e8e8e8; box-shadow: none; margin-left: auto; }
.event-other-dates + .event-when-badge { margin-left: 0; }
.event-other-dates { text-align: right; flex-shrink: 0; }
.event-other-title { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #999; margin-bottom: 4px; }
.event-other-date { display: block; font-size: 13px; color: #2a70b8; text-decoration: none; font-weight: 600; line-height: 1.6; }
.event-other-date:hover { text-decoration: underline; }
.event-other-more { display: inline-block; margin-top: 2px; font-size: 12px; color: #666; text-decoration: none; }
.event-other-more:hover { color: #222; }
@media (max-width: 520px) { .event-when-row { flex-wrap: wrap; } .event-other-dates { text-align: left; } }

/* Schedule class form: room under the rich description editor */
.class-desc-editor { margin-bottom: 12px; }

/* Event page: date/time editor keeps date, start and end on one row (phones too) */
.event-when-fields { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; min-width: 0; }
.event-when-fields input[type=date] { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 4px; }
.event-when-fields select { flex: 0 1 auto; min-width: 0; max-width: 32%; padding-left: 8px; }
.event-when-class { flex: 1 1 200px; }
/* Staff box: capacity edit, delete */
.event-staff-stat-clickable { cursor: pointer; border-radius: 6px; padding: 4px 8px; margin: -4px -8px -4px auto; transition: background .15s ease; }
.event-staff-stat-clickable:hover { background: #ececec; }
.event-capacity-edit { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.event-capacity-edit input { width: 80px; margin: 0; padding: 6px 8px; }
.event-capacity-edit .btn-small { margin: 0; padding: 6px 12px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.event-tiers-add { display: block; text-decoration: none; cursor: pointer; border: 1px dashed #ccc; border-radius: 8px; padding: 14px; text-align: center; }
.event-tiers-add:hover { background: #fafafa; color: #555; }
@media (max-width: 600px) { .event-staff-stat-clickable, .event-capacity-edit { margin-left: 0; } }

/* Roster door mode: scanner bar above the member list */
.scanner-embedded { max-width: none; padding: 0 0 10px; margin-top: 15px; }
/* Guest List: the door wrapper adds no gap of its own; the scanner brings its 15px only when it shows something */
#doorVue.col-edge { margin-top: 0; }
.scanner-embedded.scanner-empty { padding: 0; margin: 0; }
.scanner-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: none; box-shadow: none; padding: 0; margin: 0 0 6px; text-align: left; }
.scanner-bar-btn { margin: 0; padding: 10px 20px; font-size: 14px; font-weight: 700; letter-spacing: .05em; }
.scanner-bar-manual { display: flex; gap: 0; align-items: stretch; flex: 1 1 220px; }
/* Ticket # field + blue search button, the member search box's look */
.scanner-bar-manual .scanner-search { flex: 1; max-width: none; min-width: 0; margin: 0; }
.scanner-bar-manual .scanner-search-btn { margin: 0; flex: none; }
.scanner-bar-manual .scanner-search-btn img { height: 18px; opacity: .9; display: block; }
.scanner-bar-manual .btn-small { margin: 0; white-space: nowrap; }
.door-focus { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fdecec; color: #a12727; border-radius: 8px; padding: 8px 12px; margin: 12px 10px 0; font-size: 13px; font-weight: 600; }
/* It sits above #members-list (outside it), so on desktop it clears the side menu the way .page does */
@media only screen and (min-width: 768px) { .door-focus { margin-left: 180px; } }
.door-focus-clear { cursor: pointer; font-weight: 400; color: #666; }
/* Pass chooser on a ticketed event */
.pass-pop-mode { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #666; background: #f3f3f3; padding: 6px 12px; text-align: center; }
.pass-pop-mode-strict { background: #fff3dc; color: #a86a00; }
.pass-pop-badge { display: inline-block; margin-left: 6px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; vertical-align: middle; }
.pass-pop-badge-ticket { background: #e6f5e9; color: #21702f; }
/* Override (a pass that is not this event's ticket): red, the mirror of the green Ticket badge */
.pass-pop-badge-other { background: #fdeceb; color: #c62828; }
.pass-pop-locked { opacity: .45; cursor: not-allowed; }
.pass-pop-locked input { pointer-events: none; }
/* Event page: door mode switch */

/* Promoters page: where the tickets came from */
.promo-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; }
.promo-kpi { background: #fff; border-radius: 12px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 16px 18px; text-align: center; }
.promo-kpi-value { font-size: 30px; font-weight: 800; color: #222; line-height: 1.1; }
.promo-kpi-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #888; margin-top: 4px; }
.promo-card { background: #fff; border-radius: 12px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 18px 22px 20px; margin: 0 0 16px; text-align: left; }
.promo-card-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #999; margin-bottom: 12px; }
/* By source: its View as table / View as chart toggle sits on the title line */
.promo-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.promo-card-title .promo-card-toggle { margin: -6px 0; padding: 6px 12px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.promo-share { display: flex; height: 34px; border-radius: 8px; overflow: hidden; background: #f1f1f1; }
.promo-share-seg { position: relative; display: flex; align-items: center; justify-content: center; margin-right: 2px; transition: opacity .15s ease; min-width: 2px; }
.promo-share-seg:last-child { margin-right: 0; }
.promo-share-seg-dim { opacity: .35; }
.promo-share-label { font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.promo-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: #555; }
.promo-legend-item { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.promo-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; flex-shrink: 0; }
.promo-row { display: grid; grid-template-columns: 24px minmax(160px, 1.2fr) 2fr auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid #f0f0f0; transition: opacity .15s ease; }
.promo-row:first-of-type { border-top: none; }
.promo-row-dim { opacity: .4; }
.promo-row-rank { font-size: 12px; color: #aaa; text-align: right; }
.promo-row-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.promo-row-pic { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.promo-row-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.promo-row-icon img { width: 18px; height: 18px; }
.promo-row-text { min-width: 0; }
.promo-row-name { font-size: 14px; font-weight: 700; color: #222; text-decoration: none; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-row-sub { font-size: 11px; color: #888; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.promo-row-bar-wrap { height: 12px; background: #f1f1f1; border-radius: 4px; overflow: hidden; }
.promo-row-bar { height: 100%; border-radius: 0 4px 4px 0; min-width: 3px; }
.promo-row-nums { text-align: right; white-space: nowrap; }
.promo-row-tickets { font-size: 16px; font-weight: 800; color: #222; }
.promo-row-tickets span { font-size: 11px; font-weight: 400; color: #888; }
.promo-row-rev { font-size: 12px; color: #666; }
.promo-table-wrap { overflow-x: auto; }
.promo-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.promo-table th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #999; padding: 6px 8px; border-bottom: 1px solid #eee; }
.promo-table td { padding: 8px; border-bottom: 1px solid #f3f3f3; color: #333; }
.promo-table .num { text-align: right; }
.promo-days { display: grid; gap: 4px; align-items: end; height: 150px; padding-top: 18px; }
.promo-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; position: relative; }
.promo-day-col { display: flex; flex-direction: column-reverse; width: 100%; max-width: 28px; height: 100%; justify-content: flex-start; gap: 2px; }
.promo-day-seg { width: 100%; border-radius: 3px 3px 0 0; transition: opacity .15s ease; }
.promo-day-total { font-size: 10px; color: #666; margin-top: 4px; height: 12px; }
.promo-day-label { font-size: 10px; color: #999; height: 12px; }
.promo-day-hot .promo-day-total { color: #222; font-weight: 700; }
/* Nothing sold yet: each section previewed, its sample faded under a line on what it will show */
.promo-preview-intro { margin: 4px 0 16px; font-size: 15px; color: #555; text-align: center; }
.promo-preview-tag { margin-left: 8px; padding: 2px 7px; border-radius: 10px; background: #f1f1f4; color: #888; font-size: 9.5px; letter-spacing: .1em; vertical-align: 1px; }
.promo-preview-note { margin: -4px 0 14px; font-size: 13.5px; line-height: 1.5; color: #555; }
.promo-preview-sample { opacity: .38; filter: saturate(.75); pointer-events: none; user-select: none; }
.promo-card-preview .promo-days { height: 110px; }
.promo-preview-pic { box-sizing: border-box; border: 3px solid; background: #fff; }
@media (max-width: 640px) {
	.promo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.promo-row { grid-template-columns: 20px minmax(0, 1fr) auto; }
	.promo-row-bar-wrap { grid-column: 2 / span 2; }
}

/* Offer page: the event a ticket admits to */
.price-event { font-size: 13px; font-weight: 600; color: #444; margin: 6px 0 2px; text-align: left; }

/* Schedule: class descriptions render on the class row, no white panel */
.class-description .markup-body { background-color: transparent; }

/* Modules: Events module title + description on the left, the event picker on the right */
.events-module-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 14px; }
.events-module-head > div { min-width: 0; }
.events-module-head select { width: auto; max-width: 320px; margin: 0; flex-shrink: 0; }
@media (max-width: 600px) { .events-module-head { flex-wrap: wrap; } .events-module-head select { width: 100%; max-width: none; } }

/* Offer page: the event's promo card above a single ticket offer */
/* Same poster as the event page: the manager's shape, cover-cropped, the event page's width */
.offer-event-pic { display: block; width: calc(100% - 32px); max-width: 728px; margin: 0 auto 14px; border-radius: 12px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); background: #eee; }
.offer-event-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.ticket-card-number { font-size: 12px; color: #666; margin-top: 8px; letter-spacing: .04em; }

/* Roster door bar: clear the desktop side menu like .page does (same breakpoint) */
@media only screen and (min-width: 768px) { #doorVue { margin: 15px 30px 0px 190px; } }

/* Event page: date badge in the studio color, tap to add to calendar */
.event-when-badge { color: #fff; cursor: pointer; border: none; }
.event-when-badge .event-card-month { color: #ffffffbd; }
.event-when-badge .event-card-day { color: #ffffff; }
.event-when-badge-wrap { position: relative; flex-shrink: 0; margin-left: auto; }
.event-other-dates + .event-when-badge-wrap { margin-left: 0; }
.event-cal-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); overflow: hidden; min-width: 200px; }
.event-cal-item { display: block; padding: 10px 14px; font-size: 13px; color: #333; text-decoration: none; white-space: nowrap; }
.event-cal-item:hover { background: #f3f3f3; }
.event-cal-item + .event-cal-item { border-top: 1px solid #f0f0f0; }

/* Event page: + Add menu under Get Tickets (mirrors the calendar badge menu) */
.event-tiers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.event-tiers-head .event-tiers-title { margin-bottom: 0; }
.event-add-price { position: relative; }
.event-add-price-btn { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #2a70b8; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.event-add-price-btn:hover { background: #f3f3f3; }
.event-add-price-menu { min-width: 240px; max-height: 320px; overflow-y: auto; text-align: left; }
.event-add-price-new { font-weight: 700; color: #2a70b8 !important; cursor: pointer; }
.event-add-price-sub { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #999; padding: 8px 14px 2px; border-top: 1px solid #f0f0f0; }
.event-add-price-item { display: flex !important; justify-content: space-between; gap: 14px; cursor: pointer; border-top: none !important; }
.event-add-price-amt { color: #666; font-weight: 600; }
.event-add-price-note { color: #999; }
.event-tiers .event-tiers-add { cursor: pointer; }
#package-events .package-class { margin-top: 6px; }

/* Door sale: pick a price, pick a buyer */
.door-sell { text-align: left; }
.door-tier { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #eee; }
.door-tier-off .door-tier-name { color: #888; }
.door-tier-name { font-size: 15px; font-weight: 700; color: #222; }
.door-tier-state { font-size: 12px; color: #888; }
.door-sell button.door-tier-price { margin: 0; padding: 8px 16px; min-width: 88px; font-size: 16px; font-weight: 800; white-space: nowrap; border-radius: 6px; }
.door-picked { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 13px; color: #444; background: #f7f7f7; }
.door-picked a { color: #2a70b8; cursor: pointer; font-size: 12px; }
.door-buyer { position: relative; padding: 12px 14px 0; }
.door-buyer input { width: 100%; margin: 0; box-sizing: border-box; }
.door-buyer-list { position: absolute; left: 14px; right: 14px; top: 100%; z-index: 5; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.15); overflow: hidden; max-height: 240px; overflow-y: auto; }
.door-buyer-item { display: flex; flex-direction: column; padding: 8px 12px; cursor: pointer; }
.door-buyer-item:hover { background: #f3f3f3; }
.door-buyer-name { font-size: 14px; color: #222; font-weight: 600; }
.door-buyer-email { font-size: 11px; color: #888; }
.door-buyer-none { padding: 10px 12px; font-size: 13px; color: #999; }
.door-buyer-chosen { padding: 8px 14px 0; font-size: 13px; color: #21702f; font-weight: 600; }
.door-buyer-walkin { padding: 8px 14px 0; font-size: 12px; color: #888; }
/* Analytics → Events report */
.evrep-mode { display: inline-flex; gap: 4px; vertical-align: middle; margin-left: 12px; }
.evrep-pill { font-size: 11px; font-weight: 600; color: #888; padding: 5px 12px; border-radius: 14px; background: #ececec; cursor: pointer; }
.evrep-pill.on { background: var(--evrep-brand, #5b5b5b); color: #fff; }
.evrep-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }
.evrep-sub { display: block; font-size: 11px; color: #aaa; padding-left: 16px; }
.evrep-month .record-item { background: #dcdcdc; color: #444; font-size: 13px; padding: 12px 0; }
.evrep-refund { color: #c0392b; }
.evrep-note { font-size: 11px; color: #aaa; padding: 10px 20px 4px; }
.door-buyer-new .door-buyer-name { color: #2a70b8; }
.door-buyer-chosen-note { font-weight: 400; color: #888; }
.door-checkin { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; font-size: 14px; color: #333; cursor: pointer; }
.door-checkin input { margin: 0; width: auto; }
.door-sell .btn-long { margin: 8px 14px 6px; width: calc(100% - 28px); }
.door-new-member { display: block; text-align: center; font-size: 12px; color: #666; padding: 4px 14px 14px; text-decoration: none; }

.ticket-card-pay { margin: 8px 0 2px; padding: 8px 18px; font-size: 13px; border-radius: 18px; }
.ticket-card-pay img { height: 14px; vertical-align: middle; margin-right: 4px; }
/* ---------------------------------------------------------------- rooms --- */
.rooms-page { width: 100%; max-width: 980px; margin: 0 auto; padding: 6px 16px 24px; box-sizing: border-box; text-align: left; }
.rooms-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 14px; }
.rooms-head-title { font-size: 22px; font-weight: 700; color: #333; }
.rooms-head-actions { display: flex; gap: 8px; align-items: center; }
.rooms-head-actions .btn-small { margin: 0; padding: 7px 14px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.rooms-empty { text-align: center; color: #888; padding: 40px 10px; font-size: 15px; }
.rooms-empty-hint { font-size: 13px; color: #aaa; margin-top: 6px; }
.rooms-foot { text-align: center; color: #999; font-size: 12px; padding: 6px 0 0; }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.room-card { display: flex; flex-direction: column; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); cursor: pointer; position: relative; transition: transform .12s ease, box-shadow .12s ease; }
.room-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 6px 14px rgba(0,0,0,0.12); }
.room-card.sortable-ghost { opacity: .4; }
.room-card-media { position: relative; width: 100%; background: #eee center / cover no-repeat; }
.room-card-media-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); font-size: 56px; font-weight: 800; letter-spacing: .05em; }
.room-card-handle { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; border-radius: 13px; background: rgba(0,0,0,.45); color: #fff; font-size: 18px; line-height: 26px; text-align: center; cursor: grab; user-select: none; }
.room-card-handle:active { cursor: grabbing; }
.room-card-gallery { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 10px; }
.room-card-body { padding: 12px 14px 14px; }
.room-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.room-card-name { font-size: 17px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card-cap { flex: none; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #2a7d3f; background: #e8f5ea; padding: 3px 8px; border-radius: 10px; }
.room-card-cap-none { color: #777; background: #f0f0f0; }
.room-card-place { font-size: 12px; color: #777; margin-top: 3px; }
.room-card-usage { font-size: 12px; color: #999; margin-top: 6px; }

.room-editor { max-width: 640px; margin-top: 130px; }
.room-editor-body { padding: 0 20px 20px; text-align: left; }
.room-editor-row { display: flex; gap: 12px; }
.room-editor-row .invoice-field { min-width: 0; }
.room-editor-grow { flex: 2; }
.room-editor-cap { flex: 1; max-width: 130px; }
.room-editor-color { flex: none; width: 64px; }
.room-editor .invoice-field { margin-bottom: 12px; }
.room-editor .invoice-field select, .room-editor .invoice-field input[type=color] { width: 100%; margin: 0; box-sizing: border-box; }
.room-editor .invoice-field input[type=color] { height: 38px; padding: 2px 4px; border: 1px solid #ccc; border-radius: 4px; background: #fff; cursor: pointer; }
.room-editor-usage { font-size: 12px; color: #888; margin: 0 0 12px; }
.room-promo { position: relative; width: 100%; border-radius: 8px; background: #f1f1f1 center / cover no-repeat; margin: 14px auto 16px; cursor: pointer; border: 2px dashed transparent; display: flex; align-items: center; justify-content: center; }
.room-promo-empty { border-color: #ccc; }
.room-promo-drop { border-color: #2a9d3f; background-color: #eef8ef; }
.room-promo-hint { text-align: center; color: #888; padding: 10px; }
.room-promo-hint-title { font-size: 14px; font-weight: 700; color: #666; }
.room-promo-hint-sub { font-size: 12px; margin-top: 4px; }
.room-gallery { border: 2px dashed #ddd; border-radius: 8px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.room-gallery-drop { border-color: #2a9d3f; background: #eef8ef; }
.room-gallery-list { display: contents; }
.room-gallery-thumb { position: relative; width: 92px; height: 92px; border-radius: 6px; background: #eee center / cover no-repeat; cursor: pointer; }
.room-gallery-thumb.sortable-ghost { opacity: .4; }
.room-gallery-x { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 10px; background: #c0392b; color: #fff; font-size: 14px; line-height: 20px; text-align: center; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.room-gallery-add { width: 92px; height: 92px; border-radius: 6px; border: 1px solid #ccc; background: #fafafa; color: #666; font-size: 12px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; box-sizing: border-box; cursor: pointer; }
.room-gallery-add:hover { background: #f0f0f0; }
.room-gallery-count { font-weight: 400; color: #999; margin-left: 4px; }
.room-gallery-hint { font-size: 11px; color: #999; margin-top: 4px; }
.room-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.85); display: flex; align-items: center; justify-content: center; z-index: 90; cursor: zoom-out; }
.room-lightbox img { max-width: 94vw; max-height: 92vh; border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.5); }
@media (max-width: 600px) {
  .room-editor-row { flex-wrap: wrap; }
  .room-editor-grow { flex: 1 1 100%; }
  .room-editor-cap { max-width: none; flex: 1; }
}
.room-card-media:has(.room-card-media-empty) { aspect-ratio: auto; height: 140px; }
/* rooms: open practice editor */
.room-card-practice { font-size: 12px; color: #2a7d3f; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.room-card-practice-dot { width: 8px; height: 8px; border-radius: 4px; background: #2a9d3f; flex: none; }
.room-practice { border: 1px solid #e3e3e3; border-radius: 8px; margin: 0 0 12px; overflow: hidden; }
.room-practice-on { border-color: #bfe3c6; }
.room-practice-head { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 10px 12px; background: #f7f7f7; cursor: pointer; align-items: center; column-gap: 12px; }
.room-practice-on .room-practice-head { background: #eef8ef; }
.room-practice-title { font-size: 13px; font-weight: 700; color: #333; }
.room-practice-sub { font-size: 12px; color: #888; grid-column: 1; }
.room-practice-switch { grid-column: 2; grid-row: 1 / span 2; width: 40px; height: 22px; border-radius: 11px; background: #ccc; position: relative; transition: background .15s; }
.room-practice-switch span { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 9px; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.room-practice-switch.on { background: #2a9d3f; }
.room-practice-switch.on span { left: 20px; }
.room-hours { padding: 6px 12px 10px; }
.room-hours-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px; }
.room-hours-day { width: 64px; flex: none; cursor: pointer; display: flex; align-items: center; gap: 6px; color: #333; user-select: none; }
.room-hours-off .room-hours-day { color: #999; }
.room-hours-check { width: 16px; height: 16px; border: 1px solid #bbb; border-radius: 3px; font-size: 11px; line-height: 14px; text-align: center; color: transparent; background: #fff; }
.room-hours-check.on { background: #2a9d3f; border-color: #2a9d3f; color: #fff; }
.room-hours-row select { margin: 0; padding: 4px 6px; font-size: 13px; width: auto; min-width: 0; }
.room-hours-dash { color: #999; }
.room-hours-copy { font-size: 11px; color: #999; margin-left: auto; cursor: pointer; text-transform: uppercase; letter-spacing: .04em; }
.room-hours-copy:hover { color: #333; }
.room-hours-closed { color: #bbb; font-size: 12px; }
.room-hours-hint { font-size: 11px; color: #999; margin-top: 6px; }

/* ------------------------------------------------------------- practice --- */
.practice-page { width: 100%; max-width: 760px; margin: 0 auto; padding: 6px 16px 24px; box-sizing: border-box; text-align: left; }
.practice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0 10px; flex-wrap: wrap; }
.practice-head-title { font-size: 22px; font-weight: 700; color: #333; }
.practice-pass { font-size: 13px; font-weight: 700; color: #2a7d3f; background: #e8f5ea; padding: 6px 12px; border-radius: 14px; display: flex; align-items: center; gap: 10px; }
.practice-pass-none { color: #8a6d1d; background: #fbf3d5; }
.practice-pass-click { cursor: pointer; }
.practice-pass-click:hover { background: #f7ecc4; }
/* No Practice pass on sale: a manager's drop with + Add a Practice pass */
.practice-pass-wrap { position: relative; }
.practice-pass-caret { font-size: 10px; opacity: .7; }
.practice-pass-drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 250px; background: #fff; border: 1px solid #e3e0ec; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.16); padding: 12px 14px; text-align: left; }
.practice-pass-drop-text { font-size: 13px; color: #666; line-height: 1.4; margin-bottom: 8px; }
.practice-pass-drop-add { display: block; padding: 6px 0 2px; border-top: 1px solid #eee; color: #5d45a2; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; }
.practice-pass-drop-add:hover { color: #4a3a78; }
.practice-pass .btn-small { margin: 0; padding: 5px 10px; font-size: 10px; text-decoration: none; }
.practice-days { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0 12px; -webkit-overflow-scrolling: touch; }
.practice-day { flex: none; width: 48px; padding: 6px 0; border-radius: 10px; background: #fff; text-align: center; cursor: pointer; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 1px 2px rgba(0,0,0,0.12); color: #555; }
.practice-day-dow { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; }
.practice-day-num { font-size: 17px; font-weight: 700; }
.practice-day.today .practice-day-dow { color: #2a9d3f; }
.practice-day.off { opacity: .4; }
.practice-day.off.on { opacity: .75; }
.practice-day.on { background: var(--bar-bot, #624691); color: #fff; }
.practice-day.on .practice-day-dow { color: rgba(255,255,255,.85); }
.practice-empty, .practice-closed { text-align: center; color: #999; padding: 24px 10px; font-size: 14px; }
.practice-closed { padding: 14px; font-size: 13px; }
.practice-room { background: #fff; border-radius: 12px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); margin: 0 0 16px; overflow: hidden; transition: opacity .15s; }
.practice-room-busy { opacity: .6; pointer-events: none; }
.practice-room-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #eee; }
.practice-room-thumb { width: 52px; height: 40px; border-radius: 6px; background: #eee center / cover no-repeat; flex: none; }
.practice-room-info { flex: 1; min-width: 0; }
.practice-room-name { font-size: 16px; font-weight: 700; color: #222; }
.practice-room-sub { font-size: 12px; color: #777; }
.practice-room-more { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #888; cursor: pointer; flex: none; }
.practice-room-more:hover { color: #333; }
.practice-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; padding: 12px 14px 14px; }
.practice-block { border: 1px solid #dfe8df; border-radius: 8px; padding: 8px 8px 7px; background: #f6fbf6; cursor: pointer; text-align: center; min-width: 0; }
.practice-block:hover { border-color: #2a9d3f; }
.practice-block-time { font-size: 14px; font-weight: 700; color: #222; }
.practice-block-sub { font-size: 11px; color: #2a7d3f; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.practice-block-busy { color: #999; }
.practice-block-full, .practice-block-busy, .practice-block-past { background: #f3f3f3; border-color: #e6e6e6; cursor: default; }
.practice-block-full:hover, .practice-block-busy:hover, .practice-block-past:hover { border-color: #e6e6e6; }
.practice-block-full .practice-block-time, .practice-block-busy .practice-block-time, .practice-block-past .practice-block-time { color: #999; }
.practice-block-full .practice-block-sub, .practice-block-busy .practice-block-sub, .practice-block-past .practice-block-sub { color: #aaa; }
.practice-block-mine { background: #2a9d3f; border-color: #2a9d3f; cursor: pointer; }
.practice-block-mine .practice-block-time, .practice-block-mine .practice-block-sub { color: #fff; }
.practice-upcoming { background: #fff; border-radius: 12px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 12px 14px; }
.practice-upcoming-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.practice-upcoming-row { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; border-top: 1px solid #f0f0f0; }
.practice-upcoming-row:first-of-type { border-top: none; }
.practice-upcoming-when { color: #222; font-weight: 600; }
.practice-upcoming-room { color: #777; flex: 1; }
.practice-upcoming-in { color: #2a7d3f; font-size: 12px; }
.practice-upcoming-cancel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #c0392b; cursor: pointer; }
/* Staff+: the day's reservations, each row a link to the hour's event */
.practice-day-res { margin-bottom: 12px; }
a.practice-res-row { text-decoration: none; color: inherit; cursor: pointer; border-radius: 6px; }
a.practice-res-row:hover { background: #f6f4fb; }
.practice-res-count { font-size: 12px; font-weight: 700; color: #624691; background: #efe9f8; border-radius: 10px; padding: 2px 9px; white-space: nowrap; }
.practice-res-go { color: #aaa; font-size: 16px; padding-right: 2px; }
.practice-room-pop { max-width: 560px; margin-top: 130px; }
.practice-room-pop-body { padding: 0 20px 20px; text-align: left; }
.practice-room-pop-body .markup-body { background-color: transparent; }
.practice-room-pop-pic { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #eee center / cover no-repeat; margin: 0 0 14px; }
/* Practice passes on sale (no hours left) */
.practice-passes-pop { text-align: left; }
.practice-passes-pop .title { text-align: left; }
.practice-passes-pop .sleek-class-title, .practice-passes-pop .book-title, .practice-passes-pop .book-text { text-align: center; }
.practice-passes-note { padding: 10px 14px 4px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8a6d1d; text-align: center; }
.practice-pass-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #eee; }
.practice-pass-row:last-child { border-bottom: none; }
.practice-pass-name { font-size: 15px; font-weight: 700; color: #222; }
.practice-pass-sub { font-size: 12px; color: #888; }
.practice-passes-pop button.practice-pass-price { margin: 0; padding: 8px 16px; min-width: 88px; font-size: 16px; font-weight: 800; white-space: nowrap; border-radius: 6px; }
.practice-room-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-top: 14px; }
.practice-room-gallery-pic { aspect-ratio: 1 / 1; border-radius: 6px; background: #eee center / cover no-repeat; cursor: pointer; }
/* rooms: rentals editor + list */
.room-card-rental .room-card-practice-dot { background: #4a90d9; }
.room-card-rental { color: #2f6fb3; }
.room-rental.room-practice-on { border-color: #bdd6f0; }
.room-rental.room-practice-on .room-practice-head { background: #eaf3fc; }
.room-rental .room-practice-switch.on { background: #4a90d9; }
.room-rental .room-hours-check.on { background: #4a90d9; border-color: #4a90d9; }
.room-rental-row { padding: 6px 0 2px; }
.room-rental-row .invoice-field { margin-bottom: 8px; }
.room-rental-link { display: inline-block; font-size: 11px; color: #888; margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
.room-addons { margin-top: 8px; border-top: 1px solid #eee; padding-top: 8px; }
.room-addons-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #888; margin-bottom: 4px; }
.room-addon { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #333; padding: 4px 0; cursor: pointer; user-select: none; }
.room-addon-price { color: #999; font-size: 12px; margin-left: auto; }
.rooms-rentals { background: #fff; border-radius: 12px; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); padding: 12px 14px; margin-top: 20px; }
.rooms-rentals-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.rooms-rental-row { display: flex; align-items: center; gap: 12px; font-size: 13px; padding: 6px 0; border-top: 1px solid #f0f0f0; flex-wrap: wrap; }
.rooms-rental-row:first-of-type { border-top: none; }
.rooms-rental-when { font-weight: 600; color: #222; }
.rooms-rental-room { color: #2f6fb3; }
.rooms-rental-who { color: #555; text-decoration: none; }
.rooms-rental-who:hover { color: #222; text-decoration: underline; }
.rooms-rental-row .rooms-rental-price { margin-left: auto; }
.rooms-rental-price { color: #222; font-weight: 600; }
.rooms-rental-status { color: #c0392b; font-size: 11px; text-transform: uppercase; }
.rooms-rental-cancel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #c0392b; cursor: pointer; }
.rooms-rental-canceled { opacity: .55; }

/* -------------------------------------------------------------- rentals --- */
.rentals-page { width: 100%; max-width: 980px; margin: 0 auto; padding: 6px 16px 24px; box-sizing: border-box; text-align: left; }
.rentals-head { padding: 6px 0 14px; }
.rentals-head-title { font-size: 24px; font-weight: 700; color: #333; }
.rentals-head-sub { font-size: 14px; color: #777; margin-top: 2px; }
.rentals-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.rental-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 2px rgba(0,0,0,0.19), 0 2px 2px rgba(0,0,0,0.12); cursor: pointer; display: flex; flex-direction: column; transition: transform .12s ease, box-shadow .12s ease; }
.rental-card:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,0.16), 0 6px 14px rgba(0,0,0,0.12); }
.rental-card-media { position: relative; width: 100%; background: #eee center / cover no-repeat; }
.rental-card-media:has(.room-card-media-empty) { aspect-ratio: auto; height: 160px; }
.rental-card-price { position: absolute; right: 10px; bottom: 10px; background: rgba(0,0,0,.65); color: #fff; font-size: 16px; font-weight: 700; padding: 5px 10px; border-radius: 8px; }
.rental-card-price span { font-size: 11px; font-weight: 400; opacity: .85; }
.rental-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rental-card-name { font-size: 18px; font-weight: 700; color: #222; }
.rental-card-sub { font-size: 12px; color: #777; }
.rental-card-hours { font-size: 12px; color: #2f6fb3; }
.rental-card-btn { margin: 10px 0 0; align-self: stretch; }
.rentals-mine { margin-top: 20px; }
.rental-pop { max-width: 680px; margin-top: 130px; }
.rental-pop-body { padding: 0 20px 20px; text-align: left; }
.rental-pop-pics { margin: 0 0 12px; }
.rental-pop-pic { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; background: #eee center / cover no-repeat; cursor: pointer; }
.rental-pop-thumbs { display: flex; justify-content: center; gap: 6px; margin-top: 6px; overflow-x: auto; }
.rental-pop-thumb { flex: none; width: 72px; height: 54px; border-radius: 6px; background: #eee center / cover no-repeat; cursor: pointer; }
.rental-pop-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; color: #555; margin-bottom: 8px; }
.rental-pop-fact strong { color: #222; font-size: 15px; }
.rental-pop-desc, .rental-pop-desc.markup-body { font-size: 13px; color: #444; margin-bottom: 10px; background-color: transparent; }
.rental-pop-section { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #888; margin: 14px 0 6px; }
.rental-days { padding-bottom: 4px; }
.rental-blocks { padding: 0; }
.rental-pop-order { border-top: 1px solid #eee; margin-top: 14px; padding-top: 12px; }
.rental-pop-hours, .rental-pop-addons { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 10px; }
.rental-pop-addons { align-items: flex-start; }
.rental-pop-addons .room-addon { padding: 2px 0; }
.rental-pop-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #888; min-width: 64px; }
.rental-stepper { display: inline-flex; align-items: center; gap: 12px; background: #f3f3f3; border-radius: 16px; padding: 4px 10px; }
.rental-stepper a { width: 22px; height: 22px; border-radius: 11px; background: #fff; text-align: center; line-height: 22px; font-size: 16px; color: #333; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.2); user-select: none; }
.rental-stepper a.off { opacity: .3; cursor: default; }
.rental-stepper strong { font-size: 16px; min-width: 18px; text-align: center; }
.rental-pop-span { font-size: 13px; color: #555; }
.rental-pop-total { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #555; border-top: 1px solid #eee; padding-top: 10px; margin-top: 4px; }
.rental-pop-total-amt { font-size: 22px; font-weight: 700; color: #222; }
.rental-pop-reserve { margin: 12px 0 0; width: 100%; }
.rental-pop-signin-hint { font-size: 12px; color: #888; margin-top: 10px; }
.rental-pop-pick-hint { text-align: center; font-size: 13px; color: #999; padding: 16px 0 4px; }
.rentals-signin { max-width: 420px; margin: 0 auto 20px; }
.rentals-signin #signin { padding: 0; }
.room-addon-row { cursor: default; border-bottom: 1px solid #f0f0f0; }
.room-addon-name { flex: 1; }
.room-addon-x { width: 20px; height: 20px; border-radius: 10px; text-align: center; line-height: 18px; color: #c0392b; font-size: 16px; cursor: pointer; }
.room-addon-x:hover { background: #fdecea; }
.room-addons-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.room-addons-head .room-addons-title { margin-bottom: 0; }
.room-addon-select { margin: 0; width: auto; max-width: 60%; padding: 4px 8px; font-size: 12px; box-sizing: border-box; }
.room-addon-row .room-addon-price { margin-left: 0; }
@media (max-width: 600px) {
  .rental-pop-body { padding: 0 8px 14px; }
  .rental-pop-facts { gap: 4px 10px; }
}
/* rooms: card picture shape menu (same control as the event poster) */
.room-ratio { position: absolute; top: 10px; right: 10px; z-index: 3; }
.room-ratio-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; padding: 0; margin: 0; opacity: .85; transition: opacity .15s ease, background .15s ease; }
.room-ratio-btn:hover, .room-ratio-btn:focus, .room-ratio-btn:active, .room-ratio-open .room-ratio-btn { color: #fff; background: rgba(0,0,0,.75); background-color: rgba(0,0,0,.75); opacity: 1; }
.room-ratio-btn svg { display: block; }
.room-ratio-menu { position: absolute; top: 46px; right: 0; width: 170px; letter-spacing: 0; background: rgba(0,0,0,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.35); padding: 8px 0; text-align: left; }
.room-ratio-menu-title { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); padding: 4px 12px 6px; }
.room-ratio-item { display: flex; align-items: center; gap: 10px; padding: 6px 12px; min-height: 40px; box-sizing: border-box; cursor: pointer; color: rgba(255,255,255,.85); font-size: 13px; }
.room-ratio-item:hover { background: rgba(255,255,255,.12); }
.room-ratio-item.active { font-weight: 700; color: #fff; }
.room-ratio-icon { display: inline-block; flex-shrink: 0; border: 2px solid currentColor; border-radius: 3px; box-sizing: border-box; }
.room-ratio-item:not(.active) .room-ratio-icon { border-color: rgba(255,255,255,.7); }
.room-ratio-item.active .room-ratio-icon { background: rgba(255,255,255,.22); }
.room-ratio-icon-wrap { width: 32px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; font-size: 20px; }
.room-ratio-label { flex: 1; }
.room-ratio-dims { font-size: 11px; color: rgba(255,255,255,.55); }
.room-ratio-item.active .room-ratio-dims { color: inherit; opacity: .75; }
.room-ratio-action { border-top: 1px solid rgba(255,255,255,.12); margin-top: 4px; }
.room-ratio-action + .room-ratio-action { border-top: none; margin-top: 0; }
.room-ratio-camera { width: 18px; height: 18px; opacity: .85; }
.room-ratio-remove { color: #ff8a80; }

/* rooms: gallery lightbox */
.room-gallery-box { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 96px 16px 16px; box-sizing: border-box; } /* top clears the nav + page bar, which stack above it */
.room-gallery-box-close { position: absolute; top: 106px; right: 16px; color: rgba(255,255,255,.8); font-size: 36px; line-height: 1; cursor: pointer; }
.room-gallery-box-stage { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; min-height: 0; flex: 0 1 auto; }
.room-gallery-box-img { max-width: calc(100vw - 160px); max-height: calc(100vh - 230px); border-radius: 6px; box-shadow: 0 6px 30px rgba(0,0,0,.5); cursor: pointer; }
.room-gallery-box-arrow { flex: none; width: 46px; height: 46px; border-radius: 23px; background: rgba(255,255,255,.14); color: #fff; font-size: 34px; line-height: 42px; text-align: center; cursor: pointer; user-select: none; text-decoration: none; }
.room-gallery-box-arrow:hover { background: rgba(255,255,255,.28); color: #fff; }
.room-gallery-box-arrow.off { opacity: .25; cursor: default; }
.room-gallery-box-arrow-mobile { display: none; }
.room-gallery-box-foot { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 640px; }
.room-gallery-box-thumbs { flex: 1; overflow: hidden; height: 76px; position: relative; }
.room-gallery-box-strip { position: absolute; top: 10px; left: 0; display: flex; gap: 8px; transition: transform .25s ease; }
.room-gallery-box-thumb { flex: none; width: 56px; height: 56px; border-radius: 6px; background: #333 center / cover no-repeat; opacity: .55; cursor: pointer; transition: transform .2s ease, opacity .2s ease; border: 2px solid transparent; box-sizing: border-box; }
.room-gallery-box-thumb.on { opacity: 1; transform: scale(1.18); border-color: #fff; }
@media (max-width: 600px) {
  .room-gallery-box { gap: 10px; padding: 92px 12px 12px; }
  .room-gallery-box-stage .room-gallery-box-arrow { display: none; }
  .room-gallery-box-img { max-width: 100%; max-height: calc(100vh - 220px); }
  .room-gallery-box-arrow-mobile { display: block; }
}

/* check-in popup: the RSVP'd pass leads */
.pass-pop-group { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #999; text-align: left; padding: 10px 12px 4px; }
.pass-pop-group-rsvp { color: #2a7d3f; }
.pass-pop-rsvp { border: none; border-radius: 8px; background: #f3faf4; margin: 0 0px 4px; overflow: hidden; }
/* member check-in calendar: book a practice hour / rent a room for the member */
.room-book .event-checkin { cursor: pointer; }
.room-book-list { text-align: left; }
.room-book-note { font-size: 12px; color: #8a6d1d; background: #fbf3d5; padding: 8px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.room-book-note-ok { color: #2a7d3f; background: #e8f5ea; }
.room-book-note-click { cursor: pointer; }
.room-book-note-ok.room-book-note-click:hover { background: #dcf0df; }
.room-book-note-more { margin-left: auto; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.room-book-note-click:hover { background: #f7ecc4; }
.room-book .practice-passes-pop { text-align: left; }
.room-book-sell { margin: 0; padding: 4px 8px; font-size: 10px; }
.room-book-room { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 10px 12px; cursor: default; }
.room-book-thumb { width: 44px; height: 34px; border-radius: 5px; background: #eee center / cover no-repeat; flex: none; }
.room-book-info { flex: 1; min-width: 90px; }
.room-book-name { font-size: 14px; font-weight: 600; color: #333; }
.room-book-sub { font-size: 11px; color: #888; }
.room-book-hours { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 4px; }
.room-book-hour { margin: 0; padding: 4px 8px; font-size: 11px; }
.room-book-hour-off, .room-book-hour:disabled { opacity: .35; cursor: default; }
.room-book-order { flex: 1 1 100%; background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; padding: 10px 34px 10px 12px; position: relative; }
.room-book-order-x { position: absolute; top: 4px; right: 8px; font-size: 22px; line-height: 1; color: #999; cursor: pointer; }
.room-book-order-x:hover { color: #c0392b; }
.room-book-order-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.room-book-order-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #888; min-width: 54px; }
.room-book-order-span { color: #555; font-size: 12px; }
.room-book-addons { align-items: flex-start; }
.room-book-addons .room-addon { padding: 2px 0; font-size: 12px; }
.room-book-total { justify-content: space-between; border-top: 1px solid #eee; padding-top: 8px; }
.room-book-total strong { font-size: 18px; color: #222; }
.room-book-cart { margin: 4px 0 0; width: 100%; }

/* practice: the member's own passes */
.practice-pass-mine { align-items: center; }
.practice-pass-bar { height: 5px; border-radius: 3px; background: #e6e6e6; margin-top: 7px; overflow: hidden; max-width: 260px; }
.practice-pass-bar span { display: block; height: 100%; background: #2a9d3f; border-radius: 3px; }
.practice-pass-left { flex: none; text-align: center; min-width: 64px; line-height: 1.1; }
.practice-pass-left strong { display: block; font-size: 24px; color: #2a7d3f; }
.practice-pass-left span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #999; }
.practice-pass-left-inf strong { font-size: 28px; }

/* practice: check-in style pass pick */
.practice-pick .practice-pick-btn { margin-top: 10px; }
.practice-pick .practice-pick-btn img { height: 16px; vertical-align: middle; }
.practice-pick .chooser-none { padding: 14px; }

/* lessons: room pick when booking, room edit on a booked lesson */
.book-room-wrap { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0 4px; }
.book-room-label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #888; }
.book-room-select { margin: 0; padding: 4px 8px; font-size: 12px; width: auto; min-width: 150px; }
.event-item-room { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.event-item-room img { height: 12px; opacity: .6; }
.lesson-room-edit { margin: 0 0 0 4px; padding: 2px 6px; font-size: 11px; width: auto; min-width: 0; max-width: 150px; vertical-align: middle; }
.btn-hour + .lesson-room-edit { display: inline-block; margin: 0 0 10px 4px; }
.lesson-room-text { display: inline-block; margin: 0 6px 10px 6px; padding: 2px 8px; border-radius: 9px; background: #ebebef; font-size: 11px; color: #777; white-space: nowrap; vertical-align: middle; }
.practice-buy-more { margin: 10px 0 0; }
.practice-buy-more img { height: 14px; vertical-align: middle; }
.booking-room { font-size: 14px; color: #777; display: flex; align-items: center; gap: 4px; }
.booking-room img { height: 12px; opacity: .6; }
.booking-loading { position: relative; min-height: 160px; }
/* Roster check-in popup: passes load inside it, not behind a full-page loader */
.pass-pop-loading { position: relative; min-height: 110px; }
.pass-pop-loading .vue-load { background-color: transparent; }
.booking-loading .vue-load { background-color: transparent; }
/* Staff View Booking popup (Today's Events, member calendar) - wears the Private Booking chooser frame */
.chooser.view-booking { position: relative; }
.view-booking-row { cursor: default; }
.view-booking-row .pass-left { padding-left: 20px; }
.view-booking-row .pass-right { padding-right: 20px; }
.view-booking-member { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #666; }
.view-booking-member-name { font-size: 14px; font-weight: 600; line-height: 1.2; text-align: right; }
.view-booking-member .box-profile-thumb { width: 40px; height: 40px; flex: 0 0 40px; margin: 0px; }
.view-booking-paid { color: #1e7a44; font-weight: 600; }
.view-booking-note { padding: 12px 0px 0px; font-size: 13px; color: #b46a00; }
.view-booking-room { display: flex; align-items: center; gap: 6px; padding: 4px 0px 0px; font-size: 13px; color: #777; }
.view-booking-room img { height: 13px; opacity: .6; }
.view-booking-room .lesson-room-edit { font-size: 12px; padding: 3px 8px; max-width: 200px; }
/* Booked Session: [camcorder Google Meet | link] fused into one pill */
.view-booking-meet { display: flex; justify-content: center; align-items: stretch; margin: -4px 0px 14px; }
.view-booking-meet .btn-small { margin: 0px; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.view-booking-meet .btn-small:first-child { border-radius: 3px 0px 0px 3px; border-right-width: 0px; }
.view-booking-meet .btn-small:last-child { border-radius: 0px 3px 3px 0px; border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: 9px; padding-right: 9px; }
.view-booking-meet .btn-small img { height: 13px; filter: invert(1); }
.view-booking .btn-long[disabled] { opacity: 0.45; cursor: not-allowed; }
/* Opened from inside the chat panel (z-index 9001) too, so it must clear it */
.view-booking-fade { z-index: 9500; }
.view-booking-actions { display: flex; align-items: stretch; gap: 4%; margin-top: 10px; }
.view-booking-actions > a, .view-booking-actions > button { flex: 1 1 0; min-width: 0; display: block; }
.view-booking-actions > a > button, .view-booking-actions > button { width: 100%; margin: 0; }
.view-booking-parts { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid #e3e0ec; border-radius: 8px; background: #faf9fd; text-align: left; }
.view-booking-parts-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #777; margin-bottom: 6px; }
.view-booking-parts-title { display: flex; align-items: center; gap: 4px; }
.view-booking-notes { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 8px; border-radius: 12px; background: #5d45a2; color: #fff !important; font-size: 11px; letter-spacing: .3px; text-transform: none; cursor: pointer; text-decoration: none; }
/* The AI Notes mic, as on the menu */
.view-booking-notes svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 13px; }
.view-booking-notes:hover { background: #4a3a78; }
/* + Add next to the count: opens the participants picker's drop */
.view-booking-add { margin-left: 4px; color: #5d45a2 !important; font-size: 11px; letter-spacing: .3px; text-transform: none; cursor: pointer; text-decoration: none; }
.view-booking-add:hover { color: #4a3a78 !important; }
.view-booking-parts-title span { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #e8e4f3; color: #4a3a78; text-align: center; box-sizing: border-box; }
.view-booking-part { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid #efedf5; font-size: 13px; }
.view-booking-part b { color: #333; font-weight: 600; }
.view-booking-part small { flex: 1; min-width: 0; color: #888; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view-booking-part-main small { flex: 1; }
.view-booking-part-x { margin-left: auto; color: #bbb; font-size: 18px; line-height: 14px; cursor: pointer; }
.view-booking-part-x:hover { color: #c62828; }
.view-booking-part-suggest { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 2px; }
.view-booking-part-chip { padding: 3px 9px; border-radius: 12px; background: #efecf7; color: #4a3a78; font-size: 12px; font-weight: 600; cursor: pointer; }
.view-booking-part-chip:hover { background: #e2dcf2; }
.view-booking-part-add { display: flex; gap: 6px; margin-top: 8px; }
.view-booking-part-add input { flex: 1; min-width: 0; margin: 0; padding: 6px 8px; font-size: 13px; }
.view-booking-part-add button { margin: 0; white-space: nowrap; }
.view-booking-part-msg { margin-top: 6px; font-size: 12px; color: #2e7d32; }
.view-booking-part-msg.view-booking-part-err { color: #c62828; }
@media (max-width: 500px) { .view-booking-part-add { flex-wrap: wrap; } .view-booking-part-add input { flex-basis: 100%; } }
.view-booking-allows { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; }
.view-booking-allow { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: #444; cursor: pointer; }
.view-booking-allow input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* kiosk: open practice self check-in */
.kiosk-practice { text-align: left; }
.kiosk-practice .event-checkin { margin-top: 0; cursor: pointer; }
.kiosk-practice-standing { float: right; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; line-height: 20px; padding: 0 10px; border-radius: 10px; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; }
.kiosk-practice-standing:hover { background: rgba(255,255,255,.32); }
.kiosk-practice-standing.none { background: #fbf3d5; color: #8a6d1d; }
.kiosk-practice-row { cursor: default; }
.kiosk-practice-btn { margin: 0; }
.kiosk-practice-btn img { height: 18px; }
.kiosk-practice-off { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #999; padding: 0 8px; }
.kiosk-practice-none { padding: 22px 14px; text-align: center; color: #999; font-size: 13px; }
.kiosk-practice .event-checkin { margin-bottom: 0; }
.practice-passes-pop button.practice-pass-price img { height: 14px; vertical-align: middle; margin: -2px 4px 0 0; }
.kiosk-practice-later { padding: 5px 10px 0px; background: #f4f4f4; }
.kiosk-practice-room { margin-bottom: 10px; background: none; border-radius: 0; box-shadow: none; overflow: visible; }
.kiosk-practice-room .practice-room-head { padding: 10px 12px; }
.kiosk-practice-room .practice-blocks { padding: 0; }
/* kiosk: More times -> the Open Practice screen in a popup */
.kiosk-practice-room .practice-room-head { position: relative; }
.kiosk-practice-more { margin: 0 0 0 auto; padding: 6px 12px; flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.15; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
.kiosk-practice-more img { height: 18px; width: 18px; }
.kiosk-practice-pop { max-width: 800px; width: calc(100% - 40px); margin-top: 130px; padding: 0; text-align: left; max-height: calc(100vh - 170px); overflow-y: auto; }
.kiosk-practice-pop .practice-page { max-width: none; padding: 10px 16px 20px; }
.practice-embedded .practice-head { padding-right: 34px; }
.practice-close { position: absolute; top: 10px; right: 14px; font-size: 26px; line-height: 1; color: #999; cursor: pointer; }
.practice-embedded { position: relative; }
.kiosk-practice-done { display: inline-block; }
.kiosk-practice-done .kiosk-practice-btn:disabled { opacity: 1; cursor: default; }
.kiosk-practice-left { display: flex; align-items: center; gap: 12px; }
.kiosk-practice-left .room-book-thumb { width: 56px; height: 42px; }
.kiosk-practice-info { cursor: pointer; }
.practice-room-pop-pic { cursor: pointer; }
.practice-room-thumb-click { cursor: pointer; }
.practice-room-thumb-click:hover { filter: brightness(.93); }
.kiosk-practice-later-row { flex-wrap: wrap; border-bottom: none; }
.kiosk-practice-later-row .room-book-info { flex: 0 1 auto; min-width: 90px; }
.kiosk-practice-blocks { flex: 1; display: flex; justify-content: flex-end; gap: 6px; padding: 0 4px; }
.kiosk-practice-blocks .practice-block { width: 88px; padding: 6px 6px 5px; }
.kiosk-practice-blocks .practice-block-time { font-size: 13px; }
.kiosk-practice-blocks .practice-block-sub { font-size: 10px; }
@media (max-width: 600px) { .kiosk-practice-blocks { flex: 1 1 100%; justify-content: flex-start; order: 5; } }
.practice-room-pop-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 0 12px; font-size: 13px; color: #555; }
.practice-room-pop-fact { display: inline-flex; align-items: center; gap: 6px; }
.practice-room-pop-fact img { height: 14px; opacity: .55; }
.practice-room-pop-btn { margin: 14px 0 0; }
.practice-room-pop-btn img { height: 16px; vertical-align: middle; }
.practice-loading { position: relative; min-height: 140px; }
.practice-loading .vue-load { background-color: transparent; }
.event-item-text-room { height: 12px; opacity: .6; vertical-align: -1px; }
/* Edit Event: the Draft / Live switch leads the Cancel / Save row */
.event-editor-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.event-editor-actions .event-editor-switch { flex: none; margin-right: auto; }
.event-editor-actions .btn-long { width: auto; flex: 1 1 110px; margin: 0; }
/* Draft setup checklist in the status bar: required items (!) gate going live, recommended (○) only suggest */
.event-setup { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; text-transform: none; letter-spacing: 0; }
.event-setup-item { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 12px; background: rgba(255,255,255,.75); border: 1px solid rgba(168,106,0,.4); color: #a86a00; font-size: 11px; font-weight: 700; cursor: pointer; }
.event-setup-item:hover { background: #fff; }
.event-setup-item.event-setup-optional { border-style: dashed; font-weight: 600; }
.event-setup-item.event-setup-done { background: #e6f4ea; border: 1px solid #bcdcc5; color: #21702f; }
.event-setup-mark { font-weight: 800; }
.event-setup-pulse { animation: evSetupPulse 1.6s ease-out; border-radius: 10px; }
.event-title-grow.event-setup-pulse, .event-title-clickable.event-setup-pulse { border-radius: 6px; }
@keyframes evSetupPulse { 0% { box-shadow: 0 0 0 0 rgba(230,149,0,.7); } 70% { box-shadow: 0 0 0 14px rgba(230,149,0,0); } 100% { box-shadow: 0 0 0 0 rgba(230,149,0,0); } }
/* Empty poster: managers get an Add a picture spot */
.event-hero-add { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 22px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .03em; cursor: pointer; white-space: nowrap; }
.event-hero-add:hover { background: rgba(0,0,0,.7); }
.event-hero-add img { width: 18px; height: 18px; }
.event-hero-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 26px; border-radius: 12px; color: #6b6b73; font-size: 15px; font-weight: 700; letter-spacing: .03em; cursor: pointer; transition: background .12s ease, color .12s ease; }
.event-hero-upload:hover { background: rgba(0,0,0,.06); color: #45454c; }
.event-hero-upload img { width: 46px; height: 46px; filter: brightness(0); opacity: .45; }
.event-hero-upload:hover img { opacity: .6; }

/* Edit Purchase: Referred by (a field saved with the rest) */
.purchase-ref-cell { text-align: center; position: relative; }
.purchase-ref-name { display: inline-block; font-size: 14px; color: #333; padding: 6px 0; }
a.purchase-ref-name-link { color: #6a4c9c; font-weight: 600; text-decoration: underline dotted; cursor: pointer; }
.purchase-ref-search { position: relative; }
.purchase-ref-search input { width: 100%; box-sizing: border-box; margin: 0; }
.purchase-ref-search .door-buyer-list { text-align: left; min-width: 220px; right: 0; left: auto; }

/* Package Advanced Options: a setting with a dropdown under its label */
.package-option-item.package-option-select { flex-wrap: wrap; }
.package-option-item.package-option-select select { flex: 1 1 100%; width: 100%; margin: 8px 0 0; }

/* Offer page: Share with Friends in a box the same size as the Offer Summary above it
   (box + box-responsive); the lavender look moves to the box, its border drawn inside */
/* Summary + Share: one inline column (Sign In / Register sit beside it on desktop); inside it the share box drops under the summary */
.offer-summary-col { display: inline-block; vertical-align: top; }
.offer-summary-col > .box.box-responsive { margin-bottom: 20px; }
.box.offer-share-box { display: block; margin: 0 auto 10px; background: #f4f2f9; box-shadow: inset 0 0 0 1px #ddd6ec; border-radius: 8px; text-align: center; }
.offer-share-box .event-share { margin: 0; padding: 0; background: none; border: 0; }

/* Ticket page: the QR opens as large as fits, under the fixed nav + page bars (z 80 / 71) */
.ticket-card-qr-zoom { cursor: zoom-in; }
/* Dark backdrop; the code keeps its own white square and quiet zone (what scanners need) */
.ticket-qr-lightbox { position: fixed; left: 0; right: 0; bottom: 0; top: 98px; z-index: 70; background: rgba(17,17,19,.96); flex-direction: column; align-items: center; justify-content: center; gap: 12px; cursor: zoom-out; }
.ticket-qr-big { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #111113; border-radius: 14px; }
.ticket-qr-lightbox-hint { font-size: 15px; color: #d6d6d6; letter-spacing: .04em; }

/* Analytics → Events charts: KPI strip, Sales pace, Where tickets come from, Turnout.
   Chart chrome: hairline grid #e1e0d9, baseline #c3c2b7, muted labels #898781, ink #0b0b0b / #52514e */
.evc { padding: 6px 16px 18px; text-align: left; }
/* width: 100% outright: on phones something in the page shrinks these grids to their content */
.evc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; width: 100%; box-sizing: border-box; }
.evc-kpi { background: #fff; border-radius: 10px; padding: 12px 14px; box-shadow: 0 0 0 1px rgba(11,11,11,.08); }
.evc-kpi-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #52514e; }
.evc-kpi-value { font-size: 26px; font-weight: 700; color: #0b0b0b; line-height: 1.2; margin-top: 4px; }
.evc-kpi-sub { font-size: 11px; color: #898781; margin-top: 2px; }
.evc-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 12px; width: 100%; box-sizing: border-box; }
.evc-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.evc-card { background: #fff; border-radius: 10px; padding: 14px 16px; box-shadow: 0 0 0 1px rgba(11,11,11,.08); min-width: 0; }
.evc-title { font-size: 14px; font-weight: 700; color: #0b0b0b; }
.evc-sub { font-size: 12px; color: #52514e; margin-top: 2px; }
.evc-empty { font-size: 13px; color: #898781; padding: 18px 0 6px; }
.evc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 8px; }
.evc-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #0b0b0b; cursor: default; }
.evc-legend-sub { color: #898781; }
.evc-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.evc-plot { position: relative; height: 240px; margin: 4px 0 18px 0; }
.evc-svg { display: block; width: 100%; height: 100%; overflow: visible; cursor: crosshair; }
.evc-grid-line { stroke: #e1e0d9; stroke-width: 1; vector-effect: non-scaling-stroke; }
.evc-axis-line { stroke: #c3c2b7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.evc-cross { stroke: #898781; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.evc-dim { opacity: .2; }
.evc-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
.evc-ylabel { position: absolute; left: 0; transform: translateY(-50%); font-size: 11px; color: #898781; font-variant-numeric: tabular-nums; pointer-events: none; }
.evc-xlabel { position: absolute; bottom: -18px; transform: translateX(-50%); font-size: 11px; color: #898781; white-space: nowrap; pointer-events: none; }
.evc-tip { position: absolute; top: 0; transform: translateX(8px); background: #fff; border-radius: 8px; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0,0,0,.14), 0 0 0 1px rgba(11,11,11,.06); font-size: 12px; color: #0b0b0b; min-width: 150px; pointer-events: none; z-index: 2; }
.evc-tip-left { transform: translateX(calc(-100% - 8px)); }
.evc-tip-head { font-weight: 700; margin-bottom: 4px; }
.evc-tip-row { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.evc-tip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #52514e; }
.evc-tip-row b { font-variant-numeric: tabular-nums; }
.evc-bar-row { position: relative; display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 44px; align-items: center; gap: 10px; padding: 6px 0; cursor: default; }
.evc-bar-label { font-size: 13px; color: #0b0b0b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evc-bar-when { color: #898781; margin-left: 6px; font-size: 12px; }
.evc-bar-track { height: 10px; border-radius: 5px; background: #eeede8; overflow: hidden; }
.evc-bar-fill { height: 100%; border-radius: 5px; background: #2a78d6; min-width: 4px; }
.evc-bar-value { font-size: 13px; font-weight: 700; color: #0b0b0b; text-align: right; font-variant-numeric: tabular-nums; }
.evc-bar-row:hover .evc-bar-fill { background: #1c5cab; }
.evc-bar-tip { position: absolute; right: 0; top: -22px; background: #0b0b0b; color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; z-index: 2; }
/* Revenue columns (By event / By month) */
.evc-cols-card { margin: 0 0 12px; }
.evc-cols-scroll { overflow-x: auto; margin: 6px -4px 0; padding: 0 4px; }
.evc-cols-plot { position: relative; height: 220px; margin-bottom: 44px; }
.evc-cols-svg { cursor: default; }
.evc-col-value { position: absolute; transform: translate(-50%, -100%); margin-top: -3px; font-size: 11px; font-weight: 700; color: #52514e; white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.evc-col-label { position: absolute; top: 100%; transform: translateX(-50%); margin-top: 6px; font-size: 11px; line-height: 1.25; color: #52514e; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.evc-col-sub { display: block; color: #898781; }
@media (max-width: 800px) {
	.evc-grid { grid-template-columns: minmax(0, 1fr); }
	.evc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.evc-xlabel-minor { display: none; }
}

/* Analytics → Events: Charts / Rows view icons, before the By event / By month pills */
.evrep-view { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: 13px; color: #898781; cursor: pointer; margin-right: 2px; }
.evrep-view:hover { color: #52514e; background: #eeede8; }
.evrep-view.on { color: #fff; background: var(--evrep-brand, #5b5b5b); }
.evrep-mode { align-items: center; }
.evrep-view svg { display: block; }
.evrep-view + .evrep-pill { margin-left: 8px; }

/* Event page promoters: title with an Analytics button on the right */
.event-promoters-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.event-promoters-head .event-embed-title { margin: 0; }
.event-promoters-analytics { margin: 0; padding: 6px 12px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }

/* Ticket page: "Sign in to see your tickets" opens the sign-in box in a popup */
.ticket-signin-link { font-weight: 600; text-decoration: none; cursor: pointer; }
.ticket-signin-link:hover { text-decoration: underline; }
.ticket-signin-pop { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.55); align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.ticket-signin-box { position: relative; max-height: 100%; overflow-y: auto; }
.ticket-signin-box #signin { display: block !important; margin: 0; }
.ticket-signin-box #signin .title .close { cursor: pointer; }

/* A ticket with a balance: tinted red so it's obvious it needs paying first */
/* (the outline is inset: notched cards are masked, which would cut an outer one) */
.ticket-card.ticket-card-balance { background: #fdeceb; box-shadow: inset 0 0 0 1px #f3c4c2; }
/* Ticket page: the same half-circle notch in the bottom edge as the event page's ticket cards;
   the shadow moves to the wrap (drop-shadow) so it follows the notch */
.ticket-card-wrap { display: inline-block; width: calc(100% - 20px); max-width: 360px; filter: drop-shadow(0 0 1px rgba(0,0,0,0.22)) drop-shadow(0 2px 2px rgba(0,0,0,0.12)); }
.ticket-card.ticket-card-notched { width: 100%; box-shadow: none; padding-bottom: 30px; -webkit-mask: radial-gradient(circle at 50% 100%, transparent 13px, #000 14px); mask: radial-gradient(circle at 50% 100%, transparent 13px, #000 14px); }
.ticket-card.ticket-card-notched.ticket-card-balance { box-shadow: inset 0 0 0 1px #f3c4c2; }

/* Select a Pass: capped to the window under the top bars; the title stays put, the body scrolls */
.box.pass-pop { display: inline-flex; flex-direction: column; overflow: hidden; vertical-align: top; } /* inline-flex: centered in the fade like the other choosers */
.pass-pop > .title { flex: none; }
.pass-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* ...and Check In sits in a footer under the scroll */
.pass-pop > .pass-pop-foot { flex: none; padding-top: 10px; }
.pass-pop-foot .pass-pop-submit { margin: 0; width: 100%; }
/* ...and the event's name bar sits between the title and the scroll */
.pass-pop > .pass-pop-event { flex: none; margin-bottom: 0px; }

/* Roster: the RSVP count opens the RSVP pass popup to add another (studios allowing more than one) */
.double .rsvp.rsvp-again { display: block; cursor: pointer; }  /* hint.css makes [data-hint] inline-block, which pulled it beside the buttons */
.double .rsvp.rsvp-again:hover { filter: brightness(1.12); text-decoration: underline; }

/* Pricing editor - Inventory panel (option groups + stock) */
.inv-panel { background: #fff; border: 1px solid #e3e1ea; border-radius: 10px; padding: 14px 16px 16px; margin-top: 8px; text-align: left; }
.inv-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
/* A product's unit cost and low-stock alert level, above its options */
.inv-costs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #eee; }
.inv-costs-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inv-costs-field .inv-desc { font-size: 11px; line-height: 1.35; }
.inv-costs-input { display: flex; align-items: center; gap: 4px; margin-top: 4px; }
.inv-costs-input input { width: 100%; max-width: 120px; margin: 0; }
@media (max-width: 500px) { .inv-costs { grid-template-columns: 1fr; } }
.inv-head-stock { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eeecf3; }
.inv-title { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #5d45a2; }
.inv-desc { font-size: 12px; color: #999; }
.inv-group { background: #f7f6fa; border: 1px solid #eeecf3; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.inv-group-top { display: flex; align-items: center; gap: 8px; }
.inv-group-top .inv-group-name { margin: 0; flex: 1; min-width: 0; font-weight: 600; }
.inv-x { flex: 0 0 auto; width: 28px; height: 28px; line-height: 26px; text-align: center; border-radius: 50%; font-size: 20px; color: #b5b2bf; cursor: pointer; }
.inv-x:hover { background: #fbe9e9; color: #d9534f; }
.inv-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.inv-tag { display: inline-flex; align-items: center; gap: 6px; background: #efecf7; color: #5d45a2; border-radius: 14px; padding: 4px 6px 4px 12px; font-size: 13px; font-weight: 600; line-height: 18px; }
.inv-tag-x { display: inline-block; width: 18px; height: 18px; line-height: 17px; text-align: center; border-radius: 50%; cursor: pointer; font-size: 14px; color: #8b7cc0; }
.inv-tag-x:hover { background: #5d45a2; color: #fff; }
.inv-tag-add { display: inline-flex; align-items: center; background: #fff; border: 1px dashed #c9c3dc; border-radius: 14px; padding: 0 3px 0 10px; }
.inv-tag-add input { margin: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; padding: 5px 0 !important; width: 110px; font-size: 13px; height: auto !important; }
.inv-tag-btn { margin: 0; width: 22px; height: 22px; line-height: 20px; padding: 0; border: none; border-radius: 50%; background: #5d45a2; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.inv-tag-btn:disabled { background: #d9d5e6; cursor: default; }
.inv-add-group { display: block; width: 100%; margin: 4px 0 0; padding: 9px; background: transparent; border: 1px dashed #c9c3dc; border-radius: 8px; color: #5d45a2; font-size: 13px; font-weight: 600; cursor: pointer; }
.inv-add-group:hover { background: #f7f6fa; border-color: #5d45a2; }
.inv-stock-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.inv-stock-add select { margin: 0; flex: 1 1 140px; min-width: 0; }
.inv-qty { margin: 0 !important; width: 80px !important; flex: 0 0 auto; text-align: center; }
.inv-stock-btn { margin: 0 !important; flex: 0 0 auto; white-space: nowrap; }
.inv-stock-list { margin-top: 10px; border: 1px solid #eeecf3; border-radius: 8px; overflow: hidden; }
.inv-stock-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; }
.inv-stock-row + .inv-stock-row { border-top: 1px solid #eeecf3; }
.inv-stock-row:nth-child(even) { background: #faf9fc; }
.inv-stock-name { flex: 1; min-width: 0; color: #555; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-empty { margin-top: 10px; padding: 10px; text-align: center; font-size: 12px; color: #999; background: #faf9fc; border-radius: 8px; }

/* Calendar on phones: the staff tab strip stays hidden, but a staff member who
   takes private bookings keeps the studio tab and their own, right-aligned like
   desktop. Their tab shows available days as green circles; tapping a day opens
   that day's availability editor, Weekly sets the pattern */
@media only screen and (max-width: 767px) {
	.cal-profiles.cal-profiles-mine { display: block; text-align: right; margin: 0px 16px -20px 0px; }
	.cal-profiles-mine .cal-profile:not(:first-child):not(.cal-profile-mine) { display: none; }
	.cal-profiles-mine .cal-profile { padding: 6px 14px 7px; }
}

/* Check-in popup: the class's location under its date (Multiple Locations) */

/* Member Analytics: Birthday filter (Today / This Month rows, then From / To month + day pickers) */
.birthday-filter div.dropdown-item-100 { padding: 10px 0px; font-size: 10px; cursor: pointer; }
.birthday-filter div.dropdown-item-100:hover { background-color: #dedede; color: #777; }
.birthday-filter div.dropdown-item-100.birthday-filter-on { background-color: #6a4b9e; color: #fff; }
.birthday-filter .label { margin-top: 8px; }
.birthday-filter-row { display: flex; align-items: center; gap: 6px; padding: 4px 6px; }
.birthday-filter-cap { flex: 0 0 38px; font-size: 10px; color: #888; text-transform: uppercase; }
.birthday-filter-row select { flex: 1 1 0; min-width: 0; margin: 0; }
.birthday-filter div.birthday-filter-clear { color: #a12727; margin-top: 4px; }

/* Member Analytics (and the Blasts audience screen): filter dropdown text in #333 instead of the #999
   it inherits from .box (and .dropdown-opt sets itself) */
.record-right .dropdown-menu,
.record-right .dropdown-menu .dropdown-opt { color: #333; }

/* Saved Audiences: badges after the Members action arrow (spans, not buttons, so no global button styles) */
.audience-badges { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; vertical-align: middle; margin: 0 8px 0 4px; }
.audience-badges .audience-badge { display: inline-flex; }  /* (hint.css makes [data-hint] inline-block) */
.audience-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 14px; border: 1.5px solid #6a4b9e; color: #6a4b9e; background: #fff; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 16px; cursor: pointer; white-space: nowrap; }
.audience-badge:hover { background: #f1ecf8; }
.audience-badge.audience-badge-on { background: #6a4b9e; color: #fff; }
/* The app's edit icon (like Schedule's term pills): slides in on hover, white on the filled badge */
.audience-badge-edit { display: inline-block; height: 12px; width: 0; margin-left: 0; opacity: 0; cursor: pointer; transition: width .12s ease, opacity .12s ease, margin .12s ease; }
.audience-badge:hover .audience-badge-edit { width: 12px; margin-left: 2px; opacity: .5; }
.audience-badge .audience-badge-edit:hover { opacity: 1; }
.audience-badge-on .audience-badge-edit { filter: invert(1); }
@media (hover: none) { .audience-badge-edit { width: 12px; margin-left: 2px; opacity: .5; } }
/* Actions menu: Save Audience keeps its full-width row (hint.css makes [data-hint] inline-block), and
   overflow stays visible so the menu labels' overflow:hidden does not clip its hint */
.dropdown-menu li > label.audience-save-item { display: block; overflow: visible; }
/* Edit Audience popup */
.audience-pop { max-width: 420px; text-align: left; }
/* Taller than most screens: sit in the page flow so the faded backdrop scrolls instead of the centered popup losing its top */
.chooser-fade > .audience-pop { position: relative; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; transform: none; margin: 120px auto 40px; }
.audience-pop-label { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #777; margin: 12px 0 4px; }
.audience-pop-row { display: flex; gap: 8px; align-items: center; }
.audience-pop-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.audience-pop-row .btn-small { margin: 0; }
.audience-pop-summary { display: flex; flex-wrap: wrap; gap: 5px; }
.audience-filter-badge { display: inline-block; padding: 3px 9px; border-radius: 12px; background: #ece8f5; color: #5d45a2; font-size: 12px; font-weight: 600; line-height: 16px; }
.audience-pop-summary-now { margin-bottom: 8px; }
.audience-pop-summary-now .audience-filter-badge { background: #fff; box-shadow: inset 0 0 0 1px #d6cdea; }
.audience-pop-current { margin-top: 10px; padding: 10px; border-radius: 8px; background: #f6f3fb; }
.audience-pop-hint { font-size: 12px; color: #555; margin-bottom: 8px; }
.audience-pop-current .btn-long { margin: 0; }
.audience-pop .title .audience-pop-del { float: right; margin: -3px 4px 0 0; }
/* Edit Audience: Email Report */
.audience-report { padding: 10px; border-radius: 8px; background: #f7f7f7; }
/* EMAIL REPORT label with its on / off switch at the right */
.audience-report-head { display: flex; align-items: center; justify-content: space-between; }
.audience-report-head label { margin: 0; }
.audience-report-head .audience-report-me { margin: 0 10px 0 auto; text-transform: none; letter-spacing: normal; }
.audience-report-save { gap: 8px; }
.audience-report-save .btn-small { margin: 0; }
.audience-report-save .audience-pop-hint { flex: 1; }
.audience-report-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audience-report-row select { flex: 1 1 0; min-width: 0; margin: 0; }
/* Off / Daily / Monthly, day and hour share one row */
.audience-report-row:first-child { flex-wrap: nowrap; }
.audience-report-sub { font-size: 12px; color: #555; margin: 10px 0 4px; }
.audience-report-person { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #333; padding: 4px 0; }
.audience-report-person input { margin: 0; }
.audience-report-pic { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; background: #ddd center / cover no-repeat; }
.audience-report-person .audience-report-who { flex: 1; min-width: 0; }
.audience-report-x { margin-left: auto; color: #aaa; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.audience-report-x:hover { color: #c0392b; }
.audience-report-to { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.audience-report-add { position: relative; flex: 1; max-width: 230px; }
.audience-report-add input { width: 100%; box-sizing: border-box; margin: 0; padding: 5px 8px; font-size: 13px; }
.audience-report-suggest { position: absolute; right: 0; top: calc(100% + 2px); width: 300px; z-index: 20; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; text-transform: none; letter-spacing: normal; font-weight: normal; }
.audience-report-suggest-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; }
.audience-report-suggest-row.hl { background: #ece8f7; }
.audience-report-role { font-size: 12px; color: #888; margin-left: 4px; }
.audience-report-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; line-height: 17px; }
.audience-report-email { font-size: 12px; color: #888; overflow-wrap: anywhere; }
.audience-report-noemail { color: #b5473f; font-style: italic; }
.audience-report-skip { margin-top: 8px; }
.audience-report-save { justify-content: space-between; margin-top: 10px; }
.audience-report-save .btn-small { margin: 0 0 0 auto; }
.audience-report-save .audience-pop-hint { margin: 0; }
/* Send Blast: Repeat (Once / Daily / Monthly to a saved audience) */
.send-text > span.send-repeat { display: flex; flex: 1; gap: 6px; color: #111; min-width: 0; }
.send-repeat select { flex: 1 1 0; min-width: 0; margin: 0; height: auto; padding: 8px 8px; line-height: 18px; font-size: 14px; }
/* Send Blast When: date / time field matches the Repeat dropdowns */
input#vdp-send-schedule { font-size: 14px; }
.send-repeat-note { font-size: 12px; color: #5d45a2; margin: -6px 0 10px 70px; }
.send-repeat-warn { color: #b5473f; }
.send-audience { margin-right: 4px; }
/* Recurring blasts list (Blasts calendar + Edit Audience) */
.recurring-box { margin-top: 15px; }
.recurring-box .recurring-blasts { padding: 0 16px 8px; }
.recurring-empty { font-size: 12px; color: #888; padding: 6px 0; }
.recurring-item { padding: 8px 0; border-bottom: 1px solid #eee; }
.recurring-item:last-child { border-bottom: none; }
.recurring-main { display: flex; align-items: center; gap: 10px; }
.recurring-icons { display: flex; gap: 4px; flex-shrink: 0; }
.recurring-icons img { height: 18px; }
.recurring-info { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; text-align: left; }
.recurring-brief { font-size: 14px; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurring-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: #555; }
.recurring-next { display: flex; align-items: center; font-size: 12px; color: #888; }
.recurring-paused .recurring-brief, .recurring-paused .recurring-icons { opacity: .5; }
.recurring-paused .recurring-next { color: #b5473f; }
.recurring-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.recurring-actions .btn-small { margin: 0; }
.recurring-switch { display: inline-flex; }
.recurring-switch label { margin: 0; }
.recurring-edit { margin-top: 8px; flex-wrap: nowrap; }
.recurring-edit .btn-small { margin: 0; flex-shrink: 0; }
@media (max-width: 600px) {
	.recurring-main { flex-wrap: wrap; }
	.recurring-actions { width: 100%; justify-content: flex-end; }
}
.blast-recur-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ece8f5; color: #5d45a2; font-size: 12px; font-weight: 700; cursor: pointer; }
.blast-recur-marker span { font-size: 10px; margin-left: 1px; }
/* Recurring blast: pencil opens the schedule editor (Delete / Cancel / Save inside it) */
.recurring-next .recurring-edit-icon { display: inline-block; height: 14px; width: auto; margin: 0 0 0 6px; cursor: pointer; opacity: .6; }
.recurring-next .recurring-edit-icon:hover, .recurring-next .recurring-edit-on { opacity: 1; }
.recurring-edit-btns { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.recurring-edit-btns .btn-small { margin: 0; }
.recurring-edit-gap { flex: 1; }
.recurring-open { cursor: pointer; }
.recurring-open:hover .recurring-brief { color: #5d45a2; text-decoration: underline; }
.recurring-info.hint--top { display: flex; }
/* Members list: dashed Save Audience / Update Audience next to Clear Filters */
.record-right .audience-dash { display: inline-flex; align-items: center; height: 30px; margin: 0 6px 0 0; padding: 0 10px; border: 1.5px dashed #6a4b9e; border-radius: 15px; background: transparent; color: #6a4b9e; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; vertical-align: middle; box-sizing: border-box; }
.record-right .audience-dash:hover { background: #f1ecf8; }
.recurring-audience { cursor: pointer; }
.recurring-audience:hover { background: #ddd3ef; }
.recurring-sub .recurring-audience.hint--top { display: inline-block; }
.recurring-next .recurring-edit-hint { display: inline-flex; align-items: center; cursor: pointer; }
/* Over the pencil or the audience, only their own hint shows (not the row's Open in Blast Design) */
.recurring-info:has(.recurring-edit-hint:hover, .recurring-audience:hover)::before,
.recurring-info:has(.recurring-edit-hint:hover, .recurring-audience:hover)::after { display: none; }
/* Instructor Analytics: Export caret beside the filters + its popup */
.record-title .instructor-actions { margin-left: 8px; }
.instructor-export-pop { max-width: 360px; text-align: left; }
.instructor-export-range { font-size: 12px; color: #777; margin: 0 0 8px; }
.instructor-export-pop .setting-opt { margin-bottom: 6px; }
.instructor-export-hint { font-size: 12px; color: #555; margin: 10px 0 12px; }
.instructor-export-pop .btn-long[disabled] { opacity: .5; cursor: default; }
.instructor-export-count { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #e6e3ef; color: #4b3d7a; font-size: 11px; font-weight: 600; line-height: 16px; font-variant-numeric: tabular-nums; }
.class-passes-pop { max-width: 400px; text-align: left; }
.class-passes-prompt { font-size: 13px; color: #555; margin: 0 0 10px; }
.class-passes-same { width: 100%; margin: 0 0 10px; }
.class-passes-list { max-height: 50vh; overflow-y: auto; margin: 0 0 12px; }
.class-passes-pop .setting-opt { margin-bottom: 6px; }
.class-passes-archived { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; background: #eee; color: #888; font-size: 11px; line-height: 16px; }
.class-passes-pop .btn-long[disabled] { opacity: .5; cursor: default; }
.class-passes-skip { text-align: center; margin: 10px 0 2px; font-size: 13px; color: #777; cursor: pointer; }
/* Update Calendar list (schedule.js PopClassCalendar): a row per changed date, X on the right */
.class-cal-pop { max-width: 440px; text-align: left; }
.class-cal-list { max-height: 50vh; overflow-y: auto; margin: 0 0 12px; border-top: 1px solid #eee; }
.class-cal-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #eee; font-size: 13px; }
.class-cal-when { flex: 1; min-width: 0; color: #333; font-weight: 600; font-variant-numeric: tabular-nums; }
.class-cal-what { flex: none; font-size: 12px; font-weight: 700; color: #4b3d7a; }
.class-cal-move { color: #1d6fb8; }
.class-cal-remove { color: #c0392b; }
.class-cal-kept { color: #999; font-weight: 600; }
.class-cal-x { flex: none; display: inline-flex !important; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; color: #999; font-size: 18px; line-height: 1; cursor: pointer; }
a.class-cal-x:hover { background: #f3f1f8; color: #c0392b; }
.class-cal-off .class-cal-when, .class-cal-off .class-cal-what { color: #bbb; text-decoration: line-through; }
.class-cal-off a.class-cal-x { color: #4b3d7a; }
.class-cal-pop .btn-long[disabled] { opacity: .5; cursor: default; }
.pass-pop-user .purchase-user { margin: 0 0 12px; }
.pass-pop-user .purchase-user-pic { width: 90px; height: 90px; border: 5px solid #fff; }
.pass-pop-user .purchase-user-name { font-size: 18px; margin-top: 4px; }
/* Select a Pass: a pass already checked in to this event, greyed, not selectable */
.pass-pop-checked-list { margin: 10px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.pass-pop-checked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: #f1f1f1; color: #888; text-align: left; }
.pass-pop-checked-main { flex: 1; min-width: 0; }
.pass-pop-checked-title { font-weight: 600; color: #777; }
.pass-pop-checked-when { flex: none; text-align: right; }
.pass-pop-checked-marks img { width: 16px; height: 16px; opacity: .35; margin-left: 2px; }
.pass-pop-checked-date { margin-top: 4px; font-size: 12px; font-weight: 700; color: #e69500; white-space: nowrap; }
/* Text that can be click-dragged to copy (everything else is user-select: none) */
.text-select { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; cursor: text; }
.pass-pop-event-when { font-size: 12px; line-height: 16px; letter-spacing: .02em; text-transform: none; opacity: .9; padding-bottom: 4px; }

/* Price editor: the price's Shop photos (PackagePhotos in pricing.js) */
.pkg-photos { margin: 12px 0 14px; }
.pkg-photos-label { font-size: 13px; font-weight: 700; color: #444; margin-bottom: 6px; }
.pkg-photos-label .setting-opt-details { font-weight: 400; margin-left: 4px; }
.pkg-photos-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pkg-photo { position: relative; width: 84px; height: 84px; border-radius: 8px; background: #eee center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pkg-photo-main { box-shadow: 0 0 0 2px #4a3a78; }
.pkg-photo-tag { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 8px; background: #4a3a78; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.pkg-photo-x, .pkg-photo-star { position: absolute; top: 3px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; line-height: 1; text-decoration: none; cursor: pointer; }
.pkg-photo-x { right: 3px; }
.pkg-photo-star { left: 3px; font-size: 12px; }
.pkg-photo-add { display: inline-flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin: 0; border-radius: 8px; border: 2px dashed #c9c3dc; color: #6d5bb0; font-size: 30px; font-weight: 300; cursor: pointer; overflow: hidden; }
.pkg-photo-add input { display: none; }
.pkg-photo-busy { opacity: .6; cursor: wait; }

/* Pay Invoice popup (vue/components/pay-invoice.js): who is being charged, and Pay Cart's fixed amount */
.pay-pop .pay-pop-who { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid #eee; text-align: left; }
.pay-pop .pay-pop-pic { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #e6e3ef url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23b8b2cc"><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4.4 3.6-7 8-7s8 2.6 8 7z"/></svg>') center / 70% no-repeat; }
.pay-pop .pay-pop-pic[style*="background-image"] { background-size: cover; }
.pay-pop .pay-pop-name { font-size: 18px; font-weight: 800; color: #222; line-height: 1.2; }
.pay-pop .pay-pop-name small { display: block; font-size: 12px; font-weight: 600; color: #888; }
.pay-pop .pay-pop-guest-fields { flex: 1; min-width: 0; }
.pay-pop .pay-pop-guest-row { display: flex; gap: 8px; }
.pay-pop .pay-pop-guest-fields input { width: 100%; min-width: 0; height: 34px; margin: 0 0 8px !important; padding: 6px 10px; box-sizing: border-box; vertical-align: top; }
.pay-pop .pay-pop-guest-fields input:last-child { margin-bottom: 0; }
.pay-pop .pay-pop-guest-fields input.error { border-color: #c0392b; }
.pay-pop .pay-pop-fixed { font-size: 40px; font-weight: 800; color: #222; text-align: center; margin: 2px 0 12px; }
.pay-pop .pay-pop-loading { text-align: center; color: #999; padding: 24px 0; }
.pay-pop .invoice-payment { margin: 0; box-shadow: none; padding: 0; }
.pay-pop .pay-pop-guest-badge { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; }
.pay-pop .pay-pop-guest-label { font-size: 12px; font-weight: 700; color: #777; }
/* The same 8px between the two rows of pay options on every page (the buttons' own margins differ by page) */
.pay-pop .invoice-pay-forms .invoice-pay-opt { margin: 0; }
.pay-pop .invoice-pay-forms.invoice-pay-forms-stacked { margin-bottom: 8px; }
/* The card's brand mark on the card-on-file option and the Pay button */
.pay-pop .pay-pop-brand { display: inline-flex; flex: none; vertical-align: middle; margin-right: 6px; line-height: 0; }
.pay-pop .pay-pop-brand svg { width: 37px !important; height: 24px !important; max-width: none; flex: none; }
.pay-pop .pay-pop-go { display: inline-flex; align-items: center; justify-content: center; }
/* Cash App / Affirm / Klarna inside the popup: its option above already says which, so the pay panel's own heading and tab go */
.pay-pop .invoice-payment .invoice-pay-header, .pay-pop .invoice-payment .invoice-pay-method-tabs { display: none !important; }
/* Pay Cart's total gets the same line under it as the account row above */
.pay-pop .pay-pop-fixed { margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #eee; }

/* Custom Screens: the box in Settings (screens.js) and a screen (studio-screen.php) */
.menu-item img.menu-screen-icon { width: 19px; height: 19px; opacity: 1; object-fit: contain; }
.screens-warn { margin: 0 20px 14px; padding: 10px 12px; border-radius: 6px; background: #fff7e6; color: #8a5a00; font-size: 13px; }
.screen-page .screens-warn { margin: 0; border-radius: 0; }
/* Menu icons are solid white (Images::iconWhite): shown on the menu's dark color */
.screens-icon { display: block; width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: #333; padding: 4px; box-sizing: border-box; }
.screens-icon-lg { width: 56px; height: 56px; border-radius: 12px; padding: 8px; }
.screens-icon-none { background: rgba(0,0,0,0.1); }
.box-outer > #custom-screens > .box { margin: 0; }
.screens-box { position: relative; }
.screens-delete { margin-right: auto; }
.screens-box .screens-warn { margin: 0 0 14px; }
.screens-none { padding: 6px 0 16px; color: #999; }
.screens-list { width: 100%; margin-bottom: 14px; }
.screens-list td { vertical-align: middle; }
/* Row: drag grip, icon, name over who sees it, then the address on the right */
.screens-grip { display: table-cell; width: 14px; padding-right: 0; color: #aaa; font-size: 15px; cursor: grab; user-select: none; }
.screens-grip:hover { color: #666; }
.screens-list .ui-sortable-helper { display: table; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.screens-icon-cell { width: 36px; }
.screens-url { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; color: #888; font-size: 12px; }
.screens-who { color: #aaa; font-size: 11px; }
.screens-form { max-width: 460px; }
.screens-form-lead { padding-bottom: 6px; }
.screens-form input[type=text], .screens-form select { width: 100%; box-sizing: border-box; }
.screens-hint { font-weight: 400; color: #999; font-size: 11px; text-transform: none; }
.screens-icon-row { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.screens-file { position: relative; overflow: hidden; cursor: pointer; margin: 0; }
.screens-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.screens-error { margin-top: 10px; color: #c0392b; font-size: 13px; }
.screens-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
/* The screen fills the page edge to edge, down to the bottom of the window (sized in studio-screen.php) */
.page.screen-page { margin-top: 0; padding: 0; }
.screen-frame { display: block; width: 100%; height: calc(100vh - 80px); min-height: 320px; border: 0; background: #fff; }

/* App Videos: the Videos page (vue/videos.js) */
.videos-box { position: relative; max-width: 860px; margin-left: auto; margin-right: auto; text-align: left; }
.videos-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 0 20px; }
.videos-head-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.videos-file { position: relative; overflow: hidden; cursor: pointer; margin: 0; }
.videos-file input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.videos-file.videos-off { opacity: .45; cursor: default; }
.videos-file.videos-off input[type=file] { cursor: default; }
.videos-lead { margin: 6px 20px 14px; font-size: 13px; color: #777; }
.videos-warn { margin: 0 20px 14px; padding: 10px 12px; border-radius: 6px; background: #fff7e6; color: #8a5a00; font-size: 13px; }
.videos-usage { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 20px 14px; padding: 10px 14px; border-radius: 8px; background: rgba(0,0,0,0.04); font-size: 13px; color: #777; }
.videos-usage-num { font-weight: 700; color: #333; font-variant-numeric: tabular-nums; }
.videos-none { padding: 24px 20px; color: #999; text-align: center; }
.videos-list { width: 100%; }
.videos-list td { vertical-align: middle; }
.videos-grip { width: 14px; padding-right: 0; color: #aaa; font-size: 15px; cursor: grab; user-select: none; }
.videos-grip:hover { color: #666; }
.videos-list .ui-sortable-helper { display: table; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.18); }
.videos-thumb-cell { width: 112px; }
.videos-thumb { position: relative; width: 104px; height: 58px; border-radius: 6px; background: #333 center / cover no-repeat; }
.videos-duration { position: absolute; right: 4px; bottom: 4px; padding: 0 4px; border-radius: 3px; background: rgba(0,0,0,0.75); color: #fff; font-size: 11px; font-variant-numeric: tabular-nums; }
.videos-main { min-width: 0; }
.videos-name { font-weight: 700; color: #333; }
.videos-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; font-size: 12px; color: #888; }
.videos-tag { padding: 0 6px; border-radius: 3px; font-size: 11px; font-weight: 700; }
.videos-tag-stream { background: #ece7f8; color: #5d45a2; }
.videos-tag-youtube { background: #fdeaea; color: #b3261e; }
.videos-tag-gif { background: #e6f1fb; color: #1f5f99; }
.videos-state { width: 120px; text-align: right; }
.videos-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eee; color: #777; white-space: nowrap; }
.videos-pill-on { background: #e4f3ea; color: #1e7a44; }
.videos-pill-busy { background: #fff3d6; color: #8a5a00; }
.videos-pill-bad { background: #fde8e8; color: #b3261e; }
.videos-form { max-width: 480px; text-align: left; }
/* Taller than most screens with the cover on top: sit in the page flow (as .audience-pop) so the backdrop scrolls instead of the top hiding under the nav */
.chooser-fade > .videos-form { position: relative; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; transform: none; margin: 120px auto 40px; }
.videos-form input[type=text], .videos-form textarea { width: 100%; box-sizing: border-box; }
.videos-hint { font-weight: 400; color: #999; font-size: 11px; text-transform: none; }
.videos-file-name { margin-bottom: 4px; font-size: 13px; color: #777; overflow-wrap: anywhere; }
.videos-plans { display: flex; flex-direction: column; gap: 4px; max-height: 150px; overflow-y: auto; padding: 4px 0; }
.videos-plan { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #555; cursor: pointer; }
.videos-error { margin-top: 10px; color: #c0392b; font-size: 13px; }
.videos-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.videos-actions button { margin: 0; }
.videos-actions-row { display: flex; gap: 8px; }
.videos-actions-row button { flex: 1; }
/* Edit Video's delete at the top: its unlock toggle and DEL, left of the close */
.videos-del { float: right; display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.videos-del button { margin: 0; }
.videos-public { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; vertical-align: middle; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.videos-public-on { color: #2e7d32; }
.videos-public-off { color: #888; }
.videos-player { max-width: 860px; width: calc(100% - 40px); }
.videos-frame { position: relative; padding-top: 56.25%; background: #000; border-radius: 6px; overflow: hidden; }
.videos-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videos-gif { text-align: center; background: #000; border-radius: 6px; overflow: hidden; }
.videos-gif img { display: block; width: 100%; max-height: 70vh; object-fit: contain; }
/* Add Video's type picker (spans, not buttons: no global button rules), and the type on edit */
.videos-types { display: flex; margin-bottom: 6px; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.videos-type { flex: 1; padding: 8px 4px; text-align: center; font-size: 13px; font-weight: 600; color: #555; cursor: pointer; user-select: none; }
.videos-type + .videos-type { border-left: 1px solid #ccc; }
.videos-type-on { background: #392B71; color: #fff; }
.videos-type-line { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: #777; }
.videos-warn-form { margin: 8px 0 0; }
.videos-form .videos-file { display: inline-block; margin-top: 8px; }
/* The cover / GIF picker: its picture, then the button */
.videos-pic { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 6px; }
.videos-pic .videos-file { margin-top: 0; }
.videos-pic-img { width: 104px; height: 58px; border-radius: 6px; background: #333 center / cover no-repeat; }
.videos-pic-gif { background-size: contain; }
/* The cover at the top of Add / Edit Video: the picture, or an upload area its size */
.videos-cover { position: relative; box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: center; margin: 0 0 12px; aspect-ratio: 16 / 9; max-height: 240px; border-radius: 8px; background: #333 center / cover no-repeat; cursor: pointer; overflow: hidden; }
.videos-cover input[type=file] { display: none; }
.videos-cover-empty { background: #f4f2f9; border: 2px dashed #b9b0d6; }
.videos-cover-empty:hover, .videos-cover-drag { border-color: #392B71; background-color: #ebe7f5; }
.videos-cover-text { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: #392B71; text-align: center; padding: 0 12px; }
.videos-cover-tools { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.videos-cover-tool { padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 700; }
.videos-cover-tool:hover { background: rgba(0, 0, 0, .8); }
/* The member Videos page (/<studio>/watch): Support's picture cards (.vid), by category */
.mvid { padding-bottom: 20px; }
.mvid .vid-search { margin-top: 10px; }
.mvid-cat { margin: 24px 0 -6px; font-size: 18px; font-weight: 700; letter-spacing: 1px; color: #555; text-transform: uppercase; }
.mvid-play { position: absolute; left: 50%; top: 42%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff; font-size: 20px; line-height: 54px; text-align: center; opacity: .85; transition: opacity .15s, background .15s; }
.vid:hover .mvid-play, .mvid-pic:hover .mvid-play { opacity: 1; background: rgba(0,0,0,0.8); }
.mvid-time { position: absolute; right: 10px; top: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,0.75); color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.mvid-detail { max-width: 640px; text-align: left; }
.mvid-pic { position: relative; padding-top: 56.25%; border-radius: 8px; background: #333 center / cover no-repeat; cursor: pointer; }
.mvid-play-big { top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; font-size: 28px; line-height: 72px; }
.mvid-player { z-index: 80; display: flex; align-items: center; justify-content: center; }
.mvid-player-frame { position: relative; width: min(1280px, 92vw, 140vh); aspect-ratio: 16 / 9; background: #000; }
.mvid-player-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mvid-player-gif { display: block; max-width: 92vw; max-height: 80vh; }
.mvid-player-box { position: relative; margin-top: 40px; }
.mvid-player-close { position: absolute; right: 0; bottom: 100%; padding: 0 4px; color: #fff; font-size: 36px; line-height: 40px; cursor: pointer; }
@media (max-width: 560px) {
	.videos-thumb-cell { width: 76px; }
	.videos-thumb { width: 70px; height: 40px; }
	.videos-state { width: auto; }
	.mvid .vid { width: calc(100% - 32px); max-width: 340px; margin: 14px 16px; }
}
/* App Connect checkout: the way back to the client app (Display::appReturnBar) */
.app-return { max-width: 480px; margin: 10px auto 0; padding: 0 16px; text-align: left; font-size: 14px; }
.app-return a { color: #555; font-weight: 600; text-decoration: none; }
.app-return-done { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 12px 16px; background: #eaf6ee; border-radius: 10px; color: #276749; }
.app-return-done a { color: #fff; }
/* MediaPicker: the image library as a popup (existing images, Upload, Create with AI), above the popup it opens from */
.chooser-fade.mp-fade { z-index: 70; }
.mp-box { max-width: 720px; width: calc(100% - 32px); text-align: left; max-height: calc(100vh - 140px); display: flex; flex-direction: column; box-sizing: border-box; }
/* Below the nav and page bar, not centered under them (as .videos-form) */
.chooser-fade > .mp-box { position: relative; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; transform: none; margin: 110px auto 30px; }
.mp-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 12px; margin-bottom: 8px; border: 2px dashed #c9c2dd; border-radius: 10px; background: #f8f7fb; color: #4a3a78; text-align: center; cursor: pointer; }
.mp-drop:hover, .mp-drop.mp-drag { background: #efecf7; border-color: #4a3a78; }
.mp-drop svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mp-drop strong { font-size: 14px; }
.mp-drop span { font-size: 12px; color: #888; }
.mp-drop input[type=file] { display: none; }
.mp-busy { opacity: .6; pointer-events: none; }
.mp-note { font-size: 12px; color: #888; margin-bottom: 10px; }
.mp-ai { margin-bottom: 10px; }
.mp-grid { flex: 1; min-height: 120px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; padding: 2px; }
.mp-cell { position: relative; display: block; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #f0eff5; cursor: pointer; outline: 2px solid transparent; outline-offset: -2px; }
.mp-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-cell.mp-on { outline-color: #5d45a2; }
.mp-check { position: absolute; top: 6px; right: 6px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: #5d45a2; color: #fff; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }
.mp-empty { padding: 30px 10px; text-align: center; color: #999; font-size: 13px; }
.mp-foot { display: flex; gap: 8px; margin-top: 12px; }
.mp-foot button { flex: 1; margin: 0; }
/* Cancel Class (events-today.js PopCancelClass): the canceled mark, and the popup */
.event-canceled-tag { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: #fdecec; color: #c62828; font-size: 11px; font-weight: 700; letter-spacing: .5px; line-height: 14px; vertical-align: middle; text-transform: uppercase; }
.event-canceled-big { margin: 0; padding: 6px 10px; font-size: 12px; }
.event-item-canceled .event-item-name { text-decoration: line-through; color: #999; }
.cal-item.cal-canceled { opacity: .55; text-decoration: line-through; }
.cc-box { max-width: 400px; text-align: left; }
.cc-box.cc-wide { max-width: 860px; }
.chooser-fade > .cc-box { position: relative; top: auto; left: auto; -webkit-transform: none; -moz-transform: none; transform: none; margin: 110px auto 30px; width: calc(100% - 32px); }
.cc-class { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cc-class strong { font-size: 16px; color: #333; }
.cc-class span { font-size: 13px; color: #777; }
.cc-loading { padding: 20px 0; text-align: center; color: #999; font-size: 13px; }
.cc-info p { margin: 0 0 8px; font-size: 14px; line-height: 1.4; color: #444; }
.cc-info p.cc-note { font-size: 12px; color: #888; }
.cc-names { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; max-height: 120px; overflow-y: auto; }
.cc-name { padding: 3px 8px; border-radius: 12px; background: #f1eff7; color: #4a3a78; font-size: 12px; }
.cc-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cc-buttons button { margin: 0; }
.cc-buttons button.cc-plain { background: #fff; color: #c62828; border: 1px solid #c62828; }
.cc-buttons-row { flex-direction: row; }
.cc-buttons-row button { flex: 1; }
.cc-delete { margin-top: 10px; text-align: center; font-size: 12px; }
.cc-delete a { color: #888; text-decoration: underline; cursor: pointer; }
.cc-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid #e3e0ec; }
.cc-tab { display: flex; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: -1px; border: 1px solid transparent; border-radius: 6px 6px 0 0; color: #666; font-size: 13px; cursor: pointer; }
.cc-tab input { margin: 0; }
.cc-tab.cc-tab-on { border-color: #e3e0ec; border-bottom-color: #fff; background: #fff; color: #4a3a78; font-weight: 600; }
.cc-tab.cc-tab-off { color: #aaa; }
.cc-tab-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: #eee; color: #666; font-size: 11px; line-height: 18px; text-align: center; box-sizing: border-box; }
.cc-edit { display: flex; gap: 14px; align-items: flex-start; }
.cc-editor, .cc-preview { flex: 1; min-width: 0; }
.cc-editor input[type=text], .cc-editor textarea { width: 100%; box-sizing: border-box; margin: 0 0 8px; }
.cc-editor textarea { resize: vertical; font-family: inherit; font-size: 14px; line-height: 1.4; }
.cc-unavailable { padding: 24px 10px; color: #999; font-size: 13px; text-align: center; }
.cc-count { margin: -4px 0 8px; text-align: right; font-size: 11px; color: #999; }
.cc-count.cc-count-long { color: #c62828; }
.cc-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.cc-vars-label { font-size: 12px; color: #888; }
.cc-var { display: inline-block; padding: 3px 7px; border-radius: 4px; background: #f1eff7; color: #4a3a78; font-family: monospace; font-size: 12px; cursor: pointer; }
.cc-var:hover { background: #e3def3; }
.cc-preview { padding: 10px; border-radius: 8px; background: #f4f3f8; }
.cc-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; color: #888; letter-spacing: .5px; }
.cc-preview-head select { width: auto; max-width: 60%; margin: 0; padding: 3px 6px; font-size: 12px; }
.cc-mail, .cc-msg { padding: 12px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.1); }
.cc-mail-subject, .cc-msg-subject { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid #eee; font-weight: 600; font-size: 13px; color: #333; }
.cc-mail { padding: 0; overflow: hidden; }
.cc-mail .cc-mail-subject { margin: 0; padding: 10px 12px; }
.cc-mail-wrap { height: 420px; overflow: hidden; background: #ddd; }
.cc-mail-frame { display: block; width: 620px; border: 0; background: #ddd; transform-origin: 0 0; }
.cc-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: 12px; color: #888; }
.cc-template { color: #5d45a2; text-decoration: underline; cursor: pointer; }
.cc-mail-body, .cc-msg-body, .cc-push-body { white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.45; color: #444; }
.cc-push { padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.cc-push-title { margin-bottom: 2px; font-weight: 700; font-size: 13px; color: #222; }
.cc-reach { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; font-size: 11px; }
.cc-reach span { padding: 2px 6px; border-radius: 4px; }
.cc-reach-yes { background: #e6f4e7; color: #2e7d32; }
.cc-reach-no { background: #eee; color: #999; text-decoration: line-through; }
@media (max-width: 700px) {
	.cc-edit { flex-direction: column; }
	.cc-editor, .cc-preview { width: 100%; }
	.cc-tab { padding: 8px 8px; }
}
/* Tasks: Calendar view (tasks.js TasksCalendar) */
.tcal { padding: 10px 10px 14px; }
.tcal-head { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 10px; }
.tcal-month { font-size: 16px; font-weight: 600; color: #555; min-width: 150px; text-align: center; }
.tcal-nav { font-size: 26px; line-height: 20px; color: #888; cursor: pointer; padding: 0 6px; user-select: none; }
.tcal-nav:hover { color: #444; }
.tcal-today { font-size: 12px; color: #5d45a2; text-decoration: underline; cursor: pointer; }
.tcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid #e2e2e2; border-left: 1px solid #e2e2e2; }
.tcal-wd { padding: 5px 0; text-align: center; font-size: 11px; font-weight: 700; color: #999; background: #f5f5f5; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; }
.tcal-day { min-height: 92px; padding: 3px; box-sizing: border-box; border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; background: #fff; cursor: pointer; overflow: hidden; }
.tcal-day:hover { background: #fafafa; }
.tcal-out { background: #f8f8f8; }
.tcal-out .tcal-num { color: #c4c4c4; }
.tcal-is-today { background: #fbf6e6; }
.tcal-sel { box-shadow: inset 0 0 0 2px #5d45a2; }
.tcal-num { font-size: 12px; color: #777; margin: 0 0 3px 2px; }
.tcal-task { margin: 0 0 2px; padding: 2px 5px; border-radius: 3px; color: #fff; font-size: 11px; line-height: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcal-task:hover { filter: brightness(0.92); }
.tcal-task-done { text-decoration: line-through; opacity: 0.85; }
.tcal-more { font-size: 11px; color: #888; padding-left: 3px; }
.tcal-dots { display: none; }
.tcal-list { margin-top: 12px; border: 1px solid #e2e2e2; border-radius: 4px; background: #fff; }
.tcal-list-title { padding: 8px 10px; font-size: 13px; font-weight: 600; color: #555; background: #f5f5f5; border-bottom: 1px solid #e2e2e2; }
.tcal-list-none { padding: 12px 10px; font-size: 13px; color: #999; }
.tcal-list-task { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: 14px; color: #444; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.tcal-list-task:last-child { border-bottom: 0; }
.tcal-list-task:hover { background: #fafafa; }
.tcal-list-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 5px; }
.tcal-undated { margin-top: 10px; font-size: 12px; color: #999; text-align: center; }
/* Phones: dots for the day's tasks, tap the day for the list */
@media (max-width: 700px) {
	.tcal { padding: 8px 4px 12px; }
	.tcal-day { min-height: 52px; }
	.tcal-task, .tcal-more { display: none; }
	.tcal-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding-left: 2px; }
	.tcal-dots span { width: 7px; height: 7px; border-radius: 4px; }
	.tcal-dots b { font-size: 9px; color: #888; font-weight: 600; }
}
/* Booking page: BOOK CALL on an owner's behalf (booking.js) */
.booking-behalf { margin: 6px 0 12px; padding: 8px 12px; border-radius: 8px; background: #efecf7; color: #4a3a78; font-size: 13px; font-weight: 600; text-align: center; }
/* Booking page: Participants (an owner's BOOK CALL, package Participants on), a row like Location and the date:
   the icon, the label, the people, then a subtle + Add participant */
.booking-parts { display: flex; align-items: flex-start; padding: 22px 14px; font-size: 14px; color: #333; text-align: left; }
.booking-parts-body { flex: 1; min-width: 0; padding-top: 2px; }
.booking-parts-title { font-size: 14px; color: #333; margin-bottom: 2px; }
.booking-you-tag { margin-left: auto; padding: 2px 8px; border-radius: 10px; background: #efecf7; color: #5d45a2; font-size: 11px; font-weight: 600; }
.booking-part { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; color: #333; }
.booking-part b { font-weight: 600; }
.booking-part small { flex: 1; min-width: 0; color: #776a99; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-part-x { margin-left: auto; color: #a89cc7; font-size: 18px; line-height: 14px; cursor: pointer; }
.booking-part-x:hover { color: #c62828; }
.booking-part-suggest { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 2px; }
.booking-part-chip { padding: 3px 9px; border-radius: 12px; background: #fff; color: #4a3a78; font-size: 12px; font-weight: 600; cursor: pointer; }
.booking-part-chip:hover { background: #e2dcf2; }
.booking-part-add { display: flex; gap: 6px; margin-top: 8px; }
.booking-part-add input { flex: 1; min-width: 0; margin: 0; padding: 6px 8px; font-size: 13px; border: 1px solid #d8d1ea; border-radius: 6px; }
.booking-part-btn { flex: 0 0 34px; margin: 0; padding: 0; border: 0; border-radius: 6px; background: #5d45a2; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; }
.booking-part-btn:disabled { opacity: .45; cursor: default; }
.booking-part-err { margin-top: 5px; font-size: 12px; color: #c62828; }
@media (max-width: 500px) { .booking-part-add { flex-wrap: wrap; } .booking-part-add input { flex-basis: calc(50% - 20px); } }
.note-guests { margin: 4px 0 8px; font-size: 12px; color: #777; }
/* Book Private popup, staff: participants (scripts.js bookParts*) */
.book-parts { text-align: left; }
.book-parts.view-booking-parts { margin: 8px 0 12px; border: 0; border-radius: 0; background: none; }
/* The Private Booking popup's title row is centered (the shopping cart's stays on the left) */
#book-parts .view-booking-parts-title { justify-content: center; }
/* A private cart line's participants (Buy New, a package that takes them): plain, no box */
.view-booking-parts.cart-parts-box { margin: 12px 0 4px; padding: 0; border: 0; background: none; }
/* Book Private, My Passes: none of the member's passes is good with this instructor */
.private-passes-none { padding: 18px 24px 6px; font-size: 14px; color: #777; text-align: center; line-height: 1.5; }
.book-parts-title { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #4a3a78; margin-bottom: 4px; }
.book-parts-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 13px; color: #333; }
.book-parts-row b { font-weight: 600; }
.book-parts-row small { flex: 1; min-width: 0; color: #776a99; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.book-parts-x { margin-left: auto; color: #a89cc7; font-size: 18px; line-height: 14px; cursor: pointer; }
.book-parts-x:hover { color: #c62828; }
.book-parts-add { display: flex; gap: 6px; margin-top: 6px; }
.book-parts-add input { flex: 1; min-width: 0; margin: 0; padding: 6px 8px; font-size: 13px; }
.book-parts-btn, .book-parts-btn:hover { flex: 0 0 34px; height: 30px; margin: 0 !important; padding: 0 !important; min-width: 0 !important; border: 0 !important; border-radius: 6px !important; background: #5d45a2 !important; background-image: none !important; box-shadow: none !important; color: #fff !important; font-size: 18px; font-weight: 700; line-height: 30px; cursor: pointer; }
.book-parts-btn:hover { background: #4a3a78 !important; }
.book-parts-err { margin-top: 4px; font-size: 12px; color: #c62828; }
/* Participants picker (participants-picker.js): rows, one Add participant line, a members / team / new person drop */
.pp { position: relative; text-align: left; }
.pp-row, .pp-opt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: #333; }
.pp-pic { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: 0 0 26px; margin: 0; }
.pp-who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pp-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-who small { font-size: 11px; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-x { color: #b3a9cf; font-size: 18px; line-height: 14px; cursor: pointer; padding: 0 2px; }
.pp-x:hover { color: #c62828; }
.pp-add { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 10px; border: 1px dashed #b9add8; border-radius: 8px; background: rgba(255,255,255,.6); color: #4a3a78; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.pp-add:hover, .pp-add.pp-add-open { background: #fff; border-color: #5d45a2; }
.pp-add.pp-add-subtle { display: inline-block; margin-top: 6px; padding: 0; border: 0; background: none; color: #888; font-size: 13px; font-weight: 400; text-decoration: underline; }
.pp-add.pp-add-subtle:hover, .pp-add.pp-add-subtle.pp-add-open { background: none; color: #555; }
.pp-add.pp-add-subtle svg { display: none; }
.pp-add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 18px; }
.pp-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 80; background: #fff; border: 1px solid #ddd6ee; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.18); padding: 8px; }
.pp-search { width: 100%; box-sizing: border-box; margin: 0 0 6px; padding: 8px 10px; font-size: 13px; }
.pp-list { max-height: 230px; overflow-y: auto; }
/* No room below: the drop opens upward from the Add participant line */
.pp-drop.pp-drop-up { top: auto; box-shadow: 0 -6px 28px rgba(0,0,0,.18); }
/* A participant's answer to their invite */
.pp-rsvp { flex: 0 0 auto; margin-left: auto; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.pp-rsvp-yes { background: #e5f5ea; color: #1e7a44; }
.pp-rsvp-no { background: #f1f1f1; color: #888; }
.pp-rsvp + .pp-x { margin-left: 8px; }
/* Inline (a popup that scrolls, as RECORD): the drop opens in the flow and pushes what's below it down */
.pp-inline .pp-drop { position: static; margin-top: 6px; box-shadow: none; }
.pp-head { margin: 6px 4px 2px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #999; }
.pp-opt { padding: 6px 6px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.pp-opt:hover { background: #f3f0fa; }
.pp-opt-off { opacity: .45; cursor: default; }
.pp-note { padding: 10px 6px; font-size: 12px; color: #999; }
.pp-new { display: block; margin-top: 6px; padding: 8px 6px; border-top: 1px solid #eee; color: #5d45a2; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; }
.pp-new:hover { background: #f8f6fc; }
.pp-form input { display: block; width: 100%; box-sizing: border-box; margin: 0 0 6px; }
.pp-form-btns { display: flex; gap: 6px; }
.pp-form-btns button { flex: 1; margin: 0; }
.pp-err { margin: 0 0 6px; font-size: 12px; color: #c62828; }
/* Buy / Pay Balance popup: Charge future pending charges to this card */
.pop-pending-card { z-index: 60; }
.pop-pending-card-ask { padding: 5px 18px 14px; font-size: 15px; font-weight: 600; color: #333; text-align: left; }
.pop-pending-card-rows { max-height: 260px; overflow-y: auto; margin: 0 14px; border-top: 1px solid #e5e5e5; }
.pop-pending-card-row { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid #e5e5e5; font-size: 13px; text-align: left; }
.pop-pending-card-name { flex: 1; min-width: 0; color: #333; }
.pop-pending-card-source { display: block; font-size: 11px; color: #999; white-space: nowrap; }
.pop-pending-card-date { color: #666; white-space: nowrap; }
.pop-pending-card-amount { width: 64px; text-align: right; font-weight: 600; color: #333; white-space: nowrap; }
.pop-pending-card-buttons { display: flex; gap: 8px; padding: 14px; }
.pop-pending-card-buttons button { flex: 1; margin: 0; }
/* Edit Purchase: a pending charge's Card / Balance */
.charge-to-switch { display: flex; border: 1px solid #ccc; border-radius: 6px; overflow: hidden; }
.charge-to-switch span { flex: 1; padding: 7px 6px; text-align: center; font-size: 13px; color: #555; background: #fff; cursor: pointer; user-select: none; white-space: nowrap; }
.charge-to-switch span + span { border-left: 1px solid #ccc; }
.charge-to-switch span.on { background: #5d45a2; color: #fff; font-weight: 600; }
.charge-to-switch span { display: flex; align-items: center; justify-content: center; gap: 5px; }
.charge-to-card { height: 16px; width: auto; vertical-align: middle; }
.charge-to-switch span.on .charge-to-card { filter: invert(1); }

/* Analytics > Inventory: the stock portal */
.inventory-page { text-align: left; }
.inventory-actions { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: middle; position: relative; top: -2px; }
.inventory-act { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: #555; cursor: pointer; flex: 0 0 auto; }
.inventory-act:hover { background: #f1f0f5; color: #222; }
.inventory-empty { padding: 24px 10px; color: #888; font-size: 14px; text-align: center; line-height: 1.5; }
.inventory-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 10px 16px; clear: both; }
.inventory-kpi { background: #fff; border: 1px solid #ebe9f1; border-radius: 10px; padding: 12px 12px 10px; text-align: center; }
.inventory-kpi-click { cursor: pointer; }
.inventory-kpi-click:hover, .inventory-kpi-click.on { border-color: #5d45a2; box-shadow: 0 0 0 1px #5d45a2 inset; }
.inventory-kpi-value { font-size: 22px; font-weight: 800; color: #222; white-space: nowrap; }
.inventory-kpi-label { margin-top: 2px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #888; }
.inventory-kpi-mark { margin-left: 2px; color: #c79a1e; font-size: 16px; cursor: help; }
.inventory-low-text { color: #b8860b !important; }
.inventory-out-text { color: #c62828 !important; }
.inventory-hand-text { color: #1557b0 !important; }
.inventory-sold-text { color: #1e7a44 !important; }
.inventory-in-text { color: #2a7d3f !important; }
.inventory-untracked-text { color: #888 !important; }
.inventory-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 10px 12px; }
.inventory-search { flex: 1 1 220px; margin: 0 !important; }
.inventory-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.inventory-pill { padding: 6px 12px; border-radius: 16px; background: #f1f0f5; color: #555; font-size: 13px; font-weight: 600; cursor: pointer; user-select: none; }
.inventory-pill b { margin-left: 3px; color: #888; font-weight: 700; }
.inventory-pill.on { background: #5d45a2; color: #fff; }
.inventory-pill.on b { color: #ddd5f2; }
.inventory-card { background: #fff; border: 1px solid #ebe9f1; border-radius: 12px; margin: 0 10px 12px; }
.inventory-card-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.inventory-photo { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 8px; background: #ede9f6 center / cover no-repeat; display: flex; align-items: center; justify-content: center; color: #5d45a2; font-size: 20px; font-weight: 800; }
.inventory-card-title { flex: 1; min-width: 0; }
.inventory-name { font-size: 16px; font-weight: 700; color: #222; }
.inventory-sub { margin-top: 2px; font-size: 12.5px; color: #888; }
.inventory-card-nums { display: flex; gap: 14px; font-size: 12px; color: #888; white-space: nowrap; }
.inventory-card-nums b { font-size: 17px; color: #222; }
.inventory-untracked { padding: 10px 14px 14px; font-size: 13px; color: #888; border-top: 1px solid #f1f0f5; }
.inventory-add-stock { margin-left: 4px; color: #5d45a2; font-weight: 600; cursor: pointer; white-space: nowrap; }
.inventory-rows { border-top: 1px solid #f1f0f5; }
.inventory-row { display: grid; grid-template-columns: minmax(0, 1.4fr) 150px 70px 90px auto; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #f6f5f9; }
.inventory-row:first-child { border-top: 0; }
.inventory-row { cursor: pointer; }
.inventory-row:hover, .inventory-row.open { background: #faf9fc; }
.inventory-chev { display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 1px; border-right: 2px solid #aaa; border-bottom: 2px solid #aaa; transform: rotate(-45deg); transition: transform .15s; }
.inventory-row.open .inventory-chev { transform: rotate(45deg); margin-bottom: 4px; }
.inventory-row-hist { background: #faf9fc; border-top: 1px solid #f1f0f5; padding: 2px 0 4px; }
.inventory-row-hist .inventory-empty { padding: 12px 10px; }
.inventory-row-hist-foot { display: flex; justify-content: center; gap: 18px; }
.inventory-row-hist-foot .inventory-more { padding: 8px 4px; font-size: 13px; }
.inventory-more.inventory-export-link { display: inline-flex; align-items: center; gap: 6px; }
.inventory-ledger-head { display: flex; align-items: center; justify-content: space-between; margin: 0 10px 10px; }
.inventory-ledger-title { font-size: 14px; font-weight: 700; color: #444; letter-spacing: .04em; }
.inventory-ledger-chip { display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 12px; background: #e5f5ea; color: #1e7a44; font-size: 12px; letter-spacing: 0; text-transform: none; cursor: pointer; vertical-align: 1px; }
.inventory-ledger-chip b { margin-left: 3px; }
.inventory-back { color: #5d45a2; font-size: 13px; font-weight: 600; cursor: pointer; }
.inventory-ledger-row { display: grid; grid-template-columns: 150px minmax(0, 1.3fr) 120px minmax(0, 1.5fr) 60px 60px; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid #f6f5f9; font-size: 13px; color: #333; }
.inventory-ledger-row-opt { grid-template-columns: 150px 120px minmax(0, 1fr) 60px 60px; padding: 7px 14px 7px 30px; border-top: 0; }
.inventory-ledger-cols { border-top: 0; font-size: 10.5px; color: #999; text-transform: uppercase; letter-spacing: .06em; padding-top: 10px; padding-bottom: 6px; }
.inventory-ledger-date { color: #777; white-space: nowrap; }
.inventory-ledger-item, .inventory-ledger-details { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-ledger-details { color: #777; }
.inventory-ledger-num { text-align: right; }
.inventory-ledger-delta { font-size: 15px; font-weight: 800; }
.inventory-act.on { background: #ede9f6; color: #5d45a2; }
.inventory-opt { font-size: 14px; font-weight: 600; color: #333; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-stock { display: flex; align-items: center; gap: 8px; }
.inventory-stock b { font-size: 18px; min-width: 28px; text-align: right; }
.inventory-tag { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.inventory-tag-in { background: #e5f5ea; color: #1e7a44; }
.inventory-tag-low { background: #fbf3d5; color: #8a6d1d; }
.inventory-tag-out { background: #fde8e8; color: #c62828; }
.inventory-num { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.inventory-num b { font-size: 14px; color: #333; }
.inventory-num span { font-size: 10.5px; color: #999; text-transform: uppercase; letter-spacing: .06em; }
.inventory-row-acts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.inventory-row-acts .btn-small { margin: 0; padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.inventory-pop { max-width: 380px; text-align: left; }
.inventory-pop-item { padding: 0 2px 12px; font-size: 14px; color: #444; line-height: 1.5; }
.inventory-pop-field { display: block; margin-bottom: 10px; }
.inventory-pop-field > span:first-child { display: block; margin-bottom: 4px; font-size: 12px; color: #777; }
.inventory-pop-field input, .inventory-pop-field select { width: 100%; margin: 0 !important; box-sizing: border-box; }
.inventory-money-in { display: flex; align-items: center; gap: 6px; }
.inventory-pop-delta { margin: -4px 0 10px; font-size: 13px; font-weight: 700; }
.inventory-pop-btns { display: flex; gap: 8px; margin-top: 8px; }
.inventory-pop-btns button { flex: 1; margin: 0; }
.inventory-hist-after { flex: 0 0 auto; padding: 2px 8px; border-radius: 10px; background: #f1f0f5; color: #555; font-size: 12px; font-weight: 700; }
.inventory-more { display: block; padding: 10px; text-align: center; color: #5d45a2; font-weight: 600; cursor: pointer; }
@media (max-width: 720px) {
	.inventory-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.inventory-card-nums { display: none; }
	.inventory-row { grid-template-columns: minmax(0, 1fr) auto; }
	.inventory-row .inventory-num { display: none; }
	.inventory-row-acts { grid-column: 1 / -1; justify-content: flex-start; }
	.inventory-ledger-cols { display: none; }
	.inventory-ledger-row, .inventory-ledger-row-opt { grid-template-columns: minmax(0, 1fr) auto auto; row-gap: 1px; }
	.inventory-ledger-row-opt { padding-left: 14px; }
	.inventory-ledger-row > * { grid-column: 1; }
	.inventory-ledger-row > .inventory-ledger-num { grid-column: 2; grid-row: 1 / span 4; }
	.inventory-ledger-row > .inventory-ledger-num:last-child { grid-column: 3; }
	.inventory-ledger-date { font-size: 11.5px; }
	.inventory-ledger-details { white-space: normal; }
}

/* Phones: the logo, then the nav icons filling the rest of the row (they used to wrap under it, over the
   page bar). The menu button keeps its padding at the right; the icons before it share what's left and
   narrow to fit */
@media only screen and (max-width: 767px) {
	.nav-bar .page { display: flex; align-items: center; height: 64px; }
	.nav-bar .page > a:first-child { flex: 0 1 auto; min-width: 0; }
	.nav-bar .page > a:first-child .nav-item { padding-right: 8px; }
	.nav-bar .nav-logo { max-width: min(150px, 38vw); }
	.nav-bar .nav-right { float: none; flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; align-items: center; }
	.nav-bar .nav-right > .nav-item:not(.nav-on) { flex: 0 1 62px; min-width: 0; padding: 0; text-align: center; }
	.nav-bar .nav-right > .nav-on { flex: none; }
	.nav-bar .nav-right .nav-icon { max-width: min(32px, 100%); }
}