@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&family=Space+Grotesk:wght@300..700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --fs-sidebar-width: 500px;
  --fs-sidebar-menu-width: 50px;
  --fs-sidebar-closed-width: calc(500px - 50px);
  --fs-sidebar-open-width: var(--fs-sidebar-width);
}

:root {
  --color-martini-50: rgb(12, 14, 20);
  --color-martini-50-rgb: 12, 14, 20;
  --color-martini-100: rgb(18, 26, 43);
  --color-martini-100-rgb: 18, 26, 43;
  --color-martini-200: rgb(29, 41, 61);
  --color-martini-200-rgb: 29, 41, 61;
  --color-martini-300: rgb(49, 65, 88);
  --color-martini-300-rgb: 49, 65, 88;
  --color-martini-400: rgb(69, 85, 108);
  --color-martini-400-rgb: 69, 85, 108;
  --color-martini-500: rgb(98, 116, 142);
  --color-martini-500-rgb: 98, 116, 142;
  --color-martini-600: rgb(144, 161, 185);
  --color-martini-600-rgb: 144, 161, 185;
  --color-martini-700: rgb(202, 213, 226);
  --color-martini-700-rgb: 202, 213, 226;
  --color-martini-800: rgb(226, 232, 240);
  --color-martini-800-rgb: 226, 232, 240;
  --color-martini-850: rgb(235, 239, 245);
  --color-martini-850-rgb: 235, 239, 245;
  --color-martini-900: rgb(243, 245, 249);
  --color-martini-900-rgb: 243, 245, 249;
  --color-martini-950: rgb(249, 250, 252);
  --color-martini-950-rgb: 249, 250, 252;
  --color-martini-shadow: rgb(29, 41, 61);
  --color-martini-shadow-rgb: 29, 41, 61;
  --color-martini-accent: rgb(105, 80, 243);
  --color-martini-accent-rgb: 105, 80, 243;
  --color-martini-accent-hover: rgb(120, 95, 255);
  --color-martini-accent-hover-rgb: 120, 95, 255;
  --color-martini-black: rgb(233, 233, 233);
  --color-martini-black-rgb: 233, 233, 233;
  --color-martini-white: rgb(0, 0, 0);
  --color-martini-white-rgb: 0, 0, 0;
  --color-martini-success: rgb(20, 210, 110);
  --color-martini-success-rgb: 20, 210, 110;
}

[data-theme=dark] {
  --color-martini-950: rgb(12, 14, 20);
  --color-martini-950-rgb: 12, 14, 20;
  --color-martini-900: rgb(15, 20, 33);
  --color-martini-900-rgb: 15, 20, 33;
  --color-martini-850: rgb(18, 26, 41);
  --color-martini-850-rgb: 18, 26, 41;
  --color-martini-800: rgb(22, 32, 49);
  --color-martini-800-rgb: 22, 32, 49;
  --color-martini-700: rgb(49, 65, 88);
  --color-martini-700-rgb: 49, 65, 88;
  --color-martini-600: rgb(69, 85, 108);
  --color-martini-600-rgb: 69, 85, 108;
  --color-martini-500: rgb(98, 116, 142);
  --color-martini-500-rgb: 98, 116, 142;
  --color-martini-400: rgb(144, 161, 185);
  --color-martini-400-rgb: 144, 161, 185;
  --color-martini-300: rgb(202, 213, 226);
  --color-martini-300-rgb: 202, 213, 226;
  --color-martini-200: rgb(226, 232, 240);
  --color-martini-200-rgb: 226, 232, 240;
  --color-martini-100: rgb(249, 243, 244);
  --color-martini-100-rgb: 249, 243, 244;
  --color-martini-50: rgb(252, 249, 250);
  --color-martini-50-rgb: 252, 249, 250;
  --color-martini-shadow: rgb(12, 14, 20);
  --color-martini-shadow-rgb: 12, 14, 20;
  --color-martini-accent: rgb(81, 58, 211);
  --color-martini-accent-rgb: 81, 58, 211;
  --color-martini-accent-hover: rgb(96, 72, 229);
  --color-martini-accent-hover-rgb: 96, 72, 229;
  --color-martini-black: rgb(17, 17, 17);
  --color-martini-black-rgb: 17, 17, 17;
  --color-martini-white: rgb(239, 239, 239);
  --color-martini-white-rgb: 239, 239, 239;
  --color-martini-success: rgb(20, 210, 110);
  --color-martini-success-rgb: 20, 210, 110;
}

