/*44.8px*/
:root {
  --f7-page-bg-color: white;
}
/*====================================
=          		SIZE				=
====================================*/
.og-w-100 {
  width: 100%;
}
.og-w-50 {
  width: 50%;
}
.og-h-100 {
  width: 100%;
}
.og-h-50 {
  width: 50%;
}
/*====================================
=          		FLEX				=
====================================*/
.og-f {
  display: flex;
}
.og-f-start {
  display: flex;
  justify-content: start;
  align-items: center;
}
.og-f-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.og-f-scroll {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
}
/*====================================
=          		PADDING				=
====================================*/
.og-pad-x {
  padding-left: 1rem;
  padding-right: 1rem;
}
/*====================================
=          	POSITIONING				=
====================================*/
.og-top-sm {
  top: 0.75rem;
}
.og-bottom-sm {
  bottom: 0.75rem;
}
.og-right-sm {
  right: 0.75rem;
}
.og-left-sm {
  left: 0.75rem;
}
.og-bl-sm {
  bottom: 0.75rem;
  left: 0.75rem;
}
.og-br-sm {
  bottom: 0.75rem;
  right: 0.75rem;
}
.og-tl-sm {
  top: 0.75rem;
  left: 0.75rem;
}
.og-tr-sm {
  top: 0.75rem;
  right: 0.75rem;
}
/*====================================
=          		BORDERS				=
====================================*/
.og-border-b-gray {
  border-bottom: 1px solid #cfcfcf;
}
/*====================================
=          		TEXT				=
====================================*/
.og-font-sm {
  font-size: 0.75rem;
}
.og-font-md {
  font-size: 1rem;
}
.og-font-lg {
  font-size: 1.5rem;
}
/*====================================
=          		UTILS				=
====================================*/
.close-button {
  font-size: 1.5rem;
}
.close-button.top-right {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.og-thumbnail {
  overflow: hidden;
  margin: 1rem;
}
.og-thumbnail.md {
  width: 8rem;
  height: 8rem;
}
.og-thumbnail img {
  object-fit: cover;
}
.og-abs {
  position: absolute;
}
.og-rel {
  position: relative;
}
.og-align-left {
  margin-right: auto;
}
.og-align-right {
  margin-left: auto;
}
/*====================================
=          		MENU				=
====================================*/
.og-menu {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 2.8rem;
}
/*====================================
=          		INPUT				=
====================================*/
.og-input {
  border-bottom: 1px solid #cfcfcf;
  margin-bottom: 1rem;
}
.og-input label {
  font-size: 0.75rem;
}
.og-input input {
  padding: 0.75rem 0rem;
  width: 100%;
}
.og-file-input {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.og-file-input input {
  position: absolute;
  opacity: 0.01;
  left: 0px;
  top: 0px;
  z-index: 1;
}
/*====================================
=          	CARDS					=
====================================*/
.og-media-card {
  width: 18rem;
  height: 18rem;
}
.og-media-card .card-content {
  width: 100%;
  height: 100%;
  padding: 2rem 1rem;
  overflow: hidden;
  position: relative;
  border-radius: var(--f7-card-border-radius);
}
.og-media-card .card-content .content {
  width: 150%;
  height: 150%;
  overflow: hidden;
  border-radius: var(--f7-card-border-radius);
  display: flex;
  justify-content: center;
  align-items: center;
}
.og-media-card .card-content .cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.001);
}
.og-media-card .card-footer {
  position: absolute;
  bottom: 0px;
  width: 100%;
  left: 0px;
}
.og-media-card .card-footer .dropdown a {
  justify-content: space-between !important;
}
.og-media-card .card-footer:before {
  height: 0px;
}
/*====================================
=          		TABS				=
====================================*/
.og-tabs {
  display: flex;
  justify-content: start;
  align-items: center;
  width: 100%;
  height: 2.8rem;
}
.og-tabs .og-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 2.8rem;
  box-sizing: border-box;
}
/*====================================
=          	INTERACTION				=
====================================*/

