/*!**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./projects/banking-platform/src/hdfc-savings-styles.scss?ngGlobalStyle ***!
  \**************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap);
/*!************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/primeng/resources/primeng.css ***!
  \************************************************************************************************************************************************************************************************************************************/
.p-overflow-hidden {
    overflow: hidden;
    padding-right: var(--scrollbar-width);
}

@layer primeng {
    .p-component,
    .p-component * {
        box-sizing: border-box;
    }

    .p-hidden {
        display: none;
    }

    .p-hidden-accessible {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .p-hidden-accessible input,
    .p-hidden-accessible select {
        transform: scale(0);
    }

    .p-disabled,
    .p-disabled * {
        cursor: default !important;
        pointer-events: none;
    }

    .p-component-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .p-scrollbar-measure {
        width: 100px;
        height: 100px;
        overflow: scroll;
        position: absolute;
        top: -9999px;
    }
    @keyframes p-fadein {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }

    input[type='button'],
    input[type='submit'],
    input[type='reset'],
    input[type='file']::-webkit-file-upload-button,
    button {
        border-radius: 0;
    }

    .p-link {
        text-align: left;
        background-color: transparent;
        margin: 0;
        padding: 0;
        border: none;
        cursor: pointer;
        -webkit-user-select: none;
                user-select: none;
    }

    .p-link:disabled {
        cursor: default;
    }

    /* Non ng overlay animations */

    .p-icon-wrapper {
        display: inline-flex;
    }

    .p-icon {
        display: inline-block;
    }

    .p-icon-spin {
        animation: p-icon-spin 2s infinite linear;
    }
}

@keyframes p-icon-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(359deg);
    }
}

@layer primeng {
    .p-badge {
        display: inline-block;
        border-radius: 10px;
        text-align: center;
        padding: 0 0.5rem;
    }

    .p-badge-no-gutter {
        padding: 0;
        border-radius: 50%;
    }
}

@layer primeng {
    .p-button {
        margin: 0;
        display: inline-flex;
        cursor: pointer;
        -webkit-user-select: none;
                user-select: none;
        align-items: center;
        vertical-align: bottom;
        text-align: center;
        overflow: hidden;
        position: relative;
    }

    .p-button-label {
        flex: 1 1 auto;
    }

    .p-button-icon-right {
        order: 1;
    }

    .p-button:disabled {
        cursor: default;
        pointer-events: none;
    }

    .p-button-icon-only {
        justify-content: center;
    }

    .p-button-icon-only:after {
        content: 'p';
        visibility: hidden;
        clip: rect(0 0 0 0);
        width: 0;
    }

    .p-button-vertical {
        flex-direction: column;
    }

    .p-button-icon-bottom {
        order: 2;
    }
}

@layer primeng {
    .p-checkbox {
        display: inline-flex;
        cursor: pointer;
        -webkit-user-select: none;
                user-select: none;
        vertical-align: bottom;
        position: relative;
    }

    .p-checkbox-disabled {
        cursor: default !important;
        pointer-events: none;
    }

    .p-checkbox-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p-checkbox {
        display: inline-flex;
        vertical-align: bottom;
        align-items: center;
    }

    .p-checkbox-label {
        line-height: 1;
    }
}
@layer primeng {
    .p-inputtext {
        margin: 0;
    }

    .p-fluid .p-inputtext {
        width: 100%;
    }

    /* InputGroup */

    /* Floating Label */
    .p-float-label {
        display: block;
        position: relative;
    }

    .p-float-label label {
        position: absolute;
        pointer-events: none;
        top: 50%;
        margin-top: -0.5rem;
        transition-property: all;
        transition-timing-function: ease;
        line-height: 1;
    }

    .p-float-label textarea ~ label {
        top: 1rem;
    }

    .p-float-label input:focus ~ label,
    .p-float-label textarea:focus ~ label,
    .p-float-label .p-inputwrapper-focus ~ label,
    .p-float-label .p-inputwrapper-filled ~ label {
        top: -0.75rem;
        font-size: 12px;
    }

    .p-float-label .input:-webkit-autofill ~ label {
        top: -20px;
        font-size: 12px;
    }

    .p-float-label .p-placeholder,
    .p-float-label input::placeholder,
    .p-float-label .p-inputtext::placeholder {
        opacity: 0;
        transition-property: all;
        transition-timing-function: ease;
    }
    .p-float-label .p-focus .p-placeholder,
    .p-float-label input:focus::placeholder,
    .p-float-label .p-inputtext:focus::placeholder {
        opacity: 1;
        transition-property: all;
        transition-timing-function: ease;
    }
}

@layer primeng {
    .p-radiobutton {
        display: inline-flex;
        cursor: pointer;
        -webkit-user-select: none;
                user-select: none;
        vertical-align: bottom;
        position: relative;
    }

    .p-radiobutton-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .p-radiobutton-icon {
        backface-visibility: hidden;
        transform: translateZ(0) scale(0.1);
        border-radius: 50%;
        visibility: hidden;
    }

    .p-radiobutton-box.p-highlight .p-radiobutton-icon {
        transform: translateZ(0) scale(1, 1);
        visibility: visible;
    }

    p-radiobutton {
        display: inline-flex;
        vertical-align: bottom;
        align-items: center;
    }

    .p-radiobutton-label {
        line-height: 1;
    }
}

@layer primeng {
    .p-ripple {
        overflow: hidden;
        position: relative;
    }

    .p-ink {
        display: block;
        position: absolute;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
        transform: scale(0);
    }

    .p-ink-active {
        animation: ripple 0.4s linear;
    }

    .p-ripple-disabled .p-ink {
        display: none !important;
    }
}

