/***********************************************************************************************************************************/
/************************                               /!\ AVANT D'EDITER /!\                              ************************/
/************************                                         VOIR                                      ************************/
/************************                             www.dev.equideow.com/doc                              ************************/
/************************                                          ET                                       ************************/
/************************           dev.owlient.eu/wiki/index.php/Guide_Int%C3%A9gration_Equideow           ************************/
/***********************************************************************************************************************************/

/***********************************************************************************************************************************/
/***********************************************************************************************************************************
##     ## ########    ###    ########  ######## ########
##     ## ##         ## ##   ##     ## ##       ##     ##
##     ## ##        ##   ##  ##     ## ##       ##     ##
######### ######   ##     ## ##     ## ######   ########
##     ## ##       ######### ##     ## ##       ##   ##
##     ## ##       ##     ## ##     ## ##       ##    ##
##     ## ######## ##     ## ########  ######## ##     ##
************************************************************************************************************************************/
/***********************************************************************************************************************************/

#header {
	position:relative;
	z-index: 100;
	margin-bottom:7px;
}
#header.js-header--foreground{
	z-index: 4; /* z-index supérieur à celui de la bannière 970x90 (qui a un z-index de 3) */
}
#header::after{
	content: '';
	display:block;
	clear: both;
}
body.nopub:not(.disconnected) #header {
	min-height: inherit; /* hauteur minimale lorsque la pub n'est pas présente */
}
body:not(.nopub):not(.disconnected) #header {
	min-height: 118px; /* hauteur minimale lorsque la pub est présente */
	padding-top: 113px;
}

/** header-hud *********************************************************************************************************************/
#header-hud{
	z-index: 1000;
	position: fixed;
	padding: 0 20px;
	box-sizing: border-box;
	left: -10%;
	right: -10%;
	top: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(153, 153, 153, 0.01) 100%);
	border-width: 0px;
	border-bottom-width: 2px;
	border-style: solid;
	backdrop-filter: blur(25px);
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
#header-hud .menu-style-0{
	width: 1170px;
	margin: 0 auto;
}
/** pegase *************************************************************************************************************************/
#header-hud.classic{
	border-color: rgba(255, 255, 255, 0.30);
	border-bottom-width: 1px;
}
/** pegase *************************************************************************************************************************/
#header-hud.pegase{
	border-image: linear-gradient(to left, #908f8e 0%, #dedede 10%, #908f8e 20%, #dedede 30%, #908f8e 40%, #dedede 50%, #908f8e 60%, #dedede 70%, #908f8e 80%, #dedede 90%, #908f8e 100%) 1;
}
/** vip ****************************************************************************************************************************/
#header-hud.vip{
	border-image: linear-gradient(to left, #f5d250 0%, #F5F5F5 10%, #f5d250 20%, #F5F5F5 30%, #f5d250 40%, #F5F5F5 50%, #f5d250 60%, #F5F5F5 70%, #f5d250 80%, #F5F5F5 90%, #f5d250 100%) 1;
}
/** comanagement *******************************************************************************************************************/
#header-hud.comanagement{
	border-color: #f83030;
}
body:not(.nopub):not(.disconnected) #header-hud{
	margin-bottom: 118px;
}

/** anchor *************************************************************************************************************************/
[name="header-anchor"]{
	position: absolute;
	top: 70px;
}

/***********************************************************************************************************************************/
/* HEADER - DISCONNECTED ***********************************************************************************************************/
/***********************************************************************************************************************************/

#header.header--disconnected{
	padding: 20px 0 0;
	box-sizing: border-box;
	margin-top: 15px;
}
body:not(.log-in):not(.landing):not(.inscription):not(.debut):not(.body--maintenance) #header.header--disconnected{
	margin: 10px 0 180px; /* horse alignment */
	padding: 1px 0 0;
}
body:not(.log-in):not(.landing):not(.inscription):not(.debut):not(.body--maintenance) #header.header--disconnected img{
	width: 248px;
	height: 56px;
}
body.body--maintenance #header{
	margin: 0 0 20px;
	padding: 30px 0 0;
}
body.body--maintenance #header .header--connexion{
	display: none;
}

