:root {
  /* background color */
  --main: #1f1f1f;

  /* Toolbar and popover */
  --primary: #1f1f1f;

  /* On hover or selected */
  --selected: rgb(199, 136, 253);

  /* Border color */
  --border: #1e293b;

  /* Text and icon colors */
  --text: white;
}

/*=============================================
/*
/*                  GLOBAL
/*
/==============================================*/
html{
  min-height: 100vh;
}

body{
  font-size:16px;
  background-color: #1f1f1f;
  color: #fff;
  text-align: left;
  font-family: 'Chivo','Archivo',sans-serif;
  line-height: 1.5;
  overflow-x:auto;
  margin: 0;
  min-height: inherit;
}

body[data-scope="darkroom"]{
  min-width: 1500px;
}

.ml-auto, .mx-auto {
  margin-left: auto!important;
}

:any-link{
  color: unset;
  text-decoration: unset;
}

section{
  display: none;
}

section[data-state="on"]{
  display: block;
}

.field{
  display: none;
}

.field[data-state="on"]{
  display: block;
}

.tip{
  color: #FFDEAD;
}

/*============== EDITORJS =====================*/
.codex-editor__redactor{
  padding-bottom: 100px !important;
}

.dark {
  background-color: var(--main);
}

.dark .ce-toolbar__plus,
.dark .ce-toolbar__settings-btn,
.dark .ce-popover-item__icon {
  color: var(--text);
}

.dark .cdx-search-field.ce-popover__search {
  background-color: #1e293b4d;
  border-color: var(--border);
}

.dark .cdx-search-field__input {
  color: var(--text);
}

.dark .cdx-block,
.dark .ce-block {
  color: var(--text);
}

.dark .ce-block a {
  cursor: pointer;
  color: var(--text);
}

.dark .ce-inline-toolbar,
.dark .ce-conversion-tool__icon,
.dark .ce-popover-item__icon {
  color: var(--text);
  background-color: var(--primary);
  border-color: var(--border);
}

.dark .ce-popover,
.dark .ce-conversion-toolbar,
.dark .ce-inline-toolbar {
  background-color: var(--primary);
  border-color: var(--border);
  box-shadow: 0 3px 15px -3px var(--border);
}

.dark .ce-inline-tool:hover,
.dark .ce-inline-toolbar__dropdown:hover,
.dark .ce-toolbar__plus:hover,
.dark .ce-toolbar__settings-btn:hover,
.dark .ce-conversion-tool:hover,
.dark .ce-popover-item:hover {
  background-color: var(--selected);
}

.dark .ce-block .ce-block__content *::selection,
.dark .cdx-block *::selection,
.dark .cdx-search-field__input::selection,
.dark .ce-block.ce-block--selected .ce-block__content {
  background-color: var(--selected);
}

.dark .ce-popover__items {
  scrollbar-color: var(--border) var(--main);
}

.dark .cdx-settings-button:hover {
  background-color: var(--primary);
}

.dark .cdx-settings-button--active{
  color: var(--text);
}

@media (max-width: 650px) {
  .dark .ce-toolbar__settings-btn,
  .dark .ce-toolbar__plus {
    background-color: var(--primary);
    border-color: var(--border);
    box-shadow: 0 3px 15px -3px var(--border);
  }
}

/*=============== TOOLTIP =================*/
.tooltip::after {
  background-color: rgb(199, 136, 253);
  border-radius: 5px;
  color: #fff;
  display: none;
  padding: 10px 15px;
  position: absolute;
  text-align: center;
  opacity: 0;
  transition:.3s opacity;
}

.tooltip::before {
  background-color: rgb(199, 136, 253);
  content: ' ';
  display: none;
  position: absolute;
  width: 15px;
  height: 15px;
  opacity: 0;
  transition:.3s opacity;
}

.tooltip[data-tooltip="show"]::after {
  opacity: 1;
  display: block;
}

.tooltip[data-tooltip="show"]::before {
  opacity: 1;
  display: block;
}

.tooltip.top::after {
  content: attr(data-tooltip-msg);
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 10px));
}

.tooltip.top::before {
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 5px)) rotate(45deg);
}

.tooltip.bottom::after {
  content: attr(data-tooltip-msg);
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 10px));
}

.tooltip.bottom::before {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
}

.tooltip.right::after {
  content: attr(data-tooltip-msg);
  top: 0;
  right: 0;
  transform: translateX(calc(100% + 10px));
}

.tooltip.right::before {
  top: 50%;
  right: 0;
  transform: translate(calc(100% + 5px), -50%) rotate(45deg);
}

.tooltip.left::after {
  content: attr(data-tooltip-msg);
  top: 0;
  left: 0;
  transform: translateX(calc(-100% - 10px));
}

.tooltip.left::before {
  top: 50%;
  left: 0;
  transform: translate(calc(-100% - 5px), -50%) rotate(45deg);
}

/*=============== PILL =================*/
.pill{
  display: flex;
  height: 1.9rem;
  background-color: #1f1f1f;
  border-radius: 10px;
  border: 1px solid rgb(199, 136, 253);
  color: #fff;
}

.pill .delete{
  background-color:#262626;
  border-radius: 0 10px 10px 0;
  padding: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.3rem;
  margin-top: -0.2rem;
  margin-right:-0.2rem;
  margin-bottom: -0.2rem;
  margin-left:9px;
  font-size: 19px;
}

 @media screen and (max-width:600px){
   .pill{
      height: 1.5rem;
   }

   .pill .delete{
      font-size: unset;
   }
 }

