#Lines {
    fill:none;
}

#Lines, #Boxes .box {
    fill:none;
    stroke: #000000;
    stroke-width: 1;
}

#Boxes .outerBox {
    fill:none;
    stroke: #000000;
    stroke-width: 2;
    stroke-miterlimit:2.6131;
}

#Boxes a {
    text-decoration:none;
}

#Boxes .g_hover[disabled] .box {
    /* fill    : url(#diagonalHatch);  /* Firefox cannot see diagonalHatch*/
    stroke  : gray;
}

#Boxes .g_hover:not([disabled]):not(.selected) > a:focus rect,
#Boxes .g_hover:not([disabled]):not(.selected):hover rect {
    stroke: darkblue;
    fill: #ccddff; 
    stroke-width: 2;
}

/*This block is a workaround in Firefox. Other browsers will not set focus on disabled boxes.
FF enables keyboard access disabled boxes */
#Boxes .g_hover[disabled] > a:focus rect
{
    stroke: darkblue;
    stroke-width: 3;
}
#Boxes .g_hover[disabled]:hover rect,
#Boxes .g_hover[disabled] > a:hover text  {
    cursor:not-allowed;
}

#Boxes .g_hover.selected:not([disabled]) > a:focus rect,
#Boxes .g_hover.selected:not([disabled]):hover rect {
    stroke: lightblue;
    fill: #243850;
    stroke-width: 3;
}

#Boxes .invisibleElement{
    visibility: hidden;
}

#Boxes .g_hover.selected .box {
    fill: #335075; 
    stroke: darkblue;
    stroke-width: 2;
}

#Boxes .g_hover .text {
    font-family: Arial,Verdana,Helvetica,sans-serif;
    font-size: 14px;
    font-weight:bold;
}

#Boxes .g_hover.selected .text {
    fill: white;
}

.scaling_svg_container {
    position:relative;
    height:0;
    width: 100%;
    padding-bottom:80%;
}

.scaling_svg {
    left:0;
    top:0;
    position:absolute;
    height:100%;
    width: 100%;
}

.invisibleElement{
    visibility: hidden;
}