/* Mode-1: Mode 1 */

/* Collection: COLORS */
.theme-state {
  --50: #F9FAFB;
  --100: #F3F4F6;
  --200: #E5E7EB;
  --300: #D1D5DB;
  --400: #9CA3AF;
  --500: #6B7280;
  --600: #4B5563;
  --700: #374151;
  --800: #1F2937;
  --850: #13181f;
  --800a: #1f29378b;
  --900: #111827;
  --950: #09090B;
}
:root {
--0: rgba(0, 0, 0, 0%);
--50: #fafaf9;
--100: #f5f5f4;
--200: #e7e5e4;
--300: #d6d3d1;
--400: #a8a29e;
--500: #78716c;
--600: #57534e;
--700: #44403c;
--800: #292524;
--850: #221f1e;
--800a: #2925248b;
--900: #1c1917;
--950: #0c0a09;
--main: #e9bd1f;
--maina: #e9bd1f8b;
--error: #e91fbd;
--white: var(--50);
--text-primary: var(--50);
--black: var(--950);
--bg: var(--800);

--br-base: 8px;
--br-sm: 4px;

--sidebar: 260px;
--drawer: 180px;
--header: 50px;
--tab: 25px;
--block-mw: 300px;
--block-th: 150px;
--block-h: 40px;
--block-h2: 20px;
--preview-s: 200px;
--properties: 400px;
--floater: 300px;

--p-2: 2px;
--p-4: 4px;
--p-8: 8px;
--p-16: 16px;
--p-20: 20px;
--p-24: 24px;
--p-32: 32px;
--p-48: 48px;
--p-64: 64px;
--p-96: 96px;

--content-p: var(--p-24);

--tm-ph: 30px;
--tm-lw: 200px;
--tm-ruller: 30px;

--input-w: 90px;

--tl-height: 300px;
--tl-mini-height: 60px;
--tl-button-height: 36px;
--tl-resizer: 16px;
--tl-tool-side: 220px;

--t-selected: var(--main);
--r-h: 100px;
}

*,
*:before,
*:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  /* align our svg to the center of the viewport both horizontally and vertically */
  height: 100vh;
  display: grid;
  place-items: center;
  background-color: var(--bg);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
}
.no-file {
  padding: var(--p-16);
  color: var(--600);
}
.view-hidden {
  opacity: 0
}
/* headlines */
h1 {
  font-family: DM Sans;
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 102%; /* 48.96px */
  letter-spacing: -0.96px;
}
h2 {
  font-family: DM Sans;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 102%; /* 36.72px */
  letter-spacing: -0.72px;
}
h3 {
  font-family: DM Sans;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 102%; /* 30.6px */
  letter-spacing: -0.6px;
}
h4 {
  font-family: DM Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 102%; /* 24.48px */
  letter-spacing: -0.48px;
}
h5 {
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 102%; /* 20.4px */
  letter-spacing: -0.4px;
}
h6 {
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 102%; /* 18.36px */
  letter-spacing: -0.36px;
}

/* subheadlines */
/* styleName: subheads/3xl */
.subhead-3xl {
  font-family: DM Sans;
  font-size: 30px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 33px */
  letter-spacing: -0.6px;
}
.subhead-2xl {
  font-family: DM Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 26.4px */
  letter-spacing: -0.48px;
}
.subhead-xl {
  font-family: DM Sans;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 22px */
  letter-spacing: -0.4px;
}
.subhead-lg {
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 19.8px */
  letter-spacing: -0.36px;
}
.subhead-base {
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 110%; /* 17.6px */
}

/* paragraphs */
p.xlg,
.p-xlg {
  font-family: DM Sans;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  letter-spacing: -0.18px;
}
p.lg,
.p-lg {
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 155.556% */
  letter-spacing: -0.18px;
}
p, p.base,
.p-base {
  /* paragraphs/regular/base */
  font-family: DM Sans;
  font-size: 16px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
p.sm,
.p-sm {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
}
p.xs,
.p-xs {
  font-family: Inter;
  font-size: 12px !important;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}
p.xss,
.p-xss {
  font-family: Inter;
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}

p.em-lg,
.p-em-lg {
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 155.556% */
  letter-spacing: -0.18px;
}
p.em, p.em-base,
.p-em, .p-em-base {
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}
p.em-sm,
.p-em-sm {
  font-family: Inter;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 142.857% */
}
p.em-xs,
.p-em-xs {
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px; /* 133.333% */
}
/* mono */
.p-mono {
  font-family: "DM Mono", monospace;
  font-weight: 400;
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums
}
.p-mono-em {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  font-style: normal;
  font-variant-numeric: tabular-nums lining-nums
}
/* a */ 
a {
  color: inherit;
  text-decoration: none;
}
a.link {
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  text-decoration-line: underline;
}
a.em-link {
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
  text-decoration-line: underline;
}
a.nav-link {
  font-family: DM Sans;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
  text-decoration: none;
}
/* button */
button,
a.button {
	border: none;
	outline: none;
	padding: 0;
	margin: 0;
	background-color: transparent;
	cursor: pointer;
  text-decoration: none;
}

button,
a.button {
  display: inline-flex;
  padding: 6px 24px;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 10px;
  border-radius: 24px;
  
  font-family: DM Sans;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 28px; /* 155.556% */
  letter-spacing: -0.36px;

  color: var(--main)
}

button.small, 
a.button.small {
  padding: 2px 16px;
  font-size: 16px;
}
button.sidebar, 
button.xsmall, 
a.button.sidebar,
a.button.xsmall {
  display: flex;
  padding: 3px 8px;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  border-radius: 24px;
  font-family: Inter;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}
button.icon,
a.button.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
}
button.primary, 
a.button.primary {
  background: var(--main);
  color: var(--black);
}
button.secondary,
a.button.secondary {
  border: 1px solid var(--600);
  color: var(--600);
}
button.secondary:hover,
button.secondary.selected,
a.button.secondary:hover,
a.button.secondary.selected {
  border: 1px solid var(--main);
  background-color: var(--main);
  color: var(--950);
}
button.tertiary,
a.button.tertiary {
  background: var(--black);
  border: 2px solid var(--black);
  color: var(--main);
}

