/*
.########...#######..##......##..######...##.....##.########..######.....###....########..########.
.##.....##.##.....##.##..##..##.##....##..##.....##.##.......##....##...##.##...##.....##.##.....##
.##.....##.##.....##.##..##..##.##........##.....##.##.......##........##...##..##.....##.##.....##
.########..##.....##.##..##..##.##...####.##.....##.######...##.......##.....##.########..##.....##
.##...##...##.....##.##..##..##.##....##..##.....##.##.......##.......#########.##...##...##.....##
.##....##..##.....##.##..##..##.##....##..##.....##.##.......##....##.##.....##.##....##..##.....##
.##.....##..#######...###..###...######....#######..########..######..##.....##.##.....##.########.
*/
/*Documentation : https://www.dev.equideow.com/doc/blocks#anchor-rowguecard
************************************************************************************************************************************
************************************************************************************************************************************

************************************************************************************************************************************
/* ELEMENT : CONTAINER ********************************************************************************************************/
/***********************************************************************************************************************************/

.rowguecard,
.rowguecard .rowguecard__content,
.rowgue__emptycard{
	position: relative;
	text-align: center;
	cursor: default;
	display: block;
	z-index: 0;
}
a.rowguecard,
.rowguecard,
.rowgue__emptycard{
	color: #3d251b;
}
.rowguecard.display-inline-block{
	display: inline-block;
}
.rowguecard,
.rowguecard:hover{
	text-decoration: none;
}
.rowguecard .rowguecard__content::before,
.rowguecard__emptycard:before{
	border-color: transparent;
	border-style: solid;
	border-width: 2px;
	bottom: 0;
	left: 0;
	overflow: hidden;
	right: 0;
	transition: all .25s ease-in-out;
	top: 0;
	z-index: 1;
}
.rowguecard::after,
.rowgue__emptycard:after{
    border-radius: 50%;
    bottom: 0;
    height: 10px;
    z-index: -1;
}
.rowguecard::after,
.rowgue__emptycard::after,
.rowgue__emptycard::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.rowguecard,
.rowgue__emptycard
.rowguecard:hover{
	text-decoration: none;
}

/* ELEMENT : TIMER ******************************************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard__timer{
	display: block;
	position: relative;
	bottom: 8px;
	text-transform: uppercase;
}

/* ELEMENT : BLOCK__CONTENT ********************************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard__content{
	background-color: #efe1d1;
	position: relative;
	z-index: 1;
}
.rowguecard__content::before{
	content: "";
	display: block;
	position: absolute;
	border-radius: 0 0 4px 4px;
	top: 0;
}

/* MODIFIERS : TITLE ************************************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard__title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: 'yanoneubibold', Arial,sans-serif;
    font-weight: 550;
}

/* ELEMENT : RIBBON ****************************************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard__ribbon{
	border-radius: 0 0 8px 8px;
	bottom: 0px;
	color: #fff;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	z-index: 1;
}
.rowguecard__ribbon::before{
	content: "";
    display: block;
    position: absolute;
    width: calc(100% - 4px);
    left: 2px;
    height: 8px;
    border-radius: 0 0 8px 8px;
    background-color: #efe1d1;
    top: -3px;
    z-index: 1;
}

/* ELEMENT : STAMINA ************************************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard__stamina {
	height: 22px;
}

.rowguecard__stamina svg {
	fill: #EEC213;
	margin-top: 1px;
}

/* ELEMENT : BACKGROUND SERIE **************************************************************************************************************
 ******************************************************************************************************************************************/
.rowguecard__bg{
	position: relative;
}

/* ELEMENT : HORSE ASSET *******************************************************************************************************************
 ******************************************************************************************************************************************/
.rowguecard__bg__image{
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 16px;
	box-shadow: 0 5px 3px -4px rgba(0,0,0,0.3);
	z-index: 0;
}
.rowguecard__bg__item{
	height: 128px;
  	width: 128px;
	position: absolute;
	left: 0;
	top: 0;
	top: 50%; left: 50%;
  	transform: translate(-50%, -50%);
	z-index: 1;
}

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

