/*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;
/***********************************/
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: #979797;
}
.vx-color-offset {
  color: #ffffff;
}
.vx-color-accent {
  color: #ED145B;
}
.vx-color-primary {
  color: #262626;
}
.vx-color-light {
  color: #f0f0f0;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #454545;
}
.vx-color-dark-gray {
  color: #171717;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ED145B;
}
.vx-bg-offset {
  background-color: #ffffff;
}
.vx-bg-accent {
  background-color: #ED145B;
}
.vx-bg-primary {
  background-color: #262626;
}
.vx-bg-primary-faded {
  background-color: rgba(38, 38, 38, 0.97);
}
.vx-bg-light {
  background-color: #f0f0f0;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #454545;
}
.vx-bg-dark-gray {
  background-color: #171717;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #ffffff;
}
.vx-theme-offset-text {
  color: #ffffff;
}
.vx-theme-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #020001;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-theme-primary-offset {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #ffffff;
}
.vx-theme-dark {
  background-color: #454545;
  color: #f0f0f0;
}
.vx-theme-light {
  background-color: #f0f0f0;
  color: #454545;
}
.vx-theme-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme-border {
  border: 1px solid #000000;
}
.vx-theme.vx-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme.vx-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme.vx-dark {
  background-color: #454545;
  color: #ffffff;
}
.vx-theme.vx-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme.vx-border {
  border: 1px solid #404040;
}
.vx-theme-accent-border {
  border-color: #020001;
}
.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: #262626 !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: #ffffff;
}
.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: #ffffff;
}
.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: #454545;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #262626 !important;
  border-bottom: 1px solid #000000;
}
.vx-navbar ul {
  background-color: #262626 !important;
}
.vx-navbar ul li {
  color: #ffffff !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #454545;
  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(69, 69, 69, 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: #505050;
  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: #262626;
  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: #ffffff;
}
.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(#404040));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #000000;
  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: #ffffff;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #ffffff;
}
.vx-header.bordered {
  border-bottom: 1px solid #262626;
}
.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: #ffffff;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #262626;
  color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 2px;
  min-height: 26px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #ffffff;
}
.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: #ffffff;
}
.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: #262626;
  border-bottom: 1px solid #0c0c0c;
  border-left: 1px solid #0c0c0c;
  border-right: 1px solid #0c0c0c;
  border-top: 1px solid #404040;
}
.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: #ffffff;
}
.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: #262626;
}
.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(38, 38, 38, 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 #0c0c0c;
}
.vx-home .page-content {
  background-color: #454545;
}
.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: #262626;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  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: #ffffff;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #ffffff;
  fill: #ffffff;
}
.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: #ffffff;
}
.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 #000000;
}
.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: #454545 !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: 4px;
  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: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #000000;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #262626;
}
.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: #020001;
}
.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: #020001;
}
.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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #979797;
  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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.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: #ffffff;
  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: 4px;
  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: 4px !important;
  border-bottom-left-radius: 4px !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: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.vx-widget-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
