:root {
  --size-200: 0.75rem;
  --size-300: 0.8rem;
  --size-400: 1rem;
  --size-500: 1.25rem;
  --size-600: 1.56rem;
  --size-700: 1.95rem;
  --size-800: 2.44rem;
  --size-900: 3.05rem;

  /* Raw Colors */
  --gray-50: #fafafb;
  --gray-200: #d1d3d5;
  --gray-300: #b5b5bf;
  --gray-500: #667280;
  --gray-900: #171826;
  --saphire-700: #202245;
  --orange-300: #ff9903;
  --orange-400: #ff7e00;
  --orange-500: #ea732e;
  --green-100: #d8ebb2;
  --green-500: #72ab00;
  --red-100: #ffd3d6;
  --red-500: #ca2933;

  /* Token colors */
  --color-primary: var(--saphire-700);
  --color-secondary: var(--gray-500);
  --color-accent-light: var(--orange-400);
  --color-accent: var(--orange-500);

  /* Text */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
    "Helvetica Neue", sans-serif;
  --font-text: "Poppins", var(--font-system);
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --flow-space: var(--size-400);

  /* Contextual colors */
  --bg-color: var(--gray-50);
  --title-color: var(--color-primary);
  --text-color: var(--color-primary);
  --btn-text-color: var(--gray-50);
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

html {
  height: 100%;
  font-size: var(--size-400);
}

body {
  height: 100%;
  color: var(--text-color);
  font-size: var(--size-400);
  font-family: var(--font-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg-color);
}

a {
  color: var(--color-accent);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-family: var(--font-text);
  line-height: 1.3;
}

h1,
.h1 {
  font-size: var(--size-600);
}

h2,
.h2 {
  font-weight: var(--fw-bold);
  font-size: var(--size-600);
}

h3,
.h3 {
  font-size: var(--size-500);
}

h4,
.h4 {
  font-size: var(--size-500);
}

h5,
.h5 {
  font-size: var(--size-400);
}

:focus,
:focus-visible {
  outline: 1px solid var(--color-accent-light);
  outline-offset: 2px;
}

::selection {
  background-color: var(--color-accent);
}

/* Type flow */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

.wrapper {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  margin-inline-end: auto;
  margin-inline-start: auto;
}

button {
  width: 100%;
  margin-block-start: var(--size-500);
  padding: var(--size-300) 0;
  color: var(--btn-text-color);
  font-weight: var(--fw-bold);
  font-size: var(--size-600);
  font-family: var(--font-text);
  background-color: var(--color-accent);
  border: 0;
  border-radius: 4px;
}

button:disabled {
  color: var(--color-secondary);
  background-color: var(--gray-200);
  background-image: none;
  box-shadow: none;
  cursor: default;
  opacity: 0.65;
  filter: alpha(opacity=65);
}

.d-block {
  display: block;
}

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

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

.text-right {
  text-align: right;
}

.fs-200 {
  font-size: var(--size-200) !important;
}

.fs-300 {
  font-size: var(--size-300) !important;
}

.fs-400 {
  font-size: var(--size-400) !important;
}

.fs-500 {
  font-size: var(--size-500) !important;
}

.fs-600 {
  font-size: var(--size-600) !important;
}

.fs-700 {
  font-size: var(--size-700) !important;
}

.fs-800 {
  font-size: var(--size-800) !important;
}

.fs-900 {
  font-size: var(--size-900) !important;
}

.fw-bold {
  font-weight: var(--fw-bold) !important;
}

/* margin and padding utilities */
.m-0 {
  margin: 0 !important;
}

.m-1 {
  margin: calc(var(--size-400) * 0.25) !important;
}

.m-2 {
  margin: calc(var(--size-400) * 0.5) !important;
}

.m-3 {
  margin: var(--size-400) !important;
}

.m-4 {
  margin: calc(var(--size-400) * 1.5) !important;
}

.m-5 {
  margin: calc(var(--size-400) * 3) !important;
}

.m-auto {
  margin: auto !important;
}

.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.mx-1 {
  margin-right: calc(var(--size-400) * 0.25) !important;
  margin-left: calc(var(--size-400) * 0.25) !important;
}

.mx-2 {
  margin-right: calc(var(--size-400) * 0.5) !important;
  margin-left: calc(var(--size-400) * 0.5) !important;
}

.mx-3 {
  margin-right: var(--size-400) !important;
  margin-left: var(--size-400) !important;
}

.mx-4 {
  margin-right: calc(var(--size-400) * 1.5) !important;
  margin-left: calc(var(--size-400) * 1.5) !important;
}

.mx-5 {
  margin-right: calc(var(--size-400) * 3) !important;
  margin-left: calc(var(--size-400) * 3) !important;
}

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

.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.my-1 {
  margin-top: calc(var(--size-400) * 0.25) !important;
  margin-bottom: calc(var(--size-400) * 0.25) !important;
}

.my-2 {
  margin-top: calc(var(--size-400) * 0.5) !important;
  margin-bottom: calc(var(--size-400) * 0.5) !important;
}

.my-3 {
  margin-top: var(--size-400) !important;
  margin-bottom: var(--size-400) !important;
}

.my-4 {
  margin-top: calc(var(--size-400) * 1.5) !important;
  margin-bottom: calc(var(--size-400) * 1.5) !important;
}

.my-5 {
  margin-top: calc(var(--size-400) * 3) !important;
  margin-bottom: calc(var(--size-400) * 3) !important;
}

.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mt-0 {
  margin-top: 0 !important;
}

.mt-1 {
  margin-top: calc(var(--size-400) * 0.25) !important;
}

.mt-2 {
  margin-top: calc(var(--size-400) * 0.5) !important;
}

.mt-3 {
  margin-top: var(--size-400) !important;
}

.mt-4 {
  margin-top: calc(var(--size-400) * 1.5) !important;
}

.mt-5 {
  margin-top: calc(var(--size-400) * 3) !important;
}

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

.me-0 {
  margin-right: 0 !important;
}

.me-1 {
  margin-right: calc(var(--size-400) * 0.25) !important;
}

.me-2 {
  margin-right: calc(var(--size-400) * 0.5) !important;
}

.me-3 {
  margin-right: var(--size-400) !important;
}

.me-4 {
  margin-right: calc(var(--size-400) * 1.5) !important;
}

.me-5 {
  margin-right: calc(var(--size-400) * 3) !important;
}

.me-auto {
  margin-right: auto !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.mb-1 {
  margin-bottom: calc(var(--size-400) * 0.25) !important;
}

.mb-2 {
  margin-bottom: calc(var(--size-400) * 0.5) !important;
}

.mb-3 {
  margin-bottom: var(--size-400) !important;
}

.mb-4 {
  margin-bottom: calc(var(--size-400) * 1.5) !important;
}

.mb-5 {
  margin-bottom: calc(var(--size-400) * 3) !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ms-0 {
  margin-left: 0 !important;
}

.ms-1 {
  margin-left: calc(var(--size-400) * 0.25) !important;
}

.ms-2 {
  margin-left: calc(var(--size-400) * 0.5) !important;
}

.ms-3 {
  margin-left: var(--size-400) !important;
}

.ms-4 {
  margin-left: calc(var(--size-400) * 1.5) !important;
}

.ms-5 {
  margin-left: calc(var(--size-400) * 3) !important;
}

.ms-auto {
  margin-left: auto !important;
}

.p-0 {
  padding: 0 !important;
}

.p-1 {
  padding: calc(var(--size-400) * 0.25) !important;
}

.p-2 {
  padding: calc(var(--size-400) * 0.5) !important;
}

.p-3 {
  padding: var(--size-400) !important;
}

.p-4 {
  padding: calc(var(--size-400) * 1.5) !important;
}

.p-5 {
  padding: calc(var(--size-400) * 3) !important;
}

.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.px-1 {
  padding-right: calc(var(--size-400) * 0.25) !important;
  padding-left: calc(var(--size-400) * 0.25) !important;
}

.px-2 {
  padding-right: calc(var(--size-400) * 0.5) !important;
  padding-left: calc(var(--size-400) * 0.5) !important;
}

.px-3 {
  padding-right: var(--size-400) !important;
  padding-left: var(--size-400) !important;
}

.px-4 {
  padding-right: calc(var(--size-400) * 1.5) !important;
  padding-left: calc(var(--size-400) * 1.5) !important;
}

.px-5 {
  padding-right: calc(var(--size-400) * 3) !important;
  padding-left: calc(var(--size-400) * 3) !important;
}

.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.py-1 {
  padding-top: calc(var(--size-400) * 0.25) !important;
  padding-bottom: calc(var(--size-400) * 0.25) !important;
}

.py-2 {
  padding-top: calc(var(--size-400) * 0.5) !important;
  padding-bottom: calc(var(--size-400) * 0.5) !important;
}

.py-3 {
  padding-top: var(--size-400) !important;
  padding-bottom: var(--size-400) !important;
}

.py-4 {
  padding-top: calc(var(--size-400) * 1.5) !important;
  padding-bottom: calc(var(--size-400) * 1.5) !important;
}

.py-5 {
  padding-top: calc(var(--size-400) * 3) !important;
  padding-bottom: calc(var(--size-400) * 3) !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: calc(var(--size-400) * 0.25) !important;
}

.pt-2 {
  padding-top: calc(var(--size-400) * 0.5) !important;
}

.pt-3 {
  padding-top: var(--size-400) !important;
}

.pt-4 {
  padding-top: calc(var(--size-400) * 1.5) !important;
}

.pt-5 {
  padding-top: calc(var(--size-400) * 3) !important;
}

.pe-0 {
  padding-right: 0 !important;
}

.pe-1 {
  padding-right: calc(var(--size-400) * 0.25) !important;
}

.pe-2 {
  padding-right: calc(var(--size-400) * 0.5) !important;
}

.pe-3 {
  padding-right: var(--size-400) !important;
}

.pe-4 {
  padding-right: calc(var(--size-400) * 1.5) !important;
}

.pe-5 {
  padding-right: calc(var(--size-400) * 3) !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: calc(var(--size-400) * 0.25) !important;
}

.pb-2 {
  padding-bottom: calc(var(--size-400) * 0.5) !important;
}

.pb-3 {
  padding-bottom: var(--size-400) !important;
}

.pb-4 {
  padding-bottom: calc(var(--size-400) * 1.5) !important;
}

.pb-5 {
  padding-bottom: calc(var(--size-400) * 3) !important;
}

.ps-0 {
  padding-left: 0 !important;
}

.ps-1 {
  padding-left: calc(var(--size-400) * 0.25) !important;
}

.ps-2 {
  padding-left: calc(var(--size-400) * 0.5) !important;
}

.ps-3 {
  padding-left: var(--size-400) !important;
}

.ps-4 {
  padding-left: calc(var(--size-400) * 1.5) !important;
}

.ps-5 {
  padding-left: calc(var(--size-400) * 3) !important;
}

/* App styles */
.back-button {
  display: block;
  margin-block: var(--size-500);
  text-align: left;
}

.back-button a {
  font-size: var(--size-200) !important;
}

.login-pf-page {
  flex: 1 0 auto;
}

.login-pf-page .login-pf-header h1 {
  margin: 0 auto var(--size-400);
  color: var(--color-primary);
  font-weight: var(--fw-bold);
  font-size: var(--size-500);
  text-align: center;
}

.login-pf-page h2 {
  color: var(--color-primary);
  font-weight: var(--fw-bold);
}

.login-pf-page .card-pf p {
  color: var(--text-color);
  font-size: var(--size-300);
}

.login-pf-page .card-pf ol li {
  color: var(--text-color);
  font-size: var(--size-300);
}

.card-pf {
  background-color: var(--gray-50);
}

.card-pf.large {
  max-width: 1024px;
}

.login-pf,
.login-pf body {
  background: none;
  background-color: var(--bg-color);
}

.login-pf a {
  color: var(--color-accent-light);
  font-size: var(--size-300);
}

.login-pf a:hover {
  color: var(--color-accent-light);
  text-decoration: underline;
}

.login-pf a:focus {
  outline: 1px solid var(--color-accent-light);
  outline-offset: 2px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  box-shadow: 0 0 1px 30px var(--gray-50) inset !important;
}

input.btn-primary.btn-lg {
  padding: 8.5px 24px;
  font-weight: var(--fw-bold);
  font-size: var(--size-400);
  background-color: var(--color-accent-light);
  background-image: none;
  border-color: var(--color-accent-light);
  border-radius: 50rem;
  box-shadow: none;
}

input.btn-primary.btn-lg:focus,
input.btn-primary.btn-lg:focus-visible {
  outline: none;
}

input.btn-primary.active.focus,
input.btn-primary.active:focus,
input.btn-primary.active:hover,
input.btn-primary:active.focus,
input.btn-primary:active:focus,
input.btn-primary:active:hover,
input.btn-primary.active,
input.btn-primary:active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: none;
}

button.btn-default.btn-lg {
     background: none;
     border: none;
     box-shadow: none;
     color: var(--color-accent-light);
}

button.btn-default.btn-lg:focus,
button.btn-default.btn-lg:focus-visible {
  outline: none;
}

button.btn-default.active.focus,
button.btn-default.active:focus,
button.btn-default.active:hover,
button.btn-default:active.focus,
button.btn-default:active:focus,
button.btn-default:active:hover,
button.btn-default.active,
button.btn-default:active {
  background-color: none;
  border-color: none;
  box-shadow: none;
  background: none;
}

.form-horizontal .control-label {
  margin-block-end: 5px;
  padding-block-start: 0;
}

div.kc-logo-text {
  width: 216px;
  height: 67px;
  background-image: url("../img/customer-care-logo.png");
}

@media (min-width: 768px) {
  .login-pf-page .login-pf-page-header {
    margin-block-end: 0;
  }
}

.login-pf-page .card-pf {
  margin-block-end: 80px;
  padding: 32px;
  border-radius: 0;
}

.form-group {
  margin-block-end: 32px;
}

.login-pf-page .form-control,
.control-select {
  padding: 2px 0;
  font-weight: var(--fw-normal);
  font-size: var(--size-400);
  background-color: var(--gray-50);
  border: 0;
  border-bottom: 1px solid var(--gray-900);
  outline: none;
  box-shadow: none;
}

.login-pf-page .form-control:focus,
.login-pf-page .form-control:hover,
.control-select:focus,
.control-select:hover {
  border-color: var(--color-accent-light);
  box-shadow: 0 1px 0 0 var(--color-accent-light);
}

.control-label {
  color: var(--color-primary);
  margin-block-end: 0;
  font-size: var(--size-200);
}

input:-webkit-autofill::first-line {
  font-weight: var(--fw-normal);
  font-size: 19px;
}

.alert {
  padding-block-start: 16px;
  padding-block-end: 16px;
  font-weight: var(--fw-bold);
  font-size: var(--size-300);
  border-radius: 4px;
}

.alert-success {
  background-color: var(--green-100);
  border-color: var(--green-100);
}

.alert-success .kc-feedback-text {
  color: var(--green-500);
}

.alert-error {
  background-color: var(--red-100);
  border-color: var(--red-100);
}

.alert-error .kc-feedback-text {
  color: var(--red-500);
}

.alert > .pficon {
  top: 20px;
  left: 16px;
  font-size: var(--size-400);
}

.error {
  float: left;
  margin: 20px 0;
  color: var(--red-500);
  opacity: 0;
  transition: all 0.2s ease;
}

.footer {
  width: 100%;
  margin-block-start: auto;
  padding: 20px 0;
  color: var(--text-color);
  font-weight: var(--fw-normal);
  font-size: var(--size-300);
  text-align: center;
  background-color: var(--gray-50);
  border-top: 1px solid rgb(123 136 152 / 32%);
}

.footer .footer-container {
  max-width: 1280px;
  margin: 0 auto;
}

.footer span {
  margin-inline-end: 10px;
}

.footer .maksu-powered {
  float: left;
  margin: 0 30px;
  line-height: 30px;
}

.footer .maksu-powered .logo {
  margin-inline-start: 10px;
}

/* .footer .maksu-powered .logo img {
  width: 65px;
} */

@media (max-width: 767px) {
  .footer .maksu-powered {
    float: none;
  }
}

#pass-status {
  position: relative;
  z-index: 2;
  float: right;
  margin-block-start: -35px;
  margin-inline-end: 15px;
  color: rgb(54 67 75 / 62%);
  font-size: 20px;
  cursor: pointer;
}

@media all and (-ms-high-contrast: none) {
  #pass-status {
    display: none;
  }
}

