/* 
 @Description: LOCAL SHOPPER CSS
 @Author: AIT-PVH
 @version :v2.1
 @Update 
 			PVH-03062014: ASetup base
			PVH-0608215: Refactoring and added cart/catalog styles
			PVH-25-0917: Refactoring move a ot non local css to backoffice.css

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

*/


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

}


#mr-view-container > .widget, 
#sr-group-container > .widget
,#sr-details-container > .widget{
margin-bottom:.2em;
}

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


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


/* BOOTSTRAP / BO OVERRULEZ FOR SHOPPER */			

.row{margin:0;}


.popover{
	max-width:460px;
}




/* 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;
	}




.btn-small, btn-sm{
	font-size:13px;
}
.btn-mini, .btn-mn {
padding: 0 6px;
font-size: 11px;
border-radius: 2px;
}

.input-group-btn>.btn {
	margin:0;
}


.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;
}


.checkbox.disabled, .radio.disabled {
    color: rgb(100,100,100);
}



/* bootstrap APPEND PREPEND SECTION */

.input-append .btn{
	margin-top:0;
	-ms-flex-item-align:start;
    align-self:flex-start;
}


.input-append .btn:last-of-type{
	border-radius:0 3px 3px 0;
}


.input-append .btn-group button:first-of-type{
	border-radius:0;
}

.control-group.group > .controls .input-append, 
.control-group.group > .controls .input-prepend{
	margin-bottom:5px;
	width:100%;
}

#sr-details-container .form-horizontal .input-append {
		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;
}






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





/* widget containers */


.widget{
	border-radius:2px;
    border-color:#bbb;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}


.widget-header {
    background: none;
    background-color: rgb(220,220,220);
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    line-height: normal;
    min-height:40px;
}




.overview-container .widget{
    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3);
}



/* widget buttons */
.widget-header .widget-actions{
	margin:0;
    float:right;
    display:inline-block;
}

.widget-header .widget-actions > .btn{
	margin:0;	
	border:0;
	border-radius:0;		
	padding:8px 14px;
}

	.widget.toolbar-bottom > .widget-toolbar{
		background:none;
		background-color:rgb(220,220,220);
		border-radius:0;
		box-shadow:none;
	}


.widget-header > .btn{
	padding:8px 14px;
}

.widget > .widget-toolbar{
	padding:4px;
}


#search-container .widget > .widget-content{
	padding:4px 4px 0 4px;

}
.widget-content[data-content-type="form"]{
    padding:4px;
}
.widget-content[data-content-type="text"] {
	padding: .5em;
}

.widget-content.ext-search{
	margin:.3em;
	border:0 solid #afafaf;
}

.touch .widget-content > * {
	/*
    -webkit-transform: translate3d(0, 0, 0);
		  -moz-transform: translate3d(0, 0, 0);
			 -ms-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
		*/
}



.pvh-modal.fixed{
	z-index:11000;
	position:fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:0;
}



.modal{
	border-radius:2px;
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
/* modal fixed - minus header */
.modal.fullscreen,
.modal.fade.fullscreen{
	z-index:2000;
	top:97px !important;
	left:0;
	right:0;
	bottom:1px;
 position:fixed;
 width:auto;
 height:auto;
 box-shadow:none;
 border-radius:0;
 margin:0 !important;
 overflow:hidden; 
}



.modal.fullscreen .modal-body{
	overflow-x: hidden !important;
  overflow-y: auto !important;
	 -webkit-overflow-scrolling:touch;
	 top:50px;
	 left:0;
	 bottom:0;
	 right:0;
	  position:absolute;
	 margin:0;
}

.modal-body .form-horizontal .control-group{
    padding:4px;
}


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



.modal .modal-header .btn{
	display:inline-block;
}

.modal .modal-body{
	height:auto;
	width:100%;
	padding:0;
}

.modal-body .overview-container .row{
	margin-left:-10px;
	margin-right:-10px;
}

.oci-iframe{
	width:1280px;
	height:1500px;
	border:0;

}


.modal-scrollable {
	top: 100px;
}

/* modal styling*/
.modal-body .form-horizontal{margin:0;}
.modal-body .form-toolbar{
	width:100%;
	padding:12px;
	padding-top:10px;
	background-color: #efefef;
	border-top:1px solid #9e9e9e;
	min-height:50px;
	border-radius:0 0 6px 6px;
}
.modal-body.pdf-content{
	height:100%;
}



.modal-header{
  	 color: #444;
	text-shadow: 0 1px 0 rgba(255,255,255,.7);
	 opacity:1;
	 background: #E9E9E9;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0,#FAFAFA), color-stop(100%,#E9E9E9));
    background: -webkit-linear-gradient(top, #FAFAFA 0,#E9E9E9 100%);
    background: linear-gradient(top, #FAFAFA 0,#E9E9E9 100%);
    border: 0;
    border-bottom: 1px solid #CCC;
}

.modal-header .close, .close{
	opacity:1;
	
}






/* Specials AND EXTRAS */

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

.flex-cols{
     flex-direction: column;
}
.flex-rows{
    flex-direction:row;
}

.flex-item{
	 -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);
}
}






/* login */

#login-screen {
display:none;
}
#shopper-login{
	display:block;
}

