/*................Theme.....................*/
:root{
    --primary-color:#405189;
    --gray-color:#f1f1f2;
    --white-color:#FFF;

    --primary-color-hover:#6472a1;

    --header-bg-color:var(--gray-color);
    --header-text-color:var(--primary-color);

    --svg-icon-color:var(--corporate-svg-icon-color);
    --font-icon-color:var(--corporate-font-icon-color);
    --font-icon-hover-color:var(--corporate-font-icon-hover-color);

    
    /* white color */
    --button-img-secondary:brightness(0) saturate(100%) invert(100%) sepia(81%) saturate(0%) hue-rotate(313deg) brightness(104%) contrast(100%);
    --button-text-secondary: var(--white-color);
    
}

/*....Header Section....*/

.page-header{
    background: var(--header-bg-color) !important;
    .store-name{ color: var(--header-text-color) ;}
    h3{ color: var(--header-text-color) !important; font-size: 20px; text-align: center; }
    h6{ color: var(--header-text-color) !important; }
    .store-user{ color: var(--header-text-color) !important; }
    .more-log{ color: var(--header-text-color) !important; }
}
.header-icon{ 
    width: 20px;
    filter: var(--svg-icon-color);
}
.refresh-icon{
    filter: var(--svg-icon-color);
}
.drawer-icon {
    color: var(--primary100);
    img{
        filter: var(--svg-icon-color);
    }
}



.header-text {
    color: var(--primary-color) !important;
}
.box-bg{
    background-color:var(--primary-color) !important;
    img{
        filter: var(--button-img-secondary);
    }
}
.header-icon{ 
    width: 20px;
    filter: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(2730%) hue-rotate(189deg) brightness(94%) contrast(86%);
}
.refresh-icon{
    filter:  brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(2730%) hue-rotate(189deg) brightness(94%) contrast(86%);
}
.drawer-icon {
    color: var(--primary100);
    img{
        filter: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(2730%) hue-rotate(189deg) brightness(94%) contrast(86%);
    }
}

/*....End Header Section....*/

/*......Start Icon Color.......*/

.btn-icon{
    color: var(--primary-color) !important ;
}
.btn-icon:hover{
    color: var(--primary-color) !important ;
}

/*......End Icon Color.......*/



.list-inline-item{
    color: var(--primary-color);
}
/* Breadcrumb */
.breadcrumb-item{
    color: var(--primary-color);
}
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--primary-color) !important;
}
/* For text only breadcrums */
.breadcrumb-item .breadcrumb-item-text {
    color: var(--primary-color) !important;
}

.date-filter-list ul li a.active, .date-filter-list ul li a:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}

.group-button.k-button-solid-base {
    color: var(--primary-color) !important;
    border-color: var(--primary20) !important;
    background-color: var(--white-color) !important;
}
.group-button.k-button-solid-base.k-selected {
    color: var(--white-color) !important;
    border-color: var(--primary-color) !important;
    background-color: var(--primary-color) !important;
}

/* Kendu Drawer Theme */

.k-drawer {
    background-color: var(--drawer) !important;
}

.k-drawer-item:hover,
.k-drawer-item.k-state-hover {
    color: #16406b;
    background: #bfccf7;
}

.k-drawer-item.k-selected {
    color: var(--white-color) !important;
    background-color: var(--primary-color) !important;
    img{
        filter: var(--button-img-secondary)
    }
}

.k-drawer-item.k-state-selected:hover,
.k-drawer-item.k-state-selected.k-state-hover {
    color: var(--icon-hover);
    background-color: var(--drawerHover);
}

.k-drawer-item {
    color: var(--primary-color) !important;
    img{
        width: 21px;
        filter: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(2730%) hue-rotate(189deg) brightness(94%) contrast(86%);
    }
}

.k-drawer-item.k-level-1 {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 28px;
  }
  .k-drawer-item.k-level-2 {
    padding-top: 0px;
    padding-bottom: 0px;
    line-height: 28px;
  }

  /*..................*/
  .btn-add, .button { background: var(--primary-color) !important; color: #fff;  }
  .btn-add:hover { background: var(--primary-color-hover) !important; color: #fff; }
  .k-dialog-titlebar { background-color: var(--primary-color) !important; color: var(--white-color) !important; }
  
  .btn-primary { 
  background: var(--primary-color) !important;
  img{
    filter: brightness(0) saturate(100%) invert(100%) sepia(81%) saturate(0%) hue-rotate(313deg) brightness(104%) contrast(100%) !important
  }
  &:hover{
      background: var(--primary-color-hover) !important;
      color: var(--white-color) !important;
  }
}