@charset "UTF-8";
/* CSS Document */
/* font styling */
body {
    font-family: "SiemensSans03",-apple-system,BlinkMacSystemFont,Roboto,Arial,sans-serif;
	color: #666666;
}
	
.h1, h1 {
	font-family: 'SiemensSans06'; 
	font-weight:normal;
	font-style:normal;
    font-size: 2.0rem;
	color: #2d373c;
}
.h2, h2, .h3, h3, .h4, h4, .h5, h5 {
	font-family: 'SiemensSans03';
	font-weight:normal;
	font-style:normal;
	color: #2d373c;
}
.h4, h4 {
    font-size: 1.25rem;
    font-family: 'SiemensSans08',Arial,sans-serif;
    line-height: 1.3;
    margin-top: -0.25em;
    margin-bottom: .85em;
}
.h5, h5 {
    font-size: 1.5rem;
    font-family: 'SiemensSans03',Arial,sans-serif;
    line-height: 1.3;
    margin-top: -0.25em;
    margin-bottom: .85em;
}
.underscore {
	font-family: 'SiemensSans33';
}
/* The header logo */
.header__logo {
    float: none;
    margin-top: 20px;
	max-height: 120px;
}
.header__logo__claim img {
 	max-height: 76px;
}
/* the border below the header */
.border-bottom {
    border-bottom: 2px solid #dfe6ed !important;
}
/* the top navigation bar */
a {
    color: #788791 !important;
    text-decoration: none;
    background-color: transparent;
}
a.text-dark:focus, a.text-dark:hover {
    color: #788791 !important;
}
/*Make the card titles bolder*/
.card-title {
	font-family: 'SiemensSans06';
}
.row {
    margin-right: 15px;
    margin-left: 15px;
}

/* The LCD display screen on the Virtual Relay */
/* The LCD display screen the full size of the screen (no white margin) */
#screenDisplay { 
	width: 38.9%; 
	height: 29.01%;
	/*border:thin red solid;*/
	z-index: 9999; 
	position: absolute; 
	top: 20.7%; 
	left: 13.3%; 
	background-color: none;
}

/* for the medium width relay */
#screenDisplay.medium { 
	width: 29.2%;
	height: 29.5%;
	border: none;
	z-index: 9999;
	position: absolute;
	top: 21.6%;
	left: 10.2%;
	background-color: none;
}
/* for the wider relay */
#screenDisplay.wide { 
	width: 19.5%;
	height: 29.3%;
	border: none;
	z-index: 9999;
	position: absolute;
	top: 21.6%;
	left: 6.6%;
	background-color: none;
}
#htmlText {
	font-family: 'LCDdisplay';
	/*font-family: 'LCDdisplaySymbol';*/
	font-size: inherit;
	overflow: auto; 
	width: 100%; 
	height: 100%;
	border-radius: 2%;
	border: 0.6em solid white;
	padding: 0; 
	z-index: 1010;  
	line-height: 1.03em;
	background-color:#ecf3f4; 
	color:#5a6cbb;
	padding:1% 1% 0 1%;
	/*visibility:hidden;*/
}
#htmlText p {
    margin-top: 0;
    margin-bottom: 0;
	z-index: 1010; 
}
#htmlText p.reverse_text {
	margin-bottom: 0;
}
#htmlText p.underline {
	margin-top: -1.4em;
	margin-bottom: -0.2em;
	letter-spacing: -0.15em;
}

#htmlText svg {
	/*position: absolute;*/
}
#htmlText rect {
	z-index: 500;
}

/*svg.rule { /*the underline near the top of the screen display
	margin-top: -0.2em;
	margin-bottom: 0.6em;
	padding-top: 0;
	width: 92%;
	height: 2%;
	position: absolute;
	/*border: 1px solid red;
	/*display: inline-block;
}
svg.rule rect.underline {
	 width: 100%;
	 height: 1px;
}
*/
#svgText { 
	font-family: 'LCDdisplay';
	/*font-family: 'LCDdisplaySymbol';*/
	font-size: inherit;
	overflow: hidden; 
	width: 100%; 
	height: 97%;
	border-radius: 2%;
	border: 0.6em solid white;
	padding: 0; 
	z-index: 1010;  
	line-height: 1.16em;
	background-color: #ecf3f4; /*very pale blue-grey */
	color: #5a6cbb;	
}

