body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[v-cloak] {
  display: none;
}

audio {
  display: block;
  width: 100%;
  outline: none;
}

body:has(.state-overlay-on) {
  overflow: hidden;
}

.ds-step-bar:hover .ds-step-label, .ds-step-bar.state-expanded .ds-step-label {
  display: block;
}
.ds-step-bar:hover .ds-logo-monogram, .ds-step-bar.state-expanded .ds-logo-monogram {
  display: none;
}
.ds-step-bar:hover .ds-logo-full, .ds-step-bar.state-expanded .ds-logo-full {
  display: block;
}
.ds-step-bar:hover .ds-step-item:hover, .ds-step-bar.state-expanded .ds-step-item:hover, .ds-menu-button:hover {
  transition: none;
}
.ds-menu-content {
  opacity: 0;
}
.ds-menu-bar:hover .ds-menu-content, .ds-menu-bar.state-expanded .ds-menu-content {
  opacity: 1;
}
.ds-menu-button.ds-menu-button-lp-colors.w--current {
  background-color: #fff8e4;
  color: #121212;
}

.ds-education.state-float .ds-education-preview, .ds-education.state-minimize .ds-education-preview {
  border-radius: 30px;
}
.ds-education.state-float .ds-education-info, .ds-education.state-minimize .ds-education-info {
  margin-top: 0;
}
.ds-education.state-float .ds-education-info .ds-text-extrabold-24, .ds-education.state-minimize .ds-education-info .ds-text-extrabold-24 {
  font-size: 14px;
}
.ds-education.state-float .ds-education-info .ds-text-semibold-14, .ds-education.state-minimize .ds-education-info .ds-text-semibold-14 {
  display: none;
}
.ds-education.state-minimize:hover {
  width: 180px;
}
.ds-overlay-content a {
  color: currentColor;
}
input.ds-input {
  outline: none;
}
input.ds-input:valid ~ .state-input-icon {
  display: none;
}
input.ds-input:valid ~ .state-clear-icon {
  display: block;
}

.ds-dropdown .ds-options {
  display: none;
}
.ds-dropdown:hover .ds-options {
  display: block;
}

.ds-card-personality.state-selected .icon-size-24.state-card-icon,
.ds-card-typeface.state-selected .icon-size-24.state-card-icon {
  display: block;
}

.ds-cards .ds-card-previews-typeface,
.ds-cards .ds-card-previews-logo {
  display: none;
}
.ds-cards.state-list-view .ds-card-previews-typeface,
.ds-cards.state-list-view .ds-card-previews-logo {
  display: none;
}
.ds-cards.state-typeface-view .ds-card-previews-typeface {
  display: grid;
}
.ds-cards.state-logo-view .ds-card-previews-logo {
  display: grid;
}

.ds-cards-sidemenu {
  max-height: calc(100vh - 128px);
}

.ds-sidebar {
  display: none;
}
.ds-sidebar.visible,
.ds-sidebar.state-visible {
  display: grid;
}

.ds-checkbox.state-on .state-checkbox-on-icon {
  display: block;
}
.ds-checkbox.state-on .state-checkbox-off-icon {
  display: none;
}

.ds-form-color {
  position: relative;
}

.ds-input-color {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* brand color start */

input[type=range].ds-color-slider {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  background-color: currentColor;
  background-origin: content-box;
  background-repeat: no-repeat;
  height: 36px;
  width: 100%;
  padding: 0;
  cursor: pointer;
}

input[type=range].ds-color-slider:focus {
  outline: none;
}

input[type=range].ds-color-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: transparent;
  border-radius: 1.5px;
  box-shadow: 0 0 0 4px #fff, 0 0 6px 7px rgba(0, 0, 0, 0.25);
  width: 16px;
  height: 36px;
}

input[type=range].ds-color-slider::-moz-range-thumb {
  border: 0;
  background-color: transparent;
  border-radius: 1px;
  box-shadow: 0 0 0 4px #fff, 0 0 6px 7px rgba(0, 0, 0, 0.25);
  width: 12px;
  height: 36px;
}

input[type=range].ds-color-slider-small {
  display: block;
  -webkit-appearance: none;
  appearance: none;
  background-color: currentColor;
  background-origin: content-box;
  background-repeat: no-repeat;
  height: 20px;
  width: 100%;
  padding: 0;
  border-radius: 10px;
  border: solid 2px #D9D9D9;
  cursor: pointer;
}

input[type=range].ds-color-slider-small::-webkit-slider-thumb {
  appearance: none;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, 0 0 6px 7px rgba(0, 0, 0, 0.25);
  width: 12px;
  height: 12px;
}

input[type=range].ds-color-slider-small::-moz-range-thumb {
  border: 0;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 4px #fff, 0 0 6px 7px rgba(0, 0, 0, 0.25);
  width: 12px;
  height: 12px;
}

input[type=range]#slider-hue {
  background-image: linear-gradient(to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00);
}

input[type=range]#slider-saturation {
  background-image: linear-gradient(to right, #888, transparent);
}

input[type=range]#slider-lightness {
  background-image: linear-gradient(to right, #000, transparent, #FFF);
}

input[type=range]#slider-number {
  background-color: transparent;
}

.ds-flyout {
  display: none;
}

