*{
  -ms-overflow-style:-ms-autohiding-scrollbar;
  box-sizing:border-box;
  scrollbar-width:none;
  #thx-launcher{ display:none !important; }
}
html{
  background:#1b1b1f !important;
  height:100%;
}

body{
  margin:0 !important;
  padding:0 !important;
}

:root{
  --background:#1b1b1f;
  --background-blend-mode:overlay;
  --background-size:cover;
  --text-color:#fff;
  --text-color-inactive:#676767;
  --background-color-section:#000;
  --background-color-area:#47474700;
  --background-color-header:#30303000;
  --background-color-button:#252525;
  --background-color-button-inactive:#26262b;
  --background-color-dialog:#26262b;
  --background-color-input:#49078300;
  --background-color-input-border-active:#7e0ae5;
  --background-color-menu:#000;
  --background-color-menu-hovered:#4d4d4d;
  --background-color-menu-selected:grey;
  --text-color-menu:#fff;
  --accent-color:#7e0ae5;
  --background-color-active:#7e0ae5;
  --background-color-hover:#e91bfa;
  --background-color-hover-button:#898989;
  --border-color:#b3b3b3;
  --TOP_NAV_HEIGHT:65px;
  --mint-button-bg-unselected:url(images/Mint1-Deselect.png);
  --mint-button-bg-selected:url(images/Mint1-Selected.png);
}

:root,body.theme-dark{
  background-color:#424f5a;
  background:var(--background);
  background-blend-mode:var(--background-blend-mode);
  color:var(--text-color);
  font-family:Roboto,Arial,Helvetica,sans-serif;
}

body.theme-dark{
  --background:#1b1b1f;
  --background-blend-mode:overlay;
  --background-size:cover;
  --text-color:#fff;
  --text-color-inactive:#676767;
  --background-color-section:#000;
  --background-color-area:#47474700;
  --background-color-header:#30303000;
  --background-color-button:#252525;
  --background-color-button-inactive:#26262b;
  --background-color-dialog:#26262b;
  --background-color-input:#49078300;
  --background-color-input-border-active:#7e0ae5;
  --background-color-menu:#000;
  --background-color-menu-hovered:#4d4d4d;
  --background-color-menu-selected:grey;
  --text-color-menu:#fff;
  --accent-color:#7e0ae5;
  --background-color-active:#7e0ae5;
  --background-color-hover:#e91bfa;
  --background-color-hover-button:#898989;
  --border-color:#999;
  --TOP_NAV_HEIGHT:65px;
  --mint-button-bg-unselected:url(images/Mint1-Deselect.png);
  --mint-button-bg-selected:url(images/Mint1-Selected.png);
}
body.theme-l2{
  --background:#1b1b1f;
  --background-blend-mode:overlay;
  --background-size:cover;
  --text-color:#fff;
  --text-color-inactive:#676767;
  --background-color-section:#000;
  --background-color-area:#47474700;
  --background-color-header:#30303000;
  --background-color-button:#252525;
  --background-color-button-inactive:#26262b;
  --background-color-dialog:#26262b;
  --background-color-input:#49078300;
  --background-color-input-border-active:#e91bfa;
  --background-color-menu:#000;
  --background-color-menu-hovered:#4d4d4d;
  --background-color-menu-selected:grey;
  --text-color-menu:#fff;
  --background-color-active:#1cd3cf;
  --accent-color:#1cd3cf;
  --background-color-hover:#e91bfa;
  --background-color-hover-button:#898989;
  --border-color:#999;
  --TOP_NAV_HEIGHT:65px;
  --mint-button-bg-unselected:url(images/Mint2-Deselect.png);
  --mint-button-bg-selected:url(images/Mint2-Selected.png);
}

body.theme-evolv3,body.theme-l2{
  background-color:#424f5a;
  background:var(--background);
  background-blend-mode:var(--background-blend-mode);
  color:var(--text-color);
  font-family:Roboto,Arial,Helvetica,sans-serif;
}

body.theme-evolv3{
  --background:#1b1b1f;
  --background-blend-mode:overlay;
  --background-size:cover;
  --text-color:#fff;
  --text-color-inactive:#676767;
  --background-color-section:#000;
  --background-color-area:#47474700;
  --background-color-header:#30303000;
  --background-color-button:#252525;
  --background-color-button-inactive:#26262b;
  --background-color-dialog:#26262b;
  --background-color-input:#49078300;
  --background-color-input-border-active:#e91bfa;
  --background-color-menu:#000;
  --background-color-menu-hovered:#4d4d4d;
  --background-color-menu-selected:grey;
  --text-color-menu:#fff;
  --background-color-active:#e4ff1a;
  --accent-color:#e4ff1a;
  --background-color-hover:#e91bfa;
  --background-color-hover-button:#898989;
  --border-color:#999;
  --TOP_NAV_HEIGHT:65px;
  --mint-button-bg-unselected:url(images/Mint3-Deselect.png);
  --mint-button-bg-selected:url(images/Mint3-Selected.png);
}