button.small:disabled,
button.primary:disabled,
button.tertiary:disabled,
button:disabled {
  background-color: transparent;
  border: 1px dotted var(--maina);
  color: var(--maina);
}
button.tertiary:disabled {
  background-color: transparent;
  border: 1px dotted var(--black);
  color: var(--black);
}
button.action,
a.button.action {
  border: 1px solid var(--main);
  background-color: var(--main);
  color: var(--950);
}
button.action:disabled {
  border: 1px dotted var(--600);
  background-color: var(--950);
  color: var(--600);
}
/* tags */
ul {
  list-style: none;
  padding: 0;
  margin: 0;
 }
li.divider {
  border-top: 1px solid var(--700);
}
/* inputs */
input[type=text], 
input[type=email], 
input[type=password] {
  outline: none;
  border: none;
  border-radius: var(--br-sm);
  font-family: DM Sans;
  font-size: 16px;
  padding: 8px 16px;
  background-color: var(--700);
  color: var(--white);
}
input[type=text].sidebar, 
input[type=email].sidebar, 
input[type=password].sidebar {
  padding: var(--p-4) var(--p-8);
}
input[type=text].figma_file, 
input[type=email].figma_file, 
input[type=password].figma_file {
  width: 100%;
  border: 1px dotted var(--main);
  color: var(--main);
  height: var(--block-h);
}
input[type=text].number, 
input[type=email].number, 
input[type=password].number {
  font-family: "DM Mono", monospace;
  font-weight: 500;
  text-align: right;
}
/* block */
.left {
  text-align: left;
}
.right {
  text-align: right;
}
main.center {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center-start;
}
main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.content-wrapper {
  width: 100%;
}
.content {
  padding: var(--content-p);
}
.content-block {
  min-height: calc(100vh - 2 * var(--header) - 2 * var(--content-p));
  max-height: calc(100vh - 2 * var(--header) - 2 * var(--content-p));
  height: calc(100vh - 2 * var(--header) - 2 * var(--content-p));
}

.disabled {
  opacity: 0.4;
}
.block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 0 auto;
  min-width: var(--block-mw);
  max-width: var(--block-mw);
  background-color: var(--900);
  border: 1px solid var(--950);
  border-radius: var(--br-base);
  overflow: hidden;
  height: 100%;
}

.block > li {
  padding: var(--p-8);
}
.block > li.file {
  padding: var(--p-8);
}
.block > li.header {
  display: flex;
  flex: 1 0 var(--block-h);
  gap: var(--p-8);
  align-items: center;
  justify-content: stretch;
  background-color: var(--950);
  border-bottom: 1px solid var(--950);
  padding: var(--p-8);
  height: var(--block-h);
  min-height: var(--block-h);
  max-height: var(--block-h);
  overflow: hidden;
}
.block > li.header > div:first-child {
  text-align: center;
  flex: 1 0 auto;
}
.block > li.subheader {
  flex: 1 0 var(--block-th);
  padding: 0;
  height: var(--block-h);
  min-height: var(--block-h);
  max-height: var(--block-h);
}
.block > li.thumb {
  flex: 1 0 var(--block-th);
  height: var(--block-h);
  min-height: var(--block-th);
  max-height: var(--block-th);
}
.block > li.content {
  padding: var(--p-8);
  overflow-y: auto;
  margin-bottom: auto;
}
.block li.status {
  flex: 1 0 var(--block-h2);
  height: var(--block-h2);
  max-height: var(--block-h2);
  min-height: var(--block-h2);
  overflow: hidden;
  background-color: var(--950);
  color: var(--700);
  padding-top: 0;
  padding-bottom: 0;
}


