body {
  height: 100%;
  /*background-image: url("bkgnd-gradient.jpg");*/
  background-color: White;
  
  /* Full height */
  height: 100%;
}

.bannerTitleP {
	color: darkblue;
}

.helpAreaStyle {
	background-color: #f2f3f4;
  	border: 1px solid black;
  	box-shadow: 5px 10px 8px #888888;
  	padding: 2px;
  	border-radius: 5px;
}

.helpTitle {
	width: 100%;
	background-color: Black;
	color: white;
}

.screenTitleText {
	font-size: 15px;
	font-family: Verdana;
	font-weight: bold;
}

.freeFormTable {
	width: 380px;
}

.appSimulatorDiv {
  	border: 1px solid black;
  	border-radius: 2px;
  	width: 375px;
  	height: 630px;
  	/*height: 100%;*/
  	overflow-y: auto;
}

.addPanelAreaDivId {
	background-color: beige;
  	border: 1px solid black;
  	box-shadow: 5px 10px 8px #888888;
  	margin: 10px 10px 10px 10px;
  	margin-top: 10px;
  	margin-bottom: 10px;
  	margin-right: 10px;
  	margin-left: 10px;
  	border-radius: 10px;
  	width: 700px;
  	/*
  	margin: 0px 0px 0px 0px;
  	margin-top: 0px;
  	margin-bottom: 0px;
  	margin-right: 0px;
  	margin-left: 0px;
  	*/
}

.screenSettingsTab {
	font-size: 12px;
}

.editPanelAreaDivId {
  	width: 700px;
  	height: 570px;
}

/*
.editPanelAreaDivId {
	background-color: beige;
  	border: 1px solid black;
  	border-radius: 10px;
  	box-shadow: 5px 10px 8px #888888;
  	margin: 10px 10px 10px 10px;
  	margin-top: 10px;
  	margin-bottom: 10px;
  	margin-right: 10px;
  	margin-left: 10px;
  	width: 700px;
}
*/

/* HEADING PARAGRAPH */
.ecMainTable {
  	background-color: White;
  	color: black;
  	width: 100%;
  	height: 100%;
  	padding: 0px;
  	margin: 0px 0px 0px 0px;
  	margin-top: 0px;
  	margin-bottom: 0px;
  	margin-right: 0px;
  	margin-left: 0px;
}

.ecMenuColumn {
   	width: 160px;
   	height: 100%;
  	background-color: White;
	vertical-align:top;
	border-right-style: groove;
}

.ecTableContent {
	vertical-align: center;
	justify-content: center;
	display: flex;
}

.ecHeading {
  background-color: Black;
  color: white;
  font-size: 30px;
  height: 35px;
  width: 100%;
  /*padding: 5px;*/
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 0px;
  margin-left: 0px;
  padding: 0px;
}

.ecMenuItem {
  background-color: Black;
  color: White;
  font-size: 16px;
  text-decoration: none;
  box-shadow: 2px 2px 2px #888888;
  margin-top: 3px;
  margin-bottom: 3px;
  margin-right: 3px;
  margin-left: 3px;
  padding: 5px;
}
.ecMenuItem:hover {
  background-color: #ff4c00;
  color: white;
}

.ecLeftMenuButton {
	/*background-color: White;*/
  	color: Black;
  	font-size: 13px;
  	text-decoration: none;
  	margin-top: 3px;
  	margin-bottom: 3px;
  	margin-right: 3px;
  	margin-left: 3px;
  	padding: 5px;
}
.ecLeftMenuButton:hover {
	background-color: Black;
	color: White;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}


/* HORIZONTAL TABLE */
.ecTable2 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 70%;
  box-shadow: 5px 10px 8px #888888;
}

.ecTable3 {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  box-shadow: 5px 10px 8px #888888;
}

.ecTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  box-shadow: 5px 10px 8px #888888;
}

.ecTable td, .ecTable th {
  border: 1px solid #ddd;
  padding: 4px;
  font-size: 12px;
}

