/*************************************************************************************
Site Section   :  Header
Description    :  Styles for the header of the main home page/support sections. (Separate from community section)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    	13/04/2015      	Original Version            			N/A
2.		 Ben Griffith			03/05/2015			Updated Styles for Responsiveness		N/A
3.		Ankita Bhardwaj			02/24/2020			Updated styles for DSC brand alignment

***************************************************************************************/

#header {
	background :#FFFFFF; /*EASUP-150 */
	color: #000000;/*EASUP-150 */	
	font-size: 13px;
	height: 68px;
}

#header div.header-content {
	padding-top: 18px;
	padding-bottom: 15px;
}

#header #status-container {
	float: right;
	margin-right: 40px;
	line-height: 32px;
}

#header #status-container #status-icon {
	background: url("images/green-check.png");
	background-repeat: no-repeat;
	background-size: 100%;
	display: block;
	float: left;
	margin-right: 5px;
	margin-top: 6px;
	height: 20px;
	width: 21px;
}

#header #login-container {
	float: right;
	line-height: 16px;
	margin-top: -15px;
}

#header #login-container a {
	color: white !important;
}

#header #login-container .dropdown-menu a {
	color: black !important;
}

@media (max-width: 767px)  {
	#header #status-container {
		display: none;
	}
}

/*System status used in header - style grabbed from trust.docusign.com*/
.trust-site-container {
	margin-top: -2px;
	width: 190px;
	margin-left: 60px;
	position: absolute;
}

.trust-site-outer {
	width: 250px;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width:422px) {
.header-content .logo{
  width: 80px;
  height: 24px;
 }

 #header-logo-link a{
   padding-top: 5px;
 }

}

.trust-site-container a,
.trust-site-container a:hover,
.trust-site-container a:visited,
.trust-site-container a:link,
.trust-site-container a:active {
	color: white !important;
}

.system-status:hover {
	text-decoration: none;
}

.system-status-underline:hover {
	text-decoration:underline;
}

/*************************************************************************************
Site Section   :  Login Page
Description    :  Styles for all elements specific to the login page
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    	10/05/2015      	Original Version            			N/A

***************************************************************************************/

.multiple-account-alert {
	color: #C01E25;
	text-align: left;
}

.login-top-info {
	text-align: left;
}

.login-page-section {
	margin: 0px auto 10px auto;
	padding: 45px 75px 0px 75px;
	width: 60%;
	background-color: #FFFFFF;
}

@media (max-width: 768px)  {
	.login-page-section {
		width: 90%;
		padding-left: 15px;
		padding-right: 15px;
	}

}

@media (min-width: 769px) and (max-width: 991px)  {
	.login-page-section {
		width: 75%;
		padding-left: 15px;
		padding-right: 15px;
	}


}

@media (min-width: 992px) and (max-width: 1201px)  {
	.login-page-section {
		width: 60%;
		padding-left: 45px;
		padding-right: 45px;
	}
}

.login-page {
	background-color: #FAFAFA;
}

.login-form {
	background-color: #FFFFFF;
	border: none;
}

.login-form input{
	width: 100%;
	height: 35px;
	border: 1px solid #C3C3C2;
	border-radius: 4px;
}

.login-page-container {
	width: 100%;
}

.login-content {
	font-size: 16px;
	text-align: left;
	margin-bottom: 30px;
	clear: left;
}

.login-messages {
	color: #ea0000;
}

.login-messages ul {
	padding: 0;
	list-style-type: none;
}

.loginButton {
	margin-bottom: 45px;
}


/*************************************************************************************
Site Section   :  Breadcrumb
Description    :  Styles for all elements in the breadcrumb section of the site, directly underneath the header
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Ben Griffith			13/05/2015			Original Version 						N/A

***************************************************************************************/

.community-breadcrumb {
	padding-top: 5px;
}

.breadcrumb {	
	font-size: 14px;
	color: #333333;
	padding-top: 6px;
	padding-bottom: 6px;
	margin-bottom: 0px;
	background: #000000; /*SUC-85*/
	border-bottom: 1px solid #ADB4BE;
}
.breadcrumb a:visited {  /*SUC-85*/
    color: #ffffff;
}
.breadcrumb p {
	line-height: 27px;
	margin-bottom: 0px;
	color: #ffffff;  /*SUC-85*/
    font-weight: bold; /*SUC-85*/
}

.breadcrumb a {
	/*color: #4a78ba;*/  /*SUC-85*/
	font-weight: 100;

}

.breadcrumb .search-container {
	padding-right: 81px;
}

.breadcrumb #breadcrumb-search-input {	
	height: 27px;
	border: 1px solid #c1c1c0;
	border-radius: 2px;
	padding: 0 6px;
	margin-right: 3px;
	position: relative;
	z-index: 2;
}

.breadcrumb .button-yellow {
	position: absolute;
	height: 27px;
	width: 36px;
	background-size: 13px 13px;
}

.breadcrumb .disclosure-indicator {
	width: 27px;
	vertical-align: middle;
}

.breadcrumb-text a,
.breadcrumb-text a:visited,
.breadcrumb-text a:active,
.breadcrumb-text a:hover

{
color: #FFFFFF;

} 


/*************************************************************************************
Site Section   :  Banner
Description    :  Styles for all elements in the banner section of the site, directly underneath the header
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    	13/04/2015      	Original Version            			N/A
2.		 Ben Griffith			03/05/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/



.community-home-search-container {
	margin-top: 22px;
	margin-left: 10px;
}

.community-home-search-banner .container {
	background: #1b49a0;
	height: 90px;
	text-align: center;
}

@media (max-width: 767px) {
	.community-home-search-banner .container {
		height: 135px;
	}
}

.community-home-search-banner {
	background: #1b49a0 none repeat scroll 0 0;
	height: 90px;
}

.community-mobile-search-container {
	margin-top: 22px;
	margin-left: 10px;
	width: 100%;
}

.community-mobile-search-banner .container {
	background: #263C84;
	height: 90px;
	text-align: center;
}

.community-mobile-search-banner {
	background: #263C84 none repeat scroll 0 0;
	height: 90px;
}


#community-search-banner {
	background: url("images/banner.png");
	background-repeat: repeat;
	height: 130px;
	text-align: center;
}

#search-banner  {
	background-color: #000000;/* EASUP-150*/
	background-repeat: no-repeat;
	background-position: top center;
}

#search-banner  .container {
	height: 240px;
	text-align: center;
}

#search-banner .container h1 {	
	font-size: 39px;
	text-align: center;
	margin-top: 70px;
	margin-bottom: 40px;
	color: white;
}

/**********************************************************/
#search-banner .container h1.greeting-welcome-to {    
    font-size: 39px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #FFF;
}

#search-banner .container h1.greeting-Docusign-support{	
	margin-top: 0px;
	margin-bottom: 0px;
	font-weight: 800;
}

@media(max-width: 500px){
	#search-banner .container h1, #search-banner .container h1.greeting-welcome-to{
		font-size: 30px;
	}
}
/**********************************************************/

#search-banner .container .search-container {
	margin: 0 auto;
	width: 545px;
	padding-right: 80px;
	padding-left: 15px;
}

#community-search-banner .search-container {
	margin-top: 42px;
}

#community-search-banner #home-search-input {
	float: left;	
	height: 45px;
	width: 50%;
	margin: 0 auto;
	border: 1px solid #c1c1c0;
	border-radius: 3px;
	padding: 0 12px;
	margin-right: 5px;
	position: relative;
	z-index: 2;
}

.community-home-search-banner #home-search-input, .community-mobile-search-banner #home-search-input {
	float: left;	
	height: 45px;
	width: calc(100% - 75px);
	border: 1px solid #c1c1c0;
	border-radius: 3px;
	padding: 0 12px;
	margin-right: 5px;
	position: relative;
	z-index: 2;
}

@media (max-width: 768px)  {
	.community-home-search-banner #home-search-input {
		width: 74%;
	}

}

@media (min-width: 769px) and (max-width: 991px)  {
	.community-home-search-banner #home-search-input {
		width: 75%;
	}

}

@media (min-width: 992px) and (max-width: 1201px)  {
	.community-home-search-banner #home-search-input {
		width: 80%;
	}

}

#search-banner #home-search-input {
	float: left;	
	height: 45px;
	width: 480px;
	border: 1px solid #c1c1c0;
	border-radius: 3px;
	padding: 0 12px;
	margin-right: 5px;
	position: relative;
	z-index: 2;
}

@media (max-width: 767px)  {
	#search-banner .container .search-container, .community-home-search-banner .container .search-container, .case-search-container {
		width: 100%;
	}

	#search-banner #home-search-input {
		width: 100%;
	}
}

.ui-autocomplete  {	
	font-size: 14px;
	color: #333333;
	padding: 8px 0px 8px 0px;
	z-index: 9999;
	border: 1px solid #c1c1c0;
	border-radius: 3px;
}

.ui-autocomplete .category-icon {
	width: 26px;
	height: 20px;
	float: left;
	background-repeat: no-repeat;
	background-position: center;
	margin-right: 5px;
}

.ui-autocomplete .category-icon.Articles {
	background-image: url("images/article-icon.png");
	background-size: 15px 20px;
}

.ui-autocomplete .category-icon.Guides {
	background-image: url("images/guides-icon.png");
	background-size: 20px 18px;
}

.ui-autocomplete .category-icon.Community {
	background-image: url("images/community-icon.png");
	background-size: 20px 18px;
}

.ui-autocomplete .category-icon.Videos {
	background-image: url("images/videos-icon.png");
	background-size: 19px 13px;
}

.ui-autocomplete .category-icon.Ideas {
	background-image: url("images/community-icon.png");
	background-size: 20px 18px;
}

.ui-autocomplete li.category-heading {	
	font-size: 16px;
	margin-left: 5px;
	margin-bottom: 5px;
	margin-top: 10px;
}

.ui-autocomplete li.ui-state-focus {
	background: #f5f5f5;
	border-color: #f5f5f5;
}

.ui-autocomplete li.ui-state-focus.category-heading {
	background: none;
	border-color: #ffffff;
	cursor: default;
}

.autocomplete-result{
	padding: 0px !important;
	margin: 0px !important;
}

.autocomplete-result a{
	margin: 0px !important;
	padding: 8px 0px 8px 16px;
  	color: #333333 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;	
	font-size: 16px;
}

.autocomplete-result.ui-state-focus{
	border: none !important;
}

.ui-autocomplete .search-spacer {
	height: 15px;
}

.ui-autocomplete .search-all {
	font-size: 13px;
	font-weight: bold;
}

#search-banner .button-yellow {
	position: absolute;
}

.button-yellow {
	float: left;	
	font-size: 13px;
	text-decoration: uppercase;
	padding: 5px 12px;
	color: #5F5131;
	border: 1px solid #ffc820;
	border-radius: 2px;
	height: 45px;
	width: 60px;
	background: url("images/icon-search-menu-mobile-white.svg") #0369FF;/*EASUP-150*/
	background-repeat: no-repeat;
	background-size: 21px 20px;
	background-position: center;
}

.button-yellow:hover, .yellow-button:hover {
	background-color: #0155C4;/*EASUP-150*/
	border-color: #0155C4;/*EASUP-150*/
	transition: all 0.1s ease;
}

.button-yellow:active, .yellow-button:active {
	background-color: #0155C4;/*EASUP-150*/
	border-color: #0155C4;
}

/*************************************************************************************
HomeSearch CSS
***************************************************************************************/
#search-banner.hs-component #home-search-input.hs-component, input.home-search.button-yellow.hs-component{
	height: 60px;
}

#search-banner.hs-component .container .search-container, #search-banner #home-search-input.hs-component{
	width: 100%;
}

div.search-bar-padding-div {
	padding: 30px 0px 0px;
}

.login-status-helper{
	float: left;
	display: table;
	height: 60px;
}
.login-status-parent > p{
	display: table-cell;
}
.single-line.login-status-parent > p{
	vertical-align:bottom;
}
.login-status-parent > p > a, .case-type-amount{
	display: inline;
	margin: 0px;
	vertical-align: inherit;
	line-height: 20px;
	font-size: 16px;
	color: white;
	width: 100%;
}
div.login-status-helper.login-status-parent{
	margin-top: 10px;
}
/*.login-status-helper*/.login-status-parent > p > a, .case-type-amount{
	text-transform: none;
	font-weight:bold;
}
div.status-image > img{
	height: 18px;
	width: 18px;
	display: inline-block;
	margin-right: 10px;
	vertical-align: text-bottom;
}
.second-row-padding{
	padding: 30px 0px 0px;
}
@media(max-width: 992px){
	.second-row-padding{
		padding: 15px 0px 0px;
	}
}
.case-type-amount{
	font-size: 22px;
	font-weight: bold;
}

#search-banner.hs-component .container{
	height:170px;
}

