/*Splitter control styles*/
/* Remove overflow:hidden because this breaks the file diff viewer in IE9
   TODO: Figure out why this breaks the diff viewer in IE9 and add back in
 */
.splitter {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.splitter > .leftPane {
  position: absolute;
  overflow: hidden;
}

.splitter > .rightPane {
  position: absolute;
  overflow: hidden;
}

.splitter > .handleBar,
.splitter > .handleBar-clone {
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
  border:  0 solid;
  border-color: rgba( 200, 200, 200 ,  1 );
  border-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.splitter > .handleBar:focus,
.splitter > .handleBar-clone:focus {
  outline: 0;
}

.splitter > .handleBar:focus .handleBar-hitTarget,
.splitter > .handleBar-clone:focus .handleBar-hitTarget {
  background-color: rgba( 102, 102, 102 ,  1 );
  background-color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
  border:  1px dashed;
  border-color: rgba( 0, 0, 0 ,  1 ) !important;
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
  font-weight: bold !important;
}

.splitter > .handleBar-clone {
  border:  1px dashed;
  border-color: rgba( 0, 0, 0 ,  1 ) !important;
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
  font-weight: bold !important;
}

.splitter.dragging > .handleBar-clone,
.splitter.dragging > .handleBar-clone.hover {
  z-index: 101;
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
}

.splitter > .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 1);
  background-color: var(--background-color,rgba(255, 255, 255, 1));
  z-index: 100;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  opacity: 0.5;
  -webkit-user-select: none;
  -moz-user-select: -moz-none;
  user-select: none;
}

/* Vertical */
.splitter.vertical > .overlay {
  cursor: n-resize;
}

.splitter.vertical > .leftPane {
  height: 40%;
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  margin-bottom: 0;
}

.splitter.vertical > .handleBar {
  top: 40%;
  height: 0;
  bottom: auto;
  cursor: n-resize;
  left: 0;
  right: 0;
  border-top-width: 1px;
}

.handleBar-hitTarget {
  position: relative;
  z-index: 10;
}

.splitter.vertical > .handleBar > .handleBar-hitTarget {
  height: 5px;
  cursor: n-resize;
  width: 100%;
  top: -2px;
}

.splitter.vertical.collapsed > .handleBar > .handleBar-hitTarget {
  width: 0;
}

.splitter.vertical > .handleBar-clone {
  height: 5px;
  cursor: n-resize;
  left: 0;
  right: 0;
}

.splitter.vertical > .rightPane {
  top: 40%;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 1px;
}

.splitter.vertical.right-fix > .leftPane {
  height: auto;
  top: 0;
  bottom: 40%;
  margin-bottom: 1px;
}

.splitter.vertical.right-fix > .rightPane {
  height: 40%;
  top: auto;
  bottom: 0;
  margin-top: 0;
}

.splitter.vertical.right-fix > .handleBar {
  top: auto;
  bottom: 40%;
}

/* Horizontal */
.splitter.horizontal {
  display: table;
  /* This is a hack. There is a bug in IE10 around z-index with our popup menus. The New WorkItem popup 
                     * menu shows partially behind the left pane of the splitter without this. Changeset 188819 made some
                     * styles more specific which removed the "accidental" cover up of the IE10 bug. This style is essentially
                     * reverting a piece of that changeset. In newer versions of IE10 this problem is fixed so the hack is 
                     * purely in place for the minor versions of IE10 that this bug appears in.
                     */
}

.splitter.horizontal > .overlay {
  cursor: e-resize;
}

.splitter.horizontal > .leftPane {
  width: 40%;
  left: 0;
  top: 0;
  bottom: 0;
  margin-right: 0;
}

.splitter.horizontal > .handleBar {
  left: 40%;
  right: auto;
  width: 0;
  cursor: e-resize;
  top: 0;
  bottom: 0;
  border-left-width: 1px;
}

