// LAYOUTS


#siteContainer{
	position: relative;
}

#siteContent{
	position: relative;
}

// -----------
// Support Page
.support-page-header{
	padding: 24px 0 16px;
	text-align: center;
	@media (min-width: $screen-md-min){
		padding: 28px 0 24px;
	}
	.site-logo{
		margin: 0 0 16px;
		a{
			display: inline-block;
			vertical-align: top;
			height: 48px;
			width: 155px;
			&:hover{
				opacity: .8;
			}
			&:active{
				opacity: .6;
			}
		}
	}
	.page-descr{
		margin: 0 0;
		line-height: 24px;
		font-size: 18px;
		font-weight: 400;
		color: #fff;
	}
	.go-to-home-wrap{
		padding-top: 12px;
		@media (min-width: $screen-md-min){
			padding-top: 2px;
			text-align: right;
		}
		a{
			display: inline-block;
			vertical-align: top;
			padding: 2px 0;
			line-height: 20px;
			font-size: 14px;
			color: rgba(#fff,.9);
		}
	}
	.search-form{
		margin: 16px 0 0;
		@media (min-width: $screen-md-min){
			margin: 24px 0 0;
		}
		.form-group{
			position: relative;
		}
		.search-input{
			padding: 8px 68px 10px 12px;
			border-color: transparent;
		}
		.search-submit{
			display: block;
			position: absolute;
			top: 0; right: 0;
			border-color: transparent;
		}
	}
}
.ht-sidebar{
  display: block;
}
.heading-cat-sidebar{
	margin: 0 0 16px;
	padding: 14px 20px 12px;
	background-color: $color-secondary;
	@include transition(background-color .2s ease-in-out);
	cursor: pointer;
	.ht-icon{
		width: 20%;
		float: left;
		color: #fff;
		i{
			display: inline-block;
			vertical-align: top;
			line-height: 20px;
    	font-size: 16px;
  		&:before{
				content: "\f00d";
  		}
  	}
  }
  &.collapsed{
  	.ht-icon{
    	i{
    		&:before{
					content: "\f036";
    		}
    	}
    }
  }
	.ht-label{
		width: 80%;
		float: right;
		padding: 0 0 0 8px;
		line-height: 20px;
		font-size: 16px;
		font-weight: 400;
		color: #fff;
	}
	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
		.ht-icon{
			width: 12%;
		}
		.ht-label{
			width: 88%;
		}
	}
	@media (min-width: $screen-md-min){
		pointer-events: none;
	}
	&.navbar-toggle {
    position: relative;
    float: none;
    margin: 0 0 16px;
		padding: 14px 20px 12px;
    background-color: $color-secondary;
    border: 0;
    border-radius: 0;
		&:hover{
			background-color: $color-secondary-dark;
		}
		&:active{
			box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
		}
		&.collapse{

		}
	}
}
.support-cat-sidebar{
	margin: 0 0 12px;
	padding: 16px 20px;
	.ht-icon{
		width: 20%;
		float: left;
		padding: 0 8px 0 0;
		img{
			margin-top: 28px;
			display: block;
		}
	}
	.ht-detail{
		width: 80%;
		float: right;
		padding: 0 0 0 8px;
		line-height: 20px;
		font-size: 16px;
		font-weight: 400;
		.cat-title{
			margin: 0 0 8px;
			line-height: 18px;
			font-size: 14px;
			font-weight: 500;
			color: $color-secondary;
		}
		.cat-descr{
			margin: 0 0 0;
			font-size: 14px;
			color: $color-secondary-text;
		}
		.cat-meta{
			margin: 12px 0 0;
			font-size: 12px;
			font-weight: 500;
			color: $color-secondary-text;
			.single-meta{
				margin: 0 0 2px;
			}
		}
	}
	@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max){
		.ht-icon{
			width: 12%;
		}
		.ht-detail{
			width: 88%;
		}
	}
	&:hover{
		background-color: material-color('grey','50');
	}
	&:active{
		background-color: material-color('grey','100');
	}
}
.support-subcat-list{
	margin-bottom: 16px;
	.single-subcat{
		display: block;
		padding: 16px 20px 16px 20px;
		color: $color-primary-text;
		border-bottom: $border;
		border-left: 2px solid transparent;
		&:last-child{
			border-bottom: 0;
		}
		@media (min-width: $screen-sm-min){
			padding: 24px 28px 24px 28px;
		}
		.sc-title{
			margin: 0 0 12px;
			line-height: 22px;
			font-size: 18px;
			font-weight: 400;
			color: $color-secondary;
			@media (min-width: $screen-sm-min){
				line-height: 28px;
				font-size: 24px;
			}
		}
		.sc-subtitle{
			margin: 0 0 8px;
			font-size: 14px;
			font-weight: 400;
			@media (min-width: $screen-sm-min){
				font-size: 16px;
			}
		}
		.sc-meta{
			margin: 12px 0 0;
			color: $color-secondary-text;
		}
		&:hover{
			background-color: material-color('grey','50');
			border-left-color:  material-color('blue','300');
		}
	}
}