.rowguecard__skills{
	height: 33px;
	padding-top: 6px;
	line-height: 33px;
}
/* ELEMENT : SKILLS SVG ********************************************************************************************************/
/***********************************************************************************************************************************/
.svgrowgue{
	margin-left: 1px;
	margin-right: 3px;
	padding-top: 3px;
	margin-top: 3px;
	box-sizing: border-box;
}
.rowguecard--xs .svgrowgue{
	margin-right: 2px;
	margin-top: 2px;
}
.svgrowgue svg{
	vertical-align: top;
}
.svg--skillA{
	fill: #D54502;
}
.svg--skillB{
	fill: #cc078d;
}
.svg--skillC{
	fill: #376100;
}
.svg--skillD{
	fill: #1029c7;
}

/* MODIFIER : BLOCK--DISABLED ********************************************************************************************************/
/***************************************************************************************************************************************/
/**
 * WARNING : L'usage en JS de js-rowguecard--disabledclickable n'est pas le même que
 * js-rowguecard--disabled (cas du clic sur une carte disabled parce qu'on a déjà sélectionné 3 cartes)
 *
 * L'ajout de body est nécessaire pour écraser le pointer de a:not([href])
 **/
body .js-rowguecard--disabled,
body .js-rowguecard--disabledclickable,
body a.js-rowguecard--disabled,
body a.js-rowguecard--disabledclickable{
	cursor: default;
}
.js-rowguecard--disabled,
.js-rowguecard--disabledclickable{
	opacity: 0.5;
}
/* MODIFIER : BLOCK--SELECTABLE ********************************************************************************************************/
/***************************************************************************************************************************************/
.js-rowguecard--selectable::after,
.rowguecard.js-rowguecard--selectable::after{
    display: none;
}

/* MODIFIER : BLOCK--SELECTED **********************************************************************************************************/
/***************************************************************************************************************************************/
.rowguecard.js-rowguecard--selected,
.js-rowguecard--selectedfortry,
.js-rowguecard--selectedforbonus{
    cursor: default;
}

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

.rowguecard::before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
}
body.animation .rowguecard::before { /* transition only for players who enable animations */
	transition: 0.15s all ease-out;
}

/* MODIFIER STATE : HOVER **************************************************************************************************************/
/***************************************************************************************************************************************/
a.rowguecard:not(.js-rowguecard--disabled):not(.js-rowguecard--selected):not(.js-rowguecard--selectedfortry):not(.js-rowguecard--selectedforbonus):hover::before{
    background-color: rgba(255, 255, 255, 0.3);
}
/* MODIFIER : BLOCK--IMPORTANT (attribute HIGHLIGHTED) *********************************************************************************/
/***************************************************************************************************************************************/
.rowguecard--important::before {
	background-color: #EEC213;
}
a.rowguecard--important:not(.js-rowguecard--disabled):not(.js-rowguecard--selected):not(.js-rowguecard--selectedfortry):not(.js-rowguecard--selectedforbonus):hover::before{
	background-color: #EEC213;
	box-shadow: 0 0 20px #eec213;
}

