/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */
/* general */


/* IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT */
/* IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT */
/* IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT */
/* IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT */
/*                                                                                                               */
/* ALLWAYS user font-size: 1rem; <- font size always in rem (except for the 'master font size')					 */
/* This makes it possible automatically adjust all font size relative to each other by just changing the         */
/* master font-size.                                                                                             */
/*                                                                                                               */
/* 1rem == 100% of master size                                                                                   */
/* 2rem == 200% of master size                                                                                   */
/* 0.8rem = 50% of master size                                                                                   */
/*                                                                                                               */
/* Note rem can also be used for other things, like padding in the input fields.                                 */
/*                                                                                                               */
/* IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT IMPORTANT */


body {
	/* note: without this there is a margin of 8px around the body tag */
	margin:0;
}

html, table, input, textarea, select, button {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 14px; /* <---------- MASTER FONT-SIZE change this to change all font sizes / ALL OTHER font sizes should use rem; where by 1rem == same size, 2rem == 200%, 0.8rem = 50% */
  font-weight: 400;
  color: #212529;
}

a {
  	text-decoration: none;
  	color: #1B3F92;
}

.sbcBodyBlock{
  	padding-top: 10px;
  	padding-bottom: 10px;
}

/* high light the input fields in a tr on hover */
/* use <tr class="sbcListTr"> */
tr:hover.sbcListTr input {
    background-color: #7FBDFF;
    /*border: solid 1px #7FBDFF;*/
    /*background-image: linear-gradient(90deg, #7FBDFF, white);*/
}
/* high light the input fields in a tr on hover */
/* use <tr class="sbcListTr"> */
tr:hover.sbcListTr select {
    background-color: #7FBDFF;
    /*border: solid 1px #7FBDFF;*/
    /*background-image: linear-gradient(90deg, #7FBDFF, white);*/
}



/* list/table layouts */
/* list/table layouts */
/* list/table layouts */
/* list/table layouts */
/* list/table layouts */
/* list/table layouts */
/* list/table layouts */
.tableHeader {
	padding-left: 4px;
	text-align: left;
	white-space: nowrap;
	border-bottom: #212529 1px solid;
	margin-bottom: 20px;
}

.tableHeaderNumber {
	padding-left: 4px;
	text-align: right;
	white-space: nowrap;
	border-bottom: #212529 1px solid;
	margin-bottom: 20px;
}


/*
space between header border and first row/tr of table:
How to use:
...
	</thead>
<tbody>
	
<tr><td colspan="100" class="tableBelowHeaderSpacer"></td></tr> <-------------------
	
<logic:notEmpty name="ownSbcRfqs">
<logic:iterate name="ownSbcRfqs" id="offerRequest">
<tr onMouseOver="highlightThisRow(this)" onMouseOut="resetThisRowColor(this)" >
...
*/
.tableBelowHeaderSpacer {
	height: 0;
	border-bottom: #FFFFFF 2px solid;
}

.tableCell{
	white-space: nowrap;
}

.tableCellButtonIcon{
	padding-top: 1px;
	white-space: nowrap;
}

.tableCellNumber {
	white-space: nowrap;
}
/* note: this reads as: */
/* - if the td with the class="tableCellNumber" contains an input tag,*/
/*   then align the text of that input tag to the right */
.tableCellNumber input{
	text-align: right;
}


.tableCellWithButton {
	white-space: nowrap;
	vertical-align: middle;
	text-align: center;
}

/*
horizontal line between the table rows
How to use

<table...
...
<logic:notEmpty name="ownSbcRfqs">
<logic:iterate name="ownSbcRfqs" id="offerRequest">
<tr>
	<td>content of table
	...
</tr>
<tr><td colspan="100"><hr class="spacerLine"></td></tr> <--------------------

</logic:iterate>
</logic:notEmpty>
</table>
*/
.spacerLine {
	display: block;
	margin-top: 1px;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: auto;
	border-top: 0;
	border-bottom: #CACACA 1px solid;
}

/* titles */
/* titles */
/* titles */
/* titles */
/* titles */
/* titles */
/* titles */

/*

Always use <td><div class="subTitle1">mytitle</div></td>

especially for subTitle1

<td colspan="2">
	<div class="subTitle1"><bean:message key="title.endpointA" />:</div>
</td>

The reason being, that subTitle1 has a line below itself. (created by border-bottom: #212529 2px solid;)
The problem is the space between that border-bottom and the next element.
Wrapping the title in a div max it possible to use margin-bottom for the spacing between the border and the next
element.

So for subTitle1
-> padding-top: 10px;                <- spacing above the title text
-> padding-bottom: 1px;              <- spacing title text to border
-> border-bottom: #212529 2px solid; <- the line below the title
-> margin-bottom: 12px;              <- spacing from line/border to next element
*/
.mainTitle {
	font-size: 1.57rem;
	padding-bottom: 5px;
}

