/* CSS reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Annoucement Banner */
.alert-banner {
    padding: 6px 8px;
    background-color: #579CDC;
}

    .alert-banner a {
        display: block;
        font-size: 14px;
        color: #fff !important;
        text-align: center;
        text-decoration: none;
    }

    .alert-banner > * {
        display: inline-block;
    }

    .alert-banner em {
        margin-right: 6px;
    }

.close-reveal {
    display: none;
}

/* =Fonts ----------------------------------------------------------------- */

@font-face {
    font-family: 'FuturaBT-BoldCondensed';
    src: url('fonts/futura/eot/style_610.eot');
    src: url('fonts/futura/eot/style_610.eot?#iefix') format('embedded-opentype'),url('fonts/futura/woff/style_610.woff') format('woff'),url('fonts/futura/ttf/style_610.ttf') format('truetype'),url('fonts/futura/svg/style_610.svg#FuturaBT-BoldCondensed') format('svg');
}

@font-face {
    font-family: 'FuturaBT-BoldCondensed';
    font-style: italic;
    src: url('fonts/futura/eot/style_611.eot');
    src: url('fonts/futura/eot/style_611.eot?#iefix') format('embedded-opentype'),url('fonts/futura/woff/style_611.woff') format('woff'),url('fonts/futura/ttf/style_611.ttf') format('truetype'),url('fonts/futura/svg/style_611.svg#FuturaBT-BoldCondensedItalic') format('svg');
}
/*It's repetative, but we need to do it this way in order for the italic styles to work properly in IE 6-8*/
@font-face {
    font-family: 'FuturaBT-BoldCondensed-Italic';
    src: url('fonts/futura/eot/style_611.eot');
    src: url('fonts/futura/eot/style_611.eot?#iefix') format('embedded-opentype'),url('fonts/futura/woff/style_611.woff') format('woff'),url('fonts/futura/ttf/style_611.ttf') format('truetype'),url('fonts/futura/svg/style_611.svg#FuturaBT-BoldCondensedItalic') format('svg');
}

/* General classes -----------------*/
.mobile-only {
    display: none;
}
/* =Structure ------------------------------------------------------------- */

body {
    background: #fff;
    color: #3e3e3e;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 76%; /* fonts are set in ems. 1em = about 12px */
}

    body.noheaderfooter {
        background: #fff; /* background for our popup windows */
    }

.futura_bold_condensed {
    font-family: 'FuturaBT-BoldCondensed', Arial, Helvetica, Sans-Serif;
}

    .futura_bold_condensed_italic,
    .futura_bold_condensed_italic em,
    .futura_bold_condensed em {
        font-family: 'FuturaBT-BoldCondensed-Italic', Arial, Helvetica, Sans-Serif;
        font-style: normal;
    }

strong, b {
    font-weight: bold;
}

.main { /* Contains page headers, content and footer. */
    background-color: #fff;
    margin: 0 auto;
    /*margin-bottom: 2em;*/
    padding: 1.2336em 1.727em;
    position: relative;
    width: 75em;
    box-sizing: border-box;
}

/* Stuff below gives the site a responsive layout. Still need to tweak some pages to make it work nicely 
.main {
    max-width: 70em;
    min-width: 680px;
}

.header {
    max-width: 75em;
	min-width: 740px;

}


img { 
max-width: 100%;
min-width: 0;
}

*/

.iSearch {
    position: absolute;
    color: #64a70e;
    margin-left: 84%;
    top: 8px;
    font-size: 1.25rem !important;
    cursor: pointer;
}

@media only screen and (max-width: 767px) {
    .iSearch {
        margin-left: 80%;
        top: 4px;
        font-size: 2.25rem !important;
    }
}

.cart-indicator {
    display: inline-block;
    min-width: 1.25rem;
    font-size: 0.75rem;
    font-weight: normal;
    color: #FFFFFF;
    text-align: center;
    padding: 0.125rem 0.25rem;
    background-color: #f66711;
    border-color: #f66711;
    border-style: solid;
    border-width: 0.125rem;
    border-radius: 1000px;
    line-height: 1;
    margin-left: 0.5rem;
    box-sizing: border-box;
}

