/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/
@import "https://fonts.googleapis.com/css2?family=Noto+Sans+Armenian:wght@100;200;400;500;600;700;800;900&family=Noto+Sans:wght@100;300;500;600;700;800;900&display=swap";

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
    outline: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    -moz-appearance: none;
}

input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

textarea {
    overflow: auto;
    vertical-align: top;
    resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */
audio,
canvas,
video {
    display: inline-block;
    max-width: 100%;
}

    /**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
    audio:not([controls]) {
        display: none;
        height: 0;
    }

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */
[hidden] {
    display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
    font-size: 100%;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -ms-text-size-adjust: 100%;
    /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
    outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
    outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */
img {
    border: 0;
    /* 1 */
    -ms-interpolation-mode: bicubic;
    /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */
figure {
    margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */
form {
    margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */
legend {
    border: 0;
    /* 1 */
    padding: 0;
    white-space: normal;
    /* 2 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
    font-size: 100%;
    /* 1 */
    margin: 0;
    /* 2 */
    vertical-align: baseline;
    /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
    line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
    text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
    overflow: visible;
    /* 4 */
}

    /**
 * Re-set default cursor for disabled elements.
 */
    button[disabled],
    html input[disabled] {
        cursor: default;
    }

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}

    /**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

/**
 * Remove inner padding and border in Firefox 3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
    overflow: auto;
    /* 1 */
    vertical-align: top;
    /* 2 */
}

/**
 * Remove most spacing between table cells.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

img {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

hr {
    margin: 0;
}

@use "sass:map";
@use "sass:meta";
/*******************/
/********SPACE******/
/*******************/
/**padding**/
/**margin**/
/*******************/
/********COLOR******/
/*******************/
/**color**/
/**background-color**/
/*******************/
/*****Typography****/
/*******************/
/**font-size**/
/**font-weight**/
/*animation mixin usage

// Define animation name, and properties
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
.element {
  @include animation('fade-out 5s 3');
}
*/
/*retina images mixin usage

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}
*/
/*gradient mixin usage
.foo {
  @include background-gradient(red, black, 'vertical');
}
*/
/*positioning element mixin usage
.foo {
 @include position(absolute, top right left);
}
*/
/*centering element mixin usage
.foo {
  @include center(both);
}
*/
/*clearfix mixin usage
.container-with-floated-children {
        @extend %clearfix;
}
*/
/*media queries usage

.site-header {
    @include screen('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}

*/
@use "sass:map";
@use "sass:meta";
@use "sass:map";
@use "sass:meta";
/*******************/
/********SPACE******/
/*******************/
/**padding**/
/**margin**/
/*******************/
/********COLOR******/
/*******************/
/**color**/
/**background-color**/
/*******************/
/*****Typography****/
/*******************/
/**font-size**/
/**font-weight**/
/*animation mixin usage

// Define animation name, and properties
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
.element {
  @include animation('fade-out 5s 3');
}
*/
/*retina images mixin usage

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}
*/
/*gradient mixin usage
.foo {
  @include background-gradient(red, black, 'vertical');
}
*/
/*positioning element mixin usage
.foo {
 @include position(absolute, top right left);
}
*/
/*centering element mixin usage
.foo {
  @include center(both);
}
*/
/*clearfix mixin usage
.container-with-floated-children {
        @extend %clearfix;
}
*/
/*media queries usage

.site-header {
    @include screen('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}

*/
body {
    font-family: var(--ds-font-family);
}

.m-0 {
    margin: 0px;
}

.m-2 {
    margin: 2px;
}

.m-4 {
    margin: 4px;
}

.m-6 {
    margin: 6px;
}

.m-8 {
    margin: 8px;
}

.m-12 {
    margin: 12px;
}

.m-16 {
    margin: 16px;
}

.m-20 {
    margin: 20px;
}

.m-24 {
    margin: 24px;
}

.m-32 {
    margin: 32px;
}

.m-40 {
    margin: 40px;
}

.m-48 {
    margin: 48px;
}

.m-56 {
    margin: 56px;
}

.m-64 {
    margin: 64px;
}

.m-80 {
    margin: 80px;
}

.m-160 {
    margin: 160px;
}

.m-240 {
    margin: 240px;
}

.m-auto {
    /*add the @if loop*/
    margin: auto;
}

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

.mt-2 {
    margin-top: 2px;
}

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

.mt-6 {
    margin-top: 6px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-12 {
    margin-top: 12px;
}

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

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

.mt-24 {
    margin-top: 24px;
}

.mt-32 {
    margin-top: 32px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-48 {
    margin-top: 48px;
}

.mt-56 {
    margin-top: 56px;
}

.mt-64 {
    margin-top: 64px;
}

.mt-80 {
    margin-top: 80px;
}

.mt-160 {
    margin-top: 160px;
}

.mt-240 {
    margin-top: 240px;
}

.mt-auto {
    /*add the @if loop*/
    margin-top: auto;
}

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

.mr-2 {
    margin-right: 2px;
}

.mr-4 {
    margin-right: 4px;
}

.mr-6 {
    margin-right: 6px;
}

.mr-8 {
    margin-right: 8px;
}

.mr-12 {
    margin-right: 12px;
}

.mr-16 {
    margin-right: 16px;
}

.mr-20 {
    margin-right: 20px;
}

.mr-24 {
    margin-right: 24px;
}

.mr-32 {
    margin-right: 32px;
}

.mr-40 {
    margin-right: 40px;
}

.mr-48 {
    margin-right: 48px;
}

.mr-56 {
    margin-right: 56px;
}

.mr-64 {
    margin-right: 64px;
}

.mr-80 {
    margin-right: 80px;
}

.mr-160 {
    margin-right: 160px;
}

.mr-240 {
    margin-right: 240px;
}

.mr-auto {
    /*add the @if loop*/
    margin-right: auto;
}

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

.mb-2 {
    margin-bottom: 2px;
}

.mb-4 {
    margin-bottom: 4px;
}

.mb-6 {
    margin-bottom: 6px;
}

.mb-8 {
    margin-bottom: 8px;
}

.mb-12 {
    margin-bottom: 12px;
}

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

.mb-20 {
    margin-bottom: 20px;
}

.mb-24 {
    margin-bottom: 24px;
}

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

.mb-40 {
    margin-bottom: 40px;
}

.mb-48 {
    margin-bottom: 48px;
}

.mb-56 {
    margin-bottom: 56px;
}

.mb-64 {
    margin-bottom: 64px;
}

.mb-80 {
    margin-bottom: 80px;
}

.mb-160 {
    margin-bottom: 160px;
}

.mb-240 {
    margin-bottom: 240px;
}

.mb-auto {
    /*add the @if loop*/
    margin-bottom: auto;
}

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

.ml-2 {
    margin-left: 2px;
}

.ml-4 {
    margin-left: 4px;
}

.ml-6 {
    margin-left: 6px;
}

.ml-8 {
    margin-left: 8px;
}

.ml-12 {
    margin-left: 12px;
}

.ml-16 {
    margin-left: 16px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-24 {
    margin-left: 24px;
}

.ml-32 {
    margin-left: 32px;
}

.ml-40 {
    margin-left: 40px;
}

.ml-48 {
    margin-left: 48px;
}

.ml-56 {
    margin-left: 56px;
}

.ml-64 {
    margin-left: 64px;
}

.ml-80 {
    margin-left: 80px;
}

.ml-160 {
    margin-left: 160px;
}

.ml-240 {
    margin-left: 240px;
}

.ml-auto {
    /*add the @if loop*/
    margin-left: auto;
}

.p-0 {
    padding: 0px;
}

.p-2 {
    padding: 2px;
}

.p-4 {
    padding: 4px;
}

.p-6 {
    padding: 6px;
}

.p-8 {
    padding: 8px;
}

.p-12 {
    padding: 12px;
}

.p-16 {
    padding: 16px;
}

.p-20 {
    padding: 20px;
}

.p-24 {
    padding: 24px;
}

.p-32 {
    padding: 32px;
}

.p-40 {
    padding: 40px;
}

.p-48 {
    padding: 48px;
}

.p-56 {
    padding: 56px;
}

.p-64 {
    padding: 64px;
}

.p-80 {
    padding: 80px;
}

.p-160 {
    padding: 160px;
}

.p-240 {
    padding: 240px;
}

.p-auto {
    /*add the @if loop*/
    padding: auto;
}

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

.pt-2 {
    padding-top: 2px;
}

.pt-4 {
    padding-top: 4px;
}

.pt-6 {
    padding-top: 6px;
}

.pt-8 {
    padding-top: 8px;
}

.pt-12 {
    padding-top: 12px;
}

.pt-16 {
    padding-top: 16px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-24 {
    padding-top: 24px;
}

.pt-32 {
    padding-top: 32px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-48 {
    padding-top: 48px;
}

.pt-56 {
    padding-top: 56px;
}

.pt-64 {
    padding-top: 64px;
}

.pt-80 {
    padding-top: 80px;
}

.pt-160 {
    padding-top: 160px;
}

.pt-240 {
    padding-top: 240px;
}

.pt-auto {
    /*add the @if loop*/
    padding-top: auto;
}

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

.pr-2 {
    padding-right: 2px;
}

.pr-4 {
    padding-right: 4px;
}

.pr-6 {
    padding-right: 6px;
}

.pr-8 {
    padding-right: 8px;
}

.pr-12 {
    padding-right: 12px;
}

.pr-16 {
    padding-right: 16px;
}

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

.pr-24 {
    padding-right: 24px;
}

.pr-32 {
    padding-right: 32px;
}

.pr-40 {
    padding-right: 40px;
}

.pr-48 {
    padding-right: 48px;
}

.pr-56 {
    padding-right: 56px;
}

.pr-64 {
    padding-right: 64px;
}

.pr-80 {
    padding-right: 80px;
}

.pr-160 {
    padding-right: 160px;
}

.pr-240 {
    padding-right: 240px;
}

.pr-auto {
    /*add the @if loop*/
    padding-right: auto;
}

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

.pb-2 {
    padding-bottom: 2px;
}

.pb-4 {
    padding-bottom: 4px;
}

.pb-6 {
    padding-bottom: 6px;
}

.pb-8 {
    padding-bottom: 8px;
}

.pb-12 {
    padding-bottom: 12px;
}

.pb-16 {
    padding-bottom: 16px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-24 {
    padding-bottom: 24px;
}

.pb-32 {
    padding-bottom: 32px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-48 {
    padding-bottom: 48px;
}

.pb-56 {
    padding-bottom: 56px;
}

.pb-64 {
    padding-bottom: 64px;
}

.pb-80 {
    padding-bottom: 80px;
}

.pb-160 {
    padding-bottom: 160px;
}

.pb-240 {
    padding-bottom: 240px;
}

.pb-auto {
    /*add the @if loop*/
    padding-bottom: auto;
}

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

.pl-2 {
    padding-left: 2px;
}

.pl-4 {
    padding-left: 4px;
}

.pl-6 {
    padding-left: 6px;
}

.pl-8 {
    padding-left: 8px;
}

.pl-12 {
    padding-left: 12px;
}

.pl-16 {
    padding-left: 16px;
}

.pl-20 {
    padding-left: 20px;
}

.pl-24 {
    padding-left: 24px;
}

.pl-32 {
    padding-left: 32px;
}

.pl-40 {
    padding-left: 40px;
}

.pl-48 {
    padding-left: 48px;
}

.pl-56 {
    padding-left: 56px;
}

.pl-64 {
    padding-left: 64px;
}

.pl-80 {
    padding-left: 80px;
}

.pl-160 {
    padding-left: 160px;
}

.pl-240 {
    padding-left: 240px;
}

.pl-auto {
    /*add the @if loop*/
    padding-left: auto;
}

.heading {
    font-family: var(--ds-font-family);
}

.heading-xlarge {
    font-size: var(--ds-headline-xl);
}

.heading-large {
    font-size: var(--ds-headline-lg);
}

.heading-medium {
    font-size: var(--ds-headline-md);
}

.heading-standard {
    font-size: var(--ds-headline-std);
}

.heading-small {
    font-size: var(--ds-headline-sm);
}

.heading-xsmall {
    font-size: var(--ds-headline-xs);
}

@media (max-width: 1440px) {
    .heading-large {
        font-size: var(--font-size-40);
    }
}

@media (max-width: 1280px) {
    .heading-large {
        font-size: var(--font-size-36);
    }
}

@media (max-width: 768px) {
    .heading-medium {
        font-size: var(--font-size-36);
    }
}

@media (max-width: 576px) {
    .heading-medium {
        font-size: var(--font-size-28);
    }
}

@media (max-width: 375px) {
    .heading-small {
        font-size: 28px;
    }
}

.body {
    font-family: var(--ds-font-family);
}

.body-large {
    font-size: var(--ds-paragraph-lg);
}

.body-medium {
    font-size: var(--ds-paragraph-md);
}

.body-standard {
    font-size: var(--ds-paragraph-std);
}

.body-small {
    font-size: var(--ds-paragraph-sm);
}

.body-xsmall {
    font-size: var(--ds-paragraph-xs);
}

.body-xxsmall {
    font-size: var(--ds-paragraph-xs);
}

.regular {
    font-weight: var(--ds-font-weight-default);
}

.semibold {
    font-weight: var(--ds-font-weight-active);
}

.bold {
    font-weight: var(--ds-font-weight-heading);
}

.bolder {
    font-weight: var(--ds-font-weight-strong);
}

.xbolder {
    font-weight: var(--ds-font-weight-xstrong);
}

.lh-large {
    line-height: var(--ds-line-height-heading);
}

.lh-medium {
    line-height: var(--ds-line-height-caption);
}

.lh-small {
    line-height: var(--ds-line-height-tight);
}

.lh-xsmall {
    line-height: var(--ds-line-height-default);
}

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

.color-secondary {
    color: var(--ds-color-text-secondary);
}

.color-tertiary {
    color: var(--ds-color-text-tertiary);
}

.color-disabled {
    color: var(--ds-color-text-disabled);
}

.color-selected {
    color: var(--ds-color-text-selected);
}

.color-inverse {
    color: var(--ds-color-text-inverse);
}

.color-brand {
    color: var(--ds-color-text-brand);
}

.color-success {
    color: var(--ds-color-text-success);
}

.color-information {
    color: var(--ds-color-text-info);
}

.color-warning {
    color: var(--ds-color-text-warning);
}

.color-danger {
    color: var(--ds-color-text-danger);
}

.color-discovery {
    color: var(--ds-color-text-discovery);
}

.icon {
    --icon-xxl: var(--ds-size-48);
    --icon-xl: var(--ds-size-32);
    --icon-lg: var(--ds-size-28);
    --icon-md: var(--ds-size-24);
    --icon-sm: var(--ds-size-20);
    --icon-xs: var(--ds-size-16);
    --icon-xxs: var(--ds-size-12);
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.icon--xxsmall {
    font-size: var(--icon-xxs);
}

.icon--xsmall {
    font-size: var(--icon-xs);
}

.icon--small {
    font-size: var(--icon-sm);
}

.icon--medium {
    font-size: var(--icon-md);
}

.icon--large {
    font-size: var(--icon-lg);
}

.icon--xlarge {
    font-size: var(--icon-xl);
}

.icon--xxlarge {
    font-size: var(--icon-xxl);
}

.scrollbar {
    overflow: hidden;
    /* Works on Firefox */
    /* Works on Chrome, Edge, and Safari */
}

@-moz-document url-prefix() {
    .scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--grey-50) transparent;
    }
}

.scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--grey-50);
    border-radius: var(--border-radius-100);
}

    .scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: var(--grey-100);
    }

.scrollbar--vertical {
    overflow-y: auto;
    /* Works on Chrome, Edge, and Safari */
}

    .scrollbar--vertical::-webkit-scrollbar-track {
        margin: var(--ds-space-8) 0;
    }

    .scrollbar--vertical::-webkit-scrollbar {
        width: var(--ds-size-4);
    }

.scrollbar--horizontal {
    overflow-x: auto;
    /* Works on Chrome, Edge, and Safari */
}

    .scrollbar--horizontal::-webkit-scrollbar-track {
        margin: 0 var(--ds-space-8);
    }

    .scrollbar--horizontal::-webkit-scrollbar {
        height: var(--ds-size-4);
    }

.flexbox {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.flex-direction--column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-direction--column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-direction: reverse;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.flex-direction--row {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-direction--row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-direction: reverse;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex-wrap--wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-wrap--nowrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: none;
    flex-wrap: nowrap;
}

.align-items--stretch {
    -webkit-box-align: stretch;
    -moz-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}

.align-items--start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.align-items--center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.align-items--end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.align-self--auto {
    -webkit-box-align: auto;
    -moz-box-align: auto;
    -ms-flex-align: auto;
    -webkit-align-items: auto;
    align-items: auto;
}

.align-self--start {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}

.align-self--center {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.align-self--end {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}

.justify-content--start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}

.justify-content--between {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.justify-content--around {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

.justify-content--end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
}

.justify-content--center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.full-width {
    width: 100%;
}

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

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

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

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

.text-truncate {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

:root {
    --brand-900: #72BF44;
    --brand-700: #518A2F;
    --brand-600: #61A539;
    --brand-300: #8ECC69;
    --grey-900: #0F172A;
    --grey-800: #333333;
    --grey-700: #99A4B2;
    --grey-400: #AAAAAA;
    --grey-200: #D9DDE2;
    --grey-100: #E1E4E8;
    --grey-30: #F8F8F8;
    --red-900: #E61B00;
    --white: #ffffff;
    --blue-100: #F1F5F9;
    /**
  * @tokens Colors
  * @presenter Color
  */
    --ds-color-bg-white: var(--white);
    --ds-color-bg-brand: var(--brand-900);
    --ds-color-bg-blue-light: var(--blue-100);
    --ds-color-bg-container-lighter: var(--grey-30);
    --ds-color-text-primary: var(--grey-900);
    --ds-color-text-secondary: var(--grey-800);
    --ds-color-text-tertiary: var(--grey-700);
    --ds-color-text-brand: var(--brand-900);
    --ds-color-text-danger: var(--red-900);
    --ds-color-text-disabled: var(--grey-400);
    --ds-color-text-inverse: var(--white);
    --ds-color-icon-primary: var(--grey-900);
    --ds-color-icon-secondary: var(--grey-800);
    --ds-color-icon-tertiary: var(--grey-700);
    --ds-color-icon-brand: var(--brand-900);
    --ds-color-border-primary: var(--grey-200);
    --ds-color-border-secondary: var(--grey-100);
    --ds-color-border-brand: var(--brand-900);
    --ds-color-border-danger: var(--red-900);
    --ds-color-border-disabled: var(--grey-200);
    --ds-color-border-selected: var(--brand-900);
    /**
  * @tokens-end
  */
}

:root {
    --font-family-primary: 'Noto Sans Armenian', 'Noto Sans';
    --font-family-secondary: 'Tahoma';
    --font-family-tertiary: 'Open Sans';
    --font-size-6: 6px;
    --font-size-10: 10px;
    --font-size-12: 12px;
    --font-size-14: 14px;
    --font-size-16: 16px;
    --font-size-18: 18px;
    --font-size-20: 20px;
    --font-size-24: 24px;
    --font-size-28: 28px;
    --font-size-32: 32px;
    --font-size-36: 36px;
    --font-size-40: 40px;
    --font-size-44: 44px;
    --font-size-48: 48px;
    --font-size-64: 64px;
    --font-weight-400: 400;
    --font-weight-500: 500;
    --font-weight-600: 600;
    --font-weight-700: 700;
    --font-weight-800: 800;
    --line-height-xs: 1.15;
    --line-height-sm: 1.2;
    --line-height-md: 1.32;
    --line-height-lg: 1.5;
    --letter-spacing: 1px;
    /**
  * @tokens Font Families
  * @presenter FontFamily
  */
    --ds-font-family: var(--font-family-primary);
    --ds-font-family-code: var(--font-family-secondary);
    --ds-font-family-tertiary: var(--font-family-tertiary);
    /**
  * @tokens Font Sizes
  * @presenter FontSize
  */
    --ds-headline-xl: var(--font-size-64);
    --ds-headline-lg: var(--font-size-44);
    --ds-headline-md: var(--font-size-40);
    --ds-headline-std: var(--font-size-36);
    --ds-headline-sm: var(--font-size-32);
    --ds-headline-xs: var(--font-size-24);
    --ds-paragraph-lg: var(--font-size-20);
    --ds-paragraph-md: var(--font-size-16);
    --ds-paragraph-std: var(--font-size-14);
    --ds-paragraph-sm: var(--font-size-12);
    --ds-paragraph-xs: var(--font-size-10);
    --ds-paragraph-xxs: var(--font-size-6);
    /**
  * @tokens Font Weights
  * @presenter FontWeight
  */
    --ds-font-weight-default: var(--font-weight-400);
    --ds-font-weight-active: var(--font-weight-500);
    --ds-font-weight-heading: var(--font-weight-600);
    --ds-font-weight-strong: var(--font-weight-700);
    --ds-font-weight-xstrong: var(--font-weight-800);
    /**
  * @tokens Line Heights
  * @presenter LineHeight
  */
    --ds-line-height-default: var(--line-height-xs);
    --ds-line-height-tight: var(--line-height-sm);
    --ds-line-height-caption: var(--line-height-md);
    --ds-line-height-heading: var(--line-height-lg);
    /**
  * @tokens Letter Spacing
  * @presenter LetterSpacing
  */
    --ds-letter-spacing: var(--letter-spacing);
    /**
  * @tokens-end
  */
}

:root {
    --space-0: 0;
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-28: 28px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;
    --space-56: 56px;
    --space-64: 64px;
    --space-80: 80px;
    --space-160: 160px;
    --space-240: 240px;
    /**
* @tokens Spacings
* @presenter Spacing
*/
    --ds-space-0: var(--space-0);
    --ds-space-2: var(--space-2);
    --ds-space-4: var(--space-4);
    --ds-space-6: var(--space-6);
    --ds-space-8: var(--space-8);
    --ds-space-10: var(--space-10);
    --ds-space-12: var(--space-12);
    --ds-space-14: var(--space-14);
    --ds-space-16: var(--space-16);
    --ds-space-20: var(--space-20);
    --ds-space-24: var(--space-24);
    --ds-space-28: var(--space-28);
    --ds-space-32: var(--space-32);
    --ds-space-40: var(--size-40);
    --ds-space-48: var(--size-48);
    --ds-space-56: var(--size-56);
    --ds-space-64: var(--size-64);
    --ds-space-80: var(--size-80);
    --ds-space-160: var(--size-160);
    --ds-space-240: var(--size-240);
    /**
  * @tokens-end
  */
}

:root {
    --size-2: 2px;
    --size-4: 4px;
    --size-6: 6px;
    --size-8: 8px;
    --size-12: 12px;
    --size-16: 16px;
    --size-20: 20px;
    --size-24: 24px;
    --size-28: 28px;
    --size-32: 32px;
    --size-40: 40px;
    --size-48: 48px;
    --size-52: 52px;
    --size-56: 56px;
    --size-64: 64px;
    --size-80: 80px;
    --size-100: 100px;
    --size-120: 120px;
    --size-140: 140px;
    --size-160: 160px;
    --size-240: 240px;
    /**
* @tokens Sizes
*/
    --ds-size-2: var(--size-2);
    --ds-size-4: var(--size-4);
    --ds-size-6: var(--size-6);
    --ds-size-8: var(--size-8);
    --ds-size-12: var(--size-12);
    --ds-size-16: var(--size-16);
    --ds-size-20: var(--size-20);
    --ds-size-24: var(--size-24);
    --ds-size-28: var(--size-28);
    --ds-size-32: var(--size-32);
    --ds-size-40: var(--size-40);
    --ds-size-48: var(--size-48);
    --ds-size-52: var(--size-52);
    --ds-size-56: var(--size-56);
    --ds-size-64: var(--size-64);
    --ds-size-80: var(--size-80);
    --ds-size-100: var(--size-100);
    --ds-size-120: var(--size-120);
    --ds-size-140: var(--size-140);
    --ds-size-160: var(--size-160);
    --ds-size-240: var(--size-240);
    /**
  * @tokens-end
  */
}

:root {
    --border-size-1: 1px;
    --border-size-2: 2px;
    --border-radius-0: 0;
    --border-radius-4: 4px;
    --border-radius-8: 8px;
    --border-radius-10: 10px;
    --border-radius-16: 16px;
    --border-radius-20: 20px;
    --border-radius-28: 28px;
    --border-radius-32: 32px;
    --border-radius-40: 40px;
    --border-radius-48: 48px;
    --border-radius-100: 100px;
    /**
  * @tokens Borders
  * @presenter Border
  */
    --ds-border-radius: var(--border-radius-0);
    --ds-border-radius-xs: var(--border-radius-4);
    --ds-border-radius-sm: var(--border-radius-16);
    --ds-border-radius-md: var(--border-radius-20);
    --ds-border-radius-lg: var(--border-radius-32);
    --ds-border-radius-xl: var(--border-radius-48);
    --ds-border-radius-full: var(--border-radius-100);
    /**
  * @tokens-end
  */
}

:root {
    --shadow-1: 0px 1px 2px rgba(34, 34, 34, 0.06), 0px 2px 2px rgba(34, 34, 34, 0.08), 0px 1px 4px rgba(34, 34, 34, 0.08);
    --shadow-2: 0px 2px 4px rgba(34, 34, 34, 0.06), 0px 3px 2px rgba(34, 34, 34, 0.08), 0px 1px 6px rgba(34, 34, 34, 0.1);
    --shadow-3: 0px 3px 4px rgba(34, 34, 34, 0.12), 1px 3px 3px rgba(34, 34, 34, 0.1), 0px 1px 8px rgba(34, 34, 34, 0.16);
    --shadow-4: 0px 4px 5px rgba(34, 34, 34, 0.1), 0px 1px 10px rgba(34, 34, 34, 0.08), 0px 2px 4px rgba(34, 34, 34, 0.16);
    --shadow-5: 0px 6px 10px rgba(34, 34, 34, 0.12), 0px 1px 18px rgba(34, 34, 34, 0.08), 0px 3px 5px rgba(34, 34, 34, 0.16);
    --shadow-6: 0px 8px 10px rgba(31, 31, 31, 0.12), 0px 3px 14px rgba(31, 31, 31, 0.08), 0px 5px 5px rgba(31, 31, 31, 0.16);
    --shadow-7: 0px 9px 12px rgba(34, 34, 34, 0.12), 0px 3px 16px rgba(34, 34, 34, 0.08), 0px 5px 6px rgba(34, 34, 34, 0.16);
    --shadow-8: 0px 12px 17px rgba(34, 34, 34, 0.12), 0px 5px 22px rgba(34, 34, 34, 0.08), 0px 7px 8px rgba(34, 34, 34, 0.16);
    --shadow-9: 0px 16px 24px rgba(34, 34, 34, 0.12), 0px 6px 30px rgba(34, 34, 34, 0.08), 0px 8px 10px rgba(34, 34, 34, 0.16);
    --shadow-10: 0px 24px 38px rgba(34, 34, 34, 0.12), 0px 9px 46px rgba(34, 34, 34, 0.08), 0px 11px 15px rgba(34, 34, 34, 0.16);
    --shadow-brand-1: 0px 0px 0px 1px rgb(114, 191, 68);
    --shadow-brand-2: 0px 0px 0px 4px rgba(202, 231, 185, 0.80);
    --shadow-success: 0px 0px 0px 4px rgba(197, 229, 204, 0.80);
    --shadow-warning: 0px 0px 0px 4px rgba(250, 235, 185, 0.80);
    --shadow-danger: 0px 0px 0px 4px rgba(255, 181, 171, 0.80);
    --shadow-info: 0px 0px 0px 4px rgba(193, 222, 252, 0.80);
    --shadow-discovery: 0px 0px 0px 4px rgba(203, 196, 237, 0.80);
    /**
* @tokens Shadows
* @presenter Shadow
*/
    --ds-shadow-1: var(--shadow-1);
    --ds-shadow-2: var(--shadow-2);
    --ds-shadow-3: var(--shadow-3);
    --ds-shadow-4: var(--shadow-4);
    --ds-shadow-5: var(--shadow-5);
    --ds-shadow-6: var(--shadow-6);
    --ds-shadow-7: var(--shadow-7);
    --ds-shadow-8: var(--shadow-8);
    --ds-shadow-9: var(--shadow-9);
    --ds-shadow-10: var(--shadow-10);
    --ds-shadow-brand-1: var(--shadow-brand-1);
    --ds-shadow-brand-2: var(--shadow-brand-2);
    --ds-shadow-success: var(--shadow-success);
    --ds-shadow-warning: var(--shadow-warning);
    --ds-shadow-danger: var(--shadow-danger);
    --ds-shadow-info: var(--shadow-info);
    --ds-shadow-discovery: var(--shadow-discovery);
    /**
  * @tokens-end
  */
}

:root {
    --overlay-1: rgba(0, 0, 0, 0.02);
    --overlay-2: rgba(0, 0, 0, 0.05);
    --overlay-3: rgba(34, 34, 34, 0.1);
    --overlay-4: rgba(34, 34, 34, 0.15);
    --overlay-5: rgba(34, 34, 34, 0.2);
    --overlay-6: rgba(34, 34, 34, 0.3);
    --overlay-7: rgba(34, 34, 34, 0.4);
    --overlay-8: rgba(34, 34, 34, 0.5);
    --overlay-9: rgba(34, 34, 34, 0.6);
    --overlay-10: rgba(34, 34, 34, 0.7);
    /**
* @tokens Overlays
*/
    --ds-overlay-1: var(--overlay-1);
    --ds-overlay-2: var(--overlay-2);
    --ds-overlay-3: var(--overlay-3);
    --ds-overlay-4: var(--overlay-4);
    --ds-overlay-5: var(--overlay-5);
    --ds-overlay-6: var(--overlay-6);
    --ds-overlay-7: var(--overlay-7);
    --ds-overlay-8: var(--overlay-8);
    --ds-overlay-9: var(--overlay-9);
    --ds-overlay-10: var(--overlay-10);
    /**
  * @tokens-end
  */
}

@use "sass:map";
@use "sass:meta";
/*******************/
/********SPACE******/
/*******************/
/**padding**/
/**margin**/
/*******************/
/********COLOR******/
/*******************/
/**color**/
/**background-color**/
/*******************/
/*****Typography****/
/*******************/
/**font-size**/
/**font-weight**/
/*animation mixin usage

// Define animation name, and properties
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
.element {
  @include animation('fade-out 5s 3');
}
*/
/*retina images mixin usage

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}
*/
/*gradient mixin usage
.foo {
  @include background-gradient(red, black, 'vertical');
}
*/
/*positioning element mixin usage
.foo {
 @include position(absolute, top right left);
}
*/
/*centering element mixin usage
.foo {
  @include center(both);
}
*/
/*clearfix mixin usage
.container-with-floated-children {
        @extend %clearfix;
}
*/
/*media queries usage

.site-header {
    @include screen('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}

*/
.btn {
    --ds-button-size: var(--ds-size-52);
    --ds-button-padding: 0 var(--ds-space-12);
    --ds-button-font-size: var(--ds-paragraph-md);
    --ds-button-font-size-mb: var(--ds-paragraph-std);
    --ds-button-font-family: var(--ds-font-family);
    --ds-button-font-weight: var(--ds-font-weight-active);
    --ds-button-line-height: var(--ds-line-height-default);
    --ds-button-primary-bg: var(--ds-color-bg-brand);
    --ds-button-primary-bg-hover: var(--brand-300);
    --ds-button-primary-bg-disabled: var(--ds-color-bg-disabled);
    --ds-button-primary-bg-pressed: var(--brand-600);
    --ds-button-primary-bg-focused: var(--brand-700);
    --ds-button-primary-text-default: var(--ds-color-text-inverse);
    --ds-button-primary-text-disabled: var(--ds-color-text-disabled);
    --ds-button-icon-margin: var(--ds-space-8);
    --ds-button-border-radius: var(--border-radius-10);
    --ds-button-transition: background-color .3s linear, color .3s linear, border-color .3s linear;
    --ds-button-loader-animation: btn-spin 3s linear infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--ds-button-font-family);
    font-weight: var(--ds-button-font-weight);
    line-height: var(--ds-button-line-height);
    border-radius: var(--ds-button-border-radius);
    height: var(--ds-button-size);
    padding: var(--ds-button-padding);
    font-size: var(--ds-button-font-size);
}

    .btn[disabled] {
        cursor: default;
    }

.btn--primary {
    background-color: var(--ds-button-primary-bg);
    color: var(--ds-button-primary-text-default);
}

    .btn--primary:not(.btn--loading):hover {
        background-color: var(--ds-button-primary-bg-hover);
    }

    .btn--primary:not(.btn--loading):active {
        background-color: var(--ds-button-primary-bg-pressed);
    }

    .btn--primary:not(.btn--loading)[disabled] {
        background-color: var(--ds-button-primary-bg-disabled);
        color: var(--ds-button-primary-text-disabled);
    }

        .btn--primary:not(.btn--loading)[disabled] .btn__icon {
            color: var(--ds-button-primary-text-disabled);
        }

        .btn--primary:not(.btn--loading)[disabled] svg path {
            fill: var(--ds-button-danger-text-disabled);
        }

    .btn--primary .btn__icon {
        color: var(--ds-button-primary-text-default);
    }

.btn--icon-left .btn__icon {
    margin-left: -3px;
    margin-right: var(--ds-button-icon-margin);
}

.btn--icon-right .btn__icon {
    order: 1;
    margin-right: -3px;
    margin-left: var(--ds-button-icon-margin);
}

.btn--icon {
    padding: 0;
    width: var(--ds-button-size);
    min-width: var(--ds-button-size);
    background-color: transparent;
}

    .btn--icon:not(.btn--icon:disabled):hover {
        background-color: var(--ds-color-bg-container-lighter);
    }

.btn--loading {
    cursor: default;
    pointer-events: none;
}

    .btn--loading .btn__icon {
        -webkit-animation: var(--ds-button-loader-animation);
        -moz-animation: var(--ds-button-loader-animation);
        -ms-animation: var(--ds-button-loader-animation);
        -o-animation: var(--ds-button-loader-animation);
        animation: var(--ds-button-loader-animation);
    }

@-webkit-keyframes btn-spin {
    100% {
        transform: rotate(360deg);
    }
}

@-moz-keyframes btn-spin {
    100% {
        transform: rotate(360deg);
    }
}

@-ms-keyframes btn-spin {
    100% {
        transform: rotate(360deg);
    }
}

@-o-keyframes btn-spin {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes btn-spin {
    100% {
        transform: rotate(360deg);
    }
}

@use "sass:map";
@use "sass:meta";
/*******************/
/********SPACE******/
/*******************/
/**padding**/
/**margin**/
/*******************/
/********COLOR******/
/*******************/
/**color**/
/**background-color**/
/*******************/
/*****Typography****/
/*******************/
/**font-size**/
/**font-weight**/
/*animation mixin usage

// Define animation name, and properties
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
.element {
  @include animation('fade-out 5s 3');
}
*/
/*retina images mixin usage

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}
*/
/*gradient mixin usage
.foo {
  @include background-gradient(red, black, 'vertical');
}
*/
/*positioning element mixin usage
.foo {
 @include position(absolute, top right left);
}
*/
/*centering element mixin usage
.foo {
  @include center(both);
}
*/
/*clearfix mixin usage
.container-with-floated-children {
        @extend %clearfix;
}
*/
/*media queries usage

.site-header {
    @include screen('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}

*/
.controller {
    --ds-controller-size: var(--ds-size-20);
    --ds-controller-font: var(--ds-font-weight-default) var(--ds-paragraph-std)/var(--ds-line-height-caption) var(--ds-font-family);
    --ds-controller-bg-default-light: var(--ds-color-bg-white);
    --ds-controller-bg-default-dark: var(--ds-color-bg-grey-dark);
    --ds-controller-bg-hover-light: var(--ds-color-bg-container-lighter);
    --ds-controller-bg-hover-dark: var(--ds-color-bg-grey);
    --ds-controller-bg-pressed-light: var(--ds-color-bg-container-light);
    --ds-controller-bg-pressed-dark: var(--ds-color-bg-grey-darker);
    --ds-controller-bg-focused: var(--ds-color-bg-container);
    --ds-controller-bg-disabled: var(--ds-color-bg-disabled);
    --ds-controller-selected-bg-default: var(--ds-color-bg-brand);
    --ds-controller-selected-bg-hover: var(--brand-300);
    --ds-controller-selected-bg-pressed: var(--ds-color-bg-brand-dark);
    --ds-controller-selected-bg-focused: var(--ds-color-bg-brand-darker);
    --ds-controller-selected-bg-disabled: var(--ds-color-bg-disabled);
    --ds-controller-mark-light: var(--ds-color-bg-white);
    --ds-controller-mark-dark: var(--ds-color-icon-disabled);
    --ds-controller-border-color-default: var(--ds-color-border-primary);
    --ds-controller-border-color-focused: var(--grey-500);
    --ds-controller-border-color-disabled: var(--ds-color-border-disabled);
    --ds-controller-border: 1px solid;
    --ds-controller-border-radius-sm: var(--ds-border-radius-xs);
    --ds-controller-border-radius-lg: var(--ds-border-radius-xl);
    --ds-controller-label-padding: 0 0 0 var(--ds-space-8);
    --ds-controller-transition: background-color .3s linear, border .3s linear;
    display: -webkit-inline-box;
    display: -moz-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    cursor: pointer;
}

    .controller input[type="checkbox"],
    .controller input[type="radio"] {
        -webkit-appearance: none;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        position: relative;
        width: var(--ds-controller-size);
        min-width: var(--ds-controller-size);
        height: var(--ds-controller-size);
        background-color: var(--ds-controller-bg-default-light);
        border-radius: var(--ds-controller-border-radius-sm);
        border: var(--ds-controller-border) var(--ds-controller-border-color-default);
        transition: var(--ds-controller-transition);
    }

        .controller input[type="checkbox"]:hover,
        .controller input[type="radio"]:hover {
            background-color: var(--ds-controller-bg-hover-light);
        }

        .controller input[type="checkbox"]:before,
        .controller input[type="radio"]:before {
            content: '';
            width: 8px;
            height: 8px;
            border-radius: 50%;
        }

        .controller input[type="checkbox"]:checked,
        .controller input[type="radio"]:checked {
            background-color: var(--ds-controller-selected-bg-default);
            border-color: var(--ds-controller-selected-bg-default);
            color: var(--ds-controller-mark-light);
        }

            .controller input[type="checkbox"]:checked:before,
            .controller input[type="radio"]:checked:before {
                background-color: var(--ds-controller-selected-bg-default);
            }

.controller__right {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: var(--ds-controller-label-padding);
}

@media (max-width: 576px) {
    .controller__right {
        max-width: calc(100% - var(--ds-size-16));
    }
}

@media (min-width: 577px) {
    .controller__right {
        margin-top: var(--ds-space-12);
    }
}

.controller__label {
    font: var(--ds-controller-font);
    word-break: break-word;
}

    .controller__label sup {
        margin-left: 2px;
    }

.controller--radio input[type="radio"] {
    border-radius: var(--ds-controller-border-radius-lg);
}

    .controller--radio input[type="radio"]:checked {
        background-color: var(--ds-controller-mark-light);
    }

        .controller--radio input[type="radio"]:checked:hover, .controller--radio input[type="radio"]:checked:focus, .controller--radio input[type="radio"]:checked:active, .controller--radio input[type="radio"]:checked:visited {
            background-color: var(--ds-controller-mark-light);
        }

.divider {
    --ds-divider-bg-color: var(--ds-color-border-secondary);
    border: none;
}

.divider--horizontal {
    height: 1px;
    width: 100%;
}

.divider--vertical {
    width: 1px;
    height: 100%;
}

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

.divider--secondary {
    background: repeating-linear-gradient(90deg, var(--ds-divider-bg-color), var(--ds-divider-bg-color) 4px, transparent 6px, transparent 8px);
}

    .divider--secondary.divider--vertical {
        background: repeating-linear-gradient(0deg, var(--ds-divider-bg-color), var(--ds-divider-bg-color) 4px, transparent 6px, transparent 8px);
    }

@use "sass:map";
@use "sass:meta";
/*******************/
/********SPACE******/
/*******************/
/**padding**/
/**margin**/
/*******************/
/********COLOR******/
/*******************/
/**color**/
/**background-color**/
/*******************/
/*****Typography****/
/*******************/
/**font-size**/
/**font-weight**/
/*animation mixin usage

// Define animation name, and properties
@include keyframes(fade-out) {
  0% { opacity: 1; }
  90% { opacity: 0; }
}
.element {
  @include animation('fade-out 5s 3');
}
*/
/*retina images mixin usage

div.logo {
  background: url("logo.png") no-repeat;
  @include image-2x("logo2x.png", 100px, 25px);
}
*/
/*gradient mixin usage
.foo {
  @include background-gradient(red, black, 'vertical');
}
*/
/*positioning element mixin usage
.foo {
 @include position(absolute, top right left);
}
*/
/*centering element mixin usage
.foo {
  @include center(both);
}
*/
/*clearfix mixin usage
.container-with-floated-children {
        @extend %clearfix;
}
*/
/*media queries usage

.site-header {
    @include screen('tablet-wide') {
        padding-top: 4rem;
        font-size: 2.4rem;
    }
}

*/
html {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background: var(--ds-color-bg-blue-light) url("/Content/Images/main-bg.png") left no-repeat;
    background-size: contain;
}

@media (max-width: 1024px) {
    body {
        background-size: cover;
    }
}

@media (max-width: 576px) {
    body {
        padding: 0;
        background: none;
    }
}

form {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}

.wrapper {
    width: 100%;
    max-width: 540px;
}

@media (max-width: 576px) {
    .wrapper {
        max-width: initial;
        height: 100%;
    }
}

.wrapper__inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-radius: var(--border-radius-40);
    overflow: hidden;
    box-shadow: 0 6px 140px -2px #1E262F0F;
}

@media (max-width: 576px) {
    .wrapper__inner {
        height: 100%;
        box-shadow: none;
        border-radius: 0;
    }
}

.wrapper__left {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    flex: 1;
    padding: var(--ds-space-40);
    background: linear-gradient(180deg, #72BF44 3%, #9CD27C 100%);
    border-radius: var(--border-radius-40) var(--border-radius-40) 0 0;
}

@media (max-width: 1024px) {
    .wrapper__left {
        border-radius: var(--ds-border-radius-lg) var(--ds-border-radius-lg) 0 0;
    }
}

@media (max-width: 576px) {
    .wrapper__left {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        padding: var(--ds-space-24);
        border-radius: 0;
    }
}

.wrapper__left__content {
    margin-top: var(--ds-space-40);
}

@media (max-width: 576px) {
    .wrapper__left__content {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        flex: 1;
    }
}

.wrapper__right {
    flex: 1;
    padding: var(--ds-space-40);
    background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
    border-radius: 0 0 var(--border-radius-40) var(--border-radius-40);
}

@media (max-width: 1024px) {
    .wrapper__right {
        border-radius: 0 0 var(--ds-border-radius-lg) var(--ds-border-radius-lg);
    }
}

@media (max-width: 576px) {
    .wrapper__right {
        flex: initial;
        padding: var(--ds-space-32) var(--ds-space-24);
        border-radius: 0;
    }
}

.wrapper__right .heading-xsmall {
    margin-bottom: var(--ds-space-40);
}

@media (max-width: 576px) {
    .wrapper__right .heading-xsmall {
        margin-bottom: var(--ds-space-28);
        font-size: var(--font-size-20);
    }
}

.wrapper__logo {
    line-height: 0;
    height: var(--ds-size-48);
    text-align: center;
}

@media (max-width: 576px) {
    .wrapper__logo {
        height: var(--ds-size-32);
    }
}

.wrapper__logo img {
    max-height: 100%;
    max-width: 100%;
}

.payment-type {
    width: 100%;
}

.payment-type__item {
    border: 1px solid #D9DEE3;
    padding: var(--ds-space-20);
    border-radius: var(--ds-border-radius-sm);
    margin-bottom: var(--ds-space-24);
    position: relative;
}

    .payment-type__item:last-child {
        margin-bottom: 0;
    }

    .payment-type__item:not(.disabled):hover {
        background-color: var(--ds-color-bg-container-lighter);
        cursor: pointer;
    }

@media (max-width: 576px) {
    .payment-type__item {
        margin-bottom: var(--ds-space-20);
    }
}

.payment-type__item__inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.payment-type__item__label {
    flex: 1;
    padding-right: var(--ds-space-12);
    font: var(--font-weight-600) var(--font-size-18) var(--font-family-primary);
}

.payment-type__item__cards {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 8px;
    margin-right: var(--ds-space-12);
}

    .payment-type__item__cards img {
        border-radius: var(--border-radius-8);
        height: 28px;
    }

.payment-type__item__icon {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: var(--ds-size-24);
    height: var(--ds-size-24);
}

.payment-type__item.disabled .payment-type__item__inner {
    opacity: 0.5;
}

.payment-type__item.disabled .payment-type__item__label {
    color: var(--grey-400);
}

.payment-type__item.disabled img {
    opacity: 0.5;
}

.payment-type__item.disabled.with-tooltip:hover .tooltip {
    display: block;
}

.content-info {
    width: 100%;
    background-color: var(--ds-color-bg-white);
    padding: var(--ds-space-40);
    border-radius: var(--ds-border-radius-lg);
}

@media (max-width: 576px) {
    .content-info {
        padding: var(--ds-space-24);
        border-radius: var(--border-radius-28);
    }
}

.content-info--sm {
    padding: var(--ds-space-16);
    min-height: var(--ds-size-80);
    border-radius: var(--ds-border-radius-md);
}

.loading {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
}

.loading__inner {
    text-align: center;
}

.loading__spinner {
    width: var(--ds-size-100);
    height: var(--ds-size-100);
    -webkit-animation: spin 1s linear infinite;
    /* Safari */
    animation: spin 1s linear infinite;
    margin: 0 auto var(--ds-space-40);
}

@media (max-width: 576px) {
    .loading__spinner {
        margin-bottom: var(--ds-space-32);
    }
}

@media (max-width: 350px) {
    .loading p.body-large {
        font-size: 18px !important;
    }
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.account-info {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    width: 100%;
}

    .account-info .heading {
        letter-spacing: -0.5px;
    }

.account-info__row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media (max-width: 350px) {
    .account-info__row .text-for-mb {
        font-size: 14px !important;
    }
}

.account-info__divider {
    margin: var(--ds-space-40) 0;
}

@media (max-width: 576px) {
    .account-info__divider {
        margin: var(--ds-space-32) 0;
    }
}

.apple-pay-button {
    --apple-pay-button-width: 100%;
    --apple-pay-button-height: 52px;
    --apple-pay-button-border-radius: 10px;
    --apple-pay-button-padding: 0px 0px;
    --apple-pay-button-box-sizing: border-box;
}

.message__icon {
    display: block;
    margin: 0 auto var(--ds-space-40);
}

@media (max-width: 576px) {
    .message__icon {
        margin-bottom: var(--ds-space-32);
    }
}

.message__btn {
    margin-top: var(--ds-space-40);
}

@media (max-width: 576px) {
    .message__btn {
        margin-top: var(--ds-space-32);
    }
}

.tooltip {
    display: none;
    background-color: var(--grey-800);
    text-align: center;
    border-radius: var(--border-radius-8);
    padding: var(--ds-space-8);
    position: absolute;
    z-index: 1;
    top: -48px;
    min-height: 36px;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    max-width: 100%;
}

    .tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: var(--grey-800) transparent transparent transparent;
    }

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