/*! */
/*! ----------------------------------------------------------- */
/*! 	HEADER GENERAL											*/
/*! ----------------------------------------------------------- */


header#main-header {
	position:fixed;
	top:0; left:0;
	width: 100%;
	z-index: 100;
}

header#main-header #top-banner {
	display: flex;
	width: 940px;
	margin: 0px auto; /* Center the div to the page */
}

@media screen and (max-width: 940px) { header#main-header #top-banner {
		width: 700px;
}}
@media screen and (max-width: 720px) { header#main-header #top-banner {
		width: 96%;
}}

header#main-header #top-banner-left, header#main-header #top-banner-right {
	display: flex;
	width: 100%;
}

@media screen and (max-width: 720px) { header#main-header #top-banner-left {
	width: 65px;
}}

header#main-header #top-banner-right {
	justify-content: flex-end;
}

@media screen and (max-width: 720px) { header#main-header #top-banner-right {
	justify-content: space-around;
}}


/* ======== SITE LOGO ======== */

header#main-header a.logo-homepage {
	width: 233px; height: 55px;
}

header#main-header a.logo-homepage:hover {
	background-color: var(--bg-color-blue-darker);
}

header#main-header .logo-img {
	width: 215px; height: 47px;
	margin: 4px 10px;
}

header#main-header .logo-img.default {
	background: url(../Imageset/main-header-title.svg) top left no-repeat;
}
header#main-header .logo-img.xmas {
	background: url(../Imageset/main-header-title.svg) top left no-repeat;
	/*background: url(../Imageset/main-header-title-xmas.png) top left no-repeat;*/
}

#menu-mobile.droplist {
	display: none;
}

@media screen and (max-width: 940px) {
	
	header#main-header a.logo-homepage {
		width: 75px; height: 55px; overflow: hidden;
	}
	header#main-header .logo-img {
		width: 55px; height: 55px;
		margin: 0px 10px;
	}
	header#main-header .logo-img.default, header#main-header .logo-img.xmas {
		width: 43px; height: 47px;
		background-size: 215px 47px;
		background-position: -62px 0px;
		margin-top: 5px;
	}
	header#main-header .logo-img.xmas {
	}
}

@media screen and (max-width: 720px) { 

	header#main-header a.logo-homepage {
		display: none;
	}
	
	#menu-mobile.droplist {
		display: block;
		/*position: relative;*/
	}
	
	#menu-mobile.droplist .droplist-btn {
		/*cursor: pointer;*/
		width: 50px; height: 55px;
		margin: 0;
		margin-left: 3px; margin-right: 6px;
		background: url(../Imageset/main-header-title.svg) top left no-repeat;
		background-size: 251px 55px;
		background-position: -72px 0px;
	}
	
	header#main-header #menu-mobile .droplist-btn.selected {
		/*filter: invert(0) saturate(10000%) hue-rotate(90deg);*/
	}
		
	#menu-mobile.droplist .droplist-menu {
		/*position: absolute;
		top: 55px;*/
		left: -10px;
		width: 100vw;
		/*box-shadow: 0px 2px 2px var(--color-shadow-black);
		border: none;*/
		background-color: var(--bg-color-blue);
		font-weight: bold;
	}
	
	#menu-mobile.droplist .droplist-menu a .droplist-item div {
		color: var(--bg-color-default);
	}
	
	#menu-mobile.droplist .droplist-menu .droplist-item:hover {
		background-color: var(--bg-color-blue-darker);
	}
	
	/*.vertical-separator {
		width: 1px;
		height: 45px;
		background-color: gray;
		margin-top: 5px;
	}
	
	header#main-header #menu-mobile .option {
		display: flex; align-items: center;
		padding: 10px 20px;
		font-size: 1.2em;
		height: 35px;
	}*/
	
	header#main-header #menu-mobile .droplist-item .icon {
		--icon-size: 30px;
		margin-right: 15px;
		filter: var(--icon-filter-white);
	}
	
	/*header#main-header #menu-mobile .separator {
		border-bottom: 1px #E1E1E5 solid;
	}*/
}



/* =================================================================================================== */
/* ========= MENU ICONS
/* =================================================================================================== */

header#main-header .menu-button {
	display: flex; flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 61px; height: 55px;
	font-size: 11px;
	font-weight: bold;
}

