/*! KONGPONENTS_STYLES */
/* Regular (Sans) Font Sizes
========================================================================== */
.type-xxxl {
  font-size: 32px;
  font-size: var(--type-xxxl);
}

.type-xxl {
  font-size: 28px;
  font-size: var(--type-xxl);
}

.type-xl {
  font-size: 22px;
  font-size: var(--type-xl);
}

.type-lg {
  font-size: 18px;
  font-size: var(--type-lg);
}

.type-md {
  font-size: 16px;
  font-size: var(--type-md);
}

.type-sm {
  font-size: 14px;
  font-size: var(--type-sm);
}

.type-xs {
  font-size: 12px;
  font-size: var(--type-xs);
}

.type-xxs {
  font-size: 10px;
  font-size: var(--type-xxs);
}

/* Mono Font Sizes
========================================================================== */
.mono {
  font-family: monospace;
  font-family: var(--font-family-mono);
}

.mono.type-xxxl {
  font-size: calc(32px * 0.95);
  font-size: calc(var(--type-xxxl) * 0.95);
}

.mono.type-xxl {
  font-size: calc(28px * 0.95);
  font-size: calc(var(--type-xxl) * 0.95);
}

.mono.type-xl {
  font-size: calc(22px * 0.95);
  font-size: calc(var(--type-xl) * 0.95);
}

.mono.type-lg {
  font-size: calc(18px * 0.95);
  font-size: calc(var(--type-lg) * 0.95);
}

.mono.type-md {
  font-size: calc(16px * 0.95);
  font-size: calc(var(--type-md) * 0.95);
}

.mono.type-sm {
  font-size: calc(14px * 0.95);
  font-size: calc(var(--type-sm) * 0.95);
}

.mono.type-xs {
  font-size: calc(12px * 0.95);
  font-size: calc(var(--type-xs) * 0.95);
}

.mono.type-xxs {
  font-size: calc(10px * 0.95);
  font-size: calc(var(--type-xxs) * 0.95);
}

/*  Colors
========================================================================== */
.color-blue-100 {
  color: #f2f6fe;
  color: var(--blue-100);
}

.color-blue-200 {
  color: #bdd3f9;
  color: var(--blue-200);
}

.color-blue-300 {
  color: #8ab3fa;
  color: var(--blue-300);
}

.color-blue-400 {
  color: #3972d5;
  color: var(--blue-400);
}

.color-blue-500 {
  color: #1155cb;
  color: var(--blue-500);
}

.color-blue-600 {
  color: #003694;
  color: var(--blue-600);
}

.color-blue-700 {
  color: #0a2b66;
  color: var(--blue-700);
}

.color-petrol-100 {
  color: #eaf4fb;
  color: var(--petrol-100);
}

.color-petrol-200 {
  color: #0364ac;
  color: var(--petrol-200);
}

.color-purple-100 {
  color: #d7d8fe;
  color: var(--purple-100);
}

.color-purple-200 {
  color: #bec0fd;
  color: var(--purple-200);
}

.color-purple-300 {
  color: #9396fc;
  color: var(--purple-300);
}

.color-purple-400 {
  color: #473cfb;
  color: var(--purple-400);
}

.color-steel-100 {
  color: #f0f4fa;
  color: var(--steel-100);
}

.color-steel-200 {
  color: #dae3f2;
  color: var(--steel-200);
}

.color-steel-300 {
  color: #a3b6d9;
  color: var(--steel-300);
}

.color-steel-400 {
  color: #7d91b3;
  color: var(--steel-400);
}

.color-steel-500 {
  color: #5c7299;
  color: var(--steel-500);
}

.color-steel-600 {
  color: #395380;
  color: var(--steel-600);
}

.color-steel-700 {
  color: #273c61;
  color: var(--steel-700);
}

.color-red-100 {
  color: #ffdede;
  color: var(--red-100);
}

.color-red-200 {
  color: #ffcccc;
  color: var(--red-200);
}

.color-red-300 {
  color: #ff9a99;
  color: var(--red-300);
}

.color-red-400 {
  color: #ff7877;
  color: var(--red-400);
}

.color-red-500 {
  color: #d44324;
  color: var(--red-500);
}

.color-red-600 {
  color: #e50000;
  color: var(--red-600);
}

.color-red-700 {
  color: #922021;
  color: var(--red-700);
}

.color-green-100 {
  color: #e8f8f5;
  color: var(--green-100);
}

.color-green-200 {
  color: #c0f2d5;
  color: var(--green-200);
}

.color-green-300 {
  color: #84e5ae;
  color: var(--green-300);
}

.color-green-400 {
  color: #42d782;
  color: var(--green-400);
}

.color-green-500 {
  color: #07a88d;
  color: var(--green-500);
}

.color-green-600 {
  color: #008871;
  color: var(--green-600);
}

.color-green-700 {
  color: #13755e;
  color: var(--green-700);
}

.color-teal-100 {
  color: #cdf1fe;
  color: var(--teal-100);
}

.color-teal-200 {
  color: #91e1fc;
  color: var(--teal-200);
}

.color-teal-300 {
  color: #169fcc;
  color: var(--teal-300);
}