@keyframes drop-down {
  0% {
    opacity: 0;
    transform: scaleY(0.95);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}
h1, h2, h3, h4, h5, h6, .title {
  font-family: "Manrope", "Helvetica", "Arial", sans-serif;
  font-weight: 600;
  line-height: 1.2em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.8em;
}

h3 {
  font-size: 1.6em;
}

h4 {
  font-size: 1.4em;
}

h5 {
  font-size: 1.2em;
}

h6 {
  font-size: 1em;
}

h1, .title {
  font-size: 2em;
}

.font-xxs {
  font-size: 0.7em;
}

.font-xs {
  font-size: 0.8em;
}

.font-sm {
  font-size: 0.9em;
}

.font-md {
  font-size: 1em;
}

.font-lg {
  font-size: 1.25em;
}

.font-xl {
  font-size: 1.5em;
}

.font-xxl {
  font-size: 2em;
}

.font-italic {
  font-style: italic;
}

.font-bold {
  font-weight: bold;
}

.text-center {
  text-align: center;
}

.color-warning {
  color: rgb(188, 32, 67) !important;
}
.color-warning i {
  color: rgb(188, 32, 67) !important;
}
.color-warning:hover {
  color: rgb(218, 14, 60) !important;
}
.color-warning:hover i {
  color: rgb(218, 14, 60) !important;
}

span.warning, p.warning, h1.warning, h2.warning, h3.warning, h4.warning, h5.warning, h6.warning, label.warning, i.warning {
  color: rgb(188, 32, 67);
}
span.success, p.success, h1.success, h2.success, h3.success, h4.success, h5.success, h6.success, label.success, i.success {
  color: rgb(188, 32, 67);
}

body {
  font-family: "Rubik", "Helvetica", "Arial", sans-serif;
  background: var(--color-martini-950);
  color: var(--color-martini-white);
  font-size: 1em;
  line-height: 1.2em;
}
body.editing {
  overscroll-behavior-x: contain;
}
body.no-scroll {
  touch-action: none;
  overflow: hidden;
}

a {
  color: var(--color-martini-white);
}
a:hover {
  color: var(--color-martini-white);
}

* {
  box-sizing: border-box;
}

i {
  font-style: italic;
  pointer-events: none;
}
em {
  font-style: italic;
}

b,
strong {
  font-weight: bold;
}

.hidden {
  display: none !important;
}

.flex {
  display: flex;
  gap: 1em;
  flex-wrap: wrap;
  align-content: start;
  box-sizing: border-box;
}

.flex-row {
  flex-flow: row !important;
}
@media (max-width: 48rem) {
  .flex-row {
    flex-flow: column !important;
  }
}

.flex-column {
  flex-flow: column !important;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.content-center {
  align-content: center;
}

.items-start {
  align-items: start;
}

.items-end {
  align-items: end;
}

.items-center {
  align-items: center;
}

.flex-grow {
  grow: 1;
}

.gap-xxs {
  gap: 0.1875em;
}

.gap-xs {
  gap: 0.375em;
}

.gap-sm {
  gap: 0.75em;
}

.gap-md {
  gap: 1em;
}

.gap-lg {
  gap: 1.25em;
}

.gap-xl {
  gap: 1.5625em;
}

.gap-xl {
  gap: 1.953125em;
}

.gap-5 {
  gap: 5px;
}

.gap-10 {
  gap: 10px;
}

.gap-15 {
  gap: 15px;
}

.gap-20 {
  gap: 20px;
}

.gap-25 {
  gap: 25px;
}

.mb-xs {
  margin-bottom: 5px;
}

.mb-sm {
  margin-bottom: 10px;
}

.mb-md {
  margin-bottom: 15px;
}

.mb-lg {
  margin-bottom: 20px;
}

.mb-xl {
  margin-bottom: 30px;
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mt-0 {
  margin-top: 0px;
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.ml-0 {
  margin-left: 0px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-55 {
  margin-left: 55px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-65 {
  margin-left: 65px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-75 {
  margin-left: 75px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-85 {
  margin-left: 85px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-95 {
  margin-left: 95px;
}

.ml-100 {
  margin-left: 100px;
}

.mr-0 {
  margin-right: 0px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-55 {
  margin-right: 55px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-65 {
  margin-right: 65px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-75 {
  margin-right: 75px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-85 {
  margin-right: 85px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-95 {
  margin-right: 95px;
}

.mr-100 {
  margin-right: 100px;
}

@media all and (orientation: portrait) {
  .show-portrait {
    display: flex !important;
  }
}

@media all and (orientation: landscape) {
  .show-landscape {
    display: flex !important;
  }
}

@media (max-width: 112rem) {
  .show-xxxl {
    display: flex !important;
  }
}

@media (max-width: 96rem) {
  .show-xxl {
    display: flex !important;
  }
}

@media (max-width: 80rem) {
  .show-xl {
    display: flex !important;
  }
}

@media (max-width: 64rem) {
  .show-lg {
    display: flex !important;
  }
}

@media (max-width: 48rem) {
  .show-md {
    display: flex !important;
  }
}

@media (max-width: 40rem) {
  .show-sm {
    display: flex !important;
  }
}

@media all and (orientation: portrait) {
  .hide-portrait {
    display: none !important;
  }
}

@media all and (orientation: landscape) {
  .hide-landscape {
    display: none !important;
  }
}

@media (max-width: 112rem) {
  .hide-xxxl {
    display: none !important;
  }
}

@media (max-width: 96rem) {
  .hide-xxl {
    display: none !important;
  }
}

@media (max-width: 80rem) {
  .hide-xl {
    display: none !important;
  }
}

@media (max-width: 64rem) {
  .hide-lg {
    display: none !important;
  }
}

@media (max-width: 48rem) {
  .hide-md {
    display: none !important;
  }
}

@media (max-width: 40rem) {
  .hide-sm {
    display: none !important;
  }
}

.w-auto {
  width: auto;
}

.w-25 {
  width: calc(25% - 0.5em);
}

.w-33 {
  width: calc(33.3333% - 0.5em);
}

.w-40 {
  width: calc(40% - 0.5em);
}

.w-60 {
  width: calc(60% - 0.5em);
}

.w-50 {
  width: calc(50% - 0.5em);
}

.w-66 {
  width: calc(66.6666% - 0.5em);
}

.w-75 {
  width: calc(75% - 0.5em);
}

.w-100 {
  width: calc(100% - 0.5em);
}

@media (max-width: 375px) {
  .xs-w-25 {
    width: calc(25% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-25 {
    width: calc(25% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-25 {
    width: calc(25% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-25 {
    width: calc(25% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-25 {
    width: calc(25% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-25 {
    width: calc(25% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-25 {
    width: calc(25% - 0.5em);
  }
}

@media (max-width: 375px) {
  .xs-w-33 {
    width: calc(33.3333% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-33 {
    width: calc(33.3333% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-33 {
    width: calc(33.3333% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-33 {
    width: calc(33.3333% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-33 {
    width: calc(33.3333% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-33 {
    width: calc(33.3333% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-33 {
    width: calc(33.3333% - 0.5em);
  }
}

@media (max-width: 375px) {
  .xs-w-40 {
    width: calc(40% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-40 {
    width: calc(40% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-40 {
    width: calc(40% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-40 {
    width: calc(40% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-40 {
    width: calc(40% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-40 {
    width: calc(40% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-40 {
    width: calc(40% - 0.5em);
  }
}

@media (max-width: 375px) {
  .xs-w-60 {
    width: calc(60% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-60 {
    width: calc(60% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-60 {
    width: calc(60% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-60 {
    width: calc(60% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-60 {
    width: calc(60% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-60 {
    width: calc(60% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-60 {
    width: calc(60% - 0.5em);
  }
}

@media (max-width: 375px) {
  .xs-w-50 {
    width: calc(50% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-50 {
    width: calc(50% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-50 {
    width: calc(50% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-50 {
    width: calc(50% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-50 {
    width: calc(50% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-50 {
    width: calc(50% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-50 {
    width: calc(50% - 0.5em);
  }
}

@media (max-width: 375px) {
  .xs-w-66 {
    width: calc(66.6666% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-66 {
    width: calc(66.6666% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-66 {
    width: calc(66.6666% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-66 {
    width: calc(66.6666% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-66 {
    width: calc(66.6666% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-66 {
    width: calc(66.6666% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-66 {
    width: calc(66.6666% - 0.5em);
  }
}

@media (max-width: 375px) {
  .xs-w-75 {
    width: calc(75% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-75 {
    width: calc(75% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-75 {
    width: calc(75% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-75 {
    width: calc(75% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-75 {
    width: calc(75% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-75 {
    width: calc(75% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-75 {
    width: calc(75% - 0.5em);
  }
}

@media (max-width: 375px) {
  .xs-w-100 {
    width: calc(100% - 0.5em);
  }
}

@media (max-width: 40rem) {
  .sm-w-100 {
    width: calc(100% - 0.5em);
  }
}

@media (max-width: 48rem) {
  .md-w-100 {
    width: calc(100% - 0.5em);
  }
}

@media (max-width: 64rem) {
  .lg-w-100 {
    width: calc(100% - 0.5em);
  }
}

@media (max-width: 80rem) {
  .xl-w-100 {
    width: calc(100% - 0.5em);
  }
}

@media (max-width: 96rem) {
  .xxl-w-100 {
    width: calc(100% - 0.5em);
  }
}

@media (max-width: 112rem) {
  .xxxl-w-100 {
    width: calc(100% - 0.5em);
  }
}

.ql-syntax {
  white-space: normal;
}

.ql-align-center {
  text-align: center;
}

.ql-align-right {
  text-align: right;
}

.ql-align-justify {
  text-align: justify;
}

::-webkit-scrollbar-corner {
  background: var(--color-martini-900);
  border: none;
}

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

::-webkit-scrollbar-track {
  background: var(--color-martini-950);
}

::-webkit-scrollbar-thumb {
  background: var(--color-martini-700);
  border-radius: 20px;
  margin: 20px;
  border: 4px solid var(--color-martini-950);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-martini-600);
}

.content-page::-webkit-scrollbar-track {
  outline: none;
}

* {
  scrollbar-color: var(--color-martini-700) transparent;
}

table {
  min-width: 100%;
  border-collapse: collapse;
  background: var(--color-martini-950);
}
table .sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
}
table thead {
  border-radius: 30px;
  z-index: 10;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-martini-950);
  font-size: 0.9em;
}
table thead tr th {
  box-shadow: inset 0 -1px 0 var(--color-martini-700);
  background: var(--color-martini-950);
  padding: 0.75em;
  text-align: left;
  font-weight: 600;
  color: var(--color-martini-400);
}
table tbody tr {
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--color-martini-700);
}
table tbody tr:nth-child(even) {
  background: var(--color-martini-900);
}
table tbody tr:hover {
  background: var(--color-martini-800);
}
table tbody tr td {
  vertical-align: middle;
  padding: 0.75em;
}

.badges {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: 0.375em;
  align-items: start;
}

.badge {
  background: var(--color-martini-100);
  padding: 0.375em 0.75em;
  border-radius: 6px;
  font-size: 0.75em;
  display: flex;
  align-items: center;
}
.badge:hover {
  cursor: default;
  background: var(--color-martini-400);
}
.badge i {
  margin-left: 0.375em;
  padding: 0.2em;
  border-radius: 3px;
  font-size: 0.9em;
  opacity: 0.4;
}
.badge i:hover {
  cursor: pointer;
  opacity: 1;
  background: var(--color-martini-300);
}

.color-outline-red,
.color-outline-green,
.color-outline-lime,
.color-outline-blue,
.color-outline-cyan,
.color-outline-pink,
.color-outline-purple,
.color-outline-yellow,
.color-outline-orange,
.color-outline-gray {
  outline: 2px solid rgb(0, 0, 0);
  outline-offset: 2px;
}

.color-outline-red {
  outline-color: rgb(230, 20, 20);
}

.color-outline-green {
  outline-color: rgb(10, 200, 10);
}

.color-outline-lime {
  outline-color: rgb(160, 210, 20);
}

.color-outline-blue {
  outline-color: rgb(70, 100, 255);
}

.color-outline-cyan {
  outline-color: rgb(0, 180, 255);
}

.color-outline-pink {
  outline-color: rgb(255, 0, 180);
}

.color-outline-purple {
  outline-color: rgb(170, 70, 255);
}

.color-outline-yellow {
  outline-color: rgb(255, 200, 0);
}

.color-outline-orange {
  outline-color: rgb(255, 120, 0);
}

.color-outline-gray {
  outline-color: rgb(150, 150, 150);
}

.color-bg-red {
  background: rgba(255, 0, 0, 0.2) !important;
}

.color-bg-green {
  background: rgba(0, 200, 0, 0.2) !important;
}

.color-bg-lime {
  background: rgba(200, 255, 0, 0.2) !important;
}

.color-bg-blue {
  background: rgba(50, 80, 255, 0.2) !important;
}

.color-bg-cyan {
  background: rgba(0, 180, 255, 0.2) !important;
}

.color-bg-pink {
  background: rgba(255, 0, 180, 0.2) !important;
}

.color-bg-purple {
  background: rgba(160, 50, 255, 0.2) !important;
}

.color-bg-yellow {
  background: rgba(255, 200, 0, 0.2) !important;
}

.color-bg-orange {
  background: rgba(255, 120, 0, 0.2) !important;
}

.color-bg-gray {
  background: rgba(150, 150, 150, 0.2) !important;
}

.tags {
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  gap: 0.375em;
  align-items: start;
}
.tags.tag-pill .tag, .tags.tag-pills .tag {
  flex-flow: row;
  border-radius: 100px;
  gap: 0.375em;
  padding: 0.375em;
  padding-right: 1em;
}
.tags.tag-pill .tag .image, .tags.tag-pills .tag .image {
  width: 25px;
}
.tags.tag-pill .tag .info, .tags.tag-pills .tag .info {
  align-items: start;
  gap: 0.1875em;
}

.tag {
  background: var(--color-martini-800);
  border: 1px solid transparent;
  display: inline-flex;
  flex-flow: row;
  align-items: center;
  align-content: center;
  padding: 0.375em 0.75em;
  font-size: 0.85em;
  gap: 0.375em;
  border-radius: 100px;
  line-height: 1.2em;
  transition: all 0.2s ease;
  flex-shrink: 0;
  white-space: nowrap;
}
.tag:hover {
  border-color: var(--color-martini-700);
  background: var(--color-martini-800);
  cursor: pointer;
}
.tag:hover.tag-red {
  background: rgba(255, 0, 0, 0.25);
  border-color: rgba(255, 0, 0, 0.3);
}
.tag:hover.tag-green {
  background: rgba(0, 200, 0, 0.25);
  border-color: rgba(0, 200, 0, 0.3);
}
.tag:hover.tag-lime {
  background: rgba(200, 255, 0, 0.25);
  border-color: rgba(200, 255, 0, 0.3);
}
.tag:hover.tag-blue {
  background: rgba(50, 80, 255, 0.25);
  border-color: rgba(50, 80, 255, 0.3);
}
.tag:hover.tag-cyan {
  background: rgba(0, 180, 255, 0.25);
  border-color: rgba(0, 180, 255, 0.3);
}
.tag:hover.tag-pink {
  background: rgba(255, 0, 180, 0.25);
  border-color: rgba(255, 0, 180, 0.3);
}
.tag:hover.tag-purple {
  background: rgba(160, 50, 255, 0.25);
  border-color: rgba(160, 50, 255, 0.3);
}
.tag:hover.tag-yellow {
  background: rgba(255, 200, 0, 0.25);
  border-color: rgba(255, 200, 0, 0.3);
}
.tag:hover.tag-orange {
  background: rgba(255, 120, 0, 0.25);
  border-color: rgba(255, 120, 0, 0.3);
}
.tag:hover.tag-gray {
  background: rgba(150, 150, 150, 0.25);
  border-color: rgba(150, 150, 150, 0.3);
}
.tag:has(span) {
  padding-right: 0.1875em;
}
.tag .remove-tag, .tag button {
  color: var(--color-martini-200);
  padding: 0 0.375em;
  opacity: 0.5;
  border: none;
  background: transparent !important;
}
.tag .remove-tag i, .tag button i {
  color: var(--color-martini-200) !important;
}
.tag .remove-tag:hover, .tag button:hover {
  opacity: 1;
  background: transparent !important;
}
.tag .image {
  aspect-ratio: 1;
  overflow: hidden;
  width: 50px;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-content: center;
}
.tag .image img {
  object-fit: cover;
}
.tag .info {
  display: flex;
  flex-flow: column;
  gap: 0.1875em;
  align-items: center;
}
.tag .info label {
  font-size: 0.8em;
  opacity: 0.5;
}
.tag.tag-pill {
  flex-flow: row;
  border-radius: 100px;
  gap: 0.375em;
}
.tag.tag-pill .image {
  width: 25px;
}
.tag.tag-pill .info {
  align-items: start;
}
.tag.tag-red {
  background: rgba(255, 0, 0, 0.2);
  color: rgb(230, 20, 20);
}
.tag.tag-red .remove-tag, .tag.tag-red .tag-remove i {
  color: rgb(230, 20, 20) !important;
}
.tag.tag-green {
  background: rgba(0, 200, 0, 0.2);
  color: rgb(10, 200, 10);
}
.tag.tag-green .remove-tag, .tag.tag-green .tag-remove i {
  color: rgb(10, 200, 10) !important;
}
.tag.tag-lime {
  background: rgba(200, 255, 0, 0.2);
  color: rgb(138, 188, 0);
}
.tag.tag-lime .remove-tag, .tag.tag-lime .tag-remove i {
  color: rgb(138, 188, 0) !important;
}
.tag.tag-blue {
  background: rgba(50, 80, 255, 0.2);
  color: rgb(70, 100, 255);
}
.tag.tag-blue .remove-tag, .tag.tag-blue .tag-remove i {
  color: rgb(70, 100, 255) !important;
}
.tag.tag-cyan {
  background: rgba(0, 180, 255, 0.2);
  color: rgb(0, 180, 255);
}
.tag.tag-cyan .remove-tag, .tag.tag-cyan .tag-remove i {
  color: rgb(0, 180, 255) !important;
}
.tag.tag-pink {
  background: rgba(255, 0, 180, 0.2);
  color: rgb(255, 0, 180);
}
.tag.tag-pink .remove-tag, .tag.tag-pink .tag-remove i {
  color: rgb(255, 0, 180) !important;
}
.tag.tag-purple {
  background: rgba(160, 50, 255, 0.2);
  color: rgb(170, 70, 255);
}
.tag.tag-purple .remove-tag, .tag.tag-purple .tag-remove i {
  color: rgb(170, 70, 255) !important;
}
.tag.tag-yellow {
  background: rgba(255, 200, 0, 0.2);
  color: rgb(255, 200, 0);
}
.tag.tag-yellow .remove-tag, .tag.tag-yellow .tag-remove i {
  color: rgb(255, 200, 0) !important;
}
.tag.tag-orange {
  background: rgba(255, 120, 0, 0.2);
  color: rgb(255, 120, 0);
}
.tag.tag-orange .remove-tag, .tag.tag-orange .tag-remove i {
  color: rgb(255, 120, 0) !important;
}
.tag.tag-gray {
  background: rgba(150, 150, 150, 0.2);
  color: rgb(150, 150, 150);
}
.tag.tag-gray .remove-tag, .tag.tag-gray .tag-remove i {
  color: rgb(150, 150, 150) !important;
}

.card {
  display: flex;
  flex-flow: column;
  padding: 1em;
  border-radius: 27px;
  background: var(--color-martini-700);
  background: linear-gradient(320deg, var(--color-martini-800) 0%, var(--color-martini-900) 100%);
  box-shadow: 0px 5px 10px rgba(var(--color-martini-500-rgb), 0.15);
  border: 1px solid var(--color-martini-800);
}
[data-theme=dark] .card, .card[data-theme=dark] {
  border-color: var(--color-martini-800);
  background: linear-gradient(130deg, var(--color-martini-800) 0%, var(--color-martini-900) 100%);
  box-shadow: 0px 8px 10px rgba(var(--color-martini-950-rgb), 0.8);
}
.card.box-row {
  flex-flow: row;
}
.card .card-header {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  margin-bottom: 1.25em;
  border-bottom: 1px solid var(--color-martini-700);
  padding-bottom: 1em;
}
.card .card-header h1, .card .card-header h2, .card .card-header h3, .card .card-header h4, .card .card-header h5, .card .card-header h6 {
  color: var(--color-martini-400);
}
.card .card-header p {
  font-size: 0.8em;
}

.box-shadow-sm {
  box-shadow: 0px 3px 10px rgba(var(--color-martini-shadow-rgb), 0.1), 0px 1px 3px rgba(var(--color-martini-shadow-rgb), 0.2);
}

.box-shadow-md {
  box-shadow: 0px 5px 20px rgba(var(--color-martini-shadow-rgb), 0.1), 0px 2px 5px rgba(var(--color-martini-shadow-rgb), 0.2);
}

.box-shadow-lg {
  box-shadow: 0px 8px 30px rgba(var(--color-martini-shadow-rgb), 0.1), 0px 4px 10px rgba(var(--color-martini-shadow-rgb), 0.2);
}

.box-shadow-xl {
  box-shadow: 0px 11px 40px rgba(var(--color-martini-shadow-rgb), 0.1), 0px 6px 15px rgba(var(--color-martini-shadow-rgb), 0.2);
}

/* ------------------------------------- */
/*                  FORM                 */
/* ------------------------------------- */
.form {
  display: flex;
  flex-flow: column;
  gap: 1.953125em;
  margin-bottom: 20px;
  width: 100%;
}
.form:last-of-type {
  margin-bottom: 0px;
}
.form .form-row,
.form .form-footer {
  display: flex;
  gap: 1em;
  width: 100%;
}
@media (max-width: 48rem) {
  .form .form-row,
  .form .form-footer {
    flex-flow: column;
  }
}
.form .form-row > div,
.form .form-footer > div {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  flex-grow: 1;
  position: relative;
}
.form .form-row > div.warning input[type=text], .form .form-row > div.warning input[type=url], .form .form-row > div.warning input[type=password], .form .form-row > div.warning input[type=number], .form .form-row > div.warning input[type=email], .form .form-row > div.warning textarea,
.form .form-footer > div.warning input[type=text],
.form .form-footer > div.warning input[type=url],
.form .form-footer > div.warning input[type=password],
.form .form-footer > div.warning input[type=number],
.form .form-footer > div.warning input[type=email],
.form .form-footer > div.warning textarea {
  border-color: rgb(175, 54, 81) !important;
}
.form .form-row > div.warning i,
.form .form-footer > div.warning i {
  color: rgb(175, 54, 81);
  opacity: 1;
}
.form .form-footer {
  border-top: 1px solid var(--color-martini-600);
  padding-top: 1.5625em;
}
.form i {
  font-size: 0.8em;
  font-style: italic;
  opacity: 0.4;
}
.form i:empty {
  display: none;
}

/* ------------------------------------- */
/*                 INPUT                 */
/* ------------------------------------- */
input[type=text], input[type=url], input[type=password], input[type=number], input[type=email], input[type=date], input[type=time], textarea, .input-type-text {
  font-family: "Rubik", "Helvetica", "Arial", sans-serif;
  display: block;
  font-size: 1em;
  font-weight: normal;
  padding: 0.75em 0.75em;
  border: 1px solid var(--color-martini-800);
  border-radius: 12px;
  background: var(--color-martini-950);
  color: var(--color-martini-white);
  appearance: none;
  -webkit-appearance: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
input[type=text].input-sm, input[type=url].input-sm, input[type=password].input-sm, input[type=number].input-sm, input[type=email].input-sm, input[type=date].input-sm, input[type=time].input-sm, textarea.input-sm, .input-type-text.input-sm {
  font-size: 0.8em;
}
input[type=text] input, input[type=url] input, input[type=password] input, input[type=number] input, input[type=email] input, input[type=date] input, input[type=time] input, textarea input, .input-type-text input {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 100%;
}
input[type=text]:has(i), input[type=url]:has(i), input[type=password]:has(i), input[type=number]:has(i), input[type=email]:has(i), input[type=date]:has(i), input[type=time]:has(i), textarea:has(i), .input-type-text:has(i) {
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: var(--color-martini-600);
}
input[type=text]:-webkit-autofill, input[type=text]:-webkit-autofill:hover, input[type=text]:-webkit-autofill:focus, input[type=text]:-webkit-autofill:active, input[type=url]:-webkit-autofill, input[type=url]:-webkit-autofill:hover, input[type=url]:-webkit-autofill:focus, input[type=url]:-webkit-autofill:active, input[type=password]:-webkit-autofill, input[type=password]:-webkit-autofill:hover, input[type=password]:-webkit-autofill:focus, input[type=password]:-webkit-autofill:active, input[type=number]:-webkit-autofill, input[type=number]:-webkit-autofill:hover, input[type=number]:-webkit-autofill:focus, input[type=number]:-webkit-autofill:active, input[type=email]:-webkit-autofill, input[type=email]:-webkit-autofill:hover, input[type=email]:-webkit-autofill:focus, input[type=email]:-webkit-autofill:active, input[type=date]:-webkit-autofill, input[type=date]:-webkit-autofill:hover, input[type=date]:-webkit-autofill:focus, input[type=date]:-webkit-autofill:active, input[type=time]:-webkit-autofill, input[type=time]:-webkit-autofill:hover, input[type=time]:-webkit-autofill:focus, input[type=time]:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active, .input-type-text:-webkit-autofill, .input-type-text:-webkit-autofill:hover, .input-type-text:-webkit-autofill:focus, .input-type-text:-webkit-autofill:active {
  background-color: var(--color-martini-white) !important;
  color: var(--color-martini-950) !important;
}
input[type=text]::placeholder, input[type=url]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=email]::placeholder, input[type=date]::placeholder, input[type=time]::placeholder, textarea::placeholder, .input-type-text::placeholder {
  color: var(--color-martini-600);
}
input[type=text]:disabled, input[type=url]:disabled, input[type=password]:disabled, input[type=number]:disabled, input[type=email]:disabled, input[type=date]:disabled, input[type=time]:disabled, textarea:disabled, .input-type-text:disabled {
  color: var(--color-martini-500);
  opacity: 0.8;
}
input[type=text]:disabled:hover, input[type=url]:disabled:hover, input[type=password]:disabled:hover, input[type=number]:disabled:hover, input[type=email]:disabled:hover, input[type=date]:disabled:hover, input[type=time]:disabled:hover, textarea:disabled:hover, .input-type-text:disabled:hover {
  cursor: not-allowed;
}
input[type=text]:focus, input[type=text]:has(input:focus), input[type=url]:focus, input[type=url]:has(input:focus), input[type=password]:focus, input[type=password]:has(input:focus), input[type=number]:focus, input[type=number]:has(input:focus), input[type=email]:focus, input[type=email]:has(input:focus), input[type=date]:focus, input[type=date]:has(input:focus), input[type=time]:focus, input[type=time]:has(input:focus), textarea:focus, textarea:has(input:focus), .input-type-text:focus, .input-type-text:has(input:focus) {
  -webkit-appearance: none;
  background: var(--color-martini-950);
  outline: 2px solid var(--color-martini-accent);
}
input[type=text]:focus i, input[type=text]:has(input:focus) i, input[type=url]:focus i, input[type=url]:has(input:focus) i, input[type=password]:focus i, input[type=password]:has(input:focus) i, input[type=number]:focus i, input[type=number]:has(input:focus) i, input[type=email]:focus i, input[type=email]:has(input:focus) i, input[type=date]:focus i, input[type=date]:has(input:focus) i, input[type=time]:focus i, input[type=time]:has(input:focus) i, textarea:focus i, textarea:has(input:focus) i, .input-type-text:focus i, .input-type-text:has(input:focus) i {
  color: var(--color-martini-700);
}
[data-theme=dark] input[type=text]:focus, input[type=text]:focus[data-theme=dark], [data-theme=dark] input[type=text]:has(input:focus), input[type=text]:has(input:focus)[data-theme=dark], [data-theme=dark] input[type=url]:focus, input[type=url]:focus[data-theme=dark], [data-theme=dark] input[type=url]:has(input:focus), input[type=url]:has(input:focus)[data-theme=dark], [data-theme=dark] input[type=password]:focus, input[type=password]:focus[data-theme=dark], [data-theme=dark] input[type=password]:has(input:focus), input[type=password]:has(input:focus)[data-theme=dark], [data-theme=dark] input[type=number]:focus, input[type=number]:focus[data-theme=dark], [data-theme=dark] input[type=number]:has(input:focus), input[type=number]:has(input:focus)[data-theme=dark], [data-theme=dark] input[type=email]:focus, input[type=email]:focus[data-theme=dark], [data-theme=dark] input[type=email]:has(input:focus), input[type=email]:has(input:focus)[data-theme=dark], [data-theme=dark] input[type=date]:focus, input[type=date]:focus[data-theme=dark], [data-theme=dark] input[type=date]:has(input:focus), input[type=date]:has(input:focus)[data-theme=dark], [data-theme=dark] input[type=time]:focus, input[type=time]:focus[data-theme=dark], [data-theme=dark] input[type=time]:has(input:focus), input[type=time]:has(input:focus)[data-theme=dark], [data-theme=dark] textarea:focus, textarea:focus[data-theme=dark], [data-theme=dark] textarea:has(input:focus), textarea:has(input:focus)[data-theme=dark], [data-theme=dark] .input-type-text:focus, .input-type-text:focus[data-theme=dark], [data-theme=dark] .input-type-text:has(input:focus), .input-type-text:has(input:focus)[data-theme=dark] {
  border-color: var(--color-martini-200) !important;
  color: var(--color-martini-900);
  background: var(--color-martini-200);
}
[data-theme=dark] input[type=text]:focus i, input[type=text]:focus[data-theme=dark] i, [data-theme=dark] input[type=text]:has(input:focus) i, input[type=text]:has(input:focus)[data-theme=dark] i, [data-theme=dark] input[type=url]:focus i, input[type=url]:focus[data-theme=dark] i, [data-theme=dark] input[type=url]:has(input:focus) i, input[type=url]:has(input:focus)[data-theme=dark] i, [data-theme=dark] input[type=password]:focus i, input[type=password]:focus[data-theme=dark] i, [data-theme=dark] input[type=password]:has(input:focus) i, input[type=password]:has(input:focus)[data-theme=dark] i, [data-theme=dark] input[type=number]:focus i, input[type=number]:focus[data-theme=dark] i, [data-theme=dark] input[type=number]:has(input:focus) i, input[type=number]:has(input:focus)[data-theme=dark] i, [data-theme=dark] input[type=email]:focus i, input[type=email]:focus[data-theme=dark] i, [data-theme=dark] input[type=email]:has(input:focus) i, input[type=email]:has(input:focus)[data-theme=dark] i, [data-theme=dark] input[type=date]:focus i, input[type=date]:focus[data-theme=dark] i, [data-theme=dark] input[type=date]:has(input:focus) i, input[type=date]:has(input:focus)[data-theme=dark] i, [data-theme=dark] input[type=time]:focus i, input[type=time]:focus[data-theme=dark] i, [data-theme=dark] input[type=time]:has(input:focus) i, input[type=time]:has(input:focus)[data-theme=dark] i, [data-theme=dark] textarea:focus i, textarea:focus[data-theme=dark] i, [data-theme=dark] textarea:has(input:focus) i, textarea:has(input:focus)[data-theme=dark] i, [data-theme=dark] .input-type-text:focus i, .input-type-text:focus[data-theme=dark] i, [data-theme=dark] .input-type-text:has(input:focus) i, .input-type-text:has(input:focus)[data-theme=dark] i {
  color: var(--color-martini-400);
}
[data-theme=dark] input[type=text]:focus::placeholder, input[type=text]:focus[data-theme=dark]::placeholder, [data-theme=dark] input[type=text]:has(input:focus)::placeholder, input[type=text]:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] input[type=url]:focus::placeholder, input[type=url]:focus[data-theme=dark]::placeholder, [data-theme=dark] input[type=url]:has(input:focus)::placeholder, input[type=url]:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] input[type=password]:focus::placeholder, input[type=password]:focus[data-theme=dark]::placeholder, [data-theme=dark] input[type=password]:has(input:focus)::placeholder, input[type=password]:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] input[type=number]:focus::placeholder, input[type=number]:focus[data-theme=dark]::placeholder, [data-theme=dark] input[type=number]:has(input:focus)::placeholder, input[type=number]:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] input[type=email]:focus::placeholder, input[type=email]:focus[data-theme=dark]::placeholder, [data-theme=dark] input[type=email]:has(input:focus)::placeholder, input[type=email]:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] input[type=date]:focus::placeholder, input[type=date]:focus[data-theme=dark]::placeholder, [data-theme=dark] input[type=date]:has(input:focus)::placeholder, input[type=date]:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] input[type=time]:focus::placeholder, input[type=time]:focus[data-theme=dark]::placeholder, [data-theme=dark] input[type=time]:has(input:focus)::placeholder, input[type=time]:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] textarea:focus::placeholder, textarea:focus[data-theme=dark]::placeholder, [data-theme=dark] textarea:has(input:focus)::placeholder, textarea:has(input:focus)[data-theme=dark]::placeholder, [data-theme=dark] .input-type-text:focus::placeholder, .input-type-text:focus[data-theme=dark]::placeholder, [data-theme=dark] .input-type-text:has(input:focus)::placeholder, .input-type-text:has(input:focus)[data-theme=dark]::placeholder {
  color: var(--color-martini-400);
}
input[type=text].warning, input[type=url].warning, input[type=password].warning, input[type=number].warning, input[type=email].warning, input[type=date].warning, input[type=time].warning, textarea.warning, .input-type-text.warning {
  border-color: rgb(175, 54, 81) !important;
}
input[type=text]:hover, input[type=url]:hover, input[type=password]:hover, input[type=number]:hover, input[type=email]:hover, input[type=date]:hover, input[type=time]:hover, textarea:hover, .input-type-text:hover {
  border-color: var(--color-martini-700);
}

input[type=range] {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-martini-700);
  border-radius: 100px;
  height: 6px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 100px;
  height: 14px;
  width: 14px;
  background: var(--color-martini-50);
  cursor: pointer;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.4);
}
input[type=range]::-webkit-slider-thumb:hover {
  cursor: grab;
}
input[type=range]::-webkit-slider-thumb:active {
  cursor: grabbing;
}

.autocomplete-dropdown {
  display: flex;
  flex-flow: column;
  border: 1px solid var(--color-martini-800);
  border-radius: 12px;
  background: var(--color-martini-950);
  padding: 0.75em 0.75em;
  gap: 1em;
  color: var(--color-martini-200);
}
.autocomplete-dropdown:empty {
  display: none;
}
.autocomplete-dropdown li:hover {
  color: var(--color-martini-white);
  cursor: pointer;
}

/* ------------------------------------- */
/*                 SWITCH                */
/* ------------------------------------- */
.checkbox {
  display: flex;
}
.checkbox.column > label {
  flex-flow: column;
}
.checkbox > label {
  display: flex;
  align-items: center;
  font-size: 1em;
  gap: 0.75em;
  color: var(--color-martini-white) !important;
}
.checkbox.status-left .checkbox-switch label {
  order: 2;
}
.checkbox.status-left .checkbox-switch .status {
  order: 1;
  margin-right: 0.375em;
  margin-left: 0px;
}
.checkbox .checkbox-switch {
  pointer-events: none;
  display: inline-flex;
}
.checkbox .checkbox-switch:hover {
  cursor: pointer;
}
.checkbox .checkbox-switch label {
  order: 1;
}
.checkbox .checkbox-switch .status {
  order: 2;
  font-size: 0.8em;
  margin-left: 0.375em;
  color: var(--color-martini-500);
}
.checkbox .checkbox-switch .status.off {
  display: block;
}
.checkbox .checkbox-switch .status.on {
  display: none;
  color: var(--color-martini-200);
}
.checkbox .checkbox-switch input[type=checkbox] {
  visibility: hidden;
  display: none;
}
.checkbox .checkbox-switch input[type=checkbox]:checked + .toggle:before {
  background: var(--color-martini-200) !important;
}
.checkbox .checkbox-switch input[type=checkbox]:checked ~ .on {
  display: block;
}
.checkbox .checkbox-switch input[type=checkbox]:checked ~ .off {
  display: none;
}
.checkbox .checkbox-switch input[type=checkbox]:checked + .toggle span {
  background: var(--color-martini-900) !important;
  transform: translateX(20px);
  transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
  box-shadow: 0 2px 8px rgba(var(--color-martini-white-rgb), 0.4);
}
[data-theme=dark] .checkbox .checkbox-switch input[type=checkbox]:checked + .toggle span, .checkbox .checkbox-switch input[type=checkbox]:checked + .toggle span[data-theme=dark] {
  background: var(--color-martini-200) !important;
  box-shadow: 0 2px 8px rgba(var(--color-martini-black-rgb), 0.4);
}
.checkbox .checkbox-switch input[type=checkbox]:checked + .toggle span:before {
  transform: scale(1);
  opacity: 0;
  transition: all 0.4s ease;
}
.checkbox .checkbox-switch .toggle {
  position: relative;
  display: block;
  width: 40px;
  height: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate3d(0, 0, 0);
}
.checkbox .checkbox-switch .toggle:before {
  content: "";
  position: relative;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 14px;
  display: block;
  background: var(--color-martini-700) !important;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.checkbox .checkbox-switch .toggle span {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  display: block;
  background: var(--color-martini-500) !important;
  border-radius: 10px;
  transition: all 0.2s ease;
}
.checkbox.checkbox-sm .checkbox-switch input[type=checkbox]:checked + .toggle span {
  transform: translateX(16px);
}
.checkbox.checkbox-sm .checkbox-switch .toggle {
  width: 28px;
  height: 26px;
}
.checkbox.checkbox-sm .checkbox-switch .toggle:before {
  top: 9px;
  left: 2px;
  width: 24px;
  height: 8px;
  border-radius: 4px;
}
.checkbox.checkbox-sm .checkbox-switch .toggle span {
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 10px;
}

.form-drop {
  transition: all 0.2s ease;
  display: flex;
  flex-flow: column;
  gap: 1em !important;
  justify-content: center;
  align-items: center;
  padding: 1.5625em;
  border: 1px dashed var(--color-martini-600);
  border-radius: 18px;
  background: var(--color-martini-900);
  color: var(--color-martini-400);
  overflow: hidden;
  text-align: center;
}
@media (max-width: 48rem) {
  .form-drop {
    padding: 1em;
  }
}
.form-drop i {
  transition: transform 0.2s ease;
  font-size: 2em;
  font-style: normal;
  opacity: 1;
  display: block !important;
}
.form-drop:hover {
  cursor: pointer;
}
.form-drop::placeholder {
  color: var(--color-martini-600);
}
.form-drop.drop-active {
  border-color: var(--color-martini-accent);
  border-style: solid;
  color: var(--color-martini-accent);
  background: var(--color-martini-800);
}
.form-drop li {
  width: 100%;
  max-width: 500px;
  display: flex;
  gap: 0.75em;
  background: var(--color-martini-500);
  padding: 0.375em;
  border-radius: 100px;
  font-size: 0.8em;
  color: var(--color-martini-100);
}
.form-drop li span {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.form-drop li i {
  font-size: 1em;
  color: var(--color-martini-100);
}
.form-drop li.success {
  background: #10562c;
  color: #53cb53;
}
.form-drop li.success i {
  margin-left: 0.75em;
  color: #53cb53;
}
.form-drop li.failed {
  background: #67111a;
  color: red;
}
.form-drop li.failed i {
  margin-left: 0.75em;
  color: red;
}

.btns {
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
  width: 100%;
}
.btns.group {
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: scroll;
  border: 1px solid var(--color-martini-600) !important;
  border-radius: 12px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.btns.group::-webkit-scrollbar {
  display: none;
}
.btns.group .btn, .btns.group button {
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--color-martini-600) !important;
}
.btns.group .btn:last-of-type, .btns.group button:last-of-type {
  border-right: none !important;
}

.btn, button, select {
  transition: all 0.2s ease;
  display: inline-flex;
  gap: 8px !important;
  align-items: center;
  font-size: 1em;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid var(--color-martini-100);
  border-radius: 100px;
  background: var(--color-martini-100);
  color: var(--color-martini-800);
  cursor: pointer;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  line-height: 1em;
  justify-content: center;
}
[data-theme=dark] .btn, .btn[data-theme=dark], [data-theme=dark] button, button[data-theme=dark], [data-theme=dark] select, select[data-theme=dark] {
  color: var(--color-martini-800);
}
.btn::-ms-expand, button::-ms-expand, select::-ms-expand {
  display: none;
  outline: none;
}
.btn i, button i, select i {
  line-height: 1em;
  font-style: normal !important;
  color: var(--color-martini-800);
  transition: all 0.2s ease;
  pointer-events: none;
  opacity: 1 !important;
}
[data-theme=dark] .btn i, .btn i[data-theme=dark], [data-theme=dark] button i, button i[data-theme=dark], [data-theme=dark] select i, select i[data-theme=dark] {
  color: var(--color-martini-800);
}
.btn:disabled, button:disabled, select:disabled {
  opacity: 1;
  pointer-events: none;
  background-color: var(--color-martini-800);
  border-color: var(--color-martini-800);
  color: var(--color-martini-600);
}
.btn:disabled i, button:disabled i, select:disabled i {
  color: var(--color-martini-600);
}
.btn:disabled:hover, button:disabled:hover, select:disabled:hover {
  cursor: not-allowed;
}
.btn span, button span, select span {
  pointer-events: none;
}
.btn:hover, .btn:focus, button:hover, button:focus, select:hover, select:focus {
  color: var(--color-martini-black);
  border-color: var(--color-martini-200);
  background: var(--color-martini-200);
  cursor: pointer;
}
[data-theme=dark] .btn:hover, .btn:hover[data-theme=dark], [data-theme=dark] .btn:focus, .btn:focus[data-theme=dark], [data-theme=dark] button:hover, button:hover[data-theme=dark], [data-theme=dark] button:focus, button:focus[data-theme=dark], [data-theme=dark] select:hover, select:hover[data-theme=dark], [data-theme=dark] select:focus, select:focus[data-theme=dark] {
  color: var(--color-martini-800);
}
.btn:hover .drop-down, .btn:focus .drop-down, button:hover .drop-down, button:focus .drop-down, select:hover .drop-down, select:focus .drop-down {
  display: block;
}
.btn:hover > i, .btn:focus > i, button:hover > i, button:focus > i, select:hover > i, select:focus > i {
  color: var(--color-martini-800);
}
[data-theme=dark] .btn:hover > i, .btn:hover > i[data-theme=dark], [data-theme=dark] .btn:focus > i, .btn:focus > i[data-theme=dark], [data-theme=dark] button:hover > i, button:hover > i[data-theme=dark], [data-theme=dark] button:focus > i, button:focus > i[data-theme=dark], [data-theme=dark] select:hover > i, select:hover > i[data-theme=dark], [data-theme=dark] select:focus > i, select:focus > i[data-theme=dark] {
  color: var(--color-martini-800);
}
.btn.btn-light, .btn.btn-transparent, button.btn-light, button.btn-transparent, select.btn-light, select.btn-transparent {
  border-color: var(--color-martini-800);
  background: var(--color-martini-800);
  color: var(--color-martini-300);
}
.btn.btn-light i, .btn.btn-transparent i, button.btn-light i, button.btn-transparent i, select.btn-light i, select.btn-transparent i {
  color: var(--color-martini-300);
}
.btn.btn-light:hover, .btn.btn-transparent:hover, button.btn-light:hover, button.btn-transparent:hover, select.btn-light:hover, select.btn-transparent:hover {
  border-color: var(--color-martini-700);
  background: var(--color-martini-700);
}
.btn.btn-light:hover i, .btn.btn-transparent:hover i, button.btn-light:hover i, button.btn-transparent:hover i, select.btn-light:hover i, select.btn-transparent:hover i {
  color: var(--color-martini-300);
}
.btn.btn-grey, .btn.btn-gray, button.btn-grey, button.btn-gray, select.btn-grey, select.btn-gray {
  border: 1px solid var(--color-martini-600);
  background: var(--color-martini-600);
  color: var(--color-martini-800);
}
.btn.btn-grey i, .btn.btn-gray i, button.btn-grey i, button.btn-gray i, select.btn-grey i, select.btn-gray i {
  color: var(--color-martini-800);
}
[data-theme=dark] .btn.btn-grey i, .btn.btn-grey[data-theme=dark] i, [data-theme=dark] .btn.btn-gray i, .btn.btn-gray[data-theme=dark] i, [data-theme=dark] button.btn-grey i, button.btn-grey[data-theme=dark] i, [data-theme=dark] button.btn-gray i, button.btn-gray[data-theme=dark] i, [data-theme=dark] select.btn-grey i, select.btn-grey[data-theme=dark] i, [data-theme=dark] select.btn-gray i, select.btn-gray[data-theme=dark] i {
  color: var(--color-martini-200);
}
.btn.btn-grey:hover, .btn.btn-gray:hover, button.btn-grey:hover, button.btn-gray:hover, select.btn-grey:hover, select.btn-gray:hover {
  border-color: var(--color-martini-500);
  background: var(--color-martini-500);
}
.btn.btn-grey:hover i, .btn.btn-gray:hover i, button.btn-grey:hover i, button.btn-gray:hover i, select.btn-grey:hover i, select.btn-gray:hover i {
  color: var(--color-martini-800);
}
[data-theme=dark] .btn.btn-grey:hover i, .btn.btn-grey:hover[data-theme=dark] i, [data-theme=dark] .btn.btn-gray:hover i, .btn.btn-gray:hover[data-theme=dark] i, [data-theme=dark] button.btn-grey:hover i, button.btn-grey:hover[data-theme=dark] i, [data-theme=dark] button.btn-gray:hover i, button.btn-gray:hover[data-theme=dark] i, [data-theme=dark] select.btn-grey:hover i, select.btn-grey:hover[data-theme=dark] i, [data-theme=dark] select.btn-gray:hover i, select.btn-gray:hover[data-theme=dark] i {
  color: var(--color-martini-200);
}
.btn.btn-transparent, button.btn-transparent, select.btn-transparent {
  background: none;
  border: none;
}
.btn.btn-transparent:hover, button.btn-transparent:hover, select.btn-transparent:hover {
  border-color: var(--color-martini-800);
  background: var(--color-martini-800);
}
.btn.btn-off, button.btn-off, select.btn-off {
  background: var(--color-martini-600);
  border-color: var(--color-martini-600);
  color: var(--color-martini-300);
}
.btn.btn-off:hover, button.btn-off:hover, select.btn-off:hover {
  background: var(--color-martini-500);
  border-color: var(--color-martini-500);
}
.btn.btn-outline, button.btn-outline, select.btn-outline {
  border-color: var(--color-martini-500);
  background: transparent;
  color: var(--color-martini-300);
}
.btn.btn-outline i, button.btn-outline i, select.btn-outline i {
  color: var(--color-martini-300) !important;
}
.btn.btn-outline:hover, .btn.btn-outline:focus, button.btn-outline:hover, button.btn-outline:focus, select.btn-outline:hover, select.btn-outline:focus {
  border-color: var(--color-martini-accent);
  background: rgba(var(--color-martini-950-rgb), 0.4);
  color: var(--color-martini-100);
}
[data-theme=dark] .btn.btn-outline:hover, .btn.btn-outline:hover[data-theme=dark], [data-theme=dark] .btn.btn-outline:focus, .btn.btn-outline:focus[data-theme=dark], [data-theme=dark] button.btn-outline:hover, button.btn-outline:hover[data-theme=dark], [data-theme=dark] button.btn-outline:focus, button.btn-outline:focus[data-theme=dark], [data-theme=dark] select.btn-outline:hover, select.btn-outline:hover[data-theme=dark], [data-theme=dark] select.btn-outline:focus, select.btn-outline:focus[data-theme=dark] {
  border-color: var(--color-martini-500);
  background: rgba(var(--color-martini-500-rgb), 0.3);
}
.btn.btn-outline:hover > i, .btn.btn-outline:focus > i, button.btn-outline:hover > i, button.btn-outline:focus > i, select.btn-outline:hover > i, select.btn-outline:focus > i {
  color: var(--color-martini-accent) !important;
}
[data-theme=dark] .btn.btn-outline:hover > i, .btn.btn-outline:hover > i[data-theme=dark], [data-theme=dark] .btn.btn-outline:focus > i, .btn.btn-outline:focus > i[data-theme=dark], [data-theme=dark] button.btn-outline:hover > i, button.btn-outline:hover > i[data-theme=dark], [data-theme=dark] button.btn-outline:focus > i, button.btn-outline:focus > i[data-theme=dark], [data-theme=dark] select.btn-outline:hover > i, select.btn-outline:hover > i[data-theme=dark], [data-theme=dark] select.btn-outline:focus > i, select.btn-outline:focus > i[data-theme=dark] {
  color: var(--color-martini-100) !important;
}
.btn .drop-down, button .drop-down, select .drop-down {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 0.75em;
  animation: drop-down 0.2s ease-out;
  transform-origin: top right;
  z-index: 15;
  font-weight: 500;
}
.btn .drop-down ul, button .drop-down ul, select .drop-down ul {
  width: 300px;
  border: none;
  background: var(--color-martini-900);
  color: var(--color-martini-300);
  border-radius: 12px;
  box-shadow: 0px 4px 15px rgba(var(--color-martini-300-rgb), 0.3), 0px 2px 3px rgba(var(--color-martini-300-rgb), 0.1);
  overflow: hidden;
}
[data-theme=dark] .btn .drop-down ul, .btn .drop-down ul[data-theme=dark], [data-theme=dark] button .drop-down ul, button .drop-down ul[data-theme=dark], [data-theme=dark] select .drop-down ul, select .drop-down ul[data-theme=dark] {
  border: 1px solid var(--color-martini-700);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2), 0px 2px 3px rgba(0, 0, 0, 0.1);
}
.btn .drop-down ul.position-left, button .drop-down ul.position-left, select .drop-down ul.position-left {
  right: auto;
  left: 0;
}
.btn .drop-down ul li, button .drop-down ul li, select .drop-down ul li {
  padding: 1em;
  border-bottom: 1px solid var(--color-martini-800);
  display: flex;
  gap: 0.375em;
  align-items: center;
}
.btn .drop-down ul li i, button .drop-down ul li i, select .drop-down ul li i {
  color: var(--color-martini-600) !important;
}
.btn .drop-down ul li > span, button .drop-down ul li > span, select .drop-down ul li > span {
  flex-grow: 1;
}
.btn .drop-down ul li.locked, button .drop-down ul li.locked, select .drop-down ul li.locked {
  pointer-events: none;
  opacity: 0.7;
  color: var(--color-martini-500);
}
.btn .drop-down ul li.locked i, button .drop-down ul li.locked i, select .drop-down ul li.locked i {
  color: var(--color-martini-500) !important;
}
.btn .drop-down ul li.locked::after, button .drop-down ul li.locked::after, select .drop-down ul li.locked::after {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: "\f023";
  color: var(--color-martini-500);
}
.btn .drop-down ul li.buttons, button .drop-down ul li.buttons, select .drop-down ul li.buttons {
  flex-wrap: wrap;
}
.btn .drop-down ul li.buttons > div, button .drop-down ul li.buttons > div, select .drop-down ul li.buttons > div {
  margin-top: 0.75em;
  width: 100%;
  display: flex;
  gap: 0.75em;
}
.btn .drop-down ul li.buttons button, button .drop-down ul li.buttons button, select .drop-down ul li.buttons button {
  flex-grow: 1;
  padding: 7px 10px;
  border-radius: 12px;
  background: var(--color-martini-800);
  border: none;
  color: var(--color-martini-300);
  justify-content: center;
  font-size: 0.8em;
}
.btn .drop-down ul li.buttons button i, button .drop-down ul li.buttons button i, select .drop-down ul li.buttons button i {
  color: var(--color-martini-300) !important;
}
.btn .drop-down ul li.buttons button:hover, button .drop-down ul li.buttons button:hover, select .drop-down ul li.buttons button:hover {
  background: var(--color-martini-700);
  border-color: var(--color-martini-700);
}
.btn .drop-down ul li.buttons button.selected, button .drop-down ul li.buttons button.selected, select .drop-down ul li.buttons button.selected {
  color: var(--color-martini-900);
  background: var(--color-martini-200);
  border-color: var(--color-martini-200);
}
[data-theme=dark] .btn .drop-down ul li.buttons button.selected, .btn .drop-down ul li.buttons button.selected[data-theme=dark], [data-theme=dark] button .drop-down ul li.buttons button.selected, button .drop-down ul li.buttons button.selected[data-theme=dark], [data-theme=dark] select .drop-down ul li.buttons button.selected, select .drop-down ul li.buttons button.selected[data-theme=dark] {
  color: var(--color-martini-900);
}
.btn .drop-down ul li.buttons button.selected i, button .drop-down ul li.buttons button.selected i, select .drop-down ul li.buttons button.selected i {
  color: var(--color-martini-900) !important;
}
[data-theme=dark] .btn .drop-down ul li.buttons button.selected i, .btn .drop-down ul li.buttons button.selected i[data-theme=dark], [data-theme=dark] button .drop-down ul li.buttons button.selected i, button .drop-down ul li.buttons button.selected i[data-theme=dark], [data-theme=dark] select .drop-down ul li.buttons button.selected i, select .drop-down ul li.buttons button.selected i[data-theme=dark] {
  color: var(--color-martini-900) !important;
}
.btn .drop-down ul li:last-of-type, button .drop-down ul li:last-of-type, select .drop-down ul li:last-of-type {
  border-bottom: none;
}
.btn .drop-down ul li:hover, button .drop-down ul li:hover, select .drop-down ul li:hover {
  background: var(--color-martini-850);
}
.btn .drop-down ul li.checkbox, button .drop-down ul li.checkbox, select .drop-down ul li.checkbox {
  padding: 0;
}
.btn .drop-down ul li.checkbox > label, button .drop-down ul li.checkbox > label, select .drop-down ul li.checkbox > label {
  cursor: pointer;
  padding: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
.btn .drop-down ul li.checkbox > label > div i, .btn .drop-down ul li.checkbox > label > div span, button .drop-down ul li.checkbox > label > div i, button .drop-down ul li.checkbox > label > div span, select .drop-down ul li.checkbox > label > div i, select .drop-down ul li.checkbox > label > div span {
  font-size: 1em;
  color: var(--color-martini-300);
}
.btn .drop-down ul li.checkbox > label label, button .drop-down ul li.checkbox > label label, select .drop-down ul li.checkbox > label label {
  pointer-events: none;
}
.btn .drop-down ul li.color-warning, button .drop-down ul li.color-warning, select .drop-down ul li.color-warning {
  color: rgb(218, 14, 60) !important;
}
.btn .drop-down ul li.color-warning i, button .drop-down ul li.color-warning i, select .drop-down ul li.color-warning i {
  color: rgb(218, 14, 60) !important;
}
.btn.btn-inline, button.btn-inline, select.btn-inline {
  display: inline-flex;
}
.btn.btn-icon, button.btn-icon, select.btn-icon {
  padding: 6px;
  aspect-ratio: 1;
  justify-content: center;
}
.btn.w-full, button.w-full, select.w-full {
  width: 100%;
  justify-content: center;
}
.btn.grow, button.grow, select.grow {
  flex-grow: 1;
  justify-content: center;
}
.btn.text-center, button.text-center, select.text-center {
  justify-content: center;
}
.btn.text-left, button.text-left, select.text-left {
  justify-content: start;
}
.btn.text-right, button.text-right, select.text-right {
  justify-content: end;
}
.btn.btn-xs, button.btn-xs, select.btn-xs {
  font-size: 0.8em;
  padding: 0.375em 0.75em;
}
.btn.btn-xs i, button.btn-xs i, select.btn-xs i {
  font-size: 0.8em;
}
.btn.btn-sm, button.btn-sm, select.btn-sm {
  font-size: 0.8em;
  padding: 0.75em 1em;
}
.btn.btn-sm i, button.btn-sm i, select.btn-sm i {
  font-size: 0.8em;
}
.btn.btn-lg, button.btn-lg, select.btn-lg {
  padding: 0.75em;
  font-size: 1.1em;
}
.btn.btn-lg i, button.btn-lg i, select.btn-lg i {
  font-size: 1.1em;
}
.btn.btn-xl, button.btn-xl, select.btn-xl {
  font-size: 1.5em;
}
.btn.btn-xl i, button.btn-xl i, select.btn-xl i {
  font-size: 1.5em;
}

.tabs {
  display: flex;
  align-items: center;
  gap: 0;
}
.tabs button,
.tabs .btn {
  border-radius: 0;
  background: transparent;
  border-right: 0;
  color: var(--color-martini-500);
  border-color: var(--color-martini-600);
  border-left-width: 0px;
}
.tabs button i,
.tabs .btn i {
  color: var(--color-martini-500) !important;
}
.tabs button:first-of-type,
.tabs .btn:first-of-type {
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  border-left-width: 1px;
}
.tabs button:last-of-type,
.tabs .btn:last-of-type {
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  border-right: 1px solid var(--color-martini-600);
}
.tabs button.selected,
.tabs .btn.selected {
  background: var(--color-martini-100);
  color: var(--color-martini-800);
  border-color: var(--color-martini-100);
}
.tabs button.selected i,
.tabs .btn.selected i {
  color: var(--color-martini-800) !important;
}
.tabs button:not(.selected):hover, .tabs button:not(.selected):focus,
.tabs .btn:not(.selected):hover,
.tabs .btn:not(.selected):focus {
  background: var(--color-martini-800);
  color: var(--color-martini-200);
}

.tabbing {
  display: flex;
  align-items: center;
  gap: 0;
  border-radius: 100px;
  outline: 1px solid #333;
  position: relative;
  padding: 0 0.375em;
  box-sizing: border-box;
}
.tabbing .tab-selector {
  background: white;
  position: absolute;
  height: calc(100% - 0.75em);
  border-radius: 100px;
  transition: all 0.2s ease;
}
.tabbing .tab {
  border-radius: 0;
  background: transparent;
  border-right: 0;
  position: relative;
  z-index: 2;
  padding: 0.75em 0.75em;
  transition: all 0.2s ease;
  color: #ccc;
}
.tabbing .tab:hover {
  color: white;
  cursor: pointer;
}
.tabbing .tab.selected {
  color: black;
}

select {
  padding-right: 1.953125em !important;
}

.select {
  display: flex;
  align-items: center;
  position: relative;
}
.select:not(.select--multiple)::after {
  position: absolute;
  right: 10px;
  content: "";
  justify-self: end;
  width: 0.7em;
  height: 0.4em;
  background-color: var(--color-martini-500);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.form-select.t-outline {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 100%;
}
.form-select.t-outline:hover button {
  border-color: var(--color-martini-accent);
}
.form-select.t-outline:hover .arrow {
  border-top-color: var(--color-martini-accent);
}
.form-select.t-outline button {
  transition: all 0.2s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 1em;
  font-weight: normal;
  padding: 0.75em 0.75em;
  padding-right: 35px;
  border: 1px solid var(--color-martini-600);
  border-radius: 12px;
  background-color: var(--color-martini-800);
  color: var(--color-martini-300);
  cursor: pointer;
}
[data-theme=dark] .form-select.t-outline button, .form-select.t-outline button[data-theme=dark] {
  color: var(--color-martini-100);
}
.form-select.t-outline button .value {
  display: flex;
  flex-flow: column;
  align-items: start;
  gap: 0.375em;
  text-align: left;
}
.form-select.t-outline button .value span {
  font-family: "Manrope", "Helvetica", "Arial", sans-serif;
  font-weight: 500;
  font-size: 1.2em;
}
.form-select.t-outline button .value > label {
  color: var(--color-martini-500);
  font-size: 0.8em;
}
.form-select.t-outline .dropdown {
  transition: all 0.2s ease;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border-radius: 12px;
  background-color: var(--color-martini-900);
  color: var(--color-martini-300);
  list-style: none;
  margin: 10px 0 0 0;
  z-index: 100;
  overflow: hidden;
  animation: drop-down 0.2s ease-out;
  transform-origin: top right;
  box-shadow: 0px 4px 10px rgba(var(--color-martini-300-rgb), 0.2), 0px 2px 3px rgba(var(--color-martini-300-rgb), 0.1);
}
[data-theme=dark] .form-select.t-outline .dropdown, .form-select.t-outline .dropdown[data-theme=dark] {
  border: 1px solid var(--color-martini-700);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2), 0px 2px 3px rgba(0, 0, 0, 0.1);
}
.form-select.t-outline .dropdown.hidden {
  display: none;
}
.form-select.t-outline .dropdown ul {
  display: flex;
  flex-flow: column;
  max-height: 400px;
  width: 100%;
  overflow-y: auto;
  list-style: none;
  padding: 0.75em;
  gap: 0.375em;
}
.form-select.t-outline .dropdown ul::-webkit-scrollbar {
  width: 6px;
}
.form-select.t-outline .dropdown ul::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 25px;
}
.form-select.t-outline .dropdown ul::-webkit-scrollbar-thumb {
  background: var(--color-martini-400);
}
.form-select.t-outline .dropdown ul li {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 6px;
  gap: 0.375em;
  transition: all 0.2s ease;
}
.form-select.t-outline .dropdown ul li i, .form-select.t-outline .dropdown ul li span {
  pointer-events: none;
}
.form-select.t-outline .dropdown ul li.btn {
  font-weight: bold;
}
.form-select.t-outline .dropdown ul li.btn:hover {
  background-color: var(--color-martini-300);
  border-color: var(--color-martini-300);
}
.form-select.t-outline .dropdown ul li:hover, .form-select.t-outline .dropdown ul li:focus {
  background-color: var(--color-martini-800);
}

#notifications {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: 20px;
  display: flex;
  flex-flow: column;
  gap: 10px;
  z-index: 200;
  width: 300px;
  max-width: 100%;
}
@media (max-width: 48rem) {
  #notifications {
    width: 100%;
  }
}
#notifications .notification {
  display: flex;
  background: var(--color-martini-700);
  color: var(--color-martini-white);
  padding: 10px;
  gap: 10px;
  font-size: 0.8em;
  border-radius: 12px;
  border: 1px solid var(--color-martini-400);
  animation: notification 0.3s ease;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
  flex-flow: row;
  align-items: baseline;
}
#notifications .notification .text {
  display: flex;
  flex-flow: column;
  gap: 0.375em;
}
#notifications .notification button {
  font-family: "Manrope", "Helvetica", "Arial", sans-serif;
  width: 100%;
  background: transparent;
  border-color: var(--color-martini-white);
  color: var(--color-martini-white);
  font-weight: bold;
  justify-content: center;
}
#notifications .notification button:hover {
  background: var(--color-martini-white);
  color: var(--color-martini-black);
  cursor: pointer;
}
#notifications .notification span {
  font-family: "Manrope", "Helvetica", "Arial", sans-serif;
  color: var(--color-martini-100);
  font-weight: bold;
  font-size: 1em;
}
#notifications .notification .close {
  position: absolute;
  top: 0.75em;
  right: 0.75em;
  color: var(--color-martini-100);
}
#notifications .notification.success {
  background: rgba(23, 191, 122, 0.1);
  border-color: rgba(23, 191, 122, 0.2);
  color: #09906b;
}
#notifications .notification.success span {
  color: #09906b;
}
#notifications .notification.success .close {
  color: #09906b;
  opacity: 0.5;
}
#notifications .notification.danger {
  background: rgba(255, 0, 65, 0.1);
  border-color: rgba(255, 0, 65, 0.2);
  color: #df0d40;
}
#notifications .notification.danger span {
  color: #df0d40;
}
#notifications .notification.danger .close {
  color: #df0d40;
  opacity: 0.5;
}

.progress-bar-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.375em;
  color: var(--color-martini-600);
}

.progress-bar {
  background: var(--color-martini-700);
  border-radius: 100px;
  height: 10px;
  flex: 1;
}
.progress-bar .progress-bar-fill {
  background: var(--color-martini-500);
  border-radius: 100px;
  height: 100%;
  width: 0;
}

.color-select {
  position: relative;
}
.color-select:hover button {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-color: var(--color-martini-700) !important;
  border-bottom-color: var(--color-martini-900) !important;
  z-index: 51;
  background: var(--color-martini-900) !important;
}
.color-select:hover .dropdown {
  display: grid;
}
.color-select button {
  transition: all 0s ease;
}
.color-select button .color {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
}
.color-select button .color[color=none], .color-select button .color[color=""] {
  display: none;
}
.color-select .dropdown {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--color-martini-700);
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  background: var(--color-martini-900);
  padding: 0.75em;
  z-index: 50;
  gap: 0.375em;
  width: 90px;
  flex-wrap: wrap;
  border-radius: 6px;
  border-top-right-radius: 0;
  box-shadow: 0px 5px 10px rgba(var(--color-martini-500-rgb), 0.3);
}
[data-theme=dark] .color-select .dropdown, .color-select .dropdown[data-theme=dark] {
  box-shadow: 0px 5px 10px rgba(var(--color-martini-950-rgb), 0.3);
}
.color-select .color {
  width: 100%;
  aspect-ratio: 1;
  border-right: 3px;
  opacity: 1;
  transition: all 0.2s ease;
  border-radius: 100px;
  border: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.color-select .color:hover {
  filter: brightness(1.2);
  cursor: pointer;
}
.color-select .color:active {
  opacity: 1;
}
.color-select .color .line {
  width: 100%;
  display: none;
  height: 2px;
  background: red;
  transform: rotate(-45deg) scaleX(1.5);
}
.color-select .color i {
  display: none;
}
.color-select .color span {
  display: none;
}
.color-select .color.color-none, .color-select .color[color=none], .color-select .color[color=""] {
  background: white;
  outline: 2px solid red;
  outline-offset: -2px;
}
.color-select .color.color-none .line, .color-select .color.color-none i, .color-select .color[color=none] .line, .color-select .color[color=none] i, .color-select .color[color=""] .line, .color-select .color[color=""] i {
  display: block;
}
.color-select .color.color-red, .color-select .color[color=red] {
  background: #ff1f1f;
  border-color: #ff1f1f;
}
.color-select .color.color-green, .color-select .color[color=green] {
  background: #17ce17;
  border-color: #17ce17;
}
.color-select .color.color-lime, .color-select .color[color=lime] {
  background: #b4ff54;
  border-color: #b4ff54;
}
.color-select .color.color-blue, .color-select .color[color=blue] {
  background: #2293ff;
  border-color: #2293ff;
}
.color-select .color.color-cyan, .color-select .color[color=cyan] {
  background: #5ee9ff;
  border-color: #5ee9ff;
}
.color-select .color.color-pink, .color-select .color[color=pink] {
  background: #ff48b9;
  border-color: #ff48b9;
}
.color-select .color.color-purple, .color-select .color[color=purple] {
  background: #a300ff;
  border-color: #a300ff;
}
.color-select .color.color-gray, .color-select .color[color=gray] {
  background: #777777;
  border-color: #777777;
}
.color-select .color.color-yellow, .color-select .color[color=yellow] {
  background: #ffbe00;
  border-color: #ffbe00;
}
.color-select .color.color-orange, .color-select .color[color=orange] {
  background: #ff7400;
  border-color: #ff7400;
}

.custom-tooltip {
  position: fixed;
  padding: 0 1em;
  min-height: 35px;
  background: var(--color-martini-200);
  color: var(--color-martini-800);
  font-size: 12px;
  border-radius: 4px;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  box-shadow: 0px 5px 15px rgba(var(--color-martini-200-rgb), 0.2), 0px 1px 5px rgba(var(--color-martini-200-rgb), 0.2);
}
.custom-tooltip kbd {
  display: inline-block;
  height: 22px;
  min-width: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1em;
  margin-left: 0.75em;
  padding: 0.1875em 0.375em;
  border: 1px solid var(--color-martini-500);
  border-radius: 6px;
  font: SFMono-Regular, Menlo, monospace;
  background: var(--color-martini-700);
  color: var(--color-martini-400);
  box-shadow: inset 0px -1px 0px var(--color-martini-500);
}
[data-theme=dark] .custom-tooltip kbd, .custom-tooltip kbd[data-theme=dark] {
  background: var(--color-martini-300);
  color: var(--color-martini-800);
}
[data-theme=dark] .custom-tooltip, .custom-tooltip[data-theme=dark] {
  box-shadow: 0px 5px 15px rgba(var(--color-martini-800-rgb), 0.2), 0px 1px 5px rgba(var(--color-martini-800-rgb), 0.2);
}

@keyframes modal-background {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes modal-box {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes popup-box {
  0% {
    opacity: 0;
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes modal-frame-sidebar {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
.modal, .popup {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-flow: row;
  gap: 5px;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 500;
  background: rgba(var(--color-martini-950-rgb), 0.9);
  backdrop-filter: blur(10px);
  overflow-x: auto;
  opacity: 0;
  animation: modal-background 0.3s ease both;
  z-index: 999;
}
[data-theme=dark] .modal, .modal[data-theme=dark], [data-theme=dark] .popup, .popup[data-theme=dark] {
  background: rgba(var(--color-martini-950-rgb), 0.9);
}
.modal.hidden, .popup.hidden {
  display: none;
}
.modal .modal-wrapper, .modal .popup-wrapper, .popup .modal-wrapper, .popup .popup-wrapper {
  max-height: 100%;
  position: relative;
  width: 90%;
  max-width: 700px;
}
.modal .modal-wrapper .modal-container, .modal .modal-wrapper popup-container, .modal .popup-wrapper .modal-container, .modal .popup-wrapper popup-container, .popup .modal-wrapper .modal-container, .popup .modal-wrapper popup-container, .popup .popup-wrapper .modal-container, .popup .popup-wrapper popup-container {
  padding-top: 1.953125em;
  padding-bottom: 1.953125em;
}
.modal .modal-box, .modal .popup-box, .popup .modal-box, .popup .popup-box {
  width: 100%;
  background: var(--color-martini-900);
  border-radius: 41px;
  padding: 1.5625em;
  box-shadow: 0px 11px 40px rgba(var(--color-martini-shadow-rgb), 0.1), 0px 6px 15px rgba(var(--color-martini-shadow-rgb), 0.2);
  animation: modal-box 0.5s cubic-bezier(0, 0.17, 0, 1) both;
  display: flex;
  flex-flow: column;
  gap: 1.25em;
  box-shadow: 0px 10px 40px rgba(var(--color-martini-500-rgb), 0.5);
}
[data-theme=dark] .modal .modal-box, .modal .modal-box[data-theme=dark], [data-theme=dark] .modal .popup-box, .modal .popup-box[data-theme=dark], [data-theme=dark] .popup .modal-box, .popup .modal-box[data-theme=dark], [data-theme=dark] .popup .popup-box, .popup .popup-box[data-theme=dark] {
  background: var(--color-martini-800);
  box-shadow: 0px 10px 40px rgba(var(--color-martini-950-rgb), 0.5);
}
.modal .modal-box .modal-header h1, .modal .popup-box .modal-header h1, .popup .modal-box .modal-header h1, .popup .popup-box .modal-header h1 {
  font-size: 1em;
}
.modal.modal-frame .modal-content, .popup.modal-frame .modal-content {
  width: calc(100% - 300px);
}
.modal.modal-frame .modal-content img, .popup.modal-frame .modal-content img {
  width: 100%;
}
.modal .modal-frame-sidebar, .popup .modal-frame-sidebar {
  position: fixed;
  width: 300px;
  height: calc(var(--vh, 1vh) * 100);
  background: var(--color-martini-950);
  top: 0;
  right: 0;
  bottom: 0;
  overflow: scroll;
  border-left: 1px solid var(--color-martini-700);
  display: flex;
  flex-flow: column;
  box-shadow: 0px 11px 40px rgba(var(--color-martini-shadow-rgb), 0.1), 0px 6px 15px rgba(var(--color-martini-shadow-rgb), 0.2);
  opacity: 0;
  animation: modal-frame-sidebar 0.5s 0.1s cubic-bezier(0, 0.17, 0, 1) both;
}
.modal .modal-frame-sidebar .section, .popup .modal-frame-sidebar .section {
  border-bottom: 1px solid var(--color-martini-700);
  padding: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
}
.modal .modal-frame-sidebar .section .section-title, .popup .modal-frame-sidebar .section .section-title {
  font-size: 0.75em;
  margin-bottom: 1em;
  width: 100%;
}
.modal .form, .popup .form {
  gap: 1em;
}
.modal .form .form-footer, .popup .form .form-footer {
  margin-top: 1em;
}
.modal .form h3, .modal .form h4, .modal .form h5, .popup .form h3, .popup .form h4, .popup .form h5 {
  margin-top: 0.75em;
  color: var(--color-martini-100);
}
.modal .list-files, .popup .list-files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  justify-content: start;
}
.modal .list-files .image, .popup .list-files .image {
  width: 100%;
  max-width: 150px;
  max-height: 150px;
  height: auto;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}
.modal .list-files .image:hover img, .modal .list-files .image:hover video, .popup .list-files .image:hover img, .popup .list-files .image:hover video {
  outline: 2px solid var(--color-martini-accent);
}
.modal .list-files .image img, .modal .list-files .image video, .popup .list-files .image img, .popup .list-files .image video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  overflow: hidden;
}

.popup {
  backdrop-filter: none;
  background: rgba(var(--color-martini-500-rgb), 0.4);
}
.popup .popup-wrapper {
  max-width: 400px;
}
.popup .popup-box {
  animation: popup-box 0.5s cubic-bezier(0, 0.17, 0, 1) both;
  text-align: center;
  justify-content: center;
  align-items: center;
  padding: 1.5625em;
  border-radius: 18px;
  box-shadow: 0px 10px 40px rgba(var(--color-martini-500-rgb), 0.5);
}
[data-theme=dark] .popup .popup-box, .popup .popup-box[data-theme=dark] {
  box-shadow: 0px 10px 40px rgba(var(--color-martini-950-rgb), 0.5);
}
.popup .popup-box .title {
  font-size: 2em;
}

body, html {
  font-size: 0.95em;
}

.container-wrapper {
  overflow: hidden;
  overflow-x: auto;
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  position: relative;
  display: flex;
}
.container-wrapper .page-wrapper {
  overflow: hidden;
  overflow-x: auto;
  height: calc(var(--vh, 1vh) * 100);
  width: 100vw;
  position: relative;
  display: flex;
}
.container-wrapper[sidebar=true] .content-header .btn-close-sidebar {
  display: flex;
}
.container-wrapper[sidebar=true] .content-header .btn-open-sidebar {
  display: none;
}
.container-wrapper[nav=lg] .nav-sm {
  display: none !important;
}
.container-wrapper[nav=lg] #set-lg {
  display: none;
}
.container-wrapper[nav=lg] [data-set-nav=lg] {
  display: none;
}
@media (max-width: 80rem) {
  .container-wrapper[nav=lg] [data-set-nav=md], .container-wrapper[nav=lg] [data-set-nav=lg] {
    display: none;
  }
}
.container-wrapper[nav=md] .nav-lg {
  display: none;
  position: absolute;
  left: 0;
}
.container-wrapper[nav=md] .nav-sm {
  display: flex !important;
}
.container-wrapper[nav=md] #set-md {
  display: none;
}
.container-wrapper[nav=md] [data-set-nav=md] {
  display: none;
}
@media (max-width: 80rem) {
  .container-wrapper[nav=md] [data-set-nav=md], .container-wrapper[nav=md] [data-set-nav=lg] {
    display: none;
  }
}
.container-wrapper[nav=sm] .nav-lg {
  display: none;
  position: absolute;
  left: 0;
}
.container-wrapper[nav=sm] .nav-sm {
  display: none !important;
}
.container-wrapper[nav=sm] #set-lg {
  display: none;
}
.container-wrapper[nav=sm] #set-md {
  display: none;
}
.container-wrapper[nav=sm] [data-set-nav=md], .container-wrapper[nav=sm] [data-set-nav=lg] {
  display: none;
}
.container-wrapper .btn-close-sidebar {
  display: none;
}
.container-wrapper .content-wrapper, .container-wrapper .sidebar-wrapper {
  padding: 0.375em;
  background: var(--color-martini-800);
  height: calc(var(--vh, 1vh) * 100);
  width: 50%;
}
@media (max-width: 40rem) {
  .container-wrapper .content-wrapper, .container-wrapper .sidebar-wrapper {
    padding: 0;
  }
}
.container-wrapper .content-wrapper {
  flex: 1;
}
.container-wrapper .sidebar-wrapper {
  padding-left: 0;
  width: 400px;
  display: none;
  grid-auto-rows: auto;
  grid-auto-flow: row;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  justify-items: stretch;
  grid-auto-rows: auto;
  gap: 0.375em;
}
.container-wrapper .sidebar-wrapper .sidebar:only-child {
  grid-row: span 2;
}
.container-wrapper .sidebar-wrapper:has(.sidebar-select.hidden) .sidebar {
  grid-row: span 2;
}
.container-wrapper .sidebar-wrapper.open {
  display: grid;
}
@media (max-width: 64rem) {
  .container-wrapper .sidebar-wrapper {
    position: absolute;
    z-index: 99;
    right: 0;
    width: 400px;
    background: transparent;
  }
}
@media (max-width: 40rem) {
  .container-wrapper .sidebar-wrapper {
    width: 100%;
    background: var(--color-martini-800);
  }
}
.container-wrapper .content {
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.05);
  background: var(--color-martini-950);
  border-radius: 12px;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-flow: column;
  scroll-snap-type: y mandatory;
}
@media (max-width: 40rem) {
  .container-wrapper .content {
    border-radius: 0px;
    box-shadow: 0px;
  }
}
.container-wrapper .content .content-page {
  padding: 1.25em;
  overflow-y: auto;
  flex: 1;
}
.container-wrapper .content .content-page.max-width {
  display: flex;
  justify-content: start;
  align-items: center;
  flex-flow: column;
}
.container-wrapper .content .content-page.max-width > div {
  width: 100%;
  max-width: 1200px;
}
.container-wrapper .content .content-loader {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container-wrapper .content .content-header {
  display: flex;
  align-items: center;
  padding: 1em;
  border-bottom: 1px solid var(--color-martini-700);
  flex-wrap: wrap;
  justify-content: end;
  gap: 1.25em;
  min-height: 65px;
}
@media (max-width: 40rem) {
  .container-wrapper .content .content-header [data-mobile-nav-btn] {
    display: flex !important;
  }
}
.container-wrapper .content .content-header [data-mobile-nav-btn] {
  display: none;
}
.container-wrapper .content .content-header .title, .container-wrapper .content .content-header .subtitle {
  display: flex;
  gap: 0.75em;
  flex-grow: 1;
  font-size: 1em;
  justify-content: start;
  align-items: middle;
}
.container-wrapper .content .content-header .title h2, .container-wrapper .content .content-header .title h3, .container-wrapper .content .content-header .title h4, .container-wrapper .content .content-header .title h5, .container-wrapper .content .content-header .title h6, .container-wrapper .content .content-header .subtitle h2, .container-wrapper .content .content-header .subtitle h3, .container-wrapper .content .content-header .subtitle h4, .container-wrapper .content .content-header .subtitle h5, .container-wrapper .content .content-header .subtitle h6 {
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: var(--color-martini-white);
}
.container-wrapper .content .content-header .title h2:hover, .container-wrapper .content .content-header .title h3:hover, .container-wrapper .content .content-header .title h4:hover, .container-wrapper .content .content-header .title h5:hover, .container-wrapper .content .content-header .title h6:hover, .container-wrapper .content .content-header .subtitle h2:hover, .container-wrapper .content .content-header .subtitle h3:hover, .container-wrapper .content .content-header .subtitle h4:hover, .container-wrapper .content .content-header .subtitle h5:hover, .container-wrapper .content .content-header .subtitle h6:hover {
  cursor: pointer;
}
.container-wrapper .content .content-header .title h2:hover label, .container-wrapper .content .content-header .title h3:hover label, .container-wrapper .content .content-header .title h4:hover label, .container-wrapper .content .content-header .title h5:hover label, .container-wrapper .content .content-header .title h6:hover label, .container-wrapper .content .content-header .subtitle h2:hover label, .container-wrapper .content .content-header .subtitle h3:hover label, .container-wrapper .content .content-header .subtitle h4:hover label, .container-wrapper .content .content-header .subtitle h5:hover label, .container-wrapper .content .content-header .subtitle h6:hover label {
  display: block;
}
.container-wrapper .content .content-header .title h2 label, .container-wrapper .content .content-header .title h3 label, .container-wrapper .content .content-header .title h4 label, .container-wrapper .content .content-header .title h5 label, .container-wrapper .content .content-header .title h6 label, .container-wrapper .content .content-header .subtitle h2 label, .container-wrapper .content .content-header .subtitle h3 label, .container-wrapper .content .content-header .subtitle h4 label, .container-wrapper .content .content-header .subtitle h5 label, .container-wrapper .content .content-header .subtitle h6 label {
  font-size: 0.9em;
  display: none;
  color: var(--color-martini-200);
}
.container-wrapper .content .content-header .title span, .container-wrapper .content .content-header .subtitle span {
  color: var(--color-martini-accent);
}
.container-wrapper .content .content-header .right {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-flow: row;
  gap: 1em;
}
.container-wrapper .content .content-header .subtitle {
  width: 100%;
}
.container-wrapper .content .header-group {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-flow: row;
  gap: 0.75em;
  line-height: 1em;
}
.container-wrapper .content .header-group > i {
  color: var(--color-martini-400);
}
.container-wrapper .content .header-group > span {
  font-size: 0.9em;
  color: var(--color-martini-500);
}
.container-wrapper .content .mobile-header {
  display: none;
  gap: 1em;
  margin-bottom: 1em;
  position: sticky;
  top: -20px;
  background: var(--color-martini-950);
  z-index: 90;
  margin-left: -1.25em;
  margin-right: -1.25em;
  padding: 1.25em 1.25em;
  margin-top: -1.25em;
  border-bottom: 1px solid var(--color-martini-800);
  align-items: center;
}
@media (max-width: 40rem) {
  .container-wrapper .content .mobile-header {
    display: flex;
  }
}
.container-wrapper .content .mobile-header .logo {
  width: 40px;
  fill: var(--color-martini-200);
}
.container-wrapper .content .selected-frames {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color-martini-accent);
  padding: 0.75em 1.953125em;
  margin-bottom: 0.375em;
  position: sticky;
  top: -20px;
  background: var(--color-martini-950);
  z-index: 10;
  width: calc(100% + 2.5em);
  margin-left: -1.25em;
}
.container-wrapper .content .selected-frames .selected-frames-title {
  font-size: 1.1em;
  font-weight: 500;
  display: flex;
  gap: 0.375em;
  align-items: center;
}
.container-wrapper .content .selected-frames .selected-frames-actions {
  display: flex;
  gap: 0.375em;
  align-items: center;
}
.container-wrapper .content .selected-frames button {
  font-size: 0.9em;
  background: var(--color-martini-accent);
  border-color: var(--color-martini-accent);
}
.container-wrapper .nav-lg {
  box-shadow: 0px 0px 100px rgba(0, 0, 0, 0);
}
.container-wrapper .nav-lg.show {
  display: flex !important;
  box-shadow: 0px 0px 30px rgba(var(--color-martini-500-rgb), 0.4);
}
[data-theme=dark] .container-wrapper .nav-lg.show, .container-wrapper .nav-lg.show[data-theme=dark] {
  box-shadow: 0px 0px 20px rgba(var(--color-martini-950-rgb), 0.6);
}
.container-wrapper .navigation {
  display: flex;
  flex-flow: column;
  height: calc(var(--vh, 1vh) * 100);
  width: 300px;
  background: rgba(var(--color-martini-800-rgb), 1);
  position: relative;
  z-index: 100;
}
.container-wrapper .navigation .nav-size-btn {
  position: absolute !important;
  right: -10px !important;
  padding: 0px !important;
  border-radius: 6px !important;
  background: var(--color-martini-900) !important;
  border: 1px solid var(--color-martini-700) !important;
  font-size: 0.85em !important;
  height: 25px;
  width: 25px;
  text-align: center;
  justify-content: center;
}
.container-wrapper .navigation .nav-size-btn i {
  color: var(--color-martini-500) !important;
}
@media (max-width: 80rem) {
  .container-wrapper .navigation .nav-size-btn {
    display: none;
  }
}
.container-wrapper .navigation .menu {
  flex-grow: 1;
  padding: 1em;
  overflow-x: hidden;
  display: flex;
  flex-flow: column;
  gap: 1.25em;
}
.container-wrapper .navigation .menu .menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75em;
}
.container-wrapper .navigation button.project-select {
  background: var(--color-martini-850);
  box-shadow: 0px 4px 10px rgba(var(--color-martini-300-rgb), 0.2), 0px 2px 3px rgba(var(--color-martini-300-rgb), 0.1);
  border: none;
}
[data-theme=dark] .container-wrapper .navigation button.project-select, .container-wrapper .navigation button.project-select[data-theme=dark] {
  border: 1px solid var(--color-martini-700);
  background: var(--color-martini-900);
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2), 0px 2px 3px rgba(0, 0, 0, 0.1);
}
.container-wrapper .navigation button.project-select:hover {
  background: var(--color-martini-900);
}
[data-theme=dark] .container-wrapper .navigation button.project-select:hover, .container-wrapper .navigation button.project-select:hover[data-theme=dark] {
  background: var(--color-martini-950);
}
.container-wrapper .navigation .row {
  display: flex;
  justify-items: center;
}
.container-wrapper .navigation .submenu {
  border: 1px solid var(--color-martini-700);
  padding: 1em;
  border-radius: 12px;
  display: flex;
  gap: 1em;
  flex-flow: column;
  margin-bottom: 0.75em;
}
.container-wrapper .navigation .submenu .submenu-list {
  display: flex;
  flex-flow: column;
}
.container-wrapper .navigation .submenu .submenu-list:empty {
  display: none;
}
.container-wrapper .navigation .submenu .submenu-list .submenu-link {
  padding: 0.375em 0.75em 0.375em calc(0.75em - 5px);
  display: flex;
  align-items: center;
  gap: 0.375em;
  font-size: 0.9em;
  line-height: 1.2em;
  border-radius: 6px;
}
.container-wrapper .navigation .submenu .submenu-list .submenu-link:hover {
  cursor: pointer;
  background: var(--color-martini-700);
  color: var(--color-martini-200);
}
.container-wrapper .navigation .submenu .submenu-list .submenu-link.selected {
  background: var(--color-martini-700);
  color: var(--color-martini-200);
}
.container-wrapper .navigation .submenu .submenu-list .submenu-link span {
  flex-grow: 1;
}
.container-wrapper .navigation .submenu .submenu-list .submenu-link i {
  pointer-events: all;
  padding: 0.375em;
}
.container-wrapper .navigation .submenu .submenu-list .submenu-link i:hover {
  background: var(--color-martini-700);
  border-radius: 6px;
  cursor: move;
}
.container-wrapper .navigation .submenu .submenu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-martini-400);
}
.container-wrapper .navigation .submenu .submenu-header:hover {
  color: var(--color-martini-200);
  cursor: pointer;
}
.container-wrapper .navigation .submenu .submenu-header:hover i {
  color: var(--color-martini-200) !important;
}
.container-wrapper .navigation .submenu .submenu-header i {
  color: var(--color-martini-600);
  transition: all 0.2s ease;
}
.container-wrapper .navigation .submenu .submenu-header .submenu-title {
  display: flex;
  gap: 0.375em;
  align-items: center;
  transition: all 0.2s ease;
}
.container-wrapper .navigation a,
.container-wrapper .navigation .link,
.container-wrapper .navigation .sublink {
  display: flex;
  gap: 0.75em;
  transition: all 0.2s ease;
  border-radius: 10px;
  padding: 0.6em;
  text-decoration: none;
  position: relative;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  color: var(--color-martini-300);
}
.container-wrapper .navigation a.locked,
.container-wrapper .navigation .link.locked,
.container-wrapper .navigation .sublink.locked {
  pointer-events: none;
  opacity: 0.7;
  color: var(--color-martini-300);
}
.container-wrapper .navigation a.locked::after,
.container-wrapper .navigation .link.locked::after,
.container-wrapper .navigation .sublink.locked::after {
  font-family: "Font Awesome 6 Pro";
  font-weight: 900;
  content: "\f023";
  color: var(--color-martini-100);
}
.container-wrapper .navigation a > div,
.container-wrapper .navigation .link > div,
.container-wrapper .navigation .sublink > div {
  display: flex;
  gap: 0.75em;
}
.container-wrapper .navigation a > div > i,
.container-wrapper .navigation .link > div > i,
.container-wrapper .navigation .sublink > div > i {
  color: var(--color-martini-600);
  transition: all 0.2s ease;
}
[data-theme=dark] .container-wrapper .navigation a > div > i, .container-wrapper .navigation a > div > i[data-theme=dark],
[data-theme=dark] .container-wrapper .navigation .link > div > i,
.container-wrapper .navigation .link > div > i[data-theme=dark],
[data-theme=dark] .container-wrapper .navigation .sublink > div > i,
.container-wrapper .navigation .sublink > div > i[data-theme=dark] {
  color: var(--color-martini-600);
}
.container-wrapper .navigation a.upgrade-btn,
.container-wrapper .navigation .link.upgrade-btn,
.container-wrapper .navigation .sublink.upgrade-btn {
  margin-bottom: 0.75em;
  padding: 0.75em;
  margin-top: -0.75em;
}
.container-wrapper .navigation a.highlight,
.container-wrapper .navigation .link.highlight,
.container-wrapper .navigation .sublink.highlight {
  background: var(--color-martini-accent);
  color: white;
}
.container-wrapper .navigation a.highlight:hover,
.container-wrapper .navigation .link.highlight:hover,
.container-wrapper .navigation .sublink.highlight:hover {
  background: var(--color-martini-accent-hover);
  color: white;
}
.container-wrapper .navigation a.highlight i,
.container-wrapper .navigation .link.highlight i,
.container-wrapper .navigation .sublink.highlight i {
  color: white !important;
}
.container-wrapper .navigation a label.beta,
.container-wrapper .navigation .link label.beta,
.container-wrapper .navigation .sublink label.beta {
  position: absolute;
  right: 1em;
  background: var(--color-martini-accent);
  font-size: 0.6em;
  font-weight: bold;
  line-height: 1em;
  padding: 0.375em;
  color: white;
  border-radius: 6px;
}
.container-wrapper .navigation a span,
.container-wrapper .navigation .link span,
.container-wrapper .navigation .sublink span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container-wrapper .navigation a:hover,
.container-wrapper .navigation .link:hover,
.container-wrapper .navigation .sublink:hover {
  background: var(--color-martini-700);
  color: var(--color-martini-200);
  cursor: pointer;
}
.container-wrapper .navigation a:hover > div > i,
.container-wrapper .navigation .link:hover > div > i,
.container-wrapper .navigation .sublink:hover > div > i {
  color: var(--color-martini-200);
}
.container-wrapper .navigation a.locked {
  opacity: 0.4;
}
.container-wrapper .navigation a.locked::after {
  content: none;
}
.container-wrapper .navigation .sublinks {
  display: flex;
  flex-flow: column;
  padding-left: 1.953125em;
  font-size: 0.9em;
  gap: 0.375em;
}
.container-wrapper .navigation .sublinks .sublink {
  color: var(--color-martini-300);
  padding: 0.6em;
}
.container-wrapper .navigation .sublinks .sublink.selected {
  background: var(--color-martini-700);
}
.container-wrapper .navigation .logo {
  fill: var(--color-martini-200);
  width: 40px;
  padding: 5px;
}
.container-wrapper .navigation .group {
  display: flex;
  flex-flow: column;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--color-martini-700);
  gap: 0.375em;
}
.container-wrapper .navigation .group:last-of-type {
  border-bottom: none;
}
.container-wrapper .navigation .account {
  display: flex;
  gap: 1.25em;
  flex-flow: column;
  width: 100%;
  border-top: 1px solid var(--color-martini-700);
  justify-self: end;
  padding: 20px;
}
.container-wrapper .navigation.nav-sm {
  display: none;
  width: 80px;
  left: 0;
}
.container-wrapper .navigation.nav-sm .menu {
  overflow-x: visible;
}
.container-wrapper .navigation.nav-sm .logo {
  width: 70%;
  margin-left: 15%;
  padding: 2px;
  margin-bottom: 0.375em;
}
.container-wrapper .navigation.nav-sm a, .container-wrapper .navigation.nav-sm button {
  padding: 0.75em;
  justify-content: center;
  font-size: 1.25em;
  color: var(--color-martini-500);
  transition: all 0.2s ease;
  position: relative;
}
.container-wrapper .navigation.nav-sm a:hover, .container-wrapper .navigation.nav-sm button:hover {
  color: var(--color-martini-200);
}
[data-theme=dark] .container-wrapper .navigation.nav-sm a:hover, .container-wrapper .navigation.nav-sm a:hover[data-theme=dark], [data-theme=dark] .container-wrapper .navigation.nav-sm button:hover, .container-wrapper .navigation.nav-sm button:hover[data-theme=dark] {
  color: var(--color-martini-300);
}
.container-wrapper .navigation.nav-sm a span, .container-wrapper .navigation.nav-sm button span {
  display: none;
}
.container-wrapper .navigation.nav-sm .group {
  gap: 0.375em;
}
.container-wrapper .navigation.nav-sm .sublinks {
  display: none;
}
.container-wrapper .navigation #creatives-list {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.container-wrapper .navigation #creatives-list .sorting {
  opacity: 0.5;
}

/* ------------------------------------- */
/*            SELECTED FRAME             */
/* ------------------------------------- */
.selected-frame .images .board {
  width: 100%;
  overflow: hidden;
}
.selected-frame .images img {
  width: 100%;
}

/* ------------------------------------- */
/*                SIDEBAR                */
/* ------------------------------------- */
.sidebar, .sidebar-select {
  background: var(--color-martini-950);
  border-left: 1px solid var(--color-martini-800);
  box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-flow: column;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  /* -----   SIDEBAR HEADER   ---- */
  /* -----   SIDEBAR SELECTED FRAME   ---- */
  /* -----   SIDEBAR CONTENT   ---- */
}
@media (max-width: 40rem) {
  .sidebar, .sidebar-select {
    border-radius: 0px;
    box-shadow: 0px;
  }
}
@media (max-width: 64rem) {
  .sidebar, .sidebar-select {
    box-shadow: 0px 0px 20px rgba(var(--color-martini-200-rgb), 0.2), 0px 0px 5px rgba(var(--color-martini-200-rgb), 0.2);
  }
}
.sidebar .sidebar-header, .sidebar-select .sidebar-header {
  border-bottom: 1px solid var(--color-martini-800);
  padding: 0px 1em;
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* -----   SIDEBAR MENU   ---- */
}
.sidebar .sidebar-header .selected-frame-title, .sidebar-select .sidebar-header .selected-frame-title {
  font-weight: 500;
}
.sidebar .sidebar-header button[data-sidebar-toggle], .sidebar-select .sidebar-header button[data-sidebar-toggle] {
  display: none;
}
@media (max-width: 64rem) {
  .sidebar .sidebar-header button[data-sidebar-toggle], .sidebar-select .sidebar-header button[data-sidebar-toggle] {
    display: flex;
  }
}
.sidebar .sidebar-header .sidebar-menu, .sidebar-select .sidebar-header .sidebar-menu {
  width: 100%;
  height: 100%;
  display: flex;
  gap: 1em;
  align-items: center;
}
.sidebar .sidebar-header .sidebar-menu span, .sidebar-select .sidebar-header .sidebar-menu span {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0.375em;
  color: var(--color-martini-500);
  border-bottom: 3px solid transparent;
}
.sidebar .sidebar-header .sidebar-menu span label, .sidebar-select .sidebar-header .sidebar-menu span label {
  background: var(--color-martini-600);
  color: var(--color-martini-950);
  font-size: 0.7em;
  padding: 0.3em 0.35em;
  line-height: 1em;
  border-radius: 3px;
}
.sidebar .sidebar-header .sidebar-menu span i, .sidebar-select .sidebar-header .sidebar-menu span i {
  display: none;
}
.sidebar .sidebar-header .sidebar-menu span:hover, .sidebar-select .sidebar-header .sidebar-menu span:hover {
  cursor: pointer;
}
.sidebar .sidebar-header .sidebar-menu span.active, .sidebar-select .sidebar-header .sidebar-menu span.active {
  border-bottom: 3px solid var(--color-martini-200);
  color: var(--color-martini-200);
  font-weight: 500;
}
.sidebar .sidebar-header .sidebar-menu span.active label, .sidebar-select .sidebar-header .sidebar-menu span.active label {
  background: var(--color-martini-200);
}
.sidebar.selected-frame .selected-frame-empty, .sidebar-select.selected-frame .selected-frame-empty {
  font-size: 2em;
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 0.75em;
  color: var(--color-martini-600);
}
.sidebar.selected-frame .selected-frame-title, .sidebar-select.selected-frame .selected-frame-title {
  flex-grow: 1;
}
.sidebar.selected-frame .boards, .sidebar-select.selected-frame .boards {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "first first" "second third";
  gap: 1em;
  width: 100%;
}
.sidebar.selected-frame .boards[data-main-board=""] .shot, .sidebar.selected-frame .boards[data-main-board=board] .shot, .sidebar-select.selected-frame .boards[data-main-board=""] .shot, .sidebar-select.selected-frame .boards[data-main-board=board] .shot {
  grid-area: third;
}
.sidebar.selected-frame .boards[data-main-board=""] .board, .sidebar.selected-frame .boards[data-main-board=board] .board, .sidebar-select.selected-frame .boards[data-main-board=""] .board, .sidebar-select.selected-frame .boards[data-main-board=board] .board {
  grid-area: first;
}
.sidebar.selected-frame .boards[data-main-board=""] .photo, .sidebar.selected-frame .boards[data-main-board=board] .photo, .sidebar-select.selected-frame .boards[data-main-board=""] .photo, .sidebar-select.selected-frame .boards[data-main-board=board] .photo {
  grid-area: second;
}
.sidebar.selected-frame .boards[data-main-board=shot] .shot, .sidebar-select.selected-frame .boards[data-main-board=shot] .shot {
  grid-area: first;
}
.sidebar.selected-frame .boards[data-main-board=shot] .board, .sidebar-select.selected-frame .boards[data-main-board=shot] .board {
  grid-area: second;
}
.sidebar.selected-frame .boards[data-main-board=shot] .photo, .sidebar-select.selected-frame .boards[data-main-board=shot] .photo {
  grid-area: third;
}
.sidebar.selected-frame .boards[data-main-board=photo] .shot, .sidebar-select.selected-frame .boards[data-main-board=photo] .shot {
  grid-area: third;
}
.sidebar.selected-frame .boards[data-main-board=photo] .board, .sidebar-select.selected-frame .boards[data-main-board=photo] .board {
  grid-area: second;
}
.sidebar.selected-frame .boards[data-main-board=photo] .photo, .sidebar-select.selected-frame .boards[data-main-board=photo] .photo {
  grid-area: first;
}
.sidebar.selected-frame .boards .board, .sidebar.selected-frame .boards .photo, .sidebar.selected-frame .boards .shot, .sidebar-select.selected-frame .boards .board, .sidebar-select.selected-frame .boards .photo, .sidebar-select.selected-frame .boards .shot {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar.selected-frame .boards .board:hover .board-actions, .sidebar.selected-frame .boards .photo:hover .board-actions, .sidebar.selected-frame .boards .shot:hover .board-actions, .sidebar-select.selected-frame .boards .board:hover .board-actions, .sidebar-select.selected-frame .boards .photo:hover .board-actions, .sidebar-select.selected-frame .boards .shot:hover .board-actions {
  opacity: 1;
  top: 0;
}
.sidebar.selected-frame .boards .board:hover .board-type, .sidebar.selected-frame .boards .photo:hover .board-type, .sidebar.selected-frame .boards .shot:hover .board-type, .sidebar-select.selected-frame .boards .board:hover .board-type, .sidebar-select.selected-frame .boards .photo:hover .board-type, .sidebar-select.selected-frame .boards .shot:hover .board-type {
  background: var(--color-martini-900);
}
.sidebar.selected-frame .boards .board.drop-active .upload, .sidebar.selected-frame .boards .photo.drop-active .upload, .sidebar.selected-frame .boards .shot.drop-active .upload, .sidebar-select.selected-frame .boards .board.drop-active .upload, .sidebar-select.selected-frame .boards .photo.drop-active .upload, .sidebar-select.selected-frame .boards .shot.drop-active .upload {
  display: flex;
}
.sidebar.selected-frame .boards .board .board-type, .sidebar.selected-frame .boards .photo .board-type, .sidebar.selected-frame .boards .shot .board-type, .sidebar-select.selected-frame .boards .board .board-type, .sidebar-select.selected-frame .boards .photo .board-type, .sidebar-select.selected-frame .boards .shot .board-type {
  position: absolute;
  top: 0.75em;
  right: 0.75em;
  background: rgba(var(--color-martini-900-rgb), 0.5);
  z-index: 10;
  color: var(--color-martini-200);
  font-size: 0.65em;
  padding: 0.2em 0.6em;
  border-radius: 100px;
  line-height: 1em;
  font-weight: 500;
}
.sidebar.selected-frame .boards .board .board-actions, .sidebar.selected-frame .boards .photo .board-actions, .sidebar.selected-frame .boards .shot .board-actions, .sidebar-select.selected-frame .boards .board .board-actions, .sidebar-select.selected-frame .boards .photo .board-actions, .sidebar-select.selected-frame .boards .shot .board-actions {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 15;
  opacity: 0;
  transition: all 0.2s ease;
  top: 1.25em;
}
.sidebar.selected-frame .boards .board .board-actions .btns, .sidebar.selected-frame .boards .photo .board-actions .btns, .sidebar.selected-frame .boards .shot .board-actions .btns, .sidebar-select.selected-frame .boards .board .board-actions .btns, .sidebar-select.selected-frame .boards .photo .board-actions .btns, .sidebar-select.selected-frame .boards .shot .board-actions .btns {
  padding: 0.75em;
  position: absolute;
  width: 100%;
  justify-content: end;
  gap: 0.375em;
  bottom: 0;
  font-size: 0.8em;
}
.sidebar.selected-frame .boards .board .board-actions .btns button, .sidebar.selected-frame .boards .photo .board-actions .btns button, .sidebar.selected-frame .boards .shot .board-actions .btns button, .sidebar-select.selected-frame .boards .board .board-actions .btns button, .sidebar-select.selected-frame .boards .photo .board-actions .btns button, .sidebar-select.selected-frame .boards .shot .board-actions .btns button {
  flex-grow: inherit;
  aspect-ratio: 1;
  padding: 0.75em;
}
.sidebar.selected-frame .boards .board .board-actions .btns button:disabled, .sidebar.selected-frame .boards .photo .board-actions .btns button:disabled, .sidebar.selected-frame .boards .shot .board-actions .btns button:disabled, .sidebar-select.selected-frame .boards .board .board-actions .btns button:disabled, .sidebar-select.selected-frame .boards .photo .board-actions .btns button:disabled, .sidebar-select.selected-frame .boards .shot .board-actions .btns button:disabled {
  display: none;
}
.sidebar.selected-frame .boards .board .upload, .sidebar.selected-frame .boards .photo .upload, .sidebar.selected-frame .boards .shot .upload, .sidebar-select.selected-frame .boards .board .upload, .sidebar-select.selected-frame .boards .photo .upload, .sidebar-select.selected-frame .boards .shot .upload {
  pointer-events: none;
  border: 1px solid var(--color-martini-accent);
  background: rgba(var(--color-martini-accent-rgb), 1);
  border-radius: 6px;
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  color: var(--color-martini-black);
  flex-flow: column;
  gap: 0.375em;
  z-index: 50;
}
.sidebar.selected-frame .boards .board .upload i, .sidebar.selected-frame .boards .photo .upload i, .sidebar.selected-frame .boards .shot .upload i, .sidebar-select.selected-frame .boards .board .upload i, .sidebar-select.selected-frame .boards .photo .upload i, .sidebar-select.selected-frame .boards .shot .upload i {
  font-size: 1.2em;
}
.sidebar.selected-frame .boards .board .upload span, .sidebar.selected-frame .boards .photo .upload span, .sidebar.selected-frame .boards .shot .upload span, .sidebar-select.selected-frame .boards .board .upload span, .sidebar-select.selected-frame .boards .photo .upload span, .sidebar-select.selected-frame .boards .shot .upload span {
  font-size: 0.8em;
}
.sidebar.selected-frame .boards .board .placeholder, .sidebar.selected-frame .boards .photo .placeholder, .sidebar.selected-frame .boards .shot .placeholder, .sidebar-select.selected-frame .boards .board .placeholder, .sidebar-select.selected-frame .boards .photo .placeholder, .sidebar-select.selected-frame .boards .shot .placeholder {
  border: 1px solid var(--color-martini-700);
  background: var(--color-martini-850);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 100%;
  height: 100%;
  color: var(--color-martini-600);
  flex-flow: column;
  gap: 0.375em;
}
.sidebar.selected-frame .boards .board .placeholder i, .sidebar.selected-frame .boards .photo .placeholder i, .sidebar.selected-frame .boards .shot .placeholder i, .sidebar-select.selected-frame .boards .board .placeholder i, .sidebar-select.selected-frame .boards .photo .placeholder i, .sidebar-select.selected-frame .boards .shot .placeholder i {
  font-size: 1.2em;
}
.sidebar.selected-frame .boards .board .placeholder span, .sidebar.selected-frame .boards .photo .placeholder span, .sidebar.selected-frame .boards .shot .placeholder span, .sidebar-select.selected-frame .boards .board .placeholder span, .sidebar-select.selected-frame .boards .photo .placeholder span, .sidebar-select.selected-frame .boards .shot .placeholder span {
  font-size: 0.8em;
}
.sidebar.selected-frame .boards .board .board-media, .sidebar.selected-frame .boards .photo .board-media, .sidebar.selected-frame .boards .shot .board-media, .sidebar-select.selected-frame .boards .board .board-media, .sidebar-select.selected-frame .boards .photo .board-media, .sidebar-select.selected-frame .boards .shot .board-media {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: absolute;
}
.sidebar.selected-frame .boards .board .board-media .uploading, .sidebar.selected-frame .boards .photo .board-media .uploading, .sidebar.selected-frame .boards .shot .board-media .uploading, .sidebar-select.selected-frame .boards .board .board-media .uploading, .sidebar-select.selected-frame .boards .photo .board-media .uploading, .sidebar-select.selected-frame .boards .shot .board-media .uploading {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(var(--color-martini-900-rgb), 0.8);
  justify-content: center;
  align-items: center;
  color: var(--color-martini-100);
  pointer-events: none;
  position: absolute;
  z-index: 60;
}
.sidebar.selected-frame .boards .board .board-media img, .sidebar.selected-frame .boards .board .board-media video, .sidebar.selected-frame .boards .photo .board-media img, .sidebar.selected-frame .boards .photo .board-media video, .sidebar.selected-frame .boards .shot .board-media img, .sidebar.selected-frame .boards .shot .board-media video, .sidebar-select.selected-frame .boards .board .board-media img, .sidebar-select.selected-frame .boards .board .board-media video, .sidebar-select.selected-frame .boards .photo .board-media img, .sidebar-select.selected-frame .boards .photo .board-media video, .sidebar-select.selected-frame .boards .shot .board-media img, .sidebar-select.selected-frame .boards .shot .board-media video {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 1;
  user-select: none;
}
.sidebar .sidebar-content, .sidebar-select .sidebar-content {
  width: 100%;
  flex: 1;
  padding: 1em;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
.sidebar .sidebar-content .sidebar-tab, .sidebar-select .sidebar-content .sidebar-tab {
  display: none;
  /* -----   SIDEBAR TAGS   ---- */
}
.sidebar .sidebar-content .sidebar-tab.active, .sidebar-select .sidebar-content .sidebar-tab.active {
  display: grid;
}
.sidebar .sidebar-content .sidebar-tab[data-sidebar-tab=tags], .sidebar-select .sidebar-content .sidebar-tab[data-sidebar-tab=tags] {
  flex-flow: column;
  gap: 1.25em;
}
.sidebar .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tags-groups, .sidebar-select .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tags-groups {
  display: flex;
  flex-flow: column;
  gap: 1em;
}
.sidebar .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tags-group, .sidebar-select .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tags-group {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
}
.sidebar .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tags-group .tags-group-header, .sidebar-select .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tags-group .tags-group-header {
  font-weight: 500;
}
.sidebar .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tag-controls, .sidebar-select .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tag-controls {
  display: flex;
  font-size: 0.85em;
  gap: 0.75em;
}
.sidebar .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tag-controls input, .sidebar-select .sidebar-content .sidebar-tab[data-sidebar-tab=tags] .tag-controls input {
  width: 100%;
}
.sidebar .header, .sidebar-select .header {
  margin-bottom: 1.25em;
}
.sidebar .menu, .sidebar-select .menu {
  position: absolute;
  bottom: 0;
  height: 70px;
  width: 100%;
  display: flex;
  border-top: 1px solid var(--color-martini-800);
}
.sidebar .menu span, .sidebar-select .menu span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-martini-800);
  padding: 1em;
  transition: all 0.2s ease;
  gap: 0.375em;
  color: var(--color-martini-100);
}
.sidebar .menu span:hover, .sidebar-select .menu span:hover {
  background: var(--color-martini-800);
  cursor: pointer;
}
.sidebar .menu span.active, .sidebar-select .menu span.active {
  background: var(--color-martini-accent);
  color: white;
}

#ffs-next, #ffs-prev {
  position: absolute;
  z-index: 10;
}

#ffs-next {
  right: 0.75em;
}

#ffs-prev {
  left: 0.75em;
}

/* ------------------------------------- */
/*                COMMENTS               */
/* ------------------------------------- */
#ffs-comments {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  height: 100%;
  overflow: hidden;
  inset: 0;
  position: absolute;
}
#ffs-comments .comments-content {
  position: relative;
  overflow-y: auto;
}
#ffs-comments .comments-footer {
  border-top: 1px solid var(--color-martini-800);
  width: 100%;
  background: var(--color-martini-900);
  padding: 1em;
  display: flex;
  flex-flow: column;
  gap: 1em;
  align-items: start;
}
#ffs-comments .comments-footer textarea, #ffs-comments .comments-footer .comment-input {
  padding: 0px;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  border-radius: 0px;
  text-align: left;
  color: var(--color-martini-200);
}
#ffs-comments .comments-footer textarea::placeholder, #ffs-comments .comments-footer .comment-input::placeholder {
  color: var(--color-martini-500);
}
#ffs-comments .comments {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  inset: 0;
  overflow-y: auto;
  height: 100%;
  padding: 0.75em;
}
#ffs-comments .comments .status {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var();
}
#ffs-comments .comments .comment-wrapper {
  background: var(--color-martini-850);
  border-radius: 12px;
  padding: 0.75em;
}
#ffs-comments .comments .comment-wrapper:has(.comment-wrapper) .comment-footer {
  margin-bottom: 20px;
}
#ffs-comments .comments .comment-wrapper[data-comment-status="2"] .comment-status-btn {
  transform: translateY(0) !important;
  opacity: 1 !important;
}
#ffs-comments .comments .comment-wrapper[data-comment-status="2"] .comment-status-btn i {
  color: var(--color-martini-success) !important;
}
#ffs-comments .comments .comment-wrapper .comment-reply-container {
  border: 2px solid var(--color-martini-200);
  border-radius: 12px;
  padding: 0.75em;
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  background: var(--color-martini-900);
  font-size: 0.9em;
}
#ffs-comments .comments .comment-wrapper .comment-reply-container [contenteditable=true]:focus {
  -webkit-appearance: none;
  outline: none;
  border: none;
}
#ffs-comments .comments .comment-wrapper .comment {
  display: flex;
  flex-flow: column;
  margin-left: 15px;
  border-left: 2px solid var(--color-martini-700);
}
#ffs-comments .comments .comment-wrapper .comment:last-of-type {
  border-left: none !important;
}
#ffs-comments .comments .comment-wrapper .comment .comment-header {
  display: flex;
  position: relative;
  height: 30px;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}
#ffs-comments .comments .comment-wrapper .comment .comment-header .delete-comment-btn {
  margin-left: auto;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content {
  display: flex;
  flex-flow: column;
  gap: 7px;
  padding-left: 1.5625em;
  position: relative;
  padding-bottom: 1em;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content:hover .comment-footer > div button {
  transform: translateY(0px);
  opacity: 1;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .comment-footer {
  display: flex;
  justify-content: space-between;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .comment-footer > div {
  display: flex;
  gap: 0.75em;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .comment-footer > div button {
  transition: all 0.2s ease;
  transform: translateY(10px);
  opacity: 0;
}
@media (max-width: 40rem) {
  #ffs-comments .comments .comment-wrapper .comment .comment-content .comment-footer > div button {
    transform: translateY(0px) !important;
    opacity: 1 !important;
  }
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .frame-info {
  width: 30%;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .frame-info img {
  width: 100%;
  display: block;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .frame-info span {
  position: absolute;
  top: 0.375em;
  right: 0.375em;
  font-weight: 500;
  background: var(--color-martini-900);
  color: var(--color-martini-200);
  border-radius: 100px;
  padding: 0.375em;
  font-size: 0.7em;
  line-height: 1;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .name {
  font-weight: 500;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .time {
  font-size: 0.9em;
  color: #555;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .description {
  font-size: 0.9em;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .description .mention {
  color: var(--color-martini-accent);
}
#ffs-comments .comments .comment-wrapper .comment .comment-content .avatar {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-martini-700);
  color: var(--color-martini-200);
  border-radius: 100px;
  aspect-ratio: 1;
  width: 30px;
  left: -15px;
  top: 0;
  font-size: 0.6em;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content button {
  transition: all 0.2s ease;
  font-size: 0.9em;
  padding: 0px;
  background: none;
  color: var(--color-martini-600);
  border: none;
  outline: none;
  font-weight: normal;
  gap: 0.375em !important;
}
#ffs-comments .comments .comment-wrapper .comment .comment-content button i {
  color: var(--color-martini-600);
}
#ffs-comments .comments .comment-wrapper .comment .comment-content button:hover {
  color: var(--color-martini-500);
}
#ffs-comments .comments .comment-wrapper .comment .comment-content button:hover i {
  color: var(--color-martini-500);
}

#ffs-files .file-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(auto, 120px);
  gap: 1rem;
  align-items: start;
}
#ffs-files .file-list.list-view {
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: minmax(auto, 150px);
}
#ffs-files .file-list.list-view .file {
  flex-flow: row;
}
#ffs-files .file {
  display: flex;
  width: 100%;
  border: 1px solid var(--color-martini-700);
  border-radius: 12px;
  padding: 0.375em;
  flex-flow: column;
  gap: 0.375em;
  max-height: 100%;
  position: relative;
}
#ffs-files .file:hover {
  border-color: var(--color-martini-600);
}
#ffs-files .file:hover .action-btns {
  display: flex;
}
#ffs-files .file.uploading {
  pointer-events: none;
}
#ffs-files .file.uploading .thumb img {
  opacity: 0.5;
}
#ffs-files .file.uploading .thumb .progress-bar {
  display: flex;
}
#ffs-files .file.failed {
  background: rgba(255, 0, 65, 0.1);
  border-color: rgba(255, 0, 65, 0.2);
  color: #df0d40;
  pointer-events: none;
}
#ffs-files .file .action-btns {
  display: none;
  flex-flow: row;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  gap: 0.375em;
  padding: 0.375em;
}
#ffs-files .file .action-btns .action-btn {
  aspect-ratio: 1;
  font-size: 0.9em;
  border: 1px solid var(--color-martini-600);
  color: var(--color-martini-500);
  background: var(--color-martini-900);
  padding: 0.375em;
  line-height: 0;
  border-radius: 6px;
  transition: all 0.2s ease;
}
[data-theme=dark] #ffs-files .file .action-btns .action-btn, #ffs-files .file .action-btns .action-btn[data-theme=dark] {
  color: var(--color-martini-300);
}
#ffs-files .file .action-btns .action-btn:hover {
  border-color: var(--color-martini-accent);
  color: white;
  background: var(--color-martini-accent);
  cursor: pointer;
}
#ffs-files .file span, #ffs-files .file input {
  font-size: 0.9em;
  white-space: break-word;
  word-break: break-word;
}
#ffs-files .file input {
  padding: 0.375em;
  border-radius: 3px;
  background: var(--color-martini-800);
  color: var(--color-martini-100);
  border: none;
  outline: none;
}
[data-theme=dark] #ffs-files .file input, #ffs-files .file input[data-theme=dark] {
  background: var(--color-martini-700);
}
#ffs-files .file .thumb {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--color-martini-800);
  background: var(--color-martini-800);
  position: relative;
}
#ffs-files .file .thumb .progress-bar {
  width: 100%;
  height: 6px;
  background: var(--color-martini-800);
  position: absolute;
  bottom: 0;
  display: none;
}
#ffs-files .file .thumb .progress-bar .fill {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-martini-accent);
}
#ffs-files .file .thumb img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  align-self: center;
}

/* ------------------------------------- */
/*           EDITABLE CONTENT            */
/* ------------------------------------- */
.content-editable {
  border-radius: 6px;
  padding: 0.1875em;
  line-height: 1em;
}
.content-editable:hover {
  cursor: text !important;
  background: var(--color-martini-800);
}
.content-editable[contenteditable=true] {
  outline: 2px solid var(--color-martini-accent) !important;
  box-shadow: 0px 0px 5px var(--color-martini-accent);
  border: none;
  background: var(--color-martini-800) !important;
}

[contenteditable=true] {
  position: relative;
}
[contenteditable=true]:hover {
  cursor: text;
}
[contenteditable=true]:focus:before {
  opacity: 0;
}
[contenteditable=true]:empty:before {
  content: attr(data-placeholder);
  color: var(--color-martini-600);
  position: absolute;
  top: 0;
  left: 0;
}
[contenteditable=true]::after {
  content: "" !important;
}

/* ------------------------------------- */
/*           TRIBUTE / MENTION           */
/* ------------------------------------- */
.tribute-container {
  position: absolute;
  top: 0;
  left: 0;
  height: auto;
  overflow: auto;
  display: block;
  z-index: 999999;
  padding: 0.375em;
}
.tribute-container ul {
  margin: 0;
  margin-top: 2px;
  padding: 0;
  list-style: none;
  background: var(--color-martini-200);
  color: var(--color-martini-900);
  overflow: auto;
  border-radius: 6px;
}
.tribute-container ul li {
  padding: 5px 5px;
  cursor: pointer;
  font-size: 0.9em;
  padding: 0.75em;
}
.tribute-container ul li.highlight {
  background: var(--color-martini-300);
}
.tribute-container ul li.no-match {
  cursor: default;
}
.tribute-container ul li span {
  font-weight: bold;
}
.tribute-container .menu-highlighted {
  font-weight: bold;
}

.mention {
  color: var(--color-martini-accent);
}

/* ------------------------------------- */
/*                 LOADING		         */
/* ------------------------------------- */
#loading {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.8);
}
#loading.hide {
  display: none;
}
#loading .box {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-flow: column;
  gap: 20px;
  background: var(--color-martini-white);
  border-radius: 20px;
  padding: 20px;
  color: var(--color-martini-black);
}
#loading .loader {
  width: 48px;
  height: 48px;
  border: 5px solid var(--color-martini-black);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ------------------------------------- */
/*                VERIFY		         */
/* ------------------------------------- */
#verify {
  width: 100vw;
  height: 100vh;
  padding: 1.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 4em;
  padding-bottom: 4em;
}
#verify .verify {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
  align-items: center;
  width: 100%;
}
#verify .card {
  padding: 1.5625em;
  width: 500px;
  max-width: 100%;
}

/* ------------------------------------- */
/*                SIGN UP		         */
/* ------------------------------------- */
#signup {
  width: 100vw;
  height: 100vh;
  padding: 1.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 4em;
  padding-bottom: 4em;
}
#signup .signup-form, #signup .signup-success {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
  align-items: center;
  width: 100%;
}
#signup .card {
  padding: 1.5625em;
  width: 500px;
  max-width: 100%;
}

/* ------------------------------------- */
/*                SIGN IN		         */
/* ------------------------------------- */
#signin, #forgot {
  width: 100vw;
  height: 100vh;
  padding: 1.25em;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  padding-top: 4em;
  padding-bottom: 4em;
}
#signin .signin-form, #forgot .signin-form {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
  align-items: center;
  width: 100%;
}
#signin .card, #forgot .card {
  padding: 1.5625em;
  width: 500px;
  max-width: 100%;
}

/* ------------------------------------- */
/*            	   CROP 		         */
/* ------------------------------------- */
.crop-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.9);
  /* Draggable image, positioned relative to the crop box center.	transform-origin is set to center so that scaling happens about its center. */
  /* The crop box, centered with a dotted border.Its dimensions are set via JavaScript. */
  /* Overlays covering areas outside the crop box */
  /* Controls container for the scale slider and edge info */
}
.crop-modal .crop-modal-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.crop-modal .frame {
  position: relative;
  overflow: hidden;
}
.crop-modal .crop-controls {
  margin-top: 1em;
  display: flex;
  justify-content: center;
  gap: 1.5625em;
  flex-flow: column;
}
.crop-modal .crop-controls .btns {
  justify-content: center;
}
.crop-modal #crop-image {
  display: block;
  position: absolute;
  cursor: grab;
  user-select: none;
  transform-origin: center center;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crop-modal #crop-square {
  position: absolute;
  border: 1px solid rgb(109, 109, 109);
  background: transparent;
  z-index: 10;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.crop-modal .overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.8);
  z-index: 5;
  pointer-events: none;
  width: 100%;
  height: 100%;
}
.crop-modal .controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 20;
  background: rgba(0, 0, 0, 0.05);
  padding: 10px;
  border-radius: 4px;
}
.crop-modal #scale-slider {
  width: 300px;
  margin-top: 10px;
}
.crop-modal #info-box {
  margin-top: 10px;
  padding: 10px;
  background: #333;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  white-space: pre-wrap;
}

/* ------------------------------------- */
/*            	   DIALOG 		         */
/* ------------------------------------- */
.dialog {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-flow: row;
  gap: 5px;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 500;
  background: rgba(var(--color-martini-50-rgb), 0.5);
  overflow-x: auto;
  opacity: 0;
  animation: modal-background 0.3s ease both;
  z-index: 999;
}
[data-theme=dark] .dialog, .dialog[data-theme=dark] {
  background: rgba(var(--color-martini-950-rgb), 0.9);
}
.dialog .dialog-container {
  height: 90%;
  position: relative;
  width: 90%;
  max-width: 800px;
  display: flex;
  align-items: center;
}
.dialog .dialog-container .dialog-card {
  max-height: 100%;
  overflow-x: auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 100%;
  background: var(--color-martini-900);
  border-radius: 18px;
  box-shadow: 0px 11px 40px rgba(var(--color-martini-shadow-rgb), 0.1), 0px 6px 15px rgba(var(--color-martini-shadow-rgb), 0.2);
  animation: modal-box 0.5s cubic-bezier(0, 0.17, 0, 1) both;
  box-shadow: 0px 6px 40px rgba(var(--color-martini-50-rgb), 0.2), 0px 2px 8px rgba(var(--color-martini-50-rgb), 0.4);
  overflow: hidden;
}
[data-theme=dark] .dialog .dialog-container .dialog-card, .dialog .dialog-container .dialog-card[data-theme=dark] {
  background: var(--color-martini-850);
  box-shadow: 0px 10px 40px rgba(var(--color-martini-950-rgb), 0.5);
}
.dialog .dialog-container .dialog-card:has(.dialog-nav) {
  grid-template-columns: minmax(100px, 200px) 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: "nav content";
}
.dialog .dialog-container .dialog-card:has(.dialog-header) {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "header" "content";
}
.dialog .dialog-container .dialog-card:has(.dialog-footer) {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  grid-template-areas: "content" "footer";
}
.dialog .dialog-container .dialog-card:has(.dialog-header):has(.dialog-footer) {
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header" "content" "footer";
}
.dialog .dialog-container .dialog-card:has(.dialog-header):has(.dialog-nav) {
  grid-template-columns: minmax(100px, 200px) 1fr;
  grid-template-areas: "nav header" "nav content";
}
.dialog .dialog-container .dialog-card:has(.dialog-footer):has(.dialog-nav) {
  grid-template-columns: minmax(100px, 200px) 1fr;
  grid-template-areas: "nav content" "nav footer";
}
.dialog .dialog-container .dialog-card:has(.dialog-header):has(.dialog-footer):has(.dialog-nav) {
  grid-template-columns: minmax(100px, 200px) 1fr;
  grid-template-areas: "nav header" "nav content" "nav footer";
}
.dialog .dialog-container .dialog-card .dialog-header {
  grid-area: header;
  padding: 1.25em;
  font-size: 1.2em;
  color: var(--color-martini-200);
  border-bottom: 1px solid var(--color-martini-800);
}
.dialog .dialog-container .dialog-card .dialog-footer {
  grid-area: footer;
  padding: 1.25em;
  border-top: 1px solid var(--color-martini-800);
}
.dialog .dialog-container .dialog-card .dialog-nav {
  grid-area: nav;
  padding: 1.25em 1em;
  background: var(--color-martini-800);
  height: 100%;
  overflow-x: auto;
}
.dialog .dialog-container .dialog-card .dialog-nav ul {
  display: flex;
  flex-flow: column;
  gap: 0.1875em;
}
.dialog .dialog-container .dialog-card .dialog-nav ul li.nav-title {
  text-transform: uppercase;
  color: var(--color-martini-600);
  font-size: 0.8em;
  padding-left: 0.375em;
  padding-bottom: 0.375em;
}
.dialog .dialog-container .dialog-card .dialog-nav ul li.nav-title:not(:first-of-type) {
  padding-top: 1.25em;
}
.dialog .dialog-container .dialog-card .dialog-nav ul li.nav-item {
  padding: 0.375em;
  display: flex;
  gap: 0.75em;
  align-items: center;
  color: var(--color-martini-400);
  border-radius: 6px;
}
.dialog .dialog-container .dialog-card .dialog-nav ul li.nav-item i {
  color: var(--color-martini-600);
  font-size: 0.9em;
}
.dialog .dialog-container .dialog-card .dialog-nav ul li.nav-item.selected {
  color: var(--color-martini-300);
  background: rgba(var(--color-martini-700-rgb), 0.5);
}
.dialog .dialog-container .dialog-card .dialog-nav ul li.nav-item.selected i {
  color: var(--color-martini-300);
}
.dialog .dialog-container .dialog-card .dialog-nav ul li.nav-item:hover {
  cursor: pointer;
  background: rgba(var(--color-martini-700-rgb), 0.5);
}
.dialog .dialog-container .dialog-card .dialog-content {
  grid-area: content;
  padding: 1.25em;
  display: flex;
  flex-flow: column;
  gap: 1.5625em;
  height: 100%;
  overflow-x: auto;
}
.dialog .dialog-container .dialog-card .dialog-content > div {
  display: flex;
  flex-flow: column;
  justify-content: center;
  position: relative;
}
.dialog .dialog-container .dialog-card .dialog-content > div span {
  font-weight: 400;
  margin-bottom: 0.75em;
  display: block;
  color: var(--color-martini-300);
}
.dialog .dialog-container .dialog-card .dialog-content > div label {
  color: var(--color-martini-500);
  font-size: 0.8em;
  display: block;
}
.dialog .dialog-container .dialog-card .dialog-content > div i {
  color: var(--color-martini-500);
  font-size: 0.9em;
  display: block;
  font-style: normal;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-title {
  margin-top: 1.25em;
  margin-bottom: 0.75em;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-image span {
  order: 1;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-image label {
  order: 3;
  margin-top: 0.375em;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-image button {
  position: absolute;
  right: 0;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-image .image {
  border: 1px solid var(--color-martini-700);
  border-radius: 12px;
  order: 2;
  padding: 0.375em;
  max-width: 200px;
  max-height: 200px;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-image .image img {
  width: 100%;
  display: block;
  border-radius: 6px;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-input label {
  margin-top: 0.375em;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-input input {
  width: 100%;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-checkbox span, .dialog .dialog-container .dialog-card .dialog-content > div.dialog-checkbox label, .dialog .dialog-container .dialog-card .dialog-content > div.dialog-checkbox i {
  width: 80%;
}
.dialog .dialog-container .dialog-card .dialog-content > div.dialog-checkbox input, .dialog .dialog-container .dialog-card .dialog-content > div.dialog-checkbox .checkbox {
  position: absolute;
  right: 0px;
}

/* ------------------------------------- */
/*            	   HOME 		         */
/* ------------------------------------- */
#home {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 1.25em;
}
#home .content {
  width: 700px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 20px;
  text-align: center;
}
#home .content .btns {
  margin-top: 30px;
  display: flex;
  gap: 20px;
}
#home .content svg {
  fill: var(--color-martini-white);
  width: 400px;
  max-width: 80%;
  margin-bottom: 30px;
}

/* ------------------------------------- */
/*                 SHARE 	             */
/* ------------------------------------- */
#share {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
}
#share .share-codes {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
}
#share .share-codes .share-code {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.953125em;
}
#share .share-codes .share-code .codes {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
  flex-grow: 1;
  max-width: 500px;
}
#share .share-codes .share-code .codes .code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75em;
}
#share .share-codes .share-code .codes .code h1 {
  font-size: 3em;
  text-transform: uppercase;
}
#share .share-codes .share-code .codes .code h6 {
  width: 100%;
  color: var(--color-martini-100);
}
#share .share-codes .share-code .codes .code input {
  flex-grow: 1;
  font-size: 0.9em;
  color: var(--color-martini-100);
}
#share .share-codes .share-code .actions {
  display: flex;
  align-items: center;
  gap: 1.25em;
}

/* ------------------------------------- */
/*                FILE MODAL             */
/* ------------------------------------- */
#file-preview-modal {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 999;
  width: 100%;
  height: 100vh;
}
#file-preview-modal .file-preview-dialog {
  display: grid;
  grid-template-rows: 100px calc(100vh - 101px);
}
#file-preview-modal .file-preview-dialog .file-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  background: var(--color-martini-900);
  border-bottom: 1px solid var(--color-martini-700);
  box-shadow: 0px 5px 10px rgba(var(--color-martini-500-rgb), 0.15);
}
#file-preview-modal .file-preview-dialog .file-preview-header svg {
  width: 140px;
  fill: var(--color-martini-200);
}
@media (max-width: 48rem) {
  #file-preview-modal .file-preview-dialog .file-preview-header .file-preview-title {
    display: none;
  }
}
#file-preview-modal .file-preview-dialog .file-preview-body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-martini-800);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#file-preview-modal .file-preview-dialog .file-preview-body .file-preview-loader {
  font-size: 2em;
}
#file-preview-modal .file-preview-dialog .file-preview-body img,
#file-preview-modal .file-preview-dialog .file-preview-body video,
#file-preview-modal .file-preview-dialog .file-preview-body iframe {
  width: 100%;
  height: 100%;
  background: var(--color-martini-700);
  object-fit: contain;
}

