* {
  padding: 0;
  margin: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
  font-variant-ligatures: none !important;
  font-feature-settings: 'liga' 0;
  -webkit-user-drag: none;
  -ms-overflow-style: none;
  scrollbar-width: none
}

:root {
  --color: #171717;
  --bg: #fff;
  --dull: #eee;
  --blue: #005fb7;
  --lightblue: #0d99ff;
  --pcolor: #01c7db;
  --scolor: #01dbbf;
  --tcolor: #31e18d;
  --red: #f44336;
  --hpad: calc(21px + 5vw);
  --vpad: 40px;
  --fsize: 14px;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', 'Ubuntu', sans-serif;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

input[type=text]::-ms-clear {
  display: none;
  width: 0;
  height: 0
}

input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none
}

.fix::after {
  clear: both;
  content: '';
  display: table
}

input,
textarea,
button {
  font-family: var(--body);
  background: 0 0;
  color: var(--color);
  font-size: var(--fsize);
  outline: none;
  border: none;
  cursor: inherit
}

*:focus {
  outline: none;
  border: none
}

*::-moz-focus-inner {
  border: 0
}

textarea {
  min-height: 100px
}

::placeholder {
  font-size: var(--fsize);
  line-height: 1.7
}

input:required {
  box-shadow: none
}

input:invalid {
  box-shadow: none
}

.unselect,
br,
hr,
img,
.blockui {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none
}

img {
  width: 100%
}

a,
a:link,
a:active,
a:visited,
a:hover,
a:focus,
a:focus-within {
  outline: none;
  border: none;
  text-decoration: none;
  color: var(--color);
  background: 0 0
}

ul,
li {
  list-style: none
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--body);
  font-weight: 700;
  color: var(--color)
}

body {
  color: var(--color);
  background-color: var(--bg);
  font-family: var(--body);
  line-height: 1;
  min-height: 100vh;
  width: 100%;
  word-spacing: 0;
  letter-spacing: 0;
  font-size: var(--fsize);
  z-index: 1;
  font-kerning: normal;
  font-feature-settings: 'kern', 'liga', 'clig', 'calt';
  position: relative;
  overflow-x: hidden
}

#root {
  position: relative;
}

#top {
  height: 40px;
  background: #24292e;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}


#top>div {
  display: flex;
}

#top-right {
  justify-content: flex-end;
}

#top-middle {
  justify-content: center;
}


#body {
  display: flex;
  height: calc(100vh - 40px);
}

#app {
  height: 100vh;
  overflow: hidden;
}

#main {
  flex: 1;
  display: flex;
  position: relative;
  max-width: calc(100% - 250px);
}

#main.drag-active:after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  position: absolute;
  background: var(--blue);
  opacity: .5;
  z-index: 2;
}

#main:before {
  content: "";
  display: block;
  top: 0;
  left: 50%;
  background: #ccc;
  height: 100%;
  position: absolute;
  width: 1px;
  z-index: 2;
}


#main>div {
  width: 50%;
  flex: 1;
}


#main.single-win::before {
  display: none;
}

#main canvas {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  cursor: grab;
}

#main canvas:active {
  cursor: grabbing;
}

#left {
  position: relative;
}

#left canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

#left.transparent,
#right.transparent {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H3V3H0V0Z' fill='%23E1E1E1'/%3E%3Cpath d='M3 0H6V3H3V0Z' fill='%23ccc'/%3E%3Cpath d='M3 3H6V6H3V3Z' fill='%23E1E1E1'/%3E%3Cpath d='M0 3H3V6H0V3Z' fill='%23ccc'/%3E%3C/svg%3E%0A");
}

#aside {
  width: 250px;
  border-left: 1px solid var(--dull);
  max-height: 100vh;
  height: 100%;
  user-select: none;
}

#aside .wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: calc(100vh - 40px);
  height: 100%;
}


.custom-select {
  position: relative;
}

.custom-select select {
  display: none;
}


.select-selected {
  border: 1px solid #fff0;
  border-radius: 4px;
  opacity: .7;
}

.select-selected:hover,
.select-selected.select-arrow-active {
  border: 1px solid var(--dull);
  opacity: 1;
}

.select-selected:after {
  position: absolute;
  content: "";
  top: 8x;
  right: 10px;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all .25s;
}


.select-selected.select-arrow-active:after {
  transform: rotate(180deg);
}



