table {
	xxborder:2px solid;
	xxborder-collapse:collapse;
}


tr.row-total, tr.row-percent , td.col-15, td.col-16 {
    font-weight: bold;
}

table {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
	border-collapse: collapse;
}

.headerpanel {
	box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
	border:1px solid;
	width:98%;
}

.innerheaderpanel {
	padding:10px;
}

tr,td,th {
	border:1px solid;
}

.mailstats-detail-1stcol{
  width:174px;
 }

thead tr {
  border-bottom :2px solid;
  color:black;
  background-color:darkgrey;
}

tfoot tr {
  border-top:2px solid;
  color:black;
  font-weight: bold;
  background-color:darkgrey;
 }

.stripes tbody tr:nth-child(odd) {background-color: #dfdfdf}

.no-stripes tbody tr:nth-child(odd) {
    background-color: transparent; /* or whatever background color you want */
}


div.linksattop {
  display: flex;
  justify-content: space-between;
}

a.prevlink {
  text-align: left;
}

div.divshowindex {
  flex-grow: 1;
  text-align: center;
}

a.nextlink {
  text-align: right;
}
/* Basic styling for the tab container */
.tab-container {
	display: flex;
	border-bottom: 1px solid #ccc;
	margin-bottom: 10px;
}

/* Styling for the tabs */
.tab {
	padding: 10px 20px;
	cursor: pointer;
	border: 1px solid #ccc;
	border-bottom: none;
	background-color: #f1f1f1;
}

/* Styling for the active tab */
.tab-active {
	background-color: #ffffff;
	border-top: 2px solid #007bff;
	font-weight: bold;
}

/* Hide all content sections by default */
.tab-content {
	display: none;
}

/* Display the active content section */
.tab-content-active {
	display: block;
}

.cssclass1 {background-color:#ffff99;} 
.cssclass2 {background-color:lightcoral;}
.cssclass3 {background-color:lightcyan;}
.cssclass4 {background-color:lightgoldenrodyellow;}
.cssclass5 {background-color:lightgray;}
.cssclass6 {background-color:lightgreen;}
.cssclass7 {background-color:lightpink;}
.cssclass8 {background-color:lightsalmon;}
.cssclass9 {background-color:lightseagreen;}
.cssclass10 {background-color:lightskyblue;}
.cssclass11 {background-color:lightslategray;}
.cssclass12 {background-color:lightsteelblue;}

p.cssvalid,p.htmlvalid {float:left;margin-right:20px}

.maintable {}

.subtables {
	display: flex;
	flex-wrap: nowrap; /* Use wrap if you want the tables to wrap to the next line when the screen is too narrow */
	gap: 10px; /* Optional: Adds space between the tables */
}
.subtables > div {
	flex: 1; /* Equal width tables, remove or adjust based on your preference */
	margin-left:0px;
}
    
.footer {}

.iframe-container {
	width: 100%;
	height: 500px; /* Adjust as needed */
	border: none;
}

.parent-container {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.greyed-out {
  color: grey;
}

.subtables {
    display: flex;
    flex-wrap: wrap; /* Allows the items to wrap onto the next line */
    justify-content: space-between; /* Distributes space between the tables */
    margin: -10px; /* Negative margin to offset the table margins */
}

.table-container {
    display: flex;
    flex-wrap: wrap; /* Allowing wrapping of the tables */
    width: 100%; /* Makes the container full width */
    box-sizing: border-box; /* Adjust size calculations to include padding and borders */
}

.Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
    flex: 0 1 calc(25% - 20px); /* Each table will take 25% of the width minus margins */
    margin: 10px; /* Margin for spacing */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Ensure tables adapt on smaller screens */
@media (max-width: 1024px) {
    .Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
        flex: 0 1 calc(33% - 20px); /* 33% width for medium screens (3 columns)*/
    }
}

@media (max-width: 768px) {
    .Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
        flex: 0 1 calc(50% - 20px); /* 50% width for smaller screens (2 columns)*/
    }
}

@media (max-width: 480px) {
    .Incoming.email.recipients, .Junk.mail.counts, .Geoip.results, .Qpsmtpd.codes.league.table, .Viruses.found {
        flex: 0 1 100%; /* 100% width for mobile screens (1 column) */
    }
}