/**
 * @provides phabricator-standard-page-view
 */

.phabricator-anchor-view,
.phabricator-anchor-navigation-marker {
  position: absolute;
  margin-top: -15px;
}

.phabricator-chromeless-page .phabricator-standard-page {
  background:           transparent;
  border-width:         0px;
}

.phabricator-standard-page-footer {
  text-align: right;
  margin: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid {$lightgreyborder};
  color: {$greytext};
}

.device-desktop .has-local-nav + .phabricator-standard-page-footer {
  margin-left: 221px;
}

.keyboard-shortcut-help td,
.keyboard-shortcut-help th {
  padding: 8px;
  vertical-align: middle;
}

.keyboard-shortcut-help th {
  white-space: nowrap;
  color: {$greytext};
}

.keyboard-shortcut-help kbd {
  background: #222222;
  padding: 6px;
  color: #ffffff;
  font-weight: bold;
  border: 1px solid #555555;
}

.keyboard-focus-focus-reticle {
  background: #ffffd3;
  position: absolute;
  border: 1px solid #999900;
}

.workflow-header {
  background: #efefef;
  padding: 6px 2em;
  text-align: right;
  margin-bottom: 6px;
  border-bottom: 1px solid #dfdfdf;
}

.workflow-header button {
  float: right;
}

a.handle-status-closed {
  text-decoration: line-through;
  color: #676767;
}

a.handle-status-closed:hover {
  text-decoration: line-through;
  color: #19558D;
}

a.handle-disabled,
a.handle-status-away,
a.handle-status-sporadic {
  padding-left: 11px;
  background-repeat: no-repeat;
  background-position: -4px center;
}

a.handle-status-away {
  background-image: url(/rsrc/image/icon/fatcow/bullet_red.png);
}

a.handle-status-sporadic {
  background-image: url(/rsrc/image/icon/fatcow/bullet_orange.png);
}

a.handle-disabled {
  background-image: url(/rsrc/image/icon/fatcow/bullet_black.png);
}

.aphront-developer-error-callout {
  position: relative;
  padding: 2em;
  background: #aa0000;
  color: white;
  text-align: center;
  font-size: 11px;
  font-family: "Verdana";
}

.setup-warning-callout {
  position: relative;
  padding: 8px 16px;
  background: {$lightyellow};
}

.phui-handle .phui-icon-view {
  display: inline-block;
  margin: 2px 2px -2px 0;
}

.main-page-frame {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}

.phabricator-standard-page {
  /* If we don't activate JX.Scrollbar because the default scrollbars are
     satisfactory, make sure the page still has sensible behavior. These
     settings will be overwritten by .jx-scrollbar-frame if JX.Scrollbar
     activates. */
  position: relative;
  height: 100%;
  overflow-y: scroll;

  -webkit-overflow-scrolling: touch;
}

.jx-scrollbar-frame {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.jx-scrollbar-viewport {
  position: absolute;
  overflow-x: hidden;
  overflow-y: scroll;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Fixes so pages actually print when magic scrollbar is present */
!print .main-page-frame {
  position: static;
  overflow: visible;
}

!print .jx-scrollbar-viewport {
  position: static;
  width: auto !important;
  height: auto !important;
}

.jx-scrollbar-test {
  position: absolute;
  left: -300px;
}

.jx-scrollbar-bar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 7px;
  width: 11px;
}

.jx-scrollbar-bar .jx-scrollbar-handle {
  position: absolute;
  right: 2px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
  min-height: 10px;
  width: 7px;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -ms-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
  background: #6c6e71;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
}

.jx-scrollbar-bar:hover .jx-scrollbar-handle {
  opacity: 0.7;
  -webkit-transition: opacity 0 linear;
  -moz-transition: opacity 0 linear;
  -o-transition: opacity 0 linear;
  -ms-transition: opacity 0 linear;
  transition: opacity 0 linear;
}

.jx-scrollbar-bar .jx-scrollbar-visible {
  opacity: 0.7;
}

.jx-scrollbar-link {
  position: absolute;
  left: -50px;
}

.with-durable-column {
  margin-right: 300px;
}

.phui-durable-column {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 300px;
  background: #ffffff;
  display: none;
}

.phui-durable-column-header {
  height: 44px;
  border-left: 1px solid #000000;
}

.phui-durable-column-header-text {
  padding: 12px 16px;
  font-size: 15px;
  color: {$lightgreytext};
}

.phui-durable-column-icon-bar {
  height: 34px;
  padding: 5px 16px;
  border-bottom: 1px solid {$lightblueborder};
}

.phui-durable-column-body {
  position: absolute;
  top: 44px;
  bottom: 0;
  right: 0;
  left: 0;
  border-left: 1px solid {$lightgreyborder};
}

.phui-durable-column-main {
  position: absolute;
  top: 44px;
  bottom: 144px;
  left: 0;
  right: 0;
  overflow: hidden;
}

.phui-durable-column-content {
  padding: 8px 16px;
}

.phui-durable-column-textarea {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  height: 100px;
  margin: 0;
  border-width: 1px 0;
  border-style: solid;
  border-top-color: {$lightblueborder};
  border-bottom-color: {$lightblueborder};
  padding: 8px 16px;
  resize: none;
}

.phui-durable-column-textarea:focus {
  outline: 0;
  border-top-color: {$sky};
  border-bottom-color: {$sky};
  box-shadow: none;
}

.phui-durable-column-footer {
  position: absolute;
  height: 28px;
  padding: 8px 16px;
  left: 0;
  right: 0;
  bottom: 0;
}

.phui-durable-column-footer button {
  float: right;
}

.phui-durable-column-status {
  vertical-align: middle;
  line-height: 28px;
  color: {$lightgreytext};
}