.select-items div,
.select-selected {
  padding: 8px 16px;
  cursor: pointer;
  user-select: none;
}

.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 0 4px 1px #1111;
  border: 1px solid var(--dull);
  border-radius: 4px;
}

.custom-select.top .select-items {
  top: unset;
  bottom: 100%;
}

.select-hide {
  display: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: rgba(0, 0, 0, 0.1);
}

.std-box {
  padding: 10px 12px;
}

.input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px
}

.input>label {
  font-weight: 500;
}

.app-color .pcr-color-chooser {
  top: 10px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider-switch {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider-switch:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 4px;
  top: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.slider-switch {
  background-color: var(--blue);
}

input:focus+.slider-switch {
  box-shadow: 0 0 1px var(--blue);
}

input:checked+.slider-switch:before {
  transform: translateX(14px);
}

.pickr .pcr-button {
  border-radius: 50%;
  overflow: hidden;
  height: 28px;
  width: 28px;
  box-shadow: 0 0 8px 2px #1111;
}

.image-color-picker-action .pickr .pcr-button {
  height: 20px;
  width: 20px;
  border-color: 1px solid #888;
}

.block {
  display: block !important;
}

.none {
  display: none !important;
}

.radio-tabs-wrapper {
  clear: both;
  display: flex;
  width: 100%;
  position: relative;
  gap: 0;
}

input.radio-tab {
  position: absolute;
  left: -99999em;
  top: -99999em;
}

input.radio-tab+label {
  cursor: pointer;
  float: left;
  border: 1px solid #fff0;
  border-bottom: 0;
  background-color: #fff;
  margin-right: -1px;
  padding: 0.5em 1em;
  position: relative;
  border-radius: 4px;
  border-bottom: 2px solid #fff0;
  overflow: hidden;
}

input.radio-tab+label:hover {
  background-color: var(--dull);
}

input.radio-tab:checked+label {
  box-shadow: 0 0 4px 1px #1111;
  border: 1px solid var(--dull);
  border-bottom: 2px solid var(--blue);
  z-index: 1;
}

.radio-tabs-wrapper>div {
  flex: 1;
  width: 100%;
}

.radio-tabs-wrapper label {
  width: 100%;
}

.clrs {
  display: inline-block;
  width: 18px;
  height: 18px;
  aspect-ratio: 1/1;
  min-width: 18px;
  min-height: 18px;
  font-size: 0;
  border-radius: 50%;
  position: relative;
  top: 1px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.unlimited {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 720 720'%3E%3Cpath d='M363.93 45c-86.991 0-157.46 70.472-157.46 157.46 0 86.991 70.472 157.54 157.46 157.54-43.49-75.34-17.68-171.62 57.66-215.12 24.86-14.35 52.03-21.18 78.81-21.15C473.16 76.67 422.22 45 363.93 45z' fill='%23ffa105'/%3E%3Cpath d='M636.73 202.5c-43.49-75.34-139.76-101.13-215.1-57.64-75.33 43.5-101.19 139.8-57.7 215.14 43.495-75.336 139.79-101.12 215.13-57.627 24.858 14.352 44.354 34.469 57.718 57.673 27.137-47.121 29.096-107.07-.048-157.55z' fill='%23fe4844'/%3E%3Cpath d='M636.73 517.5c43.495-75.336 17.701-171.6-57.635-215.1-75.336-43.495-171.67-17.738-215.16 57.598 86.991 0 157.47 70.502 157.47 157.49 0 28.704-7.673 55.646-21.088 78.822 54.376-.059 107.27-28.336 136.41-78.815z' fill='%23ba5dd2'/%3E%3Cpath d='M363.93 675c86.991 0 157.46-70.472 157.46-157.46 0-86.991-70.472-157.54-157.46-157.54 43.495 75.336 17.679 171.62-57.657 215.12-24.858 14.352-52.028 21.178-78.806 21.148 27.24 47.06 78.18 78.73 136.46 78.73z' fill='%2303a0f9'/%3E%3Cpath d='M91.135 517.5c43.495 75.336 139.76 101.13 215.1 57.635 75.336-43.495 101.2-139.8 57.7-215.14-43.495 75.336-139.79 101.12-215.13 57.627-24.858-14.352-44.354-34.469-57.718-57.673-27.137 47.121-29.096 107.07.048 157.55z' fill='%2342c01e'/%3E%3Cpath d='M91.135 202.5C47.64 277.836 73.434 374.1 148.77 417.6c75.336 43.495 171.67 17.738 215.16-57.598-86.991 0-157.47-70.502-157.47-157.49 0-28.704 7.673-55.646 21.088-78.822-54.376.059-107.27 28.336-136.41 78.815z' fill='%23ffd204'/%3E%3C/svg%3E");
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;

}

.custom-clr {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='411.258' height='411.258' viewBox='0 0 108.812 108.812'%3E%3Cpath d='M0 0h54.406v54.406H0z' fill='%230099f3'/%3E%3Cpath d='M54.406 0h54.406v54.406H54.406z' fill='%2300abf4'/%3E%3Cpath d='M0 54.406h54.406v54.406H0z' fill='%2388c048'/%3E%3Cpath d='M54.406 54.406h54.406v54.406H54.406z' fill='%23cad734'/%3E%3C/svg%3E");
}

.radio-tabs-wrapper label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.std-btn {
  display: inline-block;
  border: 1px solid #fff0;
  background: var(--blue);
  font-weight: 500;
  text-align: center;
  line-height: 1;
  padding: 8px 20px 10px 20px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  &.red {
    background: var(--red)
  }
}

.std-btn:active {
  border: 1px solid var(--blue);
  &.red {
    border-color: var(--red)
  }
}

.std-btn:hover,
.std-btn:active {
  opacity: .9;
}

.bottom-box {
  margin-top: auto;
  border-top: 1px solid var(--dull);
}

.full {
  width: 100%;
}

.std-btn.light {
  background: none;
  border: 1px solid var(--blue);
  color: var(--color);
  opacity: .7;
}

.std-btn.light:hover,
.std-btn.light:active {
  opacity: 1;
}

.vectorize i {
  display: inline-block;
  width: 16px;
  height: 16px;
  aspect-ratio: 1/1;
  min-width: 18px;
  min-height: 18px;
  font-size: 0;
  border-radius: 50%;
  position: relative;
  top: 4px;
  margin-right: 5px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-crosshair'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='22' y1='12' x2='18' y2='12'%3E%3C/line%3E%3Cline x1='6' y1='12' x2='2' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='6' x2='12' y2='2'%3E%3C/line%3E%3Cline x1='12' y1='22' x2='12' y2='18'%3E%3C/line%3E%3C/svg%3E");
}

.sml-btm {
  padding-bottom: 0;
}



.action {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  cursor: pointer;
  align-items: center;
}

.action:hover {
  background: var(--lightblue);
}

.action .wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.action i {
  display: inline-block;
  width: 18px;
  height: 18px;
  aspect-ratio: 1/1;
  min-width: 18px;
  min-height: 18px;
  font-size: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='17 8 12 3 7 8'%3E%3C/polyline%3E%3Cline x1='12' y1='3' x2='12' y2='15'%3E%3C/line%3E%3C/svg%3E");
}

.column i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-columns'%3E%3Cpath d='M12 3h7a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-7m0-18H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h7m0-18v18'%3E%3C/path%3E%3C/svg%3E");
}

.square i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-square'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3C/svg%3E");
}

.outline i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-map'%3E%3Cpolygon points='1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6'%3E%3C/polygon%3E%3Cline x1='8' y1='2' x2='8' y2='18'%3E%3C/line%3E%3Cline x1='16' y1='6' x2='16' y2='22'%3E%3C/line%3E%3C/svg%3E");
}