.splitter.horizontal.collapsed > .handleBar {
  border-left-width: 0;
  border-right-width: 1px;
}

.splitter.horizontal.collapsed.right-fix > .handleBar {
  border-left-width: 1px;
  border-right-width: 0;
}

.splitter.horizontal > .handleBar > .handleBar-hitTarget {
  width: 5px;
  cursor: e-resize;
  height: 100%;
  left: -2px;
}

.splitter.horizontal.collapsed > .handleBar > .handleBar-hitTarget {
  height: 0;
}

.splitter.horizontal > .handleBar-clone {
  width: 5px;
  cursor: e-resize;
  top: 0;
  bottom: 0;
}

.splitter.horizontal > .rightPane {
  width: auto;
  left: 40%;
  right: 0;
  top: 0;
  bottom: 0;
  margin-left: 1px;
}

.splitter.horizontal.right-fix > .leftPane {
  width: auto;
  left: 0;
  right: 40%;
  margin-right: 1px;
}

.splitter.horizontal.right-fix > .rightPane {
  width: 40%;
  left: auto;
  right: 0;
  margin-left: 0;
}

.splitter.horizontal.right-fix > .handleBar {
  left: auto;
  right: 40%;
}

/*Left Expand*/
.splitter.left-expand.vertical > .handleBar {
  top: auto !important;
  bottom: 0;
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.splitter.left-expand.vertical > .leftPane {
  height: auto !important;
  bottom: 0;
}

.splitter.left-expand.vertical > .rightPane {
  top: auto !important;
  height: 0;
  display: none;
}

.splitter.left-expand.horizontal > .handleBar {
  left: auto !important;
  right: 0;
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.splitter.left-expand.horizontal > .leftPane {
  width: auto !important;
  right: 0;
}

.splitter.left-expand.horizontal > .rightPane {
  left: auto !important;
  width: 0;
  display: none;
}

/*Right Expand*/
.splitter.right-expand.vertical > .handleBar {
  top: 0 !important;
  bottom: auto;
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.splitter.right-expand.vertical > .leftPane {
  height: 0 !important;
  display: none;
  bottom: auto;
}

.splitter.right-expand.vertical > .rightPane {
  top: 0 !important;
  height: auto;
}

.splitter.right-expand.horizontal > .handleBar {
  left: 0 !important;
  right: auto;
  background-color: rgba( 234, 234, 234 ,  1 );
  background-color: rgba( var(--palette-neutral-8,234, 234, 234) ,  1 );
}

.splitter.right-expand.horizontal > .leftPane {
  width: 0 !important;
  display: none;
  right: auto;
}

.splitter.right-expand.horizontal > .rightPane {
  left: 0 !important;
  width: auto;
}

/*No Split */
.splitter.no-split > .handleBar {
  display: none !important;
}

.splitter.no-split > .leftPane {
  margin: 0 !important;
}

.splitter.no-split > .rightPane {
  margin: 0 !important;
}

.splitter.no-split.vertical .leftPane {
  height: 0 !important;
  bottom: auto;
}

.splitter.no-split.vertical .rightPane {
  top: 0 !important;
  height: auto;
}

.splitter.no-split.vertical.right-fix > .leftPane {
  height: auto !important;
  bottom: 0;
}

.splitter.no-split.vertical.right-fix > .rightPane {
  top: auto !important;
  height: 0;
}

.splitter.no-split.horizontal > .leftPane {
  width: 0 !important;
  right: auto;
}

.splitter.no-split.horizontal > .rightPane {
  left: 0 !important;
  width: auto;
}

.splitter.no-split.horizontal.right-fix > .leftPane {
  width: auto !important;
  right: 0;
}

.splitter.no-split.horizontal.right-fix > .rightPane {
  left: auto !important;
  width: 0;
}

/* toggle-button-enabled */
.splitter.toggle-button-enabled .toggle-button {
  position: absolute;
  padding: 0;
  margin: 0;
  box-shadow: none;
  height: auto;
  width: 16px;
  z-index: 100;
  overflow: hidden;
  border-color: transparent;
  color: rgba(0, 0, 0, .9);
  color: var(--text-primary-color,rgba(0, 0, 0, .9));
  background-color: transparent;
}

.splitter.toggle-button-enabled .toggle-button:hover, .splitter.toggle-button-enabled .toggle-button:focus {
  border-color: rgba( 102, 102, 102 ,  1 );
  border-color: rgba( var(--palette-neutral-60,102, 102, 102) ,  1 );
  border:  1px dashed;
  border-color: rgba( 0, 0, 0 ,  1 ) !important;
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
  font-weight: bold !important;
}

.splitter.toggle-button-enabled.no-split .toggle-button {
  display: none;
}

.splitter.toggle-button-enabled .toggle-button:hover {
  cursor: pointer;
}

.splitter.toggle-button-enabled.collapsed > .handleBar {
  background-color: rgba( 244, 244, 244 ,  1 );
  background-color: rgba( var(--palette-neutral-4,244, 244, 244) ,  1 );
}

/* Vertical */
.splitter.toggle-button-enabled.vertical.collapsed > .handleBar {
  top: 0 !important;
  height: 20px !important;
}

.splitter.toggle-button-enabled.vertical.collapsed > .handleBar:focus {
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border:  1px dashed;
  border-color: rgba( 0, 0, 0 ,  1 ) !important;
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
  font-weight: bold !important;
}

.splitter.toggle-button-enabled.vertical.collapsed > .leftPane {
  height: 0 !important;
}

.splitter.toggle-button-enabled.vertical.collapsed > .rightPane {
  top: 0 !important;
  margin-top: 20px !important;
}

.splitter.toggle-button-enabled.vertical.collapsed .toggle-button {
  position: absolute;
  top: 2px;
}

/* Horizontal */
.splitter.toggle-button-enabled.horizontal.collapsed > .handleBar {
  left: 0 !important;
  width: 20px !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed > .handleBar:focus {
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border:  1px dashed;
  border-color: rgba( 0, 0, 0 ,  1 ) !important;
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
  font-weight: bold !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed > .leftPane {
  width: 0 !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed > .rightPane {
  left: 0 !important;
  margin-left: 20px !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed.no-split > .rightPane {
  margin-left: 0 !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed .toggle-button {
  position: absolute;
  left: 2px;
}

.splitter.toggle-button-enabled.horizontal.collapsed.right-fix > .handleBar {
  left: auto !important;
  right: 0 !important;
  width: 20px !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed.right-fix > .handleBar:focus {
  background-color: rgba( 200, 200, 200 ,  1 );
  background-color: rgba( var(--palette-neutral-20,200, 200, 200) ,  1 );
  border:  1px dashed;
  border-color: rgba( 0, 0, 0 ,  1 ) !important;
  border-color: rgba( var(--palette-neutral-100,0, 0, 0) ,  1 ) !important;
  font-weight: bold !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed.right-fix > .leftPane {
  width: auto !important;
  right: 20px;
}

.splitter.toggle-button-enabled.horizontal.collapsed.right-fix > .rightPane {
  left: auto !important;
  right: 0 !important;
  margin-right: 20px !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed.right-fix.no-split > .rightPane {
  margin-right: 0 !important;
}

.splitter.toggle-button-enabled.horizontal.collapsed.right-fix .toggle-button {
  right: 2px;
  left: auto;
}

/* Collapsed Label */
.splitter.horizontal .handlebar-label {
  cursor: pointer;
  margin-top: 0;
  display: none;
  padding-top: 25px;
}

.splitter.horizontal.collapsed .handlebar-label {
  display: block;
}

.splitter.horizontal.collapsed .handlebar-label-text {
  margin-left: 2px;
  white-space: nowrap;
  display: block;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
}