/* 
 @Description: LOCAL SHOPPER CSS
 @Author: AIT-PVH
 @version :v2.1
 @Update 
 			PVH-03062014: ASetup base
			PVH-0608215: Refactoring and added cart/catalog styles

	Neutral theme colors:
	theme-n-background: rgb(210,210,210);
	theme-n-hl-background: rgb(240,240,240);
	theme-n-d-background: rgb(125, 138, 154);
	theme-n-color: rgb(20,20,20);
	theme-n-btn (normal neutral theme button)

*/

@import url('https://fonts.googleapis.com/css?family=Montserrat|Sanchez');

:root {
		--textred: #CC0000;
		--textgreen: #007E33;
		--textorange: #e65100;
		--textyellow: #ffd600;
		--bgred: #f44336;
		--bggreen: #4caf50;
		--bgorange: #ff9800;
		--bgyellow: #ffc107;
		--loginbg: rgb(255,60,60);
		--loginbgimg: url('/local-css/local-images/style-2016/Pepperminds-namelogo-white-rgb-large.png');
		--boxheaderlogo: url('/local-css/Images/pepper-icon/Pepperminds-pepper-transparent-circle-white.png');
}



body {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
}

		body.touch, body.notouch {
				overflow-x: hidden;
		}



/* IE img pixel fix*/
img {
		-ms-interpolation-mode: bicubic;
		vertical-align: middle;
}


/* ANIMATED CSS FASTER*/
.animated {
		-webkit-animation-duration: .4s;
		animation-duration: .4s;
		-webkit-animation-delay: .4s;
		animation-delay: .4s;
}

#mr-view-container, #sr-group-container, #sr-details-container {
		/*    overflow-x:hidden;*/
		display: flex;
		min-height: 0;
}

		#mr-view-container > .widget,
		#sr-group-container > .widget,
		#sr-details-container > .widget {
				margin-bottom: .2em;
				display: flex;
				flex: 1 1 auto;
				min-height: 0;
				flex-direction: column;
		}

				#mr-view-container > .widget.focus,
				#sr-group-container > .widget.focus, #sr-details-container > .widget.focus {
						border-color: rgb(160,160,160);
				}




/* BOOTSTRAP / BO OVERRULEZ FOR SHOPPER */

.row {
		margin: 0;
}





/* breadcrumbs in search header: */
#search-container .breadcrumb {
		display: inline-block;
		border: 0;
		line-height: normal;
		background: none;
		height: 39px;
}

		#search-container .breadcrumb a,
		#search-container .breadcrumb span {
				background: none;
				font-size: 12px;
				padding: 0 6px 0 24px;
				display: inline-block;
				line-height: 40px;
				border-right: 1px solid rgba(0,0,0,.2);
		}

		#search-container .breadcrumb span {
				border: none;
				padding: 0 8px 0 4px;
		}

				#search-container .breadcrumb span i {
						margin-right: 6px;
						font-size: 14px;
				}

		#search-container .breadcrumb a::before {
				box-shadow: none;
				background: #999;
				top: 3px;
				left: 2px;
				font-weight: 400;
				height: 16px;
				width: 16px;
				line-height: 16px;
		}

		#search-container .breadcrumb a::after {
				display: none;
		}




.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
		display: block;
		max-width: 100%;
		height: auto;
		object-fit: cover;
}

.img-rounded {
		border-radius: 6px
}

.img-thumbnail {
		padding: 4px;
		line-height: 1.42857143;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 2px;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		display: inline-block;
		max-width: 100%;
		height: auto
}

.img-circle {
		border-radius: 50%
}

.circle-img {
		border-radius: 100% 100% 100% 100%;
}


.dropdown-menu .divider {
		border: 0;
		height: 1px;
		margin: 0;
		overflow: hidden;
}


#mediaModal .form-horizontal input:not([type="checkbox"]),
#mediaModal .form-horizontal select,
#mediaModal .form-horizontal textarea,
#mediaModal .form-horizontal .date-fixer,
#mediaModal .form-horizontal .select2 {
		width: 100%;
}

.popover {
		border-radius: 3px;
		max-width: 380px;
		z-index: 1060;
}

.popover-title .btn {
		margin: -.3em -.6em 0 0;
		padding: .2em .4em;
}

.popover.right .arrow {
		top: 29%;
}


.table {
		margin-bottom: .5em;
}

.label, .badge {
		background-color: rgb(110, 122, 137);
}

.form-horizontal .control-label .input-required {
		position: absolute;
		right: -10px;
		top: 4px;
		font-size: 18px;
}

.form-horizontal .input-append .add-on:last-child,
.form-horizontal .input-append .btn:last-child,
.form-horizontal .input-append .btn-group:last-child > .dropdown-toggle {
		-webkit-box-flex: 0;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		white-space: nowrap;
}



.badge.badge-up {
		font-size: 10px;
		padding: 2px 6px;
		-webkit-transform: translate(0,-80%);
		-moz-transform: translate(0,-80%);
		-ms-transform: translate(0,-70%);
		transform: translate(0,-80%);
}

.badge.badge-mini {
		font-size: .6rem;
		padding: 1px 3px;
}



/* Specials AND EXTRAS */

.flex-container {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
}

.flex {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}

.flex-nowrap {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
}

.flex-wrap {
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
}

.flex-cols {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
}

.flex-rows {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
}

.justify-between {
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
}

.justify-start {
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
}

.justify-end {
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
}

.justify-center {
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}

.justify-around {
		-ms-flex-pack: distribute;
		justify-content: space-around;
}

.flex-spacer {
		-webkit-box-flex: 1;
		flex-grow: 1;
}


.flex-item-1 {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
}

.flex-item-2 {
		-webkit-box-flex: 1;
		-ms-flex: 2 1 auto;
		flex: 2 1 auto;
}

.flex-item {
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		-webkit-flex: 1 0 auto;
		flex: 1 0 auto;
}




.aside-panel {
		display: block;
		padding: .5em;
}

		.aside-panel::before,
		.aside-panel::after {
				content: " ";
				display: table;
				line-height: 0;
		}

		.aside-panel::after {
				clear: both;
		}

a.loading {
		color: #999;
}

		a.loading::after {
				font-family: fontawesome;
				content: "\f1ce";
				color: #999;
				right: 5px;
				top: 2px;
				height: 37px;
				width: 37px;
				position: absolute;
				text-align: center;
				font-size: 18px;
				-webkit-animation: spinloader 1s infinite linear;
				-moz-animation: spinloader 1s infinite linear;
				animation: spinloader 1s infinite linear;
				-webkit-font-smoothing: antialiased;
				text-rendering: auto;
		}


#preloader {
		position: fixed;
		z-index: 10000;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(255,255,255,.8);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-content: center;
		-ms-align-content: center;
		align-content: center;
		-ms-flex-align: center;
		align-items: center;
		min-height: 24em;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
}

		#preloader .pre-content {
				-ms-flex: none;
				-webkit-flex: none;
				flex: none;
				max-width: 50%;
		}

				#preloader .pre-content .loader {
						height: 50px;
						width: 50px;
						border-width: 5px;
						border-style: solid;
						border-color: rgba(200, 200, 200, 0.75) rgba(200, 200, 200, 0.75) rgba(200, 200, 200, 0.25) rgba(200, 200, 200, 0.25);
						border-radius: 100%;
						-webkit-animation: spinloader .8s linear infinite;
						-moz-animation: spinloader .8s linear infinite;
						animation: spinloader .8s linear infinite;
				}


@-webkit-keyframes spinloader {
		from {
				-webkit-transform: rotate(0deg);
		}

		to {
				-webkit-transform: rotate(360deg);
		}
}

@-moz-keyframes spinloader {
		from {
				-moz-transform: rotate(0deg);
		}

		to {
				-moz-transform: rotate(360deg);
		}
}

@keyframes spinloader {
		from {
				transform: rotate(0deg);
		}

		to {
				transform: rotate(360deg);
		}
}







/*-------------------
				HEADER
--------------------*/
#header {
		z-index: 100;
		position: fixed;
		display: flex;
		top: 0;
		left: 0;
		width: 100vw;
		box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

		#header nav {
				flex: 1 1 auto;
				display: flex;
				flex-wrap: wrap;
		}

		#header .nav-bar {
				color: rgb(255,255,255);
				font-size: 1rem;
				padding: .4em;
		}

		#header .nav {
				display: flex;
				flex-direction: row;
				margin: 0;
		}


		#header .nav-header-left {
				float: none;
				margin: 0;
		}

		#header .nav-header-right {
				float: none;
				margin: 0;
				justify-content: flex-end;
		}

#menu-header .nav .dropdown {
		display: flex;
		flex: 0 0 auto;
		float: none;
		margin: 0;
		padding: 0;
}

#header a.toggle-small-menu {
		display: inline-block;
		line-height: 44px;
		padding: 0 10px 0 10px;
		text-align: center;
		font-size: 20px;
		vertical-align: middle;
		color: #fff;
		-webkit-flex: 0 1 48px;
		-ms-flex: 0 1 48px;
		flex: 0 1 48px;
}


#header .logo-link {
		display: flex;
		width:26px;
		height: 40px;
		margin:0 .25em;
		background-image: var(--boxheaderlogo);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
}


