:root {
	--default-font:'Poppins';
	
	--color-error-hex:#ff0036;
	--color-error-rgb:255,0,54;

	--color-error-2-hex:#ff5075;
	--color-error-2-rgb:255,80,117;

	--color-success-hex:#08ff9f;
	--color-success-rgb:8,255,159;

	--color-success-2-hex:#2fcb80;
	--color-success-2-rgb:47,203,128;
	
	--color-permanent-01-hex:#e0c195;
	--color-permanent-01-rgb:224,193,149;

	--color-permanent-02-hex:#ffa830;
	--color-permanent-02-rgb:255,168,48;

	--color-dark-mode-1:#111;
	--color-dark-mode-2:#212121;
	--color-dark-mode-3:#313131;
	--color-dark-mode-4:#414141;
	--color-dark-mode-5:#515151;
	--color-dark-mode-6:#616161;
	--color-dark-mode-7:#717171;
	--color-dark-mode-8:#818181;
	--color-dark-mode-9:#919191;


	--color-main-01-hex:#ff3b3b; /* menu, tlačítka, loadery, admin... */
	--color-main-01-rgb:255,0,76;

	/*--color-main-02-hex:#3e364b;
	--color-main-02-rgb:62,54,75;*/

	--color-main-03-hex:#00cfb7;
	--color-main-03-rgb:0,207,183;


	--top-panel-height:60px;
}