#screenDisplay.medium #svgText { 
	height: 98%;
}
#screenDisplay.wide #svgText { 
	height: 99%;
}
#svgText text.siemens_logo {
	/*font-size: 2.2em;*/
	font-size: 3.0em;
	font-family: "SiemensSans06"; 
	font-weight:900;
}
#svgText text.reyrolle {
	font-size: 1.4em;
	font-weight:900;
}
#svgText text.overcurrent {
	font-size: 1em;
	font-weight:900;
}

/********************************* the start screen animation sequence for the series 5 relays ************************/

#svgText.start_screen, #svgText text.start_info, #svgText text.start_file_system, #svgText text.start_software, #svgText rect.progress {
	/* hide the start screen when the page is first loaded */
	visibility:visible;
  	opacity:0;
  	transition:visibility 0s linear 0.1s,opacity 0.1s linear;
}

.ready #svgText.start_screen { 
	/* wait until the page is fully loaded then after a short delay 
	turn on the display screen */
	visibility:visible;
  	opacity:1;
  	transition-delay:0.5s;
}

.ready #svgText text.start_file_system {
	/* first show 'Starting File System' */
	visibility:visible;
  	animation-delay: 2s;
	 -webkit-animation: start_file_system 5s linear forwards;
    animation: start_file_system 5s linear forwards;
}
@-moz-keyframes start_file_system { 0%,20%,60% { opacity: 0; } 21%,59% { opacity: 1; } }
@-webkit-keyframes start_file_system { 0%,20%,60% { opacity: 0; } 21%,59% { opacity: 1; } }
@keyframes start_file_system { 0%,20%,60% { opacity: 0; } 21%,59% { opacity: 1; } }

.ready #svgText text.start_software {
	/* now show 'Starting Software' */
	visibility:visible;
  	animation-delay: 2s;
	 -webkit-animation: start_software 5s linear forwards;
    animation: start_software 5s linear forwards;
}
@-moz-keyframes start_software { 0%,59%,91% { opacity: 0; } 60%,90% { opacity: 1; } }
@-webkit-keyframes start_software { 0%,59%,91% { opacity: 0; } 60%,90% { opacity: 1; } }
@keyframes start_software { 0%,59%,91% { opacity: 0; } 60%,90% { opacity: 1; } }

.ready #svgText text.start_info {
	/* now turn on the relay info */
	animation-delay: 2s;
	 -webkit-animation: start_info 15s linear forwards;
    animation: start_info 15s linear forwards;
}
@-moz-keyframes start_info { 0%,45%, 100% { opacity: 0; } 46%,99% { opacity: 1; } }
@-webkit-keyframes start_info { 0%,45%, 100% { opacity: 0; } 46%,99% { opacity: 1; } }
@keyframes start_info { 0%,45%,100% { opacity: 0; } 46%,99% { opacity: 1; } }

.ready #svgText text.siemens_logo, .ready #svgText image.siemens_claim,
.ready #svgText text.reyrolle, .ready #svgText text.overcurrent {
	/* turn off the logo etc at the end of the sequence */
	animation-delay: 2s;
	 -webkit-animation: siemens_logo 15s linear forwards;
    animation: siemens_logo 15s linear forwards;
}
@-webkit-keyframes siemens_logo { 0%,100% { opacity: 0; } 1%,99% { opacity: 1; } }
@keyframes siemens_logo { 0%,100% { opacity: 0; } 1%,99% { opacity: 1; } }


/********************************* the progress bar ************************************/
.ready #svgText #p0.progress {
	animation-delay: 7s;
	 -webkit-animation: progress0 15s linear forwards;
    animation: progress0 15s linear forwards;
}
@-moz-keyframes progress0 { 0%,40%, 100% { opacity: 0; } 41%,99% { opacity: 1; } }
@-webkit-keyframes progress0 { 0%,40%, 100% { opacity: 0; } 41%,99% { opacity: 1; } }
@keyframes progress0 { 0%,40%, 100% { opacity: 0; } 41%,99% { opacity: 1; } }