/*=============== FULL FILTER =================*/
#full-filter{
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom:0;
  background: #000;
  z-index: 100;
  opacity: 0.5;
  display: none;
}

#full-filter[data-state="on"]{
  display: block;
}

/*=============== NOTIFY & UPGRADE =================*/
.notify,
.upgrade{
  width: 400px;
  position: fixed;
  background-color: #1f1f1f;
  border: solid 2px rgb(199, 136, 253);
  border-radius: 10px;
  z-index: 10;
  top: 1em;
  left: 1em;
  font-size: 1.25rem;
  display: none;
}

.upgrade{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 110;
}

.notify[data-state="on"],
.upgrade[data-state="on"]{
  display: block;
}

.notify .body,
.upgrade .body{
  width: 100%;
  height: 100%;
  position: relative;
}

.notify .body .close,
.upgrade .body .close{
  position: absolute;
  top: 0.5em;
  right: 0.75em;
  cursor: pointer;
  z-index: 2;
}

.notify .body .close:hover,
.notify .body .close:focus,
.notify .body .close:active,
.upgrade .body .close:hover,
.upgrade .body .close:focus,
.upgrade .body .close:active{
  color:rgb(199, 136, 253);
}

.notify .body .msg,
.upgrade .body .msg{
  padding: 2.5rem 1em 1em 1em;
  position: relative;
  text-align: justify;
  height: calc(100% - 3.5rem);
}

.notify .body .msg .title,
.upgrade .body .msg .title{
  color:#fd8888;
}

/*=============== NAVIGATION =================*/
.navbar{
  position: relative;
  display: block;
  width: 100%;
  padding: 0.5rem 0;
  background-color: #000;
  height: 3rem;
  border-bottom: 2px solid #707070;
}

@media (max-width: 1000px) {
  .navbar{
    padding:0;
  }
}

#navbar-preview-subject-size{
  height: calc(100% - 1rem);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  line-height: 3rem;
  font-size: 1.25rem;
  color: rgb(199, 136, 253);
  cursor: pointer;
  display: none;
}

#navbar-preview-subject-size[data-state="on"]{
  display: block;
}

#navbar-preview-subject-size #preview-maximize,
#navbar-preview-subject-size #preview-minimize{
  display: none;
}

#navbar-preview-subject-size #preview-maximize[data-state="on"],
#navbar-preview-subject-size #preview-minimize[data-state="on"]{
  display:block;
}

.navbar-hamburger{
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  pointer-events:none;
  display: none;
}

.navbar-hamburger i{
  font-weight:normal;
}

.navbar-brand {
  display: inline-block;
  padding:0.5rem 0;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand span{
  vertical-align: middle;
}

.navbar-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  display: block;
  padding: 0 1rem;
}

.navbar-nav[data-state="off"]{
  display: none;
}

@media (max-width: 1000px) {
  .navbar-nav{
    position: relative;
    background-color: #000;
    z-index: 10
  }

  #studio{
    padding-top:3rem;
  }
}

@media (max-width: 700px) {
  #studio{
    padding-top:0;
  }
}

.navbar-nav ul{
  list-style: none;
  padding: 1rem 0;
  display: inline-block;
  margin: 0;
}

@media (max-width: 1000px) {
  .navbar-nav ul{
    display: block;
    width: 100%;
    padding: 0.5rem 0;
  }
}

@media (max-width: 700px) {
  .navbar-nav ul{
    padding:0;
  }
}

.navbar-nav .subnav-cont{
  position: relative;
  color: #fff;
  display: none;
}

.navbar-nav .subnav-cont[data-state="on"]{
  display: block;
}

@media (max-width: 700px) {
  .navbar-nav .subnav-cont{
    display:block;
  }
}

.navbar-nav .subnav{
  margin-top: calc(1rem + 2px);
  background-color: #000;
  padding: 0 2rem 0 1rem;
  position: absolute;
  right: -0.5rem;
  border: solid 2px #707070;
  border-top: none;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.navbar-nav .subnav ul{
  padding:0.5rem 0;
  display: block;
}

@media (max-width: 1000px) {
  .navbar-nav .subnav{
    margin-top: 0.5rem;
    left:0.5rem;
    right: unset;
  }
}

@media (max-width: 700px) {
  .navbar-nav .subnav{
    margin-top: 0;
    position: unset;
    border: none;
    padding: 0 0 0 2rem;
  }
}

.navbar-nav .nav-item{
  position: relative;
  font-size: 1.25rem;
  display: inline;
  cursor: pointer;
  z-index: 20;
  white-space: nowrap;
}

.navbar-nav .subnav .nav-item{
  white-space: nowrap;
  padding: 0.5rem 0;
  display: none;
  /*display: block;*/
}

@media (max-width: 700px) {
  .navbar-nav{
    z-index: 20;
    display: none;
  }

  .navbar-nav[data-state="on"]{
    display: block;
  }

  .navbar-nav .nav-item{
    display: list-item;
    padding: 0;
  }

  .navbar-nav .nav-item:has(span[data-state="on"]){
    padding:0.5rem 0;
  }

  .navbar-hamburger{
    pointer-events :all; 
    display: block;
  }

  .navbar-nav .nav-item #close-menu{
    display: inline; 
  }

  .navbar-nav .nav-item #close-menu i{
    font-weight: normal;
  }
}

.navbar-nav .nav-item span{
  padding: 0 0.5rem;
}

.navbar-nav .nav-item a{
  text-decoration: none;
  color: inherit;
}

