/*
=============================================
DOCUMENT
=============================================
*/

html, body {
	position: relative;
	font-family: 'Poppins', sans-serif;
	color: #16222a;
	height: 100%;
	background-color: #edf2f5;
	overflow-x: hidden;
}

/*
=============================================
STRUCTURAL
=============================================
*/

#admin-header {
	position: relative;
	z-index: 50;
}

#header {
	height: 160px;
	background-color: #1e73be;
	color: #fff;
}

#header.dev {
	background-color: #be1e1e
}

#contents {
	padding: 50px 0;
}

#footer {
	position: relative;
	padding: 30px 0 20px;
	background-color: #1e73be;
	color: #fff;
}

#footer:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-image: url('../img/footer-bottom.svg');
	background-size: 100% 50%;
	background-repeat: no-repeat;
	background-position: bottom center;
	opacity: 0.7;
}

/*
=============================================
ADMIN HEADER
=============================================
*/

#admin-menu {
	margin-top: 4px;
	margin-left: 0;
	padding-left: 0;
	margin-bottom: 0;
}

#admin-menu li {
	list-style-type: none;
	display: inline-block;
}

#admin-menu li a {
	display: inline-block;
	line-height: 26px;
	padding: 0 10px;
	background-color: #cad1d5;
	color: #000;
	text-decoration: none;
	border-top-right-radius: 4px;
	border-top-left-radius: 4px;
}

#admin-menu li:not(.active) a:hover {
	background-color: #fff;
}

#admin-menu li.active a {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bbbbbb+0,404040+60 */
	background: #bbbbbb; /* Old browsers */
	background: -moz-linear-gradient(top,  #bbbbbb 0%, #404040 60%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #bbbbbb 0%,#404040 60%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #bbbbbb 0%,#404040 60%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#404040',GradientType=0 ); /* IE6-9 */
	color: #fff;
}

#current-customer {
	background-color: #404040;
	color: #fff;
	font-size: 12px;
	line-height: 27px;
}

#current-customer a {
	color: #fff;
}

#debug-info {
	background-color: #404040;
	color: #eee;
	display: none;
}

#debug-menu {
	margin-top: -25px;
}

#debug-menu a {
	display: inline-block;
	padding: 2px 8px;
	color: #fff;
	text-decoration: none;
}

#debug-menu a:hover {
	background-color: #aaa;
}

#debug-menu a.active {
	background-color: #999;
}

#debug-info pre {
	height: 600px;
	overflow-x: hidden;
	border: 0;
	border-top: 1px solid #999;
	padding: 20px;
	border-radius: 0;
	background-color: #555;
	color: #eee;
	margin-bottom: 20px;
}

#debug-info pre a {
	color: #eee;
	text-decoration: none;
}

/*
=============================================
HEADER
=============================================
*/

#header>.container {
	height: 120px;
}

#logo {
	position: absolute;
	top: 9px;
	left: 15px;
	height: 140px;
}

#header .input-group {
	margin-left: 170px;
	margin-top: 42px;
}

#header #login-button {
	margin-top: 42px;
	background-color: #fff598;
	border-radius: 4px;
}

#search-term {
	width: 65%;
}

#job-accounts {
	margin-top: 42px;
	background-color: #8dd6f722;
	color: #fff;
	border-width: 0;
	border-bottom-width: 2px;
	border-color: #8dd6f7;
	font-size: 14px;
	padding-top: 8px;
	border-radius: 4px;
}

#job-accounts option {
	background-color: #fff;
	color: #16222a;
}

#header #menu-bar {
	height: 40px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e73be+0,2f4a9c+35,2f4a9c+65,1e73be+100 */
	background: #2f4a9c; /* Old browsers */
	background: -moz-linear-gradient(left,  #1e73be 0%, #2f4a9c 35%, #2f4a9c 65%, #1e73be 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #1e73be 0%,#2f4a9c 35%,#2f4a9c 65%,#1e73be 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #1e73be 0%,#2f4a9c 35%,#2f4a9c 65%,#1e73be 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e73be', endColorstr='#1e73be',GradientType=1 ); /* IE6-9 */
}

#header.dev #menu-bar {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e73be+0,2f4a9c+35,2f4a9c+65,1e73be+100 */
	background: #9c2f2f; /* Old browsers */
	background: -moz-linear-gradient(left,  #be1e1e 0%, #991e1e 35%, #991e1e 65%, #be1e1e 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #be1e1e 0%,#991e1e 35%,#991e1e 65%,#be1e1e 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #be1e1e 0%,#991e1e 35%,#991e1e 65%,#be1e1e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	/* filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e73be', endColorstr='#1e73be',GradientType=1 ); /* IE6-9 */
}