#header .nav .dropdown [data-toggle="dropdown"],
#header .nav .dropdown a {
		display: flex;
		flex: 0 0 auto;
		height: 48px;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: .8em .4em;
		font-size: .8rem;
		position: relative;
		text-shadow: 0 0 1px rgba(0,0,0,.4);
		color: #fff;
		border-right: 1px solid rgba(0,0,0,.2);
		box-shadow: none;
		border-radius: 0;
		-webkit-transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		-moz-transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		white-space: nowrap;
}


#header .nav .dropdown.active > a,
#header .nav .dropdown > a:hover,
#header .nav .dropdown.open > a {
		background-color: rgba(255,255,255,.2);
		box-shadow: none;
		-webkit-transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		-moz-transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

#header .nav-header-right .dropdown a,
#header .nav-header-right .dropdown > span {
		border-right: 0;
		border-left: 1px solid rgba(0,0,0,.2);
}

#header .nav .dropdown-menu {
		border: 0 solid rgba(200,200,200,1);
		background-color: rgba(250,250,250,1);
		border-radius: 0;
		box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
		list-style: none outside none;
		margin: 0;
		width: auto;
		float: none;
		min-width: 160px;
		padding: 0;
		position: absolute;
		text-shadow: none;
		top: 100%;
		left: 0;
		right: auto;
		-webkit-transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		-moz-transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
		transition: all 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
}

		#header .nav .dropdown-menu::after {
				display: none; /* little arrow */
		}

#header .nav-header-right .dropdown:last-child .dropdown-menu {
		right: 0px;
		left: auto;
}

#header .nav .dropdown-menu.loading-list {
		padding-bottom: 25px;
}

		#header .nav .dropdown-menu.loading-list::after {
				position: absolute;
				font-family: FontAwesome;
				font-size: 16px;
				color: #888;
				bottom: 0;
				left: 0;
				padding: 4px;
				width: 100%;
				content: '\f1ce';
				text-align: center;
				-webkit-animation: spinloader .8s linear infinite;
				-moz-animation: spinloader .8s linear infinite;
				animation: spinloader .8s linear infinite;
		}


#header .nav .dropdown-menu > li > a,
#header .nav .dropdown-menu > li > span,
#header .nav .dropdown-menu > li > form a {
		text-shadow: none;
		box-shadow: none;
		justify-content: flex-start;
}

		#header .nav .dropdown-menu > li > a:hover,
		#header .nav .dropdown-menu > li > a:focus,
		#header .nav .dropdown-submenu:hover > a,
		#header .nav .dropdown-submenu:focus > a,
		#header .nav .dropdown-wrapper li a:hover,
		#header .nav .dropdown-wrapper li a:focus,
		.notouch #header .nav .dropdown-menu a:hover {
				text-decoration: none;
				box-shadow: none;
		}

#menu-header .nav .dropdown-menu a i {
		font-size: 18px;
		margin: 0 15px 0 5px;
		position: relative;
}

#menu-header .nav .dropdown-menu a .title {
}

#menu-header .nav .dropdown-menu a .date {
		border-radius: 3px;
		font-size: 10px;
		background-color: rgb(240,240,240);
		color: rgb(100,100,100);
		margin-right: .5em;
}

#menu-header .nav .dropdown-menu li:last-of-type a {
		border-bottom: 0;
}


#menu-header .nav > ul > li {
		display: block;
		position: relative;
}

		#menu-header .nav > ul > li.dropdown {
		}

				#menu-header .nav > ul > li.dropdown a img {
						max-height: 30px;
				}


#menu-header .nav .dropdown-menu li .dropdown-menu-title {
		display: block;
		font-weight: bold;
		margin: -1px;
		padding: 5px 10px;
}

#menu-header .nav .dropdown-menu li p,
#menu-header .nav .dropdown-menu li a:not(.btn) {
		font-size: 1rem;
		font-weight: 400;
		margin: 0;
		padding: .4em .5em;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		justify-content: flex-start;
		align-content: center;
		color: rgb(40,40,40);
}

#menu-header .nav .dropdown-menu li a > span {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
}

		#menu-header .nav .dropdown-menu li a > span.badge {
				-webkit-box-flex: 0;
				-ms-flex: 0 0 auto;
				flex: 0 0 auto;
				margin-left: auto;
		}

#menu-header .nav .dropdown-menu li p {
		font-weight: bold;
}

#menu-header .nav .dropdown-menu li a .author {
		display: block;
}

#menu-header .nav .dropdown-menu li a .preview {
		display: block;
}

#menu-header .nav .dropdown-menu li a .time {
		font-size: 12px;
		font-style: italic;
		font-weight: 600;
		display: block;
		float: right;
}

#menu-header .nav .dropdown-menu li.view-all a i {
		float: right;
		margin-top: 4px;
}

#menu-header .nav .dropdown-menu.notifications li > a > .label {
		margin-right: 2px;
		padding: 2px 4px;
		text-align: center !important;
}

#menu-header .nav .thread-image {
		margin-right: 8px;
		float: left;
		height: 50px;
		width: 50px;
}

#menu-header .nav > ul > li.dropdown .dropdown-toggle .badge {
		border-radius: 12px 12px 12px 12px !important;
		font-size: 11px !important;
		font-weight: 300;
		padding: 2px 4px;
		position: absolute;
		right: 4px;
		text-align: center;
		text-shadow: none !important;
		top: 2px;
}



@media (min-width: 769px) {

		#header .nav .dropdown [data-toggle="dropdown"], #header .nav .dropdown a {
				padding: 1em .5em;
				font-size: 1rem;
		}

		#header .nav-bar {
				display: none;
		}

		.logo-link {
				height: 100%;
		}
}



#header-bottom-row .flex-list {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
}

		#header-bottom-row .flex-list li a {
				display: block;
				position: relative;
				overflow: hidden;
				text-align: center;
				padding: .8em 1.2em;
				color: #fff;
				border-left: 1px solid rgba(0,0,0,.2);
				cursor: pointer;
				text-decoration: none;
		}


#header nav.header-breadcrumbs {
		-webkit-flex: 0 1 75%;
		-ms-flex: 0 1 75%;
		flex: 0 1 75%;
}

		#header nav.header-breadcrumbs a,
		#header nav.header-breadcrumbs span {
				line-height: 44px;
		}


ul.notifications li,
#header #todo-menu .dropdown-menu {
		min-width: 300px;
}

.group-name > .list-item {
		font-size: 14px;
		font-weight: 800;
		margin: 0;
		padding: 8px;
		white-space: nowrap;
		display: block;
		clear: both;
		background-color: #dfdfdf;
}

#header .scroll-wrapper {
		margin: 0;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		max-height: 360px;
}

#header .nav .scroll-wrapper::-webkit-scrollbar,
#header .nav .scroll-wrapper::-webkit-scrollbar-button {
		width: 4px;
		height: 4px;
		border-radius: 4px;
		background-color: rgba(0,0,0,.2);
}

#header .scroll-wrapper li {
		display: block;
}


.navbar-toggle {
		border: none;
		border-radius: 0;
		margin-top: 5px;
		margin-bottom: 4px;
}

		.navbar-toggle span {
				font-size: 16px;
		}



/* ---------------------------------------------------------------------- */
/*	Dropdown wrapper list 
/* ---------------------------------------------------------------------- */
.dropdown-wrapper ul {
		list-style: none;
		margin: 0;
		padding: 0;
}

.dropdown-wrapper li a {
		font-size: 12px;
		margin-left: 0 !important;
		padding: 10px 10px 10px 10px !important;
		position: relative;
		display: block;
		border-bottom: 1px solid #efefef;
}

		.dropdown-wrapper li a:hover,
		.dropdown-wrapper li a:focus {
		}

		.dropdown-wrapper li a i {
				font-size: 18px;
				margin: 0 5px 0 0;
				position: absolute;
				left: 10px;
		}

.dropdown-wrapper li .label,
.dropdown-wrapper li .badge {
		position: absolute;
		right: 10px;
		padding: 6px;
}


/*---------------------------
		USER LIST
--------------------------*/
.current-user .dropdown-menu li a {
		border-bottom: none !important;
}




/* ----------------------- 
				ToDo List
 ----------------------- */
.todo {
		list-style: none;
		margin: 0;
		padding: 0;
}

		.todo li a {
				font-size: 12px;
				margin-left: 0 !important;
				padding: 10px 10px 10px 35px !important;
				position: relative;
				display: block;
		}

		.todo li .todo-actions:hover, .todo li .todo-actions:focus {
		}

		.todo li .todo-actions i {
				font-size: 18px;
				margin: 0 5px 0 0;
				position: absolute;
				left: 10px;
		}

		.todo li .label {
				position: absolute;
				right: 10px;
				padding: 6px;
		}


/*--------------------
 Header Breadcrumbs
 --------------------*/