.ready #svgText #p1.progress {
	animation-delay: 7s;
	 -webkit-animation: progress1 15s linear forwards;
    animation: progress1 15s linear forwards;
}
@-moz-keyframes progress1 { 0%,43%, 100% { opacity: 0; } 44%,99% { opacity: 1; } }
@-webkit-keyframes progress1 { 0%,43%, 100% { opacity: 0; } 44%,99% { opacity: 1; } }
@keyframes progress1 { 0%,43%, 100% { opacity: 0; } 44%,99% { opacity: 1; } }

.ready #svgText #p2.progress {
	animation-delay: 7s;
	 -webkit-animation: progress2 15s linear forwards;
    animation: progress2 15s linear forwards;
}
@-moz-keyframes progress2 { 0%,46%, 100% { opacity: 0; } 47%,99% { opacity: 1; } }
@-webkit-keyframes progress2 { 0%,46%, 100% { opacity: 0; } 47%,99% { opacity: 1; } }
@keyframes progress2 { 0%,46%, 100% { opacity: 0; } 47%,99% { opacity: 1; } }

.ready #svgText #p3.progress {
	animation-delay: 7s;
	 -webkit-animation: progress3 15s linear forwards;
    animation: progress3 15s linear forwards;
}
@-moz-keyframes progress3 { 0%,49%, 100% { opacity: 0; } 50%,99% { opacity: 1; } }
@-webkit-keyframes progress3 { 0%,49%, 100% { opacity: 0; } 50%,99% { opacity: 1; } }
@keyframes progress3 { 0%,49%, 100% { opacity: 0; } 50%,99% { opacity: 1; } }

.ready #svgText #p4.progress {
	animation-delay: 7s;
	 -webkit-animation: progress4 15s linear forwards;
    animation: progress4 15s linear forwards;
}
@-moz-keyframes progress4 { 0%,52%, 100% { opacity: 0; } 53%,99% { opacity: 1; } }
@-webkit-keyframes progress4 { 0%,52%, 100% { opacity: 0; } 53%,99% { opacity: 1; } }
@keyframes progress4 { 0%,52%, 100% { opacity: 0; } 53%,99% { opacity: 1; } }

.ready #svgText #p5.progress {
	animation-delay: 7s;
	 -webkit-animation: progress5 15s linear forwards;
    animation: progress5 15s linear forwards;
}
@-moz-keyframes progress5 { 0%,55%, 100% { opacity: 0; } 56%,99% { opacity: 1; } }
@-webkit-keyframes progress5 { 0%,55%, 100% { opacity: 0; } 56%,99% { opacity: 1; } }
@keyframes progress5 { 0%,55%, 100% { opacity: 0; } 56%,99% { opacity: 1; } }

.ready #svgText #p6.progress {
	animation-delay: 7s;
	 -webkit-animation: progress6 15s linear forwards;
    animation: progress6 15s linear forwards;
}
@-moz-keyframes progress6 { 0%,58%, 100% { opacity: 0; } 59%,99% { opacity: 1; } }
@-webkit-keyframes progress6 { 0%,58%, 100% { opacity: 0; } 59%,99% { opacity: 1; } }
@keyframes progress6 { 0%,58%, 100% { opacity: 0; } 59%,99% { opacity: 1; } }

.ready #svgText #p7.progress {
	animation-delay: 7s;
	 -webkit-animation: progress7 15s linear forwards;
    animation: progress7 15s linear forwards;
}
@-moz-keyframes progress7 { 0%,61%, 100% { opacity: 0; } 62%,99% { opacity: 1; } }
@-webkit-keyframes progress7 { 0%,61%, 100% { opacity: 0; } 62%,99% { opacity: 1; } }
@keyframes progress7 { 0%,61%, 100% { opacity: 0; } 62%,99% { opacity: 1; } }