.dark-blue-search-bg{
	background-color: #1B49A0;
	height: 120px;
	padding-bottom: 30px;
}

@media(max-width:992px){
	.dark-blue-search-bg.has-cases{
		height:220px;
	}
	.dark-blue-search-bg.has-no-cases{
		height:180px;
	}
}

p.no-cases{
	font-size: 16px;
	height: 60px;
	max-width: 350px;
	padding: 0px 15px;
	color: white;
}
.home-search-bar.hs-component{
	font-size: 18px
}
a.log-in-link{
	font-weight: bold;
	color: white;
	text-decoration: underline;
}

div.case-header-parent .disclosure-indicator{
	vertical-align: bottom;
	height:15px;
}

div.case-header-parent{
	padding-top: 15px;
}

div.case-header{
	padding: 0px 0px 5px;
	color: white;
	font-weight: bold;
	border-bottom: 2px solid #7381AF;
	height: 25px;
	width: 100%;
	text-align: left;
	text-transform: uppercase;
}

.width38{
	margin-top: 10px;
	width:38%;
}

.width27{
	margin-top: 10px;
	width:27%;
}

.width35{
	margin-top: 10px;
	width:35%;
}

div.my-cases-heading{
	height:40px;
	vertical-align: middle;
}
div.my-cases-heading > div.status-image{
	display: table-cell;
	height:40px;
	vertical-align: middle;
}
div.my-cases-heading-style{
	display:table-cell;
	text-align: left;
	vertical-align: middle;
}
div.my-cases-table-row{
	display:table-row
}
div.my-cases-table-row > div{
	display:table-cell;
	text-align: left;
}
p.zero-margin{
	margin: 0px;
}
div.my-cases-open-text{
	max-width: 100px;
	margin: auto;
}
div.my-cases-resolved-text{
	max-width: 130px;
	float: right;
}


/*************************************************************************************
Site Section   :  Home page
Description    :  Styles specific to home paged (CSP_Home.page) logged in and out
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			05/04/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

#support-new-activity-alert {
	position: absolute;
	z-index: 99;
	left: 5%;
	right: 5%;
	width: 90%;
	margin-top: 20px;
	background-color: #6BA342;
	color: white;	
	font-size: 16px;
}

#community-overview {
	margin-bottom: 45px;
}

#support-new-activity-alert a {
	color: white !important;
	text-decoration: underline;
}

.left-section {
	padding-top: 37px;
}

.left-section h2 {
	padding-bottom: 37px;
}


.tile {
	text-align: center;
	padding: 10px 0;
	margin-bottom: 30px;
	border: 2px solid white;
}

.tile:hover, .prod-tile:hover {
	border: 2px solid #D8D8D7;
	color: black;
	transition: all 0.1s ease;
}

.tile-icon {
	text-align: center;
}

.tile-icon img {
	height: 50px;
	width: 50px;
	margin: 5px 0;
}

@media (max-width: 768px) {
	.tile-icon img {
		margin-top: 12.5px;
		margin-bottom: 12.5px;
	}
}

.tile-title {
	text-align: center;
	padding-top: 5px;
	font-size: 15px;	
	font-weight: normal;
}

@media (max-width: 768px) {
	.tile-title {
		line-height: 39px;
	}
}

.tile a, .tile a:hover, .tile a:visited {
	color: black;
	text-decoration: none;
}

@media (max-width: 991px) {

	.tile-title {
		padding-top: 18px;
		text-align: left;
	}

	.tile-icon img {
		height: 30px;
		width: 30px;
		margin-top: 20px;
	}
}

@media (max-width: 767px)  {
	.left-section {
		padding-top: 27px;
	}

	.left-section h2 { padding-bottom: 17px; }

	.tile {
		padding: 0;
		border: 1px solid #D8D8D7;
		border-radius: 3px;
		margin-bottom: 5px;
	}

	.tile-icon img {
		height: 40px;
		width: 40px;
	}

}


.product-section {	
	font-size: 15px;
	background-color: white;
}

.product-section h2 {
	padding-bottom: 30px;
}

.product-section img {
	float: left;
	margin: 0 20px;
}

.product-section .product {
	padding-bottom: 20px;
}

.product-section .product-icon {
	height: 20px;
	width: 20px;
	display: block;
}

.product-section .product-icon-small {
	height: 36px;
	width: 36px;
	display: none;
}

.product-section .product-more {
	border-top: 1px solid #D9D9D8;	
	font-size: 12px;
	line-height: 24px;
	margin-bottom: 20px;
}

.product-section .product-more img {
	height: 14px;
	width: 14px;
	margin: 0 5px 0 0;
}

.product-section #home-products-collapsed {
	display: none;
}

.product-section .show-less {
	display: none;
}

.product-section .product-more .product-more-button {
	float: right;
	position: relative;
	left: -50%;
	text-align: left;
}

.product-section .product-more .product-more-button a {
	display: block;
	height: 24px;
	line-height: 14px;
	position: relative;
	top: -1px;
	left: 50%;
	padding: 5px;
	border-top: 1px solid #ffffff;
	border-left: 1px solid #D9D9D8;
	border-bottom: 1px solid #D9D9D8;
	border-right: 1px solid #D9D9D8;
	border-radius: 0 0 3px 3px;
}

.prod-tile {
	border: 2px solid white;	
	font-weight: normal;
	height: 55px;
}

.prod-tile a span, .prod-tile a{
	color: black;
}

.prod-tile-title {
	width: 100%;
}

@media (max-width: 767px)  {
	.product-section img {
		margin: 0 10px 0 0;
	}

	.product-section .product-icon {
		display: none;
	}

	.product-section .product-icon-small {
		display: block;
	}
}

#case-overview .page-select,
#community-overview .page-select {
	margin-left: 15px;
	margin-right: 15px;
}

.right-section {
	background-color: #F3F4F4;
	padding-top: 37px;	
	margin-bottom: 30px;
}

.right-section div {
	margin-bottom: 20px;
}

.right-section a:hover {
	color: #4A77BB;
	transition: all 0.1s ease;
}

.content {	
	padding-top: 27px;
	padding-left: 20px;
}

.content h2 {
	margin-bottom: 20px;
}

.content h3 {
	margin-bottom: 15px;
}

.content h3.with-icon {
	line-height: 22px;
}

.content h3.with-icon img {
	height: 22px;
}

.content ul , .content blockquote{
	margin: 0;
	padding: 0;
	list-style-type: none;
	border: none;
}

.content li {
	font-size: 16px;
	margin-bottom: 15px;
}

.content ul.community li {
	padding-left: 74px;
	line-height: 24px;
}

.content ul.community li img {
	height: 64px;
	width: 64px;
	position: absolute;
	margin-left: -74px;
	margin-top: 10px;
}

.content li p {
	font-size: 14px;
	margin-bottom: 10px;
}

.content li a.small {
	margin-top: -5px;
	font-size: 12px;
}

.content .search-container {
	padding-left: 0px;
	padding-right: 65px;
	margin-bottom: 30px;
}

.content #home-search-input {
	float: left;	
	height: 45px;
	border: 1px solid #c1c1c0;
	border-radius: 3px;
	padding: 0 12px;
	margin-right: 5px;
	position: relative;
	z-index: 2;
}

.content .button-yellow {
	position: absolute;
}

.destinations {
	margin-bottom: 40px;
}

.destination {	
	font-size: 15px;
	color: #666666;
	position: relative;
	margin-bottom: 15px;
	padding-bottom: 15px;
}

.destination .destination-icon {
	position: absolute;
	padding-top: 10px;
}

.destination .destination-icon + .destination-section {
	padding-left: 55px;
}

.destination .destination-section {
	padding-top: 10px;
}

.destination .destination-icon img {
	height: 40px;
	width: 40px;
}

.destination h1 {	
	font-size: 16px;
	color: #333333;
	text-transform: none;
}

.destination p {
	margin-bottom: 10px;
}

.destination a {
	font-size: 13px;
}

.vertical-bar {
	height: 110px;
	width: 0px;
	border-right: 1px solid #D8D8D7;
	position: absolute;
	top: 0;
	right: 0;
}


@media (max-width: 767px)  {
	.destination:not(:last-child) {
		border-bottom: 1px solid #D8D8D7;
	}
}

#home-logged-in-leftrail {
	padding-top: 25px;
	background: #F4F4F4;
}

div.home-tab {
	padding: 30px;
}

.home-tab-green-number {
	color: #82B84E;
	font-size: 28px;
}

.home-tab-details, .home-tab-details a {	
	font-size: 16px;
	color: black;
}

#home-dropdown-container {
	text-align: center;
}

.home-mobile-dropdown {
	text-transform: uppercase;
	color: 666766;
	font-size: 16px;	
	margin-top: 20px;
	margin-bottom: 20px;
}

#home-mobile-dropdown-trigger, #home-mobile-dropdown-trigger:hover {
	color: #4A78BC;
	display: block;
	text-decoration: none;
}

.home-panel-header {
	margin-bottom: 40px;
}


/*************************************************************************************
Site Section   :  Footer Section
Description    :  Styles for all elements in the site's footer (CSP_Footer.component)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Ben Griffith			03/05/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

#footer {
	background: #1b49a0;
	padding-top: 40px;
	padding-bottom: 40px;	
}

#footer ul {
	margin: 0 0 15px;
	padding: 0;
	list-style-type: none;
}

#footer li, .footerlabel {
	min-width: 140px;
}

h3.footerlabel {	
	font-size: 13px;
	text-transform: uppercase;
	text-align: left;
	color: #bdc4d9;
}

#footer a, #footer a:link, #footer a:visited  {	
	font-size: 15px;
	line-height: 28px;
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:active, #footer a:hover {
	text-decoration: underline;
}

.language-trigger {
	color: #FFFFFF;	
	margin-left: -10px;
}

.language-trigger:hover {
	text-decoration: underline;
}

#footer .language-option a {
	color: #000000;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.martini-icons {
	font-family: "martini-icons" !important;
}

/*************************************************************************************
Site Section   :  Knowledge pages
Description    :  Styles specific to articles and guides (CSP_Articles.page and CSP_Guides.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			20/04/2015			Updated Styles for Responsiveness		N/A
2.       Deana Falk	    	    01/11/2016      	Knowledge-Content article Styling       CSP-1194

[DocuSign Style Guide]: 
https://na2.salesforce.com/sfc/p/300000000bS4/a/40000000LPcq/TeA4Hzowh8eeLq8pLyjvB4ZAeVlxKy1LkL1tM09cb_U
Approved Typography: MAVEN PRO REGULAR


[Olive Style Guide]: 
    http://olive.docusignhq.com/styleguide
	https://docucdn-a.akamaihd.net/olive/16.34.0/css/olive.min.css
	Confluence: https://jira.corp.docusign.com/confu/display/BT/Olive


[Colors]: 
	Banner: #1b49a0
		
		
[Testing Tools]
	Browser Developer Tools: F12
	www.crossbrowsertesting.com (both for desktop and mobile testing)

[Test Article on Salesforce CSP]
	https://csp-docusigncommunity.cs15.force.com/articles/CSS-Style-Knowledge-Content


***************************************************************************************/

@media print {
  body * {
    visibility: hidden;
  }

  .to-print, .to-print * {
    visibility: visible;
  }

 }

.knowledge-content {
	padding-top: 20px;
	overflow: hidden;
}

#knowledge-view-main .rightrail {
	padding-top: 10px;
}

div.share {
	text-align: left;
	padding-bottom: 15px;
}

#share-text {
	line-height: 35px;	
	font-size: 13px;
	text-align: center;
	padding-left: 15px;
}

.share-icons {
	width: 25px;
	margin-left: 3px;
	margin-right: 3px;
	cursor: pointer;
}

.share *:hover {
	text-decoration: none;
}

.share-icons:focus {
	outline: none;
}

@media (max-width: 991px) {
	div.share {
		padding-left: 0px;
		margin-left: -15px;
	}
}


.knowledge-lower-header {
	padding-bottom: 10px;
	font-size: 18px;
}

#knowledge-vote-container {
	background: #FAFAFA;
	border-style: solid;
	border-color: #D8D8D7;
	border-width: 1px;
	border-radius: 1px;
	margin-bottom: 20px;
}

#knowledge-vote-inner {
	display: block;
	margin: 30px auto;
	width: 350px;
}

#vote-helpful-header {
	line-height: 75px;
}

#vote-down, #vote-up {
	width: 50px;
}

/*************************
Create more space after knowledge and before share icons
**************************/
div.share
{ text-align: left; padding-bottom: 15px; padding-top: 25px; }


