/* the sapphires */
/* the emeralds */
/* the amethyths */
/* the topaz */
/* the rubies */
/* the graphites */
/* height */
/* logo */
/* try not to go beywond the width of $main_nav_width value */
/* you may need to change this depending on your logo design */
/* adjust this as you see fit : left, right, center */
:root {
  --bs-blue: #1778ca;
  --bs-indigo: #011969;
  --bs-purple: #512251;
  --bs-pink: #aa383f;
  --bs-red: #d42d30;
  --bs-orange: #e46537;
  --bs-yellow: #ffd274;
  --bs-green: #95c461;
  --bs-teal: #38aeb5;
  --bs-cyan: #2aa0da;
  --bs-black: #000;
  --bs-white: #fff;
  --primary-50: #0270e7;
  --primary-100: #0264ce;
  --primary-200: #0258b5;
  --primary-300: #014c9c;
  --primary-400: #013f82;
  --primary-500: #013369;
  --primary-600: #012750;
  --primary-700: #011a36;
  --primary-800: #000e1d;
  --primary-900: #000204;
  --success-50: #aee5c1;
  --success-100: #9bdfb2;
  --success-200: #88d9a3;
  --success-300: #75d294;
  --success-400: #61cc85;
  --success-500: #4ec676;
  --success-600: #3dbd68;
  --success-700: #37aa5d;
  --success-800: #319753;
  --success-900: #2a8448;
  --info-50: #9acffa;
  --info-100: #82c4f8;
  --info-200: #6ab8f7;
  --info-300: #51adf6;
  --info-400: #39a1f4;
  --info-500: #2196F3;
  --info-600: #0d8aee;
  --info-700: #0c7cd5;
  --info-800: #0a6ebd;
  --info-900: #0960a5;
  --warning-50: #ffebc1;
  --warning-100: #ffe3a7;
  --warning-200: #ffdb8e;
  --warning-300: #ffd274;
  --warning-400: #ffca5b;
  --warning-500: #ffc241;
  --warning-600: #ffba28;
  --warning-700: #ffb20e;
  --warning-800: #f4a500;
  --warning-900: #da9400;
  --danger-50: #f85876;
  --danger-100: #f74062;
  --danger-200: #f6274e;
  --danger-300: #f50f3a;
  --danger-400: #e20931;
  --danger-500: #c9082c;
  --danger-600: #b00727;
  --danger-700: #980621;
  --danger-800: #7f051c;
  --danger-900: #670417;
  --fusion-50: #343d4b;
  --fusion-100: #2a313c;
  --fusion-200: #1f252d;
  --fusion-300: #15191e;
  --fusion-400: #0a0c0f;
  --fusion-500: black;
  --fusion-600: black;
  --fusion-700: black;
  --fusion-800: black;
  --fusion-900: black;
  --dark-50: #404040;
  --dark-100: #333333;
  --dark-200: #262626;
  --dark-300: #1a1a1a;
  --dark-400: #0d0d0d;
  --dark-500: #000;
  --dark-600: black;
  --dark-700: black;
  --dark-800: black;
  --dark-900: black;
  --light-50: white;
  --light-100: white;
  --light-200: white;
  --light-300: white;
  --light-400: white;
  --light-500: #fff;
  --light-600: #f2f2f2;
  --light-700: #e6e6e6;
  --light-800: #d9d9d9;
  --light-900: #cccccc;
  --secondary-50: #afb5ba;
  --secondary-100: #a1a8ae;
  --secondary-200: #939ba2;
  --secondary-300: #868e96;
  --secondary-400: #78828a;
  --secondary-500: #6c757d;
  --secondary-600: #60686f;
  --secondary-700: #545b62;
  --secondary-800: #494f54;
  --secondary-900: #3d4246;
  --bs-primary: #013369;
  --bs-primary-rgb: 1, 51, 105;
  --bs-primary-text-emphasis: black;
  --bs-primary-bg-subtle: #067dfd;
  --bs-primary-border-subtle: #0264ce;
  --bs-success: #4ec676;
  --bs-success-rgb: 78, 198, 118;
  --bs-success-text-emphasis: #1e5d33;
  --bs-success-bg-subtle: #c2ebd0;
  --bs-success-border-subtle: #9bdfb2;
  --bs-info: #2196F3;
  --bs-info-rgb: 33, 150, 243;
  --bs-info-text-emphasis: #064475;
  --bs-info-bg-subtle: #b2dbfb;
  --bs-info-border-subtle: #82c4f8;
  --bs-warning: #ffc241;
  --bs-warning-rgb: 255, 194, 65;
  --bs-warning-text-emphasis: #a77100;
  --bs-warning-bg-subtle: #fff3da;
  --bs-warning-border-subtle: #ffe3a7;
  --bs-danger: #c9082c;
  --bs-danger-rgb: 201, 8, 44;
  --bs-danger-text-emphasis: #36020c;
  --bs-danger-bg-subtle: #f9718a;
  --bs-danger-border-subtle: #f74062;
  --bs-fusion: black;
  --bs-fusion-rgb: 0, 0, 0;
  --bs-fusion-text-emphasis: black;
  --bs-fusion-bg-subtle: #3f4a5a;
  --bs-fusion-border-subtle: #2a313c;
  --bs-dark: #000;
  --bs-dark-rgb: 0, 0, 0;
  --bs-dark-text-emphasis: black;
  --bs-dark-bg-subtle: #4d4d4d;
  --bs-dark-border-subtle: #333333;
  --bs-light: #fff;
  --bs-light-rgb: 255, 255, 255;
  --bs-light-text-emphasis: #b3b3b3;
  --bs-light-bg-subtle: white;
  --bs-light-border-subtle: white;
  --bs-secondary: #6c757d;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-secondary-text-emphasis: #25282b;
  --bs-secondary-bg-subtle: #bcc1c6;
  --bs-secondary-border-subtle: #a1a8ae;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-form-valid-color: $color-success;
  --bs-form-valid-border-color: $color-success;
  --bs-form-invalid-color: $color-danger;
  --bs-form-invalid-border-color: $color-danger;
  --app-nav-link-color: var(--bs-gray-800);
  --app-nav-link-hover-color: #012750;
  --app-nav-link-active-color: #012750;
  --app-nav-title-color: #666666;
  --app-nav-border-color: rgba(var(--secondary), 0.3);
  --app-nav-item-hover-bg: rgba(1, 51, 105, 0.045);
  --app-nav-item-active-bg: rgba(var(--secondary), 0.07);
  --app-nav-item-active-indicator: var(--app-nav-link-active-color);
  --app-nav-collapse-sign-color: var(--bs-body-color);
  --bs-link-color: #013369;
  --bs-link-color-rgb: 1, 51, 105;
  --bs-link-hover-color-rgb: 1, 26, 54;
  --bs-link-decoration: underline;
  --bs-link-hover-color: darken($color-primary, 10%);
  --bs-code-color: #7f051c;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --app-header-height: 60px;
  --menu-width: 14.375rem;
  --right-content-width: 20rem;
  --menu-width-minified: 4.4rem;
  --menu-top-height-minified: 4rem;
  --menu-top-height: 6rem;
  --drawer-width: 24rem;
  --app-header-fixed: 0;
  --app-nav-full: 0;
  --app-header-background: var(--bs-body-bg);
  --app-nav-background: var(--bs-body-bg);
  --app-drawer-background: var(--bs-body-bg);
  --app-content-background: #fdfdfd;
  --logo-width: 11rem;
  --logo-height: 2rem;
  --app-layout-border-color: rgba(0, 0, 0, 0.07);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.1);
  --bs-border-color: #dee2e6;
  --app-nav-svgicon-size: 1.25rem;
  --collapse-icon-border: rgba(0, 0, 0, 0.3);
  --collapse-icon-border-hover: rgba(var(--primary), 0.8);
  --collapse-icon-width: 2.5rem;
  --collapse-icon-height: 1.8rem;
  --primary: 1, 51, 105;
  --secondary: 108, 117, 125;
  --success: 78, 198, 118;
  --warning: 255, 194, 65;
  --info: 33, 150, 243;
  --danger: 201, 8, 44;
  --fusion: 0, 0, 0;
  --disable: 173, 181, 189;
  --white: 255, 255, 255;
  --font-family: "Roboto", "Helvetica Neue", Helvetica, Arial;
  --direction: ltr;
  --transition: transform 470ms cubic-bezier(.34,1.25,.3,1);
  --z-index-master: 999;
  --z-index-slave: 1;
  --content-padding: 1.25rem;
  --menu-icon-size: 1.625rem;
  --settings-disabled: 0.3;
  --bs-body-color: #505050;
  --bs-body-font-size: 0.925rem;
  --bs-form-valid-border-color: #4ec676;
  --bs-form-invalid-border-color: #c9082c;
  --bs-form-valid-color: #4ec676;
  --bs-form-invalid-color: #c9082c;
  --input-placeholder-color: rgba(112, 112, 112, 0.5);
  --bs-secondary-color: rgba(70, 79, 87, 0.70);
  --scrollbar-width: 8px;
  --scrollbar-color: #f1f1f1;
  --scrollbar-thumb: #888;
  --scrollbar-thumb-hover: #555;
  --border-radius-uniform: 0.375rem;
  --border-radius-uniform-sm: 0.25rem;
  --border-radius-uniform-xs: 0.125rem;
}