.ecTable tr:nth-child(even){background-color: #f2f2f2;}

.ecTable tr:hover {background-color: #ddd;}

.ecTable th, .ecTable thead {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  background-color: CornflowerBlue;
  color: white;
}

.vertical-scroll-table {
	overflow-y: auto; /* Adds vertical scrollbar when content overflows */
	max-height: 350px; /* Set a fixed height for the scrollable area */
}
    
.templateEditTable {
	border-spacing: 2px;
	padding: 10px;
	background-color: aliceblue;
  	border: 0px;
  	box-shadow: 5px 10px 8px #888888;
  	border-radius: 15px;
}

.accountDashboardTable {
	border-spacing: 30px;
}

.accountDashboardCell1 {
	background-color: aliceblue;
}

.accountDashboardCell2 {
	background-color: beige;
}

.accountDashboardCell3 {
	background-color: azure;
}

.accountDashboardCell4 {
	background-color: rgb(213,251,251);
}

.accountDashboardCell5 {
	background-color: rgb(230,214,251);
}

.accountDashboardCell6 {
	background-color: rgb(251,222,214);
}

.dashboardCellTitle {
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 30px;
  	color:black;
  	vertical-align:middle;
  	padding: 10px;
}

.dashboardNameLabel {
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 13px;
  	color:gray;
}

.dashboardDataLabel {
  	font-family: Arial, Helvetica, sans-serif;
  	font-size: 13px;
  	font-weight: bold;
  	color:darkblue;
}

.accountDashboardCell {
	text-align: center;
	vertical-align:top;
	padding: 15px;
	width: 400px;
	height: 200px;
	border-radius: 15px;
  	border-collapse: collapse;
  	box-shadow: 5px 10px 8px #888888;
}

.accountDashboardCellShort {
	text-align: center;
	vertical-align:top;
	padding: 15px;
	width: 400px;
	height: 10px;
	border-radius: 15px;
  	border-collapse: collapse;
  	box-shadow: 5px 10px 8px #888888;
}

.accountDashboardLink {
	text-decoration: none;
}

.generallink {
	text-decoration: underline;
	color: black;
}

.ecAccountTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  box-shadow: 5px 10px 8px #888888;
}

.ecAccountTable td, .ecAccountTable th {
  border: 1px solid #ddd;
  padding: 4px;
  font-size: 12px;
}

.ecAccountTable tr:nth-child(even){background-color: #f2f2f2;}

.ecAccountTable tr:hover {background-color: #919dbc;}

.ecAccountTable th, .ecAccountTable thead {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  background-color: #0f1355;
  color: white;
}





.ecTablePreview {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  box-shadow: 5px 10px 8px #888888;
  width: 100%;
}
.ecTablePreview td, .ecTablePreview th {
  border: 1px solid #ddd;
  padding: 4px;
  font-size: 12px;
}

.ecTablePreview tr:nth-child(even){background-color: #f2f2f2;}

.ecTablePreview tr:hover {background-color: #ddd;}

.ecTablePreview th, .ecTablePreview thead {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  background-color: CornflowerBlue;
  color: white;
}



/* VERTICAL TABLE */
.ecVTable {
  font-family: Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
  box-shadow: 5px 10px 8px #888888;
}

.ecVTable td, .ecVTable th {
  border: 1px solid #ddd;
  padding: 4px;
  font-size: 12px;
}

.ecVTable tr:nth-child(even){background-color: Silver;}

.ecVTable tr:hover {background-color: #ddd;}

.ecVTable th {
  padding-top: 8px;
  padding-bottom: 8px;
  text-align: left;
  background-color: LightGrey;
  color: black;
}


/* EC BUTTON */
.ecButton {
	border-radius: 6px;
	font-size: 12px;
	background-color: Black;
	color: white;
}
.ecButton {
  transition-duration: 0.4s;
}
.ecButton:hover {
  background-color: SteelBlue;
  color: white;
}

.ecButton2 {
	border-radius: 4px;
	font-size: 10px;
	background-color: Gray;
	color: white;
}
.ecButton2 {
  transition-duration: 0.4s;
}
.ecButton2:hover {
  background-color: Black;
  color: white;
}

.wizardHelpLabel {
	font-size: x-small;	
	font-weight: bold;
}

.ecFormLabel {
	align-self: flex-end;
	color: blue;
	font-weight: bold;
}

.divAlignAllToTop {
	display: flex;
	align-content: flex-start;
	justify-content: flex-start;
	vertical-align: top;
}

/***************************/
/**   TABS               ***/
/***************************/
/* outer container */
.ui-tabs .ui-tabs-tab {
  padding: 0;
  /*margin-bottom: 20px;*/
  border-radius: 10px 10px 0 0; 
}

/* list of tabs */
.ui-tabs .ui-tabs-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* For horizontal tabs */
  border-bottom: none;
}

/* one of the items */
.ui-tabs .ui-tabs-tab {
  /*padding: 10px 15px;*/
  /* background-color: #eee; */
  background-color: lightgray;
  color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
}

.ui-tabs .ui-tabs-active a {
  color: black;
  font-weight: bold;
}

/* active tab */
.ui-tabs .ui-tabs-active {
  /*background-color: F5F3E5;*/
  background-color: white;
}

.ui-tabs .ui-tabs-panel {
  padding: 0px;
  /*background-color: #F5F3E5;*/
  background-color: white;
  border: 1px solid #ccc;
}
/***************************/
/***************************/


.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.popup {
  position: absolute;
  /*
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  */
  background-color: white;
  padding: 10px;
  border-radius: 5px;
}

.widgetText {
	font-weight: bold;
	font-size: 10px;
}

.widgetTitleText {
	font-weight: bold;
	font-size: 14px;
}

.widgetTitleTextCentered {
	font-weight: bold;
	font-size: 14px;
	justify-content: center;
	text-align: center;
}

.widgetSelectionArea {
	/*width: 200px;*/	
	height: 520px;	
	overflow-y:auto;
}

.widgetContainer {
	width: 280px;	
	border: 1px solid black;
}

.prefabDetailText {
	font-weight: bold;
	font-size: 12px;
	color: darkblue;
}

.dragDropInstructions {
	font-size: 18px;
	text-shadow: 2px 2px lightgray;
	border: 1px solid black;
	width: 90%;
	height: 80%;
	border: 2px solid black;
	box-shadow: 3px 5px gray;
  	background-color: lightblue;
	/*
	transition: 0.5s;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc,
                0 3px 0 #ccc, 0 4px 0 #ccc,
                0 5px 0 #ccc, 0 6px 0 #ccc,
                0 7px 0 #ccc, 0 8px 0 #ccc,
                0 9px 0 #ccc, 0 10px 0 #ccc,
                0 11px 0 #ccc, 0 12px 0 #ccc,
                0 20px 30px rgba(0, 0, 0, 0.5);
                */
}

.hrSeparation {
	height: 5px; 
	color: gray;
	background-color: darkblue;
}

.eventsText {
	font-size: 10px;
	padding: 5px;
}

.eventsDetailText {
	font-size: 13px;
	padding: 5px;
}

.ecFormTable {
  	font-family: Arial, Helvetica, sans-serif;
  	border-collapse: collapse;
  	box-shadow: 5px 10px 8px #888888;
	background-color: #f2f3f4;
}

.ecFormTable td {
	text-align: top;
	vertical-align:top;
  	padding: 4px;
  	font-size: 12px;
}

.bannerAppText {
	font-size: 15px;
}

.stepComplete {
	background-color: green;
	color: white;	
	padding: 10px;
}

.stepInProgress {
	background-color: orange;
	color: black;
	padding: 10px;
}

.stepNotStarted {
	background-color: darkgray;
	color: gray;
	padding: 10px;
}