@myissue/vue-website-page-builder/src/css/style.css

Vue 3 page builder component with drag & drop functionality.

/* Google Fonts - Auto-loaded for vue-website-page-builder */
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0');

@tailwind components;
@tailwind utilities;
@layer components {
  /*
    |--------------------------------------------------------------------------
    | Widgets
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryWidget {
    @apply pbx-py-8 pbx-px-4 pbx-border pbx-border-myPrimaryLightGrayColor pbx-rounded-md pbx-bg-white;
  }

  /*
    |--------------------------------------------------------------------------
    | Modules
    |--------------------------------------------------------------------------
    */
  .pbx-myModulePyMargin {
    @apply md:pbx-mb-0 pbx-mb-0;
  }
  .pbx-myModulePadding {
    @apply md:pbx-py-28 pbx-py-16;
  }

  .pbx-myPrimaryWidthScreenModule {
    @apply pbx-myModulePyMargin pbx-myModulePadding;
  }
  .pbx-myPrimaryModule {
    @apply pbx-max-w-7xl pbx-mx-auto pbx-myModulePyMargin pbx-myModulePadding;
  }
  .pbx-myPrimaryContentSection {
    @apply pbx-max-w-7xl pbx-mx-auto md:pbx-px-4 pbx-px-4 lg:pbx-pb-10 md:pbx-pb-8 pbx-pb-6;
  }

  /*
    |--------------------------------------------------------------------------
    | Helpers
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimarySection {
    @apply lg:pbx-pb-8 lg:pbx-pt-20 md:pbx-py-8 pbx-py-8;
  }

  .pbx-myPrimaryWarningAlertMessage {
    @apply pbx-myPrimarySection pbx-myTertiaryHeader pbx-text-yellow-400 pbx-text-center;
  }
  .pbx-myFocus {
    @apply focus-within:pbx-border-2 focus-within:pbx-border-myPrimaryBrandColor;
  }
  .pbx-myActiveLinkColor {
    @apply pbx-text-myPrimaryBrandColor;
  }

  /*
    |--------------------------------------------------------------------------
    | Tags
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryTag {
    @apply pbx-min-h-[3rem] pbx-my-2 pbx-px-3 pbx-py-2
            pbx-text-xs pbx-break-all 
            pbx-inline-flex pbx-gap-1 pbx-items-center pbx-justify-center 
            pbx-rounded-full pbx-border pbx-border-transparent
            pbx-text-myPrimaryDarkGrayColor pbx-bg-myPrimaryLightMediumGrayColor 
            sm:pbx-w-auto pbx-shadow-sm hover:pbx-shadow;
  }
  /*
    |--------------------------------------------------------------------------
    | Thumbnail
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimarythumbnailLogo {
    @apply pbx-mx-auto pbx-block pbx-mt-2 pbx-mb-6 pbx-w-40 pbx-transition-all pbx-rounded-md pbx-object-cover pbx-cursor-pointer;
  }
  .pbx-myPrimarythumbnailInsertPreview {
    @apply pbx-block md:pbx-h-16 md:pbx-w-16 pbx-h-16 pbx-w-16 hover:pbx-shadow-sm pbx-transition-all pbx-cursor-pointer pbx-rounded-full pbx-object-cover;
  }
  /*
    |--------------------------------------------------------------------------
    | Primary paragraphs
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryParagraph {
    @apply pbx-font-normal pbx-text-myPrimaryDarkGrayColor lg:pbx-text-base pbx-text-sm;
  }

  .pbx-myPrimaryParagraphError {
    @apply pbx-myPrimaryParagraph pbx-mt-1 pbx-italic pbx-text-myPrimaryErrorColor pbx-text-sm;
  }

  /*
    |--------------------------------------------------------------------------
    | Headers
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryHeader {
    @apply lg:pbx-text-7xl md:pbx-text-6xl pbx-text-5xl pbx-font-medium pbx-break-words lg:pbx-mb-8 md:pbx-mb-4 pbx-mb-2 pbx-text-myPrimaryDarkGrayColor;
  }

  .pbx-mySecondaryHeader {
    @apply pbx-font-['Cormorant'] pbx-font-medium pbx-break-words lg:pbx-text-5xl md:pbx-text-4xl pbx-text-3xl lg:pbx-mb-8 md:pbx-mb-4 pbx-mb-2 pbx-text-myPrimaryDarkGrayColor;
  }

  .pbx-myTertiaryHeader {
    @apply pbx-font-medium pbx-break-words lg:pbx-text-3xl md:pbx-text-2xl pbx-text-2xl lg:pbx-mb-8 md:pbx-mb-4 pbx-mb-2 pbx-text-myPrimaryDarkGrayColor;
  }

  .pbx-myQuaternaryHeader {
    @apply pbx-font-medium pbx-break-words lg:pbx-text-xl md:pbx-text-lg pbx-text-base lg:pbx-mb-4 md:pbx-mb-2 pbx-mb-2 pbx-text-myPrimaryDarkGrayColor;
  }

  /*
    |--------------------------------------------------------------------------
    | Links
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryLink {
    @apply pbx-text-myPrimaryLinkColor 
            focus:pbx-outline-none
            focus:pbx-ring-0 focus:pbx-ring-myPrimaryLinkColor
            focus-visible:pbx-ring-0 focus-visible:pbx-ring-myPrimaryLinkColor pbx-cursor-pointer;
  }

  .pbx-myPrimaryActiveLink {
    @apply pbx-text-red-600 pbx-text-sm
            focus:pbx-outline-none
            focus:pbx-ring-0 focus:pbx-ring-red-500
            focus-visible:pbx-ring-0 focus-visible:pbx-ring-red-500;
  }

  /*
    |--------------------------------------------------------------------------
    | Buttons
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryMenuTextButton {
    @apply lg:pbx-flex lg:pbx-gap-2 lg:pbx-items-center focus:pbx-outline-none pbx-cursor-pointer pbx-rounded-full pbx-px-1.5 pbx-py-1.5 pbx-font-medium;
  }
  .pbx-myRadio {
    @apply pbx-w-5 pbx-h-5 pbx-text-myPrimaryBrandColor pbx-bg-myPrimaryLightGrayColor pbx-border-gray-300 focus:pbx-ring-myPrimaryBrandColor dark:focus:pbx-ring-myPrimaryBrandColor dark:pbx-ring-offset-gray-800 focus:pbx-ring-2 dark:pbx-bg-myPrimaryDarkGrayColor dark:pbx-border-gray-600;
  }

  .pbx-myPrimaryButton {
    @apply pbx-min-h-[3rem] lg:pbx-px-4 lg:pbx-py-3 pbx-px-3 pbx-py-3 pbx-font-sans 
            sm:pbx-text-sm pbx-text-xs pbx-whitespace-nowrap pbx-break-keep pbx-font-medium pbx-inline-flex pbx-gap-1 pbx-items-center pbx-justify-center pbx-rounded-full pbx-border pbx-border-transparent pbx-bg-myPrimaryLinkColor pbx-text-white pbx-shadow-sm hover:pbx-bg-myPrimaryLinkColor sm:pbx-w-auto
            focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-ring-offset-2
            focus-visible:pbx-ring-2 focus-visible:pbx-ring-myPrimaryLinkColor pbx-cursor-pointer;
  }

  .pbx-mySecondaryButton {
    @apply pbx-myPrimaryButton pbx-bg-myPrimaryLightMediumGrayColor hover:pbx-bg-myPrimaryLightMediumGrayColor hover:pbx-bg-opacity-90 focus:pbx-ring-myPrimaryLightGrayColor pbx-text-myPrimaryDarkGrayColor hover:pbx-text-myPrimaryDarkGrayColor pbx-shadow-sm;
  }

  .pbx-myPrimaryDeleteButton {
    @apply pbx-myPrimaryButton pbx-bg-myPrimaryErrorColor hover:pbx-bg-myPrimaryErrorColor focus:pbx-ring-myPrimaryErrorColor;
  }

  .pbx-myPrimaryToggleButton {
    @apply pbx-w-full pbx-inline-flex pbx-items-center pbx-justify-center pbx-px-4 pbx-py-2 sm:pbx-text-sm pbx-text-sm pbx-font-semibold pbx-text-myPrimaryDarkGrayColor pbx-shadow-sm focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryBrandColor focus:pbx-ring-offset-2 pbx-bg-myPrimaryLightGrayColor hover:pbx-bg-myPrimaryBrandColor hover:pbx-text-white;
  }
  /*
    |--------------------------------------------------------------------------
    | Buttons With no background
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryButtonNoBackground {
    @apply pbx-myPrimaryParagraph pbx-font-medium pbx-text-myPrimaryBrandColor pbx-font-sans
            focus:pbx-outline-none pbx-cursor-pointer;
  }
  /*
    |--------------------------------------------------------------------------
    | Icons
    |--------------------------------------------------------------------------
    */
  .pbx-mySmallIcon {
    @apply pbx-shrink-0 pbx-h-4 pbx-w-4 pbx-m-2 pbx-stroke-[1.5px] pbx-flex pbx-justify-center pbx-items-center;
  }
  .pbx-myMediumIcon {
    @apply pbx-shrink-0 pbx-h-6 pbx-w-6 pbx-stroke-[1.5px] pbx-flex pbx-justify-center pbx-items-center;
  }

  /*
    |--------------------------------------------------------------------------
    | Tables
    |--------------------------------------------------------------------------
    */
  .pbx-myTableContainerPlusScrollButton {
    @apply pbx-relative pbx-p-2 pbx-border-gray-400 pbx-border pbx-rounded;
  }
  .pbx-myScrollButtonContainer {
    @apply pbx-sticky pbx-z-10 pbx-h-12 pbx-top-16 pbx-left-0 pbx-right-0 pbx-flex pbx-items-center pbx-justify-center pbx-myPrimaryGap pbx-bg-myPrimaryLightGrayColor pbx-bg-opacity-50;
  }
  .pbx-myTableContainer {
    @apply pbx-overflow-x-auto pbx-myPrimarySection pbx-py-0 pbx-px-0;
  }
  .pbx-myTableSubContainer {
    @apply pbx-min-w-full pbx-align-middle;
  }
  .pbx-myPrimaryTable {
    @apply pbx-text-sm pbx-divide-y pbx-divide-myPrimaryLightGrayColor pbx-table-fixed pbx-min-w-full pbx-text-left pbx-mb-20;
  }
  .pbx-myPrimaryTableCaption {
    @apply pbx-bg-white pbx-myPrimaryParagraph pbx-py-4;
  }
  .pbx-myPrimaryTableTHead {
    @apply pbx-bg-gray-50;
  }
  .pbx-myPrimaryTableTr {
    @apply pbx-divide-x pbx-divide-gray-300;
  }
  .pbx-myPrimaryTableTh {
    @apply pbx-px-6 pbx-py-4 pbx-font-normal pbx-text-gray-900;
  }
  .pbx-myPrimaryTableTBody {
    @apply pbx-divide-y pbx-divide-gray-100 pbx-border-t pbx-border-gray-100 pbx-bg-white;
  }
  .pbx-myPrimaryTableTBodyTr {
    @apply pbx-divide-x pbx-myPrimaryParagraph pbx-bg-white hover:pbx-bg-red-50;
  }
  .pbx-myPrimaryTableTBodyTd {
    @apply pbx-px-6 pbx-py-4 pbx-whitespace-pre pbx-myPrimaryParagraph;
  }
  .pbx-myPrimaryResourceTableBodyTdTitle {
    @apply pbx-whitespace-normal;
  }

  /*
    |--------------------------------------------------------------------------
    | Grid
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryGap {
    @apply pbx-gap-4;
  }

  /*
    |--------------------------------------------------------------------------
    | Breadcrumbs
    |--------------------------------------------------------------------------
    */
  .pbx-myBreadcrumbsContainer {
    @apply pbx-flex pbx-items-center pbx-justify-start pbx-gap-1 pbx-py-2 pbx-pl-4 pbx-pr-2 pbx-font-medium;
  }

  /*
    |--------------------------------------------------------------------------
    | Search Bars
    |--------------------------------------------------------------------------
    */
  .pbx-mysearchBarWithOptions {
    @apply pbx-flex pbx-gap-2 pbx-pl-4 pbx-rounded-full pbx-border pbx-border-gray-200 pbx-bg-myPrimaryLightGrayColor;
  }

  .pbx-myPrimarySearchInput {
    @apply pbx-myPrimaryInput pbx-text-sm pbx-py-4 pbx-border-none pbx-outline-none pbx-pl-10 pbx-h-full pbx-bg-transparent focus:pbx-ring-0 focus:pbx-ring-offset-0 focus:pbx-border-none focus:pbx-bg-transparent focus:pbx-outline-none pbx-shadow-none;
  }

  .pbx-myPrimarySearchButton {
    @apply pbx-rounded-r-full pbx-text-sm lg:pbx-pl-8 lg:pbx-pr-10 pbx-pl-4 pbx-pr-4 pbx-text-center pbx-border-l pbx-border-gray-300 pbx-font-medium hover:pbx-bg-gray-200;
  }

  /*
    |--------------------------------------------------------------------------
    | Forms
    |--------------------------------------------------------------------------
    */
  .pbx-myPrimaryFormWithActions {
    @apply pbx-flex pbx-flex-col pbx-myPrimaryGap pbx-px-2 pbx-rounded md:pbx-pb-4;
  }
  .pbx-myPrimaryContentLayout {
    @apply pbx-flex pbx-flex-col pbx-myPrimaryGap md:pbx-flex md:pbx-flex-row;
  }
  .pbx-myPrimaryFormTitleDescription {
    @apply pbx-flex pbx-flex-col pbx-w-full;
  }
  .pbx-myPrimaryFormMain {
    @apply pbx-flex pbx-flex-col pbx-myPrimaryGap md:pbx-w-8/12;
  }
  .pbx-myPrimaryFormSidebar {
    @apply pbx-flex pbx-flex-col pbx-myPrimaryGap md:pbx-w-4/12;
  }
  .pbx-myPrimaryActions {
    @apply pbx-px-4 pbx-py-6 pbx-rounded pbx-bg-myPrimaryLightGrayColor pbx-shadow-sm;
  }

  .pbx-myInputsOrganization {
    @apply pbx-px-4 pbx-pt-4 pbx-pb-4 pbx-bg-white pbx-rounded-lg pbx-border pbx-border-gray-200;
  }

  .pbx-myPrimaryFormOrganizationHeaderDescriptionSection {
    @apply pbx-mb-4;
  }
  .pbx-myPrimaryFormOrganizationHeader {
    @apply pbx-myQuaternaryHeader pbx-m-0 pbx-pt-4;
  }

  .pbx-myInputsFamily {
    @apply pbx-flex pbx-items-center pbx-myPrimaryGap;
  }

  .pbx-myInputGroup {
    @apply pbx-w-full pbx-self-start pbx-mb-2 pbx-px-2;
  }
  .pbx-myDoActionButtonSection {
    @apply pbx-px-4 pbx-py-4 pbx-border pbx-border-myPrimaryLightGrayColor pbx-rounded sm:pbx-px-6 pbx-text-right pbx-mt-1 pbx-bg-gray-50;
  }

  .pbx-myPrimaryInputLabel {
    @apply pbx-my-0 pbx-block pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor pbx-text-left pbx-mb-2;
  }

  .pbx-myPrimaryInput {
    @apply pbx-w-full pbx-font-sans;
  }

  .pbx-myPrimaryInputError {
    @apply pbx-mt-1 pbx-myPrimaryParagraph pbx-block pbx-font-normal pbx-text-myPrimaryErrorColor pbx-text-left pbx-text-sm;
  }

  .pbx-myPrimaryTextArea {
    @apply pbx-block pbx-w-full sm:pbx-text-sm pbx-font-normal pbx-text-myPrimaryDarkGrayColor placeholder:pbx-font-normal placeholder:pbx-accent-gray-400 pbx-bg-gray-50 focus:pbx-bg-white pbx-rounded-md pbx-py-3 pbx-px-3 pbx-border pbx-border-gray-300 pbx-shadow-sm focus:pbx-outline-none focus:pbx-ring-2 focus:pbx-ring-myPrimaryLinkColor focus:pbx-border-transparent;
  }

  .pbx-myPrimaryCheckbox {
    @apply focus:pbx-ring-myPrimaryBrandColor pbx-h-5 pbx-w-5 pbx-text-myPrimaryBrandColor pbx-border-gray-400 pbx-rounded-md;
  }

  .pbx-myPrimarySelect {
    @apply pbx-myPrimaryInput;
  }
  .pbx-myPrimaryFakeSelect {
    @apply hover:pbx-ring-myPrimaryLinkColor pbx-border pbx-border-gray-300 pbx-flex pbx-flex-row pbx-justify-between pbx-items-center pbx-myPrimaryGap pbx-py-2.5 pbx-pl-3 pbx-pr-1 pbx-cursor-pointer hover:pbx-border-transparent hover:pbx-ring-2 pbx-rounded-md;
  }
  .pbx-myPrimaryFakeSelectNoHover {
    @apply pbx-myPrimaryFakeSelect focus:pbx-outline-none focus:pbx-border-transparent hover:pbx-border-transparent;
  }

  .pbx-myPrimaryColorPreview {
    @apply pbx-aspect-square pbx-border pbx-border-gray-200 pbx-cursor-pointer pbx-min-h-[1.5rem] pbx-rounded-sm;
  }
}

#pbxEditToolbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.1rem) scale(0.1);
  transition:
    left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#pbxEditToolbar.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  min-width: 4rem;
  padding-right: 1rem;
  padding-left: 1rem;
  height: 2rem;
  box-shadow: 0 0 0 10px oklch(86.9% 0.005 56.366);
  background: oklch(86.9% 0.005 56.366);
}

/* CSS for content inside page builder # start */
#pagebuilder {
  position: relative;
  max-height: 100%;
  min-height: fit-content;
}
#pagebuilder a {
  pointer-events: none;
}

#pagebuilder #youtube-video::before {
  content: 'Select Video Element';
  font-family: 'Jost';
  background: #16a34a !important;
  color: white;
  text-decoration: none;
  margin-right: 8px;
  vertical-align: middle;
  min-height: 3rem;
  padding: 0.75rem 0.75rem;
  white-space: nowrap;
  word-break: keep-all;
  font-weight: 500;
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid transparent;
  margin-bottom: 20px;
  font-size: 0.8rem !important;
}

@media (min-width: 640px) {
  #pagebuilder #youtube-video::before {
    font-size: 0.9rem !important;
    width: auto;
  }
}

#pagebuilder #youtube-video:hover::before {
  text-decoration: none;
  cursor: pointer;
}

#page-builder-editor a,
#pagebuilder a {
  text-decoration: underline;
}