.has-error .checkbox,
.has-error .checkbox-inline,
.has-error .control-label,
.has-error .radio,
.has-error .radio-inline,
.has-error.checkbox label,
.has-error.checkbox-inline label,
.has-error.radio label,
.has-error.radio-inline label,
.has-success .checkbox,
.has-success .checkbox-inline,
.has-success .control-label,
.has-success .radio,
.has-success .radio-inline,
.has-success.checkbox label,
.has-success.checkbox-inline label,
.has-success.radio label,
.has-success.radio-inline label,
.has-warning .checkbox,
.has-warning .checkbox-inline,
.has-warning .control-label,
.has-warning .radio,
.has-warning .radio-inline,
.has-warning.checkbox label,
.has-warning.checkbox-inline label,
.has-warning.radio label,
.has-warning.radio-inline label {
  color: var(--red-500);
}

.terms-checkbox-container {
  margin-block-start: 20px;
  margin-block-end: 20px;
}

.radio-container {
  margin-inline-end: 12px;
}

.radio-text {
  color: var(--color-primary);
  font-size: var(--size-300);
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  color: var(--color-primary);
  font-size: var(--size-300);
  line-height: 24px;
}

.custom-checkbox,
.custom-radio {
  position: absolute;
  opacity: 0;
}

.custom-checkbox + label,
.custom-radio + label {
  position: relative;
  padding: 0;
  cursor: pointer;
}

