html {
	overflow-x: hidden;
	overflow-y: auto;
}

body {
	background-color: #FFFFFF; /*FFF98B FFFBC3;*/
	color: #202020;
	font-family: "Open Sans", Arial, sans-serif;
	font-size: 14px;
	line-height: 22px;
	margin: 0;
}

@media (min-width: 768px) {
  	body {
		padding-top: 51px;
	}
}

@media (max-width: 767px) {
  	body {
		padding-top: 60px;
	}
}


/* show by JS to leave hidden when JS is off */
.show-js {
	display: none;
}

.no-wrap {
	white-space: nowrap;
}

.navbar {
	margin-bottom: 0px;
	min-height: 50px; 
}

.navbar-default {
	background-color: #FFD700;
	background: linear-gradient(90deg, #FBEA04, #FFD700);

}

/* Hide default border to remove 1px line. */
.navbar-fixed-top {
	border: 0px;
	border-bottom: 1px solid #eee;
}

/* brand logo padding */
.navbar-brand {
	padding-top: 0px;
	padding-bottom: 0px;
}

/* height of drop-down items */
.dropdown-menu li a  {
	line-height: 50px;
	height: 50px;
	padding-top: 0;
}

/* disable collapse on xs small display */
.navbar-collapse.collapse {
	display: block!important;
}

.navbar-nav>li, .navbar-nav {
	float: left !important;
}

.navbar-nav.navbar-right:last-child {
	margin-right: -15px !important;
}

.navbar-right {
	float: right !important;
}

/* links (buttons) on small display, links on desktop, used on <li> tags, also with navbar-toggle */
@media (max-width: 767px)  {
	.navbar > .container .navbar-brand,
  	.navbar > .container-fluid .navbar-brand {
		margin-top: 5px;
	    margin-left: -30px;
	}

	.navbar-button {
		position: relative;
		float: left;
		/*padding: 9px 10px;*/
		margin-top: 2px;
		margin-right: 5px;  /* decreased from 15px */
		margin-bottom: 2px;
		background-color: transparent;
		background-image: none;
		border: 1px solid transparent;
		border-radius: 4px; 
		border-color: #eee;
	} 

	.collapse-xs {
  		display: none;
		visibility: hidden;
	} 

	.nav > li > a {
		padding-left: 7px !important;
		padding-right: 7px !important;
	}

	/* I have problem style hover button without affecting nested tags (badge, dropdown)
	.navbar-button :hover {
		border-color: #111 !important; 
		border-width: 2px !important;
		background-color: #eee !important;
	}
	.navbar-button .open :hover {
		//border-color: transparent !important; 
		background-color: #eee !important;
	}
	*/
} 

/* change "hand" cursor even for A link */
.navbar-button {
	cursor: pointer;
}

/* reset dropmenu for xs display to defaults */
@media (max-width: 767px) {
	.dropdown-menu-xs {
	    position: absolute !important;
    	float: left; !important;
    	/*width: auto;
	    margin-top: 0;*/
    	background-color: #fff !important;
  		border: 1px solid #ccc !important;
  		border: 1px solid rgba(0, 0, 0, .15);
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
		        box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
    }
  	.navbar-nav .open .dropdown-menu-xs > li > a {
    	line-height: 40px; /*this affect vert.centering of li item in menu*/
  	}
  	.navbar-nav .open .dropdown-menu-xs > li > a:hover,
  	.navbar-nav .open .dropdown-menu-xs > li > a:focus {
		background-color: #eee !important;
    	background-image: none !important;
  	} 

	.navbar-left {
		float: left !important;
	}
  	.navbar-right {
    	float: right !important;
    	margin-right: -15px;
  	}
  	.navbar-right ~ .navbar-right {
    	margin-right: 0;
  	}
	.navbar-header {
    	float: left;
	}

 }

/* when buttons are being wrapped then add margin make distance between each other */
.actions .btn-secondary,
.actions .btn-primary {
	margin-bottom: 2px;
}

/* Hide for mobile, show later */
.sidebar {
	display: none;
	background-color: #255891;
	background: linear-gradient(0deg, #02458A, #213953);
	/* background: linear-gradient(0deg, #597AAF, #255891); Purmann-colors*/
}

@media (min-width: 768px) {
	.sidebar {
	    position: fixed;
	    top: 51px;
	    bottom: 0;
	    left: 0;
	    z-index: 1000;
	    display: block;
	    padding: 5px;
	    overflow-x: hidden;
	    overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
	    -webkit-overflow-scrolling: touch;
	    border-right: 1px solid #eee;
	    padding-top: 10px;
	    padding-bottom: 10px;
	}
}

.sidebar-categories {
/*	background:#114177;
	border: 1px solid;
	border-radius: 15px;
	color: black; */
}

.sidebar-cat-1 {
	font-size: 1.5em;
	color: white;
}
.sidebar-cat-1 li {
	line-height: 1.5em; 
	padding-bottom: 0px;
	padding-left: 2px;
}

.sidebar-cat-2 {
	font-size: 14px;
	color: white;
}
.sidebar-cat-2 li a {
	line-height:1em; 
	color: white;
	padding-top: 3px;
	padding-bottom: 3px;
}
.sidebar-cat-2 li a:hover {
	color: #255891;
	background-color: white;
}

.sidebar .social-media img {
	max-height: 25px;
	width: auto;
}

.main {
	padding-bottom: 20px;
	/*overflow-y: auto;    
	position: fixed;  zobrazí se scroll bar pouze v oknu ale zase problém při zobrazení kategorií na xs
	top: 51px;
	bottom: 0; */
}

@media (min-width: 768px) {
  .main {
	overflow-y: auto;  /*iPad Safari, funguje i auto, odkaz viz.nize*/
	/*iPad Safari https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ */
	-webkit-overflow-scrolling: touch;
	position: fixed; /* scroll bar v .main, neodjizdi pri rolovani pod navbar */
	top: 51px;
	bottom: 0px;
	/*padding-top: 20px;*/
    padding-right: 0px;
    padding-left: 0px;
  }
}

@media (max-width: 767px) {
  .main {
	padding-top: 0px;
    padding-right: 0px;
    padding-left: 0px;
  }
}

.main .page-header {
  margin-top: 0;
}

h1.page-header {
	font-size: 30px;
}

/* theme */

.discount {
	color:red;
}

#modal-product .price {
	font-size: 1.5em;
	font-weight: bold; 
}

.input-pcs {
	/* http://stackoverflow.com/questions/1480588/input-size-vs-width */
	width: 2.5em;	
	text-align: center;
	/* http://www.developershome.com/wap/wcss/wcss_tutorial.asp?page=inputExtension2 */
	-wap-input-format: '*N';
}

/* when pcs != 0 then hightlight cell */
.input-pcs-not-null {
	background-color: rgb(250, 255, 189);
}

/* http://stackoverflow.com/questions/23372903/hide-spinner-in-input-number-firefox-29 */
input[type=number].spinless::-webkit-outer-spin-button,
input[type=number].spinless::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

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

.product-list {
	background-color: #F2F9FF; //#F6F6F6; // #D4ECF9; // white;
    padding-bottom: 10px;
	border-bottom: 1px solid #DFDFDF;
}

@media (min-width: 768px) {
	.product-list {
		padding-right: 20px;
		padding-left: 20px;
	}
}

@media (max-width: 767px) {
	.product-list {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}

	.product-list th {
		padding-right: 1px !important;
		padding-left: 1px !important;		
	}
}

table .blue-table, .blue-table.table-striped > tbody > tr:nth-child(even), .blue-table :not(.table-striped) > tbody > tr, .blue-table thead > tr {
	background-color: #F2F9FF;  	
}

.blue-table.table-striped > tbody > tr:nth-child(odd) {
	background-color: #EFF8FF; //#E2F2FE; zebra
} 

.blue-table.table-hover > tbody > tr:hover {
	background-color: #ABD6F7; //#CED6E9;
}

.product-list table a {
	color: #202020;
}

@media (max-width: 767px) {
  .product-list table td {
    padding-right: 3px !important;
    padding-left: 3px !important;
  }
}

.product-list table td img {
	width: auto;
	height: 48px;   /* THUMB_SQUARE_SIZE */
	//max-width: 48px;
}

.product-list table td.image-cell {
	padding: 2px !important;
	vertical-align: middle;
}

.product-list table tr .subcategory {
	background-color: #255891 !important; 
	color: white !important;
}

/* product thumb sliding to cart animation */
.thumb-to-cart {
	opacity: 0.5;
	position: absolute !important;
	z-index: 100;
}

.cart-highlight {
	color: black; //#002AFF;
	font-weight: bold;
}

/* full table cell link */
/*http://stackoverflow.com/questions/9127274/how-to-strech-a-link-over-the-whole-cell*/
table td.cell-link {
	overflow: hidden;
}

/*
//	zpusobi zalomeni stitku na dalsi radek, mozna stitek stylovat bez dekorace pri hover
//  stitek v A taku ma hover dekoraci
table td.cell-link a  {
	display: block;
    margin: -10em;
    padding: 10em;
}
*/

.modal-content {
	background: #FFF;
	padding: 0px;
	width: auto;
	/*max-width: 500px; */
	margin: 20px auto;
	border-width: 10px;
	border-style: solid;
	border-radius: 20px;
	border-color: #114177;
}

.modal-content .scrollable {
	overflow: auto;
  	max-height: 400px;
}

/* close button */
.modal-content button.close {
	border-width: 5px;
	border-style: solid;
	border-radius: 10px;
	border-color: #114177;	
	padding: 5px;
}

#modal-message .modal-content {
	background-color: #FFF98B;
}