#login-box{
	display:table-cell;
}


/*-------------------
				HEADER
--------------------*/
#header{
	min-height:50px;
	z-index:100;
	width:100%;
	position:fixed;
	top:0;
	left:0;

   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}




#header .flex-container{
  justify-content: space-between; 	
}



#header .nav-header-left{ 	
	min-height:50px;	
 align-self: flex-start;
 -webkit-align-content:flex-start;
  -ms-align-content:flex-start;
 align-content:flex-start;

}
#header .nav-header-right{ 
	min-height:50px;	
 align-self: flex-end;
 -webkit-align-content:flex-end;
  -ms-align-content:flex-end;	
 align-content:flex-end;
 
 }

#header .nav{
	margin:0;
	padding:0;
}


#header a.logo-link{
	padding:4px;	
}


#header  .nav > li{
	float:left;
	display:inline-block;
}

#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 nav.header-breadcrumbs{
-webkit-flex:0 1 80%;
-ms-flex:0 1 80%;
flex:0 1 80%;

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


.logo-link img {
	width: 58px;
	height: 100%;
	padding-bottom: 2px;
}

#header .dropdown > a,
#header .dropdown > span{
	 display:block;
	padding: 0 15px;
	font-size: 16px;
	line-height:50px;
	position:relative;	
	 text-shadow: 0 0 1px rgba(0,0,0,.4);
	 color:#fff;
	 border-right:1px solid rgba(0,0,0,.2);
}

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

.fixed-height{
	height:1000px;
}
#header .nav .dropdown-menu {
    border: 1px solid rgba(200,200,200,1);
	border-radius: 0;
	box-shadow: 5px 5px 5px rgba(0,0,0,.1);
	list-style: none outside none;
	margin: 0;
	min-width: 160px;
	padding: 4px;
	position: absolute;
	text-shadow: none;
	top: 100%;
	left: auto;
	right: 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);


}


#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;
	/*z-index:1;*/
	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 .scroll-wrapper {
margin:0;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
height: 360px;


-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

}



 #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 .nav .dropdown-toggle > .badge {
 font-size:10px;
 padding:2px 6px;
 	-webkit-transform:translate(0,-90%);
	 	-moz-transform:translate(0,-90%);
 	-ms-transform:translate(0,-90%);
	transform:translate(0,-90%);

}




