html { height: 101%; }
html { width: 99%; }
body {
	background-color: white;
	font-family: Georgia;
	padding:0px;
	margin-left:0px;
	margin-right:0px;
	margin-top:10px;
	min-width: 880px;
	text-align:left;
}

.tabs-bg {
    height: 70px;
    width: 100%;
    position: absolute;
    top: -10px;
    background-color: #EEEEEE;
    border-bottom: #000 1px solid;
}

.tabs-bg + h3,
.tabs-bg + h4 {
    position: relative;
    z-index: 1;
}

#targetline{
	position: relative;
    padding-top: 200px; /* whatever distance from the top of the page you want */
}

h1 { font-size:18pt;text-shadow: 2px 2px #EBEBEB;font-family:Georgia;font-weight: bold}
h2 { font-size:6pt;font-family:Arial;font-weight: bold }
h3 { font-size:8pt;font-family:Arial;font-weight: bold }
h5 { font-size:11pt;font-family:Arial;font-weight: bold }
h6 { font-size:10pt;font-family:Arial;font-weight: bold }
h7 { font-size:11pt;font-family:Arial;font-weight: bold }
h4 { font-size:8pt;text-shadow: 2px 2px #EBEBEB;font-family:Arial;font-weight: bold;color: red}
h9 { font-size:14pt;text-shadow: 2px 2px #EBEBEB;font-family:Arial;font-weight: bold }

div.bgimage {
	position: absolute;
    top: 380px;
    left: 0;
	z-index: -1;
	background-image:url('images/wave.jpg');
	background-repeat: no-repeat;
	background-size: contain;
	width:100%;
	height: 615px
	
}

hr.style-95 {
    height: 20px;
	width: 95%;
    border-style: solid;
    border-color: #B9BEC3;
    border-width: 1px 0 0 0;
    border-radius: 25px;
	text-align:center; 
	margin: 0 auto;
}
hr.style-1300{
    height: 35px;
	width: 1300px;
    border-style: solid;
    border-color: silver;
    border-width: 1px 0 0 0;
    border-radius: 35px;
}

#header-bar {
    background-color:green;
    color:black;
    padding:0px;
	height: 1px;
	position: relative;
    top: 37px;
	border-width: 1px 0 0 0;
	float:center;
}

/* OLD TABS CSS BLOCKS
#tabs{
    padding-right:20px; // The right most tab will be padded 20px from its right
    margin:0px;
    float:left;     // For right aligned tabs
    padding-top:0px;
    border:1px;
    left: 49%;
    position: relative;

}

#selected-tab {
    background:#edcb27 url(images/selected_right_tab.gif) top right no-repeat;  
}

#tabs a{
    background:#B9BEC3 url(images/left_tab.gif) top left no-repeat; // Background image is positioned top, left
    color:#FFF;
    padding-left:5px;   // Change this padding according to the size of image slices used to create tab
    text-decoration:none;
}

#tabs a:hover{
    background:#edcb27 url(images/selected_left_tab.gif) top left no-repeat;
    color:#000;
    text-decoration:none;
}

#tabs a span{
    background:#759C9C url(images/right_tab.gif) top right no-repeat;   // Note the position of background image
    color:#FFF;
    padding-right:15px;
}

#tabs a:hover span{
    background:#edcb27 url(images/selected_right_tab.gif) top right no-repeat;
    color:#000;
}

#tabs li{
    list-style:none;
    float:left;
    padding-left:3px;
    position: relative;
    right: 54%;
}

#tabs b{
    background:#edcb27 url(images/selected_left_tab.gif) top left no-repeat;
    color:#FFF;
    padding-left:5px;   
    font-weight:normal;
}

#tabs b span{
    color:#000;
    padding-right:15px; 
}

#tabs span{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding:6px;
    cursor:pointer;
}

#tabs a,#tabs a span,#tabs b,#tabs b span{
    display:block;      // Set display to block, otherwise background images will not work
    float:left;
    min-width:70px;
}
END OLD TABS CSS BLOCKS */

/* NEW TABS CSS BLOCKS */
#tabs {
	padding-right:20px;	/* The right most tab will be padded 20px from its right */
	margin:0px;
	float:left;		/* For right aligned tabs */
	padding-top:0px;
	border:1px;
    left: 49%;
    position: relative;

}

.tab {
	background-color:#759C9C; /* Set background colour */
	border-radius: 4px 4px 0 0; /* Sets radius for top left and right corners, eliminating the need for background images */
	color:#FFF;
	height: 14px; /* Required height minus padding */
	padding:6px 8px;
	text-decoration:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}

#tabs a:hover{
	background-color:#3498db;
	color:#000;
	text-decoration:none;
}

#selected-tab {
	background-color:#edcb27; /* id added to the current page tab in tabs.php */
}

#tabs li{
	list-style:none;
	float:left;
	padding-left:3px;
    position: relative;
    right: 54%;
}

#tabs a {
	display:block;		/* Set display to block, otherwise background images will not work */
	min-width: 80px;
}
/* END NEW TABS CSS BLOCKS */

.changelog-page {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    background-color: white;
}

.changelog-page__main {
    padding: 0 16px 24px;
}

.changelog-page__content {
    max-width: 1200px;
}

.changelog-page__content div {
    margin: 0;
}

.changelog-page__content .cl-indent1 {
    padding-left: 2em;
}

.changelog-page__content .cl-indent2 {
    padding-left: 4em;
}

.changelog-page__content .cl-indent3 {
    padding-left: 6em;
}

/* Style The Dropdown Button ###################################################################################################################### */
.dropbtn {
    background-image: url(images/menu.png);
    color: white;
    width:20px;
	padding: 10px;
    font-size: 12px;
    border: none;
    cursor: pointer;
	float:left; 
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: absolute;
    display: inline-block;
	left: 8px;
	float:left;
	text-align:left;
	z-index: 1; /* Sit on top */
}

.menu-v-div {
	display:none;
	visibility:hidden;
	margin-top:28px;
}

/* Show the dropdown menu on hover */
.dropdown:hover .menu-v-div {
	display:block;
}

#menu-v li, #menu-v a {zoom:1;} /* Hacks for IE6, IE7 */
#menu-v, #menu-v ul {
    width: 220px; /* Main Menu Item widths */
    border: 1px solid #ccc;
    border-top:none;
    position: relative; font-size:0;
    list-style: none; margin: 0; padding: 0; display:block;
    z-index:9;
	box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);
}

/* Top level menu links style
---------------------------------------*/
#menu-v li
{
    background-color: #f9f9f9;
    list-style: none; margin: 0; padding: 0;
}
#menu-v li a
{
    font-size: 12px;
	font-family: Arial; 
    border-top: 1px solid #ccc;
    display: block;
    /*overflow: auto; force hasLayout in IE7 */
    color: DarkSlateGray;
    text-decoration: none;
	padding: 8px 20px 8px 8px; 
	
}
#menu-v ul li a
{
    
}
                
#menu-v li a.arrow:hover
{
    background-image:url(images/arrowon.gif);
    background-repeat: no-repeat;
    background-position: 97% 50%;
	background-color: #f1f1f1;
	
}
   


     
/*Sub level menu items
---------------------------------------*/
#menu-v li ul
{ 
	position: absolute;
    width: 280px; /*Sub Menu Items width */
    visibility:hidden;
	background-color: #f9f9f9;
	

}
        
#menu-v a.arrow
{
    background-image:url(images/arrow.gif);
    background-repeat: no-repeat;
    background-position: 97% 50%;
	
}
#menu-v li:hover, #menu-v li.onhover
{
    background-position:0 -62px;
	background-color: #f1f1f1 ! important;
}

#menu-v ul li
{
    background: rgba(255, 255, 255, 0.86);
	background-color: #f9f9f9;
	
}
#menu-v ul li:hover, #menu-v ul li.onhover
{
    background-color: #f1f1f1;
    background-image:none;
	
}

div.mnuedit {
	position: absolute;
    top: 56px;
    left: 3;

	width:220px;
	height: 80px;
	display:none;
	box-shadow: 0px 8px 10px 0px rgba(0,0,0,0.2);
}

div.mnueditcontent {
	position: absolute;
    top: 6px;
    left: 0;
	width:212px;
	height: 40px;
	background-color: #f1f1f1;
	font-size: 12px;
	font-family: Arial;
	padding: 4px 4px 4px 4px;
	text-align:left;
	color: DarkSlateGray;
	display: block;
}
/* The Modal (background) ##########################################################################################################*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
	max-width: 780px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: black;
    float: center;
    font-size: 24px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* The Save Button */
.save {
    color: black;
    float: center;
    font-size: 24px;
    font-weight: bold;
}

.save:hover,
.save:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}


.modal-header {
    padding: 8px 16px;

    color: black;
	font-size: 24px;
	font-weight: bold;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 8px 16px;
    background-color: #5cb85c;
    color: white;
}

/*Tooltips*/

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
input:not([type="checkbox"]):not([type="submit"]):not([type="file"]:not([type="radio"])) { 
	border:1px solid grey; 
	border-radius: 2px 2px 2px 2px;
	padding:2px 2px 3px 4px; 
	display: inline-block;
	box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
}

table {
	text-align:left;
}

select { 
	border:0; 
	color:dark grey; 
	background:transparent;
	font-size:12px; 
	font-weight:normal; 
	padding:2px 2px; 
	min-width:170px;
	
	-webkit-appearance: none;

}

#mainselectionlong { 
	overflow:hidden; width:750px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;
	border-radius: 2px 2px 2px 2px;
	border:1px solid grey;
	background: url("images/marrow.gif") no-repeat scroll 586px 0px white; 
	position:relative;
	top:6px;
	display: inline-block;
	box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
}

