/*
 *  ---------------------------------------
 *  ---------- TABLE OF CONTENTS ----------
 *  ---------------------------------------
 *  
 *  0.  RESET STYLES
 *  1.  GENERAL LAYOUT
 *  2.  LEFT PANEL
 *      - 2.1 NAVIGATION STYLES
 *  3.  LEFT PANEL COLLAPSED
 *  4.  MAIN PANEL
 * 
 *  100. MEDIA QUERIES
 *  
 */



/*************************************/
/********** 0. RESET STYLES **********/
/*************************************/
/* temporary, for demo purposes only */

body {
	background: #1d2939;
	font-family: calibri, Arial, Helvetica, sans-serif !important;
	line-height: 1;
	color: #636e7b;
}
a:focus, a:active { outline: none; }


.wrapper { background-color: #fff; }

/***********************************************/
/************ 1. GENELAL LAYOUT ****************/
/***********************************************/
/* left panel collapsed w=60, expanded w=320   */


/* helper classes for js */
.leftpanel-collapsed .leftpane_widelinner   { max-width: 70px; }

.pr_collapsed { padding-right: 70px !important;} 
/*
#body.member .db_container.pr_collapsed { padding-right: 0px !important; }
*/
.pr_expanded { padding-right: 320px !important;} 
.extend_leftpane_widelinner {
  max-width: 320px !important;
}
    @media screen and (max-width:992px){
        .pr_collapsed {
            padding-right: 62px !important;
        }
}
/* helper classes for js - end */





#body.member {
  left: -10px;
}
.leftpanel-collapsed #body.member {
  left: 0px;
}


.leftpanel {
	width: 320px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	background-color: #fff;
	background-color: transparent;
	z-index: 100;

			-moz-transition: all 0.2s ease-out 0s;
			-webkit-transition: all 0.2s ease-out 0s;
			transition: all 0.2s ease-out 0s;

}

.leftpanel,
.leftpanel-collapsed {
	left: 0;
	top: 72px !important; /* push dow to match fixed header */
}

.leftpanel.leftpanel-top {
    top: 0px !important;
}

.leftpanel .leftpane_widelinner {
    ___background-color: rgba(0,0,255,0.25);
    position: absolute;
    width: 100%;
    top: 0px;
    bottom: 0px;
    left: 0px;
    overflow: auto;
	-ms-overflow-style: none; /* IE */ 
	overflow: -moz-scrollbars-none; /* FF */
}
.leftpanel .leftpane_widelinner::-webkit-scrollbar { width: 0 !important; /* Chrome */ } 
.leftpanel-collapsed .leftpane_widelinner {
    ___background-color: rgba(0,255,0,0.25);

    position: absolute;
    width: 320px;
    top: 0px;
    bottom: 0px;
    left: 0px;
    overflow: auto;
	-ms-overflow-style: none; /* IE */ 
	overflow: -moz-scrollbars-none; /* FF */
}
.leftpanel-collapsed .leftpanelinner {
    ___border: 1px dashed orange !important;
        width: 320px;
        padding-right: 10px;

}

.leftpanel .leftpanelinner {
    ___border: 1px dashed #666;
    width: 100%;
	position: absolute;
	overflow: auto;
    overflow-x: hidden;

	padding-right: 10px;
	___background-color: rgba(128,0,128,0.5);
	background-color: transparent;

}


.leftpanel-collapsed .mainpanel {
	margin-left: 60px; /* has to match leftpanel collapsed width */
}

.leftpanel-collapsed .leftpanel {
	width: 60px;
}
body.leftpanel-collapsed .leftpanel,
body:not(.leftpanel-collapsed) .leftpanel ul,
body:not(.leftpanel-collapsed) .profilesummary {
	box-shadow: 2px 0px 2px rgba(0,0,0,0.1);
}
.leftpanel .profilesummary {
	margin-left: 60px ;
}
.leftpanel-collapsed .nav-bracket li a {
	height: 60px; 

}