.color-teal-400 {
  color: #0a7fae;
  color: var(--teal-400);
}

.color-teal-500 {
  color: #006e9d;
  color: var(--teal-500);
}

.color-yellow-100 {
  color: #fff3d8;
  color: var(--yellow-100);
}

.color-yellow-200 {
  color: #ffe6ba;
  color: var(--yellow-200);
}

.color-yellow-300 {
  color: #ffd68c;
  color: var(--yellow-300);
}

.color-yellow-400 {
  color: #fabe5f;
  color: var(--yellow-400);
}

.color-yellow-500 {
  color: #c67c06;
  color: var(--yellow-500);
}

.color-yellow-600 {
  color: #a05604;
  color: var(--yellow-600);
}

.color-grey-100 {
  color: #f8f8fa;
  color: var(--grey-100);
}

.color-grey-200 {
  color: #f1f1f5;
  color: var(--grey-200);
}

.color-grey-300 {
  color: #e7e7ec;
  color: var(--grey-300);
}

.color-grey-400 {
  color: #b6b6bd;
  color: var(--grey-400);
}

.color-grey-500 {
  color: #6f7787;
  color: var(--grey-500);
}

.color-grey-600 {
  color: #3c4557;
  color: var(--grey-600);
}

.color-black-85 {
  color: rgba(0, 0, 0, 0.85);
  color: var(--black-85);
}

.color-black-70 {
  color: rgba(0, 0, 0, 0.7);
  color: var(--black-70);
}

.color-black-45 {
  color: rgba(0, 0, 0, 0.45);
  color: var(--black-45);
}

.color-black-25 {
  color: rgba(0, 0, 0, 0.25);
  color: var(--black-25);
}

.color-black-10 {
  color: rgba(0, 0, 0, 0.1);
  color: var(--black-10);
}

.color-black-100 {
  color: #dfdfdf;
  color: var(--black-100);
}

.color-black-200 {
  color: #b1b2b1;
  color: var(--black-200);
}

.color-black-300 {
  color: #6f7787;
  color: var(--black-300);
}

.color-black-400 {
  color: #3c4557;
  color: var(--black-400);
}

.color-black-500 {
  color: #0b172d;
  color: var(--black-500);
}

.color-white {
  color: #ffffff;
  color: var(--white);
}

/*  Desktop Styles
========================================================================== */
.style-heading-1 {
  font-size: 32px !important;
  line-height: 36px !important;
  font-weight: 400 !important;
}