/*************************************************************************************
Site Section   :  Community section (general)
Description    :  Styles used across various pages in the community section (includes community home page, ideas, forum, announcements)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			03/05/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/


.community-home-description {
	max-height: 100px;
	overflow: hidden;
}

.answer-detail-page {
	padding-right: 45px;
}

.answer-display-outer,
.idea-display-outer {
	padding-top: 20px;
}


#community-mobile-top-bar {
	background-color: #F1F2F2;
	padding: 15px;
	border-bottom: 1px solid #DCDBDB;
}

#community-mobile-top-bar .yellow-button {
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
}

#community-mobile-top-bar .location-text {	
	font-size: 20px;
	color: #666766;
	margin-top: 9px;
}


.community-mobile-header {
	color: #FFFFFF;	
	font-weight: 300;
	font-size: 18px;
	padding-top: 25px;
	padding-right: 15px;
	padding-left: 10px;
}

a.community-mobile-header, a.community-mobile-header:hover, a.community-mobile-header:active  {
	color: #FFFFFF !important;
	text-decoration: none;
	outline: none;
}

.community-top-tab {
	display: inline-block;
    text-align: center;
    width: 170px;
    padding-bottom: 30px;    
    font-size: 14px;
    color: #666666;
    /*text-transform: uppercase; */ /*EASUP-317 */
}

@media (min-width: 768px) and (max-width:991px) {
	.community-top-tab {
		width: 132px;
	}

}

.community-top-tab a {
	color: ##357eeb !important; /*EASUP-317 */
}

.community-top-tab a:hover,
.community-top-tab a:active,
.community-top-tab a:focus {
	outline: 0;
	text-decoration: none;
	transition: all 0.1s ease;
}

.community-top-tab-selected {
	border-bottom-style: solid;
	border-bottom-color: #333333; /*EASUP-317*/
	border-bottom-width: 3px;
	color: #333333 !important; /*EASUP-317*/
}

.community-top-tab-selected a {
	color: #333333 !important; /*EASUP-317*/
}

.case-status-color {
	color: #0369FF; /*EASUP-317*/
}

.community-creator-name {	
	font-size: 12px;
	font-weight: normal;
}

.community-title {	
	font-size: 20px;
	font-weight: medium;
	padding-top: 5px;
	padding-bottom: 10px;
	color: black;
}


.community-product {	
	font-size: 13px;
	font-weight: medium;
	padding-top: 5px;
	padding-bottom: 10px;
	color: #666767;
}

.community-title a {
	color: #4B78BC;
}


.community-body {	
	font-size: 14px;
	color: black;
}

.community-body img {
	max-width: 100%;
	height: auto;
}

.community-body p, .community-home-description p {
	margin-bottom: 0px;
}

.community-leftrail-header {
	padding-left: 10px;
}

h5.community-leftrail-header {
	padding-bottom: 0px !important;
}

.avatar.idea-avatar.col-xs-12 {
	padding-left: 15px;
	padding-right: 15px;
}

.avatar {
	padding-left: 10px;
	padding-right: 5px;
}

@media (min-width: 769px) {
	.avatar {
		width: 70px;
	}
}

.avatar.fixed-width-avatar {
	width: 70px !important;
}

.avatar img{
	width: 60px;
}

.small-avatar {
	padding-left: 10px;
	padding-right: 0px;
	margin-right: 15px;
	width: 28px;
}

.small-avatar img {
	width: 40px;
}

#community-vote-up img, #community-vote-down img, #community-vote-up input, #community-vote-down input {
	width: 60px;
	padding: 2px;
}

#answer-vote-up img, #answer-vote-down img, #answer-vote-up input, #answer-vote-down input {
	width: 40px;
	padding: 2px;
}

@media (min-width: 769px) {
	#community-vote-down, #community-vote-up {
		margin-left: 8px;
	}
}

@media (max-width: 768px) {

	.vote-fixed-width {
		width: 60px;
	}

	.vote-text-container {
		padding-top: 10px;
		padding-left: 35px;
	}

}

@media (min-width: 769px) {
	.vote-fixed-width {
		padding-left: 0px;
		text-align: center;
	}
}

.add-right-gutter {
	padding-right: 15px !important;
}

.no-right-gutter {
	padding-right: 0px !important;
}

.no-left-gutter {
	padding-left: 0px !important;
}

.add-left-margin {
	margin-left: 15px;
}

.vote-points-container {
	text-align: center;
}

.vote-text {	
	font-size: 13px;
	color: #666766;
}

.points-text {	
	font-size: 9px;
	color: black;
}

.community-date-comments, .best-answer-date-comments {	
	font-size: 14px;
	font-weight: normal;
	color: #666766;
}

.community-post-comment-mobile-container {
	text-align: center;
}

#answers-add-a-comment {
	float: right;
	margin-bottom: 5px;
}

#answers-add-a-comment-mobile {
	float: none;
	width: 90%;
	margin-top: 10px;
	margin-bottom: 10px;
}

.community-post-content-container {
	 display: table;
	 padding-left: 25px;
}

#answers-main-leftrail .filter-tile-container,
#ideas-main-leftrail .filter-tile-container,
#filter-modal-outer .filter-tile-container {
	font-size: 14px;
	padding-left: 10px;	
}

#answers-main-leftrail .filter-tile-container input,
#ideas-main-leftrail .filter-tile-container input,
#filter-modal-outer .filter-tile-container input {
	padding-top: 5px;
	padding-bottom: 5px;
}

#new-idea-button, #new-question-button {
	margin-top: 40px;
	margin-bottom: 30px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
}

#new-question-button .yellow-button, #new-idea-button .yellow-button {
	padding-top: 10px;
	padding-bottom: 10px;
}

#new-comment-container {
	display: none;
	margin-bottom: 30px;
}