/* MODIFIER : BLOCK--CHECKED (attribute CHECKED) *********************************************************************************/
/***************************************************************************************************************************************/
.rowguecard--checked::before {
	border: 2px solid #849644;
	background: linear-gradient(to bottom, #edfda4 0, #EDFDA4 10px, #FDFFF0 50px, #FDFFF0 100%);
}
a.rowguecard--checked:not(.js-rowguecard--disabled):not(.js-rowguecard--selected):not(.js-rowguecard--selectedfortry):not(.js-rowguecard--selectedforbonus):hover::before {
	background-color: #EEC213;
	box-shadow: 0 0 20px #eec213;
}
.rowguecard--checked .pix--3xs{
	position: absolute;
	top: -12px;
	right: 1px;
}
/* MODIFIER : SELECTED *****************************************************************************************************/
/***************************************************************************************************************************************/
.rowguecard.js-rowguecard--selected::before,
.rowguecard.js-rowguecard--selectedfortry::before,
.rowguecard.js-rowguecard--selectedforbonus::before {
	background-color: #37659A;
}

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

/** common *************************************************************************************************************************/
.rowguecard--common .rowguecard__content::before{
	border-color: #AF9C8C;
}
.rowguecard--common .rowguecard__ribbon{
	background-color: #AF9C8C;
}
/** rare ***************************************************************************************************************************/
.rowguecard--rare .rowguecard__content::before{
	border-color: #25cda3;
}
.rowguecard--rare .rowguecard__ribbon{
	background-color: #25cda3;
}
/** legendary **********************************************************************************************************************/
.rowguecard--precious .rowguecard__content::before{
	border-color: #ee8c13;
}
.rowguecard--precious .rowguecard__ribbon{
	background-color: #ee8c13;
}
/** divine *************************************************************************************************************************/
.rowguecard--divine .rowguecard__content::before{
	border-color: #7C4D81;
}
.rowguecard--divine .rowguecard__ribbon{
	background-color: #7C4D81;
}

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

.rowguecard--l{
	width: 170px;
	border-radius: 8px;
}
.rowguecard--l .rowguecard__content{
	width: 170px;
	height: 264px;
	border-radius: 8px;
}
.rowguecard--l .rowguecard__content::before{
	border-radius: 8px;
}
/* STATE BORDER (HOVER, NEW, SELECTED) *********************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard--l::before {
	left: -5px;
	top: -18px;
	bottom: -5px;
	right: -5px;
	border-radius: 8px;
}
/* MODIFIERS : RARITIES ************************************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard--l .rowguecard__title {
	height: 32px;
	font-size: 24px;
    line-height: 35px;
}
.rowguecard--l .rowguecard__skills__text{
	font-size: 16px;
}
.rowguecard--l .rowguecard__bg{
	width: 148px;
	height: 148px;
}
.rowguecard--l .rowguecard__content__image{
	height: 128px;
	width: 128px;
}
.rowguecard--l .rowguecard__bg__image{
	border-radius: 16px;
}
.rowguecard--l .rowguecard__content__image.horsesprite{
	background-size: 128px;
}
.rowguecard--l.js-rowguecard--selected::before,
.rowguecard--l.js-rowguecard--selectable::before{
	left: 0;
	top: 0;
}
.rowguecard--l .rowguecard__ribbon__level svg{
	width: 16px;
	height: 16px;
}
.rowguecard--l .rowguecard__skills svg{
    width: 18px;
    height: 18px;
}
.rowguecard--l .rowguecard__ribbon{
	padding: 13px 0 4px;
}


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

.rowguecard--s {
	width: 100px;
	border-radius: 5px;
}
/* STATE BORDER (HOVER, NEW, SELECTED) *********************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard--s::before {
	left: -2px;
	top: -2px;
	bottom: -2px;
	right: -2px;
	border-radius: 5px;
}
.rowguecard--s .rowguecard__content{
	width: 100px;
	height: 155px;
	border-radius: 5px;
}
.rowguecard--s .rowguecard__content::before{
	border-radius: 5px;
}
.rowguecard--s.rowguecard--common::before,
.rowguecard--s.rowguecard--rare::before,
.rowguecard--s.rowguecard--precious::before,
.rowguecard--s.rowguecard--divine::before{
	border-radius: 6px;
}
.rowguecard--s .rowguecard__title {
	font-size: 15px;
    line-height: 16px;
    height: 20px;
}
.rowguecard--s .rowguecard__skills__text{
	font-size: 13px;
}
.rowguecard--s .rowguecard__bg{
	width: 88px;
	height: 88px;
}
.rowguecard--s .rowguecard__bg__item,
.rowguecard--s .cheval-icone-wrapper .rowguecard__bg__item.horsesprite{
	width: 72px;
	height: 72px;
}
.rowguecard--s .cheval-icone-wrapper .rowguecard__bg__item.horsesprite{
	display: inherit;
    margin: 0;
    position: absolute;
}
.rowguecard--s .rowguecard__bg__image{
	width: 88px;
	height: 88px;
	border-radius: 8px;
}
.rowguecard--s .rowguecard__content__image{
	height: 72px;
	width: 72px;
}
.rowguecard--s .rowguecard__content__image.horsesprite{
	background-size: 72px;
}
.rowguecard--s .rowguecard__ribbon__level svg,
.rowguecard--s .rowguecard__skills svg{
	width: 11px;
	height: 11px;
}
.rowguecard--s .rowguecard__skills{
    height: 23px;
    padding-top: 0;
    line-height: 23px;
}
.rowguecard--s .rowguecard__ribbon::before{
	height: 6px;
    border-radius: 0 0 4px 4px;
}
.rowguecard--s .rowguecard__ribbon{
	padding: 0 0 4px;
}
.rowguecard--s .rowguecard__ribbon__level{
	line-height: 20px;
    padding-top: 4px;
    box-sizing: border-box;
    height: 20px;
}


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

.rowguecard--xs {
	width: 59px;
	border-radius: 3px;
}
/* STATE BORDER (HOVER, NEW, SELECTED) *********************************************************************************************/
/***********************************************************************************************************************************/
.rowguecard--xs::before {
	left: -1px;
	top: -1px;
	bottom: -1px;
	right: -1px;
	border-radius: 3px;
}
.rowguecard--xs .rowguecard__content{
	width: 59px;
	height: 92px;
	border-radius: 3px;
}
.rowguecard--xs .rowguecard__content::before{
	border-radius: 3px;
}
.rowguecard--xs.rowguecard--common::before,
.rowguecard--xs.rowguecard--rare::before,
.rowguecard--xs.rowguecard--precious::before,
.rowguecard--xs.rowguecard--divine::before{
	border-radius: 3px;
}
.rowguecard--xs .rowguecard__title {
	font-size: 9px;
    line-height: 9px;
    height: 15px;
}
.rowguecard--xs .rowguecard__skills__text{
	font-size: 6px;
}
.rowguecard--xs .rowguecard__bg{
	width: 54px;
	height: 54px;
}
.rowguecard--xs .rowguecard__bg .rowguecard__bg__item{
	width: 38px;
	height: 38px;
}
.rowguecard--xs .rowguecard__bg .rowguecard__bg__image{
	width: 54px;
	height: 54px;
	border-radius: 3px;
}
.rowguecard--xs .rowguecard__content__image{
	height: 38px;
	width: 38px;
}
.rowguecard--xs .rowguecard__content__image.horsesprite{
	background-size: 38px;
}
.rowguecard--xs .rowguecard__ribbon__level svg,
.rowguecard--xs .rowguecard__skills svg{
	width: 6px;
	height: 6px;
}
.rowguecard--xs .rowguecard__skills{
    height: 12px;
    padding-top: 0;
    line-height: 7px;
}
.rowguecard__skills__text.js-rowguecard__skills__skill--skillA{
	margin-left: 3px;
}
.rowguecard--xs .svgrowgue {
    padding-top: 1px;
}
.rowguecard--xs .rowguecard__ribbon::before{
	height: 5px;
    border-radius: 0 0 2px 2px;
}
.rowguecard--xs .rowguecard__ribbon{
	padding: 0 0 4px;
}
.rowguecard--xs .rowguecard__ribbon__level{
	line-height: 9px;
    padding-top: 0;
    box-sizing: border-box;
}
.rowguecard--xs .rowguecard__ribbon__level svg{
	position: relative;
    bottom: -1px;
}