.navbar-nav #profile,
.navbar-nav #login{
  display: none;
}

.navbar-nav #profile .profile{
  padding:0 0 0 0.25rem;
}

.navbar-nav #profile i.fa-caret-down,
.navbar-nav #profile i.fa-caret-up{
  display: none;
}

.navbar-nav #profile i.fa-caret-down[data-state="on"],
.navbar-nav #profile i.fa-caret-up[data-state="on"]{
  cursor: pointer;
  display: inline;
}

.navbar-nav #profile[data-state="on"],
.navbar-nav #login[data-state="on"]{
  cursor: pointer;
  display: inline;
}

.navbar-nav #profile[data-menu="expanded"]{
  color: rgb(199, 136, 253);
}

.navbar-nav .nav-item .nav-cmd,
.navbar-nav .nav-item .nav-link{
  display: none;
}

.navbar-nav .nav-item .nav-cmd[data-state="on"],
.navbar-nav .nav-item .nav-link[data-state="on"],
.navbar-nav .subnav .nav-item .nav-link{
  display: inline;
}

.navbar-nav .subnav .nav-item[data-state="on"]{
  display: block;
  padding:0 0 0.5rem 0;
}

.navbar-nav .subnav .nav-item .nav-link{
  padding:0;
}

.navbar-nav .nav-item .nav-link:hover,
.navbar-nav .nav-item .nav-link:focus,
.navbar-nav .nav-item .nav-link:active,
.navbar-nav .nav-item .nav-link[data-selected="true"]{
  color:rgb(199, 136, 253);
}

.navbar-nav .nav-item .nav-link[data-selected="true"]{
  pointer-events:none;
  cursor: default;
}

.navbar-nav .subnav .nav-item:hover,
.navbar-nav .subnav .nav-item:active,
.navbar-nav .subnav .nav-item:focus{
  color:rgb(199, 136, 253);
}

.navbar-nav .nav-item .nav-cmd{
  position: relative;
  color: #fff;
  background-color: rgb(199, 136, 253);
}

.logo-img{
  width: 40px;
  vertical-align: middle;
}

