.ilmOutput {
	display: inline-block;
}

.ilmOutput span {
	display: inline-block;
	width: 35px;
	height: 35px;
	vertical-align: center;
	line-height: 35px;
	font-weight: bold;
	font-size: 16px;
	color: rgba(0, 0, 0, 0.9);
	text-align: center;
	letter-spacing: 1px;
	text-transform: uppercase;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 4px;
}



.ilmOutput.valid .ilmInput,
.captcha_container.valid .ilmTxtInput {
	border: 1px solid #2ecc71;
	color: #2ecc71 !important;
}

.captcha_container.valid .ilmrefresh,
.ilmOutput.valid+i.ilmrefresh{
	display: none;
}
.ilm_invisible,
.ilm_invisible label,
.ilm_invisible .captcha_container{
	margin: 0;
	padding: 0;
}

.ilmOutput.unvalid .ilmInput,
.captcha_container.unvalid .ilmTxtInput {
	border: 1px solid #e74c3c;
	color: #e74c3c;
}

.ilmOutput .ilmInput,
.ilmTxtInput {
	position: relative;
	outline: 0;
	height: 35px;
	width: 50px;
	border-radius: 4px;
	border: 1px solid #42A0DD;
	color: #42A0DD;
	text-align: center;
	font-weight: bold;
	font-size: 16px;
	top: -2px;
	min-width: unset !important;
}

.ilmTxtInput {
	width: 140px;
	min-width: unset !important;
}

i.ilmrefresh,
i.ilmrefresh_motion,
i.ilmrefresh_shuffle {
	margin: -3px 0 0px 5px;
	padding: 5px;
	font-size: 30px;
	color: rgba(0, 0, 0, 0.2);
	cursor: pointer;
	transform-origin: center center;
	transition: transform 0.2s ease-out, color 0.2s ease-out;
	width: auto;
	height: auto;
	transform: rotate(140deg);
}

i.ilmrefresh:hover,
i.ilmrefresh_motion:hover,
i.ilmrefresh_shuffle:hover {
	color: rgba(0, 0, 0, 0.4);
	transform: rotate(280deg);
}

i.ilmwarning {
	color: #e74c3c;
	margin: -3px 0 0px 5px;
	font-size: 30px;
	display: none;
}

.ilmControl .ilmOutput.unvalid .ilmwarning,
.captcha_container.unvalid .ilmwarning {
	display: inline-block;
}

i.ilmdone {
	color: #2ecc71;
	margin: -3px 0 0px 5px;
	font-size: 30px;
	display: none;
}

.ilmControl .ilmOutput.valid .ilmdone,
.captcha_container.valid .ilmdone {
	display: inline-block;
}




.fadeOut {
	opacity: 0;
	transform: translateY(10px);
}

.fadeIn {
	opacity: 1 !important;
	transform: translateY(0px) !important;
}

.form-fields,
.form-success {
	transition: all 0.2s ease-out;
}

.form-success {
	opacity: 0;
	transform: translateY(-10px);
	margin-top: 20px;
}

.ilmTxtCanvas {
	border: 1px solid #ccc;
}

.ilmTxtCanvas_container {
	display: flex;
}

.ilmTxtCanvas_container .ilmInputDiv {
	padding: 5px 10px;
}



/* ICON Captcha */
div.iconcaptcha,
.ilmShuffle > .ilminit {
	display: inline-block;
	border: 1px solid #a3a3a3;
	border-radius: 5px;
	overflow: hidden;
	min-width: 362px;
	width: 362px;
}
.ilmShuffle > .ilminit{display: flex;}

#captcha-container {
	display: flex;
	justify-content: space-around;
	margin-top: 20px;
}
.ilmCompact .shuffle_captcha{
	position: absolute;
	z-index: 50;
}

.captcha-svg {
	width: 50px;
	height: auto;
	cursor: pointer;
	transition: transform 0.2s;
	padding: 10px 10px;
	margin: 0 5px;
}

