/*    
    For Light Theme ( B1 )
*/
@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, #fafafa;
  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 #b2b2b2;
  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;
}

html, body {
  height: 100%;
  width: 100%;
}

body {
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-flex-direction: column;
  flex-direction: column;
  min-width: 100vh;
  min-height: 100vh;
  padding: 5px;
  padding-top: 9px;
}

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-flex: 1 100%;
  flex: 1 100%;
  width: 100%;
  min-width: 100%;
  height: calc(100% - 42px);
  min-height: calc(100% - 42px);
}

.assets-column {
  -webkit-flex: 0 0 248px;
  flex: 0 0 248px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-flex-flow: column;
  flex-flow: column;
  width: 248px;
  padding: 5px;
  margin-top: -7px;
}

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar-track {
  background: #e3e3e3;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: #bdbdbd;
  border: 2px solid #e3e3e3;
}

.preview {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  width: calc(100% - 496px);
  min-width: calc(100% - 496px);
  height: 100%;
  padding: 5px;
}

.settings-column {
  -webkit-flex: 0 0 248px;
  flex: 0 0 248px;
  width: 248px;
  height: 100%;
  padding: 5px;
  margin-top: -7px;
  padding-bottom: 0;
}

footer {
  -webkit-flex: 1 1 100%;
  flex: 1 1 100%;
  width: 100%;
  min-width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 5px;
  padding-top: 8px;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
  -webkit-align-items: center;
}

.tips {
  position: relative;
  text-decoration: none;
}
.tips:after {
  position: absolute;
  left: 10px;
  z-index: 100;
  opacity: 0;
  content: attr(aria-label);
  line-height: 14px;
  padding: 6px;
  font-size: 12px;
  color: #000;
  background-color: #fefefe;
  border: 1px solid #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  height: 0px;
  width: 200px;
  display: block;
  pointer-events: none;
  text-align: left;
  box-sizing: border-box;
}
.tips.active:hover:after {
  opacity: 1;
  height: auto;
}

.rounding-tip {
  bottom: 15px;
  left: 100px;
}
.rounding-tip:after {
  left: -170px;
  bottom: 16px;
}

.export-alert-tip {
  position: absolute;
  left: 245px;
  top: 0;
  z-index: 200;
  opacity: 1;
  line-height: 14px;
  padding: 6px;
  font-size: 12px;
  color: #000;
  background-color: #fefefe;
  border: 1px solid #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  height: auto;
  width: 240px;
  pointer-events: none;
  text-align: left;
  box-sizing: border-box;
}
.export-alert-tip.hide {
  display: none;
}

