/** Add css rules here for your application. */


/** Example rules used by the template application (remove for your app) */
h1 {
  font-size: 2em;
  font-weight: bold;
  color: #777777;
  margin: 40px 0px 70px;
  text-align: center;
}

/*------ Panels --------- */
.whereIsPanel {
	background-color: #C0ADDB;	
}

.gwt-RichTextArea
{
	line-height: 50px;
  color: #777777;
}

.topBarPanel {
	height: 30px;
	align: right;
	margin-top: 10px;
	margin-bottom: 20px;
  }
  
.bottomBorder {
	border-bottom:10px solid #000000;
}
  
.loginPanel {
	width: 1000px; 
	align: center;
}

.gwt-AlignRight {
	    text-align: right;
  font-weight: bold;
      font-size: 13pt;
  
}

.gwt-AlignLeft {
	    text-align: left;
  font-weight: bold;
      font-size: 13pt;
  
}

.gwt-AlignRightMobile {
	    text-align: right;
  font-weight: bold;
      font-size: 24pt;
  
}

.gwt-AlignLeftMobile {
	    text-align: left;
  font-weight: bold;
      font-size: 24pt;
  
}


.loginLink {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 10pt;
    text-align: right;
}

.forgotPasswordLink {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 9pt;
    text-align: right;
}
 	
.northPanel {
	height: 75px;
	margin-bottom: 15px;
	align: center;
  }

.logoHeader {
	align: center;
}

.allDayScrollPanel {
	border-bottom:4px solid #EBEBEB;
}

.allDayTable {
	background-color: #A4B4C4;	
}

.timelineHeaderCell {
	background-color: #A4B4C4;	
}

.noWrapButton {
        white-space: nowrap;        
}

.tvFinderPanel {
	margin-top: 50px;
	margin-left: 5px;
	margin-right: 60px;
	border:3px solid #D8F0C0;	
}

.centerPanelBottom {
	margin-top: 20px;
    padding-bottom: 0px;
}

.configPanel {
	height: 500px;
	margin-top: 20px;
    padding-bottom: 0px;
}

.timeHeaderLabel {
	margin-right: 10px;
}

.configButton {
	display: block;
	background-color: transparent;
	background-image: url(images/configButton.png);
	background-repeat: no-repeat;
	border: transparent;
	margin-top: 20px;
	margin-right: 3px;
	text-align: center;
	text-decoration: none;
	width: 100px;
	height: 500px;
}

.transButton {
	display: block;
	background-color: transparent;
	border: transparent;
}

.lineButton {
	display: block;
	background-color: transparent;
	border: transparent;
	padding: 0px 0px 0px 0px;
}

.msieButton {
	width:0;
   	overflow:visible;
}

.blackText {
	color: #000000;
}
.whiteText {
	color: #000000;
}

.noBottom {
	border-bottom: transparent;
}

.buttonStandard {
	background-color: #2A8FBD;
}
.buttonStandardHL {
	background-color: #6CDFEA;
}

.buttonStandard2 {
	color: #8F9A9C;
	background-color: #F7FDFA;
}
.buttonStandard2HL {
	color: #9D9D93;
	background-color: #F2F3E9;
}

.buttonCancel {
	background-color: #7F94B0;	
}
.buttonCancelHL {
	background-color: #A1BEE6;	
}

.detailTabPanel {
    margin-top: 20px;
	padding-bottom: 0px;
}	

.southPanel {
	height: 75px;	
}

.dayPanel {
	height: 800px;
  	width:  115px;
	border-left:3px solid #EBEBEB;
}

.border2px {
	border:2px solid #000000;
}
.border2pxGray {
	border:2px solid #C0C0C0;
}


.widthLabel {
  font-size: 10pt;
  margin-left: 5px;
  background-color: transparent;
  width:  115px;
}

.transparentPopup {
  background-color: transparent;
}

.buttonShadow {
	background-color: #EEE;
	float: left;
	-webkit-box-shadow: inset -1px -1px 1px 1px#888;
	box-shadow: inset -1px -1px 1px 1px #888;
}

.buttonShadowPressed {
	background-color: #EEE;
	float: left;
	-webkit-box-shadow: inset 1px 1px 1px 1px#888;
	box-shadow: inset 1px 1px 1px 1px #888;
}

.roundedCornersButton {
	-moz-border-bottom-left-radius: 8px;
	-moz-border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	-moz-border-top-left-radius: 8px;
	-moz-border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.roundedCorners {
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
		-moz-border-bottom-left-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.mobileRoundedCorners {
	-moz-border-top-left-radius: 25px;
	-moz-border-top-right-radius: 25px;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
		-moz-border-bottom-left-radius: 25px;
	-moz-border-bottom-right-radius: 25px;
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}


.roundedCornersTop {
	-moz-border-top-left-radius: 5px;
	-moz-border-top-right-radius: 5px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.roundedCornersBottom {
	-moz-border-bottom-left-radius: 5px;
	-moz-border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.standardPopupPanel {
	border-left:10px solid #B6A3A7;
	border-top:10px solid #B6A3A7;
	border-right:4px solid #B6A3A7;
	border-bottom:4px solid #B6A3A7;
	background: #FFFFFF;

	-moz-border-bottom-left-radius: 10px;
	-moz-border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-top-left-radius: 10px;
	-moz-border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.tvLoadLabel {
  	font-size: 9pt;
  	background-color: transparent;
  	width:  237px;
	font-family: Helvetica, Calibri, Arial, sans-serif;
}

.tableRowOdd {
	background-color: #A4B4C4;
}

.tableRowEven {
	background-color: #FFFFFF;	
}

.tableRowHighlight {
	background-color: #E8F3F8;
}

.scheduleTimesAbsolutePanel {
	height: 800px;
	width: 60px;	
}	

.scheduleTimesGridCell {
	font-size: 10pt;
	height: 20px;
	color: #515151;
	text-align: right;
	width: 40px;	
}	

.westLayoutTable {
	margin-top: 10px;	
}


/*-----Labels------*/

.headerLabel {
	font-size: 14pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	color: #000000;
	margin-top: 0px;
	margin-bottom: 5px;
	margin-left: 5px;
}

.level2Label {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 0px;
	margin-left: 5px;
}

.level2PopupLabel {
    color: #FFFFFF;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 0px;
	margin-left: 5px;
}

.searchingLabel {
    color: #737373;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 0px;
	margin-left: 5px;
}

.pastDateLabel {
    color: #737373;
	font-family: Helvetica, Calibri, Arial, sans-serif;
}

.grayText {
    color: #737373;
	font-family: Helvetica, Calibri, Arial, sans-serif;
}

.lbGray {
    color: #737373;
}

.metaMainLabel {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 25px;
    margin-right: 10px;
    margin-bottom: 0px;
	margin-left: 5px;
}

.level2ALabel {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 10px;
	margin-left: 15px;
}

.backgroundGray {
	background-color: #E7E7E7;
}

.backgroundLightBlue {
	background-color: #E2EAED;
}

@eval fontsize com.timeshaker.client.ScreenSizing.thirtynineWidth + "pt";

.level3Label {
	color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 0px;
	margin-left: 5px;
}


.searchLabel {
	color: #999999;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: right;
	margin-top: 10px;
	margin-bottom: 3px;
	margin-left: 10px;
}

.loadingLabel {
	color: #999999;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 16pt;
}


.searchLabel2 {
	color: #999999;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
	margin-top: 10px;
	margin-bottom: 3px;
}

.boxHeaderLabel {
	color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
}

.boxFooterLabel {
	color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 10pt;
    text-align: left;
}

.level3ALabel {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 5px;
    margin-bottom: 10px;
}

.orLabel {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 10px;
}

.level4Label {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 11pt;
    text-align: left;
    margin-top: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
	margin-left: 5px;
}

.level4PopupLabel {
    color: #FFFFFF;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 11pt;
    text-align: left;
}

.fontGeorgiaSerif {
	font-family: Georgia, serif;
}

.bannerLabel {
	background-color: #999999;
	color: #FFFFFF;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 9pt;
}

.label7pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 7pt;
}
.label8pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 8pt;
}
.label9pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 9pt;
}
.label10pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 10pt;
}

.label11pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 11pt;
}

.label12pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 12pt;
}
.label13pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 13pt;
}
.label14pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 14pt;
}
.label15pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 15pt;
}
.label16pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 16pt;
}
.label18pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 18pt;
}
.label20pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 20pt;
}
.label22pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 22pt;
}
.label24pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 24pt;
}
.label25pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 25pt;
}
.label26pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 26pt;
}
.label28pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 28pt;
}
.label30pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 30pt;
}
.label40pt {
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 40pt;
}

.labelWhite {
    color: #FFFFFF;
}

.verticalText {
    filter         : progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -webkit-transform  : rotate(270deg);
    -moz-transform     : rotate(270deg);
    -o-transform       : rotate(270deg);
}

.labelBold {
	font-weight: bold;
}

.logTableHeaders {
	color: #000000;
	padding-top: 0px;
	font-weight: bold;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 10pt;
}

.level5Label {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 8pt;
    margin-top: 3px;
}

.scheduleTimeLabel {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 10pt;
    margin-right: 10px;
}

