:root { 

  --themecolor: #cecece !important; /* this variable is used to define Button, icon, spinner etc. color */

  --themetextcolor: black; /* this variable is used to define text color on Button text etc. */

  --themehovercolor: transparent; /* this variable is used to define hover color for button, icon, etc. */

  --themetexthovercolor: black; /* this variable is used to define hover text color on Button text etc. */

  --logopath: url('logo.gif');  /* define logo path if needed */

  --logo-height: 36px !important; /* define logo height */

  --logo-width: 150px !important; /* define logo width */

  --logo-margin-bottom: -30px !important; /* define margin bottom */

  --logo-margin-left: -10px !important; /* define margin left */

  --logo-margin-top: 0px !important; /* define margin top if needed */

  --brand-title-margin-left: 155px !important; /* define brand title margin left */

  --brand-title-margin-top: -26px !important; /* define brand title margin top */

 --brand-separator-margin-left: 145px !important; /* define separator margin left */

 --logopath-responsive: url('logo_2488_800055_First Community Bank.gif');  /* define logo path if needed for responsive */ 

  --logo-height-responsive: 36px !important; /* define logo height for responsive */

  --logo-width-responsive: 150px !important; /* define logo width for responsive */

  --logo-margin-bottom-responsive: -30px !important; /* define margin bottom for responsive */

  --logo-margin-left-responsive: -10px !important; /* define margin left for responsive */

  --logo-margin-top-responsive: 0px !important; /* define margin top if needed for responsive */

  --brand-title-margin-left-responsive: 155px !important; /* define brand title margin left for responsive */

  --brand-title-margin-top-responsive: -26px !important; /* define brand title margin top for responsive */

  --brand-separator-margin-left-responsive: 145px !important; /* define separator margin left for responsive */

} 

/*Button color, outline of button when highlighted: */  

/* Buttons */   

[mat-raised-button][fisStyle].mat-primary { 

  --ruf-button-solid-bg-color: var(--themecolor) !important; 

  --ruf-button-solid-border-color: var(--themecolor) !important; 

} 

.mdc-button.mdc-button--raised[fisStyle]:not([disabled]) { 

  border-color: var(--themecolor) !important; 

  background-color: var(--themecolor) !important; 

  color: var(--themetextcolor) !important; 

} 

.mdc-button.mdc-button--raised[fisStyle]:not([disabled]):hover { 

  border-color: var(--themecolor) !important; 

  background-color: var(--themehovercolor) !important; 

  color: var(--themetexthovercolor) !important; 

} 

[mat-stroked-button][fisStyle].mat-primary { 

  --ruf-button-outlined-focus-bg-color: var(--themecolor) !important; 

  --ruf-button-outlined-hover-bg-color: var(--themecolor) !important; 

  --ruf-button-outlined-pressed-bg-color: var(--themecolor) !important; 

  --ruf-button-outlined-border-color: var(--themecolor) !important; 

  --ruf-button-solid-color: var(--themetextcolor) !important; 

} 

 .mat-mdc-raised-button:not(:disabled), [mat-raised-button][fisStyle].mat-primary { 

  --ruf-button-solid-color: var(--themetextcolor) !important; 

} 

 .mat-mdc-raised-button:not(:disabled), [mat-raised-button][fisStyle].mat-primary:hover { 

  --ruf-button-solid-color: var(--themehovercolor) !important; 

} 

.mat-mdc-raised-button:not(:disabled):hover, [mat-raised-button][fisStyle].mat-primary:hover, .mdc-button.mdc-button--raised[fisStyle]:not([disabled]):hover, 

.mdc-button.mdc-button--outlined[fisStyle]:not([disabled]):hover, .mdc-button.mdc-button--outlined[fisStyle]:not([disabled]):active, .mdc-button.mdc-button--raised[fisStyle]:not([disabled]):active { 

  --ruf-button-solid-interactive-state-color: var(--themetextcolor) !important; 

  --ruf-button-solid-hover-color: var(--themetextcolor) !important; 

  --ruf-button-outlined-hover-color: var(--themetextcolor) !important; 

  --ruf-button-solid-pressed-color: var(--themetextcolor) !important; 

  --ruf-button-outlined-pressed-color: var(--themetextcolor) !important; 

} 

  

