/***********************************************************************************************************************************/
/************************                           /!\ AVANT D'EDITER /!\                                  ************************/
/************************                                   VOIR                                            ************************/
/************************                   www.dev.equideow.com/doc/collectionview                         ************************/
/***********************************************************************************************************************************/

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

.collectionview{
    list-style: none;
    margin: 0 -1px 0 0;
    padding: 0;
}
.collectionview:after{
    clear:both;
    content:"";
    display: block;
}


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

.collectionview__block{
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #FDFFF0;
    padding-top: 20px;
    border-bottom: 1px solid #AF9C9C;
    border-right: 1px solid #AF9C9C;
    box-sizing: border-box;
    float:left;
    position: relative;
    text-align: center;
    width: 49.95%;
}
.collectionview--hascategory
.collectionview__block {
    padding-top: 36px;
}

.collectionview .collectionview__block{
    height: 257px;
}
.collectionview:not(.collectionview--hascategory) .collectionview__block{
    height: 245px;
}
/** backgrounds ********************************************************************************************************************/
.collectionview__block.checked,
.collectionview__block--checked{
    background: linear-gradient(to bottom,#edfda4 0,#EDFDA4 10%,#f9f7e0 50%,#FDFFF0 100%);
}
.collectionview__block--gold{
    background: linear-gradient(180deg, #EEC213 0%, #EEC213 38.25%, #FDFFF0 66.99%);
}
.collectionview__block--midnight{
   background: linear-gradient(to bottom, #09204e 0%,#547ba7 45%,#f9f7e0 76%,#FDFFF0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.collectionview__block--midnight .collectionview__category{
    color: #fff;
}
.collectionview__block--blue{
   background: linear-gradient(to bottom, #86d2ed 0%,#afc086 45%,#f9f7e0 76%,#FDFFF0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/** modifier : off ***************************************************************************************************************/
.collectionview__block--off .collectionview__category,
.collectionview__block--off .collectionview__image,
.collectionview__block--off .collectionview__texts,
.collectionview__block--off .collectionview__content{
    opacity: .5;
}

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

.collectionview__category{
    width: 100%;
    font-size: .7rem;
    display: block;
    text-align: center;
    padding-top: 10px;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 25px;
    position: absolute;
    top: 2px;
}

.collectionview__category .sauvage-pastille span {
    font-size: 0.8em;
    top: -5px;
}
.collectionview__category .sauvage-pastille img {
    margin-top: -6px;
}

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

.collectionview__image{
    height: 120px;
    text-align: center;
    position: relative;
    margin-top: 15px;
    margin-bottom: 5px;
}
.collectionview__image img{
    width: auto;
    height: 120px;
}
/** cheval ************************************************************************************************************************/
.collectionview__image .cheval-icone-wrapper,
.collectionview__image .cheval-icone-wrapper .horsesprite {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto;
}
/** avatar ************************************************************************************************************************/
.collectionview__image .ui-avatar {
    width: 6em;
    height: 6em;
}
.collectionview__image .ui-avatar img{
    width: 102%;
    height: auto;
}
.collectionview__image .avatar{
    width: 96px;
    height: 96px;
    margin: 0 auto;
}
/** modifier : small **************************************************************************************************************/
.collectionview--payment .collectionview__image{
    height: 60px;
}
.collectionview--payment .collectionview__image img{
    width: 120px;
    height: 53px;
}
/** modifier : cards ***************************************************************************************************************/
.collectionview--cards .collectionview__image{
    height: 11em;
}
.collectionview--cards .collectionview__image img{
    height: inherit;
    width: inherit;
}

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

.collectionview__texts{
    height: 41px;
}
.collectionview__texts,
.collectionview__texts__title{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

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

.collectionview__texts__title{
    padding: 0 .4em;
}
.collectionview__texts__title img.monnaie {
    margin: 0;
}
.collectionview__texts__title img:not(.monnaie){
    margin-bottom: -5px;
}
.collectionview__texts__title strong{
    font-weight: normal;
}

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

.collectionview__texts__subtitle{
    font-size: .7rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: normal;
}
.collectionview .ui-currency strong{
    margin: 0 .4em 0 0;
}


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

.collectionview__content{
    font-size: 0.8rem;
    height: 32px;
}
.collectionview__content em{
    font-size: .75rem;
    font-style: inherit;
    display: block;
    margin-bottom: 5px;
}
.collectionview__content input{
    position: relative;
    left: inherit;
    top: inherit;
}

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

.collectionview__image__badge{
    border-radius: 4px;
    border: 1px solid #af9c9c;
    overflow: hidden;
    font-size: 10px;
    padding: 2px 5px 1px 5px;
    min-width: 24px;
    right: 5px;
    background: #f2efcf;
    color: #907869;
    display: block;
    font-weight: bold;
    position: absolute;
    text-align: center;
    bottom: -5px;
    white-space: nowrap;
    z-index: 1;
}
.collectionview__image__badge .ui-currency::after {
    background-color: transparent;
}
.collectionview__image__badge .ui-currency,
.collectionview__image__badge .ui-currency img,
.collectionview__image__badge .ui-currency strong {
    vertical-align: middle;
}
.collectionview__image__badge .ui-currency img {
    top: 0;
}

/***********************************************************************************************************************************
####  ######   #######  ##    ##
 ##  ##    ## ##     ## ###   ##
 ##  ##       ##     ## ####  ##
 ##  ##       ##     ## ## ## ##
 ##  ##       ##     ## ##  ####
 ##  ##    ## ##     ## ##   ###
####  ######   #######  ##    ##
***********************************************************************************************************************************/
.collectionview__image__icon .pix,
.collectionview__image__icon .pix__svg,
.collectionview__image__icon .pixstatus{
    position: absolute;
    top: -20px;
    right: 10px;
    height: 24px;
    width: 24px;
    padding: 6px;
}
.collectionview__image__icon .pix svg{
    width: 12px;
    height: 12px;
}
.collectionview__image__icon .pixstatus{
    left: 10px;
}