/**
 * GRAPH
 */

html, body { overflow: hidden; }
#parent .header { z-index: 1; }
#parent .header, #parent .header.hide { -webkit-transition: top 0.25s; -moz-transition: top 0.25s; -ms-transition: top 0.25s; -o-transition: top 0.25s; transition: top 0.25s; }
#parent .header.show { top: 0px; }
#parent .header.hide { top: -48px; }
/*#main { position: relative; z-index: 0; }*/


/*
#main { position: fixed;
        left: 10px;
        right: 0px;
        top: 400px;
        bottom: 0px; }


*/

#main { position: fixed;
        left: 10px;
        right: 0px;
        top: 550px;
        height: 100%!important;
        bottom: 0px; }

button#info { position: absolute; bottom: 8px; right: 8px; padding: 5px; height: 42px; background: none; }

.row { margin: 0 -5px; }
.col-xs-6 { padding: 0 5px; }

/* pseudoheader */
g#pseudoheader text {
	font-family: 'Arial'; font-weight: normal;
	fill: #12273E; font-size: 20px; letter-spacing: 1px; text-transform: uppercase;
}

/* MMENU */
.menu { display: none; }
.mm-menu { background: #f0f0f0; }
.mm-menu > .mm-panel { padding: 0; }
.mm-menu .header { position: relative; background-color: #083656; font-size: 17px; color: #ECECEC; }
.mm-menu .header .title { vertical-align: -1px; }
.btn.close { position: fixed; top: 0px; left: 360px; color: #ECECEC; }

.mm-menu .content { padding: 15px; padding-right: 20px; color: #333; font-size: 0.85em; }
.mm-menu .content label.title { font-family: 'Arial'; margin-bottom: 5px; }
.mm-menu .content div.module { border-bottom: #ccc solid 1px; padding-bottom: 30px; margin-bottom: 30px; }
.mm-menu .content div#event_list.module { border: none; padding-bottom: 0px; }

#event_menu.mm-menu .content label.title { margin-bottom: 15px; }
/*#asset_menu.mm-menu .content button { margin-top: 10px; }*/

html.mm-opened.mm-opening #mm-blocker { left: 0%; }
html.mm-opened .mm-page { box-shadow: none; }


/* ASSET LINES */
.asset_line { opacity: 1; stroke-width: 1.5px; fill: none; }

.asset_line.line-us_stocks { stroke: #ae132a; }
.asset_line.line-small_caps { stroke: #da1a61; }
.asset_line.line-us_bonds { stroke: #c8531f; }
.asset_line.line-us_tbills { stroke: #4f3b80; }
.asset_line.line-growth_portfolio { stroke: #e82c2a; }
.asset_line.line-balanced_portfolio { stroke: #008145; }
.asset_line.line-income_portfolio { stroke: #4bab4c; }
.asset_line.line-intl_stocks { stroke: #005776; }
.asset_line.line-inflation { stroke: #72635d; }


/* ASSET LABELS */
.asset_label { font-size: 0.8em; }
.asset_label.label-us_stocks { fill: #ae132a; }
.asset_label.label-small_caps { fill: #da1a61; }
.asset_label.label-growth_portfolio { fill: #e82c2a; }
.asset_label.label-balanced_portfolio { fill: #008145; }
.asset_label.label-income_portfolio { fill: #4bab4c; }
.asset_label.label-us_bonds { fill: #c8531f; }
.asset_label.label-us_tbills { fill: #4f3b80; }
.asset_label.label-intl_stocks { fill: #005776; }
.asset_label.label-inflation { fill: #72635d; }
.asset_label.hidden { display: none; }
#asset_labels_legend .asset_label.hidden { display: block !important; visibility: visible !important; opacity: 0.1; }
#asset_labels_legend .title { font-size: 0.95em; }
#asset_labels.lighter { opacity: 0.2; }

.modal-body .us_stocks .bar-bar { background-color: #ae132a; }
.modal-body .small_caps .bar-bar { background-color: #da1a61; }
.modal-body .us_bonds .bar-bar { background-color: #c8531f; }
.modal-body .us_tbills .bar-bar { background-color: #4f3b80; }
.modal-body .growth_portfolio .bar-bar { background-color: #e82c2a; }
.modal-body .balanced_portfolio .bar-bar { background-color: #008145; }
.modal-body .income_portfolio .bar-bar { background-color: #4bab4c; }
.modal-body .intl_stocks .bar-bar { background-color: #005776; }
.modal-body .bonds .bar-bar { background-color: #C88A12; }
.modal-body .us_tbills .bar-bar { background-color: #7C4B7E; }
.modal-body .inflation .bar-bar { background-color: #8B806E; }

.modal-body .div-bar .us_stocks { color: #ae132a; }
.modal-body .div-bar .small_caps { color: #da1a61; }
.modal-body .div-bar .us_bonds { color: #c8531f; }
.modal-body .div-bar .growth_portfolio { color: #e82c2a; }
.modal-body .div-bar .us_tbills { color: #4f3b80; }
.modal-body .div-bar .balanced_portfolio { color: #008145; }
.modal-body .div-bar .income_portfolio { color: #4bab4c; }
.modal-body .div-bar .intl_stocks { color: #005776; }
.modal-body .div-bar .bonds { color: #C88A12; }
.modal-body .div-bar .us_tbills { color: #7C4B7E; }
.modal-body .div-bar .inflation { color: #8B806E; }


.asset_line.hidden { display: none; }
/*.asset_line.line-global_stocks { fill: #31929B; }*/
 
.asset_label.hidden { display: none; }
#asset_labels_legend .asset_label.hidden { display: block !important; visibility: visible !important; opacity: 0.1; }
#asset_labels_legend .title { font-size: 0.95em; }
#asset_labels.lighter { opacity: 0.2; }


/* AXES */
.axis text { font-size: 14px; fill: #555; }
.axis path, .axis line { fill: none; stroke: #d6d6d6; shape-rendering: crispEdges; }
.y.axis path.domain { display: none; }
.y.axis .tick line { stroke-dasharray: 5,10; }

#asset_lines { -webkit-transform: translateZ(0); transform: translateZ(0); }
#mm-blocker { background-color: #000; opacity: 0.5; }

/* EVENTS */
.graphed_event.hidden { display: none; }
.event_list_item { position: relative; margin-bottom: 20px; line-height: 1.3em; }
.event_list_item p { margin: 0; }
.event_list_item_text { position: absolute; top: -3px; left: 40px; }
.event_list_item button.delete_event {
	font-family: 'Arial';
	width: 34px; height: 34px; padding: 0; border: 0; background: hsla(0, 0%, 50%, 0); 
	font-size: 30px; line-height: 0px; float: right; color: hsl(0, 0%, 50%);
}

/* MODAL */
.modal { width: 100%; height: 100%; }
.modal-content { overflow: hidden;  }
.modal-header { padding: 1px 10px 11px; color: hsl(0, 0%, 95%); background-color: #12273E; font-size: 20px; letter-spacing: 0.05em; }
.modal-header, .modal-footer { text-align: center; margin: 0; }
.modal-footer { padding: 12px; }
.modal-header .close { color: hsl(0, 0%, 95%); opacity: 0.75; width: 34px; height: 34px; font-size: 30px; line-height: 0px; margin-top: -10px; }
.modal-title, .modal-footer button { text-transform: uppercase; }
.modal-footer button, .modal-header .close { font-family: 'Arial'; font-weight: normal; }

.modal-body{
    font-size: 14px!important;
    text-align:center;
    top: -13px;
/*    padding:23px;*/
}
.modal-body .text-muted { color: #666; }
.modal-body .bar-bar p { width: 100%; text-align: center; font-size: 0.9em; }
.modal-body .div-temp { display: none; }
.modal-body .div-top, .modal-body .div-bar, .modal-body .div-bottom { text-align: center; }
.modal-body .div-bar { font-family: 'Arial'; font-weight: normal; width: 100%; height: 30px; border: 2px solid #999; border-radius: 6px; font-size: 0.9em; line-height: 25px; }
.modal-body .bar-cont { position: relative; width: 128px; height: 100%; display: inline-block; }
.modal-body .bar-cont.hidden { display: none; }
.modal-body .bar-bar { position: absolute; width: 52px; }
.modal-body .div-top .bar-bar { bottom: 0; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.modal-body .div-top .bar-bar p { position: absolute; top: -21px; }
.modal-body .div-bottom .bar-bar { top: 0; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }
.modal-body .div-bottom .bar-bar p { position: absolute; bottom: -31px; }
.bar-1yr { left: 8px; }
.bar-5yr { right: 8px; }

 


@media screen and (min-width: 768px) { .modal-dialog { position: relative; width: '900px'; } }

/* BnW example */
.modal-body .example { position: absolute; font-size: 0.9em; bottom: 5px; right: 20px; width: 260px; border: 2px solid #bbb; padding: 30px 10px 30px 60px; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; }
.modal-body .example p.tag { position: absolute; text-align: right; left: -90px; width: 90px; color: #999; }
.modal-body .example .ex-top p.tag { top: -24px; }
.modal-body .example .ex-bottom p.tag { bottom: -32px; }
.modal-body .example .ex-bar { width: 100%; height: 26px; border: 2px solid #ddd; border-radius: 6px; color: #999; text-align: center; }
.modal-body .example .ex-top, .modal-body .example .ex-bottom { position: relative; height: 6px; }
.modal-body .example .ex-bar-bar { position: absolute; background-color: #ccc; width: 52px; height: 100%; text-align: center; }
.modal-body .example .ex-top .ex-bar-bar { bottom: 0; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.modal-body .ex-bar-bar p { width: 100%; text-align: center; }
.modal-body .example .ex-top .ex-bar-bar p { position: absolute; top: -24px; }
.modal-body .example .ex-bottom .ex-bar-bar { top: 0; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; }
.modal-body .example .ex-bottom .ex-bar-bar p { position: absolute; bottom: -32px; }
.ex-1yr { left: 12px; }
.ex-5yr { right: 12px; }

/* BnW footnote */
.modal-body .footnote { position: absolute; font-size: 0.8em; color: #999; bottom: 12px; left: 20px; }
.modal-body .footnote p { margin-bottom: 2px; line-height: 1em; }

.modal-body .bestnote { position: absolute; font-size: 1.2em; color: #999; bottom: 12px; left: 20px; top:10px }
.modal-body .bestnote p { margin-bottom: 2px; margin-bottom: 24px; line-height: 1em; }


.modal-body .worstnote { position: absolute; font-size: 1.2em; color: #999; bottom: 12px; left: 20px; bottom:30px }
.modal-body .worstnote p { margin-bottom: 2px; margin-bottom: 24px; line-height: 1em; }

/* FINANCIAL EVENTS */
#f_events_cont text { font-size: 0.7em; }
#f_events_cont text.lighter { opacity: 0.2; }

/* CANVAS */
canvas { display: none; margin-top: 48px; }
 

 
/**
 * GRAPH
 */

html, body { overflow: hidden; }
#parent .header { z-index: 1; }
#parent .header, #parent .header.hide { -webkit-transition: top 0.25s; -moz-transition: top 0.25s; -ms-transition: top 0.25s; -o-transition: top 0.25s; transition: top 0.25s; }
#parent .header.show { top: 0px; }
#parent .header.hide { top: -48px; }
/*#main { position: relative; z-index: 0; }*/



button#info { position: absolute; bottom: 8px; right: 8px; padding: 5px; height: 42px; background: none; }

.row { margin: 0 -5px; }
.col-xs-6 { padding: 0 5px; }

/* pseudoheader */
g#pseudoheader text {
	font-family: 'Arial'; font-weight: normal;
	fill: #12273E; font-size: 20px; letter-spacing: 1px; text-transform: uppercase;
}

/* MMENU */
.menu { display: none; }
.mm-menu { background: #f0f0f0; }
.mm-menu > .mm-panel { padding: 0; }
.mm-menu .header { position: relative; background-color: #083656; font-size: 17px; color: #ECECEC; }
.mm-menu .header .title { vertical-align: -1px; }
.btn.close { position: fixed; top: 0px; left: 360px; color: #ECECEC; }

.mm-menu .content { padding: 15px; padding-right: 20px; color: #333; font-size: 0.85em; }
.mm-menu .content label.title { font-family: 'Arial'; margin-bottom: 5px; }
.mm-menu .content div.module { border-bottom: #ccc solid 1px; padding-bottom: 30px; margin-bottom: 30px; }
.mm-menu .content div#event_list.module { border: none; padding-bottom: 0px; }

#event_menu.mm-menu .content label.title { margin-bottom: 15px; }
/*#asset_menu.mm-menu .content button { margin-top: 10px; }*/

html.mm-opened.mm-opening #mm-blocker { left: 0%; }
html.mm-opened .mm-page { box-shadow: none; }



/* AXES */
.axis text { font-size: 14px; fill: #555; }
.axis path, .axis line { fill: none; stroke: #d6d6d6; shape-rendering: crispEdges; }
.y.axis path.domain { display: none; }
.y.axis .tick line { stroke-dasharray: 5,10; }

#asset_lines { -webkit-transform: translateZ(0); transform: translateZ(0); }
#mm-blocker { background-color: #000; opacity: 0.5; }

/* EVENTS */
.graphed_event.hidden { display: none; }
.event_list_item { position: relative; margin-bottom: 20px; line-height: 1.3em; }
.event_list_item p { margin: 0; }
.event_list_item_text { position: absolute; top: -3px; left: 40px; }
.event_list_item button.delete_event {
	font-family: 'Arial';
	width: 34px; height: 34px; padding: 0; border: 0; background: hsla(0, 0%, 50%, 0); 
	font-size: 30px; line-height: 0px; float: right; color: hsl(0, 0%, 50%);
}

/* MODAL */
.modal { width: 100%; height: 100%; }
.modal-content { overflow: hidden;  padding-top: 18px!important;}
.modal-header { padding: 1px 10px 0px; color: hsl(0, 0%, 95%); background-color: white; font-size: 20px; letter-spacing: 0.05em; }
.modal-header, .modal-footer { text-align: center; margin-top: 5px; }
.modal-footer { padding: 12px; }
.modal-header .close { color: hsl(0, 0%, 95%); opacity: 0.75; width: 34px; height: 34px; font-size: 30px; line-height: 0px; margin-top: -10px; }
.modal-title, .modal-footer button { text-transform: uppercase; }
.modal-footer button, .modal-header .close { font-family: 'Arial'; font-weight: normal; }


/* FINANCIAL EVENTS */
#f_events_cont text { font-size: 0.7em; }
#f_events_cont text.lighter { opacity: 0.2; }

/* CANVAS */
canvas { display: none; margin-top: 48px; }
 

.y_axis path{
    fill: none;
/*    stroke: grey;*/
/*    stroke-width: 0px;*/


}

.y_axis text{
    font-size: 13px;
    fill:#546E7A;
/*    stroke: grey;*/
/*    stroke-width: 0px;*/


}

.area {
  fill: lightsteelblue;
}