.header-breadcrumbs {
		float: left;
		position: relative;
		display: block;
		counter-reset: flag;
		overflow: hidden;
}


		.header-breadcrumbs > a,
		.header-breadcrumbs > span {
				position: relative;
				display: inline-block;
				line-height: 50px;
				border-radius: 0;
				padding: 0 16px 0 12px;
				color: #fff;
				text-decoration: none;
				border-right: 1px solid rgba(0,0,0,.2);
				border-left: 1px solid rgba(0,0,0,.1);
				text-shadow: 0 -1px 0 rgba(0,0,0,.8);
		}

				.header-breadcrumbs > a + a,
				.header-breadcrumbs > span + span {
						border-left: 0;
				}

						.header-breadcrumbs > a + a:last-child,
						.header-breadcrumbs > span + span:last-child {
								border-right: 0;
								background-color: transparent;
						}


				.header-breadcrumbs > a::after,
				.header-breadcrumbs > span::after {
						box-shadow: none;
						left: 0;
						top: 33%;
						content: " ";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
						border: 6px solid transparent;
						border-left-color: rgba(255,255,255,.5);
						/*z-index:1;*/
				}

				.header-breadcrumbs > a.base-menu-link,
				.header-breadcrumbs > span.base-menu-link {
						text-shadow: 0 -1px 0 rgba(0,0,0,.4);
				}


		.header-breadcrumbs .toggle-small-menu {
				display: none;
				color: #fff;
				text-shadow: 0 0 0 rgba(0,0,0,.5);
				border-right: 1px solid rgba(0,0,0,.2);
				line-height: 44px;
				padding: 0 14px;
				font-size: 18px;
				cursor: pointer;
		}


/*-------------------------
		KEYBOARD SHORTCUTS
-------------------------*/

.touch #header-keyboard-legenda {
		display: none !important;
}

#header-msg-bar {
		position: relative;
		-webkit-flex: 0 1 20%;
		-ms-flex: 0 1 20%;
		flex: 0 1 20%;
		overflow: hidden;
		text-align: right;
}




		#header-msg-bar .msg-content {
				position: absolute;
				overflow: hidden;
				top: 0;
				right: 0;
				height: 44px;
				text-align: left;
				color: #fff;
				line-height: 44px;
				padding-right: 12px;
				width: auto;
				background-color: rgba(255,255,255,.1);
				opacity: .2;
				-webkit-transform: translate3d(100%,0,0);
				-moz-transform: translate3d(100%,0,0);
				-ms-transform: translate3d(100%,0,0);
				transform: translate3d(100%,0,0);
				-webkit-transition: all .4s ease-out;
				-moz-transition: all .4s ease-out;
				transition: all .4s ease-out;
		}

				#header-msg-bar .msg-content.open-msg {
						opacity: 1;
						-webkit-transform: translate3d(0,0,0);
						-moz-transform: translate3d(0,0,0);
						-ms-transform: translate3d(0,0,0);
						transform: translate3d(0,0,0);
				}

				#header-msg-bar .msg-content .fa {
						display: inline-block;
						font-family: FontAwesome;
						font-size: 18px;
						position: relative;
						width: 44px;
						margin-right: 2px;
						text-align: center;
						line-height: 44px;
						background-color: rgba(0,0,0,.01);
				}


#keyboard-shortcuts {
		position: fixed;
		z-index: 99;
		top: 94px;
		right: 5px;
		height: auto;
		width: 340px;
}




/*-------------------------------
			MAIN CONTAINER
-------------------------------*/
#main-container {
		padding-left: 0;
		padding-right: .5em;
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		display: flex;
		margin-top: 4em;
		height: calc(100vh - 4em);
}

.notouch #main-container {
		margin-left: 0;
}

#main-container.external-view {
		margin-top: 46px;
		height: calc(100vh - 46px);
}

@media (max-width:768px) {

		#main-container.external-view {
				overflow-y: scroll;
				-webkit-overflow-scrolling: touch;
		}
}

/*---------------------------
		MAIN (SIDE) NAVIGATION
----------------------------*/
#side-menu {
		position: fixed;
		width: 300px;
		top: 96px; /* Initial height of header */
		left: 0;
		bottom: 0;
		z-index: 90;
		box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
		overflow-x: hidden;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
}


.navigation-small #side-menu {
		-webkit-transform: translate3d(-320px,0,0);
		-moz-transform: translate3d(-320px,0,0);
		-ms-transform: translate3d(-320px,0,0);
		transform: translate3d(-320px,0,0);
}

#side-menu #main-navigation {
		-webkit-box-flex: 1;
		-webkit-flex: 1 1 auto;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-box-sizing: inherit;
		-moz-box-sizing: inherit;
		box-sizing: inherit;
		-webkit-overflow-scrolling: touch;
}

#side-menu .side-menu-content {
		-webkit-transform: translate3d(0);
		-moz-transform: translate3d(0);
		-ms-transform: translate3d(0);
		transform: translate3d(0);
		-webkit-transition: all .3s ease-in-out;
		-moz-transition: all .3s ease-in-out;
		transition: all .3s ease-in-out;
}

#side-menu #main-navigation::-webkit-scrollbar,
#side-menu #main-navigation::-webkit-scrollbar-button {
		width: 4px;
		height: 4px;
}


#side-menu .navigation-toggler {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		display: block;
		margin: 0;
		padding: 0 10px 0 10px;
		cursor: col-resize;
		text-align: center;
		line-height: 44px;
		height: 44px;
		background-color: rgba(150,150,150,.6);
		color: #fff;
		font-size: 20px;
}

.navigation-small #side-menu .navigation-toggler {
		position: fixed;
		/*z-index:100;*/
		text-align: right;
		left: 33px;
}


.touch #side-menu .navigation-toggler {
		text-align: right;
}

.main-navigation-menu,
.main-navigation-menu li,
.main-navigation-menu ul {
		margin: 0;
		padding: 0;
		list-style: none;
		display: block;
		position: relative;
}

		.main-navigation-menu ul {
				height: auto;
				overflow: hidden;
				max-height: 0;
				-webkit-transition: max-height .4s;
				-moz-transition: max-height .4s;
				transition: max-height .4s;
		}

		.main-navigation-menu li.open > ul {
				max-height: 100em;
				-webkit-transition: max-height .5s;
				-moz-transition: max-height .5s;
				transition: max-height .5s;
		}


		.main-navigation-menu a {
				display: block;
				text-decoration: none;
				font-size: 16px;
				padding: 12px 4px;
				border-bottom: 1px solid rgb(200,200,200);
		}


				.main-navigation-menu a .menu-icon {
						display: inline-block;
						text-align: left;
						width: 24px;
				}


		.main-navigation-menu > ul > li > a .menu-icon {
				margin-right: 18px;
				padding-left: 22px;
		}

		.main-navigation-menu > ul > ul li > a .menu-icon {
				margin-right: 20px;
				padding-left: 0;
		}

		.main-navigation-menu .open > ul > li > a {
				padding-left: 32px;
		}

		.main-navigation-menu .open > ul > li:first-of-type > a {
				box-shadow: 0 8px 6px -4px rgba(0,0,0,.2) inset;
		}


		.main-navigation-menu ul ul .active a {
				color: rgb(1,136,204);
		}

		.main-navigation-menu .open > a {
				border-bottom: 1px solid #bbb;
		}

		.main-navigation-menu .open {
				background: #f5f5f5;
		}



		.main-navigation-menu > li.open + li,
		.main-navigation-menu ul > li.open + li {
				box-shadow: inset 0 6px 14px -8px rgba(0,0,0,0.6);
				border-top: 0px solid #ababab;
		}


		/* desktop hovering */

		.main-navigation-menu > li a .badge,
		.main-navigation-menu > li a .label {
				float: right;
				margin-right: 6px;
				margin-top: 1.1em;
				line-height: 1;
				display: inline-block;
		}

		.main-navigation-menu li a .nav-icon {
				position: absolute;
				right: 0;
				width: 24px;
				height: 25px;
				text-align: center;
				color: #999;
				-webkit-transition: transform 0.3s ease-in-out;
				-moz-transition: transform 0.3s ease-in-out;
				transition: transform 0.3s ease-in-out;
		}

ul.main-navigation-menu li.open > a > .nav-icon {
		-webkit-transform: rotate(-180deg);
		-ms-transform: rotate(-180deg);
		-moz-transform: rotate(-180deg);
		transform: rotate(-180deg);
}


/* DESKTOP Small bar view*/

.notouch #header a.toggle-small-menu {
		padding: 0 16px;
}

.notouch.navigation-bar #side-menu {
		width: 50px;
		overflow: visible;
}

.notouch.navigation-bar #main-container {
		margin-left: 0;
}

.notouch #side-menu #main-navigation {
		overflow: visible;
}

#side-menu.hover-space,
#side-menu .hover-space-after {
		display: none;
}