.nav-pills {
  --bs-nav-pills-link-active-bg: #013369;
}

.progress,
.progress-stacked {
  --bs-progress-bar-bg: #013369;
}

.list-group {
  --bs-list-group-active-bg: #013369;
  --bs-list-group-active-border-color: #013369;
}

.form-check-input:checked {
  background-color: #013369;
  border-color: #013369;
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: #013369;
  border-color: #013369;
}

.list-group-item.active {
  background-color: var(--app-nav-item-active-bg);
  color: var(--bs-body-color);
}

.list-group-item:hover {
  color: var(--app-nav-link-hover-color);
  background-color: var(--app-nav-item-hover-bg);
}

/**
    Most SCSS variables used by the app come from the Bootstrap template and are defined in _modules/variables.scss (and that file
    should be imported into individual SCSS files to enable use of those variables). Unlike the other files that are part of the 
    Bootstrap template it IS ok to modify that file - the template is not structured for those variables to be overridable, and 
    recommends changing that file directly in the API.

    Any additional variables that are needed but are NOT in that file should go here.
*/
.page-header .logo-container {
  padding: 4px 0;
  margin: 0;
}
.page-header .logo-container img {
  height: 50px;
  max-height: 50px;
  margin-right: 0.5rem;
}
.page-header .logo-container .reg-title {
  font-size: 20px;
  font-weight: 600;
  color: #013369;
  margin: 8px 0 2px 0;
  line-height: 1;
}
.page-header .logo-container .reg-subtitle {
  font-size: 16px;
  color: #adb5bd;
  line-height: 1;
}