.account i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-user'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E");
}

.video-tuts i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-youtube'%3E%3Cpath d='M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z'%3E%3C/path%3E%3Cpolygon points='9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02'%3E%3C/polygon%3E%3C/svg%3E");
}

.edit-image i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-image'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'%3E%3C/circle%3E%3Cpolyline points='21 15 16 10 5 21'%3E%3C/polyline%3E%3C/svg%3E");
}

.fit i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-maximize'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3'%3E%3C/path%3E%3C/svg%3E");
}


.reset-image i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-rotate-ccw'%3E%3Cpolyline points='1 4 1 10 7 10'%3E%3C/polyline%3E%3Cpath d='M3.51 15a9 9 0 1 0 2.13-9.36L1 10'%3E%3C/path%3E%3C/svg%3E");
}

.swap-image i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-repeat'%3E%3Cpolyline points='17 1 21 5 17 9'%3E%3C/polyline%3E%3Cpath d='M3 11V9a4 4 0 0 1 4-4h14'%3E%3C/path%3E%3Cpolyline points='7 23 3 19 7 15'%3E%3C/polyline%3E%3Cpath d='M21 13v2a4 4 0 0 1-4 4H3'%3E%3C/path%3E%3C/svg%3E");

}

.fill-image i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-droplet'%3E%3Cpath d='M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z'%3E%3C/path%3E%3C/svg%3E");
}


