@font-face {
  font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	src: url('/static/fonts/Inter_300.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('/static/fonts/Inter_400.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	src: url('/static/fonts/Inter_500.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('/static/fonts/Inter_600.woff2') format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	src: url('/static/fonts/Inter_700.woff2') format('woff2');
	font-display: swap;

}

:root {
	--white-color: rgb(255, 255, 255);
	--black-color: rgb(0, 0, 0);
	--text-color: rgb(26, 49, 60);
	--dark-text: rgb(89, 89, 89);
	--secondary-text: rgb(102, 102, 102);

	--blue-color: rgb(0, 118, 238);
	--blue-back: rgb(0, 118, 238, .05);
	--dark-blue: rgb(22, 118, 202);
	--red-color: rgb(228, 106, 118);

	--visual-back: rgb(16, 16, 16);
	--menu-back: rgb(180, 184, 204, .25);
	--white-back: rgb(255, 255, 255, .12);
	--tg-back: rgb(80, 177, 223);

    --light-back: rgb(239, 239, 239, .9);
	--border-color: rgb(239, 239, 239);
	--shadow-color: rgb(0, 118, 238, .15);

	--bronze-color: rgb(214, 188, 131);
	--active-color: rgb(102, 163, 25);
	--green-color: rgb(87, 121, 62);
	--yellow-color: rgb(255, 194, 0);
	--more-color: rgb(109, 167, 223);

	--second-text: rgb(94, 106, 120);
	--second-back: rgb(236, 239, 243);
	
	--up-color: rgb(20, 220, 75);
	--down-color: rgb(220, 0, 0);

	--font-size-sm: 12px;
	--font-size-base: 14px;
	--font-size-lg: 16px;
	--font-size-xl: 20px;
	--font-size-xxl: 24px;

	--line-height: 1.5;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-size: var(--font-size-base);
	font-weight: 400;
	line-height: var(--line-height);
	background-color: var(--white-color);
	color: var(--text-color);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
body.modal { overflow: hidden }
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-weight: 600;
}
h1 { font-size: var(--font-size-xxl) }
h2 { font-size: var(--font-size-xl) }
h3 { font-size: var(--font-size-lg) }
h4 { font-size: var(--font-size-base) }
h5 { font-size: var(--font-size-sm) }
h6 {
	font-size: var(--font-size-sm);
	font-weight: 500;
}
p { margin-bottom: 1em }

a {
	color: var(--text-color);
	transition: color .2s ease;
	text-decoration: none;
}
a:hover { color: var(--blue-color) }
button {
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
	border: none;
	background-color: transparent;
}
button,
input {
	font-family: 'Raleway', sans-serif;
	font-size: 14px;
}
.btn {
	display: flex;
	gap: 5px;
	cursor: pointer;
	text-decoration: none;
	transition: .35s;
	cursor: pointer;
}
.icon {
	display: block;
	background: center / contain no-repeat;
}
.ic_12 {
	width: 12px;
	height: 12px;
}
.ic_16 {
	width: 16px;
	height: 16px;
}
.ic_24 {
	width: 24px;
	height: 24px;
}
.ic_48 {
	width: 48px;
	height: 48px;
}
.ic_telegram { background-image: url('/static/icons/ic_telegram.svg') }
.ic_whatsapp { background-image: url('/static/icons/ic_whatsapp.svg') }
.ic_instagram { background-image: url('/static/icons/ic_instagram.svg') }
.ic_youtube { background-image: url('/static/icons/ic_youtube.svg') }
.ic_tiktok { background-image: url('/static/icons/ic_tiktok.svg') }
.ic_notification { background-image: url('/static/icons/ic_notification.svg') }
.ic_chevron { background-image: url('/static/icons/ic_chevron.svg') }
.ic_close { background-image: url('/static/icons/ic_close.svg') }

.app {
	display: flex;
	flex-direction: column;
	height: 100%;
}
header {
	display: grid;
	grid-template-columns: 3fr  5fr 4fr;
	gap: 15px;
	padding: 15px 25px;
    background-color: var(--white-color);
	border-bottom: 1px solid var(--border-color);
	height: 72px;
	position: sticky;
	top: 0;
	z-index: 10;
}
.app_logo {
	display: flex;
	gap: 10px;
	align-items: center;
}
.btn_burger svg {
	width: 24px;
	height: 24px;
}
.app_logo a {
	display: grid;
	max-width: 120px;
}
.app_logo img { max-width: 100% }

.app_top {
	display: flex;
	align-items: center;
}
.search_bar {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}
.search_box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 1px solid var(--border-color);
	padding: 0 10px;
	border-radius: 25px;
	height: 42px;
}
.search_box label {
	position: absolute;
	inset: 0;
	width: 100%;
}
.search_box input {
	border: none;
	outline: 0;
	width: 100%;
}

.user_block {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: end;
}
.btn_auth {
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px 25px;
	border-radius: 25px;
	height: 42px;

	cursor: pointer;
    background-color: var(--light-back);
    border-color: var(--light-back);
    color: var(--text-color);
}
.btn_auth.login:hover {
	background-color: var(--blue-back);
	color: var(--blue-color);
}
.btn_auth.reg {
    background-color: var(--dark-text);
	color: var(--white-color);
}
.btn_auth.reg:hover { background-color: var(--text-color) }
.btn_notifications {
	display: grid;
	align-items: center;
	text-align: center;
	width: 42px;
	height: 42px;
	position: relative;
	border-radius: 50%;
	background-color: var(--light-back);
	cursor: pointer;
}
.btn_notifications:hover{ background-color: var(--blue-back) }
.btn_notifications:hover svg path { fill: var(--blue-color) }
.btn_notifications svg {
	width: 24px;
	height: 24px;
}
.btn_notifications span {
	display: grid;
	align-items: center;
	text-align: center;
	width: 18px;
	height: 18px;
	position: absolute;
	background-color: #dd2334;
	border-radius: 50%;
	color: #fff;
	top: -5px;
	right: -5px;
}

.layout {
	display: grid;
	grid-template-columns: 20fr  55fr 25fr;
	gap: 15px;
}

.sidebar_left {
	display: grid;
	gap: 15px;
	grid-template-rows: 1fr auto;
	border-right: 1px solid var(--border-color);
	padding: 15px;
	box-sizing: border-box;

    height: calc(100vh - 72px);
    position: sticky;
    top: 72px;
}
.app_socials {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: center;
}
.app_socials a {
	display: grid;
	padding: 10px;
	border-radius: 50%;
	background-color: var(--light-back);
	border: 1px solid var(--light-back);
}
.app_socials a:hover { background-color: var(--blue-back) }

.sidebar_right {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 15px;
	border-left: 1px solid var(--border-color);

    position: sticky;
    top: 72px;
}

.adv {
	display: grid;
	position: relative;
}
.adv_empty {
	display: grid;
	width: 100%;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background-color: var(--blue-back)
}
.adv_empty b {
	display: grid;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--dark-text);
	border-radius: 5px;
	width: 32px;
	height: 32px;
	color: var(--dark-text);
}
.adv_right { height: 350px }
.adv span {
	background-color: var(--white-back);
	color: var(--text-color);
	width: max-content;
	font-size: 12px;
	border-radius: 3px;
	padding: 0 5px;
	position: absolute;
	bottom: 0;
}

