/**
 * @file
 * common styles
 */
body {
  font-family: var(--primary-font);
  font-weight: var(--font-regular);
  color: var(--text-color);
}

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

a {
  text-decoration: none;
  color: var(--primary-color);
}

input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--focus-visible-color);
  box-shadow: none;
}

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

.clr-gray-1 {
  color: var(--gray1);
}

.clr-gray-2 {
  color: var(--gray2);
}

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

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

.clr-black-1 {
  color: var(--black1);
}

.txt-clr {
  color: var(--text-color);
}

.gray-bg-1 {
  background-color: var(--gray1);
}

.gray-bg-3 {
  background-color: var(--gray3);
}

.black-bg-1 {
  background-color: var(--black1);
}

.white-bg {
  background-color: var(--white);
}

.font-primary {
  font-family: var(--primary-font);
}

.font-secondary {
  font-family: var(--secondary-font);
}

.font-tertiary {
  font-family: var(--tertiary-font);
}

.fs-i {
  font-style: italic;
}

/*text alignments*/
.tx-center {
  text-align: center;
}

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

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

/*loader*/
body:after {
  content: "";
  animation: rotation 1s linear infinite;
  background-position: 50%;
  background-repeat: no-repeat;
  border: 2px solid var(--primary-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  box-shadow: 0 0 0 100vmax var(--black1);
  left: 50%;
  min-height: 50px;
  min-width: 50px;
  position: fixed;
  top: 48.5%;
  transition: all 1s linear;
  z-index: 1261;
  background: var(--black1);
  margin-left: -25px;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}

.loading-completed:after {
  display: none;
}