/*****/
/**/
/*gray with green accent*******
@color-primary: #2D2D2D;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #C5D961;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Vintage Cuban Sheet Music*******
@color-primary: #333333;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F6FBF4;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FB9A63;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Quiet Cry*******
@color-primary: #1C1D21;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #31353D;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #92CDCF;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Good as Gold*******
@color-primary: #2E2E2C;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #FFFFF0;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FFCC33;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Jonathan*******
@color-primary: #595952;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #30DFF2;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Smoked Salmon*******
@color-primary: #2E2E28;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #707070;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FF635C;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Web Design*******/
/*pumpkin*******
@color-primary: #262626;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #404040; 
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #f13d25;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*F7 THEME*/
:root {
  --f7-theme-color: #ED145B;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #262626;
  --f7-color-gray: #404040;
  --f7-color-gray-rgb: 64, 64, 64;
  --f7-color-gray-shade: #2e2e2e;
  --f7-color-gray-tint: #585757;
}
/******/
/*
@color-primary: #ffffff;
@color-light: #ffffff;
@color-dark: #202020; //f7 dark theme uses #1c1c1d
@color-secondary: rgb(228, 228, 228);
@color-offset: #202020;
@color-accent: #1b95f8;
*/
/*@toolbar-background-color: fade(@color-primary, @fade);*/
/*****BORDERED THEME****************
@toolbar-size: 44px;
@toolbar-padding: 4px;
@toolbar-outer-size: @toolbar-size + @toolbar-padding + 2px;
@toolbar-border-width: 1px;
@toolbar-border-radius: @rounded;
@toolbar-border-color: @color-offset;
/***********************************/
:root {
  --f7-theme-color: #ed145b;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #151619;
  --f7-color-gray: #30333a;
  --f7-color-gray-rgb: 48, 51, 58;
  --f7-color-gray-shade: #22252a;
  --f7-color-gray-tint: #454951;
}
html {
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}
/*
textarea{
	background-color: @color-primary !important;
	color: @color-offset !important;
    padding: 8px 0px;
    border-radius: 0px;
}
textarea{
	font-size: 36px;
    padding: 4px;
}
textarea::placeholder {
  color: @color-gray-500 !important;
  opacity: 1;
}
textarea:-ms-input-placeholder {
 color: @color-gray-500 !important;
}
textarea::-ms-input-placeholder {
 color: @color-gray-500 !important;
}
a.link{
	color: @color-offset;
}
a.color-dark{
	color: @color-dark;
}
.vx-body{
	width: 100%;
	height: 100%;
}
*/
/*
:root {
	--f7-theme-color: @color-accent;
	--f7-color-orange: @color-accent;
	--f7-color-black: @color-primary;
}
.color-black {
    --f7-theme-color: @color-dark;
    --f7-theme-color-rgb: 0, 0, 0;
    --f7-theme-color-shade: #000000;
    --f7-theme-color-tint: #141414;
}
.list:not(.padded){
	margin: 8px 0px;
}
.vx-page{
	.segmented button{
		border-width: 1px;
		text-overflow: unset;
		.icon{
			font-size: 0.8rem;
		}
	}
	.navbar {
		user-select: none;
		height: 46px;
		background-color: @color-primary !important;
		color: @color-offset;
		a{
			color: @color-offset;
		}
		a:hover{
			color: @color-offset;
		}
		a:active{
			color: @color-offset;
		}
	}

	.list:not(.padded){
		ul{
			background: transparent;
			&::before{
				background-color: transparent;
			}
			&::after{
				height: 1px;
				background-color: @color-offset;
			}
			li{
				.smart-select{
					background-color: @color-primary;
					> .item-content{
						padding-left: 4px;
					}
				}
				.item-inner{
					&::after{
						height: 1px;
						background-color: @color-offset;
					}

				}
			}
		}
	}
}

.navbar .menu-item .menu-item-content i{
	color: @color-offset;
}
.navbar .menu-item .menu-item-content::after {
	display: none;
}
.navbar .menu-inner {
	padding-left: 0px;
	padding-right: 0px;
}
.navbar .menu-item .menu-item-content i {
	font-size: 16px;
}
.navbar .menu-item {
	background-color: transparent;
	width: 2.8rem;
	height: 2.8rem;
}
.navbar .menu-item-dropdown-opened .menu-dropdown {
	background-color: @color-light-gray;
    border-radius: 99px;
}
.navbar .menu-dropdown-content {
	background-color: @color-light;
    top: -8px;
    left: -6px;
    z-index: 2;
    border-radius: 4px;
    width: 200px;
    border: 1px solid #dfdfdf;
    box-shadow: -2px -1px 12px -6px rgba(0, 0, 0, 0.45);
}
.navbar .menu-item.menu-item-dropdown.menu-item-dropdown-opened{
	background-color: @panel-color;
}
.navbar .menu-dropdown-item {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	cursor: pointer;
	color: @color-offset !important;
}
*/
.ivu-poptip-popper {
  min-width: 44px !important;
  /*default: 150px*/
}
.ivu-poptip-rel {
  width: 100%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .hide-sm,
  .show-sm-l,
  .show-lg {
    display: none !important;
  }
}
@media (min-width: 601px) {
  .hide-lg {
    display: none !important;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .hide-sm-l,
  .hide-sm,
  .show-lg {
    display: none !important;
  }
}
.vx-safe-margin-right {
  margin-right: env(safe-area-inset-right);
}
.vx-safe-margin-left {
  margin-left: env(safe-area-inset-left);
}
.vx-safe-margin-bottom {
  margin-bottom: env(safe-area-inset-bottom);
}
.vx-safe-margin-top {
  margin-top: env(safe-area-inset-top);
}
.vx-safe-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.vx-safe-padding-top {
  padding-top: env(safe-area-inset-top);
}
.vx-safe-padding-left {
  padding-left: env(safe-area-inset-left);
}
.vx-safe-padding-right {
  padding-right: env(safe-area-inset-right);
}
.vx-safe-top {
  top: env(safe-area-inset-top);
}
.vx-safe-height {
  height: env(safe-area-inset-top);
}
.vx-safe-width {
  width: env(safe-area-inset-top);
}
.vx-disabled {
  color: #777c87;
}
.vx-color-offset {
  color: #f5f5f6;
}
.vx-color-accent {
  color: #ed145b;
}
.vx-color-primary {
  color: #17181b;
}
.vx-color-light {
  color: #f5f5f6;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #111214;
}
.vx-color-dark-gray {
  color: #0d0e10;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ed145b;
}
.vx-bg-offset {
  background-color: #f5f5f6;
}
.vx-bg-accent {
  background-color: #ed145b;
}
.vx-bg-primary {
  background-color: #17181b;
}
.vx-bg-primary-faded {
  background-color: rgba(23, 24, 27, 0.97);
}
.vx-bg-light {
  background-color: #f5f5f6;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #111214;
}
.vx-bg-dark-gray {
  background-color: #0d0e10;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #f5f5f6;
}
.vx-theme-offset-text {
  color: #f5f5f6;
}
.vx-theme-accent {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-theme-primary-offset {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme-light {
  background-color: #f5f5f6;
  color: #111214;
}
.vx-theme-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme-border {
  border: 1px solid #30333a;
}
.vx-theme.vx-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme.vx-accent {
  background-color: #ed145b;
  color: #f5f5f6;
}
.vx-theme.vx-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme.vx-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme.vx-border {
  border: 1px solid #22252a;
}
.vx-theme-accent-border {
  border-color: #9d0d3d;
}
.vx-shadow-1 {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-shadow-2 {
  -webkit-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.vx-shadow-3 {
  -webkit-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
}
.vx-shadow-4 {
  -webkit-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  -moz-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
}
.vx-shadow-5 {
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-inner-shadow-1 {
  -webkit-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-blurred {
  filter: blur(4px);
}
.vx-rounded {
  border-radius: 44rem;
}
.vx-active {
  background-color: #ed145b !important;
}
.vx-bg-active {
  background-color: #ed145b !important;
  color: #ffffff !important;
}
.vx-active-color {
  background-color: #17181b !important;
  color: #ed145b !important;
}
.vx-py {
  padding-top: 8px;
  padding-bottom: 8px;
}
.vx-py-2 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.vx-pb {
  padding-bottom: 8px;
}
.vx-pb-2 {
  padding-bottom: 16px;
}
.vx-pt {
  padding-top: 8px;
}
.vx-pt-2 {
  padding-top: 16px;
}
.vx-my {
  margin-top: 8px;
  margin-bottom: 8px;
}
.vx-my-2 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.vx-mb {
  margin-bottom: 8px;
}
.vx-mb-2 {
  margin-bottom: 16px;
}
.vx-mt {
  margin-top: 8px;
}
.vx-mt-2 {
  margin-top: 16px;
}
.vx-wh-md {
  width: 32px;
  height: 32px;
}
.vx-wh-full {
  width: 100%;
  height: 100%;
}
.vx-jus-center {
  justify-content: center;
}
.vx-flex {
  display: flex;
}
.vx-flex-col {
  display: flex;
  flex-direction: column;
}
.vx-flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.vx-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-w-block {
  width: 44px;
}
@media (min-width: 601px) {
  .vx-w-block {
    width: 38px;
  }
}
.vx-h-block {
  height: 44px;
}
@media (min-width: 601px) {
  .vx-h-block {
    height: 38px;
  }
}
.vx-half-h-block {
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-half-h-block {
    height: 38px / 2;
  }
}
.vx-h-block-sm {
  height: 38px;
}
.vx-wh-block {
  width: 44px;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-wh-block {
    width: 38px;
  }
}
@media (min-width: 601px) {
  .vx-wh-block {
    height: 38px;
  }
}
.vx-block {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
}
.vx-header-block {
  padding: 0px  8px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs-sm {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.sm {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.lg {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block {
  width: 29px;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block .vx-header {
  overflow: hidden;
}
.vx-invisible {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}
.vx-item a {
  color: #f5f5f6;
}
.vx-item.active {
  color: #ed145b;
}
.vx-item.active a {
  color: #ed145b;
}
.vx-item.active svg g path {
  fill: #ed145b;
}
.home-page.page-content {
  background-color: #111214;
}
.navbar .right a {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
}
.vx-layout {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.vx-layout.dark {
  background-color: #111214;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #17181b !important;
  border-bottom: 1px solid #343840;
}
.vx-navbar ul {
  background-color: #17181b !important;
}
.vx-navbar ul li {
  color: #f5f5f6 !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #111214;
  display: flex;
  justify-content: start;
  align-items: center;
  min-width: 140px;
  min-height: 38px;
}
.vx-logo {
  width: max-content;
  height: 64px;
}
.vx-logo.fit {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-content {
  padding: 8rem 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.vx-project-preview .svg-preview {
  margin-top: -12%;
}
.vx-project-preview .image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vx-project-preview .image-preview img {
  height: 200%;
  object-fit: cover;
}
.vx-media-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-media-list .card {
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
}
.vx-media-list .card .card-content {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.vx-media-list .card .vx-svg-content svg {
  height: 100%;
}
.vx-media-list .card .card-content-padding {
  display: none;
}
.vx-media-list .card .card-footer {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  background-color: #ffffffcf;
  -webkit-transform: translate3d(0px, 200%, 0px);
}
.vx-media-list .card .card-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .card-delete {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 8px;
  right: 8px;
  display: none;
  background-color: rgba(255, 255, 255, 0.678);
  border-radius: 32px;
  color: #ed145b;
}
.vx-media-list .card .card-toggle {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  border: 2px solid #ed145b;
  background-color: white;
  position: absolute;
  bottom: 8px;
  left: 8px;
}
.vx-media-list .card.card-selected {
  /*
			.card-delete{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.card-footer{
				-webkit-transform: translate3d(0px, 0px, 0px);
			}
			*/
}
.vx-media-list .card.card-selected .card-toggle {
  background-color: #ed145b;
}
.vx-media-list .card.card-expandable {
  /*height: 100px !important;*/
}
.vx-media-list .card.card-expandable.card-opened .card-content-padding {
  display: block;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content,
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
  /*opacity: 0;*/
}
.vx-media-list .card.card-expandable.card-opened .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  /*opacity: 0;*/
}
.vx-media-list.media-grid {
  justify-content: center;
  flex-wrap: wrap;
  height: unset;
  overflow-y: auto;
  overflow-x: auto;
}
.vx-media-list.media-grid .card {
  margin: 8px 8px !important;
}
.vx-card {
  width: 16rem;
  height: 16rem;
  overflow: hidden;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.vx-card .ivu-card-extra {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 44px;
  min-height: 44px;
  top: 0px;
  left: 0;
  margin-top: 0px;
  right: unset;
  background-color: rgba(255, 255, 255, 0.4);
}
.vx-card .ivu-card-extra a {
  display: flex;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}
.vx-card .ivu-card-body {
  height: 100%;
  width: 100%;
  padding: 0px 16px;
}
.vx-card .ivu-card-body svg {
  height: 100%;
}
.vx-page-load {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #ffffff8a;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99990;
}
.vx-page-load.solid {
  background-color: #ffffff;
}
.vx-page-load.dark {
  background-color: #000000ab;
}
.vx-page-load.dark.solid {
  background-color: #000000;
}
.vx-overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 18, 20, 0.4);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
  pointer-events: none;
}
.vx-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.vgx-artboard {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #292c31;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vgx-artboard canvas {
  position: static;
  left: 0px;
  top: 0px;
  will-change: transform;
  touch-action: none;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard .opt-canvas {
  position: absolute;
  left: -4000px;
  top: -4000px;
  visibility: hidden;
  will-change: transform;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard.blocked {
  filter: blur(22px);
}
canvas[resize] {
  width: 100%;
  height: 100%;
}
.vx-actionbar-container {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 44px;
  height: 100%;
  z-index: 9;
}
.vx-actionbar-container .vx-actionbar-inner {
  width: 44px;
  height: 100%;
  background-color: #17181b;
  border: 1px solid #ebebeb;
}
.vx-actionbar-container .vx-actionbar {
  width: 44px;
  height: auto;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item {
  width: 100%;
  height: 44px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item > i {
  color: #f5f5f6;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item.active > i {
  color: #ed145b;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-subitems {
  border-radius: 20px;
  overflow: hidden;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item-spacer {
  width: 100%;
  height: 44px;
}
.vx-checkers {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.vx-control-group {
  margin: 8px 0rem;
}
.vx-flex-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: static;
  margin: 8px 0px;
}
.vx-flex-group.wrap {
  flex-wrap: wrap;
}
.vx-flex-group.vertical,
.vx-flex-group.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vx-option-group {
  display: flex;
  justify-content: end;
  align-items: center;
}
.vx-gradient-none {
  background-color: #cfcfcf;
}
.vx-gradient-linear {
  background: linear-gradient(0deg, #141414 0%, #cfcfcf 100%);
}
.vx-gradient-radial {
  background: radial-gradient(circle, #141414 0%, #cfcfcf 100%);
}
.vx-fa-linear-gradient::before {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#22252a));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #30333a;
  border-radius: 2px;
  font-size: 22px;
}
.active .vx-fa-linear-gradient::before {
  -webkit-background-clip: unset;
  border-color: #ed145b;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ed145b));
}
.vx-header {
  display: flex;
  justify-content: space-between;
  height: 44px;
  align-items: center;
  margin: 0px 0px 0px 0px;
}
.vx-header h2 {
  margin: 0px 0px;
  color: #f5f5f6;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #f5f5f6;
}
.vx-header.bordered {
  border-bottom: 1px solid #17181b;
}
.vx-input-block {
  display: flex;
  flex-direction: column;
  padding: 4px 2px;
  position: relative;
  margin: 0px 1px;
  width: 100%;
}
.vx-input-block label {
  font-size: 16px;
  padding: 2px 0px 2px 0px;
  color: #f5f5f6;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #17181b;
  color: #f5f5f6;
  border: 1px solid #343840;
  border-radius: 8px;
  min-height: 26px;
  border-width: 0px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #f5f5f6;
}
.vx-input-block.vx-with-label .vx-badge {
  top: 30px;
}
.vx-input-block.vx-with-trigger .vx-input-trigger {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 44px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f5f5f6;
}
.vx-input-block.vx-with-trigger input {
  padding: 8px 4px 8px 32px;
}
.vx-hexpad {
  position: relative;
}
.vx-hexpad .vx-placeholder {
  height: 38px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999999999;
  color: #8d8d8d;
  padding: 0px 15px;
  line-height: 38px;
}
.vx-list {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}
.vx-list .vx-list-item .vx-row {
  width: 100%;
  height: 44px;
  padding: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-top: 1px solid #2e3037;
}
.vx-list .vx-list-item .vx-row .vx-col {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-list .vx-list-item .vx-dropdown .dropdown-toggle {
  color: #f5f5f6;
}
.vx-list .vx-list-item.active > .vx-row:not(first-child) {
  border-top: 0px !important;
}
.vx-list .vx-list-item.active > .vx-row {
  background-color: #ed145b !important;
}
.vx-list .vx-list-item.active > .vx-row > .vx-dropdown .dropdown-toggle {
  color: #17181b;
}
.vx-layers .vx-list .vx-list-item .vx-row {
  padding: 1px;
}
.vx-layers .vx-layer-button {
  width: 32px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-layer-list.vx-list .segmented button {
  border-width: 0px;
}
.vx-layer-list.vx-list .vx-row {
  background-color: rgba(23, 24, 27, 0.1);
}
.vx-layer-list.vx-list .vgx-label {
  min-width: 25%;
}
.vx-layer-list.vx-list .vx-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: linear-gradient(45deg, #aaaaaa 25%, transparent 25%), linear-gradient(-45deg, #aaaaaa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #aaaaaa 75%), linear-gradient(-45deg, transparent 75%, #aaaaaa 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #dddddd;
}
.vx-layer-list.vx-list .vx-thumbnail svg {
  width: 22px;
  height: 22px;
}
.vx-layer-list.vx-list .vx-list-item .vx-list-item {
  padding-left: 8px;
}
/*
.vx-layers{
	min-height: 400px;
}
*/
.vx-layers > .vx-list.vx-layer-list:first-child > ul:first-child > li:first-child > .vx-row:first-child {
  border-top: 1px solid #000000;
}
.vx-home .page-content {
  background-color: #111214;
}
.vx-page .page-content {
  padding-top: 46px;
}
.vx-page-body {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.vx-panel {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  height: auto;
  position: absolute;
  z-index: 99930;
}
.vx-panel.vx-full {
  height: 100%;
}
.vx-panel-outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 4px 4px;
}
.vx-panel-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}
.vx-panel-inner .vx-panel-content {
  display: block;
  width: 100%;
}
.vx-panel .vx-tabs {
  display: none;
  position: absolute;
  height: 44px;
  bottom: 6px;
  width: 100%;
  left: 0px;
  padding: 0px 4px;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.vx-panel .vx-tabs .button {
  border-radius: 0px !important;
  background-color: transparent;
  text-overflow: unset;
  min-width: 100px;
  min-height: 32px;
}
.vx-panel .vx-tabs .button.button-active {
  border-bottom: 2px solid #ed145b;
  color: #ed145b;
}
.vx-select-list {
  display: flex;
  flex-direction: column;
  height: 32px;
  width: 100%;
}
.vx-select-list .vx-select-list-header {
  position: relative;
}
.vx-select-list .vx-select-list-header a {
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border: 1px solid #f5f5f6;
  border-radius: 8px;
  padding-left: 8px;
}
.vx-select-list .vx-select-list-header .vx-select-list-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 32px;
  width: 32px;
}
.vx-trigger-input:not(.floating) {
  width: 100%;
  margin: 4px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input:not(.floating) a {
  width: 100%;
  min-height: 28px;
  height: 38px;
  overflow: hidden;
}
.vx-trigger-input:not(.floating).vx-trigger-block-icon a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.vx-trigger-doc-icon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input.floating {
  position: absolute;
  right: 0px;
  top: -8px;
}
.vx-trigger-button {
  min-width: 44px;
  min-height: 44px/2;
  margin: 8px 0rem;
  display: flex;
}
.vx-icon {
  pointer-events: none;
}
.vx-icon i {
  pointer-events: none;
}
.vx-link {
  min-width: 44px;
  min-height: 44px;
}
.vx-trigger-input.floating .vx-link {
  width: 32px;
  height: 32px;
}
.vx-trigger-input .vx-doc-icon svg g path:first-child {
  fill: #ffffff;
}
.vx-trigger-input .vx-doc-icon svg path {
  stroke: #f5f5f6;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #f5f5f6;
  fill: #f5f5f6;
}
.vx-trigger-input.active .vx-doc-icon svg g path:first-child {
  fill: #ed145b;
}
.vx-trigger-input.active .vx-doc-icon svg path {
  stroke: #ed145b;
}
.vx-trigger-input.active .button {
  background-color: #ed145b !important;
}
.gui-svg-icon svg {
  width: 28px;
  fill: #f5f5f6;
}
.active .gui-svg-icon svg {
  fill: #ed145b;
}
.vx-shadow-offset-input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0px solid #30333a;
}
.vx-shadow-offset-input .vx-shadow-box {
  width: 90%;
  height: 8.5rem;
  border-radius: 4px;
}
@media (min-width: 601px) {
  .vx-shadow-offset-input .vx-shadow-box {
    width: 90%;
    height: 8.5rem;
    border-radius: 4px;
  }
}
.dot-box-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid white;
  background-color: #ed145b !important;
}
.dot-box-handle.handle-1 {
  background-color: #111214 !important;
}
.dot-box-handle.handle-2 {
  background-color: #ed145b !important;
}
.dot-box-indicator {
  background-color: #020202;
  opacity: 0.5;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 20px;
  left: 50px;
  top: 50px;
}
.vx-swatch {
  position: relative;
  overflow: hidden;
}
.vx-swatch.button-swatch {
  width: 32px;
  height: 32px;
  border-radius: 44rem;
}
.vx-swatch .checkers {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: white;
  border-radius: 44rem;
}
.vx-swatch .fill {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 44rem;
}
.vx-text-window .list ul:before {
  display: none;
}
.vx-text-window .list ul {
  background-color: transparent !important;
}
.vx-text-window .list ul:after {
  display: none;
}
.vx-text-window .item-title {
  color: black;
}
.vx-text-window textarea {
  color: black;
}
.vx-text-window textarea::placeholder {
  color: gray;
}
.vx-interface {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.vx-interface.blocked {
  filter: blur(12px);
}
.vx-popover {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99950;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background-color: #00000030;
}
.vx-popover .vx-popover-dialog {
  position: fixed;
  left: 0px;
  top: 0px;
}
.vx-popover.opened {
  opacity: 1;
  pointer-events: all;
}
.vx-popover-dialog .vx-keypad {
  width: 240px;
}
.vx-popover-list {
  width: 240px;
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-popover-list .vx-touchable {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-popover-list .vx-touchable .vx-label {
  min-width: 132px;
}
.vx-popover-list .vx-touchable svg g path {
  fill: white;
  stroke: white;
}
.vx-popover-list.sm {
  width: 50px;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-popover-dialog .vx-keypad {
    width: 320px;
    height: 300px;
  }
}
.vx-dropover {
  width: 100%;
}
.vx-dropover .vx-dropover-dialog {
  position: absolute;
  z-index: 250;
}
.vx-dropover .vx-dropover-dialog.vx-fixed {
  position: fixed;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  left: 0px;
  top: 0px;
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
  align-items: center;
  padding: 0px 0px;
  margin: 0px 0px;
  display: flex;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
    height: 38px;
  }
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable .vx-icon {
  min-width: 24px;
  text-align: center;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable span {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
}
.vx-dropover.sm .vx-dropover-dialog {
  min-width: 44px;
}
.vx-dropover.sm .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-dropover.md .vx-dropover-dialog {
  min-width: 100px;
}
.vx-dropover.lg .vx-dropover-dialog {
  min-width: 200px;
}
.vx-dropover.select-list .vx-dropover-dialog-transition {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-dropover .vx-hidden-input {
  display: none;
}
.vx-keypad {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 240px;
}
.vx-keypad .vx-keypad-result {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #343840;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #17181b;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters.vx-keypad-col-3 .vx-touchable {
  width: 100%;
  flex: 1 0 33%;
  font-size: 18px;
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-keypad .vx-keypad-characters .vx-touchable.vx-box.lg {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .show-lg,
  .hide-sm {
    display: none !important;
  }
}
.vx-press {
  outline: none !important;
}
.vx-press.vx-box {
  width: 44px;
  height: 44px;
}
.vx-press.vx-box.lg {
  width: 50px;
  height: 50px;
}
.vx-press.active {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-text {
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-touch {
  outline: none !important;
}
.vx-touch.vx-box {
  width: 44px;
  height: 44px;
}
.vx-box {
  width: 44px;
  height: 44px;
}
.vx-touchable-select-block {
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
}
@media (min-width: 601px) {
  .vx-touchable-select-block {
    height: 38px;
  }
}
.vx-touchable-select-block.vx-theme-bordered {
  border-color: #343840;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #777c87;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-touchable-select-block .vx-touchable-select-block-icon {
    height: 38px;
  }
}
.vx-button {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}
@media (min-width: 601px) {
  .vx-button {
    height: 38px;
  }
}
.vx-button.vx-theme-bordered {
  border-color: #343840;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-input {
  /*.vx-inner-shadow-1;*/
  flex-direction: column;
}
.vx-input .vx-input-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  padding-left: 2px;
  height: 44px;
  /*
		&::after {
			content: "";
			width: 100%;
			height: 0.6px;
			background-color: #3e3e3e;
			bottom: -2px;
			position: absolute;
			left: 0%;
		}
		*/
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input {
  width: 100%;
  display: flex;
  flex: 1;
  height: 44px;
  background-color: transparent !important;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper input {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input[readonly] {
  pointer-events: none;
}
.vx-input .vx-input-wrapper .vx-input-after {
  display: flex;
  justify-content: flex-end;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
  width: 22px;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
  width: 38px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
  width: 100%;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
    height: 38px / 2;
  }
}
.vx-input.focused {
  border: 1px solid;
  border-color: #ed145b !important;
}
.vx-widget {
  width: 100%;
  display: flex;
  margin: 4px 0px;
  padding: 0px 4px;
  border: 0px solid;
  border-radius: 8px;
  box-sizing: border-box;
}
.vx-widget .vx-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0px;
  /*text-align: left;*/
  font-size: 14px;
}
.vx-widget .vx-label span {
  white-space: nowrap;
}
.vx-widget .vx-label .vx-touchable {
  min-width: 18px;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
}
.vx-widget .vx-object {
  display: flex;
  width: 100%;
}
.vx-flex-group .vx-widget:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.vx-flex-group .vx-widget:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.vx-widget-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-active .vx-widget-theme-primary,
.vx-theme-accent .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-primary.vx-theme-bordered,
.vx-theme-accent .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-active .vx-widget-theme-primary a,
.vx-theme-accent .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-active .vx-widget-theme-text,
.vx-theme-accent .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-light-text,
.vx-theme-accent .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-theme-light .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
/*
.vx-touchable-select-block{
	&.active {
		outline: none !important;
		.vx-theme-accent;
	}
}
*/
a.vx-touchable .vx-icon {
  font-size: 1.8rem;
}
a.vx-touchable {
  user-select: none;
  border-radius: 8px;
}
a.vx-touchable.active {
  outline: none !important;
  color: #ed145b;
}
a.vx-touchable.vx-highlight.active {
  outline: none !important;
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-text {
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.active a.vx-touchable {
  outline: none !important;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-input-stepper {
  display: none !important;
}
.vx-interface .fab svg path {
  stroke: white !important;
}
.vx-fab-panel {
  position: fixed;
  bottom: 22px;
  left: 52px;
  height: 56px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-fab-button {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: 48px;
  height: 48px;
  font-size: 16px;
  border-radius: 4px;
  margin-right: 8px;
  background-color: #17181b;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-fab-button.active {
  background-color: #ed145b;
}
.vx-textsheet textarea {
  font-size: 4rem;
  height: 100%;
  line-height: 7rem;
}
.vx-scrollbar-none {
  scrollbar-gutter: stable;
  scrollbar-width: none;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-fab-panel {
    bottom: 52px;
    left: 52px;
  }
  .vx-fab-panel.away-sm {
    display: none;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-fab-panel {
    bottom: 22px;
    left: 52px;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
.toast {
  /*
	left: 48px !important;
	top: 48px !important;
	*/
  width: 300px !important;
  top: 52px !important;
  left: 50% !important;
  margin-left: -150px !important;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toast .toast-content {
  border-radius: 4px;
  background-color: #ed145b;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .color-picker.color-picker-inline .color-picker-module-wheel {
    width: 60%;
    display: flex;
    align-self: center;
  }
}
@media (min-width: 601px) {
  .vx-page .list:not(.padded) ul {
    background: transparent;
  }
  .vx-page .list:not(.padded) ul::before {
    background-color: transparent;
  }
  .vx-page .list:not(.padded) ul::after {
    height: 1px;
    background-color: #f5f5f6;
  }
  .vx-page .list:not(.padded) ul li .item-content {
    /*padding-left: 0px !important;*/
  }
  .vx-page .list:not(.padded) ul li .item-inner {
    padding-left: 0px !important;
  }
  .vx-page .list:not(.padded) ul li .item-inner::after {
    height: 1px;
    background-color: #f5f5f6;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-actionbar-container {
    width: 100%;
    height: 44px;
    overflow-x: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
  .vx-actionbar-container .vx-actionbar-inner {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar .gui-action-bar-item-spacer {
    display: none;
  }
  .vx-actionbar-container.submenu {
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-item {
    width: 44px;
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-subitems {
    position: absolute;
    top: 52px;
    left: -4rem;
    height: 44px;
    display: flex;
    flex-direction: row;
    background-color: #17181b;
  }
  .vx-actionbar-container .vx-actionbar-subitems .vx-actionbar-item {
    padding: 0px 12px;
    width: 44px;
  }
}
@media (min-width: 601px) {
  .vx-actionbar-inner {
    width: 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .submenu {
    width: 100%;
  }
  .vx-actionbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 27px;
  }
  .vx-actionbar-item {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-subitems {
    position: absolute;
    top: 0px;
    left: 52px;
    display: flex;
    flex-direction: column;
    width: 44px;
    background-color: #17181b;
  }
  .vx-actionbar-subitems .vx-actionbar-item {
    padding: 8px 0px;
  }
}
/*
@media @device-sm {
	.vgx-artboard{
		.vx-transition;
		&.lifted-sm{
			top: -100px;
		}
		&.lifted-md{
			top: -150px;
		}
		&.lifted-lg{
			top: -200px;
		}
	}
}
*/
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    left: 0px;
    bottom: 44px;
    min-height: 140px;
    height: auto;
    width: 100%;
    /*-webkit-transform: translate3d(0px, 160%, 0px);*/
  }
  .vx-panel.vx-full {
    padding-top: 88px;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0px, 0%, 0px);*/
  }
  .vx-panel.lg {
    height: 400px;
  }
  .vx-panel.hastabs {
    padding-bottom: 44px;
  }
  .vx-panel.hastabs .vx-tabs {
    display: flex;
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-panel {
    right: 44px;
    top: 0px;
    min-height: 200px;
    width: 280px;
    /*-webkit-transform: translate3d(160%, 0px, 0px);*/
    padding-top: 44px;
  }
  .vx-panel .vx-panel-outer {
    padding: 4px 8px;
  }
  .vx-panel.vx-full-lg {
    height: 100%;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0%, 0px, 0px);*/
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    height: 100%;
  }
  .vx-header h2 {
    font-size: 1.4rem;
    font-weight: bolder;
  }
  .vx-dropover-dialog {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
}
.tooltip-fade {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events: none;
}
.tooltip-fade.tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}
.canvas-modern {
  background: #111214;
  color: #f5f5f6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.canvas-modern *,
.canvas-modern *::before,
.canvas-modern *::after {
  box-sizing: border-box;
}
.canvas-modern .vgx-artboard {
  background-color: #292c31;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0) 62%);
}
.canvas-modern .vx-panel {
  background: rgba(24, 25, 29, 0.985) !important;
  border-left: 1px solid #30333a;
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.28);
  color: #f5f5f6;
}
.canvas-modern .vx-panel-outer {
  padding: 10px 12px 12px;
}
.canvas-modern .vx-panel-inner {
  min-height: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.canvas-modern .vx-panel-content {
  padding-top: 8px;
}
.canvas-modern .vx-header {
  height: 42px;
  min-height: 42px;
  border-bottom: 1px solid #30333a;
}
.canvas-modern .vx-header h2 {
  margin: 0;
  color: #f5f5f6;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em;
}
.canvas-modern .vx-header a {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: #9da1aa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-modern .vx-header a:hover {
  background: #272a30;
  color: #ffffff;
}
.canvas-modern .vx-control-group {
  margin: 8px 0;
}
.canvas-modern .vx-flex-group {
  gap: 8px;
  margin: 8px 0;
}
.canvas-modern .vx-widget {
  margin: 5px 0;
  padding: 0 8px;
  border-radius: 8px;
}
.canvas-modern .vx-widget .vx-label {
  min-height: 24px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.canvas-modern .vx-input-block {
  margin: 0;
  padding: 5px 0;
}
.canvas-modern .vx-input-block label {
  padding: 0 0 6px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
}
.canvas-modern .vx-input-block input,
.canvas-modern .vx-input-block textarea,
.canvas-modern .vx-input-block .vx-text-input {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-input-block input {
  min-height: 36px;
  padding: 0 10px;
}
.canvas-modern .vx-textarea-input {
  padding: 0;
}
.canvas-modern .vx-textarea-input > label {
  padding: 0 0 7px;
}
.canvas-modern .vx-textarea-input .vx-text-input {
  width: 100%;
  min-height: 92px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 10px;
  background: #1b1d21;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-textarea-input .vx-text-input:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  background: #202228;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.canvas-modern .vx-textarea-input .vx-textarea-control,
.canvas-modern .vx-textarea-input .vx-textarea-control.input {
  width: 100%;
  height: 90px;
  min-height: 90px;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.canvas-modern .vx-textarea-input textarea {
  width: 100% !important;
  height: 90px !important;
  min-height: 90px !important;
  display: block;
  padding: 12px 13px !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  resize: none !important;
  background: transparent !important;
  color: #f5f5f6;
  font-size: 12px;
  line-height: 1.5;
  caret-color: #ed145b;
}
.canvas-modern .vx-textarea-input textarea::placeholder {
  color: #6f747e;
}
.canvas-modern .vx-input,
.canvas-modern .vx-touchable-select-block,
.canvas-modern .vx-button {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a !important;
  box-shadow: none;
  color: #f5f5f6;
}
.canvas-modern .vx-input {
  min-height: 38px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-input .vx-input-wrapper {
  min-height: 36px;
  padding-left: 9px;
}
.canvas-modern .vx-input.focused {
  border-color: #ed145b !important;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.13);
  background: #272a30 !important;
}
.canvas-modern .vx-trigger-input:not(.floating) {
  margin: 5px 0;
}
.canvas-modern .vx-trigger-input:not(.floating) a {
  min-height: 38px;
  height: 38px;
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #d5d7dc;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.canvas-modern .vx-trigger-input:not(.floating) a:hover {
  border-color: #474b54;
  background: #292c31;
  color: #ffffff;
}
.canvas-modern .vx-trigger-input:not(.floating).active a {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.14);
  color: #ff7aa6;
}
.canvas-modern .vx-select-list .vx-select-list-header a {
  height: 38px;
  border-color: #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-list .vx-list-item .vx-row,
.canvas-modern .vx-layer-list.vx-list .vx-row {
  min-height: 40px;
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid #2c2f35;
  background: transparent;
  transition: background-color 120ms ease;
}
.canvas-modern .vx-list .vx-list-item .vx-row:hover,
.canvas-modern .vx-layer-list.vx-list .vx-row:hover {
  background: #22252a;
}
.canvas-modern .vx-layer-list.vx-list .vx-list-item.active > .vx-row {
  background: rgba(237, 20, 91, 0.14) !important;
  box-shadow: inset 2px 0 #ed145b;
  color: #ffffff;
}
.canvas-modern .segmented,
.canvas-modern .ai-segmented-control {
  gap: 3px;
  padding: 3px;
  border: 1px solid #30333a;
  border-radius: 9px;
  background: #151619;
}
.canvas-modern .segmented .button,
.canvas-modern .ai-segmented-control .button {
  height: 34px;
  border: 0 !important;
  border-radius: 6px !important;
  color: #969aa4;
  font-size: 11px;
  font-weight: 700;
}
.canvas-modern .segmented .button.button-active,
.canvas-modern .ai-segmented-control .button.button-active,
.canvas-modern .segmented .button.active,
.canvas-modern .ai-segmented-control .button.active {
  background: #2a2d33;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}
.canvas-modern .ai-segmented-control {
  width: 100%;
  min-width: 0;
  display: flex;
  align-self: stretch;
}
.canvas-modern .ai-segmented-control .button {
  min-width: 104px;
  flex: 1 1 50%;
  padding: 0 14px;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar {
  background: #343840;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar-active,
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-knob {
  background: #ed145b;
}
.canvas-modern .vx-tabs {
  gap: 4px;
  padding: 5px 8px;
  border-top: 1px solid #30333a;
  background: #17181b;
}
.canvas-modern .vx-tabs .button.button-active {
  border-bottom-color: #ed145b;
  color: #ff7aa6;
}
.canvas-modern:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background: #292c31;
  color: #ffffff;
}
.canvas-modern ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.canvas-modern ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #4a4e57;
  background-clip: padding-box;
}
.canvas-modern ::-webkit-scrollbar-track {
  background: transparent;
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .canvas-modern .vx-panel {
    width: 312px;
  }
}
.ai-prompt-studio {
  --ai-accent: #ed145b;
  --ai-accent-soft: rgba(237, 20, 91, 0.14);
  --ai-bg: #111214;
  --ai-surface: #1b1d21;
  --ai-surface-raised: #22252a;
  --ai-border: #30333a;
  --ai-text: #f5f5f6;
  --ai-muted: #989ca6;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ai-bg);
  color: var(--ai-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ai-prompt-studio *,
.ai-prompt-studio *::before,
.ai-prompt-studio *::after {
  box-sizing: border-box;
}
.ai-prompt-studio__main {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 238px 1fr;
  gap: 22px;
  padding: 22px;
}
.ai-prompt-preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border);
  border-radius: 12px;
  background: var(--ai-surface);
}
.ai-prompt-preview__media {
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background-color: #0c0d0f;
  background-image: linear-gradient(45deg, #181a1e 25%, transparent 25%), linear-gradient(-45deg, #181a1e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #181a1e 75%), linear-gradient(-45deg, transparent 75%, #181a1e 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.ai-prompt-preview__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ai-prompt-preview__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(13, 14, 16, 0.78);
  color: #e9eaed;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.ai-prompt-preview__details {
  padding: 14px;
  border-top: 1px solid var(--ai-border);
}
.ai-prompt-preview__details p,
.ai-prompt-preview__details strong,
.ai-prompt-preview__details span {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-prompt-preview__details p {
  color: #ff7aa6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.ai-prompt-preview__details strong {
  margin-top: 4px;
  font-size: 13px;
}
.ai-prompt-preview__details span {
  margin-top: 3px;
  color: var(--ai-muted);
  font-size: 10px;
}
.ai-prompt-composer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.ai-prompt-composer__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ai-prompt-composer__heading p,
.ai-prompt-composer__heading h2 {
  margin: 0;
}
.ai-prompt-composer__heading p {
  color: #ff7aa6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.ai-prompt-composer__heading h2 {
  margin-top: 5px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.ai-prompt-cost {
  min-width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--ai-border);
  border-radius: 7px;
  background: var(--ai-surface);
  color: #c8cbd2;
  font-size: 10px;
  font-weight: 700;
}
.ai-control-label {
  display: block;
  margin: 0 0 6px;
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ai-ratio-selector {
  width: 100%;
  position: relative;
}
.ai-ratio-selector__trigger,
.ai-control {
  width: 100%;
  height: 40px;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 8px;
  outline: none;
  background: var(--ai-surface-raised, #22252a);
  color: var(--ai-text, #f5f5f6);
  font: inherit;
}
.ai-ratio-selector__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.ai-ratio-selector__trigger:hover,
.ai-ratio-selector__trigger[aria-expanded="true"] {
  border-color: #4b4f58;
  background: #272a30;
}
.ai-ratio-selector__selection {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 650;
}
.ai-ratio-selector__icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-ratio-selector__shape {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.ai-ratio-selector__chevron {
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
}
.ai-ratio-selector__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 99980;
  max-height: 196px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #3a3e46;
  border-radius: 10px;
  background: #191b1f;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
}
.ai-ratio-selector__option {
  min-width: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #b9bcc4;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.ai-ratio-selector__option:hover {
  background: #25282e;
  color: #ffffff;
}
.ai-ratio-selector__option.active {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.12);
  color: #ff7aa6;
}
.ai-prompt-field {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ai-prompt-field__surface {
  min-height: 150px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 10px;
  background: var(--ai-surface, #1b1d21);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ai-prompt-field__surface:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.ai-prompt-field__surface textarea {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ai-text, #f5f5f6);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
}
.ai-prompt-field__surface textarea::placeholder {
  color: #666b75;
}
.ai-prompt-field__hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--ai-border, #30333a);
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  line-height: 1.45;
}
.ai-prompt-field__hint i {
  margin-top: 1px;
  color: #ff7aa6;
}
.ai-prompt-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 22px;
  border-top: 1px solid var(--ai-border);
  background: #151619;
}
.ai-prompt-footer .button {
  height: 40px;
  min-width: 126px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ai-prompt-footer .button-outline {
  border-color: #3b3f47;
  color: #d6d8dd;
}
.ai-prompt-footer .button-fill {
  border-color: #ed145b;
  background: #ed145b;
  box-shadow: 0 8px 20px rgba(237, 20, 91, 0.22);
  color: #ffffff;
}
.ai-prompt-credit-button coin-icon {
  width: 18px;
  height: 18px;
}
.ai-prompt-credit-button b {
  color: #ffffff;
}
.ai-prompt-generate-button {
  min-width: 154px !important;
}
.ai-prompt-studio--panel {
  background: transparent;
}
.ai-generator-panel__main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 72px;
}
.canvas-modern .ai-generator-panel .ai-generator-panel__main {
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #454a54 transparent;
  scrollbar-width: thin;
}
.canvas-modern .ai-generator-panel .ai-segmented-control {
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  align-items: stretch;
  padding: 3px;
  margin: 0;
}
.canvas-modern .ai-generator-panel .ai-segmented-control .button {
  height: 34px;
  min-height: 34px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
.canvas-modern .ai-generator-panel .ai-model-field,
.canvas-modern .ai-generator-panel .ai-ratio-selector {
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field {
  min-height: auto;
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field__surface {
  height: 96px;
  min-height: 96px;
  flex: 0 0 96px;
}
.canvas-modern .ai-generator-panel .ai-style-grid {
  min-height: auto;
  flex: 0 0 auto;
  overflow: visible;
}
.ai-form-field {
  width: 100%;
  position: relative;
}
.ai-control {
  padding: 0 34px 0 10px;
  font-size: 11px;
}
.ai-style-grid {
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 10px;
  padding: 2px 2px 12px;
  overflow-x: hidden;
  overflow-y: auto;
}
.ai-style-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.ai-style-card__preview {
  width: 100%;
  height: 116px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 9px;
  background: #22252a;
  transition: border-color 140ms ease, transform 140ms ease;
}
.ai-style-card__preview:hover {
  border-color: #555a64;
  transform: translateY(-1px);
}
.ai-style-card__preview.active {
  border-color: #ed145b;
  box-shadow: 0 0 0 2px rgba(237, 20, 91, 0.13);
}
.ai-style-card__preview .vx-img,
.ai-style-card__preview .vx-img img {
  width: 100% !important;
  height: 100% !important;
}
.ai-style-card__preview img {
  object-fit: cover;
}
.ai-style-card__name {
  width: 100%;
  display: block;
  margin: 6px 0 2px;
  overflow: hidden;
  color: #d8dae0;
  font-size: 10px;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-generator-state {
  width: 100%;
  min-height: 160px;
  flex: 1 1 auto;
  padding: 14px;
  border: 1px solid #30333a;
  border-radius: 10px;
  background: #1b1d21;
}
.ai-generator-state--offline {
  color: #c4c7ce;
}
.ai-generator-state__media {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #ffffff;
}
.ai-prompt-footer--panel {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: 62px !important;
  min-height: 62px;
  padding: 10px 0;
  background: #17181b !important;
}
.ai-prompt-footer--panel .toolbar-inner {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 0;
}
.ai-prompt-footer--panel .button {
  min-width: 0;
  flex: 1 1 50%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .ai-prompt-studio__main {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    overflow-y: auto;
  }
  .ai-prompt-preview {
    min-height: 180px;
  }
  .ai-prompt-preview__details {
    display: none;
  }
  .ai-prompt-footer {
    min-height: 64px;
    padding: 10px 14px;
  }
  .ai-prompt-footer .button {
    min-width: 0;
    flex: 1 1 50%;
  }
}

/*****/
/**/
/*gray with green accent*******
@color-primary: #2D2D2D;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #C5D961;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Vintage Cuban Sheet Music*******
@color-primary: #333333;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F6FBF4;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FB9A63;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Quiet Cry*******
@color-primary: #1C1D21;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #31353D;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #92CDCF;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Good as Gold*******
@color-primary: #2E2E2C;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #FFFFF0;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FFCC33;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Jonathan*******
@color-primary: #595952;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #30DFF2;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Smoked Salmon*******
@color-primary: #2E2E28;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #707070;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FF635C;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Web Design*******/
/*pumpkin*******
@color-primary: #262626;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #404040; 
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #f13d25;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*F7 THEME*/
:root {
  --f7-theme-color: #ED145B;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #262626;
  --f7-color-gray: #404040;
  --f7-color-gray-rgb: 64, 64, 64;
  --f7-color-gray-shade: #2e2e2e;
  --f7-color-gray-tint: #585757;
}
/******/
/*
@color-primary: #ffffff;
@color-light: #ffffff;
@color-dark: #202020; //f7 dark theme uses #1c1c1d
@color-secondary: rgb(228, 228, 228);
@color-offset: #202020;
@color-accent: #1b95f8;
*/
/*@toolbar-background-color: fade(@color-primary, @fade);*/
/*****BORDERED THEME****************
@toolbar-size: 44px;
@toolbar-padding: 4px;
@toolbar-outer-size: @toolbar-size + @toolbar-padding + 2px;
@toolbar-border-width: 1px;
@toolbar-border-radius: @rounded;
@toolbar-border-color: @color-offset;
/***********************************/
:root {
  --f7-theme-color: #ed145b;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #151619;
  --f7-color-gray: #30333a;
  --f7-color-gray-rgb: 48, 51, 58;
  --f7-color-gray-shade: #22252a;
  --f7-color-gray-tint: #454951;
}
html {
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}
/*
textarea{
	background-color: @color-primary !important;
	color: @color-offset !important;
    padding: 8px 0px;
    border-radius: 0px;
}
textarea{
	font-size: 36px;
    padding: 4px;
}
textarea::placeholder {
  color: @color-gray-500 !important;
  opacity: 1;
}
textarea:-ms-input-placeholder {
 color: @color-gray-500 !important;
}
textarea::-ms-input-placeholder {
 color: @color-gray-500 !important;
}
a.link{
	color: @color-offset;
}
a.color-dark{
	color: @color-dark;
}
.vx-body{
	width: 100%;
	height: 100%;
}
*/
/*
:root {
	--f7-theme-color: @color-accent;
	--f7-color-orange: @color-accent;
	--f7-color-black: @color-primary;
}
.color-black {
    --f7-theme-color: @color-dark;
    --f7-theme-color-rgb: 0, 0, 0;
    --f7-theme-color-shade: #000000;
    --f7-theme-color-tint: #141414;
}
.list:not(.padded){
	margin: 8px 0px;
}
.vx-page{
	.segmented button{
		border-width: 1px;
		text-overflow: unset;
		.icon{
			font-size: 0.8rem;
		}
	}
	.navbar {
		user-select: none;
		height: 46px;
		background-color: @color-primary !important;
		color: @color-offset;
		a{
			color: @color-offset;
		}
		a:hover{
			color: @color-offset;
		}
		a:active{
			color: @color-offset;
		}
	}

	.list:not(.padded){
		ul{
			background: transparent;
			&::before{
				background-color: transparent;
			}
			&::after{
				height: 1px;
				background-color: @color-offset;
			}
			li{
				.smart-select{
					background-color: @color-primary;
					> .item-content{
						padding-left: 4px;
					}
				}
				.item-inner{
					&::after{
						height: 1px;
						background-color: @color-offset;
					}

				}
			}
		}
	}
}

.navbar .menu-item .menu-item-content i{
	color: @color-offset;
}
.navbar .menu-item .menu-item-content::after {
	display: none;
}
.navbar .menu-inner {
	padding-left: 0px;
	padding-right: 0px;
}
.navbar .menu-item .menu-item-content i {
	font-size: 16px;
}
.navbar .menu-item {
	background-color: transparent;
	width: 2.8rem;
	height: 2.8rem;
}
.navbar .menu-item-dropdown-opened .menu-dropdown {
	background-color: @color-light-gray;
    border-radius: 99px;
}
.navbar .menu-dropdown-content {
	background-color: @color-light;
    top: -8px;
    left: -6px;
    z-index: 2;
    border-radius: 4px;
    width: 200px;
    border: 1px solid #dfdfdf;
    box-shadow: -2px -1px 12px -6px rgba(0, 0, 0, 0.45);
}
.navbar .menu-item.menu-item-dropdown.menu-item-dropdown-opened{
	background-color: @panel-color;
}
.navbar .menu-dropdown-item {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	cursor: pointer;
	color: @color-offset !important;
}
*/
.ivu-poptip-popper {
  min-width: 44px !important;
  /*default: 150px*/
}
.ivu-poptip-rel {
  width: 100%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .hide-sm,
  .show-sm-l,
  .show-lg {
    display: none !important;
  }
}
@media (min-width: 601px) {
  .hide-lg {
    display: none !important;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .hide-sm-l,
  .hide-sm,
  .show-lg {
    display: none !important;
  }
}
.vx-safe-margin-right {
  margin-right: env(safe-area-inset-right);
}
.vx-safe-margin-left {
  margin-left: env(safe-area-inset-left);
}
.vx-safe-margin-bottom {
  margin-bottom: env(safe-area-inset-bottom);
}
.vx-safe-margin-top {
  margin-top: env(safe-area-inset-top);
}
.vx-safe-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.vx-safe-padding-top {
  padding-top: env(safe-area-inset-top);
}
.vx-safe-padding-left {
  padding-left: env(safe-area-inset-left);
}
.vx-safe-padding-right {
  padding-right: env(safe-area-inset-right);
}
.vx-safe-top {
  top: env(safe-area-inset-top);
}
.vx-safe-height {
  height: env(safe-area-inset-top);
}
.vx-safe-width {
  width: env(safe-area-inset-top);
}
.vx-disabled {
  color: #777c87;
}
.vx-color-offset {
  color: #f5f5f6;
}
.vx-color-accent {
  color: #ed145b;
}
.vx-color-primary {
  color: #17181b;
}
.vx-color-light {
  color: #f5f5f6;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #111214;
}
.vx-color-dark-gray {
  color: #0d0e10;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ed145b;
}
.vx-bg-offset {
  background-color: #f5f5f6;
}
.vx-bg-accent {
  background-color: #ed145b;
}
.vx-bg-primary {
  background-color: #17181b;
}
.vx-bg-primary-faded {
  background-color: rgba(23, 24, 27, 0.97);
}
.vx-bg-light {
  background-color: #f5f5f6;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #111214;
}
.vx-bg-dark-gray {
  background-color: #0d0e10;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #f5f5f6;
}
.vx-theme-offset-text {
  color: #f5f5f6;
}
.vx-theme-accent {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-theme-primary-offset {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme-light {
  background-color: #f5f5f6;
  color: #111214;
}
.vx-theme-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme-border {
  border: 1px solid #30333a;
}
.vx-theme.vx-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme.vx-accent {
  background-color: #ed145b;
  color: #f5f5f6;
}
.vx-theme.vx-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme.vx-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme.vx-border {
  border: 1px solid #22252a;
}
.vx-theme-accent-border {
  border-color: #9d0d3d;
}
.vx-shadow-1 {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-shadow-2 {
  -webkit-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.vx-shadow-3 {
  -webkit-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
}
.vx-shadow-4 {
  -webkit-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  -moz-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
}
.vx-shadow-5 {
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-inner-shadow-1 {
  -webkit-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-blurred {
  filter: blur(4px);
}
.vx-rounded {
  border-radius: 44rem;
}
.vx-active {
  background-color: #ed145b !important;
}
.vx-bg-active {
  background-color: #ed145b !important;
  color: #ffffff !important;
}
.vx-active-color {
  background-color: #17181b !important;
  color: #ed145b !important;
}
.vx-py {
  padding-top: 8px;
  padding-bottom: 8px;
}
.vx-py-2 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.vx-pb {
  padding-bottom: 8px;
}
.vx-pb-2 {
  padding-bottom: 16px;
}
.vx-pt {
  padding-top: 8px;
}
.vx-pt-2 {
  padding-top: 16px;
}
.vx-my {
  margin-top: 8px;
  margin-bottom: 8px;
}
.vx-my-2 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.vx-mb {
  margin-bottom: 8px;
}
.vx-mb-2 {
  margin-bottom: 16px;
}
.vx-mt {
  margin-top: 8px;
}
.vx-mt-2 {
  margin-top: 16px;
}
.vx-wh-md {
  width: 32px;
  height: 32px;
}
.vx-wh-full {
  width: 100%;
  height: 100%;
}
.vx-jus-center {
  justify-content: center;
}
.vx-flex {
  display: flex;
}
.vx-flex-col {
  display: flex;
  flex-direction: column;
}
.vx-flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.vx-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-w-block {
  width: 44px;
}
@media (min-width: 601px) {
  .vx-w-block {
    width: 38px;
  }
}
.vx-h-block {
  height: 44px;
}
@media (min-width: 601px) {
  .vx-h-block {
    height: 38px;
  }
}
.vx-half-h-block {
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-half-h-block {
    height: 38px / 2;
  }
}
.vx-h-block-sm {
  height: 38px;
}
.vx-wh-block {
  width: 44px;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-wh-block {
    width: 38px;
  }
}
@media (min-width: 601px) {
  .vx-wh-block {
    height: 38px;
  }
}
.vx-block {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
}
.vx-header-block {
  padding: 0px  8px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs-sm {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.sm {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.lg {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block {
  width: 29px;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block .vx-header {
  overflow: hidden;
}
.vx-invisible {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}
.vx-item a {
  color: #f5f5f6;
}
.vx-item.active {
  color: #ed145b;
}
.vx-item.active a {
  color: #ed145b;
}
.vx-item.active svg g path {
  fill: #ed145b;
}
.home-page.page-content {
  background-color: #111214;
}
.navbar .right a {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
}
.vx-layout {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.vx-layout.dark {
  background-color: #111214;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #17181b !important;
  border-bottom: 1px solid #343840;
}
.vx-navbar ul {
  background-color: #17181b !important;
}
.vx-navbar ul li {
  color: #f5f5f6 !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #111214;
  display: flex;
  justify-content: start;
  align-items: center;
  min-width: 140px;
  min-height: 38px;
}
.vx-logo {
  width: max-content;
  height: 64px;
}
.vx-logo.fit {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-content {
  padding: 8rem 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.vx-project-preview .svg-preview {
  margin-top: -12%;
}
.vx-project-preview .image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vx-project-preview .image-preview img {
  height: 200%;
  object-fit: cover;
}
.vx-media-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-media-list .card {
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
}
.vx-media-list .card .card-content {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.vx-media-list .card .vx-svg-content svg {
  height: 100%;
}
.vx-media-list .card .card-content-padding {
  display: none;
}
.vx-media-list .card .card-footer {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  background-color: #ffffffcf;
  -webkit-transform: translate3d(0px, 200%, 0px);
}
.vx-media-list .card .card-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .card-delete {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 8px;
  right: 8px;
  display: none;
  background-color: rgba(255, 255, 255, 0.678);
  border-radius: 32px;
  color: #ed145b;
}
.vx-media-list .card .card-toggle {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  border: 2px solid #ed145b;
  background-color: white;
  position: absolute;
  bottom: 8px;
  left: 8px;
}
.vx-media-list .card.card-selected {
  /*
			.card-delete{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.card-footer{
				-webkit-transform: translate3d(0px, 0px, 0px);
			}
			*/
}
.vx-media-list .card.card-selected .card-toggle {
  background-color: #ed145b;
}
.vx-media-list .card.card-expandable {
  /*height: 100px !important;*/
}
.vx-media-list .card.card-expandable.card-opened .card-content-padding {
  display: block;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content,
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
  /*opacity: 0;*/
}
.vx-media-list .card.card-expandable.card-opened .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  /*opacity: 0;*/
}
.vx-media-list.media-grid {
  justify-content: center;
  flex-wrap: wrap;
  height: unset;
  overflow-y: auto;
  overflow-x: auto;
}
.vx-media-list.media-grid .card {
  margin: 8px 8px !important;
}
.vx-card {
  width: 16rem;
  height: 16rem;
  overflow: hidden;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.vx-card .ivu-card-extra {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 44px;
  min-height: 44px;
  top: 0px;
  left: 0;
  margin-top: 0px;
  right: unset;
  background-color: rgba(255, 255, 255, 0.4);
}
.vx-card .ivu-card-extra a {
  display: flex;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}
.vx-card .ivu-card-body {
  height: 100%;
  width: 100%;
  padding: 0px 16px;
}
.vx-card .ivu-card-body svg {
  height: 100%;
}
.vx-page-load {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #ffffff8a;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99990;
}
.vx-page-load.solid {
  background-color: #ffffff;
}
.vx-page-load.dark {
  background-color: #000000ab;
}
.vx-page-load.dark.solid {
  background-color: #000000;
}
.vx-overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 18, 20, 0.4);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
  pointer-events: none;
}
.vx-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.vgx-artboard {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #292c31;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vgx-artboard canvas {
  position: static;
  left: 0px;
  top: 0px;
  will-change: transform;
  touch-action: none;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard .opt-canvas {
  position: absolute;
  left: -4000px;
  top: -4000px;
  visibility: hidden;
  will-change: transform;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard.blocked {
  filter: blur(22px);
}
canvas[resize] {
  width: 100%;
  height: 100%;
}
.vx-actionbar-container {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 44px;
  height: 100%;
  z-index: 9;
}
.vx-actionbar-container .vx-actionbar-inner {
  width: 44px;
  height: 100%;
  background-color: #17181b;
  border: 1px solid #ebebeb;
}
.vx-actionbar-container .vx-actionbar {
  width: 44px;
  height: auto;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item {
  width: 100%;
  height: 44px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item > i {
  color: #f5f5f6;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item.active > i {
  color: #ed145b;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-subitems {
  border-radius: 20px;
  overflow: hidden;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item-spacer {
  width: 100%;
  height: 44px;
}
.vx-checkers {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.vx-control-group {
  margin: 8px 0rem;
}
.vx-flex-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: static;
  margin: 8px 0px;
}
.vx-flex-group.wrap {
  flex-wrap: wrap;
}
.vx-flex-group.vertical,
.vx-flex-group.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vx-option-group {
  display: flex;
  justify-content: end;
  align-items: center;
}
.vx-gradient-none {
  background-color: #cfcfcf;
}
.vx-gradient-linear {
  background: linear-gradient(0deg, #141414 0%, #cfcfcf 100%);
}
.vx-gradient-radial {
  background: radial-gradient(circle, #141414 0%, #cfcfcf 100%);
}
.vx-fa-linear-gradient::before {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#22252a));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #30333a;
  border-radius: 2px;
  font-size: 22px;
}
.active .vx-fa-linear-gradient::before {
  -webkit-background-clip: unset;
  border-color: #ed145b;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ed145b));
}
.vx-header {
  display: flex;
  justify-content: space-between;
  height: 44px;
  align-items: center;
  margin: 0px 0px 0px 0px;
}
.vx-header h2 {
  margin: 0px 0px;
  color: #f5f5f6;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #f5f5f6;
}
.vx-header.bordered {
  border-bottom: 1px solid #17181b;
}
.vx-input-block {
  display: flex;
  flex-direction: column;
  padding: 4px 2px;
  position: relative;
  margin: 0px 1px;
  width: 100%;
}
.vx-input-block label {
  font-size: 16px;
  padding: 2px 0px 2px 0px;
  color: #f5f5f6;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #17181b;
  color: #f5f5f6;
  border: 1px solid #343840;
  border-radius: 8px;
  min-height: 26px;
  border-width: 0px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #f5f5f6;
}
.vx-input-block.vx-with-label .vx-badge {
  top: 30px;
}
.vx-input-block.vx-with-trigger .vx-input-trigger {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 44px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f5f5f6;
}
.vx-input-block.vx-with-trigger input {
  padding: 8px 4px 8px 32px;
}
.vx-hexpad {
  position: relative;
}
.vx-hexpad .vx-placeholder {
  height: 38px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999999999;
  color: #8d8d8d;
  padding: 0px 15px;
  line-height: 38px;
}
.vx-list {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}
.vx-list .vx-list-item .vx-row {
  width: 100%;
  height: 44px;
  padding: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-top: 1px solid #2e3037;
}
.vx-list .vx-list-item .vx-row .vx-col {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-list .vx-list-item .vx-dropdown .dropdown-toggle {
  color: #f5f5f6;
}
.vx-list .vx-list-item.active > .vx-row:not(first-child) {
  border-top: 0px !important;
}
.vx-list .vx-list-item.active > .vx-row {
  background-color: #ed145b !important;
}
.vx-list .vx-list-item.active > .vx-row > .vx-dropdown .dropdown-toggle {
  color: #17181b;
}
.vx-layers .vx-list .vx-list-item .vx-row {
  padding: 1px;
}
.vx-layers .vx-layer-button {
  width: 32px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-layer-list.vx-list .segmented button {
  border-width: 0px;
}
.vx-layer-list.vx-list .vx-row {
  background-color: rgba(23, 24, 27, 0.1);
}
.vx-layer-list.vx-list .vgx-label {
  min-width: 25%;
}
.vx-layer-list.vx-list .vx-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: linear-gradient(45deg, #aaaaaa 25%, transparent 25%), linear-gradient(-45deg, #aaaaaa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #aaaaaa 75%), linear-gradient(-45deg, transparent 75%, #aaaaaa 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #dddddd;
}
.vx-layer-list.vx-list .vx-thumbnail svg {
  width: 22px;
  height: 22px;
}
.vx-layer-list.vx-list .vx-list-item .vx-list-item {
  padding-left: 8px;
}
/*
.vx-layers{
	min-height: 400px;
}
*/
.vx-layers > .vx-list.vx-layer-list:first-child > ul:first-child > li:first-child > .vx-row:first-child {
  border-top: 1px solid #000000;
}
.vx-home .page-content {
  background-color: #111214;
}
.vx-page .page-content {
  padding-top: 46px;
}
.vx-page-body {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.vx-panel {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  height: auto;
  position: absolute;
  z-index: 99930;
}
.vx-panel.vx-full {
  height: 100%;
}
.vx-panel-outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 4px 4px;
}
.vx-panel-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}
.vx-panel-inner .vx-panel-content {
  display: block;
  width: 100%;
}
.vx-panel .vx-tabs {
  display: none;
  position: absolute;
  height: 44px;
  bottom: 6px;
  width: 100%;
  left: 0px;
  padding: 0px 4px;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.vx-panel .vx-tabs .button {
  border-radius: 0px !important;
  background-color: transparent;
  text-overflow: unset;
  min-width: 100px;
  min-height: 32px;
}
.vx-panel .vx-tabs .button.button-active {
  border-bottom: 2px solid #ed145b;
  color: #ed145b;
}
.vx-select-list {
  display: flex;
  flex-direction: column;
  height: 32px;
  width: 100%;
}
.vx-select-list .vx-select-list-header {
  position: relative;
}
.vx-select-list .vx-select-list-header a {
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border: 1px solid #f5f5f6;
  border-radius: 8px;
  padding-left: 8px;
}
.vx-select-list .vx-select-list-header .vx-select-list-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 32px;
  width: 32px;
}
.vx-trigger-input:not(.floating) {
  width: 100%;
  margin: 4px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input:not(.floating) a {
  width: 100%;
  min-height: 28px;
  height: 38px;
  overflow: hidden;
}
.vx-trigger-input:not(.floating).vx-trigger-block-icon a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.vx-trigger-doc-icon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input.floating {
  position: absolute;
  right: 0px;
  top: -8px;
}
.vx-trigger-button {
  min-width: 44px;
  min-height: 44px/2;
  margin: 8px 0rem;
  display: flex;
}
.vx-icon {
  pointer-events: none;
}
.vx-icon i {
  pointer-events: none;
}
.vx-link {
  min-width: 44px;
  min-height: 44px;
}
.vx-trigger-input.floating .vx-link {
  width: 32px;
  height: 32px;
}
.vx-trigger-input .vx-doc-icon svg g path:first-child {
  fill: #ffffff;
}
.vx-trigger-input .vx-doc-icon svg path {
  stroke: #f5f5f6;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #f5f5f6;
  fill: #f5f5f6;
}
.vx-trigger-input.active .vx-doc-icon svg g path:first-child {
  fill: #ed145b;
}
.vx-trigger-input.active .vx-doc-icon svg path {
  stroke: #ed145b;
}
.vx-trigger-input.active .button {
  background-color: #ed145b !important;
}
.gui-svg-icon svg {
  width: 28px;
  fill: #f5f5f6;
}
.active .gui-svg-icon svg {
  fill: #ed145b;
}
.vx-shadow-offset-input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0px solid #30333a;
}
.vx-shadow-offset-input .vx-shadow-box {
  width: 90%;
  height: 8.5rem;
  border-radius: 4px;
}
@media (min-width: 601px) {
  .vx-shadow-offset-input .vx-shadow-box {
    width: 90%;
    height: 8.5rem;
    border-radius: 4px;
  }
}
.dot-box-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid white;
  background-color: #ed145b !important;
}
.dot-box-handle.handle-1 {
  background-color: #111214 !important;
}
.dot-box-handle.handle-2 {
  background-color: #ed145b !important;
}
.dot-box-indicator {
  background-color: #020202;
  opacity: 0.5;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 20px;
  left: 50px;
  top: 50px;
}
.vx-swatch {
  position: relative;
  overflow: hidden;
}
.vx-swatch.button-swatch {
  width: 32px;
  height: 32px;
  border-radius: 44rem;
}
.vx-swatch .checkers {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: white;
  border-radius: 44rem;
}
.vx-swatch .fill {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 44rem;
}
.vx-text-window .list ul:before {
  display: none;
}
.vx-text-window .list ul {
  background-color: transparent !important;
}
.vx-text-window .list ul:after {
  display: none;
}
.vx-text-window .item-title {
  color: black;
}
.vx-text-window textarea {
  color: black;
}
.vx-text-window textarea::placeholder {
  color: gray;
}
.vx-interface {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.vx-interface.blocked {
  filter: blur(12px);
}
.vx-popover {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99950;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background-color: #00000030;
}
.vx-popover .vx-popover-dialog {
  position: fixed;
  left: 0px;
  top: 0px;
}
.vx-popover.opened {
  opacity: 1;
  pointer-events: all;
}
.vx-popover-dialog .vx-keypad {
  width: 240px;
}
.vx-popover-list {
  width: 240px;
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-popover-list .vx-touchable {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-popover-list .vx-touchable .vx-label {
  min-width: 132px;
}
.vx-popover-list .vx-touchable svg g path {
  fill: white;
  stroke: white;
}
.vx-popover-list.sm {
  width: 50px;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-popover-dialog .vx-keypad {
    width: 320px;
    height: 300px;
  }
}
.vx-dropover {
  width: 100%;
}
.vx-dropover .vx-dropover-dialog {
  position: absolute;
  z-index: 250;
}
.vx-dropover .vx-dropover-dialog.vx-fixed {
  position: fixed;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  left: 0px;
  top: 0px;
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
  align-items: center;
  padding: 0px 0px;
  margin: 0px 0px;
  display: flex;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
    height: 38px;
  }
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable .vx-icon {
  min-width: 24px;
  text-align: center;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable span {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
}
.vx-dropover.sm .vx-dropover-dialog {
  min-width: 44px;
}
.vx-dropover.sm .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-dropover.md .vx-dropover-dialog {
  min-width: 100px;
}
.vx-dropover.lg .vx-dropover-dialog {
  min-width: 200px;
}
.vx-dropover.select-list .vx-dropover-dialog-transition {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-dropover .vx-hidden-input {
  display: none;
}
.vx-keypad {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 240px;
}
.vx-keypad .vx-keypad-result {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #343840;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #17181b;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters.vx-keypad-col-3 .vx-touchable {
  width: 100%;
  flex: 1 0 33%;
  font-size: 18px;
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-keypad .vx-keypad-characters .vx-touchable.vx-box.lg {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .show-lg,
  .hide-sm {
    display: none !important;
  }
}
.vx-press {
  outline: none !important;
}
.vx-press.vx-box {
  width: 44px;
  height: 44px;
}
.vx-press.vx-box.lg {
  width: 50px;
  height: 50px;
}
.vx-press.active {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-text {
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-touch {
  outline: none !important;
}
.vx-touch.vx-box {
  width: 44px;
  height: 44px;
}
.vx-box {
  width: 44px;
  height: 44px;
}
.vx-touchable-select-block {
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
}
@media (min-width: 601px) {
  .vx-touchable-select-block {
    height: 38px;
  }
}
.vx-touchable-select-block.vx-theme-bordered {
  border-color: #343840;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #777c87;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-touchable-select-block .vx-touchable-select-block-icon {
    height: 38px;
  }
}
.vx-button {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}
@media (min-width: 601px) {
  .vx-button {
    height: 38px;
  }
}
.vx-button.vx-theme-bordered {
  border-color: #343840;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-input {
  /*.vx-inner-shadow-1;*/
  flex-direction: column;
}
.vx-input .vx-input-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  padding-left: 2px;
  height: 44px;
  /*
		&::after {
			content: "";
			width: 100%;
			height: 0.6px;
			background-color: #3e3e3e;
			bottom: -2px;
			position: absolute;
			left: 0%;
		}
		*/
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input {
  width: 100%;
  display: flex;
  flex: 1;
  height: 44px;
  background-color: transparent !important;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper input {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input[readonly] {
  pointer-events: none;
}
.vx-input .vx-input-wrapper .vx-input-after {
  display: flex;
  justify-content: flex-end;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
  width: 22px;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
  width: 38px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
  width: 100%;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
    height: 38px / 2;
  }
}
.vx-input.focused {
  border: 1px solid;
  border-color: #ed145b !important;
}
.vx-widget {
  width: 100%;
  display: flex;
  margin: 4px 0px;
  padding: 0px 4px;
  border: 0px solid;
  border-radius: 8px;
  box-sizing: border-box;
}
.vx-widget .vx-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0px;
  /*text-align: left;*/
  font-size: 14px;
}
.vx-widget .vx-label span {
  white-space: nowrap;
}
.vx-widget .vx-label .vx-touchable {
  min-width: 18px;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
}
.vx-widget .vx-object {
  display: flex;
  width: 100%;
}
.vx-flex-group .vx-widget:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.vx-flex-group .vx-widget:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.vx-widget-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-active .vx-widget-theme-primary,
.vx-theme-accent .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-primary.vx-theme-bordered,
.vx-theme-accent .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-active .vx-widget-theme-primary a,
.vx-theme-accent .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-active .vx-widget-theme-text,
.vx-theme-accent .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-light-text,
.vx-theme-accent .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-theme-light .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
/*
.vx-touchable-select-block{
	&.active {
		outline: none !important;
		.vx-theme-accent;
	}
}
*/
a.vx-touchable .vx-icon {
  font-size: 1.8rem;
}
a.vx-touchable {
  user-select: none;
  border-radius: 8px;
}
a.vx-touchable.active {
  outline: none !important;
  color: #ed145b;
}
a.vx-touchable.vx-highlight.active {
  outline: none !important;
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-text {
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.active a.vx-touchable {
  outline: none !important;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-input-stepper {
  display: none !important;
}
.vx-interface .fab svg path {
  stroke: white !important;
}
.vx-fab-panel {
  position: fixed;
  bottom: 22px;
  left: 52px;
  height: 56px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-fab-button {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: 48px;
  height: 48px;
  font-size: 16px;
  border-radius: 4px;
  margin-right: 8px;
  background-color: #17181b;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-fab-button.active {
  background-color: #ed145b;
}
.vx-textsheet textarea {
  font-size: 4rem;
  height: 100%;
  line-height: 7rem;
}
.vx-scrollbar-none {
  scrollbar-gutter: stable;
  scrollbar-width: none;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-fab-panel {
    bottom: 52px;
    left: 52px;
  }
  .vx-fab-panel.away-sm {
    display: none;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-fab-panel {
    bottom: 22px;
    left: 52px;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
.toast {
  /*
	left: 48px !important;
	top: 48px !important;
	*/
  width: 300px !important;
  top: 52px !important;
  left: 50% !important;
  margin-left: -150px !important;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toast .toast-content {
  border-radius: 4px;
  background-color: #ed145b;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .color-picker.color-picker-inline .color-picker-module-wheel {
    width: 60%;
    display: flex;
    align-self: center;
  }
}
@media (min-width: 601px) {
  .vx-page .list:not(.padded) ul {
    background: transparent;
  }
  .vx-page .list:not(.padded) ul::before {
    background-color: transparent;
  }
  .vx-page .list:not(.padded) ul::after {
    height: 1px;
    background-color: #f5f5f6;
  }
  .vx-page .list:not(.padded) ul li .item-content {
    /*padding-left: 0px !important;*/
  }
  .vx-page .list:not(.padded) ul li .item-inner {
    padding-left: 0px !important;
  }
  .vx-page .list:not(.padded) ul li .item-inner::after {
    height: 1px;
    background-color: #f5f5f6;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-actionbar-container {
    width: 100%;
    height: 44px;
    overflow-x: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
  .vx-actionbar-container .vx-actionbar-inner {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar .gui-action-bar-item-spacer {
    display: none;
  }
  .vx-actionbar-container.submenu {
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-item {
    width: 44px;
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-subitems {
    position: absolute;
    top: 52px;
    left: -4rem;
    height: 44px;
    display: flex;
    flex-direction: row;
    background-color: #17181b;
  }
  .vx-actionbar-container .vx-actionbar-subitems .vx-actionbar-item {
    padding: 0px 12px;
    width: 44px;
  }
}
@media (min-width: 601px) {
  .vx-actionbar-inner {
    width: 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .submenu {
    width: 100%;
  }
  .vx-actionbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 27px;
  }
  .vx-actionbar-item {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-subitems {
    position: absolute;
    top: 0px;
    left: 52px;
    display: flex;
    flex-direction: column;
    width: 44px;
    background-color: #17181b;
  }
  .vx-actionbar-subitems .vx-actionbar-item {
    padding: 8px 0px;
  }
}
/*
@media @device-sm {
	.vgx-artboard{
		.vx-transition;
		&.lifted-sm{
			top: -100px;
		}
		&.lifted-md{
			top: -150px;
		}
		&.lifted-lg{
			top: -200px;
		}
	}
}
*/
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    left: 0px;
    bottom: 44px;
    min-height: 140px;
    height: auto;
    width: 100%;
    /*-webkit-transform: translate3d(0px, 160%, 0px);*/
  }
  .vx-panel.vx-full {
    padding-top: 88px;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0px, 0%, 0px);*/
  }
  .vx-panel.lg {
    height: 400px;
  }
  .vx-panel.hastabs {
    padding-bottom: 44px;
  }
  .vx-panel.hastabs .vx-tabs {
    display: flex;
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-panel {
    right: 44px;
    top: 0px;
    min-height: 200px;
    width: 280px;
    /*-webkit-transform: translate3d(160%, 0px, 0px);*/
    padding-top: 44px;
  }
  .vx-panel .vx-panel-outer {
    padding: 4px 8px;
  }
  .vx-panel.vx-full-lg {
    height: 100%;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0%, 0px, 0px);*/
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    height: 100%;
  }
  .vx-header h2 {
    font-size: 1.4rem;
    font-weight: bolder;
  }
  .vx-dropover-dialog {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
}
.tooltip-fade {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events: none;
}
.tooltip-fade.tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}
.canvas-modern {
  background: #111214;
  color: #f5f5f6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.canvas-modern *,
.canvas-modern *::before,
.canvas-modern *::after {
  box-sizing: border-box;
}
.canvas-modern .vgx-artboard {
  background-color: #292c31;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0) 62%);
}
.canvas-modern .vx-panel {
  background: rgba(24, 25, 29, 0.985) !important;
  border-left: 1px solid #30333a;
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.28);
  color: #f5f5f6;
}
.canvas-modern .vx-panel-outer {
  padding: 10px 12px 12px;
}
.canvas-modern .vx-panel-inner {
  min-height: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.canvas-modern .vx-panel-content {
  padding-top: 8px;
}
.canvas-modern .vx-header {
  height: 42px;
  min-height: 42px;
  border-bottom: 1px solid #30333a;
}
.canvas-modern .vx-header h2 {
  margin: 0;
  color: #f5f5f6;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em;
}
.canvas-modern .vx-header a {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: #9da1aa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-modern .vx-header a:hover {
  background: #272a30;
  color: #ffffff;
}
.canvas-modern .vx-control-group {
  margin: 8px 0;
}
.canvas-modern .vx-flex-group {
  gap: 8px;
  margin: 8px 0;
}
.canvas-modern .vx-widget {
  margin: 5px 0;
  padding: 0 8px;
  border-radius: 8px;
}
.canvas-modern .vx-widget .vx-label {
  min-height: 24px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.canvas-modern .vx-input-block {
  margin: 0;
  padding: 5px 0;
}
.canvas-modern .vx-input-block label {
  padding: 0 0 6px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
}
.canvas-modern .vx-input-block input,
.canvas-modern .vx-input-block textarea,
.canvas-modern .vx-input-block .vx-text-input {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-input-block input {
  min-height: 36px;
  padding: 0 10px;
}
.canvas-modern .vx-textarea-input {
  padding: 0;
}
.canvas-modern .vx-textarea-input > label {
  padding: 0 0 7px;
}
.canvas-modern .vx-textarea-input .vx-text-input {
  width: 100%;
  min-height: 92px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 10px;
  background: #1b1d21;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-textarea-input .vx-text-input:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  background: #202228;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.canvas-modern .vx-textarea-input .vx-textarea-control,
.canvas-modern .vx-textarea-input .vx-textarea-control.input {
  width: 100%;
  height: 90px;
  min-height: 90px;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.canvas-modern .vx-textarea-input textarea {
  width: 100% !important;
  height: 90px !important;
  min-height: 90px !important;
  display: block;
  padding: 12px 13px !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  resize: none !important;
  background: transparent !important;
  color: #f5f5f6;
  font-size: 12px;
  line-height: 1.5;
  caret-color: #ed145b;
}
.canvas-modern .vx-textarea-input textarea::placeholder {
  color: #6f747e;
}
.canvas-modern .vx-input,
.canvas-modern .vx-touchable-select-block,
.canvas-modern .vx-button {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a !important;
  box-shadow: none;
  color: #f5f5f6;
}
.canvas-modern .vx-input {
  min-height: 38px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-input .vx-input-wrapper {
  min-height: 36px;
  padding-left: 9px;
}
.canvas-modern .vx-input.focused {
  border-color: #ed145b !important;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.13);
  background: #272a30 !important;
}
.canvas-modern .vx-trigger-input:not(.floating) {
  margin: 5px 0;
}
.canvas-modern .vx-trigger-input:not(.floating) a {
  min-height: 38px;
  height: 38px;
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #d5d7dc;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.canvas-modern .vx-trigger-input:not(.floating) a:hover {
  border-color: #474b54;
  background: #292c31;
  color: #ffffff;
}
.canvas-modern .vx-trigger-input:not(.floating).active a {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.14);
  color: #ff7aa6;
}
.canvas-modern .vx-select-list .vx-select-list-header a {
  height: 38px;
  border-color: #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-list .vx-list-item .vx-row,
.canvas-modern .vx-layer-list.vx-list .vx-row {
  min-height: 40px;
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid #2c2f35;
  background: transparent;
  transition: background-color 120ms ease;
}
.canvas-modern .vx-list .vx-list-item .vx-row:hover,
.canvas-modern .vx-layer-list.vx-list .vx-row:hover {
  background: #22252a;
}
.canvas-modern .vx-layer-list.vx-list .vx-list-item.active > .vx-row {
  background: rgba(237, 20, 91, 0.14) !important;
  box-shadow: inset 2px 0 #ed145b;
  color: #ffffff;
}
.canvas-modern .segmented,
.canvas-modern .ai-segmented-control {
  gap: 3px;
  padding: 3px;
  border: 1px solid #30333a;
  border-radius: 9px;
  background: #151619;
}
.canvas-modern .segmented .button,
.canvas-modern .ai-segmented-control .button {
  height: 34px;
  border: 0 !important;
  border-radius: 6px !important;
  color: #969aa4;
  font-size: 11px;
  font-weight: 700;
}
.canvas-modern .segmented .button.button-active,
.canvas-modern .ai-segmented-control .button.button-active,
.canvas-modern .segmented .button.active,
.canvas-modern .ai-segmented-control .button.active {
  background: #2a2d33;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}
.canvas-modern .ai-segmented-control {
  width: 100%;
  min-width: 0;
  display: flex;
  align-self: stretch;
}
.canvas-modern .ai-segmented-control .button {
  min-width: 104px;
  flex: 1 1 50%;
  padding: 0 14px;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar {
  background: #343840;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar-active,
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-knob {
  background: #ed145b;
}
.canvas-modern .vx-tabs {
  gap: 4px;
  padding: 5px 8px;
  border-top: 1px solid #30333a;
  background: #17181b;
}
.canvas-modern .vx-tabs .button.button-active {
  border-bottom-color: #ed145b;
  color: #ff7aa6;
}
.canvas-modern:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background: #292c31;
  color: #ffffff;
}
.canvas-modern ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.canvas-modern ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #4a4e57;
  background-clip: padding-box;
}
.canvas-modern ::-webkit-scrollbar-track {
  background: transparent;
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .canvas-modern .vx-panel {
    width: 312px;
  }
}
.ai-prompt-studio {
  --ai-accent: #ed145b;
  --ai-accent-soft: rgba(237, 20, 91, 0.14);
  --ai-bg: #111214;
  --ai-surface: #1b1d21;
  --ai-surface-raised: #22252a;
  --ai-border: #30333a;
  --ai-text: #f5f5f6;
  --ai-muted: #989ca6;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ai-bg);
  color: var(--ai-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ai-prompt-studio *,
.ai-prompt-studio *::before,
.ai-prompt-studio *::after {
  box-sizing: border-box;
}
.ai-prompt-studio__main {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 238px 1fr;
  gap: 22px;
  padding: 22px;
}
.ai-prompt-preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border);
  border-radius: 12px;
  background: var(--ai-surface);
}
.ai-prompt-preview__media {
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background-color: #0c0d0f;
  background-image: linear-gradient(45deg, #181a1e 25%, transparent 25%), linear-gradient(-45deg, #181a1e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #181a1e 75%), linear-gradient(-45deg, transparent 75%, #181a1e 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.ai-prompt-preview__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ai-prompt-preview__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(13, 14, 16, 0.78);
  color: #e9eaed;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.ai-prompt-preview__details {
  padding: 14px;
  border-top: 1px solid var(--ai-border);
}
.ai-prompt-preview__details p,
.ai-prompt-preview__details strong,
.ai-prompt-preview__details span {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-prompt-preview__details p {
  color: #ff7aa6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.ai-prompt-preview__details strong {
  margin-top: 4px;
  font-size: 13px;
}
.ai-prompt-preview__details span {
  margin-top: 3px;
  color: var(--ai-muted);
  font-size: 10px;
}
.ai-prompt-composer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.ai-prompt-composer__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ai-prompt-composer__heading p,
.ai-prompt-composer__heading h2 {
  margin: 0;
}
.ai-prompt-composer__heading p {
  color: #ff7aa6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.ai-prompt-composer__heading h2 {
  margin-top: 5px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.ai-prompt-cost {
  min-width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--ai-border);
  border-radius: 7px;
  background: var(--ai-surface);
  color: #c8cbd2;
  font-size: 10px;
  font-weight: 700;
}
.ai-control-label {
  display: block;
  margin: 0 0 6px;
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ai-ratio-selector {
  width: 100%;
  position: relative;
}
.ai-ratio-selector__trigger,
.ai-control {
  width: 100%;
  height: 40px;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 8px;
  outline: none;
  background: var(--ai-surface-raised, #22252a);
  color: var(--ai-text, #f5f5f6);
  font: inherit;
}
.ai-ratio-selector__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.ai-ratio-selector__trigger:hover,
.ai-ratio-selector__trigger[aria-expanded="true"] {
  border-color: #4b4f58;
  background: #272a30;
}
.ai-ratio-selector__selection {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 650;
}
.ai-ratio-selector__icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-ratio-selector__shape {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.ai-ratio-selector__chevron {
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
}
.ai-ratio-selector__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 99980;
  max-height: 196px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #3a3e46;
  border-radius: 10px;
  background: #191b1f;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
}
.ai-ratio-selector__option {
  min-width: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #b9bcc4;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.ai-ratio-selector__option:hover {
  background: #25282e;
  color: #ffffff;
}
.ai-ratio-selector__option.active {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.12);
  color: #ff7aa6;
}
.ai-prompt-field {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ai-prompt-field__surface {
  min-height: 150px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 10px;
  background: var(--ai-surface, #1b1d21);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ai-prompt-field__surface:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.ai-prompt-field__surface textarea {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ai-text, #f5f5f6);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
}
.ai-prompt-field__surface textarea::placeholder {
  color: #666b75;
}
.ai-prompt-field__hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--ai-border, #30333a);
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  line-height: 1.45;
}
.ai-prompt-field__hint i {
  margin-top: 1px;
  color: #ff7aa6;
}
.ai-prompt-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 22px;
  border-top: 1px solid var(--ai-border);
  background: #151619;
}
.ai-prompt-footer .button {
  height: 40px;
  min-width: 126px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ai-prompt-footer .button-outline {
  border-color: #3b3f47;
  color: #d6d8dd;
}
.ai-prompt-footer .button-fill {
  border-color: #ed145b;
  background: #ed145b;
  box-shadow: 0 8px 20px rgba(237, 20, 91, 0.22);
  color: #ffffff;
}
.ai-prompt-credit-button coin-icon {
  width: 18px;
  height: 18px;
}
.ai-prompt-credit-button b {
  color: #ffffff;
}
.ai-prompt-generate-button {
  min-width: 154px !important;
}
.ai-prompt-studio--panel {
  background: transparent;
}
.ai-generator-panel__main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 72px;
}
.canvas-modern .ai-generator-panel .ai-generator-panel__main {
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #454a54 transparent;
  scrollbar-width: thin;
}
.canvas-modern .ai-generator-panel .ai-segmented-control {
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  align-items: stretch;
  padding: 3px;
  margin: 0;
}
.canvas-modern .ai-generator-panel .ai-segmented-control .button {
  height: 34px;
  min-height: 34px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
.canvas-modern .ai-generator-panel .ai-model-field,
.canvas-modern .ai-generator-panel .ai-ratio-selector {
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field {
  min-height: auto;
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field__surface {
  height: 96px;
  min-height: 96px;
  flex: 0 0 96px;
}
.canvas-modern .ai-generator-panel .ai-style-grid {
  min-height: auto;
  flex: 0 0 auto;
  overflow: visible;
}
.ai-form-field {
  width: 100%;
  position: relative;
}
.ai-control {
  padding: 0 34px 0 10px;
  font-size: 11px;
}
.ai-style-grid {
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 10px;
  padding: 2px 2px 12px;
  overflow-x: hidden;
  overflow-y: auto;
}
.ai-style-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.ai-style-card__preview {
  width: 100%;
  height: 116px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 9px;
  background: #22252a;
  transition: border-color 140ms ease, transform 140ms ease;
}
.ai-style-card__preview:hover {
  border-color: #555a64;
  transform: translateY(-1px);
}
.ai-style-card__preview.active {
  border-color: #ed145b;
  box-shadow: 0 0 0 2px rgba(237, 20, 91, 0.13);
}
.ai-style-card__preview .vx-img,
.ai-style-card__preview .vx-img img {
  width: 100% !important;
  height: 100% !important;
}
.ai-style-card__preview img {
  object-fit: cover;
}
.ai-style-card__name {
  width: 100%;
  display: block;
  margin: 6px 0 2px;
  overflow: hidden;
  color: #d8dae0;
  font-size: 10px;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-generator-state {
  width: 100%;
  min-height: 160px;
  flex: 1 1 auto;
  padding: 14px;
  border: 1px solid #30333a;
  border-radius: 10px;
  background: #1b1d21;
}
.ai-generator-state--offline {
  color: #c4c7ce;
}
.ai-generator-state__media {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #ffffff;
}
.ai-prompt-footer--panel {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: 62px !important;
  min-height: 62px;
  padding: 10px 0;
  background: #17181b !important;
}
.ai-prompt-footer--panel .toolbar-inner {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 0;
}
.ai-prompt-footer--panel .button {
  min-width: 0;
  flex: 1 1 50%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .ai-prompt-studio__main {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    overflow-y: auto;
  }
  .ai-prompt-preview {
    min-height: 180px;
  }
  .ai-prompt-preview__details {
    display: none;
  }
  .ai-prompt-footer {
    min-height: 64px;
    padding: 10px 14px;
  }
  .ai-prompt-footer .button {
    min-width: 0;
    flex: 1 1 50%;
  }
}
.vgx-control-palette .vgx-color-palette-container {
  max-height: 200px;
  overflow-y: auto;
}
.vgx-color-menu {
  position: absolute;
  top: 56px;
  right: 0px;
  width: 90px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.vgx-color-menu.static {
  position: static;
}
.vgx-color-icon .vx-swatch {
  overflow: visible !important;
}
.vgx-color-icon .vx-swatch .checkers {
  border-radius: 44rem;
}
.vgx-color-icon .vgx-color-icon-swatch {
  border-radius: 44rem;
}
.vgx-color-icon-swatch {
  border: 2px solid #111214;
}
.vgx-touch-pen-icon {
  /*
	width: 32px;
	height: 32px;
	background-color: white;
	border: 2px solid @color-dark;
	border-radius: @border-radius;
	*/
  color: #f5f5f6;
}
.vgx-touch-pen-icon.active {
  /*background-color: @color-dark;*/
  color: #ed145b;
}
.vgx-header {
  width: 100%;
  text-align: center;
  margin: 24px 0px 0px 0px;
  border-top: 1px solid grey;
  padding: 16px 0px;
}
.vgx-header .vgx-title {
  padding: 0px 0.75rem;
  font-size: 1.2rem;
}
.vgx-color-icon-inner {
  width: 32px;
  height: 32px;
  position: relative;
  border-radius: 44rem;
}
.vgx-color-icon-inner .vgx-color-icon-swatch {
  width: 32px;
  height: 32px;
  top: 0px;
  left: 0px;
  position: absolute;
}
.vgx-color-icon-inner .vgx-stroke-color-icon-inner {
  position: absolute;
  width: calc(32px / 1.5);
  height: calc(32px / 1.5);
  left: 50%;
  top: 50%;
  margin-left: -10.66666667px;
  margin-top: -10.66666667px;
  background-color: #f5f5f6;
  border: 2px solid #f5f5f6;
  border-radius: 44rem;
}
.vgx-shadow-color-icon .checkers {
  right: 7%;
  bottom: 7%;
  top: unset;
  left: unset;
  width: calc(32px / 1.5) !important;
  height: calc(32px / 1.5) !important;
  border-radius: 44rem;
}
.vgx-shadow-color-icon .vgx-color-icon-swatch {
  width: calc(32px / 1.5);
  height: calc(32px / 1.5);
  right: 7%;
  bottom: 7%;
  top: unset;
  left: unset;
  border-radius: 44rem;
}
.vgx-shadow-color-icon .vgx-shadow-color-icon-inner {
  width: 21.33333333px;
  height: 21.33333333px;
  top: 7%;
  left: 7%;
  position: absolute;
  background-color: #f5f5f6;
  border: 2px solid #17181b;
  border-radius: 44rem;
}
.vgx-color-icon.active .vgx-color-icon-swatch {
  border: 2px solid #ed145b;
}
.vgx-color-selector {
  margin: 4px 0px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #f5f5f6;
}
.vgx-color-selector div {
  width: 100%;
  height: 100%;
}
@media (min-width: 601px) {
  .vgx-color-selector {
    margin: 12px 0px;
  }
}
.vgx-color-palette-container {
  width: 100%;
  display: flex;
  justify-content: center;
  min-height: 32px;
}
.vgx-color-palette-container .vgx-color-palette {
  width: auto;
  min-width: 164px;
  height: auto;
  min-height: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding: 4px 4px;
  box-sizing: border-box;
  border-radius: 22px;
  /*background-color: @theme-color;*/
  min-height: 32px;
}
.vgx-color-palette-container .vgx-color-palette .vgx-color-palette-item {
  width: 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 28px;
  border-radius: 44rem;
  margin: 2px 4px;
  position: relative;
  box-sizing: border-box;
  font-size: 10px;
  overflow: hidden;
  border: 2px solid #202020;
  /*
			&:first-child{
				.border-radius-left(4px)
			}
			&:last-child{
				.border-radius-right(4px)
			}
			*/
}
.vgx-color-palette-container .vgx-color-palette .vgx-color-palette-item .checkers {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  position: absolute;
  margin: 0px;
}
.vgx-color-palette-container .vgx-color-palette .vgx-color-palette-item .color-swatch {
  position: absolute;
  border-radius: 0px;
  width: 100%;
  height: 100%;
}
.vgx-color-palette-container .vgx-color-palette .vgx-color-palette-item .active-marker {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: relative;
  background-color: #000000;
  border: 1px solid white;
  opacity: 0.4;
}
.vgx-color-palette-container .vgx-color-palette .vgx-color-palette-item.active .color-swatch {
  /*border: 2px solid @theme-color-offset;*/
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vgx-control-palette .vgx-color-palette-container .vgx-color-palette {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 75%;
    justify-content: space-between;
  }
  .vgx-control-palette .vgx-color-palette-container .vgx-color-palette .vgx-color-palette-item {
    min-width: 28px;
  }
  .vgx-control-palette .vgx-color-selector {
    margin: 0px 12px;
    width: 50%;
  }
}
@media (min-width: 601px) {
  .vgx-control-palette .vgx-color-palette-container {
    margin-bottom: 1rem;
  }
}
.vgx-color-palette-sheet-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}
.vgx-color-palette-sheet-container .vgx-color-palette {
  min-width: 140px;
  min-height: 54px;
  align-items: center;
  justify-content: center;
}
.vgx-color-palette-sheet-container .color-palette-sheet-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 44px;
  width: 100%;
  margin-top: 12px;
}
.vgx-color-palette-sheet-container .color-palette-sheet-header {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 2px solid #171717;
}
.vgx-color-palette-sheet-container .color-palette-sheet-header .user-color-palette {
  display: flex;
  justify-content: flex-start;
}
.vgx-color-palette-sheet-container .color-palette-sheet-header .user-color-palette .vgx-color-palette-container {
  width: auto;
  justify-content: flex-start;
}
.vgx-color-palette-sheet-container .color-palette-sheet-header .user-color-palette .vgx-color-palette-container .vgx-color-palette {
  min-width: 154px;
  justify-content: start;
}
.vgx-color-palette-sheet-container .color-palette-sheet-header .color-palette-picker {
  width: 100%;
  padding: 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}
.vgx-color-palette-sheet-container .color-palette-sheet-header .color-palette-picker .vx-input-block {
  width: 75%;
}
.vgx-color-palette-sheet-container .color-palette-libraries {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.vgx-color-palette-sheet-container .user-color-palette {
  max-width: 300px;
}
.vgx-color-palette-sheet-container .user-color-palette-library,
.vgx-color-palette-sheet-container .color-palette-library {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.vgx-color-palette-sheet-container .user-color-palette-library .color-palette-item-container,
.vgx-color-palette-sheet-container .color-palette-library .color-palette-item-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vgx-color-palette-sheet-container .user-color-palette-library .color-palette-item-container .vgx-color-palette,
.vgx-color-palette-sheet-container .color-palette-library .color-palette-item-container .vgx-color-palette {
  width: 144px;
  height: auto;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  margin: 0.75rem 0rem 0rem 0rem;
}
.vgx-color-picker {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}
.vgx-color-picker .segmented {
  width: 75%;
}
.vgx-color-picker .color-picker-element-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 69%;
  align-self: center;
}
.vgx-color-picker .color-picker-element-container .color-picker-element {
  width: 100%;
}
.vgx-color-picker .color-picker-element-container.wheel .color-picker-element {
  width: 100%;
}
@media (min-width: 601px) {
  .vgx-color-menu {
    top: 52px;
    left: 48px;
    right: unset;
  }
  .vgx-color-palette-sheet-container .color-palette-sheet-header .color-palette-picker {
    width: 100%%;
  }
  .vgx-color-palette-sheet-container {
    flex-direction: row;
  }
  .vgx-color-palette-sheet-container .color-palette-sheet-header {
    justify-content: flex-start;
    border-width: 0px;
  }
  .vgx-color-palette-sheet-container .color-palette-libraries {
    background-color: #111214;
  }
  .vgx-color-palette-sheet-container .color-palette-libraries .vgx-header {
    color: white;
  }
  .vgx-header {
    border-width: 0px;
  }
}

/*****/
/**/
/*gray with green accent*******
@color-primary: #2D2D2D;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #C5D961;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Vintage Cuban Sheet Music*******
@color-primary: #333333;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F6FBF4;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FB9A63;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Quiet Cry*******
@color-primary: #1C1D21;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #31353D;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #92CDCF;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Good as Gold*******
@color-primary: #2E2E2C;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #FFFFF0;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FFCC33;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Jonathan*******
@color-primary: #595952;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #30DFF2;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Smoked Salmon*******
@color-primary: #2E2E28;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #707070;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FF635C;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Web Design*******/
/*pumpkin*******
@color-primary: #262626;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #404040; 
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #f13d25;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*F7 THEME*/
:root {
  --f7-theme-color: #ED145B;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #262626;
  --f7-color-gray: #404040;
  --f7-color-gray-rgb: 64, 64, 64;
  --f7-color-gray-shade: #2e2e2e;
  --f7-color-gray-tint: #585757;
}
/******/
/*
@color-primary: #ffffff;
@color-light: #ffffff;
@color-dark: #202020; //f7 dark theme uses #1c1c1d
@color-secondary: rgb(228, 228, 228);
@color-offset: #202020;
@color-accent: #1b95f8;
*/
/*@toolbar-background-color: fade(@color-primary, @fade);*/
/*****BORDERED THEME****************
@toolbar-size: 44px;
@toolbar-padding: 4px;
@toolbar-outer-size: @toolbar-size + @toolbar-padding + 2px;
@toolbar-border-width: 1px;
@toolbar-border-radius: @rounded;
@toolbar-border-color: @color-offset;
/***********************************/
:root {
  --f7-theme-color: #ed145b;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #151619;
  --f7-color-gray: #30333a;
  --f7-color-gray-rgb: 48, 51, 58;
  --f7-color-gray-shade: #22252a;
  --f7-color-gray-tint: #454951;
}
html {
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}
/*
textarea{
	background-color: @color-primary !important;
	color: @color-offset !important;
    padding: 8px 0px;
    border-radius: 0px;
}
textarea{
	font-size: 36px;
    padding: 4px;
}
textarea::placeholder {
  color: @color-gray-500 !important;
  opacity: 1;
}
textarea:-ms-input-placeholder {
 color: @color-gray-500 !important;
}
textarea::-ms-input-placeholder {
 color: @color-gray-500 !important;
}
a.link{
	color: @color-offset;
}
a.color-dark{
	color: @color-dark;
}
.vx-body{
	width: 100%;
	height: 100%;
}
*/
/*
:root {
	--f7-theme-color: @color-accent;
	--f7-color-orange: @color-accent;
	--f7-color-black: @color-primary;
}
.color-black {
    --f7-theme-color: @color-dark;
    --f7-theme-color-rgb: 0, 0, 0;
    --f7-theme-color-shade: #000000;
    --f7-theme-color-tint: #141414;
}
.list:not(.padded){
	margin: 8px 0px;
}
.vx-page{
	.segmented button{
		border-width: 1px;
		text-overflow: unset;
		.icon{
			font-size: 0.8rem;
		}
	}
	.navbar {
		user-select: none;
		height: 46px;
		background-color: @color-primary !important;
		color: @color-offset;
		a{
			color: @color-offset;
		}
		a:hover{
			color: @color-offset;
		}
		a:active{
			color: @color-offset;
		}
	}

	.list:not(.padded){
		ul{
			background: transparent;
			&::before{
				background-color: transparent;
			}
			&::after{
				height: 1px;
				background-color: @color-offset;
			}
			li{
				.smart-select{
					background-color: @color-primary;
					> .item-content{
						padding-left: 4px;
					}
				}
				.item-inner{
					&::after{
						height: 1px;
						background-color: @color-offset;
					}

				}
			}
		}
	}
}

.navbar .menu-item .menu-item-content i{
	color: @color-offset;
}
.navbar .menu-item .menu-item-content::after {
	display: none;
}
.navbar .menu-inner {
	padding-left: 0px;
	padding-right: 0px;
}
.navbar .menu-item .menu-item-content i {
	font-size: 16px;
}
.navbar .menu-item {
	background-color: transparent;
	width: 2.8rem;
	height: 2.8rem;
}
.navbar .menu-item-dropdown-opened .menu-dropdown {
	background-color: @color-light-gray;
    border-radius: 99px;
}
.navbar .menu-dropdown-content {
	background-color: @color-light;
    top: -8px;
    left: -6px;
    z-index: 2;
    border-radius: 4px;
    width: 200px;
    border: 1px solid #dfdfdf;
    box-shadow: -2px -1px 12px -6px rgba(0, 0, 0, 0.45);
}
.navbar .menu-item.menu-item-dropdown.menu-item-dropdown-opened{
	background-color: @panel-color;
}
.navbar .menu-dropdown-item {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	cursor: pointer;
	color: @color-offset !important;
}
*/
.ivu-poptip-popper {
  min-width: 44px !important;
  /*default: 150px*/
}
.ivu-poptip-rel {
  width: 100%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .hide-sm,
  .show-sm-l,
  .show-lg {
    display: none !important;
  }
}
@media (min-width: 601px) {
  .hide-lg {
    display: none !important;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .hide-sm-l,
  .hide-sm,
  .show-lg {
    display: none !important;
  }
}
.vx-safe-margin-right {
  margin-right: env(safe-area-inset-right);
}
.vx-safe-margin-left {
  margin-left: env(safe-area-inset-left);
}
.vx-safe-margin-bottom {
  margin-bottom: env(safe-area-inset-bottom);
}
.vx-safe-margin-top {
  margin-top: env(safe-area-inset-top);
}
.vx-safe-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.vx-safe-padding-top {
  padding-top: env(safe-area-inset-top);
}
.vx-safe-padding-left {
  padding-left: env(safe-area-inset-left);
}
.vx-safe-padding-right {
  padding-right: env(safe-area-inset-right);
}
.vx-safe-top {
  top: env(safe-area-inset-top);
}
.vx-safe-height {
  height: env(safe-area-inset-top);
}
.vx-safe-width {
  width: env(safe-area-inset-top);
}
.vx-disabled {
  color: #777c87;
}
.vx-color-offset {
  color: #f5f5f6;
}
.vx-color-accent {
  color: #ed145b;
}
.vx-color-primary {
  color: #17181b;
}
.vx-color-light {
  color: #f5f5f6;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #111214;
}
.vx-color-dark-gray {
  color: #0d0e10;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ed145b;
}
.vx-bg-offset {
  background-color: #f5f5f6;
}
.vx-bg-accent {
  background-color: #ed145b;
}
.vx-bg-primary {
  background-color: #17181b;
}
.vx-bg-primary-faded {
  background-color: rgba(23, 24, 27, 0.97);
}
.vx-bg-light {
  background-color: #f5f5f6;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #111214;
}
.vx-bg-dark-gray {
  background-color: #0d0e10;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #f5f5f6;
}
.vx-theme-offset-text {
  color: #f5f5f6;
}
.vx-theme-accent {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-theme-primary-offset {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme-light {
  background-color: #f5f5f6;
  color: #111214;
}
.vx-theme-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme-border {
  border: 1px solid #30333a;
}
.vx-theme.vx-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme.vx-accent {
  background-color: #ed145b;
  color: #f5f5f6;
}
.vx-theme.vx-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme.vx-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme.vx-border {
  border: 1px solid #22252a;
}
.vx-theme-accent-border {
  border-color: #9d0d3d;
}
.vx-shadow-1 {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-shadow-2 {
  -webkit-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.vx-shadow-3 {
  -webkit-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
}
.vx-shadow-4 {
  -webkit-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  -moz-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
}
.vx-shadow-5 {
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-inner-shadow-1 {
  -webkit-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-blurred {
  filter: blur(4px);
}
.vx-rounded {
  border-radius: 44rem;
}
.vx-active {
  background-color: #ed145b !important;
}
.vx-bg-active {
  background-color: #ed145b !important;
  color: #ffffff !important;
}
.vx-active-color {
  background-color: #17181b !important;
  color: #ed145b !important;
}
.vx-py {
  padding-top: 8px;
  padding-bottom: 8px;
}
.vx-py-2 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.vx-pb {
  padding-bottom: 8px;
}
.vx-pb-2 {
  padding-bottom: 16px;
}
.vx-pt {
  padding-top: 8px;
}
.vx-pt-2 {
  padding-top: 16px;
}
.vx-my {
  margin-top: 8px;
  margin-bottom: 8px;
}
.vx-my-2 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.vx-mb {
  margin-bottom: 8px;
}
.vx-mb-2 {
  margin-bottom: 16px;
}
.vx-mt {
  margin-top: 8px;
}
.vx-mt-2 {
  margin-top: 16px;
}
.vx-wh-md {
  width: 32px;
  height: 32px;
}
.vx-wh-full {
  width: 100%;
  height: 100%;
}
.vx-jus-center {
  justify-content: center;
}
.vx-flex {
  display: flex;
}
.vx-flex-col {
  display: flex;
  flex-direction: column;
}
.vx-flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.vx-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-w-block {
  width: 44px;
}
@media (min-width: 601px) {
  .vx-w-block {
    width: 38px;
  }
}
.vx-h-block {
  height: 44px;
}
@media (min-width: 601px) {
  .vx-h-block {
    height: 38px;
  }
}
.vx-half-h-block {
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-half-h-block {
    height: 38px / 2;
  }
}
.vx-h-block-sm {
  height: 38px;
}
.vx-wh-block {
  width: 44px;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-wh-block {
    width: 38px;
  }
}
@media (min-width: 601px) {
  .vx-wh-block {
    height: 38px;
  }
}
.vx-block {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
}
.vx-header-block {
  padding: 0px  8px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs-sm {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.sm {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.lg {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block {
  width: 29px;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block .vx-header {
  overflow: hidden;
}
.vx-invisible {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}
.vx-item a {
  color: #f5f5f6;
}
.vx-item.active {
  color: #ed145b;
}
.vx-item.active a {
  color: #ed145b;
}
.vx-item.active svg g path {
  fill: #ed145b;
}
.home-page.page-content {
  background-color: #111214;
}
.navbar .right a {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
}
.vx-layout {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.vx-layout.dark {
  background-color: #111214;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #17181b !important;
  border-bottom: 1px solid #343840;
}
.vx-navbar ul {
  background-color: #17181b !important;
}
.vx-navbar ul li {
  color: #f5f5f6 !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #111214;
  display: flex;
  justify-content: start;
  align-items: center;
  min-width: 140px;
  min-height: 38px;
}
.vx-logo {
  width: max-content;
  height: 64px;
}
.vx-logo.fit {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-content {
  padding: 8rem 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.vx-project-preview .svg-preview {
  margin-top: -12%;
}
.vx-project-preview .image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vx-project-preview .image-preview img {
  height: 200%;
  object-fit: cover;
}
.vx-media-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-media-list .card {
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
}
.vx-media-list .card .card-content {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.vx-media-list .card .vx-svg-content svg {
  height: 100%;
}
.vx-media-list .card .card-content-padding {
  display: none;
}
.vx-media-list .card .card-footer {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  background-color: #ffffffcf;
  -webkit-transform: translate3d(0px, 200%, 0px);
}
.vx-media-list .card .card-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .card-delete {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 8px;
  right: 8px;
  display: none;
  background-color: rgba(255, 255, 255, 0.678);
  border-radius: 32px;
  color: #ed145b;
}
.vx-media-list .card .card-toggle {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  border: 2px solid #ed145b;
  background-color: white;
  position: absolute;
  bottom: 8px;
  left: 8px;
}
.vx-media-list .card.card-selected {
  /*
			.card-delete{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.card-footer{
				-webkit-transform: translate3d(0px, 0px, 0px);
			}
			*/
}
.vx-media-list .card.card-selected .card-toggle {
  background-color: #ed145b;
}
.vx-media-list .card.card-expandable {
  /*height: 100px !important;*/
}
.vx-media-list .card.card-expandable.card-opened .card-content-padding {
  display: block;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content,
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
  /*opacity: 0;*/
}
.vx-media-list .card.card-expandable.card-opened .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  /*opacity: 0;*/
}
.vx-media-list.media-grid {
  justify-content: center;
  flex-wrap: wrap;
  height: unset;
  overflow-y: auto;
  overflow-x: auto;
}
.vx-media-list.media-grid .card {
  margin: 8px 8px !important;
}
.vx-card {
  width: 16rem;
  height: 16rem;
  overflow: hidden;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.vx-card .ivu-card-extra {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 44px;
  min-height: 44px;
  top: 0px;
  left: 0;
  margin-top: 0px;
  right: unset;
  background-color: rgba(255, 255, 255, 0.4);
}
.vx-card .ivu-card-extra a {
  display: flex;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}
.vx-card .ivu-card-body {
  height: 100%;
  width: 100%;
  padding: 0px 16px;
}
.vx-card .ivu-card-body svg {
  height: 100%;
}
.vx-page-load {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #ffffff8a;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99990;
}
.vx-page-load.solid {
  background-color: #ffffff;
}
.vx-page-load.dark {
  background-color: #000000ab;
}
.vx-page-load.dark.solid {
  background-color: #000000;
}
.vx-overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 18, 20, 0.4);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
  pointer-events: none;
}
.vx-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.vgx-artboard {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #292c31;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vgx-artboard canvas {
  position: static;
  left: 0px;
  top: 0px;
  will-change: transform;
  touch-action: none;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard .opt-canvas {
  position: absolute;
  left: -4000px;
  top: -4000px;
  visibility: hidden;
  will-change: transform;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard.blocked {
  filter: blur(22px);
}
canvas[resize] {
  width: 100%;
  height: 100%;
}
.vx-actionbar-container {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 44px;
  height: 100%;
  z-index: 9;
}
.vx-actionbar-container .vx-actionbar-inner {
  width: 44px;
  height: 100%;
  background-color: #17181b;
  border: 1px solid #ebebeb;
}
.vx-actionbar-container .vx-actionbar {
  width: 44px;
  height: auto;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item {
  width: 100%;
  height: 44px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item > i {
  color: #f5f5f6;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item.active > i {
  color: #ed145b;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-subitems {
  border-radius: 20px;
  overflow: hidden;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item-spacer {
  width: 100%;
  height: 44px;
}
.vx-checkers {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.vx-control-group {
  margin: 8px 0rem;
}
.vx-flex-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: static;
  margin: 8px 0px;
}
.vx-flex-group.wrap {
  flex-wrap: wrap;
}
.vx-flex-group.vertical,
.vx-flex-group.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vx-option-group {
  display: flex;
  justify-content: end;
  align-items: center;
}
.vx-gradient-none {
  background-color: #cfcfcf;
}
.vx-gradient-linear {
  background: linear-gradient(0deg, #141414 0%, #cfcfcf 100%);
}
.vx-gradient-radial {
  background: radial-gradient(circle, #141414 0%, #cfcfcf 100%);
}
.vx-fa-linear-gradient::before {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#22252a));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #30333a;
  border-radius: 2px;
  font-size: 22px;
}
.active .vx-fa-linear-gradient::before {
  -webkit-background-clip: unset;
  border-color: #ed145b;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ed145b));
}
.vx-header {
  display: flex;
  justify-content: space-between;
  height: 44px;
  align-items: center;
  margin: 0px 0px 0px 0px;
}
.vx-header h2 {
  margin: 0px 0px;
  color: #f5f5f6;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #f5f5f6;
}
.vx-header.bordered {
  border-bottom: 1px solid #17181b;
}
.vx-input-block {
  display: flex;
  flex-direction: column;
  padding: 4px 2px;
  position: relative;
  margin: 0px 1px;
  width: 100%;
}
.vx-input-block label {
  font-size: 16px;
  padding: 2px 0px 2px 0px;
  color: #f5f5f6;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #17181b;
  color: #f5f5f6;
  border: 1px solid #343840;
  border-radius: 8px;
  min-height: 26px;
  border-width: 0px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #f5f5f6;
}
.vx-input-block.vx-with-label .vx-badge {
  top: 30px;
}
.vx-input-block.vx-with-trigger .vx-input-trigger {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 44px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f5f5f6;
}
.vx-input-block.vx-with-trigger input {
  padding: 8px 4px 8px 32px;
}
.vx-hexpad {
  position: relative;
}
.vx-hexpad .vx-placeholder {
  height: 38px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999999999;
  color: #8d8d8d;
  padding: 0px 15px;
  line-height: 38px;
}
.vx-list {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}
.vx-list .vx-list-item .vx-row {
  width: 100%;
  height: 44px;
  padding: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-top: 1px solid #2e3037;
}
.vx-list .vx-list-item .vx-row .vx-col {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-list .vx-list-item .vx-dropdown .dropdown-toggle {
  color: #f5f5f6;
}
.vx-list .vx-list-item.active > .vx-row:not(first-child) {
  border-top: 0px !important;
}
.vx-list .vx-list-item.active > .vx-row {
  background-color: #ed145b !important;
}
.vx-list .vx-list-item.active > .vx-row > .vx-dropdown .dropdown-toggle {
  color: #17181b;
}
.vx-layers .vx-list .vx-list-item .vx-row {
  padding: 1px;
}
.vx-layers .vx-layer-button {
  width: 32px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-layer-list.vx-list .segmented button {
  border-width: 0px;
}
.vx-layer-list.vx-list .vx-row {
  background-color: rgba(23, 24, 27, 0.1);
}
.vx-layer-list.vx-list .vgx-label {
  min-width: 25%;
}
.vx-layer-list.vx-list .vx-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: linear-gradient(45deg, #aaaaaa 25%, transparent 25%), linear-gradient(-45deg, #aaaaaa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #aaaaaa 75%), linear-gradient(-45deg, transparent 75%, #aaaaaa 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #dddddd;
}
.vx-layer-list.vx-list .vx-thumbnail svg {
  width: 22px;
  height: 22px;
}
.vx-layer-list.vx-list .vx-list-item .vx-list-item {
  padding-left: 8px;
}
/*
.vx-layers{
	min-height: 400px;
}
*/
.vx-layers > .vx-list.vx-layer-list:first-child > ul:first-child > li:first-child > .vx-row:first-child {
  border-top: 1px solid #000000;
}
.vx-home .page-content {
  background-color: #111214;
}
.vx-page .page-content {
  padding-top: 46px;
}
.vx-page-body {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.vx-panel {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  height: auto;
  position: absolute;
  z-index: 99930;
}
.vx-panel.vx-full {
  height: 100%;
}
.vx-panel-outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 4px 4px;
}
.vx-panel-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}
.vx-panel-inner .vx-panel-content {
  display: block;
  width: 100%;
}
.vx-panel .vx-tabs {
  display: none;
  position: absolute;
  height: 44px;
  bottom: 6px;
  width: 100%;
  left: 0px;
  padding: 0px 4px;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.vx-panel .vx-tabs .button {
  border-radius: 0px !important;
  background-color: transparent;
  text-overflow: unset;
  min-width: 100px;
  min-height: 32px;
}
.vx-panel .vx-tabs .button.button-active {
  border-bottom: 2px solid #ed145b;
  color: #ed145b;
}
.vx-select-list {
  display: flex;
  flex-direction: column;
  height: 32px;
  width: 100%;
}
.vx-select-list .vx-select-list-header {
  position: relative;
}
.vx-select-list .vx-select-list-header a {
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border: 1px solid #f5f5f6;
  border-radius: 8px;
  padding-left: 8px;
}
.vx-select-list .vx-select-list-header .vx-select-list-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 32px;
  width: 32px;
}
.vx-trigger-input:not(.floating) {
  width: 100%;
  margin: 4px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input:not(.floating) a {
  width: 100%;
  min-height: 28px;
  height: 38px;
  overflow: hidden;
}
.vx-trigger-input:not(.floating).vx-trigger-block-icon a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.vx-trigger-doc-icon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input.floating {
  position: absolute;
  right: 0px;
  top: -8px;
}
.vx-trigger-button {
  min-width: 44px;
  min-height: 44px/2;
  margin: 8px 0rem;
  display: flex;
}
.vx-icon {
  pointer-events: none;
}
.vx-icon i {
  pointer-events: none;
}
.vx-link {
  min-width: 44px;
  min-height: 44px;
}
.vx-trigger-input.floating .vx-link {
  width: 32px;
  height: 32px;
}
.vx-trigger-input .vx-doc-icon svg g path:first-child {
  fill: #ffffff;
}
.vx-trigger-input .vx-doc-icon svg path {
  stroke: #f5f5f6;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #f5f5f6;
  fill: #f5f5f6;
}
.vx-trigger-input.active .vx-doc-icon svg g path:first-child {
  fill: #ed145b;
}
.vx-trigger-input.active .vx-doc-icon svg path {
  stroke: #ed145b;
}
.vx-trigger-input.active .button {
  background-color: #ed145b !important;
}
.gui-svg-icon svg {
  width: 28px;
  fill: #f5f5f6;
}
.active .gui-svg-icon svg {
  fill: #ed145b;
}
.vx-shadow-offset-input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0px solid #30333a;
}
.vx-shadow-offset-input .vx-shadow-box {
  width: 90%;
  height: 8.5rem;
  border-radius: 4px;
}
@media (min-width: 601px) {
  .vx-shadow-offset-input .vx-shadow-box {
    width: 90%;
    height: 8.5rem;
    border-radius: 4px;
  }
}
.dot-box-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid white;
  background-color: #ed145b !important;
}
.dot-box-handle.handle-1 {
  background-color: #111214 !important;
}
.dot-box-handle.handle-2 {
  background-color: #ed145b !important;
}
.dot-box-indicator {
  background-color: #020202;
  opacity: 0.5;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 20px;
  left: 50px;
  top: 50px;
}
.vx-swatch {
  position: relative;
  overflow: hidden;
}
.vx-swatch.button-swatch {
  width: 32px;
  height: 32px;
  border-radius: 44rem;
}
.vx-swatch .checkers {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: white;
  border-radius: 44rem;
}
.vx-swatch .fill {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 44rem;
}
.vx-text-window .list ul:before {
  display: none;
}
.vx-text-window .list ul {
  background-color: transparent !important;
}
.vx-text-window .list ul:after {
  display: none;
}
.vx-text-window .item-title {
  color: black;
}
.vx-text-window textarea {
  color: black;
}
.vx-text-window textarea::placeholder {
  color: gray;
}
.vx-interface {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.vx-interface.blocked {
  filter: blur(12px);
}
.vx-popover {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99950;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background-color: #00000030;
}
.vx-popover .vx-popover-dialog {
  position: fixed;
  left: 0px;
  top: 0px;
}
.vx-popover.opened {
  opacity: 1;
  pointer-events: all;
}
.vx-popover-dialog .vx-keypad {
  width: 240px;
}
.vx-popover-list {
  width: 240px;
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-popover-list .vx-touchable {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-popover-list .vx-touchable .vx-label {
  min-width: 132px;
}
.vx-popover-list .vx-touchable svg g path {
  fill: white;
  stroke: white;
}
.vx-popover-list.sm {
  width: 50px;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-popover-dialog .vx-keypad {
    width: 320px;
    height: 300px;
  }
}
.vx-dropover {
  width: 100%;
}
.vx-dropover .vx-dropover-dialog {
  position: absolute;
  z-index: 250;
}
.vx-dropover .vx-dropover-dialog.vx-fixed {
  position: fixed;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  left: 0px;
  top: 0px;
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
  align-items: center;
  padding: 0px 0px;
  margin: 0px 0px;
  display: flex;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
    height: 38px;
  }
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable .vx-icon {
  min-width: 24px;
  text-align: center;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable span {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
}
.vx-dropover.sm .vx-dropover-dialog {
  min-width: 44px;
}
.vx-dropover.sm .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-dropover.md .vx-dropover-dialog {
  min-width: 100px;
}
.vx-dropover.lg .vx-dropover-dialog {
  min-width: 200px;
}
.vx-dropover.select-list .vx-dropover-dialog-transition {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-dropover .vx-hidden-input {
  display: none;
}
.vx-keypad {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 240px;
}
.vx-keypad .vx-keypad-result {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #343840;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #17181b;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters.vx-keypad-col-3 .vx-touchable {
  width: 100%;
  flex: 1 0 33%;
  font-size: 18px;
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-keypad .vx-keypad-characters .vx-touchable.vx-box.lg {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .show-lg,
  .hide-sm {
    display: none !important;
  }
}
.vx-press {
  outline: none !important;
}
.vx-press.vx-box {
  width: 44px;
  height: 44px;
}
.vx-press.vx-box.lg {
  width: 50px;
  height: 50px;
}
.vx-press.active {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-text {
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-touch {
  outline: none !important;
}
.vx-touch.vx-box {
  width: 44px;
  height: 44px;
}
.vx-box {
  width: 44px;
  height: 44px;
}
.vx-touchable-select-block {
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
}
@media (min-width: 601px) {
  .vx-touchable-select-block {
    height: 38px;
  }
}
.vx-touchable-select-block.vx-theme-bordered {
  border-color: #343840;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #777c87;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-touchable-select-block .vx-touchable-select-block-icon {
    height: 38px;
  }
}
.vx-button {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}
@media (min-width: 601px) {
  .vx-button {
    height: 38px;
  }
}
.vx-button.vx-theme-bordered {
  border-color: #343840;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-input {
  /*.vx-inner-shadow-1;*/
  flex-direction: column;
}
.vx-input .vx-input-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  padding-left: 2px;
  height: 44px;
  /*
		&::after {
			content: "";
			width: 100%;
			height: 0.6px;
			background-color: #3e3e3e;
			bottom: -2px;
			position: absolute;
			left: 0%;
		}
		*/
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input {
  width: 100%;
  display: flex;
  flex: 1;
  height: 44px;
  background-color: transparent !important;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper input {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input[readonly] {
  pointer-events: none;
}
.vx-input .vx-input-wrapper .vx-input-after {
  display: flex;
  justify-content: flex-end;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
  width: 22px;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
  width: 38px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
  width: 100%;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
    height: 38px / 2;
  }
}
.vx-input.focused {
  border: 1px solid;
  border-color: #ed145b !important;
}
.vx-widget {
  width: 100%;
  display: flex;
  margin: 4px 0px;
  padding: 0px 4px;
  border: 0px solid;
  border-radius: 8px;
  box-sizing: border-box;
}
.vx-widget .vx-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0px;
  /*text-align: left;*/
  font-size: 14px;
}
.vx-widget .vx-label span {
  white-space: nowrap;
}
.vx-widget .vx-label .vx-touchable {
  min-width: 18px;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
}
.vx-widget .vx-object {
  display: flex;
  width: 100%;
}
.vx-flex-group .vx-widget:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.vx-flex-group .vx-widget:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.vx-widget-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-active .vx-widget-theme-primary,
.vx-theme-accent .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-primary.vx-theme-bordered,
.vx-theme-accent .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-active .vx-widget-theme-primary a,
.vx-theme-accent .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-active .vx-widget-theme-text,
.vx-theme-accent .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-light-text,
.vx-theme-accent .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-theme-light .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
/*
.vx-touchable-select-block{
	&.active {
		outline: none !important;
		.vx-theme-accent;
	}
}
*/
a.vx-touchable .vx-icon {
  font-size: 1.8rem;
}
a.vx-touchable {
  user-select: none;
  border-radius: 8px;
}
a.vx-touchable.active {
  outline: none !important;
  color: #ed145b;
}
a.vx-touchable.vx-highlight.active {
  outline: none !important;
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-text {
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.active a.vx-touchable {
  outline: none !important;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-input-stepper {
  display: none !important;
}
.vx-interface .fab svg path {
  stroke: white !important;
}
.vx-fab-panel {
  position: fixed;
  bottom: 22px;
  left: 52px;
  height: 56px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-fab-button {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: 48px;
  height: 48px;
  font-size: 16px;
  border-radius: 4px;
  margin-right: 8px;
  background-color: #17181b;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-fab-button.active {
  background-color: #ed145b;
}
.vx-textsheet textarea {
  font-size: 4rem;
  height: 100%;
  line-height: 7rem;
}
.vx-scrollbar-none {
  scrollbar-gutter: stable;
  scrollbar-width: none;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-fab-panel {
    bottom: 52px;
    left: 52px;
  }
  .vx-fab-panel.away-sm {
    display: none;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-fab-panel {
    bottom: 22px;
    left: 52px;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
.toast {
  /*
	left: 48px !important;
	top: 48px !important;
	*/
  width: 300px !important;
  top: 52px !important;
  left: 50% !important;
  margin-left: -150px !important;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toast .toast-content {
  border-radius: 4px;
  background-color: #ed145b;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .color-picker.color-picker-inline .color-picker-module-wheel {
    width: 60%;
    display: flex;
    align-self: center;
  }
}
@media (min-width: 601px) {
  .vx-page .list:not(.padded) ul {
    background: transparent;
  }
  .vx-page .list:not(.padded) ul::before {
    background-color: transparent;
  }
  .vx-page .list:not(.padded) ul::after {
    height: 1px;
    background-color: #f5f5f6;
  }
  .vx-page .list:not(.padded) ul li .item-content {
    /*padding-left: 0px !important;*/
  }
  .vx-page .list:not(.padded) ul li .item-inner {
    padding-left: 0px !important;
  }
  .vx-page .list:not(.padded) ul li .item-inner::after {
    height: 1px;
    background-color: #f5f5f6;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-actionbar-container {
    width: 100%;
    height: 44px;
    overflow-x: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
  .vx-actionbar-container .vx-actionbar-inner {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar .gui-action-bar-item-spacer {
    display: none;
  }
  .vx-actionbar-container.submenu {
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-item {
    width: 44px;
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-subitems {
    position: absolute;
    top: 52px;
    left: -4rem;
    height: 44px;
    display: flex;
    flex-direction: row;
    background-color: #17181b;
  }
  .vx-actionbar-container .vx-actionbar-subitems .vx-actionbar-item {
    padding: 0px 12px;
    width: 44px;
  }
}
@media (min-width: 601px) {
  .vx-actionbar-inner {
    width: 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .submenu {
    width: 100%;
  }
  .vx-actionbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 27px;
  }
  .vx-actionbar-item {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-subitems {
    position: absolute;
    top: 0px;
    left: 52px;
    display: flex;
    flex-direction: column;
    width: 44px;
    background-color: #17181b;
  }
  .vx-actionbar-subitems .vx-actionbar-item {
    padding: 8px 0px;
  }
}
/*
@media @device-sm {
	.vgx-artboard{
		.vx-transition;
		&.lifted-sm{
			top: -100px;
		}
		&.lifted-md{
			top: -150px;
		}
		&.lifted-lg{
			top: -200px;
		}
	}
}
*/
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    left: 0px;
    bottom: 44px;
    min-height: 140px;
    height: auto;
    width: 100%;
    /*-webkit-transform: translate3d(0px, 160%, 0px);*/
  }
  .vx-panel.vx-full {
    padding-top: 88px;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0px, 0%, 0px);*/
  }
  .vx-panel.lg {
    height: 400px;
  }
  .vx-panel.hastabs {
    padding-bottom: 44px;
  }
  .vx-panel.hastabs .vx-tabs {
    display: flex;
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-panel {
    right: 44px;
    top: 0px;
    min-height: 200px;
    width: 280px;
    /*-webkit-transform: translate3d(160%, 0px, 0px);*/
    padding-top: 44px;
  }
  .vx-panel .vx-panel-outer {
    padding: 4px 8px;
  }
  .vx-panel.vx-full-lg {
    height: 100%;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0%, 0px, 0px);*/
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    height: 100%;
  }
  .vx-header h2 {
    font-size: 1.4rem;
    font-weight: bolder;
  }
  .vx-dropover-dialog {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
}
.tooltip-fade {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events: none;
}
.tooltip-fade.tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}
.canvas-modern {
  background: #111214;
  color: #f5f5f6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.canvas-modern *,
.canvas-modern *::before,
.canvas-modern *::after {
  box-sizing: border-box;
}
.canvas-modern .vgx-artboard {
  background-color: #292c31;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0) 62%);
}
.canvas-modern .vx-panel {
  background: rgba(24, 25, 29, 0.985) !important;
  border-left: 1px solid #30333a;
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.28);
  color: #f5f5f6;
}
.canvas-modern .vx-panel-outer {
  padding: 10px 12px 12px;
}
.canvas-modern .vx-panel-inner {
  min-height: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.canvas-modern .vx-panel-content {
  padding-top: 8px;
}
.canvas-modern .vx-header {
  height: 42px;
  min-height: 42px;
  border-bottom: 1px solid #30333a;
}
.canvas-modern .vx-header h2 {
  margin: 0;
  color: #f5f5f6;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em;
}
.canvas-modern .vx-header a {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: #9da1aa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-modern .vx-header a:hover {
  background: #272a30;
  color: #ffffff;
}
.canvas-modern .vx-control-group {
  margin: 8px 0;
}
.canvas-modern .vx-flex-group {
  gap: 8px;
  margin: 8px 0;
}
.canvas-modern .vx-widget {
  margin: 5px 0;
  padding: 0 8px;
  border-radius: 8px;
}
.canvas-modern .vx-widget .vx-label {
  min-height: 24px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.canvas-modern .vx-input-block {
  margin: 0;
  padding: 5px 0;
}
.canvas-modern .vx-input-block label {
  padding: 0 0 6px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
}
.canvas-modern .vx-input-block input,
.canvas-modern .vx-input-block textarea,
.canvas-modern .vx-input-block .vx-text-input {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-input-block input {
  min-height: 36px;
  padding: 0 10px;
}
.canvas-modern .vx-textarea-input {
  padding: 0;
}
.canvas-modern .vx-textarea-input > label {
  padding: 0 0 7px;
}
.canvas-modern .vx-textarea-input .vx-text-input {
  width: 100%;
  min-height: 92px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 10px;
  background: #1b1d21;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-textarea-input .vx-text-input:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  background: #202228;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.canvas-modern .vx-textarea-input .vx-textarea-control,
.canvas-modern .vx-textarea-input .vx-textarea-control.input {
  width: 100%;
  height: 90px;
  min-height: 90px;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.canvas-modern .vx-textarea-input textarea {
  width: 100% !important;
  height: 90px !important;
  min-height: 90px !important;
  display: block;
  padding: 12px 13px !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  resize: none !important;
  background: transparent !important;
  color: #f5f5f6;
  font-size: 12px;
  line-height: 1.5;
  caret-color: #ed145b;
}
.canvas-modern .vx-textarea-input textarea::placeholder {
  color: #6f747e;
}
.canvas-modern .vx-input,
.canvas-modern .vx-touchable-select-block,
.canvas-modern .vx-button {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a !important;
  box-shadow: none;
  color: #f5f5f6;
}
.canvas-modern .vx-input {
  min-height: 38px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-input .vx-input-wrapper {
  min-height: 36px;
  padding-left: 9px;
}
.canvas-modern .vx-input.focused {
  border-color: #ed145b !important;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.13);
  background: #272a30 !important;
}
.canvas-modern .vx-trigger-input:not(.floating) {
  margin: 5px 0;
}
.canvas-modern .vx-trigger-input:not(.floating) a {
  min-height: 38px;
  height: 38px;
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #d5d7dc;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.canvas-modern .vx-trigger-input:not(.floating) a:hover {
  border-color: #474b54;
  background: #292c31;
  color: #ffffff;
}
.canvas-modern .vx-trigger-input:not(.floating).active a {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.14);
  color: #ff7aa6;
}
.canvas-modern .vx-select-list .vx-select-list-header a {
  height: 38px;
  border-color: #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-list .vx-list-item .vx-row,
.canvas-modern .vx-layer-list.vx-list .vx-row {
  min-height: 40px;
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid #2c2f35;
  background: transparent;
  transition: background-color 120ms ease;
}
.canvas-modern .vx-list .vx-list-item .vx-row:hover,
.canvas-modern .vx-layer-list.vx-list .vx-row:hover {
  background: #22252a;
}
.canvas-modern .vx-layer-list.vx-list .vx-list-item.active > .vx-row {
  background: rgba(237, 20, 91, 0.14) !important;
  box-shadow: inset 2px 0 #ed145b;
  color: #ffffff;
}
.canvas-modern .segmented,
.canvas-modern .ai-segmented-control {
  gap: 3px;
  padding: 3px;
  border: 1px solid #30333a;
  border-radius: 9px;
  background: #151619;
}
.canvas-modern .segmented .button,
.canvas-modern .ai-segmented-control .button {
  height: 34px;
  border: 0 !important;
  border-radius: 6px !important;
  color: #969aa4;
  font-size: 11px;
  font-weight: 700;
}
.canvas-modern .segmented .button.button-active,
.canvas-modern .ai-segmented-control .button.button-active,
.canvas-modern .segmented .button.active,
.canvas-modern .ai-segmented-control .button.active {
  background: #2a2d33;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}
.canvas-modern .ai-segmented-control {
  width: 100%;
  min-width: 0;
  display: flex;
  align-self: stretch;
}
.canvas-modern .ai-segmented-control .button {
  min-width: 104px;
  flex: 1 1 50%;
  padding: 0 14px;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar {
  background: #343840;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar-active,
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-knob {
  background: #ed145b;
}
.canvas-modern .vx-tabs {
  gap: 4px;
  padding: 5px 8px;
  border-top: 1px solid #30333a;
  background: #17181b;
}
.canvas-modern .vx-tabs .button.button-active {
  border-bottom-color: #ed145b;
  color: #ff7aa6;
}
.canvas-modern:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background: #292c31;
  color: #ffffff;
}
.canvas-modern ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.canvas-modern ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #4a4e57;
  background-clip: padding-box;
}
.canvas-modern ::-webkit-scrollbar-track {
  background: transparent;
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .canvas-modern .vx-panel {
    width: 312px;
  }
}
.ai-prompt-studio {
  --ai-accent: #ed145b;
  --ai-accent-soft: rgba(237, 20, 91, 0.14);
  --ai-bg: #111214;
  --ai-surface: #1b1d21;
  --ai-surface-raised: #22252a;
  --ai-border: #30333a;
  --ai-text: #f5f5f6;
  --ai-muted: #989ca6;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ai-bg);
  color: var(--ai-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ai-prompt-studio *,
.ai-prompt-studio *::before,
.ai-prompt-studio *::after {
  box-sizing: border-box;
}
.ai-prompt-studio__main {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 238px 1fr;
  gap: 22px;
  padding: 22px;
}
.ai-prompt-preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border);
  border-radius: 12px;
  background: var(--ai-surface);
}
.ai-prompt-preview__media {
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background-color: #0c0d0f;
  background-image: linear-gradient(45deg, #181a1e 25%, transparent 25%), linear-gradient(-45deg, #181a1e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #181a1e 75%), linear-gradient(-45deg, transparent 75%, #181a1e 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.ai-prompt-preview__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ai-prompt-preview__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(13, 14, 16, 0.78);
  color: #e9eaed;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.ai-prompt-preview__details {
  padding: 14px;
  border-top: 1px solid var(--ai-border);
}
.ai-prompt-preview__details p,
.ai-prompt-preview__details strong,
.ai-prompt-preview__details span {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-prompt-preview__details p {
  color: #ff7aa6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.ai-prompt-preview__details strong {
  margin-top: 4px;
  font-size: 13px;
}
.ai-prompt-preview__details span {
  margin-top: 3px;
  color: var(--ai-muted);
  font-size: 10px;
}
.ai-prompt-composer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.ai-prompt-composer__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ai-prompt-composer__heading p,
.ai-prompt-composer__heading h2 {
  margin: 0;
}
.ai-prompt-composer__heading p {
  color: #ff7aa6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.ai-prompt-composer__heading h2 {
  margin-top: 5px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.ai-prompt-cost {
  min-width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--ai-border);
  border-radius: 7px;
  background: var(--ai-surface);
  color: #c8cbd2;
  font-size: 10px;
  font-weight: 700;
}
.ai-control-label {
  display: block;
  margin: 0 0 6px;
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ai-ratio-selector {
  width: 100%;
  position: relative;
}
.ai-ratio-selector__trigger,
.ai-control {
  width: 100%;
  height: 40px;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 8px;
  outline: none;
  background: var(--ai-surface-raised, #22252a);
  color: var(--ai-text, #f5f5f6);
  font: inherit;
}
.ai-ratio-selector__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.ai-ratio-selector__trigger:hover,
.ai-ratio-selector__trigger[aria-expanded="true"] {
  border-color: #4b4f58;
  background: #272a30;
}
.ai-ratio-selector__selection {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 650;
}
.ai-ratio-selector__icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-ratio-selector__shape {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.ai-ratio-selector__chevron {
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
}
.ai-ratio-selector__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 99980;
  max-height: 196px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #3a3e46;
  border-radius: 10px;
  background: #191b1f;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
}
.ai-ratio-selector__option {
  min-width: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #b9bcc4;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.ai-ratio-selector__option:hover {
  background: #25282e;
  color: #ffffff;
}
.ai-ratio-selector__option.active {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.12);
  color: #ff7aa6;
}
.ai-prompt-field {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ai-prompt-field__surface {
  min-height: 150px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 10px;
  background: var(--ai-surface, #1b1d21);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ai-prompt-field__surface:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.ai-prompt-field__surface textarea {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ai-text, #f5f5f6);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
}
.ai-prompt-field__surface textarea::placeholder {
  color: #666b75;
}
.ai-prompt-field__hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--ai-border, #30333a);
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  line-height: 1.45;
}
.ai-prompt-field__hint i {
  margin-top: 1px;
  color: #ff7aa6;
}
.ai-prompt-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 22px;
  border-top: 1px solid var(--ai-border);
  background: #151619;
}
.ai-prompt-footer .button {
  height: 40px;
  min-width: 126px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ai-prompt-footer .button-outline {
  border-color: #3b3f47;
  color: #d6d8dd;
}
.ai-prompt-footer .button-fill {
  border-color: #ed145b;
  background: #ed145b;
  box-shadow: 0 8px 20px rgba(237, 20, 91, 0.22);
  color: #ffffff;
}
.ai-prompt-credit-button coin-icon {
  width: 18px;
  height: 18px;
}
.ai-prompt-credit-button b {
  color: #ffffff;
}
.ai-prompt-generate-button {
  min-width: 154px !important;
}
.ai-prompt-studio--panel {
  background: transparent;
}
.ai-generator-panel__main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 72px;
}
.canvas-modern .ai-generator-panel .ai-generator-panel__main {
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #454a54 transparent;
  scrollbar-width: thin;
}
.canvas-modern .ai-generator-panel .ai-segmented-control {
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  align-items: stretch;
  padding: 3px;
  margin: 0;
}
.canvas-modern .ai-generator-panel .ai-segmented-control .button {
  height: 34px;
  min-height: 34px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
.canvas-modern .ai-generator-panel .ai-model-field,
.canvas-modern .ai-generator-panel .ai-ratio-selector {
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field {
  min-height: auto;
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field__surface {
  height: 96px;
  min-height: 96px;
  flex: 0 0 96px;
}
.canvas-modern .ai-generator-panel .ai-style-grid {
  min-height: auto;
  flex: 0 0 auto;
  overflow: visible;
}
.ai-form-field {
  width: 100%;
  position: relative;
}
.ai-control {
  padding: 0 34px 0 10px;
  font-size: 11px;
}
.ai-style-grid {
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 10px;
  padding: 2px 2px 12px;
  overflow-x: hidden;
  overflow-y: auto;
}
.ai-style-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.ai-style-card__preview {
  width: 100%;
  height: 116px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 9px;
  background: #22252a;
  transition: border-color 140ms ease, transform 140ms ease;
}
.ai-style-card__preview:hover {
  border-color: #555a64;
  transform: translateY(-1px);
}
.ai-style-card__preview.active {
  border-color: #ed145b;
  box-shadow: 0 0 0 2px rgba(237, 20, 91, 0.13);
}
.ai-style-card__preview .vx-img,
.ai-style-card__preview .vx-img img {
  width: 100% !important;
  height: 100% !important;
}
.ai-style-card__preview img {
  object-fit: cover;
}
.ai-style-card__name {
  width: 100%;
  display: block;
  margin: 6px 0 2px;
  overflow: hidden;
  color: #d8dae0;
  font-size: 10px;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-generator-state {
  width: 100%;
  min-height: 160px;
  flex: 1 1 auto;
  padding: 14px;
  border: 1px solid #30333a;
  border-radius: 10px;
  background: #1b1d21;
}
.ai-generator-state--offline {
  color: #c4c7ce;
}
.ai-generator-state__media {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #ffffff;
}
.ai-prompt-footer--panel {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: 62px !important;
  min-height: 62px;
  padding: 10px 0;
  background: #17181b !important;
}
.ai-prompt-footer--panel .toolbar-inner {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 0;
}
.ai-prompt-footer--panel .button {
  min-width: 0;
  flex: 1 1 50%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .ai-prompt-studio__main {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    overflow-y: auto;
  }
  .ai-prompt-preview {
    min-height: 180px;
  }
  .ai-prompt-preview__details {
    display: none;
  }
  .ai-prompt-footer {
    min-height: 64px;
    padding: 10px 14px;
  }
  .ai-prompt-footer .button {
    min-width: 0;
    flex: 1 1 50%;
  }
}
.vx-toolbar {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: absolute;
  display: flex;
  padding: 0px;
  z-index: 99940;
}
.vx-toolbar-inner {
  position: relative;
  background-color: #151619;
  border-radius: 0px;
  justify-content: space-between;
}
.vx-toolbar-inner .vx-control-group {
  display: flex;
}
.vx-toolbar.bordered .vx-toolbar-inner {
  border-color: #30333a;
  border-style: solid;
}
.vx-toolbar.bordered.border-all .vx-toolbar-inner {
  border-width: 1px;
}
.vx-toolbar.bordered.border-l .vx-toolbar-inner {
  border-left-width: 1px;
}
.vx-toolbar.bordered.border-t .vx-toolbar-inner {
  border-top-width: 1px;
}
.vx-toolbar.bordered.border-r .vx-toolbar-inner {
  border-right-width: 1px;
}
.vx-toolbar.bordered.border-b .vx-toolbar-inner {
  border-bottom-width: 1px;
}
.vx-toolbar-item {
  height: 44px;
  width: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-toolbar-item > a,
.vx-toolbar-item > .vx-item,
.vx-toolbar-item > .vx-item a,
.vx-toolbar-item .ivu-poptip-rel a {
  color: #c8cbd2;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}
.vx-toolbar-item g path {
  fill: #c8cbd2;
  stroke: #c8cbd2;
}
.vx-toolbar-item.vx-menu .dropdown .dropdown-menu.show {
  background-color: #e4e4e4 !important;
  width: 170px;
}
.vx-toolbar-item.vx-menu .dropdown a {
  justify-content: space-between;
  align-items: center;
}
.vx-toolbar-item.vx-action-group {
  position: relative;
}
.vx-toolbar-item.vx-action-group .vx-options {
  position: absolute;
  display: none;
  left: 44px;
}
.vx-toolbar-item.active a {
  color: #ed145b;
}
.vx-toolbar-item.active svg g path {
  fill: #ed145b !important;
  stroke: #ed145b;
}
.vx-toolbar-item.active a {
  color: #ed145b;
}
.vx-toolbar-item.active svg g path {
  fill: #ed145b !important;
  stroke: #ed145b;
}
.vx-toolbar-item .vx-touchable.active a {
  color: #ed145b;
}
.vx-toolbar-item .vx-touchable.active svg g path {
  fill: #ed145b !important;
  stroke: #ed145b;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-toolbar.vx-hidden-sm {
    display: none;
  }
  .vx-control-toolbar .vx-toolbar-item {
    width: 100%;
  }
  .vx-toolbar.bottom-sm,
  .vx-toolbar.top-sm {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    left: 0px;
    height: 44px;
    width: 100%;
  }
  .vx-toolbar.bottom-sm .vx-toolbar-inner,
  .vx-toolbar.top-sm .vx-toolbar-inner {
    flex-direction: row;
    height: 44px;
    width: 100%;
    justify-content: space-between;
  }
  .vx-toolbar.bottom-sm .vx-toolbar-inner .vx-control-group,
  .vx-toolbar.top-sm .vx-toolbar-inner .vx-control-group {
    flex-direction: row;
    justify-content: space-between;
    margin: 0px;
  }
  .vx-toolbar.bottom-sm .vx-toolbar-item,
  .vx-toolbar.top-sm .vx-toolbar-item {
    width: 100%;
  }
  .vx-toolbar.bottom-sm.small-sm .vx-toolbar-inner,
  .vx-toolbar.top-sm.small-sm .vx-toolbar-inner {
    width: auto;
  }
  .vx-toolbar.full-sm.bottom-sm .vx-control-group {
    width: 100%;
  }
  .vx-toolbar.bottom-sm {
    bottom: 0px;
  }
  .vx-toolbar.bottom-sm.two {
    bottom: 44px;
  }
  .vx-toolbar.top-sm {
    top: 0px;
  }
  .vx-toolbar.top-sm.two {
    top: 44px;
  }
  .vx-toolbar.left-sm,
  .vx-toolbar.right-sm {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0px;
    height: 100%;
    width: 44px;
  }
  .vx-toolbar.left-sm .vx-toolbar-inner,
  .vx-toolbar.right-sm .vx-toolbar-inner {
    flex-direction: column;
    height: 100%;
    width: 44px;
  }
  .vx-toolbar.left-sm .vx-toolbar-inner .vx-control-group,
  .vx-toolbar.right-sm .vx-toolbar-inner .vx-control-group {
    flex-direction: column;
  }
  .vx-toolbar.left-sm.small-sm .vx-toolbar-inner,
  .vx-toolbar.right-sm.small-sm .vx-toolbar-inner {
    height: auto;
  }
  .vx-toolbar.left-sm.safe-space-sm,
  .vx-toolbar.right-sm.safe-space-sm {
    padding-top: 44px;
  }
  .vx-toolbar.left-sm {
    left: 0px;
  }
  .vx-toolbar.left-sm.away-sm {
    -webkit-transform: translate3d(-160%, 0px, 0px);
  }
  .vx-toolbar.right-sm {
    right: 0px;
  }
  .vx-toolbar-item a {
    font-size: 20px;
  }
  .vx-toolbar.vx-toolbar-sm .vx-toolbar-item {
    width: 44px;
    height: 44px;
  }
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-toolbar.left-lg,
  .vx-toolbar.right-lg {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0px;
    height: 100%;
    width: 44px;
  }
  .vx-toolbar.left-lg .vx-toolbar-inner,
  .vx-toolbar.right-lg .vx-toolbar-inner {
    flex-direction: column;
    height: 100%;
    width: 44px;
  }
  .vx-toolbar.left-lg .vx-toolbar-inner .vx-control-group,
  .vx-toolbar.right-lg .vx-toolbar-inner .vx-control-group {
    flex-direction: column;
  }
  .vx-toolbar.left-lg.small-lg .vx-toolbar-inner,
  .vx-toolbar.right-lg.small-lg .vx-toolbar-inner {
    height: auto;
  }
  .vx-toolbar.left-lg .vx-toolbar-item,
  .vx-toolbar.right-lg .vx-toolbar-item {
    height: 44px;
  }
  .vx-toolbar.left-lg.safe-space-lg,
  .vx-toolbar.right-lg.safe-space-lg {
    padding-top: 44px;
  }
  .vx-toolbar.left-lg {
    left: 0px;
  }
  .vx-toolbar.right-lg {
    right: 0px;
  }
  .vx-toolbar.bottom-lg,
  .vx-toolbar.top-lg {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    left: 0px;
    height: 44px;
    width: 100%;
  }
  .vx-toolbar.bottom-lg .vx-toolbar-inner,
  .vx-toolbar.top-lg .vx-toolbar-inner {
    flex-direction: row;
    height: 44px;
    width: 100%;
    justify-content: space-between;
  }
  .vx-toolbar.bottom-lg .vx-toolbar-inner .vx-control-group,
  .vx-toolbar.top-lg .vx-toolbar-inner .vx-control-group {
    flex-direction: row;
    justify-content: space-between;
    margin: 0px;
  }
  .vx-toolbar.bottom-lg.small-lg .vx-toolbar-inner,
  .vx-toolbar.top-lg.small-lg .vx-toolbar-inner {
    width: auto;
  }
  .vx-toolbar.bottom-lg {
    bottom: 0px;
  }
  .vx-toolbar.bottom-lg.two-lg {
    bottom: 44px;
  }
  .vx-toolbar.top-lg {
    top: 0px;
  }
  .vx-toolbar.top-lg.two {
    top: 44px;
  }
  .vx-toolbar.small-lg .vx-toolbar-inner {
    height: auto;
  }
  .vx-toolbar.left-lg {
    left: 0px;
  }
  .vx-toolbar-item a {
    font-size: 22px;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-toolbar.left-lg {
    background-color: #151619;
  }
}
/*
.vx-action-bar {
    width: 84px;
    min-width: 84px;
}

.vx-action-bar .vx-toolbar-inner {
    width: 84px;
    min-width: 84px;
    height: 100% !important;
    padding-top: 44px;
    overflow-y:auto;
}

.vx-action-bar .vx-toolbar-inner .vx-toolbar-item{
    width: 100%;
    height: 60px;
}

.vx-action-bar .vx-toolbar-inner .vx-toolbar-item a{
    width: 100%;
    height: 60px;
    font-size: 24px;
}
.vx-action-bar .vx-toolbar-inner .vx-toolbar-item .vx-box{
    width: 100% !important;
    height: 60px;
}
*/
.canvas-modern .vx-toolbar-inner {
  background: #151619;
  border-color: #30333a;
  box-shadow: none;
}
.canvas-modern .vx-toolbar-item {
  position: relative;
  border-radius: 7px;
}
.canvas-modern .vx-toolbar-item > a,
.canvas-modern .vx-toolbar-item > .vx-item,
.canvas-modern .vx-toolbar-item > .vx-item a,
.canvas-modern .vx-toolbar-item .ivu-poptip-rel a {
  color: #b8bbc3;
  transition: background-color 120ms ease, color 120ms ease;
}
.canvas-modern .vx-toolbar-item g path {
  fill: #b8bbc3;
  stroke: #b8bbc3;
  transition: fill 120ms ease, stroke 120ms ease;
}
.canvas-modern .vx-toolbar-item:hover > a,
.canvas-modern .vx-toolbar-item:hover > .vx-item,
.canvas-modern .vx-toolbar-item:hover > .vx-item a {
  background: #25282d;
  color: #ffffff;
}
.canvas-modern .vx-toolbar-item.active {
  background: rgba(237, 20, 91, 0.13);
}
.canvas-modern .vx-toolbar-item.active::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: #ed145b;
}
.canvas-modern .vx-toolbar-item.active a {
  color: #ff7aa6;
}
.canvas-modern .vx-toolbar-item.active svg g path {
  fill: #ff7aa6 !important;
  stroke: #ff7aa6;
}
.canvas-modern .navbar-toolbar {
  border-bottom: 1px solid #30333a;
  background: #151619;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}
.canvas-modern .navbar-toolbar .vx-toolbar-item.active::before {
  left: 10px;
  right: 10px;
  top: auto;
  bottom: 2px;
  width: auto;
  height: 2px;
}
.canvas-modern .vx-action-toolbar {
  border-right: 1px solid #30333a;
  background: #151619;
}
.canvas-modern .vx-action-toolbar .vx-toolbar-inner {
  padding: 4px 0 8px;
}
.canvas-modern .vx-control-toolbar {
  border-left: 1px solid #30333a;
  background: #151619;
}
.canvas-modern .vx-control-toolbar .vx-toolbar-inner {
  padding: 4px 0 8px;
}
.canvas-modern .options-bar {
  border: 0;
  background: transparent;
}
.canvas-modern .options-bar .vx-toolbar-inner {
  border: 0;
  background: transparent;
}
.canvas-modern .options-bar .vx-control-group {
  gap: 2px;
  margin: 0;
  padding: 0 6px;
}
.canvas-modern .options-bar .vx-toolbar-item.active::before {
  left: 10px;
  right: 10px;
  top: auto;
  bottom: 2px;
  width: auto;
  height: 2px;
}
.canvas-modern .vx-action-group > span.absolute {
  color: #737781;
  font-size: 7px;
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .canvas-modern .vx-toolbar.left-lg .vx-toolbar-inner,
  .canvas-modern .vx-toolbar.right-lg .vx-toolbar-inner {
    border-radius: 0;
  }
}

/*****/
/**/
/*gray with green accent*******
@color-primary: #2D2D2D;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #C5D961;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Vintage Cuban Sheet Music*******
@color-primary: #333333;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F6FBF4;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FB9A63;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Quiet Cry*******
@color-primary: #1C1D21;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #31353D;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #92CDCF;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Good as Gold*******
@color-primary: #2E2E2C;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #FFFFF0;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FFCC33;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Jonathan*******
@color-primary: #595952;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #30DFF2;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Smoked Salmon*******
@color-primary: #2E2E28;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #707070;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FF635C;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Web Design*******/
/*pumpkin*******
@color-primary: #262626;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #404040; 
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #f13d25;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*F7 THEME*/
:root {
  --f7-theme-color: #ED145B;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #262626;
  --f7-color-gray: #404040;
  --f7-color-gray-rgb: 64, 64, 64;
  --f7-color-gray-shade: #2e2e2e;
  --f7-color-gray-tint: #585757;
}
/******/
/*
@color-primary: #ffffff;
@color-light: #ffffff;
@color-dark: #202020; //f7 dark theme uses #1c1c1d
@color-secondary: rgb(228, 228, 228);
@color-offset: #202020;
@color-accent: #1b95f8;
*/
/*@toolbar-background-color: fade(@color-primary, @fade);*/
/*****BORDERED THEME****************
@toolbar-size: 44px;
@toolbar-padding: 4px;
@toolbar-outer-size: @toolbar-size + @toolbar-padding + 2px;
@toolbar-border-width: 1px;
@toolbar-border-radius: @rounded;
@toolbar-border-color: @color-offset;
/***********************************/
:root {
  --f7-theme-color: #ed145b;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #151619;
  --f7-color-gray: #30333a;
  --f7-color-gray-rgb: 48, 51, 58;
  --f7-color-gray-shade: #22252a;
  --f7-color-gray-tint: #454951;
}
html {
  width: 100%;
  height: 100%;
  font-size: 0.8rem;
}
/*
textarea{
	background-color: @color-primary !important;
	color: @color-offset !important;
    padding: 8px 0px;
    border-radius: 0px;
}
textarea{
	font-size: 36px;
    padding: 4px;
}
textarea::placeholder {
  color: @color-gray-500 !important;
  opacity: 1;
}
textarea:-ms-input-placeholder {
 color: @color-gray-500 !important;
}
textarea::-ms-input-placeholder {
 color: @color-gray-500 !important;
}
a.link{
	color: @color-offset;
}
a.color-dark{
	color: @color-dark;
}
.vx-body{
	width: 100%;
	height: 100%;
}
*/
/*
:root {
	--f7-theme-color: @color-accent;
	--f7-color-orange: @color-accent;
	--f7-color-black: @color-primary;
}
.color-black {
    --f7-theme-color: @color-dark;
    --f7-theme-color-rgb: 0, 0, 0;
    --f7-theme-color-shade: #000000;
    --f7-theme-color-tint: #141414;
}
.list:not(.padded){
	margin: 8px 0px;
}
.vx-page{
	.segmented button{
		border-width: 1px;
		text-overflow: unset;
		.icon{
			font-size: 0.8rem;
		}
	}
	.navbar {
		user-select: none;
		height: 46px;
		background-color: @color-primary !important;
		color: @color-offset;
		a{
			color: @color-offset;
		}
		a:hover{
			color: @color-offset;
		}
		a:active{
			color: @color-offset;
		}
	}

	.list:not(.padded){
		ul{
			background: transparent;
			&::before{
				background-color: transparent;
			}
			&::after{
				height: 1px;
				background-color: @color-offset;
			}
			li{
				.smart-select{
					background-color: @color-primary;
					> .item-content{
						padding-left: 4px;
					}
				}
				.item-inner{
					&::after{
						height: 1px;
						background-color: @color-offset;
					}

				}
			}
		}
	}
}

.navbar .menu-item .menu-item-content i{
	color: @color-offset;
}
.navbar .menu-item .menu-item-content::after {
	display: none;
}
.navbar .menu-inner {
	padding-left: 0px;
	padding-right: 0px;
}
.navbar .menu-item .menu-item-content i {
	font-size: 16px;
}
.navbar .menu-item {
	background-color: transparent;
	width: 2.8rem;
	height: 2.8rem;
}
.navbar .menu-item-dropdown-opened .menu-dropdown {
	background-color: @color-light-gray;
    border-radius: 99px;
}
.navbar .menu-dropdown-content {
	background-color: @color-light;
    top: -8px;
    left: -6px;
    z-index: 2;
    border-radius: 4px;
    width: 200px;
    border: 1px solid #dfdfdf;
    box-shadow: -2px -1px 12px -6px rgba(0, 0, 0, 0.45);
}
.navbar .menu-item.menu-item-dropdown.menu-item-dropdown-opened{
	background-color: @panel-color;
}
.navbar .menu-dropdown-item {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	cursor: pointer;
	color: @color-offset !important;
}
*/
.ivu-poptip-popper {
  min-width: 44px !important;
  /*default: 150px*/
}
.ivu-poptip-rel {
  width: 100%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .hide-sm,
  .show-sm-l,
  .show-lg {
    display: none !important;
  }
}
@media (min-width: 601px) {
  .hide-lg {
    display: none !important;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .hide-sm-l,
  .hide-sm,
  .show-lg {
    display: none !important;
  }
}
.vx-safe-margin-right {
  margin-right: env(safe-area-inset-right);
}
.vx-safe-margin-left {
  margin-left: env(safe-area-inset-left);
}
.vx-safe-margin-bottom {
  margin-bottom: env(safe-area-inset-bottom);
}
.vx-safe-margin-top {
  margin-top: env(safe-area-inset-top);
}
.vx-safe-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}
.vx-safe-padding-top {
  padding-top: env(safe-area-inset-top);
}
.vx-safe-padding-left {
  padding-left: env(safe-area-inset-left);
}
.vx-safe-padding-right {
  padding-right: env(safe-area-inset-right);
}
.vx-safe-top {
  top: env(safe-area-inset-top);
}
.vx-safe-height {
  height: env(safe-area-inset-top);
}
.vx-safe-width {
  width: env(safe-area-inset-top);
}
.vx-disabled {
  color: #777c87;
}
.vx-color-offset {
  color: #f5f5f6;
}
.vx-color-accent {
  color: #ed145b;
}
.vx-color-primary {
  color: #17181b;
}
.vx-color-light {
  color: #f5f5f6;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #111214;
}
.vx-color-dark-gray {
  color: #0d0e10;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ed145b;
}
.vx-bg-offset {
  background-color: #f5f5f6;
}
.vx-bg-accent {
  background-color: #ed145b;
}
.vx-bg-primary {
  background-color: #17181b;
}
.vx-bg-primary-faded {
  background-color: rgba(23, 24, 27, 0.97);
}
.vx-bg-light {
  background-color: #f5f5f6;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #111214;
}
.vx-bg-dark-gray {
  background-color: #0d0e10;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #f5f5f6;
}
.vx-theme-offset-text {
  color: #f5f5f6;
}
.vx-theme-accent {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-theme-primary-offset {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme-light {
  background-color: #f5f5f6;
  color: #111214;
}
.vx-theme-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme-border {
  border: 1px solid #30333a;
}
.vx-theme.vx-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-theme.vx-accent {
  background-color: #ed145b;
  color: #f5f5f6;
}
.vx-theme.vx-dark {
  background-color: #111214;
  color: #f5f5f6;
}
.vx-theme.vx-offset {
  background-color: #f5f5f6;
  color: #17181b;
}
.vx-theme.vx-border {
  border: 1px solid #22252a;
}
.vx-theme-accent-border {
  border-color: #9d0d3d;
}
.vx-shadow-1 {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-shadow-2 {
  -webkit-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.75);
}
.vx-shadow-3 {
  -webkit-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
}
.vx-shadow-4 {
  -webkit-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  -moz-box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
  box-shadow: 0px -4px 21px 8px rgba(0, 0, 0, 0.85);
}
.vx-shadow-5 {
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-inner-shadow-1 {
  -webkit-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: inset 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
}
.vx-blurred {
  filter: blur(4px);
}
.vx-rounded {
  border-radius: 44rem;
}
.vx-active {
  background-color: #ed145b !important;
}
.vx-bg-active {
  background-color: #ed145b !important;
  color: #ffffff !important;
}
.vx-active-color {
  background-color: #17181b !important;
  color: #ed145b !important;
}
.vx-py {
  padding-top: 8px;
  padding-bottom: 8px;
}
.vx-py-2 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.vx-pb {
  padding-bottom: 8px;
}
.vx-pb-2 {
  padding-bottom: 16px;
}
.vx-pt {
  padding-top: 8px;
}
.vx-pt-2 {
  padding-top: 16px;
}
.vx-my {
  margin-top: 8px;
  margin-bottom: 8px;
}
.vx-my-2 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.vx-mb {
  margin-bottom: 8px;
}
.vx-mb-2 {
  margin-bottom: 16px;
}
.vx-mt {
  margin-top: 8px;
}
.vx-mt-2 {
  margin-top: 16px;
}
.vx-wh-md {
  width: 32px;
  height: 32px;
}
.vx-wh-full {
  width: 100%;
  height: 100%;
}
.vx-jus-center {
  justify-content: center;
}
.vx-flex {
  display: flex;
}
.vx-flex-col {
  display: flex;
  flex-direction: column;
}
.vx-flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-flex-around {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-flex-wrap {
  display: flex;
  flex-wrap: wrap;
}
.vx-flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-w-block {
  width: 44px;
}
@media (min-width: 601px) {
  .vx-w-block {
    width: 38px;
  }
}
.vx-h-block {
  height: 44px;
}
@media (min-width: 601px) {
  .vx-h-block {
    height: 38px;
  }
}
.vx-half-h-block {
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-half-h-block {
    height: 38px / 2;
  }
}
.vx-h-block-sm {
  height: 38px;
}
.vx-wh-block {
  width: 44px;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-wh-block {
    width: 38px;
  }
}
@media (min-width: 601px) {
  .vx-wh-block {
    height: 38px;
  }
}
.vx-block {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 4px;
}
.vx-header-block {
  padding: 0px  8px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs {
  width: 22px;
  height: 22px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.xs-sm {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.sm {
  width: 38px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-button-block.lg {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block {
  width: 29px;
  height: 29px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-block .vx-header {
  overflow: hidden;
}
.vx-invisible {
  visibility: hidden;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}
.vx-item a {
  color: #f5f5f6;
}
.vx-item.active {
  color: #ed145b;
}
.vx-item.active a {
  color: #ed145b;
}
.vx-item.active svg g path {
  fill: #ed145b;
}
.home-page.page-content {
  background-color: #111214;
}
.navbar .right a {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.7rem;
}
.vx-layout {
  width: 100%;
  height: 100%;
  background-color: transparent;
}
.vx-layout.dark {
  background-color: #111214;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #17181b !important;
  border-bottom: 1px solid #343840;
}
.vx-navbar ul {
  background-color: #17181b !important;
}
.vx-navbar ul li {
  color: #f5f5f6 !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #111214;
  display: flex;
  justify-content: start;
  align-items: center;
  min-width: 140px;
  min-height: 38px;
}
.vx-logo {
  width: max-content;
  height: 64px;
}
.vx-logo.fit {
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-content {
  padding: 8rem 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.vx-project-preview .svg-preview {
  margin-top: -12%;
}
.vx-project-preview .image-preview {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.vx-project-preview .image-preview img {
  height: 200%;
  object-fit: cover;
}
.vx-media-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  overflow-y: hidden;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-media-list .card {
  flex-shrink: 0;
  margin-right: 8px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  overflow: hidden;
}
.vx-media-list .card .card-content {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}
.vx-media-list .card .vx-svg-content svg {
  height: 100%;
}
.vx-media-list .card .card-content-padding {
  display: none;
}
.vx-media-list .card .card-footer {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  background-color: #ffffffcf;
  -webkit-transform: translate3d(0px, 200%, 0px);
}
.vx-media-list .card .card-cover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.vx-media-list .card .card-delete {
  position: absolute;
  width: 32px;
  height: 32px;
  top: 8px;
  right: 8px;
  display: none;
  background-color: rgba(255, 255, 255, 0.678);
  border-radius: 32px;
  color: #ed145b;
}
.vx-media-list .card .card-toggle {
  width: 24px;
  height: 24px;
  border-radius: 99px;
  border: 2px solid #ed145b;
  background-color: white;
  position: absolute;
  bottom: 8px;
  left: 8px;
}
.vx-media-list .card.card-selected {
  /*
			.card-delete{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.card-footer{
				-webkit-transform: translate3d(0px, 0px, 0px);
			}
			*/
}
.vx-media-list .card.card-selected .card-toggle {
  background-color: #ed145b;
}
.vx-media-list .card.card-expandable {
  /*height: 100px !important;*/
}
.vx-media-list .card.card-expandable.card-opened .card-content-padding {
  display: block;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content,
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-opening .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
  /*opacity: 0;*/
}
.vx-media-list .card.card-expandable.card-opened .vx-svg-content {
  width: 100%;
  height: 74%;
  margin-left: 0px;
  margin-top: 0px;
}
.vx-media-list .card.card-expandable.card-closing .vx-svg-content {
  width: 344px;
  height: 344px;
  margin-left: -70px;
  margin-top: -70px;
  /*opacity: 0;*/
}
.vx-media-list.media-grid {
  justify-content: center;
  flex-wrap: wrap;
  height: unset;
  overflow-y: auto;
  overflow-x: auto;
}
.vx-media-list.media-grid .card {
  margin: 8px 8px !important;
}
.vx-card {
  width: 16rem;
  height: 16rem;
  overflow: hidden;
  margin: 1rem;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.vx-card .ivu-card-extra {
  position: absolute;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  width: 100%;
  height: 44px;
  min-height: 44px;
  top: 0px;
  left: 0;
  margin-top: 0px;
  right: unset;
  background-color: rgba(255, 255, 255, 0.4);
}
.vx-card .ivu-card-extra a {
  display: flex;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  justify-content: center;
  align-items: center;
}
.vx-card .ivu-card-body {
  height: 100%;
  width: 100%;
  padding: 0px 16px;
}
.vx-card .ivu-card-body svg {
  height: 100%;
}
.vx-page-load {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #ffffff8a;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99990;
}
.vx-page-load.solid {
  background-color: #ffffff;
}
.vx-page-load.dark {
  background-color: #000000ab;
}
.vx-page-load.dark.solid {
  background-color: #000000;
}
.vx-overlay {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(17, 18, 20, 0.4);
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  opacity: 0;
  pointer-events: none;
}
.vx-overlay.visible {
  opacity: 1;
  pointer-events: all;
}
.vgx-artboard {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #292c31;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vgx-artboard canvas {
  position: static;
  left: 0px;
  top: 0px;
  will-change: transform;
  touch-action: none;
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard .opt-canvas {
  position: absolute;
  left: -4000px;
  top: -4000px;
  visibility: hidden;
  will-change: transform;
  /*
		width: 100%;
		height: 100%;
		*/
}
.vgx-artboard.blocked {
  filter: blur(22px);
}
canvas[resize] {
  width: 100%;
  height: 100%;
}
.vx-actionbar-container {
  position: fixed;
  top: 44px;
  left: 0px;
  width: 44px;
  height: 100%;
  z-index: 9;
}
.vx-actionbar-container .vx-actionbar-inner {
  width: 44px;
  height: 100%;
  background-color: #17181b;
  border: 1px solid #ebebeb;
}
.vx-actionbar-container .vx-actionbar {
  width: 44px;
  height: auto;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item {
  width: 100%;
  height: 44px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item > i {
  color: #f5f5f6;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item.active > i {
  color: #ed145b;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-subitems {
  border-radius: 20px;
  overflow: hidden;
}
.vx-actionbar-container .vx-actionbar .vx-actionbar-item-spacer {
  width: 100%;
  height: 44px;
}
.vx-checkers {
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}
.vx-control-group {
  margin: 8px 0rem;
}
.vx-flex-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: static;
  margin: 8px 0px;
}
.vx-flex-group.wrap {
  flex-wrap: wrap;
}
.vx-flex-group.vertical,
.vx-flex-group.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.vx-option-group {
  display: flex;
  justify-content: end;
  align-items: center;
}
.vx-gradient-none {
  background-color: #cfcfcf;
}
.vx-gradient-linear {
  background: linear-gradient(0deg, #141414 0%, #cfcfcf 100%);
}
.vx-gradient-radial {
  background: radial-gradient(circle, #141414 0%, #cfcfcf 100%);
}
.vx-fa-linear-gradient::before {
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#22252a));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #30333a;
  border-radius: 2px;
  font-size: 22px;
}
.active .vx-fa-linear-gradient::before {
  -webkit-background-clip: unset;
  border-color: #ed145b;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ed145b));
}
.vx-header {
  display: flex;
  justify-content: space-between;
  height: 44px;
  align-items: center;
  margin: 0px 0px 0px 0px;
}
.vx-header h2 {
  margin: 0px 0px;
  color: #f5f5f6;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #f5f5f6;
}
.vx-header.bordered {
  border-bottom: 1px solid #17181b;
}
.vx-input-block {
  display: flex;
  flex-direction: column;
  padding: 4px 2px;
  position: relative;
  margin: 0px 1px;
  width: 100%;
}
.vx-input-block label {
  font-size: 16px;
  padding: 2px 0px 2px 0px;
  color: #f5f5f6;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #17181b;
  color: #f5f5f6;
  border: 1px solid #343840;
  border-radius: 8px;
  min-height: 26px;
  border-width: 0px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #f5f5f6;
}
.vx-input-block.vx-with-label .vx-badge {
  top: 30px;
}
.vx-input-block.vx-with-trigger .vx-input-trigger {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 44px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f5f5f6;
}
.vx-input-block.vx-with-trigger input {
  padding: 8px 4px 8px 32px;
}
.vx-hexpad {
  position: relative;
}
.vx-hexpad .vx-placeholder {
  height: 38px;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 999999999;
  color: #8d8d8d;
  padding: 0px 15px;
  line-height: 38px;
}
.vx-list {
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
}
.vx-list .vx-list-item .vx-row {
  width: 100%;
  height: 44px;
  padding: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  border-top: 1px solid #2e3037;
}
.vx-list .vx-list-item .vx-row .vx-col {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-list .vx-list-item .vx-dropdown .dropdown-toggle {
  color: #f5f5f6;
}
.vx-list .vx-list-item.active > .vx-row:not(first-child) {
  border-top: 0px !important;
}
.vx-list .vx-list-item.active > .vx-row {
  background-color: #ed145b !important;
}
.vx-list .vx-list-item.active > .vx-row > .vx-dropdown .dropdown-toggle {
  color: #17181b;
}
.vx-layers .vx-list .vx-list-item .vx-row {
  padding: 1px;
}
.vx-layers .vx-layer-button {
  width: 32px;
  height: 38px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-layer-list.vx-list .segmented button {
  border-width: 0px;
}
.vx-layer-list.vx-list .vx-row {
  background-color: rgba(23, 24, 27, 0.1);
}
.vx-layer-list.vx-list .vgx-label {
  min-width: 25%;
}
.vx-layer-list.vx-list .vx-thumbnail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  background-image: linear-gradient(45deg, #aaaaaa 25%, transparent 25%), linear-gradient(-45deg, #aaaaaa 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #aaaaaa 75%), linear-gradient(-45deg, transparent 75%, #aaaaaa 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: #dddddd;
}
.vx-layer-list.vx-list .vx-thumbnail svg {
  width: 22px;
  height: 22px;
}
.vx-layer-list.vx-list .vx-list-item .vx-list-item {
  padding-left: 8px;
}
/*
.vx-layers{
	min-height: 400px;
}
*/
.vx-layers > .vx-list.vx-layer-list:first-child > ul:first-child > li:first-child > .vx-row:first-child {
  border-top: 1px solid #000000;
}
.vx-home .page-content {
  background-color: #111214;
}
.vx-page .page-content {
  padding-top: 46px;
}
.vx-page-body {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}
.vx-panel {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  height: auto;
  position: absolute;
  z-index: 99930;
}
.vx-panel.vx-full {
  height: 100%;
}
.vx-panel-outer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 4px 4px;
}
.vx-panel-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: relative;
}
.vx-panel-inner .vx-panel-content {
  display: block;
  width: 100%;
}
.vx-panel .vx-tabs {
  display: none;
  position: absolute;
  height: 44px;
  bottom: 6px;
  width: 100%;
  left: 0px;
  padding: 0px 4px;
  overflow-x: auto;
  overscroll-behavior: contain;
  will-change: transform;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.vx-panel .vx-tabs .button {
  border-radius: 0px !important;
  background-color: transparent;
  text-overflow: unset;
  min-width: 100px;
  min-height: 32px;
}
.vx-panel .vx-tabs .button.button-active {
  border-bottom: 2px solid #ed145b;
  color: #ed145b;
}
.vx-select-list {
  display: flex;
  flex-direction: column;
  height: 32px;
  width: 100%;
}
.vx-select-list .vx-select-list-header {
  position: relative;
}
.vx-select-list .vx-select-list-header a {
  width: 100%;
  height: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: #17181b;
  border: 1px solid #f5f5f6;
  border-radius: 8px;
  padding-left: 8px;
}
.vx-select-list .vx-select-list-header .vx-select-list-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 0px;
  top: 0px;
  height: 32px;
  width: 32px;
}
.vx-trigger-input:not(.floating) {
  width: 100%;
  margin: 4px 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input:not(.floating) a {
  width: 100%;
  min-height: 28px;
  height: 38px;
  overflow: hidden;
}
.vx-trigger-input:not(.floating).vx-trigger-block-icon a {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.vx-trigger-doc-icon {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-trigger-input.floating {
  position: absolute;
  right: 0px;
  top: -8px;
}
.vx-trigger-button {
  min-width: 44px;
  min-height: 44px/2;
  margin: 8px 0rem;
  display: flex;
}
.vx-icon {
  pointer-events: none;
}
.vx-icon i {
  pointer-events: none;
}
.vx-link {
  min-width: 44px;
  min-height: 44px;
}
.vx-trigger-input.floating .vx-link {
  width: 32px;
  height: 32px;
}
.vx-trigger-input .vx-doc-icon svg g path:first-child {
  fill: #ffffff;
}
.vx-trigger-input .vx-doc-icon svg path {
  stroke: #f5f5f6;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #f5f5f6;
  fill: #f5f5f6;
}
.vx-trigger-input.active .vx-doc-icon svg g path:first-child {
  fill: #ed145b;
}
.vx-trigger-input.active .vx-doc-icon svg path {
  stroke: #ed145b;
}
.vx-trigger-input.active .button {
  background-color: #ed145b !important;
}
.gui-svg-icon svg {
  width: 28px;
  fill: #f5f5f6;
}
.active .gui-svg-icon svg {
  fill: #ed145b;
}
.vx-shadow-offset-input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: 0px solid #30333a;
}
.vx-shadow-offset-input .vx-shadow-box {
  width: 90%;
  height: 8.5rem;
  border-radius: 4px;
}
@media (min-width: 601px) {
  .vx-shadow-offset-input .vx-shadow-box {
    width: 90%;
    height: 8.5rem;
    border-radius: 4px;
  }
}
.dot-box-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid white;
  background-color: #ed145b !important;
}
.dot-box-handle.handle-1 {
  background-color: #111214 !important;
}
.dot-box-handle.handle-2 {
  background-color: #ed145b !important;
}
.dot-box-indicator {
  background-color: #020202;
  opacity: 0.5;
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 20px;
  left: 50px;
  top: 50px;
}
.vx-swatch {
  position: relative;
  overflow: hidden;
}
.vx-swatch.button-swatch {
  width: 32px;
  height: 32px;
  border-radius: 44rem;
}
.vx-swatch .checkers {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  background-color: white;
  border-radius: 44rem;
}
.vx-swatch .fill {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 44rem;
}
.vx-text-window .list ul:before {
  display: none;
}
.vx-text-window .list ul {
  background-color: transparent !important;
}
.vx-text-window .list ul:after {
  display: none;
}
.vx-text-window .item-title {
  color: black;
}
.vx-text-window textarea {
  color: black;
}
.vx-text-window textarea::placeholder {
  color: gray;
}
.vx-interface {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.vx-interface.blocked {
  filter: blur(12px);
}
.vx-popover {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99950;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  background-color: #00000030;
}
.vx-popover .vx-popover-dialog {
  position: fixed;
  left: 0px;
  top: 0px;
}
.vx-popover.opened {
  opacity: 1;
  pointer-events: all;
}
.vx-popover-dialog .vx-keypad {
  width: 240px;
}
.vx-popover-list {
  width: 240px;
  max-height: 280px;
  overflow: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-popover-list .vx-touchable {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.vx-popover-list .vx-touchable .vx-label {
  min-width: 132px;
}
.vx-popover-list .vx-touchable svg g path {
  fill: white;
  stroke: white;
}
.vx-popover-list.sm {
  width: 50px;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-popover-dialog .vx-keypad {
    width: 320px;
    height: 300px;
  }
}
.vx-dropover {
  width: 100%;
}
.vx-dropover .vx-dropover-dialog {
  position: absolute;
  z-index: 250;
}
.vx-dropover .vx-dropover-dialog.vx-fixed {
  position: fixed;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition {
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  left: 0px;
  top: 0px;
  -webkit-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  -moz-box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
  box-shadow: -1px 0px 18px 8px rgba(0, 0, 0, 0.219);
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
  align-items: center;
  padding: 0px 0px;
  margin: 0px 0px;
  display: flex;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option {
    height: 38px;
  }
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 8px;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable .vx-icon {
  min-width: 24px;
  text-align: center;
}
.vx-dropover .vx-dropover-dialog .vx-dropover-dialog-transition .vx-option .vx-touchable span {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
}
.vx-dropover.sm .vx-dropover-dialog {
  min-width: 44px;
}
.vx-dropover.sm .vx-dropover-dialog-transition .vx-option .vx-touchable {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-dropover.md .vx-dropover-dialog {
  min-width: 100px;
}
.vx-dropover.lg .vx-dropover-dialog {
  min-width: 200px;
}
.vx-dropover.select-list .vx-dropover-dialog-transition {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
  will-change: transform;
}
.vx-dropover .vx-hidden-input {
  display: none;
}
.vx-keypad {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 240px;
}
.vx-keypad .vx-keypad-result {
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #343840;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #17181b;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.vx-keypad .vx-keypad-buttons .vx-keypad-characters.vx-keypad-col-3 .vx-touchable {
  width: 100%;
  flex: 1 0 33%;
  font-size: 18px;
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-keypad .vx-keypad-characters .vx-touchable.vx-box.lg {
    width: 38px !important;
    height: 38px !important;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .show-lg,
  .hide-sm {
    display: none !important;
  }
}
.vx-press {
  outline: none !important;
}
.vx-press.vx-box {
  width: 44px;
  height: 44px;
}
.vx-press.vx-box.lg {
  width: 50px;
  height: 50px;
}
.vx-press.active {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-press.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-press.active .vx-widget-theme-text {
  color: #ffffff;
}
.vx-press.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-touch {
  outline: none !important;
}
.vx-touch.vx-box {
  width: 44px;
  height: 44px;
}
.vx-box {
  width: 44px;
  height: 44px;
}
.vx-touchable-select-block {
  align-items: center;
  justify-content: space-between;
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
}
@media (min-width: 601px) {
  .vx-touchable-select-block {
    height: 38px;
  }
}
.vx-touchable-select-block.vx-theme-bordered {
  border-color: #343840;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #777c87;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-touchable-select-block .vx-touchable-select-block-icon {
    height: 38px;
  }
}
.vx-button {
  -webkit-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 6px -1px rgba(0, 0, 0, 0.75);
  height: 44px;
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid;
}
@media (min-width: 601px) {
  .vx-button {
    height: 38px;
  }
}
.vx-button.vx-theme-bordered {
  border-color: #343840;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-input {
  /*.vx-inner-shadow-1;*/
  flex-direction: column;
}
.vx-input .vx-input-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-around;
  position: relative;
  padding-left: 2px;
  height: 44px;
  /*
		&::after {
			content: "";
			width: 100%;
			height: 0.6px;
			background-color: #3e3e3e;
			bottom: -2px;
			position: absolute;
			left: 0%;
		}
		*/
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input {
  width: 100%;
  display: flex;
  flex: 1;
  height: 44px;
  background-color: transparent !important;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper input {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper input[readonly] {
  pointer-events: none;
}
.vx-input .vx-input-wrapper .vx-input-after {
  display: flex;
  justify-content: flex-end;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
  width: 22px;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-suffix {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
  width: 38px;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  height: 44px;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper {
    height: 38px;
  }
}
.vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
  width: 100%;
  font-size: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px / 2;
}
@media (min-width: 601px) {
  .vx-input .vx-input-wrapper .vx-input-after .vx-input-stepper .vx-touchable {
    height: 38px / 2;
  }
}
.vx-input.focused {
  border: 1px solid;
  border-color: #ed145b !important;
}
.vx-widget {
  width: 100%;
  display: flex;
  margin: 4px 0px;
  padding: 0px 4px;
  border: 0px solid;
  border-radius: 8px;
  box-sizing: border-box;
}
.vx-widget .vx-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0px;
  /*text-align: left;*/
  font-size: 14px;
}
.vx-widget .vx-label span {
  white-space: nowrap;
}
.vx-widget .vx-label .vx-touchable {
  min-width: 18px;
  width: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 26px;
}
.vx-widget .vx-object {
  display: flex;
  width: 100%;
}
.vx-flex-group .vx-widget:first-child {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.vx-flex-group .vx-widget:last-child {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.vx-widget-theme-primary {
  background-color: #17181b;
  color: #f5f5f6;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(23, 24, 27, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #30333a;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #22252a;
  color: #f5f5f6;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #343840;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #f5f5f6;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #777c87;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-active .vx-widget-theme-primary,
.vx-theme-accent .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-primary.vx-theme-bordered,
.vx-theme-accent .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-theme-active .vx-widget-theme-primary a,
.vx-theme-accent .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-active .vx-widget-theme-text,
.vx-theme-accent .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-active .vx-widget-theme-light-text,
.vx-theme-accent .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-theme-light .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #f5f5f6;
}
/*
.vx-touchable-select-block{
	&.active {
		outline: none !important;
		.vx-theme-accent;
	}
}
*/
a.vx-touchable .vx-icon {
  font-size: 1.8rem;
}
a.vx-touchable {
  user-select: none;
  border-radius: 8px;
}
a.vx-touchable.active {
  outline: none !important;
  color: #ed145b;
}
a.vx-touchable.vx-highlight.active {
  outline: none !important;
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-text {
  color: #ffffff;
}
a.vx-touchable.vx-highlight.active .vx-widget-theme-light-text {
  color: #ffffff;
}
.active a.vx-touchable {
  outline: none !important;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary {
  background-color: #ed145b;
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #9d0d3d;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover .vx-widget-theme-light-text {
  color: #ffffff;
}
.vx-interface:not(.touch-screen) .vx-input-stepper {
  display: none !important;
}
.vx-interface .fab svg path {
  stroke: white !important;
}
.vx-fab-panel {
  position: fixed;
  bottom: 22px;
  left: 52px;
  height: 56px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.vx-fab-button {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  width: 48px;
  height: 48px;
  font-size: 16px;
  border-radius: 4px;
  margin-right: 8px;
  background-color: #17181b;
  color: #f5f5f6;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-fab-button.active {
  background-color: #ed145b;
}
.vx-textsheet textarea {
  font-size: 4rem;
  height: 100%;
  line-height: 7rem;
}
.vx-scrollbar-none {
  scrollbar-gutter: stable;
  scrollbar-width: none;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-fab-panel {
    bottom: 52px;
    left: 52px;
  }
  .vx-fab-panel.away-sm {
    display: none;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-fab-panel {
    bottom: 22px;
    left: 52px;
  }
  .vx-fab-button {
    width: 48px;
    height: 48px;
    font-size: 16px;
    margin-right: 8px;
  }
}
.toast {
  /*
	left: 48px !important;
	top: 48px !important;
	*/
  width: 300px !important;
  top: 52px !important;
  left: 50% !important;
  margin-left: -150px !important;
  background-color: transparent !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
.toast .toast-content {
  border-radius: 4px;
  background-color: #ed145b;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .color-picker.color-picker-inline .color-picker-module-wheel {
    width: 60%;
    display: flex;
    align-self: center;
  }
}
@media (min-width: 601px) {
  .vx-page .list:not(.padded) ul {
    background: transparent;
  }
  .vx-page .list:not(.padded) ul::before {
    background-color: transparent;
  }
  .vx-page .list:not(.padded) ul::after {
    height: 1px;
    background-color: #f5f5f6;
  }
  .vx-page .list:not(.padded) ul li .item-content {
    /*padding-left: 0px !important;*/
  }
  .vx-page .list:not(.padded) ul li .item-inner {
    padding-left: 0px !important;
  }
  .vx-page .list:not(.padded) ul li .item-inner::after {
    height: 1px;
    background-color: #f5f5f6;
  }
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-actionbar-container {
    width: 100%;
    height: 44px;
    overflow-x: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
  .vx-actionbar-container .vx-actionbar-inner {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-container .vx-actionbar .gui-action-bar-item-spacer {
    display: none;
  }
  .vx-actionbar-container.submenu {
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-item {
    width: 44px;
    height: 100%;
  }
  .vx-actionbar-container .vx-actionbar-subitems {
    position: absolute;
    top: 52px;
    left: -4rem;
    height: 44px;
    display: flex;
    flex-direction: row;
    background-color: #17181b;
  }
  .vx-actionbar-container .vx-actionbar-subitems .vx-actionbar-item {
    padding: 0px 12px;
    width: 44px;
  }
}
@media (min-width: 601px) {
  .vx-actionbar-inner {
    width: 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .submenu {
    width: 100%;
  }
  .vx-actionbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 27px;
  }
  .vx-actionbar-item {
    width: 100%;
    height: 44px;
  }
  .vx-actionbar-subitems {
    position: absolute;
    top: 0px;
    left: 52px;
    display: flex;
    flex-direction: column;
    width: 44px;
    background-color: #17181b;
  }
  .vx-actionbar-subitems .vx-actionbar-item {
    padding: 8px 0px;
  }
}
/*
@media @device-sm {
	.vgx-artboard{
		.vx-transition;
		&.lifted-sm{
			top: -100px;
		}
		&.lifted-md{
			top: -150px;
		}
		&.lifted-lg{
			top: -200px;
		}
	}
}
*/
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    left: 0px;
    bottom: 44px;
    min-height: 140px;
    height: auto;
    width: 100%;
    /*-webkit-transform: translate3d(0px, 160%, 0px);*/
  }
  .vx-panel.vx-full {
    padding-top: 88px;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0px, 0%, 0px);*/
  }
  .vx-panel.lg {
    height: 400px;
  }
  .vx-panel.hastabs {
    padding-bottom: 44px;
  }
  .vx-panel.hastabs .vx-tabs {
    display: flex;
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-panel {
    right: 44px;
    top: 0px;
    min-height: 200px;
    width: 280px;
    /*-webkit-transform: translate3d(160%, 0px, 0px);*/
    padding-top: 44px;
  }
  .vx-panel .vx-panel-outer {
    padding: 4px 8px;
  }
  .vx-panel.vx-full-lg {
    height: 100%;
  }
  .vx-panel.open {
    /*-webkit-transform: translate3d(0%, 0px, 0px);*/
  }
  .vx-header h2 {
    font-size: 1.5rem;
    font-weight: bolder;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .popup-backdrop {
    background: rgba(255, 255, 255, 0.4) !important;
  }
  .vx-panel {
    height: 100%;
  }
  .vx-header h2 {
    font-size: 1.4rem;
    font-weight: bolder;
  }
  .vx-dropover-dialog {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    will-change: transform;
  }
}
.tooltip-fade {
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  pointer-events: none;
}
.tooltip-fade.tooltip-visible {
  opacity: 1;
  transform: translateY(0);
}
.canvas-modern {
  background: #111214;
  color: #f5f5f6;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.canvas-modern *,
.canvas-modern *::before,
.canvas-modern *::after {
  box-sizing: border-box;
}
.canvas-modern .vgx-artboard {
  background-color: #292c31;
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0) 62%);
}
.canvas-modern .vx-panel {
  background: rgba(24, 25, 29, 0.985) !important;
  border-left: 1px solid #30333a;
  box-shadow: -12px 0 36px rgba(0, 0, 0, 0.28);
  color: #f5f5f6;
}
.canvas-modern .vx-panel-outer {
  padding: 10px 12px 12px;
}
.canvas-modern .vx-panel-inner {
  min-height: 0;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.canvas-modern .vx-panel-content {
  padding-top: 8px;
}
.canvas-modern .vx-header {
  height: 42px;
  min-height: 42px;
  border-bottom: 1px solid #30333a;
}
.canvas-modern .vx-header h2 {
  margin: 0;
  color: #f5f5f6;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.035em;
}
.canvas-modern .vx-header a {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  color: #9da1aa;
  display: flex;
  align-items: center;
  justify-content: center;
}
.canvas-modern .vx-header a:hover {
  background: #272a30;
  color: #ffffff;
}
.canvas-modern .vx-control-group {
  margin: 8px 0;
}
.canvas-modern .vx-flex-group {
  gap: 8px;
  margin: 8px 0;
}
.canvas-modern .vx-widget {
  margin: 5px 0;
  padding: 0 8px;
  border-radius: 8px;
}
.canvas-modern .vx-widget .vx-label {
  min-height: 24px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.canvas-modern .vx-input-block {
  margin: 0;
  padding: 5px 0;
}
.canvas-modern .vx-input-block label {
  padding: 0 0 6px;
  color: #a9adb7;
  font-size: 11px;
  font-weight: 600;
}
.canvas-modern .vx-input-block input,
.canvas-modern .vx-input-block textarea,
.canvas-modern .vx-input-block .vx-text-input {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-input-block input {
  min-height: 36px;
  padding: 0 10px;
}
.canvas-modern .vx-textarea-input {
  padding: 0;
}
.canvas-modern .vx-textarea-input > label {
  padding: 0 0 7px;
}
.canvas-modern .vx-textarea-input .vx-text-input {
  width: 100%;
  min-height: 92px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 10px;
  background: #1b1d21;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-textarea-input .vx-text-input:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  background: #202228;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.canvas-modern .vx-textarea-input .vx-textarea-control,
.canvas-modern .vx-textarea-input .vx-textarea-control.input {
  width: 100%;
  height: 90px;
  min-height: 90px;
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.canvas-modern .vx-textarea-input textarea {
  width: 100% !important;
  height: 90px !important;
  min-height: 90px !important;
  display: block;
  padding: 12px 13px !important;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0 !important;
  border-radius: 0 !important;
  outline: none;
  resize: none !important;
  background: transparent !important;
  color: #f5f5f6;
  font-size: 12px;
  line-height: 1.5;
  caret-color: #ed145b;
}
.canvas-modern .vx-textarea-input textarea::placeholder {
  color: #6f747e;
}
.canvas-modern .vx-input,
.canvas-modern .vx-touchable-select-block,
.canvas-modern .vx-button {
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a !important;
  box-shadow: none;
  color: #f5f5f6;
}
.canvas-modern .vx-input {
  min-height: 38px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}
.canvas-modern .vx-input .vx-input-wrapper {
  min-height: 36px;
  padding-left: 9px;
}
.canvas-modern .vx-input.focused {
  border-color: #ed145b !important;
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.13);
  background: #272a30 !important;
}
.canvas-modern .vx-trigger-input:not(.floating) {
  margin: 5px 0;
}
.canvas-modern .vx-trigger-input:not(.floating) a {
  min-height: 38px;
  height: 38px;
  border: 1px solid #343840;
  border-radius: 8px;
  background: #22252a;
  color: #d5d7dc;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.canvas-modern .vx-trigger-input:not(.floating) a:hover {
  border-color: #474b54;
  background: #292c31;
  color: #ffffff;
}
.canvas-modern .vx-trigger-input:not(.floating).active a {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.14);
  color: #ff7aa6;
}
.canvas-modern .vx-select-list .vx-select-list-header a {
  height: 38px;
  border-color: #343840;
  border-radius: 8px;
  background: #22252a;
  color: #f5f5f6;
}
.canvas-modern .vx-list .vx-list-item .vx-row,
.canvas-modern .vx-layer-list.vx-list .vx-row {
  min-height: 40px;
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid #2c2f35;
  background: transparent;
  transition: background-color 120ms ease;
}
.canvas-modern .vx-list .vx-list-item .vx-row:hover,
.canvas-modern .vx-layer-list.vx-list .vx-row:hover {
  background: #22252a;
}
.canvas-modern .vx-layer-list.vx-list .vx-list-item.active > .vx-row {
  background: rgba(237, 20, 91, 0.14) !important;
  box-shadow: inset 2px 0 #ed145b;
  color: #ffffff;
}
.canvas-modern .segmented,
.canvas-modern .ai-segmented-control {
  gap: 3px;
  padding: 3px;
  border: 1px solid #30333a;
  border-radius: 9px;
  background: #151619;
}
.canvas-modern .segmented .button,
.canvas-modern .ai-segmented-control .button {
  height: 34px;
  border: 0 !important;
  border-radius: 6px !important;
  color: #969aa4;
  font-size: 11px;
  font-weight: 700;
}
.canvas-modern .segmented .button.button-active,
.canvas-modern .ai-segmented-control .button.button-active,
.canvas-modern .segmented .button.active,
.canvas-modern .ai-segmented-control .button.active {
  background: #2a2d33;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #ffffff;
}
.canvas-modern .ai-segmented-control {
  width: 100%;
  min-width: 0;
  display: flex;
  align-self: stretch;
}
.canvas-modern .ai-segmented-control .button {
  min-width: 104px;
  flex: 1 1 50%;
  padding: 0 14px;
  overflow: visible;
  white-space: nowrap;
  text-overflow: clip;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar {
  background: #343840;
}
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-bar-active,
.canvas-modern .range-slider:not(.color-picker-slider):not(.color-picker-bar) .range-knob {
  background: #ed145b;
}
.canvas-modern .vx-tabs {
  gap: 4px;
  padding: 5px 8px;
  border-top: 1px solid #30333a;
  background: #17181b;
}
.canvas-modern .vx-tabs .button.button-active {
  border-bottom-color: #ed145b;
  color: #ff7aa6;
}
.canvas-modern:not(.touch-screen) .vx-theme-primary a.vx-touchable:hover {
  background: #292c31;
  color: #ffffff;
}
.canvas-modern ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.canvas-modern ::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 8px;
  background: #4a4e57;
  background-clip: padding-box;
}
.canvas-modern ::-webkit-scrollbar-track {
  background: transparent;
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .canvas-modern .vx-panel {
    width: 312px;
  }
}
.ai-prompt-studio {
  --ai-accent: #ed145b;
  --ai-accent-soft: rgba(237, 20, 91, 0.14);
  --ai-bg: #111214;
  --ai-surface: #1b1d21;
  --ai-surface-raised: #22252a;
  --ai-border: #30333a;
  --ai-text: #f5f5f6;
  --ai-muted: #989ca6;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ai-bg);
  color: var(--ai-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ai-prompt-studio *,
.ai-prompt-studio *::before,
.ai-prompt-studio *::after {
  box-sizing: border-box;
}
.ai-prompt-studio__main {
  min-height: 0;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 238px 1fr;
  gap: 22px;
  padding: 22px;
}
.ai-prompt-preview {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border);
  border-radius: 12px;
  background: var(--ai-surface);
}
.ai-prompt-preview__media {
  min-height: 0;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  background-color: #0c0d0f;
  background-image: linear-gradient(45deg, #181a1e 25%, transparent 25%), linear-gradient(-45deg, #181a1e 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #181a1e 75%), linear-gradient(-45deg, transparent 75%, #181a1e 75%);
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.ai-prompt-preview__media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.ai-prompt-preview__badge {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(13, 14, 16, 0.78);
  color: #e9eaed;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.ai-prompt-preview__details {
  padding: 14px;
  border-top: 1px solid var(--ai-border);
}
.ai-prompt-preview__details p,
.ai-prompt-preview__details strong,
.ai-prompt-preview__details span {
  display: block;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-prompt-preview__details p {
  color: #ff7aa6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
}
.ai-prompt-preview__details strong {
  margin-top: 4px;
  font-size: 13px;
}
.ai-prompt-preview__details span {
  margin-top: 3px;
  color: var(--ai-muted);
  font-size: 10px;
}
.ai-prompt-composer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.ai-prompt-composer__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.ai-prompt-composer__heading p,
.ai-prompt-composer__heading h2 {
  margin: 0;
}
.ai-prompt-composer__heading p {
  color: #ff7aa6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}
.ai-prompt-composer__heading h2 {
  margin-top: 5px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.ai-prompt-cost {
  min-width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid var(--ai-border);
  border-radius: 7px;
  background: var(--ai-surface);
  color: #c8cbd2;
  font-size: 10px;
  font-weight: 700;
}
.ai-control-label {
  display: block;
  margin: 0 0 6px;
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ai-ratio-selector {
  width: 100%;
  position: relative;
}
.ai-ratio-selector__trigger,
.ai-control {
  width: 100%;
  height: 40px;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 8px;
  outline: none;
  background: var(--ai-surface-raised, #22252a);
  color: var(--ai-text, #f5f5f6);
  font: inherit;
}
.ai-ratio-selector__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 11px;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.ai-ratio-selector__trigger:hover,
.ai-ratio-selector__trigger[aria-expanded="true"] {
  border-color: #4b4f58;
  background: #272a30;
}
.ai-ratio-selector__selection {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  font-weight: 650;
}
.ai-ratio-selector__icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ai-ratio-selector__shape {
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 2px;
}
.ai-ratio-selector__chevron {
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
}
.ai-ratio-selector__menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 99980;
  max-height: 196px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid #3a3e46;
  border-radius: 10px;
  background: #191b1f;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
}
.ai-ratio-selector__option {
  min-width: 0;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #b9bcc4;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.ai-ratio-selector__option:hover {
  background: #25282e;
  color: #ffffff;
}
.ai-ratio-selector__option.active {
  border-color: rgba(237, 20, 91, 0.55);
  background: rgba(237, 20, 91, 0.12);
  color: #ff7aa6;
}
.ai-prompt-field {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.ai-prompt-field__surface {
  min-height: 150px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ai-border, #30333a);
  border-radius: 10px;
  background: var(--ai-surface, #1b1d21);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.ai-prompt-field__surface:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.ai-prompt-field__surface textarea {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px;
  border: 0;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ai-text, #f5f5f6);
  font: inherit;
  font-size: 12px;
  line-height: 1.65;
}
.ai-prompt-field__surface textarea::placeholder {
  color: #666b75;
}
.ai-prompt-field__hint {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 9px 12px;
  border-top: 1px solid var(--ai-border, #30333a);
  color: var(--ai-muted, #989ca6);
  font-size: 9px;
  line-height: 1.45;
}
.ai-prompt-field__hint i {
  margin-top: 1px;
  color: #ff7aa6;
}
.ai-prompt-footer {
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  padding: 13px 22px;
  border-top: 1px solid var(--ai-border);
  background: #151619;
}
.ai-prompt-footer .button {
  height: 40px;
  min-width: 126px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 15px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-transform: none;
}
.ai-prompt-footer .button-outline {
  border-color: #3b3f47;
  color: #d6d8dd;
}
.ai-prompt-footer .button-fill {
  border-color: #ed145b;
  background: #ed145b;
  box-shadow: 0 8px 20px rgba(237, 20, 91, 0.22);
  color: #ffffff;
}
.ai-prompt-credit-button coin-icon {
  width: 18px;
  height: 18px;
}
.ai-prompt-credit-button b {
  color: #ffffff;
}
.ai-prompt-generate-button {
  min-width: 154px !important;
}
.ai-prompt-studio--panel {
  background: transparent;
}
.ai-generator-panel__main {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding-bottom: 72px;
}
.canvas-modern .ai-generator-panel .ai-generator-panel__main {
  padding-right: 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #454a54 transparent;
  scrollbar-width: thin;
}
.canvas-modern .ai-generator-panel .ai-segmented-control {
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  align-items: stretch;
  padding: 3px;
  margin: 0;
}
.canvas-modern .ai-generator-panel .ai-segmented-control .button {
  height: 34px;
  min-height: 34px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1;
}
.canvas-modern .ai-generator-panel .ai-model-field,
.canvas-modern .ai-generator-panel .ai-ratio-selector {
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field {
  min-height: auto;
  flex: 0 0 auto;
}
.canvas-modern .ai-generator-panel .ai-prompt-field__surface {
  height: 96px;
  min-height: 96px;
  flex: 0 0 96px;
}
.canvas-modern .ai-generator-panel .ai-style-grid {
  min-height: auto;
  flex: 0 0 auto;
  overflow: visible;
}
.ai-form-field {
  width: 100%;
  position: relative;
}
.ai-control {
  padding: 0 34px 0 10px;
  font-size: 11px;
}
.ai-style-grid {
  min-height: 0;
  width: 100%;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: 10px;
  padding: 2px 2px 12px;
  overflow-x: hidden;
  overflow-y: auto;
}
.ai-style-card {
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.ai-style-card__preview {
  width: 100%;
  height: 116px;
  position: relative;
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 9px;
  background: #22252a;
  transition: border-color 140ms ease, transform 140ms ease;
}
.ai-style-card__preview:hover {
  border-color: #555a64;
  transform: translateY(-1px);
}
.ai-style-card__preview.active {
  border-color: #ed145b;
  box-shadow: 0 0 0 2px rgba(237, 20, 91, 0.13);
}
.ai-style-card__preview .vx-img,
.ai-style-card__preview .vx-img img {
  width: 100% !important;
  height: 100% !important;
}
.ai-style-card__preview img {
  object-fit: cover;
}
.ai-style-card__name {
  width: 100%;
  display: block;
  margin: 6px 0 2px;
  overflow: hidden;
  color: #d8dae0;
  font-size: 10px;
  font-weight: 650;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-generator-state {
  width: 100%;
  min-height: 160px;
  flex: 1 1 auto;
  padding: 14px;
  border: 1px solid #30333a;
  border-radius: 10px;
  background: #1b1d21;
}
.ai-generator-state--offline {
  color: #c4c7ce;
}
.ai-generator-state__media {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 7px;
  background: #ffffff;
}
.ai-prompt-footer--panel {
  position: absolute !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: 62px !important;
  min-height: 62px;
  padding: 10px 0;
  background: #17181b !important;
}
.ai-prompt-footer--panel .toolbar-inner {
  width: 100%;
  display: flex;
  gap: 8px;
  padding: 0;
}
.ai-prompt-footer--panel .button {
  min-width: 0;
  flex: 1 1 50%;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .ai-prompt-studio__main {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 14px;
    overflow-y: auto;
  }
  .ai-prompt-preview {
    min-height: 180px;
  }
  .ai-prompt-preview__details {
    display: none;
  }
  .ai-prompt-footer {
    min-height: 64px;
    padding: 10px 14px;
  }
  .ai-prompt-footer .button {
    min-width: 0;
    flex: 1 1 50%;
  }
}
.color-palette-sheet .navbar {
  display: none;
}
.color-palette-sheet .page-content {
  padding-top: 0px;
  overflow-y: hidden;
}
.vx-color-picker {
  height: min-content;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vx-color-picker .vx-color-picker-header {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.vx-color-picker .vx-color-picker-container {
  display: flex;
  justify-content: center;
}
.vx-color-picker .vx-color-picker-container .color-picker-inline {
  /**f7 override**/
  /**
			width: 80%;
			height: 270px;
			**/
}
.vx-color-picker .vx-color-palette-library .list .item-content {
  padding-left: 0px !important;
}
.vx-color-picker .vx-color-palette-library {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.vx-color-palette-menu .vx-color-picker {
  height: 100%;
}
.vx-color-palette-library ul {
  background-color: transparent !important;
}
.vx-color-sheet {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.vx-color-palette-viewer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.vx-color-palette-viewer .toolbar {
  position: fixed;
}
.vx-color-palette-generator {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin-bottom: 44px;
}
.vx-color-palette-generator ul {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.vx-color-palette-generator ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 44px;
  position: relative;
}
.vx-color-palette-generator ul li .vx-checkers,
.vx-color-palette-generator ul li .vx-color-block {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.vx-color-palette-generator ul li .vx-color-block-active-palette {
  height: 100%;
  width: 38px;
  position: absolute;
  left: 0px;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-palette-generator ul li .vx-color-block-active-palette .active-marker {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: relative;
  background-color: #000000;
  border: 1px solid white;
  opacity: 0.4;
}
.vx-color-palette-generator ul li .vx-color-block {
  padding-left: 8px;
}
.vx-color-palette-generator ul li .vx-color-block h2 {
  font-weight: bolder;
}
.vx-color-palette-menu {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  position: fixed;
  top: 0px;
  right: 0px;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #191919;
  display: flex;
  flex-direction: column;
}
.vx-color-palette-menu .vx-color-palette-menu-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 8px;
  margin-top: 44px;
  margin-bottom: 44px;
  padding-bottom: 44px;
}
.vx-color-palette-menu .vx-color-palette-menu-inner .vx-color-picker-header {
  width: 88%;
}
.vx-color-palette-menu .vx-color-palette-menu-inner .vx-header h2 {
  color: white !important;
}
.vx-color-palette-menu .vx-color-palette .vx-color-palette-inner {
  width: 88%;
  height: 44px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border-radius: 4px;
  overflow-x: auto;
  overflow: hidden;
}
.vx-color-sheet-palette {
  width: 100%;
  height: 44px;
  margin: 12px 0px;
}
.vx-color-palette {
  width: 100%;
  display: flex;
  justify-content: center;
  height: 44px;
  overflow-y: hidden;
}
.vx-color-palette .vx-color-palette-toggle {
  width: 38px;
  height: 33px;
  margin: 0;
  border-radius: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vx-color-palette .vx-color-palette-inner {
  width: 88%;
  height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  border-radius: 0px;
  overflow-x: auto;
}
.vx-color-palette .vx-color-palette-inner .vx-color-palette-item {
  width: 100%;
  min-width: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 44px;
  border-radius: 0px;
  margin: 0px 0px;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  /*
			&:first-child{
				.border-radius-left(4px)
			}
			&:last-child{
				.border-radius-right(4px)
			}
			*/
}
.vx-color-palette .vx-color-palette-inner .vx-color-palette-item .checkers {
  width: 100%;
  height: 100%;
  border-radius: 0px;
  position: absolute;
  margin: 0px;
}
.vx-color-palette .vx-color-palette-inner .vx-color-palette-item .color-swatch {
  position: absolute;
  border-radius: 0px;
  width: 100%;
  height: 100%;
}
.vx-color-palette .vx-color-palette-inner .vx-color-palette-item .active-marker {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  position: relative;
  background-color: #000000;
  border: 1px solid white;
  opacity: 0.4;
}
.vx-color-palette .vx-color-palette-inner .vx-color-palette-item.active .color-swatch {
  /*border: 2px solid @theme-color-offset;*/
}
.vx-color-palette.palette-sm {
  height: 38px;
}
.vx-color-palette.palette-sm .vx-color-palette-inner {
  height: 44px;
}
.vx-color-palette.palette-sm .vx-color-palette-inner .vx-color-palette-item {
  height: 38px;
}
.vx-color-palette.grid {
  height: unset;
}
.vx-color-palette.grid .vx-color-palette-inner {
  flex-wrap: wrap;
  height: unset;
  border-width: 0px;
}
.vx-color-palette.grid .vx-color-palette-inner .vx-color-palette-item {
  border-radius: 44rem;
  width: 38px;
  margin: 8px;
  min-width: unset;
  height: 38px;
}
.vx-color-palette.header {
  height: 38px;
}
.vx-color-palette.header .vx-color-palette-inner {
  height: 44px;
  border-width: 0px;
  width: 100%;
  justify-content: flex-start;
}
.vx-color-palette.header .vx-color-palette-inner .vx-color-palette-item {
  height: 38px;
}
.vx-color-sheet.pipes .vx-color-palette-generator ul {
  flex-direction: row;
  overflow-y: hidden;
  overflow-x: auto;
}
.vx-color-sheet.pipes .vx-color-palette-generator ul li {
  min-width: 44px;
}
.vx-color-sheet.pipes .vx-color-palette-generator ul li .vx-header {
  height: 100%;
  align-items: center;
  flex-direction: column;
}
.vx-color-sheet.pipes .vx-color-palette-generator ul li .vx-color-block h2 {
  transform: rotate(90deg);
  margin-top: 57px;
  text-align: left;
  width: 120px;
}
.vx-color-sheet.pipes .vx-color-palette-menu {
  right: unset;
  top: unset;
  left: 0px;
  bottom: 0px;
}
.vx-color-sheet.pipes .vx-color-palette-menu .vx-color-palette-menu-inner {
  margin-top: 0px;
}
.vx-color-palette-library ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.vx-color-palette-library .vx-header {
  width: 100%;
}
.vx-color-palette-library .vx-color-palette-inner {
  width: 100% !important;
}
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .vx-color-palette-menu {
    width: 80%;
    height: 100%;
    -webkit-transform: translate3d(160%, 0px, 0px);
  }
  .vx-color-palette-menu.open {
    -webkit-transform: translate3d(0%, 0px, 0px);
  }
  .vx-color-sheet.pipes .vx-color-palette-menu {
    width: 100%;
    height: 85%;
    -webkit-transform: translate3d(0px, 160%, 0px);
  }
  .vx-color-sheet.pipes .vx-color-palette-menu.open {
    -webkit-transform: translate3d(0px, 0%, 0px);
  }
  .vx-color-sheet.pipes .vx-color-block-active-palette {
    width: 100%;
    height: 44px;
  }
}
@media (min-width: 601px), (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-color-palette-menu {
    width: 50%;
    height: 100%;
    -webkit-transform: translate3d(160%, 0px, 0px);
  }
  .vx-color-palette-menu.open {
    -webkit-transform: translate3d(0%, 0px, 0px);
  }
  .vx-color-sheet.pipes .vx-color-palette-menu {
    width: 100%;
    height: 85%;
    -webkit-transform: translate3d(0px, 160%, 0px);
  }
  .vx-color-sheet.pipes .vx-color-palette-menu.open {
    -webkit-transform: translate3d(0px, 0%, 0px);
  }
  .vx-color-sheet.pipes .vx-color-picker {
    flex-direction: row;
  }
  .vx-color-sheet.pipes .vx-color-picker.picker_type_color_wheel .vx-color-picker-header {
    width: 33%;
  }
  .vx-color-sheet.pipes .vx-color-block-active-palette {
    width: 100%;
    height: 44px;
  }
}
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vx-color-sheet.menu-opened.color-selected .vx-color-palette-generator {
    width: 66%;
    align-self: flex-end;
  }
  .vx-color-sheet.menu-opened.color-selected .vx-color-picker-header {
    padding: 0px 8px;
  }
  .vx-color-sheet.menu-opened.color-selected .vx-color-picker .vx-color-picker-container {
    width: 94%;
  }
  .vx-color-sheet.menu-opened.color-selected .vx-color-palette-menu .vx-color-palette-menu-inner .vx-color-picker-header {
    width: 88%;
    max-width: 220px;
    margin-top: -100px;
  }
  .vx-color-sheet.pipes .vx-color-palette-menu {
    width: 100%;
    height: 70%;
  }
}
.canvas-modern .vx-color-picker {
  gap: 10px;
  padding: 6px 0 10px;
}
.canvas-modern .vx-color-picker .vx-color-picker-header {
  gap: 8px;
}
.canvas-modern .vx-color-picker .color-picker-inline {
  overflow: hidden;
  border: 1px solid #343840;
  border-radius: 10px;
  background: #1b1d21;
}
.canvas-modern .vx-color-sheet-palette {
  margin: 8px 0 12px;
}
.canvas-modern .vx-color-palette .vx-color-palette-inner {
  gap: 4px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  overflow-y: hidden;
}
.canvas-modern .vx-color-palette .vx-color-palette-toggle {
  width: 38px;
  height: 33px;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c7cad1;
}
.canvas-modern .vx-color-palette .vx-color-palette-inner .vx-color-palette-item {
  height: 34px;
  min-width: 30px;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 6px;
}
.canvas-modern .vx-color-palette .vx-color-palette-inner .vx-color-palette-item .checkers,
.canvas-modern .vx-color-palette .vx-color-palette-inner .vx-color-palette-item .color-swatch {
  border-radius: 4px;
}
.canvas-modern .vx-color-palette .vx-color-palette-inner .vx-color-palette-item.active {
  border-color: #f5f5f6;
  box-shadow: 0 0 0 1px #111214;
}
.canvas-modern .vx-color-palette.grid .vx-color-palette-inner {
  gap: 7px;
  padding: 8px;
}
.canvas-modern .vx-color-palette.grid .vx-color-palette-inner .vx-color-palette-item {
  width: 32px;
  height: 32px;
  margin: 0;
  border-radius: 7px;
}
.canvas-modern .vx-color-palette-menu {
  border-left: 1px solid #30333a;
  background: #151619;
  box-shadow: -16px 0 40px rgba(0, 0, 0, 0.36);
}
.color-palette-sheet {
  --palette-sheet-bg: #101113;
  --palette-sheet-surface: #17191d;
  --palette-sheet-surface-raised: #1d2025;
  --palette-sheet-border: #2d3037;
  --palette-sheet-border-strong: #3b3f48;
  --palette-sheet-text: #f5f5f6;
  --palette-sheet-muted: #969ba5;
  --palette-sheet-accent: #ed145b;
  --f7-popup-tablet-width: min(1120px, calc(100vw - 64px));
  --f7-popup-tablet-height: min(860px, calc(100vh - 48px));
  --f7-popup-tablet-border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--palette-sheet-border);
  background: var(--palette-sheet-bg);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}
.color-palette-sheet .page-content,
.color-palette-sheet .vx-color-sheet {
  background: var(--palette-sheet-bg) !important;
  color: var(--palette-sheet-text);
}
.color-palette-sheet .vx-color-palette-viewer {
  background: radial-gradient(circle at 50% -40%, rgba(237, 20, 91, 0.1), transparent 42%), var(--palette-sheet-bg);
}
.color-palette-sheet .vx-color-palette-generator {
  gap: 10px;
  padding: 14px 18px 12px;
  margin-bottom: 44px;
  box-sizing: border-box;
  transition: height 180ms ease, min-height 180ms ease;
}
.color-palette-sheet .vx-palette-editor-header {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
}
.color-palette-sheet .vx-palette-editor-header > div {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.color-palette-sheet .vx-palette-editor-header small {
  color: var(--palette-sheet-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.color-palette-sheet .vx-palette-editor-header strong {
  overflow: hidden;
  color: var(--palette-sheet-text);
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.color-palette-sheet .vx-palette-editor-header > span {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: #b8bcc5;
  font-size: 10px;
  font-weight: 700;
}
.color-palette-sheet .vx-palette-editor-header > span.is-editing {
  border-color: rgba(237, 20, 91, 0.46);
  background: rgba(237, 20, 91, 0.11);
  color: #ff6e9c;
}
.color-palette-sheet .vx-palette-editor-strip {
  min-height: 64px;
  flex: 1 1 auto;
  overflow: hidden;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 11px;
  background: #0c0d0f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
}
.color-palette-sheet .vx-palette-editor-strip li {
  min-width: 64px !important;
  min-height: 0 !important;
  flex: 1 1 0;
}
.color-palette-sheet .vx-palette-editor-strip li:first-child .vx-color-block,
.color-palette-sheet .vx-palette-editor-strip li:first-child .vx-checkers {
  border-radius: 10px 0 0 10px;
}
.color-palette-sheet .vx-palette-editor-strip li:last-child .vx-color-block,
.color-palette-sheet .vx-palette-editor-strip li:last-child .vx-checkers {
  border-radius: 0 10px 10px 0;
}
.color-palette-sheet .vx-palette-editor-strip li .vx-color-block {
  padding: 0 8px;
}
.color-palette-sheet .vx-palette-editor-strip li .vx-header {
  height: 100%;
  padding: 0 4px;
}
.color-palette-sheet .vx-palette-editor-strip li .vx-header h2 {
  font-size: 13px;
  letter-spacing: 0.02em;
}
.color-palette-sheet .vx-palette-editor-strip li .vx-header > .flex {
  margin: 0;
  flex-direction: column;
  gap: 6px;
}
.color-palette-sheet .vx-palette-editor-strip li .vx-header > .flex a {
  width: 26px;
  height: 26px;
}
.color-palette-sheet .vx-palette-editor-strip li .vx-color-block-active-palette {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.color-palette-sheet .vx-palette-editor-strip li .vx-color-block-active-palette .active-marker {
  width: 13px;
  height: 13px;
  border: 2px solid #ffffff;
  background: rgba(17, 18, 20, 0.45);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  opacity: 1;
}
.color-palette-sheet .vx-color-sheet.pipes.menu-opened .vx-color-palette-generator {
  height: 18%;
  min-height: 124px;
  max-height: 154px;
}
.color-palette-sheet .vx-color-sheet.pipes .vx-color-palette-menu {
  top: auto;
  right: auto;
  bottom: 44px;
  left: 0;
  width: 100%;
  height: calc(82% - 44px);
  min-height: 0;
  transform: translate3d(0, 120%, 0);
  border: 0;
  border-top: 1px solid var(--palette-sheet-border);
  background: var(--palette-sheet-bg);
  box-shadow: 0 -22px 56px rgba(0, 0, 0, 0.32);
}
.color-palette-sheet .vx-color-sheet.pipes .vx-color-palette-menu.open {
  transform: translate3d(0, 0, 0);
}
.color-palette-sheet .vx-color-palette-menu-inner {
  min-height: 0;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
.color-palette-sheet .vx-color-palette-menu .vx-color-picker {
  min-width: 0;
  min-height: 0;
  height: 100%;
  gap: 0;
  align-items: stretch;
  overflow: hidden;
  background: var(--palette-sheet-bg);
}
.color-palette-sheet .vx-color-picker-header {
  min-width: 0;
  box-sizing: border-box;
}
.color-palette-sheet .vx-color-picker-context {
  min-height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--palette-sheet-border);
}
.color-palette-sheet .vx-color-picker-context__swatch {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7), 0 4px 12px rgba(0, 0, 0, 0.32);
}
.color-palette-sheet .vx-color-picker-context__copy {
  min-width: 0;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
}
.color-palette-sheet .vx-color-picker-context__copy small {
  color: var(--palette-sheet-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.color-palette-sheet .vx-color-picker-context__copy strong {
  overflow: hidden;
  color: var(--palette-sheet-text);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.color-palette-sheet .vx-color-picker-context code {
  max-width: 96px;
  overflow: hidden;
  padding: 5px 7px;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 6px;
  background: #111214;
  color: #c7cad1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.color-palette-sheet .vx-color-picker-header .vx-color-picker-container {
  width: 100%;
  min-width: 0;
  padding: 4px 0;
  margin-top: 0 !important;
}
.color-palette-sheet .vx-color-picker-header .color-picker-inline {
  --f7-color-picker-wheel-width: 280px;
  width: 100%;
  max-width: 310px;
  overflow: hidden;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 12px;
  background: #111214;
}
.color-palette-sheet .vx-color-picker-header > .mt-1 {
  margin-top: 0 !important;
}
.color-palette-sheet .vx-color-picker-header .vx-select {
  overflow: hidden;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 9px;
  background: #111214;
}
.color-palette-sheet .vx-color-picker-header > .vx-flex-group {
  min-height: 42px;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.color-palette-sheet .vx-color-picker-header .vx-color-eyedrop {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 9px;
  background: #111214;
}
.color-palette-sheet .vx-color-picker-header .vx-color-eyedrop a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #d6d8de;
}
.color-palette-sheet .vx-color-picker-header .vx-color-eyedrop:hover {
  border-color: var(--palette-sheet-border-strong);
  background: #24272d;
}
.color-palette-sheet .vx-color-palette-library {
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: block;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--palette-sheet-bg);
  scrollbar-color: #454a54 transparent;
  scrollbar-width: thin;
}
.color-palette-sheet .vx-palette-library-content {
  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
  padding: 24px clamp(18px, 3vw, 38px) 40px;
  margin: 0 auto;
}
.color-palette-sheet .vx-palette-library-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--palette-sheet-border);
}
.color-palette-sheet .vx-palette-library-intro > div {
  min-width: 0;
}
.color-palette-sheet .vx-palette-library-intro small {
  display: block;
  margin-bottom: 5px;
  color: var(--palette-sheet-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.color-palette-sheet .vx-palette-library-intro h2 {
  margin: 0;
  color: var(--palette-sheet-text);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 760;
  letter-spacing: -0.03em;
}
.color-palette-sheet .vx-palette-library-intro p {
  margin: 5px 0 0;
  color: var(--palette-sheet-muted);
  font-size: 11px;
  line-height: 1.45;
}
.color-palette-sheet .vx-palette-library-mode {
  height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 11px;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  color: #b8bcc5;
  font-size: 10px;
  font-weight: 700;
}
.color-palette-sheet .vx-palette-library-mode.is-editing {
  border-color: rgba(237, 20, 91, 0.46);
  background: rgba(237, 20, 91, 0.11);
  color: #ff6e9c;
}
.color-palette-sheet .vx-palette-library-section {
  padding-top: 24px;
}
.color-palette-sheet .vx-palette-library-section + .color-palette-sheet .vx-palette-library-section {
  margin-top: 8px;
}
.color-palette-sheet .vx-palette-library-section__header {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.color-palette-sheet .vx-palette-library-section__header > div {
  min-width: 0;
}
.color-palette-sheet .vx-palette-library-section__header h3 {
  margin: 0;
  color: var(--palette-sheet-text);
  font-size: 13px;
  font-weight: 750;
}
.color-palette-sheet .vx-palette-library-section__header p {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--palette-sheet-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.color-palette-sheet .vx-palette-library-section__header > small {
  min-width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 7px;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 7px;
  background: #151619;
  color: #aeb2bc;
  font-size: 9px;
  font-weight: 800;
}
.color-palette-sheet .vx-palette-library-section__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 9px;
  background: var(--palette-sheet-surface);
  color: #c8cbd2;
  font-size: 12px;
}
.color-palette-sheet .vx-palette-library-section--saved .vx-palette-library-section__icon {
  border-color: rgba(237, 20, 91, 0.34);
  background: rgba(237, 20, 91, 0.1);
  color: #ff6e9c;
}
.color-palette-sheet .vx-palette-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.color-palette-sheet .vx-palette-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  outline: none;
  border: 1px solid var(--palette-sheet-border);
  border-radius: 12px;
  background: var(--palette-sheet-surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.color-palette-sheet .vx-palette-card:hover,
.color-palette-sheet .vx-palette-card:focus-visible {
  z-index: 1;
  transform: translateY(-1px);
  border-color: var(--palette-sheet-border-strong);
  background: var(--palette-sheet-surface-raised);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
.color-palette-sheet .vx-palette-card.is-current {
  border-color: rgba(237, 20, 91, 0.78);
  box-shadow: inset 0 0 0 1px rgba(237, 20, 91, 0.16), 0 12px 30px rgba(0, 0, 0, 0.2);
}
.color-palette-sheet .vx-palette-card .vx-color-palette {
  height: 46px;
  justify-content: stretch;
}
.color-palette-sheet .vx-palette-card .vx-color-palette-inner {
  width: 100% !important;
  height: 46px !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px !important;
  background: #0e0f11;
}
.color-palette-sheet .vx-palette-card .vx-color-palette-item {
  height: 46px !important;
  min-width: 34px;
  margin: 0;
  border: 0;
  border-radius: 0;
  transition: flex-grow 120ms ease, filter 120ms ease;
}
.color-palette-sheet .vx-palette-card .vx-color-palette-item:hover {
  flex-grow: 1.16;
  filter: brightness(1.08);
}
.color-palette-sheet .vx-palette-card .vx-color-palette-item .checkers,
.color-palette-sheet .vx-palette-card .vx-color-palette-item .color-swatch {
  border-radius: 0;
}
.color-palette-sheet .vx-palette-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #9297a2;
  font-size: 9px;
  font-weight: 700;
}
.color-palette-sheet .vx-palette-card > footer > i {
  color: #bfc2ca;
}
.color-palette-sheet .vx-palette-card__header {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.color-palette-sheet .vx-palette-card__header > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.color-palette-sheet .vx-palette-card__header span {
  overflow: hidden;
  color: #e8e9ec;
  font-size: 11px;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.color-palette-sheet .vx-palette-card__header small {
  color: #7f848f;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.color-palette-sheet .vx-palette-card__header > i {
  color: #777c87;
  font-size: 11px;
}
.color-palette-sheet .vx-palette-card__header button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #8e939d;
  cursor: pointer;
}
.color-palette-sheet .vx-palette-card__header button:hover {
  border-color: rgba(237, 20, 91, 0.3);
  background: rgba(237, 20, 91, 0.11);
  color: #ff6e9c;
}
.color-palette-sheet .vx-color-sheet-toolbar {
  z-index: 4;
  border-top: 1px solid var(--palette-sheet-border);
  background: rgba(16, 17, 19, 0.96) !important;
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(14px);
}
.color-palette-sheet .vx-color-sheet-toolbar > a,
.color-palette-sheet .vx-color-sheet-toolbar > div {
  width: 36px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c7cad1;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}
.color-palette-sheet .vx-color-sheet-toolbar > a:hover,
.color-palette-sheet .vx-color-sheet-toolbar > div:hover {
  border-color: var(--palette-sheet-border);
  background: #24272d;
  color: #ffffff;
}
@media (min-width: 760px) {
  .color-palette-sheet .vx-color-sheet.pipes.color-selected .vx-color-picker {
    display: grid;
    grid-template-columns: minmax(310px, 360px) minmax(0, 1fr);
  }
  .color-palette-sheet .vx-color-sheet.pipes.color-selected .vx-color-picker-header {
    width: 100% !important;
    height: 100%;
    gap: 12px;
    align-items: stretch;
    padding: 20px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid var(--palette-sheet-border);
    background: var(--palette-sheet-surface);
    scrollbar-color: #454a54 transparent;
    scrollbar-width: thin;
  }
}
@media (max-width: 759px) {
  .color-palette-sheet .vx-color-palette-generator {
    padding: 10px 12px;
  }
  .color-palette-sheet .vx-palette-editor-header > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 1px;
  }
  .color-palette-sheet .vx-palette-editor-header strong {
    font-size: 11px;
  }
  .color-palette-sheet .vx-color-sheet.pipes.menu-opened .vx-color-palette-generator {
    height: 20%;
    min-height: 118px;
  }
  .color-palette-sheet .vx-color-sheet.pipes .vx-color-palette-menu {
    height: calc(80% - 44px);
  }
  .color-palette-sheet .vx-color-sheet.pipes.color-selected .vx-color-picker {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .color-palette-sheet .vx-color-sheet.pipes.color-selected .vx-color-picker-header {
    width: 100% !important;
    gap: 10px;
    align-items: stretch;
    flex: 0 0 auto;
    padding: 16px;
    border-bottom: 1px solid var(--palette-sheet-border);
    background: var(--palette-sheet-surface);
  }
  .color-palette-sheet .vx-color-picker-header .color-picker-inline {
    --f7-color-picker-wheel-width: min(250px, calc(100vw - 64px));
    max-width: 280px;
  }
  .color-palette-sheet .vx-color-sheet.pipes.color-selected .vx-color-palette-library {
    height: auto;
    flex: 0 0 auto;
    overflow: visible;
  }
  .color-palette-sheet .vx-palette-library-content {
    padding: 18px 14px 32px;
  }
  .color-palette-sheet .vx-palette-library-intro {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .color-palette-sheet .vx-palette-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}
@media (max-width: 480px) {
  .color-palette-sheet .vx-palette-editor-header strong,
  .color-palette-sheet .vx-palette-library-section__header p {
    display: none;
  }
  .color-palette-sheet .vx-palette-library-grid {
    grid-template-columns: 1fr;
  }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
  position: relative;
}
.dropdown-toggle {
  white-space: nowrap;
  height: 100%;
  width: 100%;
}
.vx-drop-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  display: none;
  float: left;
  min-width: 44px;
  min-height: 44px;
  padding: 0.25rem 0;
  margin: 0.25rem 0 0;
  color: grey;
  text-align: left;
  list-style: none;
  background-color: white;
  background-clip: padding-box;
  border: 1px solid grey;
}
/*
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
*/
.dropup .vx-drop-menu {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: 0.25rem;
}
.dropright .vx-drop-menu {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: 0.25rem;
}
.dropleft .vx-drop-menu {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: 0.25rem;
  z-index: 2;
}
.dropdown-item {
  padding: 0.5rem 0.75rem;
  min-width: 44px;
  min-height: 44px;
  clear: both;
  font-weight: normal;
  color: grey;
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}
.vx-drop-menu.visible {
  display: block;
}
.dropdown-header {
  display: block;
  padding: 0.25rem 0.25rem;
  margin-bottom: 0;
  color: grey;
  white-space: nowrap;
}
.dropdown-item-text {
  display: block;
  padding: 0.25rem 0.25rem;
  color: grey;
}
.canvas-modern .vx-drop-menu {
  min-width: 170px;
  padding: 5px;
  border: 1px solid #3a3e46;
  border-radius: 10px;
  background: #191b1f;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
  color: #d5d7dc;
}
.canvas-modern .dropdown-item {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 7px;
  color: #d5d7dc;
}
.canvas-modern .dropdown-item:hover,
.canvas-modern .dropdown-item:focus {
  background: #272a30;
  color: #ffffff;
}
.canvas-modern .dropdown-header,
.canvas-modern .dropdown-item-text {
  color: #8f939d;
}
.canvas-modern .vx-dropover-dialog-transition {
  border: 1px solid #3a3e46;
  border-radius: 10px;
  background: #191b1f;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.46);
}

.transition-zoom-in {
  animation: zoominFrames ease-out 0.1s;
  animation-iteration-count: 1;
  transform-origin: 50% 75%;
  -webkit-animation: zoominFrames ease-out 0.1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 75%;
  -moz-animation: zoominFrames ease-out 0.1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 75%;
  -o-animation: zoominFrames ease-out 0.1s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 75%;
  -ms-animation: zoominFrames ease-out 0.1s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 75%;
}
@keyframes zoominFrames {
  0% {
    opacity: 0.5;
    transform: translate(0px, 0px) scaleX(0.98) scaleY(0.98);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px) scaleX(1) scaleY(1);
  }
}
@-moz-keyframes zoominFrames {
  0% {
    opacity: 0.5;
    -moz-transform: translate(0px, 0px) scaleX(0.98) scaleY(0.98);
  }
  100% {
    opacity: 1;
    -moz-transform: translate(0px, 0px) scaleX(1) scaleY(1);
  }
}
@-webkit-keyframes zoominFrames {
  0% {
    opacity: 0.5;
    -webkit-transform: translate(0px, 0px) scaleX(0.98) scaleY(0.98);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(0px, 0px) scaleX(1) scaleY(1);
  }
}
@-o-keyframes zoominFrames {
  0% {
    opacity: 0.5;
    -o-transform: translate(0px, 0px) scaleX(0.98) scaleY(0.98);
  }
  100% {
    opacity: 1;
    -o-transform: translate(0px, 0px) scaleX(1) scaleY(1);
  }
}
@-ms-keyframes zoominFrames {
  0% {
    opacity: 0.5;
    -ms-transform: translate(0px, 0px) scaleX(0.98) scaleY(0.98);
  }
  100% {
    opacity: 1;
    -ms-transform: translate(0px, 0px) scaleX(1) scaleY(1);
  }
}
.transition-fade-in {
  animation: fadeInFrames ease-in-out 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeInFrames ease-in-out 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeInFrames ease-in-out 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeInFrames ease-in-out 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeInFrames ease-in-out 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
@keyframes fadeInFrames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadeInFrames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadeInFrames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes fadeInFrames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-ms-keyframes fadeInFrames {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.transition-fade-out {
  animation: fadeOutFrames ease-in-out 0.3s;
  animation-iteration-count: 1;
  transform-origin: 50% 50%;
  -webkit-animation: fadeOutFrames ease-in-out 0.3s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: 50% 50%;
  -moz-animation: fadeOutFrames ease-in-out 0.3s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin: 50% 50%;
  -o-animation: fadeOutFrames ease-in-out 0.3s;
  -o-animation-iteration-count: 1;
  -o-transform-origin: 50% 50%;
  -ms-animation: fadeOutFrames ease-in-out 0.3s;
  -ms-animation-iteration-count: 1;
  -ms-transform-origin: 50% 50%;
}
@keyframes fadeOutFrames {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes fadeOutFrames {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes fadeOutFrames {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes fadeOutFrames {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes fadeOutFrames {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.transition-1 {
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.slide-in-down {
  opacity: 0;
  -webkit-transform: translate3d(0px, -100px, 0px);
}
.slide-in-down.enter {
  -webkit-transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.slide-in-down.leave-to {
  display: none;
}
/**
 * ----------------------------------------
 * animation scale-down-ver-top
 * ----------------------------------------
 */
.scale-down-ver-top {
  -webkit-animation: scale-down-ver-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: scale-down-ver-top 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes scale-down-ver-top {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}
@keyframes scale-down-ver-top {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scaleY(0.3);
    transform: scaleY(0.3);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}
/**
 * ----------------------------------------
 * animation scale-up-ver-top
 * ----------------------------------------
 */
.scale-up-ver-top {
  -webkit-animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: scale-up-ver-top 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes scale-up-ver-top {
  0% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}
@keyframes scale-up-ver-top {
  0% {
    -webkit-transform: scaleY(0.4);
    transform: scaleY(0.4);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
  100% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
  }
}
/**
 * ----------------------------------------
 * animation fade-top
 * ----------------------------------------
 */
.fade-top {
  -webkit-animation: fade-top 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  animation: fade-top 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}
@-webkit-keyframes fade-top {
  0% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-top {
  0% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
}
.fade-top-leave-active {
  -webkit-animation: fade-top-leave-active 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  animation: fade-top-leave-active 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes fade-top-leave-active {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
  }
}
@keyframes fade-top-leave-active {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(-25px);
    transform: translateY(-25px);
    opacity: 0;
  }
}

/*****/
/**/
/*gray with green accent*******
@color-primary: #2D2D2D;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #C5D961;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Vintage Cuban Sheet Music*******
@color-primary: #333333;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F6FBF4;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FB9A63;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Quiet Cry*******
@color-primary: #1C1D21;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #31353D;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #92CDCF;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Good as Gold*******
@color-primary: #2E2E2C;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #FFFFF0;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FFCC33;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Jonathan*******
@color-primary: #595952;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #F2F2F2;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #30DFF2;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Smoked Salmon*******
@color-primary: #2E2E28;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #707070;
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #FF635C;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*Web Design*******/
/*pumpkin*******
@color-primary: #262626;
@color-primary-text: contrast(@color-primary);
@color-primary-border: darken(@color-primary, 90%);

@color-primary-offset: #404040; 
@color-primary-offset-text: contrast(@color-primary-offset);
@color-primary-offset-border: darken(@color-primary-offset, 90%);

@color-accent: #f13d25;
@color-accent-text: contrast(@color-accent);
@color-accent-border: darken(@color-accent, 50%);
/******/
/*F7 THEME*/
:root {
  --f7-theme-color: #ED145B;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #262626;
  --f7-color-gray: #404040;
  --f7-color-gray-rgb: 64, 64, 64;
  --f7-color-gray-shade: #2e2e2e;
  --f7-color-gray-tint: #585757;
}
/******/
/*
@color-primary: #ffffff;
@color-light: #ffffff;
@color-dark: #202020; //f7 dark theme uses #1c1c1d
@color-secondary: rgb(228, 228, 228);
@color-offset: #202020;
@color-accent: #1b95f8;
*/
/*@toolbar-background-color: fade(@color-primary, @fade);*/
/*****BORDERED THEME****************
@toolbar-size: 44px;
@toolbar-padding: 4px;
@toolbar-outer-size: @toolbar-size + @toolbar-padding + 2px;
@toolbar-border-width: 1px;
@toolbar-border-radius: @rounded;
@toolbar-border-color: @color-offset;
/***********************************/
:root {
  --f7-theme-color: #ed145b;
  --f7-theme-color-rgb: 237, 20, 91;
  --f7-theme-color-shade: #c90f4c;
  --f7-theme-color-tint: #f03a75;
  --f7-panel-bg-color: #151619;
  --f7-color-gray: #30333a;
  --f7-color-gray-rgb: 48, 51, 58;
  --f7-color-gray-shade: #22252a;
  --f7-color-gray-tint: #454951;
}
/**********************
* INFINITE SLIDER
/**********************/
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.infinite-slider-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.infinite-slider-track {
  display: flex;
  width: fit-content;
  height: 100%;
  animation: scroll linear infinite;
}
.slide-original,
.slide-clone {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
}
/**********************
* ONBOARDING
/**********************/
.onboarding-flow .progress-bar {
  background-color: #f0f0f0;
  /* Grey background */
  border-radius: 0.5rem;
  /* Rounded corners */
  height: 0.5rem;
  /* Fixed height */
  position: relative;
  /* Allows for absolute positioning of the filled part */
  width: 100%;
  margin-top: 1rem;
}
.onboarding-flow .progress-bar-fill {
  background-color: #f472b6;
  /* Tailwind's pink-500 */
  border-radius: 0.5rem;
  /* Rounded corners */
  height: 100%;
  /* Full height of the container */
  width: 0%;
  /* Start with 0% width */
  transition: width 0.5s ease-in-out;
  /* Smooth transition */
  position: relative;
}
.onboarding-flow .progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1rem;
  /* Size of the circle */
  height: 1rem;
  border-radius: 50%;
  background-color: #f472b6;
  /* Tailwind's pink-500 */
}
/**********************
* OUTSETA
/**********************/
/*
#widget-Outseta_auth > div > div > div > div > div > div.o--selectPlan > div:nth-child(2) > div > div > div > ul{
    display: none !important;
}
*/
.o--PlanSelector--unavailable {
  display: none !important;
}
.o--Widget--popupBg {
  z-index: 9999999 !important;
}
#widget-Outseta_auth > div > div > div > div > div > div.state-forgotPassword > form > div.o--FormGroup--formGroup > button.o--Button--btn.o--Button--borderWidth-1px.o--Button--buttonStyle-solid.o--Button--cornerShape-rounded.o--Button--displayMode-dark.o--Button--buttonType-cancel {
  display: none !important;
}
#widget-Outseta_auth > div > div > div > div > div > div.state-forgotPasswordConfirmation > div > button {
  display: none !important;
}
#widget-Outseta_auth > div > div > div > div > div > div.state-login {
  visibility: hidden !important;
}
#widget-Outseta_auth .o--Checkout--checkout > div.o--Checkout--paymentMethod.o--SectionGroup--sectionGroup > div > div::after {
  content: " ";
  background-image: url(../assets/stripe.png);
  width: 100%;
  height: 33px;
  background-size: 126px;
  background-repeat: no-repeat;
  display: block;
  background-position: left;
}
/**********************
* F7
/**********************/
.panel {
  background-color: black !important;
}
.panel .item-divider {
  background-color: black !important;
}
.panel .list ul {
  background-color: black !important;
}
.panel {
  top: 0px !important;
  height: 100%;
}
.panel-backdrop {
  top: 0px;
  height: 100%;
}
.title-logo svg {
  width: 52px;
}
.app-page .page-content {
  overflow: hidden !important;
  padding: 0px;
}
.login-screen {
  background-color: #000000ad !important;
  height: 100%;
  top: 0px;
}
.login-screen .page,
.login-screen .page-content {
  width: 100% !important;
  height: 100%;
  background-color: transparent !important;
}
.login-screen .page-content {
  display: flex;
  justify-content: center;
  align-items: start;
  padding-top: 4%;
}
.login-screen .page-content .item-input .item-inner {
  padding: 12px;
  border: 1px solid #a2a2a2;
  border-radius: 4px;
}
.login-screen .page-content .item-input .item-inner .item-input-wrap::after {
  display: none;
}
/**********************
* IEUI
/**********************/
.ieui-icon-svg svg {
  width: 100%;
  height: auto;
}
/**********************
* OUTSETA
/**********************/
.o--Widget--popup {
  z-index: 99999999;
}
/**********************
* VL
/**********************/
.dashboard-view {
  background-color: #171717;
}
.overflow-webview-fix {
  /*
    overscroll-behavior: contain; 
    will-change: transform;
    */
}
.vl-sample-palette {
  bottom: 5rem;
}
.vl-background-blur {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.25);
}
.vl-menubar {
  height: 7rem;
  z-index: 999999;
}
.vl-export canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}
.vl-iconsheet .vl-resource svg {
  width: 100%;
  height: 100%;
}
.vl-resource svg path {
  fill: #ffffff !important;
}
.vl-resource .vl-resource-lock {
  width: 32px;
  height: 32px;
  border-radius: 99px;
  background-color: #ffffff61;
  color: #484848;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vl-fab-buttons a {
  color: #f5f5f6;
}
.vl-fab-buttons svg path {
  fill: #f5f5f6;
}
.subscribe-window {
  -webkit-box-shadow: 0px 38px 30px 1px rgba(0, 0, 0, 0.44) !important;
  -moz-box-shadow: 0px 38px 30px 1px rgba(0, 0, 0, 0.44) !important;
  box-shadow: 0px 38px 30px 1px rgba(0, 0, 0, 0.44) !important;
}
.subscribe-window .page-content {
  overflow-x: hidden;
}
/**********************
* VL IAP RESOURCE LOCKS
/**********************/
#templates .vl-resource > div {
  justify-content: flex-end;
  align-items: flex-start;
}
#templates .vl-resource-lock {
  margin: 8px;
}
.vx-toolbar-item .vl-resource-lock {
  margin-left: 22px;
  margin-top: 22px;
  background: transparent;
}
.vl-export .vl-resource-lock {
  margin-left: 62px;
  background: transparent;
  color: white;
}
/**********************
* VX
/**********************/
.fullscreen-popup {
  width: 100% !important;
  height: 100% !important;
  top: 0px !important;
  left: 0px !important;
  margin: 0px !important;
  padding: 0px !important;
}
.fullscreen-popup .page {
  /*top: env(safe-area-inset-top);*/
}
.fullscreen-popup .page-content {
  padding-bottom: 0px !important;
}
.navbar-toolbar a {
  font-size: 18px;
}
/*
.vx-panel.vx-full{
    .vx-header{
        margin-top: env(safe-area-inset-top);
    }
}
*/
.vx-action-toolbar {
  overflow: hidden;
}
.vx-action-toolbar .vx-toolbar-inner {
  width: 128px !important;
  align-items: center !important;
  scrollbar-gutter: stable;
  scrollbar-width: none;
}
.scrollbar-hidden {
  scrollbar-gutter: stable !important;
  scrollbar-width: none !important;
}
/*
.vx-action-toolbar.vx-toolbar.left-sm{
    pointer-events: none;
    .vx-toolbar-inner{
        pointer-events: all;
        height: min-content;
        border-radius: @rounded;
        backdrop-filter: blur(10px);
        background-color: fade(@color-primary, 50%);
    }
}
*/
.options-bar {
  bottom: 8px;
  top: unset !important;
  height: 56px !important;
  padding-left: 52px;
  overflow: hidden;
  align-items: flex-start !important;
}
.options-bar .vx-toolbar-inner {
  background-color: transparent;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  height: 72px !important;
}
.options-bar .vx-toolbar-item {
  margin: 0px 0px;
  height: 56px !important;
  width: 56px !important;
}
.options-bar .vx-toolbar-item:not(.vx-action-menu-item) a {
  background-color: #17181b;
  border-radius: 14px;
  height: 38px !important;
  width: 52px !important;
}
.options-bar .vx-action-menu-item {
  /*background-color: @color-primary;*/
  flex-direction: column;
  width: max-content !important;
}
.options-bar .vx-action-menu-item a {
  background-color: #17181b;
  height: 38px !important;
  width: 52px !important;
  border-radius: 0.75rem;
}
.options-bar .vx-control-group {
  column-gap: 0.5rem;
}
.vx-control-group .segmented {
  width: 100%;
}
.vx-control-group .segmented .vx-trigger-input {
  margin: 0px 4px;
}
.active .vgx-touch-pen-icon svg path {
  fill: #ed145b !important;
}
.vx-color-palette-library .media-item .item-inner {
  padding: 0px 0px;
}
.vx-color-palette-library .media-item .item-inner::after {
  display: none;
}
.vx-color-palette-library .media-item .item-inner .vx-flex-group {
  margin: 0px;
}
.vx-color-palette-library .media-item {
  margin: 8px 0px;
}
/*
.promptsheet-panel .toolbar {
    background: transparent !important;
}
*/
.promptsheet-panel .toolbar-inner {
  padding: 0px 4px !important;
}
.style-builder-panel .toolbar-inner {
  padding: 0px 4px !important;
}
.vx-color-sheet .toolbar-bottom a {
  width: 32px;
  height: 32px;
}
/**********************
* COLOR PALETTE PICKER
/**********************/
.vx-color-palette-picker {
  pointer-events: none;
}
.vx-color-palette-picker .vx-color-palette-item {
  width: 32px !important;
  height: 32px !important;
  border-radius: 32px !important;
  box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.75);
  pointer-events: all;
}
.vx-color-palette-picker .vx-color-palette-item.active {
  border: 2px solid #ed145b;
}
.vx-color-palette-picker .vx-color-palette {
  justify-content: start;
  align-items: center;
  height: 44px !important;
}
.vx-color-palette-picker .vx-color-palette-inner {
  width: 100% !important;
}
.vx-color-palette-picker .vx-color-palette-inner {
  column-gap: 6px;
}
/**********************
* F7
/**********************/
.list-item-no-wrap .item-title {
  white-space: normal !important;
}
.framework7-root {
  padding-top: 0px !important;
}
.toast {
  backdrop-filter: blur(0px) !important;
  filter: blur(0px) !important;
  -webkit-backdrop-filter: blur(0px) !important;
  background: transparent !important;
}
.toast .toast-content {
  -webkit-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
  box-shadow: -1px 0px 19px -6px rgba(0, 0, 0, 0.75);
}
.page-content {
  overscroll-behavior: contain;
  will-change: transform;
}
/** tailwind md **/
@media (min-width: 768px) {
  .popup:not(.fullscreen-popup) .page-content {
    padding-bottom: 0px !important;
  }
  .vx-color-sheet .toolbar-bottom {
    margin-bottom: 0px !important;
  }
}
/**********************
* DEVICE LG
/**********************/
.vx-canvas-ui-container {
  width: 100%;
  height: 100%;
}
@media (min-width: 601px) {
  .vx-canvas-ui-container {
    width: calc(100% - 44px);
  }
  .vx-action-toolbar .vx-toolbar-item {
    height: 52px !important;
  }
  .options-bar {
    margin-bottom: 0px;
  }
}
/**********************
* DEVICE SM
/**********************/
@media (min-width: 280px) and (max-width: 600px) and (orientation: portrait) {
  .popup.full-screen-notch {
    top: 0px !important;
    height: 100% !important;
  }
  .options-bar {
    margin-bottom: 3rem;
  }
  .vx-control-toolbar {
    overflow: hidden;
  }
  .vx-control-toolbar .vx-toolbar-inner {
    width: 100% !important;
    align-items: center !important;
  }
}
/**********************
* DEVICE LANDSCAPE
/**********************/
@media (min-width: 568px) and (max-width: 812px) and (max-height: 414px) and (orientation: landscape) {
  .vl-menubar {
    height: 6rem;
  }
  .vx-toolbar.right-lg,
  .vx-toolbar.left-lg {
    padding-top: 44px;
  }
  .vx-toolbar.right-lg .vx-toolbar-inner,
  .vx-toolbar.left-lg .vx-toolbar-inner {
    height: 100%;
  }
  .options-bar {
    margin-bottom: 0rem;
  }
  .vx-control-toolbar {
    overflow: hidden;
  }
  .vx-control-toolbar .vx-toolbar-inner {
    width: 128px !important;
    align-items: center !important;
  }
}
/**********************
* NOTCH SUPPORT
/**********************/
/* PHONE PORTRAIT */
@media screen and (max-width: 1024px) and (orientation: portrait) and (max-height: 1366px) {
  .popup-backdrop {
    background-color: #17181b !important;
  }
  .home-page {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: 0px;
  }
  .home-page .canvas-safe-area-width {
    display: none;
    width: 0px;
  }
  .home-page .canvas-safe-area-height {
    display: block;
    height: env(safe-area-inset-top);
  }
  .home-page .canvas-safe-area-height.safe-bottom {
    height: env(safe-area-inset-bottom);
  }
}
/* PHONE LANDSCAPE */
@media screen and (max-width: 1024px) and (orientation: landscape) and (max-height: 500px) {
  .popup-backdrop {
    background-color: #17181b !important;
  }
  .promptsheet-textarea-container {
    height: 52px !important;
  }
  .promptsheet-textarea-container textarea {
    height: 52px !important;
  }
  .vx-panel.vx-full-sm-landscape {
    height: 100%;
  }
  .home-page {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: 0px;
  }
  .home-page .canvas-safe-area-width {
    display: block;
    width: env(safe-area-inset-left);
  }
  .home-page .canvas-safe-area-width.safe-right {
    display: block;
    width: env(safe-area-inset-right);
  }
  .home-page .canvas-safe-area-height {
    display: none;
    height: 0px;
  }
}
/* TABLET AND LARGER (SM AND UP) */
@media screen and (min-width: 1025px), screen and (orientation: landscape) and (min-height: 501px) and (max-width: 1024px), screen and (orientation: portrait) and (min-height: 1367px) {
  .home-page {
    padding-left: 0px;
    padding-top: 0px;
  }
  .home-page .canvas-safe-area-width {
    display: none;
    width: 0px;
  }
  .home-page .canvas-safe-area-height {
    display: none;
    height: 0px;
  }
  .vx-control-toolbar {
    overflow: hidden;
  }
  .vx-control-toolbar .vx-toolbar-inner {
    width: 128px !important;
    align-items: center !important;
  }
}
/* any overflow:auto / scrollable panels */
.vx-scroll-y {
  overflow-y: auto;
  touch-action: pan-y;
  /* allow vertical scroll gestures */
  overscroll-behavior: contain;
  /* avoid scroll chaining weirdness */
}
.vx-scroll-x {
  overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior: contain;
}
/* default: allow the page to scroll if user swipes on canvas */
.vgx-artboard canvas {
  touch-action: manipulation;
  /* clicks/taps okay, no aggressive capture */
}
/* when user enters a draw/drag mode, flip to none so you can preventDefault safely */
.vgx-artboard canvas.drawing {
  touch-action: none;
  /* you own the gesture now */
}
.glyph-panel svg {
  width: 70%;
  height: 70%;
}
/**********************
* PROJECT PICKER OVERLAY
**********************/
.project-picker-enter-active,
.project-picker-leave-active {
  transition: opacity 0.25s ease;
}
.project-picker-enter-active .project-picker-panel,
.project-picker-leave-active .project-picker-panel {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-picker-enter-active .project-picker-backdrop,
.project-picker-leave-active .project-picker-backdrop {
  transition: opacity 0.25s ease;
}
.project-picker-enter,
.project-picker-leave-to {
  opacity: 0;
}
.project-picker-enter .project-picker-panel,
.project-picker-leave-to .project-picker-panel {
  transform: translateY(100%);
}
.dashboard-quick-start .dashboard-quick-start-buttons > button,
.dashboard-quick-start .dashboard-quick-start-buttons > div {
  min-width: 9rem;
  height: 3.5rem;
}

.home-menu-link.tab-link-active {
  background-color: #464646;
}
/**********************
* MODERN CLOUD DASHBOARD
**********************/
.dashboard-modern {
  --dash-accent: #ed145b;
  --dash-accent-soft: rgba(237, 20, 91, 0.14);
  --dash-bg: #111214;
  --dash-sidebar: #151619;
  --dash-topbar: rgba(20, 21, 24, 0.96);
  --dash-surface: #1b1d21;
  --dash-surface-raised: #22252a;
  --dash-surface-hover: #282b31;
  --dash-border: #30333a;
  --dash-border-strong: #41454e;
  --dash-text: #f7f7f8;
  --dash-text-muted: #9a9da6;
  --dash-text-faint: #6f737d;
  --dash-blue: #5c8dff;
  --dash-violet: #9d76ff;
  --dash-green: #45b995;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dash-bg);
  color: var(--dash-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dashboard-modern *,
.dashboard-panel-menu * {
  box-sizing: border-box;
}
.dashboard-modern button,
.dashboard-panel-menu button {
  color: inherit;
  font: inherit;
}
.dash-shell {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.dash-sidebar {
  width: 236px;
  flex: 0 0 236px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 14px 14px;
  overflow: hidden;
  background: var(--dash-sidebar);
  border-right: 1px solid var(--dash-border);
}
.dash-sidebar-main {
  min-height: 0;
}
.dash-brand {
  display: flex !important;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 10px;
  margin-bottom: 30px;
  color: var(--dash-text) !important;
}
.dash-brand > * {
  display: block;
  width: 132px;
  max-height: 42px;
}
.dash-brand svg {
  width: 100%;
  height: 100%;
}
.dash-nav-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dash-nav-label,
.dashboard-panel-section > h3 {
  margin: 0 10px;
  color: var(--dash-text-faint);
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dash-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-nav-link {
  position: relative;
  display: flex !important;
  align-items: center;
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--dash-text-muted) !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dash-nav-link:hover {
  background: rgba(255, 255, 255, 0.045);
  color: var(--dash-text) !important;
}
.dash-nav-link.is-active {
  background: var(--dash-surface-raised);
  border-color: var(--dash-border);
  color: var(--dash-text) !important;
}
.dash-nav-icon {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  font-size: 15px;
}
.dash-nav-text {
  margin-left: 11px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-nav-marker {
  position: absolute;
  top: 11px;
  right: -15px;
  width: 3px;
  height: 20px;
  border-radius: 3px 0 0 3px;
  background: var(--dash-accent);
}
.dash-credit-card {
  margin-top: 24px;
  padding: 12px;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
}
.dash-credit-heading {
  display: flex;
  align-items: center;
  gap: 9px;
}
.dash-credit-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  place-items: center;
  border-radius: 7px;
  background: var(--dash-accent-soft);
  color: #ff729f;
}
.dash-credit-heading strong,
.dash-credit-heading small {
  display: block;
}
.dash-credit-heading strong {
  font-size: 12px;
  line-height: 16px;
}
.dash-credit-heading small {
  color: var(--dash-text-faint);
  font-size: 10px;
  line-height: 14px;
}
.dash-credit-card > div:last-child {
  margin: 10px 0 0 !important;
}
.dash-credit-card > div:last-child > div,
.dash-credit-card > div:last-child > div > div,
.dash-credit-card > div:last-child button {
  width: 100% !important;
}
.dash-credit-card > div:last-child button {
  height: 32px;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 8px !important;
  border-color: var(--dash-border-strong) !important;
  color: var(--dash-text) !important;
}
.dash-sidebar-footer {
  padding-top: 14px;
  border-top: 1px solid var(--dash-border);
}
.dash-account-card {
  display: flex !important;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 8px;
  border-radius: 9px;
  color: var(--dash-text) !important;
  transition: background-color 140ms ease;
}
.dash-account-card:hover {
  background: var(--dash-surface-raised);
}
.dash-account-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--dash-border-strong);
  border-radius: 50%;
  background: #26292f;
}
.dash-account-copy {
  min-width: 0;
  margin-left: 9px;
}
.dash-account-copy strong,
.dash-account-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-account-copy strong {
  font-size: 12px;
  line-height: 16px;
}
.dash-account-copy small {
  color: var(--dash-text-faint);
  font-size: 10px;
  line-height: 14px;
}
.dash-account-chevron {
  margin-left: auto;
  color: var(--dash-text-faint);
  font-size: 11px;
}
.dash-main {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 84% -20%, rgba(92, 141, 255, 0.08), transparent 34%), var(--dash-bg);
}
.dash-topbar {
  position: relative;
  z-index: 30;
  min-height: 78px;
  flex: 0 0 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 28px;
  background: var(--dash-topbar);
  border-bottom: 1px solid var(--dash-border);
  backdrop-filter: blur(16px);
}
.dash-topbar-title {
  min-width: 0;
  display: block;
}
.dash-topbar-title h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 680;
  line-height: 26px;
  letter-spacing: -0.02em;
}
.dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dash-topbar-new,
.dash-primary-button {
  width: auto !important;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid #ff3678;
  border-radius: 8px;
  background: var(--dash-accent);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 140ms ease, transform 140ms ease;
}
.dash-topbar-new:hover,
.dash-primary-button:hover {
  background: #fa2a6e;
  transform: translateY(-1px);
}
.dash-icon-button {
  display: grid !important;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  place-items: center;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: var(--dash-surface);
  color: var(--dash-text-muted) !important;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dash-icon-button:hover {
  background: var(--dash-surface-hover);
  border-color: var(--dash-border-strong);
  color: var(--dash-text) !important;
}
.dash-tabs {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}
.viui.desktop.dashboard-modern .dash-tabs > .dash-tab.page-content {
  height: 100%;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: transparent;
  scrollbar-color: #40434a transparent;
  scrollbar-width: thin;
}
.dash-content {
  width: 100%;
  max-width: 1580px;
  margin: 0 auto;
  padding: 26px 28px 80px;
}
.dash-narrow-content {
  max-width: 1120px;
}
.dash-surface {
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  background: var(--dash-surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}
.dash-section,
.dash-surface + .dash-surface,
.dash-section + .dash-surface,
.dash-surface + .dash-section {
  margin-top: 28px;
}
.dash-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.dash-surface > .dash-section-heading,
.dash-surface > .dash-ai-header {
  margin: 0;
  padding: 20px 22px;
  border-bottom: 1px solid var(--dash-border);
}
.dash-section-heading h2,
.dash-ai-header h2,
.dash-library-title h2 {
  margin: 0;
  color: var(--dash-text);
  font-size: 17px;
  font-weight: 680;
  line-height: 23px;
  letter-spacing: -0.01em;
}
.dash-eyebrow {
  margin: 0 0 3px;
  color: var(--dash-text-faint);
  font-size: 9px;
  font-weight: 800;
  line-height: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dash-section-copy {
  max-width: 460px;
  margin: 0;
  color: var(--dash-text-muted);
  font-size: 12px;
  line-height: 18px;
  text-align: right;
}
.dash-quick-start-heading {
  align-items: center;
}
.dash-action-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
}
.dash-action-card {
  width: 100% !important;
  min-width: 0;
  min-height: 74px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 9px;
  background: var(--dash-surface-raised);
  color: var(--dash-text) !important;
  text-align: left;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.dash-action-card:hover {
  background: var(--dash-surface-hover);
  border-color: var(--dash-border-strong);
  transform: translateY(-1px);
}
.dash-action-card-primary {
  border-color: rgba(237, 20, 91, 0.45);
  background: linear-gradient(140deg, rgba(237, 20, 91, 0.22), rgba(237, 20, 91, 0.08));
}
.dash-action-card-primary:hover {
  border-color: var(--dash-accent);
  background: linear-gradient(140deg, rgba(237, 20, 91, 0.3), rgba(237, 20, 91, 0.12));
}
.dash-upload-action {
  padding: 0;
}
.dash-upload-action-inner {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px;
  cursor: pointer;
}
.dash-action-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--dash-accent-soft);
  color: #ff729f;
  font-size: 14px;
}
.dash-action-icon-blue {
  background: rgba(92, 141, 255, 0.14);
  color: #80a7ff;
}
.dash-action-icon-violet {
  background: rgba(157, 118, 255, 0.14);
  color: #b398ff;
}
.dash-action-icon-green {
  background: rgba(69, 185, 149, 0.14);
  color: #65d2af;
}
.dash-action-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.dash-action-copy strong,
.dash-action-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-action-copy strong {
  font-size: 12px;
  line-height: 17px;
}
.dash-action-copy small {
  margin-top: 2px;
  color: var(--dash-text-faint);
  font-size: 9px;
  line-height: 14px;
}
.dash-action-arrow {
  color: #ff729f;
  font-size: 11px;
}
.dash-recent-row {
  display: flex;
  gap: 12px;
  padding-bottom: 6px;
  overflow-x: auto;
  scrollbar-color: #40434a transparent;
  scrollbar-width: thin;
}
.dash-project-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: var(--dash-surface);
  outline: none;
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.dash-project-card.is-compact {
  width: 188px;
  flex: 0 0 188px;
}
.dash-project-card:hover,
.dash-project-card:focus-visible {
  border-color: var(--dash-border-strong);
  background: var(--dash-surface-raised);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.dash-project-card.is-selected {
  border-color: var(--dash-accent);
  box-shadow: 0 0 0 1px var(--dash-accent);
}
.dash-project-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(45deg, #202226 25%, transparent 25%), linear-gradient(-45deg, #202226 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #202226 75%), linear-gradient(-45deg, transparent 75%, #202226 75%), #272a2f;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-size: 16px 16px;
}
.dash-project-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 180ms ease;
}
.dash-project-card:hover .dash-project-preview img {
  transform: scale(1.025);
}
.dash-project-preview-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 58%, rgba(0, 0, 0, 0.36));
  pointer-events: none;
}
.dash-project-meta,
.dash-folder-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 10px 11px 11px;
}
.dash-project-meta {
  flex-direction: column;
  align-items: flex-start;
}
.dash-project-meta strong,
.dash-project-meta span,
.dash-folder-meta strong,
.dash-folder-meta span {
  max-width: 100%;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-project-meta strong,
.dash-folder-meta strong {
  width: 100%;
  color: var(--dash-text);
  font-size: 11px;
  line-height: 16px;
}
.dash-project-meta span,
.dash-folder-meta span {
  margin-top: 1px;
  color: var(--dash-text-faint);
  font-size: 9px;
  line-height: 13px;
}
.dash-cloud-badge,
.dash-selection-check,
.dash-open-project,
.dash-style-lock,
.dash-style-selected {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(16, 17, 20, 0.82);
  color: #d8d9dd;
  backdrop-filter: blur(8px);
}
.dash-cloud-badge {
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  font-size: 9px;
}
.dash-selection-check {
  left: 8px;
  bottom: 8px;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  font-size: 9px;
}
.dash-selection-check.is-active {
  border-color: var(--dash-accent);
  background: var(--dash-accent);
  color: #fff;
}
.dash-open-project {
  right: 8px;
  bottom: 8px;
  width: 25px;
  height: 25px;
  border-radius: 6px;
  opacity: 0;
  font-size: 9px;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
}
.dash-project-card:hover .dash-open-project {
  opacity: 1;
  transform: translateY(0);
}
.dash-ai-surface {
  margin-top: 28px;
}
.dash-ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  background: linear-gradient(110deg, rgba(92, 141, 255, 0.075), transparent 46%);
}
.dash-ai-header > div:first-child > p:last-child {
  margin: 4px 0 0;
  color: var(--dash-text-muted);
  font-size: 11px;
  line-height: 16px;
}
.dash-ai-eyebrow {
  color: #80a7ff;
}
.dash-ai-eyebrow i {
  margin-right: 3px;
}
.dash-model-control {
  width: 330px;
  max-width: 42%;
  flex: 0 0 auto;
}
.dash-model-control label {
  display: block;
  margin-bottom: 5px;
  color: var(--dash-text-faint);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dash-model-select-wrap {
  position: relative;
}
.dash-model-select-wrap select {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 11px;
  border: 1px solid var(--dash-border-strong);
  border-radius: 8px;
  outline: none;
  appearance: none;
  background: #17191c;
  color: var(--dash-text);
  font-size: 11px;
}
.dash-model-select-wrap > i {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--dash-text-faint);
  font-size: 9px;
  pointer-events: none;
  transform: translateY(-50%);
}
.dash-model-lock {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.dash-ai-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  gap: 12px;
  padding: 18px 22px;
}
.dash-ai-style-card {
  width: 100% !important;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--dash-text-muted) !important;
  text-align: left;
  cursor: pointer;
}
.dash-ai-style-preview {
  position: relative;
  width: 100%;
  display: grid;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--dash-border);
  border-radius: 9px;
  background: var(--dash-surface-raised);
  transition: border-color 140ms ease, transform 140ms ease;
}
.dash-ai-style-card:hover .dash-ai-style-preview {
  border-color: var(--dash-border-strong);
  transform: translateY(-2px);
}
.dash-ai-style-card.is-selected .dash-ai-style-preview {
  border-color: var(--dash-blue);
  box-shadow: 0 0 0 1px var(--dash-blue);
}
.dash-ai-style-card > strong {
  width: 100%;
  display: block;
  margin-top: 7px;
  overflow: hidden;
  color: var(--dash-text-muted);
  font-size: 10px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-ai-upload-card .dash-ai-style-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #eef0f4;
  color: #1d2025;
}
.dash-ai-upload-control {
  width: 100%;
  display: block !important;
}
.dash-ai-upload-card .dash-ai-style-preview i {
  font-size: 20px;
}
.dash-ai-upload-card .dash-ai-style-preview span {
  font-size: 9px;
  font-weight: 700;
}
.dash-style-lock,
.dash-style-selected {
  top: 7px;
  left: 7px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 8px;
}
.dash-style-selected {
  left: auto;
  right: 7px;
  border-color: var(--dash-blue);
  background: var(--dash-blue);
  color: #fff;
}
.dash-ai-footer {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 22px;
  border-top: 1px solid var(--dash-border);
}
.dash-ai-footer p {
  margin: 0;
  color: var(--dash-text-faint);
  font-size: 10px;
}
.dash-ai-footer p i {
  margin-right: 5px;
}
.dash-quiet-button {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--dash-text-muted) !important;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.dash-quiet-button:hover {
  color: var(--dash-text) !important;
}
.dash-library {
  padding-top: 0;
}
.dash-library-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 16px 0;
  background: rgba(17, 18, 20, 0.94);
  border-bottom: 1px solid var(--dash-border);
  backdrop-filter: blur(14px);
}
.dash-library-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-back-button {
  display: grid !important;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  color: var(--dash-text-muted) !important;
}
.dash-back-button:hover {
  background: var(--dash-surface-raised);
  color: var(--dash-text) !important;
}
.dash-folder-menu {
  position: relative;
}
.dash-small-icon-button {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}
.dash-context-menu {
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
  overflow: hidden;
  border: 1px solid var(--dash-border-strong);
  border-radius: 9px;
  background: #1d1f23;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42);
}
.dash-context-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--dash-text-muted);
  font-size: 11px;
}
.dash-context-menu a:hover {
  background: var(--dash-surface-hover);
  color: var(--dash-text);
}
.dash-context-menu a.is-destructive:hover {
  background: rgba(255, 76, 92, 0.1);
  color: #ff7480;
}
.dash-selection-toggle {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: var(--dash-surface);
  color: var(--dash-text-muted) !important;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.dash-selection-toggle:hover,
.dash-selection-toggle.is-active {
  border-color: var(--dash-border-strong);
  background: var(--dash-surface-hover);
  color: var(--dash-text) !important;
}
.dash-selection-toggle.is-active {
  border-color: rgba(237, 20, 91, 0.5);
  background: var(--dash-accent-soft);
  color: #ff8bb0 !important;
}
.dash-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 4px 0 18px;
  border: 1px solid rgba(237, 20, 91, 0.35);
  border-radius: 9px;
  background: rgba(237, 20, 91, 0.08);
}
.dash-selection-count {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ff8bb0;
  font-size: 10px;
}
.dash-selection-count strong {
  display: grid;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  place-items: center;
  border-radius: 6px;
  background: var(--dash-accent);
  color: #fff;
}
.dash-selection-bar > p {
  margin: 0;
  color: var(--dash-text-muted);
  font-size: 10px;
}
.dash-selection-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.dash-selection-actions button {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--dash-text-muted) !important;
  font-size: 9px;
  cursor: pointer;
}
.dash-selection-actions button:hover {
  background: var(--dash-surface-raised);
  color: var(--dash-text) !important;
}
.dash-selection-actions button.is-destructive:hover {
  background: rgba(255, 76, 92, 0.1);
  color: #ff7480 !important;
}
.dash-library-group + .dash-library-group {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--dash-border);
}
.dash-library-group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}
.dash-library-group-heading h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dash-library-group-heading span {
  display: grid;
  min-width: 21px;
  height: 18px;
  padding: 0 5px;
  place-items: center;
  border-radius: 5px;
  background: var(--dash-surface-raised);
  color: var(--dash-text-faint);
  font-size: 9px;
}
.dash-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  grid-auto-rows: 68px;
  align-items: start;
  gap: 11px;
}
.dash-folder-card {
  min-width: 0;
  height: 68px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 9px;
  background: var(--dash-surface);
  outline: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.dash-folder-card:hover,
.dash-folder-card:focus-visible {
  border-color: var(--dash-border-strong);
  background: var(--dash-surface-raised);
  transform: translateY(-1px);
}
.dash-folder-preview {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #25282d;
}
.dash-folder-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.dash-folder-tint {
  position: absolute;
  inset: 0;
  background: rgba(15, 16, 18, 0.64);
}
.dash-folder-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #d0a94c;
  font-size: 22px;
  transform: translate(-50%, -50%);
}
.dash-folder-preview .dash-cloud-badge {
  top: 5px;
  right: 5px;
  width: 20px;
  height: 20px;
  font-size: 7px;
}
.dash-folder-meta {
  justify-content: space-between;
  gap: 8px;
}
.dash-folder-meta > div {
  min-width: 0;
}
.dash-folder-meta > i {
  color: var(--dash-text-faint);
  font-size: 9px;
}
.dash-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.dash-community-surface {
  padding-bottom: 12px;
}
.dash-community-surface .bg-dark-950 {
  background: transparent;
}
.dash-community-surface .font-size-heading {
  padding: 0 22px;
  color: var(--dash-text);
  font-size: 13px;
}
.dash-community-surface section {
  padding: 16px 0;
}
.dash-community-surface .scroll-container {
  gap: 12px;
}
.dash-community-surface .scroll-container > div:first-child,
.dash-community-surface .scroll-container > div:last-child {
  width: 10px;
}
.dash-learning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.dash-learning-card {
  overflow: hidden;
  border: 1px solid var(--dash-border);
  border-radius: 10px;
  background: var(--dash-surface);
  color: var(--dash-text);
  transition: border-color 140ms ease, transform 140ms ease;
}
.dash-learning-card:hover {
  border-color: var(--dash-border-strong);
  color: var(--dash-text);
  transform: translateY(-2px);
}
.dash-learning-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}
.dash-learning-card > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
}
.dash-learning-card strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-learning-card i {
  color: var(--dash-text-faint);
  font-size: 9px;
}
.dash-font-surface,
.dash-settings-surface,
.dash-account-surface {
  min-height: 420px;
}
.dash-font-heading {
  align-items: center;
}
.dash-font-heading .dash-primary-button,
.dash-font-heading .dash-primary-button + input {
  pointer-events: auto;
}
.dash-font-list {
  padding: 8px 12px 14px;
}
.dash-font-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--dash-border);
}
.dash-font-row:last-child {
  border-bottom: 0;
}
.dash-font-sample {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  overflow: hidden;
  place-items: center;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: var(--dash-surface-raised);
  font-size: 19px;
}
.dash-font-details {
  min-width: 0;
  flex: 1 1 auto;
}
.dash-font-details strong,
.dash-font-details p {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-font-details strong {
  color: var(--dash-text);
  font-size: 14px;
}
.dash-font-details p {
  margin: 3px 0 0;
  color: var(--dash-text-muted);
  font-size: 11px;
}
.dash-delete-font {
  position: static;
  color: var(--dash-text-faint) !important;
}
.dash-delete-font:hover {
  border-color: rgba(255, 76, 92, 0.35);
  background: rgba(255, 76, 92, 0.1);
  color: #ff7480 !important;
}
.dash-empty-state {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.dash-empty-state > span {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dash-border);
  border-radius: 12px;
  background: var(--dash-surface-raised);
  color: var(--dash-text-muted);
  font-size: 20px;
}
.dash-empty-state h3 {
  margin: 14px 0 5px;
  font-size: 15px;
}
.dash-empty-state p {
  max-width: 360px;
  margin: 0;
  color: var(--dash-text-muted);
  font-size: 11px;
  line-height: 17px;
}
.dash-empty-state .dash-primary-button {
  margin-top: 16px;
}
.dash-settings-form {
  padding: 8px 16px 24px;
}
.dash-settings-form .list,
.dash-settings-form .list ul {
  margin: 0;
  background: transparent;
}
.dash-settings-form .list ul::before,
.dash-settings-form .list ul::after,
.dash-settings-form .item-inner::after {
  display: none;
}
.dash-settings-form .item-content {
  min-height: 52px;
  margin-top: 8px;
  padding: 0 12px;
  border: 1px solid var(--dash-border);
  border-radius: 8px;
  background: var(--dash-surface-raised);
}
/**********************
* CLOUD DASHBOARD PANEL
**********************/
.dashboard-panel-menu {
  --dash-accent: #ed145b;
  --dash-panel-bg: #151619;
  --dash-panel-surface: #1f2126;
  --dash-panel-hover: #272a30;
  --dash-panel-border: #32353c;
  --dash-panel-text: #f7f7f8;
  --dash-panel-muted: #989ca6;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--dash-panel-bg);
  color: var(--dash-panel-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.dashboard-panel-header {
  padding: 20px 18px 17px;
  border-bottom: 1px solid var(--dash-panel-border);
}
.dashboard-panel-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.dashboard-panel-brand > *:first-child {
  width: 120px;
  max-height: 38px;
}
.dashboard-panel-brand svg {
  width: 100%;
  height: 100%;
}
.dashboard-panel-close {
  display: grid !important;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--dash-panel-border);
  border-radius: 8px;
  color: var(--dash-panel-muted) !important;
}
.dashboard-panel-close:hover {
  background: var(--dash-panel-hover);
  color: var(--dash-panel-text) !important;
}
.dashboard-panel-header > p {
  max-width: 290px;
  margin: 10px 0 0;
  color: var(--dash-panel-muted);
  font-size: 11px;
  line-height: 17px;
}
.dashboard-panel-scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 14px;
  overflow-x: hidden;
  overflow-y: auto;
}
.dashboard-upgrade-card {
  width: 100% !important;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(237, 20, 91, 0.42);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(237, 20, 91, 0.2), rgba(157, 118, 255, 0.08));
  text-align: left;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease;
}
.dashboard-upgrade-card:hover {
  border-color: var(--dash-accent);
  transform: translateY(-1px);
}
.dashboard-upgrade-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(237, 20, 91, 0.18);
  color: #ff83ab;
}
.dashboard-upgrade-card > span:nth-child(2) {
  min-width: 0;
  flex: 1 1 auto;
}
.dashboard-upgrade-card small,
.dashboard-upgrade-card strong,
.dashboard-upgrade-card em {
  display: block;
}
.dashboard-upgrade-card small {
  color: #ff83ab;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-upgrade-card strong {
  margin-top: 2px;
  font-size: 12px;
}
.dashboard-upgrade-card em {
  margin-top: 3px;
  color: var(--dash-panel-muted);
  font-size: 9px;
  font-style: normal;
  line-height: 13px;
}
.dashboard-upgrade-card > i {
  color: #ff83ab;
  font-size: 10px;
}
.dashboard-pro-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(69, 185, 149, 0.35);
  border-radius: 10px;
  background: rgba(69, 185, 149, 0.08);
}
.dashboard-pro-card > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(69, 185, 149, 0.12);
  color: #65d2af;
}
.dashboard-pro-card > div {
  flex: 1 1 auto;
}
.dashboard-pro-card small,
.dashboard-pro-card strong {
  display: block;
}
.dashboard-pro-card small {
  color: var(--dash-panel-muted);
  font-size: 9px;
}
.dashboard-pro-card strong {
  margin-top: 1px;
  font-size: 12px;
}
.dashboard-pro-card > i {
  color: #65d2af;
  font-size: 12px;
}
.dashboard-panel-section {
  margin-top: 22px;
}
.dashboard-panel-section > h3 {
  margin-bottom: 7px;
}
.dashboard-panel-list,
.dashboard-language-control {
  overflow: hidden;
  border: 1px solid var(--dash-panel-border);
  border-radius: 9px;
  background: var(--dash-panel-surface);
}
.dashboard-panel-list button,
.dashboard-language-control {
  width: 100% !important;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 0;
  border-bottom: 1px solid var(--dash-panel-border);
  background: transparent;
  color: var(--dash-panel-text) !important;
  text-align: left;
}
.dashboard-panel-list button {
  cursor: pointer;
  transition: background-color 140ms ease;
}
.dashboard-panel-list button:last-child {
  border-bottom: 0;
}
.dashboard-panel-list button:hover {
  background: var(--dash-panel-hover);
}
.dashboard-panel-list-icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.045);
  color: #c9cbd0;
  font-size: 12px;
}
.dashboard-instagram-icon {
  color: #e57eb2;
}
.dashboard-instagram-icon > i {
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
}
.dashboard-panel-list-copy {
  min-width: 0;
  flex: 1 1 auto;
}
.dashboard-panel-list-copy strong,
.dashboard-panel-list-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dashboard-panel-list-copy strong {
  font-size: 11px;
  line-height: 15px;
}
.dashboard-panel-list-copy small {
  margin-top: 2px;
  color: var(--dash-panel-muted);
  font-size: 9px;
  line-height: 13px;
}
.dashboard-panel-list button > i {
  color: var(--dash-panel-muted);
  font-size: 9px;
}
.dashboard-language-control {
  position: relative;
  border-bottom: 1px solid var(--dash-panel-border);
}
.dashboard-language-control select {
  width: 92px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--dash-panel-border);
  border-radius: 6px;
  outline: none;
  background: #17191c;
  color: var(--dash-panel-text);
  font-size: 10px;
}
.dashboard-panel-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 6px 8px;
  color: var(--dash-panel-muted);
  font-size: 9px;
}
.dashboard-panel-footer a {
  color: var(--dash-panel-muted);
}
.dashboard-panel-footer a:hover {
  color: var(--dash-panel-text);
}
/**********************
* CLOUD CANVAS PANEL
**********************/
.canvas-panel-scroll {
  padding-bottom: 18px;
}
.canvas-panel-menu .dashboard-panel-section {
  margin-top: 18px;
}
.canvas-panel-menu .dashboard-panel-list button:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.canvas-panel-menu .dashboard-panel-list button:disabled:hover {
  background: transparent;
}
.canvas-panel-shortcut {
  min-width: 31px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border: 1px solid var(--dash-panel-border);
  border-radius: 5px;
  background: #17191c;
  color: var(--dash-panel-muted);
  font-size: 8px;
  font-weight: 700;
}
.canvas-panel-upload {
  width: 100% !important;
  height: auto !important;
  min-height: 52px;
  border-bottom: 1px solid var(--dash-panel-border);
  background: transparent;
  transition: background-color 140ms ease;
}
.canvas-panel-upload:hover {
  background: var(--dash-panel-hover);
}
.canvas-panel-upload-trigger {
  width: 100% !important;
  min-width: 0;
  min-height: 52px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: var(--dash-panel-text) !important;
  text-align: left;
}
.canvas-panel-upload-trigger > i {
  margin-left: auto;
  color: var(--dash-panel-muted);
  font-size: 9px;
}
.canvas-panel-cost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ff7aa6;
  font-size: 9px;
}
.canvas-panel-cost b {
  font-weight: 750;
}
.canvas-panel-cost coin-icon {
  width: 15px;
  height: 15px;
}
.canvas-panel-credits {
  margin-top: 20px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--dash-panel-border);
}
.canvas-panel-credits > div {
  margin: 0 !important;
}
.canvas-panel-credits button {
  min-width: 92px;
  height: 36px;
  flex-direction: row !important;
  gap: 8px !important;
  justify-content: center !important;
  padding: 0 11px !important;
  border-color: rgba(237, 20, 91, 0.7) !important;
  border-radius: 8px !important;
  background: rgba(237, 20, 91, 0.08);
}
.canvas-panel-credits button:hover {
  background: #ed145b !important;
}
.canvas-panel-credits button:hover span {
  color: #ffffff !important;
}
@media (max-width: 1180px) {
  .dash-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dash-selection-bar > p {
    display: none;
  }
}
@media (max-width: 940px) {
  .dash-sidebar {
    width: 72px;
    flex-basis: 72px;
    padding: 18px 9px 12px;
  }
  .dash-brand {
    justify-content: center;
    height: 38px;
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
  }
  .dash-brand > * {
    width: 40px;
    min-width: 40px;
  }
  .dash-nav-label,
  .dash-nav-text,
  .dash-account-copy,
  .dash-account-chevron,
  .dash-credit-heading > div {
    display: none;
  }
  .dash-nav-link {
    justify-content: center;
    padding: 0;
  }
  .dash-nav-icon {
    width: 100%;
    flex-basis: auto;
  }
  .dash-nav-marker {
    right: -10px;
  }
  .dash-credit-card {
    padding: 8px;
  }
  .dash-credit-heading {
    justify-content: center;
  }
  .dash-credit-card > div:last-child button {
    height: 32px;
    padding: 0 !important;
  }
  .dash-credit-card > div:last-child button span {
    display: none;
  }
  .dash-account-card {
    justify-content: center;
    padding: 5px;
  }
}
@media (max-width: 720px) {
  .dash-topbar {
    padding: 12px 16px;
  }
  .dash-topbar-new span,
  .dash-topbar-actions > .dash-icon-button:first-of-type {
    display: none;
  }
  .dash-topbar-new {
    width: 36px !important;
    padding: 0;
  }
  .dash-content {
    padding: 18px 16px 70px;
  }
  .dash-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-action-card,
  .dash-upload-action-inner {
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 12px 8px;
    text-align: center;
  }
  .dash-action-copy {
    width: 100%;
    flex: 0 1 auto;
    text-align: center;
  }
  .dash-action-copy strong,
  .dash-action-copy small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
  .dash-action-copy strong {
    line-height: 16px;
  }
  .dash-action-arrow {
    display: none;
  }
  .dash-section-heading,
  .dash-ai-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .dash-section-copy {
    max-width: none;
    text-align: left;
  }
  .dash-model-control {
    width: 100%;
  }
  .dash-selection-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .dash-selection-actions {
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
  }
  .dash-selection-actions button {
    flex: 0 0 auto;
  }
}
@media (max-width: 720px), (hover: none) and (pointer: coarse) {
  .dash-ai-style-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(112px, 148px);
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-color: #40434a transparent;
    scrollbar-width: thin;
  }
  .dash-ai-style-card {
    scroll-snap-align: start;
  }
  .dash-ai-style-grid.is-expanded {
    grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    justify-content: stretch;
    overflow-x: visible;
    overflow-y: visible;
    scroll-snap-type: none;
  }
  .dash-ai-style-grid.is-expanded .dash-ai-style-card {
    scroll-snap-align: none;
  }
}
@media (min-width: 721px) {
  .dashboard-modern #tutorials .dash-community-surface .scroll-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
    padding: 0 22px 16px;
    overflow-x: visible !important;
  }
  .dashboard-modern #tutorials .dash-community-surface .scroll-container > div:first-child,
  .dashboard-modern #tutorials .dash-community-surface .scroll-container > div:last-child {
    display: none;
  }
  .dashboard-modern #tutorials .dash-community-surface .scroll-container > .flex-none,
  .dashboard-modern #tutorials .dash-community-surface .scroll-container > .flex-none > a,
  .dashboard-modern #tutorials .dash-community-surface .scroll-container .w-72 {
    width: 100% !important;
  }
}
/**********************
* DASHBOARD AI PROMPT WINDOW
**********************/
.promptsheetmini-window.ai-prompt-window {
  --f7-popup-tablet-width: 840px;
  --f7-popup-tablet-height: 620px;
  --f7-popup-tablet-border-radius: 14px;
  --f7-navbar-height: 52px;
  overflow: hidden;
  border: 1px solid #353840;
  background: #111214;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.58);
}
/**********************
* MODERN FRAMEWORK7 POPUPS
**********************/
.popup {
  --f7-navbar-bg-color: #151619;
  --f7-navbar-text-color: #f5f5f6;
  --f7-navbar-link-color: #a9adb7;
}
.popup .navbar {
  border-bottom: 1px solid #30333a;
  background: #151619 !important;
  color: #f5f5f6;
}
.popup .navbar .navbar-bg {
  background: #151619 !important;
}
.popup .navbar::after {
  display: none;
}
.popup .navbar .title {
  color: #f5f5f6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.popup .navbar a {
  color: #a9adb7;
}
.popup .navbar .left a,
.popup .navbar .right a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #30333a;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
}
.popup .navbar a:hover {
  background: #272a30;
  color: #ffffff;
}
/**********************
* MODERN TEXT SHEETS
**********************/
.vx-textsheet--modern {
  --textsheet-bg: #111214;
  --textsheet-surface: #1b1d21;
  --textsheet-surface-raised: #22252a;
  --textsheet-border: #30333a;
  --textsheet-border-strong: #434750;
  --textsheet-text: #f5f5f6;
  --textsheet-muted: #989ca6;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--textsheet-bg);
  color: var(--textsheet-text);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.vx-textsheet--modern *,
.vx-textsheet--modern *::before,
.vx-textsheet--modern *::after {
  box-sizing: border-box;
}
.vx-textsheet__workspace {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
}
.vx-textsheet__fonts {
  width: 34%;
  min-width: 250px;
  max-width: 340px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--textsheet-border);
  background: #17181b;
}
.vx-textsheet__section-heading,
.vx-textsheet__editor-heading {
  flex: 0 0 auto;
}
.vx-textsheet__section-heading {
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--textsheet-border);
}
.vx-textsheet__section-heading span,
.vx-textsheet__section-heading small {
  display: block;
}
.vx-textsheet__section-heading span,
.vx-textsheet__editor-heading > div > span {
  color: #ff7aa6;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.vx-textsheet__section-heading small {
  margin-top: 4px;
  color: var(--textsheet-muted);
  font-size: 10px;
}
.vx-textsheet__font-list {
  min-height: 0;
  flex: 1 1 auto;
  padding: 7px;
  overflow-x: hidden;
  overflow-y: auto;
}
.vx-textsheet__font-option {
  width: 100% !important;
  min-width: 0;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #d9dbe0;
  text-align: left;
  cursor: pointer;
  transition: background-color 130ms ease, color 130ms ease;
}
.vx-textsheet__font-option:hover {
  background: #22252a;
  color: #ffffff;
}
.vx-textsheet__font-option.is-active {
  background: rgba(237, 20, 91, 0.13);
  box-shadow: inset 2px 0 #ed145b;
  color: #ffffff;
}
.vx-textsheet__font-option > span {
  min-width: 0;
  overflow: hidden;
  font-size: 17px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vx-textsheet__font-option > i {
  flex: 0 0 auto;
  color: #ff7aa6;
  font-size: 10px;
}
.vx-textsheet__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  color: var(--textsheet-muted);
  font-size: 11px;
}
.vx-textsheet__editor {
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px;
  background: var(--textsheet-bg);
}
.vx-textsheet__editor-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.vx-textsheet__editor-heading h2 {
  margin: 5px 0 0;
  color: var(--textsheet-text);
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.vx-textsheet__editor-heading > small {
  max-width: 44%;
  overflow: hidden;
  color: var(--textsheet-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vx-textsheet__input-surface {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--textsheet-border);
  border-radius: 11px;
  background: var(--textsheet-surface);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.vx-textsheet__input-surface:focus-within {
  border-color: rgba(237, 20, 91, 0.78);
  box-shadow: 0 0 0 3px rgba(237, 20, 91, 0.11);
}
.vx-textsheet__input-surface textarea {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  padding: 28px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  color: #e4e6eb;
  font-size: clamp(30px, 4vw, 54px);
  line-height: 1.3;
}
.vx-textsheet__input-surface textarea::placeholder {
  color: #656a74;
}
.vx-textsheet__input-surface > footer {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-top: 1px solid var(--textsheet-border);
  color: var(--textsheet-muted);
  font-size: 9px;
  line-height: 14px;
}
.vx-textsheet__input-surface > footer i {
  color: #ff7aa6;
}
.vx-textsheet__font-strip {
  display: none;
}
.vx-textsheet__footer {
  min-height: 72px;
  flex: 0 0 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px;
  border-top: 1px solid var(--textsheet-border);
  background: #151619;
}
.vx-textsheet__uploader {
  width: 180px !important;
  height: 40px !important;
  flex: 0 0 180px;
}
.vx-textsheet__button {
  width: 180px !important;
  height: 40px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 8px !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
}
.vx-textsheet__button--secondary {
  border-color: var(--textsheet-border-strong) !important;
  color: #d6d8dd !important;
}
.vx-textsheet__button--secondary:hover {
  background: var(--textsheet-surface-raised) !important;
}
.vx-textsheet__button--primary {
  border-color: #ed145b !important;
  background: #ed145b !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(237, 20, 91, 0.2);
}
@media (max-width: 767px) {
  .vx-textsheet__fonts {
    display: none;
  }
  .vx-textsheet__editor {
    gap: 12px;
    padding: 14px;
  }
  .vx-textsheet__editor-heading h2 {
    font-size: 16px;
  }
  .vx-textsheet__input-surface textarea {
    min-height: 210px;
    padding: 18px;
    font-size: 32px;
  }
  .vx-textsheet__font-strip {
    width: 100%;
    display: flex;
    gap: 6px;
    padding-bottom: 2px;
    overflow-x: auto;
  }
  .vx-textsheet__font-chip {
    min-width: max-content;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--textsheet-border);
    border-radius: 7px;
    background: var(--textsheet-surface);
    color: #c9cbd1;
    font-size: 13px;
  }
  .vx-textsheet__font-chip.is-active {
    border-color: rgba(237, 20, 91, 0.65);
    background: rgba(237, 20, 91, 0.13);
    color: #ffffff;
  }
  .vx-textsheet__footer {
    min-height: 66px;
    flex-basis: 66px;
    padding: 11px 14px;
  }
  .vx-textsheet__uploader,
  .vx-textsheet__button {
    width: auto !important;
    min-width: 0;
    flex: 1 1 50%;
  }
}
.promptsheetmini-window.ai-prompt-window .view,
.promptsheetmini-window.ai-prompt-window .page,
.promptsheetmini-window.ai-prompt-window .page-content {
  background: #111214;
}
.promptsheetmini-window.ai-prompt-window .navbar {
  --f7-navbar-height: 52px;
  border-bottom: 1px solid #30333a;
  background: #151619;
  color: #f5f5f6;
}
.promptsheetmini-window.ai-prompt-window .navbar::after {
  display: none;
}
.promptsheetmini-window.ai-prompt-window .navbar .title {
  color: #f5f5f6;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.promptsheetmini-window.ai-prompt-window .navbar a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #30333a;
  border-radius: 8px;
  color: #9fa3ad;
}
.promptsheetmini-window.ai-prompt-window .navbar a i {
  color: inherit;
}
.promptsheetmini-window.ai-prompt-window .navbar a:hover {
  background: #272a30;
  color: #ffffff;
}
.promptsheetmini-window.ai-prompt-window .ai-prompt-page > .page-content {
  overflow: hidden;
}
@media (max-width: 720px) {
  .promptsheetmini-window.ai-prompt-window {
    --f7-popup-tablet-width: 100%;
    --f7-popup-tablet-height: 100%;
    border: 0;
    border-radius: 0;
  }
}

.bg-outseta-dark {
  background-color: #171717;
}
.bg-youtube {
  background-color: #ff0000;
}
.bg-facebook {
  background-color: #1877f2;
}
.bg-instagram {
  background-color: #C13584;
}
.color-accent,
.text-accent {
  color: #ed145b;
}
.color-accent-200,
.text-accent-200 {
  color: #ffb1cc;
}
.border-accent {
  border-color: #ed145b;
}
.bg-accent {
  background-color: #ed145b;
}
.bg-accent-600 {
  background-color: #b20e44;
}
.bg-accent-700 {
  background-color: #77092d;
}
.bg-accent-800 {
  background-color: #3c0517;
}
.bg-dark-950 {
  background-color: #1b1b1b;
}
.bg-dark-900 {
  background-color: #2c2b28;
}
.bg-dark-800 {
  background-color: #403d39;
}
.bg-dark-700 {
  background-color: #524e49;
}
.bg-dark-975 {
  background-color: #1c1b19;
}
.border-dark-800 {
  border-color: #403d39;
}
.border-dark-700 {
  border-color: #524e49;
}
.border-dark-900 {
  border-color: #2c2b28;
}
.border-dark-950 {
  border-color: #1b1b1b;
}
.text-dark-700 {
  color: #524e49;
}
.text-dark-600 {
  color: #64605b;
}
.text-dark-500 {
  color: #948f89;
}
.text-dark-800 {
  color: #403d39;
}
.text-dark-900 {
  color: #2c2b28;
}
.text-dark-950 {
  color: #1b1b1b;
}
.font-size-title {
  font-size: 2.5rem;
  font-weight: 600;
}
.font-size-heading {
  font-size: 1.5rem;
  font-weight: 600;
}
.viui {
  /* Fixed Bottom Toolbar Styles */
  /* Tutorial Styles */
  /* Imported Fonts Styles */
  /* No Fonts Message */
}
.viui .navbar {
  background-color: #1b1b1b;
}
.viui.desktop .navbar {
  background-color: #2c2b28;
}
.viui .navbar .right a {
  font-size: 1.5rem;
  width: auto;
  padding: 0px 0.5rem;
}
.viui .navbar {
  height: 72px;
}
.viui .navbar::after {
  display: none !important;
}
.viui .navbar .navbar-inner {
  height: 100%;
}
.viui .dashboard-vl-branding-svg {
  z-index: 9999;
  width: 64px;
  top: -60px;
  left: 8px;
  position: absolute;
  pointer-events: none;
}
.viui .page-content {
  background-color: #1b1b1b;
  padding-top: 8px;
}
.viui.desktop .page-content {
  background-color: #1b1b1b;
  padding: 1rem;
}
.viui .list ul {
  background-color: #1b1b1b;
}
.viui .media-card {
  aspect-ratio: 1 / 1;
  border: 1px solid #524e49;
}
.viui .media-card.folder {
  /*aspect-ratio: 16 / 6;*/
}
.viui .bottom-toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #2c2b28;
  /* bg-dark-900 */
  padding-top: 0.75rem;
  /* pt-3 */
  padding-bottom: 0.75rem;
  /* pb-3 */
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #403d39;
  /* border-t border-dark-800 */
}
.viui .bottom-toolbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #a0aec0;
  /* text-gray-400 */
  font-size: 0.75rem;
  /* 0.75rem text-xs */
  padding: 0.25rem;
  /* px-1 */
}
.viui .bottom-toolbar a i {
  font-size: 1.25rem;
  /* text-2xl */
  margin-bottom: 0.25rem;
  /* mb-1 */
}
.viui .bottom-toolbar a.active {
  color: #ed145b;
  /* color-accent */
}
.viui .bottom-toolbar a.plus {
  background-color: #ed145b;
  /* color-accent */
  color: white;
  width: 4rem;
  /* w-16 */
  height: 4rem;
  /* h-16 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2rem;
  /* mt-[-2rem] */
  border: 4px solid #2c2b28;
}
.viui .bottom-toolbar a.plus i {
  font-size: 2rem;
  /* text-3xl */
  margin-bottom: 0;
}
.viui .tutorial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 2 columns on larger screens (sm and up) */
  gap: 1rem;
  /* space-y-4 */
}
@media (min-width: 640px) {
  .viui .tutorial-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on larger screens (sm and up) */
  }
}
.viui .tutorial-item {
  /* flex items-center bg-dark-800 rounded-xl p-4 */
  border-radius: 0.25rem;
  overflow: hidden;
}
.viui .tutorial-thumbnail {
  width: 100%;
  /* Make image fill container */
  height: auto;
  aspect-ratio: 16/9;
  background-color: #2c2b28;
}
.viui .tutorial-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensure image covers the whole area, can crop */
}
.viui .imported-fonts-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* space-y-2 */
  margin-bottom: 1rem;
}
.viui .imported-fonts-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  background-color: #403d39;
}
.viui .imported-fonts-item span {
  color: #fff;
  font-size: 0.875rem;
}
.viui .imported-fonts-item button {
  color: #fff;
  cursor: pointer;
}
.viui .no-fonts-message {
  text-align: center;
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #403d39;
  color: #a0aec0;
  margin-top: 1rem;
  font-size: 0.875rem;
}
#account.page-content .o--App--profileWidget {
  border-width: 0px;
}
.web-app-pricing {
  /* Add padding top to the container of the highlighted card to prevent badge cutoff */
  /* Position badge within the padded container */
  /* Basic styling for the toggle switch */
}
.web-app-pricing .pricing-grid-shell {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}
.web-app-pricing .highlighted-card-container {
  /*padding-top: 0.75rem;*/
  /* Adjust as needed, corresponds to mt-3 */
  position: relative;
}
.web-app-pricing .highlighted-card-badge {
  position: absolute;
  top: -12px;
  /* Align to the top of the padded container */
  right: 1rem;
  /* Adjust as needed, corresponds to mr-4 */
}
.web-app-pricing .toggle-checkbox:checked + .toggle-label {
  background-color: #ed125a;
  /* Accent color when checked */
}
.web-app-pricing .toggle-checkbox:checked + .toggle-label::after {
  transform: translateX(100%);
  border-color: white;
}
.web-app-pricing .toggle-label::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 1px;
  width: 16px;
  height: 15px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease-in-out;
}
/* ---------------------------------------------------------------------------
   Upgrade promo — the Starter pitch shown to logged-in free users on the
   dashboard and canvas (see `upgrade-promo` in app/shop.js).

   Deliberately a self-contained overlay rather than an f7-popup, so it can
   be dropped into any page's slot="fixed" with one tag. Everything is
   scoped under .vi-upgrade-promo so nothing leaks into Framework7 or the
   VGX UI, and no Tailwind utilities are used (the app ships Tailwind
   v2.0.4, which lacks the accent palette and arbitrary values).
   --------------------------------------------------------------------------- */
.vi-upgrade-promo {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999999;
  /* above everything incl. the canvas UI stack */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.72);
  overflow-y: auto;
}
.vi-upgrade-promo-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 28px 26px 20px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  text-align: center;
}
.vi-upgrade-promo-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 17px;
  cursor: pointer;
}
.vi-upgrade-promo-close:hover {
  color: #111827;
}
.vi-upgrade-promo-head h2 {
  margin: 0;
  font-size: 23px;
  font-weight: 800;
  color: #111827;
  line-height: 1.25;
}
.vi-upgrade-promo-plan {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #ed145b;
}
.vi-upgrade-promo-slide {
  margin-top: 20px;
  overflow: hidden;
}
.vi-upgrade-promo-slide h3 {
  margin: 18px 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.vi-upgrade-promo-slide p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b7280;
  min-height: 63px;
}
.vi-upgrade-promo-stage {
  position: relative;
}
.vi-promo-next-enter-active,
.vi-promo-next-leave-active,
.vi-promo-prev-enter-active,
.vi-promo-prev-leave-active {
  transition: transform 0.26s ease, opacity 0.26s ease;
}
.vi-promo-next-leave-active,
.vi-promo-prev-leave-active {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.vi-promo-next-enter {
  transform: translateX(64px);
  opacity: 0;
}
.vi-promo-next-leave-to {
  transform: translateX(-64px);
  opacity: 0;
}
.vi-promo-prev-enter {
  transform: translateX(-64px);
  opacity: 0;
}
.vi-promo-prev-leave-to {
  transform: translateX(64px);
  opacity: 0;
}
.vi-upgrade-promo-media {
  position: relative;
  height: 200px;
  border-radius: 12px;
  background: #f3f4f6;
  overflow: hidden;
}
.vi-upgrade-promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Nav row: [prev arrow] [dots] [next arrow] in one flex line, so the
   arrows are aligned with the dots by construction. The gallery also
   auto-advances and wraps — these are a nudge, not the primary way
   through. Styled for the white card (light circles, dark chevron). */
.vi-upgrade-promo-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 16px 0 0;
}
.vi-upgrade-promo-arrow {
  width: 36px;
  height: 36px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: #f3f4f6;
  color: #374151;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.vi-upgrade-promo-arrow:hover {
  background: #111827;
  color: #fff;
}
.vi-upgrade-promo-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
}
.vi-upgrade-promo-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #d1d5db;
  cursor: pointer;
}
.vi-upgrade-promo-dot.active {
  background: #ed145b;
}
.vi-upgrade-promo-cta {
  display: block;
  width: 100%;
  margin-top: 28px;
  padding: 13px 16px;
  border: 0;
  border-radius: 12px;
  background: #ed145b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.vi-upgrade-promo-cta:hover {
  background: #b20e44;
}
.vi-upgrade-promo-fine {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: #9ca3af;
}
.vi-upgrade-promo-later {
  display: block;
  width: 100%;
  margin-top: 18px;
  padding: 8px 6px;
  border: 0;
  background: transparent;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.vi-upgrade-promo-later:hover {
  color: #374151;
}
.vi-upgrade-promo-allplans {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 6px;
  border: 0;
  background: transparent;
  color: #ed145b;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.vi-upgrade-promo-allplans:hover {
  color: #b20e44;
}
/* ------------------------------------------------------------------------
 * Seedream edit modal — canvas compatibility layer
 *
 * The modal (views/ai/seedream-edit-modal.component.js) is styled with
 * Studio's Tailwind v4 build (ai.built.css). The canvas loads Tailwind
 * v2.0.4 (lib/tailwind.css), which has no accent-* palette, no slash
 * opacity (bg-black/60), no arbitrary values (text-[10px]) and no
 * disabled: variants — and ai.built.css must NEVER load here (its v4
 * preflight would strip every margin/border from Framework7/VGX UI).
 * This block backfills exactly the classes the modal uses, scoped under
 * .sd-edit-root (the modal root — inert in Studio). [class~="..."]
 * selectors avoid LESS-escaping issues with / [ ] : in class names.
 * Accent values mirror views/ai/ai.css (--color-accent-*).
 * ------------------------------------------------------------------------ */
.sd-edit-root {
  /* The modal's inline z-index (210) was tuned for Studio. Canvas pages
       wrap everything in Framework7's .view-main (z-index 5000), so lift
       the modal above the canvas chrome but below F7 dialogs (13500).
       !important is required to beat the inline style. */
  z-index: 12000 !important;
  /* Gray fidelity — Studio's v4 "gray" is the neutral palette */
  /* Accent palette (missing from Tailwind v2 build) */
  /* Slash-opacity blacks */
  /* Arbitrary text sizes */
  /* disabled: variants (not enabled in the v2 build) */
  /* v2's -translate-x-1/2 only sets --tw-translate-x and needs the
       .transform class, which the modal (written for v4) doesn't add */
  /* Studio's ICON_PREFIX is 'fa-sharp fa-solid' (FontAwesome 7). Canvas
       pages ship FontAwesome 6 whose Sharp face doesn't cover these glyphs —
       fall back to the regular solid face the rest of the canvas UI uses. */
  /* Framework7's global CSS gives every <button> width:100%, so the footer
       buttons devour the row and crush the flex-1 prompt input. Shrink-wrap
       buttons by default, then restore the modal's explicit width utilities
       (this scoped reset outranks single-class Tailwind rules). */
}
.sd-edit-root .bg-gray-900 {
  background-color: #171717;
}
.sd-edit-root .bg-gray-800 {
  background-color: #262626;
}
.sd-edit-root .border-gray-800 {
  border-color: #262626;
}
.sd-edit-root .border-gray-700 {
  border-color: #404040;
}
.sd-edit-root .border-gray-600 {
  border-color: #525252;
}
.sd-edit-root .text-gray-200 {
  color: #e5e5e5;
}
.sd-edit-root .text-gray-300 {
  color: #d4d4d4;
}
.sd-edit-root .text-gray-400 {
  color: #a3a3a3;
}
.sd-edit-root .text-gray-500 {
  color: #737373;
}
.sd-edit-root .text-gray-600 {
  color: #525252;
}
.sd-edit-root .placeholder-gray-500::placeholder {
  color: #737373;
}
.sd-edit-root [class~="hover:bg-gray-800"]:hover {
  background-color: #262626;
}
.sd-edit-root [class~="hover:text-white"]:hover {
  color: #ffffff;
}
.sd-edit-root .text-accent-400 {
  color: #f04676;
}
.sd-edit-root .bg-accent-600 {
  background-color: #c90f4c;
}
.sd-edit-root [class~="bg-accent-500/15"] {
  background-color: rgba(237, 20, 91, 0.15);
}
.sd-edit-root [class~="bg-accent-500/20"] {
  background-color: rgba(237, 20, 91, 0.2);
}
.sd-edit-root [class~="border-accent-500/30"] {
  border-color: rgba(237, 20, 91, 0.3);
}
.sd-edit-root [class~="border-accent-500/40"] {
  border-color: rgba(237, 20, 91, 0.4);
}
.sd-edit-root [class~="hover:bg-accent-500"]:hover {
  background-color: #ED145B;
}
.sd-edit-root [class~="hover:text-accent-400"]:hover {
  color: #f04676;
}
.sd-edit-root [class~="hover:border-accent-500"]:hover {
  border-color: #ED145B;
}
.sd-edit-root [class~="focus:border-accent-500"]:focus {
  border-color: #ED145B;
}
.sd-edit-root [class~="bg-black/50"] {
  background-color: rgba(0, 0, 0, 0.5);
}
.sd-edit-root [class~="bg-black/60"] {
  background-color: rgba(0, 0, 0, 0.6);
}
.sd-edit-root [class~="text-[10px]"] {
  font-size: 10px;
  line-height: 1.4;
}
.sd-edit-root [class~="text-[11px]"] {
  font-size: 11px;
  line-height: 1.4;
}
.sd-edit-root [class~="disabled:opacity-30"]:disabled {
  opacity: 0.3;
}
.sd-edit-root [class~="disabled:opacity-40"]:disabled {
  opacity: 0.4;
}
.sd-edit-root [class~="disabled:cursor-not-allowed"]:disabled {
  cursor: not-allowed;
}
.sd-edit-root [class~="-translate-x-1/2"] {
  transform: translateX(-50%);
}
.sd-edit-root .fa-sharp {
  font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', FontAwesome !important;
}
.sd-edit-root button {
  width: auto;
}
.sd-edit-root button.w-9 {
  width: 2.25rem;
}
.sd-edit-root button.w-full {
  width: 100%;
}