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

************************************************************************************************************************************
************************************************************************************************************************************
********************************************									****************************************************
******************************************** 	   /!\ /!\ WARNING /!\ /!\ 		****************************************************
********************************************									****************************************************
********************************************	 THESE ARE COMMON STYLES FOR	****************************************************
******************************************** 		  DESKTOP AND MOBILE 		****************************************************
********************************************									****************************************************
************************************************************************************************************************************
************************************************************************************************************************************
*/

.actionview{
    background: transparent;
    border: none;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    outline: none;
    vertical-align: top;
}

/* overiding selection styles ******************************************************************************************************/
.actionview__wrapper__count::selection,
.actionview-inner::selection,
.actionview__wrapper__label::selection{
    background: transparent;
}
.actionview__wrapper__count::-moz-selection,
.actionview-inner::-moz-selection,
.actionview__wrapper__label::-moz-selection{
    background: transparent;
}
.actionview__wrapper__count::-webkit-selection,
.actionview-inner::-webkit-selection,
.actionview__wrapper__label::-webkit-selection{
    background: transparent;
}
.actionview:hover{
	text-decoration: none;
}

/***********************************************************************************************************************************/
/* INNER ***************************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview-inner{
	display: table-cell;
    vertical-align: middle;
    overflow: hidden;
    transition: transform .15s ease-in-out;
}

/***********************************************************************************************************************************/
/* WRAPPER__IMAGE ******************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper__image{
    display: table;
    position: relative;
    text-align: center;
    z-index: 3;
}
.actionview--hascount .actionview__wrapper__image::after{
	border-radius: 0 8px 21px 0;
	border-style: solid;
	content: "";
	position: absolute;
	transition: all .15s ease-in-out;
	z-index: -1;
}

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

.actionview__wrapper__label{
	border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    border-color: transparent;
	box-sizing: border-box;
	display: block;
	font-size: 13px;
	overflow-wrap: break-word;
	padding: 2px 3px;
	position: relative;
    transition: all .15s ease-in-out;
	text-align: center;
    top: -4px;
    width: 90px;
    z-index: 2; 
}
.actionview__wrapper__label img{
    max-width: 16px;
    max-height: 16px;
    margin: -2px 0;
    position: relative;
    bottom: 1px;
}

/***********************************************************************************************************************************/
/* WRAPPER__SVG ********************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper__svg{
	position: absolute;
	z-index: 0;
	left: 0;
}

/***********************************************************************************************************************************/
/* WRAPPER__COUNT ******************************************************************************************************************/
/***********************************************************************************************************************************/

.actionview__wrapper__count{
	border-radius: 24px;
	border-style: solid;
	transition: all .15s ease-in-out;
	white-space: nowrap;
	z-index: 2;
	top: 0;
	position: absolute;
	padding: 0 5px;
	height: 24px;
}
.actionview:not(.disabled) .actionview__wrapper__count{
    background: #FDFFF0;
    color: #3D251B;
}

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

.actionview:not(.disabled) .actionview-path{
    fill: #FDFFF0;
}

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

.actionview--primary:not(.disabled) .actionview-path{
    stroke: #AD5B50;
}
.actionview--primary:not(.disabled) .actionview__wrapper__label{
    background: #AD5B50;
}
.actionview--primary:not(.disabled) .actionview__wrapper__count{
    border-color: #AD5B50;
}
.actionview--primary.actionview--primary:not(.disabled) .svg {
    fill: #3d251b;
}

/* HOVER **************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview--primary:not(.disabled):hover .actionview__wrapper__image::after{
    border-color: #AD5B50;
}
.actionview--primary:not(.disabled):hover .actionview__wrapper__count,
.actionview--primary:not(.disabled):active .actionview__wrapper__count{
    background: #AD5B50;
    color: #fff;
}
.actionview--primary:not(.disabled):hover .actionview-path{
    fill: #AD5B50;
}
.actionview--primary.actionview--primary:not(.disabled):active .svg,
.actionview--primary.actionview--primary:not(.disabled):hover .svg{
    fill: #FDFFF0;
}
.actionview--primary:not(.disabled):hover .actionview__wrapper__label{
    background: #fdfff0;
    border-color: #AD5B50;
    color: #3D251B;
}


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

.actionview--secondary:not(.disabled) .actionview-path{
    stroke: #37659A;
}
.actionview--secondary:not(.disabled) .actionview__wrapper__label{
    background: #37659A;
}
.actionview--secondary:not(.disabled) .actionview__wrapper__count{
    border-color: #37659A;
}
.actionview--secondary.actionview--secondary:not(.disabled) .svg {
    fill: #3d251b;
}

/* HOVER **************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview--secondary:not(.disabled):hover .actionview__wrapper__image::after{
    border-color: #37659A;
}
.actionview--secondary:not(.disabled):hover .actionview__wrapper__count,
.actionview--secondary:not(.disabled):active .actionview__wrapper__count{
    background: #37659A;
    color: #fff;
}
.actionview--secondary:not(.disabled):hover .actionview-path{
    fill: #37659A;
}
.actionview--secondary.actionview--secondary:not(.disabled):hover .svg,
.actionview--secondary.actionview--secondary:not(.disabled):active .svg{
    fill: #fff;
}
.actionview--secondary:not(.disabled):hover .actionview__wrapper__label{
    background: #fdfff0;
    border-color: #37659A;
    color: #3D251B;
}


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

.actionview--important:not(.disabled) .actionview-path{
    stroke: #EEC213;
}
.actionview--important:not(.disabled) .actionview__wrapper__label{
    background: #EEC213;
    border-color: #EEC213;
    color: #3D251B;
}
.actionview--important:not(.disabled):hover .actionview__wrapper__label{
    background: #FDFFF0;
}
.actionview--important:not(.disabled) .actionview__wrapper__count{
    border-color: #EEC213;
}
.actionview--important.actionview--important:not(.disabled) .svg {
    fill: #3D251B;
}

/* HOVER **************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview--important:not(.disabled):hover .actionview__wrapper__image::after{
    border-color: #EEC213;
}
.actionview--important:not(.disabled):hover .actionview__wrapper__count,
.actionview--important:not(.disabled):active .actionview__wrapper__count{
    background: #EEC213;
}
.actionview--important:not(.disabled):hover .actionview-path{
    fill: #EEC213;
}

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

.actionview--highlight:not(.disabled) .actionview-path{
    fill: #EEC213;
    stroke: #fff;
}
.actionview--highlight:not(.disabled) .actionview__wrapper__label{
    background: #fdfff0;
    border-color: #FDFFF0;
    color: #3D251B;
}
.actionview--highlight:not(.disabled) .actionview__wrapper__count{
    border-color: #FDFFF0;
    background: #EEC213;
}
.actionview--highlight:not(.disabled) .actionview__wrapper__image::after {
    border-color: #EEC213;
}
.actionview--highlight.actionview--highlight:not(.disabled) .svg {
    fill: #3D251B;
}

/* HOVER **************************************************************************************************************************/
/**********************************************************************************************************************************/

.actionview--highlight:not(.disabled):hover .actionview-path{
    fill: #FDFFF0;
}
.actionview--highlight:not(.disabled):hover .actionview__wrapper__label{
    background: #EEC213;
}
.actionview--highlight:not(.disabled):hover .actionview__wrapper__count,
.actionview--highlight:not(.disabled):active .actionview__wrapper__count{
    background: #FDFFF0;
}
.actionview--highlight:not(.disabled):hover .actionview__wrapper__image::after,
.actionview--highlight:not(.disabled):active .actionview__wrapper__image::after{
  border-color: #FDFFF0;
}