.ready #svgText #p8.progress {
	animation-delay: 7s;
	 -webkit-animation: progress8 15s linear forwards;
    animation: progress8 15s linear forwards;
}
@-moz-keyframes progress8 { 0%,64%, 100% { opacity: 0; } 65%,99% { opacity: 1; } }
@-webkit-keyframes progress8 { 0%,64%, 100% { opacity: 0; } 65%,99% { opacity: 1; } }
@keyframes progress8 { 0%,64%, 100% { opacity: 0; } 65%,99% { opacity: 1; } }

.ready #svgText #p9.progress {
	animation-delay: 7s;
	 -webkit-animation: progress9 15s linear forwards;
    animation: progress9 15s linear forwards;
}
@-moz-keyframes progress9 { 0%,67%, 100% { opacity: 0; } 68%,99% { opacity: 1; } }
@-webkit-keyframes progress9 { 0%,67%, 100% { opacity: 0; } 68%,99% { opacity: 1; } }
@keyframes progress9 { 0%,67%, 100% { opacity: 0; } 68%,99% { opacity: 1; } }

.ready #svgText #p10.progress {
	animation-delay: 7s;
	 -webkit-animation: progress10 15s linear forwards;
    animation: progress10 15s linear forwards;
}
@-moz-keyframes progress10 { 0%,70%, 100% { opacity: 0; } 71%,99% { opacity: 1; } }
@-webkit-keyframes progress10 { 0%,70%, 100% { opacity: 0; } 71%,99% { opacity: 1; } }
@keyframes progress10 { 0%,70%, 100% { opacity: 0; } 71%,99% { opacity: 1; } }

.ready #svgText #p11.progress {
	animation-delay: 7s;
	 -webkit-animation: progress11 15s linear forwards;
    animation: progress11 15s linear forwards;
}
@-moz-keyframes progress11 { 0%,73%, 100% { opacity: 0; } 74%,99% { opacity: 1; } }
@-webkit-keyframes progress11 { 0%,73%, 100% { opacity: 0; } 74%,99% { opacity: 1; } }
@keyframes progress11 { 0%,73%, 100% { opacity: 0; } 74%,99% { opacity: 1; } }

.ready #svgText #p12.progress {
	animation-delay: 7s;
	 -webkit-animation: progress12 15s linear forwards;
    animation: progress12 15s linear forwards;
}
@-moz-keyframes progress12 { 0%,76%, 100% { opacity: 0; } 77%,99% { opacity: 1; } }
@-webkit-keyframes progress12 { 0%,76%, 100% { opacity: 0; } 77%,99% { opacity: 1; } }
@keyframes progress12 { 0%,76%, 100% { opacity: 0; } 77%,99% { opacity: 1; } }

.ready #svgText #p13.progress {
	animation-delay: 7s;
	 -webkit-animation: progress13 15s linear forwards;
    animation: progress13 15s linear forwards;
}
}
@-moz-keyframes progress13 { 0%,79%, 100% { opacity: 0; } 80%,99% { opacity: 1; } }
@-webkit-keyframes progress13 { 0%,79%, 100% { opacity: 0; } 80%,99% { opacity: 1; } }
@keyframes progress13 { 0%,79%, 100% { opacity: 0; } 80%,99% { opacity: 1; } }

.ready #svgText #p14.progress {
	animation-delay: 7s;
	 -webkit-animation: progress14 15s linear forwards;
    animation: progress14 15s linear forwards;
}
@-moz-keyframes progress14 { 0%,82%, 100% { opacity: 0; } 83%,99% { opacity: 1; } }
@-webkit-keyframes progress14 { 0%,82%, 100% { opacity: 0; } 83%,99% { opacity: 1; } }
@keyframes progress14 { 0%,82%, 100% { opacity: 0; } 83%,99% { opacity: 1; } }

.ready #svgText #p15.progress {
	animation-delay: 7s;
	 -webkit-animation: progress15 15s linear forwards;
    animation: progress15 15s linear forwards;
}
@-moz-keyframes progress15 { 0%,85%, 100% { opacity: 0; } 86%,99% { opacity: 1; } }
@-webkit-keyframes progress15 { 0%,85%, 100% { opacity: 0; } 86%,99% { opacity: 1; } }
@keyframes progress15 { 0%,85%, 100% { opacity: 0; } 86%,99% { opacity: 1; } }