/***********************************************************************************************************************************/
/***********************************************************************************************************************************
##        #######   ######    #######
##       ##     ## ##    ##  ##     ##
##       ##     ## ##        ##     ##
##       ##     ## ##   #### ##     ##
##       ##     ## ##    ##  ##     ##
##       ##     ## ##    ##  ##     ##
########  #######   ######    #######
************************************************************************************************************************************/
/***********************************************************************************************************************************/


body.disconnected #logo-en,
body.disconnected #logo-caballow,
body.disconnected #logo-lowadi,
body.disconnected #logo-howrse,
body.disconnected #logo-equideow{
	bottom:inherit;
	margin:5px 0 0;
}
body:not(.disconnected) .header-logo{ /* fix for alt text image */
	height: 60px;
	overflow: hidden;
	margin-top: -10px;
}
.header-logo{
	position:relative;
	margin:inherit;
}

/***********************************************************************************************************************************/
/***********************************************************************************************************************************
##    ##    ###    ##     ##
###   ##   ## ##   ##     ##
####  ##  ##   ##  ##     ##
## ## ## ##     ## ##     ##
##  #### #########  ##   ##
##   ### ##     ##   ## ##
##    ## ##     ##    ###
************************************************************************************************************************************/
/***********************************************************************************************************************************/

#nav{
	position:relative;
	font-size:13px;
	font-weight:bold;
}

.hud-marketing,
.header-carousel{
	width: 295px;
}
.hud-marketing,
.hud-marketing,
.hud-equus,
.hud-pass,
.hud-clock,
.hud-message,
.hud-profile,
.hud-back,
.hud-menu-mobile,
.hud-cogestion,
.hud-notification{
	margin-top: 8px;
	margin-bottom: 5px;
}


/***********************************************************************************************************************************/
/***********************************************************************************************************************************
 ######  ##     ## ########  ########  ######## ##    ##  ######  ##    ##
##    ## ##     ## ##     ## ##     ## ##       ###   ## ##    ##  ##  ##
##       ##     ## ##     ## ##     ## ##       ####  ## ##         ####
##       ##     ## ########  ########  ######   ## ## ## ##          ##
##       ##     ## ##   ##   ##   ##   ##       ##  #### ##          ##
##    ## ##     ## ##    ##  ##    ##  ##       ##   ### ##    ##    ##
 ######   #######  ##     ## ##     ## ######## ##    ##  ######     ##
************************************************************************************************************************************/
/***********************************************************************************************************************************/

.header-currency{
	background:rgba(55, 99, 156, 0.70);
	border-radius: 16px;
	position: relative;
}
.header-currency:hover:before{
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
}
.header-currency .grid-cell{
	position: relative;
	height:46px;
}
.header-currency .grid-cell:first-child{
	width: 30px;
	border-radius: 16px 0 0 16px;
}
.header-currency,
.header-currency:hover,
.header-currency-value,
.header-currency-label{
	color:#fff;
	text-decoration:none;
}
.header-currency-image{
	width: 38px;
	height: 38px;
	margin-right: -18px;
	position: relative;
	left: -12px;
	margin-top: 4px;
}
.header-currency.disabled .menu-notification{
	display: none;
}
.header-currency.disabled .header-currency-image{
	filter: grayscale(1);
}

/* header-currency-value **********************************************************************************************************/

.header-currency-value{
	display: block;
	min-width: 36px;
	margin: 12px 12px 3px 0;
	font-size: 16px;
	white-space: nowrap;
	line-height:22px;
}

/* header-currency-label **********************************************************************************************************/

.header-currency-label{
	display:block;
	margin-bottom:3px;
	font-size:11px;
}

/* header-currency-pass **********************************************************************************************************/

.header-sprite-pass{
	margin-left:-10px;
}

/*Cogestion - partage de compte **********************************************************************************************************/

.header-currency.disabled.pass #marketing-pastille{
	right: 20px;
}

/* header-currency-equus *********************************************************************************************************/

.header-sprite-equus{
	margin-left:-14px;
}

/* header-currency-equus **********************************************************************************************************/
.header-currency-equus{
	width:130px;
}

/***********************************************************************************************************************************/
/***********************************************************************************************************************************
 ######  ##        #######   ######  ##    ##
##    ## ##       ##     ## ##    ## ##   ##
##       ##       ##     ## ##       ##  ##
##       ##       ##     ## ##       #####
##       ##       ##     ## ##       ##  ##
##    ## ##       ##     ## ##    ## ##   ##
 ######  ########  #######   ######  ##    ##
************************************************************************************************************************************/
/***********************************************************************************************************************************/