/*    
    Lists
*/
.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 #b2b2b2;
  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: #f0f0f0;
  box-shadow: 0 -1px 0 #9e9e9e, 0 -2px 0 #fff;
}
.lists .top-bar {
  top: 0px;
  height: 34px;
  box-shadow: 0 1px #f0f0f0, 0 -1px #b2b2b2 inset;
  text-align: left;
  position: absolute;
  width: 100%;
  padding: 4px 6px 0 12px;
  background: #f0f0f0;
}
.lists .top-bar p {
  font-size: 11px;
  color: #4b4b4b;
  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, #fafafa;
}
.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 fill='#303030' 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 d='M3.3,6h8.3V4.3H3.3V6z'/><path d='M8.3,9.3V1H6.7v8.3H8.3z'/></g></svg>") no-repeat center, #fafafa;
  border-left: 1px solid #b2b2b2;
  width: 15%;
}
.lists .layer {
  padding: 6px;
  position: relative;
  white-space: nowrap;
  transition: .15s;
  border-color: transparent;
  border-width: 1px;
  border-style: solid;
}
.lists .layer.selected {
  background-color: #bfbfbf;
}
.lists .layer.selected + .options {
  background-color: #bfbfbf;
}
.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 fill='#303030' 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 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 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 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.selected .asset .layer {
  background-color: #bfbfbf;
}
.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 fill='#303030' 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 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 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 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 .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 #b2b2b2;
  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: 39px;
  width: calc(100% - 39px);
  height: 40px;
  padding: 3px 7px;
}
.lists .layer .info section {
  line-height: 1.5em;
  margin-bottom: 0.3em;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row nowrap;
  flex-flow: row nowrap;
  -webkit-justify-content: space-between;
}
.lists .layer .info section.lighttext {
  opacity: 0.6;
  font-size: 1em;
}
.lists .layer .non-exportable-alert.hide {
  display: none;
}
.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, .lists .layer .filesize {
  min-width: 25px;
  padding-right: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #4b4b4b;
}
.lists .layer .title:last-child, .lists .layer .fileformat:last-child, .lists .layer .dimensions:last-child, .lists .layer .filesize:last-child {
  padding-right: 0px;
}
.lists .layer .fileformat {
  text-transform: uppercase;
}
.lists .layer .filesize {
  max-width: 35%;
}
.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, #fafafa;
  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: 'AdobeClean-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 .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>"), #fafafa;
}
.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% - 16px);
}
.lists .scale-editable-combobox select {
  width: calc(100% - 6px);
  position: absolute;
  right: 2px;
  top: -4px;
  /* 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, 83px);
  border: none;
  background-color: transparent;
}
.lists .options {
  transition: all .15s;
  max-height: 480px;
  font-size: 10px;
  /* If you are updating this, please consider moving all of these to a forms.scss,
   * So that this file is just for lists.
   */
}
.lists .options.active {
  max-height: 0px;
  border-bottom: none;
  overflow: hidden;
}
.lists .options .row {
  padding: 4px;
}
.lists .options .option-section:last-child {
  margin-bottom: 0px;
}
.lists .options .option-section .scale {
  -webkit-flex-basis: 40px;
  flex-basis: 40px;
}
.lists .options .option-section .proportion-col {
  -webkit-flex-basis: 25px;
  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: 1px solid #d1d1d1;
  margin: 0 0 10px 0;
  padding: 5px 0;
}
.lists .options fieldset:last-child {
  margin-bottom: 0;
}
.lists .options fieldset legend {
  font-weight: 500;
  padding: 0 4px 5px 5px;
  margin-left: 10px;
}
.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 .column-auto-hand .box.fill-width,
.lists .options fieldset .column-1-hand .box.fill-width, .lists .options fieldset .column-2-hand .box.fill-width, .lists .options fieldset .column-3-hand .box.fill-width, .lists .options fieldset .column-4-hand .box.fill-width,
.lists .options fieldset .column-5-hand .box.fill-width, .lists .options fieldset .column-6-hand .box.fill-width, .lists .options fieldset .column-7-hand .box.fill-width, .lists .options fieldset .column-8-hand .box.fill-width,
.lists .options fieldset .column-9-hand .box.fill-width, .lists .options fieldset .column-10-hand .box.fill-width, .lists .options fieldset .column-11-hand .box.fill-width, .lists .options fieldset .column-12-hand .box.fill-width,
.lists .options fieldset .offset-1-hand .box.fill-width, .lists .options fieldset .offset-2-hand .box.fill-width, .lists .options fieldset .offset-3-hand .box.fill-width, .lists .options fieldset .offset-4-hand .box.fill-width,
.lists .options fieldset .offset-5-hand .box.fill-width, .lists .options fieldset .offset-6-hand .box.fill-width, .lists .options fieldset .offset-7-hand .box.fill-width, .lists .options fieldset .offset-8-hand .box.fill-width,
.lists .options fieldset .offset-9-hand .box.fill-width, .lists .options fieldset .offset-10-hand .box.fill-width, .lists .options fieldset .offset-11-hand .box.fill-width, .lists .options fieldset .offset-12-hand .box.fill-width {
  width: 100%;
  padding-right: 5px;
}
.lists .options fieldset.file-format {
  min-height: 120px;
  padding-bottom: 0;
}
.lists .options fieldset.file-format .transparency-row.hide, .lists .options fieldset.file-format .smaller-file-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 .transparency-row .svg-warning-label, .lists .options fieldset.file-format .smaller-file-row .svg-warning-label, .lists .options fieldset.file-format .quality-row .svg-warning-label, .lists .options fieldset.file-format .svg-warning-row .svg-warning-label {
  line-height: 16px;
}
.lists .options fieldset.file-format .smaller-file-row {
  padding-bottom: 0;
}
.lists .options fieldset.file-format label.checkbox.disabled {
  opacity: 0.5;
}
.lists .options fieldset.file-format label.smaller-file {
  padding-left: 23px;
  text-indent: -23px;
}
.lists .options fieldset.image-size .rounding-warning-box {
  position: relative;
  width: 0px;
  height: 0px;
}
.lists .options fieldset.image-size .width-rounding-tip.hide,
.lists .options fieldset.image-size .height-rounding-tip.hide {
  display: none;
}
.lists .options fieldset.metadata.hide {
  display: none;
}
.lists .options fieldset.metadata .metadata-box {
  width: calc(248px - 30px);
  margin: -5px 0;
  line-height: 150%;
}
.lists .options fieldset.metadata label.metadata {
  display: block;
  margin: 5px;
}
.lists .options fieldset.metadata .metadata-radio {
  vertical-align: text-top;
}
.lists .options fieldset.colorspace.hide {
  display: none;
}
.lists .options fieldset.colorspace .colorspace-box {
  width: calc(248px - 30px);
  margin: -5px 0;
  line-height: 150%;
}
.lists .options fieldset.colorspace label {
  display: block;
  margin: 5px;
}
.lists .options fieldset.colorspace label.hide {
  display: none;
}
.lists .options fieldset.colorspace input.hide {
  display: none;
}
.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 -18px 0 0;
  line-height: normal;
}
.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 fill='#787878' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='11' height='4' viewBox='0 0 11 4'><polygon points='3.5,4 0.3,0.8 1,0.1 3.5,2.6 6,0 6.7,0.8 '/></svg>") no-repeat 5px 4px;
  background-size: 11px 4px;
  cursor: default;
}
.lists .options .input-select .percentage-range {
  position: absolute;
  top: 20px;
  right: -20px;
  width: 150px;
  height: 27px;
  padding: 12px 12px 20px 12px;
  background: #f0f0f0;
  border: 1px solid #b2b2b2;
  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 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 .no-layer {
  color: #4b4b4b;
  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: #f0f0f0;
  color: #4b4b4b;
  text-shadow: 0 1px #b2b2b2;
  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 #b2b2b2 inset;
}
.lists .ps-selected-layers .icon-added-items {
  color: #4b4b4b;
  text-align: center;
  line-height: 12px;
  border: 1px solid #b2b2b2;
  padding: 3px 0 0 0;
  margin: 0 6px 0 0;
  width: 30px;
  display: inline-block;
  border-radius: 2px;
  text-shadow: 0 1px #b2b2b2;
  background: rgba(255, 255, 255, 0.12);
}
.lists .ps-selected-layers span {
  color: #4b4b4b;
  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: 'AdobeClean-Bold';
  color: #4b4b4b;
  top: 2px;
  right: 0px;
  width: 20px;
  height: 20px;
  text-shadow: 0 1px #b2b2b2;
  cursor: default;
}

input[type="text"]::-webkit-input-placeholder {
  color: #b6b6b6;
}

input:focus::-webkit-input-placeholder {
  color: transparent;
}

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

/* 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 #bfbfbf;
  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;
  }
}
/* 


ELEMENTS 


*/
/* LABEL */
.label {
  color: #606060;
}

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

/*   INPUT TEXT     */
input[type="text"] {
  text-overflow: ellipsis;
  max-width: 115px;
}

.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;
}

