/**
* =============================================================================
* @	file     : jssRadiobox.css
* -----------------------------------------------------------------------------
* 
* @ project  : 
* @ category : 
* @ author   : JANG SANG SEOK
* @ since    : 2021-11-03
* @ desc     : jssRadiobox - 라디오박스 css
* 
* =============================================================================
*/

@charset "UTF-8";

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

/**
| -------------------------------------------------------------------------
| @ 02. [option] 아웃라인 컬러
| -------------------------------------------------------------------------
*/
/* RED **/
.jssRadiobox.red input[type="radio"] + label span {
	border: 1px solid #DC3545;
}
.jssRadiobox.red input[type="radio"]:checked + label span::before {
	color: #DC3545;
}
/* BLUE **/
.jssRadiobox.blue input[type="radio"] + label span {
	border: 1px solid #007BFF;
}
.jssRadiobox.blue input[type="radio"]:checked + label span::before {
	color: #007BFF;
}
/* BLACK **/
.jssRadiobox.black input[type="radio"] + label span {
	border: 1px solid #000;
}
.jssRadiobox.black input[type="radio"]:checked + label span::before {
	color: #000;
}
/* LIGHT **/
.jssRadiobox.light input[type="radio"] + label span {
	border: 1px solid #DAE0E5;
}
.jssRadiobox.light input[type="radio"]:checked + label span::before {
	color: #DAE0E5;
}
/* PURPLE **/
.jssRadiobox.purple input[type="radio"] + label span {
	border: 1px solid #6F42C1;
}
.jssRadiobox.purple input[type="radio"]:checked + label span::before {
	color: #6F42C1;
}
/* BROWN **/
.jssRadiobox.brown input[type="radio"] + label span {
	border: 1px solid #A0855B;
}
.jssRadiobox.brown input[type="radio"]:checked + label span::before {
	color: #A0855B;
}
/* ORANGE **/
.jssRadiobox.orange input[type="radio"] + label span {
	border: 1px solid #FD7E14;
}
.jssRadiobox.orange input[type="radio"]:checked + label span::before {
	color: #FD7E14;
}
/* AQUA **/
.jssRadiobox.aqua input[type="radio"] + label span {
	border: 1px solid #3FC5F0;
}
.jssRadiobox.aqua input[type="radio"]:checked + label span::before {
	color: #3FC5F0;
}
/* DARKGRAY **/
.jssRadiobox.darkgray input[type="radio"] + label span {
	border: 1px solid #535353;
}
.jssRadiobox.darkgray input[type="radio"]:checked + label span::before {
	color: #535353;
}

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