/* -----------------------
Imagery Related
------------------------*/

.imageDragDropBox
{
	background-color: white;
	outline: 2px dashed black;
	height: 300px;
}

.imageDragDropBox.is-dragover {
	background-color: grey;
}

.imageDragDropBox
{
	display:flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.imageDragDropBox label strong
{
	text-decoration: underline;
	color: blue;
	cursor: pointer;
}

.imageDragDropBox label strong:hover
{
	color: blueviolet
}

.imageDragDropBox input
{
	display: none;
}

.imageGalleryThumbnail
{
	border: 2px solid #000000;
	cursor: pointer;
}

.imageGalleryThumbnail:hover
{
	border: 2px solid #84ff00;
	cursor: pointer;
}



/* -----------------------
Notification Section
------------------------*/

.notificationTableContainer
{
	border: 2px solid #b09015;
	background-color: #f6ee9a;
	border-radius: 15px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	width: 980px;
	padding: .2em .2em;
}

.notificationTable
{
	width : 100%;
	border-collapse: collapse;
}

.notificationTableContainer th
{
	padding-top: .2em;
	padding-bottom: .5em;
	color : black;
}



/* -----------------------
Commentary Section
------------------------*/

.commentaryTableContainer
{
	border: 2px solid #b09015;
	background-color: #f6ee9a;
	border-radius: 15px;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	width: 980px;
	padding: .2em .2em;
}

.commentaryTable
{
	width : 100%;
	border-collapse: collapse;
}

.commentaryTable th
{
	padding-top: .2em;
	padding-bottom: .5em;
	color : black;
}

.commentaryTable tr
{
	border-bottom: 1px solid #CCCCCC;
}

.commentaryTargetedID
{
	border-left: 10px solid #1b73b6;
	background-color: #bce5ec;
}

.commentarySentBy
{
	color : #666666;
}

.commentarySentDate
{
	font-size: 12px;
	color : #666666;
}

.commentaryNotifications
{
	padding: .5em 1em;
	font-size: 12px;
}

.commentaryComment
{
	padding: .5em .5em;
	background-color: #CCFFFF;
	border: 1px dashed #999999;
	font-family: 'Courier New', serif;
	font-size: 15px;
	color : black;
	border-radius: 10px;
}

.commentaryComment a:link
{
	color: #FF00FF;
	font-weight: bold;
}

.commentaryComment a:visited
{
	color: #FF00FF;
	font-weight: bold;
}

.commentaryComment a:hover
{
	color: #800080;
	font-weight: bold;
}

.commentaryComment a:active
{
	color: #FF00FF;
	font-weight: bold;
}

.commentaryReplyArrow
{
	vertical-align: middle;
	vert-align: middle;
}



 /* -----------------------
 Page Header (Title & Comments)
 ------------------------*/

 .pageHeader
 {
	 width: 100%;
	 border-bottom: double;
	 border-color: darkred;
	 border-spacing: 0;
	 padding: 0;
	 margin: 0;
 }

.pageHeader td
{
	border-spacing: 0;
	padding: 0;
	margin: 0;
}

.pageHeaderTitle
{
	font-family: 'Franklin Gothic Medium', sans-serif;
	font-size: 36px;
	line-height: 36px;
	text-align: left;
}

.pageHeaderAddComment
{
	backface-visibility: hidden;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: #f3e011;
	border-radius: 5px;
	border: 1px solid #000000;
	padding: 6px 15px 6px 15px;
	color: #000000;
	font-family: "Verdana", Helvetica, Arial, Geneva, sans-serif;
	font-size: 20px;
}

.pageHeaderAddComment:hover
{
	background: #f3e011;
	color: #FFFFFF;
	border: 1px solid #000000;
}

.pageHeaderAddComment:active
{
	background: #f3e011;
	color: #000000;
}

.pageHeaderAddComment:disabled
{
	opacity: 0.5;
}

.pageHeaderAddImagery
{
	backface-visibility: hidden;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: #13a8e7;
	border-radius: 5px;
	border: 1px solid #000000;
	padding: 6px 15px 6px 15px;
	color: #000000;
	font-family: "Verdana", Helvetica, Arial, Geneva, sans-serif;
	font-size: 20px;
}

.pageHeaderAddImagery:hover
{
	background: #13a8e7;
	color: #FFFFFF;
	border: 1px solid #000000;
}

.pageHeaderAddImagery:active
{
	background: #f3e011;
	color: #000000;
}

.pageHeaderAddImagery:disabled
{
	opacity: 0.5;
}





/* CHECKBOX */

/* The container */
.containerCB
{
	display: block;
	position: relative;
	cursor: pointer;
	font-size: 21px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.containerCB input
{
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #eee;
	opacity: 0.7;
	border: 1px solid #5B88D4;
}

/* On mouse-over, add a grey background color */
.containerCB:hover input ~ .checkmark
{
	background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.containerCB input:checked ~ .checkmark
{
	background-color: #0066CC;
	border: 1px solid #000000;
	opacity: 1;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after
{
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.containerCB input:checked ~ .checkmark:after
{
 	display: block;
}

/* Style the checkmark/indicator */
.containerCB .checkmark:after
{
	left: 7px;
	top: 0px;
	width: 10px;
	height: 20px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* END CHECKBOX */





/* Style the dropdown select menu, because safari would do its own thing */
select
{

	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 95% 50%;
	background-position: right center;
	background-color: #ececec;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	-moz-border-radius: 5px;
	-webkit-border-radius: 3px;
	border-radius: 5px;
	color: #000000;
	padding: 2px 20px 2px 6px;	/* TOP, RIGHT, BOTTOM, LEFT : RIGHT SIDE NEEDS TO ALLOW FOR ARROWS */
	border: 2px solid #5B88D4;

}

/* END SELECT */





/* CHECKBOX FOR CALENDAR USER TAGGING */

input.largeCheckbox
{
	width: 25px;
	height: 25px;
}

/* END CHECKBOX */





/* NUMBER INPUT FIELD (REMOVE ARROWS) */

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button
{
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number]
{
	-moz-appearance: textfield;
}

/* END NUMBER */





/* SLIDE THREE */
.slideThree
{
	width: 80px;
	height: 26px;
	background: #333;
	margin: 2px auto;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;
	position: relative;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);
}

.slideThree:after
{
	content: 'OFF';
	font: 12px/26px Arial, sans-serif;
	color: #FF6666;
	position: absolute;
	right: 10px;
	z-index: 0;
	font-weight: bold;
	text-shadow: 1px 1px 0px rgba(255,255,255,.15);
}

.slideThree:before
{
	content: 'ON';
	font: 12px/26px Arial, sans-serif;
	color: #00bf00;
	position: absolute;
	left: 10px;
	z-index: 0;
	font-weight: bold;
}

.slideThree label
{
	display: block;
	width: 34px;
	height: 20px;

	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
	border-radius: 50px;

	-webkit-transition: all .4s ease;
	-moz-transition: all .4s ease;
	-o-transition: all .4s ease;
	-ms-transition: all .4s ease;
	transition: all .4s ease;
	cursor: pointer;
	position: absolute;
	top: 3px;
	left: 3px;
	z-index: 1;

	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}

.slideThree input[type=checkbox]:checked + label
{
	left: 43px;
}








.alertFloater
{
	background-color: #FFCC99;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	font-size: 150%;
}

.errorFloater
{
	background-color: #FFCCCC;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	font-size: 150%;
}

.successFloater
{
	background-color: #CCFFCC;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	border-top-left-radius: 25px;
	border-bottom-left-radius: 25px;
	font-size: 150%;
}










/* Tooltip container */
.tooltip
{
	position: relative;
	display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext
{
	top: -5px;
	right: 105%;
	visibility: hidden;
	background-color: #CCC;
	color: #000000;
	text-align: center;
	padding: 10px;
	border-radius: 6px;

	/* Position the tooltip text - see examples below! */
	position: absolute;
	z-index: 1;
	width: 250px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext
{
	visibility: visible;
	border: #0066CC 2px solid;
	box-shadow: 5px 5px 10px grey;
	width: 250px;
}









.noPaddingImage
{
	padding-left: 0em;
	padding-right: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
	border-collapse: collapse;
	line-height: 0;
}









.endOfDayText
{
	color: #000000;
	font-size: 24px;
	line-height: 26px;
}

.endOfDayBackButton {
	font-size: 50px;
	padding : 20px;
	background-color: #CCCCCC;
	color: #000000;
	border-radius: 10px;
	border: 2px solid black;
	cursor: pointer;
}

.endOfDayBackButton:hover {
	background-color: #666666;
	color: #FFFFFF;
	cursor: pointer;
}

.endOfDayForwardButton {
	font-size: 50px;
	padding : 20px;
	background-color: #66CC33;
	color: #000000;
	border-radius: 10px;
	border: 2px solid black;
	cursor: pointer;
}

.endOfDayForwardButton:hover {
	background-color: #339900;
	color: #FFFFFF;
	cursor: pointer;
}










/* -----------------------
Base styles
------------------------*/

body
{
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #555;
	font: 16px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	line-height: 18px;
    background-repeat: repeat;
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	font-weight: 500;
	line-height: 1.1;
}

h1 { font-size: 2.25em; } /* 36px */
h2 { font-size: 1.75em; } /* 28px */
h3 { font-size: 1.375em; } /* 22px */
h4 { font-size: 1.125em; } /* 18px */
h5 { font-size: 1em; } /* 16px */
h6 { font-size: .875em; } /* 14px */

p
{
	margin: 0 0 1.5em;
	line-height: 1.5;
}

blockquote
{
	padding: 1em 2em;
	margin: 0 0 2em;
	border-left: 5px solid #eee;
}

hr
{
	height: 0;
	margin-top: 1em;
	margin-bottom: 1.1em;
	border: 0;
	border-top: 2px solid #808080;
}

.displaySKU
{
	font: 26px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;

}

.exceptionTable
{
	background-color: #FFFFFF;
	border-spacing: 0;
	vertical-align: middle;
	padding: 0em 0em;
	font: 14px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	line-height: .925em;
}

.debugTable
{
	background-color: transparent;
	border-spacing: 0;
	vertical-align: middle;
	padding: 0em 0em;
	font: 10px "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	line-height: 11px;
}

.searchTable
{
	background-color: #ffffff;
	border-spacing: 0;
	vertical-align:top;
}

.hoverTable
{
	border-spacing: 0;
}

.hoverTable tr:hover
{
    background-color: #ffff99;
	border-spacing: 0;
}

.table
{
	background-color: transparent;
	border-spacing: 0;
}

th, td
{
	vertical-align: middle;
}

.extendSale
{
	vertical-align: middle;
	background-color: #ffffff;
	border-spacing: 0;
	border-top:    1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left:   1px solid #000000;
	border-right:  1px solid #000000;
}

.extendSale td
{
	padding: 0.5em 1em;
	vertical-align: middle;
	/*border-right-style: none;*/
	/*border-bottom-style: none;*/
}

.extendSaleEureka
{
	border-radius: 5px;
	vertical-align: middle;
	border-spacing: 0;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 5px #999999;
}

.extendSaleEureka td
{
	padding: 0.5em 1em;
	vertical-align: middle;
	border-style: none;
}

.extendSaleEurekaGrid
{
	border-radius: 5px;
	vertical-align: middle;
	border-spacing: 0;
	background-color: #FFFFFF;
	box-shadow: 2px 2px 5px #999999;
}

.extendSaleEurekaGrid td
{
	padding: 0.5em 1em;
	vertical-align: middle;
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}

.storageTypeLocation
{
	border-radius: 5px;
	vertical-align: middle;
	border-spacing: 0;
	border: 2px solid #009966;
	background-color: #FFFFFF;
	/*box-shadow: 1px 1px 3px #666666;*/
}

.storageTypeContainer
{
	border-radius: 5px;
	vertical-align: middle;
	border-spacing: 0;
	border: 1px solid #990099;
	background-color: #FFFFFF;
	/*box-shadow: 1px 1px 3px #666666;*/
}


.tabTopBorder
{
	border-left: 1px solid black;
	border-top: 1px solid black;
	border-right: 1px solid black;
	border-bottom: none;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}



.stockOperationsFont
{
	font-size: 26px;
}

.stockOperationsSelect
{
	font-size: 26px;
	padding: 10px;
	line-height: 30px;
}




.modalTable
{
	vertical-align: middle;
	background-color: #ffffff;
	border-spacing: 0;
	border-top:    1px solid #000000;
	border-bottom: 2px solid #000000;
	border-left:   1px solid #000000;
	border-right:  2px solid #000000;
}

.modalTable td
{
	padding: 0.5em 1em;
	vertical-align: middle;
	border-right-style: none;
	border-bottom-style: none;
}

.modalTitle{
	font-size: 26px;
	line-height: 34px;
	text-align: left;
	float: left;
}

.modalText{
	font-size: 24px;
	line-height: 28px;
	text-align: center;
}

.noRightBorder
{
	border-right-style: none;
}

.noLeftBorder
{
	border-left-style: none;
}

.salesList td
{
	padding: .5em 1em;
	vertical-align: middle;
	border-right-style: none;
	border-bottom-style: none;
}

td.handleByTime
{
	padding:0em 0.2em;
	width:25px;
}

td.endRight
{
	border-right-style: solid;
}

td.endBottom
{
	border-bottom-style: solid;
}

td.stats
{
	padding-left: 0em;
	vertical-align: top;
}

td.controls
{
	padding: 1px;
	/*padding-left: 0em;*/
	/*padding-right: 0em;*/
	/*padding-top: 0em;*/
	/*padding-bottom: 0em;*/
	vertical-align: middle;
}

td.controlBar
{
	background-color: #6699CC;
	color: #FFFFFF;
	vertical-align: middle;

	border-top:    1px solid #666666;
	border-bottom: none;
	border-left:   1px solid #666666;
	border-right:  1px solid #666666;

	padding-top: 0.2em;
	padding-bottom: 0.2em;

}

td.saleMemo
{
	padding-left: 0em;
	padding-right: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
	vertical-align: middle;
	border-left-style:none;
}

td.alertsExtend
{
	font-size: 22px;
	vertical-align: middle;
	line-height: 24px;
}

td.quotesExtend
{
	font-size: 22px;
	vertical-align: middle;
	line-height: 24px;
}

td.couriers
{
	padding-left: 0em;
	padding-right: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
	vertical-align: middle;
	border-right-style:hidden;
}

.currencyHeader
{
	text-align: right;
}

.currency
{
	text-align: right;
}

.currencyIn
{
	text-align: right;
	background-color: #CCFFCC;
	color: #000000;
}

.currencyOut
{
	text-align: right;
	background-color: #FFCCCC;
	color: #000000;
}

.currencySummary
{
	text-align: right;
	color: #000000;
}

.center
{
	text-align: center;
}

.middle
{
	vertical-align: middle;
	text-align: center;
}

.top
{
	vertical-align: top;
}

.tableHeader
{
	background-color: #CCCCCC;
	font-weight: bold;
	padding: .5em 1em;
	vertical-align: middle;
	/*
    background-image: url("/body/images/gradientBar1px.jpg");
    background-repeat: repeat-x;
	*/
}

.tableSummaryRow
{
	border-top-style: double;
}

.tableTotalsRow
{
	border-top-style: solid;
	border-bottom-style: solid;
}

.tinySubNote
{
font-weight: 100;
color: #FF6600;
}

.subNote
{
color: #FF6600;
}

.customerName
{
color: #336699;
font-style: italic;
}

.customerAddress
{
color: #006600;
font-style: italic;
}

.alertBorder
{
	border-left: 6px solid #3399FF;
	background-color: #FFCC99;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-weight: bold;
	padding: .5em 1em;
}

.errorBorder
{
	border-left: 6px solid red;
	background-color: #FFCCCC;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-weight: bold;
	padding: .5em 1em;
}

.successBorder
{
	border-left: 6px solid green;
	background-color: #CCFFCC;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-weight: bold;
	padding: .5em 1em;
}

.specialBorder
{
	border-left: 6px solid #FF33FF;
	background-color: #FFCCFF;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-weight: bold;
	padding: .5em 1em;
}

.toBePostedBorder
{
	border-left: 6px solid #666666;
	background-color: #99CCCC;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-weight: bold;
}

.expressBorder
{
	border-left: 6px solid #FF0000;
	background-color: #FFFF99;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	font-weight: bold;
	color: #666666;
}

.databaseSwitch
{
    background-clip: padding-box;
    background-color: #FFFFCC;
    color: black;
    border-radius: 25px;
}



/* -----------------------
Input Field JS Autocomplete
------------------------*/

/*the container must be positioned relative:*/
.autocomplete
{
	position: relative;
	display: inline-block;
}

.autocomplete-items
{
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
}

.autocomplete-items div
{
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover
{
	background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active
{
	background-color: DodgerBlue !important;
	color: #ffffff;
}





/* -----------------------
Message Bubbles
------------------------*/

.messageTable
{
	width: 100%;
    border-collapse: separate;
    border-spacing: 5px 10px;
}

.messageSent
{
    background-clip: padding-box;
    background-color: #CCFFCC;
    color: black;
    border: 1px solid #999999;
    border-radius: 15px;
    width: 50%;
}

.messageRecieved
{
    background-clip: padding-box;
    background-color: #CCFFFF;
    color: black;
    border: 1px solid #999999;
    border-radius: 15px;
    width: 50%;
}

.messageDate
{
    color: #999999;
}



.noWrap
{
white-space: nowrap;
}

a:link
{
	color: royalblue;
	text-decoration: none;
}
a:visited
{
	color: royalblue;
	text-decoration: none;
}
a:focus
{
	color: black;
	text-decoration: none;
}
a:hover
{
	color: red;
	text-decoration: none;
}
a:active
{
	color: royalblue;
	text-decoration: none;
}

/* -----------------------
Layout styles
------------------------*/

.container
{
	max-width: 1600px;
	margin: 0 auto;
	background-color: #e0f2ff;
}

.header
{
	color: #fff;
	background: #3a9444;
	padding: 0em 1em;
}

.headerDEV
{
	color: #fff;
	background: #CC3300;
	padding: 0em 1em;
}

.headerTable
{
	padding: 0;
	border-spacing: 0;
}

.header-heading
{
	margin: 0;
	vertical-align: middle;
}


.nav-bar
{
	background: #000;
	padding: 0;
}

.floatNavBar
{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 90;
	width: 100%;
	box-shadow: 0px 5px 10px black;
}

.floatPrintControls
{
	position: sticky;
	bottom: 15px;
	border: 2px #000000;
	border-radius: 20px;
	box-shadow: 5px 5px 10px grey;
	background: #CCFFCC;
	padding: .5em 1em;
	z-index: 100;
}

.floatingTableHeader
{
	position: -webkit-sticky;
	position: sticky;
	top: 48px;
	z-index: 2;
	background-color: #CCCCCC;

	font-weight: bold;
	padding: .5em 1em;
	vertical-align: middle;
	border-style: none;

}

.floatingControlBar
{
	position: -webkit-sticky;
	position: sticky;
	top: 48px;
	z-index: 3;

	vertical-align: middle;
	background-color: #ffffff;
	border-spacing: 0;
	border-top:    1px solid #000000;
	border-bottom: 1px solid #000000;
	border-left:   1px solid #000000;
	border-right:  1px solid #000000;

}


.content
{
	padding: 1em 1.25em;
}

.footer
{
	color: #fff;
	background: #3a9444;
	padding: 0;
	margin: 0;
}

.footerDEV
{
	color: #fff;
	background: #CC3300;
	padding: 0;
	margin: 0;
}

.footerLeft
{
	color: #CCC;
	padding:0;
	margin:0;
	border-spacing: 0;
}

.footerRight
{
	color: #fff;
	padding:0;
	margin:0;
	border-spacing: 0;
	text-align: right;
}


/* -----------------------
Nav
------------------------*/

.nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li
{
	display: inline;
	margin: 0;
}

.nav a
{
	display: block;
	color: #fff;
	text-decoration: none;
}

.nav a:link
{
	padding: .7em 1em;
	color: white;
}
.nav a:visited
{
	padding: .7em 1em;
	color: white;
}

.nav a:focus
{
	padding: .7em 1em;
	color: black;
	background-color: white;
}

.nav a:hover
{
	padding: .7em 1em;
	color: white;
	background-color: #0066CC;
	border-top: 5px solid #0066CC;
	border-bottom: 5px solid yellow;
}

.nav a:active
{
	padding: .7em 1em;
	color: white;
	background-color: #e6e6e6;
	border-bottom: 5px solid #e6e6e6;
}



/* -----------------------
Just for the main button
------------------------*/

.sheeter a:link
{
	padding: .7em 1em;
	color: yellow;
}
.sheeter a:visited
{
	padding: .7em 1em;
	color: yellow;
}

.sheeter a:focus
{
	padding: .7em 1em;
	color: black;
	background-color: white;
}

.sheeter a:hover
{
	padding: .7em 1em;
	color: white;
	border-top: 5px solid #0066CC;
	background-color: #0066CC;
}

.sheeter a:active
{
	padding: .7em 1em;
	color: yellow;
	background-color: #e6e6e6;
	border-bottom: 5px solid #e6e6e6;
}



/* -----------------------
FOR ACTIVE PAGE
------------------------*/

.activePage a:link
{
	color: black;
	padding: .7em 1em;
	background-color: #e6e6e6;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #e6e6e6;
}
.activePage a:visited
{
	color: black;
	padding: .7em 1em;
	background-color: #e6e6e6;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #e6e6e6;
}

.activePage a:focus
{
	padding: .7em 1em;
	color: black;
	background-color: #e6e6e6;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #e6e6e6;
}

.activePage a:hover
{
	padding: .7em 1em;
	color: white;
	background-color: #0066CC;
	border-top: 5px solid yellow;
	border-bottom: 5px solid yellow;
}

.activePage a:active
{
	padding: .7em 1em;
	color: yellow;
	background-color: #0066CC;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #0066CC;
}





/* ------------------------
Just for the menu bar icons
--------------------------*/

.icons a:link
{
	padding: .7em .3em;
	color: white;
}
.icons a:visited
{
	padding: .7em .3em;
	color: white;
}

.icons a:focus
{
	padding: .7em .3em;
	color: white;
	background-color: white;
}

.icons a:hover
{
	padding: .7em .3em;
	color: white;
	border-top: 5px solid #538DDE;
	background-color: #538DDE;
}

.icons a:active
{
	padding: .7em .3em;
	color: white;
	border-top: 5px solid #99FF99;
	border-bottom: 5px solid #99FF99;
	background-color: #99FF99;
}



/* -----------------------
FOR ACTIVE ICON PAGE
------------------------*/

.activeIcons a:link
{
	color: black;
	padding: .7em .3em;
	background-color: #e6e6e6;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #e6e6e6;
}
.activeIcons a:visited
{
	color: black;
	padding: .7em .3em;
	background-color: #e6e6e6;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #e6e6e6;
}

.activeIcons a:focus
{
	padding: .7em .3em;
	color: black;
	background-color: #e6e6e6;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #e6e6e6;
}

.activeIcons a:hover
{
	padding: .7em .3em;
	color: white;
	background-color: #0066CC;
	border-top: 5px solid yellow;
	border-bottom: 5px solid yellow;
}

.activeIcons a:active
{
	padding: .7em .3em;
	color: yellow;
	background-color: #0066CC;
	border-top: 5px solid yellow;
	border-bottom: 5px solid #0066CC;
}

/* -----------------------
Profit / Loss Report
------------------------*/

 #reportProfitLoss
 {
	 font-family: Arial, Helvetica, sans-serif;
	 border-collapse: collapse;
	 width: 100%;
	 background-color: #FFFFFF;
 }

#reportProfitLoss td, #reportProfitLoss th
{
	border: 1px solid #ddd;
	padding: 5px;
}

#reportProfitLoss th
{
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: left;
	background-color: #04AA6D;
	color: white;
}

#emphasis
{
	font-weight: bold;
}

/* -----------------------
Single styles
------------------------*/

.fancyButton
{
	backface-visibility: hidden;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: #ECEAEA;
	border-radius: 5px;
	border: 2px solid #5B88D4;
	padding: 1px 15px 1px 15px;
	color: #000000;
	font: 14px "Verdana", Helvetica, Arial, Geneva, sans-serif;
	font-weight: 100;
	font-style: normal;
}
.fancyButton:hover
{
	background: #468DCF;
	color: #FFFFFF;
	border: 2px solid #468DCF;
}
.fancyButton:active
{
	background: #FFFFFF;
	color: #000000;
}
.fancyButton:disabled
{
	opacity: 0.5;
}





.singleSearchButton
{
	backface-visibility: hidden;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: #aaff00;
	border-radius: 5px;
	border: 2px solid #000000;
	padding: 1px 15px 1px 15px;
	color: #000000;
	font: 28px "Verdana", Helvetica, Arial, Geneva, sans-serif;
	font-weight: 100;
	line-height: 32px;
	font-style: normal;
}
.singleSearchButton:hover
{
	background: #fffeb8;
	color: #000000;
	border: 2px solid #000000;
}
.singleSearchButton:active
{
	background: #fffeb8;
	color: #000000;
}
.singleSearchButton:disabled
{
	opacity: 0.5;
}


.singleSearchButtonMulti
{
	backface-visibility: hidden;
	position: relative;
	cursor: pointer;
	display: inline-block;
	white-space: nowrap;
	background: #e1e1e1;
	border-radius: 5px;
	border: 2px solid #000000;
	padding: 1px 15px 1px 15px;
	color: #000000;
	font: 28px "Verdana", Helvetica, Arial, Geneva, sans-serif;
	font-weight: 100;
	line-height: 32px;
	font-style: normal;
}
.singleSearchButtonMulti:hover
{
	background: #fffeb8;
	color: #000000;
	border: 2px solid #000000;
}
.singleSearchButtonMulti:active
{
	background: #fffeb8;
	color: #000000;
}
.singleSearchButtonMulti:disabled
{
	opacity: 0.5;
}


.singleSearchTable
{

}

.singleSearchTable td
{
	padding: 10px;
}

.singleSearchTypeCell
{
	font-size: 30px;
}

.singleSearchResultCell{
	font-size: 30px;
}





.btn
{
	color: #fff !important;
	background-color: royalblue;
	border-color: #222;
	display: inline-block;
	padding: .5em 1em;
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: .2em;
	text-decoration: none;
}

.btn:hover
{
	color: #fff !important;
	background-color: green;
}

.btn:focus
{
	color: #fff !important;
	background-color: black;
}

.btn:active
{
	color: #fff !important;
	background-color: red;
}



.stockFilterSwitchButton
{
	font-size: 20px;
	padding : 10px;
	background-color: #1b73b6;
	color: #FFFFFF;
	border-radius: 10px;
	border: 2px solid black;
}

.stockFilterSwitchButton:hover
{
	background-color: #7bb1da;
}



.togglePercentageButton
{
	width: 320px;
	font-size: 26px;
	padding : 10px;
	background-color: #1b73b6;
	color: #FFFFFF;
	border-radius:15px 15px 0 0;
	border-top: 2px solid black;
	border-right: 2px solid black;
	border-left: 2px solid black;
}

.togglePercentageButton:hover
{
	background-color: #7bb1da;
	color: #000000;
	cursor: pointer;
}



.table
{
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
}

.list-unstyled
{
	padding-left: 0;
	list-style: none;
}

.list-inline
{
	padding-left: 0;
	margin-left: -5px;
	list-style: none;
}

.list-inline > li
{
	display: inline-block;
	padding-right: 5px;
	padding-left: 5px;
}





/* -----------------------
Last Viewed Table
------------------------*/

/* THE CONTAINER FOR ALERTS ON HOME PAGE */
.lastViewedGrid
{
	/* Grid Fallback */
	display: flex;
	flex-wrap: wrap;
	background: #ffe600;
	width: fit-content;
	border-radius: 10px;
	padding: 0 10px 0 10px;
}

/* THE MODULE CELL TO BE PLACED IN THE CONTAINER */
.moduleLast
{
	font: 12px "Verdana", Helvetica, Arial, Geneva, sans-serif;
	border-radius: 5px;
	border: 0;
	padding: 5px 5px 5px 5px;
	cursor: default;
	align-items: center;
	justify-content: center;
	text-align: left;

	/* Flex Fallback */
	margin-right: 5px;
}





/* -----------------------
Wide styles
------------------------*/

@media (min-width: 42em)
{
	.header  { padding: 0em 1em; }
	.nav-bar { padding: 0.85em 2em; }
	.footer  { padding: 0.85em 2em; }
	.headerDEV  { padding: 0em 1em; }
	.footerDEV  { padding: 0.5em 2em; }

	.nav li
	{
		display: inline;
		margin: 0 1em 0 0;
	}

	.nav a
	{
		display: inline;
		padding: 0;
		border-bottom: 0;
	}
}