@font-face
{
    font-family: "Roboto-Bold";
    font-weight: bold;
    font-weight: bolder;
    src: url("../fonts/roboto/Roboto-Bold.ttf");
}

@font-face
{
    font-family: "Roboto-Regular";
    src: url("../fonts/roboto/Roboto-Regular.ttf");
}

@font-face
{
    font-family: "Roboto-Light";
    src: url("../fonts/roboto/Roboto-Light.ttf");
}

@font-face
{
    font-family: "Roboto-Thin";
    src: url("../fonts/roboto/Roboto-Thin.ttf");
}

@font-face
{
    font-family: "SF-Pro-Light";
    src: url("../fonts/San Francisco Pro Text/SFProText-Light.ttf")
}

@font-face
{
    font-family: "Podkova";
    src: url("../fonts/Podkova/Podkova-VariableFont_wght.ttf");
}

@font-face
{
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-VariableFont_opsz,wght.ttf");
}

:root
{
    --br-0: 0;
    --br-xs: 4px;
    --br-s: 8px;
    --br-m: 12px;
    --br-l: 16px;
    --br-xl: 20px;
    --br-2xl: 24px;
    --br-3xl: 32px;
    --br-4xl: 40px;
    --br-6xl: 56px;
    --br-7xl: 64px;
}
/* Общие стили для всех шрифтов */

p,
.f-12-400,
.f-14-400,
.f-14-500,
.f-15-400,
.f-16-400,
.f-16-500,
.f-16-600,
.f-17-600,
.f-17-400,
.f-18-400,
.f-18-500,
.f-18-600,
.f-20-400,
.f-20-500,
.f-22-500,
.f-24-400,
.f-24-500,
.f-24-600,
.f-28-600,
.f-30-500,
.f-32-400,
.f-32-500,
.f-36-500,
.f-40-500,
.f-48-500,
label,
.label,
.f-13,
.f-15,
.f-15-gray,
.f-17-bold,
.f-17-blue,
.f-20-bold,
.f-20-bold-500
{
    font-family: 'Inter', sans-serif;
    margin: 0 !important;
}

/* Общие стили для одинаковых line-height и letter-spacing */
.f-14,
.f-15,
.f-16,
.f-17
{
    line-height: 20px;
    letter-spacing: -0.24px;
}

.f-18,
.f-20,
.f-24
{
    letter-spacing: -0.5px;
}

.f-17-600,
.f-17-400,
.f-17-blue
{
    letter-spacing: -0.41px;
    line-height: 22px;
}

.f-20-bold,
.f-20-bold-500
{
    font-size: 1.333em;
    font-weight: 600;
    color: var(--text-primary);
}

/* Конкретные размеры и веса */
.f-12-400
{
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
}

.f-14-400
{
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.f-14-500
{
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.f-15-400
{
    font-size: 15px;
    font-weight: 400;
}

.f-16-400
{
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.f-16-500
{
    font-size: 16px;
    font-weight: 500;
}

.f-16-600
{
    font-size: 16px;
    font-weight: 600;
}

.f-17-400
{
    font-size: 17px;
    font-weight: 400;
}

.f-17-600
{
    font-size: 17px;
    font-weight: 600;
}

.f-18-400
{
    font-size: 18px;
    font-weight: 400;
}

.f-18-500
{
    font-size: 18px;
    font-weight: 500;
}

.f-18-600
{
    font-size: 18px;
    font-weight: 600;
}

.f-18-600
{
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.f-20-400
{
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.f-20-500
{
    font-size: 20px;
    font-weight: 500;
}

.f-22-500
{
    font-size: 22px;
    font-weight: 500;
}

.f-24-400
{
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
}

.f-24-500
{
    font-size: 24px;
    font-weight: 500;
    line-height: 24px;
}

.f-24-600
{
    font-size: 24px;
    font-weight: 600;
    line-height: 24px;
}

.f-28-600
{
    font-size: 28px;
    font-weight: 600;
    line-height: 35px;
}

.f-30-500
{
    font-size: 30px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
}

.f-32-400
{
    font-size: 32px;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -1px;
}

.f-32-500
{
    font-size: 32px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
}

.f-36-500
{
    font-size: 36px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
}

.f-40-500
{
    font-size: 40px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
}

.f-48-500
{
    font-size: 48px;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: -1px;
}

.f-crope-1,
.f-crope-2,
.f-crope-3
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.f-crope-1
{
    line-clamp: 1;
    -webkit-line-clamp: 1;
}

.f-crope-2
{
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.f-crope-3
{
    line-clamp: 3;
    -webkit-line-clamp: 3;
}

/* Дополнительные стили для цветов */
.text-black
{
    color: var(--text-primary);
}

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

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

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

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

.text-negative
{
    color: var(--text-negative);
}

.text-positive
{
    color: var(--text-positive);
}

/* Конкретные стили для текста */
label
{
    /*font-weight: 600;*/
    font-size: 1em;
    color: var(--text-primary);
}

.label
{
    font-weight: 400;
    font-size: 1.133em;
    color: var(--text-primary);
}

.f-13
{
    font-size: 0.867em;
    line-height: 18px;
    letter-spacing: -0.08px;
    color: var(--text-primary);
}

.f-15
{
    font-size: 1em;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: var(--text-brand);
}

.f-15-gray
{
    font-size: 1em;
    line-height: 20px;
    letter-spacing: -0.24px;
    color: var(--text-tertiary);
}

.f-17-bold
{
    font-weight: 600;
    color: var(--text-primary);
}

.f-17-blue
{
    font-size: 1.133em;
    color: var(--text-brand);
}