/*******************************************************************************************************************************************
 *******************************************************************************************************************************************
 ######  ##     ##  ######
##    ## ##     ## ##    ##
##       ##     ## ##
 ######  ##     ## ##   ####
      ##  ##   ##  ##    ##
##    ##   ## ##   ##    ##
 ######     ###     ######
*******************************************************************************************************************************************
**************************** see http://www.dev.equideow.com/doc/svg for more details *****************************************************
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

.svg{
	display: inline-block;
	border: none;
	outline: none;
}
a.svg,
button.svg{
	cursor: pointer;
	transition: all .15s ease-in-out;
	line-height: 0;
	text-decoration: none;
}
#global a.svg,
#global button.svg{
	filter: drop-shadow(0 2px 0px rgba(0, 0, 0, 0.2));
}
#global a.svg:hover,
#global button.svg:hover{
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}
.svg.ui-btn:not(.pt--1):not(.pt--2):not(.pt--3):not(.pt--4):not(.pt--5):not(.pl--1):not(.pl--2):not(.pl--3):not(.pl--4):not(.pl--5):not(.pr--1):not(.pr--2):not(.pr--3):not(.pr--4):not(.pr--5):not(.pb--1):not(.pb--2):not(.pb--3):not(.pb--4):not(.pb--5){
	padding: inherit;
}

/* SVG : SIZES *********************************************************************************************************************/
/***********************************************************************************************************************************/

/** extra large ********************************************************************************************************************/
.svg--xl,
.svg--xl svg{
	width: 48px;
	height: 48px;
}
/** large **************************************************************************************************************************/
.svg--l,
.svg--l svg{
	width: 32px;
	height: 32px;
}
/** medium *************************************************************************************************************************/
.svg--m,
.svg--m svg{
	width: 24px;
	height: 24px;
}
/** small **************************************************************************************************************************/
.svg--s,
.svg--s svg{
	width: 16px;
	height: 16px;
}
/** extra small ********************************************************************************************************************/
.svg--xs,
.svg--xs svg{
	width: 12px;
	height: 12px;
}

/* SVG : FILL **********************************************************************************************************************/
/***********************************************************************************************************************************/

.svg--primary{
	fill: #3D251B;
}
.svg--secondary{
	fill: #82685B;
}
.svg--line{
	fill: #AF9C8C;
}
.svg--white{
	fill: #fff;
}
.svg--dark{
	fill: rgba(0, 0, 0, .3);
}
.svg--success{
	fill: #849644;
}
.svg--danger{
	fill: #c93a3a;
}
.svg--disabled{
	fill: #949494;
}
.svg--info{
	fill: #d0d0d0;
}
.svg--facebook{
	fill: #3B5998;
}
.svg--twitter{
	fill: #00aeef;
}
.svg--instagram{
	fill: #e1306c;
}
.svg--youtube{
	fill: #FF0000;
}
.svg--important{
	fill: #EEC213;
}
.svg--link{
	fill: #ad5b50;
}
.svg--discord{
	fill: #5865F2;
}
.svg--common{
	fill: #AF9C8C;
}
.svg--rare{
	fill: #25cda3;
}
.svg--precious{
	fill: #ee8c13;
}
.svg--divine{
	fill: #7C4D81;
}
.svg--temporarybreed{
	fill: #740F5E;
}

/* SVG : IF BACKGROUND IS APPLYED, BUILD A ROUNDED CONTAINER ***********************************************************************/
/***********************************************************************************************************************************/

/** common container styles ********************************************************************************************************/
.svg[class*="bg--"]{
	border-radius: 50%;
	box-sizing: border-box;
	line-height: 1;
	font-size: 0;
}
.svg[class*="bg--"] svg{
	width: 100%;
	height: 100%;
}
/** extra large ********************************************************************************************************************/
.svg--xl[class*="bg--"]{
	height: 96px;
	padding: 24px;
	width: 96px;
}
/** large **************************************************************************************************************************/
.svg--l[class*="bg--"]{
	width: 64px;
	padding: 16px;
	height: 64px;
}
/** medium *************************************************************************************************************************/
.svg--m[class*="bg--"]{
	width: 48px;
	padding: 12px;
	height: 48px;
}
/** small **************************************************************************************************************************/
.svg--s[class*="bg--"]{
	width: 32px;
	padding: 7px;
	height: 32px;
}
/** extra small ********************************************************************************************************************/
.svg--xs[class*="bg--"]{
	width: 24px;
	padding: 6px;
	height: 24px;
}

/* SVG INTO TEXT--MODIFIER *********************************************************************************************************/
/***********************************************************************************************************************************/

/** small ********************************************************************************************************************/
.text--s .svg--s.svg--text{
	margin: 1px 4px 0;
	position: relative;
	top: 3px;
}


/* SVG INTO BUTTON-STYLE-9 *********************************************************************************************************/
/***********************************************************************************************************************************/

.button-style-9:not(.disabled) .content-icon-svg{
	fill: #fff;
}
.button-style-9.disabled .content-icon-svg,
.button-style-9[disabled] .content-icon-svg{
	fill: #808080;
}


/* SVG INTO BUTTON-STYLE-20 *******************************************************************************************************/
/***********************************************************************************************************************************/

.button-style-20:not(.disabled) .svg,
.button-style-20:not(.disabled) .content-icon-svg{
	fill: #4a543a;
}
.button-style-20.disabled .svg,
.button-style-20[disabled] .svg,
.button-style-20.disabled .content-icon-svg,
.button-style-20[disabled] .content-icon-svg{
	fill: #808080;
}


/* SVG INTO BUTTON-STYLE-10 ********************************************************************************************************/
/***********************************************************************************************************************************/

.button-style-10:not(.disabled) .content-icon-svg{
	fill: #af9c8c;
}
.button-style-10.disabled .content-icon-svg,
.button-style-10[disabled] .content-icon-svg{
	fill: #af9c8c;
}