// -----------
// Feedback Page
.user-feedback-form{
	margin: 24px 0;
	padding: 24px 24px;
	.form-group{
		// position: relative;
		// padding-left: 72px;
		// label.on-left{
		// 	display: block;
		// 	position: absolute;
		// 	top: 11px; left: 0;
		// 	padding: 0 12px 0 0;
		// 	line-height: 18px;
		// 	font-size: 14px;
		// 	font-weight: 500;
		// 	width: 72px;
		// 	text-align: right;
		// }
		.form-input-wrap{
			padding: 4px 0;
			input.file-input-hidden{
				width: 0.1px;
				height: 0.1px;
				opacity: 0;
				overflow: hidden;
				position: absolute;
				z-index: -1;
				&:focus + label{
					outline: 5px auto -webkit-focus-ring-color;
	    		outline-offset: -2px;
				}
			}
		}
		.preview-upload{
			margin: 12px -4px 0;
			.single-item{
				position: relative;
				padding: 0 4px;
				float: left;
				width: 50%;
				.item-action{
					position: absolute;
					top: 4px; right: 4px;
					.single-action{
						height: 24px;
				    padding: 2px 8px;
				    line-height: 18px;
				    font-size: 12px;
						border-color: transparent;
					}
				}
				@media (min-width: $screen-sm-min){
					width: 33.3333%;
				}
				@media (min-width: $screen-md-min){
					width: 20%;
				}
			}
		}
	}
}
.feedback-card{
	margin: 0;
	border-bottom: $border;
	&:last-child{
		border-bottom: 0;
	}
	.sfb-user-info{
		position: relative;
		min-height: 48px;
		padding: 0 0 0 48px;
		.user-avatar{
			position: absolute;
			top: 0; left: 0;
			width: 48px;
			height: 48px;
			border-radius: 50%;
			background-color: material-color('grey','200');
		}
		.user-info{
			padding: 2px 0 0 12px;
		}
		.user-name{
			margin: 0 0 6px;
			line-height: 20px;
			font-size: 16px;
			font-weight: 500;
			a{
				color: $color-primary-text;
				&:hover{
					color: $color-secondary;
				}
			}
		}
		.post-meta{
			margin-top: 6px;
			color: $color-secondary-text;
			span{
				&,&:after{
					font-size: 12px;
				}
			}
		}
	}
	
	.sfb-comment-content{
		padding: 0;
		@media (min-width: $screen-sm-min){
			padding: 0 0 0 60px;
		}
	}
	.post-title{
		margin: 16px 0 8px;
		line-height: 22px;
		font-size: 18px;
		font-weight: 500;
		color: $color-primary-text;
	}
	.post-content{
		margin-top: 8px;
		p{
			margin-bottom: 6px;
		}
	}
	.post-attachment{
		margin: 16px 0;
		a{
			position: relative;
			display: block;
			img{
				display: block;
			}
			.ht-inner{
				background-color: material-color('grey','400');
			}
			&:hover{
				opacity: .85;
			}
			.more-items{
				display: block;
				position: absolute;
				top: 0; left: 0; right: 0; bottom: 0;
				background-color: rgba(#000,.5);
				.ht-text{
					position: absolute;
					top: 50%; left: 0; right: 0;
					margin-top: -15px;
					line-height: 30px;
					font-size: 24px;
					color: #fff;
					text-align: center;
				}
			}
		}
		&.has-multi-items{
			margin-left: -1px;
			margin-right: -1px;
			.single-item{
				float: left;
				padding: 1px;
			}
			&.has-02-items{
				.single-item{
					width: 50%;
				}
			}
			&.has-03-items{
				.single-item{
					width: 33.3333%;
					&:first-child{
						width: 66.6666%;
					}
				}

			}
			&.has-04-items{
				.single-item{
					width: 33.3333%;
					&:first-child{
						width: 100%;
					}
				}
			}
			&.has-05-items{
				.single-item{
					width: 33.3333%;
					&:first-child,
					&:nth-child(2){
						width: 50%;
					}
				}
			}
			&.has-06-items{
				.single-item{
					width: 33.3333%;
				}
			}
			&.has-07-items{
				.single-item{
					width: 25%;
					&:first-child,
					&:nth-child(2),
					&:nth-child(3){
						width: 33.3333%;
					}
				}
			}
		}
	}
	.post-action{
		background-color: material-color('grey','50');
		.single-action{
			display: block;
			float: left;
			padding: 11px 16px 9px;
			line-height: 20px;
			font-size: 14px;
			font-weight: 500;
			color: $color-secondary-text;
			i{
				display: inline-block;
				vertical-align: top;
				line-height: 20px;
				margin: 0 6px 0 0;
				color: $color-inactive-icon;
			}
			&:hover{
				background-color: material-color('grey','100');
			}
			&.active{
				&,i{
					color: $color-primary;
				}
			}
		}	
	}
	.post-comment{
		margin: 16px 0 0;
		.comment-user-avatar{
			display: block;
			position: absolute;
			top: 0; left: 0;
			width: 36px; height: 36px;
			background-color: material-color('grey','400');	
			border-radius: 2px;
		}
		.post-comment-form{
			position: relative;
			margin: 0 0 16px;
			padding: 0 0 0 44px;
			.form-group{
				margin: 0;
			}
			.form-control{
				padding: 9px 12px;
			}
		}
		.post-comment-wrap{

		}
		.single-comment{
			position: relative;
			margin: 0 0 10px;
			padding: 0 0 0 44px;
			min-height: 36px;
			.comment-detail{
				.c-content{
					line-height: 18px;
					.c-user-name{
						font-size: 14px;
						margin: 0 4px 0 0;
						display: inline;
						color: $color-primary-text;
						a{
							color: $color-primary-text;
							&:hover{
								text-decoration: underline;
							}
						}
					}
					.c-content{
						font-size: 14px;
						margin: 0;
						display: inline;
					}
				}
				.c-meta{
					margin-top: 4px;
					color: $color-secondary-text;
					span{
						&,&:after{
							font-size: 12px;
						}
					}
				}
			}
		}
	}
}



// -----------
// Landing Page
.isg-landing{
	.ht-single-section{
		.ht-s-title{
			margin: 0 0 16px;
			line-height: 42px;
			font-size: 36px;
			font-weight: 400;
			color: material-color('blue','500');
		}
		.ht-s-subtitle{
			line-height: 24px;
			font-size: 18px;
			font-weight: 400;
			color: #555;
		}
		.has-bdb{
			position: relative;
			padding-bottom: 28px;
			margin: 0 0 0;
			&:after{
				content: "";
				display: block;
				position: absolute;
				width: 80px; height: 2px;
				bottom: 0; left: 0;
				background-color: #ccc;
			}
			&.text-center{
				&:after{
					left: 50%;
					margin-left: -40px;
				}
			}
		}
	}
}
.isg-landing-jumbotron{
	background-color: #555;
	padding: 97px 0 0;
	.ht-inner{
		padding: 48px 0;
	}
	.j-title{
		position: relative;
		margin: 0 0 72px;
		padding: 0 0 48px;
		line-height: 1.5;
		font-size: 18px;
		font-weight: 400;
		color: #fff;
		&:after{
			content: "";
			display: block;
			position: absolute;
			width: 96px; height: 2px;
			bottom: 0; left: 50%;
			margin-left: -48px;
			background-color:  #fff;
		}
	}
	.j-subtitle{
		margin: 24px 0;
		color: #fff;
		.main-quote{
			position: relative;
			font-size: 16px;
			font-weight: 300;
			i.fa{
				display: inline-block;
				position: relative;
				top: -12px;
				font-size: 14px;
				color: $color-primary-lighter;
				&.fa-quote-left{
					left: -12px;
				}
				&.fa-quote-right{
					right: -12px;
				}
			}
		}
	}
	.j-action{
		margin: 48px 0 0;
		.try-now-btn{
			// padding: 16px 40px 16px;
			// line-height: 24px;
			// font-size: 18px;
			// border-radius: 29px;
		}
	}
}
.isg-landing-preview{
	position: relative;
	background-color: #fff;
	height: 480px;
	overflow: hidden;
	@media (min-width: $screen-lg-min){
		height: 560px;
	}
	.background-wrap{
		position: absolute;
		top: 0; left: 0; right: 0;
		.container-fluid{
			overflow: hidden;
		}
		div[class^="col"]{
			padding: 0 !important;
		}
		.image-bg{
			height: 480px;
			@media (min-width: $screen-lg-min){
				height: 560px;
			}
		}
		.triangle-bottom{
			position: absolute;
			bottom: 0; right: 0;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 0 120px 1920px;
			border-color: transparent transparent #ffffff transparent;
			@media (min-width: $screen-lg-min){
				border-width: 0 0 200px 1920px;
			}
		}
	}
	.content-wrap{
		padding: 72px 0;
		@media (min-width: $screen-lg-min){
			padding: 96px 0;
		}
		.ht-title{
			position: relative;
			padding-bottom: 28px;
			margin: 0 0 32px;
			line-height: 36px;
			font-size: 28px;
			font-weight: 400;
			color: #fff;
			&:after{
				content: "";
				display: block;
				position: absolute;
				width: 80px; height: 2px;
				bottom: 0; left: 0;
				background-color: #fff;
			}
		}
		.ht-subtitle{
			line-height: 30px;
			font-size: 24px;
			font-weight: 300;
			color: #fff;
		}
	}
	.img-mockup{
		position: absolute;
		width: 60%;
		top: 48px; left: 50%;
		img{
			width: 100%;
			display: block;
		}
	}
}
.ht-features-section{
	.s-header{
		margin-top: 48px;
	}
	.s-content{
		margin: 24px 0 56px;
		padding: 156px 0;
	}
	.isg-feature-wrap{
		position: relative;
		width: 480px;
		height: 480px;
		margin: 0 auto;
		overflow: visible;
		// border: 1px solid #999;
		// border-left: 0;
		// border-right: 0;
		.lines-wrap{
			position: relative;
			width: 480px;
			height: 480px;
			border-radius: 480px;
			background-color: transparent;
			.single-line{
				display: block;
				position: absolute;
				top: 50%; left: 0;
				width: 480px;
				height: 2px;
				margin-top: -1px;
				border-top: 2px dashed material-color('blue','800');
				&:nth-child(2){ @include rotate(18deg); }
				&:nth-child(3){ @include rotate(36deg); }
				&:nth-child(4){ @include rotate(54deg); }
				&:nth-child(5){ @include rotate(72deg);  width: 560px; left: -40px; }
				&:nth-child(6){ @include rotate(90deg); width: 560px; left: -40px;}
				&:nth-child(7){ @include rotate(108deg); width: 560px; left: -40px; }
				&:nth-child(8){ @include rotate(126deg); }
				&:nth-child(9){ @include rotate(144deg); }
				&:nth-child(10){ @include rotate(162deg); }
			}
		}
		.circle-center{
			position: absolute;
			top: 50%; left: 50%;
			margin-top: -160px; 
			margin-left: -160px;
			width: 320px;
			height: 320px;
			background-color: #fff;
			border-radius: 160px;
			padding: 56px;
			box-shadow: 0 1px 4px 1px rgba(#000,.1);
			.btn-wrap{
				position: relative;
				padding-top: 16px;
				margin: 24px 0 0;
				&:before{
					content: "";
					display: block;
					position: absolute;
					width: 48px; height: 2px;
					top: 0; left: 50%;
					margin-left: -24px;
					background-color: #ccc;
				}
				.btn{
					padding: 8px 28px 8px;
					line-height: 24px;
					font-size: 18px;
					color: #fff;
					background-color: material-color('blue','600');
					border-radius: 20px;
					&:hover{
						background-color: material-color('blue','700');
					}
					&:active{
						background-color: material-color('blue','800');
					}
				}
			}
		}
		.single-feature{
			position: absolute;
			margin-right: 0; margin-top: 0;
			a{
				display: block;
				position: relative;
				border-radius: 28px;
				background-color: #fff;
				box-shadow: 0 1px 3px 0 rgba(#000,.1);
				.text-wrap{
					position: relative;
					display: block;
					height: 56px;
					line-height: 24px;
					font-size: 18px;
					font-weight: 500;
					white-space: nowrap;
					color: #555; 
					border-radius: 28px;
					@include transition(padding .2s ease-in-out);
					&:after{
						content:"";
						display: block;
						position: absolute;
						width: 0; height: 2px;
						background-color: #ccc;
						@include transition(all .2s ease-in-out .1s);
					}
				}
				.icon-wrap{
					position: relative;
					display: block;
					position: absolute;
					width: 48px;
					height: 48px;
					padding: 10px;
					border-radius: 24px;
					overflow: hidden;
					.icon-bg{
						display: block;
						width: 28px; height: 28px;
						background-size: 28px;
					}
					&:after{
						content:"";
						display: block;
						position: absolute;
						width: 18px; height: 48px;
						background-color: rgba(#fff,.2);
						@include transition(all .4s ease-in-out .2s);
					}
				}
			}
			&.icon-left{
				a{
					padding: 0 56px 0 0;
					.text-wrap{
						padding: 16px 12px 16px 28px;
						&:after{
							width: 0;
							bottom: 12px; right: 12px;
						}
					}
					.icon-wrap{
						top: 4px; right: 4px;
						&:after{
							top: 0; left: -18px;
						}
					}
					&:hover{
						.text-wrap{
							padding: 12px 12px 20px 28px;
							&:after{
								width: 28%;
							}
						}
						.icon-wrap{
							&:after{
								left: 100%;
							}
						}
					}
				}
			}
			&.icon-right{
				a{
					padding: 0 0 0 56px;
					.text-wrap{
						padding: 16px 28px 16px 12px;
						&:after{
							width: 0;
							bottom: 12px; left: 12px;
						}
					}
					.icon-wrap{
						top: 4px; left: 4px;
						&:after{
							top: 0; right: -18px;
						}
					}
					&:hover{
						.text-wrap{
							padding: 12px 28px 20px 12px;
							&:after{
								width: 28%;
							}
						}
						.icon-wrap{
							&:after{
								right: 100%;
							}
						}
					}
				}
			}
			&.icon-top{
				a{
					padding: 0;
					width: 180px;
					.text-wrap{
						padding: 16px 12px 16px 12px;
						text-align: center;
						&:after{
							opacity: 0;
							width: 48px;
							bottom: 12px; left: 50%;
							margin-left: -24px;
						}
					}
					.icon-wrap{
						width: 56px;
						height: 56px;
						bottom: 100%; left: 50%; 
						margin-bottom: -8px;
						margin-left: -28px;
						border: 4px solid #fff;
						border-radius: 28px;
						box-shadow: 0 1px 3px 0 rgba(#000,.1);
						&:after{
							top: 0; left: -18px;
						}
					}
					&:hover{
						.text-wrap{
							padding: 12px 12px 20px 12px;
							&:after{
								opacity: 1;
							}
						}
						.icon-wrap{
							&:after{
								left: 100%;
							}
						}
					}
				}
			}
			&.icon-bottom{
				a{
					padding: 0;
					width: 180px;
					.text-wrap{
						padding: 16px 12px 16px 12px;
						text-align: center;
						&:after{
							opacity: 0;
							width: 48px;
							bottom: 12px; left: 50%;
							margin-left: -24px;
						}
					}
					.icon-wrap{
						width: 56px;
						height: 56px;
						top: 100%; left: 50%; 
						margin-top: -8px;
						margin-left: -28px;
						border: 4px solid #fff;
						border-radius: 28px;
						box-shadow: 0 1px 3px 0 rgba(#000,.1);
						&:after{
							top: 0; right: -18px;
						}
					}
					&:hover{
						.text-wrap{
							padding: 12px 12px 20px 12px;
							&:after{
								opacity: 1;
							}
						}
						.icon-wrap{
							&:after{
								right: 100%;
							}
						}
					}
				}
			}
			&.pos-left-1st{ top: 2px; right: 100%; margin-right: -104px; }
			&.pos-left-2nd{ top: 72px; right: 100%; margin-right: -64px; }
			&.pos-left-3rd{ top: 142px; right: 100%; margin-right: -46px; }
			&.pos-left-4th{ top: 212px; right: 100%; margin-right: -40px; }
			&.pos-left-5th{ bottom: 142px; right: 100%; margin-right: -46px; }
			&.pos-left-6th{ bottom: 72px; right: 100%; margin-right: -64px; }
			&.pos-left-7th{ bottom: 2px; right: 100%; margin-right: -104px; }
			&.pos-right-1st{ top: 2px; left: 100%; margin-left: -104px; }
			&.pos-right-2nd{ top: 72px; left: 100%; margin-left: -64px; }
			&.pos-right-3rd{ top: 142px; left: 100%; margin-left: -46px; }
			&.pos-right-4th{ top: 212px; left: 100%; margin-left: -40px; }
			&.pos-right-5th{ bottom: 142px; left: 100%; margin-left: -46px; }
			&.pos-right-6th{ bottom: 72px; left: 100%; margin-left: -64px; }
			&.pos-right-7th{ bottom: 2px; left: 100%; margin-left: -104px; }
			
			&.pos-top-left{ top: -70px; right: 100%; margin-right: -156px; }
			&.pos-top-right{ top: -70px; left: 100%; margin-left: -156px; }
			&.pos-top-center{ bottom: 100%; left: 50%; margin-bottom: 85px; margin-left: -90px; }

			&.pos-bottom-left{ bottom: -70px; right: 100%; margin-right: -156px; }
			&.pos-bottom-right{ bottom: -70px; left: 100%; margin-left: -156px; }
			&.pos-bottom-center{ top: 100%; left: 50%; margin-top: 85px; margin-left: -90px; }
		}
		.ellipse01{
			display: none;
			position: absolute;
			top: 50%; left: 50%;
			margin-top: -280px; margin-left: -200px;
			width: 400px;
			height: 560px;
			border: 1px solid rgba(#000,.1);
			border-radius: 200px / 280px;
		}
	}
}
.ht-video-section{
	.enable-modal-video-btn{
		display: block;
		padding: 144px 0;
		background-color: material-color('grey','500');
		span{
			display: block;
		}
		.ht-icon{
			color: #fff;
			display: block;
			i{
				display: inline-block;
				line-height: 96px;
				font-size: 96px;
			}
		}
		.ht-guide{
			margin-top: 16px;
			line-height: 24px;
			font-size: 18px;
			color: #fff;
		}
		&:hover{
			opacity: .9;
		}
	}
}
.ht-register-section{
	padding: 48px 0;
	background-color: #fff;
	.center-box{
		padding: 24px;
		.ht-s-subtitle{
			margin: 0 0 8px;
			font-size: 18px;
		}
		.ht-s-title{
			margin-top: 8px;
			line-height: 36px;
			font-size: 28px;
			font-weight: 400;
			color: $color-primary;
		}
		.has-bdb{
			padding-bottom: 20px;
		}
		.s-action{
			margin-top: 24px;
			// .btn{
			// 	padding: 12px 40px 12px;
			// 	line-height: 24px;
			// 	font-size: 18px;
			// 	border-radius: 24px;
			// }
		}
	}
}