:root {
    --font-size-h5: 16px;
    --font-size: 13px;
    --font-size-bigger: 15px;
    --font-size-sm: 11px;
}

:root {
    --color-bg-bar: #1E222D;
    --color-bg-bar-hover: rgba(2, 4, 9, 0.2);

    --color-tg: #26A5E4;
    --color-vk: #2787F5;
    --color-ok: #F7931E;
    --color-white-hover: #f8f8f8;
    --color-headline: #292E36;
    --color-text: #1f2226;
    --color-text-hover: rgba(35, 43, 57, 0.6);
    --color-text-muted: #818A99;
    --color-text-placeholder: #48505B;
    --color-text-eq-placeholder: #9b9fa5;

    --color-im-sent-: #536882;
    --color-im-received: #404E62;
    --color-bg-im-messages: #2C343F;
    --color-fb-message: #739cff;
    --color-fb-if: #facc48;
    --color-fb-action: #429122;
    --color-fb-timer: rgba(240, 132, 5, 1);
    --color-fb-note: #FEF6DE;
    --color-selection-primary: rgba(27, 110, 213, 0.5);
    --color-selection-lighter: rgba(27, 110, 213, 0.3);
    --color-fb-bg-part: rgba(255, 255, 255, .75);

    --color-fb-endpoint-hover: #ffc835;
    --color-fb-connection-primary-hover: rgb(28, 88, 189);

    --color-bg-fb-action: rgba(216, 248, 225, 1);
    --color-bg-fb-if: rgba(249, 245, 200, 1);

    --color-primary: #3B7BF6;
    --color-primary-focus: #226EE0;
    --color-primary-hover: #226EE0;
    --color-secondary: rgba(249, 249, 249, 1);
    --color-secondary-hover: rgba(225, 225, 225, 1);
    --color-success: rgba(3, 144, 29, 1);
    --color-success-hover: rgba(2, 101, 21, 1);
    --color-destructive: rgba(224, 94, 102, 1);
    --color-destructive-hover: rgba(177, 61, 68, 1);
    --color-destructive-new: #F22F52;
    --color-destructive-light-hover: #FFF0F2;
    --color-primary-light: #F0F6FF;
    --color-primary-light-hover: #D9E8FF;

    --color-bg-container: #f2f4f7;
    --color-bg-fb-block-item: rgba(247, 248, 249, .7);
    --color-small-primary-shadow: rgba(0, 0, 0, 0.2);

    --color-border: #DDD;
    --border-radius-sm: 8px;
    --border-radius: 12px;
    --block-box-shadow: 0 2px 20px 1px rgba(132, 139, 200, 0.1);
    --block-box-shadow-hover: 0 2px 20px 1px rgba(132, 139, 200, 0.2);
    --thm-box-shadow: 0 2rem 3rem rgba(132, 139, 200, .018);
    --thm-box-shadow-hover: 0 2rem 3rem rgba(132, 139, 200, .15);
    --thm-box-shadow-primary: 0 5px 16px rgba(8, 74, 232, 0.65);
    --neumorphism-shadow: 10px 10px 21px #d3d3d6, -10px -10px 21px #fff;

    --height-base: 34px;
    --im-input-height: 3rem;
}

@font-face {
    font-family: 'Inter';
    font-weight: 100;
    src: url('../../fonts/Inter/Inter-Thin.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 200;
    src: url('../../fonts/Inter/Inter-ExtraLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 300;
    src: url('../../fonts/Inter/Inter-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 400;
    src: url('../../fonts/Inter/Inter-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 500;
    src: url('../../fonts/Inter/Inter-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 600;
    src: url('../../fonts/Inter/Inter-SemiBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 700;
    src: url('../../fonts/Inter/Inter-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 800;
    src: url('../../fonts/Inter/Inter-ExtraBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Inter';
    font-weight: 900;
    src: url('../../fonts/Inter/Inter-Black.ttf') format('truetype');
}

:root {
    --thm-font-family: "Inter", "Manrope", "Open Sans", sans-serif;
}

html,
body {
    height: 100%;
    scrollbar-width: thin;
}

body {
    font-family: "Inter", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--font-size);
    color: var(--color-text);
    background-color: #EDEEF0;
}

select > option {
    font-family: var(--thm-font-family);
}

.no-focus *:focus {
    outline: 0 !important;
}

a {
    color: var(--color-primary);
    -webkit-transition: color 0.12s ease-out;
    transition: color 0.12s ease-out;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0;
    font-family: "Inter", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}

a {
    text-decoration: none;
    color: var(--color-primary);
    -webkit-transition: color 0.12s ease-out;
    transition: color 0.12s ease-out;
}

a.link-effect {
    position: relative;
}

a.link-effect:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #3169b1;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.12s ease-out;
    transition: transform 0.12s ease-out;
}

a:hover,
a:focus {
    color: var(--color-primary-hover);
    text-decoration: none;
}

a:hover.link-effect:before,
a:focus.link-effect:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
}

a:active {
    color: #5c90d2;
}

a.inactive {
    cursor: not-allowed;
}

a.inactive:focus {
    background-color: transparent !important;
}

.btn {
    font-size: var(--font-size);
}

.btn:focus {
    box-shadow: unset;
}

.btn, .btn-lg {
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    transition: .2s linear;
    line-height: 18px;
}

.btn-lg {
    font-size: var(--font-size-h5);
    padding: 20px 40px;
}

.btn > [class^="bi"] {
    position: relative;
    bottom: -1px;
    font-size: var(--font-size-bigger);
    line-height: var(--font-size-bigger);
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    color: #fff;
    border-color: var(--color-primary-hover);
}

.btn-primary:active, .btn-primary:focus {
    background: var(--color-primary-focus);
    color: #fff;
    border-color: var(--color-primary-focus);
}

.wrapper {
    background: #fff;
    box-shadow: var(--thm-box-shadow);
    border-radius: var(--border-radius-sm);
    padding-bottom: 20px;
    margin: 20px 0;
    overflow: hidden;
}

.banner {

}

.div {
    padding: 12px 20px;
}

.title {
    font-size: 20px;
    line-height: 1.4;
    font-weight: 600;
}

.description {
    word-break: break-word;
    font-size: 14px;
    line-height: 1.5em;
    max-width: 500px;
}

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

.link-dark-primary:hover, .link-dark-primary:focus, .link-dark-primary:active {
    color: var(--color-primary);
}

.btn-messengers {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 0;
    color: white;
}

.btn-messengers:hover, .btn-messengers:focus, .btn-messengers:active {
    border: 0;
    color: white;
    opacity: .9;
}

.btn-vk {
    background: var(--color-vk);
}

.btn-tg {
    background: var(--color-tg);
}

.btn-ok {
    background: var(--color-ok);
}

.width-adaptive {
    width: 100%;
}

@media (min-width: 768px) {
    .width-adaptive {
        width: unset;
    }
}

.adaptive-el-container {
    margin: -.25em;
}

.adaptive-el {
    margin: .25em;
}

.emojione {
    width: 16px;
}