/* ------------------------------------- */
/*                  FILES 	             */
/* ------------------------------------- */
.files-page {
  display: flex;
  flex-flow: column;
  gap: 1.5625em;
}
.files-page .files-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 1rem;
  min-width: 100%;
  min-height: 100%;
  position: relative;
  align-items: start;
}
.files-page .files-list .empty-state {
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 1.2em;
  color: var(--color-martini-600);
}
.files-page .files-list .file-card {
  background: none;
  border-radius: 12px;
  position: relative;
}
.files-page .files-list .file-card:hover .action-btns {
  opacity: 1;
}
.files-page .files-list .file-card .file-icon {
  aspect-ratio: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
  color: var(--color-martini-600);
}
.files-page .files-list .file-card .file-icon img {
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
  min-width: 100%;
  min-height: 100%;
}
.files-page .files-list .file-card .file-info {
  display: flex;
  flex-flow: column;
  gap: 0.375em;
}
.files-page .files-list .file-card .file-info h3 {
  font-size: 1em;
  word-break: break-all;
}
.files-page .files-list .file-card .file-info p {
  font-size: 0.7em;
  color: var(--color-martini-600);
}
.files-page .files-list .file-card .file-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8em;
  font-weight: 500;
  color: var(--color-martini-500);
  margin-top: 0.75em;
}
.files-page .files-list .file-card .file-toggle .checkbox {
  order: 1;
}
.files-page .files-list .file-card .file-toggle .checkbox:hover {
  cursor: pointer;
}
.files-page .files-list .file-card .action-btns {
  position: absolute;
  top: 0.375em;
  right: 0.375em;
  padding: 0.1875em;
  font-size: 1.2em;
  border-radius: 100px;
  border: 0;
  opacity: 0;
}
.files-page .files-list .file-card .action-btns:hover {
  background: var(--color-martini-800);
}
.files-page .files-list .file-card .action-btns .drop-down {
  font-size: 0.7em;
}
.files-page .files-list .file-card .action-btns .drop-down ul {
  width: 120px;
}