.reg-form-container {
  max-width: 450px;
}

.info-text {
  background-color: #013369;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  color: white;
  font-size: 13px;
  margin-bottom: 1rem;
}

.registration-container {
  display: flex;
  flex-direction: row;
}
@media (max-width: 771.99px) {
  .registration-container {
    flex-direction: column;
  }
}

.progress-container {
  margin-top: 36px;
  margin-right: 40px;
  width: 250px;
  white-space: nowrap;
}
.progress-container .progress-step {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.progress-container .progress-step:not(:last-child) {
  margin-bottom: 40px;
}
.progress-container .progress-step:not(:first-child)::before {
  content: "";
  width: 4px;
  background-color: #adb5bd;
  position: absolute;
  bottom: 12px;
  right: 10px;
  height: 64px;
}
.progress-container .progress-step .step-text {
  margin-right: 24px;
  font-size: 14px;
  color: #868e96;
}
.progress-container .progress-step .step-dot {
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background-color: #adb5bd;
  border: 3px solid #adb5bd;
  z-index: 1;
}
.progress-container .progress-step.step-current::before {
  background-color: #013369;
}
.progress-container .progress-step.step-current .step-text {
  font-weight: 600;
  font-size: 16px;
  color: #013369;
}
.progress-container .progress-step.step-current .step-dot {
  background-color: white;
  border-color: #013369;
  position: relative;
}
.progress-container .progress-step.step-current .step-dot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #013369;
  position: absolute;
  left: calc(50% - 6px);
  top: calc(50% - 6px);
}
.progress-container .progress-step.step-past::before {
  background-color: #013369;
}
.progress-container .progress-step.step-past .step-text {
  color: #013369;
}
.progress-container .progress-step.step-past .step-dot {
  background-color: #013369;
  border-color: #013369;
}
@media (max-width: 771.99px) {
  .progress-container {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 0 0;
    width: auto;
  }
  .progress-container .progress-step:not(:last-child) {
    margin: 0 20px 0 0;
  }
  .progress-container .progress-step:not(:first-child)::before {
    height: 4px;
    width: 44px;
    right: 12px;
    bottom: 10px;
  }
  .progress-container .step-text {
    display: none;
  }
}

