:root {
        --accent-fill-active: #6cAAe9;
        --accent-fill-hover: #84bcf4;

        --content-color-link: #0265D2;
        --content-color-primary: #212121;
        --content-color-secondary: #6B6B6B;
        --content-color-constant: #FFFFFF;
        --background-color-primary: #FFFFFF;
        --background-color-secondary: #F9F9F9;
        --background-color-tertiary: #F2F2F2;
        --highlight-background-color-primary: #EDEDED;
        --background-color-checkbox-selected: #0265d2;
        --background-color-error: #FFEBE7;
        --background-color-info: #E7F0FF;
        --background-color-button-primary: #FF6C37;
        --background-color-button-primary-hover: #E05320;
        --background-color-button-primary-disabled: #FFB091;
        --border-color-subdued: #F2F2F2;
        --border-color-default: #EDEDED;
        --border-color-strong: #E6E6E6;
        --border-color-input: #A6A6A6;
        --border-color-input-focus: #74AEF6;
        --border-color-input-disabled: #E6E6E6;
        --border-color-input-readonly: #CDCDCD;
        --border-color-success: #0CBB52;
        --border-color-error: #EB2013;
        --border-color-button-secondary: rgba(0, 0, 0, 0.16);
        --border-color-button-secondary-hover: #A6A6A6;
        --text-size-xs: 10px;
        --text-size-s: 11px;
        --text-size-m: 12px;
        --text-size-l: 14px;
        --text-size-xl: 16px;
        --text-size-xxl: 18px;
        --text-size-xxxl: 21px;
        --text-weight-regular: 400;
        --text-weight-bold: 600;
        --line-height-xs: 12px;
        --line-height-s: 16px;
        --line-height-m: 20px;
        --line-height-l: 24px;
        --line-height-xl: 28px;
        --line-height-xxl: 32px;
        --line-height-xxxl: 40px;
        --spacing-xs: 4px;
        --spacing-s: 8px;
        --spacing-m: 12px;
        --spacing-l: 16px;
        --spacing-xl: 24px;
        --spacing-xxl: 32px;
        --spacing-xxxl: 48px;
        --border-radius-s: 2px;
        --border-radius-default: 4px;
        --border-radius-l: 8px;
        --border-radius-full: 999px;
        --shadow-toast: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-card: 0 0 0 1px rgba(0, 0, 0, .04), 0 4px 16px -4px rgba(0, 0, 0, .16);
        --shadow-popover: 0 0 1px rgba(0, 0, 0, .32), 0px 2px 16px -4px rgba(0, 0, 0, 0.16);
    }

    .logo svg{
        width: 150px;
        height: auto;
    }

.mt-20 {
    margin-top: 20px;
}
    
    .link, a {
        text-decoration: none;
        color: var(--content-color-link) !important;
        cursor:pointer
    }
       
    .link:hover, a:hover {
        color: var(--content-color-link);
    }

    .flex {
        display:flex
    }

    .justify-center {
        justify-content:center
    }

    .input-label {
        display: block;
        margin-bottom:var(--spacing-xs)
    }

    input{
        background-color: var(--background-color-primary);
        border: 1px solid var(--border-color-input);
        border-radius: var(--border-radius-default);
        display: block;
        font-size: var(--text-size-m);
        height: 32px;
        line-height: var(--line-height-m);
        padding: 5px var(--spacing-m);
        width: 100%;
        transition: border .2s ease-in-out, box-shadow .2s ease-in-out;
    }
        
    .card {
        background-color: var(--background-color-primary);
        box-shadow: var(--shadow-card);
        border-radius: var(--border-radius-l);
        margin: var(--spacing-xxl) auto var(--spacing-xl);
        padding: var(--spacing-xxl);
        position:relative
    }

    @media screen and (min-width: 720px) {
        .card {
            margin: var(--spacing-xxxl) auto var(--spacing-xxl);
            padding:var(--spacing-xxl)
        }
    }

    .input-group {
        margin: var(--spacing-l) 0 0;
        position:relative
    }

    .input-label {
        display: block;
        margin-bottom:var(--spacing-xs)
    }

    .input-field {
        background-color: var(--background-color-primary);
        border: 1px solid var(--border-color-input);
        border-radius: var(--border-radius-default);
        display: block;
        font-size: var(--text-size-m);
        height: 32px;
        line-height: var(--line-height-m);
        padding: 5px var(--spacing-m);
        width: 100%;
        transition:border .2s ease-in-out, box-shadow .2s ease-in-out
    }

    .input-field.is-disabled, .input-field:disabled {
        background-color: var(--background-color-secondary);
        border-color: var(--border-color-input-disabled);
        cursor:not-allowed
    }

    .input-field.is-disabled::hover, .input-field:disabled::hover {
        border-color:var(--border-color-input-disabled)
    }

    .input-field.has-error, .text-area.has-error {
        border-color:var(--border-color-error)
    }

    .input-field:focus-visible, .input-field:focus-visible:hover, .text-area:focus-visible, .text-area:focus-visible:hover {
        border-color: var(--border-color-input-focus);
        box-shadow: 0 0 0 2px var(--border-color-input-focus);
        outline:0
    }

    .abr-form-group {
        margin-bottom: 16px;
        position:relative
    }

    .abr-form-group:last-of-type {
        margin-bottom:0
    }

    .heading-6 {
        color: var(--content-color-secondary);
        font-size: var(--text-size-m);
        font-weight: var(--text-weight-bold);
        line-height: var(--line-height-s);
        margin:0
    }


    .btn {
        align-items: center;
        background-color: transparent;
        border: none;
        border-radius: var(--border-radius-default);
        color: var(--content-color-primary);
        cursor: pointer;
        display: flex;
        font-size: var(--text-size-xl);
        justify-content: center;
        line-height: var(--line-height-m);
        padding: 6px var(--spacing-l);
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width:100%
    }

    .btn:hover {
        color: var(--content-color-primary);
        text-decoration:none
    }

    .btn:focus {
        color:var(--content-color-primary)
    }

    .btn-primary {
        background-color: var(--accent-fill-active);
        color: var(--content-color-constant);
        font-weight: var(--text-weight-bold);
        transition:background-color .2s ease-in-out
    }

    .btn-primary:hover {
        background-color: var(--accent-fill-hover);
        color:var(--content-color-constant)
    }

    .btn-primary:focus {
        color:var(--content-color-constant)
    }
        
    @media screen and (min-width: 420px) {
        .wd-4 {
            width:366px
        }
    }

    @media screen and (min-width: 720px) {
        .wd-6 {
            width:552px
        }

        .wd-8 {
            width:744px
        }
    }

    .wd-80 {
        width:80%
    }

    .spacing-top-xs {
        margin-top:var(--spacing-xs)
    }

    .spacing-top-s {
        margin-top:var(--spacing-s)
    }

    .spacing-top-m {
        margin-top:var(--spacing-m)
    }

    .spacing-top-l {
        margin-top:var(--spacing-l)
    }

    .spacing-top-xl {
        margin-top:var(--spacing-xl)
    }

    .spacing-top-xxl {
        margin-top:var(--spacing-xxl)
    }

    .text-center {
        text-align:center
    }