/* CSS: John Germany  2009-2019  Main CSS Code */
body {font-size: 14px; height: auto; width: 100%; margin: auto; background-color: var(--color-background); color: var(--color-primary-text); text-justify: none; overflow-x:hidden; padding: 0px; margin: 0px;}
h1 {margin: 2px 0px; font-weight: bold; color: var(--color-h1); font-size: 2.00rem; } 
h2 {margin: 15px 0px; color: var(--color-h2); font-size: 1.60rem; text-align: center; }
h3 {margin: 5px 0px; color: var(--color-h3); }
h4 {margin: 5px 0px; color: var(--color-heading);  }
h5 {margin: 5px 0px; color: var(--color-heading); }
h6 {margin: 5px 0px; color: var(--color-heading); }
img {height: auto; width: 100%;}
li {list-style-type: none; line-height: 150%;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid var(--color-hr); margin: 1em 0px; padding: 0px; }
p {line-height: 150%; color: var(--color-text);}
textarea {width: auto;}
input {margin: auto; width: auto; display: inline;}
fieldset {border: 3px solid var(--color-border-light);}
ol.square li {list-style-type: square; color: var(--color-comp-dark);}
ul {padding: 0px; margin: 0px; text-align: left;}
a {color: var(--color-link); }
a:hover {color: var(--color-link-hover); }
legend {text-decoration: underline; text-align: left; font-weight: normal; font-size: 1.2rem; margin-bottom: 10px; color: var(--color-legend);}
.table td {padding: 5px; }


/* Outside of the ID:site_page */
#site_navbar_message {color: var(--color-message-dark); background-color: var(--color-message-light); text-align: center; padding: 1px; font-size: .85rem;}
#site_navbar {color: var(--color-primary-lightest); background-color: var(--color-primary); padding: 10px; }
.btn-sitenav {color: var(--color-primary-link);  background-color: inherit;}
.btn-sitenav:hover {color: var(--color-primary-link-hover); background-color: var(--color-primary-link);}
.site_navbar a {color: var(--color-primary-link);  background-color: inherit;}
.site_navbar a:hover {color: var(--color-primary-link-hover); background-color: var(--color-primary-link);}
.companybrand {border-radius: var(--border-radius); background-color: var(--color-primary-light); padding:5px; }
.companybrand:hover {color: var(--color-primary-dark);}

#site_navbar_menu {display: none;}
#site_navbar_login {margin: auto; margin-top: 10px; padding-right: 15px; }
#site_search {padding: 15px;}
#searchType {display: none;}
#site_logo {display: none;}
#site_logo img {margin: 5%; }
.site-logo {margin: 2%; width: auto; max-width: 125px; height: auto; max-height: 90px; display: block;}

/* Inside site_page */
#site_appbar {display: none;}
#site_appbar_small {padding: 3px; padding-left: 10px; }
#site_userbar {background-color: var(--color-primary-lightest); border-bottom: 1px solid var(--color-border-light); padding: 5px; }
#site_page {margin: 0px; padding: 3px 10px;}
#site_page p {text-align:justify;}
.site_msg {color: var(--color-message-dark); background-color: var(--color-message-light); text-align: center; padding: 1px; font-size: .85rem;}
#site_footer {margin-top: 0px; font-size: .95rem;}
#site_footer .card-header {background-color: var(--color-primary-light); color: white;}
#site_footer .card-body {background-color: var(--color-primary-lightest);}
#site_footer_bottom {background-color: var(--color-primary-lightest); font-size: .95em; padding: 5px;}
#site_footer_copyright {font-size: .85em; text-align: center; }
#site_footer_msg {padding: 5px;}
#site_bottom_msg {padding: 5px; text-align: center; background-color: var(--color-shade-light); font-size: 1.2em; color: var(--color-primary-dark); }

@media screen and (max-width: 575.98px) {
	h1 {font-size: 2.00em; }
	h2 {font-size: 1.85em; }
	#site_navbar_message {font-size: .8rem; padding: 2px;}
}

