h2.report-head {font-size: 36px;
border-bottom: 1px #666666 solid;
color:#05135a;
padding:5px;
padding-top:30px;
margin-top:-3px;
background-image:url(/assets/img/cream_pixels.png);
}

h2.report-section {color: #666666;}


/*----------------------------------------------------------------------------*/

body {
/* 2026 flat refresh — the textured mochaGrunge page becomes a clean white
   surface behind the bordered report card. */
	background-color:#fff;
	margin-top:10px;
margin-bottom:10px;}

#wrap {width:860px;
text-align:left;
background-color:#fff;
margin:0px auto;
margin-top:15px;
margin-bottom:30px;
padding:10px;
border: 1px #666666 solid;
border-radius: 6px;
}

.clearfix {clear:both;
margin-bottom:55px;}

.clear {
	clear: both;
	margin:0px;
	padding:0px;
}

.clear_line {
	clear: both;
	margin-top:10px;
	margin-bottom:7px;
	margin-left:100px;
	margin-right:40px;
	padding-bottom:0px;
	border-bottom: 3px #fff solid;}

/* header , logo + navigation*/

#header {height:117px;
/*background:url(https://champions.121qa.com/assets/img/head-bg.png) repeat;
background-image:url(/assets/img/black_linen_v2.png);*/
background-color:#202540;
position:relative;
border-radius: 3px;
color: #000b2f;}

#logo{
	position:absolute;
	/*top:37px;*/
	top:7px;
	left:25px;
	/*border:1px solid #666;*/
}
#logo a{color:#fff;text-decoration:none;border:none;}

#nav {position:absolute;
top:35px;
right:10px;
padding:10px;

/*background-color:#060e38;
border:1px solid #535a7a;*/
border:1px solid #666;
background-color:#202540;
/*background-image:url(https://champions.121qa.com/assets/img/simple_dashed.png);*/
list-style-type:none;}

#nav ul {margin:5px;
list-style:none;
}

#nav li {float:left;
font-weight:700;
color:#fff;
}
/*
#nav {display:block;
text-align:center;

font-family: Arial, sans-serif;
text-decoration:none;
border:none;
margin-right:10px;
margin-left:10px;}
*/
#nav a:hover {color:#7b83a5;}

#nav .current {color:#7b83a5;}

#homeunder {border-bottom: 1px #666666 solid;
height: 5px;}

/* content */

#content {margin:0 auto;}

/* reports menu */
#side-col {width:170px;
padding:5px;
float:left;
margin-top:3px;
/*background-color: #edf0f4;*/
background-image:url(/assets/img/binding_light.png);
min-height:100%;
}
.side-col-group h3{
	color:#003;	
}
.side-col-group {
	width:160px;
	padding:5px;
float:left;
/*background-color: #eeeeee;
background-image:url(/assets/img/retro_intro.png);
background-image:url(/assets/img/squairy_light.png);*/
margin-top:0;
/*color: #e4e4e4;
border: 1px solid #999;*/
border-radius: 6px;
margin-bottom:15px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.25);
}

.nav-normal{
	border: 1px solid #999;
	color: #e4e4e4;
	background-color:#dbdedf;
	/*background-image:url(https://champions.121qa.com/assets/img/squairy_light.png);*/
}
.nav-active{
	border: 1px solid #009;
	background-color:#202540;
	/*background-image:url(https://champions.121qa.com/assets/img/denim.png);*/
}
h3.side-active{
	color:#FFF;
}

#side-col li{
	list-style:none;
	margin-left:-15px;
	padding:0 0 5px 0;
}
#side-col li a{
	color:#000;
	font-size:18px;
}
.grey a{
	/*font-family:Verdana, Geneva, sans-serif;*/
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}


.trigger a {font-color:#FFF;
	background: #D12F19;
	text-decoration: none;
	margin: 1px;
	padding: 2px;
     -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -khtml-radius: 4px;
    border-radius: 4px;


}

