/* ==========================================================================
   User Manager 3.1.x - Application Styles
   File: /css/style.css
   Version: 3.1.4

   Purpose:
   - Provide shared application components and module-specific presentation.
   - Preserve required Bootstrap 3 and legacy page compatibility.

   Load order:
   1. bootstrap.min.css
   2. core.css
   3. pssmstyle.css
   4. style.css
   5. dark.css

   Authoring standard:
   - Use core.css tokens and utilities before adding new one-off declarations.
   - Keep shared components before page and module sections.
   - Scope page rules to a stable .um-* page or component container.
   - Keep dark-theme overrides in dark.css.
   - Do not add inline page, header, or menu CSS.
   - Do not duplicate an existing selector block to override the same property.
   ========================================================================== */

.umbody {
  width: 85%;
  max-width: 1400px;
  min-height: 420px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/*************************************************************************
 * Login and Forget
 *************************************************************************/
 .um-auth-shell {
  width: 100%;
  min-height: 100vh;
  padding: 0;
}

.um-auth-shell > .row {
  display: flex;
  min-height: 100vh;
  margin: 0;
}


.um-auth-left {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 55px;
  background: #ffffff;
}

.um-auth-form-wrap {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.um-auth-logo {
  margin-bottom: 34px;
  text-align: left;
}

.um-auth-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 250px;
}

.um-auth-title {
  margin: 0 0 12px;
  color: #172033;
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.um-auth-subtitle {
  margin: 0 0 30px;
  color: #68758a;
  font-size: 15px;
  line-height: 1.65;
}


.um-auth-alert {
  display: none;
  margin-bottom: 20px;
}

.um-auth-alert:not(:empty) {
  display: block;
}

.um-auth-alert .alert,
.um-auth-alert.alert {
  margin: 0;
  border-radius: 8px;
}


.um-auth-field {
  position: relative;
  margin-bottom: 20px;
}

.um-auth-field-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 50px;
  color: #78869a;
  font-size: 16px;
  pointer-events: none;
}

.um-auth-field .form-control,
.um-auth-field input.form-control,
.um-auth-field input[type="email"] {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 10px 15px 10px 48px;
  border: 1px solid #d6dce6;
  border-radius: 7px;
  background: #ffffff;
  box-shadow: none;
  color: #253046;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  line-height: 28px;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease;
}

.um-auth-field .form-control::placeholder {
  color: #8b96a8;
  opacity: 1;
}

.um-auth-field .form-control:hover {
  border-color: #adb7c7;
}

.um-auth-field .form-control:focus {
  border: 1px solid #337ab7;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(51, 122, 183, .13);
  color: #172033;
  outline: 0;
}

.um-auth-field:focus-within .um-auth-field-icon {
  color: #337ab7;
}


.um-auth-submit {
  position: relative;
  min-height: 50px;
  margin-top: 4px;
  padding: 12px 20px;
  border: 1px solid #286090;
  border-radius: 7px;
  background: #337ab7;
  box-shadow: 0 4px 12px rgba(51, 122, 183, .20);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 24px;
  transition:
    background-color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .15s ease;
}

.um-auth-submit:hover,
.um-auth-submit:focus {
  border-color: #204d74;
  background: #286090;
  box-shadow: 0 6px 16px rgba(51, 122, 183, .26);
  color: #ffffff;
  opacity: 1;
  outline: none;
}

.um-auth-submit:focus {
  box-shadow:
    0 0 0 3px rgba(51, 122, 183, .20),
    0 6px 16px rgba(51, 122, 183, .22);
}

.um-auth-submit:active,
.um-auth-submit:active:focus {
  border-color: #204d74;
  background: #245580;
  box-shadow: none;
  transform: translateY(1px);
}

.um-auth-submit[disabled],
.um-auth-submit.disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
}

.um-auth-button-icon {
  margin-right: 7px;
}

.um-auth-button-text {
  vertical-align: middle;
}


.um-auth-links {
  margin-top: 22px;
  text-align: center;
}

.um-auth-links a {
  display: inline-block;
  color: #337ab7;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.um-auth-links a:hover,
.um-auth-links a:focus {
  color: #23527c;
  text-decoration: none;
}

.um-auth-links a:focus {
  outline: 2px solid rgba(51, 122, 183, .35);
  outline-offset: 3px;
}

.um-auth-links i {
  margin-right: 5px;
}


.um-auth-security-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
  padding: 13px 14px;
  border: 1px solid #d8e7f5;
  border-radius: 7px;
  background: #f3f8fc;
  color: #526579;
  font-size: 12px;
  line-height: 1.55;
}

.um-auth-security-note > i {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #337ab7;
  font-size: 15px;
}

.um-auth-help {
  margin: 23px 0 0;
  color: #788497;
  font-size: 12px;
  line-height: 1.65;
}

.um-auth-help strong {
  color: #4d596c;
}


.um-auth-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 70px 70px;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .14), transparent 28%),
    linear-gradient(145deg, #172f5f 0%, #245895 48%, #337ab7 100%);
  color: #ffffff;
}

.um-auth-overlay {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 90%;
  margin: 0 auto;
}

.um-auth-version {
  position: absolute;
  top: 24px;
  right: 30px;
  z-index: 5;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 20px;
  background: rgba(8, 29, 58, .20);
  color: rgba(255, 255, 255, .82);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}


.um-auth-shape {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
}

.um-auth-shape-one {
  top: -130px;
  right: -110px;
  width: 380px;
  height: 380px;
  background: rgba(255, 255, 255, .07);
}

.um-auth-shape-two {
  bottom: -180px;
  left: -110px;
  width: 430px;
  height: 430px;
  border: 65px solid rgba(255, 255, 255, .045);
  background: transparent;
}


.um-auth-brand {
  max-width: 620px;
  margin-bottom: 44px;
}

.um-auth-brand-icon {
  display: block;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, .92);
  font-size: 46px;
}

.um-auth-brand h1 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.7px;
}

.um-auth-brand p {
  max-width: 590px;
  margin: 0;
  color: rgba(255, 255, 255, .79);
  font-size: 16px;
  line-height: 1.65;
}


.um-auth-overlay > .row {
  margin-right: -9px;
  margin-left: -9px;
}

.um-auth-overlay > .row > [class*="col-"] {
  padding-right: 9px;
  padding-left: 9px;
}

.um-auth-feature {
  min-height: 170px;
  margin-bottom: 18px;
  padding: 22px 21px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
  transition:
    background-color .15s ease,
    border-color .15s ease,
    transform .15s ease;
}

.um-auth-feature:hover {
  border-color: rgba(255, 255, 255, .25);
  background: rgba(255, 255, 255, .12);
  transform: translateY(-2px);
}

.um-auth-feature > i {
  margin-bottom: 13px;
  color: #ffffff;
  font-size: 24px;
}

.um-auth-feature h4 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.um-auth-feature p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: 13px;
  line-height: 1.55;
}


.um-auth-note {
  margin-top: 9px;
  padding-top: 19px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  color: rgba(255, 255, 255, .72);
  font-size: 12px;
  line-height: 1.55;
}

.um-auth-note i {
  margin-right: 6px;
  color: rgba(255, 255, 255, .92);
}


html[data-theme="dark"] body.um-auth-body {
  background: #10141c;
  color: #e8ebf2;
}

html[data-theme="dark"] .um-auth-left {
  background: #1b2029;
}

html[data-theme="dark"] .um-auth-title {
  color: #f4f6fb;
}

html[data-theme="dark"] .um-auth-subtitle {
  color: #aeb7c7;
}

html[data-theme="dark"] .um-auth-field .form-control,
html[data-theme="dark"] .um-auth-field input.form-control,
html[data-theme="dark"] .um-auth-field input[type="email"] {
  border-color: #465063;
  background: #252b36;
  color: #f4f6fb;
  -webkit-text-fill-color: #f4f6fb;
}

html[data-theme="dark"] .um-auth-field .form-control::placeholder {
  color: #929daf;
  -webkit-text-fill-color: #929daf;
}

html[data-theme="dark"] .um-auth-field .form-control:hover {
  border-color: #5c687d;
}

html[data-theme="dark"] .um-auth-field .form-control:focus {
  border-color: #6ea8fe;
  background: #252b36;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(110, 168, 254, .16);
  -webkit-text-fill-color: #ffffff;
}

html[data-theme="dark"] .um-auth-field-icon {
  color: #9ca8ba;
}

html[data-theme="dark"] .um-auth-field:focus-within .um-auth-field-icon {
  color: #6ea8fe;
}

html[data-theme="dark"] .um-auth-links a {
  color: #79b1ff;
}

html[data-theme="dark"] .um-auth-links a:hover,
html[data-theme="dark"] .um-auth-links a:focus {
  color: #a6cbff;
}

html[data-theme="dark"] .um-auth-security-note {
  border-color: #334a62;
  background: #202d3a;
  color: #bfccda;
}

html[data-theme="dark"] .um-auth-security-note > i {
  color: #79b1ff;
}

html[data-theme="dark"] .um-auth-help {
  color: #9fa9b9;
}

html[data-theme="dark"] .um-auth-help strong {
  color: #dfe4ec;
}