/* spin */
.spinning {
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@namespace svg url(http://www.w3.org/2000/svg);
/* svg */
svg|a:link,
svg|a:visited {
  cursor: pointer;
}

/* properties */
.prop-selectable {
  display: flex;
  gap: var(--p-4);
  padding: var(--p-4) var(--p-8);
  border: 1px solid var(--950);
  background-color: var(--800);
  border-radius: var(--p-4);
  cursor: pointer;
}
.prop-selectable.selected {
  border: 1px solid var(--600);
  background-color: var(--700);
  color: var(--white);
}
.prop-floater-title {
  padding-top: var(--p-4);
  padding-bottom: var(--p-8);
  margin-bottom: var(--p-16);
  border-bottom: 1px solid var(--600);
}

.properties {
  background-color: var(--900);
  height: calc(100vh - 2 * var(--header));
  overflow-y: auto;
  overflow-x:hidden;
  width: var(--properties);
  padding: 0;
}
.property-group {
  margin: var(--p-32) var(--p-16);
  border: 1px solid var(--700);
}
.property-title {
  display: flex;
  align-items: center;
  text-align: center;
  background: var(--main);
  padding: var(--p-8);
  color: var(--black);
  margin-bottom: var(--p-8);
}
.property-title.percentage {
  background-image: linear-gradient(90deg, var(--main) 0%, var(--main) var(--t-p), var(--500) var(--t-p), var(--500) 10%);
}
.property-title.gray-stripes {
  background-size: 56.57px 56.57px;
  background-image: linear-gradient(135deg, var(--500) 25%, var(--600) 25%, var(--600) 50%, var(--500) 50%, var(--500) 75%, var(--600) 75%, var(--600) 100%);
}
.property-title.main-stripes {
  background-size: 56.57px 56.57px;
  background-image: linear-gradient(135deg, var(--main) 25%, var(--maina) 25%, var(--maina) 50%, var(--main) 50%, var(--main) 75%, var(--maina) 75%, var(--maina) 100%);
}
.property-title.animating {
  background-color: transparent;
  -webkit-animation-name: MOVE-BG;
  -webkit-animation-duration: .6s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-name: MOVE-BG;
  animation-duration: .6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.status-title {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--black);
}
.status-title.percentage {
  background-image: linear-gradient(90deg, var(--main) 0%, var(--main) var(--t-p), transparent var(--t-p), transparent 10%);
}
.status-title.gray-stripes {
  background-size: 56.57px 56.57px;
  background-image: linear-gradient(135deg, var(--500) 25%, var(--600) 25%, var(--600) 50%, var(--500) 50%, var(--500) 75%, var(--600) 75%, var(--600) 100%);
  color: var(--main);
}
.status-title.main-stripes {
  background-size: 56.57px 56.57px;
  background-image: linear-gradient(135deg, var(--main) 25%, var(--maina) 25%, var(--maina) 50%, var(--main) 50%, var(--main) 75%, var(--maina) 75%, var(--maina) 100%);
}

.status-title.animating {
  background-color: transparent;
  -webkit-animation-name: MOVE-BG;
  -webkit-animation-duration: .6s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-name: MOVE-BG;
  animation-duration: .6s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.status-title.done {
  background-color: var(--main);
}
@-webkit-keyframes MOVE-BG {
  from {
    background-position: -56.57px 0;
  }
  to { 
    background-position: 0 0;
  }
}
@keyframes MOVE-BG {
  from {
    background-position: -56.57px 0;
  }
  to { 
    background-position: 0 0;
  }
}
.property-subtitle {
  display: flex;
  align-items: center;
  text-align: center;
  background-color: var(--800);
  padding: var(--p-8);
  color: var(--white);
  margin-bottom: var(--p-8);
}
.property-spacer {
  height: var(--p-48);
}
.property-editable {
  flex: 1 0 auto;
}
.property {
  display: flex;
  align-items: center;
  gap: var(--p-8);
  padding: var(--p-8);
  margin: var(--p-2) 0;
  border-bottom: 1px solid var(--800);
  color: var(--400);
}
.property label {
  flex: 1 0 auto;
  color: var(--600);
}
.property.active label {
  color: var(--main);
}
.property-status {
  padding: var(--p-8);
  font-style: italic;
  color: var(--error)
}
.property-list {
  padding: var(--p-2) var(--p-8);
  font-style: italic;
  color: var(--600)
}
.property-range-wrapper {
  padding: 0 var(--p-8);
}
.property-preview {
  padding: var(--p-8);
}
.property-preview-img {
  width: 100%;
  height: auto;
}
.property-label-icon {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.property-toggle {
  display: flex;
  align-items: center;
  gap: var(--p-4);
  padding: var(--p-8);
  margin: var(--p-2) 0;
  border-bottom: 1px solid var(--800);
}
.property-toggle label{
  color: var(--600);
  text-decoration: line-through;
}
.property-toggle.active label {
  color: var(--main);
  text-decoration: none;
}