.drawingContainer{
  bottom:0;
  color:#000;
  color:var(--text-color);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  font-weight:400;
  left:0;
  line-height:1.4;
  margin:0;
  overflow:hidden;
  padding:10px 0 0;
  position:fixed;
  right:0;
  top:var(--TOP_NAV_HEIGHT);
}
.drawingContainer>canvas{
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:rgba(255, 255, 255, 0);
  -ms-interpolation-mode:nearest-neighbor;
  image-rendering:optimizeSpeed;
  image-rendering:-moz-crisp-edges;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:-o-crisp-edges;
  image-rendering:pixelated;
  outline:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.drawingContainer>img{
  border:none;
}
.drawingContainer>td,th{
  vertical-align:top;
}
.drawingContainer>table{
  border:0;
  border-collapse:collapse;
  border-spacing:0;
  margin:0;
  padding:0;
  vertical-align:baseline;
  width:100%;
}
.drawingContainer>hr{
  border-color:rgba(0,0,0,.3);
  border-bottom:0;
}
.drawingContainer>input[type=button],.drawingContainer>input[type=number],.drawingContainer>input[type=text],.drawingContainer>select,.drawingContainer>textarea{
  border:1px solid #393939;
  border-color:var(--border-color);
  border-radius:4px;
  filter:hue-rotate(75deg);
  font-size:16px;
  padding:3px 5px;
}
.drawingContainer>input:disabled{
  opacity:.3;
}
.drawingContainer>select{
  padding:2px 4px;
}
.drawingContainer>input[type=range]{
  margin-left:0;
  width:100%;
}
.drawingContainer>input[type=button]{
  background:#252525;
}
.drawingContainer>input[type=button]:disabled{
  visibility:hidden;
}
.drawingContainer>button{
  background-color:var(--background-color-button);
  border-radius:3px;
  color:var(--color-text);
  cursor:pointer;
}
.drawingContainer>label{
  display:inline-block;
  margin-top:7px;
  vertical-align:top;
}
.drawingContainer>* ::-webkit-scrollbar{
  display:none !important;
}
.drawingContainer>* ::-webkit-scrollbar-track-piece{
  background:transparent !important;
}
.drawingContainer>* ::-webkit-scrollbar-thumb{
  display:none !important;
}

::-webkit-scrollbar-track{
  background-color:#1a1a1a;
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}

::-webkit-scrollbar{
  background-color:#f5f5f5;
  width:6px;
}

::-webkit-scrollbar-thumb{
  background-color:var(--accent-color);
  border:0;
}
@supports (zoom:2){
  input[type=checkbox],input[type=radio]{
    zoom:1.5;
    filter:hue-rotate(75deg);
  }
}
@supports not (zoom:2){
  input[type=checkbox],input[type=radio]{
    filter:hue-rotate(75deg);
    margin:8px;
    transform:scale(1.5);
  }
}

.wrapper{
  height:100%;
  margin-top:0;
  overflow:hidden;
  position:relative;
}
.trn{
  font-family:Roboto,Arial,Helvetica,sans-serif;
  font-weight:400;
}
.toggle{
  cursor:pointer;
}
.hidden{
  display:none;
}
.pointer{
  cursor:pointer;
}
.clear{
  clear:both;
}
.displayBlock{
  display:block;
}
.bold{
  font-weight:700;
}
.bold,.normal{
  font-family:Roboto,Arial,Helvetica,sans-serif;
}
.normal{
  font-weight:300;
}
.light{
  font-weight:200;
}
.light,.thin{
  font-family:Roboto,Arial,Helvetica,sans-serif;
}
.thin{
  font-weight:100;
}
.left{
  float:left;
}
.right{
  float:right;
}
.grey{
  color:grey;
}
.external{
  padding-right:15px;
}
.external:after{
  background:url(images/sprites.png) no-repeat -700px 0;
  content:"";
  height:10px;
  margin-left:5px;
  opacity:.3;
  position:absolute;
  width:10px;
}
.noselect{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}
.block,.noselect{
  user-select:none;
}
.block{
  background-color:hsla(0,0%,100%,.2);
  background-color:var(--background-color-area);
  border-radius:10px;
  margin-bottom:10px;
  position:relative;
}

.block:last-child{
  margin-bottom:0;
}
.block h2{
  font-size:1.3em;
  margin:0;
  padding-left:8px;
  padding-top:3px;
  position:relative;
}
.block h2.toggled:after,.block.toggled h2{
  border:none;
}
.block h2.toggle:before{
  border-color:transparent transparent #d5d5d5;
  border-style:solid;
  border-width:0 6px 8px;
  content:"";
  height:0;
  position:absolute;
  right:8px;
  top:12px;
  width:0;
}
.block h2.toggled:before{
  border-color:#d5d5d5 transparent transparent;
  border-width:8px 6px 0;
}
.block .content{
  padding:5px;
}
.error{
  background-color:#fff;
  border:1px solid red;
  font-weight:700;
  margin:10px;
  padding:20px;
  width:500px;
}
body .sp-replacer{
  height:40px;
  width:100%;
}
body .sp-preview{
  height:100%;
  width:calc(100% - 20px);
}

.logo{
  color:#fff;
  color:var(--text-color);
  display:inline-block;
  float:left;
  font-size:14px;
  font-weight:700;
  height:30px;
  margin:5px;
  padding:5px 5px 5px 36px;
  position:relative;
  text-decoration:none;
  width:75px;
}
.logo:after{
  content:"";
  height:30px;
  left:0;
  position:absolute;
  top:0;
  width:31px;
}
.about-logo{
  animation:shake .82s cubic-bezier(.36, .07, .19, .97);
  margin-left:22%;
}
.about-name{
  color:#650eb2;
  font-size:15px;
  font-weight:700;
}
@keyframes shake{
  10%,90%{
    transform:translate(2px);
  }
  20%,80%{
    transform:translate(5px);
  }
  30%,50%,70%{
    transform:translate(0);
  }
  40%,60%{
    transform:translate(6px);
  }
}

.submenu{
  background-color:hsla(0,0%,100%,0);
  height:40px;
  overflow:hidden;
}
.attributes{
  border:0;
  float:left;
  height:30px;
  margin-top:5px;
  padding:3px 10px 0;
  width:100%;
}
.attributes .item{
  display:inline-block;
  margin-right:12px;
}
.attributes input[type=number]{
  background-color:var(--background-color-input);
  color:var(--text-color);
  margin-right:5px;
  width:60px;
}
.attributes button{
  background-color:var(--background-color-button);
  border:1px solid #444;
  border-color:var(--border-color);
  border-radius:4px;
  color:var(--text-color);
  display:inline-block;
  font-weight:500;
  margin-right:5px;
  outline:none;
  padding:3px 10px;
  text-transform:uppercase;
}
.attributes button:hover{
  background-color:hsla(0,0%,100%,.3);
  background-color:var(--background-color-menu-hovered);
}
.attributes button.active{
  background-color:#419147;
  background-color:var(--background-color-menu-selected);
}

.sidebar_left{
  background-color:hsla(0,0%,100%,0);
  height:100%;
  left:0;
  overflow:auto;
  padding-bottom:5px;
  padding-left:4px;
  padding-right:2px;
  position:absolute;
  top:75px;
  width:100px;
}
.sidebar_left .item{
  background-color:#000;
  background-origin:content-box;
  background-position:50%;
  background-repeat:no-repeat;
  background-size:contain;
  border:1px solid var(--border-color);
  border-color:var(--border-color);
  border-radius:4px;
  cursor:pointer;
  display:inline-block;
  height:40px;
  margin:1px 3px 0;
  padding:5px;
  width:40px;
}
.sidebar_left .item:hover{
  background-color:hsla(0,0%,100%,.5);
  background-color:var(--background-color-menu-hovered);
}
.sidebar_left .item.active{
  background-color:#419147;
  background-color:var(--background-color-menu-selected);
}

.sidebar_left .select{
  background-image:url(images/mouse_icon.png);
}
.sidebar_left .selection{
  background-image:url(images/selection_icon.png);
}
.sidebar_left .magic_wand{
  background-image:url(images/magic_erase_icon.png);
}
.sidebar_left .brush{
  background-image:url(images/paint_brush_icon.png);
}
.sidebar_left .erase{
  background-image:url(images/erase_icon.png);
}
.sidebar_left .fill{
  background-image:url(images/paint_bucket_icon.png);
}
.sidebar_left .pick_color{
  background-image:url(images/eye_dropper_icon.png);
}
.sidebar_left .pencil{
  background-image:url(images/pencil_icon.png);
}
.sidebar_left .line{
  background-image:url(images/line_icon.png);
}
.sidebar_left .text{
  background-image:url(images/text_icon.png);
}
.sidebar_left .rectangle{
  background-image:url(images/square_icon.png);
}
.sidebar_left .circle{
  background-image:url(images/circle_icon.png);
}
.sidebar_left .blur{
  background-position:-41px 2px;
}
.sidebar_left .sharpen{
  background-position:6px -47px;
}
.sidebar_left .desaturate{
  background-position:-195px 3px;
}
.sidebar_left .bulge_pinch{
  background-position:-93px 5px;
}
.sidebar_left .clone{
  background-image:url(images/clone_stamp_icon.png);
}
.sidebar_left .palette256{
  background-image:url(images/palette_256_icon.png);
}
.sidebar_left .ai_image_generate{
  background-image:url(images/ai_icon.png);
}
.sidebar_left .divide_layer{
  background-image:url(images/split_image.png);
}
.sidebar_left .rasterize{
  background-image:url(images/rasterize_icon.png);
}
.sidebar_left .gradient{
  background-position:-243px 5px;
}
.sidebar_left .crop{
  background-position:-294px 3px;
}
.sidebar_left .animation{
  background-position:-244px -47px;
}
.sidebar_left .media{
  background-position:-145px -47px;
}

.sidebar_right{
  background-color:#000;
  background-color:var(--background-color);
  display:flex;
  flex-direction:column;
  height:calc(100% - 80px);
  overflow-y:auto;
  padding:5px 5px 10px;
  position:absolute;
  right:0;
  top:80px;
  transition:.2s;
  width:210px;
  z-index:2;
}
.sidebar_right.active{
  right:0 !important;
}
.sidebar_right .block.layers{
  flex:1;
}

.sidebar_right .block{
  background-color:#68727b;
  background-color:var(--background-color-section);
  border:1px solid var(--border-color);
  margin-left:0;
  padding-bottom:4px;
}
.canvas_preview_wrapper{
  height:94px;
  margin:0 5px 10px;
  position:relative;
  width:188px;
}
.canvas_preview_details{
  display:flex;
  flex-direction:column;
  padding:0 8px;
}
.preview canvas{
  cursor:pointer;
}
.preview_details{
  align-content:space-between;
  display:flex;
  justify-content:space-between;
}

.details input,.preview_details input{
  background-color:var(--background-color-input);
  color:var(--text-color);
  font-weight:500;
  padding:8px 10px;
  text-transform:uppercase;
}
.color_area{
  cursor:pointer;
  margin-left:5px;
  width:calc(100% - 10px);
}
.colors .content,.main_color_alt{
  margin-top:10px;
}
.main_color_alt{
  border:1px solid #393939;
  height:40px;
  width:100%;
}
.main_color_rgb{
  margin-top:10px;
}
.main_color_rgb div{
  display:inline-block;
  vertical-align:top;
  width:calc(50% - 3px);
}
.main_color_rgb span{
  width:16px;
}

.hex,.main_color_rgb span{
  display:inline-block;
  margin-left:3px;
}

.hex{
  width:35px;
}
.main_color_rgb input{
  background-color:var(--background-color-input);
  color:var(--text-color);
  width:61px;
}
.main_color_rgb .red{
  text-shadow:0 0 5px red;
}
.main_color_rgb .green{
  text-shadow:0 0 5px #0f0;
}
.main_color_rgb .blue{
  text-shadow:0 0 5px #00f;
}

.color_hex,.main_color_rgb .alpha{
  color:var(--text-color);
}

.color_hex{
  background-color:var(--background-color-input);
  width:calc(100% - 50px);
}
#all_colors{
  margin-top:10px;
  padding:3px 0 3px 3px;
}
.layers_list{
  margin-top:10px;
  padding-left:3px;
  padding-right:2px;
}
.layers_arrow{
  background-color:var(--background-color-button);
  border:1px solid var(--background-color-input-border-active);
  border-color:var(--border-color);
  border-radius:4px;
  float:right;
  font-size:12px;
  font-weight:500;
  margin-left:5px;
}
.layer_add,.layers_arrow{
  color:var(--text-color);
  display:inline-block;
  outline:none;
  padding:1px 8px;
  text-decoration:none;
}
.layer_add{
  background-color:#419147;
  background-color:var(--background-color-button);
  border:1px solid #444;
  border-color:var(--border-color);
  border-radius:4px;
  cursor:pointer;
}
.layers_list .item{
  border-bottom:.75em solid transparent;
  border-radius:3px;
  box-shadow:3px 11px 0 -10px var(--border-color);
  margin-bottom:4px;
  margin-left:-4px;
  margin-right:-4px;
}
.layers_list .layer_name{
  background-color:#6a6a6a;
  background-color:var(--background-color-area);
  color:var(--text-color);
  cursor:pointer;
  display:block;
  font-size:1em;
  height:auto;
  overflow:hidden;
  padding:0 3px 0 2px;

  white-space:nowrap;
}
.layers_list .item.active{
  background-color:var(--background-color-menu-selected);
  box-shadow:3px 11px 0 -10px var(--border-color), inset 0 0 6px 3px #00000000;
}
.layers_list .visibility{
  background:url(images/sprites.png) no-repeat -148px -99px;
  cursor:pointer;
  filter:drop-shadow(0 0 2px var(--text-color));
  float:left;
  height:19px;
  margin-right:5px;
  margin-top:2px;
  opacity:.4;
  padding:0 3px;
  width:20px;
}
.layers_list .visible{
  opacity:1;
}
.layers_list .delete{
  background:url(images/sprites.png) no-repeat -100px -96px;
  cursor:pointer;
  float:right;
  height:21px;
  margin-left:5px;
  margin-top:3px;
  padding:0 6px;
  width:16px;
}
.layers_list .filters{
  margin-bottom:5px;
}
.layers_list .filter{
  margin-bottom:2px;
  margin-left:30px;
  opacity:.7;
}
.layers_list .filter .layer_name{
  position:relative;
}
.layers_list .filter .layer_name:after{
  bottom:0;
  content:"fx";
  position:absolute;
  right:-4px;
  top:1px;
  width:20px;
}
.sidebar_right .label{
  display:inline-block;
  width:60px;
}
.info .toggle.toggled{
  margin-bottom:-3px;
}
.block.details .row{
  clear:both;
  margin-bottom:2px;
}
.block.details .rowflex{
  align-content:center;
  align-items:center;
  display:inline-flex;
  justify-content:center;
}

