:root {
  /* custom color setting */
  /* main-color: 'icon','text','active'
  second-color: 'header-bg'
  third-color: 'aside-bg'
  fourth-color: 'hover-bg' */
  --main-color: #4165b0;
  --second-color: #fff;
  --third-color: #fff;
  --fourth-color: #ecf3ff;
  /* custom gradient color */
  --gradient-color-1: #4165b0;
  --gradient-color-2: #608fd1;
  --gradient-color-3: #9acaf1;
  --warning-color: #F29F05;
  --danger-color: #E53120;
  /* dynamic color theme，方式參考https://una.im/css-color-theming/  */
  --info-color: #0181EE;
  --primary-blue: #2250ac;
  --accent-blue: #0072FF;
  --gray-color-1: #666666;
  --gray-color-2: #cccccc;
  --gray-color-3: #dddddd;
  --gray-color-4: #f3f4f5;
}


/* Header */

#top-nav {
  background-color: var(--second-color);
}


/* gradient border bottom */

#top-nav.border-btm {
  height: 53px;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, #4165b0, #608fd1, #9acaf1);
  border-image: linear-gradient(to right, var(--gradient-color1-1), var(--gradient-color-2), var(--gradient-color-3));
  -moz-border-image: linear-gradient(to right, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
  -webkit-border-image: linear-gradient(to right, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
  -o-border-image: linear-gradient(to right, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3));
  border-image-slice: 1;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}

.brand img {
  height: 26px;
  width: auto;
}

#wrapper.sidebar-mini #top-nav .brand {
  width: auto;
}

.search-block .input-group {
  transition: all 0.3s;
}

/* .search-block .input-group:focus-within {
  border: 1px solid var(--main-color);
} */

.search-block .btn,
#top-nav .nav-notification>li>a,
#top-nav .nav-notification>li>a:hover,
#top-nav .nav-notification>li>a:focus {
  color: var(--main-color);
}

#top-nav .nav-notification>li.open a .header-icon-bg {
  background: var(--fourth-color);
}

#top-nav .nav-notification>li.open a.dropdown-toggle {
  color: var(--main-color);
}


/* Aside */

aside,
.collapse-mini ul,
aside .size-toggle {
  background-color: var(--third-color);
}

aside .size-toggle .btn,
aside .main-menu>ul>li>a,
aside .main-menu>ul>li.active>a,
aside .sub-list,
.collapse-mini ul li a {
  color: var(--main-color);
}

aside .size-toggle:hover .btn {
  color: var(--main-color);
}

aside .size-toggle .btn .icon-bar {
  background-color: var(--main-color);
}

aside .size-toggle:hover .btn .icon-bar,
aside .main-menu>ul>li>a .menu-hover {
  background-color: var(--main-color);
}

aside .main-menu>ul>li>a:hover,
aside .main-menu>ul>li>a:focus,
aside .sub-list:hover,
.collapse-mini ul li:hover {
  background-color: var(--fourth-color);
  color: var(--main-color);
}

aside .main-menu>ul>li>a:hover .sidebar-icon,
aside .main-menu>ul>li>a:focus .sidebar-icon,
aside .main-menu>ul>li.active>a .sidebar-icon {
  filter: none;
}

aside .sub-list.active,
.collapse-mini ul li a.active,
.collapse-mini ul li:hover a {
  background-color: var(--fourth-color);
  color: var(--main-color);
}

.svg path, .svg polygon, .svg rect, path.path, use.path, .path, polygon.path {
  fill: var(--main-color);
  transition: all 0.3s;
}

/* .svg polyline, .svg line, .svg ellipse, .svg circle {
  stroke: var(--main-color);
  transition: all 0.3s;
} */


/* Breadcrumb */

.dropdown-menu.tool-other li a,
.breadcrumb li.active a,
.breadcrumb li.copy>a:hover {
  color: var(--main-color);
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus,
.dropdown-menu li span:hover,
.dropdown-menu li span:focus,
a.btn.btn-round:hover,
a.btn.btn-round:focus,
a.btn.btn-round:hover .svg.add path,
a.btn.btn-round:focus .svg.add path {
  fill: rgb(235, 235, 235);
}

a.btn.btn-round {
  border-color: var(--main-color);
  padding: 4px 16px 4px 12px;
}

a.btn.btn-round span {
  vertical-align: super;
}

.tool li a.vertical-line {
  border-right: 1px solid var(--main-color);
}

.tool li a img {
  width: 22px
}

.tool li a img,
.breadcrumb-icon {
  filter: none;
}

.tool .svg:hover path {
  fill: #2a2a2a;
}

.dropdown-menu.tool-other li a img {
  filter: none !important;
}

.dropdown-menu.tool-other li a:hover {
  background-color: var(--fourth-color);
  color: var(--main-color);
}

.dropdown-menu.tool-other li a.svg:hover path {
  fill: var(--main-color);
}


/* Page Content */

#responsivetable td button.text-primary,
#responsivetable td button i.text-primary {
  color: var(--main-color);
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
  color: var(--main-color);
  border-bottom: 3px solid var(--main-color);
}

.table>tbody>tr>td {
  height: 54px;
  padding: 5px 8px;
}

.svg path {
  fill: var(--main-color);
}

#top-nav .nav-notification>li.open .avatar,
.avatar:hover,
.avatar:focus {
    border: 2px solid var(--fourth-color);
    transform: scale(1.1);
}

.btn.btn-primary-border {
  background: transparent;
  border: 1px solid var(--main-color);
  color: var(--main-color);
}

.btn-link:hover, .btn-link:focus {
  text-decoration: none;
  color: var(--main-color);
}

.text-primary {
  color: var(--main-color);
}

#show-document .loader-11, #show-loader .loader-11 {
  border-color: var(--fourth-color) var(--fourth-color) transparent transparent;
}

#show-document .loader-11:after, #show-loader .loader-11:after,
#show-document .loader-11:before, #show-loader .loader-11:before {
  border-color: transparent transparent var(--main-color) var(--main-color);
}

#show-document .loader-11:before, #show-loader .loader-11:before {
  border-color: #fff #fff transparent transparent;
}

aside .size-toggle:hover #sizetoggle label.btn {
  background: var(--fourth-color);
}

.ghost-btn {
  background-color: #fff;
  border: 1px solid var(--main-color);
  color: var(--main-color);
  padding: 8px;
  transition: all 0.2s;
}

.dropdown-menu.notification li:hover,
.dropdown-menu.notification li:focus,
.not-read {
    background-color: var(--third-color);
}

.dropdown-menu.notification li.delete-all,
.read {
    background-color: #fff;
}

.reg-caption {
  background: var(--third-color);
}

.label-checkbox a,
.label-checkbox a:hover,
.label-checkbox a:focus {
  color: var(--main-color);
}