/*************************************************************************************
Site Section   :  Profile/User page
Description    :  Styles for all elements on the user profile page (CSP_CommunityUsers.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			10/05/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

#profile-avatar img {
	width: 180px;
	height: 180px;
}

@media (max-width: 768px)  {
	#profile-avatar img{
		width: 140px;
		height: 140px;
	}

	#profile-avatar {
		width: 140px;
		margin-right: 15px;
	}
}

@media (min-width: 769px) and (max-width: 991px)  {
	#profile-avatar img{
		width: 105px;
		height: 105px;
	}
}

@media (min-width: 992px) and (max-width: 1201px)  {
	#profile-avatar img{
		width: 140px;
		height: 140px;
	}
}

.profile-leader img {
	width: 27px;
	margin-left: 40px;
}

.profile-leader span {
	font-size: 18px;	
}

#profile-stats-container .profile-stats-tile {
	margin-top: 45px;
}

#profile-rank {
	color:#3F68B1;
	background: #D8E5F5;
}

#profile-posts {
	color: #858686;
	background: #EAEAEA;
}

#profile-best-replies {
	color: #568C60;
	background: #E6F0DC;
}

@media (max-width: 991px) {
	#profile-stats-container {
		margin-top: -30px;
	}
}

@media (max-width: 768px) {
	#profile-stats-container {
		padding-right: 0px;
	}
}


.profile-stats-label {
	font-size: 14px;	
	color: #A4A3A3;
}

.profile-stats-number {	
	font-size: 26px;
	font-weight: medium;
	padding: 10px;
	max-width: 90px;
	text-align: center;
	margin-right: 5px;
	height: 45px;
	line-height: 26px;
}

.profile-med-text {	
	font-size: 16px;
}

.profile-small-text {	
	font-size: 14px;
}


.community-users-mobile-table {
	width: 100%;
}

.community-users-mobile-table th {
	background-color: #F1F2F2;
}

.community-users-mobile-table td {
	border-top: 1px solid #D8D8D7;
	border-bottom: 1px solid #D8D8D7;
	padding: 15px;	
	font-size: 16px;
	font-weight: medium;
}

.community-users-mobile-table .unwatch-column {
	padding: 0px;
	width: 30px;
}

.unwatch-column img {
	width: 9px;
}

.unwatch-column {
	width: 20px;
}



/*************************************************************************************
Site Section   :  Community header
Description    :  Styles for all elements on the community section's header (CSP_CommunityHeader.component)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			20/04/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/
#community-header-dropdown-hamburger ul,
#community-header-dropdown-hamburger li > a:hover,
#community-header-dropdown-hamburger li > a:focus {
	background: #003b71;
	color: white;
	transition: all 0.1s ease;
}

#community-header-dropdown-hamburger ul .divider {
	height: 2px;
	background-color: #4c7296;
}

#community-header-dropdown-hamburger ul li a {
	color: white;	
	font-size: 16px;
}

#community-header-dropdown-hamburger .dropdown-header {	
	font-size: 16px;
	color: #BFCDD9;
}

#community-header-dropdown-hamburger img {
	width: 40px;
	padding-right: 10px;
}

#community-header-dropdown-hamburger button {
	margin-left: 0px !important;
	margin-right: 0px !important;
	margin-top: 10px !important;
	padding-left: 0px !important;
	padding-right: 0px !important;
}


#community-header-dropdown ul,
#community-header-dropdown li > a:hover,
#community-header-dropdown li > a:focus {
	background: #F1F2F2;
	color: black;
	transition: all 0.1s ease;
}

#community-header-dropdown ul .divider {
	height: 2px;
	background-color: #F3F3F3;
}

#community-header-dropdown ul li a {
	color: black;	
	font-size: 16px;
}

#community-header-dropdown .dropdown-header {	
	font-size: 16px;
	color: black;
}

#community-header-dropdown .dropdown-menu {
	top: 100 !important;
}

#community-header-dropdown img {
	width: 40px;
	padding-right: 10px;
}

#community-header-dropdown .caret {
	margin-top: 13px;
}

.home-header-dropdown-trigger {
	margin-top: 3px !important;
}

.community-header-dropdown-trigger {
	margin-top: 9px !important;
}

.community-header-profile-button {
	width: 45px;
	margin-top: 10px;
	margin-right: 10px;
}

.community-header-welcome-text {
	color: white;
	margin-top: 22px;
}

.community-header-welcome-text a {
	color: white !important;
	opacity: 1.0 !important;
	text-decoration: underline;
}

.community-header-link {
	padding-top: 25px;
	padding-bottom: 23px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
}

.community-header-link a {
	color: #ffffff !important;
	opacity: 0.75;
}

.community-header-link-current {
	background: #0A245E;
}

.community-header-link-current a {
	color: #ffffff !important;
	opacity: 1.00;
}

#community-search-form-container {
	padding-left: 40px;
	padding-top: 75px;
}

.white-back-arrow {
	width: 15px;
	float: left;
	margin-left: 5px;
	margin-top: 5px;
}

.header-back-area {
	margin-top: 22px;
}

.header-back-link, .header-back-link:hover, .header-back-link:active {	
	font-size: 18px;
	font-weight: 300;
	color: white !important;
	margin-left: 10px;
	text-decoration: none;
	line-height: 24px;
}


/*************************************************************************************
Site Section   :  Community home page
Description    :  Styles for all elements on the community home page (CSP_CommunityHome.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			20/04/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

@media (max-width: 768px) {
	#community-home-top-container #home-dropdown-container {
		margin-top: 50px;
	}
}


#community-home-top-container .horizontal-bar-thick {
	margin-bottom: 0px;
}

.community-alert-container {
	background: #FBC211 none repeat scroll 0 0;
}

#community-alert-banner {
	background: #FBC211;
	width: 100%;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}

#community-alert-banner a,
#community-alert-banner a:hover,
#community-alert-banner a:link,
#community-alert-banner a:active,
#community-alert-banner a:focus,
#community-alert-banner a:visited {
	color: black;
	text-decoration: underline;
}

.slide {
	padding-left: 0px;
	padding-right: 0px;
}

.slide img {
	width: 100%;
}

.community-home-name {	
	font-size: 12px;
}

.community-home-title {	
	font-size: 20px;
	margin-bottom:;
}

.community-home-description {	
	font-size: 14px;
}

.community-home-description img {
	display: none;
}

#community-home-filter-container {
	margin-top: 60px;
	margin-bottom: 40px;
	border-bottom-style: solid;
	border-bottom-color: #eaeaea;
	border-bottom-width: 1px;
	height: 52px;
	padding-left: 24px;
	padding-right: 24px;

}

#community-home-filter-container:hover {
	text-decoration: none;
}

#community-home-button-area {
	background: #F1F2F2;
	text-align: center;
}

#community-home-button-area .row {
	padding: 40px;
}

#community-home-button-area .yellow-button {
	padding: 10px 15px 10px 15px;
}

#community-home-button-area.button-container {
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	margin-bottom: 30px;
}

.community-home-button-header {
	width: 80%;
	margin: auto auto 10px auto;
	padding-bottom: 10px;
	font-weight: bold;	
}

.community-home-section-link-container-outer {
	background-color: #FFFFFF;
}

.community-home-section-link-container {
	padding: 35px;
}

#community-home-section-link-image {
	float: left;
}

#community-home-leaders-container {
	margin-top: 50px;
	margin-bottom: 30px;
	font-size: 12px;
	text-align: center;
}

#community-home-leaders-container a {
	letter-spacing: -0.5px;
}

.leaders-icon {
	float: left;
	width: 35px;
}

#community-home-leaders-container .popover {
	width: 375px !important;
	max-width: none !important;
	padding-right: 40px;
	padding-left: 25px;
}

#community-home-leaders-container .popover h1 {
	font-size: 14px;
	margin-right: 5px;
}

.popover .leaders-icon {
	width: 50px;
	height: 50px;
	padding-right: 0px;
	padding-left: 5px;
	margin-right: 10px;
	margin-top: 7px;
	float: right;
}

.popover #leaders-icon-container {
	padding-right: 0px !important;
	padding-left: 0px !important;
}

.popover #leaders-text-container {
	padding-left: 0px !important;
}

.popover .profile-stats-tile {
	margin-top: 23px;
	text-align: center;
}

.popover .profile-stats-label {
	padding-left: 10px;
}

.leader-popover-avatar {
	width: 121px;
}

.leader-popover-avatar-container {
	padding-left: 0px !important;
}

.leader-popover-online-status {
	padding-left: 0px !important;
	margin-top: 2px;
	margin-left: 1px;
}

.leader-popover-online-status img {
	width: 15px;
}

.leader-popover-online-status-text {
	margin-top: 5px;
}

.community-home-section-icon {
	width: 35px;
}

.community-home-section-link-info {	
	font-size: 14px;
}

#community-home-leaders-container h1 {
	margin-top: 5px;
	margin-bottom: 25px;
}

@media (max-width: 768px) {
	#join-link {
		margin-bottom: 15px;
	}
}

#community-home-leaders-container a, #join-link {	
	font-size: 13px;
}


@media (max-width: 768px) {
	#community-home-leaders-container .leader-avatar {
		width: 45px;
		height: 45px;
	}
}

@media (min-width: 769px) {
	#community-home-leaders-container .leader-avatar {
		width: 60px;
		height: 60px;
	}
}


.community-home-questions {
	margin-bottom: 20px;
}

.community-home-questions img {
	width: 60px;
}

.community-home-questions .col-xs-3 {
	padding-left: 30px;
}

.community-home-date-like-follow {	
	font-size: 14px;
	color: #666766;
}

.community-home-stats {
	color: white;	
	font-size: 14px;
	margin-top: 20px;
	float: right;
	width: 33.3%;
}

.community-support-tile-container {
	border-style: solid;
	border-color: #D8D8D7;
	border-width: 1px;
	padding: 10px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 60px;
	text-align: center;	
	font-size: 18px;
	color: #4A77BB;
	background-color: #FAFAFA;
}

.community-support-image-container img{
	width: 45px;
	margin: auto;
}

.community-support-description-container {	
	font-size: 15px;
	color: #4A77BB;
}

/*************************************************************************************
Site Section   :  Forum home page
Description    :  Styles for all elements on the forum home page (CSP_AnswersHome.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			20/04/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/


#answers-main-panel .community-body,
#ideas-main-panel .community-body,
.best-answer-content .community-body {
	max-height: 300px;
	overflow: hidden;
}

#answers-main-panel .community-body img {
	display: none;
}

.best-answer-date-comments img {
	width: 25px;
}

.best-answer-date-comments #answers-home-vote-up input, .best-answer-date-comments #answers-home-vote-down input {
	width: 25px;
	vertical-align: middle;
}

.best-answer-content .community-body img {
	display: none;
}

#mobile-ask-question-button {
	margin-top: 5px;
}

.in-line-answer-button-container {
	margin-top: 20px;
}

.show-answers-container {
	border-style: solid;
	border-color: #D8D8D7;
	border-width: 1px;
	border-radius: 5px;
	padding: 5px;
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 15px;
}

.best-answer-container {
	border-style: solid;
	border-color: #D8D8D7;
	border-width: 1px;
	border-radius: 5px;
	margin-left: 15px;
	margin-top: 10px;
}

.best-answer-check  {
	width: 30px;
	float: left;
}

.best-answer-check img {
	width: 20px;
	height: 20px;
	margin-left: 4px;
}


.best-answer-header {
	border-bottom-style: solid;
	border-bottom-color: #D8D8D7;
	border-bottom-width: 1px;
	padding: 3px;
}

.best-answer-content {
	border-bottom-style: solid;
	border-bottom-color: #D8D8D7;
	border-bottom-width: 1px;
	padding: 10px;
}

.best-answer-footer {
	padding: 3px;	
	font-size: 13pt;
	font-weight: medium;
	color: #4B78BC;
}

.question-main-content-container {
	padding-left: 25px;
}



/*************************************************************************************
Site Section   :  Forum - question detail page
Description    :  Styles specific to question detail pages (CSP_Answers.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			22/04/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

#post-answer-button {
	margin-top: 15px;
	margin-bottom: 15px;
}

.best-answer-green-check  {
	height: 45px;
	width: 45px;
}

.best-answer-picker-text {	
	font-size: 12px;
}

.answer-display-right-icon {
	width: 45px;
	margin-right: 15px;
	margin-left: 15px;
	text-align: center;
}

.answer-display-right-icon input, .answer-display-right-icon img {
	margin-right: 0px;
	margin-left: 0px;
}

.community-bottom-tile {
	margin-bottom: 15px;
}


/*************************************************************************************
Site Section   :  Ideas/Announcements sections
Description    :  Styles specific to the ideas and announcements sections (includes CSP_Ideas.page, CSP_IdeasHome.page,
				  CSP_Announcements.page, and CSP_AnnouncementsHome.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			18/04/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

.ideas-date-comments {	
	font-size: 14px;
	font-weight: normal;
	color: #666766;
	padding-bottom: 10px;
}

.idea-status-text {
	color: #666766;	
	font-size: 13px;
	text-transform: uppercase;
}

.idea-avatar-vote-container {
	width: 80px;
	padding-left: 0px;
	padding-right: 0px;
}

#ideas-main-panel #community-vote-up,
#ideas-main-panel #community-vote-down,
.idea-display-outer #community-vote-up,
.idea-display-outer #community-vote-down {
	padding-left: 8px !important;
}

.announcement-display-outer > .community-post-content-container {
	padding-left: 0px;
}

.announcement-display-page {
	padding-left: 30px;
	padding-right: 30px;
}

.announcement-display-page #new-comment-container {
	margin-left: -15px;
}

.announcements-home-page {
	padding-left: 0px;
	padding-right: 30px;
}

/*************************************************************************************
Site Section   :  New idea/New question pages
Description    :  Styles for all elements on the new idea (CSP_IdeasNew.page) and new question (CSP_AnswersNew.page) pages.
				  (they are in many ways identical)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			20/04/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

#community-new-form .button-container {
	text-align: center;
	margin-top: 25px;
}

#community-new-form input, #community-new-form select {
	margin-bottom: 20px;
}

#community-new-form h3 {
	text-align: center;
	margin-bottom: 20px;
}

#community-new-form {
	background: #F4F4F4;
	margin-top: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	border-style: solid;
	border-color: #D8D8D7;
	border-width: 1px;
	border-radius: 5px;
}


/*************************************************************************************
Site Section   :  Cases/support section
Description    :  Styles specific to the case/support section (includes CSP_CaseOverview.component, CSP_Case.page, CSP_CreateCase.page, CSP_EditCase.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			04/29/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

.add-breaks {
	white-space: pre-wrap !important;
}

.close-case-textarea {
	width: 100%;
	height: 200px;
	margin-top: 10px;
}

#case-create-success-alert {
	position: absolute;
	z-index: 99;
	left: 5%;
	right: 5%;
	width: 90%;
	margin-top: 20px;
	background-color: #6BA342;
	color: white;	
	font-size: 16px;
}

#my-cases-table td, #mobile-cases-table td {	
}

#my-cases-table tr:hover, #mobile-cases-table tr:hover {
	background: #D7D7D7;
	transition: all 0.1s ease;
}

#mobile-case-table tr {
	border-bottom-width: 1px;
	border-bottom-color: #D8D8D7;
	border-bottom-style: solid;
	border-top-width: 1px;
	border-top-color: #D8D8D7;
	border-top-style: solid;
}

#mobile-case-table td {
	padding: 15px;
}

#mobile-case-table tr a, #my-cases-table tr a {
	color: black;
}

#mobile-case-table img, #my-cases-table img {
	width: 15px;
}

#add-case-button {
	padding: 15px, 25px, 25px, 25px;
}

#my-cases-table {
	width: 100%;
	margin-bottom: 30px;
}

#my-cases-table tr {
	border-width: 1px;
	border-color: #D8D8D7;
	border-style: solid;
}

body #my-cases-table .pagination a {
	color: #4B78BC;
}

#my-cases-table td, #my-cases-table th {
	padding: 7px;
}

#my-cases-header-row,
#my-cases-footer-row,
#my-cases-header-row :hover,
#my-cases-footer-row :hover{
	background: #F4F4F4 !important;
}

#my-cases-table tr td:nth-child(4) {
	text-align: right;
}

#my-cases-status-column {
	width: 6%;
}

#my-cases-subject-column {
	width: 63%;
}

#my-cases-updated-by-column {
	width: 17%;
}

#my-cases-date-updated-column {
	width: 14%;
	text-align: right;
}

#case-status-table {
	width: 100%;
}

table.case-status-table-details-mobile {
	width: 90% !important;
	margin-left: 20px !important;
}

table.case-status-table-details-mobile td {
	width: 50% !important;
}

table.case-status-table-status-mobile {
	width: 50% !important;
	margin-left: 20px !important;
	margin-bottom: 40px !important;
}

#spacer-column {
	width: 5%;
}

.case-status-text {
	margin-left: -2px;
	font-weight: bold;
	margin-bottom: 0px;
	display: block;
	float: left;
	width: calc(100% - 48px);
	padding-top: 10px;
}


.case-status-cell {
	border: 1px solid #d8d8d7;
	width: 19%;
	padding: 20px;
	text-align: center;
}

#case-detail-subject {
	margin-bottom: 35px;
	margin-top: 20px;
}

#case-detail-description {
	margin-top: 20px;
	margin-bottom: 35px;
}

.case-detail-header {	
	font-weight: bold;
	font-size: 16px;
}

.case-view-table, .case-comment-table {
	width: 100%;
	margin-bottom: 20px;	
	font-size: 14px;
}

.case-view-table td, .case-comment-table td {
	padding: 15px;
}

.case-view-table, .case-view-table td, .attachment-view-table, .case-comment-table, .case-comment-table td {
	border-width: 1px;
	border-color: #D8D8D7;
	border-style: solid;
}

.case-comment-table tr:nth-child(odd) {
	background-color: #F7F7F7;
}

.attachment-view-table {
	width: 100%;
	padding: 5px;
	margin-bottom: 45px;	
	font-size: 14px;
}

.attachment-row {
	border: 1px solid #C3C3C2;
	border-radius: 2.5px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-right: 20px;
	margin-left: 20px;
	padding: 15px;
}

.attachment-table-bottom-row {
	padding: 15px;
}

.attachment-table-bottom-row input {
	border: none;
}

.attachment-table-bottom-row .button-container {
	margin-top: 10px;
}

.remove-attachment-x {	
	font-size: 35px;
	color: #808285;
}

.remove-attachment-x:hover {
	text-decoration: none;
}

.attachment-view-table .yellow-button {
	float: left;
	margin-right: 15px;
}

.browse-for-attachment {
	padding-left: 0px !important;
	margin-top: 10px;
}

.case-comment-name-column {
	width: 30%;
}

#edit-case-button {
	margin-top: 35px;
}

@media (min-width: 769px) {
	#edit-case-button {
		text-align: right;
	}
}

@media (max-width: 768px) {
	#edit-case-button {
		text-align: center;
	}
}

#add-case-comment-button {
	margin-top: 15px;
}



/**************************************/
/*ADDED FOR CASE PAGE REWORK 12/9/2015*/
/**************************************/

.case-create-edit-page label {	
				font-size: 14px;
				margin-bottom: 0px;
			}

			.case-create-edit-page .greyed-text {
				font-size: 12px;
			}

			.case-create-edit-page .input-textarea-lg {
				height: 200px;
			}

.wrap-long-text {
	  /* These are technically the same, but use both */
	  overflow-wrap: break-word;
	  word-wrap: break-word;

	  -ms-word-break: break-all;
	  /* This is the dangerous one in WebKit, as it breaks things wherever */
	  word-break: break-all;
	  /* Instead use this non-standard one: */
	  word-break: break-word;

	  /* Adds a hyphen where the word breaks, if supported (No Blink) */
	  -ms-hyphens: auto;
	  -moz-hyphens: auto;
	  -webkit-hyphens: auto;
	  hyphens: auto;
}

