/* mainstyle.css
 * for the Two Feathers Client Tracking System
*/

/*Some general preferences*/
body {
	font-family: arial, sans-serif;
}

select {
	border-radius: 4px;
	font-size: 1rem;
	padding: .3rem .4rem .3rem .4rem;
	border: 1px solid #cacaca;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
	background-origin: content-box;
	background-position: right -1rem center;
	background-repeat: no-repeat;
	background-size: 9px 6px;
	padding-right: 1.5rem;
}

input {
	border-radius: 4px;
	font-size: 1rem;
	padding: .3rem .4rem .3rem .4rem;
	border: 1px solid #cacaca;
}

/* set and unset by the validation scripts */
.input_needs_fixing{
	border: 2px solid red;
/*	background: #eeeedd;
 *	Not using b/c background removes the down-pointer
 *	background-image of SELECT	*/
}


.disabledControl, .disabledControl:hover{
	background: #ccc !important; 
	opacity: 60% !important;
	color: #666 !important;
	border: #666 solid 1px !important;
}


textarea {
	border-radius: 4px;
	font-size: 1rem;
	padding: .3rem .4rem .3rem .4rem;
	border: 1px solid #cacaca;
	font-family: inherit;
	font-size: inherit;
}

.formfieldsitem {
	padding: 4px 0px 4px 0px;
}

.formfields .formfieldsitem:nth-child(odd) {
	background-color: #eeeeff;
}


/*Login page only*/
#indexnojs {
	width: 60%;
	margin-left: auto;
	margin-right: auto;
	color: brown;
}

#indexyesjs {
	display:none;
	margin-top:25px;
}

.credential {
	clear:both;
}
.credentiallabel {
	float: left;
	padding: 8px;
	width: 80px;
	color: #696969;
}

#loginholder {
	margin-left:66px;
}
/*For the underline that appears at the bottom of the main title bar*/
.titlebar {
	width: 93%;
	overflow: hidden;
	border-bottom-width: 3px;
	border-bottom-color: #2F4F4F;
	border-bottom-style: solid;
	margin-bottom: 10px;
}

.titlebarlogo {
	display:block;
	float:left;
}

.titlebarother {
	display:flex;
	justify-content: space-between;
	padding-left:35px;
	align-items: center;
	margin-top: 23px;
}

.titlebartitles {
}

.titlebarcruciallinks {
}

.bodycontainer {
/*	width: 92%;	*/
	width: 1230px;
	margin-right: auto;
	margin-left:auto;
	padding: 4px;
}

/*the bodycontainer for menu pages. Needs extra spacing
 * since there isn't a recordnametag.*/
.menubody {
	margin-top: 10px;
}

/* "sitetitle" in the standard header*/
.sitetitle {
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 20px;
	color: teal;
	letter-spacing: 0px;
	padding: 0px 0px 0px 0px;
}

/* "sitesubtitle" in the standard header*/
.sitesubtitle {
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 17px;
	color: teal;
	letter-spacing: 0px;
	padding: 0px 0px 0px 0px;
}

/* Standard (?) title bar - between breadcrumbs and real content*/
.pagetitlebar1 {
	display: flex;
	justify-content: space-between;
}

/* "pagetitle" is the style used for the page titles (between breadcrumbs and the rest of the page)*/
.pagetitle {
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 20px;
	color: teal;
	letter-spacing: 0px;
	padding: 0px 0px 0px 0px;
	margin-top: auto;
	margin-bottom: auto;
}

/* If the page has very distinct subsections following the main section,
 * "pagetitlenewsection" gives additional styling to a title for the 
 * following subsections. */
.pagetitlenewsection {
	font-style: italic;
	margin: 25px 0 10px 0;
}


/*.recordnametag gives "at-a-glance" details to identify a data record*/
.recordnametag {
	margin-right: 12%;
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 18px;
	color: #21589d;
}

.urgentAlert {
	color:red;
	font-weight:bold;
}

.menucontents {
	display: flex;
	justify-content: flex-start;
}


#menumainadminbuttonsection{
	margin-left: 150px;
}


.menubuttonscolumn {
	display:flex;
	justify-content: space-between;
	flex-direction: column;
	margin-left: 30px;
}

.menubutton1, .raiseMessageButton {
	height: 32px;
	margin-bottom: 20px;
	font-family: sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #555;
	-webkit-border-radius: 5;  -moz-border-radius: 5;  border-radius: 5px;
	-webkit-box-shadow: 3px 3px 5px #AAA ; -moz-box-shadow: 3px 3px 5px #AAA ; box-shadow: 3px 3px 5px #AAA;
}

.menubutton1:hover, .raiseMessageButton:hover {
	opacity: 60%;
}

