.df{
	display: flex;
}
.jfs{
	justify-content: flex-start;
}
.jfe{
	justify-content: flex-end;
}
.js{
	justify-content: space-between;
}
.jc{
	justify-content: center;
}
.ac{
	align-items: center;
}
.ace{
	align-items: flex-end;
}
.acs{
	align-items: flex-start;
}
.fw{
	flex-wrap: wrap;
}

#global-message-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
}

.global-message {
  display: inline-block;
  min-width: 200px;
  margin-top: 10px;
  padding: 12px 20px;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  animation: fadeInOut 3s ease forwards;
  pointer-events: auto;
}

.global-message.success { background-color: #67c23a; }
.global-message.error   { background-color: #f56c6c; }
.global-message.warning { background-color: #e6a23c; }
.global-message.info    { background-color: #909399; }

@keyframes fadeInOut {
  0% { opacity: 0; transform: translateY(-10px); }
  10% { opacity: 1; transform: translateY(0); }
  90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-10px); }
}