@font-face {font-family: 'Youtube';             src: url('/fonts/youtube/medium.woff2') format('woff2');}
@font-face {font-family: 'Youtube Bold';        src: url('/fonts/youtube/bold.woff2')   format('woff2');}
@font-face {font-family: 'Youtube Light';       src: url('/fonts/youtube/light.woff2')  format('woff2');}

body {margin: 0px; background: #111; user-select: none; overflow-x: hidden;}
[onclick] {cursor: pointer !important}
[selectable] {user-select: text !important}
.dark_overlay {position: absolute; display: block; left: 0px; top: 0px; height: 100%; width: 100%;}
a {text-decoration: none; font-family: YouTube Bold}
l {font-family: YouTube Light; color: #ccc; font-size: 50px}
hr {background: #333; border: none; height: 1px}
table {border-collapse: collapse; border-spacing: 1px;}
th, td {border: 1px solid #000; padding: 0px; margin: 0px; padding: 8px 10px}
th {background: #00000020}
td {background: #00000010}

::-webkit-scrollbar {height: 12px; width: 14px; background: transparent; z-index: 12; overflow: visible;}
::-webkit-scrollbar-thumb {width: 10px; background-color: #434953; border-radius: 10px; z-index: 12; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; transition: background-color .32s ease-in-out; margin: 4px; min-height: 32px; min-width: 32px;}

.global_header {position: fixed; left: 0px; top: 0px; right: 0px; height: 120px; z-index: 99; transition: .2s;}
.global_header[scroll] {background: #00000060; height: 80px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0px 5px 15px #00000060;}
.global_header[scroll] .content .logo img {height: 60px; filter: unset; margin-top: 5%; filter: grayscale(1) brightness(6)}
.global_header[scroll] .content .links {left: 220px}
.global_header[scroll] .content .links > * {color: #fff}
.global_header > .content {position: relative; margin: auto; max-width: 1200px; padding: 0px 50px; height: 100%}
.global_header > .content > .logo {height: 100%; position: absolute; z-index: 2}
.global_header > .content > .logo > img {height: 90px; margin-top: 3%; filter: grayscale(1) brightness(6); transition: .2s}
.global_header > .content > .links {position: absolute; left: 320px; top: 50%; transform: translateY(-50%); z-index: 3; transition: .2s}
.global_header > .content > .links > * {position: relative; display: inline-block; padding: 6px 10px; font: normal 20px YouTube; color: #fff; transition: .2s}
.global_header > .content > .register {position: absolute; right: 0px; margin-right: 50px; padding-left: 20px; text-align: right; display: flex; height: 80px; align-items: center; justify-content: flex-end; z-index: 1}
.global_header > .content > .register > .icon {position: relative; display: inline-block; height: 60px; width: 60px; overflow: hidden;}
.global_header > .content > .register > .icon > svg {position: absolute; height: 40px; width: 40px; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.global_header > .content > .register > .icon > svg path {fill: #fff}
.global_header > .content > .register > .label {position: relative; display: inline-block; font: normal 16px/18px YouTube; color: #fff; text-transform: uppercase; letter-spacing: 3px;}

.global_background {position: fixed; left: 0px; top: 0px; bottom: 0px; right: 0px; background: url('/images/maps_bg.jpg') no-repeat center center; background-size: cover;}
.global_background::after {position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px; content: ""; background: #00000046; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}

.global_footer {position: relative; display: block; background: #111; height: 260px; width: 100%; box-shadow: 0px -2px 10px #00000030}
.global_footer > .content {position: relative; margin: auto; max-width: 1200px; padding: 0px 50px; height: 100%}
.global_footer > .content > .logo {background: #00000010; height: 100%; position: absolute; z-index: 2}
.global_footer > .content > .logo > img {height: 70px; margin-top: 50%; filter: grayscale(1) contrast(2) invert(1);}
.global_footer > .content > .list {position: absolute; left: 270px; top: 50%; transform: translateY(-50%); align-items: center; display: flex}
.global_footer > .content > .list > div {position: relative; display: inline-block; margin-right: 40px}
.global_footer > .content > .list > div > .label {font: normal 20px YouTube Bold; color: #fff; padding-bottom: 5px}
.global_footer > .content > .list > div > .text {font: normal 17px YouTube Light; color: #ccc}
.global_footer > .content > .list > div > .text > a {font: normal 17px YouTube; color: #fff}

.page_content {position: relative; max-width: 1200px; padding: 0px 50px; margin: 150px auto}
.page_content > .full-width {width: 100vw; transform: translateX(-50%); left: 50%}
.page_content > * > .title {font: normal 35px YouTube Bold; color: #fff; margin-bottom: 20px}
.page_content > * > .content {font: normal 18px YouTube Light; color: #ccc}
.page_content > * > .content b {font-weight: normal; font-family: YouTube; color: #fff}
.page_content > * > .links {font: normal 18px YouTube Light; color: #0af; margin-top: -20px; margin-bottom: 20px}
.page_content > * > .links > a {color: #0af; font-family: YouTube;}
.page_content > * > .links > a::before {content: "⯇ "; color: #0af}
.page_content h1 {all: unset; font: 30px YouTube Bold; color: #fff; text-transform: uppercase;}
.page_content h2 {all: unset; font: 25px YouTube; padding: 30px 0px 10px 0px; border-bottom: 1px solid #00000030}

.about {position: relative; display: block; background: #000000a0; padding: 35px; border-radius: 5px;}
.about .text {position: relative; display: block; margin-top: 25px; font: 18px YouTube Light; color: #ccc}
.about .text b {font-weight: normal; color: #fff; font-family: YouTube Bold;}

.panel_structure {position: relative; display: grid; grid-template-columns: 1fr 0.5fr; grid-gap: 25px; margin-top: 25px;}
.panel_structure .main {position: relative; display: flex; flex-direction: column; gap: 25px;}
.panel_structure .main .editions_list {position: relative; display: flex; flex-direction: column; gap: 15px;}
.panel_structure .main .editions_list .edition_item {position: relative; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; background: #00000060; border-radius: 5px; overflow: hidden}
.panel_structure .main .editions_list .edition_item .year {position: relative; display: grid; place-items: center; background: #ffffff0e; writing-mode: vertical-rl; transform: scale(-1); text-orientation: mixed; width: 40px; height: 100%; font: 25px/25px YouTube Bold; color: #fff}
.panel_structure .main .editions_list .edition_item .teams {position: relative; display: block; padding: 20px}
.panel_structure .main .editions_list .edition_item .teams .place_item {position: relative; display: block; font: 18px YouTube Light; color: #ccc}
.panel_structure .main .editions_list .edition_item .teams .place_item.other {position: relative; display: block; font: 14px YouTube; color: #888}
.panel_structure .main .editions_list .edition_item .dates {position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-row-gap: 15px; justify-content: flex-end; padding-right: 20px;}
.panel_structure .main .editions_list .edition_item .dates .date_item {position: relative; display: block; width: 155px}
.panel_structure .main .editions_list .edition_item .dates .date_item .label {position: relative; display: block; font: 13px YouTube; color: #ffffff88; text-transform: uppercase;}
.panel_structure .main .editions_list .edition_item .dates .date_item .date {position: relative; display: block; font: 15px YouTube; color: #ffffffcc}
.panel_structure .main .editions_list .edition_item[latest] {all: initial; position: relative; display: block; background: #000000a0; border-radius: 5px; overflow: hidden; padding: 36px;}
.panel_structure .main .editions_list .edition_item[latest] * {all: initial;}
.panel_structure .main .editions_list .edition_item[latest] .year {position: relative; display: block; font: 50px/50px YouTube Bold; color: #fff}
.panel_structure .main .editions_list .edition_item[latest] .year::before {position: absolute; left: -50px; top: -30px; -webkit-text-stroke: 3px #ffffff10; color: #00000000; content: attr(data-before); font: 260px/110px YouTube Bold}
.panel_structure .main .editions_list .edition_item[latest] .teams {position: relative; display: block; float: left; margin-top: 10px;}
.panel_structure .main .editions_list .edition_item[latest] .teams .place_item {position: relative; display: block; font: 22px/22px YouTube; color: #fff}
.panel_structure .main .editions_list .edition_item[latest] .teams .place_item:nth-child(1) {color: #ffff00}
.panel_structure .main .editions_list .edition_item[latest] .teams .place_item:nth-child(2) {color: #cccccc}
.panel_structure .main .editions_list .edition_item[latest] .teams .place_item:nth-child(3) {color: #ff2f2f}
.panel_structure .main .editions_list .edition_item[latest] .teams .place_item.other {position: relative; display: block; font: 16px YouTube; color: #aaa}
.panel_structure .main .editions_list .edition_item[latest] .dates {position: relative; display: block; float: right;}

.panel_structure .side {position: relative; display: flex; flex-direction: column; gap: 25px;}
.panel_structure .side .social_media {position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; background: #000000a0; padding: 20px; border-radius: 5px;}
.panel_structure .side .social_media .link_item {position: relative; display: grid; grid-template-columns: auto 1fr; grid-gap: 10px; align-items: center;}
.panel_structure .side .social_media .link_item img {height: 22px; width: 22px}
.panel_structure .side .social_media .link_item .label {position: relative; display: block; font: 18px/18px YouTube Bold; color: #fff}
.panel_structure .side .useful_links {position: relative; display: grid; grid-template-columns: 1fr; grid-gap: 20px; background: #000000a0; padding: 20px; border-radius: 5px;}
.panel_structure .side .useful_links .link_item {position: relative; display: grid; grid-template-columns: auto 1fr; grid-gap: 10px; align-items: center;}
.panel_structure .side .useful_links .link_item img {height: 22px; width: 22px}
.panel_structure .side .useful_links .link_item .label {position: relative; display: block; font: 18px/18px YouTube Bold; color: #fff}

.panel_structure .side .sponsors {position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px 30px; background: #000000a0; padding: 30px; border-radius: 5px;}
.panel_structure .side .sponsors .item {position: relative; display: block; overflow: hidden; height: 90px;}
.panel_structure .side .sponsors .item img {position: absolute; left: 50%; top: 50%; max-height: 100%; max-width: 100%; min-width: 100%; transform: translate(-50%, -50%);}

.container-error {position: relative; display: grid; grid-template-columns: auto 1fr; background: #171d29c2; padding: 35px; border-radius: 10px; align-items: center; grid-gap: 25px}
.container-error .details {position: relative; display: block;}
.container-error .desc {position: relative; display: block; margin-top: 25px; font: 18px YouTube Light; color: #aaa}
.container-error .desc a {font-weight: normal; color: #0af; font-family: YouTube Bold;}
.container-error svg path {fill: #abc2d1}

.container-rules {position: relative; display: block;padding-bottom: 50px;}
.container-rules > .header {position: relative; display: block; padding-bottom: 50px;}
.container-rules > .header > .image {position: relative; margin: auto; max-width: 1200px; padding: 0px 50px; left: -10px; height: 120px;}
.container-rules > .header > .image > img {position: absolute; top: 50%; transform: translateY(-50%); filter: grayscale(1) contrast(0) brightness(3.5);}
.container-rules > .header > .label {position: relative; display: block; margin-top: 30px}
.container-rules > .header > .label > .text {position: relative; margin: auto; max-width: 1200px; padding: 0px 50px; font: 40px/70px YouTube Bold; text-transform: uppercase; color: #fff;}
.container-rules > .header > .label > .changedate {position: relative; margin: auto; max-width: 1200px; padding: 0px 50px; top: -10px; font: 18px YouTube Light; color: #aaa;}
.container-rules > .content {position: relative; margin: auto; max-width: 1200px; padding: 0px 50px; color: #ccc}
.container-rules > .content .infobox {position: relative; display: block; padding: 20px; box-shadow: inset 0px 0px 0px 1px #ff0, inset 0px 0px 6px #ff0; margin-bottom: 25px; background: #ffff0010}
.container-rules > .content .infobox .header {position: relative; display: block; font: 22px YouTube Bold; color: #fff}
.container-rules > .content .infobox .text {position: relative; display: block; font: 17px/20px YouTube Light; color: #ccc; margin-top: 5px}
.container-rules > .content .infobox .text span {font-family: YouTube}
.container-rules ol {list-style-type: none; counter-reset: item; margin: 0; padding: 0;}
.container-rules ol > li {display: table; counter-increment: item; margin-bottom: 0.6em; font: 17px/22px YouTube Light}
.container-rules ol > li:before {content: counters(item, ".") ". "; display: table-cell; padding-right: 0.6em; font-family: YouTube Bold; color: #fff;}
.container-rules li ol > li {margin: 0;}
.container-rules li ol > li:before {content: counters(item, ".") ". ";}
.container-rules ul {list-style-type: none; counter-reset: item; margin: 0; padding: 0;}
.container-rules ul > li {display: table; counter-increment: item; margin-bottom: 0.6em;}
.container-rules ul > li:before {content: "■"; display: table-cell; padding-right: 0.6em; font-family: YouTube}
.container-rules li ul > li {margin: 0;}
.container-rules a {color: #0af}
.container-rules b {font-family: YouTube}
.container-rules table {margin-top: 10px}
.container-rules table th {color: #fff; background: #ffffff20}
.container-rules table td {color: #ccc; background: #ffffff0a}
.container-rules [new] {color: #afa}
.container-rules [changed] {color: #aef}

.global_dialog {position: fixed; top: 0px; left: 0px; height: 100%; width: 100%; background: #000000c0; z-index: 99999999; display: none; transition: 0.25s}
.global_dialog[visible=false] {opacity: 0;}
.global_dialog[visible=true] {opacity: 1;}
.global_dialog > .content[visible=false] {opacity: 0; transform: translate(-50%, -50%) scale(0.8);}
.global_dialog > .content[visible=true] {opacity: 1; transform: translate(-50%, -50%) scale(1);}
.global_dialog > .content {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: #efefef; min-width: 700px; transition: 0.25s}
.global_dialog > .content > .title {position: relative; display: block; font: normal 32px Montserrat Bold; color: #000; text-transform: uppercase; padding: 32px 32px 0px 32px; letter-spacing: 2px;}
.global_dialog > .content > .content {position: relative; display: block; font: normal 14px/18px Montserrat; color: #000; padding: 32px;}
.global_dialog > .content > .content > b {font-family: Montserrat Bold; color: #000; font-weight: normal}
.global_dialog > .content > .content > code {color: #000; padding: 5px 10px; background: #00000020; margin: 0px 10px}
.global_dialog > .content > .content > table {margin: 10px 0px; border-collapse: collapse; border-spacing: 0px}
.global_dialog > .content > .content > table td {border: 1px solid rgba( 0, 0, 0, 0.5 );}
.global_dialog > .content > .content > table > thead > tr > td {color: #000}
.global_dialog > .content > .content > table > tbody > tr > td {font-size: 13px; color: #000; padding: 8px 10px;}
.global_dialog > .content > .content > table[api] {margin: 10px 0px; border-collapse: collapse; border-spacing: 0px; background: #ffffff10; width: 100%}
.global_dialog > .content > .content > table[api] td {border: 1px solid rgba( 0, 0, 0, 0.5 );}
.global_dialog > .content > .content > table[api] td:first-of-type {font-family: monospace; padding-right: 50px; color: #000; font-weight: bold}
.global_dialog > .content > .content > table[api] td[api] {font-family: monospace; color: #000}
.global_dialog > .content > .content > table[api] th {background: #00000030; color: #000; border: 1px solid rgba( 0, 0, 0, 0.5 ); font-size: 13px; padding: 8px 10px; text-align: left}
.global_dialog > .content > .content > table[api] > thead > tr > td {color: #333}
.global_dialog > .content > .content > table[api] > tbody > tr > td {font-size: 13px; color: #111; padding: 8px 10px;}
.global_dialog > .content > .dialog_buttons {position: relative; display: block; text-align: right; padding: 10px 32px 32px 32px}
.global_dialog > .content > .dialog_buttons > button {position: relative; margin-left: 10px; cursor: pointer; height: 35px; padding: 0px 20px; border: none; background: #ddd; color: #000; border-radius: 3px; box-shadow: 0px 5px 15px #00000000; outline: none; transition: 0.15s; font: normal 13px Montserrat}
.global_dialog > .content > .dialog_buttons > button:hover {background: #333; color: #fff; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .3);}
.global_dialog > .content > .dialog_buttons > button:active {background: #444; box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, .6 );}
.global_dialog > .content > .dialog_buttons > button[primary] {background: linear-gradient(to right, #47bfff 0%, #1a44c2 60%); background-position: 25%; background-size: 330% 100%; color: #dfe3e6}
.global_dialog > .content > .dialog_buttons > button[primary]:hover {background: linear-gradient(to right, #47bfff 0%, #1a44c2 60%); background-position: 0%; background-size: 330% 100%;}
.global_dialog > .content > .dialog_buttons > button[primary]:active {background: linear-gradient(to right, #47bfff 0%, #1a44c2 60%); background-position: 40%; background-size: 330% 100%;}

.container-rules > ol > li {font: 26px/30px YouTube; margin-top: 50px;}
.container-rules > ol > li > ol {margin-top: 10px}
.container-rules > ol > li > * {font: 16px/20px YouTube}

.container-gallery {position: relative; display: block; margin-top: 150px; padding: 25px; background: #00000060; border-radius: 5px;}
.container-gallery > .list {position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; grid-gap: 10px}
.container-gallery > .list > .col > img {width: 100%; margin-bottom: 10px}
.container-gallery > .listofyears {position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto; grid-gap: 25px}
.container-gallery > .listofyears > div {text-align: center; height: 120px; background: #ffffff1a; box-shadow: 0px 0px 0px 1px #00000020; font: 75px/120px YouTube Bold; color: #ccc}
.container-gallery > .listofyears > div:hover {text-align: center; height: 120px; background: #ffffff2a; box-shadow: 0px 0px 0px 1px #00000020; font: 75px/120px YouTube Bold; color: #0cf}

.offline2020 {position: relative; display: block; margin-top: 80px}
.offline2020 .content {position: relative; display: block; margin: auto; padding: 80px 50px; max-width: 1200px}
.offline2020 .content .title {position: relative; display: block; font: 60px YouTube Bold; color: #fff}
.offline2020 .content .desc {position: relative; display: block; font: 22px YouTube; color: #fff; margin-top: 20px}
.offline2020 .content .text {position: relative; display: block; font: 18px/26px YouTube Light; color: #fff; margin-top: 80px}
.offline2020 .content .text .container {position: relative; display: block; margin-bottom: 100px}
.offline2020 .content .text .container .header {position: relative; display: block; font: 35px YouTube Bold; color: #fff; margin-bottom: 10px}
.offline2020 .content .text .container .description {position: relative; display: block; font: 18px/26px YouTUbe Light; color: #ccc;}
.offline2020 .content .text .container .description b {font-weight: normal; font-family: YouTube; color: #fff}
.offline2020 .content .text .container .description u {color: #fff}
.offline2020 .content .text .container .description a {font-weight: normal; font-family: YouTube; color: #0af; text-decoration: underline;}
.offline2020 .content .text .container .description img {margin: 10px 0px 25px 0px; box-shadow: 0px 4px 15px #00000040; border-radius: 8px;}

/*  */