.notouch.navigation-bar .main-navigation-menu > li {
		white-space: nowrap;
		position: relative;
}

		.notouch.navigation-bar .main-navigation-menu > li a {
				padding: 0.719em .5em;
		}

		.notouch.navigation-bar .main-navigation-menu > li > a > .title {
				display: none;
				padding-left: 1.5em;
				font-weight: 700;
		}

		.notouch.navigation-bar .main-navigation-menu > li > a > .menu-icon {
				padding: 0 .6em;
		}

		.notouch.navigation-bar .main-navigation-menu > li > a > .nav-icon {
				display: none;
		}

		.notouch.navigation-bar .main-navigation-menu > li ul li .nav-icon {
				-webkit-transform: rotate(-90deg);
				transform: rotate(-90deg);
		}


		.notouch.navigation-bar .main-navigation-menu > li ul {
				display: block;
				position: absolute;
				top: 44px;
				left: -40em;
				width: 250px;
				max-height: none;
				z-index: 10;
				margin-top: 0;
				margin-left: 0;
				vertical-align: top;
				overflow: inherit;
				background: rgba(250,250,250,1);
				border-right: 1px solid rgba(125, 138, 154,1);
				border-bottom: 0 solid rgba(125, 138, 154,1);
				border-top: 0px solid rgba(125, 138, 154,1);
				box-shadow: 0 2px 6px 0px rgba(0,0,0,.3);
		}


		/* on hover */
		.notouch.navigation-bar .main-navigation-menu > li:hover > ul {
				left: 50px;
		}

.notouch.navigation-bar .main-navigation-menu ul > li:hover ul {
		left: 100%;
		top: -1px;
		z-index: 15;
		width: 280px;
		border: 1px solid rgba(125, 138, 154,1);
		max-height: 222px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: scrollbar;
}


.notouch.navigation-bar .main-navigation-menu > li:hover {
		width: 300px;
		border: 0 solid rgba(125, 138, 154,0);
}

.notouch.navigation-bar .main-navigation-menu li ul li:not(.active) a:hover {
		background-color: rgb(240,240,240);
}

.notouch.navigation-bar .main-navigation-menu > li:hover .title {
		display: inline-block;
}




.notouch.navigation-bar .main-navigation-menu > li:hover > ul > .hover-space {
		display: block;
		position: absolute;
		z-index: -1;
		width: 120%;
		height: 160%;
		left: 0;
		top: 0%;
}



@media screen and (min-height:900px) {
		.notouch.navigation-bar .main-navigation-menu ul > li:hover ul {
				max-height: 400px;
		}
}


.notouch.navigation-bar #side-menu .main-navigation-menu ul > li:hover .hover-space-after {
		display: block;
		height: 300%;
		width: 130%;
		z-index: 1;
		position: absolute;
		left: 100%;
		top: -40px;
}



.notouch.navigation-bar .main-navigation-menu ul > li:hover ul::-webkit-scrollbar {
		width: 8px;
		background: rgba(0,0,0,0);
}

.notouch.navigation-bar .main-navigation-menu ul > li:hover ul::-webkit-scrollbar-thumb {
		background: rgba(100,100,100,.8);
}






/*--------------------
				CONTENT
---------------------*/

#result-list,
#group-form,
#group-table,
#group-list,
#group-lookup,
#group-selection {
		display: block;
}

#content, #artifact {
		position:relative;
		margin-left: .4em;
		margin-right: .3em;
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;	
		max-width: 99vw; /* PVH QUICK FIX */
}

		#content > article,
		#artifact > article {
				display: flex;
				flex-direction: column;
				flex: 1 1 auto;
		}

article.overview-container {
		max-width: 99vw; /* PVH QUICK FIX */
}

#content > article#result-selection,
#artifact > article#result-selection {
		flex: 0 0 auto;
}


#content > article .widget-header,
#artifact > article .widget-header {
		flex: 0 0 auto;
}

#content > article .widget-content,
#artifact > article .widget-content {
		flex: 1 1 auto;
}

#content > article .widget-toolbar,
#artifact > article .widget-toolbar {
		flex: 0 0 auto;
}


/* Content widget fixes */
.widget-content .list-items {
		outline: 0;
}

		.widget-content .list-items li .fa-angle-right {
				display: none;
		}

		.widget-content .list-items li {
				font-size: 14px;
				line-height: 40px;
		}

		.widget-content .list-items > span {
				line-height: 1.3;
		}

		.widget-content .list-items li.active {
				color: rgb(255,255,255);
		}

		.widget-content .list-items li > .fa {
				line-height: 40px;
				color: rgb(100,100,100);
		}



@media (max-width:1200px) {

		.widget-content .list-items li {
				font-size: 13px;
		}

				.widget-content .list-items li > .fa.fa-2x {
						font-size: 22px;
				}
}

#content .group-box,
#artifact .group-box {
		position: relative;
		padding-bottom: .2em;
		padding-top: .2em;
		margin-top: .4em;
		border-top: 1px solid rgb(125, 138, 154);
}

		#content .group-box:first-child,
		#artifact .group-box:first-child {
				border-top: 0;
		}

		#content .group-box[data-shownlabel="Y"] {
				margin-top: 34px;
		}

				#content .group-box[data-shownlabel="Y"]::before,
				#artifact .group-box[data-shownlabel="Y"]::before {
						content: attr(data-label);
						font-size: 16px;
						top: -24px;
						position: absolute;
						left: 4px;
				}

.widget-header .group-box-menu ul {
		list-style: none;
		margin: 0;
}

.widget-header .group-box-menu li:nth-child(1) {
		padding-left: 5px;
}

.widget-header .group-box-menu li a {
		padding: 6px 4px;
		color: #444;
		background-color: #efefef;
		border: 1px solid #aaa;
		margin-right: .5em;
		border-radius: 2px;
}

.widget-header .group-box-menu {
		position: relative;
		border-top: 1px solid #CCC;
}


/*-------------------------
  Datatables
--------------------------*/

.dataTable .input-append {
		display: flex;
		flex-direction: row;
}

.dataTable input:not([style="display:none"]) + .btn:not(.search-btn) {
		margin-left: -1px;
}

.dataTable input.table-edit-input {
		flex: none;
		margin: 0;
		width: 70px;
}

/*---------------------------
	shpr boxmodals
------------------------------*/

#boxmodal-container {
		position: fixed;
		display: none;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		height: 100%;
		width: 100%;
		top: 0;
		bottom: 0;
		z-index: 1000;
		background-color: rgba(255,255,255,.5);
}

		#boxmodal-container.active {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
		}

		#boxmodal-container .boxmodal {
				-webkit-box-flex: 0;
				-webkit-flex: 0 1 70%;
				-ms-flex: 0 1 70%;
				flex: 0 1 70%;
				background-color: rgb(255,255,255);
				border: 1px solid rgba(125, 138, 154,1);
				border-radius: 3px;
				box-shadow: 3px 3px 12px 0 rgba(0,0,0,.4);
		}

.boxmodal-header {
		-webkit-align-content: flex-start;
		-ms-flex-line-pack: start;
		align-content: flex-start;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		background-color: rgba(220,220,220,1);
		padding: 4px;
}

		.boxmodal-header h3 {
				font-size: 18px;
				margin: 0;
				padding: 0 .5em 0 .5em;
				-webkit-box-flex: 2;
				-webkit-flex: 2 1 auto;
				-ms-flex: 2 1 auto;
				flex: 2 1 auto;
		}

		.boxmodal-header .box-actions {
				-webkit-box-flex: 0;
				-webkit-flex: 0 1 auto;
				-ms-flex: 0 1 auto;
				flex: 0 1 auto;
				-ms-flex-item-align: end;
				align-self: flex-end;
		}

				.boxmodal-header .box-actions .btn {
						margin: 4px;
				}

.boxmodal-body {
		padding: .5em;
}

/*---------------------------
	Overlay screens
------------------------------*/



/* LOGIN SCREEN*/
html.touch,
.touch body {
		height: 100%;
		min-height: 100%;
}

#app-login-container, #overlay-box-container.active {
		background-color: var(--loginbg);
		background-image: var(--loginbgimg);
		background-position: center 95%;
		background-repeat: no-repeat;
		background-size: 28%;
}

.style-one {
		font-family: 'Montserrat',serif;
		color: rgb(255,255,255);
}

.style-two {
		font-family: 'Sanchez',serif;
		color: rgb(106,244,118);
}



.touch #app-login,
.touch #app-login-container {
		height: 100%;
}








/*------------------------------

SHPR CART MENU

-----------------------------*/



/* IF Shpr cart menu  and content in header of page */
#cart-menu > ul {
		left: auto;
		right: 0;
		position: absolute;
}


/* cart header menu content */
#cart-menu-in-header {
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		transition: all .3s ease-out;
}

		#cart-menu-in-header.open {
				-webkit-transition: all .3s ease-out;
				-moz-transition: all .3s ease-out;
				transition: all .3s ease-out;
		}



#cart-menu ul > li {
		background: #fff;
}



#cart-menu .cart-table-header th {
		font-size: 14px;
}


/* cart side menu content */
#cart-side-menu {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap;
		position: fixed;
		right: 0;
		top: 95px;
		bottom: 0;
		width: 370px;
		background: #f5f5f5;
		border-left: 2px solid #ddd;
		border-top: 0;
		z-index: 80;
		-webkit-transform: translate3d(370px,0,0);
		-moz-transform: translate3d(370px,0,0);
		-ms-transform: translate3d(370px,0,0);
		transform: translate3d(370px,0,0);
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		transition: all .3s ease-out;
}

cart-menu-content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
}


.cart-menu-open #cart-side-menu {
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		-webkit-transition: all .3s ease-out;
		-moz-transition: all .3s ease-out;
		transition: all .3s ease-out;
}

#cart-side-menu .cart-menu-content {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
}

#cart-side-menu .cart-table-content {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		padding-left: 2px;
		border-bottom: 2px solid #ccc;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
}