.header-clock{
	display:block;
	width:46px;
	height:46px;
	font-size:13px;
	text-align:center;
	color:#fff;
	border-radius: 16px;
}
.header-clock:hover{
	background: rgba(0, 0, 0, 0.30);
	text-decoration: none;
}
.header-clock .svg{
	margin-top: 2px;
}
#contentHeaderClock{
	background: #fdfff0;
	border-radius: 4px;
	border: 2px solid #fdfff0;
	box-shadow: 0 0 30px rgba(0,0,0,0.3);
	color: #3d251b;
	font-size: 13px;
	line-height: 18px;
	max-width: 250px;
	padding: 5px 10px;
	position: relative;
	z-index: 0;
	left: -5px;
	top: 15px;
}
#contentHeaderClock::before{
	content : "";
	top: -8px;
	left: 20px;
	border-width: 2px 0 0 2px;
	background: #fdfff0;
	position: absolute;
	width: 12px;
	height: 12px;
	border-style: solid;
	border-color: #fdfff0;
	transform: rotate(45deg);
	z-index: -1;
}

/***********************************************************************************************************************************/
/***********************************************************************************************************************************

##     ## ########    ###    ########  ######## ########          ########  ##     ## ######## ########  #######  ##    ##
##     ## ##         ## ##   ##     ## ##       ##     ##         ##     ## ##     ##    ##       ##    ##     ## ###   ##
##     ## ##        ##   ##  ##     ## ##       ##     ##         ##     ## ##     ##    ##       ##    ##     ## ####  ##
######### ######   ##     ## ##     ## ######   ########  ####### ########  ##     ##    ##       ##    ##     ## ## ## ##
##     ## ##       ######### ##     ## ##       ##   ##           ##     ## ##     ##    ##       ##    ##     ## ##  ####
##     ## ##       ##     ## ##     ## ##       ##    ##          ##     ## ##     ##    ##       ##    ##     ## ##   ###
##     ## ######## ##     ## ########  ######## ##     ##         ########   #######     ##       ##     #######  ##    ##

************************************************************************************************************************************/
/** for message and account *******************************************************************************************************/
/***********************************************************************************************************************************/

.header-button{
	padding: 8.5px; /* for android 4 */
	padding: calc(17px / 2);
}
.header-button,
.header__button,
.js-header__button{
	background:rgba(55, 99, 156, 0.70);
	position:relative;
	width:46px;
	height:46px;
	border-radius:16px;
	box-sizing:border-box;
	cursor: pointer;
	display: block;
	padding: 11px;
	z-index: 0;
}
.header-button svg,
.header__button svg,
.js-header__button svg{
	position:relative;
}
.headerevents .js-header__button{
	height: 40px;
	width: inherit;
	padding: 10px 14px 7px 14px;;
}

/** header__button : hover state ***************************************************************************************************/

#headerEvents.js-header__button:hover:before,
.header-button:hover:before,
.header__button:hover:before,
.js-header__button:hover:before{
	content: "";
	position: absolute;
	top: 4px;
	left: 4px;
	right: 4px;
	bottom: 4px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.3);
	pointer-events: none;
	z-index: 0;
}
#headerNotifications.js-header__button--active,
.js-header__button--account.js-header__button--active{
	border-radius: 16px 16px 0 0;
	background:rgba(55, 99, 156, 0.70);
}
#headerNotifications.js-header__button--active:hover:before,
.js-header__button--account.js-header__button--active:hover:before{
	height: 50px;
}
#headerEvents.js-header__button{
	background-color: transparent;
}
.headerevents .svg--danger{
	position: absolute;
	right: -8px;
	top: -8px;
	z-index: 2;
}
.headerevents .svg--danger:before{
	content:"";
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 50%;
	z-index: -1;
}
.landscape--mobile .headerevents .svg--danger {
	right: -4px;
	top: -4px;
}

/** header__button : disabled ******************************************************************************************************/

.pix.header__button__disabled{
	position: absolute;
	top: -5px;
	right: -5px;
}

 /***********************************************************************************************************************************/
/*  MENU - NOTIFICATION ************************************************************************************************************/
/***********************************************************************************************************************************/

