.viz {
    position: absolute;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}
.viz-fullscreen {
    position: relative;
}
.viz-controls {
	margin-right: 10px;
    	cursor: pointer;
}
.raphael-one {
    position: relative;
    background-color: $itlightgray;
    height: 600px;
    &.viz-hidden {
	max-height: 0;
        visibility: hidden;
    }
}
tspan:hover, circle:hover {
    cursor: pointer;
}
.detail-outer {
    display: none;
    text-overflow: hidden;
    overflow: hidden;
}
.detail {
    margin-top: 10px;
    line-height: 1;
    overflow: hidden;
}
.detail td {
    padding-top: 0px;
}
.detail td.value {
    @include force-wrap();
    max-width: 10em;
    font-family:'Andale Mono';
    padding: 5px 0 12px 10px;
}
$left-adjust: -5px;
.filter-panel {
    margin-right: 35px;
    @include user-select(none);	
    .legend-pos {
        margin-left: -15px;
	text-transform: uppercase;
    }
    .switcher, .sort {
        margin-left: $left-adjust;
    }
}
ul.filter {
    list-style: none;
    margin-left: $left-adjust;
    min-width: 11em;
    padding: 0;
    >div {
	border-bottom: 1px solid rgba(0,0,0,0.2);	
        >label {
          display: inline-block;
	  line-height: 0.6;
	  font-weight: normal;
        }
    }

    .hidden {
        display: none;
    }
    .busy {
        cursor: wait;
    }
    li {
        margin-top: 0;
    }
    .make-switch {
        min-width: 4em;
	text-align: left;
    }
}
.workbench-mode {
    background-color: $itlightgray;
}
.workbench {
    margin-top: 5px;
}
$popover-height: 365;
$popover-width: 200;
.detail-outer-popover {
    display: block;
    height: #{$popover-height}px;
    width: #{$popover-width}px;
    overflow: hidden;
    text-overflow: hidden;
    position: absolute;
}
.detail-popover {
    @include box-shadow(0 2px 4px rgba(0, 0, 0, .2));
    @include border-radius(0);
    opacity: 1.0;
    padding: 5px;
    background-color: rgba(255,255,255,0.7);
    position: absolute;
    height: #{$popover-height - 20}px;
    width: #{$popover-width - 30}px;
    margin: 0;
    z-index: 100;
    .fa-times {
        cursor: pointer;
    }
    .fa-info-circle {
	position: absolute;
	right: 5px;
	bottom: 5px;
        cursor: help;
    }
    .fa-cloud {
	position: absolute;
	right: 25px;
	bottom: 5px;
        cursor: help;
    }
    button.graph-button {
	    position: absolute;
	    bottom: 5px;
	    left: 5px;
    }
}
$detail-left-pos: 200px;
$detail-top-pos: 25px;
.detail-outer-top-left {
    top: #{$detail-top-pos}px;
    left: $detail-left-pos;
}
.detail-outer-top-right {
    top: #{$detail-top-pos}px;
    right: 0px;
}
.detail-outer-bottom-left {
    bottom: 0px;
    left: $detail-left-pos;
}
.detail-outer-bottom-right {
    bottom: 0px;
    right: 0px;
}
span.filter-opt-disable {
    opacity: 0.4;
}
.filter .has-switch span.switch-primary {
    @include background-image(linear-gradient(top, #26BF00, #1C8C00));
}
.filter .has-switch span.switch-right.switch-info {
    @include background-image(linear-gradient(top, darken(#26BF00, 10%), darken(#1C8C00, 10%)));
}
.filter .has-switch span.switch-success {
    @include background-image(linear-gradient(top, #BBBF00, #898C00));
}
.filter .has-switch span.switch-right.switch-warning {
    @include background-image(linear-gradient(top, darken(#BBBF00, 10%), darken(#898C00, 10%)));
}
.filter .has-switch span.switch-danger {
    @include background-image(linear-gradient(top, #BF0000, #8C0000));
}
.filter .has-switch span.switch-right {
    color: #fff;
    @include background-image(linear-gradient(top, darken(#BF0000, 10%), darken(#8C0000, 10%)));
}