.block.details input{
  background-color:var(--background-color-input);
  color:var(--text-color);
  padding:3px 5px;
  width:70px;
}
.block.details select{
  height:23px;
  width:calc(100% - 70px);
}
.block.details button{
  border:1px solid #444;
  font-weight:500;
  height:23px;
  outline:none;
  text-transform:uppercase;
}
.block.details button.reset{
  background-image:url(images/sprites.png);
  background-position:-747px 2px;
  background-repeat:no-repeat;
  color:transparent;
  opacity:.3;
  overflow:hidden;
  width:25px;
}
.block.details button.active{
  background-color:var(--background-color-active);
}

@media screen and (max-width:700px){
  .sidebar_right{
    padding-left:420px;
    right:-210px;
    top:75px;
    z-index:-2 !important;
  }
  .sidebar_right.active{
    z-index:200 !important;
  }
  .sidebar_right .block{
    margin-left:-200px;
  }
}

.main_wrapper{
  align-items:center;
  display:flex;
  height:calc(100% - 85px);
  justify-content:center;
  margin-left:100px;
  margin-right:210px;
  overflow:hidden;
}
.canvas_wrapper{
  position:relative;
}
.canvas_wrapper canvas{
  border:1px solid var(--border-color);
  box-sizing:content-box;
  display:block;
  position:absolute;
}
#mouse{
  height:10px;
  pointer-events:none;
  position:absolute;
  width:10px;
  z-index:10;
}
#mouse.circle,#mouse.rect{
  border:1px solid rgba(0,0,0,.5);
}
#mouse.circle{
  border-radius:50%;
}
.transparent-grid{
  -ms-interpolation-mode:nearest-neighbor;
  background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAQElEQVQ4T2N89+7dfwYigKCgIBGqGBgYRw3EGU6jYYgzaIZAsvn//z9ROeX9+/fE5ZRRA3GG02gY4s4pgz7ZAAAnSWvHPkHXaAAAAABJRU5ErkJggg==") repeat 0 0;
  height:100%;
  image-rendering:optimizeSpeed;
  image-rendering:-moz-crisp-edges;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:-o-crisp-edges;
  image-rendering:pixelated;
  pointer-events:none;
  position:absolute;
  width:100%;
  z-index:1;
}
.transparent-grid.white{
  background:#fff;
}
.transparent-grid.green{
  background:#5be471;
}
.transparent-grid.grey{
  background:#dfdfdf;
}
canvas{
  position:relative;
  z-index:2;
}
#canvas_back{
  background-color:#fff;
  outline:none;
  position:absolute;
}
#canvas_grid{
  pointer-events:none;
}
.group{
  border:1px solid #999;
  margin:5px 0;
  padding:5px 8px;
}
.flex-container{
  display:flex;
  flex-wrap:wrap;
}
.flex-container .item{
  flex:auto;
  margin:2px 0;
  width:150px;
}
.flex-container .item:empty{
  border:none;
  height:0;
}
.alertify-notifier{
  color:#000;
}

