h1,h2,h3,h4{
	font-family: 'Open Sans', sans-serif;
	font-weight:100;
}

h1{
    font-weight:500;
    font-size:28px;
}

h2{
	font-weight: 500;
	font-size: 18px;
}

h3{
    font-weight:600;
    font-size:16px;
}

h4{
    font-weight:600;
    font-size:20px;
}


a	{
	text-decoration:none;
}
	
a:hover{
	text-decoration:none;
}



/* * * * * BEGIN BUTTON STYLES - USE WITH BOOTSTRAP V3.x * * * * */

	.btn-submit{
		min-width:100px;
	}
	
	.btn-menu{
		min-width:100px;
	}
				
	.btn-wide{
		width:100%;
		border:none;
		font-weight:900;
	}
		
	
/* * * * * BEGIN OLD CSS STYLES * * * * */

	.loginTable{
		/*background:url(4Login.gif) no-repeat; */
		width:100%;
	}

	.table-none tr >td{
		border:none;
	}

	.spamChart{
		width:200px;
		height:150px;
		padding:0px;
		margin:0px;
	}
		
	.gwt-DecoratedPopupPanel{
		z-index:1000;
	}

/* * * * * BEGIN FORM STYLES - USE WITH BOOTSTRAP class="form-control" * * * * */	

	.form-left{
		border-radius:5px 0px 0px 5px;
	}
		
	.form-middle{
		border-radius:0px;
		border-left:none;
		border-right:none;
	}
		
	.form-right{
		border-radius:0px 5px 5px 0px;
	}
		
	.form-text{
		overflow-x:hidden;
	}
			
	/* * * * * BEGIN PERCENTAGE STYLING * * * * */

		.wth-1{
			width:10%;
		}
		
		.wth-2{
			width:20%;
		}
		
		.wth-3{
			width:30%;
		}
		
		.wth-4{
			width:40%;
		}
		
		.wth-5{
			width:50%;
		}
		
		.wth-6{
			width:60%;
		}
		
		.wth-7{
			width:70%;
		}
		
		.wth-8{
			width:80%;
		}
		
		.wth-9{
			width:90%;
		}
		
		.clear{
			clear:both;
		}