.menu-notification,
.menu-disabled{
	position: absolute;
	display: block;
	background: #c93a3a;
	min-width: 24px;
	height: 24px;
	border-radius: 24px;
	text-align: center;
	line-height: 24px;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	top: -5px;
	right: -5px;
}
.menu-disabled{
	background: #D0D0D0;
}

/***********************************************************************************************************************************/
/* js-header__button--account ******************************************************************************************************/
/***********************************************************************************************************************************/

.header-account-site{
	position:absolute;
	top: -5px;
	right: -5px;
	display:block;
	width:24px;
	height:24px;
	border-radius:50%;
}

/** flags *************************************************************************************************************************/
.js-header__button--account .flag-item{
	display:inline-block;
	margin:2px 6px;
	padding:5px 9px;
	border-radius:3px;
}
.js-header__button--account .flag-item:hover{
	background:#79d1ff;
}
.js-header__button--account a.level-2 .grid-cell:last-child{
	padding:inherit;
}

/** animation *********************************************************************************************************************/
.header-account:hover .submenu-style-1{
	display: block;
}
.header-account:hover li.level-2{
	visibility:visible;
}

/** submenu ************************************************************************************************************************/
.js-header__button--account .submenu-style-1{
	width:180px;
	left:calc(-165px / 2); /* 165px = largeur du sous-menu (210px + 20px de marge), retranché à 45px de largeur d'icone mon compte */
	left:-82.5px; /* for android 4 */
}


/***********************************************************************************************************************************/
/***********************************************************************************************************************************
######## ##          ###     ######    ######
##       ##         ## ##   ##    ##  ##    ##
##       ##        ##   ##  ##        ##
######   ##       ##     ## ##   ####  ######
##       ##       ######### ##    ##        ##
##       ##       ##     ## ##    ##  ##    ##
##       ######## ##     ##  ######    ######
************************************************************************************************************************************/
/***********************************************************************************************************************************/

[class^="flag-list"]{
	margin:0 2px;
}
li.header-flags{
	position:relative;
	height:0;
	overflow:hidden;
	transition:all 0.5s;
}
li.header-flags.active{
	height:210px;
}
li.header-flags.active + li.level-2 a.level-2{
	border-color:transparent;
}
li.header-flags.active + li.level-2::before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	background: #D0D0D0;
	top: -1px;
	height: 1px;
}


/** POPUP VERSIONS FLAGS *********************************************************************************/

ul.flaglist li .block.js-block--selectable::before {
	border: transparent;
	box-shadow: none;
}
ul.flaglist li .block.js-block--selectable:hover::before {
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30), 0 0 0 4px rgba(0,0,0,0.10);
}

ul.flaglist li .js-block--selectable,
ul.flaglist li .js-block--flags{
	width: 180px;
	height: 60px;
}
ul.flaglist li .flag-element span{
	margin-left: 37px;
}
ul.flaglist .flaglist__url{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	width: 75%;
}
ul.flaglist li .js-block--active.block::before{
	border: 1px solid #af9c8c;
}
/** submenu : specifique aux versions anglophones *********************************************************************************/
.flag-list-en{
	position:relative;
	padding:5px 0;
	border-top:1px solid #D0D0D0;
}
.flag-list-en:hover:after{
	content:"";
	display: block;
	background: #d0d0d0;
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 1px;
}
li.level-2:hover + li.level-2 .flag-list-en{
	border-color:transparent;
}

/***********************************************************************************************************************************/
/***********************************************************************************************************************************
##     ## ########    ###    ########  ######## ########          ##     ## ######## ##    ## ##     ##
##     ## ##         ## ##   ##     ## ##       ##     ##         ###   ### ##       ###   ## ##     ##
##     ## ##        ##   ##  ##     ## ##       ##     ##         #### #### ##       ####  ## ##     ##
######### ######   ##     ## ##     ## ######   ########  ####### ## ### ## ######   ## ## ## ##     ##
##     ## ##       ######### ##     ## ##       ##   ##           ##     ## ##       ##  #### ##     ##
##     ## ##       ##     ## ##     ## ##       ##    ##          ##     ## ##       ##   ### ##     ##
##     ## ######## ##     ## ########  ######## ##     ##         ##     ## ######## ##    ##  #######
************************************************************************************************************************************/
/***********************************************************************************************************************************/