/* ------------------------------------- */
/*                  TEAM 	             */
/* ------------------------------------- */
#team {
  display: flex;
  flex-flow: column;
  gap: 1.25em;
}
#team .members .member .about {
  display: flex;
  flex-flow: row;
  justify-content: start;
  align-items: center;
  gap: 0.75em;
}
#team .members .member .about .pfp {
  display: flex;
  background: var(--color-martini-100);
  border-radius: 100px;
  color: white;
  aspect-ratio: 1;
  height: 40px;
  justify-content: center;
  align-items: center;
}
#team .members .member .about .profile {
  display: flex;
  flex-flow: column;
}
#team .members .member .about .name {
  color: var(--color-martini-100);
  font-size: 0.9em;
}
#team .members .member .action {
  text-align: right;
}

/* ------------------------------------- */
/*         	   PROJECT SETTINGS          */
/* ------------------------------------- */
#account-settings {
  display: flex;
  flex-flow: column;
  gap: 1.5625em;
}
/* ------------------------------------- */
/*             CREATIVE TITLE            */
/* ------------------------------------- */
.creative-title,
.project-title,
.schedule-title {
  display: flex;
  align-items: center;
  gap: 1em;
}
.creative-title input,
.project-title input,
.schedule-title input {
  min-width: 50%;
  max-width: 100%;
  font-size: 1.7em !important;
  padding: 0.375em !important;
  font-family: "Manrope", "Helvetica", "Arial", sans-serif;
  line-height: 1em;
  border: none !important;
  outline: none !important;
  background: var(--color-martini-800) !important;
  color: var(--color-martini-100) !important;
}
.creative-title h1,
.project-title h1,
.schedule-title h1 {
  display: flex;
  align-items: center;
  gap: 0.375em;
  padding: 5px;
  line-height: 1em;
  border-radius: 6px;
}
.creative-title h1:hover,
.project-title h1:hover,
.schedule-title h1:hover {
  background: var(--color-martini-800);
}
.creative-title h1[contenteditable=true],
.project-title h1[contenteditable=true],
.schedule-title h1[contenteditable=true] {
  outline: 2px solid var(--color-martini-accent);
  box-shadow: 0px 0px 5px var(--color-martini-accent);
}
.creative-title h1:has(input)::after,
.project-title h1:has(input)::after,
.schedule-title h1:has(input)::after {
  content: "" !important;
}