#cart-side-menu .cart-menu-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50px;
		flex: 0 0 50px;
		align-items: center;
}

		#cart-side-menu .cart-menu-header > span {
				-ms-flex: 1 0 0%;
				-webkit-flex: 1 0 0%;
				flex: 1 0 0%;
				display: inline-block;
				font-size: 16px;
				padding: .5em;
				margin-top: .4em;
				font-weight: 700;
		}

		#cart-side-menu .cart-menu-header span.input-append {
				margin: 0;
				white-space: normal;
		}

		#cart-side-menu .cart-menu-header .menu-header-articles {
				background-color: rgba(0,0,0,.8);
		}

.shpr-menu-cart-table tbody td {
		position: relative;
}

		.shpr-menu-cart-table tbody td:nth-child(2) {
				font-size: 12px;
		}

		.shpr-menu-cart-table tbody td:nth-child(3) {
				border-right: 1px solid rgba(0,0,0,.1);
		}

		.shpr-menu-cart-table tbody td:nth-child(3),
		.shpr-menu-cart-table tbody td:nth-child(4),
		.shpr-menu-cart-table tbody td:nth-child(5) {
				white-space: nowrap;
		}

		.shpr-menu-cart-table tbody td:last-child {
				padding-right: .5em;
		}

.cart-table-overview {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 40px;
		flex: 0 0 40px;
		flex-flow: column nowrap;
}

.shpr-menu-cart-table .btn-small {
		padding: 2px 10px;
}

.shpr-menu-cart-table .cart-aantal {
		padding-left: 12px;
}

.shpr-menu-cart-table .cart-article {
		cursor: pointer;
}

.shpr-menu-cart-table .badge-up {
		position: absolute;
		top: 2px;
		transform: translate(0,0);
		left: 0;
		padding: 0 4px;
}



/* NOT USED ATM */
#cart-calendar-container {
		display: none;
}
/*

#cart-calendar-container{
	display:none;
  z-index: 10;
  position: absolute;
  top: 44px;
  width: 100%;
	max-height: 0;
	overflow:hidden;
  border-bottom: 1px solid #ddd;
  background-color: rgba(250,250,250,1);
	 -webkit-transition: all .2s ease-in-out;	
	  -moz-transition: all .2s ease-in-out;	
	 transition: all .2s ease-in-out;   
}
#cart-calendar-container.open{
	max-height: 450px;
	  -webkit-transition: all .2s ease-in-out;
		  -moz-transition: all .2s ease-in-out;
		 transition: all .2s ease-in-out;		 
}

#cart-calendar-container .datepicker-inline,
#cart-calendar-container .datepicker-inline table{
	width:100%;
}
#cart-calendar-container .next,
#cart-calendar-container .prev{
	cursor:pointer;
}
#cart-calendar-container td.today{
	 background-color: rgba(0,0,0,.2);	
}
#cart-calendar-container td.active{
  background-color: rgba(255,255,255,1);
  border-radius: 3px;
  font-weight: 700;
	border:1px solid #ddd;	
}
*/


/*

	AIT OCI CART Module v.1.2
	
	Author: PVH
	Date: 13-10-14
	
	Changelog:
	
		-
		-
		-


*/



/* Oci vendors container */

#vendor-list {
		margin: .4em 0 0 .4em;
}


		#vendor-list .flex-list {
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
		}

		#vendor-list ul li {
				display: flex;
				flex: 0 0 100px;
				overflow: hidden;
				text-align: center;
				align-items: center;
				border: 1px solid #dfdfdf;
				border-radius: 2px;
				margin-right: .4em;
				margin-bottom: .4em;
				padding: .7em .5em;
				-webkit-transition: all .2s ease-in-out;
				-moz-transition: all .2s ease-in-out;
				transition: all .2s ease-in-out;
		}


		#vendor-list img {
				opacity: 0;
		}

#vendor datalist li > span {
		flex: 1 1 auto;
}



#vendor-list .has-image {
		padding: 0;
}



#vendor-list ul li img {
		width: 100%;
		height: auto;
		opacity: 1;
		-webkit-transition: all .2s ease-in-out;
		-moz-transition: all .2s ease-in-out;
		transition: all .2s ease-in-out;
		opacity: 1;
		-webkit-filter: grayscale(0);
		-moz-filter: grayscale(0);
		-ms-filter: grayscale(0);
		filter: grayscale(0);
}

#vendor-list li:hover {
		cursor: pointer;
		box-shadow: 0 0 6px 0 rgba(0,0,0,.2) inset;
		border: 1px solid #afafaf;
		background-color: rgba(230,230,230,1);
}

		#vendor-list li.active img,
		#vendor-list li:hover img {
				opacity: .7;
				-webkit-filter: grayscale(100%);
				-moz-filter: grayscale(100%);
				-ms-filter: grayscale(100%);
				filter: grayscale(100%);
		}

#vendor-list li.active {
}

		#vendor-list li.active:hover {
		}





/* Cart content table */

#shpr-oci-basket-widget .table td .btn {
		vertical-align: top;
}

#shpr-oci-basket-widget .table tfoot tr {
		font-weight: 700;
		background-color: rgb(230,230,230);
}


.vendor-row.even {
		background-color: rgb(235,235,235);
}

.vendor-row.odd {
		background-color: rgb(240,240,240);
}

.vendor-sub-row.odd {
		background-color: rgb(250,250,250);
}


.vendor-row td:first-child {
		width: 50%;
}

.vendor-row > td {
		font-weight: 700;
		color: rgb(40,40,40);
		vertical-align: middle;
}

.vendor-row td:nth-child(1) div > img {
		display: inline-block;
		position: relative;
		width: 30px;
		height: auto;
		margin-right: .5em;
}

.vendor-sub-row-header {
		background-color: rgba(250,250,250, 1);
}

		.vendor-sub-row-header::after {
				display: block;
				left: 50%;
				border: solid transparent;
				content: " ";
				height: 0;
				width: 0;
				position: absolute;
				pointer-events: none;
				border-color: rgba(200,200,200, 0);
				border-top-color: rgb(200,200,200);
				border-width: 10px;
				margin-left: -10px;
		}


#shpr-oci-basket-widget tr.collapsed {
		display: none;
}

.vendor-container tr:nth-child(2) td {
		border-top: 2px solid rgb(125, 138, 154);
}

.vendor-container tr:last-child td {
		border-bottom: 2px solid rgb(125, 138, 154);
}


.image-placeholder {
		background-image: url('/BackOfficeAssets/UI-Content/img/placeholder.png');
		display: block;
		position: relative;
		width: 100%;
		height: auto;
		background-repeat: no-repeat;
		background-size: contain;
}




/*

 AIT PANEL FLYOUT
 
 */
.flyout-wrapper {
		background: white;
		position: relative;
		overflow: hidden;
		width: 100%;
		min-height: 100%;
}

.flyout-overlay {
		background-color: rgba(0, 0, 0, 0.5);
		position: absolute;
		display: none;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		-webkit-transition: opacity .2s ease-in-out 1s;
		-moz-transition: opacity .2s ease-in-out 1s;
		transition: opacity .2s ease-in-out 1s;
		z-index: 1050;
}

		.flyout-overlay.active {
				opacity: 1;
				display: block;
		}

.flyout-panel {
		bottom: 0;
		top: 50px;
		height: 100%;
		z-index: 1060;
		background-color: white;
		overflow-y: auto;
		position: fixed;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-direction: column;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-transition: transform 0.2s ease-in-out;
		-moz-transition: transform 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out;
}


		.flyout-panel.right {
				right: 0;
				-webkit-transform: translate3d(100%, 0, 0);
				-moz-transform: translate3d(100%, 0, 0);
				-ms-transform: translate3d(100%, 0, 0);
				transform: translate3d(100%, 0, 0);
		}

		.flyout-panel.left {
				left: 0;
				-webkit-transform: translate3d(-100%, 0, 0);
				-moz-transform: translate3d(-100%, 0, 0);
				-ms-transform: translate3d(-100%, 0, 0);
				transform: translate3d(-100%, 0, 0);
		}

		.flyout-panel.right.active {
				-webkit-transform: translate3d(0, 0, 0);
				-moz-transform: translate3d(0, 0, 0);
				-ms-transform: translate3d(0, 0, 0);
				transform: translate3d(0, 0, 0);
		}

.flyout-header {
		color: #fff;
		font-size: 14px;
		line-height: 44px;
		padding: 0 8px 0 8px;
}

		.flyout-header h3 {
				display: inline-block;
				margin: 0;
				font-size: 14px;
		}

		.flyout-header .toggle-flyout {
				cursor: pointer;
				float: right;
		}

.flyout-body {
		-ms-flex: 0 1 0%;
		-webkit-flex: 0 1 0;
		flex: 0 1 0%;
}

		.flyout-body .aside-panel-info {
				border-bottom: 1px solid #ddd;
				background-color: rgba(0,0,0,0.02);
		}

				.flyout-body .aside-panel-info label {
						display: inline-block;
						width: 40%;
						font-weight: 700;
						text-align: right;
						line-height: 24px;
				}

						.flyout-body .aside-panel-info label + span {
								display: inline-block;
								width: 60%;
								line-height: 24px;
								padding-left: .5em;
						}

		.flyout-body .aside-panel-form {
				border-bottom: 1px solid #ddd;
				background-color: rgba(0,0,0,0.04);
		}

