/* Global Defaults */
html, body { margin: 0px; padding: 0px;form-wrapp border: 0px; background-color:#f7f7f7; height:100%}
body, input, textarea { font: 1em/1.2 Arial, Helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; }
h1 {font-size:1.3em;}

p, th, td, dd, dt, q, acronym, abbr, a, input, select, textarea { margin: 0; padding: 0; }
li {padding-top:0;} /*padding-bottom:.5em; */
ul, ol {margin-top:.3em; margin-bottom:.3em;}
p {padding:.6em 0; text-align:left;}
blockquote {margin-top:.1em; margin-bottom:.3em;}

small { font-size:.85em; }
big { font-size:1.2em; }
img {border: none; max-width:100%;}
img { -ms-interpolation-mode: bicubic; }
.marginRt0 {margin-right:0 !important;}

a, a:link, a:visited, a:active {text-decoration: underline; color:#006699;}
a:hover {text-decoration: none; color:#F97103;}

.choice-wrapper a i:hover  {color:red;}
    
h3.center, p.center {text-align: center;}
.bold {font-weight: bold;}
.hide {display:none !important;}
.hideinmobile {display:none !important;}
.showinmobile {display:inline-block !important;}

table, td, tr {margin: 0;padding: 0;border: none; text-align:left;vertical-align:top;}
form {margin: 0; padding: 0;}

span.required, b.required {color:#FF0000;}

label.disabled, label.disabled b {color:#ccc !important;}

.NonProdWarningBar {position:absolute; top:0; left:0; width:100%; background-color:yellow; border-bottom:1px solid red; overflow:hidden; padding:3px; font-weight:bold; font-size:.7em; text-align:center; opacity: 0.5; box-shadow: 0px 9px 6px -6px #666;}

/* MMENU */
.mm-menu {
    --mm-color-background: #404E67;
    --mm-sidebar-expanded-size: 100px;
    --mm-color-text-dimmed: #ccc9c9;
    --mm-color-border: #404E67;
    --mm-color-background-highlight: #404E67;
    --mm-color-background-emphasis: #404E67;
    }
.mm-wrapper_opening .mm-menu_offcanvas.mm-menu_opened ~ .mm-slideout { transform: translate3d(240px,0,0); }

/* TINY MCE*/
.mce-content-body, mce-edit-area {padding:0 8px;}

/* Success & Warning Blocks */
.warningWrapper { border: 2px solid #FF9900; padding: .4em; border-radius: 8px; background-color: #FFFDF4; color: Black; text-align: center; margin: 10px; }
.warningWrapper .emphasize { font-size: 1.2em; color: #FF6600; }

.successWrapper {border:1px solid #00A400; padding:.4em; border-radius:8px; background-color:#ECFFEC; color:#003300; text-align:center; margin:10px;}
.successWrapper .emphasize {font-size:1.2em; color:#006600;}
.successWrapper p {text-align:center !important;}

/* UPDATE BLOCKS */
div.updateBlock h1 { text-align:center; padding: .2em; border: 1px solid red; background-color: #FFCCCC; color: #FF0000; font-weight: bold; text-transform: uppercase; margin-top:.5em;}
div.updateBlock p { padding:.6em; border:1px solid #666; margin-bottom:1em; margin-top:1px;}
div.updateBlock2 {border:1px solid #666; background-color:#F5EBEB; border-radius:10px; padding:15px; margin-bottom:1em;}
div.updateBlock2 h2, div.updateBlock2 h1 {color:#A82A2C !important; text-align:center;}
div.updateBlock3 {border:1px solid #666; background-color:#F5EBEB; border-radius:10px; padding:15px; margin-bottom:1em;}
div.updateBlock3 h2, div.updateBlock2 h1 {color:#A82A2C !important; text-align:center; font-size:1.3em;}
div.updateBlock3 p {font-size:1.1em; color:Red; font-weight:bold; text-align:center;}

/* PAGE */
#page {overflow:hidden; display:block; margin:0 auto; width:100%; background-color:#FFFFFF;}

/* darker Blue: #3F7FA1 */
#banner { padding: .8em 0 3px 40px; text-align:center; background-color:#4DB3D0; line-height:1em; border-bottom: 2px solid #000000; font-size:1.2em; color:#fff; font-family:"Times New Roman", Times, serif;}
#banner .smaller {font-size:.75em;}
#banner a.menu { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE1JREFUeNpi/P//PwOtARMDHQBdLGFBYt+nkR2KjEhxQqvIYaR7cD2glSWMo0mY3DiJo5Edi4ZPEqZ7nMSP5pPRon60qB9NwpQDgAADAMIxHUJvWs/TAAAAAElFTkSuQmCC") no-repeat scroll center center transparent;
	display: block;	width: 40px;height: 40px;position: absolute;top: 0px;left: 10px;}

#LowerBanner {display:none; height: 20px; background-color:#4DB3D0; border-bottom:1px solid #F97103;}
#shaftWrapper {background-color:#FFFFFF; overflow:hidden; padding: 10px 0 10px 0; border-bottom:3px solid #F97103; float:left; width:100%;}

/* HEADER */
#LowerHeader {padding:17px; background-color:#7892ba; color:#fff;  font-family: Montserrat,Georgia,'Times New Roman',Times,serif; font-size: .9rem; font-weight: 300;}
#LowerHeader ul {padding:0; margin:0;list-style:none;}
#LowerHeader ul li {padding:0; margin:0;}
#LowerHeader ul li a {text-decoration: none; color: #fff; border: 1px solid #bfc4cb; padding: .5em; border-radius: 3px;}
#LowerHeader ul li a i {margin-right:.5em;}
#LowerHeader ul li a:hover {background-color:#8ea5c8;}


.tileRow {font-family: Montserrat,Georgia,'Times New Roman',Times,serif; margin-bottom:20px;}
.timeRow {width:90%; overflow:hidden;}

.tile { padding:20px; display:block; float:left; margin:8px 15px; background-color: #fff; overflow:hidden; color:#666;
 	-moz-box-shadow:    3px 3px 5px 6px #9eb7c136;
  	-webkit-box-shadow: 3px 3px 5px 6px #9eb7c136;
  	box-shadow:         3px 3px 5px 6px #9eb7c136;
    border: 1px solid #ebeff5;
    min-height:40px;
    width:75%; min-width:180px;
    position:relative;
    }

.tileIcon {color: #95BCEB; font-size: 2.5em; line-height:0; margin-bottom:5px;}
.tileTitle {display:none; text-transform:uppercase; font-weight:600;}
.tileNumber {font-size:2.5em; color:#666;}
.tileText p strong {color:#ce0404; font-weight:normal;}
.tileText a:link, .titleText a:visited {color:#666; text-decoration:underline; font-weight:600;}
.tileText a:hover {text-decoration:none;}

.tile .tileLink {display:block; top:1em; right:1em; position:absolute;}
.tile .tileLink a:link, .tile .tileLink a:visited {text-decoration:none;}

.tile.x2 {min-width:450px;}
.tile .tileText .row {width:100%; overflow:hidden;clear:both; margin-top:.7em;}
.tile .tileText .row .label {width:30%; min-width:80px; float:left; display:block; margin-right:10px;}
.tile .tileText .row .value {width:67%; float:left; display:block; overflow:hidden;}


#header-form {
    font-family: Montserrat,Georgia,'Times New Roman',Times,serif;
    padding: 15px 15px 15px 75px;
    color: #fff;
    background-color: #fff;   /* #243036;*/
    font-size: 1em;
    font-weight: 400;
    min-height:25px;
    overflow:hidden;
}    

#header-form h1 {margin-left: 50px; color: #5a3c51; padding:0; background: none;}
.header-title-wrapper {display:none;}

#header-form h1 a.ham {
	display: inline-block;
	width: 28px;
	height: 18px;
	padding: 11px;
	margin: 2px;
	position: absolute;
	top: 0;
	left: 0;
}
#header-form h1 a.ham:before,
#header-form h1 a.ham:after { content: ''; display: block; background: #3c69c0; height: 2px; }
#header-form h1 a.ham span {background: #3c69c0; display: block; height: 2px; margin: 6px 0; }

.buttonsHeader {float: right; margin-top: -15px;}
.buttonsHeader a {min-width: 150px; display: inline-block; margin-top:3px; text-decoration: none; background-color:aliceblue; color:steelblue; border: 1px solid #bfc4cb; padding: .6em .3em; border-radius: 3px; margin-left:2px;}
.buttonsHeader a:hover {background-color:beige;}

#footer {padding:5px; text-align:center; color:#e5e5e5; background-color:#3d3941; font-size:.8em; height:30px; display:fixed; bottom:0; width:100%;}
#footer p {text-align:center;}
#footer a {color:aliceblue; text-decoration:none;}
#footer a:hover {color:deepskyblue; text-decoration:underline;}

/* MENU */
#menu, #mm-menu {padding-top:20px; font-family: Montserrat,Georgia,'Times New Roman',Times,serif; font-size: 1rem; font-weight: 300; color: #DCDCDC; line-height: 1.2em; float: left; width: 220px; background-color: #404E67;}
#menu ul, #menu li, #mm-menu ul, #mm-menu li {margin:0; padding:0}
#menu li a, #mm-menu li a {list-style:none; display: block; text-overflow: ellipsis; overflow: hidden; border-left: 4px solid transparent; padding:1em;}
#menu li a i, #mm-menu li a i {margin-right:.5em;}
#menu li a:link, #mm-menu li a:link,
#menu li a:visited, #mm-menu li a:visited {display:block; padding: 15px 3px 15px 15px; text-decoration: none; color:#c3c4cd}
#menu li a:hover, #mm-menu li a:hover {background-color:#38445A; text-decoration:none;}
#menu li a.selected, #mm-menu li a.selected {color:#7cc1b1;}
#menu p, #mm-menu p {margin-left:15px;}
#menu p.important, #mm-menu p.important {color:#CC5E01;}
#menu a.aspNetDisabled, #mm-menu a.aspNetDisabled {color:gray !important; text-decoration:none !important;}

.OutletNameBox {display:none; margin: 0 0 20px 0; padding: 6px; text-align: center; font-size: .9em; font-weight: 400; background-color: #11113e; color: #aeadcc;}

.middleContentWrapper {background-color: #404E67; overflow:hidden; width:100%; display:block;}
.repeaterListItem {float:left; display:block; padding:5px; margin:4px; min-width:200px;}

.adminBodyWrapper {display:block; min-width:300px; min-height:600px; overflow:hidden; background-color:#f7f7f7;}
.adminBodyWrapper h1 {font-family: Montserrat,Georgia,'Times New Roman',Times,serif; padding: 15px; color: #fff; background-color: #243036; font-size: 1em; font-weight: 400;}

/* CONTENT */
#contentWrapper { padding: 0 4%; min-height: 500px; margin-bottom: 15px; font-size: .95em;}
#contentWrapper .topTitleWrapper, #contentWrapper h1.topTitle {text-align:center; width:100%; margin-bottom:20px;}
#contentWrapper .topTitleWrapper h2 {color:black;}
#contentWrapper h2 {font-size:1.1em; color:#4DB3D0; margin-top:.5em; margin-bottom:.5em;}

/* LOGIN PAGE */
.contentWrapper.login {    
    background-color: #242323;
    background-repeat:no-repeat;
    background-size:cover;
}
.contentWrapper.login #header-form { background-color: rgba(42, 53, 42,0.8); }
.contentWrapper.login #header-form h1 {color:white;}
.contentWrapper.login .form-wrapper {background:none;}
/*.contentWrapper.login .loginBox, .contentWrapper.login .loginBox table { background-color: rgba(255, 255, 255, 1); }*/



/* Content Column (when there's a sidebar) */
.contentColumn {float:left; width:100%;} 

/* SIDEBAR */
#sidebar {margin:.1em .1em 1em .1em; overflow:hidden; font-size:.9em; border-bottom:1px dotted #666; padding-bottom:1em;}
#sidebar h1 {font-size:1.1em; color:#CC5E01; display:block; text-align:center;}
#sidebar h2 {font-size:.95em; color:#000; margin-bottom:.2em;}
#sidebar p {color:#333333; line-height:1.2em; padding:0;}

/* LOGIN PAGE */
.loginMessageWrapper {width:300px; border:1px dotted #336699; color:#336699; display:block; margin:1em auto; padding:15px;}
.loginMessageWrapper p {text-align:left;}
table.login {background-color:#fff; display: block; margin: 0 auto; max-width: 350px; border: none; padding: 5px;}
table.login tr td { padding:12px;}
body.LoginPage {background-color: #f7f7f7;}

.loginBox {border-radius:5px; background-color: rgba(255, 255, 255, .85); padding: 20px; width:auto; max-width:330px; display:block; margin:1em auto; box-shadow: 0 10px 40px 0 rgba(62,57,107,.07),0 2px 9px 0 rgba(62,57,107,.06); }
.loginBox label {margin-right:15px; color:#666; font-weight:bold;}
.loginBox .row label {width:auto;}
.loginBox .row input[type="text"], .loginBox .row input[type="password"] {width:90%; padding:8px;}
.loginBox .row.tileButtonsRow {text-align:center;}
.loginBox .row:first-of-type {margin-top:.5em !important;}
.loginBox.signup {border:8px solid #72a528;}
.loginBox.signup h2 {text-align: center; font-size: 1em;}

.loginBoxFoot {width:100%; text-align:center; margin-top:13px; font-size:.8em;}

.logoBox {display:block; margin: 0; width:25%; min-width:120px; max-width:250px; border-radius:5px;} 
.logoBox img {border-radius: 5px;}



/* PAGES */
.minHeight {min-height:200px;}
.sectionWrapper {margin:25px;}
.sectionWrapper i {color:#2d4165; margin-right:.6em; font-size:1.4em; text-decoration:none;}

/* TABLE PAGE ELEMENTS */
/*  Usages:  table class="normal lines smaller centercells" */
table.tableStyle1 {margin-left:auto; margin-right:auto;}
table.tableStyle1 th {padding:10px; text-align:center; background-color:#336699; color:#fff; font-weight:bold; font-size:1em;}
table.tableStyle1 td {vertical-align:top; padding:5px; border:1px solid #666;}
table.tableStyle1 td.label {font-weight:bold; }
table.tableStyle1 td.data {font-weight:normal; min-width:150px;}
table.tableStyle1 td.number {text-align:right;}
table.tableStyle1 td .footnote {font-weight:normal; font-size:.9em;}

table.tableStyle2 {margin-left:auto; margin-right:auto;}
table.tableStyle2 th { font-size:.9em; padding:.3em; text-align:center; background-color:#C8C8C8; font-weight:bold;}
table.tableStyle2 td { font-size:.85em; vertical-align:top; padding:.5em; border:1px solid #666;}
table.tableStyle2 td.label {font-weight:bold; }
table.tableStyle2 td.data {font-weight:normal; min-width:150px;}
table.tableStyle2 td .footnote {font-weight:normal; font-size:.9em;}

table.normal {margin-left:auto; margin-right:auto;}
table.normal.left {margin-left:0; margin-right:0;}
table.normal th {padding:6px; font-weight:bold; text-align:left;}
table.normal td {vertical-align:top; padding:6px; padding-right:1.5em; border:none;}

table.lines {border-collapse:collapse;}
table.lines td, table.showLines th, table.lines th {border:1px solid #666;}

table.smaller td, table.smaller th {font-size:.8em;}
table.center {margin-left:auto; margin-right:auto;}
table.centercells td {text-align:center !important;}
table.centerhead th {text-align:center !important;}
table.Width100 {width:100%;}


/* SHOPPING CART PAGE */
.cartWrapper {margin:25px 5px 5px 5px; max-width:750px; padding:5px;
 	-moz-box-shadow:    3px 3px 5px 6px #9eb7c136;
  	-webkit-box-shadow: 3px 3px 5px 6px #9eb7c136;
  	box-shadow:         3px 3px 5px 6px #9eb7c136;
}
.cartWrapper .title {font-size:1em; width:30%; display:block; float:left; text-transform:uppercase;}
.cartWrapper .orderNumber {font-size:2em; width:30%; display:block; float:right; margin-right:20px;}
.cartWrapper.info {margin-top: 10px; padding:0; box-shadow: none; font-size: 1.2em; text-align: left; max-width: 780px;}
.cartWrapper.info .text {color:#858690; padding-right: 12px; margin-left: 20px; font-size:.9em;}
.cartWrapper.info .totalNumber {font-weight:normal;}
.cartWrapper.info .totalBox {margin-bottom:12px;}
.cartWrapper.inventorylist {max-height: 450px; height: auto; -webkit-box-shadow: none !important; box-shadow:none !important; font-size:.92em; overflow-y: scroll; min-width: 340px; padding: 0 27px; border: 1px solid #e4e5f1;}

.cartRow {overflow:hidden; padding:6px;clear:both;}
.cartRow.header {font-weight:normal; font-size:1.5em; color:darkslateblue; text-align:left !important;}
.cartRow .prodCol   {width:60%; display:block; float:left;}
.cartRow .filterCol {width:75%; display:block; float:left; margin-right:10px;}
.cartRow .prodBox {color: #646464; width:100%; padding:4px; border:1px solid #aeaeaf; border-radius:5px;}
.cartRow .qtyCol    {margin-left:20px; width:75px; display:block; float:left;}
.qtyBox {color: #646464; text-align:right; width:60px; padding:4px; border:1px solid #aeaeaf; border-radius:5px;}
.cartRow .actionCol {margin-left:4px; width:100%; display:block; float:left; text-align:center; padding-top:20px;}
.cartRow .actionCol a.delLink:link, .cartRow .actionCol a.delLink:visited {color:darkred; text-decoration:none;}
.cartRow .actionCol a.delLink:hover {color:red;}
.qtyBox.intable {padding:2px; width:35px;}
.alignRight {text-align:right !important;}

.optionTableWrapper {padding:20px 0 0 30px;}
.optionTableWrapper table td {padding:5px;}
.optionTableWrapper input[type=radio] {margin-right:1em;}
.optionTableWrapper table td p {margin-left:2em;}


/* Confirmation Page */
.ConfirmationWrapper {margin:100px; max-width:400px;}

/* Data Entry Grid */
table.DataGridStyle1 {margin-top:5px;}
table.DataGridStyle1 tr.headerRow td, table.DataGridStyle1 th {padding:0 10px; border:none; vertical-align:bottom; font-weight:bold; color:#666; text-align:left;}
table.DataGridStyle1 tr.itemRow td {vertical-align:middle;}
table.DataGridStyle1 tr.itemRow td input[type="text"].phonenumber {width:8em;}
table.DataGridStyle1 tr.itemRow td input[type="text"].date {width:4em;}
table.DataGridStyle1 tr.itemRow td {font-size:1em;}
table.DataGridStyle1 tr.itemRow td input[type="text"] {font-size:1em;}
table.DataGridStyle1 td {font-size: .9em; padding:6px; border-bottom:1px dotted #ccc;line-height: 1.6em;}
table.DataGridStyle1 td ul.checkboxes {margin:0; list-style:none; padding:0; display:block; margin-top:.3em;}
table.DataGridStyle1 td ul.checkboxes li {display:block; overflow:hidden; padding:0; padding-bottom:.2em;}
table.DataGridStyle1 td ul.checkboxes li input {display:inline; margin:0; float:none; }
table.DataGridStyle1 td ul.checkboxes li label {display:inline; margin:0 .5em; float:none; padding:0; text-align:left; font-weight:normal;}
input.gridboxdisable {border:none !important; background-color:transparent; background:none; color:Black; }
table.DataGridStyle1 td.trashcol {padding-left:20px;}

table.DataGridStyle1 .c-act {float:right; width:1em; margin-left:1.2em; overflow:hidden;}
table.DataGridStyle1 .c-tot {float:right; width:6.5em; text-align:right;}
table.DataGridStyle1 .c-price {float:right; width:5em; text-align:right;}
table.DataGridStyle1 .c-qty {float:right; width:3em; margin-right:4px; text-align:right; padding-right:5px;}
table.DataGridStyle1 .c-cd {float:left; width:4em; margin-right:.7em;}
table.DataGridStyle1 .c-nm {float:left; margin-right:.7em;}
table.DataGridStyle1 .c-rowA {float:left; display:block; overflow:hidden; width:100%; max-width:28em;}
table.DataGridStyle1 .c-rowB {overflow: hidden; width: 17.5em; float: right;}

.gvTextBoxCol { width:70%; }

.inProcessOverlay {text-align:center; font-weight:bold; color:#336699; border:5px solid #79d2eb; background-color:#d4e4ed; border-radius:7px; padding:15px; position:fixed; top:20px; margin:30px 20%; min-width:300px;}

.form-wrapper .intro {
    margin: 20px;
}

.form-wrapper {
    font-family: 'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    background: rgb(207,216,228);
    background: linear-gradient(180deg, rgba(207,216,228,1) 0%, rgba(255,255,255,1) 25px);
    overflow:hidden;
    min-height:900px;
    padding:5px 5px 2em 5px;}
}
.form-wrapper .dashboardStyle table {margin-top:2em;}
.form-wrapper .dashboardStyle table.DataGridStyle1 th {
    vertical-align: bottom;
    border-bottom: 2px solid #E3EBF3;
    border-top: 1px solid #E3EBF3;
    padding-top: 10px;
    padding-bottom: 10px;
    color: black;
}


div.exampleBar { overflow:hidden; }
div.exampleBar div.example {display:block; float:left; width: 250px;}
div.exampleBar div.example div.detail {min-height:90px; border:1px solid #666; padding: 5px; border-radius:3px;}
div.exampleBar div.example span.claimid {color:Red; text-decoration:underline;}

/* CSS BUTTONS */

.button.small {
    min-width: 35px;
    padding: 4px;
    margin: 0 2px;
    cursor:pointer;
}

.cssbutton {margin-bottom: .5em; min-width:4em; cursor:pointer; text-align:center; padding:.3em .4em; margin-right:10px; border-radius:5px;   }
.cssbutton.primary {width:40%; text-decoration:none; font-size:1em; font-weight:normal; background-color:#DD8500; color:#FFF; border:none;}
.cssbutton.primary:hover {background-color:dodgerblue; color:white;}
.cssbutton.secondary { text-decoration: none; font-size: 1em; font-weight: normal; background-color: #D8D8D8; color: #000000; border: none; }
.cssbutton.secondary:hover {background-color:dimgray; color:white;}

/* PROCESSING BUTTON */
/* To enable a button to display "Processing..." after a click. 
	(1) Add class "triggerProcess" to the trigger button. 
	(2) Place the Processing DIV immediately before it. 
	Example:
		<div class="cssbutton processing">Searching...</div>
		<asp:Button CssClass="cssbutton primary triggerProcess" ID="btnNext" runat="server" Text="Continue &raquo;" CommandName="MoveNext"  />
*/
.cssbutton.processing { display:none; line-height:3em; width: 120px; height: 34px; padding: 0; cursor: default; font-size: .7em; font-weight: bold; border: 1px solid #999; background-repeat: no-repeat; background-image: url(/images/processing.gif); background-position: center; background-color: #f8f8f8; color: #0B4F8C !important; font-family: Arial, Helvetica, sans-serif; }

div.buttonrow {text-align:center !important; display:block; margin-top:1em;}
div.buttonrow div.innerButtonRow {display:inline-block; text-align:center;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper {float:left; text-align:center; margin:0 7px;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper p.fieldTip {margin:0 !important; text-align:center; margin-top:.4em !important;}
div.buttonrow div.innerButtonRow div.buttonAndInstructionWrapper .cssbutton {margin:0 0 .5em 0 !important;}

/* FORM PAGE ELEMENTS */
.formHeader {color:#000; font-size:1.1em; font-weight:bold; padding-bottom: .8em; margin-bottom:.5em; border-bottom:1px dotted #FF9900;}

.pageHeader {color:#666; font-size:1em; font-weight:bold; overflow:hidden;}
.pageHeader h1 {float:left; margin-bottom:.7em;}
.pageHeader p {width:200px; float:right; font-weight:normal; font-size:.8em; text-align:right; }

.formEyebrow {clear:both; color:#666;}


/* FORMS */
input.uppercase {text-transform: uppercase;}

.form-wrapper .dashboardStyle fieldset {border:none; background-color:#fff; box-shadow: 0 10px 40px 0 rgba(62,57,107,.07),0 2px 9px 0 rgba(62,57,107,.06);}

.formStyle1 fieldset .buttonrow {padding: 10px 0 10px 205px;}  /* buttons are inside a fieldset */
.formStyle1 .fieldTip { padding-top:.1em; margin-top: 0; margin-left: 2%; display: block; font-style: italic; font-size: .85em; color: #5F5F5F; font-family: Lato, Arial, Helvetica, sans-serif; }
.formStyle1 p.instruction {color:#990000; font-style:italic;}
.formStyle1 .fieldTip.error {color:#d50a0a; font-weight:bold; font-style:normal; margin-top:2px; line-height:1.5em;}
.formStyle1 .fieldTip.error::before { content: "!"; border-radius:5px; margin-right:3px; padding:2px 7px; background-color: yellow; color: black; font-weight: bold; border:1px solid #333333;}

.formStyle1 label {font-size:1em; line-height:1.1em; display:block; text-align:left; margin:.25em 15px .15em 0; font-family:Lato, Arial, Helvetica, sans-serif; font-weight:normal;}
.formStyle1 label b {color:#FF0000; font-weight:bold; font-size:1em;}
.formStyle1 fieldset {position:relative; border-radius: 3px; border:1px solid #c8dce6; background-color:#F3F3F3; padding:3em 15px 15px 15px; margin: 10px 0 20px 0; }
fieldset.nolegend {padding-top:.95em;}
.formStyle1 legend {position: absolute; font-weight: 400; top: .4em; left: .85em; font-size: 1.2em; color: #565a93; font-family: 'Lato', sans-serif;}
.formStyle1 legend b {font-weight:700;}
.formStyle1 .row-wrapper {border-top:1px solid #d4d6d9; margin-top:5px; padding-top:15px;}
.formStyle1 .row {display:block; margin-top:1.4em; margin-bottom:.6em; overflow:hidden;}
.formStyle1 .row:first-of-type {margin-top:0;}
.formStyle1 .row.readOnlyFields span {font-weight:bold; line-height:1.7em; color:Black;}  /* use LABELs instead of TEXTBOXes */

.formStyle1 input[type=text], .formStyle1 input[type=password],  
.formStyle1 textarea, 
.formStyle1 select {width:95%; padding:4px; font-size:1em; border:1px solid #9ea6d8; border-radius:5px;}

.formStyle1 .tinymce-wrapper {width:98%; padding:0px; float:none;}

.formStyle1 span.error, div.error { margin: 10px 0; padding: 10px; color: #C00; display: block; border: 1px solid #f77c7c; border-radius: 6px; background: #FDE2E1;}
.formStyle1 span.success, div.success { margin:10px 0; padding:10px; color: #030; display:block; border:1px solid #060; border-radius:6px; background-color:#E7F4E7;}

.formStyle1 .row.checkboxes label,
.formStyle1 .row.widecheckboxes label {width:10%; float:left !important;}
.formStyle1 .row.checkboxes,
.formStyle1 .row.widecheckboxes {margin-bottom:0;}
.formStyle1 .row.wideLabel label {width:40%; float:left !important;} 

.formStyle1 .row.wideLabel input[type=text],
.formStyle1 .row.wideLabel textarea,
.formStyle1 .row.wideLabel select {width:55%;}


.formStyle1 ul.checkboxes {list-style:none; padding:0; display:block; overflow:hidden;  margin-top:.1em;}
.formStyle1 ul.checkboxes li {clear:both; display:block; overflow:hidden;}
.formStyle1 ul.checkboxes li input {float:left; display:block; margin:.5em 2% 0 0; }
.formStyle1 ul.checkboxes label {color:#333; padding-top:0; width:80% !important; float:left; overflow:hidden; display:block; text-align:left; font-weight:normal; line-height:1.3em;}
.formStyle1 ul.checkboxes li label ul li {overflow:visible !important; display:list-item; list-style-type:disc; list-style-position:outside;}
.formStyle1 ul.checkboxes li label ol li {overflow:visible !important; display:list-item; list-style-type:decimal; list-style-position:outside;}

/*		Allows you to create YES/NO radiobuttons to the right of the label text */
.formStyle1 div.row.yesno label {text-align:left; width:90%; }
.formStyle1 div.row.yesno ul {margin-top:0;}
.formStyle1 div.row.yesno li {width:30%; clear:none; margin: .3em 0 0 2%; float:left;}
.formStyle1 div.row.yesno li label {width:70% !important; margin-right:0; margin-left:2%;}

/*		Allows you to create an indented "regular row" within a list of checkboxes */
.formStyle1 ul.checkboxes li.regularRow {margin-left:10%;}
.formStyle1 ul.checkboxes li.regularRow label {width:95% !important; text-align:left; color:#666; font-weight:bold;}
.formStyle1 ul.checkboxes li.regularRow input[type=text] {margin-top:0;}
.formStyle1 ul.checkboxes li.regularRow p.fieldInstruction {clear:both; margin-left:0;}

.formStyle1 input.error, 
.formStyle1 label.error,
.formStyle1 textarea.error, 
.formStyle1 select.error {border-color:#ff0000 !important; background-color:#ffeeee !important; border-width:1px; }

/* specific field formatting */
input[type=text].number {width:80px !important;}
input[type=text].number2 {width:25px !important;}
input[type=text].number3 {width:45px !important;}
input[type=text].number4, select.number4 {width:65px !important;}
input[type=text].number7 {width:80px !important;}
input[type=text].number10 {width:120px !important;}
input[type=text].phonenumber {width:8em !important;}
select.number {width:10em !important;}
input[type=text].readonly {border:none !important; background:transparent; color:Black;}


/* ALERT AREAS ON FORMS */
.alertMsgArea {padding:10px; margin:1em 0; color:#FF0000; border-radius:8px;}
.alertMsgArea p, .alertMsgArea ul {margin-left:35px; padding-top:0; text-align:left;}

.alertMsgArea.error {border:1px solid red; background-color:#f4eaec; color:red; }
.alertMsgArea.success {border:1px solid green; background-color:#ebfbeb; color:forestgreen;}

.alertHelpWrapper {display:none; line-height:1.3em; font-size:.85em; padding:8px; border:1px solid #009900; border-radius:8px; background-color: #EBFFE6; background-image:url(../../../images/help.png); background-position:left top; background-repeat:no-repeat; margin:1em 0; color:#002677;}
.alertHelpWrapper p, .alertHelpWrapper ul {margin-left:35px; padding-top:0;}
.alertHelpWrapper strong, .alertHelpWrapper b {color:#000000;}

a:link.print, a:visited.print { margin: 1em; color: #333333; text-align: center; border-radius: 3px; display: block; width: 7em; border: 1px solid #FFAC84; background-color: #FEDAA9; padding: .3em; float: right; font-weight: bold; font-size: .8em; font-family: Verdana; text-decoration: none; }
a:hover.print { background-color: #FFF5E8;}

/* ALTERNATE ROW */
.row.rightblock {width:300px; float:left;}

/* START PAGES */
.offlineMessage {display:block; overflow:hidden; margin-top:20px; padding:20px; border:3px solid #666; border-radius:8px; text-align:center;}



/************************************** */
/* MEDIA QUERIES                        */
/************************************** */

/* Breakpoint at 500px */	
@media screen and (min-width: 500px){
    .hideinmobile {display: unset !important;}
    .hideinmobile.cell {display: table-cell !important;}
    .showinmobile {display: none !important;}
    .logoBox {margin: 1em auto; min-width:150px;}
}

/* Media Queries for mmenu */
@media screen and (max-width: 600px) {
    #menu { display: none !important; }
    .cartWrapper {margin:5px;}
}

@media screen and (min-width: 601px) {
    #mm-menu{ display: none !important; }

    #header-form {padding: 15px; min-height:0;}
    #header-form h1 a.ham {display: none;}
    #header-form h1 {display:inline-block; width:45%; margin-left:0;}
    .header-title-wrapper {display:inline;}

    .form-wrapper {padding:20px 20px 3em 20px;}
    .formStyle1 fieldset {margin:20px;}
    .formStyle1 .row:first-of-type {margin-top:2em;}
    .formStyle2 legend {font-size:1.8em;}
    
    .buttonsHeader a {min-width:30px; display: unset; padding: .6em .3em; margin-left:2px;}

    table.DataGridStyle1 {margin-top:25px;}
    table.DataGridStyle1 td {font-size: 1em; }

    .tile { min-height:280px; width:180px; padding:30px; margin:15px; }
    .tile h4 {margin-bottom:15px;}
    .tileTitle {display:unset;}
    .tileIcon {font-size: 4em;}
    .tileNumber {font-size: 4em;}
}

/* Breakpoint 750 */
@media screen and (min-width:750px) {
    .cartRow .actionCol {width:80px; padding-top:0;}
    .cartRow .actionCol .cssbutton.primary {width:45px !important;}
    .cartWrapper.inventorylist {max-height:600px;}
}

/* Breakpoint after 800px set these */	
@media screen and (min-width: 800px){
	#page {width:100%; max-width:950px;}
	#contentWrapper {padding:0; float:left; width:77%}

	#content {padding-right:1em;}
	.contentColumn {float:left; width:64%} 
	#LowerBanner {display:block;}
	#banner a.menu {display:none;}
	#banner {font-size:1.8em; line-height:1.1em; color:#3F7FA1; background-color:White; padding: 15px 0 3px 15px; text-align:left;}
	#header-form h1 {width:60%;}

	#menu {display:block;}
	#menu img {width:90%; max-width:139px;}

	#sidebar {margin: 25px 0px 15px 15px; border-left:1px dotted #666; border-bottom:none; float:right; padding: 0 .8% 0 1%; width:30%;}
	#sidebar h2 {margin-bottom:.5em;}
	#sidebar p {padding: 0.6em 0px;}

	.formStyle1 label {float:left; width:15%; text-align:right;}
	.formStyle1 input[type=text], .formStyle1 input[type=password], 
	.formStyle1 textarea, 
	.formStyle1 select {width:80%;}

    .formStyle1 .tinymce-wrapper {float:left; width:82%;}

    .formStyle1 fieldset {max-width:950px; }
	.formStyle1 .fieldTip { margin-left: 18%; margin-right: 10%;}
	.formStyle1 ul.checkboxes label {width:90%;}
	.formStyle1 div.row.yesno label {text-align:left; width:70%; }
	.formStyle1 div.row.yesno li {width:46%; margin-top:0;}
	.formStyle1 div.row.indent {margin-left: 15%;}

	.formStyle1 ul.checkboxes li.regularRow {margin-left:10%;}
	.formStyle1 ul.checkboxes li.regularRow label {width:20% !important; text-align:right; }
	.formStyle1 ul.checkboxes li.regularRow input[type=text] {margin-top:0;}
	.formStyle1 ul.checkboxes li.regularRow p.fieldInstruction {clear:both; margin-left:25%}
}

/* Breakpoint after 850px set these */	
@media screen and (min-width: 850px){

    .cartWrapper {margin:40px; padding:30px; min-width:305px;}
    .cartWrapper.info {margin-top: 0; font-size: 1.6em; text-align: right;}
    .cartWrapper.info .text {font-size:.9em;}
    .buttonsHeader {margin-top: -15px;}
}
/* Breakpoint after 1330px set these */	
@media screen and (min-width: 1330px){
    .buttonsHeader {margin-top: 0;}
}