.edit-pixel i {

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-edit'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E");
}


.pick-image-color i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48' width='48'%3E%3Cpath fill='%23fff' d='M6 42v-8.4l18.85-18.85-3.6-3.6L23.3 9.1l4.6 4.6L35 6.6q.55-.55 1.175-.55t1.175.55l4.05 4.05q.55.55.55 1.175T41.4 13l-7.1 7.1 4.6 4.6-2.05 2.05-3.6-3.6L14.4 42Zm3-3h4.35L31.1 21.25l-4.35-4.35L9 34.65Zm23.15-21 6.2-6.2-2.15-2.15-6.2 6.2Zm0 0L30 15.85 32.15 18Z'/%3E%3C/svg%3E");
}


.share-now i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-share-2'%3E%3Ccircle cx='18' cy='5' r='3'%3E%3C/circle%3E%3Ccircle cx='6' cy='12' r='3'%3E%3C/circle%3E%3Ccircle cx='18' cy='19' r='3'%3E%3C/circle%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'%3E%3C/line%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'%3E%3C/line%3E%3C/svg%3E");
}


.learn-more i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-info'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
}

.send-feed i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-send'%3E%3Cline x1='22' y1='2' x2='11' y2='13'%3E%3C/line%3E%3Cpolygon points='22 2 15 22 11 13 2 9 22 2'%3E%3C/polygon%3E%3C/svg%3E");
}




.pan-canvas i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000000' width='52' height='52' viewBox='0 0 64 64' xmlns:v='https://vecta.io/nano'%3E%3Cpath d='M52.6 45.6V15.5c0-2.8-2.5-5.2-5.7-5.2-.8 0-1.5.1-2.1.4V8.8c0-2.8-2.5-5.2-5.7-5.2a5.86 5.86 0 0 0-3.3 1c-1-1.2-2.7-2-4.5-2-2.6 0-4.7 1.6-5.4 3.7-.7-.3-1.5-.5-2.4-.5-3.1 0-5.7 2.3-5.7 5.2v22.6L15.7 31c-2.1-2.8-6.1-3.7-9.1-2.1-1.5.8-2.5 2.2-2.9 3.8-.4 1.7 0 3.4 1.1 4.8l5.5 7.3 3.3 4.4c.5.6.9 1.3 1.4 1.9 1.4 2 2.9 4 4.9 5.7 3.8 3.2 9 4.4 13.9 4.4 2.4 0 4.7-.3 6.8-.7 12-2.5 12-11.5 12-14.9zM39.9 57.2c-5.2 1.1-13 1-17.7-2.9-1.6-1.4-2.9-3.2-4.3-5.1-.5-.7-1-1.4-1.5-2l-3.3-4.4-5.5-7.3c-.5-.6-.6-1.3-.5-2 .1-.6.5-1.1 1.1-1.5 1.5-.8 3.6-.3 4.6 1.1 0 0 0 .1.1.1l5.3 6.3c.5.6 1.2.8 1.9.5s1.2-.9 1.2-1.6V11.1c0-.9 1-1.7 2.2-1.7 1.1 0 2.1.7 2.1 1.6v.4.1 16.9a1.79 1.79 0 1 0 3.6 0V11.1v-.2-3c0-.9 1-1.7 2.2-1.7s2.2.8 2.2 1.7v1 19.9.4a1.79 1.79 0 1 0 3.6 0v-.4-20c0-.9 1-1.7 2.2-1.7s2.2.8 2.2 1.7v6.4.2 2.7.1V31a1.79 1.79 0 1 0 3.6 0V15.4c.1-.9 1-1.6 2.1-1.6 1.2 0 2.2.8 2.2 1.7v29.8.4c-.4 3.3-.4 9.5-9.6 11.5z' fill='%23fff'/%3E%3C/svg%3E");
}





.action.active {
  background-color: #000;
}

.radio-wrap {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 18px;
  cursor: pointer;
  user-select: none;
}