html[data-theme="dark"] .um-auth-right {
  background:
    radial-gradient(circle at 85% 12%, rgba(110, 168, 254, .13), transparent 28%),
    linear-gradient(145deg, #111b2e 0%, #18375c 50%, #205684 100%);
}


@media (max-width: 1199px) {
  .um-auth-left {
    padding-right: 40px;
    padding-left: 40px;
  }

  .um-auth-right {
    padding-right: 45px;
    padding-left: 45px;
  }

  .um-auth-brand h1 {
    font-size: 35px;
  }
}

@media (max-width: 991px) {
  .um-auth-shell > .row {
    display: block;
  }

  .um-auth-left,
  .um-auth-right {
    width: 100%;
    min-height: 0;
  }

  .um-auth-left {
    padding: 55px 30px;
  }

  .um-auth-form-wrap {
    max-width: 520px;
  }

  .um-auth-right {
    padding: 65px 35px 45px;
  }

  .um-auth-overlay {
    max-width: 680px;
  }

  .um-auth-version {
    top: 18px;
    right: 22px;
  }

  .um-auth-brand {
    margin-bottom: 30px;
  }

  .um-auth-feature {
    min-height: 160px;
  }
}

@media (max-width: 767px) {
  body.um-auth-body {
    background: #ffffff;
  }

  .um-auth-left {
    padding: 38px 22px 45px;
  }

  .um-auth-logo {
    margin-bottom: 27px;
  }

  .um-auth-logo img {
    max-height: 60px;
  }

  .um-auth-title {
    font-size: 29px;
  }

  .um-auth-subtitle {
    margin-bottom: 25px;
    font-size: 14px;
  }

  .um-auth-right {
    padding: 55px 22px 35px;
  }

  .um-auth-brand {
    margin-bottom: 28px;
  }

  .um-auth-brand-icon {
    margin-bottom: 16px;
    font-size: 38px;
  }

  .um-auth-brand h1 {
    font-size: 30px;
  }

  .um-auth-brand p {
    font-size: 14px;
  }

  .um-auth-feature {
    min-height: 0;
    padding: 18px;
  }

  .um-auth-version {
    top: 16px;
    right: 18px;
  }

  html[data-theme="dark"] body.um-auth-body {
    background: #1b2029;
  }
}

@media (max-width: 480px) {
  .um-auth-left {
    padding: 30px 18px 38px;
  }

  .um-auth-right {
    padding: 52px 18px 30px;
  }

  .um-auth-title {
    font-size: 27px;
  }

  .um-auth-field .form-control,
  .um-auth-field input.form-control,
  .um-auth-field input[type="email"] {
    font-size: 16px;
  }

  .um-auth-security-note {
    font-size: 11px;
  }

  .um-auth-version {
    font-size: 10px;
  }
}


@media (prefers-reduced-motion: reduce) {

  .um-auth-field .form-control,
  .um-auth-submit,
  .um-auth-feature {
    transition: none;
  }

  .um-auth-submit:active,
  .um-auth-feature:hover {
    transform: none;
  }
}

/*************************************************************************
 * App Shell
 *************************************************************************/
 .um-app-shell {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	isolation: isolate;
}

.um-app-shell::before,
.um-app-shell::after {
	content: "";
	position: fixed;
	z-index: -1;
	border-radius: 50%;
	pointer-events: none;
}

.um-app-shell::before {
	top: -130px;
	right: -110px;
	width: 380px;
	height: 380px;
	background: rgba(255, 255, 255, .07);
}

.um-app-shell::after {
	bottom: -180px;
	left: -110px;
	width: 430px;
	height: 430px;
	border: 65px solid rgba(255, 255, 255, .045);
	background: transparent;
}
 /*************************************************************************
 * Foundations and Utilities
 *************************************************************************/

.um-drawer-body {
	padding: var(--um-space-4, 16px);
}

/* Base Application Shell --------------------------------------------------- */

body {
	color: #333;
	padding: 0;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: left;
}

.um-search-header .text-muted {
	margin-bottom: 0;
}

.row-centered {
	text-align: center;
	display: table-row;
}

.col-centered {
	display: table-cell;
	float: none;
	vertical-align: top;
}

/******************************************************************************
 * Application Shell
 ******************************************************************************/


.um-app-main {
	flex: 1 0 auto;
	width: 100%;
	padding: 28px 0 34px;
}

.um-app-content {
	width: 100%;
}

.um-app-content > .myaccount:first-child {
	margin-top: 0;
}

.um-app-footer-spacer {
	flex: 0 0 auto;
}

.main-content,
.page-container,
.content-wrapper {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}

/******************************************************************************
 * Application Navbar
 ******************************************************************************/

.um-app-navbar {
	position: sticky;
	top: 0;
	z-index: 1070;
	min-height: 64px;
	margin: 0;
	border: 0;
	border-bottom: 1px solid #e4e7ef;
	border-radius: 0;
	background: rgba(255, 255, 255, .98);
	box-shadow: 0 5px 18px rgba(31, 45, 61, .10);
}

.um-app-navbar .container,
.um-app-navbar .navbar-header {
	min-height: 64px;
}

.um-app-navbar .navbar-brand {
	display: flex;
	align-items: center;
	height: 64px;
	max-width: 360px;
	padding: 10px 18px 10px 15px;
	color: #171927;
	font-weight: 700;
	letter-spacing: -.2px;
}

.um-app-navbar .navbar-brand:hover,
.um-app-navbar .navbar-brand:focus {
	color: #171927;
	background: transparent;
}

.um-brand-mark {
	display: inline-flex;
	flex: 0 0 38px;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: 10px;
	border-radius: 10px;
	background: linear-gradient(135deg, #6558f5, #3d7df6);
	color: #fff;
	box-shadow: 0 6px 14px rgba(72, 91, 238, .22);
}

.um-brand-mark img {
	display: block;
	max-width: 24px;
	max-height: 24px;
}

.um-brand-name {
	display: block;
	overflow: hidden;
	font-size: 17px;
	line-height: 1.1;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.um-app-navbar .navbar-nav > li > a {
	padding-top: 22px;
	padding-bottom: 22px;
	color: #43475d;
	font-weight: 600;
}

.um-app-navbar .navbar-nav > li > a:hover,
.um-app-navbar .navbar-nav > li > a:focus,
.um-app-navbar .navbar-nav > .open > a,
.um-app-navbar .navbar-nav > .open > a:hover,
.um-app-navbar .navbar-nav > .open > a:focus {
	color: #315efb;
	background: #f3f5ff;
}

.um-app-navbar .dropdown-menu,
.um-account-menu,
.um-notification-menu {
	z-index: 1065;
}

/******************************************************************************
 * Navbar Actions
 ******************************************************************************/

.um-nav-action {
	margin-top: 14px;
	margin-left: 8px;
	padding: 7px 13px !important;
	border: 1px solid #d9def0;
	border-radius: 10px;
	background: #fff;
	line-height: 20px !important;
}

.um-nav-action-primary {
	border-color: #4d6df3;
	background: #4d6df3 !important;
	color: #fff !important;
}

.um-nav-icon {
	position: relative;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: 12px;
	margin-left: 8px;
	padding: 0 !important;
	border: 1px solid #d9def0;
	border-radius: 50%;
	background: #fff;
	color: #43475d !important;
}

/******************************************************************************
 * Account Menu
 ******************************************************************************/

.um-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin-right: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, #315efb, #6558f5);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .4px;
	box-shadow: 0 4px 10px rgba(49, 94, 251, .22);
}

.um-account-toggle {
	display: flex !important;
	align-items: center;
	margin-top: 9px;
	margin-left: 8px;
	padding: 4px 10px 4px 4px !important;
	border: 1px solid #d9def0;
	border-radius: 22px;
	background: #fff;
	line-height: 38px !important;
}

.um-account-menu {
	min-width: 235px;
	padding: 0 0 6px;
	overflow: hidden;
}

.um-account-header {
	padding: 13px 15px;
	border-bottom: 1px solid #e8ebf2;
	background: #f7f8fc;
}

.um-user-summary {
	display: inline-block;
	max-width: 170px;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
	white-space: nowrap;
}

/******************************************************************************
 * Notifications
 ******************************************************************************/

.um-notification-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border: 2px solid #fff;
	border-radius: 10px;
	background: #d9534f;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
}

.um-notification-menu {
	width: 380px;
	max-height: 520px;
	padding: 0;
	overflow-x: hidden;
	overflow-y: auto;
}

.um-notification-header {
	padding: 13px 15px;
	border-bottom: 1px solid #e8ebf2;
	background: #f7f8fc;
}

.um-notification-row {
	position: relative;
	border-left: 3px solid transparent;
}

.um-notification-row.unread {
	background: #fff8e6;
	border-left: 4px solid #f0ad4e;
	font-weight: 600;
}

.um-notification-row.unread:hover {
	background: #fff3d2;
}

.um-notification-row.read {
	opacity: .80;
	border-left: 4px solid #5cb85c;
}

.um-notification-row.read:hover {
	background: #f7f7f7;
	opacity: 1;
}

.um-notification-link {
	display: block;
	padding: 10px 38px 10px 12px !important;
	white-space: normal !important;
}

.um-notification-link strong,
.um-notification-link small {
	display: block;
}

.um-notification-link small {
	margin-top: 3px;
	color: #777;
	line-height: 1.35;
}

.um-notification-close {
	position: absolute;
	top: 7px;
	right: 7px;
	z-index: 2;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #8a909c;
	font-size: 20px;
	line-height: 24px;
	text-align: center;
}

.um-notification-close:hover,
.um-notification-close:focus {
	background: #f2dede;
	color: #a94442;
	outline: none;
}

/******************************************************************************
 * Skip Link
 ******************************************************************************/

.um-skip-link {
	position: fixed;
	top: -60px;
	left: 15px;
	z-index: 2000;
	padding: 10px 14px;
	border-radius: 0 0 6px 6px;
	background: #fff;
	color: #23527c;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .25);
}

.um-skip-link:focus {
	top: 0;
}

/******************************************************************************
 * Responsive Application Shell
 ******************************************************************************/

@media (max-width: 767px) {
	.um-app-navbar .navbar-collapse {
		border-top-color: #e4e7ef;
		background: #fff;
	}

	.um-app-navbar .navbar-nav > li > a {
		padding-top: 12px;
		padding-bottom: 12px;
	}

	.um-nav-icon {
		width: auto;
		height: auto;
		margin: 6px 15px;
		padding: 10px 15px !important;
		border-radius: 10px;
	}

	.um-account-toggle {
		margin: 6px 15px;
		padding: 6px 10px !important;
		border-radius: 10px;
	}

	.um-notification-menu,
	.um-account-menu {
		width: auto;
		max-height: none;
		margin: 0 15px 8px !important;
	}

	.um-app-main {
		padding: 18px 0 24px;
	}
}
/*************************************************************************
 * Dashboard Layout
 *
 * Dashboard card rows use flexbox inside the existing Bootstrap grid.
 * This prevents float wrapping when database-driven card descriptions
 * have different heights while preserving Bootstrap column widths.
 *************************************************************************/
.um-dashboard-page {
	margin-top: 12px;
}
/*************************************************************************
 * Dashboard Section Headers
 *************************************************************************/
.um-dashboard-section {
	margin-bottom: 14px;
}

.um-dashboard-section-header {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px solid #eeeeee;
}

.um-dashboard-section-header h2 {
	flex: 0 0 auto;
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	color: #444444;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.um-dashboard-section-header p {
	margin: 0;
	color: #777777;
	font-size: 12px;
	line-height: 1.2;
}

/*************************************************************************
 * Responsive Section Headers
 *************************************************************************/
@media (max-width: 767px) {
	.um-dashboard-section-header {
		display: block;
		padding-bottom: 7px;
	}

	.um-dashboard-section-header h2 {
		margin-bottom: 3px;
	}

	.um-dashboard-section-header p {
		line-height: 1.35;
	}
}
.um-dashboard-card-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin-left: -7px;
	margin-right: -7px;
}
.um-dashboard-card-row > div {
	display: flex;
	float: none;
	padding-left: 7px;
	padding-right: 7px;
}
.um-dashboard-card-row > div > .um-dashboard-card,
.um-dashboard-card-row > div > .um-dashboard-health-card {
	width: 100%;
}

/*************************************************************************
 * Role-Aware Welcome Banner
 *************************************************************************/
.um-dashboard-welcome-banner {
	background: linear-gradient(135deg, #f7fbff 0%, #ffffff 100%);
	border: 1px solid #d9e8f5;
	border-left: 4px solid #337ab7;
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.um-dashboard-welcome-title {
	margin: 0 0 4px 0;
	font-size: 17px;
	font-weight: 700;
	color: #333333;
}
.um-dashboard-welcome-text {
	margin: 0;
	font-size: 12px;
	color: #666666;
}
.um-dashboard-welcome-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.um-dashboard-welcome-stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid #dfe7ee;
	border-radius: 14px;
	padding: 5px 9px;
	font-size: 11px;
	color: #555555;
}
.um-dashboard-welcome-stat i,
.um-dashboard-welcome-stat svg {
	color: #337ab7;
}
.um-dashboard-welcome-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}
.um-dashboard-welcome-action {
	margin: 0 0 4px 0;
	border-radius: 4px;
	font-size: 12px;
	padding: 6px 10px;
}
.um-dashboard-welcome-action-search {
	border: 1px solid #f0ad4e;
	color: #8a6d3b;
}
.um-dashboard-welcome-action-status {
	border: 1px solid #5cb85c;
	color: #3c763d;
}
.um-dashboard-welcome-action-new-user {
	background: #5cb85c;
	border: 1px solid #4cae4c;
	color: #ffffff;
}
.um-dashboard-welcome-action:hover,
.um-dashboard-welcome-action:focus {
	box-shadow: 0 2px 7px rgba(0,0,0,.12);
	text-decoration: none;
}

/*************************************************************************
 * Shared Dashboard Card Interaction
 *************************************************************************/
.um-dashboard-health-card,
.um-dashboard-card {
	position: relative;
	display: block;
	color: #333333;
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}
.um-dashboard-health-card:hover,
.um-dashboard-health-card:focus,
.um-dashboard-card:hover,
.um-dashboard-card:focus {
	color: #23527c;
	border-color: #337ab7;
	box-shadow: 0 3px 10px rgba(51,122,183,.14);
	text-decoration: none;
	transform: translateY(-1px);
	outline: none;
}

/*************************************************************************
 * System Health Cards
 *************************************************************************/
.um-dashboard-health-ribbon {
	margin-bottom: 14px;
}
.um-dashboard-health-card {
	min-height: 98px;
	padding: 14px 12px 12px 50px;
	margin-bottom: 10px;
	border-left: 4px solid #337ab7;
}
.um-dashboard-health-card i,
.um-dashboard-health-card svg {
	position: absolute;
	top: 18px;
	left: 14px;
	font-size: 22px;
}
.um-dashboard-health-card strong {
	display: block;
	font-size: 14px;
	line-height: 1.2;
	color: #1f1f1f;
}
.um-dashboard-health-value {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}
.um-dashboard-health-desc {
	display: block;
	color: #777777;
	font-size: 12px;
	line-height: 1.35;
	margin-top: 1px;
}
.um-dashboard-state-success {
	border-left-color: #3c763d;
}
.um-dashboard-state-success i,
.um-dashboard-state-success svg,
.um-dashboard-state-success .um-dashboard-health-value {
	color: #3c763d;
}
.um-dashboard-state-warning {
	border-left-color: #8a6d3b;
}
.um-dashboard-state-warning i,
.um-dashboard-state-warning svg,
.um-dashboard-state-warning .um-dashboard-health-value {
	color: #8a6d3b;
}
.um-dashboard-state-danger {
	border-left-color: #a94442;
}
.um-dashboard-state-danger i,
.um-dashboard-state-danger svg,
.um-dashboard-state-danger .um-dashboard-health-value {
	color: #a94442;
}

/*************************************************************************
 * Tool and Application Cards
 *************************************************************************/
.um-dashboard-card {
	min-height: 78px;
	padding: 13px 12px 10px 50px;
	margin-bottom: 10px;
}
.um-dashboard-card i,
.um-dashboard-card svg {
	position: absolute;
	top: 19px;
	left: 15px;
	color: #337ab7;
	font-size: 22px;
}
.um-dashboard-card strong {
	display: block;
	font-size: 14px;
	line-height: 1.2;
	color: #1f1f1f;
}
.um-dashboard-card span {
	display: block;
	color: #777777;
	font-size: 12px;
	line-height: 1.35;
	margin-top: 3px;
}
.um-dashboard-application-card {
	min-height: 96px;
	padding-top: 17px;
}
.um-dashboard-application-card i,
.um-dashboard-application-card svg {
	top: 23px;
	font-size: 25px;
}
.um-dashboard-application-card strong {
	font-size: 15px;
}
.um-dashboard-icon-green i,
.um-dashboard-icon-green svg {
	color: #4cae4c;
}
.um-dashboard-icon-orange i,
.um-dashboard-icon-orange svg {
	color: #f0ad4e;
}
.um-dashboard-icon-purple i,
.um-dashboard-icon-purple svg {
	color: #7b5aa6;
}
.um-dashboard-icon-teal i,
.um-dashboard-icon-teal svg {
	color: #2a9d8f;
}
.um-dashboard-icon-red i,
.um-dashboard-icon-red svg {
	color: #d9534f;
}
.um-dashboard-icon-blue i,
.um-dashboard-icon-blue svg {
	color: #337ab7;
}

