/* Flexbox */

div.flexbox
{
	width: 100%;
	padding-top:0 !important;
	padding-right:0.5% !important;
	padding-bottom:0 !important;
	padding-left:0.5% !important;
	box-sizing: border-box;
}

div.flexbox header,
div.flexbox footer
{
	position:relative;
	width:100%;
	height:32px;
	color:#333;
	text-align:left;
	border:1px solid #999;
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
}

div.flexbox header
{
	margin-top:8px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	box-shadow: 5px 5px 5px #bbb;
}

div.flexbox header a.refresh_btn
{
	float:left;
	margin:6px 10px 0px 10px;
}

div.flexbox header a.refresh_btn:hover
{
	color:#4b9bce;
	transition: all 0.2s linear;
}

div.flexbox header img.icon
{
	margin:6px 0 0 10px;
}

div.flexbox header a.flexhbmenubtn
{
	display:none;
	float:left;
	margin:6px 5px 0 5px;
}

div.flexbox header h5
{
	display:inline;
	float:left;
	font-size:18px;
	margin:4px 0 0 0;
	white-space:nowrap;
	line-height:18px;
}

div.flexbox header h5 a
{
	color:#bbb;
	font-size:12px;
	padding:0px 5px 0 5px;
	border-right:1px dotted #bbb;
}

div.flexbox header h5 a:first-child
{
	padding-left:5px;
}

div.flexbox header h5 a.active
{
	color:#333;
	padding-left:3px;
}

div.flexbox header h5 a:last-child
{
	border-right:0;
}

div.flexbox header div.flexhead_nav
{
	display:inline-block;
	float:right;
	text-align:right;
	width:auto;
	height:25px;
	overflow:hidden;
	margin:5px 10px 0 0;
	padding:0;
}

div.flexbox header div.flexhead_nav a
{
	margin-left:6px;
}

div.flexbox header div.flexhead_nav a.left_arrow
{
	margin-left:16px;
}

div.flexbox header div.flexhead_nav > a:hover
{
	color:#4b9bce;
	transition: all 0.2s linear;
}

div.flexbox header div.flexhead_nav select
{
	position:relative;
	font-size:12px;
	height:22px;
}

div.flexbox footer div.record_count
{
	float:right;
	margin:8px 8px 0 0;
	font-size:12px;
}

div.flexbox footer div.record_count span.sum
{
	position:relative;
	display:inline-block;
	top:-2px;
	font-size:10px;
	margin-right:4px;
}

div.flexbox section.flexsection
{
	position:relative;
	width:100%;
	border-left: 1px solid #999;
	border-right: 1px solid #999;
	background:#fff;
	overflow:auto;
	box-shadow: 5px 5px 5px #bbb;
}

div.flexbox footer
{
	position:relative;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
	box-shadow: 5px 5px 5px #bbb;
}

/* flexbox hamburger menu */

ul.flexhbmenu {
	position:absolute;
	top:36px;
	left:0px;
	width:200px;
	list-style:none;
	padding:0;
	margin:0;
	border-radius:4px;
	box-shadow:2px 2px 2px #bbb;
	z-index:999999;
}

ul.flexhbmenu li
{
	float:left;
	width:198px;
	height:24px;
	background: #fff;
	border:1px solid #bbb;
	cursor:pointer;
	text-align:left;
	transition: all 0.2s linear;
	white-space:nowrap;
}

ul.flexhbmenu li.divider_top{
	border-top:1px solid #BBBBBB;
	margin-top:0px;
}

ul.flexhbmenu li.divider_top:hover{
	background: #fff;
	cursor:default;
}

ul.flexhbmenu li.divider_top span{
	position:relative;
	bottom:-3px;
	left:3px;
	font-size:12px;
	font-weight:bold;
}

ul.flexhbmenu li:hover
{
	background: #efefef;
}

ul.flexhbmenu li a
{
	position:relative;
	display:block;
	padding:5px 0 0 30px;
	font-size:12px;
	transition: all 0.2s linear;
}

ul.flexhbmenu li.active
{
	background:#1C79C6;
}

ul.flexhbmenu li.active a
{
	color:#fff;
}

ul.flexhbmenu li a i
{
	position:absolute;
	top:6px;
	left:4px;
}

ul.flexhbmenu.arrow_box:after,
ul.flexhbmenu.arrow_box:before{
	left:24%;
}

/* arrow box */

.arrow_box {
	position: relative;
	background: #BBBBBB;
	border: 0px solid #bbb;
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow_box:after {
	border-color: rgba(187, 187, 187, 0);
	border-bottom-color: #BBBBBB;
	border-width: 10px;
	margin-left: -10px;
}
.arrow_box:before {
	border-color: rgba(187, 187, 187, 0);
	border-bottom-color: #bbb;
	border-width: 11px;
	margin-left: -11px;
}

/* media queries */

@media screen and (max-width: 680px) {
	div.flexbox header a.flexhbmenubtn
	{
		display:inline-block;
	}
	div.flexbox header h5 a{
		display:none;
	}
	div.flexbox header h5 a.active{
		display:inline;
		border:0;
	}
}