/* Good looking forms!
 * http://www.webcredible.co.uk/user-friendly-resources/css/css-forms.shtml
 *
 * Good stuff in general
 * http://maestric.com/doc/php/codeigniter_i18n
 *
 * Aligning form labels and form inputs
 * http://www.alistapart.com/articles/practicalcss/
 *
 * ??Label vs Span??
 *
 * Multiple columns
 * http://blogs.sitepoint.com/style-web-forms-css-4/
 * http://stackoverflow.com/questions/1775532/css-grid-system-for-forms-multi-column <-- awesome!
 * http://blog.decaf.de/2007/04/approach-to-flexible-multicolumn-forms/
 *
 *
 * A link to other form examples:
 * http://stackoverflow.com/questions/799552/css-multi-column-forms-in-html-asp-net
 * http://www.alistapart.com/articles/prettyaccessibleforms
 *
 * Mask input (for use with dates, phone numbers, patient ID, hospital ID):
 * http://digitalbush.com/projects/masked-input-plugin/ <-- generally right, but be CAREFUL.there's some weird input behavior (sometimes cant type, very confusing to user). And the underlines look awful.
 *
 * CSS for multi-line labels:
 * http://stackoverflow.com/questions/911644/how-can-i-make-multi-line-vertically-and-horizontally-aligned-labels-for-radio-b
 *
 * Tables:
 * http://coding.smashingmagazine.com/2008/08/13/top-10-css-table-designs/
 * */

body {
background-color: #fff;
margin: 40px;
font-family: Lucida Grande, Verdana, Sans-serif;
font-size: 14px;
color: #4F5155;
}

span.alert_died {
color: #FF0000;
}

span.alert_abandoned {
color: #0000FF;
}

span.validation_errors {
color: #FF0000;
}

div.validation_errors{
color: #FF0000;
}

.form-field {
    clear: both;
    display: block;
    position: relative;
    padding-bottom:8px;
}

.form-field label.if_other_describe {
    padding-left: 20px;
    /*margin-bottom:16px;*/
}

.form-field label {
    float: left;
    width: 400px;
    padding-right: 20px;
    /*font-weight: bold;*/
    /*margin-bottom:16px;*/
}

ol.symptom_list {
  padding-left: 50px;
}

ol.symptom_list > * .form-field label {
    display: inline-block;
    width: 350px;
}

.form-field .single-line {
     display: inline-block;
     width: 200px;
}

.form-field label.textbox:after, .checkbox:after {
    /* adds line connecting question and answer */
    height:1px;
    background:#ddd;
    /*float: right;*/
    width:100%;
    display:block;
    content:"";
    margin:1px auto;
}


td.regime_view {
	width: 200px;
}

h2.section_heading{
	/*color: #FF0000;*/
	padding-top: 8px;
}

/* From  http://www.jankoatwarpspeed.com/css-message-boxes-for-different-message-types/ */
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('../images/info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('../images/success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('../images/warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('../images/error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('../images/validation.png');
}

a {
color: #003399;ln
background-color: transparent;
font-weight: normal;
}

h1 {
color: #444;
background-color: transparent;
border-bottom: 1px solid #D0D0D0;
font-size: 16px;
font-weight: bold;
margin: 24px 0 2px 0;
padding: 5px 0 6px 0;
}

code {
font-family: Monaco, Verdana, Sans-serif;
font-size: 12px;
background-color: #f9f9f9;
border: 1px solid #D0D0D0;
color: #002166;
display: block;
margin: 14px 0 14px 0;
padding: 12px 10px 12px 10px;
}

label.view
{
font-weight: bold;
}

/*
label.add
{
width: 18em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
}
*/

.users_legend table {
  width: 70%;
  background-color:#FFF5EE;
}
.users_legend td {
  padding: 10px;
}

div.caris_auth {
  padding: 20px;
}

div.caris_auth table {
  /*width: 50%;*/
}
div.caris_auth table td {
  padding-bottom: 10px;
}

div.caris_auth input[type="submit"] {
  color: #000;
  background: #ffa20f;
  border: 2px outset #d7b9c9
}

span.view
{
font-weight: bold;
}

div.flexible_form_container {
  /*background-color:#FFF5EE;*/
  padding: 10px;
}

table.flexible_form
{
  /*width: 100%;*/
  background-color:#FFF5EE;
  padding: 10px;
}

.flexible_form th
{
  text-align: left;
  padding: 5px;
}

.flexible_form td
{
    padding: 5px;
}

table.hivhaiti_users
{
  width: 100%;
}

.hivhaiti_users th
{
  text-align: left;
}

/* New formats for tables on Immunization and Followup pages */
table.immunization
{
width: 100%;
}

table.overview
{
}

td.overview
{
	padding-right: 20px;
}

th.zebra
{
background-color:#ffa20f;
color:white;
}

#td_chw{
  background-color:#ffa20f;
  color:white;
  text-align: center;
 }