.subTitle1 {
	font-size: 1.28rem;
  	padding-top: 10px;
  	padding-bottom: 1px;
  	width: 100%;
  	border-bottom: #212529 2px solid;
	margin-bottom: 12px;
}

.msgTitle {
	font-size: 1.28rem;
}

/* table navigation */
/* table navigation */
/* table navigation */
/* table navigation */
/* table navigation */
/* table navigation */
/* table navigation */
/* table navigation */
/* table navigation */
/* table navigation */
.navigationTitle {
	font-size: 1.28rem;
	width: 25%;
	white-space: nowrap;
}

.navigationLine {
	padding-top: 10px;
  	padding-bottom: 1px;
  	width: 100%;
  	border-bottom: #212529 2px solid;
	margin-bottom: 12px;
}

.navigationButton {
    color: #fff;
    font-size: 0.9rem;
    background-color: #1B3F92;
    border: solid 2px #1B3F92;
    border-radius: 35rem;
    text-transform: uppercase;
    line-height: 1rem;
    min-height: 1rem;
    padding: 0 8px;
    margin-top: 2px;
    margin-bottom: 2px;
    margin-left: 5px;
    margin-right: 5px;
	vertical-align: top;
}
.navigationButton:hover {
	background-color: #426bae;
    border: solid 2px #426bae;
    cursor: pointer;
}
.navigationButton:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem #7FBDFF;
}



/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */
/* form */

/*
class 2 x 2 layout

<table>

	<tr>
		<!-- top left -->
		<td class="leftFormBlock">
			<table>
				<tr>
					<!-- To define the width of a form block, it is enough      -->
					<!-- to use 'formLabel' and 'formLabel' in 1 table row (tr) -->
					<!-- of the block / sub table                               -->
					<td class="formLabel">label</td>
					<td class="formInput">input/</td>
				</tr>
				<tr>
					<td>label</td>
					<td>input/</td>
				</tr>
			<table>
		</td>
		
		<!-- top right -->
		<td class="rightFormBlock">
			<table>
				<tr>
					<td class="formLabel">label</td>
					<td class="formInput">input/</td>
				</tr>
			<table>
		</td>
	</tr>
	<tr>
		<!-- bottom left -->
		<td class="leftFormBlock">
			<table>
				<tr>
					<td class="formLabel">label</td>
					<td class="formInput">input/</td>
				</tr>
			<table>
		</td>
		
		
		<!-- bottom right -->
		<td class="rightFormBlock">
			<table>
				<tr>
					<td class="formLabel">label</td>
					<td class="formInput">input/</td>
				</tr>
			<table>
		</td>
	</tr>
</table>




/*
how to form width's:


example:
<td valign="top"> <---------------------------------------------------------------------------------------- td wrapping the top left block
	<table style="margin: 0; padding: 0; border: 0; width: 100%;" cellpadding="0" cellspacing="0">
		<tr>
			<td class="formLabel"><bean:message key="field.leasedLineId" /></td> <--------------------- formLabel or formLabelTop (for text area's)
			<td class="formInput"><aolo:text property="circuitIdFormatted" /></td> <------------------- formInput
		</tr>
	....
*/




.leftFormBlock {
	vertical-align: top;
	width: 50%;
	padding-right: 5px; /* first half of the space between the left and right block */
}
.rightFormBlock {
	vertical-align: top;
	width: 50%;
	padding-left: 5px; /* second half of the space between the left and right block */
}

.formLabel {
	width: 25%;
}
.formLabelPopup {
	width: 25%;
	white-space: nowrap;
	padding-right: 10px;
}
.formLabelTop {
	width: 25%;
	vertical-align: top;
}
.formInput {
	width: 75%;
}
.formInputPopup {
	width: 250px;
}

.formLabelWide {
	width: 10%;
}
.formLabelTopWide {
	width: 10%;
	vertical-align: top;
}
.formInputWide {
	width: 90%;
}



