// CLASSES


// Flex Container
.flex{ display: flex !important; }

.flex-row            			{ flex-direction: row !important; }
.flex-column         			{ flex-direction: column !important; }
.flex-row-reverse    			{ flex-direction: row-reverse !important; }
.flex-column-reverse 			{ flex-direction: column-reverse !important; }

.flex-wrap         				{ flex-wrap: wrap !important; }
.flex-nowrap       				{ flex-wrap: nowrap !important; }
.flex-wrap-reverse 				{ flex-wrap: wrap-reverse !important; }

.justify-content-start  	{ justify-content: flex-start !important; }
.justify-content-end    	{ justify-content: flex-end !important; }
.justify-content-center 	{ justify-content: center !important; }
.justify-content-between	{ justify-content: space-between !important; }
.justify-content-around 	{ justify-content: space-around !important; }

.align-items-start    		{ align-items: flex-start !important; }
.align-items-end      		{ align-items: flex-end !important; }
.align-items-center   		{ align-items: center !important; }
.align-items-baseline 		{ align-items: baseline !important; }
.align-items-stretch  		{ align-items: stretch !important; }

.align-content-start   		{ align-content: flex-start !important; }
.align-content-end     		{ align-content: flex-end !important; }
.align-content-center  		{ align-content: center !important; }
.align-content-between 		{ align-content: space-between !important; }
.align-content-around  		{ align-content: space-around !important; }
.align-content-stretch 		{ align-content: stretch !important; }

.align-self-auto     			{ align-self: auto !important; }
.align-self-start    			{ align-self: flex-start !important; }
.align-self-end      			{ align-self: flex-end !important; }
.align-self-center   			{ align-self: center !important; }
.align-self-baseline 			{ align-self: baseline !important; }
.align-self-stretch  			{ align-self: stretch !important; }


// Flex Items
.flex-item								{ min-width: 0; }
.flex-item-dynamic-width	{ flex: 1 1 auto; min-width: 0;}
.flex-item-text-width			{ flex: 0 0 auto; min-width: 0;}

.ojf-fill{					object-fit: fill; }
.ojf-contain{				object-fit: contain; }
.ojf-cover{					object-fit: cover; }
.ojf-none{					object-fit: none; }
.ojf-scale-down{		object-fit: scale-down; }

// Helped Classes
.block		{ display: block !important; }
.iblock		{ display: inline-block !important; }
.inline		{ display: inline !important; }

.disabled{ pointer-events: none !important; }

.pos-sta{	position: static; }
.pos-rel{	position: relative; }
.pos-abs{	position: absolute; }

.va-top{ vertical-align: top !important; }
.va-mid{ vertical-align: middle !important; }
.va-bot{ vertical-align: bottom !important; }