/*=============== INPUTS =================*/
.inputfile{
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

input[type=text]{
  border: none;
  background-color: #5D5D5D;
  color: #fff;
  min-width: 20rem;
  width: calc(100% - 1rem);
  padding: 0.75rem 0.5rem;
  margin: 0.25rem 0;
  cursor: pointer;
  vertical-align: middle;
  display: block;
  border-radius: 5px;
  font-size: inherit;
  outline:none;
}

@media (max-width: 420px) {
  input[type=text]{
    min-width: unset;
  }
}

textarea{
  display: block;
  width: calc(100% - 1rem);
  margin: 0.25rem 0;
  resize:none;
  background-color: #5D5D5D;
  padding: 0.75rem 0.5rem;
  font-size: inherit;
  font-family: inherit;
  border-radius: 5px;
  color: inherit;
  outline:none;
}

input[type="text"]:focus,
input[type="text"]:hover,
textarea:focus,
textarea:hover{
  outline-width: 2px;
  outline-color: rgb(199, 136, 253);
  outline-style: solid;
}

input[type=text]::placeholder,
textarea::placeholder{
  color: #7d7d7d;
}

input[type=radio] {
  --input-radio-size: 1.25rem;     /* control the size */
  --input-radio-color: #fff; /* the active color */
  --input-radio-checked-color:rgb(199, 136, 253);
  margin: 0 0.25rem;
  height: var(--input-radio-size);
  aspect-ratio: 1;
  border: calc(var(--input-radio-size)/8) solid #ffffff;
  padding: calc(var(--input-radio-size)/8);
  background: 
     radial-gradient(farthest-side,var(--input-radio-color) 94%,#0000) 
     50%/0 0 no-repeat content-box;
  border-radius: 50%;
  outline-offset: calc(var(--input-radio-size)/10);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  font-size: inherit;
  transition: .3s;
}
input[type=radio]:checked {
  /*border-color: var(--input-radio-color);*/
  border-color: var(--input-radio-checked-color);
  background: 
     radial-gradient(farthest-side,var(--input-radio-checked-color) 94%,#0000) 
     50%/0 0 no-repeat content-box;
  background-size: 100% 100%;
}

input[type=radio]:disabled {
  background: 
     linear-gradient(#939393 0 0) 
     50%/100% 20% no-repeat content-box;
  opacity: .5;
  cursor: not-allowed;
}

@media print {
  input[type=radio] {
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    background: none;
  }
}

label {
  display:inline-flex;
  align-items:center;
  margin:0;
  cursor: pointer;
}

.checkbox *,
.checkbox ::after,
.checkbox ::before {
  box-sizing: border-box;
}
.checkbox [type=checkbox].substituted {
  margin: 0;
  width: 0;
  height: 0;
  display: inline;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.checkbox [type=checkbox].substituted + label:before {
  content: "";
  display: inline-block;
  vertical-align: top;
  height: 1.15em;
  width: 1.15em;
  margin-right: 0.6em;
  color: rgba(0, 0, 0, 0.275);
  border: solid 0.06em;
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em inset, 0 0 0 0.07em transparent inset;
  border-radius: 0.2em;
  background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="white" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>') no-repeat center, white;
  background-size: 0;
  will-change: color, border, background, background-size, box-shadow;
  transform: translate3d(0, 0, 0);
  transition: color 0.1s, border 0.1s, background 0.15s, box-shadow 0.1s;
}
.checkbox [type=checkbox].substituted:enabled:active + label:before,
.checkbox [type=checkbox].substituted:enabled + label:active:before {
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset;
  background-color: #f0f0f0;
}
.checkbox [type=checkbox].substituted:checked + label:before {
  background-color: #3B99FC;
  background-size: 0.75em;
  color: rgba(0, 0, 0, 0.075);
}
.checkbox [type=checkbox].substituted:checked:enabled:active + label:before,
.checkbox [type=checkbox].substituted:checked:enabled + label:active:before {
  background-color: #0a7ffb;
  color: rgba(0, 0, 0, 0.275);
}
.checkbox [type=checkbox].substituted:focus + label:before {
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(199, 136, 253, 0.55), 0 0 0 5px rgba(199, 136, 253, 0.3);
}
.checkbox [type=checkbox].substituted:focus:active + label:before,
.checkbox [type=checkbox].substituted:focus + label:active:before {
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(0, 0, 0, 0.1) inset, 0 0 0 3.3px rgba(199, 136, 253, 0.55), 0 0 0 5px rgba(199, 136, 253, 0.3);
}
.checkbox [type=checkbox].substituted:disabled + label:before {
  opacity: 0.5;
}

.checkbox [type=checkbox].substituted.dark + label:before {
  color: rgba(255, 255, 255, 0.275);
  background-color: #222;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xml:space="preserve" fill="rgba(34, 34, 34, 0.999)" viewBox="0 0 9 9"><rect x="0" y="4.3" transform="matrix(-0.707 -0.7072 0.7072 -0.707 0.5891 10.4702)" width="4.3" height="1.6" /><rect x="2.2" y="2.9" transform="matrix(-0.7071 0.7071 -0.7071 -0.7071 12.1877 2.9833)" width="6.1" height="1.7" /></svg>');
}
.checkbox [type=checkbox].substituted.dark:enabled:active + label:before,
.checkbox [type=checkbox].substituted.dark:enabled + label:active:before {
  background-color: #444;
  box-shadow: 0 0 0.04em, 0 0.06em 0.16em -0.03em transparent inset, 0 0 0 0.07em rgba(199, 136, 253, 0.1) inset;
}
.checkbox [type=checkbox].substituted.dark:checked + label:before {
  background-color: rgb(199, 136, 253);
  color: rgba(255, 255, 255, 0.075);
}
.checkbox [type=checkbox].substituted.dark:checked:enabled:active + label:before,
.checkbox [type=checkbox].substituted.dark:checked:enabled + label:active:before {
  background-color: rgb(199, 136, 253);
  color: rgba(0, 0, 0, 0.275);
}
.checkbox [type=checkbox].substituted + label {
  -webkit-user-select: none;
  user-select: none;
}

/*=============== FEEDBACK =================*/
.feedback,
#bubble-feedback,
#interactivity-link-feedback{
  display: none;
  width: 100%;
  color:#fd8888;
  text-align: center;
  font-size: 1.25rem;
}

.feedback[data-state="on"],
#bubble-feedback[data-state="on"],
#interactivity-link-feedback[data-state="on"]{
  display: block;
}

#bubble-feedback,
#interactivity-link-feedback{
  margin-bottom:1rem;
}

/*=============== COMMANDS =================*/
.cmds-cont{
  width: 100%;
  text-align: center;
  margin: 1rem 0;
}

.button{
  display: inline-block;
  padding: 0.5rem 2.5rem;
  background-color: #707070;
  color: #fff;
  border-radius: 8px;
  font-size: 1.25rem;
  margin: 0.5rem;
  cursor: pointer;
  outline:none;
  text-align: center;
  min-width: 4rem;
  white-space:nowrap;
}

.button.pill{
  font-size: 1rem;
  border-radius: 20px;
  padding: 0.5rem 1rem;
}

@media (max-width: 1000px) {
  .button{
    font-size:1.125rem;
  }
}

@media (max-width: 700px) {
  .button{
    font-size:1rem;
  }
}

.button[data-row-spacing="true"]{
   margin-bottom:1rem;
}

.button[data-state="off"]{
  display: none;
  pointer-events:none;
}

.button:hover,
.button:active,
.button:focus,
.button[data-state="active"]{
  background-color: rgb(199, 136, 253);
}

.button[data-disabled="true"],
.button[data-disabled="true"]:hover,
.button[data-disabled="true"]:active,
.button[data-disabled="true"]:focus{
  background-color: lightgray;
  color: #000;
  cursor: default;
  pointer-events:none;
}

.cmd{
  cursor: pointer;
}

.cmd[data-state="disabled"]{
  cursor: default;
  color: #5D5D5D;
  pointer-events:none;
}

.cmd:hover,
.cmd:active,
.cmd:focus,
.cmd[data-state="selected"]{
  color: rgb(199, 136, 253);
}

.cmd:focus{
  outline-width: 2px;
  outline-color: rgb(199, 136, 253);
  outline-style: solid;
}

.cmd[data-state="disabled"]:hover,
.cmd[data-state="disabled"]:active,
.cmd[data-state="disabled"]:focus{
  color: #5D5D5D;
}

.cmds-group[data-state="off"]{
  display: none;
}

/*=============== SYMBOLS ================*/
.fa-diamond-exclamation{
  color:rgb(199, 136, 253);
}

/*=============== HEADER =================*/
.header{
  text-align: center;
  /*height: 14rem;
  padding: 0 1rem;*/
  padding: 0 1rem 1rem 1rem;
}

.header[data-state="off"]{
  display: none;
}

.header h1{
  font-size: 4rem;
  margin-bottom: 0.5rem;
  font-weight: normal;
}

@media (max-width: 1000px) {
  .header h1{
    font-size:3rem;
  }
}

.header h1 div{
  display: inline-block;
  padding: 0 0.5rem;
  background: linear-gradient(.25turn, rgb(199, 136, 253),rgb(199, 136, 253) 50%, rgb(138, 2, 255));
}

.header h2{
  font-size: 1.5rem;
  font-weight: normal;
  margin-top: 0.5rem;
}

#main-header #product-hunt,
#main-header #product-hunt-webflow{
  display: inline-block;
  vertical-align: middle;
  padding-right: 1rem;
}

#main-header .bmc-btn-container{
  position:relative;
  display: inline-block;
  vertical-align: middle;
  top:-0.25rem;
}