#header-menu{
	position: relative;
	z-index: 0;
}
#header-menu::after{
	content:'';
	display:block;
	clear:both;
}
#header-menu .menucontent{
	display: inline-block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 16px;
}
/** header-menu ********************************************************************************************************************/
#header-menu .svg:active{
	transform: scale(.9);
}
#header-menu{
	padding-top: 80px;
	text-align: center;
	vertical-align: top;
}
/** svg ****************************************************************************************************************************/
#header-menu .content-icon{
	width: 25px;
	height: 25px;
}
#header-menu .content-icon-svg{
	width: 100%;
	height: 100%;
	fill: white;
}
#header-menu a:focus .content-icon{
	animation: ontap .15s ease-in-out;
}
#header-menu [class^=content-icon] {
	display: block;
}

/***********************************************************************************************************************************/
/***********************************************************************************************************************************
##     ## ########    ###    ########  ######## ########           ######  ########  ########  #### ######## ########
##     ## ##         ## ##   ##     ## ##       ##     ##         ##    ## ##     ## ##     ##  ##     ##    ##
##     ## ##        ##   ##  ##     ## ##       ##     ##         ##       ##     ## ##     ##  ##     ##    ##
######### ######   ##     ## ##     ## ######   ########  #######  ######  ########  ########   ##     ##    ######
##     ## ##       ######### ##     ## ##       ##   ##                 ## ##        ##   ##    ##     ##    ##
##     ## ##       ##     ## ##     ## ##       ##    ##          ##    ## ##        ##    ##   ##     ##    ##
##     ## ######## ##     ## ########  ######## ##     ##          ######  ##        ##     ## ####    ##    ########
************************************************************************************************************************************/
/***********************************************************************************************************************************/

.header-sprite{
	background-image: url(/media/equideo/image/interface/header/sprite-header.png);
	background-repeat:no-repeat;
	display:block;
}
.header-carousel .header-sprite,
.header-currency .header-sprite{
	width:45px;
	height:45px;
}
.header-clock .header-sprite,
.header-message .header-sprite,
.js-header__button--account .header-sprite{
	width:24px;
	height:24px;
}
.header-button:active .header-sprite,
.header-currency:active .header-sprite
.header-currency:active .header-currency-image{
	transform: scale(.9);
}

/* header-sprite-profile **********************************************************************************************************/
.header-sprite-profile{
	background-position:-120px -90px;
}

/* header-sprite-comanagement **********************************************************************************************************/
.header-sprite-comanagement{
	background-position:-144px -90px;
}

/* header-sprite-equus ************************************************************************************************************/
.header-sprite-equus{
	background-position:-135px 0;
}

/* header-sprite-pass *************************************************************************************************************/
.header-sprite-pass{
	background-position:-135px -45px;
}

/* header-carousel-button *********************************************************************************************************/
.header-carousel-button.previous{
	transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-moz-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	-o-transform:scaleX(-1);
}
.header-carousel-button{
	background-color: transparent;
	background-position: -45px 0;
	outline: none;
	border:none;
	border-radius: 0;
	cursor: pointer;
}
.header-carousel-button:hover{
	background-position: -45px -45px;
}

/* header-sprite-module ***********************************************************************************************************/
.header-sprite-module{
	background-position:-100px -55px;
}
.header-sprite-locked{
	background-position:right bottom;
}


/***********************************************************************************************************************************/
/* HEADER-SPRITE FLAGS *************************************************************************************************************/
/***********************************************************************************************************************************/

