:root {
	--default-font:'Noto Sans';
	
	--color-error-hex:#ff0036;
	--color-error-2-hex:#ff5075;
	--color-success-hex:#08ff9f;
	--color-success-2-hex:#2fcb80;
	--color-success-3-hex:#00924c;
	
	--color-error-rgb:255,0,54;
	--color-error-2-rgb:255,80,117;
	--color-success-2-rgb:47,203,128;
	
	--color-permanent-01-hex:#e0c195;
	
	--color-permanent-01-rgb:224,193,149;
	
	
	--color-01-hex:#009bb4;
	--color-02-hex:#004a55;
	--color-03-hex:#e6214e;
	--color-04-hex:#90407b;
	--color-05-hex:#007a8c;
	--color-06-hex:#fbca8d;
	--color-07-hex:#b22750;
	
	--color-01-rgb:0,155,180;
	--color-02-rgb:0,74,85;
	--color-03-rgb:230,33,78;
	--color-04-rgb:144,64,123;
	--color-05-rgb:0,122,140;
	--color-06-rgb:251,202,141;
	--color-07-rgb:178,39,80;
}



html {width:100%; background:linear-gradient(to bottom, var(--color-05-hex), var(--color-04-hex)); background-attachment:fixed; overflow-y:scroll}
body {width:100%; margin:0; color:#000; font:14px var(--default-font), Arial, Helvetica, sans-serif}

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

img {border:0 none}
.clear {clear:both !important}
h1 {color:var(--color-07-hex); font-size:27px; font-family:Comfortaa, cursive; text-transform:uppercase; font-weight:normal; margin:0; padding:0; line-height:1.3}
h2 {color:var(--color-03-hex); font-size:14px; font-family:Comfortaa, cursive; text-transform:uppercase; font-weight:normal; margin:0 0 4px 0}

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


.h1-padding {padding:44px 20px 24px 28px; box-sizing:border-box}

#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 {border-radius:50%; -webkit-transform:translateZ(0); -ms-transform:translateZ(0); transform:translateZ(0); -webkit-animation:circle-loader-spin 0.5s infinite linear; animation:circle-loader-spin 0.5s infinite linear}*/
.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)}
}


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

input,
textarea,
select {font:13px var(--default-font), Arial, Helvetica, sans-serif}

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