#main-header .bmc-btn-container span{
  margin-left: 0;
  padding-left: 10px;
  text-align: left;
}

@media (max-width: 835px) {
  #main-header .bmc-btn-container{
    top:unset;
    vertical-align:unset;
    display: block;
    margin-top: 0.5rem;
  }
}

@media (max-width: 570px) {
  #main-header #product-hunt,
  #main-header #product-hunt-webflow{
    display: block;
    vertical-align: unset;
    padding-right: 0;
  }
}

.gallery-header{
  position: sticky;
  top: 0;
  z-index: 10;
  background: #1f1f1f;
  padding: 1rem 0;
  margin: 0;
  text-align: center;
  font-size: 2rem;
  font-weight: normal;
}

.gallery-header[data-state="off"]{
  display: none;
}

@media (max-width: 1080px) {
  .gallery-header{
    font-size: 1.75rem;
  }
}

@media (max-width:768px) {
  .gallery-header{
    font-size: 1.25rem;
    padding: 0.5rem 0;
  }
}

@media (max-width: 1000px) {
  .header h1{
    font-size: 3rem;
  }
}

@media (max-width: 765px) {
  .header{
    height: unset;
  }

  .header h1{
    font-size: 2.5rem;
  }

  .header h2{
    font-size: 1.25rem;
  }
}

@media (max-width: 650px) {
  .header{
    height: unset;
  }
  
  .header h1{
    font-size: 2rem;
  }

  .header h2{
    font-size: 1.12rem;
  }

  .navbar-brand span{
    font-size: 1.125rem;
  }
}

@media (max-width: 500px) {
  .header h1{
    font-size: 1.75rem;
  }

  .header h2{
    font-size: 1rem;
  }

  .iotd_header{
    font-size: 1.5rem;
    margin: 2rem 0.5rem;
  }
}

@media (max-width: 420px) {
  .header h2{
    font-size: 1rem;
  }

  .iotd_header{
    font-size: 1.5rem;
    margin: 2rem 0.5rem;
  }
}

/*=============================================
/*
/*       SIGNIN & MODERATION & PROCESSING
/*
/==============================================*/
.signin,
#moderation,
#processing,
#deletion-confirmation,
#error-feedback,
#segmentation_mode,
#segmenting,
#bubble-custom-skin,
#bubble-custom-skin-save-dialog{
  position: fixed;
  background: #262626;
  z-index: 10000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border:solid 1px rgb(199, 136, 253);
  border-radius: 10px;
  color: #fff;
  padding: 1rem 3rem;
  font-size: 1.25rem;
  min-width: 40rem;
  display: none;
}

.signin{
  z-index: 10001;
}

#bubble-custom-skin{
  position: absolute;
}

.segmentation_screen{
  width: 100%;
  display: none;
}

.segmentation_screen[data-state="on"]{
  display: flex;
}

.signin,
#segmentation_mode{
  width:85%;
  padding: 0;
  min-width: unset;
  min-height: 85vh;
  margin-top: 2rem;
}

#segmentation_selection,
#segmentation_client_ai{
  background-color: #000000;
  border-radius: 10px;
}

#bubble-custom-skin{
  padding: 0;
  min-width: 1700px;
  left: 20px;
  right: 20px;
  transform: unset;
  top: 20px;
  /*bottom: 20px*/
  min-height: 90vh;
  background-color: #1f1f1f;
}

#bubble-custom-skin-save-dialog{
  min-height: 8em;
  padding: 3rem;
  flex-direction: column;
}

#segmenting{
  width:25%;
  padding: 0;
  min-width: unset;
  min-height: 15vh;
  margin-top: 2rem;
}

.signin[data-state="on"],
#segmentation_mode[data-state="on"],
#segmenting[data-state="on"],
#bubble-custom-skin[data-state="on"],
#bubble-custom-skin-save-dialog[data-state="on"]{
  display: flex;
}

.signin .fields,
#segmentation_mode .fields,
#segmenting .fields{
  position: relative;
  width: calc(40% - 4rem);
  display: inline-block;
  vertical-align: top;
  padding: 2rem;
}

#segmentation_mode .fields,
#segmentation_client_ai .fields{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  background-color: #262626;
}

#segmenting .fields{
  width: 100%;
  padding:2rem 0;
}

.signin .fields .navbar-brand,
#segmentation_mode .fields .navbard-brand,{
  padding-bottom: 3rem;
}

.signin .fields h2,
#segmentation_mode .fields h2,
#segmenting .fields h2{
  padding-bottom: 30px;
  font-size: 1.5em;
  text-align: left;
}

#segmenting .fields h2{
  text-align: center;
}