/* * * * * BEGIN HEADER STYLES - see NewPageHeader.jsp * * * * */
	
	#home_link:hover{
		text-decoration:none;
	}
		
	#header_left, #header_right{
		font-family: 'Oswald', sans-serif; 
	}
		
	#header_img{
		float:left;
		width:35px;
	}
		
	#headerbackground{
	
	z-index:6;
	}
		
		
	#header_menu > li{
		display:inline-block;
		padding:20px 0px;
		z-index:5;
	}
		
	#header_menu li:hover > a{
		width:100%;
	}

	#header_menu li .submenu{
		display:none;
		position:absolute;
		z-index:0;
		border-bottom:groove 5px #3d5b3f;
	}
		
	#header_menu li:hover > .submenu{
		display:block;
		margin-top:20px;
		z-index:4;
		/* border-radius:0 0 10px 0; */
	}
			
	#header_menu li .submenu > ul li a{
		width:100%;
		font-size:13px;
	}
			
	#header_menu li .submenu ul li ul > li{
		display:none;
	}
		
	#header_menu li .submenu ul li:hover ul li{
		padding:10px 20px;
	}
		
	#server_options ul li{
		width:100%;
		background-color:none;
	}

	/* * * * * BEGIN MEDIA QUERIES * * * * */	
		
		/* Screen Resolution for Desktops */
		@media (min-width:992px){
			
			#header_menu{
				display:flex;
				justify-content:space-between;
				margin-left:calc(-1 * var(--bs-gutter-x, 1.5rem) * 1);
				margin-right:calc(-1 * var(--bs-gutter-x, 1.5rem) * 1);
			}
			
			#header_left{
				font-size:40px;
			}
			
			#header_sub{
				font-size:15px;
			}
			
			#header_right{
				font-size:15px;
				margin-top:30px;
			}
			
			#header_menu > li{
				width:16%;
			}
			
			#header_menu li > a{
				text-decoration:none;
				padding:10px 0px;
				font-weight:400;
				font-size:15px;
				font-family: 'Open Sans', sans-serif;
			}
			
			#header_menu li .submenu > ul li{
				padding:5px 0px 5px 15px;
				text-align:left;
			}
			
			#header_menu li .menu_sm{
				width:16%;
			}
			
			#header_menu li .submenu ul li ul{
				display:block;
				position:absolute; 
				width:100%;
				left:100%; 
				margin-top:-25px;
			}
			
			#header_menu li .submenu ul li:hover ul li{
				display:block;
				width:100%;
			}
			
			.hide_lg{
				display:none;
			}
		}
		
		/* Screen Resolution for Tablets */
		@media (min-width:768px) and (max-width:992px){
			
			#header_menu{
				display:flex;
				justify-content:space-between;
				margin-left:calc(-1 * var(--bs-gutter-x, 1.5rem) * .5);
				margin-right:calc(-1 * var(--bs-gutter-x, 1.5rem) * .5);
			}
			
			#header_left{
				font-size:30px;
			}
			
			#header_sub{
				font-size:15px;
			}
			
			#header_right{
				font-size:15px;
				margin-top:20px;
			}
			
			#header_img{
				width:25px;
			}
			
			#header_menu > li{
				width:16%;
			}
			
			#header_menu li > a{
				text-decoration:none;
				padding:10px 0px;
				font-weight:400;
				font-size:15px;
				font-family: 'Open Sans', sans-serif;
			}
			
			#header_menu li .submenu > ul li{
				padding:10px 0px;
				text-align:center;
			}
			
			#header_menu li .menu_sm, #header_menu li .submenu ul li ul{
				width:100%;
				right:0px;
			}
			
			#header_menu li .submenu ul li > ul{
				margin-top:10px;
				text-align:left;
			}
			
			.hide_md{
				display:none;
			}
	 	}
		
		/* Screen Resolution for Mobile Devices */
		@media (max-width:768px){
			
			#header_left{
				font-size:25px;
			}
			
			#header_sub{
				font-size:8px;
			}
			
			#header_right{
				font-size:10px;
				margin-top:13px;
			}
			
			#header_img{
				width:22px;
			}
			
			#header_menu > li{
				padding:20px 0px;
				width:15%;
				z-index:5;
			}
			
			#header_menu li > a{
				text-decoration:none;
				padding:10px 0px;
				font-weight:400;
				font-size:15px;
				font-family: 'Open Sans', sans-serif;
			}
			
			#header_menu li .submenu > ul li{
				padding:10px 0px;
				text-align:center;
			}
			
			#header_menu li .menu_sm, #header_menu li .submenu ul li ul{
				width:100%;
				right:0px;
			}
			
			#header_menu li .submenu ul li > ul{
				margin-top:10px;
				text-align:left;
			}
			
			.menu_hide_sm{
				display:none;
			}
		}
	
/* * * * * BEGIN INFO BUTTON CLICK/HOVER TOGGLES * * * * */

.more_info{
	display:none;
	position:absolute;
	max-width:95%;
	z-index:3;
}
	
/* * * * * BEGIN WINDOW PANEL STYLINGS * * * * */
	
	.well-info-wrap{
		transition-duration:0.5s;
	}
		
	
		
	.well-info-header{
		border-bottom:none;
	}
		
	.well-info-header a{
		transition-duration:0.5s;
	}
		
	.well-info-darker{
		width:100%; 
		text-align:center;
		padding:2px 0px;
		border:solid 1px #CC0000;
		font-family: 'Open Sans', sans-serif;
		font-weight:400;
		font-size:14px;
	}
		
	.well-info-darker{
		border-bottom:none;
	}
		
	.well-info-darker a{
		transition-duration:0.5s;
	}
	
	
		
	.well-info-footer{
		border-top:none;
	}
		
	
		
	.no-padding{
		padding:0px;
	}
		
	.panel-text{
		font-size:13px;
	}
		
	.config-box{
		border:solid 1px #ddd;
		border-top:none;
		padding:20px;
	}
		
	.popup_info{
		display:none;
		position:absolute;
		padding:10px;
		z-index:3;
	}

/* * * * * BEGIN FOOTER STYLES * * * * */

	.red{
		clear:left;
		font-size:14px;
		margin:0 1px;
		padding:5px 10px;
		text-align:right;
		width:100%;
	}
	
	.red a{
		font-weight:900;
	}
		
	.footer{
		margin:0 0 0 7px;
		padding:20px;
		text-align:center;
	}

	.footer div{
		margin:7px 0 0 0;
		font-size:10px;
	}

	.footer a,.footer a:visited{
		text-decoration:none;
	}

	.footer a:hover{
		text-decoration:underline;
	}
	
/* * * * * BEGIN SYNTAIL STYLINGS * * * * */

