@import url('font-awesome/css/font-awesome.min.css');
@import url(vendor-fixes.css);
@import url(messages.css);
@import url(orders.css);
@import url(topnav.css);
@import url(querywizard.css);

@keyframes fadein {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes fadeout {
	from { opacity: 1; }
	to { opacity: 0; }
}

body.not-logged-in {
       background-image: url(../../img/bg_login.jpg);
       background-repeat: no-repeat;
       background-size: cover;
       background-attachment: fixed;
}

body.not-logged-in #main-content {
       display: none;
}

body.logged-in #login-content {
       display: none;
}

#login-form h1 {
	margin-top: 0;
	margin-bottom: 1em;
}

input.form-control.loading {
	background-image: url(img/input-loading.gif);
	background-position: 95% 50%;
	background-repeat: no-repeat;
}


.form-control {
	display: inline-block; /* override forms.css */
}

div.not-authorized {
	margin: auto;
	width: 66%;
	max-width: 450px;
	background-color: white;
	border: 1px solid #0328FF;
	padding: 1em;
	text-align: center;
}

body.not-logged-in div.not-authorized {
	/* Doesn't matter ;-) */
	display: none;
}

/* If an .fa follows an image within a figure environment, place it onto the image */
figure > img ~ .fa-search-plus {
	display: block;
	position: absolute;
	transform: translate(50%, -150%);
	opacity: 0.75;
	pointer-events: none;
}

figure:hover > img ~ .fa-search-plus {
	opacity: 1.0;
	text-shadow: 0px 0px 2px rgba(255,255,255,1);
}

/* Deaktivierte Buttons dürfen nicht anklickbar sein */
a.btn.disabled,
button.btn.disabled,
button.btn[disabled] {
	pointer-events: none;
	opacity: 0.3;
}

/* :focus analog zu :hover */
.btn:focus,
.btn-default:focus {
	background: #bb0b00;
	color: white;
}

/* Die Formatierungsvorgabe für deaktivierte Felder (weiß, wie :focus) ist unsinn */
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
	background-color: #f0f0f0;
	border-color: #ddd;
}

/**
 * Kodiert eine E-Mail-Adresse aus den umgedrehten Attributen 'data-website' und 'data-user'
 */
#liame:before {
	display: inline-block;
	content: attr(data-website) "\0040" attr(data-user);
	unicode-bidi: bidi-override;
	direction: rtl;
}

select + .validationMessage,
input + .validationMessage {
	display: inline-block;
	position: absolute;
	z-index: 10;
	border: 1px solid #CA0406;
	border-radius: 0.5ex;
	background-color: rgba(255, 255, 255, 0.9);
	box-shadow: 0.5ex 0.5ex 0.5ex 0px rgba(0,0,0,0.5);
	padding: 0.5ex;
	transform: translate(1ex, -0.5ex);

	opacity: 0;
	visibility: hidden;

	color: #333333;
	min-width: 20vw;
	max-width: 90vw;
}

select:hover + .validationMessage,
input:hover + .validationMessage {
	opacity: 1;
	visibility: visible;
	transition: visibility 0s, opacity 0.5s ease-in;
}

/* Extend navbar with */
@media (min-width: 1200px) {
	nav.navbar .container-fluid {
		max-width: 1400px;
	}
}

@media (min-width: 854px and max-width: 1200px) {
	nav.navbar .fa {
		/* Hide icons if there is not enought space */
		display: none;
	}
}

table > thead > tr.valign-middle > td,
table > thead > tr.valign-middle > th,
table > tfoot > tr.valign-middle > td,
table > tfoot > tr.valign-middle > th,
table > tbody > tr.valign-middle > td,
table > tbody > tr.valign-middle > th,
table > tr.valign-middle > td,
table > tr.valign-middle > th {
	vertical-align: middle;
}

.required:after {
	content: '*';
	color: red;
	vertical-align: 0.5ex;
	padding-left: 0.25ex;
	font-size: 0.9em;
}

/* Layout for rasch textil and elbersdrucke */
body[data-supplier="20"] nav.navbar-default {
	background-color: #fff;
	border-bottom: 1px solid #666;
}

body[data-supplier="24"] nav.navbar-default {
	background-color: #fff;
	border-bottom: 1px solid #A13994;
}

body[data-supplier="20"] nav.navbar-default .navbar-brand img,
body[data-supplier="24"] nav.navbar-default .navbar-brand img {
	display: none;
}

body[data-supplier="20"] nav.navbar-default .navbar-brand {
	display: block;
	width: 175px;
	height: 90px;
	background-image: url('img/raschtextil_logo.jpg');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}

body[data-supplier="24"] nav.navbar-default .navbar-brand {
	display: block;
	width: 175px;
	height: 90px;
	background-image: url('img/elbersdrucke_logo.png');
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}

body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li > a,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li > a {
	color: #666;
}

body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li:hover > a,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li:hover > a {
	color: #000;
}

body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.open > a,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.open > a {
	background-color: #eee;
	color: #000;
}

body[data-supplier="20"] nav.navbar-default ul.dropdown-menu,
body[data-supplier="20"] nav.navbar-default ul.dropdown-menu > li > a,
body[data-supplier="20"] nav.navbar-default ul.dropdown-menu > li > a,
body[data-supplier="24"] nav.navbar-default ul.dropdown-menu,
body[data-supplier="24"] nav.navbar-default ul.dropdown-menu > li > a,
body[data-supplier="24"] nav.navbar-default ul.dropdown-menu > li > a {
	background-color: #eee;
	color: #666;
}


