:root {
  --wm-bg: #d6e3f0;
  --wm-surface: #f7f9fc;
  --wm-card: #ffffff;
  --wm-line: #c9d4e2;
  --wm-text-900: #1f2b3e;
  --wm-text-700: #445871;
  --wm-text-500: #70839a;
  --wm-blue-700: #0f5aa8;
  --wm-blue-600: #1670c2;
  --wm-blue-500: #1f8ddd;
  --wm-blue-200: #dcebf8;
  --wm-btn-dark: #081636;
  --wm-red: #e22a2a;
  --wm-radius-xl: 22px;
  --wm-radius-lg: 16px;
  --wm-radius-md: 12px;
  --wm-shadow: 0 16px 34px rgba(27, 47, 74, 0.12);
  --wm-font-sans: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wm-fs-11: 11px;
  --wm-fs-12: 12px;
  --wm-fs-14: 14px;
  --wm-fs-16: 16px;
  --wm-fs-18: 18px;
  --wm-fs-20: 20px;
  --wm-fs-24: 24px;
  --wm-fs-30: 30px;
  --wm-fw-500: 500;
  --wm-fw-600: 600;
  --wm-fw-700: 700;
  --wm-lh-ui: 1.45;
  --wm-lh-editor: 1.55;
  --wm-track-tight: -0.015em;
  --wm-track-wide: 0.06em;
}

body.app-modern {
  font-family: var(--wm-font-sans);
  font-size: var(--wm-fs-14);
  line-height: var(--wm-lh-ui);
  font-weight: var(--wm-fw-600);
  background: var(--wm-bg);
  color: var(--wm-text-900);
}

h1,
h2,
h3,
h4,
h5,
h6,
.card-header h5,
.page-header-title h5 {
  font-family: var(--wm-font-sans);
  font-weight: var(--wm-fw-700);
  color: var(--wm-text-900);
}

.loader-bg {
  background: #edf3f9;
}

.pcoded-navbar {
  background: #f4f7fb;
  border-right: 1px solid var(--wm-line);
  box-shadow: none;
}

.pcoded-navbar .navbar-brand {
  background: #f4f7fb;
  border-bottom: 1px solid var(--wm-line);
  min-height: 126px;
  padding-top: 18px;
  padding-bottom: 12px;
}

.pcoded-navbar .navbar-brand .b-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow: hidden;
}

.pcoded-navbar .navbar-brand .b-brand img {
  display: block;
  width: 52px;
  max-width: 52px;
  height: 52px;
  object-fit: contain;
  flex: 0 0 52px;
}

.pcoded-navbar .navbar-brand .b-title {
  font-size: var(--wm-fs-24);
  font-weight: var(--wm-fw-700);
  color: #18263a;
  letter-spacing: var(--wm-track-tight);
  line-height: 1.1;
}

.pcoded-navbar .brand-subtitle {
  display: block;
  font-size: var(--wm-fs-18);
  color: var(--wm-text-500);
  margin-top: 2px;
  font-weight: var(--wm-fw-600);
}

.pcoded-navbar .logo-thumb {
  display: none;
}

.pcoded-navbar .pcoded-inner-navbar li.pcoded-menu-caption label {
  color: var(--wm-text-500);
  text-transform: uppercase;
  letter-spacing: var(--wm-track-wide);
  font-size: var(--wm-fs-12);
  font-weight: var(--wm-fw-600);
}

.pcoded-navbar .pcoded-inner-navbar li > a {
  color: #25384f;
  border-radius: 12px;
  margin: 0 10px 6px;
  font-weight: var(--wm-fw-600);
}

.pcoded-navbar .pcoded-inner-navbar li > a .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar li > a .pcoded-micon i {
  color: #263a53;
}

.pcoded-navbar .pcoded-inner-navbar li.active > a,
.pcoded-navbar .pcoded-inner-navbar li > a:hover {
  background: var(--wm-blue-200);
  color: #0e3d75;
}

.pcoded-navbar .pcoded-inner-navbar li.active > a .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar li.active > a .pcoded-micon i,
.pcoded-navbar .pcoded-inner-navbar li > a:hover .pcoded-micon,
.pcoded-navbar .pcoded-inner-navbar li > a:hover .pcoded-micon i {
  color: var(--wm-blue-600);
}

.pcoded-navbar .pcoded-submenu {
  background: transparent;
}

.pcoded-header {
  background: #f4f7fb;
  border-bottom: 1px solid var(--wm-line);
  box-shadow: none;
}

.main-search .input-group {
  background: #fff;
  border: 1px solid var(--wm-line);
  border-radius: 12px;
  overflow: hidden;
}

.main-search .form-control {
  border: 0;
  min-height: 48px;
  color: var(--wm-text-700);
}

.main-search .search-btn {
  background: var(--wm-blue-500);
  border: 0;
  color: #fff;
}

.pcoded-main-container {
  background: transparent;
}

.pcoded-content {
  background: transparent;
  padding-top: 20px;
}

.page-wrapper {
  background: #eef4fa;
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius-xl);
  box-shadow: var(--wm-shadow);
  padding: 18px;
}

.page-header-title h5 {
  font-size: var(--wm-fs-30);
  line-height: 1.15;
  letter-spacing: var(--wm-track-tight);
}

.page-header .breadcrumb,
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a,
.text-muted {
  color: var(--wm-text-500) !important;
}

.card {
  background: #fff;
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius-lg);
  box-shadow: none;
}

.card .card-header {
  background: #f9fbfe;
  border-bottom: 1px solid var(--wm-line);
}

.card .card-header h5 {
  font-size: var(--wm-fs-20);
}

.card .card-body {
  background: #fff;
}

