.text-d7 {
  color: #d72328;
}

.bg-d7 {
  background-color: #d72328;
}

.bg-d7:hover {
  background-color: #a31015;
}

#password-field-container {
  position: relative !important;
}

.user-eye-icon {
  position: absolute;
  right: 20px;
  top: 45%;
  translate: 50% 50%;
  cursor: pointer;
  user-select: none;
  color: #3f3f3f;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
}

.hover-underline-animation::after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #d72328;
  transition: transform 0.25s ease-out;
}

.hover-underline-animation:hover::after {
  transform: scaleX(1);
}

.hover-underline-animation.left::after {
  transform-origin: bottom right;
}

.hover-underline-animation.left:hover::after {
  transform-origin: bottom left;
}

.hover-underline-animation.active::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

::backdrop {
  background: rgba(0, 0, 0, 0.6) !important;
}

.toggle-row-icon,
.toggle-app-row-icon {
  transition: transform 0.3s ease;
}

.toggle-row-icon.open,
.toggle-app-row-icon.open {
  transform: rotate(90deg);
}

.hidden {
  display: none;
}