.panel-title {
  font-weight: 600;
  font-size: 16px;
  color: #013369;
  margin: 0.75rem 0;
  text-align: center;
}
@media (min-width: 771.99px) {
  .panel-title {
    display: none;
  }
}

.form-panel {
  display: none;
}
.form-panel.active-form-panel {
  display: block;
}

.panels-initialized .form-panel {
  display: block;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
}
.panels-initialized .form-panel.active-form-panel {
  visibility: visible;
  max-height: none;
  overflow: visible;
}

.photo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0 0.5rem 0;
}
.photo-container .dz-message {
  color: #adb5bd;
  font-style: italic;
  margin-top: 6px;
}

.photo-guidelines {
  margin: 0.5rem 0 1rem 0;
}
.photo-guidelines .guidelines-heading {
  font-size: 14px;
  font-weight: 500;
  color: #343a40;
  margin-bottom: 0.5rem;
}
.photo-guidelines ul {
  margin-left: 2px;
  color: #868e96;
}
.photo-guidelines ul li {
  line-height: 1;
  margin-bottom: 0.5rem;
}
.photo-guidelines ul span {
  font-weight: 500;
  color: #495057;
}

.photo-examples .photo {
  margin: 3px;
  position: relative;
}
.photo-examples .photo img {
  height: 100px;
  max-height: 100px;
}
.photo-examples .photo .image-icon {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: white;
  bottom: -20px;
  left: calc(50% - 16px);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.photo-examples .invalid-photos {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.photo-examples .invalid-photos .photo {
  border: 4px solid #db4437;
}
.photo-examples .invalid-photos .photo .image-icon {
  background-color: #db4437;
}
.photo-examples .valid-photos {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.photo-examples .valid-photos .photo {
  border: 4px solid #4ec676;
}
.photo-examples .valid-photos .photo .image-icon {
  background-color: #4ec676;
}

.alert-success .alert-icon {
  background-color: #4ec676;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  border: 8px solid #aee5c1;
  margin-right: 1rem;
}
.alert-success .alert-icon > i {
  font-size: 16px;
}

.photo-missing-border {
  border: 3px solid #c9082c;
}

.photo-missing-text {
  color: #c9082c;
}

.cred-consent {
  font-size: 14px;
  font-weight: 500;
  color: #343a40;
  margin-bottom: 0.5rem;
}