/* #########################################################################################
   Common Styling used across the components in Lightning Pages
   #########################################################################################*/

/* Used for Nissan Primary Button in Active State */
.custom-primary-button{
	border-radius:0px !important;
	height:44px !important;
    border:none !important;
    font-size: 16px !important;
    color: white !important;
   	background-color:#C3002F !important;
    padding-left:20px !important;
    padding-right:20px !important;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-primary-button:hover:enabled{
	background-color:#920023 !important;
}
/* Used for Nissan Primary Button in Disabled State */
.custom-primary-button-disabled{
	border-radius:0px;
	height:44px;
    border:none;
    font-size: 16px !important;
    color: white !important;
   	background-color:#CCCCCC;
    padding-left:20px;
    padding-right:20px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Arrow Used for Nissan Primary Button */
.custom-primary-arrow{
	margin-left: 15px !important;
    padding-bottom: 2px;
}
/* Used for Nissan Secondary Button in Active State */
.custom-secondary-button{
	border-radius:0px;
	height:44px;
    border:none;
    font-size: 16px !important;
    color: black;
   	background-color:#EEEEEE;
    padding-left:20px;
    padding-right:20px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-secondary-button:hover:enabled{
	background-color:#CCCCCC;
}
/* Used for Nissan Secondary Button in Disabled State */                        
.custom-secondary-button-disabled{
	border-radius:0px;
	height:44px;
    border:none;
    font-size: 16px !important;
    color: white;
   	background-color:#CCCCCC;
    padding-left:20px;
    padding-right:20px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Arrow Used for Nissan Secondary Button */
.custom-secondary-arrow{
	margin-left: 15px;
    padding-bottom: 2px;                        
}
/* Used for Next & Previous Secondary Slider Buttons in Message Center */                              
.custom-secondary-buttonleft{
	border-radius:0px;
	height:44px;
    border:none;
    font-size: 16px !important;
    color: black;
   	background-color:#EEEEEE;
    padding-left:0px;
    padding-right:0px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-secondary-buttonleft:hover:enabled{
	background-color:#CCCCCC;
}
.custom-secondary-sliderleft{
	margin-right: 20px;
}
.custom-secondary-sliderright{
	margin-left: 60px;
}
/* Links with Black Color */                                        
.custom-link-black{
    font-size: 16px;
    text-decoration: underline;
	color: black;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Links with Red Color */                                                  
.custom-link-red{
    font-size: 16px;
    text-decoration: underline;
	color: #C3002F;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-sub-link-red{
    font-size: 13px;
    text-decoration: underline;
	color: #C3002F;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}                                                        
/* Drop Shadow used across pages */                                                         
.custom-box-shadow{
    font-family: var(--lwc-fontFamily,Nissan Regular) !important;
    border-radius: 5px;
    border-color: #EEEEEE;
    box-shadow: 0 2px 20px 1px #EEEEEE;
}
/* Used for all Headers */                                                                
.custom-heading{
    font-size: 20px;
    font-weight: bold;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-heading-normal{
    font-size: 20px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-heading-red{
    font-size: 20px;
    font-weight: bold;
	color: #C3002F;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Used for Red Line below the Headers which are left aligned */                                                                                          
.custom-line{ 
   	margin-top: 4px;
    height: 3px;
    background-color: #C3002F;
	width: 145px;
    margin-left:1.5%;
}
/* Used for Red Line below the Headers which are center aligned */                                                                                          
.custom-line-center{ 
   	margin-top: 4px;
    height: 3px;
    background-color: #C3002F; 
	width: 40%;
}
/* Used for Red Line above the FAQ Tile in all Pages */                                                                                          
.custom-page-footerline{ 
    height: 3.5px;
    background-color: #C3002F;
	width: 10%;
}
/* Used for different text stylings */                                                                                          
.custom-text{
	 font-size: 16px !important;
	 color: black;
	 font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-text-bold{
	 font-size: 16px;
	 font-weight: bold;
	 color: black;
	 font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-text-red{
	font-size: 16px;
    color:#C3002F;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-text-redbold{
	font-size: 16px;
    color:#C3002F;
	font-weight: bold;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-sub-text{
	 font-size: 13px !important;
	 color: black;
	 font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-sub-text-bold{
	 font-size: 13px;
	 color: black;
	 font-weight: bold;
	 font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-sub-text-red{
	 font-size: 13px;
	 color: #C3002F;
	 font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-sub-text-redbold{
	 font-size: 13px;
	 color: #C3002F;
	 font-weight: bold;
	 font-family: var(--lwc-fontFamily,Nissan Regular);
}
.classic-custom-text{
	 font-size: 16px !important;
	 color: black;
	 font-family: Nissan Regular;
} 
/* Used for Buttons in My Profile & Payments */                                                                                                                                                         
.custom-lexbutton-header{
    font-size:16px;
    font-weight:bold;
    text-align: left;
    color:black;
    padding-top: 5px;
	padding-bottom: 10px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-lexbutton-body{
    font-size: 13px;
    text-align: left;
    color:black;
    line-height: normal;
    padding-bottom: 10px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-lexbutton-link{
    font-size: 13px;
    text-align: left;
    color:#C3002F;
    font-weight:bold;                                                                                                                                                       
    line-height: normal;
    padding-bottom: 10px;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-lexbutton-shadow, .custom-lexbutton-shadow:focus {
    border-radius: 10px;
    border-color: #EEEEEE;
    box-shadow: 0 2px 20px 1px #EEEEEE;
}
.custom-lexbutton-border, .custom-lexbutton-border:focus {
    outline: none;
    border-color: #C3002F;
    border: 3px solid #C3002F;
    background: white;
}
.lexbutton:hover:enabled {
    border: 3px solid #C3002F;
    background-color: white;
}
.lexbutton:selected:enabled {
    border: 3px solid #C3002F;
    background-color: white;
}
/* Used to Rotate the Arrow image in Return to Links at the bottom of pages */                                                                                                                                                                                  
.custom-img-rotate{
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}
/* Used for all the Alert boxes related to Payments and Accounts */ 
.custom-alert-box{
    border-radius: 10px;
    border: 2px solid #C3002F;
}
/* Used for all the grey boxes */ 
.custom-grey-box{
    background-color:#EEEEEE;
    border-radius: 5px;
    border: 1px solid #EEEEEE;   
}
/* Used to hide the label */ 
.custom-label-hidden > label {
    display: none;
} 
/* Used for the styling of all the input sections*/
.slds-input{
    border: 1px solid #e3e3ec !important;
    border-radius: 5px !important;
    min-height: 40px !important;
	box-shadow: none !important;
	font-size: 16px !important; 
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.slds-input:focus {
    border: 1px solid #e3e3ec;
    border-radius: 5px;
    min-height: 40px;
	box-shadow: none;
}
/* Used for the styling of date picker */
.custom-date-input{
    padding-left: 4%;
    width: 100%;
    margin-right: -45px;
    border-radius: 5px;
    border: 1px solid #e3e3ec;
    min-height: 40px;
    box-shadow: none;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Used for the styling of input text */
.slds-form-element__label{
     font-size: 16px; !important;
	 font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Used to Hide the required sign */
.slds-required{
    visibility: hidden;
    margin: -1%;
}
/* Used for the styling of error text from Invalid inputs */
.slds-has-error .slds-form-element__help{
    position: absolute;
    font-size: 13px;
    color:#C3002F;                                                                                                                                                                                    
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Used for the styling related to Nissan Banner */
.custom-banner {
  background-color: black;
  Height: 70px;
  border-bottom: 5px solid #C3002F;
}
.custom-banner-text a{
    color: white;
   font-size: 16px;
  font-weight: bold;
  font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Used for the styling of counter in the Nissan Banner for Documents and Messages */
.custom-message-counter{
	background-color: #C3002F;
    border-radius: 50%;
    color: white;
}
/* Used for the styling of custom popup border radius */                                                                                                                                                                                                                    
.custom-popup-border{
    border-radius: 5px;
}
/* Used for the styling of toggle buttons in Statement and Notification Preferences */
.custom-toggle {
    position: relative; 
    width: 70px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.custom-toggle-checkbox {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.custom-toggle-label {
    display: block; 
    overflow: hidden; 
    cursor: pointer;
    border: none;
    border-radius: 20px;
}
.custom-toggle-inner {
    display: block; 
    width: 200%; 
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
    line-height: 30px;
    height: 30px;
    padding: 0; 
    color: white;
    font-size: 16px;
    font-weight: bold;
    font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.custom-toggle-en:before {
    float: left; 
    width: 50%;
    content: "YES";
    padding-left: 10px;
    background-color:#25B24A; 
}
                                                                                                                                                                                                                                
.custom-toggle-es:before {
    float: left; 
    width: 50%;
    content: "SI";
    padding-left: 10px;
    background-color:#25B24A; 
} 
                                                                                                                                                                                                                                
.custom-toggle-es:after {
    float: left; 
    width: 50%; 
    content: "NO";
    padding-right: 10px;
    background-color: #CCCCCC;
    text-align: right;
}                                                                                                                                                                                                                                

.custom-toggle-en:after {
    float: left; 
    width: 50%; 
    content: "NO";
    padding-right: 10px;
    background-color: #CCCCCC;
    text-align: right;
}

.custom-toggle-switch {
  display: block;
    width: 24px;
    height: 24px;
    margin: 3px;
    background: white;
    position: absolute;
    top: 0;
    border-radius: 30px;
}
.custom-toggle-checkbox:checked + .custom-toggle-label .custom-toggle-inner {
    margin-left: 0;
}
.custom-toggle-checkbox:checked + .custom-toggle-label .custom-toggle-switch{
    right: 0px; 
}
/* Used for the styling of select containers*/
.slds-select_container .slds-select
{
    width: 100%;
    height: 40px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #e3e3ec!important;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
    box-shadow: none; 
    padding-right: 11%;
    background: transparent url(/resource/NissanDownArrowBlack) no-repeat right;
   	background-position-x: 97%;                                                                                                                                                                                                                        
}
.slds-select_container::before { border-bottom: none;}
.slds-select_container::after { border-top: none;}
.slds-select[disabled],.slds-select.slds-is-disabled {
    background-color: #e9eaec !important;
} 
/* Used for the styling of Tables */
.slds-table thead th {
    padding-top: 3% !important;
    padding-bottom: 3% !important;
}
.slds-table td {
    padding-top: 3% !important;
    padding-bottom: 3% !important;
}
.slds-table tbody tr{
    border-top: 1px solid #e3e3ec;
    border-radius: 5px;
}

.slds-table tr:nth-child(even) { 
    background-color: #EEEEEE; 
}
.slds-table:not(.slds-no-row-hover) tbody tr:hover>td, 
.slds-table:not(.slds-no-row-hover) tbody tr:hover>th,
.slds-table:not(.slds-no-row-hover) tbody tr:focus>td,
.slds-table:not(.slds-no-row-hover) tbody tr:focus>th {
    background-color: transparent!important;
}
/* Used for the styling of Live Chat button */
.forceCommunityEmbeddedServiceHelpButton .flatButton,
 .forceCommunityEmbeddedServiceHelpButton .flatButton:hover,
 .forceCommunityEmbeddedServiceHelpButton .flatButton:focus{
    margin-top: 7% !important;                                                                                                                                                                                                                                
    background-color: #C3002F !important;
	color: white !important;
    font-size: 14px !important;
    line-height: 35px !important;
	text-transform: unset !important;
	font-weight: 500 !important;
   	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
.embeddedServiceSidebarMinimizedDefaultUI.minimizedContainer:hover, 
.embeddedServiceSidebarMinimizedDefaultUI.minimizedContainer:focus,
.embeddedServiceSidebarMinimizedDefaultUI.minimizedContainer{
    background-color: #C3002F  !important;
    border-color: #C3002F  !important;
}
.embeddedServiceLiveAgentStateChatAction.uiButton.medium svg{
    fill: black !important;
}
.embeddedServiceLiveAgentStateChatAction.uiButton.small svg {
	fill: black !important;
} 
.embeddedServiceIcon svg{
   fill: white !important;
}
[embeddedservice-chatheader_chatheader-host]  {
    background-color: #C3002F  !important;
}                                                                                                                                                                                                                                      
.forceCommunityEmbeddedServiceHelpButton .flatButton .helpButtonLabel{
    padding-right: 43px;                                                                                                                                                                                                                                                                                                
} 
.forceCommunityEmbeddedServiceHelpButton .help{
        padding-right: 44px !important;                                                                                                                                                                                                                                                                                            
        margin-top: -6px;                                                                                                                                                                                                                                                                                                
}
.embeddedServiceSidebar.layout-docked .dockableContainer{
max-height: var(--lwc-sidebarHeight,510px) !important;                                                                                                                                                                                                                                                            
}                                                                                                                                                                                                                                                        
.embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor2 {
background-color: rgba(0, 0, 0, 0) !important;                                                                                                                                                                                                                                                                                                                                    
}                                                                                                                                                                                                                                                        
/* Used for the styling of text area in Unauth Pages */ 
.textAr .slds-textarea:focus, .slds-textarea:active {
	background-color: #EEEEEE;
	box-shadow: none;
	border-color: #EEEEEE;
}
.textAr .slds-textarea{
	background-color: #EEEEEE;
height: 80px !important;
}
/* Used for the styling of Trending Articles Tiles */ 
.comm-topic-trending-articles li {
    background: #666666;
    border: none;
}                                                                                                                                                                                                                                
.comm-topic-trending-articles__item .slds-text-body_small {
	font-weight: bold;
	font-size: 18px;
	color: white;
	padding: 5%;
    overflow: hidden;
	font-family: var(--lwc-fontFamily,Nissan Regular);
} 
/* Used for the styling of Categories Tiles */
.forceTopicFeaturedTopics .topicContent .topicLabel {
    font-size: 18px;
    text-transform: uppercase;
    font-family: var(--lwc-fontFamily,Nissan Regular);
   	overflow: visible;
	width: 100% !important;                                                                                                                                                                                                                                                                                    
}                                                                                                                                                                                                                                                  
.forceTopicFeaturedTopics .topicContent {
    background-color: #666666 !important;
} 
/* Used for the styling of Tabs Trending Topics and Categories */
.slds-tabs_default__item:hover:after, 
.slds-tabs--default__item:hover:after{
     background-color:#C3002F;
}
/* Used for the styling of Article Pages */
.selfServiceArticleListItem .article-head {
    color: #C3002F !important;
    font-family: var(--lwc-fontFamily,Nissan Regular) !important;                                                                                                                                                                                                                                                     
} 
.selfServiceArticleListItem .article-summary {
    font-family: var(--lwc-fontFamily,Nissan Regular) !important;                                                                                                                                                                                                                                                     
}                                                                                                                                                                                                                                                         
.comm-related-articles__item .slds-text-body_small {
		font-size: 16px;
    	color: #C3002F;
    	font-weight: bold;
}   
.topicRelatedArticleList .slds-button, .slds-button_brand {
    border-radius:0px;
	height:44px;
    border:none;
    font-size: 16px !important;
    font-weight: bold;
    color: white;
   	background-color:#C3002F;
    padding-left:20px;
    padding-right:20px;
    text-transform: uppercase;
	font-family: var(--lwc-fontFamily,Nissan Regular) !important;
} 
/* Used for the styling of Hamburger Menu */
svg.slds-icon.slds-icon-text-default.slds-icon_large {
    height: 23px;
    width: 23.5px;
    fill: #C3002F;
}
li.slds-dropdown__item{
    border-bottom: solid;
    border-bottom-width: 1px;
    border-bottom-color: #EEEEEE;
    font-size: 16px;
    font-weight: bold;
    color: black;
    font-family: var(--lwc-fontFamily,Nissan Regular) !important;
}
/* Used for the styling of Custom Errors */
.custom-error-red{
	 font-size: 13px !important;
	 color: red;
     font-family: var(--lwc-fontFamily,Nissan Regular) !important;                                                                                                                                                                                                                                                                      
}  
/* Used for the styling of Custom Forms */
.custom-form
{
		background-color:#F5F5F5; 
		color:#343434; 
		border-color:none;
		border-style: none;
		font-size: 14px;
		font-family: var(--lwc-fontFamily,Nissan Regular) !important;             
}
/* Used to Hide the Detail Page on hover for Knowledge Articles on Search */
  
/* Used for the styling of Headers in Contact Us Section */
h1, h2, h3, h4, h5, h6{
    font-family: var(--lwc-fontFamily,Nissan Regular) !important;                                                                                                                                                                                                                                                                                                                
}
c-article-detail span{
	font-family: var(--lwc-fontFamily,Nissan Regular) !important; 
}
                                                                                                                                                                                                                                                                                                                                }