/*******************
  Utility Classes
*******************/
.hide {
  display: none !important;
}

.left-align {
  text-align: left;
}

.right-align {
  text-align: right;
}

.center, .center-align {
  text-align: center;
}

.left {
  float: left !important;
}

.right {
  float: right !important;
}

.no-select, input[type=range],
input[type=range] + .thumb {
  user-select: none;
}

.circle {
  border-radius: 50%;
}

.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.truncate {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-padding {
  padding: 0 !important;
}

.no-margin {
  margin: 0 !important;
}

/*******************
Flex property 
*******************/
.d-flex {
  display: flex;
}

.d-block {
  display: block;
}

.align-items-center {
  align-items: center;
}

.align-self-end {
  align-self: flex-end;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.justify-content-start {
  justify-content: flex-start;
}

.grf-tag {
  color: white;
  padding: 4px 7px;
  transition: all ease-in-out .3s;
  margin: 0 5px;
  width: fit-content;
  height: fit-content;
  &.-lg {
    padding: 10px;
  }
  &.-silver {
    background: @Grey_3;
    &:hover {
      background: @Dark_l;
      a {
        color: @Silver_l;
        font-weight: 700;
      }
    }
  }
  &.-green {
    background: @grf-2;
    &:hover {
      background: @Basil_b;
      a {
        color: @Silver_l;
      }
    }
  }
  &.-red {
    background: @grf-3;
    &:hover {
      background: @Ruby_b;
      a {
        color: @Silver_l;
      }
    }
  }
  &.-orange {
    background: @grf-5;
    &:hover {
      background: @Bittersweet_l;
      a {
        color: @Silver_l;
      }
    }
  }
  &.-blue {
    background: @grf-4;
    &:hover {
      background: @Aqua_l;
      a {
        color: @Silver_l;
      }
    }
  }
}