html {
  height: 100%;
}

body {
	margin: 0;
	height: 100%;
	background: #111;
	background-image:
		linear-gradient(to top, rgba(14, 14, 14, 1) 0%, rgba(255,255,255,0)),
		linear-gradient(to right, #6a3939,#5a5832,#3f6735,#306555,#373d6f,#5c3469);
	background-attachment: fixed;
	color: #eee;
}

h1,h2,.h2,h3 {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}

h2,.h2 {
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
}

img.profile-picture {
	box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 20px 50px rgba(0, 0, 0, .34);
	border-radius: 100%;
	border: 8px solid rgba(255, 255, 255, 0.15);
}

img.profile-picture-sm {
	border: 4px solid rgba(255, 255, 255, 0.15);
}

img.profile-picture-xs {
	border: 2px solid rgba(255, 255, 255, 0.15);
}

.navbar .nav-item .nav-link:hover,
.box-bg {
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 6px;
}
.navbar .nav-item .nav-link {
	padding: 1rem 1.5rem;
	margin-right: 4px;
}

.navbar .nav-item .nav-link.active {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 6px;
}

.blur-bg {
	-webkit-backdrop-filter: saturate(200%) blur(18px);
	backdrop-filter: saturate(200%) blur(18px);
}

.navbar {
	background: rgba(0,0,0,.3);
	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.5);
}

.modal {
	background: rgba(0,0,0,0);
}

.modal-content,
.dropdown-menu {
	background: rgba(0,0,0,.5);
	box-shadow: 0px 0px 20px 5px rgba(0,0,0,0.2);
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.15);
}

.btn.btn-outline-light {
	background: rgba(0,0,0,0.3);
	-webkit-backdrop-filter: saturate(200%) blur(18px);
	backdrop-filter: saturate(200%) blur(18px);
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.15);
}
.btn.btn-outline-primary {
	background: rgba(0,0,0,0.2);
	border: 2px solid rgba(13, 110, 253, 0.5);
	color: #eee !important;
}

.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus,
.btn.btn-outline-light:active,
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active {
	background: rgba(0,0,0,0.3);
	-webkit-backdrop-filter: saturate(200%) blur(18px);
	backdrop-filter: saturate(200%) blur(18px);
	color: #eee !important;
}

ul.fa-ul,
ul.fa-ul li:last-child {
	margin-bottom: 0;
}

ul.fa-ul li {
	margin-bottom: 1rem;
}

ul.fa-ul li i {
	text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);
}

table {
	background: rgba(0,0,0,.1);
	-webkit-backdrop-filter: saturate(200%) blur(18px);
	backdrop-filter: saturate(200%) blur(18px);
	color: #eee !important;
	width: 100%;
	border-collapse: separate !important;
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.15);
}

table tr td,
table tr th {
	background-color: transparent;
	color: #eee;
	padding: 12px;
	border-bottom: 0;
}

.card-styles {
	background-color: rgba(0,0,0,0.3);
	-webkit-backdrop-filter: saturate(200%) blur(18px);
	backdrop-filter: saturate(200%) blur(18px);
	border-radius: 8px;
	border: 2px solid rgba(255, 255, 255, 0.15);
}

.card-styles-danger {
	background-color: rgba(50,0,0,0.3);
	border: 2px solid rgba(255, 0, 0, 0.15);
}

.card-styles-success {
	background-color: rgba(0,50,0,0.3);
	border: 2px solid rgba(0, 255, 0, 0.15);
}

.card-styles-warning {
	background-color: rgba(50, 42, 0, 0.3);
	border: 2px solid rgba(255, 187, 0, 0.15);
}

.card-styles-primary {
	background-color: rgba(0,0,50,0.3);
	border: 2px solid rgba(0, 0, 255, 0.15);
}




@keyframes status_alert_animate {
	0% {
		color: #ff5817;
	}
	50% {
		color: #fff276;
	}
	100% {
		color: #ff5817;
	}
}

@keyframes status_normal_animate {
	0% {
		color: #eee;
	}
	60% {
		color: #8bcf89;
	}
	100% {
		color: #eee;
	}
}