tr.zebra_even
{
}

tr.zebra_odd
{
background-color:#FFF5EE;
}

td.left_label
{
font-weight: bold;
padding:2px;
width:240px;
}

td.right_content
{
padding:5px;
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}

fieldset
{
border: 1px solid #781351;
padding: .5em;
}

legend
{
color: #fff;
background: #ffa20c;
border: 1px solid #781351;
padding: 2px 6px
}

div.flags
{
color: red;
font-style: italic;
}

span.resolved_flag
{
	color: gray;
	font-style: italic;
}

/* Tabs CSS from John */
ul#tabs { list-style-type: none; margin: 30px 0 0 0; padding: 0 0 0.3em 0; }
ul#tabs li { display: inline; }
ul#tabs li a { color: #42454a; background-color: #dedbde; border: 1px solid #c9c3ba; border-bottom: none; padding: 0.3em; text-decoration: none; }
ul#tabs li a:hover { background-color: #f1f0ee; }
ul#tabs li a.selected { color: #000; background-color: #f1f0ee; font-weight: bold; padding: 0.7em 0.3em 0.38em 0.3em; }
div.tabContent { border: 1px solid #c9c3ba; padding: 1.5em; background-color: #f1f0ee; }
div.tabContent.hide { display: none; }
div.indented { padding-left: 25pt; padding-right: 50pt; }

/* Growth Chart (d3js) CSS */
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
  stroke: gray;
  stroke-width: 1.5px;
}

.pLine {
  fill: none;
  stroke: black;
  stroke-width: 1.5px;
}

.area {
  fill: steelblue;
  opacity: 0.2;
}


.dot {
  fill: black;
  stroke: black;
  stroke-width: 1.5px;
}

.dotSelected {
  fill: rgb(237,126,30);
  stroke: rgb(237,126,30);
  stroke-width: 1.5px;
}

.rect-to-axis {
  /*fill: rgba(0,0,0,.05);*/
  fill: rgba(0,0,0,0);
  stroke: rgba(20,20,20, .8);
}

.backgroundRect {
  fill: rgba(255,255,255,1);
  stroke: rgba(20,20,20, .8);
}

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

text {
    font-family: sans-serif;
    font-size: 11px;
}

.tooltipTextBackground {
  fill:rgba(237,126,30,0.5);
  /*stroke: rgba(20,20,20, .8);*/
}

/* Scrolling in autocomplete */
.ui-autocomplete {
  max-height: 60%;
  overflow-y: auto;
  /* prevent horizontal scrollbar */
  overflow-x: hidden;
}

/* IE 6 doesn't support max-height
 * we use height instead, but this forces the menu to always be this tall
 */