header#main-header a .menu-button {
	color: var(--text-color-orange);
}

header#main-header .menu-button .icon {
	filter: var(--icon-filter-orange);
	margin-bottom: 3px;
}

header#main-header a .menu-button:hover {
	background-color: var(--bg-color-blue-darker);
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

header#main-header a:hover {
	text-decoration: none;
}

header#main-header #top-banner-right a .menu-button {
	color: var(--text-color-clear-bgblue);
}

header#main-header #top-banner-right .menu-button .icon {
	filter: var(--icon-filter-white);
}

@media screen and (max-width: 720px) { 
	
	header#main-header .menu-button.menu-games,
	header#main-header .menu-button.menu-programs,
	header#main-header .menu-button.menu-nozone,
	header#main-header .menu-button.menu-dossiers,
	header#main-header .menu-button.menu-videos,
	header#main-header .menu-button.menu-search {
		display: none;
}}



/* =================================================================================================== */
/* ========= NOTIF
/* =================================================================================================== */


header#main-header #notifications-widget .menu-button, 
header#main-header #notifications-widget-disable .menu-button  {
	width: 55px; height: 55px;
}

header#main-header #notifications-widget-disable {
	opacity: .2;
}

@media screen and (max-width: 720px) { #notifications-widget, #notifications-widget-disable {
	width: 61px;
	background-position: -479px 0px;
}}

#notifications-widget .droplist .droplist-btn {
	width: 55px; height: 55px;
	cursor: pointer;
	display: flex; justify-content: center;align-items: center;
}
@media screen and (max-width: 720px) { #notifications-widget .droplist .droplist-btn {
	width: 61px;
}}

#notifications-widget .droplist .droplist-btn .icon {
	filter: var(--icon-filter-white);
}

/* Main button selected */
#notifications-widget .droplist .droplist-btn.selected {
	background-color: var(--bg-color-default-clearer);
}
@media screen and (max-width: 720px) { #notifications-widget .droplist .droplist-btn.selected {
	background-position: -644px 0px;
}}
#notifications-widget .droplist .droplist-btn.selected .icon {
	filter: inherit;
}

/* Counter */
#notifications-widget .droplist .droplist-btn .counter {
	position:absolute; top:9px; left: 28px;
	color: white; text-align: center; 
	font-size: var(--text-size-small); 
	font-weight: bold;
	background-color: red;
	width: 19px; height: 19px;
	padding: 0px;
	border-radius: 100px; /* used to make round button */
	box-shadow: 1px 1px 5px var(--color-shadow-black);
}

#notifications-widget .droplist .droplist-menu {
	width: 350px;
}


#notifications-widget .droplist .droplist-menu .droplist-item {
	white-space: normal; 
}

#notifications-widget .droplist .droplist-menu .user-avatar {
	--user-avatar-icon: 50px;
	margin-right: 10px;
}

/* marked */
#notifications-widget .droplist .droplist-menu .droplist-item.marked {
	 background-color: var(--text-color-orange); /* orange highlist */
}

/* mobile menu: ajust the droplist-menu position & size to fit in a mobile screen */
@media screen and (max-width: 720px) { 
	#notifications-widget .droplist .droplist-menu {
		right:-70px;
		width: 320px;
		font-size: .8em;
	}
	#notifications-widget .droplist .droplist-item {
		padding: 5px 10px;
	}
}


/* =================================================================================================== */
/* ========= USER DROPLIST MENU
/* =================================================================================================== */

#user-widget {
	width: 55px; height: 55px;
}


@media screen and (max-width: 720px) { #user-widget {
	width: 61px;
	background-position: -534px 0px;
}}

/* Droplist button */

#user-widget #user_menu.droplist .droplist-btn {
	width: 55px; height: 55px;
	display: flex; justify-content: center; align-items: center;
	cursor: pointer;
}
@media screen and (max-width: 720px) { #user-widget #user_menu.droplist .droplist-btn {
	width: 61px;
}}

#user-widget #user_menu.droplist .droplist-btn.selected { /* with mouse-over we change the background color */
	background-color: var(--bg-color-default-clearer);
}

