/*
	colors by http://hexcolortool.com/
	green:#178428 #2F903E
	darken green:#0A771B
	lighten:#249135
	blue:#2B498F
	blue light5%:#38569C
	blue dark5%:#1E3C82
	light:#4563A9
	tabs2:#BFE2C5
	tabs2 dark:#A6C9AC
	tabs2:#2C9F3E
*/

body{
	-webkit-font-smoothing:antialiased;
	background-image:url(m-bg.jpg);
	background-position:center;
	background-size:cover;
	--footer-height:54px;
	--header-height:56px;
}

html,body {
	width:100vw;
	height:100svh;
}

*::-moz-selection{text-decoration:none}
*::selection{text-decoration:none}

#site-container{
	box-sizing:border-box;
	background:#569569;
	backdrop-filter:grayscale(100%);
}

.m #site-container{
	border-top:env(safe-area-inset-top) solid #89B38D;
	border-bottom:env(safe-area-inset-bottom) solid #3C4A6D;
}

#site-container:not(.no-transparency){
	opacity:.9;
}

.site-pusher, #site-container{height:100%}
#site-container{overflow:hidden;}
.site-pusher{transform:translate3d(0, 0, 0);transition-duration:0.3s;will-change:transform}

#header{
	height:var(--header-height);
	background:#4F8F58 var(--gloss);
}

#header:before{content:'';position:absolute;left:60px;right:60px;top:1px;height:var(--header-height);background:url(logo.png) no-repeat 50% 4px;background-size:130px;filter:drop-shadow(0 0 2px #FFF);}

#header-icon, #header-right-icon, #header-back{
	position:absolute;
	display:block;
	float:left;
	width:60px;
	cursor:pointer;
	border:0;
	background:none;
	outline:none;
	color:#FFF;
	top:0;
	font-size:24px;
	text-align:center;
	padding:12px 0;
	height:50px;
}
/*#header-icon:active,#header-right-icon:active{background:rgba(255,255,255,.5)}*/
#header-right-icon{right:0}

/*#header:after{content:'';position:absolute;left:0;right:0;top:50px;height:1px;background:#FFF;opacity:.5}*/

/*
#header-right-icon:before{content:'';background:#FFF;position:absolute;left:17px;right:16px;top:24px;bottom:23px}
#header-right-icon:after{content:'';background:#FFF;position:absolute;left:24px;right:23px;top:17px;bottom:16px}
#header-back:before,#header-back:after{content:'';position:absolute;top:50%;margin-top:-2px;left:15px;width:20px;height:5px;border-radius:3px;background:#FFF;-webkit-transform-origin:left center;transform-origin:left center}
#header-back:before{-webkit-transform:rotate(-45deg) translateY(2px);transform:rotate(-45deg) translateY(2px)}
#header-back:after{-webkit-transform:rotate(45deg) translateY(-2px);transform:rotate(45deg) translateY(-2px)}*/

#header.unread:after{content:'';position:absolute;background:red;width:7px;height:7px;top:8px;right:8px;border-radius:9px;box-shadow:1px 1px 2px #000;border:1px solid #FFF}

.menu{
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	overflow-y:scroll;
	/*-webkit-overflow-scrolling:touch;*/
	width:250px;
	font-size:16px;
	transform:translate3d(-250px, 0, 0);
	background:linear-gradient(var(--green),var(--blue));
	box-shadow:inset 0 0 6px 0 #000;
	padding:3px 9px;
	box-sizing:border-box;
}
.menu.right{
	left:auto;
	right:0;
	transform:translate3d(250px, 0, 0);
}
/*.menu-title{color:#FFF;font-size:15px;background:rgba(255,255,255,.3);text-transform:uppercase;text-align:center}
.menu-link{color:#FFF;display:block;line-height:38px;padding-left:22px;white-space:nowrap;position:relative;background:-webkit-linear-gradient(top,rgba(255,255,255,.05) 0%,rgba(0,0,0,.05) 100%)}
.menu-link:active,.menu-icon:active{background-color:rgba(255,255,255,.3);color:#FFF}
.menu-link .fas{color:#FFF;margin:0 8px 0 -5px;width:16px;text-align:center;}
.menu-icon{display:inline-block;font-size:11px;width:33.33%;padding:5px 0 9px 0;color:#FFF;background-size:40px;background-position:50% 25%;text-align:center;box-sizing:border-box;}*/