.murall_button_container{
  align-content:stretch;
  align-items:stretch;
  background-image:var(--mint-button-bg-unselected);
  background-position:50%;
  background-repeat:no-repeat;
  cursor:pointer;
  display:inline-flex;
  height:65px;
  justify-content:center;
  outline:0;
  padding:8px;
  position:absolute;
  text-align:center;
  width:200px;
  z-index:190;
}

.murall_button_container img{
  flex:1;
  object-fit:cover;
}

.murall_button_container:hover{
  background-image:var(--mint-button-bg-selected);
}

.write_murall{
  background-image:url(images/upload_icon.svg);
}
.read_murall,.write_murall{
  background-position:50%;
  background-repeat:no-repeat;
  background-size:contain;
}
.read_murall{
  background-image:url(images/download_icon.svg);
}

@media screen and (min-width:700px){
  .murall_button_container{
    right:5px;
    top:12px;
  }
}

@media handheld and (orientation:landscape){
  body.theme-dark{
    --TOP_NAV_HEIGHT:65px;
  }
}
@media handheld and (orientation:portrait){
  body.theme-dark{
    --TOP_NAV_HEIGHT:65px;
  }
}

@media screen and (max-width:700px){
  body.theme-dark{
    --TOP_NAV_HEIGHT:65px;
  }
  .sidebar_left{
    height:calc(100% - 75px);
    overflow-y:auto;
    padding:4px 2px 0;
    width:50px;
  }
  .attributes{
    overflow-x:auto;
    white-space:nowrap;
  }
  .sidebar_left .item{
    display:inline-block;
    margin:1px 3px 0;
    width:40px;
  }
  .main_wrapper{
    margin-left:52px;
    margin-right:7px;
  }
  .murall_button_container{
    bottom:12px;
    left:50px;
    right:50px;
    width:calc(100% - 100px);
  }
}
@media screen and (max-width:550px){
  .canvas_wrapper{
    margin-left:0;
  }
}
.pixelated-image{
  -ms-interpolation-mode:nearest-neighbor;
  image-rendering:pixelated;
  image-rendering:-o-crisp-edges;
  image-rendering:-moz-crisp-edges;
  image-rendering:crisp-edges;
}

.murall_loader{
  animation:play 1.5s steps(18) infinite;
  background:url(images/murall_loading_sprites.png) 0;
  height:256px;
  left:50%;
  margin:-128px 0 0 -128px;
  position:absolute;
  top:50%;
  width:256px;
}

@keyframes play{
  to{
    background-position:-4608px;
  }
}

.loader{
  animation:spin 2s linear infinite;
  border-top:12px solid var(--background-color-hover);
  border:12px solid var(--background-color-hover);
  border-radius:50%;
  border-top-color:var(--background-color-input-border-active);
  height:100px;
  left:50%;
  position:absolute;
  top:50%;
  width:100px;
}

@keyframes spin{
  0%{
    transform:rotate(0deg);
  }
  to{
    transform:rotate(1turn);
  }
}

#progressBar{
  background-color:#f3f3f3;
  width:100%;
}

#currentProgress{
  background-color:#ed1e79;
  color:var(--text-color);
  height:30px;
  line-height:30px;
  text-align:center;
  width:1%;
}

.canvascontainer{
  position:relative;
}

.canvascontainer>canvas{
  left:0;
  position:absolute;
  top:0;
}

.material_input{
  -webkit-appearance:none;
  background-color:var(--background-color-input);
  border:0;
  border-bottom:1px solid #ccc;
  border-radius:0;
  color:var(--text-color);
  cursor:text;
  font-family:inherit;
  font-size:1em;
  padding:0;
  touch-action:manipulation;
  transition:all .2s;
}

.material_input:focus{
  border-bottom:1px solid var(--background-color-input-border-active);
  outline:0;
}

.tooltip{
  border-bottom:1px dotted #000;
  display:inline-block;
  position:relative;
}
.tooltip .tooltiptext{
  background-color:var(--background-color-active);
  border-radius:6px;
  bottom:100%;
  color:var(--text-color);
  left:50%;
  margin-left:-40px;
  min-width:180px;
  opacity:0;
  padding:8px;
  position:absolute;
  text-align:center;
  transition:opacity 1s;
  visibility:hidden;
  z-index:1;
}

