/* --------Utilities classes will display in ui soon--------
the following are the classes with several variations:
-margin
-padding
-border
-border-radius
-flex
-visibility
-images
-text-color
-background-color
-width-height

{search these for easy reach (press ctrl+F and copy paste the text)}
*/

/* --------------------------------------margin--------------------------------------*/

.margin-auto {
  margin: auto;
}

.margin-0 {
  margin: 0;
}

.margin-0p5 {
  margin: 0.5rem;
}

.margin-1 {
  margin: 1rem;
}

.margin-1p1 {
  margin: 1.1rem;
}

.margin-1p2 {
  margin: 1.2rem;
}

.margin-1p3 {
  margin: 1.3rem;
}

.margin-1p4 {
  margin: 1.4rem;
}

.margin-1p5 {
  margin: 1.5rem;
}

.margin-2 {
  margin: 2rem;
}

.margin-1p2 {
  margin: 1.2rem;
}

.margin-2p2 {
  margin: 2.2rem;
}

.margin-2p3 {
  margin: 2.3rem;
}

.margin-2p4 {
  margin: 2.5rem;
}

.margin-2p5 {
  margin: 2.5rem;
}

.margin-3 {
  margin: 3rem;
}

.margin-3p1 {
  margin: 3.1rem;
}

.margin-3p2 {
  margin: 3.2rem;
}

.margin-3p3 {
  margin: 3.3rem;
}

.margin-3p4 {
  margin: 3.4rem;
}

.margin-3p5 {
  margin: 3.5rem;
}

.margin-4 {
  margin: 4rem;
}

.margin-top-0 {
  margin-top: 0;
}

.margin-bottom-0 {
  margin-bottom: 0;
}

.margin-left-0 {
  margin-left: 0;
}

.margin-right-0 {
  margin-right: 0;
}

.margin-top-1 {
  margin-top: 1rem;
}
.margin-top-2 {
  margin-top: 2rem;
}
.margin-top-3 {
  margin-top: 3rem;
}
.margin-top-4 {
  margin-top: 4rem;
}
.margin-bottom-1 {
  margin-bottom: 1rem;
}
.margin-bottom-2 {
  margin-bottom: 2rem;
}
.margin-bottom-3 {
  margin-bottom: 3rem;
}
.margin-bottom-4 {
  margin-bottom: 4rem;
}
.margin-top-bottom-1 {
  margin: 1rem 0;
}
.margin-top-bottom-2 {
  margin: 2rem 0;
}
.margin-top-bottom-3 {
  margin: 3rem 0;
}
.margin-top-bottom-4 {
  margin: 4rem 0;
}
/* -------------------------------------padding------------------------------------- */

.padding-0 {
  padding: 0;
}

.padding-0p5 {
  padding: 0.5rem;
}

.padding-1 {
  padding: 1rem;
}

.padding-1p1 {
  padding: 1.1rem;
}

.padding-1p2 {
  padding: 1.2rem;
}

.padding-1p3 {
  padding: 1.3rem;
}

.padding-1p4 {
  padding: 1.4rem;
}

.padding-1p5 {
  padding: 1.5rem;
}

.padding-2 {
  padding: 2rem;
}

.padding-2p2 {
  padding: 2.2rem;
}

.padding-2p3 {
  padding: 2.3rem;
}

.padding-2p4 {
  padding: 2.5rem;
}

.padding-2p5 {
  padding: 2.5rem;
}

.padding-3 {
  padding: 3rem;
}

.padding-3p1 {
  padding: 3.1rem;
}

.padding-3p2 {
  padding: 3.2rem;
}

.padding-3p3 {
  padding: 3.3rem;
}

.padding-3p4 {
  padding: 3.4rem;
}

.padding-3p5 {
  padding: 3.5rem;
}

.padding-4 {
  padding: 4rem;
}

.padding-top-0 {
  padding-top: 0;
}

.padding-bottom-0 {
  padding-bottom: 0;
}

.padding-left-0 {
  padding-left: 0;
}

.padding-right-0 {
  padding-right: 0;
}

.padding-top-1 {
  padding-top: 1rem;
}
.padding-top-2 {
  padding-top: 2rem;
}
.padding-top-3 {
  padding-top: 3rem;
}
.padding-top-4 {
  padding-top: 4rem;
}
.padding-bottom-1 {
  padding-bottom: 1rem;
}
.padding-bottom-2 {
  padding-bottom: 2rem;
}
.padding-bottom-3 {
  padding-bottom: 3rem;
}
.padding-bottom-4 {
  padding-bottom: 4rem;
}
.padding-top-bottom-1 {
  padding: 1rem 0;
}
.padding-top-bottom-2 {
  padding: 2rem 0;
}
.padding-top-bottom-3 {
  padding: 3rem 0;
}
.padding-top-bottom-4 {
  padding: 4rem 0;
}
/* -------------------------------------border------------------------------------- */

.border-0 {
  border: 0;
}

.border-0p1 {
  border: 0.1rem solid var(--primary-color);
}

