body,p,a, h1,h2,h3,h4,h5 { font-family: "Open Sans",Arial, Helvetica, Sans-serif; background:none; }
p, .leadtext p { color:#445; font-family: "Open Sans",Arial, Helvetica, Sans-serif; }
h1 { margin-top: 1em; border: none; padding-left: 0px; margin-left: 0px; font-size:1.6em; }
h3 { font-size: 1.4em; color: #69f; margin-top: 1.3em; margin-bottom: 1em;  }

.pagearea { overflow: hidden; background:#F9F6E6; }
.displayarea { width: 100%; max-width: unset; overflow: hidden; display:flex; flex-wrap:wrap;  }
.headingarea { width: 100%; max-width: unset; height: 200px; height:auto; }
.headermain { width: 100%; xmax-width: 960px; }
.headerright { width: 100%; xmax-width: 960px; margin-top: 0px; background:#dadada; height:auto; min-height:2em; }
.rightcolumn { width: 240px; background:#fff; padding-right:0.5em; }
.righttop { width: 180px; }
.rightbase { width: 180px; }
.rightmain { width: 100%; padding-top:6em; }
.mainarea { width: 100%; xmax-width: 780px; xmax-width:720px; padding-top: 1em; padding-left: 5em; padding-right: 5em; padding-right:3em; padding-bottom: 4em; border-right: 0px solid #ddd; min-height: 800px; line-height:1.6; flex:1; padding-left:2em; }
.mainarea .leftpic { margin-right: 1em; margin-left: 0em; }
.mainarea .rightpic { margin-left: 1em; margin-right: 0em; }
.mainarea .leftpic, .mainarea .rightpic, .mainarea .linepic { margin-bottom:1em; margin-top:0; box-shadow:2px 2px 10px rgba(0,0,0,0.1); max-width:90%; }
.mainarea img { max-width:100%; }
.mainarea h1 .leftpic, .mainarea h1 .rightpic { margin:0em; margin-top:0; box-shadow:none; }
.mainform { padding-top:1em; }
.botlinkarea { width: 100%; xmax-width: 960px; font-size: 0.8em}
.botlinkarea .botbuttonholder { margin-right: 2em; }

.rightcolumn .infotop { width: 100%; font-size: smaller; }
.rightcolumn .infofirst { width: 100%; }
.rightcolumn .infofirst:hover { background:#DEEEFF; }
.rightcolumn .infoMARKfirst { width: 100%; }
.rightcolumn .orgmenu { margin-top: 1em; }
.rightcolumn .orgitem { width: 100%; border: none; }
.rightcolumn .Notananttop { width: 100%; }
.rightcolumn .Nitem { width: 100%; }
.rightcolumn .Ntext { margin-bottom: 0.25em; text-align:right }
.rightcolumn .Ntext label { display:block; margin-bottom:4px; }
.rightcolumn .Ntext input { margin-left:4px; }

.topicsXwrapperTB { clear:both;  border: 0px solid #ccf;  margin-top: 0em;  padding-top: 0em; padding-bottom: 1em; }
.topicsXwrapperTB H5 { margin: 0px; margin-top: 0.5em; padding: 0px; padding-left: 0em; xfont-size: 1em; font-weight: normal;}
.topicsXwrapperTB .topicsXitem { xmargin-left: 2em; margin-top: 1em; color: #669; }
.topicsXwrapperTB .topicsXitem p { font-size: 1em; }
.topicsXwrapperTB .topicsXitem li { font-size: 1em; }

.topicsXbg1, .topicsXbg2 { padding-left:0; padding-right:0; }

.listwrapperTB .listbg1 { border: none; padding-right: 1em; }
.listwrapperTB .listbg2 { border: none; }
.listwrapperTB H5 { margin-bottom: 0.5em; }

.listwrapperLR .row1 td { padding-top:1.4em; }

.Notanantbox { font-size: smaller; }
.rightcolumn .calendar { padding-top: 2em; }
.rightcolumn .calendar h4 {  font-size: smaller; }
.rightcolumn .calendar .calx, .rightcolumn .calendar .cal, .rightcolumn .calendar .calm { font-size: 70%; }

.mainarea .calendar .calx, .mainarea .calendar .cal, .mainarea .calendar .calm { font-size: 0.9em; }

.history .histtitle { margin-top: 2em; font-size: smaller; padding-left: 2px; }
.headerright .infoa, .headerright .infoMARKa { font-size: 1.1em; }

.mainform li { }

.infomenu ul { margin:0; }

.headermain { position:relative; }
.headermain h1 {
  position: absolute;
  top: 54px;
  font-size: 1em;
  text-align: center;
  text-align: left;
  left: 79px;
  font-weight: normal;
  float:none;
  color:#fff;
  padding:0;
}
h5 { margin-bottom:0.5em; }

@media (max-width: 960px) {
	.mainarea { max-width: 960px; }
	.rightcolumn { width: 100%; }
	.righttop { width: 100%; }
	.rightbase { width: 100%; }
	.rightmain { width: 100%; }
	.rightmain .infomenu ul { display:flex; flex-wrap: wrap; justify-content:space-between; }
	.rightmain .infofirst { width: 30%; }
	.mainarea .leftpic, .mainarea .rightpic { max-width: 50%; }
}
@media (max-width:640px) {
	.mainarea { padding-left:1em; padding-right:1em; max-width:100%; }
	.mainarea .leftpic, .mainarea .rightpic { max-width:50%; }
	.mainarea h1 .rightpic, .mainarea h1 .leftpic { display:none; }
	}
	
.mainarea .frm_comment {	
margin-top:2em;	
padding-top:2em;
border-top:1px solid #ddd;
xbox-shadow:1px 1px 10px rgba(0,0,0,0.1); 
}
.frm_comment textarea { width:95%; }


/*Cxoice specific*/
.headermain .linepic { margin-top:1em; margin-left:1em; }
.headingarea .infomenu ul { background:#364b8a; xborder-bottom: 1px solid #e6b222; }
.headerright .infofirst { border-right-color: #E6B222; }

.mainarea .infomenu .infotop { display:flex; flex-wrap:wrap; justify-content:space-between; font-size:1em; padding:0; margin-top:2em; margin-bottom:1em; }
.mainarea .infomenu .infowrapper { 
		width: 30%; 
		min-height:100px; 
		box-shadow:2px 2px 4px #888; 
		overflow:hidden; 
		margin-top:1em;
		padding-top:1em;
		font-size:0.8em;
		}
.mainarea .infomenu li { margin-left:0; background:none; padding:1em; padding-top:0em; }
.infomenu b { font-weight:normal; }

.mainarea .subsXwrapperTB { display:flex; flex-wrap:wrap; justify-content:space-between; }
.mainarea .subsXwrapperTB h5 { float: none; }
.mainarea .subsXbg1, .mainarea .subsXbg2 { 
		max-width: 30%; 
		width:14em;
		min-height:100px; 
		box-shadow:2px 2px 4px #888; 
		overflow:hidden; 
		margin-top:1em;
		padding-top:1em;
		font-size:0.8em;
		text-align:center;
		}
.topstatus { font-size:1em; margin-top:1em; margin-bottom:1em; }
#ntnt_list_reports_style .multiform .tabbertab {
justify-content:space-between;
font-size:0.85em;
padding-left:1em;
min-height:5em;
display:grid;
grid-template-columns:35% 1fr 1fr 1fr 1fr 1fr;
gap:1em;
padding-top:1em;
}
#ntnt_list_reports_style .multiform .tabbertabhide {
display:none;
}
.surveyhints {
margin-left:4em;
color:#4761cf;
padding-top:0.5em;
}
.surveyhints li {
margin-bottom:0.5em;
}



/* SD Profile mods Dec22 */
.rightcolumn .Nitem {
width:32px;
border-radius:8px;
box-shadow:2px 2px 4px #8884;
margin-right:8px;
}

.Nlink {
width:100%;
display:block;
}
.Nlink span {
display:none;
}
.Notanantbox ul {
display:flex;
justify-content:right;
}
.N_profile {
  background: URL(p_b_on_grey.gif) -2px no-repeat;
}
.N_messages {
  background: URL(mn_b_on_grey.gif) -2px no-repeat;
}
.N_messages_new {
  background: URL(mn_b_on_grey.gif) -2px no-repeat;
}
.N_links {
  background: URL(d_showmore_23.gif) 3px no-repeat;
  display:none;
}
.N_logoff {
  background: URL(log_b_on_grey.gif) -2px no-repeat;
}
.infofirst, .infoMARKfirst {
background:#fffdf4;
}
.caltable {
background:#fffdf4;
}

/* Cxoice mods */
.rightmain { padding-top:2em; }
.mainform { padding-top:0; }
.mainform .infotop, .mainform .subsiteXtop {
margin-top:3em;
padding-top:1em;
border-top:1px solid #eef;
}
.mainform .infotop a, .mainform .infoa1, .mainform .subsXa {
color: #4c6ecf;
}
.headingarea .infomenu {
margin-bottom:0.3em;
}

.headingarea .infomenu ul {
justify-content:right;
font-size: 0.85em;
background: #fffdf4;
}
.headerright .infofirst {
border:0px;
}
.headingarea .infofirst, .headingarea .infoMARKfirst {
width:unset;
padding:0.5em 2em;
}
.headingarea .infoa {
color: #3653b7;
}
h1 { color:#3c57a2; }

/* Layout experiment Nov23 with left column
.leftmain {
padding:0.5em;
margin-top:5em;
}
.leftcolumn {
width:200px;
}
.mainarea {
padding-right:0;
}
h1,.bread {
margin-left:-40px;
}
*/

/* SPA layout test */
a { color:#444; }
h3 { color:#4966ce; }
.toolbar { margin-top:1em; }
.mainarea { max-width:100%; xmin-width:100%; flex:unset; }
.runset { max-width:960px; }
.-SPA_area { xwidth:70%; xmax-width: calc(100vw - 25em); xwidth:40em; }

.-SPA_area .SPA_status { xborder:1px solid #eee; xpadding:1em; min-height:20em; color:#59688e; color:#333; }
.-SPA_area .SPA_status h1 { margin-top:0; margin-bottom:1em; font-size:1.3em; }
.-SPA_area .SPA_status h5 { margin-top:0; }
.-SPA_area .SPA_status h3 { xmargin-bottom:3em; color:#a44d19; margin-bottom:0; }

.-SPA_area .runset { min-height:10em; }
.SPA_app .toolbar img { width:6em; vertical-align:middle; }
.SPA_app .toolbar { width:180px; min-width: 130px; xdisplay:flex; flex-wrap:wrap; align-content:start; grid-template-columns: repeat(auto-fill,90px); padding-top:2em; padding-bottom:1em; }
.SPA_app { xdisplay:flex; }
.SPA_app .SPAon { outline:1px solid #f00; }
.SPA_app .displayarea, .SPA_status, .SPA_app .runset { xbackground:#f3f6f9; }
.-SPA_area .mainarea, .-SPA_area .mainform { padding:0.5em; font-size:0.9em; }
.-SPA_area .mainarea .mainform { font-size:1em; padding:0; }
.SPA_app .toolbar { xwidth:300px; margin-top:0; width:100%; }
.SPA_app .toolitem { xborder:1px solid #eee; padding:1em; width:100%; max-width:unset; xtext-align:left; margin-bottom:0.2em; xbox-shadow:1px 1px 2px 1px #cccc; padding:4px; margin-bottom:8px; xborder-radius:3px; }
.SPA_app .toolitem i { xdisplay:unset; font-size:1.1em; font-style:normal; xpadding-left:1em; color:#4d6ec4; padding-top:0.5em; }
.xSPA_app .toolitem i::after { content: "⟩"; float:right; font-size:1.4em; }
.headermain { background: #4665cf; max-height:70px;}
.headermain h1 { top:25px; left:154px; }

.SPA_app .formline { margin-bottom:0.5em; padding:1em 1em 1em 1em; border-radius:0.5em; background:#fff; box-shadow:0px 0px 0px 1px #eee; max-width:unset; }
.SPA_app .formleft { float:none; width:unset; color:#a5b4db; padding-bottom:0.3em; color:#4377bb; }
.SPA_app .formright { float:none; width:unset; margin-left:4px; }
.SPA_app .formleftta { color:#a5b4db; padding-bottom:0.3em; color:#4377bb; }
.SPA_app .formtextarea { padding-top:0;  }
.SPA_app .mainform input[type="text"], .SPA_app .mainform input[type="password"] { width: calc(100% - 2.9em); }
.SPA_app .formright .onoff { float:right; margin-right:2em; margin-top:-1.2em; }
.-SPA_area .tabberlive .tabbertab { padding-top:0.5em; padding-bottom:0.5em; background:#eee; }
.-SPA_area .toolbar { display:none; }
.-SPA_area .docUpload { margin-bottom:1em; max-width:32em; }
.-SPA_area p { color:#59688e; color:#324a8c; }
.-SPA_area .warning { color: #ff7a05; }
.-SPA_area .-toggle { font-size:0.9em; }
.-SPA_area #closebutton { display:none; }
.-SPA_area .sgqadmin h2 { margin-top:0; }
.-SPA_area .sgqadmin h3 { display:none; }
.-SPA_area .optionlist { display:flex; flex-wrap:wrap; padding:1em; }
.-SPA_area .optionlist li {
width: 9em;
padding: 1em;
border: 1px solid #eee;
margin: 0.5em;
min-height: 8em;
box-shadow: 1px 1px 2px #8888;
border-radius: 0.5em;
text-align: center;
background:#fff;
}
.-SPA_area .formsubmit { justify-content:right; margin-top:3em; margin-right:3em; }
.-SPA_area .multiform .formsubmit { margin-top:0; margin-right:0; }
.SPA_app .multiform .formright { font-size:1.1em; }
.SPA_app .multiform .formright .onoff {margin:0; }
.SPA_app #ntnt_list_interviewers_style .multiform .tabbertab { background:#fff; }
#ntnt_list_reports_style .multiform .mainform p {padding:0; }
#ntnt_list_reports_style .multiform .mainform p:nth-child(1) {font-size:larger; color:#1c428a; }
#ntnt_list_reports_style .multiform .mainform { margin-bottom: 1em; }
#ntnt_list_reports_style .tabberlive .tabbertab { padding-top:0; }
#ntnt_list_reports_style .tabbertab .multiform .tabbertab { padding-top:1em; }

#statuschart { max-width:720px; }

#ntnt_list_surveys_style .ultable .ulrow { width:18em; }
.srvy_btns { max-width:600px; }
.srvybtn_chart #statuschart svg { max-width:calc(600px - 2em); border:none; border-radius:3px; margin-top:1em; padding:1em; box-shadow:0px 0px 0px 1px #ccc; }
.btn_status .topstatus { max-width:600px; padding:1em; background:#fffbed; }