/* BOX */
.car-box{
	display:flex; flex-direction:column;
	border-radius:6px; border:1px solid #b5b5b5; /*box-shadow:3px 3px 10px #888; position:absolute;*/
	background-color:#fff; margin:0; color:#777; font-family:Tahoma; font-size:1em; 
	position:absolute;
}

	.car-box.car-shadow{box-shadow:3px 3px 10px #888;}

	.car-box .car-bar{
		order:1; display:flex; flex-direction:row; align-items:center; flex-wrap:nowrap; flex-shrink:0;
		color:#555; font-weight:bold; background-color:#fff; border-top-left-radius:6px; border-top-right-radius:6px; 
		-webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none;   /* Chrome/Safari/Opera */
		-khtml-user-select: none;    /* Konqueror */
		-moz-user-select: none;      /* Firefox */
		-ms-user-select: none;       /* Internet Explorer/Edge */
		user-select: none;           /* Non-prefixed version, currently not supported by any browser */
	}
		.car-box .car-bar.car-collapsed {border-radius:6px; border-bottom:none;}
		.car-box .car-bar .car-bar-content{flex-grow:1; flex-wrap:nowrap; overflow:hidden; padding:10px; font-size:1.2em; }
		.car-box .car-bar .car-bar-content *{white-space:nowrap;}

		.car-box .car-bar .car-cmd{display:flex; align-items:center; flex-shrink:0; padding:5px; align-self:flex-start;}
		.car-box .car-bar .car-cmd > *:not(:last-child) {margin-right:4px;}
		.car-box .car-bar .car-cmd a{text-decoration:none; cursor:pointer; font-size:1.3em;}

	.car-box .car-header{order:2; padding:10px; border-bottom:1px dotted #ccc; background-color:#f9f9f9; }
	.car-box .car-content{order:3; padding:10px; overflow:auto !important; background-color:#FFF; flex-grow:1; flex-shrink:1;}

	.car-box .car-footer{order:4; padding:10px; display:flex; flex-shrink:0; flex-grow:0; overflow:hidden; border-top:1px solid #ddd;}
	/* Workaround for padding issue with flexbox 
	.car-box .car-footer > div{padding:10px;} 
		*/

	.car-box.car-resize{-webkit-box-shadow:0 0 9px 2px #666; -moz-box-shadow: 0 0 9px 2px #666; box-shadow: 0 0 9px 2px #CDCD9E;}
	.car-box.car-resize-hover{-webkit-box-shadow: 0 0 9px 2px #999; -moz-box-shadow: 0 0 9px 2px #999; box-shadow: 0 0 9px 2px #ccc;}
	.car-box-ph{border:dashed 3px #ccc; height:15px; }

	.car-box .car-b-radius{border-bottom-left-radius:6px; border-bottom-right-radius:6px; }
	.car-box .car-t-radius{border-top-left-radius:6px; border-top-right-radius:6px; }

/* http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_bottom */
.car-box-modal {
	display:none; position:fixed; z-index:1; left:0; top:0; width:100%; height:100%; overflow:auto; background-color:rgb(0,0,0); background-color:rgba(0,0,0,0.4); 
	-webkit-animation-name: fadeIn; -webkit-animation-duration: 0.4s; animation-name: fadeIn; animation-duration: 0.4s}

/* Box styles */
.car-box.box-system{}
.car-box.box-system .car-bar{background-color:#eaeaea; border-bottom:1px solid #ddd;}
.car-box.box-system .car-bar .car-bar-content{padding:5px; font-size:1.2em; }
.car-box.box-system .car-bar .car-cmd{align-self:flex-start; line-height:1;}
.car-box.box-system .car-bar .car-cmd a{font-size:1.2em;}
.car-box.box-system .car-content{padding-left:15px;}

.car-box-pop{background-color:transparent; padding:0; border:none; }
.car-box-pop .car-content{padding:0;}
.car-box-pop .car-panel{margin:0;}