/*
 * Herald's chrome: the sidebar, the menu, the header and the page title.
 *
 * The template's shell is kept — its element ids are what its own script binds the drawers, the
 * minimise toggle and the scrolling to — and what is rebuilt is everything above that skeleton:
 * how large the menu reads, how an open page announces itself, how a card sits on the page. The
 * client asked for a larger menu font, larger images and screens that look less bare (§16).
 *
 * Every colour here comes from a token in herald-tokens.css, so this file names none, and both
 * themes follow from the one set of values.
 */
/* --- The sidebar, and the brand at the top of it --- */
.app-sidebar {
  border-right: 1px solid var(--color-border-subtle);
}
.app-sidebar .app-sidebar-logo {
  min-height: 86px;
  border-bottom: 1px solid var(--color-border-subtle);
}
/* The wordmark beside the logo: the product's name, which the logo alone does not say. */
.app-sidebar .herald-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.app-sidebar .herald-brand-name {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-primary);
}
.app-sidebar .herald-brand-role {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-tertiary);
}
/* Minimised, the sidebar keeps the mark and drops the words. */
[data-kt-app-sidebar-minimize="on"] .app-sidebar .herald-brand-text {
  display: none;
}
/* --- The menu: the thing the client reads first, so it is set larger --- */
.app-sidebar .menu > .menu-item {
  margin: 0.125rem 0.75rem;
}
.app-sidebar .menu .menu-link {
  min-height: 46px;
  padding: 0.6rem 0.85rem;
  border-radius: 0.625rem;
}
.app-sidebar .menu .menu-title {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.app-sidebar .menu .menu-icon i,
.app-sidebar .menu .menu-icon span {
  font-size: 1.35rem;
  color: var(--color-text-tertiary);
}
.app-sidebar .menu .menu-link:hover:not(.active) {
  background-color: var(--color-interactive-hover);
}
.app-sidebar .menu .menu-link:hover:not(.active) .menu-title,
.app-sidebar .menu .menu-link:hover:not(.active) .menu-icon i {
  color: var(--color-text-primary);
}
/*
 * The page you are on, which the guide asks to be obvious without taking over (§21). The bar down
 * its leading edge says it a second way, so the meaning does not rest on colour alone (§23).
 */
.app-sidebar .menu .menu-link.active {
  position: relative;
  background-color: var(--color-brand-tertiary);
}
.app-sidebar .menu .menu-link.active .menu-title {
  color: var(--color-brand-secondary);
  font-weight: 600;
}
.app-sidebar .menu .menu-link.active .menu-icon i,
.app-sidebar .menu .menu-link.active .menu-icon span {
  color: var(--color-brand-primary);
}
.app-sidebar .menu .menu-link.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 3px;
  border-radius: 3px;
  background-color: var(--color-brand-primary);
}
/* A submenu is one step down, and says so by size and indent rather than by another colour. */
.app-sidebar .menu .menu-sub .menu-link {
  min-height: 40px;
  padding-inline-start: 2.6rem;
}
.app-sidebar .menu .menu-sub .menu-title {
  font-size: 0.975rem;
}
.app-sidebar .menu .menu-arrow {
  color: var(--color-text-quaternary);
}
/* --- The header --- */
.app-header {
  border-bottom: 1px solid var(--color-border-subtle);
}
/* --- The page's own title, which every page opens with --- */
#kt_app_toolbar {
  padding-top: 1.75rem;
  padding-bottom: 1.25rem;
}
#kt_app_toolbar .page-title > h1,
#kt_app_toolbar .page-title > h2,
#kt_app_toolbar .page-title > h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
/* --- Cards: a line and the lightest of shadows, never a heavy one (guide §21) --- */
.app-main .card {
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}
.app-main .card > .card-header {
  border-bottom: 1px solid var(--color-border-subtle);
  min-height: 62px;
}
.app-main .card > .card-header .card-title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
/* --- The footer, which has nothing to say and should not say it loudly --- */
.app-footer {
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-tertiary);
}

/*
 * Herald design tokens.
 *
 * Two layers, as the colour guide asks for. The first is the semantic token set: every colour the
 * system means something by, named for the meaning and not the hue, with a value for each theme.
 * The second is a bridge to the Metronic theme this application is built on, which draws its
 * components from variables of its own; answering those with tokens moves the whole palette
 * without a single page having to change.
 *
 * Rules followed from the guide: components consume semantic tokens, never raw colour; light and
 * dark carry the same token names and differ only in value; status colours are kept for status and
 * are not reused as decoration or as chart series.
 *
 * The dark values apply through the data-theme attribute the layout already sets from the user's
 * own dark mode setting, so nothing new has to be wired up to switch them.
 *
 * Map tokens are deliberately absent: there is no map in the system yet, and the guide says to
 * introduce a group when the application needs the distinction, not before.
 */