/* ------------------------------------- */
/*              MODIFY TAGS              */
/* ------------------------------------- */
.modify-tags {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  margin-top: 1em;
}
.modify-tags .modify-tag {
  display: flex;
  align-items: center;
  gap: 0.75em;
  width: 100%;
}
.modify-tags .modify-tag input {
  width: 100%;
}

/* ------------------------------------- */
/*                FILTERS	             */
/* ------------------------------------- */
#filters {
  display: flex;
  gap: 0.75em;
  margin-top: 1em;
  margin-bottom: 1em;
}
#filters .tag-filter {
  padding: 0.75em 1em;
  border-radius: 100px;
  border: 1px solid var(--color-martini-800);
  display: flex;
  align-items: center;
  gap: 0.375em;
  line-height: 1em;
  font-size: 0.9em;
  transition: all 0.2s ease;
}
#filters .tag-filter span {
  margin-left: 0.1875em;
  color: var(--color-martini-300);
  transition: all 0.2s ease;
}
#filters .tag-filter span:hover {
  cursor: pointer;
  color: white;
}
#filters .tag-filter b {
  color: var(--color-martini-300);
}
#filters .tag-filter:hover {
  cursor: pointer;
  border-color: var(--color-martini-700);
}

/* ------------------------------------- */
/*              FRAMES TABLE             */
/* ------------------------------------- */
.frames-wrapper[view=table] {
  width: 100%;
  height: 80%;
  overflow: auto;
  display: block;
  border: 1px solid var(--color-martini-800);
}
.frames-wrapper[view=table].no-frames {
  border: none;
}
.frames-wrapper[view=table] .shotlist-table {
  border: none;
}