.overflow-with-ellipsis {
	text-overflow: ellipsis !important;
	white-space: nowrap;
	overflow: hidden;
}

.case-left-rail-section {
	margin-bottom: 30px;
}

.case-left-rail-table td,
.case-left-rail-table th {
	padding: 5px;
	font-size: 14px;
}

.commenter-1 {
	background-color: #F7F7F7;
}

.commenter1 {
	background-color: #FDEFC1;
}

.commenter2 {
	background-color: #E0EEF6;
}

.commenter3 {
	background-color: #FBE4E0;
}

.commenter4 {
	background-color: #E4F1DB;
}

.commenter5 {
	background-color: #FCDBC5;
}

.commenter6 {
	background-color: #E2E9F4;
}

.commenter7 {
	background-color: #F5EEDB;
}

.commenter8 {
	background-color: #E7ECE3;
}

.commenter9 {
	background-color: #E1F2F3;
}

.commenter10 {
	background-color: #FFECCF;
}

.single-comment {
	border-color: #DCDDDD;
	border-width: 1px;
	border-radius: 1px;
	border-style: solid;
	margin-bottom: 20px;
}

.single-comment td {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	border-color: #DCDDDD;
	border-width: 1px;
	border-radius: 1px;
	border-style: solid;
}

.case-left-rail-icons {
	height: 15px;
	width: 15px;
	margin-top: 2px;
	margin-right: 3px;
}

.case-left-rail-icons-add {
	height: 10px;
	width: 10px;
	margin-top: 5px;
	margin-right: 3px;
}

.case-status-icon {
	width: 40px;
	margin-right: 10px;
	float: left;
	margin-bottom: 0px;
}

.cc-list-item {
	height: 36px !important;
	font-size: 12px !important;
	background-color: #F8F8F8 !important;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	padding-left: 3px !important;
	padding-right: 5px !important;
	border-width: 1px !important;
	border-style: solid !important;
	border-color: #D6D6D6 !important;
	border-radius: 2px !important;
	margin-bottom: 5px !important;
}

.cc-list-item div {
	width: calc(100% - 125px) !important;
	float: left !important;
	line-height: 28px !important;
	padding-left: 3px !important;
}

.cc-list-outer {
	overflow: auto;
	height: 250px;
	border-width: 1px;
	border-style: solid;
	border-color: #D6D6D6;
	border-radius: 2px;
	margin-bottom: 5px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
}

@media (max-width: 768px) {
	#watch-modal-window {
		width: calc(100% - 60px);
	}

	.cc-list-outer {
		height: 125px;
	}
}

@media (min-width: 769px) and (max-width: 990px) {
	#watch-modal-window {
		width: 600px;
	}
}

@media (min-width: 991px) and (max-width: 1200px) {
	#watch-modal-window {
		width: 600px;
	}
}

@media (min-width: 1201px) {
	#watch-modal-window {
		width: 600px;
	}
}

.watch-header {
	font-size: 13px;
	font-weight: bold;	
}

.watch-all-link {
	font-size: 12px;
}

.confirm-modal {
		max-width: 400px;
}

#confirm-modal-window {
	margin-top: 300px;
	margin-left: calc(50% - 200px);
}

.close-case-x {
	margin-right: -2px;
}

.close-case-modal {
		width: 100%;
}

#close-case-modal-window {
	margin-top: 300px;
	margin-left: calc(50% - 275px);
}

.email-header-table td  {
	padding: 5px;
}

@media (max-width: 768px) {
	.case-status-section {
		border-width: 1px;
		border-style: solid;
		border-color: #D6D6D6;
		border-radius: 2px;
		padding-top: 15px;
		padding-left: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
		min-height: 125px;
		margin-bottom: 30px;
	}

	#case-status-details-section {
		text-align: left;
	}

	.case-status-section-outer {
		margin: 0px !important;
	}

	.close-case-link {
		float: none !important;
		display: block;
		margin-left: 0px;
		margin-top: 30px;
		font-size: 14px;
	}

	.case-left-rail-container {
		padding-left: 15px !important;
		padding-right: 15px !important;
		margin
	}

	.case-left-rail-main {
		padding-left: 20px;
		padding-right: 0px !important;
		padding-top: 20px;
		background-color: white !important;
	}

	.case-status-section-outer {
		padding-right: 0px !important;
	}

	#case-mobile-status-outer {
		padding-right: 0px !important;
	}

}

@media (min-width: 769px) {
	.case-status-section-outer,
	.case-status-section {
		padding-left: 0px !important;
	}

	.case-left-rail-container {
		padding-left: 0px !important;
		padding-right: 0px !important;
		margin-left: 0px !important;
	}
}

.close-case-link {
	margin-top: 15px;
	margin-left: 4px;
	float: left;
}

.x-column {
	width: 10px;
}

.case-left-rail-main {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
	background-color: #F7F7F7;
}

@media(max-width: 768px){
.case-status-text {
		display: inline;
		padding-top: 5px;
		float: none;
	}
}
@media(max-width:400px){
	.case-status-icon-xxs{
		width:30px;
		margin-right: 0px;
	}
	#case-status-details-section{
		padding-left: 0px;
		padding-right:0px;
	}
}
@media(max-width: 991px){
	.case-status-text.case-status-pending-text {
		padding-top: 0px;
	}
}

@media(min-width: 769px){
	#case-status-icon-section > div{
		float: left;
		width: 100%;
	}
	#case-status-icon-section{
		padding-right: 0px;
	}
}

@media(max-width: 768px){
	.display-flex-xs{
		display: flex;
		width: 100%;
	}
	.case-info{
		padding-left: 0px;
		margin-bottom:0px;
		width: 100%;
	}
	#case-status-details-section{
		margin-bottom:0px;
		height:100%;
	}
	#case-status-icon-section.case-box{
		padding-right: 10px;
		width: 100%;
		margin-right: 20px;
		margin-bottom:0px;
		text-align: center;
		padding-right: 10px;
	}
	.case-status-icon{
		display:table-cell;
	}
	.case-status-icon-xxs{
		margin-right: 10px;
	}
	.display-table-row-xs{
		display:table-row;
	}
	.case-status-text{
		vertical-align: middle;
	}
	.close-case-link{
		text-align: center;
	}
}

.case-status-icon-section-table{
	display: table; 
	margin-left:auto;
	margin-right:auto;
	margin-top:10px;
}
#table-cell-span{
	display:table-cell; 
	text-align: left;
}

@media(max-width: 540px){
	.case-status-pending-text{
		width:90px;
	}
}

/*************************************************************************************\
Case Overview Page
\*************************************************************************************/

.bolded-text {
	font-weight: bold;
}

.case-overview-body {
	padding-right: 30px;
	padding-left: 0px;
}

#my-cases-header-row {
	font-size: 13px;
}



.CaseOverview_h1 {
	margin: 0px 15px 35px;
}



.CaseOverview_tabs {
	padding: 0px;
}



.CaseOverview_caret {
	top: 45%;
	position: absolute;
	right: 15px;
	color: ##666767;
}

.CaseOverview_dropdown:hover {
	text-decoration: none;
	color: #262626;
	background-color: #F5F5F5;
}

.case-top-tab {
	width: auto;
	padding: 0px 15px 15px;
}


.case-title-bottom-border {
	border-bottom: 1px solid #EAEAEA
}

.pagination.CaseOverviewPagination {
	margin: 0px;
}

#my-cases-subject-column,div.case-table-title.overflow-with-ellipsis {
	width: calc(1110px - 605px);
}

@media ( max-width : 1200px) {
	#my-cases-subject-column,div.case-table-title.overflow-with-ellipsis {
		width: calc(910px - 605px);
	}
}

@media ( max-width : 992px) {
	#my-cases-subject-column,div.case-table-title.overflow-with-ellipsis {
		width: calc(690px - 605px);
	}
}

#CaseOverview_my-cases-status-column {
	width: 233px;
}

#CaseOverview_my-cases-number-column {
	width: 110px;
}

#my-cases-date-updated-column {
	width: 140px;
}

#my-cases-updated-by-column {
	width: 130px;
}

.case-panel-margin {
	margin-top: 35px
}

#my-cases-table th,#my-cases-table td {
	padding: 15px;
}

.row-eq-height {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}

@media ( max-width : 770px) {
	.row-eq-height {
		display: inline;
	}
}

.table-legend {
	display: table;
	height: 100%;
	border: 0px;
}
/*
.table-legend-cell {
	border-top: 2px solid #EAEAEA;
	border-bottom: 2px solid #EAEAEA;
	border-left: 1px solid #EAEAEA;
	border-right: 1px solid #EAEAEA;
	padding: 0px;
}

.table-legend-left {
	border-left: 2px solid #EAEAEA;
}

.table-legend-right {
	border-right: 2px solid #EAEAEA;
}

@media ( max-width : 770px) {
	.table-legend-cell{
		border-top: 1px solid #EAEAEA;
		border-bottom: 1px solid #EAEAEA;
		border-left: 2px solid #EAEAEA;
		border-right: 2px solid #EAEAEA;
	}
	.table-legend {
		display: table;
		height: 100%;
	}
	.table-legend-left {
		border-top: 2px solid #EAEAEA;
	}
	.table-legend-right {
		border-bottom: 2px solid #EAEAEA;
	}
}

.table-legend-wrapper {
	padding: 20px 15px 40px;
}
*/

.table-legend-cell {
	border-top: 1px solid #D8D8D7;
	border-bottom: 1px solid #D8D8D7;
	border-left: 0px solid #D8D8D7;
	border-right: 1px solid #D8D8D7;
	padding: 0px;
}

.table-legend-left {
	border-left: 1px solid #D8D8D7;
}

@media ( max-width : 770px) {
	.table-legend-cell{
		border-top: 0px solid #D8D8D7;
		border-bottom: 1px solid #D8D8D7;
		border-left: 1px solid #D8D8D7;
		border-right: 1px solid #D8D8D7;
	}
	.table-legend {
		display: table;
		height: 100%;
	}
	.table-legend-left {
		border-top: 1px solid #D8D8D7;
	}
}

.table-legend-wrapper {
	padding: 20px 15px 40px;
}

@media ( max-width : 770px) {
	.table-legend-wrapper {
		padding: 0px 15px;
		margin: 20px 0px;
	}
}

.table-legend-info {
	font-size: 12px;
	color: #8D8D8D;
	line-height: 16px;
}

.table-legend-text {
	display: table-cell;
	width: 100%;
	height: 100%;
	padding: 15px 10px 15px 0px;
	vertical-align: top;
}

.table-legend-icon {
	display: table-cell;
	margin: 15px;
}

/*
.dropdown-menu>li>form {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: normal;
	line-height: 1.42857;
	color: #333;
	white-space: nowrap;
}

.dropdown-menu>li>form:hover,.dropdown-menu>li>form:focus {
	text-decoration: none;
	color: #262626;
	background-color: #F5F5F5;
}
*/
.CaseOverview_current-page {
	background-color: inherit;
	font-size: 14px;
	color: #357EEB;
	border-bottom: 2px solid #357EEB;
}
/***************MODAL***************/
.vertical-alignment-helper {
	display: table;
	height: 100%;
	width: 100%;
	pointer-events: none;
	/* This makes sure that we can still click outside of the modal to close it */
}

.vertical-align-center {
	/* To center vertically */
	display: table-cell;
	vertical-align: middle;
	pointer-events: none;
}

.CaseOverview_modal-content {
	/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
	width: inherit;
	height: inherit;
	/* To center horizontally */
	margin: 0 auto;
	pointer-events: all;
	background-color:white;
	margin:20px;
}
/***********************************/
.CaseOverview_modal-table {
	width: 30px;
	height: 50px;
}

td.CaseOverview_modal-table-values>a{
	color:#666767;
}

#case-overview>.popover,#case-overview>.popover>.popover-content {
	background-color: #000000;
	color: #FFFFFF;	
	font-size: 14px;
	text-align: center;
}

#case-overview>.popover.right .arrow::after {
	border-right-color: #000000;
}

#case-overview>.popover.left .arrow::after {
	border-left-color: #000000;
}

#case-overview>.popover.top .arrow::after {
	border-top-color: #000000;
}

#case-overview>.popover.bottom .arrow::after {
	border-bottom-color: #000000;
}

