/*
v2.css
Version: 1.13
*/
body { font-size:11px; font-family:Arial, Sans-Serif }

h1, h2, h3, h4 { color:#699; clear:both }
.normalfont { font-size:11px; font-family:Arial, Sans-Serif; font-style:normal }
.fixedwidth { font-family:Courier, Courier New, monospace }

img { border:0px }
img.icon { width:16px; height:16px }

a, a:link, a:visited, a:active, a:hover { color:#00f }

.js, .js a, .js a:link, .js a:visited, .js a:active, .js a:hover { color:#099 !important; font-weight:bold }

.offsitelink, .offsitelink a, .offsitelink a:link, .offsitelink a:visited, .offsitelink a:active, .offsitelink a:hover { color:#a5a !important }

.sectionHeader { font-weight:bold; color:#000}
.error { font-weight:bold; color:#f00 }
.success { font-weight:bold; color:#0a0 }
.weird { font-weight:bold; color:#fa6 }
.warning { font-style:italic; color:#888 }
.extreme-warning {clear: both; color: red; font-weight: bold; font-size: 24px!important; text-align: center;}
#back-to-menu-div {margin-bottom: 12px;}
.emptyerrorbox { background-color:#faa !important }

.unclickedlink, .unclickedlink img { background-color:#ff0 }

/* in case you get something embedded in a tag of class="error", but you want to put/ajax in things which AREN'T errored; put a class="unerror" inside a class="error" and it should undo the red/bold of error. */
.unerror, .unerror div, .unerror td { color:#000; font-weight:normal }
.unerror .formlabel { font-weight:bold }

/*CLIENT SEARCH*/
.searchlabel{font-weight:bold;color:#000000;font-size:12pt !important;}
.searchhinthead{font-weight:bold;color:#699;}
.searchhinttext{color:#000000;}
.searchborder{border: 2px solid #699;}
TD.hits{font-weight:bold;color:#007CCF;}	

.HelpText {position:relative;margin-top:10px;margin-bottom:10px;margin-left:2px;text-align:left;font-size:8pt;text-decoration:none;cursor:arrow;font-weight:bold;}
.HelpTitle {position:relative;text-align:bottom;padding:5px;font-size:12pt;background-color:#C4D8D8}
.HelpBox { width:250px; position:relative; float:left; margin-left:20px; border:1px solid gray;background-color:#E2ECEC}
.instructions { display:block; clear:both; font-size:8pt; padding:5px; }

/* GENERIC */
.left {text-align: left;}
.center {text-align: center;}
.right {text-align: right;}
.nowrap {white-space: nowrap;}
.btn_small {font-size: 9px; width: 4em; position: relative; top: -1px; margin-right: 1px;}
.width_auto {width: auto !important;}

/* USER MAINTENANCE */
.u_column {float:left;width:45%;margin-left:20px;}
.u_sectionColor {background-color:#E2ECEC;}
TH.u_leftcol_1 {text-align:right;width:30%;}
TH.u_rightcol_1 {text-align:right;width:25%;}
TH.u_rightcol_view {text-align:right;width:50%;}
TH.u_rightcol_module {text-align:right;width:50%;}
.u_head{color:#699; font-weight:bold; font-size:14pt;text-align:left;margin-top:10px;margin-bottom:10px;}
.u_subhead{color:#699; font-weight:bold; font-size:12pt;text-align:left;margin-top:10px;margin-bottom:10px;}

/* END USER MAINTENANCE*/







/*REPORT RELATED css */
TD.totalLine {border-top: 1px solid Black; border-bottom: 1px solid Black; background-color:#CCCCCC;}
TR.rptGrayHeader {background:#E0E0E0; font-weight:bold;}
.tdhead {color:#699; font-weight:bold;}


.reportMenuTitle, .reportMenuTitleTop {color:#699; font-weight:bold; font-size:20px; position:relative; }
.reportMenuTitle { padding:20px 0 0 0; }
.reportMenuColumn { display:inline-block; width:30%; float:left; padding-left:2%; margin-top:20px; }
.reportMenuSection { color:#699; }
.reportMenuSection div, .reportMenuSection li { margin-top:9px }
.reportMenuSection ul { padding-left:10px }


.under21 { background-color:#66FFCC !important;}
.youthRowColor, .youthRowColor td { background-color:#99FFCC !important;}
DIV.youthColorBox{float:left;width:16px;height:16px;background-color:#66FFCC !important;margin-right:5px;}
.rptContent { } /* float:left; padding-left:20px;  */
.rptTitle {color:#699; font-weight:bold; font-size:12pt;text-align:center;}
.rptSubTitle {color:#699; font-weight:bold; font-size:10pt;text-align:center;}
TD.rptTeam {color:#000000;font-size:10pt; font-weight:bold;background:#FFFF66; padding:.5em !important;}
.rptTeam {color:#000000;font-size:10pt; font-weight:bold;}
.rptNothingMsg {font-weight:bold; font-size:10pt;text-align:center;}
.rptFixError {font-weight:bold;font-size:10pt;text-align:center;color:#f00;margin-top:1em}
.noshow {display:none;}
.onlyOnPrint {display:none;}
.pre {white-space: pre-wrap;}

.ccltriagerow { background-color:#fdb }

/* new reports 7/2020 */

.reportTableRecordCount {margin: 1em 0 2px;}
table.reportTable {font-size: 11px; border-collapse: collapse;}
.reportTable th, .reportTable td {border: 0; padding: 5px !important;}
.reportTable thead {background-color: #bbfbfb;}
.reportTable tbody tr, .reportTable .row1 tr, .reportTable .row1 th, .reportTable .row1 td {background-color: #fff;}
.reportTable tbody tr:nth-child(even) {background-color: #cff;}
.reportTable tbody tr.nobgcolor {background-color: #fff;}

/* multiline text in reports 6/2024 */
#ResultsTable {border-collapse: collapse;}
#ResultsTable td {vertical-align: top; padding: 2px 3px;}
#ResultsTable th {text-align: left;}
#ResultsTable th.center {text-align: center;}
#ResultsTable th.right {text-align: right;}
.pre {white-space: pre-wrap; max-width: 25rem; line-height: 2.5ex;}
.collapsed-text {max-height: 10ex; overflow: hidden; cursor: zoom-in; /*position: relative; top: -1px; margin-bottom: -2px;*/ white-space: pre-line;}
.showCollapsed .collapsed-text {max-height: 100%; overflow: visible; cursor: zoom-out;}
/* next line is ignored, mostly, but makes full height on div below work; see https://stackoverflow.com/questions/3215553/make-a-div-fill-an-entire-table-cell */
.tableWithMultiLineText {height: 1px;}
/*.tableWithMultiLineText th {text-align: left;}*/
.tableWithMultiLineText td {vertical-align: top; border-top: 1px solid #ccf;}
.noBorder td {border-top: 0 !important;}
.tableWithMultiLineText tr, .tableWithMultiLineText td.pre, .tableWithMultiLineText td.pre > div {height: 100%;}
/* div is for explanatory callout, th is for column header see Encounters.cfm */
div.multilineTextMarker::before, th.multilineTextMarker::after {content: "*";color: red;}

/*END OF REPORT RELATED css */


/* NEWS HEADER RELATED css -- in siteNews, if newsheadingClassNumber is GT 0, we put that newsheading(number) on the headline's class. */
.newsheading1, .newsheading1 a	{ color:#f00 !important }
.newsheading2, .newsheading2 a	{ color:#00f !important }
.newsheading3, .newsheading3 a	{ color:#669 !important }



.jscalendar, .jsclock, .quickfind { z-index:20 !important }

/*	navigation/high-level:	*/
.headermenu { font-family:Verdant }
.headermenu .menuthirds { text-align:center }

.headermenu .pagetitle { font-weight:bold; font-size:larger }
.headermenu .branded { color:#699; font-weight:bold }
.headermenu .js { font-weight:normal }
.headermenu .logout { font-weight:bold; margin-bottom:12px }

.actionlink { background-color:#ffc } /* for links that act like buttons -- for example, links to Finalize or Unfinalize an encounter  */

.navsection {  }

.menuquarters { float:left; width:25% }
.menuhalf { float:left; width:50% }
.menuthirds { float:left; width:33% }

.moduletabs { }
.moduletabs div { float:left; border:3px ridge gray; padding:2px; margin:2px }
.highlightlink { background-color:#ff9; font-weight:bold }
.highlightlink2 { background-color:#afa; font-weight:bold }
.highlightlink3 { background-color:#aff; font-weight:bold; position:relative }

.moduletabsubmenu { position:absolute; left:0px; top:14px; z-index:20; border:0px !important  }
.moduletabsubmenu div { background-color:#ffe; font-weight:normal; margin: -1px 0 0; padding: 4px 6px 6px;; float:none; border:1px solid gray; white-space:nowrap }
.moduletabs .searchlink { float:right; border:0px; padding:0px; margint:0px }

.highlighturgent, div.highlighturgent { background-color:#f00 }
div.highlighturgent a { color:#fff }
.mediumurgent, div.mediumurgent { background-color:#fc8 !important }
div.mediumurgent a { color:#333 }
.noturgent, div.noturgent { background-color:#ccc }
div.noturgent a { color:#333 }

/* for a unified display of "last updated by/last updated" data, which they want near the top on any viewing-1-row-of-data page */
.lastupdatedblock { text-align:right }
.lastupdatedrow div { display:inline }


/* for Encounter and Triage's "Summary" pages */
.summarytables th { width:30%; text-align:left }
.summarytables th, .summarytables td { vertical-align:top; border:1px solid gray; padding:2px }


.nuclearlink { float:right }
.nuclearlink a { border:3px double black; margin:2px; padding:2px; background-color:#afa; color:#808 }

.newline { clear:both; position:relative }
.justclear { clear:both } /* justclear is here because for whatever reason, <hr class="newline"/>-s were showing up ABOVE dhtml position absolute things like calendars; see LegalIssue form for an example. */


.pagebreakafter { page-break-after: always }


.simplepagecontent {}
.simpleindented {}

.youarehere { background-color:#ff8 }

/*	content formatting:	*/
.formarea h3 { padding-top:10px }
.formrow { clear:both; padding-top:10px; border-top:1px solid #fff }
.firstrow { border-top:0px; padding-top:0px }
.formlabel { float:left; width:20%; font-weight:bold; padding-top:2px; text-align:right }
.formcontent { float:left; padding-left:20px; width:75% }
	/* NESTED formrows within other formrows are going to be weird anyway, so we might as well NOT make them do the 20% / 75% alignment that the top-level formrows have (to make them look uniform); instead let's just have their labels be as wide as they are by nature of their text: */
	.formrow .formrow .formlabel, .formrow .formrow .formcontent { width:auto }
	.formrow .formrow .formlabel { text-align:left }
	/* here's another option: */
	.nestedformrowsindent .formrow { margin-left:25px }

/* checkboxes and radios and their labels, for label that surrounds the input field. see srchCriteriaForm.cfm:289 */
.radio-checkbox-set input {position: relative; top: 2px; margin: 0 1px 0 0;}
.radio-checkbox-set label {display: inline-block; margin: -1px 1em 0 0;}
label.disabled {color: #999;}
	
.triage {background-color:lightgrey;margin-top:25px;padding-bottom:25px;border:1px black solid}

.youthhighlight { background-color:#6FC }

.asabove { color:#777 }

.radiodivs { display:inline }
.radiodivs div { float:left; margin-right:20px; margin-bottom:3px }
/* however, if we have an error div mixed in amongst RadioDivs, we should have it start a new line (this happens a number of times in the Encounter, where we have sections like, 'Need thing X? No / Yes / Describe:' where the 'Describe' was kept inside the radiodivs tag.  Then if they pick 'Yes' but don't enter 'Describe', we'll give them an error saying, 'this field is required because of how you answered Need thing X') */
.radiodivs .error { clear:both }
/* also for any of these classes within radiodivs, we don't want the extra margin/wrap/float stuff going on */
.radiodivs .error, .radiodivs .required, .radiodivs .requiredif, .radiodivs .requiredfinal { margin-right:0px; margin-bottom:0px; float:none }

/* this class should help with the following problem:  ICON-s are 16px tall, Text is smaller; when Icons are put in a radiodivs sub-div-tag set, the Text-without-Icons sections ride a lot higher than the sections with icons.  If you put this class on the sections without Icons, they should look similar */
.nexttoicon { margin-top:6px }


.longlabel { font-weight:normal }
.note { font-size:smaller; font-weight:normal }
table.hoverstripe tr:hover {background-color: #f8f8f8;}

/* encounter section/subsection stuff: */
.sectionguide li { font-size:12px; margin-top:6px; margin-bottom:2px; clear:both }
.sectionguide li .radiodivs { clear:both; display:block; margin-left:40px; }
.sectionguide li div, .sectionguide li div div { font-size:11px } /* margin-top:2px; margin-bottom:2px; clear:none; float:left; margin-right:20px */

.subsectionwrapper { margin-top:10px; margin-bottom:15px; border:3px groove #699 }
.subsectionwrapperwhitebg { margin-top:10px; margin-bottom:15px; border:1px solid #699; background-color:#fff }

.viewonly .formrow { }
.viewonly .formlabel { padding-top:0px }
.viewonly .formcontent { }

/* the "quicksaving" class is used to make fields LOOK like they're kind-of sort-of disabled to discourage the user from editing things after they've (likely) already been grabbed and submitted to the quicksave ajax;
	but it doesn't ACTUALLY disable them, which is good in case the quicksave blows up (because many browsers keep disabled fields from being submitted in forms...that means if the quicksave fails in such a way that it never UN-disables the field, when you go to save it's going to think ALL those disabled fields are emptystring, thus wipe out that data). */
.quicksaving input, .quicksaving select, .quicksaving textarea { background-color:#ccc; color:#333 }

.divsparagraphed div { margin-top:10px; margin-bottom:10px }

.halfpage { width:48%; padding-right:4px; float:left }

/* these are the style of the markers for fields that have various levels of required-ness: */
.required { color:#f00; display:inline; font-size:13px }
.requiredif { font-weight:bold; color:#b08; display:inline }
.requiredfinal { font-weight:bold; color:#099; display:inline }

.divshowhide { border:1px solid #000; background-color:#eee; clear:both }

/* this is the formatting for the "add a new [module row to this multi-edit form]" */
.jsaddrowlink { font-size:larger }

.floatingdiv { background-color:#fff; border:3px double gray; position:absolute; z-index:20 }
.divclosebutton { float:right; color:#fff; background-color:#f00; padding:1px; margin:1px }
.divclosebutton a { color:#fff; text-decoration:none }

.bigtextarea { width:85%; height:100px; max-width: 45em; }
.mediumtextarea { width:80%; height:70px }
.smalltextarea { width:70%; height:35px }
/* if these are NESTED within 2 layers of .formcontent tag, that means formcontent is no longer "80% of the screen", so these will need pixel-widths (as problematic as that may be (because it enforces a "minimum" width below which the thing doesn't fit on screen), it's better than having them be tiny): */
.formcontent .formcontent .bigtextarea,
	.formcontent .formcontent .mediumtextarea,
	.formcontent .formcontent .smalltextarea { width:450px }


/*	table stuff	*/
.tdcenter { text-align:center }
.row1 tr, .row1 th, .row1 td, .rowodd { background-color:#cff }
/* if we have nested row0-s within row1-s, we make row0-s white */
.row1 .row0 tr, .row1 .row0 th, .row1 .row0 td, .roweven { background-color:#fff }
.palerow1 tr, .palerow1 th, .palerow1 td { background-color:#dff }
.trdivider, .trdivider th, .trdivider td { border-top:1px solid gray } 
.trdivider h4 { margin:2px } 
.trbigdivider, .trbigdivider th, .trbigdivider td { border-top:3px double black } 
.trbigdivider h3 { margin-top:20px }


.topalignall, .topalignall td, .topalignall th { vertical-align:top }

.nopadbeforelists ul, .nopadbeforelists ol { margin-top:0px; padding-top:0px }

.moduleview tbody th, .moduleview tbody td { vertical-align:top }
.moduleview tbody td table,
	.moduleview tbody td table th,
	.moduleview tbody td table td { margin:0px; border:1px solid gray }

.encounterwhatnext { border-top:3px double #bbc; color:#006 }
.encounterwhatnext .formlabel { }
.encounterwhatnext .formcontent div div { font-weight:bold }


.mentalstatusexam { font-weight:bold }
.mentalstatusexam div { margin-bottom:12px }


/* billing stuff */
.billingsiloed { background-color:#ffb; display:inline; padding:1px; border:1px solid gray }

/* javascript stuff */
.choosefieldhistorylink { display:inline }
.choosefieldhistory { width:60%; padding:3px; background-color:#fff }
.choosefieldhistory h3 { margin:2px; padding:1px }
.choosefieldhistoryvalue { background-color:#ffc; font-weight:bold; border:1px solid #999; padding:2px }
.choosefieldhistoryvalue a { text-align:center }
.hide { display:none }

.ajaxloadbox { background-color:#dfd; margin:0px; padding:0px; }
.ajaxloadboxfailed { background-color:#fdd; margin:0px; padding:0px }
.ajaxloadicon { width:64px; height:36px }
.ajaxloadicon img { width:64px; height:36px }

/* rough draft stuff for the 'main menu' page: */
.bigmenusection { width:48%; float:left; position:relative; margin-bottom:5px }
.bigmenusection.thirds { width:33%;}
.bigmenusection h3 { margin-bottom:2px; padding-bottom:0px }
.securesection, .securesection a, .securesection a:link, .securesection a:visited, .securesection a:active, .securesection a:hover  { color:#905 }
.securesection.pcre, .securesection.pcre a, .securesection.pcre a:link, .securesection.pcre a:visited, .securesection.pcre a:active, .securesection a:hover  { color:#55c }
.bigmenu { width:90%; border:1px solid #999; margin:0px; padding:8px; font-size:larger; position:relative }
.bigmenu div { margin:10px }
.bigmenu div.spaceabove { margin-top: 20px;}
.bigmenu .longlist div { margin:3px }
.bigmenu .subsection div { font-weight:bold; margin:2px }
.bigmenu .subsection ul { margin-top:2px; margin-bottom:2px; padding-left:20px }
.bigmenu .subsection ul li { font-style:italic; color:gray; margin-bottom:4px; font-size:11px }
.bigmenu .subsection ul li a { font-style:normal; font-size:12px }
.menusectionalertlink { padding:2px; margin:0px; background-color:#f00; color:#fff }
.menusectionalertlink a { color:#fff }


@media print{
/*hide when printing*/
.tdhead {color:#000000;font-weight:bold;}
.reportMenuTitle {color:#000000;font-weight:bold; font-size:12pt;}
.rptTitle {color:#000000;font-weight:bold;font-size:12pt;text-align:center;}
.rptSubTitle {color:#000000;font-weight:bold;font-size:10pt;text-align:center;}
.rptTeam {color:#000000;font-weight:bold;}
.noprint{display:none;}
.onlyOnPrint {display:block;}
.printFullWidth {width: 100% !important;}
}

#clientAlertsBanner {font-size: 1.5em; font-weight: bold; color: red; margin: 10px 0 0; text-align: center;}

.gdq_table, .gdq_table th, .gdq_table tr, .gdq_table td { vertical-align:top; border:1px solid #999; border-collapse: collapse; }
.gdq_table th { vertical-align:middle; }


/* for /v2/js/modal.js; also needs custom css for the dialog itself  */
.modal
{
	z-index: 9999; position: fixed; left: 0; right: 0; top: 25%; margin-left: auto; margin-right: auto; padding: 12px 10px 10px;
	background: #fff; border: 1px solid #666;
	/* REQUIRES A FIXED WIDTH, CUSTOMIZE FOR EACH DIALOG */
}
#modal-overlay
{
	position: fixed; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0;
	background: #666; opacity: 0.3; cursor: not-allowed; z-index: 9998;
}
.modal .buttons {float: right; margin: 5px 0;}
.modal .buttons input, .modal .buttons button {font-size: 11px; width: 5em;}
.modal #closeBtn {position: absolute; top: 0; right: 3px; font-size: 18px; font-weight: bold; cursor: pointer; color: #666;}
.modal #pleaseWait
{
	position: absolute; display: inline-block; top: 35%; left: 30%; right: 30%;
    padding: 1em; text-align: center;
    background: #fffff6; border: 1px solid #7a7; color: #696; z-index: 1;
}
.modal-alert {margin-top: 8px;}
.modal-alert-icon {float: left;}
.modal-alert-body {margin-left: 3em;}

/* for form fields with a table of instructions; for an example see part_demographicsform.cfm:414 */
.fieldInstructionsRow {padding-top: 5px;}
.fieldInstructionsRow table {max-width: 900px; margin-top: -3px; padding-top: 4px;}
.fieldInstructionsRow tr {vertical-align: top;}
.fieldInstructionsRow caption {text-align: left; white-space: nowrap;}
.fieldInstructionsRow caption img {margin-left: 6px;}
.fieldInstructionsRow th {text-align: left; white-space: nowrap; padding-left: 0; padding-right: 4px;}