#menu {
	margin: 0 0 0 160px;
	padding: 0;
	list-style-type: none;
	white-space: nowrap;
}

#menu>li {
	position: relative;
	display: inline-block;
}

#menu>li>a {
	position: relative;
	display: block;
	height: 40px;
	padding: 0 16px;
	line-height: 40px;
	color: #fff;
	font-weight: 300;
	text-decoration: none;
	cursor: pointer;
	transition-duration: 200ms;
	z-index: 1001;
}

#menu>li>a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 100%;
	height: 3px;
	background-color: transparent;
	transition-duration: 200ms;
}

#header #menu>li:hover>a, #menu>li.active>a {
	background-color: #1e73be;
}
#header.dev #menu>li:hover>a, #menu>li.active>a {
	background-color: #1e73be;
}

#header #menu>li:hover>a:after, #menu>li.active>a:after {
	background-color: #1e73be;
}

#header.dev #menu>li:hover>a:after, #menu>li.active>a:after {
	background-color: #1e73be;
}

#menu>li>.submenu {
	position: absolute;
	display: none;
	opacity: 0;
	left: 0;
	top: 40px;
	min-width: 200px;
	padding: 0;
	background-color: #fff;
	border: 1px solid #1e73be;
	border-top-width: 0;
	list-style-type: none;
	transition-duration: 500ms;
	z-index: 1002;
	pointer-events: none;
}

#menu>li:hover>.submenu {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

.submenu>li {
	position: relative;
	display: block;
}

.submenu>li:not(:last-child) {
	border-bottom: 1px solid #edf2f5;
}

.submenu>li>a {
	position: relative;
	display: block;
	width: 100%;
	height: 40px;
	padding: 0 16px;
	line-height: 40px;
	font-weight: 300;
	text-decoration: none;
}

.submenu>li:hover>a, .submenu>li.active:hover>a {
	color: #fff;
	background-color: #8dd6f7;
}

.submenu>li.active>a {
	background-color: #8dd6f733;
}

.submenu>li>.submenu {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	left: 198px;
	top: 0;
	min-width: 200px;
	padding: 0;
	background-color: #fff;
	border: 1px solid #1e73be;
	/*border-top-width: 0;*/
	list-style-type: none;
	transition-duration: 200ms;
	z-index: 1002;
}

.submenu>li:not(:first-child)>.submenu {
	border-top-width: 1px;
}

.submenu>li:hover>.submenu {
	visibility: visible;
	opacity: 1;
}

.submenu li a i {
	position: absolute;
	right: 10px;
	top: 12px;
}

#mobile-menu {
	margin: 0 0 0 160px;
}

#mobile-menu a {
	line-height: 40px;
	color: #fff;
	text-decoration: none;
}

#header-links {
	text-align: right;
}

#header-links a {
	display: inline-block;
	height: 40px;
	padding: 0 10px;
	line-height: 40px;
	font-weight: 300;
	color: #c0ebff;
	text-decoration: none;
	overflow: hidden;
}

#header-links a i {
	margin-right: 8px;
}

#header-links a:hover {
	color: #fff;
}

#user-menu-btn {
	display: inline-block;
	position: relative;
}

#user-menu {
	position: absolute;
	top: 40px;
	left: -20px;
	display: block;
	visibility: hidden;
	margin: 0;
	padding: 0;
	width: 155px;
	background-color: #fff;
	list-style-type: none;
	z-index: 1002;
	overflow: visible;
}

#user-menu:before {
	content: "";
	position: absolute;
	left: 70px;
	top: -6px;
	width: 12px;
	height: 12px;
	background-color: #fff;
	transform: rotate(45deg);
}

#user-menu-btn:hover #user-menu {
	visibility: visible;
}

#user-menu li {
	display: block;
	text-align: center;
}

#user-menu li a {
	position: relative;
	display: block;
	width: 100%;
	color: #16222a;
	z-index: 1003;
}

#user-menu li a.flee {
	color: #ff5722;
}

#user-menu li a:hover {
	color: #fff;
	background-color: #8dd6f7;
}

#user-menu li a.flee:hover {
	color: #fff;
	background-color: #ff5722;
}

.cart-count {
	position: relative;
	top: 3px;
	left: 6px;
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 14px;
	border: 2px solid #c0ebff;
	font-size: 8px;
	text-align: center;
	border-radius: 8px;
	font-weight: bold;
	overflow: hidden;
}

/*
=============================================
CONTENTS
=============================================
*/

h1 {
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 26px;
	padding-bottom: 5px;
	border-bottom: 1px solid #afb2b5;
}

