/* ---------------------------------------------------------------------------
 *                                   General
 * --------------------------------------------------------------------------- */

html, body {
	height: 100vh;
}

pre {
	font-size: 1.2rem;
}

form {
	margin: 0;
}

li .dropdown-menu a.active {
	font-weight: bold;
}


/* ---------------------------------------------------------------------------
 *                                   Login
 * --------------------------------------------------------------------------- */

#general.login .well h3 {
	margin-top: 0;
}

#general.login .form-controls {
	text-align: center;
}

/* ----------------- language ----------------- */

#menu-language {
	position: relative;
    float: right;
    padding-right: 5px;
    text-align: right;
}

#menu-language >ul{
	margin: 0;
}

#menu-language >ul >li{
	display: inline;
}

#menu-language span {
    margin: 0 5px;
}

#menu-language p {
    display: inline;
    padding-right: 9px;
}

/* ---------------------------------------------------------------------------
 *                                   Common
 * --------------------------------------------------------------------------- */

/* ---------- Topbar, Bottombar ---------- */

.filterbar {
	width: 100%;
	border-bottom: 1px solid #EBEBEB;
	margin-bottom: 20px;
	clear: left;
}

.filterbar h6 {
	float: left;
	margin: 3px 20px 0 3px;
	font-weight: normal;
	line-height: 1.8em;
	vertical-align: middle;
}

.filterbar > ul {
	list-style-type: none;
	margin: 0;
}

.filterbar > ul > li {
	float: left;
	margin-left: 25px;
}

.filterbar > ul.filter > li {
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #A4A4A4 !important;
	font-family: Georgia, 'Times New Roman', Times, serif;
	line-height: 32px;
	cursor: pointer;
	text-decoration: none !important;
	margin: 0 25px 0 0;
}

.filterbar > ul li > * {
	vertical-align: top;
}

.filterbar > ul li.active {
	color: black !important;
}

.filterbar > ul li.active a {
	color: black !important;
}

/* ---------- Pagination ---------- */

.pagination {
	text-align: center;
	margin: 0;
}

.pagination > ul {
	margin: 0;
}

.pagination li {
	cursor: pointer;
}

.pagination li.disabled {
	cursor: default;
}

/* ---------------------------------------------------------------------------
 *                                   Admin
 * --------------------------------------------------------------------------- */

/* ---------- Adminbar ---------- */

#admin .adminbar {
	margin-bottom: 20px;
}

#admin .adminbar li {
	line-height: 20px;
}

#admin .adminbar .input-append {
	margin: 0;
	padding-top: 5px;
}

#admin .adminbar input {
	max-width: 140px;
}

#admin .adminbar .dropdown-menu a,
#admin .adminbar .input-append .add-on {
	cursor: pointer;
}

/* ---------- Bottombar ---------- */

#admin .bottombar > * {
	margin: 15px 0;
}

#admin .bottombar > ul {
	list-style-type: none;
}

#admin .bottombar > ul li {
	float: left;
	padding-right: 15px;
}

#admin .bottombar > ul li select {
	margin: 0;
}

#admin .bottombar > ul li .badge {
	padding: 8px 10px;
}

/* ---------- Item table ---------- */

#admin table.list {
	width: 100%;
	border-spacing: 0;
}

#admin table.list th[ng-click] {
	cursor: pointer;
}

#admin table.list input[type=checkbox] {
	vertical-align: middle;
	margin: 0 5px 0 0;
}

#admin table.list tr.selected td {
	background: #dcdcdc;
}

#admin table.list td {
	border-top: 0;
	white-space: nowrap;
	overflow: auto;
	max-width: 100px;
	scrollbar-width: 0;
}

#admin table.list td::-webkit-scrollbar {
	display: none;
}

#admin table.list .id {
	color: gray;
}

#admin table.list .image {
	padding: 0;
	width: 50px;
	vertical-align: middle
}

#admin table.list img {
	max-width: 100%;
	max-height: 30px;
}

#admin table.list .price {
	white-space: nowrap;
}

#admin table.list .status {
	width: 40%;
}

#admin table.list .progress {
	margin: 0;
}

#admin table.list th.actions {
	text-align: center;
}

#admin table.list .edit,
#admin table.list .delete {
	width: 75px;
	text-align: center;
	cursor: pointer;
	font-weight: bold;
	text-decoration: none !important;
}

