/**
* =============================================================================
* @	file     : jssIconCheckbox.css
* -----------------------------------------------------------------------------
* 
* @ project  : 
* @ category : 
* @ author   : JANG SANG SEOK
* @ since    : 2021-11-03
* @ desc     : jssIconCheckbox - 아이콘 체크박스 css (NAVER XEIcon / Ionicons)
* 
* =============================================================================
*/

@charset "UTF-8";

	/**************************************************************************
	* 01. Default circle Checkbox
	---------------------------------------------------------------------------
	* 02. [option] SIZE
	---------------------------------------------------------------------------	
	* 03. [option] COLOR
	---------------------------------------------------------------------------	
	* 04. [option] OUTLINE COLOR
	**************************************************************************/
	
/**
| -------------------------------------------------------------------------
| @ 01. Default circle Checkbox
| -------------------------------------------------------------------------
*/
.jssCheckbox-iconFont { margin: 0; padding: 0; }
.jssCheckbox-iconFont input[type=checkbox] { display:none; }
.jssCheckbox-iconFont input[type=checkbox] + label:before {
	font-family: 'Ionicons'; /* 네이버 icon font - 'xeicon'; **/ /* Ionicons icon font - 'Ionicons'; **/
	display: inline-block;
	cursor: pointer;
}
.jssCheckbox-iconFont input[type=checkbox] + label { cursor:pointer; margin:0; }
/* unchecked icon */
.jssCheckbox-iconFont input[type=checkbox] + label:before { 
	content: "\f3fe"; /* 네이버 icon font - "\e92c";**/ /* Ionicons icon font - "\f3fe";**/
	font-size: 40px;
	line-height: 20px;
	color: #D9D9D9;
	vertical-align: middle;
}
.jssCheckbox-iconFont input[type=checkbox] + label:before { letter-spacing: 5px; }
/* checked icon */
.jssCheckbox-iconFont input[type=checkbox]:checked + label:before { 
	content: "\f3ff"; /* 네이버 icon font - "\e92b";**/ /* Ionicons icon font - "\f3ff";**/
	font-size: 40px;
	line-height: 20px;
	color: #FF1A1A;
	vertical-align: middle;
}
.jssCheckbox-iconFont input[type=checkbox]:checked + label:before { letter-spacing: 5px; }

/**
| -------------------------------------------------------------------------
| @ 02. [option] SIZE
| -------------------------------------------------------------------------
*/
.jssCheckbox-iconFont.xsmall input[type=checkbox] + label:before { font-size: 16px; }
.jssCheckbox-iconFont.xsmall input[type=checkbox]:checked + label:before { font-size: 16px; }

.jssCheckbox-iconFont.small input[type=checkbox] + label:before { font-size: 20px; }
.jssCheckbox-iconFont.small input[type=checkbox]:checked + label:before { font-size: 20px; }

.jssCheckbox-iconFont.normal input[type=checkbox] + label:before { font-size: 25px; }
.jssCheckbox-iconFont.normal input[type=checkbox]:checked + label:before { font-size: 25px; }

.jssCheckbox-iconFont.medium input[type=checkbox] + label:before { font-size: 30px; }
.jssCheckbox-iconFont.medium input[type=checkbox]:checked + label:before { font-size: 30px; }

.jssCheckbox-iconFont.large input[type=checkbox] + label:before { font-size: 35px; }
.jssCheckbox-iconFont.large input[type=checkbox]:checked + label:before { font-size: 35px; }

.jssCheckbox-iconFont.xlarge input[type=checkbox] + label:before { font-size: 40px; }
.jssCheckbox-iconFont.xlarge input[type=checkbox]:checked + label:before { font-size: 40px; }

.jssCheckbox-iconFont.xxlarge input[type=checkbox] + label:before { font-size: 44px; }
.jssCheckbox-iconFont.xxlarge input[type=checkbox]:checked + label:before { font-size: 44px; }