.raiseMessageButton{
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/*
.searchbutton1 {
	height: 32px;
	font-family: sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #555;
	-webkit-border-radius: 5;  -moz-border-radius: 5;  border-radius: 5px;
	-webkit-box-shadow: 3px 3px 5px #AAA ; -moz-box-shadow: 3px 3px 5px #AAA ; box-shadow: 3px 3px 5px #AAA;
}
*/

/*
.searchbutton1:hover {
	opacity: 60%;
}
*/


.btnsmallwidth {
		width: 120px;
}

.btnmedwidth {
		width: 240px;
}

.standardbutton {
	min-width: 120px;
	width: auto;
/*	height: 28px;	*/
	padding: 6px 5px;
	font-family: sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: #555;
	-webkit-border-radius: 5;  -moz-border-radius: 5;  border-radius: 5px;
	-webkit-box-shadow: 3px 3px 5px #AAA ; -moz-box-shadow: 3px 3px 5px #AAA ; box-shadow: 3px 3px 5px #AAA;
}

.standardbutton:hover {
	opacity:60%;
}

.newGoalButtonHolder {
	display:flex;
	justify-content: space-evenly;
	width:725px;
	margin: 20px 0;
}

/*For "Next/Previous" and "Extra option buttons" on 
 * tabbed forms. (May change these - they don't look so great.)*/
.formbutton {
  width: 140px;
  height: 30px;
  border-radius: 5px;
  font-family:arial;
  font-size:16px;
  border: solid .5px;
}

/*The forward, back and finish buttons for tabbing through a form.*/
.fbbutton {
  background: #8FC6BE;
  color:#0019A6;
  border-color: #0019A6;
  margin-left: 40px;
}

.fbbutton:hover {
	background: #C2F0E9;
}	

/*Arrow and stop-symbol for fbuttons.*/
.fbarrow {
	display: inline-block;
	border: solid #0019A6;
	border-width: 0 2px 2px 0;
	padding: 5px;
}

.fbstopsign {
	display: inline-block;
	border: solid #0019A6;
	border-width: 0 2.9px 0 2.9px;
	padding: 7px 0 7px 1px;
	margin-left: 7px;
	transform: translateY(1px);
}

.fbarrowright {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  margin-left: 9px;
}

.fbarrowleft {
  transform: rotate(135deg)  translateY(-1px);
  -webkit-transform: rotate(135deg)  translateY(-1px);
  margin-right: 9px;
}

/*The extra action buttons just underneath a form.*/
.extraformbuttons {
	display: flex;
}

/* .extraformbuttonscaption for the extra row of controls at the very bottom of 
 * a data entry page*/
.extraformbuttonscaption {
	color: saddlebrown;
	font-weight: bold;
	font-family: helvetica, verdana, arial, sans-serif;
	text-align: left;
	padding: 10px;
	margin-top: 7px;
}


.extrabutton {
  background: #FBC642;
  color:#7E1B00;
  border-color: #7E1B00;
  margin: 10px;
}

.extrabutton:hover {
	background: #FDE095;
}	

/* "titlebarcruciallinks" holds the links in the header.*/
.titlebarcruciallinks a {
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	color: #5F9EA0;
	text-align: right;
	text-decoration: none;
}

.titlebarcruciallinks a:link, .titlebarcruciallinks a:visited, .titlebarcruciallinks a:active {
	color: #000000;
}

.titlebarcruciallinks a:hover {
	color: #5F9EA0;
}

.indexpagewjs a {
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	color: #5F9EA0;
	text-decoration: none;
}

.indexpagewjs a:link, .indexpagewjs a:visited, .indexpagewjs a:active {
	color: #000000;
}

.indexpagewjs a:hover {
	color: #5F9EA0;
}


/* "breadcrumbs" is a widget between the header and the body content.*/
.breadcrumbs 
 {
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	color: navy;
	text-align: left;
}

.breadcrumbs a {
	text-decoration: none;
}

.breadcrumbs a:link, .breadcrumbs a:visited, .breadcrumbs a:active {
	color: #000000;
}

.breadcrumbs a:hover {
	color: #00F;
}


/* "formsectiontitle" used for the title of a section on a data entry form*/
/*
.formsectiontitle
 {
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	color: #000000;
	text-decoration: underline;
 }
*/

.formfieldsitem {
	margin-top:10px;
	display:flex;
}

.formfieldsiteminset {
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
}

.formfieldsiteminset .formfieldQ {
	padding: 0px 0px 0px 0px;
	margin-top: 0px;
	margin-left: 15px;
}

.numholder, .formfieldQ {
	padding: .3rem .4rem .3rem .4rem;
}

.formfieldaftertext  {
	font-size: 14px;
	padding: .5rem .8rem .3rem .4rem;
}

.numholder {
	text-align: right;
	margin-right: 5px;
	min-width:20px;
	color: #696969;
}

.formfieldQA {
	display: flex;
}

.formfieldQ {
	margin-right: 10px;
	color: #696969;
}

#people_page_1 .formfieldQ {
	width: 170px;
}

#people_page_1 .captionfielditem .formfieldQ {
    width: inherit;
}

#people_page_3 .formfieldQ  {
	width: 170px;
}


#case_page_1 .formfieldQ {
	width: 203px;
}

#group_page_1 .formfieldQ {
	width: 120px;
}


.formfieldAHolder {
	padding-right: 8px;
}

.formfieldA input[type='checkbox'] {
	margin-top: 9px;
}

