.SalesTaxLabel
{
    background-color: #AEAEAE;
    border: 1px solid grey;
    text-align: right;
    font-weight: bold;
    width: 175px;
}
.radioButtonList tr{
    display: inline-block;
    }
.radioButtonList tr:nth-child(odd) {
    margin-right: 28px;
    width: 80px;
}

.ServiceCart
{
    width: 100%;
}

.div_form
{
    width: 100%;
}

.div_form div
{
    float: left;
    display: inline;
}

div.table 
{
    display: table;
}

div.wrap
{
    clear: both;
    width: 100%;
}

div.labelCell
{
    background-color: #DEDEDE;
    border: 1px solid grey;
    text-align: right;
    width: 175px;
    padding: 4px 2px;
    margin: 2px;
    display: table-cell;
}

div.requiredCell
{
    background-color: #FFF;
    padding: 4px 2px;
    margin: 2px;
}

div.contentCell
{
    background-color: #FFF;
    padding: 4px 2px;
    margin: 2px;
    display: table-cell;
}

@media print
{
    .noPrint
    {
        display: none;
    }

    .noBorder
    {
        border: 0px;
    }

    a
    {
        color: #000;
        text-decoration: none;
    }

    .printTable
    {
        border-left: 1px solid #000;
        border-bottom: 1px solid #000;
        width: 100%;
    }

    .printTable td, th
    {
        border-top: 1px solid #000;
        border-right: 1px solid #000;
    }
    
    .printOnly 
    {
        display: block;
    }
}

@media screen 
{
    .printOnly 
    {
        display: none;
    }
}

.CartTextBox
{
    width: 80px;
}

.NavMenu ul.AspNet-Menu /* Tier 1 */
{
    width: 100%;
    border-top: 1px solid #000;
}

.NavMenu ul.AspNet-Menu ul /* Tier 2 */
{
    width: 6em;
    top: 100%;
    left: 0;
    font-weight: bold;
}

.NavMenu ul.AspNet-Menu ul ul /* Tier 3+ */
{
    top: 0%;
    left: 6em;
    font-weight: normal;
}

.NavMenu li /* all list items */
{
    width: 6em;
    background: #DEDEDE;
}

.NavMenu li:hover, /* list items being hovered over */ .Menu li.AspNet-Menu-Hover
{
    background: #FFF;
    color: #000;
}

.NavMenu a, /* all anchors and spans (nodes with no link) */ .Menu span
{
    color: #000;
    padding: 4px 2px 4px 8px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
}

.NavMenu li.AspNet-Menu-Leaf a, /* leaves */ .Menu li.AspNet-Menu-Leaf span
{
    background-image: none !important;
}

.NavMenu .AspNet-Menu-Selected /* this tier is selected */
{
    background: #FFF;
}

.NavMenu .AspNet-Menu-ChildSelected /* a tier below this one is selected */
{
    background: #FFF;
}

.right
{
    text-align: right !important;
}

.PinDebit
{
    display: block;
    height: 32px;
    padding: 18px 0px 0px 10px;
    border: 1px solid black;
    width: 176px;
    margin: 0px;
    text-decoration: none;
    color: #000;
}

.CreditCard
{
    display: block;
    height: 32px;
    padding: 18px 0px 0px 10px;
    border: 1px solid black;
    width: 176px;
    margin: 0px;
    text-decoration: none;
    color: #000;
}

.Check
{
    display: block;
    height: 32px;
    padding: 18px 0px 0px 10px;
    border: 1px solid black;
    width: 176px;
    margin: 0px;
    text-decoration: none;
    color: #000;
}

.CreditCardManual
{
    display: block;
    height: 32px;
    padding: 18px 0px 0px 10px;
    border: 1px solid black;
    width: 176px;
    margin: 0px;
    text-decoration: none;
    color: #000;
}

.CheckManual
{
    display: block;
    height: 32px;
    padding: 18px 0px 0px 10px;
    border: 1px solid black;
    width: 176px;
    margin: 0px;
    text-decoration: none;
    color: #000;
}

.Cash
{
    display: block;
    height: 32px;
    padding: 18px 0px 0px 10px;
    border: 1px solid black;
    width: 176px;
    margin: 0px;
    text-decoration: none;
    color: #000;
}

.PaperCheck {
    display: block;
    height: 32px;
    padding: 18px 0px 0px 10px;
    border: 1px solid black;
    width: 176px;
    margin: 0px;
    text-decoration: none;
    color: #000;
}

.uppercase 
{
	text-transform: uppercase;
}

span.blockValError[style*="inline"]
{
    display:block !Important;
}

td.description {
    padding-left: 0px;
}

.description > div {
    border: 1px solid grey;
    padding: 2px;
    background-color: #DEDEDE;
}

