:root {
  --app: #233e8b;
  --app-rgb: 35, 62, 139;
  --app-shade: #000;
  --text: #14182b;
  --text-rgb: 20, 24, 43;
  --muted: #4a5068;
  --border: #d9deec;
  --light-rgb: 243, 245, 251;
  --dark-rgb: 15, 24, 56;
  --bs-primary: var(--app);
  --bs-primary-rgb: var(--app-rgb);
  --bs-primary-bg-subtle: color-mix(in srgb, var(--app) 20%, #fff);
  --bs-primary-border-subtle: color-mix(in srgb, var(--app) 40%, #fff);
  --bs-primary-text-emphasis: color-mix(in srgb, var(--app) 40%, #000);
  --bs-link-color: var(--app);
  --bs-link-color-rgb: var(--app-rgb);
  --bs-link-hover-color: var(--app);
  --bs-link-hover-color-rgb: var(--app-rgb);
  --bs-focus-ring-color: rgba(var(--app-rgb), .25);
  --bs-body-color: var(--text);
  --bs-body-color-rgb: var(--text-rgb);
  --bs-secondary-color: var(--muted);
  --bs-border-color: var(--border);
  --bs-tertiary-bg: rgb(var(--light-rgb));
  --bs-tertiary-bg-rgb: var(--light-rgb);
  --bs-light-rgb: var(--light-rgb);
  --bs-dark-rgb: var(--dark-rgb);
}

.btn-primary {
  --bs-btn-bg: var(--app);
  --bs-btn-border-color: var(--app);
  --bs-btn-hover-bg: color-mix(in srgb, var(--app) 85%, var(--app-shade));
  --bs-btn-hover-border-color: color-mix(in srgb, var(--app) 80%, var(--app-shade));
  --bs-btn-active-bg: color-mix(in srgb, var(--app) 80%, var(--app-shade));
  --bs-btn-active-border-color: color-mix(in srgb, var(--app) 75%, var(--app-shade));
  --bs-btn-disabled-bg: var(--app);
  --bs-btn-disabled-border-color: var(--app);
  --bs-btn-focus-shadow-rgb: var(--app-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--app);
  --bs-btn-border-color: var(--app);
  --bs-btn-hover-bg: var(--app);
  --bs-btn-hover-border-color: var(--app);
  --bs-btn-active-bg: var(--app);
  --bs-btn-active-border-color: var(--app);
  --bs-btn-disabled-color: var(--app);
  --bs-btn-disabled-border-color: var(--app);
  --bs-btn-focus-shadow-rgb: var(--app-rgb);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: color-mix(in srgb, var(--app) 50%, #fff);
  box-shadow: 0 0 0 .25rem rgba(var(--app-rgb), .25);
}

.form-check-input:checked {
  background-color: var(--app);
  border-color: var(--app);
}

.nav-pills { --bs-nav-pills-link-active-bg: var(--app); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--app); }
.pagination { --bs-pagination-active-bg: var(--app); --bs-pagination-active-border-color: var(--app); }
.list-group { --bs-list-group-active-bg: var(--app); --bs-list-group-active-border-color: var(--app); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--app); }

html {
  font-size: 14px;
}

.offcanvas-lg.offcanvas-start {
  max-width: 90%;
}

.cursor-pointer {
  cursor: pointer;
}

.fs-095 {
  font-size: 0.95rem!important;
}

.fs-7 {
  font-size: 0.75rem!important;
}

.fs-8 {
  font-size: 0.5rem!important;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

input[type=number] {
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.validated .form-control:invalid,
.validated .form-select:invalid {
    border-color: #f00;
    background-color: #fffcfc;
}

input.form-control::placeholder {
  color: #ccc;
}
input.form-control::-webkit-input-placeholder {
  color: #ccc;
}
input.form-control::-moz-placeholder {
  color: #ccc;
}
input:-ms-input-placeholder {
  color: #ccc;
}
input.form-control::placeholder {
  color: #ccc;
}

#docContent img {
  border: 1px solid #999;
}