html {width:100%; background:linear-gradient(#313131, #414141); background-attachment:fixed}
body {width:100%; margin:0; color:#fff; font-size:14px; font-family:var(--default-font), Arial, Helvetica, sans-serif; overflow-y:scroll}
body.scroll-locked {overflow:hidden}

::selection {background-color:var(--color-main-01-hex); color:#fff}

a:link, a:visited {color:var(--color-main-03-hex); text-decoration:none}
a:hover, a:active {color:var(--color-main-03-hex); text-decoration:underline}
a:active, a:focus, * {outline:0 none}

img {border:0 none}
.clear {clear:both !important}
h1 {margin:0; padding:50px 0 20px 28px; box-sizing:border-box; color:#ccc; font-size:27px; font-family:Comfortaa, cursive; text-transform:uppercase; font-weight:normal; line-height:1.3}
h2 {margin:0 0 5px 0; color:var(--color-permanent-01-hex); font-size:14px; font-family:Comfortaa, cursive; text-transform:uppercase; font-weight:600}

p, ul, ol, li {margin:0; padding:0}


#cookiescheck {display:none}
#cookiescheck, #jscheck {position:absolute; top:0; left:0; background-color:var(--color-error-hex); width:100%; height:50px; text-align:center; line-height:50px; color:#fff; font-weight:bold; font-size:14px; text-transform:uppercase; z-index:9999}
#ontop {position:fixed; top:15px; right:15px; background:url(../img/ontop.png) 0 0 repeat; display:none; width:43px; height:43px; opacity:0.5; z-index:1}
#ontop:hover, #ontop:active {opacity:1.0}
.ui-tooltip {background:#1e1e1e; border:1px #000 solid !important; padding:9px 25px; color:#fff; border-radius:4px; box-shadow: 0 0 8px rgba(0,0,0,0.6) !important}

.circle-loader-spin {/*width:50px; height:50px; border:5px solid rgba(0,0,0,0.1); border-top:5px solid #daa549;*/ border-radius:50%; animation:circle-loader-spin 0.5s infinite linear}
@keyframes circle-loader-spin {
	0% {transform:rotate(0deg)}
	100% {transform:rotate(360deg)}
}

@keyframes pulse-animation {
	0% {box-shadow:0 0 0 0 rgba(var(--color-permanent-01-rgb),.8)}
	100% {box-shadow:0 0 0 25px rgba(0,0,0,.0)}
}


/* FORMS */
form {margin:0; padding:0}

input,
textarea,
select {background-color:#414141; color:#fff; font:14px var(--default-font), Arial, Helvetica, sans-serif}

textarea {-webkit-appearance:none; -webkit-border-radius:5px; outline:none; box-sizing:border-box; border-radius:5px}

input[type=text],
input[type=number],
input[type=email],
input[type=password] {-webkit-appearance:none; -webkit-border-radius:50vh; outline:none; box-sizing:border-box; vertical-align:middle; border:0 none; border-radius:50vh}

input[type=text]::placeholder,
input[type=number]::placeholder,
input[type=email]::placeholder,
input[type=password]::placeholder {font-style:italic; color:#ccc}

input[type=submit],
input[type=button] {-webkit-appearance:none; -webkit-border-radius:50vh; box-sizing:border-box; border-radius:50vh}

input[type=file] {box-sizing:border-box; background-color:#fff; color:#666; vertical-align:middle; border:1px #ddd solid}

input[type=checkbox] {accent-color:var(--color-main-01-hex); vertical-align:middle; transform:scale(1.3)}

input[type="number"] {-moz-appearance:textfield}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance:none; margin:0}

input::-moz-focus-inner {border:0; padding:0}

select {background-color:#414141; color:#fff; vertical-align:middle; outline:none; border:0 none; padding:10px 16px; width:230px; border-radius:50vh}
select::-webkit-scrollbar {width:8px}
select::-webkit-scrollbar-track {background-color:#333}
select::-webkit-scrollbar-thumb {background-color:#666}
select::after {content:''; position:absolute; top:0; right:0; bottom:0; width:20px; background-color:#666}
select option {background-color:#333 !important; color:#fff !important}
select option:hover {background-color:var(--color-main-01-hex) !important}
select option:checked {background-color:var(--color-main-01-hex) !important}


.button-default {background-color:var(--color-main-01-hex); color:#fff; padding:14px 35px; border:0 none; box-shadow:0 0 3px rgb(0 0 0 / 20%); cursor:pointer; font-size:14px; text-transform:uppercase; transition:all 200ms ease}
.button-default.wide {width:100%}
.button-default:hover {filter:brightness(1.15)}


.scrollbar-dark::-webkit-scrollbar {
	width: 8px;
}
.scrollbar-dark::-webkit-scrollbar-track {
	background-color: #111;
}
.scrollbar-dark::-webkit-scrollbar-thumb {
	background-color: #313131;
}
.scrollbar-dark::-webkit-scrollbar-thumb:hover {
	background-color: #414141;
}


/* LOGIN & REGISTER */
#pre-board {height:150px}
#board {position:relative; text-align:center}
#board-logo {display:block; max-width:100%; height:auto; margin:0 auto}
#board-forms {padding:70px 0 70px 0}
#login-form, #register-form {position:relative; display:inline-block; text-align:justify; margin:10px 0}
#register-form img {margin-left:10px}
#board-forms form {display:block; width:290px; max-width:90%; margin:0 auto}
#board-forms .check-input {display:block; width:100%; margin:0 0 10px 0; padding:15px 20px; background-color:#414141; color:#fff}
#board-forms .check-input::placeholder {color:rgba(255,255,255,0.5)}
#board-forms .check-input.error {background-color:rgba(var(--color-error-rgb),.75); background-image:url(../img/error.png); background-position:calc(100% - 15px) center; background-repeat:no-repeat}
#board-forms .check-input:focus {filter:brightness(1.25)}
#board-forms input:-webkit-autofill {-webkit-box-shadow:0 0 0 1000px #515151 inset; -webkit-text-fill-color:#fff}
#board-forms input:-webkit-autofill,
#board-forms input:-webkit-autofill:hover, 
#board-forms input:-webkit-autofill:focus,
#board-forms input:-webkit-autofill:active {transition:background-color 5000s ease-in-out 0s !important}
#board-forms input:-webkit-autofill::first-line {font:14px var(--default-font), Arial, Helvetica, sans-serif}
#board-forms input.error:-webkit-autofill {background-color:transparent !important; background-image:url(../img/error.png) !important; border:1px var(--color-error-hex) solid; -webkit-box-shadow:0 0 0 1000px var(--color-error-2-hex) inset}
#board-forms input[type=checkbox] {margin:0 8px 0 10px}
#login-form > label {color:rgba(255,255,255,0.4); font-size:13px}
#board .default-button {vertical-align:middle; background-color:#4a4a4a; padding:11px 25px}
#register {display:none}
#register .info {display:flex; flex-direction:column; gap:10px; max-width:90%; margin:40px auto 0 auto; font-size:13px; color:#aaa; font-style:italic; line-height:1.3}
.toggle-login-form {text-align:center; margin-bottom:20px}
.toggle-login-form > div {display:inline-block; border-bottom:1px rgba(255,255,255,0.3) solid; padding-bottom:1px; color:#ccc; font-size:13px; text-transform:uppercase; cursor:pointer; transition:all 200ms ease}
.toggle-login-form > div:hover {color:#fff}
.nohelp {display:inline-block; width:26px}
#register-ok {display:none; margin-bottom:30px; text-align:center}
#register-ok > div {display:inline-block; width:290px; max-width:90%; color:var(--color-success-hex); padding:15px 20px; background-color:rgba(var(--color-success-rgb),.2); box-sizing:border-box; line-height:1.5; border:1px rgba(var(--color-success-rgb),.3) solid; border-radius:3px}
.login-loading {position:absolute; right:9px; bottom:9px; display:none}
.login-loading .circle-loader-spin {width:26px; height:26px; border:3px solid rgba(255,255,255,.3); border-top:3px solid rgba(255,255,255,.9)}
#login-send, #register-send {margin:5px 0 0 0; padding:15px}


#center {position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start}


/* LEFT */
#image-full-bg {position:fixed; top:0; right:0; bottom:0; left:0; z-index:9999; background-color:rgba(31,31,31,.75); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); display:none}
#image-full-bg img {display:inline-block; max-width:80%; max-height:80%; border-radius:5px; box-shadow:0 0 50px rgba(0,0,0,.5); position:absolute; top:50%; left:50%; margin:0 -50% 0 0; transform:translate(-50%,-50%)}

#left-panel {position:relative; z-index:1; width:860px; max-width:100%; margin:var(--top-panel-height) 0 20px 0; padding:0 0 20px 0; background-color:#212121; border-radius:20px 0 20px 20px; box-shadow:0 0 5px rgba(0,0,0,0.3)}

#left-panel #top-menu {position:relative; display:grid; grid-template-columns:repeat(5, max-content); gap:10px; height:var(--top-panel-height); margin-top:calc(var(--top-panel-height) * -1)}
#left-panel #top-menu .menu {position:relative; z-index:2; display:flex; align-items:center; margin:9px 0; padding:0 25px; color:#fff; font-size:14px; font-family:Comfortaa, cursive; text-transform:uppercase; border-radius:50vh; cursor:pointer; white-space:nowrap}
#left-panel #top-menu .menu-h:hover {background-color:rgba(255,255,255,.1)}
#left-panel #top-menu #menu-selection {position:absolute; top:9px; bottom:9px; z-index:1; background-color:var(--color-main-01-hex); color:#fff; border-radius:50vh}

#left-panel #top-menu .logout {position:absolute; top:7px; right:7px; z-index:2; width:46px; height:46px; background:url(../img/logout.png) center center no-repeat; border-radius:100%; cursor:pointer}
#left-panel #top-menu .logout:hover {background-color:rgba(255,255,255,.1)}

.section-content {position:relative; overflow:hidden; min-height:200px; padding:0 20px}

#betting-info {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:40px 20px; font-size:15px; text-align:center; line-height:1.5; border-bottom:1px #313131 solid; border-radius:20px 0 0 0; cursor:pointer; transition:all 300ms ease}
#betting-info .left {text-align:right}
#betting-info .left .phase {text-transform:uppercase; color:var(--color-permanent-01-hex); font-size:24px; font-family:Comfortaa, cursive}
#betting-info .left .phase span {display:inline-block; padding:0 8px; color:var(--color-permanent-01-hex)}
#betting-info .left .deadline {margin:4px 0 0 0; color:#aaa; font-size:15px; font-style:italic}
#betting-info .center {width:1px; height:20px; margin:0 40px; background-color:rgba(255,255,255,.25)}
#betting-info .right .arrow {background-image:url(../img/arrow-circle.png); width:36px; height:36px; border-radius:100%; opacity:0.35; transition:all 300ms ease; animation:pulse-animation 1200ms infinite}
#betting-info.active {margin:0 0 50px 0; cursor:default}
#betting-info.active .right .arrow {border-radius:0; box-shadow:none; transform:rotate(90deg); animation:none}
#betting-info:hover:not(.active) {background-color:rgba(0,0,0,0.15); border-bottom:1px rgba(255,255,255,0.075) solid}

#deposit-info {display:flex; flex-direction:column; justify-content:center; align-items:center; padding:40px 20px; color:#ccc; font-size:15px; text-align:center; line-height:1.35; border-bottom:1px #313131 solid}
#deposit-info div {width:100%; padding:4px 0 15px 0; color:var(--color-permanent-01-hex); font-size:24px; white-space:nowrap}
#deposit-info img {max-width:100%; height:auto; border-radius:5px}

#betting-pre-info {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:30px 20px 40px 20px; color:#ccc; font-size:15px; text-align:center; line-height:1.5; border-bottom:1px #313131 solid}
#betting-pre-info div {width:100%; padding:12px 0 0 0}
#betting-pre-info div span {color:var(--color-permanent-01-hex)}

#loading.circle-loader-spin {position:absolute; top:25px; left:calc(50% - 19px); width:36px; height:36px; border:5px solid rgba(255,255,255,.1); border-top:5px solid var(--color-main-01-hex); display:none}
#refreshing {position:absolute; top:10px; right:15px; z-index:10; font-size:13px; color:#999; display:none}
#refreshing .circle-loader-spin {width:18px; height:18px; border:2px solid rgba(255,255,255,.2); border-top:2px solid var(--color-main-01-hex); display:inline-block; margin-right:6px; vertical-align:middle}


.new-message {position:relative; display:flex; gap:12px; padding:50px 25% 30px 0; overflow:hidden}
.new-message .avatar {width:48px; height:48px; background-position:center; background-repeat:no-repeat; background-size:100%; border-radius:100%; overflow:hidden; cursor:pointer}
.new-message .avatar .letter {padding:14px 0 0 0; color:#fff; font-size:20px; font-family:Comfortaa, cursive; text-transform:uppercase; text-align:center}
.new-message .form {flex-grow:1; flex-basis:0}
.new-message .form form {display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-end; background-color:#313131; border-radius:30px}
.new-message .form form .grow-wrap {flex-grow:1; flex-basis:0; align-self:flex-start; display:grid; overflow:hidden}
.new-message .form form .grow-wrap textarea {grid-area: 1 / 1 / 2 / 2; padding:15px 20px 13px 20px; background-color:transparent; color:#ccc; line-height:1.4; border:0 none; overflow:hidden; outline:none; resize:none}
.new-message .form form .grow-wrap textarea::placeholder {color:#999; font-style:italic}
.new-message .form form .grow-wrap::after {content: attr(data-replicated-value) " "; grid-area: 1 / 1 / 2 / 2; padding:15px 20px 13px 20px; font-size:13px; white-space:pre-wrap; word-break:break-word; visibility:hidden}
.new-message .form form .tools {display:flex; gap:5px; position:relative; padding:5px}
.new-message .form form .tools .upload-comment-image {position:relative; display:flex; justify-content:center; align-items:center; width:38px; height:38px; border-radius:100%; overflow:hidden; cursor:pointer}
.new-message .form form .tools .upload-comment-image:hover {background-color:#414141}
.new-message .form form .tools .upload-comment-image input[type=file] {position:absolute; top:-100px}
.new-message .form form .tools .new-message-send {width:38px; height:38px; background-color:var(--color-main-01-hex); background-image:url(../img/send.png); background-position:center; background-repeat:no-repeat; border:0 none; border-radius:100%; cursor:pointer}
.new-message .form form .tools .new-message-send:hover {filter:brightness(1.25)}
.new-message .form form .tools.active {display:flex}
.new-message .form .new-message-more .uploaded-images {position:relative; max-width:fit-content; max-height:200px; margin:8px 0 0 0; overflow:hidden; display:none}
.new-message .form .new-message-more .uploaded-images img {display:block; width:auto; max-width:100%; height:auto; max-height:inherit; border-radius:30px; border-top-right-radius:0}
.new-message .form .new-message-more .uploaded-images .remove {position:absolute; top:-1px; right:-1px; padding:5px 15px; background-color:rgba(0,0,0,.5); font-size:24px; color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.new-message .form .new-message-more .upload-error {background-color:var(--color-error-hex); color:#fff; margin:5px 0 0 0; padding:15px; font-size:13px; text-align:center; line-height:1.4; border-radius:30px; display:none}
.new-message .form .clone {position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(31,31,31,.6); display:none}
.new-message .form .circle-loader-spin {position:absolute; top:calc(50% - 15px); left:calc(50% - 19px); z-index:1; width:35px; height:35px; border:3px solid rgba(255,255,255,.15); border-top:3px solid var(--color-main-01-hex); display:none}

.comments-counter {padding:0 0 30px 0; text-align:center; color:var(--color-main-03-hex); display:none}

.row-comment {padding:0 0 5px 0}
.row-comment .comment {position:relative; display:flex; gap:12px; padding:0 30px 10px 0; overflow:hidden}
.row-comment .comment .avatar {width:48px; height:48px; background-position:center; background-repeat:no-repeat; background-size:100%; border-radius:100%; overflow:hidden; cursor:pointer}
.row-comment .comment .avatar .letter {padding:14px 0 0 0; color:#fff; font-size:20px; font-family:Comfortaa, cursive; text-transform:uppercase; text-align:center}
.row-comment .comment .right {position:relative; flex-grow:1; flex-basis:0}
.row-comment .comment .right .message {padding:15px 20px 5px 20px; background-color:#313131; color:#ccc; line-height:1.4; border-radius:30px}
.row-comment .comment .right .message a {word-wrap:break-word; word-break:break-word}
.row-comment .comment .right .message .name span {color:#fff; font-weight:500; cursor:pointer}
.row-comment .comment .right .message .text {padding:2px 0 10px 0; word-break:break-word; word-wrap:break-word}
.row-comment .comment .right .message .break {height:5px}
.row-comment .comment .right .message .image {position:relative; max-width:480px; padding:0 0 15px 0; cursor:pointer}
.row-comment .comment .right .message .image img {display:block; width:auto; max-width:100%; height:auto; max-height:480px; border-radius:10px; transition:all 200ms ease}
.row-comment .comment .right .message .image .animation {position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); width:60px; height:60px; border-radius:100%; background:rgba(0,0,0,.5); font:18px Comfortaa, cursive; color:#ccc; text-transform:uppercase; text-align:center; line-height:64px; box-shadow:0 0 0 4px rgb(255 255 255 / 30%); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.row-comment .comment .right .bottom {padding:0 0 0 20px; font-size:12px; font-weight:500; text-transform:uppercase}
.row-comment .comment .right .bottom .time {color:#999}
.row-comment .comment .right .bottom .reply {cursor:pointer; color:var(--color-main-03-hex)}
.row-comment .comment .right .bottom .reply:hover {text-decoration:underline}
.row-comment .comment .right .bottom .dot {display:inline-block; padding:0 5px; color:#666; font-size:22px; vertical-align:middle; line-height:1.4}
.row-comment .comment.new .right .message {background-color:rgba(var(--color-main-03-rgb),.15)}

.row-comment .answer-box {position:relative; align-items:flex-start; gap:10px; padding:0 25% 20px 90px; display:none}
.row-comment .answer-box .avatar {width:36px; height:36px; background-position:center; background-repeat:no-repeat; background-size:100%; border-radius:100%; overflow:hidden; cursor:pointer}
.row-comment .answer-box .avatar .letter {padding:11px 0 0 0; color:#fff; font-size:16px; font-family:Comfortaa, cursive; text-transform:uppercase; text-align:center}
.row-comment .answer-box .form {flex-grow:1; flex-basis:0}
.row-comment .answer-box .form form {display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:flex-end; background-color:#313131; border-radius:30px}
.row-comment .answer-box .form form .grow-wrap {flex-grow:1; flex-basis:0; align-self:flex-start; display:grid; overflow:hidden}
.row-comment .answer-box .form form .grow-wrap textarea {grid-area: 1 / 1 / 2 / 2; padding:15px 20px 13px 20px; background-color:transparent; color:#ccc; line-height:1.4; border:0 none; overflow:hidden; outline:none; resize:none}
.row-comment .answer-box .form form .grow-wrap textarea::placeholder {font-style:italic}
.row-comment .answer-box .form form .grow-wrap::after {content: attr(data-replicated-value) " "; grid-area: 1 / 1 / 2 / 2; padding:15px 20px 13px 20px; font-size:13px; white-space:pre-wrap; word-break:break-word; visibility:hidden}
.row-comment .answer-box .form form .tools {display:flex; gap:5px; position:relative; padding:5px}
.row-comment .answer-box .form form .tools .upload-comment-image {position:relative; display:flex; justify-content:center; align-items:center; width:38px; height:38px; background-color:rgba(255,255,255,.25); border-radius:100%; overflow:hidden; cursor:pointer}
.row-comment .answer-box .form form .tools .upload-comment-image:hover {background-color:rgba(255,255,255,.3)}
.row-comment .answer-box .form form .tools .upload-comment-image input[type=file] {position:absolute; top:-100px}
.row-comment .answer-box .form form .tools .answer-message-send {width:38px; height:38px; background-color:var(--color-main-01-hex); background-image:url(../img/send.png); background-position:center; background-repeat:no-repeat; border:0 none; border-radius:100%; cursor:pointer}
.row-comment .answer-box .form form .tools .answer-message-send:hover {filter:brightness(1.15)}
.row-comment .answer-box .form form .tools.active {display:flex}
.row-comment .answer-box .form .upload-error {background-color:var(--color-error-hex); color:#fff; margin:5px 0 0 0; padding:15px; font-size:13px; text-align:center; line-height:1.4; border-radius:30px; display:none}
.row-comment .answer-box .form .uploaded-images {position:relative; max-width:fit-content; max-height:200px; margin:8px 0 0 0; overflow:hidden; display:none}
.row-comment .answer-box .form .uploaded-images img {display:block; width:auto; max-width:100%; height:auto; max-height:inherit; border-radius:30px; border-top-right-radius:0}
.row-comment .answer-box .form .uploaded-images .remove {position:absolute; top:-1px; right:-1px; padding:5px 15px; background-color:rgba(0,0,0,.5); font-size:24px; color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.row-comment .answer-box .form .clone {position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(31,31,31,.6); display:none}
.row-comment .answer-box .form .circle-loader-spin {position:absolute; top:calc(50% - 13px); right:calc(50% - 13px); z-index:1; width:24px; height:24px; border:2px solid rgba(255,255,255,.15); border-top:2px solid var(--color-main-01-hex); display:none}
.row-comment .answer-box.active {display:flex}

.row-comment .comment-answers .answer {position:relative; display:flex; gap:10px; align-items:flex-start; padding:0 30px 10px 90px}
.row-comment .comment-answers .answer .left .avatar {width:36px; height:36px; background-position:center; background-repeat:no-repeat; background-size:100%; border-radius:100%; overflow:hidden; cursor:pointer}
.row-comment .comment-answers .answer .left .avatar .letter {padding:11px 0 0 0; color:#fff; font-size:16px; font-family:Comfortaa, cursive; text-transform:uppercase; text-align:center}
.row-comment .comment-answers .answer .right {position:relative; flex-grow:1; flex-basis:0}
.row-comment .comment-answers .answer .right .message {padding:15px 20px 5px 20px; background-color:#313131; color:#ccc; line-height:1.4; border-radius:30px}
.row-comment .comment-answers .answer .right .message a {word-wrap:break-word; word-break:break-word}
.row-comment .comment-answers .answer .right .message .name span {color:#fff; font-weight:500; cursor:pointer}
.row-comment .comment-answers .answer .right .message .text {padding:2px 0 10px 0}
.row-comment .comment-answers .answer .right .message .break {height:5px}
.row-comment .comment-answers .answer .right .message .image {position:relative; max-width:480px; padding:0 0 15px 0; cursor:pointer}
.row-comment .comment-answers .answer .right .message .image img {display:block; width:auto; max-width:100%; height:auto; max-height:480px; border-radius:5px; transition:all 200ms ease}
.row-comment .comment-answers .answer .right .message .image .animation {position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); width:60px; height:60px; border-radius:100%; background:rgba(0,0,0,.5); font:18px Comfortaa, cursive; color:#ccc; text-transform:uppercase; text-align:center; line-height:64px; box-shadow:0 0 0 4px rgb(255 255 255 / 30%); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.row-comment .comment-answers .answer .right .bottom {padding:0 0 0 20px; font-size:12px; font-weight:500; text-transform:uppercase}
.row-comment .comment-answers .answer .right .bottom .time {color:#999; white-space:nowrap}
.row-comment .comment-answers .answer .right .bottom .reply {cursor:pointer; color:var(--color-main-03-hex)}
.row-comment .comment-answers .answer .right .bottom .reply:hover {text-decoration:underline}
.row-comment .comment-answers .answer .right .bottom .dot {display:inline-block; padding:0 5px; color:#666; font-size:22px; vertical-align:middle; line-height:1.4}
.row-comment .comment-answers .answer.new .right .message {background-color:rgba(var(--color-main-03-rgb),.15)}


.captions {border-radius:15px; overflow:hidden}
.captions .row {position:relative; margin:0 0 1px 0; overflow:hidden}

.captions .row .caption {position:relative; z-index:1; color:#fff; padding:20px 80px 18px 30px; text-transform:uppercase; font-size:13px; font-family:Comfortaa, cursive; line-height:1.7; cursor:pointer; transition:all 150ms ease}
.captions .row .caption::before {content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; background-color:#414141}
.captions .row .caption::after {content:''; position:absolute; top:calc(50% - 3px); right:30px; background:url(../img/arrow.png) 0 0 no-repeat; width:15px; height:8px; overflow:hidden; transition:all 100ms ease}
.captions .row .caption .high {font-size:15px; color:#fff}
.captions .row .caption.active {color:#fff}
.captions .row .caption.active::before {background-color:#515151}
.captions .row .caption.active::after {transform:rotate(180deg)}
@media (hover:hover) {
	.captions .row .caption:hover::before {background-color:#515151}
}

.captions .row .section {display:none; flex-direction:column; gap:20px; padding:20px; background-color:#313131; color:#ccc; line-height:1.4; opacity:0; transition:opacity 900ms ease-in-out}
.captions .row .section .area {padding:25px; background-color:#414141; border-radius:15px; line-height:1.45}
.captions .row .section .area .line-break-10 {height:10px}
.captions .row .section .area .line-break-20 {height:20px}
.captions .row .section .area .list {display:grid; grid-template-columns:min-content auto; align-items:start; gap:8px 10px; line-height:1.3; counter-reset:list-number}
.captions .row .section .area .list .number::before {counter-increment:list-number; content:counter(list-number) '.'}
.captions .row .section .area .list .mark::before {content:''; display:block; width:4px; height:4px; margin:7px 0 0 0; background-color:#ccc; border-radius:100%}
.captions .row .section .area-2 {padding:0 10px}
.captions .row .section .area-2 p {padding:0 0 20px 0}
.captions .row .section .area-2 p span {color:#fff; font-weight:500}
.captions .row .section .area-3 {}
.captions .row .section .area-3 .line-break-10 {height:10px}
.captions .row .section .area-3 .line-break-20 {height:20px}
.captions .row .section.active {display:flex; opacity:1}
.captions .row .section.simple {gap:0}

.captions.rules .row .section .area strong {color:var(--color-permanent-02-hex); font-weight:500}
.captions.rules .row .section .area .example {color:rgba(var(--color-permanent-01-rgb),0.8); font-size:13px; font-style:italic; line-height:1.6}
.captions.rules .row .section .area .example label {display:block; padding:0 0 5px 0; font-weight:500}
.captions.rules .row .section .area ul {padding:0 15px}
.captions.rules .row .section .area ul li {padding:0 0 0 8px; line-height:1.35}
.captions.rules .row .section .area ol {padding:0 15px}
.captions.rules .row .section .area ol li {padding:0 0 0 8px; line-height:1.35}
.captions.rules .row .section .area #rules-table {display:grid; grid-template-columns:repeat(3, 1fr); grid-gap:1px; border-radius:15px; overflow:hidden}
.captions.rules .row .section .area #rules-table .phase {grid-column:span 3; background-color:rgba(255,255,255,0.05); color:rgba(var(--color-permanent-01-rgb),0.8)}
.captions.rules .row .section .area #rules-table > div {display:flex; justify-content:center; align-items:center; padding:14px 16px; background-color:#515151; color:#fff; font-size:13px; text-align:center; line-height:1.4}
/*.captions.rules .row .section .area #rules-table > div:nth-child(4n+1) {text-align:left}*/

.captions.overview h2 {margin:0 0 3px 10px}

.captions .row:last-child .caption {border-bottom:0}

.summary {display:flex; align-items:center; background-color:#313131; margin:0 0 20px 0; padding:30px; border-radius:15px}
.summary .left {width:40px; height:40px; background-image:url(../img/info.png); background-size:cover}
.summary .center {flex:0 0 1px; height:20px; margin:0 15px; /*background-color:rgba(0,0,0,.15)*/}
.summary .right {flex-grow:1; flex-basis:0; color:#ccc; font-size:14px; font-style:italic; line-height:1.5}
.summary .right p {color:#777; font-size:12px; margin:15px 0 0 0}
.summary .right p > label {color:#333; font-size:13px}
.summary .right span {color:var(--color-permanent-01-hex)}
.summary .right span.nowrap {white-space:nowrap}
.ch-check {margin:0 6px 0 0}
.note {font-style:italic; color:#777}
.empty {font-style:italic; color:#aaa; padding:50px; text-align:center}


.avatar-new {position:relative}
.avatar-new .crop {position:relative; margin:0 0 10px 0; border-radius:3px; overflow:hidden; display:none}
.avatar-new .crop .window {position:absolute; top:calc(50% - 90px); left:calc(50% - 90px); width:0; height:0; box-shadow:0 0 0 1000px rgba(255,255,255,0.6), 0 0 50px rgba(255,255,255,0.4), inset 0 0 0 1px rgba(0,0,0,0.15); cursor:move}
.avatar-new .crop img {min-width:200px; min-height:200px; max-width:100%; max-height:100%; margin-bottom:-6px; display:none}
.avatar-new .error {margin:0 0 20px 0; color:var(--color-error-hex); font-weight:500; line-height:1.4; display:none}
.avatar-new .success {margin:0 0 20px 0; color:var(--color-success-2-hex); font-weight:500; line-height:1.4; display:none}
.avatar-new .tools {position:relative; display:flex; flex-wrap:wrap; gap:10px; overflow:hidden}
.avatar-new .info {margin:0 0 20px 0; display:none}
.avatar-new input[type=file] {position:absolute; top:-200px}
.avatar-new .remove {display:none}
.avatar-new .save {display:none}
.avatar-new .clone {position:absolute; top:-30px; right:-30px; bottom:-30px; left:-30px; background-color:rgba(0,0,0,.75); display:none}
.avatar-new .circle-loader-spin {position:absolute; bottom:7px; right:0; z-index:1; width:24px; height:24px; border:3px solid rgba(0,0,0,0.2); border-top:3px solid var(--color-main-01-hex); display:none}


#mail-change-form > input[type=email],
#pass-change-form > input[type=text],
#pass-change-form > input[type=password] {width:360px; max-width:100%; margin-bottom:5px; padding:14px 20px; background-color:#414141}
/*#pass-change-form > input:-webkit-autofill {-webkit-box-shadow:0 0 0 1000px var(--color-06-hex) inset; -webkit-text-fill-color:#fff; border:1px var(--color-06-hex) solid}*/
#mail-change-error, #pass-change-error {padding-left:10px; color:var(--color-error-hex); display:none}
#mail-change-ok, #pass-change-ok {padding-left:10px; color:#0dce83; display:none}


.betting {padding:20px 0 0 0}

.betting select {-webkit-appearance:none; -moz-appearance:none; appearance:none; width:300px; padding:12px 20px; cursor:pointer}

.betting .betting-step {display:flex; justify-content:space-between; background-color:#111; border-radius:15px 15px 0 0; overflow:hidden}
.betting .betting-step .title {flex-grow:1; flex-basis:0; padding:22px 20px 17px 25px; line-height:1.4; color:#fff; font-size:15px; font-family:Comfortaa, cursive; font-weight:700; text-transform:uppercase}
/*.betting .betting-step .title.advanced {padding:20px 20px 15px 20px}*/
.betting .betting-step .step {display:flex; align-items:center; padding:0 30px; background-color:var(--color-permanent-02-hex); color:#000; text-align:center; font-size:24px; font-weight:500; font-family:Comfortaa, cursive; text-transform:uppercase}
.betting .betting-step .step span {font-size:12px; font-weight:700; padding-right:8px}

.betting .betting-help {padding:25px; background-color:#414141; color:#ccc; font-size:14px; font-style:italic; line-height:1.5}
.betting .betting-help > ol, .betting-help > ul {padding-left:15px}
.betting .betting-help li {padding:0 0 20px 5px}
.betting .betting-help li:last-child {padding:0 0 0 5px}
.betting .betting-help li::marker {color:#fff}
.betting .betting-help strong {color:rgba(255,255,255,.9)}
.betting .betting-help div {padding:0 0 3px 0; color:#fff}
.betting .betting-help span {color:var(--color-permanent-01-hex); font-weight:500}
.betting .betting-help p {padding:0 0 20px 0}
.betting .betting-help .important {color:var(--color-permanent-02-hex); font-weight:700}
/*.betting .betting-help.advanced {margin:0 0 20px 0; border-radius:0 0 15px 15px}*/

.betting-content {background-color:#313131; margin:0 0 20px 0; padding:25px 20px; border-radius:0 0 15px 15px}
/*.betting-content.advanced {}
.betting-content.advanced > div:first-child .match-row {border-top-left-radius:5px; border-top-right-radius:5px}
.betting-content.advanced > div:last-child .match-row {border-bottom-left-radius:5px; border-bottom-right-radius:5px}*/

.betting-content .number {border:0 none; width:60px; padding:8px 0; margin:0 3px; z-index:1; border-radius:5px; text-align:center; background-color:#414141; color:var(--color-success-hex)}
.betting-content .number.focused {background-color:rgba(0,0,0,.2); border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:0 0 0 2px rgba(var(--color-permanent-01-rgb),.4)}
.betting-content .number-select-wraper {position:relative; display:inline-block; line-height:normal}
.betting-content .number-select {position:absolute; background-color:#1f1f1f; border:2px rgba(var(--color-permanent-01-rgb),.4) solid; border-top:0; border-radius:3px; border-top-left-radius:0; border-top-right-radius:0; color:#ccc; z-index:3; box-shadow:0 10px 10px rgba(0,0,0,.5)}
.betting-content .number-select .num {padding:7px 0; line-height:normal; font-size:14px; text-align:center; cursor:pointer}
.betting-content .number-select .num:not(:last-child) {border-bottom:1px rgba(var(--color-permanent-01-rgb),.1) solid}
.betting-content .number-select .num:hover {color:#fff; background-color:rgba(var(--color-permanent-01-rgb),.8); color:#000}

.betting-content .match-group {display:flex; flex-direction:column; gap:1px; margin:0 0 20px 0; border-radius:15px; overflow:hidden}
.betting-content .match-group .mark {padding:18px 20px; background-color:#414141; color:#fff; font-size:11px; font-family:Comfortaa, cursive; text-transform:uppercase}
.betting-content .match-group:last-child {margin:0}
.betting-content .betting-match {}

.betting-content .match-row {display:flex; align-items:center; justify-content:space-between; background-color:#515151; color:#fff; padding:14px 20px; cursor:pointer}
/*.betting-content .match-row .team-1 {flex-grow:1; width:25%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right}*/
/*.betting-content .match-row .results {display:flex; align-items:center; padding:0 8px}*/
/*.betting-content .match-row .team-2 {flex-grow:1; width:25%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}*/
/*.betting-content .match-row .result.wrong {background-color:rgba(var(--color-error-rgb),.2); color:var(--color-error-hex)}*/
/*.betting-content .match-row .separator {flex-grow:1; min-width:10px}*/
.betting-content .match-row .match-toggle {width:6px; height:13px; border-width:0 3px 3px 0; border-color:transparent; border-style:solid; transform:rotate(45deg)}
.betting-content .match-row .match-toggle.completed {border-color:var(--color-success-hex)}
/*.betting-content .match-row.active {background-color:rgba(var(--color-permanent-01-rgb),.175); box-shadow:0 0 40px rgba(0,0,0,.75); transform:scale(1.05); border-radius:0 !important}
.betting-content .match-row.active .match-toggle {transform:rotate(180deg)}*/
.betting-content .match-row:hover {filter:brightness(1.2)}

.betting-content .strikers {position:fixed; inset:0; z-index:999; display:grid; justify-content:center; padding:15px; background-color:rgba(81,81,81,0.75); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); transform:translateX(-100%)}
.betting-content .strikers .center {display:grid; grid-template-rows:min-content auto; max-width:860px; background-color:#212121; border-radius:20px; box-shadow:0 0 10px rgba(0,0,0,0.5); overflow:hidden; transition:all 250ms ease; transform:scale(0); opacity:0}
.betting-content .strikers .center .top-panel {display:flex; justify-content:center; padding:15px; color:#fff; border-bottom:1px #313131 solid}
.betting-content .strikers .center .top-panel .close {padding:10px 50px; background-color:var(--color-main-01-hex); color:#fff; font-size:12px; text-transform:uppercase; border-radius:50vh; cursor:pointer}
.betting-content .strikers .center .top-panel .close:hover {filter:brightness(1.2)}
.betting-content .strikers .center .list {display:flex; flex-direction:column; gap:20px; padding:20px; color:#fff; font-size:13px; overflow:hidden; overflow-y:auto}
.betting-content .strikers .center .list .comp {background-color:#313131; border-radius:15px}
.betting-content .strikers .center .list .comp .heading {padding:15px 20px; background-color:#414141; color:#fff; text-transform:uppercase; font-size:16px; border-radius:15px 15px 0 0}
.betting-content .strikers .center .list .comp .desc {padding:20px; color:var(--color-permanent-01-hex); font-style:italic; border-bottom:1px #414141 solid}
.betting-content .strikers .center .list .comp .desc .important {color:var(--color-permanent-02-hex); font-weight:700}
.betting-content .strikers .center .list .comp .results {display:flex; align-items:center; gap:4px; padding:20px}
.betting-content .strikers .center .list .comp .results .team-1 {padding:0 10px 0 0}
.betting-content .strikers .center .list .comp .results .team-2 {padding:0 0 0 10px}
.betting-content .strikers .center .list .comp .results .result.wrong {background-color:rgba(var(--color-error-rgb),.2); color:var(--color-error-hex)}
.betting-content .strikers .center .list .comp .chance {display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; padding:20px}
.betting-content .strikers .center .list .comp .chance .item {padding:15px; background-color:#414141; color:#ccc; text-align:center; border-radius:50vh; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.betting-content .strikers .center .list .comp .chance .item.selected {background-color:rgba(var(--color-main-03-rgb),0.2); color:var(--color-success-hex); cursor:default}
.betting-content .strikers .center .list .comp .chance .item:not(.selected):hover {filter:brightness(1.2)}
.betting-content .strikers .center .list .comp .fortune {display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; padding:20px}
.betting-content .strikers .center .list .comp .fortune .item {padding:15px; background-color:#414141; color:#ccc; text-align:center; border-radius:50vh; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer}
.betting-content .strikers .center .list .comp .fortune .item.selected {background-color:rgba(var(--color-main-03-rgb),0.2); color:var(--color-success-hex); cursor:default}
.betting-content .strikers .center .list .comp .fortune .item:not(.selected):hover {filter:brightness(1.2)}
.betting-content .strikers .center .list .comp .boxes {display:flex; flex-flow:wrap; justify-content:space-between}
.betting-content .strikers .center .list .comp .boxes .strikers-0 {position:relative; width:100%; padding:20px 20px 15px 20px; line-height:1.4; border-bottom:1px #414141 solid}
.betting-content .strikers .center .list .comp .boxes .strikers-1 {position:relative; padding:5px 20px 20px 20px; flex-grow:1; flex-basis:0}
.betting-content .strikers .center .list .comp .boxes .strikers-2 {position:relative; padding:5px 20px 20px 20px; flex-grow:1; flex-basis:0}
.betting-content .strikers .center .list .comp .boxes .strikers-line {width:1px; border-left:1px #414141 solid}
.betting-content .strikers .center .list .comp .boxes .team-name {position:absolute; top:8px; right:28px; width:1px; white-space:nowrap; font-size:20px; color:#999; transform:rotate(90deg); font-family:Comfortaa, cursive; text-transform:uppercase}
.betting-content .strikers .center .list .comp .boxes .strikers-position-name {padding:12px 0 2px 0; color:var(--color-permanent-02-hex); text-transform:uppercase}
.betting-content .strikers .center .list .comp .boxes .strikers-pos {max-width:85%}
.betting-content .strikers .center .list .comp .boxes .striker-name {position:relative; display:inline-block; padding:4px 0 3px 0; line-height:1.3; cursor:pointer}
.betting-content .strikers .center .list .comp .boxes .striker-name text {position:absolute; top:0; left:-10px; font-size:17px; color:var(--color-error-hex); font-weight:700}
.betting-content .strikers .center .list .comp .boxes .striker-name span {color:#999}
.betting-content .strikers.active {transform:translateX(0)}
.betting-content .strikers.active .center {transform:scale(1); opacity:1}

@media (hover:hover) {
	.betting-content .strikers .center .list .comp .boxes .striker-name:hover:not(.selected) {background-color:rgba(var(--color-permanent-01-rgb),.1); margin:0 0 0 -8px; padding:4px 8px 3px 8px; box-shadow:0 0 0 2px var(--color-permanent-01-hex); border-radius:50vh}
}
/*@media (hover:none) {
	.betting-content .strikers .striker-name:hover:not(.selected) {background-color:rgba(var(--color-permanent-01-rgb),.1); margin:0 0 0 -4px; padding:3px 4px; box-shadow:0 0 0 2px var(--color-permanent-01-hex); border-radius:2px}
}*/
.betting-content .strikers .center .list .comp .boxes .striker-name.selected {background-color:rgba(var(--color-main-03-rgb),0.2); margin:0 0 0 -8px; padding:4px 8px 3px 8px; box-shadow:0 0 0 2px var(--color-success-hex); border-radius:50vh}
.betting-content .strikers .center .list .comp .boxes .striker-out {/*text-decoration:line-through*/}

.betting-content .gorder-teams {display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; padding:0 0 10px 0}
.betting-content .gorder-teams .gorder-tender {background-color:#414141; color:#fff; padding:12px 0; text-align:center; border-radius:50vh; white-space:nowrap; cursor:move; z-index:2}
.betting-content .gorder-teams .gorder-tender.ui-draggable-disabled {color:#ccc; opacity:0.5; cursor:default}
.betting-content .gorder-teams .gorder-tender.ui-draggable-dragging {padding:12px 50px; background-color:rgba(var(--color-permanent-01-rgb),0.75); color:#000; font-weight:600}
.betting-content .gorder-teams .gorder-tender:not(.ui-draggable-disabled):hover {filter:brightness(1.2)}
/*@media (hover:hover) {
	.betting-content .gorder-teams .gorder-tender:not(.ui-draggable-disabled):hover {background-color:rgba(255,255,255,.15)}
}*/
/*@media (hover:none) {
	.betting-content .gorder-teams .gorder-tender:not(.ui-draggable-disabled):hover {background-color:rgba(255,255,255,.1)}
}*/
.betting-content .gorder-teams.grp {display:grid; grid-template-columns:50px repeat(4, 1fr)}
.betting-content .gorder-teams.grp .group {display:flex; justify-content:center; align-items:center; padding:5px 0 0 0; font-size:26px; font-family:Comfortaa, cursive; color:#fff}

.betting-content .gorder {display:flex; flex-direction:column; gap:8px; padding:0 0 30px 0}
.betting-content .gorder:last-child {padding:0}

.betting-content .gorder-stage {position:relative; background-color:#212121; height:54px; line-height:54px; border-radius:50vh}
.betting-content .gorder-stage .order {position:absolute; top:1px; bottom:0; left:20px; z-index:2; color:#ccc; font-family:Comfortaa, cursive; font-size:15px}
.betting-content .gorder-stage .tender-a {position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(var(--color-main-03-rgb),.2); border-radius:inherit; padding:0 0 0 50px; color:var(--color-success-hex); font-size:15px; opacity:1; z-index:1; display:none}
.betting-content .gorder-stage .tender-a .gorder-tender-close {position:absolute; top:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; width:50px; cursor:pointer; filter:brightness(75%)}
.betting-content .gorder-stage .tender-a .gorder-tender-close::before {content:''; position:absolute; left:50%; height:15px; width:1px; background-color:#fff; transform:rotate(45deg)}
.betting-content .gorder-stage .tender-a .gorder-tender-close::after {content:''; position:absolute; left:50%; height:15px; width:1px; background-color:#fff; transform:rotate(-45deg)}
.betting-content .gorder-stage .tender-a .gorder-tender-close:hover {filter:brightness(100%)}
.betting-content .gorder-stage.ui-droppable-disabled .order {color:#fff}
.betting-content .gorder-stage.hovered {filter:brightness(0.9)}
.betting-content .gorder-stage:first-child {margin:0 20px}

.betting-content .attdef {display:flex; flex-direction:column; gap:20px}
.betting-content .attdef div {display:flex; align-items:center; gap:10px}
.betting-content .attdef div label {color:#fff; font-size:16px}
.betting-content .attdef div select {color:var(--color-success-hex)}
.betting-content .attdef div select option:checked {background-color:var(--color-success-hex) !important; color:#000 !important}

.betting-content #strikers-select .top {display:flex; flex-wrap:wrap; gap:10px}
.betting-content #strikers-select .top .options {display:flex; flex-wrap:wrap; gap:10px}
.betting-content #strikers-select .top .options .option {display:flex; align-items:center; padding:0 0 0 20px; white-space:nowrap}
.betting-content #strikers-select .top .options .option label {padding:0 0 0 3px; font-size:13px; color:#aaa}
.betting-content .no-striker {display:none}
.betting-content .squad {display:none}
.betting-content .squad-show {display:block}
.betting-content .squad > div {display:flex; flex-direction:column; gap:5px; padding:15px 0 0 0}
.betting-content .striker-tender {background-color:#414141; color:#fff; padding:12px 20px; border-radius:50vh; white-space:nowrap; cursor:pointer}
.betting-content .striker-tender > span {color:#999; font-size:12px}
.betting-content .striker-tender:hover {filter:brightness(1.2)}
.betting-content .strikers-top {background-color:#414141; color:#ccc; padding:10px 20px; border-radius:50vh; white-space:nowrap; cursor:default; opacity:.3}
.betting-content .strikers-top > span {color:rgba(255,255,255,.6); font-size:13px; display:none}
.betting-content .striker-tender-off {background-color:rgba(255,255,255,.1); color:#fff; padding:10px 20px; border-radius:50vh; white-space:nowrap; cursor:default; opacity:.3}
.betting-content .striker-tender-off > span {color:rgba(255,255,255,.6); font-size:13px; display:none}
.betting-content #strikers-stage {padding:20px 0 0 0}
.betting-content #strikers-stage #strikers-counter {padding:20px 0 0 20px; color:#ccc; font-family:Comfortaa, cursive; font-size:27px; border-top:1px #414141 dashed}
.betting-content #strikers-stage .striker-top {position:relative; background-color:rgba(var(--color-main-03-rgb),.2); color:var(--color-success-hex); font-size:15px; margin:8px 0 0 0; padding:12px 25px; border-radius:50vh; display:none}
.betting-content #strikers-stage .striker-top-rem {position:absolute; top:0; right:0; bottom:0; display:flex; justify-content:center; align-items:center; width:50px; cursor:pointer; filter:brightness(75%)}
.betting-content #strikers-stage .striker-top-rem::before {content:''; position:absolute; left:50%; height:15px; width:1px; background-color:#fff; transform:rotate(45deg)}
.betting-content #strikers-stage .striker-top-rem::after {content:''; position:absolute; left:50%; height:15px; width:1px; background-color:#fff; transform:rotate(-45deg)}
.betting-content #strikers-stage .striker-top-rem:hover {filter:brightness(100%)}

.betting-content-last {padding:40px 0; background-color:#313131; border-radius:0 0 15px 15px}
.betting-checker {color:#fff; font-size:18px; text-align:center}
.betting-checker > span {font-size:24px; font-family:Comfortaa, cursive}
.betting-checker > span > span {font-size:40px; display:inline-block; margin-right:4px}
.betting-checker > text {color:#aaa; font-size:13px; display:block; padding:10px 5% 0 5%; line-height:1.3}

/*#betting-save {margin-right:20px}*/
#betting-save, #betting-close-ask, #betting-advanced-close-ask {padding:16px 60px; background-color:var(--color-main-01-hex); color:#fff; font-size:18px; text-transform:uppercase; border:0 none; border-radius:50vh; cursor:pointer}
#betting-save:hover, #betting-close-ask:hover, #betting-advanced-close-ask:hover {filter:brightness(1.15)}
.betting-content-buttons {position:relative; text-align:center; margin-top:20px}

#betting-done-top {position:fixed; top:0; right:0; bottom:0; left:0; z-index:999; background-color:rgba(81,81,81,0.75); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:none}
#betting-done-center {display:flex; justify-content:center; align-items:center; width:100%; height:100%}
#betting-done {position:relative; width:90%; max-width:580px; box-sizing:border-box; background-color:#212121; box-shadow:0 0 10px rgba(0,0,0,0.5); border-radius:20px; color:#ccc; overflow:hidden}
#betting-done .text {text-align:center; padding:35px 8%; font-size:15px; line-height:1.5}
#betting-done .warn {display:none; padding:35px 8%; background-color:#000; color:var(--color-error-2-hex); text-align:center; font-size:15px; font-weight:600; line-height:1.5}
#betting-done .warn.active {display:block}
#betting-done .buttons {display:grid; gap:20px; padding:0 8% 35px 8%}
#betting-done .buttons .betting-close {background-color:var(--color-main-01-hex)}
#betting-done .mask {position:absolute; inset:0; display:none; justify-content:center; align-items:center; background-color:rgba(0,0,0,0.75)}
#betting-done .circle-loader-spin {width:50px; height:50px; border:5px solid rgba(255,255,255,.2); border-top:5px solid var(--color-main-01-hex)}
#betting-done .mask.active {display:flex}
#betting-close-no, #betting-close, #betting-advanced-close-no, #betting-send {flex-grow:1; padding:16px 0; font-size:15px; cursor:pointer; border:0 none; border-radius:50vh; background-color:#414141; color:#fff}
#betting-close-no:hover, #betting-close:hover, #betting-advanced-close-no:hover, #betting-send:hover {filter:brightness(1.2)}

.buttons-advanced {margin-top:20px; text-align:center}


.scroring-status {border-radius:15px; overflow:hidden}
.scroring-status .item {display:flex; justify-content:space-between; align-items:center; margin:0 0 1px 0; padding:20px 30px; background-color:#313131; color:#ccc}
.scroring-status .item.progress {color:var(--color-permanent-01-hex)}
.scroring-status .item.done {color:var(--color-success-hex)}
.scroring-status .item:last-child {margin:0}


.user-overview-top {display:grid; grid-template-columns:180px auto; align-items:center; gap:30px; padding:20px; background-color:#313131; border-radius:15px}
.user-overview-top .avatar {display:flex; justify-content:center; align-items:center; width:180px; height:180px; border-radius:100%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden; opacity:1; transform:scale(1); transition:all 600ms ease}
.user-overview-top .avatar .letter {padding:10px 0 0 0; color:#fff; font-size:86px; font-family:Comfortaa, cursive; text-transform:uppercase}
.user-overview-top .avatar.reloading {opacity:0; transform:scale(0)}
.user-overview-top .status {}
.user-overview-top .status .points {color:var(--color-permanent-01-hex); font-size:32px}
.user-overview-top .status .note {font-size:14px; color:#aaa; font-style:italic; line-height:1.3}
.user-overview-top .overview {grid-column:span 2; border-radius:15px; overflow:hidden}
.user-overview-top .overview .item {display:grid; grid-template-columns:auto min-content; gap:20px; margin:0 0 1px 0; padding:18px 20px; background-color:#414141; line-height:1.3}
.user-overview-top .overview .item .text {color:#ccc}
.user-overview-top .overview .item .value {color:#fff; padding:0 0 0 8px}

.user-overview-history {padding:30px; background-color:#313131; border-radius:15px}
.user-overview-history .participation {}
.user-overview-history .awards-list {display:flex; gap:8px; padding:20px 0 0 0}
.user-overview-history .awards-none {padding:10px 0 0 0; color:#aaa; font-style:italic}

.user-overview-list {display:flex; flex-direction:column; gap:5px; padding:18px 20px; background-color:#414141; border-radius:15px}
.user-overview-list > div > span {display:inline-block; width:20px; font-size:13px}

.user-overview-groups {display:grid; grid-template-columns:repeat(2, 1fr); grid-gap:8px}
.user-overview-groups .group .name {padding:0 0 2px 18px; color:#fff; font-size:16px}
.user-overview-groups .group .teams {border-radius:15px; overflow:hidden}
.user-overview-groups .group .teams .row {background-color:#414141; margin:0 0 1px 0; padding:12px 20px}
.user-overview-groups .group .teams .row span {display:inline-block; width:20px; font-size:13px}
.user-overview-groups .group .teams .row:last-child {margin:0}

.results-content-group-name {padding:5px 0 2px 18px; color:#fff; font-size:16px}
.results-content-matches {border-radius:15px; overflow:hidden}
.results-content-matches .results-content {display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; background-color:#414141; margin:0 0 1px 0; padding:12px 20px}
.results-content-matches .results-content .teams {flex-grow:1; flex-basis:0}
.results-content-matches .results-content .score {padding:0 5%}
.results-content-matches .results-content .ftn {padding:0 5%}
.results-content-matches .results-content .striker {flex-grow:1; flex-basis:0}
.results-content-matches .results-content .striker span {font-size:13px}
.results-content-matches .results-content .chnc {width:9%; text-align:right}
.results-content-matches .results-content:last-child {margin:0}


.comp-content-title {padding:20px; background-color:#414141; border-radius:15px; overflow:hidden}

.comp-content-title .comp-header {padding:0 0 15px 15px; color:var(--color-permanent-01-hex); text-transform:uppercase; font-family:Comfortaa, cursive; font-weight:600}
.comp-content-title .comp-header.closed {border-radius:15px}

.comp-real {color:rgba(var(--color-permanent-01-rgb),.75); border-radius:15px 15px 0 0; overflow:hidden}
.comp-real.comp-order {display:grid; grid-template-columns:repeat(4, 1fr); gap:1px}
.comp-real.comp-order2 {display:grid; grid-template-columns:repeat(2, 1fr); gap:1px}
.comp-real > div {padding:15px 20px; background-color:#212121; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.comp-real .small {padding:0 10px 0 0; font-size:12px}
.comp-real.closed {border-radius:15px}

.comp-hidden-content {position:relative; display:flex; flex-direction:column; gap:1px; border-radius:0 0 15px 15px; overflow:hidden}
.comp-hidden-content .item {}
.comp-hidden-content .item .comp-bet-name {display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 0 1px 0; padding:15px 20px 5px 20px; background-color:#515151; color:var(--color-permanent-01-hex)}
.comp-hidden-content .item .comp-bet-name.success {color:var(--color-success-hex)}
.comp-hidden-content .item .comp-bet-name.failure {color:var(--color-error-2-hex); font-weight:500}
.comp-hidden-content .item .comp-bet-order {display:grid; grid-template-columns:repeat(4, 1fr); gap:1px}
.comp-hidden-content .item .comp-bet-order .comp-highlight {display:flex; align-items:baseline; padding:15px 20px; background-color:#616161; color:#fff; font-size:13px; cursor:default; transition:all 150ms ease}
.comp-hidden-content .item .comp-bet-order .comp-highlight > span {padding:0 8px 0 0; display:none}
.comp-hidden-content .item .comp-bet-order .comp-highlight > text {white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.comp-hidden-content .item .comp-bet-order .comp-highlight.active {background-color:var(--color-success-hex); color:#000}
.comp-hidden-content .item .comp-bet-order2 {}
.comp-hidden-content .item .comp-bet-order2 .comp-highlight {display:flex; align-items:baseline; padding:15px 20px; background-color:#616161; color:#fff; font-size:13px; cursor:default; transition:all 150ms ease}
.comp-hidden-content .item .comp-bet-order2 .comp-highlight > span {/*padding-right:10px; color:#222; font-size:11px*/ display:none}
.comp-hidden-content .item .comp-bet-order2 .comp-highlight.active {background-color:var(--color-success-hex); color:#000}
.comp-hidden-content .item .comp-bet-order3 {display:grid; grid-template-columns:repeat(3, 1fr); gap:1px}
.comp-hidden-content .item .comp-bet-order3 .comp-highlight {padding:15px 20px; background-color:#616161; color:#fff; font-size:13px; cursor:default; transition:all 150ms ease}
.comp-hidden-content .item .comp-bet-order3 .comp-highlight.active {background-color:var(--color-success-hex); color:#000}

.comp-match {display:flex; flex-wrap:wrap; justify-content:space-between; margin:20px 0 0 0; padding:20px; background-color:#313131; border-radius:15px 15px 0 0}
.comp-match .teams {padding:0; color:#fff; font-size:16px; font-weight:500}
.comp-match .result {padding:0; color:#fff; font-size:16px; font-weight:500}
.comp-match .comp-match-info {width:100%; padding:5px 0 0 0}
.comp-match .comp-match-info .text {display:inline-block; padding:0 10px 0 0; color:#ccc; font-size:13px}
.comp-match .comp-match-info .strikers {color:#fff; white-space:initial}
.comp-match .small {padding:0 10px 0 0; font-size:12px}
.comp-match:nth-child(2) {margin:0}
.comp-match.comp-empty {margin:5px 0 0 0; padding:15px 20px; border-radius:15px}
.comp-match.comp-empty:nth-child(2) {margin:0}
.comp-match.closed {margin:5px 0 0 0; border-radius:15px}

.comp-hidden-content .comp-bet-match {}
.comp-hidden-content .comp-bet-match .tiper {display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 0 1px 0; padding:15px 20px 5px 20px; background-color:#515151; color:var(--color-permanent-01-hex)}
.comp-hidden-content .comp-bet-match .tips {display:grid; grid-template-columns:1fr 1fr 5fr; gap:1px}
.comp-hidden-content .comp-bet-match .tips .cell {padding:15px 20px; background-color:#616161; color:#fff; font-size:13px; cursor:default; transition:all 150ms ease}
.comp-hidden-content .comp-bet-match .tips .cell.similar {background-color:rgba(var(--color-success-rgb),0.25); color:#fff}
.comp-hidden-content .comp-bet-match .tips .cell.accordance {background-color:var(--color-success-hex); color:#000}
.comp-hidden-content .comp-bet-match .tips.advanced {grid-template-columns:1fr 1fr 1fr 5fr}
.comp-hidden-content .comp-bet-match.success .tiper {color:var(--color-success-hex)}
.comp-hidden-content .comp-bet-match.failure .tiper {color:var(--color-error-2-hex); font-weight:500}

.comp-unknown::before {content:'N/A'; font-size:12px}


.statistic-order-table {border-radius:15px; overflow:hidden}
.statistic-order-table .item {display:flex; justify-content:space-between; align-items:center; margin:0 0 1px 0; padding:20px 30px; background-color:#313131; color:#ccc}
.statistic-order-table .item .order {width:30px}
.statistic-order-table .item .name {flex-grow:1; flex-basis:0}
.statistic-order-table .item .counter {width:80px; text-align:right}
.statistic-order-table .item:last-child {margin:0}
.statistic-order-table .not-available {padding:20px 30px; background-color:#313131; color:#ccc}



#history .poster {display:block; width:100%; border-radius:15px 15px 0 0}
#history .standing {width:100%; display:grid; grid-template-columns:min-content auto 25%; grid-gap:1px; margin:-19px 0 0 0; border-radius:0 0 15px 15px; overflow:hidden}
#history .standing > div {padding:15px 20px; background-color:#414141; color:#ccc}
#history .standing > div:nth-child(3n+1) {text-align:right}
#history .standing > div:nth-child(3n) {text-align:center}
#history .standing > div:nth-child(-n+9) {background-color:#515151; color:#fff}
#history .link {position:absolute; top:15px; right:20px; font-size:12px; color:#fff; display:none}
#history .caption.active {border-bottom:0 none}


#actual-match {display:none; flex-wrap:wrap; padding:20px; border-bottom:1px #313131 solid; border-radius:20px 0 0 0; overflow:hidden}
#actual-match.active {display:flex}

#actual-match .swiper-container {position:relative; width:100%}
#actual-match .swiper-container .matches .match {position:relative; width:auto}
#actual-match .swiper-container .matches .match .data {height:100%; padding:18px 25px; box-sizing:border-box; background-color:#363c41; border-radius:15px; cursor:pointer; line-height:1.4; transition:all 150ms ease}
#actual-match .swiper-container .matches .match .data .date {padding:0 0 5px 0; color:#8db1cf; font-size:13px}
#actual-match .swiper-container .matches .match .data .teams {font-size:16px; font-family:Comfortaa, cursive; text-transform:uppercase; color:#fff}
#actual-match .swiper-container .matches .match .data .teams .checked {display:inline-block; width:4px; height:11px; margin:0 6px 1px 0; border:2px var(--color-success-hex) solid; border-top:0 none; border-left:0 none; transform:rotate(45deg)}
#actual-match .swiper-container .matches .match .data .teams .result {font-size:17px; font-weight:700}
#actual-match .swiper-container .matches .match.is-completed .data {background-color:#2c2c2c}
#actual-match .swiper-container .matches .match.is-completed .data .date {color:#999}
#actual-match .swiper-container .matches .match.is-completed .data .teams {color:#ccc}
#actual-match .swiper-container .matches .match.is-completed .data::after {border-color:#2c2c2c transparent transparent transparent !important}
#actual-match .swiper-container .matches .match.active .data {filter:brightness(1.4)}
#actual-match .swiper-container .matches .match.active .data::after {content:''; position:absolute; bottom:-10px; left:calc(50% - 5px); width:0; height:0; border-style:solid; border-width:10px 10px 0 10px; border-color:#363c41 transparent transparent transparent}
#actual-match .swiper-container::before {content:''; position:absolute; inset:0 0 0 auto; z-index:2; aspect-ratio:1; background:linear-gradient(to left, #212121 50%, transparent); transform:translateX(calc(50% + 20px))}
@media (hover:hover) {
	#actual-match .swiper-container .matches .match:hover .data {filter:brightness(1.2)}
}

#actual-match .list {order:1; width:100%; margin:25px 0 0 0; display:none; background-color:#313131; border-radius:15px; overflow:hidden}
#actual-match .list .left {width:20%; min-width:120px}
/*#actual-match .list .left .row::before {content:''; position:absolute; top:0; bottom:0; right:-20px; z-index:1; width:20px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); mask:linear-gradient(to right, #313131, transparent); -webkit-mask:linear-gradient(to right, #313131, transparent)}*/
#actual-match .list .right {position:relative; flex-grow:1; flex-basis:0; overflow:hidden; overflow-x:auto}
#actual-match .list .right .rows {position:absolute; min-width:100%; width:max-content}
#actual-match .list .row {position:relative; display:flex; flex-wrap:wrap; justify-content:space-between; padding:8px 20px; color:#fff; border-bottom:1px #3c3c3c solid}
#actual-match .list .row .name {padding:10px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#actual-match .list .row .result {width:50px; padding:10px 0; text-align:center}
#actual-match .list .row .frtn {width:50px; padding:10px 0; text-align:center}
#actual-match .list .row .chnc {width:70px; padding:10px 0; text-align:center}
#actual-match .list .row .striker {width:180px; padding:10px 0; text-align:center; white-space:nowrap}
#actual-match .list .row .points {width:70px; padding:10px 0; text-align:right}
#actual-match .list .row .actual-highlight {border-radius:3px; cursor:default; transition:all 150ms ease}
#actual-match .list .row .actual-highlight.similar {background-color:rgba(var(--color-success-rgb),0.25)}
#actual-match .list .row .actual-highlight.accordance {background-color:var(--color-success-hex); color:#000}
#actual-match .list .me {background-color:#3c3c3c}
#actual-match .list .me .name {color:var(--color-main-03-hex)}
#actual-match .list .success .points {color:var(--color-success-hex); font-weight:500}
#actual-match .list .failure .points {color:var(--color-error-2-hex); font-weight:500}
#actual-match .list .row:last-child {border:0 none}
#actual-match .list .blank {width:100%; padding:10px; color:#aaa; text-align:center; font-style:italic; line-height:1.3}

#actual-match.hidden {display:none}

/*
Chrome neumí správně vykreslit rozmazaný přechod, pokud má rodičovský element nastaven overflow:hidden 
Proto jsou tyto elementy pozicovány až k #left-panel a mají pevnou výšku
*/
/*
#actual-match::before {content:''; position:absolute; top:0; bottom:0; left:0; z-index:2; width:20px; height:122px; border-radius:15px 0 15px 0; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); -webkit-mask:linear-gradient(to right, #212121, transparent); mask:linear-gradient(to right, #212121, transparent)}
#actual-match::after {content:''; position:absolute; top:0; right:0; bottom:0; z-index:2; width:20px; height:122px; border-radius:0 0 0 15px; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); -webkit-mask:linear-gradient(to left, #212121, transparent); mask:linear-gradient(to left, #212121, transparent)}
*/


/* RIGHT */
#right-panel {position:relative; z-index:0; width:300px; max-width:100%}
#right-panel > div {display:flex; flex-direction:column; position:absolute; top:var(--top-panel-height); width:300px; background-color:#414141; border-radius:0 20px 20px 0; box-shadow:0 0 5px rgba(0,0,0,0.3); overflow:hidden}
#right-panel > div.fixed {position:fixed}

#user {position:relative; display:flex; align-items:center; max-width:100%; height:122px; padding:20px; background-color:#111; box-sizing:border-box; cursor:pointer}
#user .icon {position:relative; width:74px; height:74px}
#user .icon > div {position:absolute; top:0; right:0; bottom:0; left:0; display:flex; justify-content:center; align-items:center; border-radius:100%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden; transition:all 200ms ease}
#user .icon .letter {color:#fff; font-size:36px; font-family:Comfortaa, cursive; text-transform:uppercase; text-align:center}
#user .icon > div::after {content:' '}
#user .info {flex-grow:1; flex-basis:0; padding:0 0 0 18px; line-height:1.4; overflow:hidden}
#user .info .name {color:#fff; font-size:20px; font-family:Comfortaa, cursive; text-overflow:ellipsis; white-space:nowrap; overflow:hidden}
#user .info .points {color:var(--color-permanent-01-hex); font-size:18px}
#user .info .points span {padding-left:5px}
#user .info .onlooker {color:#999; font-size:13px; font-style:italic}
#user:hover .icon > div {box-shadow:0 0 0 7px #212121}

#responsive-menu-toggle {align-self:stretch; background-color:#1f1f1f; color:#999; cursor:pointer; display:none}
#responsive-menu-toggle .menu-toggle {display:flex; justify-content:flex-end; align-items:center; height:100%; padding:0 25px}
#responsive-menu-toggle .r-menu {padding:0 15px 0 0; color:#fff; font-size:13px; font-family:Comfortaa, cursive; text-transform:uppercase}
#responsive-menu-toggle .lines {display:flex; flex-direction:column; justify-content:center; align-items:center; width:25px; height:25px; margin:-2px 0 0 0}
#responsive-menu-toggle .lines .line {width:25px; height:2px; background-color:#ccc}
#responsive-menu-toggle .lines .line-1 {transition:all 0.3s 0.3s, transform 0.3s 0s}
#responsive-menu-toggle .lines .line-2 {margin:7px 0; transition:all 0.3s 0.3s}
#responsive-menu-toggle .lines .line-3 {transition:all 0.3s 0.3s, transform 0.3s 0s}

#responsive-menu {position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000; background-color:rgba(0,0,0,0.1); opacity:0; -webkit-backdrop-filter:blur(100px); backdrop-filter:blur(100px); transform:translateX(100%); transition:all 300ms ease-out}
#responsive-menu > div {display:flex; flex-direction:column; justify-content:center; height:100%}
#responsive-menu .row {color:#aaa; text-transform:uppercase; font-size:26px; font-family:Comfortaa, cursive; line-height:3.1; padding:0 20px 0 15%; white-space:nowrap; cursor:pointer}
#responsive-menu .row.active {box-shadow:inset 5px 0 0 #aaa; color:#fff}
#responsive-menu .row:last-child {margin-top:50px}
#responsive-menu .close {position:absolute; top:20px; right:20px; width:40px; height:40px; cursor:pointer}
#responsive-menu .close::before {content:''; position:absolute; left:calc(50% - 2px); height:40px; width:2px; background-color:#aaa; transform:rotate(45deg)}
#responsive-menu .close::after {content:''; position:absolute; left:calc(50% - 2px); height:40px; width:2px; background-color:#aaa; transform:rotate(-45deg)}
#responsive-menu.active {opacity:1; transform:translateX(0)}


#betting-progress {width:100%; overflow:hidden; text-align:right; display:none}
#betting-progress .info {display:grid; grid-template-columns:auto min-content; align-items:center; gap:15px; padding:30px 20px 20px 20px}
#betting-progress .info .desc {color:#ccc}
#betting-progress .info .percentage {color:#fff; font-size:24px; font-family:Comfortaa, cursive}
#betting-progress .info .percentage span {font-size:40px; padding-right:5px}
#betting-progress .bar {position:relative; background-color:#515151; height:12px}
#betting-progress .bar div {position:absolute; top:0; bottom:0; left:0; background:linear-gradient(to right, var(--color-main-03-hex), var(--color-success-hex)); transition:all 200ms ease}

#days {width:100%}
#days .before {display:flex; gap:13px; justify-content:flex-end; align-items:center; padding:30px 20px; color:var(--color-permanent-01-hex); text-align:right}
#days .during {display:grid; grid-template-columns:1fr 1px 1fr; padding:20px 0}
#days .during .item {color:#fff; text-align:center}
#days .during .item .state {display:flex; justify-content:center; align-items:center; gap:5px; color:var(--color-permanent-01-hex); font-size:24px}
#days .during .item .state span {font-size:12px}
#days .during .separator {background-color:#515151}

/*#deposit {position:relative; z-index:1; padding:20px 20px 15px 0; background-image:url(../img/deposit-bg.png); background-position:30px center; background-repeat:no-repeat; text-align:right; z-index:1}
#deposit .full {font-family:Comfortaa, cursive; font-size:48px; color:#ffd24d}
#deposit .full span {font-size:22px}
#deposit .distribution {display:flex; justify-content:flex-end; font-size:15px}
#deposit .third {color:#8c7853}
#deposit .second {color:#c1c1c1; padding-left:20px}
#deposit .first {color:#edb200; padding-left:20px}*/

/*#menu-history {background:url(../img/history-icon.png) calc(100% - 20px) center no-repeat; width:100%; height:24px; line-height:25px; padding:15px 60px 15px 0; text-align:right; cursor:pointer; color:#aaa; display:none}
#menu-history:hover {color:#ccc}*/
/*#menu-settings {background:url(../img/settings-icon.png) calc(100% - 20px) center no-repeat; width:100%; height:24px; line-height:25px; padding:15px 60px 15px 0; text-align:right; cursor:pointer; color:rgba(255,255,255,.4); border-top:1px rgba(255,255,255,.06) solid; display:none}
#menu-settings:hover {background-color:rgba(0,0,0,.075)}*/

#standings-table {width:100%; padding:0 0 25px 0}
#standings-table .top {padding:40px 20px 15px 20px; font-size:17px; font-family:Comfortaa, cursive; color:#fff; text-transform:uppercase}
#standings-table .table {display:grid; gap:1px; margin:0 10px}
#standings-table .table .row {position:relative; display:grid; grid-template-columns:22px auto 50px 18px; align-items:center; gap:10px; padding:18px 15px 18px 10px; border-bottom:1px #4c4c4c solid; cursor:pointer; transition:all 150ms ease}
#standings-table .table .row > div {position:relative; z-index:1}
#standings-table .table .row .order {color:#ccc; font-size:12px}
#standings-table .table .row .award-1 {color:#edb200}
#standings-table .table .row .award-2 {color:#c1c1c1}
#standings-table .table .row .award-3 {color:#8c7853}
#standings-table .table .row .name {text-align:left}
#standings-table .table .row .points {text-align:right; font-family:Helvetica; font-size:15px}
#standings-table .table .row .progress {display:flex; justify-content:flex-end; align-items:center}
#standings-table .table .row .progress::before {content:''}
#standings-table .table .row .progress.none::before {width:5px; height:1px; background-color:#717171}
#standings-table .table .row .progress.up::before {width:4px; height:4px; margin:0 0 -2px 0; border-style:solid; border-width:2px 2px 0 0; border-color:var(--color-success-hex); transform:rotate(-45deg)}
#standings-table .table .row .progress.down::before {width:4px; height:4px; margin:-2px 0 0 0; border-style:solid; border-width:0 2px 2px 0; border-color:var(--color-error-2-hex); transform:rotate(45deg)}
#standings-table .table .row.mine {color:var(--color-main-03-hex); font-weight:500}
/*#standings-table .table .row:hover .name {filter:brightness(0.75)}*/
#standings-table .table .row:hover::before {content:''; position:absolute; inset:-2px -15px; z-index:0; background-color:#4c4c4c}
#standings-table .bottom {padding:10px 15px 0 15px; color:var(--color-permanent-01-hex); text-align:center; font-size:12px; font-style:italic}
#standings-table .bottom span {text-transform:lowercase}
#standings-table .detailed {display:flex; justify-content:center; padding:20px 15px 0 15px}
#standings-table .detailed div {flex-grow:1; padding:12px 25px 10px 25px; color:#ccc; text-transform:uppercase; text-align:center; font-family:Comfortaa, cursive; font-size:11px; border:1px #616161 solid; border-radius:50vh; cursor:pointer}
#standings-table .detailed div:hover {filter:brightness(1.2)}


.users-order-table {border-radius:15px; overflow:hidden}
.users-order-table .item {display:grid; grid-template-columns:25px 36px auto 60px; align-items:center; gap:15px; margin:0 0 1px 0; padding:10px 20px; background-color:#414141; color:#ccc; cursor:pointer}
.users-order-table .item .order {}
.users-order-table .item .avatar {width:36px; height:36px; border-radius:100%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden}
.users-order-table .item .avatar .letter {color:#fff; font:19px Comfortaa, cursive; text-transform:uppercase; text-align:center; line-height:2.1}
.users-order-table .item .name {padding:0 0 0 15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.users-order-table .item .points {text-align:right; font-family:Helvetica; font-size:15px}
.users-order-table .item .progress {display:flex; justify-content:flex-end; align-items:center}
.users-order-table .item .progress::before {content:''}
.users-order-table .item .progress.none::before {width:5px; height:1px; background-color:#717171}
.users-order-table .item .progress.up::before {width:4px; height:4px; margin:0 0 -2px 0; border-style:solid; border-width:2px 2px 0 0; border-color:var(--color-success-hex); transform:rotate(-45deg)}
.users-order-table .item .progress.down::before {width:4px; height:4px; margin:-2px 0 0 0; border-style:solid; border-width:0 2px 2px 0; border-color:var(--color-error-2-hex); transform:rotate(45deg)}
.users-order-table .item.me {color:var(--color-main-03-hex) !important}
.users-order-table .item:last-child {margin:0}
@media (hover:hover) {
	.users-order-table .item:hover {filter:brightness(1.15)}
}
.users-order-table.main {margin:0 0 20px 0; overflow:hidden}
.users-order-table.main .item {grid-template-columns:25px 36px auto 60px 15px; background-color:#313131; color:#ccc}
.users-order-table-empty {padding:50px 20px; background-color:#313131; color:#ccc; text-align:center; font-style:italic; border-radius:15px}

.table-deposit {display:flex; justify-content:center; align-items:flex-end; gap:5px; height:200px; padding:30px; background-color:#313131; text-align:center; border-radius:15px}
.table-deposit .item {display:flex; flex-direction:column; justify-content:flex-end; gap:5px; width:30%; max-width:110px; height:100%; font-family:Comfortaa, cursive}
.table-deposit .item .reward {font-size:24px; text-shadow:0 0 30px}
.table-deposit .item .reward span {font-size:16px}
.table-deposit .item .stage {display:flex; justify-content:center; align-items:flex-end; background-color:#515151; border-radius:5px 5px 0 0}
.table-deposit .item .stage::after {padding:0 0 10px 0; font-size:16px; font-weight:600; color:#ccc}
.table-deposit .item.bronze .reward {color:#8c7853}
.table-deposit .item.bronze .stage {height:25%}
.table-deposit .item.bronze .stage::after {content:'3'}
.table-deposit .item.gold .reward {color:#edb200}
.table-deposit .item.gold .stage {height:75%}
.table-deposit .item.gold .stage::after {content:'1'}
.table-deposit .item.silver .reward {color:#c1c1c1}
.table-deposit .item.silver .stage {height:50%}
.table-deposit .item.silver .stage::after {content:'2'}

#side-logo {writing-mode:vertical-rl; transform:rotate(180deg); white-space:nowrap; position:absolute; top:50px; left:-45px; font:34px Comfortaa, cursive; color:rgba(255,255,255,0.15)}