:root {
  --home-page-font-color: black;

  --header-background-color: #0033a0;
  --user-icon-background-color: #a1b7f3;

  --sidebar-menu-background-color: #0033a0;
  --sidebar-high-lighted-menu-font-color: white;

  --table-header-background-color: #0033a0;
  --table-header-font-color: white;

  --btn-background-color: #0033a0;
  --btn-font-color: white;
  
  --btn-outline-color: #0033a0;
  --btn-background-on-hover: white;
  
  --popup-toast-msg-background-color : #0033a0 ; 
  --popup-toast-msg-font-color : white;

  --page-loader-color : #3f6ad8;

  --btn-disabled-background-color: #a1a1a1;
  --btn-disabled-color: white;
  --btn-disable-outline-color: #a1a1a1;

}

/* Login */

.dashboard-component-wrapper .navbar.navbar-default {
  background-color: var(--header-background-color);
  border-color: var(--header-background-color);
}

.dashboard-component-wrapper .profile-placeholder {
  background-color: var(--user-icon-background-color) !important ;
}

/* Home Pages */

h1.sign-in-title {
  color: var(--home-page-font-color) !important ;
}

.signin-component-wrapper .accept_termsandconditions {
  color: var(--home-page-font-color) !important ;
}

.signin-component-wrapper .forgot-password a {
  color: var(--home-page-font-color) !important ;
}

p.forgot-pass-text {
  color: var(--home-page-font-color) !important ;
}

/*Dash Board Sidebar*/

.dashboard-component-wrapper .sidebar .sidebar-nav .sidebar-nav-item a:hover,
.dashboard-component-wrapper .sidebar .sidebar-nav .sidebar-nav-item a.active {
  background: var(--sidebar-menu-background-color) !important;
  color: var(--sidebar-high-lighted-menu-font-color) !important ;
}


/* Buttons */
.custom-btn-color {
  border-color: var(--btn-outline-color) !important;
  color: var(--btn-outline-color) !important;
}
.custom-btn-color:hover,
.custom-btn-color:focus {
  background-color: var(--btn-outline-color) !important;
  color: var(--btn-background-on-hover) !important ;
}

.custom-btn-color.btn-fill {
  background-color: var(--btn-background-color) !important ;
  color: var(--btn-font-color) !important ;
}

.custom-btn-color.btn-fill:disabled {
 background-color: var(--btn-disabled-background-color) !important ;
 color: var(--btn-disabled-color) !important ;
 border-color: var(--btn-disable-outline-color) !important;
}


/* .custom-btn-color.btn-fill:hover{
    background-color: red !important;
    color: var( --sidebar-high-lighted-menu-font-color) !important ;
   } */

/* for customer page */
.manage-user-component-wrapper .new_var a.custom-btn-color.btn-fill {
  background-color: var(--btn-background-color) !important ;
  color: var(--btn-font-color) !important ;
}

.manage-provider-component-wrapper .new_var a.custom-btn-color.btn-fill {
  background-color: var(--btn-background-color) !important ;
  color: var(--btn-font-color) !important ;
}

.btn-transparent-background{
  background-color: transparent !important;
}

/* Buttons End */
/* Tables  */
.custom-table-color#table_id thead tr {
  background-color: var(--table-header-background-color) !important ;
  color: var(--table-header-font-color) !important ;
}
/* RMA table */
.custom-table-color#table_id_rma_request thead tr {
  background-color: var(--table-header-background-color) !important ;
  color: var(--table-header-font-color) !important ;
}
/* Tables End  */

/* Signle  Device Page */
.tab-switch:checked + .tab-label.custom-input-color {
  background-color: var(--table-header-background-color) !important ;
  color: var(--table-header-font-color) !important ;
}


.fancy-toast-background.custom-toast-background{
  background-color: var( --popup-toast-msg-background-color) !important ;
  color: var(--popup-toast-msg-font-color) !important ;
}


/* Confirmation Popup */ 
.react-confirm-alert div button {
  border-color: var(--btn-outline-color) !important;
  color: var(--btn-outline-color) !important;
}
.react-confirm-alert div button:hover , .react-confirm-alert div button:focus  {
  background-color: var(--btn-outline-color) !important;
  color: var(--btn-background-on-hover) !important ;
}
/* Confirmation Popup */ 

/*Loader Color */
.loaderset .loader .ball-spin-fade-loader > div {
  background-color: var(--page-loader-color) !important;
}
/* End Loader Color  */
.react-bootstrap-table table.custom-table-color thead {
  background-color: var(--table-header-background-color) !important ;
  color: var(--table-header-font-color) !important ;
    }