.leftpanel-collapsed .nav-bracket > li > a > span:last-child { /* collapsed (expanded text) on icon hover */
	position: absolute;
	left: 60px;
	top: 0px;
	min-width: 250px;
	height: 60px; 
	z-index: 100;
}
.leftpanel-collapsed .nav-bracket li.nav-hover ul { /* collapsed > subnav panel */
	display: block;
	position: absolute;
	top: 60px;
	left: 60px;
	min-width: 260px;
	z-index: 100;
}
.menutoggle {
	float: left;
	height: 60px;
	max-height: 60px;
}
.leftpanel .menutoggle {
	max-width: 310px;
}
.leftpanel-collapsed .menutoggle {
	max-width: 60px;
}

.mainpanel {
	margin-left: 320px;
}
.contentpanel {
	position: relative;
}
.contentpanel::after {
	clear: both;
	display: block;
	content: '';
}









/***********************************/
/********** 2. LEFT PANEL **********/
/***********************************/

.leftpanel .leftpanelinner {
    ___background-color: #ccc;

}
.leftpanel ul li { margin-left: 0px; line-height: 1;}

.leftpanel .nav-stacked > li + li,
.leftpanel .nav-pills > li + li { margin-top: 0 !important;}

		/***** MENU TOGGLE *****/
		.menutoggle {
			width: 100%;
			max-width: 310px;
			padding: 20px 24px !important;
			font-size: 22px !important;
			cursor: pointer;
			color: #ccc;
		}
		.menutoggle:before { content: "«"; /* \00d7 - times*/  font-size: 20px;}
		.menutoggle.menu-collapsed:before { content: "»"; /* \237 - angle quotation mark, right */ text-align: center;}
		.menutoggle:hover {
			color: #666;
			background-color: #eee;
		}
		.menutoggle .fa,
		.menutoggle .glyphicon,
		.menutoggle [class^="icon-"] {
			margin: 14px 0 0 15px;
		}
		/***** MENU TOGGLE - end *****/




.leftpanel * { font-size: 14px !important; font-weight: 800; }











.leftpanel .profilesummary {
	margin-right: 10px ;
}

/* >>>>>>>>>>>>>>>> Active <<<<<<<<<<<<<<<<< */
.leftpanel .nav-bracket > li.active:after,
.leftpanel .nav-bracket > li.active > a > span:after {
		right: -20px;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		___border-color: rgba(255, 0, 0, 0);
		border-left-color: #dc442b;
		border-width: 10px;
		margin-top: -10px;
	}





/***** 2.1 NAVIGATION STYLES *****/


.sidebartitle {
	font-size: 11px;
	text-transform: uppercase;
	color: #999;
	margin-bottom: 10px;
}

.nav-bracket {
	margin-bottom: 30px;
}

.nav-bracket > li > a {
	color: #666;
	padding: 20px 20px 20px 0px;
}

.nav-bracket > li > a:hover,
.nav-bracket > li > a:active,
.nav-bracket > li > a:focus {
	background-color: #fff;
	color: #666;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-decoration: underline !important;
}

.nav-bracket > li > a:hover i,
.nav-bracket > li > a:focus i {
	color: #666 !important;
}



.nav-bracket > li.nav-parent > a {
	background: transparent url(../images/plus-white.png) no-repeat 92% center; 
}

