[layoutDirection="row"] {
  flex-direction: row !important;
  box-sizing: border-box;
  display: flex !important;
}

[layoutDirection="column"] {
  flex-direction: column !important;
  box-sizing: border-box;
  display: flex !important;
}

[layoutAlign="center"] {
  display: flex !important;
  place-content: stretch center;
  align-items: stretch;
}

[layoutAlign="default center"] {
  display: flex !important;
  place-content: center flex-start;
  align-items: center;
}

[layoutAlign="default end"] {
  display: flex !important;
  place-content: center flex-start;
  align-items: flex-end;
}

[layoutAlign="end"] {
  display: flex !important;
  place-content: stretch flex-end;
  align-items: stretch;
}

[layoutAlign="end end"] {
  display: flex !important;
  place-content: flex-end;
  align-items: flex-end;
}

[layoutAlign="start stretch"], [layoutAlign="start"] {
  display: flex !important;
  place-content: stretch flex-start;
  align-items: stretch;
}

[layoutAlign="center center"] {
  display: flex !important;
  place-content: center;
  align-items: center;
}

[layoutAlign="start center"] {
  display: flex !important;
  place-content: center flex-start;
  align-items: center;
}

[layoutAlign="start start"] {
  display: flex !important;
  place-content: flex-start flex-start;
  align-items: center;
}

[layoutAlign="end center"] {
  display: flex !important;
  place-content: center flex-end;
  align-items: center;
}

[layoutAlign="space-between start"] {
  display: flex !important;
  place-content: flex-start space-between;
  align-items: flex-start;
}

[layoutAlign="space-evenly center"] {
  display: flex !important;
  place-content: center space-evenly;
  align-items: center;
}

.offset-5px {
  margin-left: 5px;
}

html[dir=rtl] .offset-5px {
  margin-left: unset;
  margin-right: 5px;
}

.offset-10px {
  margin-left: 10px;
}

html[dir=rtl] .offset-10px {
  margin-left: unset;
  margin-right: 10px;
}

.offset-1 {
  margin-left: 1%;
}

html[dir=rtl] .offset-1 {
  margin-left: unset;
  margin-right: 1%;
}

.offset-2 {
  margin-left: 2%;
}

html[dir=rtl] .offset-2 {
  margin-left: unset;
  margin-right: 2%;
}

.offset-3 {
  margin-left: 3%;
}

html[dir=rtl] .offset-3 {
  margin-left: unset;
  margin-right: 3%;
}

.offset-5 {
  margin-left: 5%;
}

html[dir=rtl] .offset-5 {
  margin-left: unset;
  margin-right: 5%;
}

.display-flex {
  display: flex;
  flex-wrap: wrap;
}

.hide {
  display: none !important;
}

@media screen and (max-width: 599px) {
  [layoutDirection-xs="row"], [layoutDirection-lt-sm="row"] {
    flex-direction: row !important;
    box-sizing: border-box;
    display: flex !important;
  }

  [layoutDirection-xs="column"], [layoutDirection-lt-sm="column"] {
    flex-direction: column !important;
    box-sizing: border-box;
    display: flex !important;
  }

  [layoutAlign-xs="start center"] {
    display: flex !important;
    place-content: center flex-start !important;
    align-items: center !important;
  }

  [layoutAlign-xs="start start"] {
    display: flex !important;
    place-content: flex-start flex-start !important;
    align-items: center !important;
  }

  .hide-xs, .hide-lt-sm {
    display: none !important;
  }
}

@media screen and (min-width: 600px) and (max-width: 959px) {
  [layoutDirection-sm="row"] {
    flex-direction: row !important;
    box-sizing: border-box;
    display: flex !important;
  }

  [layoutDirection-sm="column"] {
    flex-direction: column !important;
    box-sizing: border-box;
    display: flex !important;
  }

  .hide-sm {
    display: none !important;
  }
}

@media screen and (min-width: 960px) and (max-width: 1279px) {
  .hide-md {
    display: none !important;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1919px) {
  .hide-lg {
    display: none !important;
  }
}

@media screen and (min-width: 1920px) and (max-width: 5000px) {
  .hide-xl {
    display: none !important;
  }
}

@media screen and (max-width: 959px) {
  [layoutDirection-lt-md="row"] {
    flex-direction: row !important;
    box-sizing: border-box;
    display: flex !important;
  }

  [layoutDirection-lt-md="column"] {
    flex-direction: column !important;
    box-sizing: border-box;
    display: flex !important;
  }

  .hide-lt-md {
    display: none !important;
  }
}

@media screen and (max-width: 1279px) {
  .hide-lt-lg {
    display: none !important;
  }
}

@media screen and (max-width: 1919px) {
  .hide-lt-xl {
    display: none !important;
  }
}

@media screen and (min-width: 600px) {
  .hide-gt-xs {
    display: none !important;
  }

  .offset-1-gt-xs {
    margin-left: 1%;
  }

  html[dir=rtl] .offset-1-gt-xs {
    margin-left: unset;
    margin-right: 1%;
  }
}

@media screen and (min-width: 960px) {
  .hide-gt-sm {
    display: none !important;
  }

  .offset-1-gt-sm {
    margin-left: 1% !important;
  }

  html[dir=rtl] .offset-1-gt-sm {
    margin-left: unset !important;
    margin-right: 1% !important;
  }

  .offset-2-gt-sm {
    margin-left: 2% !important;
  }

  html[dir=rtl] .offset-2-gt-sm {
    margin-left: unset !important;
    margin-right: 2% !important;
  }

  .offset-3-gt-sm {
    margin-left: 3% !important;
  }

  html[dir=rtl] .offset-3-gt-sm {
    margin-left: unset !important;
    margin-right: 3% !important;
  }
}

@media screen and (min-width: 1280px) {
  .hide-gt-md {
    display: none !important;
  }
}

@media screen and (min-width: 1920px) {
  .hide-gt-lg {
    display: none !important;
  }
}
