:root
	{
		--menu-width: 250px;
		--menu-speed: 0.3s;
		
 		--topbar-height: 0px;
		--topbar-bgcolor: #222;
		
		--toolbar-bgcolor: white;
		--toolbar-height: 60px;
		
		--toolbar-button-color: #222;
		--normal-icon-color: #D47F01;
		
		--menu-profile-bgcolor: white;
		--menu-main-bgcolor: #222222;
		
		--menu-profile-option-bgcolor: #efefef;
		--menu-profile-option-color: #222;
		
		--button-bgcolor: #FFC900;
 		--button-color: #222;
		--button-border: 0px;
		
		--cta-button-bgcolor: #45AC36; 
		--cta-button-color: white;
		--cta-button-border: 0px;
		
		--normal-button-bgcolor: #efefef; 
		--normal-button-color: #222;
		--normal-button-border: 1px solid #ddd;
		 
	}
	
	

	button,
	select,
	input[type="button"], 
	input[type="submit"] 
	{
		-webkit-appearance: none;
	}
	
	select {
		width: 100%;
		display: block; 
		font-size: 16px;
		padding-left: 10px;
		padding-right: 40px;
		
		background-color: #efefef;
 		border-radius: 5px;
		border: 2px solid #ddd;
		
		-moz-appearance: none;
		-webkit-appearance: none;
		
		position: relative;
		
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
		background-repeat: no-repeat, repeat;
		background-position: right .7em top 50%, 0 0;
		background-size: .65em auto, 100%;
	}
	 

.jsPopupNotification
{  
	margin: 0;
	margin-left: auto;
	margin-right: auto;
	  
 	min-height: 40px;
 	min-width: 80%;
	max-width: 80%; 
	width: 80%;
	
	background-color: #222222;
	color: white;   
	position: fixed; 
	 
	top: auto;
	left: 0px; 
	right: 0px; 
	bottom: 20%;
	
	z-index: 2000;
	
    box-shadow: 0px 0px 5px gray;	
   	border-radius: 5px;
    
    transition: all 0.3s linear;
    
    opacity: 0; 
	bottom: -100%;
} 


.jsPopupNotification.open 
{
	opacity: 1!important;
		bottom: 20%;

}

.jsPopup {
	margin: auto;
	margin-top: 100px;
	margin-bottom: auto;
	min-height: 100px;
	max-width: 90%; 
	width: 90%;
	background-color: white;
	color: #222222;
	margin-top: 200px;
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: auto;
	z-index: 2000;
	box-shadow: 0px 0px 6px gray;
	border-radius: 5px;
}

.jsContentWindow .jsModalCloseWrap::before
{
	content: "\f00d";
	position: absolute;
	display: block;
	color: var(--toolbar-button-color); 		 
 	font-family: "Font Awesome 5 Free";   
	font-weight: 900;	
	font-size: 26px;
	
	top: 15px;
	left: 15px; 
 	cursor: pointer;
}

.jsContentWindow .jsModalCloseWrap img
{
	display: none;
}

.jsContentWindow {
	top:0;
	left:0;
	right:0;
	bottom:0;
	
	border-radius: 0;
	 
	max-width: unset;
 	max-height: unset;
	width: auto ;
	height: auto ;
	
	background-color: var(--toolbar-bgcolor);
}

.jsContentWindow .jsModalClose {
	top :10px;
	left :10px;
}
	