.radio-wrap input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  display: none;
}


.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: var(--dull);
  border-radius: 50%;
  border: 1px solid #1117;
}


.radio-wrap:hover input~.checkmark {
  background-color: #ccc;
}


.radio-wrap input:checked~.checkmark {
  background-color: var(--blue);
  border-color: var(--blue);
}

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

.radio-wrap input:checked~.checkmark:after {
  display: block;
}

.radio-wrap .checkmark:after {
  inset: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: white;
}

.modal {
  position: fixed;
  inset: 0;
  margin: auto;
  background: #fff;
  border-radius: 8px;
  z-index: 50;
  max-width: 500px;
  height: auto;
  box-shadow: 0 0 8px 1px #1111;
  max-height: 75vh;
}

.modal-head {
  padding: 10px 20px;
  border-bottom: 1px solid var(--dull);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-head .title {
  font-weight: 500;
}

.close {
  line-height: 1;
  cursor: pointer;
  font-size: 24px;
  padding: 5px;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  padding-bottom: 5px;
}

.close:hover {
  background-color: var(--dull);
}

.modal>.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.modal-foot {
  padding: 10px 20px;
  border-top: 1px solid var(--dull);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}

.modal>.wrap>div {
  width: 100%;
}

.modal-body {
  padding: 10px 20px;
  overflow: auto;
  height: 100%;
  max-height: calc(100% - 47px);
}

.palette {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.palette i,
.add-one {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: relative;
  font-size: 0;
  border: 1px solid #ddd;
}

.color-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.modal-body .title {
  margin-bottom: 16px;
  font-weight: 500;
}


.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1115;
  z-index: 40;
}

.custom-color-list {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  align-items: center;
}


.custom-color-list .radio-wrap {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 2px;
  padding-left: 10px;
  margin-bottom: 14px;
}

.title.mar-10 {
  margin-bottom: 10px;
}

.suggested-palettes {
  margin-bottom: 30px;
}

.std-text {
  border: 1px solid var(--dull);
  border-radius: 4px;
  border-bottom: 2px solid var(--dull);
  padding: 6px 12px;
}

.std-text:focus {
  border-bottom: 2px solid var(--blue);
}

.custom-color-maker {
  gap: 4px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.palette i.active:before {
  content: "";
  top: -1px;
  left: -1px;
  display: block;
  border-radius: 50%;
  position: absolute;
  border: 1px solid var(--blue);
  width: 100%;
  height: 100%;
  transform: scale(1.16);
}

.add-one {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-plus'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  border: 1px solid #111;
  cursor: pointer;
  opacity: .7;
}

.add-one:hover {
  opacity: 1;
}

.custom-color-maker i {
  cursor: pointer;
}

.color-picker {
  width: 28px;
  height: 28px;
  background-position: center;
  background-size: 55%;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg class='svg' width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.122.688c-.8-.8-2-.8-2.8 0l-2.8 2.8-.8-.7c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4l.7.7-5.8 5.8c-.4.4-1 1.9 0 2.9 1 1 2.5.4 2.9 0l5.8-5.8.7.7c.4.4 1 .4 1.4 0 .4-.4.4-1 0-1.4l-.7-.7 2.8-2.8c.8-.9.8-2.1 0-2.9zm-10.9 11.9h-1v-1l5.8-5.8 1 1c-.1 0-5.8 5.8-5.8 5.8z' fill-rule='nonzero' fill-opacity='1' fill='%23666' stroke='none'%3E%3C/path%3E%3C/svg%3E");
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 8px 2px #1111;
}

.color-picker:hover {
  background-color: var(--dull);
}

.simplebar-track {
  width: 6px !important;
}

.simplebar-track:hover {
  width: 10px !important;
}

.custom-color-edit {
  gap: 20px;
}

.std-btn.small {
  font-weight: 400;
  border-color: gray;
}

.std-btn.small:hover {
  border-color: var(--blue);
}

#input,
#img {
  display: none;
}

.disable {
  filter: grayscale(100%) !important;
  opacity: .5 !important;
  pointer-events: none !important;
}

.event-none {
  pointer-events: none !important;
}

#right {
  position: relative;
}

.loading {
  position: relative;
}

