/* line 2, app/assets/stylesheets/sketch-measure.scss */
.specs * {
  box-sizing: border-box;
}

/* line 3, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget {
  display: flex;
  width: 100px;
  position: absolute;
  bottom: 25px;
  left: 15px;
}

/* line 4, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget button {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 0;
  background: grey;
  cursor: pointer;
}

/* line 5, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget button:after, .specs .zoom-widget button:before {
  position: absolute;
  top: 9px;
  left: 5px;
  content: "";
  display: block;
  width: 10px;
  height: 2px;
  background: #FFF;
}

/* line 6, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget button:after {
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
}

/* line 7, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget button:disabled {
  background: #222;
  cursor: default;
}

/* line 8, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget button:disabled:after, .specs .zoom-widget button:disabled:before {
  background: #606264;
}

/* line 9, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget button.zoom-in:after {
  display: none;
}

/* line 10, app/assets/stylesheets/sketch-measure.scss */
.specs .zoom-widget .zoom-text {
  display: block;
  text-align: center;
  line-height: 20px;
  font-weight: 500;
  flex: 1;
}

/* line 11, app/assets/stylesheets/sketch-measure.scss */
.specs main {
  position: relative;
  height: 100%;
  width: 100%;
}

/* line 12, app/assets/stylesheets/sketch-measure.scss */
.specs .screen-viewer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: scroll;
}

/* line 13, app/assets/stylesheets/sketch-measure.scss */
.specs .screen-viewer .overlay {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  background: transparent;
  overflow: hidden;
  z-index: 2;
  cursor: none;
}

/* line 14, app/assets/stylesheets/sketch-measure.scss */
.specs .screen-viewer-inner {
  position: relative;
  margin: 0 auto;
  cursor: move;
  /* fallback: no `url()` support or images disabled */
  cursor: -webkit-grab;
  /* Chrome 1-21, Safari 4+ */
  cursor: -moz-grab;
  /* Firefox 1.5-26 */
  cursor: grab;
  /* W3C standards syntax, should come least */
}

/* line 19, app/assets/stylesheets/sketch-measure.scss */
.specs .screen-viewer-inner.moving {
  cursor: -webkit-grabbing;
  /* Chrome 1-21, Safari 4+ */
  cursor: -moz-grabbing;
  /* Firefox 1.5-26 */
  cursor: grabbing;
  /* W3C standards syntax, should come least */
}

/* line 23, app/assets/stylesheets/sketch-measure.scss */
.specs .screen {
  margin: 0 auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: all .15s ease;
}

/* line 24, app/assets/stylesheets/sketch-measure.scss */
.specs .layer {
  position: absolute;
  cursor: pointer;
}

/* line 25, app/assets/stylesheets/sketch-measure.scss */
.specs .hover, .specs .selected {
  border: 1px solid #F63E7C;
}

/* line 26, app/assets/stylesheets/sketch-measure.scss */
.specs .has-slice {
  border: 1px dashed #F63E7C;
  background: rgba(255, 85, 0, 0.32);
}

/* line 27, app/assets/stylesheets/sketch-measure.scss */
.specs .layer b, .specs .layer i {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #FFF;
  border: 1px solid #F63E7C;
  border-radius: 50%;
  overflow: hidden;
  display: none;
}

/* line 28, app/assets/stylesheets/sketch-measure.scss */
.specs .layer b {
  width: 3px;
  height: 3px;
  background: #F63E7C;
}

/* line 29, app/assets/stylesheets/sketch-measure.scss */
.specs .selected i {
  display: block;
}

/* line 30, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.h div[data-width]:before, .specs .distance.v div[data-height]:before, .specs .selected:after, .specs .selected:before {
  position: absolute;
  display: block;
  left: 50%;
  top: -23px;
  transform: translateX(-50%);
  content: attr(data-width);
  font-size: 12px;
  color: #FFF;
  height: 12px;
  line-height: 12px;
  padding: 4px;
  background: #F63E7C;
  border-radius: 2px;
  z-index: 1;
}

/* line 31, app/assets/stylesheets/sketch-measure.scss */
.specs .percentage-mode .distance.h div[data-width]:before, .specs .percentage-mode .distance.v div[data-height]:before, .specs .percentage-mode .selected:after, .specs .percentage-mode .selected:before {
  content: attr(percentage-width);
}

/* line 32, app/assets/stylesheets/sketch-measure.scss */
.specs .selected.hidden:after, .specs .selected.hidden:before {
  display: none;
}

