html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background:
    -webkit-gradient(linear, left top, left bottom,
                     color-stop(0%, rgba(25, 25, 25, 1)),
                     color-stop(100%, rgba(53, 53, 53, 1)));
  overflow: hidden;
  /* prevent document scrollbars (the timeline handles it's own overflow) */
  -webkit-user-select: none;
  line-height: 10px;
}

/* General */
.cleared {
  height: 0;
  clear: both;
}

/* selected and dragging items */
.clip.ui-draggable-dragging {
  z-index: 7000 !important;
}

/* selected and dragging items */
.transition.ui-draggable-dragging {
  z-index: 8000 !important;
}

/* manually moving selected item */
.manual-move {
  z-index: 8000 !important;
}

/* selection box during drag */
.ui-selectable-helper {
  position: absolute;
  z-index: 9998 !important;
  border: 1px solid #2a82da;
  background-color: #2a82da;
  opacity: 0.4;
}

img {
  max-width: none;
}

.menu {
  cursor: pointer;
  float: left;
  margin: 4px 4px 2px;
  width: 12px;
  height: 12px;
  background-image: url(../images/menu.svg);
}

.menu:hover {
  filter: brightness(3.0);
}

/* Ruler */
#scrolling_ruler {
  overflow: hidden;
  position: relative;
  line-height: 4px;
  height: 43px;
  margin-right: 8px; /* Prevent playhead from becoming unaligned due to scrollbars */
}

#scrolling_tracks {
  height: 316px;
  overflow: scroll;
  position: relative;
}

#ruler_label {
  height: 39px;
  width: 140px;
  float: left;
  margin-bottom: 4px;
}

#ruler_time {
  font-size: 13pt;
  color: #999;
  padding-top: 12px;
  padding-left: 17px;
  cursor: default;
}

#progress {
  position: absolute;
  bottom: 0;
}

.drag_cursor {
  cursor: move;
}

#ruler {
  position: relative;
  height: 39px;
  background-position: -50px;
}

.tick_mark {
  position: absolute;
  height: 14px;
  width: 1px;
  bottom: 3px;
  background-color: #acacac;
  background-position: -50px;
}

.ruler_time {
  color: #c8c8c8;
  top: 6px;
  font-size: 0.8em;
  position: absolute;
  transform: translate(-50%, 0);
  cursor: default;
}

/* Tracks */
#track_controls {
  width: 140px;
  position: relative;
  float: left;
  height: 316px;
  overflow: hidden;
}

.track_top {
  background:
    -webkit-gradient(linear, left top, left bottom,
                     color-stop(0%, rgba(255, 255, 255, 0.20)),
                     color-stop(100%, rgba(255, 255, 255, 0)));
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.track_lock {
  float: left;
  background-image: url(../images/lock.svg);
  width: 15px;
  height: 16px;
  margin-top: 2px;
}

.track_label {
  padding-top: 2px;
  padding-left: 4px;
  text-shadow: 0 0 10px #ffffff;
}

.track_name {
  width: 140px;
  height: 62px;
  color: #fff;
  font-size: 9pt;
  margin-left: 5px;
  margin-bottom: 8px;
  background-color: #000;
  border-top: 1px solid #4b92ad;
  border-bottom: 1px solid #4b92ad;
  border-left: 1px solid #4b92ad;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0 0 10px #000;
}

.track_disabled {
  background:
    -webkit-gradient(linear, left top, left bottom,
                     color-stop(0%, rgba(20, 20, 20, 1)),
                     color-stop(100%, rgba(6, 6, 6, 1))) !important;
}

.track {
  height: 62px;
  background-color: #000;
  margin-bottom: 8px;
  background:
    -webkit-gradient(linear, left bottom, left top,
                     color-stop(0%, rgba(50, 50, 50, 1)),
                     color-stop(100%, rgba(6, 6, 6, 1)));
  border-top: 1px solid #4b92ad;
  border-bottom: 1px solid #4b92ad;
  border-right: 1px solid #4b92ad;
  box-shadow: 0 0 10px #000;
  position: relative;
  z-index: 1;
}

.track-resize-handle {
    position: absolute;
    right: -8px; /* To the right of the track right edge */
    top: -1px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    background-color: #2c2c2c;
    border-top: 1px solid #4b92ad;
    border-bottom: 1px solid #4b92ad;
    border-right: 1px solid #4b92ad;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.track-resize-handle:hover {
    background-color: #4C4C4CFF;
}

.banding-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  pointer-events: none;
}

