/**
* =============================================================================
* @	file     : jssLabel.css
* -----------------------------------------------------------------------------
* 
* @ project  : 
* @ category : 
* @ author   : JANG SANG SEOK
* @ since    : 2021-11-03
* @ desc     : jssLabel - 라벨 css
* 
* =============================================================================
*/

@charset "UTF-8";

	/**************************************************************************
	* 01. JSS OUTLINE LABEL [.jss-outline-label]
	---------------------------------------------------------------------------
	* 02. JSS LABEL [.jss-label]
	---------------------------------------------------------------------------	
	* 03. 
	**************************************************************************/
	
	/**
	| -------------------------------------------------------------------------
	| @ 01. JSS OUTLINE LABEL [.jss-item-label]
	| -------------------------------------------------------------------------
	*/
	.jss-outline-label {
		min-width: 44px;
		height: 18px;
		line-height: 18px;	
		background-color: #fff;
		color: #000;
	    border: 1px solid #000;
	    display: inline-block;
	    vertical-align: middle;
	    margin: 1px;
	    padding: 0;
	    padding-left: 6px; 
	    padding-right: 6px;
	    box-sizing: border-box;
	    text-align: center;
	    font-size: 11px;
	    font-family: "돋움", Dotum;
	}
	
	/* 라벨 사이즈 **/
	.jss-outline-label.xxsmall {
		height: 17px; line-height: 17px; font-size: 10px;	
	}
	.jss-outline-label.xsmall {
		height: 18px; line-height: 18px; font-size: 11px;	
	}
	.jss-outline-label.small {
		height: 20px; line-height: 20px; font-size: 11px;	
	}
	.jss-outline-label.normal {
		height: 22px; line-height: 22px; font-size: 11px;	
	}
	.jss-outline-label.medium {
		height: 24px; line-height: 24px; font-size: 11px;	
	}
	.jss-outline-label.large {
		height: 26px; line-height: 26px; font-size: 12px;
	}
	.jss-outline-label.xlarge {
		height: 28px; line-height: 28px; font-size: 13px;	
	}
	.jss-outline-label.x2xlarge {
		height: 30px; line-height: 30px; font-size: 13px;	
	}
	.jss-outline-label.x3xlarge {
		height: 32px; line-height: 32px; font-size: 13px;	
	}
	.jss-outline-label.x4xlarge {
		height: 34px; line-height: 34px; font-size: 13px;	
	}
	.jss-outline-label.x5xlarge {
		height: 36px; line-height: 36px; font-size: 13px;	
	}
	.jss-outline-label.x6xlarge {
		height: 38px; line-height: 38px; font-size: 14px;	
	}
	.jss-outline-label.x7xlarge {
		height: 40px; line-height: 40px; font-size: 14px;	
	}
	.jss-outline-label.x8xlarge {
		height: 42px; line-height: 42px; font-size: 15px;	
	}
	.jss-outline-label.x9xlarge {
		height: 44px; line-height: 44px; font-size: 15px;	
	}
				
	/* 라벨 색상 **/
	.jss-outline-label.black 	{ color: #000; border: 1px solid #000; }
	.jss-outline-label.gray 	{ color: gray; border: 1px solid gray; }
	.jss-outline-label.lightgray{ color: gray; border: 1px solid #c7c7c7; }
	.jss-outline-label.brown 	{ color: #A52A2A; border: 1px solid #A52A2A; }
	.jss-outline-label.red 		{ color: #DA0106; border: 1px solid #DA0106; }
	.jss-outline-label.wine 	{ color: #C01B61; border: 1px solid #C01B61; }
	.jss-outline-label.orange 	{ color: #F7602D; border: 1px solid #F7602D; }
	.jss-outline-label.pink 	{ color: #E90CC2; border: 1px solid #E90CC2; }
	.jss-outline-label.blue 	{ color: #095CE8; border: 1px solid #095CE8; }
	.jss-outline-label.lightblue { color: #87CEFA; border: 1px solid #87CEFA; }
	.jss-outline-label.navy 	{ color: #222D8C; border: 1px solid #222D8C; }
	.jss-outline-label.purple 	{ color: #8C1DC9; border: 1px solid #8C1DC9; }
	.jss-outline-label.gold 	{ color: #D1A907; border: 1px solid #D1A907; }
	.jss-outline-label.yellow 	{ color: #F5EA07; border: 1px solid #F5EA07; }
	.jss-outline-label.green 	{ color: #008000; border: 1px solid #008000; }
	.jss-outline-label.lightgreen { color: #94D6DA; border: 1px solid #94D6DA; }

	/**
	| -------------------------------------------------------------------------
	| @ 02. JSS LABEL [.jss-label]
	| -------------------------------------------------------------------------
	*/
	.jss-label {		
		min-width: 55px;		
		height: 18px;
		line-height: 18px;	
		display: inline-block;
		vertical-align: middle;
		margin: 1px;
		background-color: #2A96FF;
		border: 0px solid #000;
		color: #fff;
	    padding: 0;
	    padding-left: 8px; 
	    padding-right: 8px;		
		box-sizing: border-box;
		font-size: 11px;
		text-align: center;
		font-family: "돋움", Dotum;
	}
	
	/* 라벨 사이즈 **/
	.jss-label.xxsmall {
		height: 18px; line-height: 18px; font-size: 10px;	
	}
	.jss-label.xsmall {
		height: 20px; line-height: 20px; font-size: 11px;	
	}
	.jss-label.small {
		height: 22px; line-height: 22px; font-size: 11px;	
	}
	.jss-label.normal {
		height: 24px; line-height: 24px; font-size: 11px;	
	}
	.jss-label.medium {
		height: 26px; line-height: 26px; font-size: 11px;	
	}
	.jss-label.large {
		height: 28px; line-height: 28px; font-size: 12px;	
	}
	.jss-label.xlarge {
		height: 30px; line-height: 30px; font-size: 12px;	
	}
	.jss-label.x2xlarge {
		height: 32px; line-height: 32px; font-size: 13px;	
	}
	.jss-label.x3xlarge {
		height: 34px; line-height: 34px; font-size: 14px;	
	}
	.jss-label.x4xlarge {
		height: 36px; line-height: 36px; font-size: 14px;	
	}
	.jss-label.x5xlarge {
		height: 38px; line-height: 38px; font-size: 14px;	
	}
	.jss-label.x6xlarge {
		height: 40px; line-height: 40px; font-size: 14px;	
	}
	.jss-label.x7xlarge {
		height: 42px; line-height: 42px; font-size: 15px;	
	}
	.jss-label.x8xlarge {
		height: 44px; line-height: 44px; font-size: 15px;	
	}
	.jss-label.x9xlarge {
		height: 46px; line-height: 46px; font-size: 15px;	
	}
	
	/* 라벨 width 사이즈 **/
	.jss-label.w-small   { min-width: 60px;  }
	.jss-label.w-normal  { min-width: 80px;  }
	.jss-label.w-medium  { min-width: 100px; }
	.jss-label.w-large   { min-width: 120px; }
	.jss-label.w-xlarge  { min-width: 140px; }
	.jss-label.w-xxlarge { min-width: 160px; }
	
	/* 라벨 색상 **/
	.jss-label.black 	{ background-color: #000000; }
	.jss-label.blue 	{ background-color: #007BFF; }
	.jss-label.aqua 	{ background-color: #3FC5F0; }
	.jss-label.red 		{ background-color: #DC3545; }
	.jss-label.pink		{ background-color: #ee0bb6; }
	.jss-label.green	{ background-color: #41ba56; }	
	.jss-label.light 	{ background-color: #DAE0E5; }
	.jss-label.gray 	{ background-color: #b5b5b5; }
	.jss-label.lightgray{ background-color: #dbdbdb; }
	.jss-label.darkgray { background-color: #535353; }
	.jss-label.orange 	{ background-color: #ff6226; }
	.jss-label.purple 	{ background-color: #ac06b0; }
	.jss-label.brown 	{ background-color: #A0855B; }
	.jss-label.yellow 	{ background-color: #e6bf0d; }