body {
	background-color: #f4f9fd;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: #1a1a1a;
}

.text-gradient-h1 {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(to right, black, #444, #888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
@media (max-width: 767.98px) {
  .text-gradient-h1 {font-size: 2rem;}
  .mobilesubtitle { font-size: 1.2rem !important;}
}

.text-gradient-h2 {
  font-size: 3rem;
  font-weight: bold;
  background: linear-gradient(to right, #967B2E, #C5A13B, #D2C9AE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
@media (max-width: 767.98px) {
  .text-gradient-h2 {font-size: 2rem;}
  .mobilesubtitle { font-size: 1.2rem !important;}
}


.text-gradient-threatcard-title {
  font-size: 1.8rem;
  font-weight: bold;
  background: linear-gradient(to right, #967B2E, #C5A13B, #D2C9AE);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
@media (max-width: 767.98px) {
  .text-gradient-threatcard-title {font-size: 2rem;}
  .mobilesubtitle { font-size: 1.0rem !important;}
}


.sidebar {
	background-color: #000;
	width: 4rem;
	height: 95vh;
	margin: 1rem;
	border-radius: 0.75rem;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.sidebar-brand {
	writing-mode: vertical-lr;
	text-orientation: mixed;
	transform: rotate(180deg);
	font-size: 1.5rem;
	font-weight: bold;
	color: white;
}

.sidebar-icon {
	color: white;
	font-size: 1.25rem;
}

.unread {
	border-left: 4px solid #0d6efd;
}

.msg-card {
	border-radius: 0.75rem;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	transition: all 0.2s;
}

.msg-header {
	cursor: pointer;
	transition: background-color 0.2s;
}

.msg-header:hover {
	background-color: #f8f9fa;
}

.avatar {
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
}

.header-avatar {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
}

.stats-item {
	color: #6c757d;
}

.btn-action {
	border: none;
	background: none;
	color: #6c757d;
	font-size: 0.875rem;
	transition: color 0.2s;
}

.btn-action:hover {
	color: #dc3545;
}

.btn-export:hover {
	color: #6f42c1;
}

.rotate-icon {
	transition: transform 0.3s;
}

.rotate-180 {
	transform: rotate(180deg);
}

.toast-success {
	color: #198754;
}

@media (max-width: 768px) {
	.sidebar {
		display: none;
	}
}

@media (max-width: 576px) {
#emailHeaderWrapper {
	flex-direction: column !important;
	align-items: center !important;
	text-align: center;
}

#emailTitle {
	font-size: 1.25rem !important; 
	justify-content: center;
}

#iconSection {
	justify-content: center !important;
}
}

.combo-icon {
position: relative;
display: inline-block;
font-size: 24px; 
}

.combo-icon .bi-arrow-down-circle-fill {
position: absolute;
bottom: -2px; 
right: -12px;  
font-size: 1rem; 
opacity: 100; 
}

@media (max-width: 991.98px) { 
#emailHeaderWrapper .header-row-1,
#emailHeaderWrapper .header-row-2 {
justify-content: center !important; 
text-align: center;
}

#emailHeaderWrapper {
flex-wrap: wrap;
}
#emailHeaderWrapper .header-row-2 {
margin-top: 3rem; 
width: 100%; 
}
#emailHeaderWrapper .header-row-1 {
margin-top: 1.5rem /* mt-4 = 1.5rem */
width: 100%; 
}

#emailHeaderWrapper .header-row-0 {
width: 100%; 
}
}

@media (max-width: 991.98px) { 
#threatHeaderWrapper .header-row-1,
#threatHeaderWrapper .header-row-2 {
justify-content: center !important; 
text-align: center;
}

#threatHeaderWrapper {
flex-wrap: wrap;
}
#threatHeaderWrapper .header-row-2 {
margin-top: 3rem; 
width: 100%; 
}
#threatHeaderWrapper .header-row-1 {
margin-top: 1.5rem /* mt-4 = 1.5rem */
width: 100%; 
}

#threatHeaderWrapper .header-row-0 {
width: 100%; 
}
}

/* icrease icon size on mobile */
@media (max-width: 575.98px) {
.iconsizemob {
font-size: 1.5rem;
}
}

.threat-card {
border-radius: 0.75rem;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
transition: all 0.2s;
}