@charset "utf-8";

@layer altervate {
                        @font-face {
                        font-family: 'Barlow';
                        font-weight: 400;
                        font-style: normal;
                        font-display: swap; /* allows page to load before loading font */
                        unicode-range: U+000-5FF; /* Download only latin glyphs */
                        src: url('fonts/Barlow-Regular.ttf');
                    }
                                        @font-face {
                        font-family: 'BarlowBold';
                        font-weight: 400;
                        font-style: normal;
                        font-display: swap; /* allows page to load before loading font */
                        unicode-range: U+000-5FF; /* Download only latin glyphs */
                        src: url('fonts/Barlow-Bold.ttf');
                    }
                    	

		* {
		box-sizing: border-box;
	}
	
	html {
		font-family: Barlow,Arial,Helvetica,sans-serif;	
		font-size: 16px;
        font-weight: 400;
	}
		
		body {
					background-color: #555555;
			color: #222222;
					
		margin: 0 auto;
		padding: 0px;
		font-size: 16px;
		vertical-align: middle;
	}
	
		
	
			a img {
		border: none;
	}
	
		a:link {
		color: #4CBDF0;
		text-decoration: underline;
		/* white-space: nowrap; */
	}
	a:visited {
		color: #4CBDF0;
		text-decoration: underline;
		/* white-space: nowrap; */
	}
		
	a:hover, a:active, a:focus, .aActive { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
		color: #6EC1E4;
		/* white-space: nowrap; */
	}
	
		
	hr {
		height:1px;
		border-width:0;
		color: #DDDDDD;
		background-color: #DDDDDD;
	}
	
	h1, .h1Style {				
		color: #4CBDF0;
		font-weight: 400;
		font-size: 48px;
		vertical-align: middle;
        margin-bottom: 24px;
        margin-top: 0px;
	}
    .h1Color {
        color: #4CBDF0;
    }
	.h1Size {
		font-size: 48px;
        font-weight: 400;
        margin-bottom: 24px;
        margin-top: 0px;
	}
	
	h1 a:link, h1 a:visited {
		color: #4CBDF0;
	}
		
	h1 a:hover, h1 a:active, h1 a:focus {
		color: #4CBDF0;
	}
	
	h2, .h2Style {			
		color: #4CBDF0;
		font-weight: 400;
		font-size: 36px;
		vertical-align: middle;
        margin-bottom: 18px;
        margin-top: 0px;
	}
    .h2Color {
        color: #4CBDF0;
    }
	.h2Size {
		font-size: 36px;
        font-weight: 400;
        margin-bottom: 18px;
        margin-top: 0px;
	}
	
	h2 a:link, h2 a:visited {
		color: #4CBDF0;
	}
		
	h2 a:hover, h2 a:active, h2 a:focus {
		color: #4CBDF0;
	}
	h3, .h3Style {		
		color: #4CBDF0;
		font-weight: 400;
		font-size: 24px;
		vertical-align: middle;
        margin-bottom: 12px;
        margin-top: 0px;
	}
    .h3Color {
        color: #4CBDF0;
    }
	.h3Size {
		font-size: 24px;
        font-weight: 400;
        margin-bottom: 12px;
        margin-top: 0px;
	}
	
	h3 a:link, h3 a:visited {
		color: #4CBDF0;
	}
		
	h3 a:hover, h3 a:active, h3 a:focus {
		color: #4CBDF0;
	}
	h4, .h4Style {		
		color: #111111;
		font-weight: 700;
		font-size: 16px;
		vertical-align: middle;
        margin-bottom: 8px;
        margin-top: 0px;
	}
    .h4Color {
        color: #111111;
    }
	.h4Size {
		font-size: 16px;
        font-weight: 700;
        margin-bottom: 8px;
        margin-top: 0px;
	}
	
	h4 a:link, h4 a:visited {
		color: #111111;
	}
		
	h4 a:hover, h4 a:active, h4 a:focus {
		color: #111111;
	}
	
	p, .pStyle {
		color: #222222;
        font-weight: normal;
        font-size: 16px;
		vertical-align: middle;
        margin-bottom: 8px;
        margin-top: 0px;
        line-height: 1.2;
	}

    summary {
        color: #4CBDF0;
        font-weight: 400;
        font-size: 24px;
        vertical-align: middle;
        margin-bottom: 12px;
        margin-top: 0px;
    }
    details {
        margin-bottom: 8px;
        margin-top: 0px;
    }

    .heavy {
        font-weight: 700;
    }

    .heavyBarlow {
        font-family: BarlowBold;
    }
    .condensedBarlow {
        font-family: BarlowCondensed;
    }
	
	li {
		margin: 0px 0px 14px 0px;
		vertical-align: middle;
	}
		
	input[type=number] {
		text-align:right;
	}
	
	input[type=text] {
		text-align:left;
	}
	
	textarea {
     	width: 100%;
	}
	
		img {
    	max-width: 100%;
	    height: auto;
	}
		
	.fontXXLarge {
		font-weight: normal;
		font-size: 48px;
	}
	
	.fontXLarge {
		font-weight: normal;
		font-size: 36px;
	}
	
	.fontLarge {
		font-weight: normal;
		font-size: 24px;
	}
	
	.fontSmall {
		font-weight: normal;
		font-size: 12px;
	}
	
	.fontXSmall {
		font-weight: normal;
		font-size: 10px;
	}
		
		code, .code {
		font-family: 'Courier New', monospace;
		background-color: #D7D7D7;
		/* border: 2px solid #BBBBBB; */		
  		/* border-radius: 8px; */
		padding: 1px 1px 1px 1px;
 		margin: 0px 0px 0px 0px;
	}
	
	.zzTip {
		color: #4CBDF0;
		font-style: italic;
	}
	.zzTip2 {
		color: #AAAAAA;		
		font-size: 12px;
		/* Long URLs and help copy must wrap inside narrow columns (e.g. Dropbox setup + info modern). */
		overflow-wrap: anywhere;
		word-break: break-word;
		max-width: 100%;
	}
	.zzTip2 code {
		overflow-wrap: anywhere;
		word-break: break-all;
		white-space: normal;
	}

    .zzSubtle {
        color: #AAAAAA;
        font-weight: normal;
    }
		
		
		form {
    	display: inline;
	}	
	
	input[type=submit] {
		background-color: transparent;
	}
		
	button {		
		background-color: transparent;
		font-family: Barlow,Arial,Helvetica,sans-serif;	
	}
	
	input {
		font-family: Barlow,Arial,Helvetica,sans-serif;				
	}
	
	select {
		color: #000000;
		font-family: Barlow,Arial,Helvetica,sans-serif;			font-size: 16px;
    	border: 1px solid #4a90e2;
		background-color: #f3f8ff;
  		border-radius: 8px;
		padding: 4px 2px 4px 2px;
 		margin: 2px 0px 2px 0px;
		vertical-align: middle;
	}
	
	input[type=text], input[type=email], input[type=number], input[type=password], input[type=date], input[type=datetime-local], textarea { 	 			
		color: #000000;
		font-size: 16px;
		border: 1px solid #4a90e2;
		background-color: #f3f8ff;
  		border-radius: 8px;
		padding: 4px 2px 4px 2px;
 		margin: 2px 0px 2px 0px;			
  		box-sizing: border-box;
		vertical-align: middle;
	}
	input[type=color] {  				
		color: #000000;
		border: 1px solid #4a90e2;
  		border-radius: 8px;
		padding: 0px 0px 0px 0px;
 		margin: 2px 0px 2px 0px;			
  		box-sizing: border-box;
	}
	
	input.inputLarge {
		padding: 10px 10px 10px 10px;
 		margin: 4px 0px 4px 0px;
		font-size: 36px;
	}
	
	input.inputNarrow {		
		width: auto;
	}
	
	input.inputWide {
		width: 100%;
	}
	
	input.inputNormal {
	}
	
	input.textAlignRight {  		
		text-align: right;
	}
	
	input.inputRed {
  		border: 1px solid #ff0000;
		background-color: #ff9999;			
	}
	
	input.inputGreen {
  		border: 1px solid #00ff00;
		background-color: #99ff99;		
	}
	
	input.inputGrey {
  		border: 1px solid #666666;
		background-color: #999999;		
	}
	
	input.inputBlue {
  		border: 1px solid #6699ff;
		background-color: #ccddff;		
	}

		.tox .tox-editor-header,
	.tox .tox-statusbar {
		background-color: #f4f5f7 !important;
	}
	.tox .tox-toolbar,
	.tox .tox-toolbar__primary,
	.tox .tox-toolbar__group {
		background-color: #f4f5f7 !important;
	}
	/* TinyMCE blocks selector preview: mirror site heading hierarchy in the dropdown labels. */
	.tox .tox-collection__item-label h1 {
		color: #4CBDF0 !important;
		font-size: 48px !important;
		font-weight: 400 !important;
		margin: 24px 0 !important;
	}
	.tox .tox-collection__item-label h2 {
		color: #4CBDF0 !important;
		font-size: 36px !important;
		font-weight: 400 !important;
		margin: 18px 0 !important;
	}
	.tox .tox-collection__item-label h3 {
		color: #4CBDF0 !important;
		font-size: 24px !important;
		font-weight: 400 !important;
		margin: 12px 0 !important;
	}
	.tox .tox-collection__item-label h4 {
		color: #111111 !important;
		font-size: 16px !important;
		font-weight: 700 !important;
		margin: 8px 0 !important;
	}
	
		
	.accordionButton{
		background-color: #555555;
		color: #EEEEEE;
		font-size: 24px;
		cursor: pointer;
		padding: 6px;
		width: 100%;
		border: none;
		border-radius: 8px;
		text-align: left;
		outline: none;		
	}
    	.accordionButton:after {
		font-size: 24px;
		font-weight: bold;
		color: #EEEEEE;
		float: left;
		margin-top: 0px;
		margin-right: 5px;
		content: '\002B '; /* Unicode character for "plus" sign (+) */		
	}

	.accordionActive, .accordionButton:hover{
		background-color: #4CBDF0;
		color: #FFFFFF;
	}
	
	.accordionActive:after {
		content: '\2212 '; /* Unicode character for "minus" sign (-) */		
	}
	
	.accordionContent {		
		display: none;
		overflow: hidden;		
	}
	
	.accordionShow {		
		display: block;
		overflow: auto;		
	}
		
	.accordionBackground {
		background-color: #EEEEEE;
		padding: 10px;		
	}	
	
		
		
	/* Flex: avoids baseline / line-box mismatch between raw SVG icons and circular avatar (inline-block photo). */
	.zzUserMenuContainer a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		padding: 2px 2px 2px 2px;
		color: #4CBDF0;	
		background-color: #FFFFFF;	
	}
	.zzUserMenuContainer a .zzUserMenuAvatar {
		flex-shrink: 0;
		vertical-align: middle; 	}
	
	.zzUserMenuContainer a:hover,
	.zzUserMenuContainer a.zzMenu2Active {
		background-color: #FFFFFF;		
		color: #4CBDF0; 	}
	
		
	
			
	.zzMainMenuDiv, .zzMainMenuDivMobile {
		background-color: #555555;
		width: 100%;
		z-index: 3;
		padding: 0px;
		margin: 0 auto;
	}
	
	.zzMainMenuDiv ul, .zzMainMenuDivMobile ul {
		margin: 0;
		padding: 0;
		list-style: none;		
	}
	.zzMainMenuDiv ul {	
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;				
	}	
	.zzMainMenuDivMobile ul {	
		display: block;	
		width: 100%;				
	}

	.zzMainMenuDiv li, .zzMainMenuDivMobile li {	
		flex: 0 1 auto; /* Default */
		font-size: 16px;
		margin: 0px;		
	}
	.zzMainMenuDiv li {		
		text-align: center;		
	}
	.zzMainMenuDivMobile li {			
		text-align: left;		
	}
			
	.zzMainMenuDiv li a, .zzMainMenuDivMobile li a {
		display: block;
		width: 100%;		
				padding: 10px 16px;	
		text-decoration: none;
		color: #EEEEEE;
		background-color: #555555;
	}	
		
	.zzMainMenuDiv li a.zzMainMenuActive,
	.zzMainMenuDivMobile li a.zzMainMenuActive {				
		background-color: #4CBDF0;
		color: #FFFFFF;
	}	
	.zzMainMenuDiv li a:hover,
	.zzMainMenuDivMobile li a:hover {
		background-color: #4CBDF0;
		color: #FFFFFF;
	}
	
	.zzMainMenuActiveLinkResponsive {
		font-size: 16px;
		color: #FFFFFF;
		background-color: #555555;
		margin: 0px;
		padding: 10px 16px;
		max-width: 80%;		
	}
	
	.zzMainMenuDiv .zzMainMenuUL {
		clear: none;
		float: right;
		max-height: none;	
	}	
	.zzMainMenuDivMobile .zzMainMenuUL {
		clear: both;
		max-height: 0;
		overflow: hidden;
		transition: max-height .2s ease-out;
	}
		
	.zzMainMenuDiv .zzMainMenuActiveLinkResponsive {
		display: none;
	}
	.zzMainMenuDivMobile .zzMainMenuActiveLinkResponsive {
		display: block;
	}



		.zzMainMenuDiv .zzMainMenuXLabel,
	.zzMainMenuDivMobile .zzMainMenuXLabel {
		cursor: pointer;
		float: right;
		padding: 18px 16px;
		position: relative;
		user-select: none;
		background-color: #555555;
	}
	
	.zzMainMenuDiv .zzMainMenuXLabel {		
		display: none;		
	}		
	.zzMainMenuDivMobile .zzMainMenuXLabel {		
		display: inline-block;		
	}
	
	.zzMainMenuDiv .zzMainMenuXLabel .zzMainMenuXSpan {
		display: none;
	}	
	.zzMainMenuDivMobile .zzMainMenuXLabel .zzMainMenuXSpan {
		background-color: #EEEEEE; 		display: block;
		height: 2px;
		position: relative;
		transition: background .2s ease-out;
		width: 18px;
	}
	
	.zzMainMenuDivMobile .zzMainMenuXLabel .zzMainMenuXSpan:before,
	.zzMainMenuDivMobile .zzMainMenuXLabel .zzMainMenuXSpan:after {
		background-color: #EEEEEE; 		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		width: 100%;
	}
	
	.zzMainMenuDivMobile .zzMainMenuXLabel .zzMainMenuXSpan:before {
		top: 5px;
	}	
	.zzMainMenuDivMobile .zzMainMenuXLabel .zzMainMenuXSpan:after {
		top: -5px;
	}	
	.zzMainMenuDiv .zzMainMenuXButton,
	.zzMainMenuDivMobile .zzMainMenuXButton {
		display: none;
	}	
	.zzMainMenuDivMobile .zzMainMenuXButton:checked ~ .zzMainMenuUL {
		max-height: 1500px;
	}	
	.zzMainMenuDivMobile .zzMainMenuXButton:checked ~ .zzMainMenuXLabel .zzMainMenuXSpan {
	  	background: transparent;
	}	
	.zzMainMenuDivMobile .zzMainMenuXButton:checked ~ .zzMainMenuXLabel .zzMainMenuXSpan:before {
	  	transform: rotate(-45deg);
	}	
	.zzMainMenuDivMobile .zzMainMenuXButton:checked ~ .zzMainMenuXLabel .zzMainMenuXSpan:after {
	  	transform: rotate(45deg);
	}
	
	.zzMainMenuDivMobile .zzMainMenuXButton:checked ~ .zzMainMenuXLabel:not(.steps) .zzMainMenuXSpan:before,
	.zzMainMenuDivMobile .zzMainMenuXButton:checked ~ .zzMainMenuXLabel:not(.steps) .zzMainMenuXSpan:after {
	  	top: 0;
	}
	
		
		
	.zzSideMenuDiv {
		width: 100%;
		display: block;
	}
		
	.zzSideMenuDiv {
		background-color: #333333;
		color: #DDDDDD;
		font-size: 14px;
		z-index: 3;
				padding: 10px 10px;
		margin: 0 auto;
	}
	
	.zzSideMenuDiv ul {
		margin: 0;
		padding: 0;
		list-style: none;		
		background-color: #333333;
	}
	
	.zzSideMenuDiv li {		
		font-size: 14px;
		margin: 5px;
		text-align: left;		
	}
			
	.zzSideMenuDiv li a {
		display: flex;
		align-items: center;
		gap: 0.45em;
		width: 100%;		
				padding: 9px 14px;	
		text-decoration: none;
		color: #DDDDDD;
		background-color: #333333;
	}
	.zzSideMenuDiv li a svg {
		flex-shrink: 0;
	}
	
	.zzSideMenuDiv li.zzSideSubMenuLI	{
		font-size: 12px;					
	}
	.zzSideMenuDiv li.zzSideSubMenuLI a {
		padding: 8px 12px 8px 24px;	
		color: #CCCCCC;
		background-color: #333333;
	}
		
	.zzSideMenuDiv li a.zzSideMenuActive {
		font-size: 14px;				
		background-color: #4CBDF0;
		color: #FFFFFF;
	}
	.zzSideMenuDiv li a:hover {
		background-color: #4CBDF0;
		color: #FFFFFF;
	}
	
	.zzSideMenuDiv li a.zzSideSubMenuActive {
		font-size: 12px;				
		background-color: #4CBDF0;
		color: #FFFFFF;
	}
	.zzSideMenuDiv li.zzSideSubMenuLI a:hover {
		color: #FFFFFF;
		background-color: #4CBDF0;
	}
	
	.zzSideMenuActiveLinkResponsive {
		font-size: 14px;
		color: #FFFFFF;
		margin: 0px;
		padding: 9px 14px;
		max-width: 80%;		
	}	
		
	.zzSideMenuDiv .zzSideMenuUL {
		clear: both;
		max-height: 0;
		overflow: hidden;
		transition: max-height .2s ease-out;
	}	
		
	.zzSideMenuDiv .zzSideMenuActiveLinkResponsive {
		display: block;
	}

		.zzSideMenuDiv .zzSideMenuXLabel {
		cursor: pointer;		
		float: right;
		padding: 14px 14px;
		position: relative;
		user-select: none;
	}
				
	.zzSideMenuDiv .zzSideMenuXLabel {		
		display: inline-block;		
	}
	
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan {
		background: #DDDDDD; 		display: block;
		height: 2px;
		position: relative;
		transition: background .2s ease-out;
		width: 18px;
	}
	
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan:before,
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan:after {
		background: #DDDDDD; 		content: '';
		display: block;
		height: 100%;
		position: absolute;
		transition: all .2s ease-out;
		width: 100%;
	}
	
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan:before {
		top: 5px;
	}	
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan:after {
		top: -5px;
	}	
	.zzSideMenuDiv .zzSideMenuXButton {
		display: none;
	}	
	.zzSideMenuDiv .zzSideMenuXButton:checked ~ .zzSideMenuUL {
		max-height: 1500px;
	}	
	.zzSideMenuDiv .zzSideMenuXButton:checked ~ .zzSideMenuXLabel .zzSideMenuXSpan {
	  	background: transparent;
	}	
	.zzSideMenuDiv .zzSideMenuXButton:checked ~ .zzSideMenuXLabel .zzSideMenuXSpan:before {
	  	transform: rotate(-45deg);
	}	
	.zzSideMenuDiv .zzSideMenuXButton:checked ~ .zzSideMenuXLabel .zzSideMenuXSpan:after {
	  	transform: rotate(45deg);
	}	
	.zzSideMenuDiv .zzSideMenuXButton:checked ~ .zzSideMenuXLabel:not(.steps) .zzSideMenuXSpan:before,
	.zzSideMenuDiv .zzSideMenuXButton:checked ~ .zzSideMenuXLabel:not(.steps) .zzSideMenuXSpan:after {
	  	top: 0;
	}
	
	@media only screen and (min-width: 500px) {	.zzSideMenuDiv {		
		width:auto;
	}
	.zzSideMenuDiv .zzSideMenuUL {
		clear: none;
		float: right;
		max-height: none;	
	}
	.zzSideMenuDiv .zzSideMenuActiveLinkResponsive {
		display: none;
	}
	.zzSideMenuDiv .zzSideMenuXLabel {		
		display: none;		
	}
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan {
		display: none;
	}
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan:before,
	.zzSideMenuDiv .zzSideMenuXLabel .zzSideMenuXSpan:after {
		display: none;
	}	
	}
	
		
	.pageArrows {
		background-color: #DDDDDD;
		color: #222222;
				padding: 6px 6px 10px 6px;
		width: 100%;
		border: none;
		text-align: center;
		outline: none;
		font-size: 24px;			
	}
	
	.pageArrowActive {
		text-decoration: none;
        cursor: pointer;
		padding: 0px 3px 4px 3px;
		border: 2px solid #00aeff;
		border-radius: 8px;
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #ffffff,#ffffff);		
		color: #00aeff !important;
		box-shadow:inset 0px 1px 0px 0px #ffffff;
	}
	
	.pageArrowActive :hover {
		color: #0097de !important;
	}

    .pageArrowActive a {
        text-decoration: none;
    }
	
	
	.pageArrowInActive {
		text-decoration: none;
		padding: 0px 3px 4px 3px;
		border: 2px solid #cccccc;
		border-radius: 8px;
		background-color: #eeeeee;
		background-image: linear-gradient(to bottom, #eeeeee,#eeeeee);		
		color: #cccccc !important;
		box-shadow:inset 0px 1px 0px 0px #eeeeee;
	}
	
	
	
		
		
		
	.zzTopBannerContainer {				
		width: 100%;		
		background-color: #4CBDF0;
		font-size: 24px;			
		color: #FFFFFF;
		padding: 7px 0px 10px 0px;
		text-align:center;
	}
	
	.zzHeaderContainer {				
		width: 100%;		
		background-color: #FFFFFF;
		font-size: 16px;	
		color: #222222;
	}
	.zzHeaderContainerLimitWidth {				
		max-width: 1200px;
		margin: auto;
	}
	.zzMenuContainerLimitWidth {				
		max-width: 1200px;
		margin: auto;
	}
	.zzHeaderContainer h1 {
		font-size: 36px;	
		color: #4CBDF0;
		margin: 5px;
	}
	.zzHeaderContainer h2 {
		font-size: 30px;	
		color: #4CBDF0;
		
	}
	.zzHeaderContainer h3 {
		font-size: 24px;	
		color: #222222;
		
	}
	.zzHeaderContainer h4 {
		font-size: 18px;	
		color: #222222;
		
	}
    .zzHeaderContainer a {
        color: #FFFFFF;
    }
	
	.zzSiteNameContainer {
		float: left;
		width: 80%;
	}
	
	.zzUserMenuContainer {				
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;
				color: #4CBDF0;
		background-color: #FFFFFF;
		font-size: 32px;		
	}
	
	.zzHeaderHideText {			
	}
	@media only screen and (max-width: 800px) {	.zzHeaderHideText {		
		display: none;		
	}
	}	
		.zzMenuContainer {			
		background-color: #555555;
		color: #EEEEEE;
		font-size: 16px;		
	}
	
	.zzPageWidthWide {
		max-width: 1200px;
	}
	
	.zzPageWidthNormal {
		max-width: 800px;
	}
	
	.zzPageWidthNarrow {
		max-width: 500px;
	}

    .zzPageWidthFull {
        max-width: 100%;
    }
	
			
	.zzMainSectionContainer {
		width: 100%;
		display: block;
					background-color: #FFFFFF;			
				
		padding: 0px;	
		margin: 0px auto;		
	}
	
	@media only screen and (min-width: 500px) {	.zzMainSectionContainer {		
		display: flex;		
	}
	}
	
		
	.zzSidebarContainer {
		width: auto;				
		background-color: #333333;
		color: #DDDDDD;
		font-size: 14px;		
	}
		
	.zzContentContainer {		
		width: 100%;
					background-color: #FFFFFF;			
					
		color: #222222;
		padding: 0px;
					
	}
	
	.zzFooterContainerMain {
		width: 100%;		
		display: block;
					background-color: #FFFFFF;			
					
		margin: auto;
		padding: 10px; 	}		
	
		.zzFooterContainer {		
		width: 100%;
		background-color: #4CBDF0;			
		color: #EEEEEE;
		font-size: 16px;
		padding: 10px;  	}
	
	.zzFooter2Container {		
		width: 100%;		
		background-color: #555555;
		color: #EEEEEE;
		font-size: 16px;
		padding: 10px; 	}
	
	.zzFooterContainer a:link,
	.zzFooterContainer a:visited,
	.zzFooter2Container a:link,
	.zzFooter2Container a:visited {
		color: #EEEEEE;
		text-decoration: underline;
        	}
	
	
		.zzFooterContainer a:hover,
	.zzFooterContainer a:active,
	.zzFooterContainer a:focus,
	.zzFooter2Container a:hover,
	.zzFooter2Container a:active,
	.zzFooter2Container a:focus { 
		color: #FFFFFF;
		text-decoration: underline;
			}
	
	.zzFooterContainer p,
	.zzFooter2Container p {
		color: #EEEEEE;
		font-size: 16px;
	}
	
	.zzFooterContainer h1,	
	.zzFooter2Container h1 {
		color: #FFFFFF;
		
	}
	
	.zzFooterContainer h2,	
	.zzFooter2Container h2 {
		color: #FFFFFF;
		
	}
	
	.zzFooterContainer h3,	
	.zzFooter2Container h3 {
		color: #FFFFFF;
		
	}
	
	.zzFooterContainer h4,	
	.zzFooter2Container h4 {
		color: #EEEEEE;
		
	}
	
		
		.row {
		width: 100%;
		margin: auto;
	}
	
	.row:after {
    	content: "";
    	clear: both;
    	display: block;
	}
		
	[class*="col-"], [class*="colFixed-"] {    	
		padding-top: 20px;
		padding-bottom: 20px;
		padding-left: 20px;
		padding-right: 20px;				    
	}
	
	[class*="col-"] {    	
		float: left;				    
	}
	
	.colFloatLeft {
		float: left;
	}
	.colFloatMid {
		float: none;
		margin: auto;
	}
	.colFloatRight {
		float: right;
	}
		
		[class*="col-margin"] {
    	margin: 5px auto;
	}

        .colFixed-10 { max-width: 10px; }
        .colFixed-20 { max-width: 20px; }
        .colFixed-30 { max-width: 30px; }
        .colFixed-40 { max-width: 40px; }
        .colFixed-50 { max-width: 50px; }
        .colFixed-60 { max-width: 60px; }
        .colFixed-70 { max-width: 70px; }
        .colFixed-80 { max-width: 80px; }
        .colFixed-90 { max-width: 90px; }
        .colFixed-100 { max-width: 100px; }
        .colFixed-110 { max-width: 110px; }
        .colFixed-120 { max-width: 120px; }
        .colFixed-130 { max-width: 130px; }
        .colFixed-140 { max-width: 140px; }
        .colFixed-150 { max-width: 150px; }
        .colFixed-160 { max-width: 160px; }
        .colFixed-170 { max-width: 170px; }
        .colFixed-180 { max-width: 180px; }
        .colFixed-190 { max-width: 190px; }
        .colFixed-200 { max-width: 200px; }
        .colFixed-210 { max-width: 210px; }
        .colFixed-220 { max-width: 220px; }
        .colFixed-230 { max-width: 230px; }
        .colFixed-240 { max-width: 240px; }
        .colFixed-250 { max-width: 250px; }
        .colFixed-260 { max-width: 260px; }
        .colFixed-270 { max-width: 270px; }
        .colFixed-280 { max-width: 280px; }
        .colFixed-290 { max-width: 290px; }
        .colFixed-300 { max-width: 300px; }
        .colFixed-310 { max-width: 310px; }
        .colFixed-320 { max-width: 320px; }
        .colFixed-330 { max-width: 330px; }
        .colFixed-340 { max-width: 340px; }
        .colFixed-350 { max-width: 350px; }
        .colFixed-360 { max-width: 360px; }
        .colFixed-370 { max-width: 370px; }
        .colFixed-380 { max-width: 380px; }
        .colFixed-390 { max-width: 390px; }
        .colFixed-400 { max-width: 400px; }
        .colFixed-410 { max-width: 410px; }
        .colFixed-420 { max-width: 420px; }
        .colFixed-430 { max-width: 430px; }
        .colFixed-440 { max-width: 440px; }
        .colFixed-450 { max-width: 450px; }
        .colFixed-460 { max-width: 460px; }
        .colFixed-470 { max-width: 470px; }
        .colFixed-480 { max-width: 480px; }
        .colFixed-490 { max-width: 490px; }
        .colFixed-500 { max-width: 500px; }
        .colFixed-510 { max-width: 510px; }
        .colFixed-520 { max-width: 520px; }
        .colFixed-530 { max-width: 530px; }
        .colFixed-540 { max-width: 540px; }
        .colFixed-550 { max-width: 550px; }
        .colFixed-560 { max-width: 560px; }
        .colFixed-570 { max-width: 570px; }
        .colFixed-580 { max-width: 580px; }
        .colFixed-590 { max-width: 590px; }
        .colFixed-600 { max-width: 600px; }
        .colFixed-610 { max-width: 610px; }
        .colFixed-620 { max-width: 620px; }
        .colFixed-630 { max-width: 630px; }
        .colFixed-640 { max-width: 640px; }
        .colFixed-650 { max-width: 650px; }
        .colFixed-660 { max-width: 660px; }
        .colFixed-670 { max-width: 670px; }
        .colFixed-680 { max-width: 680px; }
        .colFixed-690 { max-width: 690px; }
        .colFixed-700 { max-width: 700px; }
        .colFixed-710 { max-width: 710px; }
        .colFixed-720 { max-width: 720px; }
        .colFixed-730 { max-width: 730px; }
        .colFixed-740 { max-width: 740px; }
        .colFixed-750 { max-width: 750px; }
        .colFixed-760 { max-width: 760px; }
        .colFixed-770 { max-width: 770px; }
        .colFixed-780 { max-width: 780px; }
        .colFixed-790 { max-width: 790px; }
        .colFixed-800 { max-width: 800px; }
        .colFixed-810 { max-width: 810px; }
        .colFixed-820 { max-width: 820px; }
        .colFixed-830 { max-width: 830px; }
        .colFixed-840 { max-width: 840px; }
        .colFixed-850 { max-width: 850px; }
        .colFixed-860 { max-width: 860px; }
        .colFixed-870 { max-width: 870px; }
        .colFixed-880 { max-width: 880px; }
        .colFixed-890 { max-width: 890px; }
        .colFixed-900 { max-width: 900px; }
        .colFixed-910 { max-width: 910px; }
        .colFixed-920 { max-width: 920px; }
        .colFixed-930 { max-width: 930px; }
        .colFixed-940 { max-width: 940px; }
        .colFixed-950 { max-width: 950px; }
        .colFixed-960 { max-width: 960px; }
        .colFixed-970 { max-width: 970px; }
        .colFixed-980 { max-width: 980px; }
        .colFixed-990 { max-width: 990px; }
        .colFixed-1000 { max-width: 1000px; }
        .colFixed-1010 { max-width: 1010px; }
        .colFixed-1020 { max-width: 1020px; }
        .colFixed-1030 { max-width: 1030px; }
        .colFixed-1040 { max-width: 1040px; }
        .colFixed-1050 { max-width: 1050px; }
        .colFixed-1060 { max-width: 1060px; }
        .colFixed-1070 { max-width: 1070px; }
        .colFixed-1080 { max-width: 1080px; }
        .colFixed-1090 { max-width: 1090px; }
        .colFixed-1100 { max-width: 1100px; }
        .colFixed-1110 { max-width: 1110px; }
        .colFixed-1120 { max-width: 1120px; }
        .colFixed-1130 { max-width: 1130px; }
        .colFixed-1140 { max-width: 1140px; }
        .colFixed-1150 { max-width: 1150px; }
        .colFixed-1160 { max-width: 1160px; }
        .colFixed-1170 { max-width: 1170px; }
        .colFixed-1180 { max-width: 1180px; }
        .colFixed-1190 { max-width: 1190px; }
        .colFixed-1200 { max-width: 1200px; }
        .colFixed-1210 { max-width: 1210px; }
        .colFixed-1220 { max-width: 1220px; }
        .colFixed-1230 { max-width: 1230px; }
        .colFixed-1240 { max-width: 1240px; }
        .colFixed-1250 { max-width: 1250px; }
        .colFixed-1260 { max-width: 1260px; }
        .colFixed-1270 { max-width: 1270px; }
        .colFixed-1280 { max-width: 1280px; }
        .colFixed-1290 { max-width: 1290px; }
        .colFixed-1300 { max-width: 1300px; }
        .colFixed-1310 { max-width: 1310px; }
        .colFixed-1320 { max-width: 1320px; }
        .colFixed-1330 { max-width: 1330px; }
        .colFixed-1340 { max-width: 1340px; }
        .colFixed-1350 { max-width: 1350px; }
        .colFixed-1360 { max-width: 1360px; }
        .colFixed-1370 { max-width: 1370px; }
        .colFixed-1380 { max-width: 1380px; }
        .colFixed-1390 { max-width: 1390px; }
        .colFixed-1400 { max-width: 1400px; }
        .colFixed-1410 { max-width: 1410px; }
        .colFixed-1420 { max-width: 1420px; }
        .colFixed-1430 { max-width: 1430px; }
        .colFixed-1440 { max-width: 1440px; }
        .colFixed-1450 { max-width: 1450px; }
        .colFixed-1460 { max-width: 1460px; }
        .colFixed-1470 { max-width: 1470px; }
        .colFixed-1480 { max-width: 1480px; }
        .colFixed-1490 { max-width: 1490px; }
        .colFixed-1500 { max-width: 1500px; }
        .colFixed-1510 { max-width: 1510px; }
        .colFixed-1520 { max-width: 1520px; }
        .colFixed-1530 { max-width: 1530px; }
        .colFixed-1540 { max-width: 1540px; }
        .colFixed-1550 { max-width: 1550px; }
        .colFixed-1560 { max-width: 1560px; }
        .colFixed-1570 { max-width: 1570px; }
        .colFixed-1580 { max-width: 1580px; }
        .colFixed-1590 { max-width: 1590px; }
        .colFixed-1600 { max-width: 1600px; }
        .colFixed-1610 { max-width: 1610px; }
        .colFixed-1620 { max-width: 1620px; }
        .colFixed-1630 { max-width: 1630px; }
        .colFixed-1640 { max-width: 1640px; }
        .colFixed-1650 { max-width: 1650px; }
        .colFixed-1660 { max-width: 1660px; }
        .colFixed-1670 { max-width: 1670px; }
        .colFixed-1680 { max-width: 1680px; }
        .colFixed-1690 { max-width: 1690px; }
        .colFixed-1700 { max-width: 1700px; }
        .colFixed-1710 { max-width: 1710px; }
        .colFixed-1720 { max-width: 1720px; }
        .colFixed-1730 { max-width: 1730px; }
        .colFixed-1740 { max-width: 1740px; }
        .colFixed-1750 { max-width: 1750px; }
        .colFixed-1760 { max-width: 1760px; }
        .colFixed-1770 { max-width: 1770px; }
        .colFixed-1780 { max-width: 1780px; }
        .colFixed-1790 { max-width: 1790px; }
        .colFixed-1800 { max-width: 1800px; }
        .colFixed-1810 { max-width: 1810px; }
        .colFixed-1820 { max-width: 1820px; }
        .colFixed-1830 { max-width: 1830px; }
        .colFixed-1840 { max-width: 1840px; }
        .colFixed-1850 { max-width: 1850px; }
        .colFixed-1860 { max-width: 1860px; }
        .colFixed-1870 { max-width: 1870px; }
        .colFixed-1880 { max-width: 1880px; }
        .colFixed-1890 { max-width: 1890px; }
        .colFixed-1900 { max-width: 1900px; }
        .colFixed-1910 { max-width: 1910px; }
        .colFixed-1920 { max-width: 1920px; }
        .colFixed-1930 { max-width: 1930px; }
        .colFixed-1940 { max-width: 1940px; }
        .colFixed-1950 { max-width: 1950px; }
        .colFixed-1960 { max-width: 1960px; }
        .colFixed-1970 { max-width: 1970px; }
        .colFixed-1980 { max-width: 1980px; }
        .colFixed-1990 { max-width: 1990px; }
        .colFixed-2000 { max-width: 2000px; }
    
        .zzColFixed-10 { width: 10px; }
        .zzColFixed-20 { width: 20px; }
        .zzColFixed-30 { width: 30px; }
        .zzColFixed-40 { width: 40px; }
        .zzColFixed-50 { width: 50px; }
        .zzColFixed-60 { width: 60px; }
        .zzColFixed-70 { width: 70px; }
        .zzColFixed-80 { width: 80px; }
        .zzColFixed-90 { width: 90px; }
        .zzColFixed-100 { width: 100px; }
        .zzColFixed-110 { width: 110px; }
        .zzColFixed-120 { width: 120px; }
        .zzColFixed-130 { width: 130px; }
        .zzColFixed-140 { width: 140px; }
        .zzColFixed-150 { width: 150px; }
        .zzColFixed-160 { width: 160px; }
        .zzColFixed-170 { width: 170px; }
        .zzColFixed-180 { width: 180px; }
        .zzColFixed-190 { width: 190px; }
        .zzColFixed-200 { width: 200px; }
        .zzColFixed-210 { width: 210px; }
        .zzColFixed-220 { width: 220px; }
        .zzColFixed-230 { width: 230px; }
        .zzColFixed-240 { width: 240px; }
        .zzColFixed-250 { width: 250px; }
        .zzColFixed-260 { width: 260px; }
        .zzColFixed-270 { width: 270px; }
        .zzColFixed-280 { width: 280px; }
        .zzColFixed-290 { width: 290px; }
        .zzColFixed-300 { width: 300px; }
        .zzColFixed-310 { width: 310px; }
        .zzColFixed-320 { width: 320px; }
        .zzColFixed-330 { width: 330px; }
        .zzColFixed-340 { width: 340px; }
        .zzColFixed-350 { width: 350px; }
        .zzColFixed-360 { width: 360px; }
        .zzColFixed-370 { width: 370px; }
        .zzColFixed-380 { width: 380px; }
        .zzColFixed-390 { width: 390px; }
        .zzColFixed-400 { width: 400px; }
        .zzColFixed-410 { width: 410px; }
        .zzColFixed-420 { width: 420px; }
        .zzColFixed-430 { width: 430px; }
        .zzColFixed-440 { width: 440px; }
        .zzColFixed-450 { width: 450px; }
        .zzColFixed-460 { width: 460px; }
        .zzColFixed-470 { width: 470px; }
        .zzColFixed-480 { width: 480px; }
        .zzColFixed-490 { width: 490px; }
        .zzColFixed-500 { width: 500px; }
        .zzColFixed-510 { width: 510px; }
        .zzColFixed-520 { width: 520px; }
        .zzColFixed-530 { width: 530px; }
        .zzColFixed-540 { width: 540px; }
        .zzColFixed-550 { width: 550px; }
        .zzColFixed-560 { width: 560px; }
        .zzColFixed-570 { width: 570px; }
        .zzColFixed-580 { width: 580px; }
        .zzColFixed-590 { width: 590px; }
        .zzColFixed-600 { width: 600px; }
        .zzColFixed-610 { width: 610px; }
        .zzColFixed-620 { width: 620px; }
        .zzColFixed-630 { width: 630px; }
        .zzColFixed-640 { width: 640px; }
        .zzColFixed-650 { width: 650px; }
        .zzColFixed-660 { width: 660px; }
        .zzColFixed-670 { width: 670px; }
        .zzColFixed-680 { width: 680px; }
        .zzColFixed-690 { width: 690px; }
        .zzColFixed-700 { width: 700px; }
        .zzColFixed-710 { width: 710px; }
        .zzColFixed-720 { width: 720px; }
        .zzColFixed-730 { width: 730px; }
        .zzColFixed-740 { width: 740px; }
        .zzColFixed-750 { width: 750px; }
        .zzColFixed-760 { width: 760px; }
        .zzColFixed-770 { width: 770px; }
        .zzColFixed-780 { width: 780px; }
        .zzColFixed-790 { width: 790px; }
        .zzColFixed-800 { width: 800px; }
        .zzColFixed-810 { width: 810px; }
        .zzColFixed-820 { width: 820px; }
        .zzColFixed-830 { width: 830px; }
        .zzColFixed-840 { width: 840px; }
        .zzColFixed-850 { width: 850px; }
        .zzColFixed-860 { width: 860px; }
        .zzColFixed-870 { width: 870px; }
        .zzColFixed-880 { width: 880px; }
        .zzColFixed-890 { width: 890px; }
        .zzColFixed-900 { width: 900px; }
        .zzColFixed-910 { width: 910px; }
        .zzColFixed-920 { width: 920px; }
        .zzColFixed-930 { width: 930px; }
        .zzColFixed-940 { width: 940px; }
        .zzColFixed-950 { width: 950px; }
        .zzColFixed-960 { width: 960px; }
        .zzColFixed-970 { width: 970px; }
        .zzColFixed-980 { width: 980px; }
        .zzColFixed-990 { width: 990px; }
        .zzColFixed-1000 { width: 1000px; }
        .zzColFixed-1010 { width: 1010px; }
        .zzColFixed-1020 { width: 1020px; }
        .zzColFixed-1030 { width: 1030px; }
        .zzColFixed-1040 { width: 1040px; }
        .zzColFixed-1050 { width: 1050px; }
        .zzColFixed-1060 { width: 1060px; }
        .zzColFixed-1070 { width: 1070px; }
        .zzColFixed-1080 { width: 1080px; }
        .zzColFixed-1090 { width: 1090px; }
        .zzColFixed-1100 { width: 1100px; }
        .zzColFixed-1110 { width: 1110px; }
        .zzColFixed-1120 { width: 1120px; }
        .zzColFixed-1130 { width: 1130px; }
        .zzColFixed-1140 { width: 1140px; }
        .zzColFixed-1150 { width: 1150px; }
        .zzColFixed-1160 { width: 1160px; }
        .zzColFixed-1170 { width: 1170px; }
        .zzColFixed-1180 { width: 1180px; }
        .zzColFixed-1190 { width: 1190px; }
        .zzColFixed-1200 { width: 1200px; }
        .zzColFixed-1210 { width: 1210px; }
        .zzColFixed-1220 { width: 1220px; }
        .zzColFixed-1230 { width: 1230px; }
        .zzColFixed-1240 { width: 1240px; }
        .zzColFixed-1250 { width: 1250px; }
        .zzColFixed-1260 { width: 1260px; }
        .zzColFixed-1270 { width: 1270px; }
        .zzColFixed-1280 { width: 1280px; }
        .zzColFixed-1290 { width: 1290px; }
        .zzColFixed-1300 { width: 1300px; }
        .zzColFixed-1310 { width: 1310px; }
        .zzColFixed-1320 { width: 1320px; }
        .zzColFixed-1330 { width: 1330px; }
        .zzColFixed-1340 { width: 1340px; }
        .zzColFixed-1350 { width: 1350px; }
        .zzColFixed-1360 { width: 1360px; }
        .zzColFixed-1370 { width: 1370px; }
        .zzColFixed-1380 { width: 1380px; }
        .zzColFixed-1390 { width: 1390px; }
        .zzColFixed-1400 { width: 1400px; }
        .zzColFixed-1410 { width: 1410px; }
        .zzColFixed-1420 { width: 1420px; }
        .zzColFixed-1430 { width: 1430px; }
        .zzColFixed-1440 { width: 1440px; }
        .zzColFixed-1450 { width: 1450px; }
        .zzColFixed-1460 { width: 1460px; }
        .zzColFixed-1470 { width: 1470px; }
        .zzColFixed-1480 { width: 1480px; }
        .zzColFixed-1490 { width: 1490px; }
        .zzColFixed-1500 { width: 1500px; }
        .zzColFixed-1510 { width: 1510px; }
        .zzColFixed-1520 { width: 1520px; }
        .zzColFixed-1530 { width: 1530px; }
        .zzColFixed-1540 { width: 1540px; }
        .zzColFixed-1550 { width: 1550px; }
        .zzColFixed-1560 { width: 1560px; }
        .zzColFixed-1570 { width: 1570px; }
        .zzColFixed-1580 { width: 1580px; }
        .zzColFixed-1590 { width: 1590px; }
        .zzColFixed-1600 { width: 1600px; }
        .zzColFixed-1610 { width: 1610px; }
        .zzColFixed-1620 { width: 1620px; }
        .zzColFixed-1630 { width: 1630px; }
        .zzColFixed-1640 { width: 1640px; }
        .zzColFixed-1650 { width: 1650px; }
        .zzColFixed-1660 { width: 1660px; }
        .zzColFixed-1670 { width: 1670px; }
        .zzColFixed-1680 { width: 1680px; }
        .zzColFixed-1690 { width: 1690px; }
        .zzColFixed-1700 { width: 1700px; }
        .zzColFixed-1710 { width: 1710px; }
        .zzColFixed-1720 { width: 1720px; }
        .zzColFixed-1730 { width: 1730px; }
        .zzColFixed-1740 { width: 1740px; }
        .zzColFixed-1750 { width: 1750px; }
        .zzColFixed-1760 { width: 1760px; }
        .zzColFixed-1770 { width: 1770px; }
        .zzColFixed-1780 { width: 1780px; }
        .zzColFixed-1790 { width: 1790px; }
        .zzColFixed-1800 { width: 1800px; }
        .zzColFixed-1810 { width: 1810px; }
        .zzColFixed-1820 { width: 1820px; }
        .zzColFixed-1830 { width: 1830px; }
        .zzColFixed-1840 { width: 1840px; }
        .zzColFixed-1850 { width: 1850px; }
        .zzColFixed-1860 { width: 1860px; }
        .zzColFixed-1870 { width: 1870px; }
        .zzColFixed-1880 { width: 1880px; }
        .zzColFixed-1890 { width: 1890px; }
        .zzColFixed-1900 { width: 1900px; }
        .zzColFixed-1910 { width: 1910px; }
        .zzColFixed-1920 { width: 1920px; }
        .zzColFixed-1930 { width: 1930px; }
        .zzColFixed-1940 { width: 1940px; }
        .zzColFixed-1950 { width: 1950px; }
        .zzColFixed-1960 { width: 1960px; }
        .zzColFixed-1970 { width: 1970px; }
        .zzColFixed-1980 { width: 1980px; }
        .zzColFixed-1990 { width: 1990px; }
        .zzColFixed-2000 { width: 2000px; }
    
        .zzColFixedH-10 { height: 10px; }
        .zzColFixedH-20 { height: 20px; }
        .zzColFixedH-30 { height: 30px; }
        .zzColFixedH-40 { height: 40px; }
        .zzColFixedH-50 { height: 50px; }
        .zzColFixedH-60 { height: 60px; }
        .zzColFixedH-70 { height: 70px; }
        .zzColFixedH-80 { height: 80px; }
        .zzColFixedH-90 { height: 90px; }
        .zzColFixedH-100 { height: 100px; }
        .zzColFixedH-110 { height: 110px; }
        .zzColFixedH-120 { height: 120px; }
        .zzColFixedH-130 { height: 130px; }
        .zzColFixedH-140 { height: 140px; }
        .zzColFixedH-150 { height: 150px; }
        .zzColFixedH-160 { height: 160px; }
        .zzColFixedH-170 { height: 170px; }
        .zzColFixedH-180 { height: 180px; }
        .zzColFixedH-190 { height: 190px; }
        .zzColFixedH-200 { height: 200px; }
        .zzColFixedH-210 { height: 210px; }
        .zzColFixedH-220 { height: 220px; }
        .zzColFixedH-230 { height: 230px; }
        .zzColFixedH-240 { height: 240px; }
        .zzColFixedH-250 { height: 250px; }
        .zzColFixedH-260 { height: 260px; }
        .zzColFixedH-270 { height: 270px; }
        .zzColFixedH-280 { height: 280px; }
        .zzColFixedH-290 { height: 290px; }
        .zzColFixedH-300 { height: 300px; }
        .zzColFixedH-310 { height: 310px; }
        .zzColFixedH-320 { height: 320px; }
        .zzColFixedH-330 { height: 330px; }
        .zzColFixedH-340 { height: 340px; }
        .zzColFixedH-350 { height: 350px; }
        .zzColFixedH-360 { height: 360px; }
        .zzColFixedH-370 { height: 370px; }
        .zzColFixedH-380 { height: 380px; }
        .zzColFixedH-390 { height: 390px; }
        .zzColFixedH-400 { height: 400px; }
        .zzColFixedH-410 { height: 410px; }
        .zzColFixedH-420 { height: 420px; }
        .zzColFixedH-430 { height: 430px; }
        .zzColFixedH-440 { height: 440px; }
        .zzColFixedH-450 { height: 450px; }
        .zzColFixedH-460 { height: 460px; }
        .zzColFixedH-470 { height: 470px; }
        .zzColFixedH-480 { height: 480px; }
        .zzColFixedH-490 { height: 490px; }
        .zzColFixedH-500 { height: 500px; }
        .zzColFixedH-510 { height: 510px; }
        .zzColFixedH-520 { height: 520px; }
        .zzColFixedH-530 { height: 530px; }
        .zzColFixedH-540 { height: 540px; }
        .zzColFixedH-550 { height: 550px; }
        .zzColFixedH-560 { height: 560px; }
        .zzColFixedH-570 { height: 570px; }
        .zzColFixedH-580 { height: 580px; }
        .zzColFixedH-590 { height: 590px; }
        .zzColFixedH-600 { height: 600px; }
        .zzColFixedH-610 { height: 610px; }
        .zzColFixedH-620 { height: 620px; }
        .zzColFixedH-630 { height: 630px; }
        .zzColFixedH-640 { height: 640px; }
        .zzColFixedH-650 { height: 650px; }
        .zzColFixedH-660 { height: 660px; }
        .zzColFixedH-670 { height: 670px; }
        .zzColFixedH-680 { height: 680px; }
        .zzColFixedH-690 { height: 690px; }
        .zzColFixedH-700 { height: 700px; }
        .zzColFixedH-710 { height: 710px; }
        .zzColFixedH-720 { height: 720px; }
        .zzColFixedH-730 { height: 730px; }
        .zzColFixedH-740 { height: 740px; }
        .zzColFixedH-750 { height: 750px; }
        .zzColFixedH-760 { height: 760px; }
        .zzColFixedH-770 { height: 770px; }
        .zzColFixedH-780 { height: 780px; }
        .zzColFixedH-790 { height: 790px; }
        .zzColFixedH-800 { height: 800px; }
        .zzColFixedH-810 { height: 810px; }
        .zzColFixedH-820 { height: 820px; }
        .zzColFixedH-830 { height: 830px; }
        .zzColFixedH-840 { height: 840px; }
        .zzColFixedH-850 { height: 850px; }
        .zzColFixedH-860 { height: 860px; }
        .zzColFixedH-870 { height: 870px; }
        .zzColFixedH-880 { height: 880px; }
        .zzColFixedH-890 { height: 890px; }
        .zzColFixedH-900 { height: 900px; }
        .zzColFixedH-910 { height: 910px; }
        .zzColFixedH-920 { height: 920px; }
        .zzColFixedH-930 { height: 930px; }
        .zzColFixedH-940 { height: 940px; }
        .zzColFixedH-950 { height: 950px; }
        .zzColFixedH-960 { height: 960px; }
        .zzColFixedH-970 { height: 970px; }
        .zzColFixedH-980 { height: 980px; }
        .zzColFixedH-990 { height: 990px; }
        .zzColFixedH-1000 { height: 1000px; }
        .zzColFixedH-1010 { height: 1010px; }
        .zzColFixedH-1020 { height: 1020px; }
        .zzColFixedH-1030 { height: 1030px; }
        .zzColFixedH-1040 { height: 1040px; }
        .zzColFixedH-1050 { height: 1050px; }
        .zzColFixedH-1060 { height: 1060px; }
        .zzColFixedH-1070 { height: 1070px; }
        .zzColFixedH-1080 { height: 1080px; }
        .zzColFixedH-1090 { height: 1090px; }
        .zzColFixedH-1100 { height: 1100px; }
        .zzColFixedH-1110 { height: 1110px; }
        .zzColFixedH-1120 { height: 1120px; }
        .zzColFixedH-1130 { height: 1130px; }
        .zzColFixedH-1140 { height: 1140px; }
        .zzColFixedH-1150 { height: 1150px; }
        .zzColFixedH-1160 { height: 1160px; }
        .zzColFixedH-1170 { height: 1170px; }
        .zzColFixedH-1180 { height: 1180px; }
        .zzColFixedH-1190 { height: 1190px; }
        .zzColFixedH-1200 { height: 1200px; }
        .zzColFixedH-1210 { height: 1210px; }
        .zzColFixedH-1220 { height: 1220px; }
        .zzColFixedH-1230 { height: 1230px; }
        .zzColFixedH-1240 { height: 1240px; }
        .zzColFixedH-1250 { height: 1250px; }
        .zzColFixedH-1260 { height: 1260px; }
        .zzColFixedH-1270 { height: 1270px; }
        .zzColFixedH-1280 { height: 1280px; }
        .zzColFixedH-1290 { height: 1290px; }
        .zzColFixedH-1300 { height: 1300px; }
        .zzColFixedH-1310 { height: 1310px; }
        .zzColFixedH-1320 { height: 1320px; }
        .zzColFixedH-1330 { height: 1330px; }
        .zzColFixedH-1340 { height: 1340px; }
        .zzColFixedH-1350 { height: 1350px; }
        .zzColFixedH-1360 { height: 1360px; }
        .zzColFixedH-1370 { height: 1370px; }
        .zzColFixedH-1380 { height: 1380px; }
        .zzColFixedH-1390 { height: 1390px; }
        .zzColFixedH-1400 { height: 1400px; }
        .zzColFixedH-1410 { height: 1410px; }
        .zzColFixedH-1420 { height: 1420px; }
        .zzColFixedH-1430 { height: 1430px; }
        .zzColFixedH-1440 { height: 1440px; }
        .zzColFixedH-1450 { height: 1450px; }
        .zzColFixedH-1460 { height: 1460px; }
        .zzColFixedH-1470 { height: 1470px; }
        .zzColFixedH-1480 { height: 1480px; }
        .zzColFixedH-1490 { height: 1490px; }
        .zzColFixedH-1500 { height: 1500px; }
        .zzColFixedH-1510 { height: 1510px; }
        .zzColFixedH-1520 { height: 1520px; }
        .zzColFixedH-1530 { height: 1530px; }
        .zzColFixedH-1540 { height: 1540px; }
        .zzColFixedH-1550 { height: 1550px; }
        .zzColFixedH-1560 { height: 1560px; }
        .zzColFixedH-1570 { height: 1570px; }
        .zzColFixedH-1580 { height: 1580px; }
        .zzColFixedH-1590 { height: 1590px; }
        .zzColFixedH-1600 { height: 1600px; }
        .zzColFixedH-1610 { height: 1610px; }
        .zzColFixedH-1620 { height: 1620px; }
        .zzColFixedH-1630 { height: 1630px; }
        .zzColFixedH-1640 { height: 1640px; }
        .zzColFixedH-1650 { height: 1650px; }
        .zzColFixedH-1660 { height: 1660px; }
        .zzColFixedH-1670 { height: 1670px; }
        .zzColFixedH-1680 { height: 1680px; }
        .zzColFixedH-1690 { height: 1690px; }
        .zzColFixedH-1700 { height: 1700px; }
        .zzColFixedH-1710 { height: 1710px; }
        .zzColFixedH-1720 { height: 1720px; }
        .zzColFixedH-1730 { height: 1730px; }
        .zzColFixedH-1740 { height: 1740px; }
        .zzColFixedH-1750 { height: 1750px; }
        .zzColFixedH-1760 { height: 1760px; }
        .zzColFixedH-1770 { height: 1770px; }
        .zzColFixedH-1780 { height: 1780px; }
        .zzColFixedH-1790 { height: 1790px; }
        .zzColFixedH-1800 { height: 1800px; }
        .zzColFixedH-1810 { height: 1810px; }
        .zzColFixedH-1820 { height: 1820px; }
        .zzColFixedH-1830 { height: 1830px; }
        .zzColFixedH-1840 { height: 1840px; }
        .zzColFixedH-1850 { height: 1850px; }
        .zzColFixedH-1860 { height: 1860px; }
        .zzColFixedH-1870 { height: 1870px; }
        .zzColFixedH-1880 { height: 1880px; }
        .zzColFixedH-1890 { height: 1890px; }
        .zzColFixedH-1900 { height: 1900px; }
        .zzColFixedH-1910 { height: 1910px; }
        .zzColFixedH-1920 { height: 1920px; }
        .zzColFixedH-1930 { height: 1930px; }
        .zzColFixedH-1940 { height: 1940px; }
        .zzColFixedH-1950 { height: 1950px; }
        .zzColFixedH-1960 { height: 1960px; }
        .zzColFixedH-1970 { height: 1970px; }
        .zzColFixedH-1980 { height: 1980px; }
        .zzColFixedH-1990 { height: 1990px; }
        .zzColFixedH-2000 { height: 2000px; }
    
        .zzColFixedHFlex-10 {
        height: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-20 {
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-30 {
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-40 {
        height: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-50 {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-60 {
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-70 {
        height: 70px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-80 {
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-90 {
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-100 {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-110 {
        height: 110px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-120 {
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-130 {
        height: 130px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-140 {
        height: 140px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-150 {
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-160 {
        height: 160px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-170 {
        height: 170px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-180 {
        height: 180px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-190 {
        height: 190px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-200 {
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-210 {
        height: 210px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-220 {
        height: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-230 {
        height: 230px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-240 {
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-250 {
        height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-260 {
        height: 260px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-270 {
        height: 270px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-280 {
        height: 280px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-290 {
        height: 290px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-300 {
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-310 {
        height: 310px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-320 {
        height: 320px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-330 {
        height: 330px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-340 {
        height: 340px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-350 {
        height: 350px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-360 {
        height: 360px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-370 {
        height: 370px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-380 {
        height: 380px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-390 {
        height: 390px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-400 {
        height: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-410 {
        height: 410px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-420 {
        height: 420px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-430 {
        height: 430px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-440 {
        height: 440px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-450 {
        height: 450px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-460 {
        height: 460px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-470 {
        height: 470px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-480 {
        height: 480px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-490 {
        height: 490px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-500 {
        height: 500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-510 {
        height: 510px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-520 {
        height: 520px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-530 {
        height: 530px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-540 {
        height: 540px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-550 {
        height: 550px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-560 {
        height: 560px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-570 {
        height: 570px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-580 {
        height: 580px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-590 {
        height: 590px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-600 {
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-610 {
        height: 610px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-620 {
        height: 620px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-630 {
        height: 630px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-640 {
        height: 640px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-650 {
        height: 650px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-660 {
        height: 660px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-670 {
        height: 670px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-680 {
        height: 680px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-690 {
        height: 690px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-700 {
        height: 700px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-710 {
        height: 710px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-720 {
        height: 720px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-730 {
        height: 730px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-740 {
        height: 740px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-750 {
        height: 750px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-760 {
        height: 760px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-770 {
        height: 770px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-780 {
        height: 780px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-790 {
        height: 790px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-800 {
        height: 800px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-810 {
        height: 810px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-820 {
        height: 820px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-830 {
        height: 830px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-840 {
        height: 840px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-850 {
        height: 850px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-860 {
        height: 860px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-870 {
        height: 870px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-880 {
        height: 880px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-890 {
        height: 890px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-900 {
        height: 900px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-910 {
        height: 910px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-920 {
        height: 920px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-930 {
        height: 930px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-940 {
        height: 940px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-950 {
        height: 950px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-960 {
        height: 960px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-970 {
        height: 970px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-980 {
        height: 980px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-990 {
        height: 990px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1000 {
        height: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1010 {
        height: 1010px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1020 {
        height: 1020px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1030 {
        height: 1030px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1040 {
        height: 1040px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1050 {
        height: 1050px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1060 {
        height: 1060px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1070 {
        height: 1070px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1080 {
        height: 1080px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1090 {
        height: 1090px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1100 {
        height: 1100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1110 {
        height: 1110px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1120 {
        height: 1120px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1130 {
        height: 1130px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1140 {
        height: 1140px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1150 {
        height: 1150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1160 {
        height: 1160px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1170 {
        height: 1170px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1180 {
        height: 1180px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1190 {
        height: 1190px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1200 {
        height: 1200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1210 {
        height: 1210px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1220 {
        height: 1220px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1230 {
        height: 1230px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1240 {
        height: 1240px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1250 {
        height: 1250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1260 {
        height: 1260px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1270 {
        height: 1270px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1280 {
        height: 1280px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1290 {
        height: 1290px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1300 {
        height: 1300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1310 {
        height: 1310px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1320 {
        height: 1320px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1330 {
        height: 1330px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1340 {
        height: 1340px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1350 {
        height: 1350px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1360 {
        height: 1360px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1370 {
        height: 1370px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1380 {
        height: 1380px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1390 {
        height: 1390px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1400 {
        height: 1400px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1410 {
        height: 1410px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1420 {
        height: 1420px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1430 {
        height: 1430px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1440 {
        height: 1440px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1450 {
        height: 1450px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1460 {
        height: 1460px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1470 {
        height: 1470px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1480 {
        height: 1480px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1490 {
        height: 1490px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1500 {
        height: 1500px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1510 {
        height: 1510px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1520 {
        height: 1520px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1530 {
        height: 1530px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1540 {
        height: 1540px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1550 {
        height: 1550px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1560 {
        height: 1560px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1570 {
        height: 1570px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1580 {
        height: 1580px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1590 {
        height: 1590px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1600 {
        height: 1600px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1610 {
        height: 1610px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1620 {
        height: 1620px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1630 {
        height: 1630px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1640 {
        height: 1640px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1650 {
        height: 1650px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1660 {
        height: 1660px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1670 {
        height: 1670px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1680 {
        height: 1680px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1690 {
        height: 1690px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1700 {
        height: 1700px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1710 {
        height: 1710px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1720 {
        height: 1720px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1730 {
        height: 1730px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1740 {
        height: 1740px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1750 {
        height: 1750px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1760 {
        height: 1760px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1770 {
        height: 1770px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1780 {
        height: 1780px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1790 {
        height: 1790px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1800 {
        height: 1800px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1810 {
        height: 1810px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1820 {
        height: 1820px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1830 {
        height: 1830px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1840 {
        height: 1840px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1850 {
        height: 1850px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1860 {
        height: 1860px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1870 {
        height: 1870px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1880 {
        height: 1880px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1890 {
        height: 1890px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1900 {
        height: 1900px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1910 {
        height: 1910px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1920 {
        height: 1920px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1930 {
        height: 1930px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1940 {
        height: 1940px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1950 {
        height: 1950px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1960 {
        height: 1960px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1970 {
        height: 1970px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1980 {
        height: 1980px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-1990 {
        height: 1990px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .zzColFixedHFlex-2000 {
        height: 2000px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .alignVMiddle {
        vertical-align: middle;
    }

	
		[class*="col-height200"] {
	    min-height: 200px;
	    display: table-cell;
	    vertical-align: bottom;       
	}

	[class*="col-height100"] {
    	min-height: 100px;
	    display: table-cell;
	    vertical-align: bottom;       
	}

		[class*="col-"] {
    	width: 100%;		
	}

	@media screen and (max-width: 768px) {
    	.hideMobile {
    		display: none;
    	}
	}

		@media only screen and (min-width: 1000px) {
		.col-1-12 {width: 8.33%;}
		.col-2-12 {width: 16.66%;}
		.col-3-12 {width: 25%;}
		.col-4-12 {width: 33.33%;}
		.col-5-12 {width: 41.66%;}
		.col-6-12 {width: 50%;}
		.col-7-12 {width: 58.33%;}
		.col-8-12 {width: 66.66%;}
		.col-9-12 {width: 75%;}
		.col-10-12 {width: 83.33%;}
		.col-11-12 {width: 91.66%;}
		.col-12-12 {width: 100%;}
		   
		.col-margin-1-12 {width: 6.33%;}
		.col-margin-2-12 {width: 14.66%;}
		.col-margin-3-12 {width: 23%;}
		.col-margin-4-12 {width: 31.33%;}
		.col-margin-5-12 {width: 39.66%;}
		.col-margin-6-12 {width: 48%;}
		.col-margin-7-12 {width: 56.33%;}
		.col-margin-8-12 {width: 64.66%;}
		.col-margin-9-12 {width: 73%;}
		.col-margin-10-12 {width: 81.33%;}
		.col-margin-11-12 {width: 89.66%;}
		.col-margin-12-12 {width: 100%;}
		
		.col-1-10 {width: 10%;}
		.col-2-10 {width: 20%;}
		.col-3-10 {width: 30%;}
		.col-4-10 {width: 40%;}
		.col-5-10 {width: 50%;}
		.col-6-10 {width: 60%;}
		.col-7-10 {width: 70%;}
		.col-8-10 {width: 80%;}
		.col-9-10 {width: 90%;}
		.col-10-10 {width: 100%;} 
		
		.col-margin-1-10 {width: 8%;}
		.col-margin-2-10 {width: 18%;}
		.col-margin-3-10 {width: 28%;}
		.col-margin-4-10 {width: 38%;}
		.col-margin-5-10 {width: 48%;}
		.col-margin-6-10 {width: 58%;}
		.col-margin-7-10 {width: 68%;}
		.col-margin-8-10 {width: 78%;}
		.col-margin-9-10 {width: 88%;}
		.col-margin-10-10 {width: 100%;}
	}
	
	.floatLeft {
		float:left;
	}
	
	.floatMid {
		float: none;
		margin: auto;
	}
	.floatRight {
		float: right;
	}
	
	
		.flexContainerNoWrap {
		display: flex;  		
	}
		
	.flexContainerJustify {
		display: flex;
  		flex-wrap: wrap; 		justify-content: space-between; 	}
	.flexContainerLeft {
		display: flex;
  		flex-wrap: wrap; 		justify-content: flex-start; 	}
		.zzCompCatDndItem {
		position: relative;
		cursor: default;
	}
	.zzCompCatDndItem.zzDndDragging {
		opacity: 0.68;
	}
	.zzCompCatDndHandle {
		cursor: grab;
		display: inline-block;
		margin-bottom: 6px;
		vertical-align: middle;
		-webkit-user-select: none;
		user-select: none;
		touch-action: none;
	}
	.zzCompCatDndHandle:active {
		cursor: grabbing;
	}
		.zzCompCatDndHandleRow {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 8px;
		margin-bottom: 6px;
	}
	.zzCompCatDndHandleRow .zzCompCatDndOrderPebble.zzAutoSaveStatus {
		position: static;
		top: auto;
		z-index: 1;
		margin: 0;
		flex: 0 1 auto;
		max-width: calc(100% - 40px);
		font-size: 12px;
		line-height: 1.25;
		padding: 4px 10px;
	}
		.flexContainerEnd {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-end;
	}
		.flexContainerLeft.settingsChartsStack > .settingsChartSection,
	.flexContainerCenter.settingsChartsStack > .settingsChartSection {
		flex: 1 1 100%;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

		.entriesTimelineUnscoredNote {
		vertical-align: baseline;
		margin: 0;
		padding: 0;
		font-weight: normal;
		font-size: inherit;
		line-height: inherit;
		color: #222222;
	}
	.entriesCompareSubtle {
		vertical-align: baseline;
	}

		.settingsDashboardSubhead {
		margin: 16px 0 8px 0;
		font-size: 1.05em;
		font-weight: bold;
		text-align: center;
	}
	.settingsDashboardGrid {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
		margin-bottom: 8px;
	}
	.settingsDashboardTile {
		flex: 1 1 160px;
		max-width: 280px;
		min-height: 88px;
		border-radius: 10px;
		border: 2px solid #DDDDDD;
		box-sizing: border-box;
		padding: 10px 12px;
		background: #FAFAFA;
	}
	.settingsDashboardTileOk {
		border-color: #2e7d32;
		background: #e8f5e9;
	}
	.settingsDashboardTileWarn {
		border-color: #f9a825;
		background: #fff8e1;
	}
	.settingsDashboardTileDanger {
		border-color: #c62828;
		background: #ffebee;
	}
	.settingsDashboardTileLink,
	.settingsDashboardTileStatic {
		display: block;
		height: 100%;
		text-decoration: none;
		color: inherit;
	}
	.settingsDashboardTileLink:hover {
		opacity: 0.92;
	}
	.settingsDashboardTileTitle {
		font-weight: bold;
		margin-bottom: 6px;
		font-size: 0.95em;
	}
	.settingsDashboardTileBody {
		font-size: 0.88em;
		line-height: 1.35;
	}
	.settingsDashboardItRow {
		text-align: center;
		margin: 8px 0 16px 0;
	}
	.settingsDashboardItBtn .settingsDashboardItDot {
		display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #c62828;
		vertical-align: middle;
		margin-right: 4px;
	}
	.settingsDashboardError {
		text-align: center;
		color: #666;
	}
	.settingsDashboardControls {
		max-width: 520px;
		margin: 0 auto 16px auto;
		padding: 12px 14px;
		border-radius: 10px;
		border: 1px solid #ccc;
		background: #fafafa;
		box-sizing: border-box;
	}
	.settingsDashboardControlRow {
		margin: 0;
		text-align: center;
		line-height: 1.45;
	}
	.settingsDashboardControlLabel {
		cursor: pointer;
		font-weight: bold;
	}
	.settingsDashboardControlTitle {
		font-weight: bold;
	}
	.settingsDashboardControlDesc {
		display: block;
		margin-top: 4px;
		font-size: 0.9em;
		font-weight: normal;
		color: #555;
	}
	.flexContainerSpaceAround {
		display: flex;
  		flex-wrap: wrap; 		justify-content: space-around;
	}	
	.flexContainerCenter {
		display: flex;
  		flex-wrap: wrap; 		justify-content: center; 	}
	
	.flexContainerVertSpaced {
  		display: flex;
  		flex-direction: column;
  		justify-content: space-between;
	}

    .flexAlignMiddle {         align-items: center;
        align-content: center;
    }

		.flexInlineCenter {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
		a.zzIconButton,
	button.zzIconButton {
		margin: 0;
		padding: 0;
		border: none;
		background: transparent;
		box-shadow: none;
		color: #4CBDF0;
		text-decoration: none;
		border-radius: 8px;
		cursor: pointer;
		font: inherit;
		line-height: 0;
		-webkit-appearance: none;
		appearance: none;
		transition: color 0.15s ease;
	}
	a.zzIconButton svg path,
	button.zzIconButton svg path {
		fill: currentColor;
	}
	a.zzIconButton:hover,
	button.zzIconButton:hover {
		color: #222222;
	}
	a.zzIconButton:focus-visible,
	button.zzIconButton:focus-visible {
		color: #222222;
		outline: 2px solid #222222;
		outline-offset: 2px;
	}
	.flexChildNoShrink {
		flex-shrink: 0;
	}

    .flexDivLower {

    }
    @media all and (max-width: 600px) {
        .flexDivLower {
            order: 9;
        }
    }
	
	
	.flexDiv1 {
			}
	.flexDivLR {
		padding: 0px 20px 0px 20px;			
	}
		
	.flexDivBorder {
		border: 2px solid #888888;
		border-radius: 8px;
		padding: 5px;
		margin: 5px;
	}

    .flexDivBorderD {
        border: 2px solid #DDDDDD;
        border-radius: 8px;
        padding: 5px;
        margin: 5px;
    }
	
	.flexDivBorderRounded {
		border: 2px solid #888888;
		border-radius: 10px;
		padding: 5px;
		margin: 5px;
	}

    .flexDivBorderRounded3 {
        border: 2px solid #333333;
        background-color: #333333;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }

    .divBorderRoundedD10 {
        border: 2px solid #DDDDDD;
        border-radius: 10px;
        padding: 0 10px 10px 10px;
        margin: 10px;
    }

    .divBorderRoundedD10M0 {
        border: 2px solid #DDDDDD;
        border-radius: 10px;
        padding: 0 10px 10px 10px;
        margin: 0px;
    }

    .zzBorder1 {
        border: 2px solid #111111;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder2 {
        border: 2px solid #222222;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder3 {
        border: 2px solid #333333;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder4 {
        border: 2px solid #444444;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder5 {
        border: 2px solid #555555;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder6 {
        border: 2px solid #666666;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder7 {
        border: 2px solid #777777;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder8 {
        border: 2px solid #888888;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorder9 {
        border: 2px solid #999999;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorderA {
        border: 2px solid #AAAAAA;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorderB {
        border: 2px solid #BBBBBB;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorderC {
        border: 2px solid #CCCCCC;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorderD {
        border: 2px solid #DDDDDD;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorderE {
        border: 2px solid #EEEEEE;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBorderF {
        border: 2px solid #FFFFFF;
        border-radius: 10px;
        padding: 5px;
        margin: 5px;
    }
    .zzBackground0 {
        background-color: #000000;
    }
    .zzBackground1 {
        background-color: #111111;
    }
    .zzBackground2 {
        background-color: #222222;
    }
    .zzBackground3 {
        background-color: #333333;
    }
    .zzBackground4 {
        background-color: #444444;
    }
    .zzBackground5 {
        background-color: #555555;
    }
    .zzBackground6 {
        background-color: #666666;
    }
    .zzBackground7 {
        background-color: #777777;
    }
    .zzBackground8 {
        background-color: #888888;
    }
    .zzBackground9 {
        background-color: #999999;
    }
    .zzBackgroundA {
        background-color: #AAAAAA;
    }
    .zzBackgroundB {
        background-color: #BBBBBB;
    }
    .zzBackgroundC {
        background-color: #CCCCCC;
    }
    .zzBackgroundD {
        background-color: #DDDDDD;
    }
    .zzBackgroundE {
        background-color: #EEEEEE;
    }
    .zzBackgroundF {
        background-color: #FFFFFF;
    }
    .zzBackgroundYellow {
        background-color: yellow;
    }
    .zzBackgroundOrange {
        background-color: darkorange;
    }
    .zzBackgroundOrangeRed {
        background-color: orangered;
    }
    .zzBackgroundRed {
        background-color: red;
    }
    .zzBackgroundRed2 {
        background-color: #E40000;
    }
    .zzBackgroundGreen {
        background-color: green;
    }
    .zzBackgroundGreenDark {
        background-color: darkgreen;
    }
    .zzBackgroundGreenDark2 {
        background-color: #002200;
    }
	
	.flexDivPadMar5 {
		padding: 5px;
		margin: 5px;
	}
		
	.flexDivHover, .flexDivHoverActive {
		padding: 5px;
		margin: 5px;
        cursor: pointer;
		border-style: solid;
		border-width: 1px;
		border-radius: 8px;
		box-sizing: border-box;		
	}
	
	.flexDivHover {		
		border-color: #DDDDDD;
        border-width: 2px;
	}
		
	.flexDivHover:hover, .flexDivHoverActive {
        border-width: 2px;
		border-color: #4cbdf0;		
	}

    .flexDivHoverOff {
        padding: 5px;
        margin: 5px;
        border-style: solid;
        border-width: 1px;
        border-radius: 8px;
        box-sizing: border-box;
        border-color: #DDDDDD;
        border-width: 2px;
    }

    /* Reusable card row pattern for nested checkbox sections */
    .itemCompCardRow {
        margin: 8px 0 12px 0;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 10px 12px;
        background: #fafafa;
    }
    .itemCompCardRowSelected {
		border: 1px solid #4a90e2;
		background-color: #f3f8ff;
  		border-radius: 8px;
		padding: 10px 12px;
        /* border-color: #4a90e2;
		background: #f3f8ff; */
    }

    /* Global autosave status styles */
    .zzAutoSaveStatus {
        position: sticky;
        top: 12px;
        z-index: 20;
        display: inline-block;
        padding: 6px 12px;
        border-radius: 999px;
        border: 1px solid #ccc;
        background: #f6f6f6;
        color: #333;
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 10px;
    }
    .zzAutoSaveStatusRight {
        position: sticky;
        top: 12px;
        z-index: 20;
        width: 100%;
        text-align: right;
        display: block;
        /* Prevent page jump when the badge appears (badge should overlay, not push content). */
        height: 0;
        overflow: visible;
        padding: 0;
        margin: 0;
    }
    .zzAutoSaveStatusRight .zzAutoSaveStatus {
        position: absolute; /* avoid affecting layout flow */
        right: 0;
        top: 0;
        margin: 0 !important; /* override global margin-bottom */
    }
    .zzAutoSaveStatusSaving {
        border-color: #d8b20a;
        background: #fff8dc;
        color: #6b5600;
    }
    .zzAutoSaveStatusSaved {
        border-color: #2f9e44;
        background: #e9f9ee;
        color: #1f6f30;
    }
    .zzAutoSaveStatusError {
        border-color: #b00020;
        background: #ffecef;
        color: #b00020;
    }
    .zzAutoSaveStatusDirty::after {
        content: " *";
        font-weight: 700;
    }

    /* CMS [GEN-rewards-details]: badge ladder + cutoff table */
    .zzRewardsDetailsBlock {
        margin: 1rem 0;
    }
    /* Wrapper only — headings and paragraphs use global site typography (same as CMS body). */
    .zzRewardsDetailsProse {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        margin: 0 0 1rem 0;
    }
    .zzRewardsDetailsBadges + .zzRewardsDetailsProse {
        margin-top: 0.25rem;
    }
    .zzRewardsDetailsBadges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        margin: 0 0 1.25rem 0;
    }
    .zzRewardsDetailsBadge {
        box-sizing: border-box;
        width: 180px;
        max-width: calc(50% - 8px);
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        background: rgba(255, 255, 255, 0.55);
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .zzRewardsDetailsBadge__media {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 120px;
        background: rgba(0, 0, 0, 0.03);
        padding: 10px;
    }
    .zzRewardsDetailsBadge__media img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 6px;
    }
    .zzRewardsDetailsBadge__placeholder {
        font-size: 13px;
        color: #777;
        padding: 20px 8px;
        text-align: center;
        display: block;
        width: 100%;
    }
    .zzRewardsDetailsBadge__body {
        padding: 10px 12px 14px;
    }
    .zzRewardsDetailsBadge__name {
        font-weight: 600;
    }
    .zzRewardsDetailsBadge__threshold {
        font-size: 0.95em;
        color: #444;
        margin-top: 4px;
    }
    .zzRewardsDetailsProse + .zzRewardsDetailsCutoffWrap {
        margin-top: 0.35rem;
    }
    .zzRewardsDetailsCutoffWrap {
        display: flex;
        justify-content: center;
        width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }
    .zzRewardsDetailsCutoffWrap .zzRewardsDetailsCutoffTable {
        margin-left: auto;
        margin-right: auto;
        width: auto;
        max-width: 100%;
        font-size: 1.125rem;
        line-height: 1.45;
    }
    .zzRewardsDetailsCutoffWrap .zzRewardsDetailsCutoffTable th,
    .zzRewardsDetailsCutoffWrap .zzRewardsDetailsCutoffTable td {
        padding: 14px 18px;
    }
    .zzRewardsDetailsCutoffWrap .zzRewardsDetailsCutoffTable thead th {
        font-size: 1.05em;
    }
    .zzRewardsDetailsCutoffBadgeCell {
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
    .zzRewardsDetailsCutoffBadgeCell img {
        display: block;
        margin: 0 auto;
        max-height: 96px;
        max-width: 96px;
        width: auto;
        height: auto;
        border-radius: 6px;
    }

    /* Grouped pill layout for settings forms */
    .settingsPillForm .zz33BoxDiv {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0;
        margin: 0 0 14px 0;
    }
    .settingsPillForm .zz33BoxDiv > h3 {
        margin: 0 0 8px 4px;
        padding: 0;
        border: none;
    }
    .settingsPillForm .zz33BoxDiv > p {
        margin: 0;
        padding: 10px 12px;
        background: #fff;
        border-left: 1px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
    }
    .settingsPillForm .zz33BoxDiv > p:first-of-type {
        border-top: 1px solid #e2e2e2;
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
    }
    .settingsPillForm .zz33BoxDiv > p:last-of-type {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    /* Comp cat edit — entry time overrides live in .compCatEntryOverrideFields; repeat pill chrome on inner rows and strip bottom radius from the toggle row when more segments follow */
    .settingsPillForm .zz33BoxDiv.zz33BoxDiv--compCatEntryTimes.zz33BoxDiv--entryOverridesOpen > p:last-of-type {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    .settingsPillForm .zz33BoxDiv.zz33BoxDiv--compCatEntryTimes .compCatEntryOverrideFields > p {
        margin: 0;
        padding: 10px 12px;
        background: #fff;
        border-left: 1px solid #e2e2e2;
        border-right: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
    }
    .settingsPillForm .zz33BoxDiv.zz33BoxDiv--compCatEntryTimes .compCatEntryOverrideFields > p:last-child {
        border-bottom-left-radius: 14px;
        border-bottom-right-radius: 14px;
    }
    .settingsPillForm .settingsPillRow {
        display: flex;
        align-items: flex-start;
        gap: 10px;
    }
    .settingsPillForm .settingsPillLabel {
        width: 300px;
        flex: 0 0 300px;
        padding-top: 6px;
    }
    .settingsPillForm .settingsPillMain {
        flex: 1 1 auto;
        min-width: 0;
        text-align: right;
    }
    .settingsPillForm .settingsPillHelp {
        display: block;
        width: 100%;
        text-align: right;
        margin-top: 4px;
    }
	/* For input fields with units, e.g. px or % */	
    .settingsPillForm .settingsPillLine {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }
    /* First line in each row is zz33_info_desc — can be long; nowrap would overflow the pill layout (e.g. Dropbox Web App Name). */
    .settingsPillForm .settingsPillMain > .settingsPillLine:first-of-type {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
        max-width: 100%;
        align-items: flex-start;
        flex-wrap: wrap;
    }
    .settingsPillForm .settingsCompSummary {
        display: block;
        text-align: left;
    }
    .settingsPillForm .settingsCompDiv {
        display: block;
        margin-left: 10px;
        margin-bottom: 3px;
        text-align: left;
    }
    .settingsPillForm .settingsCompCat {
        display: block;
        margin-left: 28px;
        margin-bottom: 2px;
        text-align: left;
    }
    .settingsPillForm .settingsPillRight {
        margin-left: auto;
        flex: 0 0 auto;
        padding-top: 2px;
    }
    .settingsPillForm .settingsPillMain > input[type="text"],
    .settingsPillForm .settingsPillMain > input[type="email"],
    /* .settingsPillForm .settingsPillMain > select, */
    .settingsPillForm .settingsPillMain > textarea {
        width: min(480px, 100%);
        box-sizing: border-box;
        margin-left: auto;
        display: block;
    }
    .settingsPillForm .settingsPillMain > input[type="number"],
    .settingsPillForm .settingsPillMain > input[type="datetime-local"] {
        /* width: min(300px, 100%); */
        box-sizing: border-box;
        margin-left: auto;
        display: block;
    }
    .settingsPillForm .settingsPillMain > textarea {
        min-height: 120px;
    }
    /* Modern info include: textarea in the Value column of the per-group zz33Table3. Halved height vs the older pill layout, */
    /* and we intentionally do NOT set a min-height so the rows="N" attribute wins (compact, matches other settings rows). */
    #infoModernWrap textarea.infoModernInput {
        width: min(42rem, 100%);
        max-width: 100%;
        box-sizing: border-box;
        vertical-align: top;
        resize: vertical;
    }
    /* Right-align the Value column so toggles, numbers, and selects line up with each other down the column. */
    /* Header th also gets right-aligned to match. Description and Setting columns stay left-aligned (defaults). */
    #infoModernWrap table.infoModernTable td:last-child,
    #infoModernWrap table.infoModernTable th:last-child {
        text-align: right;
    }
    /* Toggle slider defaults to inline-block, which interacts oddly with text-align on the cell; force it to end. */
    #infoModernWrap table.infoModernTable td:last-child .zzSliderLabel {
        display: inline-block;
    }
    /* Local tab bar when the modern info include has more than one zz33_info_group (separate from the app side menu). */
    #infoModernWrap .infoModernTabBar {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin: 0 0 16px 0;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, .12);
    }
    #infoModernWrap .infoModernTab {
        appearance: none;
        border: none;
        border-bottom: 3px solid transparent;
        padding: 10px 14px 8px;
        margin: 0 2px -1px 0;
        background: transparent;
        cursor: pointer;
        font: inherit;
        color: inherit;
        opacity: .85;
    }
    #infoModernWrap .infoModernTab:hover {
        opacity: 1;
        background: rgba(0, 0, 0, .04);
    }
    #infoModernWrap .infoModernTab.infoModernTabActive {
        opacity: 1;
        font-weight: 600;
        border-bottom-color: #555;
    }

    /* Select Team grid autosave hint (app-settings-comp-action.php): tiny text beside the checkbox you toggled */
    #compCatRoleTeamTableWrap .compCatRoleSaveStatus {
        display: inline-block;
        margin-left: 6px;
        font-size: 11px;
        white-space: nowrap;
        vertical-align: middle;
        min-width: 4.5em;
    }

    .settingsPillForm .settingsPillMain > label.zzSliderLabel {
        vertical-align: middle;
    }
    .settingsPillForm .settingsPillLabel img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    @media (max-width: 760px) {
        .settingsPillForm .settingsPillRow {
            flex-wrap: wrap;
        }
        .settingsPillForm .settingsPillLabel {
            width: 100%;
            flex-basis: 100%;
            padding-top: 0;
        }
        .settingsPillForm .settingsPillMain {
            width: 100%;
            flex-basis: 100%;
        }
        .settingsPillForm .settingsPillRight {
            width: 100%;
            margin-left: 0;
            padding-top: 0;
        }
        .settingsPillForm .settingsPillMain > input[type="text"],
        .settingsPillForm .settingsPillMain > input[type="email"],
        .settingsPillForm .settingsPillMain > input[type="number"],
        .settingsPillForm .settingsPillMain > input[type="datetime-local"],
        .settingsPillForm .settingsPillMain > select,
        .settingsPillForm .settingsPillMain > textarea {
            width: 100%;
            max-width: 100%;
            margin-left: 0;
        }
    }

    /* Settings pill toolbar grid (comp entries, users list, etc.): search full width, filter + sort side by side */
    .settingsPillForm.settingsPillToolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(320px, 1fr));
        gap: 12px;
        align-items: start;
    }
    .settingsPillForm.settingsPillToolbar > .zz33BoxDiv {
        margin: 0;
    }
    /* Span all columns (e.g. search row). Add to the zz33BoxDiv, not :first-of-type — avoids affecting other zz33BoxDiv contexts. */
    .settingsPillForm.settingsPillToolbar > .zz33BoxDiv.zz33BoxDivGridFullWidth {
        grid-column: 1 / -1;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillLabel {
        width: 150px;
        flex: 0 0 150px;
        padding-top: 6px;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillMain {
        text-align: left;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillMain > select {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        display: block;
        box-sizing: border-box;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillMain > input[type="date"] {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        display: block;
        box-sizing: border-box;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillInline {
        display: flex;
        gap: 6px;
        align-items: center;
        width: 100%;
        min-width: 0;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillInline > input[type="text"] {
        flex: 1 1 auto;
        min-width: 0;
        width: auto !important;
        max-width: none !important;
        margin-left: 0 !important;
        display: block;
        box-sizing: border-box;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillSectionH3 {
        margin: 0 0 8px 4px;
        padding: 0;
        border: none;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillSectionH3Btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        font: inherit;
        font-weight: bold;
        cursor: pointer;
        color: inherit;
        text-align: left;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillSectionH3Btn:focus-visible {
        outline: 2px solid #1976d2;
        outline-offset: 2px;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillSectionIndicator {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: transparent;
        flex-shrink: 0;
    }
    .settingsPillForm.settingsPillToolbar .settingsPillSectionBox--active .settingsPillSectionIndicator {
        background: #4CBDF0;
    }
    @media (max-width: 980px) {
        .settingsPillForm.settingsPillToolbar {
            grid-template-columns: 1fr;
        }
    }

        .zz33FilterPanel.zz33BoxDiv {
        border: 1px solid #e2e2e2;
        border-radius: 14px;
        overflow: hidden;
        background: #ffffff;
        box-sizing: border-box;
    }
    .zz33FilterPanel.zz33BoxDiv > .settingsPillSectionH3 {
        margin: 0;
        padding: 12px 14px 10px;
        border: none;
        background: #f7f8fa;
    }
    .zz33FilterPanel .zz33FilterPanel__inner {
        background: #f0f1f4;
        padding: 8px 0 12px;
    }
    .zz33FilterPanel .zz33FilterPanel__row.settingsPillRow {
        margin: 0;
        padding: 10px 12px;
        border: none;
        background: transparent;
    }
    .zz33FilterPanel .zz33FilterPanel__labelCell {
        display: flex;
        align-items: flex-start;
        padding-top: 4px;
    }
    .settingsPillForm.settingsPillToolbar .zz33FilterPanel .zz33FilterPanel__labelCell {
        width: 150px;
        flex: 0 0 150px;
    }
    .zz33FilterPanel__reset {
        display: inline-flex;
        align-items: center;
        gap: 0;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        font-family: Barlow,Arial,Helvetica,sans-serif;
        text-align: left;
        color: inherit;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }
    .zz33FilterPanel__reset:focus-visible {
        outline: 2px solid #1976d2;
        outline-offset: 2px;
        border-radius: 4px;
    }
    .zz33FilterPanel__reset:hover .zz33FilterPanel__resetLabel {
        text-decoration: underline;
    }
    .zz33FilterPanel__reset:active .zz33FilterPanel__resetLabel {
        opacity: 0.85;
    }
    .zz33FilterPanel__resetLabel {
        margin: 0;
        padding: 0;
        color: #4CBDF0;
        font-weight: 400;
        font-size: 24px;
        line-height: 1.25;
    }
    .zz33FilterPanel__bullet {
        display: block;
        width: 0;
        height: 8px;
        margin: 0;
        border-radius: 50%;
        flex-shrink: 0;
        opacity: 0;
        overflow: hidden;
        transition: width 0.12s ease, opacity 0.12s ease, margin-right 0.12s ease;
    }
    .zz33FilterPanel__reset.zz33FilterPanel__reset--dirty .zz33FilterPanel__bullet {
        width: 8px;
        margin-right: 8px;
        opacity: 1;
        background: #4CBDF0;
    }
    .settingsPillForm.settingsPillToolbar .zz33FilterPanel.settingsPillSectionBox--active.zz33BoxDiv {
        border-color: #4CBDF0;
    }
    @media (max-width: 760px) {
        .settingsPillForm.settingsPillToolbar .zz33FilterPanel .zz33FilterPanel__labelCell {
            width: 100%;
            flex-basis: 100%;
            padding-top: 0;
        }
    }

    /* Full reset row below pill toolbar (e.g. comp entries), above results */
    p.settingsPillClearAllBelow {
        margin: 10px 0 14px 4px;
    }

    /* New user modal (settings users): feedback + narrower labels */
    .newUserModalFeedback {
        padding: 10px 12px;
        border-radius: 10px;
        font-size: 14px;
    }
    .newUserModalFeedback--pending {
        background: #f5f5f5;
        color: #424242;
        border: 1px solid #e0e0e0;
    }
    .newUserModalFeedback--ok {
        background: #e8f5e9;
        color: #1b5e20;
        border: 1px solid #a5d6a7;
    }
    .newUserModalFeedback--err {
        background: #ffebee;
        color: #b71c1c;
        border: 1px solid #ef9a9a;
    }
    .newUserModalPillForm .settingsPillLabel {
        width: 240px;
        flex: 0 0 240px;
    }

    .imgGreyScale {
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
    }
    .imgGreyScaleActive, .imgGreyScale:hover {
        -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
        filter: grayscale(0%);
    }

    .flexDivRight {
        margin-left: auto;
        margin-right: 0;
    }

	
		.videoWrapper {
		float: none;
		clear: both;
		width: 100%;
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 25px;
		height: 0;
	}
	.videoWrapper iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	.youtubeContainer {
    	overflow: hidden;
    	width: 100%;
    	/* Keep it the right aspect-ratio */
    	aspect-ratio: 16/9;
    	/* No clicking/hover effects */
    	pointer-events: none;
	} 

	.youtubeContainer iframe {
    	/* Extend it beyond the viewport... */
	    width: 300%;
    	height: 100%;
	    /* ...and bring it back again */
    	margin-left: -100%;
	}

    .overlayImage {
        position: absolute;
        top: 50px;
        left: 150px;
        z-index: 1;
    }

    .google-maps {
         position: relative;
         padding-bottom: 75%; // This is the aspect ratio
     height: 0;
         overflow: hidden;
     }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
	
		
	.textOverImageBottom {
		text-align: center;
		position: absolute;
		bottom:0;
		left: 50%;
		transform: translate(-50%, -50%);
    }

    .imgCircleCrop {
        object-fit: cover;
        border-radius: 50%;
    }
	
	
		[class*="cleanButtons"] {
		text-decoration: none;
        cursor: pointer;
		text-align: center;
		box-sizing: border-box;
		display:inline-block;
		vertical-align: middle;
		border-style: solid;
		margin: 2px 0px 2px 0px;
		border-width: 1px;
		border-radius: 8px;
		padding: 4px 8px;
	}
	
	[class*="cleanButtons"]:link, [class*="cleanButtons"]:visited {
		text-decoration: none !important;
	}
	
	[class*="cleanButtons"] a:link, [class*="cleanButtons"] a:visited {
		text-decoration: none !important;
	}

	[class*="cleanButtonsPrimaryNormal"] {
		background-color: #4cbdf0;
		background-image: linear-gradient(to bottom, #4cbdf0,#4cbdf0);
		border-color: #4cbdf0;
		color: #eeeeee !important;
		box-shadow:inset 0px 1px 0px 0px #4cbdf0;
	}

	[class*="cleanButtonsPrimaryActive"], [class*="cleanButtonsPrimaryActive"]:hover, [class*="cleanButtonsPrimaryActive"]:active, [class*="cleanButtonsPrimaryActive"]:focus, [class*="cleanButtonsPrimaryNormal"]:hover, [class*="cleanButtonsPrimaryNormal"]:active, [class*="cleanButtonsPrimaryNormal"]:focus {
		background-color: #0097de;
		background-image: linear-gradient(to bottom, #0097de,#0097de);
		border-color: #0097de;
		color: #ffffff !important;
		box-shadow:inset 0px 1px 0px 0px #0097de;
	}

	[class*="cleanButtonsPrimaryDisabled"], [class*="cleanButtonsPrimaryDisabled"]:hover, [class*="cleanButtonsPrimaryDisabled"]:active, [class*="cleanButtonsPrimaryDisabled"]:focus {
		background-color: #cccccc;
		background-image: linear-gradient(to bottom, #cccccc,#cccccc);
		border-color: #cccccc;
		color: #aaaaaa !important;
		box-shadow:inset 0px 1px 0px 0px #cccccc;
	}

	[class*="cleanButtonsSecondaryNormal"] {
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #ffffff,#ffffff);
		border-color: #00aeff;
		color: #00aeff !important;
		box-shadow:inset 0px 1px 0px 0px #ffffff;
	}

	[class*="cleanButtonsSecondaryActive"], [class*="cleanButtonsSecondaryNormal"]:hover, [class*="cleanButtonsSecondaryNormal"]:active, [class*="cleanButtonsSecondaryNormal"]:focus {
		background-color: #ffffff;
		background-image: linear-gradient(to bottom, #ffffff,#ffffff);
		border-color: #0097de;
		color: #0097de !important;
		box-shadow:inset 0px 1px 0px 0px #ffffff;
	}

	[class*="cleanButtonsSecondaryDisabled"] {
		background-color: #eeeeee;
		background-image: linear-gradient(to bottom, #eeeeee,#eeeeee);
		border-color: #cccccc;
		color: #cccccc !important;
		box-shadow:inset 0px 1px 0px 0px #eeeeee;
	}

		[class*="cleanButtonsSecondaryDarkNormal"] {
		background-color: #404040;
		background-image: linear-gradient(to bottom, #404040,#404040);
		border-color: #002c40;
		color: #002c40 !important;
		box-shadow:inset 0px 1px 0px 0px #404040;
	}
	[class*="cleanButtonsSecondaryDarkActive"], [class*="cleanButtonsSecondaryDarkNormal"]:hover, [class*="cleanButtonsSecondaryDarkNormal"]:active, [class*="cleanButtonsSecondaryDarkNormal"]:focus {
		background-color: #404040;
		background-image: linear-gradient(to bottom, #404040,#404040);
		border-color: #002638;
		color: #002638 !important;
		box-shadow:inset 0px 1px 0px 0px #404040;
	}

	[class*="cleanButtonsDangerNormal"] {
		background-color: #e40000;
		background-image: linear-gradient(to bottom, #e40000,#e40000);
		border-color: #e40000;
		color: #eeeeee !important;
		box-shadow:inset 0px 1px 0px 0px #e40000;
	}

	[class*="cleanButtonsDangerActive"], [class*="cleanButtonsDangerNormal"]:hover, [class*="cleanButtonsDangerNormal"]:active, [class*="cleanButtonsDangerNormal"]:focus {
		background-color: #ff0000;
		background-image: linear-gradient(to bottom, #ff0000,#ff0000);
		border-color: #ff0000;
		color: #ffffff !important;
		box-shadow:inset 0px 1px 0px 0px #ff0000;
	}

	[class*="cleanButtonsDangerDisabled"] {
		background-color: #cccccc;
		background-image: linear-gradient(to bottom, #cccccc,#cccccc);
		border-color: #cccccc;
		color: #aaaaaa !important;
		box-shadow:inset 0px 1px 0px 0px #cccccc;
	}

		[class*="cleanButtonsPrimaryDisabledDark"], [class*="cleanButtonsPrimaryDisabledDark"]:hover, [class*="cleanButtonsPrimaryDisabledDark"]:active, [class*="cleanButtonsPrimaryDisabledDark"]:focus {
		background-color: #333333;
		background-image: linear-gradient(to bottom, #333333,#333333);
		border-color: #333333;
		color: #2b2b2b !important;
		box-shadow:inset 0px 1px 0px 0px #333333;
		cursor: not-allowed;
	}
	[class*="cleanButtonsSecondaryDisabledDark"], [class*="cleanButtonsSecondaryDisabledDark"]:hover, [class*="cleanButtonsSecondaryDisabledDark"]:active, [class*="cleanButtonsSecondaryDisabledDark"]:focus {
		background-color: #3c3c3c;
		background-image: linear-gradient(to bottom, #3c3c3c,#3c3c3c);
		border-color: #333333;
		color: #333333 !important;
		box-shadow:inset 0px 1px 0px 0px #3c3c3c;
		cursor: not-allowed;
	}
	[class*="cleanButtonsDangerDisabledDark"], [class*="cleanButtonsDangerDisabledDark"]:hover, [class*="cleanButtonsDangerDisabledDark"]:active, [class*="cleanButtonsDangerDisabledDark"]:focus {
		background-color: #333333;
		background-image: linear-gradient(to bottom, #333333,#333333);
		border-color: #333333;
		color: #2b2b2b !important;
		box-shadow:inset 0px 1px 0px 0px #333333;
		cursor: not-allowed;
	}

        [class*="cleanButtonsRedNormal"] {
        background-color: #E40000;
        background-image: linear-gradient(to bottom, #E40000, #E40000);
        border-color: #E40000;
        color: #EEEEEE !important;
        box-shadow:inset 0px 1px 0px 0px #E40000;
    }

    [class*="cleanButtonsRedActive"], [class*="cleanButtonsRedNormal"]:hover, [class*="cleanButtonsRedNormal"]:active, [class*="cleanButtonsRedNormal"]:focus {
        background-color: red;
        background-image: linear-gradient(to bottom, red, red);
        border-color: red;
        color: white !important;
        box-shadow:inset 0px 1px 0px 0px red;
    }

    [class*="cleanButtonsOrangeNormal"] {
        background-color: #E53E00;
        background-image: linear-gradient(to bottom, #E53E00, #E53E00);
        border-color: #E53E00;
        color: #EEEEEE !important;
        box-shadow:inset 0px 1px 0px 0px #E53E00;
    }

    [class*="cleanButtonsOrangeActive"], [class*="cleanButtonsOrangeNormal"]:hover, [class*="cleanButtonsOrangeNormal"]:active, [class*="cleanButtonsOrangeNormal"]:focus {
        background-color: orangered;
        background-image: linear-gradient(to bottom, orangered, orangered);
        border-color: orangered;
        color: white !important;
        box-shadow:inset 0px 1px 0px 0px orangered;
    }

    [class*="cleanButtonsGreenNormal"] {
        background-color: darkgreen;
        background-image: linear-gradient(to bottom, darkgreen, darkgreen);
        border-color: darkgreen;
        color: #EEEEEE !important;
        box-shadow:inset 0px 1px 0px 0px darkgreen;
    }

    [class*="cleanButtonsGreenActive"], [class*="cleanButtonsGreenNormal"]:hover, [class*="cleanButtonsGreenNormal"]:active, [class*="cleanButtonsGreenNormal"]:focus {
        background-color: green;
        background-image: linear-gradient(to bottom, green, green);
        border-color: green;
        color: white !important;
        box-shadow:inset 0px 1px 0px 0px green;
    }

    [class*="cleanButtonsRedDisabled"], [class*="cleanButtonsOrangeDisabled"], [class*="cleanButtonsGreenDisabled"] {
        background-color: #CCCCCC;
        background-image: linear-gradient(to bottom, #CCCCCC, #CCCCCC);
        border-color: #CCCCCC;
        color: #AAAAAA !important;
        box-shadow:inset 0px 1px 0px 0px #CCCCCC;
    }

	[class*="cleanButtonsSmall"] {
		font-size: 14px;
		font-weight: 400;
	}

	[class*="cleanButtonsMedium"] {
		font-size: 16px;
		font-weight: 400;
	}
	
	[class*="cleanButtonsLarge"] {
		font-size: 24px;
		font-weight: 400;
	}

    [class*="cleanButtonsXLarge"] {
        font-size: 36px;
        font-weight: 400;
    }
	
	[class*="cleanButtonsXXLarge"] {
		font-size: 48px;
		font-weight: 400;
	}
	
	.buttonHide {
		display:none;
	}
	
	
		
			
	table {  		
		border-collapse: collapse;
		margin: 0;
		padding: 0;		
	}
	
	.widthFull {
		width: 100%;
	}
    .widthHalf {
        width: 50%;
    }
    .width90PC {
        width: 90%;
    }
    .width80PC {
        width: 80%;
    }
    .width75PC {
        width: 75%;
    }
    .width67PC {
        width: 67%;
    }
    .width60PC {
        width: 60%;
    }
    .width55PC {
        width: 55%;
    }
    .width50PC {
        width: 50%;
    }
    .width45PC {
        width: 45%;
    }
    .width40PC {
        width: 40%;
    }
    .width33PC {
        width: 33%;
    }
    .width25PC {
        width: 25%;
    }
    .width20PC {
        width: 20%;
    }
    .width10PC {
        width: 10%;
    }

	
	.zz33Table0 {
		margin: 0;
		padding: 0;		
		word-break: normal;
		border-collapse:collapse;
        box-sizing: border-box;
		border: 0px;
		vertical-align: middle;
	}

	/* Plain layout table (no chrome); same baseline as .zz33Table0. */
	table.table0 {
		margin: 0;
		padding: 0;
		width: 100%;
		word-break: normal;
		border-collapse: collapse;
		box-sizing: border-box;
		border: 0;
		vertical-align: middle;
	}


        .zz33Table4 {
        margin: 0;
        word-break: normal;
        border-collapse:collapse;
        box-sizing: border-box;
        border: 2px #555555 solid;
        vertical-align: middle;
    }
    .zz33Table4 tbody {
        border: 2px #555555 solid;
    }
    .zz33Table4 tr {
        border: 2px #555555 solid;
        padding: 7px 7px 7px 7px;
        vertical-align: middle;
    }
    .zz33Table4 td, zz33Table4 th {
        padding: 7px 7px 7px 7px;
        vertical-align: middle;
    }

	
	
	.zz33Table3 {  		
		/* width: 100%; */
		margin: 0;
		padding: 0;
		font-size: 14px;
		word-break: normal;
		vertical-align: middle;
        border-collapse: collapse;
        box-sizing: border-box;
        /* border: 1px solid #DDDDDD; */

	}
	
	.zz33Table3 p {
		font-size: 14px;
		vertical-align: middle;
	}
	
	.zz33Table3 tbody {
		border: 1px solid #DDDDDD;
	}

	.zz33Table3Mobile {  		
		border-collapse: collapse;
		margin: 0;
		padding: 0;		
		word-break: normal;		
	}

	.zz33Table3 tr {
		background-color: #F8F8F8;
		border: 1px solid #DDDDDD;
		padding:7px 7px 7px 7px;
		vertical-align: middle;
	}
		
	.zz33Table3Mobile tr {
		background-color: #F8F8F8;
		border: 1px solid #DDDDDD;	
		vertical-align: middle;
	}
	
	.zz33Table3 td {		
	}
	
	.zz33Table3Mobile td {				
	}

    .zz33Table3 tr.tablePageNav, .zz33Table3Mobile tr.tablePageNav, .zz33Table3 td.tablePageNav, .zz33Table3Mobile td.tablePageNav {
		padding: 0px;
        background-color: #F8F8F8;
	}
	
	.zz33Table3 tr:nth-child(even),
	.zz33Table3Mobile tr:nth-child(even) {
    	background-color: #F8F8F8;
	}
	
	.zz33Table3 tr:nth-child(odd),
	.zz33Table3Mobile tr:nth-child(odd) {
    	background: #FDFDFD;
	}
		
	.zz33Table3 tr:hover,
	.zz33Table3Mobile tr:hover {
		background-color:#FFFF99 !important;
	}

	.zz33Table3 th, .zz33Table3 td,
	.zz33Table3Mobile th, .zz33Table3Mobile td {
		padding:7px 7px 7px 7px;
		/* border: 1px solid #DDDDDD; */
	}
	
	.zz33Table3 .thLeft {
		text-align:left;
	}
	
	.zz33Table3 .thCenter {
		text-align:center;
	}
	
	.zz33Table3 .thRight {
		text-align:right;
	}
		
	/* Header row only: tbody th (e.g. app-settings-users-api first column scope="row") must stay transparent so tr striping and tr:hover show through. */
	.zz33Table3 thead th,
	.zz33Table3Mobile thead th {
		font-weight: bold;
        background-color: #FDFDFD;
    }
	.zz33Table3 tbody th,
	.zz33Table3Mobile tbody th {
		font-weight: normal;
		background-color: transparent;
	}
    .zz33Table3 th.usersSortableTh {
        padding: 0;
    }
    .zz33Table3 th .usersSortBtn {
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        background: transparent;
        border: 0;
        padding: 7px;
        margin: 0;
        font: inherit;
        font-weight: 700;
        color: inherit;
        cursor: pointer;
        text-align: left;
    }
    .zz33Table3 th .usersSortBtn:hover,
    .zz33Table3 th .usersSortBtn:focus {
        text-decoration: underline;
        outline: none;
    }
    .zz33Table3 th .usersSortBtn.is-active .usersSortIndicator {
        font-weight: 700;
    }
    .zz33Table3 th .usersSortIndicator {
        opacity: 0.95;
        display: inline-block;
        margin-left: 2px;
        line-height: 1;
    }
	
	
	.zz33Table3Mobile {		
		width: 100%;
	}

  
	.zz33Table3Mobile tr.tableHeaders {
		border: none;
		clip: rect(0 0 0 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
	}
	
	.zz33Table3Mobile tr {
		border-bottom: 3px solid #DDDDDD;
		display: block;
		margin-bottom: 20px;
	}
	  
	.zz33Table3Mobile td {
		border-bottom: 1px solid #DDDDDD;
		display: block;			
		text-align: right;
	}
		  
	.zz33Table3Mobile td::before {
		content: attr(data-label);
		float: left;
		font-weight: bold;
	}
	
	.zz33Table3Mobile td:last-child {
		border-bottom: 0;
	}


    .zz33Table3 tr.noTable {
        background-color: inherit;
        border: none;
        padding:7px 7px 7px 7px;
        vertical-align: middle;
    }

    .zz33Table3 th.noTable {
        font-weight: normal;
        background-color: inherit;
    }



        .zzSticky {
        position: sticky;
        top: 0px;
    }
	
	.zz33BoxDiv {
		border: 1px solid #DDDDDD;
		padding: 1px 20px 1px 20px;
		border-radius: 8px;
	}
    .zz33BoxDivNoRounding {
        border: 1px solid #DDDDDD;
        padding: 1px 20px 1px 20px;
    }

        .zz33BoxDiv3 {
        border: 1px solid #DDDDDD;
        padding: 1px 20px 1px 20px;
        border-radius: 8px;
        background-color: #F8F8F8;
    }

        .zz33FramedCardTintPrimary {
        border: 2px solid #3a6ea5;
        border-left-width: 5px;
        border-left-color: #2d5a87;
        background: linear-gradient(165deg, #eef5fc 0%, #f7fafd 55%, #ffffff 100%);
        box-shadow: 0 2px 10px rgba(58, 110, 165, 0.14);
    }
    .zz33FramedCardTintMuted {
        border: 2px solid #c8ced6;
        border-left-width: 5px;
        border-left-color: #8f97a3;
        background: linear-gradient(165deg, #f0f1f4 0%, #f7f8f9 50%, #ffffff 100%);
        box-shadow: 0 1px 6px rgba(70, 78, 90, 0.08);
    }

            .zz33FramedCardSurface {
        border: 1px solid #d8d8d8;
        background-color: #ffffff;
        color: #1a1a1a;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 1px 2px rgba(0, 0, 0, 0.05);
    }
        .zz33FramedCardTintLive {
        border: 2px solid #a5d6a7;
        border-left-width: 5px;
        border-left-color: #2e7d32;
        background: linear-gradient(165deg, #e8f5e9 0%, #f1f8f4 48%, #ffffff 100%);
        color: #1a1a1a;
        box-shadow: 0 2px 10px rgba(46, 125, 50, 0.12);
    }
        .zz33FramedCardStackItem {
        margin-bottom: 12px;
    }

        .zzLoadingSpinner {
        width: 48px;
        height: 48px;
        border: 5px solid #4CBDF0;
        border-bottom-color: transparent;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }
    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }



    
    /* Customize the label (the container) */
    .zz-checkbox-4-container {
        /* display: block; */
        position: relative;
        padding-left: 35px;
        padding-top: 4px;
        /* padding-bottom: 12px; */
        cursor: pointer;
        font-size: 16px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* Hide the browser's default checkbox */
    .zz-checkbox-4-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .zz-checkbox-4-checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        border: 2px solid #4a90e2;
        background-color: #f3f8ff;
        border-radius: 5px;
    }

    /* On mouse-over, add a grey background color */
    .zz-checkbox-4-container:hover input ~ .zz-checkbox-4-checkmark {
        border: 2px solid #4CBDF0;
    }

    /* When the checkbox is checked, add a background */
    .zz-checkbox-4-container input:checked ~ .zz-checkbox-4-checkmark {
        background-color: #4CBDF0;
    }

    /* Create the zz-checkbox-4-checkmark/indicator (hidden when not checked) */
    .zz-checkbox-4-checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the zz-checkbox-4-checkmark when checked */
    .zz-checkbox-4-container input:checked ~ .zz-checkbox-4-checkmark:after {
        display: block;
    }

    /* Style the zz-checkbox-4-checkmark/indicator */
    .zz-checkbox-4-container .zz-checkbox-4-checkmark:after {
        left: 6px;
        top: 1px;
        width: 6px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    /* My Choices: table0 — col1 tick, col2 copy (override global checkbox padding/absolute box). */
    #userChoicesAutoSaveForm table.table0 td.choiceTickCol,
    .userAccountChoicesReadonly table.table0 td.choiceTickCol {
        width: 56px;
        padding: 0 12px 0 0;        
    }
    #userChoicesAutoSaveForm table.table0 td.choiceTextCol,
    .userAccountChoicesReadonly table.table0 td.choiceTextCol {
        padding: 0;        
    }
    #userChoicesAutoSaveForm table.table0 label.choiceCbLabel,
    .userAccountChoicesReadonly table.table0 label.choiceCbLabel {
        display: inline-block;
        padding: 0;
        margin: 0;        
    }
    /* Span is inline by default — without inline-block, width/height are ignored after position:relative (was a thin vertical stripe). */
    #userChoicesAutoSaveForm table.table0 label.choiceCbLabel .zz-checkbox-4-checkmark,
    .userAccountChoicesReadonly table.table0 label.choiceCbLabel .zz-checkbox-4-checkmark {
        display: inline-block;
        box-sizing: border-box;
        position: relative;
        left: auto;
        top: 0;
        width: 40px;
        height: 40px;
        border-width: 3px;
        border-radius: 6px;
    }
    #userChoicesAutoSaveForm table.table0 label.choiceCbLabel .zz-checkbox-4-checkmark:after,
    .userAccountChoicesReadonly table.table0 label.choiceCbLabel .zz-checkbox-4-checkmark:after {
        left: 12px;
        top: 5px;
        width: 9px;
        height: 17px;
        border-width: 0 4px 4px 0;
    }
    #userChoicesAutoSaveForm table.table0 label.choiceTextHit,
    .userAccountChoicesReadonly table.table0 label.choiceTextHit {
        display: block;
        margin: 0;
        padding: 0;
        cursor: pointer;
        font-weight: inherit;
        font-size: inherit;
    }
    #userChoicesAutoSaveForm table.table0 .choiceBody,
    .userAccountChoicesReadonly table.table0 .choiceBody {
        margin: 0;
        padding: 0;
    }
    #userChoicesAutoSaveForm table.table0 td.choiceTextCol .choiceTextColInner,
    .userAccountChoicesReadonly table.table0 td.choiceTextCol .choiceTextColInner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        justify-content: space-between;
    }
    #userChoicesAutoSaveForm table.table0 td.choiceTextCol .choiceTextHit,
    .userAccountChoicesReadonly table.table0 td.choiceTextCol .choiceTextHit {
        flex: 1 1 220px;
        min-width: 0;
    }
    #userChoicesAutoSaveForm .choiceExternalAwardFlowWrap,
    .userAccountChoicesReadonly .choiceExternalAwardFlowWrap {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .externalAwardPickThumbs {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: flex-start;
    }
    .externalAwardPickThumbTile img {
        max-width: 180px;
        height: auto;
        vertical-align: top;
    }
    .externalAwardEntryTiles {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        align-items: stretch;
    }
    .externalAwardEntryTile {
        border: 1px solid #4a90e2;
        border-radius: 6px;
        padding: 8px;
        background: #f3f8ff;
        max-width: 240px;
    }
    .externalAwardEntryTileLabel {
        display: block;
        cursor: pointer;
    }
    .externalAwardEntryTileVisual img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    .externalAwardEntryTileMeta {
        display: block;
        margin-top: 6px;
        font-size: 14px;
    }



		
			
	.zzSliderLabel {
		position: relative;
		display: inline-block;
		width: 35px;
		height: 20px;		
	}
	
		.zzSliderLabel input { 
		opacity: 0;
		width: 0;
		height: 0;
	}
	  
	.zzSlider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 20px;
		background-color: #777777;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
	  
	.zzSlider:before {
		position: absolute;
		content: "";
		height: 14px;
		width: 14px;
		left: 3px;
		bottom: 3px;
		border-radius: 50%;
		background-color: white;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}

	input:checked + .zzSlider {
		background-color: #4CBDF0;
	}
	
	input:checked + .zzSlider:before {
		-webkit-transform: translateX(15px);
		-ms-transform: translateX(15px);
		transform: translateX(15px);
	}
	
		.cleanTableStandard th.clientNotifyDhmCol,
	.cleanTableStandard td.clientNotifyDhmCell,
	.zz33Table3 th.clientNotifyDhmCol,
	.zz33Table3 td.clientNotifyDhmCell {
		white-space: nowrap;
		vertical-align: top;
	}
	.cleanTableStandard th.clientNotifyDhmColPoll,
	.cleanTableStandard td.clientNotifyDhmCellPoll,
	.zz33Table3 th.clientNotifyDhmColPoll,
	.zz33Table3 td.clientNotifyDhmCellPoll {
		padding-right: 1.35rem;
	}
	.cleanTableStandard th.clientNotifyDhmColSuppress,
	.cleanTableStandard td.clientNotifyDhmCellSuppress,
	.zz33Table3 th.clientNotifyDhmColSuppress,
	.zz33Table3 td.clientNotifyDhmCellSuppress {
		padding-left: 0.35rem;
	}
	
	.cleanTableStandard th.clientNotifyScheduleCol,
	.cleanTableStandard td.clientNotifyScheduleCell,
	.zz33Table3 th.clientNotifyScheduleCol,
	.zz33Table3 td.clientNotifyScheduleCell {
		vertical-align: top;
		max-width: 18rem;
	}
	.cleanTableStandard th.clientNotifyTimingCol,
	.cleanTableStandard td.clientNotifyTimingCell,
	.zz33Table3 th.clientNotifyTimingCol,
	.zz33Table3 td.clientNotifyTimingCell {
		vertical-align: top;
		max-width: 22rem;
		white-space: normal;
	}
	.clientNotifyAlertIntervalsBlock {
		display: block;
	}
	.clientNotifyIntervalRow {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 0.3rem;
		margin-top: 0.65rem;
	}
	.clientNotifyAlertIntervalsBlock > .clientNotifyIntervalRow:first-child {
		margin-top: 0;
	}
	.clientNotifyIntervalRowLabel {
		display: block;
		line-height: 1.2;
	}
	.clientNotifyScheduleBlock {
		max-width: 17rem;
	}
	.clientNotifyScheduleDaysRow {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.35rem 0.65rem;
		line-height: 1.35;
		margin: 0 0 0.5rem 0;
	}
	.clientNotifyScheduleDaysRow .clientNotifyScheduleSummaryText {
		font-weight: inherit;
		color: inherit;
	}
	.clientNotifyScheduleHourRow {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.35rem 0.5rem;
		margin: 0;
	}
	.clientNotifyScheduleHourLabelPlain {
		margin: 0;
		padding: 0;
		font-weight: inherit;
		color: inherit;
		cursor: pointer;
	}
	.clientNotifyScheduleHourSelect {
		margin: 0;
		max-width: 5rem;
		flex: 0 0 auto;
	}
	.clientNotifyScheduleHourRangeHint {
		flex: 0 0 auto;
		line-height: 1.2;
	}
	.clientNotifyScheduleDays,
	.clientNotifyScheduleModalDays {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0.65rem;
		align-items: center;
		margin: 0.35rem 0 0.25rem 0;
	}
	.clientNotifyScheduleDayLabel {
		white-space: nowrap;
		font-size: 0.92em;
	}
	.clientNotifyScheduleHint {
		margin: 0.4rem 0 0 0;
		line-height: 1.25;
	}
	.clientNotifyDhmGrid {
		display: inline-flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-end;
		gap: 0.5rem;
	}
	.clientNotifyDhmUnit {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		flex: 0 0 auto;
		width: 3.35rem;
	}
	.clientNotifyDhmUnit .clientNotifyDhmLabel {
		display: block;
		margin: 0 0 0.2rem 0;
		line-height: 1.2;
		white-space: nowrap;
	}
	.clientNotifyDhmUnit input.cleanFormField {
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
	}
	.clientNotifyDhmUnit input.clientNotifyDhmLocked {
		opacity: 0.72;
		cursor: not-allowed;
	}	
	.clientNotifyEnabledCell {
		vertical-align: middle;
		text-align: center;
	}
	.clientNotifyScheduleSummaryLine {
		line-height: 1.35;
		margin: 0 0 0.35rem 0;
	}
	  
	  
		.zzSliderRed {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 20px;
		background-color: #777777;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
	  
	.zzSliderRed:before {
		position: absolute;
		content: "";
		height: 14px;
		width: 14px;
		left: 3px;
		bottom: 3px;
		border-radius: 50%;
		background-color: white;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}

	input:checked + .zzSliderRed {
		background-color: #FF0000;
	}
	  	
	input:checked + .zzSliderRed:before {
		-webkit-transform: translateX(15px);
		-ms-transform: translateX(15px);
		transform: translateX(15px);
	}
		  
	  
		.zzSliderGrey {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: 20px;
		background-color: #CCCCCC;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}
		  
	.zzSliderGrey:before {
		position: absolute;
		content: "";
		height: 14px;
		width: 14px;
		left: 3px;
		bottom: 3px;
		border-radius: 50%;
		background-color: white;
		-webkit-transition: 0.3s;
		transition: 0.3s;
	}	  

	input:checked + .zzSliderGrey {
		background-color: #CCCCCC;
	}
	
	input:checked + .zzSliderGrey:before {
		-webkit-transform: translateX(15px);
		-ms-transform: translateX(15px);
		transform: translateX(15px);
	}
	  
		.zzSlider.zzSliderOffRedOnGreen {
		background-color: #c53030;
	}
	input:checked + .zzSlider.zzSliderOffRedOnGreen {
		background-color: #2e7d32;
	}

	.zzSliderRowStateWrap:not(:has(input[type="checkbox"]:checked)) .zzSliderRowStateCaption {
		color: #c62828;
	}
	.zzSliderRowStateWrap:has(input[type="checkbox"]:checked) .zzSliderRowStateCaption {
		color: #2e7d32;
	}
	  
		.alignSlider {
		line-height: 20px;
	}
	
    
    .zzTOCRow {
        display: grid;
        grid-template-columns: auto max-content;
        grid-template-areas: "zzTOCLeft zzTOCRight";
        align-items: end;
        gap: 0 .25rem;
    }

    .zzTOCLeft {
        grid-area: zzTOCLeft;
        position: relative;
        overflow: hidden;
    }

    .zzTOCLeft::after {
        position: absolute;
        padding-left: .25ch;
                content: " . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . "
        ". . . . . . . . . . . . . . . . . . . . . . . ";
        text-align: right;
    }

    .zzTOCRight {
        grid-area: zzTOCRight;
    }
	
	
		
	.zzFileListContainer {
		display: flex;
		flex-wrap: wrap;
	}

    .zzFileListContainerCenter {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }
	
	.zzFileListItemNormal {
		border: 2px solid #CCCCCC;
        border-radius: 8px;
		background-color: #EEEEEE;
		padding: 5px;
		margin: 5px;
	}
	
	.zzFileListItemFocus {
		border: 2px solid #333333;
        border-radius: 8px;
		background-color: #EEEEEE;
		padding: 5px;
		margin: 5px;
	}
	
	.zzFileListItemDetailsHide {
		display: none;
	}
	
	.zzFileListItemDetails {
        border-radius: 8px;
		border: 2px solid #BBBBBB;
	}
	
		
			  
		.zzClearFloats::after {
		content: "";
		clear: both;
		display: table;
	}

    @keyframes zzGlowing {
        0% {
            background-color: #E6E600;
            box-shadow: 0 0 5px #E6E600;
        }
        50% {
            background-color: #FFFF00;
            box-shadow: 0 0 50px #FFFF00;
        }
        100% {
            background-color: #E6E600;
            box-shadow: 0 0 5px #E6E600;
        }
    }
    .buttonGlowing {
        animation: zzGlowing 1000ms infinite;
    }
	
		.zzConfirmModalHide, .zzInsertModalHide, .zzImageModalHide {
		display: none; 		
	}
	
	.zzConfirmModalHide2, .zzInsertModalHide2, .zzImageModalHide2 {
		transform: translate(-9999px, 0)
	}
	
	.zzConfirmModalShow, .zzInsertModalShow, .zzImageModalShow {
		display: block; 		position: fixed; 		
		padding-top: 0px; 		left: 0;
		top: 0;
		width: 100%; 		height: 100%; 		overflow: auto; 		
	}	
	
	.zzConfirmModalShow, .zzInsertModalShow {
		z-index: 100; 		background-color: #444444; 		background-color: rgba(0,0,0,0.7); 		
	}
	
	.zzImageModalShow {
		z-index: 50; 		background-color: #222222;
        width: 100%;         height: 100%; 	}
	  
		.zzConfirmModalContent, .zzInsertModalContent  {
		background-color: #fefefe;
		margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
		padding: 20px;
		border: 1px solid #888;
		max-width: 90%;		
	}
	.zzConfirmModalContentWide, .zzInsertModalContentWide {
		background-color: #fefefe;
		margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
		padding: 20px;
		border: 1px solid #888;
		max-width: 90%;			
	}
	.zzConfirmModalContentNarrow, .zzInsertModalContentNarrow {
		background-color: #fefefe;
		margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
		padding: 20px;
		border: 1px solid #888;
		max-width: 300px;			
	}	
	.zzImageModelContent {
		background-color: #222222;
        color: #EEEEEE;
		margin: 0 auto;
		padding: 0px;
		width: 100%;
		height: 100%;
	}
    .zzImageModelContent p {
        color: #DDDDDD;
        font-size: 20px;
    }
			  
		.zzConfirmModalCloseX, .zzInsertModalCloseX {
		color: #111111;
		float: right;
		font-size: 32px;
		font-weight: bold;
	}
	
	.zzImageModalCloseX  {
                float: right;
        padding: 5px;
        font-size: 32px;
        font-weight: bold;
        border: 0px;
        z-index: 80; 	}

		.assetPickerModal {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 110;
		overflow: auto;
		box-sizing: border-box;
	}
	.assetPickerModal.is-open {
		display: block;
	}
	.assetPickerModal__backdrop {
		position: fixed;
		inset: 0;
		background-color: rgba(0,0,0,0.7);
		cursor: pointer;
		z-index: 111;
	}
	.assetPickerModal__dialog {
		position: relative;
		z-index: 112;
		background-color: #fefefe;
		margin: 3vh auto 24px;
		padding: 20px;
		border: 1px solid #888;
		max-width: min(1200px, 96vw);
		max-height: calc(100vh - 6vh);
		overflow: auto;
		box-sizing: border-box;
	}
	.assetPickerModal__head {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		margin-bottom: 12px;
	}
	.assetPickerModal__title {
		margin: 0;
	}
	.assetPickerModal__headActions {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		margin-left: auto;
	}
	.assetPickerModal__close {
		color: #111111;
		font-size: 32px;
		font-weight: bold;
		line-height: 1;
		cursor: pointer;
		border: 0;
		background: transparent;
		padding: 0;
	}
	.assetPickerModal__close:hover,
	.assetPickerModal__close:focus {
		color: #000000;
	}

		.zzUiModal {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 120;
	}
	.zzUiModal.is-open {
		display: block;
	}
	.zzUiModal__backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.64);
	}
	.zzUiModal__dialog {
		position: relative;
		box-sizing: border-box;
		width: min(720px, calc(100vw - 32px));
		max-height: calc(100vh - 32px);
		margin: 16px auto;
		background: #FFFFFF;
		border: 1px solid #CCCCCC;
		border-radius: 10px;
		box-shadow: 0 16px 48px rgba(0,0,0,0.28);
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.zzUiModal__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 12px 16px;
		border-bottom: 1px solid #E5E5E5;
	}
	.zzUiModal__title {
		margin: 0;
		font-size: 20px;
		line-height: 1.2;
	}
	.zzUiModal__close {
		background: transparent;
		border: 0;
		cursor: pointer;
		padding: 2px;
		border-radius: 6px;
	}
	.zzUiModal__close:focus-visible {
		outline: 2px solid #111111;
		outline-offset: 2px;
	}
	.zzUiModal__body {
		padding: 14px 16px;
		overflow: auto;
	}
	.zzUiModal__foot {
		padding: 12px 16px;
		border-top: 1px solid #E5E5E5;
		display: flex;
		justify-content: flex-end;
		gap: 8px;
	}
	.zzUiModalBodyLock {
		overflow: hidden;
	}

	/* Global session-expiry login overlay (shared across all page templates).
	   This intentionally sits above existing modal layers so a timed-out session cannot be missed. */
	.zzAuthOverlay {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 13000;
	}
	.zzAuthOverlay.is-open {
		display: block;
	}
	.zzAuthOverlay__backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.78);
	}
	.zzAuthOverlay__dialog {
		position: relative;
		box-sizing: border-box;
		width: min(420px, calc(100vw - 24px));
		max-height: calc(100vh - 24px);
		margin: 12px auto;
		padding: 12px 12px 10px 12px;
		border-radius: 10px;
		border: 1px solid #3A3A3A;
		background: #1E1E1E;
		color: #F1F1F1;
		box-shadow: 0 18px 48px rgba(0,0,0,0.5);
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.zzAuthOverlay__dialog h2 {
		margin: 0;
		font-size: 26px;
		line-height: 1.2;
	}
	.zzAuthOverlay__logoWrap {
		margin: 2px 0 0 0;
	}
	.zzAuthOverlay__logo {
		max-width: min(260px, 72%);
		max-height: 96px;
		width: auto;
		height: auto;
	}
	.zzAuthOverlay__status {
		margin: 0;
		color: #ACACAC;
		font-size: 15px;
	}
	.zzAuthOverlay__form {
		background: transparent;
		color: #F2F2F2;
		border-radius: 6px;
		padding: 0;
		border: 0;
	}
	.zzAuthOverlay__form p {
		margin: 0 0 12px 0;
	}
	.zzAuthOverlay__form b {
		color: #FFFFFF;
		font-weight: 400;
	}
	.zzAuthOverlay__form p:last-child {
		margin-bottom: 0;
	}
	/* Keep spacing consistent by removing global cleanButtons vertical margins in this modal only. */
	.zzAuthOverlay__form [class*="cleanButtons"] {
		margin: 0;
	}
	.zzAuthOverlay__form input[type="email"],
	.zzAuthOverlay__form input[type="password"] {
		display: block;
		width: 100%;
		margin-top: 6px;
		box-sizing: border-box;
		background: #111111;
		color: #F1F1F1;
		border: 1px solid #4A4A4A;
	}
	.zzAuthOverlay__form input[type="email"]:focus,
	.zzAuthOverlay__form input[type="password"]:focus {
		outline: 2px solid #4FC3F7;
		outline-offset: 0;
	}
	.zzAuthOverlay__form .cleanButtonsMedium,
	.zzAuthOverlay__form .cleanButtonsSmall {
		width: 100%;
	}
	.zzAuthOverlay__orLine {
		color: #AFAFAF;
		font-size: 14px;
		line-height: 1.2;
		letter-spacing: 0.02em;
	}
	.zzAuthOverlay__cancelLink {
		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;
		color: #C9C9C9;
		text-decoration: underline;
		text-underline-offset: 2px;
		cursor: pointer;
		font-size: 15px;
		line-height: 1.2;
	}
	.zzAuthOverlay__cancelLink:hover,
	.zzAuthOverlay__cancelLink:focus {
		color: #F0F0F0;
	}
	.zzAuthOverlayBodyLock {
		overflow: hidden;
	}

	/*
	 * Chromium autofill often keeps filled values “behind” user activation: polling input.value does not update until
	 * the user clicks/focuses, but :-webkit-autofill becomes true when the browser paints manager-filled fields.
	 * A zero-visual keyframes animation fires animationstart — JS listens and re-runs the Login button gate (see
	 * app-user-login.php / app-zz33-header.php). Standard mitigation for password-manager + disabled-button UX.
	 */
	@keyframes zzAuthAutofillExposeGate {
		from {
			opacity: 1;
		}
		to {
			opacity: 1;
		}
	}
	.zzAuthOverlay__form input.zzAuthAutofillProbe:-webkit-autofill {
		animation-name: zzAuthAutofillExposeGate;
		animation-duration: 1ms;
	}
	/*
	 * Firefox 94+: :autofill — same gate hook where supported (animation name matches WebKit path).
	 */
	.zzAuthOverlay__form input.zzAuthAutofillProbe:autofill {
		animation-name: zzAuthAutofillExposeGate;
		animation-duration: 1ms;
	}

	/*
	 * Standalone app-user-login page (popup markup skipped there): reuse overlay dialog visuals without a JS overlay.
	 * Scoped to #user-login so other templates are unaffected.
	 */
	#user-login .zzAuthLoginPageShell {
		position: relative;
		width: 100%;
		max-width: 100%;
		float: none !important;
		clear: both;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 24px 12px 40px;
		box-sizing: border-box;
		min-height: min(520px, calc(100vh - 140px));
	}
	/* Column already uses the same tone — avoid stacking a second rgba layer (would read darker only in the shell). */
	#user-login .zzAuthLoginPageShell__backdrop {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: transparent;
		z-index: 0;
	}
	#user-login .zzAuthLoginPageShell__dialog {
		position: relative;
		z-index: 1;
		margin-left: auto;
		margin-right: auto;
	}
	#user-login .zzAuthLoginPageShell--gateway .zzAuthLoginPageShell__gatewayInner {
		position: relative;
		z-index: 1;
		padding: 36px 16px 24px;
		max-width: 420px;
		margin: 0 auto;
	}
	#user-login .zzAuthLoginPageShell__homeLink {
		color: #C9C9C9;
		text-decoration: underline;
		text-underline-offset: 2px;
		font-size: 15px;
	}
	#user-login .zzAuthLoginPageShell__homeLink:hover,
	#user-login .zzAuthLoginPageShell__homeLink:focus {
		color: #F0F0F0;
	}
	#user-login .zzAuthLoginPageShell__dialogFoot {
		margin-top: 12px;
		margin-bottom: 0;
		text-align: center;
	}

    .zzImageCloseX {
        position: fixed;
        top: 0px;
        right: 0px;
        padding: 3px;
                font-size: 32px;
        font-weight: bold;
        border: 0px;
        z-index: 80;     }
	  
	.zzConfirmModalCloseX:hover,
	.zzConfirmModalCloseX:focus,
	.zzInsertModalCloseX:hover,
	.zzInsertModalCloseX:focus {
		color: #000000;
		text-decoration: none;
		cursor: pointer;
	}
	
	.zzImageModalCloseX:hover,
	.zzImageModalCloseX:focus {
		color: #FFFFFF;
		text-decoration: none;
		cursor: pointer;
	}
	
	.zzCompImgSlides {
		display:none;
		padding: 10px;
		margin: 0 auto;			
	}
	.zzCompImgTitles {
		display:none;
		color: #FFFFFF;		
		font-size: 28px;
	}
		
	.zzCompImgTitlesShow {
		color: #FFFFFF;		
		font-size: 28px;
	}

    .zzJudgeContainer{
        display:flex;
        flex-wrap: wrap;         justify-content: space-between;         background-color: #222222;
    }

        .zzJudgeDivImage {
        margin: 0 auto;
        display: block;
        background-color: #222222;
        padding: 30px 20px 0 30px;         width: 100%;
    }
        .compLiveJudgeContainer .zzJudgeDivImage {
        padding: 8px 16px 16px 16px;
        box-sizing: border-box;
    }
    .compLiveJudgeContainer .zzJudgeDivImage img.zoomImage {
        max-width: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        vertical-align: middle;
    }
    .compLiveJudgeContainer .zzJudgeDivImage .zoomContainer,
    .compLiveJudgeContainer .zzJudgeDivImage .zoomContainerNoZoom {
        max-width: 100%;
    }
    .compLiveJudgeContainer .zzJudgeDivInfo,
    .compLiveJudgeContainer .zzJudgeDivInfoChair,
    .compLiveJudgeContainer .zzJudgeDivInfoScribe {
        padding: 3px 4px 5px 4px;
    }
    /* Section “cards” use global .flexDivBorderRounded3 (#333). On comp-live the right column is #222, so #333 panels read as loud slabs; nudge fill + border toward the column so stacks feel calmer (judge/chair/scribe shell). */
    #judgeContainer.compLiveJudgeContainer .flexDivBorderRounded3 {
        background-color: #2a2a2a;
        border-color: #2a2a2a;
    }
    /* Stacked hub cards (pace, judged, signals, …): ~2× default .flexDivBorderRounded3 vertical margin so sections read more separated (judge/chair/scribe live). */
    #judgeContainer.compLiveJudgeContainer #judgeDivInfo1 > .flexDivBorderRounded3 {
        margin-top: 6px;
        margin-bottom: 6px;
    }
    #judgeContainer.compLiveJudgeContainer #judgeDivInfo1 > .flexDivBorderRounded3:first-of-type {
        margin-top: 3px;
    }

        .zzVariableOpacity {
        opacity: 100%;
        transition: opacity 0.1s;
    }

    .zzJudgeDivInfo, .zzJudgeDivInfoChair, .zzJudgeDivInfoScribe {
        margin: 0 auto;
        display: block;
        background-color: #222222;
        padding: 5px;
        width: 100%;
        opacity: 100%;
        transition: opacity 0.1s;
    }
    .zzVariableOpacity:hover, .zzVariableOpacity:focus{
        opacity: 100%;
        transition: opacity 0.1s;
    }

    @media only screen and (min-width: 1000px) {
        .zzJudgeDivImage {
            flex-grow: 1
                            position: -webkit-sticky; /* for Safari */
                position: sticky;
                top: 0;
                align-self: flex-start;
                    }
        /* comp-live (judge/chair/scribe): keep sticky behavior (left image should stay put),
           but use a small top offset so the sticky transition does not visibly "snap" upward. */
        .compLiveJudgeContainer .zzJudgeDivImage {
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 8px;
            align-self: flex-start;
        }
        .zzJudgeDivInfo {
            flex: 515px 0 0;         }
        .zzVariableOpacity {
            opacity: 15%;
        }
        .zzJudgeDivInfoChair {
            flex: 800px 0 0;         }
        .zzJudgeDivInfoScribe {
            flex: 1000px 0 0;         }
        .zzJudgeContainer {
            flex-wrap: nowrap;
        }
    }

        .compLiveTopBarRight {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        row-gap: 6px;
    }
    .compLiveTopBarRight .compLiveConnIcon,
    .compLiveTopBarRight .compLivePreloadBadge {
        margin-left: 0;
    }
    /* IT debug: all WiFi states in one row under the main top-bar controls (see compLiveDebugTogglePanel). */
    .compLiveTopBarRight .compLiveWifiDebugStrip {
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 8px 12px;
        margin-top: 2px;
        padding-top: 4px;
        border-top: 1px solid #3a3a3a;
    }
    .compLiveTopBarRight .compLivePreloadDebugStrip {
        flex-basis: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 8px 12px;
        margin-top: 0;
        padding-top: 2px;
    }
    .compLiveWifiDebugCell {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        line-height: 0;
    }
    .compLiveWifiDebugLabel {
        font-size: 9px;
        line-height: 1.1;
        text-transform: lowercase;
        letter-spacing: 0.02em;
    }
    /* Must beat the rule above: two-class .compLiveWifiDebugStrip { display:flex } otherwise overrides single .zzHide. */
    .compLiveTopBarRight .compLiveWifiDebugStrip.zzHide {
        display: none;
    }
    .compLiveTopBarRight .compLivePreloadDebugStrip.zzHide {
        display: none;
    }
    .compLiveTopBarReloadGroup {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        row-gap: 4px;
    }

    /* Judge raise-hand: same chrome as .zzCompJudgeScoreButton (chair hand buttons). Off = muted box + hand fill #404040 (matches bg, black stroke only reads). */
    button.compLiveRaiseHandButton.zzCompJudgeScoreButton {
        line-height: 0;
    }
    button.compLiveRaiseHandButton.zzCompJudgeScoreButton.compLiveRaiseHandButtonOff {
        background-color: #404040;
        border-color: #666666;
        color: #CCCCCC;
    }

    /* Judge #signalDiv: score buttons default to margin-right:10px for table grids — that skews the tile left vs captions.
       Symmetric auto margins + full-width icon row + stretched caption so labels read centered under each button. */
    #signalDiv button.compLiveRaiseHandButton.zzCompJudgeScoreButton {
        margin: 4px auto;
    }
    #signalDiv .compLiveSignalColumn {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 130px;
        min-width: 72px;
        gap: 4px;
    }
    #signalDiv .compLiveSignalIconRow {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        min-height: 58px;
    }
    #signalDiv .compLiveSignalCaption {
        display: block;
        align-self: stretch;
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        line-height: 1.25;
    }

    /* Chair signal strip: yellow (active) icons are icon-only buttons; muted icons stay non-interactive spans. */
    button.compLiveChairSignalIconBtn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        line-height: 0;
        vertical-align: middle;
    }
    button.compLiveChairSignalIconBtn:focus-visible {
        outline: 2px solid #6ea8ff;
        outline-offset: 2px;
    }

        .compLiveEntryInfoSection {
        margin-top: 10px;
    }
    .compLiveTopInfoRow {
        margin: 0 0 6px 0;
        line-height: 1.35;
    }
    /* Entry-meta labels (category/title/statement): subtle + non-bold for all comp-live roles.
       Judge keeps smaller overall text via zzCompTextP; chair/scribe keep larger zzCompTextH3. */
    .compLiveInfoMetaLabel {
        color: #555555;
        font-weight: normal;
    }
    /* Keep explicit chair/scribe selector for readability; values intentionally match the base label style above. */
    .compLiveEntryInfoSectionChairScribe .compLiveInfoMetaLabel {
        color: #555555;
        font-weight: normal;
    }

    /* Category / title / context: a bit more air (~½ line height between blocks) than user-info rows. */
    .compLiveEntryInfoSection #infoDiv.compLiveInfoMeta > p:not(.compLiveInfoMetaLead) {
        margin: 0.2em 0;
    }
    .compLiveEntryInfoSection #infoDiv.compLiveInfoMeta > p.compLiveInfoMetaLead {
        margin: calc(0.2em + 0.25lh) 0;
    }
    .compLiveEntryInfoSection #infoDiv.compLiveInfoMeta > p.compLiveInfoMetaLead:first-child {
        margin-top: 0;
    }
    .compLiveEntryInfoSection #infoDiv.compLiveInfoMeta > table {
        margin-top: 0.65em;
    }

    /* comp-live chair/scribe: pace card sits between top info and judges table; inner strip has no extra chrome. */
    .compLivePaceCard .compLivePaceStrip {
        margin: 0;
        padding: 0;
        border: none;
    }
    .compLivePaceStripInner {
        max-width: 100%;
    }
    /* One row: left | center | right (equal thirds so mid stays visually centered). */
    .compLivePaceRowStats {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: baseline;
        column-gap: 10px;
        font-size: 14px;
        line-height: 1.35;
        color: #888888;
        margin-bottom: 8px;
    }
    .compLivePaceCol {
        min-width: 0;
    }
    .compLivePaceColLeft {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 6px 12px;
        justify-content: flex-start;
        justify-self: start;
        text-align: left;
    }
    .compLivePaceColMid {
        justify-self: center;
        text-align: center;
    }
    .compLivePaceColRight {
        justify-self: end;
        text-align: right;
    }
    .compLivePaceStat {
        white-space: nowrap;
    }
    .compLivePaceStat strong,
    .compLivePaceNum {
        color: #cccccc;
        font-weight: 600;
    }
    .compLivePaceStat .compLivePaceFrac {
        color: #e8e8e8;
        font-weight: 600;
    }
    .compLivePaceStat .compLivePaceDim {
        color: #666666;
        font-weight: normal;
    }
    .compLivePaceSep {
        color: #555555;
        margin: 0 1px;
        font-weight: normal;
    }
    .compLivePaceClock {
        color: #999999;
        font-weight: normal;
        margin-left: 4px;
    }
    .compLivePacePlaceholder {
        color: #555555;
    }
    .compLivePaceTrack {
        --comp-live-pace-pct: 0;
        height: 4px;
        border-radius: 3px;
        background: #2e2e2e;
        overflow: hidden;
    }
    .compLivePaceTrackFill {
        height: 100%;
        width: calc(var(--comp-live-pace-pct, 0) * 1%);
        max-width: 100%;
        border-radius: 3px;
        background: linear-gradient(90deg, #4a5a6a 0%, #6a7a8a 100%);
        opacity: 0.55;
        transition: width 0.35s ease;
    }
    .compLivePaceStrip.compLivePaceStripLast .compLivePaceTrackFill {
        background: linear-gradient(90deg, #6a4a3a 0%, #8a6a5a 100%);
        opacity: 0.65;
    }

    /* comp-live chair/scribe: entry id in bottom-right of top info card (server: compLiveEntryId). */
    .compLiveTopInfoCard {
        position: relative;
    }
    .compLiveTopInfoCard .compLiveEntryInfoSection {
        /* Chair/scribe: keep the gap below title/statement in the same compact rhythm as the
           top spacer band used above the judges table (#allScoresDiv2). */
        padding-bottom: 0.6em;
    }
    .compLiveEntryIdCorner {
        position: absolute;
        right: 10px;
        bottom: 8px;
        font-size: 12px;
        line-height: 1.2;
        pointer-events: none;
        text-align: right;
    }

    /* comp-live chair/scribe: keep internal padding tight (below). Vertical margin between cards comes from
       #judgeContainer.compLiveJudgeContainer #judgeDivInfo1 > .flexDivBorderRounded3 (do not pin 5px here or it fights that rhythm). */
    .zzJudgeContainer .compLiveChairScribeCompactCard.flexDivBorderRounded3 {
        margin-left: 5px;
        margin-right: 5px;
    }
    .zzJudgeContainer .compLiveChairScribeCompactCard.padding10 {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    .zzJudgeContainer .compLiveChairScribeCompactCard > p.alignCenter.zzCompImgTitlesShow {
        margin-top: 2px;
        margin-bottom: 2px;
        line-height: 0.4;
        font-size: 6px;
    }
    .zzJudgeContainer .compLiveChairScribeCompactCard .zzCompTextH3 {
        margin-top: 0.35em;
        margin-bottom: 0.25em;
    }

    /* live-chair: spacing BETWEEN stacked cards is #judgeContainer… > .flexDivBorderRounded3 margins above.
       These rules normalize spacing INSIDE pace / judges / signals cards only. */
    #judgeContainer.compLiveJudgeContainer #compLivePaceCard.padding10,
    #judgeContainer.compLiveJudgeContainer #allScoresDiv2.padding10 {
        padding-top: 8px;
        padding-bottom: 8px;
    }
    #judgeContainer.compLiveJudgeContainer #compLivePaceCard > p.alignCenter.zzCompImgTitlesShow,
    #judgeContainer.compLiveJudgeContainer #allScoresDiv2 > p.alignCenter.zzCompImgTitlesShow {
        margin-top: 4px;
        margin-bottom: 4px;
        line-height: 0.7;
    }
    #judgeContainer.compLiveJudgeContainer #signalAllDiv.padding10 {
        padding-top: 4px;
        padding-bottom: 4px;
    }
    #judgeContainer.compLiveJudgeContainer #signalAllDiv > p.alignCenter.zzCompImgTitlesShow {
        margin-top: 1px;
        margin-bottom: 1px;
        line-height: 0.35;
    }

    /* comp-live scribe action row: flex + space-between on real children only (2–4 items). --soloNext: only Next visible. */
    #scribeActionDiv .compLiveScribeActionBar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        column-gap: 1rem;
        row-gap: 0.5rem;
    }
    #scribeActionDiv .compLiveScribeActionBar--soloNext {
        justify-content: flex-end;
    }
    #scribeActionDiv .compLiveScribeActionItem {
        flex: 0 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
    }
    #scribeActionDiv .compLiveScribeActionItem--conflicts {
        justify-content: flex-start;
        text-align: left;
    }
    #scribeActionDiv .compLiveScribeActionItem--preview {
        justify-content: center;
    }
    #scribeActionDiv .compLiveScribeActionItem--blank {
        justify-content: center;
    }
    #scribeActionDiv .compLiveScribeActionItem--next {
        justify-content: flex-end;
        text-align: right;
    }
    #scribeActionDiv .compLiveScribeActionItemBlock {
        margin: 0;
    }
    /* Preview controls: single horizontal row (Start | countdown | Stop). */
    #scribeActionDiv .compLiveScribePreviewStack {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    #scribeActionDiv .compLiveScribePreviewStack > .zzCompTextH3 {
        margin: 0;
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    #scribeActionDiv .compLiveScribeActionNextWrap {
        margin: 0;
    }
    /* Scribe image-nav tile states: skipped entries stay visibly distinct from completed/live. */
    .zzJudgeContainer #imageNavDiv .compLiveNavTileSkipped {
        background: #6A3F1F;
        border-color: #9A5B2B;
    }
    /* Scribe tile panel: expand selected image and expose explicit actions (Go Live / Skip). */
    .compLiveScribeEntryPanelBackdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.55);
        z-index: 10020;
    }
    .compLiveScribeEntryPanel {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: min(92vw, 620px);
        max-height: 92vh;
        overflow: auto;
        padding: 14px;
        border-radius: 10px;
        background: #1E1E1E;
        border: 1px solid #3B3B3B;
        box-shadow: 0 12px 26px rgba(0,0,0,0.45);
        z-index: 10021;
        text-align: center;
    }
    .compLiveScribeEntryPanelTitle {
        margin: 0 0 10px 0;
    }
    .compLiveScribeEntryPanelImageWrap {
        width: min(500px, 80vw);
        height: min(500px, 70vh);
        margin: 0 auto 12px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #141414;
        border: 1px solid #2D2D2D;
        border-radius: 8px;
        overflow: hidden;
    }
    .compLiveScribeEntryPanelImageWrap img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
    .compLiveScribeEntryPanelActions {
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 0.55rem;
        align-items: center;
        justify-content: center;
    }
    /* Critique scribe image strip: 1st/2nd/… share one muted bright grey so they stay secondary to order + entry id. */
    .zzJudgeContainer #imageNavDiv .compLiveCritiqueWaveOrdinal {
        font-size: 0.82em;
        font-weight: normal;
        margin-right: 0.15em;
        color: #BBBBBB;
    }
    /* Entry id in parentheses: match ordinal brightness (zzCompTextPDim alone is darker #777). */
    .zzJudgeContainer #imageNavDiv .compLiveCritiqueImageNavEntryId {
        color: #BBBBBB;
    }
    /* Staff auditing badge for comp entry "Skipped" state (outside live judging views). */
    .zzCompSkipBadge {
        display: inline-block;
        padding: 2px 7px;
        border-radius: 999px;
        font-size: 12px;
        line-height: 1.15;
        font-weight: 600;
    }
    .zzCompSkipBadge--on {
        background: #6A3F1F;
        color: #FFD7B8;
        border: 1px solid #9A5B2B;
    }
    .zzCompSkipBadge--off {
        background: #2A2A2A;
        color: #9C9C9C;
        border: 1px solid #3A3A3A;
    }
    /* Stream preview countdown between Start / Stop (live-scribe): secondary to the buttons. */
    #scribeActionDiv .compLiveStreamPreviewCountdown {
        display: inline-block;
        min-width: 3.25em;
        margin: 0;
        text-align: center;
        font-variant-numeric: tabular-nums;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.55);
    }

        .compLivePreloadBadge {
        --comp-live-preload-pct: 0;
        display: inline-flex;
        align-items: center;
        margin-left: 6px;
        vertical-align: middle;
        line-height: 0;
        opacity: 0.48;
        transition: opacity 0.2s ease, box-shadow 0.2s ease;
    }
    .compLivePreloadBadge.compLivePreloadBadgeActive {
        opacity: 0.62;
    }
    .compLivePreloadBadge.compLivePreloadBadgeZero {
        /* 0% / potentially stuck: no extra border ring; icon itself shifts to WiFi low color. */
        opacity: 0.78;
        box-shadow: none;
    }
    .compLivePreloadBadge.compLivePreloadBadgeDone {
        /* Done: full-strength muted green fill, still softer than bright white. */
        opacity: 1;
        box-shadow: none;
    }
    .compLivePreloadIconTrack {
        position: relative;
        width: 20px;
        height: 20px;
        display: inline-block;
    }
    .compLivePreloadIconBase {
        display: block;
        line-height: 0;
    }
    .compLivePreloadIconBase svg,
    .compLivePreloadIconFillInner svg {
        display: block;
        width: 20px;
        height: 20px;
    }
    .compLivePreloadIconFill {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: calc(var(--comp-live-preload-pct) * 1%);
        max-width: 100%;
        overflow: hidden;
        pointer-events: none;
        line-height: 0;
        transition: width 0.2s ease;
    }
    .compLivePreloadIconFillInner {
        display: block;
        width: 20px;
        height: 20px;
    }
    /* Preload state palette:
       zero (0%) = WiFi wait grey on the base icon (since fill width is 0%);
       active (1-99%) = neutral grey (similar brightness to prior tan) on ALL overlay parts;
       done (100%) = WiFi ok green on ALL overlay parts.
       !important is intentional to override inline stroke/fill attributes from generated SVG markup. */
    .compLivePreloadBadge.compLivePreloadBadgeZero .compLivePreloadIconBase svg [fill]:not([fill="none"]) {
        fill: #5A5A5A !important;
    }
    .compLivePreloadBadge.compLivePreloadBadgeZero .compLivePreloadIconBase svg [stroke] {
        stroke: #5A5A5A !important;
    }
    .compLivePreloadBadge.compLivePreloadBadgeActive .compLivePreloadIconFillInner svg [fill]:not([fill="none"]) {
        fill: #8A8A8A !important;
    }
    .compLivePreloadBadge.compLivePreloadBadgeActive .compLivePreloadIconFillInner svg [stroke] {
        stroke: #8A8A8A !important;
    }
    .compLivePreloadBadge.compLivePreloadBadgeDone .compLivePreloadIconFillInner svg [fill]:not([fill="none"]) {
        fill: #4B6D53 !important;
    }
    .compLivePreloadBadge.compLivePreloadBadgeDone .compLivePreloadIconFillInner svg [stroke] {
        stroke: #4B6D53 !important;
    }
        .compLiveConnIcon {
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        margin-left: 6px;
        line-height: 0;
    }
    .compLiveConnIcon svg {
        display: block;
    }

    .zzCompJudgeAwardNameText {
        /* padding: 3px; */
        color: #FFFFFF;
        font-size: 20px;
    }

    .zzCompJudgeGuideText {
        /* padding: 3px; */
        color: #AAAAAA;
        font-size: 14px;
    }

    .zzCompJudgeScoreButton {
        padding: 2px 5px;
        cursor: pointer;
        margin: 4px 10px 4px 0;
        color: #EEEEEE;
        border: 2px solid #EEEEEE;
        background-color: #505050;
        border-radius: 5px;
        font-size: 20px;
        font-family: 'Courier New', monospace;
        font-weight: bold;
    }

    .zzCompJudgeScoreButtonActive {
        padding: 2px 5px;
        cursor: pointer;
        margin: 4px 10px 4px 0;
        color: #000000;
        border: 2px solid #FFFFFF;
        /* background-color: #FFFF00; */
        background-color: limegreen;
        border-radius: 5px;
        font-size: 20px;
        font-family: 'Courier New', monospace;
        font-weight: bold;
    }

    .zzCompJudgeScoreButtonRed {
        padding: 2px 5px;
        cursor: pointer;
        margin: 4px 10px 4px 0;
        color: #EEEEEE;
        border: 2px solid #FF0000;
        background-color: #FF0000;
        border-radius: 5px;
        font-size: 20px;
        font-family: 'Courier New', monospace;
        font-weight: bold;
    }
	
	.zzCompImgSlidesShow {
		display:block;
		padding: 10px;
		margin: 0 auto;			
	}
	
	.zzCompScoreTile {
		display: block;
		text-align:center;
		color: #EEEEEE;
		/* background-color: #CCCCCC; */
		padding: 15px;
		/* width: 70px; */
		/* height: 70px; */
		font-size: 36px;
		border-radius: 8px;
	}
	
	.zzCompScoreTileA {
		display: block;
		text-align:center;
		background-color: #FFFFFF;
		padding: 15px;
		/* width: 70px; */
		/* height: 70px; */
		font-size: 36px;		
		border-radius: 8px;
	}
	
	.zzImageContainer {
		display: block;
		background-color: #222222;
		margin: 0 auto;		
		padding: 0px;		
	}

		#compLiveStreamPreviewOverlay {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	#compLiveStreamPreviewOverlay.zzHide {
		display: none;
	}
	
	.zzCompTextH1 {		
		color: #FFFFFF;		
		font-size: 42px;
        font-weight: 400;
	}
	
	.zzCompTextH2 {		
		color: #FFFFFF;		
		font-size: 30px;
	}
	
	.zzCompTextH3 {		
		color: #FFFFFF;		
		font-size: 20px;
	}

    .zzCompTextH3Dim {
        color: #777777;
        font-size: 20px;
    }
	
	.zzCompTextH4 {		
		color: #EEEEEE;
		font-size: 16px;
	}
	
	.zzCompTextP {		
		color: #DDDDDD;
		font-size: 14px;
	}

    .zzCompTextPDim {
        color: #777777;
        font-size: 14px;
        font-weight: normal;
    }
	
	.zzVoided {
		color: #AAAAAA;
	}
    .zzVoidedDark {
        color: #777777;
    }


    .img-magnifier-container {
        position:relative;
    }

    .img-magnifier-glass {
        position: absolute;
        border: 1px solid #777;
        border-radius: 50%;
        cursor: none;
        /*Set the size of the magnifier glass:*/
        width: 500px;
        height: 500px;
        z-index: 10;
    }

    .zoomContainer {
        background-position: 50% 50%;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
        cursor: zoom-in;
    }
    .zoomContainerNoZoom {
        background-position: 50% 50%;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;
    }

    .zoomImage {
        transition: opacity .5s;
        display: block;
    }

    .zoomImage:hover {
        /* opacity: 0; */
    }

	
		
		.dropdown {
    	position: relative;
    	display: inline-block;
	}
	
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #FFFFFF;
		min-width: 300px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		padding: 12px 16px;
		z-index: 1;
	}
	
	.dropdown:hover .dropdown-content {
		display: block;
	}
	
					
	
    .messageGreenFade {
        color: green;
        font-weight: bold;
    }
	
	.zzRed {
		color: red !important;
	}
    .zzOrangeRed {
        color: orangered !important;
    }
    .zzOrange {
        color: orange !important;
    }
    .zzYellow {
        color: yellow !important;
    }
	
	.zzGreen {
		color: green !important;
	}

    .zzLimeGreen {
        color: limegreen !important;
    }

    .zzBlueCF {
        color: cornflowerblue !important;
    }

    .zzWhite {
        color: white;
    }

    .zzWhiteImportant {
        color: white !important;
    }

    .zzDim {
        color: #777777;
    }

    .zzBGOrangePale {
        background-color:  #ffb195;
    }
	
			.zzGrey0 {
		color: #000000 !important;
		}
				.zzGrey1 {
		color: #111111 !important;
		}
				.zzGrey2 {
		color: #222222 !important;
		}
				.zzGrey3 {
		color: #333333 !important;
		}
				.zzGrey4 {
		color: #444444 !important;
		}
				.zzGrey5 {
		color: #555555 !important;
		}
				.zzGrey6 {
		color: #666666 !important;
		}
				.zzGrey7 {
		color: #777777 !important;
		}
				.zzGrey8 {
		color: #888888 !important;
		}
				.zzGrey9 {
		color: #999999 !important;
		}
				.zzGreyA {
		color: #AAAAAA !important;
		}
				.zzGreyB {
		color: #BBBBBB !important;
		}
				.zzGreyC {
		color: #CCCCCC !important;
		}
				.zzGreyD {
		color: #DDDDDD !important;
		}
				.zzGreyE {
		color: #EEEEEE !important;
		}
				.zzGreyF {
		color: #FFFFFF !important;
		}
				.zzBGGrey0 {
		background-color: #000000;
		}
				.zzBGGrey1 {
		background-color: #111111;
		}
				.zzBGGrey2 {
		background-color: #222222;
		}
				.zzBGGrey3 {
		background-color: #333333;
		}
				.zzBGGrey4 {
		background-color: #444444;
		}
				.zzBGGrey5 {
		background-color: #555555;
		}
				.zzBGGrey6 {
		background-color: #666666;
		}
				.zzBGGrey7 {
		background-color: #777777;
		}
				.zzBGGrey8 {
		background-color: #888888;
		}
				.zzBGGrey9 {
		background-color: #999999;
		}
				.zzBGGreyA {
		background-color: #AAAAAA;
		}
				.zzBGGreyB {
		background-color: #BBBBBB;
		}
				.zzBGGreyC {
		background-color: #CCCCCC;
		}
				.zzBGGreyD {
		background-color: #DDDDDD;
		}
				.zzBGGreyE {
		background-color: #EEEEEE;
		}
				.zzBGGreyF {
		background-color: #FFFFFF;
		}
				.zzBGGreyF0 {
		background-color: #F0F0F0;
		}
				.zzBGGreyF1 {
		background-color: #F1F1F1;
		}
				.zzBGGreyF2 {
		background-color: #F2F2F2;
		}
				.zzBGGreyF3 {
		background-color: #F3F3F3;
		}
				.zzBGGreyF4 {
		background-color: #F4F4F4;
		}
				.zzBGGreyF5 {
		background-color: #F5F5F5;
		}
				.zzBGGreyF6 {
		background-color: #F6F6F6;
		}
				.zzBGGreyF7 {
		background-color: #F7F7F7;
		}
				.zzBGGreyF8 {
		background-color: #F8F8F8;
		}
				.zzBGGreyF9 {
		background-color: #F9F9F9;
		}
				.zzBGGreyFA {
		background-color: #FAFAFA;
		}
				.zzBGGreyFB {
		background-color: #FBFBFB;
		}
				.zzBGGreyFC {
		background-color: #FCFCFC;
		}
				.zzBGGreyFD {
		background-color: #FDFDFD;
		}
				.zzBGGreyFE {
		background-color: #FEFEFE;
		}
				.zzBGGreyFF {
		background-color: #FFFFFF;
		}
		
    .zz33BoxWhite1 {
        background-color: rgba(255,255,255,0.1);
    }

    .zz33BoxWhite2 {
        background-color: rgba(255,255,255,0.2);
    }

    .zz33BoxWhite3 {
        background-color: rgba(255,255,255,0.3);
    }

    .zz33BoxWhite4 {
        background-color: rgba(255,255,255,0.4);
    }

    .zz33BoxWhite5 {
        background-color: rgba(255,255,255,0.5);
    }

    .zz33BoxWhite6 {
        background-color: rgba(255,255,255,0.6);
    }

    .zz33BoxWhite7 {
        background-color: rgba(255,255,255,0.7);
    }

    .zz33BoxWhite8 {
        background-color: rgba(255,255,255,0.8);
    }

    .zz33BoxWhite9 {
        background-color: rgba(255,255,255,0.9);
    }

    .zzBorder2 {
        border: 2px solid #222222;
    }


		
	.zzHighlight {
        background-color:#FFFF99 !important;
	}

    .zzHighlightDim{
        background-color:#FFFFCC !important;
    }
	
	.zzBold {
		font-weight:bold;
	}

    .zzBreakWord {
        word-wrap: break-word;
    }
	
		.alignLeft {
		text-align: left;
	}
	
	.alignRight {
		text-align: right;
	}
	
		.alignCenter {
		text-align: center;
	}
	
	.alignCenter2 {
		margin-left: auto;
		margin-right: auto;
	}
    .alignTop {
        vertical-align: top;
    }
    .alignBottom {
        vertical-align: bottom;
    }
		
	.zzMapContainer {
		width: 100%;  		
	  		}
	
	.zzIcon {        
        display: inline;
        position: relative;
        top: 2px;
    }
	
	.zzHide {
		display: none;
	}
	
	.hidden {
		display: none;
	}
	
	.padding0 {
		padding: 0px;
	}

    .padding5 {
        padding: 5px;
    }
	
	.padding10 {
		padding: 10px;
	}
	
	.padding20 {
		padding: 20px;
	}

    .padding30 {
        padding: 20px;
    }

    .padding40 {
        padding: 20px;
    }

    .padding50 {
        padding: 20px;
    }

    .padding1020 {
        padding: 10px 20px;
    }

    .padding1030 {
        padding: 10px 30px;
    }

    .padding1040 {
        padding: 10px 40px;
    }

    .padding1050 {
        padding: 10px 50px;
    }

    .padding1060 {
        padding: 10px 60px;
    }

    .padding1070 {
        padding: 10px 70px;
    }

    .padding1080 {
        padding: 10px 80px;
    }

    .padding1090 {
        padding: 10px 90px;
    }

    .margin0 {
        margin: 0px;
    }

    .margin5 {
        margin: 5px;
    }

    .margin10 {
        margin: 10px;
    }

    .margin20 {
        margin: 20px;
    }

    .zzDivRounded {
         border-radius: 8px;
    }
    .zzRoundedAuto {
        border-radius: 8px;
    }

        .zzRounded-1 { border-radius: 1px; }
        .zzRounded-2 { border-radius: 2px; }
        .zzRounded-3 { border-radius: 3px; }
        .zzRounded-4 { border-radius: 4px; }
        .zzRounded-5 { border-radius: 5px; }
        .zzRounded-6 { border-radius: 6px; }
        .zzRounded-7 { border-radius: 7px; }
        .zzRounded-8 { border-radius: 8px; }
        .zzRounded-9 { border-radius: 9px; }
        .zzRounded-10 { border-radius: 10px; }
        .zzRounded-11 { border-radius: 11px; }
        .zzRounded-12 { border-radius: 12px; }
        .zzRounded-13 { border-radius: 13px; }
        .zzRounded-14 { border-radius: 14px; }
        .zzRounded-15 { border-radius: 15px; }
        .zzRounded-16 { border-radius: 16px; }
        .zzRounded-17 { border-radius: 17px; }
        .zzRounded-18 { border-radius: 18px; }
        .zzRounded-19 { border-radius: 19px; }
        .zzRounded-20 { border-radius: 20px; }
        .zzRounded-21 { border-radius: 21px; }
        .zzRounded-22 { border-radius: 22px; }
        .zzRounded-23 { border-radius: 23px; }
        .zzRounded-24 { border-radius: 24px; }
        .zzRounded-25 { border-radius: 25px; }
        .zzRounded-26 { border-radius: 26px; }
        .zzRounded-27 { border-radius: 27px; }
        .zzRounded-28 { border-radius: 28px; }
        .zzRounded-29 { border-radius: 29px; }
        .zzRounded-30 { border-radius: 30px; }
        .zzRounded-31 { border-radius: 31px; }
        .zzRounded-32 { border-radius: 32px; }
        .zzRounded-33 { border-radius: 33px; }
        .zzRounded-34 { border-radius: 34px; }
        .zzRounded-35 { border-radius: 35px; }
        .zzRounded-36 { border-radius: 36px; }
        .zzRounded-37 { border-radius: 37px; }
        .zzRounded-38 { border-radius: 38px; }
        .zzRounded-39 { border-radius: 39px; }
        .zzRounded-40 { border-radius: 40px; }
        .zzRounded-41 { border-radius: 41px; }
        .zzRounded-42 { border-radius: 42px; }
        .zzRounded-43 { border-radius: 43px; }
        .zzRounded-44 { border-radius: 44px; }
        .zzRounded-45 { border-radius: 45px; }
        .zzRounded-46 { border-radius: 46px; }
        .zzRounded-47 { border-radius: 47px; }
        .zzRounded-48 { border-radius: 48px; }
        .zzRounded-49 { border-radius: 49px; }
        .zzRounded-50 { border-radius: 50px; }
        .zzRounded-51 { border-radius: 51px; }
        .zzRounded-52 { border-radius: 52px; }
        .zzRounded-53 { border-radius: 53px; }
        .zzRounded-54 { border-radius: 54px; }
        .zzRounded-55 { border-radius: 55px; }
        .zzRounded-56 { border-radius: 56px; }
        .zzRounded-57 { border-radius: 57px; }
        .zzRounded-58 { border-radius: 58px; }
        .zzRounded-59 { border-radius: 59px; }
        .zzRounded-60 { border-radius: 60px; }
        .zzRounded-61 { border-radius: 61px; }
        .zzRounded-62 { border-radius: 62px; }
        .zzRounded-63 { border-radius: 63px; }
        .zzRounded-64 { border-radius: 64px; }
        .zzRounded-65 { border-radius: 65px; }
        .zzRounded-66 { border-radius: 66px; }
        .zzRounded-67 { border-radius: 67px; }
        .zzRounded-68 { border-radius: 68px; }
        .zzRounded-69 { border-radius: 69px; }
        .zzRounded-70 { border-radius: 70px; }
        .zzRounded-71 { border-radius: 71px; }
        .zzRounded-72 { border-radius: 72px; }
        .zzRounded-73 { border-radius: 73px; }
        .zzRounded-74 { border-radius: 74px; }
        .zzRounded-75 { border-radius: 75px; }
        .zzRounded-76 { border-radius: 76px; }
        .zzRounded-77 { border-radius: 77px; }
        .zzRounded-78 { border-radius: 78px; }
        .zzRounded-79 { border-radius: 79px; }
        .zzRounded-80 { border-radius: 80px; }
        .zzRounded-81 { border-radius: 81px; }
        .zzRounded-82 { border-radius: 82px; }
        .zzRounded-83 { border-radius: 83px; }
        .zzRounded-84 { border-radius: 84px; }
        .zzRounded-85 { border-radius: 85px; }
        .zzRounded-86 { border-radius: 86px; }
        .zzRounded-87 { border-radius: 87px; }
        .zzRounded-88 { border-radius: 88px; }
        .zzRounded-89 { border-radius: 89px; }
        .zzRounded-90 { border-radius: 90px; }
        .zzRounded-91 { border-radius: 91px; }
        .zzRounded-92 { border-radius: 92px; }
        .zzRounded-93 { border-radius: 93px; }
        .zzRounded-94 { border-radius: 94px; }
        .zzRounded-95 { border-radius: 95px; }
        .zzRounded-96 { border-radius: 96px; }
        .zzRounded-97 { border-radius: 97px; }
        .zzRounded-98 { border-radius: 98px; }
        .zzRounded-99 { border-radius: 99px; }
        .zzRounded-100 { border-radius: 100px; }
    


    .zzDivRoundedTop {
        border-radius: 8px 8px 0px 0px;
    }

    .zzWaveBoxContainer {
        background-color: #555555;
    }

    .zzBGColourMainMenu {
        background-color: #555555;
    }

    .zzWaveBoxImage {
                mask-image: radial-gradient(
                ellipse
                130% 100%
                at 30% 180%,
                #00000000 99%,
                #000000 100%
        );
    }

    .zzNoUnderline, .zzNoUnderline:hover, a.zzNoUnderline, a.zzNoUnderline:hover  {
        text-decoration: none;
    }

	.cartCounter {  		
		-webkit-border-radius: 16px;
		-moz-border-radius: 16px;
		border-radius: 16px;
		font-size: 16px;
    	background: #4CBDF0;
    	color: #FFFFFF;
    	padding: 0 5px;
    	vertical-align: top;
    	margin-left: -10px;
	}

    .numberNav5 {
        padding: 0 5px;
        border-radius: 50%;
        border: 1px solid #4CBDF0;
        background: #4CBDF0;
        color: #FFFFFF;
        font-family: 'Courier New', monospace;
    }
    .numberNav1, .numberNav0 {
        padding: 0 5px;
        border-radius: 50%;
        border: 1px solid #4CBDF0;
        background: #FFFFFF;
        color: #4CBDF0;
        font-family: 'Courier New', monospace;
     }
        .numberNav9 {
        padding: 0 5px;
        border-radius: 50%;
        border: 1px solid #888888;
        background: #888888;
        color: #AAAAAA;
        font-family: 'Courier New', monospace;
    }
	
	
			
		.stripe-form {
	  width: 500px;
	  min-width: 500px;
	  align-self: center;
	  	  padding: 40px;
	}
	
	.hidden {
	  display: none;
	}
	
	#payment-message {
	  color: rgb(105, 115, 134);
	  font-size: 16px;
	  line-height: 20px;
	  padding-top: 12px;
	  text-align: center;
	}
	
	#payment-element {
	  margin-bottom: 24px;
	}
	
	/* Buttons and links */
	.stripe-button {	  
	  	  	  border-radius: 4px;
	  border: 0;
	  padding: 12px 16px;
	  font-size: 16px;
	  font-weight: 600;
	  cursor: pointer;
	  display: block;
	  transition: all 0.2s ease;
	  	  width: 100%;
	  	background-color: #4cbdf0;
		background-image: linear-gradient(to bottom, #4cbdf0,#4cbdf0);
		border-color: #4cbdf0;
		color: #eeeeee !important;
		box-shadow:inset 0px 1px 0px 0px #4cbdf0;
	}
	.stripe-button:hover {
	  filter: contrast(115%);
	}
	.stripe-button:disabled {
	  opacity: 0.5;
	  cursor: default;
	}
	
	/* spinner/processing state, errors */
	.spinner,
	.spinner:before,
	.spinner:after {
	  border-radius: 50%;
	}
	.spinner {
	  color: #ffffff;
	  font-size: 22px;
	  text-indent: -99999px;
	  margin: 0px auto;
	  position: relative;
	  width: 20px;
	  height: 20px;
	  box-shadow: inset 0 0 0 2px;
	  -webkit-transform: translateZ(0);
	  -ms-transform: translateZ(0);
	  transform: translateZ(0);
	}
	.spinner:before,
	.spinner:after {
	  position: absolute;
	  content: "";
	}
	.spinner:before {
	  width: 10.4px;
	  height: 20.4px;
	  background: #5469d4;
	  border-radius: 20.4px 0 0 20.4px;
	  top: -0.2px;
	  left: -0.2px;
	  -webkit-transform-origin: 10.4px 10.2px;
	  transform-origin: 10.4px 10.2px;
	  -webkit-animation: loading 2s infinite ease 1.5s;
	  animation: loading 2s infinite ease 1.5s;
	}
	.spinner:after {
	  width: 10.4px;
	  height: 10.2px;
	  background: #5469d4;
	  border-radius: 0 10.2px 10.2px 0;
	  top: -0.1px;
	  left: 10.2px;
	  -webkit-transform-origin: 0px 10.2px;
	  transform-origin: 0px 10.2px;
	  -webkit-animation: loading 2s infinite ease;
	  animation: loading 2s infinite ease;
	}
	
	@-webkit-keyframes loading {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	}
	@keyframes loading {
	  0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	  }
	  100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	  }
	}
	
	@media only screen and (max-width: 600px) {
	  .stripe-form {
		width: 500px;
			  }
	}

/* Shared layout for app-settings-assets.php and app-settings-assets-picker-modal.php */
.assetsV3Layout {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.assetsV3TopRow {
  display: flex;
  gap: 14px;
  align-items: stretch;
  flex-wrap: wrap;
}
.assetsV3Panel {
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 14px;
  padding: 12px;
}
.assetsV3Panel h3 {
  margin: 0 0 10px 0;
}
.assetsV3Small {
  font-size: 13px;
  color: #666;
}
.assetsV3Row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.assetsV3Row input[type="text"] {
  flex: 1 1 auto;
  min-width: 140px;
}
.assetsV3BtnRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.assetsV3Drop {
  border: 2px dashed #cfcfcf;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  background: #fafafa;
}
.assetsV3Drop.isDrag {
  background: #f3f8ff;
  border-color: #9ab8ff;
}
.assetsV3Queue {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assetsV3QueueItem {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 10px;
}
.assetsV3QueueItem strong {
  display: block;
}
.assetsV3QueueItem input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}
.assetsV3GridBar {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.assetsV3Grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
/* Portfolio hub (user-account-portfolio): reuse assets tiles; meta always visible; drag reorder */
.portfolioHubAssetsLayout .portfolioGridBarThreeCol {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.portfolioHubAssetsLayout .portfolioGridBarLeft {
  justify-self: start;
  min-width: 0;
}
.portfolioHubAssetsLayout .portfolioGridBarCenter {
  margin: 0;
  justify-self: center;
  text-align: center;
  color: #555;
}
.portfolioHubAssetsLayout .portfolioGridBarRight {
  justify-self: end;
}
.portfolioHubAssetsLayout .assetsV3Card {
  cursor: grab;
}
.portfolioHubAssetsLayout .assetsV3Card.dragging {
  cursor: grabbing;
  opacity: 0.9;
}
.portfolioHubAssetsLayout .assetsV3Details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.portfolioHubAssetsLayout .assetsV3Thumb {
  height: 160px;
}
/* Portfolio upload: same pattern as app-single-image-picker acknowledgement (user-account-photo). */
.portfolioHubAssetsLayout .portfolioUploadAckWrap {
  margin-top: 14px;
  max-width: 42rem;
}
.portfolioHubAssetsLayout .portfolioUploadAckLabel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.45;
  color: #222;
}
.portfolioHubAssetsLayout .portfolioUploadAckLabel input[type="checkbox"] {
  margin-top: 0.2em;
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
}
.portfolioHubAssetsLayout .portfolioUploadAckText {
  flex: 1;
  min-width: 0;
}
.assetsV3Card {
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.assetsV3Thumb {
  height: 140px;
  background: #f6f6f6;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: 10px;
  box-sizing: border-box;
}
.assetsV3Thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.assetsV3Meta {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assetsV3Name {
  font-size: 13px;
  color: #222;
  word-break: break-word;
}
.assetsV3UploadedLine {
  font-size: 12px;
  color: #777;
}
.assetsV3Details {
  display: none;
}
.assetsV3Card.expanded .assetsV3Details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.assetsV3Card.expanded .assetsV3Thumb {
  height: 220px;
}
.assetsV3Actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.assetsV3Desc {
  width: 100%;
  box-sizing: border-box;
}
.assetsV3Pager {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.assetsV3CountPagerRow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.assetsV3CountPagerRow .assetsV3Count {
  grid-column: 1;
  margin: 0;
  font-weight: 700;
}
.assetsV3CountPagerRow .assetsV3Count.assetsV3Count--loading {
  font-weight: 400;
  font-style: italic;
  color: #4CBDF0;
}
.assetsV3CountPagerRow .assetsV3Pager {
  grid-column: 2;
  margin-top: 0;
}
.assetsV3CountPagerRow .assetsV3Pager button {
  margin-top: 0;
}
.assetsV3RowMuted td,
.assetsV3RowMuted th {
	background-color: #f7f3f3;
}

/* Table row: brief green pulse after inline save / success (use zzRowFlashGreen() in app-zz33-header.php). */
@keyframes zzRowFlashGreenKey {
	0% { background-color: transparent; }
	25% { background-color: #c8e6c9; }
	100% { background-color: transparent; }
}
tr.zzRowFlashGreen > td,
tr.zzRowFlashGreen > th {
	animation: zzRowFlashGreenKey 0.65s ease-in-out;
}

.usersMergedTag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #d8b0b0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #8a1f1f;
  background-color: #fff6f6;
  vertical-align: middle;
}
/* app-settings-users-api: profile or portfolio image(s) awaiting staff approval (pairs with image moderation filter). */
.usersImageModPendingBadge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border: 1px solid #b8c4d8;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #1a3a6e;
  background-color: #eef3fa;
  vertical-align: middle;
  white-space: nowrap;
}
/* app-settings-users-api: photo + name open user edit (orders column uses same secondary button style). */
.zz33Table3 .usersListAvatarEditLink {
  display: inline-block;
  text-decoration: none;
  line-height: 0;
  border-radius: 50%;
}
.zz33Table3 .usersListAvatarEditLink:focus-visible {
  outline: 2px solid #1a3a6e;
  outline-offset: 2px;
}
.zz33Table3 .usersListNameEditLink {
  text-align: left;
  font-weight: 700;
}
@media (max-width: 760px) {
  .assetsV3CountPagerRow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .assetsV3CountPagerRow .assetsV3Pager {
    margin-top: 8px;
  }
}
.assetsV3TopRow .assetsV3Panel {
  flex: 1 1 320px;
}
@media (max-width: 980px) {
  .assetsV3Layout {
    flex-direction: column;
  }
  .assetsV3TopRow {
    flex-direction: column;
  }
}
/* =========================================================================================
   START Greenfield user-account hub + public profile (append-only; scoped wrappers only)
   ========================================================================================= */
/* Staff "view as" banner: sticky under body so it stays visible while scrolling the hub. */
.zzHubViewAsBanner {
  position: sticky;
  top: 0;
  z-index: 12000;
  width: 100%;
  box-sizing: border-box;
  /* High-visibility staff warning strip (amber/orange) */
  background: #ffc107;
  color: #1a1a1a;
  border-bottom: 3px solid #e65100;
  padding: 10px 14px;
  font-size: 0.95rem;
  line-height: 1.35;
}
.zzHubViewAsBanner a {
  color: #0d47a1;
}
.zzHubViewAsBannerInner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.zzHubViewAsBannerText {
  flex: 1 1 220px;
}
.zzHubViewAsBannerExit {
  flex: 0 0 auto;
}

/* Profile photo moderation: owner/staff see a dimmed image + ribbon so B&W uploads still read as “pending”. */
.zzUserProfilePhotoAvatar--pendingModeration {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.zzUserProfilePhotoAvatar--pendingModeration .zzUserProfilePhotoAvatar__img {
  filter: grayscale(0.35) contrast(0.65) brightness(0.92);
  opacity: 0.55;
}
.zzUserProfilePhotoAvatar--pendingModeration::after {
  content: "Pending approval";
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(80, 80, 80, 0.92);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  text-align: center;
  z-index: 2;
}
/* Staff rejected: distinct from pending (amber/dark label) so “failed moderation” reads even on B&W photos. */
.zzUserProfilePhotoAvatar--rejectedModeration {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.zzUserProfilePhotoAvatar--rejectedModeration .zzUserProfilePhotoAvatar__img {
  filter: grayscale(0.45) contrast(0.55) brightness(0.88);
  opacity: 0.5;
}
.zzUserProfilePhotoAvatar--rejectedModeration::after {
  content: "Failed moderation";
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  max-width: 92%;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(130, 55, 20, 0.94);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  text-align: center;
  z-index: 2;
}
/* Blocked placeholder: same grey glyph as empty state, diagonal strike for “not shown publicly”. */
.zzUserProfilePhotoAvatar__placeholderFace--blocked::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 2px),
    rgba(180, 30, 30, 0.88) calc(50% - 1px),
    rgba(180, 30, 30, 0.88) calc(50% + 1px),
    transparent calc(50% + 2px)
  );
  pointer-events: none;
  z-index: 1;
}
/* Portfolio hub: pending tiles use same “pending approval” treatment as the thumb. */
.portfolioHubAssetsLayout .assetsV3Thumb--moderationPending {
  position: relative;
}
.portfolioHubAssetsLayout .assetsV3Thumb--moderationPending img {
  filter: grayscale(0.35) contrast(0.65) brightness(0.92);
  opacity: 0.55;
}
.portfolioHubAssetsLayout .assetsV3Thumb--moderationPending::after {
  content: "Pending approval";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  background: rgba(80, 80, 80, 0.92);
  pointer-events: none;
  text-align: center;
  z-index: 2;
}
.portfolioHubAssetsLayout .assetsV3Thumb--moderationRejected {
  position: relative;
}
.portfolioHubAssetsLayout .assetsV3Thumb--moderationRejected img {
  filter: grayscale(0.45) contrast(0.55) brightness(0.88);
  opacity: 0.5;
}
.portfolioHubAssetsLayout .assetsV3Thumb--moderationRejected::after {
  content: "Failed moderation";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  padding: 2px 4px;
  border-radius: 3px;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: #fff;
  background: rgba(130, 55, 20, 0.94);
  pointer-events: none;
  text-align: center;
  z-index: 2;
}

.userAccountHub,
.publicProfilePage {
  font-family: inherit;
}
.userAccountHubLayout {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
}
.userAccountHubNav {
  flex: 0 0 220px;
  max-width: 100%;
}
.userAccountHubNavList {
  list-style: none;
  margin: 0;
  padding: 12px;
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  background: #fafafa;
}
.userAccountHubNavList li {
  margin: 0 0 8px 0;
}
.userAccountHubNavList a {
  display: block;
  padding: 6px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: #1a3a6e;
}
.userAccountHubNavList a.userAccountHubNavActive {
  background: #e8f0ff;
  font-weight: 700;
}
.userAccountHubMain {
  flex: 1 1 480px;
  min-width: 0;
}
.userAccountHubCard {
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  padding: 18px 20px;
  margin-bottom: 16px;
  background: #fff;
}
.userAccountHubCard h2 {
  margin-top: 0;
}
/* My Public Profile (user-account-profile): sections are flush on the page — no bordered panels; keep class names for JS and heading layout. */
.hubProfileLiveRoot .userAccountHubCard {
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
.hubProfileLiveRoot > .userAccountHubCard {
  margin-bottom: 1.75rem;
}
.hubProfileLiveRoot > .userAccountHubCard:last-child {
  margin-bottom: 0;
}
.hubProfileLiveRoot .userAccountHubCard.hubProfileCvSubCard {
  /* Nested CV blocks were already “flat”; ensure no residual card radius from .userAccountHubCard. */
  border-radius: 0;
}
/* Competitions hub: major entitlement/shop group is an h3 + its own table; category sub-blocks stay inside that table. */
.userAccountHubCompMajorGroup {
  margin-bottom: 1.75em;
}
.userAccountHubCompMajorGroup:last-child {
  margin-bottom: 0;
}
.userAccountHubCompGroupHeading {
  margin: 0 0 0.5em 0;
  font-size: 1.15rem;
}
.userAccountHubCompGroupTable {
  width: 100%;
}
.userAccountHubCompPick {
  margin: 0 0 16px 0;
}
/* My Awards: grey band is the full .row.userAccountHub (not per-competition trays). */
.row.userAccountHub.userAccountHub--awardsShell {
  background-color: #eef0f4;
  padding-top: 20px;
  padding-bottom: 32px;
  box-sizing: border-box;
}
/* Award Summary hub: no outer card — competition h2 + masonry-style columns for entry tiles (CSS columns pack variable heights; order is column-by-column top-to-bottom, not strict left-to-right rows). */
.userAccountHubMain.hubAwardsPage {
  text-align: center;
}
.userAccountHubMain.hubAwardsPage > h1 {
  text-align: center;
}
.userAccountHubMain.hubAwardsPage > .zzTip {
  text-align: center;
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
}
.hubAwardsCompSection {
  margin-bottom: 28px;
  text-align: center;
}
.hubAwardsCompSection h2 {
  margin-top: 1.25em;
  margin-bottom: 14px;
  text-align: center;
}
.hubAwardsCompSection:first-child h2 {
  margin-top: 0;
}
/* Imported awards tables: block-level table + overflow wrapper would otherwise sit left; center when narrower than the section. */
.hubImportedAwardsTableScroll {
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
}
.userAccountHubMain.hubAwardsPage .hubImportedAwardsTableScroll table.zz33Table3 {
  margin-left: auto;
  margin-right: auto;
}
.hubAwardsCompGrid {
  /* Masonry-like packing: CSS multicol = fallback when JS off; vars read by app-zz33-js-masonry.js */
  --hub-masonry-col-min: 152px;
  /* Used with gap-x to decide how many flex columns fit (match .hubAwardsMasonryCol max-width). */
  --hub-masonry-col-slot: 168px;
  --hub-masonry-gap-x: 20px;
  --hub-masonry-gap-y: 18px;
  column-width: 152px;
  column-gap: 20px;
  column-fill: balance;
  width: 100%;
  max-width: 100%;
  text-align: initial;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* JS shortest-column layout: row-major reading order, full width, centered when fewer columns than max. */
.hubAwardsCompGrid.hubAwardsCompGrid--masonryJs {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  column-width: auto;
  column-count: auto;
  columns: auto;
  gap: var(--hub-masonry-gap-x);
}
.hubAwardsMasonryCol {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--hub-masonry-gap-y);
  flex: 0 1 168px;
  min-width: 112px;
  max-width: 168px;
}
@media (max-width: 400px) {
  .hubAwardsCompGrid {
    --hub-masonry-col-min: 128px;
    --hub-masonry-gap-x: 14px;
    column-width: 128px;
    column-gap: 14px;
  }
}
.hubAwardsEntryTile {
  border: 1px solid #cfd5df;
  border-radius: 12px;
  padding: 12px 10px 14px;
  background: #fff;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0 0 18px 0;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.07);
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.hubAwardsCompGrid--masonryJs .hubAwardsEntryTile {
  margin-bottom: 0;
}
.hubAwardsEntryThumbWrap {
  width: 100%;
  max-width: 120px;
  height: 120px;
  margin: 0 0 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  box-sizing: border-box;
  align-self: center;
}
.hubAwardsEntryThumb {
  max-width: 120px;
  max-height: 120px;
  width: auto;
  height: auto;
  object-fit: contain;
  vertical-align: middle;
  border: none;
  border-radius: 0;
}
.hubAwardsBadgeGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.hubAwardsBadgeItem {
  flex: 0 0 auto;
  max-width: 92px;
  text-align: center;
}
.hubAwardsBadgeItem a {
  display: block;
  line-height: 0;
}
.hubAwardsBadgeItem img {
  max-width: 72px;
  max-height: 72px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
  border: none;
  border-radius: 0;
}
.hubAwardsBadgeLabel {
  display: block;
  font-size: 0.8rem;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
}
/* My Awards: member has rewards band but fun33RewardsUserIsEligible is false — encouragement stays readable; card body muted. */
.hubRewardsIneligibleLead {
  margin: 0 0 14px 0;
  padding: 12px 14px;
  text-align: left;
  line-height: 1.45;
  font-size: 0.98rem;
  border-radius: 8px;
  background: rgba(70, 110, 180, 0.12);
  border: 1px solid rgba(60, 90, 140, 0.22);
  color: inherit;
  box-sizing: border-box;
}
.hubRewardsSectionVisual--ineligibleMuted {
  opacity: 0.52;
  filter: grayscale(0.6);
}
/* Locked / not-yet-live rewards points: clearly weaker than active totals */
.hubAwardsEntryRewardsPts--ineligible {
  opacity: 0.42;
  filter: grayscale(0.55);
}
.hubAwardsEntryRewardsPts--ineligible .hubAwardsEntryRewardsPtsVal {
  color: #a1a8b3;
}
.userAccountHubMain.hubAwardsPage .hubImportedAwardsTableScroll th.hubImportedAwardsPtsTh--ineligible,
.userAccountHubMain.hubAwardsPage .hubImportedAwardsTableScroll td.hubImportedAwardsPtsCell--ineligible {
  color: #a1a8b3;
  opacity: 0.72;
}
/* Account dashboard: contact block + optional avatar column (flex; avatar only if user may edit photo). */
.userAccountHubAvatarCard {
  margin-bottom: 12px;
}
.userAccountHubDashboardHero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px 24px;
}
.userAccountHubDashboardHero .userAccountHubDashboardContact {
  flex: 1 1 260px;
  min-width: 0;
}
.userAccountHubDashboardHero--withAvatar .userAccountHubDashboardAvatar {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: center;
}
.userAccountHubDashboardAvatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.userAccountHubDashboardAvatarImg {
  flex: 0 0 auto;
  line-height: 0;
}
.userAccountHubDashboardAvatarEdit {
  display: inline-flex;
  justify-content: center;
}
/* Staff user edit: profile moderation block sits under the hub avatar (narrow column). */
.settingsUserEditProfilePhotoModeration {
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
/* Status line above the action buttons: match horizontal centering of the button row. */
.settingsUserEditProfilePhotoModeration .settingsUserEditProfilePhotoModerationStatus {
  text-align: center;
}
.settingsUserEditProfilePhotoModeration--belowHero {
  flex: 1 1 100%;
  max-width: none;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.settingsUserEditProfilePhotoModerationActions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
}
/* Staff user edit: click greyed pending avatar to open insert-modal with T512 preview + same POST actions as below. */
.settingsUserEditProfilePhotoReviewTrigger {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  cursor: zoom-in;
  border-radius: 50%;
}
.settingsUserEditProfilePhotoReviewHint {
  margin: 8px 0 0 0;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.35;
}
.settingsUserEditProfilePhotoReviewModalBox {
  max-width: min(560px, 96vw);
  box-sizing: border-box;
}
.settingsUserEditProfilePhotoReviewModalFigure {
  margin: 0 0 16px 0;
  text-align: center;
  background: #f3f3f3;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}
.settingsUserEditProfilePhotoReviewModalFigure img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: min(70vh, 520px);
  margin: 0 auto;
  object-fit: contain;
}
.settingsUserEditProfilePhotoReviewModalActions {
  justify-content: flex-start;
}
.settingsUserEditPortfolioModerationTable .settingsUserEditPortfolioModerationActions {
  justify-content: flex-start;
  align-items: center;
  gap: 6px 8px;
}
/* Row height is driven by the 100px thumb; inline-block forms and status pills otherwise baseline-align and look vertically offset vs the file column. */
.settingsUserEditPortfolioModerationCell {
  display: flex;
  align-items: center;
  min-height: 100px;
  box-sizing: border-box;
}
.settingsUserEditPortfolioModerationCell--file {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.settingsUserEditPortfolioModerationCell--status {
  justify-content: flex-start;
}
.settingsUserEditPortfolioModerationThumbLink {
  display: inline-block;
  line-height: 0;
}
/* Portfolio moderation table: compact status chips so Approved vs Pending scan quickly. */
.settingsUserEditPortfolioModerationStatus {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.92em;
  font-weight: 700;
  line-height: 1.35;
  border: 1px solid transparent;
}
.settingsUserEditPortfolioModerationStatus--approved {
  color: #1b5e20;
  background-color: #e8f5e9;
  border-color: #a5d6a7;
}
.settingsUserEditPortfolioModerationStatus--pending {
  color: #6d4c00;
  background-color: #fff8e1;
  border-color: #ffe082;
}
.settingsUserEditPortfolioModerationStatus--rejected {
  color: #7f1d1d;
  background-color: #ffebee;
  border-color: #ef9a9a;
}
/* Public profile: show-on-public checkbox beside (or above) field */
.userAccountHubFieldWithShow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.userAccountHubFieldWithShow .userAccountHubShowTick {
  flex: 0 0 auto;
  margin-top: 4px;
  white-space: nowrap;
}
.userAccountHubFieldWithShow .userAccountHubFieldBody {
  flex: 1 1 280px;
  min-width: 0;
}
.userAccountHubFieldWithShowStack {
  flex-direction: column;
  align-items: stretch;
}
.userAccountHubFieldWithShowStack .userAccountHubShowTick {
  margin-top: 0;
  margin-bottom: 6px;
}
/* Public profile hub: title row + autosave pebble (classes shared with comp-edit). */
.userAccountHubTitleRow {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px 16px;
  margin-bottom: 8px;
}
.userAccountHubTitleRow h1 {
  margin: 0;
}
.userAccountHubAllGood {
  margin: 0 0 12px;
}
.userAccountHubSuggestionsHeading {
  margin: 16px 0 8px;
  font-size: 1.1rem;
}
.userAccountHubSuggestionsList {
  margin: 0 0 8px;
  padding-left: 1.25em;
}
.userAccountHubSuggestionsList li {
  margin: 0 0 6px;
}
/* My Roles + dashboard “live now” rows: thumb + title + badge + role buttons (.zz33FramedCard* from framed-card stack). */
.userAccountHubRolesCatHeader {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin: 0 0 6px;
}
.userAccountHubRolesCatTitle {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
}
.userAccountHubRolesLiveBadge {
  display: inline-block;
  padding: 2px 7px;
  font-size: 0.72rem;
  font-weight: bold;
  line-height: 1.2;
  border-radius: 4px;
  background: #2e7d32;
  color: #fff;
  vertical-align: middle;
}
.userAccountHubRolesActionsRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.userAccountHubRolesCat--withThumb {
  padding: 0;
  overflow: hidden;
}
.userAccountHubRolesCatInner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0 12px;
  min-height: 88px;
}
.userAccountHubRolesCatThumb {
  flex: 0 0 auto;
  align-self: flex-start;
  min-height: 88px;
  background: #e8e8e8;
  border-radius: 5px 0 0 5px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.userAccountHubRolesCatThumb img {
  display: block;
  max-height: 88px;
  width: auto;
  height: auto;
  max-width: min(280px, 55vw);
}
.userAccountHubRolesCatBody {
  flex: 1;
  min-width: 0;
  padding: 10px;
}
.userAccountHubRolesOff {
  font-size: 0.8rem;
  color: #555;
  padding: 2px 4px;
}
.userAccountHubRolesCalibration {
  margin: 0 0 12px;
}
.userAccountHubRolesConflictSection {
  margin-top: 28px;
}
.userAccountHubRolesConflictSection h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  font-weight: 600;
  color: #1a1a1a;
}
.userAccountHubRolesConflictSection .userAccountHubRolesConflictTip {
  color: #444;
  font-style: italic;
  font-size: 0.9rem;
  margin: 0 0 10px;
}
/* Action feed (user-account): no outer box; each alert/prompt is its own row-card with a consistent media/info/CTA pattern. */
.userAccountHubActionSection {
  margin-bottom: 16px;
}
.userAccountHubActionCard {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background: #f5f6f7;
}
.userAccountHubActionCard p {
  margin: 0;
}
.userAccountHubActionCardIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.userAccountHubActionCardIcon svg {
  width: 20px;
  height: 20px;
}
.userAccountHubActionCardBody {
  min-width: 0;
}
.userAccountHubActionCardCta {
  justify-self: end;
}
.userAccountHubActionCardWarn {
  border-color: #d9d9d9;
  background: #f1f1f1;
}
.userAccountHubActionCardOk {
  border-color: #d9d9d9;
  background: #f3f4f5;
}
.userAccountHubActionCardLive {
  border-color: #72c68c;
  background: #eef8f1;
}
/* Mid-urgency action alerts (staff moderation queue, pending email change, failed image moderation): warmer than neutral grey, softer than live-judging green. */
.userAccountHubActionCardModerationQueue {
  border-color: #cfc4a8;
  background: #f8f4eb;
  box-shadow: 0 1px 2px rgba(90, 70, 35, 0.07);
}
.userAccountHubActionLiveRoles {
  margin: 0 0 10px;
}
.userAccountHubActionLiveRoles .userAccountHubRolesCat + .userAccountHubRolesCat {
  margin-top: 10px;
}
.userAccountHubActionLiveRoles .userAccountHubRolesCat {
  border-color: #72c68c;
  background: #eef8f1;
}
.userAccountHubTopToggles {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.userAccountHubTopToggleRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
/* app-settings.php (level 100+ dashboard): same red/green track + caption colouring as user-account-profile Public Profile master switch. */
.settingsPageTogglePanel {
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 16px;
  margin-bottom: 10px;
}
.settingsPageTogglePanel > h2 {
  margin-top: 1.1rem;
  margin-bottom: 0.35rem;
}
.settingsPageTogglePanel > h2:first-of-type {
  margin-top: 0;
}
.settingsPageToggleRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.settingsPageToggleRow .zzSliderLabel {
  flex: 0 0 auto;
}
.settingsPageToggleCaption {
  flex: 1 1 220px;
  min-width: 0;
  line-height: 1.35;
}
/* On/Off sits at the start of the caption row; avoid hub-profile’s trailing margin-left on this lead token. */
.settingsPageToggleCaption .settingsPageToggleStateLead.hubProfilePubState {
  margin-left: 0;
  margin-right: 6px;
}
.userAccountHubTopToggleRow .zzSliderLabel {
  flex: 0 0 auto;
}
.hubProfileTopToggleText {
  flex: 1 1 220px;
  min-width: 0;
  line-height: 1.35;
}
.hubProfilePubState {
  font-weight: 700;
  margin-left: 4px;
}
.userAccountHubCardHeadingRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}
.userAccountHubCardHeadingRow .userAccountHubCardHeadingTitle {
  margin: 0;
  flex: 1 1 200px;
  min-width: 0;
}
.userAccountHubCardHeadingRow .zzSliderLabel {
  flex: 0 0 auto;
}
.hubProfileTightCard .hubProfileFieldBlock,
.hubProfileTightCard .hubProfileSectionExplainer {
  margin-top: 0;
  margin-bottom: 8px;
}
.hubProfileTightCard .hubProfileFieldBlock:last-child {
  margin-bottom: 0;
}
.hubProfileLinksCard .hubProfileLinksHint {
  margin: 0 0 8px;
}
.hubProfileLinksCard .hubProfileLinksTable {
  margin-bottom: 0;
}
.hubProfileLinksTable .hubLinkActions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
/* Inline wait state next to Add / Save link (user-account-profile); uses global @keyframes rotation from .zzLoadingSpinner. */
.hubLinkCheckStatus {
  display: none;
  align-items: center;
  gap: 6px;
}
.hubLinkCheckStatus.hubLinkCheckStatusWaiting {
  display: inline-flex;
}
.hubLinkCheckSpinner {
  width: 14px;
  height: 14px;
  border: 2px solid #4CBDF0;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  flex-shrink: 0;
  opacity: 0.85;
}
.hubProfileAutoSaveStatusWrap {
  /* Full-width sibling under the title so .zzAutoSaveStatusRight sticky tracks the tall .userAccountHubMain column (see user-account-profile). */
  width: 100%;
}
.hubProfileCvSubCard {
  border: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0 0 14px;
}
.hubProfileCvSubCard:last-of-type {
  margin-bottom: 0;
}
.hubProfileCvBodies {
  margin: 0;
  padding: 0;
}
.hubProfileCvLine {
  margin: 0 0 6px;
}
.hubProfileCvLine:last-child {
  margin-bottom: 0;
}
.userAccountEntryActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.userAccountStaffNote {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 8px;
  background: #fff8e6;
  border: 1px solid #e8d48b;
  font-size: 13px;
}
.publicProfilePage .publicProfileInner {
  max-width: 720px;
  margin: 0 auto;
}
.publicProfileSection {
  margin-bottom: 22px;
}
.publicProfileLinks a {
  word-break: break-all;
}
.publicProfilePortfolioGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.publicProfilePortfolioGrid img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e6e6e6;
}
.publicProfileEditBar {
  border: 1px dashed #9ab8ff;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: #f7f9ff;
}
/* Public profile (profile.php): same dark shell as comp gallery ($zz33PageBackground = 2); body/footers pick up colorPageBackground2. */
.publicProfilePageDark .publicProfileInner {
  padding-bottom: 24px;
}
/* profile.php: hide backstage "Edit visibility" link; remove --hidden from markup or delete this rule to show again. */
.publicProfileEditVisibilityLinkWrap--hidden {
  display: none !important;
}
.publicProfilePageDark .publicProfilePortfolioGrid img {
  border-color: #444444;
}
/* profile.php dark shell: bio (trusted HTML) often contains nested <p>/<li>/etc. Global p,.pStyle uses theme paragraph colour for light pages, so nested blocks stay dark-on-dark and disappear. Scope overrides to this profile page only (same light text as .zzCompTextP / qualifications). */
.publicProfilePageDark .publicProfileBioBody p,
.publicProfilePageDark .publicProfileBioBody li,
.publicProfilePageDark .publicProfileBioBody td,
.publicProfilePageDark .publicProfileBioBody th,
.publicProfilePageDark .publicProfileBioBody blockquote {
  color: #DDDDDD !important;
}
/* Headings inside bio: keep global h1–h3 colours (readable on both light and dark shells). */
/* profile.php: stacked lines without list bullets (quals under name, awards, involvement, links). */
.publicProfilePlainLine {
  margin: 0 0 0.45em;
}
.publicProfilePlainLine:last-child {
  margin-bottom: 0;
}
.publicProfilePlainStack {
  margin: 0;
  padding: 0;
}
.publicProfileQualsUnderName {
  margin-top: -0.25em;
}
.hubProfileSocialBlock {
  margin-top: 14px;
  padding-top: 10px;
}
.hubUrlInputWrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hubUrlInputPrefix {
  white-space: nowrap;
  color: #666666;
  font-size: 0.92em;
}
.hubUrlInputWrap input[type="text"] {
  flex: 1 1 auto;
}
.hubProfileSocialTable input[type="text"] {
  width: 100%;
  min-width: 220px;
}
.hubPublicProfileOpenLink {
  display: inline;
  border: 0;
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  word-break: break-all;
}
.hubPublicProfileOpenLink .zzCompTextPDim {
  margin-right: 2px;
}
.hubPublicProfileOpenLinkDisabled {
  opacity: 0.6;
  pointer-events: none;
  text-decoration: none;
}
.hubSocialPlatformCell {
  white-space: nowrap;
}
.hubSocialPlatformCell span {
  vertical-align: middle;
}
.hubSocialPlatformCell svg {
  vertical-align: middle;
  margin-right: 6px;
}
.publicProfileSocialLine {
  display: flex;
  align-items: center;
  gap: 8px;
}
.publicProfileSocialBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 1.8em;
  padding: 0 0.45em;
  border-radius: 999px;
  border: 1px solid #999999;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.publicProfileSocialBadgeIcon svg {
  width: 14px;
  height: 14px;
  display: block;
}
@media (max-width: 760px) {
  .userAccountHubLayout {
    flex-direction: column;
  }
  .userAccountHubNav {
    flex: 1 1 auto;
    width: 100%;
  }
}
/* =========================================================================================
   Settings — Menu editor (settings-menu.php): nested lists + drag
   ========================================================================================= */
.zzSettingsMenuPage .zzSettingsMenuHint {
  opacity: 0.85;
  font-size: 0.95em;
  max-width: 52em;
}
.zzSettingsMenuBucketTitle {
  margin-top: 1.75em;
  margin-bottom: 0.35em;
}
.zzSettingsMenuSubWrap {
  margin-bottom: 1.5em;
}
.zzSettingsMenuParentTitle {
  font-size: 1.1em;
  margin: 0.5em 0 0.35em;
}
.zzSettingsMenuSortList {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #cccccc;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  min-height: 2.5em;
}
.zzSettingsMenuSortList.zzSettingsMenuDropTarget {
  outline: 2px dashed #4488cc;
  outline-offset: 2px;
}
li.zzSettingsMenuDropMarker {
  list-style: none;
  height: 4px;
  margin: 0;
  padding: 0;
  background: linear-gradient(to bottom, transparent 0%, #4488cc 35%, #4488cc 65%, transparent 100%);
  border-radius: 2px;
  pointer-events: none;
  box-sizing: border-box;
}
/* Sidebar bucket: expand (+) in row, children in .zzSettingsMenuNestedBelow (no nested header row). */
.zzSettingsMenuSubWrap--sideTree {
  margin-bottom: 1.5em;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--expand {
  width: 2rem;
}
.zzSettingsMenuTh--expand {
  padding: 0.35rem 0.2rem;
}
.zzSettingsMenuTd--expand {
  text-align: center;
  vertical-align: middle;
  padding: 0.25rem 0.2rem;
}
.zzSettingsMenuNestToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  min-height: 1.65rem;
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: #4488cc;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid #cccccc;
  border-radius: 4px;
  cursor: pointer;
}
.zzSettingsMenuNestToggle:hover {
  background: rgba(68, 136, 204, 0.1);
}
.zzSettingsMenuNestSpacer {
  display: inline-block;
  min-width: 1.65rem;
}
.zzSettingsMenuNestedBelow {
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
  padding: 0 0 0 0.55rem;
  border-left: 2px solid rgba(68, 136, 204, 0.35);
}
.zzSettingsMenuSortList.zzSettingsMenuSortList--nestedNoHead {
  border: none;
  border-radius: 0;
  background: transparent;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.zzSettingsMenuOrphanNote {
  font-weight: 400;
  font-size: 0.85em;
  color: #666666;
}
.zzSettingsMenuSrOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.zzSettingsMenuRow,
.zzSettingsMenuHeadRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.35rem 0.5rem;
  padding: 0.28em 0.45em;
  border-bottom: none;
  cursor: default;
  list-style: none;
}
.zzSettingsMenuHeadRow {
  cursor: default;
  padding-top: 0.15em;
  background: rgba(0, 0, 0, 0.02);
}
.zzSettingsMenuRow.zzSettingsMenuDragging {
  opacity: 0.55;
}
.zzSettingsMenuDragHandle {
  cursor: grab;
  user-select: none;
  font-size: 1.05em;
  line-height: 1;
  padding: 0.45em 0.2em 0 0;
  flex: 0 0 auto;
  color: #666666;
}
.zzSettingsMenuDragSpacer {
  flex: 0 0 auto;
  width: 1.25rem;
  min-height: 1.25rem;
}
/* Same colgroup on header + data tables → columns line up across every row. */
.zzSettingsMenuRowFields {
  flex: 1 1 auto;
  min-width: 0;
}
.zzSettingsMenuSheet {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82em;
}
.zzSettingsMenuSheet--head th {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  vertical-align: bottom;
  padding: 0.35rem 0.3rem 0.4rem;
  color: #444444;
  border-bottom: 2px solid #cccccc;
  background: rgba(70, 110, 180, 0.06);
}
/* Preview: bucket 1 = top nav (.zzMainMenuDiv li a); bucket 3 = sidebar (.zzSideMenuDiv …); bucket 2 has no preview column. */
.zzSettingsMenuSheet .zzSettingsMenuCol--preview {
  width: 9rem;
}
.zzSettingsMenuTd--preview {
  padding: 0.2rem 0.25rem;
  vertical-align: middle;
}
.zzSettingsMenuTd--previewMain {
  background-color: #555555;
}
.zzSettingsMenuTd--previewSide {
  background-color: #333333;
}
.zzSettingsMenuPreview {
  min-width: 0;
}
.zzSettingsMenuPreview__inner {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  text-align: left;
  line-height: 1.3;
  word-break: break-word;
}
.zzSettingsMenuPreview--main .zzSettingsMenuPreview__inner {
  padding: 10px 16px;
  font-size: 16px;
  color: #EEEEEE;
  background-color: #555555;
}
.zzSettingsMenuPreview--top .zzSettingsMenuPreview__inner {
  padding: 9px 14px;
  font-size: 14px;
  color: #DDDDDD;
  background-color: #333333;
}
.zzSettingsMenuPreview--sub .zzSettingsMenuPreview__inner {
  padding: 8px 12px 8px 24px;
  font-size: 12px;
  color: #CCCCCC;
  background-color: #333333;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--default {
  width: 6.5rem;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--override {
  width: 7.5rem;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--tag {
  width: 6rem;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--parent {
  width: 6rem;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--link {
  width: 7rem;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--newtab {
  width: 4.25rem;
}
.zzSettingsMenuSheet:not(.zzSettingsMenuSheet--withModule) .zzSettingsMenuCol--userlevel {
  width: 13rem;
}
.zzSettingsMenuSheet--withModule .zzSettingsMenuCol--userlevel {
  width: 10rem;
}
.zzSettingsMenuSheet--withModule .zzSettingsMenuCol--module {
  width: 7.25rem;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--show {
  width: 7rem;
}
.zzSettingsMenuSheet .zzSettingsMenuCol--delete {
  width: 4.5rem;
}
.zzSettingsMenuTd {
  padding: 0.3rem 0.35rem;
  vertical-align: middle;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}
/* Effective min level (from menu_min_level_info_key) — inline under the user level control. */
.zzSettingsMenuEffectiveMin {
  margin-top: 0.3rem;
  font-size: 0.78em;
  line-height: 1.3;
  color: #555555;
  max-width: 100%;
  word-break: break-word;
}
.zzSettingsMenuTd--newtab,
.zzSettingsMenuTd--show {
  text-align: center;
}
.zzSettingsMenuTd--delete {
  text-align: right;
}
.zzSettingsMenuTd--module {
  font-size: 0.92em;
  text-align: right;
}
.zzSettingsMenuTd--info {
  padding: 0.35rem 0.4rem;
  background: rgba(70, 110, 180, 0.05);
  border-bottom: 1px solid #dddddd;
}
.zzSettingsMenuInfoRow .zzSettingsMenuInfoMin {
  margin: 0;
}
.zzSettingsMenuLab--cell {
  display: block;
  margin: 0;
  width: 100%;
}
.zzSettingsMenuInput--fill,
.zzSettingsMenuJsPatchSel--fill {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.22rem 0.35rem;
  font-size: 0.97em;
}
.zzSettingsMenuLab input[type="text"]:not(.zzSettingsMenuInput--fill) {
  padding: 0.22rem 0.35rem;
  font-size: 0.97em;
}
.zzSettingsMenuCellVal {
  display: block;
  line-height: 1.25;
  word-break: break-word;
}
.zzSettingsMenuDefaultLab {
  font-size: 0.95em;
  line-height: 1.2;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zzSettingsMenuModuleSlot {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.zzSettingsMenuTrailRequired {
  display: block;
  font-size: 0.76em;
  line-height: 1.25;
  opacity: 0.88;
  text-align: center;
}
.zzSettingsMenuLab {
  font-size: 0.82em;
  margin: 0;
  line-height: 1.15;
}
.zzSettingsMenuLabCap {
  font-weight: 600;
}
.zzSettingsMenuInfoMin {
  font-size: 0.78em;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.35rem;
  line-height: 1.25;
}
.zzSettingsMenuInfoMin .zzMenuInfoMinMeta::before {
  content: "\00a0·\00a0";
}
.zzSettingsMenuDelForm {
  margin: 0;
  display: inline;
}
@media (max-width: 1100px) {
  .zzSettingsMenuRowFields {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .zzSettingsMenuSheet {
    min-width: 64rem;
  }
}
@media (max-width: 760px) {
  .zzSettingsMenuRow,
  .zzSettingsMenuHeadRow {
    flex-wrap: wrap;
  }
  .zzSettingsMenuRowFields {
    overflow-x: auto;
  }
}
.zzSettingsMenuAddForm {
  margin-bottom: 1.25em;
}

/* =========================================================================================
   END Greenfield user-account hub + public profile
   ========================================================================================= */

		}