:root {
  /* Brand — the product's identity, for primary actions and what is currently chosen. */
  --color-brand-primary: #D97706;
  --color-brand-secondary: #92400E;
  --color-brand-tertiary: #FEF3C7;
  --color-brand-foreground: #FFFFFF;
  /* Background — the large regions a page is laid out on. */
  --color-background-primary: #F8FAFC;
  --color-background-secondary: #F1F5F9;
  --color-background-tertiary: #E2E8F0;
  --color-background-quaternary: #CBD5E1;
  /* Surface — what sits on a background: cards, tables, dialogs, popups. */
  --color-surface-primary: #FFFFFF;
  --color-surface-secondary: #F8FAFC;
  --color-surface-tertiary: #F1F5F9;
  --color-surface-elevated: #FFFFFF;
  /* Text — a figure, its label and its metadata are not the same weight of information. */
  --color-text-primary: #0F172A;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748B;
  --color-text-quaternary: #94A3B8;
  --color-text-disabled: #CBD5E1;
  /* Icon — its own layer, though most of it follows the text it sits beside. */
  --color-icon-primary: var(--color-text-primary);
  --color-icon-secondary: var(--color-text-secondary);
  --color-icon-tertiary: var(--color-text-tertiary);
  --color-icon-disabled: var(--color-text-disabled);
  --color-icon-brand: var(--color-brand-primary);
  /* Border — default for inputs, subtle for cards and tables, muted for the quietest lines. */
  --color-border-default: #CBD5E1;
  --color-border-subtle: #E2E8F0;
  --color-border-muted: #F1F5F9;
  --color-border-focus: #D97706;
  /* Error — a fault, a failed save, an operation that destroys something. */
  --color-error-primary: #DC2626;
  --color-error-secondary: #FEF2F2;
  --color-error-foreground: #FFFFFF;
  --color-error-on-secondary: #B91C1C;
  /* Warning — a threshold crossed, something overdue, fuel running low. Not the brand. */
  --color-warning-primary: #D97706;
  --color-warning-secondary: #FFFBEB;
  --color-warning-foreground: #FFFFFF;
  --color-warning-on-secondary: #B45309;
  /* Success — it worked, it is healthy, it is running. */
  --color-success-primary: #16A34A;
  --color-success-secondary: #F0FDF4;
  --color-success-foreground: #FFFFFF;
  /* The shade a chip writes on its own tint: the primary is too light to read at that size. */
  --color-success-on-secondary: #15803D;
  /* Info — something worth saying that is neither good nor bad. */
  --color-info-primary: #2563EB;
  --color-info-secondary: #EFF6FF;
  --color-info-foreground: #FFFFFF;
  --color-info-on-secondary: #1D4ED8;
  /* Neutral — unknown, unavailable, not recorded. It must not read as either good or bad. */
  --color-neutral-primary: #64748B;
  --color-neutral-secondary: #F1F5F9;
  --color-neutral-foreground: #FFFFFF;
  --color-neutral-on-secondary: #475569;
  /* Interactive — what the pointer is over, what is being pressed, what is chosen. */
  --color-interactive-hover: #F1F5F9;
  --color-interactive-active: #E2E8F0;
  --color-interactive-selected: #FFF7ED;
  --color-interactive-disabled: #F1F5F9;
  /* Selection — a chosen row, vehicle or filter, and it must not look like hover. */
  --color-selection-background: #FFF7ED;
  --color-selection-foreground: var(--color-text-primary);
  --color-selection-border: var(--color-brand-primary);
  /* Focus — the keyboard's position, which is never removed for the sake of a cleaner page. */
  --color-focus-ring: rgba(217, 119, 6, 0.3);
  /* Disabled — still legible, still plainly not available; opacity alone will not do. */
  --color-disabled-background: #F1F5F9;
  --color-disabled-text: var(--color-text-disabled);
  --color-disabled-border: var(--color-border-subtle);
  --color-disabled-icon: var(--color-text-disabled);
  /* Overlay — what a dialog puts between itself and the page. Never opaque black. */
  --color-overlay-light: rgba(15, 23, 42, 0.08);
  --color-overlay-scrim: rgba(15, 23, 42, 0.2);
  --color-overlay-heavy: rgba(15, 23, 42, 0.6);
  /* Shadow — a short scale, and used sparingly. */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14);
  --shadow-xl: 0 24px 48px rgba(15, 23, 42, 0.18);
  /* Data visualisation — a palette of its own, so a series is never read as success or failure.
       Nothing in the system charts anything yet; these are here so the first chart has them. */
  --color-chart-1: #0EA5E9;
  --color-chart-2: #8B5CF6;
  --color-chart-3: #14B8A6;
  --color-chart-4: #EC4899;
  --color-chart-5: #6366F1;
  --color-chart-6: #64748B;
  --color-chart-7: #06B6D4;
  --color-chart-8: #A855F7;
  --color-chart-actual: var(--color-chart-1);
  --color-chart-target: var(--color-chart-6);
  --color-chart-forecast: var(--color-chart-2);
  --color-chart-plan: var(--color-chart-5);
  --color-chart-average: var(--color-chart-3);
  --color-chart-benchmark: var(--color-chart-4);
  /* Fleet — what a truck is doing, as aliases of the families above rather than colours of their
       own, so the day the warning hue changes the idle truck changes with it. */
  --color-fleet-running: var(--color-success-primary);
  --color-fleet-idle: var(--color-warning-primary);
  --color-fleet-stopped: var(--color-neutral-primary);
  --color-fleet-maintenance: var(--color-info-primary);
  --color-fleet-offline: var(--color-neutral-primary);
  --color-fleet-fault: var(--color-error-primary);
  --color-fleet-unknown: var(--color-neutral-primary);
}
[data-theme="dark"] {
  --color-brand-primary: #F59E0B;
  --color-brand-secondary: #FBBF24;
  --color-brand-tertiary: #451A03;
  --color-brand-foreground: #1F2937;
  --color-background-primary: #0B1120;
  --color-background-secondary: #111827;
  --color-background-tertiary: #1F2937;
  --color-background-quaternary: #374151;
  --color-surface-primary: #111827;
  --color-surface-secondary: #172033;
  --color-surface-tertiary: #1F2937;
  --color-surface-elevated: #243044;
  --color-text-primary: #F8FAFC;
  --color-text-secondary: #CBD5E1;
  --color-text-tertiary: #94A3B8;
  --color-text-quaternary: #64748B;
  --color-text-disabled: #475569;
  --color-border-default: #475569;
  --color-border-subtle: #334155;
  --color-border-muted: #1F2937;
  --color-border-focus: #F59E0B;
  --color-error-primary: #EF4444;
  --color-error-secondary: #450A0A;
  --color-error-foreground: #FFFFFF;
  --color-error-on-secondary: #FCA5A5;
  --color-warning-primary: #F59E0B;
  --color-warning-secondary: #451A03;
  --color-warning-foreground: #1F2937;
  --color-warning-on-secondary: #FBBF24;
  --color-success-primary: #22C55E;
  --color-success-secondary: #052E16;
  --color-success-foreground: #FFFFFF;
  --color-success-on-secondary: #4ADE80;
  --color-info-primary: #3B82F6;
  --color-info-secondary: #172554;
  --color-info-foreground: #FFFFFF;
  --color-info-on-secondary: #93C5FD;
  --color-neutral-primary: #94A3B8;
  --color-neutral-secondary: #1F2937;
  --color-neutral-foreground: #0F172A;
  --color-neutral-on-secondary: #CBD5E1;
  --color-interactive-hover: #1F2937;
  --color-interactive-active: #273449;
  --color-interactive-selected: #451A03;
  --color-interactive-disabled: #1F2937;
  --color-selection-background: #451A03;
  --color-selection-foreground: var(--color-text-primary);
  --color-selection-border: var(--color-brand-primary);
  --color-focus-ring: rgba(245, 158, 11, 0.35);
  --color-disabled-background: #1F2937;
  --color-disabled-text: var(--color-text-disabled);
  --color-disabled-border: var(--color-border-subtle);
  --color-disabled-icon: var(--color-text-disabled);
  /* Dark mode separates by surface rather than by shadow, so the scale stays shallow. */
  --color-overlay-light: rgba(2, 6, 23, 0.2);
  --color-overlay-scrim: rgba(2, 6, 23, 0.5);
  --color-overlay-heavy: rgba(2, 6, 23, 0.72);
  --shadow-xs: 0 1px 2px rgba(2, 6, 23, 0.3);
  --shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.36);
  --shadow-md: 0 4px 12px rgba(2, 6, 23, 0.44);
  --shadow-lg: 0 12px 28px rgba(2, 6, 23, 0.52);
  --shadow-xl: 0 24px 48px rgba(2, 6, 23, 0.6);
  --color-chart-1: #38BDF8;
  --color-chart-2: #A78BFA;
  --color-chart-3: #2DD4BF;
  --color-chart-4: #F472B6;
  --color-chart-5: #818CF8;
  --color-chart-6: #94A3B8;
  --color-chart-7: #22D3EE;
  --color-chart-8: #C084FC;
}
/*
 * The bridge.
 *
 * The theme this application is built on draws its components from variables of its own, and it
 * switches them on the same data-theme attribute as the tokens above. So the bridge is mostly a
 * mapping: its variable, our token. Every button, chip, alert and accent the theme draws then
 * follows the design system without a single page having to change.
 *
 * Only the handful of utilities that read Bootstrap's comma-separated rgb triplets keep a rule of
 * their own, because a hex token cannot be carried in that form. Those rules point at a token too.
 *
 * What is deliberately left alone: the greys, the page background, the card and border colours.
 * They are the theme's layout rather than its meaning, and leaving them be is what keeps this a
 * change of palette rather than a rebuild.
 */
