/*
 * Tipped - A Complete Javascript Tooltip Solution - v4.5.7
 * (c) 2012-2016 Nick Stakenburg
 *
 * http://www.tippedjs.com
 *
 * License: http://www.tippedjs.com/license
 */

.tpd-tooltip {
  position: absolute;
}

/* Fix for CSS frameworks that don't keep the use of box-sizing: border-box
   within their own namespace */
.tpd-tooltip,
.tpd-tooltip [class^="tpd-"] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

/* Content */
.tpd-content-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-content-spacer,
.tpd-content-relative,
.tpd-content-relative-padder {
  float: left;
  position: relative;
}
.tpd-content-relative {
  width: 100%;
}

.tpd-content {
  float: left;
  clear: both;
  position: relative;
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
  color: #fff;
}
.tpd-has-inner-close .tpd-content-relative .tpd-content { padding-right: 0 !important; }
.tpd-tooltip .tpd-content-no-padding { padding: 0 !important; }

.tpd-title-wrapper {
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-title-spacer {
  float: left;
}
.tpd-title-relative,
.tpd-title-relative-padder {
  float: left;
  position: relative;
}
.tpd-title-relative { width: 100%; }
.tpd-title {
  float: left;
  position: relative;
  font-size: 11px;
  line-height: 16px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
}
.tpd-has-title-close .tpd-title { padding-right: 0 !important; }
.tpd-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  cursor: pointer;
  overflow: hidden;
  color: #fff;
}
.tpd-close-icon {
  float: left;
  font-family: Arial, Baskerville, monospace;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
}


/* Skin */
.tpd-skin {
  position: absolute;
  top: 0;
  left: 0;
}

