* {
  box-sizing: border-box;
  margin: 0;
  font-weight: normal;
}

body {
  min-height: 100vh;
  color: #2c3e50;
  background: #f8f8f8;
  transition:
    color 0.5s,
    background-color 0.5s;
  line-height: 1.6;
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    sans-serif;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.menu-bar {
  opacity: 100;
  z-index: 1000;
}

@media screen and (min-width: 768px) {
  .menu-bar {
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    opacity: 100;
    z-index: 1000;
  }
}

#app {
  /* max-width: 1280px; */
  margin: 0 auto; /* padding: 1rem; */
  font-weight: normal;
}

/* Aspect Ratios */
.aspect-ratio-autio {
  aspect-ratio: auto;
}
.aspect-ratio-widescreen {
  aspect-ratio: 16/9;
}
.aspect-ratio-square {
  aspect-ratio: 1/1;
}
.aspect-ratio-portrait {
  aspect-ratio: 3/4;
}

/* MENU */
.menu-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  opacity: 100;
}
.logoCircle img {
  height: 5rem;
  width: 5rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.pastryCircleSmaller img {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.pastryCircle img {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.pastryCircleLarger img {
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.pastryCircleExtraLarge img {
  height: 10rem;
  width: 10rem;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
[data-pc-section="previewcontainer"] img {
  max-height: 90vh;
}
[data-pc-section="previewcontainer"] img[src*="/assets"] {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
}
.p-image-toolbar button:not([aria-label="Close"]) {
  display: none;
}
.p-dropdown-clear-icon {
  margin-top: -0.5rem !important;
}

/* Buttons */
button {
  cursor: pointer;
  border: none;
  font-weight: bold;
}
.button-round {
  border-radius: 55px;
}
.formIcons {
  font-size: 0.8rem;
}
.pastryDesignSelectButton .p-button {
  font-size: 0.7rem !important;
}

/* DISPLAY / VISIBILITY style */
.italic {
  font-style: italic;
}
.bold {
  font-weight: bold;
}
.bolder {
  font-weight: bolder;
}
.smaller {
  font-size: smaller;
}
.larger {
  font-size: larger;
}
.hidden {
  display: none !important;
}
.hidden-mobile {
  display: none !important;
}
.invisible {
  visibility: hidden !important;
}
.pointer {
  cursor: pointer;
}
.textdecoration-none {
  text-decoration: none;
}
.overflow-wrap-break-word {
  overflow-wrap: break-word;
}
.overflow-scroll {
  overflow: scroll;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x {
  overflow-x: auto;
}
.overflow-x-scroll {
  overflow-x: scroll;
  scrollbar-width: thin;
}
.overflow-x-scroll::-webkit-scrollbar {
  /* Sets the HEIGHT (thickness) of the horizontal scrollbar */
  height: 2px;
}
.select-none {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
  -moz-user-select: none; /* Firefox */
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
label.required::after {
  content: "*";
  color: red;
  margin-left: 4px;
  font-size: 1.2rem;
}

/* Fades */
.fade-hidden {
  opacity: 0;
}
.fade-ease-in {
  transition: all ease 1s;
  opacity: 1;
}
.fade-delay-05 {
  transition-delay: 0.5s;
}
.fade-delay-1 {
  transition-delay: 1s;
}
.fade-delay-2 {
  transition-delay: 2s;
}
.fade-delay-3 {
  transition-delay: 3s;
}

/* Text */
.text-outline {
  -webkit-text-stroke: 1px gray; /* Sets the outline width and color */
}

/* Alignment */
.align-center {
  text-align: center;
}
.align-left {
  text-align: left;
}
.align-right {
  text-align: right;
}

/* DEVICE */
.desktop-only {
  display: none !important;
}

/* View-based heights */
.height-150 {
  height: 150vh;
}
.height-100 {
  height: 100vh;
}
.height-99 {
  height: 99vh;
}
.height-95 {
  height: 95vh;
}
.height-90 {
  height: 90vh;
}
.height-80 {
  height: 80vh;
}
.height-50 {
  height: 50vh;
}
.height-40 {
  height: 40vh;
}
.height-25 {
  height: 25vh;
}
.height-20 {
  height: 20vh;
}
.height-15 {
  height: 15vh;
}
.height-10 {
  height: 10vh;
}

/* Form fields */
.requiredField label::after {
  content: "*";
  color: red;
}

@media screen and (max-width: 768px) {
  .mobile-hide {
    display: none;
  }
}

/* Media - Medium */
@media screen and (min-width: 768px) {
  .calendarPadding {
    margin: 1% 0%;
  }
}

/* Laptops */
@media (min-width: 1024px) {
  .hidden-mobile {
    display: unset !important;
  }
  .hidden-laptop {
    display: none !important;
  }

  /* MENU */
  .p-image-toolbar {
    padding: 1rem 20rem;
  }

  .desktop-only {
    display: unset !important;
  }
  .mobile-only {
    display: none !important;
  }

  /* Alignment */
  .align-center-laptop {
    text-align: center;
  }
  .align-left-laptop {
    text-align: left;
  }
  .align-right-laptop {
    text-align: right;
  }

  .formIcons {
    font-size: 1rem;
  }
}

/* Larger Laptops/Desktops */
@media (min-width: 1600px) {
  .hidden-desktop {
    display: none !important;
  }

  /* MENU */
  .p-image-toolbar {
    padding: 1rem 20rem;
  }

  /* .desktop-only { display: block !important; } */
  .desktop-only {
    display: unset;
  }
  .mobile-only {
    display: none !important;
  }

  /* Alignment */
  .align-center-desktop {
    text-align: center;
  }
  .align-left-desktop {
    text-align: left;
  }
  .align-right-desktop {
    text-align: right;
  }

  .formIcons {
    font-size: 1rem;
  }
}