@charset "utf-8";

/*
	XGUI-Web CSS
	Page Control (tabs) Components
	------------------------------
*/

div[xgPageControl] [xgTabItems] {
	color: #333;		
	height: 30px;
	height: 3rem;
	margin-top: 0;
	list-style: none;
 	padding-left: 0;
	margin-bottom: 0;	
	border-bottom: 1px #60ABD6 solid;
	border-bottom: 0.1rem #60ABD6 solid;	
}

div[xgPageControl] [xgTabItems] [xgTabItem] {
	float: left;
	cursor: pointer;
	display: block;		
	min-width: 120px;
	min-width: 12rem;	
	font-weight: 500;	
	font-size: 13px;
	font-size: 1.3rem;
	text-align: center;
	position: relative;
	padding: 5px 15px;	
	padding: 0.5rem 1.5rem;	
	padding-bottom: 0;
	color: rgba(51, 51, 51);	
	border-radius: 4px;
	border-radius: 0.4rem;		
	border-top: 4px solid;
	border-top: 0.4rem solid;	
  	border-top-color: rgb(255, 255, 255);	
	border-color: rgb(255, 255, 255, 0);	
	background-color: rgb(255, 255, 255);
}

div[xgPageControl] [xgTabItems] [xgTabItem][xgListContent] {
	display: none;
}

[xgTabItemContent] {
	padding: 10px;
	padding: 1rem;
	display: block;
}

[xgTabItemContent]:not([xgTabState="active"]) {
	display: none;
}

div[xgPageControl] [xgTabItems] [xgTabState="active"] {
	border-color: rgb(96, 171, 214);	
}

div[xgPageControl] [xgTabItems] *:not([xgTabState="active"]):hover,
div[xgPageControl] [xgTabItems] *:not([xgTabState="active"]):focus,
div[xgPageControl] [xgTabItems] *:not([xgTabState="active"]):active {
	border-color: rgb(244, 146, 96);
}