.level4NoMarginLabel {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 10pt;
    text-align: left;
    margin-bottom: 5px;
}

.descriptionLabel {
    color: blue;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 11pt;
    text-align: left;
    margin-bottom: 5px;
}

.leftMargin {
	margin-left: 10px;
}

.marginRight5 {
	margin-right: 5px;
}
.marginRight10 {
	margin-right: 10px;
}
.marginLeft3 {
	margin-left: 3px;
}
.marginLeft5 {
	margin-left: 5px;
}
.marginLeft7 {
	margin-left: 7px;
}
.marginLeft10 {
	margin-left: 10px;
}
.marginLeft15 {
	margin-left: 15px;
}
.marginLeft20 {
	margin-left: 20px;
}
.marginLeft30 {
	margin-left: 30px;
}
.marginTop5 {
	margin-top: 5px;
}
.paddingTop5 {
	padding-top: 5px;
}
.marginTop3 {
	margin-top: 3px;
}
.marginTop2 {
	margin-top: 2px;
}
.marginTop8 {
	margin-top: 8px;
}
.marginTop10 {
	margin-top: 10px;
}
.marginTop15 {
	margin-top: 15px;
}
.marginTop20 {
	margin-top: 20px;
}
.marginTop30 {
	margin-top: 30px;
}
.marginBottom3 {
	margin-bottom: 3px;
}
.marginBottom5 {
	margin-bottom: 5px;
}

.marginBottom10 {
	margin-bottom: 10px;
}
.marginBottom15 {
	margin-bottom: 15px;
}
.marginBottom20 {
	margin-bottom: 20px;
}

.fullTVBackground {
	background-color: #CDD3D8;
	border: transparent;
}
.fullTVBorder {
	border:8px solid #A1A5A2;		
}

.tvUserHeaderPanel {
	margin-left: 10px;
	margin-top: 7px;
}