.ready #svgText #p16.progress {
	animation-delay: 7s;
	 -webkit-animation: progress16 15s linear forwards;
    animation: progress16 15s linear forwards;
}
@-moz-keyframes progress16 { 0%,88%, 100% { opacity: 0; } 89%,99% { opacity: 1; } }
@-webkit-keyframes progress16 { 0%,88%, 100% { opacity: 0; } 89%,99% { opacity: 1; } }
@keyframes progress16 { 0%,88%, 100% { opacity: 0; } 89%,99% { opacity: 1; } }

.ready #svgText #p17.progress {
	animation-delay: 7s;
	 -webkit-animation: progress17 15s linear forwards;
    animation: progress17 15s linear forwards;
}
@-moz-keyframes progress17 { 0%,91%, 100% { opacity: 0; } 92%,99% { opacity: 1; } }
@-webkit-keyframes progress17 { 0%,91%, 100% { opacity: 0; } 92%,99% { opacity: 1; } }
@keyframes progress17 { 0%,91%, 100% { opacity: 0; } 92%,99% { opacity: 1; } }

.ready #svgText #p18.progress {
	animation-delay: 7s;
	 -webkit-animation: progress18 15s linear forwards;
    animation: progress18 15s linear forwards;
}
@-moz-keyframes progress18 { 0%,94%, 100% { opacity: 0; } 95%,99% { opacity: 1; } }
@-webkit-keyframes progress18 { 0%,94%, 100% { opacity: 0; } 95%,99% { opacity: 1; } }
@keyframes progress18 { 0%,94%, 100% { opacity: 0; } 95%,99% { opacity: 1; } }

.ready #svgText #p19.progress {
	animation-delay: 7s;
	 -webkit-animation: progress19 15s linear forwards;
    animation: progress19 15s linear forwards;
}

@-moz-keyframes progress19 { 0%,97%, 100% { opacity: 0; } 98%,99% { opacity: 1; } }
@-webkit-keyframes progress19 { 0%,97%, 100% { opacity: 0; } 98%,99% { opacity: 1; } }
@keyframes progress19 { 0%,97%, 100% { opacity: 0; } 98%,99% { opacity: 1; } }

/********************** end progress bar ****************************************/


/************************* the second screen of text on startup *****************/

#svgText text.text_7SR5 {
	
	font-size: 2em;
	font-weight:900;
	letter-spacing: 0.2em;
}

#svgText text.screen2, #svgText rect.screen2, #svgText line.screen2, #indicatorLights circle.screen2 , #indicatorLights.wide circle.screen2{
	/* hide screen 2 when the page is first loaded */
	visibility:visible;
  	opacity:0;
  	transition:visibility 0s linear 0.1s,opacity 0.1s linear;
}
.ready #svgText text.screen2, .ready #svgText rect.screen2, .ready #svgText line.screen2, .ready #indicatorLights circle.screen2, #indicatorLights.wide circle.screen2 {
	animation-delay: 7s;
	 -webkit-animation: screen2 16s linear forwards;
    animation: screen2 16s linear forwards;
}
@-webkit-keyframes screen2 { 0%,97% { opacity: 0; } 98%,100% { opacity: 1; } }
@keyframes screen2 { 0%,97%  { opacity: 0; } 98%,100% { opacity: 1; } }


/********************** end second screen ****************************************/


#svgText text,#svgText rect, #htmlText rect { 
	fill: #5a6cbb;/*dark blue */
}
#svgText .reverse_text{ /*white text on a background */
	fill: #ecf3f4; /*very pale blue-grey */
}

#svgText line {
	stroke:#5a6cbb;
	stroke-width:1;
}
.boldText {
	font-weight: 600;
}
.screen_off {
	visibility:hidden;
}
.reverse_text { /*white text on a blue background */
	background-color:#5a6cbb;
	color: #ffffff;
	padding: 1px;
}
a.rev_text { /*white text on buttons */
	color: #ffffff!important;
}