/*
    TWILIO CHAT
    -----------------
*/
.twilio-root {
    line-height: 1.5;
}

    .twilio-root * {
        box-sizing: border-box;
    }

    .twilio-root .Twilio-EntryPoint, .icon-link.live-chat-link {
        font-weight: normal;
        padding-left: 1.75rem;
    }

        .twilio-root .Twilio-EntryPoint:before, .icon-link.live-chat-link:before {
            content: "";
            position: absolute;
            top: -0.1875rem;
            left: 0;
            display: block;
            width: 1.4375rem;
            height: 1.4375rem;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzIyNjA5YTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxpdmUtY2hhdDwvdGl0bGU+PGcgaWQ9Imljb25zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNjQuOTEsMTAyLjU2SDI0NS4zN3Y1MS4yYTQwLjIsNDAuMiwwLDAsMS00MC4xNSw0MC4xNkg4MS40OHYyOWEyOC4zLDI4LjMsMCwwLDAsMjguMywyOC4zSDIzOS40Mmw0Ni4zMiwyOS42YTQuODYsNC44NiwwLDAsMCw3LjQ3LTQuMVYxMzAuODZBMjguMywyOC4zLDAsMCwwLDI2NC45MSwxMDIuNTZaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkzLjM2LDE4LjQ0SDM4LjIzQTMxLjQ4LDMxLjQ4LDAsMCwwLDYuNzksNDkuODhWMTk1LjcyYTgsOCwwLDAsMCwxMi4zLDYuNzRsNDUuNTUtMjkuMTFIMTkzLjM2YTMxLjQ3LDMxLjQ3LDAsMCwwLDMxLjQ0LTMxLjQ0di05MkEzMS40OCwzMS40OCwwLDAsMCwxOTMuMzYsMTguNDRaTTIwNi45LDE0MS45MWExMy41NSwxMy41NSwwLDAsMS0xMy41NCwxMy41NEg1OS40bC0yLjg2LDEuODNMMjQuNjksMTc3LjYzVjQ5Ljg4QTEzLjU1LDEzLjU1LDAsMCwxLDM4LjIzLDM2LjM1SDE5My4zNkExMy41NSwxMy41NSwwLDAsMSwyMDYuOSw0OS44OFptMTEuNjItOTJhMjUuMTgsMjUuMTgsMCwwLDAtMjUuMTYtMjUuMTVIMzguMjNBMjUuMiwyNS4yLDAsMCwwLDEzLjU4LDQ0LjgyLDI1LjIsMjUuMiwwLDAsMSwzOC4yMywyNC43M0gxOTMuMzZhMjUuMTgsMjUuMTgsMCwwLDEsMjUuMTYsMjUuMTVaIi8+PC9nPjwvc3ZnPg==);
            background-repeat: no-repeat;
        }

        .twilio-root .Twilio-EntryPoint:hover:before, .icon-link.live-chat-link:hover:before {
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6IzU3OWNkYzt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxpdmUtY2hhdDwvdGl0bGU+PGcgaWQ9Imljb25zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNjQuOTEsMTAyLjU2SDI0NS4zN3Y1MS4yYTQwLjIsNDAuMiwwLDAsMS00MC4xNSw0MC4xNkg4MS40OHYyOWEyOC4zLDI4LjMsMCwwLDAsMjguMywyOC4zSDIzOS40Mmw0Ni4zMiwyOS42YTQuODYsNC44NiwwLDAsMCw3LjQ3LTQuMVYxMzAuODZBMjguMywyOC4zLDAsMCwwLDI2NC45MSwxMDIuNTZaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkzLjM2LDE4LjQ0SDM4LjIzQTMxLjQ4LDMxLjQ4LDAsMCwwLDYuNzksNDkuODhWMTk1LjcyYTgsOCwwLDAsMCwxMi4zLDYuNzRsNDUuNTUtMjkuMTFIMTkzLjM2YTMxLjQ3LDMxLjQ3LDAsMCwwLDMxLjQ0LTMxLjQ0di05MkEzMS40OCwzMS40OCwwLDAsMCwxOTMuMzYsMTguNDRaTTIwNi45LDE0MS45MWExMy41NSwxMy41NSwwLDAsMS0xMy41NCwxMy41NEg1OS40bC0yLjg2LDEuODNMMjQuNjksMTc3LjYzVjQ5Ljg4QTEzLjU1LDEzLjU1LDAsMCwxLDM4LjIzLDM2LjM1SDE5My4zNkExMy41NSwxMy41NSwwLDAsMSwyMDYuOSw0OS44OFptMTEuNjItOTJhMjUuMTgsMjUuMTgsMCwwLDAtMjUuMTYtMjUuMTVIMzguMjNBMjUuMiwyNS4yLDAsMCwwLDEzLjU4LDQ0LjgyLDI1LjIsMjUuMiwwLDAsMSwzOC4yMywyNC43M0gxOTMuMzZhMjUuMTgsMjUuMTgsMCwwLDEsMjUuMTYsMjUuMTVaIi8+PC9nPjwvc3ZnPg==);
            background-repeat: no-repeat;
        }

    .twilio-root .Twilio-EntryPoint {
        position: relative !important;
        right: auto;
        bottom: auto;
        top: auto;
        left: auto;
        display: none;
        height: auto;
        font-weight: normal;
        color: #22609a;
        cursor: pointer;
        line-height: 1.3;
        text-decoration: underline;
        text-transform: none;
        overflow: visible;
        margin-bottom: 0.625rem;
        background: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .twilio-root .Twilio-EntryPoint:hover {
            color: #579cdc;
        }

    .twilio-root .Twilio-EntryPoint-Tagline {
        font-size: 0.75rem;
        font-weight: normal;
        letter-spacing: normal;
        text-transform: none;
        margin: 0;
    }

    .twilio-root .Twilio-Icon {
        display: none;
    }

    .twilio-root .Twilio-MainContainer {
        position: fixed;
        right: 0.875rem;
        bottom: 15%;
        z-index: 25;
        width: 17.5rem;
        height: 33.5rem !important;
        overflow: hidden;
        background: #fff;
        border: 1px solid #aaa;
        border-radius: 0.375rem;
        -moz-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.2);
    }

        .twilio-root .Twilio-MainContainer + .Twilio-EntryPoint {
            display: none;
        }

    .twilio-root .Twilio-MainHeader {
        font-size: 1.125rem;
        text-align: center;
        padding: 0.625rem;
        background-color: whitesmoke;
    }

        .twilio-root .Twilio-MainHeader .Twilio-MainHeader-default div {
            display: inline-block;
        }

        .twilio-root .Twilio-MainHeader .Twilio-MainHeader-default:before {
            content: "";
            display: inline-block;
            width: 1.4375rem;
            height: 1.4375rem;
            vertical-align: middle;
            margin-right: 0.25rem;
            background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMzAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2Y2NjcxMTt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmxpdmUtY2hhdDwvdGl0bGU+PGcgaWQ9Imljb25zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik0yNjQuOTEsMTAyLjU2SDI0NS4zN3Y1MS4yYTQwLjIsNDAuMiwwLDAsMS00MC4xNSw0MC4xNkg4MS40OHYyOWEyOC4zLDI4LjMsMCwwLDAsMjguMywyOC4zSDIzOS40Mmw0Ni4zMiwyOS42YTQuODYsNC44NiwwLDAsMCw3LjQ3LTQuMVYxMzAuODZBMjguMywyOC4zLDAsMCwwLDI2NC45MSwxMDIuNTZaIi8+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMTkzLjM2LDE4LjQ0SDM4LjIzQTMxLjQ4LDMxLjQ4LDAsMCwwLDYuNzksNDkuODhWMTk1LjcyYTgsOCwwLDAsMCwxMi4zLDYuNzRsNDUuNTUtMjkuMTFIMTkzLjM2YTMxLjQ3LDMxLjQ3LDAsMCwwLDMxLjQ0LTMxLjQ0di05MkEzMS40OCwzMS40OCwwLDAsMCwxOTMuMzYsMTguNDRaTTIwNi45LDE0MS45MWExMy41NSwxMy41NSwwLDAsMS0xMy41NCwxMy41NEg1OS40bC0yLjg2LDEuODNMMjQuNjksMTc3LjYzVjQ5Ljg4QTEzLjU1LDEzLjU1LDAsMCwxLDM4LjIzLDM2LjM1SDE5My4zNkExMy41NSwxMy41NSwwLDAsMSwyMDYuOSw0OS44OFptMTEuNjItOTJhMjUuMTgsMjUuMTgsMCwwLDAtMjUuMTYtMjUuMTVIMzguMjNBMjUuMiwyNS4yLDAsMCwwLDEzLjU4LDQ0LjgyLDI1LjIsMjUuMiwwLDAsMSwzOC4yMywyNC43M0gxOTMuMzZhMjUuMTgsMjUuMTgsMCwwLDEsMjUuMTYsMjUuMTVaIi8+PC9nPjwvc3ZnPg==);
            background-repeat: no-repeat;
        }

        .twilio-root .Twilio-MainHeader .Twilio-MainHeader-default > svg {
            position: absolute;
            top: 0.25rem;
            left: 0.25rem;
        }

            .twilio-root .Twilio-MainHeader .Twilio-MainHeader-default > svg path:last-child {
                fill: #ddd;
            }

        .twilio-root .Twilio-MainHeader .Twilio-Icon-Close {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            cursor: pointer;
        }

            .twilio-root .Twilio-MainHeader .Twilio-Icon-Close svg {
                display: block;
                width: 1.5rem;
                height: 1.5rem;
            }

            .twilio-root .Twilio-MainHeader .Twilio-Icon-Close path {
                stroke: #22609a;
            }

    .twilio-root .Twilio-MessagingCanvas {
        padding: 0.9375rem;
    }

    .twilio-root .Twilio-MessageList {
        font-size: 0.75rem;
        height: 21.875rem;
        overflow-y: auto;
    }

    .twilio-root .Twilio-InlineMessage {
        position: relative;
        font-size: 0.625rem;
        font-weight: bold;
        letter-spacing: 0.125rem;
        text-align: center;
        padding: 0.25rem;
        margin-bottom: 1rem;
        border-bottom: 1px dotted #ddd;
    }

    .twilio-root .Twilio-WelcomeMessage {
        text-align: center;
        margin-bottom: 1.5rem;
    }

    .twilio-root .Twilio-MessageListItem {
        clear: both;
        margin-bottom: 0.875rem;
    }

        .twilio-root .Twilio-MessageListItem:before, .twilio-root .Twilio-MessageListItem:after {
            content: " ";
            display: table;
        }

        .twilio-root .Twilio-MessageListItem:after {
            clear: both;
        }

    .twilio-root .Twilio-MessageBubble {
        width: 75%;
        padding: 0.5rem 0.75rem;
        background: #eee;
        border-radius: 0.375rem;
    }

        .twilio-root .Twilio-MessageBubble.css-fluh8x {
            float: right;
            text-align: right;
            background: #eaf7be;
        }

    .twilio-root .Twilio-MessageBubble-UserName,
    .twilio-root .Twilio-MessageBubble-Time {
        display: inline-block;
        font-size: 0.6875rem;
    }

    .twilio-root .Twilio-MessageBubble-UserName {
        font-weight: bold;
        margin-right: 0.25rem;
    }

        .twilio-root .Twilio-MessageBubble-UserName:after {
            content: "-";
            display: inline-block;
            margin-left: 0.25rem;
        }

    .twilio-root .Twilio-MessageBubble-Body {
        padding-top: 0.25rem;
    }

    .twilio-root .Twilio-MessageListItem-ReadStatus,
    .twilio-root .Twilio-TypingIndicator {
        clear: both;
        font-size: 0.6875rem;
        font-style: italic;
        color: #777;
        padding: 0 0.1875rem;
    }

    .twilio-root .Twilio-MessageListItem-ReadStatus {
        text-align: right;
    }

    .twilio-root .Twilio-MessageInputArea-TextArea {
        float: left;
        width: 80%;
        height: 3.125rem;
        margin-bottom: 1rem;
    }

    .twilio-root .Twilio-MessageInput-SendButton {
        position: relative;
        float: right;
        clear: none;
        width: 15%;
        height: 2.375rem;
        margin: 0.375rem;
        background: none !important;
        border: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .twilio-root .Twilio-MessageInput-SendButton:before {
            position: absolute;
            top: 0.125rem;
            left: 0.25rem;
            color: #22609a;
            content: "\f14d";
            font-size: 2.25rem;
            font-family: FontAwesome;
        }

        .twilio-root .Twilio-MessageInput-SendButton:hover:not(:disabled):before {
            color: #579cdc;
        }

    .twilio-root .Twilio-DynamicForm {
        padding: 0 !important;
        margin: 0;
    }

        .twilio-root .Twilio-DynamicForm button {
            margin-top: 0 !important;
        }

    .twilio-root .Twilio-PreEngagementCanvas {
        font-size: 0.75rem;
        padding: 0.9375rem;
    }

    .twilio-root hr {
        display: none;
    }

    .twilio-root label {
        font-size: .75rem;
        color: #3e3e3e;
        cursor: pointer;
        display: block;
        font-weight: bold;
        line-height: 1.5;
    }

    .twilio-root textarea {
        resize: none;
        -webkit-appearance: none;
        border-radius: .1875rem;
        background-color: #fff;
        font-family: inherit;
        border-style: solid;
        border-width: 1px;
        border-color: #aaa;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        color: #3e3e3e;
        display: block;
        font-size: .75rem;
        margin: 0 0 .625rem 0;
        padding: .3125rem;
        height: auto;
        line-height: inherit;
        min-height: 50px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all .15s linear
    }

    .twilio-root button {
        clear: both;
        border-style: solid;
        border-width: 1px;
        border-color: #a8a8a8;
        cursor: pointer;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        line-height: normal;
        margin: 0 0.5rem 1rem 0;
        position: relative;
        text-decoration: none;
        text-align: center;
        -webkit-appearance: none;
        border-radius: 3px;
        display: inline-block;
        padding-top: 0.25rem;
        padding-right: 0.5rem;
        padding-bottom: 0.3125rem;
        padding-left: 0.5rem;
        font-size: 0.875rem;
        background-color: #f3d45f;
        background-image: -webkit-linear-gradient(top,#f9eaaf,#f3d45f);
        background-image: -moz-linear-gradient(top,#f9eaaf,#f3d45f);
        background-image: -ms-linear-gradient(top,#f9eaaf,#f3d45f);
        background-image: -o-linear-gradient(top,#f9eaaf,#f3d45f);
        box-shadow: 1px 1px 1px rgba(0,0,0,.15);
        color: #3e3e3e;
        transition: background-color 300ms ease-out;
    }

        .twilio-root button:disabled {
            cursor: no-drop;
            color: #777;
            opacity: 0.7;
            background-color: #ddd;
            background-image: -webkit-linear-gradient(top,#eee,#ddd);
            background-image: -moz-linear-gradient(top,#eee,#ddd);
            background-image: -ms-linear-gradient(top,#eee,#ddd);
            background-image: -o-linear-gradient(top,#eee,#ddd);
            box-shadow: none;
        }

/* End Twilio */

.page_header,
.page_header_border { /* .page_header is the optional top area of a page. Usually includes a search and marketing stuff. */
    margin: -1.2336em -1.2336em 3em -1.2336em; /* Negative margins so you can apply gradient or other bg images that stretch to the edge of .main */
    padding: 1.2336em 1.2336em 0 1.2336em;
    position: relative;
    zoom: 1; /* So we can absolutely position items in IE */
    /* Round the top corners so bg images don't overlap .main */
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.page_header_border {
    border-bottom: solid 1px #e7e5dd;
}

    .page_header h1,
    .page_header_border h1 {
        color: #011960;
        font-size: 1.8em;
        margin-bottom: .8em;
    }

        .page_header h1.collapse {
            margin-bottom: 0;
        }

.page_header.hide-excess {
    overflow: hidden;
}

.page_header.image_only,
.page_header.with_text {
    /*overflow: hidden;*/
    padding: 0;
    margin-left: -2.5em;
    margin-bottom: 2.5em;
}

    .page_header.image_only img,
    .page_header.with_text img {
        max-width: 100%;
        display: block;
        border-radius: 5px 5px 0 0;
    }

    .page_header.with_text .hide-excess {
        overflow: hidden;
        position: relative;
    }

    .page_header.with_text .text_wrapper {
        position: absolute;
        top: 2.5em;
        left: 2.5em;
        z-index: 2;
        width: 50%;
    }

        .page_header.with_text .text_wrapper.row {
            width: auto;
            right: 2.5em;
        }

        .page_header.with_text .text_wrapper.smaller {
            width: 37%;
        }

        .page_header.with_text .text_wrapper.right {
            left: auto;
            right: 2.5em;
        }

        .page_header.with_text .text_wrapper.bottom {
            top: auto;
            bottom: 1em;
        }

    .page_header.with_text .text-3x {
        font-size: 4.112em;
        margin: 0;
    }

    .page_header.with_text .flip_contrast,
    .page_header.with_text .flip_contrast h1 {
        color: white;
    }

    .page_header.with_text .emboss {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    }

    .page_header.with_text .overlap_content {
        position: relative;
        z-index: 2;
        margin: -3em 2.5em 1.5em;
    }

.page_header .text_wrapper.radius {
    border-radius: 6px;
}

.page_header .text_wrapper.angled_banner {
    padding-top: 12px;
    background-color: rgba(0,0,0,0.5);
    transform: skew(20deg);
}

    .page_header .text_wrapper.angled_banner * {
        transform: skew(-20deg);
    }

    .page_header .text_wrapper.angled_banner.right {
        right: -20px;
        padding-right: 30px;
        padding-left: 30px;
    }

        .page_header .text_wrapper.angled_banner.right h1 {
            padding-left: 10px;
        }

.page_header .text_wrapper.paneled {
    padding: 2em;
    background-color: rgba(255,255,255, 0.75);
    background-image: -webkit-linear-gradient(top, rgba(255,255,255, 0.85) 0%, rgba(223, 238, 251, 0.75) 100%);
    background-image: -moz-linear-gradient(top, rgba(255,255,255, 0.85) 0%, rgba(223, 238, 251, 0.75) 100%);
    background-image: -ms-linear-gradient(top, rgba(255,255,255, 0.85) 0%, rgba(223, 238, 251, 0.75) 100%);
    box-sizing: border-box;
    box-shadow: 0 0 1px rgba(0,0,0,0.3);
}

.page_header.bordered {
    border-bottom: 6px solid #0097c5;
}

.page_header.collapse {
    margin-bottom: 0;
}

.page_header.with_prefix {
    overflow: hidden;
}

    .page_header.with_prefix img {
        position: absolute;
        top: 0;
    }

/*.page_header.with_prefix.ubox-reservation-instorage {
        padding-top: 1em;
        padding-right: 5em;
        overflow: visible !important;
}

    .ubox-reservation-instorage h3 {
        margin-bottom: 8px;
    }

    .ubox-reservation-instorage .button:before {
        content: "\f007";
        font-family: FontAwesome;
    }*/

.page_header .prefix_wrapper {
    position: relative;
    float: left;
}

    .page_header .prefix_wrapper.third_prefix {
        width: 33.333%;
    }

    .page_header .prefix_wrapper .form.action {
        margin: 0;
        background-color: rgba(205,233,137,0.85);
        border: none;
        border-radius: 5px 0 0 0;
    }

        .page_header .prefix_wrapper .form.action .grouping_button {
            padding-top: 1.4803em;
            padding-bottom: 1.398em;
        }

/* .page-banner class used to mimic the MVC .page-banner class */
.page-banner {
    position: relative;
    min-height: 15em;
    margin-bottom: 1.875em;
    overflow: hidden;
}

    .page-banner > img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .page-banner .content {
        position: relative;
        z-index: 2;
        margin: 2em;
    }

    .page-banner.ubox-reservation-instorage .content {
        margin: 0.75em 2em;
    }

    .page-banner.ubox-reservation-instorage h3 {
        margin-bottom: 0.75em;
    }

.flex-page-header {
    height: 499px;
    position: relative;
    z-index: 1;
    padding: 0;
    margin: -2.5em -2.5em 10em;
    border-bottom: 0;
}

    .flex-page-header .heading {
        position: absolute;
        top: 25px;
        left: 30px;
        z-index: 5;
        color: #FFF;
        text-shadow: 0px 0px 5px rgba(0,0,0,0.66);
        /*filter: dropshadow(color=#000000, offx=0, offy=0);*/
    }

        .flex-page-header .heading p {
            font-size: 1.25em;
        }

    .flex-page-header h1,
    .flex-page-header h2 {
        font-size: 2.5em;
        margin-bottom: .25em;
    }

    .flex-page-header .addthis_toolbox {
        position: absolute;
        right: 30px;
        top: 25px;
        z-index: 5;
    }

        .flex-page-header .addthis_toolbox a {
            color: #FFF;
        }

    .flex-page-header .flexslider {
        margin: 0;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

        .flex-page-header .flexslider .slides img {
            -webkit-border-radius: 6px 6px 0 0;
            -moz-border-radius: 6px 6px 0 0;
            border-radius: 6px 6px 0 0;
        }

    .flex-page-header .form-wrapper {
        width: 90%;
        position: absolute;
        bottom: -80px;
        z-index: 5;
        margin: 0 5%;
    }

.form-wrapper .form-banner {
    position: relative;
    top: 6px;
    z-index: 3;
    display: inline-block;
    font-size: 1.151315em;
    color: #fff;
    padding: 8px 12px;
    background-color: #f14304;
    background-image: -webkit-linear-gradient(top, #f16204, #f14304);
    border-radius: 6px 6px 0 0;
}

    .form-wrapper .form-banner p {
        margin: 0;
    }

    .form-wrapper .form-banner a {
        color: white;
    }

        .form-wrapper .form-banner a:hover {
            color: initial;
        }

.flex-page-header .action_form {
    position: relative;
    overflow: visible;
    margin-bottom: 1.4805em;
    background: #FFF;
    border-color: #ccc;
    border-top-color: #f14304;
    border-style: solid;
    border-width: 6px 1px 1px;
    -webkit-border-radius: 0px 0px 6px 6px;
    -moz-border-radius: 0px 0px 6px 6px;
    border-radius: 0px 0px 6px 6px;
}

    .flex-page-header .action_form:before,
    .flex-page-header .action_form:after {
        content: "";
        width: 98%;
        position: absolute;
        top: 80%;
        bottom: 15px;
        left: 10px;
        z-index: -1;
        background: rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 15px 10px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 15px 10px rgba(0,0,0,0.5);
        box-shadow: 0 15px 10px rgba(0,0,0,0.5);
        -webkit-transform: rotate(-2deg);
        -moz-transform: rotate(-2deg);
        -o-transform: rotate(-2deg);
        -ms-transform: rotate(-2deg);
        transform: rotate(-2deg);
    }

    .flex-page-header .action_form:after {
        -webkit-transform: rotate(2deg);
        -moz-transform: rotate(2deg);
        -o-transform: rotate(2deg);
        -ms-transform: rotate(2deg);
        transform: rotate(2deg);
    }

    .flex-page-header .action_form .row {
        width: auto;
        padding: 0 1.5em;
        margin: 0 0 0.9865em;
    }

    .flex-page-header .action_form > .row:first-child {
        background: #F1F1F1;
    }

    .flex-page-header .action_form .row .grouping {
        padding-bottom: 0.5em;
    }

    .flex-page-header .action_form .row .grouping_button {
        float: right;
        padding-top: 0.4935em;
    }

.flex-page-header .grouping_button img {
    vertical-align: bottom;
    margin-right: 1em;
}

.flex-page-header #vehicleSearch .grouping {
    width: 20%;
}

.flex-page-header .action_form h3 {
    float: left;
    font-size: 1.5em;
    line-height: 1.4;
    padding: 0.4935em 0;
    margin: 0;
}

.flex-page-header .tabs {
    float: right;
    clear: none;
    height: auto;
    padding: 0;
    margin: 1.1513em 0 -1px;
    border: none;
}

    .flex-page-header .tabs li {
        float: left;
        margin: 0 0 -1px 0.25em;
        padding-left: 0;
        overflow: hidden;
    }

    .flex-page-header .tabs a {
        display: block;
        font-size: small;
        color: #3e3e3e;
        text-decoration: none;
        padding: 0.7em 1em;
        background-color: #eaeae8;
        border: 1px solid #ded9c9;
    }

    .flex-page-header .tabs .active a {
        font-weight: bold;
        background-color: #fff;
        border-bottom-color: #fff;
    }

.flex-page-header fieldset {
    margin-bottom: 0;
}

    .flex-page-header fieldset li {
        display: inline-block;
        margin-right: 1em;
    }

    .flex-page-header fieldset.radio label {
        display: inline-block;
        font-weight: normal;
        line-height: 1;
    }

    .flex-page-header fieldset.radio input {
        height: auto;
    }

    .flex-page-header fieldset legend {
        font-size: 1em;
        line-height: 2em;
        padding-bottom: 0.5em
    }

.home_page .promo_area /* Larger promo areas that stand out more. Currently on the homepage and orders page */ {
    border-top: solid 1px #e7e5dd;
    border-bottom: solid 1px #e7e5dd;
    margin: 0 -2.5em;
    padding: 1.5em 2.5em;
    position: relative;
}

.promo_banner {
    position: relative;
    margin-bottom: 1.5em;
}

    .promo_banner strong {
        position: absolute;
        top: 1em;
        display: block;
        width: 100%;
        font-size: 1.8092em;
        font-weight: bold;
        color: white;
        line-height: 1.2;
        padding: 0 1em;
        box-sizing: border-box;
    }

        .promo_banner strong.bottom {
            top: auto;
            bottom: 1em;
        }

        .promo_banner strong.shadowed {
            text-shadow: 0 1px 3px rgba(0,0,0, 0.7);
        }

        .promo_banner strong.contrasted {
            color: inherit;
        }

            .promo_banner strong.contrasted.shadowed {
                text-shadow: 0 1px 3px rgba(255,255,255, 0.7);
            }

    .promo_banner img {
        max-width: 100%;
    }

@font-face {
    font-family: Poppins;
    src: url('/Misc/MvcContent/Css/fonts/Poppins-Regular.ttf') format('truetype');
}

@font-face {
    font-family: PoppinsBold;
    src: url('/Misc/MvcContent/Css/fonts/Poppins-Bold.ttf') format('truetype');
}

.home_page .self_service_banner {
    margin-bottom: 4.9342em;
}

.self_service_banner .text_wrapper {
    font-family: Poppins;
}

    .self_service_banner .text_wrapper b {
        font-family: PoppinsBold;
    }

.self_service_banner a {
    text-decoration: none;
}

.self_service_banner .text-standout {
    color: #f66711;
}

    .self_service_banner .text-standout + .icon {
        margin-top: 16px;
    }

        .self_service_banner .text-standout + .icon + b {
            font-size: 74%;
        }

.self_service_banner .price-tag {
    position: absolute;
    top: 10.3618em;
    right: -1.3158em;
}

.self_service_banner h1 {
    font-size: 3.783em;
    color: #8db20d;
    line-height: 1;
}

    .self_service_banner h1 > * {
        display: block;
    }

    .self_service_banner h1 small {
        font-size: 50%;
        color: #3e3e3e;
        line-height: 2;
    }

    .self_service_banner h1 b {
        letter-spacing: -1px;
    }

    .self_service_banner h1 .icon {
        font-size: 160%;
        line-height: 1.1;
        letter-spacing: -2px;
    }

        .self_service_banner h1 .icon img {
            width: 100px;
            display: inline-block;
            vertical-align: baseline;
            margin: -10px -5px;
        }

    .self_service_banner h1 .text-standout {
        font-size: 65%;
    }

.self_service_banner.with_text .overlap_content {
    margin-left: 0;
    margin-right: 0;
    background-color: #fff;
    border: 1px solid #aaa;
    box-shadow: 0 0 0.4112em rgba(0,0,0,0.15);
}

.self_service_banner .overlap_content .form,
.self_service_banner .overlap_content .topbar {
    padding: 1.3158em 1.6447em 0;
    margin-bottom: 0;
    overflow: visible;
}

.self_service_banner .overlap_content .topbar {
    padding-bottom: 1.3158em;
    background-color: whitesmoke;
    border-bottom: 1px solid #e1e1e1;
}


.standout, .standout2 {
    background-color: #faf8f6;
    border: solid 1px #e7e5dd;
    margin-bottom: 3em;
    padding: 1.5em 1.5em 0 1.5em;
    position: relative;
    zoom: 1;
    /* z-index:10; */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-sizing: border-box;
}

.standout2 {
    padding: .5em .5em 0 .5em;
}

.standout-dark {
    background-color: #dedede;
    border-color: #ccc;
}

.standout-alt {
    border: 1px solid #98C3E9;
    border-radius: 0.5em;
    background-color: #EBF5F7;
    margin-bottom: 1em;
}

.standout-overlap-top {
    margin-top: -7em;
}

.standout_alternate {
    background-color: white;
    border-color: #ddd;
    box-shadow: 0 0 0.8442em rgba(0,0,0,0.15);
}


.gradient h1,
.gradient h2 {
    color: #011960; /* Make the text dark blue if the blue gradient is applied */
}

.content_with_sidebar {
    float: right;
    width: 76%;
}

.content_with_sidebar_cart { /* Cart needs more room than the standard sidebar. Also it's on the left side. */
    float: left;
    width: 62%;
}

    /* Changing the look and feel of upsells when they are in the cart.  */

    .content_with_sidebar_cart h2 {
        font-size: 1.4em;
    }

        .content_with_sidebar_cart h2.divider {
            border-bottom: 0;
        }

    .content_with_sidebar_cart .supplies_upsell .more /* This is temporary until the programmers hide this in the cart only */ {
        display: none;
    }


    .content_with_sidebar_cart .row {
        border-bottom: solid 1px #e7e5dd;
    }



.sidebar {
    float: left;
    width: 20%;
}

    .sidebar h1 { /* Sometimes the first thing in the sidebar is a more suitable h1 but should look like an h3. See moving supplies and about section. */
        font-size: 1.33em;
        margin-bottom: 1.13em;
    }

.sidebar_cart {
    float: right;
    width: 34%;
}

.indent {
    margin-left: 1.5em;
}



/* =Header ------------------------------------------------------------- */

.header { /* Contains the logo, cart and navigation */
    margin: auto;
    margin-bottom: 26px; /* this is 2.55 to make safari render the same margin as other browsers (it was off by 1px). */
    position: relative;
    z-index: 3;
}

    .header .row { /*  Contains the logo and cart */
        position: relative;
        margin: 0 auto .5em;
        padding: 0;
        max-width: 1100px;
        min-width: 912px;
        box-sizing: border-box;
    }

.header_logo { /* Main U-Haul logo and tagline. Links to homepage. */
    background: url(Images/uhaul-logo.png) no-repeat top left;
    float: left;
    height: 25px; /* Width and height are the size of the bg image. */
    width: 160px;
    text-indent: -9999px;
    margin: 0 7px 7px 8px;
}

.corp_logo {
    background-repeat: no-repeat;
    height: 31px;
    width: 350px;
}

.header_tagline {
    float: left;
    height: 22px;
    font-size: 19px;
    line-height: 1;
    color: #333 !important;
    text-decoration: none;
    margin-top: 4px;
}

.header_accountlinks {
    padding-right: 8px;
}

    .header_accountlinks li {
        margin: 8px 0 0 16px;
        float: right;
        padding: 0;
        font-size: 1.17em;
    }

        .header_accountlinks li .fa {
            display: inline-block;
            font-size: 16px;
            /*color: #22609a;*/
            margin: 0 8px;
        }

.header.has-header-message {
    margin-bottom: 0.8224em;
}

    .header.has-header-message .header-message {
        padding-top: 0.8224em;
        margin: 0;
    }

    .header.has-header-message .alert {
        text-shadow: none;
        padding: 0 0 0 20px;
        background-color: transparent;
        border: none;
        color: inherit;
    }

/*.header_lookup a, .header_cart a, li.header_account, li.header_language {
    padding-left: 1.5em;
}*/

/*.header_lookup a {
    background: url(Images/Icons/schedule.gif) no-repeat bottom left;
    white-space: nowrap;
}*/

.header_accountlinks li.header_account {
    line-height: 1.5;
    padding-left: 22px;
    margin-left: 20px;
    background: url(Images/Icons/Account.gif) no-repeat left center;
}

.header_account span {
    display: inline-block;
    font-weight: bold;
    text-transform: capitalize;
    margin-right: 14px;
}
/*.header_language {
    background: url(Images/Icons/globe-icon.png) no-repeat bottom left;
}*/


/*.header_cart a { 
    background: url(Images/Icons/Cart.gif) no-repeat bottom left;
    white-space: nowrap;
}*/
/* Dropdown menu */
.dropdown {
    position: relative;
    min-width: 9.137427em;
}

    .dropdown a {
        position: relative;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
    }

        .dropdown a.username {
            font-weight: bold;
            cursor: pointer;
            padding: 0 2.5em;
            background: url(Images/Icons/Account.gif) no-repeat 1em center, url(Images/Calendar/arrow_down.gif) no-repeat 90% center;
        }

    .dropdown.open .dropmenu {
        display: block;
    }

    .dropdown.open:before {
        content: '';
        position: absolute;
        top: -0.7029em;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .dropdown.open:before,
    .dropmenu {
        border-color: #ded9c9;
        border-style: solid;
        border-width: 1px 1px 0;
        border-radius: 6px 6px 0 0;
        background: white;
        box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
    }

.dropmenu {
    display: none;
    position: absolute;
    z-index: 1010;
    right: 0;
    left: 0;
    background: white;
    border-width: 0 1px 1px;
    border-radius: 0 0 6px 6px;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
}

    .dropmenu ul {
        list-style: none;
        padding: 0.70285em 0;
        margin: 0;
    }

        .dropmenu ul li {
            float: none;
            margin: 0;
        }

            .dropmenu ul li a {
                display: block;
                font-weight: normal;
                padding: 0.4286em 1.14285em;
            }

                .dropmenu ul li a:hover {
                    text-decoration: underline;
                }

.dropdown.type-filter {
    margin-bottom: 0.8224em;
}

    .dropdown.type-filter:before {
        display: none;
    }

    .dropdown.type-filter a {
        font-size: 12px;
    }

    .dropdown.type-filter .dropmenu {
        right: auto;
        padding: 0.8224em;
        margin-top: 0.4112em;
        border-width: 1px;
        border-radius: 6px;
    }
/* Positioning the transparent gifs to make the flexible rounded corners */
.nav_top_left,
.nav_bottom_left,
.nav_top_right,
.nav_bottom_right {
    position: absolute;
}

.nav_top_left {
    left: 0;
    top: 0;
}

.nav_bottom_left {
    bottom: 0;
    left: 0;
}

.nav_top_right {
    right: 0;
    top: 0;
}

.nav_bottom_right {
    bottom: 0;
    right: 0;
}

.header_navigation { /* Main orange navigation bar. */
    background: #f66711;
    position: relative;
    width: 100%;
    height: 3.455em;
    z-index: 1;
}

    .header_navigation ul {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        list-style: none;
        padding-right: 42px;
    }

    .header_navigation li {
        position: relative;
        width: auto;
        flex: 1 1 auto;
        margin: 0;
    }

        .header_navigation li > a {
            color: #fff;
            display: block;
            line-height: 42px;            
            text-decoration: none;
        }

        .header_navigation li:hover > a,
        .header_navigation li:focus > a {
            background: rgba(255,255,255,0.15);
        }

        .header_navigation li:hover > .sub-menu,
        .header_navigation li:focus > .sub-menu {
            opacity: 1;
            visibility: visible;
            z-index: 20;
        }             

        .header_navigation li a { /* Main nav links - trucks, trailers, supplies, locations */
            font-size: 1.15131em;
            font-weight: bold;
            padding: 0 8px;
            color: #fff;
            display: block;
            line-height: 42px;
            text-decoration: none;
            cursor: pointer;
            text-align: center;
        }

            .header_navigation li a span.nowrap {
                top: 0;
                left: 0;
                color: inherit;
            }



@-moz-document url-prefix() {
    .header_navigation li a.trucks {
        padding-left: 22px;
    }

    .header_navigation li a {
        padding: 0 0.4112em;
    }
}

ul.sub-menu {
    display: block !important;
    position: absolute;
    margin-left: 0;
    background: #fff;
    padding: 1.125rem 1.875rem 1.875rem;
    list-style: none;
    border: 0.0625rem solid #dedaca;
    box-shadow: 0 0.625rem 0.625rem rgba(0,0,0,.25);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    border-top: none;
}

    ul.sub-menu fieldset > legend {
        font-size: 16px;
        padding-bottom: 8px;
    }

.sub-menu li a {
    padding: 0;
    text-align: left;
}

    .sub-menu li a i.fa {
        font-size: 16px;
    }

    .sub-menu li a:hover,
    .sub-menu li a:focus,
    .sub-menu li a:active,
    .sub-menu li a:active a {
        background: none;
    }

ul.sub-menu.hide {
    display: none;
}

ul.sub-menu.sub-menu-trucks {
    width: 11.875rem;
}

ul.sub-menu.sub-menu-trailers {
    width: 13.75rem;
}

ul.sub-menu.sub-menu-ubox {
    width: 13.125rem;
}

ul.sub-menu.sub-menu-storage {
    width: 13.125rem;
}

ul.sub-menu.sub-menu-supplies {
    width: 13.125rem;
}

ul.sub-menu.sub-menu-hitches {
    width: 13.125rem;
    right: 0;
}

    ul.sub-menu.sub-menu-hitches img {
        width: 100%;
    }

ul.sub-menu.sub-menu-labor {
    width: 15rem;
    left: 0;
    padding-bottom: 1rem;
}

div.search-panel {
    padding: 1.25rem;
    margin: 1.25rem 0;
    background: #f5f3ec;
    border: 0.0625rem solid #dedaca;
    border-radius: 0.3125rem;
}

    div.search-panel i {
        font-size: 1.25rem;
        margin-top: 1.25rem;
        position: relative;
        left: 0.675rem;
        top: -0.125rem;
    }

    div.search-panel fieldset {
        margin-bottom: 0;
        width: 100%;
        font-size: 0.75rem;
        float: none;
    }

    div.search-panel .label_aria {
        margin: 0 0 0.5rem;
    }

    div.search-panel input {
        -webkit-appearance: none;
        border-radius: .1875rem;
        background-color: #fff;
        font-family: inherit;
        border-style: solid;
        border-width: 1px;
        border-color: #aaa;
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        color: #3e3e3e;
        display: block;
        font-size: .75rem;
        margin: 0;
        padding: .3125rem;
        height: 1.625rem;
        width: auto;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        transition: all .15s linear;
    }

    div.search-panel .button {
        display: inline-block;
        font-size: 0.875rem;
        color: #3e3e3e !important;
        border: 0.0625rem solid #ddd;
        height: 1.75rem !important;
        line-height: 0.25rem;
        padding-left: 0.625rem;
        padding-right: 1.875rem;
        margin-top: 0.5rem;
        position: relative;
        border-bottom-color: #a8a8a8;
        border-right-color: #a8a8a8;
        box-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(0,0,0,.15);
        -moz-box-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(0,0,0,.15);
        -webkit-box-shadow: 0.0625rem 0.0625rem 0.0625rem rgba(0,0,0,.15);
        border-radius: 0.1875rem !important;
        background-image: -webkit-linear-gradient(top,#f9eaaf,#f3d45f);
        background-image: -moz-linear-gradient(top,#f9eaaf,#f3d45f);
        background-image: -o-linear-gradient(top,#f9eaaf,#f3d45f);
    }

    div.search-panel .button-icon,
    div.search-panel .datepicker {
        position: relative;
    }

    div.search-panel .button-icon {
        display: inline-block;
    }

        div.search-panel .button-icon:after,
        div.search-panel .datepicker:after {
            position: absolute;
            font-family: FontAwesome;
            font-size: 0.875rem;
            font-weight: normal;
        }

        div.search-panel .button-icon:after {
            content: "\f138";
            color: #64a70e;
            margin-left: 0.375rem;
            top: 0.9375rem;
            right: 0.625rem;
        }

    div.search-panel .datepicker:after {
        content: "\f073";
        top: 1.5625rem;
        right: 0.5rem;
        font-size: 1.125rem;
    }

    div.search-panel span.error-item {
        position: static;
        display: block;
        color: #bd2e11 !important;
    }

    div.search-panel i, div.search-panel a {
        color: #22609a;
    }

    div.search-panel strong {
        font-size: 1rem;
        font-weight: bold;
    }

    div.search-panel p {
        margin: 1rem 0 0.5rem;
    }

    div.search-panel .large-icon {
        font-size: 2rem;
    }



ul.sub-menu li {
    padding-top: 0;
    padding-bottom: 0;
    border-top: 0.0625rem solid #dedaca;
    width: 100%;
}

    ul.sub-menu li:nth-child(3) {
        border-top: none;
        padding-top: 0;
    }

    ul.sub-menu li:last-child {
        border-top: none;
        padding-top: 0.25rem;
        padding-bottom: 0;
    }

    ul.sub-menu li a {
        font-size: 0.8125rem !important;
        color: #666 !important;
    }

        ul.sub-menu li a:hover {
            background: none;
        }

        ul.sub-menu li a i {
            color: #22609a;
        }

    ul.sub-menu li i.fa {
        display: block;
    }

    ul.sub-menu li p {
        margin-top: 1rem;
    }

    ul.sub-menu li i.fa-info-circle {
        float: left;
    }

    ul.sub-menu li i.large-icon {
        font-size: 1.75rem;
    }

    ul.sub-menu li strong {
        font-size: 1rem;
        line-height: 1.5;
    }

    ul.sub-menu li span {
        position: relative;
        top: -0.875rem;
        left: 0.5rem;
        color: #22609a;
    }

ul.sub-menu .large-icon {
    font-size: 1.75rem;
    color: #22609a;
}

.site_search {
    display: none;
    position: absolute;
    z-index: 10;
    top: 100%;
    right: 0;
    width: 300px;
    padding: 6px 9px;
    background-color: #444;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    box-sizing: border-box;
}

.search-trigger {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    outline: none;
    padding: 12px 13px;
    background: none;
    border: none;
}

    .search-trigger .fa {
        display: block;
        font-size: 18px;
        color: #fff;
        margin-right: 2px;
    }

    .search-trigger.open {
        background-color: #444;
    }

.header_search {
    display: block;
    width: 100%;
    font-size: 12px;
    font-family: inherit;
    color: #666;
    margin: 0;
    padding: 4px;
    border-radius: 3px;
    border: 1px solid #3e3e3e;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-sizing: border-box;
    position: relative;
}

.site_search i.i-search {
    display: block;
    position: absolute;
    color: #64a70e;
    right: 13px;
    top: 8px;
    font-size: 20px;
}

/* =Navigation ----------------------------
.navigation is a horizontal link list by default but is modified by parent containers like .sidebar and .footer. */

ul.navigation {
    list-style-type: none;
    margin-bottom: 1.5em;
}

    ul.navigation.no_bottom {
        margin-bottom: 0;
    }

    ul.navigation li {
        border-right: solid 1px #d8d6d0;
        display: inline;
        margin-right: 1em;
        padding-left: 0;
        padding-right: 1em;
    }

        ul.navigation li.active a {
            font-weight: bold;
        }

        ul.navigation li.navigation_last,
        ul.navigation li:last-child { /* Removes right border on last nav item. */
            border: 0;
            padding-right: 0;
            margin-right: 0;
        }

.sidebar ul.navigation { /* When navigation is in a sidebar it makes a vertical list. */
    list-style: none;
    margin-bottom: 1.5em;
    padding: 0;
}

    .sidebar ul.navigation li {
        border: none;
        display: inline;
        margin: 0;
        padding: 0;
    }

        .sidebar ul.navigation li a {
            border-bottom: solid 1px #e7e5dd;
            display: block;
            font-weight: bold;
            padding: .83em 0;
            text-decoration: none;
            width: 100%;
        }

        .sidebar ul.navigation li.navigation_first a {
            border-top: solid 1px #e7e5dd;
        }


        .sidebar ul.navigation li.active a,
        .sidebar ul.navigation li a:hover,
        .sidebar ul.navigation li a:focus,
        .sidebar ul.navigation li a:active {
            /* If we ever want to set a hover or active state...
background-image: url(Images/Icons/SidebarNavActive.png);
background-repeat: no-repeat;
background-position: right;
*/
        }

a.phonelink,
a.phonelink:hover,
a.phonelink:active,
a.phonelink:visited {
    /* remove additional styling from telephone links */
    color: inherit;
    text-decoration: inherit;
}

.footer ul.navigation li { /* .navigation in the footer creates vertical link lists. */
    border: none;
    display: block;
    margin: 0;
    margin-bottom: .75em;
    padding: 0;
}

    .footer ul.navigation li a {
        font-weight: normal;
        /*text-decoration: none;*/
    }



.footer .column_last span ul.navigation /* this excludes the investing list from the rule set above */ {
    padding-bottom: 0;
}

.footer .column_4 .column {
    margin-right: 3.5%;
}

.footer_logo {
    margin-bottom: .5em;
}

.footer h5 {
    border-bottom: solid 1px #e7e5dd;
    margin-bottom: 2em;
    padding-bottom: .5em;
}

.badge {
    margin: auto;
    width: 78em;
    height: auto;
    position: relative;
    z-index: 100;
}

    .badge a {
        width: 120px;
        height: 121px;
    }

    .badge img {
        margin-top: -15em;
    }

/* tabs */
.tabs { /* Tabs are for displaying multiple info on a single thing. See locations detail page. */
    border-bottom: solid 1px #ded9c9;
    clear: both;
    height: 3.2em; /* Needs height since it only has an absolutely positioned element in it. */
    margin: 0 -2.5em 3em -2.5em;
    overflow: visible;
    padding: 0 2.5em 0 2.5em;
    position: relative; /* So you can absolutely position the ul and get it to overlap the border-bottom. */
}

    .tabs ul {
        bottom: -1px; /* Good browsers use this. */
        list-style: none;
        margin: 0;
        padding: 0;
        position: absolute;
    }

    .tabs li {
        float: left;
        margin: 0 1em 0 0; /* Right margin sets space between tabs. */
        padding-left: 0;
    }

        .tabs li a {
            background-color: #eaeae8;
            border: solid 1px #ded9c9;
            color: #3e3e3e;
            display: block;
            font-size: 1.17em;
            padding: .7em 1em;
            text-decoration: none;
            -webkit-border-top-left-radius: 6px;
            -webkit-border-top-right-radius: 6px;
            -moz-border-radius-topleft: 6px;
            -moz-border-radius-topright: 6px;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
        }

            .tabs li a:visited {
                color: #3e3e3e; /* IE 6 needs this */
            }

            .tabs li a:hover,
            .tabs li a:focus,
            .tabs li a:active {
                background-color: #faf8f6;
                color: #3e3e3e;
            }

        .tabs li.active a,
        .tabs li.active a:hover,
        .tabs li.active a:focus,
        .tabs li.active a:active {
            background-color: #fff;
            border-bottom: solid 1px #fff; /* White border overlaps .tab border to make the tab look active. */
            font-weight: bold;
        }

        .tabs li img { /* So image resizing doesn't mess up tabs with images. See equipment res quote page. */
            max-width: none;
        }

    .tabs.tabs-alternate li {
        margin: -3px 3px 0 0;
    }

        .tabs.tabs-alternate li a {
            width: 82px;
            height: 45px;
            font-size: 1.02em;
            text-align: center;
            padding: 8px 3px;
            background-color: #EAEAE8;
            border-color: #D0CBBB;
            box-shadow: 0 1px 3px rgba(255,255,255,0.5) inset;
            box-sizing: border-box;
        }

        .tabs.tabs-alternate li.active a {
            background-color: white;
            border-bottom-color: white;
        }

.tabs-nojs:before,
.tabs-nojs:after {
    content: "";
    display: table;
    clear: both;
}

.tabs-nojs .tab-menu,
.tabs-nojs .tab-content {
    box-sizing: border-box;
}

    .tabs-nojs > input[type="radio"],
    .tabs-nojs .tab-content > div {
        display: none;
    }

.tabs-nojs > input.tab-1:checked ~ .tab-content .tab-1,
.tabs-nojs > input.tab-2:checked ~ .tab-content .tab-2,
.tabs-nojs > input.tab-3:checked ~ .tab-content .tab-3 {
    display: block;
}

.tabs-nojs.offset {
    margin: -2.5em -2.5em 0;
}

.tabs-nojs.vertical {
    margin-bottom: 1.5em;
}

    .tabs-nojs.vertical .tab-menu {
        float: left;
        width: 33.333%;
        list-style: none;
        margin: 20px 0 0;
        border-top: solid 1px #ddd;
    }

        .tabs-nojs.vertical .tab-menu li {
            margin: 0;
        }

        .tabs-nojs.vertical .tab-menu label {
            position: relative;
            display: block;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            padding: 20px 24px;
            background-color: whitesmoke;
            border-bottom: solid 1px #ddd;
        }

    .tabs-nojs.vertical > input.tab-1:checked ~ .tab-menu label.tab-1,
    .tabs-nojs.vertical > input.tab-2:checked ~ .tab-menu label.tab-2,
    .tabs-nojs.vertical > input.tab-3:checked ~ .tab-menu label.tab-3 {
        background-color: white;
    }

        .tabs-nojs.vertical > input.tab-1:checked ~ .tab-menu label.tab-1:before,
        .tabs-nojs.vertical > input.tab-2:checked ~ .tab-menu label.tab-2:before,
        .tabs-nojs.vertical > input.tab-3:checked ~ .tab-menu label.tab-3:before,
        .tabs-nojs.vertical > input.tab-1:checked ~ .tab-menu label.tab-1:after,
        .tabs-nojs.vertical > input.tab-2:checked ~ .tab-menu label.tab-2:after,
        .tabs-nojs.vertical > input.tab-3:checked ~ .tab-menu label.tab-3:after {
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            display: block;
        }

        .tabs-nojs.vertical > input.tab-1:checked ~ .tab-menu label.tab-1:before,
        .tabs-nojs.vertical > input.tab-2:checked ~ .tab-menu label.tab-2:before,
        .tabs-nojs.vertical > input.tab-3:checked ~ .tab-menu label.tab-3:before {
            left: 0;
            width: 5px;
            background-color: #f66711;
        }

        .tabs-nojs.vertical > input.tab-1:checked ~ .tab-menu label.tab-1:after,
        .tabs-nojs.vertical > input.tab-2:checked ~ .tab-menu label.tab-2:after,
        .tabs-nojs.vertical > input.tab-3:checked ~ .tab-menu label.tab-3:after {
            left: 100%;
            width: 1px;
            background-color: white;
        }

        .tabs-nojs.vertical > input.tab-1:checked ~ .tab-menu label.tab-1 img.active,
        .tabs-nojs.vertical > input.tab-2:checked ~ .tab-menu label.tab-2 img.active,
        .tabs-nojs.vertical > input.tab-3:checked ~ .tab-menu label.tab-3 img.active {
            display: block;
        }

        .tabs-nojs.vertical > input.tab-1:checked ~ .tab-menu label.tab-1 img:first-of-type,
        .tabs-nojs.vertical > input.tab-2:checked ~ .tab-menu label.tab-2 img:first-of-type,
        .tabs-nojs.vertical > input.tab-3:checked ~ .tab-menu label.tab-3 img:first-of-type {
            display: none;
        }

    .tabs-nojs.vertical .tab-menu label img {
        float: left;
        margin-right: 24px;
        max-width: 40px;
        max-height: 30px;
    }

        .tabs-nojs.vertical .tab-menu label img.active {
            display: none;
        }

    .tabs-nojs.vertical .tab-content {
        float: right;
        width: 66.666%;
        padding: 25px;
        border-left: solid 1px #ddd;
    }


/* =Tables */

table {
    border-collapse: collapse;
    margin-bottom: 1.5em;
    width: 100%;
}

td,
th {
    padding: 1.5em 1.5em 1.5em 0;
    text-align: left;
    vertical-align: top;
    border-color: #e7e5dd;
    border-style: solid;
    border-width: 0 0 1px;
}

table tr td.row_first,
table tr th.row_first {
    border-top: solid 1px #e7e5dd;
}

table td label.label_aria.checkbox {
    padding: 0;
}

thead th,
tfoot td {
    font-size: 1.33em;
    font-weight: bold;
    padding: 0 1.13em 1.13em 0;
}


tbody th {
    font-weight: normal;
}

td:last-child,
th:last-child { /*makes things line up against the right margin automagically in everything but ie*/
    padding-right: 0;
}



td.price input { /* If a button is in the price column, set it to the size it should be. */
    font-size: .9em;
}

.data_table {
    background: #fff;
    border: solid 1px #e7e5dd;
    margin: 1px 1px 1.5em 1px;
    width: 99.5%;
}

    .data_table td,
    .data_table th {
        border: solid 1px #e7e5dd;
        padding: 0.8224em;
    }

    .data_table th {
        text-align: left;
    }

        /* This is needed to override the alignment in a data table to match what you defined. Otherwise, it will always inherit align left from above.*/
        .data_table th.align_right,
        .align_right th {
            text-align: right;
        }

        .data_table th.align_center,
        .align_center th {
            text-align: center;
        }


    /*.data_table td:last-child,
        .data_table th:last-child {
            padding-right: .75em;
        }*/


    .data_table thead th,
    .data_table tr.thead th,
    .data_table tfoot td,
    .data_table tr.tfoot td,
    .data_table tbody tr.alternating_row th,
    .data_table tbody th.alternating_row,
    td.alternating_row,
    tr.alternating_row td,
    tr.alternating_row th {
        background: #F5F5F5;
    }

    .data_table thead th,
    .data_table tfoot td,
    .data_table tr.thead th,
    .data_table tr.tfoot td {
        font-size: inherit;
        font-weight: bold;
        padding: 0.8224em;
    }

        .data_table thead th .small,
        .data_table tfoot td .small,
        .data_table tr.thead th .small,
        .data_table tr.tfoot td .small {
            font-weight: normal;
            font-size: .75em;
        }





    .data_table thead + tbody th {
        border: solid 1px #e7e5dd;
        padding: .3em; /* why is this in here? It's makes th spacing look weird compared to other cells */
        background: white;
    }

    .data_table th p { /* used when you want some normal sized text along with the header */
        font-weight: normal;
        margin-top: .3em;
        margin-bottom: .3em;
    }

    .data_table td.price {
        font-size: 1.33em;
    }

    .data_table tfoot td.price {
        font-size: inherit;
    }


table.no_header {
    border-top: solid 1px #e7e5dd;
    border-collapse: separate;
}



.plain_table {
    background: #fff;
    border: none;
    margin: 0;
    width: 100%;
}

    .plain_table td,
    .plain_table th {
        border: none;
        padding: 0 .5em 1em 0;
    }

    .plain_table th {
        text-align: left;
    }

/*.header-table thead {
    border-bottom: solid 1px #e7e5dd;
}
.header-table thead th {
    font-size: inherit;
    padding: 0.4112em 0.8224em
}
.header-table tbody td {
    padding: 0.8224em;
    border: none;
}*/


/* =Text -------------------------- */

ul, dl {
    list-style-type: none;
    margin-bottom: 1.5em;
}

li, dd {
    margin-bottom: .75em;
}

dt {
    font-weight: bold;
    margin-bottom: .75em;
}

dd {
    margin-left: 1.5em;
    line-height: 1.5em;
}

    dd + dt {
        margin-top: 1.5em;
    }

dt.light {
    font-weight: normal;
}

dl.no-indent dd {
    margin-left: 0;
}

dl.compact dt {
    margin-bottom: 0;
}

dl.compact dd {
    margin-left: 0;
}

dl.inline.split dt,
dl.inline.split dd {
    width: 50%;
}

dl.inline.split dd {
    text-align: right;
    margin: 0 0 4px;
}

dl.inline.text-left dd {
    text-align: left;
    margin: 0 0 4px;
}

ul.compact li {
    margin-bottom: 0.4112em;
}

.inline {
    margin-bottom: 0.98681em;
}

    .inline:after {
        content: "";
        display: block;
        clear: both;
    }

    .inline dt, .inline dd {
        float: left;
        line-height: 1.5;
        margin: 0;
    }

    .inline dd {
        margin-left: 0.8224em;
    }

    .inline.no-offset {
        margin-bottom: 0;
    }

    .inline dd + dt {
        clear: left;
    }

    .inline li {
        display: inline-block;
        vertical-align: baseline;
        margin-right: 0.8224em;
    }

        .inline li:last-child {
            margin-right: 0;
        }

    .inline.separated li {
        padding-right: 0.4934em;
        margin: 0 0.4934em 0.4934em 0;
        border-right: 1px solid #555;
    }

        .inline.separated li:last-child {
            padding-right: 0;
            border-right: 0;
        }

    .inline.heavy li {
        font-weight: bold;
    }

dl.inline.align_center dt,
dl.inline.align_center dd {
    display: inline-block;
    float: none;
}

.inline-group dl.inline {
    margin-bottom: 0.4112em;
}

ul.bullets li { /* If you want bullet points */
    background: url(Images/Icons/Bullet.gif) no-repeat 0em .15em;
    padding-left: 1.5em;
    line-height: 1.5em;
}

ul.bullets p {
    margin-bottom: 0.125em;
}

ul.big li /* Move the bullet point if the font is bigger */ {
    background-position: 0em .2em;
}

ol li {
    margin-left: 3em;
}

ol {
    margin-bottom: 1.5em;
}

ul.iconlist li {
    line-height: 1.4;
    position: relative;
    padding-left: 1.6884em;
}

    ul.iconlist li:before,
    ul.iconlist.svg li > img {
        position: absolute;
        left: 0;
        line-height: 1;
    }

    ul.iconlist li:before {
        font-family: FontAwesome;
        font-size: 16px;
        color: #6bc703;
        content: "\f058";
    }

ul.iconlist.svg li:before {
    content: "";
}

ul.iconlist.medium-svg li {
    padding-left: 60px;
}

    ul.iconlist.medium-svg li > img {
        max-width: 40px;
        max-height: 40px;
    }

ul.iconlist.large-svg li {
    padding-left: 80px;
}

    ul.iconlist.large-svg li > img {
        max-width: 60px;
        max-height: 60px;
    }

dl.iconlist {
}

    dl.iconlist dt,
    dl.iconlist dd {
        padding-left: 40px;
    }

    dl.iconlist dd {
        margin-left: 0;
    }

    dl.iconlist dt {
        position: relative;
        margin-bottom: 0.4112em;
    }

        dl.iconlist dt:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            margin-bottom: 0.4112em;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

    dl.iconlist.propane dt:before {
        width: 56px;
        height: 56px;
        background-image: url(Images/Icons/propane-tank-icon.svg);
    }

    dl.iconlist.propane dt,
    dl.iconlist.propane dd {
        padding-left: 60px;
    }

dl.count-list {
    counter-reset: term-counter;
}

    dl.count-list dt:before {
        content: counter(term-counter);
        counter-increment: term-counter;
    }

    dl.count-list.propane dt:before {
        font-size: 26px;
        font-weight: normal;
        color: white;
        line-height: 60px;
        text-align: center;
    }

.step-list {
    counter-reset: item-counter;
    list-style: none;
    padding: 10px;
}

    .step-list li,
    .step-list li:before {
        border: solid 2px #ddd;
    }

    .step-list li {
        position: relative;
        display: inline-block;
        vertical-align: top;
        min-width: 100px;
        font-weight: bold;
        color: inherit;
        text-align: center;
        white-space: nowrap;
        padding: 6px;
        margin: 0 37px 0 0;
        border-radius: 4px;
        box-sizing: border-box;
    }

        .step-list li:last-child {
            margin-right: 0;
        }

        .step-list li:before {
            content: counter(item-counter);
            counter-increment: item-counter;
            display: block;
            width: 16px;
            height: 16px;
            position: absolute;
            top: -10px;
            left: -10px;
            font-size: 14px;
            padding: 4px;
            background-color: #fff;
            border-radius: 100%;
        }

        .step-list li span {
            display: block;
        }

        .step-list li img[src$=".svg"] {
            display: inline-block;
            max-width: 70px;
            max-height: 30px;
        }


/* Toggle answer question list (FAQ) */
.question-list {
    padding: 1.5em;
    overflow: auto;
    max-height: 40em;
}

    .question-list ul {
        list-style: none;
        line-height: 1.3;
        margin: 0;
    }

        .question-list ul li {
            margin-bottom: 0.5em;
        }

            .question-list ul li:last-child {
                margin-bottom: 0;
            }

    .question-list .q-toggle {
        font-weight: bold;
        color: #3e3e3e;
        text-decoration: none;
        cursor: pointer;
        display: inline-block;
        margin-bottom: 0.5em;
    }

.q-toggle:hover {
    color: #579cdc;
}

.question-list .answer {
    /*display: none;*/
}

/* =Headers */

/* Fancy header and list, adds star icon */
.fancy, .fancy-list li {
    position: relative;
    padding-left: 1.5em;
}

.fancy-list {
    list-style: none;
}

    .fancy-list li {
        padding-left: 2.5em;
    }

        .fancy:before, .fancy-list li:before {
            content: "";
            display: block;
            width: 2em;
            height: 2em;
            position: absolute;
            left: 0;
            background: url(MyPhotos/images/star_icon.png) left top no-repeat;
        }

h1 {
    font-size: 2em;
    margin-bottom: .75em;
}

h2, .match-h2 {
    font-size: 1.67em;
    margin-bottom: .9em;
}


p + h2,
ul + h2, ol + h2, dl + h2,
table + h2 { /* Adds extra space between a paragraph and a header. Doesn't work in IE 6. */
    padding-top: .9em;
}


h2.divider,
h3.divider { /* Puts a border under the h2. Mostly used to separate product rows and related supplies or services. */
    border-bottom: solid 1px #e7e5dd;
    margin-bottom: 1em;
    padding-bottom: .45em;
}

.heading-offset {
    padding-top: 1em;
}

h3 {
    font-size: 1.33em;
    margin-bottom: 1.13em;
}

p + h3,
ul + h3, ol + h3, dl + h3,
table + h3 {
    padding-top: 1.13em;
}

h4, .match-h4 {
    font-size: 1.17em;
    margin-bottom: 1.29em;
    line-height: 1.4;
}

p + h4,
ul + h4, ol + h4, dl + h4,
table + h4 {
    padding-top: 1.29em;
}

h5 {
    font-size: 1em;
    margin-bottom: .75em;
}

    h5.light {
        font-weight: normal;
    }

p + h5,
ul + h5, ol + h5, dl + h5,
table + h5 {
    padding-top: 1.5em;
}

h1 span.small /* If you want to add some additional small text to the header. See Checkout. */ {
    font-size: .5em;
    font-weight: normal;
}

h2 span.small {
    font-size: .65em;
    font-weight: normal;
}


p, blockquote {
    line-height: 1.5em;
    margin-bottom: 1.5em;
}

blockquote {
    background: url(Images/Quote.gif) no-repeat left top;
    padding-left: 30px;
}

    blockquote.flowing-quote {
        position: relative;
        background: none;
        padding-left: 0;
    }

        blockquote.flowing-quote:before {
            content: "";
            float: left;
            width: 24px;
            height: 24px;
            margin: 0 0.8224em 0.8224em 0;
            background: url(Images/Quote.gif) no-repeat left top;
        }

    blockquote cite {
        display: block;
        padding: 0.5em 0;
    }

    blockquote.pullquote {
        background-image: none;
        font-family: Georgia, Times, "Times New Roman", serif;
        font-size: 1.4em;
        font-style: italic;
        padding: 1.5em;
        text-indent: -0.3em;
        width: 12em;
    }

    blockquote.float_left {
        margin-right: 1.5em;
    }

    blockquote.float_right {
        margin-left: 1.5em;
    }

sup {
    line-height: .5;
}

/* =Links */

a {
    color: #22609a;
    text-decoration: underline;
}

    a:visited,
    a:hover,
    a:focus,
    a:active {
        color: #579cdc;
    }

    a img {
        border: none;
        vertical-align: middle; /* this fixes a bug in firefox that underlines the image if it is included with plain text in an anchor tag */
    }

big,
.big { /* Usually leading text that is important and should be bigger */
    font-size: 1.17em;
}

.xlarge {
    font-size: 1.4803em; /* 18px */
}

.wrap {
    word-wrap: break-word;
}

.text-callout {
    color: #6bc703;
}

.text-normal {
    font-weight: normal;
}

small,
.small {
    font-size: .8em;
}

p.small, p.compact {
    line-height: 1.3;
}

p.note, p.warning {
    position: relative;
    padding-left: 20px;
}

    p.note:before {
        content: "\f05a";
        font-family: FontAwesome;
        font-size: 16px;
        position: absolute;
        top: 0;
        left: 0;
    }

    p.warning:before {
        content: "\f071";
        font-family: FontAwesome;
        font-size: 16px;
        position: absolute;
        top: 0;
        left: 0;
    }

.subtle {
    color: #757575;
}

.article-date {
    display: block;
    font-style: italic;
    color: #757575;
    padding: 0.4112em 0;
}

.more,
.back {
    margin-bottom: 3em;
    overflow: hidden;
    zoom: 1;
}

    .more a {
        background: url(Images/Icons/More.gif) no-repeat top right;
        float: right;
        font-weight: bold;
        line-height: 1.2em;
        padding-right: 1.67em;
    }

    .back a {
        background: url(Images/Icons/Back.gif) no-repeat top left;
        float: left;
        font-weight: bold;
        line-height: 1.2em;
        padding-left: 1.67em;
    }


.standout .more {
    margin-bottom: 1.5em;
}

.strike {
    text-decoration: line-through;
}


.nowrap { /* Use this class instead of <nobr>. Particularly when U-Haul breaks at the dash. */
    white-space: nowrap;
}

.align_right,
.align_right * {
    text-align: right;
}

.align_left,
.align_left * {
    text-align: left;
}

.align_center,
.align_center * {
    text-align: center;
}

/* =Icons, =errors and =messages */

/* Add_this override */
.addthis_toolbox .google_plusone_iframe_widget {
    width: 25px !important;
}

.message, .error_summary { /* For displaying error, success or any other messages. */
    background-color: #fffac5;
    border: solid 1px #d2cb7e;
    margin-bottom: 1.5em;
    overflow: hidden;
    padding: 1.5em;
    zoom: 1; /* So IE can contain floats */
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

    .message.prefixed {
        border-radius: 0;
        background: #F5F5F5;
        border: none;
    }

        .message.prefixed.collapsed {
            margin-left: -2.5em;
            margin-right: -2.5em;
            padding-left: 2.5em;
            padding-right: 2.5em;
        }

    .message.muted {
        background-color: whitesmoke;
        border-color: #ddd;
    }

    .message.shrink {
        padding: 6px 8px;
    }

    .message p,
    .message ul,
    .error_summary p,
    .error_summary ul {
        margin-bottom: 0;
    }

.error_summary {
    margin-bottom: 1.5em;
}


    .info, .info_summary li, .error_item, .error_summary li,
    .success, .success_alt, .feature_summary li, .deal_summary li, .edit, .cancel, .delete, .print, .help, .search, .alert, .deal, .account, .secure, .schedule,
    .compare, .file_word, .file_pdf, .file_movie, .file_text, .news, .add, .facebook, .twitter, .youtube, .lightbulb, .thumbsup {
        line-height: 1.5em;
        padding-left: 20px; /* Creates space for the icon. In pixels because you don't want this space to expand if text is bigger. */
        padding-bottom: 2px; /* For icons bigger than the current text size (stops them from getting cut off */
        background-repeat: no-repeat;
        background-position: 0 .1em;
    }

h4.info,
h4.alert,
h4.success {
    background-position: 0 .2em;
}

p + h4.info,
p + h4.alert,
p + h4.success {
    padding-top: 0;
}

.error_item,
.error_summary li {
    background-image: url(Images/Icons/Error.gif);
    color: #831515;
    font-weight: bold;
}

.error,
.inactive {
    color: #831515;
    font-weight: bold;
}

.success,
.feature_summary li {
    background-image: url(Images/Icons/Success.gif);
}

.success_alt {
    position: relative;
    background: none;
}

    .success_alt::before {
        position: absolute;
        content: "\f058";
        font: normal 20px/20px FontAwesome;
        color: #5cad25;
        top: 0;
        left: 0;
    }

.retro-camera {
    position: relative;
}

    .retro-camera::after {
        position: absolute;
        content: "\f083";
        font-family: FontAwesome;
        font-size: 16px;
        margin-left: 4px;
    }

.positive,
.active {
    color: #5cad25;
}

.highlight {
    background: #fffac5;
}

.feature_summary li.unchecked {
    background: transparent;
    color: #898989;
}

.hide {
    display: none !important;
    visibility: hidden;
}

.info,
.info_summary li {
    background-image: url(Images/Icons/Info.gif);
}

.edit {
    background-image: url(Images/Icons/Edit.gif);
}

.delete {
    background-image: url(Images/Icons/Delete.gif);
}


.cancel {
    background-image: url(Images/Icons/Cancel.gif);
}

.secure {
    background-image: url(Images/Icons/Secure.gif);
    font-weight: bold;
}

.help {
    position: relative;
    padding-left: 20px;
}

    .help:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        display: block;
        width: 14px;
        height: 14px;
        background: url(Images/Icons/Help.gif) left center no-repeat;
    }

.align_right .help:before {
    position: static;
    display: inline-block;
    vertical-align: baseline;
    margin-right: 6px;
}

.alert {
    background-image: url(Images/Icons/Alert.gif);
}

.add {
    background-image: url(Images/Icons/Add.gif);
}

.facebook {
    background-image: url(/icons/facebook.gif);
    background-position: left top;
}

.twitter {
    background-image: url(/icons/twitter.gif);
    background-position: left top;
}

.youtube {
    background-image: url(/icons/youtube.gif);
    background-position: left top;
}

ul.navigation li a.alert {
    color: #22609a;
    font-weight: normal;
}

.deal,
.deal_summary li {
    background-image: url(Images/Icons/Deal.gif);
}

.coupontainer {
    width: auto;
    height: auto;
    padding: 1.1513em;
    border: 2px dashed #aaa;
}

    .coupontainer .row {
        margin-bottom: 0px;
    }

    .coupontainer h1 {
        font-style: normal;
        font-weight: bolder;
        font-size: 4em;
        line-height: 1em;
        color: #f75409;
        font-family: FuturaBT-BoldCondensed-Italic, Arial, Helvetica, Sans-Serif;
        margin-bottom: 0px;
    }

    .coupontainer h2, .coupontainer h3 {
        margin-bottom: 0px;
        font-family: "FuturaBT-BoldCondensed-Italic", Arial, Helvetica, Sans-Serif;
        font-style: normal;
        font-size: 2em;
    }

.schedule {
    background-image: url(Images/Icons/Schedule.gif);
}

.compare {
    background-image: url(Images/Icons/Compare.gif);
}

.print {
    background-image: url(Images/Icons/Print.gif);
}

a.account {
    background-image: url(Images/Icons/Account.gif);
}

    a.account:before {
        top: 9px;
    }

.file_word,
.file_pdf,
.file_movie,
.file_text {
    font-weight: bold;
}

.file_pdf {
    background-image: url(Images/Icons/FilePdf.gif);
}

.file_word {
    background-image: url(Images/Icons/FileWord.gif);
}

.file_xls {
    background-image: url(Images/Icons/FileXls.gif);
}

.file_text {
    background-image: url(Images/Icons/FileText.gif);
}

.file_movie {
    background-image: url(Images/Icons/FileMovie.gif);
}

.news {
    background-image: url(Images/Icons/News.gif);
    color: #757575;
}

.search {
    background-image: url(Images/Icons/search.gif);
}

.lightbulb {
    background-image: url(images/icons/lightbulb.png);
}

.thumbsup {
    background-image: url(images/icons/thumb_up.gif);
}

.thumbsup-badge {
    display: inline-block;
    background-color: #448e12;
    border-radius: 100%;
}

    .thumbsup-badge:before {
        display: block;
        width: 24px;
        height: 24px;
        font-family: FontAwesome;
        font-size: 24px;
        font-style: normal;
        font-weight: normal;
        content: '\f164';
        color: white;
        line-height: 1;
        text-align: center;
        padding: 6px;
        margin: 2px;
        border: 2px solid white;
        border-radius: 100%;
    }

.with_badge {
    position: relative;
    padding-left: 52px;
}

    .with_badge i {
        position: absolute;
        left: 0;
    }

.tooltip {
    position: relative;
}

    .tooltip:hover .tooltip-detail {
        opacity: 1;
        z-index: 10;
    }

.tooltip-detail {
    position: absolute;
    top: -4.9342em;
    left: 3.2895em;
    z-index: -1;
    opacity: 0;
    width: 27.96053em;
    padding: 0.8224em 1.31579em;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 0.4112em;
    box-shadow: rgba(0,0,0,0.5) 0.25em 0.25em 0.5em;
    transition: all 300ms ease-in-out;
}

    .tooltip-detail p {
        text-align: left;
        margin: 0;
    }

/*Social media icons in the top right corner of the page */
.social_media {
    position: absolute;
    top: 10px;
    right: 10px;
}

/* =Layout classes ---------------------------------
Use these classes to make multiple columns with equal width. Put column_last on the last column to remove margin and line up with the right side.
We need things like .column .column_2 .column so that nested columns work. Won't need this when IE supports more CSS. */

/* Flex Grid */
.flex-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /*max-width: 112.3355em;*/
}

    .flex-row.justify-center {
        justify-content: center;
    }

    .flex-row.justify-end {
        justify-content: flex-end;
    }

    .flex-row.justify-between {
        justify-content: space-between;
    }

    .flex-row.justify-around {
        justify-content: space-around;
    }

    .flex-row.align-content-end {
        align-content: flex-end;
        align-items: flex-end;
    }

    .flex-row.align-content-center {
        align-content: center;
        align-items: center;
    }

    .flex-row.items-stretch {
        align-items: stretch;
    }

    .flex-row.row-reverse {
        flex-direction: row-reverse;
    }

    .flex-row.row-vertical {
        flex-direction: column;
    }

    .flex-row.row-vertical-reverse {
        flex-direction: column-reverse;
    }

    .flex-row.wrap {
        flex-wrap: wrap;
    }

    .flex-row.wrap-reverse {
        flex-wrap: wrap-reverse;
    }

    .flex-row.padding-x {
        margin-left: -15px;
        margin-right: -15px;
    }

    .flex-row.medium-padding-2x {
        margin-left: -30px;
        margin-right: -30px;
    }

.margin-x {
    margin-left: -15px;
    margin-right: -15px;
}

    .margin-x > .flex-column {
        margin-left: 15px;
        margin-right: 15px;
    }

.padding-x > .flex-column {
    padding-left: 15px;
    padding-right: 15px;
}

.padding-2x > .flex-column {
    padding-left: 30px;
    padding-right: 30px;
}

.padding-y > .flex-column {
    padding-top: 15px;
    padding-bottom: 15px;
}

.medium-padding-2x > .flex-column {
    padding-left: 30px;
    padding-right: 30px;
}

.medium-padding-y-collapse > .flex-column {
    padding-top: 0;
    padding-bottom: 0;
}

.row-full {
    height: 100%;
}

.flex-row-y {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.flex-column {
    width: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    box-sizing: border-box;
}

    .flex-column.collapse {
        padding-left: 0;
        padding-right: 0;
    }

    .flex-column.auto, .flex-column.medium-auto {
        width: auto;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0px;
    }

    .flex-column.shrink, .flex-column.medium-shrink {
        width: auto;
    }

    .flex-column.medium-6 {
        width: 50%;
    }

    .flex-column.medium-outline-left {
        border-color: #DDDDDD;
        border-style: solid;
        border-width: 0 0 0 1px;
    }
    .flex-column .button {
        margin-bottom: 0.4112em;
    }

.medium-grow-2 {
    flex-grow: 2;
}

.medium-grow-3 {
    flex-grow: 3;
}

.medium-grow-4 {
    flex-grow: 4;
}

.medium-grow-5 {
    flex-grow: 5;
}

.medium-grow-6 {
    flex-grow: 6;
}
/* End Flex Grid */

img.fluid {
    max-width: 100%;
}

.row {
    clear: both;
    margin-bottom: 1.5em;
    /*overflow: hidden;*/
    width: 100%;
}

    .row:after {
        content: "";
        display: block;
        clear: both;
    }

    .row.row-category {
        padding: 1.5em;
        background-color: #f5f5f5;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

.no-offset {
    margin-bottom: 0;
}

.low-offset {
    margin-bottom: 0.8224em !important;
}

.right-offset {
    margin-right: 0.8224em;
}

.row-category .picture {
    margin-bottom: 0;
}

.row_inline {
    width: auto;
}

.row-overlap {
    margin-top: -2em;
}

.row_divided > .column,
.row_divided > .column_last {
    box-sizing: border-box;
}

.row_divided.column_2 > .column,
.row_divided.column_2 > .column_last {
    width: 50% !important;
}

.row_divided.column_2 > .column {
    padding-right: 3.5%;
    margin-right: 0;
    border-right: 1px solid #ddd;
}

.row_divided.column_2 > .column_last {
    padding-left: 3.5%;
}

.column,
.row .column {
    float: left;
    margin-right: 3.5%;
}

.column_last,
.row .column_last {
    float: right;
    margin-right: 0;
}

    .column_1 .column,
    .column_1 .column_last,
    .column .column_1 .column,
    .column_last .column_1 .column,
    .column .column_1 .column_last,
    .column_last .column_1 .column_last {
        width: 100%;
    }

    .column_2 .column,
    .column_2 .column_last,
    .column .column_2 .column,
    .column_last .column_2 .column,
    .column .column_2 .column_last,
    .column_last .column_2 .column_last {
        width: 48%;
    }

    .column_3 .column,
    .column_3 .column_last,
    .column .column_3 .column,
    .column_last .column_3 .column,
    .column .column_3 .column_last,
    .column_last .column_3 .column_last {
        width: 30.8%;
    }

    .column_3 .column_span_2,
    .column .column_3 .column_span_2,
    .column_last .column_3 .column_span_2 {
        width: 65.1%;
    }

    .column_4 .column,
    .column_4 .column_last,
    .column .column_4 .column,
    .column_last .column_4 .column,
    .column .column_4 .column_last,
    .column_last .column_4 .column_last {
        width: 22.3%;
    }

    .column_4 .column_span_2,
    .column .column_4 .column_span_2,
    .column_last .column_4 .column_span_2 {
        width: 48.1%;
    }

    .column_4 .column_span_3,
    .column .column_4 .column_span_3,
    .column_last .column_4 .column_span_3 {
        width: 73.8%;
    }

    .column_5 .column,
    .column_5 .column_last,
    .column .column_5 .column,
    .column_last .column_5 .column,
    .column .column_5 .column_last,
    .column_last .column_5 .column_last {
        width: 17%;
    }

    .column_5 .column_span_2,
    .column .column_5 .column_span_2,
    .column_last .column_5 .column_span_2 {
        width: 37.5%;
    }

    .column_5 .column_span_3,
    .column .column_5 .column_span_3,
    .column_last .column_5 .column_span_3 {
        width: 58%;
    }

    .column_5 .column_span_4,
    .column .column_5 .column_span_4,
    .column_last .column_5 .column_span_4 {
        width: 79%;
    }

.column_6 .column,
.column_6 .column_last {
    width: 13.5%;
}

.column_reset .column,
.column_reset .column_last,
.column .column_reset .column,
.column .column_reset .column_last {
    width: auto;
}

.column img,
.column_last img {
    max-width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.gradient { /* Tiles a gradient at the top of the container. Generally used on .page_header or .standout */
    background: #fff url(Images/Gradient.gif) repeat-x top left;
}

.gradient_big {
    background: #fff url(Images/GradientBig.gif) repeat-x top left;
}

.results .row .row {
    margin-bottom: 0;
}


/* =Cart ------------------------------ */
.cart {
    background-color: #f7f6f4;
    border: solid 1px #e7e5dd;
    margin-bottom: 1.5em;
    overflow: hidden;
    padding: 1.5em 1.5em 0 1.5em;
    zoom: 1;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}

    .cart h2, .cart h3 {
        margin-bottom: 0;
    }


    .cart ul.navigation {
        margin-bottom: 0;
    }

        .cart ul.navigation li a {
            font-weight: normal;
        }

        .cart ul.navigation li.active a {
            font-weight: bold;
        }

    .cart table td {
        line-height: 1.5em;
    }

    .cart table input[type="number"] {
        min-height: 2em;
        min-width: 3.5em;
        font-size: inherit;
        padding: 0.25em;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .cart td.price /* Price is a little smaller in the cart and data_table */ {
        font-size: 1.33em;
        line-height: normal;
        padding: 1em 0;
    }

        .cart td.price p.small /* This is for additional price text - due in store, mileage, etc. */ {
            margin-bottom: 0;
        }

/* These tables have extra rows that look a little different */

.cart_equipment_table, .cart_mh_table {
    border-bottom: solid 1px #e7e5dd;
    margin-bottom: 3em;
}

    .cart_equipment_table td, .cart_mh_table td {
        border-bottom: 0;
        padding-bottom: 0;
    }

        .cart_equipment_table td.collapse {
            padding: 0;
        }

    .cart_equipment_table .uhaul-go-box {
        margin-left: 2.47em;
        margin-bottom: 0;
    }




/* =Orders ------------------------- */

.payment_code { /* Payment code you give to your moving helper */
    border: dashed 2px #990000;
    margin-bottom: 3em;
    padding: 1.5em 1.5em 0 1.5em;
}

    .payment_code ul li {
        line-height: 1.5;
    }

.orders_service {
    width: 35%;
}

.orders_service_detail {
    width: 61%;
}

.order-banner {
    padding: 0 6.57894em;
    margin-top: 2.4671em;
    margin-bottom: 4.9342em;
    background: url(/Orders/Images/orders-banner-bg.png) no-repeat;
    border-radius: 0;
}

    .order-banner .standout {
        margin: -1.3158em 0;
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 0.4112em;
        box-shadow: 0 0 0.4112em rgba(0,0,0,0.15);
    }

    .order-banner .label_aria.checkbox {
        padding-top: 1.3158em;
    }

    .order-banner .button {
        min-width: 6.57894em;
    }

/*order details banner*/
.order-detail-banner {
    position: absolute;
    width: 851px;
    height: 238px;
}

    .order-detail-banner h2 {
        background: #f67321;
        position: absolute;
        width: 9rem;
        height: 2rem;
        top: 1.25rem;
        left: 1rem;
        text-align: center;
        padding-top: 0.5rem;
        color: #fff;
    }

    .order-detail-banner ol {
        position: absolute;
        right: 1rem;
    }

        .order-detail-banner ol li {
            position: relative;
            display: inline-block;
            vertical-align: top;
            margin: 1rem 1.25rem 1.5rem 0;
            width: 9.75rem;
            height: 11.75rem;
            padding: 2rem 1.5rem 2rem 1rem;
            background: #fff;
            box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
        }

            .order-detail-banner ol li strong {
                font-size: 2.5rem;
                line-height: 2.25rem;
            }

            .order-detail-banner ol li p {
                margin-top: 1.25rem;
                font-size: 0.825rem;
                font-weight: 500;
                line-height: 1.25em;
                text-align: left;
                display: block;
                width: 8rem;
                white-space: normal;
            }

            .order-detail-banner ol li .title {
                font-size: 1.25rem;
                font-weight: bold;
                position: relative;
                color: #8db20d;
                text-align: left;
                margin-left: 0.75rem;
            }

            /*pick up desktop banner*/
            .order-detail-banner ol li.pick-up {
                width: 30rem;
                padding: 2.5rem 0.5rem 1rem 1.5rem;
                background: #fff;
                height: auto;
                min-height: 9rem;
            }

                .order-detail-banner ol li.pick-up .title {
                    margin-left: auto;
                }

                .order-detail-banner ol li.pick-up p {
                    width: auto;
                    margin-top: 0.5rem;
                }

                    .order-detail-banner ol li.pick-up p a {
                        position: absolute;
                        right: 1.5rem;
                    }

.step-list li {
    border: none;
    border-radius: 0;
}

    .step-list li:before {
        top: 1.5rem;
        left: 1rem;
        background-color: #8db20d;
        border: none;
        color: #fff;
        width: 1.75rem;
        height: 1.75rem;
        font-size: 1.5rem;
    }

.divider, .divider_first { /* Separates out stuff with a border bottom. Used on results, reviews or promos at the bottom of the page. */
    border-color: #e7e5dd;
    border-style: solid;
    border-width: 0 0 1px;
    margin-bottom: 2em;
    padding-bottom: .5em;
}

.divider_first { /* First result needs border and padding top */
    border-top: solid 1px #e7e5dd;
    padding-top: 2em;
}

hr.divider {
    padding: 0;
    border-width: 0 0 1px;
}

.desktop_divider {
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid #E7E5DD;
}

/* .header_with_links /* This has to be here or it doesn't work - need to look at rearranging /* This has been replaced with the no_ below. 
{
    margin-bottom:0;
} 
*/

.map_pin {
    background: url('Images/Icons/Result.png') no-repeat 0 0;
    height: 29px;
    width: 25px;
    top: -14px;
    color: #FFFFFF;
    text-align: center;
    font-size: 10pt;
    padding-top: 3px;
    font-weight: bold;
    margin-right: 5px;
    text-decoration: none;
    cursor: pointer;
}

.map {
    border: 1px solid #bdd1ec;
    position: relative !important;
    width: 99.5% !important;
    height: 250px !important;
    overflow: hidden !important;
}

    .map .location-infobox {
        width: 25em;
        padding: 1em;
        background-color: white;
        border: 1px solid #aaa;
        box-shadow: 1px 2px 2px rgba(0,0,0,0.15);
    }

        .map .location-infobox p {
            margin-bottom: 1em;
        }

            .map .location-infobox p:first-child {
                font-weight: 600;
            }

    .map .infobox-close-icon {
        position: absolute;
        top: -0.5em;
        right: -0.5em;
        width: 2em;
        height: 2em;
        font-weight: bold;
        color: white;
        cursor: pointer;
        text-align: center;
        line-height: 2em;
        background-color: #333;
        border-radius: 50%;
    }

/* The map icon that shows order by distance and the recommended location. */
.result_number,
.result_recommended,
.result_preferred {
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 23px;
    margin-right: 1.5%;
    padding-top: 3px;
    text-align: center;
    text-decoration: none;
    width: 23px;
}

.result_number {
    background-image: url(Images/Icons/ResultNumber.png);
}

.result_recommended {
    background-image: url(Images/Icons/ResultRecommended.png);
}

.result_preferred {
    background-image: url(Images/Icons/ResultPreferred.png);
}

    .map_pin a,
    .map_pin a:hover,
    .map_pin a:visited,
    a.result_number,
    a.result_number:hover,
    a.result_number:visited,
    a.result_recommended,
    a.result_recommended:hover,
    a.result_recommended:visited,
    .result_recommended a,
    .result_recommended a:hover,
    .result_recommended a:visited,
    a.result_preferred,
    a.result_preferred:hover,
    a.result_preferred:visited,
    .result_preferred a,
    .result_preferred a:hover,
    .result_preferred a:visited {
        color: #fff;
        font-size: 12px;
        text-decoration: none;
    }





/* =Ratings =pictures and =products -------------------------- */

.picture, .news_caption { /* Pictures - not design elements */
    background-color: #fff;
    border: 1px solid #e7e5dd !important;
    margin-bottom: 1.5em;
    padding: 0.4112em;
    text-align: center;
    font-style: italic;
    max-width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

    .picture.one-sided {
        padding: 0 0.4112em 0 0;
        border-width: 0 2px 0 0 !important;
    }

        .picture.one-sided.bottom {
            padding: 0 0 0.4112em 0;
            border-width: 0 0 2px 0 !important;
        }

    .picture img, .news_caption img { /* for images within a picture div... useful if you want to have a caption */
        margin-bottom: 10px;
    }

    .picture span, .news_caption span {
        clear: both;
    }

table .picture { /* If you have a picture in a table remove margin. See storage detail page. */
    margin: 0;
}

.news_caption.float_right,
.picture.float_right,
img.float_right {
    clear: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.news_caption.float_left,
.picture.float_left,
img.float_left {
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}

img.no_bottom {
    margin-bottom: 0;
}

.tilt_right {
    -webkit-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
}

.tilt_left {
    -webkit-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
}

.shadow {
    -moz-box-shadow: 2px 2px 4px #999;
    -webkit-box-shadow: 2px 2px 4px #999;
    box-shadow: 2px 2px 4px #999;
}

.rounded_corners {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.image-stack {
    position: relative;
    margin-bottom: 1.5em;
}

    .image-stack img {
        max-width: 100%;
        margin: 0;
    }

    .image-stack .content-overlay {
        position: absolute;
        top: 2em;
        left: 2em;
        width: 33%;
        padding: 1em;
        /*background-color: rgba(0,0,0,0.5);*/
        background-color: rgba(0,151,197,0.87);
        /*border: 1px solid rgba(255,255,255,0.5);*/
        border-radius: 3px;
        box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
    }

        .image-stack .content-overlay.flip_contrast {
            color: white;
        }

        .image-stack .content-overlay.right {
            left: auto;
            right: 2em;
        }

        .image-stack .content-overlay.bottom {
            top: auto;
            bottom: 2em;
        }

        .image-stack .content-overlay p:last-child {
            margin: 0;
        }

    .image-stack .text-large {
        font-size: 14px;
    }

    .image-stack .image-offer {
        position: absolute;
        top: -1.6447em;
        left: -1.6447em;
    }

.single-week-calendar::after {
    content: '';
    display: table;
    clear: both;
}

.single-week-calendar li {
    float: left;
    width: 4.11185em; /* 50px */
    text-align: center;
    margin-right: 0;
    margin-bottom: 0.4112em;
}

    .single-week-calendar li input {
        margin: 0 0 0.4112em;
    }

        .single-week-calendar li input:checked + label span:first-child {
            background-color: #a7dc74;
        }

    .single-week-calendar li label {
        display: block;
        height: 5.345395em;
        border-color: #ccc;
        border-style: solid;
        border-width: 1px 0 1px 1px;
    }

    .single-week-calendar li:last-child label {
        border-width: 1px;
    }

    .single-week-calendar li label span:first-child {
        color: white;
        background-color: #235f9b;
    }

    .single-week-calendar li label span:first-child,
    .single-week-calendar li label span small {
        text-transform: uppercase;
    }

    .single-week-calendar li label span,
    .single-week-calendar li label small,
    .single-week-calendar li label b {
        display: block;
        line-height: 1.2;
        padding: 0.164474em 0;
    }

    .single-week-calendar li label small {
        font-size: 0.8224em;
    }

    .single-week-calendar li label b {
        font-size: 1.31579em;
    }

.clear {
    clear: both;
}

.clear_right {
    clear: right;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

.rating { /* Apply to a row with the customer's name and star rating */
    font-size: 1.17em;
}

    .rating .column_last {
        width: auto; /* If you are already in a column_x this overrides set width. */
    }

img.rating { /* When you have a rating and a reviews link next to it */
    margin-right: 5px;
    vertical-align: text-top;
}

.text-callout {
    color: #8db20d;
}

.svg-wrap {
    display: inline-block;
    width: 1.125rem;
    margin-top: 0.125rem;
    margin-right: 0.25rem;
}

    .svg-wrap.size-large {
        width: 2.50009rem;
    }

    .svg-wrap.icon-callout.icon-box {
        border-color: #8db20d;
    }

    .svg-wrap.icon-callout svg {
        fill: #8db20d;
    }

    .svg-wrap.icon-standout.icon-box {
        border-color: #f66711;
    }

    .svg-wrap.icon-standout svg {
        fill: #f66711;
    }

    .svg-wrap.icon-box {
        height: 1.125rem;
        line-height: 1;
        text-align: center;
        padding: 0.25rem;
        margin-bottom: 0.875rem;
        background: #FFFFFF;
        border: solid 1px #f66711;
    }

        .svg-wrap.icon-box.size-large {
            height: 2.50009rem;
            line-height: 2;
        }

        .svg-wrap.icon-box.no-border {
            border-width: 0;
        }

        .svg-wrap.icon-box svg {
            max-height: 100% !important;
        }

    .svg-wrap .fa {
        display: inline-block !important;
        line-height: 1;
        margin: 0;
    }

.fa.fa-2x {
    font-size: 32px;
}

/* =Thumbnails */

.thumbnail_row {
    clear: both;
    margin-bottom: 0;
    overflow: hidden;
    width: 100%;
}


    .thumbnail_row .column {
        font-weight: bold;
        height: 260px;
        text-align: center;
        width: 184px;
    }


        .thumbnail_row .column p {
            margin-bottom: .75em;
        }

        .thumbnail_row .column .price {
            font-size: 1.17em;
        }

        .thumbnail_row .column .new_price {
            color: #fd3b40;
        }

        .thumbnail_row .column .success {
            font-size: 11px;
            font-weight: normal;
            padding-top: 2px;
        }

        .thumbnail_row .column .stock {
            font-weight: normal;
        }

    .thumbnail_row a.thumbnail-link {
        display: block;
        height: 140px;
        padding: 10px 0;
    }

    .thumbnail_row .adjusted-price > span {
        display: block;
    }

    .thumbnail_row .adjusted-price .list-price {
        color: #fd3b40;
    }

    .thumbnail_row .adjusted-price .new-price {
        font-size: 1.151315em;
    }

    .thumbnail_row .adjusted-price .sale-amount {
        color: #66A500;
    }

    .thumbnail_row .strikethrough {
        text-decoration: line-through;
    }



/* This is the table that holds the product thumbnail image. 
It's a table because getting the product image to align center and stick to the bottom of a div is a pain.
*/

table.thumbnail_image {
    padding: 0;
    margin-bottom: .75em;
}


    table.thumbnail_image td {
        border: 0;
        padding: 0;
        height: 110px;
        text-align: center;
        vertical-align: bottom;
    }










.content_with_sidebar_cart .thumbnail_row .column /* Give more space to products displayed in the cart. */ {
    margin-right: 7%;
    _margin-right: 5%; /* Quick fix for IE 6. Needs this or it drops the supplies products to 2 lines. Need to investigate more. */
}

.column_2 .column .thumbnail_row .column, .column_2 .column_last .thumbnail_row .column {
    width: 185px;
}


/* General thumbnails (not store products). See location pics and trucks page */

.thumbnail {
    font-weight: bold;
    text-align: center;
}

    .thumbnail img {
        margin-bottom: .82em;
    }

    .thumbnail a span { /* Use this around the thumbnail link/title if you want an image and its title to be within the same anchor. See /Trucks */
        margin-bottom: .75em;
        text-decoration: underline; /* When an anchor tag is around an image and some text, the text looses it's underline in some browsers */
        display: block;
    }




.price {
    line-height: 1;
}


.price, .price_small {
    font-size: 1.645em;
    font-weight: bold;
}

p.price {
    margin-bottom: .75em;
}


td.price, td.price_small {
    padding: .5em 0;
    text-align: right;
}

.data_table td.price {
    padding: 1em;
}

td.price_small {
    font-size: 1.33em;
    padding: 1em 0;
}


    td.price .small, td.price_small .small { /* For additional info like mileage, handling fees, etc. */
        font-size: .65em;
        font-weight: normal;
    }


.thumbnail .price {
    font-size: 1.17em;
}

.additional_media .column,
.additional_media .column_last { /* Additional photos or videos on the product detail page */
    border: solid 1px #e7e5dd;
    height: 7em;
    overflow: hidden;
    position: relative; /* So you can absolutely position the Play.png icon on videos */
    width: 30%;
}





/* =Slideshow ------------------------------------------------------------- */
.slideshow {
    width: 35.2em;
    margin: 0 auto 1em auto;
}

    .slideshow p.align_right {
        margin-bottom: .3em;
    }

.slideshow_active {
    overflow: hidden;
    margin: 0;
    text-align: center;
    background-color: #f6f6f6;
    border: solid 1px #e7e5dd;
}

    .slideshow_active h5,
    .slideshow_active p {
        margin: 0 1em 1em 1em;
        text-align: left;
        /*display:none;  Comment this out if the higher-ups want to see captions. */
        /*visibility:hidden;   Comment this out if the higher-ups want to see captions. */
    }

    .slideshow_active img {
        max-height: 400px;
        max-width: 400px;
        margin: 1em 1em 1em 1em;
    }

.slideshow_thumbnails {
    background-color: #f6f6f6;
    border: solid 1px #e7e5dd;
    margin-top: 1em;
    overflow: hidden; /* Needed to contain floated images. */
    zoom: 1; /* Needed to contain floated images in IE6 */
}

    .slideshow_thumbnails ul {
        position: relative;
        overflow: hidden;
        float: left;
        margin: 1em .6em 1em .9em;
        padding: 0;
        list-style-type: none;
    }

        .slideshow_thumbnails ul li {
            overflow: hidden;
            float: left;
            margin: 0 .3em .3em 0;
        }

            .slideshow_thumbnails ul li a {
                display: block;
                overflow: hidden;
                width: 94px;
                height: 58px;
                border: solid 2px #f6f6f6;
            }

    .slideshow_thumbnails li a:hover,
    .slideshow_thumbnails li a:focus,
    .slideshow_thumbnails li a:active {
        background: #f08e2d;
        border: solid 2px #f08e2d;
    }

    .slideshow_thumbnails li a.slideshow_thumbnail_active {
        background: #f67321;
        border: solid 2px #f67321;
    }



/* =Forms -------------------------------------- */

.form { /* All forms need this. */
    margin-bottom: 1.5em;
    padding-bottom: 1px;
    /*overflow: hidden;*/
    zoom: 1;
}

    .form.clear-form,
    .form.action {
        overflow: hidden;
    }

.action { /* Green form usually for quick actions (not large forms). */
    background-color: #cde989;
    border: solid 1px #a5c374;
    padding: 1.4803em 1.4803em 0 1.4803em;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    box-sizing: border-box;
}

    .action.alternate {
        position: relative;
        background-color: border-color:
    }

    .action a:visited /* Our normal visited color is hard to read on the green. */ {
        color: #22609a;
    }

    .action p {
        margin-bottom: 1em;
    }
/* Light colored container for callout content */
.well {
    padding: 1.5em;
    margin-bottom: 1.5em;
    background-color: #faf3d6;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
}
    .well.secondary {
        background-color: whitesmoke;
    }

    .well.bordered {
        border: 1px solid #dcd7c2;
    }

    .well .form {
        margin-bottom: 0;
    }

    .well h3 {
        margin-bottom: 0.5em;
    }

    .well + h2 {
        margin-top: 2em;
    }

.form .row {
    display: block;
    height: auto;
    margin: 0;
    padding: 0;
}

.form .grouping {
    padding-bottom: 1.5em;
}

.form .row .grouping {
    float: left;
    margin-right: 1.5em;
}
/*.form .row .grouping:last-child {
    margin-right: 0;
}*/
.form .grouping_button .checkbox {
    padding-top: 0.4112em;
    margin-right: 1.5em;
}

.form label.fixed {
    text-align: right;
    width: 10em;
}

.form .grouping label {
    display: block;
    font-weight: bold;
    padding: 0;
    line-height: 2em; /* gives space for error_item "x" */
}

.action .grouping label {
    color: #000;
}

.form .label_beside label {
    float: left;
    padding: .2em .5em 0 0;
}


    .form .label_beside label.big {
        font-size: 1.25em;
        padding-top: 0;
    }

    .form .label_beside label.collapse {
        padding: 0;
    }

.form .label_beside select {
    margin-top: .25em;
}

.form .label_right br { /* hides asp.net's <br> in between input and label */
    display: none;
}

.form span.label_right {
    padding-bottom: .25em;
}

.form .label_right input,
.form .label_right label {
    float: left;
    font-weight: normal;
    line-height: 1.75em;
}

.form .label_right label {
    margin-right: .42em;
    padding-top: 2px;
}

.form .column .label_right input {
    clear: both;
}

.form .column .label_right label {
    float: none;
}

.trucks-sales-search-form .column {
    width: auto !important;
}
/* Inputs */
input[type="checkbox"],
input[type="radio"] {
    margin: 0.3em 0.3em 0 0.3em;
}

    input[type="checkbox"],
    input[type="radio"],
    input[type="checkbox"] + label {
        display: inline-block;
        vertical-align: baseline;
    }

input[disabled] {
    cursor: no-drop;
}


/* Placeholder text for inputs */
.form input::-webkit-input-placeholder {
    color: white;
}

.form input:-ms-input-placeholder {
    color: white;
}

.form input::-moz-placeholder {
    color: white;
}

.form input:-moz-placeholder {
    color: white;
}

/* Aria label compliance */
.form label.label_aria,
form label.label_aria,
.label.label_aria,
.textbox_aria {
    display: block;
    font-weight: bold;
    line-height: 2em;
    margin-bottom: 0.4112em;
}

.label_aria input[type="text"],
.label_aria input[type="email"],
.label_aria input[type="number"],
.label_aria input[type="tel"],
.label_aria input[type="file"],
.label_aria input[type="password"],
.label_aria input[type="search"],
.label_aria select,
.label_aria textarea {
    display: block;
    width: 100%;
    min-height: 2em;
    padding: 0.3em;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #aaa;
}

.label_aria input[readonly] {
    cursor: not-allowed;
    background-color: whitesmoke;
}

.label_aria.checkbox {
    font-weight: normal !important;
    /*padding-top: 1.6447em;*/
}

.label_aria.no-offset {
    padding-top: 0;
    margin-top: 0;
}

.label_aria.inline {
    display: inline-block;
    margin-right: 1.31585em;
}

.label_aria.checkbox input[type="checkbox"] {
    height: auto;
    line-height: normal;
    margin: 0 0.2467em 0 0;
}

.label_aria.radio,
.form .label_aria.radio {
    font-weight: normal;
}

    .label_aria.radio input,
    .label_aria.checkbox input {
        vertical-align: text-top !important;
    }

.label_aria.label_heavy {
    font-weight: bold;
}

.label_offset {
    margin-bottom: 1.6447em !important;
}

.label_aria textarea {
    resize: none;
}

.label_aria + .label_aria,
.row + .label_aria {
    margin-top: 0.98685em;
}

.label_aria .error_item {
    display: inline-block;
    padding-bottom: 0;
}

.label_aria .helper-link {
    font-size: 11px;
    font-weight: normal;
    float: right;
}

.label_aria.label_inline input {
    display: inline-block;
}

.label_aria.no_bottom {
    margin-bottom: 0;
}

.label_aria small {
    line-height: 1;
}

.label_aria.input_icon {
    position: relative;
}

    .label_aria.input_icon .icon {
        position: absolute;
        right: 0;
        bottom: 3px;
        padding: 0 10px;
    }

    .label_aria.input_icon input {
        padding-right: 2.303em;
    }

label.locked input {
    opacity: 0.5;
}



.form .input-large input {
    width: 14.5em;
}

.form .input-small input {
    width: 7em;
}

/*.form input:focus,
.form textarea:focus {
    background-color: #FFFFCC;
}*/

.form textarea {
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto; /* hides scrollbars in ie */
}

.form .grouping input,
.form textarea {
    /*font-size: 1.17em;*/
    font-weight: normal;
    padding-left: .25em;
    padding-top: .25em;
}

.form .grouping input {
    line-height: 100%;
    height: 1.5em;
}

.form label ~ small {
    display: block;
    line-height: 1.5;
    padding-top: 0.25em;
}

.align_right input /* If a form is in an align_right row make sure the text in the textbox is unaffected */ {
    text-align: left;
}

.form .row .grouping_button { /* For buttons in a horizontal form. */
    float: left;
    padding-bottom: 1.5em;
    padding-top: 1.85em; /* Compensates for the space labels take up. */
}

    .form .row .grouping_button.clear {
        padding-top: 0;
    }

.form .column_last .button {
    margin: 1.71325em 0 1em;
}

.grouping_button {
    float: right;
    padding-bottom: 1.5em;
}

.form .align_right .grouping_button {
    display: block;
    float: right;
}

.grouping_button p {
    margin-top: 1.5em;
    margin-bottom: 0;
}


.form .date_picker,
.label_aria.date_picker {
    position: relative;
    /*padding-right: 3em;*/
}

.label_aria.date_picker {
    line-height: 2em;
}
    .label_aria.date_picker:after {
        content: "\f073";
        font-family: FontAwesome;
        font-weight: normal;
        font-size: 16px;
        color: inherit;
        position: absolute;
        right: 8px;
        bottom: 2px;
    }

    .label_aria.date_picker input {
        padding-right: 20px;
    }

    .label_aria.date_picker img.ui-datepicker-trigger {
        top: auto;
        right: auto;
    }

.form .input_list {
    margin-bottom: 1em;
}

    .form .input_list input {
        height: auto;
    }

    .form .input_list label {
        line-height: normal;
    }

    .form .input_list p {
        padding: 0.5em 1.25em 0;
        margin: 0;
        white-space: normal;
    }


.date_picker input,
.date_picker.label_aria input,
.date_picker img {
    display: inline-block;
}

.date_picker strong {
    display: block;
}

.date_picker img /* Calendar icon on the date picker */ {
    cursor: pointer;
    padding-left: 5px;
    vertical-align: top;
}


.form .label_context label { /* Hides labels off screen.  Great for creating compliant code without over-explaining form fields for customers that possess the gift of sight. */
    height: 1px;
    width: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
}

.form div.label_context {
    padding-top: 0;
}

.form span.label_context /*Fills the space created by hiding labels off screen.*/ {
    padding-top: 2em;
}

.form .label_beside .grouping_button,
.form .label_context .grouping_button { /* Take off the top padding on a button if the label is hidden because it is context or the label is beside the input */
    padding-top: 0;
}

/* Small forms */
.moving_supplies_wrapper .standout {
    padding: 1em;
    margin: 0.5em 0 1em;
}

.moving_supplies_wrapper .form {
    padding: 1em 0.5em;
    margin: 0;
}

.moving_supplies_wrapper fieldset {
    float: none;
    margin: 0;
}

.form.action .small-form fieldset {
    float: none;
}

    .form.action .small-form fieldset.checkbox .checkbox {
        padding-top: 0.4112em;
    }

.moving_supplies_wrapper legend,
.form .small-form legend,
.form .small-form .grouping {
    padding-bottom: 0.5em;
}

.form .small-form .grouping_button {
    padding: 1em 0 0;
}

.form.action .small-form .grouping_button {
    padding-bottom: 1.5em;
}

.form-options {
    padding: 0.5em;
}

    .form-options a {
        display: inline-block;
        margin: 0 0.25em;
    }


/* AutoSuggest dropdown */
/* A fix for the autosuggest in IE7 */
.auto_suggest_container {
    z-index: 1;
}

    .auto_suggest_container li {
        margin: 0;
    }

    .auto_suggest_container a {
        display: block;
        padding: .5em;
        color: Black;
        text-decoration: none;
    }

/* Auto suggest in the header search */
.header_navigation .auto_suggest_container a {
    font-size: 1em;
    font-weight: normal;
    padding: .25em;
    cursor: default;
}

    .header_navigation .auto_suggest_container a:hover {
        background: #dedede;
    }

.header_navigation .auto_suggest_container li {
    float: none;
}

/* If you don't want bottom margin or padding on a form use class="form form_single". 
Usually this happens if you have a single dropdown in a table that already spaces things out with padding on the td. */

.form_single,
.form_single .row,
.form_single .row .grouping,
.form_single .row .grouping_button {
    margin-bottom: 0;
    padding-bottom: 0;
}



fieldset {
    float: left; /* Need this to make legend behave in all browsers */
    margin-bottom: 1.5em;
}

    fieldset.normal {
        float: none;
    }

.fieldset_last {
    margin-bottom: 0;
}

legend { /* IE adds extra margin to legend unless you float fieldset and then position legend to the left */
    left: 0;
    position: relative;
    width: 100%;
    font-weight: bold;
    font-size: 1.33em;
    white-space: normal;
    padding-bottom: 1.13em;
}

    legend p {
        margin-bottom: 0;
    }

    legend.light {
        font-weight: 400;
    }

    legend.small {
        font-size: 1.2em;
    }

.legend_beside /* If you want the legend to the left of its associated label-input groups. See trailer rates. Doesn't work in IE 7 or 6 but degrades nicely. */ {
    float: left;
    margin-right: 1.5em;
}

.action fieldset legend {
    color: #000;
}

fieldset fieldset {
    margin-bottom: 0;
}

    fieldset fieldset legend {
        font-size: 1.125em;
        padding-bottom: 0.75em;
    }

/* These classes are used to style the legends like headers. Padding is used because margin does not behave consistently on legend. */



legend.h1 {
    color: #011960;
    font-size: 1.8em;
    padding-bottom: .8em;
}

legend.h2 {
    font-size: 1.67em;
    padding-bottom: .45em;
    _margin-bottom: .9em; /* IE 6 needs this because it doesn't understand the CSS below. */
}

    legend.h2 + .row { /* Creates a border underneath the legend. The legend itself can't have a border that stetches across the width of its container. */
        border-top: solid 1px #e7e5dd;
        padding-top: 1.5em;
    }

legend.h3 {
    font-size: 1.33em;
    padding-bottom: 1.113em;
}

legend.h4 {
    font-size: 1.17em;
    padding-bottom: 1.29em;
}


legend.h5 {
    font-size: 1em;
    padding-bottom: 1em;
}

legend.label {
    font-size: 1em;
    line-height: 2em;
    padding-bottom: 0;
}

/* Styles the table rendered out by asp:CheckBoxList and asp:RadioButtonList. */

table.input_list {
    width: auto;
    margin-bottom: 0;
}

    table.input_list td {
        white-space: nowrap;
        border: 0;
        padding: 0 1.5em 1.5em 0;
    }

        table.input_list td input,
        table.input_list td label,
        .row .grouping table.input_list td input,
        .row .grouping table.input_list td label,
        .input_list input,
        .input_list label,
        label.inline input {
            display: inline-block;
            vertical-align: text-top;
            height: auto;
            margin: 0 0.25em 0 0;
        }

label.inline + label.inline {
    margin-top: 0.5em;
}


/* =Buttons ----------------------------------- */

.button, .button_next, .button_previous, .button_add, .button_cancel, .button_delete, .button_confirm, .button_disabled, .button_next_disabled, .grouping .button {
    background-color: #f66711;
    border: 1px solid #f66711;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    height: auto;
    padding: 4px 9px 5px;
    text-decoration: none;
    width: auto; /* ie6 removes extra spacing*/
    border-radius: 3px;
}




    .button:hover,
    .button:focus,
    .button:active,
    .button_next:hover,
    .button_next:focus,
    .button_next:active,
    .button_previous:hover,
    .button_previous:focus,
    .button_previous:active,
    .button_add:hover,
    .button_add:focus,
    .button_add:active,
    .button_cancel:hover,
    .button_cancel:focus,
    .button_cancel:active,
    .button_confirm:hover,
    .button_confirm:focus,
    .button_confirm:active {
        background-color: #d75608;
        border-color: #d75608;
    }

/*.button_next {
    background-image: url(Images/Buttons/ButtonNext.png);
    background-position: right;
    padding-right: 24px;
}

.button_previous {
    background-image: url(Images/Buttons/ButtonPrevious.png);
    background-position: left;
    padding-left: 24px;
}

.button_add {
    background-image: url(Images/Buttons/ButtonAdd.png);
    background-position: left;
    padding-left: 30px;
}

.button_cancel {
    background-image: url(Images/Buttons/ButtonCancel.png);
    background-position: left;
    padding-left: 30px;
}

.button_confirm {
    background-image: url(Images/Buttons/ButtonConfirm.png);
    background-position: left;
    padding-left: 30px;
}*/

.button_expand {
    width: 100%;
    box-sizing: border-box;
}

.button-primary, .button-secondary {
    font-size: 14px;
    font-weight: bold;
    font-family: inherit;
    color: white;
    cursor: pointer;
    padding: 8px 18px 9px;
    margin-bottom: 16px;
    background: #f66711;
    border: solid 1px #f66711;
    border-radius: 3px;
    box-shadow: none;
    appearance: button;
    -webkit-appearance: button;
    -moz-appearance: button;
}

.button-secondary {
    color: #f66711;
    background: #fff;
}

.button_large {
    padding: 8px 12px;
    max-height: 40px;
}

    .button_large .fa {
        font-size: 20px;
    }

    .button_large .fa-mobile {
        font-size: 22px;
        position: relative;
        top: 2px;
    }


.button_disabled, .button_next_disabled,
.button_disabled:hover, .button_next_disabled:hover,
.button_disabled:focus, .button_next_disabled:focus {
    background-color: #dfdfdf;
    border-bottom-color: #b3b3b3;
    border-left-color: #e6e6e6;
    border-right-color: #c0c0c0;
    border-top-color: #f2f2f2;
    color: #a0a0a0;
}

    .button_disabled:hover,
    .button_disabled:focus,
    .button_disabled:active,
    .button_next_disabled:hover,
    .button_next_disabled:focus,
    .button_next_disabled:active {
        cursor: default;
    }

.button_next_disabled {
    background-image: url(Images/Buttons/ButtonNextDisabled.png);
    background-position: right;
    padding-right: 24px; /* Padding is in pixels because you don't want this space to increase if you increase button size */
}

.button-offset {
    margin-top: 0.8224em;
}

.button img {
    vertical-align: middle;
}

.button_cancel + .button_next {
    margin-left: 0.4112em;
}

.button_last,
.standout .row > .column button:only-child,
.standout .row > .column_last button:only-child {
    margin-top: 1.6447em;
}

.button_link {
    color: #22609a;
    text-decoration: underline;
    border: none;
    background: none;
    padding: 0;
    display: inline;
}

    .button_link:hover,
    .button_link:focus,
    .button_link:active {
        color: #579cdc;
        text-decoration: underline;
        background: none;
        padding: 0;
        display: inline;
        border: none;
        cursor: pointer;
    }

a.link-button {
    display: inline-block;
    padding-top: 0.4112em;
}


input.big, .button_big {
    font-size: 1.5em;
}


td.button /* If you have td that has a button in. Usually the last column so padding-right is removed. See storage rates. */ {
    padding-right: 0;
}


/* =Footer and legalese --------------------------------------- */

.footer {
    /*border-top: solid 1px #e7e5dd;*/
    /*clear: both;
    padding-top: 2.5em;
    position: relative;
    zoom: 1;*/
}

    .footer h5 {
        margin-bottom: 1.5em;
    }

.legal { /* Legal info, languages and phone number */
    color: #51493a;
    font-size: .92em;
    margin: auto;
    max-width: 100%;
    min-width: 740px;
    text-align: center;
    width: 80em;
    padding-bottom: 1.7878em;
}

    .legal ul.navigation li {
        font-weight: normal;
    }

    .legal ul.inline li {
        margin-right: 16px;
    }

        .legal ul.inline li a {
            font-size: 12px;
        }

    .legal .follow {
        margin: auto;
        margin-bottom: 1.75rem;
    }

    .legal p {
        font-size: 12px;
    }


/* =Loading overlay */

.loading_overlay, .loading_icon_wrapper, .loading_overlay_iframe {
    top: 0;
    left: 0;
    position: absolute;
}

.loading_overlay {
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    -khtml-opacity: 0.75;
    opacity: 0.75;
    background: white;
    z-index: 15;
}

.loading_icon_wrapper {
    z-index: 20;
    width: 100%;
    top: 50%;
    position: fixed;
    _position: absolute;
    _top: 150px;
}

.loading_overlay_iframe {
    display: none;
    _display: block;
    _filter: mask();
}

.loading_icon {
    width: 130px;
    text-align: center;
    margin: 0 auto;
    background: white;
}

    .loading_icon .loading_spinner {
        height: 85px;
        background: white url(images/loading.gif) no-repeat center center;
    }

.context { /* used to hide things that provide additional context for screen readers. */
    height: 1px;
    left: -10000px;
    overflow: hidden;
    position: absolute;
    top: auto;
    width: 1px;
}


code { /* used for writing smallcode examples - maintains the spacing as it is in the html. */
    color: #790000;
    font-size: 1.2em;
}



/* Styles for the storage room size dealie */

/* Why are these classes in kinda camel case? -Jim */

.box_size {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    background: url(Images/BoxSizes/boxsizes.gif) no-repeat -160px -134px;
    position: relative;
}

    .box_size .tr, .box_size .br, .box_size .tl, .box_size .bl, .box_size .border_maker {
        position: absolute;
    }

    .box_size .border_maker {
        border: 1px solid black;
        width: 78px;
        height: 78px;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .box_size .tr {
        top: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/tr.gif) no-repeat top left;
        z-index: 2;
    }

    .box_size .tl {
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/tl.gif) no-repeat top right;
        z-index: 3;
    }

    .box_size .br {
        bottom: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/br.gif) no-repeat bottom left;
        z-index: 4;
    }

    .box_size .bl {
        bottom: 0;
        left: 0;
        width: 50%;
        height: 50%;
        background: url(Images/BoxSizes/bl.gif) no-repeat bottom right;
        z-index: 5;
    }

    .box_size .items {
        position: absolute;
    }

    .box_size .human {
        background: url('Images/BoxSizes/Items/human.gif') no-repeat top left;
        width: 9px;
        height: 30px;
        margin-left: -5px;
        margin-top: -18px;
    }

    .box_size .couch {
        background: url('Images/BoxSizes/Items/couch-realistic.gif') no-repeat top left;
        width: 35px;
        height: 30px;
        margin-left: -12px;
        margin-top: -11px;
    }

    .box_size .couch_rev {
        background: url('Images/BoxSizes/Items/couch-realistic_rev.gif') no-repeat top left;
        width: 35px;
        height: 30px;
        margin-left: -23px;
        margin-top: -11px;
    }

    .box_size .loveseat {
        background: url('Images/BoxSizes/Items/loveseat-realistic.gif') no-repeat top left;
        width: 29px;
        height: 27px;
        margin-left: -12px;
        margin-top: -11px;
    }

    .box_size .loveseat_rev {
        background: url('Images/BoxSizes/Items/loveseat-realistic_rev.gif') no-repeat top left;
        width: 29px;
        height: 27px;
        margin-left: -17px;
        margin-top: -11px;
    }

    .box_size .mediumbox {
        background: url('Images/BoxSizes/Items/medbox.gif') no-repeat top left;
        width: 10px;
        height: 9px;
        margin-left: -5px;
        margin-top: -3px;
    }

/* styles for the truck/trailer combo images */

.combo_wrapper {
    width: 500px;
}

.combo_trailer {
    position: relative;
    width: 178px;
    overflow: visible;
    height: 108px;
    float: left;
}

    .combo_trailer img {
        position: absolute;
        right: -12px;
        bottom: 0;
    }

.combo_truck {
    position: relative;
    width: 322px;
    overflow: visible;
    height: 108px;
    float: right;
}

    .combo_truck img {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
/* =Floats */

.float_left {
    float: left;
}

.float_right {
    float: right !important;
    margin-right: 0;
}

.no_top {
    margin-top: 0;
    padding-top: 0;
}

.no_right {
    margin-right: 0;
    padding-right: 0;
}

.no_bottom, .desktop_no_bottom {
    margin-bottom: 0;
    padding-bottom: 0;
}

.no_left {
    margin-left: 0;
    padding-left: 0;
}

/* Styles to hide the spacing issues created by the table asp:formview renders */

.form_view, .form_view td {
    margin: 0;
    padding: 0;
    border: 0;
}

    .form_view + h2 {
        padding-top: 0;
    }

.desktop_hide, .onlymobile /* Hide things from non-mobile browsers */ {
    display: none !important;
}

/* =Print - Used to style print media  ----------------------------------------------- */

@media Print {

    body {
        padding: 0;
    }

    .main {
        border: 0;
        padding: 0;
        display: inline;
    }

    .header {
        display: none;
    }

    .row, .message {
        overflow: visible;
    }

        .row:after, .message:after { /* Mozilla printing bug fix. */
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

    img {
        margin-left: -70pt;
    }

    .message, .standout, .divider, .divider_first, ul.navigation li, .sidebar ul.navigation li a, .sidebar ul.navigation li.navigation_first a, td, th, .action, h2.divider, label.h2, .tabs, .tabs li a,
    .data_table, .data_table td, .data_table th {
        border-color: #aaa; /* Make borders a darker color that prints better. */
    }

    .header, .main, .legal, .page_header, .page_header_border {
        max-width: 100%;
        min-width: 100%;
        width: 100%;
    }

    .page_header, .page_header_border {
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        padding: 0;
        overflow: visible;
    }

    .tabs {
        margin-left: 0;
        margin-right: 0;
    }

    .feature_summary li { /* Feature lists use bg images so this fixes it for print */
        background: transparent;
        padding-left: 5px;
        vertical-align: middle;
    }

    .footer,
    .legal {
        display: none;
    }

    *:first-child + html .feature_summary li,
    * html .feature_summary li { /* for ie */
        list-style-image: url(Images/Icons/Success.gif);
        list-style-position: inside;
    }

        *:first-child + html .feature_summary li.unchecked,
        * html .feature_summary li .unchecked { /* for ie */
            color: #666666;
            list-style-image: none;
        }

        .feature_summary li:before { /* for firefox because of printing bug https://bugzilla.mozilla.org/show_bug.cgi?id=133490 */
            content: url(Images/Icons/Success.gif);
        }

        .feature_summary li.unchecked:before {
            content: url(Images/Icons/Transparent.gif);
            padding-left: 16px;
        }

    .noprint {
        display: none;
    }

    .print_break {
        page-break-after: always;
    }

    .payment_code {
        page-break-before: always;
    }
}

/* for default input text insite textbox  */
.InfieldTextDefaultMessage {
    color: #999999;
}

/*---- For Follow us bar */
.follow {
    text-align: center;
    padding-left: 4px 4px 4px 0;
}

    .follow a {
        display: inline-block;
        vertical-align: top;
        text-decoration: none;
        margin-right: 0.715103em;
    }

        .follow a img {
            max-height: 2.14531em;
        }

/* Modal windows */
.modal_wrapper {
    left: 0;
    top: 0;
    position: absolute;
    padding-top: 5%;
    padding-bottom: 5%;
    width: 100%;
    z-index: 10 !important;
}

.modal_overlay {
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0.75;
    filter: alpha(opacity = 75);
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 5 !important;
}

.modal {
    background-color: white;
    border: 1px solid #E7E5DD;
    border-radius: 6px 6px 6px 6px;
    margin: 0 auto 3em;
    padding: 0;
    position: relative;
    width: 85%;
    max-width: 60em;
    overflow: hidden;
}

    .modal .button-group {
        overflow: hidden;
    }

        .modal .button-group .button {
            float: right;
            margin-left: 0.8224em;
        }

.shadow {
    box-shadow: 0px 2px 4px #101010;
}

.modal .form {
    border: none;
    padding: 0;
    margin: 0;
}

.modal_close_button {
    margin: 0 auto -15px;
    position: relative;
    width: 85%;
    max-width: 60em;
    z-index: 10;
    text-indent: -9999px;
}

a.modal_close {
    background: url(Images/Icons/Cancel.gif) no-repeat top right;
    display: block;
    height: 30px;
    margin-right: -15px;
}

.modal_cell {
    padding: 1.5em 1.5em 0;
}
/* New Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    background-color: rgba(0,0,0,0.5);
}

.modal-scroll {
    max-height: 32.4em;
    margin: 2em;
    overflow: auto;
}
    .modal-scroll .flex-row.margin-x {
        margin-right: 0;
    }

.modal-content {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 101;
    width: 80%;
    max-width: 700px;
    background-color: white;
    border-radius: 6px;
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    .modal-content.modal-medium {
        top: 25%;
        width: 600px;
        margin-left: -300px;
        transform: none;
    }

    .modal-content.modal-small {
        max-width: 350px;
    }

    .modal-overlay.open,
    .modal-content.open {
        display: block;
    }

    .modal-content .hide-for-modal {
        display: none;
    }

    .modal-content img {
        max-height: 23em;
    }

    .modal-content .video-wrapper {
        position: relative;
        margin: 0;
    }

        .modal-content .video-wrapper:after {
            content: "";
            display: block;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
        }

        .modal-content .video-wrapper iframe {
            display: block;
            width: 100%;
            height: 100%;
        }

        .modal-content .video-wrapper .content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

.modal-trigger {
    cursor: pointer;
}

.modal-close {
    display: block;
    position: absolute;
    top: -0.375em;
    right: -0.375em;
    width: 1.125em;
    height: 1.125em;
    font-size: 2.5em;
    font-weight: bold;
    color: white;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: #f66711;
    border: 2px solid white;
    border-radius: 100%;
}

    .modal-close:hover {
        color: #222;
    }



/* =progress tracker ------------------------------------------------------------- */

.progress_trackermain {
    margin-top: 5px;
    padding-bottom: 80px;
    width: 852px;
}

.progress {
    float: left;
    text-align: center;
}

.progress_moneyinfo {
    float: right;
    text-align: right;
}

.progress_filled {
    background-image: url(/ubox/images/tracking/filled.png);
    background-repeat: no-repeat;
    color: #FFF;
}

.progress_empty {
    background-image: url(/ubox/images/tracking/nextpage.png);
    background-repeat: no-repeat;
    color: #a6a6a6;
}

.progress_number {
    width: 112px;
    height: 26px;
    font-size: 1.1em;
    padding-top: 5px;
    font-weight: bold;
    background-position: center top;
}

.progress_firstempty {
    background-image: url(/ubox/images/tracking/firstempty.png);
    font-size: 1.40em;
    padding-top: 3px;
    padding-bottom: 2px;
}


.progress_firstfilled {
    background-image: url(/ubox/images/tracking/firstfilled.png);
}

.progress_currentpage {
    background-image: url(/ubox/images/tracking/currentpage.png);
    font-size: 1.40em;
    padding-top: 3px;
    padding-bottom: 2px;
}

.progress_lastempty {
    background-image: url(/ubox/images/tracking/lastempty.png);
}

.progress_lastcomplete {
    background-image: url(/ubox/images/tracking/lastcomplete.png);
    font-size: 1.40em;
    padding-top: 3px;
    padding-bottom: 2px;
}
/* New Mobile 
   (adjustments for desktop) 
---------------------------------- */
.new-mobile .fa {
    display: none;
}

    .new-mobile .fa.fa-top {
        vertical-align: text-top;
    }

    .new-mobile .fa.show-for-desktop, .icon_link, .icon_link .fa {
        display: inline-block;
    }

.icon_link {
    margin-bottom: 0.4112em;
}

    .icon_link .fa {
        font-size: 14px;
        vertical-align: middle;
        margin-right: 0.4112em;
    }

.hidden {
    position: absolute;
    bottom: 0;
    visibility: hidden;
    opacity: 0;
}

/* Flexslider 
   (Image carousel) 
----------------------------------*/
.flexslider {
    background: none;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin: 0;
}

#slider .slides {
    /*background: url(MyPhotos/images/truckSmall.jpg) no-repeat center right;
    background-size: contain;*/
}

    #slider .slides li {
        height: 170px;
        position: relative;
    }

        #slider .slides li:before {
            content: '';
            border-left: 10em solid rgba(255,255,255,0.8);
            border-top: 5em solid transparent;
            border-bottom: 5em solid transparent;
            position: absolute;
            left: 20%;
            left: 40%;
            right: auto;
            top: 20%;
            height: 0.7em;
            width: 8em;
            -webkit-transform: rotate(10deg);
            -moz-transform: rotate(10deg);
            -ms-transform: rotate(10deg);
            -o-transform: rotate(10deg);
            transform: rotate(10deg);
        }

        #slider .slides li:after {
            content: '';
            background: rgba(255,255,255,0.6);
            border-radius: 50%;
            border: 1px solid black;
            position: absolute;
            left: 70%;
            top: 53%;
            height: 1.5em;
            width: 1.5em;
        }

    #slider .slides img {
        margin: 1.5em 8em;
        max-height: 120px;
        max-width: 120px;
        min-height: 120px;
        min-width: 120px;
        /*width: 33%;*/
        border: 2px solid #000;
        border-radius: 50%;
        position: relative;
    }

#carousel .slides li {
    position: relative;
}

#carousel .slides img {
    max-height: 60px;
    min-width: 60px;
}

#carousel .slides li:after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.7);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

#carousel .slides li .flex-caption {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.9em;
    padding: 1em;
    min-height: 25%;
    box-sizing: border-box;
}

#carousel .slides .flex-active-slide:after {
    content: '';
    background: rgba(255,255,255,0.0);
}

/* MyPhoto Banner & Search Results
---------------------------------------*/
.myphoto-banner {
    position: relative;
    padding-top: 1.9em;
    margin-bottom: 2em;
    background-image: url(MyPhotos/images/famous_banner.jpg);
    background-repeat: no-repeat;
    background-size: contain;
}

    .myphoto-banner.photo-info {
        height: 22em;
        background-image: url(MyPhotos/images/photoinfo_banner.jpg);
    }

.banner-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 30em;
    height: 34em;
    padding: 2em 2em 0;
}

.myphoto-banner h1 {
    font-size: 2.275em;
    color: white;
    line-height: 1.3;
}

.myphoto-banner.photo-info h1 {
    width: 10em;
    font-size: 3.25em;
    text-align: center;
}

.myphoto-banner .text-mask {
    width: 4.75em;
    display: inline-block;
    white-space: nowrap;
    color: transparent;
    margin-right: 0.2em;
    background: url(MyPhotos/images/photoinfo_logo.png) left 0.25em no-repeat;
    background-size: contain;
}

.myphoto-banner .logo {
    color: #f66711;
}

.trademark {
    font-size: 85%;
    font-weight: normal;
}

.myphoto-banner.photo-info .text-mask {
    width: 5em;
}

.myphoto-banner p {
    font-size: 1.25em;
    color: white;
    margin-bottom: 0;
}

.myphoto-banner .social a {
    display: inline-block;
    margin: 0.5em 0.5em 0 0;
}

.myphoto-banner .flexslider {
    background: none;
    border: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    margin: 0;
}

.myphoto-banner .slider-wrapper {
    position: relative;
    margin-left: -2.5em;
    margin-right: -2.5em;
    border-color: black;
    border-style: solid;
    border-width: 1px 0;
    box-shadow: 0 2px 3px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.25);
    -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.25);
}

    .myphoto-banner .slider-wrapper:before,
    .myphoto-banner .slider-wrapper:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1.5em;
        background: url(MyPhotos/images/film_strip_tile.png) left center repeat-x;
    }

    .myphoto-banner .slider-wrapper:after {
        bottom: 0;
        top: auto;
    }

.myphoto-banner #slider .slides li {
    height: 400px;
    position: relative;
}

    .myphoto-banner #slider .slides li:after {
        left: 56%;
        top: 58%;
        height: 1.2em;
        width: 1.2em;
    }

    .myphoto-banner #slider .slides li:before {
        border-left: 25em solid rgba(255,255,255,0.6);
        border-top: 6.5em solid transparent;
        border-bottom: 9em solid transparent;
        left: 20%;
        top: 37%;
        width: 17em;
        -webkit-transform: rotate(9deg);
        -moz-transform: rotate(9deg);
        -ms-transform: rotate(9deg);
        -o-transform: rotate(9deg);
        transform: rotate(9deg);
    }

.myphoto-banner #slider .slides img {
    max-height: 200px;
    max-width: 200px;
    min-height: 200px;
    min-width: 200px;
    margin: 8em 3em;
    border-color: white;
    border-width: 4px;
    box-shadow: 2px 3px 10px rgba(0,0,0,0.2);
}

.social {
    position: absolute;
    left: 1.5em;
    bottom: 1em;
    padding: 1em 0;
}

.instagram {
    padding-left: 4em;
    background: url(MyPhotos/images/instalogo.png) left center no-repeat;
}

.hashtag {
    display: block;
    font-weight: bold;
    color: #f5db86;
}

.caps {
    text-transform: uppercase;
}

.customer-photos .row {
    padding-top: 2em;
    border-top: 1px solid #ddd;
}

    .customer-photos .row:first-child {
        padding-top: 1em;
        border: none;
    }

.customer-photos h3 {
    margin-bottom: 0.5em;
}

.customer-photos .tabs {
    padding: 0;
    margin: 0 0 1em;
    overflow: hidden;
    border: none;
}

    .customer-photos .tabs ul {
        position: static;
    }

    .customer-photos .tabs li {
        margin: 0;
    }

        .customer-photos .tabs li:first-child a {
            border-radius: 6px 0 0 6px;
        }

        .customer-photos .tabs li.active a,
        .customer-photos .tabs li.active a:visited {
            color: white;
            background-color: #2d97ed;
            border-color: #2d97ed;
        }

    .customer-photos .tabs a {
        display: block;
        font-size: 1em;
        font-weight: bold;
        color: #2d97ed;
        text-decoration: none;
        padding: 0.5em 1em;
        background-color: white;
        border: 1px solid #2d97ed;
        border-radius: 0 6px 6px 0;
    }

        .customer-photos .tabs a:hover {
            color: #257abe;
            background-color: #eef6fd;
        }

.customer-photos .tab-subnav a {
    display: inline-block;
    font-weight: bold;
    margin-bottom: 0.5em;
}

.tablelist td {
    width: 25%;
    padding: 0.5em 0.5em 0.5em 0;
    border: none;
}

.tablelist.wide td {
    width: 50%;
}

.map-wrapper {
    position: absolute;
    width: 45.6415em;
    height: 16.125em;
}

.photo-wrapper {
    position: relative;
    text-align: center;
    padding: 1em;
    margin-bottom: 0.5em;
    background-color: #fff;
    border: 1px solid #bbb;
    -webkit-box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
    box-shadow: 1px 2px 3px rgba(0,0,0,0.15);
}

    .photo-wrapper.fixed {
        min-height: 20em;
    }

    .photo-wrapper.polaroid {
        padding-bottom: 3em;
    }

.video-wrapper {
    margin-bottom: 1.1358em;
}

    .video-wrapper.float_right {
        margin-left: 1.6447em;
    }

    .video-wrapper iframe {
        max-width: 100%;
    }

    .video-wrapper.widescreen {
        position: relative;
    }

        .video-wrapper.widescreen:after {
            content: "";
            display: block;
            padding-bottom: 56.25% /* 16:9 aspect ratio */
        }

        .video-wrapper.widescreen iframe {
            width: 100%;
            height: 100%;
        }

        .video-wrapper.widescreen .content {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }



.photo-wrapper img {
    width: 100%;
    max-width: 100%;
}

.photo-wrapper .addthis_toolbox {
    position: absolute;
    bottom: 1em;
    width: 100%;
}

.photo-author > div {
    display: inline-block;
    font-size: larger;
    color: #fff;
    padding: 0.2745em 0.6855em;
    margin-bottom: 1em;
    background-color: #555;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.photo-author cite {
    position: relative;
    font-weight: bold;
    font-style: normal;
    margin-right: 0.25em;
}

    .photo-author cite:before {
        content: "";
        position: absolute;
        top: -1.3021em;
        left: -1.7818em;
        width: 2em;
        height: 2em;
        background: url(MyPhotos/images/orange-star.png) center no-repeat;
    }

.myphoto-banner #carousel .slides {
    margin-top: 1.4em;
    margin-bottom: 1.4em;
    background-color: #000;
}

    .myphoto-banner #carousel .slides li {
        position: relative;
        margin: 0 0.25em;
        overflow: hidden;
        background: white;
        border: 3px solid #000;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
    }

    .myphoto-banner #carousel .slides img {
        max-height: 100px;
        min-width: 120px;
        margin: 0 auto;
    }

    .myphoto-banner #carousel .slides li:after {
        /*content: '';
    position: absolute;
    background: rgba(255,255,255,0.7);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;*/
        background: none;
    }

    .myphoto-banner #carousel .slides li .flex-caption {
        position: absolute;
        bottom: 0;
        width: 100%;
        background: rgba(0,0,0,0.7);
        color: #fff;
        font-size: 0.9em;
        padding: 1em;
        min-height: 25%;
        box-sizing: border-box;
    }

    .myphoto-banner #carousel .slides .flex-active-slide:after {
        content: '';
        background: rgba(255,255,255,0.0);
    }
