/* reset */
*,
*::after,
*::before {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  text-decoration: none;
  list-style: none;
  outline: none;
  border: none;
  font-style: normal;
}

dialog {
  margin: auto;
  background: initial;
}

a {
  color: inherit;
}

picture {
  display: contents;

  source {
    display: none;
  }

  img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.d-none {
  display: none;
}

.hidden {
  visibility: hidden;
}

/* #region Width Height shortcut */
.fluid {
  width: 100%;
}

.fluid-y {
  height: 100%;
}

.w-mc {
  width: max-content;
}

.h-mc {
  height: max-content;
}

/* #region padding shortcut */

.pad-10 {
  padding: 10px;
}

.pad-20 {
  padding: 20px;
}

.pad-30 {
  padding: 30px;
}

/* top */
.pad-10-t {
  padding-top: 10px;
}

.pad-20-t {
  padding-top: 20px;
}

/* right */
.pad-10-r {
  padding-right: 10px;
}

.pad-20-r {
  padding-right: 20px;
}

/* bottom */
.pad-10-b {
  padding-bottom: 10px;
}

.pad-20-b {
  padding-bottom: 20px;
}

/* left */
.pad-10-l {
  padding-left: 10px;
}

.pad-20-l {
  padding-left: 20px;
}

/* x axis */

.pad-10-x {
  padding-left: 10px;
  padding-right: 10px;
}

.pad-20-x {
  padding-left: 20px;
  padding-right: 20px;
}

.pad-30-x {
  padding-left: 30px;
  padding-right: 30px;
}

/* y axis */
.pad-10-y {
  padding-top: 10px;
  padding-bottom: 10px;
}

.pad-20-y {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* #region margin shortcut */

.marg-10 {
  margin: 10px;
}

.marg-20 {
  margin: 20px;
}

.marg-30 {
  margin: 30px;
}

.marg-auto {
  margin: auto;
}

/* top */
.marg-10-t {
  margin-top: 10px;
}

.marg-20-t {
  margin-top: 20px;
}

.marg-30-t {
  margin-top: 30px;
}

.marg-auto-t {
  margin-top: auto;
}

/* right */
.marg-10-r {
  margin-right: 10px;
}

.marg-20-r {
  margin-right: 20px;
}

.marg-30-r {
  margin-right: 30px;
}

.marg-auto-r {
  margin-right: auto;
}

/* bottom */
.marg-10-b {
  margin-bottom: 10px;
}

.marg-20-b {
  margin-bottom: 20px;
}

.marg-30-b {
  margin-bottom: 30px;
}

.marg-auto-b {
  margin-bottom: auto;
}

/* left */
.marg-10-l {
  margin-left: 10px;
}

.marg-20-l {
  margin-left: 20px;
}

.marg-30-l {
  margin-left: 30px;
}

.marg-auto-l {
  margin-left: auto;
}

/* x axis */
.marg-10-x {
  margin-left: 10px;
  margin-right: 10px;
}

.marg-20-x {
  margin-left: 20px;
  margin-right: 20px;
}

.marg-30-x {
  margin-left: 30px;
  margin-right: 30px;
}

.marg-auto-x {
  margin-left: auto;
  margin-right: auto;
}

/* y axis */
.marg-10-y {
  margin-top: 10px;
  margin-bottom: 10px;
}

.marg-20-y {
  margin-top: 20px;
  margin-bottom: 20px;
}

.marg-30-y {
  margin-top: 30px;
  margin-bottom: 30px;
}

.marg-auto-y {
  margin-top: auto;
  margin-bottom: auto;
}

/* #region gap */
.gap-10 {
  gap: 10px;
}

.gap-20 {
  gap: 20px;
}

.gap-30 {
  gap: 30px;
}

/* #region flex shortcut */

.f {
  display: flex;
}

.f-column {
  display: flex;
  flex-direction: column;
}

.f-column-reverse {
  display: flex;
  flex-direction: column-reverse;
}

.f-between {
  display: flex;
  justify-content: space-between;
}

.f-around {
  display: flex;
  justify-content: space-around;
}

.f-evenly {
  display: flex;
  justify-content: space-evenly;
}

.f-start {
  display: flex;
  justify-content: start;
  align-items: start;
}

.f-start-x {
  display: flex;
  justify-content: start;
}

.f-start-y {
  display: flex;
  align-items: start;
}

.f-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.f-center-x {
  display: flex;
  justify-content: center;
}

.f-center-y {
  display: flex;
  align-items: center;
}

.f-end {
  display: flex;
  justify-content: end;
  align-items: end;
}

.f-end-x {
  display: flex;
  justify-content: end;
}

.f-end-y {
  display: flex;
  align-items: end;
}

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

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

.f-fluid {
  flex: 1;
}

/* position shortcut */

.rel {
  position: relative;
}

.abs {
  position: absolute;
}

.fix {
  position: fixed;
}

.sticky {
  position: sticky;
}

.a-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* text shortcut */
.tl {
  text-align: left;
}

.tc {
  text-align: center;
}

.tr {
  text-align: right;
}

.justify {
  text-align: justify;
}

/* overflow */

.over-hidden {
  overflow: hidden;
}

.over-y {
  overflow-y: auto;
}

.over-x {
  overflow-x: auto;
}

/* other */
.clickable {
  cursor: pointer;
}

.text-nowrap {
  white-space: nowrap;
}

.text-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}