globals.css

@import url('https://altinncdn.no/fonts/inter/v4.1/inter.css');

* {
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif !important;
  margin: 0;
}

.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  box-shadow: 0 2px 20px 0 #c5c5c5;
  background-color: #fff !important;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}

.is-sticky .ColorPicker_label__kYLHj {
  display: #b4b4b4;
}

code {
  background-color: #e9e9e9;
  padding: 1px 5px;
  border-radius: 2px;
}

.panelContainer {
  --panel-padding: var(--ds-size-8);
  --panel-gap: var(--ds-size-4);

  display: flex;

  @media screen and (max-width: 768px) {
    --panel-padding: var(--ds-size-6);

    flex-direction: column;
  }
}

.panelLeft {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--ds-color-neutral-background-default);

  @media screen and (min-width: 768px) {
    width: 420px;
    border-right: 1px solid var(--ds-color-neutral-border-subtle);
  }

  & > * {
    padding: var(--panel-padding);
  }
}

.panelRight {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-auto-rows: min-content;
  width: 100%;
  gap: var(--panel-gap);
  padding: var(--panel-padding);
  background-color: var(--ds-color-neutral-background-tinted);
  border-radius: 0 8px 8px 0;
}

.panelTop {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
}

.panelBottom {
  border-top: 1px solid var(--ds-color-neutral-border-subtle);
  margin-top: auto;
}

.content {
  min-height: 100svh;
}