.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: #020001;
}
.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: #ffffff;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
/*
.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: 4px;
}
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: #020001;
}
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: #020001;
}
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: #020001;
}
.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: #020001;
}
.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: #262626;
  color: #ffffff;
  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: #ffffff;
  }
  .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: #ffffff;
  }
}
@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: #262626;
  }
  .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: #262626;
  }
  .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);
}

/*****/
/**/
/*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;
/***********************************/
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: #979797;
}
.vx-color-offset {
  color: #ffffff;
}
.vx-color-accent {
  color: #ED145B;
}
.vx-color-primary {
  color: #262626;
}
.vx-color-light {
  color: #f0f0f0;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #454545;
}
.vx-color-dark-gray {
  color: #171717;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ED145B;
}
.vx-bg-offset {
  background-color: #ffffff;
}
.vx-bg-accent {
  background-color: #ED145B;
}
.vx-bg-primary {
  background-color: #262626;
}
.vx-bg-primary-faded {
  background-color: rgba(38, 38, 38, 0.97);
}
.vx-bg-light {
  background-color: #f0f0f0;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #454545;
}
.vx-bg-dark-gray {
  background-color: #171717;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #ffffff;
}
.vx-theme-offset-text {
  color: #ffffff;
}
.vx-theme-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #020001;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-theme-primary-offset {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #ffffff;
}
.vx-theme-dark {
  background-color: #454545;
  color: #f0f0f0;
}
.vx-theme-light {
  background-color: #f0f0f0;
  color: #454545;
}
.vx-theme-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme-border {
  border: 1px solid #000000;
}
.vx-theme.vx-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme.vx-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme.vx-dark {
  background-color: #454545;
  color: #ffffff;
}
.vx-theme.vx-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme.vx-border {
  border: 1px solid #404040;
}
.vx-theme-accent-border {
  border-color: #020001;
}
.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: #262626 !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: #ffffff;
}
.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: #ffffff;
}
.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: #454545;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #262626 !important;
  border-bottom: 1px solid #000000;
}
.vx-navbar ul {
  background-color: #262626 !important;
}
.vx-navbar ul li {
  color: #ffffff !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #454545;
  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(69, 69, 69, 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: #505050;
  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: #262626;
  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: #ffffff;
}
.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(#404040));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #000000;
  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: #ffffff;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #ffffff;
}
.vx-header.bordered {
  border-bottom: 1px solid #262626;
}
.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: #ffffff;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #262626;
  color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 2px;
  min-height: 26px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #ffffff;
}
.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: #ffffff;
}
.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: #262626;
  border-bottom: 1px solid #0c0c0c;
  border-left: 1px solid #0c0c0c;
  border-right: 1px solid #0c0c0c;
  border-top: 1px solid #404040;
}
.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: #ffffff;
}
.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: #262626;
}
.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(38, 38, 38, 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 #0c0c0c;
}
.vx-home .page-content {
  background-color: #454545;
}
.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: #262626;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  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: #ffffff;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #ffffff;
  fill: #ffffff;
}
.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: #ffffff;
}
.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 #000000;
}
.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: #454545 !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: 4px;
  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: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #000000;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #262626;
}
.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: #020001;
}
.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: #020001;
}
.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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #979797;
  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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.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: #ffffff;
  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: 4px;
  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: 4px !important;
  border-bottom-left-radius: 4px !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: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.vx-widget-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
.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: #020001;
}
.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: #ffffff;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
/*
.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: 4px;
}
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: #020001;
}
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: #020001;
}
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: #020001;
}
.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: #020001;
}
.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: #262626;
  color: #ffffff;
  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: #ffffff;
  }
  .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: #ffffff;
  }
}
@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: #262626;
  }
  .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: #262626;
  }
  .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);
}
.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 #454545;
}
.vgx-touch-pen-icon {
  /*
	width: 32px;
	height: 32px;
	background-color: white;
	border: 2px solid @color-dark;
	border-radius: @border-radius;
	*/
  color: #ffffff;
}
.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: #ffffff;
  border: 2px solid #f0f0f0;
  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: #ffffff;
  border: 2px solid #262626;
  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 #ffffff;
}
.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: #454545;
  }
  .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;
/***********************************/
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: #979797;
}
.vx-color-offset {
  color: #ffffff;
}
.vx-color-accent {
  color: #ED145B;
}
.vx-color-primary {
  color: #262626;
}
.vx-color-light {
  color: #f0f0f0;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #454545;
}
.vx-color-dark-gray {
  color: #171717;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ED145B;
}
.vx-bg-offset {
  background-color: #ffffff;
}
.vx-bg-accent {
  background-color: #ED145B;
}
.vx-bg-primary {
  background-color: #262626;
}
.vx-bg-primary-faded {
  background-color: rgba(38, 38, 38, 0.97);
}
.vx-bg-light {
  background-color: #f0f0f0;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #454545;
}
.vx-bg-dark-gray {
  background-color: #171717;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #ffffff;
}
.vx-theme-offset-text {
  color: #ffffff;
}
.vx-theme-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #020001;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-theme-primary-offset {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #ffffff;
}
.vx-theme-dark {
  background-color: #454545;
  color: #f0f0f0;
}
.vx-theme-light {
  background-color: #f0f0f0;
  color: #454545;
}
.vx-theme-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme-border {
  border: 1px solid #000000;
}
.vx-theme.vx-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme.vx-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme.vx-dark {
  background-color: #454545;
  color: #ffffff;
}
.vx-theme.vx-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme.vx-border {
  border: 1px solid #404040;
}
.vx-theme-accent-border {
  border-color: #020001;
}
.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: #262626 !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: #ffffff;
}
.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: #ffffff;
}
.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: #454545;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #262626 !important;
  border-bottom: 1px solid #000000;
}
.vx-navbar ul {
  background-color: #262626 !important;
}
.vx-navbar ul li {
  color: #ffffff !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #454545;
  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(69, 69, 69, 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: #505050;
  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: #262626;
  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: #ffffff;
}
.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(#404040));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #000000;
  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: #ffffff;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #ffffff;
}
.vx-header.bordered {
  border-bottom: 1px solid #262626;
}
.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: #ffffff;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #262626;
  color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 2px;
  min-height: 26px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #ffffff;
}
.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: #ffffff;
}
.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: #262626;
  border-bottom: 1px solid #0c0c0c;
  border-left: 1px solid #0c0c0c;
  border-right: 1px solid #0c0c0c;
  border-top: 1px solid #404040;
}
.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: #ffffff;
}
.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: #262626;
}
.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(38, 38, 38, 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 #0c0c0c;
}
.vx-home .page-content {
  background-color: #454545;
}
.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: #262626;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  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: #ffffff;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #ffffff;
  fill: #ffffff;
}
.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: #ffffff;
}
.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 #000000;
}
.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: #454545 !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: 4px;
  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: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #000000;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #262626;
}
.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: #020001;
}
.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: #020001;
}
.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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #979797;
  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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.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: #ffffff;
  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: 4px;
  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: 4px !important;
  border-bottom-left-radius: 4px !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: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.vx-widget-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
