@charset "UTF-8";
/* We are using layers to determine priority in styling and display control. 
 * Elements that don't interact with any display-control systems can 
 * theoretically ignore these rules.
 * Elements interacting with the following systems need to follow these rules:
 * - view-edit (Elements toggled via .view-edit-value and .view-edit-input classes)
 * - it-help (Elements toggled via the info-toggler -> .it-help elements)
 *
 * The basic display property of  (ie inline-flex, block, etc) should be set
 * in the base-display layer.
 * display: none; and display: revert-layer; should be used to control the 
 * displaying of an element (hiding/showing).
 * Basic hiding/showing at component level should be set via the 
 * display-control layer. 
 * Systematic hiding and showing should be done via the system-display-control layer.
 * (Example display control systems: view-edit, it-help).
 * Device-level 'display: none;' (ie always hiding an element on mobile) should still
 * be done outside the layers to avoid a system overriding it.
 *
 * Layer Order: (from lowest to highest) (unlayered is always the highest)
 */
@layer bootstrap, base, base-display, component, display-control, system-display-control;
/* -----------------------------------------------------
 * PRIMARY COLOR CONTROL -------------------------------  
 * -----------------------------------------------------
 */
@layer base {
  :root {
    --hs-primary: rgb(0, 97, 172);
    --bs-primary: rgb(0, 97, 172);
  }
}
/* -----------------------------------------------------
 * BASIC COMPONENT DISPLAY CONTROL ---------------------  
 * -----------------------------------------------------
 */
@layer display-control {
  .c-desktop-hidden,
  .c-mobile-only,
  .c-hidden { /* Component-Hidden, general class to be used for component level hiding */
    display: none;
  }
  @media (max-width: 650px) {
    .c-mobile-only,
    .c-desktop-hidden {
      display: revert-layer;
    }
    .c-mobile-hidden {
      display: none;
    }
  }
}
@layer base {
  .b-mobile-only {
    display: none;
  }
  @media (max-width: 650px) {
    .b-mobile-only {
      display: revert-layer;
    }
  }
}
/* -----------------------------------------------------
 * BASIC PAGE LAYOUT -----------------------------------  
 * -----------------------------------------------------
 */
@layer base {
  main > .container {
    padding: 140px 15px 20px;
  }
  main > .container.fullwidth {
    max-width: initial;
  }
  main > .container.fullheight {
    /* full viewport height - footer height */
    height: calc(100vh - 30px);
  }
  .alert-wrapper {
    position: fixed;
    top: 145px;
    right: 15px;
    z-index: 1000;
    width: 500px;
    max-width: calc(100% - 30px);
  }
  .alert-wrapper .alert {
    opacity: 1;
    transition: opacity 2s linear;
  }
  .alert-wrapper .alert.fading {
    opacity: 0;
  }
}
/* -----------------------------------------------------
 * OVERRIDES FOR CONTROLLER VIEW -----------------------
 * -----------------------------------------------------
 */
@layer component {
  body.controller .container {
    max-width: initial;
  }
}
/* -----------------------------------------------------
 * COMMON TEXT STYLING ---------------------------------  
 * -----------------------------------------------------
 */
@layer base {
  a:not(.btn) {
    color: var(--hs-primary);
    text-decoration: none;
  }
  .not-set {
    color: #ecc;
    font-style: italic;
  }
  .help-block {
    color: #a94442;
  }
  .select2-container .select2-search--inline {
    display: contents;
  }
  .select2-search__field:placeholder-shown {
    width: 100% !important;
  }
  .select2-selection__rendered {
    display: flex !important;
    max-height: 27px;
  }
  .vrmnet-logo-brand .brand-part-1 {
    color: var(--hs-primary);
    font-weight: bold;
  }
  .vrmnet-logo-brand .brand-part-2 {
    color: #939598;
  }
  span.OOC-incomplete {
    color: #FF3719;
  }
  span.OOC-completed {
    color: #00BE96;
  }
  span.OOC-notrequired {
    color: #939598;
  }
}
/* -----------------------------------------------------
 * SPINNER LOADING ICON --------------------------------  
 * -----------------------------------------------------
 */
