:root{
  --appPadding: 20px;
}
html,body{
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.app{
  padding: 0px var(--appPadding);
  width: calc(100% - 40px);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.appp{
  padding: 0px var(--appPadding);
  width: calc(100% - 40px);
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.flex{
  display: flex;
}
.flexColumn{
  display: flex;
  flex-direction: column;
}
.flexRow{
  display: flex;
  flex-direction: row;
}
.flexWrap{
  flex-wrap: wrap;
}
.flexGrow{
  flex-grow: 1;
}
.flexFill{
  flex: 1;
}
.aiStart{
  align-items: flex-start;
}
.acStart{
  align-content: flex-start;
}
.acCenter{
  align-content: center;
}
.acEnd{
  align-content: flex-end;
}
.aiCenter{
  align-items: center;
}
.jcCenter{
  justify-content: center;
}
.jcEnd{
  justify-content: end;
}
.aiEnd{
  align-items: flex-end;
}
.spaceBetween{
  justify-content: space-between;
}
.spaceEvenly{
  justify-content: space-evenly;
}
.gap64{
  gap: 64px;
}
.gap48{
  gap: 48px;
}
.gap32{
  gap: 32px;
}
.gap28{
  gap: 28px;
}
.gap24{
  gap: 24px;
}
.gap16{
  gap: 16px;
}
.gap12{
  gap: 12px;
}
.gap8{
  gap: 8px;
}
.gap6{
  gap: 6px;
}
.gap4{
  gap: 4px;
}
.gap2{
  gap: 2px;
}
.gap0{
  gap: 0;
}
.order0{
  order: 0;
}
.order1{
  order: 1;
}
.order2{
  order: 2;
}
.wExpand{
  width: 100%;
}
.hExpand{
  height: 100%;
}