.formfieldaftertext {
	font-style: italic;
	color: brown;
	flex-shrink: 8;
}
	

/* "menunotes" used for explanation on a menu page*/
/* "keynotes" used for explanation on a "key data" page*/
/* "formnotes" used for explanation on a data entry form*/
.menunotes, .keynotes, .formnotes
 {
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	color: #800000;
 }

/* "menulabel" used for field labels on a menu page*/
/* "keylabel" used for field labels on a "key data" page*/
/* "formlabel" used for field labels on a data entry form*/
/* "reportOption" used for items on reports menu that modify aspects of report */
.menulabel, .keylabel, .formlabel, .reportOption {
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	color: #696969;
 }

/* "formrodata" used to display read-only data on a data entry form*/
.formrodata
 {
	font-family: helvetica, arial, sans-serif;
	color: blue;
 }

 
/* "pageedcomment" is used for "editorial comments" on a standard data page*/
.pageedcomment {
	font-family: helvetica, arial, sans-serif;
	font-size: 14px;
	color: #A52A2A;
}
 
/* "resulttablehead" is used for the header row of a "results table" in response to a search. */
.resulttablehead {
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	color: navy;
	text-align: left;
	font-weight:bold;
	padding-left: 7px;
	padding-right: 7px;
}


/* "messagebox" is an "alert" or "error" message presented to the user, usually on a page by itself.*/
.messagebox {
	background-color: #F5DEB3;
	color: #800000;
	border-style: solid;
	border-width: 1px;
	border-color: #800000;
	padding: 6px;
	margin: 0 auto 25px auto;
	width: 400px;
}
.messageboxbuttonholder {
	margin: 0 auto;
}

/* "tabheader" and "tabbody" used to create tabbed forms
*/

.tabbody {
	border: 1px solid black;
	clear: both;
	padding: 0 1em;
	text-align: left;
}

.tabheader {
	font-family: helvetica, arial, sans-serif;
}

.tabheader ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
}
    
.tabheader li {
	float: left;
	border: 1px solid #bbbbbb;
	border-bottom-width: 0;
	margin: 0;
	background: #eeeeee;
}

.tabheader .selected {
	border-color: black;
	position: relative;
	top: 1px;
	background: white;
	color: black;
	font-weight: bold;
}

.tabheader input{
	background-color: transparent;
	color: #666666;
	border: 0px;
	/*the two lines below deal with IE's annoying "super-padding"*/
	width: auto;
	overflow: visible;
	padding-left: 7px;
	padding-right: 7px;
}


.tabheader input:hover {
	background-color: white;
	color: #006;
}

.tabheader .selected input {
	font-weight: bold;
	color: black;	
}

.forwardbackbuttons {
	text-align:right;
	margin: 20px 0 5px 0;
}


/* "footer" is the footer at the very bottom of the page.*/
.footer 
 {
	font-family: helvetica, arial, sans-serif;
	font-size: 10px;
	color: #666666;
	text-align: left;
	border-style: solid;
	border-width: 2px 0px 0px 0px;
	border-color: #9999CC;
	display: inline-block;
	margin-top: 30px;
}

.footer a, .footer:link a, .footer:visited a, .footer:active a {
	text-decoration: none;
	color: #666666;
}

.footer:hover a {
	color: #5F9EA0;
}


.bgcolor1 {
	background: #848dcf;
}
.bgcolor2 {
	background: #b67ac4;
}
.bgcolor3 {
	background: #81b8a9;
}
.bgcolor4 {
	background: #a5c070;
}
.bgcolor5 {
	background: #fcd479;
}
.bgcolor6 {
	background: #d3d2d2;
}
.bgcolor7 {
	background: teal;
}


/* Formatting for "Treatment plan" list on Case form*/

.goalsTableHolder {
	height:320px;
	overflow:auto;
}


.allGoalsTable {
	border-collapse:collapse;
	text-align:left;
}

.allGoalsTable tbody tr:nth-child(odd) table{
    background-color: #FAEBD7;
}

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

.goalsTableHolder .allGoalsTable tbody tr table:hover {
	cursor: pointer;
	color:red;
}

.allGoalsTable th {
	padding-left:5px;
}

.allGoalsTable .col1 {
	width:100px;
}

.allGoalsTable .col2 {
	width:360px;
}

.allGoalsTable .col3 {
	width:100px;
}

.allGoalsTable .col4 {
	width:160px;
}

.allGoalsTable thead tr td{
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
}

.goalTable {
	border-collapse:collapse;
	border: 1px solid #bbb;
}

.goalTable tbody tr:nth-child(1) td{
	font-weight:bold;
}

.goalTable tbody td{
	padding: 5px;
}

/* Styling reports menu */
#reportList {
	padding: 8px;
	border: gray solid 1px;
	max-width: 600px;
}

#reportOptions {
	margin-bottom:20px;
}

.reportOption {
	margin-top:20px;
}

.reportOption input, .reportOption select{
	font-size:12px;
}

.reports_list_item {
	margin-bottom: 5px;
}