/**
* =============================================================================
* @	file     : jssCheckbox.css
* -----------------------------------------------------------------------------
* 
* @ project  : 
* @ category : 
* @ author   : JANG SANG SEOK
* @ since    : 2021-11-03
* @ desc     : jssCheckbox - 체크박스 css
* 
* =============================================================================
*/

@charset "UTF-8";

	/**************************************************************************
	* 01. Default Checkbox
	---------------------------------------------------------------------------
	* 02. [option] 체크 아이콘 BOLD
	---------------------------------------------------------------------------	
	* 03. [option] 아웃라인 컬러
	---------------------------------------------------------------------------
	* 04. [option] 아웃라인 컬러 -> RED
	---------------------------------------------------------------------------
	* 05. [option] 백그라운드 컬러
	---------------------------------------------------------------------------
	* 06. [option] 백그라운드 컬러 -> RED
	**************************************************************************/
	
/**
| -------------------------------------------------------------------------
| @ 01. Default Checkbox
| -------------------------------------------------------------------------
*/
.jssCheckbox input[type="checkbox"] {
    display:none;
}
.jssCheckbox input[type="checkbox"] + label {
	cursor: pointer;
	margin: 0;
}
.jssCheckbox input[type="checkbox"] + label span {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #AFAFAF;
    background-color: #fff;
    margin: -2px 5px 0 0;
    vertical-align: middle;
}
.jssCheckbox input[type="checkbox"]:checked + label span {
	border: 1px solid #AFAFAF; background-color: #fff;
}
.jssCheckbox input[type="checkbox"]:checked + label span::before {
    /* 네이버 아이콘 폰트 EXIcon **/
    display: inline-block;
    font-family: 'xeicon';
	content: '\e929'; /*'\e928';**/
	font-size: 20px;
	/*font-weight: bold;**/
	color: #7F7F7F;
	line-height: 20px;
	margin: -1px 5px 0 0;
}
.jssCheckbox input[type="checkbox"]:checked + label span::after {
}

/**
| -------------------------------------------------------------------------
| @ 02. [option] 체크 아이콘 BOLD
| -------------------------------------------------------------------------
*/
.jssCheckbox.bold input[type="checkbox"]:checked + label span::before {
	font-weight: bold;
}
	
/**
| -------------------------------------------------------------------------
| @ 03. [option] 아웃라인 컬러
| -------------------------------------------------------------------------
*/
/* LIGHT **/
.jssCheckbox.light input[type="checkbox"] + label span {
	border: 1px solid #DAE0E5;
}
.jssCheckbox.light input[type="checkbox"]:checked + label span::before {
	color: #DAE0E5;
}
/* DARKGRAY **/
.jssCheckbox.darkgray input[type="checkbox"] + label span {
	border: 1px solid #535353;
}
.jssCheckbox.darkgray input[type="checkbox"]:checked + label span::before {
	color: #535353;
}
/* BLACK **/
.jssCheckbox.black input[type="checkbox"] + label span {
	border: 1px solid #000;
}
.jssCheckbox.black input[type="checkbox"]:checked + label span::before {
	color: #000;
}
/* RED **/
.jssCheckbox.red input[type="checkbox"] + label span {
	border: 1px solid #DC3545;
}
.jssCheckbox.red input[type="checkbox"]:checked + label span::before {
	color: #DC3545;
}
/* BLUE **/
.jssCheckbox.blue input[type="checkbox"] + label span {
	border: 1px solid #007BFF;
}
.jssCheckbox.blue input[type="checkbox"]:checked + label span::before {
	color: #007BFF;
}
/* PURPLE **/
.jssCheckbox.purple input[type="checkbox"] + label span {
	border: 1px solid #6F42C1;
}
.jssCheckbox.purple input[type="checkbox"]:checked + label span::before {
	color: #6F42C1;
}
/* BROWN **/
.jssCheckbox.brown input[type="checkbox"] + label span {
	border: 1px solid #A0855B;
}
.jssCheckbox.brown input[type="checkbox"]:checked + label span::before {
	color: #A0855B;
}
/* ORANGE **/
.jssCheckbox.orange input[type="checkbox"] + label span {
	border: 1px solid #FD7E14;
}
.jssCheckbox.orange input[type="checkbox"]:checked + label span::before {
	color: #FD7E14;
}
/* AQUA **/
.jssCheckbox.aqua input[type="checkbox"] + label span {
	border: 1px solid #3FC5F0;
}
.jssCheckbox.aqua input[type="checkbox"]:checked + label span::before {
	color: #3FC5F0;
}
/**
| -------------------------------------------------------------------------
| @ 04. [option] 아웃라인 컬러 -> RED
| -------------------------------------------------------------------------
*/
/* GRAY - RED **/
.jssCheckbox.gray-red input[type="checkbox"] + label span {
	border: 1px solid #AFAFAF;
}
.jssCheckbox.gray-red input[type="checkbox"]:checked + label span::before {
	color: #DC3545;
}
/* LIGHT - RED **/
.jssCheckbox.light-red input[type="checkbox"] + label span {
	border: 1px solid #DAE0E5;
}
.jssCheckbox.light-red input[type="checkbox"]:checked + label span::before {
	color: #DC3545;
}
/* DARKGRAY - RED **/
.jssCheckbox.darkgray-red input[type="checkbox"] + label span {
	border: 1px solid #535353;
}
.jssCheckbox.darkgray-red input[type="checkbox"]:checked + label span::before {
	color: #DC3545;
}
/* BLACK - RED **/
.jssCheckbox.black-red input[type="checkbox"] + label span {
	border: 1px solid #000;
}
.jssCheckbox.black-red input[type="checkbox"]:checked + label span::before {
	color: #DC3545;
}