.custom-checkbox + label::before {
  position: relative;
  top: -2px;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-inline-end: 10px;
  vertical-align: text-top;
  background: #fff;
  border: 2px solid rgb(0 0 0 / 12%);
  border-radius: 3px;
  content: "";
}

.custom-radio + label::before {
  position: relative;
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-inline-end: 6px;
  vertical-align: text-top;
  background: white;
  border: 2px solid rgb(0 0 0 / 12%);
  border-radius: 11px;
  content: "";
}

.custom-checkbox:checked + label::before {
  background: var(--color-accent-light);
}

.custom-radio:checked + label::before {
  border-color: var(--color-accent-light);
}

.custom-checkbox:disabled + label {
  color: var(--gray-300);
  cursor: auto;
}

.custom-checkbox:disabled + label::before {
  background: var(--gray-200);
  box-shadow: none;
}

.custom-checkbox:checked + label::after {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 3px;
  height: 3px;
  background: #fff;
  box-shadow: 2px 0 0 #fff, 4px 0 0 #fff, 4px -2px 0 #fff, 4px -4px 0 #fff, 4px -6px 0 #fff, 4px -8px 0 #fff,
    4px -10px 0 #fff;
  transform: rotate(45deg);
  content: "";
}

.custom-radio:checked + label::after {
  position: absolute;
  top: 6px;
  left: 5px;
  width: 12px;
  height: 12px;
  background: var(--color-accent-light);
  border-radius: 6px;
  content: "";
}