.width-limiter{
  margin:0 auto;
  max-width:1500px;
}

.tooltip .tooltiptext:after{
  border-color:var(--background-color-active) transparent transparent transparent;
  border-style:solid;
  border-width:8px;
  content:" ";
  left:50%;
  margin-left:-8px;
  position:absolute;
  top:100%;
}
.tooltip:hover .tooltiptext{
  opacity:1;
  visibility:visible;
}

.slanted{
  -webkit-clip-path:polygon(0 0, 100% 15%, 100% 95%, 0 100%);
  clip-path:polygon(0 0, 100% 15%, 100% 95%, 0 100%);
}

.slanted-end{
  -webkit-clip-path:polygon(0 0, 100% 15%, 100% 100%, 0 100%);
  clip-path:polygon(0 0, 100% 15%, 100% 100%, 0 100%);
}

.slanted-top{
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 95%, 0 100%);
  clip-path:polygon(0 0, 100% 0, 100% 95%, 0 100%);
}
@keyframes textShadow{
  0%{
    text-shadow:.4389924193300864px 0 1px rgba(0,30,255,.5), -.4389924193300864px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  5%{
    text-shadow:2.7928974010788217px 0 1px rgba(0,30,255,.5), -2.7928974010788217px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  10%{
    text-shadow:.02956275843481219px 0 1px rgba(0,30,255,.5), -.02956275843481219px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  15%{
    text-shadow:.40218538552878136px 0 1px rgba(0,30,255,.5), -.40218538552878136px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  20%{
    text-shadow:3.4794037899852017px 0 1px rgba(0,30,255,.5), -3.4794037899852017px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  25%{
    text-shadow:1.6125630401149584px 0 1px rgba(0,30,255,.5), -1.6125630401149584px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  30%{
    text-shadow:.7015590085143956px 0 1px rgba(0,30,255,.5), -.7015590085143956px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  35%{
    text-shadow:3.896914047650351px 0 1px rgba(0,30,255,.5), -3.896914047650351px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  40%{
    text-shadow:3.870905614848819px 0 1px rgba(0,30,255,.5), -3.870905614848819px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  45%{
    text-shadow:2.231056963361899px 0 1px rgba(0,30,255,.5), -2.231056963361899px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  50%{
    text-shadow:.08084290417898504px 0 1px rgba(0,30,255,.5), -.08084290417898504px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  55%{
    text-shadow:2.3758461067427543px 0 1px rgba(0,30,255,.5), -2.3758461067427543px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  60%{
    text-shadow:2.202193051050636px 0 1px rgba(0,30,255,.5), -2.202193051050636px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  65%{
    text-shadow:2.8638780614874975px 0 1px rgba(0,30,255,.5), -2.8638780614874975px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  70%{
    text-shadow:.48874025155497314px 0 1px rgba(0,30,255,.5), -.48874025155497314px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  75%{
    text-shadow:1.8948491305757957px 0 1px rgba(0,30,255,.5), -1.8948491305757957px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  80%{
    text-shadow:.0833037308038857px 0 1px rgba(0,30,255,.5), -.0833037308038857px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  85%{
    text-shadow:.09769827255241735px 0 1px rgba(0,30,255,.5), -.09769827255241735px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  90%{
    text-shadow:3.443339761481782px 0 1px rgba(0,30,255,.5), -3.443339761481782px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  95%{
    text-shadow:2.1841838852799786px 0 1px rgba(0,30,255,.5), -2.1841838852799786px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
  to{
    text-shadow:2.6208764473832513px 0 1px rgba(0,30,255,.5), -2.6208764473832513px 0 1px rgba(255,0,80,.3), 0 0 3px;
  }
}
.crt:after{
  animation:flicker .15s infinite;
  background:hsla(0,6%,7%,.1);
  opacity:0;
}
.crt:after,.crt:before{
  bottom:0;
  content:" ";
  display:block;
  left:0;
  pointer-events:none;
  position:absolute;
  right:0;
  top:0;
  z-index:2;
}
.crt:before{
  background:linear-gradient(hsla(0,6%,7%,0) 50%, rgba(0,0,0,.25) 0), linear-gradient(
      90deg,
      rgba(255,0,0,.06),
      rgba(0,255,0,.02),
      rgba(0,0,255,.06)
    );
  background-repeat:repeat;
  background-size:100% 2px, 3px 100%;
}
.crt,.crt-text{
  animation:textShadow 1.6s infinite;
}

@keyframes refresh{
  0%{
    bottom:100%;
    display:block;
  }
  70%{
    bottom:100%;
  }

  to{
    bottom:0;
    display:none;
  }
}
.refresh{
  animation:refresh 8s linear infinite;
  animation-delay:0s;
  animation-direction:normal;
  animation-duration:8s;
  animation-iteration-count:infinite;
  animation-name:refresh;
  animation-play-state:running;
  animation-timing-function:linear;
  background:linear-gradient(
    0deg,
    transparent,
    hsla(0,0%,100%,.4) 10%,
    rgba(0,0,0,.1)
  );
  bottom:0;
  float:left;
  height:100px;
  opacity:.1;
  z-index:8;
}

.grain-img:after,.refresh{
  overflow:hidden;
  position:absolute;
  width:200%;
}

.grain-img:after{
  animation:grain 1.5s steps(6) infinite;
  background-image:url(data:image/png;base64,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);
  content:"";
  height:200%;
  left:-50%;
  top:-50%;
}
.grain-img{
  z-index:-1;
}

.flicker-fast{
  animation:flicker 1s linear infinite;
}

@keyframes grain{
  0%,to{
    transform:translate(0);
  }
  10%{
    transform:translate(-5%, -10%);
  }
  30%{
    transform:translate(3%, -15%);
  }
  50%{
    transform:translate(12%, 9%);
  }
  70%{
    transform:translate(9%, 4%);
  }
  90%{
    transform:translate(-1%, 7%);
  }
}

@keyframes flicker{
  0%,19.999%,22%,62.999%,64%,64.999%,70%,to{
    opacity:.99;
  }
  20%,21.999%,63%,63.999%,65%,69.999%{
    opacity:.4;
  }
}

.mobile_menu{
  display:none;
  position:absolute;
  top:0;
  width:100%;
}
.left_mobile_menu,.right_mobile_menu{
  background:url(images/menuicon.svg) no-repeat;
  background-size:contain;
  border:0;
  cursor:pointer;
  display:block;
  height:40px;
  outline:0;
  position:absolute;
  top:5px;
  width:40px;
  z-index:200;
}
.left_mobile_menu{
  left:0;
}
.right_mobile_menu{
  right:10px;
}

.ddsmoothmenu{
  background:#2d2d2d00;
  display:inline-block;
  font:16px Roboto,Arial,sans-serif;
  left:0;
  padding-left:10px;
  position:relative;
  top:0;
  width:100%;
  z-index:100;
}
.ddsmoothmenu ul{
  height:30px;
  list-style-type:none;
  margin:0;
  padding:0;
  z-index:100;
}
.ddsmoothmenu ul li{
  color:var(--text-color-menu);
  display:inline-block;
  float:left;
  height:100%;
  position:relative;
}
.ddsmoothmenu ul ul li a{
  width:100%;
}
.ddsmoothmenu .rightarrowclass{
  display:none !important;
}
.ddsmoothmenu ul li a{
  color:#ccc;
  color:var(--text-color-menu);
  display:inline-block;
  padding:7px 10px 8px !important;
  text-align:center;
  text-decoration:none;
}
.ddsmoothmenu ul ul li a{
  padding-right:25px !important;
}
.ddsmoothmenu ul li a.selected{
  color:var(--text-color);
}
.ddsmoothmenu ul li a.selected,.ddsmoothmenu ul li ul li a.selected{
  background-color:var(--background-color-menu-selected) !important;
}
.ddsmoothmenu ul li a:hover{
  background-color:var(--background-color-menu-hovered);
  color:var(--text-color);
}
.ddsmoothmenu .hide_ul,.ddsmoothmenu ul li ul{
  border:1px solid #5680c1;
  border-top:0;
  display:none;
  left:-3000px;
  position:absolute;
  visibility:hidden;
}
.ddsmoothmenu ul li ul{
  height:auto;
  margin-left:-1px;
  min-width:140px;
  top:30px !important;
  width:auto !important;
}
.ddsmoothmenu ul li ul li{
  background:var(--background-color-menu);
  color:var(--text-color);
  display:list-item;
  float:none;
  height:auto;
  width:100%;
}
.ddsmoothmenu ul li ul li a{
  text-align:left;
}
.ddsmoothmenu ul li ul li ul{
  border-top:1px solid #5680c1;
  top:0;
}
.ddsmoothmenu ul li ul li a{
  color:var(--text-color);
  margin:0;
  padding-left:5px;
  padding-right:5px;
  white-space:nowrap;
}
.ddsmoothmenu ul li ul li ul{
  top:0 !important;
}
.ddsmoothmenu .downarrowclass{
  position:absolute;
  right:7px;
  top:12px;
}
.ddsmoothmenu .ddshadow{
  background-color:#ccc;
  height:0;
  left:0;
  position:absolute;
  top:0;
  width:0;
}
.ddsmoothmenu .mid-line{
  background-color:red;
  border-top:1px solid #e5e5e5;
  font-size:0;
  padding:0 8px;
}
.ddsmoothmenu ul li ul li.more>a{
  position:relative;
}
.ddsmoothmenu ul li ul li.more>a:before{
  color:var(--text-color);
  content:">";
  height:14px;
  position:absolute;
  right:9px;
  transform:scaleY(2);
  width:5px;
}
.ddsmoothmenu ul li ul li ul{
  left:calc(100% + 1px) !important;
}
.ddsmoothmenu .dots:after{
  content:" ...";
}
.ddsmoothmenu a[data-key]:after{
  color:#aaa;
  content:attr(data-key) " ";
  font-size:12px;
  margin-left:8px;
  position:absolute;
  right:10px;
}

@media screen and (max-width:700px){
  .mobile_menu{
    display:block;
  }
  .left_mobile_menu{
    display:none;
  }
  .ddsmoothmenu{
    height:30px;
  }
  .ddsmoothmenu ul{
    height:30px;
    width:calc(100% - 50px);
  }
  .ddsmoothmenu>ul>li>a{
    height:30px;
    padding-top:5px !important;
  }
  .ddsmoothmenu ul li ul{
    top:30px !important;
  }
  .ddsmoothmenu ul li ul li{
    height:auto;
  }
  .ddsmoothmenu ul li ul li a{
    height:30px;
  }
}
@media screen and (max-width:550px){
  .ddsmoothmenu{
    padding-left:0;
  }
  .ddsmoothmenu ul{
    width:calc(100% - 50px);
  }
  .ddsmoothmenu>ul>li{
    width:14.28571%;
  }
  .ddsmoothmenu>ul>li>a{
    overflow:hidden;
    padding-left:3px !important;
    padding-right:3px !important;
    width:100%;
  }
}
input[type=range]::-webkit-slider-thumb{
  background:var(--background-color-hover);
}
input[type=range]::-ms-thumb{
  background:rgba(233,27,250,.93);
}

input[type=range]{
  -webkit-appearance:none;
  background-color:transparent;
  margin:4px 0;
  width:100%;
}
input[type=range]:focus{
  outline:none;
}
input[type=range]::-webkit-slider-runnable-track{
  background:var(--background-color-hover);
  border:0;
  cursor:pointer;
  height:4px;
  width:100%;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  background:rgba(233,27,250,.93);
  border:0;
  border-radius:6px;
  cursor:pointer;
  height:12px;
  margin-top:-4px;
  width:12px;
}
input[type=range]:focus::-webkit-slider-runnable-track{
  background:#f37ffc;
}
input[type=range]::-moz-range-track{
  background:var(--background-color-hover);
  border:0;
  cursor:pointer;
  height:4px;
  width:100%;
}
input[type=range]::-moz-range-thumb{
  background:var(--background-color-hover);
  border:0;
  border-radius:6px;
  cursor:pointer;
  height:12px;
  width:12px;
}
input[type=range]::-ms-track{
  background:transparent;
  border-color:transparent;
  border-width:4px 0;
  color:transparent;
  cursor:pointer;
  height:4px;
  width:100%;
}
input[type=range]::-ms-fill-lower{
  background:#9e04ab;
  border:0;
}
input[type=range]::-ms-fill-upper,input[type=range]::-ms-thumb{
  background:var(--background-color-hover);
  border:0;
}
input[type=range]::-ms-thumb{
  border-radius:6px;
  cursor:pointer;
  height:12px;
  margin-top:0;
  width:12px;
}
input[type=range]:focus::-ms-fill-lower{
  background:var(--background-color-hover);
}
input[type=range]:focus::-ms-fill-upper{
  background:#f37ffc;
}
@supports (-ms-ime-align:auto){
  input[type=range]{
    margin:0;
  }
}

input[type=range].vVertical{
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  transform:rotate(-90deg);
  z-index:0;
}

#popup{
  background-color:#7a838b;
  background-color:var(--background-color-dialog);
  border:1px solid rgba(0,0,0,.5);
  border:1px solid var(--border-color);
  border-radius:10px;
  box-shadow:0 8px 16px 0 rgba(0,0,0,.6);
  display:none;
  font-family:Roboto,Arial,Helvetica,sans-serif;
  font-size:16px;
  left:calc(50% - 250px);
  margin:0 auto;
  max-height:80%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  padding:16px 24px;
  position:absolute;
  top:20%;
  width:500px;
  z-index:200;
}
#popup.wide{
  left:calc(50% - 400px);
  top:15%;
  width:800px;
}
#popup a{
  color:var(--text-color);
}
#popup h2{
  background-color:hsla(0,0%,100%,.3);
  background-color:var(--background-color-header);
  font-size:1.3em;
  margin:-10px -10px 5px;
  padding:6px 10px;
}
#popup .buttons{
  margin-bottom:5px;
  margin-top:20px;
  outline:none;
  text-align:right;
}
#popup .close{
  background:none;
  border:none;
  color:var(--text-color);
  float:right;
  font-family:Roboto,Arial,Helvetica,sans-serif;
  font-size:1.3em;
  font-weight:300;
  line-height:.5;
  margin-left:10px;
  min-width:0;
  outline:none;
  padding:5px;
}
#popup td,#popup th{
  height:25px;
}
#popup td{
  vertical-align:middle;
}
#popup th{
  padding:5px 5px 5px 0;
  text-align:left;
  width:130px;
}
#popup textarea{
  background-color:var(--background-color-button);
  border:1px solid #393939;
  color:var(--text-color);
  padding-left:5px;
  width:100%;
}
#popup .button{
  background-color:transparent;
  border:0 solid rgba(0,0,0,.5);
  border:0 solid var(--border-color);
  border-radius:4px;
  color:var(--text-color);
  font-weight:500;
  margin:0 3px;
  min-width:60px;
  outline:none;
  padding:5px 10px;
  text-transform:uppercase;
}
#popup input[type=number],#popup input[type=text],#popup textarea{
  outline:none;
  width:100%;
}
#popup input[type=number]{
  width:100px;
}
#popup input[type=checkbox],#popup input[type=radio]{
  margin-left:0;
  outline:none;
}
#popup label span{
  color:#444;
}
#popup .checkbox label{
  color:#444;
  margin-top:5px;
}
@media screen and (max-width:500px){
  #popup{
    left:0;
    width:100%;
  }
  #canvas_preview_container{
    clear:both;
  }
}
@media screen and (max-height:650px){
  #popup{
    max-height:100%;
    top:0;
  }
  #canvas_preview_container{
    clear:both;
  }
}

