/* Tracker Usr Interface Elements: buttons, labels inputs, selects etc */

  /* buttons...
      can apply to buttons, links, input-submit etc etc */
  .btn {
    display:inline-block;
    width:auto;
    min-width:4em;
    padding:7px 10px;
    border:solid 1px #39f;
    border-radius:7px;
    box-shadow:1px 1px 1px 0px #555;
    text-decoration:none;
    cursor:pointer;
    transition:color 0.3s,
                background-color 0.3s,
                border-color 0.3s,
                box-shadow 0.3s;
    }
  .btn:hover {
    }
  a.btn {
    margin:12px 0;
    text-align:center;
    }
  .btn.btn-xs {
    min-width:1em;
    padding:2px 3px;
    }

  .btn.btn-sm {
    min-width:2em;
    padding:4px 6px 3px;
    }

  .btn:disabled {
    border:solid 1px #c8cccf;
    box-shadow:1px 1px 1px 0px #888;
    cursor:not-allowed;
    }
  .btn.continue {
    margin-left:1em;
    }

  /* popup dialogs, please wait & help messages... */
  #bkgndMask {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    }
  .popup {
    display:none;
    margin:0 auto;
    padding:0;
    position:relative;
    width:320px;
    border-radius:12px;
    top:50%; transform:translateY(-50%);
    overflow:auto; z-index:1010;
    background-color:#fff;
    box-shadow:3px 3px 6px 2px #333;
    }
  .popup p {float:none;}
  .popup .popupHead
    {color:#000; background-color:rgba(0, 0, 0, 0.1); border-radius:12px;
        position:relative; padding:1px 12px 6px; margin:0;
        border-bottom-left-radius:0; border-bottom-right-radius:0;
        border-bottom:solid 1px rgba(0, 0, 0, 0.2);}
  .popupHead h3
    {float:none; margin-right:36px; text-align:left;}
  .popupHead button
    {float:right; clear:right; margin:5px -5px 0 0;}
  .popup .popupBody {
    text-align:left;
    min-height:24px;
    padding:12px 12px 6px;
    overflow-y:auto;
    }
  .popupHead + .popupBody
    {min-height:48px; padding:12px 12px 18px;}
  .popupBody ol
    {list-style:decimal outside; margin:3px 0 0 18px;}
  .popupBody ul
    {list-style:disc outside; margin:3px 0 0 18px;}
  .popupBody li
    {margin:3px 0 0 3px;}
  .popup .popupFoot
    {text-align:right; padding:6px 12px 12px;}
  .popupFoot button
    {margin:0 0 0 12px;}

  /* special popups... */
  #Wait .popupBody
    {text-align:center; font-size:14px; padding:24px 0;}
  #Help
    {width:420px; background-color:#d0fff0;}
  #Help .popupHead h3 {
    font-weight:bold;
    }

  #timeoutMessage
    {color:#000; background-color:#fd8; width:300px; line-height:1.5em;
        padding:40px 24px; border-radius:12px;}

  /* help buttons... */
  .btnHelp,
  .assist {
    float:left;
    display:inline-block;
    vertical-align:top;
    margin:3px 0 0 1em;
    text-decoration:none;
    cursor:pointer;
    }
  .assist.underhelp {
    margin:12px 0 0 -3px;
    }
  .btnHelp {
    font-size:13px;
    font-weight:normal;
    margin:6px 3px 0 6px;
    padding:1px 5px 0 5px;
    border:solid 1px #8a8;
    border-radius:11px;
    transition:color 0.3s, background-color 0.3s, border-color 0.3s;
    }
  h1 .btnHelp,
  h2 .btnHelp,
  h3 .btnHelp {
    float:none;
    margin-top:-3px;
    }
  /* less obtrusive help in table headings and cells */
  .tblHelp {
    display:inline-block;
    margin-left:1.0em;
    padding:0 0.3em;
    cursor:pointer;
    font-weight:normal;
    border-radius:6px;
    }
  td .tblHelp {
    position:absolute;
    right:0.5em;
    top:50%;
    transform:translateY(-50%);
    }

  /* font-awesome button modifiers */
  i {
    padding:2px;
    text-align:center;
   }
  i.btn  {
    float:left;
    min-width:0;        /* counteracts general .btn style */
    border:none;
    border-radius:4px;
    padding:2px;
    margin:0 0.5rem;
    }
  i.btn.disabled {
    cursor:not-allowed;
    }
  i.sm {
    font-size:16px;
    width:18px!important;   /* important because .sm generally is important too! */
    height:18px;
    line-height:18px;
    }
  i.md,
  span.md {
    font-size:17px;
    width:20px;
    height:20px;
    line-height:20px;
    }
  i.lg {
    font-size:20px;
    width:23px!important;
    height:23px;
    line-height:23px;
    }
  i.xl {
    font-size:24px;
    width:26px!important;
    height:26px;
    line-height:26px;
    }
  /* icon buttons can be stacked inside a span.stack
     here the span takes the margin instead of the button inside */
  span.stack {
    position:relative;
    display:inline-block;
    margin:0 0 0 0;
    border-radius:4px;
    box-shadow:1px 1px 1px 0px #555;
    }
  /* inside a stack the first i sets the size of the stack */
  .stack i:first-child {
    position:static;
    }
  /* subsequent i.s sit directly on top and have transparent bkgnd */
  .stack i {
    position:absolute;
    top:0;
    left:0;
    margin:0!important;
    box-shadow:none!important;
    background-color:transparent!important;
    }

  /* specific top margin / space before */
  .mt-0 {
    margin-top:0!important;
    }
  .mt-1 {
    margin-top:6px!important;
    }
  .mt-2 {
    margin-top:12px!important;
    }
  .mt-3 {
    margin-top:18px!important;
    }
  .mt-4 {
    margin-top:24px!important;
    }

  /*** form-specific ui items *************************************************/

  /* labels */
  label {
    float:left;
    text-align:right;
    margin:8px 3px 0 0;
    display:inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
    }
  label.continue {
    float:left;
    clear:none;
    margin:8px 3px 0 0.5em;
    display:inline-block;
    white-space: nowrap;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
    }

  /* text inputs */
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="file"],
  .button-box,
  textarea {
    float:left;
    padding:6px;
    border:solid 2px #999;
    border-radius:6px;
    font-family:inherit;
    font-size:10pt;
    }
  .button-box {
    padding:4px 6px 2px 6px;
    }
  .button-box-row {
    float:left;
    clear:left;
    margin:3px 0;
    }
  textarea {
    resize:vertical;
    height:56px;
    }
  textarea.resizenone {
    resize:none;
    }
  textarea.lg,
  textarea.xlg {
    height:100px;
    }
  /* grid input system */
  /* std sizes... */
  input,
  .button-box,
  textarea,
  .std {
    width:220px;
    }
  select,
  select.std {
    width:236px;
    }
  label,
  label.std {
    width:108px;
    }
  .button-box.xxsm,
  input.xxsm,
  .xxsm input,
  label.xxsm {
    width:60px;
    }
  select.xxsm,
  .xxsm select {
    width:76px;
    }
  .button-box.xsm,
  input.xsm,
  .xsm input,
  label.xsm  {
    width:100px;
    }
  select.xsm,
  .xsm select {
    width:116px;
    }
  .button-box.sm,
  input.sm,
  .sm input {
    width:140px;
    }
  select.sm,
  .sm select {
    width:156px;
    }
  label.sm {
    width:80px;
    }
  label.lg {
    width:154px;
    }
  .button-box.lg,
  input.lg,
  .lg input,
  textarea.lg,
  .lg textarea {
    width:300px;
    }
  select.lg,
  .lg select {
    width:316px;
    }
  .button-box.xlg,
  input.xlg,
  .xlg input,
  .table-cntnr.xlg,  /* specific to over-ride table-cntnr def above */
  textarea.xlg,
  .xlg textarea {
    width:380px;
    }
  select.xlg,
  .xlg select {
    width:396px;
    }
  .button-box.xxlg,
  input.xxlg,
  .xxlg input,
  textarea.xxlg,
  .xxlg textarea {
    width:460px;
    }
  select.xxlg,
  .xxlg select {
    width:476px;
    }
  /* don't let the above mess with radio buttons and checkboxes! */
  input[type="radio"],
  input[type='checkbox'] {
    width:auto!important;
    }
  /* element height of textarea boxes in forms... */
  .eh-2 select,
  .eh-2 textarea,
  textarea.eh-2 {
    height:2rem;
    }
  .eh-3 select,
  .eh-3 textarea,
  textarea.eh-3 {
    height:3rem;
    }
  .eh-4 select,
  .eh-4 textarea,
  textarea.eh-4 {
    height:3.8rem;
    }
  .eh-5 select,
  .eh-5 textarea,
  textarea.eh-5 {
    height:4.7rem;
    }
  .eh-6 select,
  .eh-6 textarea,
  textarea.eh-6 {
    height:5.6rem;
    }
  label.session-action {
    min-width:40%;
    }

  input[type="checkbox"],
  input[type="radio"] {
    float:left;
    margin:8px 3px 0 3px;
    }
  input[type="checkbox"].inline,
  input[type="radio"].inline {
    float:none;
    vertical-align:bottom;
    }
  .button-box {
    display:inline-block;
    /*padding:4px 6px 4px 3px;*/
    line-height:1.3em;
    }
  .button-box > span {
    white-space:nowrap;
    }
  .button-box label {
    /*float:none; */
    text-align:left;
    width:auto;
    min-width:60px;
    margin:2px 12px 2px 3px;
    padding:0;
    }
  .button-box > table {
    width:100%;
    border-spacing:0;
    border-collapse:collapse;
    }
  .button-box td {
    padding:0 3px 9px 3px;
    }
  .button-box tr:last-child td {
    padding-bottom:3px;
    }
  .button-box input[type="checkbox"],
  .button-box input[type="radio"] {
    margin:3px 3px 1px 3px;
    vertical-align:baseline;
    }
  select {
    float:left;
    padding:5px 6px;
    border:solid 2px #999;
    border-radius:6px;
    /*font-family:"courier new", fixed;*/
    line-height:2.6em;
    }
  .select2.select2-container {
    float:left;
    }
  select option {
    line-height:1.6em;
    }
  optgroup {
    font-weight:bold;
    font-style:italic;
    }
  optgroup option {
    font-weight:normal;
    font-style:normal;
    }
  input[type="button"].btnInline {
    float:none;
    display:inline;
    margin:3px 0 0 0;
    width:auto;
    }
  input[type="submit"],
  input[type="button"] {
    float:right;
    margin:12px 24px;
    text-align:center;
    }
  input[type="button"].untidy {
    width:auto;
    }


  /* style rules for date time picker... */
  #dtPicker {
    border-radius:12px;
    border:solid 2px #ccc;
    box-shadow:2px 2px 3px 0px #888;
    position:absolute;
    width:268px;
    z-index:100;
    cursor:move;
    }

  #dtPicker .btn {
    min-width:1em;
    padding:4px;
    margin:0 3px;
    }

  #dtPicker input[type="text"],
  #dtPicker select {
    border-radius:4px;
    border-width:1px;
    padding:2px;
    width:1.2em;
    margin-top:6px;
    }
  #dtPicker input[type="button"] {
    float:none;
    margin:0;
    }

  #dtCntnr {
    width:260px;
    padding:0;
    margin:5px auto;
    }

  #dtYearMonth {
    width:260px;
    padding:0;
    margin:5px auto;
    border-collapse:collapse;
    border-width:0;
    }
  #dtYearMonthHdg {
    font-size:1.1em;
    }

  #dtPicker table#dtMonth {
    border-spacing:4px;
    border-collapse:separate;
    }

  #dtMonth th,
  #dtMonth td,
  #dtTime td {
    width:36px;               /* CellWidth */
    padding:3px 0;
    text-align:center;
    }

  #dtMonth td {
    text-align:center;
    cursor:pointer;
    }

  #dtMonth td.disabled:hover {
    cursor:default;
    }

  #dtTime,
  .dtSpinner {
    border-spacing:0;
    border-collapse:collapse;
    }
  #dtTime {
    margin:3px auto;
    }
  #dtPicker .dtSpinner td {
    padding:1px;
    }
  #dtPicker .dtSpinner .btn {
    height:12px;
    padding-top:1px;
    padding-bottom:1px;
    margin:0;
    }
  #dtTime select {
    width:4em;
    }
  td#dtOkCancel {
    padding-top:6px;
    }
  td#dtOkCancel button {
    width:5em;
    }