h2 {
	font-size: 22px;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 16px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #afb2b5;
}

h3 {
	margin-top: 0;
	font-size: 22px;
	font-weight: 300;
	color: #8dd6f7;
}

h4 {
	color: #2f4a9c;
}

p {
	font-size: 16px;
	line-height: 1.8em;
}

b {
	font-weight: 600;
}

a {
	cursor: pointer;
}

hr {
	border-top-color: #ddd;
}

label {
	font-weight: 600;
}

h1.maintenance {
	margin: 50px 0;
	border-bottom: 0;
	color: #f44336;
	text-align: center;
}

.form-control:focus {
	border-color: #1e73be;
	box-shadow: none;
}

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

.incrementQty,.decrementQty {
    background-color: #cccccc;
    cursor: pointer;
}
.incrementQty:hover, .decrementQty:hover {
    background-color: #0a53be;
    color: #fff;
}

#addAllToCart {
    float:right;
}

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

.modal-dialog {
	margin-top: 115px;
}

.modal-content {
	border-radius: 0;
	box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3);
}

.modal-header {
	background: #fff;
	background: linear-gradient(183deg, rgba(255,255,255,1) 50%, rgba(237,242,245,1) 100%);
	border-bottom: 0;
}

.modal-header button {
	display: inline-block;
	opacity: 1;
	width: 26px;
	height: 26px;
	line-height: 24px;
	overflow: hidden;
	border: 2px solid #1e73be;
	border-radius: 13px;
	background-color: #fff;
	color: #1e73be;
	text-shadow: none;
}

.modal-footer {
	background: #fff;
	background: linear-gradient(3deg, rgba(255,255,255,1) 50%, rgba(237,242,245,1) 100%);
	border-top: 0;
}

.tooltip {
	white-space: nowrap;
}

.alert {
	position: relative;
}

.alert-success {
	margin-top: 30px;
	margin-bottom: -20px;
	border-radius: 0;
	border-color: #3c763d;
	border-width: 2px;
	background-color: #fcfdff;
	font-size: 1.1em;
	font-weight: 600;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08);
}

.alert-danger {
	margin-top: 30px;
	margin-bottom: -20px;
	border-radius: 0;
	border-color: #dd3330;
	border-width: 2px;
	background-color: #fcfdff;
	font-size: 1.1em;
	font-weight: 600;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08);
}

.alert-dismissable .close {
	position: absolute;
	top: 0px;
	right: 0px;
	display: block;
	padding: 0 5px 2px 7px;
	background-color: #dd3330;
	color: #fff;
	opacity: 1;
}

.alert-success.alert-dismissable .close {
	background-color: #3c763d;
}

.alert-warning {
	border-color: #ebdcbf;
}

.form-control, .btn, .alert {
	border-radius: 2px;
}

.form-control.input-lg, .btn-lg {
	height: 40px;
	padding: 6px 12px;
	line-height: 40px;
	font-size: 17px;
}

.btn {
	position: relative;
}

.btn-lg {
	line-height: 28px;
}

#contents .btn-block {
	padding-left: 30px;
	font-weight: 300;
}

.btn-block .fa, .btn-block .far {
	position: absolute;
	left: 12px;
	top: 10px;
}

.stretched-link::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	content: "";
}

.nav-pills>li>a {
	background-color: #fff;
	color: #16222a;
	border-radius: 2px;
	margin-right: 8px;
}

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
	background-color: #63bdf6;
}

.table {
	margin-bottom: 0;
}

.table>thead {
	background-color: #2f4a9c;
	color: #fff;
	border-bottom: 0;
}

.table>thead>tr>th {
	font-weight: 600;
	padding: 4px 8px;
}

.table>thead>tr>th:not(:last-child) {
	border-right: 0;
}

.table>thead>tr>th:not(:first-child) {
	border-left: 0;
}

.table.vert-middle tbody td {
	vertical-align: middle;
}

.lt-gray-grad {
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e1e6e9+0,edf2f5+100 */
	background: #e1e6e9; /* Old browsers */
	background: -moz-linear-gradient(top,  #e1e6e9 0%, #edf2f5 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #e1e6e9 0%,#edf2f5 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #e1e6e9 0%,#edf2f5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e6e9', endColorstr='#edf2f5',GradientType=0 ); /* IE6-9 */
}

#product-image, .product-image {
	width: 100%;
	background-color: #fff;
	padding: 15px;
	border: 1px solid #afb2b5;
	overflow: hidden;
}

#product-image img {
	width: 100%;
}

#product-disclaim {
	font-size: 1rem;
}

