@charset "UTF-8";

/* 
	text validate design 

	[ statue - valid example html source ]
	
	<div class="o2o-validate-text valid" style="display:none">
		<span class="icon"><i class="fa fa-check-circle" aria-hidden="true"></i></span>
		<span class="text">사용할 수 있는 닉네임입니다.</span>
	</div>
	
	------------------------------------------------------------------------------------
	
	[ statue - invalid example html source ]
	
	<div class="o2o-validate-text invalid" style="display:none">
		<span class="icon"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
		<span class="text">이미 사용중인 닉네임입니다.</span>
	</div>
*/

.o2o-validate-text {
	display:flex;
	justify-content:flex-start;
	width:100%;
	margin-top:8px;
	word-wrap:break-word;
	word-break:keep-all;
}
	.o2o-validate-text .text,
	.o2o-validate-text .icon {
		display:block;
		width:auto;
		font-size:0.8rem;
		font-weight:600;
	}
	
	.o2o-validate-text .icon { margin-right:7px; }
	
	.o2o-validate-text.valid .text,
	.o2o-validate-text.valid .icon { color:#3cb371; }
	
	.o2o-validate-text.invalid .text,
	.o2o-validate-text.invalid .icon  { color:#f00; }
	
/* input validate design */
.o2o-validate-input.valid,
.o2o-validate-input.valid:focus  { outline:none; border:1px solid #3cb371 !important; }

.o2o-validate-input.invalid,
.o2o-validate-input.invalid:focus { outline:none; border:1px solid #f00 !important; }