.border-0p2 {
  border: 0.2rem solid var(--primary-color);
}

.border-0p3 {
  border: 0.3rem solid var(--primary-color);
}

.border-0p4 {
  border: 0.4rem solid var(--primary-color);
}

.border-0p5 {
  border: 0.5rem solid var(--primary-color);
}

.border-top-0 {
  border-top: 0;
}

.border-left-0 {
  border-left: 0;
}

.border-bottom-0 {
  border-bottom: 0;
}

.border-right-0 {
  border-right: 0;
}

.border-primary {
  border-color: var(--primary-color);
}

.border-secondary {
  border-color: var(--secondary-color);
}

.border-black {
  border-color: var(--black-color);
}

.border-white {
  border-color: var(--white-color);
}

.border-gray {
  border-color: var(--gray-color);
}

.border-success {
  border-color: var(--success);
}

.border-warning {
  border-color: var(--warning);
}

.border-info {
  border-color: var(--info);
}

.border-danger {
  border-color: var(--danger);
}

/* -------------------------------------border-radius------------------------------------- */

.border-radius-0 {
  border-radius: 0;
}

.border-radius-0p1 {
  border-radius: 0.1rem;
}

.border-radius-0p2 {
  border-radius: 0.2rem;
}

.border-radius-0p3 {
  border-radius: 0.3rem;
}

.border-radius-0p4 {
  border-radius: 0.4rem;
}

.border-radius-0p5 {
  border-radius: 0.5rem;
}

.border-radius-50 {
  border-radius: 50%;
}

/* -------------------------------------flex------------------------------------- */

.flex {
  display: flex;
}

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

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

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

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

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

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

.justify-content-between {
  justify-content: space-between;
}

.justify-content-around {
  justify-content: space-around;
}

.justify-content-evenly {
  justify-content: space-evenly;
}

.align-items-start {
  align-items: flex-start;
}

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

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

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

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

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

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

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

.align-self-baseline {
  align-self: baseline;
}

.align-self-stretch {
  align-self: stretch;
}

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

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

/* -------------------------------------visibility------------------------------------- */

.hidden {
  visibility: hidden;
}

.opacity-100 {
  opacity: 100%;
}

.opacity-75 {
  opacity: 75%;
}

.opacity-50 {
  opacity: 50%;
}

.opacity-25 {
  opacity: 25%;
}

.opacity-0 {
  opacity: 0%;
}

.display-none {
  display: none;
}

.display-block {
  display: block;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

/* -------------------------------------images------------------------------------- */

img {
  object-fit: cover;
}

/* -------------------------------------position------------------------------------- */

.position-static {
  position: static;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.position-sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}
.top-50 {
  top: 50;
}
.top-100 {
  top: 100;
}

.bottom-0 {
  bottom: 0;
}
.bottom-50 {
  bottom: 50%;
}
.bottom-100 {
  bottom: 100%;
}

.left-0 {
  left: 0;
}
.left-50 {
  left: 50%;
}
.left-100 {
  left: 100%;
}

.right-0 {
  right: 0%;
}

.right-50 {
  right: 50%;
}

.right-100 {
  right: 100%;
}

.translate-middle {
  transform: translate(-50%, -50%);
}

.box-shadow-light {
  box-shadow: 0 0.5rem 1rem var(--gray-color);
}

.box-shadow-large {
  box-shadow: 0 1rem 3rem var(--gray-color);
}

.text-decoration-underline {
  text-decoration: underline;
}

.text-decoration-line-through {
  text-decoration: line-through;
}

.text-decoration-none {
  text-decoration: none;
}

/* --------------------------------text-colors-------------------------- */

.danger {
  color: var(--danger);
}
.success {
  color: var(--success);
}
.warning {
  color: var(--warning);
}
.black {
  color: var(--black-color);
}
.white {
  color: var(--white-color);
}
.gray {
  color: var(--gray-color);
}
.info {
  color: var(--info);
}
.danger {
  color: var(--danger);
}

/* ----------------------------background-colors--------------------------- */

.bg-danger {
  background-color: var(--danger);
}
.bg-success {
  background-color: var(--success);
}
.bg-warning {
  background-color: var(--warning);
}
.bg-black {
  background-color: var(--black-color);
}
.bg-white {
  background-color: var(--white-color);
}
.bg-gray {
  background-color: var(--gray-color);
}
.bg-info {
  background-color: var(--info);
}

/* ---------------------------------width-height-------------------------------------- */

.width-100 {
  width: 100%;
}
.width-70 {
  width: 70%;
}
.width-60 {
  width: 60%;
}
.width-50 {
  width: 50%;
}
.width-40 {
  width: 40%;
}
.width-30 {
  width: 30%;
}
.height-100 {
  height: 100%;
}
.height-70 {
  height: 70%;
}
.height-60 {
  height: 60%;
}
.height-50 {
  height: 50%;
}
.height-40 {
  height: 40%;
}
.height-30 {
  height: 30%;
}