@layer base {
  i.fa-spinner {
    transform: rotate(360deg);
    transform-origin: center;
    animation: spinning-icon 1s infinite;
  }
  @keyframes spinning-icon {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
/* -----------------------------------------------------
 * MFA STEPS ----------------------------------------  
 * -----------------------------------------------------
 */
@layer components {
  .mfa-step {
    display: flex;
    border-radius: 8px;
    padding: 24px;
    margin-bottom: 10px;
    gap: 25px;
    max-width: 900px;
  }
  .mfa-step img {
    height: 170px;
  }
  .mfa-step-content {
    gap: 16px;
    margin-bottom: 12px;
  }
  .mfa-step h3 {
    font-size: 20px;
  }
  .mfa-store-links {
    display: flex;
    gap: 90px;
    margin-top: 20px;
  }
  .mfa-store-links .store {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .mfa-store-links .store img {
    width: 140px;
    height: 140px;
  }
  .mfa-store-links .store span {
    font-size: 14px;
  }
  .mfa-qr-box {
    margin: 20px 0;
  }
  .mfa-qr-box img {
    width: 140px;
    height: 140px;
  }
  .mfa-secret {
    margin-top: 16px;
  }
  @media (width <= 570px) {
    .mfa-store-links {
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
  }
}
/* -----------------------------------------------------
 * OTHER PAGE COMPONENTS -------------------------------  
 * -----------------------------------------------------
 */
/* -----------------------------------------------------
 * PAGE HEADER / NAVBAR --------------------------------  
 * -----------------------------------------------------
 */
@layer display-control {
  .dropdown-menu .dropdown-submenu {
    display: none;
  }
  .dropdown-menu div:hover .dropdown-submenu {
    display: revert-layer;
  }
}
@layer base-display {
  .navbar-wrapper > .container {
    display: grid;
  }
  .dropdown-menu .dropdown-submenu {
    display: block;
  }
}
@layer base {
  .navbar-wrapper a {
    color: revert-layer;
  }
}
@layer component {
  .hs-header {
    height: 75px;
  }
  .navbar-wrapper {
    margin-top: 75px;
    background-color: var(--hs-primary);
  }
  .navbar-wrapper.navbar-wrapper > .container {
    grid-template-columns: auto auto;
  }
  .navbar-wrapper .navbar-inner-wrapper {
    width: 100%;
  }
  .navbar-wrapper .navbar-right {
    height: 56px;
    flex-direction: row-reverse;
  }
  .navbar-wrapper .navbar-right #navbar-help-icon {
    color: rgb(122, 168, 204);
    font-size: 30px !important;
    font-weight: 700 !important;
    padding: 20px;
  }
  .navbar-wrapper .navbar-right .navbar-nav .dropdown-menu {
    left: unset;
    right: 0;
    text-align: right;
  }
  .navbar-wrapper .navbar-right .navbar-nav .dropdown-menu .dropdown-item:has(button) {
    padding: 0;
  }
  .navbar-wrapper .navbar-right .navbar-nav .dropdown-menu .dropdown-item:has(button) button {
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    width: 100%;
    text-align: right;
    border: none;
  }
  .dropdown-menu.sys-admin-menu {
    max-height: 80vh;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .dropdown-menu div {
    position: relative;
  }
  .dropdown-menu div .dropdown-submenu {
    position: absolute;
    left: 100%;
    top: -7px;
    margin-left: -1rem;
    max-height: 400px;
    overflow-y: auto;
  }
  .dropdown-menu div .dropdown-submenu-left {
    right: 100%;
    left: auto;
  }
  .dropdown-menu .dropdown-item:hover {
    color: initial;
  }
  .dropdown-menu .dropdown-item:active {
    background-color: var(--bs-dropdown-link-hover-bg);
  }
  .dropdown-menu .dropdown-item.active {
    background-color: var(--hs-primary);
  }
  .dropdown-menu .dropdown-item.active:hover {
    color: white;
  }
  body.controller .navbar-wrapper {
    background-color: rgb(133, 33, 17);
  }
}
/* -----------------------------------------------------
 * PAGE FOOTER -----------------------------------------  
 * -----------------------------------------------------
 */
@layer base-display {
  .footer > .container {
    display: grid;
  }
}
@layer component {
  .footer {
    background-color: rgba(0, 0, 0, 0.05);
    font-size: 0.9em;
  }
  .footer > .container {
    grid-template-areas: "left center right";
  }
  @media (max-width: 480px) {
    .footer > .container {
      grid-template-areas: "left right" "center center";
    }
  }
  .footer .footer-left {
    grid-area: left;
  }
  .footer .footer-center {
    grid-area: center;
    text-align: center;
  }
  .footer .footer-right {
    grid-area: right;
    text-align: right;
  }
}

/* -----------------------------------------------------
 * VrmNet Standard Buttons ----------------------------- 
 * -----------------------------------------------------
 */
@layer base-display {
  .std-btn {
    display: inline-flex;
  }
  .std-btn-row:has(.right-fill) {
    display: flex;
  }
}
@layer base {
  .std-btn {
    --button-color: var(--hs-primary);
    cursor: pointer;
    color: var(--button-color);
    border: none;
    justify-content: center;
    white-space: nowrap;
  }
  .std-btn.toggled {
    color: white;
  }
  .std-btn, .std-btn > *, .std-btn::before {
    transition: all 0.5s ease;
  }
  .std-btn.disabled {
    cursor: not-allowed;
    color: #939598;
  }
  .std-btn-with-background {
    position: relative;
  }
  .std-btn-with-background::before {
    z-index: 1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    background-color: var(--button-color);
  }
  .std-btn-with-background > * {
    z-index: 2;
  }
  .std-btn.sharp-right::before {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .std-btn.sharp-left::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .std-btn-with-bounce:active > * {
    animation: buttonbounce 0.5s ease;
  }
  .std-btn-with-bounce:active i {
    animation: iconbounce 0.5s ease;
  }
  @keyframes buttonbounce {
    0% {
      transform: scale(0.975);
    }
    100% {
      transform: scale(1);
    }
  }
  @keyframes iconbounce {
    0% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }
  .std-btn-basic {
    padding: 7px 10px;
    transition: all 0.5s ease;
    border-radius: 4px;
    font-weight: normal;
    height: 38px;
    align-items: center;
  }
  .std-btn-basic::before {
    opacity: 0.05;
  }
  .std-btn-basic:hover::before {
    opacity: 0.1;
  }
  .std-btn-basic.toggled::before {
    opacity: 0.75;
  }
  .std-btn-large-icon {
    position: relative;
    line-height: 48px;
    justify-content: center;
    align-items: center;
    min-width: 50px;
    min-height: 48px;
    padding: 0 10px;
  }
  .std-btn-large-icon::before {
    opacity: 0;
  }
  .std-btn-large-icon:hover::before {
    opacity: 0.1;
  }
  .std-btn-large-icon.toggled::before {
    opacity: 1;
  }
  .std-btn-large-icon i {
    transform: scale(1.5);
  }
  .std-btn-large-icon:active i {
    animation: largeiconbounce 0.5s ease;
  }
  @keyframes largeiconbounce {
    0% {
      transform: scale(1.4);
    }
    100% {
      transform: scale(1.5);
    }
  }
  .std-btn-small-icon:hover {
    animation: wiggle 0.5s linear infinite;
  }
  @keyframes wiggle {
    0% {
      transform: rotate(0deg);
    }
    33% {
      transform: rotate(-10deg);
    }
    66% {
      transform: rotate(10deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  .std-btn-row {
    max-width: 100%;
    overflow-x: auto;
    justify-content: left;
  }
  .std-btn-row .std-btn {
    padding-left: 14px;
    padding-right: 14px;
  }
  .std-btn-row .std-btn:not(:first-child)::before {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .std-btn-row .std-btn:not(:last-child)::before {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .std-btn-row .std-btn.active::before {
    opacity: 0.15;
  }
  .std-btn-row .right-fill {
    flex-grow: 1;
    flex-shrink: 0;
    opacity: 0.05;
    cursor: auto;
    padding: 0;
  }
}
/* -----------------------------------------------------
 * INFO TOGGLER ----------------------------------------  
 * -----------------------------------------------------
 */
@layer component {
  .main-info-toggler {
    transition: color 0.5s ease;
    position: relative;
  }
  .main-info-toggler.no-help-found {
    color: #939598;
    cursor: not-allowed;
  }
  .main-info-toggler::after {
    content: "";
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    border: 1px solid white;
    position: absolute;
  }
  .main-info-toggler.active {
    color: white;
  }
  .main-info-toggler.active::after {
    opacity: 1;
  }
}
@layer system-display-control {
  @media print {
    .it-help, .helpblock {
      display: none;
    }
  }
}
@layer base-display {
  .it-help, .helpblock {
    display: block;
  }
  .it-help .helpblock-body, .helpblock .helpblock-body {
    display: block;
  }
}
@layer base {
  .it-help, .helpblock {
    margin-bottom: 20px;
    width: 100%;
    border-radius: 8px;
    background-color: #D7E9F5;
  }
  .it-help .helpblock-header, .helpblock .helpblock-header {
    position: relative;
    display: grid;
    width: 100%;
    grid-template-columns: 60px auto 50px;
    cursor: pointer;
  }
  .it-help .helpblock-header .helpblock-header-icon, .helpblock .helpblock-header .helpblock-header-icon {
    transform: translate(-1px -1px);
    width: 80px;
    height: 48px;
    color: var(--hs-primary);
    font-size: 1.6em;
    font-weight: 300;
    text-align: center;
    align-content: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .it-help .helpblock-header .helpblock-header-icon div, .helpblock .helpblock-header .helpblock-header-icon div {
    border-radius: 50%;
    width: 37px;
    height: 37px;
    aspect-ratio: 1/1;
    background-color: white;
  }
  .it-help .helpblock-header .helpblock-header-icon div span, .helpblock .helpblock-header .helpblock-header-icon div span {
    display: inline-block;
    transform: translateY(-9%);
  }
  .it-help .helpblock-header #helpblock-icon, .helpblock .helpblock-header #helpblock-icon {
    color: var(--hs-primary);
    font-size: 30px !important;
    font-weight: 700 !important;
    padding: 20px;
  }
  .it-help .helpblock-header .helpblock-header-label, .helpblock .helpblock-header .helpblock-header-label {
    align-items: center;
    display: flex;
  }
  .it-help .helpblock-header .helpblock-header-label h2, .helpblock .helpblock-header .helpblock-header-label h2 {
    font-size: 1.4em;
    margin-bottom: 0;
    color: var(--hs-primary);
  }
  .it-help .helpblock-header .helpblock-header-expander, .helpblock .helpblock-header .helpblock-header-expander {
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 1.4em;
  }
  .it-help .helpblock-header .helpblock-header-expander a, .helpblock .helpblock-header .helpblock-header-expander a {
    color: var(--hs-primary);
  }
  .it-help .helpblock-header .helpblock-header-close, .helpblock .helpblock-header .helpblock-header-close {
    align-content: center;
  }
  .it-help .helpblock-header .helpblock-close-btn, .helpblock .helpblock-header .helpblock-close-btn {
    font-size: 30px;
    font-weight: 700;
    color: var(--hs-primary);
  }
  .it-help .helpblock-body, .helpblock .helpblock-body {
    padding: 0px 0px 10px 80px;
  }
  @media (max-width: 1230px) {
    .it-help .helpblock-body, .helpblock .helpblock-body {
      padding-right: 5%;
    }
  }
  @media (max-width: 480px) {
    .it-help .helpblock-body, .helpblock .helpblock-body {
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  .it-help .helpblock-body a, .helpblock .helpblock-body a {
    transition: filter 0.2s linear;
    filter: drop-shadow(0px 0px 0px transparent);
  }
  .it-help .helpblock-body a:hover, .helpblock .helpblock-body a:hover {
    filter: drop-shadow(0.5px 0.5px 1px var(--hs-primary));
  }
  .it-help .helpblock-body h5, .helpblock .helpblock-body h5 {
    font-size: 1.1rem;
    margin: 0px;
  }
  .it-help .helpblock-body p, .helpblock .helpblock-body p {
    font-weight: 200 !important;
  }
}

.it-help.helpblock {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-8px);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 500ms ease, opacity 500ms ease, transform 500ms ease, margin 500ms ease, padding 500ms ease;
}

.it-help.helpblock.shown {
  max-height: 2000px;
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 20px;
  padding-top: revert;
  padding-bottom: revert;
}

.it-highlight-btn {
  cursor: pointer;
}

.it-highlight-text {
  display: inline-block;
}

.it-highlighted {
  animation: it-highlight-animation ease 2s;
}
.it-highlighted i {
  animation: it-highlight-animation ease 2s;
}
.it-highlighted a {
  animation: it-highlight-animation ease 2s;
}
.it-highlighted.std-btn-large-icon i {
  animation: it-highlight-animation-large-btn ease 2s;
}
.it-highlighted:has(i) {
  animation: unset;
}

@keyframes it-highlight-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.4);
    color: #00BE96;
  }
  100% {
    transform: scale(1);
    color: revert;
  }
}
@keyframes it-highlight-animation-large-btn {
  0% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1.9);
    color: #00BE96;
  }
  100% {
    transform: scale(1.5);
    color: revert;
  }
}
/* -----------------------------------------------------
 * BREADCRUMBS -----------------------------------------
 * The bootstrap breadcrumbs are adapted for better ----
 * mobile display in combination with our TitleBar -----
 * component. ------------------------------------------  
 * -----------------------------------------------------
 */
.breadcrumbs-mobile-decoy {
  display: none;
}

@media (max-width: 480px) {
  .breadcrumbs-mobile-decoy {
    display: block;
    height: 64px;
  }
  @layer display-control {
    nav.breadcrumb-wrapper:not(.expanded) li.breadcrumb-item:nth-last-child(2)::before, nav.breadcrumb-wrapper.expanded ol.breadcrumb::after,
    nav.breadcrumb-wrapper li.breadcrumb-item {
      display: none;
    }
    nav.breadcrumb-wrapper.expanded li.breadcrumb-item,
    nav.breadcrumb-wrapper li.breadcrumb-item:nth-last-child(2) {
      display: revert-layer;
    }
  }
  @layer base-display {
    nav.breadcrumb-wrapper li.breadcrumb-item:last-child::after,
    nav.breadcrumb-wrapper ol.breadcrumb::after {
      display: inline-block;
    }
  }
  @layer component {
    nav.breadcrumb-wrapper {
      width: 45%;
      position: relative;
    }
    nav.breadcrumb-wrapper.expanded {
      width: 100%;
      z-index: 3;
    }
    nav.breadcrumb-wrapper:not(.expanded) li.breadcrumb-item:nth-last-child(2) {
      max-width: calc(100% - 28px);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-left: 0;
    }
    nav.breadcrumb-wrapper li.breadcrumb-item:last-child::after,
    nav.breadcrumb-wrapper ol.breadcrumb::after {
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      font-family: "FontAwesome";
      font-weight: 900;
      content: " \f105 ...";
      margin-left: 10px;
      color: var(--hs-primary);
    }
    nav.breadcrumb-wrapper ol.breadcrumb::after {
      position: absolute;
      right: 10px;
    }
    nav.breadcrumb-wrapper li.breadcrumb-item:last-child::after {
      content: "\f104";
      color: var(--bs-breadcrumb-item-active-color);
    }
  }
}
@layer base-display {
  form.form-horizontal > div {
    display: inline-block;
  }
  form .form-group .form-group.is-invalid .invalid-feedback,
  form .form-group .is-invalid .invalid-feedback {
    display: block;
  }
  form .passwordinput .input-line {
    display: flex;
  }
  form .error-summary {
    color: #dc3545;
  }
  form .error-summary p {
    color: var(--bs-body-color);
  }
}
@layer base {
  form.form-horizontal {
    margin-bottom: 20px;
  }
  form.form-horizontal > div {
    margin-right: 20px;
  }
  form .form-group .is-invalid .form-control {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }
  form .passwordinput .input-line {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 5px;
  }
  form .passwordinput .input-line > .form-group {
    flex: 1 0 auto;
    width: 200px;
  }
  form .passwordinput .input-line > .btn-group {
    margin-top: 24px;
    flex: 0 0 auto;
  }
  form .template-radio-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
  }
  form .template-radio-table tr.odd {
    background-color: rgba(0, 0, 0, 0.05);
  }
  form .template-radio-table tr.even {
    background-color: #ffffff;
  }
  form .template-radio-table td {
    padding: 0.6em 1em;
  }
}

/*# sourceMappingURL=site.css.map */