.messages.messages-top {
	position: fixed;
	left: 50%;
	top: 30px;
	z-index: 999999999;
    transform: translateX(-50%);
}

.messages.messages-right {
	position: fixed;
	right: 1.5rem;
	top: 1.5rem;
	z-index: 999999999;
}

.messages.messages-top .alert {
	padding: 12px 18px 12px 15px;
}
.messages.messages-right .alert {
	padding: 15px 25px 15px 18px;
}

.messages .alert {
    position: relative;

	width: auto;
	max-width: 600px;
	min-height: 20px;

	margin-left: auto;
	margin-right: auto;
    margin-bottom: 1rem;

    border: 1px solid transparent;
	border-radius: 5px;
	box-sizing: content-box;

	word-break: break-all;
}

.messages .alert-message {
	margin-left: 25px;
	min-width: 80px;
    line-height: 1.2em;
}

.messages .alert .alert-icon {
	float: left;
	display: block;
    width: 1em;
	font-weight: 600;
	font-size: 1.5em;
	overflow: visible;
    font-family:"ui-sans-serif","Microsoft YaHei";
}

.messages .alert-error {
    color: #932;
    background-color: #f8d7da;
    border-color: #932;
}
.messages .alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #155724;
}
.messages .alert-info {
    color: #27f;
    background-color: #acf;
    border-color: #27f;
}
.messages .alert-warning {
    color: #c60;
    background-color: #fff3cd;
    border-color: #c60;
}

.messages .alert-success .alert-icon {
	font-weight: 900;
	transform: scale(1.1,0.95) translate(1px,0px);
}
.messages .alert-error .alert-icon {
	transform: scale(1.37,1.37) translate(0px,-1px);
}
.messages .alert-info .alert-icon,
.messages .alert-warning .alert-icon {
	transform: scale(1.2,1) translate(5px,1px);
}

.messages .alart-jump-link {
	color: var(--xg-color, #f53);
}




.message-enter {
    opacity: 0;
    animation-duration: 200ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0,0,.15,1);
    animation-play-state: paused;
}

.message-exit {
    animation-duration: 200ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0,0,.15,1);
    animation-play-state: paused;
}

.messages-top .message-enter.message-enter-active {
    animation-name: message-in-top;
    animation-play-state: running;
}

.messages-top .message-exit.message-exit-active {
    animation-name: message-out-top;
    animation-play-state: running;
}

.messages-right .message-enter.message-enter-active {
    animation-name: message-in-right;
    animation-play-state: running;
}

.messages-right .message-exit.message-exit-active {
    animation-name: message-out-right;
    animation-play-state: running;
}

.message-shake {
    animation-duration: 500ms;
    animation-name: message-shake;
    animation-fill-mode: both;
}

@keyframes message-in-top {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes message-out-top {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}
@keyframes message-in-right {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes message-out-right {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

@keyframes message-shake {
    0%,
    20%,
    40%,
    60%,
    80%,
    to {
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }

    0% {
        transform: scale3d(1, 1, 1);
    }

    20% {
        transform: scale3d(1.06, 1.06, 1.06);
    }

    40% {
        transform: scale3d(.93, .93, .93);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(.97, .97, .97);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}