.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--transition-fast);
}

.icon.s-right-arrow {
    width: 18px;
    height: 16px;
    mask-image: url("../../assets/icons/right-arrow.svg");
}

.icon.right-arrow {
    width: 20px;
    height: 18px;
    mask-image: url("../../assets/icons/right-arrow.svg");
}

.icon.user {
    width: 16px;
    height: 16px;
    mask-image: url("../../assets/icons/user.svg");
}

.icon.telegram {
    width: 20px;
    height: 17px;
    mask-image: url("../../assets/icons/telegram.svg");
}

.icon.max {
    width: 20px;
    height: 20px;
    mask-image: url("../../assets/icons/max.svg");
}

.icon.vk {
    width: 20px;
    height: 13px;
    mask-image: url("../../assets/icons/vk.svg");
}

.icon.fund {
    width: 60px;
    height: 30px;
    mask-image: url(../../assets/icons/fund.svg);
}

.icon.chart {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/chart.svg);
}

.icon.list-check {
    width: 36px;
    height: 40px;
    mask-image: url(../../assets/icons/list-check.svg);
}

.icon.trophy {
    width: 39px;
    height: 40px;
    mask-image: url(../../assets/icons/trophy.svg);
}

.icon.registration {
    width: 32px;
    height: 40px;
    mask-image: url(../../assets/icons/registration.svg);
}

.icon.diagnostic {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/diagnostic.svg);
}

.icon.level {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/level.svg);
}

.icon.training {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/training.svg);
}

.icon.eye {
    width: 20px;
    height: 15px;
    mask-image: url(../../assets/icons/eye.svg);
}

.icon.check {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/check.svg);
}

.icon.light-bulb {
    width: 16px;
    height: 20px;
    mask-image: url(../../assets/icons/light-bulb.svg);
}

.icon.top-right-arrow {
    width: 16px;
    height: 14px;
    mask-image: url(../../assets/icons/top-right-arrow.svg);
}

.icon.horizontal-chart {
    width: 57px;
    height: 60px;
    mask-image: url(../../assets/icons/horizontal-chart.svg);
}

.icon.chart-small {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/chart-small.svg);
}

.icon.schedule {
    width: 57px;
    height: 60px;
    mask-image: url(../../assets/icons/schedule.svg);
}

.icon.star {
    width: 60px;
    height: 60px;
    mask-image: url(../../assets/icons/star.svg);
}

.icon.quotes {
    width: 27px;
    height: 19px;
    mask-image: url(../../assets/icons/quote.svg);
}

.icon.history {
    width: 29px;
    height: 29px;
    mask-image: url(../../assets/icons/history.svg);
}

.icon.repeat {
    width: 29px;
    height: 29px;
    mask-image: url(../../assets/icons/repeat.svg);
}

.icon.chart-up {
    width: 27px;
    height: 24px;
    mask-image: url(../../assets/icons/chart-up.svg);
}

.icon.dark-more {
    width: 30px;
    height: 30px;
    color: var(--primary-text-secondary);
    mask-image: url(../../assets/icons/dark-more.svg);
}

.icon.whatsapp {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/whatsapp.svg);
}

.icon.close {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/close.svg);
}

.icon.recommendation-chart {
    width: 49px;
    height: 49px;
    mask-image: url(../../assets/icons/recommendation-chart.svg);
}

.icon.copy {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/copy.svg);
}

.icon.next {
    width: 20px;
    height: 17px;
    mask-image: url(../../assets/icons/next.svg);
}

.icon.book-2 {
    width: 19px;
    height: 24px;
    mask-image: url(../../assets/icons/book-2.svg);
}

.icon.document-text {
    width: 22px;
    height: 24px;
    mask-image: url(../../assets/icons/document-text.svg);
}

.icon.vertical-chart {
    width: 24px;
    height: 24px;
    mask-image: url(../../assets/icons/vertical-chart.svg);
}

.icon.menu {
    width: 25px;
    height: 16px;
    mask-image: url(../../assets/icons/menu.svg);
}

.icon.chevron-down {
    width: 17px;
    height: 9px;
    mask-image: url(../../assets/icons/chevron-down.svg);
}

.icon.chevron-right {
    width: 9px;
    height: 17px;
    mask-image: url(../../assets/icons/chevron-right.svg);
}

.icon.parents {
    width: 24px;
    height: 26px;
    mask-image: url(../../assets/icons/parents.svg);
}

.icon.homepage {
    width: 24px;
    height: 23px;
    mask-image: url(../../assets/icons/homepage.svg);
}

.icon.school {
    width: 24px;
    height: 26px;
    mask-image: url(../../assets/icons/school.svg);
}

.icon.trainer {
    width: 24px;
    height: 26px;
    mask-image: url(../../assets/icons/trainer.svg);
}

.icon.bot {
    width: 24px;
    height: 24px;
    mask-image: url(../../assets/icons/bot.svg);
}

.icon.plans {
    width: 24px;
    height: 24px;
    mask-image: url(../../assets/icons/plans.svg);
}

.icon.help {
    width: 24px;
    height: 24px;
    mask-image: url(../../assets/icons/help.svg);
}