@media screen and (min-width: 576px) {
	#site_navbar_menu {display: block; text-align: right; }
	#site_navbar_brand {text-align: left; }
	#site_navbar_login {text-align: right;  margin-top: 8px; padding-right: 15px; }
	#searchType {display: block; }
}

@media screen and (min-width: 768px) {
	#site_navbar_menu {display: block; text-align: center; }
	#site_navbar_login {margin-top: auto;}
	#site_logo {display: block;}
	#site_appbar_small {display: none; }
	#site_appbar {display: block; margin-bottom: 1px; background-color: var(--color-primary-lightest); border-top: 0px solid grey; border-radius: var(--border-radius); padding: 3px; padding-left: 10px; padding-bottom: 3px; }
}

/* Site Application Bar  and Site Menus */
#featured {padding: 10px; background: linear-gradient(to top, #ffff66 -16%, #ffffff 89%);}
#featured a {margin: 10px; }
#featured a:hover {border: none; }
.h2-menu {margin: 6px 0px 3px 0px; padding: 10px; color: var(--color-primary-darkest); background-color: var(--color-primary-lightest); border-radius: var(--border-radius);}
.h2-menu h2 {font-weight: bold; margin: 0px;}
.h2-menu h3 {font-weight: bold; margin: 5px 0px 5px 6px; font-size: .9em;  }
.h2-menu h6 {color: var(--color-primary-text);}
.quick-link {border-top: 5px solid var(--color-offset-lightest); background-color: var(--color-offset-lighter); margin: 0px; padding: 8px; }
.quick-link a {margin-right: 5px; font-size: 1.1rem; color: var(--color-offset-dark); margin: 5px 8px; padding: 4px; text-decoration: none; }
.quick-link a:hover {color: var(--color-primary-link); background-color: var(--color-primary-link-hover); border-radius: var(--border-radius); }
.quick-link-icon {font-size: .90rem; color: var(--color-primary-darkest);}
.helpBody h3 {font-weight: bold; color: var(--color-primary-dark);}
.helpBody h4 {font-weight: bold; color: var(--color-primary-text); }
.app-image {width: auto; max-width: 85px; height: auto; max-height: 85px; display: block;}
.app-actionbar {margin-top: 2px; }
.app-title {}
.app-desc {font-style: italic; font-size: .9em;}
.app-breadcrumb {font-size: .8rem;}
.tipofday {font-style: italic; color: var(--color-primary-text); font-size: .8em; }
.page-menu {width:100%; font-size: .9rem; margin: auto; text-align: center;}
.page-menu a {margin-right: 6px; padding: 5px; }
.page-menu a:hover {color: orange; text-decoration: none; }
.menu-bar {background-color: var(--color-offset-lighter); margin: 0px; }
.menu-bar a {font-size: 1.1rem; color: var(--color-offset-dark); margin: 5px 8px; padding: 4px; text-decoration: none; }
.menu-bar a:hover {color: var(--color-primary-link); background-color: var(--color-primary-link-hover); border-radius: var(--border-radius); }

/* 2018 IMAGES */
.carousel-image {display: inline; width: 150px; }
.content-image-div {border: 1px solid white; width: auto; }
.content-image {float: left; padding: 3px; margin-right: 20px; margin-bottom: 10px; width: 200px; border: 1px solid white; }
.content-image:hover {border: 1px solid lightgrey; }
.vendor-image {float: left; margin-right: 10px; width: 200px; }
.general-image {display: block; width: auto; height: auto; }