#user-widget #user_menu.droplist .droplist-btn .user-avatar {
	--user-avatar-size: 33px;
}
@media screen and (max-width: 720px) { #user-widget #user_menu.droplist .droplist-btn .user-avatar {
	margin-left: 14px;
}}





/* === DROPLIST MENU (LOGGED) ===  */


#user-widget #user_menu.droplist .droplist-item .icon {
	margin-right: 10px;
	--icon-size: 16px;
	/*filter: var(--icon-filter-white);*/
}


/* === DROPLIST MENU LOGIN & PWD ===  */


#user-widget #user_menu.droplist .droplist-btn .icon.icon-user {
	filter: var(--icon-filter-white);
}
#user-widget #user_menu.droplist .droplist-btn.selected .icon.icon-user {
	filter: inherit;
}

#user-widget #user_menu.droplist .droplist-menu.notlogged form#login-form input[type=text],
#user-widget #user_menu.droplist .droplist-menu.notlogged form#login-form input[type=password] {
	width: 142px;
	margin-bottom: 20px;
}

#user-widget #user_menu.droplist .droplist-menu.notlogged .btn,
#user-widget #user_menu.droplist .droplist-menu.notlogged .btn .btn-text {
	width: 100%;
	justify-content: center;
}


/* Dark mode button */

/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
	display: flex;
	align-items: center;
}
.theme-switch {
	display: inline-block;
	height: 20px;
	position: relative;
	width: 35px;
}

.theme-switch input {
	display:none;
}

.slider {
	background-color: var(--bg-color-default-darker);
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}

.slider:before {
	background-color: var(--bg-color-white);
	bottom: 1px;
	content: "";
	height: 18px;
	left: 1px;
	position: absolute;
	transition: .4s;
	width: 18px;
}

input:checked + .slider {
	background-color: var(--color-alert-green);
}

input:checked + .slider:before {
	transform: translateX(15px);
}

.slider.round {
	border-radius: 34px; /* used to make round button */
}

.slider.round:before {
	border-radius: 50%; /* used to make round button */
}



/* =================================================================================================== */
/* === TAGLINE
/* =================================================================================================== */

#tagline {
    width: 100%;
    background-color: var(--bg-color-blue-darker);
    height: 16px; overflow: hidden;
}

#tagline > div {
    width: calc(940px - 20px);
    margin: 0 auto;
    font-size: 10px; color: var(--text-color-default-clearer);
    text-align: right;
    margin-top: 1px;
}

@media screen and (max-width: 940px) { #tagline > div {
	width: calc(700px - 20px);
}}

@media screen and (max-width: 720px) { #tagline > div {
	width: calc(96% - 20px);
}}

/* =================================================================================================== */
/* === CALENDAR EVENT
/* =================================================================================================== */

#calendar-event {
    width: 100%;
    background-color: var(--color-alert-red);
    color: var(--text-color-black);
    min-height: 18px; overflow: hidden;
}

#calendar-event > div {
    width: 940px;
    margin: 0 auto;
    font-size: 1em; 
}

@media screen and (max-width: 940px) { #calendar-event > div {
	width: 700px;
}}

@media screen and (max-width: 720px) { #calendar-event > div {
	width: 96%;
	font-size: .9em; 
}}

#calendar-event > div a {
    color: var(--text-color-white);
}

#calendar-event .name {
	display: inline-block; vertical-align:top;
	
	text-align: center;
	font-variant: small-caps;
}

#calendar-event #clockdiv {
	text-align: center;
	margin-top: -2px;
}
@media screen and (max-width: 720px) { #calendar-event #clockdiv {
	margin-top: -1px;
}}

#calendar-event #clockdiv .name {
	display: inline-block; vertical-align:top;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv .name {
	margin-right: 5px;
}}

#calendar-event #clockdiv div.countdown {
	display: inline-block; vertical-align:top;
}

#calendar-event #clockdiv div.block {
	display: inline-block; vertical-align:top;
	margin-left: 5px;
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-red);
	color: var(--text-color-white);
	padding: 0px 5px;
	margin-top: 2px;
	line-height: 16px;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv div.block {
	margin-left: 0px;
	padding: 0px 5px;
	border-radius: var(--box-round-big);
	line-height: 15px;
}}