.notouch #header .nav .dropdown-menu a:hover{
	 background:none;
	 background-color:rgba(240,240,240,1);
	 text-decoration:none;
}
 #header .nav .dropdown-menu a i {
	font-size: 18px;
	margin: 0 15px 0 5px;
	position: relative;
	}
 #header .nav .dropdown-menu a .title{
	display:inline-block;
	padding-right:40px;	
}
 #header .nav .dropdown-menu a .date{
	display:inline-block;
	margin-right:10px;	
	border-radius:3px;
	padding:2px 6px;
	font-size:10px;
	background-color:rgb(240,240,240);
	color:rgb(100,100,100);
}

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 .nav  > ul > li.dropdown {}
 #header .nav  > ul > li.dropdown a img {
	max-height:30px;
}


 #header .nav .dropdown-menu li .dropdown-menu-title {
	display: block;
	font-weight: bold;
	margin: -1px;
	padding: 5px 10px;
	
}
 #header .nav  .dropdown-menu li p, 
 #header .nav  .dropdown-menu li a:not(.btn){
	font-size: 14px;	
	margin: 0;
	padding: 8px;
	white-space: nowrap;
	display: block;
	clear:both;
}

 #header .nav .dropdown-menu li p {
	font-weight: bold;
}
 #header .nav  .dropdown-menu li a .author {
	display: block;
}
 #header .nav  .dropdown-menu li a .preview {
	display: block;
}
 #header .nav  .dropdown-menu li a .time {
	font-size: 12px;
	font-style: italic;
	font-weight: 600;
	display: block;
	float: right;
}
 #header .nav  .dropdown-menu li.view-all a i {
	float: right;
	margin-top: 4px;
}
 #header .nav  .dropdown-menu.notifications li > a > .label {
	margin-right: 2px;
	padding: 2px 4px;
	text-align: center !important;
}
 #header .nav  .thread-image {
	margin-right: 8px;
	float: left;
	height: 50px;
	width: 50px;
}
 #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;
}
.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
-------------------------*/

 #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-keyboard-legenda{
	 position:relative;
	 -webkit-flex:0 1 44px;
	 -ms-flex:0 1 44px;
	flex:0 1 44px;
	overflow:hidden;
	text-align:center;
	line-height:44px;
	width:44px;
	height:44px;
	color:#fff;
	border-left:1px solid rgba(0,0,0,.2);
	cursor:pointer;
}

 

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

#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{
	margin-top:100px;
    padding-left:0;
    padding-right:8px;

	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-backface-visibility:hidden;
	-moz-backface-visibility:hidden;
	backface-visibility:hidden;

-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;

	}



/*---------------------------
		MAIN (SIDE) NAVIGATION
----------------------------*/
#side-menu{
position:fixed;
width:300px;
top:94px; /* 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-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

	-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;
	-ms-flex:1;
	flex:1;
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 .5s;
	 -moz-transition: max-height .5s;	
  transition: max-height .5s;	

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


.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;
	padding:0 6px;

}


.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: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:1px solid #ababab;
	
}


/* desktop hovering */
.notouch ul.main-navigation-menu   li:not(.active) > a:hover{	
background:rgba(230,230,230,1);
color:rgb(40,40,40);
}

.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:50px;
}

.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;
} 
.notouch.navigation-bar .main-navigation-menu li{
   position:relative;
} 

.notouch.navigation-bar .main-navigation-menu > li > a > .title{
    display:none;
    padding-left:0;
}
.notouch.navigation-bar .main-navigation-menu > li  a{
    padding:8px 4px;
}
.notouch.navigation-bar .main-navigation-menu > li:hover a{
  
}
.notouch.navigation-bar .main-navigation-menu > li > a > .menu-icon{
    padding:0 12px;
}
.notouch.navigation-bar .main-navigation-menu > li > a > .nav-icon{
   display:none;
}


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


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

.notouch.navigation-bar .main-navigation-menu > li ul {
    vertical-align:top;
   display:none;
   overflow:inherit; 
    left:50px;
    top:37px;
    margin-top:-1px;
    margin-left:-1px;
    position:absolute;
    width:250px; 
    background:rgba(250,250,250,1);  
    border:1px solid rgba(180,180,180,1);
    max-height:none;  
     -webkit-transition: .2s 1s;
     transition:.2s 1s;	
		 z-index:10;	
}


     .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:hover > ul{
    display: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%;
}


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

@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-thumb {
       background: rgba(200,200,200,.4);
     }






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

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

#content, #artifact{
    margin-left:.4em;
    margin-right:-.4em;
}

/*
#content,
#artifact{	
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-o-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;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
		
}
*/




/* Content widget fixes */
.widget-content .list-items li{
	font-size:14px;
	line-height:40px;

}

.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);
	}



#content .group-box,
#artifact .group-box{
	position:relative;
	padding-top:.5em;
	padding-bottom:.5em;
	margin-top:8px;	
	border-top:1px solid rgb(180,180,180);
}
	#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;  		
}


/*
#content-container{
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	height: 100%;
}
	
#content-container .nav-content{
		flex:1 0 auto;
		min-width:20%;
		max-width:50%;
}
	#content-container .nav-content:last-of-type {
		flex-grow:2;
		flex-shrink:2;
		max-width:100%;
	}

	*/

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


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

#boxmodal-container{
	position:fixed;
display:none;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: 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: -webkit-flex;
  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(180,180,180,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: -webkit-flex;
  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;
  -webkit-align-self:flex-end;
      -ms-flex-item-align: end;
          align-self:flex-end;

	 }

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

	 .boxmodal-body{
		 padding:.5em;

	 }