/* RANGE */
.range,
.psstyle-range {
  /* SELECT */
  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 select,
.psstyle-range select {
  max-width: 160px;
}

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

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

.psstyle-range {
  background-color: #cccccc;
  height: 3px;
}

.psstyle-range::-webkit-slider-thumb {
  margin: 0;
  height: 12px;
  width: 12px;
  background: 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 12 12' enable-background='new 0 0 12 12' xml:space='preserve'><g><path fill='#F0F0F0' d='M1.9,11.5c-0.1,0-0.3,0-0.5-0.1c-0.2-0.2-0.3-0.5-0.3-0.9c0-1.3,0-2.4,0-2.7L6,0.9l4.9,6.9v2.8 c0,0.2,0,0.6-0.2,0.8c-0.1,0.1-0.3,0.2-0.6,0.2L1.9,11.5z'/><path fill='#585858' d='M6,1.7l4.4,6.2v2.6l0,0.1c0,0,0,0.3-0.1,0.4c0,0-0.1,0.1-0.3,0.1H2l-0.1,0c-0.1,0-0.3,0-0.3-0.5 c0-1.1,0-2.1,0-2.6L6,1.7 M6,0L0.6,7.6c0,0,0,1.2,0,2.9c0,1.4,1,1.5,1.3,1.5C2,12,2,12,2,12s6.5,0,8,0s1.4-1.5,1.4-1.5V7.6L6,0L6,0 z'/></g></svg>");
  border: none;
  display: block;
  position: relative;
}

.select-interpolation {
  width: 100%;
}

/* Button */
button:active,
button.active:active {
  opacity: 1;
}

button:disabled, button:disabled.active, button:disabled:active {
  pointer-events: none;
}

button.active {
  white-space: nowrap;
}

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

.cancel-button, extract-button {
  margin: 0 10px 0 0 !important;
}

/* Button Bar */
.button-bar {
  list-style: none;
  display: inline-block;
  width: 100%;
}
.button-bar button {
  border-radius: 0;
  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 #b2b2b2;
}
.button-bar button:last-child {
  border-radius: 0 2px 2px 0;
  border-right: 1px solid #b2b2b2;
  padding-right: 2px;
}
.button-bar button.selected {
  color: white;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  line-height: 25px;
  background: #b2b2b2;
  border-top: none;
  border-right: 1px solid #b2b2b2;
  border-bottom: none;
  border-left: 1px solid #b2b2b2;
}
.button-bar button.selected:first-child {
  border-left: none;
}
.button-bar button.selected:last-child {
  border-right: none;
}
.button-bar button.on {
  color: #4b4b4b;
  background: none;
  /*border-top:none;*/
  border-right: 1px solid #b2b2b2;
  /*border-bottom:none;*/
  border-left: 1px solid #b2b2b2;
  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 #b2b2b2;
  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: #f0f0f0;
  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: #f0f0f0;
  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: #b2b2b2;
  box-shadow: 0 1px 0 #f0f0f0;
}
.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: #bfbfbf;
  box-shadow: 0 1px 0 #d1d1d1, 0 -1px 0 #d1d1d1;
}
.popover-detail .close {
  opacity: 1;
  display: inline-block;
  font-size: 15px;
  font-weight: bolder;
  font-family: 'AdobeClean-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;
}

