/* jQuery overrides */

/* .ui-button:hover { background: inherit; } */
.container .ui-widget { font-family: inherit; }


body {
	color: #333333;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    font-size: 14px;
}

a { text-decoration: none; color: #0088cc; font-size: 14px; }
	a:HOVER { text-decoration: underline; color: #005580; }
	a label { cursor: pointer; }
	
.menu a:HOVER { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	color: inherit;
	font-family: inherit;
	font-weight: bold;
	line-height: 1;
	margin: 10px 0;
	text-rendering: optimizelegibility;
}

h2 {
	font-size: 30px;
	line-height: 40px;
}

h3 {
	font-size: 21px;
	font-weight: normal;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-top: 40px;
}

h4 {
	margin-top: 35px;	
}

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

	ul.circle { list-style-type: circle; padding-left: 20px;  }

img { vertical-align: middle; }

button { font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }

/* select, */
textarea,
input[type="text"],
input[type="password"], 
input[type="datetime"], 
input[type="datetime-local"], 
input[type="date"], 
input[type="month"], 
input[type="time"], 
input[type="week"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="search"], 
input[type="tel"] {
	border-radius: 3px;
	border: 1px solid #ccc;
    color: #555555;
    display: inline-block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
    /* margin-bottom: 9px; */
    padding: 4px 6px;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
}

	textarea:focus,
	input[type="text"]:focus, 
	input[type="password"]:focus, 
	input[type="datetime"]:focus, 
	input[type="datetime-local"]:focus, 
	input[type="date"]:focus, 
	input[type="month"]:focus, 
	input[type="time"]:focus, 
	input[type="week"]:focus, 
	input[type="number"]:focus, 
	input[type="email"]:focus, 
	input[type="url"]:focus, 
	input[type="search"]:focus, 
	input[type="tel"]:focus {
		border-color: rgba(82, 168, 236, 0.8);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(82, 168, 236, 0.6);
	}
		
		

label, input, button, select, textarea { font-size: 14px; }

fieldset {
	border: none; 
	margin: 0;
}

/* table tr:nth-child(2n+1) {
	background-color: #eee;
} */

dl { font-size: 14px; margin-top: 0; }
	dl:AFTER {
		clear: both;
		content: "";
		display: table;
		line-height: 0;
	}

	dt, dd { line-height: 20px; float: left; }
	dt { font-weight: bold; width: 200px; clear: left;}
	dd {  }


@keyframes blinker {
  50% {
    opacity: 0.2;
  }
}
	
	
/* Checkbox */
/* Customize the label (the container) */
.cbcontainer {
  display: block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  cursor: pointer;
  /* font-size: 22px; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid;
}

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

/* When the checkbox is checked, add a blue background */
.cbcontainer input:checked ~ .checkmark {
  background-color: #2196F3;
}

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

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

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


/* Tooltip */
.tooltip {
  position: absolute;
  display: inline-block;
  border-bottom: 1px dotted black;
  font-size: 1.2em;
  top: 3px; left: 3px;
}

.tooltip .tooltiptext {
  font-size: 0.8em;
  visibility: hidden;
  /* width: 350px; */
  width: 225px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 5px 5px 35px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  
  /* right: -180px; */
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
/* END Tooltip */

.clear { clear: both; }
.left-align { text-align: left; }
.right-align { text-align: right; }
.center { text-align: center; }

/* Font Awesome */
.fa.fa-4 { font-size: 14px; }


/* Header */

.menu-container { display: inline-block; }

.navbar {
	background-color: #fafafa;
	background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) inset, 0 1px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 40px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 5;	
}

.nav-container {
	max-width: 1170px;
	margin: auto;
	position: relative;
}

	.navbar a {
		display: inline-block;
		color: #555;
		line-height: 20px;
	}

	.navbar .brand {
		padding: 10px 10px 10px 3px;
		/* background: yellow; */
		float: left;
		font-size: 20px;
	}
		.navbar .brand:hover { text-decoration: none; }
		
		.brand.logo-img {
			height: 33px;
			position: fixed;
			display: none;
		}
			.brand.logo-img img { height: 100%; }
		.brand.logo-text {
			
		}
	
	.navbar .menu {
		/* display: inline; */
		float: left;
	}
	
	/* .navbar .right { float: right; } */
	
	.navbar .menu > li {
		/* display: inline; */
		float: left;
	}
	
	
		/* Menu item without link */
		.navbar .dl-menu > li > span,
		.navbar .menu > li > span {	padding: 10px 15px;	display: block; cursor: pointer;	}
		
			.navbar .dl-menu > li > span em,
			.navbar .menu > li > span em { font-style: normal; }
		
		/* .navbar .menu { display:  } */
	
		.navbar li a {
			/* background: orange; */
			padding: 10px 15px;
			font-size: 14px;
		}
		
			.navbar li a:HOVER {
				color: #333;
			}
			
			.navbar li a.aktion {
				background: linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%);
				color: white;
				font-weight: bold;
			}
				.navbar li a.aktion:hover {
					background: linear-gradient(to bottom, #fcb792 0%,#ef611a 50%,#e84d00 52%,#f9884a 100%);
					/* linear-gradient(to bottom, #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); */
				}
			
		.navbar .menu .dl-submenu {
			display: none;
			background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
			border: 1px solid #e0e0e0;
			box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) inset, 0 1px 10px rgba(0, 0, 0, 0.1);
		}
			.navbar .menu .dl-submenu li { border-bottom: 1px solid #e0e0e0; }
		
		.navbar .menu li:hover ul.dl-submenu {
			display: block;
			position: absolute;
		}
		
		.navbar li a.menu-yellow {
			background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
		    color: white;
   			font-weight: bold;
		}
			.navbar .menu li a.menu-yellow:hover { 
				/* background: linear-gradient(to bottom, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); */
				background: linear-gradient(to bottom, #98d32a 0%,#99d33b 50%,#7bc10b 51%,#7aba05 100%);
			}
		
	.logout {
		/* float: right; */
		padding: 10px;
		position: absolute;
		right: 0;
	}
		/* .logout i { display: none; } */

/* End Header */



/* Container */

.container {
	max-width: 1170px;
	margin: auto;
	padding: 80px 0;
}

/* End Container */

.col { float: left; }

.col1 {
	/* background: red; */
	width: 170px;
	float: left;
}

	.search-title { font-size: 14px; display: inline-block; margin-bottom: 5px; }
	.search-field {
		width: 152px;
	}
	
	.provider-select {
	    border: 1px solid #ccc;
	    border-radius: 4px;
	    margin-top: 12px;
	    padding: 5px;
	    width: 100%;
	}

	.col2 {
		/* background: green; */
		width: 685px;
		width: calc(100% - 480px);
		float: left;
		margin-left: 20px;
		/* margin-top: 15px; */
		/* text-align: center; */
	}
		
		/* .col2-extrawidth {
			width: 850px;
			width: 70%;
		} */
		.col2.col2-extrawidth { width: calc(100% - 330px); }
	
	.col3 {
		/* background: blue; */
		width: 270px;
		float: right;
		/* padding-top: 10px; */
	}

.full-width { width: 100%; }

.w60  { width:  60px; }
.w192 { width: 192px; }
.w200 { width: 200px; }
.w270 { width: 270px; }
.w284 { width: 284px; }
.w300 { width: 300px; }
.w400 { width: 400px; }
.w500 { width: 500px; }
.w600 { width: 600px; }

.ml30 { margin-left: 30px; }


/* Buttons */
	.container .btn {
		/* margin-top: 15px; */
		color: #fff;
		font-size: 14px;
		font-weight: normal;
		border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		outline: none;
	}
	
		.btn:HOVER,
		.container .ui-button.btn:HOVER,
		.container .ui-button.btn.ui-state-active {
			background-position: 0 -15px;
			/* background: inherit; */
			font-weight: normal;
			color: white;
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
			/* background-color: #0044cc;
			background-image: linear-gradient(to bottom, #0088cc, #0044cc); */
			
		}
		
		.container .ui-button.checkout {
			background-color: #0044cc;
			background-image: linear-gradient(to bottom, #0088cc, #0044cc);
		}
			.container .ui-button.checkout:hover {
				background-color: #0044cc;
    			background-image: linear-gradient(to bottom, #0088cc, #0044cc);
			}
		
		.container .editor {
			background-color: #49afcd;
    		background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
		}
			.container .editor:HOVER, 
			.container .editor:active,
			.container .editor:focus {
				background-color: #2f96b4; background-position: 0 -15px;
				/* background-color: #49afcd; */
    			background-image: linear-gradient(to bottom, #5bc0de, #2f96b4);
			}
			
			
		.container .default-button {
			background-color: #da4f49;
    		background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    		color: #333;
    		font-size: 14px;
    		font-weight: normal;
		}
			/* .container .default-button:HOVER {
				background-color: #bd362f;
			} */
	
		.container .red-button {
			background-color: #da4f49;
    		background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
		}
			.container .red-button:HOVER,
			.container .red-button:active,
			.container .red-button:focus {
				background-color: #bd362f;
				background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
			}
			
		.container .ui-button.green-button {
			background-color: #5bb75b;
    		background-image: linear-gradient(to bottom, #62c462, #51a351);
    		color: #ffffff;
    		text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
		}
			.container .green-button:HOVER,
			.container .green-button.ui-state-active:hover {
				background: #51a351;
			}
			
		.container .large-green {
			background-color: #5bb75b;
			background-image: linear-gradient(to bottom, #62c462, #51a351);
			background-repeat: repeat-x;
			border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
			color: #ffffff;
			text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
			padding: 8px 18px;
			font-size: 1.2em;
		}
			.container .btn.large-green:HOVER, 
			.container .btn.large-green:active,
			.container .btn.large-green:focus {
				background-position: 0 -40px;
				background: #5bb75b linear-gradient(to top, #62c462, #51a351);
			}
			
		.container .ui-button:focus { font-weight: normal; color: white; }
		.container .ui-button:active { font-weight: normal; background-position: 0 15px }
			
		.container .alert-info {
			width: 50%;
			background-color: #d9edf7;
			border: 1px solid #bce8f1;
			border-radius: 4px;
			color: #3a87ad;
			padding: 8px 8px 8px 14px;
			float: right;
			font-size: 14px;
			margin-bottom: 10px;
		}
		
		.container .alert-info.coupons {
			width: unset;
			float: unset;
			margin-top: 10px;
		}
			.container .alert-info.coupons label { display: unset; }
		
		.container .alert-red {
			background-color: rgb(243, 92, 92);
			color: black;
			/* padding-top: 15px; */
		}
			.container .alert-red input {
				position: absolute; 
			}
		
			.container .alert-info label {
				display: block;
				/* padding-left: 35px; */
				cursor: pointer;
			}
		
			.status-red-1, .status-green-1, .status-green-3 {
				width: 40px;
				height: 12px;
				background-image: url("../img/statush.png");
				background-repeat: no-repeat;
			}
		
			.status-red-1 {
			}
			
			.status-green-1 {
				background-position: 0 -12px;
			}
			
			.status-green-3 {
				background-position: 0 -24px;
			}
			
			.status-info * { display: inline-block; margin-right: 5px; }
			
			.discontinued-title { font-size: 0.8em; }
			.status-discontinued {
				padding: 3px;
				background-color: #f50;
				color: white;
				position: absolute;
				line-height: 1;
				font-size: 0.9em;
				border-radius: 3px;
				text-align: left;
			}
			
/* .buy */ select, .buy input { width: 140px; border: 1px solid #bbb; height: 30px; border-radius: 3px; margin-bottom: 7px; color: #555; padding: 4px 6px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; }
.buy .btn {
	/* width: 140px;
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    border-color: #bbbbbb #bbbbbb #a2a2a2;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #333333;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 0; */
    padding: 4px 8px;
    /* text-align: center;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    vertical-align: middle; */
}
	.buy .btn span { padding: 0; }
/* .buy  */.ui-button.btn-warning {
	/* background-color: #faa732;
	background-image: linear-gradient(to bottom, #fbb450, #f89406);
	background-repeat: repeat-x; */
	background: #faa732 linear-gradient(to bottom, #fbb450, #f89406) repeat-x;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	color: #ffffff;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
	/* .buy  */.ui-button.btn-warning:HOVER {
		 background-position: 0 -15px; 
		 background: #faa732 linear-gradient(to bottom, #fbb450, #f89406) repeat-x; 
	}
	
	 .btn.ui-button.btn-warning:active,
	 .btn.ui-button.btn-warning:focus,
	 .btn.ui-button.ui-state-hover,
	 .btn.ui-button.ui-state-active,
	 .btn.ui-button.ui-state-focus {
		 background: #faa732 linear-gradient(to top, #fbb450, #f89406) repeat-x;
	}
	
.btn.btn-cart2 {
	background: linear-gradient(to bottom, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%);
}
.btn.btn-cart2:hover {
	background: linear-gradient(to bottom, rgba(79,133,187,1) 0%,rgba(79,133,187,1) 100%);
}
		
.btn.btn-active {
	background-image: linear-gradient(to bottom, yellow, orange);
	background-color: orange;
}
/* END Buttons */

.alternative-item {
	color: #46a546;
	padding-top: 12px;
	font-size: 11px;
	font-weight: bold;
}
	.alternative-item a {
		font-size: unset;
	}

.loading-layer {
	/* display: none; */
	position: absolute;
	width: 100%; height: 100%;
	z-index: 10000;
	background-color: rgba(100,100,100, 0.1);
	/* transition: all 2s; */
	/* opacity: 0; */
}
	.loading  {
		/* background-image: url(../img/ttmloading.gif); */
		width: 130px;
		height: 130px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		/* transition: all 2s; */
	}
		/* .loading i { transition: all 2s; } */

/* Feedback */

.feedbackPanel {
    position: fixed;
    padding: 20px 5px 5px;
    background: linear-gradient(to bottom, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
    box-shadow: 0 0 40px 10px grey;
    z-index: 100;
    min-width: 200px;
    min-height: 50px;
    right: 2%; 
    
}

	.feedbackPanel::after {
	    content: "\f057";
	    font-family: "Font Awesome 5 Free";
	    position: absolute;
	    top: 5px;
	    right: 5px;
	}
		.feedbackPanel:hover:after { color: orange; }

/* END Feedback */

/* Printers */
.printers { text-align: left; }
.printers h4 {
    margin-top: 1.1em;
    margin-bottom: 0.4em;
    border-bottom: 1px solid #6f6f6f;
    color: #6f6f6f;
    font-size: 16.8px;
    line-height: 24px;
    text-align: left;
}
.printers ul li {
    margin-right: 1%;
    vertical-align: top;
    text-align: left;
    display: inline-block;
    width: 32%;
}
/* END Printers */

/* PaymentInfoPage */
#shipment-table { border-collapse: collapse; font-size: 14px; margin-bottom: 15px; }
	
	#shipment-table td,
	#shipment-table th {
		border: 1px solid #000;
		padding: 5px;
	}
	
	#shipment-table tr:nth-child(2n+2) { background-color: #eee; }
/* END PaymentInfoPage */


.menu-button, /* Old button */
.dl-trigger { display: none; }



/* @media (max-width:960px)
{
	.menu-button {
		display: block;
	}
} */


ul.shipping-addresses li:nth-child(2n),
ul.sender-addresses li:nth-child(2n) {
	background-color: #dbdbdb;
}

ul.shipping-addresses li.ui-selected,
ul.sender-addresses li.ui-selected {
	background-color: #0088cc;
}

ul.shipping-addresses li,
ul.sender-addresses li {
	/* background-color: #dbdbdb; */
/* 	border-bottom: 1px dotted #dbdbdb; */
	margin-bottom: 2px;
}

.grecaptcha-badge { display: none; }

.mobile-delimiter {
	/* display: none; */
	margin: 30px 0;
	border-top: 3px solid orange;
	clear: both; 
}

/* @media (max-width:1070px)
{
	.container { padding: 100px 1%;  }
} */

@media screen and (max-width:1180px)
{
	.container { padding: 100px 1%;  }
}

/* @media screen and (max-width:1100px)
{
	.results .item .image-col { width: 100px; }
	.results .item .description { width: calc(100% - 367px); }
	.results { display: block; }
}

@media screen and (max-width:1050px)
{
	.results .item { display: block; padding: 5px 5px 5px 120px; position: relative; }
	
		.results .item .image-col { position: absolute; left: 5px; }
		
		.results .item .description { width: 100%; width: calc(100% - 7px); }
		
		.results .item .price,
		.results .item .buy {
			display: inline-block;
			padding-top: 0; padding-bottom: 0;
		}
} */

@media screen and (max-width:900px)
{
	/* 	h1.page-title {
			position: fixed;
			top: 0;
			left: 40px;
			font-size: 20px;
			z-index: 5;
		}
		h1.page-title.two-lines {
			font-size: 15px;
			margin: 4px 0;
		} */
	
	.container { padding: 60px 1%; word-break: break-word; }
	
	.navbar .menu { display: none; }
		.navbar .menu li { float: unset; }
		
	.menu-button,
	.dl-trigger {
		display: inline;
		color: #0088cc;
		font-size: 40px;
		/* box-shadow: 0px -2px 10px gray; */
	}
	
	#dl-menu.dl-menuwrapper { float: inherit; }
	
	.menu-container:hover ul {
		display: block;
		position: absolute;
		background-color: #fafafa;
    	background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
    	box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1) inset, 0 1px 10px rgba(0, 0, 0, 0.1);
	}
	
	.navbar { height: 40px; }
	.navbar a { line-height: 25px; }
	.navbar .brand { padding-top: 5px; }
	
	.brand.logo-img {
		display: inline-block;
	}
	
	.brand.logo-text {
		display: none;
	}
	
	a.logout {
		display: none;
		
	
		color: white;
		text-align: center;
		font-size: 10px;
		line-height: 10px;
/* 		background-color: #0044cc;
		background-image: linear-gradient(to bottom, #0088cc, #0044cc);
		position: absolute; right: 3px; top: 2px; */
	}
		a.logout i { display: block; }
		a.logout:hover { background-image: linear-gradient(to bottom, yellow, orange); background-color: orange; text-decoration: none; }
		
	.mobile-delimiter { display: block; }
		
	table th, table td { padding: 0.2em !important; }
	table th { font-weight: normal; font-size: 10px; }
	.positions td:nth-child(2) { font-size: 10px; }
	.positions td:nth-child(4) { white-space: nowrap; }
	
	.container dd.alert-info { width: unset; margin-left: 0; }
}

@media screen and (max-width:600px)
{
	h1 { font-size: 24px; }
	h2 { font-size: 20px; }
	
	table td, table th { padding: 3px 5px; }
	
	.navbar .brand { font-size: 16px; }
	
	.container .addresses .address { width: 90%; margin-top: 10px; }
	
	.container div.alert-info,
	.container div.fields-container { width: unset; }
}