[class^="header-account-flag"]{
	background-image:url(/media/equideo/image/fonctionnels/20/sprite-flags.png);
	background-color:transparent;
	display:block;
	width:100%;
	height:100%;
}
.header-account-flag-en {
	background-position: 0;
}
.header-account-flag-us {
	background-position: -24px;
}
.header-account-flag-uk {
	background-position: -48px;
}
.header-account-flag-au {
	background-position: -72px;
}
.header-account-flag-ca {
	background-position: -96px;
}
.header-account-flag-de {
	background-position: -120px;
}
.header-account-flag-fr {
	background-position: -144px;
}
.header-account-flag-es {
	background-position: -168px;
}
.header-account-flag-pt {
	background-position: -192px;
}
.header-account-flag-br {
	background-position: -216px;
}
.header-account-flag-il {
	background-position: -240px;
}
.header-account-flag-ru {
	background-position: -264px;
}
.header-account-flag-it {
	background-position: -288px;
}
.header-account-flag-nl {
	background-position: -312px;
}
.header-account-flag-se {
	background-position: -336px;
}
.header-account-flag-pl {
	background-position: -360px;
}
.header-account-flag-cz {
	background-position: -384px;
}
.header-account-flag-dk {
	background-position: -408px;
}
.header-account-flag-fi {
	background-position: -432px;
}
.header-account-flag-no {
	background-position: -456px;
}
.header-account-flag-ae,
.header-account-flag-ar {
	background-position: -480px;
}
.header-account-flag-hu {
	background-position: -504px;
}
.header-account-flag-ro {
	background-position: -528px;
}
.header-account-flag-bg {
	background-position: -552px;
}
.header-account-flag-lt {
	background-position: -576px;
}
.header-account-flag-lv {
	background-position: -600px;
}
.header-account-flag-si {
	background-position: -624px;
}
.header-account-flag-sk {
	background-position: -648px;
}
.header-account-flag-ua {
	background-position: -672px;
}
.header-account-flag-tw {
	background-position: -696px;
}
.header-account-flag-jp {
	background-position: -720px;
}
.header-account-flag-kr {
	background-position: -744px;
}
.header-account-flag-cn {
	background-position: -768px;
}
.header-account-flag-gaia {
	background-position: -792px;
}
.header-account-flag-ouranos {
	background-position: -816px;
}


/***********************************************************************************************************************************/
/***********************************************************************************************************************************
##        #######   ######   #### ##    ##
##       ##     ## ##    ##   ##  ###   ##
##       ##     ## ##         ##  ####  ##
##       ##     ## ##   ####  ##  ## ## ##
##       ##     ## ##    ##   ##  ##  ####
##       ##     ## ##    ##   ##  ##   ###
########  #######   ######   #### ##    ##
************************************************************************************************************************************/
/***********************************************************************************************************************************/
.header--connexion{
	right: 97px;
	top: 0;
	position: absolute;
}
.header-login::after{
	content:"";
	display:block;
	clear:both;
}

/** header-login-button ************************************************************************************************************/
.header-login-button{
	position:relative;
}

/** header-login menu *************************************************************************************************************/
.header-login-button .menu{
	top:50px;
	padding: 15px;
}
.header-login-button .submenu-style-1{
	background: #FDFFF0;
	top: 50px;
	border-radius :8px;
	box-shadow: 0 0 15px rgba(0, 0, 0, .3);
	border: 0;
}
.header-login-button .submenu-style-1:after {
	content: '';
	display: block;
	position: absolute;
	z-index: -1;
	background: #FDFFF0;
	width: 10px;
	height: 10px;
	left: calc(50% - 5px);
	top: -4px;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}

/***********************************************************************************************************************************/
/* HEADER-LOGIN-FORM ***************************************************************************************************************/
/***********************************************************************************************************************************/

.header-login-form{
	width: 270px;
	color:#808080;
}
.header-login-form .input{
	width: calc(100% - 2px);
}

/** landing-login-separator ********************************************************************************************************/
.landing-login-separator{
	display: flex;
	display: -ms-flexbox;
	align-items: center;
	width: 100%;
	text-align: center;
}
.landing-login-separator::before,
.landing-login-separator::after{
	background:#ccc;
	content:"";
	height: 1px;
	flex:1;
}
.landing-login-separator span{
	height: 15px;
	padding: 0 10px;
}

/***********************************************************************************************************************************/
/***********************************************************************************************************************************
 #######  ##     ## ########     ###    ##    ##  #######   ######        ##  ######      ###    ####    ###
##     ## ##     ## ##     ##   ## ##   ###   ## ##     ## ##    ##      ##  ##    ##    ## ##    ##    ## ##
##     ## ##     ## ##     ##  ##   ##  ####  ## ##     ## ##           ##   ##         ##   ##   ##   ##   ##
##     ## ##     ## ########  ##     ## ## ## ## ##     ##  ######     ##    ##   #### ##     ##  ##  ##     ##
##     ## ##     ## ##   ##   ######### ##  #### ##     ##       ##   ##     ##    ##  #########  ##  #########
##     ## ##     ## ##    ##  ##     ## ##   ### ##     ## ##    ##  ##      ##    ##  ##     ##  ##  ##     ##
 #######   #######  ##     ## ##     ## ##    ##  #######   ######  ##        ######   ##     ## #### ##     ##
************************************************************************************************************************************/
/***********************************************************************************************************************************/