/*

	AIT CART Catalog Module v.1.0
	
	Author: PVH
	Date: 08-06-15
	
	Changelog:
	
		-
		-
		-


*/


/* custom search bar */
.widget-header-search {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
}

		.widget-header-search > input,
		.widget-header-search > .btn {
				padding: 0 12px;
				margin: 0;
				border-radius: 0;
				line-height: inherit;
		}

		.widget-header-search > input {
				border-right: 0;
				border-radius: 3px 0 0 3px;
				width: 40%;
		}

@media (max-width:640px) {
		.widget-header-search > input {
				width: auto;
		}
}



.widget-header-search > .btn + .btn {
		border-radius: 0 3px 3px 0;
		margin-left: -3px;
}



/* custom lists */

.list-items > li.focus {
		background-color: rgba(0,0,0,.1);
}

.list-items > li {
		outline: none;
}

.widget.cart-search-list {
		min-height: 248px;
}

		.widget.cart-search-list .widget-content {
				height: 170px;
				min-height: 168px;
		}

		.widget.cart-search-list .list-items > li {
				height: auto;
				padding: 8px 6px;
				font-size: 14px;
				line-height: normal;
				min-height: inherit;
		}

.search-list {
		position: relative;
		padding-left: 5px;
		border: 1px solid #ddd;
		border-radius: 2px;
		margin: 2px;
}

		.search-list input[type="text"] {
				border: 0;
				background-color: transparent;
				box-shadow: none;
				margin: 0;
		}

				.search-list input[type="text"]:focus {
						border-color: transparent;
						box-shadow: none;
				}


/* FLEX LIST*/
.flex-list {
		margin: 0;
		padding: 0;
		list-style: none;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-flex-item-align: start;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
}

		.flex-list li {
				flex: 1 1 auto;
				-webkit-flex-item-align: start;
				-webkit-box-pack: start;
				-ms-flex-pack: start;
				justify-content: flex-start;
		}


/* ------------------------

Shpr catalog page

------------------------*/

.ellipsis-container {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%;
		position: relative;
}

		.ellipsis-container > div {
				position: absolute;
				overflow: hidden;
				width: 100%;
				min-width: 45px;
				padding-bottom: .2em;
				top: 0;
				left: 0;
				max-height: 45px;
		}

#shpr-catalog-widget {
		overflow-x: auto;
		-webkit-overflow-scrolling: auto;
}

		#shpr-catalog-widget .table td input,
		#shpr-catalog-widget .table td .btn {
				margin: 0;
				min-width: 80px;
		}

		#shpr-catalog-widget .table td,
		#shpr-oci-basket-widget .table td {
				padding: 2px 4px 2px 4px;
		}

				#shpr-catalog-widget .table td .label:not(.theme-background) {
						background-color: rgb(230,230,230);
						color: rgb(60,60,60);
						text-shadow: none;
				}


.article-image,
.article-description,
.article-companycode,
.article-perpackageitems,
.article-price {
		cursor: pointer;
}

.article-description {
		width: 50%;
}

.article-image {
		width: 50px;
}

		.article-image > img {
				max-height: 46px;
				max-width: 61px;
		}


.article-price,
.article-total {
		font-weight: 700;
}

		.article-price > span,
		.article-total > span {
				white-space: nowrap;
				font-weight: normal;
		}

.table.table-split-column {
		border: 0;
}

		.table.table-split-column td {
				padding: .2em .4em;
		}

				.table.table-split-column td:last-child {
						font-weight: 700;
				}

		.table.table-split-column tfoot td {
				font-weight: 700;
		}



#shpr-cart-templates {
		display: none;
}


.btn-group > .catalog-date-input {
		border-radius: 2px 0 0 2px;
		border-right: 0;
}





/*----------------------------------
	 BASE EXTRA SHPR overrules 
----------------------------------*/


.pad {
		padding: .5em !important
}

.pad10 {
		padding: 1em !important;
}

.pad20 {
		padding: 2em !important;
}

.pad30 {
		padding: 3em !important;
}

.btn-blue {
		background: #00B0EC;
		color: #FFF;
}




/* neutral set*/


.theme-n-btn {
		color: rgb(20,20,20);
		background-color: rgb(210,210,210);
		text-shadow: 0 1px 0 rgba(255,255,255,.9);
		border: 1px solid rgb(200,200,200);
		border-radius: 1px;
}

		.theme-n-btn:hover,
		.theme-n-btn:active,
		.theme-n-btn:focus {
				color: rgb(0,0,0);
				background-color: rgb(230,230,230);
				border-color: rgb(100,100,100);
		}

		.theme-n-btn .fa {
				text-shadow: 0 1px 0 rgba(255,255,255,.9);
		}

.theme-n-background {
		background-color: rgb(230,230,230);
		color: rgb(40,40,40);
}

.theme-n-hl-background {
		background-color: rgb(240,240,240);
}

.theme-n-d-background {
		background-color: rgb(125, 138, 154);
}

.theme-n-color {
		color: rgb(20,20,20);
		text-shadow: 0 1px 0 rgba(255,255,255,.8);
}




html.dev-wireframe div,
html.dev-wireframe article,
html.dev-wireframe section {
		border: 1px solid red;
}

		html.dev-wireframe div > div {
				border: 1px dashed green;
		}

				html.dev-wireframe div > div > div {
						border: 1px dotted orange;
				}

.hr-narrow {
		margin: .5em 0;
}




/*-------------------- MEDIA SIZES-------- */



/* ------------------ MAX WIDTH 1180px -------------*/
@media (max-width:1180px) {

		.hide-btn-text-md {
				display: none !important;
		}
}





/* ------------------ MAX WIDTH 768px -------------*/
@media screen and (max-width:768px) {

		.modal .modal-header h3 {
				font-size: 18px;
		}

	
		.widget {
				border-radius: 0;
		}

		#sr-details-container .widget {
				margin-top: .6em;
		}

		#shpr-catalog-widget .article-amount input {
				width: 100%;
				min-width: 40px;
		}

		#shpr-catalog-widget table {
				table-layout: auto;
		}

		#shpr-catalog-widget th {
				max-width: 10vw;
		}

				#shpr-catalog-widget th > div {
						width: 50px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
				}

		#header .scroll-wrapper {
				max-height: 300px;
		}

		.table thead th.hide-sm,
		.table tbody td.hide-sm {
				display: none;
		}
}




/* ------------------ MAX WIDTH 640px -------------*/
@media screen and (max-width:640px) {

		#header .flex-container {
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-orient: vertical;
				-webkit-box-direction: normal;
				-ms-flex-direction: column;
				flex-direction: column;
		}

				#header .flex-container:last-child {
						display: -webkit-box;
						display: -ms-flexbox;
						display: flex;
						-webkit-box-orient: horizontal;
						-webkit-box-direction: normal;
						-ms-flex-direction: column;
						flex-direction: row;
				}


		#header .flex-container{
				flex-wrap:wrap;
		}




		.table thead th.hide-xs,
		.table tbody td.hide-xs {
				display: none;
		}
}



/* ------------------ MAX 480px -------------*/
@media (max-width: 480px) {


		#header .scroll-wrapper {
				max-height: 260px;
		}



		.form-horizontal .control-label {
				width: auto;
				padding-left: 10px;
		}

				.form-horizontal .control-label .input-required {
						right: auto;
				}

		.form-horizontal .controls {
				margin-left: 10px;
		}

		.control-group.group > .controls {
				margin-left: 5px;
		}

		.form-horizontal .control-action-buttons .action-buttons {
				max-width: 300px;
		}



		.cart-menu-open #cart-side-menu {
				position: fixed;
				right: 0;
				top: 95px;
				bottom: 0;
				height: 100%;
				width: 100%;
		}



		#artifact-content {
				overflow-y: auto;
				-webkit-overflow-scrolling: touch;
		}



		.article-description > div {
				max-width: 200px;
		}

		.hide-btn-text-xs {
				display: none !important;
		}

		/*
    .form-horizontal .controls input[type="text"]:not(.datepicker), .form-horizontal .controls input[type="number"], .form-horizontal .controls input[type="email"], .form-horizontal .controls input[type="password"], .form-horizontal .controls input[type="date"]:not(.datepicker), .form-horizontal .controls textarea, .form-horizontal .controls select, .form-horizontal .input-append {
    width: 80%;
    }
*/



}



/* ------------------ MAX 375px (iphone6 width) -------------*/
@media (max-width:375px) {

		.overlay-box {
				width: 340px;
		}

		.article-description > div {
				max-width: 150px;
		}

		.route-container {
				margin: 0;
		}

		#shpr-cart-templates-table th:nth-child(1),
		#shpr-cart-templates-table th:nth-child(4) {
				display: none;
		}

		#shpr-cart-templates-table td:nth-child(1),
		#shpr-cart-templates-table td:nth-child(4) {
				display: none;
		}

		#boxmodal-container .boxmodal {
				max-width: 96%;
		}


		.btn > span {
				font-size: 12px;
		}

		#header .nav .dropdown-menu {
				left: 0;
				right: 0;
				top: auto;
				position: fixed;
		}
}