/* the indicator lights on the face of the relay */
#indicatorLights {
	/*border:thin red solid;*/
	width: 36.0%; 
	height: 62.6%;
	z-index: 9999; 
	position: absolute; 
	top: 10.9%; 
	left: 56.0%; 
	background-color: none;
}
#indicatorLights.medium {
	/*border:thin red solid;*/
	width: 36.0%; 
	height: 64.0%;
	z-index: 9999; 
	position: absolute; 
	top: 11.5%; 
	left: 41.2%; 
	background-color: none;
}
#indicatorLights.wide {
	/*border:thin red solid;*/
	width: 36.0%; 
	height: 64.0%;
	z-index: 9999; 
	position: absolute; 
	top: 11.5%; 
	left: 26.2%; 
	background-color: none;
}

/*.green_light {
	stroke: #4c8a09;
	stroke-width: 1;
	fill: #7be30a;
}*/
.green_light {
	stroke: #4c8a09;
	stroke-width: 1;
	fill: #D2FF33;
}
.red_light {
	stroke: #B20000;
	stroke-width: 2;
	fill: #FC6D0E;
}
.amber_light {
	stroke: #f7941d;
	stroke-width: 2;
	fill: #ffff00;
}
.off {
	visibility:hidden;
}
/*the padlock icon */
#padlock_open {
	position:relative;
	top: -2.7em;
	margin-bottom: -2.4em;
	left: 95%;
	width: 5%;
	height:10%;
}
#padlock_open rect.keyhole, #svg_padlock_open rect.keyhole {
	fill: #ffffff;
}
#padlock_open line, #svg_padlock_open line{
	stroke: #5a6cbb;/*dark blue */
	stroke-width: 1;
}
/*the padlock icon to be included on the SVG text screen */
#svg_padlock_open {
	/*position:relative;*/
}
/* re-style a primary button to Siemens colours*/
.btn-primary {
    color: #fff!important;
    background-color: #2387aa;
    border-color: #2387aa;
}
.btn-primary:hover {
	background-color: #005578;
    border-color: #005578;
}
.content-teaser {
	margin-bottom: 30px;
}
/* the blue panel on the index page */
#hero_image {
	position:relative;
}
#intro_panel h1 {
	color: #fff;
}

#intro_panel {
    background: linear-gradient(to right,rgba(80,190,190,0.7) 0,rgba(0,153,153,0.7) 50%,rgba(0,153,176,0.7) 83%,rgba(0,153,203,0.7) 100%);
    /*width: 40.67797%;*/
	max-width: 500px;
	height: 70%;
    margin: 40px 0;
    padding: 20px 30px;
	color: #fff;
}
#intro_panel {
	position: absolute;
  	top:1%;
  	left: 2%;
	z-index: 100;
	overflow:hidden;
	
}
/* small screens */
@media only screen and (max-width: 960px) {
	/* make the intro panel drop under the image on small screens */ 
	#intro_panel {
		position: relative;
  		max-width: 100%;
		top:0;
  		left: 0;
		margin: 0;
	}
	/* adjust the position of the screen display and indicator lights */
	#screenDisplay {  
		height: 29.7%;
		top: 21.6%; 
	}
	#indicatorLights {
		height: 64%;
		top: 11.5%;
	}
}
.panel_text {
	font-size: 1.1em;
}
.panel_headline {
    font-size: 2em;
    font-family: "SiemensSans03",Arial,sans-serif;
    line-height: 1.1;
}
.btn {
	border-radius: 0;
}