.form-control-sm {
  color: #212529;
  background-color: #F1F1F1;
  border-radius: .35rem;
  
  padding-left: 4px;
  padding-right: 4px;
  
  border: solid 1px #FFFFFF;
  
  /* Note: margin-left 4px and width 100% would chause the input fild's to overflow the td's */
  /* This solution works with FF, Chrome, IE and edge */
  width: -webkit-calc(100% - 1px); /*For safari 6.0*/
  width: calc(100% - 1px); /* IE 9,10 , Chrome, Firefox */
  margin-left: 1px;
  
  margin-top: 1px;
}
.form-control-sm:focus {
  background-color: #FFFFFF;
  border: solid 1px #80BDFF;
}
.form-control-sm:disabled {
	background-color: #E9ECEF;
}

.error {
	color: red;
}

.saveMsg {
	color: #1B3F92;
}

/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
/* buttons */
.sbcButton {
    color: #fff;
    font-size: 0.9rem;
    background-color: #1B3F92;
    border: solid 2px #1B3F92;
    border-radius: 35rem;
    text-transform: uppercase;
    line-height: 1.7rem;
    min-height: 1.7rem;
    min-width: 120px;
    padding: 0 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;
}
.sbcButton:disabled {
    color: rgb(80,83,85);
    background-color: rgb(233,236,239);
    border: solid 2px  rgb(233,236,239);
    cursor: default;
}
.sbcButton:disabled:hover {
    color: rgb(80,83,85);
    background-color: rgb(233,236,239);
    border: solid 2px  rgb(233,236,239);
    cursor: default;
}
.sbcButton:hover {
	background-color: #426bae;
    border: solid 2px #426bae;
    cursor: pointer;
}
.sbcButton:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem #7FBDFF;
}

.sbcSmallButton {
    color: #fff;
    font-size: 0.9rem;
    background-color: #1B3F92;
    border: solid 2px #1B3F92;
    border-radius: 35rem;
    text-transform: uppercase;
    line-height: 1rem;
    min-height: 1rem;
    min-width: 60px;
    padding: 0 10px;
    margin-top: 2px;
    margin-bottom: 3px;
    margin-left: 5px;
    margin-right: 5px;
}
.sbcSmallButton:disabled {
    color: rgb(80,83,85);
    background-color: rgb(233,236,239);
    border: solid 2px  rgb(233,236,239);
    cursor: default;
}
.sbcSmallButton:disabled:hover {
    color: rgb(80,83,85);
    background-color: rgb(233,236,239);
    border: solid 2px  rgb(233,236,239);
    cursor: default;
}
.sbcSmallButton:hover {
	background-color: #426bae;
    border: solid 2px #426bae;
    cursor: pointer;
}
.sbcSmallButton:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem #7FBDFF;
}

.sbcSmallButtonDisabled {
    color: rgb(80,83,85);
    font-size: 0.9rem;
    background-color: rgb(233,236,239);
    border: solid 2px  rgb(233,236,239); /*rgb(241,241,241);*/
    border-radius: 35rem;
    text-transform: uppercase;
    line-height: 1rem;
    min-height: 1rem;
    min-width: 60px;
    padding: 0 10px;
    margin-top: 2px;
    margin-bottom: 3px;
    margin-left: 5px;
    margin-right: 5px;
}

.sbcButtonTop {
	border-radius: 20px;
	background-color: #1B3F92;
	border: 3px;
	border-color: #FFFFFF;
	border-style: solid;
	color: #FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 3px;
	padding-bottom: 6px;
	vertical-align: top;
}

.sbcButtonTop:hover {
	background-color: #426BAE;
}

.sbcButtonDown {
	border-radius: 20px;
	background-color: #1B3F92;
	border: 3px;
	border-color: #FFFFFF;
	border-style: solid;
	color: #FFFFFF;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	vertical-align: top;
}

.sbcButtonDown:hover {
	background-color: #426BAE;
}




/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */
/* chat / messages */


/*
How to change the width of the messages box:
1) change the width of the TD wrapping the message box
   see: spcPortal.css -> chatWrapper
   note the width MUST BE IN PIXEL
2) change orderChatDisplayBean -> MAIL_LINE_LENGTH
3) to change the chat box widths change chatRight and
 	chatLeft in spcPortal.css
	Note: leave +/- 10px to the right or a horizontal
  		  scroll bar will appear.
*/
.chatWrapper {
	width: 335px;
	height: 100%;
	vertical-align: top;
	background-color: #F5F7F9;
}

.chatRight {
  color: #212529;
  background-color: transparent; /*#E9ECEF;*/
  border-radius: .35rem;
  padding-left: 4px;
  padding-right: 4px;
  border: solid 1px #CED4DA;
  width: 250px;
}

.chatLeft {
  color: #212529;
  background-color: transparent;
  border-radius: .35rem;
  padding-left: 4px;
  padding-right: 4px;
  border: solid 1px #CED4DA;
  width: 250px;
}

