/*
 * noptime look for the admin panel. Loaded after the theme (BonVue): it only
 * overrides colours, type, radii and the logo, so every page keeps working.
 * Palette from the app: violet #702DD4, green #22B573, background #F2F6FF.
 */
:root {
  --np-violet: #702DD4;
  --np-violet-dark: #5A22AE;
  --np-violet-tint: #F4EBFD;
  --np-green: #22B573;
  --np-green-tint: #E4F7EE;
  --np-red: #E5484D;
  --np-ink: #1E1D3A;
  --np-sub: #6F6E80;
  --np-line: #E6EAF5;
  --np-bg: #F2F6FF;
  --np-radius: 16px;
  --np-grad: linear-gradient(135deg, #3BB8FF 0%, #702DD4 60%, #B027E1 100%);
}

/* type and page */
body, button, input, select, textarea, .heading-font-family,
h1, h2, h3, h4, h5, h6, .page-title-heading, .widget-title {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
}
body, .main-wrapper, .content-wrapper, .wrapper { background: var(--np-bg) !important; color: var(--np-ink); }
a { color: var(--np-violet); }
a:hover { color: var(--np-violet-dark); }
.text-muted { color: var(--np-sub) !important; }

/* top bar */
.navbar, .header-light .navbar { background: #fff !important; border-bottom: 1px solid var(--np-line); box-shadow: none !important; }
.navbar-header, .navbar-brand-dark .navbar-header { background: #fff !important; border-right: 1px solid var(--np-line); }
.navbar-brand img.logo-expand { height: 30px; width: auto; }
.navbar-brand img.logo-collapse { height: 34px; width: 34px; border-radius: 10px; }
.header-light .navbar-nav > li > a, .navbar .list-icon { color: var(--np-ink) !important; }

/* side menu: light, like the app's web menu */
.site-sidebar, .sidebar-dark .site-sidebar { background: #fff !important; border-right: 1px solid var(--np-line); }
.sidebar-dark .side-menu li a, .side-menu li a { color: #3B3C43 !important; font-weight: 500; border-radius: 12px; margin: 2px 10px; }
.sidebar-dark .side-menu li:hover, .sidebar-dark .side-menu li.active { background: transparent !important; }
.sidebar-dark .side-menu > li:hover > a { background: var(--np-violet-tint) !important; color: var(--np-violet) !important; }
.sidebar-dark .side-menu > li.active > a, .sidebar-dark .side-menu li.active > a {
  background: var(--np-violet-tint) !important; color: var(--np-violet) !important; font-weight: 600;
}
.sidebar-dark .side-menu :not([class*="color-"]) > .list-icon,
.sidebar-dark .side-menu .menu-item-has-children > a::before { color: #8A8999 !important; }
.sidebar-dark .side-menu li.active > a .list-icon, .sidebar-dark .side-menu > li:hover > a .list-icon { color: var(--np-violet) !important; }
.sidebar-dark .side-menu li::before { border-color: transparent !important; }
.sidebar-dark .side-menu li ul a { color: var(--np-sub) !important; }
.sidebar-dark.sidebar-collapse .side-menu .sub-menu { background: #fff !important; border: 1px solid var(--np-line); border-radius: 12px; }

/* page title */
.page-title { background: transparent !important; border: 0 !important; padding-top: 22px; }
.page-title-heading, .page-title h5, .page-title-left h6 { color: var(--np-ink) !important; font-weight: 700 !important; }
.page-title .breadcrumb, .page-title-right .breadcrumb { background: transparent; }

/* cards */
.widget-bg, .widget-holder > .widget-bg, .card {
  background: #fff !important; border: 1px solid var(--np-line) !important;
  border-radius: var(--np-radius) !important; box-shadow: 0 3px 10px rgba(64, 74, 140, .05) !important;
}
.widget-heading { border-bottom: 1px solid var(--np-line) !important; }
.widget-title { font-weight: 600 !important; color: var(--np-ink) !important; }

/* buttons */
.btn { border-radius: 12px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; }
.btn-primary, .btn-info { background: var(--np-violet) !important; border-color: var(--np-violet) !important; color: #fff !important; }
.btn-primary:hover, .btn-info:hover { background: var(--np-violet-dark) !important; border-color: var(--np-violet-dark) !important; }
.btn-success { background: var(--np-green) !important; border-color: var(--np-green) !important; color: #fff !important; }
.btn-danger { background: var(--np-red) !important; border-color: var(--np-red) !important; color: #fff !important; }
.btn-default, .btn-secondary, .btn-light { background: #fff !important; border: 1px solid var(--np-line) !important; color: var(--np-ink) !important; }

/* forms */
.form-control, .custom-select, select.form-control {
  border-radius: 12px !important; border: 1px solid var(--np-line) !important; background: #fff !important;
  color: var(--np-ink) !important; box-shadow: none !important;
}
.form-control:focus { border-color: var(--np-violet) !important; box-shadow: 0 0 0 3px rgba(112, 45, 212, .12) !important; }
.form-control-line { border-width: 1px !important; padding: 10px 14px !important; }
label, .col-form-label { color: var(--np-sub); font-weight: 500; }

/* tables */
.table { color: var(--np-ink); }
.table thead th { background: #F7F7FA; color: var(--np-sub); font-weight: 600; border-bottom: 1px solid var(--np-line) !important; border-top: 0 !important; }
.table td { border-top: 1px solid var(--np-line) !important; vertical-align: middle !important; }
.table-hover tbody tr:hover, .table tbody tr:hover { background: #FAF7FF; }

/* badges, pagination, alerts */
.badge-primary, .badge-info { background: var(--np-violet-tint) !important; color: var(--np-violet) !important; }
.badge-success { background: var(--np-green-tint) !important; color: #137A4C !important; }
.badge-danger { background: #FDE8E8 !important; color: #B42328 !important; }
.badge { border-radius: 10px !important; font-weight: 600; }
.page-item.active .page-link { background: var(--np-violet) !important; border-color: var(--np-violet) !important; }
.page-link { color: var(--np-violet); border-radius: 10px; margin: 0 2px; border-color: var(--np-line); }
.alert { border-radius: 14px !important; }
.swal2-confirm, .swal-button--confirm { background: var(--np-violet) !important; border-radius: 12px !important; }
.swal2-popup, .swal-modal { border-radius: 20px !important; font-family: "Poppins", sans-serif !important; }

/* footer */
.footer { background: transparent !important; color: var(--np-sub) !important; border-top: 1px solid var(--np-line); }

/* login and password recovery */
.body-bg-full { background: var(--np-bg) !important; }
.login-left { background: #fff; }
.login-left h2 { color: var(--np-ink); font-weight: 700; }
.login-left .btn-primary { background: var(--np-grad) !important; border: 0 !important; padding: 12px 0; }
.login-right { background: var(--np-grad) !important; background-image: var(--np-grad) !important; }
.login-right .login-content img { width: 96px !important; height: 96px; border-radius: 24px; box-shadow: 0 16px 40px rgba(30, 29, 58, .25); margin-bottom: 18px; }
.login-right h2, .login-right p, .login-right a { color: #fff !important; }

/* page loader: a thin gradient bar on top instead of the theme's full-screen
   white veil with coloured dots, so the page shows at once */
body:after { display: none !important; }
.pace, .pace-active {
  position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  bottom: auto !important; height: 3px !important; width: 100% !important;
  display: block !important; background: transparent !important; z-index: 2000 !important; pointer-events: none;
}
.pace .pace-activity { display: none !important; }
.pace .pace-progress { position: fixed !important; top: 0; left: 0; height: 3px !important; background: var(--np-grad) !important; }
.pace-inactive { display: none !important; }

/* theme accent colours -> app accents */
.bg-primary { background-color: var(--np-violet) !important; }
.bg-info { background-color: var(--np-green) !important; }
.text-primary { color: var(--np-violet) !important; }
.text-info { color: var(--np-green) !important; }
.counter { color: var(--np-violet); font-weight: 700; }

/* numbers on the gradient summary block stay white */
.text-inverse .counter, .text-inverse h1, .text-inverse h2, .text-inverse h3, .text-inverse h4 { color: #fff !important; }

/* drop-downs: room for the text with the rounded padding */
select.form-control, .custom-select { height: auto !important; min-height: 46px; padding: 10px 14px !important; line-height: 1.4 !important; }