#segmentation_mode .fields label{
  display: block;
  margin-bottom: 1em;
}

#segmentation_mode .fields label input[type="radio"],
#segmentation_mode .fields label span{
  vertical-align: middle;
}

.signin .fields i{
  opacity: 0.6;
}

.signin .fields i:hover,
.signin .fields i:focus,
.signin .fields i:active{
  opacity: 1;
  color: rgb(199, 136, 253);
  cursor: pointer;
}

.signin .fields p{
  padding: 1rem 0;
  margin: 0;
  font-size: 1rem;
}

.signin .fields p span{
  opacity:0.6;
}

.signin .fields p a,
.signin .fields p a:focus,
.signin .fields p a:active,
.signin .fields p a:visited{
  color: rgb(199, 136, 253);
  cursor: pointer;
}

.signin .cmds-cont,
#segmentation_mode .cmds-cont{
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0rem 0.5rem 1rem 0;
}

.signin .cmds-cont[data-state="on"]{
  display: block;
}

.signin .more{
  position: relative;
  width: 60%;
  display: inline-block;
  background-image: url(/images/Main-Log-in-Screen-Updated.webp);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  height: inherit;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

#segmentation_mode .more,
#segmentation_client_ai .more{
  position: relative;
  width: 60%;
  display: inline-block;
  height: inherit;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin: auto;
  background-color: #000000;
}

.signin .more .centerer{
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  font-weight: bold;
  text-align: center;
  width: 100%;
}

.signin .more .centerer .slogan{
  font-size: 2rem;
  padding-bottom: 1.5rem;
}

.signin .more .centerer .with{
  font-size: 2.5rem;
  color: rgb(199, 136, 253);
  padding-bottom: 1.5rem;
}

.signin .more .centerer .point{
  font-weight: normal;
}

@media (max-width: 1550px) {
  .signin{
    width:95%;
  }
}

@media (max-width: 1150px) {
  .signin{
    min-height: unset;
  }

  .signin .fields .navbar-brand,
  .signin .fields h2{
    padding-bottom: 0;
  }

  .signin .more{
    display: none
  }

  .signin .fields{
    width: 100%;
  }

  .signin .cmds-cont{
    position: relative;
  }
}

@media (max-width: 850px) {
  .signin{
    position: absolute;
    width:95%;
    margin-top: 10rem;
  }
}

@media (max-width: 640px) {
  .signin .fields{
    padding:1rem;
  }
}

#error-feedback{
  padding-top: 2.5rem;
  border: 2px solid rgb(199, 136, 253);
}

#moderation[data-state="on"],
#processing[data-state="on"],
#deletion-confirmation[data-state="on"],
#error-feedback[data-state="on"]{
  display: block;
}

@media (max-width: 420px) {
  #error-feedback{
    padding: 1rem;
    width: calc(100% - 3rem);
    min-width: unset;
  }
}

#moderation h2,
#processing h2,
#deletion-confirmation h2,
#error-feedback h2{
  font-size: inherit;
  text-align: center;
  font-weight: normal;
  margin: 0;
}

#moderation p{
  text-align: justify;
}

#processing p,
#deletion-confirmation p,
#error-feedback p{
  text-align: center;
}

#moderation i{
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/*=============================================
/*
/*                  GALLERY
/*
/==============================================*/
#no-artwork{
  background: #1f1f1f;
  padding: 2rem 0;
  margin: 0;
  text-align: center;
  font-size: 2rem;
  font-weight: normal;
  padding-top: 1rem;
  display: none;
}

#no-artwork[data-state="on"]{
  display: block;
}

.gallery{
  display:grid;
  grid-auto-rows:min-content;
  grid-template-columns:repeat(3,1fr);
  grid-gap: 10px;
  grid-template-areas:
  "header header header"
  "main main main"
  "footer footer footer";
}

.gallery .header{
  grid-area: header;
  padding:1rem;
  position: fixed;
  z-index: 2;
  background: rgb(29 26 29 / var(--tw-bg-opacity));
  width: 100%;
}

.gallery .header .title{
  padding-bottom: 0.7em;
}

.gallery .main{
  grid-area: main;
  margin: 0 1rem;
}

@media (max-width: 700px) {
  .gallery .main{
      margin:0;
  }
}

.gallery .main[data-visible='true']{
  visibility: visible;
}

.gallery .footer{
    grid-area: footer;
}

.masonry-wrapper {
  margin-left: auto;
  margin-right: auto;
  padding-right: 1.5em;
  padding-left: 1.5em; 
}

@media (max-width: 700px) {
  .masonry-wrapper{
      padding:0;
  }
}

.masonry {
  display: grid;
  grid-gap: 0.5em;
  grid-template-columns:repeat(auto-fill, minmax(400px,1fr));
  grid-auto-rows: 0.0125em;
}

@media (max-width: 452px) {
  .masonry{
      display: block;
  }
}

.masonry-brick {
  color: #ffffff;
  transition: opacity .25s ease-in-out;
  position: relative;
  cursor: pointer;
  margin: 0px 10px;
}

@media (max-width: 452px) {
  .masonry-brick{
      margin-bottom: 1rem;
  }
}

.masonry-content{
  position: relative;
}

.masonry-content[data-nsfw="true"]:before{
  z-index:2;
  padding: 10px;
  font-size:1em;
  position:absolute;
  top: 50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius: 10px;
  color:#fff;
  content: 'View NSFW Content';
  background: rgb(199, 136, 253);
  white-space: nowrap;
  font-size: 1rem;
}