.tvUserPanel {
	background-color: #FFFFFF;
	margin-left: 5px;
	margin-right: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.header4Label {
    color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 11pt;
    text-align: left;
    margin-left: 10px;
    margin-right: 10px;
}

.categoryLabel {
    color: #000000;
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 11pt;
    text-align: left;
    margin-bottom: 5px;
    margin-right: 5px;
}

.typeLabel {
    color: #000000;
    font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 11pt;
    text-align: left;
    margin-bottom: 5px;
    margin-right: 5px;
    margin-left: 15px;
}

.containerPanel {
	background-color: #FFFFFF;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

.picTitlePanel {
	margin-left: 5px;
}


/*---Profile panel --- */

.profileLabel {
	font-size: 16pt;
	color: #000000;
	margin-top: 0px;
	margin-bottom: 5px;
}

.tvCheckBox {
	font-size: 14pt;
	height: 20px;
	width: 20px;	
}

.friendsScrollPanel {
	width: 500px;	
}	

.profileHeaderLabel {
	font-weight: bold;
	color: #000000;
	margin-top: 0px;
	margin-bottom: 5px;
}

.profileWidgetTable {
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: 5px;
}

.connectedLabel {
	font-size: 12pt;
	color: green;
	margin-top: 0px;
	margin-bottom: 5px;
}

.headerPanel {
	height:  30px;	
	margin-bottom: 15px;
	margin-left: 0px;
	margin-top: 0px;
}


.backgroundPanel {
	background-color: #D8F0C0;
}

.headerPopupPanel {
	height:  40px;	
	background-color: #226FCB;
	margin-bottom: 15px;
	margin-left: 0px;
	margin-top: 0px;
}

.transparentPopupPanel {
	background-color: transparent;
	border: transparent;
}

.whiteFlexTable {
	background-color: #FFFFFF;
	border: transparent;
}
.blackFlexTable {
	background-color: #000000;
	border: transparent;
}

.popupBorder {
	border:6px solid #226FCB;		
}

.boxHeaderPanel {
	height:  30px;	
	border:2px solid #FFFFFF;	
}

.cityZip {
	color: #000000;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    font-size: 9pt;
}

.separator {
	display: block;
	background-color: transparent;
	background-image: url(images/separator.png);
	background-repeat: no-repeat;
	border: transparent;
	margin-top: 7px;
	margin-bottom: 13px;
	text-align: center;
	text-decoration: none;
	width: 40px;
	height: 15px;
}

.profileHorizontalPanel {
	align: top;
	margin-bottom: 15px;
	margin-left: 20px;
	margin-top: 0px;
}

.flexCell99 {
	align: top;
	background-color: #999999;
}

.checkBoxPanel {
	margin-left: 15px;
	margin-bottom: 15px;
}


.googleButton {
	display: block;
	background-color: transparent;
	background-image: url(images/googlebutton.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 77px;
	height: 69px;
}

.tvSidePanelEventListBackground {
	background-color: #E4ECED;
}
.tvSidePanelEventListBorder {
	border:3px solid #A5CFD8;	
}

.widgetPanel {
	align: top;
	border:3px solid #D8F0C0;	
	margin-bottom: 15px;
	margin-left: 20px;
	margin-right: 15px;
	margin-top: 40px;
}

.tvCBCheckedBig {
	display: block;
	background-color: transparent;
	background-image: url(images/checkedbox.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 20px;
	height: 20px;
}

.tvCBUncheckedBig {
	display: block;
	background-color: transparent;
	background-image: url(images/uncheckedbox.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 20px;
	height: 20px;
}

.tvCBCheckedSmall {
	display: block;
	background-color: transparent;
	background-image: url(images/checkedboxsmall.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 12px;
	height: 12px;
}

.tvCBUncheckedSmall {
	display: block;
	background-color: transparent;
	background-image: url(images/uncheckedboxsmall.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 12px;
	height: 12px;
}

.standardImageButton {
	display: block;
	background-color: transparent;
	background-image: url(images/addphotobutton.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 66px;
	height: 50px;
}

.calendarButton {
	display: block;
	background-color: transparent;
	background-image: url('images/buttoncalendar.png');
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 91px;
	height: 22px;
}

.comboButton {
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	border:2px solid transparent;
	text-align: center;
	text-decoration: none;
	width: 94px;
	height: 22px;
}

.buttonZoomOut {
	display: block;
	background-color: transparent;
	background-image: url('images/buttonzoomout.png');
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 85px;
	height: 22px;
}

.timeTravelButton {
	display: block;
	background-color: transparent;
	background-image: url('images/buttontimeline.png');
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 91px;
	height: 22px;
}

.standardTVButton {
	display: block;
	border: #000000;
	text-align: center;
	text-decoration: none;
	
	background: #f1f4f9;
	background: -moz-linear-gradient(right, #87acca 0%, #f1f4f9 75%);
	background: -webkit-gradient(linear, right top, left top, color-stop(0%,#87acca), color-stop(75%,#f1f4f9));
	-moz-box-shadow: 0px 1px 0px #90a686;-webkit-box-shadow: 0px 1px 0px #90a686;
	background-repeat: no-repeat;
	background-color: #F4F7F7;
	
}

.plannerButton {
	display: block;
	background-color: transparent;
	background-image: url(images/addphotobutton.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 74px;
	height: 74px;
}

.registerButton {
	display: block;
	background-color: transparent;
	background-image: url(images/buttonregister.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 156px;
	height: 48px;
}

.loginButton {
	display: block;
	background-color: transparent;
	background-image: url(images/buttonlogin.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 108px;
	height: 48px;
}

.frameButton {
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 181px;
	height: 43px;
}

.checkboxFour {
	width: 40px;
	height: 40px;
	background: #ddd;
	margin: 20px 90px;
	border-radius: 100%;
	position: relative;
	font-size: 28px;
	-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.boxShadow {
	-webkit-box-shadow: 3px 3px 10px 3px #999999;
	-moz-box-shadow: 3px 3px 10px 3px #999999;
	box-shadow: 3px 3px 10px 3px #999999;
}

.sunkenShadow {
	-webkit-box-shadow: 1px 1px 5px #555 inset;
	-moz-box-shadow: 1px 1px 5px #555 inset;
	box-shadow: 1px 1px 5px #555 inset;
}

.boxShadowBottom {
	-webkit-box-shadow: 0 3px 3px -3px #999999;
    -moz-box-shadow: 0 3px 3px -3px #999999;
    box-shadow: 0 3px 3px -3px #999999;
}

.eventPopShadow {
	-webkit-box-shadow: 5px 5px 10px 5px #999999;
	-moz-box-shadow: 5px 5px 10px 5px #999999;
	box-shadow: 5px 5px 10px 5px #999999;
}

.rotateLeftButton {
	display: block;
	background-color: transparent;
	background-image: url(images/rotateleftbutton.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 27px;
	height: 22px;
}
.rotateRightButton {
	display: block;
	background-color: transparent;
	background-image: url(images/rotaterightbutton.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 27px;
	height: 22px;
}

.buttonSmallStandard {
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 94px;
	height: 24px;
}

.blockCell {
	padding: 0px;
	spacing: 0px;
}

.buttonCategory {
	display: block;
	background-color: transparent;
	background-image: url(images/buttonImageSocial.png);
	background-repeat: no-repeat;
	border: transparent;
	text-align: center;
	text-decoration: none;
	width: 146px;
	height: 30px;
}

.fade {
   opacity: 1;
   transition: opacity 1s ease-in-out;
   -moz-transition: opacity 1s ease-in-out;
   -webkit-transition: opacity 1s ease-in-out;
   }
    .fade:hover {
      opacity: 0.4;
      }
      
.shadeLabel {
	float: left; clear: left; margin: 11px 20px 0 0; width: 95px;
	text-align: right; font-size: 16px; color: #445668;
	text-transform: uppercase; text-shadow: 0px 1px 0px #f2f2f2;
}

.shadowBox {
	background: #f1f4f9;
	background: -moz-linear-gradient(top, #87acca 0%, #ffffff 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87acca), color-stop(50%,#ffffff));
	-moz-box-shadow: 0px 1px 0px #90a686;-webkit-box-shadow: 0px 1px 0px #90a686;
}

.shadowTextBox {
	background: #f1f4f9;
	background: -moz-linear-gradient(top, #87acca 0%, #f1f4f9 25%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87acca), color-stop(25%,#f1f4f9));
	-moz-box-shadow: 0px 1px 0px #90a686;-webkit-box-shadow: 0px 1px 0px #90a686;
}

.tvLibraryShadowBox {
	background: #262626;
	background: -moz-linear-gradient(top, #262626 0%, #F2F4F6 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#262626), color-stop(50%,#F2F4F6));
	-moz-box-shadow: 0px 1px 0px #90a686;-webkit-box-shadow: 0px 1px 0px #90a686;
}


.tvLibraryShadowBoxTan {
	background: #CEAA92;
	background: -moz-linear-gradient(top, #CEAA92 0%, #dacabb 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#CEAA92), color-stop(50%,#dacabb));
	-moz-box-shadow: 0px 1px 0px #90a686;-webkit-box-shadow: 0px 1px 0px #90a686;
}

.darkBlueShadeBox {
	background: #6695BB;
	background: -moz-linear-gradient(top, #6695BB 0%, #87ACCA 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6695BB), color-stop(50%,#87ACCA));
	-moz-box-shadow: 0px 1px 0px #90a686;-webkit-box-shadow: 0px 1px 0px #90a686;
}


.popupBackground {
	background: #becad5;
	background: -moz-linear-gradient(top, #becad5 0%, #CBD8E8 50%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#becad5), color-stop(50%,#CBD8E8));
	-moz-box-shadow: 0px 1px 0px #90a686;-webkit-box-shadow: 0px 1px 0px #90a686;
}


.shadeBox {
	-moz-box-shadow: 10px 10px 5px #888888;
	-webkit-box-shadow: 10px 10px 5px #888888;
	box-shadow: 10px 10px 5px #888888;
}

.insetShadow {
	box-shadow:1px 1px 1px 1px #C2CBCE inset;
}


/** NEW PALETTE */
.borderNew2 {
	border:2px solid #262626;	
}

.backgroundNew {
	background: #f7f7f7;	
}

.backgroundDarkNew {
	background: #d5d8d1;	
}

.blueBorderNew {
	border:2px solid #3b809f;	
}

.popupBorderNew8 {
	border:8px solid #3b809f;	
}

.popupBorderNew2 {
	border:2px solid #3b809f;	
}

.popupBorderNew4 {
	border:4px solid #3b809f;	
}

.popupHeaderNew {
	background: #3b809f;	
}

.historyBackground {
	background: #F7F3E1;	
}
.planningBackground {
	background: #E1ECF0;	
}

/** POPUP PALETTE */
.popupThickBorder {
	border:6px solid #9da5b3;	
}

/** PROFILE PALETTE */
.profileBorder2 {
	border:2px solid #90a686;	
}
.profileBorder {
	border:3px solid #90a686;	
}
.profileThinBorder {
	border:2px solid #90a686;	
}
.profileThickBorder {
	border:6px solid #90a686;	
}
.profileBackground {
	background-color: #ebede6;
}
.profileBackgroundLight {
	background-color: #EDF0F7;
}
.profileTabButtonSelected {
	background-color: #90a686;
}
.profileBoxHeaderPanel {
	background-color: #90a686;
}

/** SEARCH PALETTE */
.searchBorder2 {
	border:2px solid #d6867a;	
}
.searchBorder {
	border:3px solid #d6867a;	
}
.searchBackground {
	background-color: #f7f0ee;
}
.searchBackgroundLight {
	background-color: #EDF0F7;
}
.searchTabButtonSelected {
	background-color: #d6867a;
}
.searchBoxHeaderPanel {
	background-color: #d6867a;
}

/** EVENT PALETTE */
.eventBorder2 {
	border:2px solid #87acca;	
}
.eventBorder {
	border:3px solid #87acca;	
}
.eventThickBorder {
	border:9px solid #87acca;	
}
.eventBackground {
	background-color: #f1f4f9;
}
.eventBackgroundLight {
	background-color: #EDF0F7;
}
.eventTabButtonSelected {
	background-color: #87acca;
}
.eventBoxHeaderPanel {
	background-color: #87acca;
}

/** PHOTO PALETTE */
.photoBorder2 {
	border:2px solid #7a6a87;
}
.photoBorder {
	border:3px solid #7a6a87;
}
.photoBackground {
	background-color: #d7d1dc;
}
.photoBackgroundLight {
	background-color: #EDF0F7;
}
.photoTabButtonSelected {
	background-color: #7a6a87;
}
.photoBoxHeaderPanel {
	background-color: #7a6a87;
}


/** TV PALETTE */
.tvBorder2 {
	border:2px solid #dbcd86;	
}
.tvBorder {
	border:3px solid #dbcd86;	
}
.tvBorder2 {
	border:2px solid #dbcd86;	
}
.tvBackground {
	background-color: #faf5e4;
}
.tvBackgroundLight {
	background-color: #EDF0F7;
}
.tvTabButtonSelected {
	background-color: #dbcd86;
}
.tvBoxHeaderPanel {
	background-color: #dbcd86;
}

/** FLEX PALETTE */
.tvContainerHeader {
	background-color: #4682B4;
}
.tvContainerPanelBackground {
	background-color: #4682B4;
}
.tvContainerPanelBorder {
	border:2px solid #4682B4;
}
.tvContainerPanelBorderHL {
	border:2px solid #4682B4;
}
.flexPanelBackground {
	background-color: #F4F7F7;
}
.flexPanelBackgroundLight {
	background-color:#F4F7F7;
}
.flexPanelBorder {
	border-top:3px solid #F4F7F7;	
}

.opaque1 {
	opacity:.10;
	filter:alpha(opacity=10); /* For IE8 and earlier */
}

.opaque2 {
	opacity:.15;
	filter:alpha(opacity=15); /* For IE8 and earlier */
}

.opaque5 {
	opacity:.50;
	filter:alpha(opacity=50); /* For IE8 and earlier */
}

.opaque3 {
	opacity:.85;
	filter:alpha(opacity=85); /* For IE8 and earlier */
}

.metaDataPanel {
	margin-left: 40px;
}

.rightsPanel {
	align: top;
}

.metaHeaderPanel { 
	background-color: #D8F0C0;
	height: 30px;
	border:3px solid #D8F0C0;	
}	

.rightsScrollPanel {
	width: 450px;
}

.lbRights {
	background: transparent;
	border: none;	
	button: none;	
}

.topButtonPanel {
	background-color: #226FCB
}

.introLabel {
	background: transparent;
	color: #FFFFFF;
	text-align: right;
	font-size: 9pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
}

.dbstartDateSelect {
	font-size: 9pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
}

.flexTVHeaderLabel {
	display: block;
	background: transparent;
	color: #F0F0CC;
	border: transparent;
	text-align: left;
	vertical-align:text-top;
	font-size: 11pt;
	margin-top: 3px;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	text-decoration: none;
}

.introButton {
	display: block;
	background: transparent;
	color: #FFFFFF;
	border: transparent;
	text-align: left;
	vertical-align:text-top;
	font-size: 10pt;
	font-family: Florence, cursive;
	text-decoration: none;
}

.whatIsTimeShaker {
	display: block;
	background: transparent;
	color: #000000;
	border: transparent;
	text-align: right;
	vertical-align:text-top;
	font-size: 10pt;
	font-family: Florence, cursive;
	text-decoration: none;
}

.introButtonHeader {
	display: block;
	background: transparent;
	color: #FFFFFF;
	border: transparent;
	text-align: left;
	vertical-align:text-top;
	font-size: 11pt;
	font-family: Florence, cursive;
	text-decoration: none;
}

.topButton {
	display: block;
	background: transparent;
	color: #FFFFFF;
	border: transparent;
	text-align: center;
	vertical-align:text-top;
	font-size: 9pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	text-decoration: none;
}

.popupTransparent {
	background: transparent;
}

.rightsButton {
	display: block;
	background-color: #999999;
	color: #FFFFFF;
	border: transparent;
    padding-right: 3px;
	text-align: right;
	vertical-align:text-middle;
	font-size: 10pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	height: 50px;
	width: 90px;
	text-decoration: none;
	-moz-border-radius: 15px;
	border-radius: 15px;
}


.rightsButtonSelected {
	background-color: #90a686;	
}

.standardButton {
	display: block;
	background-color: #226FCB;
	color: #FFFFFF;
	border: transparent;
	text-align: center;
	vertical-align:text-top;
	font-size: 10pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	height: 20px;
	text-decoration: none;
}

.cancelButton {
	display: block;
	background-color: #999999;
	color: #FFFFFF;
	border: transparent;
	text-align: center;
	vertical-align:text-top;
	font-size: 10pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	height: 20px;
	text-decoration: none;
}

.standardPopupButton {
	display: block;
	background-color: #CC6633;
	color: #FFFFFF;
	border: transparent;
	text-align: center;
	vertical-align:text-top;
	font-size: 10pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	height: 20px;
	text-decoration: none;
}

.typePanel {
	border-left:2px solid #cccccc;	
}

.3dPanel {
	border-left:4px solid #E7E7E7;	
	border-top:4px solid #E7E7E7;	
	border-right:2px solid #E7E7E7;	
	border-bottom:2px solid #E7E7E7;	
}

.btnCategorySocial {
		background-color: #226fcb;
}
.btnCategoryBusiness {
		background-color: #815651;
}
.btnCategorySchool {
		background-color: #74a538;
}
.btnCategorySports {
		background-color: #7a6a87;
}
.btnCategoryFitness {
		background-color: #b68b3f;
}

.dateRangeButton {
	display: block;
	background-color: #95C5FE;
	color: #FFFFFF;
	text-align: center;
	vertical-align:text-top;
	font-size: 8pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	border: transparent;
	height: 15px;
	width: 20px;
	text-decoration: none;
}

.dateRangeButtonSelected {
	display: block;
	background-color: #226FCB;
	color: #FFFFFF;
	text-align: center;
	vertical-align:text-top;
	font-size: 8pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	border: transparent;
	height: 15px;
	width: 20px;
	text-decoration: none;
}

.metaAddButton {
	display: block;
	background-color: transparent;
	color: #0034aa;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: left;
	vertical-align:text-top;
	font-size: 10pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	border: transparent;
	height: 15px;
	text-decoration: none;
}

.metaAddButtonNoMargins {
	display: block;
	background-color: transparent;
	color: #0034aa;
	border: transparent;
	text-align: left;
	vertical-align:text-top;
	margin-top: 2px;
	font-size: 10pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	height: 18px;
	text-decoration: none;
}

.blueButton {
	display: block;
	background-color: transparent;
	color: #0034aa;
	border: transparent;
	text-align: left;
	vertical-align:text-top;
	font-size: 10pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	height: 18px;
	text-decoration: none;
}

.yesLabel {
	color: green;
}

.maybeLabel {
	color: yellow;
}

.noLabel {
	color: red;
}

.eventListCellYes {
	border-left:5px solid green;	
}
.eventListCellNo {
	border-left:5px solid blue;	
}
.eventListCellMaybe {
	border-left:5px solid yellow;	
}

/*---Event detail panel --- */
.addPanelBackground {
	background-color: #D3D3D3;		
	height: 15px;
}

.detailTitle {
	font-size: 16pt;
	color: #000000;
	margin-top: 15px;
	margin-bottom: 15px;
}

.eventNameLabel {
	font-size: 12pt;
	color: #000000;
	margin-top: 0px;
	margin-bottom: 0px;
}

.categoryPanel {
	margin-bottom: 15px;
	margin-left: 15px;
}

.eventPicPanel {
	margin-top: 15px;
}

.eventDetailPanel {
	  height 1000px;
}	

.dcpLabel {
    color: #000000;
	font-size: 12pt;
    text-align: left;
    margin-right: 10px;
    margin-bottom: 0px;
}

.tagHeaderLabel {
	font-size: 12pt;
    color: #000000;
    text-align: left;
    margin-top: 15px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
}

.addTagHeaderLabel {
	font-size: 12pt;
    color: #000000;
    text-align: left;
    margin-top: 15px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
}

.eventDetailTabPanel {
	margin-top: 10px;
	border: transparent;
	
}

.tvRegistrationPanel {
	margin-left: 15px;
	margin-top: 15px;	
	width: 400px;
	height: 175px;
}

.tvEntryPanel {
	margin-bottom: 10px;
	width: 375px;
	height: 200px;
	background-color: #D8F0C0;		
	border: transparent;
}

.tvEntryPopup {
	background-color: #FFFFFF;		
	border:5px solid #D8F0C0;	
}

.tvAbsoluteEntryPanel {
   	height: 800px;
}	


.marginPanel {
	margin-top: 10px;
	margin-left: 15px;
	border: transparent;
}

.arrowRight {
	display: block;
	background-color: transparent;
	background-image: url(images/arrowright.jpg);
	background-repeat: no-repeat;
	border: transparent;
	margin-right: 3px;
	text-align: center;
	text-decoration: none;
	width: 20px;
	height: 10px;
}

.arrowDown {
	display: block;
	background-color: transparent;
	background-image: url(images/arrowdown.jpg);
	background-repeat: no-repeat;
	border: transparent;
	margin-right: 3px;
	text-align: center;
	text-decoration: none;
	width: 20px;
	height: 10px;
}



.resultsListPanel {
	margin-top: 0px;
	align: top;
    padding-bottom: 0px;
}

.resultsPanel {
	margin-left: 20px;
	margin-top: 15px;
	margin-bottom: 50px;
	
}

.borderPanel {
	border:3px solid #D8F0C0;	
}

.borderPopupPanel {
	border:3px solid #226FCB;	
	background-color: #FFFFFF;
}

.searchSelectionPanel {
	align: top;
    padding-bottom: 0px;    
}



.tvLeftPanel {
	margin-top: 20px;
	margin-left: 20px;
}

.tvRightPanel {
	margin-top: 20px;
}

/*------ TimeView Finder Box --------- */
.tvFinderPanelLabel {
    color: #000000;
	font-size: 14pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	text-align: center;
}

.tvFinderCatButton {
	display: block;
	background-color: #FAF2F8;
	background-repeat: no-repeat;
	margin-top: 4px;
	margin-left: 10px;
	text-align: center;
	vertical-align:text-top;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	font-size: 14px;
	color: 00000;
	text-decoration: none;
	width: 80px;
	height: 30px;
}

.tvFinderHeaderPanel {
	height:  40px;	
	width:  90px;	
	background-color: #D8F0C0;
	margin-bottom: 15px;
}

.tvFinderButtonsPanel {
	margin-top: 15px;		
	margin-bottom: 15px;		
}	

.categoryTable {
	margin-left: 8px;
    margin-right: 8px;
}

.zipButton {
 	display: block;
	margin-left: 5px;
	height: 20px;
}

.tbzip {
  margin-left: 8px;
  height: 20px;
}

.tvSearchPanel {
	margin-top:5px;	
}	

/*------ Time Picker --------- */
.hoverAMPMButton {
	background-color: #CCFFCC;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.timeEntryLabel {
	background-color: #FFFFFF;
  font-size: 12pt;
  margin-top: 3px;
  	width: 90px;
	height:  25px;	
}

.noHoverAMPMButton {
	background-color: #FFCC99;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.hoverHourButton {
	background-color: #FFFFCC;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.noHoverHourButton {
	background-color: #FF99CC;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.noHover0Button {
	background-color: #FF9933;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.hover0Button {
	background-color: #A0C53F;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.noHover30Button {
	background-color: #FF9933;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.hover30Button {
	background-color: #F08860;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.noHover15sButton {
	background-color: #CDAF78;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.hover15sButton {
	background-color: #1E90FF;
  font-size: 9pt;
  margin-top: 3px;
  	width: 35px;
	height:  25px;	
}

.noHoverMinutesButton {
	background-color: transparent;
  font-size: 9pt;
  margin-top: 3px;
  	width: 23px;
	height:  18px;	
}

.hoverMinutesButton {
	background-color: #FF9933;
  font-size: 9pt;
  margin-top: 3px;
  	width: 23px;
	height:  18px;	
}


/*------ Calendar View/Config Menu --------- */

.submitButton {
  display: block;
  font-size: 9pt;
  margin-top: 7px;
  margin-left:20px;
}

.calendarsLabel {
	font-size: 12pt;
	font-weight: bold;
	color: #000000;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
}

.calendarsSubLabel {
	font-size: 10pt;
	font-weight: bold;
	color: #000000;
    padding-right: 5px;
    padding-bottom: 3px;
}

.calendarConfigButton {
	display: block;
	background-color: transparent;
	background-image: url(images/timeshaker_logo_shaker_button.png);
	background-repeat: no-repeat;
	margin-top: 0px;
	padding: 0;
	border: transparent;
	text-align: center;
	vertical-align:text-top;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	font-size: 10px;
	color: 000000;
	text-decoration: none;
	width: 30px;
	height: 30px;
}

.timePlannerMenuButton {
	display: block;
	background-color: transparent;
	background-image: url(images/timePlanners.png);
	background-repeat: no-repeat;
	margin-top: 20px;
	padding-top: 20;
	padding-bottom: 30px;
	border: transparent;
	text-align: center;
	vertical-align:text-top;
	text-decoration: none;
	width: 180px;
	height: 60px;
}

.showCalendar {
	display: block;
	background-color: transparent;
	background-image: url(images/calendar_titlebar_show.png);
	background-repeat: no-repeat;
	border: transparent;
	vertical-align:text-top;
	text-decoration: none;
	width: 185px;
	height: 27px;
}

.hideCalendar {
	display: block;
	background-color: transparent;
	background-image: url(images/calendar_titlebar_hide.png);
	background-repeat: no-repeat;
	border: transparent;
	vertical-align:text-top;
	text-decoration: none;
	width: 185px;
	height: 27px;
}

.imageButton {
	display: block;
	background-color: transparent;
	background-repeat: no-repeat;
	border: transparent;
	vertical-align:text-top;
	text-decoration: none;
}

.scheduleButton {
	display: block;
	background-color: transparent;
	color: #0034aa;
	text-align: center;
	vertical-align:text-top;
	font-size: 12pt;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	border: transparent;
	text-decoration: none;
}

.tvButton {	
	display: block;
	font-size: 9pt;
    border: none;
    background-color: transparent;
}

.tvCloseButton {
	display: block;
	background-color: transparent;
	background-image: url(images/closebutton.png);
	background-repeat: no-repeat;
	border: transparent;
	vertical-align:text-top;
	text-decoration: none;
	width: 19px;
	height: 19px;
}

.tvGalleryCloseButton {
	display: block;
	background-color: transparent;
	background-image: url(images/tvgalleryclosebutton.png);
	background-repeat: no-repeat;
	border: transparent;
	vertical-align:text-top;
	text-decoration: none;
	width: 236px;
	height: 27px;
}

.tvLabel {
	font-size: 14px;	
	color: #ffffff;
	font-family: Helvetica, Calibri, Arial, sans-serif;
    text-align: right;
	vertical-align:text-middle;
}

.buttonFrameColor {
	background-color: #1C3952;
}
.buttonFrameColorHL {
	background-color: #689797;
}
.buttonFrameBorder {
	border:3px solid #FFFFFF;	
}
.buttonFrameButton {
	background-color: transparent;
}

.highlightBorder3 {
	border:3px solid transparent;	
}

.highlightBorder2 {
	border:2px solid transparent;	
}

.tvButtonPanel1 {
	background-color: transparent;
	background-image: url(images/tvbutton1.png);
	background-repeat: no-repeat;
    border: none;
	height: 50px;
	width: 50px;
}

.calendarStackPanel {
	font-size: 32px;	
	border: 3px;
	background-color: white;
	
}	

.horizontalPanel {
    align: top;
}

.configurationTable {
	margin: 0;
	padding-top:0px;
	align: top;
}

.userNameHL {
	text-decoration: none;
	underline: none;
}	

/*------ calendar --------- */

/* Timeline  */



.standardBackColor {background-color: #FFFFFF;}

.tvBackColor {background-color: #E5ECF9;}
.backColor0 {background-color: #D8ECDF;}
.backColor1 {background-color: #ADCCEB;}
.backColor2 {background-color: #D9D99D;}
.backColor3 {background-color: #FFEDBF;}	
.backColor4 {background-color: #EAEBD9;}
.backColor5 {background-color: #FFD7C8;}
.backColor6 {background-color: #99CCFF;}
.backColor7 {background-color: #D6CCC2;}	
.backColor8 {background-color: #F2C783;}	
.backColor9 {background-color: #C0DFEC;}	
.backColor10 {background-color: #EDEBFF;}								
.backColor11 {background-color: #EBD8C3;}	
.backColor12 {background-color: #FDF1F4;}	
.backColor13 {background-color: #FFDCA0;}	
.backColor14 {background-color: #a9d98e;}	
.backColor15 {background-color: #FAFBB5;}
.backColor16 {background-color: #C2CCD6;}	
.backColor17 {background-color: #A7D9D3;}	
.backColor18 {background-color: #d9a58e;}	
.backColor19 {background-color: #CCFFCC;}

.eventButton {
	display: block;
	border-top: transparent;
	border-right: transparent;
	background-color: #D8ECDF;
	border-left:3px solid blue;
	border-bottom:2px solid blue;

-moz-border-bottom-left-radius: 5px;
-moz-border-bottom-right-radius: 5px;
-moz-border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top-right-radius: 5px;

	        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        text-align:left;
        padding-left: 0;
        padding-right: 0;
}

.standardLeftBorderColor {border-left:3px solid #000000;}
.standardBottomBorderColor {border-bottom:3px solid #000000;}
.leftBorderColor0 {border-left:3px solid  #D8ECDF;}
.leftBorderColor1 {border-left:3px solid #ADCCEB;}
.leftBorderColor2 {border-left:3px solid #D9D99D;}
.leftBorderColor3 {border-left:3px solid #FFEDBF;}	
.leftBorderColor4 {border-left:3px solid #EAEBD9;}
.leftBorderColor5 {border-left:3px solid #FFD7C8;}
.leftBorderColor6 {border-left:3px solid #99CCFF;}
.leftBorderColor7 {border-left:3px solid #D6CCC2;}	
.leftBorderColor8 {border-left:3px solid #F2C783;}	
.leftBorderColor9 {border-left:3px solid #C0DFEC;}	
.leftBorderColor10 {border-left:3px solid #EDEBFF;}								
.leftBorderColor11 {border-left:3px solid #EBD8C3;}	
.leftBorderColor12 {border-left:3px solid #FDF1F4;}	
.leftBorderColor13 {border-left:3px solid #FFDCA0;}	
.leftBorderColor14 {border-left:3px solid #a9d98e;}	
.leftBorderColor15 {border-left:3px solid #FAFBB5;}
.leftBorderColor16 {border-left:3px solid #C2CCD6;}	
.leftBorderColor17 {border-left:3px solid #A7D9D3;}	
.leftBorderColor18 {border-left:3px solid #d9a58e;}	
.leftBorderColor19 {border-left:3px solid #CCFFCC;}


.tvBorderColor {border:2px solid #8CBBFA;}
.borderHighlight {border:2px solid #FFFB94;}
.borderColor0 {border:2px solid #D8ECDF;}
.borderColor1 {border:2px solid #8ba4be;}
.borderColor2 {border:2px solid #9b9b70;}
.borderColor3 {border:2px solid #a6a778;}	
.borderColor4 {border:2px solid #aaab9d;}
.borderColor5 {border:2px solid #c0a196;}
.borderColor6 {border:2px solid #7096bc;}
.borderColor7 {border:2px solid #a9a199;}	
.borderColor8 {border:2px solid #a7895a;}	
.borderColor9 {border:2px solid #95adb8;}	
.borderColor10 {border:2px solid #bbbaca;}								
.borderColor11 {border:2px solid #b4a595;}	
.borderColor12 {border:2px solid #b6adaf;}	
.borderColor13 {border:2px solid #caae7e;}	
.borderColor14 {border:2px solid #7da169;}	
.borderColor15 {border:2px solid #c8b995;}
.borderColor16 {border:2px solid #9ba3ab;}	
.borderColor17 {border:2px solid #7a9f9a;}	
.borderColor18 {border:2px solid #a37b6a;}	
.borderColor19 {border:2px solid #9bc29b;}

.headerColor0 {background-color:#e9fff0;}
.headerColor1 {background-color:#badbfd;}
.headerColor2 {background-color:#f1f1ad;}
.headerColor3 {background-color:#f0f1ad;}	
.headerColor4 {background-color:#fdffeb;}
.headerColor5 {background-color:#f1cbbd;}
.headerColor6 {background-color:#bef7ff;}
.headerColor7 {background-color:#fff3e7;}	
.headerColor8 {background-color:#ffe2a8;}	
.headerColor9 {background-color:#f9f9ff;}	
.headerColor10 {background-color:#fcf7ff;}								
.headerColor11 {background-color:#ffead3;}	
.headerColor12 {background-color:#fdfdfd;}	
.headerColor13 {background-color:#fff3cf;}	
.headerColor14 {background-color:#c6ffa6;}	
.headerColor15 {background-color:#fffbed;}
.headerColor16 {background-color:#e3effb;}	
.headerColor17 {background-color:#c4fff7;}	
.headerColor18 {background-color:#ffc1a6;}	
.headerColor19 {background-color:#ebffec;}

/* Calendar Event */

.eventButtonYes {
	display: block;
/*	background-color: #FAF2F8;*/
/*	background-image: url(images/calendar_column_green.png);*/
	background-color: #ffffff;
	background-repeat: no-repeat;
	padding: 0;
	text-align: center;
	vertical-align:text-top;
	font-family: Helvetica, Calibri, Arial, sans-serif;
	font-size: 9px;
	color: 00000;
	text-decoration: none;
	border-top:5px solid #7FAF1B;
	width: 115px;
}


.timeViewButton {
	background-color: #ffffff;
	background-repeat: no-repeat;
}
.timeViewButtonOnCalendar {
	border-left:5px solid blue;
}
.timeViewButtonYes {
	border-left:5px solid #7FAF1B;
}
.timeViewButtonMaybe {
	border-left:5px solid yellow;
}

.month1HeaderCell {
    background-color: #6b95c7;
	font-size: 11pt;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
}

.month2HeaderCell {
    background-color: #6b95c7;
	font-size: 11pt;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 3px;
}

.yearHeaderCell {
  font-size: 12pt;
  color: #6b95c7;
  text-align: left;
}

.cellBorder {
	border:2px solid #E1E1E1;
	padding: 0px;
	border-collapse: collapse;
}

.noCellBorder {
	margin: 0px;
	padding: 0px;
	border-collapse: collapse;
}

.backgroundColor0 {
	background-color: #F4F8FF;
	vertical-align:top;
}
.backgroundColor1 {
	background-color: #F9ECEC;
	vertical-align:top;
}
.backgroundColor2 {
	background-color: #F1F6E4;
	vertical-align:top;
}
.backgroundColor3 {
	background-color: #FCE8CD;
	vertical-align:top;
}


.shadePanel {
	background-color: #B5C3C4;
}

.timelineDayPanel {
    background-color: #5d88a2;	
	width: 115px;
}

.timelineWeekendPanel {
    background-color: #2e647b;	
	width: 115px;
}

.calendarDayLabel {
  font-size: 9pt;
  margin-left: 5px;
color: #F2F2F2;
  width:  115px;
  height: 20px;
}

.calendarLineBreakLabel {
  font-size: 10pt;
  margin-left: 5px;
  background-color: transparent;
  width:  115px;
  height: 3px;
}

.labelBreak {
	word-wrap: break-word;
}

.calendarLineBreak {
    background-color: #0034aa;	
	width: 115px;
	height: 3px;
}
/* Event Selection  */

.dialogBox {
  width: 200px;
  height: 100px;
}

.eventSelctionPanel {
    background-color: #FFFFFF;
	padding-left: 200px;
}

.selectionHeader {
  font-size: 12pt;
  margin-left: 5px;
  color: #4B538B;
  
}

/*------Tag Detail Page--------- */

.detailPanelTable {
	padding-top: 0px;
  
}

.tagActivitiesTitle {
	font-size: 14pt;
	color: #000000;
	padding-top: 15px;
  
}

.detailPanelTableHeader {
	color: #000000;
	padding-top: 0px;
	font-weight: bold;
	font:25px Arial,serif;
}



/*------advertising panel--------- */
.sponsor {
	color: #FFFFFF;
	font: sans-serif;
	font-style: italic;
	font-size: 14pt;
	padding-bottom: 5px;
	margin-left: 40px;
	
}

.italic {
	font-style: italic;	
}

.event {
	color: #FFFFFF;
	font: sans-serif;
	font-size: 14pt;
	padding-bottom: 5px;
	
}

.adBarRight {
    background-color: #EBEBEB;
	margin-left: 20px;
}

.adSquare {
	margin-left: 15px;
    margin-right: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.adMessage {
	font-family: Helvetica, Calibri, Arial, sans-serif;
	font-size: 10pt;
	margin-top: 7px;
	margin-left: 7px;
}

/** Most GWT widgets already have a style name defined */
.gwt-DialogBox {
  width: 400px;
}

.dialogVPanel {
  margin: 5px;
}

.serverResponseLabelError {
  color: red;
}

.highlightOn {
	border:5px solid #25E8F2;
}

.highlightOff {
	border:5px solid #FFFFFF;
}

/** Set ids using widget.getElement().setId("idOfElement") */
#closeButton {
  margin: 15px 6px 6px;
}

.dialogHeaderLabel {
	font-family: Helvetica, Calibri, Arial, sans-serif;
	font-size: 1.6em;
	color: #2020a4;
	background-color: #e8f8e8;
	margin: 0px 0px 0px;
	padding: 10px 3.8em;
	text-align: left;
	width: 100%;
}

.galleryListPanel {
	background-color: #f8fdef;
 	border:1px solid #a0a0a0;
}
.invisibleFrameStyle {
	border:0;
}
.selectedStyle {
	border:3px solid #7070a0;
}
.lsabel12pt {
}
.clickableLink {
	color: blue;
	text-decoration: underline;
	cursor: hand;
}

/*
/*
================================================================
== SCRAPBOOK LAYOUT STYLES (Corrected)
================================================================
*/

/* --- 1. Import a handwritten font from Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');

/* --- 2. The Book and Page Styles --- */
.scrapbook-cover {
    background-color: #5d4037;
    background-image: url('https://www.transparenttextures.com/patterns/leather.png');
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.4), inset 0 0 15px rgba(0,0,0,0.5);
    box-sizing: border-box;   /* <<< ADD THIS! */
}


.scrapbook-page {
    background-color: #fdf5e6;
    background-image: url('https://www.transparenttextures.com/patterns/old-paper.png');
    box-shadow: 0 0 15px rgba(0,0,0,0.5) inset;
    border: 1px solid #dcd0b8;
    /* DO NOT set width, margin, or padding here */
    /* If you want, you can keep min-height: 800px, but that's optional */
}



/* --- 3. The Scrapbook Item and Photo Corner Styles --- */
.scrapbook-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.scrapbook-item:hover {
    transform: scale(1.05) !important; /* Override rotation for a nice hover effect */
    z-index: 10;
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
}

.selected-scrapbook-item {
    z-index: 5;
    box-shadow: 0 0 0 4px #007bff, 0 5px 15px rgba(0,0,0,0.3);
}

.scrapbook-photo {
    position: relative;
    display: inline-block;
}

/* Corrected Photo Corners (Top-Left and Bottom-Right) */
.scrapbook-photo::before,
.scrapbook-photo::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: rgba(250, 245, 230, 0.9);
    z-index: 2;
    pointer-events: none; /* Allows clicks to pass through */
}

.scrapbook-page .scrapbook-photo .gwt-FlowPanel {
    /* A brighter, off-white color to contrast with the aged paper */
    background-color: #000000; /* "Floral White" */
}

/* Top-Left Corner */
.scrapbook-photo::before {
    top: -4px;
    left: -4px;
    border-width: 25px 25px 0 0;
    border-right-color: transparent;
    border-bottom-color: transparent;
}

/* Bottom-Right Corner */
.scrapbook-photo::after {
    bottom: -4px;
    right: -4px;
    border-width: 0 0 25px 25px;
    border-top-color: transparent;
    border-left-color: transparent;
}

/* --- 4. Apply the Handwritten Font --- */
.scrapbook-page .gwt-HTML p {
    font-family: 'Caveat', cursive;
    font-size: 1.1em;
    color: #444;
}

/*
/*
================================================================
== FILTER BAR
================================================================
*/

.ts-grid-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #f4f8fb;
    border-radius: 13px;
    padding: 5px 12px;
    margin-bottom: 12px;
    box-shadow: 0 1px 8px rgba(60, 80, 100, 0.06);
}

.ts-searchbox {
    border-radius: 12px 0 0 12px;
    border: 1px solid #bdd4f6;
    border-right: none;
    padding: 6px 10px;
    font-size: 0.98rem;
    min-width: 200px;
    flex: 1;
    height: 32px;
    outline: none;
    transition: border 0.2s;
    box-shadow: 0 1px 2px rgba(20, 80, 200, 0.04);
    box-sizing: border-box;
}

.ts-searchbox:focus {
    border: 2px solid #4593fa;
    border-right: none;
    background: #fff;
}

.ts-nofn {
    font-size: 0.97rem;
    margin-left: 8px;
    color: #335;
    min-width: 64px;
    font-weight: 500;
}

.ts-clearbtn {
    border: 1px solid #bdd4f6;
    border-left: none;
    background: #e1e7ec;
    border-radius: 0 12px 12px 0;
    width: 30px;
    height: 32px;
    line-height: 32px;
    font-size: 1.05em;
    color: #888;
    margin-left: 0;
    margin-right: 8px;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    align-self: center;
    padding: 0;
}
.ts-clearbtn:hover { background: #bdd4f6; color: #333; }

.ts-toggle-btn {
    border: 1.2px solid #c0d6ef;
    border-radius: 11px;
    padding: 3px 11px;
    font-size: 0.98rem;
    margin-right: 3px;
    min-width: 40px;
    min-height: 27px;
    cursor: pointer;
    color: var(--toggle-inactive, #2a496e);
    background: var(--toggle-bg-inactive, #f0f7ff);
    transition: background 0.18s, color 0.18s, border 0.18s;
}
.ts-toggle-btn-down {
    background: var(--toggle-active, #4593fa);
    color: #fff;
    border: 1.2px solid var(--toggle-active-border, #2476c9);
}
.ts-toggle-btn:focus { outline: 2px solid #4593fa; }

.ts-mode-group {
    display: flex;
    gap: 2px;
    margin-left: 9px;
    margin-right: 5px;
}
.ts-mode-btn {
    border: none;
    border-radius: 13px;
    padding: 3px 13px;
    background: var(--mode-bg-inactive, #f6ebfa);
    color: var(--mode-inactive, #8c3cbe);
    font-size: 0.98rem;
    cursor: pointer;
    min-width: 41px;
    min-height: 27px;
    margin-right: 0px;
    transition: background 0.16s, color 0.16s;
}
.ts-mode-btn-down {
    background: var(--mode-active, #8c3cbe);
    color: #fff;
}
.ts-no-results {
    color: #c00;
    font-weight: 500;
    font-size: 0.97rem;
    margin-left: 13px;
}























/* --- Edit button: base look (hidden by default) --- */
.gcf-edit-btn {
  display: none;                 /* stays hidden until .ts-edit-mode */
  position: absolute;
  top: 8px; 
  z-index: 10;

  padding: 6px 10px;
  border-radius: 9999px;
  background: #2563eb;
  color: #fff;
  font-size: 0.9rem;
  line-height: 1;
  user-select: none;

  /* layout & visuals */
  align-items: center;
  gap: 6px;
  border: 1px solid #1e40af;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
  cursor: pointer;

  /* keep size stable */
  min-width: 32px;
  min-height: 32px;
}

/* Show the buttons only in edit mode */
.ts-edit-mode .gcf-edit-btn {
  display: inline-flex;          /* show + allow icon+label layout */
}

/* Hover/focus */
.gcf-edit-btn:hover { background: #1d4ed8; }
.gcf-edit-btn:focus {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

/* Hide whenever a dialog is up / edit is paused */
.ts-edit-mode.ts-edit-paused .gcf-edit-btn { display: none; }
.ts-edit-paused .gcf-edit-btn { display: none !important; }

/* Pencil icon via CSS mask (optional) */
.gcf-pen {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('/images/icons/pencil.svg') no-repeat center / contain;
          mask: url('/images/icons/pencil.svg') no-repeat center / contain;
}

/* Hide text on narrow screens, keep icon */
@media (max-width: 640px) {
  .gcf-edit-btn .gcf-label { display: none; }
}

.gcf-edit-btn {
  width: auto !important;
  white-space: nowrap;
}

/* Existing Pen style */
.gcf-pen {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('/images/icons/pencil.svg') no-repeat center / contain;
          mask: url('/images/icons/pencil.svg') no-repeat center / contain;
}

/* --- NEW: Plus style for Add Button --- */
.gcf-plus {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: currentColor;
  /* Make sure you have a plus.svg or point this to a generic plus icon */
  -webkit-mask: url('/images/icons/plus.svg') no-repeat center / contain;
          mask: url('/images/icons/plus.svg') no-repeat center / contain;
}

/* Optional: If you don't have a plus.svg, use this CSS-only fallback instead of the rule above: */
/*
.gcf-plus {
  width: 14px;
  height: 14px;
  display: inline-block;
  position: relative;
}
.gcf-plus::before, .gcf-plus::after {
  content: '';
  position: absolute;
  background: currentColor;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.gcf-plus::before { width: 2px; height: 12px; }
.gcf-plus::after { width: 12px; height: 2px; }
*/










/*
================================================================
== FILTER BUTTONS COMPONENT (REVISED)
================================================================
*/

/* Wrapper to constrain the width of the filter component */
.filter-container-wrapper {
  max-width: 1200px; 
  margin: 0 auto; 
}

/* Panel for the breadcrumbs (e.g., "All > Services") */
.filter-breadcrumb-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* <-- CHANGED TO ALIGN TO THE TOP */
    gap: 10px;
    margin-bottom: 20px;
    padding-left: 10px;
}

/* Panel that holds the large, circular category buttons */
.filter-category-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* The individual button containers (FocusPanel) */
.filter-button {
    text-align: center;
    cursor: pointer;
    padding: 0 5px; /* Adds a little horizontal breathing room */
    box-sizing: border-box;
}

.filter-button.gwt-FocusPanel:focus {
    outline: none; /* Removes default GWT focus outline */
}

/* The circular container for the image or text */
.filter-button-image-container {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border-style: solid;
    border-width: 3px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    display: flex;
    justify-content: center;
    align-items: center;
    /* ADDED: This makes the border color change smooth */
    transition: border-color 0.2s ease-in-out;
}

/* The actual image inside the circle */
.filter-button-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* ADDED: This makes the zoom effect smooth */
    transition: transform 0.25s ease;
}

/* ADDED: The zoom effect on hover */
.filter-button:hover .filter-button-image {
    transform: scale(1.1);
}

/* Style for text-only buttons (like 'All') */
.filter-button-text-image {
    background-color: #f0f0f0;
}
.filter-button-text-image .gwt-Label {
    font-size: 1.2em;
    font-weight: bold;
    color: #444;
}

/* The text label underneath a large button */
.filter-button .gwt-Label {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
}


/* --- HIDE ARROWS ON NUMBER INPUTS --- */

/* For Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

/* For Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/* --- Styles for the new RecordSetManager Buttons --- */

/* The root panel for each on-demand button */
.record-set-button {
  cursor: pointer;
  text-align: center;
  padding: 0 5px; /* Adds a little horizontal breathing room */
  box-sizing: border-box;
}

.record-set-button:focus {
    outline: none; /* Removes default GWT focus outline */
}

/* The text label underneath the circle */
.record-set-label {
  display: block;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

/* Style for the "toggled-on" (active) state */
.record-set-button.toggled-on .filter-button-image-container {
  border-width: 4px; /* Example: make border thicker when selected */
}

/* Style for the "loading" state */
.record-set-button.loading-state {
  opacity: 0.6;
  pointer-events: none; /* Prevents clicking while loading */
  cursor: wait;
}

/* Column Container */
/* --- Optimized 4-Column Miller Layout --- */

.ts-miller-container {
    display: flex;
    background: white;
    height: 650px;
    /* Increased width to accommodate the 4th column */
    width: 1350px; 
    max-width: 96vw;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    border: 1px solid var(--theme-color-light, #eee);
    /* Crucial: Allows horizontal scrolling if the screen is narrow */
    overflow-x: auto; 
}

/* Full-screen overlay for navigator/selector MCRS — survives GWT setVisible() toggling */
.ts-mcrs-overlay {
    display: flex;
    flex-direction: column;
}

/* Base column styles */
.ts-column-wrapper {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #f0f0f0;
    transition: background-color 0.3s;
    min-height: 0;
    overflow: hidden;
}

/* Three navigation columns (Orgs, Layouts, Lists) */
.col-nav {
    flex: 0 0 220px;
    width: 220px;
}

/* Records column expands to fill all remaining space */
.col-records {
    flex: 1 1 0;
    min-width: 0;
    background-color: #fcfcfc;
}

/* Selected tray column — fixed width, card display */
.col-selected {
    flex: 0 0 180px;
    width: 180px;
    background-color: #f8fafc;
    border-left: 1px solid #e8edf2;
}

.ts-column-header {
    background: #f8f9fa;
    padding: 12px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #777;
    border-bottom: 1px solid #eee;
}

.ts-column-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* List Items */
.ts-list-item {
    padding: 14px 18px;
    border-bottom: 1px solid #f9f9f9;
    cursor: pointer;
    font-size: 13px;
    color: #333;
    transition: all 0.2s ease;
}

/* Highlight for the Drill-Down Path (Blue background) */
.ts-list-item.active-path {
    background-color: var(--theme-color-main, #4285f4) !important;
    color: white !important;
    font-weight: 500;
}

/* Highlight for selected items (Selection state with border) */
.ts-list-item.selected-state {
    border-left: 5px solid var(--theme-color-main, #4285f4);
    background-color: #f0f7ff;
}

.ts-list-item:hover:not(.active-path) {
    background-color: #f1f3f4;
}

/* Drop target highlight when dragging a record over a list row */
.ts-drop-target-hover {
    background-color: #d2e8ff !important;
    outline: 2px dashed #4285f4;
    outline-offset: -2px;
}

/* "All" filter row — sits above each column's scroll area */
.ts-all-filter-row {
    background-color: #f0f4ff;
    border-bottom: 2px solid #dde5ff;
    color: #5070c0;
}
.ts-all-filter-row:hover {
    background-color: #e0eaff;
}

.ts-item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.ts-selection-badge {
    color: #4285f4; /* Blue to match your path highlight */
    font-size: 24px;
    line-height: 1;
    margin-left: 10px;
    font-weight: bold;
}




/* ================================================================
== MODERN JUKEBOX STYLES (Consolidated & Fixed)
================================================================ */

/* 1. The Container
   - Desktop width is controlled by Java (container.setWidth(...))
   - Center the whole jukebox with auto margins
   - Make left/right outer padding perfectly symmetric on desktop
*/
.ts-jukebox-container {
  /* alignment variables so title + content line up */
  --ts-juke-pad: 20px;     /* outer padding */
  --ts-juke-inset: 15px;   /* inner card padding (player/playlist) */
  --ts-juke-gap: 20px;     /* space between player + playlist */

  position: relative;
  display: flex;
  flex-wrap: wrap;

  /* KEY FIX: don't use flex gap for the desktop spacing
     (it creates a subtle “extra width / extra left air” feeling) */
  gap: 0;

  background: #1a1a1a;
  padding: 70px var(--ts-juke-pad) var(--ts-juke-pad) var(--ts-juke-pad);
  border-radius: 12px;
  color: white;
  font-family: sans-serif;
  min-height: 400px;

  /* KEY FIX: do NOT force width:100% here (lets Java's px width win) */
  max-width: 100%;
  box-sizing: border-box;

  /* center the fixed-width container like your World History block */
  margin-left: auto;
  margin-right: auto;

  /* prevent any internal overflow from creating a “ghost” width */
  overflow-x: clip;
}

/* 2. The Absolute Title
   - Align title with the LEFT EDGE OF PLAYER CONTENT (not the container edge)
*/
.ts-absolute-title {
  position: absolute;
  top: 15px;
  left: calc(var(--ts-juke-pad) + var(--ts-juke-inset));
  font-size: 2.2em;
  text-align: left;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;

  /* keep long titles from forcing width */
  max-width: calc(100% - (var(--ts-juke-pad) + var(--ts-juke-inset)) * 2);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 3. Section Layouts */
.ts-player-section {
  flex: 2;
  min-width: 300px;

  /* KEY FIX: create the between-columns spacing here (not via gap) */
  margin-right: var(--ts-juke-gap);

  /* “inset card” feel */
  background: #252525;
  border-radius: 8px;
  padding: var(--ts-juke-inset);
  border: 1px solid #444;
  box-sizing: border-box;

  /* allow flex child to shrink instead of overflowing */
  min-width: 0;
}

.ts-playlist-section {
  flex: 1;
  min-width: 250px;
  max-height: 500px;
  overflow-y: auto;

  background: #252525;
  border-radius: 8px;
  padding: var(--ts-juke-inset);
  border: 1px solid #444;
  box-sizing: border-box;

  /* allow flex child to shrink instead of overflowing */
  min-width: 0;
}

/* 4. Era Fonts (Injected via Java) */
.era-80s { font-family: 'Press Start 2P', cursive; text-shadow: 3px 3px #ff00ff; }
.era-old-timey { font-family: 'Rye', cursive; text-shadow: 2px 2px #000; }
.era-modern { font-family: 'Roboto', sans-serif; letter-spacing: 2px; text-transform: uppercase; }

/* 5. Controls & Buttons */
.ts-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 15px;
}

.ts-controls button {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  outline: none;

  background: #e62117; /* YouTube Red */
  color: #fff;
  padding: 12px 20px;
  font-size: 20px;
  border-radius: 50px;
  cursor: pointer;
  transition: transform 0.2s;
  line-height: 1;
}

.ts-controls button:hover { transform: scale(1.1); }

/* 6. Progress Bar & Time Display */
.ts-vol-prog-panel {
  margin: 15px 0;
  background: #2a2a2a;
  padding: 12px;
  border-radius: 8px;
}

.ts-progress-bar {
  width: 100%;
  height: 10px;
  background: #444;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 5px;
}

.ts-progress-fill {
  height: 100%;
  width: 0%;
  background: #e62117;
  transition: width 0.2s linear;
}

.ts-time-display {
  font-size: 0.85em;
  color: #888;
  text-align: right;
}

.ts-now-playing {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}

/* 7. Playlist Item Styling */
.ts-playlist-item {
  padding: 12px;
  margin-bottom: 8px;
  background: #333;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.3s;
}

.ts-playlist-item:hover { background: #444; }
.ts-playlist-item.active {
  border-left: 4px solid #e62117;
  background: #444;
}

/* 8. Responsive 16:9 wrapper for the YouTube player */
.ts-player-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
}

/* Force whatever the YouTube widget emits to fill wrapper */
.ts-player-wrap iframe,
.ts-player-wrap > div,
.ts-player-wrap * {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Extra safety: iframe can't exceed its flex box */
.ts-player-section iframe { max-width: 100% !important; }

/* ================================================================
== MOBILE: full-width, stacked layout (keeps your mobile win)
================================================================ */
@media (max-width: 640px) {
  .ts-jukebox-container {
    /* on mobile we want it to fill the viewport */
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;

    --ts-juke-pad: 12px;
    --ts-juke-gap: 12px;
    padding: 70px var(--ts-juke-pad) var(--ts-juke-pad) var(--ts-juke-pad);

    /* on mobile, flex gap is fine and simpler */
    gap: 12px;
  }

  .ts-player-section,
  .ts-playlist-section {
    flex: 1 1 100%;
    width: 100%;

    /* remove desktop-only spacing */
    margin-right: 0;
  }

  .ts-absolute-title {
    left: var(--ts-juke-pad);
    font-size: 1.6em;
    white-space: normal;
    max-width: calc(100% - (var(--ts-juke-pad) * 2));
  }

  .ts-controls {
    gap: 12px;
    flex-wrap: nowrap;
  }

  .ts-controls button {
    width: 64px;
    height: 64px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
  }
}

.ts-skeleton-shimmer {
    position: relative;
    overflow: hidden;
}

.ts-skeleton-shimmer::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg, 
        
        rgba(255,255,255,0) 0, 
        rgba(255,255,255,0.2) 20%, 
        rgba(255,255,255,0.5) 60%, 
        rgba(255,255,255,0)
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

/* Unique name to avoid conflict with your transform-based shimmer */
@keyframes skeleton-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer-animation {
    animation: skeleton-shimmer 2s infinite linear;
}









:root {
  --primary-color: #025185;
  --bg-color: #f4f7f9;
  --text-color: #333;
  --border-radius: 8px;
}

.record-container {
  max-width: 800px;
  margin: 2rem auto;
  background: white;
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', Roboto, sans-serif;
}

.record-container-fullscreen {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  border: none !important;
  box-sizing: border-box;
}

fieldset {
  border: none;
  margin-bottom: 2rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

legend {
  font-size: 1.25rem;
  font-weight: bold;
  color: var(--primary-color);
  margin-bottom: 1rem;
  width: 100%;
  border-bottom: 2px solid var(--bg-color);
  padding-bottom: 5px;
}

.form-group {
  flex: 1 1 300px; /* Grows, shrinks, but stays around 300px */
  display: flex;
  flex-direction: column;
}

.form-group-btn {
  flex: 0 0 auto; /* Selection buttons: shrink-wrap to their configured cell width */
}

.form-group.full-width {
  flex: 1 1 100%;
}

.record-container input[type="text"],
.record-container .gwt-TextBox {
  height: 36px;
  padding: 0 8px;
  box-sizing: border-box;
}

label {
  margin-bottom: 5px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #666;
}

input, select, textarea {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px; /* Prevents mobile zoom */
}

input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(2, 81, 133, 0.1);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid #e8e8e8;
}

button {
  padding: 12px 24px;
  border-radius: var(--border-radius);
  border: none;
  cursor: pointer;
  font-weight: bold;
  transition: opacity 0.2s;
}

.btn-save {
  background: var(--primary-color) !important;
  color: #ffffff !important;
  border: none;
  padding: 12px 32px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  letter-spacing: 0.02em;
}
.btn-cancel {
  background: #ffffff;
  color: #555;
  border: 2px solid #bbb;
  padding: 12px 28px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.btn-save:hover { opacity: 0.88; }
.btn-cancel:hover { background: #f0f0f0; border-color: #999; }

/* Standard Fields (Visibility) Section */
.standard-section {
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  background: #f7f7f7;
  margin-top: 10px;
}
.standard-section-title {
  font-size: 0.75em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  padding: 6px 10px 0 10px;
}

/* Entry Panel Title Bar */
.entry-panel-title-bar {
  width: calc(100% + 4rem);
  margin: -2rem -2rem 1.2rem -2rem;
  padding: 14px 20px;
  border-radius: 6px 6px 0 0;
}
.entry-panel-title {
  font-size: 1.8em;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

/* Entry Panel Intro Section */
.entry-panel-intro {
  background: #f5f7fa;
  border-radius: 6px;
  padding: 16px 18px;
  margin-bottom: 8px;
  border: 1px solid #e2e8f0;
}
.entry-panel-intro-img {
  width: 120px;
  height: auto;
  border-radius: 4px;
  flex-shrink: 0;
}
.entry-panel-intro-subtitle {
  font-size: 1.1em;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 6px;
}
.entry-panel-intro-desc {
  font-size: 0.95em;
  color: #4a5568;
  line-height: 1.5;
}
.entry-panel-required-note {
  font-size: 12pt;
  color: #cc0000;
  margin-top: 10px;
}

/* Required field indicators */
.entry-field-required-label {
  color: #c53030;
}
.entry-field-error {
  border: 2px solid #e53935 !important;
  border-radius: 4px;
}
.entry-field-group-error {
  padding: 4px;
  border-radius: 4px;
}

/* User-defined Entry Sections */
.entry-section {
  width: 100%;
  border: 1px solid #c5d8f0;
  border-radius: 6px;
  background: #f0f6ff;
  margin-top: 12px;
  overflow: hidden;
}
.entry-section-title {
  font-size: 0.78em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #3a6ea5;
  background: #daeaf8;
  padding: 6px 12px;
  border-bottom: 1px solid #c5d8f0;
}
.entry-section-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 12px;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
  .record-container { margin: 0; border-radius: 0; padding: 1rem; }
  .form-group { flex: 1 1 100%; }
}











html, body {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important; /* Forces the wiggle to die */
    position: relative !important;
}

/* TinyMCE popup sink — must sit above anything Utilities.zindex() ever climbs to.
   See strategy/ZINDEX_DESIGN.md. */
.tox-tinymce-aux, .tox-silver-sink {
    z-index: 2147483000 !important;
}