.menu-icon .fas,.menu-icon .fa-solid{display:block;font-size:40px;margin:5px}
.menu .block{margin:0 !important}
.menu-search, .menu-search:focus{background:transparent;border:2px solid #FFF;width:93%;margin:10px;font-size:20px;color:#FFF;}
.menu-search::-webkit-input-placeholder{color:#FFF}
.menu-search::-webkit-search-cancel-button{display:none}
.menu-search-icon{position:absolute;color:#FFF;left:17px;top:16px;}
.menu-top-right-icon{color:#FFF;font-size:18px !important;margin:15px 8px;}
.menu-top-right-icon.fa-camera{margin-right:15px}
.menu-top-right-icon:active{color:var(--orange)}

.with-sidebar .site-pusher{transform:translate3d(250px, 0, 0);}
.with-right-sidebar .site-pusher{transform:translate3d(-250px, 0, 0);}
@keyframes loader{
	0%{background-color:transparent}
	100%{background-color:#444}
}
.with-loader #header{-webkit-animation:loader infinite .5s alternate linear}

div#content{
	position:absolute;
	top:var(--header-height);
	right:0;
	left:0;
	bottom:var(--footer-height);
	padding:var(--space);
	overflow-y:scroll;
	overflow-x:hidden;
	-webkit-overflow-scrolling:touch;
	background:#F0F0F0;
	box-shadow:inset 0 5px 7px -5px rgba(0,0,0,.5);
}

footer{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	background:linear-gradient(#5A719F, #3E4F76) #475E8F;
	display:table;
	table-layout:fixed;
	width:100%;
	text-align:center;
	text-transform:uppercase;
	z-index:2;
	box-shadow:inset 0 3px 0 rgba(255,255,255,.2),var(--shadow-up);
}

footer a{
	height:var(--footer-height);
	color:#FFF;
	padding:0 10px;
	display:table-cell;
	vertical-align:middle;
	box-sizing:border-box;
	font-size:24px;
}

footer a i{
	display:inline-block;
	width:48px;
	padding:7px 0;
	border-radius:14px;
	text-shadow:0 1px 2px rgba(0,0,0,.4);
}

footer a:last-child{border-right:none}
footer a:active{color:#FFF}
footer a i{background:rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
footer a:active i{background:rgba(255,255,255,.3);}

.keyboard-open footer{display:none;}
.keyboard-open #content{bottom:0;}
@keyframes show{
	from{transform:scale(.7);opacity:0}
	to{transform:scale(1);opacity:1}
}
.scrollable{position:absolute;overflow:scroll;top:var(--tabs-height);left:0;right:0;bottom:0;padding:var(--space);z-index:0}
.show{animation:show 250ms}
#site-cache{left:0;right:0;top:0;bottom:0;z-index:3;background:rgba(0, 0, 0, .4);position:absolute;display:none;opacity:0;transition:.5s all;backdrop-filter:blur(0);}
.with-sidebar #site-cache, .with-right-sidebar #site-cache{display:block;opacity:1;}
.without-menu #header-icon, .without-menu #header-right-icon, .without-menu footer{display:none}
.without-menu div#content{bottom:0}
/* VF Theme */
/*.actions{margin:0 -10px;font-size:17px;margin-bottom:12px;font-weight:bold;border:3px solid #2B498F;border-width:3px 0;}
.actions a{display:block;background:-webkit-linear-gradient(top,#F5F5F5,#D0D0D0);text-align:center;color:#2B498F;border:1px solid #2B498F;border-width:1px 0 0 0;padding:5px 0;position:relative}
.actions a:active{background:#2B498F;color:#FFF}
.actions a:first-child{border-top-width:0}*/

.ca th{ background:var(--green) linear-gradient(rgba(255, 255, 255, .2), rgba(0, 0, 0, .2)); }

.actions-alwaysvisible{display:block;position:absolute;bottom:0;left:0;width:100%;box-sizing:border-box;margin:0;padding:8px;background:#FFF;border-top:1px solid var(--green);z-index:3;box-shadow:var(--shadow-up)}

.match-list-club{border:1px solid #000;padding:0 5px;margin-right:7px;border-radius:4px;display:inline-block;font-weight:bold;background-image:linear-gradient(rgba(255, 255, 255, .3), rgba(0, 0, 0, .3))}

.match-comment.open{margin:var(--space) calc(-1 * var(--space));border-left-width:0;border-right-width:0;border-radius:0}

#mainbrowse > #tabs{display:none}

@keyframes mainbrowse{
	from{ opacity:0 }
	90%{ opacity:0 }
	to{ opacity:1}
}
#mainbrowse-retry{margin-top:15px;display:block;animation:mainbrowse 5s}

/* AyCSS */

/* Virtuafoot Content */
#club_maillot{display:inline-block;width:50%;overflow:hidden}
#club_maillot > div{margin:-74px 0 -103px 0;}

#minichat .th{display:none}
#minichat_text{height:480px;overflow:scroll;}
#minichat form{position:fixed;bottom:55px;width:100%;left:0;padding:0 7px;box-sizing:border-box;}

/* tutorial */
@keyframes tutorial-mask{
	from{opacity:0;}
	to{opacity:1;}
}
@keyframes tutorial-frame{
	from{box-shadow:0 0 0 2px #FFF,0 0 8px 2px rgba(255,255,255,.5),inset 0 0 8px rgba(255,255,255,.25);}
	to{box-shadow:0 0 0 3px #FFF,0 0 22px 8px rgba(255,255,255,.85),inset 0 0 14px rgba(255,255,255,.5);}
}
@keyframes tutorial-icon{
	0%{transform:scale(.7);opacity:0;}
	30%{opacity:.7;}
	100%{transform:scale(1.15);opacity:0;}
}
@keyframes tutorial-text{
	from{opacity:0;transform:translateY(10px);}
	to{opacity:1;transform:none;}
}
#tutorial-mask{position:absolute;width:100%;height:100%;animation:tutorial-mask 2s forwards;z-index:6;}

#tutorial-frame{position:absolute;z-index:9;border-radius:8px;pointer-events:none;animation:tutorial-frame .8s infinite alternate}

#tutorial-icon{position:absolute;z-index:10;pointer-events:none;}
#tutorial-icon:before{content:'';position:absolute;inset:0;border:1px solid rgba(255,255,255,1);border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,.4);animation:tutorial-icon 2.2s infinite;}

#tutorial-text{position:absolute;z-index:8;left:12px;width:calc(100% - 24px);box-sizing:border-box;padding:14px 16px;border:1px solid rgba(255,255,255,.18);border-left:4px solid var(--green);border-radius:14px;background:linear-gradient(155deg,rgba(34,49,78,.96),rgba(27,46,32,.96));color:#F2F5F2;font-size:16px;line-height:1.45;box-shadow:0 14px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);animation:tutorial-text .3s ease-out both;overflow:hidden;}

#tutorial-text:before{content:"\f460";font-family:'Font Awesome 6 Pro',cursive;font-weight:900;position:absolute;top:0;right:6px;font-size:56px;opacity:.1;pointer-events:none;}

#tutorial-text a{display:block;margin-top:12px;font-weight:bold;}

#tutorial-tail{position:absolute;z-index:7;width:18px;height:18px;transform:rotate(45deg);border-radius:3px;background:rgba(34,49,78,.96);border-top:1px solid rgba(255,255,255,.18);border-left:1px solid rgba(255,255,255,.18);}

#tutorial-tail.tutorial-tail-down{background:rgba(27,46,32,.96);border:none;border-bottom:1px solid rgba(255,255,255,.18);border-right:1px solid rgba(255,255,255,.18);}

#tutorial-progress{
	position:absolute;
	top:calc(8px + env(safe-area-inset-top));
	right:10px;
	min-width:78px;
	color:#F2F5F2;
	font-size:14px;
	font-weight:bold;
	text-align:center;
	background:rgba(20,30,24,.72);
	border:1px solid rgba(255,255,255,.18);
	padding:5px 10px 6px;
	border-radius:12px;
	box-shadow:0 4px 12px rgba(0,0,0,.4);
}

#tutorial-progress-bar{margin-top:5px;height:3px;border-radius:2px;background:rgba(255,255,255,.22);overflow:hidden}

#tutorial-progress-bar > div{height:100%;border-radius:2px;background:#79C387;}
/* END tutorial */