/*IQ application element styling.
	Use this for class name styling and NOT element name style
	(any generic element-named style settings should go in the app.css file).
	This .css loads after app.css but before component-isolated style sheets in Index.html.
	Note that we are using a few component-scoped (i.e. isolated) CSS files, but those can
	only handle style for elements renedered with the companion .razor file (and NOT child .razor files).
*/

/*Scrollbar styling*/
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}
/* Track (background) */
::-webkit-scrollbar-track {
	background: var(--nb_scroll2, hsl(210,40%,90%));
}

	::-webkit-scrollbar-track:hover {
		background: var(--nb_scroll2_h, hsl(210,40%,92%));
	}
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--nb_scroll1, hsl(210,40%,60%));
	border-radius: 25px;
}

	::-webkit-scrollbar-thumb:hover {
		background: var(--nb_scroll1_h, hsl(210,40%,65%));
	}


.ui-auth-header a {
	color: white;
}

/*Basic table th and td formatting*/
.thbl {
	font-weight: bold;
	padding: 2px;
	padding-right: 4px;
	text-align: left;
	vertical-align: bottom;
}

.tdul {
	padding: 2px;
	padding-right: 4px;
	text-align: left;
	vertical-align: top;
}

/*Shared styling in left panel area between main nav components and GridScrolling component 
(we also have separate scoped css fiels for IqMainLayout, IQMainNavMenu and GridScrolling).
==============================*/
.lpfheader {
	display: grid;
	align-items: center;
	height: 35px;
	font-size: 24px;
	padding-left: 8px;
	color: white;
	background-color: var(--nb_menbck, hsl(210,40%,20%));
}

/* Often applied to heading tags (h1, h2, h3 ...) to force inheritance of container formatting */
.h_inherit {
	display: inline;
	font-size: inherit;
	font-weight: inherit;
	margin:inherit;
}

.leftpanel .lpheader, .gridfilthdr .lpheader {
	padding: 6px 8px;
/*dkh 10/20/23 switched from --nb_menbtn*/
	background-color: var(--nb_top, hsl(210,40%,60%));
}

.leftpanel .lpheaderSpan, .gridfilthdr .lpheaderSpan {
	color: white;
	font-size: 18px;
}

.leftpanel .lpcontent {
	/* CR 932183 dkh 4/10/24 - changed left panel submenu to grid layout */
	overflow-y: auto;
	overflow-x: hidden;
}

.lpslider {
	/*cursor: grab;*/
	cursor: col-resize;
	position: absolute;
	right: 0;
	top: 49%;
	line-height: 1;
}

/*hide sliders on small screens since they currently only work with mice*/
@media only screen and (max-width: 600px) {
	.lpslider {
		display: none;
	}
}
@media only screen and (max-height:500px) {
	.lpslider {
		display: none;
	}
}

/*ly, 3/24, cr#926752, for mobile responsive UI*/
/*ly, 10/24, cr#939986, add more styles for mobile responsive UI
	Use the class mobile-not to exclude the specific element or its children if there is mobile class on the parent already
*/
@media only screen and (max-width: 400px) {
	.mobile .formfieldgrid:not(.mobile-not),
	.mobile.formfieldgrid {
		grid-template-columns: auto !important;
	}

	.mobile .mobile-not .formfieldgrid {
		grid-template-columns: inherit !important;
	}

	.mobile.sms .formdatetime .forminputgrid {
		display: inline-grid !important;
	}

	.mobile.sms.ui-images .image-filter input.image-search {
		width: 100%;
	}
}

/*BUTTON styling using named classes.
	For the form submit button, add class="button_submit".
	For other buttons, use class="button_other".
To have a button look like a hyperlink, use class="button_link".
	To have the buttons docked at the bottom of the container place them
	inside a div with class="dockbtn_bottom".  Note when using an EditForm 
	the submit button must be inside the EditForm (the buttons should always go at the
	bottom for accessibility.
*/
.button_link {
	color: inherit;
	background-color: inherit;
	text-align: left;
	font-size: inherit;
	border: 1px solid transparent;
	outline: none;
	text-decoration: underline;
	text-decoration-thickness: from-font;
	font-size: 16px;
	padding: 2px;
	/*display: flex;*/
	/*vertical-align: middle;*/
}

/*use this pair on button elements to only underline on hover/focus*/
	.button_link.bnulho {
		text-decoration: none;
	}

	.button_link:hover, .button_link:active, .button_link:focus {
		background-color: inherit;
		text-decoration: underline;
		border: 1px solid var(--bb_submit_h, hsl(210,40%,50%));
		outline: 1px solid var(--bb_submit_h, hsl(210,40%,50%));
	}

	.button_link.bnul {
		text-decoration: none;
	}

.button_submit, .button_other {
	padding: 6px 10px;
	text-shadow: none;
	border-width: 1px;
	border-style: solid;
	/*border-radius: 2px;*/
	font-size: 17px;
	font-weight: normal;
}

.rdgpnlfoot .button_submit, .rdgpnlfoot .button_other {
	padding: 5px 8px;
	font-size: 15px;
	font-weight: normal;
	margin: 1px;
}


.button_submit {
	color: white;
	background-color: var(--bb_submit, hsl(210,40%,40%));
	border-color: transparent/*hsl(210,40%,60%)*/;
}

	.button_submit:hover {
		background-color: var(--bb_submit_h, hsl(210,40%,50%));
		border-color: hsl(210,40%,50%);
	}

	.button_submit:focus {
		background-color: var(--bb_submit_f, hsl(210,40%,50%));
		outline: 1px solid #8f0000;
		box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
	}

	.button_submit[disabled] {
		background-color: inherit;
		color: gainsboro;
	}