.checkbox__checkmark {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  -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: #fafafa;
  border: 1px solid #b2b2b2;
  border-radius: 2px;
  cursor: default;
}

/* Checkmark */
:checked + .checkbox__checkmark:after {
  opacity: 1;
  content: '';
  position: absolute;
  margin: 1px 0 0 3px;
  /* Length of check tail */
  width: 10px;
  /* Length 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;
}

/* Indeterminate State */
:indeterminate + .checkbox__checkmark:after {
  opacity: 1;
  content: '';
  position: absolute;
  margin: 6px 0 0 3px;
  /* Length of dash */
  width: 6px;
  /* Height of dash is border width */
  height: 0px;
  background: transparent;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transition: opacity .03s;
}

:active + .checkbox__checkmark:before {
  background: #fafafa;
}

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

/* Radio */
input[type=radio] {
  border: 0;
  clip: rect(0 0 0 0);
  height: 14px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 14px;
  opacity: 0.001;
  margin: 3px 5px 0 0px;
  line-height: 23px;
}

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

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

/* Background */
.radiobutton__checkmark:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background: #fafafa;
  border: 1px solid #b2b2b2;
  border-radius: 50%;
  box-shadow: 0 1px 0 #d1d1d1;
  cursor: pointer;
}

/* Check */
:checked + .radiobutton__checkmark:after {
  opacity: 1;
}