.ds-flyout.state-selected {
  display: flex;
  left: 0;
}


.ds-button-tip {
  pointer-events: none;
  transform: translate(0px, 50%);
  opacity: 0;
}

.ds-button:hover .ds-button-tip,
.ds-icon-button:hover .ds-button-tip,
.lp-button-text:hover .ds-button-tip {
  transform: translate(0, 0);
  opacity: 1;
}

.ds-icon-button:hover .ds-flyout {
  display: flex;
}

.brand-color-lightest {
  fill: var(--lightest);
}
.brand-color-light {
  fill: var(--light);
}
.brand-color-dark {
  fill: var(--dark);
}
.brand-color-darkest {
  fill: var(--darkest);
}

/* brand color end */

/* logo editor start */
.ds-artboard-canvas canvas {
  width: 100% !important;
  height: auto !important;
  background-color: #fff;
}

.ds-dropdown-logo-methods .ds-option.state-disabled:before {
  display: none;
  content: "Under Development";
  position: absolute;
  background-color: #121212;
  color: #d9d9d9;
  padding: 10px;
  top: 0;
  left: 0;
  right: 0;
}

.ds-dropdown-logo-methods .ds-option.state-disabled:hover:before {
  display: block;
}

.ds-section-button.state-collapsed .icon-size-12.icon-chevron-down-small{
  display: none;
}

.ds-section-button.state-collapsed .icon-size-12.icon-chevron-up-small{
  display: flex;
}

.ds-section-button.state-collapsed ~ .ds-all-tools.w-embed {
  display: none;
}

.ds-artboards.w-embed:before, 
.ds-artboards.w-embed:after, 
.ds-all-tools.w-embed:before, 
.ds-all-tools.w-embed:after {
  content: none;
}

.ds-property-input.state-full-width {
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
  -ms-grid-column: span 2;
  grid-column-start: span 2;
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
}

.ds-canvas-controls .ds-icon-button.state-selected:hover {
    background-color: transparent;
}

.ds-custom-icon-preview svg,
.ds-icon-element svg,
.ds-option-with-icon .icon-size-24 svg {
    max-width: 100%;
    max-height: 100%;
}

.ds-icon-editor {
  -ms-grid-column: 1;
  grid-column-start: 1;
  -ms-grid-column-span: 8;
  grid-column-end: 9;
  -ms-grid-row: 1;
  grid-row-start: 1;
  -ms-grid-row-span: 1;
  grid-row-end: 2;
}

.ds-icon-canvas-wrapper {
  -ms-grid-column: span 5;
  grid-column-start: span 5;
  -ms-grid-column-span: 5;
  grid-column-end: span 5;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

.ds-code-block-editor {
  font-family: 'Source Code Pro', Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
  font-weight: 400;
}

.ds-card-icon .ds-image-icon {
  border-radius: 0;
}

.ds-icon-axes {
  -ms-grid-column: span 3;
  grid-column-start: span 3;
  -ms-grid-column-span: 3;
  grid-column-end: span 3;
  -ms-grid-row: span 1;
  grid-row-start: span 1;
  -ms-grid-row-span: 1;
  grid-row-end: span 1;
}

.ds-dropdown-with-icon svg g {
  fill: currentColor;
}

@keyframes redoMinute {
  0% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(270deg);
  }
}
@keyframes redoHour {
  0% {
    transform: rotate(-30deg);
  }

  100% {
    transform: rotate(30deg);
  }
}
.ds-icon-clock,
.ds-label-undo,
.ds-label-redo {
  pointer-events: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ds-icon-button.ds-icon-button-undo:not(.state-disabled):hover ~ .ds-icon-clock {
  left: 0;
}

.ds-icon-button.ds-icon-button-redo:not(.state-disabled):hover ~ .ds-icon-clock {
  left: 98px;
}

.ds-icon-button.ds-icon-button-undo:not(.state-disabled):hover ~ .ds-label-undo,
.ds-icon-button.ds-icon-button-redo:not(.state-disabled):hover ~ .ds-label-redo {
  opacity: 1;
}

.ds-icon-button.ds-icon-button-undo:not(.state-disabled):hover ~ .ds-icon-clock .ds-icon-clock-minute-hand {
  animation: redoMinute 0.4s ease 0s 1 reverse forwards;
}
.ds-icon-button.ds-icon-button-undo:not(.state-disabled):hover ~ .ds-icon-clock .ds-icon-clock-hour-hand {
  animation: redoHour 0.4s ease 0s 1 reverse forwards;
}
.ds-icon-button.ds-icon-button-redo:not(.state-disabled):hover ~ .ds-icon-clock .ds-icon-clock-minute-hand {
  animation: redoMinute 0.4s ease 0s 1 normal forwards;
}
.ds-icon-button.ds-icon-button-redo:not(.state-disabled):hover ~ .ds-icon-clock .ds-icon-clock-hour-hand {
  animation: redoHour 0.4s ease 0s 1 normal forwards;
}

.ds-grouped-buttons.ds-grouped-buttons-hover-shown {
  opacity: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ds-grouped-buttons.ds-grouped-buttons-undo-redo:hover .ds-grouped-buttons.ds-grouped-buttons-hover-shown {
  opacity: 1;
}
/* logo editor end */