/* Request a demo.

   One column, read top to bottom: the intro, then the questions, then the
   contact fieldset and its submit button last.  On a wide screen the two
   question tables sit side by side, but the page still reads downward so the
   submit button is never reached before the questions. */

div#divDemoContact {
     width: 321px;
     margin: auto;
}

div#divDemoContact fieldset {
     margin: 0px;
     margin-bottom: 20px;
}

div#divDemoContact table td,
div#divDemoContact table th {
     word-break: break-word;
}

col.colDemoReq1 { width: auto;  }
col.colDemoReq2 { width: auto;  }
col.colDemoReq3 { width:  24px; }
col.colDemoReq4 { width: auto;  }
col.colDemoReq5 { width: 105px; }

#txtFName, #txtLName {
     width: 103px !important;
}

#txtCompany, #txtEmail, #txtPhone {
     width: 180px;
}

/* Sized by their longest option rather than a fixed width -- the platforms ask
   different questions, and a fixed width either clips "Residential curb side"
   or leaves the number dropdowns absurdly wide. */
div#divDemoForm select {
     max-width: 100%;
}

div#divDemoForm {
     margin-bottom: 20px;
}

div#divDemoForm > div table {
     width: 100%;
}

div#divDemoForm > div:first-child {
     margin-bottom: 20px;
}

@media only screen and (min-width:397px) {
     div#divDemoContact {
          width: 361px;
     }

     col.colDemoReq5 {
          width: 165px;
     }
}

@media only screen and (min-width:645px) {
     /* Line the contact fieldset up with the questions above it rather than
        leaving it centred in the page. */
     div#divDemoContact {
          margin: 0px;
     }

     /* Once there is room, pin the question labels to a fixed column so each
        control sits next to its label instead of drifting to the far right of
        an evenly split table. */
     col.colDemoReq1 {
          width: 280px;
     }
}

@media only screen and (min-width:820px) {

     div#divFlexDemo {
          display: flex;
          align-items: stretch;
     }

     div#divDemoForm {
          flex: 1;
          margin-bottom: 0px;
     }

     div#divDemoForm > div:first-child {
          margin-right: 0px;
          margin-bottom: 20px;
     }

     div#divDemoContact {
          width: 440px;
          margin-left: 20px;
     }

     div#divDemoContact fieldset {
          box-sizing: border-box;
          height: 100%;
          margin-bottom: 0px;
     }

     #txtFName, #txtLName {
          width: 104px;
     }

     #txtCompany, #txtEmail, #txtPhone {
          width: 220px;
     }

}

/* REQUEST DEMO PANEL STYLING */

div#divFlexDemo {
     margin-top: 22px;
}

div#divDemoForm > div,
div#divDemoContact fieldset {
     box-sizing: border-box;
     background: #fff;
     border: 1px solid #d8dde3;
     border-radius: 8px;
}

div#divDemoForm > div {
     padding: 16px 18px;
}

div#divDemoForm > div > strong {
     display: block;
     font-size: 16px;
     margin-bottom: 8px;
}

div#divDemoForm > div > hr {
     border: 0px;
     border-top: 1px solid #e2e6ea;
     margin: 0px 0px 10px 0px;
}

div#divDemoForm table td,
div#divDemoContact table td {
     padding-top: 7px;
     padding-bottom: 7px;
     vertical-align: middle;
}

div#divDemoContact fieldset {
     padding: 14px 18px 18px 18px;
}

div#divDemoContact legend {
     font-size: 16px;
     font-weight: bold;
     padding: 0px 8px;
}

div#divDemoContact table {
     width: 100%;
}

@media only screen and (min-width:820px) {

     div#divFlexDemo {
          display: flex;
          align-items: stretch;
          gap: 24px;
     }

     div#divDemoForm {
          display: flex;
          flex: 1 1 auto;
          flex-direction: column;
          gap: 20px;
          min-width: 0px;
          margin-bottom: 0px;
     }

     div#divDemoForm > div:first-child {
          margin: 0px;
     }

     div#divDemoContact {
          flex: 0 0 440px;
          width: 400px;
          margin: 0px;
     }

     div#divDemoContact fieldset {
          height: 100%;
          margin-bottom: 0px;
     }

}

/* REQUEST DEMO CONTACT PANEL REFINEMENT */

@media only screen and (min-width:820px) {

     div#divDemoContact fieldset {
          display: flex;
          flex-direction: column;
     }

     div#divDemoContact table {
          height: 100%;
     }

     div#divDemoContact table td {
          padding-top: 10px;
          padding-bottom: 10px;
     }

     div#divDemoContact table tr:nth-last-child(2) td {
          height: 100%;
          vertical-align: bottom;
     }

     div#divDemoContact table tr:last-child td {
          padding-top: 12px;
          padding-bottom: 4px;
     }

     div#divDemoContact #btnDemo {
          min-width: 150px;
          padding: 9px 18px;
     }

}

div#divDemoContact fieldset {
     background: #f7f8fa;
}


/* Keep contact field labels on one line */
div#divDemoContact table td:first-child {
     white-space: nowrap;
}


/* Improve contact input height */
div#divDemoContact input[type='textbox'] {
     box-sizing: border-box;
     height: 34px;
     padding: 6px 8px;
}


/* Mobile width protection */
div#divDemoContact {
     box-sizing: border-box;
     max-width: 100%;
}

div#divDemoForm {
     max-width: 100%;
}

div#divDemoContact input,
div#divDemoContact select {
     max-width: 100%;
}

/* Full-width contact panel on mobile/tablet */
@media only screen and (max-width:819px) {

     div#divDemoContact {
          width: 100%;
          max-width: 100%;
          margin-left: 0px;
          margin-right: 0px;
     }

     div#divDemoContact fieldset {
          width: 100%;
          box-sizing: border-box;
     }

}


/* Full-width contact fields on mobile/tablet */
@media only screen and (max-width:819px) {

     #txtFName,
     #txtLName,
     #txtCompany,
     #txtEmail,
     #txtPhone {
          box-sizing: border-box;
          width: 100% !important;
          height: 36px;
          padding: 6px 8px;
     }

}


/* Keep Request a Demo button consistent on all screen sizes */
div#divDemoContact #btnDemo {
     min-width: 150px;
     padding: 9px 18px;
}

/* Hidden until requestDemo.js reveals it on a failed submit. */
div#divDemoError {
     border: 2px solid #FF0000;
     background-color: rgba(255, 0, 0, 0.2);
     border-radius: 10px;
     padding: 10px;
     text-align: left;
     display: none;
}


/* Scale House asks no communications questions, so there is only one column.
   Left unconstrained it stretches the full width and strands each dropdown far
   from its label, so hold it to about the width it would have had as one of the
   two columns on the other platforms. */
div#divDemoForm > div:only-child {
     margin-right: 0px;
     margin-bottom: 0px;
     max-width: 640px;
}