.masonry-content img{
  border-radius: 15px;
  width: 100%;
  vertical-align: middle;
  padding: 10px 0;
}

.masonry-content:hover img,
.masonry-content[data-hover="true"] img{
  opacity: .5;
}

.masonry-content[data-nsfw="true"] img{
  webkit-filter: blur(10px); 
  filter: blur(10px);
}

.masonry-overlay{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  font-size: 1.25rem;
  display: none;
}

.masonry-overlay[data-state="on"]{
  display: block;
}

.masonry-overlay .top-row-cnt{
  position: absolute;
  top: 1rem;
  width: 100%;
  pointer-events:none;
}

.masonry-overlay .top-row-cnt .top-row{
  position: relative;
  height: 3rem;
  line-height: 3rem;
  width: 100%;
}

.masonry-overlay .top-row-cnt .top-row .flag{
  width: unset;
  vertical-align: unset;
  opacity: unset;
  padding-left:1rem;
  display: none
}

.masonry-overlay .top-row-cnt .top-row .flag[data-state="on"]{
  display: inline-block;
}

.masonry-overlay .top-row-cnt .top-row .menu{
  position: absolute;
  left: 1rem;
  pointer-events:none;
  display: none;
}

.masonry-overlay .top-row-cnt .top-row .menu[data-state="on"]{
  display: block;
}

.masonry-overlay .top-row-cnt .top-row .likes{
  position: absolute;
  right: 1rem;
  line-height: inherit;
  height: inherit;
}

.masonry-overlay .bottom-row-cnt{
  position: absolute;
  bottom: 1rem;
  width: 100%;
  pointer-events:none;
}

.masonry-overlay .bottom-row-cnt .bottom-row{
  padding: 0 0 0 1rem;
  height: 3rem;
  line-height: 3rem;
  width: calc(100% - 1rem);
}

.masonry-overlay .bottom-row-cnt .bottom-row .views{
  position: absolute;
  right: 1rem;
  line-height: inherit;
  height: inherit;
}

.masonry-overlay .top-row-cnt .top-row .nlikes,
.masonry-overlay .bottom-row-cnt .bottom-row .nviews{
  padding: 0 0 0 0.25rem;
}

#no-iotd{
  min-height: 20vh;
  width: 100%;
  width: calc(100% - 6rem);
  margin: auto;
  border-radius: 10px;
  border: solid #707070 2px;
  background-color: #1f1f1f;
  position: relative;
  display: none;
}

@media (max-width: 700px) {
  #no-iotd{
    min-height: 10rem;
    width: calc(100% - 1rem);
  }
}

#no-iotd[data-state="on"]{
  display: block;
}

#no-iotd .msg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 90%;
  text-align: center;
  font-size: 1.15rem;
}

#iotd-nav{
  margin: 0 4rem;
  position: relative;
}

#iotd-nav #iotd-next-cont{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/*=============================================
/*
/*               EMBED WIZARD
/*
/==============================================*/
#embed-wizard{
  background-color: #262626;
  width: 50%;
  margin: 5% auto;
  padding: 2rem;
  border-radius: 10px;
  text-align: left;
  display: none;
}

@media (max-width: 800px) {
  #embed-wizard{
    width: 100%;
    padding: 2rem 0 4rem 0;
  }
}

#embed-wizard[data-state="on"]{
  display: block;
}

#embed-wizard a,
.account-widget a,
#embed-wizard a:focus,
.account-widget a:focus,
#embed-wizard a:hover,
.account-widget a:hover,
#embed-wizard a:visited,
.account-widget a:visited,
#embed-wizard a:active,
.account-widget a:active{
  color: rgb(199, 136, 253);
  text-decoration: none;
  cursor: pointer;
}

#embed-wizard #guide{
  padding: 1rem 1rem 0 1rem;
  position: relative;
}

#embed-wizard .step{
  display: none;
}

#embed-wizard .step[data-state="on"]{
  display: block;
}

#guide .header,
#guide .subheader{
  color: #ffffff;
}

#guide .header{
  font-size: 1.5rem;
  text-align: left;
  height: unset;
  padding: 0;
}

#guide .subheader{
  font-size: 1.25rem;
}

#guide .error{
  color:#fd8888;
  text-align: center;
  opacity:1;
  margin-bottom:0;
}

#guide p{
  font-size: 1rem;
  opacity: 0.6;
  margin: 0.5rem 0;
}

#guide input[type="text"]{
  width: 50%;
}

@media (max-width: 420px) {
  #guide input[type="text"]{
    width:20rem;
  }
}

#guide .builders{
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  width: 50%;
  list-style-type: disclosure-closed;
  color: rgb(199, 136, 253);
}

@media (max-width: 800px) {
  #guide .builders{
    width: 100%;
    padding-inline-start:20px;
  }
}

#guide #builders li{
  cursor: pointer;
}

#embed-wizard .cmds{
  position: relative;
  min-height: 3.5rem;
  margin-top: 0.5rem;
}

#embed-wizard .cmds .previous,
#embed-wizard .cmds .next{
  position: absolute;
}

#embed-wizard .cmds .next{
  right: 0;
}

#embed-wizard .cmds .previous{
  background-color: #000;
  border: solid 2px #707070;
  color: #fff;
}

#embed-wizard .cmds .previous:hover,
#embed-wizard .cmds .previous:active,
#embed-wizard .cmds .previous:focus{
  color: rgb(199, 136, 253);
}