.captcha-icon:hover {
	transform: scale(1.1);
}

.selected {
	color: green;
}

.error {
	color: red;
}

.iconcaptcha {
	position: relative;
	height: 80px;
	min-height: 80px;
	min-width: 290px;
}

.ilmiconload {
	position: absolute;
	top: 0px;
	width: 100%;
	text-align: center;
	background: #ffffffe6;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.ilmiconload img {
	width: 40px;
	height: 40px;
	border: none;
}

.ilmhide {
	display: none !important;
}

.ilminit {
	padding: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	cursor: pointer;
}

.ilminit img {
	width: 40px;
	height: auto;
}

.ilminit span {
	font-size: 1.2rem;
	font-weight: bold;
	margin-left: 10px;
}

.ilmcapfailed {
	color: #eb4b6a;
}

.ilmcapsuccess {
	color: #8018f3;
}

.ilmhead {
	text-align: center;
	font-size: 0.8rem;
	border-bottom: 1px solid #a3a3a3;
	color: #222;
}

.ilmcapsuccess img,
.ilmcapfailed img {
	width: 30px;
	height: 30px;
}

.ilmbody {
	height: calc(100% - 21px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}

/* Dark */
div.iconcaptcha.dark {
	background-color: #222;
	border-color: #000;
}

div.iconcaptcha.dark .ilmhead {
	border-color: #000;
	color: #fff;
}

div.iconcaptcha.dark .ilmiconload {
	background: #444343e6;
}

div.iconcaptcha.dark .captcha-svg {
	filter: invert(1);
}

div.iconcaptcha.dark span {
	color: #eee;
}

/* Motion Captcha */

.ilmcanvas {
	width: 220px;
	/* For best results, set width to between 210px and 240px */
	height: 154px;
	/* For best results, set height to between 140px and 170px */
	background: #fff -9999px -9999px no-repeat;
	background-image: url('../img/ilmmotion.jpg') !important;
	border: 2px solid #ddd;
}

.motionCaptcha.dark .ilmcanvas {
	background-color: #000;
	background-image: url('../img/ilmmotion_dark.jpg') !important;
}

/* The shapes: */
.ilmcanvas.triangle {
	background-position: 10px 10px
}

.ilmcanvas.x {
	background-position: -200px 10px
}

.ilmcanvas.rectangle {
	background-position: -400px 10px
}

.ilmcanvas.circle {
	background-position: -600px 10px
}

.ilmcanvas.check {
	background-position: 10px -150px
}

.ilmcanvas.caret {
	background-position: -200px -150px
}

.ilmcanvas.zigzag {
	background-position: -400px -150px
}

.ilmcanvas.arrow {
	background-position: -600px -150px
}

.ilmcanvas.leftbracket {
	background-position: 10px -300px
}

.ilmcanvas.rightbracket {
	background-position: -200px -300px
}

.ilmcanvas.v {
	background-position: -400px -300px
}

.ilmcanvas.delete {
	background-position: -600px -300px
}

.ilmcanvas.leftbrace {
	background-position: 10px -450px
}

.ilmcanvas.rightbrace {
	background-position: -200px -450px
}

.ilmcanvas.star {
	background-position: -400px -450px
}

.ilmcanvas.pigtail {
	background-position: -600px -450px
}

.ilmcanvas.mc-invalid {
	border-color: #e74c3c;
}

.ilmcanvas.mc-valid {
	border-color: #2ecc71;
}

.motionCaptcha {
	display: flex;
	align-items: flex-start;
}

/* Shuffle Captcha */
.shuffle_captcha {
    width: 360px;
    min-height: 211px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    display: flex;
	flex-direction:column;
	justify-content:center;
}

.shuffle_captcha .ilmbg {
	height: 150px;
	background-size: cover;
	text-align: center;
	font-size: 0;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

span.ilm_bg.clicked::before {
    content: ".";
    display: inline-block;
    color: #fff;
    width: 15px;
    height: 15px;
    background: #9c27b0;
    border-radius: 50px;
    margin-top: 50%;
    border: 2px solid #ffffff;
}

.shuffle_captcha .ilmbg.bg1 {
	background-image: url("../img/shuffled/bg/1.jpg")
}

.shuffle_captcha .ilmbg.bg2 {
	background-image: url("../img/shuffled/bg/2.jpg")
}

.shuffle_captcha .ilmbg.bg3 {
	background-image: url("../img/shuffled/bg/3.jpg")
}

.shuffle_captcha .ilmbg.bg4 {
	background-image: url("../img/shuffled/bg/4.jpg")
}

.shuffle_captcha .ilmbg.bg5 {
	background-image: url("../img/shuffled/bg/5.jpg")
}

.shuffle_captcha .ilmbg.bg6 {
	background-image: url("../img/shuffled/bg/6.jpg")
}

.shuffle_captcha .ilmbg.bg7 {
	background-image: url("../img/shuffled/bg/7.jpg")
}

.shuffle_captcha .ilmbg.bg8 {
	background-image: url("../img/shuffled/bg/8.jpg")
}

.shuffle_captcha .ilmbg.bg9 {
	background-image: url("../img/shuffled/bg/9.jpg")
}

.shuffle_captcha .ilmbg.bg10 {
	background-image: url("../img/shuffled/bg/10.jpg");
}

.ilmShuffle{position: relative;}

.ilmShuffleHeader {
    padding: 10px;
    background-color: #f6f6f6;
    color: #222;
    display: flex;
    justify-content: space-between;
}

.ilmShuffleHeader .shuffleMsg {
	display: block;
}

.ilmShuffleHeader span.ilm_txt {
    font-weight: bold;
    background-image: url("../img/shuffled/arrow.png");
    background-repeat: no-repeat;
    background-position: center right;
    width: 40px;
    display: inline-block;
    margin-right: 10px;
    font-size: 20px;
    color: #bc42c1;
}
.ilmShuffleHeader span.ilm_txt:last-child {
	background-image: none;
	width: auto;
}

.ilm_bg {
	display: inline-block;
}
.ilmrefresh_shuffle,
.ilm_bg{cursor: pointer;}

/* Alphabet */
.ilm_bg1 {
	width: 45px;
	height: 60px;
	background-image: url("../img/shuffled/a1.png");
	background-position: -13px -236px;
}

.ilm_bg1.a {
	background-position: -23px -8px
}

.ilm_bg1.b {
	background-position: -66px -8px
}

.ilm_bg1.c {
	background-position: -108px -8px
}

.ilm_bg1.d {
	background-position: -149px -8px
}

.ilm_bg1.e {
	background-position: -189px -8px
}

.ilm_bg1.f {
	background-position: -229px -8px
}

.ilm_bg1.g {
	background-position: -7px -82px
}

.ilm_bg1.h {
	background-position: -48px -82px
}

.ilm_bg1.i {
	width: 38px;
	background-position: -83px -82px
}

.ilm_bg1.j {
	background-position: -115px -82px
}

.ilm_bg1.k {
	background-position: -153px -82px
}

.ilm_bg1.l {
	background-position: -194px -82px
}

.ilm_bg1.m {
	background-position: -243px -82px
}

.ilm_bg1.n {
	background-position: -7px -157px
}

.ilm_bg1.o {
	background-position: -46px -157px
}

.ilm_bg1.p {
	background-position: -86px -157px
}

.ilm_bg1.q {
	background-position: -128px -157px
}

.ilm_bg1.r {
	background-position: -170px -157px
}

.ilm_bg1.s {
	background-position: -212px -157px
}

.ilm_bg1.t {
	background-position: -250px -157px
}

.ilm_bg1.u {
	background-position: -13px -236px
}

.ilm_bg1.v {
	background-position: -54px -236px
}

.ilm_bg1.w {
	background-position: -104px -236px
}

.ilm_bg1.x {
	background-position: -152px -236px
}

.ilm_bg1.y {
	background-position: -196px -236px
}

.ilm_bg1.z {
	background-position: -239px -236px
}

.ilm_bg2 {
	width: 45px;
	height: 60px;
	background-image: url("../img/shuffled/a2.png");
	background-position: -10px -189px;
}

.ilm_bg2.a {
	background-position: -10px -3px
}

.ilm_bg2.b {
	background-position: -69px -8px
}

.ilm_bg2.c {
	background-position: -129px -8px
}

.ilm_bg2.d {
	background-position: -187px -8px
}

.ilm_bg2.e {
	background-position: -247px -8px
}

.ilm_bg2.f {
	background-position: -10px -64px
}

.ilm_bg2.g {
	background-position: -57px -64px
}

.ilm_bg2.h {
	background-position: -114px -64px
}

.ilm_bg2.i {
	width: 38px;
	background-position: -163px -64px
}

.ilm_bg2.j {
	background-position: -202px -64px
}

.ilm_bg2.k {
	background-position: -246px -64px
}

.ilm_bg2.l {
	background-position: -10px -128px
}

.ilm_bg2.m {
	background-position: -64px -128px
}

.ilm_bg2.n {
	background-position: -128px -128px
}

.ilm_bg2.o {
	background-position: -192px -128px
}

.ilm_bg2.p {
	background-position: -246px -128px
}

.ilm_bg2.q {
	background-position: -10px -189px
}

.ilm_bg2.r {
	background-position: -73px -189px
}

.ilm_bg2.s {
	background-position: -133px -189px
}

.ilm_bg2.t {
	background-position: -190px -189px
}

.ilm_bg2.u {
	background-position: -247px -189px
}

.ilm_bg2.v {
	background-position: -10px -244px
}

.ilm_bg2.w {
	width: 60px;
	background-position: -69px -244px
}

.ilm_bg2.x {
	background-position: -141px -244px
}

.ilm_bg2.y {
	background-position: -194px -244px
}

.ilm_bg2.z {
	background-position: -247px -244px
}

/* Number */
.ilm_bgn1 {
	width: 45px;
	height: 60px;
	background-image: url("../img/shuffled/n1.png");
	background-position: -3px -61px;
}

.ilm_bgn1.n1 {
	background-position: -29px -3px
}

.ilm_bgn1.n2 {
	background-position: -78px -3px
}

.ilm_bgn1.n3 {
	background-position: -128px -3px
}

.ilm_bgn1.n4 {
	background-position: -3px -61px
}

.ilm_bgn1.n5 {
	background-position: -54px -61px
}

.ilm_bgn1.n6 {
	background-position: -105px -61px
}

.ilm_bgn1.n7 {
	background-position: -155px -61px
}

.ilm_bgn1.n8 {
	background-position: -29px -121px
}

.ilm_bgn1.n9 {
	background-position: -81px -121px
}

.ilm_bgn1.n0 {
	background-position: -131px -121px
}

.ilm_bgn2 {
	width: 40px;
	height: 60px;
	background-image: url("../img/shuffled/n2.png");
	background-position: 0 -56px;
}

.ilm_bgn2.n1 {
	background-position: -4px 0
}

.ilm_bgn2.n2 {
	background-position: -38px 0
}

.ilm_bgn2.n3 {
	background-position: -75px 0
}

.ilm_bgn2.n4 {
	background-position: -115px 0
}

.ilm_bgn2.n5 {
	background-position: -153px 0
}

.ilm_bgn2.n6 {
	background-position: 0 -56px
}

.ilm_bgn2.n7 {
	background-position: -37px -56px
}

.ilm_bgn2.n8 {
	background-position: -79px -56px
}

.ilm_bgn2.n9 {
	background-position: -116px -56px
}

.ilm_bgn2.n0 {
	background-position: -157px -56px
}
span.ilmfailedmsg {
    color: #d10505;
}