/** measure-specific items ****************************************************/


  /* each question appears in its own div with top border as separator... */
  div.question {
    width:100%;
    float:left;
    clear:both;
    margin:0 -12px;
    padding:6px 12px 12px 12px;
    border-top:solid 1px #999;
    text-align:left;
    }
  div.question .preamble {
    width:100%;
    text-align:left;
    margin:6px 0;
    }
  p.question {
    text-align:left;
    padding:0 0 12px 0;
    font-weight:bold;
    font-size:1.1em;
    }
  div.markdown {
    float:left;
    clear:left;
    width:100%;
    text-align:left;
    margin:-6px 0 0 0;
    padding:0 0 12px 0;
    font-size:0.9em;
    /*font-style:italic;*/
    }
  /* style markdown within an explanation... */
  div.markdown * {
    float:none;
    }
  div.markdown p {
    margin:6px 0 0 0;
    }
  div.markdown em {
    font-style:italic;
    }
  div.markdown strong {
    font-weight:bold;
    }
  div.markdown h1 {
    font-weight:bold;
    font-size:1.2em;
    text-align:left;
    margin:3px 0 3px 0;
    }
  div.markdown h2 {
    font-weight:bold;
    font-size:1.1em;
    text-align:left;
    margin:9px 0 0 0;
    }
  div.markdown h3 {
    font-weight:bold;
    font-size:1.05em;
    text-align:left;
    margin:18px 0 3px 0;
    }
  div.markdown h4 {
    font-weight:bold;
    font-size:1.05em;
    text-align:left;
    margin:6px 0 0 0;
    }
  div.markdown h5,
  div.markdown h6 {
    font-weight:bold;
    font-size:1.0em;
    text-align:left;
    margin:4px 0 0 0;
    }
  div.markdown ol,
  div.markdown ul {
    margin:3px 0 0 21px;
    }
  div.markdown ol {
    list-style:decimal outside none;
    }
  div.markdown ol ol {
    margin:0 0 3px 18px;
    list-style-type:lower-alpha;
    }
  div.markdown ul {
    list-style:disc outside none;
    }
  div.markdown ul ul {
    margin:0 0 3px 18px;
    list-style-type:circle;
    }
  div.markdown li {
    margin:3px 0 0 0;
    }
  /* text needs to be a tad bigger in popup view to compensate for smaller text in popup */
  .popupBody .explanation {
    font-size:1.0em;
    }

  /* input field for plain text questions... */
  .question input[type='text']    {clear:left; width:540px; padding:6px; margin:0;}  /* QST_LGLINE */
  .question input.sm[type='text'] {clear:left; width:262px; padding:6px; margin:0;}  /* QST_SMLINE */
  .question input[type='number']  {clear:left; width:64px; padding:6px; margin:0;}   /* QST_NUMBER */

  /* textarea for plain text questions... */
  .question textarea      {clear:left; width:540px; padding:6px; margin:0;}          /* QST_LGTEXT */
  .question textarea.sm   {clear:left; width:262px; padding:6px; margin:0;}          /* QST_SMTEXT */

  /* select for m/choice vertical questions... */
  .question select        {float:left; clear:both; width:240px; margin:0;}

  /* table for m/choice horizontal... */
  table.tblHChoice {
    clear:both;
    width:556px;        /* 552px internal (content) width */
    min-width:270px;
    padding:6px 0;
    margin:0;
    border-radius:6px;
    border:solid 2px #999;
    }
  .mchDesc {
    float:none;
    text-align:center;
    vertical-align:bottom;
    margin:0;
    padding:0 0 3px 0;
    font-size:0.85em;
    }
  .mchValue {
    text-align:center;
    vertical-align:top;
    padding:6px 9px 6px 9px;
    }
  .mchValue .chicon {
    text-align:center;
    float:none;
    clear:both;
    margin:6px 0 0 0;
    }
  .mchValue input.Data {
    margin:0;
    float:none;
    clear:both;
    }

  /* error / unanswered... */
  .empty,
  .tblHChoice.empty td  {
    border-color:#c03;
    }

  /* left/mid/right text - mch and angrad */
  /* qEndText is a wrapper for the three individual text blocks */
  .qEndText {
    width:552px;
    padding:0 0 6px 0;
    /*background-color:#ee0; */
    }
  .qLeftText,
  .qMidText,
  .qRightText {
    display:inline-block;
    float:none;
    width:172px;
    vertical-align:bottom;
    margin:0 6px;
    padding:0;
    }
  .qLeftText {
    text-align:left;
    }
  .qMidText {
    text-align:center;
    }
  .qRightText {
    text-align:right;
    }


  /* analog slider control... */
  .sldcntnr,
  .sldgrdctr {
    box-sizing:content-box;
    table-layout:fixed;
    width:552px;        /* internal (content) width */
    padding:6px 0;
    border:solid 2px #999;
    border-radius:6px;
    margin:0;
    text-align:left;
    clear:both;
    float:left;
    }
  .slider               {}
  .sldcntnr  .slider    {box-sizing:border-box; width:350px; margin:6px 0;}
  /*.sldcntnr  .sldc      {width:352px; margin:0; vertical-align:middle;}*/
  .sldcntnr  .sldl      {width:84px; text-align:left; padding:0 6px 0 12px; vertical-align:middle;}
  .sldcntnr  .sldr      {width:84px; text-align:right; padding:0 12px 0 6px; vertical-align:middle; overflow:hidden;}
  .sldcntnr  .sldlicon  {float:left; max-width:150px; margin:12px 0 0 0; text-align:left; vertical-align:middle; overflow:hidden;}
  .sldcntnr  .sldricon  {float:right; max-width:150px; margin:12px 0 0 0; text-align:right; vertical-align:middle;}

  .sldgrdctr .slider    {box-sizing:border-box; width:476px; margin:6px 40px;}
  .sldgrdctr .sldl      {float:left; width:28px; text-align:right; margin:3px 3px 0 0; overflow:hidden;}
  .sldgrdctr .sldr      {float:right; width:28px; text-align:left; margin:3px 0 0 6px; overflow:hidden;}
  .sldgrdctr .sldlicon  {float:left; max-width:150px; margin:6px 0 0 42px; text-align:left; vertical-align:middle;}
  .sldgrdctr .sldricon  {float:right; max-width:150px; margin:6px 42px 0 0; text-align:right; vertical-align:middle;}


  /* measure copyright msg */
  p.msr-copy {
    float:right;
    text-align:right;
    width:85%;
    margin:9px 0 0 0;
    font-size:0.85em;
    }

  /* error message in place of rendered form field */
  form span.field-error {
    display:inline-block;
    padding:8px 0 6px 6px;
    }
  /* larger fonts for Trad Chinese... */
  .Font120 div.question
    {font-size:1.2em;}
  .Font120 div.question .answerdate
    {font-size:0.8em;}
  .Font150 div.question
    {font-size:1.5em;}
  .Font150 div.question .answerdate
    {font-size:0.7em;}
  .Font200 div.question
    {font-size:2.0em;}
  .Font200 div.question .answerdate
    {font-size:0.5em;}