.main_nav {
	display: flex;
	flex-direction: column;
}
.main_nav a {
	display: grid;
	font-size: 18px;
	font-weight: 500;
	word-wrap: break-word;
}
.menu_item {
	display: flex;
	gap: 10px;
	max-width: max-content;
	align-items: center;
	transition-duration: .2s;
	transition-property: background-color, box-shadow;
	border-radius: 25px;
	padding: 10px 20px;
}
.main_nav svg {
	width: 1.5rem;
	height: 1.5rem;
}
.main_nav a:hover { color: var(--text-color) }
.main_nav a:hover .menu_item { background-color: var(--menu-back) }
.main_nav a.current { font-weight: 700 }
.main_nav a.current svg .stroke { stroke: #000 }
.main_nav a.current svg .fill { fill: #000 }

main.content {
	display: flex;
	gap: 35px;
	flex-direction: column;
	overflow-y: scroll;
	padding: 15px;
}
.scroll_block {
	display: grid;
	gap: 10px;
}
.scroll_wrap {
	display: flex;
	overflow: hidden;
}
.scroll_boxes {
	display: flex;
	gap: 15px;
	overflow-x: scroll;
	box-sizing: content-box;
}
.scroll_boxes::-webkit-scrollbar { display: none }

.title a,
.title {
	display: flex;
	gap: 5px;
    align-items: baseline;
    justify-content: space-between;
}
.title a {
    align-items: center;
    font-weight: 500;
	font-size: 14px;
    color: var(--more-color);
    text-decoration: none;
    white-space: nowrap;
}
.title a svg { width: 8px }
.title a .stroke { stroke: var(--more-color) }
.title a:hover { color: var(--red-color) }
.title a:hover .stroke { stroke: var(--red-color) }

.match_box {
	display: grid;
	align-items: center;
	width: max-content;
	gap: 15px;
	padding: 10px;
	background-color: var(--light-back);
	color: var(--second-text);
	border-radius: 8px;
	max-width: 420px;
	flex-basis: 280px;
	flex-shrink: 0;
}
.match_box:hover { box-shadow: 0 2px 6px 0 var(--shadow-color)  }
.match_box a.page {
	position: absolute;
	inset: 0;
}
.match_box .top_bar {
	display: grid;
	align-items: center;
	gap: 5px;
	grid-template-columns: auto 1fr auto;
	font-size: 12px;
	position: relative;
}
.match_box .top_bar a { cursor: pointer }
.match_box .middle_bar {
	display: grid;
	align-items: center;
	gap: 5px;
	grid-template-columns: 1fr auto 1fr;
	position: relative;
}
.match_box .team_box {
	display: grid;
	align-items: center;
	justify-items: center;
	gap: 5px;
	color: var(--text-color);
}
.match_box .match_info {
	display: grid;
	align-items: center;
	justify-items: center;
	font-size: 12px;
}
.match_box .match_time {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-color);
}
.match_odds {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
}
.match_odds a {
	display: flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	font-weight: 600;
	background-color: var(--white-color);
	border: 1px solid var(--light-back);
	padding: 4px 8px;
	border-radius: 8px;
}
.match_odds a svg {
	width: 14px;
	height: 14px;
}
.match_odds a.up path { fill: var(--up-color) }
.match_odds a.down svg { transform: rotate(180deg) }
.match_odds a.down path { fill: var(--down-color) }
.match_odds a:hover { text-decoration: underline }
.bottom_bar {
	display: flex;
	justify-content: center;
}
.bottom_bar .prediction {
	background-color: var(--dark-blue);
	font-weight: 500;
	padding: 0 4px;
	font-size: 14px;
}
.bottom_bar .prediction.empty { opacity: 0 }
.badge {
	display: flex;
	align-items: center;
	background-color: var(--light-back);
	max-width: max-content;
	border-radius: 4px;
	padding: 0 4px;
	font-size: 12px;
	color: var(--white-color);
}
.badge.football { background-color: var(--green-color) }

.btn_fav {
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 8px;
}
.btn_fav:hover { background-color: var(--menu-back) }
.btn_fav.select path {
	stroke: var(--yellow-color);
	fill: var(--yellow-color);
}

.sport_buttons {
	display: flex;
	overflow-x: scroll;
	box-sizing: content-box;
	gap: 5px;
	padding: 15px 0;
}
.sport_buttons::-webkit-scrollbar { display: none }
.sport_buttons a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 4px;
	background-color: var(--light-back);
	padding: 10px 5px;
	text-overflow: ellipsis;
	overflow: hidden;

	max-width: 100px;
	flex-basis: 100px;
	flex-shrink: 0;
	box-sizing: border-box;
}
.sport_buttons a span {
	display: block;
	width: 100%;
	text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
	overflow:hidden
}
.sport_buttons a svg { width: 24px }
.sport_buttons a:hover { background-color: var(--blue-back) }
.sport_buttons a:hover svg path { fill: var(--blue-color) }