.loading::after {
  display: block;
  content: "";
  width: 50px;
  height: 50px;
  background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 38 38' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='gradient' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-opacity='0' stop-color='%23005fb7'/%3E%3Cstop offset='1' stop-opacity='1' stop-color='%23005fb7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath stroke='url(%23gradient)' vector-effect='non-scaling-stroke' stroke-width='2px' fill='none' fill-rule='evenodd' d='M2,19a17,17 0 1,1 34,0'/%3E%3Cpath vector-effect='non-scaling-stroke' stroke-width='2px' fill='none' fill-rule='evenodd' d='M2,19a17,17 0 1,0 34,0' stroke='%23005fb7'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

#download.loading::after,
#vectorize.loading::after {
  width: 16px;
  right: 10px;
  left: unset;
}

#vectorize.loading::after {
  filter: invert(.7);
}

.options-top {
  flex: 1;
  height: calc(100% - 96px);
}

.open-drag {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  cursor: pointer;
}

.open-drag i {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 24 24' fill='none' stroke='%2317a0fa' stroke-width='1' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload-cloud'%3E%3Cpolyline points='16 16 12 12 8 16'%3E%3C/polyline%3E%3Cline x1='12' y1='12' x2='12' y2='21'%3E%3C/line%3E%3Cpath d='M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3'%3E%3C/path%3E%3Cpolyline points='16 16 12 12 8 16'%3E%3C/polyline%3E%3C/svg%3E");
}

.picker,
.picker * {
  cursor: url('../media/etc/picker.png')4 28, auto !important;
}

.pen,
.pen * {
  cursor: url('../media/etc/pen.png')4 18, auto !important;
}

.bucket,
.bucket * {
  cursor: url('../media/etc/bucket.png')6 20, auto !important;
}

.current-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.preview-color {
  top: 40px;
  left: 40px;
  border-radius: 50%;
  padding: 20px;
  background: #000;
  position: absolute;
  z-index: 10;
  border: 1px solid #888;
  overflow: hidden;
  transform: translate(14px, calc(-100% - 10px));
}




.tip {
  cursor: pointer;
}

#tip {
  position: fixed;
  top: 0;
  left: 99999px;
  padding: 7px 11px;
  background: #171717;
  box-shadow: 1px 1px 7px 0px rgba(0, 0, 0, 0.17);
  z-index: 300;
  color: #fff;
  font-size: 12px;
  border-radius: 2px;
  transform: translate(0, 6px);
  backface-visibility: hidden;
  display: none;
  white-space: pre;
}

#tip:after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #171717 transparent;
}




#tip.left {
  transform: translate(-13px, 6px);
  backface-visibility: hidden;
}

#tip.center {
  transform: translate(-50%, 6px);
  backface-visibility: hidden;
}

#tip.right {
  transform: translate(calc(-100% + 15px), 6px);
  backface-visibility: hidden;
}


#tip.top.left {
  transform: translate(-13px, calc(-100% - 6px));
  backface-visibility: hidden;
}

#tip.top.center {
  transform: translate(-50%, calc(-100% - 6px));
  backface-visibility: hidden;
}

#tip.top.right {
  transform: translate(calc(-100% + 15px), calc(-100% - 6px));
  backface-visibility: hidden;
}


#tip.left:after {
  left: 13px;
}

#tip.right:after {
  left: unset;
  right: 9px;
}


#tip.top:after {
  top: 100%;
  border-color: #171717 transparent transparent transparent;
}

#tip.middle.right {
  transform: translate(6px, -50.1%);
  backface-visibility: hidden;
}

#tip.middle.right:after {
  right: unset;
  left: 0;
  top: 50%;
  transform: translate(-6px, -50.1%) rotate(90deg);
  backface-visibility: hidden;
}


.block {
  display: block !important;
}


.nonex {
  position: fixed !important;
  opacity: 0;
  visibility: hidden;
}

#esc {
  position: fixed;
  bottom: 10px;
  left: 20px;
  text-transform: uppercase;
  font-weight: bold;
  color: #888;
  z-index: 300;
}

.social-share.modal {
  height: 120px;
  max-width: 400px;
}

.links-grid {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}

.links-grid a {
  display: block;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 50%;
  opacity: .7;
  position: relative;
}


.links-grid a:hover {
  background: #3331;
  opacity: 1;
}

#notify {
  position: fixed;
  z-index: 500;
  padding: 14px 20px;
  background: #171717;
  color: #fff;
  text-align: center;
  inset: 0;
  width: fit-content;
  margin: auto;
  margin-bottom: 20px;
  height: fit-content;
  border-radius: 8px;
  box-shadow: 0 0 20px 1px #3331;
  transform: translateY(20px);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

