:root {
  --cladd-safe-area-left: 0px;
  --cladd-safe-area-right: 0px;
  --cladd-safe-area-top: 0px;
  --cladd-safe-area-bottom: 0px;
}

@supports (left: env(safe-area-inset-left)) {
  .safe-areas,
  #__next,
  #root,
  #app {
    --cladd-safe-area-left: env(safe-area-inset-left);
    --cladd-safe-area-right: env(safe-area-inset-right);
    --cladd-safe-area-top: env(safe-area-inset-top);
    --cladd-safe-area-bottom: env(safe-area-inset-bottom);
  }
}
.no-safe-areas {
  --cladd-safe-area-left: 0px;
  --cladd-safe-area-right: 0px;
  --cladd-safe-area-top: 0px;
  --cladd-safe-area-bottom: 0px;
}
.no-safe-areas-top {
  --cladd-safe-area-top: 0px;
}
.no-safe-areas-left {
  --cladd-safe-area-left: 0px;
}
.no-safe-areas-right {
  --cladd-safe-area-right: 0px;
}
.no-safe-areas-bottom {
  --cladd-safe-area-bottom: 0px;
}
.pl-safe {
  padding-left: var(--cladd-safe-area-left);
}
.pr-safe {
  padding-right: var(--cladd-safe-area-right);
}
.pt-safe {
  padding-top: var(--cladd-safe-area-top);
}
.pb-safe {
  padding-bottom: var(--cladd-safe-area-bottom);
}
.ml-safe {
  margin-left: var(--cladd-safe-area-left);
}
.mr-safe {
  margin-right: var(--cladd-safe-area-right);
}
.mt-safe {
  margin-top: var(--cladd-safe-area-top);
}
.mb-safe {
  margin-bottom: var(--cladd-safe-area-bottom);
}
.left-safe {
  left: var(--cladd-safe-area-left);
}
.right-safe {
  right: var(--cladd-safe-area-right);
}
.top-safe {
  top: var(--cladd-safe-area-top);
}
.bottom-safe {
  bottom: var(--cladd-safe-area-bottom);
}

@utility ml-safe-* {
  margin-left: calc(
    var(--cladd-safe-area-left) + var(--spacing) * --value(number)
  );
}

@utility mr-safe-* {
  margin-right: calc(
    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
  );
}
@utility mx-safe-* {
  margin-left: calc(
    var(--cladd-safe-area-left) + var(--spacing) * --value(number)
  );
  margin-right: calc(
    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
  );
}
@utility mt-safe-* {
  margin-top: calc(
    var(--cladd-safe-area-top) + var(--spacing) * --value(number)
  );
}
@utility mb-safe-* {
  margin-bottom: calc(
    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
  );
}
@utility my-safe-* {
  margin-top: calc(
    var(--cladd-safe-area-top) + var(--spacing) * --value(number)
  );
  margin-bottom: calc(
    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
  );
}
@utility scroll-ml-safe-* {
  scroll-margin-left: calc(
    var(--cladd-safe-area-left) + var(--spacing) * --value(number)
  );
}
@utility scroll-mr-safe-* {
  scroll-margin-right: calc(
    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
  );
}
@utility scroll-mt-safe-* {
  scroll-margin-top: calc(
    var(--cladd-safe-area-top) + var(--spacing) * --value(number)
  );
}
@utility scroll-mb-safe-* {
  scroll-margin-bottom: calc(
    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
  );
}
@utility pl-safe-* {
  padding-left: calc(
    var(--cladd-safe-area-left) + var(--spacing) * --value(number)
  );
}
@utility pr-safe-* {
  padding-right: calc(
    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
  );
}
@utility px-safe-* {
  padding-left: calc(
    var(--cladd-safe-area-left) + var(--spacing) * --value(number)
  );
  padding-right: calc(
    var(--cladd-safe-area-right) + var(--spacing) * --value(number)
  );
}
@utility pt-safe-* {
  padding-top: calc(
    var(--cladd-safe-area-top) + var(--spacing) * --value(number)
  );
}
@utility pb-safe-* {
  padding-bottom: calc(
    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
  );
}
@utility py-safe-* {
  padding-top: calc(
    var(--cladd-safe-area-top) + var(--spacing) * --value(number)
  );
  padding-bottom: calc(
    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
  );
}
@utility left-safe-* {
  left: calc(var(--cladd-safe-area-left) + var(--spacing) * --value(number));
}
@utility right-safe-* {
  right: calc(var(--cladd-safe-area-right) + var(--spacing) * --value(number));
}
@utility top-safe-* {
  top: calc(var(--cladd-safe-area-top) + var(--spacing) * --value(number));
}
@utility bottom-safe-* {
  bottom: calc(
    var(--cladd-safe-area-bottom) + var(--spacing) * --value(number)
  );
}
@utility -left-safe-* {
  left: calc(
    0px - var(--cladd-safe-area-left) - var(--spacing) * --value(number)
  );
}
@utility -right-safe-* {
  right: calc(
    0px - var(--cladd-safe-area-right) - var(--spacing) * --value(number)
  );
}
@utility -top-safe-* {
  top: calc(
    0px - var(--cladd-safe-area-top) - var(--spacing) * --value(number)
  );
}
@utility -bottom-safe-* {
  bottom: calc(
    0px - var(--cladd-safe-area-bottom) - var(--spacing) * --value(number)
  );
}
@utility -ml-safe-* {
  margin-left: calc(
    0px - var(--cladd-safe-area-left) - var(--spacing) * --value(number)
  );
}
@utility -mr-safe-* {
  margin-right: calc(
    0px - var(--cladd-safe-area-right) - var(--spacing) * --value(number)
  );
}
@utility -mt-safe-* {
  margin-top: calc(
    0px - var(--cladd-safe-area-top) - var(--spacing) * --value(number)
  );
}
@utility -mb-safe-* {
  margin-bottom: calc(
    0px - var(--cladd-safe-area-bottom) - var(--spacing) * --value(number)
  );
}