/* General.css */

/* General Purpose. */
.normal
{
    font-weight: normal;
}
.bold
{
    font-weight: bold;
}
.italic
{
    font-style: italic;
}
.floatLeft, .floatleft      /* Just to be case-insensitive. */
{
    float: left;
}
.floatRight, .floatright
{
    float: right;
}
.clear
{
    clear: both;
}
.nowrap
{
    white-space: nowrap;
}
.pointer
{
    cursor: pointer;
}
.displayBlock
{
    display: block;
}
.displayBlockImportant              /* For overriding boostrap visible-... and hidden-... styles. Use rarely. */
{
    display: block !important;
}
.displayNone
{
    display: none;
}
.displayInlineBlock
{
    display: inline-block;
}
.visible
{
    visibility: visible;
}
.hiddenbb                  /* Named to avoid bootstrap's hidden, which has important on it, so can't override it to show. */
{
    visibility: hidden;
}
.posAbs
{
    position: absolute;
}
.posRel
{
    position: relative;
}
.textCenter
{
    text-align: center;
}
.textLeft
{
    text-align: left;
}
.textRight
{
    text-align: right;
}
.centerScreen               /* css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ */
{
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
}
.underline, .underline:hover
{
    text-decoration: underline;
}
.noselect       /* stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting/4407335#4407335 */
{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

select:disabled         /* Disabled dropdowns fade look. */
{
    opacity: 0.7;
}

/* Responsive. */

.noDesktop
{
    display: none;
}
.noDeskBlock, .noDeskInline, .noDeskInlineBlock     /* See comments below. */
{
    display: none;
}
.mobileBlock, .mobileInline, .mobileInlineBlock
{
    display: none;
}
.clearMobile
{
    display: none;
}
.clearDesktop
{
    clear: both;
}

/* Below desktop. */
@media only screen and (max-width:1024px)
{
    /* No desktop for block, inline, and inline-block elements. 
        Alternative is a single .noDesk on all the block elements, but there are a lot.
    */
    .noDeskBlock
    {
        display: block;
    }

    .noDeskInline
    {
        display: inline;
    }

    .noDeskInlineBlock
    {
        display: inline-block;
    }
}

/* Mobile only. */
@media only screen and (max-width:765px)
{
    .noMobile
    {
        display: none;
    }

    /* Mobile-only (and under) for block, inline, and inline-block elements.
        Alternative is a single .mobile on all the block elements, but there are a lot.
    */
    .mobileBlock
    {
        display: block;
    }

    .mobileInline
    {
        display: inline;
    }

    .mobileInlineBlock
    {
        display: inline-block;
    }
}

/* Messages. */

.msgInfo
{
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.msgWarn
{
    color: black;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.msgError
{
    color: red;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.msgInvalid, .msgImportant                /* Same as error, but without the margins. */	
{
    color: red;
    font-weight: bold;
}
.msgCAWarning
{
    font-weight: bold;
    font-size: 10px;
}
.msgWarningContent
{
    font-size: 10px;
    display:inline-block;
}
.msgWait
{
    color: #c00000;
    font-size: 1.1em;
    font-weight: bold;
}

.errorSummary
{
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
}
.errorSummaryOn
{
    display: block;
}


/* Debug. */


.cornerDebug 
{
    background-color: #ffffff;
    color: #000000; /* Default black to see sample site test in progress. */
    font-size: 12px;
    right: 0px;
    padding: 2px;
    position: absolute;
    top: 50px; /* Move below promo stripe. */
    z-index: 2000;
}

.cornerLogin 
{
    background-color: #ffffff;
    color: #000000; /* Default black to see sample site test in progress. */
    font-size: 12px;
    left: 0px;
    position: absolute;
    padding: 5px;
    top: 110px;
    z-index: 2000;
    color: #cc0000;
    font-family: Tahoma;
}


.cornerDebug.red
{
    color: #cc0000;
}

.cornerDebug.green
{
    color: #008800;     /* cc is too light. */
}

.cornerDebug.blue
{
    color: #0000ff;     /* bright to distinguish from black. */
}

.cornerDebug.orange
{
    color: #ff9900;     /* For Leeloo. */
}

.pageInfoDebug
{
    left: 0;
    position: absolute;
    top: 40px;
}

.diagHeader
{
    color: #000000;
    font-family: Consolas;
    font-size: 11px;
    left: 0px;
    position: fixed !important;
    height: 4px !important;
    opacity: 0.0;
    overflow: hidden;
    top: 2px;                       /* Top 0 causes it to always pop on emulated mobile right-click, anywhere on screen. */
    width: 100px !important;
    z-index: 999999999 !important;
}

.diagHeader:hover
{
    background-color: #add8e6;
    border: 2px solid #ff0000;
    color: #000000;
    height: auto !important;
    opacity: 1.0;
    padding-right: 10px;
    width: auto !important;
}

.diagFooter
{
    font-family: Consolas;
    font-size: 11px;
    margin-top: 40px;
}

/* Validation. */

label
{
    font-weight: normal;        /* Reset bootstrap's bold. */
}

input.invalid, select.invalid
{
    border-color: #cc0000;
}

label.invalid               /* Mimics alert and alert-danger. */
{
    background-color: #f2dede;
    border: 1px solid #ebcccc;
    border-radius: .25rem;
    color: #cc0000;
    display: inline-block;      /* Allows margins to work. */
    font-weight: bold;          /* bold added to standard alert-danger. */
    margin-bottom: 1rem;
    margin-left: 2px;           /* A little space, small enough to do this in general, still looks ok if wrapped under. */
    padding: 0.25rem 1.25rem;
}

/* Buttons */
a.cssbutton
{
    background-color: #ff9900;
    border-radius: 4px;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    padding: 3px 20px 3px 20px;
    text-align: center;
    text-decoration: none;
    -webkit-touch-callout: none;            /* From noselect style. */
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

a.cssbutton:hover,
.layoutMain a.cssbutton:hover               /* Need to be more specific than overall layoutMain a style. */
{
    background-color: #ffb951;
    color: #ffffff;                         /* Also needed to override layoutMain a */
    text-decoration: none;
}

.transparent a.cssbutton:hover,                 /* transparent used for disabled state. On outer element, and on button itself. Keep color, cursor avoids i-beam. */
a.cssbutton.transparent:hover,
.layoutMain .transparent a.cssbutton:hover      /* Need to be more specific than overall layoutMain a style. */
{
    background-color: #ff9900;
    color: #ffffff;                         /* Also needed to override layoutMain a */
    cursor: default;
}

/* Arrows.
    Kept the margin position as-is, for callers to adjust as needed.
    inline-block is for height/width to work with span, typically needing inline anyway if using a div.
    Color matches our default text color.
*/
.arrowDown
{
    border-right: 1px solid #2b2b2b;
    border-bottom: 1px solid #2b2b2b;
    display: inline-block;
    height: 10px;
    position: relative;
    top: -3px;
    transform: rotate(45deg);
    width: 10px;
}

.arrowLeft
{
    border-top: 1px solid #2b2b2b;
    border-left: 1px solid #2b2b2b;
    display: inline-block;
    height: 10px;
    transform: rotate(-45deg);
    width: 10px;
}

.arrowRight
{
    border-top: 1px solid #2b2b2b;
    border-right: 1px solid #2b2b2b;
    display: inline-block;
    height: 10px;
    transform: rotate(45deg);
    width: 10px;
}

.arrowUp
{
    border-top: 1px solid #2b2b2b;
    border-right: 1px solid #2b2b2b;
    display: inline-block;
    height: 10px;
    position: relative;
    top: 3px;
    transform: rotate(-45deg);
    width: 10px;
}

/* Blackout overlay for highlighting.
    stackoverflow.com/questions/5399442/jquery-blackout-the-entire-screen-and-highlight-a-section-of-the-page/5399629#5399629
*/
.blackout
{
    background: rgba(0,0,0,0.7);
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 998;     /* Set highlight item to 999. */
}

.blackoutLogin
{
    background: rgba(0,0,0,0.7);
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 998;     /* Set highlight item to 999. */
}

.orangeRule
{
    background-color: #ffca31;
    border: 0;
    color: #ffca31; 
    height: 1px;
    margin-top: 6px;
    margin-bottom: 6px;
}

/* Fix blockUI pop-up to stay center on mobile devices (Mostly apple products)
    css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
    This interfered wtih centerThis function, but this approach won. */
.blockUI.blockMsg
{
    position: fixed;
    top: 50%;
    left: 50%;
    margin-right: -50%;             /* I don't think this is doing anything. */
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);   /* IE 9 */
    -webkit-transform: translate(-50%, -50%);   /* Chrome, Safari, Opera */
}

/* Spinner modal. */
.spinnerModal
{
    color: #113373;         /* Dark link color, darker than our main blue. */
    text-align: center;
}

.spinnerModal .modal-dialog
{
    width: 100px;
}

/*Back to top*/
.backToTop
{
    position: fixed;
    bottom: 70px;               /* Above google badge. */
    right: 0px;
    text-decoration: none;
    color: #000000;
    background-color: rgba(235, 235, 235, 0.8);
    font-size: 12px;
    padding: 1em;
    display: none;
}

.bottomDots
{
    border-bottom: 1px dotted #5e5e5e;
    margin: 8px 10px 5px 12px;
}

/* Cookie consent overrides. */
.cc-banner .cc-message
{
    flex: 0 1 auto;         /* Stay left aligned, to not push button to the right, under google reviews badge. */
}
.cc-compliance
{
    margin-left: 20px;
}

/* Side menu, show/hide Log in or Log out, depending on shopper type.
    Prefer not to use important, but this has to get through a large depth of menu classes.
    This should be in a Site18...css file, but we don't have one common to all the master pages. */
.shopperType3 .sideMenuLogin       /* user (logged in) */
{
    display: none !important;
}

.shopperType0 .sideMenuLogout,       /* blank, botwin, anonymous, guest (not logged in) */
.shopperType1 .sideMenuLogout,
.shopperType2 .sideMenuLogout,
.shopperType4 .sideMenuLogout
{
    display: none !important;
}

/* Reason unknown. Moved from top of file. */
iframe[title="Google conversion frame"]
{
    display:none;
}

.affirm-modal-trigger {
    color: #FF9900;
}

.affirm-ala-price {
    font-weight: 1000;
}