:root {
  --iwatt-nav-bg: #08251f;
  --iwatt-nav-bg-elevated: #0d3328;
  --iwatt-nav-border: #176044;
  --iwatt-nav-hover: #124a37;
  --iwatt-nav-active: #1b5b40;
  --iwatt-accent: #54c878;
  --iwatt-accent-strong: #35ad63;
  --iwatt-text: #edf8f1;
  --iwatt-muted: #9fc7ad;
}

.page-container .el-header[data-v-761e9296] {
  background: var(--iwatt-nav-bg) !important;
  border-bottom: 1px solid var(--iwatt-nav-border) !important;
  box-shadow: 0 1px 0 rgba(84, 200, 120, 0.12) !important;
  color: var(--iwatt-text) !important;
}

.page-container .el-header[data-v-761e9296] > span {
  align-items: center !important;
  color: var(--iwatt-text) !important;
  display: flex !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

.page-container .el-header img[data-v-761e9296] {
  content: url("/img/iwatt-logo-square-512.20260608.png") !important;
  height: 34px !important;
  object-fit: contain !important;
  padding: 0 10px 0 0 !important;
  position: relative !important;
  top: 0 !important;
  width: 34px !important;
}

#subheader[data-v-761e9296] {
  background: transparent !important;
  border-radius: 4px !important;
  color: var(--iwatt-muted) !important;
  margin-left: 8px !important;
}

#subheader[data-v-761e9296]:hover {
  background: var(--iwatt-nav-hover) !important;
  color: var(--iwatt-accent) !important;
}

.page-container .el-container .el-aside[data-v-761e9296],
.el-menu[data-v-761e9296],
.el-menu {
  background-color: var(--iwatt-nav-bg) !important;
}

.page-container .el-container .el-aside[data-v-761e9296] {
  border-top: 1px solid var(--iwatt-nav-border) !important;
}

.el-menu-item,
.el-submenu__title {
  background-color: var(--iwatt-nav-bg) !important;
  color: var(--iwatt-text) !important;
}

.el-menu-item i,
.el-submenu__title i {
  color: var(--iwatt-muted) !important;
}

.el-menu-item:hover,
.el-submenu__title:hover,
.el-menu-item:focus,
.el-submenu__title:focus {
  background-color: var(--iwatt-nav-hover) !important;
  color: var(--iwatt-text) !important;
}

.el-menu-item:hover i,
.el-submenu__title:hover i,
.el-menu-item.is-active i {
  color: var(--iwatt-accent) !important;
}

.el-menu-item.is-active {
  background: linear-gradient(90deg, rgba(84, 200, 120, 0.2), var(--iwatt-nav-bg-elevated)) !important;
  border-left: 3px solid var(--iwatt-accent) !important;
  color: var(--iwatt-accent) !important;
}

.btn[data-v-761e9296] {
  background: var(--iwatt-nav-bg-elevated) !important;
  border: 1px solid var(--iwatt-nav-border) !important;
  color: var(--iwatt-muted) !important;
}

.btn[data-v-761e9296]:hover {
  background: var(--iwatt-nav-hover) !important;
  color: var(--iwatt-text) !important;
}

.big {
  background-color: #061f1a !important;
}

.left .box3,
.login .box span:nth-child(2),
.content .changePassword div {
  color: var(--iwatt-accent) !important;
}

.login {
  background: rgba(8, 37, 31, 0.96) !important;
  border: 1px solid rgba(84, 200, 120, 0.28) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24) !important;
}

.login .tabs .tabItem .activeBg {
  background: linear-gradient(90deg, var(--iwatt-accent), rgba(84, 200, 120, 0)) !important;
}

.login .login-btn,
.login .el-button.login-btn {
  background: var(--iwatt-accent-strong) !important;
  border-color: var(--iwatt-accent-strong) !important;
  color: #fff !important;
}

.login .login-btn:hover,
.login .el-button.login-btn:hover {
  background: var(--iwatt-accent) !important;
  border-color: var(--iwatt-accent) !important;
}

.el-form-item .inputContainer {
  border-bottom-color: rgba(84, 200, 120, 0.42) !important;
}

.el-form-item .inputContainer input {
  color: var(--iwatt-text) !important;
}