.icon.demo {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/demo.svg);
}

.icon.rocket {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/rocket.svg);
}

.icon.compas {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/compas.svg);
}

.icon.register {
    width: 20px;
    height: 18px;
    mask-image: url(../../assets/icons/register.svg);
}

.icon.notebook-square {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/notebook-square.svg);
}

.icon.diploma {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/diploma.svg);
}

.icon.medal-star {
    width: 40px;
    height: 38px;
    mask-image: url(../../assets/icons/medal-star.svg);
}

.icon.users-group-rounded {
    width: 40px;
    height: 32px;
    mask-image: url(../../assets/icons/users-group-rounded.svg);
}

.icon.infinity {
    width: 30px;
    height: 14px;
    mask-image: url(../../assets/icons/infinity.svg);
}

.icon.list {
    width: 24px;
    height: 24px;
    mask-image: url(../../assets/icons/list.svg);
}

.icon.headphones {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/headphones.svg);
}

.icon.point-settings {
    width: 30px;
    height: 27px;
    mask-image: url(../../assets/icons/point-settings.svg);
}

.icon.zap {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/zap.svg);
}

.icon.file-check {
    width: 30px;
    height: 33px;
    mask-image: url(../../assets/icons/file-check.svg);
}

.icon.open-book {
    width: 30px;
    height: 27px;
    mask-image: url(../../assets/icons/open-book.svg);
}

.icon.files {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/files.svg);
}

.icon.timer {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/timer.svg);
}

.icon.chart-horizontal {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/chart-horizontal.svg);
}

.icon.dumbell {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/dumbell.svg);
}

.icon.token {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/token.svg);
}

.icon.file-question {
    width: 30px;
    height: 30px;
    mask-image: url(../../assets/icons/file-question.svg);
}

.icon.stopwatch {
    width: 25px;
    height: 30px;
    mask-image: url(../../assets/icons/stopwatch.svg);
}

.icon.user-fill {
    width: 20px;
    height: 16px;
    mask-image: url(../../assets/icons/user-fill.svg);
}

.icon.phone {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/phone.svg);
}

.icon.mail {
    width: 20px;
    height: 16px;
    mask-image: url(../../assets/icons/mail.svg);
}

.icon.send-letter {
    width: 20px;
    height: 19px;
    mask-image: url(../../assets/icons/send-letter.svg);
}

.icon.time {
    width: 40px;
    height: 22px;
    mask-image: url(../../assets/icons/time.svg);
}

.icon.diagnostic-print {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/diagnostic-print.svg);
}

.icon.geo {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/geo.svg);
}

.icon.schedule-calendar {
    width: 40px;
    height: 40px;
    mask-image: url(../../assets/icons/schedule-calendar.svg);
}

.icon.medal-vert {
    width: 28px;
    height: 40px;
    mask-image: url(../../assets/icons/medal-vertical.svg);
}

.icon.handshake {
    width: 20px;
    height: 18px;
    mask-image: url(../../assets/icons/handshake.svg);
}

.icon.briefcase {
    width: 19px;
    height: 20px;
    mask-image: url(../../assets/icons/briefcase.svg);
}

.icon.file-download {
    width: 18px;
    height: 20px;
    mask-image: url(../../assets/icons/file-download.svg);
}

.icon.vertical-settings {
    width: 18px;
    height: 20px;
    mask-image: url(../../assets/icons/vertical-settings.svg);
}

.icon.comment {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/comment.svg);
}

.icon.presentation {
    width: 20px;
    height: 18px;
    mask-image: url(../../assets/icons/presentation.svg);
}

.icon.warning {
    width: 16px;
    height: 16px;
    mask-image: url(../../assets/icons/warning.svg);
}

.icon.map {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/map.svg);
}

.icon.info {
    width: 16px;
    height: 16px;
    mask-image: url(../../assets/icons/info.svg);
}

.icon.eye-off {
    width: 20px;
    height: 19px;
    mask-image: url(../../assets/icons/eye-off.svg);
}

.icon.email {
    width: 24px;
    height: 24px;
    mask-image: url(../../assets/icons/mail.svg);
}

.icon.chevron-left {
    width: 9px;
    height: 17px;
    mask-image: url(../../assets/icons/chevron-left.svg);
}

.icon.chevron-right-double {
    width: 20px;
    height: 17px;
    mask-image: url(../../assets/icons/chevron-right-double.svg);
}

.icon.upload {
    width: 80px;
    height: 72px;
    mask-image: url(../../assets/icons/upload.svg);
}

.icon.maximize {
    width: 24px;
    height: 24px;
    mask-image: url(../../assets/icons/maximize.svg);
}

.icon.experience {
    width: 22px;
    height: 22px;
    mask-image: url(../../assets/icons/medal-star.svg);
}