#page-builder-editor #linktree p,
#pagebuilder #linktree p {
  width: 100%;
}

#page-builder-editor #linktree a,
#pagebuilder #linktree a {
  @apply pbx-py-4 pbx-px-2 pbx-block pbx-w-full;
}

#page-builder-editor #linktree a,
#pagebuilder #linktree a {
  text-decoration: none;
  font-weight: 500;
  color: inherit !important;
  width: 100%;
  cursor: pointer;
}

.pbx-reorder-highlight {
  animation: pbx-reorder-flash 0.4s ease-in-out;
}

@keyframes pbx-reorder-flash {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.pbx-sibling-highlight {
}

.pbx-myPrimaryInput,
.pbx-myPrimarySelect {
  box-sizing: border-box;
  border: 1px solid #e9e9e9;
  padding: 0.40625rem 0.625rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  cursor: pointer;
  line-height: 1.5;
  font-weight: normal;
}

.pbx-myPrimarySelect {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.792893C0.683417 0.402369 1.31658 0.402369 1.70711 0.792893L4 3.08579L6.29289 0.792893C6.68342 0.402369 7.31658 0.402369 7.70711 0.792893C8.09763 1.18342 8.09763 1.81658 7.70711 2.20711L4.70711 5.20711C4.31658 5.59763 3.68342 5.59763 3.29289 5.20711L0.292893 2.20711C-0.0976311 1.81658 -0.0976311 1.18342 0.292893 0.792893Z' fill='%2335261C' fill-opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 0.5rem;
}

.pbx-myPrimaryInput:focus,
.pbx-myPrimarySelect:focus {
  --tw-ring-inset: inset;
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(22, 163, 74, var(--tw-ring-opacity, 1));
  --tw-ring-shadow: 0 0 0 4px var(--tw-ring-color);
  --tw-ring-offset-width: 2px;
  --tw-ring-offset-color: white;
  --tw-ring-offset-shadow: 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow);
  border: 1px #dee6f0 solid;
}