/*************************************************************************
 * Empty State
 *************************************************************************/
.um-dashboard-empty-state {
	padding: 14px;
	text-align: center;
	color: #777777;
	background: #ffffff;
	border: 1px dashed #cccccc;
	border-radius: 8px;
	margin-bottom: 10px;
}

/*************************************************************************
 * Responsive Dashboard Layout
 *************************************************************************/
@media (max-width: 767px) {
	.um-dashboard-page {
		margin-top: 8px;
	}
	.um-dashboard-section {
		margin-bottom: 14px;
	}
	.um-dashboard-card-row {
		display: block;
	}
	.um-dashboard-card-row > div {
		display: block;
		float: none;
	}
	.um-dashboard-health-card,
	.um-dashboard-card,
	.um-dashboard-application-card {
		width: 100%;
		min-height: 0;
	}
	.um-dashboard-welcome-meta,
	.um-dashboard-welcome-actions {
		gap: 5px;
	}
}


/*************************************************************************
 * Page Headers
 *************************************************************************/

.um-page-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--um-space-4, 16px);
	border-bottom: 1px solid var(--um-border, #dee2e6);
	padding-bottom: var(--um-space-4, 16px);
	margin-bottom: var(--um-space-4, 16px);
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 18px 20px;
	margin-bottom: 15px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.um-page-title {
	margin: 0;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	color: var(--um-text, #333);
	margin: 0;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.2;
	color: #333;
}

.um-page-subtitle {
	margin: 6px 0 0;
	color: var(--um-text-muted, #6c757d);
	font-size: 14px;
	margin: 6px 0 0;
	font-size: 14px;
	color: #777;
	line-height: 1.5;
}

.um-page-header-main {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.um-page-header-content {
	flex: 1;
}

.um-page-title i,
.um-page-title .fa,
.um-page-title .fas,
.um-page-title .glyphicon {
	margin-right: 8px;
	color: #337ab7;
}

.um-page-header-actions {
	flex-shrink: 0;
	text-align: right;
}

.um-page-header-actions .btn {
	white-space: nowrap;
}

.um-page-header-meta {
	margin-top: 10px;
	font-size: 12px;
	color: #777;
	text-align: right;
}

/*************************************************************************
 * Panels
 *************************************************************************/

.um-panel {
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	margin-bottom: 15px;
}

.um-panel-heading {
	padding: 13px 15px;
	border-bottom: 1px solid #eee;
	font-weight: 600;
	background: #fbfbfb;
}

.um-panel-heading .btn {
	margin-top: -4px;
}

.um-panel-body {
	padding: 15px;
	padding: 15px;
}

.um-panel-header {
	padding: 10px 15px;
	background: #f7f8fa;
	border-bottom: 1px solid #e5e5e5;
	min-height: 44px;
}

.um-panel-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
	color: #333;
}

.um-panel-title i,
.um-panel-title svg {
	margin-right: 6px;
	color: #337ab7;
	font-size: 14px;
}

.um-panel-meta {
	font-size: 12px;
	font-weight: 400;
	line-height: 22px;
	color: #777;
}

.um-panel-subtitle {
	margin-top: 3px;
	font-size: 11px;
	color: #777;
}

.um-panel-footer {
	padding: 10px 15px;
	background: #fafafa;
	border-top: 1px solid #e5e5e5;
}

.um-panel-primary {
	border-top: 3px solid #337ab7;
}

.um-panel-success {
	border-top: 3px solid #5cb85c;
}

.um-panel-warning {
	border-top: 3px solid #f0ad4e;
}

.um-panel-danger {
	border-top: 3px solid #d9534f;
}

.um-panel-table .um-panel-body {
	padding: 0;
}

.um-panel-table .table {
	margin-bottom: 0;
}

.um-panel-table {
	overflow: hidden;
}

.um-group-manager .um-panel-footer {
	margin-top: 15px;
	padding-top: 12px;
	border-top: 1px solid #e5e5e5;
	font-size: 12px;
	color: #777;
}

.um-user-search-page .um-panel,
.um-user-search-page .um-panel-body {
	overflow: visible;
}

/*************************************************************************
 * Section Cards
 *************************************************************************/

.um-section-card {
	margin-bottom: 20px;
	border: 1px solid #d8dee9;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.um-section-card:last-child {
	margin-bottom: 0;
}

.um-section-header {
	padding: 18px 20px;
	border-bottom: 1px solid #e6e9ef;
	background: #f8fafc;
}

.um-section-title {
	margin: 0;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
}

.um-section-title i {
	margin-right: 8px;
	color: #4f7cff;
}

.um-section-description {
	margin-top: 10px;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.6;
}

.um-section-card.section-success {
	border-left: 4px solid #28a745;
}

.um-section-card.section-warning {
	border-left: 4px solid #f0ad4e;
}

.um-section-card.section-danger {
	border-left: 4px solid #dc3545;
}

.um-section-card.section-info {
	border-left: 4px solid #4f7cff;
}

.um-section-body {
	padding: 20px;
}

/*************************************************************************
 * Config Manager - Type Navigation
 *************************************************************************/

.um-config-type-panel {
	height: 100%;
}

.um-config-type-list {
	padding: 0;
}

.um-config-type-item {
	display: block;
	padding: 12px 14px;
	border-bottom: 1px solid #e5e5e5;
	color: inherit;
	text-decoration: none;
	transition: all .05s ease-in-out;
}

.um-config-type-item:last-child {
	border-bottom: 0;
}

.um-config-type-item:hover {
	background: #f8fafc;
	text-decoration: none;
}

.um-config-type-item*active {
	background: #337ab7;
	color: #fff;
}
/*************************************************************************
 * Help Navigation
 *************************************************************************/
.help-sidebar .um-section-title{
	font-size: 16px;
}
.um-help-nav-list {
	display:block;
	margin:0;
	padding:0;
}

.um-help-nav-item {
	display:block;
	position:relative;
	padding:12px 14px;
	border-bottom:1px solid #d9e2ec;
	background:#ffffff;
	color:#344054;
	text-decoration:none;
	line-height:1.4;
	overflow:hidden;
	transition:background .15s ease,color .15s ease;
}

.um-help-nav-item:last-child {
	border-bottom:0;
}

.um-help-nav-item:hover,
.um-help-nav-item:focus {
	background:#f8fafc;
	color:#1f4e79;
	text-decoration:none;
}

.um-help-nav-item.active {
	background:#2f3747;
	color:#ffffff;
}

.um-help-nav-item.active:hover,
.um-help-nav-item.active:focus {
	background:#2f3747;
	color:#ffffff;
}

.um-help-nav-item .glyphicon {
	margin-right:6px;
	color:#667085;
}

.um-help-nav-item.active .glyphicon {
	color:#ffffff;
}

.help-nav-count {
	float:right;
	min-width:25px;
	padding:2px 7px;
	border-radius:12px;
	background:#eef2f6;
	color:#475467;
	font-size:11px;
	font-weight:700;
	text-align:center;
}

.um-help-nav-item.active .help-nav-count {
	background:rgba(255,255,255,.18);
	color:#ffffff;
}
/*************************************************************************
 * Summary Cards
 *************************************************************************/

.um-stat-card,
	.um-card {
	position: relative;
	background: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 18px;
	min-height: 100px;
	margin-bottom: 15px;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	min-height: 110px;
	transition:
	border-color .15s ease,
	box-shadow .15s ease,
	transform .15s ease;
}

.um-stat-card:hover,
	.um-card:hover {
	border-color: #337ab7;
	box-shadow:
	0 4px 12px rgba(51,122,183,.14);
	transform: translateY(-2px);
}

.um-stat-card.active-filter,
	.um-card.active-filter {
	border-color: #337ab7;
	box-shadow:
	0 0 0 1px #337ab7,
	0 4px 12px rgba(51,122,183,.18);
	transform: translateY(-2px);
}

.um-stat-card.is-static,
	.um-card.is-static {
	cursor: default;
}

.um-stat-card.is-static:hover,
	.um-card.is-static:hover {
	border-color: #e5e5e5;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
	transform: none;
}

.um-stat-number,
	.um-card-number,
	.summary-number {
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
}

.um-stat-label,
	.um-card-label,
	.summary-label {
	margin-top: 8px;
	color: #666;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.um-stat-icon,
	.um-card-icon,
	.summary-icon {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 32px;
	opacity: .18;
	pointer-events: none;
}

.um-stat-card.no-icon,
	.um-card.no-icon {
	padding-right: 18px;
}

.um-stat-trend {
	position: absolute;
	right: 18px;
	bottom: 18px;
	font-size: 11px;
	font-weight: 600;
}

.um-stat-card.is-clickable,
	.um-card.is-clickable {
	cursor: pointer;
}

.um-stat-card.loading,
	.um-card.loading {
	opacity: .55;
	pointer-events: none;
}

.um-stat-card.active-filter {
	border-color: var(--um-primary);
	box-shadow:
	0 0 0 1px var(--um-primary),
	0 4px 12px rgba(51,122,183,.18);
	transform: translateY(-2px);
}

.um-stat-card.active-filter .um-stat-number,
	.um-stat-card.active-filter .um-stat-label {
	font-weight: 700;
}

.um-stat-success .um-stat-number,
	.um-stat-success .um-stat-icon,
	.um-card-success .um-card-number,
	.um-card-success .um-card-icon {
	color: #3c763d;
}

.um-stat-warning .um-stat-number,
	.um-stat-warning .um-stat-icon,
	.um-card-warning .um-card-number,
	.um-card-warning .um-card-icon {
	color: #8a6d3b;
}

.um-stat-danger .um-stat-number,
	.um-stat-danger .um-stat-icon,
	.um-card-danger .um-card-number,
	.um-card-danger .um-card-icon {
	color: #a94442;
}

.um-stat-info .um-stat-number,
	.um-stat-info .um-stat-icon,
	.um-card-info .um-card-number,
	.um-card-info .um-card-icon {
	color: #31708f;
}

.um-stat-primary .um-stat-number,
	.um-stat-primary .um-stat-icon,
	.um-card-primary .um-card-number,
	.um-card-primary .um-card-icon {
	color: #337ab7;
}

.um-stat-muted .um-stat-number,
	.um-stat-muted .um-stat-icon,
	.um-card-muted .um-card-number,
	.um-card-muted .um-card-icon {
	color: #777777;
}

.um-stat-purple .um-stat-number,
	.um-stat-purple .um-stat-icon,
	.um-card-purple .um-card-number,
	.um-card-purple .um-card-icon {
	color: #6f42c1;
}

.um-stat-secondary {
	display:block;
	margin-top:4px;
	font-size:12px;
	color:#777;
	font-weight:400;
}

.um-card-grid {
	display: flex;
	flex-wrap: wrap;
	margin-left: -7.5px;
	margin-right: -7.5px;
}

.um-card-cell {
	flex: 1 1 190px;
	padding-left: 7.5px;
	padding-right: 7.5px;
}

/*************************************************************************
 * Status and Badges
 *************************************************************************/

/* Status and Health Indicators ------------------------------------------- */

.um-status,
.um-badge {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
}

.um-status-active,
.um-status-success,
.um-badge-success {
	background: #dff0d8;
	color: #3c763d;
}

.um-status-warning,
.um-status-pending,
.um-badge-warning {
	background: #fcf8e3;
	color: #8a6d3b;
}

.um-status-danger,
.um-status-error,
.um-status-locked,
.um-badge-danger {
	background: #f2dede;
	color: #843534;
}

.um-status-info,
.um-badge-info {
	background: #d9edf7;
	color: #31708f;
}

.um-status-disabled,
.um-badge-default {
	background: #eeeeee;
	color: #555555;
}

.um-status-pill {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.um-status-idle {
	background: #f4f4f4;
	color: #666;
}

.um-status-success {
	background: #dff0d8;
	color: #3c763d;
}

.um-status-warning {
	background: #fcf8e3;
	color: #8a6d3b;
}

.um-status-danger {
	background: #f2dede;
	color: #843534;
}

.um-status-info {
	background: #d9edf7;
	color: #31708f;
}

.um-status-primary {
	background: #eef7ff;
	color: #337ab7;
}

/*************************************************************************
 * Forms
 *************************************************************************/

.um-table tbody tr.selected-row td {
	background: #eef7ff !important;
}

.um-toggle input {
	display: none;
}

.um-toggle input:checked + .um-toggle-slider {
	background: #5cb85c;
}

.um-toggle input:checked + .um-toggle-slider:before {
	transform: translateX(24px);
}

.um-toggle-sm input:checked + .um-toggle-slider:before {
	transform: translateX(22px);
}

.select_language {
	margin-top: 4%;
}

#myaccount .input-disabled {
	background: cornsilk none repeat scroll 0 0;
}

/* Forms ------------------------------------------------------------------- */

#myaccount input,
#myaccount select,
#myperm select,
input[type="text"],
input[type="custom"],
input[type="password"],
.select select,
textarea,
textarea.form-control {
	height: 50px;
	margin: 0;
	padding: 0 20px;
	vertical-align: middle;
	background: #f8f8f8;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: none;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 50px;
	color: #888;
	transition: all 0.3s ease;
}

#myaccount input,
#myaccount select,
#myperm select {
	border-width: 3px;
}

textarea,
textarea.form-control {
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 30px;
}

#myaccount input:focus,
#myaccount textarea:focus,
#myaccount textarea.form-control:focus,
input[type="text"]:focus,
input[type="custom"]:focus,
input[type="password"]:focus,
textarea:focus,
textarea.form-control:focus {
	outline: 0;
	background: #fff;
	border: 3px solid #ccc;
	box-shadow: none;
}

input[type="text"]:-moz-placeholder,
input[type="password"]:-moz-placeholder,
textarea:-moz-placeholder,
textarea.form-control:-moz-placeholder {
	color: #888;
}

input[type="text"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
textarea.form-control:-ms-input-placeholder {
	color: #888;
}

input[type="text"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
	color: #888;
}

input.disabled {
	border: 1px solid #f2f2f2;
	background-color: #f2f2f2;
}

input.required,
textarea.required {
	border: 1px solid #00a8e6;
}

input.validation-failed,
textarea.validation-failed {
	border: 1px solid #f30;
	color: #f30;
}

input.validation-passed,
textarea.validation-passed {
	border: 1px solid #0c0;
	color: #000;
}

.form-horizontal .form-group {
	margin-left: 0;
	margin-right: 0;
}

.form-group .form-control:last-child {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.control-label {
	text-align: left !important;
	padding-bottom: 7px;
}

select.form-control:focus {
	border-color: #e9ab66;
	box-shadow: none;
}

select:hover {
	color: #444645;
	background: #ddd;
}

.um-config-field {
	margin-bottom: 20px;
}

.um-config-label {
	display: block;
	margin-bottom: 0px;
	font-weight: 600;
	color: #333;
}

.um-config-field .form-control {
	width: 100%;
}

.um-config-field .trumbowyg-box,
.um-config-field .trumbowyg-editor {
	border-radius: 6px;
}

.um-proxy-toolbar .input-group-btn:first-child {
	width: 110px;
}

.debug-role-banner .form-control {
	margin-bottom: 0;
}

/* Increment Controls ------------------------------------------------------ */

.input-group-btn-vertical {
	display: table-cell;
	position: relative;
	vertical-align: middle;
	width: 1%;
}

::-moz-selection {
	background: #399599;
	color: #fff;
	text-shadow: none;
}

::selection {
	background: #399599;
	color: #fff;
	text-shadow: none;
}

.inputaction {
	float: right;
	margin-right: 6px;
	margin-top: -40px;
	position: relative;
	z-index: 2;
}

.modal-body form textarea {
	height: 100px;
}

.modal-body form .input-error {
	border-color: #399599;
}

form .form-bottom textarea {
	height: 100px;
}

form .form-bottom .input-error {
	border-color: #19b9e7;
}

[id^="form-question-"],
input[id^="form-question-"] {
	border: none;
	line-height: 10px;
	padding: 0 5px;
	color: #000;
	font-weight: bold;
	background-color: transparent;
	resize: none;
	outline: none;
	width: 100%;
}

input[id^="form-question-"]:focus {
	border: thin dotted;
}

input[id^="passwordlist"] {
	height: 34px;
	background-color: transparent;
}

.recover-chooser .recover-chooser-item.selected,
.recover-chooser .recover-chooser-item.click {
	border: 4px solid #428bca;
	padding: 8px;
	opacity: 1;
}

.recover-chooser .recover-chooser-item input {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
}

.input-group-btn .btn-group {
	display: flex !important;
}

/* Bootstrap Select v1.5.4 ------------------------------------------------
   Kept as legacy vendor block. Recommendation: keep vendor CSS separate in
   future releases so custom UM rules are easier to maintain.
   ---------------------------------------------------------------------- */

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="span"] {
	float: none;
	display: inline-block;
	margin-bottom: 10px;
	margin-left: 0;
}

.form-search .bootstrap-select.btn-group,
.form-inline .bootstrap-select.btn-group,
.form-horizontal .bootstrap-select.btn-group {
	margin-bottom: 0;
}

.bootstrap-select.form-control {
	margin-bottom: 0;
	padding: 0;
	border: 0;
}

.bootstrap-select.btn-group.pull-right,
.bootstrap-select.btn-group[class*="span"].pull-right,
.row-fluid .bootstrap-select.btn-group[class*="span"].pull-right {
	float: right;
}

.input-append .bootstrap-select.btn-group {
	margin-left: -1px;
}

.input-prepend .bootstrap-select.btn-group {
	margin-right: -1px;
}

.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	width: 220px;
}

.bootstrap-select {
	width: 220px;
}

.bootstrap-select.form-control:not([class*="span"]) {
	width: 100%;
}

.bootstrap-select > .btn {
	width: 100%;
	padding-right: 25px;
}

.error .bootstrap-select .btn {
	border: 1px solid #b94a48;
}

.bootstrap-select.show-menu-arrow.open > .btn {
	z-index: 2051;
}

.bootstrap-select .btn:focus {
	outline: thin dotted #333 !important;
	outline: 5px auto -webkit-focus-ring-color !important;
	outline-offset: -2px;
}

.bootstrap-select.btn-group .btn .filter-option {
	display: inline-block;
	overflow: hidden;
	width: 100%;
	float: left;
	text-align: left;
}

.bootstrap-select.btn-group .btn .caret {
	position: absolute;
	top: 50%;
	right: 12px;
	margin-top: -2px;
	vertical-align: middle;
}

.bootstrap-select.btn-group > .disabled,
.bootstrap-select.btn-group .dropdown-menu li.disabled > a {
	cursor: not-allowed;
}

.bootstrap-select.btn-group > .disabled:focus {
	outline: none !important;
}

.bootstrap-select.btn-group[class*="span"] .btn {
	width: 100%;
}

.bootstrap-select.btn-group .dropdown-menu {
	min-width: 100%;
	z-index: 2000;
	box-sizing: border-box;
}

.bootstrap-select.btn-group .dropdown-menu.inner {
	position: static;
	border: 0;
	padding: 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}

.bootstrap-select.btn-group .dropdown-menu dt {
	display: block;
	padding: 3px 20px;
	cursor: default;
}

.bootstrap-select.btn-group .div-contain {
	overflow: hidden;
}

.bootstrap-select.btn-group .dropdown-menu li {
	position: relative;
}

.bootstrap-select.btn-group .dropdown-menu li > a.opt {
	position: relative;
	padding-left: 35px;
}

.bootstrap-select.btn-group .dropdown-menu li > a {
	cursor: pointer;
}

.bootstrap-select.btn-group .dropdown-menu li > dt small,
.bootstrap-select.btn-group .dropdown-menu li small {
	font-weight: normal;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a i.check-mark {
	position: absolute;
	display: inline-block;
	right: 15px;
	margin-top: 2.5px;
}

.bootstrap-select.btn-group .dropdown-menu li a i.check-mark {
	display: none;
}

.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
	margin-right: 34px;
}

.bootstrap-select.btn-group .dropdown-menu li small {
	padding-left: 0.5em;
}

.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:hover small,
.bootstrap-select.btn-group .dropdown-menu li:not(.disabled) > a:focus small,
.bootstrap-select.btn-group .dropdown-menu li.active:not(.disabled) > a small {
	color: rgba(255, 255, 255, 0.4);
}

.bootstrap-select.show-menu-arrow .dropdown-toggle::before,
.bootstrap-select.show-menu-arrow .dropdown-toggle::after {
	content: "";
	display: none;
	position: absolute;
	bottom: -4px;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle::before {
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid rgba(0, 0, 0, 0.2);
	left: 9px;
}

.bootstrap-select.show-menu-arrow .dropdown-toggle::after {
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid white;
	left: 10px;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle::before {
	bottom: auto;
	top: -3px;
	border-top: 7px solid rgba(0, 0, 0, 0.2);
	border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle::after {
	bottom: auto;
	top: -3px;
	border-top: 6px solid #fff;
	border-bottom: 0;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle::before {
	right: 12px;
	left: auto;
}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle::after {
	right: 13px;
	left: auto;
}

.bootstrap-select.show-menu-arrow.open > .dropdown-toggle::before,
.bootstrap-select.show-menu-arrow.open > .dropdown-toggle::after {
	display: block;
}

.bootstrap-select.btn-group .no-results {
	padding: 3px;
	background: #f5f5f5;
	margin: 0 5px;
}

.bootstrap-select.btn-group .dropdown-menu .notify {
	position: absolute;
	bottom: 5px;
	width: 96%;
	margin: 0 2%;
	min-height: 26px;
	padding: 3px 5px;
	background: #f5f5f5;
	border: 1px solid #e3e3e3;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	pointer-events: none;
	opacity: 0.9;
	box-sizing: border-box;
}

.bootstrap-select.fit-width {
	width: auto !important;
}

.bootstrap-select.btn-group.fit-width .btn .filter-option {
	position: static;
}

.bootstrap-select.btn-group.fit-width .btn .caret {
	position: static;
	top: auto;
	margin-top: -1px;
}

.control-group.error .bootstrap-select .dropdown-toggle {
	border-color: #b94a48;
}

.bootstrap-select-searchbox,
.bootstrap-select .bs-actionsbox {
	padding: 4px 8px;
}

.bootstrap-select .bs-actionsbox {
	float: left;
	width: 100%;
	box-sizing: border-box;
}

.bootstrap-select-searchbox + .bs-actionsbox {
	padding: 0 8px 4px;
}

.bootstrap-select-searchbox input {
	margin-bottom: 0;
}

.bootstrap-select .bs-actionsbox .btn-group button {
	width: 50%;
}

/*************************************************************************
 * Toolbars and Filters
 *************************************************************************/

/* Toolbars and Filters ----------------------------------------------------- */

.um-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--um-space-2, 8px);
	margin-bottom: var(--um-space-4, 16px);
}

.um-filter-chip {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 6px 12px;
	border: 1px solid var(--um-border, #dee2e6);
	border-radius: 999px;
	background: var(--um-surface-alt, #f8f9fa);
	color: var(--um-text, #333);
	font-size: 12px;
	cursor: pointer;
}

.um-filter-chip:hover,
.um-filter-chip.active {
	background: var(--um-primary-light, #e7f5f5);
	border-color: var(--um-primary, #399599);
	color: var(--um-primary-dark, #2b7477);
}

.um-group-filter-empty {
	padding: 15px;
	text-align: center;
	color: #777;
}

.um-group-manager .um-toolbar {
	margin-bottom: 15px;
}

.um-proxy-toolbar .btn {
	height: 50px;
}

.um-proxy-toolbar {
	margin-bottom: 15px;
}

/*************************************************************************
 * Tables
 *************************************************************************/

/* Modern Tables ------------------------------------------------------------ */

.um-table {
	width: 100%;
	margin-bottom: 0;
	background: #fff;
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	background: var(--um-surface, #fff);
	border-collapse: collapse;
}

.um-table-wrap {
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.um-table > thead > tr > th {
	background: #f7f8fa;
	color: #444;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 12px 10px;
	border-top: 0;
	border-bottom: 2px solid #dee2e6;
	border-left: 0;
	border-right: 0;
	vertical-align: middle;
}

.um-table > tbody > tr > td {
	padding: 10px;
	vertical-align: middle;
	border-top: 1px solid #edf0f2;
	border-left: 0;
	border-right: 0;
}

.um-table-hover > tbody > tr:hover > td {
	background: #f7fbff;
}

.um-table-clickable tbody tr {
	cursor: pointer;
}

.um-table-clickable tbody tr:hover td {
	background: #f7fbff;
}

.um-table-compact > tbody > tr > td {
	padding: 7px 8px;
}

.um-table-compact > thead > tr > th {
	padding: 10px 8px;
}

.um-table-striped > tbody > tr:nth-child(even) > td {
	background: #fafafa;
}

.um-row-success td {
	background: #f7fff7;
}

.um-row-warning td {
	background: #fff9ec;
}

.um-row-danger td {
	background: #fff4f4;
}

.um-row-disabled td {
	color: #777;
	background: #f8f8f8;
}

.um-table-sortable th {
	cursor: pointer;
	user-select: none;
}

.um-table-sortable th:hover {
	background: #eef5ff;
}

.um-table-actions {
	white-space: nowrap;
	text-align: center;
}

.um-table-actions .btn {
	margin-bottom: 2px;
}

.um-table-empty {
	padding: 35px;
	text-align: center;
	color: #777;
	background: #fff;
}

.um-table-empty .fa,
.um-table-empty .glyphicon {
	font-size: 32px;
	opacity: .25;
	margin-bottom: 10px;
}

.um-table th,
.um-table td {
	padding: 10px 12px;
	border-top: 1px solid var(--um-border, #dee2e6);
	vertical-align: middle;
}

.um-table thead th {
	background: var(--um-surface-alt, #f8f9fa);
	color: var(--um-text, #333);
	font-weight: 700;
}

.um-table tbody tr:hover {
	background: #f5f8fa;
}

.um-table-sm th,
.um-table-sm td {
	padding: 6px 8px;
	font-size: 12px;
}

.updater-table td,
.updater-table th {
	vertical-align: middle;
}

.um-json-builder table {
	margin-bottom: 0;
}

.table th,
.table td {
	font-weight: normal;
	font-size: 12px;
	padding: 8px 15px;
	line-height: 20px;
	text-align: left;
	vertical-align: middle;
	border-top: 1px solid #ddd;
}

.table thead th {
	background: #eee;
	vertical-align: bottom;
}

.table tbody > tr:nth-child(odd) > td,
.table tbody > tr:nth-child(odd) > th {
	background-color: #fafafa;
}

/*************************************************************************
 * Alerts and Notifications
 *************************************************************************/

.um-health-banner {
	border-radius: var(--um-radius-lg, 12px);
	padding: var(--um-space-5, 24px);
	margin-bottom: var(--um-space-4, 16px);
	color: #fff;
	box-shadow: var(--um-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
}

.um-health-banner.success {
	background: linear-gradient(135deg, #2e7d32, #43a047);
}

.um-health-banner.warning {
	background: linear-gradient(135deg, #b36b00, #f0ad4e);
}

.um-health-banner.danger {
	background: linear-gradient(135deg, #9f1c1c, #d9534f);
}

/* Notifications and Toasts ------------------------------------------------- */

.um-toast {
	position: fixed;
	left: 30px;
	bottom: 30px;
	z-index: 99999999;
	width: 260px;
	padding: 12px 14px;
	border-radius: var(--um-radius-md, 8px);
	box-shadow: var(--um-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.12));
	background: var(--um-surface, #fff);
	color: var(--um-text, #333);
	border-left: 5px solid var(--um-secondary, #337ab7);
}

.um-toast-success {
	border-left-color: var(--um-success, #28a745);
}

.um-toast-warning {
	border-left-color: var(--um-warning, #ffc107);
}

.um-toast-danger {
	border-left-color: var(--um-danger, #dc3545);
}

.um-toast-info {
	border-left-color: var(--um-info, #17a2b8);
}

.um-group-list .um-empty-state {
	display: block;
	padding: 30px 20px;
}

.um-group-list .um-empty-state i {
	display: block;
	margin-bottom: 10px;
	font-size: 28px;
	opacity: .45;
}

.um-group-list .um-empty-state h4 {
	margin-top: 0;
	margin-bottom: 5px;
}

.um-group-list .um-empty-state p {
	margin-bottom: 0;
}

.um-empty-state {
	color: #777;
	text-align: center;
	padding: 18px;
	text-align: center;
	padding: 80px 20px;
	color: #999999;
}

.um-empty-state i {
	margin-bottom: 15px;
	color: #bbbbbb;
}

.um-empty-state h4 {
	margin-top: 10px;
}

/* Notifications ---------------------------------------------------------- */

.notify {
	position: fixed;
	z-index: 99999999;
	width: 220px;
	left: 30px;
	bottom: 30px;
}

.notify .alert {
	box-shadow: 0 2px 5px -1px #000;
	display: none;
}

/*************************************************************************
 * Updater
 *************************************************************************/

.updater-page {
	margin-bottom: 30px;
}

.updater-header {
	margin-bottom: 20px;
}

.updater-warning {
	margin-bottom: 20px;
}

.updater-actions {
	margin-bottom: 20px;
}

.updater-actions .btn {
	margin-right: 5px;
	margin-bottom: 5px;
}

.updater-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 20px;
}

.updater-stat-card {
	flex: 1;
	min-width: 220px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	padding: 15px;
}

.updater-stat-title {
	font-size: 12px;
	text-transform: uppercase;
	color: #777;
	margin-bottom: 5px;
}

.updater-stat-value {
	font-size: 24px;
	font-weight: bold;
}

.updater-stat-subtitle {
	font-size: 12px;
	color: #777;
}

.updater-commit {
	margin-bottom: 20px;
}

.updater-commit-message {
	font-style: italic;
	color: #555;
}

.updater-progress-panel {
	margin-bottom: 20px;
}

.updater-progress-text {
	margin-top: 10px;
	font-size: 13px;
	color: #555;
}

.updater-section {
	margin-bottom: 25px;
}

.updater-table {
	width: 100%;
}

.updater-protected-path {
	color: #8a6d3b;
	font-weight: bold;
}

.updater-local-newer {
	color: #31708f;
	font-weight: bold;
}

.updater-log {
	max-height: 450px;
	overflow-y: auto;
	background: #111;
	color: #ddd;
	padding: 15px;
	font-family: Consolas, monospace;
	font-size: 12px;
	white-space: pre-wrap;
	border-radius: 4px;
}

.um-updater-page {
	margin-top: 15px;
}

.um-updater-header {
	margin-bottom: 16px;
	border-bottom: 0;
}

.um-updater-title {
	margin: 0 0 5px;
	font-weight: 600;
}

.um-updater-subtitle {
	color: #6c757d;
	margin: 0;
}

.um-updater-actions .btn {
	margin-right: 8px;
	margin-bottom: 8px;
}

.um-update-card {
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	background: #fff;
	padding: 16px;
	min-height: 104px;
	margin-bottom: 15px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.um-update-card:hover {
	border-color: var(--um-secondary, #337ab7);
	box-shadow: 0 3px 10px rgba(51, 122, 183, .14);
	transform: translateY(-1px);
}

.um-update-card .card-number {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.15;
	word-break: break-word;
}

.um-update-card .card-label {
	color: #777;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-top: 8px;
}

.um-update-card .card-icon {
	float: right;
	font-size: 28px;
	opacity: .22;
	margin-top: 4px;
}

.um-updater-page .progress,
.um-updater-progress {
	height: 22px;
	border-radius: 12px;
	margin-bottom: 0;
}

.um-updater-page .progress-bar,
.um-updater-progress .progress-bar {
	line-height: 22px;
	font-weight: 600;
}

.um-update-summary-grid {
	margin-bottom: -15px;
}

.um-updater-log {
	background: #1f2933;
	color: #e5e7eb;
	border-radius: 8px;
	padding: 14px;
	min-height: 420px;
	max-height: 720px;
	overflow: auto;
	font-family: Menlo, Consolas, monospace;
	font-size: 12px;
	white-space: pre-wrap;
}

/*************************************************************************
 * Groups
 *************************************************************************/

.um-group-manager {
	margin-bottom: 20px;
}

.um-group-count {
	margin-left: 8px;
	vertical-align: middle;
}

.um-group-error,
	.um-group-success {
	margin-bottom: 15px;
}

.um-group-list {
	min-height: 70px;
}

.um-group-chip {
	display: inline-flex;
	align-items: center;
	position: relative;
	margin: 0 8px 8px 0;
	padding: 7px 12px;
	border: 1px solid #d5dce5;
	border-radius: 20px;
	background: #f7f9fc;
	color: #333;
	font-size: 13px;
	line-height: 1.2;
	transition: all .15s ease;
}

.um-group-chip:hover {
	background: #eef4fa;
	border-color: #b8c8da;
}

.um-group-chip-icon {
	margin-right: 6px;
	font-size: 12px;
}

.um-group-name {
	display: inline-block;
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.um-group-chip.is-protected {
	background: #f9f5e8;
	border-color: #ead9a8;
	color: #6b5517;
}

.um-group-chip.is-protected .um-group-chip-icon {
	color: #a27800;
}

.um-group-remove {
	margin-left: 8px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #c9302c;
	cursor: pointer;
}

.um-group-remove:hover {
	color: #a61f1b;
}

.um-group-remove:focus {
	outline: 0;
}

/*************************************************************************
 * User Search
 *************************************************************************/

.um-user-search-page {
	padding: 10px;
}

.um-results-body {
	min-height: 500px;
	padding: 15px;
}

/*************************************************************************
 * Configuration
 *************************************************************************/

.um-config-help {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: #777;
}

.um-json-builder {
	margin-bottom: 20px;
}

.um-json-summary {
	margin-top: 10px;
	margin-bottom: 10px;
}

.um-json-builder .btn-group {
	margin-top: 10px;
}

.um-form-actions {
	margin-top: 30px;
	padding-top: 20px;
	border-top: 1px solid #e5e5e5;
}

.um-form-actions .btn {
	min-width: 140px;
}

.um-form-actions .fa {
	margin-right: 5px;
}

/*************************************************************************
 * Permissions
 *************************************************************************/

.matrix-read.active {
	background: #337ab7;
	border-color: #337ab7;
	color: #fff;
}

.matrix-create.active {
	background: #198754;
	border-color: #198754;
	color: #fff;
}

.matrix-edit.active {
	background: #f0ad4e;
	border-color: #f0ad4e;
	color: #fff;
}

.matrix-delete.active {
	background: #d9534f;
	border-color: #d9534f;
	color: #fff;
}

.matrix-execute.active {
	background: #6f42c1;
	border-color: #6f42c1;
	color: #fff;
}

.matrix-deny.active {
	background: #444;
	border-color: #444;
	color: #fff;
}

/*************************************************************************
 * Application Footer
 *************************************************************************/
.um-app-footer {
	flex: 0 0 auto;
	padding: 20px 0;
	border-top: 1px solid #e1e5ee;
	background: #ffffff;
	color: #687086;
	font-size: 12px;
}
.um-footer-content {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.um-footer-brand {
	margin-bottom: 2px;
	color: #25293a;
	font-size: 14px;
	font-weight: 700;
}
.um-footer-meta {
	margin-top: 4px;
}
.um-footer-link {
	display: inline-block;
	color: #315efb;
	font-weight: 600;
	text-decoration: none;
}
.um-footer-link:hover,
.um-footer-link:focus {
	color: #2448c7;
	text-decoration: underline;
}
.um-footer-stats {
	margin-top: 4px;
	color: #8a91a4;
}
.um-app-footer .form-control {
	max-width: 220px;
	margin: 0 auto;
	border-color: #dfe3ec;
	border-radius: 8px;
	box-shadow: none;
}
@media (max-width: 767px) {
	.um-app-footer,
	.um-app-footer .text-right {
		text-align: center !important;
	}
	.um-footer-content {
		display: block;
	}
	.um-footer-content > div {
		margin-bottom: 12px;
	}
	.um-footer-content > div:last-child {
		margin-bottom: 0;
	}
}

/*************************************************************************
 * User Manager Lightweight Type-Ahead
 *************************************************************************/
.um-typeahead {
	position: relative;
}

.um-typeahead-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1050;
	display: none;
	max-height: 360px;
	overflow-x: hidden;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ddd;
	border-top: 0;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.um-typeahead-item {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin: 0;
	color: #333;
	text-align: left;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
}

.um-typeahead-item:last-child {
	border-bottom: 0;
}

.um-typeahead-item:hover,
.um-typeahead-item:focus,
.um-typeahead-item.active {
	color: #333;
	text-decoration: none;
	background: #eef7ff;
	outline: 0;
}

.um-typeahead-name,
.um-typeahead-meta,
.um-typeahead-footer {
	display: block;
}

.um-typeahead-name {
	font-weight: 600;
}

.um-typeahead-meta {
	color: #777;
	font-size: 12px;
	line-height: 1.45;
	word-break: break-word;
}

.um-typeahead-footer {
	margin-top: 5px;
}

.um-typeahead-domain {
	margin-left: 8px;
	color: #777;
	font-size: 11px;
}

.um-typeahead-message {
	padding: 12px;
	background: #fff;
}

@media (max-width: 767px) {
	.um-typeahead-results {
		max-height: 280px;
	}
}

/*************************************************************************
 * User Manager 3.0 - Configuration Media Control
 *
 * Add this section to /css/style.css.
 * Uses the design variables provided by /css/core.css and supports
 * the default light theme and [data-theme="dark"].
 *************************************************************************/

/*************************************************************************
 * Media Card
 *************************************************************************/

.config-media-card {
	margin-bottom: var(--um-space-4, 16px);
	background: var(--um-surface, #ffffff);
	color: var(--um-text, #333333);
	border: 1px solid var(--um-border, #dee2e6);
	border-radius: var(--um-radius-md, 8px);
	box-shadow: var(--um-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
}

.config-media-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--um-space-3, 12px);
	padding-bottom: var(--um-space-3, 12px);
	margin-bottom: var(--um-space-4, 16px);
	border-bottom: 1px solid var(--um-border, #dee2e6);
}

.config-media-heading {
	min-width: 0;
}

.config-media-title {
	margin: 0;
	color: var(--um-text, #333333);
	font-size: 16px;
	font-weight: 700;
}

.config-media-description,
.config-media-card .help-block {
	margin: var(--um-space-1, 4px) 0 0;
	color: var(--um-text-muted, #6c757d);
}

.config-media-badge {
	flex: 0 0 auto;
	white-space: nowrap;
}

.config-media-body {
	color: var(--um-text, #333333);
}

/*************************************************************************
 * Media Preview
 *************************************************************************/

.config-media-preview-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 230px;
	padding: var(--um-space-3, 12px);
	background: var(--um-surface-alt, #f8f9fa);
	border: 1px solid var(--um-border, #dee2e6);
	border-radius: var(--um-radius-md, 8px);
	overflow: hidden;
}

.config-media-preview {
	display: block;
	max-width: 100%;
	max-height: 210px;
	width: auto;
	height: auto;
	object-fit: contain;
	background: transparent;
	border: 0;
}

/*************************************************************************
 * Form Controls And Actions
 *************************************************************************/

.config-media-path-group {
	margin-bottom: var(--um-space-3, 12px);
}

.config-media-field label {
	color: var(--um-text, #333333);
}

.config-media-field .form-control,
.config-media-field .input-group-addon,
.config-media-modal .form-control,
.config-media-modal .input-group-addon {
	background: var(--um-surface-alt, #f8f9fa);
	color: var(--um-text, #333333);
	border-color: var(--um-border, #dee2e6);
}

.config-media-field .form-control:focus,
.config-media-modal .form-control:focus {
	background: var(--um-surface, #ffffff);
	color: var(--um-text, #333333);
	border-color: var(--um-primary, #399599);
	box-shadow: 0 0 0 3px rgba(57, 149, 153, .18);
}

.config-media-field .form-control::placeholder,
.config-media-modal .form-control::placeholder {
	color: var(--um-text-muted, #6c757d);
	opacity: 1;
}

.config-media-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--um-space-2, 8px);
	margin-bottom: var(--um-space-2, 8px);
}

.config-media-actions .btn,
.media-upload-label {
	margin: 0;
}

.media-message {
	min-height: 20px;
	margin-top: var(--um-space-2, 8px);
	color: var(--um-text-muted, #6c757d);
	font-weight: 600;
}

.media-message.text-success {
	color: var(--um-success, #28a745);
}

.media-message.text-danger {
	color: var(--um-danger, #dc3545);
}

.media-message.text-info {
	color: var(--um-info, #17a2b8);
}

.config-media-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--um-space-2, 8px);
	margin-top: var(--um-space-2, 8px);
}

/*************************************************************************
 * Media Browser Modal
 *************************************************************************/

.config-media-modal .modal-content {
	background: var(--um-surface, #ffffff);
	color: var(--um-text, #333333);
	border-color: var(--um-border, #dee2e6);
	border-radius: var(--um-radius-lg, 12px);
	box-shadow: var(--um-shadow-md, 0 4px 12px rgba(0, 0, 0, .12));
	overflow: hidden;
}

.config-media-modal .modal-header,
.config-media-modal .modal-footer {
	background: var(--um-surface-alt, #f8f9fa);
	border-color: var(--um-border, #dee2e6);
}

.config-media-modal .modal-title,
.config-media-modal .close {
	color: var(--um-text, #333333);
}

.config-media-modal .close {
	text-shadow: none;
	opacity: .75;
}

.config-media-modal .close:hover,
.config-media-modal .close:focus {
	color: var(--um-text, #333333);
	opacity: 1;
}

.media-search-wrap {
	margin-bottom: var(--um-space-4, 16px);
}

.media-browser-loading,
.media-browser-empty {
	padding: var(--um-space-6, 32px) var(--um-space-4, 16px);
}

.media-browser-empty {
	display: none;
}

.media-browser-empty .fa {
	display: block;
	margin-bottom: var(--um-space-2, 8px);
	font-size: 36px;
	opacity: .35;
}

.media-browser-item {
	margin-bottom: var(--um-space-3, 12px);
}

.media-browser-select {
	display: block;
	width: 100%;
	min-height: 184px;
	padding: var(--um-space-2, 8px);
	background: var(--um-surface, #ffffff);
	color: var(--um-text, #333333);
	border: 1px solid var(--um-border, #dee2e6);
	border-radius: var(--um-radius-md, 8px);
	box-shadow: var(--um-shadow-sm, 0 1px 2px rgba(0, 0, 0, .06));
	text-align: left;
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.media-browser-select:hover,
.media-browser-select:focus {
	color: var(--um-text, #333333);
	border-color: var(--um-primary, #399599);
	box-shadow: var(--um-shadow-md, 0 4px 12px rgba(0, 0, 0, .12));
	transform: translateY(-1px);
	outline: none;
}

.media-browser-select img {
	display: block;
	width: 100%;
	height: 118px;
	object-fit: contain;
	background: var(--um-surface-alt, #f8f9fa);
	border: 1px solid var(--um-border, #dee2e6);
	border-radius: var(--um-radius-sm, 4px);
}

.media-browser-name,
.media-browser-meta {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.media-browser-name {
	margin-top: var(--um-space-2, 8px);
	font-weight: 700;
}

.media-browser-meta {
	margin-top: var(--um-space-1, 4px);
	color: var(--um-text-muted, #6c757d);
	font-size: 11px;
}


/*************************************************************************
 * Light And Dark Theme Compatibility
 *************************************************************************/

.config-media-field .btn-default,
.config-media-modal .btn-default {
	background: var(--um-surface-alt, #f8f9fa);
	color: var(--um-text, #333333);
	border-color: var(--um-border, #dee2e6);
}

.config-media-field .btn-default:hover,
.config-media-field .btn-default:focus,
.config-media-modal .btn-default:hover,
.config-media-modal .btn-default:focus {
	background: var(--um-surface-muted, #f4f4f4);
	color: var(--um-text, #333333);
	border-color: var(--um-border-strong, #cccccc);
}

[data-theme="dark"] .config-media-card,
[data-theme="dark"] .config-media-modal .modal-content,
[data-theme="dark"] .media-browser-select {
	color: var(--um-text, #f3f6f8);
}

[data-theme="dark"] .config-media-field .form-control:focus,
[data-theme="dark"] .config-media-modal .form-control:focus {
	box-shadow: 0 0 0 3px rgba(57, 149, 153, .28);
}

/*************************************************************************
 * Responsive Layout
 *************************************************************************/

@media (max-width: 991px) {
	.config-media-preview-wrap {
		margin-bottom: var(--um-space-3, 12px);
	}
}

@media (max-width: 767px) {
	.config-media-header {
		align-items: stretch;
		flex-direction: column;
	}

	.config-media-badge {
		align-self: flex-start;
	}

	.config-media-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.config-media-actions .btn,
	.config-media-actions .media-upload-label {
		width: 100%;
	}
}

@media (max-width: 420px) {
	.config-media-actions {
		grid-template-columns: 1fr;
	}
}


/*************************************************************************
 * Legacy Bootstrap Compatibility
 *************************************************************************/

.tabbable-line > .nav-tabs > li.open .dropdown-menu,
.tabbable-line > .nav-tabs > li:hover .dropdown-menu {
	margin-top: 0;
}

#admin.dropdown-menu > li > a {
	color: #428bca;
}

#admin.dropdown ul.dropdown-menu {
	border-radius: 4px;
	margin-top: 20px;
	width: 200px;
	margin-left: -30px;
}

#admin.dropdown ul.dropdown-menu::before,
#admin.dropdown ul.dropdown-menu::after {
	content: "";
	position: absolute;
	z-index: 10;
}

#admin.dropdown ul.dropdown-menu::before {
	border-bottom: 10px solid #34495e;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	top: -10px;
	right: 16px;
}

#admin.dropdown ul.dropdown-menu::after {
	border-bottom: 12px solid #34495e;
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	top: -12px;
	right: 14px;
	z-index: 9;
}

.admin.dropdown-menu {
	background-color: #34495e;
	box-shadow: none;
	width: 250px;
	margin-left: -125px;
}

.admin.dropdown-menu .divider {
	background-color: #e5e5e5;
}

.admin.dropdown-menu > li > a {
	color: #f5f5f5;
}

.admin.dropdown-menu > li > a:hover {
	color: #34495e;
}

/* Modal ------------------------------------------------------------------- */

.modal-content {
	border-radius: 4px;
	border: 0;
	text-align: left;
}

.modal-header {
	padding: 25px 25px 15px;
	background: #fff;
	border: 0;
	border-bottom: 1px solid #ddd;
	border-radius: 4px 4px 0 0;
}

.modal-header .close {
	font-size: 36px;
	color: #888;
	font-weight: 300;
	text-shadow: none;
	opacity: 1;
}

.modal-title {
	margin-bottom: 10px;
	line-height: 30px;
}

.modal-body {
	padding: 25px 25px 30px;
	background: #eee;
	text-align: left;
	border-radius: 0 0 4px 4px;
}

.modal-body img {
	margin-bottom: 15px;
}

.modal-dialog {
	display: inline-block;
	text-align: left;
	vertical-align: middle;
}

/* Panels with Nav Tabs ---------------------------------------------------- */

.panel.with-nav-tabs .panel-heading {
	padding: 5px 5px 0;
}

.panel.with-nav-tabs .nav-tabs {
	border-bottom: none;
}

.panel.with-nav-tabs .nav-justified {
	margin-bottom: -1px;
}

.with-nav-tabs.panel-default .nav-tabs > li > a,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
	color: #777;
}

.with-nav-tabs.panel-default .nav-tabs > .open > a,
.with-nav-tabs.panel-default .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-default .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-default .nav-tabs > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li > a:focus {
	color: #777;
	background-color: #ddd;
	border-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs > li.active > a,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.active > a:focus {
	color: #555;
	background-color: #fff;
	border-color: #ddd;
	border-bottom-color: transparent;
}

.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu {
	background-color: #f5f5f5;
	border-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a {
	color: #777;
}

.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
	background-color: #ddd;
}

.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-default .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
	color: #fff;
	background-color: #555;
}

.with-nav-tabs.panel-info .nav-tabs > li > a,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
	color: #31708f;
}

.with-nav-tabs.panel-info .nav-tabs > .open > a,
.with-nav-tabs.panel-info .nav-tabs > .open > a:hover,
.with-nav-tabs.panel-info .nav-tabs > .open > a:focus,
.with-nav-tabs.panel-info .nav-tabs > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li > a:focus {
	color: #31708f;
	background-color: #bce8f1;
	border-color: transparent;
}

.with-nav-tabs.panel-info .nav-tabs > li.active > a,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.active > a:focus {
	color: #31708f;
	background-color: #fff;
	border-color: #bce8f1;
	border-bottom-color: transparent;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu {
	background-color: #d9edf7;
	border-color: #bce8f1;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a {
	color: #31708f;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > li > a:focus {
	background-color: #bce8f1;
}

.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:hover,
.with-nav-tabs.panel-info .nav-tabs > li.dropdown .dropdown-menu > .active > a:focus {
	color: #fff;
	background-color: #31708f;
}

/* Event Panel ------------------------------------------------------------- */

.panel-table .panel-body {
	padding: 0;
}

.panel-table .panel-body .table-bordered {
	border-style: none;
	margin: 0;
}

.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type {
	text-align: center;
	width: 100px;
}

.panel-table .panel-body .table-bordered > thead > tr > th:last-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:last-of-type {
	border-right: 0;
}

.panel-table .panel-body .table-bordered > thead > tr > th:first-of-type,
.panel-table .panel-body .table-bordered > tbody > tr > td:first-of-type {
	border-left: 0;
}

.panel-table .panel-body .table-bordered > tbody > tr:first-of-type > td {
	border-bottom: 0;
}

.panel-table .panel-body .table-bordered > thead > tr:first-of-type > th {
	border-top: 0;
}

.panel-table .panel-footer .pagination {
	margin: 0;
}

.panel-table .panel-footer .col {
	line-height: 34px;
	height: 34px;
}

.panel-table .panel-heading .col h3 {
	line-height: 30px;
	height: 30px;
}

.panel-table .panel-body .table-bordered > tbody > tr > td {
	line-height: 34px;
}

.dropdown.dropdown-lg .dropdown-menu {
	margin-top: -1px;
	padding: 6px 20px;
}

/******************************************************************************
 * Reset Password Dialog
 ******************************************************************************/

.um-reset-password-dialog {
	width: 100%;
	color: var(--um-text, #333333);
}

.um-reset-password-dialog .um-panel {
	overflow: visible;
}

.um-reset-password-dialog .um-panel-heading .fa {
	margin-right: 7px;
	color: var(--um-secondary, #337ab7);
}

.um-reset-password-dialog .form-control {
	height: 40px;
	padding: 8px 12px;
	background: var(--um-surface, #ffffff);
	border: 1px solid var(--um-border-strong, #cccccc);
	color: var(--um-text, #333333);
	font-family: var(--um-font, "Helvetica Neue", Helvetica, Arial, sans-serif);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
}

.um-reset-password-dialog .form-control:focus {
	background: var(--um-surface, #ffffff);
	border-color: var(--um-secondary, #337ab7);
	box-shadow: 0 0 0 2px rgba(51, 122, 183, 0.15);
	outline: 0;
}

.um-reset-password-dialog .input-group-addon,
.um-reset-password-dialog .input-group-btn .btn {
	height: 40px;
}

.um-reset-generated-password {
	font-family: Consolas, Monaco, "Courier New", monospace !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 0.03em;
}

.um-reset-password-dialog .help-block {
	color: var(--um-text-muted, #6c757d);
	font-size: 12px;
	line-height: 1.45;
}

.um-reset-preset-menu {
	max-height: 230px;
	overflow-y: auto;
}

.um-reset-preset-menu > li > a {
	font-family: Consolas, Monaco, "Courier New", monospace;
}

.um-reset-options {
	overflow: hidden;
	border: 1px solid var(--um-border, #dee2e6);
	border-radius: var(--um-radius-md, 8px);
	background: var(--um-surface-alt, #f8f9fa);
}

.um-reset-option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--um-space-4, 16px);
	min-height: 68px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--um-border, #dee2e6);
}

.um-reset-option:last-child {
	border-bottom: 0;
}

.um-reset-option-content {
	flex: 1 1 auto;
	min-width: 0;
}

.um-reset-option-label {
	display: block;
	margin: 0;
	color: var(--um-text, #333333);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.um-reset-option-description {
	margin: 4px 0 0;
	color: var(--um-text-muted, #6c757d);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
}

.um-reset-option .um-toggle {
	flex: 0 0 auto;
	margin: 0;
}

/* Keep legacy global input rules from overriding this component. */
.um-reset-password-dialog input[id^="passwordlist"] {
	height: 40px;
	background-color: var(--um-surface, #ffffff);
}

.bootstrap-dialog .um-reset-password-dialog .um-panel {
	margin-bottom: 0;
}

@media (max-width: 520px) {
	.um-reset-option {
		align-items: flex-start;
	}

	.um-reset-password-dialog .input-group-btn .btn {
		padding-right: 10px;
		padding-left: 10px;
	}
}

/*************************************************************************
 * Additional Components
 *************************************************************************/

/* ==========================================================================
   User Manager 3.0 - style.css
   Preview build with reusable UM components

   Purpose:
   - Keep main UM application styles in one place.
   - Add reusable components for Dashboard, Status Hub, Events, account pages,
     modals, tables, notifications, and admin workflows.
   - Preserve existing selectors from legacy pages while providing cleaner
     classes for new development.

   Management notes:
   - Load general_base.css first so CSS variables are available.
   - Existing classes remain below for compatibility.
   - New UM 3.0 components are grouped near the top for easier reuse.
   ========================================================================== */

/* UM 3.0 Component Layer ---------------------------------------------------
   New pages should prefer these classes over page-specific inline styles. */

.um-page {
	width: 94%;
	max-width: 1440px;
	margin: 0 auto;
	background: var(--um-surface, #fff);
	color: var(--um-text, #333);
	border-radius: var(--um-radius-lg, 12px);
	box-shadow: var(--um-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
	padding: var(--um-space-4, 16px);
	text-align: left;
}

.um-page-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--um-space-2, 8px);
}

.um-health-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0;
}

.um-health-meta {
	margin-top: 4px;
	opacity: 0.9;
}

/* Drawers and Detail Panels ------------------------------------------------ */

.um-drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1040;
	background: rgba(0, 0, 0, 0.25);
}

.um-drawer {
	display: none;
	position: fixed;
	top: 0;
	right: -460px;
	bottom: 0;
	z-index: 1050;
	width: 450px;
	max-width: 92%;
	background: var(--um-surface, #fff);
	color: var(--um-text, #333);
	box-shadow: -4px 0 18px rgba(0, 0, 0, 0.22);
	overflow-y: auto;
}

.um-drawer-header {
	padding: var(--um-space-4, 16px);
	border-bottom: 1px solid var(--um-border, #dee2e6);
}

.um-drawer-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

/* Button Aliases for New Work --------------------------------------------- */

.um-btn {
	display: inline-block;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: var(--um-radius-sm, 4px);
	font-weight: 600;
	line-height: 1.42857;
	text-align: center;
	cursor: pointer;
	transition: all 0.15s ease;
}

.um-btn-primary {
	background: var(--um-primary, #399599);
	border-color: var(--um-primary, #399599);
	color: #fff;
}

.um-btn-secondary {
	background: var(--um-secondary, #337ab7);
	border-color: var(--um-secondary, #337ab7);
	color: #fff;
}

.um-btn-success {
	background: var(--um-success, #28a745);
	border-color: var(--um-success, #28a745);
	color: #fff;
}

.um-btn-danger {
	background: var(--um-danger, #dc3545);
	border-color: var(--um-danger, #dc3545);
	color: #fff;
}

.um-btn:hover,
.um-btn:focus {
	opacity: 0.88;
	color: #fff;
	text-decoration: none;
}

.um-toggle {
	position: relative;
	display: inline-block;
	width: 52px;
	height: 28px;
	margin: 0;
	vertical-align: middle;
}

.um-toggle-slider {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	cursor: pointer;
	background: #cccccc;
	border-radius: 28px;
	transition: .2s ease;
}

.um-toggle-slider:before {
	content: "";
	position: absolute;
	left: 4px;
	bottom: 4px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
	transition: .2s ease;
}

.um-toggle.disabled,
.um-toggle.is-disabled {
	opacity: .45;
	pointer-events: none;
}

.um-toggle-sm {
	width: 44px;
	height: 22px;
}

.um-toggle-sm .um-toggle-slider:before {
	width: 16px;
	height: 16px;
}

/* Loader ------------------------------------------------------------------ */

#circle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: 150px;
}

.loader {
	width: 100%;
	height: 100%;
	border: 8px solid #162534;
	border-top: 8px solid #09f;
	border-radius: 50%;
	animation: rotate 5s linear infinite;
}

/* Logo -------------------------------------------------------------------- */

.logo img {
	max-height: 100px;
	width: auto;
}

/* Main Containers --------------------------------------------------------- */

#wrapper {
	max-width: 720px;
	width: 100%;
	border-radius: 6px;
	padding: 4px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	background: #fff;
}

#header {
	width: 100%;
	background: #34487e;
}

#header img {
	float: left;
}

[div^="infomsg-"] {
	width: 90%;
}

.tooltip-inner {
	min-width: 100px;
	max-width: 100%;
}

.center-msg {
	min-height: 80px;
}

#content {
	margin: 10px;
}

#footer {
	text-align: center;
	margin-top: 3px;
	padding: 3px;
	border: 3px solid #ccc;
}

.validation-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #f30;
	color: #fff;
	font-weight: bold;
}

.custom-advice {
	margin: 5px 0;
	padding: 5px;
	background-color: #c8aa00;
	color: #fff;
	font-weight: bold;
}

fieldset {
	padding: 1em;
	margin-bottom: 0.5em;
}

label {
	font-weight: bold;
}

.form-row {
	clear: both;
	padding: 0.3em;
}

.form-horizontal {
	padding: 25px 20px;
	border: 1px solid #eee;
	border-radius: 5px;
}

.block-help {
	font-weight: 300;
}

.terms {
	text-decoration: underline;
}

.um-action-hint {
	margin-top: 8px;
	color: #777;
	font-size: 12px;
}

.um-warning-strip {
	border-radius: 8px;
	margin-bottom: 15px;
}

.um-last-check-time {
	font-size: 26px;
	font-weight: 700;
	line-height: 1.05;
	color: #555;
}

.um-last-check-date {
	font-size: 12px;
	color: #777;
	margin-top: 5px;
	font-weight: 600;
}

.um-proxy-list {
	margin-bottom: 0;
}

.um-proxy-item {
	position: relative;
	padding-right: 95px;
	min-height: 42px;
}

.um-proxy-value {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 22px;
}

.um-proxy-item .remove-address {
	position: absolute;
	top: 7px;
	right: 10px;
}

.um-proxy-type {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	width: 110px !important;
	min-width: 110px;
	height: 50px;
}

#updateProgressContainer {
	display: none;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	padding: 15px;
	margin-bottom: 15px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.um-progress-title {
	font-weight: 600;
	margin-bottom: 8px;
}

.um-progress-meta {
	color: #777;
	font-size: 12px;
	margin-top: 6px;
}

.um-summary-box {
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fbfbfb;
	padding: 12px;
	margin-bottom: 15px;
	min-height: 82px;
}

.um-summary-label {
	color: #777;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 6px;
}

.um-summary-value {
	font-weight: 700;
	font-size: 22px;
	word-break: break-word;
}

.um-summary-small,
.um-mini-muted {
	font-size: 12px;
	color: #777;
	margin-top: 4px;
}

.um-outdated-table {
	margin-bottom: 0;
}

.um-outdated-table code {
	font-size: 11px;
	background: #f7f7f7;
	color: #333;
}

.um-file-path {
	word-break: break-word;
	font-weight: 600;
}

.um-file-status,
.um-review-status,
.um-new-status,
.um-protected-path,
.um-local-newer {
	display: inline-block;
	margin-right: 6px;
	padding: 4px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 700;
}

.um-file-status {
	background: #fcf8e3;
	color: #8a6d3b;
}

.um-review-status {
	background: #eee;
	color: #555;
}

.um-new-status {
	background: #d9edf7;
	color: #245269;
}

.um-protected-path {
	background: #fcf8e3;
	color: #8a6d3b;
}

.um-local-newer {
	background: #d9edf7;
	color: #31708f;
}

.um-list-warning {
	color: #8a6d3b;
	text-align: center;
	padding: 18px;
	background: #fcf8e3;
	border: 1px solid #faebcc;
	border-radius: 6px;
}

.um-list-count {
	color: #777;
	font-size: 12px;
	font-weight: normal;
	margin-left: 6px;
}

.um-search-header {
	margin-bottom: 20px;
	border-bottom: 1px solid #dddddd;
	padding-bottom: 15px;
}

.um-search-header h2 {
	margin-top: 0;
	font-weight: 600;
}

.um-search-card {
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 6px;
	padding: 15px;
	margin-bottom: 20px;
}

.um-search-count {
	text-align: right;
	color: #777777;
	margin-top: 12px;
	font-size: 13px;
}

.um-results-card {
	background: #ffffff;
	border: 1px solid #dddddd;
	border-radius: 6px;
	overflow: hidden;
}

.um-results-header {
	background: #f7f9fb;
	border-bottom: 1px solid #dddddd;
	padding: 12px 15px;
	font-weight: 600;
}

#updateActivitySection {
	display: none;
}

.debug-role-banner {
	position: sticky;
	top: 0;
	z-index: 9999;
	margin: 5px 5px 15px 5px;
	background: #f8f6ea;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0,0,0,.08);
	padding: 15px;
}

.debug-role-banner .debug-role-title {
	font-size: 16px;
	font-weight: 600;
	color: #8a6d3b;
	margin-bottom: 3px;
}

.debug-role-banner .debug-role-current {
	font-size: 12px;
	color: #666;
}

.debug-role-banner .debug-role-current strong {
	color: #d9534f;
	text-transform: uppercase;
}

.debug-role-banner .btn {
	min-width: 110px;
}

.debug-role-banner .debug-status {
	margin-top: 12px;
	border: 1px solid #c9ddeb;
	border-radius: 8px;
	background: #eef6fb;
	padding: 10px 12px;
	font-size: 12px;
	color: #275570;
}

.debug-role-banner .debug-status strong {
	color: #1f4963;
}

.debug-role-banner hr {
	margin: 10px 0;
	border-color: #d6b96c;
}

.debug-role-banner .label {
	margin-right: 4px;
}

.debug-role-banner .debug-environment {
	font-weight: 600;
}

.debug-role-banner .debug-environment.production {
	color: #a94442;
}

.debug-role-banner .debug-environment.development {
	color: #3c763d;
}

.debug-role-banner .debug-environment.testing {
	color: #8a6d3b;
}

/* Tabs -------------------------------------------------------------------- */

#tabs {
	list-style: none;
}

#tabs li,
#tabs a {
	float: left;
}

#tabs a {
	padding: 5px 8px;
	margin-left: 6px;
	background-color: #f2f2f2;
	text-decoration: none;
	color: #999;
}

#tabs a.active-tab {
	background-color: #ccc;
	border-top: 3px solid #999;
	padding-top: 3px;
	color: #000;
}

.tabbable-panel {
	padding: 10px;
}

.tabbable-line > .nav-tabs {
	border: none;
	margin: 0;
}

.tabbable-line > .nav-tabs > li {
	margin-right: 2px;
}

.tabbable-line > .nav-tabs > li > a {
	border: 0;
	margin-right: 0;
	color: #737373;
}

.tabbable-line > .nav-tabs > li > a > i,
.tabbable-line > .nav-tabs > li.open > a > i,
.tabbable-line > .nav-tabs > li:hover > a > i {
	color: #a6a6a6;
}

.tabbable-line > .nav-tabs > li.open,
.tabbable-line > .nav-tabs > li:hover {
	border-bottom: 4px solid #fbcdcf;
}

.tabbable-line > .nav-tabs > li.open > a,
.tabbable-line > .nav-tabs > li:hover > a {
	border: 0;
	background: none !important;
	color: #333;
}

.tabbable-line > .nav-tabs > li.active {
	border-bottom: 4px solid #f3565d;
	position: relative;
}

.tabbable-line > .nav-tabs > li.active > a {
	border: 0;
	color: #333;
}

.tabbable-line > .nav-tabs > li.active > a > i {
	color: #404040;
}

.tabbable-line > .tab-content {
	margin-top: -3px;
	background-color: #fff;
	border: 0;
	border-top: 1px solid #eee;
	padding: 15px 0;
}

.portlet .tabbable-line > .tab-content {
	padding-bottom: 0;
}

.tabbable-line.tabs-below > .nav-tabs > li {
	border-top: 4px solid transparent;
}

.tabbable-line.tabs-below > .nav-tabs > li > a {
	margin-top: 0;
}

.tabbable-line.tabs-below > .nav-tabs > li:hover {
	border-bottom: 0;
	border-top: 4px solid #fbcdcf;
}

.tabbable-line.tabs-below > .nav-tabs > li.active {
	margin-bottom: -2px;
	border-bottom: 0;
	border-top: 4px solid #f3565d;
}

.tabbable-line.tabs-below > .tab-content {
	margin-top: -10px;
	border-top: 0;
	border-bottom: 1px solid #eee;
	padding-bottom: 15px;
}

.tab-content {
	border: 0 solid #eee;
}

/* Admin Menu -------------------------------------------------------------- */

#admin.nav {
	float: right;
	padding: 8px;
	position: relative;
	transform: translateX(0%);
	z-index: 1;
}

#admin i {
	float: right;
	margin-left: -22%;
}

#admin.dropdown {
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 165px;
}

.touch-down {
	margin-top: -2px;
}

.plus,
.minus {
	user-select: none;
	background-image: none;
	border: 1px solid #ccc;
	cursor: pointer;
	display: inline-block;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857;
	margin-bottom: 0;
	padding: 2px 12px;
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
	background: #f8f8f8 none repeat scroll 0 0;
}

.plus:hover,
.minus:hover {
	background: #fff none repeat scroll 0 0;
}

#backbtn,
.back-to-top {
	position: fixed;
	cursor: pointer;
}

#backbtn {
	bottom: 10px;
	right: 10px;
}

.back-to-top {
	bottom: 20px;
	right: 20px;
}

/* Typography and Links ---------------------------------------------------- */

a,
a:hover,
a:focus {
	color: #399599;
	text-decoration: none;
	transition: all 0.3s;
}

h1,
h2 {
	margin-top: 10px;
	font-size: 38px;
	font-weight: 100;
	color: #555;
	line-height: 50px;
}

h3 {
	font-size: 22px;
	font-weight: 300;
	color: #555;
	line-height: 30px;
}

img {
	max-width: 100%;
}

/* Buttons ----------------------------------------------------------------- */

.btn-space {
	margin-right: 5px;
}

.btn-link-1,
.btn-link-2 {
	display: inline-block;
	margin: 0 5px;
	font-size: 16px;
	font-weight: 300;
	line-height: 16px;
	color: #fff;
	border-radius: 4px;
}

.btn-link-1 {
	padding: 16px 20px 0;
	background: #399599;
}

.btn-link-2 {
	height: 50px;
	margin: 5px;
	padding: 15px 20px 0;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid #fff;
}

.btn-link-1:hover,
.btn-link-1:focus,
.btn-link-1:active,
.btn-link-2:hover,
.btn-link-2:focus,
.btn-link-2:active,
.btn-link-2:active:focus {
	outline: 0;
	opacity: 0.6;
	color: #fff;
}

.btn-link-2:hover,
.btn-link-2:focus,
.btn-link-2:active,
.btn-link-2:active:focus {
	background: rgba(0, 0, 0, 0.1);
}

.btn-link-2 i {
	padding-right: 5px;
	vertical-align: middle;
	font-size: 20px;
	line-height: 20px;
}

.bigbtn {
	height: 50px;
	margin: 0;
	padding: 0 20px;
	vertical-align: middle;
	border: 0;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 50px;
	color: #fff;
	border-radius: 4px;
	text-shadow: none;
	box-shadow: none;
	transition: all 0.3s;
}

button.btn-tab {
	vertical-align: middle;
	background: #19b9e7;
	border: 0;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	color: #fff;
	border-radius: 4px;
	text-shadow: none;
	box-shadow: none;
	transition: all 0.3s;
}

.btn-next {
	color: #808080;
}

button.btn:hover,
button.btn:active,
button.btn:focus,
button.btn:active:focus,
button.btn.active:focus,
.bigbtn:hover,
.bigbtn:active,
.bigbtn:focus,
.bigbtn:active:focus {
	outline: 0;
	opacity: 0.6;
	color: #fff;
	box-shadow: none;
}

.bigbtn:active:focus,
button.btn.active:focus {
	background: #19b9e7;
}

#modal-login,
#modal-recover,
#modal-manage {
	top: 20%;
}

.modal {
	text-align: center;
	padding: 0 !important;
}

.modal::before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -4px;
}

/* Password and Enrollment ------------------------------------------------- */

.passinfo > div {
	display: inline-block;
	vertical-align: top;
	margin-right: 1em;
}

.passinfo .info {
	padding: 5px;
	min-height: 200px;
}

.progress {
	height: 5px;
}

.divider {
	height: 2px;
	border: 1px solid #eee;
	width: 100%;
	top: 10px;
	z-index: -5;
}

.ex-account {
	position: relative;
}

.ex-account p {
	background-color: rgba(255, 255, 255, 0.41);
}

.fa-file-text {
	color: #edda39;
}

.mar-top-bot-50 {
	margin-top: 50px;
	margin-bottom: 50px;
}

.inner-bg {
	/* Reserved for enrollment page spacing. */
}

.top-content .text,
.top-content .description a,
.top-content .text h1 {
	color: #fff;
}

.top-content .description {
	margin: 20px 0 10px;
}

.top-content .description p {
	opacity: 0.8;
}

.top-content .description a:hover,
.top-content .description a:focus {
	border-bottom: 1px dotted #fff;
}

.top-content .logo {
	display: inline-block;
	width: 143px;
	height: 43px;
	margin: 0 auto;
	background: url(../img/logo.png) center center no-repeat;
}

.top-content .top-big-link {
	margin-top: 45px;
}

.form-box {
	padding-top: 40px;
}

.form-top {
	overflow: hidden;
	padding: 0 25px 15px;
	background: #fff;
	border-radius: 4px 4px 0 0;
	text-align: left;
}

.form-top-left {
	float: left;
	width: 75%;
	padding-top: 25px;
}

.form-top-left h3 {
	margin-top: 0;
}

.form-top-right {
	float: left;
	width: 25%;
	padding-top: 5px;
	font-size: 66px;
	color: #ddd;
	line-height: 100px;
	text-align: right;
}

.form-bottom {
	padding: 25px 25px 30px;
	background: #eee;
	border-radius: 0 0 4px 4px;
	text-align: left;
}

form .form-bottom button.btn {
	min-width: 105px;
}

form.enrollment-form fieldset,
form.recover-form fieldset {
	display: none;
}

.resetmsg {
	margin-left: 100px;
}

/* Tables ------------------------------------------------------------------ */

table {
	font-family: Arial, sans-serif;
	max-width: 100%;
	background-color: transparent;
	border-collapse: collapse;
	border-spacing: 0;
}

.table {
	width: 100%;
	margin-bottom: 20px;
}

.table .t-small {
	width: 5%;
}

.table .t-medium {
	width: 15%;
}

.table .t-status {
	font-weight: bold;
}

.table .t-active {
	color: #46a546;
}

.table .t-inactive {
	color: #e00300;
}

.table .t-draft {
	color: #f89406;
}

.table .t-scheduled {
	color: #049cdb;
}

/* Switches, Checkboxes, and Radios --------------------------------------- */

/* Layout Helpers ---------------------------------------------------------- */

.clear {
	clear: both;
}

/* Recovery Chooser -------------------------------------------------------- */

.recover-chooser.disabled .recover-chooser-item {
	opacity: 0.6;
	cursor: default;
}

.recover-chooser .recover-chooser-item:hover {
	background: #efefef;
}

.recover-chooser .recover-chooser-item:not(:active) {
	background-color: lightgray;
}

.recover-chooser .recover-chooser-item {
	padding: 11px;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	border: 1px solid #efefef;
	margin-bottom: 10px;
	margin-left: 10px;
	margin-right: 10px;
	background-color: lightgray;
}

.recover-chooser .recover-chooser-item.click {
	border-color: #000;
}

.recover-chooser .recover-chooser-item i {
	padding: 0;
}

.recover-chooser .recover-chooser-item span.title {
	display: block;
	margin: 10px 0 5px;
	font-weight: bold;
	font-size: 12px;
}

.recover-chooser .recover-chooser-item span.description {
	font-size: 12px;
}

/* Call To Action ---------------------------------------------------------- */

.bs-calltoaction {
	position: relative;
	width: auto;
	padding: 15px 25px;
	border: 1px solid #000;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
}

.bs-calltoaction > .row {
	display: table;
	width: calc(100% + 30px);
}

.bs-calltoaction > .row > [class^="col-"],
.bs-calltoaction > .row > [class*=" col-"] {
	float: none;
	display: table-cell;
	vertical-align: middle;
}

.cta-contents,
.cta-button {
	padding-top: 10px;
	padding-bottom: 10px;
}

.cta-title {
	margin: 0 auto 15px;
	padding: 0;
}

.cta-desc {
	padding: 0;
}

.cta-desc p:last-child {
	margin-bottom: 0;
}

.bs-calltoaction.bs-calltoaction-default {
	color: #333;
	background-color: #fff;
	border-color: #ccc;
}

.bs-calltoaction.bs-calltoaction-primary {
	color: #fff;
	background-color: #337ab7;
	border-color: #2e6da4;
}

.bs-calltoaction.bs-calltoaction-info {
	color: #fff;
	background-color: #5bc0de;
	border-color: #46b8da;
}

.bs-calltoaction.bs-calltoaction-success {
	color: #fff;
	background-color: #5cb85c;
	border-color: #4cae4c;
}

.bs-calltoaction.bs-calltoaction-warning {
	color: #fff;
	background-color: #f0ad4e;
	border-color: #eea236;
}

.bs-calltoaction.bs-calltoaction-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}

.bs-calltoaction.bs-calltoaction-primary .cta-button .btn,
.bs-calltoaction.bs-calltoaction-info .cta-button .btn,
.bs-calltoaction.bs-calltoaction-success .cta-button .btn,
.bs-calltoaction.bs-calltoaction-warning .cta-button .btn,
.bs-calltoaction.bs-calltoaction-danger .cta-button .btn {
	border-color: #fff;
}

/* Search ------------------------------------------------------------------ */

.user_search::before {
	content: "";
	font-family: FontAwesome;
	display: block;
	height: 16px;
	padding: 0 1.25rem;
	width: 16px;
}

.mobile-device {
	position: absolute;
	top: 0;
	left: 0;
	display: block !important;
	width: 100%;
	height: 100% !important;
	opacity: 0;
}

/*************************************************************************
 * Responsive Rules
 *************************************************************************/

@media (max-width: 767px) {
.um-page {
        width: 100%;
        border-radius: var(--um-radius-md, 8px);
        padding: var(--um-space-3, 12px);
    }

    .um-page-header {
        display: block;
    }

    .um-page-actions {
        justify-content: flex-start;
        margin-top: var(--um-space-3, 12px);
    }
}

@media (max-width: 767px) {
.um-stat-card,
		.um-card {
			min-height: 90px;
			padding: 15px;
		}

		.um-stat-number,
		.um-card-number {
			font-size: 34px;
		}

		.um-stat-icon,
		.um-card-icon {
			font-size: 28px;
		}
}

@media (max-width: 767px) {
.um-drawer {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
.um-group-name {
		max-width: 180px;
	}

	.um-group-manager .um-panel-footer {
		text-align: center;
	}

	.um-group-manager .um-panel-footer .pull-right {
		float: none !important;
		display: block;
		margin-top: 8px;
	}
}

@media (max-width: 767px) {
.um-page-header-main {
		flex-direction: column;
	}

	.um-page-header-actions {

		width: 100%;

		text-align: left;

		margin-top: 10px;
	}

	.um-page-header-meta {

		text-align: left;
	}
}

@media (max-width: 768px) {
.um-search-count {
        text-align: left;
        margin-top: 15px;
    }

    .um-results-body {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
.updater-stats {
		display: block;
	}

	.updater-stat-card {
		margin-bottom: 10px;
	}

	.um-card-grid {
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	.um-card-cell {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767px) {
.debug-role-banner {
		position: relative;
		top: auto;
	}

	.debug-role-banner .text-right {
		text-align: left;
		margin-top: 10px;
	}

	.debug-role-banner .btn {
		width: 100%;
		margin-bottom: 5px;
	}
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 767px) {
.inner-bg {
        padding: 40px 0 110px;
    }

    .top-content .top-big-link {
        margin-top: 25px;
    }

    .top-content .top-big-link a.btn {
        margin-top: 10px;
    }

    .form-bottom {
        padding-bottom: 25px;
    }

    form .form-bottom button.btn {
        margin-bottom: 5px;
    }
}

@media (max-width: 415px) {
h1,
    h2 {
        font-size: 32px;
    }
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx) {
.top-content .logo {
        background-image: url(../img/ppsmlogo.png) !important;
        background-repeat: no-repeat !important;
        background-size: 143px 43px !important;
    }
}

@media (max-width: 480px) {
.table-action thead {
        display: none;
    }

    .table-action tr {
        border-bottom: 1px solid #ddd;
    }

    .table-action td {
        border: 0;
    }

    .table-action td:not(:first-child) {
        display: block;
    }
}

@media (max-width: 991px) {
.bs-calltoaction > .row {
        display: block;
        width: auto;
    }

    .bs-calltoaction > .row > [class^="col-"],
    .bs-calltoaction > .row > [class*=" col-"] {
        float: none;
        display: block;
        vertical-align: middle;
        position: relative;
    }

    .cta-contents {
        text-align: center;
    }
}

@media screen and (min-width: 768px) {
#adv-search {
        margin: 0 auto;
    }
}

/*************************************************************************
 * Animations
 *************************************************************************/

@keyframes rotate {
100% {
        transform: rotate(360deg);
    }
}