/*************************************************************************************
Site Section   :  Contact Support section
Description    :  Styles specific to the contact support page accessed via the site's footer (CSP_ContactSupport.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			01/05/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

#contact-support-main > .rightrail {
	background-color: #f4f4f4;
}

#contact-support-main .yellow-button {
	min-width:150px;
}

#contact-support-main input,
#contact-support-main textarea {
	border-radius: 5px;
	border: 1px solid #cdcccb;
	font-size: 16px;
	margin-bottom: 22px;
}

#contact-support-main input, #contact-support-main textarea {
	width: calc(100% - 75px);
}

#contact-support-main input{
	height: 35px;
}

#contact-support-main textarea {
	height: 127px;
}

#contact-support-main label {	
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 7px;
}

.contact-us-rightrail-title {
	font-size: 18px;	
}

.contact-us-rightrail-details {
	font-size: 16px;	
	font-weight: normal;
}

.contact-us-rightrail-link {
	font-size: 16px;	
	font-weight: medium;
	color: #2C6EE1;
}

.contact-us-rightrail-inner {
	padding-top: 45px;
}

.contact-us-rightrail-inner .horizontal-bar {
	margin-top: 35px;
	margin-bottom: 35px;
}

.contact-us-rightrail-link-bottom {
	margin-bottom: 40px;
}

#contact-us-header {
	font-size: 22px;
	margin-bottom: 10px;
	margin-top: 30px;
}

.contact-us-subheading {
	margin-bottom: 30px;
	width: calc(100% - 75px);
}

.contact-us-icon {
	width: 35px;
	margin-left: 8px;
}


/*************************************************************************************
Site Section   :  Support plans page
Description    :  Styles specific to the support plans page (CSP_SupportPlans.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Chris Staikos			01/05/2015			Updated Styles for Responsiveness		N/A

***************************************************************************************/

.support-plans-icons-xs {
	width: 50px;
	float: left;
	margin-right: 5px;
	cursor: pointer;
}

.support-plans-title-xs .caret {
	margin-right: 15px;
	float: right;
	margin-top: 18px;
}

.support-plans-title-xs{
	padding-top: 5px;
	line-height: 42px;
	cursor: pointer;
}

.support-plans-xs-expand {
	display: none;
}

.support-plans-xs-feature {
	padding-left: 25px;
}

.support-plans-xs-button {
	padding-top: 20px;
	padding-bottom: 20px;
}

#support-plans-table, #support-plans-table td, #support-plans-table th {
	border-width: 1px;
	border-color: #D8D8D7;
	border-style: solid;
	padding: 10px;
	font-weight: bold;
}

#support-plans-table th {
	width: 17.5%;
}

#support-plans-table img {
	width: 90px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#support-plan-features-header {
	text-align: right
}

body #support-plans-table {
	margin-top: 30px;
	padding-bottom: 0px;
}

.support-plans-feature-name-cell {
	width: 30%;
	text-align: right;
}

#support-plan-features-header {	
	font-size: 20px;
	text-transform: uppercase;
	text-align: right;
	color: #666666;
	padding-top: 50px;
}

#support-plans-asterisk-area {
	color: #838485;
}




/*************************************************************************************
Site Section   :  Search page
Description    :  Styles specific to the Search page (CSP_Search.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.		 Sivarajan			04/22/2016			Updated Styles for Responsiveness				N/A

***************************************************************************************/

.search-tile-container {
            border-style: solid;
            border-color: #D8D8D7;
            border-width: 1px;
            padding: 10px;
			margin: 10px;
            margin-left: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
            text-align: center;            
            font-size: 18px;
            color: #4A77BB;
            background-color: #FAFAFA;
            }
		
        .search-image-container img{
        width: 45px;
        margin: auto;
        } 
         .search-title-container {
            padding: 10px;
            margin-bottom: 10px;
         	max-height: 30px;
        }
        .search-description-container {            
            font-size: 15px;
            color: #333333;
         	 padding: 10px;
        } 
		.search-no-results {        	
         	font-size: 22px;
         	color: #333333;
         }
         .search-tips {        	
         	font-size: 16px;
         	color: #666666;
         	Margin-top: 15px;
         }
         .search-cant-find {        	
         	font-size: 20px;
         	color: #333333;
			margin-bottom:20px;
         }

/*********************
*FROM STYLE GUIDE
**********************/

hr {
	border-width: 2px;
	margin: 30px 0;
}

/*HEADERS*/
h1 {	
	font-size: 22px;
	line-height: 26px;
	text-transform: uppercase;
	text-align: left;
	/*color: #333333; SUC-85*/
	color: #000000; /* SUC-85*/
	padding: 0;
	margin: 0;
}

h2 {
	font-size: 18px;
	line-height: 26px;
	text-align: left;
	/*color: #333333; SUC-85*/
	color: #000000; /* SUC-85*/
	padding: 0;
	margin: 0;
}

h3 {
	font-size: 16px;
	line-height: 22px;
	text-align: left;
	/*color: #333333; SUC-85*/
	color: #000000; /* SUC-85*/
	margin-top: 30px;
	margin-bottom: 10px;
	padding: 0;
	margin: 0;
}

h4 {
	font-size: 16px;
	line-height: 22px;
	text-align: left;
	/*color: #333333; SUC-85*/
	color: #000000; /* SUC-85*/
	margin-top: 40px;
	margin-bottom: 20px;
	padding: 0;
	margin: 0;
}

h5 {
	line-height: 22px;
	text-align: left;
	color: #666666;
	margin-top: 50px;
	margin-botom: 30px;
	padding: 0;
	margin: 0;
}

h6 {
	padding: 0;
	margin: 0;
}

/*BODY TEXT*/
body {
	font-family: Arial, sans-serif;/*EASUP-150*/
	font-size: 16px;
	line-height: 20px;
	/*color: #333333; SUC-85*/
	color:#000000; /* SUC-85*/
}
p {
	margin: 0 0 30px 0;
}


/*FORMS*/
input, select, textarea {
	border: 1px solid #C3C3C2;
	border-radius: 4px;
}

#community-vote-up input, #community-vote-down input, .answer-display-right-icon input, .best-answer-date-comments input {
	border: none;
}


/*CUSTOM TEXT*/
h2.supportplansnames {
	font-size: 20px;
	text-transform: uppercase;
	text-align: center;
	color: #666666;
}

h2.supportplansnamessub {
	font-size: 13px;
	text-transform: uppercase;
	text-align: center;
	color: #666666;
}

.leftrail {
	background: #E6E6E6;
}

.leftrail h5 {
	padding-left: 10px;
	padding-bottom: 30px;
}

.current-filter, .current-filter img {
	width: 30px;
}

.current-filter-heading img {
	margin-left: -9px !important;
	margin-right: 7px !important;
}

#article-search-middle .pagination {
	padding-right: 20px;
}

#article-search-main {
	padding-bottom: 20px;
}

#article-search-main .horizontal-bar-thick {
	margin-left: 30px;
}

#article-search-main .leftrail .row, #article-search-main .rightrail {
	padding-top: 35px;
}

#article-search-main .rightrail, #knowledge-view-main .rightrail {
	border-left: 1px solid #D8D8D7;
}

@media (max-width: 991px) {

	#article-search-main .rightrail, #knowledge-view-main .rightrail {
		border: none;
	}

}

#article-search-current-container{
	margin-bottom: 15px;
	margin-top: 35px;
}

#article-search-current-container img {
	width: 45px;
	float: left;
	margin-left: -15px !important;
	margin-right: -10px !important;
}

#article-search-current-container h1 {
	line-height: 50px;
}

.article-guide-header h2 {
	margin-left: 23px;
}

.article-guide-header img {
	width: 20px;
	float: left;
	margin-left: 22px;
	margin-right: 15px;
}

.article-guide-header {
	line-height: 25px;
	margin-bottom: 25px;
	margin-left: -10px;
}

.browse-results-container {
	margin-left: 15px;
}

input.filter-with-image{
	width: 30px;
}


#mobile-filter-select a {
	color: black;
}

#mobile-filter-name {
	color: #4B78BC;
}

.mobile-filter-select-inner {
	margin-top: 0px;
	margin-bottom: 10px;
	border: 1px solid #D8D8D7;
	line-height: 30px;
}

#article-search-main .filter-tile-container,
#filter-modal-outer .filter-tile-container {
	padding: 7px 0 0 0;
	list-style-type: none;
	text-align: left;
	float: left;
	height: 40px;
	color: black;
	font-size: 12px;
	font-weight: medium;
	line-height: 25px;
}

.filter-tile-container input {
	background: #E6E6E6;
	border: none;
	padding-top: 7px;
	padding-bottom: 7px;
	width: 100%;
	text-align: left;
}

.filter-tile-container img {
	float: left;
	width: 25px;
	margin-left: 10px;
	margin-right: 10px;
}

.filter-selected, .filter-selected input,
.filter-tile-container:hover, .filter-tile-container input:hover {
	background: #D7D7D7;
	transition: all 0.1s ease;
}

.rightrail {
	background: #FFFFFF;
	padding: 0px;
}

.rightrail button {
	border: none;
	background: #FFFFFF;
}

.rightrail-section-header {
	margin-top: 10px;
	margin-bottom: 25px;
	font-size: 14px;
}

.rightrail-section-header h4 {
	padding-top: 3px;
}

.rightrail-section-header img{
	width: 25px;
	float: left;
	margin-right: 5px;
}

.rightrail-community-text {
	font-size: 14px;
}

.rightrail-community-link {
	font-size: 14px;
	font-weight: medium;
}

.section-link-vertical-bar{
	border-style: solid;
	border-color: #d9d9d9;
	border-width: 1px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	width: 1px;
	height: 90px;
	float:right;
}

.section-link-vertical-bar-hidden{
	border-style: none;
	margin-top: 10px;
	margin-bottom: 10px;
	padding: 0px;
	width: 1px;
	height: 90px;
	float:right;
}

.related-article-container{
	padding-bottom: 15px;
	padding-left: 25px;
	font-size: 16px;
	font-weight: medium;
}

.rightrail-video-container, .basics-video-container {
	font-size: 14px;
	line-height: 20px;
	margin-bottom: 30px;
}

button.with-play-icon {
	padding: 0px;
}

button.with-play-icon a::after {
	content: "";
    position: absolute;
    top: 25px;
    left: calc(50% - 15px);
    width: 30px;
    height: 30px;
    z-index: 100;
    background: transparent url("images/icon_videoplay_rightrail.svg") no-repeat center;
    pointer-events: none;
}

.rightrail-video-container button, .basics-video-container button {
	background-color: inherit;
	border: none;
}

.rightrail-video-container button a img, .rightrail-video-container button img, .rightrail-video-container img {
	width: 140px;
	height: 83px;
}

@media (max-width: 768px) {
	.rightrail-video-container button a img, .rightrail-video-container button img, .rightrail-video-container img {
		width: 100%;
		height: auto;
	}
}

.video-page-title {
	margin: 15px;
}

.aspect-ratio-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
	margin: 10px;
}

.aspect-ratio-wrapper iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0; top: 0;
}

.video-page-summary {
	font-size: 16px;
}

.modal-description {
	text-align: left;
}

.modal-video-container {
	width: 100%;
	margin: auto;
}

.modal-open iframe {
	width: 100%;
	height: 300px;
}

#filter-modal-outer {
	width: 370px;
}

#filter-modal-inner {
	background: #E6E6E6;
	padding-left: 0px !important;
	padding-right: 0px !important;
}

#filter-modal-inner ul {
	list-style-type: none;
	padding-left: 0px;
}

#filter-modal-inner h5 {
	padding-left: 10px;
}

#filter-modal-inner a {
	color: black;
	font-size: 12px;
	font-weight: normal;

}


/*************************************************************************************
Site Section   :  Learning the basics
Description    :  Styles for the 'Learning the Basics' page (CSP_GettingStarted.page)
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    	13/05/2015      	Original Version            			N/A

***************************************************************************************/

.basics-top-video {
	background: url("images/learning-the-basics.jpg");
	background-repeat: repeat;
	background-position: center;
	text-align: center;
}

.basics-top-video h1 {
	text-align: center;
	color: white;
	margin-top: 30px;
}

.basics-top-video iframe {
	width: 380px;
	height: 215px;
	margin-top: 30px;
	margin-bottom: 40px;
}

@media (max-width: 768px) {
	.basics-top-video iframe {
		width: 100%;
	}
}

.basics-video-container button, .basics-video-container button img, .basics-video-container img {
	width: 100%;
	height: 100%;
}

.getting-started-destinations {
	background-color: #F4F4F4;
}

.getting-started-destinations a {
	font-size: 16px;
	font-weight: medium;
}

.getting-started-destinations p {
	font-size: 14px;
}

/*************************************************************************************
Site Section   :  404 Page Styles
Description    :  Styles used on the 404 not found page.
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    	25/06/2015      	Original Version            			N/A

***************************************************************************************/

.not-found-tile {
	margin-bottom: 30px;
}

.not-found-tile .community-home-button-header {
	text-align: center;
}

@media (min-width: 992px) {
	.not-found-tile .community-home-button-header {
		min-height: 100px;
	}
}

.not-found-title {
	text-align: center;
}

/*************************************************************************************
Site Section   :  Hero Page Styles
Description    :  Styles used on the hero page.
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    15/09/2015      	Original Version            	CSP-132

***************************************************************************************/
.hero-page h1 {
	color: #333333;
	font-size: 36px;
	text-align: center;
	text-transform: none;
	line-height: 36px;
}