.nav-bracket > li.nav-parent > a:focus {
	background-color: none;
	color: #8F939E;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.nav-bracket > li.nav-parent > a:hover,
.nav-bracket > li.nav-parent > a:active {
	color: #1d2939;
	background-color: #fff;
	background-image: url(../images/plus.png);
}

.nav-bracket > li.nav-active > a {
	background-color: #fff;
	background-image: url(../images/minus.png);
	color: #1d2939;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.nav-bracket > li.nav-active > a:hover {
	background-image: url(../images/minus.png);
	background-repeat: no-repeat;
}

.nav-bracket > li.nav-active > a:focus {
	color: #1d2939;
}

.nav-bracket > li.active > a,
.nav-bracket > li.active > a > i,
.nav-bracket > li.active > a:hover,
.nav-bracket > li.active > a:focus {
	color: #fff !important;
	text-decoration: none;
	cursor: default;
}



.nav-bracket > li.nav-parent.active > a {
	background-image: url(../images/plus.png); 
}

.nav-bracket > li.nav-active.active > a {
	background-image: url(../images/minus.png); 
}

.nav-bracket > li.nav-active.active > a:hover {
	background-image: url(../images/minus.png); 
}

.nav-bracket li .fa,
.nav-bracket li .glyphicon,
.nav-bracket li a i[class^="icon-"]
{
	position: relative;
	z-index: 101;
	font-size: 16px;
	vertical-align: middle;
	width: 20px !important;
	height: 20px !important;
	text-align: center;
	color: #ccc;
}
.nav-bracket li a i[class^="icon-"]:before {
	font-size: 20px;
	vertical-align: middle;
	_margin-right: 20px;
	min-width: 20px !important;
	height: 20px !important;
	padding: 0 20px !important;
	text-align: center;
	line-height: 1;
}
.leftpanel .nav-bracket > li > a > span:last-child,
.leftpanel .nav-bracket > li.active > a > span:last-child { position: absolute; top: 41% !important;}
.leftpanel-collapsed .nav-bracket > li > a > span:last-child,
.leftpanel-collapsed .nav-bracket > li.active > a > span:last-child { 
	position: absolute; 
	left: 0px;
	top: 0px !important; 
	padding-top: 24px !important;
	border: 1px solid #ddd;
	border-left: none;
	white-space: nowrap !important;
}
.leftpanel-collapsed .nav-bracket > li.active > a > span:last-child { border: none; };

.nav-bracket > li > a > .badge {
	margin-top: 2px;
}

.nav-bracket .children {
	list-style: none;
	display: none;
	margin: 0 0 0 35px;
	padding: 0;
}

.nav-bracket .children > li > a {
	color: #94989d;
	font-size: 13px;
	display: block;
	padding: 5px 0 5px 30px;
	/*
	-moz-transition: all 0.2s ease-out 0s;
	-webkit-transition: all 0.2s ease-out 0s;
	transition: all 0.2s ease-out 0s;
	*/
}

.nav-bracket .children > li > a > span {
	margin-top: 30px;
}



.nav-bracket .children > li .fa 
.nav-bracket .children > li [class^="icon-"] {
	font-size: 12px;
	opacity: 0.75;
	margin-right: 5px;
	text-align: left;
	width: auto;
	vertical-align: baseline;
}



.nav-bracket .children ul {
	margin-left: 12px;
	border: 0;
}




/********** 3. LEFT PANEL COLLAPSED **********/
/**********************************************/

.leftpanel.animate,
.leftpanel-collapsed.animate {
	/*
	-moz-transition: width 0.1s linear 0s;
	-webkit-transition: width 0.1s linear 0s;
	transition: width 0.1s linear 0s;
	*/
}
.leftpanel .nav-pills > li > a {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  text-decoration: none;
  ___border-top: 1px solid #ccc;
  background: url(/img/bckg_dot_1x1_ccc.gif) repeat-x top;
}
.leftpanel .nav-pills > li.active > a {
	background: #dc442b url(/img/bckg_dot_1x1_ccc.gif) repeat-x top;
}




.leftpanel-collapsed .leftpanelinner {
	padding: 0;
}
.leftpanel-collapsed .leftpanelinner .sidebartitle {
	display: none;
}
.leftpanel-collapsed .nav-bracket {
	margin: 0px;   
}
.leftpanel-collapsed .nav-bracket li a {
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	padding: 20px 20px 20px 0px;
	position: relative;
	max-width: 60px;
}

	/* >>>>>>>>>>>>>> ARROW >>>>>>>>>>>>>>>>> */
	.leftpanel-collapsed .nav-bracket li.active a:after {
			right: -20px;
			top: 21px; /* 50% */
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-left-color: #dc442b;
			border-width: 10px;
		}
	.leftpanel-collapsed .nav-bracket li.active:after {
		border: none;
	}



.leftpanel-collapsed .nav-bracket > li.nav-parent > a { /* collapsed - item with subnav */
	background-image: none;
}
.leftpanel-collapsed .nav-bracket > li > a > span:last-child { /* collapsed (expanded text) on icon hover */
	background: #fff;
	padding: 20px 10px 10px 0px;
	text-align: left;
	text-decoration: underline;
	color: #666;
	display: none;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}
.leftpanel-collapsed .nav-bracket > li > a .badge {
	display: none;
}
.leftpanel-collapsed .nav-bracket > li.active > a > span:last-child { /* collapsed - expanded text of an item */
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
	color: #fff !important;
	background-color:#dc442b !important; /* afbs - dashboard red */
}
.leftpanel-collapsed .nav-bracket ul {
	display: none;
}
.leftpanel-collapsed .nav-bracket > li.nav-hover > a { /* collapsed icon on hover */
	background: #fff url(/img/bckg_dot_1x1_ccc.gif) repeat-x top !important;
	color: #666;
}
.leftpanel-collapsed .nav-bracket > li.nav-hover.active > a { /* collapsed on active icon hover */
	background: #dc442b !important; /* afbs - dashboard red */
	color: #fff;
}


/* ************************************************************ */

.leftpanel ul.nav li.nav-hover a  { 
	text-decoration: none !important;
}
.leftpanel .nav-bracket li > a > span { 
	padding-left: 0px !important;
}

.leftpanel .nav-bracket li.nav-hover > a > span { 
	padding-left: 0px !important; /* all other browsers */
}
.leftpanel-collapsed .leftpanel .nav-bracket li.nav-hover > a > span { 
	padding-left: 60px !important; /* all other browsers */
}
/* for [if IE] */

#body:not(.leftpanel-collapsed) .leftpanel .nav-bracket li.nav-hover > a > span { 
		padding-left: 60px !important; /* IE (tested on IE11) */
}
.leftpanel-collapsed .leftpanel .nav-bracket li.nav-hover > a > span { 
		_padding-left: 0px !important; /* IE (tested on IE11) */
}