:root,
[data-theme="light"],
[data-theme="dark"] {
  /* The brand, which the theme calls primary: buttons, active navigation, accents. */
  --kt-primary: var(--color-brand-primary);
  --kt-primary-active: var(--color-brand-secondary);
  --kt-primary-light: var(--color-brand-tertiary);
  --kt-primary-inverse: var(--color-brand-foreground);
  /* Status, each family to its own. */
  --kt-success: var(--color-success-primary);
  --kt-success-active: var(--color-success-primary);
  --kt-success-light: var(--color-success-secondary);
  --kt-success-inverse: var(--color-success-foreground);
  --kt-warning: var(--color-warning-primary);
  --kt-warning-active: var(--color-warning-primary);
  --kt-warning-light: var(--color-warning-secondary);
  --kt-warning-inverse: var(--color-warning-foreground);
  --kt-danger: var(--color-error-primary);
  --kt-danger-active: var(--color-error-primary);
  --kt-danger-light: var(--color-error-secondary);
  --kt-danger-inverse: var(--color-error-foreground);
  --kt-info: var(--color-info-primary);
  --kt-info-active: var(--color-info-primary);
  --kt-info-light: var(--color-info-secondary);
  --kt-info-inverse: var(--color-info-foreground);
  /* The shell: the sidebar and the header are surfaces, and they separate by a line rather than
       by a shadow, which is what dark mode needs and light mode does no harm by (guide §17). */
  --kt-app-sidebar-light-bg-color: var(--color-surface-primary);
  --kt-app-sidebar-light-box-shadow: none;
  --kt-app-sidebar-base-toggle-btn-bg-color: var(--color-surface-primary);
  --kt-app-sidebar-base-toggle-btn-box-shadow: var(--shadow-sm);
  --kt-app-header-base-bg-color: var(--color-surface-primary);
  --kt-app-header-base-bg-color-mobile: var(--color-surface-primary);
  --kt-app-header-base-box-shadow: none;
  --kt-app-header-base-box-shadow-mobile: none;
}
/* --- Status, wherever a figure or a word carries one --- */
.text-success {
  color: var(--color-success-primary) !important;
}
.text-warning {
  color: var(--color-warning-primary) !important;
}
.text-danger {
  color: var(--color-error-primary) !important;
}
.text-info {
  color: var(--color-info-primary) !important;
}
/* A chip states its meaning in its text colour and stays quiet in the background (guide §22). */
.badge-light-success {
  background-color: var(--color-success-secondary) !important;
  color: var(--color-success-on-secondary) !important;
}
.badge-light-warning {
  background-color: var(--color-warning-secondary) !important;
  color: var(--color-warning-on-secondary) !important;
}
.badge-light-danger {
  background-color: var(--color-error-secondary) !important;
  color: var(--color-error-on-secondary) !important;
}
.badge-light-info {
  background-color: var(--color-info-secondary) !important;
  color: var(--color-info-on-secondary) !important;
}
.badge-light-secondary {
  background-color: var(--color-neutral-secondary) !important;
  color: var(--color-neutral-on-secondary) !important;
}
.badge-light-primary {
  background-color: var(--color-brand-tertiary) !important;
  color: var(--color-brand-secondary) !important;
}
/* --- The brand, on what the page is chiefly for --- */
.text-primary {
  color: var(--color-brand-primary) !important;
}
/* A disabled button says so in its own right, rather than by fading out (guide §14). */
.btn.btn-primary:disabled,
.btn.btn-primary.disabled {
  background-color: var(--color-disabled-background);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text);
}
/* --- The keyboard's position, on every control that takes one --- */
.form-control:focus,
.form-select:focus,
.btn:focus-visible {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}
/*
 * --- Links that lead somewhere in Herald ---
 *
 * A figure that opens its records, and a plate or a name that opens a profile, are the page's
 * interactive elements, so they carry the brand. The rest of the application's chrome is left
 * alone: this reaches only the Herald pages and the rows of a data grid.
 */