.button_other {
	color: hsl(0,0%,20%);
	background-color: var(--bb_other, hsl(210,40%,80%));
	border-color: transparent/*hsl(210,40%,50%)*/;
}

	.button_other:hover {
		background-color: var(--bb_other_h, hsl(210,40%,70%));
		border-color: hsl(210,40%,50%);
	}

	.button_other:focus {
		background-color: var(--bb_other_f, hsl(210,40%,70%));
		outline: 1px solid #8f0000;
		box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
	}

	.button_other[disabled] {
		background-color: inherit;
		color: gainsboro;
	}

	.button_other.AddButton, .button_other.DeleteButton {
		padding: 4px 5px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.button_other.AddButton > span, .button_other.DeleteButton > span {
padding-right: 4px;
	}

		.button_img {
	padding: 3px 3px;
	text-shadow: none;
	background: inherit;
	border: none;
	font-size: 12px;
}

	.button_img:hover {
		outline: 1px solid #8f0000;
	}

	.button_img:focus {
		outline: 1px solid #8f0000;
		box-shadow: 0 0 0 .2rem rgba(58,176,195,.5);
	}

	.button_img[disabled] {
		/*display:none;
	visibility: hidden;*/
		border: none;
		outline: none;
		background-color: inherit;
		cursor: default;
	}


/*Button in upper right corner of grid to re-open reading panel*/
.btnshowrdng.button_img {
vertical-align:bottom;
	background: none;
	padding: 0;
	margin-right: -2px;
	border: 2px solid hsl(210,40%,40%);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.svgopenpanel {
	stroke: var(--gs_line1, hsl(210, 40%, 40%));
}

/*for single-button grid actions style the button
to look like the ButtonMenu (see the isolated ButtonMenu.razor.css)*/
.button_gridact {
	display: flex;
	border: 1px solid transparent;
	outline: none;
	background-color: inherit;
	color: hsl(0,0%,20%);
	font-size: 13px;
	padding: 6px 2px;
	margin-bottom: 1px;
	min-width: 60px;
	vertical-align: middle;
}

	.button_gridact:hover {
		background-color: inherit;
	}

	.button_gridact:focus {
		outline: 1px solid hsl(0,0%,20%);
		box-shadow: 0 0 0 .1rem hsl(210,40%,50%);
	}

/*docks a div of buttons to the bottom of a parent div*/
.dockbtn_bottom {
	position: sticky;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	padding: 6px;
	background-color: var(--cb_dockbtm, hsla(210,40%,60%,.5));
}

/*Call this animation effect in your element's CSS to have the element slide into position
by adding this to the rest of the element's style setting:
	animation: moveupdarken 1s ease-in;
*/
@keyframes moveupdarken {
0% {
opacity:0.1;
transform: translateY(15px);
}
	100% {
		opacity: 1;
		transform: translateY(0px);
	}
}

/*Styling for the "fadealert" div in IqMainLayout.razor, which is used
by the PageStateService OpenTempAlert(txt) method to display a temporary message.
*/
#fadealert {
	animation: hideElement 0s ease-in 3s forwards;
	background: hsla(0,0%,100%,.8);
	border: 2px solid var(--nb_top, hsl(210,40%,40%));
	border-radius: 2px;
	font-size: 18px;
	color: var(--nb_menbck, hsl(210,40%,20%));
	height: 70px;
	width: 200px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: fixed;
	z-index: 1000;
	right: 0px;
	left: 0px;
	margin: auto;
	top: 0px;
	bottom: 0px;
}

@keyframes hideElement {
	to {
		visibility: hidden;
	}
}

/* CSS class to create an animated ellipsis. */
.wait-ellipsis:after {
	content: '...';
	animation: wait-ellipsis steps(1, end) 4s infinite;
}

@keyframes wait-ellipsis {
	0% {
		content: '...'
	}

	25% {
		content: '\00a0\00a0\00a0'
	}

	50% {
		content: '.\00a0\00a0'
	}

	75% {
		content: '..\00a0'
	}
}


/*Styling for inline SVG images.  
	The inline SVGs are added via static methods in the \Controls\SvgImages.cs file.  Each
	has a default css class name on the parent "g" tag, which can be overriden via an optional
	parameter when the static method is called in the markup.
*/

.svgiqicong .svgiqpath {
	fill: var(--gf_text, hsl(0,0%,100%));
}

/*Main feature menu bottons (also see IQMainNavMenu.razor.css for hover effects):*/
.svgfeatureicon .svgficopath,
.svgfeatureicon .svgficocircle,
.svgfeatureicon .svgficocircle,
.svgfeatureicon .svgficopoly,
.svgfeatureicon .svgficorect {
	fill: var(--gf_text, hsl(0,0%,100%));
}

/*Left panel submenu buttons*/
.svgmenuicon .svgmicopath,
.svgmenuicon .svgmicocircle,
.svgmenuicon .svgmkicocircle,
.svgmenuicon .svgmicopoly,
.svgmenuicon .svgmicorect,
.svgmenuicon .svgdashboardpath,
.svgmenuicon .svgtourtrackerpath,
.svgmenuicon .svgphonepath,
.svgmenuicon .svgheadsetpath,
.svgmenuicon .svgopinionpath,
.svgmenuicon .svgmenudropdownpath,
.svgmenuicon .svgenvelopepath,
.svgmenuicon .svgpersonpath {
	fill: var(--gf_svgbtn1, hsl(210,40%,20%));
}

button.leftsubmenu {
	background-color: inherit;
}

.leftsubmenu.active .svgmenuicon .svgmicopath,
.leftsubmenu.active .svgmenuicon .svgmicocircle,
.leftsubmenu.active .svgmenuicon .svgmkicocircle,
.leftsubmenu.active .svgmenuicon .svgmenudropdownpath,
.leftsubmenu.active .svgmenuicon .svgmicopoly,
.leftsubmenu.active .svgmenuicon .svgmicorect {
	fill: var(--gf_svgbtn5, hsl(210,40%,95%));
}

.leftsubmenu:hover .svgmenuicon .svgmicopath,
.leftsubmenu:hover .svgmenuicon .svgficopath,
.leftsubmenu:hover .svgmenuicon .svgficorect,
.leftsubmenu:hover .svgmenuicon .svgficopoly,
.leftsubmenu:hover .svgmenuicon .svgmicocircle,
.leftsubmenu:hover .svgmenuicon .svgmkicocircle,
.leftsubmenu:hover .svgmenuicon .svgmicopoly,
.leftsubmenu:hover .svgmenuicon .svgmicorect,
.leftsubmenu:hover .svgmenuicon .svgdashboardpath,
.leftsubmenu:hover .svgmenuicon .svgtourtrackerpath,
.leftsubmenu:hover .svgmenuicon .svgphonepath,
.leftsubmenu:hover .svgmenuicon .svgheadsetpath,
.leftsubmenu:hover .svgmenuicon .svgopinionpath,
.leftsubmenu:hover .svgmenuicon .svgmenudropdownpath,
.leftsubmenu:hover .svgmenuicon .svgenvelopepath,
.leftsubmenu:hover .svgmenuicon .svgpersonpath {
	fill: var(--gf_svgbtn5_h, hsl(210,40%,90%));
}

.svgmenuicon .svgserviceadd {
	fill: var(--gf_svgbtn1, hsl(210,40%,20%));
	stroke: var(--gf_svgbtn1, hsl(210,40%,20%));
}	
.leftsubmenu.active .svgmenuicon .svgserviceadd {
	fill: var(--gf_svgbtn5, hsl(210,40%,95%));
	stroke: var(--gf_svgbtn5, hsl(210,40%,95%));
}

.leftsubmenu:hover .svgmenuicon .svgserviceadd {
	fill: var(--gf_svgbtn5_h, hsl(210,40%,90%));
	stroke: var(--gf_svgbtn5_h, hsl(210,40%,90%));
}

.svgplusminus {
	fill: transparent;
	/*stroke: hsl(0,0%,45%);*/
	stroke: var(--gs_line1, hsl(210, 40%, 40%));
}

.svgverifiedconstiuent polygon {
	fill: #054b85;
	fill-rule:evenodd;
	/* stroke: var(--gs_line1, hsl(210, 40%, 40%));*/
}

.svgverifiedconstiuent path {
	fill: #fff;	
	/*stroke: var(--gs_line1, hsl(210, 40%, 40%));*/
}

	.svgplusminus:hover {
		fill: var(--gf_svgbtn5_h, hsl(210,40%,90%));
	}

.toggleheading svg {
	vertical-align: text-bottom;
	margin-top: 2px;
	margin-bottom: 2px;
}

.toggleheading:hover, .toggleheading:focus {
	background-color: var(--gf_svgbtn5_h, hsl(210,40%,90%));
}

.svgclose {
	stroke: var(--gs_texta, hsla(0,0%,50%,.5));
}

	.svgclose rect {
		/*fill: hsla(0,0%,35%,.75);*/
		fill: var(--gf_svgbtna, hsla(210, 40%, 40%, .75));
	}

	.svgclose path {
		stroke: var(--gs_text, hsl(0, 0%, 100%));
	}
.svgshare {
	fill: var(--gf_svgbtna, hsla(210, 40%, 40%, .75));
}
.svgupdn {
	stroke: var(--gs_line1, hsl(210, 40%, 40%));
	/*hsl(0,0%,45%);*/
}

.gridfiltbtntgl > svg > .svgupdn {
	/*grid filter group section header */
	stroke: var(--gs_line1, hsl(210, 40%, 40%));
	/*hsl(210,40%,50%);*/
}


.svgnew, .svghelp {
	fill: transparent;
	stroke: var(--gs_line2, hsl(210, 40%, 60%));
	/*hsl(200,50%,65%);*/
}

.svgdots {
	/*--gf_dots */
	fill: var(--gs_line1, hsl(0,0%,50%));
}

.svgmagnifyingglass {
	fill: var(--gf_svgbtna, hsla(210, 40%, 40%, .75));
}

.svgnav line {
	stroke: var(--gs_text, hsl(0, 0%, 100%));
}

.svgnav circle {
	/*fill: hsla(0,0%,35%,.75);*/
	fill: var(--gf_svgbtna, hsla(210, 40%, 40%, .75));
	stroke: var(--gs_texta, hsla(0,0%,50%,.5));
}

[disabled] .svgnav circle {
	/*	fill: hsla(0,0%,50%,.25);*/
	fill: var(--gf_svgbtna_d, hsla(210, 40%, 60%, .25));
	stroke: var(--gs_texta, hsla(0,0%,50%,.5));
}


.svgtag path {
	fill: var(--gf_svgbtn2, hsl(210,40%,50%));
}

.svgshowoptions path {
	fill: var(--gf_svgbtn2, hsl(210,40%,50%));
}

.svgshowoptions line {
	/*stroke: hsla(0,0%,45%,.5);*/
	stroke: var(--gs_line2, hsl(210, 40%, 60%));
	stroke-linecap: round;
}

.svgshowoptions circle {
	fill: transparent;
	/*	stroke: hsla(0,0%,45%,.5);*/
	stroke: var(--gs_line2, hsl(210, 40%, 60%));
}

.svgtrash {
}

	.svgtrash path {
		fill: var(--gf_svgbtn2, hsl(210,40%,50%));
	}

	.svgtrash rect {
		fill: var(--gf_svgbtn4, hsla(210,40%,65%));
	}

.svglogout path, .svgwhite path {
	fill: var(--gs_text, white);
}

.svgdelete path, .svgdelete polygon {
	fill: var(--gf_svgbtn2, hsl(210,40%,50%));
}

.svgarrowright path,
.svgarrowright2 path,
.svgarrowright2gc,
.svgpinanglefill path,
.svgunpinanglefill path,
.svgformbtn path,
.svgrefresh path,
.svgpaperclip path,
.svgeraser path,
.svgscissors path,
.svglock path,
.svgarrow path,
.svgprint path,
.svgstar path,
.svgalarmclock path,
.svgphone path{
	fill: var(--gf_svgbtn3, hsl(210,40%,60%));
}

.svgarrowrightg path,
.svgarrowright2gr,
.svgarrowright2gl {
	fill: var(--gf_svgnext, hsl(170,80%,40%));
}

	.svgeraser {
		stroke: var(--gf_svgbtn3, hsl(210,40%,60%));
	}

/*darker images*/
.svgperson path,
.svgmaxwidth path {
	fill: var(--gf_svgbtn2, hsl(0,0%,50%));
}

/*.svgpaperclip path {
	fill: var(--gf_svgbtn3, hsl(210,40%,60%));
}

.svglock path {
	fill: var(--gf_svgbtn3, hsl(210,40%,60%));
}*/

.svgpencil {
	fill: transparent;
	stroke: var(--gf_svgbtn2, hsl(210, 40%, 40%));
	/*	hsl(0,0%,40%);*/
	stroke-width: 6;
}

.svgleftarrow {
	fill: transparent;
	stroke: var(--gf_svgbtn2, hsl(210, 40%, 40%));
	/*hsl(0,0%,30%)*/
}

.svgfilter {
	fill: transparent;
	stroke: var(--gf_svgbtn2, hsl(210, 40%, 40%));
	/*hsl(0,0%,30%)*/
}

.svgcopy {
	fill: var(--gf_svgbtn2, hsl(210, 40%, 40%));
}

.svggrip {
	fill: transparent;
}

	.svggrip rect {
		stroke: var(--gs_dotsa, hsla(0,0%,35%,.5));
		fill: var(--gf_dotsa, hsla(0,0%,35%,.75));
	}

.svg3x3 {
	fill: transparent;
}

	.svg3x3 rect {
		stroke: var(--gs_dotsa, hsla(0,0%,35%,.5));
		fill: var(--gf_dotsa, hsla(0,0%,35%,.75));
	}


.svglight {
fill: white;
}



/* SVG Chart styling */
.pieSlice {
	fill-opacity: 1;
	stroke: var(--gs_text, hsl(0, 0%, 100%));
	stroke-width: 1px;
	stroke-linejoin: bevel; /* prevents "pointy ends" from overlapping onto other pie slices */
}


/* When using an EditForm in the Razor file simply put the top "divform" class on the 
	EditForm tag and then use 3 divs directly inside the EditForm with these classes:

	.divhead - heading (typically on h3)
	.divbody - main content area which which will have a scrollbar as needed
	.divbuttons - docked button section (this needs to be inside editform)

	Usage notes: 
	The ModalDialog component has its own isolated style sheet but when a separate .razor is used for 
	the dialog content use the same classes for those editforms.  (A dialog is generally called using the service method 
	pageManager.OpenDialog() where the first parameter is a Type reference to a Razor file containine a data entry form.)
	.iqdialog-content is in modal container above the editform.

	To stretch the content with an auto-scroll on the main content area and the buttons docked at the bottom,
	the layout of that razor should be:
	<div class="divform">
		<div class="divhead"><h3>my title</h3></div>
		<div class="divbody">...</div>
		<div class="divbuttons">...</div>
	</div>
*/
.divform {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	background-color: var(--cb_form, hsl(0,0%,96%));
}

	.divform > .divhead {
		font-size: 28px;
		padding-left: 15px;
		padding-top: 20px;
		background-color: inherit;
		display: grid;
	}

/*formline styling for FormLine component in FormField.cs (which renders a span tag with text as a block)*/
.divhead .formline:last-of-type {
	margin-bottom: 7px;
}
/*Client.Layout.Controls.LineFont enum setting for FormLine's Size parameter*/
.divform .formline {
	display: block;
	background-color: inherit;
	overflow-wrap:anywhere;
}

	.divform .formline.xlarge {
		font-size: 28px;
	}

	.divform .formline.large {
		font-size: 24px;
	}

	.divform .formline.medium {
		font-size: 20px;
	}

	.divform .formline.small {
		font-size: 16px;
	}

	.divform .formline.xsmall {
		font-size: 14px;
	}

	.divform .formline.xxsmall {
		font-size: 12px;
	}

/* Client.Layout.Controls.LineFont enum TextSize parameter setting for grid cell components*/
.celllblvalue.xlarge, .celltext.xlarge, .cellvalue.xlarge {
	font-size: 24px;
}

.celllblvalue.large, .celltext.large, .cellvalue.large {
	font-size: 20px;
}

.celllblvalue.medium, .celltext.medium, .cellvalue.medium, .cellid.medium {
	font-size: 18px;
}

.celllblvalue.small, .celltext.small, .cellvalue.small, .cellid.small {
	font-size: 16px;
}

.celllblvalue.xsmall, .celltext.xsmall, .cellvalue.xsmall, .cellid.xsmall {
	font-size: 14px;
}

.celllblvalue.xxsmall, .celltext.xxsmall, .cellvalue.xxsmall, .cellid.xxsmall {
	font-size: 12px;
}

.celllblvalue.title, .celltext.title, .cellvalue.title {
	font-size: 1em;
}
.celllblvalue.subtitle, .celltext.subtitle, .cellvalue.subtitle {
	font-size: 0.98em;
}
.celllblvalue.bodytext, .celltext.bodytext, .cellvalue.bodytext {
	font-size: 0.90em;
}

.divform > .divbody {
	height: 100%;
	overflow-y: auto;
	padding-left: 15px;
	padding-right: 10px;
	background-color: inherit;
}

.divform > .divbuttons {
	text-align: right;
	padding: 12px;
}

/*divform overrides for reading panel*/
.gridrdgpnl .divform > .divbody {
	padding-left: 0px;
	padding-right: 0px;
	background-color: var(--cb_formbody, hsl(0,0%,100%));
}

	.gridrdgpnl .divform > .divbody .tabbtn-group {
		background-color: var(--cb_form, hsl(0,0%,96%));
		padding-left: 15px;
		padding-right: 10px;
	}

	.gridrdgpnl .divform > .divbody .tabbtn {
		margin-bottom: 1px;
	}

	.gridrdgpnl .divform > .divbody .tabcontent {
		background-color: var(--cb_formbody, hsl(0,0%,100%));
		padding-left: 15px;
		padding-right: 10px;
		margin-top: 0;
	}

.gridrdgpnl .divform > .divbuttons {
	background-color: var(--cb_formbody, hsl(0,0%,100%));
}

/*Styling for the Logs tab of the Reading Panel*/
.divrdgpnllogs {
}

	.divrdgpnllogs button {
		background-color: transparent;
		outline: none;
		border: none;
	}

		.divrdgpnllogs button:hover .svgrefresh path {
			fill: var(--gf_svgbtn2, hsl(210,40%,50%)); /*  hsl(210,40%,35%);*/
		}

/* Styling for the form tab control (TabControl parent -- where the layout occurs -- and TabPage items)*/
.tabcontrol {
	position: relative;
}

.tabbtn-group {padding-top: 2px; padding-left:2px;}

.tabbtn {
	background-color: inherit;
	font-size: 17px;
	outline: none;
	border: none;
	border-bottom: 2px solid var(--cu_tabd, hsl(0,0%,30%)); /*ignored*/
	padding: 4px;
	margin-right: 6px;
	border-radius: 0px;
	margin-bottom: -3px;
	position: relative;
}

	.tabbtn:focus, .tabbtn:active {
		outline: 1px solid var(--cu_tabd, hsl(0,0%,30%));
	}

	.tabbtn.tabbtn-primary {
		font-weight: bold;
		color: var(--ct_tab1, hsl(210,40%,30%));
		/*border-top: 2px solid black;
		border-left: 2px solid black;
		border-right: 2px solid black;
		border-bottom: 2px solid white;*/
		border-bottom: 2px solid var(--cu_tab1, hsl(210,40%,30%));
		margin-bottom: -1px;
		/*z-index: 3;*/
	}

		.tabbtn.tabbtn-primary:hover {
			background-color: var(--cb_tab_h, hsl(210,40%,70%));
			color: var(--ct_tab_h, hsl(0,0%,100%));
		}

	.tabbtn.tabbtn-secondary {
		color: var(--ct_tab2, hsl(210,40%,50%));
		/*border: 1px solid black;*/
		/*border-bottom: 2px solid hsl(210,40%,50%);*/
		border-bottom-width: 1px;
		border-bottom-color: transparent;
	}

		.tabbtn.tabbtn-secondary:hover {
			background-color: var(--cb_tab_h, hsl(210,40%,70%));
			color: var(--ct_tab_h, hsl(0,0%,100%));
		}

.tabcontent {
	/*border: 2px solid black;*/
	/*z-index: -1;*/
	margin-top: 2px;
	border-top: 1px solid var(--cu_tabcont, hsl(210,40%,80%));
	padding-top: 5px;
	position: relative;
}
.tabpage {
	height: 98%;
}

/*Use the "ellipsed" class name on spans or divs to limit the 
	text displayed to one line with ellipses for any overflow.
	Note that the text container should have width=100% and/or grid or block/inline-block display.
*/
.ellipsed {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


.formnavlink, .cellnavlink {
	color: hsl(0,0%,0%);
}

/*Style settings for edit form fields.
	Classes:
		.formfldwrap - is on the containers (either div or fieldset) which wrap the input and labels.
		.formfldlbl - is on either label and legend
		.formfldinput - is on input element (includes standard text, textarea and datalist input).
		.forminputgrid - used on inner divs holding multiple span/input elements (dates, radio buttons, checkboxes) where the label is
			always displayed instead of transitioned from the placeholder.
	Notes:
		When using a fieldset, a legend is used instead of a label but in both cases those elements are actually
		below the input elements to facilitate the fade effect where the placeholder text is "moved" up when
		the field either receives focus or has content.
		Note that the parent edit form should have its background-color explicitly set since
		the field wrapper, input and label elements use "inherit" as their background-color.
	*/
/*Field wrapper - both divs and fieldsets use the same styling*/
.formfldwrap {
	padding: 0;
	margin-top: 8px; /*12px*/
	margin-bottom: 5px;
	border: none /*1px solid gainsboro*/;
	position: relative;
	background-color: inherit;
}

	.formfldwrap.formdatetime, .formfldwrap.formradgrp, .formfldwrap.formmaplocation {
		margin-top: 1px;
		margin-bottom: 3px;
		padding-bottom: 1px;
	}

/*FormCheckbox components have an optional parameter when "MultiStacked=true" the following is used in place of fieldwrap*/
.formfldsimple {
	padding: 0;
	margin-top: 4px;
	margin-bottom: 4px;
	border: none;
	position: relative;
	background-color: inherit;
}
/*Styling for both the label and legend*/
.formfldlbl {
	display: block;
	background-color: inherit;
	position: absolute;
	top: -9px /*-13px*/;
	margin-left: 1px /*10px*/;
	padding: 0 6px;
/*7/21/22 dropped size from 14px and added itald*/
	font-size: 13px;
	font-style: italic;
}

.formfldwrap.txtbox.lblposLeft {
	display: grid;
	grid-template-columns: 1fr 4fr;
}

	.formfldwrap.txtbox.lblposLeft .formfldlbl {
		display: inline;
		position: relative;
		margin: 0;
		top: initial;
		padding: 0;
	}

formfldwrap.txtbox.lblposLeft input.formfldinput {
	margin: 0;
	top: initial;
	padding: 0;
}


.formdatetime .formfldlbl, .formradgrp .formfldlbl, .formmaplocation .formfldlbl {
	position: relative;
	top: 2px;
}

/*Input and textarea base styling*/
.formfldinput {
	background-color: inherit;
	padding: 4px;
	border: 1px solid transparent;
	margin-top: 8px /*10px*/;
	margin-left: 3px;
	margin-bottom: 3px;
	width: 98%;
	border-bottom: 2px solid hsl(0,0%,85%);
}

/*FormTextBox with LabelPosition="FormLabelPosition.Left" 
	is set up in grid:
*/
.formfldwrap.txtbox.lblposLeft {
	display: grid;
	grid-template-columns: 1fr 4fr;
	margin: 0;
	top: initial;
	padding: 0;
}

	.formfldwrap.txtbox.lblposLeft .formfldlbl {
		display: inline;
		position: relative;
		margin: 0;
		top: initial;
		padding: 0;
	}

	.formfldwrap.txtbox.lblposLeft input.formfldinput {
		margin: 0;
		top: initial;
		padding: 0;
	}

.formfldwrap.formdatetime .forminputgrid {
	margin-left: 0px;
}

.formfldwrap.formdatetime input {
	border: none;
	outline: none;
	border-bottom: 2px solid hsl(0,0%,85%);
}


.formfldwrap.formdatetime.lblposLeft.dtfdateonly label,
.formfldwrap.formdatetime.lblposLeft.dtfdateonly div.forminputgrid {
	display: inline;
}

.formfldwrap.formdatetime.lblposLeft.dtftimeonly label,
.formfldwrap.formdatetime.lblposLeft.dtftimeonly div.forminputgrid {
	display: inline;
}


.formfldwrap.formdropdown.lblposFloatAbove {
	margin-top: 3px;
	margin-bottom: 3px;
}

	.formfldwrap.formdropdown.lblposFloatAbove .formfldlbl {
		/*override */
		position: relative;
		top: 0;
	}

.formfldwrap.formdropdown.lblposLeft .formfldlbl {
	/*overrides */
	display: inline;
	position: relative;
	top: 0;
}

.formfldwrap.formdropdown.lblposLeft .forminputgrid {
	position: relative;
	display: inline;
	width: auto;
}

.formfldwrap.formdropdown.lblposFloatAbove select {
	width: 100%;
}

	.formfldwrap.formdropdown select {
	background: inherit;	
/*	margin-top: 8px;
	margin-left: 3px;
	margin-bottom: 3px;
	width: 98%;*/
	border: 1px solid transparent;
	border-bottom: 2px solid hsl(0,0%,85%);
}

	.formfldwrap.formdropdown select:focus {
		outline: 1px solid transparent;
		border-bottom: 2px solid black;
	}

		/*Additional styling specific to textareas*/
		textarea.formfldinput {
			resize: vertical;
		}
/*Placeholder and focus styling (including transition effects)*/


.formfldinput:focus {
	outline: 1px solid transparent;
	border-bottom: 2px solid black;
}

.formfldinput[readonly]:focus {
	outline: 1px solid transparent;
	border-bottom: 2px solid hsl(0,0%,85%);
}

.formfldinput::placeholder {
	font-style: italic;
	font-size: 16px;
	color: hsl(0,0%,50%);
	opacity: 1;
}

.formfldinput:focus::placeholder {
	opacity: 0;
	transition: opacity 1s linear;
	font-size: 16px;
}

.formfldinput:placeholder-shown ~ .formfldlbl {
	opacity: 0;
}

.formfldinput:not(:placeholder-shown) ~ .formfldlbl, .formfldinput:focus ~ .formfldlbl {
	opacity: 1;
	transition: opacity 2s linear;
}

textarea.formfldinput::placeholder {
	position: absolute;
	font-size: 18px;
	bottom: 5px;
}

/*Styling for form input combination elements*/
.forminputgrid {
	display: flex;
	background-color: inherit;
	margin-top: 17px;
	margin-left: 8px;
	margin-bottom: 6px;
	width: 98%;
}

	.forminputgrid.checkbox {
		margin-left: 2px;
	}

		.forminputgrid.multicbox {
		display: inline-block;
		width: auto;
		margin-top: 2px;
		margin-bottom: 2px;
		margin-left: 2px;
	}

.formfldsimple .forminputgrid, .formmaplocation .forminputgrid {
	margin-top: 2px;
	margin-bottom: 2px;
	margin-left: 2px;
}

.forminputgrid > input {
	background-color: inherit;
	margin-right: 8px;
	margin-left: 8px;
	outline: 1px solid hsl(0,0%,80%);
	border: 1px solid hsl(0,0%,80%);
}

	.forminputgrid > input.fldinputmap {
		outline: 1px solid transparent;
		border: 1px solid transparent;
	margin-left: 3px;
		border-bottom: 2px solid hsl(0,0%,85%);
	}

.forminputgrid > input.fldinputmap:focus {
	outline: 1px solid transparent;
	border-bottom: 2px solid black;
}

.forminputgrid > span {
	font-style: italic;
	color: var(--ct_note, hsl(0,0%,59%));
}

.forminputgrid input[type=checkbox] {
	width: 18px;
	height: 18px;
	outline: initial;
}

	.forminputgrid input[type=checkbox]:active, .forminputgrid input[type=checkbox]:focus {
		outline: 2px ridge var(--cu_input_f, hsl(210,40%,60%));/* hsl(210,40%,50%);*/
		outline-offset: 2px;
	}

.formradgrp .forminputgrid {
	margin-left: 0;
	margin-top: 0px;
	display: block;
}

.formfldradlbl {
	margin-right: 4px;
	display: inline-block;
	white-space: pre-wrap;
}

.formradgrp .forminputgrid.radbtnsstacked .formfldradlbl {
	display: block;
}

.formfldwrap.formradgrp.lblposLeft {
	display: flex;
}

	.formfldwrap.formradgrp.lblposLeft label.formfldlbl {
		display: inline;
		white-space: nowrap;
		top: 0;
	}

.formradgrp.lblposLeft .forminputgrid {
	display: inline;
}


/*special case for single select to display button to clear entry*/
.formclrinp {
	position: absolute;
	right: 10px;
	top: 14px;
	border: none;
	background-color: transparent;
	visibility: hidden;
	display: flex;
	padding: 3px;
}

	.formclrinp > img {
		height: 14px;
	}

	.formclrinp:focus, .formclrinp:active, .formclrinp:hover {
		/*border: none;
		background-color: transparent;*/
		outline: 1px solid hsl(0,0%,59%);
	}

.formfldinput:not(:placeholder-shown) ~ .formclrinp {
	visibility: visible
}

/*Additional settings for multiselect fields*/
.formfldinput.formssel:not(:placeholder-shown) {
	/*	width: 94%;*/
}

.formfldwrap.ffwms {
}

.formfldinput.formmsel {
	margin-top: 0px;
}

	.formfldinput.formmsel.nosel {
		margin-top: 10px;
	}

.formfldwrap .iqmsremdiv {
	padding-top: 12px;
	padding-left: 5px;
	padding-right: 2px;
	padding-bottom: 0px;
	margin-top: 0px;
}

.formfldwrap.formmsel .formfldlbl {
	padding-bottom: 0px;
}


/*Styling for validation message*/
.formfldinvalid {
	color: var(--ct_alert,rgb(161,54,54));
	font-weight: bold;
	margin-left: 4px;
	padding: 3px;
}

.formfldinput.invalid {
	border-bottom: 2px solid var(--ct_alert,rgb(161,54,54));
}

.formlbltxt {
	padding: 5px;
	vertical-align: top;
	position: relative;
	overflow-wrap: break-word;
}

.formlbltxtcol1 {
	display: inline-block;
	width: 120px;
	padding-right: 3px;
	font-weight: bold;
	vertical-align: top;
}

.formlbltxtcol2 {
	display: inline-block;
	min-width: 120px;
	max-width: 80%;
	vertical-align: top;
}

.formlbltxtcol2.empty {
	font-style: italic;
	opacity: 0.6;
}

/* Variation for FormLblText component where LabelAbove=true */
.formlbltxt.fltabove .formlbltxtcol1 {
	display: block;
	width: 100%;
}

.formlbltxt.fltabove .formlbltxtcol2 {
	display: block;
	max-width: 100%;
	min-width: 10px;
}


/* Variation for FormLblText component where AsReadOnly=true */
.formlbltxt.fltreadonly {
	padding: 6px;
}
	.formlbltxt.fltreadonly .formlbltxtcol1 {
	display: block;
	width: 100%;
	font-weight: normal;
	font-size: 14px;	
}

.formlbltxt.fltreadonly .formlbltxtcol2 {
	display: block;
	max-width: 100%;
	min-width: 10px;
}

.formactbtn {
	outline: none;
	padding: 0;
	border: none;
	font-weight: bold;
	background-color: inherit;
	/*border-bottom: 1px solid inherit;*/
	border-radius: 0;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: hsl(0,0%,98%);
}

	.formactbtn:hover, .formactbtn:focus, .formactbtn:active {
		/*text-decoration: underline;*/
		background-color: inherit;
		border-bottom: 1px solid black;
	}

/*InputFile form field element*/
.formfilediv .formfldlbl {
	position: relative;
	top: auto;
}

.formfiledrop {
	border: 3px dashed hsl(210,40%,50%);
	/*padding: 1.5rem;*/
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	box-shadow: inset 0 0 8px rgba(0,0,0,0.2);
	color: hsl(0,0%,27%);
	font-size: 1.5rem;
	cursor: pointer;
	position: relative
}

	.formfiledrop:hover, .formfiledrop:active, .formfiledrop:focus {
		background-color: hsl(0,0%,80%);
		color: #333;
	}

	/*note: the real file input element is pushed to the background since you can't syle it and then we overlay it with a fake button*/
	.formfiledrop input[type=file] {
		position: absolute;
		padding: 10px;
		width: 100%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
		/*margin-top: 1rem;
		margin-left: 8px;*/
	}

	/* input[type=file]:active, .formfiledrop input[type=file]:focus*/
	.formfiledrop.formfile-focus {
		border: 3px solid hsl(210,40%,50%);
	}

.formfilebtn {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 8px;
	align-items: center;
}

	.formfilebtn div.formfilefk {
		margin: 3px;
	}

	.formfilebtn div.formfilemsg {
		margin: 5px;
		font-size: 16px;
	}

.formfiledrop-drag {
	background-color: hsl(170,80%,60%);
}

.formfilesel {
	display: flex;
	padding: 4px;
}

.formfile-rem {
	font-size: 14px;
	margin: 3px;
	display: grid;
	grid-template-columns: auto auto;
}

	.formfile-rem:hover {
		background-color: hsl(210, 40%,90%);
	}


/* Form toggle checkbox (FormToggleCheckbox)*/
.formfldtogglewrap {padding-left: 5px;}
.formtogglecbox [disabled] + label,
.formtogglecbox [disabled]:hover + label {
	color: hsl(0,0%,60%);
}

.formtogglecbox [type="checkbox"] {
	position: absolute;
	top: auto;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	white-space: nowrap;
}

	.formtogglecbox [type="checkbox"] + label {
		display: block;
		position: relative;
		padding: 0.3em;
		padding-left: 3.5em;
		max-width: calc(100% - 2em);
	}

	.formtogglecbox [type="checkbox"]:focus + label,
	.formtogglecbox [type="checkbox"]:hover + label {
		color: hsl(240,100%,50%);
	}

		.formtogglecbox [type="checkbox"]:focus + label::before,
		.formtogglecbox [type="checkbox"]:hover + label::before {
			box-shadow: 0 0 0.5em hsl(0,0%,20%);
		}

		.formtogglecbox [type="checkbox"]:focus + label::after,
		.formtogglecbox [type="checkbox"]:hover + label::after {
			background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='rgba(0,0,0,.25)'/%3E%3C/svg%3E");
			background-size: 30%;
			background-repeat: no-repeat;
			background-position: center center;
		}

	.formtogglecbox [type="checkbox"] + label::before,
	.formtogglecbox [type="checkbox"] + label::after {
		content: "";
		position: absolute;
		height: 1.5em;
		transition: all 0.25s ease;
	}

	.formtogglecbox [type="checkbox"] + label::before {
		left: 0;
		top: 0.2em;
		width: 3em;
		border: 0.2em solid hsl(0,0%,46%);
		background: hsl(0,0%,46%); /*gray*/
		border-radius: 1.1em;
	}

	.formtogglecbox [type="checkbox"] + label::after {
		left: 0;
		top: 0.2em;
		background-color: hsl(0,0%,100%);
		background-position: center center;
		border-radius: 50%;
		width: 1.5em;
		border: 0.12em solid hsl(0,0%,46%);
	}

	.formtogglecbox [type="checkbox"]:checked + label::after {
		left: 1.6em;
		border-color: hsl(114,61%,41%);
		/*color: hsl(210,40%,40%);*/ /*#36a829*/
	}

	.formtogglecbox [type="checkbox"]:indeterminate + label::after {
		left: 0.8em;
	}

	.formtogglecbox [type="checkbox"]:indeterminate + label::before {
		background-color: hsl(0,0%,87%);
	}

	.formtogglecbox [type="checkbox"]:checked + label::before {
		background-color: hsl(210,40%,40%);
		border-color: hsl(114,61%,41%);
	}

	.formtogglecbox [type="checkbox"][disabled] + label::before {
		background-color: transparent;
		border-color: hsl(0,0%,87%);
	}

	.formtogglecbox [type="checkbox"][disabled] + label::after {
		border-color: hsl(0,0%,87%);
	}

.formtogglecbox [disabled]:hover + label {
	color: hsl(0,0%,60%); /* case for CSS custom property if not supporting IE/Edge */
}

.formtogglecbox [type="checkbox"][disabled]:hover + label::before {
	box-shadow: none;
}

.formtogglecbox [type="checkbox"][disabled]:hover + label::after {
	background-image: none;
}



/* Custom field container */
.formcustomfields {
	padding-top: 4px;
}


/* multiselect BUTTON for each selected item */
.iqmultiselect-remove {
	color: #fff; /*white*/
	background-color: var(--bb_submit, hsl(210,40%,40%));	/*hsl(210,40%,50%);*/
	border: 1px solid #3b3b3b; /*darker gray*/
	border-radius: 2px;
	font-size: 0.75em;
	font-weight: bold;
	margin-bottom: 3px;
	margin-right: 4px;
	padding: 0.25em 1.75em 0.25em 0.25em;
	position: relative;
}
	.iqmultiselect-remove:hover {
		background-color: var(--bb_submit_h, hsl(210,40%,50%));
	}
	.iqmultiselect-remove:focus {
		background-color: var(--bb_submit_f, hsl(210,40%,50%));
		border-color: #00008b; /*darkblue*/
		box-shadow: 0 0 3px 1px #608ca8; /*light blue*/
		outline: 3px solid transparent;
	}

	.iqmultiselect-remove::before,
	.iqmultiselect-remove::after {
		border-right: 2px solid #fff;
		content: "";
		height: 1em;
		right: 0.75em;
		position: absolute;
		top: 50%;
		width: 0;
	}

	.iqmultiselect-remove::before {
		transform: translate(0, -50%) rotate(45deg);
	}

	.iqmultiselect-remove::after {
		transform: translate(0, -50%) rotate(-45deg);
	}


/* SearchPage.razor advanced search form*/

.searchform.advsearch {
}

	.searchform.advsearch .inputwrapper {
		border: 1px solid gray;
		background: whitesmoke;
		margin-bottom: 5px;
	}


/*Settings for "Quick Bar" instances of search form -- in SearchBar.razor.
	The EditForm component in the SearchBar component uses class="searchform quicksearch" .
*/

.searchbar {
	/*container div for "Quick Bar" search bar*/
}

/*Input textbox in Quick Search Bar*/
.searchbarinput {
/*	width: 300px;*/
	height: 25px;
	border: none;
	border-bottom: 0px solid gainsboro;
}

/*searchbartglbtn is the Button in the Quick Search Bar that opens the dropdown quick search form*/
.searchbartglbtn {
	/*background-color: hsl(210,40%,90%);*/
	background: inherit;
	outline: none;
	border: none;
}

.searchbarinput::placeholder {
	font-style: italic;
}

.searchbartglbtn:hover, .searchbartglbtn:focus {
	background-color: var(--bb_other_h, hsl(210,40%,70%)); /* hsl(210,40%,90%);*/
}

.searchbarddd {
	color: black;
	z-index: 5;
	resize: both;
	overflow: auto;
	position: absolute;
	display: flex;
	width: 500px;
	min-height: 60px;
	height: 400px;
	border: 1px solid black;
	background-color: white;
	font-size: 16px;
}

@media only screen and (max-width: 600px) {
	.searchbarddd {
		width: 350px;
	}
}

	.searchbarddd:not(:focus-within) {
		background-color: gainsboro;
		transition: background-color 0.01s; /*fires an attached 'transitionend' event listener after very brief timeout */
	}

.searchform.advsearch .inputwrapper {
	border: none;
	background: white;
}

.searchform .inputwrapper.MultiSelect>div {
align-items: end;
}

	/*.searchform.quicksearch input[type='text'], .searchform.quicksearch input[type='search'] {*/
.searchform input[type='text'], .searchform input[type='search'] {
	outline: none;
	padding: 3px;
	border: none;
	border-bottom: 2px solid var(--cu_input, hsl(210,40%,80%));
}

/*.searchform.quicksearch input[type='text']:focus, .searchform.quicksearch input[type='search']:focus {*/
	.searchform input[type='text']:focus, .searchform input[type='search']:focus {
		border-bottom-color: var(--cu_input_f, hsl(210,40%,60%));
		padding: 3px;
		outline: 1px solid var(--cu_inputol_f, hsl(210,40%,90%));
	}

.searchform fieldset {
	/*	.quicksearch */
	border: 1px solid var(--cu_fieldset, hsl(210,40%,60%));
}

.searchform fieldset label {
	/*	.quicksearch */
	font-size: 13px;
	font-weight: normal;
}

.searchform .inputgeolu label {
	/*	.quicksearch */
	font-size: 13px;
	font-weight: normal;
}

.searchform .inputmfchk label {
	/*	.quicksearch */
	font-size: 13px;
	font-weight: normal;
}

.searchform .inputdatetime label {
	/*	.quicksearch */
	font-size: 13px;
	font-weight: normal;
}

.searchform .dockbtn_bottom a {
	/*	.quicksearch */
	color: hsl(210,40%,40%);
}


/*Styling for FindContact.razor*/

.findcontactnm:active, .findcontactnm:focus {
	border: 1px solid hsl(0,0%,50%);
	outline: 1px solid hsl(0,0%,50%);
}

.findcontactnm:hover {
	background-color: hsl(0,0%,85%);
}

.findcontactnm.fcselected {
	color: hsl(0,0%,95%);
	background-color: hsl(0,0%,15%);
}

	.findcontactnm.fcselected:hover {
		color: hsl(0,0%,95%);
		background-color: hsl(0,0%,20%);
	}


/* END FORM FIELD STYLING */

/* START SN/Text STYLING */
.item.row.ui-user-message.sms {
	background-color:unset;
}

.item .body ul.images {
	list-style-type: none;
	padding:0;
	margin:0;
}

.item.row ul li img {
	max-width: 50px;
}
/* END SN STYLING */

/* START eNewsletter Wizard STYLING */
form.divform.form-enewsletter-edit .tabpage {
	height:100%;
}

.wizard-toolbar {
	overflow-y: hidden !important;
	height: 100%;
	width: 96%;
}

.wizard-toolbar .ui-toolbar {
	height: 95%;
}

/*.wizard-toolbar .tabcontrol {
	height: auto !important;
}*/

	/*.wizard-toolbar .tabcontent {*/
		/*overflow-y: visible !important;
		width: 98%;*/
		/*display: none !important;
	}
	.wizard-toolbar.tags .tabcontent {
		display: block !important;
	}

	.wizard-toolbar .settings,
	.wizard-toolbar .section {
		width: 98%;
		float: left;
		display: none;
	}*/

	.wizard-toolbar fieldset {
		border: 1px solid #ddd;
		padding: 0.5em;
		border-radius: .5em;
	}
/*
		.wizard-toolbar .settings.active,
		.wizard-toolbar .section.active {
			display: block;
			margin-top:10px;
		}*/

	.wizard-toolbar .form-field {
		width:100%;
		float:left;
	}

	.wizard-toolbar .form-field label {
		float: left;
		clear:left;
	}

		.wizard-toolbar .form-field .ui-input{
			float: right;
		}

		.wizard-toolbar .form-field .ui-input-full {
			float: left;
			width:100%;
		}

	ul.wizard-menus,
	ul.wizard-columns,
	ul.wizard-footer,
	ul.wizard-buttons {
		list-style-type: none;
		width: 80px;
		padding-inline-start: 0;
	}

.dot-flashing {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: #9880ff;
	color: #9880ff;
	animation: dot-flashing 1s infinite linear alternate;
	animation-delay: 0.5s;
	display:inline-block;
	margin-left:30px;
}

	.dot-flashing::before, .dot-flashing::after {
		content: "";
		display: inline-block;
		position: absolute;
		top: 0;
	}

	.dot-flashing::before {
		left: -15px;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background-color: #9880ff;
		color: #9880ff;
		animation: dot-flashing 1s infinite alternate;
		animation-delay: 0s;
	}

	.dot-flashing::after {
		left: 15px;
		width: 10px;
		height: 10px;
		border-radius: 5px;
		background-color: #9880ff;
		color: #9880ff;
		animation: dot-flashing 1s infinite alternate;
		animation-delay: 1s;
	}

@keyframes dot-flashing {
	0% {
		background-color: #9880ff;
	}

	50%, 100% {
		background-color: rgba(152, 128, 255, 0.2);
	}
}
/* END eNewsletter Wizard STYLING */