#guide .code{
  background-color: #000;
  border: solid 2px #fff;
  padding: 1rem 1rem 3rem 1rem;
  border-radius: 10px;
  color: #fff;
  position: relative;
}

#guide .code i{
  position: absolute;
  bottom: 0.5rem;
  font-size: 1.5rem;
  right: 0.5rem;
  cursor: pointer;
}

#guide .code i:hover{
  color: rgb(199, 136, 253);
}

#guide #embed-code-copied,
#guide #smartlink-code-copied{
  position: relative;
  white-space: nowrap;
  top: 0;
  left: 100px;
}

#guide .checkbox{
  margin-top: 1rem;
}

#guide #builders-panel .builders-cnt{
  padding: 20px;
  margin: 20px;
  text-align: center;
}

#guide #builders-panel .builder{
  margin:20px;
  padding: 20px 20px 10px 20px;
  background-color: #fff;
  display: inline-block;
  border-radius: 10px;
  cursor: pointer;
  border: solid 4px #fff;
}

#guide #builders-panel .builder:hover,
#guide #builders-panel .builder:active,
#guide #builders-panel .builder:focus{
  border: solid 4px rgb(199, 136, 253);
}

#guide #builders-panel .builder img{
  width: 100%;
  max-width: 150px;
  display: block;
}

#guide #builders-panel .builder .name{
  color: #000;
  text-align: center;
  font-size: 1.25em;
  font-weight: bold;
  padding: 5px 0;
}

#embed-wizard .embed-help{
  padding: 1rem 1rem 0 1rem;
  text-align: right;
}

#embed-wizard .embed-help a{
  text-decoration: underline;
}

/*=============================================
/*
/*             ARTWORK DIALOG
/*
/==============================================*/
#artwork_dialog{
  border: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgba(255,255,255,.6);
  cursor: zoom-out;
  scrollbar-gutter: stable;

  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  overflow-y: auto;
  overflow-x:hidden;
  width: 100%;
  display: none;
}

#artwork_dialog[data-state="on"]{
  display: block;
}

#artwork_dialog .wrapper{
  cursor: auto;
  display: flex;
  outline: none;
  min-height: 100%;
  padding-top: 32px;
  cursor: zoom-out;
}

@media (min-width: 1400px) {
  #artwork_dialog .wrapper{
    padding-left: 120px;
    padding-right: 120px;
  }
}

@media (min-width: 768px) {
  #artwork_dialog .wrapper{
    padding-bottom: 100px;
  }
}

#artwork_dialog #close-dg{
  left: 0;
  margin-left: 8px;
  margin-top: 8px;
  top: 0;
  fill: #000;
  pointer-events:auto;
  position: fixed;
}

#artwork_dialog #close-dg .button{
  background-color: transparent;
  border: none;
  font-weight: inherit;
  padding: 0;
  text-align: inherit;
  fill: #000;
  opacity: .8;
  position: relative;
  transition: all .1s ease-in-out;
  -webkit-appearance: button;
  line-height: inherit;
  color: inherit;
  cursor: pointer;
  text-transform: none;
  overflow: visible;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

#artwork_dialog #close-dg .button:before{
  content: "";
  inset: -12px -12px -12px -12px;
  position: absolute;
}

#artwork_dialog #close-dg .button svg{
  display: block;
  height: 24px;
  width: 24px;
}

#artwork_dialog .nav-dg{
  align-items: center;
  bottom: 0;
  display: flex;
  position: fixed;
  top: 0;
  display: none;
}

@media (max-width: 767px){
  #artwork_dialog .nav-dg {
      display: none;
  }
}

#artwork_dialog .nav-dg.left{
  left:0;
}

#artwork_dialog .nav-dg.right{
  right:0;
}

#artwork_dialog .nav-dg a{
  display: flex;
  padding-bottom: 80px;
  padding-top: 80px;
  pointer-events: auto;
  color: #000;
  text-decoration-skip-ink: auto;
  transition: color .1s ease-in-out,opacity .1s ease-in-out;
  cursor: pointer;
}

#artwork_dialog .nav-dg a:[data-state="off"]{
  display: none;
}

#artwork_dialog .nav-dg a:hover,
#artwork_dialog .nav-dg a:focus,
#artwork_dialog .nav-dg a:active{
  color:#111;
}

@media (min-width: 768px) and (min-width: 1400px){
  #artwork_dialog .nav-dg a {
      padding-left: 44px;
      padding-right: 44px;
  }
}

#artwork_dialog .nav-dg a svg{
  height: 32px;
  width: 32px;
  fill: #000;
}

#artwork_dialog .nav-dg a:not(:active) svg{
  transition: fill .3s;
}

#artwork_dialog #content-dg{
  position: relative;
  background-color: #1f1f1f;
  border-radius: 8px;
  min-width: 0;
  pointer-events: auto;
  width: 100%;
  padding-bottom:2rem;
  cursor:default;
}

@media (max-width: 1400px) {
  #artwork_dialog #content-dg{
    border-radius: 0px;
  }
}

#artwork_dialog #content-dg #ugc404{
  height: 100%;
  position: relative;
}

#artwork_dialog #content-dg #ugc404 img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40rem;
}
/*=============================================
/*
/*             FLEX ROWS & COLUMNS
/*
/==============================================*/
.flex-row{
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  justify-content:center;
}

.flex-col,
.flex-col-2,
.flex-col-3{
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.flex-col-2{
  -ms-flex: 0 0 48%;
  flex: 0 0 48%;
}

.flex-col-3{
  -ms-flex: 0 0 30%;
  flex: 0 0 30%;
}