.cup_wrap {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(2, 1fr);
}
.cup_box {
	display: grid;
	overflow: hidden;
	border-radius: 15px;
	border: 1px solid var(--border-color);
	cursor: pointer;
	position: relative;
	transition: box-shadow 1.2s cubic-bezier(.23, 1.25, .46, 1);
}
.cup_box:hover { box-shadow: 0 2px 6px 0 var(--shadow-color) }
.cup_box a {
	position: absolute;
	inset: 0;
}
.cup_box:hover h3 { color: var(--blue-color) }
.cup_visual {
	display: grid;
	gap: 10px;
	overflow: hidden;
	background: var(--visual-back) no-repeat right center / contain padding-box;
	background-image: linear-gradient(rgb(0, 0, 0, .2), transparent);
	color: #a8a8a8;
	padding: 15px;
}
.cup_top {
	display: flex;
	justify-content: space-between;
	color: var(--white-color);
}
.cup_sport {
	display: flex;
	gap: 5px;
}
.cup_sport svg { width: 18px }
.cup_sport .fill { fill: var(--white-color) }
.cup_top .badge { background-color: var(--dark-blue) }
.cup_top .badge.active { background-color: var(--active-color) }
.cup_middle { display: grid }
.cup_middle strong {
	color: var(--bronze-color);
	font-size: 24px;
}
.cup_bottom {
	display: flex;
	gap: 10px;
}
.cup_info {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 10px;
	background-color: var(--white-back);
	padding: 5px 10px;
	border-radius: 5px;
}
.cup_text {
	display: grid;
	font-size: 12px;
}
.cup_text strong {
	font-size: 14px;
	color: var(--white-color);
}
.cup_info svg { width: 18px }
.cup_info .fill { fill: var(--white-color) }
.cup_info .stroke {
	stroke: var(--white-color);
	fill: transparent;
}
.cup_title {
	display: grid;
	gap: 10px;
	padding: 15px 0;
}
.cup_title h3 {
	font-weight: 700;
	font-size: 24px;
	padding: 0 15px;
}
.cup_period {
	display: flex;
	gap: 5px;
	color: var(--second-text);
	font-weight: 500;
	padding: 0 15px;
}
.cup_period strong { color: var(--text-color) }
.cup_period svg { width: 18px }
.cup_join {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	border-top: 1px solid var(--border-color);
	padding: 10px 15px 0;
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	color: var(--secondary-text);
}
.cup_join svg { width: 10px }
.cup_join .stroke { stroke: var(--secondary-text) }
.cup_box:hover .cup_join { color: var(--text-color) }
.cup_box:hover .cup_join .stroke { stroke: var(--text-color) }

.news_wrap {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(3, 1fr);
}
.post_box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
}
.post_box:hover .post_title strong { text-decoration: underline }
.post_img img {
	max-width: 100%;
	object-fit: cover;
	transition: .3s;
	opacity: .85;
}
.post_title {
	display: flex;
	flex-direction: column;
	gap: 5px;
}
.post_title span {
	font-size: 12px;
	color: var(--second-text);
}

.btn_burger { display: none }

@media only screen and (max-width: 768px) {
	
}
@media (min-width: 576px) { }
@media (min-width: 768px) { }
@media (min-width: 992px) { }
@media (min-width: 1200px) { }
@media (min-width: 1300px) { }