@media screen and (max-width: 720px) { #calendar-event #clockdiv div.block span.mobile { 
	display: inline-block;
}}

#calendar-event #clockdiv span.days,
#calendar-event #clockdiv span.hours,
#calendar-event #clockdiv span.minutes,
#calendar-event #clockdiv span.seconds{
	font-weight: bold;
}

#calendar-event #clockdiv .smalltext {
    font-size: .7em;
    padding-left: 1px;
}

@media screen and (max-width: 720px) { #calendar-event #clockdiv .smalltext {
	font-size: .8em;
}}

header#main-header #calendar-event #text_during {
    display: none;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	FOOTER													*/
/*! ----------------------------------------------------------- */


footer {
	z-index: 1;
}

footer .box-footer {
	display: flex;
	width: 960px;
	margin: 0px auto;
	padding: 5px;
	align-items: center;
}

@media screen and (max-width: 940px) { footer .box-footer {
	width: 700px;
}}
@media screen and (max-width: 720px) { footer .box-footer {
	width: 96%;
}}


/* ---- FOOTER > USERS ---- */
 
footer section#users {
	background-color: var(--bg-color-default-clearer);
}

footer section#users .vertical-separator {
	width: 1px; height: 40px;
	background-color: var(--text-color-default);
	margin: 0 20px;
}

footer section#users .icon {
	--icon-size: 55px;
}

footer section#users .member-link-bt {
		display: flex;
	}

footer section#users .subinfo {
	margin-top: 10px;
}

@media screen and (max-width: 720px) { 
	
	footer section#users .icon {
		--icon-size: 25px;
	}
	
	footer section#users .vertical-separator {
		margin: 0 5px;
	}
	
	footer section#users .vertical-separator.btn-member {
		display: none;
	}
	
	footer section#users .btn {
		margin-left: 5px;
	}

}


/* ---- FOOTER > SITE ABOUT ---- */

footer section#site-about .box-footer {
	display: block;
	text-align: center;
	padding: 20px 0px;
	border-bottom: 1px var(--bg-color-default) solid;
}


/* ---- FOOTER > INFOS ---- */

footer section#infos {
	padding: 20px 0px;
	/*background-color: var(--bg-color-blue);
	color: var(--text-color-clear-bgblue);*/
}

@media screen and (max-width: 720px) { footer section#infos {
	padding: 0px;
}}

footer section#infos .box-footer {
	align-items: flex-start;
	justify-content: space-around;
}

@media screen and (max-width: 720px) { footer section#infos .box-footer {
	width: 96%;
	display: block;
}}

footer section#infos .column {
	width: 30%;
}

@media screen and (max-width: 720px) { footer section#infos .column {
	width: auto;
	margin: 0px; padding: 20px 10px;
	text-align: center;
}}

footer section#infos .title {
	/*color: #c2c8d0;
	margin-bottom: 10px;*/
}

@media screen and (max-width: 720px) { footer section#infos .title {
	margin-bottom: 5px;
	text-align: center;
}}

footer section#infos .icons {
	display: flex;
}

@media screen and (max-width: 720px) { footer section#infos .icons {
	justify-content: center;
}}

footer section#infos .icons .icon-link {
	--icon-link-size: 40px;
	margin: 0 5px;
}

footer section#infos .icons .icon-link:hover {
	box-shadow: 0px 2px 10px 0px var(--color-shadow-black);
}

footer section#infos .rss {
	display: flex;
	align-items: center;
}
@media screen and (max-width: 720px) { footer section#infos .rss {
	justify-content: center;
}}


footer section#infos .rss .icon-link {
	--icon-link-size: 14px;
	margin-right: 5px;
}

footer section#infos a, footer section#infos a:hover {
	color: var(--text-color-clear-bgblue);
}


/* ---- FOOTER > MENU ---- */

footer section#menu {
	border-top: 1px #1a2533 var(--color-border-veryclear);
}


/* ---- FOOTER > COPYRIGHTS ---- */

footer section#copyrights .box-footer {
	padding: 20px 0px;
}

footer section#copyrights .icon {
	--icon-size: 40px;
	filter: var(--icon-filter-grey);
}


/* ---- FOOTER > ADMIN ---- */

footer section#admin {
	width: 100%;
	background-color: var(--bg-color-blue);
	color: var(--text-color-default);
	
}