.header-login-server{
	background: #F2EFCF;
	position:relative;
	width: 270px;
	height:45px;
	border-radius: 23px;
	box-sizing:border-box;
	font-size: 15px;
	color: #000;
	border: 1px solid #82685B;
}
.header-login-server::after{
	content: "";
	display: block;
	clear: both;
}
.header-login-server input[type="radio"]{
	display:none;
}
[class^="header-login-server-label"]{
	background-repeat: no-repeat;
	position:relative;
	z-index: 1;
	display: block;
	width: 50%;
	height: 100%;
	line-height: 45px;
	box-sizing:border-box;
	cursor: pointer;
}
[class^="header-login-server-radio"]:checked + label{
	font-weight: bold;
}
.header-login-server-label-gaia{
	background-image: url(/media/equideo/image/interface/icon/gaia-register.png);
	background-position: 95px center;
	float: right;
	padding-right: 45px;
	text-align: right;
}
.header-login-server-label-ouranos{
	background-image: url(/media/equideo/image/interface/icon/ouranos-register.png);
	background-position: 7px center;
	float: left;
	padding-left: 45px;
	text-align: left;
}
.header-login-server span{
	position: absolute;
	left:0;
	background: #FDFFF0;
	width: 50%;
	height: 100%;
	border-radius: 23px;
	box-sizing:border-box;
	transition:all .2s;
	box-shadow: -2px 0px 4px 0px rgba(0, 0, 0, 0.25);
}
.header-login-server-radio-ouranos:checked ~ span{
	transform:translateX(0);
}
.header-login-server-radio-gaia:checked ~ span{
	transform:translateX(100%);
}


/**********************************************************************************************************************************
***********************************************************************************************************************************
##    ##  #######  ######## #### ######## ####  ######     ###    ######## ####  #######  ##    ##  ######
###   ## ##     ##    ##     ##  ##        ##  ##    ##   ## ##      ##     ##  ##     ## ###   ## ##    ##
####  ## ##     ##    ##     ##  ##        ##  ##        ##   ##     ##     ##  ##     ## ####  ## ##
## ## ## ##     ##    ##     ##  ######    ##  ##       ##     ##    ##     ##  ##     ## ## ## ##  ######
##  #### ##     ##    ##     ##  ##        ##  ##       #########    ##     ##  ##     ## ##  ####       ##
##   ### ##     ##    ##     ##  ##        ##  ##    ## ##     ##    ##     ##  ##     ## ##   ### ##    ##
##    ##  #######     ##    #### ##       ####  ######  ##     ##    ##    ####  #######  ##    ##  ######
***********************************************************************************************************************************
**********************************************************************************************************************************/

/** body__notifications **********************************************************************************************************/
/*********************************************************************************************************************************/

.body__notifications{
	border-radius: 32px;
	box-sizing: border-box;
	padding: 0 4px;
	position: absolute;
	top: 54px;
	width: 500px;
	z-index: 3;
	left: calc(50% + 87px);
}
.body__notifications--border{
	border: 4px solid rgba(55, 101, 154, 0.9);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.js-body__notifications__footer{
	text-align: center;
	border-top: 1px solid #DCD4BC;
	padding-bottom: 10px;
	padding-top: 10px;
}

/** body__notifications: loader **************************************************************************************************/

.body__notifications #loader::before{
	border-top: 3px solid rgba(52, 99, 156, 0.7);
}

/** notification__unread *********************************************************************************************************/
/*********************************************************************************************************************************/

.notification__unread:hover{
	text-decoration: underline;
}
.notification__unread{
	right: 22px;
}
.notification__ellipsis{
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: bold;
	line-height: 24px;
}

/** js-listview__item--unread  ***************************************************************************************************/
/*********************************************************************************************************************************/
.js-listview__item--unread .listview__item__title,
.js-listview__item--unread .listview__item__multilines{
	font-weight: bold;
}

/** Listview specifique pour les notifications  ***************************************************************************************************/
/*********************************************************************************************************************************/