/**
| -------------------------------------------------------------------------
| @ 05. [option] 백그라운드 컬러
| -------------------------------------------------------------------------
*/
/* LIGHT **/
.jssCheckbox.light.bg input[type="checkbox"] + label span {
	border: 1px solid #DAE0E5;
}
.jssCheckbox.light.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #DAE0E5;
}
/* GRAY **/
.jssCheckbox.gray.bg input[type="checkbox"] + label span {
	border: 1px solid #AFAFAF;
}
.jssCheckbox.gray.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #AFAFAF;
}
/* DARKGRAY **/
.jssCheckbox.darkgray.bg input[type="checkbox"] + label span {
	border: 1px solid #535353;
}
.jssCheckbox.darkgray.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #535353;
}
/* BLACK **/
.jssCheckbox.black.bg input[type="checkbox"] + label span {
	border: 1px solid #000;
}
.jssCheckbox.black.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #000;
}
/* RED **/
.jssCheckbox.red.bg input[type="checkbox"] + label span {
	border: 1px solid #DC3545;
}
.jssCheckbox.red.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #DC3545;
}
/* BLUE **/
.jssCheckbox.blue.bg input[type="checkbox"] + label span {
	border: 1px solid #007BFF;
}
.jssCheckbox.blue.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #007BFF;
}
/* PURPLE **/
.jssCheckbox.purple.bg input[type="checkbox"] + label span {
	border: 1px solid #6F42C1;
}
.jssCheckbox.purple.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #6F42C1;
}
/* BROWN **/
.jssCheckbox.brown.bg input[type="checkbox"] + label span {
	border: 1px solid #A0855B;
}
.jssCheckbox.brown.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #A0855B;
}
/* ORANGE **/
.jssCheckbox.orange.bg input[type="checkbox"] + label span {
	border: 1px solid #FD7E14;
}
.jssCheckbox.orange.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #FD7E14;
}
/* AQUA **/
.jssCheckbox.aqua.bg input[type="checkbox"] + label span {
	border: 1px solid #3FC5F0;
}
.jssCheckbox.aqua.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #3FC5F0;
}

/**
| -------------------------------------------------------------------------
| @ 06. [option] 백그라운드 컬러 -> RED
| -------------------------------------------------------------------------
*/
/* LIGHT - RED **/
.jssCheckbox.light-red.bg input[type="checkbox"] + label span {
	border: 1px solid #DAE0E5;
}
.jssCheckbox.light-red.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #DC3545;
	margin-left: -1px;
}
/* GRAY - RED **/
.jssCheckbox.gray-red.bg input[type="checkbox"] + label span {
	border: 1px solid #AFAFAF;
}
.jssCheckbox.gray-red.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #DC3545;
	margin-left: -1px;
}
/* DARKGRAY - RED **/
.jssCheckbox.darkgray-red.bg input[type="checkbox"] + label span {
	border: 1px solid #535353;
}
.jssCheckbox.darkgray-red.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #DC3545;
	margin-left: -1px;
}
/* BLACK - RED **/
.jssCheckbox.black-red.bg input[type="checkbox"] + label span {
	border: 1px solid #000;
}
.jssCheckbox.black-red.bg input[type="checkbox"]:checked + label span::before {
	color: #fff; background-color: #DC3545;
	margin-left: -1px;
}