/* ************************************************************ */




.leftpanel .nav-bracket > li.nav-hover > a > span:last-child,
.leftpanel-collapsed .nav-bracket > li.nav-hover > a > span:last-child {	
	text-decoration: underline !important;
}

.leftpanel-collapsed .nav-bracket > li.nav-hover > a > span:last-child {
    display: block;    
}
.leftpanel-collapsed .nav-bracket > li.nav-hover.active > a > span:last-child { /* collapsed on active icon hover > expanded text */
	text-decoration: none !important;
	background: #fff;
	color: #666;
}
.leftpanel-collapsed .nav-bracket li.nav-hover ul { /* collapsed > subnav panel */
	margin: 0;
	padding-left: 20px;
	background: #fff;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}
.leftpanel-collapsed .nav-bracket ul a {
	text-align: left;
	padding: 6px 10px;
	padding-left: 60px;
}
.leftpanel-collapsed .nav-bracket ul a:hover {
	background: none;
}
.leftpanel-collapsed .nav-bracket li a i {
	margin-right: 0;
}
.leftpanel-collapsed .sticky-leftpanel {
	overflow-y: visible;
}
.leftpanel-collapsed .nav-bracket .children {
	display: none;
}
.leftpanel-collapsed .profilesummary {
	display: none;
}



	/*  *** Account data section ***  */
		.leftpanel-collapsed  #account_data {
			display: none;
		}
		.leftpanel  #account_data {
			display: block;
		}
		.leftpanel  .extended #account_data {
			display: none;
		}
		.leftpanel  #account_data {
		}
		.leftpanel  #account_data [class^="data_"] {
			padding-top: 24px;
			color: #666 !important;
		}
		.leftpanel  #account_data .profile_pic { 
			border-radius: 50%; 
			border: 1px solid #ccc; 
		}
		.profile_container {
			position:relative;
			width:144px;
			height:144px;
		}
		.profile_container .profile_remove {
			position: absolute;
			top:0;
			right:0;
			cursor: pointer;
			display: block;
		}
		.profile_container.userAvatar:hover .profile_remove {
			display: block;
		}

		/*
		.leftpanel  #account_data a i.icon-pic {
			display: inline-block;
		}
		.leftpanel  #account_data a i.icon-pic:before { 
			padding: 0 10px 0 0 !important;
		}
		*/

		.leftpanel  #account_data span.glyphicon.icon-pic {
			display: inline-block;
		}
		.leftpanel  #account_data span.glyphicon.icon-pic:before { 
			padding: 0 10px 0 0 !important;
		}

		.leftpanel  #account_data a { color: #dc442b;}
		
		.leftpanel  #account_data .data_picture {padding-top: 0px;}
		.leftpanel  #account_data .data_picture .btn { padding-left: 0;}
		.leftpanel  #account_data .data_picture .icon-pic { margin-left: -6px;}

		.leftpanel  #account_data [class^="data_"] p {
			margin: 0;
			padding: 0;
		}
		.leftpanel  #account_data [class^="data_"] span.label { 
			padding-left: 0;
			color: #666; 
			font-weight: 400;
		}
		.leftpanel  #account_data [class^="data_"] span.data { 
			color: #666; 
			font-weight: 800;
		}
		.leftpanel  #account_data .data_member_name p  {
			_margin-top: 24px;
		}
		.leftpanel  #account_data .data_member_name span.data  {
			color: #dc442b; 
			margin-top: 48px;
		}
		.leftpanel  #account_data .data_coverage {
			margin: 24px 0 0px !important;
			padding: 24px 0;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
			font-weight: 600;
		}
		.leftpanel  #account_data div.offer p {
			color: #dc442b  !important;
		}
		.leftpanel  #account_data p.level span>a {
			color: #666  !important;
		}
		.leftpanel  #account_data .data_coverage p.level{
			padding-bottom: 0px;
		}
		.leftpanel  #account_data .data_coverage p.offer_details span.time {
			display: block;
		}
		.leftpanel  #account_data .data_coverage button {
			background-color: transparent !important;
			padding: 20px 0;
			text-decoration: underline !important;
			border: none;
		}
                .leftpanel #account_data .data_links {
                    padding-bottom: 25px;
                }
		.leftpanel  .btn_select_picture { 
			cursor: pointer; 
		}
	/*  *** Account data section - end ***  */





