// .ht-page-title{
// 	margin: -25px -20px 0 -20px;
// 	background-color: #fff;
// 	line-height: 36px;
// 	padding: 10px 16px 14px;
// 	&.has-border-bottom{
// 		padding-bottom: 13px;
// 		border-bottom: 1px solid #e0e0e0;
// 	}
// }

$navbar-height: 50px;
$ht-page-title-height: 60px;

.ht-page-content{
	overflow-x: auto;
	overflow-x: overlay;
	background-color: #fff !important;
	height: calc(100vh - 50px;) !important;
	overflow: hidden;
}
.ht-page-content-inner{
	background-color: #fff !important;
}
@media (min-width: 992px){
	.page-content-wrapper{
		.ht-page-content{
			position: fixed;
	    left: 235px;
	    top: 50px;
	    right: 0;
	    padding: 0 !important;
	    
	    &.size-fit-in{
	    	.ht-page-content-inner{
		    	height: calc(100vh - #{$navbar-height}) !important;
		    }
	    }
		}
	}
	.page-sidebar-closed{
		.page-content-wrapper{
			.ht-page-content{
		  	left: 45px !important;
			}
		} 
	}
}

// Management layout
.ht-page-header{
	display: none;
	background-color: $grey100;
	border-radius: 2px;
	color: $grey900;
	@include clearfix();
	&.on-navbar{
		padding: 6px 6px;
		position: fixed;
		height: 42px;
		top: 4px;
		z-index: 9998;
	}
	.ht-dm_navbar{
		float: left;
		ul{
			margin: 0;
			padding: 0;
			line-height: 20px;
			font-size: 0;
			white-space: nowrap;
			overflow: auto;
			li{
				display: inline-block;
				vertical-align: top;
				margin-right: 6px;
				&:last-child{
					margin-right: 0;
				}
				a,span{
					display: block;
					padding: 3px 16px;
					line-height: 22px;
					font-size: 15px;
					font-weight: 600;
					color: $grey800;
					background-color: $grey100;
					border: 2px solid $grey300;
					border-radius: 2px;
					&:hover, &:active, &:focus{
						text-decoration: none;
					}
					&:hover{
						background-color: $grey200;
					}
				}
				&.active{
					a,span{
						color: #fff;
						background-color: material-color('blue','500');
						border-color: transparent;
					}
				}
			}
		}
	}
}
.ht-dm_time-filter{
	padding: 0 12px;
	& > * {
		display: inline-block;
		vertical-align: top;
	}
	.time-filter_title{
		margin: 0;
		padding: 7px 4px;
		line-height: 16px;
		font-size: 12px;
		font-weight: 600;
		color: $grey900;
	}
	.time-filter_label{
		margin: 0;
		padding: 7px 4px;
		line-height: 16px;
		font-size: 12px;
		font-weight: 600;
		color: $grey700;
	}
	.time-filter_input{
		width: 120px;
		border-radius: 2px;
		&.time-filter_select-box{
			width: auto;
			min-width: 180px;
			max-width: 280px;
		}
	}
	.ht-btn-sm{
		height: 30px;
		padding: 5px 12px;
	}
	.time-filter_divider{
		height: 30px;
		width: 1px;
		background-color: $grey300;
		margin: 0 24px;
	}
}
@media (min-width: 992px){
	.ht-page-header{
		&.on-navbar{
			display: block;
			display: flex;
		}
	}
	.page-content-wrapper{
		.ht-page-header{
			&.on-navbar{
				left: 241px;
			}
    }
	}
	.page-sidebar-closed{
		.page-content-wrapper{
			.ht-page-header{
				&.on-navbar{
					left: 52px !important;
				}
			}
		}
	}
}


#htDataManagement{
	.ht-data-management-container{
		min-width: 800px;
	}
	b{
		font-weight: 600;
	}
	.form-control{
		border-radius: 2px;
	}
	.ht-select2-restyled{
		.select2-container--bootstrap.select2-container--focus .select2-selection, 
		.select2-container--bootstrap.select2-container--open .select2-selection{
			box-shadow: 0 0 0;
			border-color: #c2cad8;
			border-radius: 2px;
		}
		.select2-container--bootstrap .select2-search--dropdown .select2-search__field{
			box-shadow: 0 0 0;
		}
		.select2-container--bootstrap .select2-selection {
	    box-shadow: 0 0 0;
	    background-color: #fff;
	    border-radius: 2px;
		}
	}
	$height__ht-dm_navbar: 63px;
	.form-control{
		
	}
	.select2{
		width: 100% !important;
		font-size: 13px;
		font-family: 'Open Sans', sans-serif;
	}
	[class^='select2']{
	  &:focus, &:active, &:visited{
	    outline: none !important;
	    box-shadow: 0 0 0 !important;
	  }
	}
	.select2,
	.ht-select2-input {
		max-width: 100% !important;
	}
	.select2-container--bootstrap.select2-container--focus .select2-selection, 
	.select2-container--bootstrap.select2-container--open .select2-selection{
		box-shadow: 0 0 0 0;
		border-color: #ccc;
	}
	.select2-container--bootstrap .select2-selection--single{
		height: 34px;
		line-height: 20px;
		padding: 5px 16px 7px 10px;
	}
	.select2-container--bootstrap .select2-selection{
		border-radius: 2px;
		// border-left: 0;
		box-shadow: 0 0 0 0;
	}
	.select2-selection__rendered{
		margin: 0;
		padding: 0;
		white-space: nowrap;
		display: block;
		font-family: 'Open Sans', sans-serif;
		font-size: 13px;
		font-weight: 600;
		overflow: hidden;
		text-overflow: ellipsis;
		color: $grey900;
	}
	.select2-container--bootstrap .select2-selection--single .select2-selection__arrow{
		right: 8px;
	}
	.select2-container--bootstrap .select2-search--dropdown .select2-search__field{
		border-radius: 2px;
		box-shadow: 0 0 0;
	}
	.ht-dm_navbar{
		padding: 12px;
		border-bottom: 1px solid #ccc;
		ul:not(.main-list){
			margin: 0;
			padding: 0;
			line-height: 20px;
			font-size: 0;
			white-space: nowrap;
			overflow: auto;
			li{
				display: inline-block;
				vertical-align: top;
				margin-right: 6px;
				&:last-child{
					margin-right: 0;
				}
				a,span{
					display: block;
					padding: 3px 16px;
					line-height: 22px;
					font-size: 15px;
					font-weight: 600;
					color: $grey800;
					background-color: $grey100;
					border: 2px solid $grey300;
					border-radius: 2px;
					&:hover, &:active, &:focus{
						text-decoration: none;
					}
					&:hover{
						background-color: $grey200;
					}
				}
				&.active{
					a,span{
						color: #fff;
						background-color: material-color('blue','500');
						border-color: transparent;
					}
				}
			}
		}
		.ht-dm_dlc_list-navbar{
			.select2-container--bootstrap .select2-selection{
				border-left: 1px solid #ccc !important;
			}
		}
		ul.main-list{
			li{
				margin-left: 12px;
			}
		}
	}
	.ht-dm_content{
		display: flex;
		align-items: stretch;
		height: calc(100vh - #{$navbar-height} ); // - #{$height__ht-dm_navbar}
		.ht-dm_data-list-col{
			flex: 0 0 300px;
			@media (min-width: 960px){
				flex: 0 0 360px;
			}
			@media (min-width: 1440px){
				flex: 0 0 400px;
			}
			display: flex;
			flex-direction: column;
			align-items: stretch;
			width: 30%;
			border-right: 1px solid #ccc;
			ul{
				list-style: none;
				margin: 0;
				padding: 0;
			}
			a{
				@include transition(background-color .1s ease-in-out);
				&:hover, &:active, &:focus{
					text-decoration: none;
				}
			}
			.list-loading{
				height: 56px;
				background-image: url("../img/spinner.svg");
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 56px 56px;
			}
		}
		.ht-dm_main-col{
			width: 100%;
		}
		.ht-dm_data-content-col{
			flex: 1 1 auto;
			min-width: 0;
			display: flex;
			align-items: stretch;
		}
		.ht-dm_data-info-col{
			flex: 0 0 50%;
			min-width: 0;
			border-right: 1px solid #ccc;
			height: 100%;
			overflow-y: auto;
		}
		.ht-dm_data-detail-col{
			flex: 0 0 50%;
			min-width: 0;
			overflow-y: auto;
		}

		&.order-manager{
			.ht-dm_data-info-col{
				flex: 0 0 65%;
			}
			.ht-dm_data-detail-col{
				flex: 0 0 35%;
			}
		}
	}
	.ht-dm_navbar + .ht-dm_content{
		height: calc(100vh - #{$navbar-height} - 57px);
	}
	.ht-product-manager_content{
		.product-images{
			display: flex;
			align-items: top;

			.pi_section_main-image{
				//
			}

			//
			.pi_title{
				margin: 0;
				padding: 4px 8px;
				line-height: 18px;
				font-size: 13px;
				font-weight: 600;
				background-color: $grey200;
				border-radius: 2px;
			}
			.pi_list-images{
				width: 100% !important;
				padding: 6px 0;
				margin-top: 5px;
				white-space: nowrap;
				overflow-x: auto;
				overflow-x: overlay;
				&::-webkit-scrollbar {
			    width:  4px;
			    height: 4px;
			  }
				.pi_li_single-image{
					display: inline-block;
					vertical-align: top;
					position: relative;
					font-size: 0;
					.image-wrapper{
						position: relative;
						width: 148px;
						height: 148px;
						padding: 2px;
						border: $border;
						border-radius: 2px;
						.image-wrapper_inner{
							width: 142px;
							height: 142px;
						}
					}
					.image-actions{
						display: block;
						position: absolute;
						top: 3px; right: 3px;
						.single-action{
							display: inline-block;
							width: 24px;
							height: 24px;
							margin-left: 3px;
							line-height: 24px;
							font-size: 14px;
							text-align: center;
							color: #fff;
							background-color: #000;
							opacity: .5;
							&:hover, &:focus, &:active{
								text-decoration: none
							}
							&:hover{
								opacity: .8;
							}
							&:active{
								opacity: 1;
							}
						}
						.single-action_delete{
							background-color: material-color('red','900');
						}
						.single-action_edit{
							background-color: material-color('blue','900');
						}
					}
					&.upload-error{
						.image-wrapper{
							&:after{
								content: "";
								display: block;
								position: absolute;
								top: 0; left: 0; bottom: 0; right: 0;
								background-color: rgba(#fff,.6);
								background-image: url("../img/warning.png");
								background-size: 32px 32px;
								background-position: center center;
								background-repeat: no-repeat;
							}
						}
					}
				}
			}
			.pi_image-actions{
				margin-top: 4px;
			}
		}
	}



	//
	.has-bdt{
		border-top: $border;
	}
	.has-bdb{
		border-bottom: $border;
	}
	.scrollbar-styled{
		overflow-y: auto;
		@include scrollbar(6px, rgba(#000,.16), rgba(#000,.04));
		&::-webkit-scrollbar-thumb {
    	border-radius: 3px;
		}
		&::-webkit-scrollbar-track {
		  border-radius: 3px;
		}
	}
	.ht-button-justified-navbar{
		padding: 12px 8px;
		.ht-single-button-wrapper{
			display: table-cell;
    	width: 1%;
    	padding: 0 4px;
		}
	}

	//
	//
	.ht-dm_dlc_list-navbar{
		flex: 0 0 auto;
		min-height: 1px;
		padding: 12px;
		ul.main-list{
			max-width: 100%;
			margin-bottom: 8px;
			&:last-child{
				margin-bottom: 0;
			}

			& > li{
				display: table-cell;
				width: 1%;
				vertical-align: top;
				& > a,
				a.dropdown-toggle-link{
					display: block;
					padding: 6px;
					line-height: 20px;
					font-size: 13px;
					font-weight: 600;
					text-align: center;
					color: $grey800;
					border: 1px solid #ccc;
					border-left: 0;
					white-space: nowrap;
					&:hover{
						background-color: $grey100;
					}
				}
				&:first-child{
					& > a{
						border-left: 1px solid #ccc;
						border-radius: 2px 0 0 2px;
					}
					.select2-container--bootstrap .select2-selection{
						border-radius: 2px 0 0 2px;
						border-left: 1px solid #ccc;
					}
				}
				&:last-child{
					& > a,
					a.dropdown-toggle-link{
						border-radius: 0 2px 2px 0;
					}
				}
				&.active{
					& > a,
					a.dropdown-toggle-link{
						color: #fff;
						background-color: material-color('blue','500');
						border-color: material-color('blue','500');
					}
					& + li{
						& > a,
						a.dropdown-toggle-link{
							border-left-color: material-color('blue','500');
						}
					}
				}
			}
			&.no-table-display{
				// display: block;
				@include clearfix();
				& > li{
					width: auto;
					float: left;
					display: block;
					// min-width: 160px;
					max-width: 200px;
				}
				&.one-item{
					& > li{
						float: none;
						width: 100%;
					}
				}
				&.two-items{
					& > li{
						width: 50%;
					}
				}
				&.three-items{
					& > li{
						width: 33.3333%;
					}
				}
				&.four-items{
					& > li{
						width: 25%;
					}
				}
				&.five-items{
					& > li{
						width: 20%;
					}
				}
				&.six-items{
					& > li{
						width: 16.666%;
					}
				}
				&.seven-items{
					& > li{
						width: 14.285%;
					}
				}
				&.eight-items{
					& > li{
						width: 12.5%;
					}
				}
				&.nine-items{
					& > li{
						width: 11.1111%;
					}
				}
				&.ten-items{
					& > li{
						width: 10%;
					}
				}
			}
		}
	}
	.ht-dm_dlc_list-search{
		flex: 0 0 auto;
		min-height: 0;
		padding: 12px;
		.form-group{
			margin: 0;
			position: relative;
			.search-input{
				height: 32px;
				padding: 5px 12px 5px 32px;
				font-size: 13px;
				background-color: $grey50;
				border-color: #ccc;
				border-radius: 2px;
				&:focus{
					background-color: #fff;
					border-color: #ccc;
				}
			}
			.search-icon{
				display: block;
				position: absolute;
				top: 0; left: 0;
				height: 32px;
				width: 32px;
				line-height: 32px;
				font-size: 14px;
				text-align: center;
				color: $grey400;
				border-color: #ccc;
				z-index: 100;
			}
		}
	}
	.ht-dm_dlc_list-users,
	.ht-dm_dlc_list-orders,
	.ht-dm_dlc_list-products,
	.ht-dm_dlc_list-articles{
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
	}


	//
	.data-info_single-section{
		border-bottom: $border;
		&:last-child{
			border-bottom: 0;
		}
		.section-header{
			display: flex;
			align-items: center;
			margin: 0 16px;
			padding: 20px 0 8px;
			border-bottom: $border;
			.section-title{
				flex: 1 1 auto;
				min-width: 0;
				margin: 0;
				padding: 0;
				line-height: 22px;
				font-size: 16px;
				font-weight: 600;
				color: $grey900;
				a{
					display: block;
					position: relative;
					padding-right: 28px;
					line-height: 22px;
					font-size: 16px;
					color: material-color('blue','700');
					i.fa{
						display: block;
						position: absolute;
						top: 0; right: 8px;
						line-height: 22px;
						height: 22px;
						@include transition(right .2s ease-in-out);
					}
					&:hover, &:active, &:focus{
						text-decoration: none;
					}
					&:hover{
						color: material-color('blue','400');
						i{
							right: 3px;
						}
					}
				}
			}
			.section-actions{
				flex: 0 0 auto;
				min-width: 0;
			}
			& + .section-content{
				padding-top: 8px;
			}
		}
		.section-content{
			padding: 16px 16px;
			.single-info{
				margin: 0 0 3px;
				line-height: 19px;
				position: relative;
				&:last-child{
					margin-bottom: 0 !important;
				}
				span{
					display: inline;
					vertical-align: top;
					line-height: 19px;
					font-size: 14px;
				}
				.single-info_label{
					margin-right: 8px;
					color: $grey700;
				}
				.single-info_data{
					font-weight: 600;
					color: $grey900;
				}
				&.has-icon-left{
					padding-left: 24px;
					.single-info_icon{
						display: block;
						position: absolute;
						top: 1px; left: 0; 
						width: 19px;
						line-height: 18px;
						font-size: 12px;
						text-align: center;
						color: material-color('grey','400');
					}
				}
				&.has-input-form{
					display: flex;
					align-items: top;
					.single-info_label{
						flex: 0 0 auto;
						min-width: 0;
						max-width: 50%;
						font-weight: 600;
					}
					.single-info_input{
						flex: 1 1 auto; 
						min-width: 0;
						font-weight: 600;
						.sii_form-control{
							display: inline-block;
							min-width: 40%;
							max-width: 100%;
							height: 21px;
							line-height: 20px;
							font-weight: 600;
							color: material-color('blue','700');
							background-color: transparent;
							border: 0;
							border-bottom: 1px dotted $grey500;
							&:focus{
								outline: none;
							}
						}
					}
				}
				&.more-margin{
					margin-bottom: 5px;
				}
				&.more-margin-2{
					margin-bottom: 8px;
				}
			}
			.order-info-document{
				margin: -4px;
				border: 1px solid $grey400;
				background-color: $grey50;
				padding: 12px;
			}
		}
	}

	.list-attachment-doc{
		padding: 4px 0;
		.single-attachment{
			margin-top: 2px;
			line-height: 17px;
			font-size: 13px;
			color: $blue500;
		}
	}

	

	// ListCol: users
	.ht-dm_dlc_list-users{
		.ht-dm_dlc_lu_single-user{
			position: relative;
			display: block;
			padding: 12px;
			color: $grey800;
			border-bottom: $border;
			.su_header{
				margin-bottom: 5px;
				display: flex;
				align-items: center;
				.su_user-title{
					flex: 1 1 auto;
					min-width: 0;
					margin: 0;
					padding-right: 8px;
					line-height: 20px;
					font-size: 15px;
					font-weight: 600;
					color: material-color('blue','700');
				}
				.su_user-phone{
					flex: 0 0 auto;
					min-width: 0;
					line-height: 20px;
					font-size: 14px;
					color: $grey900;
				}
			}
			.su_subtitles{
				margin-top: 2px;
				line-height: 18px;
				font-size: 13px;
				color: $grey700;
			}
			.su_tags{
				margin-top: 5px;
				font-size: 0;
				.su_single-tag{
					display: inline-block;
					vertical-align: top;
					margin: 0 0 2px 0;
					line-height: 16px;
					font-size: 12px;
					font-weight: 400;
					color: $grey600;				
					border-radius: 2px;
					& + span:before{
						content: "\2022";
						display: inline-block;
						vertical-align: top;
						padding: 0 4px;
						line-height: 16px;
						font-size: 8px;
						color: $grey500;
					}
				}
			}
			.su_metas{
				display: flex;
				.sc_date-and-time{
					flex: 0 0 auto;
					min-width: 0;
					line-height: 18px;
					font-size: 13px;
					color: $grey800;
				}
				.sc_person-in-charge{
					flex: 1 1 auto;
					min-width: 0;
					text-align: right;
					line-height: 18px;
					font-size: 13px;
					color: material-color('green','500');
				}
			}

			&.has-select-box{
				display: flex;
				align-items: center;
				.su_select-box{
					flex: 0 0 auto;
					min-width: 0;
					padding: 0 0;
					margin: 0 12px 0 0;
					.su_select-label{
						display: block;
						padding: 8px;
						cursor: pointer;
					}
					input[type="checkbox"]{
						cursor: pointer;
					}
				}
				.su_main-box{
					flex: 1 1 auto;
					min-width: 0;
				}
			}
			&:hover{
				background-color: $grey100;
			}
			&:active{
				background-color: $grey300;
			}
			&.active{
				background-color: $grey200;
			}
		}
	}

	// ListCol: orders
	.ht-dm_dlc_list-orders{
		.ht-dm_dlc_lo_single-order{
			display: block;
			padding: 12px;
			color: $grey800;
			border-bottom: $border;
			@include clearfix();
			.col-left{
				width: 60%;
				float: left;
				text-align: left;
			}
			.col-right{
				width: 40%;
				float: right;
				text-align: right;
			}
			.so_line-01{
				margin-bottom: 5px;
				line-height: 20px;
				font-size: 15px;
				font-weight: 600;
			}
			.so_line-02{
				margin-top: 2px;
				line-height: 18px;
				font-size: 13px;
				color: $grey900;
			}
			.so_line-03{
				margin-top: 2px;
				line-height: 18px;
				font-size: 13px;
				color: $grey900;
			}
			.so_order-code{
				color: material-color('blue','700');
			}
			.so_order-status{
				font-size: 13px;
			}
			.so_customer-name{
				//
			}
			&:hover{
				background-color: $grey100;
			}
			&:active{
				background-color: $grey300;
			}
			&.active{
				background-color: $grey200;
			}
		}
	}

	// ListCol: products
	.ht-dm_dlc_list-products{
		.ht-dm_dlc_lp_single-product{
			display: block;
			position: relative;
			min-height: 104px;
			padding: 14px 12px 12px 102px;
			color: $grey900;
			border-bottom: $border;
			.sp_product-image{
				position: absolute;
				top: 12px; left: 12px;
				width: 80px;
				height: 80px;
				background-color: $grey100;
				border: 1px solid rgba(#000,.08);
			}
			.sp_product-title{
				margin: 0 0 4px;
				line-height: 19px;
				font-size: 14px;
				font-weight: 600;
				color: material-color('blue','700');
			}
			.sp_product-price{
				margin: 2px 0 0;
				line-height: 18px;
				font-size: 13px;
				font-weight: 600;
				color: $grey900;
			}
			.sp_product-brand{
				margin: 2px 0 0;
				line-height: 18px;
				font-size: 13px;
				color: $green600;
			}
			.sp_product-code{
				margin: 2px 0 0;
				line-height: 18px;
				font-size: 13px;
				color: $grey700;
			}
			&:hover{
				background-color: $grey100;
			}
			&:active{
				background-color: $grey300;
			}
			&.active{
				background-color: $grey200;
			}
		}
	}


	// ListCol: news
	.ht-dm_dlc_list-articles{
		.ht-dm_dlc_lu_single-article{
			display: block;
			padding: 12px;
			color: $grey800;
			border-bottom: $border;
			@include clearfix();
			.sa_header{
				font-size: 14px;
				font-weight: 600;
			}
			.sa_article-title{
				margin: 0;
				line-height: 19px;
				font-size: 14px;
				font-weight: 600;		
				color: $grey900;
			}
			.sa_article-meta{
				margin-top: 5px;
				line-height: 16px;
				font-size: 0;
				span{
					display: inline-block;
					line-height: 16px;
					font-size: 12px;
					color: $grey500;
					&:after{
						content: "\2022";
						display: inline-block;
						line-height: 14px;
						padding: 2px 4px 0;
						font-size: 10px;
						color: $grey400;
					}
					&:last-child{
						&:after{
							display: none;
						}
					}
				}
			}
			.sa_article-category{
				margin: 5px 0 0;
				line-height: 16px;
				font-size: 12px;
				font-size: 400;
				color: $green600;
				span{
					display: inline-block;
					vertical-align: top;
					line-height: 16px;
				}
			}
			&:hover{
				background-color: $grey100;
			}
			&:active{
				background-color: $grey300;
			}
			&.active{
				background-color: $grey200;
			}
		}
	}

	// tags
	.list-tags{
		font-size: 0;
		a,span{
			display: inline-block;
			vertical-align: top;
		}
		.divider{
			display: inline-block;
			vertical-align: top;
			width: 1px;
			height: 24px;
			background-color: $grey300;
			margin: 0 12px;
		}
		.single-tag{
			display: inline-block;
			vertical-align: top;
			height: 24px;
			margin: 0 4px 4px 0;
	  	padding: 3px 8px;
	  	line-height: 16px;
	  	font-size: 12px;
	  	font-weight: 600;
	  	background-color: $grey100;
	  	border: $border;
	  	border-radius: 2px;
	  // 	&:after{
			// 	content: "\2022";
			// 	display: inline-block;
			// 	vertical-align: top;
			// 	padding: 2px 6px 0;
			// 	line-height: 14px;
			// 	font-size: 8px;
			// 	color: $grey500;
			// }
			// &:last-child{
			// 	&:after{
			// 		display: none;
			// 	}
			// }
		}
	}

	// notes
	.list-notes{
		padding: 2px 0;
		.single-note{
			& + .single-note{
				margin-top: 8px;
				padding-top: 8px;
				border-top: $border;
			}
			.sn_main-content{
				line-height: 19px;
				font-size: 14px;
				&.two-lines{
					height: 38px;
					@include multiLineEllipsis(2);
				}
			}
			.sn_note-meta{
				margin-top: 5px;
				font-size: 0;
				line-height: 16px;
				.sn_nm_single-meta{
					display: inline-block;
					vertical-align: top;
					font-size: 12px;
					line-height: 16px;
					color: $grey500;
					&:after{
						content: "\2022";
						display: inline-block;
						vertical-align: top;
						padding: 2px 5px 0;
						line-height: 10px;
						font-size: 8px;
						color: $grey400;
					}
					&:last-child{
						&:after{
							display: none;
						}
					}
				}
			}
		}
	}

	// products
	.list-products{
		padding: 4px 0;
		.single-product{
			position: relative;
			min-height: 80px;
			margin-bottom: 12px;
			padding: 0 0 0 92px;
			&:last-child{
				margin-bottom: 0;
			}
			.sp_product-image{
				display: block;
				position: absolute;
				top: 0; left: 0;
				width: 80px; height: 80px;
				background-color: $grey200;
				&:hover{
					opacity: .9;
				}
			}
			.sp_product-info{
				//
			}
			.sp_product-title{
				margin: 0 0 2px;
				line-height: 19px;
				font-size: 14px;
				font-weight: 600;
				color: $grey900;
				a{
					color: $grey900;
					&:hover{
						color: material-color('blue','500');
					}
				}
			}
			.sp_product-price{
				margin-top: 2px;
				line-height: 20px;
				font-size: 14px;
				font-weight: 600;
				color: material-color('red','500');
			}
			.sp_product-quantity{
				margin-top: 2px;
				line-height: 16px;
				font-size: 12px;
				color: $grey700;
			}
			.sp_product-code{
				margin-top: 2px;
				line-height: 16px;
				font-size: 12px;
				color: $grey700;
			}
		}
	}
	.list-products-type-2{
		padding: 12px 0 6px;
		.row{
			margin: 0 -6px;
		}
		div[class^='col']{
			padding: 0 6px;
		}
		.col-xs-6{
			@media (min-width: 1440px){
				width: 33.3333%;
			}
			
		}
		.single-product{
			margin-bottom: 12px;
			padding-bottom: 8px;
			border-bottom: $border;
			.sp_product-image{
				background-color: $grey100;
				margin-bottom: 6px;
			}
			.sp_product-title{
				margin: 0 0 1px;
				line-height: 19px;
				font-size: 14px;
				font-weight: 600;
				color: $grey900;
				a{
					color: $grey900;
					&:hover{
						color: material-color('blue','500');
					}
				}
			}
			.sp_product-price{
				margin-top: 1px;
				line-height: 19px;
				font-size: 14px;
				font-weight: 600;
				color: material-color('red','500');
			}
			.sp_product-quantity{
				margin-top: 2px;
				line-height: 16px;
				font-size: 12px;
				color: $grey700;
			}
			.sp_product-code{
				margin-top: 2px;
				line-height: 16px;
				font-size: 12px;
				color: $grey700;
			}
		}
	}

	// orders
	.list-orders{
		padding: 4px 0;
		.single-order{
			display: block;
			position: relative;
			margin-left: -8px;
			padding: 0 20px 0 5px;
			color: $grey900;
			border-left: 3px solid transparent;
			@include transition(padding .1s ease-in-out, border-color .1s ease-in-out);
			&:hover, &:active, &:focus{
				text-decoration: none;
			}
			& + .single-order{
				margin-top: 8px;
			}
			.so_order-icon{
				display: block;
				position: absolute;
				top: 50%;
				margin-top: -10px;
				right: 4px;
				line-height: 20px;
				padding: 0 2px;
				color: $grey400;
				@include transition(color .1s ease-in-out, right .1s ease-in-out);
			}
			.so_order-code{
				margin: 0;
				line-height: 18px;
				font-size: 14px;
				font-weight: 600;
			}
			.so_order-info{
				margin-top: 2px;
				line-height: 18px;
				font-size: 0;
				color: $grey600;
				.so_oi_single-info{
					display: inline-block;
					vertical-align: top;
					line-height: 18px;
					font-size: 12px;
					&:after{
						display: inline-block;
						vertical-align: top;
						content: "\2022";
						padding: 2px 5px 0;
						line-height: 14px;
						font-size: 8px;
						color: $grey400;
					}
					&:last-child{
						&:after{
							display: none;
						}
					}
				}
			}
			&:hover{
				border-color: #e0e0e0;
				padding-left: 10px;
				.so_order-icon{
					right: 0;
					color: material-color('blue','500');
				}
			}
		}
	}

	// discounts
	.list-discounts{
		padding: 4px 0;
		.single-discount{
			display: block;
			padding: 12px 0 12px 6px;
			margin-left: -6px;
			border-left: 2px solid transparent;
			border-bottom: $border;
			cursor: default;
			@include transition(padding .1s ease-in-out, border-color .1s ease-in-out);
			&:first-child{
				padding-top: 4px;
			}
			&:last-child{
				padding-bottom: 4px;
				border-bottom: 0;
			}
			.sd_discount-title{
				margin: 0 0 5px;
				line-height: 19px;
				font-size: 14px;
				font-weight: 600;
				color: $grey900;
			}
			.sd_discount-info{
				margin: 1px 0 0;
				line-height: 18px;
				font-size: 13px;
				color: $grey700;
			}
			.sd-discount-actions{
				margin: 5px 0 0;
				a{
					display: block;
					line-height: 16px;
					font-size: 12px;
					font-weight: 600;
				}
			}
			&:hover{
				padding-left: 10px;
				border-left-color: $blue300;
			}
		}
	}

	// file
	.list-attached-files{
		.single-attached-file{
			position: relative;
			display: block;
			float: left;
			margin-right: 8px;
			width: calc(50% - 8px);
			max-width: 196px;
			// height: 100px;
			margin: 8px 8px 0 0;
			border: 1px solid #e0e0e0;
			border-radius: 2px;
			.saf_bg{
				background-repeat: no-repeat;
				background-size: 64px 64px;
				background-position: 50% 28%;
			}
			.info-view{
				position: absolute;
				left: 0; right: 0; bottom: 0;
			}
			.file-name{
				display: block;
				margin: 0;
				padding: 0 12px 0 0;
				line-height: 16px;
				font-size: 12px;
				font-weight: 600;
				color: $grey900;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
			}
			.file-size{
				margin-top: 3px;
				display: none;
				line-height: 14px;
				font-size: 11px;
				color: $grey500;
			}
			.file-action{
				display: none;
				margin-top: 4px;
				padding-top: 6px;
				border-top: 1px solid #e0e0e0;
			}
			&:hover{
				.file-name{
					white-space: normal;
					max-height: 60px;
					display: -webkit-box;
					-webkit-line-clamp: 4;
					-webkit-box-orient: vertical;
					line-height: 15px;

				}
				.file-size{
					display: block;
				}
				.file-action{
					display: block;
				}
			}
			&.file-type{
				.info-view{
					background-color: $grey100;
					border-top: 1px solid #e0e0e0;
					padding: 8px;
				}
				&:hover{
					.info-view{
						top: 0;
						border-top: 0;
					}
				}
			}

			// upload card
			.upload-label{
				position: absolute;
				top: 50%; left: 0; right: 0;
				margin-top: -24px;
				color: $grey500;
				.label-icon{
					i{
						display: inline-block;
						line-height: 28px;
					}
				}
				.label-text{
					margin-top: 6px;
					line-height: 16px;
				}
			}
			&:hover{
				.upload-label{
					color: $grey700;
				}
			}


			// triangle effect
			&:before{
				z-index: 234;
				content: "";
				display: block;
				position: absolute;
				bottom: -1px; right: -1px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0 0 16px 16px;
				border-color: transparent transparent #fff transparent;
			}
			.paper-effect{
				display: block;
				position: absolute;
				bottom: -1px; right: -1px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 16px 16px 0 0;
				border-color: rgba(#fff,.6) transparent transparent transparent;
				&.paper-blue{
					border-color: material-color('blue','500') transparent transparent transparent;
				}
				&.paper-red{
					border-color: material-color('red','500') transparent transparent transparent;
				}
				&.paper-grey{
					border-color: material-color('grey','600') transparent transparent transparent;
				}
				&:after{
					content: "";
					display: block;
					position: absolute;
					bottom: 0; right: 0;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 0 16px 16px;
					border-color: transparent transparent $grey300 transparent;
				}
			}
		}
	}



	// profile-image
	.profile-image{
		width: 186px;
		height: 186px;
		padding: 2px;
		border: $border;
		border-radius: 2px;
		.main-image{
			width: 180px;
			height: 180px;
		}
	}

	// 
	.article-featured-image{
		padding: 2px;
		border: 1px solid #eee;
		background-color: $grey50;
		border-radius: 2px;
		
	}

	//
	.orders_single-statistic{
		margin-bottom: 12px;
		padding: 8px;
		text-align: center;
		background-color: $grey50;
		border: 1px solid $grey400;
		.o_ss_label{
			line-height: 18px;
			font-size: 13px;
		}
		.o_ss_number{
			margin-top: 3px;
			line-height: 24px;
			font-size: 18px;
			font-weight: 700;
			color: material-color('green','500');
		}
	}

	.ht-full-article{
		width: 80%;
		margin: 24px auto 48px;
		.article-title{
			margin: 24px 0 16px;
			line-height: 36px;
			font-size: 28px;
			font-weight: 600;
		}
		.article-meta{
			margin: 0 0 12px;
			font-size: 12px;
			color: $grey600;
		}
		.article-content{
			margin-top: 24px;
			& > * {
				&:first-child{
					margin-top: 0 !important;
				}
			}
			p{
				margin-bottom: 10px;
			}
			h1,.h1{
				margin: 24px 0 16px;
				line-height: 36px;
				font-size: 28px;
				font-weight: 600;
			}
			h2,.h2{
				margin: 24px 0 16px;
				line-height: 30px;
				font-size: 24px;
				font-weight: 600;
			}
			h3,.h3{
				margin: 16px 0 12px;
				line-height: 24px;
				font-size: 18px;
				font-weight: 600;
			}
			h4,.h4{
				margin: 16px 0 12px;
				line-height: 22px;
				font-size: 16px;
				font-weight: 600;
			}
			h5,.h5{
				margin: 12px 0 8px;
				line-height: 19px;
				font-size: 14px;
				font-weight: 600;
			}
			h6,.h6{
				margin: 12px 0 8px;
				line-height: 16px;
				font-size: 12px;
				font-weight: 600;
			}
			ul{
				padding-left: 24px; 
			}
			img{
				max-width: 100% !important;
			}
		}
	}
}


.select2-results{
	font-size: 13px;
}
.select2-container--bootstrap .select2-search--dropdown .select2-search__field{
	border-radius: 2px;
}

.has-inner-upload-file{
	position: relative;
	.upload-file-inner{
		input{
			display: none;
			&:hover, &:active, &:focus{
				outline: none;
			}
			&[type="file"]{
				display: block;
				position: absolute;
				z-index: 100;
				top: 0; left: 0; right: 0; bottom: 0;
				opacity: 0;
				cursor: pointer;
			}
		}
	}

}