.chatHeader {
	font-size: 0.86rem;
	padding-left: 5px;
	width: 100%;
	white-space: nowrap;
}



.chatFolded {
	min-height: 21px;
	max-height: 170px;
	overflow: hidden;
}

.chatUnfolded {
	min-height: 21px;
	max-height: none;
	overflow: visible;
}

/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
/* left menu */
.menuLeftWrapper {
	background-color: #F5F7F9;
}

.menuLeftElement {
	padding-bottom: 0.2rem;
	padding-top: 0.2rem;
	padding-left: 29px;
	padding-right: 0.25rem;
	text-align: center;
}

.menuRightElement {
	padding-bottom: 0.2rem;
	padding-top: 0.2rem;
	padding-left: 10px;
	padding-right: 15px;
	text-align: left;
}

.menuHeaderLeftElement {
	padding-bottom: 0.6rem;
	padding-top: 0.2rem;
	padding-left: 29px;
	padding-right: 0.25rem;
	text-align: center;
}

.menuHeaderRightElement {
	padding-bottom: 0.6rem;
	padding-top: 0.2rem;
	padding-left: 10px;
	padding-right: 15px;
	text-align: left;
}

.menuLeftWrapper:hover {
	background-color: #E8E8E8;
	cursor: pointer;
}

.menuTopWrapper {
	background-color:#F5F7F9;
}