/* Scroll to Top */
a.scroll-to-top {
	-moz-border-radius: 7px 7px 0 0;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	-webkit-border-radius: 7px 7px 0 0;
	-webkit-transition: all 0.3s;
	background: #404040;
	border-radius: 7px 7px 0 0;
	bottom: 0px;
	color: #FFF;
	display: block;
	height: 9px;
	opacity: 0;
	padding: 13px 0 35px;
	position: fixed;
	right: 0px;
	text-align: center;
	text-decoration: none;
	transition: all 0.3s;
	width: 49px;
	z-index: 1040;
}

a.scroll-to-top:hover {
	filter: alpha(opacity=100);
	opacity: 1;
}

a.scroll-to-top.visible {
	filter: alpha(opacity=75);
	opacity: 0.75;
}


/* remove right margin */
.btn-icon i {
	margin-right: 0px;
}

/* http://stackoverflow.com/questions/802175/truncating-long-strings-with-css-feasible-yet */
.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -moz-binding: url('/assets/xml/ellipsis.xml#ellipsis');
}

.linear-gradient {
	background: linear-gradient(0deg, #FFF98B 0%, #FFFEE9 80%);  /* ugly yellow*/
}

.yellow-background {
	background-color: #FFFEE9 !important;
}

.banner-background {
	background-color: #FFFEEA !important;
}

.blue-background {
	background-color: #F2F9FF !important;
}

/* carousel settings */
#owl-products .box-content{
	background-color: #FFFEE9;   /* ugly yellow */
}
.owl-products .item {
	display: block;
	padding: 0px 0px;
	margin: 5px;
	color: #808080;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	text-align: center;
}

