@font-face {
	font-family: 'Glyphicons Halflings';
	src: url('[$fontsPath]glyphicons-halflings-regular.eot');
	src: url('[$fontsPath]glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('[$fontsPath]glyphicons-halflings-regular.woff2') format('woff2'), url('[$fontsPath]glyphicons-halflings-regular.woff') format('woff'), url('[$fontsPath]glyphicons-halflings-regular.ttf') format('truetype'), url('[$fontsPath]glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

.CategoryTitleBox .CategoryLink {color:[$itemColor|color];}
.CategoryTitleBox .CategoryLink:hover {color:[$itemHoverColor|color];}
.SearchResult .ArticleLink, .ArticleBox .ArticleLink, .SuggestionBox .ArticleLink {color:[$itemColor|color];}
.SearchResult .ArticleLink:hover, .ArticleBox .ArticleLink:hover, .SuggestionBox .ArticleLink:hover {color:[$itemHoverColor|color];}

#Header {background:[$headerBackgroundColor|color];}
.KBLogo {background-image:url('[$logourl]');}
.RightBox {border-color:[$rightBoxBorderColor|color];}
.KbLinkButton {color:[$mainButtonTextColor|color]; background-color: [$mainButtonBackgroundColor|color]; border-color:[$mainButtonBorderColor|color];}
.KbLinkButton:hover {color:[$mainButtonHoverTextColor|color]; background-color: [$mainButtonHoverBackgroundColor|color]; border-color:[$mainButtonHoverBorderColor|color];}
.ImLeButton .buttonBorderColor, .UploadImageButton {border-color:[$secondaryButtonBorderColor|color];}
.ImLeButton .buttonBgColor, .UploadImageButton {background-color:[$secondaryButtonBackgroundColor|color];}
.ImLeButton .buttonOverBorderColor, .UploadImageButton:hover {border-color:[$secondaryButtonHoverBorderColor|color];}
.ImLeButton .buttonOverBgColor, .UploadImageButton:hover {background-color:[$secondaryButtonHoverBackgroundColor|color];}
.ImLeButton .buttonText, .UploadImageButton .Text {color:[$secondaryButtonTextColor|color];}
.ImLeButton-over .buttonText, .UploadImageButton:hover .Text {color:[$secondaryButtonHoverTextColor|color];}

.MainButton .buttonBorderColor, .GreenButton .buttonBorderColor, .Send .buttonBorderColor, .ReplyButton .buttonBorderColor {border-color:[$mainButtonBorderColor|color];}
.MainButton .buttonBgColor, .GreenButton .buttonBgColor, .Send .buttonBgColor, .ReplyButton .buttonBgColor {background-color:[$mainButtonBackgroundColor|color];}
.MainButton .buttonOverBorderColor, .GreenButton .buttonOverBorderColor, .Send .buttonOverBorderColor, .ReplyButton .buttonOverBorderColor {border-color:[$mainButtonHoverBorderColor|color];}
.MainButton .buttonOverBgColor, .GreenButton .buttonOverBgColor, .Send .buttonOverBgColor, .ReplyButton .buttonOverBgColor {background-color:[$mainButtonHoverBackgroundColor|color];}
.MainButton .buttonText, .GreenButton .buttonText, .Send .buttonText, .ReplyButton .buttonText {color:[$mainButtonTextColor|color];}
.MainButton .buttonOverBgColor .buttonText, .GreenButton .buttonOverBgColor .buttonText, .Send .buttonOverBgColor .buttonText, .ReplyButton .buttonOverBgColor .buttonText {color:[$mainButtonHoverTextColor|color];}

.VoteMainButton .buttonBorderColor, .StartChatButton .buttonBorderColor, .RewardButton .buttonBorderColor, .PunishButton .buttonBorderColor {border-color:[$secondaryButtonBorderColor|color];}
.VoteMainButton .buttonBgColor, .StartChatButton .buttonBgColor, .RewardButton .buttonBgColor, .PunishButton .buttonBgColor {background-color:[$secondaryButtonBackgroundColor|color];}
.VoteMainButton .buttonOverBorderColor, .StartChatButton .buttonOverBorderColor, .RewardButton .buttonOverBorderColor, .PunishButton .buttonOverBorderColor {border-color:[$secondaryButtonHoverBorderColor|color];}
.VoteMainButton .buttonOverBgColor, .StartChatButton .buttonOverBgColor, .RewardButton .buttonOverBgColor, .PunishButton .buttonOverBgColor {background-color:[$secondaryButtonHoverBackgroundColor|color];}
.VoteMainButton .buttonText, .StartChatButton .buttonText, .RewardButton .buttonText, .PunishButton .buttonText {color:[$secondaryButtonTextColor|color];}
.VoteMainButton .buttonOverBgColor .buttonText, .StartChatButton .buttonOverBgColor .buttonText, .RewardButton .buttonOverBgColor .buttonText, .PunishButton .buttonOverBgColor .buttonText {color:[$secondaryButtonHoverTextColor|color];}
.RewardButton.ImLeButton-over, .PunishButton.ImLeButton-over {background-color:[$secondaryButtonHoverBackgroundColor|color]; border-color:[$secondaryButtonHoverBorderColor|color]; color:[$secondaryButtonHoverTextColor|color];}


.item-with-status:before {background:url("[$imgPath]status-o.svg") no-repeat center center;}
.item-status-A:before {background:url("[$imgPath]status-a.svg") no-repeat center center;}
.item-status-R:before {background:url("[$imgPath]status-r.svg") no-repeat center center;}
.item-status-N:before {background:url("[$imgPath]status-n.svg") no-repeat center center;}
.item-status-X:before {background:url("[$imgPath]status-x.svg") no-repeat center center;}


.btn-primary,
.GreenButton,
.ImLeButton.Send,
.nav>li>a:focus,
.nav>li>a:hover,
.nav-pills > li.active > a ,
.nav-pills > li.active > a:hover ,
.nav-pills > li.active > a:focus {background-color:[$mainButtonBackgroundColor|color]; border-color:[$mainButtonBorderColor|color]; color:[$mainButtonTextColor|color];}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.GreenButton:hover,
.GreenButton.ImLeButton-over,
.ImLeButton.Send:hover,
.ImLeButton-over.Send,
.MainButton.ImLeButton-over,
.GreenButton.ImLeButton-over,
.Send.ImLeButton-over,
.ReplyButton.ImLeButton-over,
.MainButton.ImLeButton:hover,
.GreenButton.ImLeButton:hover,
.Send.ImLeButton:hover,
.ReplyButton.ImLeButton:hover,
.btn-primary:active:hover,
.btn-primary.active:hover,
.open > .dropdown-toggle.btn-primary:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.open > .dropdown-toggle.btn-primary:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary.focus {
	color:[$mainButtonHoverTextColor|color];
	background-color:[$mainButtonHoverBackgroundColor|color];
	border-color:[$mainButtonHoverBorderColor|color];
	-webkit-box-shadow: 0 0 8px rgba([$mainButtonHoverBorderColor|color:true:0.6]);
	box-shadow: 0 0 8px rgba([$mainButtonHoverBorderColor|color:true:0.6]);
}
input:focus {border-color: [$mainButtonBorderColor|color];}
.jumbotron input:focus {border-color: [$mainButtonBorderColor|color];}
.more-link {color:[$moreLinkColor|color] !important;}
.more-link:hover {color:[$moreLinkHoverColor|color] !important;}
.jumbotron h1 {color:[$headerTitleColor|color];}
.jumbotron,
.jumbotron p,
.jumbotron .breadcrumbs a,
.jumbotron .g-FormField2-Description,
.jumbotron .FormfieldAsNewFormField .g-FormField2-Label,
.jumbotron .g-FormField2-Label,
.jumbotron .g-FormField2-Label.gwt-Label-mandatory {color:[$headerTextsColor|color];}
.TextBoxContainer-focus .TextBox,
.TextBox:focus,
textarea:focus,
.SwitchableEditor .gwt-TextArea:focus {
	border-color:[$mainButtonBorderColor|color];
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$mainButtonBorderColor|color:true:0.6]);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$mainButtonBorderColor|color:true:0.6]);
}
[literal]
input[type=text]:focus,
input[type=password]:focus {[/literal]
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$mainButtonBorderColor|color:true:0.6]);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$mainButtonBorderColor|color:true:0.6]);
}
[literal]
.jumbotron input[type=text]:focus,
.jumbotron input[type=password]:focus {[/literal]
	    outline: 0;
	    -webkit-box-shadow: 0 0 8px rgba([$mainButtonBorderColor|color:true:0.6]);
	    box-shadow: 0 0 8px rgba([$mainButtonBorderColor|color:true:0.6]);
}
.footer-links {
	background:[$footerBackgroundColor|color] url("[$imgPath]footer-noise.png") repeat center center;
	color:[$footerTextsColor|color];
}
[if $footerBackgroundColor|isdark eq true]
	html,
	.footer-container {background:[$footerBackgroundColor|color] url("[$imgPath]body-bg.png") repeat center center;}