#admin table.list .edit:not(.disabled) {
	color: #58B753;
}

#admin table.list .edit:hover:not(.disabled) {
	background: #58B753;
	color: white;
}

#admin table.list .delete:not(.disabled) {
	color: #E06567;
}

#admin table.list .delete:hover:not(.disabled) {
	background: #E06567;
	color: white;
}

#admin table.list .action.disabled {
	color: lightgrey;
	cursor: default;
}

#admin table.list.prices input {
	max-width: 140px;
}

#admin table.list.prices th.name {
	width: 300px;
}

/* ---------- Edit ---------- */

#admin .form-controls {
	margin-top: 30px;
	display: block;
	text-align: center;
}

#admin .edit .controls .note-editor {
	margin-right: 70px;
}

#admin .edit .controls .note-editor .note-editable {
	min-height: 150px;
	overflow: auto;
}

/* ---------- Topbar ---------- */

#admin #topbar.editable {
	position: relative;
}

#admin #topbar.editable a {
	vertical-align: top;
	display: inline-block;
}

#admin #topbar > a.pull-right {
	margin-bottom: 5px;
}

#admin #topbar a.action {
	width: 32px;
	height: 32px;
	background-size: 50% !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	margin: 0 2px;
	opacity: 0.5;
}

#admin #topbar .action.add {
	float: right;
	background: url(/bundles/customers/img/icons/new.png);
	opacity: 0.8;
}

#admin #topbar a.action.add:hover {
	background-color: lightblue !important;
}

#admin #topbar a.edit {
	background: url(/bundles/customers/img/icons/edit.png);
}

#admin #topbar a.edit:hover {
	background-color: #58B753 !important;
}

#admin #topbar a.delete:hover {
	background-color: #E06567 !important;
}

#admin #topbar a.delete {
	background: url(/bundles/customers/img/icons/delete.png);
}

#admin #topbar .input-append,
#admin #topbar select {
	margin-bottom: 5px;
}

#admin #topbar input,
#admin #topbar select {
	max-width: 170px;
}

/* ---------- Uploader ---------- */

#admin #images.add form input[type="file"] {
	display: none !important;
}

#admin #images.add table.list tr {
	margin-bottom: 10px;
}

#admin ul.nav > li > a.btn:hover {
	background-color: #e6e6e6;
}

#admin ul.nav > li > a.btn-success:hover {
	background-color: #51a351;
}

#admin ul.nav > li > a.btn-primary:hover {
	background-color: #0044cc;
}

#admin ul.nav > li > a.btn-danger:hover {
	background-color: #bd362f;
}

/* ---------- Site specific ---------- */

#admin #images.index {
	padding-top: 20px;
}

#admin #images.edit a#image {
	text-align: center;
	margin-bottom: 20px;
	display: block;
}

#admin #images.edit a#image img {
	max-width: 100%;
	max-height: 500px;
}

#admin #orders.view textarea {
    width: 206px;
    min-width: 206px;
    max-width: 206px;
}


/* ---------------------------------------------------------------------------
 *                                   Albums
 * --------------------------------------------------------------------------- */

@media(max-width: 768px) {
	#albums.index a {
		max-width: 400px;
	}

	#albums.index h2 {
		text-align: center;
		margin-bottom: 30px;
	}
}

#albums.view #images img {
	max-width: 100%;
	cursor: pointer;
}

/*#albums.index  removed by Ian 19 May 2018 */
.albums-view-modal {
	top: 50%;
	width: 1024px;
	height: 768px;
	margin-left: -512px;
	margin-top: -384px;
	background: black;
}

@media (max-width: 1024px), (max-height: 845px) {
	.albums-view-modal {
		width: 800px;
		height: 600px;
		margin-left: -400px;
		margin-top: -300px;
	}
}

@media (max-width: 800px), (max-height: 660px) {
	.albums-view-modal {
		width: inherit;
		height: inherit;
		margin: 0;
		top: 10px;
		left: 10px;
		right: 10px;
		bottom: 10px;
	}
}

.albums-view-modal .modal-body {
	width: 100%;
	height: 100%;
	max-height: inherit;
	overflow-y: inherit;
	padding: 0;
}

.albums-view-modal .close {
	display: block;
	position: absolute;
	top: -19px;
	right: -19px;
	width: 38px;
	height: 38px;
	background: url(/img/modal/close-button.png);
	cursor: pointer;
	z-index: 1005;
	opacity: 1;
}