input[type=text],
input[type=number],
input[type=email],
input[type=password] {-webkit-appearance:none; -webkit-border-radius:2px; outline:none; box-sizing:border-box; background-color:#fff; color:#666; vertical-align:middle; border:1px #ddd solid; border-radius:2px}

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

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

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

input[type=checkbox] {vertical-align:middle; transform:scale(1.3)}

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

select {background-color:#fff; color:#666; vertical-align:middle; outline:none; border:1px #ddd solid; padding:10px 16px; width:230px}


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


/* 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:14px 20px; background-color:rgba(255,255,255,0.05); color:#fff; border:1px rgba(255,255,255,.3) solid}
#board-forms .check-input::placeholder {color:rgba(255,255,255,0.5)}
#board-forms .check-input.error {border:1px var(--color-error-hex) solid; background-color:rgb(255 0 54 / 40%); background-image:url(../img/error.png); background-position:calc(100% - 15px) center; background-repeat:no-repeat}
#board-forms .check-input:focus {background-color:rgba(255,255,255,0.15); border:1px rgba(255,255,255,0.7) solid}
#board-forms input:-webkit-autofill {-webkit-box-shadow:0 0 0 1000px #0e7586 inset; -webkit-text-fill-color:#fff}
#board-forms input.error:-webkit-autofill {border:1px #674263 solid; -webkit-box-shadow:0 0 0 1000px #664262 inset; -webkit-text-fill-color:#fff}
#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 {margin:40px 30px 0 30px; font-size:13px; color:rgba(255,255,255,0.6); line-height:20px}
.toggle-login-form {text-align:right; margin-bottom:15px}
.toggle-login-form > div {display:inline-block; border-bottom:1px rgba(255,255,255,0.3) solid; padding-bottom:1px; color:#ccc; font-size:11px; 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(8,255,159,0.1); box-sizing:border-box; line-height:1.5; border:1px rgba(8,255,159,0.3) solid; border-radius:2px}
.login-loading {position:absolute; right:6px; bottom:6px; display:none}
.login-loading .circle-loader-spin {width:26px; height:26px; border:3px solid rgba(255,255,255,.1); border-top:3px solid rgba(255,255,255,.8)}
#login-send, #register-send {margin:5px 0 0 0; padding:15px; background-color:var(--color-02-hex); border-radius:3px; text-transform:uppercase}


#center {position:relative; display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start}
#autologout {position:absolute; top:-1000px}


/* LEFT */
#image-full-bg {position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.9); z-index:9999; display:none}
#image-full-bg img {display:inline-block; max-width:80%; max-height:80%; border-radius:2px; box-shadow:0 0 30px rgba(0,0,0,0.5); position:absolute; top:50%; left:50%; margin:0 -50% 0 0; transform:translate(-50%,-50%)}
/*#image-full-bg div {position:absolute; top:5%; left:5%; bottom:5%; right:5%; margin:auto; background-size:auto auto; background-position:center center; background-repeat:no-repeat}*/
/*#image-full-bg span {position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; background:url(../img/load2.gif); width:12px; height:12px}*/

#left-panel {width:800px; max-width:100%; position:relative; background-color:#fff; margin:50px 0 20px 0; padding-bottom:120px; border-bottom-left-radius:3px; border-bottom-right-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.3); z-index:1}

#left-panel #top-menu {display:flex; background-color:#333; position:relative; margin-top:-50px}
#left-panel #top-menu .menu {position:relative; height:50px; line-height:50px; padding:0 25px; color:#fff; font-size:13px; font-family:Comfortaa, cursive; text-transform:uppercase; z-index:2; cursor:pointer; white-space:nowrap}
#left-panel #top-menu .menu-h {}
#left-panel #top-menu .menu-h:hover {background-color:#444}
#left-panel #top-menu #menu-1 {}
#left-panel #top-menu #menu-selection {position:absolute; top:0; bottom:0; background-color:var(--color-03-hex); z-index:1; color:#fff}

#left-panel #top-menu .logout {position:absolute; top:0; right:0; bottom:0; width:50px; background:url(../img/logout.png) center center no-repeat; z-index:2; cursor:pointer}
#left-panel #top-menu .logout:hover {background-color:#444}

#content-bg {position:relative; overflow:hidden; min-height:200px}

#betting-info {position:relative; z-index:1; display:flex; align-items:center; background:linear-gradient(to right, var(--color-04-hex) 10%, var(--color-07-hex)); height:100px; cursor:pointer; overflow:hidden; transition:all 200ms ease}
#betting-info::before {content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; background:linear-gradient(to right, var(--color-04-hex) 40%, var(--color-03-hex)); opacity:0; transition:all 400ms ease}
#betting-info .left {flex:0 1 66%; text-align:right}
#betting-info .left .phase {text-transform:uppercase; color:#fff; font-size:24px; font-family:Comfortaa, cursive}
#betting-info .left .phase span {display:inline-block; padding:0 8px; color:rgba(255,255,255,.4)}
#betting-info .left .deadline {margin:4px 0 0 0; color:rgba(255,255,255,.5); font-size:14px}
#betting-info .center {flex:0 0 1px; background-color:rgba(255,255,255,.3); height:20px; margin:0 38px}
#betting-info .right {}
#betting-info .right .arrow {background-image:url(../img/arrow-circle.png); width:36px; height:36px; opacity:0.7; transition:all 100ms ease}
#betting-info .right .arrow.active {transform:rotate(90deg)}
#betting-info:hover::before {opacity:1}

#deposit-info {display:flex; flex-direction:column; justify-content:center; background-color:var(--color-04-hex); padding:15px 25px; line-height:1.4; color:#fff; text-align:center}
#deposit-info div {width:100%; padding:5px 0 0 0; font-size:18px; font-weight:700; white-space:nowrap}
#deposit-info img {max-width:100%; height:auto; margin:20px auto 0 auto}
#deposit-irritate {position:fixed; top:0; left:0; background-color:rgba(0,0,0,0.95); width:100%; height:100%; color:#fff; z-index:99999}
#deposit-counter-info {margin-top:20%; font-size:22px; text-align:center; text-transform:uppercase}
#deposit-counter {margin-top:100px; font-size:112px; text-align:center}
#betting-pre-info {background-color:var(--color-04-hex); color:rgba(255,255,255,.7); text-align:center; line-height:24px; height:100px; padding:24px 30px 24px 30px; box-sizing:border-box}
#betting-pre-info span {font-weight:700; color:#fff}

#loading.circle-loader-spin {position:absolute; top:25px; left:calc(50% - 19px); width:36px; height:36px; border:3px solid rgba(0,0,0,0.2); border-top:3px solid var(--color-01-hex); display:none}
#refreshing {position:absolute; top:0; right:0; background-color:#fff; border-left:1px #eee solid; border-bottom:1px #eee solid; padding:14px 22px 10px 15px; font-size:14px; color:#aaa; display:none; z-index:10}
#refreshing .circle-loader-spin {width:18px; height:18px; border:2px solid rgba(0,0,0,0.2); border-top:2px solid var(--color-01-hex); display:inline-block; margin-right:10px; vertical-align:middle}

.responsive-new-message {display:none; justify-content:center}
.responsive-new-message .button {margin:20px 0; padding:13px 50px; background-color:var(--color-04-hex); color:#fff; border-radius:25px; cursor:pointer}
.responsive-new-message .button:hover {filter:brightness(1.15)}

.comments-counter {text-align:center; color:var(--color-07-hex); padding:14px; border-bottom:1px rgba(var(--color-07-rgb),.3) solid; display:none}
.row-comment {border-bottom:1px rgba(0,0,0,.15) dashed}

.comment {display:flex; align-items:flex-start; padding:0 0 10px 0; overflow:hidden; position:relative}
.comment.result {}
.comment.new::after {content:''; position:absolute; top:0; left:0; bottom:0; width:6px; background-color:var(--color-07-hex)}

.comment .left {width:90px; padding:15px 0 0 0}
.comment .left .avatar {min-width:48px; width:48px; height:48px; margin:0 auto; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden; cursor:pointer}
.comment .left .avatar .letter {color:#fff; font-size:20px; font-family:Comfortaa, cursive; text-transform:uppercase; text-align:center; padding:14px 0}
.comment.result .avatar {cursor:default}

.comment .right {width:calc(100% - 90px); position:relative}
.comment .right .message {padding:20px 50px 5px 0; line-height:21px; font-size:14px; color:#333}
.comment .right .message a {overflow-wrap:break-word; word-wrap:break-word; -ms-word-break:break-all; word-break:break-all; word-break:break-word}
.comment .right .message .name {color:#111; font-weight:bold; display:inline-block; margin-right:10px; cursor:pointer}
.comment .right .message .image {position:relative; display:inline-block; margin-top:10px; cursor:pointer}
.comment .right .message .image img {display:block; width:auto; max-width:480px; height:auto; max-height:480px; margin-bottom:-5px; border-radius:4px; box-shadow:0 0 2px rgb(0 0 0 / 30%)}
.comment .right .message .image .animation {position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,0.5); border:2px rgba(255,255,255,0.6) solid; font:18px Comfortaa, cursive; color:#ccc; text-transform:uppercase; text-align:center; line-height:64px}
.comment .right .message .result-match {color:var(--color-02-hex); text-transform:uppercase; font-weight:700; font-size:18px; font-family:Comfortaa, cursive; line-height:1.5}
.comment .right .message .result-striker {color:var(--color-01-hex); margin-top:4px; font-size:13px; line-height:1.4}
.comment .right .bottom {font-size:11px; font-family:Comfortaa, cursive; text-transform:uppercase}
.comment .right .bottom .time {color:#999}
.comment .right .bottom .reply {cursor:pointer; color:var(--color-05-hex)}
.comment .right .bottom .reply:hover {text-decoration:underline}
.comment .right .bottom .detail a {color:var(--color-07-hex)}
.comment .right .bottom .dot {display:inline-block; padding:0 5px; color:#ccc; font-size:22px; vertical-align:middle}

.answer-box {padding:0 90px; border-top:1px rgba(0,0,0,.15) dashed; display:none}
.answer-box > div {display:flex; align-items:flex-start; padding:15px 0}
.answer-box .answer-left {padding:1px 10px 0 0}
.answer-box .answer-left .avatar {min-width:36px; width:36px; height:36px; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden}
.answer-box .answer-left .avatar .letter {color:#fff; font:16px Comfortaa, cursive; text-transform:uppercase; text-align:center; padding:11px 0}
.answer-box .answer-right {flex:0 1 100%; position:relative}
.answer-box .answer-right .answer-message-form {}
.answer-box .answer-right .answer-message-form .input {position:relative}
.answer-box .answer-right .answer-message-form .input .upload-error {color:#fff; font-size:13px; margin-bottom:3px; padding:12px 15px; background-color:var(--color-error-hex); border-radius:2px; display:none}
.answer-box .answer-right .answer-message-form .input .answer-message-text {background-color:#fff; height:40px; width:100%; margin:0 0 -1px 0; padding:10px; color:#666; outline:none; overflow:hidden; border:1px #ddd solid; resize:none; font-size:14px; line-height:18px}
.answer-box .answer-right .answer-message-form .input .answer-message-text::placeholder {font-style:italic; color:#999}
.answer-box .answer-right .answer-message-form .tools {display:flex}
.answer-box .answer-right .answer-message-form .tools .upload-comment-image {display:flex; align-items:center; flex:0 0 auto; position:relative; overflow:hidden; background:#fff url(../img/upload-reply.png) 15px center no-repeat; margin:0 3px 0 0; padding:0 18px 0 50px; border:1px #ddd solid; border-radius:2px; color:#666; font-size:13px; cursor:pointer}
.answer-box .answer-right .answer-message-form .tools .upload-comment-image:hover {background-color:#f3f6f8}
.answer-box .answer-right .answer-message-form .tools .upload-comment-image input[type=file] {position:absolute; top:-500px}
.answer-box .answer-right .answer-message-form .tools .circle-loader-spin {align-self:center; width:23px; height:23px; margin:0 0 0 10px; border:3px solid rgba(0,0,0,0.2); border-top:3px solid var(--color-01-hex); display:none}
.answer-box .answer-right .answer-message-form .uploaded-images {position:relative; padding-right:50%; overflow:hidden; display:none}
.answer-box .answer-right .answer-message-form .uploaded-images .remove {position:absolute; top:0; right:calc(50% - 30px); padding:5px 10px; background-color:#222; color:#fff; cursor:pointer}
.answer-box .answer-right .answer-message-form .uploaded-images img {display:block; max-width:100%; margin-bottom:3px; border-radius:2px}
.answer-box .answer-right .clone {position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(255,255,255,0.5); display:none}

.comment-answers {}
.comment-answers .answer {display:flex; align-items:flex-start; padding:15px 0 10px 85px; border-top:1px rgba(0,0,0,.15) dashed; position:relative}
.comment-answers .answer.new::after {content:''; position:absolute; top:0; left:0; bottom:0; width:6px; background-color:var(--color-07-hex)}
.comment-answers .left {}
.comment-answers .left .avatar {min-width:36px; width:36px; height:36px; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden; cursor:pointer}
.comment-answers .left .avatar .letter {color:#fff; font-size:16px; font-family:Comfortaa, cursive; text-transform:uppercase; text-align:center; padding:11px 0}
.comment-answers .right {flex:0 1 100%; padding:0 50px 0 15px; position:relative}
.comment-answers .right .message {padding:0 0 5px 0; line-height:21px; font-size:14px; color:#333}
.comment-answers .right .message .name {color:#111; font-weight:bold; display:inline-block; margin-right:6px; cursor:pointer}
.comment-answers .right .message .image {position:relative; display:inline-block; margin:10px 25% 0 0; cursor:pointer}
.comment-answers .right .message .image img {display:block; width:auto; max-width:100%; height:auto; max-height:480px; margin-bottom:-5px; border-radius:4px; box-shadow:0 0 2px rgb(0 0 0 / 30%)}
.comment-answers .right .message .image .animation {position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,0.5); border:2px rgba(255,255,255,0.6) solid; font:18px Comfortaa, cursive; color:#ccc; text-transform:uppercase; text-align:center; line-height:64px}
.comment-answers .right .bottom {font-size:11px; font-family:Comfortaa, cursive; text-transform:uppercase}
.comment-answers .right .bottom .time {color:#999}
.comment-answers .right .bottom .reply {cursor:pointer; color:var(--color-05-hex)}
.comment-answers .right .bottom .reply:hover {text-decoration:underline}
.comment-answers .right .bottom .dot {display:inline-block; padding:0 5px; color:rgba(var(--color-02-rgb),.5); font-size:22px; vertical-align:middle}

/*.comment-deleted-info {background-color:#f9f9f9; border-bottom:1px #e3e3e3 solid; padding:16px 25px 16px 85px; font-style:italic; font-size:13px; color:#999}
.comment-deleted-info.hidden {display:none}
.comment-deleted-info .comment-deleted-more {display:inline-block; text-decoration:underline; cursor:pointer; color:#5a7c99}
.comment-deleted-info > div {text-align:justify; font-style:initial; color:#444; line-height:20px; display:none; overflow:hidden}
.comment-deleted-info .message {padding:15px 0}
.comment-deleted-info .message .image {position:relative; display:inline-block; margin-top:10px; cursor:pointer}
.comment-deleted-info .message .image img {width:100%; max-width:480px}
.comment-deleted-info .message .image .animation {position:absolute; top:calc(50% - 30px); left:calc(50% - 30px); width:60px; height:60px; border-radius:50%; background:rgba(0,0,0,0.5); border:2px rgba(255,255,255,0.6) solid; font:18px Comfortaa, cursive; color:#ccc; text-transform:uppercase; text-align:center; line-height:64px}
.comment-deleted-info .comment-deleted-restore {display:inline-block; padding:4px 18px; color:#5a7c99; cursor:pointer; border:1px #b7cad9 solid; margin-right:5px}
.comment-deleted-info .comment-deleted-destroy {display:inline-block; padding:4px 18px; color:#5a7c99; cursor:pointer; border:1px #b7cad9 solid}*/

/*#comments-show-rest {cursor:pointer; font-size:12px; color:#999; text-transform:uppercase; text-align:center; padding:8px 0 0 0}
#comments-show-rest:hover {text-decoration:underline}
#comments-rest-loading {background:url(../img/load5.gif) 0 0 no-repeat; width:24px; height:24px; margin:15px 0 0 375px; display:none}*/

#comments_list {}
/*#comments_list > .circle-loader-spin {width:22px; height:22px; border-top:3px solid rgba(102,102,102,0.2); border-right:3px solid rgba(102,102,102,0.2); border-bottom:3px solid rgba(102,102,102,0.2); border-left:3px solid rgba(102,102,102,1); display:block; margin:20px auto}*/
#comments_list .empty {}
#comments_list .no-more {}


.captions {}
.caption {position:relative; background-color:#ececec; color:#444; padding:20px 80px 18px 42px; border-bottom:1px #fbfbfb solid; text-transform:uppercase; font:13px Comfortaa, cursive; font-weight:700; line-height:1.7; cursor:pointer; transition:all 200ms ease}
.caption::before {content:''; position:absolute; top:0; bottom:0; left:0; width:9px; background-color:rgba(var(--color-03-rgb),.35)}
.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}
.caption .small {font-size:14px; font-weight:normal; color:var(--color-03-hex); display:block}
.caption.active {box-shadow:inset 9px 0 0 var(--color-03-hex)}
.caption.active::after {transform:rotate(180deg)}
.caption:hover {background-color:#e3e3e3; border-bottom:1px #fff solid}

.section {padding:20px; line-height:1.4; display:none; color:#444}
.section h2:not(:first-of-type) {border-top:1px rgba(0,0,0,.15) dashed; margin-top:3px; padding-top:18px}
.section.wide {padding:20px 0}
.section.wide h2 {padding-left:30px; padding-right:30px}
.section.tall {position:relative; padding:0}
.section.p35 {padding:20px 35px; line-height:1.7}
.section.active {display:block}

.summary {display:flex; align-items:center; background:linear-gradient(to left, #f7f7f7, #f3f3f3); margin:0 0 15px 0; padding:25px 40px}
.summary .left {}
.summary .left::after {content:''; display:block; width:40px; height:40px; background-image:url(../img/info.png)}
.summary .center {flex:0 0 1px; height:20px; margin:0 30px; background-color:rgba(0,0,0,.15)}
.summary .right {flex:1 1 auto; color:rgba(0,0,0,.8); font-size:15px; font-style:italic; line-height:22px}
.summary .right p {color:#777; font-size:12px; margin:15px 0 0 0}
.summary .right p > label {color:#333; font-size:13px}
.ch-check {margin:0 6px 0 0}
.note {font-style:italic; color:#777}
.empty {font-style:italic; color:#666; padding:50px; text-align:center}

#rules > div > ul, #rules > div > ol {padding:0 15px}
#rules-table {display:grid; grid-template-columns:auto 25% 25% 25%; grid-gap:2px; margin:15px 0; font-size:13px}
#rules-table > div {justify-self:stretch; align-self:stretch; background-color:#f1f1f1; padding:8px 16px; text-align:center}
#rules-table > div:nth-child(4n+1) {text-align:left}


.avatar-new {position:relative}
.avatar-new .crop {position:relative; overflow:hidden; box-shadow:0 0 0 1px #aaa; 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 10px 0; padding:15px 20px; background-color:var(--color-error-hex); color:#fff; font-size:13px; border-radius:2px; line-height:1.4; display:none}
.avatar-new .success {margin:0 0 10px 0; padding:15px 20px; background-color:var(--color-success-2-hex); color:#fff; font-size:13px; border-radius:2px; line-height:1.4; display:none}
.avatar-new .tools {position:relative; overflow:hidden}
.avatar-new .info {margin-bottom:10px; display:none}
.avatar-new input[type=file] {position:absolute; top:-200px}
.avatar-new input[type=button] {margin-right:3px}
.avatar-new .select {}
.avatar-new .remove {display:none}
.avatar-new .save {display:none}
.avatar-new .clone {position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(255,255,255,0.5); 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-01-hex); display:none}


#mail-change-form > input[type=email],
#pass-change-form > input[type=text],
#pass-change-form > input[type=password] {width:300px; margin-bottom:5px; padding:14px 15px; font:14px var(--default-font), Arial, Helvetica, sans-serif}
#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 {}
.betting-step {display:flex; align-items:center; justify-content:space-between; background-color:rgba(var(--color-03-rgb),.1)}
.betting-step .title {flex:0 1 auto; padding:5px 20px 0 20px; line-height:22px; color:#000; font-size:20px; font-family:Comfortaa, cursive; font-weight:bold; text-transform:uppercase}
.betting-step .title.advanced {padding:20px 20px 15px 20px}
.betting-step .step {flex:0 0 auto; background-color:var(--color-03-hex); padding:15px 20px; text-align:center; font-size:24px; font-family:Comfortaa, cursive; text-transform:uppercase; color:#fff}
.betting-step .step span {font-size:13px; padding-right:8px}
.betting-help {background-color:#333; color:#ccc; font-size:14px; padding:20px 20px 20px 20px; line-height:25px}
.betting-help.advanced {margin:0 0 15px 0}
.betting-help > ol, .betting-help > ul {padding-left:15px}
.betting-help li {padding:0 0 0 5px}
.betting-help strong {color:#fff}

.betting-content {background-color:#fff; margin-bottom:20px}

.betting-content .match-group {padding:20px 20px 5px 20px; color:var(--color-01-hex); font-size:15px; font-family:Comfortaa, cursive; text-transform:uppercase;}
.betting-content .match-row {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; position:relative; background-color:#f3f3f3; margin-bottom:2px; padding:8px 20px}
.betting-content .match-row .fortune {position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; background-color:#fff; box-shadow:inset 0 0 100px rgba(var(--color-01-rgb),.3); font-weight:normal; display:none}
.betting-content .match-row .fortune > div {display:flex; align-items:center; justify-content:space-between; height:100%; padding:0 20px}
.betting-content .match-row .fortune .fs {display:inline-block; margin-right:-4px; padding:3px 20px; border-right:1px rgba(255,255,255,.6) solid; font-weight:bold; cursor:pointer}
.betting-content .match-row .fortune .fs:last-child {border:0 none}
.betting-content .match-row .fortune .fs:hover {background-color:rgba(var(--color-01-rgb),.3)}
.betting-content .match-row .fortune .fsel {}
.betting-content .match-row .fortune .fsel text {display:none}
.betting-content .match-row .fortune .fsel span {color:#000; font-weight:bold}
.betting-content .match-row .fortune .fsel .fr {display:inline-block; line-height:19px; margin:0 0 0 26px; padding:0 6px 0 26px; border-left:1px rgba(255,255,255,.6) solid; color:#000; font-size:17px; cursor:pointer; font-weight:normal}
.betting-content .match-row .fortune .fsel .fr:hover {color:rgba(var(--color-01-rgb),.7)}
.betting-content .match-row.active {background-color:rgba(var(--color-01-rgb),.2); border-bottom:1px rgba(var(--color-01-rgb),.3) dashed}

.betting-content .match-row .no-first {flex:0 1 50px; /*border-right:1px #fff solid*/}
.betting-content .match-row .ft {position:relative; color:#666; cursor:pointer; white-space:nowrap}
.betting-content .match-row .ft:hover {color:#000}
.betting-content .match-row .team-1 {flex:0 1 20%; text-align:right}
.betting-content .match-row .team-2 {flex:0 1 20%}
.betting-content .match-row .fp {position:absolute; top:-5px; background-color:var(--color-04-hex); height:28px; width:23px; border-radius:2px; line-height:28px; text-align:center; font-size:11px; color:#fff}
.betting-content .match-row .no-first .fp {right:-29px}
.betting-content .match-row .team-1 .fp {right:-30px}
.betting-content .match-row .team-2 .fp {left:-30px}
.betting-content .match-row .results {font-weight:normal}
.betting-content .match-row .number {border:1px rgba(var(--color-01-rgb),.4) solid; width:44px; padding:5px 0; margin:0 3px; z-index:1; text-align:center}
.betting-content .match-row .number.focused {background-color:#fff; box-shadow:inset 0 0 50px rgba(var(--color-01-rgb),.1); border:1px rgba(var(--color-01-rgb),.4) solid}
.betting-content .match-row .number-select-wraper {position:relative; display:inline-block; line-height:normal}
.betting-content .match-row .number-select {position:absolute; background-color:#fff; box-shadow:inset 0 0 0 1px rgba(var(--color-01-rgb),.4), inset 0 0 50px rgba(var(--color-01-rgb),.1); color:#333; z-index:3}
.betting-content .match-row .number-select .num {padding:7px 0; line-height:normal; font-size:14px; text-align:center; cursor:pointer}
.betting-content .match-row .number-select .num:not(:last-child) {border-bottom:1px rgba(var(--color-01-rgb),.4) solid}
.betting-content .match-row .number-select .num:hover {color:#fff; background-color:rgba(var(--color-01-rgb),.4)}
.betting-content .match-row .result {}
.betting-content .match-row .result.wrong {border:1px var(--color-error-hex) solid}
.betting-content .match-row .striker-select {background-image:url(../img/ball.png); box-shadow:0 0 0 2px #fff; width:20px; height:20px; border-radius:50%; z-index:1; cursor:pointer; -webkit-transition:all 200ms ease; transition:all 200ms ease}
.betting-content .match-row .striker-select:hover {/*box-shadow:0 0 0 2px #355c7d*/}
.betting-content .match-row.active .striker-select {transform:rotate(180deg)}
.betting-content .match-row .striker-select:hover {}
.betting-content .match-row .striker-select.selected {box-shadow:inset 0 0 50px rgba(var(--color-04-rgb),.2), 0 0 0 2px #fff, 0 0 0 4px var(--color-04-hex)}
.betting-content .match-row .mobile-break {}
.betting-content .match-row .chance {flex:0 1 100px}

.betting-content .strikers {position:relative; background:linear-gradient(to bottom, rgba(var(--color-04-rgb),.2), #fff); background-attachment:fixed; display:none}
.betting-content .strikers .info {border-bottom:1px rgba(var(--color-04-rgb),.1) solid; color:var(--color-04-hex); font-size:14px; margin:-2px 0 0 0; padding:15px 20px; line-height:23px}
.betting-content .strikers .boxes {display:flex; flex-flow:wrap; justify-content:space-between}
.betting-content .strikers .strikers-0 {position:relative; background-color:#fff; padding:15px 20px 15px 20px; flex:0 0 calc(100% - 40px); line-height:24px}
.betting-content .strikers .strikers-1 {position:relative; background-color:#fff; padding:15px 20px 20px 20px; flex:0 0 calc(50% - 40px); margin:1px 0 0 0}
.betting-content .strikers .strikers-2 {position:relative; background-color:#fff; padding:15px 20px 20px 20px; flex:0 0 calc(50% - 41px); margin:1px 0 0 1px}
.betting-content .strikers .team-name {position:absolute; top:0; right:28px; display:block; width:1px; white-space:nowrap; font-size:24px; color:rgba(var(--color-04-rgb),.5); -o-transform:rotate(90deg); -khtml-transform:rotate(90deg); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); font-family:Comfortaa, cursive; text-transform:uppercase}
.betting-content .strikers .strikers-pos {max-width:85%; line-height:24px}
.betting-content .strikers .strikers-pos-line {background:linear-gradient(to right, rgba(var(--color-04-rgb),.4), rgba(var(--color-01-rgb),.4) 35%, #fff 90%); height:1px; margin:8px 0}
.betting-content .strikers .striker-name {position:relative; color:#000; display:inline-block; cursor:pointer}
.betting-content .strikers .striker-name text {position:absolute; top:0; left:-11px; font-size:16px; color:#f50039; font-weight:bold}
.betting-content .strikers .striker-name span {font-size:13px; color:var(--color-05-hex)}
.betting-content .strikers .striker-name:hover:not(.striker-name-s) {background-color:rgba(var(--color-05-rgb),.1); margin:0 0 0 -4px; padding:0 4px; box-shadow:0 0 0 2px var(--color-01-hex); border-radius:2px}
.betting-content .strikers .striker-name-s {background-color:rgba(var(--color-04-rgb),.1); margin:0 0 0 -4px; padding:0 8px; box-shadow:0 0 0 2px var(--color-04-hex); border-radius:2px}
.betting-content .strikers .striker-name-s span {}
.betting-content .strikers .striker-out {text-decoration:line-through}
.betting-content .strikers.active {display:block}

.betting-content .gorder {}
.betting-content .gorder-teams {position:relative; display:flex; flex-flow:wrap; margin:20px 20px 10px 20px; padding:0 40px 0 0}
.betting-content .gorder-teams .group {position:absolute; top:12px; right:5px; font-size:26px; font-family:Comfortaa, cursive; color:#666}
.betting-content .gorder-teams .gorder-tender {background-color:var(--color-01-hex); color:#fff; margin:3px 3px 0 0; padding:10px 16px; border-radius:2px; white-space:nowrap; cursor:move; z-index:2}
.betting-content .gorder-teams .gorder-tender.ui-draggable-disabled {opacity:0.3; cursor:default}
.betting-content .gorder-teams .gorder-tender:not(.ui-draggable-disabled):hover {filter:brightness(1.15)}
.betting-content .gorder-stage {position:relative; background-color:rgba(0,0,0,.03); height:48px; line-height:48px; margin-top:4px; border:1px rgba(0,0,0,.15) dashed; border-left:0 none; border-right:0 none; color:#333}
.betting-content .gorder-stage .order {position:absolute; top:1px; bottom:0; left:25px; z-index:2; color:#000; font-family:Comfortaa, cursive; font-size:15px}
.betting-content .gorder-stage.ui-droppable-disabled .order {color:#fff}
.betting-content .gorder-stage.hovered {background-color:#f3f3f3}
.betting-content .gorder-stage .tender-a {position:absolute; top:-1px; right:0; bottom:-1px; left:0; background-color:#f1f1f1; border-left:60px var(--color-04-hex) solid; padding-left:25px; color:#000; 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:30px; background-color:rgba(0,0,0,.1); cursor:pointer}
.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 {background-color:rgba(0,0,0,.2)}

.betting-content .attdef {display:flex; flex-wrap:wrap}
.betting-content .attdef div {padding:20px 20px 0 20px}

.betting-content #strikers-select {padding:20px 20px 10px 20px}
.betting-content #strikers-select > label {vertical-align:middle; font-size:14px; color:#666}
.betting-content #team-change {margin:0 20px 0 0}
.betting-content #show-club {margin-left:20px}
.betting-content .no-striker {display:none}
.betting-content .squad {display:none}
.betting-content .squad-show {display:block}
.betting-content .squad > div {display:flex; flex-flow:wrap; padding:5px 0 0 0}
.betting-content .striker-tender {background-color:var(--color-01-hex); color:#fff; margin:3px 3px 0 0; padding:10px 16px; border-radius:2px; white-space:nowrap; cursor:pointer}
.betting-content .striker-tender:hover {filter:brightness(1.15)}
.betting-content .striker-tender > span {color:rgba(255,255,255,.6); font-size:13px; display:none}
.betting-content .strikers-top {background-color:var(--color-01-hex); color:#fff; margin:3px 3px 0 0; padding:10px 16px; opacity:0.3}
.betting-content .strikers-top > span {color:rgba(255,255,255,.6); font-size:13px; display:none}
.betting-content .striker-tender-off {background-color:var(--color-04-hex); color:#fff; margin:3px 3px 0 0; padding:10px 16px; opacity:0.7}
.betting-content .striker-tender-off > span {color:rgba(255,255,255,.6); font-size:13px; display:none}
.betting-content #strikers-stage {position:relative; background-color:rgba(0,0,0,.03); border:1px rgba(0,0,0,.15) solid; border-left:0 none; border-right:0 none; min-height:30px; padding:10px 20px}
.betting-content #strikers-stage #strikers-counter {position:absolute; top:13px; right:18px; color:#666; font-family:Comfortaa, cursive; font-size:27px}
.betting-content #strikers-stage .striker-top {position:relative; background-color:#eee; color:#000; margin:0 30% 4px 0; padding:12px 20px; 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:30px; background-color:rgba(0,0,0,.1); cursor:pointer}
.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 {background-color:rgba(0,0,0,.2)}

.betting-checker {padding:20px; font-size:18px; text-align:center}
.betting-checker > span {font-size:24px; font-family:Comfortaa, cursive; color:#333}
.betting-checker > span > span {font-size:40px; color:#000; display:inline-block; margin-right:4px}
.betting-checker > text {font-size:14px; color:#666; display:block; padding-top:10px; line-height:22px}

#betting-save {margin-right:20px}
#betting-save, #betting-close-ask, #betting-advanced-close-ask {padding:16px 60px; font-size:18px; cursor:pointer; border:0 none; border-radius:3px; background-color:var(--color-04-hex); color:#fff}
#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-saving {position:absolute; top:-1px; left:200px; background:#fff url(../img/load2.gif) 0 center no-repeat; width:120px; height:52px; line-height:52px; padding-left:5px; display:none}*/

#betting-done-top {position:fixed; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,0.7); z-index:999; display:none}
#betting-done-center {display:flex; justify-content:center; align-items:center; width:100%; height:100%}
#betting-done {background-color:#fff; padding:40px; box-shadow:0 0 10px #000}
#betting-done .text {text-align:center; margin-bottom:30px; font-size:16px; line-height:1.8}
#betting-done .buttons {display:flex; flex-wrap:wrap; justify-content:space-between; gap:20px}
#betting-close-no, #betting-close, #betting-advanced-close-no, #betting-send {flex-grow:1; padding:15px 40px; font-size:18px; cursor:pointer; border:0 none; border-radius:3px; background-color:var(--color-04-hex); color:#fff}
#betting-close-no:hover, #betting-close:hover, #betting-advanced-close-no:hover, #betting-send:hover {filter:brightness(1.15)}

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

/*#betting-send-loading {margin-right:295px; display:none}*/


.user-overview-top {display:flex; flex-wrap:wrap; padding:25px 25px 35px 25px}
.user-overview-top .left {margin-right:40px}
.user-overview-top .left .avatar {min-width:100px; width:100px; height:100px; border-radius:50%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden}
.user-overview-top .left .avatar .letter {color:#fff; font:52px Comfortaa, cursive; text-transform:uppercase; text-align:center; line-height:2.1}
.user-overview-top .right {}
.user-overview-top .right .name {padding:25px 0 10px 0; font-size:30px; font-family:Comfortaa, cursive; color:#000}
.user-overview-top .right .name .participation {display:inline-block; padding:0 0 0 5px; font-size:13px; color:#666; font-style:italic}
.user-overview-top .right .awards {}
.user-overview-top .right .awards img {display:inline-block; margin:10px 10px 0 0}
.user-overview-top .right .out {padding:15px 0 0 0; color:#666; font-style:italic; line-height:1.5}
.user-overview-top .right .top {color:#666; font-size:14px; line-height:28px}
.user-overview-top .right .top .points {font-weight:bold; font-size:30px; color:#333; padding:15px 0 12px 0}
.user-overview-top .right .top span {color:#333; font-weight:bold; font-size:16px; padding-left:8px}

.user-overview-list {padding:0 30px 15px 30px; text-align:left}
.user-overview-list > div {line-height:30px}
.user-overview-list > div > span {display:inline; margin-right:12px; color:var(--color-05-hex); font-size:13px}

.user-overview-groups {display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:15px}
.user-overview-groups .group {display:flex; flex-wrap:wrap; flex:0 1 calc(50% - 2px); margin:5px 0 3px 0}
.user-overview-groups .name {flex:0 1 100%; margin:12px 30px 2px 40px}
.user-overview-groups .teams {flex:0 1 100%}
.user-overview-groups .teams .row {background-color:#f3f3f3; margin:0 0 4px 0; padding:10px 15px}
.user-overview-groups .teams .row span {display:inline; margin-right:15px; color:var(--color-05-hex); font-size:13px}

.results-content-group-name {margin:12px 30px 2px 30px}
.results-content {display:flex; flex-wrap:wrap; justify-content:space-between; background-color:#f3f3f3; margin:0 0 4px 0; padding:5px 30px}
.results-content .teams {width:40%; padding:5px 0}
.results-content .score {width:8%; padding:5px 0}
.results-content .ftn {width:8%; padding:5px 0}
.results-content .striker {width:35%; padding:5px 0}
.results-content .striker span {font-size:13px; color:var(--color-05-hex)}
.results-content .chnc {width:9%; padding:5px 0; text-align:right}


#comparison {}
.comp-header {background-color:#333; margin-bottom:1px; padding:14px 20px 10px 20px; border-radius:3px; border-bottom-left-radius:0; border-bottom-right-radius:0; text-transform:uppercase; font-size:15px; font-family:Comfortaa, cursive; color:rgba(255,255,255,.75)}

.comp-content-title {margin-bottom:25px}
.comp-content-title:last-child {margin-bottom:0}

.comp-real {display:flex; flex-wrap:wrap; background-color:rgba(0 0 0 / 9%); border-radius:3px; border-top-left-radius:0; border-top-right-radius:0}
.comp-real-h {}
.comp-real .small {padding-right:15px; color:#333; font-size:11px}

.comp-empty {margin-bottom:3px}
.comp-hidden-content {position:relative; margin:0 0 5px 0}

.comp-bet {}

.comp-bet-name {display:flex; flex-wrap:wrap; justify-content:space-between; margin:4px 0 1px 0; background-color:rgba(0 0 0 / 12%); font-weight:bold; border-radius:3px; border-bottom-left-radius:0; border-bottom-right-radius:0; overflow:hidden}
.comp-bet-name > div {padding:12px 20px 12px 20px}
/*.comp-bet-name > div.me {color:var(--color-03-hex)}*/

.comp-order > div {width:25%; padding:15px 15px 15px 20px; box-sizing:border-box}

.comp-bet-order {display:flex; flex-wrap:wrap; padding:4px 0; background-color:rgba(0 0 0 / 6%); border-radius:3px; border-top-left-radius:0; border-top-right-radius:0; overflow:hidden}
.comp-bet-order > div {display:flex; align-items:baseline; width:25%; padding:10px 15px 10px 20px; box-sizing:border-box}
.comp-bet-order > div > span {padding:0 10px 0 0; font-size:11px; display:none}

.comp-order2 > div {width:50%; padding:15px 15px 15px 20px; box-sizing:border-box}

.comp-bet-order2 {display:flex; flex-wrap:wrap; padding:5px 0; background-color:#f6f6f6; border-radius:3px; border-top-left-radius:0; border-top-right-radius:0; overflow:hidden}
.comp-bet-order2 > div {width:50%; padding:10px 15px 10px 20px; box-sizing:border-box}
.comp-bet-order2 > div > span {padding-right:10px; color:#222; font-size:11px}

.comp-order3 > div {flex:0 1 auto; padding:15px 15px 15px 30px}

.comp-bet-order3 {display:flex; flex-wrap:wrap; padding:5px 0; background-color:#f6f6f6}
.comp-bet-order3 span {width:25%; padding:10px 20px; box-sizing:border-box}

.comp-highlight {border-radius:3px; color:#666; cursor:default; transition:all 150ms ease}
.comp-highlight.active {background-color:rgba(0 0 0 / 60%); color:#fff}

/*.comp-show {cursor:pointer}
.comp-show:hover {background-color:rgba(var(--color-04-rgb),.1)}*/
.comp-show2 {cursor:pointer}
.comp-show2:hover {background-color:rgba(var(--color-04-rgb),.1)}

.comp-show-h {margin-top:2px; margin-bottom:20px}
.comp-block {/*margin-bottom:20px*/}
.comp-block2 {margin-bottom:5px}

.comp-match {justify-content:space-between; margin-bottom:2px; border-radius:0}
.comp-match .teams {padding:15px 20px; font-weight:700}
.comp-match .result {padding:15px 20px; font-weight:700}
.comp-match .comp-match-info {width:100%; padding:0 20px 15px 20px}
.comp-match .comp-match-info .text {display:inline-block; padding-right:15px; color:var(--color-05-hex); font-size:13px}

.comp-bet-match {display:flex; flex-wrap:wrap; justify-content:space-between; background-color:rgba(0 0 0 / 5%); margin:-1px 0 2px 0; padding:5px 20px}
.comp-bet-match .name {width:20%; padding:10px 0; font-weight:700; box-sizing:border-box}
.comp-bet-match .name.me {color:var(--color-03-hex)}
.comp-bet-match .result {width:50px; padding:10px 0; text-align:center; box-sizing:border-box}
.comp-bet-match .frtn {width:50px; padding:10px 0; text-align:center; box-sizing:border-box}
.comp-bet-match .striker {width:30%; padding:10px 0; text-align:center; box-sizing:border-box}
.comp-bet-match .chnc {width:60px; padding:10px 0; text-align:center; box-sizing:border-box}
.comp-bet-match .points {width:40px; padding:10px 0; font-weight:700; text-align:right; box-sizing:border-box}
.comp-bet-match.success {background-color:rgba(var(--color-success-2-rgb),.2)}
.comp-bet-match.failure {background-color:rgba(var(--color-error-2-rgb),.2)}

/*.comp-match-h {background-color:rgba(var(--color-04-rgb),.1); margin-bottom:0}
.comp-match-h .teams {font-weight:bold}*/

.comp-unknown {}
.comp-unknown::before {content:'...'}

/*.comp-bet-me .comp-bet-name > div:first-child {box-shadow:inset 7px 0 0 rgba(var(--color-03-rgb),.3)}
.comp-bet-me .comp-bet-name > div:last-child {background-color:rgba(var(--color-03-rgb),.3)}*/
/*.comp-bet-me .comp-bet-order {box-shadow:inset 7px 0 0 rgba(var(--color-03-rgb),.3)}*/
/*.comp-bet-me.comp-bet-match .name {box-shadow:inset 7px 0 0 rgba(var(--color-03-rgb),.3)}
.comp-bet-me.comp-bet-match .points {background-color:rgba(var(--color-03-rgb),.3)}*/


#history .poster {display:block; width:100%; border-radius:10px; border-bottom-left-radius:0; border-bottom-right-radius:0}
#history .standing {width:100%; display:grid; grid-template-columns:10% auto 25%; grid-gap:1px; padding:1px; background:linear-gradient(to bottom, rgb(0 0 0 / 12%), #fff); box-sizing:border-box; color:#666}
#history .standing > div {background-color:rgba(255,255,255,0.9); padding:15px 20px}
#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:rgba(255,255,255,0.5); color:#000; font-weight:700}
#history .link {position:absolute; top:15px; right:20px; font-size:12px; color:#fff; display:none}
#history .caption.active {border-bottom:0 none}


#actual-match {position:relative; display:flex; flex-wrap:wrap; width:inherit; padding:15px 0 9px 0; background-color:#f7f7f7; border-bottom:1px rgba(0 0 0 / 7%) solid}
#actual-match .swiper-container {width:100%; padding:0 0 6px 0}
#actual-match .matches {/*display:flex;*/ /*gap:5px*/}
#actual-match .matches .match {position:relative; width:auto; /*margin:0 5px 0 0;*/ /*padding:12px 22px 9px 22px;*/}
#actual-match .matches .match:first-child {margin:0 0 0 15px}
#actual-match .matches .match:last-child {margin:0 45px 0 0}
#actual-match .matches .match:only-child {margin:0 0 0 15px}
#actual-match .matches .match:hover {filter:brightness(1.15)}
#actual-match .matches .match .data {margin:0 5px 0 0; padding:12px 22px 9px 22px; box-sizing:border-box; background-color:var(--color-01-hex); border-radius:3px; font-size:14px; font-family:Comfortaa, cursive; text-transform:uppercase; color:#fff; cursor:pointer; line-height:1.4}
#actual-match .matches .match .data .date {padding:0 0 4px 0; color:rgba(255 255 255 / 65%); font-size:11px; text-transform:none}
#actual-match .matches .match.active .data {background-color:var(--color-04-hex)}
#actual-match .matches .match.active .data::after {content:''; position:absolute; bottom:-6px; left:calc(50% - 3px); width:0; height:0; border-style:solid; border-width:6px 6px 0 6px; border-color:var(--color-04-hex) transparent transparent transparent}
#actual-match .list {order:1; width:100%; padding:5px 15px 0 15px; display:none}
#actual-match .list .row {display:flex; flex-wrap:wrap; justify-content:space-between; margin:0 0 2px 0; padding:5px 5px 5px 20px; background-color:rgba(0 0 0 / 5%); border-radius:3px}
#actual-match .list .row .name {width:20%; padding:10px 0 10px 0; font-weight:700; box-sizing:border-box}
#actual-match .list .row .name.me {color:var(--color-03-hex)}
#actual-match .list .row .result {width:50px; padding:10px 0; text-align:center; box-sizing:border-box}
#actual-match .list .row .frtn {width:50px; padding:10px 0; text-align:center; box-sizing:border-box}
#actual-match .list .row .striker {width:30%; padding:10px 0; text-align:center; box-sizing:border-box}
#actual-match .list .row .chnc {width:70px; padding:10px 0; text-align:center; box-sizing:border-box}
#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(0 0 0 / 10%)}
#actual-match .list .row .actual-highlight.accordance {background-color:rgba(0 0 0 / 60%); color:#fff}
#actual-match .list .row.me {background-color:rgba(0 0 0 / 10%)}
#actual-match .list.active {display:block}
/*#actual-match::before {content:''; position:absolute; top:0; bottom:0; left:0; z-index:2; width:15px; __background-color:#f7f7f7; box-shadow:inset 10px 0 10px #f7f7f7; _opacity:.5}*/
/*#actual-match .match .list .row.me {background-color:#fff4e5}*/
#actual-match.hidden {display:none}


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

#user {display:flex; align-items:center; position:relative; background-color:#1f1f1f; width:100%; height:100px; padding:18px; box-sizing:border-box; cursor:pointer}
#user .icon {position:relative; min-width:56px; width:56px; height:56px; margin:0 15px 0 0; transition:all 200ms ease}
#user .icon > div {position:absolute; top:0; right:0; bottom:0; left:0; display:flex; justify-content:center; align-items:baseline; color:#fff; font:28px Comfortaa, cursive; text-transform:uppercase; border-radius:100%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden}
#user .icon .letter {text-align:center; line-height:2.2}
#user .icon > div::after {content:' '}
#user .info {line-height:1.4}
#user .info .name {color:#fff; font-size:18px; font-weight:bold}
#user .info .points {color:rgba(255,255,255,.5); font-size:22px}
#user .info .points span {padding-left:5px; font-size:18px}
#user .info .onlooker {color:#999; font-style:italic}
/*#user:hover {background-color:#2f2f2f}*/
#user:hover .icon {transform:scale(1.15)}

#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 {font:17px Comfortaa, cursive; text-transform:uppercase; padding:0 15px 0 0}
#responsive-menu-toggle .lines {display:flex; flex-direction:column; justify-content:center; align-items:center; width:25px; height:25px}
#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:-100%; bottom:0; width:100%; max-width:100%; border-bottom-left-radius:100%; background-color:rgba(0,0,0,0.1); opacity:0; overflow-y:auto; z-index:1000; transition:all 300ms ease-in-out}
#responsive-menu.active {right:0; background-color:rgba(var(--color-04-rgb),0.99); border-bottom-left-radius:0; opacity:1}
#responsive-menu > div {padding:8% 0}
#responsive-menu .row {color:rgba(255,255,255,.3); text-transform:uppercase; font:26px Comfortaa, cursive; line-height:80px; padding:0 20px 0 100px; white-space:nowrap; cursor:pointer}
#responsive-menu .row.active {border-left:8px rgba(255,255,255,.5) solid; padding:0 20px 0 92px; 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:rgba(255,255,255,.5); transform:rotate(45deg)}
#responsive-menu .close::after {content:''; position:absolute; left:calc(50% - 2px); height:40px; width:2px; background-color:rgba(255,255,255,.5); transform:rotate(-45deg)}


#betting-progress {width:100%; overflow:hidden; text-align:right; display:none}
#betting-progress .info {padding:12px 20px 10px 20px; color:rgba(255,255,255,.4)}
#betting-progress .info .desc {font-size:14px; vertical-align:middle}
#betting-progress .info .percentage {font-size:24px; font-family:Comfortaa, cursive; display:inline-block; width:110px; vertical-align:middle}
#betting-progress .info .percentage span {color:rgba(255,255,255,.75); font-size:40px; padding-right:5px}
#betting-progress .bar {position:relative; background-color:#4c4c4c; height:20px}
#betting-progress .bar div {position:absolute; top:0; bottom:0; left:0; background-color:var(--color-06-hex); transition:all 200ms ease}

#days {display:flex; justify-content:flex-end; align-items:center; width:100%; background-color:rgba(var(--color-permanent-01-rgb),.1); color:rgba(var(--color-permanent-01-rgb),.75); font-size:14px; text-align:right; padding:20px}
#days img {margin:0 12px 0 0}

#deposit {position:relative; background:#3a3a3a url(../img/deposit-bg.png) 30px center no-repeat; width:100%; height:110px; text-align:right; z-index:1}
#deposit .full {padding:8px 17px 0 0; font-size:48px; color:#ffd24d}
#deposit .distribution {display:flex; justify-content:flex-end; padding:0 20px 0 0; 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:#777; display:none}
#menu-history:hover {background-color:#4c4c4c; color:#999}
#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:#777; border-top:1px rgba(var(--color-permanent-01-rgb),.05) solid; display:none}
#menu-settings:hover {background-color:#4c4c4c; color:#999}

#new-message {position:relative; width:100%; padding:0; display:none; overflow:hidden}
#new-message form {width:100%; box-sizing:border-box}
#new-message .clone {position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(68,68,68,0.5); display:none}
#new-message .circle-loader-spin {position:absolute; top:calc(50% - 22px); right:calc(50% - 22px); z-index:1; width:36px; height:36px; border:3px solid rgba(var(--color-permanent-01-rgb),.15); border-top:3px solid var(--color-permanent-01-hex); display:none}
#new-message-text {background-color:#333; height:48px; width:100%; margin:0 0 -4px 0; padding:15px 20px; color:#ccc; outline:none; overflow:hidden; border:0 none; resize:none; font-size:14px; line-height:18px}
#new-message-text::placeholder {font-style:italic}
#new-message-more {display:none; margin-top:1px}
#new-message-more .uploaded-images {position:relative; overflow:hidden; display:none}
#new-message-more .uploaded-images .remove {position:absolute; top:0; right:0; padding:5px 10px; background-color:#222; color:#ddd; cursor:pointer}
#new-message-more .uploaded-images img {display:block; width:100%; margin:0 0 1px 0}
#new-message-more .upload-error {background-color:var(--color-error-hex); color:#fff; margin-bottom:1px; padding:10px; font-size:13px; line-height:20px; text-align:center; display:none}
#new-message-more .tools {display:flex; align-items:stretch; gap:1px; position:relative}
#new-message-more .tools .upload-comment-image {width:50%; display:flex; justify-content:center; align-items:center; gap:6px; position:relative; overflow:hidden; background-color:#333; box-sizing:border-box; color:#999; font-size:12px; cursor:pointer}
#new-message-more .tools .upload-comment-image:hover {background-color:#393939}
#new-message-more .tools .upload-comment-image input[type=file] {position:absolute; top:-500px}
#new-message-more .tools #new-message-send {width:50%; background-color:#222; color:#ccc; font-size:12px; padding:13px 0; border:0 none; cursor:pointer}
#new-message-more .tools #new-message-send:hover {background-color:#2c2c2c}
#new-message .close {position:absolute; top:10px; right:10px; width:30px; height:30px; cursor:pointer; display:none}
#new-message .close::before {content:''; position:absolute; left:calc(50% - 2px); height:30px; width:2px; background-color:rgba(0,0,0,.5); transform:rotate(45deg)}
#new-message .close::after {content:''; position:absolute; left:calc(50% - 2px); height:30px; width:2px; background-color:rgba(0,0,0,.5); transform:rotate(-45deg)}


#standings-table {width:100%; padding:0 0 25px 0}
#standings-table .top {padding:25px 20px 15px 20px; font-size:20px; font-family:Comfortaa, cursive; color:var(--color-permanent-01-hex); text-transform:uppercase; text-align:right; letter-spacing:1px; border-bottom:1px #4f4f4f solid}
#standings-table .table {}
#standings-table .row {position:relative; display:flex; justify-content:space-between; align-items:center; color:#aaa; border-bottom:1px #4f4f4f solid; cursor:pointer}
#standings-table .row.mine {background-color:rgba(var(--color-permanent-01-rgb),.05); color:#fff}
#standings-table .row:hover {background-color:rgba(255,255,255,.07)}
#standings-table .order {flex:0 1 25px; padding:18px 25px 18px 5px; text-align:right; color:#888; font-size:12px}
#standings-table .award-1 {color:#edb200}
#standings-table .award-2 {color:#c1c1c1}
#standings-table .award-3 {color:#8c7853}
#standings-table .name {flex:1 1 auto; text-align:left}
#standings-table .points {flex:0 1 50px; padding:0 20px; text-align:right; color:#aaa}
#standings-table .detailed {display:flex; justify-content:flex-end; padding:15px 20px 0 0}
#standings-table .detailed div {padding:14px 30px 12px 30px; background-color:rgba(0,0,0,.3); color:rgba(255,255,255,.35); border-radius:3px; text-transform:uppercase; font-family:Comfortaa, cursive; font-size:11px; cursor:pointer}
#standings-table .detailed div:hover {background-color:rgba(0,0,0,.4); color:rgba(255,255,255,.5)}
#standings-table .bottom {padding:10px 20px 0 0; color:var(--color-permanent-01-hex); text-align:right; font-size:12px}
#standings-table .bottom span {text-transform:lowercase}


.users-order-table {}
.users-order-table .row {display:flex; justify-content:space-between; align-items:center; margin:0 0 2px 0; padding:10px 20px; background-color:rgba(0 0 0 / 5%); border-radius:3px; cursor:pointer}
.users-order-table .row .order {min-width:35px; width:35px; font-weight:700}
/*.users-order-table .row .order.award-1 {color:#edb200}
.users-order-table .row .order.award-2 {color:#c1c1c1}
.users-order-table .row .order.award-3 {color:#8c7853}*/
.users-order-table .row .avatar {min-width:36px; width:36px; height:36px; border-radius:100%; background-position:center; background-repeat:no-repeat; background-size:100%; overflow:hidden}
.users-order-table .row .avatar .letter {color:#fff; font:19px Comfortaa, cursive; text-transform:uppercase; text-align:center; line-height:2.1}
.users-order-table .row .name {flex-grow:1; padding:0 25px 0 18px}
.users-order-table .row .points {width:50px; text-align:right; font-weight:700}
.users-order-table .row:hover {filter:brightness(1.15)}
.users-order-table .row.me {background-color:rgba(0 0 0 / 10%)}
.users-order-table .nobody-ready {padding:20px; color:#666; font-style:italic; text-align:center}


#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.12)}