html * {
    font-size: 1em;
    font-family: Verdana, Geneva, sans-serif !important;
    text-shadow: none !important;
}
  
.help {
    font-size: 1em;
    max-width: 15em;
}

.helpButton {
    border: 0.3em !important;
    background-color: darkCyan !important;
    color: white !important;
}

.searchButton {
    border: 0.3em !important;
    background-color: white !important;
    color: black !important;
}

.ui-page .ui-header {    
    background: #b6b8b7 !important;
    border-radius: 1em;
    border-width: thick;
    border-color: #f9f9f9 !important;
    border-bottom-left-radius: 1em;
    border-bottom-right-radius: 1em;
}

.ui-content {
    margin: 0px !important;
}

.ui-dialog-content {
   background: grey !important;
   opacity: .95 !important;
   filter: Alpha(Opacity=95);
}

.blueSpan {
    color: DarkCyan;
    font-size: 1em;
}

.redSpan {
    color: red;
    font-size: 0.7em;
}

.smallSpan {
    font-size: 0.7em;
}

.bigSpan {
    font-size: 2em;
}

.tooltip {
    position: absolute;
    background: lightblue;
    text-align: left;
    font: 1em sans-serif;
    border-radius: 1em;
    width: auto;
    height: auto;
    z-index: 200;
}

tspan {
    cursor: pointer;
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

.flash-button {
    animation-name: flash;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: 10;

    //Firefox 1+
    -webkit-animation-name: flash;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 10;

    //Safari 3-4
    -moz-animation-name: flash;
    -moz-animation-duration: 2s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 10;
}

@keyframes flash {
    0% { opacity: 1.0; }
    50% { opacity: 0.1; }
    100% { opacity: 1.0; }
}

//Firefox 1+
@-webkit-keyframes flash {
    0% { opacity: 1.0; }
    50% { opacity: 0.1; }
    100% { opacity: 1.0; }
}

//Safari 3-4
@-moz-keyframes flash {
    0% { opacity: 1.0; }
    50% { opacity: 0.1; }
    100% { opacity: 1.0; }
}

::-webkit-input-placeholder { /* Chrome */
    color: Gainsboro;
}
:-ms-input-placeholder { /* IE 10+ */
    color: Gainsboro;
}
::-moz-placeholder { /* Firefox 19+ */
    color: Gainsboro;
    opacity: 1;
}
:-moz-placeholder { /* Firefox 4 - 18 */
    color: Gainsboro;
    opacity: 1;
}

@media screen and (min-width: 0px) and (max-width: 600px) {
    #tdTitle { display: none; } /* hide it on small screens */ 
    #tdHelpPopup { display: none; }  
    #tdEmpty { display: none; }
    #lineBreaks { display: none; }
    .message { font-size: 1em; }
    #logo { width: 60%; max-width: 6em;}
    .mediumSpan {
        font-weight: bold;
        font-size: 1em;
    }
    #title { display: block; }
    text { font-size: 1em; }
    .tooltip { font-size: 0.8em; }
    .isoText { font-size: 0.8em; }
}

@media screen and (min-width: 601px) {
    #tdTitle { display: block; } /* show it elsewhere */
    #tdHelpPopup { display: block; } 
    #tdEmpty { display: block; }
    #lineBreaks { display: block; }
    .message { font-size: 1.5em; }
    #logo { width: 50%; }
    .mediumSpan {
        font-weight: bold;
        font-size: 1.5em;
    }
    #title { display: none; }
    text { font-size: 2em; }
    .isoText { font-size: 1em; } 
}

.isoText {
    font-style: italic;
}

.isoRect {
    fill: red;
    stroke: none!important;
    fill-opacity: 0;
    border: 0em;
}

.node rect {
    fill: white; 
    stroke: transparent; 
    stroke-width: 0.2em;
}

.edgePath path.path {
    stroke: black;
    fill: none;
    stroke-width: 0.2em;
}