.pbx-myPrimaryInput:focus-visible,
.pbx-myPrimarySelect:focus-visible {
  outline: none;
}

#pagebuilder-right-menu hr {
  border: none;
  height: 1px;
  background: oklch(93.6% 0.032 17.717);
  box-shadow: oklch(93.6% 0.032 17.717);
}

#page-builder-editor ol,
#pagebuilder ol,
#page-builder-editor ul,
#pagebuilder ul {
  list-style: disc !important;
  padding: 1rem 0 0 1.4rem;
  margin-left: 1em;
  line-height: 2rem;
}

.pbx-headless-dropdown {
  list-style: none;
  padding: 0;
}

/* Page Builder Reset Default Browser Styles Start*/
#pagebuilder input,
#pagebuilder button,
#pagebuilder textarea,
#pagebuilder select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
#pagebuilder blockquote,
#pagebuilder dl,
#pagebuilder dd,
#pagebuilder pre,
#pagebuilder hr,
#pagebuilder figure,
#pagebuilder p,
#pagebuilder h1,
#pagebuilder h2,
#pagebuilder h3,
#pagebuilder h4,
#pagebuilder h5,
#pagebuilder h6,
#pagebuilder ul,
#pagebuilder ol,
#pagebuilder li {
  margin: 0;
  font-weight: inherit;
}

#pagebuilder input,
#pagebuilder button,
#pagebuilder textarea,
#pagebuilder select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

#pagebuilder img {
  max-width: 100%;
  height: auto;
  display: block;
}

#pagebuilder a {
  color: inherit;
  text-decoration: none;
}

#page-builder-editor strong,
#pagebuilder strong {
  font: inherit;
  font-weight: 500;
}

#pagebuilder code,
#pagebuilder pre,
#pagebuilder em {
  font: inherit;
  font-weight: inherit;
}
/* Page Builder Reset Default Browser Styles End*/