* html .ui-autocomplete {
  height: 100px;
}
/*for print data in tabe*/
.datagrid table {
    border-collapse: collapse;
    text-align: left;
    position: absolute;
}
.datagrid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    border: 1px solid #A65B1A;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
    padding: 3px 10px;
    min-width: 10px;
}
.datagrid table thead th {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #F0DDD5), color-stop(1, #FFF5ED));
    background: -moz-linear-gradient(center top, #F0DDD5 5%, #FFF5ED 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#F0DDD5', endColorstr='#FFF5ED');
    background-color: #F0DDD5;
    color: #7F4614;
    font-size: 15px;
    font-weight: bold;
    border-left: 1px solid #BF691E;
}
.datagrid table thead th:first-child {
    border: none;
}
.datagrid table tbody td {
    color: #7F4614;
    border-left: 1px solid #D9CFB8;
    font-size: 12px;
    font-weight: normal;
}
.datagrid table tbody .alt td {
    background: #F0E5CC;
    color: #7F4614;
}
.datagrid table tbody td:first-child {
    border-left: none;
}
.datagrid table tbody tr:last-child td {
    border-bottom: none;
}
.datagrid table tfoot td div {
    border-top: 1px solid #A65B1A;
    background: #F0E5CC;
}
.datagrid table tfoot td {
    padding: 0;
    font-size: 12px
}
.datagrid table tfoot td div {
    padding: 2px;
}
.datagrid table tfoot td ul {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right;
}
.datagrid table tfoot li {
    display: inline;
}
.datagrid table tfoot li a {
    text-decoration: none;
    display: inline-block;
    padding: 2px 8px;
    margin: 1px;
    color: #FFFFFF;
    border: 1px solid #A65B1A;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #A65B1A), color-stop(1, #7F4614));
    background: -moz-linear-gradient(center top, #A65B1A 5%, #7F4614 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#A65B1A', endColorstr='#7F4614');
    background-color: #A65B1A;
}
.datagrid table tfoot ul.active,
.datagrid table tfoot ul a:hover {
    text-decoration: none;
    border-color: #7F4614;
    color: #FFFFFF;
    background: none;
    background-color: #A65B1A;
}
div.dhtmlx_window_active,
div.dhx_modal_cover_dv {
    position: fixed !important;
}

.link{
  position:fixed;
  left:10px;
  bottom:10px;
}
.visible-on-printing{
  display: none;
}
@media screen {
    p {
        font-family: verdana, sans-serif;
        font-size: 17px;
    }
}

@media print {
    .visible-on-printing{
      display: block;
    }

    p {
        font-family: georgia, serif;
        font-size: 14px;
        color: blue;
    }
    tr,td {
        border-style: solid;
        border-width: 1px;
    }

    tfoot {
      display: none;
    }
}

/*From bootstrap*/
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left;
}
.col-xs-12 {
  width: 100%;
}
.col-xs-11 {
  width: 91.66666667%;
}
.col-xs-10 {
  width: 83.33333333%;
}
.col-xs-9 {
  width: 75%;
}
.col-xs-8 {
  width: 66.66666667%;
}
.col-xs-7 {
  width: 58.33333333%;
}
.col-xs-6 {
  width: 50%;
}
.col-xs-5 {
  width: 41.66666667%;
}
.col-xs-4 {
  width: 33.33333333%;
}
.col-xs-3 {
  width: 25%;
}
.col-xs-2 {
  width: 16.66666667%;
}
.col-xs-1 {
  width: 8.33333333%;
}
.col-xs-pull-12 {
  right: 100%;
}
.col-xs-pull-11 {
  right: 91.66666667%;
}
.col-xs-pull-10 {
  right: 83.33333333%;
}
.col-xs-pull-9 {
  right: 75%;
}
.col-xs-pull-8 {
  right: 66.66666667%;
}
.col-xs-pull-7 {
  right: 58.33333333%;
}
.col-xs-pull-6 {
  right: 50%;
}
.col-xs-pull-5 {
  right: 41.66666667%;
}
.col-xs-pull-4 {
  right: 33.33333333%;
}
.col-xs-pull-3 {
  right: 25%;
}
.col-xs-pull-2 {
  right: 16.66666667%;
}
.col-xs-pull-1 {
  right: 8.33333333%;
}
.col-xs-pull-0 {
  right: auto;
}
.col-xs-push-12 {
  left: 100%;
}
.col-xs-push-11 {
  left: 91.66666667%;
}
.col-xs-push-10 {
  left: 83.33333333%;
}
.col-xs-push-9 {
  left: 75%;
}
.col-xs-push-8 {
  left: 66.66666667%;
}
.col-xs-push-7 {
  left: 58.33333333%;
}
.col-xs-push-6 {
  left: 50%;
}
.col-xs-push-5 {
  left: 41.66666667%;
}
.col-xs-push-4 {
  left: 33.33333333%;
}
.col-xs-push-3 {
  left: 25%;
}
.col-xs-push-2 {
  left: 16.66666667%;
}
.col-xs-push-1 {
  left: 8.33333333%;
}
.col-xs-push-0 {
  left: auto;
}
.col-xs-offset-12 {
  margin-left: 100%;
}
.col-xs-offset-11 {
  margin-left: 91.66666667%;
}
.col-xs-offset-10 {
  margin-left: 83.33333333%;
}
.col-xs-offset-9 {
  margin-left: 75%;
}
.col-xs-offset-8 {
  margin-left: 66.66666667%;
}
.col-xs-offset-7 {
  margin-left: 58.33333333%;
}
.col-xs-offset-6 {
  margin-left: 50%;
}
.col-xs-offset-5 {
  margin-left: 41.66666667%;
}
.col-xs-offset-4 {
  margin-left: 33.33333333%;
}
.col-xs-offset-3 {
  margin-left: 25%;
}
.col-xs-offset-2 {
  margin-left: 16.66666667%;
}
.col-xs-offset-1 {
  margin-left: 8.33333333%;
}
.col-xs-offset-0 {
  margin-left: 0;
}