/* --------------------------------------------*/
/* FORM LAYOUT */
/* --------------------------------------------*/
form.n6form {
    position: relative;
}
.form_col, .form_col_report {
    float:left;
}
.form_col_850 {
    float:left;
    width:850px;
}
.form_col_450 {
    float:left;
    width:450px;
}
.form_col_350 {
    float:left;
    width:350px;
}
.form_col_300 {
    float:left;
    width:350px;
}
#frm_fields p {
    clear:both    
}
.form_btn {
    clear:both;
    margin-top:10px;
    min-height:26px;
}
.form_btn_r {
    float:right;
}    
.form_btn_l {
    float:left;
}
.form_btn_middle {
    text-align:center;
}
.chb_group_box {
    background-color: var(--purple-tint-1);
    border:solid 1px;
    border-color: var(--purple-tint-3);
    width:220px;
    padding:5px 8px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    display:inline-block;
    margin-bottom:5px;
}
.group_row_container {
    display:table-row;
}
.n6form_row_divide {
    border-bottom:solid 1px #a698bf;
}
.form_divider, .form_divider_no_tbl {
    position:absolute;
    margin-top:12px;
    margin-left:20px;
    line-height: 12px;
    font-size:14px;
    font-weight:bold;
    color: var(--purple-tint-7);
}
.form_divider_height {
    height:28px;
    width:1px;
}
.form_divider_no_tbl {
    margin-left:0;
    padding-left:5px;
    position:relative;
    border-bottom:solid 1px #a698bf;
}
.n6fieldgroup {
    display:inline-block;
    margin:10px;
    background-color:var(--purple-tint-1);
    border:solid 1px;
    border-color: var(--purple-tint-3);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.n6fieldgroup_header {
    background-color: var(--purple-tint-3);
    color:#555;
    padding:4px;
}

.n6fieldgroup_inner {
    padding:10px;
}

/* Responsive two-up row: a pair of .n6fieldgroup sit side by side, then
   stack one above the other. They wrap automatically once the pair can no
   longer fit two-up (so a narrow container stacks them on its own), and the
   1024px media query below guarantees a full-width stack at small sizes. */
.n6fieldgroup_row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.n6fieldgroup_row > .n6fieldgroup {
    flex: 1 1 45%;
    /* keep .n6fieldgroup's default margin:10px so outer edges stay inset
       10px (lining up with full-width groups) and the pair has 20px between */
}
@media (max-width: 1024px) {
    .n6fieldgroup_row > .n6fieldgroup {
        flex-basis: 100%;
    }
}


/* --------------------------------------------*/
/* FORM TABLE CSS */
/* --------------------------------------------*/
/* <table> equiv */
.n6form_fields {
    display:table;
    border-collapse:collapse;
    border-spacing:0;
}

/* <tr> equiv */
.n6form_row, .n6form_row_divide {
    display:table-row;
}

/* <td> left equiv */
.n6form_label, .n6form_label_ro, .auto-width-inline {
    display:table-cell;
    text-align:right;
    vertical-align:top;
    padding:8px 0 0 20px;
    min-width:100px;
}

/* <td> right equiv */
.n6form_input, .n6form_input_ro {
    display:table-cell;
    padding:3px 0 1px;
}

.auto-width-inline {
    min-width:auto;
}

/* <td> no specific type */
.n6form_cell_divide_l, .n6form_cell_divide_r {
    display:table-cell;
}

.n6form_label_ro {
    padding:4px 0 6px 20px;
}

.n6form_input_ro {
    padding:4px 0 6px;
}

/* Deprecated */
.n6form_fields p {
    display:table-row;
}

/* --------------------------------------------*/
/* FORM INPUT ELEMENTS */
/* --------------------------------------------*/
input[type='text'], input[type='password'],
select, textarea {
    font-family: Verdana, Arial,Segoe UI,Tahoma,sans-serif;
    border:1px solid #999;
}
.n6form_row.disabled select {
    border:1px solid #ccc;
    color:#999;
}
input[type='text'].highlight {
    background-color: var(--purple-tint-1);
}
.n6form_fields input[type='text'], .n6form_fields input[type='password'],
.n6form_fields select, .n6form_fields textarea {
    font-family: Segoe UI, Verdana, Tahoma, Arial, sans-serif;
    font-size:13px;
    border:1px solid #999;
    background-color:#fefefe;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    width:230px;
    padding:4px 5px 6px 1px;
    text-align:left;
}

.n6form_fields textarea.fixed_width {
    font-family:'Courier New';
}

.n6form_fields input[type='text'].w300 {
    width:300px;
}

.n6form_fields input[type='text'].w150 {
    width:150px;
}

/* Keep the required-asterisk and its input on one line so a narrow column
   can't break the input onto a line of its own below the asterisk. */
.n6form_input.nowrap {
    white-space:nowrap;
}

.n6form_fields input[type='radio'], .n6form_fields input[type='checkbox'] {
    vertical-align: top;
}

.n6form_fields input[type='file'] {
    margin-top:4px;
}

.n6form_fields input[type='radio'].in_group_box, .n6form_fields input[type='checkbox'].in_group_box {
    display:inline;
    margin-bottom:2px;
}

.n6form_fields input[readonly], .n6form_fields input[type='text'][disabled], .n6form_fields input[type='password'][disabled], .n6form_fields select[disabled] {
    background-color:#eee;
    color:#666
}
.n6form_fields input[type='text'][disabled], .n6form_fields input[type='password'][disabled], .n6form_fields select[disabled] {
    border-color:#ccc;
}

.n6form_fields select {
    width:238px;
}

.n6form_fields select.w60 {
    width:60px;
    padding:1px;
}

.n6form_fields div.rd_only, .ro_header div.rd_only {
    display:inline;
    font-style:italic;
    color:#666;
}

.ro_header div.rd_only {
    font-size:15px;
}

.three_col_filter input[type='text'], .three_col_filter input[type='password'],
.three_col_filter textarea {
    width:160px;
}
.three_col_filter select {
    width:166px;
}

/* --------------------------------------------*/
/* FORM LABELS */
/* --------------------------------------------*/
/* <td> equiv */
.n6form_fields label, .n6form_fields label.in_group_box, .n6form_fields label.w130,
.n6form_fields label.w100, .n6form_fields label.w60 {
    white-space:nowrap;
    padding:8px 0 0;
    text-align:right;
}

.n6form_row.disabled label {
    color:#999;
}

.form_col label, .form_col_report label {
    min-width:140px;
    vertical-align:baseline;
}

.n6form_fields label.label_ro {
    padding:0;
}

.ro_header label.label_ro {
    font-size:15px;
    font-weight:bold;
    color:#444;
}

.ro_header div.n6form_label_ro {
    padding-left:0;
    text-align:left;
}

.n6form_fields label.w130 {
    min-width:130px;
}

.n6form_fields label.w100 {
    min-width:100px;
}

.n6form_fields label.w60 {
    min-width:100px;
}

.n6form_fields label.in_group_box {
    display:inline;
    text-align:left;
    min-width:100px;
    padding:6px;
}

label.sub {
    min-width:100px;
}
label.no_cursor {
    cursor:default;
}
.n6form_fields label:after {
    content:':';
}

.n6form_fields label.in_group_box:after {
    content:none;
}

.n6form_fields label.error:after {
    content:none;
}

.n6form_fields label.no-colon:after {
    content:none;
}

.n6form_fields label.error, 
.n6form_fields_table label.error,
#rpt_cust_report label.error, label.captcha_error {
    display:inline-block;
    border:1px solid;
    border-color: var(--purple-tint-5);
    background-color: var(--purple-tint-3);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    color: var(--purple-tint-7);
    white-space:normal;
    text-align:left;
    display:inline-block;
    padding:2px;
    font-size:10px;
    height:auto;
    vertical-align:middle;
    margin:0 0 6px 3px;
}
/* validation err labels on this form are show under fields */
#rpt_cust_report label.error {
    margin-top:3px;
}