.sp-container{
    *zoom:1;
    display:inline-block;
    *display:inline;
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    z-index:9999994;
}
.sp-container.sp-flat{
    position:relative;
}
.sp-container,.sp-container *{
    -webkit-box-sizing:content-box;
       -moz-box-sizing:content-box;
            box-sizing:content-box;
}
.sp-top{
  display:inline-block;
  position:relative;
  width:100%;
}
.sp-top-inner{
   right:0;
}
.sp-color,.sp-top-inner{
   bottom:0;
   left:0;
   position:absolute;
   top:0;
}
.sp-color{
    right:20%;
}
.sp-hue{
    bottom:0;
    height:100%;
    left:84%;
    position:absolute;
    right:0;
    top:0;
}

.sp-clear-enabled .sp-hue{
    height:77.5%;
    top:33px;
}

.sp-fill{
    padding-top:80%;
}
.sp-sat,.sp-val{
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    top:0;
}

.sp-alpha-enabled .sp-top{
    margin-bottom:18px;
}
.sp-alpha-enabled .sp-alpha{
    display:block;
}
.sp-alpha-handle{
    background:#fff;
    border:1px solid #000;
    bottom:-4px;
    cursor:pointer;
    left:50%;
    opacity:.8;
    position:absolute;
    top:-4px;
    width:6px;
}
.sp-alpha{
    bottom:-14px;
    display:none;
    height:8px;
    left:0;
    position:absolute;
    right:0;
}
.sp-alpha-inner{
    border:1px solid #333;
}