#Dashboard a,
#VehicleProfile a,
#DriverProfile a,
.et-datagrid a {
  color: var(--color-brand-primary);
}
#Dashboard a:hover,
#VehicleProfile a:hover,
#DriverProfile a:hover,
.et-datagrid a:hover {
  color: var(--color-brand-secondary);
}
/* --- Tables, which are most of this application, kept calm (guide §21) --- */
.et-datagrid .et-datagrid-headers {
  background-color: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}
.et-datagrid .et-data-row.et-state-hover > td {
  background-color: var(--color-interactive-hover) !important;
}
.et-datagrid .et-data-row.et-selection > td,
.et-datagrid .et-data-row.et-row-focused > td {
  background-color: var(--color-selection-background) !important;
  color: var(--color-selection-foreground) !important;
}

/* General */
.clickable-item {
  cursor: pointer;
}
.text-bold {
  font-weight: bold;
}
/* Portlet */
.portlet.light > .portlet-title .inputs.inputs-full-width {
  display: block;
  float: none;
}
/* Tree */
.tree-item-icon-color {
  color: #dfba49;
}
.page-sidebar .page-sidebar-menu > li > a > i.fa,
.page-sidebar-closed.page-sidebar-fixed .page-sidebar:hover .page-sidebar-menu > li > a > i.fa {
  margin-left: 1px;
  margin-right: 4px;
  top: 3px;
}
/* Forms */
.form-group.form-md-line-input.no-hint {
  margin-bottom: 15px;
}
.form-group.form-md-line-input.has-error .form-control {
  border-bottom-color: red;
}
.form-group.form-md-line-input.has-error .help-block-info {
  display: none;
}
/* DateRangePicker */
.daterangepicker_input .input-mini {
  width: 120px !important;
}
/* Portlets */
.portlet.light > .portlet-title.portlet-title-filter {
  border: none;
  margin-bottom: 0;
}
/* Buttons */
button i {
  margin-right: 5px;
}
.btn + .btn {
  margin-left: 5px;
}
/* FamFamFam Flags */
.famfamfam-flags {
  display: inline-block;
}
/* Social Login Icons */
.external-logins form a i.fa-openidconnect::before {
  content: "\f19b";
}
.external-logins a i.fa-wsfederation::before {
  content: "\f20e";
}
.margin-bottom-0 {
  margin-bottom: 0 !important;
}
/* Make user menu wider */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-dark .dropdown-menu {
  width: 250px;
}
/* Fix for issue #407 */
br {
  font-family: Verdana;
}
span.phone-number-verified {
  border-bottom: #36c6d3 2px solid !important;
}
.margin-top-20 {
  margin-top: 20px;
}
.margin-bottom-10 {
  margin-bottom: 10px;
}
/* Sweet alert */
.swal-title {
  overflow-wrap: break-word;
}
.swal-footer {
  text-align: center;
}
@keyframes glowing {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
.glowing {
  animation: glowing 2s infinite;
}
.toast-error {
  background-color: red !important;
}
.bootstrap-datetimepicker-widget {
  width: 275px !important;
}
@media (max-width: 768px) {
  .btn-md-icon {
    margin-right: 0 !important;
    padding-right: 0 !important;
  }
}
.kt-widget14__legend {
  text-align: left;
}
.kt-widget14__legend-bullet {
  width: 12px;
  height: 12px;
  margin-right: 12px;
  display: inline-block;
}
.long-select2 .select2-results .select2-results__options {
  max-height: 350px!important;
}

/* poppins-300 - devanagari_latin-ext_latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-300.eot');
  /* IE9 Compat Modes */
  src: local('Poppins Light'), local('Poppins-Light'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-300.eot') format('embedded-opentype'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-300.woff2') format('woff2'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-300.woff') format('woff'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-300.ttf') format('truetype'), url('./Poppins/poppins-v5-devanagari_latin-ext_latin-300.svg#Poppins') format('svg');
  /* Legacy iOS */
}
/* poppins-regular - devanagari_latin-ext_latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-regular.eot');
  /* IE9 Compat Modes */
  src: local('Poppins Regular'), local('Poppins-Regular'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-regular.eot') format('embedded-opentype'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-regular.woff2') format('woff2'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-regular.woff') format('woff'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-regular.ttf') format('truetype'), url('./Poppins/poppins-v5-devanagari_latin-ext_latin-regular.svg#Poppins') format('svg');
  /* Legacy iOS */
}
/* poppins-500 - devanagari_latin-ext_latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-500.eot');
  /* IE9 Compat Modes */
  src: local('Poppins Medium'), local('Poppins-Medium'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-500.eot') format('embedded-opentype'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-500.woff2') format('woff2'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-500.woff') format('woff'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-500.ttf') format('truetype'), url('./Poppins/poppins-v5-devanagari_latin-ext_latin-500.svg#Poppins') format('svg');
  /* Legacy iOS */
}
/* poppins-600 - devanagari_latin-ext_latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-600.eot');
  /* IE9 Compat Modes */
  src: local('Poppins SemiBold'), local('Poppins-SemiBold'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-600.eot') format('embedded-opentype'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-600.woff2') format('woff2'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-600.woff') format('woff'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-600.ttf') format('truetype'), url('./Poppins/poppins-v5-devanagari_latin-ext_latin-600.svg#Poppins') format('svg');
  /* Legacy iOS */
}
/* poppins-700 - devanagari_latin-ext_latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-700.eot');
  /* IE9 Compat Modes */
  src: local('Poppins Bold'), local('Poppins-Bold'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-700.eot') format('embedded-opentype'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-700.woff2') format('woff2'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-700.woff') format('woff'), url('/dist/fonts/poppins-v5-devanagari_latin-ext_latin-700.ttf') format('truetype'), url('./Poppins/poppins-v5-devanagari_latin-ext_latin-700.svg#Poppins') format('svg');
  /* Legacy iOS */
}