.icon.orange-coin {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url(../../assets/icons/orange-coin.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mask-image: none;
}

.icon.primary-coin {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url(../../assets/icons/primary-coin.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mask-image: none;
}

.icon.green-coin {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url(../../assets/icons/green-coin.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mask-image: none;
}

.icon.red-coin {
    width: 16px;
    height: 16px;
    background-color: transparent;
    background-image: url(../../assets/icons/red-coin.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    mask-image: none;
}

.icon.copy-icon {
    transition: color var(--duration-normal) var(--ease-smooth);
}

.icon.copy-icon.copied {
    color: var(--green-main);
}

.icon.fire {
    width: 15px;
    height: 20px;
    mask-image: url(../../assets/icons/fire.svg);
}

.icon.pen-new {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/pen-new.svg);
}

.icon.clock {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/clock.svg);
}

.icon.star-fall {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/star-fall.svg);
}

.icon.question-square {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/question-square.svg);
}

.icon.question-circle {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/question-circle.svg);
}

.icon.column-chart {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/column-chart.svg);
}

.icon.settings {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/settings.svg);
}

.icon.logout {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/logout.svg);
}

.icon.pen {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/pen.svg);
}

.icon.search {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/search.svg);
}

.icon.refresh {
    width: 20px;
    height: 18px;
    mask-image: url(../../assets/icons/refresh.svg);
}

.icon.plus {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/plus.svg);
}

.icon.history-thin {
    width: 29px;
    height: 29px;
    mask-image: url(../../assets/icons/history-thin.svg);
}

.icon.line-chart-up {
    width: 20px;
    height: 11px;
    mask-image: url(../../assets/icons/line-chart-up.svg);
}

.icon.line-chart-down {
    width: 20px;
    height: 11px;
    mask-image: url(../../assets/icons/line-chart-down.svg);
}

.icon.sad-emoji {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/sad-emoji.svg);
}

.icon.lock {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/lock.svg);
}

.icon.chevron-right-thin {
    width: 6px;
    height: 11px;
    mask-image: url(../../assets/icons/chevron-right-thin.svg);
}

.icon.chevron-down-thin {
    width: 11px;
    height: 6px;
    mask-image: url(../../assets/icons/chevron-down-thin.svg);
}

.icon.link {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/link.svg);
}

.icon.line-chart-circle {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/line-chart-circle.svg);
}

.icon.clock-bold {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/clock-bold.svg);
}

.icon.trash {
    width: 20px;
    height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6'/%3E%3Cpath d='M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3C/svg%3E");
}

.icon.filter {
    width: 20px;
    height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E");
}

.icon.sort {
    width: 20px;
    height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 5h10'/%3E%3Cpath d='M11 9h7'/%3E%3Cpath d='M11 13h4'/%3E%3Cpath d='m3 17 3 3 3-3'/%3E%3Cpath d='M6 18V4'/%3E%3C/svg%3E");
}

.icon.ban {
    width: 20px;
    height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='4.93' y1='4.93' x2='19.07' y2='19.07'/%3E%3C/svg%3E");
}

.icon.ruble {
    width: 20px;
    height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h8a4 4 0 0 1 0 8H6z'/%3E%3Cpath d='M6 12v8'/%3E%3Cpath d='M4 16h8'/%3E%3C/svg%3E");
}

.icon.minus {
    width: 20px;
    height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

.icon.dashboard {
    width: 20px;
    height: 20px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='9' rx='1'/%3E%3Crect x='14' y='3' width='7' height='5' rx='1'/%3E%3Crect x='14' y='12' width='7' height='9' rx='1'/%3E%3Crect x='3' y='16' width='7' height='5' rx='1'/%3E%3C/svg%3E");
}

.icon.text-input {
    width: 22px;
    height: 20px;
    mask-image: url(../../assets/icons/text-input.svg);
}

.icon.message-check {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/message-check.svg);
}

.icon.image-vertical {
    width: 22px;
    height: 18px;
    mask-image: url(../../assets/icons/image-vertical.svg);
}

.icon.search-fat {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/search-fat.svg);
}

.icon.file-text {
    width: 20px;
    height: 22px;
    mask-image: url(../../assets/icons/file-text.svg);
}

.icon.edit-circle {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/edit-circle.svg);
}

.icon.upload-circle {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/upload-circle.svg);
}

.icon.three-dots {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/three-dots.svg);
}

.icon.sun {
    width: 18px;
    height: 18px;
    mask-image: url(../../assets/icons/sun.svg);
}

.icon.moon {
    width: 18px;
    height: 18px;
    mask-image: url(../../assets/icons/moon.svg);
}

.icon.lock-narrow {
    width: 16px;
    height: 20px;
    mask-image: url(../../assets/icons/lock.svg);
}

.icon.coin {
    width: 20px;
    height: 18px;
    mask-image: url(../../assets/icons/coin.svg);
}

.icon.globe {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/globe.svg);
}

.icon.star-4-points {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/star.svg);
}

.icon.message {
    width: 20px;
    height: 20px;
    mask-image: url(../../assets/icons/comment.svg);
}

.icon.clipboard-article {
    width: 20px;
    height: 16px;
    mask-image: url(../../assets/icons/document-text.svg);
}

.icon.youtube {
    width: 20px;
    height: 14px;
    mask-image: url(../../assets/icons/youtube.svg);
}