.sp-clear{
    display:none;
}

.sp-clear.sp-clear-display{
    background-position:50%;
}

.sp-clear-enabled .sp-clear{
    bottom:0;
    display:block;
    height:28px;
    left:84%;
    position:absolute;
    right:0;
    top:0;
}
.sp-alpha,.sp-alpha-handle,.sp-clear,.sp-container,.sp-container button,.sp-container.sp-dragging .sp-input,.sp-dragger,.sp-preview,.sp-replacer,.sp-slider{
    -webkit-user-select:none;
    -moz-user-select:-moz-none;
    -o-user-select:none;
    user-select:none;
}

.sp-container.sp-buttons-disabled .sp-button-container,.sp-container.sp-input-disabled .sp-input-container,.sp-container.sp-palette-buttons-disabled .sp-palette-button-container,.sp-initial-disabled .sp-initial,.sp-palette-disabled .sp-palette-container,.sp-palette-only .sp-picker-container{
    display:none;
}
.sp-sat{
    background-image:-webkit-gradient(linear,  0 0, 100% 0, from(#fff), to(hsla(20,42%,65%,0)));
    background-image:-webkit-linear-gradient(left, #fff, hsla(20,42%,65%,0));
    background-image:-moz-linear-gradient(left, #fff, hsla(20,42%,65%,0));
    background-image:-o-linear-gradient(left, #fff, hsla(20,42%,65%,0));
    background-image:-ms-linear-gradient(left, #fff, hsla(20,42%,65%,0));
    background-image:linear-gradient(90deg, #fff, hsla(20,42%,65%,0));
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr="#FFFFFFFF", endColorstr="#00CC9A81");
}
.sp-val{
    background-image:-webkit-gradient(linear, 0 100%, 0 0, from(#000), to(hsla(20,42%,65%,0)));
    background-image:-webkit-linear-gradient(bottom, #000, hsla(20,42%,65%,0));
    background-image:-moz-linear-gradient(bottom, #000, hsla(20,42%,65%,0));
    background-image:-o-linear-gradient(bottom, #000, hsla(20,42%,65%,0));
    background-image:-ms-linear-gradient(bottom, #000, hsla(20,42%,65%,0));
    background-image:linear-gradient(0deg, #000, hsla(20,42%,65%,0));
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00CC9A81", endColorstr="#FF000000");
}

.sp-hue{
    background:-moz-linear-gradient(top, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
    background:-ms-linear-gradient(top, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
    background:-o-linear-gradient(top, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%);
    background:-webkit-gradient(linear, left top, left bottom, from(red), color-stop(.17, #ff0), color-stop(.33, #0f0), color-stop(.5, #0ff), color-stop(.67, #00f), color-stop(.83, #f0f), to(red));
    background:-webkit-linear-gradient(top, red, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
    background:linear-gradient(180deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
}
.sp-1{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff0000", endColorstr="#ffff00");
    height:17%;
}
.sp-2{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffff00", endColorstr="#00ff00");
    height:16%;
}
.sp-3{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ff00", endColorstr="#00ffff");
}
.sp-3,.sp-4{
    height:17%;
}
.sp-4{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffff", endColorstr="#0000ff");
}
.sp-5{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0000ff", endColorstr="#ff00ff");
    height:16%;
}
.sp-6{
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff00ff", endColorstr="#ff0000");
    height:17%;
}

.sp-hidden{
    display:none !important;
}
.sp-cf:after,.sp-cf:before{ content:""; display:table; }
.sp-cf:after{ clear:both; }
.sp-cf{ *zoom:1; }
@media (max-device-width:480px){
    .sp-color{ right:40%; }
    .sp-hue{ left:63%; }
    .sp-fill{ padding-top:60%; }
}
.sp-dragger{
   background:#000;
   border:1px solid #fff;
   border-radius:5px;
   height:5px;
   left:0;
   width:5px;
}
.sp-dragger,.sp-slider{
   cursor:pointer;
   position:absolute;
   top:0;
}
.sp-slider{
    background:#fff;
    border:1px solid #000;
    height:3px;
    left:-1px;
    opacity:.8;
    right:-1px;
}

.sp-container{
    background-color:#ececec;
    border:1px solid #f0c49b;
    border-radius:0;
    padding:0;
}
.sp-clear,.sp-color,.sp-container,.sp-container button,.sp-container input,.sp-hue{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    font:normal 12px Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Verdana,sans-serif;
}
.sp-top{
    margin-bottom:3px;
}
.sp-clear,.sp-color,.sp-hue{
    border:1px solid #666;
}
.sp-input-container{
    float:right;
    margin-bottom:4px;
    width:100px;
}
.sp-initial-disabled .sp-input-container,.sp-input{
    width:100%;
}
.sp-input{
   background:transparent;
   border:1px inset;
   border-radius:3px;
   color:#222;
   font-size:12px !important;
   margin:0;
   padding:4px 5px;
}
.sp-input:focus{
    border:1px solid orange;
}
.sp-input.sp-validation-error{
    background:#fdd;
    border:1px solid red;
}
.sp-palette-container,.sp-picker-container{
    float:left;
    margin-bottom:-290px;
    padding:10px 10px 300px;
    position:relative;
}
.sp-picker-container{
    border-left:1px solid #fff;
    width:172px;
}
.sp-palette-container{
    border-right:1px solid #ccc;
}

.sp-palette-only .sp-palette-container{
    border:0;
}

.sp-palette .sp-thumb-el{
    border:2px solid transparent;
    cursor:pointer;
    display:block;
    float:left;
    height:15px;
    margin:3px;
    position:relative;
    width:24px;
}
.sp-palette .sp-thumb-el.sp-thumb-active,.sp-palette .sp-thumb-el:hover{
    border-color:orange;
}
.sp-thumb-el{
    position:relative;
}
.sp-initial{
    border:1px solid #333;
    float:left;
}
.sp-initial span{
    border:none;
    display:block;
    float:left;
    height:25px;
    margin:0;
    width:30px;
}

.sp-initial .sp-clear-display{
    background-position:50%;
}
.sp-button-container,.sp-palette-button-container{
    float:right;
}
.sp-replacer{
    *zoom:1;
    background:#eee;
    border:1px solid #91765d;
    color:#333;
    cursor:pointer;
    display:inline-block;
    *display:inline;
    margin:0;
    overflow:hidden;
    padding:4px;
    vertical-align:middle;
}
.sp-replacer.sp-active,.sp-replacer:hover{
    border-color:#f0c49b;
    color:#111;
}
.sp-replacer.sp-disabled{
    border-color:silver;
    color:silver;
    cursor:default;
}
.sp-dd{
    float:left;
    font-size:10px;
    height:16px;
    line-height:16px;
    padding:2px 0;
}
.sp-preview{
    border:1px solid #222;
    float:left;
    height:20px;
    margin-right:5px;
    position:relative;
    width:25px;
    z-index:0;
}

.sp-palette{
    max-width:220px;
    *width:220px;
}
.sp-palette .sp-thumb-el{
    border:1px solid #d0d0d0;
    height:16px;
    margin:2px 1px;
    width:16px;
}

.sp-container{
    padding-bottom:0;
}
.sp-container button{
  background-color:#eee;
  background-image:-webkit-linear-gradient(top, #eee, #ccc);
  background-image:-moz-linear-gradient(top, #eee, #ccc);
  background-image:-ms-linear-gradient(top, #eee, #ccc);
  background-image:-o-linear-gradient(top, #eee, #ccc);
  background-image:linear-gradient(180deg, #eee, #ccc);
  border:1px solid;
  border-color:#ccc #ccc #bbb;
  border-radius:3px;
  color:#333;
  font-size:14px;
  line-height:1;
  padding:5px 4px;
  text-align:center;
  text-shadow:0 1px 0 #eee;
  vertical-align:middle;
}
.sp-container button:hover{
    background-color:#ddd;
    background-image:-webkit-linear-gradient(top, #ddd, #bbb);
    background-image:-moz-linear-gradient(top, #ddd, #bbb);
    background-image:-ms-linear-gradient(top, #ddd, #bbb);
    background-image:-o-linear-gradient(top, #ddd, #bbb);
    background-image:linear-gradient(180deg, #ddd, #bbb);
    border:1px solid;
    border-color:#bbb #bbb #999;
    cursor:pointer;
    text-shadow:0 1px 0 #ddd;
}
.sp-container button:active{
    border:1px solid;
    border-color:#aaa #aaa #888;
    -webkit-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;
    -moz-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;
    -ms-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;
    -o-box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;
    box-shadow:inset 0 0 5px 2px #aaa,0 1px 0 0 #eee;
}
.sp-cancel{
    color:#d93f3f !important;
    font-size:11px;
    margin:0 5px 0 0;
    padding:2px;
    text-decoration:none;
    vertical-align:middle;

}
.sp-cancel:hover{
    color:#d93f3f !important;
    text-decoration:underline;
}


.sp-palette span.sp-thumb-active,.sp-palette span:hover{
    border-color:#000;
}

.sp-alpha,.sp-preview,.sp-thumb-el{
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
    position:relative;
}
.sp-alpha-inner,.sp-preview-inner,.sp-thumb-inner{bottom:0;
    display:block;left:0;
    position:absolute;right:0;
    top:0;
}

.sp-palette .sp-thumb-inner{
    background-position:50% 50%;
    background-repeat:no-repeat;
}

.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner{
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
}

.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner{
    background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
}

.sp-clear-display{
    background-image:url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
    background-position:50%;
    background-repeat:no-repeat;
}

#volume_container{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  display:inline-block;
  position:relative;
}

#volume_control{
  background-color:#33333a;
  border-radius:8px;
  left:-38px;
  padding:8px;
  position:absolute;
  top:-65px;
  width:100px;
}