/**
| -------------------------------------------------------------------------
| @ 03. [option] COLOR
| -------------------------------------------------------------------------
*/
/* LIGHT GRAY **/
.jssCheckbox-iconFont.lightgray input[type=checkbox] + label:before { color: #DAE0E5; }
.jssCheckbox-iconFont.lightgray input[type=checkbox]:checked + label:before { color: #DAE0E5; }
/* GRAY **/
.jssCheckbox-iconFont.gray input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.gray input[type=checkbox]:checked + label:before { color: gray; }
/* DARKGRAY **/
.jssCheckbox-iconFont.darkgray input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.darkgray input[type=checkbox]:checked + label:before { color: #535353; }
/* BLACK **/
.jssCheckbox-iconFont.black input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.black input[type=checkbox]:checked + label:before { color: #000; }
/* RED **/
.jssCheckbox-iconFont.red input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.red input[type=checkbox]:checked + label:before { color: #FF1A1A; }
/* BLUE **/
.jssCheckbox-iconFont.blue input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.blue input[type=checkbox]:checked + label:before { color: #007BFF; }
/* PURPLE **/
.jssCheckbox-iconFont.purple input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.purple input[type=checkbox]:checked + label:before { color: #6F42C1; }
/* BROWN **/
.jssCheckbox-iconFont.brown input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.brown input[type=checkbox]:checked + label:before { color: #A0855B; }
/* ORANGE **/
.jssCheckbox-iconFont.orange input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.orange input[type=checkbox]:checked + label:before { color: #FD7E14; }
/* AQUA **/
.jssCheckbox-iconFont.aqua input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.aqua input[type=checkbox]:checked + label:before { color: #3FC5F0; }

/**
| -------------------------------------------------------------------------
| @ 04. [option] OUTLINE COLOR
| -------------------------------------------------------------------------
*/
/* LIGHT GRAY **/
.jssCheckbox-iconFont.lightgray.outline input[type=checkbox] + label:before { color: #DAE0E5; }
.jssCheckbox-iconFont.lightgray.outline input[type=checkbox]:checked + label:before { color: #DAE0E5; }
/* GRAY **/
.jssCheckbox-iconFont.gray.outline input[type=checkbox] + label:before { color: #D9D9D9; }
.jssCheckbox-iconFont.gray.outline input[type=checkbox]:checked + label:before { color: gray; }
/* DARKGRAY **/
.jssCheckbox-iconFont.darkgray.outline input[type=checkbox] + label:before { color: #949494; }
.jssCheckbox-iconFont.darkgray.outline input[type=checkbox]:checked + label:before { color: #535353; }
/* BLACK **/
.jssCheckbox-iconFont.black.outline input[type=checkbox] + label:before { color: #6D6D6D; }
.jssCheckbox-iconFont.black.outline input[type=checkbox]:checked + label:before { color: #000; }
/* RED **/
.jssCheckbox-iconFont.red.outline input[type=checkbox] + label:before { color: #FFA4A4; }
.jssCheckbox-iconFont.red.outline input[type=checkbox]:checked + label:before { color: #FF1A1A; }
/* BLUE **/
.jssCheckbox-iconFont.blue.outline input[type=checkbox] + label:before { color: #9ABCFA; }
.jssCheckbox-iconFont.blue.outline input[type=checkbox]:checked + label:before { color: #007BFF; }
/* PURPLE **/
.jssCheckbox-iconFont.purple.outline input[type=checkbox] + label:before { color: #DDB8FC; }
.jssCheckbox-iconFont.purple.outline input[type=checkbox]:checked + label:before { color: #6F42C1; }
/* BROWN **/
.jssCheckbox-iconFont.brown.outline input[type=checkbox] + label:before { color: #D8BB9C; }
.jssCheckbox-iconFont.brown.outline input[type=checkbox]:checked + label:before { color: #A0855B; }
/* ORANGE **/
.jssCheckbox-iconFont.orange.outline input[type=checkbox] + label:before { color: #FEDFCB; }
.jssCheckbox-iconFont.orange.outline input[type=checkbox]:checked + label:before { color: #FD7E14; }
/* AQUA **/
.jssCheckbox-iconFont.aqua.outline input[type=checkbox] + label:before { color: #CEF5FD; }
.jssCheckbox-iconFont.aqua.outline input[type=checkbox]:checked + label:before { color: #3FC5F0; }