.notification__item{
	border-bottom: 1px solid #DCD4BC;
	position: relative;
}
.notification__item, .notification__item a {
	display: block;
	padding-top: 3px;
	padding-bottom: 3px;
}
.notification__item a, .notification__item a:hover {
	text-decoration: none;
	margin-top: 1px;
	margin-bottom: 1px;
	transition: all .15s ease-in-out;
}
.notification__item a:hover{
	border-radius: 10px;
	background-color: #f2efcf;
}
.notification__item a:hover .pix.bg--secondary::after,
.notification__item a:hover .tag.bg--secondary.bg--secondary.bg--secondary.bg--secondary{
	background-color: #fdfff0;
}
.notification__size{
	width: 55px;
}
.notification__content{
	color: #3d251b;
	font-size: 16px;
	vertical-align: middle;
}
.notification__date{
	font-weight: bold;
	text-transform: uppercase;
}
.notification__sep{
	display: inline-block;
	width: 1px;
	height: 10px;
	margin: 0 5px;
	background-color: #82685b;
}


/************************************************************************************************************************************
**********************************************************************************************************************************
##     ## ########    ###    ########  ######## ########        ###     ######   ######   #######  ##     ## ##    ## ########
##     ## ##         ## ##   ##     ## ##       ##     ##      ## ##   ##    ## ##    ## ##     ## ##     ## ###   ##    ##
##     ## ##        ##   ##  ##     ## ##       ##     ##     ##   ##  ##       ##       ##     ## ##     ## ####  ##    ##
######### ######   ##     ## ##     ## ######   ########     ##     ## ##       ##       ##     ## ##     ## ## ## ##    ##
##     ## ##       ######### ##     ## ##       ##   ##      ######### ##       ##       ##     ## ##     ## ##  ####    ##
##     ## ##       ##     ## ##     ## ##       ##    ##     ##     ## ##    ## ##    ## ##     ## ##     ## ##   ###    ##
##     ## ######## ##     ## ########  ######## ##     ##    ##     ##  ######   ######   #######   #######  ##    ##    ##
/************************************************************************************************************************************
**********************************************************************************************************************************/

.js-submenu__content{
	border-radius: 12px 0 12px 12px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	border: 4px solid rgba(55, 101, 154, 0.9);
	box-sizing: border-box;
	position: absolute;
	top: 46px;
	width: 315px;
	z-index: 3;
	right: 0;
	padding: 4px;
}

/************************************************************************************************************************************
**********************************************************************************************************************************
######## ##          ###     ######    ######
##       ##         ## ##   ##    ##  ##    ##
##       ##        ##   ##  ##        ##
######   ##       ##     ## ##   ####  ######
##       ##       ######### ##    ##        ##
##       ##       ##     ## ##    ##  ##    ##
##       ######## ##     ##  ######    ######
/************************************************************************************************************************************
**********************************************************************************************************************************/

.flag-element {
	display:block;
	width: 25px;
	height: 18px;
	background-repeat: no-repeat;
	border-radius: 4px;
	background-image: url(/media/equideo/image/fonctionnels/flags-square.png);
	background-size: 945px 18px;
	background-repeat: no-repeat;
}
.flag-en {
	background-position: -0px;
}

.flag-us {
	background-position: -27px;
}

.flag-uk {
	background-position: -55px;
}

.flag-au {
	background-position: -81px;
}

.flag-ca {
	background-position: -109px;
}

.flag-de {
	background-position: -136px;
}

.flag-fr {
	background-position: -163px;
}

.flag-es {
	background-position: -189px;
}

.flag-pt {
	background-position: -216px;
}

.flag-br {
	background-position: -244px;
}

.flag-il {
	background-position: -160px;
}

.flag-ru {
	background-position: -297px;
}

.flag-it {
	background-position: -325px;;
}

.flag-nl {
	background-position: -352px;
}

.flag-se {
	background-position: -378px;
}

.flag-pl {
	background-position: -405px;
}

.flag-cz {
	background-position: -432px;
}

.flag-dk {
	background-position: -460px;
}

.flag-fi {
	background-position: -487px;
}

.flag-no {
	background-position: -513px;
}

.flag-ae {
	background-position: -320px;
}

.flag-ar {
	background-position: -320px;
}

.flag-hu {
	background-position: -621px;
}

.flag-ro {
	background-position: -595px;
}

.flag-bg {
	background-position: -621px;
}

.flag-si {
	background-position: -703px;
}

.flag-sk {
	background-position: -729px;
}

.flag-jp {
	background-position: -480px;
}

.flag-kr {
	background-position: -496px;
}

.flag-cn {
	background-position: -512px;
}