.ht-bgcover{ 
	@include background-size(cover); 
	background-position: 50% 50%; 
}
.ht-rectangle{
	position: relative;
	display: block;
	&:after {
	  content: "";
	  display: block;
	  padding-bottom: 100%;
	}
	& > .ht-inner{
  	display: block;
		position: absolute;
  	top: 0; left: 0; right: 0; bottom: 0;
	}
	&.ratio-11{ &:after { 	padding-bottom: 100%; } }
	&.ratio-32{ &:after { 	padding-bottom: 66.6666%; } }
	&.ratio-23{ &:after {		padding-bottom: 150%; } }
	&.ratio-21{ &:after {		padding-bottom: 50%; } }
	&.ratio-12{ &:after { 	padding-bottom: 200%; } }
	&.ratio-43{ &:after { 	padding-bottom: 75%; } }
	&.ratio-34{ &:after { 	padding-bottom: 133.3334%; } }
	&.ratio-169{ &:after { 	padding-bottom: 56.25%; } }
	&.ratio-916{ &:after { 	padding-bottom: 177.7778%; } }
}
.ht-fit-image{
	display: block;
	text-align: center;
	white-space: nowrap;
	&:after{
		content:"";
		display: inline-block;
		vertical-align: middle;
		height: 100%;
	}
	img{
		display: inline-block;
		vertical-align: middle;
		max-width: 100%;
		max-height: 100%;
	}
}
.ht-oneline{
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nowrap{
	white-space: nowrap;
}
.noscroll{ 
  overflow: hidden;
}
.break-word{
	word-break: break-all;
}
.ovl-x-auto{
	overflow-x: auto !important;
}

.no-box-shadow{
	&, &:hover, &:active, &:focus{
		box-shadow: 0 0 0 !important;
	}
}

.lh-20 { line-height: 20px !important; }
.h-34{ height: 34px !important; }


// Margins & Paddings
@for $i from -6 through 12 {
	$margin: $i * 4;
	.ma-#{$margin}{ margin: $margin + px !important; }
	.mx-#{$margin}{ margin-left: $margin + px !important; margin-right: $margin + px !important; }
	.my-#{$margin}{ margin-top: $margin + px !important; margin-bottom: $margin + px !important; }
	.ml-#{$margin}{ margin-left: $margin + px !important; }
	.mr-#{$margin}{ margin-right: $margin + px !important; }
	.mt-#{$margin}{ margin-top: $margin + px !important; }
	.mb-#{$margin}{ margin-bottom: $margin + px !important; }

	$padding: $i * 4;
	.pa-#{$padding}{ padding: $padding + px !important; }
	.px-#{$padding}{ padding-left: $padding + px !important; padding-right: $padding + px !important; }
	.py-#{$padding}{ padding-top: $padding + px !important; padding-bottom: $padding + px !important; }
	.pt-#{$padding}{ padding-top: $padding + px !important; }
	.pb-#{$padding}{ padding-bottom: $padding + px !important; }
	.pl-#{$padding}{ padding-left: $padding + px !important; }
	.pr-#{$padding}{ padding-right: $padding + px !important; }
}

.mx-auto{
	margin-left: auto !important;
	margin-right: auto !important;
}
.my-auto{
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.pos-sta	{	position: static; }
.pos-rel	{	position: relative; }
.pos-ab	s{	position: absolute; }

@for $i from -12 through 12 {
	.top-#{$i}{ top: $i + px !important; }
	.bottom-#{$i}{ bottom: $i + px !important; }
	.right-#{$i}{ right: $i + px !important; }
	.left-#{$i}{ left: $i + px !important; }
}
.top-50pct{ top: 50% !important; }
.bottom-50pct{ bottom: 50% !important; }
.right-50pct{ right: 50% !important; }
.left-50pct{ left: 50% !important; }

// Fonts
@for $i from 1 through 9 {
	$font-weight: $i * 100;
	.fw-#{$font-weight}{ font-weight: $font-weight !important; }
}
@for $i from 8 through 28 {
	$font-size: $i;
	.fz-#{$font-size}{ font-size: $font-size + px !important; }
}

// Width
@for $i from 0 through 10 {
	$width: $i * 10;
	.w-#{$width}{ width: $width + '%' !important; }
}
.w-50{
	width: 50% !important;
}
.table-layout-fixed{
	table-layout: fixed;
}

// Border
.bda-0{ border: 0 !important; }
.bdt-0{ border-top: 0 !important; }
.bdb-0{ border-bottom: 0 !important; }
.bdl-0{ border-left: 0 !important; }
.bdr-0{ border-right: 0 !important; }
.bdrd-0{ border-radius: 0 !important;}
.bdtlrd-0 { border-top-left-radius: 0 !important; }
.bdtrrd-0 { border-top-right-radius: 0 !important; }
.bdblrd-0 { border-bottom-left-radius: 0 !important; }
.bdbrrd-0 { border-bottom-right-radius: 0 !important; }

.bdt-c-transparent { border-top-color: transparent !important; }
.bdb-c-transparent { border-bottom-color: transparent !important; }
.bdr-c-transparent { border-right-color: transparent !important; }
.bdl-c-transparent { border-left-color: transparent !important; }

.border-square{ border-radius: 0 !important; }
.border-rounded{ border-radius: 2px !important; }
.border-circle{ border-radius: 50% !important; }

.bdt-1{ border-top: $border !important; }
.bdb-1{ border-bottom: $border !important; }
.bdl-1{ border-left: $border !important; }
.bdr-1{ border-right: $border !important; }

.bdc-transparent{ border-color: transparent !important; }


// Colors

.color-white{ color: #fff; }
.bg-color-white{ background-color: #fff; }
.color-black{ color: #000; }
.bg-color-black{ background-color: #000; }

.color-facebook{ color: #3b5998 !important; }
.bg-color-facebook{ background-color: #3b5998 !important; }

select{
	cursor: pointer;
}
.cursor-pointer{
	cursor: pointer;
}

$list-object-fit: ( fill, contain, cover, none, scale-down );
@each $object-fit-value in $list-object-fit{
	.ojf-#{$object-fit-value}{	object-fit: $object-fit-value; }
}

// Button

.ht-btn{
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 0;
	height: 34px;
  padding: 6px 14px;
  line-height: 20px;
  font-size: 14px;
  text-align: center;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 2px;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  @include transition(all .2s ease-in-out);
  &:hover,
  &:active,
  &:focus{
  	text-decoration: none;
  }
  &:active{
  	@include box-shadow(inset 0 3px 5px rgba(0, 0, 0, 0.125));
  }
  &.ht-btn-xxs{
  	height: 22px;
  	padding: 2px 8px;
  	line-height: 16px;
  	font-size: 12px;
  }
  &.ht-btn-xs{
  	height: 26px;
  	padding: 4px 10px;
  	line-height: 16px;
  	font-size: 12px;
  }
  &.ht-btn-sm{
  	height: 30px;
  	padding: 5px 12px;
  	line-height: 18px;
  	font-size: 13px;
  }
  &.ht-btn-lg{
  	height: 38px;
  	padding: 8px 16px;
  	line-height: 20px;
  	font-size: 14px;
  }
  &.ht-btn-default{
  	color: $grey700;
  	background-color: $grey50;
  	border-color: #ccc;
  	&:hover{
  		background-color: $grey200;
  	}
  }
  &.ht-btn-blue{
  	color: #fff;
  	background-color: material-color('blue','500');
  	border-color: transparent;
  	&:hover{
  		background-color: material-color('blue','700');
  	}
  }
  &.ht-btn-grey{
  	color: material-color('grey','700');
  	background-color: material-color('grey','100');
  	border-color: transparent;
  	&:hover{
  		background-color: material-color('grey','200');
  	}
  }
  &.ht-btn-orange{
  	color: #fff;
  	background-color: material-color('orange','600');
  	border-color: transparent;
  	&:hover{
  		background-color: material-color('orange','800');
  	}
  }
  &.ht-btn-red{
  	color: #fff;
  	background-color: material-color('red','500');
  	border-color: transparent;
  	&:hover{
  		background-color: material-color('red','700');
  	}
  }
  &.ht-btn-green{
  	color: #fff;
  	background-color: material-color('green','500');
  	border-color: transparent;
  	&:hover{
  		background-color: material-color('green','700');
  	}
  }
  &.ht-btn-cyan{
  	color: #fff;
  	background-color: material-color('cyan','500');
  	border-color: transparent;
  	&:hover{
  		background-color: material-color('cyan','700');
  	}
  }
  &.ht-btn-brown{
  	color: #fff;
  	background-color: material-color('brown','400');
  	border-color: transparent;
  	&:hover{
  		background-color: material-color('brown','600');
  	}
  }
  &.ht-btn-link{
  	color: material-color('orange','500');
  	background-color: transparent;
  	border-color: transparent;
  }
  $facebook-color:	 	#3b5999;
	$googleplus-color: 	#dd4b39;
  &.ht-btn-facebook{
	  color: #fff;
	  background-color: $facebook-color;
	  border-color: transparent;
	  &:hover{
	  	color: #fff;
	  	background-color: darken($facebook-color,4%);
	  }
	  &:focus,&:active{
	  	color: #fff;
	  }
	}
	&.ht-btn-google{
	  color: #fff;
	  background-color:	$googleplus-color;
	  border-color: transparent;
	  &:hover{
	  	color: #fff;
	  	background-color: darken($googleplus-color,4%);
	  }
	  &:focus,&:active{
	  	color: #fff;
	  }
	}
	.ht-social-icon-in-btn{
	  display: inline-block;
	  margin-right: 16px;
	  padding-right: 16px;
	  vertical-align: top;
	  line-height: 20px;
	  border-right: 1px solid rgba(#fff,.12);
	}
	&.disabled{
		opacity: .6;
	}
}

.ht-dropdown{
	font-family: 'Open Sans';
	ul.dropdown-menu{
		min-width: 140px;
		padding: 4px 0 !important;
		border-radius: 2px;
		box-shadow: 0 3px 8px 0 rgba(#000,.16), 0 0 2px 0 rgba(#000,.12) !important;
		& > li{
			& > a{
				padding: 4px 16px 4px 12px;
				line-height: 17px;
				font-size: 13px;
				font-weight: 400;
				color: $grey700;
			}
			&.divider{
				margin: 4px 0;
			}
		}
	}
	.dropdown-header{
		padding: 5px 16px 5px 12px;
	}		
	.convo-tag-select{
		margin: 0;
		padding: 5px 16px 5px 12px;
		display: flex;
		align-items: center;
		// justify-content: space-between;
		cursor: pointer;
		@include transition(background-color .1s ease-in-out);
		.single-tag_content{
			display: block;
			margin: 0 12px 0 12px;
			padding: 2px 8px;
			line-height: 18px;
			font-size: 12px;
			font-weight: 600;
			border-radius: 2px;
			border: 1px solid transparent;
			white-space: nowrap;
		}
		.single-tag_select{
			// margin: 0 24px 0 0;
			margin: 0;
		}
		&:hover{
			background-color: $grey50;
		}
		&:active{
			background-color: $grey100;
		}
	}
}
.dropdown-menu{
	font-family: 'Open Sans', sans-serif;
}

.ht-loading-fullsize{
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 9999999;
	background-color: rgba(#fff,.6);
	background-image: url("../img/spinner.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 128px 128px;
}
.ht-loading-content{
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 100;
	background-color: rgba(#fff,.8);
	background-image: url("../img/spinner.svg");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 96px 96px;
}
.ht-loading-bar {
  height: 2px;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: transparent;
		
	&.active{
		background-color: $grey200;
		&:before{
		  display: block;
		  position: absolute;
		  content: "";
		  left: -200px;
		  width: 200px;
		  height: 4px;
		  background-color: material-color('blue','500');
		  animation: loading 2s linear infinite;
		}
	}
}
@keyframes loading {
  from {left: -200px; width: 20%;}
  50% {width: 30%;}
  70% {width: 70%;}
  80% { left: 50%;}
  95% {left: 120%;}
  to {left: 100%;}
}
.on-loading-content{
	position: relative;
	&:after{
		content: "";
		display: block;
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 100;
		background-color: rgba(#fff,.8);
		background-image: url("../img/spinner.svg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 96px 96px;
	}
}
.loading-content-text{
	display: none;
}
.on-loading-content_type02{
	position: relative;
	&:after{
		content: "";
		display: block;
		position: absolute;
		top: 0; left: 0; right: 0; bottom: 0;
		z-index: 100;
		background-color: rgba(#fff,.9);
		background-image: url("../img/spinner02.svg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 96px 96px;
	}
	.loading-content-text{
		display: block !important;
		position: absolute;
		top: 50%; left: 10%; right: 10%;
		text-align: center;
		margin-top: 56px;
		font-size: 16px;
		font-weight: 600;
		color: material-color('grey','700');
		z-index: 110;
	}
}

.ht-list-filter-dropdown{
	.dropdown-toggle{
		background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%;
	}
	.dropdown-menu{
		padding: 5px 0;
		border: 1px solid #eee !important;
		border-radius: 0;
		.single-option{
			display: flex;
			align-items: center;
			padding: 8px 12px;
			border-top: 1px solid #eee;
			.single-option_label{
				flex: 1 1 auto;
				min-width: 0;
				padding: 0 48px 0 0;
				line-height: 18px;
				font-size: 14px;
				a{
					display: block;
					white-space: nowrap;
					max-width: 200px;
					text-overflow: ellipsis;
					white-space: nowrap;
					color: $grey800;
					&:hover{
						text-decoration: none;
						color: material-color('blue','700');
					}
				}
			}
			.single-option_actions{
				flex: 0 0 auto;
				min-width: 0;
				text-align: right;
				white-space: nowrap;
				line-height: 16px;
				.single-action{
					display: inline-block;
					vertical-align: top;
					line-height: 16px;
					padding: 0 4px;
					font-size: 11px;
					font-weight: 600;
					color: material-color('blue','400');
					i{
						margin-right: 2px;
					}
					&:hover{
						text-decoration: none;
						color: material-color('blue','800');
					}
				}
			}
		}
	}
}








// --
// styled scroll
@mixin scrollbar($size, $primary, $secondary: lighten($primary, 40%), $border-radius: $size / 2) {
  &::-webkit-scrollbar {
    width:  $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $primary;
  }
  &::-webkit-scrollbar-track {
    background: $secondary;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: $border-radius;
  }
  &::-webkit-scrollbar-track {
    border-radius: $border-radius;
  }
}
.ht-styled-scroll{
	@include scrollbar(4px, rgba(#000, .16));
	&.ht-styled-scroll-lg{
		@include scrollbar(8px, rgba(#000, .16));
	}
}