img.asterix, img.asterix_ro {
    width:6px;
    height:15px;
    vertical-align:top;
    margin-top:5px;
}

img.asterix_ro {
    margin-top:3px;
}

div.grp_inner_row {
    padding:5px;
}

/* To hide the asterix in the custom reports */
#rpt_cust_report img.asterix,
#rpt_cust_report img.asterix {
    display:none;
}

/* --------------------------------------------*/
/* FORM BUTTONS */
/* --------------------------------------------*/
.n6form input[type="button"],
.n6form input[type="submit"],
.n6form button,
.hha-btn, .hha-btn-default {
    font-family: Segoe UI, Verdana, Tahoma, Arial, sans-serif;
    background: url(../images/btn-overlay.png) repeat-x;
    background-color: var(--orange-tint-5);
    background-size:100% 100%;
    display: inline-block; 
    padding: 3px 9px 4px; 
    color: #fff;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px;
    border-radius:3px;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(0,0,0,0.25);
    position: relative;
    cursor: pointer;
    border:0 none;
    margin:0;
    font-size: 13px; 
    font-weight: bold; 
    white-space:nowrap;
}
.hha-btn-default {
    background-color: #6d6d6d;
}

.n6form input[type="button"][disabled], .n6form input[type="submit"][disabled], .n6form button[disabled], .hha-btn[disabled] {
    background-color: var(--orange-tint-4);
    color:#e4e4e4;
    cursor:default;
}

.n6form input[type="button"].large, .n6form input[type="submit"].large, .n6form button.large, .hha-btn.large {
    padding: 7px 11px 8px; 
    font-size: 14px; 
}
.n6form input[type="button"].xlarge, .n6form input[type="submit"].xlarge, .n6form button.xlarge, .hha-btn.xlarge {
    padding: 9px 15px 11px; 
    font-size: 16px; 
}
.n6form input[type="button"].small, .n6form input[type="submit"].small, .n6form button.small, .hha-btn.small {
    padding: 3px 9px 4px; 
    font-size: 11px; 
}

.n6form input[type="button"].xsmall, .n6form input[type="submit"].xsmall, .n6form button.xsmall, .hha-btn.xsmall {
    padding: 2px 5px 3px; 
    font-size: 11px; 
}

.n6form input[type="button"]:not([disabled]):hover, .n6form input[type="submit"]:not([disabled]):hover, .n6form button:not([disabled]):hover, .hha-btn:not([disabled]):hover {
    background-color:  var(--orange-tint-6);
}

input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner, .hha-btn::-moz-focus-inner { 
    padding:0 !important; 
    border:0 none !important;
}

.n6form input.list_save_btn {
    margin-top:3px;
    display:none;
}

.field-help-text {
    display: inline-block;
    font-size: 10px;
    vertical-align: top;
    width:350px;
    margin-left:10px;
}