.owl-products .item h4.product {
	margin-bottom:15px; 
	text-align:center; 
	margin-top:15px;
}

.owl-products .price {
	font-size: 1.3em;
	font-weight: bold; 
}

.owl-products .price small{
	font-size: 0.9em;
	font-weight: bold; 
}

.owl-products .radial-background {
	margin-top:20px; 
	border-top: 1px solid #eee;
	background: radial-gradient(at top center, #FFF98B 0%, #FFFEE9 80%);  /* ugly yellow*/
	/*background: radial-gradient(at top center, #EEEEEE 0%, #FFFFFF 80%);*/
}

/* http://stackoverflow.com/questions/27412350/centering-vertically-align-image-for-image-carousel-inside-li */
.outer-image-wrap {
    display: table;
    width: 100%;
    height: 150px;
}

.inner-image-wrap {
    display: table-cell;
    vertical-align: middle;
}

.owl-products .inner-image-wrap img {
	width: auto;
	max-height: 150px;
	margin: auto;
	/*vertical-align: middle;*/
	/*position: absolute;*/
}

.owl-theme .owl-controls .owl-buttons div {
	padding: 5px 9px;
}
 
.owl-theme .owl-buttons i {
	margin-top: 2px;
}
 
/*To move navigation buttons outside use these settings:*/
 
.owl-theme .owl-controls .owl-buttons div {
	position: absolute;
}

/* I cannot theme it to properly put buttons left/right to pictures */ 
.owl-theme .owl-controls .owl-buttons .owl-prev {
	left: 0px;
	bottom: 60%;
}
 
.owl-theme .owl-controls .owl-buttons .owl-next {
	right: 0px;
	bottom: 60%;
}

.owl-product-images img {
	max-height: 200px;
}

/* boxes */
.featured-box {
	/*min-height: 100px;*/
	position: relative;
	text-align: left;
}

/* header just bellow navbar, no space to fit log at topmost/rightmost position */
.featured-box .header-box {
	border-bottom: 1px solid #DFDFDF;
} 

.featured-box .box-content {
	background-color: #FEFEFE;

	border-left: 1px solid #ECECEC;
	border-right: 1px solid #ECECEC; 
	border-top: 1px solid #DFDFDF;
	border-bottom: 1px solid #DFDFDF;
	box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.04);

	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 10px;

	padding: 20px;		
}