.btn-warning, a.btn-warning, a.btn-warning:visited {
    color: #fff!important;
    background-color: #ffb900;
    border-color: #ffb900;
}
.btn-warning:hover, a.btn-warning:hover, href:hover {
	 background-color: #eb780a;
	 border-color: #eb780a;
	 color: #fff!important;
}
.screen_border {
	/* the screen border on the function key screens */
	stroke-width: 0.3em;
	stroke: #5a6cbb;
	fill: #ecf3f4!important; 
	fill-opacity: 1;
	
}
.svgCentredText {
	text-anchor: middle;
}
.flashing_block {
	animation:flashingBlock 1s infinite;
}
@keyframes flashingBlock{
	0%{		fill: #5a6cbb; /* dark blue*/ }
	48%{	fill: #5a6cbb; /*very pale blue-grey */	}
	50%{	fill: #ecf3f4; /*very pale blue-grey */	}
	98%{	fill: #ecf3f4; /*very pale blue-grey */	}
	100%{	fill: #5a6cbb; /* dark blue*/ }
}
.menu_pointer {
	fill: #ecf3f4!important;/*very pale blue-grey */
}
.menu_pointer_dk_blue {
	fill: #5a6cbb!important;/*dark blue */
}
#svgText rect.scrollbar {
	fill: #ecf3f4;/*very pale blue-grey */
	stroke: #5a6cbb; /* dark blue*/
	stroke-width: 0.5%;
}
#svgText rect.scrollbar_inner {
	fill: #5a6cbb;/*dark blue */
	stroke: #5a6cbb; /* dark blue*/
	stroke-width: 0.5%;
}
text.largeText {
	font-size: 1.4em;
	font-weight: 300;
}
/* the div conatining the relay image */
#relay {
	 display: inline-block; 
	 position: relative; 
	 max-width:520px;
}
/* the div containing the medium width relay image */
#relay_medium {
	 display: inline-block; 
	 position: relative; 
	 max-width:655px; 
}
/* the div conatining the wide relay image */
#relay_wide {
	 display: inline-block; 
	 position: relative; 
	 max-width:1202px;
}
/* The Fault Graphics */
#fault_graphics {
	display:inline-block; 
	position: relative; 
	max-width:1202px;
	max-height: 700px;
	padding: 2% 2em;
	margin: 1em auto 3.6em auto;
	/*margin-bottom: 3.6em;
	margin-left: auto;
	margin-left: 5% !important;*/
	/*background-color: #becdd7; /*Siemens Stone Light 35% */
	/*background-color: #CBDCE9; /*Siemens Stone Light 35% - Even lighter*/
	background-color: #EBF0F5; /*Siemens Stone Light 35% - Very light indeed*/
}

.btn-sm {
    padding: .25rem .5rem;
    font-size: .875rem;
    line-height: 1.5;
}

#fault_graphics h5 {
	 margin-bottom: 0.25rem;
}

#fault_graphics img {
	margin-top:0.5rem; 
	/*max-height: 300px;*/
}

#fault_graphics a:hover {
	text-decoration: none;
	/*color: #eb780a !important; Siemens Accent Yellow Dark*/
	color: #fff;
}
#fault_graphics ul {
	list-style-type: none;
  	margin: 0;
  	padding: 0 0 0.5em 0;
}
#fault_graphics a {
	line-height: 1.5;
	padding: .25rem .5rem;
	font-size: .875rem;	
}
element {
}
/* ---- tweaks to the slideshow here ------ */
.carousel-indicators li {
    width: 12px;
    height: 12px;
    border-radius: 3px;
	margin-left: 12px;
    background-color: #d0d0d0;
}
.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: -50px; 
    left: 0;
}
/* make the indicator arrows grey so they show up on a white background */
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ddd' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e");
}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ddd' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e");
}
/* home page styling ------------------------- */
.icon-box {
	clear: left;
	max-width: 180px;  
}
.icon {
	/*max-width: 80px; */   
	float: left; 
	margin: 0 20px 20px 0;
	
}
.icon-box p {
	font-size: 0.8em!important;
	font-weight: 600;
	float: left;
}
.hero-image {
	margin: 3em 0 2em 0;
}
.info-panel {
	background-color:#ebf0f5;
}
.container {
    max-width: 1170px;
}
div#product_info div {
	padding: 2em 3% 2em 1%; 
}
#image_panel {
	margin-bottom: 2em;
}
#icons_panel {
	padding-left: 3%;
}
#product_info a {
    color: #2387aa!important;
}
#product_info a:hover {
    text-decoration: underline!important;
	
}
.chapterintroduction__text {
    font-size: 1.25rem;
    font-family: inherit;
    line-height: 1.4;
    margin-top: -0.25em;
    margin-bottom: .7em;
    color: 
    #697882;
}
#status {
	padding-left: 3%;
    margin-left: 15px;
}