#product-images {
	margin-top: 15px;
	margin-bottom: 30px;
}

.admin-product-image {
	width: 50px;
	background-color: #fff;
	padding: 2px;
	border: 1px solid #afb2b577;
	overflow: hidden;
}

.alt-image {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	background-color: #fff;
	border: 1px solid #afb2b5;
	margin-right: 15px;
	padding: 5px;
	cursor: pointer;
}

.alt-image.active:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 100%;
	height: 3px;
	background-color: #2f4a9c;
}

.alt-image img {
	width: 100%;
}

.cat-prod-row {
	position: relative;
}

.cat-prod-block {
	position: relative;
	text-align: center;
	padding: 0 30px;
}

.cat-prod-row .cat-prod-block.top-border {
	padding-top: 30px;
	margin-top: 20px;
}

.cat-prod-row .cat-prod-block.top-border:before {
	content: "";
	position: absolute;
	top: 0;
	left: 50px;
	width: calc(100% - 100px);
	height: 0;
	border-top: 1px dotted #afb2b5;
}

.cat-prod-block a {
	display: block;
}

.cat-prod-block a img {
	aspect-ratio : 1 / 1;
}

.sidebar-header {
	background-color: #1e73be;
	color: #fff;
	padding: 3px 10px;
}

.sidebar-container {
	background-color: #fff;
	border: 1px solid #dce1e7;
	border-top-width: 0;
	padding: 10px;
}

.sidebar-container ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.sidebar-container ul li a {
	display: block;
	color: #2f4a9c;
	text-decoration: underline;
	padding: 10px 10px;
}

.pagination {
	margin-bottom: 0;
}

span.cust-price {
    font-weight: bold;
}

/*
=============================================
FOOTER
=============================================
*/

#footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#footer ul li a {
	color: #fff;
	line-height: 32px;
	text-decoration: none;
	cursor: pointer;
}

#social {
	font-size: 2em;
}

#social i {
	margin-right: 10px;
}

/*
=============================================
SPINNER
=============================================
*/

#spinner {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255,255,255,0.7);
	z-index: 3049;
}

.sk-fading-circle {
  margin: 200px auto;
  width: 50px;
  height: 50px;
  position: relative;
}

.sk-fading-circle:before {
	content: "";
	position: absolute;
	left: -30px;
	top: -30px;
	width: calc(100% + 60px);
	height: calc(100% + 60px);
	background-color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 10px;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}

.loader {
  margin: 85px auto;
  font-size: 10px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #333, 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.5), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.7), 1.8em -1.8em 0 0em #333, 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.5), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.7), 2.5em 0em 0 0em #333, 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.5), 2.5em 0em 0 0em rgba(33, 33, 33, 0.7), 1.75em 1.75em 0 0em #333, 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.5), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.7), 0em 2.5em 0 0em #333, -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.5), 0em 2.5em 0 0em rgba(33, 33, 33, 0.7), -1.8em 1.8em 0 0em #333, -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.5), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.7), -2.6em 0em 0 0em #333, -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.5), -2.6em 0em 0 0em rgba(33, 33, 33, 0.7), -1.8em -1.8em 0 0em #333;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #333, 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.5), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.7), 1.8em -1.8em 0 0em #333, 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.5), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.7), 2.5em 0em 0 0em #333, 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.5), 2.5em 0em 0 0em rgba(33, 33, 33, 0.7), 1.75em 1.75em 0 0em #333, 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.5), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.7), 0em 2.5em 0 0em #333, -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.2), -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.5), 0em 2.5em 0 0em rgba(33, 33, 33, 0.7), -1.8em 1.8em 0 0em #333, -2.6em 0em 0 0em rgba(33, 33, 33, 0.2), -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.5), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.7), -2.6em 0em 0 0em #333, -1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(33, 33, 33, 0.2), 1.8em -1.8em 0 0em rgba(33, 33, 33, 0.2), 2.5em 0em 0 0em rgba(33, 33, 33, 0.2), 1.75em 1.75em 0 0em rgba(33, 33, 33, 0.2), 0em 2.5em 0 0em rgba(33, 33, 33, 0.2), -1.8em 1.8em 0 0em rgba(33, 33, 33, 0.5), -2.6em 0em 0 0em rgba(33, 33, 33, 0.7), -1.8em -1.8em 0 0em #333;
  }
}


/*
=============================================
RESPONSIVE
=============================================
*/

.found-md, .found-sm, .found-xs {
	display: none;
}

@media (min-width: 1500px) {
	.container {
		width: 1470px;
	}
}

@media (max-width: 1199px) {
	
	.missing-md {
		display: none !important;
	}
	.found-md {
		display: initial;
	}
	#menu  {
		font-size: 11px;;
	}
}