#albums.view-modal h3 {
	text-align: center;
	position: absolute;
	bottom: -45px;
	width: 100%;
}

#albums.view-modal h3 span {
	background: black;
	padding: 4px 12px;
	border-radius: 20px;
	font-weight: bold;
}

#albums.view-modal .image {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}

#albums.view-modal .image img {
	max-width: 100%;
	max-height: 100%;
}

#albums.view-modal .image .prevnext {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 35px;
	margin-top: -16px;
	background: url(/bundles/customers/img/icons/controls.png);
	opacity: 0.75;
	cursor: pointer;
}

#albums.view-modal .image .prev {
	left: 10px;
}

#albums.view-modal .image .next {
	right: 10px;
	background-position: -39px 0;
}

#albums.view-modal .formats {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 400px;
	max-width: 100%;
}

#albums.view-modal .formats.background {
	background: white;
	opacity: 0.95;
}

#albums.view-modal .formats #price_list {
	overflow: auto;
	position: absolute;
	top: 50px;
	left: 0;
	right: 0;
	bottom: 0;
}

#albums.view-modal .formats #price_list .name a {
	margin-left: 5px;
	text-decoration: none;
}

#albums.view-modal .formats .accordion-group {
	margin-bottom: 1px;
	border-radius: 0;
	border: 0;
}

#albums.view-modal .formats .accordion-heading {
	background: #DEDED5;
	font-weight: bold;
}

#albums.view-modal .formats .accordion .row-fluid {
	margin-bottom: 10px;
}

#albums.view-modal .formats .price_alt {
	border-spacing: 0;
	margin-top: 2px;
}

#albums.view-modal .formats .price_alt td {
	font-size: 1rem;
	padding: 0 5px 0 0;
	margin: 0;
	color: darkgray;
	white-space: nowrap;
}

#albums.view-modal .formats .accordion .row-fluid > .span3 {
	vertical-align: middle;
	line-height: 30px;
}

#albums.view-modal .formats .accordion .row-fluid > .spinner {
	text-align: right;
}

#albums.view-modal #order_button {
	position: absolute;
	top: 20px;
	right: 20px;
}

#albums.view-modal #save_button {
	text-align: center;
	margin: 10px auto;
}

#albums input[type=number],
#cart input {
	width: 50px;
	margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
 *                                   Orders
 * --------------------------------------------------------------------------- */

#orders.address legend:not(:first-of-type) {
    margin-top: 20px;
}

#orders.address label.icon {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 80px;
    margin-right: 8px;
    padding: 20px 10px;
    text-align: center;
    background: #EFEFEC;
}

#orders.address label.icon:hover {
    color: #434343;
}

#orders.address label.icon.selected {
    color: #3a87ad;
    background: #dadad7;
}

#orders.address label.icon.selected:hover {
    color: #245065;
}

#orders.address label.icon p {
    position: absolute;
    margin: 0;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: bold;
}

#orders.address label.icon input {
    display: none;
}

#orders.address #addresses {
    position: relative;
}

#orders.address #addresses legend {
	margin: 20px 0 30px 0;
}

#orders.address #addresses legend label {
	margin-left: 20px;
	position: relative;
	top: -2px;
}

#orders.address #addresses .control-group {
	position: relative;
	left: -40px;
}

#orders.address #addresses .row > input.col-xs-3 {
	position: relative;
	left: 14px;
}

#orders.address form > .input-append {
	display: block;
	text-align: center;
	margin-top: 20px;
}

@media(max-width: 480px) {
	#orders.address .radio.inline {
		display: block;
	}
}

#orders.confirm h2 {
	font-size: 22px;
}

#orders.confirm .table-scroll {
	margin-bottom: 15px;
}

#orders.confirm table.items {
	min-width: 500px;
	border-spacing: 0;
}

#orders.confirm .items th {
	border-bottom: 1px solid #444;
	white-space: nowrap;
	padding-top: 10px;
	padding-bottom: 10px
}

#orders.confirm .items td {
	padding: 8px 5px;
}

#orders.confirm .items > * > tr > :last-child {
	background: #EFEFEC;
	text-align: center;
}

#orders.confirm .items .image {
	width: 60px;
}

#orders.confirm .items .image img {
	width: 60px;
	max-width: 60px;
	background: white;
	padding: 2px;
	border: 1px solid #D9D9D9;
}

