@import url(./lib/reset.css);
@import url(./lib/fonts.css);
@import url(./lib/flexboxgrid.css);
/*    
    Global Variables
*/
/* Layer dimensions */
/* Options */
/* our changes */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

        Icons

*/
.icon {
  width: 21px;
  height: 21px;
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0 0 0 4px;
  cursor: default;
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-sizing: border-box; }
  .icon.additional {
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 21 21' enable-background='new 0 0 21 21' xml:space='preserve'><path fill='#444444' d='M15.5,10.6l-1.3,0.2c-0.1,0.4-0.3,0.9-0.5,1.2l0.8,1.1L13.6,14l-1.1-0.8c-0.4,0.2-0.8,0.4-1.2,0.5L11.1,15 H9.9l-0.2-1.3c-0.4-0.1-0.9-0.3-1.2-0.5L7.4,14l-0.9-0.9L7.3,12c-0.2-0.4-0.4-0.8-0.5-1.2l-1.3-0.2V9.4l1.3-0.2 C6.9,8.8,7.1,8.4,7.3,8L6.5,6.9L7.4,6l1.1,0.8c0.4-0.2,0.8-0.4,1.2-0.5L9.9,5h1.3l0.2,1.3c0.4,0.1,0.9,0.3,1.2,0.5L13.6,6l0.9,0.9 L13.6,8c0.2,0.4,0.4,0.8,0.5,1.2l1.3,0.2V10.6z M9,11.5c0.4,0.4,0.9,0.6,1.5,0.6s1.1-0.2,1.5-0.6c0.4-0.4,0.6-0.9,0.6-1.5 S12.4,8.9,12,8.5c-0.4-0.4-0.9-0.6-1.5-0.6S9.4,8.1,9,8.5C8.6,8.9,8.4,9.4,8.4,10S8.6,11.1,9,11.5z'/></svg>"); }
  .icon.newpage {
    background-image: none; }
  .icon.trash {
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 21 21' enable-background='new 0 0 21 21' xml:space='preserve'><path fill='#454545' d='M14,6h-1V5c0-1-1-1-1-1H9c0,0-1,0-1,1v1H7C5,6,5,8,5,8h11 C16,8,16,6,14,6z M12,6H9V5h3V6z M14,14h-1V9h-1v5h-1V9h-1v5H9V9H8v5H7V9H6v5c0,0.6,0.4,1,1,1h7c0.6,0,1-0.4,1-1V9h-1V14z'/></svg>"); }
  .icon.settings-icon {
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><path fill-rule='evenodd' clip-rule='evenodd' fill='#454545' d='M11,8H9.8c0-0.1-0.1-0.2-0.1-0.3l0.8-0.8c0.4-0.4,0.4-1,0-1.4 c-0.4-0.4-1-0.4-1.4,0L8.3,6.3C8.2,6.3,8.1,6.2,8,6.2V5c0-0.6-0.4-1-1-1S6,4.4,6,5v1.2c-0.1,0-0.2,0.1-0.3,0.1L4.9,5.4 c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l0.8,0.8c0,0.1-0.1,0.2-0.1,0.3H3C2.4,8,2,8.4,2,9s0.4,1,1,1h1.2c0,0.1,0.1,0.2,0.1,0.3 l-0.8,0.8c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l0.8-0.8c0.1,0,0.2,0.1,0.3,0.1V13c0,0.6,0.4,1,1,1s1-0.4,1-1v-1.2 c0.1,0,0.2-0.1,0.3-0.1l0.8,0.8c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4l-0.8-0.8c0-0.1,0.1-0.2,0.1-0.3H11c0.6,0,1-0.4,1-1 S11.6,8,11,8z M7,11c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.1,11,7,11z'/></svg>");
    height: 18px;
    width: 18px;
    background-repeat: no-repeat;
    background-position: 2px 0px;
    border-radius: 2px;
    border: none;
    transition: .1s opacity; }
    .icon.settings-icon:hover {
      border-top: none;
      border-bottom: none;
      border-left: none;
      border-right: none;
      box-shadow: none;
      height: 18px;
      width: 18px;
      background-size: 100% 100%;
      background-position: 2px 0px; }
    .icon.settings-icon:active {
      background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><path fill-rule='evenodd' clip-rule='evenodd' fill='#454545' d='M11,8H9.8c0-0.1-0.1-0.2-0.1-0.3l0.8-0.8c0.4-0.4,0.4-1,0-1.4 c-0.4-0.4-1-0.4-1.4,0L8.3,6.3C8.2,6.3,8.1,6.2,8,6.2V5c0-0.6-0.4-1-1-1S6,4.4,6,5v1.2c-0.1,0-0.2,0.1-0.3,0.1L4.9,5.4 c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l0.8,0.8c0,0.1-0.1,0.2-0.1,0.3H3C2.4,8,2,8.4,2,9s0.4,1,1,1h1.2c0,0.1,0.1,0.2,0.1,0.3 l-0.8,0.8c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l0.8-0.8c0.1,0,0.2,0.1,0.3,0.1V13c0,0.6,0.4,1,1,1s1-0.4,1-1v-1.2 c0.1,0,0.2-0.1,0.3-0.1l0.8,0.8c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4l-0.8-0.8c0-0.1,0.1-0.2,0.1-0.3H11c0.6,0,1-0.4,1-1 S11.6,8,11,8z M7,11c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.1,11,7,11z'/></svg>") no-repeat 2px 0px, linear-gradient(0deg, #a3a3a3 0%, #a3a3a3 98%, #989898 100%);
      min-height: 18px;
      min-width: 18px;
      max-height: 18px;
      max-width: 18px;
      background-size: 100% 100%;
      background-position: 2px 0px;
      box-shadow: none;
      border-top: none;
      border-bottom: none;
      border-left: none;
      border-right: none; }
  .icon:hover {
    border: 1px solid #7c7c7c;
    border-top: none;
    border-bottom: none;
    box-shadow: 0 1px 0 #fff inset;
    background-size: 21px 21px;
    background-position: -1px 0; }
  .icon:active {
    background-color: #999;
    box-shadow: 0 1px 0 #666 inset; }
  .icon.disclose:after {
    content: " ";
    position: absolute;
    bottom: 2px;
    right: 0px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #454545; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

        Main Tags

*/
* {
  font-family: 'AdobeCleanUI', sans-serif;
  font-weight: 100;
  font-size: 11px;
  color: #000;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

input[type="text"]:focus {
  -webkit-touch-callout: text;
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text; }

html,
body {
  background: #dcdcdc;
  overflow: hidden; }

body {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-height: 100vh;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 20px; }

a {
  color: #000;
  text-decoration: none; }

h1 {
  font-size: 2em;
  font-weight: 900;
  text-transform: lowercase;
  text-rendering: geometricPrecision;
  color: #000;
  line-height: 2.285em;
  display: block; }

h2 {
  font-size: 1.714em;
  font-weight: 100;
  line-height: 2.286em; }

h3 {
  font-size: 1.5em;
  font-weight: 300;
  line-height: 2em; }

h4 {
  font-size: 1.5em;
  font-weight: 100;
  text-rendering: optimizeSpeed;
  line-height: 2em;
  font-weight: 300;
  padding-bottom: 6px;
  margin-bottom: 1em;
  border-bottom: 1 solid #7c7c7c; }

h5 {
  font-size: 1.1429em;
  font-weight: 700;
  text-rendering: optimizeSpeed;
  line-height: 1.5em;
  margin-bottom: 1.1429em; }

h6 {
  font-size: 0.786em;
  font-weight: 700;
  text-rendering: optimizeSpeed;
  line-height: 1.5em;
  margin-bottom: 1.1429em; }

p {
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 300;
  margin-bottom: 1.5em; }

/*--- general stuff ----
  
*/
input:disabled,
button:disabled,
select:disabled,
.disabled {
  opacity: .5;
  pointer-events: none; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

        Specifics

*/
.container {
  -webkit-box-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
  flex: 1 0 auto; }
  .container .settings-column {
    min-height: calc(560px - 10px); }
  .container.alerts {
    height: calc(100% - 30px); }
    .container.alerts .canvas-frame {
      height: calc(560px - 30px); }
    .container.alerts .canvas-centering-container {
      height: calc(560px - 30px); }
    .container.alerts .canvas {
      height: calc(560px - 30px); }
    .container.alerts .row.content {
      min-height: calc(560px - 30px); }
  .container .row.content {
    min-height: calc(560px); }
  .container .assets-column {
    height: calc(560px + 2px); }
    .container .assets-column.hide {
      display: none; }

.panel .content {
  margin-top: 0; }
.panel .row.content {
  min-height: 100%; }

.settings,
.preview,
.lists {
  background-color: #dcdcdc; }

.settings-column {
  position: relative; }

.preview {
  border: 1px solid #7c7c7c;
  position: relative;
  margin-right: 10px;
  background: #dcdcdc;
  transition: .1s; }
  .preview.dark {
    background: #848484; }
  .preview .preview-img, .preview .preview-img-pixel-zoom, .preview .svg-preview-object, .preview .file-size-overlay-container, .preview .zoom-overlay-container {
    transition: 0.1s opacity; }
  .preview.loaded .preview-img, .preview.loaded .preview-img-pixel-zoom, .preview.loaded .svg-preview-object, .preview.loaded .zoom-overlay-container {
    opacity: 1; }
    .preview.loaded .preview-img.hide, .preview.loaded .preview-img-pixel-zoom.hide, .preview.loaded .svg-preview-object.hide, .preview.loaded .zoom-overlay-container.hide {
      opacity: 0; }
  .preview.loaded .file-size-overlay-container {
    opacity: 0; }
    .preview.loaded .file-size-overlay-container.active {
      opacity: 1; }
      .preview.loaded .file-size-overlay-container.active.hide {
        opacity: 0; }
  .preview.loaded .default-rendering {
    opacity: 0.6; }
  .preview.loading .file-size-overlay-container, .preview.loading .file-size-overlay-container.active, .preview.loading .zoom-overlay-container, .preview.loading.default-rendering .file-size-overlay-container, .preview.loading.default-rendering .file-size-overlay-container.active, .preview.loading.default-rendering .zoom-overlay-container {
    opacity: 0; }
  .preview .antiscroll-scrollbar {
    display: none; }
  .preview .preview-img {
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    margin: 0 auto; }
  .preview .preview-img-pixel-zoom {
    position: absolute;
    width: 100%;
    height: 100%; }
  .preview .canvas-frame {
    height: 560px; }
    .preview .canvas-frame .antiscroll-inner {
      min-width: 100%;
      min-height: 100%; }
  .preview .canvas-single-layer {
    width: 724px; }
  .preview .canvas-multiple-layers {
    width: 560px; }
  .preview .canvas-centering-container {
    height: 560px;
    display: table-cell;
    vertical-align: middle; }
  .preview .canvas {
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'><rect x='0' y='0' height='12' width='12' style='fill: rgba(0,0,0,.12)'/><rect x='12' y='12' height='12' width='12' style='fill:rgba(0,0,0,.12)'/></svg>");
    background-size: 24px 24px;
    background-position: center center;
    background-color: white;
    box-shadow: 0 0 10px #b3b3b3;
    margin: 0 auto;
    position: relative;
    transform-origin: center center; }
    .preview .canvas.dark {
      border-color: #848484;
      box-shadow: 0 0 10px #454545;
      background-color: #7f7f7f; }

.can-pan {
  cursor: -webkit-grab; }
  .can-pan .zoom-overlay,
  .can-pan .zoom-overlay-in,
  .can-pan .zoom-overlay-out {
    cursor: auto; }
  .preview.panning .can-pan {
    cursor: -webkit-grabbing; }

.preview-canvas-overlay {
  box-sizing: content-box;
  overflow: hidden;
  position: absolute; }

.zoom-overlay {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  left: calc(50% - 120px / 2);
  text-align: right;
  width: 120px;
  height: 21px;
  z-index: 999;
  bottom: -27px; }
  .zoom-overlay.dark .grid-background {
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><path fill='#454545' d='M3,3C4.4,1.7,6.6,1.7,8,3l3-3H0v11l3-3C1.7,6.6,1.7,4.4,3,3z M3,8C4.4,9.3,6.6,9.3,8,8C9.3,6.6,9.3,4.4,8,3 C6.8,4.2,4.7,6.3,3,8z'/><rect x='10' y='0' height='11' width='1' style='fill:#454545;'/><rect x='0' y='10' height='1' width='11' style='fill:#454545;'/></svg>"); }
  .zoom-overlay .grid-background {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-color: none;
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><path fill='#d1d1d1' d='M3,3C4.4,1.7,6.6,1.7,8,3l3-3H0v11l3-3C1.7,6.6,1.7,4.4,3,3z M3,8C4.4,9.3,6.6,9.3,8,8C9.3,6.6,9.3,4.4,8,3 C6.8,4.2,4.7,6.3,3,8z'/><rect x='10' y='0' height='11' width='1' style='fill:#d1d1d1;'/><rect x='0' y='10' height='1' width='11' style='fill:#d1d1d1;'/></svg>");
    background-size: auto;
    position: absolute;
    top: 5px;
    left: 9px; }
    .zoom-overlay .grid-background:after {
      content: "";
      position: absolute;
      top: -5px;
      left: 18px;
      width: 1px;
      height: 21px;
      background-color: #7c7c7c; }
  .zoom-overlay .zoom-overlay-level {
    left: 50px;
    width: 49px;
    color: #FFF;
    font-size: 10px;
    line-height: 11px;
    text-align: center;
    display: inline-block;
    position: absolute; }
  .zoom-overlay .zoom-overlay-in,
  .zoom-overlay .zoom-overlay-out {
    display: inline-block;
    position: absolute;
    top: 5px;
    width: 11px;
    height: 11px;
    background-color: #acacac;
    border-radius: 5.5px;
    cursor: default; }
    .zoom-overlay .zoom-overlay-in:hover,
    .zoom-overlay .zoom-overlay-out:hover {
      background-color: #c3c3c3; }
  .zoom-overlay .zoom-overlay-in {
    right: 10px;
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><rect x='2' y='5' height='1' width='7' style='fill:#000;'/><rect x='5' y='2' height='7' width='1' style='fill:#000;'/></svg>"); }
  .zoom-overlay .zoom-overlay-out {
    left: 39px;
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><rect x='2' y='5' height='1' width='7' style='fill:#000;'/></svg>"); }

.file-size-overlay-container {
  border-radius: 2px;
  bottom: 5px;
  background: inherit;
  position: absolute;
  right: 5px;
  z-index: 999;
  padding: 5px 9px 5px 9px;
  background: rgba(0, 0, 0, 0.5); }
  .file-size-overlay-container span {
    font-size: 10px;
    text-align: center;
    display: inline-block;
    color: #FFF; }

.processing-container {
  border-radius: 2px;
  bottom: 20px;
  width: 100%;
  position: absolute;
  z-index: 999; }
  .processing-container span {
    font-size: 10px;
    text-align: center;
    color: #FFF;
    display: inline-block;
    width: 100%; }

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  z-index: 9999;
  height: 100px;
  width: 100px;
  margin: -50px 0 0 -50px;
  cursor: none; }
  .spinner.spinner-cursor-area {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    width: auto;
    height: auto; }
  .spinner.hide {
    display: none; }
  .spinner .spinner-cursor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    margin-left: -16px; }
  .spinner.canvas-loading {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 2px; }
    .spinner.canvas-loading .canvas-loading-img {
      position: absolute;
      top: 12px;
      left: 50%;
      width: 54px;
      height: 54px;
      margin-left: -27px; }
    .spinner.canvas-loading.small .canvas-loading-img {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      width: 100%;
      height: 100%; }
    .spinner.canvas-loading svg {
      width: 100%;
      height: 100%;
      max-width: 128px;
      max-height: 128px; }

.tip-error-block .learn-more {
  display: block;
  margin: 0 auto; }
.tip-error-block .graphic-error {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0 auto 10px auto; }
.tip-error-block .graphic-layer {
  background-image: url(../images/graphic-layer.png); }
.tip-error-block .graphic-folder {
  background-image: url(../images/graphic-folder.png); }
.tip-error-block .graphic-none {
  display: none; }
.tip-error-block p {
  display: block;
  margin: 0 auto;
  text-align: center;
  color: #444;
  padding-bottom: 10px; }

.help-text a {
  color: blue;
  text-decoration: underline;
  cursor: pointer; }

.icon-warning {
  width: 11px;
  height: 14px;
  background: url("data:image/svg+xml;utf8, <svg width='11px' height='11px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><g><g><path fill='#464646' d='M0,5.5c0,3,2.5,5.5,5.5,5.5S11,8.5,11,5.5S8.5,0,5.5,0S0,2.5,0,5.5L0,5.5z M1,5.5C1,3,3,1,5.5,1 S10,3,10,5.5S8,10,5.5,10S1,8,1,5.5L1,5.5z'/> <path fill='#464646' d='M4.8,3.1c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7S5.9,3.8,5.5,3.8S4.8,3.5,4.8,3.1'/><path fill='#464646' d='M4.8,5.3C4.8,5,5,4.8,5.3,4.8h0.5c0.3,0,0.5,0.2,0.5,0.5v3.3c0,0.3-0.2,0.5-0.5,0.5H5.3 C5,9.1,4.8,8.9,4.8,8.6V5.3'/></g></g></svg>") no-repeat;
  transition: .2s opacity;
  cursor: help; }

.nowrap {
  white-space: nowrap; }

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 


*/
.tips {
  position: relative;
  text-decoration: none; }
  .tips:after {
    position: absolute;
    z-index: 100;
    opacity: 0;
    content: attr(aria-label);
    line-height: 13px;
    padding: 6px 6px 10px 6px;
    font-size: 10px;
    color: #FFF;
    background-color: #848484;
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><g><g><path fill='#AFAFAF' d='M0,5.5c0,3,2.5,5.5,5.5,5.5S11,8.5,11,5.5S8.5,0,5.5,0S0,2.5,0,5.5L0,5.5z'/><path fill='#464646' d='M4.8,5.3C4.8,5,5,4.8,5.3,4.8h0.5c0.3,0,0.5,0.2,0.5,0.5v3.3c0,0.3-0.2,0.5-0.5,0.5H5.3 C5,9.1,4.8,8.9,4.8,8.6V5.3'/><path fill='#464646' d='M4.8,3.1c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7S5.9,3.8,5.5,3.8S4.8,3.5,4.8,3.1'/></g></g></svg>");
    background-repeat: no-repeat;
    background-position: 6px 6px;
    background-size: 11px 11px;
    border: 1px solid #909090;
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.35), 0 1px 0px #b3b3b3 inset;
    text-indent: 15px;
    height: 0px;
    width: 200px;
    display: block;
    pointer-events: none;
    white-space: normal;
    word-wrap: normal;
    text-align: left;
    box-sizing: border-box; }
  .tips.active:hover:after {
    opacity: 1;
    height: auto; }

.alert {
  position: relative;
  height: 30px;
  overflow: hidden; }
  .alert .box {
    padding: 4px;
    height: 30px;
    background: linear-gradient(0deg, #8D8D8D 0%, #9E9E9E 100%);
    box-shadow: 0 -1px rgba(255, 255, 255, 0.65) inset, 0 -2px #909090 inset;
    box-sizing: border-box;
    text-shadow: 0 1px rgba(255, 255, 255, 0.35); }
  .alert .close {
    position: absolute;
    font-size: 15px;
    font-weight: bolder;
    font-family: 'AdobeCleanUI-Bold';
    top: 6px;
    right: 5px;
    width: 20px;
    height: 20px;
    text-shadow: 0 1px #B0B0B0;
    cursor: default; }
  .alert.hide {
    display: none; }
  .alert span {
    font-size: 13px;
    line-height: 21px;
    padding: 0 20px 0 0; }
  .alert button,
  .alert button.active,
  .alert button.active:before,
  .alert button.active:after {
    margin-top: 2px;
    background-color: #dcdcdc;
    box-shadow: none;
    height: 20px;
    border-radius: 2px;
    font-size: 11px;
    line-height: 16px; }
  .alert button.active,
  .alert button.active:before,
  .alert button.active:after {
    border-color: #7c7c7c;
    background-color: #dcdcdc; }
  .alert button.learn-more {
    margin-top: 1px; }
  .alert .icon-help,
  .alert .icon-creative-cloud {
    margin-top: 2px;
    width: 25px;
    height: 20px;
    position: relative;
    display: inline-block; }
  .alert .icon-help {
    background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 18' enable-background='new 0 0 25 18' xml:space='preserve'><circle fill='#434343' cx='12.5' cy='8.5' r='5.5'/><path fill='#FFFFFF' d='M14.2,7c0,1.1-1.4,1.7-1.4,2.3c0,0.2,0.1,0.3,0.2,0.5c0,0,0,0.1-0.1,0.1H12c0,0-0.1,0-0.1,0 c-0.2-0.2-0.3-0.5-0.3-0.7c0-0.8,1.3-1.3,1.3-2.1c0-0.4-0.3-0.7-1-0.7c-0.5,0-0.9,0.1-1.2,0.2c0,0-0.1,0-0.1,0V5.8 c0,0,0-0.1,0.1-0.1c0.2-0.1,0.8-0.3,1.5-0.3C13.5,5.3,14.2,6,14.2,7z M11.7,11.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7 c0,0.4-0.3,0.7-0.7,0.7C12,12.1,11.7,11.8,11.7,11.4z'/></svg>") no-repeat; }
  .alert .icon-creative-cloud {
    background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 18' enable-background='new 0 0 25 18' xml:space='preserve'><path fill='#434343' d='M18.5,4.6c-1-1-2.6-1.6-4.1-1.6c-1.5,0-2.7,0.4-3.8,1.4l-0.3,0.3c-0.2,0-0.6,0-0.8,0C8.4,4.6,7.2,5.1,6.3,6 c-1.8,1.8-1.6,5,0,6.7C7.2,13.6,8.7,14,10,14h4.4l0.1,0c1.4,0,3-0.6,4-1.6C20.5,10.3,20.5,6.6,18.5,4.6C18.5,4.6,20.5,6.6,18.5,4.6 L18.5,4.6L18.5,4.6z M10.1,13c-0.9,0-2-0.4-2.8-1.1c-0.7-0.7-1-1.5-1-2.5c0-1,0.3-1.9,1-2.6C8,6.1,8.8,5.7,9.8,5.7 c0.2,0,0.4,0,0.6,0c0.2,0,0.4,0.1,0.6,0.1c0.3,0.1,0.6,0.2,0.9,0.4c0.1,0.1,0.3,0.2,0.4,0.3L13.7,8c0.3,0.3,0.4,0.8,0,1.1 c-0.3,0.3-0.8,0.2-1.1-0.1l-1.4-1.4c-0.3-0.2-0.6-0.4-0.9-0.4C9.8,7.1,9.1,7.1,8.4,7.7c-0.8,0.8-0.9,2.4-0.1,3.2 c0.5,0.4,1,0.7,1.5,0.7l0.3,0l0.5,0.5c0.1,0.1,0.5,0.5,0.7,0.6l0.3,0.3L10.1,13L10.1,13L10.1,13L10.1,13z M17.5,11.5 C17,12,16.6,12.3,16,12.5c-0.2,0.1-0.4,0.1-0.6,0.2c-0.3,0.1-0.9,0.1-0.9,0.1c-1,0-2.3-0.6-3-1.2L9.6,9.7C9.4,9.6,9.3,9.4,9.3,9.2 c0-0.2,0.1-0.4,0.2-0.5c0.3-0.3,0.7-0.3,1,0c0,0,2,2,2.2,2.1c0.6,0.4,1.9,0.7,2.8,0.3c0.3-0.2,0.7-0.4,0.9-0.6 c0.5-0.5,0.8-1.2,0.8-2c0-0.7-0.3-1.5-0.8-2c-0.5-0.5-1.3-0.8-2-0.8c-0.4,0-0.8,0.1-1.2,0.3C13.2,6,13,6.1,13,6.1l-1.1-1 C11.8,5.1,12,5,12,5c0.7-0.5,1.5-0.7,2.5-0.7c1.1,0,2.2,0.4,3,1.2c0.8,0.8,1.3,1.9,1.3,3C18.8,9.6,18.3,10.7,17.5,11.5L17.5,11.5z'/></svg>") no-repeat; }

#roadblock-settings .roadblock-box:before {
  content: "Settings"; }
#roadblock-settings .roadblock-column:first-child {
  min-width: 460px;
  max-width: 460px;
  position: relative; }

.alert-link-to-extract.hide,
.alert-learn-more.hide {
  display: none; }

.roadblock .roadblock-column:first-child {
  min-width: 360px;
  max-width: 360px;
  position: relative; }
.roadblock .roadblock-box {
  padding: 38px 20px 20px 20px;
  background: #dcdcdc;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 0px 0px 1px rgba(0, 0, 0, 0.25); }
  .roadblock .roadblock-box:before {
    position: absolute;
    top: 0;
    left: 0;
    content: "Adobe Photoshop";
    width: calc(100% - 0px);
    height: 100%;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    font-weight: 500;
    font-size: 13px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 23px;
    height: 21px;
    background: -webkit-linear-gradient(90deg, rgba(175, 175, 175, 0.8) 0%, rgba(240, 240, 240, 0.8) 100%), url("data:image/png;base64, ");
    box-shadow: 0 1px 0 #f0f0f0 inset, 0 -1px 0 rgba(255, 255, 255, 0.08) inset;
    border-bottom: 1px solid #686868;
    border-radius: calc(2px + 1px) calc(2px + 1px) 0 0; }
.roadblock input[type="checkbox"] {
  display: inline-block;
  margin-top: 2px;
  margin-left: -20px;
  margin-right: 7px;
  border-radius: 3px; }
.roadblock .bordered {
  margin: 24px 20px 10px 0px;
  position: relative;
  padding: 13px 0px 10px 0px;
  border: 1px solid #b3b3b3;
  box-shadow: 1px 1px 0px #f0f0f0 inset, 0px 1px 0px #f0f0f0; }
  .roadblock .bordered:first-child {
    padding: 13px 0px 0px 0px;
    margin: 0px 20px 10px 0px; }
  .roadblock .bordered:last-child {
    margin: 24px 20px 0px 0px; }
  .roadblock .bordered h3 {
    position: absolute;
    top: -8px;
    left: 16px;
    background: #dcdcdc;
    font-size: 13px;
    font-weight: 300;
    line-height: 15px;
    padding: 0 5px;
    z-index: 1; }
  .roadblock .bordered .checkbox {
    display: inline-block;
    margin-top: 2px;
    margin-left: -20px;
    margin-right: 7px;
    margin-bottom: 0;
    border-radius: 3px; }
  .roadblock .bordered li {
    box-shadow: 0 1px 0 #f0f0f0;
    padding: 3px 10px 0 10px;
    min-height: 23px; }
  .roadblock .bordered ul.checklist li {
    padding: 3px 10px 0 30px; }
  .roadblock .bordered li:last-child {
    box-shadow: none; }
  .roadblock .bordered li.selected {
    background-color: #B5D5FF;
    box-shadow: 0 1px 0 #f0f0f0, 0 -1px 0 #f0f0f0; }
  .roadblock .bordered p {
    font-size: 11px;
    display: inline-block;
    padding-top: 2px;
    line-height: normal;
    margin: 0px 0 0 0; }
  .roadblock .bordered .button-bar {
    margin: auto 10px 10px 10px;
    width: calc(100% - 20px); }
    .roadblock .bordered .button-bar button {
      width: calc(100%/ 4); }
  .roadblock .bordered input[type="text"] {
    font-size: 11px;
    line-height: 1.25em;
    display: inline-block;
    float: right;
    border: 1px solid #7c7c7c;
    width: auto;
    min-width: 0;
    max-width: 50%;
    height: 20px;
    margin: 0;
    padding: 0 4px 0 4px;
    opacity: 1; }
    .roadblock .bordered input[type="text"]:focus {
      opacity: 1; }
    .roadblock .bordered input[type="text"]::-webkit-input-placeholder {
      color: #9A9A9A; }
    .roadblock .bordered input[type="text"]:first-child {
      max-width: calc(60%); }
    .roadblock .bordered input[type="text"]:last-child {
      margin-right: 8px;
      max-width: calc(40% - 8px); }
  .roadblock .bordered #auto-extract #auto-extract-description {
    font-size: 13px;
    line-height: 1.25em;
    padding-top: 1px;
    max-width: calc(100% - 20px); }
  .roadblock .bordered #auto-extract button {
    width: auto;
    padding: 0 6px;
    float: right;
    clear: both;
    margin: 0; }
  .roadblock .bordered #auto-extract #auto-extract-name {
    font-size: 13px;
    font-style: italic;
    padding-top: 10px;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .roadblock .bordered #auto-extract.disabled button {
    opacity: .5; }
  .roadblock .bordered #auto-extract.disabled #auto-extract-name {
    display: none; }
.roadblock .button-group-right {
  float: right;
  max-width: 80px; }
  .roadblock .button-group-right button {
    padding-left: 0;
    padding-right: 0; }
  .roadblock .button-group-right p {
    margin-bottom: 10px; }
.roadblock ul.checklist li.titles {
  text-align: left;
  margin: 0 0 0 0px;
  padding-right: 10px;
  width: 100%;
  color: #9A9A9A; }
  .roadblock ul.checklist li.titles h3 {
    display: inline-block;
    font-size: 13px;
    font-weight: 300;
    line-height: 19px;
    padding: 0 0 0 -20px;
    margin-left: -20px;
    z-index: 1; }
  .roadblock ul.checklist li.titles p {
    color: #9A9A9A; }
  .roadblock ul.checklist li.titles span {
    font-size: 11px;
    text-align: left;
    line-height: 19px;
    display: inline-block; }

/*    
    Lists
*/
.lists {
  background-color: #dcdcdc;
  margin-right: 10px; }

.lists #list-document,
.lists #list-layers {
  display: inline-block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: opacity .5s, width 0s; }
  .lists #list-document.hide,
  .lists #list-layers.hide {
    left: 300px;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity .5s, width .5s linear 0s; }
.lists #list-document {
  border-top: 1px solid #7c7c7c;
  padding: 30px;
  text-align: center; }
.lists .top-bar,
.lists .menu-bar {
  text-align: right;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 21px;
  padding: 0 8px 0 0;
  background-color: #dcdcdc;
  box-shadow: 0 -1px 0 #9e9e9e, 0 -2px 0 #fff; }
.lists .top-bar {
  top: 0px;
  height: 34px;
  box-shadow: 0 1px rgba(255, 255, 255, 0.4), 0 -1px #909090 inset;
  text-align: left;
  position: absolute;
  width: 100%;
  padding: 4px 6px 0 12px;
  background: #dcdcdc; }
  .lists .top-bar p {
    font-size: 11px;
    color: #9A9A9A;
    text-align: center;
    display: none;
    width: 30%;
    padding: 1px 8px 0 0;
    margin-bottom: 0;
    white-space: nowrap; }
  .lists .top-bar .toggle-bar {
    width: 100%; }
    .lists .top-bar .toggle-bar button {
      width: auto;
      max-width: none;
      min-width: calc(100% / 5 + 2.5px);
      line-height: normal; }
      .lists .top-bar .toggle-bar button:last-child {
        width: 20px;
        min-width: 20px;
        max-width: 20px;
        background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><path fill-rule='evenodd' clip-rule='evenodd' fill='#454545' d='M11,8H9.8c0-0.1-0.1-0.2-0.1-0.3l0.8-0.8c0.4-0.4,0.4-1,0-1.4 c-0.4-0.4-1-0.4-1.4,0L8.3,6.3C8.2,6.3,8.1,6.2,8,6.2V5c0-0.6-0.4-1-1-1S6,4.4,6,5v1.2c-0.1,0-0.2,0.1-0.3,0.1L4.9,5.4 c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l0.8,0.8c0,0.1-0.1,0.2-0.1,0.3H3C2.4,8,2,8.4,2,9s0.4,1,1,1h1.2c0,0.1,0.1,0.2,0.1,0.3 l-0.8,0.8c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l0.8-0.8c0.1,0,0.2,0.1,0.3,0.1V13c0,0.6,0.4,1,1,1s1-0.4,1-1v-1.2 c0.1,0,0.2-0.1,0.3-0.1l0.8,0.8c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4l-0.8-0.8c0-0.1,0.1-0.2,0.1-0.3H11c0.6,0,1-0.4,1-1 S11.6,8,11,8z M7,11c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.1,11,7,11z'/></svg>") no-repeat 2px 0px;
        border: none;
        box-shadow: none; }
        .lists .top-bar .toggle-bar button:last-child:active {
          background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><path fill-rule='evenodd' clip-rule='evenodd' fill='#454545' d='M11,8H9.8c0-0.1-0.1-0.2-0.1-0.3l0.8-0.8c0.4-0.4,0.4-1,0-1.4 c-0.4-0.4-1-0.4-1.4,0L8.3,6.3C8.2,6.3,8.1,6.2,8,6.2V5c0-0.6-0.4-1-1-1S6,4.4,6,5v1.2c-0.1,0-0.2,0.1-0.3,0.1L4.9,5.4 c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4l0.8,0.8c0,0.1-0.1,0.2-0.1,0.3H3C2.4,8,2,8.4,2,9s0.4,1,1,1h1.2c0,0.1,0.1,0.2,0.1,0.3 l-0.8,0.8c-0.4,0.4-0.4,1,0,1.4c0.4,0.4,1,0.4,1.4,0l0.8-0.8c0.1,0,0.2,0.1,0.3,0.1V13c0,0.6,0.4,1,1,1s1-0.4,1-1v-1.2 c0.1,0,0.2-0.1,0.3-0.1l0.8,0.8c0.4,0.4,1,0.4,1.4,0c0.4-0.4,0.4-1,0-1.4l-0.8-0.8c0-0.1,0.1-0.2,0.1-0.3H11c0.6,0,1-0.4,1-1 S11.6,8,11,8z M7,11c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2S8.1,11,7,11z'/></svg>") no-repeat 2px 0px, linear-gradient(0deg, #a3a3a3 0%, #a3a3a3 98%, #989898 100%); }
        .lists .top-bar .toggle-bar button:last-child span {
          font-size: 10px;
          font-weight: 900;
          letter-spacing: -.1em;
          margin-left: 0px; }
.lists .asset:first-child .disclosure-arrow {
  margin-left: 0px;
  background-position: 0 -4px; }
.lists .asset:first-child .thumbnail {
  display: inline-block; }
.lists .asset:first-child .title {
  margin-left: 0;
  opacity: 1; }
.lists .asset:first-child .formats {
  margin: 8px 0 0 calc(3px + 20px); }
  .lists .asset:first-child .formats .button-bar {
    width: 100%; }
    .lists .asset:first-child .formats .button-bar button {
      width: calc(85% / 4);
      line-height: 1.25em;
      padding: 0 6px; }
      .lists .asset:first-child .formats .button-bar button:last-child {
        background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><g transform='translate(1 1)'><path fill='#454545' d='M3,9h10V7H3V9z'/><path fill='#454545' d='M9,13V3H7v10H9z'/></g></svg>") no-repeat center, linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%);
        border-left: 1px solid #b3b3b3;
        width: 15%; }
.lists .layer {
  padding: 3px;
  position: relative;
  white-space: nowrap;
  transition: .15s; }
  .lists .layer.selected {
    background-color: #B5D5FF; }
    .lists .layer.selected + .options {
      background-color: #B5D5FF; }
    .lists .layer.selected .title {
      opacity: 1; }
    .lists .layer.selected .icon-info {
      width: 0;
      height: 11px;
      position: absolute;
      top: calc(39px / 2 - 6px);
      left: 8px;
      background: url("data:image/svg+xml;utf8, <svg width='11px' height='11px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><g><g><path fill='#464646' d='M0,5.5c0,3,2.5,5.5,5.5,5.5S11,8.5,11,5.5S8.5,0,5.5,0S0,2.5,0,5.5L0,5.5z M1,5.5C1,3,3,1,5.5,1 S10,3,10,5.5S8,10,5.5,10S1,8,1,5.5L1,5.5z'/> <path fill='#464646' d='M4.8,3.1c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7S5.9,3.8,5.5,3.8S4.8,3.5,4.8,3.1'/><path fill='#464646' d='M4.8,5.3C4.8,5,5,4.8,5.3,4.8h0.5c0.3,0,0.5,0.2,0.5,0.5v3.3c0,0.3-0.2,0.5-0.5,0.5H5.3 C5,9.1,4.8,8.9,4.8,8.6V5.3'/></g></g></svg>") no-repeat;
      opacity: 0;
      transition: .2s opacity; }
      .lists .layer.selected .icon-info.active {
        cursor: help;
        opacity: 1;
        width: 11px; }
    .lists .layer.selected .thumbnail {
      border-color: #454545;
      position: relative; }
    .lists .layer.selected .close {
      opacity: 1; }
  .lists .layer.subselected {
    background-color: #B5D5FF; }
    .lists .layer.subselected + .options {
      background-color: #B5D5FF; }
    .lists .layer.subselected .thumbnail {
      border-color: #454545;
      position: relative; }
  .lists .layer.selected .asset .layer {
    background-color: #B5D5FF; }
  .lists .layer:hover .close {
    opacity: 1; }
  .lists .layer .icon-info {
    width: 0;
    height: 11px;
    position: absolute;
    top: calc(39px / 2 - 6px);
    left: 8px;
    background: url("data:image/svg+xml;utf8, <svg width='11px' height='11px' version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 11 11' enable-background='new 0 0 11 11' xml:space='preserve'><g><g><path fill='#464646' d='M0,5.5c0,3,2.5,5.5,5.5,5.5S11,8.5,11,5.5S8.5,0,5.5,0S0,2.5,0,5.5L0,5.5z M1,5.5C1,3,3,1,5.5,1 S10,3,10,5.5S8,10,5.5,10S1,8,1,5.5L1,5.5z'/> <path fill='#464646' d='M4.8,3.1c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7S5.9,3.8,5.5,3.8S4.8,3.5,4.8,3.1'/><path fill='#464646' d='M4.8,5.3C4.8,5,5,4.8,5.3,4.8h0.5c0.3,0,0.5,0.2,0.5,0.5v3.3c0,0.3-0.2,0.5-0.5,0.5H5.3 C5,9.1,4.8,8.9,4.8,8.6V5.3'/></g></g></svg>") no-repeat;
    opacity: 0;
    transition: .2s opacity;
    cursor: help; }
    .lists .layer .icon-info.active {
      opacity: 1;
      width: 11px; }
  .lists .layer .thumbnail {
    display: none; }
  .lists .layer .disclosure-arrow {
    display: inline-block; }
  .lists .layer .disclosure-arrow {
    width: 20px;
    height: 23px;
    margin-left: 15px;
    font-size: 16px;
    text-align: center;
    line-height: 23px;
    background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 20 32' enable-background='new 0 0 20 32' xml:space='preserve'><path fill='#434343' d='M8,21V11l6,5L8,21z'/></svg>") no-repeat;
    background-size: 20px 32px;
    background-position: 0 -5px;
    transform: rotate(0deg);
    transition: all .2s;
    cursor: default; }
    .lists .layer .disclosure-arrow.active {
      -webkit-transform: rotate(0.25turn); }
  .lists .layer .selected-asset {
    width: 20px;
    height: 27px;
    padding: 6px 0 0 2px;
    box-sizing: border-box;
    margin: 0;
    display: inline-block;
    line-height: 26px; }
  .lists .layer .thumbnail {
    width: 32px;
    height: 32px;
    border: 1px solid #909090;
    background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 8 8' enable-background='new 0 0 8 8' xml:space='preserve'><rect x='0' y='0' height='4' width='4' style='fill: rgba(0,0,0,.12)'/><rect x='4' y='4' height='4' width='4' style='fill:  rgba(0,0,0,.12)'/></svg>") repeat;
    background-color: #FFF;
    background-size: 8px 8px; }
  .lists .layer .thumbnail-img {
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 45%; }
  .lists .layer .info {
    position: absolute;
    top: 0;
    left: 32px;
    width: calc(100% - 32px);
    height: 40px;
    padding: 4px 0; }
    .lists .layer .info p {
      margin: 0; }
  .lists .layer .asset-name {
    display: inline-block;
    width: 100%;
    min-width: calc(100% - 20px - 54px - 44px - 55px - 20px);
    max-width: calc(100% - 20px - 54px - 44px - 55px - 20px); }
  .lists .layer .title, .lists .layer .fileformat, .lists .layer .dimensions {
    display: inline-block;
    padding: 1px 0 0 8px;
    white-space: nowrap;
    text-overflow: ellipsis; }
  .lists .layer .fileformat {
    text-transform: uppercase;
    width: 30px; }
  .lists .layer .export-format {
    font-size: 11px;
    width: 66px;
    margin: 2px 0 0 0;
    padding-top: 0px;
    text-transform: lowercase;
    background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><path fill='#434343' d='M10.4,13l2.6-3H8L10.4,13z M10.6,5L8,8h5L10.6,5z'/></svg>") no-repeat right, linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%);
    background-size: 18px, auto;
    appearance: none;
    -webkit-appearance: none;
    line-height: 18px;
    height: 18px;
    vertical-align: top; }
  .lists .layer .close {
    opacity: 0;
    display: inline-block;
    font-size: 15px;
    font-weight: bolder;
    font-family: 'AdobeCleanUI-Bold';
    text-align: center;
    line-height: 20px;
    color: transparent;
    /*$ps-background-dark;*/
    width: 20px;
    height: 20px;
    margin: 0px 0 0 20px;
    cursor: default;
    transition: .1s opacity;
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 21 21' enable-background='new 0 0 21 21' xml:space='preserve'><path fill='#454545' d='M14,6h-1V5c0-1-1-1-1-1H9c0,0-1,0-1,1v1H7C5,6,5,8,5,8h11 C16,8,16,6,14,6z M12,6H9V5h3V6z M14,14h-1V9h-1v5h-1V9h-1v5H9V9H8v5H7V9H6v5c0,0.6,0.4,1,1,1h7c0.6,0,1-0.4,1-1V9h-1V14z'/></svg>");
    background-size: 21px;
    background-position: -3px 0px; }
.lists .select-interpolation {
  width: 100%; }
.lists .sizing input[type="text"] {
  width: 100%;
  height: 20px;
  line-height: 1.25em;
  padding: 0 2px 0 4px;
  margin: 0;
  border: 1px solid #909090; }
.lists .padding {
  padding: 0;
  width: 100%; }
  .lists .padding .padding-group {
    display: inline-block;
    width: calc(100% - 20px); }
  .lists .padding button {
    width: 25px;
    max-width: 25px;
    min-width: 25px;
    padding: 0;
    margin: 0;
    border-radius: 2px 0 0 2px;
    background-image: url("data:image/svg+xml;utf8, <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 25 18' enable-background='new 0 0 25 18' xml:space='preserve'><path opacity='0.5' fill='#FFFFFF' d='M9.6,10.7c-0.3,0.2-0.8,0.4-1.2,0.4c-1.2,0-2.1-0.9-2.1-2.1 s0.9-2.1,2.1-2.1c0.5,0,0.9,0.2,1.2,0.4H10v-1C9.6,5.9,9.1,5.7,8.3,5.7C6.5,5.7,5,7.2,5,9s1.5,3.3,3.3,3.3c0.8,0,1.2-0.2,1.7-0.7v-1 H9.6z'/><path fill='#434343' d='M9.6,9.8c-0.3,0.3-0.8,0.4-1.2,0.4c-1.2,0-2.1-0.9-2.1-2.1s0.9-2.1,2.1-2.1c0.5,0,0.9,0.2,1.2,0.4H10v-1 C9.6,5.1,9.1,4.8,8.3,4.8C6.5,4.8,5,6.3,5,8.2s1.5,3.3,3.3,3.3c0.8,0,1.2-0.2,1.7-0.7v-1H9.6z'/><path opacity='0.5' fill='#FFFFFF' d='M16.7,5.7c-0.7,0-1.2,0.2-1.7,0.7v1h0.4c0.3-0.2,0.7-0.4,1.2-0.4 c1.2,0,2.1,0.9,2.1,2.1s-0.9,2.1-2.1,2.1c-0.5,0-0.9-0.2-1.2-0.4H15v1c0.4,0.4,0.9,0.7,1.7,0.7c1.8,0,3.3-1.5,3.3-3.3 S18.5,5.7,16.7,5.7z'/><path fill='#434343' d='M16.7,4.8c-0.7,0-1.2,0.2-1.7,0.7v1h0.4c0.3-0.2,0.7-0.4,1.2-0.4c1.2,0,2.1,0.9,2.1,2.1s-0.9,2.1-2.1,2.1 c-0.5,0-0.9-0.2-1.2-0.4H15v1c0.4,0.4,0.9,0.7,1.7,0.7c1.8,0,3.3-1.5,3.3-3.3S18.5,4.8,16.7,4.8z'/><path opacity='0.5' fill='#FFFFFF' d='M13.3,7.3V5.7c0-0.5-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8v1.7 c0,0.5,0.3,0.8,0.8,0.8S13.3,7.8,13.3,7.3z'/><path fill='#434343' d='M13.3,6.5V4.8C13.3,4.3,13,4,12.5,4s-0.8,0.3-0.8,0.8v1.7c0,0.5,0.3,0.8,0.8,0.8S13.3,7,13.3,6.5z'/><path opacity='0.5' fill='#FFFFFF' d='M13.3,13.2v-1.7c0-0.5-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8v1.7 c0,0.5,0.3,0.8,0.8,0.8S13.3,13.7,13.3,13.2z'/><path fill='#434343' d='M13.3,12.3v-1.7c0-0.5-0.3-0.8-0.8-0.8s-0.8,0.3-0.8,0.8v1.7c0,0.5,0.3,0.8,0.8,0.8S13.3,12.8,13.3,12.3z'/></svg>"), linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%); }
    .lists .padding button.linked {
      background: url("data:image/svg+xml;utf8, <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 14 28' xml:space='preserve'><path d='M6.856,28a6.862,6.862,0,0,1-6.862-6.862V17.716a3.245,3.245,0,0,1,2.869-1.68h0V20.19a3.993,3.993,0,0,0,7.985,0V16.036h0a3.32,3.32,0,0,1,2.869,1.497v3.605A6.862,6.862,0,0,1,6.856,28ZM8.852,9.887v8.226a1.997,1.997,0,0,1-3.993,0V9.887a1.997,1.997,0,0,1,3.993,0Zm1.996,2.077V7.81a3.993,3.993,0,0,0-7.985,0v4.154h0a3.238,3.238,0,0,1-2.869-1.763V6.862a6.862,6.862,0,1,1,13.723,0V10.18a3.239,3.239,0,0,1-2.869,1.784h0Z'/></svg>"), #d5d5d5; }
  .lists .padding .padding-top,
  .lists .padding .padding-right,
  .lists .padding .padding-bottom,
  .lists .padding .padding-left {
    height: 20px;
    width: calc(25% - 6.25px);
    line-height: 1.25em;
    padding: 0 2px 0 4px;
    margin: 0;
    border-left: none; }
    .lists .padding .padding-top.linked,
    .lists .padding .padding-right.linked,
    .lists .padding .padding-bottom.linked,
    .lists .padding .padding-left.linked {
      display: none; }
  .lists .padding .padding-top.linked {
    display: inline-block;
    width: calc(100% - 25px); }
.lists .scale-editable-combobox {
  position: relative; }
  .lists .scale-editable-combobox input[type="text"] {
    position: relative;
    z-index: 1;
    width: calc(100% - 15px); }
  .lists .scale-editable-combobox select {
    width: calc(100% - 6px);
    position: absolute;
    right: 2px;
    /* From the left edge, clip out the text area of the select box. Since the input text box is stacked on top of
       the select box, when the input is disabled and translucent, we don't want the select box to show through. */
    clip: rect(auto, auto, auto, 101px); }
.lists .options {
  transition: all .15s;
  max-height: 480px;
  font-size: 10px; }
  .lists .options.active {
    max-height: 0px;
    border-bottom: none;
    overflow: hidden; }
  .lists .options .row {
    padding: 3px; }
  .lists .options .option-section:last-child {
    margin-bottom: 0px; }
  .lists .options .option-section .scale {
    flex-basis: 40px;
    -webkit-flex-basis: 40px; }
  .lists .options .option-section .proportion-col {
    flex-basis: 25px;
    -webkit-flex-basis: 25px; }
  .lists .options .select-preprocessor {
    width: calc(70% - 4px);
    max-width: calc(70% - 4px);
    margin: 0px 4px 4px 0;
    margin: 0px 4px 4px 0; }
  .lists .options fieldset {
    border: 2px groove #f0f0f0;
    margin: 0 5px 10px 0;
    padding: 5px 0; }
    .lists .options fieldset legend {
      font-weight: 800;
      padding: 0 4px 5px 5px;
      margin-left: 10px; }
    .lists .options fieldset .checkbox__checkmark {
      margin-right: 8px; }
    .lists .options fieldset .column-auto-hand .box,
    .lists .options fieldset .column-1-hand .box, .lists .options fieldset .column-2-hand .box, .lists .options fieldset .column-3-hand .box, .lists .options fieldset .column-4-hand .box,
    .lists .options fieldset .column-5-hand .box, .lists .options fieldset .column-6-hand .box, .lists .options fieldset .column-7-hand .box, .lists .options fieldset .column-8-hand .box,
    .lists .options fieldset .column-9-hand .box, .lists .options fieldset .column-10-hand .box, .lists .options fieldset .column-11-hand .box, .lists .options fieldset .column-12-hand .box,
    .lists .options fieldset .offset-1-hand .box, .lists .options fieldset .offset-2-hand .box, .lists .options fieldset .offset-3-hand .box, .lists .options fieldset .offset-4-hand .box,
    .lists .options fieldset .offset-5-hand .box, .lists .options fieldset .offset-6-hand .box, .lists .options fieldset .offset-7-hand .box, .lists .options fieldset .offset-8-hand .box,
    .lists .options fieldset .offset-9-hand .box, .lists .options fieldset .offset-10-hand .box, .lists .options fieldset .offset-11-hand .box, .lists .options fieldset .offset-12-hand .box {
      padding: 2px; }
  .lists .options fieldset.file-format {
    min-height: 87px; }
    .lists .options fieldset.file-format .transparency-row.hide, .lists .options fieldset.file-format .quality-row.hide, .lists .options fieldset.file-format .svg-warning-row.hide {
      display: none; }
    .lists .options fieldset.file-format .svg-warning-row {
      padding-left: 12px; }
  .lists .options .input-select {
    position: relative;
    margin: 2px 0 0 0; }
    .lists .options .input-select span {
      vertical-align: bottom; }
    .lists .options .input-select input[type="text"] {
      width: 68px;
      height: 20px;
      margin: 0;
      line-height: normal;
      border-radius: 0px;
      border: 1px solid #7c7c7c;
      border-right: none; }
    .lists .options .input-select .percentage {
      display: inline-block;
      border-radius: 0 2px 2px 0;
      width: calc(20px + 1px);
      height: 20px;
      padding: 0;
      margin: 0;
      color: transparent;
      background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><path fill='#1C1C1C' d='M8.3,10l2.6-3h-5L8.3,10z'/></svg>") no-repeat, linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%);
      background-size: 20px, auto;
      border: 1px solid #7c7c7c;
      box-shadow: 0 1px rgba(255, 255, 255, 0.4);
      cursor: default; }
    .lists .options .input-select .percentage-range {
      position: absolute;
      top: 20px;
      right: -20px;
      width: 150px;
      height: 20px;
      padding: 12px 12px 20px 12px;
      background: #dcdcdc;
      border: 1px solid #7c7c7c;
      border-radius: 2px 0 2px 2px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
      z-index: 9999;
      display: none; }
      .lists .options .input-select .percentage-range.show {
        display: block; }
      .lists .options .input-select .percentage-range .psstyle-range {
        width: 100%; }
  .lists .options .copy-all {
    width: 30%;
    min-width: 30%; }
.lists select {
  color: black;
  height: 20px;
  width: auto;
  padding: 2px 20px 0 5px;
  margin: 0;
  border-radius: 2px;
  font-size: 10px; }
.lists button {
  font-size: 11px;
  line-height: 11px;
  height: 20px;
  border-radius: 2px;
  padding: 0 5px; }
.lists textarea {
  width: 100%;
  height: 5em;
  margin: 0px 0 4px 0;
  resize: none;
  color: #7d7d7d;
  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.12) inset; }
.lists input[type="text"] {
  width: 47px;
  padding: 0 2px;
  margin: 0;
  border-radius: 0px;
  border: 1px solid #bababa; }
.lists .no-layer {
  color: #9A9A9A;
  text-align: center;
  padding: 20px;
  -webkit-animation: fadein 2s;
  /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 2s;
  /* Firefox < 16 */
  -ms-animation: fadein 2s;
  /* Internet Explorer */
  -o-animation: fadein 2s;
  /* Opera < 12.1 */
  animation: fadein 2s; }
.lists .ps-selected-layers {
  background: linear-gradient(180deg, #8D8D8D 0%, #9E9E9E 100%);
  color: #000;
  text-shadow: 0 1px #B0B0B0;
  line-height: 21px;
  padding: 3px 27px 0 8px;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 23px;
  box-shadow: 0 1px 0 #454545 inset, 0 -1px 0 #B0B0B0 inset; }
  .lists .ps-selected-layers .icon-added-items {
    color: #000;
    text-align: center;
    line-height: 12px;
    border: 1px solid #909090;
    padding: 3px 0 0 0;
    margin: 0 6px 0 0;
    width: 30px;
    display: inline-block;
    border-radius: 2px;
    text-shadow: 0 1px #B0B0B0;
    background: rgba(255, 255, 255, 0.12); }
  .lists .ps-selected-layers span {
    color: #000;
    text-align: left;
    line-height: 12px;
    padding: 4px 0 0 0;
    margin: 0 6px 0 0;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 45px); }
  .lists .ps-selected-layers button {
    line-height: 1.25em;
    height: 20px;
    min-width: 40px;
    max-width: 40px;
    margin: 0;
    padding: 0 3px;
    box-shadow: none;
    position: absolute;
    top: 3px;
    right: 26px;
    text-align: center;
    white-space: nowrap; }
  .lists .ps-selected-layers .close {
    position: absolute;
    font-size: 15px;
    font-family: 'AdobeCleanUI-Bold';
    color: #000;
    top: 2px;
    right: 0px;
    width: 20px;
    height: 20px;
    text-shadow: 0 1px #B0B0B0;
    cursor: default; }

input[name="canvasWidth"]::-webkit-input-placeholder,
input[name="canvasHeight"]::-webkit-input-placeholder {
  color: #000; }

input[name="canvasWidth"]:focus::-webkit-input-placeholder,
input[name="canvasHeight"]:focus::-webkit-input-placeholder {
  color: transparent; }

/* our modifications, don't delete this  */
.lists .scroller {
  margin-top: 1px;
  height: calc(100% - 22px);
  overflow: auto; }
.lists .vertical-scroller {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto; }
.lists .layer .input[contenteditable=true] {
  border: 1px solid #AAA; }
.lists .layer .input,
.lists .layer .input:focus {
  outline: 0px solid transparent; }
.lists .layer .input:focus {
  outline: 0px solid #B5D5FF;
  margin-top: 2px; }
.lists .layer .input {
  height: 18px;
  text-overflow: clip;
  vertical-align: baseline;
  margin-left: 0px; }
.lists .layer .input.editing {
  text-overflow: clip;
  border: 1px solid #AAA;
  cursor: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text; }

.lists .disabled .percentage {
  opacity: .5; }

@keyframes fadein {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes fadein {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.tabs {
  height: 23px;
  max-width: 300px;
  min-width: 260px;
  border-top: 1px solid #7c7c7c; }

.tabs-title {
  display: inline-block; }

#tabs {
  list-style: none;
  width: 100%; }
  #tabs li {
    position: relative;
    min-width: 35%;
    max-width: 65%;
    padding: 3px 12px;
    margin: 0;
    height: 22px;
    display: inline-block;
    list-style: none;
    font-size: 11px;
    text-align: left;
    color: #454545;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    line-height: 23px;
    white-space: nowrap;
    border: none; }
    #tabs li:first-child {
      border-left: none; }
    #tabs li.selected {
      color: #000;
      line-height: 23px; }
      #tabs li.selected:first-child {
        border-left: none; }
      #tabs li.selected::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        width: calc(100% - 2px); }

/*    
    Popup

*/
.semi-modal-dialog-view {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden; }
  .semi-modal-dialog-view.hide {
    padding: 0;
    min-width: 0;
    max-width: 0;
    max-height: 0;
    opacity: 0; }
  .semi-modal-dialog-view .semi-modal-wash {
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 10000; }
  .semi-modal-dialog-view .semi-modal-dialog {
    /* the race to the top starts here*/
    z-index: 10001;
    position: relative;
    left: calc(50% - 425px / 2);
    top: 234px;
    width: 425px;
    min-width: 425px;
    min-height: 151px;
    background-color: #dcdcdc;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), 0 0px 0px 1px rgba(0, 0, 0, 0.25); }
    .semi-modal-dialog-view .semi-modal-dialog .title-bar {
      height: 22px;
      width: 100%;
      border-bottom: 1px solid #686868;
      background: linear-gradient(0deg, rgba(175, 175, 175, 0.8) 0%, rgba(240, 240, 240, 0.8) 100%), url("data:image/png;base64, ");
      border-radius: calc(2px + 1px) calc(2px + 1px) 0 0;
      box-shadow: 0 1px 0 #f0f0f0 inset, 0 -1px 0 rgba(255, 255, 255, 0.08) inset; }
      .semi-modal-dialog-view .semi-modal-dialog .title-bar h2 {
        margin: 0px;
        padding: 2px 0px 0px 10px;
        text-align: center;
        font-weight: 500;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.75);
        line-height: normal;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
    .semi-modal-dialog-view .semi-modal-dialog .primary-content {
      min-height: 60px;
      padding: 20px; }
    .semi-modal-dialog-view .semi-modal-dialog .message {
      font-size: 13px; }
    .semi-modal-dialog-view .semi-modal-dialog .button-area {
      position: relative;
      width: 100%;
      min-height: 30px;
      padding-bottom: 8px; }
      .semi-modal-dialog-view .semi-modal-dialog .button-area label {
        display: inline-block;
        padding: 4px 0px 0px 18px; }
      .semi-modal-dialog-view .semi-modal-dialog .button-area p:first-child {
        background: red;
        margin-top: 10px;
        margin-bottom: 10px; }
      .semi-modal-dialog-view .semi-modal-dialog .button-area button {
        float: right;
        margin-left: 10px;
        margin-right: 10px; }
      .semi-modal-dialog-view .semi-modal-dialog .button-area button:first-child {
        margin-right: 20px; }
      .semi-modal-dialog-view .semi-modal-dialog .button-area button.hide {
        display: none; }
    .semi-modal-dialog-view .semi-modal-dialog.checkbox-hidden .primary-content {
      min-height: 90px; }
    .semi-modal-dialog-view .semi-modal-dialog.checkbox-hidden .button-area label {
      display: none; }

.settings-dialog .semi-modal-dialog {
  width: 461px;
  min-height: 368px;
  top: 135px; }

/* 


ELEMENTS 


*/
/* LABEL */
/* CHECKBOX */
input[type="checkbox"] {
  margin: 3px 5px 0 0px;
  line-height: 23px; }

/*   INPUT TEXT     */
input[type="text"] {
  text-overflow: ellipsis;
  line-height: 21px;
  background-color: #FFF;
  box-shadow: 0 1px 0px 0px #DBDBDB inset, 0 1px rgba(255, 255, 255, 0.4);
  height: 21px;
  padding: 0 0 0 .5em;
  border-radius: 0;
  outline: none;
  display: inline-block;
  transition: background-color .25s;
  border: 1px solid #bababa; }
  input[type="text"]:focus {
    box-shadow: 0 0 0px 1px #9dcbf8; }

.input-clipboard {
  width: 100%; }
  .input-clipboard input[type="text"] {
    width: 180px;
    padding-right: 0;
    margin-right: 0;
    border-right: none;
    border-radius: 0;
    text-overflow: ellipsis; }
  .input-clipboard .button-shareUrl {
    border-radius: 20px 0 0 20px;
    margin: 0;
    padding: 0;
    width: 38px;
    min-width: 38px;
    max-width: 38px; }
  .input-clipboard .icon-clipboard {
    border-radius: 0 20px 20px 0;
    width: 38px;
    margin: 0;
    padding: 0;
    display: inline-block; }

/* SELECT */
select {
  max-width: 160px;
  -webkit-appearance: none;
  background: url("data:image/svg+xml;utf8, <svg version='1.1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 18 18' enable-background='new 0 0 18 18' xml:space='preserve'><path fill='#434343' d='M10.4,13l2.6-3H8L10.4,13z M10.6,5L8,8h5L10.6,5z'/></svg>") right no-repeat, linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%);
  background-size: 18px, auto;
  border: 1px solid #939393;
  border-radius: 2px;
  box-shadow: 0 1px rgba(255, 255, 255, 0.4);
  height: 22px;
  font-size: 13px;
  line-height: 1em;
  padding: 0px 20px 0 7px;
  outline: none; }

/* RANGE */
.range,
.psstyle-range {
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-clip: padding-box;
  vertical-align: top;
  outline: 0;
  -webkit-appearance: none; }

.range__thumb--webkit,
.psstyle-range::-webkit-slider-thumb {
  cursor: default;
  -webkit-appearance: none; }

.range:disabled,
.psstyle-range:disabled {
  opacity: .3;
  cursor: default; }

.psstyle-range {
  border-radius: 4px;
  border: 1px solid #808080;
  background-color: #454646;
  background-image: -webkit-linear-gradient(90deg, #bebebe 30%, #b0b0b0 60%, #a2a2a2 70%);
  height: 5px;
  border-radius: 15px; }

.psstyle-range::-webkit-slider-thumb {
  margin: 11px 0 0 0;
  height: 10px;
  width: 11px;
  background: -webkit-linear-gradient(90deg, #c2c2c2 10%, #f2f2f2 86%);
  border: 1px solid #828282;
  border-radius: 0 20px 20px 20px;
  display: block;
  position: relative;
  box-shadow: inset -1px -1px rgba(0, 0, 0, 0.12), inset 1px 1px rgba(255, 255, 255, 0.8);
  -webkit-transform: rotate(45deg); }

.psstyle-range:focus::-webkit-slider-thumb {
  border: 1px solid #0036ff;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.36), 0 0 0 2px #6fb5f1; }

.psstyle-range:active::-webkit-slider-thumb {
  border: 1px solid #333434;
  box-shadow: inset 0 1px #737373; }

/* Button */
button {
  min-width: 81px;
  height: 22px;
  background: linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%);
  margin: 0 0px 0 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  border: 1px solid #939393;
  border-radius: 2px;
  font-size: 13px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  opacity: 1;
  color: #444;
  padding: 0 12px;
  margin: 0 10px 0 0;
  line-height: normal;
  box-sizing: border-box;
  outline: none;
  cursor: default; }
  button:focus {
    box-shadow: 0 0 0px 1px #9dcbf8; }

button:active,
button.active:active {
  color: #000000;
  font-weight: 300;
  background: linear-gradient(0deg, #a3a3a3 0%, #a3a3a3 98%, #989898 100%);
  opacity: 1; }

button:disabled, button:disabled.active, button:disabled:active {
  color: #444444;
  border: 1px solid #939393;
  opacity: 0.7;
  box-shadow: none;
  font-weight: normal;
  background: linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%);
  pointer-events: none; }

button.active {
  font-weight: 300;
  color: #000000;
  background: linear-gradient(0deg, #eaeaea 0%, #ffffff 100%);
  border: 1px solid #7c7c7c;
  box-shadow: 0px 0px 0 1px #7c7c7c;
  opacity: 1;
  position: relative;
  white-space: nowrap; }

button.reset-button {
  min-width: 60px;
  text-align: center; }
  button.reset-button:disabled {
    opacity: 0.3; }

label.hide,
button.hide {
  display: none; }

/* Button Bar */
.button-bar {
  list-style: none;
  display: inline-block;
  width: 100%; }
  .button-bar button {
    border-radius: 0;
    /*border-left: 1px solid $ps-border-light;*/
    border-left: none;
    border-right: none;
    margin: 0;
    padding: 0 5px;
    width: 20%;
    min-width: 0;
    max-width: 100%;
    box-shadow: 0 1px 1px 0 rgba(255, 255, 255, 0.45); }
    .button-bar button:first-child {
      border-radius: 2px 0 0 2px;
      border-left: 1px solid #7c7c7c; }
    .button-bar button:last-child {
      border-radius: 0 2px 2px 0;
      border-right: 1px solid #7c7c7c;
      padding-right: 2px; }
  .button-bar button.selected {
    color: white;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    line-height: 25px;
    background: #7c7c7c;
    border-top: none;
    border-right: 1px solid #7c7c7c;
    border-bottom: none;
    border-left: 1px solid #7c7c7c; }
    .button-bar button.selected:first-child {
      border-left: none; }
    .button-bar button.selected:last-child {
      border-right: none; }
  .button-bar button.on {
    color: #000;
    background: none;
    /*border-top:none;*/
    border-right: 1px solid #7c7c7c;
    /*border-bottom:none;*/
    border-left: 1px solid #7c7c7c;
    cursor: default;
    text-shadow: none; }
    .button-bar button.on:first-child {
      /*border-left:none;*/ }
    .button-bar button.on:last-child {
      border-right: none; }

.toggle-bar {
  display: inline-block; }
  .toggle-bar button {
    font-size: 11px;
    text-align: center;
    height: 20px;
    margin: 0;
    padding: 0 5px;
    min-width: 0;
    max-width: 100%;
    margin-right: 4px;
    border-radius: 2px;
    border: 1px solid #7c7c7c;
    position: relative; }
    .toggle-bar button:last-child {
      margin-right: 0px; }
    .toggle-bar button.selected {
      color: white;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
      border-color: rgba(0, 0, 0, 0.25);
      background: #848484;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25) inset; }

.popover-detail {
  opacity: 0;
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 240px;
  max-height: 0;
  padding: 0;
  background: #dcdcdc;
  border-radius: 2px;
  z-index: 9999999;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  transition: .1s opacity; }
  .popover-detail:before {
    content: "";
    position: absolute;
    top: 24px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #7c7c7c;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }
  .popover-detail.active {
    opacity: 1;
    max-height: 1000px;
    padding: 28px 12px 10px 12px; }
  .popover-detail p {
    display: inline-block;
    line-height: 19px;
    margin: 0px 0 0 0;
    width: auto; }
  .popover-detail li {
    padding: 3px 0px 0 0px;
    height: 23px; }
  .popover-detail ul.checklist li {
    padding: 3px 10px 0 30px; }
  .popover-detail li:last-child {
    box-shadow: none; }
  .popover-detail li.selected {
    background-color: #B5D5FF;
    box-shadow: 0 1px 0 #f0f0f0, 0 -1px 0 #f0f0f0; }
  .popover-detail .close {
    opacity: 1;
    display: inline-block;
    font-size: 15px;
    font-weight: bolder;
    font-family: 'AdobeCleanUI-Bold';
    text-align: center;
    line-height: 20px;
    color: #454545;
    width: 20px;
    height: 20px;
    margin: 0px 0 0 0;
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: default;
    transition: .1s opacity; }

/* Checkbox */
input[type=checkbox] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 14px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 14px;
  opacity: 0.001; }

.checkbox {
  position: relative;
  display: inline-block;
  line-height: 14px;
  height: 14px;
  margin-right: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.checkbox__checkmark {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px;
  margin-right: 19px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default; }

/* Background */
.checkbox__checkmark:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background: linear-gradient(0deg, #e9e9e9 0%, #fefefe 100%);
  border: 1px solid #7c7c7c;
  border-radius: 2px;
  cursor: default; }

/* Checkmark */
.checkbox__checkmark:after {
  opacity: 0;
  content: '';
  position: absolute;
  margin: 1px 0 0 3px;
  /* Length of check tail */
  width: 10px;
  /* Lenght of check foot */
  height: 3.5px;
  background: transparent;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-50deg);
  transform: rotate(-50deg);
  transition: opacity .03s; }

:checked + .checkbox__checkmark:after {
  opacity: 1; }

:active + .checkbox__checkmark:before {
  background: linear-gradient(0deg, #a3a3a3 0%, #a3a3a3 98%, #989898 100%); }

label.checkbox.disabled {
  opacity: 1;
  cursor: default; }
  label.checkbox.disabled .checkbox {
    opacity: 1; }
  label.checkbox.disabled .checkbox__checkmark {
    opacity: 0.5; }

/* simple override while sharing the same genable settings */
.dialog-settings.lists .options.active {
  transition: all .15s;
  max-height: 480px;
  overflow: auto; }
.dialog-settings.lists .layer .disclosure-arrow {
  display: none; }
.dialog-settings.lists .layer .close {
  display: none; }
.dialog-settings.lists .layer.selected {
  background-color: transparent; }
  .dialog-settings.lists .layer.selected + .options {
    background-color: transparent; }
.dialog-settings.lists .layer.subselected {
  background-color: transparent; }
  .dialog-settings.lists .layer.subselected + .options {
    background-color: transparent; }

/* simple override while sharing the same genable settings */
.dialog-assets.lists {
  height: 100%;
  border: 1px solid #7c7c7c; }
  .dialog-assets.lists .asset {
    border-bottom: 1px solid #7c7c7c; }
  .dialog-assets.lists .options.active {
    transition: all .15s;
    max-height: 480px;
    overflow: auto; }
  .dialog-assets.lists .layer .disclosure-arrow {
    display: none; }
  .dialog-assets.lists .layer .close {
    display: none; }
  .dialog-assets.lists .box {
    height: 100%; }

.panel {
  background-color: #454545; }
  .panel .container {
    height: calc(100% - 32px);
    margin-top: 10px; }
  .panel .footer {
    height: 22px;
    margin: 5px 0 0 0; }

/*# sourceMappingURL=styles.css.map */
