/*GRAPH Styles*/
#graph-line-1 {height: 18em}
/*#graph-dashboard-commodity-1, #graph-dashboard-commodity-2, #gauge-pie-spend {height: 12.5em}*/
.graph-body, .graph-axis {float: left; width: 97%; height: auto}
.graph-vertical {height: 100%}
.graph-guide-text {font-size: 0.9em; color: #0A214F; white-space:nowrap; font-weight: bold}
.graph-body-container {float: left; margin-top: 1em; margin-left: 1em; width: 100%}
.graph-posneg-horizontal-total {float: left; width: 100%}
.graph-posneg-horizontal-holder {float: left; width: 60%}
.graph-posneg-horizontal-antiholder {float: left; width: 70%}
.graph-posneg-horizontal-label {float: left; width: 28%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis}
.graph-posneg-horizontal-overlay {position: relative}
.graph-posneg-horizontal-overlay-label {position: absolute; left: 0; padding-top: 0.5em; text-overflow: ellipsis; white-space:nowrap; overflow: hidden}
#standard-left-col .graph-posneg-horizontal-overlay-label {width: 4em}
#standard-right-col .graph-posneg-horizontal-overlay-label, #reverse-left-col .graph-posneg-horizontal-overlay-label {width: 4.5em; z-index: 1;}
.graph-posneg-horizontal-overlay-label-negative {text-align: right;}
.graph-posneg-horizontal-overlay-label-light {color: #FFFFFF}
.graph-posneg-horizontal-overlay-label-dark {color: #373737}
.graph-posneg-horizontal-overlay-label-stretch {width: 8em!important}
.graph-posneg-horizontal-antilabel {width: 12%!important}
.graph-posneg-horizontal-label-debug {float: right; font-weight: bold}
.graph-posneg-horizontal-award {float: left; white-space:nowrap; width: 5%; margin-left: 0em!important}
.graph-posneg-horizontal-negative {text-align: right}
.graph-posneg-horizontal-totalscore {font-weight: bold}
.graph-posneg-horizontal-bars {width: 60%; border: 1px solid #737373; float: left; height: 2em}
.gadget-record .graph-posneg-horizontal-bars  {height: 1.97em} 
.graph-posneg-horizontal-riskbars-container {float: left; width: 100%}
.graph-posneg-horizontal-riskbars {width: 100%; border-top: 1px solid #737373; border-bottom: 1px solid #737373;float: left; height: 2em; display: block; position: relative}
.graph-posneg-horizontal-multi .graph-posneg-horizontal-bars {border: 1px solid #808080}
.graph-posneg-horizontal-score {float: left; width: 10%; height: 100%; white-space:nowrap}
.graph-posneg-horizontal-score, .graph-posneg-horizontal-label, .graph-posneg-horizontal-antilabel, .graph-posneg-horizontal-award  {margin: 0.35em; margin-left: 0em; margin-right: 0.7em; margin-bottom: 0em; font-size: 1em}
.graph-posneg-horizontal-bar {float: left; width: 49%; height: 100%; position: relative;}
.indicator { width: 200px; display: block; border-style: solid; border-width: 0 0 0 2px; position: absolute; text-align: left; font-size: 70%; padding-left: 0.5em; font-weight: bold; }
.indicator-first { top: -60px; height: 92px; }
.indicator-second { top: -35px; height: 67px; z-index: 30; }
.graph-axis-marker {position: relative; margin-top: 0.2em}
.graph-vertical-bars-holder {float: left; width: 90%; height: 80%; margin: 0 auto; display: block; margin-left: 2.2em; position: relative; margin-top: 1em}
.graph-vertical-bars-holder.with-scale {border-left: 1px solid #808080} 
.graph-vertical-bars-holder.with-x-label {height: 70%}
.graph-vertical-bars-holder-gadget-full {width: 96%; border-left: 1px solid #808080}
.graph-vertical-bar {float: left; width: 2.25em; display: inline; position: absolute; bottom: 0; border-right: 0.1em #FFFFFF solid; border-bottom: 0.4em solid #737373}
.graph-vertical-label-holder {float: left; width: 90%; height: 10%; margin: 0 auto; display: block; margin-left: 2.2em; position: relative}
.graph-vertical-label-holder-gadget-full {width: 95%; border-left: 1px solid #808080; height: 9%}
.graph-vertical-label {float: left; height: 100%; display: inline; border-right: 0.1em transparent solid; text-align: center; font-weight: bold; margin-top: 10px}
.graph-vertical-label-gadget-full{width: 33.5px; margin-right: 10px; font-weight: normal; color: #808080; font-size: 12px}
.graph-vertical-bar-base {background-color:#808080;position:absolute; top:91.9%; height:1px; width: 94%; left:-20px}
.graph-posneg-horizontal-bar-full {width: 100%!important}
.graph-posneg-horizontal-divider {width: 2%; height: 100%; float: left; background-color: #737373}
.graph-posneg-horizontal-threshold {position: relative}
.graph-posneg-horizontal-threshold-line {width: 4px; height: 1.85em; float: left; background-color: #0A214F; position: absolute; margin-top: 1px}
.graph-vertical-threshold-line {height: 4px; float: left; background-color: #0A214F; position: absolute; float: left}
#standard-left-col .graph-posneg-horizontal-threshold {margin-left: 4em; width: 19em; float: left}
#standard-left-col .graph-posneg-horizontal-threshold-line {height: 2em}
#standard-left-col .graph-vertical-threshold {margin-bottom: 4em; float: left}
#standard-left-col .graph-vertical-threshold-line {float: left; width: 2.25em}
#standard-right-col .graph-posneg-horizontal-threshold {width: 20em; float: left}
.graph-vertical-label-holder-gadget-full > DIV:first-child{margin-left: 10px}
.graph-vertical-bar-holder {height: 100%; float: left}
.graph-posneg-horizontal-scorebar {height: 100%}
.graph-posneg-horizontal-innerscorebar {height: 100%; float: left}
.graph-posneg-horizontal-scorebar-positive {float: left}
.graph-posneg-horizontal-scorebar-negative {float: right}
.graph-posneg-horizontal-bar-ontop {position: absolute; color: #ffffff; right: 0; width: 100%; margin-left: auto; margin-right: auto; text-align: center; margin-top: 0.6em}
.graph-axis-container {float: left; margin-bottom: 1em; margin-left: 1em; border: 1px solid inherit; width: 100%}
.graph-axis-prompt {width: 60%; float: left; height: 2em; text-align: center; margin-top: 0.2em}
.graph-axis-container {color: #808080}
.graph-axis-neg-label {text-align: right}
.graph-standard-holder {border: 1px #CCCCCC solid; width: 80%; float: left; height: 1em}
.graph-standard-scorebar {height: 100%; float: right}
/*Spider graph styles*/
.spider-graph-container {width: 44em; height: 30em; margin: 5em auto; position: relative}
.spider-graph-container .diagramText {z-index: 50; width: 10em; min-height: 2em}
.spider-graph-container .diagramText a {text-decoration: none; max-width: 5em !important}
.spider-graph-container .diagramText a:hover {text-decoration: underline}
.spider-graph-container .diagramText a span {position: absolute; width: 60px}
.spider-graph-container .spider-graph-label {z-index: 50; position: absolute; font-size: 0.9em; text-shadow: 0px 0px 5px white}
.spider-graph-key {width: 20em; border: 1px solid gray; margin: 1em auto; padding: 0.5em;}
.spider-graph-key-item {margin: 0.5em;}
.spider-graph-key-item .award-traffic-light {margin-right: 1em;}
.spider-graph-key-item .award-category {background: #0A214F}
#context-sidegadget-holder .standard-gauge P {text-align: center}

.award-slice-general {color: #e6194B; background-color: #e6194B}
.award-slice-openportdetected {color: #3cb44b; background-color: #3cb44b}
.award-slice-productdetection {color: #ffe119; background-color: #ffe119}
.award-slice-servicedetection {color: #4363d8; background-color: #4363d8}
.award-slice-sslandtls {color: #f58231; background-color: #f58231}
.award-slice-webapplicationabuses {color: #911eb4; background-color: #911eb4}
.award-slice-webservers {color: #42d4f4; background-color: #42d4f4}
.award-slice-bufferoverflow {color: #f032e6; background-color: #f032e6}
.award-slice-cgiabuses {color: #dafa89; background-color: #dafa89}
.award-slice-cisco {color: #fabed4; background-color: #fabed4}
.award-slice-databases {color: #469990; background-color: #469990}
.award-slice-defaultaccounts {color: #dcbeff; background-color: #dcbeff}
.award-slice-denialofservice {color: #9A6324; background-color: #9A6324}
.award-slice-dns {color: #fffac8; background-color: #fffac8}
.award-slice-ftp {color: #800000; background-color: #800000}
.award-slice-general {color: #aaffc3; background-color: #aaffc3}
.award-slice-misc {color: #808000; background-color: #808000}
.award-slice-portscanners {color: #ffd8b1; background-color: #ffd8b1}
.award-slice-remotefileaccess {color: #000075; background-color: #000075}
.award-slice-rpc {color: #a9a9a9; background-color: #a9a9a9}
.award-slice-settings {color: #2f4f4f; background-color: #2f4f4f}
.award-slice-smtpproblems {color: #ffa07a; background-color: #ffa07a}
.award-slice-unclassified {color: #9acd32; background-color: #9acd32}
.award-slice-windows {color: #4f2d06; background-color: #4f2d06}
.award-slice-windowsmicrosoftbulletins {color: #4f2d06; background-color: #4f2d06}

.graph-horizontal, .graph-horizontal-key {width: calc(100% - 30px); float: left; margin-bottom: 15px; margin-left: 15px; margin-right: 15px}
.graph-horizontal-key {margin-bottom: 30px; margin-top: 15px}
.graph-horizontal-holder {width: 100%; float: left}
.graph-horizontal-bar {height: 54px; float: left; position: absolute; margin-top:3px}
.graph-horizontal-name {right: 15px; font-weight: 700; position: absolute; margin-top: 22px; z-index: 0; max-width: 90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}
.graph-horizontal-name-core {float: none!important; color: #808080; border: 0px !important}
.graph-horizontal-score {float: left; width: 7%; margin-top: 22px; text-align: right; color: #808080}
.graph-horizontal-extra {float: left; width: 10%}
.graph-horizontal-extra .questionnaire-answers-section-question-scorepriority {margin-top: 5px; margin-left: 15px; float: left}
.graph-horizontal-holder {overflow-y: hidden}
.graph-horizontal-background, .graph-horizontal-legend {width: 90%; float: left}
.graph-horizontal-background {width: 90%; float: left; border-left: 1px solid #CACACA; position: relative}
.graph-horizontal-background SPAN {width: 10%; box-sizing: border-box; border-right: 1px solid #F2F2F2; height: 60px; float: left}
.graph-horizontal-background SPAN.graph-horizontal-primary {border-right: 1px solid #CACACA}
.graph-horizontal-legend {margin-top: 10px; font-size: 14px; color: #BBBBBB}
.graph-horizontal-legend-title {width: 90%; text-align: center}
.graph-horizontal-legend SPAN {width: 10%; height: 20px; float: left; text-align: right}
.graph-horizontal-legend SPAN.graph-horizontal-start {width: 0%}
.graph-horizontal-legend SPAN.graph-horizontal-primary {font-weight: 700}
.graph-horizontal-hint {font-weight: 700; margin-bottom: 5px; color: #616161}
.graph-horizontal-key LI {display: inline; float: left; padding-top: 5px; padding-bottom: 5px; border-left: 5px solid #515151; margin-right: 15px; padding-left: 10px; color: #BBBBBB; margin-bottom: 5px}
.graph-horizontal-key LI:last-child {margin-right: 0px}
.graph-horizontal-key LI.key-previous {border-left: 5px solid #BFC1C3}
.graph-horizontal-key .indicator-full {width:100%}
.graph-horizontal-marker {border-left: 5px solid #515151; z-index: 100; position: absolute; height: 100%; float: left; opacity: 0; transition: opacity 0.4s ease-out}
.graph-horizontal-marker-previous {height: 100% !important; transition: none !important}
.graph-horizontal-marker-score {height: 100% !important; transition: opacity 0.35s ease-out !important}
/*.graph-horizontal-marker.graph-horizontal-marker-previous {opacity: 1}*/
.graph-horizontal-marker.show-marker {transition: opacity 0.35s ease-out, height 0.35s ease-out, top 0.35s ease-out; opacity: 1}

/*small sized bar garphs to fit in right column*/
.graph-horizontal-multi-small .graph-horizontal-score {width: 16%}
.graph-horizontal-multi-small .graph-horizontal-background, .graph-horizontal-multi-small .graph-horizontal-legend {width: 80%}
.graph-horizontal-multi-small .graph-horizontal-background SPAN {width: 25%}
.graph-horizontal-multi-small .graph-horizontal-legend SPAN {width: 25%}
.graph-horizontal-multi-small .graph-horizontal-legend SPAN.graph-horizontal-start {width: 0}

.graph-horizontal-faded .graph-horizontal-bar {opacity: 0.5}
.graph-horizontal-multi .graph-horizontal-bar {height: 30px; opacity: 0.5}
.graph-horizontal-multi .graph-horizontal-background SPAN {height: 36px}
.graph-horizontal-multi .graph-horizontal-name, .graph-horizontal-multi .graph-horizontal-score {margin-top: 10px}

.graph-horizontal-bar-single {height: 54px!important; ; opacity: 1!important}
.graph-horizontal-background-single SPAN {height: 60px!important}
.graph-horizontal-name-single, .graph-horizontal-score-single {margin-top: 22px!important}

@media (max-width: 1020px) {
	.graph-horizontal, .graph-horizontal-key {width: 100%; float: left; margin-bottom: 15px; margin-left: 0px; margin-right: 0px}
	.graph-horizontal-score {width: 9%}
}

.ring-chart { width: 180px; height: 180px; }
.ring-chart .circle-bg { fill: none; stroke-width: 6; }
.ring-chart .circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.ring-chart .percentage { font-size: 0.5em; text-anchor: middle; font-weight: bold; }

.ring-chart.animate .circle { animation: progress 1s ease-out forwards; }
.ring-chart.animate @keyframes progress { 0% { stroke-dasharray: 0 100; } }

/* pale colour is hex equivalent of 50% opacity over white background */
.ring-chart .circular-chart.grey .circle { stroke: #949B93 !important; }
.ring-chart .circular-chart.grey .percentage { fill: #C9CDC9; }
.ring-chart .circular-chart.grey .circle-bg { stroke: #C9CDC9; }

.ring-chart .circular-chart.red .circle { stroke: #9E1420 !important; }
.ring-chart .circular-chart.red .percentage { fill: #CE888E; }
.ring-chart .circular-chart.red .circle-bg { stroke: #CE888E; }

.ring-chart .circular-chart.orange .circle { stroke: #E43B27!important; }
.ring-chart .circular-chart.orange .percentage { fill: #F19C92; }
.ring-chart .circular-chart.orange .circle-bg { stroke: #F19C92; }

.ring-chart .circular-chart.green .circle { stroke: #149E2B !important; }
.ring-chart .circular-chart.green .percentage { fill: #88CE94; }
.ring-chart .circular-chart.green .circle-bg { stroke: #88CE94; }

.ring-chart .circular-chart.green .circle { stroke: #85994b !important; }
.ring-chart .circular-chart.green .percentage { fill: #C1CBA4; }
.ring-chart .circular-chart.green .circle-bg { stroke: #C1CBA4; }

.ring-chart .circular-chart.green .circle { stroke: #006435 !important; }
.ring-chart .circular-chart.green .percentage { fill: #7EB099; }
.ring-chart .circular-chart.green .circle-bg { stroke: #7EB099; }

.dial-chart { width: 180px; height: 180px; }
/* .dial-chart svg { height: 100%; width: 100%; } */
.dial-chart .dial-bg { stroke-dasharray: 11.11,38.89; fill: none; stroke-width: 6; }
.dial-chart .warning { fill: none; stroke-width: 6; stroke: #f00; z-index: 10; opacity: 0; }
.dial-chart.max .warning { opacity: 1; }
.dial-chart .dial-bg.red { stroke: #ff0000 !important; }
.dial-chart .dial-bg.darkorange { stroke: #ff6600 !important; }
.dial-chart .dial-bg.orange { stroke: #ffcc00 !important; }
.dial-chart .dial-bg.yellow { stroke: #ffff00 !important; }
.dial-chart .dial-bg.lightgreen { stroke: #66ff00 !important; }
.dial-chart .dial-bg.midgreen { stroke: #00cc00 !important; }
.dial-chart .dial-bg.darkgreen { stroke: #006600 !important; }
.dial-chart .needle { stroke-linejoin: round; stroke:black; }

#results_graph_overall_score:after, #results_graph_sustainability_themes:after {content: ""; display: block; clear: both}