.style-heading-2 {
  font-size: 20px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

.style-heading-3 {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

.style-heading-4 {
  font-size: 14px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

.style-body-lg {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 300 !important;
}

.style-body-lg-bold {
  font-size: 16px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

.style-body-md {
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

.style-body-md-bold {
  font-size: 13px !important;
  line-height: 24px !important;
  font-weight: 400 !important;
}

.style-body-sm {
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
}

.style-body-sm-bold {
  font-size: 12px !important;
  line-height: 16px !important;
  font-weight: 400 !important;
}

.style-body-tiny {
  font-size: 11px !important;
  line-height: 16px !important;
  font-weight: 300 !important;
}

.style-body-link {
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 400 !important;
}

.style-body-code {
  font-size: 13px !important;
  line-height: 24px !important;
  font-weight: 100 !important;
}

/*  Spacing
========================================================================== */
.mx-auto {
  margin-left: auto !important;
  margin-right: auto !important;
}

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

.ma-auto {
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

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

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

.ma-0 {
  margin-left: 0px !important;
  margin-right: 0px !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
}

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

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

.pa-auto {
  padding-left: auto !important;
  padding-right: auto !important;
  padding-top: auto !important;
  padding-bottom: auto !important;
}

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

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

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

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

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

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

.mr-0 {
  margin-right: 0px !important;
}

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

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

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

.ml-0 {
  margin-left: 0px !important;
}

.mt-1 {
  margin-top: 4px !important;
}

.mr-1 {
  margin-right: 4px !important;
}

.mb-1 {
  margin-bottom: 4px !important;
}

.ml-1 {
  margin-left: 4px !important;
}

.mx-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.my-1 {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.ma-1 {
  margin-left: 4px !important;
  margin-right: 4px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.mt-2 {
  margin-top: 8px !important;
}

.mr-2 {
  margin-right: 8px !important;
}

.mb-2 {
  margin-bottom: 8px !important;
}

.ml-2 {
  margin-left: 8px !important;
}

.mx-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
}

.my-2 {
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.ma-2 {
  margin-left: 8px !important;
  margin-right: 8px !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

.mt-3 {
  margin-top: 12px !important;
}

.mr-3 {
  margin-right: 12px !important;
}

.mb-3 {
  margin-bottom: 12px !important;
}

.ml-3 {
  margin-left: 12px !important;
}

.mx-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

.my-3 {
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.ma-3 {
  margin-left: 12px !important;
  margin-right: 12px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.mt-4 {
  margin-top: 16px !important;
}

.mr-4 {
  margin-right: 16px !important;
}

.mb-4 {
  margin-bottom: 16px !important;
}

.ml-4 {
  margin-left: 16px !important;
}

.mx-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

.my-4 {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.ma-4 {
  margin-left: 16px !important;
  margin-right: 16px !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.mt-5 {
  margin-top: 24px !important;
}

.mr-5 {
  margin-right: 24px !important;
}

.mb-5 {
  margin-bottom: 24px !important;
}

.ml-5 {
  margin-left: 24px !important;
}

.mx-5 {
  margin-left: 24px !important;
  margin-right: 24px !important;
}

.my-5 {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.ma-5 {
  margin-left: 24px !important;
  margin-right: 24px !important;
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

.mt-6 {
  margin-top: 32px !important;
}

.mr-6 {
  margin-right: 32px !important;
}

.mb-6 {
  margin-bottom: 32px !important;
}

.ml-6 {
  margin-left: 32px !important;
}

.mx-6 {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.my-6 {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.ma-6 {
  margin-left: 32px !important;
  margin-right: 32px !important;
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

.mt-7 {
  margin-top: 48px !important;
}

.mr-7 {
  margin-right: 48px !important;
}

.mb-7 {
  margin-bottom: 48px !important;
}

.ml-7 {
  margin-left: 48px !important;
}

.mx-7 {
  margin-left: 48px !important;
  margin-right: 48px !important;
}

.my-7 {
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.ma-7 {
  margin-left: 48px !important;
  margin-right: 48px !important;
  margin-top: 48px !important;
  margin-bottom: 48px !important;
}

.mt-8 {
  margin-top: 64px !important;
}

.mr-8 {
  margin-right: 64px !important;
}

.mb-8 {
  margin-bottom: 64px !important;
}

.ml-8 {
  margin-left: 64px !important;
}

.mx-8 {
  margin-left: 64px !important;
  margin-right: 64px !important;
}

.my-8 {
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

.ma-8 {
  margin-left: 64px !important;
  margin-right: 64px !important;
  margin-top: 64px !important;
  margin-bottom: 64px !important;
}

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

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

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

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

.pt-1 {
  padding-top: 4px !important;
}

.pr-1 {
  padding-right: 4px !important;
}

.pb-1 {
  padding-bottom: 4px !important;
}

.pl-1 {
  padding-left: 4px !important;
}

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

.py-1 {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.pa-1 {
  padding-left: 4px !important;
  padding-right: 4px !important;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.pt-2 {
  padding-top: 8px !important;
}

.pr-2 {
  padding-right: 8px !important;
}

.pb-2 {
  padding-bottom: 8px !important;
}

.pl-2 {
  padding-left: 8px !important;
}

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

.py-2 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.pa-2 {
  padding-left: 8px !important;
  padding-right: 8px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

.pt-3 {
  padding-top: 12px !important;
}

.pr-3 {
  padding-right: 12px !important;
}

.pb-3 {
  padding-bottom: 12px !important;
}

.pl-3 {
  padding-left: 12px !important;
}

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

.py-3 {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.pa-3 {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.pt-4 {
  padding-top: 16px !important;
}

.pr-4 {
  padding-right: 16px !important;
}

.pb-4 {
  padding-bottom: 16px !important;
}

.pl-4 {
  padding-left: 16px !important;
}

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

.py-4 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.pa-4 {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.pt-5 {
  padding-top: 24px !important;
}

.pr-5 {
  padding-right: 24px !important;
}

.pb-5 {
  padding-bottom: 24px !important;
}

.pl-5 {
  padding-left: 24px !important;
}

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

.py-5 {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.pa-5 {
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

.pt-6 {
  padding-top: 32px !important;
}

.pr-6 {
  padding-right: 32px !important;
}

.pb-6 {
  padding-bottom: 32px !important;
}

.pl-6 {
  padding-left: 32px !important;
}

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

.py-6 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.pa-6 {
  padding-left: 32px !important;
  padding-right: 32px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

.pt-7 {
  padding-top: 48px !important;
}

.pr-7 {
  padding-right: 48px !important;
}

.pb-7 {
  padding-bottom: 48px !important;
}

.pl-7 {
  padding-left: 48px !important;
}

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

.py-7 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.pa-7 {
  padding-left: 48px !important;
  padding-right: 48px !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.pt-8 {
  padding-top: 64px !important;
}

.pr-8 {
  padding-right: 64px !important;
}

.pb-8 {
  padding-bottom: 64px !important;
}

.pl-8 {
  padding-left: 64px !important;
}

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

.py-8 {
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

.pa-8 {
  padding-left: 64px !important;
  padding-right: 64px !important;
  padding-top: 64px !important;
  padding-bottom: 64px !important;
}

/*  Positioning
========================================================================== */
.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

/*  Text
========================================================================== */
.truncate {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.truncate-multi {
  line-height: 24px;
  line-height: var(--TLineHeight, 24px);
  font-size: 16px;
  font-size: var(--TFontSize, 16px);
  position: relative;
  max-height: calc(24px * 5);
  max-height: calc(var(--TLineHeight, 24px) * var(--TMaxLines, 5));
  overflow: hidden;
  padding-right: calc(12px * 8 + 4px) !important;
  padding-right: calc(var(--TPosRight, 12px) * var(--TPadRight, 8) + 4px) !important;
}
.truncate-multi .truncate-multi::before {
  position: absolute;
  content: "...";
  top: calc(24px * (5 - 1) + 16px * 0.5);
  top: calc(var(--TLineHeight, 24px) * (var(--TMaxLines, 5) - 1) + var(--TFontSize, 16px) * 0.5);
  right: 12px;
  right: var(--TPosRight, 12px);
}

.multi-line-truncation {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-line-clamp: var(--TMaxLineLimit, 3);
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.capitalize {
  text-transform: capitalize !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.bold-500 {
  font-weight: 500 !important;
}

.bold-600 {
  font-weight: 600 !important;
}

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

/*  Display
========================================================================== */
.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

/*  Flex
========================================================================== */
.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

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

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

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

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

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

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

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

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

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

/*  General
========================================================================== */
.cursor-pointer {
  cursor: pointer !important;
}

.overflow-auto {
  overflow: auto;
}

.overflow-hidden {
  overflow: hidden;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

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

.non-visual-button,
.non-visual-button:focus,
.non-visual-button:hover {
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-weight: 400 !important;
}

.form-group {
  display: block;
  width: 100%;
  margin-bottom: 24px;
  margin-bottom: var(--lg, 24px);
}
.form-group hr {
  border-color: var(--grey-300, );
  border-color: var(--KInputBorder, var(--grey-300, ));
  margin: 32px 0;
  margin: var(--xl, 32px) 0;
}

.k-input + .help,
.k-input-wrapper + .help {
  display: block;
  margin: 8px 0 0;
  margin: var(--spacing-xs, 8px) 0 0;
  font-size: 14px;
  font-size: var(--type-sm, 14px);
  color: rgba(0, 0, 0, 0.45);
  color: var(--black-45, rgba(0, 0, 0, 0.45));
}

.k-input-label {
  display: inline-block;
  color: var(--black-85);
  color: var(--KInputLabelColor, var(--black-85));
  font-weight: 600;
  font-weight: var(--KInputLabelWeight, 600);
  font-family: var(--font-family-sans, sans-serif);
  font-family: var(--KInputLabelFont, var(--font-family-sans, sans-serif));
  font-size: var(--type-sm, 14px);
  font-size: var(--KInputLabelSize, var(--type-sm, 14px));
  line-height: var(--type-lg, 18px);
  line-height: var(--KInputLabelLineHeight, var(--type-lg, 18px));
  margin-bottom: var(--spacing-xs, 8px);
  margin-bottom: var(--KInputLabelMargin, var(--spacing-xs, 8px));
}
.k-input-label .label-tooltip {
  display: flex;
  align-items: center;
}
.k-input-label .kong-icon {
  margin-left: 4px;
  margin-left: var(--spacing-xxs);
}

.k-inputCheckbox.k-input-label,
.k-inputRadio.k-input-label {
  color: var(--black-70, rgba(0, 0, 0, 0.7));
  color: var(--KInputCheckboxLabel, var(--black-70, rgba(0, 0, 0, 0.7)));
  font-size: var(--type-md, 16px);
  font-size: var(--KInputCheckboxLabelSize, var(--type-md, 16px));
  font-weight: normal;
  font-family: var(--font-family-sans, sans-serif);
  font-family: var(--KInputCheckboxLabelFont, var(--font-family-sans, sans-serif));
  margin-bottom: 0;
}

.k-input-label {
  display: inline-block;
  color: var(--black-85);
  color: var(--KInputLabelColor, var(--black-85));
  font-weight: 600;
  font-weight: var(--KInputLabelWeight, 600);
  font-family: var(--font-family-sans, sans-serif);
  font-family: var(--KInputLabelFont, var(--font-family-sans, sans-serif));
  font-size: var(--type-sm, 14px);
  font-size: var(--KInputLabelSize, var(--type-sm, 14px));
  line-height: var(--type-lg, 18px);
  line-height: var(--KInputLabelLineHeight, var(--type-lg, 18px));
  margin-bottom: var(--spacing-xs, 8px);
  margin-bottom: var(--KInputLabelMargin, var(--spacing-xs, 8px));
}
.k-input-label .label-tooltip {
  display: flex;
  align-items: center;
}
.k-input-label .kong-icon {
  margin-left: 4px;
  margin-left: var(--spacing-xxs);
}

.k-inputCheckbox.k-input-label,
.k-inputRadio.k-input-label {
  color: var(--black-70, rgba(0, 0, 0, 0.7));
  color: var(--KInputCheckboxLabel, var(--black-70, rgba(0, 0, 0, 0.7)));
  font-size: var(--type-md, 16px);
  font-size: var(--KInputCheckboxLabelSize, var(--type-md, 16px));
  font-weight: normal;
  font-family: var(--font-family-sans, sans-serif);
  font-family: var(--KInputCheckboxLabelFont, var(--font-family-sans, sans-serif));
  margin-bottom: 0;
}

.k-input-wrapper .text-on-input {
  position: relative;
}
.k-input-wrapper .text-on-input .hovered:not(.readonly) {
  color: var(--blue-500);
  color: var(--KInputHover, var(--blue-500));
  transition: color 0.1s ease;
}
.k-input-wrapper .text-on-input .focused:not(.readonly) {
  color: var(--blue-500);
  color: var(--KInputFocus, var(--blue-500));
  transition: color 0.1s ease;
}
.k-input-wrapper .text-on-input label.hovered:not(.readonly) {
  color: var(--blue-500);
  color: var(--KInputHover, var(--blue-500));
  transition: color 0.1s ease;
}
.k-input-wrapper .text-on-input label.focused:not(.readonly) {
  color: var(--blue-500);
  color: var(--KInputFocus, var(--blue-500));
  transition: color 0.1s ease;
}
.k-input-wrapper .text-on-input label.disabled {
  color: #6f7787;
  color: var(--grey-500);
}
.k-input-wrapper .text-on-input label {
  position: absolute;
  top: -8px;
  left: 13px;
  width: auto;
  padding: 2px 4px;
  z-index: 1;
  font-size: 11px;
  font-weight: 500;
  color: var(--grey-600);
  color: var(--KInputBorder, var(--grey-600));
  background-color: var(--white);
  background-color: var(--KInputBackground, var(--white));
  display: inline-block;
  margin-bottom: 0.5rem;
  transition: color 0.1s ease;
}

.k-input:not([type=checkbox]), .k-input:not([type=radio]),
.form-control:not([type=checkbox]),
.form-control:not([type=radio]) {
  display: block;
  padding: 10px 16px;
  padding: 10px var(--spacing-md, 16px);
  color: var(--black-70, rgba(0, 0, 0, 0.7));
  color: var(--KInputColor, var(--black-70, rgba(0, 0, 0, 0.7)));
  font-size: 14px;
  font-size: var(--type-sm, 14px);
  font-weight: 400;
  line-height: 24px;
  border: none;
  border-radius: 4px;
  background-color: var(--white, #ffffff);
  background-color: var(--KInputBackground, var(--white, #ffffff));
  box-shadow: inset 0 0 0 1px var(--grey-300) !important;
  box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
  box-sizing: border-box;
  transition: color 0.1s ease, box-shadow 0.1s ease;
  /* Browser Overrides */
}
.k-input:not([type=checkbox]).k-input-small, .k-input:not([type=radio]).k-input-small,
.form-control:not([type=checkbox]).k-input-small,
.form-control:not([type=radio]).k-input-small {
  font-size: 12px;
  font-size: var(--type-xs, 12px);
  padding: 8px 12px;
  padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
}
.k-input:not([type=checkbox]).k-input-large, .k-input:not([type=radio]).k-input-large,
.form-control:not([type=checkbox]).k-input-large,
.form-control:not([type=radio]).k-input-large {
  font-size: 16px;
  font-size: var(--type-md, 16px);
  padding: 16px 24px;
  padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
}
.k-input:not([type=checkbox]):hover, .k-input:not([type=radio]):hover,
.form-control:not([type=checkbox]):hover,
.form-control:not([type=radio]):hover {
  box-shadow: inset 0 0 0 1px var(--blue-200) !important;
  box-shadow: inset 0 0 0 1px var(--KInputHover, var(--blue-200)) !important;
  transition: all 0.1s ease;
}
.k-input:not([type=checkbox]):hover.k-input-large, .k-input:not([type=radio]):hover.k-input-large,
.form-control:not([type=checkbox]):hover.k-input-large,
.form-control:not([type=radio]):hover.k-input-large {
  box-shadow: inset 0 0 0 2px var(--blue-200) !important;
  box-shadow: inset 0 0 0 2px var(--KInputHover, var(--blue-200)) !important;
  transition: all 0.1s ease;
}
.k-input:not([type=checkbox]):focus, .k-input:not([type=radio]):focus,
.form-control:not([type=checkbox]):focus,
.form-control:not([type=radio]):focus {
  outline: none !important;
  box-shadow: inset 0 0 0 1.5px var(--blue-400) !important;
  box-shadow: inset 0 0 0 1.5px var(--KInputFocus, var(--blue-400)) !important;
  transition: all 0.1s ease;
}
.k-input:not([type=checkbox]):focus.k-input-large, .k-input:not([type=radio]):focus.k-input-large,
.form-control:not([type=checkbox]):focus.k-input-large,
.form-control:not([type=radio]):focus.k-input-large {
  box-shadow: inset 0 0 0 2px var(--blue-400) !important;
  box-shadow: inset 0 0 0 2px var(--KInputFocus, var(--blue-400)) !important;
  transition: all 0.1s ease;
}
.k-input:not([type=checkbox]):read-only, .k-input:not([type=radio]):read-only,
.form-control:not([type=checkbox]):read-only,
.form-control:not([type=radio]):read-only {
  background-color: var(--grey-100, #f8f8fa);
  background-color: var(--KInputReadonlyBackground, var(--grey-100, #f8f8fa));
  box-shadow: inset 0 0 0 1px var(--grey-300) !important;
  box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
}
.k-input:not([type=checkbox]):disabled,
.k-input:not([type=checkbox]) .disabled, .k-input:not([type=radio]):disabled,
.k-input:not([type=radio]) .disabled,
.form-control:not([type=checkbox]):disabled,
.form-control:not([type=checkbox]) .disabled,
.form-control:not([type=radio]):disabled,
.form-control:not([type=radio]) .disabled {
  cursor: not-allowed;
  font-style: italic;
  background-color: var(--grey-100, #f8f8fa);
  background-color: var(--KInputDisabledBackground, var(--grey-100, #f8f8fa));
  box-shadow: inset 0 0 0 1px var(--grey-300) !important;
  box-shadow: inset 0 0 0 1px var(--KInputBorder, var(--grey-300)) !important;
}
.k-input:not([type=checkbox]):invalid, .k-input:not([type=checkbox]):-moz-submit-invalid, .k-input:not([type=checkbox]):-moz-ui-invalid, .k-input:not([type=radio]):invalid, .k-input:not([type=radio]):-moz-submit-invalid, .k-input:not([type=radio]):-moz-ui-invalid,
.form-control:not([type=checkbox]):invalid,
.form-control:not([type=checkbox]):-moz-submit-invalid,
.form-control:not([type=checkbox]):-moz-ui-invalid,
.form-control:not([type=radio]):invalid,
.form-control:not([type=radio]):-moz-submit-invalid,
.form-control:not([type=radio]):-moz-ui-invalid {
  box-shadow: none;
}
.k-input:not([type=checkbox])::placeholder, .k-input:not([type=radio])::placeholder,
.form-control:not([type=checkbox])::placeholder,
.form-control:not([type=radio])::placeholder {
  color: var(--black-45, rgba(0, 0, 0, 0.45));
  color: var(--KInputPlaceholderColor, var(--black-45, rgba(0, 0, 0, 0.45)));
  font-weight: 400;
  opacity: 1;
}
.k-input:not([type=checkbox])::-ms-clear, .k-input:not([type=radio])::-ms-clear,
.form-control:not([type=checkbox])::-ms-clear,
.form-control:not([type=radio])::-ms-clear {
  display: none;
}
.k-input[type=search],
.form-control[type=search] {
  padding-left: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath fill='%23000' fill-opacity='.45' fill-rule='evenodd' d='M6 12c-3.3137085 0-6-2.6862915-6-6s2.6862915-6 6-6 6 2.6862915 6 6c0 1.29583043-.410791 2.49571549-1.1092521 3.47653436l1.2305724 1.23057244 2.8232632 2.8338633c.3897175.3911808.3947266 1.0192147.005164 1.4087774-.3868655.3868655-1.014825.3873148-1.4087774-.005164l-2.8338633-2.8232632-1.23057244-1.2305724C8.49571549 11.589209 7.29583043 12 6 12zm4-6c0-2.209139-1.790861-4-4-4S2 3.790861 2 6s1.790861 4 4 4 4-1.790861 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 12px 50%;
  /* Browser Overrides */
}
.k-input[type=search]::-webkit-search-cancel-button,
.form-control[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 16px;
  width: 16px;
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2712%27%20height%3D%2712%27%20viewBox%3D%270%200%2012%2012%27%20fill%3D%27none%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%0A%3Cpath%20d%3D%27M9.60005%202.40021L1.80005%2010.2002%27%20stroke%3D%27%233C4557%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3Cpath%20d%3D%27M9.60005%2010.2002L1.80005%202.40021%27%20stroke%3D%27%233C4557%27%20stroke-width%3D%271.5%27%20stroke-linecap%3D%27round%27%2F%3E%0A%3C%2Fsvg%3E");
  background-size: 16px 16px;
}

.k-input-wrapper textarea.form-control {
  resize: none;
  padding: 17px 0 0 22px;
}
.k-input-wrapper textarea.form-control:focus {
  box-shadow: inset 0 0 0 2px var(--blue-400) !important;
  box-shadow: inset 0 0 0 2px var(--KInputFocus, var(--blue-400)) !important;
}

.k-input-wrapper.input-error .k-input {
  outline: none !important;
  box-shadow: inset 0 0 0 1.5px var(--red-500, #d44324) !important;
  box-shadow: inset 0 0 0 1.5px var(--KInputError, var(--red-500, #d44324)) !important;
  transition: color 0.1s ease;
}
.k-input-wrapper.input-error .k-input.k-input-large {
  box-shadow: inset 0 0 0 2px var(--red-500, #d44324) !important;
  box-shadow: inset 0 0 0 2px var(--KInputError, var(--red-500, #d44324)) !important;
  transition: color 0.1s ease;
}
.k-input-wrapper.input-error .text-on-input label {
  color: var(--red-500, #d44324);
  color: var(--KInputError, var(--red-500, #d44324));
  transition: color 0.1s ease;
}

select.k-input:not([type=checkbox]), select.k-input:not([type=checkbox]):read-only, select.k-input:not([type=radio]), select.k-input:not([type=radio]):read-only {
  height: 38px;
  background-color: var(--white, #ffffff);
  background-color: var(--KInputSelectBackground, var(--white, #ffffff));
}

.k-input-label {
  display: inline-block;
  color: var(--black-85);
  color: var(--KInputLabelColor, var(--black-85));
  font-weight: 600;
  font-weight: var(--KInputLabelWeight, 600);
  font-family: var(--font-family-sans, sans-serif);
  font-family: var(--KInputLabelFont, var(--font-family-sans, sans-serif));
  font-size: var(--type-sm, 14px);
  font-size: var(--KInputLabelSize, var(--type-sm, 14px));
  line-height: var(--type-lg, 18px);
  line-height: var(--KInputLabelLineHeight, var(--type-lg, 18px));
  margin-bottom: var(--spacing-xs, 8px);
  margin-bottom: var(--KInputLabelMargin, var(--spacing-xs, 8px));
}
.k-input-label .label-tooltip {
  display: flex;
  align-items: center;
}
.k-input-label .kong-icon {
  margin-left: 4px;
  margin-left: var(--spacing-xxs);
}

.k-inputCheckbox.k-input-label,
.k-inputRadio.k-input-label {
  color: var(--black-70, rgba(0, 0, 0, 0.7));
  color: var(--KInputCheckboxLabel, var(--black-70, rgba(0, 0, 0, 0.7)));
  font-size: var(--type-md, 16px);
  font-size: var(--KInputCheckboxLabelSize, var(--type-md, 16px));
  font-weight: normal;
  font-family: var(--font-family-sans, sans-serif);
  font-family: var(--KInputCheckboxLabelFont, var(--font-family-sans, sans-serif));
  margin-bottom: 0;
}

input.k-input[type=checkbox], input.k-input[type=radio],
input.form-control[type=checkbox],
input.form-control[type=radio] {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: 1px solid var(--grey-300, #e7e7ec);
  border: 1px solid var(--KInputBorder, var(--grey-300, #e7e7ec));
  background-color: #fff;
  box-sizing: border-box;
  appearance: none;
  user-select: none;
  -webkit-print-color-adjust: exact;
}
input.k-input[type=checkbox]:disabled, input.k-input[type=radio]:disabled,
input.form-control[type=checkbox]:disabled,
input.form-control[type=radio]:disabled {
  opacity: 1;
}
input.k-input[type=checkbox]:disabled:hover, input.k-input[type=radio]:disabled:hover,
input.form-control[type=checkbox]:disabled:hover,
input.form-control[type=radio]:disabled:hover {
  border-color: var(--grey-300, #e7e7ec);
  border-color: var(--KInputBorder, var(--grey-300, #e7e7ec));
}
input.k-input[type=checkbox],
input.form-control[type=checkbox] {
  height: 20px;
  width: 20px;
  color: var(--blue-500, #1155cb);
  color: var(--KCheckboxPrimary, var(--blue-500, #1155cb));
  border: none;
  border-radius: 4px;
  margin: 0 6px 0 0;
  outline: none;
}
input.k-input[type=checkbox]:not(:checked),
input.form-control[type=checkbox]:not(:checked) {
  border: 1px solid var(--blue-500, #1155cb);
  border: 1px solid var(--KCheckboxPrimary, var(--blue-500, #1155cb));
}
input.k-input[type=checkbox]:checked,
input.form-control[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.633 0L12 1.397 3.583 10 0 6.337 1.367 4.94l2.216 2.265z' fill='%23FFF' fill-rule='nonzero'/%3E%3C/svg%3E");
  border-color: var(--blue-500, #1155cb);
  border-color: var(--KCheckboxPrimary, var(--blue-500, #1155cb));
  background-color: currentColor;
  background-position: center;
  background-repeat: no-repeat;
}
input.k-input[type=checkbox]:checked::-ms-check,
input.form-control[type=checkbox]:checked::-ms-check {
  color: #fff;
  border: 1px solid var(--blue-500, #1155cb);
  border: 1px solid var(--KCheckboxPrimary, var(--blue-500, #1155cb));
  background-color: var(--blue-500, #1155cb);
  background-color: var(--KCheckboxPrimary, var(--blue-500, #1155cb));
}
input.k-input[type=checkbox]:hover, input.k-input[type=checkbox]:active,
input.form-control[type=checkbox]:hover,
input.form-control[type=checkbox]:active {
  border-color: var(--blue-500, #1155cb);
  border-color: var(--KCheckboxPrimary, var(--blue-500, #1155cb));
}
input.k-input[type=checkbox]:focus,
input.form-control[type=checkbox]:focus {
  outline: none;
  border-color: var(--blue-500, #1155cb);
  border-color: var(--KCheckboxPrimary, var(--blue-500, #1155cb));
}
input.k-input[type=checkbox]:disabled:not(:checked),
input.form-control[type=checkbox]:disabled:not(:checked) {
  background-color: var(--grey-100, #f8f8fa);
  background-color: var(--KInputCheckboxDisabled, var(--grey-100, #f8f8fa));
  border: 1px solid var(--grey-400, #b6b6bd);
  border: 1px solid var(--KCheckboxDisabledChecked, var(--grey-400, #b6b6bd));
  border-radius: 2px;
}
input.k-input[type=checkbox]:disabled:checked,
input.form-control[type=checkbox]:disabled:checked {
  background-color: var(--grey-400, #b6b6bd);
  background-color: var(--KCheckboxDisabledChecked, var(--grey-400, #b6b6bd));
}
input.k-input[type=radio],
input.form-control[type=radio] {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 20px;
  color: var(--blue-500, #1155cb);
  color: var(--KRadioPrimary, var(--blue-500, #1155cb));
  border: 2px solid var(--grey-300, #e7e7ec);
  border: 2px solid var(--KInputBorder, var(--grey-300, #e7e7ec));
  border-radius: 100%;
  margin: 0 6px 0 0;
}
input.k-input[type=radio]:checked,
input.form-control[type=radio]:checked {
  border-color: currentColor;
  background-color: #fff;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
input.k-input[type=radio]:checked:after,
input.form-control[type=radio]:checked:after {
  content: "";
  display: flex;
  height: 10px;
  width: 10px;
  background-color: currentColor;
  border-radius: 100%;
}
input.k-input[type=radio]:checked::-ms-check,
input.form-control[type=radio]:checked::-ms-check {
  border: 2px solid currentColor;
  color: currentColor;
}
input.k-input[type=radio]:disabled,
input.form-control[type=radio]:disabled {
  background-color: var(--grey-200, #f1f1f5);
  background-color: var(--KInputRadioDisabled, var(--grey-200, #f1f1f5));
}

.k-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.k-switch.switch-with-icon .switch-control {
  width: 48px;
}
.k-switch.switch-with-icon .kong-icon {
  height: 20px;
  width: 22px;
  left: 57px;
}
.k-switch.switch-with-icon input:checked + .switch-control:after {
  left: 26px;
}
.k-switch .switch-control {
  position: relative;
  display: block;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--grey-400, #b6b6bd);
  background-color: var(--KInputSwitchBackground, var(--grey-400, #b6b6bd));
  transition: 0.2s linear;
}
.k-switch .switch-control.has-label-left {
  margin-left: 1rem;
}
.k-switch .switch-control.has-label-right {
  margin-right: 1rem;
}
.k-switch .switch-control:after {
  position: absolute;
  top: 2px;
  left: 2px;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  background-color: var(--white, #ffffff);
  content: "";
  transition: 0.2s linear;
}
.k-switch[disabled] {
  cursor: not-allowed;
}
.k-switch[disabled] .switch-control {
  opacity: 0.3;
  pointer-events: none;
}
.k-switch input {
  display: none;
}
.k-switch input:checked + .switch-control {
  background-color: var(--green-500, #07a88d);
  background-color: var(--KInputSwitchOn, var(--green-500, #07a88d));
}
.k-switch input:checked + .switch-control:after {
  left: 22px;
}
.k-switch span {
  color: var(--black-70, rgba(0, 0, 0, 0.7));
  color: var(--KInputSwitchLabel, var(--black-70, rgba(0, 0, 0, 0.7)));
}

:root {
  --blue-100: #f2f6fe;
  --blue-200: #bdd3f9;
  --blue-300: #8ab3fa;
  --blue-400: #3972d5;
  --blue-500: #1155cb;
  --blue-600: #003694;
  --blue-700: #0a2b66;
  --petrol-100: #eaf4fb;
  --petrol-200: #0364ac;
  --purple-100: #d7d8fe;
  --purple-200: #bec0fd;
  --purple-300: #9396fc;
  --purple-400: #473cfb;
  --steel-100: #f0f4fa;
  --steel-200: #dae3f2;
  --steel-300: #a3b6d9;
  --steel-400: #7d91b3;
  --steel-500: #5c7299;
  --steel-600: #395380;
  --steel-700: #273c61;
  --red-100: #ffdede;
  --red-200: #ffcccc;
  --red-300: #ff9a99;
  --red-400: #ff7877;
  --red-500: #d44324;
  --red-600: #e50000;
  --red-700: #922021;
  --green-100: #e8f8f5;
  --green-200: #c0f2d5;
  --green-300: #84e5ae;
  --green-400: #42d782;
  --green-500: #07a88d;
  --green-600: #008871;
  --green-700: #13755e;
  --teal-100: #cdf1fe;
  --teal-200: #91e1fc;
  --teal-300: #169fcc;
  --teal-400: #0a7fae;
  --teal-500: #006e9d;
  --yellow-100: #fff3d8;
  --yellow-200: #ffe6ba;
  --yellow-300: #ffd68c;
  --yellow-400: #fabe5f;
  --yellow-500: #c67c06;
  --yellow-600: #a05604;
  --grey-100: #f8f8fa;
  --grey-200: #f1f1f5;
  --grey-300: #e7e7ec;
  --grey-400: #b6b6bd;
  --grey-500: #6f7787;
  --grey-600: #3c4557;
  --black-85: rgba(0, 0, 0, 0.85);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-45: rgba(0, 0, 0, 0.45);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-10: rgba(0, 0, 0, 0.1);
  --black-100: #dfdfdf;
  --black-200: #b1b2b1;
  --black-300: #6f7787;
  --black-400: #3c4557;
  --black-500: #0b172d;
  --white: #ffffff;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;
  --type-xxxl: 32px;
  --type-xxl: 28px;
  --type-xl: 22px;
  --type-lg: 18px;
  --type-md: 16px;
  --type-sm: 14px;
  --type-xs: 12px;
  --type-xxs: 10px;
  --font-family-sans: sans-serif;
  --font-family-mono: monospace;
}
:root body {
  font-weight: 400;
  font-weight: var(--font-weight-normal, 400);
}