/* ------------------ MIN WIDTH 1040px -------------*/
@media (min-width:1280px) {


		.cart-menu-open #main-container section {
				width: calc(100% - 380px);
		}


		.navigation-small #main-container {
				margin-left: 0;
		}

		sr-details-container .form-horizontal input {
				width: 80%;
		}
}


@media (min-width:1500px) {


		.notouch.left-menu-open #main-container {
				margin-left: 305px;
		}
}




/* NO MOBILE APP*/

#no-mobile-app {
		display: none;
		z-index: 20000;
		background-color: rgba(255,255,255,.8);
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
}

		#no-mobile-app .no-mobile-container {
				display:none;
				margin: auto;
				max-width: 80%;
				text-align: center;
				font-size: 24px;
				line-height: 1.5;
		}



@media (max-width:480px) {

		#no-mobile-app {
				display: -webkit-box;
				display: -ms-flexbox;
				display: none;
		}
}

@media (min-width:1366px) {
		.form-horizontal .control-group > .control-label {
				max-width: 200px;
		}
}
/*
	@media (min-width:1920px) {
		#mr-view-container {
			max-width: 18%
		}

		#sr-group-container {
			max-width: 14%;
		}

		#sr-details-container {
			width: 68%;
		}

}
	*/

@media (max-width:768px) {
		.touch #sr-group-container {
				display: block !important;
		}
}

.select2-container--default .select2-search--inline .select2-search__field {
		width: auto !important;
}

.select2-container.select2.select2-container-disabled {
		-webkit-box-flex: 1 !important;
		-ms-flex: 1 0 auto !important;
		flex: 1 0 auto !important;
}




/* INTERCOM MESSENGER CUSTOM SETTINGS*/
.intercom-launcher-discovery-frame,
.intercom-launcher-frame {
		display: none !important;
}

#intercom-container .intercom-app-launcher-enabled .intercom-messenger-frame {
		top: 60px;
		right: 0px;
}

.login-intercom, #show-hide-intercom {
		display: none;
}

#show-hide-intercom.active a {
		background-color: rgba(0,0,0,.2);
}

#intercom-container.active {
		/*
	top: 51px;
	width: 370px !important;
	height: 100vh !important;
	background-color:rgba(255,255,255,.7);
		*/
}

.login-screen #show-hide-intercom a {
		position: absolute;
		z-index: 2;
		right: 1em;
		top: .6em;
}

.login-screen #show-hide-intercom a {
		background-color: rgb(106,244,118);
		border-radius: 4px;
		padding: .7em;
}

.login-screen #intercom-container .intercom-app-launcher-enabled .intercom-messenger-frame {
		top: 46px;
		right: .6em;
}

#app-login-container .modal-scrollable {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
}

#app-login-container .login-settings {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		margin: 0;
}

#app-login-container .modal {
		max-width: 580px;
		min-width: 340px;
		max-height:70vh;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		left: auto;
		right: auto;
		margin: auto;
		bottom: auto;
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

		.touch #app-login-container .modal{
		width:80vw;
		left:20vw;
		right:20vw;
		max-height:80vh;
		}
}

#app-login-container .modal .modal-footer div{
	display:flex;
	justify-content:flex-end;
}


#app-login-container .validation-summary-errors ul {
		margin: 0;
		padding: 0;
}

#app-login-container .field-validation-error,
#app-login-container .validation-summary-errors li {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		font-size: .9rem;
}

#app-login-container .alert {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
}

#app-login-container form {
		margin: 0;
}

.BW-logo {
		display: block;
		position: absolute;
		z-index: 1;
		right: 150px;
		bottom: 100px;
		height: auto;
}

		.BW-logo img {
				height: 80px;
		}

.BW-logo-text {
		padding-top: 1em;
		font-size: 1.8rem;
		font-weight: 400;
}

#app-login-container .overlay-box {
		box-shadow: none;
		background-color: rgb(255,255,255);
		border-radius: .5em;
}

#app-login-container .modal-header {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 1;
		-ms-flex: 0 0 44px;
		flex: 0 0 44px;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-flow: row nowrap;
		flex-flow: row nowrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		color: rgb(68, 68, 68);
		text-shadow: 0 1px 0 rgba(255,255,255,.7);
		opacity: 1;
		background-color: rgb(230,230,230);
		border: 0;
		border-radius: 3px 3px 0 0;
		border-bottom: 1px solid rgb(204, 204, 204);
		padding: .2em .2em .2em .5em;
		cursor: all-scroll;
}


.overlay-box-header {
		height: auto;
}


		.overlay-box-header .local-logo {
				height: 80px;
				background-image: var(--boxheaderlogo);
				background-size: contain;
				background-repeat: no-repeat;
				display:none;
		}

#app-login .overlay-box-header .local-name {
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		color: rgb(40,40,40);		
		font-size: 1.5rem;
		line-height: 1;
		letter-spacing: .06em;
		padding:.5em;
		text-align:center;
}

		#app-login .overlay-box-header .local-name span:first-of-type {
				font-weight: 800;
		}

.overlay-box-body {
		overflow: hidden;
		padding: .6em;
		background-color: transparent;
}

.overlay-box .form-horizontal .form-group {
		margin: 0;
}

.overlay-box-body .input-block-level {
		display: -webkit-box;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		flex-direction: row;
		padding:0;
		width: 100%;
		margin: auto;
		border-radius: 2px;
		border: 0;
		background-color: transparent;
}



.overlay-box-body .form-group:nth-child(-n+2) .input-block-level{
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
		align-self: center;
		border: 1px solid rgba(0,0,0,.3);		
		line-height: normal;
		vertical-align: top;
		padding:.25em;
		height: auto;
		margin-bottom: .25em;
		font-size: 1.8rem;
}
		.overlay-box-body .form-group:nth-child(-n+2) .input-block-level input {
				font-size:1.2rem;
		}

		.overlay-box-body .input-block-level .fa {
				display: flex;
				text-rendering: auto;
				-webkit-font-smoothing: antialiased;
				-webkit-box-flex: 0;
				flex: 0 0 40px;
				-ms-flex-item-align: center;
				align-self: center;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				justify-content: center;
				text-align: center;
				font-size: 1.8rem;
				color: var(--loginbg) !important;
		}



.overlay-box-body a {
	display:block;
		color: rgb(120,120,120);
		margin-top:.5em;
		padding:.5em;
}
.overlay-box-body a:hover,
 .overlay-box-body a:focus{
		color: rgb(30,30,30);
}

#app-login-container .btn {
		padding: .55em .9em;
		position: relative;
		display: block;		
		text-align: center;
		vertical-align: middle;
		cursor: pointer;
		background-image: none;
		background-color: #ddd;
		color: rgb(40,40,40);
		text-shadow: none;	
		border: 0;
		white-space: normal;
		word-wrap: break-word;
		font-size: 1.4rem;
		line-height: normal;
		border-radius: 2px;
		box-shadow: none;
		text-shadow: none;
		-webkit-transition: all .2s ease;
		-moz-transition: all .2s ease;
		transition: all .2s ease;	
}

		#app-login-container .btn:hover,
		#app-login-container .btn:focus,
		#app-login-container .btn:active {
				background-color: rgb(100,100,100);
				color: rgb(200,200,200);
				box-shadow: inset 0 0 0 1px rgb(80,80,80) !important;
				text-shadow: none;
		}

#app-login-container .control-group .flex.tar {
		justify-content: flex-end;
		flex: 1 1 auto;
}




@media only screen and (max-width:810px) {

		.overlay-box-header {
				padding-left: .8em;
		}

		#app-login .form-horizontal .form-group {
				margin: 0;
		}

		.overlay-box-header {
				margin-bottom: 0;
				padding: .2em;
		}

		.BW-logo img {
				height: 50px;
		}

		.BW-logo-text {
				font-size: 1rem;
		}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (orientation: portrait) {


		#app-login .overlay-box-center {
				margin-top: -30vh;
		}

		#app-login .BW-logo {
				left: 20px;
				right: 0;
				bottom: 20PX;
				text-align: left;
		}
}


@media only screen and (min-device-width: 320px) and (max-device-width: 736px) and (orientation: landscape) {

		#app-login .overlay-box-center {
				margin-top: 0;
				margin-left: -40vw;
		}

		#app-login .BW-logo {
				right: 10px;
				bottom: 10px;
				text-align: right;
				max-width: 30vw;
		}
}



@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : portrait) {

		#app-login .BW-logo {
				left: 30px;
				bottom: 30px;
				text-align: left;
				max-width: 80vw;
		}
}

@media only screen and (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3) and (orientation : landscape) {


		#app-login .overlay-box-center {
				margin-top: 0;
				margin-left: -40vw;
		}

		#app-login .BW-logo {
				right: 100px;
				bottom: 10px;
				text-align: right;
				max-width: 50vw;
		}
}





@media (max-width:767px) {
		#app-login-container .form-horizontal .control-group {
				flex-wrap: wrap;
		}
		
		#app-login-container .modal{
			top:10vh;
			bottom:10vh;
			left:10vw;
			right:10vw;
			width:auto;
		}
}



#main-container.intercom {
		margin-right: 370px;
}