.dialogVPanel {
  margin: 5px;
}

.serverResponseLabelError {
  color: red;
}

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

	#lineCountControl{
		width: 40px;
	}

	#fileDataControl{
		width: 100%;
		font-family: Courier New;
		padding: 12px;
		border: 1px solid #DDDDDD;
		font-size: 11px;
	}

	.highlighted{
		font-weight: bold;
		font-color: red;
		background-color: yellow;
	}
	
/* * * * * BEGIN CUSTOM CHECKBOX STYLINGS * * * * */

/* * * * * BEGIN SIDE (LEFT) MENU MODE * * * * */
/* Activated by class "side-menu-mode" on <body> (HeaderLeftMenu.jsp / FooterLeftMenu.jsp).
   Re-skins the shared #header_menu markup into a fixed-width left panel. The header
   (product name / version) is left untouched on top. */

.side-menu-mode .xeams-body-row{
	display:flex;
	flex-wrap:nowrap;
	align-items:stretch;
}

.side-menu-mode .xeams-side-panel{
	flex:0 0 280px;
	width:280px;
	max-width:280px;
	min-height:calc(100vh - 90px);
	display:flex;
	flex-direction:column;
}

.side-menu-mode .xeams-side-inner{
	text-align:left;
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
}

.side-menu-mode .xeams-main-panel{
	flex:1 1 auto;
	min-width:0;
}

/* Vertical menu, overriding the horizontal flex layout of the top menu.
   flex:1 lets the maroon #header_menu background fill the panel down to the bottom.
   A translucent gradient overlays the theme colour (works for every theme) to give the
   panel a subtle top-to-bottom shade instead of a flat, dull fill. */
.side-menu-mode #header_menu{
	display:flex !important;
	flex-direction:column !important;
	justify-content:flex-start !important;
	align-items:stretch !important;
	flex:1 1 auto !important;
	width:100% !important;
	margin:0 !important;
	padding:0 !important;
	text-align:left !important;
	background-image:linear-gradient(45deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.03) 45%, rgba(0,0,0,0.30) 100%) !important;
}

/* Top-level rows: icon on the left, label next, submenu wraps full-width below */
.side-menu-mode #header_menu > li{
	display:flex !important;
	flex-wrap:wrap !important;
	align-items:center !important;
	width:100% !important;
	padding:8px 28px 8px 12px !important;
	border-bottom:1px solid rgba(0,0,0,0.08);
	position:relative;
}

.side-menu-mode #header_menu > li > a{
	display:inline-block;
	padding:2px 0 !important;
	cursor:pointer;
}

/* Icon first (left), text label after it, submenu on its own full-width row */
.side-menu-mode #header_menu > li > a.hide_lg{
	order:0;
}
.side-menu-mode #header_menu > li > a:not(.hide_lg){
	order:1;
}
.side-menu-mode #header_menu > li > .submenu{
	order:2;
	flex:0 0 100%;
	width:100%;
}

/* Top-level item icon stays visible at all widths (positioned left of the label) */
.side-menu-mode #header_menu > li > a.hide_lg{
	display:inline-block !important;
	margin-right:8px;
}

/* Sub-menu group headers (Adaptive Filters, Content Filters, IP Filters, Legal Reports)
   carry a second, responsive label anchor with an onclick toggle. Hide that duplicate in
   side mode and keep only the plain label so these items do not appear twice. */
.side-menu-mode #header_menu .submenu a.hide_lg{
	display:none !important;
}

/* Sub-menu labels shown inline at every width. Using display:inline (not inline-block)
   makes the base width:100% no-op, so the caret sits next to the text instead of on its
   own line above it. */
.side-menu-mode #header_menu .submenu a.menu_hide_sm,
.side-menu-mode #header_menu .submenu a.hide_md{
	display:inline !important;
}

/* Reveal each section's landing link (e.g. "Home") inside its submenu. In the top menu
   these <li class="hide_lg"> links only appear in icon-collapsed mode; in the side menu the
   top-level label just toggles the accordion, so exposing these gives every section -
   including Home - a real, clickable navigation item. */
.side-menu-mode #header_menu .submenu li.hide_lg{
	display:block !important;
}

/* Expand/collapse chevron anchored to the right edge of each top-level row */
.side-menu-mode #header_menu > li::after{
	font-family:"bootstrap-icons" !important;
	content:"\f285";
	position:absolute;
	right:12px;
	top:10px;
	font-size:10px;
	opacity:0.5;
	pointer-events:none;
	transition:transform 0.15s ease;
}
.side-menu-mode #header_menu > li.open::after{
	transform:rotate(90deg);
}

