.i-flex {
  display: flex;
  align-items: start;
}
.i-flex-col {
  flex-direction: column;
  align-items: unset;
}
.i-grid {
  display: grid;
  align-items: start;
}
.i-grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.i-grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.i-grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.i-grid-cols-free { 
  grid-template-columns: repeat(12, 1fr);
}
.i-gap {
  gap: 1rem;
}
.i-gap-2 {
  gap: 0.5rem;
}

.i-justify-center {
  justify-content: center;
}
.i-justify-space-between {
  justify-content: space-between;
}
.i-justify-end {
  justify-content: flex-end;
}
.i-align-self-center {
  align-self: center;
}
.i-align-self-end {
  align-self: end;
}
.i-flex-wrap {
  flex-wrap: wrap;
}

.i-grid-cols-free > .i-col-span-2 {
  grid-column: span 2 / span 2;
}
.i-grid-cols-free > .i-col-span-4 {
  grid-column: span 4 / span 4;
}
.i-grid-cols-free > .i-col-span-6 {
  grid-column: span 6 / span 6;
}
.i-grid-cols-free > .i-col-span-8 {
  grid-column: span 8 / span 8;
}
.i-grid-cols-free > .i-col-span-10 {
  grid-column: span 10 / span 10;
}
.i-grid-cols-free > .i-col-span-12 {
  grid-column: span 12 / span 12;
}

.i-fieldset > .ui-fieldset-content,
.i-panel > .ui-panel-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

body .i-panel.ui-panel .ui-panel-titlebar,
body .i-panel.ui-panel .ui-panel-content {
  background: transparent;
  border: none;
}

body .i-panel.ui-panel {
  border: 1px solid var(--surface-border);
  border-radius: 6px;
}

body .i-panel.ui-panel .ui-panel-titlebar + .ui-panel-content {
  padding-top: 0;
}

body .i-message:empty {
  display: none;
}

body .form-content {
  padding: 1rem;
}

@media (max-width: 800px) {
  .i-grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .i-grid-cols-free > .i-col-md-span-2 {
    grid-column: span 2 / span 2;
  }
  .i-grid-cols-free > .i-col-md-span-4 {
    grid-column: span 4 / span 4;
  }
  .i-grid-cols-free > .i-col-md-span-6 {
    grid-column: span 6 / span 6;
  }
  .i-grid-cols-free > .i-col-md-span-8 {
    grid-column: span 8 / span 8;
  }
  .i-grid-cols-free > .i-col-md-span-10 {
    grid-column: span 10 / span 10;
  }
  .i-grid-cols-free > .i-col-md-span-12 {
    grid-column: span 12 / span 12;
  }
}

@media (max-width: 640px) {
  .i-grid-cols-4,
  .i-grid-cols-2 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .i-grid-cols-free > [class*='i-col-span-'] {
    grid-column: span 12 / span 12;
  }
}