.description .description-label {
    text-align: left;
    background-color: #DEDEDE;
    padding: 5px;
}

.break-word-container {
    display: table;
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}


/************************ Floating label bits ************************/
/* To use:
    1. Create a div using .userControlHelpContainer
    2. Apply .userControlHelpTarget to the element the label will belong to
    3. Make a <div> after it, within the container. Apply .userControlHelp
       to the label.
    4. Also apply either .userControlHelp-hover or .userControlHelp-focus to
       the label.
    5. Optionally add another .userControlHelp div with the other
       type of help (-focus or -hover).

    The intent is to have two separate divs acting as labels, one for hover
    and one for focus. This allows different text for each. If the target has
    focus and hover, the div defined latest in document order will show.

    Divs are used for this because these aren't acting as labels. They are help
    tips. Plus, label is likely to have skin styles that may interfere with
    decent default behavior.
*/

/* A div surrounding the target and the label. */
.userControlHelpContainer {
    position: relative;
    clear: both;
}

/* The element with the floating label applied to it. Nothing special
    to style here beyond defining the class to avoid warnings.
*/
.userControlHelp-target {
}

/* The default setup for the help div, which is to be invisible until :hover or :focus.
    This is what skins should provide overrides for if the look needs to change. Skin overrides
    of these existing styles require !important due to the order styles are added on the page.

    - top is set here using ch because using a height-based relative measurement seems to make the
      position decent for tested skins.
    - left 0 aligns to the control's edge. Skins that alter the width of the target control may see
      the help appear wider than the control itself.
    - width 100% to give the full width of the container div, with the expectation that the control
      itself would be full-width.
    - The border color is a medium-to-light grey to act as a middle ground that looks ok as a default
      next to black or grey control borders.
    - z-index is set to -1 because otherwise with the div defined after the target, hovers would normally
      be over the help div.
*/
.userControlHelp {
    opacity: 0;
    z-index: -1;
    font-size: 10pt;
    position: absolute;
    top: -3ch;
    left: 0;
    width: 100%;
    background-color: white;
    border: 1px solid #bbbbbb;
    transition: opacity .1s ease-in-out;
}

/* Showing the floating label. Opacity set to show and z-index reset to auto so it shows on top again. */
.userControlHelpContainer >
    .userControlHelp-target:hover ~
        .userControlHelp-hover,
.userControlHelpContainer >
    .userControlHelp-target:focus ~
        .userControlHelp-focus {
    opacity: 100;
    z-index: auto;
    transition: opacity .25s ease-in-out;
}

/* These styles are used for a collapsible section containing tables. The intent 
    is to show/hide all tr descendents of the container element that don't have a visible
    required indicator.

    To use,
    1. Add a div around the section of the page with the rows you want to hide. The first
        use of this was for the customer info control, so we added a div around the fieldset
        that was there already.
    2. Apply .collapsibleOptionalRows-container to the wrapper div.
    3. Somewhere in the div, add a span that has .collapsibleOptionalRows-toggler. This
        is intended to be positioned to the right of the containing div. THe initial
        customer info design assumes the span will be inside the <legend> that acts as the
        section title. This positions the show/hide "link" on top of the section border
        with a little whitespace surrounding it so it "cuts through" the border nicely.
        For a skin that replaces the look of the bordered section, this may need overridden
        to match the background color of the section header area.
    4. You can temporarily hide the area containing the collapsible container to prevent the
        awkward load-then-hide behavior. Make sure the whole area is wrapped in a position:relative
        div, then put in an empty div with .collapsibleOptionalRows-cover. This will fill the parent
        relatively-positioned div and then after all collapsible bits have loaded their state, the
        cover div will have its class removed to reveal the rendered collapsible section.

    Notes:
    - The container div needs an id. The current state is kept in a cookie that uses the id
        of the container div as part of the name. If you reuse the same container id on different
        pages, this is fine but the cookie will control the pageload state of all instances of
        the same id and a change on any page replaces the cookie, affecting all locations using
        the same id.
    - The span can be empty. The js involved will always set the text content of the span on
        page load. It will display either "show" or "hide", depending on the state being loaded
        from the cookie.
*/
.collapsibleOptionalRows-container {
    clear: both;
    position: relative;
}

.collapsibleOptionalRows-cover {
    opacity: 100;
    position: absolute;
    background-color: white;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
}

.collapsibleOptionalRows-shrink {
    height: 0;
    transition-property: height;
    transition-duration: .2s;
}

.collapsibleOptionalRows-container
    .collapsibleOptionalRows-toggler {
    position: absolute;
    right: 10px;
    background-color: white;
    padding-inline-end: 3px;
    padding-inline-start: 3px;
    cursor: pointer;
}

/* No styles necessary, this is just here to avoid a warning. */
.new-password-field {

}