@media (max-width: 991px) {
	
	.missing-sm {
		display: none !important;
	}
	.found-sm {
		display: initial;
	}
	
	#header .input-group {
		margin-top: 14px;
	}
	
	#header #job-accounts {
		margin-left: 170px;
		margin-top: 14px;
		width: calc(100% - 170px);
	}
	
	#header #logo {
		top: -4px;
	}
	
	.cat-prod-row .cat-prod-block {
		padding-top: 30px;
		margin-top: 20px;
	}
	
	.cat-prod-row .cat-prod-block.top-border:before {
		border-top-width: 0;
	}
	
}

@media (max-width: 767px) {
	
	.missing-xs {
		display: none !important;
	}
	.found-xs {
		display: initial;
	}
	
	#search-term {
		width: 100%;
	}
	
}

/*
	CSS for smaller screen sizes
*/
@media screen and (max-width: 451px) {
	.home-banner-container h1 {
		font-size: 36px !important;
	}
	.login-prompt {
		padding: 0 27px !important;
	}
	#login-button {
		display: none;
	}
	#category-modal a {
		line-height: 23px;
	}

	.category-products-container {
		grid-template-columns: 1fr 1fr !important;
	}
	#sidebar {
		width: 100% !important;
		left: -100% !important;
	}
	.cart-table .cart-qty {
		min-width: 80px;
	}
	.cart-table .cart-img {
		display: none;
	}
	.convert-quote-btn {
		float: none !important;
		display: flex;
		justify-content: center;
	}
	
	.hide-table-col { /* this will also help change colspan */
		max-height: 0px !important;
		max-width: 0px !important;
		padding: 0px !important;
		overflow: hidden !important;
		white-space: nowrap !important;
		text-overflow: clip;
	}
	.quote-table-container, .order-table-container, .invoice-table-container{
		font-size: 12px !important;
	}
}
@media screen and (max-width: 991px) {
	#header #login-button {
		position: absolute;
		margin-top: 12px;
		background-color: #fff598;
		border-radius: 4px;
		right: 0px;
		margin-right: 10px;
		width: fit-content;
	}
	#header-links {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		position: relative;
        top: 12px;
	}
	
	#mobile-menu > button {
		display: block !important;
		position: absolute;
		top: 9px;
		left: 160px;
		background-color: transparent;
		border: 0px;
	}
	#mobile-menu > a {
		display: none;
	}
	#category-modal li:hover {
		background-color: aliceblue;
	}

	#user-menu-btn { /* replace with modal version */ 
		display: none;
	}
	#user-modal-button {
		display: block !important;
		background-color: transparent;
		border: none;
	}
	#user-modal li {
		border-bottom:1px solid #DDD;
		text-align: left !important;
	}
	#user-modal div, #user-modal a {
		color:#1e73be; 
		width:100%;
	}	
	.home-footer {
		display: flex;
		flex-wrap: wrap;
	}
	.home-footer > * {
		padding-bottom: 10px;
	}
	#sidebar {
		position: fixed;
		z-index: 1000;
		width: 50%;
		height: 100%;
		left: -50%;
		top: 0px;
		transition: transform 1s;
	}
	#sidebar-button {
		display: block !important;
		border: 1px solid white;
		border-radius: 50%;
		z-index: 100000;
		transition: transform 1s;
	}
	.sidebar-container {
		height:inherit;
		overflow: scroll;
	}
	.category-products-container {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	.category-products-container::before {
		display:none;
	}
	.quote-table-container, .order-table-container, .invoice-table-container{
		display: flex;
		flex-wrap: wrap;
	}
	.mobile-table-scroll {
		margin-top: 10px;
		overflow-x: scroll;
	}
	.desktop-filter-form {
		display: none !important;
	}
	#filter-modal-button {
		display: flex !important;
	}
	.form-button-container {
		display: flex !important;
		gap: 5px;
		justify-content: center;
	}
}
@media screen and (max-width: 1499px) {
	.container .row .col-xs-12 img{
		float: none !important;
		max-width: 100%;
	}
	.container .row .col-xs-12 {
		display: flex;
		justify-content: center;
		align-content: center;
	}
	.home-banner-container {
		padding-left: 0px !important;
		margin: 5%;
		max-width: 100%;
		text-align: center;
		min-height: 100%;
	}
	.home-banner-container .text-center {
		margin-top: 0px !important;
	}
	.home-banner-container .button-success {
		left: 0px !important;
		padding: 0px 20px 10px 20px !important;
		height:76px;
		margin-bottom: 10px;
	}
}