.tpd-frames {
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-frames .tpd-frame {
  float: left;
  width: 100%;
  height: 100%;
  clear: both;
  display: none;
}

.tpd-visible-frame-top .tpd-frame-top { display: block; }
.tpd-visible-frame-bottom .tpd-frame-bottom { display: block; }
.tpd-visible-frame-left .tpd-frame-left { display: block; }
.tpd-visible-frame-right .tpd-frame-right { display: block; }

.tpd-backgrounds {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
.tpd-background-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: none;
}
.tpd-no-shadow .tpd-skin .tpd-background-shadow { box-shadow: none !important; }

.tpd-background-box {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
/* only the top background box should be shown when not using a stem */
.tpd-no-stem .tpd-background-box,
.tpd-no-stem .tpd-shift-stem { display: none; }
.tpd-no-stem .tpd-background-box-top { display: block; }

.tpd-background-box-shift,
.tpd-background-box-shift-further {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}
.tpd-background {
  border-radius: 10px;
  float: left;
  clear: both;
  background: none;
  -webkit-background-clip: padding-box; /* Safari */
  background-clip: padding-box; /* IE9+, Firefox 4+, Opera, Chrome */
  border-style: solid;
  border-width: 1px;
  border-color: #282828;
  border-color: rgba(255,255,255,.1); /* opacity here bugs out in firefox, .tpd-background-content should have no opacity if this opacity is less than 1 */
}
.tpd-background-loading { display: none; }
/* no radius */
.tpd-no-radius .tpd-skin .tpd-frames .tpd-frame .tpd-backgrounds .tpd-background { border-radius: 0; }
.tpd-background-title {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-content {
  float: left;
  clear: both;
  width: 100%;
  background-color: #282828;
}
.tpd-background-border-hack {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-style: solid;
}

.tpd-background-box-top { top: 0; }
.tpd-background-box-bottom { bottom: 0; }
.tpd-background-box-left { left: 0; }
.tpd-background-box-right { right: 0; }

/* iframeshim IE6 */
.tpd-iframeshim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
}

/* Skin / Stems */
.tpd-shift-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.tpd-shift-stem-side {
  position: absolute;
}
.tpd-frame-top .tpd-shift-stem-side,
.tpd-frame-bottom .tpd-shift-stem-side { width: 100%; }
.tpd-frame-left .tpd-shift-stem-side,
.tpd-frame-right .tpd-shift-stem-side { height: 100%; }

.tpd-stem {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden; /* shows possible invalid subpx rendering */
  width: 16px; /* best cross browser stem: width = 2 x height (90deg angle) */
  height: 8px;
  margin-left: 3px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
}
/* remove margins once we're done measuring */
.tpd-tooltip .tpd-skin .tpd-frames .tpd-frame .tpd-shift-stem .tpd-stem-reset { margin: 0 !important; }

.tpd-stem-spacer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.tpd-stem-reset .tpd-stem-spacer { margin-top: 0; }

.tpd-stem-point {
  width: 100px;
  position: absolute;
  top: 0;
  left: 50%;
}
.tpd-stem-downscale,
.tpd-stem-transform {
  float: left;
  width: 100%;
  height: 100%;
  -webkit-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  position: relative;
}

.tpd-stem-side {
  width: 50%;
  height: 100%;
  float: left;
  position: relative;
  overflow: hidden;
}
.tpd-stem-side-inversed {
  -webkit-transform: scale(-1,1);
  transform: scale(-1,1);
}
.tpd-stem-triangle {
  width: 0;
  height: 0;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-left-style: solid;
  position: absolute;
  top: 0;
  left: 0;
}
.tpd-stem-border {
  width: 20px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #fff; /* will become transparent */
  border-right-color: #fff;
  border-right-style: solid;
  border-right-width: 0;
}

.tpd-stem-border-corner {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  border-right-style: solid;
  border-right-width: 0;
}

/* fixes rendering issue in IE */
.tpd-stem * { z-index: 0; zoom: 1; }

/* used by IE < 9 */
.tpd-stem-border-center-offset,
.tpd-stem-border-center-offset-inverse {
  float: left;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tpd-stem-notransform {
  float: left;
  width: 100%;
  height: 100%;
  position: relative;
}
.tpd-stem-notransform .tpd-stem-border {
  height: 100%;
  position: relative;
  float: left;
  top: 0;
  left: 0;
  margin: 0;
}
.tpd-stem-notransform .tpd-stem-border-center {
  position: absolute;
}
.tpd-stem-notransform .tpd-stem-border-corner {
  background: #fff;
  border: 0;
  top: auto;
  left: auto;
}
.tpd-stem-notransform .tpd-stem-border-center,
.tpd-stem-notransform .tpd-stem-triangle {
  height: 0;
  border: 0;
  left: 50%;
}

/* transformations for left/right/bottom */
.tpd-stem-transform-left {
  -webkit-transform: rotate(-90deg) scale(-1,1);
  transform: rotate(-90deg) scale(-1,1);
}
.tpd-stem-transform-right {
  -webkit-transform: rotate(90deg) translate(0, -100%);
  transform: rotate(90deg) translate(0, -100%);
}
.tpd-stem-transform-bottom {
  -webkit-transform: scale(1,-1) translate(0, -100%);
  transform: scale(1,-1) translate(0, -100%);
}


/* Spinner */
.tpd-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 36px;
}
.tpd-spinner-spin {
  position: relative;
  float: left;
  margin: 8px 0 0 13px;
  text-indent: -9999em;
  border-top: 2px solid rgba(255, 255, 255, 0.2);
  border-right: 2px solid rgba(255, 255, 255, 0.2);
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  border-left: 2px solid #fff;
  -webkit-animation: tpd-spinner-animation 1.1s infinite linear;
  animation: tpd-spinner-animation 1.1s infinite linear;
  box-sizing: border-box !important;
}
.tpd-spinner-spin,
.tpd-spinner-spin:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
@-webkit-keyframes tpd-spinner-animation {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes tpd-spinner-animation {
  0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* show the loader while loading and hide all the content */
.tpd-is-loading .tpd-content-wrapper,
.tpd-is-loading .tpd-title-wrapper { display: none; }
.tpd-is-loading .tpd-background { display: none; }
.tpd-is-loading .tpd-background-loading { display: block; }



/* Resets while measuring content */
.tpd-tooltip-measuring {
  top: 0;
  left: 0;
  position: absolute;
  max-width: 100%;
  width: 100%;
}
.tpd-tooltip-measuring .tpd-skin,
.tpd-tooltip-measuring .tpd-spinner {
  display: none;
}

.tpd-tooltip-measuring .tpd-content-wrapper,
.tpd-tooltip-measuring .tpd-title-wrapper { display: block; }


/* Links */
.tpd-tooltip a,
.tpd-tooltip a:hover { color: #808080; text-decoration: underline; }
.tpd-tooltip a:hover { color: #6c6c6c; }


/*
 * Sizes
 */
/* x-small */
.tpd-size-x-small .tpd-content,
.tpd-size-x-small .tpd-title {
  padding: 7px 8px;
  font-size: 10px;
  line-height: 15px;
}
.tpd-size-x-small .tpd-background { border-radius: 5px; }
.tpd-size-x-small .tpd-stem {
  width: 12px;
  height: 6px;
  margin-left: 4px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-x-small.tpd-no-radius .tpd-stem { margin-left: 7px; }
.tpd-size-x-small .tpd-close { margin-bottom: 1px; }
.tpd-size-x-small .tpd-spinner {
  width: 35px;
  height: 29px;
}
.tpd-size-x-small .tpd-spinner-spin { margin: 6px 0 0 9px; }
.tpd-size-x-small .tpd-spinner-spin,
.tpd-size-x-small .tpd-spinner-spin:after {
  width: 17px;
  height: 17px;
}

/* small */
.tpd-size-small .tpd-content,
.tpd-size-small .tpd-title {
  padding: 8px;
  font-size: 10px;
  line-height: 16px;
}
.tpd-size-small .tpd-background { border-radius: 6px; }
.tpd-size-small .tpd-stem {
  width: 14px;
  height: 7px;
  margin-left: 5px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-small.tpd-no-radius .tpd-stem { margin-left: 8px; }
.tpd-size-small .tpd-close { margin: 2px 1px; }
.tpd-size-small .tpd-spinner {
  width: 42px;
  height: 32px;
}
.tpd-size-small .tpd-spinner-spin { margin: 7px 0 0 13px; }
.tpd-size-small .tpd-spinner-spin,
.tpd-size-small .tpd-spinner-spin:after {
  width: 18px;
  height: 18px;
}


/* medium (default) */
.tpd-size-medium .tpd-content,
.tpd-size-medium .tpd-title {
  padding: 10px;
  font-size: 11px;
  line-height: 16px;
}
.tpd-size-medium .tpd-background { border-radius: 8px; }
.tpd-size-medium .tpd-stem {
  width: 16px;      /* best cross browser stem width is 2xheight, for a 90deg angle */
  height: 8px;
  margin-left: 6px; /* space from the side */
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-medium.tpd-no-radius .tpd-stem { margin-left: 10px; }
.tpd-size-medium .tpd-close { margin: 4px 2px; }
/* ideal spinner dimensions don't cause movement op top and
   on the stem when switching to text using position:'topleft' */
.tpd-size-medium .tpd-spinner {
  width: 50px;
  height: 36px;
}
.tpd-size-medium .tpd-spinner-spin { margin: 8px 0 0 15px; }
.tpd-size-medium .tpd-spinner-spin,
.tpd-size-medium .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}


/* large */
.tpd-size-large .tpd-content,
.tpd-size-large .tpd-title {
  padding: 10px;
  font-size: 13px;
  line-height: 18px;
}
.tpd-size-large .tpd-background { border-radius: 8px; }
.tpd-size-large .tpd-stem {
  width: 18px;
  height: 9px;
  margin-left: 7px;
  margin-top: 2px; /* space between target and stem */
}
.tpd-size-large.tpd-no-radius .tpd-stem { margin-left: 10px; }
.tpd-size-large .tpd-close { margin: 5px 2px 5px 2px; }
.tpd-size-large .tpd-spinner {
  width: 54px;
  height: 38px;
}
.tpd-size-large .tpd-spinner-spin { margin: 9px 0 0 17px; }
.tpd-size-large .tpd-spinner-spin,
.tpd-size-large .tpd-spinner-spin:after {
  width: 20px;
  height: 20px;
}



/* Skins */
/* default (dark) */
.tpd-skin-dark .tpd-content,
.tpd-skin-dark .tpd-title,
.tpd-skin-dark .tpd-close { color: #fff; }
.tpd-skin-dark .tpd-background-content,
.tpd-skin-dark .tpd-background-title {
  background-color: #282828;
}
.tpd-skin-dark .tpd-background {
  border-width: 1px;
  border-color: #282828;
  border-color: rgba(255,255,255,.1);
}
/* line below the title */
.tpd-skin-dark .tpd-title-wrapper { border-bottom: 1px solid #404040; }
/* spinner */
.tpd-skin-dark .tpd-spinner-spin {
  border-color: rgba(255,255,255,.2);
  border-left-color: #fff;
}
/* links */
.tpd-skin-dark a { color: #ccc; }
.tpd-skin-dark a:hover { color: #c0c0c0; }

.colorpicker {
	width: 356px;
	height: 176px;
	overflow: hidden;
	position: absolute;
	background: url(../images/colorpicker_background.png);
	font-family: Arial, Helvetica, sans-serif;
	display: none;
}
.colorpicker_color {
	width: 150px;
	height: 150px;
	left: 14px;
	top: 13px;
	position: absolute;
	background: #f00;
	overflow: hidden;
	cursor: crosshair;
}
.colorpicker_color div {
	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	background: url(../images/colorpicker_overlay.png);
}
.colorpicker_color div div {
	position: absolute;
	top: 0;
	left: 0;
	width: 11px;
	height: 11px;
	overflow: hidden;
	background: url(../images/colorpicker_select.gif);
	margin: -5px 0 0 -5px;
}
.colorpicker_hue {
	position: absolute;
	top: 13px;
	left: 171px;
	width: 35px;
	height: 150px;
	cursor: n-resize;
}
.colorpicker_hue div {
	position: absolute;
	width: 35px;
	height: 9px;
	overflow: hidden;
	background: url(../images/colorpicker_indic.gif) left top;
	margin: -4px 0 0 0;
	left: 0px;
}
.colorpicker_new_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 213px;
	top: 13px;
	background: #f00;
}
.colorpicker_current_color {
	position: absolute;
	width: 60px;
	height: 30px;
	left: 283px;
	top: 13px;
	background: #f00;
}
.colorpicker input {
	background-color: transparent;
	border: 1px solid transparent;
	position: absolute;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	color: #898989;
	top: 4px;
	right: 11px;
	text-align: right;
	margin: 0;
	padding: 0;
	height: 11px;
}
.colorpicker_hex {
	position: absolute;
	width: 72px;
	height: 22px;
	background: url(../images/colorpicker_hex.png) top;
	left: 212px;
	top: 142px;
}
.colorpicker_hex input {
	right: 6px;
}
.colorpicker_field {
	height: 22px;
	width: 62px;
	background-position: top;
	position: absolute;
}
.colorpicker_field span {
	position: absolute;
	width: 12px;
	height: 22px;
	overflow: hidden;
	top: 0;
	right: 0;
	cursor: n-resize;
}
.colorpicker_rgb_r {
	background-image: url(../images/colorpicker_rgb_r.png);
	top: 52px;
	left: 212px;
}
.colorpicker_rgb_g {
	background-image: url(../images/colorpicker_rgb_g.png);
	top: 82px;
	left: 212px;
}
.colorpicker_rgb_b {
	background-image: url(../images/colorpicker_rgb_b.png);
	top: 112px;
	left: 212px;
}
.colorpicker_hsb_h {
	background-image: url(../images/colorpicker_hsb_h.png);
	top: 52px;
	left: 282px;
}
.colorpicker_hsb_s {
	background-image: url(../images/colorpicker_hsb_s.png);
	top: 82px;
	left: 282px;
}
.colorpicker_hsb_b {
	background-image: url(../images/colorpicker_hsb_b.png);
	top: 112px;
	left: 282px;
}
.colorpicker_submit {
	position: absolute;
	width: 22px;
	height: 22px;
	background: url(../images/colorpicker_submit.png) top;
	left: 322px;
	top: 142px;
	overflow: hidden;
}
.colorpicker_focus {
	background-position: center;
}
.colorpicker_hex.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_submit.colorpicker_focus {
	background-position: bottom;
}
.colorpicker_slider {
	background-position: bottom;
}

// Real content

#summary-content {
	padding: 5px 10px !important;
	position:relative;
	z-index:0;
}

.report-bar-inset { max-width:1300px; margin:auto !important; position:relative; }
body.replay .report-bar-inset { max-width: initial }

#content { margin-top: 0 !important; }

body.replay { overflow-x: hidden }

body.replay #summary-content { width:auto !important; padding:0!important }

.mitigated-bg { background-color: #909049; }

.event-icon { width: 16px; height:16px; --size:16; margin-left:3px; vertical-align:-7px; border:1px solid #333333; cursor:pointer }
.event-icon.disabled { opacity:0.4; }
.event-icon:hover { opacity: 1; border-color:white }

.events-view-buffs { float:right; }
.events-view-icon { float:right; width:13px; height:13px; border:1px solid #333333; margin:2px }

.damage { color: rgb(92%, 27%, 38%) !important }
.healing { color: #84F8BD !important; }

#rankedplayers-content { overflow:auto }

.combatant-info-in-tooltip { display:inline-block; width:150px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; margin:3px }

.bar-gradient {
	background: #84BDF8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#84BDF8), to(#448Db8));
	background: -webkit-linear-gradient(top, #84BDF8, #448Db8);
	background: -moz-linear-gradient(top, #84BDF8, #448Db8);
	background: -o-linear-gradient(top, #84BDF8, #448Db8);
	background: -ms-linear-gradient(top, #84BDF8, #448Db8);
	background: linear-gradient(top, #84BDF8, #448Db8);
}

.bar-gradient-alternate
{
	background-color: rgb(0, 64, 81);
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 64, 81)), to(rgb(0, 97, 128)));
	background: -webkit-linear-gradient(top, rgb(0, 64, 81), rgb(0, 97, 128));
	background: -moz-linear-gradient(top, rgb(0, 64, 81), rgb(0, 97, 128));
	background: -o-linear-gradient(top, rgb(0, 64, 81), rgb(0, 97, 128));
	background: -ms-linear-gradient(top, rgb(0, 64, 81), rgb(0, 97, 128));
	background: linear-gradient(top, rgb(0, 64, 81), rgb(0, 97, 128));
}

.absorbdamage > .bar-gradient {
	background: #C41F3B;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#C41F3B), to(#800000));
	background: -webkit-linear-gradient(top, #C41F3B, #800000);
	background: -moz-linear-gradient(top, #C41F3B, #800000);
	background: -o-linear-gradient(top, #C41F3B, #800000);
	background: -ms-linear-gradient(top, #C41F3B, #800000);
	background: linear-gradient(top, #C41F3B, #800000);
}

.absorbdamage > .bar-gradient-alternate
{
	background-color: #800000;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#800000), to(#400000));
	background: -webkit-linear-gradient(top, #800000, #400000);
	background: -moz-linear-gradient(top, #800000, #400000);
	background: -o-linear-gradient(top, #800000, #400000);
	background: -ms-linear-gradient(top, #800000, #400000);
	background: linear-gradient(top, #800000, #400000);
}

.healing > .bar-gradient {
	background: #84F8BD;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#84F8BD), to(#44b88d));
	background: -webkit-linear-gradient(top, #84F8BD, #44b88d);
	background: -moz-linear-gradient(top, #84F8BD, #44b88d);
	background: -o-linear-gradient(top, #84F8BD, #44b88d);
	background: -ms-linear-gradient(top, #84F8BD, #44b88d);
	background: linear-gradient(top, #84F8BD, #44b88d);
}

.healing > .bar-gradient-alternate
{
	background-color: rgb(0, 81, 64);
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(0, 81, 64)), to(rgb(0, 128, 97)));
	background: -webkit-linear-gradient(top, rgb(0, 81, 64), rgb(0, 128, 97));
	background: -moz-linear-gradient(top, rgb(0, 81, 64),rgb(0, 128, 97));
	background: -o-linear-gradient(top, rgb(0, 81, 64), rgb(0, 128, 97));
	background: -ms-linear-gradient(top, rgb(0, 81, 64), rgb(0, 128, 97));
	background: linear-gradient(top, rgb(0, 81, 64), rgb(0, 128, 97));
}

.inner-pet-details { display: none; margin-left:30px }

#position-graph { background-color: #141414!important; margin-bottom: -1px }
#position-graph-contents { position:relative; }

#graph-container { position:relative; height:300px; border:1px solid #555555; }
#graph, #supplemental-graph { background-color:#141414!important; }
#graph { height:100%; }
#supplemental-graph { height: 200px; margin-bottom:10px }
#graph-container.compact { height: 200px }
#graph-wrapper { position:relative }
#graph-wrapper.spell { padding-top:24px; }
#graph-error { position:absolute;left:0;right:0;top:0;bottom:0; display:-webkit-flex; display:flex;-webkit-flex-direction:column; flex-direction:column; justify-content:center;-webkit-justify-content:center }
#graph-error > p { text-align:center }

#graph.compact > #graph-error { margin-top: 60px }
body.replay #content { margin-bottom:0 !important }
body.replay #graph-container  { height:40px !important; margin-bottom:0 !important }
body.replay #graph { width: 100%; }

#filter-graph-dropdown { position:absolute; top:0; right:0; color:#a0a0a0!important; border:none; background:none; z-index:10 }

body.replay #graph-container > #filter-graph-dropdown { display:none }
#replay-options-strip { position:relative; margin-top:-1px; }

#filter-graph-dropdown a span.sub-arrow { right:2px; color:white }

#tabs-graph-and-table { position:relative; }

#graph-details { font-size:11px; }
.graph-tab { float:left; border: 1px solid #555555; background-color:#141414; padding:4px; color:#a0a0a0 !important; }
.graph-tab.selected { border-top-color: #141414; color: white !important; cursor: default }
.graph-tab:hover { color: white !important; }
.graph-tab:not(:first-child) { margin-left:-1px }

#graph-zoom-controls, #replay-map-selection-container { float: right; font-size:12px; line-height:21px; padding-top: 6px; margin-right:5px; padding-right:5px }
#graph-reset-zoom { font-size: 12px !important; height:21px }

#graph-events { float: right; padding:3px; margin-right:5px; white-space:nowrap }

#graph-legend-buttons, #replay-buttons { cursor:pointer;float:right; white-space:nowrap; font-size:13px; vertical-align:middle }
#replay-buttons { float: left; display:flex; align-items: center; }
.graph-legend-button, .replay-legend-button, .slideshow-button { border:1px solid #555555; padding:1px 6px; background-color:black }
.replay-legend-button { padding:3px 8px; }
.graph-legend-button:hover, .replay-legend-button.selected, .slideshow-button:hover { background-color: #000060; }
.slideshow-button { cursor: pointer }

#play-button, #fullscreen-toggle { padding:5px 18px; margin-left:-1px; margin-bottom:-1px; }
#play-button { padding-left: 20px !important; }

.death-tab-table { border-collapse: collapse; border:none; border-spacing:0; }
.death-tab { cursor: default; text-align:center; padding:10px; border: 1px solid #555555; background-color: black; min-width: 110px; width:110px; max-width:110px; color:white; line-height:1.6 }
.death-tab.selected { background-color:#002040; }
.death-tab:hover { opacity: 1; background-color:#002040 }
.death-tab-icon { width:16px; height:16px; --size:16; margin:0 2px; vertical-align:-4px; border:1px solid #333; }

#graph-and-table-container { width:100%; vertical-align: top; position:relative }
#tab-strip { vertical-align: top; }
#death-tab-scroller { position:absolute; top:0; bottom:0; min-height:630px }

#table-container { clear:both; position:relative }

.death-heal-cell { padding-left:35px !important; }
.death-event-ability-icon { border:1px solid #555555; width:20px; height:20px; float:left; margin-right:5px }
.death-heal-row .death-event-ability-icon { margin-left:35px; }
.death-heal-row.hidden { display:none }
.death-heal-actor { margin-right:20px }

.death-tab .bar-gradient, .death-tab .bar-gradient-alternate {
	height:10px;
	text-align:center;
}

#death-events-container {
	margin: 30px 0; background-color:black; border:1px solid #555; padding:1em
}

.summary-table.report { line-height:22px !important; }

.composition-table {
	width:100%;
	font-size:13px;
	line-height:22px;
	border-collapse:collapse;
    margin-bottom:-1px;
}

.composition-label {
	padding: 3px 10px 3px 10px;
}

.composition-row { border-bottom: 1px solid #555555; }

.composition-entry { margin: 1px 8px; white-space: nowrap; float:left }

.composition-icon { width: 20px; height:20px; --size:20; margin-right:4px; float:left; border:1px solid #555555; }

#spell-tabs { font-size: 11px; }
.spell-tab { float:left; position:relative; z-index: 1; border: 1px solid #555555; background-color:#141414; padding:4px; color:#a0a0a0 !important; height:15px; }
.spell-tab.selected { border-bottom-color: #141414; color: white !important; cursor: default }
.spell-tab:hover { color: white !important; }
#second-tab { margin-left: -1px }

#spell-tab-scroller { position:absolute; top: 24px; bottom:0; background-color: #141414; border: 1px solid #555555; min-height:606px; }
#spell-tab-scroller.interrupts { top: 10px }

#spell-tab-strip .main-table-name { max-width: 150px; }

.instances-table, .actor-classes-table { font-size:12px; border-spacing: 3px; border-collapse: collapse; }
.instances-table td, .actor-classes-table td { border: 1px solid #555555; padding:2px 4px; text-align:center; min-width:21px }
.instances-table td:hover, .actor-classes-table td:hover { background-color: #002040; }

.table-scroller { height: 260px; overflow:auto; padding:3px }
.summary-block { vertical-align:top; margin-right:5px; margin-left:0; margin-bottom:10px; background-color:black !important; display:inline-block; width:calc(50% - 7px); }
.summary-block.edge { margin-left:5px; margin-right:-1px }
.table-comparison-wrapper .summary-block { margin-left:0 !important; margin-right:0 !important  }

#first-page-link { font-size:11px; float:left; margin:3px; clear:both; }
#next-page-link { font-size:11px; float:right; margin:3px; }

.pin-select-cell { text-align:center }
.pin-select-icon { cursor: pointer !important }

.pin { font-size:13px; background-color: rgb(20, 20, 60);
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgb(12, 12, 40)), to(rgb(18, 18, 50)));
	background: -webkit-linear-gradient(bottom, rgb(12, 12, 40), rgb(18, 18, 50));
	background: -moz-linear-gradient(bottom, rgb(12, 12, 40), rgb(18, 18, 50));
	background: linear-gradient(bottom, rgb(12, 12, 40), rgb(18, 18, 50)); padding:4px; border:1px solid #555555; margin-bottom:5px; }
.pin-icon { float:left; margin-right:5px; width:16px; height:16px; --size:16; }
.pin-close { float:right; width:16px; height:16px; cursor: pointer; }
.pin-expression { color: rgb(225, 242, 245); margin-right:10px }
.pin-type { color:rgb(180, 180, 200); }

#pins-ui { font-size:12px; margin-bottom:10px }
#pins-ui-tabs { cursor: pointer; position:relative }
.pins-ui-tab.selected { color:white; border-bottom:1px solid transparent; }
.pins-ui-tab { margin-bottom:-1px; float:left; border: 1px solid #555555; background-color:#141414; padding:4px; color:#a0a0a0; }
#pins-ui-close { float: right; cursor: pointer; }
#pins-ui-content, .pins-ui-content { clear:both; border:1px solid #555555; padding:1em; background-color:#141414; }
#pins-ui-help { float:left;font-size:10px; margin-left:30px; margin-top:6px; }
.colorpicker { z-index:100; margin-left:-4px }
.pin-square { float:right;width:14px;height:14px;margin:1px; }

#unit-frames-container { clear: both }
#raid-frames { width:20%; position:absolute; bottom: 78px; right:3px; margin-left:auto; margin-top:2em; margin-bottom:2px; cursor:default }
.raid-frame { position:relative; padding:0 3px; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background-color: rgb(64,64,64); font-size:11px; width:100%; height:100%; text-align:center; }
.raid-frames-row { clear:left; padding: 1px 0; -moz-box-sizing: border-box; box-sizing: border-box; width:100%; }
.raid-frames-column { float:left; width:20%; height:100%; -moz-box-sizing: border-box; box-sizing:border-box; padding: 0 1px; }
.raid-frame-health, .unit-frame-health { position:absolute; left:0; top:0; bottom:0; right:0; background-color:rgb(64,64,64); }
.raid-frame-shield, .unit-frame-shield { position:absolute; left:0; bottom:0; right:100%; height:3px; background-color: rgb(90%, 40%, 90%); }
.raid-frame-contents, .unit-frame-contents { white-space: nowrap; position:relative; }
.raid-frame.dead, .unit-frame.dead { color: #404040 !important; background-color: #000000 }
.raid-frame-marker { display: none }
.raid-frame-marker.marker { position:relative; display: block; z-index: 20; width:18px; height:18px; margin:-9px auto }
.raid-frame.aggro { border:1px solid red }
.raid-frame.selected { outline:2px solid currentColor }
.raid-frame-debuffs { position:absolute; bottom:-2px; left: 0; right:0; top:70%; line-height:normal!important; z-index:2; text-align:center; white-space:nowrap; overflow:hidden }
.raid-frame-debuff { margin:1px; height:100%; }

#meters-frame { height: 15%; width:20%; min-width:225px; min-height:150px; position:absolute;bottom:78px; left:3px; margin-bottom:5px; cursor:default; border:1px solid black; background-color:#303030; font-size:11px; }
#meters-frame-title { position:absolute; top:0; left:0; right:0; height:14px; background-color:#000040; padding:3px; font-variant: small-caps; color:white; border-bottom:1px solid black; }
#meters-frame-body { position:absolute; top:20px; left:0; right:0; bottom:0; overflow-y:auto }
.meters-frame-bar { margin-bottom:1px; background-color: #404040; color:white; cursor:pointer; position:relative; min-height:20px }
.meters-frame-bar-icon { width:20px; height:20px; --size:20; float: left; position:relative; z-index:2 }
.meters-frame-bar-description { margin-left:4px; line-height:20px; position:relative; z-index:2; max-width:75%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.meters-frame-amount-bar { position:absolute;height:20px }
.meters-frame-amount-text { position:absolute;height:20px; top:0; right:3px; z-index:2; line-height:20px }
#meters-category-up-arrow { float:right; margin-left:3px; margin-top:3px; cursor:pointer }

#boss-frames { top: 20%; right:3px; width: 10%; position:absolute; cursor:default; white-space:nowrap }
#source-frames { left:36%; bottom: 75px; width:10%; position:absolute; cursor:default; white-space:nowrap }
#target-frames { left:54%; bottom: 75px; width:10%; position:absolute; cursor:default; white-space:nowrap }
#tot-frames { left: 47%; width: 6%; bottom: 75px; position:absolute; cursor:default; white-space:nowrap }

.event-view-mini-header { border:1px solid #555555; font-size:13px; padding:5px 10px; clear:left; }
.event-view-events-box { margin-top:5px; margin-bottom:15px; }

#limit-break-frame { position:absolute; bottom: calc(98px + max(15%,150px)); width:20%; min-width:225px; left:3px; font-size:11px; margin-bottom:5px; cursor:default; border:1px solid black; background-color:#333333 }
.limit-break-bar { width:30%;border:2px solid #888888; position:relative }
.limit-break-bar-contents { background-color: rgb(26%, 65%, 70%); position:absolute; left:0; right:100%; top:0; bottom:0 }
#limit-break-contents { padding:3px; display:flex; height:10px; justify-content:space-between }

.unit-frame { position:relative; padding:0; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid black; background-color: #800000; font-size:11px; margin:20px 0; text-align:center; color:white }
.unit-frame.vulnerable { background-color: rgb(52%, 17%, 52%) }
.unit-frame-hp { position:relative; padding:2px }
.unit-frame-castbar { max-height:18px; display:none; position: absolute; overflow:hidden; text-overflow:ellipsis; top:100%; left:-1px; right:-1px; padding:0; margin:0; border:1px solid black; background-color:black; text-align:left; line-height:18px; z-index: 0 }
.unit-frame-castbar-backdrop { position:absolute; left:18px; right:0; top:0; bottom:0; z-index:-1; }
.unit-frame-castbar-icon { float:left; width:18px; height:18px; --size:18; border-right:1px solid black; margin-right:5px }
.unit-frame-castbar-time { float:right; margin-right:4px }
.unit-frame-castbar-duration { position:absolute; left:0; top: 0; right:100%; bottom: 0; }
.bad-cast { color: #602020 }
.good-cast { color: #206020 }
.bad-cast-duration { background-color: #602020 }
.good-cast-duration { background-color: #206020 }

.unit-frame-cast-boxes
{
	position:absolute; top:0; bottom: 0; left:-100%; width:100%; text-align:right; overflow:hidden; vertical-align:middle
}

.unit-frame-cast-box {
	width:18px; height:18px; border:1px solid black; margin-right:2px
}

.unit-frame-main-cast-box
{
	width:36px; height:36px; border:1px solid black; margin-right:2px
}

.unit-frame-magicka-container { position:absolute; right:6px; top:0; bottom:0; width:4px; border:1px solid black;  z-index:1; background-color:black; }
.unit-frame-stamina-container { position:absolute; right:0; top:0; bottom:0; width:4px; border:1px solid black;  z-index:1; background-color:black; }
.unit-frame-magicka { background-color: rgb(40%,40%,90%); position:absolute;top:0;bottom:0;left:0; right:0 }
.unit-frame-stamina  {background-color: rgb(40%,90%,40%); position:absolute;top:0;bottom:0;left:0; right:0 }

#boss-frames .unit-frame-auras { bottom:auto; top: 0; left:-100%; direction:rtl; -webkit-writing-mode:horizontal-tb; -ms-writing-mode: lr-tb }
#boss-frames .unit-frame-buffs { text-align:right; }

.unit-frame-auras { position:absolute; bottom:100%; margin-bottom:1px; width: 100%; white-space:normal; -webkit-writing-mode:horizontal-bt; -ms-writing-mode: lr-bt; border-spacing: 0; }
.unit-frame-aura { display:inline-block; border:1px solid black; margin-right:2px; width:20px; height:20px; position:relative }
.unit-frame-debuffs > .unit-frame-aura { border: 1px solid red; margin-right:0; margin-left:2px }
#tot-frames .unit-frame-aura { width:14px; height:14px; }
.unit-frame-buffs { text-align: left; padding:0; vertical-align:top }
.unit-frame-debuffs { text-align: right; padding:0; vertical-align:top }

.unit-frame-aura-stack { position:absolute; left:0; top:0; bottom:0; right:0; font-size:11px; line-height:20px; color:white; background-color:rgba(0,0,0,0.3); font-weight:bold; text-align:center; text-shadow:1px 1px 1px black }
#tot-frames .unit-frame-aura-stack { font-size:11px; line-height:14px }

.unit-frame-contents { padding: 2px; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; border-bottom:1px solid #555555 }
#tot-frames .unit-frame-contents { border:none; }

.unit-frame-health-backdrop { position: relative; }
.unit-frame-interrupt-armor { position:relative; }
.unit-frame.selected { outline: 1px solid black }
.ia-bars-table { width: 100%; border-collapse: collapse }
.ia-bar { background-color: #a599be; border:2px solid #555555; height:3px }
.ia-bar.good { background-color: lime }
.ia-bar.bad { background-color: yellow }

.survival { text-align:center }
.survival.perfect, .survival.absent { color: #666 }
.survival.good { color: #ffa }
.survival.mediocre { color: #fc8 }
.survival.terrible { color: #faa }

#fullscreen-toggle { position:absolute;right:-1px }

#pins { clear:both }

.comparison-color { margin: 2px 2px -1px; width:16px; height:16px; display:inline-block; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
.comparison-color.small { margin: 2px 2px -1px; width:12px; height:12px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }

.comparison-0 { background-color: rgb(80,149,169); }
.comparison-1 { background-color: rgb(169,89,169) }
.comparison-2 { background-color: rgb(169,169,80) }
.comparison-3 { background-color: rgb(120,160,140) }
.comparison-report-bar { margin:2px auto; padding:3px 2.5%; font-size:13px; border-bottom:1px solid #555555; }
.comparison-clear-box { float:right; cursor:pointer }
.table-comparison-wrapper { margin: 10px 0 }
.table-comparison-toggle { cursor: pointer; position:absolute; bottom:5px; right:10px; font-size:11px }

#compare-reports-menu {
	display:inline-block;
	position:relative;
}

#compare-reports-menu ul { z-index: 9000 !important; }

#pins-ui-expression-box, #pins-ui-paste-box { font-size:16px !important }
#expression-loading { float:right; margin-right:250px; }

.filter-options-tab { border-bottom:1px solid transparent; float:left; color:#a0a0a0!important; margin:0 5px; padding:3px 6px; }
.filter-options-tab.selected, .filter-options-tab:hover { color:white!important; border-bottom:1px solid white; }
#filter-subtype-options { float:right; margin-top:5px; padding:0 12px; font-size:12px!important; }

#graph-caption { padding:0 !important }

.highcharts-tooltip { font-size:10px !important; }

#graphs { display: -webkit-flex; -webkit-flex-direction:column; display: -ms-flex; -ms-flex-direction:column; display: -moz-flex; -moz-flex-direction:column; display:flex; flex-direction:column; }
#graph, #position-graph, #position-graph-contents { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; }
#position-graph { display: -webkit-flex; -webkit-flex-direction:column; display: -ms-flex; -ms-flex-direction:column; display: -moz-flex; -moz-flex-direction:column; display:flex; flex-direction:column; }

#graphs:-webkit-full-screen {  width: 100%; height:100%; }
#graphs:-ms-full-screen {  width: 100%; height:100%; }
#graphs:-moz-full-screen {  width: 100%; height:100%; }
#graphs:full-screen {  width: 100%; height:100%; }

#filter-type-tabs-wrapper { padding:0 2.5%; background-color:#151515; border-bottom:1px solid #555555; margin-top:-5px }
.filter-type-tab { float:left; padding:8px; color:#a0a0a0 !important; border-bottom:1px solid transparent; margin:0 5px }
#filter-type-tabs { line-height:18px; margin-left:12px; cursor: pointer; position:relative; font-size:14px; }
.filter-type-tab:hover, .filter-type-tab.selected { color:white!important;
	border-bottom:1px solid white;
}

.hostility-link { color: #a0a0a0 !important; }
#hostility-link-container { margin-top:-1px; padding-left: 11px; padding-right:5px; padding-bottom:6px }
.hostility-link.selected, .hostility-link:hover { color:white !important }
#spell-tab-scroller { top: 0 !important; }
.empty-menu > li > .drop { padding-left: 0!important; padding-right:0!important; width:20px!important; background-position:5px 13px !important; }
.dropdown { position:relative; border:none!important; background:transparent!important; white-space:nowrap  }
.dropdown ul { z-index: 9000 !important }
.dropdown .scroll-up, .dropdown .scroll-down { z-index:9001 !important }
.dropdown.sm-black a, .graph-dropdown.sm-black a.current  { color: white; }
.instances-table, .actor-classes-table { box-sizing: border-box; -moz-box-sizing: border-box; width:100%; font-size:13px !important; margin:0 !important; border-left:hidden; border-right:hidden; border-bottom:hidden }
.instances-table, .actor-classes-table { border-top:hidden }
.instances-table a, .actor-classes-table a { display:block; padding:3px !important; white-space:nowrap !important; }
#report-top-bar { line-height: 17px; position:relative; visibility:hidden; margin-bottom:0;font-size:13px; padding:0 2.5%; background-color: #001525; border-bottom:1px solid #555555; min-height:63px; z-index:11 }
.wipes-percent-bg {height:2px; width:100%; margin:2px auto 0 auto; background-color:#303030; border:1px solid #303030 }
.wipes-percent-fg { height:2px; }

.wipes-entry:hover { outline:1px solid #c0c0c0 !important; position:relative; z-index:1 }

.last-pull-label { color:white; white-space:nowrap; }

.all-fights-entry { display:inline-block; padding:3px; margin:5px 15px 10px 5px; white-space:nowrap }
.all-fights-entry:hover { outline:1px solid #c0c0c0 }

.filter-clear-box { float:right; margin-left:3px }

#view-tabs-and-table-container { min-height:315px; }

#death-tab-scroller { min-height:500px; }

#header-bar { z-index: 30 }
#summary { z-index: auto; margin:0 auto 0; max-width:1300px; padding-left:2.5%; padding-right:2.5%; position:relative; }
body.replay #summary { max-width:initial !important; padding:0 !important; margin:0 !important }
#summary-content { z-index: auto }

body.replay #content, body.replay #content-and-footer, body.replay #summary-content, body.replay #graph-wrapper, body.replay #report-view-contents { top:0; bottom:0; left:0; right:0; position:absolute }
#report-fight-selection-area { position:absolute;left:0; right:0; z-index:1000; padding-left:2.5%; padding-right:2.5%; min-height:100% }

body.replay #content { top:53px !important; display: -webkit-flex; -webkit-flex-direction:column; display: -ms-flex; -ms-flex-direction:column; display: -moz-flex; -moz-flex-direction:column; display:flex; flex-direction:column; }
body.replay #summary, body.replay #report-view-contents { -webkit-flex: 1; -moz-flex: 1; -ms-flex: 1; flex: 1; position:relative; display: -webkit-flex; -webkit-flex-direction:column; display: -ms-flex; -ms-flex-direction:column; display: -moz-flex; -moz-flex-direction:column; display:flex; flex-direction:column; }
body.replay #summary-content, body.replay #graph-wrapper { display:-webkit-flex; -webkit-flex-direction:column; display:flex; flex-direction:column }
body.replay #summary-content > div:not(#pins), #graphs { -webkit-flex: 1; -ms-flex: 1; -moz-flex: 1; flex: 1; max-height:none }
body.replay #filter-subtype-strip, body.compare #filter-subtype-strip { display:none !important }

.pin-graph { background-color:black!important; margin: 4px -4px -4px -4px; height: 150px; border-top: 1px solid #555555 }

#video-frame { display:none; width: 560px; height:337px; position:absolute; z-index:100000; left:3px; cursor:default; border:1px solid black; background-color:#303030; top:0; margin-top:85px }
#video-frame.fullscreen { width:auto; height:auto; left:0; top:0; bottom:0; right:0; margin-top:0 }
#video-frame-inner { cursor: pointer; position:absolute;bottom:22px; top:0; left:0; right:0; background-color:black; }
#video-frame-controls { position:absolute; height:18px; background-color:#000020; font-size:10px; padding:3px 2px 1px 2px; cursor:pointer; bottom:0; left:0; right:0 }

#translate-bar, #untranslate-bar { border-bottom:1px solid #555555; background-color:#141414; color:white; padding:8px 2.5%; margin:0; overflow:hidden; line-height:25px }
.translator-button { float: right; margin-right:10px }

.big-tab-container { position:absolute; top:0; bottom:0; right:0; cursor: pointer; border-spacing:0; }
.big-tab-table { display:table; height:100%; box-sizing:border-box }
.big-tab { display:table-cell !important; vertical-align:middle; box-sizing:border-box; min-width:90px; text-align:center !important; font-size:13px; color:#a0a0a0 !important; border-bottom:1px solid transparent;  }

.big-tab.selected, .compare #compare-ui-toggle-tab, .pins #pins-ui-toggle-tab
{ 
	color:white !important;
	border-bottom:1px solid white;
}

.compare #top-level-view-tabs-container .big-tab.selected, #view-type-tabs.pins .big-tab.selected { color: #a0a0a0 !important; border-bottom:1px solid transparent }

.compare #graph-wrapper { display: none }
.compare #view-tabs-and-table-container, #graph-and-table-container.pins { display:none }

#filter-source-and-target-selection { position:relative; float:left; }

.spell-row { position:relative; }

.compare-selection-menu, #compare-metric-dropdown { float:left; }

.compare-number { width:20px; }

#timeline-container { overflow-x: auto; position:absolute; left:0; right:0; top:0 }
#timeline-names-container { position:relative; float:left; padding-bottom:50px }

.timeline-names-column { padding-top:42px; background-color:black; position:relative;z-index:1 }
.timeline-name { clear:left; width:200px; height:20px; border-top:1px solid #555555; padding:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background-color:black }
.timeline-name.even { background-color: #101010 }

.timeline-ruler { padding-top:20px; padding-left:206px; white-space:nowrap }
.timeline-ruler-second { height:16px;  }
.timeline-ruler-half-second { height:8px;  }
.timeline-ruler-hundredth-second { height:4px; }

.timeline-ruler-tick { position:relative; color:white; border-left:1px solid white; display:inline-block; border-bottom:1px solid white; width:6px; }
.timeline-ruler-number { position:absolute; top: -15px; left:-11px; }

.timeline-lines { background-color:black; margin: 10px 0; }
.timeline-line { position:relative; margin-left:206px; height:24px; border-top:1px solid #555555; padding-top:2px; }
.timeline-line.even { background-color: #101010 }

.timeline-actor { min-width:150px; padding:10px; clear:left; }
.timeline-box { border:1px solid #555555; min-width:20px; height:20px; position:absolute; }
.timeline-icon { float:left; width:20px; height:20px; --size:20; }

.timeline-box.failed { border:1px solid red !important; background-color:#800000!important }

#timeline-tooltip-singleton { padding:3px; white-space:nowrap; border:2px solid #555555; position:absolute; z-index:2; background-color:black; font-size:11px }
.timeline-tooltip { position:absolute; margin-top:28px; }
#timeline-tooltips-container { position:relative; z-index:100 }

#slideshow { margin-bottom:5px; border:1px solid #555555; background-color: black; display:none }
#slideshow-caption { min-width:200px; font-size: 16px; background-color:#141414; border-right:1px solid #555555; height:100%; padding-right:10px; padding-left:10px  }
#slideshow-description { min-width:200px; font-size:11px; border-left:1px solid #555555; padding:5px; background-color:#141414; color:#a0a0a0 }
#slideshow-body { width:100%; text-align:center }
#slideshow-current-event { display:inline-block; margin-bottom:6px; min-width:75% }

.actor-menu-link { overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }

.compare-selection-menu { white-space: nowrap }

#guild-reports-toggle { margin:0 5px; }
#guild-reports-toggle-link { background: none !important }

.guild-report-image { height:42px; float:left; margin-top:-11px; margin-bottom:-6px }
#guild-reports-text { margin-left:5px !important; float:left; max-width:15vw; overflow:hidden; text-overflow:ellipsis; color:white!important }

.big-tab-table .zmdi { font-size:22px }

tr.child { display: none }
tr.child.visible { display: table-row }

#report-header-owner-text { margin-left:15px }

#report-title-link { display:block }

#report-title-container {
	font-size:20px;
	line-height:17px;
	max-width:35vw;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	display:block;
}

#report-info-menu, #guild-reports-toggle {
margin-top:10px;
	-webkit-transform: translate3d(0, -120%, 0); transform: translate3d(0, -120%, 0);
-webkit-transition: all;
  -o-transition: all;
  transition: all;
  -webkit-transition-duration: 1000ms;
  transition-duration: 1000ms; 
}

#guild-reports-toggle.visible, #report-info-menu.visible {
	-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}

.big-tab:hover { color:white !important; border-bottom:1px solid white !important }

#report-content-table { width: 100% }

#filter-type-menubar { padding:0 2.5%; position:relative; border-bottom:1px solid #555555; min-height:62px }
#report-top-bar > .report-bar-inset, #filter-type-menubar > .report-bar-inset { padding: 5px 0 }

#filter-type-selector-text { color:white !important; font-size:16px }

.filter-dropdown-wrapper { float:left; position:relative; margin-right:40px }

#filter-subtype-strip { padding-left:11px; padding-right:0; margin-bottom:5px }
#filter-subtype-selection-text { padding-bottom:2px !important; border-bottom: 1px solid white; }

#filter-type-menubar { margin-bottom:5px }

.summary-right-caption { float:right;margin-right:5px }

#auras-normal-or-stacked { margin:1em; font-size:13px; overflow:hidden }

.extra-filter-type-dropdown { float: left; margin-top:2px; margin-left: -5px }
.extra-filter-type-dropdown  > a { padding:5px 10px !important }

#table-caption { margin: 10px auto; }

.uptime-name { white-space:nowrap; width:20%; max-width:300px;overflow:hidden;text-overflow:ellipsis; }
.uptime-number { width:50px; min-width:50px; max-width:50px }
.uptime-bar-container { width:500px;position:relative }
.uptime-bar { position:absolute; left:62px; top:calc(50% - 2px); right:6px; height:4px }
.uptime-bar-percent { float:left; text-align:right; width:50px;height:100%;margin-right:6px }
.bar-piece { opacity:0.9;position:absolute; top:0; bottom:0; min-width:1px; }

.report-amount-bar { position:absolute; top:calc(50% - 7px); height:14px; left:62px; right:64px; }
.report-amount-percent { width:50px; margin-right:6px; text-align:right; float:left }
.report-table-amount { position:relative; width:500px; white-space:nowrap; text-align:right }

.report-table-name { width:20%; max-width:300px; white-space:nowrap; }
tr.depth-1 .report-table-name { padding-left:26px !important; }
tr.depth-2 .report-table-name { padding-left:52px !important; }
.report-amount-bar.first { top:calc(50% - 16px); height:14px }
.report-amount-bar.second { top:calc(50% + 2px); height:14px; }
.tooltip-table-amount { position:relative; white-space:nowrap; text-align:right; width:250px }
.tooltip-table-amount .report-amount-bar { left:57px; right:58px;top:4px; bottom:4px; height:auto }
.tooltip-table-amount .report-amount-percent { width:45px }

#quick-filter-container.graphhide { margin-right:40px !important }

.table-comparison-wrapper .report-amount-percent { display: none }
.table-comparison-wrapper .report-amount-bar { left: 6px }

.main-table-active { width:45px; min-width:45px; max-width:45px; }
.main-per-second-amount { width:70px; min-width:70px; max-width:70px }

#filter-fight-boss-wrapper { cursor: pointer; float: left; margin-top:-1px; margin-left:10px; margin-right:34px; padding-right:6px; margin-bottom: 6px }
#filter-fight-boss-wrapper:hover { background-color: #002040; }

#filter-fight-boss-contents { overflow:hidden; margin-top:1px }

#filter-fight-boss-text { padding:6px 25px 6px 0; position:relative; float:left; white-space:nowrap; }
#filter-fight-details-text { line-height:17px; float:left;clear:left; white-space:nowrap }
#filter-fight-boss-icon { border:1px solid #555555; margin-top:2px; height:46px; width:46px; --size:46; float:left; margin-right:10px; }
#filter-fight-and-phase { margin-top:3px }

.affix-icon { width:14px; height:14px; border:1px solid #555555; margin:0 3px }

@media (max-width:1200px) {
	#report-in-queue-text { display:none }
}

@media (max-width:1024px) {
	 #report-settings-box { display:none!important; }
	 .big-tab-text { display:none }
	 .big-tab-container { clear:both; position:static !important; height:40px !important; border-top:1px solid #555555; background-color:#141414; margin-left:-2.5%; margin-right:-2.5% !important; }
	.big-tab-table { width: 100% }
	.big-tab .zmdi { font-size:18px; float:none !important }
	.big-tab { min-width:0 !important; padding:6px 10px  }
	.big-tab.selected { background: none !important }
	#report-top-bar > .report-bar-inset, #filter-type-menubar > .report-bar-inset { padding-bottom:0!important }
}

@media (max-width:900px) {
	#report-header-owner-text { display:none }
	
	.table-comparison-wrapper { width: 100% !important; height:auto!important; margin-right:0 !important; margin-left: 0 !important }
	.table-comparison-wrapper .report-amount-bar { display: none }
	
	.events-view-buffs { display: none }
	
	#report-in-queue { display:none !important }
}

@media (max-width:768px) {
	.report-overview-zone-name { display:none !important }
	.report-overview-boss-kill { display:none !important }
	.report-overview-boss-details-toggle { min-width:0!important; height:100%; padding-left:5px!important }
	.fight-details-toggle-text { display:none!important; }
	
	#report-title-container { display: none }
	#guild-reports-text { display: none }
	.pin-graph { display:none }
	
	.report-amount-percent { display: none }
	.report-amount-bar { left: 6px }
	
	/* Summary pane */
	.summary-right-caption { float:none; clear:left; margin-top:5px }
	
	/* Auras */
	#auras-normal-or-stacked { display:none }
}

@media (max-width:500px) {
	 
	#graph-container, #graph, #filter-graph-dropdown, #table-caption, .tpd-tooltip, #graph-zoom-container { display:none !important; }
	
	/* Bars in all pages */
	.report-amount-bar { display:none }

	#quick-filter-container { float:left!important; clear:left!important; margin-top:5px !important; margin-left:5px !important; }
	#quick-filter-pin { width:auto!important; }
	.summary-block { width: 100% !important; height:auto!important; margin-right:0 !important; margin-left: 0 !important }
	
	#filter-subtype-options { float:left !important; clear:left !important; padding-left: 0 !important }
	
	.all-fights-entry { display:block !important; white-space:normal !important; }
}

.report-table-icon { width:20px; height:20px; --size:20; border:1px solid #555555; float:left; margin-right:6px; margin-left:2px }

#filter-buffs-container { height:37px }
.aura-filter-link { opacity: 0.6; display:inline-block; padding:1px; border:1px solid transparent }
.aura-filter-link:hover, .aura-filter-link.present, .aura-filter-link.absent { opacity: 1.0 }
.aura-filter-link { margin-right:1px; margin-left:1px }
.aura-filter-link .table-icon { margin-right:0 !important; float:none!important;vertical-align:-4px; width:18px; height:18px }
.aura-filter-link.present { border:1px solid #00ff00; }
.aura-filter-link.absent { border:1px solid #ff0000; }

#compare-two-players-button { float:left; margin-top:3px; margin-left:10px }

#replay-canvas { position:absolute; left:0; top:0; right:0; bottom:0; }

#replay-canvas-tooltip { display:none; position:absolute; padding:5px; border:2px solid #555555; background-color:#141414; text-align:left }

#replay-legend { position:absolute; text-align:center; max-width:90%; margin:auto; top:2px; left:10px; right:10px; }
#replay-legend-inset { display:inline-block; border:1px solid #555555; background-color:#141414; margin-top:4px; padding:7px 7px 5px; text-align:left }

.replay-legend-item { display: inline-block; padding:2px; font-size:11px; margin-right:7px; cursor:pointer; white-space:nowrap }
.replay-legend-item.hidden { opacity: 0.6 }

.replay-legend-icon { width:16px; height:16px; --size:16; float:left; margin-right:3px; margin-top:-1px }

#report-fight-selection-area { display:none; background-color:black; }

.report-command { font-size:32px !important;line-height:40px !important; display:inline-block!important; margin:0 3px !important; padding:6px !important; }

body.overview #report-top-bar { display: none }
body.overview #report-view-contents { display: none }
body.overview #report-fight-selection-area { display:block }

.report-overview-boss-kill { position:absolute; left:400px; font-size:13px; }
.report-overview-boss-details-toggle { position:absolute; right:0; min-width:55px; font-size:13px; padding-left:10px; padding-right:25px; border-left:1px solid #555555; background-color:#002040 }

.report-overview-zone-name { position:absolute; right:110px; font-size:13px; }

.report-overview-boss-box { clear:left; margin:0 10px; margin-bottom:10px; padding:0; border:1px solid #555555; background-color:#000016; position:relative; }
.report-overview-boss-caption:hover { outline:1px solid #c0c0c0;  }

.report-overview-boss-text { margin-left:10px }
#report-overview-lastpull-box { cursor: pointer; display:inline-block; white-space: nowrap; font-size:14px; margin-right:5px; margin-bottom:10px }
#report-overview-lastpull-contents { display:inline-block; }
#report-settings-box { float:left }

.wipes-table { overflow:hidden;padding:2px;margin-bottom:5px }
.wipes-entry { padding:6px 12px; border:1px solid #555555; float:left; margin-left:-1px;margin-top:-1px; background-color:#141414 }
.fight-grid-number { min-width:23px; text-align:right; display:inline-block; margin-right:5px }
.fight-grid-duration { min-width:42px; display:inline-block; margin-right:5px }
.fight-grid-time { min-width:50px; display:inline-block; }

.report-overview-boss-caption { display:block; position:relative; cursor: pointer; font-size:16px; line-height: 36px; background-color:black; border-bottom:1px solid #555555; margin-bottom:-1px; color:white!important; overflow:hidden; white-space:nowrap; text-overflow:ellipsis  }
.report-overview-right-box { margin-bottom: 15px; }

.report-overview-boss-pulls { padding:15px 10px 10px 15px; }
.report-overview-boss-pulls.collapsed { display: none }

.fight-selection-boss-icon { float:left; margin-right:5px; width:36px; height:36px; --size:36; border-right:1px solid #555555; }
#report-overview-views { float:right; }

.specific-fights-selection { display: none; padding:3px; margin:5px 15px 10px 5px;  }

.groups-menu-caption, .instances-menu-caption { padding:4px; border-bottom: 1px solid #555555; }
.instances-menu-caption { border-top: 1px solid #555555 }

.wipes-entry.multiple-select { background-color:#002040; outline:1px solid #0080a0; position:relative }

@media (max-width:450px) {
	#report-overview-settings-box { display: none }
}

.ability-menu-table a, .actor-menu-table a { white-space: nowrap!important; padding-right:10px }
.ability-menu-id { text-align:right; font-size:10px; color:#a0a0a0; padding-left:10px; padding-right:10px }
.ability-menu-id > a { font-size:10px !important; color:#a0a0a0 !important; padding-right:0!important }

.letter-table { border-bottom: 1px solid #555555; border-collapse:collapse; margin:-1px }

.letter-table-cell { border:1px solid #555555; width:20px; min-width:20px; text-align:center; }

.letter-table a { color:#a0a0a0 !important; padding:3px !important }

.letter-and-ability-table > tbody > tr { vertical-align:top }
.letter-and-ability-table { border-spacing: 0 }
.letter-and-ability-table > tbody > tr > td { padding:0 }

.letter-table-cell.selected a { color:white !important; background-color:#000060 !important }
.ability-menu-table { display:none }
.ability-menu-table.selected, .ability-menu-table.visible { display:table !important }
 
 .actor-menu-table { display:inline-table; min-width:200px; }
 .actor-menu-table.bordered { border-right:1px solid #555555; }
 
.letter-table-cell-indented { margin-left: 20px; }
 
span.sub-arrow {
		position:absolute;
		right:12px;
		top:50%;
		margin-top:-1px;
		/* we will use one-side border to create a triangle so that we don't use a real background image, of course, you can use a real image if you like too */
		width:0;
		height:0;
		overflow:hidden;
		border-width:4px; /* tweak size of the arrow */
		border-style:solid dashed dashed dashed;
		border-color:white transparent transparent transparent;
	}


.exposures { position:relative;margin-left:10px; font-size:24px; vertical-align:middle; background-color:#a00000; color:white; border:1px solid #555555; padding:5px }
.exposure-popup { display:none; position:absolute;top:40px; left:-5px; border:1px solid #555555; padding:0 15px; font-size:10px; color:white; width:400px; background-color:#141414; }

.exposures:hover > .exposure-popup { display:block; }

.composite-unit-frame-title { display:none; }
.composite-unit-frame-tile:not(:only-child) { display:block; }

#boss-frames { white-space:normal; width:20%; height:45vh; overflow-y:hidden; top:15% !important }

#npc-frame-section .unit-frame, #boss-frame-section .unit-frame { margin-top:0; margin-bottom:0; }

.unit-frame:not(:only-child) { display:inline-block; font-size:9px; margin:5px; min-width:25%; max-width:25%; }

#npc-frame-section .unit-frame { font-size: 9px }

#npc-frame-section .unit-frame, #boss-frame-section .unit-frame { width:50%; margin-left:auto; }

.composite-unit-frame { margin-top:20px; }

#npc-frame-section .composite-unit-frame:first-child { padding-top:20px; }

.composite-unit-frame:not(:empty) { margin-left:auto; text-align:right; }

.composite-unit-frame:not(:empty) .unit-frame-buffs { text-align:left; }

#pulls-frame { transform:translateZ(0); box-sizing:border-box; height: 130px; width:20%; position:absolute;bottom:calc(83px + 4%); right:3px; margin-bottom:5px; cursor:default; border:1px solid black; background-color:#141414; font-size:11px; }
#pulls-frame-title { position:absolute; top:0; left:0; right:0; height:14px; background-color:#000040; padding:3px; font-variant: small-caps; color:white; border-bottom:1px solid black; }
#pulls-frame-body { position:absolute; top:20px; left:0; right:0; bottom:0; display:flex; flex-direction: column; }
#pulls-frame-navigation { display:flex; flex-direction:row; border-bottom:1px solid #555555; flex:1; height:0 }
#pulls-frame-contents { flex: 1; width:0; border-left:1px solid #555555; border-right:1px solid #555555; display:flex; padding:5px; justify-content:center; align-items:center; text-align:center; overflow:auto; }

.pulls-frame-navigation { padding:10px; font-size:20px; cursor:pointer; background-color:#141414; display:flex;align-items:center; justify-content:center; }
.pulls-frame-navigation:hover,  .pulls-frame-control.selected { background-color:#000060; outline:1px solid white; position:relative }

#pulls-frame-controls { display:flex; flex-direction:row; }
.pulls-frame-control { display:0; flex:1; font-size:13px; text-align:center;background-color:#141414; padding:5px; cursor:pointer; }
.pulls-frame-control:first-child { border-right:1px solid #555555; }

#pulls-frame-contents .NPC { white-space:nowrap }

#replay-canvas-tooltip { max-width:150px; }