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

/***********************************************************************************************************************************/
/* WRAPPER *************************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper{
    display: block;
    position: relative;
    width: 72px;
    box-sizing: border-box;
    margin: 0 10px;
    padding: 9px 0 0;
}

/***********************************************************************************************************************************/
/* IMAGE ***************************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper__image{
    color: #fff;
}
.actionview--hascount .actionview__wrapper__image::after{
    border-width: 0 6px 5px 0;
    height: 13px;
    left: 5px;   
    top: 3px;
    width: 16px;
}
.actionview:not(.disabled) .actionview__wrapper__image::after{
    border-color: #FDFFF0;
}

/* hover ***************************************************************************************************************************/
.actionview:not(.disabled):hover .actionview-inner{
    transform: scale(.95);
}


/***********************************************************************************************************************************/
/* INNER (image or  SVG) ***********************************************************************************************************/
/***********************************************************************************************************************************/

.actionview-inner{
    width: 72px;
    height: 72px;
}
/* actionview-inner img tag ********************************************************************************************************/
.actionview-inner img{
    max-width: 48px;
    max-height: 48px;
}

/* actionview svg background *******************************************************************************************************/
.actionview-inner .svg{
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

/* actionview-inner - focus state **************************************************************************************************/
.actionview:not(.disabled):active .actionview-inner > img,
.actionview:not([disabled]):active .actionview-inner > img{
    transform: scale(.9);
}

/***********************************************************************************************************************************/
/* LABEL ***************************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper__label{
    color: #fff;
    margin: 0 -8px;  
}

/***********************************************************************************************************************************/
/* BACKGROUND (SVG) ****************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper__svg{
	top: 9px;
}
.actionview-path{
    stroke-width: 2px;
    transition: all .15s ease-in-out;
}

/***********************************************************************************************************************************/
/* COUNT ***************************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper__count{
    border-width: 2px;    
    font-size: 12px;    
    line-height: 21px;
    min-width: 16px;
    right: 47px;
}

/***********************************************************************************************************************************/
/* STATE : HIGHLIGHT ***************************************************************************************************************/
/***********************************************************************************************************************************/

/* normal **************************************************************************************************************************/
.actionview--highlighted:not(.disabled) .actionview__wrapper__label{
    animation: actionViewHighlight 1.5s infinite;
}
/* hover **************************************************************************************************************************/
.actionview--highlighted:not(.disabled):hover .actionview__wrapper__label{
    animation: none;
    box-shadow: 0 2px 7px #fff;
}
/* animation ***********************************************************************************************************************/
@keyframes actionViewHighlight{
    0% {
        box-shadow: none;
    }
    50%{
        box-shadow: 0 2px 7px #fff;
    }
    100% {
        box-shadow: none;
    }
}

/***********************************************************************************************************************************/
/* HACK IE10 & IE11 ****************************************************************************************************************/
/***********************************************************************************************************************************/

@media all and (-ms-high-contrast:none){
    .actionview{
        min-height: 100px;
        overflow: visible;
    }
    .actionview__wrapper{
        bottom: 13px;
    }
    .actionview__wrapper__label{
        position: absolute;
        top: 81px;
    }
    .actionview--hascount .actionview__wrapper__image::after{
        left: 6px;
        top: 8px;
        border-width: 0 7px 6px 0;
        height: 7px;
        width: 14px;
    }
}

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

.actionview--highlight:not(.disabled) .actionview__wrapper::after,
.actionview--highlight:not(.disabled) .actionview__wrapper::before{
    content: "";
    display: block;
    position: absolute;
}
.actionview--highlight:not(.disabled) .actionview__wrapper::before{
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: animateSparkes;    
    animation-timing-function: steps(32);
    background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
    height: 256px;
    left: -92px;
    pointer-events: none;
    top: -84px;
    transform: scale3d(.285, .285, 1);
    width: 256px;
    z-index: 4;
}
.actionview--highlight:not(.disabled) .actionview__wrapper::after{
    border-radius: 30px;
    box-shadow: 0 0 20px 0 #EEC213;
    height: 64px;
    left: 4px;
    top: 15px;
    width: 64px;
    z-index: -1;
}
.actionview--highlight:not(.disabled) .actionview__wrapper__image::after{
    border-color: #EEC213;
}
.actionview--highlight:not(.disabled):hover .actionview__wrapper__image::after{
    border-color: #FDFFF0;
}


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

.actionview.disabled .svg,
.actionview[disabled] .svg {
    fill: #808080;
}

/* IMAGE **************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview.disabled img,
.actionview[disabled] img{
    -webkit-filter: grayscale(1); /* Webkit */
    filter: grayscale(1); /* W3C */
}
@media all and (-ms-high-contrast:none){ /* IE & Edge */
    .actionview.disabled img,
    .actionview[disabled] img{
        opacity: .5;
    }
}
.actionview.disabled .actionview__wrapper__image::after,
.actionview[disabled] .actionview__wrapper__image::after{
    border-color: #d0d0d0;
}

/* PATH ***************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview.disabled .actionview-path,
.actionview[disabled] .actionview-path{
    fill: #d0d0d0;
    stroke: #808080;
}

/* LABEL **************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview.disabled .actionview__wrapper__label,
.actionview[disabled] .actionview__wrapper__label{
    background: #808080;
}

/* COUNT **************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview.disabled .actionview__wrapper__count,
.actionview[disabled] .actionview__wrapper__count{
    background: #d0d0d0;
    border-color: #808080;
    color: #949494;
}