/*---------------------------
	Overlay screens
------------------------------*/
#shpr-login-container,
#overlay-box-container{
	display:none;
	position:absolute;
	width:100%;
	height:100%;
	z-index:1010;
	top:0;
	left:0;	
}
#shpr-login-container,
#overlay-box-container.active{
	display:table;
}
.overlay-box-center, .boxmodal-center{
	display:table-cell; 
	vertical-align:middle;
	position:relative;
}

.overlay-box{
	min-height: 200px;
	width:500px;
	border-radius:2px;
	box-shadow:2px 5px 8px rgba(0,0,0,.1);
	margin:0 auto;
	position:relative;
	margin-top:-50px;	
}

#shopper-login .overlay-box{
	width:320px;
}



 .overlay-box-header{
	height:50px;

}
.overlay-box-header h1,
.overlay-box-header h2{
	position:absolute;
	right:10px;
	top:0;
	line-height:50px;
	margin:0;
	font-size:24px;
	text-shadow:0 -1px 0 rgba(0,0,0,.4);
}
	
.overlay-box-header .local-logo{
	padding:6px;
	width:70px;
	height:46px;
	display:inline-block;
 
}

.overlay-box-header .local-shpr-version{	
	float:right;
	width:30px;
	height:50px;
	z-index:1;
}
.overlay-box-header .local-shpr-version::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 45px 45px 0;
  border-style: solid;
  border-color: rgba(0,0,0,.2) rgba(240,240,240,1);
	
}
.overlay-box-header .local-shpr-version::after{
	content:"v2";
		font-size:16px;
			text-shadow:0 1px 0 rgba(0,0,0,.4);	
	color:rgb(1,136,204);
	position:absolute;
	right:2px;
	top:2px;
	z-index:2;
}


.overlay-box-body {	
	overflow: hidden;
	padding: 15px;
}
.overlay-box-body img{
	width:150px;
}
 .overlay-box-body .user-info {
	float: right;
	width: 285px;
}
 .overlay-box-body .user-info h1 {
font-size: 30px;
font-weight: 300;
line-height: 32px;
margin-top: 0;
}
.overlay-box-body .user-info > span {
display: block;
font-size: 12px;
margin-bottom: 5px;
}
.overlay-box .box-copyright {
	position:relative;
	font-size: 10px;
	line-height:10px;
	padding:6px;
	border-top:1px solid #e9e9e9;
	background:#f5f5f5;
}

#shpr-login-container .form-horizontal {
	padding:1em;
	margin:0;
}

#shpr-login-container .form-horizontal .control-label{
	display:inline-block;
	text-align:right;
	margin-top:0;
	margin-bottom:0;
	padding-top:7px;
	width: 25%;
	font-weight: 700;
	line-height:normal;
}

#shpr-login-container .form-group{
	margin-bottom:.5em;
}

#shpr-login-container .input-block-level{
border:1px solid #9e9e9e;
border-radius:2px;
}
#shpr-login-container .input-block-level:focus,
#shpr-login-container .input-block-level:active{
box-shadow: 0 0 2px 4px rgba(0,0,0,.2);
}
#shpr-login-container .input-block-level .fa{
	color:#9e9e9e;
	padding:4px 6px;
	font-size:20px;
}
#shpr-login-container input[type="text"],
#shpr-login-container input[type="password"]{
	display:inline-block;
	outline:none;
    width: 80.2%;
		  border: none;  
    padding:4px 6px;		
    color: #444;
    font-size: 18px;
    font-weight: 600;
}




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

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{
	width:320px;
}
#cart-menu .cart-table-content{
	width:370px;
	height:260px;
	border-radius:2px;
	border:1px solid #ddd;
	overflow-x:hidden;
	overflow-y:auto;
	-webkit-overflow-scrolling: touch;
	/*
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
		transform: translateZ(0);

	-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		backface-visibility: hidden;
	*/
}

#cart-menu .table{
	width:100%;
}

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


/* cart side menu content */
#cart-side-menu{	
position:fixed;
right:0;
top:95px;
bottom:0;
height:100%;
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-open #artifact,
.cart-menu-open #content{

}

