body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
    height: 100%;
    width: 100%;
    font-family: tahoma;
    overflow-x: hidden;
}

svg {
    background: #FFFFFF;
    border: 0;
    margin: 0 auto;
}

.actions {
    width: 100%;
    background: #e5e5e5;
    padding: 1em;
}

h1 {
    font-family: 'Gill Sans MT', Verdana, tahoma, sans-serif;
    padding: 0;
    margin: 0;
    font-size: 12pt;
    font-weight: normal;
    letter-spacing: 0.1em;
    color: #4E78A0;
    padding: 1em;
    display: inline;
    padding-right: 4em;
}

/*---------------------------------------------------
 * BUTTONS
 *--------------------------------------------------*/

button 
{
    border:0;
    background:#177bc0;
    color:white;
    padding:0.4em;
    font-size:0.8em;
    text-transform: Capitalize;
}
button:hover
{
    background:#17a5c0;
    cursor:pointer;
}

button:focus
{
    outline:2px solid orange;
}


/*-----------------------------------------------------------------------
 * LEGEND
 *----------------------------------------------------------------------*/

.legend {
     border-bottom: 1px solid #d0d0d0;
}

.legend div {
    background: red;
    margin: 10px;
    display: inline-block;
    font-size: 7pt;
    color: #FFFFFF;
    padding: 1em;
    border-radius: 6px;
    border: 1px solid #DADADA;
    letter-spacing: 0.1em;
}


/*-----------------------------------------------------------------------
 * GROUPS // Larger grey boxes that groups steps
 *----------------------------------------------------------------------*/

.group rect{
    stroke: #9a9a9a;
    fill: #dfdfdf;
    opacity:1;
}

.group rect:hover {
    fill:#C5E3BF;
    stroke:#4AC948;
    cursor:pointer;
}

.group text.group-label-text {
    opacity:.4;
    fill:#323232;
    font-size:smaller;
}
.group:hover text.group-label-text{
    opacity:1;
}

/*-----------------------------------------------------------------------
 * LINK PATHS AND LANES
 *----------------------------------------------------------------------*/

.lane  {
    stroke: #ededed;
}

.link path {
    fill: none;
    stroke-width: 2px;
    stroke-dasharray:5 2;
    stroke: #9AC0CD;
}
.link.error path {
    stroke:#cda79a;
}

.link.soap path {
    stroke:#00C5CD;
}

.link.jdbc path {
    stroke:#162252;
}
.link.routing path {
    stroke:#473C8B;
}
.link.ifl-masterdata path {
    stroke:#6f3c8b;
}
.link.ifl-oracle path {
    stroke:#CC1100;
}