:checked + .radiobutton__checkmark:after {
  content: '';
  position: absolute;
  margin: 4px 0 0 4px;
  width: 6px;
  height: 6px;
  background: #676767;
  box-shadow: 0 2px 1px #383838 inset, 0 2px 0 #FFF;
  border-top: none;
  border-right: none;
  border-radius: 50%;
  transition: opacity .03s;
}

/* Indeterminate State */
:indeterminate + .radiobutton__checkmark:after {
  opacity: 1;
  content: '';
  position: absolute;
  margin: 4px 0 0 4px;
  width: 6px;
  height: 6px;
  background: transparent;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  border-radius: 50%;
  transition: opacity .03s;
}

:active + .radiobutton__checkmark,
:active + .radiobutton__checkmark:before {
  background: #fafafa;
}

:disabled + .radiobutton__checkmark:before {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.settings-column {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;
  flex-flow: column nowrap;
}
.settings-column .dialog-settings {
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
}
.settings-column .help {
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.dialog-settings {
  overflow-x: hidden;
  overflow-y: auto;
}
.dialog-settings.lists .options.active {
  transition: all .15s;
  max-height: calc(585px);
  overflow: visible;
}
.dialog-settings.lists .layer.selected {
  background-color: transparent;
}
.dialog-settings.lists .layer.selected + .options {
  background-color: transparent;
}
.dialog-settings.lists .loading input[name="width"], .dialog-settings.lists .loading input[name="height"],
.dialog-settings.lists .loading input[name="canvasWidth"]::-webkit-input-placeholder, .dialog-settings.lists .loading input[name="canvasHeight"]::-webkit-input-placeholder {
  font-style: italic;
}

/* simple override while sharing the same genable settings */
.dialog-assets {
  -webkit-flex: 1 1 60%;
  flex: 1 1 60%;
  min-height: 60%;
  overflow-y: auto;
  overflow-x: hidden;
}
.dialog-assets.lists {
  border: 1px solid #d1d1d1;
}
.dialog-assets.lists .asset {
  border-bottom: 1px solid #d1d1d1;
}
.dialog-assets.lists .options.active {
  transition: all .15s;
  max-height: calc(585px);
  overflow: visible;
}
.dialog-assets.lists .box {
  height: 100%;
}

.preview-list li {
  overflow: hidden;
}

.asset-sizes fieldset {
  border: 1px solid #d1d1d1;
  padding-right: 0;
  margin: 0 0 10px 0;
}
.asset-sizes fieldset legend {
  font-weight: 500;
  padding: 0 4px 5px 5px;
  margin-left: 2px;
}
.asset-sizes .export-size-row {
  padding: 10px 0 5px 12px;
}
.asset-sizes div.add-size {
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml;utf8, <svg fill='#303030' 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 d='M3.3,6h8.3V4.3H3.3V6z'/><path d='M8.3,9.3V1H6.7v8.3H8.3z'/></g></svg>") no-repeat center;
  cursor: pointer;
}
.asset-sizes .export-size-list {
  min-height: 27px;
  /* leave space for 1 row even if we don't know it's value yet */
  max-height: 162px;
  /* Accommodate 6 rows (6 * 27) before showing up scrollbars. */
  overflow-y: auto;
  overflow-x: hidden;
}

.asset-size {
  padding: 6px 0 6px 12px;
}
.asset-size div.remove-size {
  width: 15px;
  height: 15px;
  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 15 15' enable-background='new 0 0 15 15' xml:space='preserve' stroke='#303030' ><g opacity='0.57'><path fill='none' stroke-miterlimit='10' d='M13.1,5.4h-1.4 M3.7,5.4H2.2 M3.7,5.4v7.7c0,0.7,0.6,1.3,1.3,1.3h5.3 c0.8,0,1.4-0.6,1.4-1.4V5.4H3.7z'/><path fill='none' stroke-miterlimit='10' d='M5.6,5.4V4.2c0,0-0.2-0.8,0.8-0.8s2.5,0,2.5,0s0.7,0.1,0.7,0.7 s0,1.2,0,1.2L5.6,5.4L5.6,5.4z'/><line fill='none' stroke-miterlimit='10' x1='5.6' y1='7' x2='5.6' y2='12.9'/><line fill='none' stroke-miterlimit='10' x1='7.6' y1='7' x2='7.6' y2='12.9'/><line fill='none' stroke-miterlimit='10' x1='9.7' y1='7' x2='9.7' y2='12.9'/></g></svg>") no-repeat center;
  cursor: pointer;
}
.asset-size .export-size-combobox {
  position: relative;
}
.asset-size .export-size-combobox input[type="text"] {
  position: relative;
  z-index: 1;
  width: calc(100% - 18px);
}
.asset-size .export-size-combobox select {
  width: calc(100% - 6px);
  position: absolute;
  right: 5px;
  top: -8px;
  /* 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, 46px);
  border: none;
  background-color: transparent;
  z-index: 4;
  border-bottom: 1px solid #adadad;
  border-radius: 0;
}
.asset-size .export-size-suffix input {
  width: 80px;
}

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

        Main Tags

*/
* {
  font-family: "San Francisco", "Helvetica Neue", "Lucida Grande", "Segoe UI";
  font-weight: normal;
  font-size: 12px;
  color: #4b4b4b;
  -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: #f0f0f0;
  overflow: hidden;
}

a {
  color: #4b4b4b;
  text-decoration: none;
}

h1 {
  font-size: 2em;
  font-weight: 900;
  text-transform: lowercase;
  text-rendering: geometricPrecision;
  color: #4b4b4b;
  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 #b2b2b2;
}

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

*/
.preview {
  transition: .1s;
}
.preview .preview-img, .preview .preview-img-pixel-zoom, .preview .svg-preview-object, .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 .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 {
  background-color: #939393;
  border: 1px solid #d1d1d1;
  height: 100%;
  width: 100%;
}
.preview .canvas-frame .antiscroll-inner {
  min-width: 100%;
  min-height: 100%;
}
.preview .canvas-centering-container {
  min-height: 100%;
  min-width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.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 #b2b2b2;
  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;
  outline-color: #939393;
  outline-style: solid;
  outline-width: 10000px;
}

.zoom-overlay {
  background: #dbdbdb;
  border-radius: 2px;
  padding: 5px;
  position: absolute;
  left: calc(50% - 120px / 2);
  bottom: 15px;
  width: 120px;
  height: 21px;
  z-index: 999;
  text-align: right;
}
.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'><g fill='#808080'><path 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' /><rect x='0' y='10' height='1' width='11' /></g></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'><g fill='#393939'><path 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' /><rect x='0' y='10' height='1' width='11' /></g></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: #f0f0f0;
}
.zoom-overlay .zoom-overlay-level {
  left: 50px;
  width: 49px;
  color: #393939;
  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;
  cursor: default;
}
.zoom-overlay .zoom-overlay-in {
  right: 10px;
  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'><path fill='#393939' d='M5.5,0C2.4,0,0,2.4,0,5.5S2.4,11,5.5,11C8.5,11,11,8.5,11,5.5S8.5,0,5.5,0z M9.1,5.9H6.1V9H5V5.9H2V4.8h3.1 v-3h1.1v3.1h3.1C9.1,4.9,9.1,5.9,9.1,5.9z'/></svg>");
}
.zoom-overlay .zoom-overlay-out {
  left: 39px;
  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'><path fill='#393939' d='M5.5,0C2.4,0,0,2.4,0,5.5S2.4,11,5.5,11C8.5,11,11,8.5,11,5.5S8.5,0,5.5,0z M9.1,5.9H2V4.8h7.1 C9.1,4.8,9.1,5.9,9.1,5.9z'/></svg>");
}

.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;
  padding-bottom: 10px;
  color: #222222;
}

.help {
  padding-top: 5px;
}

.help-text {
  color: #606060;
}
.help-text a {
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
}

.icon-warning {
  width: 11px;
  height: 14px;
  background: url("data:image/svg+xml;utf8, <svg fill='#303030' 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 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 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 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;
}

.icon-alert {
  width: 14px;
  height: 14px;
  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='2 -2 18 18' enable-background='new 2 -2 18 18' xml:space='preserve'> <path fill='#FDC63D' d='M10,4h2v6h-2V4z M10,11h2v2h-2V11z M10.2,0L3,15h16L11.7,0H10.2z'/> <rect x='10' y='4' width='2' height='6'/> <rect x='10' y='11' width='2' height='2'/></svg>") no-repeat;
  transition: .2s opacity;
}

.nowrap {
  white-space: nowrap;
}

.file-size-overlay-container {
  display: -webkit-flex;
  display: flex;
  font-size: 11px;
  line-height: 1.2em;
  max-width: 300px;
  min-width: 300px;
  transition: 0.1s opacity;
  opacity: 1;
  position: absolute;
  padding-top: 8px;
}
.file-size-overlay-container.hide {
  opacity: 0;
}
.file-size-overlay-container > div {
  padding: 0 .2em;
  flex-shrink: 0;
}
.file-size-overlay-container .preview-file-name {
  min-width: 10px;
  max-width: 250px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.file-size-overlay-container .preview-loading-spinner {
  transition: opacity .25s 0.5s;
  opacity: 0;
}
.file-size-overlay-container .preview-loading-spinner svg {
  width: 12px;
  height: 12px;
}
.file-size-overlay-container.loading .preview-loading-spinner {
  opacity: 1;
  transition-delay: 0s;
}

.scrubbable {
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAABQVBMVEUAAAD///////////////////////////////////////////8AAAAAAAD///+enp4AAAD///////8AAAD///////8AAAD////8/PxZWVlISEjS0tLv7+8AAABLS0sYGBiKioonJyeSkpIAAAAAAAAAAADAwMCSkpJiYmIVFRUAAAC1tbXz8/Obm5t8fHwaGhrk5OTm5uZubm4TExN4eHgWFhbq6uo/Pz8UFBT5+fmTk5MAAAA5OTn6+vrKysoSEhKCgoIAAAC5ubk3NzcODg4AAAD////5+fn8/Pzy8vL9/f339/fx8fHs7Ozl5eX4+Pjr6+vh4eHe3t76+vrz8/Pf39/b29vX19fu7u7n5+fg4ODZ2dnU1NT7+/vq6uri4uLw8PDPz8/c3NzT09PLy8v+/v719fXj4+Pa2trR0dHIyMh3sOZFAAAARXRSTlMAKrN+KwJOupFNqZU2v5KbzE952TiJGyDz5eOZzbHZqezS2JZ7o87R57YO4trX7J3p59/b7Lb02c/24inW9fW23VLd49ss/FKyAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAQ5JREFUGNNVjudWwkAUhK/EQICEFggSBQvYYsNesKHuoEJio4hi777/A7hZwRznz979zr0zQ0R9Pom6knz97iP7A0zpMYUF/DJRMMRYmEjVNJUozFgoSBRhgmnRaEwwFiGKJwTTAV2wRJz7JVOun8tUQ2GppOwapyWeqw9Az5iDUpo86UPIANncsPGPjQCjlbG8+BbGC4IBxxMnk1PTFpFhYiZrxGaB02rNnnPmeU9aKGJxaZmvndXOnYvLFZdZq0VgDbiq206j2VoXKcbGJt9C9bp9c9vZUn9DS9s7wF39/qHZ2d3rNSnlgMpju9F62i//1Ssf8FPn+eX1UPU6m2/v9sfn1/eR5bG83hWffwCUYC32Vgj5MwAAAABJRU5ErkJggg=="), auto;
}

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