.no-top-padded-box {
	padding: 20px;
	padding-top: 0px;
}

.top-padded-box {
	padding-top: 20px;
}

.padded-box {
	padding: 20px;
}

.default-banner {
	background-image: url('/img/banner-default.jpg');
}

.featured-box .banner-box {
	padding: 20px;
	padding-bottom: 0px;
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position: right top;
}

.featured-box .banner-box .page-header {
	margin-bottom: 0px;
}

.featured-box h4 {
	font-size: 1.3em;
	font-weight: 400;
	letter-spacing: -0.7px;
	margin-top: 5px;
	text-transform: uppercase;
}

.featured-box .page-header, .blue-text {
	color: #337AB7;
}

.featured-box .box-content .actions {
	margin-top: 30px;
}

.padded-box .tab-pane {
	padding-bottom: 10px;
	padding-top: 20px;
}

.pink-text {
	color: #FF40FF;	
}

.alert {
	margin-bottom: 0px !important;
}

.alert-info a {
	color: red;
}

/* no-size column */
.col-ns {
  position: relative;
  min-height: 1px;
  padding-right: 5px;
  padding-left: 5px;
  float: left;	
}

.line-height-reduced {
	line-height: 0.9 !important;
}

.ui-dialog-content .tab-pane {
	padding-top: 10px;	
}

/* jTable multi column form */
/*.jtable-dialog-form {
  	display: block;
	width: 1000px;
  	-moz-column-gap: 20px;
  	-webkit-column-gap: 20px;
  	column-gap: 20px;
  	-moz-column-count: 3;
  	-webkit-column-count: 3;
  	column-count: 3;
 }
*/

.jtable-data-row {
	color: black;
	font-weight: 600;
}

 .jtable-row-highlight {
	background-color: yellow !important;
 }

 .jtable-input {
 	min-width: 400px;
 }

/* all but checkbox */
 .jtable-text-input input, .jtable-static-input input, .jtable-date-input input, .jtable-dropdown-input select, .jtable-textarea-input textarea {
 	width: 100% !important;
 }

.jtable-toolbarsearch, .jtable-toolbarsearch-reset-button {
	color: black;
	height: 20px;
	font-size: 0.9em;
}

.jtable-bottom-panel select {
	color: black;	
}

.scrollable-table .jtable tbody {
	/* jak udelat scrollovatelny obsah tabulkey pri dvou tabulkach ve splliteru ? 
	width: 100%;
     xxheight: 300px;
    overflow: auto;
    display: block;	
    */
}

.jstree-contextmenu {
	z-index: 1000;
}

.ui-autocomplete {
	max-height: 200px;
	overflow-y: auto;
	overflow-x: hidden;
}

.ui-menu-item {
	font-size: 0.8em;
	background-color: white;	
}

/*.ui-dialog-titlebar-close {
}*/

/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
	height: 200px;
}

#data .content {
	padding: 10px;
}

.fixed-left, .fixed-top, .fixed-bottom {
	position: absolute !important; /* to get it working */	
	height: auto !important;
	top: 55px;
	bottom: 0px;
}

.split-pane-divider {
    background: #aaa;
}
#left-component {
    width: 20em;
}
#vertical-divider {
    left: 20em; /* Same as left component width */
    width: 5px;
}
#right-component {
    left: 20em;  /* Same as left component width */
    margin-left: 5px;  /* Same as divider width */
}

#top-component {
	bottom: 50%;
	margin-bottom: 5px;
	min-height: 5em;
}

#horizontal-divider {
	bottom: 50%;
	height: 5px;
}

#bottom-component {
	height: 50%;
	min-height: 10em;
	bottom: 0px;
}

.ui-autocomplete-loading {
background: white url("/img/ajax-loader.gif") right center no-repeat;
}

.magnify {
  position: relative;
  display: inline-block;
}
.magnify .magnify-lens {
  /* Create the magnifying lens */
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
  /* Multiple box shadows to achieve the glass lens effect */
  -webkit-box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85),
    0 0 7px 7px rgba(0, 0, 0, 0.25),
    inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /* Hide the mouse pointer */
  cursor: none;
  /* Hide the lens by default */
  display: none;
  /* Place the lens on top of other elements */
  z-index: 100;
}
.magnify .magnify-lens.loading {
  background: #333 !important;
  opacity: .75;
}
.magnify .magnify-lens.loading:after {
  /* Loading text */
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  color: #fff;
  content: 'Loading...';
  font: italic normal 16px/1 Calibri, sans-serif;
  text-align: center;
  text-shadow: 0 0 2px rgba(51, 51, 51, .8);
  text-transform: none;
}