.sortable-fallback {
  opacity: 0.8;
  position: absolute !important;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
}
.sortable-fallback .dragging {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.shotlist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
}
.shotlist-grid .frame-group {
  display: contents;
}
.shotlist-grid .frame {
  width: calc(16.66% - 10px);
}
.shotlist-grid .frame[aspect-ratio="1"] .frame-image {
  aspect-ratio: 1 !important;
}
.shotlist-grid .frame[aspect-ratio="9 / 16"] {
  width: calc(8.33% - 11px);
}
@media (max-width: 96rem) {
  .shotlist-grid .frame[aspect-ratio="9 / 16"] {
    width: calc(8.33% - 11px);
  }
}
@media (max-width: 80rem) {
  .shotlist-grid .frame[aspect-ratio="9 / 16"] {
    width: calc(10% - 11px);
  }
}
@media (max-width: 64rem) {
  .shotlist-grid .frame[aspect-ratio="9 / 16"] {
    width: calc(12.5% - 11px);
  }
}
@media (max-width: 48rem) {
  .shotlist-grid .frame[aspect-ratio="9 / 16"] {
    width: calc(16.66% - 10px);
  }
}
@media (max-width: 40rem) {
  .shotlist-grid .frame[aspect-ratio="9 / 16"] {
    width: calc(16.66% - 10px);
  }
}
.shotlist-grid .frame[aspect-ratio="9 / 16"] .frame-image {
  aspect-ratio: 9/16 !important;
}
@media (max-width: 96rem) {
  .shotlist-grid .frame {
    width: calc(16.66% - 10px);
  }
}
@media (max-width: 80rem) {
  .shotlist-grid .frame {
    width: calc(20% - 10px);
  }
}
@media (max-width: 64rem) {
  .shotlist-grid .frame {
    width: calc(25% - 10px);
  }
}
@media (max-width: 48rem) {
  .shotlist-grid .frame {
    width: calc(33.33% - 8px);
  }
}
@media (max-width: 40rem) {
  .shotlist-grid .frame {
    width: calc(33.33% - 8px);
  }
}
.shotlist-grid .frame:hover .frame-image {
  transform: scale(1);
  cursor: move;
}
.shotlist-grid .frame .frame-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 16/9 !important;
  position: relative;
  padding: 0.75em;
  transform: scale(0.95);
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  touch-action: manipulation;
  transition: all 0.2s ease;
  border: 1px solid var(--color-martini-800);
}
.shotlist-grid .frame .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1cqw;
  font-weight: bold;
  line-height: 1.1em;
  background: rgba(var(--color-martini-700-rgb), 0.8);
  pointer-events: none;
}
.shotlist-grid .frame .caption:empty {
  display: none;
}
.shotlist-grid .frame .nr {
  position: absolute;
  top: 0.375em;
  right: 0.375em;
  z-index: 2;
  background: var(--color-martini-black);
  border-radius: 100px;
  padding: 0.375em;
  line-height: 1em;
  font-size: 0.7em;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shotlist-grid .frame .creative {
  position: absolute;
  left: 0.375em;
  bottom: 0.375em;
  z-index: 2;
  background: var(--color-martini-black);
  border-radius: 100px;
  padding: 0.375em 0.75em;
  line-height: 1em;
  font-size: 0.6em;
  overflow: hidden;
  max-width: calc(100% - 0.75em);
  text-overflow: ellipsis;
  text-wrap: nowrap;
}
.shotlist-grid .frame .frame-description {
  font-size: 0.7em;
  line-height: 1.1em;
}
.shotlist-grid .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  touch-action: none;
  pointer-events: none;
}