[mat-stroked-button][fisStyle].mat-primary, .mdc-button.mdc-button--outlined[fisStyle]:not([disabled]) { 

  --ruf-button-outlined-interactive-state-bg-color: var(--themecolor) !important; 

  --ruf-button-outlined-border-color: var(--themecolor) !important; 

  --ruf-button-outlined-interactive-state-color: var(--themetextcolor) !important; 

} 

 

/* Radio button in Preferences page of site: */  

 /* Radio Buttons */   

  

.mat-mdc-radio-group[fisStyle] .mat-mdc-radio-button.mat-primary { 

  --ruf-radio-selected-icon-color: var(--themecolor) !important; 

  } 

  

.mat-mdc-radio-group[fisStyle] .mat-mdc-radio-button.mat-primary { 

  --mdc-radio-selected-icon-color: var(--themecolor) !important; 

  --mdc-radio-selected-pressed-icon-color: var(--themecolor) !important; 

  --mdc-radio-selected-focus-icon-color: var(--themecolor) !important; 

  --mdc-radio-selected-hover-icon-color: var(--themecolor) !important; 

} 

  

/* Hide Advertisement panel button: */  

 /* Advertisement Panel */   

.ad-toggle-icon { 

  background-color: var(--themecolor) !important; 

} 

  

.ad-toggle-icon { 

  color: var(--themetextcolor) !important 

} 

  

/* Advertisement carousal radio buttons: */  

 /* Carousal */  

#my-carousal .ruf-carousel-indicator-selected.mat-mdc-icon-button { 

  background-color: var(--themecolor) !important; 

} 

  

  

/* Spinner when data is loading */  

 /* Spinner */  

.mat-mdc-progress-spinner .mdc-circular-progress__determinate-circle, .mat-mdc-progress-spinner .mdc-circular-progress__indeterminate-circle-graphic { 

    stroke: var(--themecolor) !important; 

} 

  

/*  Side Menu in the application */  

 /* Side Menu */   

.ruf-sidemenu:not(.ruf-sidemenu-rtl).ruf-menubar-inkbar-start .ruf-menubar-item-active:not(.ruf-active), .ruf-sidemenu-popup-backdrop + * .mat-menu-panel:not(.ruf-sidemenu-rtl).ruf-menubar-inkbar-start .ruf-menubar-item-active:not(.ruf-active) { 

  border-bottom-color: transparent; 

  border-top-color: var(--themecolor) !important; 

  border-left-color: var(--themecolor) !important; 

  border-right-color: transparent; 

} 

  

.ruf-sidemenu .ruf-menu-item.ruf-toggle-chevron:after { 

  color: var(--themecolor) !important; 

} 

  

/* Text fields in Login Page */  

 /* text fields */  

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-text-field__input { 

  caret-color: var(--themecolor) !important; 

} 

  

html { 

  --mdc-filled-text-field-caret-color: var(--themecolor) !important; 

  --mdc-filled-text-field-focus-active-indicator-color: var(--themecolor) !important; 

  --mdc-filled-text-field-focus-label-text-color: var(--themecolor) !important; 

} 

  

/* Check boxes background color and icon color */  

 /* Check Boxes */  

.mat-mdc-checkbox[fisStyle].mat-primary { 

  --ruf-checkbox-background-container-color: var(--themecolor) !important; 

  --ruf-checkbox-checkbox-background-container-color: var(--themecolor) !important; 

  --ruf-checkbox-disabled-selected-checkmark-color: var(--themetextcolor) !important; 

  --ruf-checkbox-selected-checkmark-color: var(--themetextcolor) !important; 

} 

  

.mat-mdc-checkbox[fisStyle].mat-primary:focus { 

  background-color: var(--themecolor) !important; 

} 

  

mat-pseudo-checkbox.mat-pseudo-checkbox { 

  --mat-full-pseudo-checkbox-selected-icon-color: var(--themecolor) !important; 

  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--themecolor) !important; 

} 

  

.mat-pseudo-checkbox-checked { 

  background: var(--themecolor) !important; 

} 

  

.mat-pseudo-checkbox-checked:after, .mat-pseudo-checkbox-indeterminate:after { 

  color: var(--themetextcolor) !important; 

} 

  

/* Dropdown and Date picker branding on Advanced Search panel */  

 /* Dropdown */  

.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text { 

  --mat-option-selected-state-label-text-color: var(--themecolor) !important; 

} 

  

/* Date Picker */ 

  

