/***********************************************************************************************************************************/
/************************ 							/!\	AVANT D'EDITER /!\									************************/
/************************ 									LIRE					   						************************/
/************************ 							www.dev.equideow.com/doc								************************/
/************************ 						        	  ET											************************/
/************************ 			dev.owlient.eu/wiki/index.php/Guide_Int%C3%A9gration_Equideow			************************/
/***********************************************************************************************************************************/

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

.ui-popup-active .popupview.ui-popup{
	animation: showPopup .25s;
}
.popupview.ui-popup{
	position: relative;
	background: #FDFFF0;
	border-radius: 8px;
	border: none;
	box-shadow: 0 0 100px #000;
	overflow: visible;
	text-align: center;
	width: 100%;
}
.popupview:not(.popupview--strut)::before {
  background-color: #F2EFCF;
  background-size: cover;
  background-position: center -40px;
  border-radius: 8px 8px 0 0;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
  content: "";
  display: block;
  height: 65px;
  position: absolute;
  width: 100%;
  z-index: 0;
}

/*** POPUPVIEW__TITLE *************************************************************************************************************
***********************************************************************************************************************************/

.ui-popup .popupview__title{
	padding: 0;
	cursor: default;
	margin: 0 0 10px;
}

/*** POPUPVIEW__CONTENT ***********************************************************************************************************
***********************************************************************************************************************************/

.popupview-form p,
.popupview__content p:not(.ui-listview-content){
	padding: 0 0 10px;
	line-height: 1.5;
}

/*** POPUPVIEW__CONTENT ***********************************************************************************************************
***********************************************************************************************************************************/
.popupview__footer a,
.popupview__footer a:visited{
	color: #ad5b50;
	text-decoration: underline;
}

/*** POPUPVIEW__CLOSE *************************************************************************************************************
***********************************************************************************************************************************/
.popupview__close{
	animation: showPopup .25s 1 .25s;
	animation-fill-mode: forwards;
	background: #DCD4BC;
	border-radius: 50%;
	border: 4px solid #F2EFCF;
	height: 16px;
	line-height: 1;
	padding: 6px;
	position: absolute;
	right: 10px;
	top: -16px;
	transform: scale(0);
	width: 16px;
	z-index: 2;
}
.popupview__close svg{
	width: 12px;
	height: 12px;
	fill: #AD5B50;
}
.popupview__close:hover{
	box-shadow: 0 6px 20px 0 rgba(0,0,0,0.3);
}

/*** POPUPVIEW--STRUT *************************************************************************************************************
***********************************************************************************************************************************/

.popupview--strut .popupview__title{
	padding-top: 10px;
}

/*** POPUPVIEW__IMAGE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview__image{
	position: relative;
	text-align: center;
}
.popupview__image .horsesprite.horsesprite--300,
.popupview .popupview__image__asset{
	width: 128px;
	height: 128px;
	margin-top: -50px;
}
.popupview__image .horsesprite.horsesprite--300{
	background-size: 128px;
}
.popupview__content__maxsize{
	width: 192px;
	height: 192px;
	background-size: 192px;
	margin: 0 auto;
}
.popupview__content__maxsize img{
	max-width: 192px;
	max-height: 192px;
}
/*** POPUPVIEW__BOTTOM ************************************************************************************************************
***********************************************************************************************************************************/

.popupview__bottom{
	padding-bottom: 20px;
	font-size: 11px;
}
.popupview__bottom p{
	margin: 0;
	line-height: 1.5;
}

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

/*** POPUPVIEW__IMAGE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview--important::before {
    background: url(/media/equideo/image/components/popups/popupview-important.jpg) no-repeat center -500px;
}
.popupview--important .popupview__image{
	z-index: 1;
}
.popupview--important .popupview__image::after,
.popupview--important .popupview__image::before{
	content: "";
	display: block;
}
.popupview--important .popupview__image::before{
	background: radial-gradient(circle at center, #eec213 0, transparent 75%);
	height: 128px;
	left: calc(50% - 64px);
	pointer-events: none;
	position: absolute;
	top: -50px;
	width: 128px;
	z-index: -1;
}
.popupview--important .popupview__image::after{
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	position: absolute;
	z-index: 1;
	height: 128px;
	left: calc(50% - 64px);
	transform: scale(.75);
	top: -48px;
	width: 128px;
}
.popupview--important .popupview__image::before{
	animation-name: spinSuccessXL;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-delay: .5s;
}
.popupview--important .popupview__image::after{
	animation-name: animateSparkes;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(32);	
}

/*** POPUPVIEW__CLOSE *************************************************************************************************************
***********************************************************************************************************************************/
.popupview--important .popupview__close{
	border-color: #F2D850;
}


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

.popupview--gift::before {
    background: url(/media/equideo/image/components/popups/popupview-gift.jpg) no-repeat center -500px;
}

/*** POPUPVIEW__CLOSE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview--gift .popupview__close{
	border-color: #70B5DF;
}

/*** POPUPVIEW__IMAGE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview--gift .popupview__image::after{
	animation: animateSparkes 2s infinite steps(32);
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	content: "";
	display: block;
	height: 170px;
	left: calc(50% - 85px);
	position: absolute;
	top: -70px;
	transform: scale(.75);
	width: 170px;
	z-index: 1;
}

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

.popupview--firstprize::before {
	background: url(/media/equideo/image/components/popups/popupview-first-prize.jpg) no-repeat center -500px;
}

/*** POPUPVIEW__CLOSE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview--firstprize .popupview__close {
	border-color: #965B8B;
}

/*** POPUPVIEW__IMAGE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview--firstprize .popupview__image::after {
	animation: animateSparkes 2s infinite steps(32);
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	content: "";
	display: block;
	height: 170px;
	left: calc(50% - 85px);
	position: absolute;
	top: -70px;
	transform: scale(.75);
	width: 170px;
	z-index: 1;
}