/* =============================================================================
   USIC Portal
   File : /staticfiles/css/fontawesome.css
   ============================================================================= */

/* =============================================================================
   ICON SIZE
   ============================================================================= */

.fa-xs {
  font-size: 0.65rem;
}

.fa-sm {
  font-size: 0.875rem;
}

.fa-md {
  font-size: 1rem;
}

.fa-lg {
  font-size: 1.15rem;
}

.fa-xl {
  font-size: 1.35rem;
}

/* =============================================================================
   DEFAULT ICON
   ============================================================================= */

.fa-solid,
.fa-regular,
.fa-brands {
  display: inline-block;

  width: 18px;

  text-align: center;

  vertical-align: middle;
}

/* =============================================================================
   ICON SPACING
   ============================================================================= */

.icon-left {
  margin-right: 6px;
}

.icon-right {
  margin-left: 6px;
}

/* =============================================================================
   BUTTON ICONS
   ============================================================================= */

.btn i {
  margin-right: 6px;
}

/* =============================================================================
   TOOLBAR ICONS
   ============================================================================= */

.usic-toolbar i {
  margin-right: 5px;
}

/* =============================================================================
   SIDEBAR ICONS
   ============================================================================= */

.sidebar i {
  width: 20px;

  text-align: center;

  margin-right: 8px;
}

/* =============================================================================
   TABLE ACTION ICONS
   ============================================================================= */

.action-icons {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;
}

.action-icons .btn {
  padding: 2px 7px;
}

/* =============================================================================
   ICON BUTTONS
   ============================================================================= */

.btn-icon {
  width: 32px;

  height: 32px;

  padding: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;
}

.btn-icon i {
  margin: 0;
}

/* =============================================================================
   ATTACHMENT COUNT
   ============================================================================= */

.attachment-btn {
  position: relative;
}

.attachment-count {
  position: absolute;

  top: -5px;

  right: -5px;

  min-width: 16px;

  height: 16px;

  border-radius: 50%;

  background: #dc3545;

  color: #ffffff;

  font-size: 10px;

  line-height: 16px;

  text-align: center;

  font-weight: 600;
}

/* =============================================================================
   STATUS ICONS
   ============================================================================= */

.icon-success {
  color: #198754;
}

.icon-danger {
  color: #dc3545;
}

.icon-warning {
  color: #fd7e14;
}

.icon-info {
  color: #0d6efd;
}

.icon-secondary {
  color: #6c757d;
}

/* =============================================================================
   HOVER
   ============================================================================= */

.icon-hover:hover {
  opacity: 0.75;

  cursor: pointer;
}

/* =============================================================================
   ANIMATIONS
   ============================================================================= */

.icon-spin {
  animation: iconSpin 1s linear infinite;
}

@keyframes iconSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =============================================================================
   END OF FILE
   ============================================================================= */