.hero-page h2 {
	color: #333333;
	font-size: 24px;
}

.hero-page h3 {
	color: #333333;
	font-size: 16px;
	text-align: center;
}

.hero-page p {
	color: #333333;
	font-size: 16px;
}

.hero-overlay {
	background-color: #FFFFFF;
	opacity: 0.9;
	box-shadow: 0px 0px 5px #333333;
	position: absolute;
	top: 50px;
	left: 100px;
	width: 350px;
	padding: 15px;
	border-radius: 3px;
}

@media (max-width:768px) {
	.hero-overlay {
		left: 15px;
	}
}

@media (min-width: 768px and max-width: 990px) {
	.hero-overlay {
		left: 50px;
	}
}

#facts-area {
	padding: 15px;
}

.fun-fact {
	padding: 15px;
	text-align: center;
}

.fact-number {
	color: #357eeb;
	font-size: 52px;
	margin-bottom: 10px;
	line-height: 50px;
}

.agent-of-the-month-area {
	padding: 15px;
}

.kudos-area {
	padding: 15px;
}

.kudos-container {
	background-color: #f4f4f4;
}

.agent-of-the-month-container {
	background-color: #d7e5fb;
	margin-top: -15px;
}

.kudos-content {
	width: 400px;
}

@media (max-width:768px) {
	.kudos-content {
		width: calc(100% - 85px);
	}
}

.kudos-container {
	margin-bottom: 15px;
}

.qtip-content {
	color: #333333;
	font-size: 22px;
	font-weight: 400;
}

.hero-map {
	text-align: center;
	padding-bottom: 15px;
	margin-bottom: 15px;
}

.hero-map h1,
.hero-map h3 {
	color: #FFFFFF;
}

.hero-map-image {
	width: 100%;
	max-width: 549px;
	padding-left: 15px;
	padding-right: 15px;
}

.hero-map-container {
	background-color: #1c4b9e;
}

/*************************************************************************************
Site Section   :  Release Note Styles
Description    :  Styles used on the release notes pages
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    11/10/2015      	Original Version            	CSP-367

***************************************************************************************/
.release-notes-tile {
	padding: 10px;
}

.release-notes-tile a div {
	background-color: #F4F4F4;
	border-color: #D9D9D9;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	padding: 12px 20px 12px 20px;
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	min-height: 68px;
}

@media (min-width: 769px) and (max-width: 991px) {
	.release-notes-tile a div {
		min-height: 88px;
	}

}

.release-notes-tile a div:hover,
.release-notes-tile a:hover {
	color: #357eeb;
	background-color: #FAFAFA;
}

.release-notes-tile a div:active,
.release-notes-tile a:active {
	color: #333333;
	background-color: #E6E6E6;
	border-color: #CCCCCC;
}

.release-notes-tile a:hover,
.release-notes-tile a:active,
.release-notes-tile a:focus,
.release-notes-tile a:link {
	outline: 0 !important;
	text-decoration: none !important;
}

/*************************************************************************************
Site Section   :  Downloads Styles
Description    :  Styles used on the downloads page
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    11/16/2015      	Original Version            	CSP-366

***************************************************************************************/
.downloads-tile div {
	background-color: #F4F4F4;
	border-color: #D9D9D9;
	border-style: solid;
	border-width: 1px;
	border-radius: 2px;
	padding: 12px;
	color: #333333;
	font-size: 16px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 20px;
}

.downloads-header {
	margin-top: 20px;
	margin-bottom: 10px;
}

/*************************************************************************************
Site Section   :  Global Styles
Description    :  Styles used across 404 page
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Sivarajan	    		04/25/2016      	Original Version            			N/A

***************************************************************************************/


.NotFound-image-container img{
	width: 45px;
	margin: auto;
	} 
	.NotFound-title-container {
		padding: 10px;
		margin-bottom: 5px;
	}
	.NotFound-description-container {
		font-size: 15px;
		color: #333333;
	}
	.404-row {
            margin-top: 30px;
            font-size: 13px;
        }
	        .notfound-title-1 {
            padding-top: 10px;
            font-size: 78px;
            color: #9B9B9B !important;
        }
        
		
        
        .notfound-title-2 {
            font-size: 36px;
            color: #333333 !important;
            margin-bottom: 8px;
        }
        
        .notfound-title-3 {
            font-size: 24px;
            color: #333333 !important;
            margin-bottom: 8px;
        }
        
            
        .NotFound-tile-container {
        border-style: solid;
        border-color: #EAEAEA;
        border-width: 1px;
        padding: 10px;
        margin-left: 5px;
        margin-right: 5px;
        text-align: center;
        font-size: 18px;
        background-color: #FAFAFA;
        }    
        .search-cant-find {
         	font-size: 20px;
         	color: #333333;
            margin-top: 60px;
            margin-bottom: 20px;
            text-align: left; 
         }
            
        .DSC-message-container {
        margin-top: 50px;
        margin-bottom: 30px;
        font-size: 18px;
        color: #333333;   
    	text-align: left; 
        }
        
        .DSC-message-container a{    
        	font-size: 18px;
        	color: #357EEB; 	
        }	


/*************************************************************************************
Site Section   :  Global Styles
Description    :  Styles used across various pages
History:
-------
VERSION  AUTHOR         		DATE            	DETAIL          		    			TICKET REFERENCE/ NO.
1.       Chris Staikos	    	15/05/2015      	Original Version            			N/A

***************************************************************************************/

input:focus {
	outline: none !important;
}

.full-width-grey-section {
	background-color: #F4F4F4;
}

.full-width-grey-section-dark {
	background-color: #F1F2F2;
	margin-top: 25px;
}

.required:after {
    content: " *";
    color: red;
}

label.error {
	color: red;
	margin-left: 5px;
	padding: 0px !important;
	margin-bottom: 0px !important;
}

#body-content {
	min-height: 600px;
}

.mce-path {
    display: none !important;
}

body > .popover, body > .popover > .popover-content {
	background-color: #4B78BC;
	color: #FFFFFF;
	font-size: 14px;
	text-align: center;
}

body > .popover.right .arrow::after {
	border-right-color: #4B78BC;
}

body > .popover.left .arrow::after {
	border-left-color: #4B78BC;
}

body > .popover.top .arrow::after {
	border-top-color: #4B78BC;
}

body > .popover.bottom .arrow::after {
	border-bottom-color: #4B78BC;
}

body > .popover a {
	color: #FFFFFF;
	text-decoration: underline;
}

.full-height-col-container {
	overflow: hidden;
}

.full-height-col {
	padding-bottom: 32000px;
	margin-bottom: -32000px;
}

#knowledge-view-main .full-height-col {
	padding-left: 23px;
}

@media (max-width: 991px) {
	#knowledge-view-main .full-height-col .release-col {
		padding-left: 15px;
	}
}

.horizontal-bar {
	border-bottom: 1px solid #D8D8D7;
	margin-bottom: 30px;
}

.horizontal-bar-thick {
	border-bottom: 4px solid #D8D8D7;
	margin-bottom: 30px;
}

.horizontal-bar-blue {
	border-bottom: 1px solid #4A78BC;
	margin-bottom: 30px;
	margin-top: 50px;
}

#answers-main-panel .horizontal-bar,
#ideas-main-panel .horizontal-bar,
.idea-comments-area-container .horizontal-bar,
.answer-comments-area-container .horizontal-bar,
.content .horizontal-bar-thick,
#account-overview .horizontal-bar,
.answer-detail-page .horizontal-bar,
#community-user-page .horizontal-bar-thick,
#home-logged-in-leftrail .horizontal-bar,
.community-post-comment-mobile-container .horizontal-bar,
#community-home-button-area .horizontal-bar,
#community-overview .horizontal-bar {
	margin-top: 30px;
	margin-bottom: 30px;
}



.yellow-button, input.yellow-button {
	background: #FBC211;
	text-align: center;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 15px;
	padding-right: 15px;
	color: black;
	border: none !important;
	border-radius: 2px !important;
	font-weight: bold;
	font-size: 14px;
}

.yellow-button span {
	display: block;
}

button.yellow-button, input.yellow-button {
	border: none;
}

.greyed-text {
	color: #808285 !important;
}

.blue-button,
input.blue-button {
	color: #FFFFFF;
	background-color: #327EEC;
	padding-top: 6px;
	padding-right: 50px;
	padding-bottom: 6px;
	padding-left: 50px;
	border: none !important;
	border-radius: 2px !important;
}

.blue-button:hover {
	background-color: #4067A0;
	transition: all 0.1s ease;
}

.blue-button:active {
	background-color: #385A8C;
}


.button-container a:hover {
	text-decoration: none;
}

.button-container input{
	border: none;
}

.logo {
	display: inline-block;
	width: 130px;
	height: 39px;
	background-repeat: no-repeat;
	background-size: 100%;
}

a.community-logo {
	display: inline-block;
	width: 130px;
	height: 39px;
	background: url("images/logo.png");
	background-repeat: no-repeat;
	background-size: 100%;
}

@media (max-width: 991px) {
	a.community-logo {
		display: inline-block;
		width: 130px;
		height: 39px;
		background: url("images/logo.png");
		background-repeat: no-repeat;
		background-size: 100%;
	}
}

.logo-text,
.logo-text:hover,
.logo-text:active {
	font-size: 15px;
	opacity: 0.85;
	color: #FFFFFF;
	text-decoration: none !important;
}


a, a:visited {
	/*color: #357eeb;  EASUP-150*/
	color: #0369FF;
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
	/*color: #357eeb;  EASUP-150*/
	color: #0155C4;
}

a.more {
	font-size: 13px;
	text-transform: uppercase;
	text-align: left;
	color: #357eeb;
}

.full-width {
	width: 100%;
}

.no-margin-row {
	margin-left: 0px;
	margin-right: 0px;
}

.page-select {
	cursor: pointer;
	font-size: 14px;
	color: #4A77BB;
	text-align: center;

}

.search-page .page-select {
	margin: 3px;
}

.current-page {
	background: #263A7B;
	font-size: 14px;
	color: #FFFFFF;
}


.pagination {
	font-size: 14px;
	color: #575757;
	padding-left: 0px;
	padding-right: 0px;
	text-align: right;
}

.pagination li {
	font-size: 14px;
	margin: 0 5px;
	float: left;
}

.pagination li.active {
	color: #ffffff;
	background: #26397B;
	padding: 3px 5px;
}

.pagination li a {
	color: #4A77BB;
	padding: 3px 5px;
	border: none;
	line-height: 20px;
}

.pagination li.next a {
	padding-left: 10px;
	border-left: 1px solid #BBBDC0;
}

.pagination li.previous a {
	padding-right: 10px;
	border-right: 1px solid #BBBDC0;
}

.mobile-pagination {
	background: #F1F2F2;
	padding-top: 30px;
	font-size: 16px;
	text-align: center;
	height: 80px;
}


	.contact-support-tile-container {
	border-style: solid;
	border-color: #D8D8D7;
	border-width: 1px;
	padding: 10px;
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
	text-align: center;
	font-size: 18px;
	color: #4A77BB;
	background-color: #FAFAFA;
	}
	.contact-support-image-container img{
	width: 45px;
	margin: auto;
	} 
	.contact-support-title-container {
		padding: 10px;
		margin-bottom: 5px;
	}
	.contact-support-description-container {
		font-size: 15px;
		color: #333333;
	}
	.contact-support-link-container {
		font-size: 16px;
		color: #2C6EE1;
	} 



.mobile-pagination .page-select, .mobile-pagination .current-page {
	padding: 5px;
}

.pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover {
    background-color: white;
    border-color: #BBBDC0;
    color: #4B78BC;
}