#orders.confirm .items .name {
	width: 40%;
	padding-left: 15px;
}

#orders.confirm .items .format {
	width: 25%;
}

#orders.confirm .items .quantity, #orders .items .price_per_unit, #orders .items .price, #orders .items .total {
	width: 10%;
	text-align: center;
	white-space: nowrap;
}

#orders.confirm .items .price_per_unit table {
	text-align: left;
	border-spacing: 0;
}

#orders.confirm .items .price_per_unit table td {
	padding: 0 5px;
}

#orders.confirm .items tfoot td {
    white-space: nowrap;
    font-weight: bold;
}

#orders.confirm .items tfoot tr.taxes td {
	font-weight: normal;
    font-size: 11px;
}

#orders.confirm .items tfoot tr.netto td {
	border-top: 1px solid #444;
}

#orders.confirm .items tfoot tr.spacer td:last-child {
	display: none;
}

#orders.confirm .items tfoot tr:last-child td {
	padding-bottom: 12px;
}

#orders.confirm form textarea {
	min-width: 75%;
	max-width: 75%;
}

#orders.confirm label.checkbox {
	max-width: 75%;
}

#orders.confirm label.checkbox a {
	text-decoration: underline;
}

#orders.confirm .disclaimer {
	border-top: 1px solid #E6E6E6;
	padding-top: 10px;
	margin: 0 10px;
	color: #848484;
}

#orders .checkout {
	display: block;
	text-align: center;
	margin: 50px 0;
}


/* ---------------------------------------------------------------------------
 *                                   Partials
 * --------------------------------------------------------------------------- */

/* ---------- Cart ---------- */

#cart {
	position: relative;
	z-index: 10;
}

#cart > * {
	display: inline-block;
}

#cart h6 {
	margin: 0;
	line-height: 44px;
	vertical-align: middle;
	padding: 0 15px;
	cursor: pointer;
	height: 46px;
	z-index: 7;
	position: relative;
}

#cart span:hover > h6 {
	background-color: white;
	border: 1px solid #EBEBEB;
	border-bottom: 0;
	padding: 0 14px;
}

#cart .wrapper {
	position: absolute;
	top: 46px;
	right: 0;
	width: 400px;
	display: none;
	background: white;
	border: 1px solid #EBEBEB;
	margin: 0;
	padding: 0;
	text-align: center;
	z-index: 6;
	max-height: 600px;
	overflow: auto;
	max-width: calc(100vw - 30px);
}

#cart span:hover .wrapper {
	display: block;
}

#cart table {
	text-align: left;
	width: 100%;
	border-spacing: 10px;
	border-collapse: separate;
}

#cart .image {
	width: 86px;
}

#cart .format {
	width: 146px;
}

#cart .spinner {
	width: 66px;
}

#cart .price {
	width: 40px;
	white-space: nowrap;
	text-align: right;
}

#cart img {
	width: 80px;
	background: white;
	padding: 2px;
	border: 1px solid #D9D9D9;
	cursor: pointer;
}

#cart .btn {
	margin: 10px 0;
}

#cart .noItems {
	margin: 10px 0;
}

/* ---------- Checkout bar ---------- */

#checkoutbar {
	margin: 0;
	background-color: #EFEFEC;
	font-size: 13px;
	list-style-type: none;
}

#checkoutbar li {
	text-align: center;
}

#checkoutbar a {
	display: block;
	line-height: 30px;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
}

#checkoutbar .current a,
#checkoutbar .current a:after,
#checkoutbar a.active:hover,
#checkoutbar a.active:hover:after {
	background: #DEDED5;
}

#checkoutbar a:before {
	position: absolute;
	right: -35px;
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 15px solid #DEDED5;
	overflow: hidden;
	content: '.';
}

#checkoutbar a:after {
	position: absolute;
	right: -20px;
	width: 5px;
	height: 0;
	border-top: 15px solid #DEDED5;
	border-bottom: 15px solid #DEDED5;
	border-left: 15px solid transparent;
	overflow: hidden;
	content: '.';
}

#checkoutbar li:last-child a:before, #checkoutbar li:last-child a:after {
	display: none;
}

#checkoutbar .current {
	font-weight: bold;
}

@media(max-width: 768px) {
	#checkoutbar li {
		float: none;
		display: block;
		width: 100%;
		margin: 0;
	}

	#checkoutbar a:before, #checkoutbar a:after {
		border: 0;
	}
}