.jsInnerContentWindow {
	top: var(--toolbar-height);
	left: 0;
	right: 0;
	bottom: 0;
	padding: 10px;
	padding-top: 0px;
	overflow: auto;
	
	background-color: white;
}
		
	 
	
	#util1
	{
		position: fixed;
		top: var(--topbar-height); 
		left: 0;
		height: var(--toolbar-height) ;
		right: 0;
		background-color: var(--toolbar-bgcolor);
		margin: 0; 
	}
	
	#util2
	{
		position: fixed;
		top: 0px; 
		left: 0;
		height: var(--topbar-height) ;
		right: 0;
		background-color: var(--topbar-bgcolor);
		margin: 0; 
	}
	
	#website-title {
	
		position: fixed;
		top: 15px;
		left: 15px;
		font-size: 20px;
		color: white;
	}

	
	
	#header, #footer, #altheader, #altfooter, #mid-column, .mid-column { 
		width: 100%;
	}
	 
	#feature-panel  {
		height: 0px;
		display: none;
	}
	
	#content-table {
		padding: 0px;
 	}

	#content {
		width: 100%; 
		padding: 0px 10px; 
		margin: 0px; 
		overflow: visible;    
	}

	.main_container {
      width: 100%; 
	}
	
	 
	
	#altmain
	{
		position: fixed;
		overflow: auto;
		top: calc( var(--topbar-height) + var(--toolbar-height));
		bottom: 0px;
		left: 0px;
		right: 0px;
		-webkit-overflow-scrolling: touch;
	}
	
	
	.portlet_horizontal_menu li, 
	.portlet_horizontal_dropdown_menu li 
	{
		float: none;
		vertical-align: middle;
		
	}

	table.layout_2ColLeft td, 
	table.layout_2ColLeft tr,
	table.layout_2ColLeft tbody, 
	
	table.layout_2ColRight td, 
	table.layout_2ColRight tr,
	table.layout_2ColRight tbody, 
	
	table.layout_2ColEqual td, 
	table.layout_2ColEqual tr,
	table.layout_2ColEqual tbody 
	{
		display: block;
	}

	.layout_2ColEqual .Col1
	{
		width: 100%;
	}


	.layout_2ColEqual .Col2
	{
		width: 100%;
	}

	.layout_2ColLeft .Col1
	{
		width: 100%;
	}
	.layout_2ColLeft .Col2
	{
		width: 100%;
	}


	.layout_2ColRight .Col1
	{
		width: 100%;
	}
	.layout_2ColRight .Col2
	{
		width: 100%;
	}
	
	table.featured_article_table,
	table.featured_article_table tbody,
	table.featured_article_table tr,
	table.featured_article_table td
	{
 		display: block;
	}
		
	.featured_article_col.col_w_50
	{
		width: 100%;
		display: block;
	}
	

	.featured_article_col.col_w_33
	{
		width: 100%;
		display: block;
	}

	.featured_article_col.col_w_25
	{
		width: 100%;
		display: block;
	}


	.featured_article_col.col_w_20
	{
		width: 100%;
		display: block;
	}

	.TabPanel
	{
		border: 0px;
	}

	.HorizontalTabPanel.TabPanel
	{ 
		display: none;
		overflow: auto; 
		padding: 15px 2px;
		border-top: 1px solid #FFC900;
		border-top: 1px solid #efefef;
	}

	.VerticalTabPanel.TabPanel
	{
		display: none;
		overflow: auto; 
		padding-left: 15px;
/* 		border-left: 1px solid #efefef; */
	}

	.TabPanel.ActivePanel
	{
		display: block;
		margin-top: 2px;
	}

	.HorizontalTabs.TabContainer
	{  
		line-height: 36px;
		height: 36px;
		padding:0px;
		margin:0px;
	}
 
	.VerticalTabs.TabContainer
	{ 
 		line-height: 36px;
 		padding:0px;
		margin:0px;
		display: block; 
		padding:0px; 
		margin:0px; 
		list-style:none; 
		 
	} 

	.HorizontalTabs .Tab
	{ 
		padding-left: 18px;
		padding-right: 18px;
		cursor: pointer;
		margin-left: 3px;
		
		height: 36px;
		line-height: 36px;
		
		-moz-border-radius-topleft: 5px;
		-moz-border-radius-topright: 5px; 
		color: #030303; 
		display: block;
		
	}


	.VerticalTabs .Tab
	{ 
		padding-left: 18px;
		padding-right: 18px;
		cursor: pointer; 
		margin: 0px;
		
		height: 45px;
		line-height: 45px;
		
		color: #030303; 
		display: block;
		
	}




	.Tab.ActiveTab
	{
		background-color: var(--menu-profile-option-bgcolor);
		color: var(--menu-profile-option-color);
 	}

 


	.portlet_horizontal_dropdown_menu::before {
 		position: fixed;
		content: "\f0c9";
		color: var(--toolbar-button-color); 		
 		top: calc( var(--topbar-height) + 20px );
		right: 20px;
		font-family: "Font Awesome 5 Free";   
		font-weight: 900;
		
		font-size: 26px;
		line-height: 100%;
	}
	
	.portlet_horizontal_dropdown_menu:active::before,
	.portlet_horizontal_dropdown_menu:focus::before { 
		color: #222;  
	}

	
	.portlet_horizontal_menu .inside,
	.portlet_horizontal_dropdown_menu .inside
	{
		width: 100%;
		margin: auto;  
		position: fixed; 
		top: 0px;
		right: 0px;
		bottom: 0px;
		
		background-color: var(--menu-main-bgcolor);
		width: var(--menu-width);
		 
		margin-right: calc( var(--menu-width) * -1 - 15px ); 
		transition: margin-right ease var(--menu-speed); 
		
		
		box-shadow: -3px 0px 15px #888;
	}
	
	.portlet_horizontal_dropdown_menu:focus .inside
	{
		margin-right: 0px;
	}
	
	.portlet_horizontal_dropdown_menu li  
	{ 
		margin: 10px 20px;
	}
	
	.portlet_horizontal_dropdown_menu li > a 
	{
		text-decoration: none;
		color: white;
	}
	
	
	
	 
	
	.portlet_vertical_tabs_trigger::before {
 		position: fixed;
		content: "\f007";
		color: var(--toolbar-button-color); 		
 		top: calc( var(--topbar-height) + 20px );
		right: 125px;
		
		font-family: "Font Awesome 5 Free";   
		font-weight: 900;

		font-size: 26px;
		line-height: 100%;
	}
	
	.portlet_vertical_tabs_trigger:active::before,
	.portlet_vertical_tabs_trigger:focus::before { 
 	}

	 
	.VerticalTabs.TabContainer
	{ 
		margin: auto;  
		position: fixed; 
		top: 0px;
		right: 0px;
		bottom: 0px;
 		background-color: var(--menu-profile-bgcolor);
		width: var(--menu-width);
		border-left: 1px solid #888;
		
 		margin-right: calc( var(--menu-width) * -1 - 15px); 
		transition: margin-right ease var(--menu-speed); 
		-webkit-transform: translateZ(1px) !important;
		z-index: 100;
		
		box-shadow: -3px 0px 15px #888;
	}
	
	.portlet_vertical_tabs_trigger:focus + .VerticalTabs.TabContainer
	{
		margin-right: 0px;
	}
	
	
	.VerticalTabPanel.TabPanel
	{
		width: 100%;
		margin: 0px;
		padding: 10px;
	}
	
	
	
	.HorizontalTabs.TabContainer 
	{ 
		display: none;
		visibility: hidden;
	}
	
	
	.HorizontalTabs.Selector 
	{
		width: 100%;
		display: block; 
		font-size: 16px;
		padding-left: 10px;
		padding-right: 40px;
		
		background-color: #efefef;
 		border-radius: 5px;
		border: 2px solid #ddd;
		
		-moz-appearance: none;
		-webkit-appearance: none;
		
		position: relative;
		
		background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
		linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
		background-repeat: no-repeat, repeat;
		background-position: right .7em top 50%, 0 0;
		background-size: .65em auto, 100%;
	}
	 
	  
	.HorizontalTabs.TabContainer > li
	{
		display: block;  
		position: absolute;
	}

	
	.PortletSodalisShoppingCartLink {
		width: 0px;
		height: 0px;
		position: fixed;
		top: 0; right: 0;
  	}
	
	.PortletSodalisShoppingCartLogoutLink {
		width: 0px;
		height: 0px;
		position: fixed;
		top: 0; right: 0;
  	}
 
	.PortletSodalisShoppingCartLink::before {
		position: fixed;
		content: "\f07a";
		color: var(--toolbar-button-color); 		
 		top: calc( var(--topbar-height) + 20px );
		right: 70px;
		
		font-family: "Font Awesome 5 Free";   
		font-weight: 900;

		font-size: 26px;
		line-height: 100%;
 	}
	
	.PortletSodalisShoppingCartLogoutLink::before {
		position: fixed;
		content: "\f00d";
		color: var(--toolbar-button-color); 		
 		top: calc( var(--topbar-height) + 20px );
		right: 60px;
		
		font-family: "Font Awesome 5 Free";   
		font-weight: 900;

		font-size: 26px;
		line-height: 100%;
		
		display: none;
  	}
  	
  	
  	#cta-top {
	
		display: none;
	}
 
 
	.portlet_sodalis_member_directory table.mainTable, 
	.portlet_sodalis_member_directory table.mainTable tbody, 
	.portlet_sodalis_member_directory table.mainTable tr, 
	.portlet_sodalis_member_directory table.mainTable td {
		display: block;
		border: 0px;
	}
	
	 
	.portlet_sodalis_member_directory table.mainTable th {
		display: none;
	}
	
	.portlet_sodalis_member_directory table.mainTable td {
		border: 0px;
	}
	.portlet_sodalis_member_directory table.mainTable tr {
		border: 1px solid #dddddd;
		margin-bottom: 10px;
		padding: 10px;
		background-color: #fefefe;
	}
	
	
	.portlet_sodalis_member_directory table.mainTable td::before {
		content: attr(data-title);
		display: block;
		font-size: 60%;
		font-weight: bold;
		color: #888;
	}
	
	.portlet_sodalis_member_directory table.mainTable tr.headingRow {
		display: none;
	}
	
	
	.HorizontalTabs.Selector 
	{
		height: 40px;
	}
	
	
	
	.AjaxFormInput
	{
		width: 100%;
		line-height: 1.8em;
		font-size: 16px !important;
 	}
 	 
	
	.AjaxForm .input_extra  {
		
	}
	
	.AjaxFormButtonContainer {
		padding: 0px;
		padding-top: 5px;
	}
	  
	  


	input.AjaxFormButton { 
		
		padding: 7px;
		padding-left: 12px;
		padding-right: 12px;
		 
		overflow: visible; 
		background-color: var(--button-bgcolor);
		color: var(--button-color);
		border-radius: 6px;
		border: 0px solid #FFC900;
		cursor: pointer;
		
		width: 100%;
		margin: 0px;
		line-height: 1.8em ;
		-webkit-appearance: none;
		display: inline-block;
		font-size: 16px;
		
	}
	
	input.AjaxFormButton:focus,
	input.AjaxFormButton:active,
	input.AjaxFormButton:disabled
	{
		margin: 0;
	}

	.AjaxForm td.FieldLabel
	{
		font-size: 10px;
	}

	.AjaxForm td.FieldContainer,
	.AjaxForm td.FieldContainer .ReadOnlyFieldValue,
	.AjaxForm td.FieldContainer .AjaxFormInput
	{
		font-size: 16px;
		font-weight: normal;
	}

	.AjaxForm td.FieldContainer
	{
		padding-bottom: 10px;
	}

	.AjaxFormContainer.vertical .AjaxForm .r1 td, 
	.AjaxFormContainer.vertical .AjaxForm .r2 td 
	{ 
		padding: 3px;
	} 

	.AjaxFormContainer.vertical .AjaxForm .r1 td.FieldLabel, 
	.AjaxFormContainer.vertical .AjaxForm .r2 td.FieldLabel 
	{ 
		padding-bottom: 0px;
	} 

	.AjaxFormContainer.vertical .AjaxForm .r1 td.FieldContainer, 
	.AjaxFormContainer.vertical .AjaxForm .r2 td.FieldContainer 
	{ 
		padding: 0px;
		padding-bottom: 10px;
	} 

	.RequiredField em
	{
		float: none;
	}

	.RequiredField .Label
	{
		float:left;
	}


	.AjaxForm td.FieldLabel,
	.AjaxForm td.FieldContainer,
	.AjaxForm tbody,
	.AjaxForm td,
	.AjaxForm tr
	{
		display: block;
	}

	.AjaxMultiSelect.Editing {
		height: auto;
	}


	.AjaxFormButton.CloseButton {
		width: calc( 30% - 5px );
		margin-right: 5px;
		background-color: #efefef;
	}
	.AjaxFormButton.CloseButton + .AjaxFormButton {
		width: calc( 70% - 5px);
		margin-left: 5px;
	}


	.AjaxFormButton.FormCloseButton {
		width: calc( 30% - 5px );
		margin-right: 5px;
		background-color: #efefef;
	}
	.AjaxFormButton.FormCloseButton + .AjaxFormButton {
		width: calc( 70% - 5px);
		margin-left: 5px;
	}


	

	.AjaxForm table.AjaxTableForm tr 
	{
		display: table-row;
	}

	.AjaxForm table.AjaxTableForm td 
	{
		display: table-cell;
	}

	
	
	
	.AjaxForm .DateField input {
		width: calc( 100% - 35px );
		display: inline-block;
	}
	
	.AjaxForm .DateField .DateTrigger {
 		display: inline-block;
 		width: 35px;
		height: auto;
	}
	
	.AjaxForm .DateField img.DateTrigger
	{ 
		display: none;
	}
	 
	.AjaxForm .DateField .DateTriggerContainer::after {
		content : "\f073";
		display: inline-block;
		color: var(--normal-icon-color); 		
 
		font-family: "Font Awesome 5 Free";
		font-weight: 900;

		font-size: 26px;
		margin-left: 5px;
		cursor: pointer;
	}
	
	 
	
	
	
	.AjaxForm.horizontal table 
	{
		width: 100%;
	}
	
	.AjaxForm.horizontal tbody 
	{
		display: table-row-group;
	}
	
	.AjaxForm.horizontal td 
	{
		display: table-cell;
	}
	
	.AjaxForm.horizontal tr 
	{
		display: table-row;
	}
	
	
	


	.TypeAheadFieldSection 
	{
		display: grid !important;
		grid-template-columns: 1fr 45px 45px;
	}

	.TypeAheadFieldSection .AjaxFormInput.TypeAhead
	{ 
	}


	.TypeAheadFieldSection .TypeAheadClearButton,
	.TypeAheadFieldSection .TypeAheadShowAll
	{
		width: 25px;
	margin-left: 10px;
	}

	
	.TypeAheadResults {
		max-width: 90%!important;
	}

	.TypeAheadResults .opcion {
		font-size: 16px !important;
		padding: 10px;
	}
		
		
		
		

	.CatalogBlock {
		width: 70% !important;
		height: auto!important;
		margin: auto;
		float: none;
		margin-bottom: 50px;
	}

	.CatalogImage {
		width: 100% !important;
		display: block;
		margin: auto;
	}


	.ProductPage table tr,
	.ProductPage table td
	{
		display: block;
	}

	.ProductPage .ProductName.BeforeImage {
		display: block;
		text-align: center;
		margin-top: 10px;
		margin-bottom: 10px;
		font-size: 18px;
	}

	.ProductPage .ProductName.AfterImage {
		display: none;
	}


	.ProductMainImageContainer
	{
		width: 100%;
		margin: auto;
		padding: 0px;
	}

	.ProductMainImage
	{
		width: 100%;
	}

	.ProductDetailContainer
	{
		width: 100%;
		margin: auto;
	}	  
		
			
			
	.ProductPage .ProductAddToCartBar
	{
		background-color: transparent;
		margin:0px!important;
		padding: 0px;
		border:0px;
		
	}

	.ProductPage .AddToCartButton,
	.CatalogBlock .AddToCartButton
	{
		background-color: var(--cta-button-bgcolor) !important;
		color: var(--cta-button-color) !important;
		border: var(--cta-button-border) !important;
		border-radius: 5px;
		width: 100%;
		margin: 10px 0px;
		line-height: 1.8em;
		font-size: 16px;
		padding: 7px 15px !important;
	}

	.ProductPage,
	.ProductPage .ProductMainImage
	{
		border: 0px;
	}
	
	.ProductPage input
	{
		font-size: 16px !important;
	}
			
		
	.CatalogControl 
	{
		background-color: transparent;
	}
	
	.CatalogControl select
	{
		display: block;
	}
		
	.CatalogControl table,
	.CatalogControl tbody
	{
		display: block;
	}
	
 	.CatalogControl tr
 	{
		display: grid; 
		grid-template-columns: 1fr  1fr 1fr;
		grid-template-rows: auto;
		grid-template-areas: 
			"indi sel1 sel2"
			"page page page" ;
	}
	
	.CatalogControl td {
	
		padding: 0 !important;
	}
	
	.CatalogControl .CurrentIndicator {
		grid-area: indi;
	}
	  
	.CatalogControl .PageSizeSelector {
		grid-area: sel1;
	}
	  
	.CatalogControl .SortSelector {
		grid-area: sel2;
	}
	  
	.CatalogControl .SortSelector .Label {
		display: none;
	}
	  
	.CatalogControl .PageSelector {
		grid-area: page;
		
		display: grid; 
		grid-template-columns: 1fr  1fr 1fr;
		grid-template-areas: "left middle right";
		
		grid-gap: 10px;
 	}
	   
	  
	.CatalogControl .GoBack {
		text-align: left;
		grid-area: left;
		
		background-color: var(--button-bgcolor);
		color: var(--button-color);
		border: var(--button-border);	
		width: 100%;
		float: none;
		display: block;
		padding: 7px 15px;
		border-radius: 5px; 
		text-align: center;
		font-size: 16px;
		text-decoration: none;
 	}
 	
	.CatalogControl .GoForward {
		text-align: right;
		grid-area: right;
		
		background-color: var(--button-bgcolor);
		color: var(--button-color);
		border: var(--button-border);	
		width: 100%;
		float: none;
		display: block;
		padding: 7px 15px;
		border-radius: 5px;
		text-align: center;
 		font-size: 16px;
		text-decoration: none;
	}
 	
 	
 	.CatalogControl .PageSelector select {
	
		grid-area: middle;
		text-align: center;
		display: block;
	}
	    
	  
	.CatalogControlTop .PageSelector,
	.CatalogControlTop .GoBack,
	.CatalogControlTop .GoForward
	{
		display: none;
	}
	
	.CatalogControlBottom .CurrentIndicator,
	.CatalogControlBottom .PageSizeSelector,
	.CatalogControlBottom .SortSelector
	{
		display: none;
	}
	
	
	
	
	
	
	
	
	
	
	
	/* Directory */
	
	
	.DirectoryControl 
	{
		background-color: transparent;
	}
	
	.DirectoryControl select
	{
		display: block;
	}
		
	.DirectoryControl table,
	.DirectoryControl tbody,
 	.DirectoryControl tr,
 	.DirectoryControl td	
 	{
		display: block;
	}
	
	.DirectoryControl table tbody
	{
		display: grid;
		grid-template-columns: 1fr;
	}
	
	
	.DirectoryControl .SearchSection
	{
		order: 2;
	}
	
	.DirectoryControl .FilterSection
	{
		order: 1;
	}
	 
	
  
	.DirectoryControl td { 
		padding: 0;
	}
	
	
	
	.DirectoryControl .SearchBox 
	{
		display: grid;
		grid-template-columns: 1fr 100px;
		padding: 5px;
	}
	
	
	.DirectoryControl .FilterOptions 
	{
		padding: 10px;
	}
	
	.DirectoryControl .FilterField 
	{
		display: block;
		float: unset !important;
		margin: 0px !important;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	
	
	
	
	
	.DirectoryControl .NavigationControls
	{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
			"indi pagesize"
			"page page";
		width: 100%;
	}
	  
	
	
	.DirectoryControl .CurrentIndicator {
		grid-area: indi;
		width: 100%;
	}
	  
	.DirectoryControl .PageSizeSelector {
		grid-area: pagesize;
		width: 100%;
	}
	    
	  
	.DirectoryControl .PageSelector {
		grid-area: page;
		
		display: grid; 
		grid-template-columns: 1fr  1fr 1fr;
		grid-template-areas: "left middle right";
		
		grid-gap: 10px;
		width: 100%;
 	}
	   
	  
	.DirectoryControl .GoBack {
		text-align: left;
		grid-area: left;
		
		background-color: var(--button-bgcolor);
		color: var(--button-color);
		border: var(--button-border);	
		width: 100%;
		float: none;
		display: block;
		padding: 7px 15px;
		border-radius: 5px; 
		text-align: center;
		font-size: 16px;
		text-decoration: none;
 	}
 	
	.DirectoryControl .GoForward {
		text-align: right;
		grid-area: right;
		
		background-color: var(--button-bgcolor);
		color: var(--button-color);
		border: var(--button-border);	
		width: 100%;
		float: none;
		display: block;
		padding: 7px 15px;
		border-radius: 5px;
		text-align: center;
 		font-size: 16px;
		text-decoration: none;
	}
 	
 	
 	.DirectoryControl .PageSelector select {
	
		grid-area: middle;
		text-align: center;
		display: block;
	}
	    
	    
	.DirectoryControlTop .PageSelector,
	.DirectoryControlTop .GoBack,
	.DirectoryControlTop .GoForward,
	.DirectoryControlTop .CurrentIndicator,
	.DirectoryControlTop .PageSizeSelector 
	{
		display: none;
	}
	
	
	.DirectoryControlBottom .FilterOptions,
	.DirectoryControlBottom .SearchBox,
	.DirectoryControlBottom .SortSelector
	{
		display: none;
	}
	
	
	
	
	
	
	
	
	
	
	
	  
	.TabPanel.Loading { 
		min-height: 300px;
	}
	
	.jsContentPopup table.AjaxForm 
	{
		min-width: 80%;
	}
	
	.jsContentPopup 
	{
		width: 90%!important;
	}
	
	.Loader,
	.ActivityIndicator {
 		display: none;
		position: absolute;
		
		margin: 1px;
		border-radius: 50%;
		border: 3px solid red;
		border-color: #222 transparent #222 transparent;
		animation: lds-dual-ring 1s linear infinite;
		
		width: 50px;
		height: 50px;
		left:0px;
		right:0px;
		margin-top: 100px;
		margin-left: auto; 
		margin-right: auto;
	}
	
	@keyframes lds-dual-ring {
		0% {
			transform: rotate(0deg);
		}
		100% {
			transform: rotate(360deg);
		}
	}
	
	.Loader[state='active'] {
		display: block; 
	}
	
	
	
	
	
	
	.CalendarEvent {
		width: 100%;
		padding: 10px;
		font-size: 14px;
	}
	
	.FullPageEvent .EventName , 
	.CalendarEvent .EventName 
	{
		font-size: 18px; 
		padding-top: 10px;
		padding-bottom: 10px;
		font-weight: bold;
	}
	  
	.CalendarEvent .EventName 
	{
		font-size: 18px; 
		padding: 0px; 
		font-weight: bold;
	}
	
	.CalendarEvent .EventName a {
		font-size: 15px; 
		margin-bottom: 10px;
		font-weight: normal;
	}
	
	.CalendarEvent .CalendarEvent {
	
		padding: 0;
	}
	
	.CalendarEventTable,
	.CalendarEventTable tr,
	.CalendarEventTable tr td{
		display: block;
	}
	
	
	.AjaxForm.CalendarFilterForm  {
		width: 100%!important;
	}
	
	.CalendarFilterForm td {
		display: table-cell;
		width: 50%;
	}
	
	.CalendarFilterForm tr {
		display: table-row;
	}

	.CalendarFilterForm tbody {
		display: table-row-group;
	}
	
	
	.EventImageOnCalendar {
 		width: 100%;
	}
	
	.EventImage {
 		width: 100%;
	}
	 
	.FullPageEvent .EventImageOnCalendar {	
		display: none;
	}
	
	.FullPageEvent .Grid , 
	.CalendarEvent .Grid 
	{
		display: block;
		margin-bottom: 10px;
	}
	
	
	.FullPageEvent .Grid tbody,
	.FullPageEvent .Grid tr,
	.CalendarEvent .Grid tbody,
	.CalendarEvent .Grid tr 
	{
		display: block; 
	
	}
	
	.FullPageEvent .GridCell , 
	.CalendarEvent .GridCell 
	{
		display: block;
		float: left;
		height: auto;
	}
	
	.FullPageEvent .GridCell a, 
	.CalendarEvent .GridCell a
	{
		display: block;
		height: auto;
		line-height: 1.8em;
		border: 1px solid #efefef;
		background-color: var(--normal-button-bgcolor);
		color: var(--normal-button-color);
		border: var(--normal-button-border);
		padding: 5px 15px;
		margin-right: 10px;
		border-radius: 5px;
		
	}
	
	.FullPageEvent .GridCell a img, 
	.CalendarEvent .GridCell a img
	{
		display: none;
	}
	
	.FullPageEvent .RegisterCta .GridCell, 
	.CalendarEvent .RegisterCta .GridCell 
	{ 
		float: none;
		width: 100%;
		display: block;
	}
	
	.FullPageEvent .RegisterCta .GridCell a, 
	.CalendarEvent .RegisterCta .GridCell a 
	{
		background-color: var(--cta-button-bgcolor);
		color: var(--cta-button-color);
		border: var(--cta-button-border);	
		width: 100%;
		float: none;
		
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 7px 15px;
	}
	
	
	
	
	
	/*
	 * 	Event Registration 
	 *  
	 */
	
	
	.RegistrationStepForm .AjaxFormButton[name="save"] 
	{
		width: calc( 50% - 0px );
	}
	
	
	.RegistrationStepForm .AjaxFormButton[name="cancel"] 
	{
		width: calc( 25% - 10px );
		margin-right: 10px;
		background-color: var(--normal-button-bgcolor);
		color: var(--normal-button-color);
		border: var(--normal-button-border);
	}
	
	
	.RegistrationStepForm .AjaxFormButton[name="prev"] 
	{
		width: calc( 25% - 10px );
		margin-right: 10px;
		background-color: var(--normal-button-bgcolor);
		color: var(--normal-button-color);
		border: var(--normal-button-border);
	}
	
	.RegistrationStepForm .AjaxFormButton[name="cancel"] + .AjaxFormButton[name="save"] {
 		width: 75%;
	}
	
	
	
	
	.RegistrationStepForm .FieldContainer {
 		clear: both;
		
	}
	
	
	.RegistrationStepForm  .RegistrationFormHead_Container {
	
		display: none;
	}
	
	.RegistrationFormHead1,
	.RegistrationFormHead2 
	{
		width: auto !important;
	}
	
	.RegistrationFieldName,
	.RegistrationFieldInstructions
	{
		display: block;
	}
	
	
	.RegistrationStepForm .CurrencyFieldPrefix
	{
		display: none;
	}
	
	
	 
	
	.RegistrationStepForm .RegistrationFormCheckBox_Container,
	.RegistrationStepForm .RegistrationFormRadioButton_Container,
	.RegistrationStepForm .RegistrationFormRadioButtonRequired_Container
	{  
		display: grid;
		grid-template-columns: 50px 1fr 70px;
	}
	
	
	.RegistrationStepForm .RegistrationFormRadioButtonRequired_Container
	{  
		display: grid;
		grid-template-columns: 1fr 70px 50px;
	}
	
	.RegistrationStepForm .RegistrationFormRadioButtonRequired_Container .FieldLabel
	{
		order: 3;
	}
	 
	.RegistrationStepForm .RegistrationFormRadioButtonRequired_Container .FieldContainer
	{
		order: 1;
	}
	 
	.RegistrationStepForm .RegistrationFormRadioButtonRequired_Container .FieldColumn[data-colname="price"]
	{
		order: 2;
	}
	 
	
	.RegistrationStepForm .FieldColumn[data-colname="price"]
	{ 
		text-align: right;
	}
	
	
	
	
	.RegistrationStepForm .RegistrationFormUnits_Container
	{
		display: grid;
		grid-template-columns: 150px  1fr 70px 50px;
/* 		grid-template-rows: auto; */
		grid-template-areas: 
			"header header header"
			"control basd price ";
	}
	
	.RegistrationStepForm .RegistrationFormUnits_Container .FieldLabel
	{
		grid-area: header;
	}
	
	.RegistrationStepForm .RegistrationFormUnits_Container .FieldContainer
	{
		grid-area: control;
	}
	
	.RegistrationStepForm .RegistrationFormUnits_Container .FieldColumn[data-colname="price"]
	{
		grid-area: price;
	}
	
	
	
	
	
	
	.RegistrationStepForm .RegistrationFormTextInput_Container
	{
		display: grid;
		grid-template-columns:  1fr 70px 50px;
 		grid-template-areas: 
			"header header"
			"control price ";
	}
	
	.RegistrationStepForm .RegistrationFormTextInput_Container .FieldLabel
	{
		grid-area: header;
	}
	
	.RegistrationStepForm .RegistrationFormTextInput_Container .FieldContainer
	{
		grid-area: control;
	}
	
	.RegistrationStepForm .RegistrationFormTextInput_Container .FieldColumn[data-colname="price"]
	{
		grid-area: price;
	}
	
	
	
	
	
	
	.RegistrationStepForm .RegistrationFormDonation_Container  
	{ 
		display: grid;
		grid-template-columns: 150px 1fr 70px 50px;
 		grid-template-areas: 
			"header header header"
			"control blah price ";
	
	}
	
	
	.RegistrationStepForm .RegistrationFormDonation_Container .FieldLabel
	{
		grid-area: header;
	}
	
	.RegistrationStepForm .RegistrationFormDonation_Container .FieldContainer
	{
		grid-area: control;
		grid-template-columns: 1fr;
		display: grid;
	}
	
	.RegistrationStepForm .RegistrationFormDonation_Container .FieldColumn[data-colname="price"]
	{
		grid-area: price;
	}
	
	
	
	
	
	
	
	.RegistrationStepForm .CheckRadioButtonLabel
	{   
		position: relative;
		display: inline-block;
		width: 45px;
		height: 26px;
	}
	
	.RegistrationStepForm input.CheckRadioButton 
	{
		opacity: 0;
		width: 0;
		height: 0;
	}
	
	
	
	/* The slider */
	.RegistrationStepForm .CheckRadioButtonLabel .slider {
		position: absolute;
		cursor: pointer;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ccc;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 24px;
	}

	.RegistrationStepForm .CheckRadioButtonLabel .slider:before {
		position: absolute;
		content: "";
		height: 18px;
		width: 18px;
		left: 4px;
		bottom: 4px;
		background-color: white;
		-webkit-transition: .4s;
		transition: .4s;
		border-radius: 50%;
	}

	.RegistrationStepForm .CheckRadioButtonLabel input:checked + .slider {
		background-color: #54C238;
	}

	.RegistrationStepForm .CheckRadioButtonLabel input:focus + .slider {
		box-shadow: 0 0 1px #54C238;
	}

	.RegistrationStepForm .CheckRadioButtonLabel input:checked + .slider:before {
		-webkit-transform: translateX(18px);
		-ms-transform: translateX(18px);
		transform: translateX(18px);
	}
	 
	
	
	
	
	
	
	
	
	
.ShoppingCart,
.ShoppingCart tbody,
.ShoppingCart tr,
.ShoppingCart td 
{
	display: block;
	font-size: 16px!important;
}


.ShoppingCart .CartHeading
{
	display: none;
}

.ShoppingCart .CartProductNumber
{
	display: none;
}

.ShoppingCart .CartProductImage
{
	width: 60px;
	float: left;
}

.ShoppingCart .CartProductDescription
{
	width: calc( 100% - 70px ); 
	margin-left: 70px;
}

.ShoppingCart .CartProductUnits
{ 
	position: absolute;
	right: 50%;
	bottom: 10px;
}

.ShoppingCart .CartProductPrice
{ 
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.ShoppingCart .CartProductAction
{ 
	position: absolute;
	left: 10px;
	bottom: 10px;
}

.ShoppingCart .CartProductAction img
{ 
	display: none;
}

.ShoppingCart .CartProductAction a:before
{ 
	display: block;
	content: "\f1f8";
	color: var(--normal-icon-color); 		
 
	font-family: "Font Awesome 5 Free";
	font-weight: 900;

	font-size: 22px;
}

.ShoppingCart .CartLine {
	padding-bottom: 50px;
	position: relative;
	min-height: 150px;
	
	margin-bottom: 20px;
	
	border-bottom: 1px solid #efefef;
}

.ShoppingCart .CartLine[data-container-state='loading'] {

	opacity: 0.5;
}



.ShoppingCartWrap .Grid,
.ShoppingCartWrap .Grid tbody,
.ShoppingCartWrap .Grid tr,
.ShoppingCartWrap .Grid td,
.ShoppingCartWrap .Grid .GridCell
{
	display: block;
	height: auto;
}


.ShoppingCartWrap .Grid .GridCell .AjaxAction img
{
	display: none;
}
.ShoppingCartWrap .Grid .GridCell 
{
	text-align: center;
}

.ShoppingCartWrap .Grid .GridCell .AjaxAction
{
	background-color: var(--normal-button-bgcolor);
	color: var(--normal-button-color);
	border: var(--normal-button-border);
	border-radius: 5px;
	width: 80%;
	margin: 5px auto;
	line-height: 1.8em;
	font-size: 14px;
	display: block;
	text-align: left;
	padding: 5px 15px;
	text-decoration: none;
}

.ShoppingCartWrap .Grid .GridCell .AjaxAction .ActivityIndicator 
{
	border-color: var(--normal-button-border) transparent var(--normal-button-border) transparent;
}


.ShoppingStepContainer
{
	display: none;
}






*[data-container-state='inactive'] {
}

*[data-container-state='loading'] .ActivityIndicator {
	display: block;
 	margin: 0px;
	top: calc( 50% - 25px );
	left: calc( 50% - 25px ); 
}

*[data-container-state='inactive'] .ActivityIndicator {
	display: none;
}
 
*[data-activity-indicator="insert"] {
	position: relative;
}

.ActivityIndicator {
	display: none;
}


*[data-state='loading'] .ActivityIndicator {
	display: block;
 	margin: 0px;
	top: calc( 50% - 10px );
	left: calc( 50% - 10px ); 
	opacity: 0.7;
	border: 2px solid white;
	border-color: white transparent white transparent;
	 
	width: 20px;
	height: 20px;
}


.CheckOutBox a {
	background-color: var(--cta-button-bgcolor);
	color: var(--cta-button-color);
	border: var(--cta-button-border);
	border-radius: 5px;
	width: 100%;
	display: inline-block;
	text-align: center;
	font-size: 16px;
	line-height: 1.8em;
} 

.CheckOutBox a > img 
{
	display: none;
}

.CheckOutBox > div
{
	float: none!important;
	width: 100%;
}

.CartTotalTable {
	width: 100%;
	font-size: inherit;
}



	.CtaButton
	{
		background-color: var(--cta-button-bgcolor);
		color: var(--cta-button-color);
		border: var(--cta-button-border);
		border-radius: 5px;
		width: 100%;
		margin: 10px 0px;
		line-height: 1.8em;
		font-size: 16px;
		display: inline-block;
		text-align: center;
		padding: 7px 15px;
		text-decoration: none;
	}
	
	.CtaButton .ActivityIndicator {
		border-color: var(--cta-button-color) transparent var(--cta-button-color) transparent;
	}


	.NormalButton
	{
		background-color: var(--normal-button-bgcolor);
		color: var(--normal-button-color);
		border: var(--normal-button-border);
		border-radius: 5px;
		width: 100%;
		margin: 10px 0px;
		line-height: 1.8em;
		font-size: 16px;
		display: inline-block;
		text-align: center;
		padding: 7px 15px;
		text-decoration: none;
	}

	.NormalButton .ActivityIndicator {
		border-color: var(--normal-button-border) transparent var(--normal-button-border) transparent;
	}


	.ActionButton
	{
		background-color: var(--button-bgcolor);
		color: var(--button-color);
		border: var(-button-border);
		border-radius: 5px;
		width: 100%;
		margin: 10px 0px;
		line-height: 1.8em;
		font-size: 16px;
		display: inline-block;
		text-align: center;
		padding: 7px 15px;
		text-decoration: none;
	}

	.ActionButton .ActivityIndicator {
		border-color: var(--button-color) transparent var(--button-color) transparent;
	}

	
	
	
	
	
	
	.portlet_sodalis_account_history .AccountHistoryTable,
	.portlet_sodalis_account_history .AccountHistoryTable tbody,
	.portlet_sodalis_account_history .AccountHistoryTable td,
	{
		display: block;
	}
	
	.portlet_sodalis_account_history .AccountHistoryTable .TableHeader
	{
		display: none;
	}

	.portlet_sodalis_account_history .AccountHistoryTable .SummaryRow
	{
		display: grid;
		grid-template-columns: 1fr 100px 100px;
	}
	.portlet_sodalis_account_history .AccountHistoryTable .SummaryRow .Spacer
	{
		display: none;
	}

	.portlet_sodalis_account_history .AccountHistoryTable .PayAllRow a
	{ 
		background-color: var(--cta-button-bgcolor);
		color: var(--cta-button-color);
		border: var(--cta-button-border);
		border-radius: 5px;
		width: 100%;
		margin: 10px 0px;
		line-height: 1.8em;
		font-size: 16px;
		padding: 7px 15px;
		display:block;
		text-align:center;
		text-decoration: none;
	}
	.portlet_sodalis_account_history .AccountHistoryTable .PayAllRow a img {
		display: none;
	}
	
	
	.portlet_sodalis_account_history .AccountHistoryTable .Entry .Pay a
	{ 
		background-color: var(--cta-button-bgcolor);
		color: var(--cta-button-color);
		border: var(--cta-button-border);
		border-radius: 5px;
		width: 100%;
		margin: 0px 0px;
		line-height: 1.8em;
		font-size: 16px;
		padding: 7px 15px;
		display:block;
		text-align:center;
		text-decoration: none;
	}
	.portlet_sodalis_account_history .AccountHistoryTable  .Entry .Pay  a img {
		display: none;
	}
	
	.portlet_sodalis_account_history .AccountHistoryTable  .DueEntry {
		color: inherit!important;
	}
	
	
/*
	.portlet_sodalis_account_history.DisplayAction .AccountHistoryTable tr.Entry 
	{
		display: grid; 
		grid-template-columns: 1fr 100px 100px 100px;
 		grid-template-rows: auto; 
		grid-template-areas: 
			"description description date pay"
			"description description invoice pay"
			"total total balance pay ";
	
		border-bottom: 1px solid #efefef;
		
		padding: 10px 0px;
	}
	*/
	
	.portlet_sodalis_account_history .AccountHistoryTable tr.Entry 
	{
		display: grid; 
		grid-template-columns: 1fr 100px 100px 0px;
 		grid-template-rows: auto; 
		grid-template-areas: 
			"description description date pay"
			"description description invoice pay"
			"total total balance pay ";
	
		border-bottom: 1px solid #efefef;
		
		padding: 10px 0px;
	}
	
	.portlet_sodalis_account_history .AccountHistoryTable tr.DueEntry 
	{
		display: grid; 
		grid-template-columns: 1fr 100px 100px 100px;
 		grid-template-rows: auto; 
		grid-template-areas: 
			"description description date pay"
			"description description invoice pay"
			"total total balance pay ";
	
		border-bottom: 1px solid #efefef;
		
		padding: 10px 0px;
	}
	
	.portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Pay {
		grid-area: pay;		 
	}
	.portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Date {
		grid-area: date;
		text-align: right;
	}
	.portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Invoice {
		grid-area: invoice;
		text-align: right;
	}
	.portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Description {
		grid-area: description; 
	}
	.portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Total {
		grid-area: total;
		text-align: right;
	}
	.portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Balance {
		grid-area: balance;
		text-align: right;
	} 
	
	html[lang="es"] .portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Total::before {
 		content: "Monto";
		display: block;
		font-size: 10px;
	} 
	
	html[lang="es"] .portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Balance::before {
 		content: "Balance";
		display: block;
		font-size: 10px;
	} 
	
	html[lang="en"] .portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Total::before {
 		content: "Amount";
		display: block;
		font-size: 10px;
	} 
	
	html[lang="en"] .portlet_sodalis_account_history .AccountHistoryTable tr.Entry .Balance::before {
 		content: "Balance";
		display: block;
		font-size: 10px;
	} 
	
	
	
	
	/* Event Registrations */
	
	
	.portlet_sodalis_event_history table.EventRegistrationList,
	.portlet_sodalis_event_history table.EventRegistrationList tbody,
	.portlet_sodalis_event_history table.EventRegistrationList tr,
	.portlet_sodalis_event_history table.EventRegistrationList td
	{
		display: block;
	}
	
	
	.portlet_sodalis_event_history table.EventRegistrationList .Heading
	{
		display: none;
	}
	
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry
	{
		display: grid;
		grid-template-columns: 1fr 100px 100px 80px 80px;
		grid-template-areas: 
			"part code date time1 time2"
			"event event event event event";
			
		padding-bottom:20px;
	}
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry .RegType  {
		grid-area: part;
	}
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry .EventName > span {
		font-weight: bold;
 	}
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry .EventName  {
		grid-area: event;
 	}
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry .EventCode  {
		grid-area: code;
	}
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry .EventDate  {
		grid-area: date;
	}
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry .EventStarts  {
		grid-area: time1;
	}
	
	.portlet_sodalis_event_history table.EventRegistrationList .Entry .EventEnds  {
		grid-area: time2;
	}
	
	
	
	
	
	
	
	
	
	.thanks_table 
	{
		width: 100%!important;
		margin:  5px!important;
		display: block;
		
		border: 0px !important;
	}
	
	
	
	
	
	
	.thanks_table tbody,
	.thanks_table tr,
	.thanks_table th,
	.thanks_table td
	{ 
		display: block;
		border: 0px !important;
	}
	
	.thanks_table .Heading 
	{
		display: none;
	}
	
	.thanks_table.InvoiceDetails .Entry
	{
		display: grid;
		grid-template-columns: 80px 1fr 100px;
	}
	
	.thanks_table.InvoiceDetails .Entry .Description
	{
		text-align: left;
	}
	
	.thanks_table.InvoiceDetails .InvoiceGrandTotal
	{
		font-weight: bold;
		border-top: 1px solid gray !important;
	}
	
	.thanks_table.InvoiceDetails tr.InvoiceTotals
	{
	}
	
	.thanks_table.InvoiceHeader td
	{
		text-align: left;
	}
	
	.thanks_table.InvoiceHeader .Barcode 
	{ 
		text-align: center;
	}
	
	.thanks_table.InvoiceHeader .Barcode img 
	{
		width: 50%;
	}
	
	
	.thanks_table.InvoiceHeader .InvoiceID::before
	{ 
		content: "Invoice #";
		display: block;
		font-size: 10px;
	}
	
	
	.thanks_table.InvoiceHeader .CustomerID::before
	{ 
		content: "Customer #";
		display: block;
		font-size: 10px;
	}
	
	
	.thanks_table.InvoiceHeader .CustomerName::before
	{ 
		content: "Customer Name";
		display: block;
		font-size: 10px;
	}
	
	
	
	
	
	
	
	
	.portlet_sodalis_ec_history .EcHistoryFilter,
	.portlet_sodalis_ec_history .EcHistoryFilter table,
	.portlet_sodalis_ec_history .EcHistoryFilter tbody,
	.portlet_sodalis_ec_history .EcHistoryFilter tr,
	.portlet_sodalis_ec_history .EcHistoryFilter td
	{
		display: block;
	}
	
	
	 
	
	
	.portlet_sodalis_ec_history .AccountHistoryTable,
	.portlet_sodalis_ec_history .AccountHistoryTable tbody,
	.portlet_sodalis_ec_history .AccountHistoryTable td
	{
		display: block; 
	}
	
	.portlet_sodalis_ec_history .AccountHistoryTable td
	{
		padding: 2px;
	}
	
	.portlet_sodalis_ec_history .AccountHistoryTable .TableHeader
	{
		display: none;
	}

	.portlet_sodalis_ec_history .AccountHistoryTable .SummaryRow
	{
		display: grid;
		grid-template-columns: 1fr 100px 100px;
	}
	
	
	.portlet_sodalis_ec_history .AccountHistoryTable tr.Entry 
	{
		display: grid; 
		grid-template-columns: 1fr 150px;
 		grid-template-rows: auto; 
		grid-template-areas: 
			"description date"
			"description type"
			"description amount ";
	
		border-bottom: 1px solid #efefef;
		
		padding: 10px 0px;
		width: 100%;
	}
	
	.portlet_sodalis_ec_history .AccountHistoryTable tr.Entry .Date {
		grid-area: date;
		text-align: right;
	}
	
	
	.portlet_sodalis_ec_history .AccountHistoryTable tr.Entry .Description {
		grid-area: description;
		text-align: left;
	}
	
	
	.portlet_sodalis_ec_history .AccountHistoryTable tr.Entry .Amount {
		grid-area: amount;
		text-align: right;
	}
	
	
	.portlet_sodalis_ec_history .AccountHistoryTable tr.Entry .CreditType {
		grid-area: type;
		text-align: right;
	}
	
	

	.portlet_sodalis_ec_history .AccountHistoryTable tr.CreditTypeSummary 
	{
		display: grid; 
		grid-template-columns: 1fr 100px;
 		grid-template-rows: auto; 
	
		border-bottom: 1px solid #efefef;
		
		padding: 10px 0px;
		width: 100%;
	}
	
	.portlet_sodalis_ec_history .AccountHistoryTable tr.TotalSummary 
	{
		display: grid; 
		grid-template-columns: 1fr 100px;
 		grid-template-rows: auto; 
	
		border-bottom: 1px solid #efefef;
		
		padding: 10px 0px;
		width: 100%;
	}
	

	
	
	
	
	
	
	
	
	
	.portlet_sodalis_privacy_form table,
	.portlet_sodalis_privacy_form tbody,
	.portlet_sodalis_privacy_form tr
	{
		display: block;
	}
	
	.portlet_sodalis_privacy_form .Setting {
		vertical-align: top;
	}
	
	.portlet_sodalis_privacy_form .AjaxAction {
		background-color: var(--normal-button-bgcolor);
		color: var(--normal-button-color);
		border: var(--normal-button-border);
		border-radius: 5px;
		width: 100%;
		margin: 0px;
		line-height: 1.8em;
		font-size: 12px;
		display: inline-block;
		text-align: center;
		padding: 7px 15px;
	}
	
	.portlet_sodalis_privacy_form .AjaxAction .ActivityIndicator { 
		border-color: #222 transparent #222 transparent;
	}
	
	
	.portlet_sodalis_privacy_form .EmailSection 
	{
		display: grid;
		grid-template-columns: 3fr  1fr ;
		grid-template-rows: auto;
		grid-template-areas: 
			"type toggle"
			"data toggle" ;
			
		padding-bottom: 10px;
	}
	
	.portlet_sodalis_privacy_form .EmailType {

		grid-area: type;
	}
	
	.portlet_sodalis_privacy_form .Email {
		grid-area: data;
		text-overflow: ellipsis;  white-space: nowrap;
		overflow: hidden;
		width: auto!important;
	}
	
	.portlet_sodalis_privacy_form .Setting {
		grid-area: toggle;
	}
	
	
	
	.portlet_sodalis_privacy_form .PhoneSection 
	{
		display: grid;
		grid-template-columns: 3fr  1fr ;
		grid-template-rows: auto;
		grid-template-areas: 
			"type toggle"
			"data toggle" ;
		padding-bottom: 10px;
	}
	
	.portlet_sodalis_privacy_form .PhoneType {
 		grid-area: type;
	}
	
	.portlet_sodalis_privacy_form .Phone {
		grid-area: data;
		text-overflow: ellipsis;  white-space: nowrap;
		overflow: hidden;
		width: auto!important;
	}
	
	.portlet_sodalis_privacy_form .Setting {
		grid-area: toggle;
	}
	
	
	
	
	.portlet_sodalis_privacy_form .AddressSection 
	{
		display: grid;
		grid-template-columns: 3fr  1fr ;
		grid-template-rows: auto;
		grid-template-areas: 
			"type toggle"
			"data toggle" ;
		padding-bottom: 10px;
	}
	
	.portlet_sodalis_privacy_form .AddressType {
 		grid-area: type;
	}
	
	.portlet_sodalis_privacy_form .Address {
		grid-area: data;
		text-overflow: ellipsis;  white-space: nowrap;
  overflow: hidden;
		width: auto!important;
	}
	
	.portlet_sodalis_privacy_form .Setting {
		grid-area: toggle;
	}
	
	
	
	
	
	

	.portlet_sodalis_membership_status table {
		width: 100%;
	}
		
	
	
	
	
	
	
	
	
	.portlet_sodalis_documents .DocumentAreaContainer, 
	.portlet_sodalis_documents .DocumentAreaContainer tbody,
	.portlet_sodalis_documents .DocumentAreaContainer td,
	.portlet_sodalis_documents .DocumentAreaContainer tr
	{
		display: block;
	}
	
	.portlet_sodalis_documents .DocumentContainer
	{
		width: 100%;
	}
	
	.portlet_sodalis_documents .Document 
	{
		padding: 0;
	}
	
	.portlet_sodalis_documents .Document .Grid 
	{
		width: 100%!important;
	}
	
	.portlet_sodalis_documents .Document .Grid tr
	{
		display: table-row;
	}
	
	.portlet_sodalis_documents .Document .Grid td
	{
		display: table-cell;
		padding-right: 5px!important;
	}
	
	.portlet_sodalis_documents .DocumentName 
	{
		margin: 0px !important;
	}
	
	.portlet_sodalis_documents .Folder .DocumentName a.Link, 
	.portlet_sodalis_documents .Document .DocumentName a.Link 
	{
		display: block;
		padding: 10px;
		padding-left: 45px;
		position: relative;
	}
	
	.portlet_sodalis_documents .Document .DocumentName a.Link::before 
	{
		content: "\f15b";
		position: absolute;
		display: block;
		color: var(--normal-icon-color); 		 
		font-family: "Font Awesome 5 Free";   
		font-weight: 900;	
		font-size: 26px;
		
		left: 5px;
		top: 5px;
	}
	
	.portlet_sodalis_documents .Folder .DocumentName a.Link::before 
	{
		content: "\f07c";
		position: absolute;
		display: block;
		color: var(--normal-icon-color); 		 
		font-family: "Font Awesome 5 Free";   
		font-weight: 900;	
		font-size: 26px;
		
		left: 5px;
		top: 5px;
	}
	
	
	.portlet_sodalis_documents .Folder .DocumentName a.Link img,
	.portlet_sodalis_documents .Document .DocumentName a.Link img
	{ 
		display: none;
	}
	
	.portlet_sodalis_documents .Folder .DocumentName a.Link:hover 
	.portlet_sodalis_documents .Document .DocumentName a.Link:hover 
	{ 
		background-color: #efefef;
	}

	.portlet_sodalis_documents .Document .Grid td a.AjaxAction
	{  
		background-color: var(--normal-button-bgcolor);
		color: var(--normal-button-color);
		border: var(--normal-button-border);
		border-radius: 5px;
		width: 100%;
		margin: 0px;
		line-height: 1.8em;
		font-size: 13px;
		display: inline-block;
		text-align: center;
		padding: 7px 15px;
		text-decoration: none; 
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
/* The main calendar widget.  DIV containing a table. */

.calendar {
  z-index:2;
  position: relative;
  display: none;
  border-top: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  font-size: 16px;
  color: #000;
  cursor: default;
  background: #d4d0c8;
  background: white;
  font-family: tahoma,verdana,sans-serif;
  
  margin: auto;
}

.calendar table {
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
  font-size: 16px;
  color: #000;
  cursor: default;
  background: white;
  font-family: tahoma,verdana,sans-serif;
}

/* Header part -- contains navigation buttons and day names. */

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;
  padding: 1px;
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
}

.calendar .nav {
  background: transparent url(menuarrow.gif) no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
  font-weight: bold;
  padding: 1px;
  border: 1px solid #000;
  background: #848078;
  color: #fff;
  text-align: center;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-bottom: 1px solid #000;
  padding: 2px;
  text-align: center;
  background: #f4f0e8;
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #f00;
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
  border-top: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  border-left: 2px solid #fff;
  padding: 0px;
  background-color: #e4e0d8;
}

.calendar thead .active { /* Active (pressed) buttons in header */
  padding: 2px 0px 0px 2px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
  background-color: #c4c0b8;
}

/* The body part -- contains all the days in month. */

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  text-align: right;
  padding: 10px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #aaa;
}
.calendar tbody .day.othermonth.oweekend {
  color: #faa;
}

.calendar table .wn {
  padding: 10px;
  border-right: 1px solid #000;
  background: #f4f0e8;
}

.calendar tbody .rowhilite td {
  background: #e4e0d8;
}

.calendar tbody .rowhilite td.wn {
  background: #d4d0c8;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
  padding: 10px; 
   border: 0px;
  background-color: #efefef;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
  padding: 10px;
  border: 0px;
  background-color: #ddd;
}

.calendar tbody td.selected { /* Cell showing selected date */
  font-weight: bold; 
  padding: 10px;
  background: #e4e0d8;
  border:0px;
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #f00;
}

.calendar tbody td.today { /* Cell showing today date */
  font-weight: bold;
  color: #00f;
}

.calendar tbody .disabled { color: #999; }

.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}

.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}

