.alert {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 8px;

   width: fit-content;
   margin: 0 auto;

   padding: 8px;
   border-radius: 4px;

   font-weight: 500;
   font-size: var(--fs-400);
}

.alert.alert-floating {
   position: fixed;
   left: 0;
   right: 0;
   top: -100px;   
   box-shadow: 0px 4px 18px 0px rgba(var(--Box-shadow));
   z-index: 99999;
   opacity: 0;
}

.alert b {
   text-transform: capitalize;
}

.alert.alert-floating.error {
   background: hsl(var(--Alert-error-solid));
   color: var(--Alert-font);
}
.alert.alert-floating.warning {
   background: hsl(var(--Alert-warning-solid));
   color: var(--Alert-font); 
}
.alert.alert-floating.info {
   background: hsl(var(--Alert-info-solid));
   color: var(--Alert-font);
}
.alert.alert-floating.success {
   background: hsl(var(--Alert-success-solid));
   color: var(--Alert-font);
}

.alert.alert-width-full {
   width: 100%;
}

.alert span:first-child {
   white-space: nowrap;
}

.alert.error {
   background: rgba(var(--Alert-error), 0.4);
   border: 1px solid rgba(var(--Alert-error));
}

.alert.error i {
   color: #D32626;
}
 
.alert.warning {
   background: rgba(var(--Alert-warning), 0.4);
   border: 1px solid rgba(var(--Alert-warning));
}
.alert.warning i {
   color: #FB9700;
}

.alert.info {
   background: rgba(var(--Alert-info), 0.4);  
   border: 1px solid rgba(var(--Alert-info));
}
.alert.info i {
   color: #1087F5;
}

.alert.success {
   background: rgba(var(--Alert-success), 0.4);  
   border: 1px solid rgba(var(--Alert-success));
}
.alert.success i {
   color: #0DBC14;
}

@media (max-width: 768px) {
   .alert {
      font-size: var(--600);
      padding: 12px;
      border-radius: 8px;
   }
   .alert i {
      font-size: 1.25em;
   }
}