.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sign {
    /*font-family: 'Roboto', sans-serif;*/
    font-size: 16px;
    font-weight: 300;
    color: #888;
    line-height: 30px;
    text-align: center;
}

.sign strong { font-weight: 500; }

.sign a, .sign a:hover, .sign a:focus {
	color: #19b9e7;
	text-decoration: none;
    -o-transition: all .3s; -moz-transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; transition: all .3s;
}

.sign h1, .sign h2 {
	margin-top: 10px;
	font-size: 38px;
    font-weight: 100;
    color: #555;
    line-height: 50px;
}

.sign h3 {
	font-size: 22px;
    font-weight: 300;
    color: #555;
    line-height: 30px;
}

img { max-width: 100%; }

::-moz-selection { background: #19b9e7; color: #fff; text-shadow: none; }
::selection { background: #19b9e7; color: #fff; text-shadow: none; }


.btn-link-1 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 16px 20px 0 20px;
	background: #19b9e7;
	font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-1:hover, .btn-link-1:focus, .btn-link-1:active { outline: 0; opacity: 0.6; color: #fff; }

.btn-link-1.btn-link-1-facebook { background: #4862a3; }
.btn-link-1.btn-link-1-twitter { background: #55acee; }
.btn-link-1.btn-link-1-google-plus { background: #dd4b39; }

.btn-link-1 i {
	padding-right: 5px;
	vertical-align: middle;
	font-size: 20px;
	line-height: 20px;
}

.btn-link-2 {
	display: inline-block;
	height: 50px;
	margin: 5px;
	padding: 15px 20px 0 20px;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #fff;
	font-size: 16px;
    font-weight: 300;
    line-height: 16px;
    color: #fff;
    -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
}
.btn-link-2:hover, .btn-link-2:focus,
.btn-link-2:active, .btn-link-2:active:focus { outline: 0; opacity: 0.6; background: rgba(0, 0, 0, 0.3); color: #fff; }


/***** Top content *****/

.inner-bg {
    /*padding: 40px 0 80px 0;*/
}

.top-content .text {
	color: #fff;
}

.top-content .text h1 { color: #fff; }

.top-content .description {
	/*margin: 20px 0 10px 0;*/
}

.top-content .description p { opacity: 0.8; }

.top-content .description a {
	color: #fff;
}
.top-content .description a:hover,
.top-content .description a:focus { border-bottom: 1px dotted #fff; }

.form-box {
	/*margin-top: 40px;*/
}

.form-top {
	overflow: hidden;
	padding: 0 25px 15px 25px;
	background: #fff;
	-moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
	text-align: left;
}

.form-top-left {
	float: left;
	width: 75%;
	padding-top: 25px;
}

.form-top-left h3 { margin-top: 0; }

.form-top-right {
	float: left;
	width: 25%;
	padding-top: 5px;
	font-size: 66px;
	color: #ddd;
	line-height: 100px;
	text-align: right;
}

.form-bottom {
	padding: 25px 25px 30px 25px;
	background: #eee;
	-moz-border-radius: 0 0 4px 4px; -webkit-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
	text-align: left;
}

.form-bottom form textarea {
	height: 100px;
}

.form-bottom form button.btn {
	width: 100%;
}

.form-bottom form .input-error {
	border-color: #19b9e7;
}

.social-login {
	margin-top: 35px;
}

.social-login h3 {
	color: #fff;
}
.social-login h3 a {
	color: #fff;
}

.social-login h3 a:hover {
	text-decoration: underline;
}

.social-login-buttons {
	margin-top: 25px;
}

.middle-border {
	min-height: 300px;
	margin-top: 170px;
	border-right: 1px solid #fff;
	border-right: 1px solid rgba(255, 255, 255, 0.6);
}


/***** Footer *****/

footer {
	padding-bottom: 70px;
	color: #fff;
}

footer .footer-border {
	width: 200px;
	margin: 0 auto;
	padding-bottom: 20px;
	/*border-top: 1px solid #fff;*/
	/*border-top: 1px solid rgba(255, 255, 255, 0.6);*/
}

footer p { opacity: 0.8; }

footer a {
	color: #fff;
}
footer a:hover, footer a:focus { color: #fff; border-bottom: 1px dotted #fff; }


/***** Media queries *****/

@media (min-width: 992px) and (max-width: 1199px) {}

@media (min-width: 768px) and (max-width: 991px) {}

@media (max-width: 767px) {

	.middle-border { min-height: auto; margin: 65px 30px 0 30px; border-right: 0;
						border-top: 1px solid #fff; border-top: 1px solid rgba(255, 255, 255, 0.6); }

}

@media (max-width: 415px) {

	h1, h2 { font-size: 32px; }

}

.ng-confirm.ng-confirm-light .ng-confirm-bg, .ng-confirm.ng-confirm-white .ng-confirm-bg {
	opacity: .4;
}


:root {
	--primary-color: #4361ee;
	--secondary-color: #3a0ca3;
	--accent-color: #4cc9f0;
	--light-color: #f8f9fa;
	--dark-color: #212529;
	--success-color: #4bb543;
	--warning-color: #ffc107;
	--danger-color: #dc3545;
	--gradient: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}

* {

	box-sizing: border-box;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
	background: var(--gradient);
	/*min-height: 100vh;*/
	/*display: flex;*/
	/*align-items: center;*/
	/*justify-content: center;*/
	/*flex-direction: column;*/
}

.login-container {
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
}

.login-container .login-card {
	background: white;
	border-radius: 20px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-container .login-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.login-container .card-header {
	background: var(--gradient);
	color: var(--light-color);
	padding: 10px 20px 4px;
	text-align: center;
	position: relative;
}

.login-container .card-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
	opacity: 0.1;
}

.login-container .logo {
	font-size: 40px;
	margin-bottom: 5px;
	display: block;
}

.login-container .card-header h3 {
	font-weight: 700;
	margin-bottom: 5px;
	font-size: 20px;
	color: var(--light-color);
}

.login-container .card-header p {
	opacity: 0.9;
	font-size: 16px;
	color: var(--light-color);
}

.login-container .card-body {
	padding: 10px 30px;
}

.login-container .form-group {
	margin-bottom: 5px;
	position: relative;
}

.login-container .form-label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	color: var(--dark-color);
	font-size: 14px;
	text-align: left;
}

.login-container .input-with-icon {
	position: relative;
}

.login-container .input-icon {
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--primary-color);
	font-size: 18px;
}

.login-container .form-control {
	width: 100%;
	padding: 12px 15px 12px 45px;
	border: 2px solid #e1e5ee;
	border-radius: 5px;
	font-size: 16px;
	transition: all 0.3s ease;
	background-color: #f8f9fa;
}

.login-container .form-control:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
	background-color: white;
}

.login-container .verify-code-group {
	display: flex;
	gap: 10px;
	align-items: flex-end;
}

.login-container .verify-code-input {
	flex: 1;
}

.login-container .verify-code-img {
	height: 50px;
	border-radius: 8px;
	border: 1px solid #e1e5ee;
	cursor: pointer;
	transition: all 0.3s ease;
}

.login-container .verify-code-img:hover {
	transform: scale(1.05);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.login-container .btn-group {
	display: flex;
	gap: 15px;
	margin-top: 25px;
}

.login-container .btn {
	flex: 1;
	padding: 12px;
	border: none;
	border-radius: 10px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.login-container .btn-primary {
	background: var(--gradient);
	color: white;
}

.login-container .btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 15px rgba(67, 97, 238, 0.3);
}

.login-container .btn-secondary {
	background: #f8f9fa;
	color: var(--dark-color);
	border: 1px solid #e1e5ee;
}

.login-container .btn-secondary:hover {
	background: #e9ecef;
	transform: translateY(-2px);
}

.login-container .info-box {
	background: #f0f5ff;
	border-radius: 10px;
	padding: 15px;
	margin-top: 15px;
	border-left: 4px solid var(--primary-color);
}

.login-container .info-box p {
	margin-bottom: 2px;
	font-size: 12px;
	color: #495057;
}

.login-container .info-box b {
	color: var(--primary-color);
}

.login-container .error-message {
	color: var(--danger-color);
	text-align: center;
	margin-top: 15px;
	padding: 10px;
	background: rgba(220, 53, 69, 0.1);
	border-radius: 8px;
	display: none;
}

.login-container .footer {
	text-align: center;
	margin-top: 20px;
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

.login-container .footer a {
	color: white;
	text-decoration: none;
}

.login-container .footer a:hover {
	text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 576px) {
	.login-container {
		max-width: 100%;
	}

	.card-body {
		padding: 20px;
	}

	.btn-group {
		flex-direction: column;
	}

	.verify-code-group {
		flex-direction: column;
	}

	.verify-code-img {
		align-self: center;
	}
}

/* 动画效果 */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

.login-container .login-card {
	animation: fadeIn 0.5s ease-out;
}

/* 表单验证样式 */
.login-container .has-error .form-control {
	border-color: var(--danger-color);
}

.login-container .has-error .input-icon {
	color: var(--danger-color);
}

.login-container .has-success .form-control {
	border-color: var(--success-color);
}

.login-container .has-success .input-icon {
	color: var(--success-color);
}