[else]
	html,
	.footer-container {background:[$footerBackgroundColor|color] url("[$imgPath]body-bg-light.png") repeat center center; color:[$footerTextsColor|color];}
	.footer-container .AppBrandProductLabel,
	.footer-container .AppBrandProductName {color:#000 !important;}
	.footer-container .AppBrandProductWidget svg {fill:#000;}
	.footer-links {
  	border-top:1px solid rgba(0,0,0,0.04);
	}
[/if]
.footer-links h5 {color:[$footerTitlesColor|color];}
.footer-links ul {border-top:1px solid rgba([$footerTextsColor|color:true:0.15]);}
.footer-links li {border-bottom:1px solid rgba([$footerTextsColor|color:true:0.15]);}
.footer-links li a {color:[$footerTextsColor|color];}
.footer-links li a:hover {color:[$footerTextsHoverColor|color];}

[if $headerImage=="" && $imageLink==""]
  .page-image-divider {background-image: url("[$imgPath]bootstrap-bg-08.jpg");}
  .jumbotron {background-image: url("[$imgPath]bootstrap-bg-08.jpg");}
[/if]
[if $headerImage!=""]
  .page-image-divider {background-image: url("[$imgPath][$headerImage]");}
  .jumbotron {background-image: url("[$imgPath][$headerImage]");}
[/if]
[if $imageLink!=""]
  .page-image-divider {background-image: url("[$imageLink]");}
  .jumbotron {background-image: url("[$imageLink]");}
[/if]

[assign var="errorInputBorder" value="CC0000"]
.g-FormField2-Error .TextBoxContainer-focus .TextBox,
.g-FormField2-Error .TextBox:focus,
.g-FormField2-Error textarea:focus,
.g-FormField2-Error .SwitchableEditor .gwt-TextArea:focus {
	border-color:#cc0000;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$errorInputBorder|color:true:0.6]);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$errorInputBorder|color:true:0.6]);
}
[literal]
.g-FormField2-Error input[type=text]:focus,
.g-FormField2-Error input[type=password]:focus {[/literal]
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$errorInputBorder|color:true:0.6]);
	  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba([$errorInputBorder|color:true:0.6]);
}
[literal]
.jumbotron .g-FormField2-Error input[type=text]:focus,
.jumbotron .g-FormField2-Error input[type=password]:focus {[/literal]
	  outline: 0;
	  -webkit-box-shadow:0 0 8px rgba([$errorInputBorder|color:true:0.6]);
	  box-shadow:0 0 8px rgba([$errorInputBorder|color:true:0.6]);
}