.banding-overlay div {
  position: absolute;
  height: 100%;
}

.track.banding-overlay::before {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Playhead */
.playhead-line {
  z-index: 9999;
  position: absolute;
  height: 316px;
  top: 0;
  width: 2px;
  background-color: #ff0024;
  opacity: 1;
  margin: -1px;
}

.playhead-top {
  cursor: move;
  z-index: 9999;
  position: absolute;
  margin-left: -6px;
  margin-top: 20px;
  width: 12px;
  height: 188px;
  background-image: url(../images/playhead.svg);
  opacity: 1;
}

.marker_icon {
  cursor: pointer;
  background-image: url(../images/markers/marker.svg);
  background-color: transparent;
  position: absolute;
  bottom: 0;
  margin-left: -4px;
  width: 8px;
  height: 10px;
  border: none;
  outline: none;
}

/* Clips */
.clip_top {
  display: -webkit-flex;
  background:
    -webkit-gradient(linear, left top, left bottom,
                     color-stop(0%, rgba(255, 255, 255, 0.20)),
                     color-stop(100%, rgba(255, 255, 255, 0)));
  border-radius: 8px;
  overflow: hidden;
}

.clip_top:hover {
  overflow: visible;
  z-index: 9000;
}

.clip_menu {
  display: -webkit-flex;
}

.clip_label {
  cursor: move;
  min-width: 0;
  float: left;
  margin-left: 2px;
  color: #fff;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clip_effects {
  cursor: pointer;
  opacity: 0.7;
  display: inline-block;
  border: 1px solid #000;
  text-align: center;
  min-width: 12px;
  font-size: 0.8em;
  padding: 1px;
  padding-top: 2px;
  font-weight: bold;
  margin-right: 2px;
  margin-top: 2px;
  background: rgba(54, 25, 25, 0.2);
  overflow: hidden;
  line-height: 11px;
  height: 11px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
}

.clip_effects:hover {
  opacity: 1.0;
  border-color: #dfdfdf;
}

.effect_icon {
  margin-left: 1px;
  margin-right: 1px;
}

.webkit .razor_cursor {
  cursor: url(../images/razor_line_with_razor.png), default !important;
}

.webengine .razor_cursor {
  cursor: url(../images/razor_line_with_razor.svg), default !important;
}

.clip {
  cursor: move;
  z-index: 1000;
  color: #fff;
  min-width: 0;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  position: absolute;
  margin-top: 0;
  left: 100px;
  font-size: 9pt;
  background-color: #ef7f00;
  background:
    -webkit-gradient(linear, left top, left bottom,
                     color-stop(0%, rgba(82, 82, 82, 1)),
                     color-stop(100%, rgba(34, 38, 40, 1)));
  border-radius: 8px;
  border-top: 1px solid #4b92ad;
  border-bottom: 1px solid #4b92ad;
  box-shadow: 0 0 10px #000;
  opacity: 0.95;
  box-sizing: border-box;
}

.left_edge_stop {
  border-left: 2px solid #4b92ad;
}

.right_edge_stop {
  border-right: 2px solid #4b92ad;
}

.highlight_clip {
  border-color: #32b7ea;
}

.ui-selecting {
  border-top: 1px solid yellow !important;
  border-bottom: 1px solid yellow !important;
  box-sizing: border-box;
}

.ui-selected {
  filter: brightness(1.3);
  border-top: 1px solid red !important;
  border-bottom: 1px solid red !important;
  box-sizing: border-box;
}

.thumb {
  margin-left: 5px;
  width: 66px;
  height: 38px;
}

.thumb-start {
  float: left;
}

.thumb-end {
  float: right;
}

.effect-container {
  white-space: nowrap;
  height: 20px;
  float: left;
  border-radius: 8px;
  padding-left: 1px;
  padding-right: 1px;
}

.effect-container:hover {
  background-color: #7c7979;
  z-index: 9000;
}

.thumb-container {
  margin-top: -20px;
  overflow: hidden;
}

.audio-container {
  margin-top: -24px;
  height: 46px;
}

/* Clip Animations */
.clip.ng-enter, .clip.ng-leave {
  -webkit-transition: 0.1s linear all;
  transition: 0.1s linear all;
}

.clip.ng-enter, .clip.ng-leave.ng-leave-active {
  opacity: 0;
}

.clip.ng-leave, .clip.ng-enter.ng-enter-active {
  opacity: 1;
}

/* Keyframes */
.point_region {
    position: absolute;
    bottom: 0px;
    height: 10px;
    width: 100%;
    margin-left: -5px;
    margin-bottom: -6px;
    overflow: visible;
}
.point_bezier {
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url(../images/keyframe-bezier.svg);
    background-repeat: no-repeat;
    margin: 0;
    cursor: pointer;
}

.point_linear {
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url(../images/keyframe-linear.svg);
    background-repeat: no-repeat;
    margin: 0;
    cursor: pointer;
}

.point_constant {
    position: absolute;
    width: 10px;
    height: 10px;
    background-image: url(../images/keyframe-constant.svg);
    background-repeat: no-repeat;
    margin: 0;
    cursor: pointer;
}

.point {
  filter: brightness(100%);
}

.point:hover {
  filter: brightness(140%);
}

/* Transitions */
.transition_top {
  background:
    -webkit-gradient(linear, left top, left bottom,
                     color-stop(0%, rgba(255, 255, 255, 0.75)),
                     color-stop(100%, rgba(255, 255, 255, 0)));
  border-radius: 8px;
  overflow: hidden;
}

.transition {
  cursor: move;
  z-index: 5000;
  color: #fff;
  min-width: 0;
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  position: absolute;
  margin-top: 0;
  left: 100px;
  font-size: 9pt;
  background-color: #0192c1;
  background: -webkit-linear-gradient(top, #0192c1 0%, #3fa1bf 100%);
  border-radius: 8px;
  border-top: 1px solid #0192c1;
  border-bottom: 1px solid #0192c1;
  opacity: 0.75;
  box-shadow: 0 0 10px #000;
  box-sizing: border-box;
  background-image: url(../images/transition.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(100% + 2px) 66px;
}

.transition_label {
  float: left;
  padding-top: 2px;
  width: 50px;
  margin-left: 2px;
  color: #fff;
  font-weight: bold;
}

.highlight_transition {
  border-color: #32b7ea;
}

/* Transitions Animations */
.transition.ng-enter, .transition.ng-leave {
  -webkit-transition: 0.1s linear all;
  transition: 0.1s linear all;
}

.transition.ng-enter, .transition.ng-leave.ng-leave-active {
  opacity: 0;
}

.transition.ng-leave, .transition.ng-enter.ng-enter-active {
  opacity: 1;
}

/* Snapping / snapline */
.snapping-line {
  z-index: 9998;
  position: absolute;
  height: 316px;
  top: 0;
  width: 1px;
  background-color: #32b7ea;
  opacity: 0.75;
}

/* Snap line Animations */
.snapping-line.ng-hide-add {
  display: block !important;
}

.snapping-line.ng-hide-remove {
  display: block !important;
  opacity: 0.0;
}

.snapping-line.ng-hide-remove.ng-hide-remove-active {
  opacity: 0.75;
}

.snapping-line.ng-hide-add.ng-hide-add-active {
  opacity: 0.0;
}

/* Scrollbar style */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #4b92ad;
  border-radius: 0.45em;
}

::-webkit-scrollbar-track {
  background: #000000;
  box-shadow: inset 0 0 0.6em rgba(75, 196, 233, 1.0);
  border-radius: 0.45em;
}

::-webkit-scrollbar-corner {
  background: none;
}

/* Hide timeline until Angular is loaded */
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}
