﻿/************************************************
 Captcha
*************************************************/

.captcha p {
	margin: 3px 0 10px 0 !important;
}

.captcha .captcha-icons {
	font-size: 2em;
	margin-left: 0;
	padding-bottom: 0;
	cursor: pointer;
}

.captcha .captcha-icon {
	display: inline-block;
	margin-bottom: 0.5em;
}

.captcha .captcha-icon-frame,
.captcha .captcha-icon-frame-selected {
	display: inline-block;
	width: 2em;
	height: 2em;
	line-height: 2em;
	margin-right: 0.15em;
	border-radius: 0.25em;
	background-color: #848484;
	text-align: center;
	cursor: pointer;
}

.captcha .captcha-icon-frame {
	background-color: #848484;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.captcha .captcha-icon:hover .captcha-icon-frame {
	background-color: #bfbfbf;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.captcha .captcha-icon-frame-selected {
	background-color: var(--bgcolor-captcha);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.captcha img {
	margin: 0;
	height: 55%;
}

/************************************************
 FontAwesome replacements classes
*************************************************/

/* Colors */
.fa-color-text { filter: var(--color-text-filter); }
.fa-color-captcha { filter: var(--iconcolor-captcha-filter); }
.fa-color-corporate { filter: var(--color-corporate-filter); }
.fa-color-menu { filter: var(--color-menu-filter); }
.fa-color-menu:hover { filter: var(--hovercolor-menu-filter); }
.fa-color-social { filter: var(--color-social-filter); }
.fa-color-white { filter: invert(100%) sepia(32%) saturate(2%) hue-rotate(203deg) brightness(113%) contrast(101%); }
.fa-color-lightgrey { filter: invert(80%) sepia(32%) saturate(0%) hue-rotate(172deg) brightness(98%) contrast(88%); }
.fa-color-red	{ filter: invert(13%) sepia(83%) saturate(7265%) hue-rotate(0deg) brightness(90%) contrast(125%); }
.fa-color-orange { filter: invert(84%) sepia(36%) saturate(6977%) hue-rotate(359deg) brightness(100%) contrast(103%); }
.fa-color-green { filter: invert(26%) sepia(99%) saturate(1732%) hue-rotate(99deg) brightness(99%) contrast(101%); }
.fa-color-blue { filter: invert(8%) sepia(100%) saturate(6415%) hue-rotate(247deg) brightness(105%) contrast(146%); }
.fa-color-shopdefault { filter: invert(72%) sepia(0%) saturate(546%) hue-rotate(135deg) brightness(95%) contrast(95%); }
.fa-color-search { filter: invert(48%) sepia(0%) saturate(95%) hue-rotate(159deg) brightness(78%) contrast(69%); }
/* Sizes */

.fa-icon-textsize {
	position: relative;
	display: inline-block;
	height: 0.75em;
	vertical-align: baseline;
	margin-right: 0.5em;
}

.fa-icon-oversize {
	position: relative;
	display: inline-block;
	height: 1.1em;
	top: 0.16em;
	vertical-align: baseline;
	margin-right: 0.5em;
}

.icon-circle {
    display: inline-block;
    width: 18px;
    background-color: #6e6e6e;
    border-radius: 20px;
    margin-right: 5px;
    text-align: center;
}

.fa-icon-circle {
	position: relative;
	display: inline-block;
	height: 1.1em;
	top: 0.16em;
	vertical-align: baseline;
}
.fa-color-circle { filter: invert(99%) sepia(4%) saturate(383%) hue-rotate(230deg) brightness(113%) contrast(90%); }

.fa-icon-oversize-xl {
	position: relative;
	display: inline-block;
	height: 1.6em;
	top: 0.22em;
	vertical-align: baseline;
	margin-right: 0.5em;
}

.fa-icon-oversize-xxl {
	position: relative;
	display: inline-block;
	height: 2em;
	top: 0.2em;
	vertical-align: baseline;
	margin-right: 0.5em;
}

.fa-icon-menu {
	position: relative;
	display: inline-block;
	top: 2.1em;
	height: 0.88em;
	vertical-align: baseline;
}

.fa-color-spinner {
	filter: var(--color-text-filter);
	margin-right: 0;
}

.fa-pulse,
.fa-spin-pulse {
	-webkit-animation-name: fa-spin;
	animation-name: fa-spin;
	-webkit-animation-direction: var(--fa-animation-direction, normal);
	animation-direction: var(--fa-animation-direction, normal);
	-webkit-animation-duration: var(--fa-animation-duration, 1s);
	animation-duration: var(--fa-animation-duration, 1s);
	-webkit-animation-iteration-count: var(--fa-animation-iteration-count, infinite);
	animation-iteration-count: var(--fa-animation-iteration-count, infinite);
	-webkit-animation-timing-function: var(--fa-animation-timing, steps(8));
	animation-timing-function: var(--fa-animation-timing, steps(8));
}

.icon-shop img,
.btn-shop.btn-default img {
	margin: 0;
}
