@charset "utf-8";

.portal {
	width:980px;
	height:100%;
	background-color: #FFFFFF;
	padding: 10px;
	color:#484848;
	font:normal 15px 'stolzlmedium', Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	position: relative;
	z-index:1;
}
.portal table {margin: 10px 0 10px; padding: 10px 0; border-collapse: collapse;}
.portal a { color:#336699; text-decoration:none;font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.portal a:hover {text-decoration:underline;font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.portal h3 {  font-size:14px; font-weight: normal; padding:0; margin:0 0 15px;font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
.portal h3 .value { color:#ffffff;font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.portal h3.resellerName { float:right; width: 350px; text-align: right; padding:7px 0 0 0; font-size:18px; color:#ffffff; font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.portal h2 {font-size:18px; font-weight: normal; padding:0; margin:0 0 10px; color:#000;font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.portal h1 { font-weight:normal ; margin: 0 0 5px; font-size:20px;font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
.portal textarea {resize: none;font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;} 
.portal img{border:none}

.portal p {
	padding:10px 0px;
	margin:0;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
/* Input Fields */

#fromAddress, #subject, #toAddress, #accountName, #mailboxLicenses, #contactName, #email, #companyName, #address, #postcode, #telephone, #fax, #website, #customerUserSelect, #endUserSelect, #newPassword, #passwordConfirm, #oldPassword, #quota, #estimate, #frequency, #retention {padding:3px 10px 5px 5px; margin:0 0 0 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#userTypeSelect {padding:3px 10px 5px 5px; margin:0 5px 0 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#resellerUserSelect {padding:3px 10px 5px 5px; margin:0 5px 0 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#spamSubjectText, #scannedSubjectText, #textSigInbound, #textSigOutbound, #htmlSigInbound, #htmlSigOutbound  {padding:3px 10px 5px 5px; margin:10px 0 10px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8; margin: 0px;}
#inboundHost1, #inboundHost2, #inboundHost3, #inboundHost4, #inboundHost5 {padding:3px 10px 5px 5px; margin:10px 0 10px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#outboundHost1, #outboundHost2, #outboundHost3, #outboundHost4, #outboundHost5 {padding:3px 10px 5px 5px; margin:10px 0 10px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8; margin: 0px;}

#username, #password {font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size:18px;<!--border:solid 1px #b8b8b8;-->}
#searchTypeSelect, #paidSelect {padding:2px 5px 4px 5px; margin: 0 5px 20px 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#reportSelect, #filterSelect, #filterDirection, #groupSelect, #aliasSelect {padding:2px 5px 4px 5px; margin: 0 5px 0 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#domainSelect {padding:2px 5px 4px 5px; margin: 0 5px 0 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8; vertical-align: text-top;}
#domAliasSelect {padding:2px 5px 4px 5px; margin: 5px 5px 0 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}

#customerSelect {padding:3px 5px 5px 5px; margin: 7px 5px 10px 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#invoiceNumber {padding:3px 5px 5px 5px; margin: 0 5px 0 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#spamAction, #highSpamAction {padding:2px 5px 4px 5px; margin: 0 5px 12px 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#spamScore {border: solid 1px #b8b8b8;}
#resellerSelect {padding:3px 5px 5px 5px; margin: 7px 5px 10px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}

#addDomainName, #domainList {padding:3px 5px 5px 5px; margin: 10px 5px 10px 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#searchString {padding:3px 0 5px 5px; margin: 0 0 20px 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#addAccount, #addProduct, #saveUserSettings, #deleteUser, #addCustomer, #addUser, #next, #addDomain {margin: 20px 0 20px 0; font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border: 1px solid #211650; background: #211650; font-weight: normal; color: #ffffff; font-size:18px;}
#dateFromSelect, #dateToSelect {width:82px; padding:4px 15px 6px 5px; margin: 6px 5px 0 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#jobDate {width:82px; padding:4px 15px 6px 5px; margin: 10px 15px 10px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
#filterTriggers {width:234px; padding:3px 5px 5px 5px; margin: 0 5px 5px 0; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
/* #settingsSelector {height:auto; position: relative; top:13px; margin:0 0 2px 0; z-index:12; display: flex; } */
#settingsSelector {height:auto; position: relative; top:13px; margin:0 0 2px 0; z-index:12; } 
#settingsHolder {position: relative; z-index:11;}
#tabs-settings {margin-top:10px;}
#saveSettings {margin:0 0 10px 5px;}
button.jqTransformButton {margin:0 0 0 110px;padding: 0px;border: solid 1px #211650;background-color: #211650;cursor: pointer;overflow: visible;font:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}

<!--.ap_acc_set {padding:0 0 0 5px; margin:0}-->
.ap_account {width: 246px; padding:2px 5px 5px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}
.ap_account ap_statusError {width: 246px; padding:2px 5px 5px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:none;}
.ap_statusError {width: 246px; padding:2px 5px 5px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.ap_backupset {width: 245px; padding:2px 5px 5px 5px; font:normal 16px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border:solid 1px #b8b8b8;}

.showFilters, .removeFilter {border:solid 1px #ccc; border-radius: 4px;}


.portal .pageTitle {float:left; width:980px; margin:0; }

.portal .infoTip{background: url(../images/information.gif) no-repeat scroll right center transparent; padding-right: 15px;}
.portal p.formHolder {margin-bottom: 20px;}

.portal form.login{margin: 20px 0 0;
}

.portal .filterSearch {	padding:0 0 10px 0; font:normal 14px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
/*.portal .filterSearch label {float:left; padding-top: 4px; padding-right: 0px;}*/
.portal .filterSearch #removeFilterSide{padding: 4px 0 0 0;}
.portal .filterSearch input { color:#ffffff; padding:0; margin:0; border:1px solid #848484;;  color:#000; /*color:#acacac;padding:3px 0px; height:15px; width:192px; font-size: 12px*/}
/*.portal #removeFilterUnder{clear:right; float:right; margin: 5px 29px 0 0}*/

.portal .subSection{float:left; width:950px; padding:10px 0; }
.portal .account_details{float:left; width:980px; margin:0;}
.portal .customer_details{margin:0; min-height:1000px; padding: 10px 0 0 0;}
.portal .surf_details{margin:0; min-height:1300px; padding: 0;}
.portal .ms_details{position:relative; margin:0; min-height:800px; padding: 10px 0 0 0; z-index:-2;}
.portal .key{width:650px; <!--border:1px  solid #AEC4E4; background-color:#F9FAFB;--> padding:5px 0 5px 6px; margin-bottom: 17px}
.portal .key h3{float:left; margin: 0 30px 0 0; font-weight:bold; font-size: 14px}
.portal .key span{font:normal 15px Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; vertical-align: middle;}
.portal .key .statusHeading{padding: 0px 10px 4px 17px;}
.portal .key .key_error{padding: 2px 10px 4px 17px; background: url(../images/key_error.gif) left no-repeat;}
.portal .key .key_warning{padding: 2px 10px 4px 17px; background: url(../images/key_warning.gif) left no-repeat;}
.portal .key .key_ok{padding: 2px 10px 4px 17px; background: url(../images/key_ok.gif) left no-repeat;}

.portal .statusOK {color:#008B00; margin:0 0 5px 0; padding: 0 0; background:none; border:none;}
.portal .statusWarning {color:#e8a514; margin:0 0 5px 0; background:none; border:none;}
.portal .statusError {color:#FF0000; margin:0 0 5px 0; background:none; border:none;}

.portal *, .portal * focus {
	margin: 0;
	padding: 0;
}

.portal ul{/*padding-left:20px;*/padding-bottom:10px}

.portal .slideContainer {
	<--width: 250px;-->
	width: 980px;
}

.portal .slideContainer *{
  clear: left;
}

.portal .slideContainer h1{
	margin: 0;
}

.portal h1.next {
  padding-top: 20px;
}

.portal h2.trigger {
	padding: 0 0 0 30px;
	margin: 0 0 5px 0;
	background: url(../images/h2_trigger_a.gif) no-repeat;
	height: 28px;
	line-height: 28px;
	width: 218px;
	font-size: 1.1em;
	float: left;
	overflow: hidden;
}
.portal h2.trigger a {
  outline: none;
	text-decoration: none;
	display: block;
	font-size: 14px;
	font-weight: normal;
	width: 212px;
}
/*h2.trigger a:hover { color: #ccc; }*/
.portal h2.active {background-position: left bottom;} /*--When toggle is triggered, it will shift the image to the bottom to show its "opened" state--*/

.portal .toggle_container {
	margin: 0;
	padding: 0 0 0 0;
	/*border: 1px solid #AEC4E4;
	background-color: #F9FAFB;*/
	/*background: #f0f0f0 url(../images/toggle_block_stretch.gif) repeat-y left top;*/
	overflow: hidden;
	font-size: 1em;
	width: 975px;
	clear: both;
	display: none;
}
.portal .toggle_container .block {
	padding: 0 10px 0 0; /*--Padding of Container--*/
	/*background: url(../images/toggle_block_btm.gif) no-repeat left bottom; /*--Bottom rounded corners--*/
}

.portal .toggle_container .block h3{font-weight:bold; font-size:12px; padding:0;margin:0;}

.portal .toggle_container .block h4{font-weight:normal; font-size:15px; padding-left:6px; margin:0;}

.block h4 a {border-radius:4px; margin-bottom: 10px; padding:5px 10px 6px 10px; font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; border: 1px solid #211650; background: #211650; font-weight: normal; color: #ffffff; font-size:15px;}


.portal .infoHolder{
	margin: 40px 0 5px; /**margin: 40px 0 5px;**/
	padding: 0;
	<!--border: 1px solid #AEC4E4;-->
	background-color: #F9FAFB;
	position:absolute;
	width: 980px;
	right: 10px;
	top: 185px;
	min-height: 250px;
	max-height: 1700px;
  display: none;
  z-index: 1;
}
.portal .infoHolderODB{
	margin: 0 0 5px; /**margin: 40px 0 5px;**/
	padding: 0;
	<!--border: 1px solid #AEC4E4;-->
	background-color: #F9FAFB;
	position:absolute;
	width: 980px;
	right: 10px;
	top: 85px;
	min-height: 250px;
	max-height: 1700px;
  display: none;
  z-index: 1;
}

.portal .infoHolder1{
	margin: 0 0 5px;
	padding: 0;
	<!--border: 1px solid #AEC4E4;-->
	background-color: #F9FAFB;
	position:absolute;
	width: 975px;
	right: 10px;
	top: 700px;
	<!--min-height: 250px;-->
  display: none;
  z-index: 1;
}

.portal #infoLoader {position:absolute;}
.portal #pageLoader {position:absolute;display:none;z-index:1}

.portal .infoPanel{width:980px;position: absolute; top:0px;padding:0;}

.portal .infoPanel p{color: black}

.portal .infoPanel h1{text-align: center; font-size: 1.2em; padding-top: 0; color: black;}

.portal .infoPanel h2{font-size: 1em; font-weight: normal; padding:5px 0; color: black;}

.portal .infoPanel table, .portal .infoPanel2 table{width: 100%; background-color: #FFFFFF; border-collapse: collapse; table-layout: fixed;text-align: center;}

.portal .infoPanel table a.loadErrors {text-decoration: underline}
.portal a.loadPanel {text-decoration: underline}

.portal .infoPanel table th, .portal .infoPanel2 table th{border: 1px solid #d6d6d6; padding:5px 0}
.portal .infoPanel table td, .portal .infoPanel2 table td{border: 1px solid #d6d6d6; padding:5px 0}

//MC alter width
.portal .infoPanel table *, .portal .infoPanel table *{text-align: center;}

.portal #infoPanel2Loader {position:absolute;}

.portal .infoHolder2{position:absolute; width:682px; min-height:200px; border:1px solid #aec4e4; background-color:#f6f6fb; top:122px; right:10px; display:none; z-index: 1;}

.portal .infoPanel2{padding: 10px; /*width:610px;*/ overflow:hidden}

.portal .infoPanel2 h1{text-align: center; font-size: 1.2em; padding: 0; color: black;}

.portal .infoPanel2 h2{font-size: 1em; padding:5px 0; margin:0;}

.portal .validationErrors{color:#000}
.portal .validationErrors li{color:#000}

.portal .moveItems{width:70px;margin: 0 5px}
.portal table.standard {border-collapse: collapse; table-layout:auto; margin: 10px 0; padding: 10px 0}
.portal table.standard * {text-align: left}
.portal table.standard tbody {margin:0; padding:0}
.portal table.standard td{padding: 3px 3px 3px 10px; border:none}
.portal table.standard label {padding-right: 20px}
.portal table.standard tr.formSection > td {padding-top: 10px}

.portal table.standard1 {border-collapse: collapse; table-layout:auto; margin: 10px 0; padding: 10px 0}
.portal table.standard1 tbody {margin:0; padding:0}
.portal table.standard1 td{padding: 3px 3px 3px 0; border:none}
.portal table.standard1 label {padding-right: 20px}
.portal table.standard1 tr.formSection > td {padding-top: 10px}

.portal table input.narrow{width:30px}

/MC changes for report scrolling
.reportOptions {height: 900px}
#reportResults {height: 900px}
.portal table.adminList {display: block;width: 100%;height: 290px; overflow-y: auto; position: sticky; top: 0; background-color: #FFFFFF; border-collapse: collapse; table-layout:auto}

//MC alter table
.portal table.adminList thead{text-align: left; width: 100%;}
.portal table.adminList tbody{text-align: left; width: 100%;}

.portal table.adminList th{/**border: 1px solid #d6d6d6;**/ padding:5px 5px; color:#000; text-decoration:underline}
.portal table.adminList td{/**border: 1px solid #d6d6d6;**/ padding:5px 5px}

/MC edit table width
.portal table.adminList *{text-align: left;}
.portal table.adminList th.paidFor{width:150px}
.portal table.adminList th.userType{width:60px}
.portal table.adminList th.edit{width:25px}
.portal table.adminList th.delete{width:40px}

.portal table.adminList tr.flagged{background-color:#ffe4e1}
.portal table.adminList tr.flaggedWarning{background-color:#fff68f}

.portal table.newsTable * {vertical-align:top; text-align: left}
.portal table.newsTable button.appendNewsMsg {margin:0}

.portal table.scrollTable{
  margin:0;
}

/*Sortable table*/
table.sortableTable{
  width: auto;
}

table.sortableTable thead tr .header {
	background-image: url(../images/table_noSort.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
	padding-right: 16px;
}
table.sortableTable thead tr .headerSortUp {
	background-image: url(../images/table_asc.gif);
}
table.sortableTable thead tr .headerSortDown {
	background-image: url(../images/table_desc.gif);
}

.portal #logsTable {clear: both}

.portal .blank{min-height:300px;}

.portal .filterRow {height:25px;}
.portal .dateInput{width: 70px;}
.portal div.dateFilterRow { float:left; padding:4px 0px 10px 5px; width: 400px;}
.portal div.dateFilterRow input { float:left; padding:0; margin: 0 5px; }
.portal div.dateFilterRow label { float:left; }
.portal .urlInput{width: 400px;}
.portal .urlList{width: 403px; }
.portal .IPPart{width: 25px;}
.portal .membersList{width: 456px;}
.portal .usersList{width: 250px;}
.portal #otherUsersList{margin-top: 50px}
.portal .userInput{width: 197px;}
.portal .wideInput{width: 350px;}
.portal input[type="radio"]{margin-right: 5px;}
.portal #invalidAliases{margin-top: 72px}

/*.portal .categoryHolder{height:200px}*/
.portal .categoryCheck{width: 150px; }
/*.portal button.lineup{width:70px; text-align:center;}*/
.portal button, .portal input[type='submit'], .portal input[type='button']{font-size: 0.8em}
.portal .orderVal{display: none}

#disableMail, #disableMailsafe {padding: 0 3px 1px 0; border: solid 1px #fd0404;background-color: #fd0404;border-radius:4px;cursor: pointer;overflow: visible;font:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;color:#ffffff;font-size:14px;}


.portal div#groupUsers1{width:255px; float:left}
.portal div#groupUsers2{width:85px; float:left;}
.portal div#groupUsers3{width:255px; float:left}

.portal #selectable .ui-selecting { background: #FECA40; }
.portal #selectable .ui-unselecting { background: #EEEEEE; }
.portal .ui-selected { background: #F39814; }

.portal table.timetable{border: 2px solid #333;}
.portal table.timetable th{border:2px solid #333}
.portal table.timetable td{width:50px; height: 6px; border:1px solid #ccc;border-left: 2px solid #333;border-right: 2px solid #333; padding:0}
.portal table.timetable th.timeTitle{font-size:12px; border:2px solid #333; width:40px; text-align:right; padding:0 2px 10px}
.portal table.timetable tr.hourStart{border-top: 2px solid #333}

.portal #selectControls {padding: 0 0 0 470px; }
.portal .timesKey{width: 10px; height: 10px; border: 1px solid; float:right; margin-top:2px}

.portal #reportBuilder {margin:10px 10px 10px 0;}
.portal .reportBuilderRow {padding: 10px 0 5px}
.portal .reportFirstCol {width: 60px; display: block; float:left; padding-top:12px}

.portal .mailFilterHolder{margin:10px 0 30px;}
/*.portal #quarantineParent .mailFilters{height:75px; display:none}
.portal #allParent .mailFilters{height:105px; display:none}*/ 
.portal .mailFilters {padding: 10px 0 20px; height:75px; display:none}
.portal .mailFilterRow {padding: 10px 0 0;}
.portal .mailFilterFirstCol {width: 85px; display: block; float:left; padding-top:2px}
/*.portal .mailFilters{display:none}*/
 
 /*.portal .reportOptions {margin-bottom:10px}*/
.portal .reportOptions a {padding: 0 3px}

.portal table.emailList *{text-align: left; vertical-align: text-top}
.portal table.emailList th{border: none}
.portal table.emailList td{border: none}
.portal table.emailList th.emailDate{width: 50px;}
.portal table.emailList th.emailTime{width: 50px;}
.portal table.emailList th.emailFrom{width: 160px;}
.portal table.emailList th.emailSubject{width: 195px;}
.portal table.emailList th.emailSpamScore{width: 30px;}
.portal table.emailList th.emailStatus{width: 30px;}
.portal table.emailList a{text-decoration:underline}
.portal table.emailList tbody{font-size:14px; font-family:'stolzlmedium',Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
.portal #pagedTable{min-height: 300px;}
.portal .highlighted{color: #CC3366}

.portal table.invoiceTable {table-layout:auto; width: 100%;}
.portal table.invoiceTable *{text-align: left}
.portal .invoiceListHolder .tablePager{text-align: center}

.portal #backupLicenseTable{text-align: left}

.statusWhitelisted {color: #339900}
.statusBlacklisted {color: #000000}
.statusVirus {color: #cc3300}
.statusHighSpam {color: #6600cc}
.statusLowSpam {color: #3399cc}
.statusDangerous {color: #ff9900}
.statusClean {color: #339900}

.dialog h1 { font-weight:normal ; margin: 0 0 15px; font-size:20px; }
.dialog table.adminList {width: 100%; background-color: #FFFFFF; border-collapse: collapse; table-layout:auto}

.dialog table.adminList th{border: 1px solid #d6d6d6; padding:5px 5px; color:#000}
.dialog table.adminList td{border: 1px solid #d6d6d6; padding:5px 5px}
.dialog .dateInput{width: 75px; padding:0;}
.dialog .filterRow {padding: 0 0 5px}
.dialog .filterRow .hitListFilterFirst {width: 50px; display: block; float:left; }
.timeInput{width: 18px; }

.tablePager {margin: 20px 0; display: block; height: 20px}
.clientPager .first:hover, .clientPager .prev:hover, .clientPager .next:hover, .clientPager .last:hover {text-decoration: underline}
.clientPager .pagedisplay {font-weight:bold}
.portal tr.oddRow{background-color:#F5F5F5}

/* Styling for backup reports */
.backupReport{
	width:650px;
	background-color: #FFFFFF;
	margin-top: 5px;
	padding: 0;
	color:#000;
	font:normal 9pt Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
	position: relative;
}
.backupReport td{ vertical-align:top}
.backupReport h2 {font: bold 22pt Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.backupReport .reportSummary, .backupReport .reportSummary td, .reportList{border: 2px solid #999999;}
.backupReport .reportSummary td, .backupReport .reportList td, .backupReport .reportList th{padding: 1px 3px}
.backupReport .tableTitle {color: #FFF; font-weight:bold; background-color: #999999}
.backupReport .profileTitle{color: #555555; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 8pt;}
.backupReport .profileContent{color: #0033CC; font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size: 9pt;}
.backupReport .reportList{width: 650px}
.backupReport .reportList .headings{color:#008000; font-weight:bold; background-color:#D8D8D8}
.backupReport .reportList th, .backupReport .reportList td{border: 1px solid #FFF}
.backupReport .reportList tr.even{background-color:#EEEECC}
.backupReport .noDataMessage{text-align:center}
.backupReport .statusOK {color:#000; }
.backupReport .statusError {color:#F00; }
.backupReport .statusWarning {color:#FF8C00; }

.backupReport .reportKey{width:650px; border: 1px solid #000; background-color:#F0F0F0; padding: 2px 1px}
.backupReport .reportKey .keyHeading{font-weight:bold; text-decoration:underline}
.backupReport .reportKey .keyLine{padding-left:10px}
.backupReport .reportKey .keyItem{width:100px; color:#F00}
.backupReport .reportKey .keyTable{padding:0; margin:0}
/* End of styling for backup reports */

/* === Modern font override (keeps layout intact) === */
:root{
  --portal-font: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

.portal,
.portal *{
  font-family: var(--portal-font) !important;
}

/* Optional: slightly nicer defaults */
.portal{
  font-size: 14px;
  line-height: 1.45;
}

.portal h1, .portal h2, .portal h3, .portal h4{
  font-weight: 500;
}

/* --- Align the cascading settings dropdowns --- */
#settingsSelector{
  display: flex;
  align-items: center;     /* vertical alignment */
  gap: 10px;               /* spacing between controls */
  flex-wrap: wrap;         /* optional: wraps nicely on small screens */
}

/* make the selects consistent */
#settingsSelector select{
  height: 34px;
  line-height: 34px;
  padding: 4px 10px;
  margin: 0;               /* kill any legacy margins */
  vertical-align: middle;  /* harmless now but ok */
  box-sizing: border-box;
}

/* align the go image button with the selects */
#settingsSelector #settingsSubmit{
  margin: 0;
  display: block;      /* removes baseline weirdness */
  align-self: center;  /* flex alignment */
  height: auto;
  width: auto;
}

/* Modernise form fields */
.portal input[type="text"],
.portal input[type="email"],
.portal input[type="password"],
.portal input[type="number"],
.portal select,
.portal textarea {
  border-radius: 6px;      /* controls curve */
  border: 1px solid #d1d5db;
  padding: 6px 10px;
  font-size: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

/* Nice focus state */
.portal input:focus,
.portal select:focus,
.portal textarea:focus {
  outline: none;
  border-color: #211650;
  box-shadow: 0 0 0 3px rgba(33,22,80,0.15);
}

/* --- Stop pagedTable sitting underneath filter rows --- */


/* If overflow:auto causes any weird scrollbars, use this instead: */
.mailFilterHolder::after,
.mailFilters::after{
  content:"";
  display:block;
  clear:both;
}


/* 2) Force the buttons/table block to start below filters */
.pagedTable{
  clear: both !important;
  margin-top: 12px;     /* breathing room */
}

/* 3) Keep the button row from floating strangely */
.pagedTable .listButtons,
.pagedTable .tablePager{
  clear: both;
}

.mailFilters input.dateInput{
  width: 110px !important;  /* dd/mm/yyyy */
}

a.removeFilter,
a.removeFilter:visited{
  background: #AB19F5 !important;
  color: #fff !important;
  display: inline-block;
  padding: 5px 10px 6px;
  margin: 0 0 5px;
  border-radius: 6px;      /* optional: nicer button feel */
  text-decoration: none;
}

a.removeFilter:hover{
  filter: brightness(0.95); /* subtle hover */
  text-decoration: none;
}

.portal a.showFilters,
.portal a.showFilters:visited {
  background: #AB19F5;
  color: #fff !important;   /* force override */
  display: inline-block;
  padding: 6px 12px;
  margin: 0 0 20px 0;
  border-radius: 6px;
  text-decoration: none;
}

.portal a.showFilters:hover {
  filter: brightness(0.95);
  color: #fff !important;
  text-decoration: none;
}

/* Force date inputs to the correct size everywhere */
input.dateInput,
input.hasDatepicker,
.portal input.dateInput,
.portal input.hasDatepicker,
#dateFromSelect,
#dateToSelect,
#dateFromSelectQuarantine,
#dateToSelectQuarantine {
  width: 130px !important;     /* bump to 150px if you want */
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 10px !important;
  box-sizing: border-box !important;
  border-radius: 6px;
}

/* --- Improve jQuery UI dialogs --- */
.ui-dialog {
  border-radius: 10px;
}

.ui-dialog-titlebar {
  background: #211650;
  color: #fff;
  border: none;
}

#dialog-release {
  overflow: visible !important;
}

.ui-dialog:has(#dialog-release) {
  width: 420px !important;
}

/* Zebra striping */
table.standard2026 tbody tr:nth-child(odd) {
  background-color: #ffffff;
}

table.standard2026 tbody tr:nth-child(even) {
  background-color: #F9FAFB;  
}

table.standard2026 tbody tr:hover {
  background-color: #ECECF3;
}

/* Base table reset */
table.emailList {
  width: 100%;
  border-collapse: collapse;
}

/* Header cleanup */
table.emailList thead tr {
  background-color: #211650; /* keep your brand purple */
  color: #ffffff;
}

table.emailList thead th {
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
}

/* Body cells */
table.emailList tbody td {
  padding: 12px;
  vertical-align: middle;
  border-bottom: 1px solid #ECECF3;
}

/* Zebra striping (overrides bgcolor) */
table.emailList tbody tr:nth-child(odd) {
  background-color: #ffffff !important;
}

table.emailList tbody tr:nth-child(even) {
  background-color: #F9FAFB !important;
}

/* Hover effect */
table.emailList tbody tr:hover {
  background-color: #ECECF3 !important;
  transition: background-color 0.15s ease;
}

/* ===== Modern email list table ===== */

.emailListWrap {
  border: 1px solid #E6E6EF;
  border-radius: 12px;
  overflow: hidden;                /* clips header corners */
  background: #fff;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}

/* If you can't add .emailListWrap, this still improves the table */
table.emailList {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
}

/* Header */
table.emailList thead tr {
  background: #211650;
  color: #fff;
}

table.emailList thead th {
  padding: 12px 14px;
  font-weight: 600;
  text-align: left;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}

table.emailList thead th:first-child {
  width: 40px;
  text-align: center;
}

/* Body cells */
table.emailList tbody td {
  padding: 14px;
  vertical-align: top;
  border-bottom: 1px solid #ECECF3;
  font-size: 14px;
  line-height: 1.25rem;
}

/* Checkbox column */
table.emailList tbody td:first-child {
  width: 40px;
  text-align: center;
  vertical-align: middle;
}

/* Zebra (override legacy bgcolor) */
table.emailList tbody tr:nth-child(odd)  { background: #fff !important; }
table.emailList tbody tr:nth-child(even) { background: #F9FAFB !important; }

/* Hover */
table.emailList tbody tr {
  transition: background-color .15s ease, transform .08s ease;
}

table.emailList tbody tr:hover {
  background: #ECECF3 !important;
}

/* Links (override inline color where possible) */
table.emailList a {
  color: #2563EB;
  text-decoration: none;
  font-weight: 600;
}

table.emailList a:hover {
  text-decoration: underline;
}

/* Make From/To look cleaner */
table.emailList td .fromLine,
table.emailList td .toLine {
  display: block;
  color: #334155;
  font-weight: 500;
}

/* If your HTML is just <div>F:..</div><div>T:..</div>, style them: */
table.emailList td:nth-child(3) div {
  color: #334155;
  font-weight: 500;
}

/* Date cell: make time strong and date muted */
table.emailList td:nth-child(2) {
  white-space: nowrap;
}

table.emailList td:nth-child(2) br + * {
  color: #64748B;
  font-weight: 500;
}

/* Status badges */
table.emailList td.emailStatus,
table.emailList tbody td:last-child {
  white-space: nowrap;
  text-align: right;
  padding-right: 16px;
  vertical-align: middle;
  font-weight: 700;
}

/* Badge look applied to the text inside the status cell */
table.emailList tbody td:last-child {
  position: relative;
}

table.emailList tbody td:last-child::before {
  content: attr(data-status); /* fallback if you later add data-status */
}

/* If you don't add data-status, we'll style the existing text */
table.emailList tbody td:last-child {
  display: table-cell;
}

table.emailList tbody td:last-child {
  font-weight: 700;
}

/* Badge styling based on common status text */
table.emailList tbody td:last-child {
  /* default badge */
}

table.emailList tbody td:last-child {
  /* turn the text into a badge */
}

table.emailList tbody td:last-child {
  /* make the cell content look like a pill */
}

table.emailList tbody td:last-child {
  /* Use padding + background on the text itself by wrapping, but since we can't,
     we style the cell and align it. */
}

table.emailList tbody td:last-child {
  /* visual badge */
  background: transparent;
}

table.emailList tbody td:last-child {
  /* create pill using inline-block-ish approach */
}

table.emailList tbody td:last-child {
  /* We'll style via a span if you can add it; otherwise see the "No HTML changes" approach below */
}

/* ===== No-HTML-change badge approach (works if the cell only contains short text like Qtn/Rel) ===== */
table.emailList tbody td:last-child {
  padding-top: 10px;
  padding-bottom: 10px;
}

table.emailList tbody td:last-child {
  /* make text look like a pill by using background on the cell and rounding */
  border-radius: 999px;
}

table.emailList tbody td:last-child {
  /* keep it from filling the whole column by using background gradient trick? not reliable.
     Better: add a span. See next section. */
}

/* Subject: keep one line with ellipsis */
table.emailList td:nth-child(4) a {
  display: inline-block;
  max-width: 520px;     /* adjust */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}

/* From/To lines ellipsis */
table.emailList td:nth-child(3) div {
  max-width: 380px;     /* adjust */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

table.emailList td:nth-child(4) a {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;          /* max 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

table.emailList td:nth-child(3) div {
  font-size: 13px;
  font-weight: 400;
}

/* Only the 2nd column (date/time) */
table.emailList td:nth-child(2) {
  width: 110px;          /* tweak 95–120 */
  white-space: nowrap;
  vertical-align: top;
}

table.emailList td:nth-child(2) .emailDateTime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* your existing styles */
table.emailList .emailDate {
  font-size: 13px;
  line-height: 1.1;
  color: #6b7280;
}

table.emailList .emailTime {
  font-size: 11px;
  line-height: 1.5;
  color: #6b7280;
}


/* Status column alignment */
table.emailList td.emailStatus,
table.emailList th.emailStatus {
  text-align: right;
  padding-right: 16px;
  white-space: nowrap;
}

/* Base pill */
.statusPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.08);

  /* uses your existing hex colour */
  color: var(--statusColor, #4f46e5);
  background: color-mix(in srgb, var(--statusColor, #4f46e5) 12%, white);
}

/* Optional: make Qtn / Rel / Dlt feel slightly different even if statusColor is same */
.status-qtn { font-weight: 600; }
.status-rel { }
.status-dlt { }
.status-b   { }   /* bounced */
.status-d   { }   /* delivered */
.status-fwd { }   /* forwarded */
.status-q   { }   /* queued */
.status-u   { opacity: 0.8; } /* unknown */

.filterButton{
  background: #211650;
  color: #ffffff;
  border: none;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-left: 10px;
}

.filterButton:hover{
  background: #341f85;
}

.filterButton:active{
  transform: translateY(1px);
}

.filterButton{
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Row layout for the three columns */
.aliasGroups{
  display: flex;
  align-items: flex-start;     /* tops aligned */
  gap: 18px;
}

/* Left + right columns */
#groupUsers1, #groupUsers3{
  flex: 0 0 auto;
}

/* Middle arrows column */
#groupUsers2{
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;     /* center arrows between lists */
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make both lists start at same top position */
#assignedAliases, #unassignedAliases{
  margin-top: 0 !important;
}

/* Remove the old hack that pushes the right list down */
#unassignedAliases{
  margin-top: 0 !important;
}

.aliasHeading{
  margin-bottom: 0;
  text-align: center;
}

/* ================================
   Assigned / Unassigned Aliases UI
   ================================ */

/* 1) Wrap all three groups in a flex row */
.aliasGroups{
  display: flex;
  align-items: stretch;         /* IMPORTANT: makes middle column match list height */
  gap: 18px;
}

/* 2) Left + right columns */
#groupUsers1,
#groupUsers3{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;       /* heading + list stack */
}

/* Optional: keep headings consistent */
.aliasHeading{
  margin: 0 0 10px 0;
  text-align: center;
}

/* 3) Make the lists a predictable height (so arrows can centre reliably) */
.usersList{
  height: 280px;                /* adjust if you want taller/shorter */
  min-width: 320px;             /* optional - helps layout */
  box-sizing: border-box;
}

/* Remove any old per-element hacks */
#assignedAliases,
#unassignedAliases{
  margin-top: 0 !important;
}

/* 4) Middle arrows column */
#groupUsers2{
  flex: 0 0 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;      /* centre arrows vertically */
  align-items: center;          /* centre arrows horizontally */
  gap: 10px;

  /* Kill old inline padding hacks */
  margin: 0 !important;
  padding: 0 !important;
}

/* If jQuery UI injects button margins/padding weirdly */
#groupUsers2 .moveItems{
  margin: 0 !important;
}

/* --- Alias assignment layout (no overlap) --- */
.aliasGroups{
  display: flex;
  align-items: stretch;
  gap: 24px;                 /* give a real gap so arrows never touch */
}

/* Left + right columns should SHARE the available space */
#groupUsers1,
#groupUsers3{
  flex: 1 1 0;               /* IMPORTANT: both columns grow equally */
  min-width: 320px;          /* stop them collapsing too small */
  display: flex;
  flex-direction: column;
}

/* Middle arrows column: fixed width */
#groupUsers2{
  flex: 0 0 90px;            /* a tad wider than 80 helps */
  width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the multi-selects fill their column (prevents overflow into middle) */
#groupUsers1 .usersList,
#groupUsers3 .usersList,
#assignedAliases,
#unassignedAliases{
  width: 100% !important;    /* IMPORTANT */
  box-sizing: border-box;
}

/* Keep height consistent */
.usersList{
  height: 280px;
}

/* Optional: stop long aliases forcing weird widths */
#groupUsers1,
#groupUsers3{
  overflow: hidden;
}

/* --- Force equal-width alias columns --- */
.aliasGroups{
  display: flex;
  align-items: stretch;
  gap: 24px;
}

/* Left + Right: exactly the same flex basis */
#groupUsers1,
#groupUsers3{
  flex: 1 1 50%;
  min-width: 0;              /* IMPORTANT: allows flexbox to actually equalise */
  display: flex;
  flex-direction: column;
}

/* Middle arrows: fixed */
#groupUsers2{
  flex: 0 0 90px;
  width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill any legacy fixed widths on the selects */
#groupUsers1 select.usersList,
#groupUsers3 select.usersList,
#assignedAliases,
#unassignedAliases{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;   /* IMPORTANT */
  box-sizing: border-box;
}

/* Keep both lists same height */
#assignedAliases,
#unassignedAliases{
  height: 280px;
}

/* --- Alias picker: override legacy float/width rules --- */
.aliasGroups #groupUsers1,
.aliasGroups #groupUsers2,
.aliasGroups #groupUsers3{
  float: none !important;
  width: auto !important;
}

/* Force equal left/right widths */
.aliasGroups{
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.aliasGroups #groupUsers1,
.aliasGroups #groupUsers3{
  flex: 1 1 0;
  min-width: 0;              /* critical for long strings */
  display: flex;
  flex-direction: column;
}

.aliasGroups #groupUsers2{
  flex: 0 0 90px;
  width: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* Lists fill their column */
.aliasGroups select.usersList{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Make BOTH lists look identical */
.aliasGroups select.usersList{
  width: 100% !important;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.25;
  padding: 8px;
}

/* Try to keep options visually consistent */
.aliasGroups select.usersList option{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* works in some browsers, harmless in others */
}

.aliasGroups select.usersList{
  height: 320px;   /* tweak to taste */
}

.menu li,
.menu a{
  font-family: var(--portal-font) !important;
}

/* Meta card */
.msgMeta{
  margin: 12px 14px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.msgMetaRow{
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  padding: 4px 0;
  align-items: start;
}

.msgMetaRow .k{
  color: #6b7280;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.msgMetaRow .v{
  color: #111827;
  font-size: 13px;
  line-height: 1.35;
  word-break: break-word;
}

.msgMetaRow .muted{
  color:#6b7280;
  font-size: 12px;
}

/* Inline allow/block actions */
.msgMeta .metaActions{
  margin-left: 8px;
  font-size: 12px;
  color:#6b7280;
}
.msgMeta .metaActions a{
  color:#211650;
  text-decoration:none;
}
.msgMeta .metaActions a:hover{
  text-decoration:underline;
}

/* Toggles */
.msgMetaToggles{
  margin: 6px 14px 10px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

.metaToggle{
  font-size: 12px;
  color:#6b7280;
  text-decoration:none;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background:#fff;
}
.metaToggle:hover{
  color:#111827;
  border-color:#d1d5db;
}

/* Divider replaces inline HR */
hr.msgDivider{
  border: 0;
  height: 1px;
  background: #e5e7eb;
  margin: 10px 14px;
}

/* Loader image: remove inline alignment hack feel */
#msgHeaders .pageLoader{
  vertical-align: middle;
  opacity: 0.8;
}

/* Toggle row */
.msgMetaToggles{
  margin: 8px 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* The pill/button look */
.metaToggle{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
}
.metaToggle:hover{
  color: #111827;
  border-color: #d1d5db;
}

/* Optional: add a tiny icon marker without changing JS */
.metaToggle::before{
  content: "▸";
  font-size: 12px;
  opacity: 0.75;
}

/* Panel styling for the expandable sections */
.metaPanel{
  margin: 0 14px 10px;
  padding: 10px 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 12px;
  color: #111827;
}

/* Delivery report rows */
.metaRow{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(229,231,235,0.8);
}
.metaRow:last-child{
  border-bottom: 0;
}

.metaTime{ color:#6b7280; font-variant-numeric: tabular-nums; }
.metaRelay{ color:#111827; }
.metaStatus{ color:#111827; font-weight: 600; }
.metaSep{ color:#9ca3af; }

/* Divider */
hr.msgDivider{
  border: 0;
  height: 1px;
  background: #e5e7eb;
  margin: 10px 14px;
}

/* Loader */
#msgHeaders .pageLoader{
  vertical-align: middle;
  opacity: 0.85;
  margin-right: 8px;
}
#msgHeaders .metaLoading{
  color:#6b7280;
  font-size: 12px;
}

/* Shared section title */
.mailSectionTitle{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0 0 8px 0;
}

/* Attachments */
.mailAttachments{
  margin: 10px 14px 12px;
  padding: 12px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.attachmentList{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.attachmentItem{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
}

.attachmentItem:hover{
  border-color: #d1d5db;
  background: #f9fafb;
}

.attachmentIcon{
  opacity: 0.8;
}

.attachmentName{
  font-size: 13px;
  word-break: break-word;
}

/* Mail preview card + iframe */
.mailPreview{
  margin: 0 14px 14px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.mailFrame{
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

/* Notices */
.mailNotice{
  margin: 12px 14px 14px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}

.mailNoticeTitle{
  font-weight: 700;
  font-size: 13px;
  color: #111827;
  margin-bottom: 4px;
}

.mailNoticeText{
  font-size: 13px;
  color: #6b7280;
  line-height: 1.35;
}

/* Variants */
.mailNoticeWarning{
  border-color: #f59e0b33;
  background: #fffbeb;
}

.mailNoticeInfo{
  border-color: #93c5fd55;
  background: #eff6ff;
}

/* ===== Modern jQuery UI Tabs inside .infoPanel ===== */

.infoPanel .ui-tabs{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Tab bar */
.infoPanel .ui-tabs .ui-tabs-nav{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;  /* the horizontal line */
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* Individual tabs */
.infoPanel .ui-tabs .ui-tabs-nav li{
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-bottom: 0 !important;                  /* so it merges into content */
  margin: 0 6px 0 0 !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Link inside tabs */
.infoPanel .ui-tabs .ui-tabs-nav li a{
  display: block;
  padding: 10px 14px !important;
  font-size: 13px;
  font-weight: 600;
  color: #374151 !important;
  text-decoration: none !important;
}

/* Active tab sits on top of the horizontal line */
.infoPanel .ui-tabs .ui-tabs-nav li.ui-tabs-active,
.infoPanel .ui-tabs .ui-tabs-nav li.ui-tabs-selected{
  background: #211650 !important;
  border-color: #211650 !important;
  margin-bottom: -1px !important;               /* THIS is what aligns the line */
  position: relative;
  z-index: 2;
}

.infoPanel .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.infoPanel .ui-tabs .ui-tabs-nav li.ui-tabs-selected a{
  color: #fff !important;
}

/* Panels (content area) */
.infoPanel .ui-tabs .ui-tabs-panel{
  border: 1px solid #e5e7eb;
  border-top: 0;                                /* no line through the tabs */
  background: #fff;
  padding: 18px 18px 16px;
  border-radius: 0 0 10px 10px;
}

/* Remove legacy rounded corners applied by ui-corner-all */
.infoPanel .ui-corner-all,
.infoPanel .ui-corner-top,
.infoPanel .ui-corner-bottom{
  border-radius: 0 !important;
}

/* ===== Modern alert/dialog styling (jQuery UI) ===== */
.ui-dialog{
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 35px rgba(0,0,0,0.18) !important;
  background: #fff !important;
  overflow: hidden; /* makes header + corners look clean */
}

/* Title bar */
.ui-dialog .ui-dialog-titlebar{
  background: #211650 !important;
  border: 0 !important;
  color: #fff !important;
  padding: 10px 12px !important;
  border-radius: 0 !important;
}

/* Title text */
.ui-dialog .ui-dialog-title{
  font-size: 14px;
  font-weight: 600;
}

/* Close button */
.ui-dialog .ui-dialog-titlebar-close{
  border: 0 !important;
  background: transparent !important;
  border-radius: 8px !important;
  margin-top: 0 !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover{
  background: rgba(255,255,255,0.12) !important;
}

/* jQuery UI close icon -> white */
.ui-dialog .ui-dialog-titlebar-close .ui-icon{
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* Content */
.ui-dialog .ui-dialog-content{
  padding: 16px 16px 8px !important;
  color: #111827;
  font-size: 13px;
}

/* Message text */
#dialogAlertMessage{
  margin: 0;
  color: #111827;
}

/* Button pane */
.ui-dialog .ui-dialog-buttonpane{
  border: 0 !important;
  background: #fff !important;
  padding: 10px 12px 12px !important;
  margin: 0 !important;
}

/* Buttons */
.ui-dialog .ui-dialog-buttonpane button.ui-button{
  background: #211650 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-weight: 600;
  font-size: 13px;
}
.ui-dialog .ui-dialog-buttonpane button.ui-button:hover{
  filter: brightness(1.05);
}

/* ===== LOGIN (safe + simple) ===== */
.loginWrap{
  width: 435px;
}

.loginWrap form.login{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
}

.loginWrap form.login table.standard{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 14px;
  margin: 0;
}

.loginWrap form.login label{
  font-family: var(--portal-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

.loginWrap form.login input[type="text"],
.loginWrap form.login input[type="password"]{
  width: 100% !important;
  font-family: var(--portal-font) !important;
  font-size: 14px !important;
  padding: 10px 12px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  box-sizing: border-box;
  background: #fff !important;
}

/* Keep jqTransform from hiding inputs */
.loginWrap form.login input[type="text"],
.loginWrap form.login input[type="password"]{
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

.loginWrap form.login input[type="submit"].jqt{
  background: #211650 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 10px 18px !important;
  font-family: var(--portal-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer;
}

/* Forgot link: undo the inline padding-left:130px */
.loginWrap > p[style*="130px"]{
  padding: 10px 0 0 0 !important;
  text-align: center;
  margin: 8px 0 0 0;
}

.loginWrap > p[style*="130px"] a{
  font-family: var(--portal-font) !important;
  font-size: 13px !important;
  color: #6b7280 !important;
  text-decoration: none !important;
}

.loginWrap > p[style*="130px"] a:hover{
  color: #111827 !important;
  text-decoration: underline !important;
}

.loginWrap > p[style*="130px"] u{
  text-decoration: none !important;
}

/* ===== LOGIN: Force jqTransform input skin to match new style ===== */
.loginWrap form.login .jqTransformInputWrapper{
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  height: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.loginWrap form.login .jqTransformInputInner{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.loginWrap form.login .jqTransformInputInner div{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* The actual input inside jqTransform */
.loginWrap form.login input.jqTransformInput,
.loginWrap form.login input[type="text"],
.loginWrap form.login input[type="password"]{
  background: transparent !important;
  border: 0 !important;                 /* wrapper provides border */
  outline: none !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  font-family: var(--portal-font) !important;
  width: 100% !important;
  box-sizing: border-box;
}

/* Focus ring on the wrapper (so it looks modern) */
.loginWrap form.login .jqTransformInputWrapper:focus-within{
  border-color: #211650 !important;
  box-shadow: 0 0 0 3px rgba(33,22,80,0.15) !important;
}

/* Optional: reduce the “safari wrapper” weird sizing */
.loginWrap form.login .jqTransformSafari{
  width: 100% !important;
}

.loginWrap form.login table.standard td:last-child{
  width: 320px;
}

/* Login notices */
.loginNotice{
  margin: 0 0 14px 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  font-family: var(--portal-font) !important;
  font-size: 13px !important;
  line-height: 1.35;
}

.loginNoticeWarn{
  background: #fffbeb !important;
  border-color: rgba(245,158,11,0.25) !important;
  color: #92400e !important;
}

/* ===== Reports table modernisation ===== */
table.adminList.sortableTable{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
}

/* Header */
table.adminList.sortableTable thead th{
  background: #f8fafc;
  color: #111827;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 12px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  white-space: nowrap;
}

/* Body cells */
table.adminList.sortableTable tbody td{
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid #eef2f7;
  vertical-align: middle;
}

/* Zebra + hover */
table.adminList.sortableTable tbody tr:nth-child(even){
  background: #f9fafb;
}
table.adminList.sortableTable tbody tr:hover{
  background: #eef2ff;
}

/* Numeric alignment (all but the first column) */
table.adminList.sortableTable thead th:nth-child(n+2),
table.adminList.sortableTable tbody td:nth-child(n+2){
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Date column a bit tighter */
table.adminList.sortableTable tbody td:first-child{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Hide the sorter helper values but keep for scripts */
table.adminList.sortableTable .orderVal{
  display: none !important;
}

/* Optional: sticky header if the page scrolls a lot */
table.adminList.sortableTable thead th{
  position: sticky;
  top: 0;
  z-index: 2;
}

/* If a legacy wrapper is forcing an internal scrollbar, neutralise it */
.portal table.adminList.sortableTable{
  max-height: none;
}

/* Make the report section allow horizontal scrolling if needed */
.reportOptions{
  overflow-x: auto;     /* key bit */
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

/* Important: don't clip the table itself */
table.adminList.sortableTable{
  overflow: visible;    /* undo the clipping */
}

/* If you kept the rounded-corners look, apply it via a wrapper effect */
.reportOptions table.adminList.sortableTable{
  border-radius: 12px;
}

/* Ensure it can be wider than the container without breaking layout */
table.adminList.sortableTable{
  width: max-content;   /* allow natural width */
  min-width: 100%;      /* but still fill container when it fits */
}

/* Card-style wrapper for the table */
.reportOptions .reportTableCard{
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 0;
  overflow-x: auto;          /* scroll here */
  overflow-y: visible;
}

/* table inside card */
.reportOptions .reportTableCard table.adminList.sortableTable{
  border: 0;
  border-radius: 0;
  width: max-content;
  min-width: 100%;
}