footer section#admin .content {
	text-align: center;
	border-top: 1px var(--bg-color-blue-darker) solid;
	width: 100%;
	padding-top: 5px;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	RIGHT COLLUMN			 								*/
/*! ----------------------------------------------------------- */



/*! ---- FEATURES ---- */



section#right-social .icons {
	display: flex;
	justify-content: space-between;
}

section#right-social .icons .icon-link {
	--icon-link-size: 65px;
}

section#right-social .icons div:hover {
	opacity: .8;
}

@media screen and (max-width: 940px) {
	section#right-social .icons .icon-link {
	--icon-link-size: 48px;
}
}



/*! ---- LAST GAMES ---- */



@media screen and (max-width: 940px) { section#right-games .box-round {
	width: 100px; height: 70px;
}}

@media screen and (max-width: 940px) { section#right-games .box-round img {
	width: 100px; height: 70px;
}}



/*! ---- PREMIUM ---- */



section#right-premium .premium {
	width: 300px; height: 130px;
	background-image: url(../Imageset/premium-btn.png);
}

@media screen and (max-width: 940px) { section#right-premium .premium {
	width: 220px; height: 95px;
	background-size: 220px;
}}
@media screen and (max-width: 720px) { section#right-premium .premiums {
}}



/*! ---- LAST PROGRAMS (EMISSIONS) ---- */



section#right-lastprogram .program-img {
	--lastprogram-logo-size:70px;
	width: var(--lastprogram-logo-size); height: var(--lastprogram-logo-size);
	margin-right: 10px;
}

section#right-lastprogram .program-img div {
	--lastprogram-logo-width: calc((var(--lastprogram-logo-size)*300)/165); /* taille image d'origine: 300x165 */
	
	width: var(--lastprogram-logo-width); /*calc(300px*70px/165px); */
	height: var(--lastprogram-logo-size);
	
	margin-left: calc((var(--lastprogram-logo-width) - var(--lastprogram-logo-size))/-2);
}


section#right-lastprogram .program-text {
	width: 200px;
	
}

@media screen and (max-width: 940px) { 
	section#right-lastprogram .program-img {
		display: none;
	}
	section#right-lastprogram .program-text {
		width: 100%;
}}



/*! ---- KOH ---- */



section#right-koh .box-round {
	position: relative;
	width: 300px; height: 136px;
	background-image: url(../Imageset/right-koh.png);
}

section#right-koh .text {
	width: 290px;
	padding: 5px;
	position: absolute;
	bottom: 0px;
	background-color: rgba(0,0,0,0.5);
	color: var(--text-color-clear-bgblue);
}

@media screen and (max-width: 940px) { 
	section#right-koh .box-round {
		width: 220px; height: 100px;
		background-size: 220px 100px;
	}
	section#right-koh .text {
		font-size: var(--text-size-verysmall);
	}
}



/*! ---- QUOTE ---- */



section#right-quote .user-avatar {
	--user-avatar-size: 30px;
	margin-right: 10px;
}

section#right-quote .graphic {
	width: 20px; height: 20px;
	margin-left: 250px;
	background-image: url(../Imageset/quote-graphic2.png);
}

@media screen and (max-width: 940px) { section#right-quote .grid_3 {
	width: 100px;
}}

@media screen and (max-width: 940px) { section#right-quote .graphic {
	margin-left: 170px;
}}



/*! ---- BEST VIDEOS ---- */



section#right-bestvideos .box {
	width: 280px;
	padding: 10px;
}

section#right-bestvideos .box .icon {
	display: inline-block; vertical-align: top;
	width: 140px;
	height: 60px;
}

section#right-bestvideos .box .text {
	display: inline-block; vertical-align: top;
	width: 100px;
	height: 60px;
}

section#right-topic-with-date .user-avatar {
	--user-avatar-size: 35px;
}



/*! ---- PARTNERS ---- */



section#right-partners .box {
	display: inline-block; vertical-align: top;
	width: 140px; height: 80px;
}

@media screen and (max-width: 940px) { section#right-partners .box, section#right-partners .box img {
	width: 100px;
	height: 57px;
	overflow: hidden;
}}
@media screen and (max-width: 720px) { section#right-partners .box {
}}