/* The footer part -- status bar and "Close" button */

.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #f4f0e8;
  padding: 1px;
  border: 1px solid #000;
  background: #848078;
  color: #fff;
  text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
  padding: 1px;
  background: #e4e0d8;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  padding: 2px 0px 0px 2px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
}

/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo {
  position: absolute;
  display: none;
  width: 4em;
  top: 0px;
  left: 0px;
  cursor: default;
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
  background: #e4e0d8;
  font-size: 90%;
  padding: 1px;
}

.calendar .combo .label,
.calendar .combo .label-IEfix {
  text-align: center;
  padding: 1px;
}

.calendar .combo .label-IEfix {
  width: 4em;
}

.calendar .combo .active {
  background: #c4c0b8;
  padding: 0px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
}

.calendar .combo .hilite {
  background: #048;
  color: #fea;
}

.calendar td.time {
  border-top: 1px solid #000;
  padding: 1px 0px;
  text-align: center;
  background-color: #f4f0e8;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #889;
  font-weight: bold;
  background-color: #fff;
}

.calendar td.time .ampm {
  text-align: center;
}

.calendar td.time .colon {
  padding: 0px 2px 0px 3px;
  font-weight: bold;
}

.calendar td.time span.hilite {
  border-color: #000;
  background-color: #766;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}