/* .product-header {background-color: var(--color-card-header); } */
.product-image-div {border: 1px solid white; width: auto; }
.product-image {display: block; width: auto; height: auto; max-width: 150px; max-height: 150px;  }
.product-image-small {display: block; width: auto; max-width: 100px; height: 100px; }
.department {background-color: var(--color-primary-lightest); }
.department-body {height: auto ; }
.department-image {display: block; margin: auto; width: 100px; height: 100px; }
.department-category {height: 200px; overflow: auto;  }
.image50 {width: auto; max-width: 50px; height: auto; max-height: 50px; }
.image100 {max-width: 100px; max-height: 100px; }
.image150 {max-width: 150px; max-height: 150px; }
.image200 {max-width: 200px; max-height: 200px; }
.missing-img {border: 1px solid #ccc; margin: 2px; padding: 3px; text-align: center; font-size: .90rem; }
.product-image-detail-div {border: 0px solid lightgrey; width: auto; height: auto; padding: 15px;  }
.product-image-detail-lg {display: block; width: 25%; height: auto; }
.product-image-detail-sm {display: block; width: auto; height: auto; max-width: 100px; max-height: 100px; margin: auto; } 
.product-image-fixed-sm {}
.image-sm {display: block; width: auto; height: auto; max-width: 100px; max-height: 100px; margin: auto; }
.carousel-indicators li {color: blue;}
.carousel-indicators .active {background-color: var(--color-primary-light);}
.carousel-item {width: 98%; overflow: hidden; }
.carousel-control-prev {height: auto; background-color: var(--color-border-light); border: 1px solid #fafafa; margin: 0px; padding:0px; width:20px; }
.carousel-control-next {height: auto; background-color: var(--color-border-light); border: 1px solid #fafafa; margin: 0px; padding:0px; width:20px; }
.carousel-control-prev a {background-color: var(--color-primary-light); color: blue; }
.carousel-control-next a {background-color: var(--color-primary-light); color: blue; }
.carousel-control-prev-icon {padding: 5px; color: black; background-color: blue; }
.carousel-control-next-icon {padding: 5px; color: black; background-color: blue; }
.breadcrumb {background-color: transparent; }

/* BS4 CARDS */
.card {padding: 0px; }
.card-footer {background-color: var(--color-offset-pale);}
.card:hover {border: 1px solid var(--color-offset-lighter); box-shadow: 2px 5px 7px var(--color-offset-lighter);}
.card-nohover {border: 1px solid var(--color-offset-lightest); }
.card-nohover:hover {border: 1px solid lightgrey;}
.card-expand {padding: 1px 4px; }
.card-title {color: var(--color-offset-darker);}
.wordwrap {word-break: keep-all;}
.wordtags {word-spacing: 20px;}
.nowrap {overflow: hidden;text-overflow: ellipsis; word-break: keep-all;
}

/* 2019 Modal Changes */
/* .modal-open {padding-right: 17px !important; }   /* DO NOT DELETE. Keeps body from shifting right on a modal open. */
.modal-header {color: var(--color-primary-dark); background-color: var(--color-primary-lightest);}
.modal-form {}
.modal-title {font-size: .90rem; font-weight: bold;}
.modal-body {}
.modal-footer {}
.modal-link a {color: var(--color-link);}
.modal-link a:hover {background-color: orange;}


/* 2019 BS4 Button Changes */
.btn-smallest {font-size: .75rem; }
/* .btn-primary {color: var(--color-comp-darker); 
			  background-color: var(--color-comp-light); 
			  border-color: var(--color-comp-light);} */
/* .btn-primary:hover {color: var(--color-comp-darker); background-color: var(--color-comp); border-color: var(--color-comp); } */

/* 2018 _grid, grid, datagrid - Inner page classes mainly for Admin Manager sections */
.gridDiv {background-color: var(--color-shade-light); border: 1px solid var(--color-border-medium);}
.gridHeader {background-color: var(--color-offset-lightest); margin: 0px; padding: 5px; border-bottom: 1px solid darkgreen;}
.gridMenu {border: 0px solid var(--color-border-medium); padding-bottom: 5px; background-color: var(--color-primary-lightest); padding: 5px; }
.gridMenu a {margin-right: 15px;}
.gridMenu a:hover {}
.gridFooter {background-color: var(--color-primary-light); padding: 5px; margin:0px; }
.gridTitle {background-color: var(--color-offset); padding: 3px; margin:0px; padding-bottom: 5px; }
.dataGridBody {font-size: .90rem;}
.dropdown-datagrid {display: inline;}
.dropdown-datagrid button {color: blue; padding: 5px;}
.column-edit {font-size:.75rem; font-weight:normal; color:green;}
.product-image-div-datagrid {float: left; border: 0px solid var(--color-border-light); width: auto; }
.product-image-datagrid {font-size: .7em; display: block; width: auto; height: auto; max-width: 100px; max-height: 100px;}

/* Update Pages */
#_update {font-size: .9em; }
.updateDiv {border-radius: var(--border-radius); background-color: white; border: 1px solid var(--color-border-light);}
.updateHeader {padding: 5px; background-color: var(--color-offset-lightest); }
.updateMenu {background-color: var(--color-shade-light); border-radius: var(--border-radius); padding-bottom: 2px; border-bottom: 1px solid black; margin-bottom: 3px;}
.updateMenu a:hover {background-color: var(--color-link-hover);}
.updateMenu .btn {}
.updateBody {}
.updateFooter {padding: 5px;}

/* Site Products */
.retailprice  {font-weight: bold; color: var(--color-retail-price); padding: 3px;}
.sellingprice {font-weight: bold; color: var(--color-selling-price); padding: 3px;}
.specialprice {font-weight: bold; color: var(--color-special-price); padding: 3px;}
#_products {margin: 10px; }
.product-new {color: red; }
.product-bullets {font-weight: bold; }

/* Site pagination 2019 */
.pagination {background-color: var(--color-pagination-bg); color: black; text-justify: none; margin-top: 0px; padding: 4px; border-radius: 0px 0px 5px 5px;  font-size: .9em; }
.pagination a {color: blue; margin: 0px; padding: 5px; border-radius: 2px; }
.pagination a:hover {color: black; background-color: orange; text-decoration: none; }
.pagination p {display: inline; }

.sitebox {margin:0px; padding: 10px; border: 1px lightgrey solid; width: 50%; font-size: .8rem; }
.sitebox h5 {font-size: .95rem; text-align: center; }
@media (min-width: 576px) {
    .sitebox {width: 33%; font-size: .9rem; }
}
@media (min-width: 992px) {
    .sitebox {width: 16.66%; font-size: 1.0rem; }
}

.content-card h2 {font-weight: normal; font-size: 1.30rem; color: var(--color-primary-darkest);}
.content-card h3 {font-weight: normal; font-size: 1.0rem; color: var(--color-text);}

/* concerning site telephones and addresses */
.address {text-align: left; display: block; font-style: italic;}
.telephone {text-align: center; font-style: italic; font-weight: 400; font-size: .9em ;}

/* CSS for ajax divs */
.ajax-message {display: inline; color: var(--color-ajax); font-size: .9em; }

/* my site font and appearance settings */
a.nolink {text-decoration: none; }
.float-clear {clear: both;}
.float-left {float: left;}
.float-right {float: right;}
.pcenter {text-align: center;}
.pleft {text-align: left;}
.pright {text-align: right;}
.pnumeric {text-align: right;}
.pbold {font-weight: bold;}
.pmuted {font-weight: 300; color: grey;}
.pmuted:hover {text-decoration: none; font-weight: bold;}
.phighlight {padding: 5px; margin: 5px; color: black; background-color: var(--color-hightlight); border-bottom: 1px solid #f1f1f1;}
.pnohighlight {background-color: white;}
.border {border: 1px solid grey}
.pnormal {font-weight: normal; }
.noradius {border-radius: 0px; }

/* Font  Sizes */
.psmallest {font-size: .8em;}
.psmaller {font-size: .85em;}
.psmall {font-size: .95em;}
.plittle {font-size: .95em;}
.pbig {font-size: 1.05em;}
.plarge {font-size: 1.1em;}
.plarger {font-size: 1.2em;}
.plargest {font-size: 1.3em;}
.p15x {font-size: 1.5em;}
.p2x {font-size: 2.0em;}
.p3x {font-size: 3.0em;}
.pstrike { text-decoration: line-through;}
.pitalic {font-style: italic; }
.pindent {margin-left: 15px; }
.readmore {font-style: italic; font-size: .9em; color: red; }
.nohover {border: none; }
.nohover a {border: none; background-color: transparent; }
.overflow-hidden {overflow: hidden;}
.numeric {text-align: right; }
.showborder {border: 1px solid blue;}
.button-box {padding: 5px; border: 1px solid lightgrey; margin-left: 10px; }
.menu-linespacing {line-height: 1.0rem;}
.linespacing-p7 {line-height: .70rem; }
.bullet-square li {list-style: square;}
.text-justify-none {text-justify: none;} 
.text-justify {text-align:justify;}
.heightauto {height: auto;}
.widthauto {width: auto;}
.border-radius-none {border-radius: 0px; }

/* 2019 COLORS */
.color-primary {color: var(--color-primary);}
.color-offset {color: var(--color-offset);}
.color-comp {color: var(--color-comp);}
.color-company {color: var(--color-primary);}
.color-motto {color: var(--color-h2);}
.color-white {color: var(--color-white);}
.color-black {color: var(--color-black);}
.color-orange {color: var(--color-orange);}
.color-red {color: var(--color-red);}
.color-green {color: var(--color-green);}
.color-blue {color: var(--color-blue);}
.color-gray {color: var(--color-gray);}
.color-alert {color: var(--color-alert);}
.color-standout {font-weight: bold; background-color: var(--color-alert); padding: 3px;}
.bgcolor-comp {background-color: var(--color-comp-lightest);}
.bgcolor-blue {background-color: blue; }
.bgcolor-green {background-color: green; }
.bgcolor-orange {background-color: orange; }
.bgcolor-red {background-color: red; }
.bgcolor-white {background-color: white; }
.bgcolor-darkgreen {background-color: darkgreen; }
.bgcolor-lightest {background-color: var(--color-primary-lightest);}
.bgcolor-lighter {background-color: var(--color-offset-lightest);}
.bgcolor-light {background-color: var(--color-primary-light);}
.bgcolor-dark {background-color: var(--color-primary-dark);}
.bgcolor-darker {background-color: var(--color-primary-darker);}
.bgcolor-darkest {background-color: var(--color-primary-darkest);}
.bgcolor-gray {background-color: gray;}
.bgcolor-grey {background-color: grey;}
.bgcolor-inherit {background-color: inherit;} /* Force to inherit background color */

/* BS4 Dropdown Modifiers */
.dropdown-menu a {color: black; background-color: white; }
.dropdown-menu a:hover {background-color: var(--color-dropdown-bar); color: white; }
.dropdown-divider {color: gray; font-weight: bold; }
.dropdown-item-header {margin: 0px; padding: 0px; font-weight: bold; font-size: .85rem; text-decoration: underline; }

/* 2018 IMAGES */
.thumbnail {width: 100px;}
.image-resize {max-width: 100%; height: auto; width: auto;} /* IE8 */
.image-1x {width: 60px;}
.image-2x {width: 120px;}
.image-3x {width: 180px;}
.image-icon32 {width: 32px;}
.image-icon64 {width: 64px;}
.image-header {width: 80px;}

/* 2018 ICONS */
.icon-color {color: inherit;}
.icon1x {font-size: 1rem; }
.icon2x {font-size: 2rem; }
.icon3x {font-size: 3rem; }

/* HORINZONTAL TABS */
div.tab {overflow: hidden; border: 0px solid var(--color-border-medium); background-color: var(--color-offset-lighter); }
div.tab button {background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 6px 12px; transition: 0.3s; }
div.tab button:hover { background-color: var(--color-link); }
div.tab button.active { background-color: var(--color-tab-active); }
.tabcontent { display: none; padding: 12px; }


/* SITE FORMS  */
#form-actions {margin-top: 10px; }
.form-row {margin-left: 10px; }
.form-inline {margin: 0px; padding: 0px; display: inline; }
.form-label {margin-left: 15px; }
.form-input {}
.form-button {}
.form-control {font-size: 1.0rem; }
.form-control-small {font-size: .9rem; }
.form-control .text-left{text-align: left;}
.search-within {margin-top: -5px;}
.form-input-group {border: 0px solid var(--color-border-medium); padding:10px; background-color: var(--color-offset-ligshtest); }
.form-small {font-size: .8rem; padding: 2px; }
.form-save-bar {padding: 5px; margin: 10px 0px;}

/* Cart */
.cart-row {margin: auto;}
.cart-header-box  {border: 1px solid var(--color-primary-light); padding: 10px; }

/* Forms */
.addBox {background-color: var(--color-primary-lighter); margin: 5px; padding: 10px; border-radius: 5px; font-size: .9rem;  }
	
/* 2018 SITE SIDE NAV PANEL */
#site_sidenavmenu {margin:0px; display: inline;}
#mySidenav a {color: white;}
.sidenav { position: fixed;
	z-index: 9999;
    left: 0;
    top: 25;
	height: auto; 
	width: 0;
	background-color: var(--color-primary-darker);
	color: var(--color-primary-lighter);
	overflow-x: hidden;
	overflow-y: hidden;
	transition: .4s;
	padding: 0px; 
}
.sidenav a {text-align: left; color: var(--color-primary-darkest); padding: 10px; text-decoration:none; display:block; transition:0.3s; line-height:100%;}
.sidenav a:hover, .offcanvas a:focus{background-color:var(--color-link-hover);}
.sidemenu hr {color:var(--color-primary-lightest);}

/* PRODUCT CARDS - CELLS - BLOCKS and ROWS */
.col-image {height: auto ; max-height: 150px; width: auto; max-width: 90%;  overflow: hidden; margin: auto; }
.product-row {margin: auto;}
.product-card {text-align: center; display: block; height: auto; }
.product-cell {border: 1px solid var(--color-primary-light); border-radius: 2px; margin-top: 5px; padding: 5px; width: 20%; height: auto; text-align: center; }
.product-cell:hover {background-color: var(--color-primary-lightest); border: 1px solid lightgrey; box-shadow: 2px 5px 7px #888888;}
.product-cell-header {text-align: center; padding: 3px; }
.product-cell-header {height: 80px; overflow: hidden; }
.product-cell-image {height: 175px; width: 175px; border: 0px solid black; margin: auto; }
.product-cell-footer {height: auto;}
.product-description {color: var(--color-primary-darkest); font-size: .95rem; font-weight: normal; }
.price-box {height: 45%; padding: 2px; text-align: center; margin: auto; }
.add2cart-box {height: 45%; padding: 2px;}
.cell-image-link {height: 100%; font-weight: bold; }
.cell-image {border: 0px solid lightgrey; max-height: 100%; max-width: 100%;  overflow: hidden; }

@media screen and (max-width: 992px) {
    .product-cell  {width: 32%;}
}
@media screen and (max-width: 768px) {
    .product-cell  {width: 48%;}
}
@media screen and (max-width: 576px) {
    .product-cell  {margin: auto; width: 98%; font-size: 1.20em; }
}
/* site product cells */
.card-image {display: block; margin-bottom: 2px; height: 98%; width: auto; overflow: hidden;}
.block-image-div {width: 25%}
.block-image {float: left; height: 125px; max-width: 150px; margin-right: 20px; margin-bottom: 5px;  overflow: hidden;}
.block-header {}
.block-body {}
.block-footer {}
.placeholder {
  background-color: #e6e6e6;
  padding: 80px 10px;
  text-align: center;
  color: rgba(255, 255, 255, .4);
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: 10px; 
}
/* Site Documentation */
.siteDocumentation {padding: 15px; }
.siteDocumentation h4 {color: var(--color-comp); }
.docTopic {text-transform: capitalize;}
.docQuestion {text-transform: capitalize; color: var(--color-primary); font-weight: bold; margin: 15px; font-size: 1.2rem; }
.docAnswer {margin: 2px 25px; font-weight: 500; }