#mainselection { 
	overflow:hidden; width:150px;
	-moz-border-radius: 9px 9px 9px 9px;
	-webkit-border-radius: 9px 9px 9px 9px;
	border-radius: 2px 2px 2px 2px;
	border:1px solid grey;
	background: url("images/marrow.gif") no-repeat scroll 126px 0px white; 
	position:relative;
	top:6px;
	display: inline-block;
	box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
}	

input[name="submit"], [name="submitmain"], [name="butt"]{
	border : solid 1px #b3b3b3;
	border-radius : 3px;
	moz-border-radius : 3px;
	-webkit-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	-moz-box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	box-shadow : 0px 0px 2px rgba(0,0,0,1.0);
	font-size : 14px;
	color : #595959;
	padding : 3px 17px;
	background : #ffffff;
	background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(49%,#f1f1f1), color-stop(51%,#e1e1e1), color-stop(100%,#f6f6f6));
	background : -moz-linear-gradient(top, #ffffff 0%, #f1f1f1 49%, #e1e1e1 51%, #f6f6f6 100%);
	background : -webkit-linear-gradient(top, #ffffff 0%, #f1f1f1 49%, #e1e1e1 51%, #f6f6f6 100%);
	background : -o-linear-gradient(top, #ffffff 0%, #f1f1f1 49%, #e1e1e1 51%, #f6f6f6 100%);
	background : -ms-linear-gradient(top, #ffffff 0%, #f1f1f1 49%, #e1e1e1 51%, #f6f6f6 100%);
	background : linear-gradient(top, #ffffff 0%, #f1f1f1 49%, #e1e1e1 51%, #f6f6f6 100%);
	filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0 );

    cursor: pointer;
}


/* ── Login page ─────────────────────────────────────────────────────────────── */

body.login-body {
    text-align: center;
    min-width: auto;
}

.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.login-header {
    margin-bottom: 20px;
}

.login-logo {
    border: 0;
}

.login-card {
    display: inline-block;
    width: 260px;
    border: 1px solid #ccc;
    font-size: 9pt;
    border-collapse: separate;
}

.login-card__header {
    background-color: #354a4a;
    color: white;
    padding: 8px;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
}

.login-card__body {
    background-color: aqua;
    color: black;
    padding: 16px;
    text-align: center;
}

.login-card--error .login-card__header {
    background-color: #8b0000;
}

.login-card--error .login-card__body {
    background-color: red;
    color: white;
}

.login-card--warning .login-card__header {
    background-color: #7a5000;
}

.login-card--warning .login-card__body {
    background-color: orange;
    color: black;
}

.login-field {
    margin-bottom: 12px;
    text-align: left;
}

.login-field label {
    display: block;
    margin-bottom: 4px;
}

.login-field input {
    font-weight: bold;
    font-size: medium;
    width: 100%;
    box-sizing: border-box;
}

.login-attempts {
    margin-top: 8px;
    font-weight: bold;
}

.login-message {
    max-width: 400px;
    display: inline-block;
    margin: 20px auto;
    padding: 12px;
}

.login-disclaimer {
    width: 260px;
    font-size: small;
    color: red;
    margin-top: 12px;
    text-align: center;
    font-weight: bold;
}

.mfa-notice {
    color: red;
    font-size: small;
    margin-top: 10px;
    font-weight: bold;
}

.auth-error {
    background-color: #ffebee;
    border: 1px solid #f44336;
    color: #c62828;
    padding: 10px;
    margin: 10px auto;
    border-radius: 4px;
    max-width: 400px;
    text-align: left;
}

.auth-warning {
    background-color: #fff8e1;
    border: 1px solid #ffc107;
    color: #5d4037;
    padding: 10px;
    margin: 10px auto;
    border-radius: 4px;
    max-width: 400px;
    text-align: left;
}

/* Suppress spinner arrows on MFA number input */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* MFA panel */
.mfa-panel {
    width: 600px;
    margin: 40px auto 0;
    border: 1px solid #000;
    border-top: none;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    font-weight: normal;
}

.mfa-panel__header {
    display: block;
    text-align: center;
    color: #fff;
    background-color: #354a4a;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    font-weight: bold;
    padding: 4px;
}

.mfa-panel__body {
    background-color: whitesmoke;
    border-top: 1px solid #000;
    padding: 8px;
    text-align: center;
}

.mfa-panel__qr {
    background-color: #fff;
    text-align: center;
    margin: 8px auto;
}

.mfa-instructions {
    margin-bottom: 0.5rem;
}

.mfa-label {
    display: block;
    margin-bottom: 0.25rem;
}

.mfa-code-input {
    width: 100px;
    padding: 0.25rem;
}

/* Alert items */
.alert-item {
    font-family: Arial;
    font-size: medium;
    line-height: 130%;
}

.alert-item--message {
    line-height: 120%;
    height: 80px;
    background-color: green;
}

.alert-item--association {
    padding-top: 4px;
    background-color: black;
}

.alert-item--business-interest {
    padding-top: 4px;
    background-color: blue;
}

.alert-item__exclude {
    display: block;
    position: fixed;
    font-family: Arial;
    font-size: small;
    float: left;
    text-align: left;
    margin-left: 10px;
}

.alert-item__link {
    color: #d7e1f4;
    font-family: Arial;
    font-size: small;
}

.alert-status-icon {
    border: 0;
    vertical-align: top;
    height: 12px;
}

.alert-close-btn {
    border: none;
    float: right;
    margin-right: 10px;
    cursor: pointer;
}

.alert-keyword-highlight {
    background-color: orange;
}

/* ─── Progress bar widget ────────────────────────────────────────────────── */
.pb_container {
    position: relative;
    padding-top: 4px;
}

.pb_bar {
    width: 99%;
    height: 1.4em;
    border: 1px solid silver;
    border-radius: 5px;
    text-align: center;
}

.pb_before {
    float: left;
    height: 1.4em;
    background-color: #43b6df;
    border-radius: 5px 0 0 5px;
}

.pb_after {
    float: left;
    height: 1.4em;
    background-color: #fefefe;
    border-radius: 0 5px 5px 0;
}

.pb_text {
    left: 0;
    width: 100%;
    padding-top: 0.2em;
    text-align: center;
    position: absolute;
}

.pb_spacer {
    height: 1px;
    font-size: 1px;
    clear: both;
}

.pb_spinner {
    display: block;
    margin: 4px 0;
}

.dl-icon {
    border: none;
    vertical-align: middle;
    float: left;
    margin-left: 5px;
}

.pb_stop_btn {
    border: none;
}

/* ── Status page ──────────────────────────────────────────────────────────── */
.status-warning {
    color: red;
}

.status-layout {
    width: 95%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    margin-top: 5px;
    border-top: none;
    border-left: none;
    border-right: none;
}

.status-layout__header {
    height: 34px;
    color: white;
    background-color: #354a4a;
    padding-left: 46px;
    background-image: url('images/status.png');
    background-repeat: no-repeat;
    background-position: 12px center;
}

/* searchscreen.php */
.search-table {
    width: 95%;
    border-collapse: collapse;
    border-top: none;
    border-right: none;
    border-left: none;
    font-family: Arial;
    font-weight: normal;
    font-size: 9pt;
    margin-top: 50px;
}

.search-header-cell {
    height: 34px;
    color: white;
    background-color: #354a4a;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 46px;
    background-image: url('/images/win.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    min-width: 110px;
    max-width: 110px;
    width: 110px;
}

.status-layout__header--desc {
    border: none;
    padding-left: 16px;
    padding-right: 30px;
    font-weight: normal;
    color: #808080;
    font-size: 10pt;
}

.status-layout__col-header {
    color: white;
    background-color: #354a4a;
    border-right: none;
    border-left: none;
    text-align: center;
    font-weight: bold;
}

.status-layout__col-header--right {
    border-top-right-radius: 1em;
}

.status-layout__chart-cell {
    width: 50%;
    background-color: #f9f9f9;
    vertical-align: text-top;
    text-align: center;
}

.status-layout__stats-cell {
    vertical-align: text-top;
    color: #464646;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
    border-right: 1px solid gray;
    font-weight: normal;
    width: 50%;
    font-size: 10pt;
}

.status-period-selector {
    background-color: white;
    border: 1px dotted black;
    margin: 10px;
    padding: 10px;
    text-align: center;
}

.status-report-buttons {
    margin-top: 10px;
}

.status-history-table {
    width: 95%;
    border-collapse: collapse;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    margin-top: 30px;
    border-top: none;
    border-right: none;
    border-left: none;
    font-weight: normal;
}

.status-history-heading {
    height: 34px;
    color: white;
    background-color: #354a4a;
    padding-left: 46px;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-top: none;
    border-left: none;
    border-right: none;
}

.status-row--even {
    background-color: #f9f9f9;
}

.status-row--odd {
    background-color: white;
}

.status-collapsible {
    background-color: whitesmoke;
}

.status-col-header {
    color: black;
    background-color: #b9bec3;
    border-top: none;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    text-align: center;
    font-weight: bold;
}

/* jqplot needs relative positioning to replot correctly after a window resize */
.jqplot-target {
    position: relative !important;
    width: auto !important;
}

.result-table {
    width: 95%;
    border-collapse: collapse;
    border-top: none;
    border-right: none;
    border-left: none;
    font-family: Arial;
    font-weight: normal;
    font-size: 9pt;
    margin-top: 16px;
}

.result-controls {
    width: 95%;
    background-color: #F9F9F9;
    border: 1px solid black;
    display: inline-block;
    border-top: none;
}

.slive-msg {
    display: none;
    margin: 6px 0;
    padding: 20px;
    color: red;
    font-size: 1.1em;
    font-weight: bold;
}

.result-banner {
    width: 95%;
    border: 1px solid grey;
    padding: 5px;
    background-color: lightgrey;
    border-radius: 5px;
    font-family: Arial;
    font-size: 12px;
}

.progress-div {
    display: none;
    margin: 10px;
    width: 260px;
    text-align: center;
    border: 1px solid grey;
    padding: 5px;
    border-radius: 1em;
    font-family: Arial;
    font-size: 10pt;
}

/* ============================================================
   searchsameadv (Advanced Forensic Search)
   ============================================================ */
.ssa-modal-menu {
    width: 100%;
    min-height: 100%;
    display: none;
    position: absolute;
}

.ssa-modal-menu-inner {
    width: 600px;
    min-height: 100%;
    background-color: white;
    text-align: left;
    display: block;
    position: relative;
    border: 1px solid black;
    margin: auto;
}

.ssa-fr-container {
    width: 790px;
    background-color: #F9F9F9;
    text-align: left;
    border: 1px solid black;
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 80px;
    background-image: url('images/magnify.gif');
    background-repeat: no-repeat;
    background-position: right center;
    box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 1em;
}

.ssa-fr-header {
    font-family: Arial;
    color: black;
    font-size: 18px;
    font-weight: bold;
}

.ssa-cal-trig {
    width: 24px;
    height: 21px;
    border: 1px solid black;
    background-image: url(images/calendar.gif);
    vertical-align: middle;
}

.ssa-cal-trig-shadow {
    width: 24px;
    height: 22px;
    border: 1px solid black;
    background-image: url(images/calendar.gif);
    vertical-align: middle;
    box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.2);
}

.ssa-cal-trig-multi {
    width: 24px;
    height: 22px;
    background-image: url(images/mcalendar.gif);
    vertical-align: middle;
    box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.2);
}

.ssa-image-result {
    width: 790px;
    background-color: #F9F9F9;
    text-align: left;
    border: 1px solid black;
    padding-left: 24px;
    padding-right: 80px;
    background-image: url('images/magnify.gif');
    background-repeat: no-repeat;
    background-position: right center;
    box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.2);
    margin-bottom: 30px;
    margin-top: 30px;
    border-radius: 1em;
}

.ssa-image-result-img {
    max-width: 95%;
    text-align: center;
    display: inline-block;
    border: 1px solid black;
    border-top: none;
}

/* ============================================================
 * uc — user_config.php
 * ============================================================ */

.uc-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.uc-spinner {
    display: block;
    padding: 0;
}

.uc-message--error {
    color: red;
}

.uc-message--info {
    color: green;
}

.uc-table {
    font-family: Arial;
    border-collapse: collapse;
    border-top: none;
    border-right: none;
    border-left: none;
    font-weight: normal;
    font-size: 9pt;
    margin-top: 10px;
}

.uc-activity-table {
    font-family: Arial;
    border-collapse: collapse;
    border-top: none;
    border-right: none;
    border-left: none;
    font-weight: normal;
    font-size: 9pt;
    margin-top: 50px;
}

.uc-section-header {
    height: 34px;
    color: white;
    background-color: #354a4a;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 46px;
    background-image: url('images/users2.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
}

.uc-section-header--activity {
    min-width: 110px;
    max-width: 110px;
    width: 110px;
}

/* ── ai.php (AOP Profiling) ──────────────────────────────────────────────── */
.aop-overlay {
    display: block;
    position: fixed;
    background: rgba(95, 95, 95, 0.2);
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.aop-container {
    width: 1000px;
    margin: auto;
    text-align: left;
    display: block;
}

.aop-panel--keywords {
    height: 1800px;
    width: 336px;
    display: inline-block;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0;
    text-align: left;
}

.aop-table {
    width: 320px;
    border-collapse: collapse;
    font-family: Arial;
    font-weight: normal;
    font-size: 9pt;
    margin-left: 0;
    margin-top: 0;
}

.aop-table td {
    border: 1px solid black;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 4px;
}

.aop-table__header {
    height: 34px;
    color: white;
    background-color: #354a4a;
    text-align: left;
    border-top-left-radius: 1em;
    border-top: none;
    border-left: none;
    border-right: none;
    background-image: url('images/aop.png');
    background-repeat: no-repeat;
    background-position: 12px 8px;
    min-width: 110px;
    max-width: 110px;
    width: 110px;
}

.uc-section-description {
    border: none;
    padding-left: 16px;
    font-weight: normal;
    color: #808080;
    font-size: 10pt;
}

.uc-section-description--padded {
    padding-right: 100px;
}

.uc-panel {
    background-color: whitesmoke;
    border: 1px solid gray;
}

.uc-panel__header {
    background-color: lightgray;
    width: 100%;
    height: 21px;
    padding: 1px;
    line-height: 20px;
}

.uc-drop-arrow {
    border: none;
    vertical-align: middle;
    float: right;
}

.uc-loaddetail {
    display: none;
    padding: 0;
}

.uc-loaddetail--open {
    display: block;
}

.uc-user-table {
    font-family: Arial;
    border-collapse: collapse;
    border-top: 1px solid grey;
    border-right: none;
    border-left: none;
    font-weight: normal;
    font-size: 9pt;
    margin-top: 1px;
    background-color: white;
}

.uc-col-header {
    color: white;
    background-color: #354a4a;
    border-top: none;
    text-align: center;
}

.uc-settings-row {
    color: black;
    background-color: whitesmoke;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    height: 42px;
}

.uc-checkbox {
    vertical-align: middle;
    bottom: 1px;
    position: relative;
    margin: 3px;
}

.aop-table td.aop-table__header {
    padding-left: 46px;
}

.aop-profile-wrap {
    margin-left: 0;
    margin-bottom: 6px;
}

#mainselection.aop-profile-wrap {
    width: 175px;
    background-position: 150px 0px;
    height: 20px;
}

.aop-profile-select {
    color: #808080;
    width: 175px;
}

.aop-action-row {
    margin-top: -18px;
}

.aop-action-row--visible {
    display: block;
}

.aop-action-row--hidden {
    display: none;
}

.aop-icon--action {
    height: 18px;
    width: 18px;
    border: none;
    vertical-align: middle;
    float: right;
    margin-left: 5px;
    margin-right: 5px;
}

.aop-icon--add-header {
    border: none;
    margin-top: -3px;
    float: right;
    margin-left: 5px;
    margin-right: 2px;
    cursor: pointer;
}

.aop-table__date-row {
    color: black;
    background-color: aqua;
    text-align: left;
    border-top: none;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
}

.aop-date-wrap {
    font-family: Arial;
    margin: 4px;
}

/* 80px left no room for the year: with border-box the content area was 72px,
   while 'dd/mm/yyyy' alone measures ~80px before the browser's calendar picker
   indicator is drawn inside the field, so the indicator sat over the year
   digits. 120px gives 118px of content for the ~100px the text and indicator
   need, and is the widest that keeps both fields on one line in this cell —
   125px wraps 'To:' onto a second row. */
.aop-date-input {
    width: 120px;
    color: #808080;
}

.aop-cal-btn {
    width: 19px;
    height: 19px;
    border: 1px solid black;
    background-image: url(images/calendar.gif);
    vertical-align: top;
}

.aop-day-btn {
    border: 0;
    vertical-align: middle;
    margin-left: 30px;
    margin-top: 4px;
    height: 19px;
    cursor: pointer;
}

.aop-day-btn--first {
    margin-left: 0;
}

.aop-day-btn--last {
    margin-left: -12px;
}

.aop-table__input-row {
    border-top: 0;
    background-color: #c1f0f0;
    text-align: left;
}

.aop-input {
    color: black;
    background-color: lightgrey;
    border: 1px dashed black;
}

.aop-input--keyword {
    width: 132px;
}

.aop-input--search {
    width: 168px;
}

.aop-icon--add-keyword {
    border: 0;
    vertical-align: middle;
    margin-left: 12px;
    margin-right: 0;
    height: 22px;
    cursor: pointer;
}

.aop-icon--search {
    border: 0;
    vertical-align: middle;
    margin-left: 12px;
    margin-right: 10px;
    height: 22px;
    cursor: pointer;
    float: right;
}

.aop-table__col-header {
    padding-top: 6px;
    border-top: 2px solid black;
    text-align: left;
    border-right: 1px solid grey;
    background-color: #c1f0f0;
}

.aop-table__col-header--wide {
    width: 55%;
}

.aop-table__col-data {
    border-top: 0;
    border-right: 1px solid grey;
    background-color: #c1f0f0;
    width: 50%;
    text-align: left;
    vertical-align: top;
}

.aop-table__col-data--urls {
    vertical-align: top;
    border-top: 0;
    background-color: #c1f0f0;
    text-align: left;
}

.aop-icon--check {
    vertical-align: middle;
    cursor: pointer;
    height: 14px;
    margin-top: -3px;
    margin-left: 4px;
    margin-right: 4px;
}

.aop-icon--uncheck {
    vertical-align: middle;
    cursor: pointer;
    height: 14px;
    margin-top: -3px;
    margin-right: 10px;
}

.aop-checkbox {
    vertical-align: middle;
    bottom: 1px;
    position: relative;
    margin: 3px;
}

.uc-select-wrap--pw,
.uc-select-wrap--sources,
.uc-select-wrap--user {
    overflow: hidden;
    border-radius: 2px;
    border: 1px solid grey;
    background-image: url("images/marrow.gif");
    background-repeat: no-repeat;
    background-color: white;
    position: relative;
    top: 6px;
    box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
}

.uc-select-wrap--pw {
    width: 180px;
    background-position: 155px center;
    margin-left: 3px;
    margin-top: -5px;
    margin-bottom: 5px;
}

.uc-select-wrap--sources {
    display: inline-block;
    width: 140px;
    background-position: 115px center;
}

.uc-select-wrap--user {
    display: inline-block;
    width: 160px;
    background-position: 136px center;
}

.uc-select--pw {
    width: 200px;
}

.uc-select--priority {
    width: 160px;
}

.uc-activity-select {
    color: #808080;
    background-color: transparent;
    max-width: 100%;
}

.uc-add-user-toggle {
    border: 1px solid gray;
    float: right;
    background-color: lightgray;
    width: 262px;
    height: 21px;
    padding: 1px 1px 1px 10px;
    line-height: 20px;
    margin-top: -24px;
}

.uc-edit-panel {
    padding: 12px;
}

.uc-edit-table {
    border: 1px solid lightgray;
    background-color: white;
    border-collapse: initial;
    margin: 20px;
    width: 97%;
    /* Quirks-mode table font-size, as .ac-edit-table (#370). */
    font-size: 9pt;
}

.uc-edit-hr {
    border: 1px solid lightgray;
    border-top: none;
}

.uc-form-input {
    font-weight: bold;
}

.uc-perm-btn {
    display: inline-block;
    cursor: pointer;
    height: 24px;
    margin-top: 10px;
}

.uc-perm-btn--first {
    margin-right: 10px;
}

.uc-action-btn {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.uc-access-denied {
    text-align: center;
}

.uc-last-login-cell {
    white-space: nowrap;
}

.uc-usage-cell {
    text-align: right;
}

.uc-filter-label {
    font-family: Tahoma, sans-serif;
    font-size: 10pt;
}

.uc-other-user-input {
    width: 160px;
    color: #808080;
    margin-left: 5px;
}

/* 80px left a 78px content area, narrower than the field's own text plus the
   browser's calendar indicator, so the year was cut off (the same defect as
   .aop-date-input, #370/#364). Measured, not guessed. */
.uc-date-input {
    width: 120px;
    color: #808080;
}

.uc-cal-btn {
    width: 24px;
    height: 22px;
    border: 1px solid black;
    background-image: url(images/calendar.gif);
    vertical-align: middle;
}

.uc-download-bar {
    background-color: #354a4a;
    border-top-right-radius: 1em;
}

.uc-download-icon {
    border: none;
    vertical-align: middle;
    margin-left: 5px;
}

.uc-usage-label {
    text-align: left;
}

.uc-usage-bar {
    display: inline-block;
    min-height: 12px;
    margin-top: 2px;
    background-color: red;
}

.aop-phone-input {
    width: 24px;
    height: 16px;
    color: grey;
    padding: 0;
    background-color: white;
    border: 1px solid grey;
}

.aop-autorefresh-bar {
    display: block;
    border: 1px solid grey;
    height: 24px;
    padding-top: 5px;
    vertical-align: middle;
}

.aop-autorefresh-checkbox {
    vertical-align: middle;
}

.aop-icon--update {
    border: 0;
    vertical-align: bottom;
    margin-left: 0;
    float: right;
    margin-right: 2px;
    margin-top: -2px;
    height: 24px;
}

.aop-table__status-bar {
    color: black;
    padding: 2px;
    background-color: #B9BEC3;
    border-top: 1px solid black;
    text-align: center;
}

.aop-status-text {
    font-family: Arial;
    width: 100%;
    padding: 3px;
    border: none;
    display: inline-block;
    text-align: center;
}

.aop-table__kw-header {
    color: black;
    background-color: #B9BEC3;
    border-top: 1px solid black;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    text-align: center;
}

.aop-table__kw-header--wide {
    width: 160px;
}

.aop-table__kw-header--left {
    text-align: left;
}

.aop-icon--check-sm {
    vertical-align: middle;
    cursor: pointer;
    width: auto;
    height: 12px;
    margin-top: -3px;
    margin-left: 4px;
    margin-right: 2px;
}

.aop-icon--uncheck-sm {
    vertical-align: middle;
    cursor: pointer;
    width: auto;
    height: 12px;
    margin-top: -3px;
    margin-right: 2px;
}

.aop-icon--refresh-sm {
    border: 0;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 0;
    height: 12px;
}

.aop-modal-overlay {
    display: none;
    position: fixed;
    background: rgba(90, 90, 90, 0.5);
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.aop-modal-overlay--config {
    z-index: 9998;
}

.aop-modal-content {
    font-size: 9pt;
    text-align: left;
    padding: 10px;
    border: 1px solid black;
    color: black;
    background-color: whitesmoke;
    width: 50%;
}

.aop-modal-content--config {
    display: inline-block;
    position: relative;
    top: 100px;
    margin-left: auto;
    margin-right: auto;
}

.aop-modal-content--keyword {
    display: block;
    max-height: 80vh;
    overflow-y: auto;
    margin: auto;
    margin-top: 100px;
}

.aop-icon--pencil {
    border: 0;
    vertical-align: middle;
    margin-left: 0;
    margin-right: 0;
    height: 12px;
}

.aop-checkbox--keyword {
    height: 10px;
    vertical-align: middle;
    bottom: 1px;
    position: relative;
    margin-right: 2px;
}

.aop-icon--spin-sm {
    border: 0;
    vertical-align: top;
    height: 12px;
}

.aop-panel--result {
    width: 600px;
    height: 1800px;
    margin-left: 40px;
    text-align: center;
    display: inline-block;
    overflow: scroll;
    overflow-x: hidden;
    color: grey;
}

.aop-icon--spin-init {
    border: 0;
    margin-top: 100px;
}

/* JS-injected element styles */
.aop-label--disabled {
    color: lightgray;
}

.aop-radio-flag-img {
    margin-right: 4px;
    border: none;
    vertical-align: top;
    height: 20px;
}

.aop-radio-input {
    box-shadow: none;
    background-color: grey;
}

.aop-text--warning {
    color: red;
    font-weight: bold;
}

.aop-rebuild-col--left {
    display: inline-block;
    width: 200px;
    vertical-align: top;
}

.aop-rebuild-col--right {
    display: inline-block;
    vertical-align: top;
}

.aop-icon--spin-refresh {
    border: 0;
    height: 24px;
    float: right;
    margin-right: 20px;
}

.aop-icon--flash {
    border: 0;
    margin-top: 6px;
    float: right;
    margin-right: 6px;
}

/* Option element styles */
.aop-option--primary-selected {
    background-color: aqua;
    color: black;
    font-weight: normal;
}

.aop-option--primary {
    background-color: #354a4a;
    color: white;
    font-weight: normal;
}

.aop-kw-row--odd {
    background-color: #e6f8fe;
    color: black;
}

.aop-kw-row--even {
    background-color: #fdfee6;
    color: black;
}

.aop-kw-cell--center {
    text-align: center;
}

.aop-day-btn-wrap {
    text-align: center;
    display: block;
}

.aop-access-denied {
    text-align: center;
}

.aop-busy {
    text-align: center;
}

.sl-access-denied {
    text-align: center;
}

.sl-no-image {
    text-align: center;
}

.sl-background {
    margin: auto;
    background-size: 500px auto;
    height: 100%;
}

.sl-image {
    width: 99.5%;
    height: 99%;
    position: fixed;
    left: 5px;
    top: 2px;
    z-index: -1;
    border: none;
    text-align: center;
}

.sl-hidden {
    visibility: hidden;
}
/* ==========================================================================
   Password Change — pchange namespace
   ========================================================================== */

.pchange-panel {
    width: 600px;
    margin: 40px auto 0;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    font-weight: normal;
    border: 1px solid black;
    border-top: none;
}

.pchange-panel__header {
    display: block;
    text-align: center;
    background-color: #354a4a;
    color: white;
    font-weight: bold;
    padding: 8px;
    border-radius: 1em 1em 0 0;
}

.pchange-panel__body {
    background-color: whitesmoke;
    padding: 12px 16px;
}

.pchange-reason,
.pchange-message {
    font-size: 14pt;
    font-weight: normal;
    color: #808080;
    margin-bottom: 16px;
}

.pchange-message--success {
    color: #2e7d32;
}

.pchange-message--error {
    color: #c62828;
}

.pchange-field {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pchange-field__label {
    width: 160px;
    flex-shrink: 0;
    color: black;
}

.pchange-field__input {
    font-weight: bold;
    font-size: medium;
}

.pchange-field__strength {
    min-width: 160px;
    font-size: 9pt;
    flex: 1;
}

.pchange-strength--strong {
    color: green;
}

.pchange-strength--medium {
    color: orange;
}

.pchange-strength--weak {
    color: red;
}

.pchange-strength--hint {
    color: #808080;
}

.pchange-rules {
    color: black;
    margin: 12px 0;
    font-size: 9pt;
}

.pchange-submit {
    display: block;
    margin: 0 auto;
}

/* account.php */
.ac-link-row {
    background-color: whitesmoke;
    text-align: center;
    padding: 10px;
}

.ac-link {
    text-decoration: none;
    color: blue;
    font-weight: bold;
    font-family: Arial;
    font-size: 10pt;
}

.ac-option-label {
    display: inline-block;
    min-width: 260px;
}

.ac-select-wrap {
    overflow: hidden;
    width: 180px;
    border-radius: 2px;
    border: 1px solid grey;
    background: url("images/marrow.gif") no-repeat scroll 156px 0px white;
    position: relative;
    top: 6px;
    display: inline-block;
    box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
    margin-bottom: 2px;
}

/* The wrapper draws the box and the arrow; the select must fill it, or the
   right-hand strip under the arrow is not part of the control and the native
   option list is narrower than the box it appears to belong to (#399). */
.ac-select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    padding: 2px 24px 2px 4px;
    cursor: pointer;
    color: #808080;
    outline: none;
}

/* The select's own focus ring is suppressed above and would be clipped by the
   wrapper's overflow:hidden anyway, so the wrapper carries it instead --
   otherwise these dropdowns give no keyboard focus indication at all. */
.ac-select-wrap:focus-within,
.bc-select-wrap:focus-within {
    outline: 2px solid #4a90d9;
    outline-offset: 1px;
}

.ac-select {
    color: #808080;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: white url("images/marrow.gif") no-repeat right center;
    border: none;
    width: 150px;
    padding: 2px 24px 2px 4px;
    cursor: pointer;
}

.ac-info-row {
    background-color: whitesmoke;
    padding: 10px;
}

.ac-save-row {
    text-align: center;
}

.ac-msg {
    font-weight: normal;
    color: #808080;
    font-size: 14pt;
    display: block;
    margin-top: 8px;
    margin-bottom: 8px;
}

/* upload.php */
.upload-view {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.upload-view__card {
    width: min(760px, 100%);
    border: 1px solid #b9bec3;
    border-radius: 8px;
    background-color: #f7f7f7;
    padding: 24px;
    text-align: center;
}

.upload-view__logo {
    max-width: 180px;
    height: auto;
    margin-bottom: 16px;
}

.upload-view__title {
    margin: 0 0 10px;
}

.upload-view__message {
    margin: 0;
    font-size: 11pt;
}

.upload-view__details {
    margin: 16px auto;
    max-width: 640px;
    text-align: left;
}

.upload-view__details li {
    margin-bottom: 6px;
}

.upload-view__actions {
    margin-top: 20px;
}

.upload-view__link {
    font-weight: bold;
}


/* ============================================================
   screen_config.php  (sc-*)
   ============================================================ */

body.sc-page {
    padding-bottom: 100px;
}

.sc-warning {
    display: none;
    color: white;
    border: 1px solid black;
    width: 800px;
    padding: 10px;
    background: red;
    margin-top: 10px;
    font-family: Arial;
    font-size: 9pt;
}

.sc-section-wrapper-show {
    display: block;
}

.sc-section-table {
    width: 95%;
    border-collapse: collapse;
    border-top: none;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    font-family: Arial;
    font-weight: normal;
    font-size: 9pt;
    margin: 50px auto 0;
}

.sc-header-title-target,
.sc-header-title-winscap {
    height: 34px;
    color: white;
    background-color: #354a4a;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 46px;
    background-repeat: no-repeat;
    background-position: 12px center;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
}

.sc-header-title-target {
    background-image: url('images/target.png');
}

.sc-header-title-winscap {
    background-image: url('images/win.png');
}

.sc-header-desc {
    border: none;
    padding-left: 16px;
    padding-right: 100px;
    font-weight: normal;
    color: #808080;
    font-size: 10pt;
}

.sc-col-status {
    color: white;
    background-color: #354a4a;
    border-top: none;
    border-left: none;
    text-align: center;
    padding: 4px;
}

.sc-col-header {
    color: white;
    background-color: #354a4a;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    border-top: none;
    text-align: center;
    padding: 4px;
}

.sc-col-header-wide {
    color: white;
    background-color: #354a4a;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    border-top: none;
    border-right: none;
    text-align: center;
    width: 130px;
    padding: 4px;
}

.sc-col-header-actions {
    color: white;
    background-color: #354a4a;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    border-top: none;
    border-top-right-radius: 1em;
    border-right: none;
    text-align: center;
    width: 130px;
    padding: 4px;
}

.sc-content-cell {
    color: black;
    background-color: whitesmoke;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    text-align: left;
}

.sc-edit-bar {
    border: 1px solid gray;
    float: right;
    background-color: lightgray;
    width: 262px;
    height: 21px;
    padding: 1px 1px 1px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sc-edit-container {
    display: block;
    padding: 12px;
}

.sc-edit-table {
    border: 1px solid lightgray;
    background-color: white;
    border-collapse: collapse;
    margin: 20px;
    width: 97%;
    /* The hint column sets 9pt but the label column never did, so labels
       inherited the 16px UA default straight past every class (#370). */
    font-family: Arial, sans-serif;
    font-size: 9pt;
}

.sc-edit-table td {
    padding: 6px 8px;
}

.sc-edit-header td {
    text-align: center;
    font-weight: bold;
}

.sc-edit-label {
    width: 140px;
    font-weight: bold;
}

.sc-edit-hint {
    color: #808080;
    font-size: 9pt;
    vertical-align: top;
}

.sc-edit-table .sc-edit-note {
    background-color: whitesmoke;
    text-align: center;
    padding: 32px 40px;
    color: black;
}

.sc-edit-table input[type="text"] {
    width: 200px;
}

.sc-status-expired {
    color: #b0b0b0;
    background-color: whitesmoke;
    text-align: center;
    border-bottom: 1px solid #b0b0b0;
    padding: 4px;
}

.sc-status-expiring {
    color: black;
    background-color: gold;
    text-align: center;
    border-bottom: 1px solid lightgray;
    padding: 4px;
}

.sc-section-table .sc-active-row td {
    text-align: center;
    border-bottom: 1px solid lightgray;
    padding: 4px;
}

/* STATUS value and INDIVIDUAL/STAFF name columns stay left-aligned */
.sc-status-expired:nth-child(-n+2),
.sc-status-expiring:nth-child(-n+2),
.sc-section-table .sc-active-row td:nth-child(-n+2) {
    text-align: left;
}

.sc-devices-info {
    color: gray;
}

.sc-gps-frame {
    width: 100%;
    border: none;
    display: block;
    margin: 0 0 120px 0;
    padding: 0;
}

.sc-gps-iframe {
    width: 100%;
    height: 400px; /* initial estimate — JS corrects on load via resizeIframe() */
    border: none;
    display: block;
    margin: 0;
    padding: 0;
}

.sc-icon-btn {
    border: 0;
    background-color: transparent;
    cursor: pointer;
    padding: 0;
}

/* gps_config.php iframe overrides — resets global rules that break iframe embedding */
html.gps-config { height: auto !important; }
html.gps-config body { min-width: 0 !important; }

.sc-page-center {
    text-align: center;
    margin: 0 auto;
}

.sc-hidden {
    display: none;
}

.sc-toggle-btn {
    margin-left: 8px;
}

.sc-edit-hr {
    border: 1px solid lightgray;
    border-top: none;
}

.sc-edit-input {
    font-weight: bold;
}

.sc-expires-td {
    white-space: nowrap;
}

.sc-cal-input {
    color: #808080;
    width: 170px;
}

.sc-cal-btn {
    width: 24px;
    height: 22px;
    border: 1px solid black;
    background-image: url('images/calendar.gif');
    vertical-align: middle;
}

.sc-edit-hint-middle {
    vertical-align: middle;
}

.sc-custom-vis {
    margin-top: 10px;
}

.sc-edit-hint-small {
    color: #808080;
    font-size: 0.85em;
}

.sc-edit-spacer {
    padding: 16px 0 0 0;
}

.sc-edit-submit {
    text-align: center;
}

.sc-delete-confirm-msg {
    color: #c00;
    font-weight: bold;
    margin: 6px 0;
}

.sc-snip-toggle {
    margin-bottom: 6px;
}

.sc-page-spacer {
    display: block;
    height: 100px;
    min-height: 100px;
}

.sc-row-alt-blue {
    background-color: #e6f8fe;
    color: black;
}

.sc-row-alt-green {
    background-color: #fdfee6;
    color: black;
}

.sc-select-wrap {
    overflow: hidden;
    width: 150px;
    border-radius: 2px;
    border: 1px solid grey;
    background: url("images/marrow.gif") no-repeat scroll 126px 0px white;
    position: relative;
    top: 6px;
    display: inline-block;
    box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
}

/* ============================================================
   gps_config.php  (gps-*)
   ============================================================ */

.gps-access-denied {
    font-size: 11pt;
    padding: 20px;
}

.gps-main-table {
    width: 95%;
    border: 1px solid #ccc;
    border-collapse: collapse;
    border-top: none;
    font-family: Arial;
    font-weight: normal;
    font-size: 9pt;
    margin: 0 auto;
}

.gps-section-title-cell {
    height: 34px;
    color: white;
    background-color: #354a4a;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-left: none;
    border-right: none;
    padding-left: 46px;
    background-image: url('images/android.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
}

.gps-section-desc-cell {
    border: none;
    padding-left: 16px;
    padding-right: 100px;
    font-weight: normal;
    color: #808080;
    font-size: 10pt;
}

.gps-subheader-cell {
    color: white;
    background-color: #354a4a;
    border-top-right-radius: 1em;
    border-left: none;
    font-weight: bold;
    text-align: center;
}

.gps-panel-cell {
    color: black;
    background-color: whitesmoke;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
}

.gps-toggle-wrap {
    border: 1px solid gray;
    float: right;
    background-color: lightgray;
    color: black;
    width: 262px;
    height: 21px;
    padding: 1px 1px 1px 10px;
    line-height: 20px;
}

.gps-toggle-img {
    border: none;
    vertical-align: middle;
    float: right;
}

.gps-hidden {
    display: none;
}

.gps-edit-panel {
    padding: 12px;
}

.gps-edit-table {
    border: 1px solid lightgray;
    background-color: white;
    border-collapse: collapse;
    margin: 20px;
    width: 97%;
    /* Same as .sc-edit-table: .gps-label-td carries no size (#370). */
    font-family: Arial, sans-serif;
    font-size: 9pt;
}

.gps-edit-table input[type="text"] {
    width: 200px;
}

.gps-edit-hr {
    border: 1px solid lightgray;
    border-top: none;
}

.gps-label-td {
    width: 140px;
}

.gps-td-center {
    text-align: center;
}

.gps-cal-input {
    width: 172px;
    color: #808080;
}

.gps-cal-btn {
    width: 24px;
    height: 22px;
    border: 1px solid black;
    background-image: url('images/calendar.gif');
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    cursor: pointer;
}

.gps-col-header {
    color: white;
    background-color: #354a4a;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    border-top: none;
    text-align: center;
}

.gps-col-header--wide {
    width: 130px;
}

.gps-row-alt-blue {
    background-color: #e6f8fe;
    color: black;
    border-bottom: 1px solid lightgray;
}

.gps-row-alt-green {
    background-color: #fdfee6;
    color: black;
    border-bottom: 1px solid lightgray;
}

.gps-row-expired {
    color: #b0b0b0;
    background-color: whitesmoke;
    border-bottom: 1px solid #b0b0b0;
}

.gps-row-expiring {
    color: black;
    background-color: gold;
    border-bottom: 1px solid lightgray;
}

.gps-action-btn {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.gps-add-error {
    color: #c00;
    font-weight: bold;
    margin: 4px 0;
}

.gps-select-wrap {
    overflow: hidden;
    width: 150px;
    border-radius: 2px;
    border: 1px solid grey;
    background: url("images/marrow.gif") no-repeat scroll 126px 0px white;
    position: relative;
    top: 6px;
    display: inline-block;
    box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
}

/* ==========================================================================
   assoc_config — ac- prefix
   ========================================================================== */

.ac-body {
    background-image: none;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    font-weight: normal;
}

.ac-center {
    text-align: center;
}

.ac-bottom-spacer {
    height: 60px;
}

.ac-access-denied {
    text-align: center;
}

/* Single source of truth for config table font size (section titles + cells);
   otherwise the title cells inherit the 16px UA default. */
.ac-main-table,
.bc-main-table,
.ac-history-table {
    font-size: 9pt;
}

.ac-main-table {
    width: 95%;
    border: 1px solid;
    border-collapse: collapse;
    border-top: none;
    margin: 20px auto 0;
}

.ac-section-title-cell {
    height: 34px;
    color: white;
    background-color: #354a4a;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 46px;
    background-image: url('images/alert.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
}

.ac-section-desc-cell {
    border: none;
    padding-left: 16px;
    padding-right: 100px;
    font-weight: normal;
    color: #808080;
    font-size: 10pt;
}

.ac-panel-cell {
    background-color: whitesmoke;
    /* Sides deliberately omitted: under border-collapse a cell border beats the
       table's at equal width and style, so a gray side here would take over the
       section's left and right edges below the title row and read as the border
       narrowing part-way down (#399). The table keeps both sides; this cell only
       draws the rules above and below the title bar. */
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
    padding: 0;
}

.ac-subheader {
    background-color: lightgray;
    width: 100%;
    height: 21px;
    padding: 1px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
    font-weight: normal;
    color: black;
}

.ac-inner-table {
    width: 100%;
    /* Only the header row carries width hints; v4.2.1 repeated them on every
       data cell. Under auto layout the browser ignores them and hands the slack
       to EXCLUDE, stretching the table past the viewport (#370). Fixed layout
       makes the header row authoritative and scales the columns with it. */
    table-layout: fixed;
    border: 1px solid;
    border-collapse: collapse;
    border-top: 1px solid grey;
    /* Sides match .ac-toolbar-cell so the section edge keeps the same
       weight down the list rows as it has beside the toolbar and the
       edit form, instead of thinning where the rows start (#399). */
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 9pt;
    margin-top: 1px;
    background-color: white;
}

/* A comma-less value long enough to exceed its column would otherwise overflow
   the cell rather than widen it, now that the layout is fixed. */
.ac-inner-table td {
    overflow-wrap: anywhere;
}

.ac-toolbar-cell {
    color: black;
    background-color: whitesmoke;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    text-align: left;
    vertical-align: middle;
}

.ac-csv-img {
    border: none;
    vertical-align: middle;
    margin-left: 5px;
}

.ac-toolbar-controls {
    float: right;
    display: inline-block;
}

.ac-search-wrap {
    border: 1px solid gray;
    display: flex;
    align-items: center;
    background-color: lightgray;
    width: 270px;
    height: 21px;
    padding: 1px 1px 1px 10px;
    box-sizing: border-box;
}

.ac-search-input {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    height: 17px;
    padding: 1px 2px;
    box-sizing: border-box;
}

.ac-add-toggle-wrap {
    border: 1px solid gray;
    display: flex;
    align-items: center;
    background-color: lightgray;
    width: 270px;
    height: 21px;
    padding: 1px 1px 1px 10px;
    box-sizing: border-box;
    margin-top: 10px;
}

.ac-add-toggle-wrap a {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.ac-add-toggle-wrap img {
    height: 17px;
    width: auto;
}

.ac-drop-img {
    border: none;
    vertical-align: middle;
}

.ac-drop-right {
    float: right;
}

.ac-edit-table {
    border: 1px solid lightgray;
    background-color: white;
    border-collapse: collapse;
    margin: 20px;
    width: 97%;
    /* Every page that requires alert.php emits <script> before the doctype,
       so these render in quirks mode, where a table does not inherit
       font-size from body. Without an explicit size it falls back to the
       16px UA default beside its 9pt neighbours (#370). */
    font-size: 9pt;
}

.ac-edit-table input[type="text"] {
    width: 300px;
    box-sizing: border-box;
}

.ac-adv-table {
    border: 1px solid lightgray;
    margin-top: 2px;
    background-color: white;
    border-collapse: collapse;
    width: 99%;
    /* Quirks-mode table font-size, as .ac-edit-table (#370). */
    font-size: 9pt;
}

.ac-adv-desc {
    width: 40%;
}

/* Auditor-name hint beneath the Custom recipient inputs. <small> is inline, so
   display:block is what puts the names on their own line under the field. */
.ac-auditors-hint {
    display: block;
    margin-top: 4px;
}

/* The question labels are full sentences again, and under auto layout a narrow
   viewport hands the slack to the control and description columns and squeezes
   this one to one word per line. 4.2.1 pinned it with width="140px" per cell
   (#399). */
.ac-adv-table td:first-child,
.bc-adv-table td:first-child {
    width: 220px;
}

/* Alerts drew the grid on these two tables with the presentational border="1"
   attribute, which the Association and Business Interest markup never carried,
   so those sections rendered without internal or side cell borders and read as
   thinner (#399). One rule for all three sections -- .ac- is shared by Alerts
   and Associations -- and 1px solid rather than the attribute's bevelled inset.
   */
.ac-edit-table td,
.ac-adv-table td,
.bc-edit-table td,
.bc-adv-table td {
    border: 1px solid lightgray;
}

.ac-edit-hr {
    border: 1px solid lightgray;
    border-top: none;
}

.ac-label-td {
    width: 140px;
}

.ac-td-center {
    text-align: center;
}

/* Delete confirmation / feedback rows on the alert_config page — white like the data table */
#alert-delete-confirm-row td,
#ac-delete-confirm-row td,
#ac-delete-msg-row td,
#bc-delete-confirm-row td,
#bc-delete-msg-row td {
    background-color: #ffffff;
}

.ac-advanced-header {
    border: 1px solid gray;
    background-color: lightgray;
    width: 96%;
    height: 21px;
    padding: 1px 1px 1px 10px;
    margin-bottom: 2px;
    margin-top: -19px;
    margin-left: 20px;
    line-height: 20px;
    font-weight: normal;
}

.ac-cal-input {
    width: 140px;
    color: #808080;
}

/* ALERT HISTORY section (alert_config.php) */
.ac-history-table {
    width: 95%;
    font-family: Arial;
    border-collapse: collapse;
    border-top: none;
    border-right: none;
    border-left: none;
    border-bottom: none;
    font-weight: normal;
    margin: 50px auto 0;
}

.ac-history-desc-cell {
    border: none;
    padding-left: 4px;
    padding-right: 0;
    font-weight: normal;
    color: #808080;
    font-size: 10pt;
}

.ac-history-control {
    display: inline-block;
    padding: 4px;
}

.ac-history-source-select {
    color: #808080;
    max-width: 110px;
}

.ac-history-toolbar-cell {
    background-color: #354a4a;
    border-top-right-radius: 1em;
}

.ac-history-icon {
    border: none;
    vertical-align: middle;
    margin-left: 5px;
}

.ac-history-count {
    float: right;
    color: white;
    margin-right: 10px;
    font-size: 12px;
    margin-top: 4px;
}

.ac-history-empty {
    padding: 10px;
    color: #808080;
    text-align: center;
}

.ac-iconbtn {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.ac-section-gap {
    margin-top: 45px;
}

/* Image Search (searchscreen.php) date controls */
.search-date-input {
    width: 140px;
    color: #808080;
}

.search-cal-btn {
    width: 24px;
    height: 22px;
    border: 1px solid black;
    background-image: url('images/calendar.gif');
    vertical-align: middle;
}

/* Native datetime-local pickers (P7) need room for date + time + controls;
   min-width overrides the narrower legacy input widths (e.g. 140px).
   Firefox exposes no CSS hook for its internal calendar-icon layout, so
   width is the only lever there, and it needs more of it than Chromium
   does or the icon clips into the minutes. Both values keep the forensic
   search row (Between/And/For/From) on one line at the app's minimum
   supported width (880px, see body{min-width} above). */
.date-field {
    min-width: 195px;
    box-sizing: border-box;
}

/* Engines that expose ::-webkit-* pseudo-elements for datetime-local
   (Chromium — Chrome/Edge — and WebKit/Safari) need less width than
   Firefox, so give them back the gap Firefox needs. */
@supports selector(::-webkit-calendar-picker-indicator) {
    .date-field {
        min-width: 165px;
    }
}

/* Shared nav/header widgets (views/partials/tabs.php) */
.tab-alert-banner {
    position: fixed;
    bottom: 0;
    min-width: 860px;
    color: white;
    z-index: 1002;
    padding-top: 5px;
    padding-bottom: 0;
    background-color: red;
    width: 100%;
    border-top: 1px solid grey;
}

.tab-alert-bell {
    position: fixed;
    right: 68px;
    height: 20px;
    width: 42px;
    border: 3px solid white;
    padding-right: 5px;
    top: 9px;
    background-color: red;
    color: white;
    font-size: 15px;
    font-family: Tahoma, Arial;
    font-weight: bold;
    text-align: right;
    background-image: url('images/bell.png');
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 1px;
    /* .tabs-bg is positioned and paints after this element in tree order, so
       without a stacking level the grey header band hides the bell entirely
       until the band scrolls away (#398). Matches .tab-logout / .tab-help. */
    z-index: 100;
}

.tab-scribble {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 8px;
    left: 7px;
    border: none;
    background-image: url('images/scribble.png');
    background-repeat: no-repeat;
    z-index: 1000;
    cursor: pointer;
}

.tab-scribble-panel {
    background-color: #f9f9f9;
    border: 1px solid lightgrey;
    background-image: url('images/scribble.png');
    background-repeat: no-repeat;
}

.tab-scribble-input {
    width: 98%;
    border: 1px solid lightgrey;
    font-family: Tahoma, Arial;
    font-size: 11pt;
    color: gray;
}

.tab-logout {
    position: fixed;
    right: 40px;
    top: 5px;
    display: block;
    width: 32px;
    height: 32px;
    z-index: 100;
    cursor: pointer;
}

.tab-logout-img {
    height: 24px;
    width: 24px;
    border: none;
    margin: 4px;
}

.tab-help {
    position: fixed;
    right: 4px;
    display: block;
    width: 32px;
    height: 28px;
    top: 5px;
    border: none;
    background-image: url('images/help2.png');
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 100;
}

.tab-fixwidth {
    min-width: 800px;
    width: 800px;
    height: 24px;
}

.tab-banner {
    background-color: yellow;
    font-size: 12pt;
}

/* Forensic Search form controls (searchsameadv.php) */
/* The page body inherits the global Georgia (serif) base; scope the forensic
   form to sans-serif so its bare-text labels match the input controls. */
#searchform {
    font-family: Arial, Helvetica, sans-serif;
}

.ssa-note {
    font-family: Arial;
    font-size: 10pt;
    color: #808080;
}

.ssa-center {
    text-align: center;
}

.savrep-notice {
    text-align: center;
}

/* Default width for the Forensic Search Find box. toggleGPSNear() narrows it
   inline for GPS NEAR and clears that inline value to come back here, so the
   width has one definition -- it previously had two that had drifted apart,
   and the box jumped on blur when a search was run (#370).
   Deliberately a class, not #srch: that id is reused by the Image Search find
   box (size="24") and the cust.php SQL textarea, and an id selector would beat
   their own rules and resize both. */
.ssa-find-input {
    width: 560px;
}

/* The 60+ character expansion textarea. It sits in the same flex row as the
   Find: label and the In: selector, so it replaces the input in place instead
   of dropping below the row. Vertical resize only, so the handle cannot widen
   the row. display is toggled inline by changeColor(). */
.ssa-find-area {
    color: black;
    width: 560px;
    max-width: 100%;
    align-self: flex-start;
    resize: vertical;
    background-repeat: no-repeat;
    background-image: url('images/searchicon.png');
    background-position: 2px 2px;
    padding-left: 24px;
}

/* v4.2.1 rendered this row at 10pt Arial: an unclosed <font face="Arial"
   style="font-size:10pt"> higher up the page leaked its size onto everything
   below it. Closing that tag left the row at the 16px body default, which
   widened the Between/And/For/From labels enough to push the sources dropdown
   onto a second line inside the 880px Modify Search panel (#370). */
.ssa-fr-row {
    font-family: Arial, sans-serif;
    font-size: 10pt;
}

.ssa-fr-date-input {
    width: 100px;
    color: #808080;
}

.ssa-fr-who-input {
    width: 175px;
    color: #808080;
}

.ssa-fr-opt-label {
    display: inline-block;
    font-size: 10pt;
    font-family: Arial;
}

/* Percentages, not the original pixels: with table-layout:fixed a px hint is a
   floor, so 2x182 + 9x130 = 1534px held the table wider than the viewport and
   the page still scrolled sideways. These keep v4.2.1's 182:130 proportions
   while letting the columns scale down with the window.

   They must sum to 100% or the table leaves an empty strip down its right-hand
   side, so they are per column count. Alerts has eleven columns
   (2x182 + 9x130 = 1534); Associations reuses the same ac- classes but has ten
   (2x182 + 8x130 = 1404), so it needs its own values. */
.ac-col-wide {
    width: 11.86%;   /* 182/1534 */
}
.ac-col-std {
    width: 8.47%;    /* 130/1534 */
}

#ac-loaddetail .ac-col-wide {
    width: 12.96%;   /* 182/1404 */
}
#ac-loaddetail .ac-col-std {
    width: 9.26%;    /* 130/1404 */
}
.ac-col-header {
    color: white;
    background-color: #354a4a;
    border-top: none;
    border-left: none;
    text-align: center;
}

.ac-limit-checkbox {
    vertical-align: middle;
    position: relative;
    bottom: 1px;
    margin: 3px;
}

.ac-sort-img {
    border: none;
    vertical-align: bottom;
}

/* Gridlines on the listing rows of all three sections (ALERTS, ASSOCIATIONS,
   BUSINESS INTERESTS). v4.2.1 got these from border="1" on the list table, which
   the logic/view split dropped, leaving the rows separated only by the zebra
   stripes. Scoped to the data rows so the toolbar and edit-panel rows that share
   the same table stay borderless. */
.ac-list-row > td {
    border: 1px solid gray;
}

.ac-row-blue {
    background-color: #e6f8fe;
    color: black;
}

.ac-row-green {
    background-color: #fdfee6;
    color: black;
}

.ac-row-expired {
    color: #b0b0b0;
    background-color: whitesmoke;
}

.ac-action-btn {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.ac-add-error {
    color: #c00;
    font-weight: bold;
    margin: 4px 0;
    text-align: center;
}

.ac-source-badge {
    font-size: 10px;
    color: red;
    margin: 0;
    display: inline;
}

.ac-expired-label {
    color: #b0b0b0;
}

.ac-row-highlight {
    background-color: #c8e6ff !important;
    outline: 2px solid #4a90d9;
}

/* alert_config.php-specific classes */
.ac-warning {
    color: #cc0000;
    font-weight: bold;
    margin: 6px 0;
}
.ac-header-row {
    background-color: #354a4a;
    color: white;
}
.ac-header-td {
    color: white;
    font-weight: bold;
    font-size: 11px;
    white-space: nowrap;
    padding: 4px 6px;
}
.ac-alertlimit-wrap {
    display: inline-block;
    margin-right: 14px;
    vertical-align: middle;
    font-size: 11px;
}
.ac-expired-td {
    color: #999;
}
.ac-submit-wrap {
    margin-top: 10px;
    text-align: center;
}
.ac-submit-btn {
    background-color: #354a4a;
    color: white;
    border: none;
    padding: 4px 12px;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}
.ac-submit-btn:hover {
    background-color: #4a6a6a;
}

/* account.php scoped layout guard */
.account-view .ac-main-table {
    width: 95%;
    margin: 50px auto 0;
}

.account-view .ac-main-table > tbody > tr > td {
    text-align: left;
    vertical-align: middle;
}

.account-view .ac-main-table > tbody > tr > td[rowspan] {
    width: 150px;
    vertical-align: top;
    font-weight: bold;
    padding-top: 10px;
    border-right: 1px solid gray;
}

.account-view .ac-option-label {
    min-width: 320px;
}

.account-view .ac-main-table .ac-select-wrap {
    width: 190px;
    background-position: 166px 0;
}

.account-view .ac-main-table .ac-select {
    width: 100%;
}

.account-view .ac-main-table td[colspan="2"]:not(.ac-subheader):not(.ac-info-row):not(.ac-section-desc-cell) {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.account-view .ac-main-table td[colspan="2"]:not(.ac-subheader):not(.ac-info-row):not(.ac-section-desc-cell) > .ac-select-wrap {
    margin-left: 4px;
}

/* cust.php view */
.cust-view {
    width: 95%;
    margin: 16px auto 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9pt;
}

.cust-view__panel,
.cust-view__results {
    width: 100%;
    border: 1px solid aqua;
    border-collapse: separate;
    border-spacing: 0;
    background-color: #dff7f7;
}

.cust-view__form {
    padding: 10px;
}

.cust-view__bar {
    background-color: teal;
    color: #fff;
    padding: 6px 10px;
    margin-bottom: 10px;
}

.cust-view__checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

.cust-view__label {
    display: block;
    color: #000;
    margin: 8px 0 4px;
    font-weight: bold;
}

.cust-view__textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #9eb7b7;
    padding: 6px;
    resize: vertical;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 9pt;
    background-color: #fff;
}

.cust-view__textarea--history {
    background-color: #f9ffff;
}

.cust-view__actions {
    margin: 12px 0;
    text-align: center;
}

.cust-view__button {
    padding: 6px 14px;
    border: 1px solid #3a7f7f;
    background-color: #5ca3a3;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.cust-view__button:hover {
    background-color: #4a8c8c;
}

.cust-view__spinner {
    text-align: center;
    min-height: 40px;
}

.cust-view__feedback {
    margin: 12px auto;
    width: 95%;
    text-align: center;
    font-weight: bold;
}

.cust-view__feedback--error {
    color: #b00020;
}

.cust-view__results-wrap {
    width: 95%;
    margin: 0 auto 20px;
    overflow: auto;
    max-height: 70vh;
}

.cust-view__results th {
    background-color: teal;
    color: #fff;
    padding: 6px;
    border: 1px solid silver;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.cust-view__results td {
    background-color: #fff;
    color: #000;
    border: 1px solid silver;
    padding: 5px;
    vertical-align: top;
}

.cust-view__denied {
    margin-top: 30px;
    text-align: center;
}

.cust-view__denied-title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    color: #222;
}

.download-error {
    max-width: 760px;
    margin: 80px auto;
    padding: 24px;
    border: 1px solid #c8d2d2;
    border-radius: 10px;
    background-color: #f7fbfb;
    box-shadow: 0 8px 24px rgba(24, 52, 52, 0.12);
}

.download-error__title {
    margin: 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    color: #0f3f46;
}

.download-error__message {
    margin: 0 0 18px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: #1f2c2f;
}

.download-error__action {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #2f7d89;
    border-radius: 6px;
    background-color: #3e9aac;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-decoration: none;
}

.download-error__action:hover {
    background-color: #307c8c;
}

.dlpdf-export {
    background: #ffffff;
    color: #122025;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 12px;
    min-width: 0;
}

.dlpdf-content {
    max-width: 980px;
    margin: 0 auto;
}

.dlpdf-banner {
    margin-bottom: 10px;
    font-weight: bold;
    color: #8a1111;
}

.dlpdf-header {
    margin-bottom: 14px;
    border: 1px solid #d2d8da;
    border-radius: 8px;
    background-color: #f2f6f6;
    padding: 12px 16px;
}

.dlpdf-subtitle {
    margin: 18px 0 8px;
    font-size: 16px;
    color: #1a4750;
}

.dlpdf-paragraph {
    margin: 0 0 8px;
    line-height: 1.45;
}

.dlpdf-table {
    width: 100%;
    border-collapse: collapse;
    margin: 8px 0;
}

.dlpdf-table td {
    border: 1px solid #b9c5c8;
    padding: 6px;
    vertical-align: top;
    font-size: 12px;
}

.dlpdf-image,
.dlpdf-inline-image {
    max-width: 100%;
    height: auto;
    border: 1px solid #b7c2c7;
}

.dlpdf-figure {
    margin: 12px 0;
}

.dlpdf-figure figcaption {
    margin-bottom: 6px;
    font-weight: bold;
}

.logout-view {
    max-width: 480px;
    margin: 80px auto;
    padding: 24px;
    text-align: center;
    font-family: Georgia, serif;
}

.logout-view__logo img {
    border: none;
}

.logout-view__message {
    font-size: 16px;
    margin: 20px 0;
}

.logout-view__action {
    color: #3e9aac;
}

.emergency-page {
    margin-top: 80px;
    padding: 0 1%;
}

.emergency-panel {
    max-width: 980px;
    margin: 0 auto;
    border: 1px solid #c7c7c7;
    background-color: #f9f9f9;
}

.emergency-panel--monitor {
    background-color: #ffffff;
}

.emergency-panel--denied {
    border-color: #d8b6b6;
    background-color: #fff4f4;
}

.emergency-panel__title {
    margin: 0;
    padding: 6px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: #000000;
    background-color: #d3d3d3;
    border-bottom: 1px solid #c7c7c7;
}

.emergency-panel__form {
    padding: 12px;
}

.emergency-panel__text {
    margin: 0 0 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
}

.emergency-panel__label {
    display: block;
    margin-bottom: 6px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #1a1a1a;
}

.emergency-panel__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.emergency-panel__input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
}

.emergency-panel__button {
    padding: 6px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #000000;
    background-color: #e8e8e8;
    border: 1px solid #999999;
    cursor: pointer;
}

.emergency-panel__button:hover {
    background-color: #dcdcdc;
}

.emergency-panel__denied {
    margin: 0;
    padding: 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #7f1111;
}

.emergency-panel__output {
    margin: 0;
    padding: 12px;
    max-height: 80vh;
    overflow: auto;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.35;
    color: #000000;
    background-color: #ffffff;
}

/* bi_config.php */
.bc-body {
    background-image: none;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    font-weight: normal;
}

.bc-center {
    text-align: center;
}

.bc-access-denied {
    text-align: center;
}

.bc-main-table {
    width: 95%;
    border: 1px solid;
    border-collapse: collapse;
    border-top: none;
    margin: 0 auto;
}

.bc-section-title-cell {
    height: 34px;
    color: white;
    background-color: #354a4a;
    border-top-left-radius: 1em;
    border-top-right-radius: 1em;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-left: 46px;
    background-image: url('images/alert.png');
    background-repeat: no-repeat;
    background-position: 12px center;
    min-width: 120px;
    max-width: 120px;
    width: 120px;
}

.bc-section-desc-cell {
    border: none;
    padding-left: 16px;
    padding-right: 100px;
    font-weight: normal;
    color: #808080;
    font-size: 10pt;
}

.bc-panel-cell {
    background-color: whitesmoke;
    /* Sides deliberately omitted: under border-collapse a cell border beats the
       table's at equal width and style, so a gray side here would take over the
       section's left and right edges below the title row and read as the border
       narrowing part-way down (#399). The table keeps both sides; this cell only
       draws the rules above and below the title bar. */
    border-top: 1px solid gray;
    border-bottom: 1px solid gray;
    text-align: center;
    padding: 0;
}

.bc-subheader {
    background-color: lightgray;
    width: 100%;
    height: 21px;
    padding: 1px;
    line-height: 20px;
    box-sizing: border-box;
    text-align: center;
    font-weight: normal;
    color: black;
}

.bc-inner-table {
    width: 100%;
    /* As .ac-inner-table: only the header row carries width hints, so auto
       layout ignores them and hands the slack to one column, stretching the
       table past the viewport (#370). */
    table-layout: fixed;
    border: 1px solid;
    border-collapse: collapse;
    border-top: 1px solid grey;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 9pt;
    margin-top: 1px;
    background-color: white;
}

.bc-toolbar-cell {
    color: black;
    background-color: whitesmoke;
    border-right: 1px solid gray;
    border-left: 1px solid gray;
    text-align: left;
    vertical-align: middle;
}

.bc-csv-img {
    border: none;
    vertical-align: middle;
    margin-left: 5px;
}

.bc-toolbar-controls {
    float: right;
    display: inline-block;
}

.bc-search-wrap {
    border: 1px solid gray;
    display: flex;
    align-items: center;
    background-color: lightgray;
    width: 270px;
    height: 21px;
    padding: 1px 1px 1px 10px;
    box-sizing: border-box;
}

.bc-search-input {
    flex: 1;
    min-width: 0;
    margin-left: 6px;
    height: 17px;
    padding: 1px 2px;
    box-sizing: border-box;
}

.bc-add-toggle-wrap {
    border: 1px solid gray;
    display: flex;
    align-items: center;
    background-color: lightgray;
    width: 270px;
    height: 21px;
    padding: 1px 1px 1px 10px;
    box-sizing: border-box;
    margin-top: 10px;
}

.bc-add-toggle-wrap a {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.bc-add-toggle-wrap img {
    height: 17px;
    width: auto;
}

.bc-drop-img {
    border: none;
    vertical-align: middle;
}

.bc-drop-right {
    float: right;
}

.bc-edit-table {
    border: 1px solid lightgray;
    background-color: white;
    border-collapse: collapse;
    margin: 20px;
    width: 97%;
    /* Quirks-mode table font-size, as .ac-edit-table (#370). */
    font-size: 9pt;
}

.bc-edit-table input[type="text"] {
    width: 300px;
    box-sizing: border-box;
}

.bc-adv-table {
    border: 1px solid lightgray;
    margin-top: 2px;
    background-color: white;
    border-collapse: collapse;
    width: 99%;
    /* Quirks-mode table font-size, as .ac-edit-table (#370). */
    font-size: 9pt;
}

.bc-adv-desc {
    width: 40%;
}

.bc-edit-hr {
    border: 1px solid lightgray;
    border-top: none;
}

.bc-label-td {
    width: 140px;
}

.bc-td-center {
    text-align: center;
}

.bc-advanced-header {
    border: 1px solid gray;
    background-color: lightgray;
    width: 96%;
    height: 21px;
    padding: 1px 1px 1px 10px;
    margin-bottom: 2px;
    margin-top: -19px;
    margin-left: 20px;
    line-height: 20px;
    font-weight: normal;
}

.bc-cal-input {
    width: 140px;
    color: #808080;
}

.bc-select-wrap {
    overflow: hidden;
    width: 180px;
    border-radius: 2px;
    border: 1px solid grey;
    background: url("images/marrow.gif") no-repeat scroll 156px center white;
    position: relative;
    top: 6px;
    display: inline-block;
    box-shadow: 1px 3px 6px 0px rgba(0,0,0,0.2);
}

.bc-select-wrap select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    padding: 2px 24px 2px 4px;
    cursor: pointer;
    color: #808080;
    outline: none;
}

/* A comma-less value too long for its column would overflow the cell rather
   than widen it, now that the layout is fixed. */
.bc-inner-table td {
    overflow-wrap: anywhere;
}

.bc-col-wide {
    width: 12.96%;   /* 182/1404 -- ten columns: 2x182 + 8x130 */
}

.bc-col-std {
    width: 9.26%;    /* 130/1404 */
}

.bc-col-header {
    color: white;
    background-color: #354a4a;
    border-top: none;
    border-left: none;
    text-align: center;
}

.bc-sort-img {
    border: none;
    vertical-align: bottom;
}

/* assoc_config.php marks up its sortable headers with .ac-sort-cell, which had
   no rule at all, so those markers rendered as bare inline spans while the
   Business Interest ones were spaced (#399). */
.ac-sort-cell,
.bc-sort-cell {
    cursor: pointer;
    display: inline-block;
    margin-left: 4px;
}

.bc-action-btn {
    border: 0;
    background-color: transparent;
    cursor: pointer;
}

.bc-add-error {
    color: #c00;
    font-weight: bold;
    margin: 4px 0;
    text-align: center;
}

.bc-expired-label {
    color: #b0b0b0;
}

.bc-row-highlight {
    background-color: #c8e6ff !important;
    outline: 2px solid #4a90d9;
}

#bc-delete-confirm-row td {
    background-color: #ffffff;
    padding: 6px 12px;
}

#bc-delete-confirm-msg {
    font-weight: bold;
    margin-right: 12px;
}

#bc-delete-confirm-yes {
    cursor: pointer;
}

#bc-delete-msg-row td {
    padding: 6px 12px;
    font-style: italic;
    color: #808080;
}

/* Utilities — alert-configuration sections (ALERTS, ASSOCIATIONS, BUSINESS INTERESTS).
   Custom recipient fields and the username warning are hidden until revealed by
   js/alert_sections.js, or by the server when the saved value is already "Custom".
   Hidden by default so the fields stay collapsed with JavaScript unavailable. */
[data-custom-only],
[data-user-warning] {
    display: none;
}

[data-custom-only].is-visible,
[data-user-warning].is-visible {
    display: block;
}