.mat-datepicker-popup .mat-datepicker-content .mat-calendar.fis-style .mat-calendar-body-cell-content.mat-calendar-body-today, .mat-datepicker-popup .mat-datepicker-content .mat-calendar .mat-calendar-body-cell-content.mat-calendar-body-today { 

  --ruf-boxed-datepicker-panel-cell-today-outline-color: var(--themecolor) !important; 

} 

  

.mat-datepicker-popup .mat-datepicker-content .mat-calendar.fis-style .mat-calendar-body-cell-content.mat-calendar-body-selected, .mat-datepicker-popup .mat-datepicker-content .mat-calendar .mat-calendar-body-cell-content.mat-calendar-body-selected { 

  --ruf-datepicker-panel-cell-selected-container-color: var(--themecolor) !important; 

  --ruf-datepicker-panel-cell-selected-color: var(--themetextcolor) !important; 

} 

  

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) { 

  --ruf-boxed-datepicker-panel-cell-today-outline-color: var(--themecolor) !important; 

} 

  

.mat-calendar-body-selected { 

  --mat-datepicker-calendar-date-selected-state-background-color: var(--themecolor) !important; 

  --mat-datepicker-calendar-date-selected-state-text-color: var(--themetextcolor) !important; 

} 

  

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) { 

  border-color: var(--themecolor) !important; 

} 

  

.mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled), .mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled) { 

  --ruf-boxed-datepicker-panel-header-icon-color: var(--themecolor) !important; 

} 

  

.mat-datepicker-popup .mat-datepicker-content .mat-calendar.fis-style .mat-calendar-body-cell-content.mat-calendar-body-today, .mat-datepicker-popup .mat-datepicker-content .mat-calendar .mat-calendar-body-cell-content.mat-calendar-body-today { 

  --mat-datepicker-calendar-date-outline-color: var(--themecolor) !important; 

  outline-color: var(--themecolor) !important; 

} 

  

.mat-datepicker-popup .mat-datepicker-content .mat-calendar.fis-style .mat-calendar-body-cell-content.mat-calendar-body-today:not(.mat-calendar-body-selected):hover, .mat-datepicker-popup .mat-datepicker-content .mat-calendar .mat-calendar-body-cell-content.mat-calendar-body-today:not(.mat-calendar-body-selected):hover { 

  background-color: none !important; 

} 

  

.mat-datepicker-content .mat-calendar-previous-button:not(.mat-mdc-button-disabled), .mat-datepicker-content .mat-calendar-next-button:not(.mat-mdc-button-disabled) { 

  color: var(--themecolor) !important; 

} 

  

.mat-mdc-form-field.mat-focused .mat-mdc-select-arrow { 

  color: var(--themecolor) !important; 

} 

  

/* Print button on document view */ 

.toolbar .mat-mdc-button-persistent-ripple { 

  background-color: var(--themecolor) !important; 

} 

  

.toolbar .mat-mdc-button > .mat-icon { 

  color: var(--themetextcolor) !important; 

} 

  

.mat-mdc-list-option { 

  --mdc-checkbox-selected-hover-icon-color: var(--themecolor) !important; 

  --mdc-checkbox-selected-icon-color: var(--themecolor) !important; 

  --mdc-checkbox-selected-pressed-icon-color: var(--themecolor) !important; 

} 

  

/* Responsive design filter and sorting icon */  

  

.mat-mdc-fab[fisStyle].mat-accent, .mat-mdc-mini-fab[fisStyle].mat-accent { 

  --ruf-button-fab-bg-color: var(--themecolor); 

  --ruf-button-fab-border-color: var(--themecolor); 

  --ruf-button-fab-icon-color: var(--themetextcolor); 

} 

  

[mat-mini-fab][fisStyle].mat-accent { 

  --mdc-fab-small-container-color: var(--themecolor); 

  --ruf-button-fab-border-color: var(--themecolor); 

  --mat-fab-small-foreground-color: var(--themetextcolor); 

} 

  

.mat-mdc-mini-fab[fisStyle].mat-accent:hover { 

  background-color: var(--themehovercolor); 

  color: var(--themetexthovercolor); 

} 

  

.fis-icon-menu-drop.mat-icon, .fis-icon-menu-drop.mat-icon.mat-primary { 

  color: var(--themecolor) !important; 

} 

.ruf-banner.fis-override .ruf-banner-brand .ruf-banner-brand-logo.fis-logo { background-image: var(--logopath) !important; } 

@media(max-width: 1000px){ .ruf-banner.fis-override .ruf-banner-brand .ruf-banner-brand-logo.fis-logo { background-image: var(--logopath-responsive) !important; } }