.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-table-content{
	height:600px;
	padding-left:2px;
	border-top:2px solid #ccc;
	border-bottom:2px solid #ccc;
	overflow-x:hidden;
	overflow-y:auto;
	
	-webkit-overflow-scrolling: touch;
	/*
	-webkit-transform: translateZ(0);
	-moz-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
	
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
		backface-visibility: hidden;

		*/

}

#cart-side-menu .cart-menu-header{
	display:flex;
	display:-webkit-box;
	display:-ms-flexbox;
}
#cart-side-menu .cart-menu-header > span {
	-ms-flex:1;
	-webkit-flex:1;
	flex:1;
	display:inline-block;
	font-size:16px;		
	line-height:36px;
	border-right:1px solid rgba(0,0,0,.1);
	
	padding:4px;	
}
#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);
}

#cart-calendar-container{
  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;
	
}

.shpr-menu-cart-table tbody td:nth-child(2){
	font-size:12px;
}
.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;
}

.cart-table-overview{
	padding-top:.5em;
}

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

}




/*

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


*/



/* Oci vendors container */

#vendor-list{
min-height:44px;
margin-bottom:5px;
}


#vendor-list img{	
	opacity:0;
}



#vendor-list ul li{	
	overflow:hidden;
	text-align:center;
	border:1px solid #dfdfdf;
	border-radius:2px;
	margin:.25em;
	padding:6px 8px;
	 -webkit-transition: all .2s ease-in-out;
	  -moz-transition: all .2s ease-in-out;
  	 transition: all .2s ease-in-out;

}


#vendor-list ul li img{
	width:100%;
	height:auto;
	opacity:.6;
	
	 -webkit-transition: all .2s ease-in-out;
	  -moz-transition: all .2s ease-in-out;
		 transition: all .2s ease-in-out;

	-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  
}

#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:1;
	-webkit-filter:grayscale(0);
	-moz-filter: grayscale(0);
  -ms-filter: grayscale(0); 
  filter: grayscale(0);

}

#vendor-list li.active{
	
}
	
#vendor-list li.active:hover{

}





/* Cart content table */

#shpr-oci-basket-widget{
    padding-bottom:.5em;
}

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

#shpr-oci-basket-widget .table tfoot tr{
    font-weight:700;
    background-color:rgba(150,150,150,.1);
}
#shpr-oci-basket-widget .table tfoot tr td{
    border-top:1px dotted rgba(180,180,180,1);
    border-bottom:1px dotted rgba(180,180,180,1);
    
}

.vendor-row.even{
	border-bottom:1px solid rgb(180,180,180);
	background-color:rgb(240,240,240);	
}
.vendor-row.odd{
	background-color:rgb(245,245,245);
}

.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);
	text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.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;
}

.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: 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;


}



/* new select2 4.x styling */
.select2-results .select2-results__option{
	border-bottom:1px solid #ddd;
}



/* 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:flex;
-webkit-flex-direction:row;
flex-direction:row;
-webkit-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-flex-item-align:start;
justify-content:flex-start;
}
.flex-list li {
flex:1 1 auto;
justify-content:flex-start;
}


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

Shpr catalog page

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

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

	#shpr-catalog-widget .table td input,
	#shpr-catalog-widget .table td .btn {
		margin:0;
	}
	#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{
	cursor:pointer;
}

.article-description{
	width:50%;
}

.article-image{
    width:50px;
}

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

.article-description > div{
		max-width:350px;
		
		overflow:hidden;
		max-height:80px;
		font-size:14px;
         white-space:nowrap;
        text-overflow:ellipsis;
}

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



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


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



/*-----------------------------
	Bootstrap-datepicker
-----------------------------*/

.date-fixer{
display:inline-block;
position:relative;
margin-right:5px;
margin-bottom:5px;
vertical-align:middle;

}
.date-fixer > input, 
#sr-details-container .form-horizontal .date-fixer > input{width:100%;}
.date-fixer::after{
	font-family:FontAwesome;
	content:"\f133";
	font-size:16px;
	position:absolute;
	z-index:1;
	right:10px;
	top:50%;
     -webkit-transform:translateY(-50%);
     transform:translateY(-50%);
	color:rgba(0,0,0,.5);
	
}

.form-inline .date-fixer input,
.form-horizontal .date-fixer input{
    margin-bottom:0;
}



.datepicker.dropdown{
	max-width:320px;
	border-radius:4px;
	border:2px solid rgb(170,170,170);
}


.datepicker.dropdown .datepicker-switch,
.datepicker.dropdown .prev,
.datepicker.dropdown .next{
	cursor:pointer;
}