/* roboto-300 - vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-300.eot');
  /* IE9 Compat Modes */
  src: local('Roboto Light'), local('Roboto-Light'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-300.eot') format('embedded-opentype'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-300.woff2') format('woff2'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-300.woff') format('woff'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-300.ttf') format('truetype'), url('./Roboto/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-300.svg#Roboto') format('svg');
  /* Legacy iOS */
}
/* roboto-regular - vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-regular.eot');
  /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-regular.eot') format('embedded-opentype'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-regular.woff2') format('woff2'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-regular.woff') format('woff'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-regular.ttf') format('truetype'), url('./Roboto/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-regular.svg#Roboto') format('svg');
  /* Legacy iOS */
}
/* roboto-500 - vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-500.eot');
  /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-500.eot') format('embedded-opentype'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-500.woff2') format('woff2'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-500.woff') format('woff'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-500.ttf') format('truetype'), url('./Roboto/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-500.svg#Roboto') format('svg');
  /* Legacy iOS */
}
/* roboto-700 - vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-700.eot');
  /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-700.eot') format('embedded-opentype'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-700.woff2') format('woff2'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-700.woff') format('woff'), url('/dist/fonts/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-700.ttf') format('truetype'), url('./Roboto/roboto-v18-vietnamese_latin-ext_latin_greek_cyrillic-ext_greek-ext_cyrillic-700.svg#Roboto') format('svg');
  /* Legacy iOS */
}

.pwstrength-div {
  position: relative;
}
.pwstrength-div .progress {
  height: 8px;
  width: 64px;
  text-align: right;
  position: absolute;
  right: -28px;
  top: 28.5px;
  transform: rotate(-90deg);
  border-radius: 0 0 1.25rem 1.25rem;
}
.pwstrength-div .password-verdict {
  height: 10px;
  width: 100px;
  text-align: right;
  position: absolute;
  right: 24px;
  top: 25px;
  font-size: 12px;
  opacity: 0.6;
}