body[data-supplier="20"] nav.navbar-default .badge,
body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.open i.fa,
body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.active i.fa,
body[data-supplier="24"] nav.navbar-default .badge,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown-menu > li > a i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.active i.fa {
	color: #666;
	border-color: #666;
}

body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li:hover > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.open > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.active > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.open > ul.dropdown-menu > li > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.active > ul.dropdown-menu > li > a > i.fa {
	color: #A13994;
}

body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.open > ul.dropdown-menu > li:hover > a > i.fa,
body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.active > ul.dropdown-menu > li:hover > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.open > ul.dropdown-menu > li:hover > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.active > ul.dropdown-menu > li:hover > a > i.fa {
	color: #fff;
}

body[data-supplier="20"] nav.navbar-default .dropdown-menu > li > a:hover,
body[data-supplier="20"] nav.navbar-default .dropdown-menu > li > a:focus,
body[data-supplier="24"] nav.navbar-default .dropdown-menu > li > a:hover,
body[data-supplier="24"] nav.navbar-default .dropdown-menu > li > a:focus,
body[data-supplier="20"] nav.navbar-default .dropdown-menu > li > a:hover i.fa,
body[data-supplier="20"] nav.navbar-default .dropdown-menu > li > a:focus i.fa,
body[data-supplier="24"] nav.navbar-default .dropdown-menu > li > a:hover i.fa,
body[data-supplier="24"] nav.navbar-default .dropdown-menu > li > a:focus i.fa,
body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.open > ul.dropdown-menu > li:hover > a > .badge,
body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.active > ul.dropdown-menu > li:hover > a > .bagde,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.open > ul.dropdown-menu > li:hover > a > .badge,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.active > ul.dropdown-menu > li:hover > a > .badge,
body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.open > ul.dropdown-menu > li:hover > a > i.fa,
body[data-supplier="20"] nav.navbar-default ul.navbar-nav > li.dropdown.active > ul.dropdown-menu > li:hover > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.open > ul.dropdown-menu > li:hover > a > i.fa,
body[data-supplier="24"] nav.navbar-default ul.navbar-nav > li.dropdown.active > ul.dropdown-menu > li:hover > a > i.fa {
	color: #fff;
	background-color: #666;
	border-color: #fff; /* for badge */
}

body[data-supplier="20"] nav.navbar-default .navbar-right .navbar-form .form-control,
body[data-supplier="24"] nav.navbar-default .navbar-right .navbar-form .form-control {
	background-color: #eee;
	border: 1px solid #aaa;
	color: #666;
}

@media screen and (min-width: 768px) {
	/* Use flex styling so that each element on a row is centered vertically */
	.row {
		display: flex;
		align-items: center;
	}

	.form-group label {
		margin-bottom: 0;
	}
}

@media screen and (min-width: 768px) {
	div#user-edit-delivery-addresses.row,
	div#user-edit-cart-templates.row {
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}
}

div#user-edit-cart-templates.row > div.col,
div#user-edit-delivery-addresses.row > div.col {
	display: block;
	border: 1px solid #999;
	border-radius: 1ex;
	padding: 1ex;
	margin: 1ex;
	background-color: #eee;
}

div#user-edit-cart-templates.row > div.col.active,
div#user-edit-delivery-addresses.row > div.col.active {
	border: 1px solid #333;
	background-color: #f0f0f0;
}

div#user-edit-cart-templates.row > div.col .actions,
div#user-edit-delivery-addresses.row > div.col .actions {
	border-top: 1px solid #ccc;
	margin-top: 1ex;
	padding-top: 1ex;
}

.has-error.select2-container {
  border-color: #ce0000 !important;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  background-color: #ff0000 !important;
}
.has-error.select2-container:focus {
  border-color: #9b0000;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3535;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ff3535;
}

.mobile-visible {
	display: initial;
}

.mobile-hidden {
	display: none;
}

@media (min-width: 768px), print {
	.mobile-visible {
		display: none;
	}
	.mobile-hidden {
		display: initial;
	}
}


@media not print {
	.print {
		display: none;
	}
}

@media print {
	.noprint {
		display: none !important;
	}

	button, .button {
		display: none !important;
	}
}

/**
 * In der topnav und im content wird nun select2 statt der normalen Select-Box verwendet.
 * Das Layout muss jedoch angepasst werden, damit das nicht extrem komisch
 * aussieht.
 **/

.form-control.select2-container .select2-choice,
.form-control.select2-container .select2-choice .select2-arrow
{
	background: inherit;
	border: none;
	color: inherit;
	height: auto;
	line-height: inherit;
	filter: none;
	padding: 0;
}

.form-control.select2-container .select2-choice .select2-arrow {
	width: 1em;
}

.form-control.select2-container .select2-choice  .select2-arrow:before {
	content: '▼';
}

.form-control.select2-container.select2-dropdown-open .select2-choice .select2-arrow:before {
	content: '▲';
}

.form-control.select2-container.select2-dropdown-open .select2-choice {
	-webkit-box-shadow: inherit;
	box-shadow: inherit;
}


.order-quantity-unit span[title] {
	cursor: pointer;
}

.order-quantity-unit span[title]:after {
	content: ' (?)';
	color: #66f;
	font-size: 0.8em;
	vertical-align: 0.4em;
}

.order-quantity-unit-warn {
	color: #ff0000;
	font-weight: bold;
}