.disclosure-indicator {
	height: 20px;
	width: 20px;
	background: url("icons/icon-disclosureindicator.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: text-bottom;
}

.disclosure-indicator-blue {
	height: 22px;
	width: 20px;
	background: url("icons/icon-disclosureindicator_blue.svg");
	background-size: 100%;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: text-bottom;
}

.green-check {
	height: 20px;
	width: 20px;
	background: url("icons/icon-checkmark-green.png");
	background-size: 100%;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: text-bottom;
}

.green-check-spacer {
	height: 20px;
	width: 20px;
	display: inline-block;
}

.clickable:hover {
	cursor: pointer;
}


/* FROM OLIVE */

/*-----------------------------------------------------------------*\
				    #Buttons
				\*-----------------------------------------------------------------*/
				.btn {
				  background: #111111;
				  border: 1px solid #111111;
				  border-radius: 1px; /*EASUP-318*/
				  cursor: pointer;
				  color: #ffffff;
				  display: inline-block;
				  font-size: 16px; /*EASUP-318*/
				  font-weight: bold;
				  letter-spacing: 0.6px;
				  line-height: 1;
				  min-width: 55px;
				  margin: 0;
				  padding: 7px 14px;
				  position: relative;
				  text-align: center;
				  text-decoration: none !important;
				  /*text-transform: uppercase; */ /*EASUP-318*/ }

				.btn[disabled] {
				  pointer-events: none; }

				.btn:focus {
				  outline: 0; }

				/*-----------------------------------------------------------------*\
				    Main Button - Yellow
				    Call to action on a page
				\*-----------------------------------------------------------------*/
				.btn-main, .btn-main[disabled]:hover, .btn-main.disabled:hover {
				  background: #ffc820;
				  border-color: #ffc820;
				  color: #333333; }

				.btn-main:hover {
				  background: #f7ba00;
				  color: #333333; }

				.btn-main:active, .btn-main.on, .btn-main.menu_trigger-on {
				  background: #0155C4; }

				/*Added by Chris*/
				.btn-main:visited {
					color: black !important;
				}

				/*-----------------------------------------------------------------*\
				    Primary Button - Blue
				    Primary action on an item
				\*-----------------------------------------------------------------*/
				.btn-primary, .btn-primary[disabled]:hover, .btn-primary.disabled:hover {
				  background: #0369FF; /* EASUP-318*/
				  border-color: #0369FF;  /* EASUP-318*/
				  color: #ffffff; }

				.btn-primary:hover {
				  background: #2864c6;
				  color: #ffffff; }

				.btn-primary:active, .btn-primary.on, .btn-primary.menu_trigger-on {
				  background: #1b49a0; }

				/*-----------------------------------------------------------------*\
				    Secondary Button - Light Gray
				    Multiple secondary actions on an item
				\*-----------------------------------------------------------------*/
				.btn-secondary, .btn-secondary[disabled]:hover, .btn-secondary.disabled:hover {
				  background: #f4f4f4;
				  border-color: #d9d9d9;
				  color: #333333; }

				.btn-secondary:hover {
				  background: #fafafa;
				  border-color: #d9d9d9;
				  color: #333333; }

				.btn-secondary:active, .btn-secondary.on, .btn-secondary.menu_trigger-on {
				  background: #e6e6e6;
				  border-color: #cccccc; }

				/*-----------------------------------------------------------------*\
				    Minor Button - no border or background
				    the least important action for an item
				\*-----------------------------------------------------------------*/
				.btn-minor, .btn-minor[disabled]:hover, .btn-minor.disabled:hover {
				  background: transparent;
				  border-color: transparent;
				  color: #333333;
				  opacity: 0.8; }

				.btn-minor:hover {
				  opacity: 0.4; }

				.btn-minor:active, .btn-minor.on, .btn-minor.menu_trigger-on {
				  opacity: 0.4; }


				/*-----------------------------------------------------------------*\
				    Button Sizes
				\*-----------------------------------------------------------------*/
				.btn-xl {
				  font-size: 14px;
				  padding: 12px 20px; }

				.btn-lg {
				  font-size: 14px;
				  padding: 9px 18px; }

				.btn-sm {
				  font-size: 11px;
				  padding: 4px 10px 5px 10px; }

				/*-----------------------------------------------------------------*\
				    Buttons that trigger drop downs
				    (creates the down arrow only with CSS)
				\*-----------------------------------------------------------------*/
				.btn-trigger {
				  cursor: pointer;
				  padding-right: 28px !important;
				  position: relative;
				  text-align: left; }

				.btn-trigger:after {
				  border: 4px solid transparent;
				  border-top-color: currentColor;
				  content: " ";
				  display: block;
				  position: absolute;
				  right: 14px;
				  top: 44%;
				  height: 0;
				  width: 0; }

				/*-----------------------------------------------------------------*\
				    Button Select
				    - use when you want your button to look like a select element
				    - styles are a combo of .input-select and .btn-secondary
				\*-----------------------------------------------------------------*/
				.btn-select {
				  background-color: #FFFFFF;
				  border: 1px solid #cccccc;
				  color: #333333;
				  font-size: 13px;
				  font-weight: normal;
				  letter-spacing: normal;
				  padding-left: 8px;
				  text-align: left;
				  text-transform: none;
				  width: 100%; }

				.btn-select.on {
				  background: #e9e9e9;
				  border-color: #cccccc; }


					/*-----------------------------------------------------------------*\
					    Text Inputs

					    <input type="text" class="input-text" />
					    <textarea class="input-textarea" />

					\*-----------------------------------------------------------------*/



					/* text inputs and text areas have same base style */
					.input-text,
					.input-textarea {
					    background: #ffffff;
					    border: 1px solid #c1c1c1;
					    border-radius: 2px;
					    font-size: 13px;
					    height: auto;
					    line-height: normal;
					    padding: 5px 8px 6px 8px;
					    width: 100%;
					    outline: 0;
					    resize: none;
					    -moz-appearance: none;
					    -webkit-appearance: none;
					}

					/* Firefox gets a little over zealous on it's form judgement.*/
					input:required {
					  box-shadow: none;
					}


					/* Add in a hover state for inputs with no border */
					.input-text:hover,
					.input-textarea:hover {
					    border-color: #c1c1c1 !important;
					}


					/* State - Focus */
					.input-text:focus,
					.input-textarea:focus {
					    border-color: #357eeb !important;
					    outline: 0;
					}

					/* State - Error */
					.has-error {
					    border: 1px solid #e86b52 !important;
					}
					.label-error {
					    color: #e86b52;
					    font-weight: bold;
					}

					/* State - Disabled */
					.input-text[disabled],
					.input-text.disabled,
					.input-textarea[disabled],
					.input-textarea.disabled {
					  background-color: #eeeeee;
					  color: #666666;
					}

					/* placeholder styling */
					::-webkit-input-placeholder { color: #999999; }
					::-moz-placeholder { color: #999999; }
					:-ms-input-placeholder { color: #999999; }

					/* Hide Inernet Explorer "clear field" icon */
					::-ms-clear {
					    height: 0;
					    width: 0;
					}

					/* Hide Inernet Explorer "reveal password" icon */
					::-ms-reveal {
					   height: 0;
					    width: 0;
					}

					/* text area features */
					.input-textarea {
					    min-height: 50px;
					}

					.input-textarea-lg {
					    min-height: 80px;
					}

					.input-textarea.resize {
					    resize: both;
					}

					.input-textarea.h-resize {
					    resize: horizontal;
					}

					.input-textarea.v-resize {
					    resize: vertical;
					}

					/* text input features */
					.input-number { width: 50px; }



					/*-----------------------------------------------------------------*\
					    #Form Grouping
					    - use this as a wrapper for text boxes, text areas, and selects
					    - by default, this stacks the label on top of the control.
					    - add the .form-grouping-inline to place the label and control in the same line
					    - do not use for checkboxes and radios. these get special treatment
					    - TODO: this will replace the .inline-input class
					\*-----------------------------------------------------------------*/
					.form-group {
					    display: block;
					    margin: 22px 0;
					}

					.form-group .label {
					    display: inline-block;
					    font-weight: 500;
					    margin-bottom: 6px;
					}

					[label-required]:after {
					    color: #e86b52;
					    content: attr(label-required);
					    padding-left: 4px;
					}

					.form-group-inline {
					    margin: 12px 0;
					}

					.form-group-inline .label {
					    line-height: 28px;
					    padding-right: 10px;
					    vertical-align: top;
					    width: 170px;
					}

					.form-group .error-msg,
					.form-group-inline .error-msg {
					    color: #e86b52;
					    margin: 8px 0;
					    display: block;
					}

					/*-----------------------------------------------------------------*\
					    Native Custom Selects
					    - IE10+, Webkit, and Firefox will all recieve the custom down arrow
					    - IE9 and below will still use the native browser down arrow
					    - Does not require any Javascript :)


					<div class="select-wrap">
					    <select class="input-select">
					        <option></option>
					    </select>
					</div>


					\*-----------------------------------------------------------------*/

					/* must be wrapped around any select element */
					.select-wrap {
					    background: #ffffff;
					    display: inline-block;
					    position: relative;
					    width: 100%;
					}

					.select-wrap select {
					    background: #ffffff;
					    border: 1px solid #c1c1c1;
					    border-radius: 2px;
					    font: inherit;
					    height: 28px;
					    line-height: 26px;
					    outline: 0;
					    padding: 5px 8px 6px 8px;
					    width: 100%;
					    z-index: 4;
					}


					/* Since we removed the default focus styles, we have to add our own */
					.select-wrap select:focus {
					    border-color: #357eeb;
					    outline: 0;
					}

					.select-wrap select:disabled,
					.select-wrap select.disabled {
					    background-color: #eeeeee;
					    border-color: #eeeeee !important;
					    color: #666666;
					    cursor: default;
					}

					.select-wrap option:disabled {
					    color: #666666;
					    cursor: default;
					}


					/* IE - get rid of hideous background highlight */
					.select-wrap select::-ms-value {
					    background: transparent;
					    color: inherit;
					    line-height: 13px;
					}


					/* Target browsers where we can use our own down arrow */
					@media screen and
					    (-webkit-min-device-pixel-ratio: 0),
					    (min--moz-device-pixel-ratio: 0),
					    (-ms-high-contrast: active), (-ms-high-contrast: none) {

					        /* IE - remove drop down arrow */
					        .select-wrap select::-ms-expand {
					            display: none;
					            padding-right: 22px;
					        }

					        /* Webkit and Chrome - remove drop down arrow  */
					        .select-wrap select {
					            padding: 0 22px 0 8px;
					            -moz-appearance: none;
					            -webkit-appearance: none;
					            appearance: none;
					        }

					        /* Drop Down Arrow
					            1.  set pointer-events to none to allow interaction with the select element
					        */
					        .select-wrap:after {
					            border: 4px solid transparent;
					            border-top-color: #333333;
					            content: " ";
					            display: block;
					            height: 0;
					            pointer-events: none; /* 1 */
					            position: absolute;
					            right: 8px;
					            top: 11px;
					            width: 0;
					            z-index: 3;
					        }
					}

/*-----------------------------------------------------------------*\
	Case Search Results page
\*-----------------------------------------------------------------*/

		.case-search-tab{
			width: 200px; 
			height: 28px; 
			border-radius: 0px;
			margin-right: 10px;
			background: url("/resource/1449598116000/CSP_icon_search_grey") no-repeat scroll 5px;					
			background-size: 16px;
			padding-left:30px;
			padding-right:0px;
			font-size: 12px;
		}
		.case-search-tab:focus{
			border-color: #357EEB;
		}
		
		/*
		* cancel icon on case search tab
		*/
		.case-search-tab::-webkit-search-cancel-button{
					position:relative;
					right:0px;  
			
					-webkit-appearance: none;
					height: 16px;
					width: 16px;
					background: url("/resource/1449598116000/CSP_icon_remove") no-repeat scroll 0px;
					background-size: 8px;
			}
		
		input[type="search" i] {
		    -webkit-appearance: searchfield;
		    box-sizing: border-box;
		}
			

	.disclosure-indicator-lt{
	    height: 12px;
	    width: 12px;
	    background: url("/resource/1449598116000/CSP_icon_disclosureindicator_blue_lt");
	    background-size: 7px;
	    background-repeat: no-repeat;
	    display: inline-block;
	}		

		mark, .mark {
		    background-color: #fcf8e3;
		}
		
		.highlight{background-color: #FDEFC1}
		
		
		@media screen and (max-width: 770px){
			.mobile-case-results-header-items{
				margin: 0px 15px;	
			}
		}
		
		.CaseOverview_h1_search-results{
			margin-bottom: 0px; 
			margin-left: 0px;
		}
		
		.case-search-results-table-date-header{
			text-align: right; 
			width:130px;
		}
		
		.link-color{
			color:#357eeb;
		}
		.margin-20-0-10-0{
			margin: 20px 0px 10px 0px;
		}
		.case-search-results-status-header{
			width: 80px;
		}
		.margin-sides-0{
			margin-left: 0px;
			margin-right: 0px;
		}
		button.case-search-dropdown-button{
			text-transform: capitalize; 
			text-align: left; 
			background-color: white; 
			color: black; 
			width: 100%; 
			border-color: #E9E9E9;
		}
		/*override normal button hover*/
		button.case-search-dropdown-button:hover{
			background-color: white;
			color: black;
		}
		.padding-0{
			padding: 0px;
		}
		.modal-footer-filter-cancel{
			background-color: white; 
			color: #666767; 
			border: 0px;
		}		
		

	
	@media (max-width: 992px){
			div.case-table-title.overflow-with-ellipsis.case-search-results-table {
		    	width: calc(690px - 405px);
			}
		}
		
		input[type="search" i] {
				-webkit-appearance: searchfield;
				box-sizing: border-box;
		}