/* A collapsed top-level row must not change on hover (no colour change, no reflow to
   two lines). It only opens on click. Overrides the base #header_menu li:hover rules. */
.side-menu-mode #header_menu > li:hover{
	background-color:transparent !important;
}
.side-menu-mode #header_menu > li:hover > a{
	width:auto !important;
}

/* Sub-menus use a transparent background so they blend into the panel */
.side-menu-mode #header_menu li .submenu,
.side-menu-mode #header_menu li .submenu > ul,
.side-menu-mode #header_menu li .submenu ul,
.side-menu-mode #header_menu li .submenu li{
	background:transparent !important;
	background-color:transparent !important;
	border:none !important;
	box-shadow:none !important;
}

/* A bootstrap caret icon in front of every sub-menu item. Force white so group-header
   carets (whose <li> is not inside a white <a>) match the lighter leaf-item carets.
   inline-block so the caret can rotate when an expandable group is opened. */
.side-menu-mode #header_menu .submenu li::before{
	font-family:"bootstrap-icons" !important;
	content:"\f231";
	color:#FFFFFF !important;
	display:inline-block;
	font-size:10px;
	margin-right:6px;
	opacity:0.55;
	vertical-align:middle;
	transition:transform 0.15s ease;
}
.side-menu-mode #header_menu .submenu li.open::before{
	transform:rotate(90deg);
}

/* Second-level group headers (Content Filters, Adaptive Filters, IP Filters, Legal
   Reports) start collapsed. Their children appear only after the group header <li> gets
   the .open class on click. Hover must never expand them. The base collapsed state comes
   from "#header_menu li .submenu ul li ul > li { display:none }". */
.side-menu-mode #header_menu .submenu ul li:hover > ul > li{
	display:none !important;
}
.side-menu-mode #header_menu .submenu ul li.open > ul > li{
	display:block !important;
}

/* Keep deep sub-item padding constant regardless of hover, so hovering an item does not
   grow the gap to its siblings (which caused a visible flicker). Overrides the base
   "#header_menu li .submenu ul li:hover ul li { padding:10px 20px }" rule. */
.side-menu-mode #header_menu .submenu ul li ul > li,
.side-menu-mode #header_menu .submenu ul li:hover ul li{
	padding:5px 0 5px 15px !important;
}

/* Tablet and larger: accordion - top-level submenus stay collapsed until clicked */
@media (min-width:768px){
	.side-menu-mode #header_menu > li > a.hide_md,
	.side-menu-mode #header_menu > li > a.menu_hide_sm{
		display:inline-block !important;
	}

	.side-menu-mode #header_menu > li > .submenu{
		display:none !important;
	}

	.side-menu-mode #header_menu > li:hover > .submenu{
		display:none !important;
	}

	.side-menu-mode #header_menu > li.open > .submenu{
		display:block !important;
		position:static !important;
		margin:0 !important;
		border:none !important;
		width:100% !important;
	}

	.side-menu-mode #header_menu li .submenu > ul{
		padding-left:10px;
	}

	.side-menu-mode #header_menu li .submenu ul li ul{
		display:block !important;
		position:static !important;
		left:auto !important;
		width:100% !important;
		margin:0 !important;
	}
}

/* Small devices (phones): icon-only rail; submenu flies out when opened */
@media (max-width:767.98px){
	.side-menu-mode .xeams-side-panel{
		flex:0 0 60px;
		width:60px;
		max-width:60px;
	}

	.side-menu-mode #header_menu > li{
		justify-content:center !important;
		padding:10px 4px !important;
	}

	.side-menu-mode #header_menu .hide_lg{
		margin-right:0;
		font-size:18px;
	}

	.side-menu-mode #header_menu > li::after{
		display:none;
	}

	.side-menu-mode #header_menu > li > .submenu{
		display:none !important;
	}

	.side-menu-mode #header_menu > li.open > .submenu,
	.side-menu-mode #header_menu > li:hover > .submenu{
		display:block !important;
		position:absolute !important;
		left:60px;
		top:0;
		margin-top:0;
		width:230px;
		z-index:20;
		background:#fff !important;
		box-shadow:0 2px 8px rgba(0,0,0,0.25);
		text-align:left;
		padding:6px;
	}
}
/* * * * * END SIDE (LEFT) MENU MODE * * * * */