.datepicker-years th,
.datepicker-months th,
.datepicker-days th{
	border-bottom:1px solid rgb(200,200,200);
}

.datepicker-years .year,
.datepicker-months .month{
	display:inline-block;
	padding:6px 10px;
	margin:2px;
	border:1px solid rgb(180,180,180);
	border-radius:2px;
	min-width:54px;
	text-align:center;
	cursor:pointer;
}
.datepicker-switch:hover,
.datepicker-switch:focus,
	.datepicker-years .year:hover,
	.datepicker-months .month:hover,
	.datepicker-years .year:focus,
	.datepicker-months .month:focus,
.datepicker-days .day:hover,
.datepicker-days .day:focus,
.datepicker-days .day.active,
.datepicker .prev:focus,
.datepicker .next:focus,
.datepicker .prev:hover,
.datepicker .next:hover{
		background:rgb(220,220,220);
		color:rgb(40,40,40);
	}

.datepicker-days .day.theme-background{
	color:#fff;
}
.datepicker-days .day.theme-background:hover,
.datepicker-days .day.theme-background:focus{
	color:rgb(40,40,40);
}


.datepicker-years .year.active{
	background:rgb(220,220,220);
}

.datepicker-days .day{	
	padding:6px 10px;
	border:1px solid rgb(180,180,180);
	border-radius:2px;
	min-width:33px;
	min-height:33px;
	text-align:center;
	cursor:pointer;
}
.datepicker-days .day.old,
.datepicker-days .day.new{
		color:rgb(160,160,160);
		background-color:rgb(240,240,240);
}
.datepicker-days .day.disabled,
.datepicker-months .month.disabled,
.datepicker-years .year.disabled{
	color:rgb(200,200,200);
	font-style:italic;
}

.datepicker-days .day:first-child{
	border-left:0;
}
.datepicker-days .day:last-child{
	border-right:0;
}



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


.pad{margin:5px;}
.pad10{margin:10px;}
.pad20{margin:20px;}
.pad30{margin:30px;} 

.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(210,210,210);
	color:rgb(40,40,40);
}
.theme-n-hl-background{
	background-color:rgb(240,240,240);
}
.theme-n-d-background{
	background-color:rgb(180,180,180);
}
.theme-n-color{
	color:rgb(20,20,20);
	text-shadow:0 1px 0 rgba(255,255,255,.8);
}






/**************
 ROUTE CONTAINER
*************/
#route-container{
	border:1px solid rgb(180,180,180);
	border-radius:3px;
margin:1em;
padding:1em;
display:-webkit-box;	
display:flex;

     -webkit-flex-direction:row;
	flex-direction:row;
   
     -webkit-flex-wrap:nowrap;
     flex-wrap: nowrap;

    -webkit-align-content:flex-start;
	align-content: flex-start;

	overflow:hidden;
	overflow-x: auto;
  
         min-width: 1px;
	-webkit-overflow-scrolling:touch;
	background-color:rgb(240,240,240);

	
}

#route-container .route-resizer{
	position:fixed;
	z-index:20;
	left:20px;
	top:16px;
	  cursor:pointer;
}


.re{
 position:relative;
	width:140px;
	height:56px;	
	border-top:2px solid rgb(120,120,120);	
	z-index:1;
	border-radius:0 0 4px 4px;	
	margin-right:-1px;
	margin-top:44px;	
		padding-left:4px;
	flex:0 0 auto;	
    -webkit-flex:0 0 auto;
	justify-content: flex-start;
	
    -ms-transform:translate3d(0,0,0);
	-webkit-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;
	
}

.route-resize .re{
	width:90px;	
	border-top:1px solid;
	margin-top:24px;
	height:30px;
	margin-right:4px;
	margin-left:-4px;

}
.re:nth-child(2){
	padding-left:10px;
	
}
.route-resize .re:nth-child(2){
	padding-left:8px;
	margin-left:2px;
	
}



.re .route-item{
  position:relative;
	width:120px;
	height:90px;	
	border-radius:3px;	
	padding:6px;
	margin-left:2px;	
	
	background-color:rgb(255,255,255);
	border:1px solid rgb(200,200,200);
	text-align:center;
	z-index:5;
	cursor:pointer;
	
	text-shadow:0 1px 1px rgba(255,255,255,.9);	
	position:absolute;	
	top:-46px;
	
	
	-webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  transition: all .2s ease-in;
	
}
.re .route-item:hover,
.re .route-item:focus{

    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14),0 3px 14px 2px rgba(0,0,0,0.12),0 5px 5px -3px rgba(0,0,0,0.3);
	