select {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBkPSJNMTcuOTk1IDE2LjEyM3YuMDAxTDEwLjU2IDIzLjU2YTEuNTggMS41OCAwIDAgMS0uNjMxLjM4N2MtLjIzLjA3LS40NjUuMDctLjY5NSAwLS4yMy0uMDctLjQ1LS4yMDUtLjY4My0uNDM3bC0uMDYtLjA2MWMtLjIzMy0uMjMyLS4zNjgtLjQ1My0uNDM4LS42ODMtLjA3LS4yMy0uMDctLjQ2NSAwLS42OTUuMDY1LS4yMTMuMTg2LS40MTguMzg2LS42MzFsNy40NC03LjQ0LTcuNDM5LTcuNDRhMS41OCAxLjU4IDAgMCAxLS4zODctLjYzMWMtLjA3LS4yMy0uMDctLjQ2NSAwLS42OTUuMDctLjIzLjIwNS0uNDUuNDM4LS42ODNsLjA2LS4wNmMuMjMyLS4yMzMuNDUzLS4zNjguNjgzLS40MzguMjMtLjA3LjQ2NS0uMDcuNjk1IDAgLjIxMy4wNjUuNDE4LjE4Ni42MzIuMzg3bC4wMjkuMDI5LjAyMi4wMjIgMS43OTggMS43OTggNS42IDUuNTk5di4wMDFsMS4wNSAxLjA1YTEuNSAxLjUgMCAwIDEgMCAyLjEyMmwtMS4wNjQgMS4wNjN6IiBpZD0ibzYzZDFwb3RyYSIvPgogICAgPC9kZWZzPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8bWFzayBpZD0iMzZjeTZ3bHgxYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI282M2QxcG90cmEiIHRyYW5zZm9ybT0icm90YXRlKDkwIDEzLjc0OSAxNCkiLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgbWFzaz0idXJsKCMzNmN5NndseDFiKSIgZmlsbD0iIzIwMjI0NSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBoMjh2MjhIMHoiLz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 1em;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.control-select {
  width: 100%;
  height: 36px;
}