.trigger a:hover {color: #efe92c;}

.trigger a:active {color: #efe92c;}

.diagnostic_header {color: #003300;
font-style: italic;
font-weight:bold;
font-size:9px;
}

.keywords .diagnostic a {color: #000;
background: #1A751A;
text-decoration: none;
margin: 1px;
padding: 1px;}

.diagnostic a:hover{color: #000;
background: #ffffff;
border-color: #1A751A;
}

.diagnostic a:focus, a:active{color: #000000;
background: #ffffff;
/*border-color: #1A751A;*/
border: 1px solid #1A751A;
}

.diagnostic {width:375px;
padding:3px;
background-color: #edf0f4;}

/*p .back{text-align:left; color:666; text-decoration:none; border-bottom:1px dashed #666;}*/

.notice {background: #EDF0F4;
color: #000b33;
border-color: #000b33;}

.comments {color: #565656;
font-style: italic;
margin: 5px;}

.comments_date {font-size: 8px;
font-style: italic;
padding-bottom: 10px;
margin: 5px;}


#main {margin-bottom: 20px;
margin-top: 10px;}

#text {position: relative;
width: 370px;
float: left;}

.main-col {width:660px;
font-family:Verdana, Arial, Helvetica, sans-serif;
float:right;
padding:5px;}
.main-col ul {
	list-style-type: square;
}

/*Charts*/

.reporting {color: #565656;
border-bottom: 1px #565656 solid;
padding-top: 3px;}
/*
.cs-charts {width:570px;
float:right;
padding:5px;
height:200px;
border: 1px #eeeeee solid;}
*/
.satisfaction {width:180px;
float:left;
margin: 0px;
padding-bottom: 2px;}

#referral {width:180px;
padding: 0px;
margin: 0 auto;}

.retention {width:180px;
float: right;
margin: 0px;
padding: 0px;
position: relative;
display: inline;}

.legend {margin-left:23px;
width:80px;
line-height: 12px;
font-size: 10px;
color: #000000;}

.service {width:570px;
float:right;
padding:5px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #eeeeee solid;}

.commentpage {width:565px;
float:right;
padding:5px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #eeeeee solid;}

p.tip {color: #000000;
font-size: 10px;}

p.description {font-style: italic;
font-size: 12px;}

.keywords a {color: #000;
font-size: 9px;
font-style: italic;
text-decoration:none;
/*border-bottom:1px dashed #666;*/
}
/*
.keywords a:hover{
	border-bottom:1px solid #000;
}
*/
.appearance {width:565px;
float:right;
padding:5px;
margin-top: 5px;
border: 1px #eeeeee solid;}

.appearance-alert {width:565px;
float:right;
padding:5px;
margin-top: 5px;
border: 2px #e50400 solid;}


.service-alert {width:570px;
float:right;
padding:5px;
margin-top: 5px;
border: 1px #e50400 solid;
border-top:3px #e50400 solid;}

.appearance-sq {width:555px;
float:right;
padding:5px;
margin-top: 5px;
border: 1px #40ed37 solid;}

.sq-chart {width:165px;
float:left;
margin: 0px;
padding: 2px;
display:block;
}

.sq-description {color: #111;/*Main report text area - used to be 666666*/
/*margin-left: 180px;*/
margin-top: 5px;
position: relative;}
/*
.chart-details {
	background-color: #f8e409;
margin-left: 155px;
padding-left: 22px;}
*/
.key-label {width: auto;
color: #666666;}

p.key-word {margin: 0 0 1em;
line-height:.5;
vertical-align: top;}

div#navbar {font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
text-align: center;
border-bottom: solid #0101a1 1px;
padding: 3px;
width: 540px;
margin-bottom:5px}

li.current {text-decoration: none;
display: inline;
border-bottom: 1px #000000 solid;
color: #000000;}

li.tip
{
margin:0.75em 0 0 0;
/*list-style: square;*/
text-decoration: none;
color:#003300;
line-height: 1.25;
/*background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .6em;*/
}

li
{
margin:0 0 0.25em 0;
/*list-style: square;*/
text-decoration: none;
color:#000000;
/*background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 0 .4em;
padding-left: .6em;*/
}

.category {/*background-color: #66d127;
*/
line-height:1.2;
position: static;
width:280px;
vertical-align: top;}

#questions {position: relative;
margin-top: 0px;
margin-left: auto;
color: #000f41;
padding-top: 10px;
font-size: 12px;}

#disagree {position: absolute;
top: 2px;
left: 400px;
color: #0a1848;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
line-height:1.2em;}

#agree {position: absolute;
right: 5px;
top: 2px;
color: #0a1848;
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
line-height:1.2em;}

#buttons {
	float: right;
	border: 1px #666666 solid;
	width: 150px;
	background-color: #eeeeee;
	padding-top: 1px;
	padding-bottom: 1px;
}

#calendar{
margin-bottom: 4px;}

.style1 {color: #FFFFFF}

#account_details{border: 1px #000 solid;width: 100%;padding: 5px;background-color: #f0f0f0;margin-bottom:10px;}

p.detail_display{font-size: 9px;text-align: right;}ol li {
	line-height: 1.4em;
	margin-bottom:10px;
}
ol li a {
	color: #006;
}
.ind_norm {
	background-color: #f60;
}

#spacer {
	width: 100%;
	height:30px;
}

/* footer styles */

#foot{
	padding-top:-2px 5px 10px 5px;
/* 2026 flat refresh — the textured binding_light footer becomes a soft grey bar. */
	background-color:#f5f5f5;
}
#foot p{margin:0 5px;}
#foot p img{margin:0 0 5px 0}
#footerLinks{margin:0px auto;color:#000;border-top:1px solid #111;height:25px;padding-top:2px;font-size: 10px;}
p.fLink{
	float:right;
}
#tracker{
	float:right;
	width:125px;
	margin-bottom:3px;
}


/* sq details styles */
.legend {
	margin-left:30px;
	width:120px;
}

.legend .legendtext{
	float:left;
	line-height: 12px;
	font-size: 10px;
	color: #000000;	
}

.legend .chartbutton{
	float:right;
	margin-top:7px;	
}

.legend .chartbutton img a:hover{
	text-decoration:none;
}

.service {width:570px;
float:right;
padding:5px;
margin-top: 5px;
margin-bottom: 5px;
border: 1px #eeeeee solid;}

p.description {font-style: italic;
font-size: 12px;}

.keywords{
font-size: 9px;
font-style: italic;	
color: #000;
}

.keywords a {
text-decoration:none;
/*border-bottom:1px dashed #666;*/
}

.keywords a:hover{
	border-bottom:1px solid #000;
}

.keywords .diagnostic a {color: #fff;
background: #1A751A;
text-decoration: none;
margin: 1px;
padding: 1px;}


/* ═══════════════════════════════════════════════════════════════════════════
   Agents read-only report portal — legacy titlebar chrome (agents.121qa.com).
   The agent views use a narrow 640px single column with a black-linen titlebar
   (agent name right, logo left) and NO side navigation. Navigation lives as
   inline buttons inside each view (Archive / Print / Referrals).
   ═══════════════════════════════════════════════════════════════════════════ */

#wrap { width: 640px; }

#titlebar {
	background-image: url(/assets/img/black_linen_v2.png);
	background-color: #202540;
	padding: 3px;
	border-radius: 3px;
	position: relative;
	overflow: hidden;
}
#titlebar img.logo { border: 0; }
#agentname {
	width: 410px;
	float: right;
	margin-right: 5px;
	text-align: right;
	color: #fff;
	font-size: 24px;
	padding-top: 10px;
}

/* The report body column is narrower than the champions dashboard main-col. */
#content .main-col { width: 610px; }

/* Inline navigation buttons (bootstrap-compatible names, self-contained) --- */
.row { margin: 0 -5px; }
.row:after { content: ""; display: block; clear: both; }
.col-md-4 { float: left; width: 33.3333%; padding: 0 5px; box-sizing: border-box; }
.col-md-4:after { content: ""; display: block; clear: both; }
.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	line-height: 1.42857;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 4px;
	text-decoration: none;
}
.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; }
.btn-primary:hover, .btn-primary:focus { color: #fff; background-color: #286090; border-color: #204d74; }
/* Green state of the Publish toggle — the same Bootstrap `btn-success` the
   back-office uses for "Add a New API Access Record". */
.btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; }
.btn-success:hover, .btn-success:focus { color: #fff; background-color: #449d44; border-color: #398439; }
.btn-new-block { display: block; width: 100%; margin: 0; }
.col-md-4 a:hover, .col-md-6 a:hover { text-decoration: none; }
/* Keep the button from becoming a native link-drag target: holding then nudging
   otherwise starts a drag that visually shifts the button and cancels the click. */
.btn, .col-md-4 > a, a > .btn {
	user-select: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
}

/* Comment quote + publication-permission block ---------------------------- */
.permission { padding: 10px 15px; color: #000f41; font-size: 14px; }
.permission p { margin: 0 0 8px 0; }
.permission input { vertical-align: middle; }

/* Scorecard measures header row ------------------------------------------- */
#responseHeader { color: #000f41; padding-top: 10px; font-size: 12px; font-weight: bold; float: left; }
.disagree, .agree {
	color: #0a1848;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 1.2em;
	display: block;
}
.disagree { padding-left: 3px; }
.numbers {
	color: #0a1848;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	padding: 0 3px;
	display: block;
}

/* Per-question detail table (disabled 7-point radio scale) ---------------- */
.commentDetail { border: 1px #eeeeee solid; }
.commentDetail td { font-size: 16px; padding: 2px 3px; }
.qablue { color: #000f41; }
.question { cursor: help; }
span.lowScore { color: red; }
/* Fill the 130px score column exactly (the column is fixed by .scoreGrid), so
   the seven radios never overflow their padded cell. */
.scoreScale { width: 100%; }
.scoreScale td { text-align: center; padding: 0; }

/* The measures-header table and the per-question table are two separate tables
   that must share one grid so the 1..7 score column lines up under its header.
   Fixed layout + an identical <colgroup> (20·150·40·230·83·47 = 570) on both
   tables locks the columns; the score cell is exactly 130px (83+47) to match
   the inner .scoreScale table. The `table.` / `> tbody >` selectors are chosen
   to out-specify the generic `.table` rules (100% width, 8px cell padding) the
   detail table also carries for its archives-listing look. */
table.scoreGrid { table-layout: fixed; width: 570px; max-width: 570px; border-collapse: collapse; }
/* Uniform column geometry across both tables so the score column aligns; only
   the horizontal padding matters here — vertical spacing is per-table below. */
table.scoreGrid > tbody > tr > td {
	padding-left: 3px;
	padding-right: 3px;
	font-size: 16px;
	vertical-align: middle;
	line-height: 1.2;
}
/* Per-question rows keep the comfortable row height + hairline divider. */
.commentDetail table.scoreGrid > tbody > tr > td {
	padding-top: 8px;
	padding-bottom: 8px;
	border-top: 1px solid #ddd;
}
.commentDetail table.scoreGrid > tbody > tr:first-child > td { border-top: 0; }

/* Stylized hover — the legacy bootstrap `.tooltip-inner` navy box, reproduced
   as a pure-CSS tooltip (no JS). The score cell and the theme (question) cell
   share the same design; `data-tip` carries the text. */
.score, .question { position: relative; }
.score[data-tip]:hover::after,
.question[data-tip]:hover::after {
	content: attr(data-tip);
	position: absolute;
	left: 0;
	bottom: 100%;
	margin-bottom: 6px;
	width: max-content;
	max-width: 220px;
	white-space: normal;
	text-align: left;
	background-color: #000f41;
	color: #fff;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.3;
	padding: 8px 10px;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	z-index: 20;
	pointer-events: none;
}

/* Archives listing table — faithful to Bootstrap 3.4.1 .table.table-striped.
   The legacy header row is a bare <tr><th> inside the auto tbody, so the
   nth-of-type(odd) stripe lands on the header too (its alternate-colour look). */
.table {
	width: 100%;
	max-width: 100%;
	margin-bottom: 20px;
	border-collapse: collapse;
	color: #333;
	/* Bootstrap's base type — 14px keeps the rows compact (Tailwind otherwise
	   leaves the browser-default 16px, which reads too large/loose). */
	font-size: 14px;
}
/* Row links: Bootstrap link blue (Tailwind preflight resets <a> to inherit,
   which would otherwise render them black). */
.table a { color: #337ab7; }
.table a:hover { color: #23527c; text-decoration: underline; }
.table > tbody > tr > td,
.table > tbody > tr > th {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
	border-top: 1px solid #ddd;
}
.table > tbody > tr:first-child > td,
.table > tbody > tr:first-child > th { border-top: 0; }
.table > tbody > tr > th { text-align: left; font-weight: bold; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f9f9f9; }
.table-hover > tbody > tr:hover { background-color: #f5f5f5; }

/* Archives comment-status glyphs (the legacy glyphicon font is not shipped).
   Star = comment received, awaiting publication; share = published. */
.pubStar { color: #5bc0de; font-size: 20px; line-height: 1; }
.pubShare { color: #008000; display: inline-block; line-height: 1; vertical-align: middle; }
.pubShare svg { display: block; }

/* Restore report-body typography that Tailwind's preflight strips (ID-scoped
   so it wins over the low-specificity base reset regardless of load order). */
#content .main-col h3 { font-size: 18px; font-weight: bold; color: #000033; margin: 10px 0; }
#content .main-col p { font-size: 14px; margin: 0 0 8px 0; }
#content .main-col ul { list-style: disc outside; }
#content .main-col b, #content .main-col strong { font-weight: bold; }
#content .main-col i { font-style: italic; }