/* number must match PSDPreviewView center-helper template offset */
/**************************************
/* BASE
/**************************************/
.popup {
  width: 260px;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.24);
  position: absolute;
  padding: 12px 15px;
  border-radius: 0;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.12);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }
  .popup .popup-footer {
    display: block;
    margin: 15px 0 0; }
  .popup .notch {
    position: absolute;
    width: 23px;
    height: 15px;
    overflow: hidden; }
    .popup .notch:after {
      content: "";
      background-color: white;
      width: 20px;
      height: 20px;
      display: block;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      border: 1px solid rgba(0, 0, 0, 0.24); }
  .popup.bottom {
    margin-top: 0px; }
    .popup.bottom .notch {
      top: -15px; }
      .popup.bottom .notch:after {
        margin-top: 7.5px; }
  .popup.top {
    margin-top: -15px; }
    .popup.top .notch {
      bottom: -15px; }
      .popup.top .notch:after {
        margin-top: -14px; }
  .popup .title {
    color: #444444;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 400;
    text-shadow: 0 1px 0 white; }
  .popup .subtitle {
    margin: 10px 0 0 0;
    font-size: 12px;
    font-weight: 400; }
  .popup .close-button {
    display: none; }
    .popup .close-button:hover {
      background-color: #E6E6E6;
      border-radius: 0; }
  .popup .action-button,
  .popup .action-button:hover {
    background: #e5e9e8 !important;
    border: 1px solid #aaaaaa;
    border-radius: 0;
    color: #444444;
    font-size: 12px;
    float: right;
    min-width: 60px;
    margin-top: 10px;
    margin-bottom: 0px;
    padding: 3px 10px;
    text-shadow: 0 1px white; }
  .popup .action-button:active {
    background: #eeeeee;
    background-image: -webkit-linear-gradient(#f9f9f9 0, #d9d9d9 100%);
    background-image: linear-gradient(to   , #d9d9d9 100%); }
  .popup select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    background-color: #e5e9e9;
    border-radius: 0;
    appearance: none;
    padding: 3px 15px;
    font-size: 12px;
    width: 66px;
    border: 1px solid #aaaaaa;
    color: #444444;}

/**************************************
/* EXTRACT CODE POPUP
/**************************************/
.extract-code-popup {
  width: 235px; }
  .extract-code-popup.expanded {
    width: 460px; }
  .extract-code-popup textarea,
  .extract-code-popup .topcoat-textarea {
    font-size: 12px;
    line-height: 18px;
    width: 100%;
    height: 50px;
    max-height: 200px;
    padding: 2px 4px;
    resize: none;
    margin-bottom: 0px; }
  .extract-code-popup .all-code {
    float: left;
    margin-top: 13px;
    margin-bottom: 0px;
    font-size: 12px; }
    .extract-code-popup .all-code:hover {
      color: #1397D0; }
  .extract-code-popup .action-button.zeroclipboard-is-hover {
    background-image: linear-gradient(to bottom, #a5a5a5, #a5a5a5); }
  .extract-code-popup .action-button.copied {
    background-image: linear-gradient(to bottom, #2da1e4, #0080cf);
    border-color: rgba(30, 30, 30, 0.25);
    pointer-events: none; }

/**************************************
/* EXTRACT ASSET POPUP
/**************************************/
.extract-asset-popup {
  width: 230px;
  pointer-events: auto; }
  .extract-asset-popup label {
    color: #444444;
    display: block;
    float: right;
    font-size: 12px;
    margin: 0 7px 0 0; }
  .extract-asset-popup .file-name {
    margin: 0px;
    width: 100%;
    font-size: 12px; }
  .extract-asset-popup .optimize {
    width: 100%;
    min-height: 43px;
    margin: 3px 0 10px 0; }
  .extract-asset-popup .optimize-description {
    background-color: #eef0f0;
    border-radius: 0; }
  .extract-asset-popup .format-description {
    height: 100%;
    font-size: 11px;
    margin: 5px; }
  .extract-asset-popup .quality-range {
    width: 80%;
    float: left;
    margin-top: 10px; }
  .extract-asset-popup .quality-percentage {
    margin: 1px 0px 0 3px;
    width: 37px;
    font-size: 12px;
    float: right; }
  .extract-asset-popup .scale-factor {
    width: 37px;
    float: left;
    margin-top: -3px; }
  .extract-asset-popup .scale-enable-checkbox {
    float: left; }
  .extract-asset-popup .scale label {
    float: left;
    margin: 0 7px;
    font-weight: 400; }
  .extract-asset-popup .scale-enable-checkbox:before {
    background-color: white;
    border: 1px solid #a9adab;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    width: 15px;
    height: 15px; }
  .extract-asset-popup .scale-enable-checkbox:after {
    border-color: #009df5;
    left: 3px;
    top: 1px; }
  .extract-asset-popup .scale {
    float: right;
    margin-bottom: 12px; }
    .extract-asset-popup .scale.disabled .scale-factor {
      opacity: .4;
      pointer-events: none; }
    .extract-asset-popup .scale.incompatible {
      opacity: .4;
      pointer-events: none; }
  .extract-asset-popup .popup-footer {
    clear: right; }
  .extract-asset-popup .extract-size {
    float: left;
    font-size: 12px;
    line-height: 24px; }
    .extract-asset-popup .extract-size #extract-size-value {
      color: #d5d5d5;
      font-size: 12px; }
  .extract-asset-popup .topcoat-button--cta {
    float: right;
    overflow: visible;
    padding: 1px 10px;
    font-size: 14px; }
  .extract-asset-popup .select-file-type {
    background-image: url("../images/color_type_arrow.png");
    background-position: right 5px top 10px;
    padding-left: 6px;
    background-repeat: no-repeat; }
  .extract-asset-popup .options {
    border-radius: 0;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 4px;
    position: relative;
    white-space: nowrap;
    font-size: 0; }
    .extract-asset-popup .options input[type=radio] {
      width: 100%;
      height: 100%;
      position: absolute;
      cursor: pointer; }
      .extract-asset-popup .options input[type=radio]:checked ~ p {
        background-color: #e4f1f9;
        background-image: -webkit-linear-gradient(#2a78b8 0, #009df5 100%);
        background-image: linear-gradient(to   , #009df5 100%);
        box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.12);
        color: white; }
    .extract-asset-popup .options .disabled {
      opacity: 0.3; }
    .extract-asset-popup .options div {
      position: relative;
      display: inline-block; }
      .extract-asset-popup .options div p {
        border: 1px solid #aaaaaa;
        border-right: none;
        display: inline-block;
        background-color: #eeeeee;
        background-image: -webkit-linear-gradient(#f9f9f9 0, #d9d9d9 100%);
        background-image: linear-gradient(to   , #d9d9d9 100%);
        padding: 3px 10px 2px;
        margin: 0px;
        font-size: 12px;
        color: #444444;
        min-width: 24px;
        text-align: center; }
      .extract-asset-popup .options div:first-child p {
        border-left: 1px solid #aaaaaa; }
      .extract-asset-popup .options div:last-child p {
        border-right: 1px solid #aaaaaa; }

/**************************************
/* COLOR CHIP POPUP
/**************************************/
.color-chip-popup {
  width: auto;
  padding: 10px; }
  .color-chip-popup textarea,
  .color-chip-popup .topcoat-textarea {
    font-size: 12px;
    width: 157px;
    height: 23px;
    margin: 1px;
    resize: none;
    white-space: nowrap;
    overflow: hidden;
    padding: 0 2px; }
  .color-chip-popup .select-color-format {
    background-image: url("../images/color_type_arrow.png");
    background-position: right 5px top 8px;
    padding-left: 6px;
    background-repeat: no-repeat; }
  .color-chip-popup .alpha-list .opacities-label {
    display: inline-block;
    width: 67px;
    font-size: 12px;
    margin: 0px; }
  .color-chip-popup .alpha-list ul {
    list-style: none;
    margin: 8px 0px 0px 0px;
    padding: 0px;
    display: inline-block; }
    .color-chip-popup .alpha-list ul .color-alpha {
      height: 20px;
      background-color: #eee;
      display: inline-block;
      margin: 0px 3px 0px 0px;
      border-radius: 0;
      padding: 0px 5px;
      min-width: 15px;
      cursor: pointer; }
      .color-chip-popup .alpha-list ul .color-alpha p {
        text-align: center;
        line-height: 20px;
        font-size: 12px;
        margin: 0px;
        color: #444; }
      .color-chip-popup .alpha-list ul .color-alpha:hover {
        background-color: #e4f1f9; }
      .color-chip-popup .alpha-list ul .color-alpha.selected {
        background-color: #009df5; }
        .color-chip-popup .alpha-list ul .color-alpha.selected > p {
          color: white !important; }

/**************************************
/* MEASUREMENT POPUP
/**************************************/
.measurementTooltip {
  position: absolute;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.76);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.24);
  color: white;
  width: auto;
  font-size: 12px;
  font-weight: 400;
  border-radius: 0;
  padding: 10px 12px 9px 12px; }
  .measurementTooltip .measurementElementInfoPos {
    border-right: none;
    padding: 0 0 0 10px; }

.measurementElementInfoDim {
  vertical-align: top;
  display: inline-block;
  white-space: nowrap;
  height: auto;
  overflow: hidden;
  padding-right: 8px; }

.measurementElementInfoPos {
  display: inline-block;
  vertical-align: top;
  height: auto;
  white-space: nowrap;
  overflow: hidden;
  border-width: 1px;
  border-style: none solid none solid;
  padding: 0 8px 0 8px; }

.measurementElementAssetExtract {
  vertical-align: top;
  margin-top: 6px;
  background-image: url("../images/cc-extract-sprite.svg");
  background-position: -60px 0px;
  background-repeat: no-repeat;
  width: 23px;
  height: 25px;
  display: inline-block;
  overflow: hidden;
  pointer-events: auto; }

.measurementElementAssetExtract:hover {
  background-image: url("../images/cc-extract-sprite.svg");
  background-position: -60px -40px;
  cursor: pointer; }

.measurementElementCopyControls {
  height: auto;
  vertical-align: top;
  display: inline-block;
  overflow: hidden;
  padding: 0 0 0 10px;
  pointer-events: auto;
  margin-right: 10px; }
  .measurementElementCopyControls > span {
    color: white;
    font-size: 12px;
    cursor: pointer; }
  .measurementElementCopyControls .disabled {
    opacity: 0.3;
    pointer-events: none !important; }

#notificationTooltip {
  position: absolute;
  border: none !important;
  background-color: black;
  font-size: 12px !important;
  padding: 6px 12px !important;
  margin-top: -6px;
  margin-left: -14px; }
  #notificationTooltip > span {
    color: white !important; }

.measurementPopup,
.interceptBinary {
  background-color: #009df5;
  border: 1px solid #009df5;
  overflow: visible; }
  .measurementPopup .notch:after,
  .interceptBinary .notch:after {
    background-color: #009df5;
    border: none; }
  .measurementPopup .measurementElementInfoPos,
  .interceptBinary .measurementElementInfoPos {
    border-color: #007FFF; }
  .measurementPopup .measurementElementAssetExtract,
  .interceptBinary .measurementElementAssetExtract {
    border-color: #007FFF; }
  .measurementPopup .control-is-hover,
  .interceptBinary .control-is-hover {
    color: #004A7E;
    cursor: pointer; }
  .measurementPopup .popup-close,
  .interceptBinary .popup-close {
    position: absolute;
    top: -9px;
    right: -12px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer; }
  .measurementPopup .popup-close:hover,
  .interceptBinary .popup-close:hover {
    color: #215c8d; }
  .measurementPopup .popup-footer,
  .interceptBinary .popup-footer {
    margin-top: 10px; }

.interceptBinary span {
  color: white; }

#interceptPopupBinary {
  margin-right: 5px;
  position: relative; }

#measurementPopupInfo {
  white-space: nowrap;
  line-height: 1.5em; }
  #measurementPopupInfo .copyable {
    color: white;
    font-size: 12px;
    cursor: pointer; }
  #measurementPopupInfo .zeroclipboard-is-hover {
    color: #004A7E;
    cursor: pointer; }

.measurementOffsetsBox {
  position: absolute;
  left: 100px;
  top: 200px;
  overflow: visible;
  border: 1px dotted black;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 0.2));
  filter: drop-shadow(1px 1px 0.5px rgba(255, 255, 255, 0.2));
  opacity: 1; }
  .measurementOffsetsBox .measurementOffsetsCanvas {
    position: absolute;
    opacity: 1; }

.measurementOffsetsBanner {
  padding: 6px 10px;
  opacity: 1;
  background-color: black;
  border: 1px solid black;
  font-size: 10px;
  font-weight: 400; }
  .measurementOffsetsBanner > span {
    color: white;
    font-size: 12px; }
  .measurementOffsetsBanner .copyable {
    cursor: pointer; }
  .measurementOffsetsBanner .notch {
    height: 5px; }
  .measurementOffsetsBanner .notch:after {
    margin-top: 5px;
    background-color: black; }
  .measurementOffsetsBanner .noWrap {
    white-space: nowrap; }

.xOffsetIcon,
.yOffsetIcon {
  background: url(../images/measurement-arrows.png) no-repeat;
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 5px;
  position: relative;
  top: 3px; }

.xOffsetIcon {
  background-position: 0 3px; }

.yOffsetIcon {
  background-position: 0 -12px; }

/**************************************
/*   KEYBOARD SHORTCUTS HELP DIALOG
/**************************************/
.keystroke-window-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  position: absolute; }

.keystroke-window-wrapper {
  background-color: white;
  position: absolute;
  top: 5%;
  width: 400px;
  max-height: 88%;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 10px 10px 7px;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 0;
  box-shadow: inset 0 1px 0 white, 0 6px 18px rgba(0, 0, 0, 0.24); }

.keystroke-header {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 5px;
  padding-left: 20px; }

.keystroke-header-title {
  color: #444444;
  font-size: 21px;
  font-weight: 400; }

.keystroke-info-icon {
  background-image: url("../images/question_icon.svg");
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: 18px 18px;
  background-repeat: no-repeat;
  margin: 0 3px 0 0;
  position: relative;
  top: 2px; }

.keystroke-main-col {
  padding: 5px 20px 20px; }

.keystroke-item {
  margin-top: 5px;
  position: relative;
  display: block; }

.keystroke-separator {
  border-bottom: 1px solid #dfdfdf;
  margin-bottom: 10px;
  padding-bottom: 10px; }

.keystroke-item-title {
  color: #444444;
  font-size: 12px;
  line-height: 1em;
  font-weight: 700; }

.keystroke-item-text {
  color: #444444;
  font-size: 11px;
  font-weight: 400;
  margin-top: 9px;
  margin-right: 55px;
  padding-top: 0px; }

.keystroke-item-keys {
  display: inline-block;
  margin: 0 5px 0 0;
  color: #444444;
  font-size: 12px;
  line-height: 1em;
  font-weight: 700; }

.keystroke-item img {
  margin-left: -5px;
  height: 24px;
  width: 24px; }

.keystroke-item-key {
  display: inline;
  background: white;
  border-radius: 0;
  border: 1px solid #aaaaaa;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
  color: #000000;
  cursor: default;
  font-size: 12px;
  font-weight: 400;
  padding: 1px 6px 1px 6px; }

/**************************************
/* LAYER THUMB POPUP
/**************************************/
.layer-thumb-popup {
  width: auto;
  height: auto;
  padding: 10px 10px 4px;
  font-size: 12px; }
  .layer-thumb-popup .layer-thumb {
    max-width: 240px; }

.sprite_preview {
  background: url("../images/light_checker_bg.png");
  border: 1px solid #c4c4c4; }

.popup-button {
  background: #2a78b8;
  color: white;
  font-size: 12px;
  padding: 2px 7px;
  margin: 0 5px 0 0; }

.popup-button:hover {
  background: #215c8d;
  color: white; }

/**************************************
/* USER PROFILE POPUP
/**************************************/
.user-profile-popup {
  width: 335px; }

#userQuotaContainer > label {
  display: block;
  margin: 0 0 5px; }

.usage-track {
  background: #fff;
  border: 1px solid #cdcdcd;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.06);
  border-radius: 0;
  margin: 0 0 5px;
  overflow: hidden;
  display: block;
  height: 15px; }

.usage-percent {
  display: block;
  background-color: #2891DD;
  min-width: 1px;
  height: 100%;
  width: 0%; }

#quotaDisplay {
  font-size: 12px;
  margin: 0; }

#userQuota_error {
  margin: 0; }

#analyticsOptInContainer {
  margin-top: 30px; }

#analyticsOptInCheckBox {
  opacity: 1;
  margin-top: 3px; }

#analyticsOptInContainer > label {
  display: block;
  margin: -20px 0 0 20px;
  font-size: 12px; }
