/* Basics and resets */

* { margin: 0px; padding: 0px; }
html { overflow-y: scroll; }

body {
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Tahoma, Verdana, sans-serif;
    color: #4E4E4E;
    background-color: #fff;
    font-size: 13px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
input, select, textarea {
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Tahoma, Verdana, sans-serif;
    font-size: 15px;
    color: #222;
    padding: 4px;
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid #c0c0c0;
    box-sizing: content-box;
}
label  { display: block; margin-bottom: 1em; }
table { border-collapse: collapse; width: 100%; }
td { padding: 0; }
button { 
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Tahoma, Verdana, sans-serif;
    background: linear-gradient(#aab2ba, #89929b);
    border: 1px solid #5c5f60;
    border-radius: 2px;
    color: #fff;
    cursor: pointer; 
    float: none;
    font-size: 14px;
    height: 30px;
    padding: 0 35px;
    width: auto;
    outline: none;
    text-shadow: 1px 1px #737980;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
}
button.prettyButton {
    background: linear-gradient(#e96a4a, #df5431);
    border: 1px solid #cc4d2d;
    width: 250px;
    padding: 0;
    text-shadow: 1px 1px #86331E;
}

h1, h2, h3, h4 { font-weight: 400; color: #4a4a4a; }
a { text-decoration: none; color: #6192bd; }
a:visited{ color: #6192bd; }
ul { list-style-type: none; margin: 0; padding: 0; }
ul.bullet { list-style-type: disc; margin-left: 15px; margin-bottom: 20px; }
p { margin-bottom: 1em; }
p.no-margin { margin-bottom: 0; }

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; }

/* Utility classes */

.marginBottom { margin-bottom: 1em; }
.errorText { color: #d00000; }
.centered { width: 940px; margin: 0 auto;}
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
.valignMiddle { vertical-align: middle; }
.pointer { cursor: pointer; }
.roundBorder { border-radius: 5px; }
.clear { clear: both; }
.italic { font-style: italic; }
.inlineBlock { display: inline-block; }
.hidden {display: none; }
.expander { color: #6192bd; cursor: pointer; font-weight: bold; }
.fright { float: right; }
.fleft { float: left; }
.bigCol { width: 75%; float: left; }
.smallCol { width : 25%; float: left; }
.sizeConstraint { width: 940px; margin: 0 auto; }
.super { font-size: .4em; vertical-align: top;}
.padded { margin: 0 2em; }
.semibold { font-weight: 600; }
.content { min-height: 500px; padding-top: 2em; padding-bottom: 2em; }
.ellipsis { -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* Primary document regions */

#appBackground { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #f4f4f4; z-index: -5; }

#header { background-color: #fff; height: 60px; }
body.login #body { border-top: 1px solid #c0c0c0; }
#header .sizeConstraint { height: 100%; position: relative; }
#header #subtitle { width: 210px; color: #525252; font-size: .85em; position: absolute; left: 0; top:25%; }
#header #title {  }
#header #title h1 {
    padding-left: 1.75em;
    font-size: 1.6em;
    text-shadow: 0 1px #fff;
    background-image: url(/Content/images/logo.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left center;
    width: 260px;
    position: absolute;
    left: 50%;
    top: 25%;
    margin-left: -130px;
}
#header #title h1 a { color: #4a4a4a; }
#header #user { width: 200px; position: absolute; right: 0; top: 10%; }
#header #user > div { font-size: .85em; border-left: 1px solid #ddd; padding: 1em;  }
#header #user a { margin-right: .5em; }

#body a.arrow {
    position: fixed;
    top: 40%;
    border-top: 1px solid #d0d0d0;
    border-bottom: 1px solid #d0d0d0;
    text-indent: -5000px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 5em;
    height: 8em;
}
#body a.arrow.prev { left: 1em; background-image: url(/Content/images/prev-arrow.png); }
#body a.arrow.next { right: 1em; background-image: url(/Content/images/next-arrow.png); }

/* Specific page elements */

#loginForm { width: 30em; margin: 0 auto; }
#loginForm h3 { font-weight: normal; font-size: 1.5em; margin-bottom: 1em; padding: 2em 0 .5em 0; }
#loginForm input { width: 26.5em; display: block; }
#loginForm p.errorText { margin-top: 1em; }
#loginForm button.prettyButton { margin-top: 1em; }

#landing .example { margin-right: 5em; padding-top: 2em; color: #4d4d4d; font-size: 14px; }
#landing .example > p:first-child { font-size: 20px; }
#landing .example .tableTitle { margin: 2em 0 0; font-size: 18px; color:#000000; }
#landing .example table { border-collapse: separate; width: auto; margin-bottom: 2em; }
#landing .example table thead { background: #4E4E4E; color: #fff; }
#landing .example table thead th { font-weight: normal; padding: 1em; text-align:left; }
#landing .example table tbody { vertical-align: top; background: #f2f2f2; color: #4d4d4d; font-size: 13px; }
#landing .example table td { padding: 0 50px .25em 1em ; }
#landing .example table ul { display: inline-block; }
#landing .example table ul li { margin: .25em 0; }
#landing button.prettyButton { margin-bottom: 2em; }

#goalReview .embeddedWindow .padded { padding: 4em; }
#goalReview .embeddedWindow .padded > div:last-child { text-align: right; }
#goalReview .goal p { color: #4c4c4c; font-size: 40px; margin-bottom:0; font-weight: 300; }
#goalReview .goal .direction { margin-left: 2em; }
#goalReview .goal .variable { font-size: 44px; }
#goalReview .goal .image { position: relative; margin: 50px 0; height: 130px; }
#goalReview .goal h3 { position: absolute; bottom: 0; line-height: 85%; }
#goalReview .goal h3.min { right: 710px; font-size: 35px; color: #4c4c4c; }
#goalReview .goal h3.min.decreasing { left: 0; font-size: 150px; color: #4f789c; font-weight: 600; }
#goalReview .goal h3.max { left: 500px; font-size: 150px; color: #4f789c; font-weight: 600; }
#goalReview .goal h3.max.decreasing { right: 0; font-size: 35px; color: #4c4c4c; }
#goalReview .goal .meter {
    background-image: url(/Content/Images/graphic.png);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100%;
    position: absolute;
    left: 70px;
    width: 400px;
    bottom: 0;
    height: 110px;
}
#goalReview .goal .meter.decreasing {
    background-image: url(/Content/Images/meter.png);
    left: 1em;
}

#selectVariable .content > .bubble { margin-right: 10em; }
#selectVariable .excluded { position: relative; font-size: 14px; }
#selectVariable .excluded > p { margin-bottom: 0; }
#selectVariable .embeddedWindow .padded { padding-top: 1em; padding-bottom: 2em; }
#selectVariable .embeddedWindow .header > div:first-child { font-size: 20px; }
#selectVariable .embeddedWindow .header .evaluation { display: table; margin: .5em 0 1em; font-size: 16px;  }
#selectVariable .embeddedWindow .header .evaluation > div:last-child { display: table-cell; vertical-align: top; padding-left: .5em; }

#segmentation .embeddedWindow.results { background-color: #f5f5f5; }
#segmentation .embeddedWindow.results .bigCol { background-color: #FFF; }
#segmentation .embeddedWindow.results .bigCol .padded { margin-top: 2em; margin-bottom: 2em; }
#segmentation .embeddedWindow.results .bigCol .padded > div:first-child { display: table; }
#segmentation .embeddedWindow.results .smallCol { margin-top: 70px; }
#segmentation .embeddedWindow.results .smallCol p { margin: 0 25px 25px; }
#segmentation .embeddedWindow.segments p:first-child { margin-bottom: .5em; }
#segmentation .embeddedWindow.segments button { vertical-align: middle; }
#segmentation .embeddedWindow.segments button:not(:first-child) { margin-left: 1em; }
#segmentation .embeddedWindow.segments .padded { padding-top: 1.5em; padding-bottom: 2em; }
#segmentation .embeddedWindow.segments .border { border: 1px solid lightgray; margin-top: 1em; }
#segmentation .embeddedWindow.segments .smallCol { margin-top: .5em; }
#segmentation .embeddedWindow.segments .graph { margin-top: 1em; }
#segmentation .description { display: table-cell; vertical-align: middle; }
#segmentation .graph { border-top: 1px solid lightgray;}
#segmentation .footer .steps ul li { padding: .25em 0; }
#segmentation .option { width: 250px; }
#segmentation .option > p { font-size: 13px; }
#segmentation .option > div { padding: 0 1em; }
#segmentation .option .statement { height: 5em; }
#segmentation .option .question { height: 2.5em; color: #ff9600; font-size: 11px; }
#segmentation .option .image { height: 4em; padding-bottom: 10px; padding-top: 0; position: relative; }
#segmentation .option .image button { position: absolute; bottom: 0; right: 0; }
#segmentation .option .image.viewSegments { background-image: url(/Content/Images/bars.png); background-repeat: no-repeat; background-position: 10% 50%; }
#segmentation .option .image.addVariable { background-image: url(/Content/Images/scale.png); background-repeat: no-repeat; background-size: 30% 50%; background-position: 22% 95%; }
#segmentation .option .image.addVariable .min { color: #ff9600; position: absolute; bottom: 0; }
#segmentation .option .image.addVariable .max { color: #ff9600; position: absolute; top: 0; left: 6em; font-size: 1.5em; }
#segmentation #variable > p { font-size: 20px; }

#segmentationDetails .graph { margin-top : 35px; }
#segmentationDetails .bubble { margin-top: 2em; margin-right: 5em; }

#improvement .embeddedWindow p { font-size: 14px; }
#improvement .embeddedWindow .padded > div:first-child { display: table; }
#improvement .embeddedWindow .description { display: table-cell; vertical-align: middle; font-size: 20px; }
#improvement .graph { padding: 1em 0; position: relative; }

#progressMask, #bubbleMask {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    opacity: 0.4;
    filter: alpha(opacity=40);
    cursor: wait;
    z-index: 5;
}
#loader { background-image: url(/Content/Images/ajax-loader_carnac_medium.gif); display: none; position: absolute; z-index: 10; height: 42px; width: 42px; left: 50%; margin-left: -21px; top: 50%; margin-top: -21px; }
#progressMask.active, #bubbleMask.active, #loader.active { 
    display: block;   
}


#actionPlan .embeddedWindow { padding-bottom: 4em; }
#actionPlan img { width: 100%; }
#actionPlan .goal { padding: 2em 0 0 1em; }
#actionPlan .goal p { color: #4c4c4c; font-size: 28px; font-weight: 300; }
#actionPlan .goal .direction { margin-left: 3.5em; }
#actionPlan .footer { background-color: #E6E6E6; }
#actionPlan .plan .title { font-size: 20px; font-weight: 300; margin-top: .5em; }
#actionPlan .plan .views { padding-top: 1.5em; }
#actionPlan .plan .views p { font-size: 10px; text-transform: uppercase; }
#actionPlan .plan .views .pointer { color: #6192bd; }
#actionPlan .plan table { border-collapse: separate; width: auto; margin-left: -3px; }
#actionPlan .plan table th, #actionPlan .plan table td { padding: 0 .1em; width: 275px; }
#actionPlan .plan table th div, #actionPlan .plan table td div { padding: .25em 0; font-size: 11px; }
#actionPlan .plan table th div { background-color: #C0C0C0; font-weight: 600; text-transform: uppercase; }
#actionPlan .plan table td div { text-align: center; background-color: #fff; }
#actionPlan .plan .plan-segment { margin-top: 2em; width: 100%; }
#actionPlan .plan .plan-segment > div { display: table; }
#actionPlan .plan .plan-segment .description { display: table-cell; vertical-align: middle; padding-left: 1em; font-size: 15px; }

/* Widgets */

.selectedVariables { background-color: #e8e8e8; height: 75px; border-top: 1px solid #C0C0C0; border-bottom: 1px solid #C0C0C0; }
.selectedVariables > div { color: black; vertical-align: middle; }
.selectedVariables .story-variable:last-child { border-right: 1px solid #C0C0C0; }
.selectedVariables .story-variable { border-left: 1px solid #C0C0C0;  height: 75px; width: 130px; max-width: 130px; text-align:center; background-color:#f4f4f4; display: table-cell; vertical-align: middle; position: relative; }
.selectedVariables .story-variable.selected { background-color: #ffffff; }
.selectedVariables .story-variable .type { font-size: 14px; }
.selectedVariables .story-variable .subtype { font-size: 16px; }
.selectedVariables .story-variable .index { font-size: .5em; margin: 5px 5px 0; opacity: .4; text-align:left; }
.selectedVariables .story-variable .property { font-size: 1em; }
.selectedVariables .story-variable .percent { font-size: 2em; }
.selectedVariables .story-variable .notch { background-image: url(/Content/Images/nav_pointer.png); position: absolute; height: 11px; width: 21px; left: 50%; margin-left: -10px; bottom: -1px; }
.selectedVariables .variableButton { width: 80px; text-align: center; padding-top: 5px; height: 70px; display: inline-block; }
.selectedVariables .actionButton:hover { color: #FFEE7B; background-color: #565656; }

.embeddedWindow { background-color: white; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22); position: relative; z-index: 5; color: #4c4c4c }
.embeddedWindow.above { z-index: 10; }
.embeddedWindow > div:first-child { background: linear-gradient(#6b6b6b, #232323); color: white; font-size: 18px; font-weight: 300; line-height:37px; padding: 0 1em; position: relative; }
.embeddedWindow .variablePercent { font-size: 95px; color: #547FA4; }
.embeddedWindow .variablePercent .super { margin-top: 20px; line-height: 2.25; }
.embeddedWindow .description { font-size: 16px; padding-left: 1em; padding-right: 1em; }

tip { margin-top: -8px; position: absolute; right: -20px; top: 50%; height: 16px; width: 16px; font-size: 13px; background-size: auto 100%; background-repeat: no-repeat; }
tip > div { width: 100%; height: 100% }
tip.question { background-image: url(/Content/images/help_gray_16x16.png); }
tip .tipContent { position: absolute; z-index: 5; cursor: default; width: 550px; border: 1px solid black; color: #333333; font-size: 16px; box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.22); }
tip .tipContent > div { padding: 35px; border: 1px solid #bdbdbd; background: linear-gradient(#ffffff, #f2f2f2); }
tip .tipContent p.title { margin-top: 0; font-size: 24px; }
tip .tipContent p.padded { padding-left: 3em; }
tip.aboveTip .tipContent { bottom: 30px; left: -250px; }
tip.aboveTip .iconTooltipNotchDisplay { background-image: url(/Content/images/help_pointer.png); height: 20px; width: 26px; position: absolute; bottom: -19px; left: 245px; z-index: 10; }

chart-tip > div { width: 100%; height: 100% }
chart-tip .tipContent { position: absolute; z-index: 5; cursor: default; border: 1px solid black; color: #333333; font-size: 16px; box-shadow: 8px 8px 5px rgba(0, 0, 0, 0.22); }
chart-tip .tipContent > div { padding: 20px; border: 1px solid #bdbdbd; background: linear-gradient(#ffffff, #f2f2f2); }
chart-tip .iconTooltipNotchDisplay { background-image: url(/Content/images/tip-notch.png); height: 17px; width: 11px; position: absolute; }
chart-tip.leftTip .iconTooltipNotchDisplay { right: -9px; top: 14px; -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
chart-tip.rightTip .iconTooltipNotchDisplay { left: -9px; top: 12px; }

.footer { padding-top: 2em; padding-bottom: 1em; background-color: #ddd; }
.footer .steps { display: table; min-height: 100px; width: 100%; }
.footer .steps > div { display:table-cell;  }
.footer .steps > div:first-child { width: 66%; }
.footer .steps > div:last-child { width: 33%; text-align: right; vertical-align: middle; }
.footer .steps p.header { font-weight: 600; font-size: 18px; }
.footer .steps p.subheader { font-size: 15px; }
.footer .otherOptions { min-height: 24px; }
.footer .otherOptions span { color: #E05633; font-size: 12px; display: block; padding: .25em 0; }

.expander { margin-top: 1.5em; font-size: .9em; }
.expander span { display: inline-block; height: 1em; width: 1em; background-repeat: no-repeat; background-position: center; }
.expander span.link-arrow { background-image: url(/Content/Images/link-arrow.png); }
.expander span.link-arrow-open { background-image: url(/Content/Images/link-arrow-open.png); }

.bubble { background-color: #547FA4; color: #fff; border-radius: 1em; font-size: 15px; position: relative; padding: 1.5em 2em 1.5em 0; margin-bottom: 1em; }
.bubble p { margin: 1em 0; }
.bubble .title { font-size: 18px; }
.bubble p:first-child { margin-top: 0; }
.bubble p:last-child { margin-bottom: 0; }
.bubble.shadow { box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.22); }

.circle { stroke: #8E4B5F; shape-rendering: auto; text-align: center; }
.circle #circle-gradient .stop1 { stop-color: #AA5A72; }
.circle #circle-gradient .stop2 { stop-color: #8C465B; }

.exit { background-image: url(/Content/Images/close_21x21.png); height: 21px; width: 21px; background-repeat: no-repeat; background-position: center; background-size: 100%; position: absolute; right: 10px; top: 50%; margin-top: -11px; }

.dataTable { margin: .5em auto 2em; font-size: 14px; }
.dataTable table { table-layout: fixed; width: 100%; }
.dataTable button { display: none; }
.dataTable input { vertical-align: middle; border: 0; }
.dataTable svg { shape-rendering: crispEdges; vertical-align: middle; }
.dataTable svg.line { height: 2px; width: 100%; }
.dataTable line { stroke: #808080; stroke-width: 1;}
.dataTable rect.rounded { shape-rendering: auto; }
.dataTable rect.progress { fill: #547FA4; }
.dataTable rect.segment { fill: #6DB16A; }
.dataTable text.value { font-size: 13px; font-weight: 600; }
.dataTable .regularColumn { width: 24%; }
.dataTable .regularColumn.extend { width: 58%; }
.dataTable .smallColumn { width: 12%; }
.dataTable .spacerColumn { width: 5%; vertical-align: bottom; color: #808080; }
.dataTable .spacerColumn div { padding: 0 .25em; font-size:12px; }
.dataTable thead tr { border: 1px solid lightgray; background-color: #efefef; }
.dataTable thead th { font-weight: 600;  padding: .25em 0; }
.dataTable thead th.border { border-right: 1px solid #c6c6c6;}
.dataTable thead th div { position: relative; }
.dataTable thead th .sort { background-image: url(/Content/Images/sort.png); height: 16px; width: 10px; position: absolute; top: 50%; margin-top: -8px; margin-left: 3px; display: inline-block; }
.dataTable thead th:first-child { width: 3%; }
.dataTable thead th:not(.spacerColumn) { overflow: visible; white-space: nowrap; }
.dataTable tbody tr:hover { background-color: #ffffe2; }
.dataTable tbody tr:hover td { border-top: 1px solid #cbcbcb; border-bottom: 1px solid #cbcbcb; }
.dataTable tbody tr:hover td:first-child { border-left: 1px solid #cbcbcb; }
.dataTable tbody tr:hover td:last-child { border-right: 1px solid #cbcbcb; }
.dataTable tbody tr:hover text.value, .dataTable tbody tr.selected text.value, .dataTable tbody tr.block text.value { display: block; }
.dataTable tbody tr { border: 1px solid transparent; height: 45px; }
.dataTable tbody tr.selected { font-weight: 600; }


.overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: lightgray;
    opacity: 0.70;
    filter: alpha(opacity=70);
}
.lightBox { 
    background-image: url(/Content/Images/trans-tile-modal.png);
    filter: alpha(opacity=100); 
    border-radius: 15px; 
    display: block; 
    position: fixed;
    top: 5%;
    left: 50%;
    z-index: 10;
    width: 80em;
    margin-left: -40em;
    padding: 10px;
}
.lightBox .content { border-radius: 10px; padding: 15px 20px; }
.lightBox .title .exit { height: 25px; width: 25px; }
.lightBox .instructions { padding: 20px 5px; }
.lightBox .graph { width: 80%; float: left; }
.lightBox .graph #restore-defaults { margin-right: 50px; }
.lightBox .sidebar { width: 20%; float: right; }
.lightBox .sidebar p { margin: 50px 25px 25px 0; font-size:13px; }
.lightBox .sidebar .progressTitle { text-align: center; padding-bottom: 5px; }
.lightBox .sidebar .percent { font-size: 2em; padding-left:5px; }
.lightBox .buttonPanel button { margin-left: 25px; }

.barchart text { fill: #4d4d4d; max-width:120px; }
.barchart polyline { stroke: lightgray; shape-rendering: crispEdges; }
.barchart .bar-background { fill: #FFF; cursor: pointer;}
.barchart .bar-background:hover, .barchart .bar-group.selected:hover .bar-background, .barchart .bar-group.close.selected:hover .bar-background { fill: #ffffe2; stroke: #cbcbcb; shape-rendering: crispEdges;  }
.barchart .bar-group .bar, .barchart .bar-group .bar-cap { fill: #C5CACF; stroke: transparent; pointer-events: none; }
.barchart .bar-group .close-text { pointer-events: none; font-size: 2em; }
.barchart .bar-group.selected .bar, .barchart .bar-group.selected .bar-cap { fill: #e4b953; stroke: transparent; }
.barchart .bar-group.close:not(.selected):hover .unchosen { display: inline; fill: #000; }
.barchart .bar-group.close.selected .bar { fill: darkgray; }
.barchart .bar-group.close.selected .included { display: inline; fill: #000; }
.barchart .bar-group.close.selected .bar-background { fill: #99C7ED; }
.barchart .axis .background { fill: #e9e9e9; }
.barchart .axis .domain { display: none; }
.barchart .title-background { fill: #e9e9e9; }
.barchart .x.axis line { fill: none; stroke: darkgray; stroke-width: 1; shape-rendering: crispEdges; }
.barchart .y.axis .tick line { display: none; }
.barchart .y.axis .main-axis .tick text, .barchart .y.axis .main-axis .tick image { font-size: 12px; pointer-events: none; }
.barchart .title0 .title { text-anchor: start; }
.barchart .title { text-anchor: middle; font-size: 13px; font-weight: 600; }
.barchart .subaxis text { fill: darkgray; }
.barchart .subaxis .background { fill: lightgray }
.barchart .subaxis .connector{ stroke: darkgray; fill: transparent; }
.barchart .ref-line { fill: #4D4D4D; }
.barchart .ref-line path { stroke: #4D4D4D; stroke-width: 2; fill: none; pointer-events: none; shape-rendering: crispEdges; }
.barchart .bottom-grid { stroke: black; stroke-width: 2; fill: none; }

.linechart text { fill: #828282; }
.linechart .line { fill: none; stroke: #174845; stroke-width: 2; shape-rendering: auto; pointer-events: none; }
.linechart .dot { fill: #174845; shape-rendering: auto; pointer-events: none; }
.linechart .bubble { stroke: #174845; shape-rendering: auto; stroke-width: 1; cursor: pointer; }
.linechart #bubble-gradient .stop1 { stop-color: #3d8d88; }
.linechart #bubble-gradient .stop2 { stop-color: #2d7470; }
.linechart #background-gradient .stop1 { stop-color: #ffffff; }
.linechart #background-gradient .stop2 { stop-color: #f2f2f2; }
.linechart .axis path { fill: none; stroke: #000; }
.linechart .axis line { fill: none; stroke: white; stroke-width: 6; }
.linechart .yaxisgrid { stroke: darkgray; }
.linechart .yaxisgrid .domain { display: none; }
.linechart .xaxisgrid { stroke: darkgray; }
.linechart .xaxisgrid .domain { display: none; }
.linechart .x .domain { display: none; }
.linechart .y .domain { display: none; }
.linechart .y text { font-size: 10px; }
.linechart .y text.title { font-size: 13px; }

.progress-horizontal { display: inline-block; }
.progress-horizontal svg { shape-rendering: crispEdges; }
.progress-horizontal svg text { font-size: 11px; fill: #B4B4B4; }
.progress-horizontal svg path { stroke-width: 2; fill: none; }
.progress-horizontal svg .progress-background { fill: lightgray; }
.progress-horizontal svg .suggested-percent { fill: #99C7ED; }
.progress-horizontal svg .goal { stroke: #B4B4B4; fill: #B4B4B4; }
.progress-horizontal svg .goal.over { stroke: #666666; fill: #666666; shape-rendering: auto; }
.progress-horizontal svg .goal-value.over { fill: #666666; }
.progress-horizontal svg .goal-line { stroke: #FFF; fill: #FFF; stroke-dasharray: 4px; }
.progress-horizontal svg .base { stroke: #B4B4B4; fill: #B4B4B4; }
.progress-horizontal svg .previous { stroke: #B4B4B4; fill: #B4B4B4; shape-rendering: auto; }
.progress-horizontal svg .previous-value { text-anchor: middle; font-size: 14px; }
.progress-horizontal svg .previous-percent-sign { font-size: 10px; text-anchor: start; }
.progress-horizontal svg .previous-line { stroke: #FFF; fill: #FFF; }
.progress-horizontal svg .current-poly { fill: #5b8ab3; stroke: #5b8ab3; shape-rendering: auto; }
.progress-horizontal svg .percent-bubble { fill: #5b8ab3; stroke: #5b8ab3; shape-rendering: auto; }
.progress-horizontal svg .percent-bubble-value { font-size: 20px; fill: #5b8ab3; text-anchor: middle; }
.progress-horizontal svg .current-percent-sign { font-size: 14px; fill: #5b8ab3; text-anchor: start; }
.progress-horizontal svg .bar { fill: #5b8ab3; }
.progress-horizontal svg .axisgrid line { stroke: white; stroke-width: 1; }
.progress-horizontal svg .axisgrid path { stroke: transparent; }

.small-progress-horizontal { padding-bottom: 50px; }
.small-progress-horizontal svg { shape-rendering: crispEdges; }
.small-progress-horizontal svg .progress-background { fill: lightgray; }
.small-progress-horizontal svg path { stroke-width: 2; fill: none; }
.small-progress-horizontal svg .axisgrid line { stroke: white; stroke-width: 1; }
.small-progress-horizontal svg .axisgrid path { stroke: transparent; }
.small-progress-horizontal svg .bar { fill: #000; stroke: #000; }

.progress-vertical { display: inline-block; }
.progress-vertical svg { margin: 0 0 -5px 0; shape-rendering: crispEdges; }
.progress-vertical svg .progress-background { fill: white; stroke-width: 2; stroke: lightgray; }
.progress-vertical svg rect { fill: #69a769; stroke: green; stroke-width:2; }
.progress-vertical svg path { stroke: black; stroke-width: 2; fill: none; }
.progress-vertical svg text { font-size: 11px; }
.progress-vertical svg .suggested { opacity: .3; }

.segment-size { height: 150px; width: 150px; overflow: hidden; margin: auto; }
.segment-size g { shape-rendering: auto; }
.segment-size line { stroke: white; }
.segment-size path { stroke: white; }
.segment-size polygon { fill: #6db16a; }
.segment-size .background { fill: #FFFFFF; }
.segment-size .segment-background { fill: #98E494; }
.segment-size .slice.arc1 { fill: #6db16a; }
.segment-size .slice.arc2 { fill: transparent; }
.segment-size .slice.arc3 { fill: lightgray; }
.segment-size .value { font-size: 34px; text-anchor: middle; fill:#6db16a; }
.segment-size .percent-sign { font-size: 16px; fill: #6db16a; text-anchor: start; }
.segment-size .suggested { fill: #a0a0a0; }

/* Compute Status Table */
#computeStatusData { border: 1px solid #c0c0c0; table-layout: fixed;}
#computeStatusData thead { border-bottom: 1px solid #c0c0c0; background-color: #e0e0e0; }
#computeStatusData thead th { padding: 1em; text-align: left;}
#computeStatusData tbody tr { border-bottom: 1px solid #c0c0c0; background-color: #fafafa; }
#computeStatusData tbody tr td { padding: 1em }

/* Responsive Layout Adjustments */
/* MJY (9/7/2014): Removed these since they are out of scope for the current design */

@media (min-width: 1280px){

}

@media (max-width: 1280px){

}

@media (max-width: 1024px){

}

@media (max-width: 720px) {

}