.shotlist-table {
  width: 100%;
  min-width: 100%;
}
.shotlist-table th,
.shotlist-table tr,
.shotlist-table td {
  white-space: normal;
  word-wrap: break-word;
}
.shotlist-table tr {
  background: var(--color-martini-950) !important;
}
.shotlist-table tr.selected {
  background: red !important;
}
.shotlist-table tr:last-of-type {
  border-bottom: none !important;
}
.shotlist-table td {
  background: var(--color-martini-950);
  vertical-align: middle;
}
.shotlist-table td:has(input:focus) {
  background: var(--color-martini-900);
}
.shotlist-table .frame-group {
  display: contents;
}
.shotlist-table .frame {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.shotlist-table .frame.dragging {
  background: var(--color-martini-950) !important;
}
.shotlist-table .frame.sorting {
  background: var(--color-martini-800) !important;
}
.shotlist-table .frame .frame-order {
  vertical-align: top;
  font-size: 0.9em;
  font-weight: bold;
}
.shotlist-table .frame .frame-tags {
  vertical-align: top;
  position: relative;
  overflow: show;
}
.shotlist-table .frame .frame-tags .tags {
  display: flex;
}
.shotlist-table .frame .frame-tags .tag:hover {
  cursor: pointer;
}
.shotlist-table .frame .frame-tags .tag span:hover {
  cursor: pointer;
  background: var(--color-martini-600);
  color: var(--color-martini-white);
}
.shotlist-table .frame .frame-tags input {
  font-size: 0.9em;
  border: none;
  border-radius: 3px;
  margin-top: 0.75em;
}
[data-theme=dark] .shotlist-table .frame .frame-tags input, .shotlist-table .frame .frame-tags input[data-theme=dark] {
  color: var(--color-martini-white);
}
[data-theme=dark] .shotlist-table .frame .frame-tags input:focus::placeholder, .shotlist-table .frame .frame-tags input[data-theme=dark]:focus::placeholder {
  color: var(--color-martini-700);
}
.shotlist-table .frame .frame-tags input::placeholder {
  color: var(--color-martini-700);
}
.shotlist-table .frame .frame-tags input:focus {
  background: transparent;
}
.shotlist-table .frame .frame-tags input:hover {
  cursor: text;
}
.shotlist-table .frame .frame-tags .autocomplete-dropdown {
  font-size: 0.9em;
  background: var(--color-martini-black);
  border-radius: 6px;
  position: absolute;
  width: 100%;
  z-index: 1;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  gap: 0;
  padding: 0;
  overflow: hidden;
}
.shotlist-table .frame .frame-tags .autocomplete-dropdown .autocomplete-item {
  padding: 0.375em 0.75em;
  border-bottom: 1px solid var(--color-martini-800);
}
.shotlist-table .frame .frame-tags .autocomplete-dropdown .autocomplete-item:last-of-type {
  border-bottom: none;
}
.shotlist-table .frame .frame-tags .autocomplete-dropdown .autocomplete-item.selected, .shotlist-table .frame .frame-tags .autocomplete-dropdown .autocomplete-item:hover {
  background: var(--color-martini-800);
  color: var(--color-martini-white);
  cursor: pointer;
}
.shotlist-table .frame .frame-order {
  vertical-align: middle;
  text-align: center;
  width: 50px;
}
.shotlist-table .frame .frame-order:hover {
  cursor: grab;
}
.shotlist-table .frame .frame-order:active {
  cursor: grabbing;
}
.shotlist-table .frame .frame-description {
  vertical-align: top;
  max-width: 300px;
  min-width: 200px;
}
.shotlist-table .frame .frame-description .description-content {
  font-size: 0.7em;
  line-height: 1.2em;
}
.shotlist-table .frame .frame-image {
  min-width: 145px;
  position: sticky;
  touch-action: none;
  will-change: transform;
  vertical-align: top;
}
.shotlist-table .frame .frame-image[aspect-ratio="9 / 16"] {
  max-width: 200px;
  min-width: 100px;
}
.shotlist-table .frame .frame-image[aspect-ratio="9 / 16"] .image {
  aspect-ratio: 9/16 !important;
  width: 50% !important;
}
.shotlist-table .frame .frame-image[aspect-ratio="1"] .image {
  aspect-ratio: 1 !important;
}
.shotlist-table .frame .frame-image .image {
  justify-self: start;
  max-width: 200px;
  pointer-events: none;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16/9;
  position: relative;
  border-radius: 6px;
  background: var(--color-martini-700);
  container-type: inline-size;
}
.shotlist-table .frame .frame-image .image:hover {
  cursor: grab;
}
.shotlist-table .frame .frame-image .image:active {
  cursor: grabbing;
}
.shotlist-table .frame .frame-image .image .creative-title {
  display: block;
  position: absolute;
  bottom: 0.375em;
  left: 0.375em;
  font-size: clamp(0.5em, 6cqw, 0.7em);
  max-width: calc(100% - 0.75em);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shotlist-table .frame .frame-image .image .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 6cqw;
  font-weight: bold;
  line-height: 1.1em;
  background: rgba(var(--color-martini-700-rgb), 0.8);
  pointer-events: none;
}
.shotlist-table .frame .frame-image .image .caption:empty {
  display: none;
}
.shotlist-table .frame .frame-image .image .nr {
  position: absolute;
  top: 0.375em;
  right: 0.375em;
  z-index: 2;
  background: var(--color-martini-black);
  border-radius: 100px;
  line-height: 1em;
  font-size: clamp(0.5em, 6cqw, 0.7em);
  font-weight: bold;
  padding: 0.375em 0.75em;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.shotlist-table .frame .frame-image .image img, .shotlist-table .frame .frame-image .image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
}

/* ------------------------------------- */
/*                 HELP 	             */
/* ------------------------------------- */
.help {
  display: flex;
  border: 1px solid var(--color-martini-800);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
  background: var(--color-martini-950);
}
.help:hover {
  border-color: var(--color-martini-700);
  background: var(--color-martini-900);
  cursor: pointer;
}
.help:hover .asset {
  border-color: var(--color-martini-700);
}
.help:hover .asset span {
  opacity: 1;
}
.help:hover .asset span i {
  transform: scale(1);
}
.help .asset {
  width: 200px;
  border-right: 1px solid var(--color-martini-800);
  position: relative;
  transition: all 0.2s ease;
}
.help .asset span {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(var(--color-martini-950), 0.7);
  font-size: 2em;
  color: var(--color-martini-white);
  opacity: 0;
}
.help .asset span i {
  transition: all 0.2s ease;
  transform: scale(0);
}
.help .asset img, .help .asset video {
  width: 100%;
  display: block;
  object-fit: cover;
  min-height: 100%;
  min-width: 100%;
}
.help .info {
  padding: 0.75em;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: start;
}
.help .info h6 {
  color: var(--color-martini-300);
}

/* ------------------------------------- */
/*                SCHEDULE	             */
/* ------------------------------------- */
#schedule .color-select:hover button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-color: var(--color-martini-700) !important;
  border-left-color: var(--color-martini-900) !important;
  z-index: 6;
  background: var(--color-martini-900) !important;
}
#schedule .color-select .dropdown {
  grid-template-columns: repeat(6, 1fr);
  border-radius: 6px;
  width: 120px;
  top: -50%;
  right: calc(100% - 1px);
}

/* ------------------------------------- */
/*                FRAMES	             */
/* ------------------------------------- */
.shoot-order-alert {
  display: none;
  text-align: center;
  font-size: 0.9em;
  padding: 0.75em;
  border-radius: 12px;
  margin-bottom: 1em;
  border-width: 1px;
  border-style: solid;
  background: rgba(255, 0, 65, 0.1);
  border-color: rgba(255, 0, 65, 0.2);
  color: #df0d40;
}
.shoot-order-alert span {
  color: #df0d40;
}
.shoot-order-alert .close {
  color: #df0d40;
  opacity: 0.5;
}
.shoot-order-alert a {
  color: rgb(199, 34, 34);
}
.shoot-order-alert a:hover {
  color: red;
  cursor: pointer;
}
.shoot-order-alert.active {
  display: block;
}