/* line 33, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.v div[data-height]:before, .specs .selected:after {
  content: attr(data-height);
  left: auto;
  right: 0;
  top: 50%;
  transform: translateX(calc(100% + 3px)) translateY(-50%);
}

/* line 34, app/assets/stylesheets/sketch-measure.scss */
.specs .percentage-mode .distance.v div[data-height]:before, .specs .percentage-mode .selected:after {
  content: attr(percentage-height);
}

/* line 35, app/assets/stylesheets/sketch-measure.scss */
.specs .layer .tl {
  top: -3px;
  left: -3px;
}

/* line 36, app/assets/stylesheets/sketch-measure.scss */
.specs .layer .tr {
  top: -3px;
  right: -3px;
}

/* line 37, app/assets/stylesheets/sketch-measure.scss */
.specs .layer .bl {
  bottom: -3px;
  left: -3px;
}

/* line 38, app/assets/stylesheets/sketch-measure.scss */
.specs .layer .br {
  bottom: -3px;
  right: -3px;
}

/* line 39, app/assets/stylesheets/sketch-measure.scss */
.specs .hover {
  border: 1px solid #419bf9;
}

/* line 40, app/assets/stylesheets/sketch-measure.scss */
.specs .selected {
  border: 1px solid #F63E7C;
}

/* line 41, app/assets/stylesheets/sketch-measure.scss */
.specs .ruler {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px dashed #419bf9;
}

/* line 42, app/assets/stylesheets/sketch-measure.scss */
.specs .ruler.h {
  border-left: 0;
  border-right: 0;
}

/* line 43, app/assets/stylesheets/sketch-measure.scss */
.specs .ruler.v {
  border-top: 0;
  border-bottom: 0;
}

/* line 44, app/assets/stylesheets/sketch-measure.scss */
.specs .distance, .specs .distance div, .specs .distance div:before, .specs .distance:after, .specs .distance:before {
  position: absolute;
}

/* line 45, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.v, .specs .distance.v div {
  width: 1px;
}

/* line 46, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.h, .specs .distance.h div {
  height: 1px;
}

/* line 47, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.v div {
  top: 0;
  bottom: 0;
  background: #F63E7C;
}

/* line 48, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.h div {
  left: 0;
  right: 0;
  background: #F63E7C;
}

/* line 49, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.v:after, .specs .distance.v:before {
  content: "";
  top: 0;
  left: -2px;
  width: 5px;
  height: 1px;
  background: #F63E7C;
}

/* line 50, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.h:after, .specs .distance.h:before {
  content: "";
  top: -2px;
  left: 0;
  width: 1px;
  height: 5px;
  background: #F63E7C;
}

/* line 51, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.v:after {
  top: auto;
  bottom: 0;
}

/* line 52, app/assets/stylesheets/sketch-measure.scss */
.specs .distance.h:after {
  left: auto;
  right: 0;
}

/* line 53, app/assets/stylesheets/sketch-measure.scss */
.specs .empty {
  position: absolute;
  top: 30%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  vertical-align: middle;
  text-align: center;
}

/* line 54, app/assets/stylesheets/sketch-measure.scss */
.specs .message {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 10px 20px;
  max-width: 320px;
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #FFF;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
  z-index: 9;
  display: none;
}

/* line 3, app/assets/stylesheets/plugin.scss */
.container {
  overflow: auto;
}

/* line 7, app/assets/stylesheets/plugin.scss */
body {
  font-family: 'DM sans', 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-size: 0.8125rem;
}

/* line 12, app/assets/stylesheets/plugin.scss */
i {
  color: gray;
  font-size: 15px;
}

/* line 17, app/assets/stylesheets/plugin.scss */
i.disabled {
  color: #e8e8e8;
}

/* line 21, app/assets/stylesheets/plugin.scss */
svg .fill-region {
  fill: inherit;
}

/* line 25, app/assets/stylesheets/plugin.scss */
svg {
  fill: inherit;
}

/* line 29, app/assets/stylesheets/plugin.scss */
svg .stroke-region {
  stroke: inherit;
}

/* line 33, app/assets/stylesheets/plugin.scss */
.cover-page *:focus-visible,
.page-settings *:focus-visible,
.page *:focus-visible,
.left-pane *:focus-visible,
.page-footer-container *:focus-visible,
button[role="switch"]:focus-visible {
  outline-color: revert;
}