/* Mobile and desktop display
================================= */
.view-in-mobile {
  display: block;
}
.view-in-desktop {
  display: none;
}
/* Color
================================= */
.theme-color {
  color: var(--theme-color);
}
.bg-white {
  background-color: #ffffff;
}
/* Text Alignment
================================= */
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}
.text-justify {
  text-align: justify;
}
/* Direction
================================= */
.rtl {
  direction: rtl;
}
.ltr {
  direction: ltr;
}
/*Font Size
================================= */
.size-1 {
  font-size: 1rem;
}
.size-2 {
  font-size: 1.25rem;
}
.size-3 {
  font-size: 1.5rem;
}
.size-4 {
  font-size: 2rem;
}
.size-5 {
  font-size: 2.5rem;
}
.size-6 {
  font-size: 3rem;
}
.size-small {
  font-size: 0.75rem;
}

/* icons image size
================================= */
.icon-small {
  max-height: 1rem;
}
.icon-medium {
  max-height: 1.5rem;
}
.icon-large {
  max-height: 2rem;
}
.icon-xl {
  max-height: 3rem;
}
.icon-x2 {
  max-height: 4rem;
}
.icon-x3 {
  max-height: 5rem;
}
/* Flex - Shortcodes
================================= */
/* Flex -> responsive columns */
.items {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}
.item {
  padding-right: 0;
}
.item:last-child {
  padding-right: 0;
}
.item img {
  display: block;
}


/* Flex - Common for all
================================= */
.space-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.v-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.h-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.vh-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
/* Flex - items
================================= */
/* flex-items width */
.equal-width,
.item-w10,
.item-w20,
.item-w30,
.item-w40,
.item-w50,
.item-w60,
.item-w70,
.item-w80,
.item-w90 {
  flex: 1;
}
/* Flex - Column
================================= */
.row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.column {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  margin-bottom: 20px;
  padding: 0 20px 0 0;
}
.column:last-child {
  padding: 0 ;
}
/* Empty width and height
================================= */
.w20px {
  display: inline-block;
  width: 20px;
}
.w40px {
  display: inline-block;
  width: 40px;
}
.w50px {
  display: inline-block;
  width: 50px;
}
.w70px {
  display: inline-block;
  width: 70px;
}
.w100px {
  display: inline-block;
  width: 100px;
}
.empty {
  width: 100%;
  height: 2rem;
  padding: 2rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
