/* Extra Small (XS) */

.r-p-0 {
  padding: 0;
}

.r-m-0 {
  margin: 0;
}
.r-p-m-0{
  padding: 0;
  margin: 0;
}
.r-p-0auto {
  padding: 0 auto;
}

.r-m-0auto {
  margin: 0 auto;
}
.r-flex {
  display: flex;
}

.r-flex-center {
  display: flex;
  justify-content: center;
}

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

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

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

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

.r-column-center,.r-column-md-row, .r-column-lg-row, .r-column-xl-row  {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.r-row-center, .r-row-md-column, .r-row-lg-column, .r-row-xl-column  {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.r-gap-2{
  gap: 2px;
}

.r-gap-4{
  gap: 4px;
}
.r-gap-6{
  gap: 6px;
}
.r-gap-8{
  gap: 8px;
}
.r-gap-10{
  gap: 10px;
}
.r-gap-12{
  gap: 12px;
}
.r-gap-14{
  gap: 14px;
}
.r-gap-16{
  gap: 16px;
}
.r-gap-18{
  gap: 18px;
}
.r-gap-20{
  gap: 20px;
}
.r-gap-22{
  gap: 22px;
}
.r-gap-24{
  gap: 24px;
}
.r-gap-32{
  gap: 32px;
}
.r-gap-36{
  gap: 36px;
}
.r-gap-40{
  gap: 40px;
}
.r-gap-42{
  gap: 42px;
}
.r-gap-50{
  gap: 50px;
}
.r-gap-60{
  gap: 60px;
}
.r-gap-70{
  gap: 70px;
}
/* Small (SM) */
@media (min-width: 640px) {
  /* Styles for small devices and up */
}

/* Medium (MD) */
@media (min-width: 768px) {
  .r-column-md-row {
    flex-direction: row;
  }
  .r-row-md-column{
    flex-direction: column;
  }
}

/* Large (LG) */
@media (min-width: 1024px) {
  .r-column-lg-row {
    flex-direction: row;
  }
  .r-row-lg-column{
    flex-direction: column;
  }
}

/* Extra Large (XL) */
@media (min-width: 1280px) {
  .r-column-xl-row {
    flex-direction: row;
  }
  .r-row-xl-column{
    flex-direction: column;
  }
}

/* 2XL (XXL) */
@media (min-width: 1536px) {
  /* Styles for very large screens */
}

.r-primary{
  color: var(--primary);
}
.r-secondary{
  color: var(--secondary);
}
.r-info{
  color: var(--info);
}
.r-danger{
  color: var(--danger);
}