@keyframes ripple {
    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

@layer primeng {
    .p-tooltip {
        position: absolute;
        display: none;
        padding: 0.25em 0.5rem;
        max-width: 12.5rem;
        pointer-events: none;
    }

    .p-tooltip.p-tooltip-right,
    .p-tooltip.p-tooltip-left {
        padding: 0 0.25rem;
    }

    .p-tooltip.p-tooltip-top,
    .p-tooltip.p-tooltip-bottom {
        padding: 0.25em 0;
    }

    .p-tooltip .p-tooltip-text {
        white-space: pre-line;
        word-break: break-word;
    }

    .p-tooltip-arrow {
        scale: 2;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }

    .p-tooltip-right .p-tooltip-arrow {
        top: 50%;
        left: 0;
        margin-top: -0.25rem;
        border-width: 0.25em 0.25em 0.25em 0;
    }

    .p-tooltip-left .p-tooltip-arrow {
        top: 50%;
        right: 0;
        margin-top: -0.25rem;
        border-width: 0.25em 0 0.25em 0.25rem;
    }

    .p-tooltip.p-tooltip-top {
        padding: 0.25em 0;
    }

    .p-tooltip-top .p-tooltip-arrow {
        bottom: 0;
        left: 50%;
        margin-left: -0.25rem;
        border-width: 0.25em 0.25em 0;
    }

    .p-tooltip-bottom .p-tooltip-arrow {
        top: 0;
        left: 50%;
        margin-left: -0.25rem;
        border-width: 0 0.25em 0.25rem;
    }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@pv-frontend/pv-shared-components/resources/styles/theme.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
html {
  font-size: 16px;
  @media screen and (max-width: 768px) {
    font-size: 14px;
  }
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold');
}
* {
  box-sizing: border-box;
}
.p-component {
  font-family: var(--font-family);
  font-size: 1rem;
  font-weight: normal;
}
.p-component-overlay {
  background-color: var(--maskbg);
  transition-duration: 0.2s;
}
.p-disabled,
.p-component:disabled {
  opacity: 0.38;
}
.pi {
  font-size: 1rem;
}
.p-icon {
  width: 1rem;
  height: 1rem;
}
.p-link {
  font-size: 1rem;
  font-family: var(--font-family);
  border-radius: 4px;
}
.p-link:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
}
.p-component-overlay-enter {
  animation: p-component-overlay-enter-animation 150ms forwards;
}
.p-component-overlay-leave {
  animation: p-component-overlay-leave-animation 150ms forwards;
}
@keyframes p-component-overlay-enter-animation {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--maskbg);
  }
}
@keyframes p-component-overlay-leave-animation {
  from {
    background-color: var(--maskbg);
  }
  to {
    background-color: transparent;
  }
}
.p-checkbox {
  width: 18px;
  height: 18px;
}
.p-checkbox .p-checkbox-box {
  border: 2px solid var(--surface-600);
  background: #fff;
  width: 18px;
  height: 18px;
  color: var(--text-color);
  border-radius: 4px;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-checkbox .p-checkbox-box .p-checkbox-icon {
  transition-duration: 0.2s;
  color: var(--primary-color-text);
  font-size: 14px;
}
.p-checkbox .p-checkbox-box .p-icon {
  width: 14px;
  height: 14px;
}
.p-checkbox .p-checkbox-box.p-highlight {
  border-color: var(--primary-color);
  background: var(--primary-color);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  border-color: var(--text-color);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
  border-color: var(--primary-color);
}
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
  border-color: var(--primary-color);
  background: var(--primary-color);
  color: var(--primary-color-text);
}
p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
  border-color: var(--feedback-border-negative-high-contrast);
}
.p-input-filled .p-checkbox .p-checkbox-box {
  background-color: var(--surface-100);
}
.p-input-filled .p-checkbox .p-checkbox-box.p-highlight {
  background: var(--primary-color);
}
.p-input-filled .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
  background-color: var(--surface-border-subtle);
}
.p-input-filled
  .p-checkbox:not(.p-checkbox-disabled)
  .p-checkbox-box.p-highlight:hover {
  background: var(--primary-color);
}
.p-checkbox-label {
  margin-left: 0.5rem;
}
.p-dropdown {
  background: #fff;
  border: 1px solid var(--surface-border);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  border-radius: 4px;
}
.p-dropdown:not(.p-disabled):hover {
  border-color: var(--text-color);
}
.p-dropdown:not(.p-disabled).p-focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
  border-color: var(--primary-color);
}
.p-dropdown.p-dropdown-clearable .p-dropdown-label {
  padding-right: 2rem;
}
.p-dropdown .p-dropdown-label {
  background: transparent;
  border: 0 none;
}
.p-dropdown .p-dropdown-label.p-placeholder {
  color: var(--text-color-secondary);
}
.p-dropdown .p-dropdown-label:enabled:focus {
  outline: 0 none;
  box-shadow: none;
}
.p-dropdown .p-dropdown-trigger {
  background: transparent;
  color: var(--text-color-secondary);
  width: 2.357rem;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.p-dropdown .p-dropdown-clear-icon {
  color: var(--text-color-secondary);
  right: 2.357rem;
}
.p-dropdown-panel {
  background: #fff;
  color: var(--text-color);
  border: 0 none;
  border-radius: 4px;
  box-shadow: 0 5px 5px -3px var(--box-shadow-1),
    0 8px 10px 1px var(--box-shadow-2), 0 3px 14px 2px var(--box-shadow-3);
}
.p-dropdown-panel .p-dropdown-header {
  padding: 1rem;
  border-bottom: 1px solid var(--surface-border);
  color: var(--text-color);
  background: #fff;
  margin: 0;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter {
  padding-right: 2rem;
  margin-right: -2rem;
}
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter-icon {
  right: 1rem;
  color: var(--text-color-secondary);
}
.p-dropdown-panel .p-dropdown-items {
  padding: 0;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item {
  margin: 0;
  padding: 1rem 1rem;
  border: 0 none;
  color: var(--text-color);
  background: transparent;
  transition: none;
  border-radius: 0;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
  color: var(--primary-color);
  background: var(--highlight-bg);
}
.p-dropdown-panel
  .p-dropdown-items
  .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover {
  color: var(--text-color);
  background: var(--feedback-neutral-low-contrast-hover);
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
  padding: 1rem 1rem;
  color: var(--text-color);
  background: transparent;
}
.p-dropdown-panel .p-dropdown-items .p-dropdown-item-group {
  margin: 0;
  padding: 1rem;
  color: var(--text-color-secondary);
  background: #fff;
  font-weight: 400;
}
p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
  border-color: var(--feedback-border-negative-high-contrast);
}
.p-input-filled .p-dropdown {
  background: var(--surface-100);
}
.p-input-filled .p-dropdown:not(.p-disabled):hover {
  background-color: var(--feedback-neutral-low-contrast-hover);
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus {
  background-color: var(--feedback-neutral-low-contrast-focus);
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus .p-inputtext {
  background-color: transparent;
}
.p-inputtext {
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--text-color);
  background: #fff;
  padding: 1rem 1rem;
  border: 1px solid var(--surface-border);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  appearance: none;
  border-radius: 4px;
}
.p-inputtext:enabled:hover {
  border-color: var(--primary-color);
}
.p-inputtext:enabled:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
  border-color: var(--primary-color);
}
.p-inputtext.ng-dirty.ng-invalid {
  border-color: var(--feedback-border-negative-high-contrast);
}
.p-float-label > label {
  left: 1rem;
  color: var(--text-color-secondary);
  transition-duration: 0.2s;
}
.p-float-label > .ng-invalid.ng-dirty + label {
  color: var(--feedback-text-negative);
}
::-webkit-input-placeholder {
  color: var(--text-color-secondary);
}
::-moz-placeholder {
  color: var(--text-color-secondary);
}
.p-input-filled .p-inputtext {
  background-color: var(--surface-100);
}
.p-input-filled .p-inputtext:enabled:hover {
  background-color: var(--feedback-neutral-low-contrast-hover);
}
.p-input-filled .p-inputtext:enabled:focus {
  background-color: var(--feedback-neutral-low-contrast-focus);
}
.p-radiobutton {
  width: 20px;
  height: 20px;
}
.p-radiobutton .p-radiobutton-box {
  border: 2px solid var(--surface-600);
  background: #fff;
  width: 20px;
  height: 20px;
  color: var(--text-color);
  border-radius: 50%;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
  border-color: var(--text-color);
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
  border-color: var(--primary-color);
}
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
  width: 10px;
  height: 10px;
  transition-duration: 0.2s;
  background-color: var(--primary-color);
}
.p-radiobutton .p-radiobutton-box.p-highlight {
  border-color: var(--primary-color);
  background: #fff;
}
.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
  border-color: var(--primary-color);
  background: #fff;
  color: var(--primary-color);
}
p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
  border-color: var(--feedback-border-negative-high-contrast);
}
.p-input-filled .p-radiobutton .p-radiobutton-box {
  background-color: var(--surface-100);
}
.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
  background-color: var(--feedback-neutral-low-contrast-hover);
}
.p-input-filled .p-radiobutton .p-radiobutton-box.p-highlight {
  background: #fff;
}
.p-input-filled
  .p-radiobutton
  .p-radiobutton-box.p-highlight:not(.p-disabled):hover {
  background: #fff;
}
.p-radiobutton-label {
  margin-left: 0.5rem;
}
.p-button {
  color: var(--primary-color-text);
  background: var(--primary-color);
  border: 0 none;
  padding: 0.714rem 1rem;
  font-size: 1rem;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s,
    box-shadow 0.2s, background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
  border-radius: 4px;
}
.p-button:enabled:hover {
  background: var(--primary-600);
  color: var(--primary-color-text);
  border-color: transparent;
}
.p-button:enabled:active {
  background: var(--primary-700);
  color: var(--primary-color-text);
  border-color: transparent;
}
.p-button.p-button-outlined {
  background-color: transparent;
  color: var(--primary-color);
  border: 0 none;
}
.p-button.p-button-outlined:enabled:hover {
  background: var(--primary-600);
  color: var(--primary-color);
  border: 0 none;
}
.p-button.p-button-outlined:enabled:active {
  background: var(--primary-700);
  color: var(--primary-color);
  border: 0 none;
}
.p-button.p-button-outlined.p-button-plain {
  color: var(--text-color-secondary);
  border-color: var(--text-color-secondary);
}
.p-button.p-button-outlined.p-button-plain:enabled:hover {
  background: var(--surface-border);
  color: var(--text-color-secondary);
}
.p-button.p-button-outlined.p-button-plain:enabled:active {
  background: var(--surface-border);
  color: var(--text-color-secondary);
}
.p-button.p-button-text {
  background-color: transparent;
  color: var(--primary-color);
  border-color: transparent;
}
.p-button.p-button-text:enabled:hover {
  background: var(--primary-300);
  color: var(--primary-color);
  border-color: transparent;
}
.p-button.p-button-text:enabled:active {
  background: var(--primary-400);
  color: var(--primary-color);
  border-color: transparent;
}
.p-button.p-button-text.p-button-plain {
  color: var(--text-color-secondary);
}
.p-button.p-button-text.p-button-plain:enabled:hover {
  background: var(--feedback-neutral-low-contrast-hover);
  color: var(--text-color-secondary);
}
.p-button.p-button-text.p-button-plain:enabled:active {
  background: var(----feedback-neutral-low-contrast-active);
  color: var(--text-color-secondary);
}
.p-button:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
}
.p-button .p-button-label {
  transition-duration: 0.2s;
}
.p-button .p-button-icon-left {
  margin-right: 0.5rem;
}
.p-button .p-button-icon-right {
  margin-left: 0.5rem;
}
.p-button .p-button-icon-bottom {
  margin-top: 0.5rem;
}
.p-button .p-button-icon-top {
  margin-bottom: 0.5rem;
}
.p-button .p-badge {
  margin-left: 0.5rem;
  min-width: 1rem;
  height: 1rem;
  line-height: 1rem;
  color: var(--primary-color);
  background-color: #fff;
}
.p-button.p-button-raised {
  box-shadow: 0 3px 1px -2px var(--box-shadow-1),
    0 2px 2px 0 var(--box-shadow-2), 0 1px 5px 0 var(--box-shadow-3);
}
.p-button.p-button-rounded {
  border-radius: 2rem;
}
.p-button.p-button-icon-only {
  width: 3rem;
  padding: 0.714rem;
}
.p-button.p-button-icon-only .p-button-icon-left,
.p-button.p-button-icon-only .p-button-icon-right {
  margin: 0;
}
.p-button.p-button-icon-only.p-button-rounded {
  border-radius: 50%;
  height: 3rem;
}
.p-button.p-button-sm {
  font-size: 0.875rem;
  padding: 0.62475rem 0.875rem;
}
.p-button.p-button-sm .p-button-icon {
  font-size: 0.875rem;
}
.p-button.p-button-lg {
  font-size: 1.25rem;
  padding: 0.8925rem 1.25rem;
}
.p-button.p-button-lg .p-button-icon {
  font-size: 1.25rem;
}
.p-button.p-button-loading-label-only .p-button-label {
  margin-left: 0.5rem;
}
.p-button.p-button-loading-label-only .p-button-loading-icon {
  margin-right: 0;
}
.p-fluid .p-button {
  width: 100%;
}
.p-fluid .p-button-icon-only {
  width: 3rem;
}
.p-button.p-button-link {
  color: var(--primary-color);
  background: transparent;
  border: transparent;
}
.p-button.p-button-link:enabled:hover {
  background: transparent;
  color: var(--primary-color);
  border-color: transparent;
}
.p-button.p-button-link:enabled:hover .p-button-label {
  text-decoration: underline;
}
.p-button.p-button-link:enabled:focus {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.p-button.p-button-link:enabled:active {
  background: transparent;
  color: var(--primary-color);
  border-color: transparent;
}
.p-dialog {
  border-radius: 4px;
  box-shadow: 0 11px 15px -7px var(--box-shadow-1),
    0 24px 38px 3px var(--box-shadow-2), 0 9px 46px 8px var(--box-shadow-3);
  border: 0 none;
}
.p-sidebar {
  background: #fff;
  color: var(--text-color);
  border: 0 none;
  box-shadow: 0 11px 15px -7px var(--box-shadow-1),
    0 24px 38px 3px var(--box-shadow-2), 0 9px 46px 8px var(--box-shadow-3);
}
.p-sidebar .p-sidebar-header {
  padding: 1rem;
}
.p-sidebar .p-sidebar-header .p-sidebar-close,
.p-sidebar .p-sidebar-header .p-sidebar-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--text-color-secondary);
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-sidebar .p-sidebar-header .p-sidebar-close:enabled:hover,
.p-sidebar .p-sidebar-header .p-sidebar-icon:enabled:hover {
  color: var(--text-color-secondary);
  border-color: transparent;
  background: var(--surface-border);
}
.p-sidebar .p-sidebar-header .p-sidebar-close:focus,
.p-sidebar .p-sidebar-header .p-sidebar-icon:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
}
.p-sidebar .p-sidebar-header + .p-sidebar-content {
  padding-top: 0;
}
.p-sidebar .p-sidebar-content {
  padding: 1rem;
}
.p-sidebar .p-sidebar-footer {
  padding: 1rem;
}
.p-tooltip .p-tooltip-text {
  background: var(--surface-action-icon-low-contrast);
  color: var(--primary-color-text);
  padding: 0.5rem;
  box-shadow: 0 5px 5px -3px var(--box-shadow-1),
    0 8px 10px 1px var(--box-shadow-2), 0 3px 14px 2px var(--box-shadow-3);
  border-radius: 4px;
}
.p-tooltip.p-tooltip-right .p-tooltip-arrow {
  border-right-color: var(--surface-action-icon-low-contrast);
}
.p-tooltip.p-tooltip-left .p-tooltip-arrow {
  border-left-color: var(--surface-action-icon-low-contrast);
}
.p-tooltip.p-tooltip-top .p-tooltip-arrow {
  border-top-color: var(--surface-action-icon-low-contrast);
}
.p-tooltip.p-tooltip-bottom .p-tooltip-arrow {
  border-bottom-color: var(--surface-action-icon-low-contrast);
}
.p-toast {
  opacity: 0.9;
}
.p-toast .p-toast-message {
  margin: 0 0 1rem 0;
  box-shadow: 0 5px 5px -3px var(--box-shadow-1),
    0 8px 10px 1px var(--box-shadow-2), 0 3px 14px 2px var(--box-shadow-3);
  border-radius: 4px;
}
.p-toast .p-toast-message .p-toast-message-content {
  padding: 1.5rem;
  border-width: 0 0 0 0;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-message-text {
  margin: 0 0 0 1rem;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-message-icon {
  font-size: 2rem;
}
.p-toast
  .p-toast-message
  .p-toast-message-content
  .p-icon:not(.p-toast-icon-close-icon) {
  width: 2rem;
  height: 2rem;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-summary {
  font-weight: 700;
}
.p-toast .p-toast-message .p-toast-message-content .p-toast-detail {
  margin: 0.5rem 0 0 0;
}
.p-toast .p-toast-message .p-toast-icon-close {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.p-toast .p-toast-message .p-toast-icon-close:hover {
  background: rgba(255, 255, 255, 0.3);
}
.p-toast .p-toast-message .p-toast-icon-close:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
}
.p-badge {
  background: var(--primary-color);
  color: var(--primary-color-text);
  font-size: 0.75rem;
  font-weight: 700;
  min-width: 1.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
}
.p-skeleton {
  background-color: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}
.p-skeleton:after {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0)
  );
}
.p-button {
  font-weight: 500;
  min-width: 4rem;
}
.p-button.p-button-icon-only {
  min-width: auto;
}
.p-button:enabled:focus {
  background: var(--primary-600);
}
.p-button:enabled:active {
  background: var(--primary-600);
}
.p-button .p-ink {
  background-color: rgba(255, 255, 255, 0.32);
}
.p-button.p-button-text:enabled:focus,
.p-button.p-button-outlined:enabled:focus {
  background: var(--primary-400);
}
.p-button.p-button-text:enabled:active,
.p-button.p-button-outlined:enabled:active {
  background: var(--primary-400);
}
.p-button.p-button-text .p-ink,
.p-button.p-button-outlined .p-ink {
  background: var(--primary-400);
}
.p-button.p-button-outlined {
  box-shadow: inset 0 0 0 1px;
}
.p-button.p-button-outlined:enabled:focus {
  box-shadow: inset 0 0 0 1px;
}
.p-button.p-button-outlined:enabled:active {
  box-shadow: inset 0 0 0 1px;
}
.p-button:disabled {
  background-color: var(--surface-border) !important;
  color: var(--surface-text-muted-low-contrast) !important;
  opacity: 1;
}
.p-button:disabled.p-button-text {
  background-color: transparent !important;
  color: var(--surface-text-muted-low-contrast) !important;
}
.p-button:disabled.p-button-outlined {
  background-color: transparent !important;
  color: var(--surface-text-muted-low-contrast) !important;
  border-color: var(--surface-border) !important;
}
.p-button.p-button-raised:enabled:focus {
  box-shadow: 0 3px 1px -2px var(--box-shadow-1),
    0 2px 2px 0 var(--box-shadow-2), 0 1px 5px 0 var(--box-shadow-3);
}
.p-checkbox {
  border-radius: 50%;
  transition: box-shadow 0.2s;
}
.p-checkbox .p-checkbox-box {
  border-color: var(--surface-600);
  border-radius: 2px;
  position: relative;
}
.p-checkbox .p-checkbox-box:not(.p-disabled):hover {
  border-color: var(--surface-600);
}
.p-checkbox .p-checkbox-box:not(.p-disabled).p-focus {
  border-color: var(--surface-600);
}
.p-checkbox .p-checkbox-box.p-highlight:not(.p-disabled).p-focus {
  border-color: var(--primary-color);
}
.p-checkbox .p-checkbox-box.p-highlight .p-checkbox-icon.pi-check:before {
  content: '';
  position: absolute;
  top: 6px;
  left: 1px;
  border-right: 2px solid transparent;
  border-bottom: 2px solid transparent;
  transform: rotate(45deg);
  transform-origin: 0% 100%;
  animation: checkbox-check 125ms 50ms linear forwards;
}
.p-checkbox:not(.p-checkbox-disabled):hover {
  box-shadow: 0 0 1px 10px var(--surface-border);
}
.p-checkbox:not(.p-checkbox-disabled).p-checkbox-focused {
  box-shadow: 0 0 1px 10px var(--surface-border);
}
.p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled):hover {
  box-shadow: 0 0 1px 10px var(--primary-400);
}
.p-checkbox.p-checkbox-checked:not(.p-checkbox-disabled).p-checkbox-focused {
  box-shadow: 0 0 1px 10px var(--highlight-bg);
}
.p-input-filled .p-checkbox .p-checkbox-box {
  background-color: #fff;
}
.p-input-filled .p-checkbox .p-checkbox-box:not(.p-disabled):hover {
  background-color: #fff;
}
@keyframes checkbox-check {
  0% {
    width: 0;
    height: 0;
    border-color: #fff;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  33% {
    width: 4px;
    height: 0;
    transform: translate3d(0, 0, 0) rotate(45deg);
  }
  100% {
    width: 4px;
    height: 10px;
    border-color: #fff;
    transform: translate3d(0, -10px, 0) rotate(45deg);
  }
}
.p-dropdown .p-inputtext,
.p-dropdown .p-dropdown-trigger {
  background-image: none;
  background: transparent;
}
.p-dropdown .p-inputtext {
  border: 0 none;
}
.p-dropdown:not(.p-disabled).p-focus {
  box-shadow: inset 0 0 0 1px var(--primary-color),
    inset 0 0 0 1px var(--primary-color), inset 0 0 0 1px var(--primary-color),
    inset 0 0 0 1px var(--primary-color);
}
.p-dropdown-item .p-ink {
  background-color: var(--primary-400);
}
.p-input-filled .p-dropdown {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid transparent;
  background: var(--surface-100) no-repeat;
  background-image: linear-gradient(
      to bottom,
      var(--primary-color),
      var(--primary-color)
    ),
    linear-gradient(to bottom, var(--surface-border), var(--surface-border));
  background-size: 0 2px, 100% 1px;
  background-position: 50% 100%, 50% 100%;
  background-origin: border-box;
}
.p-input-filled .p-dropdown .p-inputtext {
  background-image: none;
  background-color: transparent;
}
.p-input-filled .p-dropdown:not(.p-disabled):hover {
  background-color: var(--surface-border-subtle);
  border-color: transparent;
  background-image: linear-gradient(
      to bottom,
      var(--primary-color),
      var(--primary-color)
    ),
    linear-gradient(to bottom, var(--text-color), var(--text-color));
}
.p-input-filled .p-dropdown:not(.p-disabled).p-focus,
.p-input-filled .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
  box-shadow: none;
  background-color: var(--surface-border-normal);
  border-color: transparent;
  background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-dropdown .p-inputtext:enabled:hover,