.frames-grid {
  display: grid;
  column-gap: 0.75em;
  row-gap: 1em;
  width: 100%;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: auto;
  align-content: start;
  transition: all 0.2s ease;
}
@media (max-width: 40rem) {
  .frames-grid[size=xs] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  }
  .frames-grid[size=s] {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  }
  .frames-grid[size=l] {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)) !important;
  }
  .frames-grid[size=xl] {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)) !important;
  }
}
.frames-grid[size=xs] {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.frames-grid[size=s] {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.frames-grid[size=l] {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}
.frames-grid[size=xl] {
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
}
.frames-grid[aspect-ratio="1"] .image, .frames-grid[aspect-ratio="1"] .board, .frames-grid[aspect-ratio="1"] .photoboard {
  aspect-ratio: 1 !important;
}
.frames-grid[aspect-ratio="16 / 9"] .image, .frames-grid[aspect-ratio="16 / 9"] .board, .frames-grid[aspect-ratio="16 / 9"] .photoboard {
  aspect-ratio: 16/9 !important;
}
.frames-grid[aspect-ratio="9 / 16"] .image, .frames-grid[aspect-ratio="9 / 16"] .board, .frames-grid[aspect-ratio="9 / 16"] .photoboard {
  aspect-ratio: 9/16 !important;
}
.frames-grid[order=shoot] .order {
  pointer-events: none !important;
}
.frames-grid[order=shoot] .group {
  display: none !important;
}
.frames-grid[order=shoot] .nr {
  display: flex !important;
}
.frames-grid[order=shoot] .re-order {
  display: none !important;
}
.frames-grid[view=both] .photoboard, .frames-grid[view=both] .board {
  position: inherit !important;
  display: flex !important;
  width: 50% !important;
  height: auto !important;
  order: 1;
}
.frames-grid[view=both] .photoboard {
  order: 2;
}
.frames-grid[view=both] .board-type-tabs {
  display: none !important;
}
.frames-grid .inline-drop {
  transition: all 0.2s ease;
  border: 1px solid var(--color-martini-50);
  background: var(--color-martini-900);
  border-radius: 15px;
  opacity: 0;
  width: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-martini-400);
  overflow: hidden;
}
.frames-grid .inline-drop:hover, .frames-grid .inline-drop .active {
  opacity: 1;
  width: 50px;
}
.frames-grid .frame-group {
  display: contents;
}
.frames-grid .frame {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  align-content: start;
  justify-content: center;
  gap: 0.75em;
  padding: 0.75em;
  border: 1px solid transparent;
  position: relative;
}
.frames-grid .frame.frame-loading {
  background: linear-gradient(-45deg, var(--color-martini-850), var(--color-martini-700), var(--color-martini-850), var(--color-martini-700), var(--color-martini-850));
  aspect-ratio: 16/9;
  border-radius: 6px;
  width: 90%;
  margin: 1em auto 1.25em 0;
  background-size: 400% 400%;
  animation: loadingBg 1s ease infinite;
}
[data-theme=dark] .frames-grid .frame.frame-loading, .frames-grid .frame.frame-loading[data-theme=dark] {
  background: linear-gradient(-45deg, var(--color-martini-900), var(--color-martini-800), var(--color-martini-900), var(--color-martini-800), var(--color-martini-900));
}
.frames-grid .frame:hover .description:not(.editing) {
  cursor: text;
  border: 1px solid var(--color-martini-700);
}
.frames-grid .frame:hover .description:not(:has(.description-content)) .add-description {
  display: flex;
  color: var(--color-martini-600);
}
.frames-grid .frame:hover .status {
  display: none;
}
.frames-grid .frame:hover .image {
  transform: scale(1);
}
.frames-grid .frame:hover .image .order .nr {
  display: none;
}
.frames-grid .frame:hover .image .order .re-order {
  display: block;
}
.frames-grid .frame:hover .image .group {
  display: flex;
}
.frames-grid .frame:hover .image .overlay {
  display: flex;
}
.frames-grid .frame:hover .image .overlay .btn-sm {
  padding-left: 0;
  padding-right: 0;
}
.frames-grid .frame:hover .image .board-type-tabs {
  display: flex;
}
.frames-grid .frame:hover .image .button-delete-frame {
  display: flex;
}
.frames-grid .frame:hover .add-frames span {
  display: flex;
}
.frames-grid .frame.sorting {
  opacity: 0.3;
}
.frames-grid .frame.dragging {
  background: var(--color-martini-800);
}
.frames-grid .frame.dragging .add-frames {
  display: none;
}
.frames-grid .frame.dragging .image .overlay {
  display: none;
}
.frames-grid .frame:first-of-type .group {
  display: none !important;
}
.frames-grid .frame.editing-caption .group, .frames-grid .frame.editing-caption .order, .frames-grid .frame.editing-caption .overlay, .frames-grid .frame.editing-caption .board-type-tabs, .frames-grid .frame.editing-caption .add-frames, .frames-grid .frame.editing-description .group, .frames-grid .frame.editing-description .order, .frames-grid .frame.editing-description .overlay, .frames-grid .frame.editing-description .board-type-tabs, .frames-grid .frame.editing-description .add-frames {
  display: none !important;
  pointer-events: none !important;
}
.frames-grid .frame.editing-caption .caption, .frames-grid .frame.editing-description .caption {
  pointer-events: all !important;
}
.frames-grid .frame.selected .image {
  outline: 3px solid var(--color-martini-accent);
  outline-offset: 2px;
}
.frames-grid .frame[status=done] .status {
  border: 5px solid red;
}
.frames-grid .frame[status=done] .status .cross-out {
  display: block;
}
.frames-grid .frame[status=skip] .status {
  border: 5px solid red;
}
.frames-grid .frame[status=skip] .status .skip {
  display: inline-block;
}
.frames-grid .frame[status=in-progress] .status {
  border: 5px solid #00ff27;
}
.frames-grid .frame[status=in-progress] .status .here {
  display: inline-block;
}
.frames-grid .frame[status=up-next] .status {
  border: 5px solid #ffad00;
}
.frames-grid .frame[status=up-next] .status .next {
  display: inline-block;
}
.frames-grid .frame .add-frames span {
  position: absolute;
  z-index: 8;
  top: calc(50% - 18px);
  background: var(--color-martini-700);
  width: 20px;
  height: 30px;
  aspect-ratio: 1;
  display: none;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  border-radius: 4px;
  font-size: 0.75em;
  color: var(--color-martini-300);
}
.frames-grid .frame .add-frames span.add-before {
  left: -16px;
}
.frames-grid .frame .add-frames span.add-after {
  right: -16px;
}
.frames-grid .frame .add-frames span:hover {
  color: var(--color-martini-900);
  background: var(--color-martini-600);
  cursor: pointer;
}
.frames-grid .frame .image {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  z-index: 5;
  transform: scale(0.98);
  aspect-ratio: 16/9;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-martini-700);
  container-type: inline-size;
  outline: 1px solid var(--color-martini-600);
  transition: transform 0.2s ease;
}
[data-theme=dark] .frames-grid .frame .image, .frames-grid .frame .image[data-theme=dark] {
  box-shadow: 0px 8px 10px rgba(var(--color-martini-950-rgb), 0.8);
}
.frames-grid .frame .image:hover {
  cursor: pointer;
}
.frames-grid .frame .image.drop-active .group {
  display: none;
  pointer-events: none;
}
.frames-grid .frame .image.drop-active .overlay {
  display: none;
  pointer-events: none;
}
.frames-grid .frame .image.drop-active .upload {
  display: flex;
}
.frames-grid .frame .image.drop-active .board-type-tabs {
  top: 10px;
  opacity: 1;
}
.frames-grid .frame .image:not(:has(img)) .button-crop-frame {
  display: none;
}
.frames-grid .frame .image[type=board] .photoboard {
  display: none;
}
.frames-grid .frame .image[type=board] .tab-type[type=board] {
  color: var(--color-martini-black) !important;
  background: var(--color-martini-200) !important;
}
[data-theme=dark] .frames-grid .frame .image[type=board] .tab-type[type=board], .frames-grid .frame .image[type=board] .tab-type[type=board][data-theme=dark] {
  color: var(--color-martini-white);
}
.frames-grid .frame .image[type=photo] .board {
  display: none;
}
.frames-grid .frame .image[type=photo] .tab-type[type=photo] {
  color: var(--color-martini-black) !important;
  background: var(--color-martini-200) !important;
}
[data-theme=dark] .frames-grid .frame .image[type=photo] .tab-type[type=photo], .frames-grid .frame .image[type=photo] .tab-type[type=photo][data-theme=dark] {
  color: var(--color-martini-white);
}
.frames-grid .frame .image .button-delete-frame {
  display: none;
  z-index: 1;
}
.frames-grid .frame .image .cross-out {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transition: all 0.2s ease;
}
.frames-grid .frame .image .cross-out line {
  stroke: red;
  stroke-width: 0.5;
  stroke-linecap: round;
  opacity: 1;
}
.frames-grid .frame .image .upload {
  width: 100%;
  height: 100%;
  display: none;
  border: 2px solid #00fff8;
  background: rgba(0, 54, 66, 0.9);
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 9;
  border-radius: 18px;
  color: #00fff8;
  pointer-events: none;
}
.frames-grid .frame .image .uploading {
  width: 100%;
  height: 100%;
  display: flex;
  background: rgba(var(--color-martini-900-rgb), 0.8);
  justify-content: center;
  align-items: center;
  color: var(--color-martini-100);
  pointer-events: none;
  position: absolute;
  z-index: 2;
}
.frames-grid .frame .image .board-type-tabs {
  position: absolute;
  top: 10px;
  display: none;
  color: var(--color-martini-white);
  background: var(--color-martini-900);
  border-radius: 100px;
  overflow: hidden;
  height: 30px;
  justify-content: center;
  align-items: center;
  font-size: 0.7em;
  font-weight: bold;
  z-index: 10;
  box-shadow: 0px 5px 10px rgba(var(--color-martini-500-rgb), 0.2);
  opacity: 1;
  padding: 0.375em;
}
[data-theme=dark] .frames-grid .frame .image .board-type-tabs, .frames-grid .frame .image .board-type-tabs[data-theme=dark] {
  box-shadow: 0px 5px 10px rgba(var(--color-martini-950-rgb), 0.2);
}
.frames-grid .frame .image .board-type-tabs .tab-type {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.375em;
  padding: 0px 10px;
  border-radius: 100px;
  color: var(--color-martini-600);
  transition: all 0.2s ease;
}
[data-theme=dark] .frames-grid .frame .image .board-type-tabs .tab-type, .frames-grid .frame .image .board-type-tabs .tab-type[data-theme=dark] {
  color: var(--color-martini-500);
}
.frames-grid .frame .image .board-type-tabs .tab-type span, .frames-grid .frame .image .board-type-tabs .tab-type i {
  pointer-events: none;
}
.frames-grid .frame .image .board-type-tabs .tab-type:hover {
  cursor: pointer;
}
.frames-grid .frame .image .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  padding: 1em;
  align-items: center;
  color: var(--color-martini-200);
  font-weight: bold;
  font-size: 7cqw;
  line-height: 1.1em;
  background: rgba(var(--color-martini-700-rgb), 0.8);
  pointer-events: none;
  flex-flow: column;
}
.frames-grid .frame .image .caption:focus {
  outline: none;
  border: 1px solid var(--color-martini-200);
  background: rgba(var(--color-martini-200-rgb), 0.8);
  color: white;
  display: flex !important;
}
.frames-grid .frame .image .caption:empty {
  display: none;
}
.frames-grid .frame .image .board {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: var(--color-martini-500);
}
.frames-grid .frame .image .photoboard {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-martini-500);
}
.frames-grid .frame .image .more {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.frames-grid .frame .image .order,
.frames-grid .frame .image .group {
  background: var(--color-martini-900);
  color: var(--color-martini-white);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  min-width: 30px;
  padding: 4px;
  z-index: 10;
  transition: all 0.2s ease;
}
.frames-grid .frame .image .order .nr, .frames-grid .frame .image .order .re-order,
.frames-grid .frame .image .group .nr,
.frames-grid .frame .image .group .re-order {
  pointer-events: none;
}
.frames-grid .frame .image .order .nr,
.frames-grid .frame .image .group .nr {
  display: block;
}
.frames-grid .frame .image .order .re-order,
.frames-grid .frame .image .group .re-order {
  display: none;
}
.frames-grid .frame .image .order:hover,
.frames-grid .frame .image .group:hover {
  cursor: grab;
  background: var(--color-martini-800);
}
.frames-grid .frame .image .group {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  top: 10px;
  left: 10px;
  right: inherit;
  display: none;
}
.frames-grid .frame .image .group:hover {
  cursor: w-resize;
}
.frames-grid .frame .image .group.ungroup:hover {
  cursor: pointer !important;
}
.frames-grid .frame .image .status {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: absolute;
  padding: 0.375em;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.frames-grid .frame .image .status span {
  padding: 0.375em 0.75em;
  line-height: 1em;
  font-size: 0.7em;
  border-radius: 100px;
  font-weight: bold;
  display: none;
}
.frames-grid .frame .image .status span.skip {
  background: red;
  color: black;
}
.frames-grid .frame .image .status span.next {
  background: #ffad00;
  color: black;
}
.frames-grid .frame .image .status span.done {
  background: red;
  color: black;
}
.frames-grid .frame .image .status span.here {
  background: #00ff27;
  color: black;
}
.frames-grid .frame .image .overlay {
  display: none;
  gap: 7px;
  position: absolute;
  opacity: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 7px;
  background: rgba(var(--color-martini-800-rgb), 1);
  z-index: 100;
  box-shadow: 0px 5px 10px rgba(var(--color-martini-500-rgb), 0.2);
}
.frames-grid .frame .image .overlay button {
  border: none;
  border-radius: 6px;
  aspect-ratio: auto;
}
.frames-grid .frame .image .overlay button i {
  color: var(--color-martini-100) !important;
}
.frames-grid .frame .image img, .frames-grid .frame .image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.frames-grid .frame .image img.processing, .frames-grid .frame .image video.processing {
  opacity: 0.5;
}
.frames-grid .frame .description {
  width: 100%;
  border: 1px solid var(--color-martini-950);
  border-radius: 6px;
  position: relative;
}
.frames-grid .frame .description .btn-edit-description {
  position: absolute;
  bottom: 0.375em;
  right: 0.375em;
  padding: 0.375em;
  border-radius: 6px;
  font-size: 0.7em;
  font-weight: bold;
  display: none;
}
.frames-grid .frame .description .description-content {
  font-size: 0.9em;
  pointer-events: none;
  line-height: 1.4em;
  padding: 0.75em;
}
.frames-grid .frame .description .description-content .ql-syntax {
  font-weight: bold;
  text-wrap: wrap;
  white-space: pre-wrap;
}
.frames-grid .frame .description:not(.editing):hover {
  cursor: text;
  border: 1px solid var(--color-martini-600);
}
.frames-grid .frame .description:not(.editing):hover .btn-edit-description {
  display: flex;
}
.frames-grid .frame .description .add-description {
  display: none;
  font-style: italic;
  color: transparent;
  justify-content: center;
  text-align: center;
  font-size: 0.8em;
  padding: 0.75em;
}
.frames-grid .frame .description:not(:has(.description-content)) .add-description {
  display: flex;
}
.frames-grid .frame .description textarea {
  pointer-events: true;
  width: 100%;
}
.frames-grid .frame .description .quill-btns {
  margin-top: 0.375em;
  display: flex;
  justify-content: space-between;
  gap: 0.75em;
}
.frames-grid .frame .description .quill-btns button {
  padding: 0.375em 0.75em;
  border-radius: 6px;
  font-size: 0.7em;
  font-weight: bold;
}
.frames-grid .frame.button-add-frame .image {
  font-size: 1.953125em;
  color: var(--color-martini-500);
  background: var(--color-martini-900);
  transform: scale(0.8);
}
.frames-grid .frame.button-add-frame .image:hover {
  cursor: pointer;
  transform: scale(0.85);
  background: var(--color-martini-800);
}
.frames-grid .frame.button-add-frame:hover {
  border: none;
}
.frames-grid .frame .ql-toolbar {
  border: 1px solid var(--color-martini-500);
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
}
.frames-grid .frame .ql-toolbar .ql-active,
.frames-grid .frame .ql-toolbar button:hover {
  color: var(--color-martini-50);
}
.frames-grid .frame .ql-toolbar .ql-active .ql-stroke:not(:has(.ql-color-toolbar)),
.frames-grid .frame .ql-toolbar button:hover .ql-stroke:not(:has(.ql-color-toolbar)) {
  stroke: var(--color-martini-50);
}
.frames-grid .frame .ql-toolbar .ql-active .ql-fill,
.frames-grid .frame .ql-toolbar button:hover .ql-fill {
  fill: var(--color-martini-50);
}
.frames-grid .frame .ql-toolbar .ql-stroke {
  stroke: var(--color-martini-400);
}
.frames-grid .frame .ql-toolbar .ql-fill {
  fill: var(--color-martini-400);
}
.frames-grid .frame .quill-editor {
  border: 1px solid var(--color-martini-500);
  border-top: none;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.frames-grid .frame .quill-editor .ql-syntax {
  border: 1px solid var(--color-martini-800);
  background: var(--color-martini-900);
  position: relative;
  text-wrap: wrap;
  font-weight: bold;
  color: var(--color-martini-white) !important;
}
.frames-grid .frame .quill-editor .ql-syntax::after {
  content: "dialog";
  position: absolute;
  top: -15px;
  right: 0px;
  color: var(--color-martini-300);
  font-size: 0.75em;
}

/* ------------------------------------- */
/*                 DISPLAY		         */
/* ------------------------------------- */
#displays {
  display: flex;
  flex-flow: column;
  gap: 1.953125em;
}
#displays select {
  text-transform: uppercase;
}
#displays .enter-code {
  display: flex;
  flex-flow: column;
  gap: 1em;
  align-items: start;
}
#displays .enter-code input {
  font-size: 1.2em;
  padding: 1em;
  width: 200px;
  text-align: center;
  letter-spacing: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 40rem) {
  #displays .enter-code input {
    width: 100%;
  }
}
#displays .enter-code input::placeholder {
  letter-spacing: 0px;
}
#displays .enter-code button {
  white-space: nowrap;
}
@media (max-width: 40rem) {
  #displays .enter-code button {
    width: 100%;
    justify-content: center;
  }
}
#displays .access-code {
  display: flex;
  flex-flow: column;
  gap: 0.1875em;
}
#displays .access-code span {
  font-size: 0.9em;
  color: var(--color-martini-500);
}
#displays .lan-displays {
  display: flex;
  flex-flow: column;
  gap: 1em;
  align-items: start;
  border-bottom: 3px solid var(--color-martini-700);
  padding-bottom: 1.5625em;
}
@media (max-width: 40rem) {
  #displays .lan-displays #scan-button {
    width: 100%;
    justify-content: center;
  }
}
#displays .lan-displays .no-displays {
  color: var(--color-martini-300);
  font-style: italic;
}
#displays .lan-displays ul {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
}
#displays .lan-displays .display {
  flex-flow: row;
  gap: 1.25em;
  max-width: 800px;
}
@media (max-width: 40rem) {
  #displays .lan-displays .display {
    flex-flow: column;
  }
}
#displays .lan-displays .display .right {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 1em;
}
#displays .lan-displays .display .right button {
  white-space: nowrap;
}
@media (max-width: 40rem) {
  #displays .lan-displays .display .right button {
    width: 100%;
    justify-content: center;
  }
}
#displays .lan-displays .display .left {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
}
#displays .lan-displays .display .display-name {
  font-size: 1.4em;
  line-height: 1.2em;
}
#displays .lan-displays .display .display-name i {
  color: var(--color-martini-100);
  margin-right: 0.1875em;
}
#displays .lan-displays .display .display-info {
  line-height: 1.2em;
  color: var(--color-martini-300);
  font-size: 0.7em;
}

/* ------------------------------------- */
/*            PROJECT SETTINGS	         */
/* ------------------------------------- */
#project-settings #logo-dropzone {
  border: 1px dashed var(--color-martini-500);
  color: var(--color-martini-500);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1em;
}
#project-settings #logos {
  padding-top: 1em;
  display: flex;
  gap: 0.75em;
  flex-wrap: wrap;
}
#project-settings #logos .logo-item {
  width: 100px;
  border: 1px solid var(--color-martini-600);
  padding: 0.75em;
  position: relative;
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-martini-700);
}
#project-settings #logos .logo-item:hover {
  cursor: move;
}
#project-settings #logos .logo-item .remove-logo-btn {
  position: absolute;
  top: -10px;
  right: -10px;
}
#project-settings #logos .logo-item .remove-logo-btn i {
  display: block;
}
#project-settings #logos .logo-item img {
  width: 100%;
}

/* ------------------------------------- */
/*                TALENT	             */
/* ------------------------------------- */
.talents {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.talents .talent {
  width: 250px;
  text-align: center;
  padding: 1em;
  border-radius: 27px;
}
.talents .talent .profile {
  aspect-ratio: 1;
  width: 100%;
  background: var(--color-martini-600);
  border-radius: 200px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
  transform: scale(0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.talents .talent .profile.empty img {
  display: none;
}
.talents .talent .profile .upload, .talents .talent .profile .delete {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-martini-accent);
  z-index: 10;
  pointer-events: none;
}
.talents .talent .profile .upload i, .talents .talent .profile .delete i {
  transition: all 0.4s ease;
  margin-bottom: -80px;
  opacity: 0;
}
.talents .talent .profile i {
  font-size: 2em;
}
.talents .talent .profile .delete {
  background: rgb(175, 54, 81);
}
.talents .talent .profile img {
  position: absolute;
  height: 100%;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
}
.talents .talent .profile:hover .delete {
  opacity: 1;
  pointer-events: all;
}
.talents .talent .profile:hover .upload {
  opacity: 0;
  pointer-events: none;
}
.talents .talent .profile:hover.empty .delete {
  opacity: 0;
  pointer-events: none;
}
.talents .talent .profile:hover.empty .upload {
  opacity: 1;
  pointer-events: all;
}
.talents .talent .profile:hover i {
  margin-bottom: 0px;
  opacity: 1;
}
.talents .talent .name h3 {
  margin-bottom: 10px;
}
.talents .talent .name span {
  color: var(--color-martini-600);
}
.talents .talent:hover {
  outline: 1px solid var(--color-martini-600);
}
.talents .talent:hover .profile {
  transform: scale(1);
}

/* ------------------------------------- */
/*               FRAME-FS		         */
/* ------------------------------------- */
#frame-fs {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 180;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(6px);
  animation: ffsBgIn 0.5s ease both;
  display: grid;
  grid-template-columns: auto minmax(200px, 400px);
  grid-template-areas: "frame nav";
}
#frame-fs .ffs-frame {
  grid-area: frame;
  position: relative;
  padding: 1.953125em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 1.25em;
}
#frame-fs .ffs-frame .board {
  max-width: 100%;
  max-height: 100%;
  width: 80%;
  height: auto;
  overflow: hidden;
  aspect-ratio: 16/9;
  animation: ffsImgIn 0.5s cubic-bezier(0, 0.17, 0, 1) both;
  border-radius: 1.5cqw;
  background: var(--color-martini-700);
  position: relative;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  touch-action: manipulation;
}
#frame-fs .ffs-frame .board img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#frame-fs .ffs-frame .board .caption {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 6cqw;
  font-weight: bold;
  line-height: 1.1em;
  background: rgba(var(--color-martini-700-rgb), 0.8);
}
#frame-fs .ffs-frame .board .caption:empty {
  display: none;
}
#frame-fs .ffs-frame .description {
  max-width: 80%;
  color: white;
  animation: ffsDescriptionIn 1.2s cubic-bezier(0, 0.17, 0, 1) both;
}
#frame-fs .ffs-navigation {
  grid-area: nav;
  background: var(--color-martini-950);
  height: 100vh;
  border-left: 1px solid var(--color-martini-800);
}
#frame-fs .ffs-navigation .ffs-content {
  width: 100%;
  height: calc(100% - 70px);
  padding: 1.5625em;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}
#frame-fs .ffs-navigation .ffs-content .ffs-page {
  display: none;
}
#frame-fs .ffs-navigation .ffs-content .ffs-page.active {
  display: grid;
}
#frame-fs .ffs-navigation .header {
  margin-bottom: 1.25em;
}
#frame-fs .ffs-navigation .menu {
  position: absolute;
  bottom: 0;
  height: 70px;
  width: 100%;
  display: flex;
  border-top: 1px solid var(--color-martini-800);
}
#frame-fs .ffs-navigation .menu span {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--color-martini-800);
  padding: 1em;
  transition: all 0.2s ease;
  gap: 0.375em;
  color: var(--color-martini-100);
}
#frame-fs .ffs-navigation .menu span:hover {
  background: var(--color-martini-800);
  cursor: pointer;
}
#frame-fs .ffs-navigation .menu span.active {
  background: var(--color-martini-100);
  color: white;
}
#frame-fs #ffs-next, #frame-fs #ffs-prev {
  position: absolute;
  z-index: 10;
}
#frame-fs #ffs-next {
  right: 0.75em;
}
#frame-fs #ffs-prev {
  left: 0.75em;
}
#frame-fs #ffs-comments {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  height: 100%;
  overflow: hidden;
  inset: 0;
  position: absolute;
}
#frame-fs #ffs-comments .comments-content {
  position: relative;
  overflow-y: auto;
}
#frame-fs #ffs-comments .comments-footer {
  border-top: 1px solid var(--color-martini-800);
  width: 100%;
  background: var(--color-martini-900);
  padding: 1em;
  display: flex;
  flex-flow: column;
  gap: 1em;
  align-items: start;
}
#frame-fs #ffs-comments .comments-footer textarea, #frame-fs #ffs-comments .comments-footer .comment-input {
  padding: 0px;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  border-radius: 0px;
  text-align: left;
  color: var(--color-martini-200);
}
#frame-fs #ffs-comments .comments-footer textarea::placeholder, #frame-fs #ffs-comments .comments-footer .comment-input::placeholder {
  color: var(--color-martini-500);
}
#frame-fs #ffs-comments .comments {
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  inset: 0;
  overflow-y: auto;
  height: 100%;
  padding: 0.75em;
}
#frame-fs #ffs-comments .comments .status {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var();
}
#frame-fs #ffs-comments .comments .comment-wrapper {
  background: var(--color-martini-800);
  border-radius: 12px;
  padding: 0.75em;
}
#frame-fs #ffs-comments .comments .comment-wrapper:has(.comment-wrapper) .comment-footer {
  margin-bottom: 20px;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment-reply-container {
  border: 2px solid var(--color-martini-accent);
  border-radius: 12px;
  padding: 0.75em;
  display: flex;
  flex-flow: column;
  gap: 0.75em;
  background: var(--color-martini-900);
  font-size: 0.9em;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment-reply-container [contenteditable=true]:focus {
  -webkit-appearance: none;
  outline: none;
  border: none;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment {
  display: flex;
  flex-flow: column;
  margin-left: 15px;
  border-left: 2px solid var(--color-martini-accent);
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment:last-of-type {
  border-left: none !important;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-header {
  display: flex;
  position: relative;
  height: 30px;
  align-items: center;
  gap: 10px;
  font-size: 0.9em;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-header .delete-comment-btn {
  margin-left: auto;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content {
  display: flex;
  flex-flow: column;
  gap: 7px;
  padding-left: 1.5625em;
  position: relative;
  padding-bottom: 1em;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content .name {
  font-weight: bold;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content .time {
  font-size: 0.9em;
  color: #555;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content .description {
  font-size: 0.9em;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content .description .mention {
  color: var(--color-martini-accent);
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content .avatar {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-martini-accent);
  color: white;
  border-radius: 100px;
  aspect-ratio: 1;
  width: 30px;
  left: -15px;
  top: 0;
  font-size: 0.6em;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content button {
  font-size: 0.9em;
  padding: 0px;
  background: none;
  color: var(--color-martini-600);
  border: none;
  outline: none;
  font-weight: normal;
  gap: 0.375em !important;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content button i {
  color: var(--color-martini-600) !important;
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content button:hover {
  color: var(--color-martini-accent);
}
#frame-fs #ffs-comments .comments .comment-wrapper .comment .comment-content button:hover i {
  color: var(--color-martini-accent) !important;
}

@keyframes loadingBg {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes ffsBgIn {
  0% {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
  }
  100% {
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(6px);
  }
}
@keyframes ffsNavIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes ffsImgIn {
  0% {
    transform: scale(50%);
    opacity: 0;
  }
  100% {
    transform: scale(100%);
    opacity: 1;
  }
}
@keyframes ffsDescriptionIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*# sourceMappingURL=account.css.map */