#notify.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}


.seg-action {
  margin-right: auto;
  width: calc(100% - 250px);
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 14px;
}

.seg-action .std-btn {
  padding: 7px 14px;
  background: var(--lightblue);
  font-weight: normal;
  font-size: 13px;
  border-radius: 6px;
}

#cancel-seg {
  background: #fff;
  color: #333;
}

.arrow-more {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .25s;
  position: relative;
}

.arrow-more:hover {
  background: #000;
}

.arrow-more i {
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: all .25s;
  position: relative;
}

.arrow-more:hover i {
  transform: translateY(1px);
}

.revision-btn {
  display: flex;
}

.revision-btn:hover .arrow-more {
  background: #000;
}

.revision-btn:hover .arrow-more i {
  transform: translateY(1px);
}

.revision-btn:hover .action {
  background: var(--lightblue);
}

.menu-dropdown {
  position: absolute;
  background: #24292e;
  top: 100%;
  left: 0;
  color: #fff;
  z-index: 99;
  padding: 8px 0;
  box-shadow: 0 0 20px 1px #1111;
}

.menu-dropdown li {
  padding: 8px 24px;
  white-space: nowrap;
  padding-left: 40px;
  position: relative;
  transition: all .25s;
  cursor: pointer;
}

.menu-dropdown li:hover {
  background: var(--lightblue);
}

.menu-dropdown li.active:after {
  display: block;
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' data-prefix='fas' data-icon='check' role='img' viewBox='0 0 512 512' class='svg-inline--fa fa-check fa-w-16 fa-2x'%3E%3Cpath fill='%23fff' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z' class=''/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 14px;
  top: 9px;
}


.progress-bar {
  background: #fff;
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 400px;
  height: fit-content;
  border-radius: 4px;
  box-shadow: 0 0 10px 2px #3333;
  display: none;
}

.progress .progress-bar {
  display: block;
}

.progress-head {
  padding: 8px 16px;
  border-bottom: 1px solid #eee;
}

.progress-head span {
  font-weight: 500;
}

.progress-foot {
  padding: 8px 16px;
  border-top: 1px solid #eee;
}

.progress-body {
  padding: 14px 20px;
}

.progress-div {
  height: 8px;
  background: #ddd;
  border-radius: 999px;
  position: relative;
}

.progress-div>span {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30%;
  background: var(--blue);
  border-radius: 999px;
}



.modal.license-key {
  height: fit-content;
}

.modal.license-key input {
  width: 100%;
  margin-top: 6px;
}


.license-key-label {
  display: block;
  margin-top: 18px;
}


.modal.license-key .modal-head {
  padding: 12px 20px;
}


#submit-message {
  padding: 10px;
  background: var(--color);
  border-radius: 4px;
  margin-top: 20px;
  position: relative;
  color: #fff;
  padding-right: 50px;
  font-size: 14px;
}

#submit-message::after {
  content: "\d7";
  display: block;
  line-height: 1;
  font-size: 24px;
  position: absolute;
  right: 10px;
  top: 44%;
  transform: translateY(-50%);
  cursor: pointer;
}

.account-info.modal {
  line-height: 1.5;
  height: fit-content;
}

#name-on-key {
  font-weight: 500;
}

#key-text-info {
  font-family: monospace;
  color: brown;
  margin: 3px 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.go-pro-btn {
  color: #fff !important;
  display: inline-flex;
  background: var(--lightblue) !important;
  background-image: linear-gradient(45deg, var(--lightblue), var(--tcolor)) !important;
  align-items: center;
  padding: 4px 14px;
  height: 22px;
  border-radius: 4px;
  font-weight: 500;
  margin-top: 9px;
  font-size: 14px;
  margin-right: 20px;
}


/*  */

@media (max-width: 860px) {
  #app {
    height: auto;
    overflow: unset;
  }

  #body {
    max-width: 100%;
    display: block;
    height: auto;
  }

  #main {
    max-width: 100%;
    height: 200px;
  }

  #aside .wrap {
    min-height: unset;
    height: 100%;
  }

  #aside {
    border-left: none;
    width: auto;
    max-height: unset;
    height: auto;
    overflow: visible;
  }

  .edit-image {
    display: none;
  }

}