/***********************************/
/********** 3. MAIN PANEL **********/
/***********************************/

.mainpanel {
	background: #f7f7f7;
	min-height: 500px;
}



.contentpanel {
	padding: 20px;
}

.contentpanel::after {
	clear: both;
	display: block;
	content: '';
}





/********** 18. MEDIA QUERIES **********/
/***************************************/


@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 767px) {

}

@media screen and (max-width: 640px) {

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 360px) {

}

@media screen and (max-width: 320px) {

}



.leftpanel .nav-bracket li a,
.leftpanel a.menutoggle,
.leftpanel div.profilesummary {
	background-color: #fff !important;
}

.leftpanel .nav-bracket {
	margin-bottom: 0px;
}

.leftpanel div.profilesummary {
	margin-right: 0px;
	margin-left: 0px;
	padding-left: 60px;
	margin-top: 0px;
	padding-top: 30px;
	display: block;
}
.leftpanel-collapsed div.profilesummary {
	width: 0px;
}
.leftpanel-collapsed div.profilesummary #account_data {
	visibility: hidden;
}
section.db_welcome_header_container { 
	/*margin-left: -15px; */
	margin-top:  -48px;
}
@media (max-width: 768px){
	.afbs-header-text.welcome h1 .user_first_name {
		font-size: 108px;
	}
	.afbs-header-text.welcome {
		padding-top: 192px;
		padding-bottom: 0px;
	}
}

.leftpanel .nav-pills > li.active > a {
	background: #dc442b url(/img/bckg_dot_1x1_ccc.gif) repeat-x top !important;
}