.dashboard-panel {
  border: 1px solid var(--wm-line);
  border-radius: var(--wm-radius-lg);
  margin-bottom: 1rem;
  background: #fff;
}

.dashboard-panel .card-header {
  background: #f8fbfe;
  border-bottom: 1px solid var(--wm-line);
}

.social-widget-card .card-body-big {
  border-radius: 14px;
}

.bg-facebook {
  background: linear-gradient(145deg, #1f68b5 0%, #2157a2 100%) !important;
}

.bg-linkedin {
  background: linear-gradient(145deg, #1f95d7 0%, #1f76bf 100%) !important;
}

.bg-googleplus {
  background: linear-gradient(145deg, #9fb3c9 0%, #7189a4 100%) !important;
}

.bg-success {
  background: linear-gradient(145deg, #2a8fc4 0%, #256fa0 100%) !important;
}

.btn {
  border-radius: 12px;
  font-weight: var(--wm-fw-600);
}

.btn-primary {
  background: linear-gradient(145deg, var(--wm-blue-600), var(--wm-blue-500));
  border-color: var(--wm-blue-600);
}

.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(145deg, var(--wm-blue-700), var(--wm-blue-600));
  border-color: var(--wm-blue-700);
}

.btn-outline-primary {
  color: var(--wm-blue-700);
  border-color: #a8c3df;
}

.btn-outline-primary:hover {
  background: var(--wm-blue-700);
  border-color: var(--wm-blue-700);
}

.btn-outline-secondary {
  color: var(--wm-text-700);
  border-color: var(--wm-line);
}

.form-control,
.custom-select {
  border-radius: 12px;
  border-color: #b7c8dc;
  min-height: 44px;
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--wm-blue-500);
  box-shadow: 0 0 0 0.18rem rgba(31, 141, 221, 0.2);
}

.table {
  border-radius: 12px;
  overflow: hidden;
}

.table thead th {
  border-bottom: 1px solid var(--wm-line);
  background: #edf4fb;
  color: #3c526d;
  letter-spacing: var(--wm-track-wide);
  text-transform: uppercase;
  font-size: var(--wm-fs-12);
}

.table td,
.table th {
  border-top-color: #e2ebf4;
  vertical-align: middle;
}

.badge.badge-success {
  background: #d6ebf8;
  color: #1f5e9d;
}

.badge.badge-danger {
  background: #f7d9df;
  color: #8e3442;
}

.modal-content {
  border: 1px solid var(--wm-line);
  border-radius: 14px;
}

.toast.notification {
  border: 1px solid var(--wm-line);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(31, 66, 104, 0.14);
}

.footer-fab .b-bg {
  background: linear-gradient(145deg, var(--wm-blue-600), var(--wm-blue-500));
}

.auth-wmail {
  min-height: 100vh;
  background: #c6d6e8;
  display: grid;
  place-items: center;
  padding: 1rem;
}

.auth-wmail-card {
  width: min(100%, 580px);
  background: #fff;
  border: 1px solid #c9d4e0;
  border-radius: 20px;
  box-shadow: 0 18px 34px rgba(19, 48, 81, 0.16);
  padding: 2rem 2.1rem;
}

.auth-wmail-top {
  display: flex;
  justify-content: flex-end;
}

.auth-lang {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.auth-lang span {
  color: #6d8098;
  font-weight: var(--wm-fw-700);
  font-size: var(--wm-fs-24);
}

.auth-lang .active {
  color: #fff;
  background: var(--wm-blue-500);
  border-radius: 8px;
  padding: 0.15rem 0.55rem;
}

.auth-logo {
  text-align: center;
  margin-top: 0.8rem;
  margin-bottom: 1.4rem;
}

.auth-logo img {
  max-width: 150px;
}

.auth-wmail h1 {
  margin: 0;
  font-size: var(--wm-fs-30);
  line-height: 1.15;
  letter-spacing: var(--wm-track-tight);
  font-weight: var(--wm-fw-700);
}

.auth-wmail .auth-sub {
  color: #63788f;
  margin-bottom: 1.35rem;
  font-size: var(--wm-fs-24);
  font-weight: var(--wm-fw-600);
}

.auth-wmail .form-control {
  min-height: 60px;
  border-radius: 18px;
  border: 1px solid #b9c8d8;
  font-size: var(--wm-fs-14);
  line-height: var(--wm-lh-editor);
  font-weight: var(--wm-fw-600);
  color: #475f79;
  padding-left: 1.3rem;
}

.auth-wmail .form-control::placeholder {
  color: #8a9bad;
}

.auth-wmail .btn-login {
  min-height: 62px;
  border: 0;
  border-radius: 18px;
  background: var(--wm-btn-dark);
  color: #fff;
  font-size: var(--wm-fs-20);
  font-weight: var(--wm-fw-700);
  letter-spacing: var(--wm-track-tight);
  width: 100%;
  margin-top: 0.4rem;
}

.auth-wmail .btn-login:hover,
.auth-wmail .btn-login:focus {
  background: #0b214f;
  color: #fff;
}

.auth-wmail .alert {
  border-radius: 12px;
  margin-top: 1rem;
}

@media (max-width: 991px) {
  .pcoded-main-container {
    margin-left: 0;
  }

  .page-wrapper {
    padding: 12px;
    border-radius: 16px;
  }

  .page-header-title h5 {
    font-size: var(--wm-fs-24);
  }

  .auth-wmail-card {
    padding: 1.4rem;
    border-radius: 16px;
  }

  .auth-wmail h1 {
    font-size: var(--wm-fs-30);
  }

  .auth-wmail .auth-sub {
    font-size: var(--wm-fs-20);
  }

  .auth-wmail .form-control,
  .auth-wmail .btn-login {
    min-height: 50px;
    font-size: var(--wm-fs-14);
    border-radius: 14px;
  }
}