.menuTopElement {
	padding-bottom: 0.2rem;
	padding-top: 0.2rem;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

.menuTopWrapper:hover {
	background-color: #E8E8E8;
	cursor: pointer;
}
.sbcLeftSubMenu {
	background-color: #F5F7F9;
	cursor: pointer;
	overflow: hidden;
	width:100%;
	padding: 3px;
}

.sbcLeftSubMenu:hover {
	background-color: #E8E8E8;
	cursor: pointer;
	overflow: hidden;
	width:100%;
	padding: 3px;
}

.sbcLeftSubMenuDisabled {
	background-color: #F5F7F9;
	overflow: hidden;
	width:100%;
	padding: 3px;
	color: #B5B5B5;
}

/* popup */
/* popup */
/* popup */
/* popup */
/* popup */
/* popup */
/* popup */
/* popup */
/* popup */
/* popup */
.portalPopupContentTd {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 14px;
	padding-bottom: 0px;
}

.portalPopupTitle {
	font-size: 1.28rem;
  	padding-top: 10px;
  	padding-bottom: 2px;
  	width: 100%;
  	border-bottom: #212529 2px solid;
	margin-bottom: 1px;
}

.portalPopupRow {
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.portalPopupButtonRow {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 2px;
}

.portalPopupButtonTd {
	text-align: center;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 13px;
	padding-bottom: 10px;
}

/* login */
/* login */
/* login */
/* login */
/* login */
/* login */
/* login */
/* login */
/* login */
/* login */
/* login */
/* login */

/* dive to file the entire page and center the login div */
.mainDiv {
	background-color: rgb(248, 249, 250);
	width: 100%;
	height: 100%;
	
	/* https://www.w3schools.com/css/css_align.asp */
	display: flex;
  	justify-content: center;
  	align-items: center;
}
.loginWrapperDiv {
	/*width: 309px;*/
}


/* login button */
.sbcLoginButton {
    color: #fff;
    font-size: 0.9rem;
    background-color: #1B3F92;
    border: solid 2px #1B3F92;
    border-radius: 35rem;
    text-transform: uppercase;
	line-height: 32px;
	height: 32px;
    min-width: 120px;
    vertical-align: middle;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 33px;
}
.sbcLoginButton:hover {
	background-color: #426bae;
    border: solid 2px #426bae;
    cursor: pointer;
}
.sbcLoginButton:focus {
  outline: 0;
  box-shadow: 0 0 0 .2rem #7FBDFF;
}


/*
how to back ground color header and footer:
- To set the header and footer color change the background color of .loginMainTable
- Note: why not simply set the header and footer bg color in the header and footer styles?
  The problem is, that the entire table has round corners, so if the header and footer td's
  get bg color set, this color will overlap the round corners.
*/

.loginMainTable {
	border: solid 1px rgb(223, 223, 223);
	background-color: rgb(252, 252, 252);
    border-radius: 20px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.loginInput {
	line-height: 40px;
	height: 40px;
	font-size: 18px;
}

.loginHeaderTd {
	font-size: 26px;
	border-bottom: solid 1px rgb(223, 223, 223);
	padding: 20px;
	
}
.loginUserIconTd {
	padding-top: 18px;
	padding-left: 20px;
	padding-right: 5px;
	padding-bottom: 7px;
	background-color: rgb(255,255,255);
}
.loginUserTd {
	padding-top: 18px;
	padding-left: 0;
	padding-right: 20px;
	padding-bottom: 7px;
	background-color: rgb(255,255,255);
}

.loginPwIconTd {
	padding-top: 6px;
	padding-left: 20px;
	padding-right: 5px;
	padding-bottom: 0;
	background-color: rgb(255,255,255);
}

.loginPwTd {
	padding-top: 6px;
	padding-left: 0;
	padding-right: 20px;
	padding-bottom: 0;
	background-color: rgb(255,255,255);
}
.loginButtonTd {
	padding-top: 15;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 12px;
	border-bottom: solid 1px rgb(223, 223, 223);
	background-color: rgb(255,255,255);
}

.loginFooter1 {
	padding-top: 14px;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
	text-align: center;
}

.loginFooter2 {
	padding-top: 6px;
    padding-bottom: 16px;
    padding-left: 20px;
    padding-right: 20px;
	text-align: center;
}

/* forgot pw */
.forgotPwMsgTd {
	padding-top: 12px;
	line-height: 40px;
	height: 40px;
	font-size: 18px;
	padding-left: 20px;
	padding-right: 20px;
	background-color: rgb(255,255,255);
}

.forgotPwMailIconTd {
	padding-top: 8px;
	padding-left: 20px;
	padding-right: 5px;
	padding-bottom: 8px;
	background-color: rgb(255,255,255);
	width: 1px;
}
.forgotPwMailTd {
	padding-top: 8px;
	padding-left: 0;
	padding-right: 20px;
	padding-bottom: 8px;
	background-color: rgb(255,255,255);
}


.forgotPwButtonTd {
	padding-top: 0;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 12;
	background-color: rgb(255,255,255);
	border-bottom: solid 1px rgb(255,255,255);
	border-radius: 20px;
}

.forgotPwErrorTd {
	padding-left: 20px;
	padding-right: 20px;
	background-color: rgb(255,255,255);
}

.confirmforgotPwMsgTd {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 21px;
	padding-bottom: 38px;
	background-color: rgb(255,255,255);
}


.regIconTd {
	padding-left: 20px;
	padding-right: 5px;
	background-color: rgb(255,255,255);
	width: 1px;
}
.regInputTd {
	padding-left: 0px;
	padding-right: 20px;
	background-color: rgb(255,255,255);
	
}

.regTopRow {
	padding-top: 18px;
	padding-bottom: 2px;
}

.regRow {
	padding-top: 3px;
	padding-bottom: 2px;
}

.regBottomRow {
	padding-top: 3px;
	padding-bottom: 7px;
}

.regButtonTd {
	padding-top: 0;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 12;
	background-color: rgb(255,255,255);
	border-bottom: solid 1px rgb(223, 223, 223);
}

.regMsgTd {
    padding-left: 20px;
    padding-right: 20px;
	text-align: center;
}

@keyframes unsaved {
  25% {box-shadow: 0 0 5px .2rem #7FBDFF;}
  50% {box-shadow: 0 0 5px .2rem #62acff;}
  25% {box-shadow: 0 0 5px .2rem #7FBDFF;}
}

.unsavedButton {
  	animation-name: unsaved;
  	animation-duration: 2s;
  	animation-iteration-count: infinite;
	
}


/* fixed footer 																							*/
/* fixed footer 																							*/
/* fixed footer 																							*/
/*                        																					*/
/* Create a footer that always floats over the bottom of the page.											*/
/* - fixedFooter defines the footer itself                     												*/
/* - fixedFooterSpacerBottom to avoid the footer floating above the bottom of the table, create a empty     */
/*   row of the same height as the footer at the bottom of the page.										*/
/* - fixedFooterSpacerLeft to avoid the footer floating above the left menu,create a empty cell to the left	*/
/* 																											*/
/* example:                        																			*/
/* <tr><td class="fixedFooterSpacerBottom">&nbsp;</td></tr>													*/
/* </table>																									*/
/* <div class="fixedFooter">																				*/
/*  	<table style="margin: 0; padding: 0; border: 0; width: 100%;" cellpadding="0" cellspacing="0">		*/
/*     	<tr>																								*/
/*     		<td class="fixedFooterSpacerLeft"></td>															*/
/* 			<td style="background-color: white;">															*/
/* 				Add footer content here																		*/
/*																											*/
.fixedFooter {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
}
.fixedFooterSpacerBottom {
	height: 60px;
}
.fixedFooterSpacerLeft {
	width: 249px;
}