.fc-scroller {
		height: auto !important;
}

.overflow-ellipsis {
		display: inline-block;
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
}


.box-copyright {
		display: none;
}




/*

		Variable Grid (vGrid) 
		copyright 2019 Archifact BV
		Author: PVH

*/

.vGrid-container {
		display: flex;
		flex-direction: column;
		border: 1px solid rgba(0,0,0,0.2);
		border-radius: 3px;
		margin: 1em;
}

.vGrid-header, .vGrid-footer {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: .25em;
		background-color: rgba(0,0,0,.04);
}

		.vGrid-header .btn, .vGrid-footer .btn {
				margin: 0;
		}

		.vGrid-header .btn-group, .vGrid-footer .btn-group {
				display: flex;
				align-items: stretch;
		}

		.vGrid-header > div,
		.vGrid-footer > div {
		}

.vGrid-header {
		border-bottom: 1px solid rgba(0,0,0,.2);
}


.vGrid-content {
		flex: 1 1 auto;
		background-color: rgba(0,0,0,.02);
}


.vGrid-datepicker-container {
		align-items: center;
}

		.vGrid-datepicker-container .vGrid-yearWeekDiv {
				font-weight: 700;
				background-color: rgba(0,0,0,.12);
				color: rgb(40,40,40);
		}

		.vGrid-datepicker-container input {
				padding: .357rem .75rem;
				flex: 0 0 auto;
				border-radius: 3px 0 0 3px;
				border: 1px solid rgb(206, 212, 218);
				font-size: 1rem;
		}

.form-inline .vGrid-datepicker-container .btn {
		flex: 0 1 auto;
		align-items: center;
}

.vGrid-yearWeekDiv {
		cursor: default;
		font-size: initial;
		padding: .74em .9em;
}

		.vGrid-yearWeekDiv:hover,
		.vGrid-yearWeekDiv:focus {
				cursor: default;
		}

/* vGrid table datatable*/
.vGrid-table {
		width: 100%;
}

		.vGrid-table tr[data-action]:hover,
		.vGrid-table tr[data-action]:focus,
		.vGrid-table tr[data-action]:focus td,
		.vGrid-table tr[data-action]:hover td {
				background: rgba(0,0,0,0.01);
		}

		.vGrid-table tbody tr td {
				border-bottom: 1px solid rgba(0,0,0,.2);
		}


		.vGrid-table tbody tr:last-child td {
				border-bottom: none;
		}

		.vGrid-table td.strong {
				font-weight: 700;
		}

		.vGrid-table tfoot tr {
				background-color: rgba(0,0,0,.02);
		}

		.vGrid-table tfoot th,
		.vGrid-table tfoot td {
				padding: 10px 18px;
				text-align: left;
		}

.dt-right {
		text-align: right;
}

.dt-center {
		text-align: center;
}

.vGrid-table tr.disabled-row {
		opacity: .4;
}

.vGrid-table td[data-editable="Y"] {
		padding: 10px 22px;
}

.vGrid-table td[data-editable] input {
		height: auto;
		padding: .4em .2em;
		text-align: right;
		border: 1px solid rgba(0,0,0,0.1);
		border-radius: 3px;
		Width: 100%;
}

		.vGrid-table td[data-editable] input:focus,
		.vGrid-table td[data-editable] input:hover {
				background-color: rgba(0,0,0,.04);
				outline: none;
		}

.vGrid-table td .actionbtn {
		padding: .4em .7em;
		background-color: rgb(110, 122, 137);
		color: rgb(255, 255, 255);
		text-align: center;
		display: flex;
		justify-content: center;
		border-radius: .2em;
		text-decoration: none;
}

		.vGrid-table td .actionbtn:hover,
		.vGrid-table td .actionbtn:focus {
				box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);
				background-color: rgb(120, 132, 157);
		}

.cell-border th {
		border-top: 1px solid #dddddd;
		border-bottom: 1px solid #dddddd;
		border-right: 1px solid #dddddd;
}

		.cell-border th:first-child {
				border-left: 1px solid #dddddd;
		}



/* flex basics */
.fm-left {
		margin-left: auto;
}

.fm-right {
		margin-right: auto;
}

.frow {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: nowrap;
		border-bottom: 1px solid rgba(0,0,0,.2);
}

		.frow:last-child {
				border-bottom: 0;
		}

.fcol {
		display: flex;
		flex-direction: column;
		flex: 0 1 26%;
		justify-content: center;
		min-width: 50px;
}


/*------------------------------------
	jquery-multiple-select dropdown plugin

	use class: multiple-select
---------------------------------*/

.select2-results {
		-webkit-overflow-scrolling: touch;
}


.ms-parent {
	position:relative;
		width: auto !important;
		padding: 0;
		margin-right: -1px;
		-webkit-box-flex: 1;
		-ms-flex: 1 0 188px;
		flex: 1 0 188px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
}

.form-inline .ms-parent {
		margin-bottom: .4em;
		margin-right: .4em;
		vertical-align: top;
}

.ms-choice {
		position: relative;
		display: flex;
		background-image: none;
		background-color: rgb(255, 255, 255);
		color: rgb(40, 40, 40);
		border-radius: 2px;
		border: 1px solid rgba(0,0,0,.4);
		padding: 0 0 0 .5em;
		height: 2.9em;
		line-height: 40px;
		-webkit-appearance: none;
		box-shadow: none;
		vertical-align: top;
		-webkit-box-flex: 1;
		-ms-flex: 1 1 auto;
		flex: 1 1 auto;
}


		.ms-choice.disabled {
				background-color: #f4f4f4;
				background-image: none;
				cursor: default;
		}

		.ms-choice > span {
				display:flex;
				min-height:38px;
}

				.ms-choice > span.placeholder {
						color: rgb(50,50,50);
		}

		.ms-choice > div {
				position: absolute;
				z-index: 2;
				right: 0;
				padding: .6em;
				background-color: rgb(110, 122, 137);
				border-left: 1px solid rgba(0,0,0,.4);
				height: 100%;
		}

				.ms-choice > div:after {
						display: block;
						font-family: FontAwesome;
						top: 50%;
						transform: translateY(-50%);
						right: 0;
						position: relative;
						content: "\f078";
						text-shadow: 0 -1px 0 rgba(0,0,0,.4);
						color: rgb(255, 255, 255);
				}

				.ms-choice > div.open::after {
						content: "\f077";
				}

.ms-drop {
		width: auto;
		min-width:180px;
		overflow: hidden;
		display: none;
		padding: 0;
		position: absolute;
		z-index: 1000;
		background: #fff;
		color: #000;
		border: 1px solid rgba(0,0,0,.4);
		border-radius: 3px;
}

		.ms-drop.bottom {
				top: 39px;
				box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
				left:0%;
		}

		.ms-drop.top {
				bottom: 47px;
				-webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
				-moz-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
				box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
				}

.ms-search {
		display: inline-block;
		z-index: 10000;
		width: 100%;
		min-height: 26px;
		margin: 0;
		position: relative;
		z-index: 10000;
		white-space: nowrap;
		padding: 2px;
		border: 0;
		border-bottom: 1px solid rgb(170, 170, 170);
				}

		.ms-search input {
				width: 96%;
				border-radius: 2px;
				padding: .5em .8em;
				margin: .2em;
				background: rgb(239, 239, 239);
				color: rgb(34, 34, 34);
		outline: 0;
				font-size: 1em;
				border: 1px solid rgb(170, 170, 170);
		}

		.ms-search, .ms-search input {
				-webkit-box-sizing: border-box;
				-khtml-box-sizing: border-box;
				-moz-box-sizing: border-box;
				-ms-box-sizing: border-box;
				box-sizing: border-box;
}

.ms-drop ul {
		margin:0;
		max-height: 300px;		
		position: relative;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-tap-highlight-color: rgba(0,0,0,0);
}

		.ms-drop ul > li {
				list-style: none;
				display: list-item;
				background-image: none;
				position: static;
				border-bottom: 1px solid rgb(204, 204, 204);
		}
		.ms-drop ul li:nth-last-child(-n+2) {
				border-bottom:0;
		}



						.ms-drop ul > li .disabled {
								opacity: .35;
								filter: Alpha(Opacity=35);
						}

				.ms-drop ul > li.multiple {
						display: block;
						float: left;
		}

				.ms-drop ul > li.group {
						clear: both;
}

				.ms-drop ul > li.multiple label {
						width: 100%;
						display: block;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
}

				.ms-drop ul > li label {
		position: relative;
						font-weight: normal;
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;
						white-space: nowrap;
						padding: .5em .8em;
		margin: 0;
					
}

				.ms-drop ul > li:hover label {
						background: rgb(111, 170, 158);
				}

				.ms-drop ul > li label.optgroup {
						font-weight: bold;
}

				.ms-drop ul > li label span {
						display:flex;
						flex: 1 1 auto;
}

.ms-drop input[type="checkbox"] + span::before {
		font-family: FontAwesome;
		content: "\f096";
		display: block;		
		margin-left: -5px;
		margin-right:.5em;
		margin-top:.25em;
}
.ms-drop input[type="checkbox"]:checked + span::before {
		content: "\f14a";		
}

.ms-drop .ms-no-results {
		display: none;
}