/* Kinore Brand Logo */
.bg-color-brand1 {
  background-color: #fabe19;
}

.bg-color-brand1-light {
  background-color: #fabe1926;
}

.bg-color-brand2 {
  background-color: #1e1919;
}

.bg-color-brand3 {
  background-color: #640ae1;
}

.bg-color-brand3-light {
  background-color: hsla(265.12, 91.49%, 46.08%, 0.1);
}

.bg-color-brand4 {
  background-color: #c8d2dc;
}

.bg-color-brand4-light {
  background-color: #c8d2dc34;
}

.border-color-brand3 {
  border: 2px solid #640ae1;
}

.border-bottom-color-brand3 {
  border-bottom: 2px solid #640ae1;
}

.border-bottom-color-brand1 {
  border-bottom: 3px solid #fabe19;
}

.text-color-brand1 {
  color: #fabe19;
}

.text-color-brand2 {
  color: #1e1919;
}

.text-color-brand3 {
  color: #640ae1;
}

.text-color-brand4 {
  color: #c8d2dc;
}

.color-negative {
  background-color: rgba(233, 71, 72, .15);
  color: rgba(233, 71, 72, 1);
}

.color-neutral {
  background-color: rgba(255, 160, 67, .20);
  color: rgba(255, 160, 67, 1);
}

.color-positive {
  background-color: rgba(22, 171, 59, .15);
  color: rgba(22, 171, 59, 1);
}

.colors-completed {
  /* background-color: hsla(133.33, 60%, 94.12%, 1); */
  /* border-color: hsla(133.33, 60%, 94.12%, 1); */
}

.colors-selected {
  /* background-color: hsla(265.12, 91.49%, 46.08%, 0.1); */
  /* border-color: hsla(265.12, 91.49%, 46.08%, 0.5); */
}

.text-xxs {
  font-size: 10px;
}

.text-color-complete {
  color: #33C758;
}

.text-color-incomplete {
  color: #ff9f38;
}

/* ~~~~~~~~~~~~~~~~~ */

.bg-color-risk-high {
  background-color: hsla(357.95, 85.06%, 52.75%, .8);
}

.bg-color-risk-moderate {
  background-color: hsla(57.65, 90.27%, 55.69%, .5);
}

.bg-color-risk-low {
  background-color: hsla(139.85, 63.64%, 40.98%, .8);
}

.spinner-indicator,
.htmx-indicator {
  width: 0;
  height: 18px;
}

.spinner-animation,
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  margin-left: 4px;
  width: 18px;
  animation: expandWidth 0.3s forwards;
}

.htmx-request .htmx-collapse {
  display: none;
}

.faded-while-loading {
  opacity: 0.4;
}

.rev-htmx-indicator {
  display: flex;
}

.htmx-request .rev-htmx-indicator {
  display: none;
}

.htmx-request.rev-htmx-indicator {
  display: none;
}

.my-indicator {
  display: none;
}

.htmx-request .my-indicator {
  display: flex;
}

.htmx-request.my-indicator {
  display: flex;
}

@keyframes expandWidth {
  from {
    width: 0;
  }

  to {
    width: 20px;
  }
}

.search-input-style-sm {
  padding-left: var(--form-input-search-padding-left, 1.5rem) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-4.35-4.35M17.5 11a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z'/%3E%3C/svg%3E") !important;
  background-position: left .25rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

.search-input-style {
  padding-left: var(--form-input-search-padding-left, 2.5rem) !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' aria-hidden='true' viewBox='0 0 24 24'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-4.35-4.35M17.5 11a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0Z'/%3E%3C/svg%3E") !important;
  background-position: left .75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

select:disabled,
input:disabled,
textarea:disabled {
  color: rgba(107, 114, 128, 1);
  background-color: rgba(239, 239, 239, 0.4);
}

.htmx-request .shown-while-loading { display: block; }
.htmx-request .hidden-while-loading { display: none; }
.shown-while-loading { display: none; }
.htmx-request.faded-while-loading, .htmx-request .faded-while-loading  { opacity: 0.6 }

/* Shimmer Stylings */
.shimmer {
  width: 100%
}

.shimmer>* {
  margin: var(--shimmer-block-default-margin, 0 0 10px 0);
}

.shimmer .circle,
.shimmer .rect {
  background: var(--shimmer-block-color-from, #f6f7f8);
  background-image: linear-gradient(to right, var(--shimmer-block-color-from, #f6f7f8) 0%, var(--color-to, #edeef1) 20%, var(--shimmer-block-color-from, #f6f7f8) 40%, var(--shimmer-block-color-to, #f6f7f8) 100%);
  background-repeat: repeat-y;
  background-size: 100% 50px;
  position: relative;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: placeholderShimmer;
  animation-timing-function: linear;
}

.shimmer .rect {
  height: var(--shimmer-block-height, 20px);
  border-radius: var(--shimmer-block-border-radius, 10px)
}

.shimmer .circle {
  border-radius: 100000px;
  width: calc(var(--shimmer-block-height, 20px) * 3);
  height: calc(var(--shimmer-block-height, 20px) * 3);
  animation-duration: .8s;
  animation-name: placeholderShimmerCircle;
}

.shimmer .circle.xs {
  width: var(--shimmer-block-height, 20px);
  height: var(--shimmer-block-height, 20px);
}

.shimmer .circle.sm {
  width: calc(var(--shimmer-block-height, 20px) * 2);
  height: calc(var(--shimmer-block-height, 20px) * 2);
}

.shimmer .circle.md {
  width: calc(var(--shimmer-block-height, 20px) * 4);
  height: calc(var(--shimmer-block-height, 20px) * 4);
}

.shimmer .circle.lg {
  width: calc(var(--shimmer-block-height, 20px) * 5);
  height: calc(var(--shimmer-block-height, 20px) * 5);
}

.shimmer .centered {
  margin-left: auto;
  margin-right: auto;
}

.shimmer .width-\.25 {
  width: 25%;
}

.shimmer .width-\.5 {
  width: 50%;
}

.shimmer .width-\.75 {
  width: 75%;
}

@keyframes placeholderShimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@keyframes placeholderShimmerCircle {
  0% {
    background-position: -80px 0;
  }

  100% {
    background-position: 80px 0;
  }
}

/* ~~~~~~~~~~~~~~~~ */