-webkit-transition: box-shadow .2s ease-out;
-moz-transition: box-shadow .2s ease-out;
transition: box-shadow .2s ease-out;


}

.route-resize .route-item{
		width:80px;
	height:46px;
	top:-25px;
	margin-left:0;
	padding:1px;
}

.re .route-item .number{
  display:block;
	text-shadow:0 1px 1px rgba(0,0,0,.4);
	/*color:rgb(3, 160, 250);*/
	padding-top:10px;
	font-size:26px;
}


.re .route-item > p{
	margin-top:10px;
	font-family:sans-serif, Helvetica, arial;
	font-size:14px;
	color:rgb(20,20,20);
}

.route-resize .route-item p{
font-size:9px;
	padding:0;
	margin:0;
	line-height:normal;
}

.route-resize .route-item .number{
font-size:18px;	
	padding-top:0;
}


.route-begin{
  color:rgb(120,120,120);
  background-color:#f6f6f6 ;
	border:0;
	padding:;
	height:44px;
    line-height:44px;
	border-radius:4px;
	margin-top:22px;
	width:100px;
    min-width:100px;
	text-align:center;

    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
	
	-webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  transition: all .2s ease-in;

}

.route-resize .route-begin{  
	margin-top:8px;
	padding:4px;
	height:32px;
	width:76px;
	font-size:12px;
	margin-right:4px;
		

}



.route-full{
	border:4px solid rgb(120,120,120);	
	border-top:2px solid;
	width:140px;
	margin-left:-5px;	
}
.route-resize .route-full{
	border:2px solid;
	margin-left:-1px;
}

.route-full-start,
.route-full-end{
position:absolute;
	border-top:4px solid rgb(120,120,120);	
	top:-3px;
	z-index:10;
}
.route-full-start{
		left:-12px;	
	width:10px
}
.route-full-end{
	right:-11px;
	width:10px;
}

.route-resize .route-full-start,
.route-resize .route-full-end{
	border-top:1px solid;
	top:-2px;
	
}


/* route spacer */
.route-space{
  	-webkit-transform: translate3d(0,0,0);	
      transform: translate3d(0,0,0);	
	position:relative;	
	flex:0 0 auto;
	width:1px;	
}

.route-end{
		margin-right:50px;
}

.route-end::after{
	display:block;
	position:relative;
	content:"";
	width:20px;
	height:20px;
	background-color:rgb(120,120,120);
	border-radius:50%;
	right:-136px;
	top:-11px;
	z-index:1;			
}


.route-resize .route-end::after{
	right:-85px;
}









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




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

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





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

    textarea, input[type="text"]:not(.select2-input), input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, select {
  /*  width: 204px; */
    }

}


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

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

     
    .widget{
        border-radius:0;
    }

    #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;
   }
   

}




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

    #header .flex-container{
        display:flex;
        flex-direction:column;
    }

     #header .flex-container:last-child{
        display:flex;
        flex-direction:row;
    }



    #header .nav-header-left {
        border-bottom: 1px solid rgba(0,0,0,.3);
        width: 100%;
    }


 

}



/* ------------------ 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;
         left:0;
         top:6px;
     }

    .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%;
    }


   #cart-side-menu .cart-table-content {
    height: 360px;
    }

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

 
    #article-table thead th:nth-child(1),
     #article-table thead th:nth-child(3),
    #article-table thead th:nth-child(5),
     #article-table thead th:nth-child(6){
        display: none;
    }

        
    #article-table tbody tr td:nth-child(1),
    #article-table tbody tr td:nth-child(3),
    #article-table tbody tr td:nth-child(5),
    #article-table tbody tr td:nth-child(6){
        display: none;
    }

    .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%;
    }

    #cart-side-menu .cart-table-content{
    height:300px;
    }

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

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

	 
}








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

	
	.cart-menu-open #artifact,
	.cart-menu-open #content,
	.cart-menu-open.navigation-small #content,
	.cart-menu-open.navigation-small #artifact {
		margin-right: 370px;
	}

	#main-container {
		margin-left: 306px;
	}


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


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

	}

}