.link path:hover {
    cursor:pointer;
    stroke-width:5px;
    stroke-dasharray:0;
    stroke:url(#gradient-green) #66CD00;
}
/* Path for active workflow */
.link.stroke-on path {
    stroke:orange;
    stroke-width: 5px;
    -webkit-transition: stroke .5s ease-in, stroke-width .5s ease-in;
    -moz-transition: stroke .5s ease-in, stroke-width .5s ease-in;
    -ms-transition: stroke .5s ease-in, stroke-width .5s ease-in;
    -o-transition: stroke .5s ease-in, stroke-width .5s ease-in;
}

.link .label-text {
    fill:#0D4F8B;
    font-size:8pt;
    letter-spacing:0.1em;
}

.link.error .label-text {
    fill: #bc8978;
}

.label-text:hover {
    font-size:11pt;
    fill:orange;
}

/* Ensure some transitions */
.group-label-text,
group:hover .group-label-text,
.label-text,
.label-text:hover {
    -webkit-transition: fill .2s ease-in, font-size .2s ease-in, opacity .4s ease-in;
    -moz-transition: fill .2s ease-in, font-size .2s ease-in, opacity .4s ease-in;
    -ms-transition: fill .2s ease-in, font-size .2s ease-in, opacity .4s ease-in;
    -o-transition: fill .2s ease-in, font-size .2s ease-in, opacity .4s ease-in;
}


/*------------------------------------------------------------------------
 * HIDE THE LIMITED WORKFLOW
 * ----------------------------------------------------------------------*/
.ifl-aa-only,
.ifl-lm-only {
    visibility:hidden;
}



/*-----------------------------------------------------------------------
 * WORKFLOW BOXES // And the corresponding legend div
 *----------------------------------------------------------------------*/

.node {
    font: 12px 'Gill Sans MT',sans-serif;
    fill:#545454;
}

.node text {
    fill: #FFFFFF;
}

.node p {
    color: #e0e0e0;
	font-size: smaller;
	line-height: 120%;
}

.node rect {
    fill: #4973AB;
    stroke-width:2px;
    stroke:#9AC0CD;
}

.legend div.interface, 
.legend div.user-interaction,
.node.user-interaction rect,
.node.interface rect {
	fill: #7AA9DD;
	background: #7AA9DD;
}

.legend div.systemAndUser,
.node.systemAndUser rect {
	fill: url(#gradient-systemAndException) #4e78a0!important;
	stroke: url(#gradient-systemAndException) #4e78a0!important;
	background: #4e78a0;
}
	
.legend div.soa,
.node.soa rect {
	fill:url(#gradient-blue) #4e78a0;
	background: #4e78a0;
}
	
.legend div.invoices,
.node.invoices rect {
	fill:url(#gradient-bluetwo) #14304b;
	background: #14304b;
}
	
.legend div.webservice,
.node.webservice rect {
	fill:#003F87;
	background: #003F87;
}
	
.legend div.database,
.node.database rect {
	fill:#104E8B;
	background: #104E8B;
}
	
.legend div.source,
.node.source rect {
	fill:#FFFFFF;
	background: #56833b;
	stroke: #9AC0CD;
        stroke-dasharray:5 2;
}
.node.source text {
    fill: #AAAAAA;
}
	
.legend div.oebs,
.node.oebs rect {
	fill:url(#gradient-crimson) #CC1100;
	background: #a50d00;
	stroke:#993300;
}
	
.legend div.error,
.node.error rect {
	fill:red;
	background: red;
	stroke:#993300;
}
	
.legend div.exception,
.node.exception rect {
	fill:url(#gradient-orange) #E3701A;
	background: #E3701A;
	stroke:#993300;
}
	
.legend div.end-complete,
.node.end-complete rect {
	fill:url(#gradient-green) #49E20E;
	background: #49E20E;
	stroke:#577A3A;
}
	
.legend div.end-terminate,
.node.end-terminate rect {
	fill:url(#gradient-red) #FF3300;
	background: #FF3300;
	stroke:#993300;
}


.node:hover rect {
    cursor:pointer;
}

.node rect, .node:hover rect, .group rect, .group rect:hover, .connector, .connector:hover, .connector image {
    -moz-transition: fill .2s ease-in,  stroke .2s ease-in, opacity .2s ease-in;
    -ms-transition: fill .2s ease-in,  stroke .2s ease-in, opacity .2s ease-in;
    -o-transition: fill .2s ease-in,  stroke .2s ease-in, opacity .2s ease-in;
    -webkit-transition: fill .2s ease-in,  stroke .2s ease-in, opacity .2s ease-in;
}


/*-----------------------------------------------------------------------
 * Designated box numbers
 *----------------------------------------------------------------------*/

.boxNumber-group circle {
    fill: #fefefe;
    stroke: #d0d0d2;
}

.node text.numberText {
    fill: #5a5a5a;
}

.boxNumber-group:hover circle {
}
.numberText {
    pointer-events:none;
}

/*-----------------------------------------------------------------------
 * CONNECTORS // The bits where the paths are connected to a box
 *----------------------------------------------------------------------*/

.connector {
    visibility:hidden;
    stroke:#FFFFFF;
    stroke-opacity:.4;
    fill:#8EE5EE;
}

.connector:hover {
    fill:orange;
    cursor:pointer;
}

.connector image, 
.connector rect {
    fill:white;
    stroke:#005898;
    opacity:0;
    stroke-width:2px;
}

.connector-active {
    visibility:visible;
    fill:#000000;
}

.connector circle {
    stroke-width:3.3px;
}

.connector-label {
    fill:black;
    font-size:12pt;
    stroke:#ffffff;
    font-weight:bold;
    opacity:0;
    font-family:courier;
    -webkit-transition:opacity .2s ease-in;
    -moz-transition:opacity .2s ease-in;
    -ms-transition:opacity .2s ease-in;
    -o-transition:opacity .2s ease-in;
}



/*-----------------------------------------------------------------------
 * POPUP STUFF
 *----------------------------------------------------------------------*/
.popup-desc {
    resize:both;
    overflow:hidden;
    border:6px solid #36648B;
    background:#323232;
    font-family:courier;
    position:absolute;
    width:243px;
    /*height:87px;*/
    height:275px;
    opacity:1;
    border-radius:7px 20px 7px 7px;
    color: #FFCC11;
    border-top:none;
    box-shadow:-3px 5px 10px black;
    position:absolute;
}
.drag { position: relative; /*cursor:move;*/}

.popup-desc-close {
    border:1px solid transparent;
    color:#ffffff;
    cursor:pointer;
    position:absolute;
    top:-8px;
    right:-8px;
    display:block;
    height:38px;
    width:38px;
    border-radius:50%;
    background:url("../img/icon_close_x.png");
}

.popup-desc-close:hover {
    border:1px solid #EEB422;
    -webkit-transition:border .2s ease-in;
    -moz-transition:border .2s ease-in;
    -ms-transition:border .2s ease-in;
    -o-transition:border .2s ease-in;
}
.popup-desc-close:active {
    margin:1px 0 0 1px;
}

.popup-desc .read-more {
    font-size:smaller;
    position:absolute;
    right:14px;
    bottom:3px;
    color:#d3d3d3;
    text-decoration:none;
    letter-spacing:0.07em;
}

.popup-desc .read-more:hover {
    color:#ffffff;
    -webkit-transition:color .2s ease-in;
    -moz-transition:color .2s ease-in;
    -ms-transition:color .2s ease-in;
    -o-transition:color .2s ease-in;
}

.popup-desc video {
    margin:0 auto 20px auto;
    display:block;
    background:black;
    width:100%;
}

.popup-desc span.popup-desc-text {
    padding:5px 10px 10px 10px;
    display:block;
    font-size:smaller;
}
.popup-desc H3 {
    width:100%;
    background:#000000;
    cursor:move;
    padding:0;
    margin:0;
    padding:6px 10px;
    font-size:8pt;
    color:#ededed;
    letter-spacing:0.05em;
    background: #36648B;
}

.printOnly {
    display: none;
}



/*---------------------------------------------------
 * TABLES
 *--------------------------------------------------*/

table 
{
    text-align:left;
    border-collapse:collapse;
    font-size:smaller;
    margin:1em 0 2em 0;
}

table caption
{
    font-family:Rock, consolas;
}

th 
{
    background:#1F497D;
    color:#FFFFFF;
    border:2px solid #FFFFFF;
    padding:6px 10px;
    white-space:nowrap;
    font-weight:normal;	
    text-transform: Capitalize;
}

table tbody th
{
    background:#e9e9e9;
    color:#333333;
    font-weight:bold;
}

td 
{
    border:2px solid #FFFFFF;
    background:#EFEAE4;
    padding:6px 10px;
}