/* Donation Banner */
.donation-banner {
    position: relative;
    z-index: 5;
    min-height: 8.8em;
    padding: 0 2.4671em;
    margin: -2.5em -2.5em 1.2335em;
    background: url(MyPhotos/images/photo_counter_banner.png) left top no-repeat;
    border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
}

    .donation-banner p,
    .donation-banner img,
    .donation-banner .counter {
        display: inline-block;
        vertical-align: middle;
    }

    .donation-banner p {
        font-size: 1.4em;
        color: #222;
        margin-bottom: 0;
    }

    .donation-banner img {
        margin: 0 0.5em;
    }

    .donation-banner .hashtag {
        display: inline;
        color: #ff6418;
        font-weight: normal;
    }

.counter {
    position: relative;
    overflow: hidden;
    margin: 0 0.5757em;
    border: 2px solid #ff6418;
    background-color: #000;
    background-image: -webkit-linear-gradient(top, #222 30%, #000);
    background-image: -moz-linear-gradient(top, #222 30%, #000);
    background-image: -ms-linear-gradient(top, #222 30%, #000);
    background-image: -o-linear-gradient(top, #222 30%, #000);
}

    .counter > span {
        float: left;
        min-width: 0.576em;
        min-height: 1.1515em;
        font-size: 3em;
        font-weight: bold;
        color: #fff;
        padding: 0.0548em 0.10965em 0.0275em;
        border-left: 2px solid #fff;
    }

        .counter > span:first-child {
            border: none;
        }

    .counter .fold {
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        z-index: 2;
        border: 1px solid #000;
        box-shadow: 0 1px 2px rgba(0,0,0,0.35);
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
        -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
    }
/* Feed Banner */
.feed-banner {
    overflow: hidden;
    padding: 0.8224em 2.4671em;
    margin: 0 -2.5em;
    background: url(MyPhotos/images/feed_banner.png) left top no-repeat;
}

    .feed-banner > div,
    .feed-banner .hashtag {
        display: inline-block;
        vertical-align: bottom;
        margin-top: 2.3026em;
    }

    .feed-banner .ig-thumb {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
        text-decoration: none;
        margin-right: 0.8224em;
        border: 1px solid rgba(255,255,255, 0.5);
    }

        .feed-banner .ig-thumb img {
            border: none;
        }

    .feed-banner .hashtag {
        font-size: 2.3em;
        font-weight: normal;
        color: #ff6418;
        line-height: 2;
        text-decoration: none;
        margin: 0 0 0 1.7162em;
    }

        .feed-banner .hashtag:before {
            content: "";
            float: left;
            display: block;
            width: 56px;
            height: 56px;
            margin-right: 0.5em;
            background: url(misc/content/images/myphotos/instagram_feed_icon.png) center no-repeat;
        }
/* National U-Haul Famous Banner */
.photoday-banner {
    overflow: hidden;
    padding: 1.5em 1.5em 0;
    margin: -2.5em -2.5em 0;
    background: url(misc/content/images/myphotos/uhaul_famous_banner_bg.jpg) left top no-repeat;
    border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
}

    .photoday-banner ins {
        text-decoration: none;
    }

    .photoday-banner p {
        float: left;
        clear: left;
        font-size: 1.2em;
        line-height: 1;
        margin-top: -12px;
        margin-bottom: 0;
    }

        .photoday-banner p:first-child {
            font-size: 1.85em;
            color: #555;
            margin-top: 0;
        }

            .photoday-banner p:first-child span {
                color: #ff6418;
                padding-right: 5px;
            }

    .photoday-banner sup {
        font-size: small;
    }

    .photoday-banner img {
        width: 105px;
        vertical-align: middle;
        margin: 0 4px;
    }

    .photoday-banner a[href] {
        float: right;
        font-size: 1.2em;
        color: #fff;
        text-decoration: none;
        padding: 14px 20px;
        margin: -20px 5px 0;
        background-color: #ff6418;
    }

    .photoday-banner a:hover {
        background-color: #fb7421;
    }
/*  Moving Supplies */
/* --- Winter banner --- */
.winter-banner {
    height: 263px;
    background: white url(/MovingSupplies/Content/Images/MovingSupplies/winter-banner.png) left top no-repeat;
}

    .winter-banner strong {
        display: block;
        font-size: 1.64474em;
        color: #fff;
        padding-top: 1.3em;
        padding-left: 10em;
    }

    .winter-banner ul {
        font-size: 1.151315em;
        padding-left: 16em;
        margin-top: 1.07143em;
    }

        .winter-banner ul li {
            float: left;
            line-height: 1;
            padding-right: 0.2857145em;
        }

            .winter-banner ul li:before {
                content: "\2022";
                padding-right: 0.2857145em;
            }
/* --- NYC banner --- */
.nyc-supplies-banner {
    height: 17.682em;
    padding: 0 6.57898em 0 12.7467em;
    margin-bottom: 1.9737em;
    background: white url(/MovingSupplies/Content/Images/MovingSupplies/nyc-banner.jpg) left top no-repeat;
}

    .nyc-supplies-banner h2 {
        font-size: 1.9736843em;
        padding-top: 1.25em;
        margin-bottom: 0.125em;
    }

    .nyc-supplies-banner p {
        font-size: 1.3157895em;
        line-height: 1.2;
    }

.ny {
    background: white url(/MovingSupplies/Content/Images/MovingSupplies/ny-banner.jpg) left top no-repeat;
}

/* Footer Advertisement 
---------------------------------------*/
.footer-banner {
    min-height: 15em;
    padding: 1em 0 0;
    position: absolute;
    left: 2.5em;
    right: 2.5em;
    bottom: 0;
}

    .footer-banner .row .column {
        width: 50%;
        margin: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

        .footer-banner .row .column + .column {
            padding-left: 2em;
        }

    .footer-banner h2 {
        margin: 1em 0 0.5em;
    }

    .footer-banner .flexslider {
        background-image: url(MyPhotos/images/truck-photo-bg.jpg);
        background-size: 75%;
        background-position: right bottom;
        background-repeat: no-repeat;
    }

    .footer-banner.uhaul-famous {
        background-image: url(Images/Banners/uhaulfamous-footer.jpg);
        background-repeat: no-repeat;
    }

        .footer-banner.uhaul-famous span {
            color: #f66711;
        }

        .footer-banner.uhaul-famous ul {
            margin-bottom: auto;
        }

        .footer-banner.uhaul-famous li {
            display: inline-block;
            margin-right: 8px;
        }

    .footer-banner .button {
        bottom: 1.5em;
        display: inline-block;
        font-size: 16px;
        font-weight: normal;
        color: white;
        padding: 8px 16px;
        background: #f66711;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .footer-banner .content {
        padding: 0 16px;
    }

/* Footer contact information 
--------------------------------------- */
.footer .main-row, .footer-contact-information > .row {
    margin: 0 auto;
    max-width: 1100px;
    min-width: 912px;
}

.footer-contact-information.message.prefixed {
    padding: 15px 0;
    margin-bottom: 24px;
}

    .footer-contact-information.message.prefixed > .row {
        margin-bottom: 0;
        box-sizing: border-box;
    }

    .footer-contact-information.message.prefixed .row {
        margin-bottom: 0;
    }

.footer-contact-information > .row > .column {
    padding-left: 15px;
    box-sizing: border-box;
}

.footer-contact-information > .row > .column_last {
    padding-right: 15px;
    box-sizing: border-box;
}

.footer-contact-information strong, .footer-contact-information span, .footer-contact-information ul {
    font-size: 14px;
}

.footer-contact-information a[href^="tel"] {
    font-size: 20px;
    color: #f66711;
    margin-left: 8px;
    margin-right: 10px;
    font-weight: 700;
    vertical-align: -2px;
}

.footer-contact-information ul {
    font-weight: bold;
    margin-top: 3px;
}

    .footer-contact-information ul li {
        margin-bottom: 0;
    }

    .footer-contact-information ul a {
        text-decoration: none;
        color: #22609a;
        font-size: 13px;
    }
    .footer-contact-information ul .fa {
        font-size: 16px;
        margin-right: 5px;
        position: relative;
        top: 1px;
    }
    .footer-contact-information .icon-link {
        position: relative;
        display: inline-block;
        font-weight: bold;
        line-height: 1.3;
        padding-left: 1.375rem;
    }
    .footer-contact-information .icon-link:before {
        position: absolute;
        top: -3px;
        left: 0;
        display: inline-block;
        font-weight: normal;
        text-decoration: none;
        line-height: inherit;
        content: "\f0ac";
        font-size: 16px;
        font-family: FontAwesome;
    }


    .site-map-nav .main-row {
        padding-left: 30px;
        padding-right: 30px;
        margin-bottom: 8px;
        box-sizing: border-box;
    }

.footer.site-map-nav h2 {
    font-size: 14px;
}

.footer.site-map-nav .news {
    margin-bottom: 14px;
}


/* U-Haul Stories Banners 
-----------------------------*/
.story-banner {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    min-height: 140px;
    padding: 2em;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0 0 6px 6px;
}

    .story-banner p {
        max-width: 65%;
        font-size: 1.81em;
        color: white;
        line-height: 1.5;
    }

    .story-banner .button {
        position: absolute;
        left: 1.5em;
        bottom: 1.5em;
        display: inline-block;
        font-size: 16px;
        font-weight: normal;
        color: white;
        padding: 8px 16px;
        margin: 0;
        background: #f66711;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .story-banner.veteran {
        background-image: url(Images/Banners/history-and-culture.jpg);
    }

    .story-banner.nature {
        background-image: url(Images/Banners/in-the-community.jpg);
    }

    .story-banner.community {
        background-image: url(Images/Banners/media-relations.jpg);
    }

/* Moving Help (Orders) 
---------------------------*/
.branding {
    padding-bottom: 1.1513em;
}

    .branding img {
        max-width: 15.625em;
        display: inline-block;
        margin-right: 1.1513em;
    }

.action-list {
    list-style: none;
    margin: 0;
}

    .action-list li {
        margin-bottom: 0.4112em;
    }

.service-order .date_picker input {
    display: inline-block;
    width: 80%;
}

.service-order .divider > .row .column:first-child {
    width: 24%;
}

.service-order .divider > .row .column_last {
    width: 10%;
    padding-top: 0.8224em;
}

.service-order .inline {
    margin-bottom: 0.4112em;
}

.service-order .row .grouping:last-child {
    margin-right: 0;
}

.service-order .form {
    padding-bottom: 4px;
    margin-bottom: 0;
}

.computed-price {
    padding-top: 0.4112em;
}

.total .inline {
    margin-bottom: 0;
}

/*table.responsive th {
    font-size: 1.1513158em;
}

table.responsive td.inset {
    padding-left: 1.6447em;
}*/

.moving-help-location {
    position: relative;
}

#useCurrentDeviceLocation {
    position: absolute;
    top: 0.675rem;
    right: 1.125rem;
    z-index: 1;
}

/* RTGB */
.image-frame {
    padding: 0 10px;
    border: 1px solid #ddd;
    box-sizing: border-box;
}

    .image-frame img {
        display: block;
        max-width: 100%;
        margin: -8px 0 -3px;
    }

.rtg_select table {
    margin-top: 10px;
}

    .rtg_select table td {
        padding: 0.98685em;
        border-width: 1px 0;
    }

    .rtg_select table input {
        margin-top: 0;
    }

    .rtg_select table tr:nth-child(odd) {
        background-color: whitesmoke;
    }

.rtg_return_statement {
    font-size: 1em;
    padding: 0.5em 1em;
    margin-bottom: 0.5em;
    background-color: rgba(141, 178, 13, 0.35);
    -webkit-border-radius: 0.25em;
    border-radius: 0.25em;
}

.order-process {
    list-style: none;
    overflow: auto;
    margin-bottom: 2em;
}

    .order-process li {
        float: left;
        width: 26.666667%;
        margin: 0;
        padding-right: 10%;
    }

        .order-process li:last-child {
            padding: 0;
        }

    .order-process .standout {
        width: auto;
        min-height: 10em;
        padding: 0.98685em;
        margin: 0;
        box-sizing: border-box;
    }

    .order-process strong {
        display: block;
        line-height: 1.3;
        padding-bottom: 0.32895em;
        margin-bottom: 0.82235em;
        border-bottom: 1px solid #e7e5dd;
    }

    .order-process img {
        float: right;
    }

        .order-process img:last-child {
            float: none;
            position: absolute;
            right: -4.5em;
            top: 40%;
        }

    .order-process p {
        margin-bottom: 0;
    }

.rtg-rates label.label_aria {
    margin-left: 2.4671em;
}

.rtg-rates .subtle {
    margin-left: 3.0839em;
}

.rtg-rates .step-icon {
    position: absolute;
    left: 1.23355em;
}

.rtg-rates label.date_picker {
    width: 13em;
}

    .rtg-rates label.date_picker input {
        width: 80%;
    }

.rtg-calc {
    float: right;
}

    .rtg-calc label {
        font-size: 1.3em;
        display: block;
        margin-bottom: 0.82235em;
    }

        .rtg-calc label input {
            width: 5em;
            padding: .2em;
            font-size: 1em;
            font-weight: bold;
        }

    .rtg-calc table {
        margin-bottom: 0;
    }

        .rtg-calc table td {
            border: none;
            padding: 0 0 .5em 0;
            text-align: right;
            vertical-align: middle;
        }

        .rtg-calc table .price {
            padding-left: 1em;
            padding-top: .5em;
        }

.rtg-benefits img {
    display: block;
    margin-bottom: 1.6447em;
}
/* Schedule Reservation */
.map-marker {
    position: relative;
    line-height: 1.4;
    padding-left: 2.4671em;
    margin-bottom: 0.8224em;
}

    .map-marker .result_number {
        position: absolute;
        left: 0;
    }

    .map-marker h4 {
        font-size: inherit;
        margin: 0;
    }

.address {
    margin-bottom: 0.8224em;
}

.schedule-reservation .image-link {
    display: inline-block;
    font-weight: bold;
    line-height: 1.2;
    padding: 0.8224em 0.8224em 0.8224em 1.6447em;
    background-position: center left;
    background-repeat: no-repeat;
}

    .schedule-reservation .image-link.up {
        background-image: url(icons/arrow-up.gif);
    }

    .schedule-reservation .image-link.down {
        background-image: url(icons/arrow-down.gif);
    }

.schedule-reservation .form {
    clear: both;
    margin-bottom: 0;
}

.schedule-reservation .grouping {
    display: inline-block;
    vertical-align: top;
    padding-bottom: 0.8224em;
    margin-left: 0.8224em;
}

.schedule-reservation .date_picker {
    width: 30%;
}

.schedule-reservation label,
.schedule-reservation select,
.schedule-reservation option {
    text-align: left;
}

.schedule-reservation input[type='radio'] {
    margin-top: 0;
}

.schedule-reservation .panel {
    /*float: right;
    width: 95%;*/
    padding: 0.8224em;
    margin: 0 0 1.5em;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 6px;
}

    .schedule-reservation .panel > div {
        display: inline-block;
        vertical-align: top;
        width: 32%;
        padding-right: 0.8224em;
        box-sizing: border-box;
    }

        .schedule-reservation .panel > div:last-of-type {
            padding-right: 0;
        }

/* Schedule Conditions */
/* custom row divider */
.row.custom-divider {
    position: relative;
}

    .row.custom-divider.column_2 .column,
    .row.custom-divider.column_2 .column_last {
        width: 45%;
    }

.custom-divider .text-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 48%;
    font-size: 16px;
    font-weight: bold;
    line-height: 26;
    text-transform: uppercase;
}

.text-divider:before,
.text-divider:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 60%;
    width: 1px;
    background: #ddd;
}

.text-divider:after {
    top: 60%;
    bottom: 0;
}
/* static datepicker*/
.static.bordered {
    float: left;
    clear: both;
    padding: 12px;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 3px rgba(0,0,0,0.05);
}

.static .ui-datepicker {
    width: 300px;
    font-size: 12px;
    border: none;
}

    .static .ui-datepicker .ui-datepicker-header {
        text-align: center;
        margin: 0;
        background: none;
    }

    .static .ui-datepicker .ui-datepicker-prev {
        left: 50px;
    }

    .static .ui-datepicker .ui-datepicker-next {
        right: 50px;
    }

    .static .ui-datepicker .ui-datepicker-prev-hover,
    .static .ui-datepicker .ui-datepicker-next-hover {
        top: 2px;
        background: #eee;
    }

        .static .ui-datepicker .ui-datepicker-prev-hover .ui-icon,
        .static .ui-datepicker .ui-datepicker-next-hover .ui-icon {
            top: 50%;
        }

    .static .ui-datepicker .ui-datepicker-header .ui-icon {
        background-repeat: no-repeat;
    }

    .static .ui-datepicker .ui-datepicker-prev .ui-icon {
        background-image: url(/icons/player_rewind.gif);
        background-position: left center;
    }

    .static .ui-datepicker .ui-datepicker-next .ui-icon {
        background-image: url(/icons/player_fforward.gif);
        background-position: right center;
    }

    .static .ui-datepicker .ui-datepicker-title {
        font-size: 14px;
        font-weight: bold;
        color: inherit;
    }

    .static .ui-datepicker table {
        font-size: inherit;
        margin-bottom: 0;
        border-collapse: separate;
        border-spacing: 3px;
    }

    .static .ui-datepicker th {
        font-size: inherit;
        font-weight: normal;
        text-transform: uppercase;
    }

    .static .ui-datepicker td {
        padding: 0;
        border: 1px solid #ccc;
    }

        .static .ui-datepicker td span,
        .static .ui-datepicker td a {
            text-align: center;
        }

    .static .ui-datepicker .ui-state-default {
        padding: 7px;
        background: none;
        border: none;
    }

    .static .ui-datepicker .ui-state-disabled {
        color: #555;
        background: #ddd;
    }
    /*.static .ui-datepicker .ui-datepicker-other-month {
        background: #fbf4d4;
    }*/
    .static .ui-datepicker .ui-datepicker-other-month,
    .static .ui-datepicker .available {
        background: #fff;
        border-color: #fff;
    }

        .static .ui-datepicker .available a {
            font-weight: bold;
            color: #31ac33;
            border-top: 3px solid #31ac33;
        }

/* User Profile (MyUhaul) */
.box {
    min-height: 15em;
    padding: 0.8224em;
    border: 1px solid #ded9c9;
    border-radius: 6px;
}

    .box:after {
        content: "";
        display: block;
        clear: both;
    }

    .box .bordered {
        line-height: 1.3;
        padding: 0.28115em 0;
        border-bottom: 1px solid #555;
    }

    .box .form .grouping {
        padding-bottom: 0.4934em;
    }

    .box .row:last-child {
        margin-bottom: 0;
    }

    .box .form .checkbox {
        padding: 0 0 1.6447em;
    }

    .box table td {
        padding: 0.4934em;
        border: none;
    }

.toggle-trigger {
    cursor: pointer;
    text-transform: capitalize;
}

.uhaul-go-box {
    padding: 0.8224em;
    margin-bottom: 1.6447em;
    background-color: #fff;
    border: 1px solid #e7e5dd;
    border-radius: 6px;
}

    .uhaul-go-box img {
        display: inline-block;
        max-width: 9.05em;
        margin-bottom: 0.4112em;
    }

    .uhaul-go-box .success + .navigation {
        padding-left: 1.6447em;
        margin-bottom: 0;
    }

/* College Moving */
.college-moving .page_header {
    padding: 0;
    margin-left: -3.5em;
}

.college-moving .video-link {
    display: block;
    margin-bottom: 0.4112em;
}

.college-moving .photo-wrapper {
    padding: 0.6579em;
    box-shadow: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.college-moving object {
    width: 100%;
    height: 255px;
}

.college-moving .addthis_toolbox {
    width: auto;
}

.college-moving .more {
    margin-bottom: 0.8224em;
}

.college-moving table td {
    width: 33%;
}

.college-moving table a {
    font-weight: bold;
    display: block;
    line-height: 1.3;
    padding-top: 0.8224em;
}

.college-moving .video-wrapper {
    padding: 35px 35px 0 0;
}

.off-page-text {
    position: absolute;
    left: -9999em;
}


.blog > div,
.college-blog > div {
    position: relative;
}

.blog img,
.college-blog img {
    display: block;
}

.blog a[href],
.college-blog a {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    font-weight: bold;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    background-color: rgba(0,0,0,0.65);
    box-sizing: border-box;
}



/* Adaptive Reuse */
.reuse-types img {
    margin-bottom: 0.4112em;
}

.reuse-types .callout {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 0;
}

.callout.steel {
    color: #629f8d;
}

.callout.concrete {
    color: #69893d;
}

.callout.landfill {
    color: #105c2d;
}

.callout.energy {
    color: #ef5e0f;
}

.callout.emissions {
    color: #b0cdb7;
}

.historical-form {
    padding: 18px;
    background-color: #f17633;
    border: 1px solid #e16f31;
    border-radius: 6px;
}

    .historical-form .grouping,
    .historical-form .row .grouping_button,
    .historical-form h2,
    .historical-form p {
        padding-bottom: 0;
        margin-bottom: 0.4112em;
    }

    .historical-form h2,
    .historical-form p {
        color: white;
    }

    .historical-form input[type="text"],
    .historical-form select {
        border: 1px solid #e16f31;
    }

    .historical-form .button,
    .historical-form .button:focus {
        font-weight: normal;
        color: white;
        padding: 0.4112em;
        background: #333;
        border: none;
    }

.historical-list {
    margin: 0 -16px;
}

    .historical-list:after {
        content: "";
        display: table;
        clear: both;
    }

    .historical-list li {
        float: left;
        width: 33.3333%;
        cursor: pointer;
        padding: 0 16px;
        margin: 0 0 16px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .historical-list li,
    .historical-list .content-wrapper {
        height: 20em;
    }

    .historical-list .content-wrapper {
        position: relative;
        overflow: hidden;
    }

    .historical-list .content {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        color: #fff;
        padding: 16px;
        background-color: rgba(0,0,0,0.4);
        box-sizing: border-box;
        transition: background-color 0.2s ease-in-out;
        -webkit-transition: background-color 0.2s ease-in-out;
        -moz-transition: background-color 0.2s ease-in-out;
    }

        .historical-list .content:hover,
        .historical-list .content:hover a {
            color: #333;
            background: none;
        }

    .historical-list h3 {
        font-weight: normal;
        color: #f17633;
        padding-bottom: 0.4112em;
        margin: 0 0 0.4112em;
        border-bottom: 1px solid #222;
    }

    .historical-list a {
        position: absolute;
        right: 16px;
        bottom: 16px;
        color: white;
        text-decoration: none;
    }

.grid-list {
    margin-left: -8px;
    margin-right: -8px;
}

    .grid-list:after {
        content: "";
        display: table;
        clear: both;
    }

    .grid-list li {
        float: left;
        padding: 0 8px;
        margin: 0 0 8px;
        box-sizing: border-box;
    }

    .grid-list.two-col li {
        width: 50%;
    }

    .grid-list.six-col li {
        width: 16.66667%;
    }

        .grid-list.two-col li:nth-child(2n+1),
        .grid-list.six-col li:nth-child(6n+1) {
            clear: left;
        }

    .grid-list input.picture {
        display: block;
        width: 100%;
        padding: 4px;
        margin: 0;
    }
/* Burning Man */
.burning-man .page_header {
    margin-bottom: 0;
}

.burning-man .product_row .success {
    display: none;
}

.product_row.column_5 .column:nth-child(5n+5),
.product_row.column_5 .column:last-child {
    margin: 0;
}

.product_row .thumbnail_image {
    min-height: 9em;
}

.product_row a,
.product_row .success,
.product_row .error {
    display: inline-block;
}

.product_row .price {
    font-size: 1.5em;
}
/* UBOX Delivery */
.text-standout {
    color: #448e12;
}

.breadcrumb dt,
.breadcrumb dd {
    display: inline-block;
    margin: 0 0.4112em 0 0;
}

    .breadcrumb dt::after {
        content: "\203A";
        font-size: 1.1513em;
        font-weight: bold;
        padding-left: 0.4112em;
    }

.ubox h2,
.ubox-order h2 {
    margin: 0;
    padding: 1em;
    font-size: 1.3em;
    background: #229cf2;
    color: #fff;
    border-top-right-radius: 0.5em;
    border-top-left-radius: 0.5em;
}

.ubox .container,
.ubox-order .container {
    padding: 0.98685em;
    margin-bottom: 0.98685em;
    background-color: whitesmoke;
    border: 1px solid #dfdfdf;
    border-radius: 0 0 0.4112em 0.4112em;
}

.ubox .delivery-help {
    padding: 2em 2em 16.0362em;
    background: #2a5c99 url(Images/ubox-delivery-bg.jpg) center bottom no-repeat;
    border: none;
}

.ubox a {
    cursor: pointer;
}

.ubox fieldset {
    float: none;
    margin: 0;
}

.ubox .form {
    margin: 0;
}

    .ubox .form .row {
        margin-bottom: 1.5em;
    }

.ubox .select_date {
    position: relative;
    top: 0;
    left: 1em;
    width: 85%;
    padding: 1em;
    margin: 0 0 1em;
    border-radius: 0.5em;
}

    .ubox .select_date p {
        font-size: 80%;
    }

.ubox .ubox-panel,
.ubox-order .ubox-panel {
    padding: 0.98685em;
    margin-bottom: 0.98685em;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 0.4112em;
}

    .ubox .ubox-panel.choice {
        cursor: pointer;
    }

    .ubox .ubox-panel.hide-cursor {
        cursor: default;
    }

    .ubox .ubox-panel:after {
        content: "";
        display: block;
        clear: both;
    }

.ubox label.ubox-panel span {
    display: block;
    line-height: 1.4;
}

.ubox .chosen {
    border-color: #88af30;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.1);
}

.ubox .ubox-panel label.option {
    display: inline-block;
    font-size: 1.325em;
    font-weight: bold;
    margin-bottom: 0.3103em;
}

.ubox .ubox-panel label.extended {
    display: block;
}

.ubox label.extended + .details {
    padding-left: 0;
}

.ubox label.option .price {
    float: right;
    font-size: inherit;
    padding-left: 1em;
}

.ubox .ubox-panel label.expander {
    padding-right: 1.3158em;
    margin-bottom: 1em;
}

.ubox .ubox-panel p {
    margin-bottom: 1em;
}

.ubox .ubox-panel .delivery-image {
    display: block;
    margin-bottom: 1em;
    border: 2px solid #eee;
}

.ubox .ubox-panel .button_confirm {
    color: #448e12;
    cursor: default;
    padding-right: 20px;
    background-color: #d1edb8;
    border-color: #56a81e;
}

.ubox .ubox-panel ul li {
    margin-bottom: 0.5em;
}

.ubox .ubox-panel li.divider {
    padding: 0;
    border-color: #aaa;
}

.ubox .ubox-panel .checkbox {
    padding-top: 0;
    margin-top: 1em;
}

.ubox .ubox-panel .extra-content,
.ubox .ubox-panel .button_next {
    display: none;
}

.ubox .ubox-panel .button_next {
    float: right;
}

.ubox .ubox-panel .choice_indicator {
    float: none;
    display: inline-block;
}

.ubox .chosen .extra-content,
.ubox .chosen .button_next {
    display: block;
}

.ubox .ubox-panel .services {
    padding: 1em;
    margin: 0 -1em -1em;
    background-color: #e7e7e7;
    border-radius: 0 0 0.5em 0.5em;
}

.ubox .ubox-panel .no-service {
    background-color: white;
}

.ubox .ubox-panel .services input[type="radio"],
.ubox .ubox-panel .services input[type="checkbox"] {
    margin: 0;
}

.ubox .ubox-panel .indented {
    padding-left: 1.3158em;
}

.ubox .ubox-panel .details {
    padding-left: 2.7138em;
}

.ubox .ubox-panel .result_number {
    margin-right: 0.8334em;
}

.ubox .strike {
    text-decoration: line-through;
}

.ubox .ubox-panel .breakdown {
    position: relative;
}

.ubox-order h2 {
    font-size: 1.3158em;
    padding: 0.5em 0.75em;
    border-radius: 0;
}

    .ubox-order h2.divider {
        color: inherit;
        padding-left: 0;
        margin-bottom: 1em;
        background: none;
    }

    .ubox-order .subhead,
    .ubox-order h2.secondary {
        color: inherit;
        background-color: #ddd;
    }

.ubox-order .subhead {
    padding: 0.5em 0.8572em;
    margin: 0 -13px 13px;
}

    .ubox-order .subhead:first-child {
        margin-top: -13px;
    }

.ubox-order h3 {
    font-size: 1.1513em;
    margin-bottom: 0;
    padding-bottom: 0.5em;
}

.ubox-order h4 {
    padding-top: 6px;
    margin-bottom: 10px;
}

.ubox-order .text-muted {
    color: #999;
}

.ubox-order .divider.top {
    border-width: 1px 0 0;
    padding: 0.5em 0 0;
    margin: 2em 0 0;
}

.ubox-order .container {
    border-top: none;
    border-radius: 0;
}

    .ubox-order .container.collapse {
        margin: 0;
    }

    .ubox-order .container.flat {
        background: #fff;
    }


.ubox-order h2 + .container.container-alternate {
    padding-top: 0.98685em;
}

.ubox-order .ubox-panel:last-child {
    margin-bottom: 0;
}

.ubox-order .order-list {
    list-style: disc;
    padding-left: 1.3158em;
}

    .ubox-order .order-list > li {
        margin-bottom: 0.4112em;
    }

        .ubox-order .order-list > li a {
            padding: 0;
        }

    .ubox-order .order-list li > strong {
        display: block;
        padding-bottom: 0.4112em;
    }

    .ubox-order .order-list ul {
        list-style: none;
    }

        .ubox-order .order-list ul:after {
            content: "";
            display: table;
            clear: both;
        }

        .ubox-order .order-list ul li {
            float: left;
            width: 50%;
        }

            .ubox-order .order-list ul li:first-child {
                float: right;
                text-align: right;
                margin-top: -1.6448em;
            }

.ubox-order dl.compact {
    margin-top: 0.4112em;
    margin-bottom: 0;
}

.ubox-order dl.summary {
    font-size: 14px;
    
    text-align: right;
    margin-bottom: 0;
}

    .ubox-order dl.summary dt,
    .ubox-order dl.summary dd {
        float: none;
        font-weight: bold;
        display: inline-block
    }

.ubox-order a[href^='tel'] {
    color: inherit !important;
    cursor: text;
    text-decoration: none;
}

.ubox-order .fa {
    display: inline-block;
}

.ubox-order .modify-link {
    display: inline-block;
    font-weight: bold;
    text-decoration: none;
    padding-left: 0.4112em;
}

.ubox-order input[type='radio'] {
    position: absolute;
    left: -999em;
}

    .ubox-order input[type='radio']:checked + .choice,
    .ubox-order .choice:hover {
        border-color: #5cad25;
        box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
    }

.ubox-order .choice {
    line-height: 1.5;
    padding: 0.8224em 1.3158em;
    margin-bottom: 0.8224em;
    background-color: white !important;
    border: 1px solid #ccc;
    border-radius: 0.4112em;
}

    .ubox-order .choice strong {
        padding: 0;
    }

.delivery-help p,
.delivery-help legend,
.delivery-help a {
    font-weight: bold;
    color: white;
}

.delivery-help a {
    display: inline-block;
    margin-bottom: 1em;
}

.delivery-help legend {
    position: relative;
    top: 1.5em;
    font-size: 1em;
    padding: 0;
    margin-bottom: 0.4934em;
}

.delivery-help fieldset {
    float: none;
    display: block;
    padding: 2em 1.5em 1em;
    margin: 0 0 0.2467em;
    background-color: rgba(255,255,255,0.35);
    border-radius: 4px;
}

.delivery-help label {
    display: inline-block;
    font-weight: bold;
}

    .delivery-help label span {
        display: block;
        padding: 0.7401em 1.9737em;
        margin: 0 0.4934em 0 0;
        background-color: white;
        border-radius: 0.4934em;
    }

    .delivery-help label input,
    .ubox-panel label.option input,
    .ubox label.ubox-panel input {
        position: absolute;
        left: -999em;
        opacity: 0;
    }

        .delivery-help label input:checked + span {
            background-color: #abd227;
        }

.ubox-container-dimensions {
    border-right: 1px solid #ddd;
    padding-right: 1rem;
}

.number-of-boxes {
    font-size: 6em;
    font-weight: 600;
}

.uboxes-label {
    font-size: 3em;
}

.row-grid.column_2 .column:nth-child(even) {
    margin: 0;
}

.price-grid {
    width: 60%;
    padding: 1em;
    margin-bottom: 1.3158em;
    background-color: whitesmoke;
    border-radius: 6px;
}

    .price-grid dl {
        overflow: hidden;
        padding: 0.4934em;
        margin: 0;
    }

        .price-grid dl + dl {
            border-top: 1px solid #aaa;
        }

    .price-grid dt,
    .price-grid dd {
        line-height: 1.4;
        padding: 2px 0;
        margin: 0;
    }

    .price-grid dt {
        float: left;
        font-weight: normal;
        clear: left;
    }

    .price-grid dd {
        float: right;
        text-align: right;
    }

.discount-tag {
    position: absolute;
    top: 2em;
    right: -1.8em;
}

    .discount-tag:after {
        content: "";
        position: absolute;
        top: -2px;
        right: 0;
        display: block;
        width: 10px;
        height: 10px;
        background-color: #527501;
        transform: skewY(21deg);
    }

    .discount-tag p {
        position: relative;
        z-index: 2;
        width: 10em;
        color: white;
        text-align: center;
        padding: 1em;
        margin: 0;
        background-color: #abd227;
        border-radius: 0.5em 0 0 0.5em;
        box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
    }

    .discount-tag strong {
        display: block;
        font-size: 18px;
        line-height: 1.4;
    }

.summary_items.standout {
    padding: 0;
}

.summary_table {
    border: 1px solid #ddd;
    background: #fff;
    padding: 1em;
    margin: 0.5em;
    border-radius: 0.5em;
    z-index: 1;
    position: relative;
}

    .summary_table .edit_link {
        position: absolute;
        right: 1em;
    }

    .summary_table table {
        margin-bottom: 0;
    }

    .summary_table caption {
        font-size: 1.15em;
        font-weight: bold;
        text-align: left;
        padding-right: 2.1453em;
    }

    .summary_table table tr:last-child td {
        border-bottom: none;
        padding-bottom: 0;
    }

    .summary_table table td {
        line-height: 1.4;
        padding: 1em 0 0 0;
        border: none;
    }

        .summary_table table td .price {
            font-weight: bold;
            font-size: 1em;
        }

            .summary_table table td .price span {
                font-weight: normal;
            }

    .summary_table.total td {
        padding: 0;
    }

    .summary_table.total .info {
        margin: 0.5em 0 0;
    }

    .summary_table.total .charge_details {
        display: none;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 0.5em;
        padding: 1em;
        width: 25em;
        z-index: 100;
        box-shadow: rgba(0,0,0,0.5) 0.25em 0.25em 0.5em;
    }

    .summary_table.total .info:hover ~ .charge_details {
        display: block;
        position: absolute;
        right: 95%;
        bottom: 0;
    }

    .summary_table.review input {
        display: block;
        margin: 0.5em auto 0;
        background-color: #ddd;
    }
/*UBox landing page*/
ul.nav-menu {
    overflow: hidden;
    margin-bottom: 2.4671em;
    border-bottom: 1px solid #ddd !important;
}

    ul.nav-menu li {
        position: relative;
        float: left;
        padding: 1.1513em 3.2072em;
        margin: 0;
        border: none;
        box-sizing: border-box;
    }

        ul.nav-menu li:first-child {
            padding-left: 0;
        }

        ul.nav-menu li:last-child {
            padding-right: 0;
        }

        ul.nav-menu li:not(:last-child):after {
            content: "";
            position: absolute;
            top: 0;
            left: 100%;
            bottom: 0;
            display: block;
            width: 1px;
            background-color: #ddd;
            background-image: linear-gradient(180deg, #fff, #ddd);
        }

    ul.nav-menu .fa {
        display: inline-block;
        vertical-align: middle;
        font-size: 1.1513em;
        margin-right: 0.4112em;
    }

    ul.nav-menu.nav-menu-extended li {
        padding: 0;
    }

        ul.nav-menu.nav-menu-extended li div {
            margin: 2px;
            padding: 14px 27px;
        }

            ul.nav-menu.nav-menu-extended li div a {
                color: #22609a
            }

        ul.nav-menu.nav-menu-extended li.active div {
            background-color: #226099;
        }

            ul.nav-menu.nav-menu-extended li.active div a {
                color: white;
            }

.ubox-landing-accent {
    color: #99B632;
}

    .ubox-landing-accent.picture.one-sided {
        border-color: #99B632 !important;
    }

.grid-list.ubox-uses {
    margin-left: 0;
    margin-right: 0;
}

    .grid-list.ubox-uses li {
        padding-left: 32px;
        padding-right: 32px;
        margin-bottom: 32px;
    }

.ubox-uses .use {
    padding-left: 6px;
    margin: 0;
    border-left: 2px solid #99B632;
}

.step-list.ubox-storage li {
    width: 25%;
    font-weight: normal;
    white-space: normal;
    padding: 40px 8px 0;
    margin-right: -3px;
    text-align: left;
    border: none;
}

    .step-list.ubox-storage li:before {
        content: counter(item-counter)".";
        top: 0;
        left: 8px;
        right: 8px;
        width: auto;
        height: auto;
        font-size: 24px;
        font-weight: bold;
        color: #99B632;
        padding: 0;
        border-color: #99B632;
        border-width: 0 0 2px;
        border-radius: 0;
    }

    .step-list.ubox-storage li > img[src$="svg"] {
        position: absolute;
        top: 3px;
        right: 8px;
        z-index: 2;
        max-width: 50px;
        max-height: 25px;
    }

    .step-list.ubox-storage li:first-child > img[src$="svg"] {
        max-width: 55px;
    }

    .step-list.ubox-storage li:nth-child(2) > img[src$="svg"] {
        max-width: 70px;
    }

    .step-list.ubox-storage li:last-child > img[src$="svg"] {
        max-width: 80px;
    }

.ubox-popular-uses img {
    max-height: 5rem;
}

.ubox-picture {
    border-bottom: 0.125rem solid #99B632;
    padding-bottom: 0.25rem;
}
/* Grilling */
.grilling_form {
    position: relative;
    min-height: 20.148em;
    padding-bottom: 12.5em;
    overflow: visible;
    background: #fbfcf7 url(Images/Grilling/grilling-propane-bg-2x.jpg) center bottom no-repeat;
    background-size: cover;
    border-color: #ded9c9;
}

    .grilling_form.racing {
        background-color: white;
        background-image: url(/Images/PIR/PIR_Form.jpg);
        background-size: contain;
    }

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .grilling_form.racing {
        background-image: url(/Images/PIR/PIR_Form@2x.jpg);
    }
}

.grilling_form .callout {
    position: absolute;
    bottom: -3em;
    left: -2.1382em;
    width: 13em;
    height: 13em;
    padding: 3em 1.5em;
    background: url(Images/Grilling/starburst-2x.png) center no-repeat;
    background-size: contain;
    box-sizing: border-box;
}

    .grilling_form .callout p {
        line-height: 1.4;
        text-align: center;
        margin-bottom: 0;
    }

    .grilling_form .callout .discount {
        font-size: larger;
        color: #da400a;
    }

    .grilling_form .callout .center {
        display: block;
        margin-top: 1.5em;
    }

.grilling_form label input[type="text"] {
    background-color: rgba(255,255,255,0.75);
    border: 1px solid #ccc;
}

    .grilling_form label input[type="text"]:focus {
        background-color: white;
    }

/* Home Page */
.home_page .page_header {
    padding: 2.5em 2.5em 0;
    overflow: visible;
}

    .home_page .page_header > img {
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 4px;
    }

    .home_page .page_header .text_wrapper {
        position: relative;
        top: 0;
        left: 0;
        width: 48%;
        padding: 1.6447em;
        margin-bottom: 4.523em;
    }

.home_page .text_wrapper h1,
.home_page .text_wrapper p {
    margin-bottom: 0.5em;
}

.home_page .text_wrapper .grouping {
    padding-bottom: 1em;
    margin-right: 0.98685em;
}

.intown_banner {
    position: relative;
    text-align: center;
}

    .intown_banner img.positioned {
        position: absolute;
        top: -0.4112em;
        left: 0;
    }

    .intown_banner p:first-child {
        font-size: 1.4803em;
        margin-bottom: 0.222em;
        margin-left: 4.44445em;
    }

.promo_area {
    zoom: 1;
}

    .promo_area .row {
        margin-bottom: 0;
    }

    .promo_area h2 {
        margin-bottom: .45em;
    }

/*----- New 6-Pack styling -----*/
.promo_wrapper {
    border-bottom: 1px solid #E7E5DD;
}

.promo_container {
    margin: 0 -2.5em 1.5em;
    padding: 0 2.5em;
    position: relative;
}

    .promo_container .row {
        overflow: visible;
    }

.promo_box {
    background: url("https://uhaul.com/Images/Gradient.gif") repeat-x scroll left top #FFFFFF;
    border: solid 1px #ded9c9;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    float: left;
    min-height: 23.4375em;
    margin: 0 1.9em 0 0;
    overflow: visible;
    padding: 1.645em;
    position: relative;
    vertical-align: top;
    width: 18.42em;
}

    .promo_box:last-child {
        margin-right: 0;
    }

.promo_col_2 {
    display: inline-block;
    vertical-align: top;
    width: 49%;
}
/*--- storage --*/
.promo_box .storage_badge {
    right: -1em;
    position: absolute;
    top: -2.5em;
}

.storage_badge {
    right: 10%;
    position: absolute;
    top: -5%;
}

.storage_img {
    bottom: -.5em;
    float: left;
    left: -1.5em;
    margin: 1em 0;
    position: relative;
    width: 135px;
}

.storage_text {
    margin-right: 0;
    position: relative;
    top: -10em;
    width: 46%;
}

.text_with_icon {
}

    .text_with_icon:before {
        content: '';
        display: inline-block;
        vertical-align: middle;
        width: 26px;
        height: 26px;
        margin-right: 8px;
        background-repeat: no-repeat;
        background-size: contain;
    }

    .text_with_icon.storage_icon:before {
        background-image: url(Images/Icons/storage-icon.svg);
    }
/*--- supplies --*/
.supplies img {
    float: left;
    margin: 2em .6em 0.8442em 0;
}
/*--- supplies --*/
.promo_ubox img {
    left: 3%;
    margin-left: 1em;
    position: absolute;
    top: 160px;
    width: 120px;
    z-index: 1;
}

.promo_ubox p {
    margin-bottom: 1em;
}

.promo_ubox ul {
    float: right;
    width: 43%;
    line-height: 1.4;
}
/*--- propane --*/
.promo_box.propane img {
    float: left;
    margin: 1em 0 0;
}

.promo_box.propane .column_last {
    width: 52%;
}

.promo_box.propane .button {
    margin-top: 0.8224em;
}
/*--- moving helpers --*/
.labor ul {
    float: right;
    line-height: 80%;
    margin: 0 1.5em .75em 0;
}

.labor img {
    max-width: 100%;
}

.labor > img {
    height: 115px;
    position: absolute;
    top: 115px;
    width: 151px;
}
/* Dealer */
.ad-container {
    position: relative;
}

    .ad-container img {
        display: block;
    }

    .ad-container .button {
        position: absolute;
        font-weight: normal;
        color: white;
        line-height: 1.3;
        display: inline-block;
        padding: 0.2741em 1.3706em;
        background: #f66711;
        border: none;
        border-radius: 0;
    }

        .ad-container .button.bottom {
            bottom: 0;
        }

        .ad-container .button.middle {
            left: 25%;
        }

/* SuperGraphics */
.travel-app-advertisement {
    position: relative;
}

    .travel-app-advertisement > a {
        position: absolute;
        top: -0.125rem;
        right: 0;
    }

        .travel-app-advertisement > a img {
            max-width: 8rem;
        }

/*system member demo banner*/
.system-member-demo {
    font-size: 1.2335em;
    line-height: 1.5;
    text-align: center;
    padding: .5rem 1rem;
    margin: 0.9375rem 0 1rem;
    border: none;
    border-radius: .25rem;
    background: #e0e6c0;
}

    .system-member-demo a {
        font-size: 0.75rem;
    }

.location-indicator {
    position: relative;
    font-size: .75rem;
    color: #3e3e3e;
    cursor: pointer;
    display: block;
    font-weight: bold;
    line-height: 1.5;
    margin-bottom: .5rem;
}

    .location-indicator:after {
        position: absolute;
        top: 1.125rem;
        right: .375rem;
        font-weight: normal;
        color: initial !important;
        content: "\f041";
        font-size: 1.125rem;
        font-family: FontAwesome;
    }

.date-picker {
    position: relative;
}

    .date-picker:after {
        position: absolute;
        top: -2.125rem;
        right: -12rem;
        font-weight: normal;
        color: initial !important;
        content: "\f073";
        font-size: 1.125rem;
        font-family: FontAwesome;
    }

.ui-datepicker {
    width: auto !important;
    font-size: 0.875rem;
    margin-top: 0.25rem;
    background: #fff;
}

    .ui-datepicker, .ui-datepicker .ui-datepicker-group {
        box-shadow: 0.125rem 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
        -moz-box-shadow: 0.125rem 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
        -webkit-box-shadow: 0.125rem 0.125rem 0.375rem rgba(0, 0, 0, 0.15);
    }

@media only screen and (min-width: 48em) and (max-resolution: 192dpi), only screen and (min-width: 48em) and (-webkit-max-device-pixel-ratio: 2), only screen and (min-width: 50.8125em) {
    .ui-datepicker, .ui-datepicker .ui-datepicker-group {
        display: inline-block;
    }
}

.ui-datepicker.ui-datepicker-multi {
    box-shadow: none;
    padding: 0.25rem 0.5rem 0;
    background-color: #c3c3c3;
    border-radius: 0.3125rem;
    border: 1px solid #9c9c9c;
    height: 37.25rem;
}

@media only screen and (min-width: 48em) and (max-resolution: 192dpi), only screen and (min-width: 48em) and (-webkit-max-device-pixel-ratio: 2), only screen and (min-width: 50.8125em) {
    .ui-datepicker.ui-datepicker-multi {
        height: 18.75rem;
    }
}

.ui-datepicker .ui-datepicker-header {
    position: relative;
    text-align: center;
    padding: 0.375rem 0;
    background-color: #777777;
}

.ui-datepicker .ui-datepicker-title {
    display: inline-block;
    font-weight: bold;
    color: white;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    position: absolute;
    top: 0;
    left: 0;
    color: #3e3e3e;
    padding: 0 0.375rem;
    line-height: 1.675rem;
    cursor: pointer;
}

    .ui-datepicker .ui-datepicker-prev:after,
    .ui-datepicker .ui-datepicker-next:after {
        content: "\f137";
        font-size: 1.25rem;
        font-family: FontAwesome;
    }

    .ui-datepicker .ui-datepicker-prev span,
    .ui-datepicker .ui-datepicker-next span {
        display: none;
    }

.ui-datepicker .ui-datepicker-next {
    left: auto;
    right: 0;
}

    .ui-datepicker .ui-datepicker-next:after {
        content: "\f138";
    }

.ui-datepicker a {
    text-decoration: none;
}

.ui-datepicker table {
    margin-bottom: 0;
    border-color: #CCCCCC;
    border-top: none;
    border: 1px solid #ddd;
}

    .ui-datepicker table thead {
        background: none;
    }

    .ui-datepicker table th {
        font-size: 0.75rem;
    }

table thead tr th {
    display: table-cell;
    line-height: 1.125rem;
    padding: .5rem .625rem .625rem;
}

.ui-datepicker table tbody tr td, table tbody tr th {
    font-size: .75rem;
}

.ui-datepicker table tbody tr td {
    border: 1px solid #ddd;
}

.ui-datepicker table tbody tr td, table tr td {
    display: table-cell;
    line-height: 1.125rem;
    padding: .5625rem .625rem;
}

.ui-datepicker table tbody tr:nth-child(even) {
    background: none;
}

.ui-datepicker table tbody td {
    text-align: center;
    border-color: #CCCCCC !important;
}

    .ui-datepicker table tbody td:hover {
        background-color: #d7e7f6;
    }

    .ui-datepicker table tbody td.ui-datepicker-unselectable span, .ui-datepicker table tbody td.ui-state-disabled span {
        color: #3e3e3e;
        opacity: 0.65;
    }

    .ui-datepicker table tbody td.ui-datepicker-other-month {
        background-color: #EEEEEE;
        color: #eee;
    }

.ui-datepicker-other-month > span.ui-state-default, .ui-datepicker-other-month > a.ui-state-default {
    color: #eee !important;
    visibility: hidden;
}

.ui-datepicker table tbody td.ui-datepicker-current-day {
    background-color: #d7e7f6;
}

.ui-datepicker table tbody td.ui-state-install-okdrop {
    background-color: #f3f365;
}

.ui-datepicker table tbody td.ui-state-install-nodrop {
    background-color: #e45a5a;
}

    .ui-datepicker table tbody td.ui-state-install-nodrop span, .ui-datepicker table tbody td.ui-state-install-nodrop a {
        color: #fff;
    }

.ui-datepicker table tbody td.ui-datepicker-today {
    background-color: #f77629;
}

    .ui-datepicker table tbody td.ui-datepicker-today a {
        font-weight: bold;
        color: #FFFFFF;
    }

.twilio-chat-message {
    display: flex;
    flex-direction: row;
    height: 35px;
    border: 1px solid #DDD;
    border-radius: 6px;
    margin-bottom: 12px;
}

    .twilio-chat-message svg,
    .twilio-chat-message .fa {
        margin-right: 10px;
        width: 45px;
        fill: white;
        background-color: #23619e;
        border-radius: 6px 0 0 6px;
        padding: 7px 0;
    }

    .twilio-chat-message .fa {
        display: block !important;
        font-size: 21px;
        line-height: 0.95;
        color: #fff;
        text-align: center;
    }

    .twilio-chat-message .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .twilio-chat-message a {
        font-weight: bold;
        text-decoration: none;
    }