.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: #020001;
}
.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: #ffffff;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
/*
.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: 4px;
}
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: #020001;
}
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: #020001;
}
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: #020001;
}
.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: #020001;
}
.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: #262626;
  color: #ffffff;
  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: #ffffff;
  }
  .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: #ffffff;
  }
}
@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: #262626;
  }
  .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: #262626;
  }
  .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);
}
.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: #262626;
  border-radius: 0px;
  justify-content: space-between;
}
.vx-toolbar-inner .vx-control-group {
  display: flex;
}
.vx-toolbar.bordered .vx-toolbar-inner {
  border-color: #404040;
  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: #ffffff;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row-reverse;
}
.vx-toolbar-item g path {
  fill: #ffffff;
  stroke: #ffffff;
}
.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: #262626;
  }
}
/*
.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;
}
*/

/*****/
/**/
/*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;
/***********************************/
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: #979797;
}
.vx-color-offset {
  color: #ffffff;
}
.vx-color-accent {
  color: #ED145B;
}
.vx-color-primary {
  color: #262626;
}
.vx-color-light {
  color: #f0f0f0;
}
.vx-color-light-gray {
  color: #ebebeb;
}
.vx-color-dark {
  color: #454545;
}
.vx-color-dark-gray {
  color: #171717;
}
.vx-bg-transparent {
  background-color: transparent !important;
}
.vx-border-accent {
  border-color: #ED145B;
}
.vx-bg-offset {
  background-color: #ffffff;
}
.vx-bg-accent {
  background-color: #ED145B;
}
.vx-bg-primary {
  background-color: #262626;
}
.vx-bg-primary-faded {
  background-color: rgba(38, 38, 38, 0.97);
}
.vx-bg-light {
  background-color: #f0f0f0;
}
.vx-bg-light-gray {
  background-color: #ebebeb;
}
.vx-bg-dark {
  background-color: #454545;
}
.vx-bg-dark-gray {
  background-color: #171717;
}
.vx-theme-accent-text {
  color: #ffffff;
}
.vx-theme-primary-text {
  color: #ffffff;
}
.vx-theme-offset-text {
  color: #ffffff;
}
.vx-theme-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme-accent.vx-theme-bordered {
  border-color: #020001;
}
.vx-theme-accent a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: white !important;
}
.vx-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-theme-primary-offset {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary-offset.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary-offset a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary-light {
  background-color: #999BA6;
  color: #ffffff;
}
.vx-theme-dark {
  background-color: #454545;
  color: #f0f0f0;
}
.vx-theme-light {
  background-color: #f0f0f0;
  color: #454545;
}
.vx-theme-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme-border {
  border: 1px solid #000000;
}
.vx-theme.vx-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-theme.vx-accent {
  background-color: #ED145B;
  color: #ffffff;
}
.vx-theme.vx-dark {
  background-color: #454545;
  color: #ffffff;
}
.vx-theme.vx-offset {
  background-color: #ffffff;
  color: #262626;
}
.vx-theme.vx-border {
  border: 1px solid #404040;
}
.vx-theme-accent-border {
  border-color: #020001;
}
.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: #262626 !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: #ffffff;
}
.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: #ffffff;
}
.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: #454545;
}
.vx-navbar {
  position: fixed;
  width: 100%;
  z-index: 1;
  background-color: #262626 !important;
  border-bottom: 1px solid #000000;
}
.vx-navbar ul {
  background-color: #262626 !important;
}
.vx-navbar ul li {
  color: #ffffff !important;
  font-size: 1.2rem !important;
}
.vx-navbar .vx-dropdown .ivu-poptip-content a {
  color: #454545;
  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(69, 69, 69, 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: #505050;
  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: #262626;
  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: #ffffff;
}
.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(#404040));
  -webkit-background-clip: unset;
  -webkit-text-fill-color: transparent;
  display: initial;
  border: 0px solid #000000;
  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: #ffffff;
}
.vx-header a {
  width: 44px;
  height: 44px;
  color: #ffffff;
}
.vx-header.bordered {
  border-bottom: 1px solid #262626;
}
.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: #ffffff;
  margin: 0px;
}
.vx-input-block input {
  width: 100%;
  padding: 2px;
  background-color: #262626;
  color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 2px;
  min-height: 26px;
}
.vx-input-block .vx-badge {
  position: absolute;
  top: 38px;
  right: 8px;
  font-size: 16px;
  color: #ffffff;
}
.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: #ffffff;
}
.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: #262626;
  border-bottom: 1px solid #0c0c0c;
  border-left: 1px solid #0c0c0c;
  border-right: 1px solid #0c0c0c;
  border-top: 1px solid #404040;
}
.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: #ffffff;
}
.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: #262626;
}
.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(38, 38, 38, 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 #0c0c0c;
}
.vx-home .page-content {
  background-color: #454545;
}
.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: #262626;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  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: #ffffff;
}
.vx-trigger-input .vx-flat-icon svg path {
  stroke: #ffffff;
  fill: #ffffff;
}
.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: #ffffff;
}
.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 #000000;
}
.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: #454545 !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: 4px;
  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: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-keypad .vx-keypad-result.vx-theme-bordered {
  border-color: #000000;
}
.vx-keypad .vx-keypad-result a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-keypad .vx-keypad-result .vx-keypad-result-inner {
  padding: 8px;
}
.vx-keypad .vx-keypad-buttons {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #262626;
}
.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: #020001;
}
.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: #020001;
}
.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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-touchable-select-block a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-touchable-select-block .vx-touchable-select-block-icon {
  width: 22px;
  color: #979797;
  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: #404040;
  color: #ffffff;
  /*
	@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: #000000;
}
.vx-button a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.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: #ffffff;
  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: 4px;
  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: 4px !important;
  border-bottom-left-radius: 4px !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: 4px !important;
  border-bottom-right-radius: 4px !important;
}
.vx-widget-theme-primary {
  background-color: #262626;
  color: #ffffff;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary.vx-faded-8 {
  background-color: rgba(38, 38, 38, 0.9);
}
.vx-widget-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-widget-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-widget-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-widget-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary {
  background-color: #404040;
  color: #ffffff;
  /*
	@media @device-lg {
		a.vx-touchable{
			&:hover{
				.vx-theme-accent;
			}
		}
	}
	*/
}
.vx-theme-primary .vx-widget-theme-primary.vx-theme-bordered {
  border-color: #000000;
}
.vx-theme-primary .vx-widget-theme-primary a {
  /*to fix vx-toolbar-item  a. @todo must remove*/
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-text {
  color: #ffffff;
}
.vx-theme-primary .vx-widget-theme-light-text {
  color: #979797;
}
.vx-theme-offset .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
.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: #020001;
}
.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: #ffffff;
}
.vx-theme-dark .vx-widget-theme-primary {
  background-color: #999BA6;
  color: #ffffff;
}
/*
.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: 4px;
}
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: #020001;
}
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: #020001;
}
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: #020001;
}
.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: #020001;
}
.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: #262626;
  color: #ffffff;
  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: #ffffff;
  }
  .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: #ffffff;
  }
}
@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: #262626;
  }
  .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: #262626;
  }
  .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);
}
.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: 38px;
  margin: 0px 0px;
  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%;
  }
}

.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;
}

.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;
/***********************************/
/**********************
* 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: #ffffff;
}
.vl-fab-buttons svg path {
  fill: #ffffff;
}
.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;
}
/*
.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: #262626;
  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: #262626;
  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: #262626 !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: #262626 !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 */
}

.home-menu-link.tab-link-active {
  background-color: #464646;
}

.bg-outseta-dark {
  background-color: #171717;
}
.bg-youtube {
  background-color: #ff0000;
}
.bg-facebook {
  background-color: #1877f2;
}
.bg-instagram {
  background-color: #C13584;
}
.color-accent {
  color: #ed145b;
}
.color-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;
}
.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 .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;
}