.p-input-filled .p-dropdown .p-inputtext:enabled:focus {
  background-image: none;
  background: transparent;
}
.p-input-filled .p-dropdown .p-inputtext {
  border: 0 none;
}
.p-input-filled p-dropdown.ng-dirty.ng-invalid .p-dropdown {
  border-color: transparent;
  background-image: linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    ),
    linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    );
}
.p-input-filled
  p-dropdown.ng-dirty.ng-invalid
  .p-dropdown:not(.p-disabled):hover {
  background-image: linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    ),
    linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    );
}
.p-input-filled
  p-dropdown.ng-dirty.ng-invalid
  .p-dropdown:not(.p-disabled).p-focus,
.p-input-filled
  p-dropdown.ng-dirty.ng-invalid
  .p-dropdown:not(.p-disabled).p-inputwrapper-focus {
  box-shadow: none;
  background-image: linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    ),
    linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    );
}
p-dropdown.ng-dirty.ng-invalid .p-dropdown:not(.p-disabled).p-focus {
  box-shadow: inset 0 0 0 1px var(--feedback-border-negative-high-contrast),
    inset 0 0 0 1px var(--feedback-border-negative-high-contrast),
    inset 0 0 0 1px var(--feedback-border-negative-high-contrast),
    inset 0 0 0 1px var(--feedback-border-negative-high-contrast);
}
.p-inputtext:enabled:focus {
  box-shadow: inset 0 0 0 1px var(--primary-color),
    inset 0 0 0 1px var(--primary-color), inset 0 0 0 1px var(--primary-color),
    inset 0 0 0 1px var(--primary-color);
}
.p-inputtext:enabled:focus.ng-invalid.ng-dirty {
  box-shadow: inset 0 0 0 1px var(--feedback-border-negative-high-contrast),
    inset 0 0 0 1px var(--feedback-border-negative-high-contrast),
    inset 0 0 0 1px var(--feedback-border-negative-high-contrast),
    inset 0 0 0 1px var(--feedback-border-negative-high-contrast);
}
.p-input-filled .p-inputtext {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid transparent;
  background: var(--surface-100) no-repeat;
  background-image: linear-gradient(
      to bottom,
      var(--primary-color),
      var(--primary-color)
    ),
    linear-gradient(to bottom, var(--surface-border), var(--surface-border));
  background-size: 0 2px, 100% 1px;
  background-position: 50% 100%, 50% 100%;
  background-origin: border-box;
}
.p-input-filled .p-inputtext:enabled:hover {
  background-color: var(--surface-border-subtle);
  border-color: transparent;
  background-image: linear-gradient(
      to bottom,
      var(--primary-color),
      var(--primary-color)
    ),
    linear-gradient(to bottom, var(--text-color), var(--text-color));
}
.p-input-filled .p-inputtext:enabled:focus {
  box-shadow: none;
  background-color: var(--surface-border-normal);
  border-color: transparent;
  background-size: 100% 2px, 100% 1px;
}
.p-input-filled .p-inputtext.ng-invalid.ng-dirty {
  border-color: transparent;
  background-image: linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    ),
    linear-gradient(
      to bottom,
      var(--feedback-border-negative-high-contrast),
      var(--feedback-border-negative-high-contrast)
    );
}
.p-input-filled .p-inputtext.ng-invalid.ng-dirty:enabled:focus {
  box-shadow: none;
  border-color: transparent;
}
.p-float-label input:focus ~ label,
.p-float-label textarea:focus ~ label,
.p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label {
  top: -0.5rem !important;
  background-color: #fff;
  padding: 2px 4px;
  margin-left: -4px;
  margin-top: 0;
}
.p-float-label textarea ~ label {
  margin-top: 0;
}
.p-float-label input:focus ~ label,
.p-float-label .p-inputwrapper-focus ~ label {
  color: var(--primary-color);
}
.p-input-filled .p-float-label .p-inputtext {
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}
.p-input-filled .p-float-label input:focus ~ label,
.p-input-filled .p-float-label textarea:focus ~ label,
.p-input-filled .p-float-label .p-inputwrapper-focus ~ label,
.p-input-filled .p-float-label .p-inputwrapper-filled ~ label {
  top: 0.25rem !important;
  margin-top: 0;
  background: transparent;
}
.p-radiobutton {
  border-radius: 50%;
  transition: box-shadow 0.2s;
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
  border: 2px solid var(--surface-600);
}
.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
  border: 2px solid var(--surface-600);
}
.p-radiobutton .p-radiobutton-box.p-highlight:not(.p-disabled).p-focus {
  border-color: var(--primary-color);
}
.p-radiobutton:not(.p-radiobutton-disabled):hover {
  box-shadow: 0 0 1px 10px var(--surface-border);
}
.p-radiobutton:not(.p-radiobutton-disabled).p-radiobutton-focused {
  box-shadow: 0 0 1px 10px var(--surface-border);
}
.p-radiobutton.p-radiobutton-checked:not(.p-radiobutton-disabled):hover {
  box-shadow: 0 0 1px 10px var(--primary-400);
}
.p-radiobutton.p-radiobutton-checked:not(
    .p-radiobutton-disabled
  ).p-radiobutton-focused {
  box-shadow: 0 0 1px 10px var(--highlight-bg);
}
.p-input-filled .p-radiobutton .p-radiobutton-box {
  background-color: #fff;
}
.p-input-filled .p-radiobutton .p-radiobutton-box:not(.p-disabled):hover {
  background-color: #fff;
}
.p-tooltip .p-tooltip-text {
  box-shadow: none;
  font-size: 0.875rem;
}
.p-tooltip .p-tooltip-arrow {
  display: none;
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/@pv-frontend/pv-shared-components/resources/styles/primeflex.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
.grid {
  display: flex;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
  margin-top: -0.5rem;
}

.grid > .col,
.grid > [class*='col'] {
  box-sizing: border-box;
}

.col {
  flex-grow: 1;
  flex-basis: 0;
  padding: 0.5rem;
}

.surface-100 {
  background-color: var(--surface-100);
}

.border-0 {
  border-color: var(--surface-0);
}

.bg-transparent {
  background-color: transparent;
}
.text-gray-500 {
  color: var(--gray-500);
}
.text-gray-900 {
  color: var(--gray-900);
}
.text-red-400 {
  color: var(--red-400);
}
.border-red-600 {
  border-color: var(--red-600);
}

.text-primary {
  color: var(--primary-color);
}

.bg-primary {
  color: var(--primary-color-text);
  background-color: var(--primary-color);
}

.bg-white {
  background-color: #ffffff;
}

.surface-border {
  border-color: var(--surface-border);
}
.field {
  margin-bottom: 1rem;
}

.field > label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

.field.grid > label {
  display: flex;
  align-items: center;
}

.field > small {
  margin-top: 0.25rem;
}

.field.grid {
  margin-top: 0;
}


.field.grid .col {
  padding-top: 0;
  padding-bottom: 0;
}

.hidden {
  display: none;
}

.block {
  display: block;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}
.underline {
  text-decoration: underline;
}

.no-underline {
  text-decoration: none;
}

.lowercase {
  text-transform: lowercase;
}

.uppercase {
  text-transform: uppercase;
}
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.text-xs {
  font-size: 0.75rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-base {
  font-size: 1rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-xl {
  font-size: 1.25rem;
}

.text-2xl {
  font-size: 1.5rem;
}
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.align-items-start {
  align-items: flex-start;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.align-self-center {
  align-self: center;
}
.flex-1 {
  flex: 1 1 0%;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 1rem;
}

.gap-4 {
  gap: 1.5rem;
}

.gap-5 {
  gap: 2rem;
}
.p-0 {
  padding: 0rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 1rem;
}

.pt-0 {
  padding-top: 0rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-3 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 2rem;
}

.pl-2 {
  padding-left: 0.5rem;
}

.pl-3 {
  padding-left: 1rem;
}

.pb-0 {
  padding-bottom: 0rem;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-3 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 2rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-3 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-4 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.m-0 {
  margin: 0rem;
}

.m-auto {
  margin: auto;
}

.mt-0 {
  margin-top: 0rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-3 {
  margin-top: 1rem;
}

.mt-4 {
  margin-top: 1.5rem;
}

.mt-5 {
  margin-top: 2rem;
}

.mt-6 {
  margin-top: 3rem;
}

.mt-auto {
  margin-top: auto;
}

.mr-1 {
  margin-right: 0.25rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-auto {
  margin-right: auto;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.ml-auto {
  margin-left: auto;
}

.mb-0 {
  margin-bottom: 0rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 1rem;
}

.mb-4 {
  margin-bottom: 1.5rem;
}

.mb-5 {
  margin-bottom: 2rem;
}

.mx-0 {
  margin-left: 0rem;
  margin-right: 0rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-0 {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

.my-3 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.my-4 {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.my-5 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.my-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.border-none {
  border-width: 0px;
  border-style: none;
}

.border-1 {
  border-width: 1px;
  border-style: solid;
}
.border-solid {
  border-style: solid;
}

.border-round-xs {
  border-radius: 0.125rem;
}

.border-round-sm {
  border-radius: 0.25rem;
}

.border-round-3xl {
  border-radius: 1.5rem;
}

.border-circle {
  border-radius: 50%;
}

.border-round-top {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.w-full {
  width: 100%;
}

.w-3 {
  width: 25%;
}

.w-5 {
  width: 41.6667%;
}

.w-7 {
  width: 58.3333%;
}

.w-8 {
  width: 66.6667%;
}

.w-9 {
  width: 75%;
}

.w-12 {
  width: 100%;
}

.w-min {
  width: min-content;
}

.w-max {
  width: max-content;
}

.w-1rem {
  width: 1rem;
}

.w-3rem {
  width: 3rem;
}

.w-4rem {
  width: 4rem;
}

.w-5rem {
  width: 5rem;
}

.w-6rem {
  width: 6rem;
}

.w-25rem {
  width: 25rem;
}
.h-full {
  height: 100%;
}

.h-1rem {
  height: 1rem;
}

.h-3rem {
  height: 3rem;
}

.h-4rem {
  height: 4rem;
}

.h-5rem {
  height: 5rem;
}

.max-w-full {
  max-width: 100%;
}

.min-h-screen {
  min-height: 100vh;
}

.max-h-8rem {
  max-height: 8rem;
}

.max-h-12rem {
  max-height: 12rem;
}
.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0px;
}

.top-100 {
  top: 100%;
}

.left-0 {
  left: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

.outline-none {
  outline: none;
}

.cursor-pointer {
  cursor: pointer;
}

.reset {
  all: unset;
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes scalein {
  0% {
    opacity: 0;
    transform: scaleY(0.8);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes slidedown {
  0% {
    max-height: 0;
  }
  100% {
    max-height: auto;
  }
}
@keyframes slideup {
  0% {
    max-height: 1000px;
  }
  100% {
    max-height: 0;
  }
}
@keyframes fadeinleft {
  0% {
    opacity: 0;
    transform: translateX(-100%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fadeoutleft {
  0% {
    opacity: 1;
    transform: translateX(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }
}
@keyframes fadeinright {
  0% {
    opacity: 0;
    transform: translateX(100%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@keyframes fadeoutright {
  0% {
    opacity: 1;
    transform: translateX(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes fadeinup {
  0% {
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fadeoutup {
  0% {
    opacity: 1;
    transform: translateY(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}
@keyframes fadeindown {
  0% {
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes fadeoutdown {
  0% {
    opacity: 1;
    transform: translateY(0%);
    transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1),
      opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}
@keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes flip {
  from {
    transform: perspective(2000px) rotateX(-100deg);
  }
  to {
    transform: perspective(2000px) rotateX(0);
  }
}
@keyframes flipleft {
  from {
    transform: perspective(2000px) rotateY(-100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2000px) rotateY(0);
    opacity: 1;
  }
}
@keyframes flipright {
  from {
    transform: perspective(2000px) rotateY(100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2000px) rotateY(0);
    opacity: 1;
  }
}
@keyframes flipup {
  from {
    transform: perspective(2000px) rotateX(-100deg);
    opacity: 0;
  }
  to {
    transform: perspective(2000px) rotateX(0);
    opacity: 1;
  }
}
@keyframes zoomin {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomindown {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
  }
}
@keyframes zoominleft {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
  }
}
@keyframes zoominright {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
  }
}
@keyframes zoominup {
  from {
    opacity: 0;
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
  }
  60% {
    opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
  }
}

.flip {
  backface-visibility: visible;
  animation: flip 0.15s linear;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].rules[0].oneOf[0].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].rules[1].use[0]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].rules[1].use[1]!./projects/banking-platform/src/hdfc-savings-styles.scss?ngGlobalStyle (1) ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

.brand-gray-500-high-contrast {
  color: var(--brand-gray-500-high-contrast);
}

.surface-text-normal-low-contrast {
  color: var(--surface-text-normal-low-contrast);
}

.surface-text-subtle-low-contrast {
  color: var(--surface-text-subtle-low-contrast);
}

.surface-text-subdued-low-contrast {
  color: var(--surface-text-subdued-low-contrast);
}

.surface-text-muted-low-contrast {
  color: var(--surface-text-muted-low-contrast);
}

.surface-background-level2-low-contrast {
  background-color: var(--surface-background-level2-low-contrast);
}

.surface-background-level3-low-contrast {
  background-color: var(--surface-background-level3-low-contrast);
}

.surface-action-icon-low-contrast {
  border-color: var(--surface-action-icon-low-contrast);
}

.surface-border-normal {
  border-color: var(--surface-border-normal);
}

.feedback-background-positive-low-contrast {
  background-color: var(--feedback-background-positive-low-contrast);
}

.feedback-text-positive {
  color: var(--feedback-text-positive);
}

.feedback-text-negative {
  color: var(--feedback-text-negative);
}

.pv-border-solid {
  border-width: thin;
  border-style: solid;
}

.pv-dotted-decoration {
  text-decoration-style: dotted;
}

.pv-strikethrough {
  position: relative;
}

.pv-strikethrough:before {
  position: absolute;
  content: "";
  left: 0;
  top: 50%;
  right: 0;
  border-top: 1px solid;
  border-color: var(--feedback-border-negative-high-contrast);
  transform: rotate(-20deg);
}

.pv-line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pv-text-10px {
  font-size: 10px;
}

.pv-text-11px {
  font-size: 11px;
}

.pv-text-12px {
  font-size: 12px;
}

.pv-text-14px {
  font-size: 14px;
}

.pv-text-16px {
  font-size: 16px;
}

.pv-text-20px {
  font-size: 20px;
}

.pv-mb-1px {
  margin-bottom: 1px;
}

.pv-py-2px {
  padding-top: 2px;
  padding-bottom: 2px;
}

.pv-mt-4px {
  margin-top: 4px;
}

.pv-ml-5px {
  margin-left: 5px;
}

.pv-mt-5px {
  margin-top: 5px;
}

.pv-mb-5px {
  margin-bottom: 5px;
}

.pv-ml-7px {
  margin-left: 7px;
}

.pv-px-8px {
  padding-left: 8px;
  padding-right: 8px;
}

.pv-py-10px {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pv-mt-16px {
  margin-top: 16px;
}

.pv-mb-16px {
  margin-bottom: 16px;
}

.pv-px-20px {
  padding-left: 20px;
  padding-right: 20px;
}

.pv-pr-20px {
  padding-right: 20px;
}

.pv-mt-20px {
  margin-top: 20px;
}

.pv-mb-32px {
  margin-bottom: 32px;
}

/* @media screen and (min-width: $size) does not work , but @media (max-width: $size) does */
@media (min-width: 576px) {
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:line-height-14px { line-height: 1rem } for smaller screen sizes
    and  .lg:line-height-14px { line-height: 0.875rem } for larger ones */
}
/* @media screen and (min-width: $size) does not work , but @media (max-width: $size) does */
@media (min-width: 768px) {
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:line-height-14px { line-height: 1rem } for smaller screen sizes
    and  .lg:line-height-14px { line-height: 0.875rem } for larger ones */
}
/* @media screen and (min-width: $size) does not work , but @media (max-width: $size) does */
@media (min-width: 992px) {
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:line-height-14px { line-height: 1rem } for smaller screen sizes
    and  .lg:line-height-14px { line-height: 0.875rem } for larger ones */
}
/* @media screen and (min-width: $size) does not work , but @media (max-width: $size) does */
@media (min-width: 1200px) {
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:text-14px { font-size: 1rem } for smaller screen sizes
  and  .lg:text-14px { font-size: 0.875rem } for larger ones */
  /* will create classes like .sm:line-height-14px { line-height: 1rem } for smaller screen sizes
    and  .lg:line-height-14px { line-height: 0.875rem } for larger ones */
}

:root {
  --button-background: #861f41;
  --text-white: #ffffff;
  --step-description: #54565b;
  --step-title: #303c44;
  --step-border: #861f41;
  --header-background: #821f3f;
  --black: #000000;
  --surface-a: #ffffff;
  --surface-b: #fafafa;
  --surface-c: rgba(0, 0, 0, 0.04);
  --surface-d: rgba(0, 0, 0, 0.12);
  --surface-e: #ffffff;
  --surface-f: #ffffff;
  --text-color: rgba(0, 0, 0, 0.87);
  --text-color-secondary: #435775;
  --primary-color: var(--interactive-light-primary-action);
  --primary-color-text: hsla(0, 0%, 100%, 1);
  --font-family:
    Lato, Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial,
    Lucida Grande, sans-serif;
  --secondary-color: hsla(340, 100%, 63%, 1);
  --secondary-color-hover: hsla(340, 100%, 63%, 0.92);
  --secondary-color-active: hsla(340, 100%, 63%, 0.68);
  --secondary-color-focus: hsla(340, 100%, 63%, 0.68);
  --background-secondary-color: hsl(340, 100%, 63%);
  --background-secondary-color-hover: hsla(340, 100%, 63%, 0.04);
  --background-secondary-color-active: hsla(340, 100%, 63%, 0.16);
  --background-secondary-color-focus: hsla(340, 100%, 63%, 0.04);
  --surface-0: #ffffff;
  --surface-50: #fafafa;
  --surface-100: #f5f5f5;
  --surface-200: #eeeeee;
  --surface-300: #e0e0e0;
  --surface-400: #bdbdbd;
  --surface-500: #9e9e9e;
  --surface-600: #757575;
  --surface-700: #616161;
  --surface-800: #424242;
  --surface-900: #212121;
  --box-shadow-1: rgba(0, 0, 0, 0.2);
  --box-shadow-2: rgba(0, 0, 0, 0.14);
  --box-shadow-3: var(--surface-border);
  --gray-50: hsla(216, 15%, 54%, 0.09);
  --gray-100: hsla(216, 15%, 54%, 0.18);
  --gray-200: hsla(220, 27%, 98%, 1);
  --gray-300: hsla(220, 30%, 96%, 1);
  --gray-400: hsla(216, 19%, 89%, 1);
  --gray-500: hsla(214, 18%, 69%, 1);
  --gray-600: hsla(216, 16%, 60%, 1);
  --gray-700: hsla(217, 18%, 45%, 1);
  --gray-800: hsla(216, 33%, 29%, 1);
  --gray-900: hsla(217, 56%, 17%, 1);
  --content-padding: 1rem;
  --inline-spacing: 0.5rem;
  --border-radius: 4px;
  --surface-ground: #fafafa;
  --surface-section: #ffffff;
  --surface-card: #ffffff;
  --surface-overlay: #ffffff;
  --surface-border: var(--surface-border-normal);
  --surface-hover: rgba(0, 0, 0, 0.04);
  --maskbg: rgba(0, 0, 0, 0.32);
  --focus-ring: none;
  --highlight-bg: rgba(63, 81, 181, 0.12);
  --highlight-text-color: var(--primary-color);
  color-scheme: light;
  --blue-50: #f4fafe;
  --blue-100: #cae6fc;
  --blue-200: #a0d2fa;
  --blue-300: #75bef8;
  --blue-400: #4baaf5;
  --blue-500: #2196f3;
  --blue-600: #1c80cf;
  --blue-700: #1769aa;
  --blue-800: #125386;
  --blue-900: #0d3c61;
  --green-50: #f7faf5;
  --green-100: #dbe8cf;
  --green-200: #bed6a9;
  --green-300: #a1c384;
  --green-400: #85b15e;
  --green-500: #689f38;
  --green-600: #588730;
  --green-700: #496f27;
  --green-800: #39571f;
  --green-900: #2a4016;
  --yellow-50: #fffcf5;
  --yellow-100: #fef0cd;
  --yellow-200: #fde4a5;
  --yellow-300: #fdd87d;
  --yellow-400: #fccc55;
  --yellow-500: #fbc02d;
  --yellow-600: #d5a326;
  --yellow-700: #b08620;
  --yellow-800: #8a6a19;
  --yellow-900: #644d12;
  --cyan-50: #f2fcfd;
  --cyan-100: #c2eff5;
  --cyan-200: #91e2ed;
  --cyan-300: #61d5e4;
  --cyan-400: #30c9dc;
  --cyan-500: #00bcd4;
  --cyan-600: #00a0b4;
  --cyan-700: #008494;
  --cyan-800: #006775;
  --cyan-900: #004b55;
  --pink-50: #fef4f7;
  --pink-100: #fac9da;
  --pink-200: #f69ebc;
  --pink-300: #f1749e;
  --pink-400: #ed4981;
  --pink-500: #e91e63;
  --pink-600: #c61a54;
  --pink-700: #a31545;
  --pink-800: #801136;
  --pink-900: #5d0c28;
  --indigo-50: #f6f7fc;
  --indigo-100: #d5d9ef;
  --indigo-200: #b3bae2;
  --indigo-300: #919cd5;
  --indigo-400: #707dc8;
  --indigo-500: #4e5fbb;
  --indigo-600: #42519f;
  --indigo-700: #374383;
  --indigo-800: #2b3467;
  --indigo-900: #1f264b;
  --teal-50: #f2faf9;
  --teal-100: #c2e6e2;
  --teal-200: #91d2cc;
  --teal-300: #61beb5;
  --teal-400: #30aa9f;
  --teal-500: #009688;
  --teal-600: #008074;
  --teal-700: #00695f;
  --teal-800: #00534b;
  --teal-900: #003c36;
  --orange-50: #fffaf2;
  --orange-100: #ffe6c2;
  --orange-200: #ffd391;
  --orange-300: #ffbf61;
  --orange-400: #ffac30;
  --orange-500: #ff9800;
  --orange-600: #d98100;
  --orange-700: #b36a00;
  --orange-800: #8c5400;
  --orange-900: #663d00;
  --bluegray-50: #f7f9f9;
  --bluegray-100: #d9e0e3;
  --bluegray-200: #bbc7cd;
  --bluegray-300: #9caeb7;
  --bluegray-400: #7e96a1;
  --bluegray-500: #607d8b;
  --bluegray-600: #526a76;
  --bluegray-700: #435861;
  --bluegray-800: #35454c;
  --bluegray-900: #263238;
  --purple-50: #faf4fb;
  --purple-100: #e7cbec;
  --purple-200: #d4a2dd;
  --purple-300: #c279ce;
  --purple-400: #af50bf;
  --purple-500: #9c27b0;
  --purple-600: #852196;
  --purple-700: #6d1b7b;
  --purple-800: #561561;
  --purple-900: #3e1046;
  --red-50: #fef6f5;
  --red-100: #fcd2cf;
  --red-200: #faaea9;
  --red-300: #f88a82;
  --red-400: #f6675c;
  --red-500: #f44336;
  --red-600: #cf392e;
  --red-700: #ab2f26;
  --red-800: #86251e;
  --red-900: #621b16;
  --primary-50: #f5f6fb;
  --primary-100: #d1d5ed;
  --primary-200: #acb4df;
  --primary-300: hsla(218, 89%, 51%, 0.09);
  --primary-400: hsla(218, 89%, 51%, 0.18);
  --primary-500: hsla(218, 89%, 51%, 1);
  --primary-600: #821f3f;
  --primary-700: hsla(227, 100%, 45%, 1);
  --primary-800: hsla(234, 100%, 34%, 1);
  /** From here on, our custom variables **/
  --brand-primary-300: hsla(218, 89%, 51%, 0.09);
  --brand-primary-400: hsla(218, 89%, 51%, 0.18);
  --brand-primary-500: hsla(218, 89%, 51%, 1);
  --brand-primary-600: #821f3f;
  --brand-primary-700: hsla(227, 100%, 45%, 1);
  --brand-gray-200-low-contrast: hsla(220, 27%, 98%, 1);
  --brand-gray-300-low-contrast: hsla(220, 30%, 96%, 1);
  --brand-gray-400-low-contrast: hsla(216, 19%, 89%, 1);
  --brand-gray-500-low-contrast: hsla(214, 18%, 69%, 1);
  --brand-gray-600-low-contrast: hsla(216, 16%, 60%, 1);
  --brand-gray-700-low-contrast: hsla(217, 18%, 45%, 1);
  --brand-gray-200-high-contrast: hsla(216, 33%, 29%, 1);
  --brand-gray-300-high-contrast: hsla(216, 27%, 36%, 1);
  --brand-gray-400-high-contrast: hsla(217, 18%, 45%, 1);
  --brand-gray-500-high-contrast: hsla(216, 15%, 54%, 1);
  --brand-gray-600-high-contrast: hsla(214, 18%, 69%, 1);
  --brand-gray-700-high-contrast: hsla(220, 30%, 96%, 1);
  --surface-text-normal-low-contrast: hsla(217, 56%, 17%, 1);
  --surface-text-subtle-low-contrast: hsla(216, 27%, 36%, 1);
  --surface-text-subdued-low-contrast: hsla(217, 18%, 45%, 1);
  --surface-text-muted-low-contrast: hsla(216, 16%, 60%, 1);
  --surface-text-placeholder-low-contrast: hsla(214, 18%, 69%, 1);
  --surface-text-normal-high-contrast: hsla(0, 0%, 100%, 1);
  --surface-text-subtle-high-contrast: hsla(220, 30%, 96%, 1);
  --surface-text-subdued-high-contrast: hsla(216, 19%, 89%, 1);
  --surface-text-muted-high-contrast: hsla(218, 19%, 81%, 1);
  --surface-text-placeholder-high-contrast: hsla(216, 15%, 54%, 1);
  --surface-background-level1-low-contrast: hsla(220, 30%, 96%, 1);
  --surface-background-level2-low-contrast: hsla(0, 0%, 100%, 1);
  --surface-background-level3-low-contrast: hsla(220, 27%, 98%, 1);
  --surface-background-level1-high-contrast: hsla(217, 56%, 17%, 1);
  --surface-background-level2-high-contrast: hsla(216, 44%, 23%, 1);
  --surface-background-level3-high-contrast: hsla(216, 33%, 29%, 1);
  --surface-action-icon-low-contrast: hsla(214, 18%, 69%, 1);
  --surface-action-icon-high-contrast: hsla(214, 21%, 94%, 0.32);
  --surface-action-icon-low-contrast-active: hsla(217, 18%, 45%, 1);
  --surface-border-normal: hsla(216, 15%, 54%, 0.18);
  --surface-border-subtle: hsla(216, 15%, 54%, 0.09);
  --feedback-background-positive-low-contrast: hsla(155, 100%, 31%, 0.18);
  --feedback-background-negative-low-contrast: hsla(9, 91%, 56%, 0.18);
  --feedback-background-notice-low-contrast: hsla(36, 100%, 44%, 0.09);
  --feedback-background-information-low-contrast: hsla(193, 100%, 35%, 0.09);
  --feedback-background-neutral-low-contrast: hsla(216, 15%, 54%, 0.09);
  --feedback-background-positive-high-contrast: hsla(160, 100%, 26%, 1);
  --feedback-background-negative-high-contrast: hsla(8, 73%, 47%, 1);
  --feedback-background-notice-high-contrast: hsla(38, 97%, 38%, 1);
  --feedback-background-information-high-contrast: hsla(193, 100%, 35%, 1);
  --feedback-background-neutral-high-contrast: hsla(216, 33%, 29%, 1);
  --feedback-border-positive-low-contrast: hsla(155, 100%, 31%, 0.32);
  --feedback-border-negative-low-contrast: hsla(9, 91%, 56%, 0.32);
  --feedback-border-notice-low-contrast: hsla(36, 100%, 44%, 0.32);
  --feedback-border-information-low-contrast: hsla(193, 100%, 35%, 0.32);
  --feedback-border-neutral-low-contrast: hsla(216, 15%, 54%, 0.32);
  --feedback-border-positive-high-contrast: hsla(160, 100%, 26%, 1);
  --feedback-border-negative-high-contrast: hsla(8, 73%, 47%, 1);
  --feedback-border-notice-high-contrast: hsla(38, 97%, 38%, 1);
  --feedback-border-information-high-contrast: hsla(193, 100%, 35%, 1);
  --feedback-border-neutral-high-contrast: hsla(216, 33%, 29%, 1);
  --feedback-text-positive: hsla(160, 100%, 26%, 1);
  --feedback-text-negative: hsla(8, 73%, 47%, 1);
  --feedback-text-notice: hsla(38, 97%, 38%, 1);
  --feedback-text-information: hsla(193, 100%, 35%, 1);
  --feedback-text-neutral: hsla(216, 27%, 36%, 1);
  /** Classes yet to be created for below variables **/
  --feedback-action-primary-border-notice-high-contrast-disabled: hsla(
    35,
    84%,
    54%,
    0.8
  );
  --surface-action-icon-low-contrast-hover: hsla(217, 18%, 45%, 1);
  --surface-action-icon-low-contrast-disabled: hsla(216, 19%, 89%, 1);
  --surface-action-icon-high-contrast-active: hsla(0, 0%, 100%, 1);
  --surface-border-normal-low-contrast: hsla(233, 11%, 84%, 0.18);
  --feedback-background-neutral-low-contrast-hover: hsla(216, 15%, 54%, 0.18);
  --feedback-background-neutral-low-contrast-focus: hsla(216, 15%, 54%, 0.32);
  --feedback-background-neutral-low-contrast-active: hsla(216, 15%, 54%, 0.32);
  --feedback-background-neutral-low-contrast-disabled: hsla(
    216,
    15%,
    54%,
    0.09
  );
  --feedback-background-info-low-contrast-hover: hsla(193, 100%, 35%, 0.18);
  --feedback-background-info-low-contrast-focus: hsla(193, 100%, 35%, 0.32);
  --feedback-background-info-low-contrast-active: hsla(193, 100%, 35%, 0.32);
  --feedback-background-info-low-contrast-disabled: hsla(193, 100%, 35%, 0.09);
  --feedback-background-positive-low-contrast-hover: hsla(155, 100%, 31%, 0.18);
  --feedback-background-positive-low-contrast-focus: hsla(155, 100%, 31%, 0.32);
  --feedback-background-positive-low-contrast-active: hsla(
    155,
    100%,
    31%,
    0.32
  );
  --feedback-background-positive-low-contrast-disabled: hsla(
    155,
    100%,
    31%,
    0.18
  );
  --feedback-background-notice-low-contrast-hover: hsla(36, 100%, 44%, 0.18);
  --feedback-background-notice-low-contrast-focus: hsla(36, 100%, 44%, 0.32);
  --feedback-background-notice-low-contrast-active: hsla(36, 100%, 44%, 0.32);
  --feedback-background-notice-low-contrast-disabled: hsla(36, 100%, 44%, 0.18);
  --feedback-background-negative-low-contrast-hover: hsla(9, 91%, 56%, 0.18);
  --feedback-background-negative-low-contrast-focus: hsla(9, 91%, 56%, 0.32);
  --feedback-background-negative-low-contrast-active: hsla(9, 91%, 56%, 0.32);
  --feedback-background-negative-low-contrast-disabled: hsla(9, 91%, 56%, 0.18);
  --feedback-background-neutral-high-contrast-hover: hsla(216, 44%, 23%, 1);
  --feedback-background-neutral-high-contrast-focus: hhsla(217, 56%, 17%, 1);
  --feedback-background-neutral-high-contrast-active: hsla(217, 56%, 17%, 1);
  --feedback-background-neutral-high-contrast-disabled: hsla(216, 33%, 29%, 1);
  --feedback-background-info-high-contrast-hover: hsla(195, 100%, 31%, 1);
  --feedback-background-info-high-contrast-focus: hsla(196, 100%, 27%, 1);
  --feedback-background-info-high-contrast-active: hsla(196, 100%, 27%, 1);
  --feedback-background-info-high-contrast-disabled: hsla(193, 100%, 35%, 1);
  --feedback-background-positive-high-contrast-hover: hsla(163, 100%, 22%, 1);
  --feedback-background-positive-high-contrast-focus: hsla(164, 100%, 17%, 1);
  --feedback-background-positive-high-contrast-active: hsla(164, 100%, 17%, 1);
  --feedback-background-positive-high-contrast-disabled: hsla(
    160,
    100%,
    26%,
    1
  );
  --feedback-background-notice-high-contrast-hover: hsla(40, 90%, 32%, 1);
  --feedback-background-notice-high-contrast-focus: hsla(41, 82%, 26%, 1);
  --feedback-background-notice-high-contrast-active: hsla(41, 82%, 26%, 1);
  --feedback-background-notice-high-contrast-disabled: hsla(38, 97%, 38%, 1);
  --feedback-background-negative-high-contrast-hover: hsla(7, 72%, 40%, 1);
  --feedback-background-negative-high-contrast-focus: hsla(5, 69%, 32%, 1);
  --feedback-background-negative-high-contrast-active: hsla(5, 69%, 32%, 1);
  --feedback-background-negative-high-contrast-disabled: hsla(8, 73%, 47%, 1);
  /* fi money */
  --background-light-layer-1: #eff2f6;
  --sentiment-info: #118be3;
  --interactive-dark-primary-action: #821f3f;
  --border: #dde4e9;
  --border-light: #e3e5e7;
  --supporting-jade-50: #dcf3ee;
  --inactive-gray: #d6d9dd;
  --interactive--light-box-shadow: hsla(170, 100%, 26%, 1);
  --interactive-light-primary-action: #821f3f;
  --interactive-light-green-text: #821f3f;
  --interactive-dark-tertiary-action-1: hsla(166, 49%, 61%, 1);
  --interactive-light-tertiary-action-2: hsla(210, 3%, 43%, 1);
  --background-light-base: hsla(214, 16%, 92%, 1);
  --background-dark-base: hsla(220, 6%, 10%, 1);
  --background-dark-layer-2: hsla(220, 3%, 20%, 1);
  --content-on-light-disabled-400: hsla(214, 5%, 71%, 1);
  --content-on-light-low-emphasis-500: hsla(214, 3%, 59%, 1);
  --content-on-light-high-emphasis-850: hsla(220, 3%, 20%, 1);
  --content-on-light-medium-emphasis-600: hsla(210, 3%, 43%, 1);
  --content-on-dark-medium-emphasis-500: hsla(214, 3%, 59%, 1);
  --content-on-light-extra-low-emphasis: hsla(214, 28%, 93%, 1);
  --neutrals-ivory-50: hsla(214, 64%, 98%, 1);
  --neutrals-fog-200: hsla(214, 16%, 92%, 1);
  --supporting-moss-700: hsla(99, 30%, 43%, 1);
  --supporting-moss-400: hsla(102, 35%, 58%, 1);
  --supporting-moss-100: hsla(103, 32%, 85%, 1);
  --supporting-amber-700: hsla(27, 62%, 55%, 1);
  --supporting-indigo-900: hsla(215, 100%, 21%, 1);
  /* consistent outer padding */
  --mobile-outer-gap: 18px;
  /*project specific variables*/
  --claimed-tag-color: #09965b;
  --claimed-tag-bg: #d7e8e1;
  --link-color: #243547;
}

:root {
  --primary-color: #004e94 !important;
  --button-background: #004e94 !important;
  --step-border: #004e94;
  --header-background: #004e94;
  --primary-600: #004e94;
  --brand-primary-600: #004e94;
  --interactive-dark-primary-action: #004e94;
  --interactive-light-primary-action: #004e94;
  --interactive-light-green-text: #004e94;
}

* {
  font-family: "Lato" !important;
  margin: 0;
}

.auth-header {
  background-color: var(--primary-color);
  height: 68px;
}
.auth-header img {
  max-height: 28px;
}

pv-authentication .p-sidebar {
  max-width: 448px !important;
}
@media (max-width: 965px) {
  pv-authentication .p-sidebar {
    max-width: 100%;
  }
}
pv-authentication .p-sidebar .p-sidebar-header {
  padding: 0 !important;
}

pv-drawer .p-sidebar-header {
  display: flex;
  justify-content: space-between;
}

.link-color {
  color: var(--link-color);
}

@keyframes p-component-overlay-enter-animation {
  from {
    background-color: transparent;
  }
  to {
    background-color: var(--black);
    opacity: 0.6;
  }
}