/* jf color dots */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.w-1\/2 {
  width: 50%;
}

.w-5 {
  width: 1.25rem;
}

.h-5 {
  height: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.h-6 {
  height: 1.5rem;
}

.order-1 {
  order: 1;
}


@media screen and (min-width: 640px) {
  .ti\:w-1\/2 {
    width: 50%;
  }

  .ti\:order-0 {
    order: 0;
  }
}


@media screen and (min-width: 750px) {
  .sm\:w-5 {
    width: 1.25rem;
  }

  .sm\:h-5 {
    height: 1.25rem;
  }
}

.pt-2 {
  padding-top: .5rem;
}

.mr-3 {
  margin-right: .75rem;
}

.mr-4 {
  margin-right: 1rem;
}

.flex {
  display: flex;
}

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

.block {
  display: block;
}

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

.border {
  border-style: solid;
  border-width: 1px;
}

.border-2 {
  border-style: solid;
  border-width: 2px;
}

.border-black {
  border-color: #000;
}

.rounded-full {
  border-radius: 9999px;
}



/* specific */

.jf-color-dot-bg {
  transition: transform 200ms;
}

.jf-color-dot-active .jf-color-dot-bg {
  transform: scale(.7);
}

.jf-color-dot:hover .jf-color-dot-bg {
  transform: scale(.7);
}