/* Defaults */
/*---------------------------------------------*/

html, body {
    margin: 0;
    padding: 0;
}

body {
    background-color: #F5F7FA;
    font-family: "calibri", Arial, sans-serif;
    font-size: 16px;
    color: #6f7072;
}

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

p {
    display: block;
    margin: 1% 0;
    padding: 0;
    line-height: 22px;
}

    p span {
        display: block;
    }

/* Links */
/*---------------------------------------------*/

a {
    text-decoration: none;
    color: #0070ba;
}

    a:hover {
        text-decoration: underline;
        color: #005ea6;
    }

/* Lists */
/*---------------------------------------------*/

ul, ol {
    margin: 0;
    padding: 0;
}

    ul li, ol li {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

/* Headings */
/*---------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-size: 16px;
    font-weight: bold;
    /*text-transform: uppercase;*/
    margin: 0;
    padding: 0;
    /* MustOverride: color */
}

h1 {
    font-size: 24px;
    /*padding-top: 10px;*/
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 12px;
}

/* Responsive grid system overrides */
/*---------------------------------------------*/

/*
#container {
    border: 1px solid red;
}

.section-wrapper {
    border: 1px solid blue;
}

.section {
    border: 1px solid green;
}

.group {
    border: 2px solid blue;
}

.col,
.col-xs,
.single-centered-col {
    border: 2px solid red !important;
}
*/

.single-centered-group {
    margin-top: 4em;
}

@media only screen and (max-width: 767px) {
    .single-centered-group {
        margin-top: 0;
    }
}

.single-centered-col.shadowed,
.form-fieldset-container {
    box-shadow: 0 0.1em 0.2em rgba(0,0,0,.2);
}

.col,
.col-xs,
.single-centered-col {
    margin-top: 10px;
    margin-bottom: 10px;
}

@media only screen and (max-width: 767px) {
    .col,
    .col-xs,
    .single-centered-col {
        margin-top: 5px;
        margin-bottom: 5px;
    }
}

.col.no-pad,
.col.no-margin,
.col-xs.no-margin {
    margin: 0 0 0 0;
}

/* Responsive specific styles */

.visible-for-mobile {
    display: none;
}

@media only screen and (max-width: 767px) {
    .hidden-for-mobile {
        display: none !important;
    }

    .visible-for-mobile {
        display: block;
    }
}

/* User account menu */
/*---------------------------------------------*/

/*.hoge-logo {
    background-image: url("../images/hoge-logo.png");
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    height: 50px;
}*/

.user-account-menu {
    /*overflow: hidden;*/
    text-align: right;
    margin: 10px 0;
}

        .user-account-menu ul li {
            display: inline-block;
            list-style: none;
            padding: 2px 0 2px 10px;
        }

            .user-account-menu ul li span.user-name {
                font-size: 16px;
                /*text-transform: uppercase;*/
                font-weight: bold;
                color: #39A3D4;
            }

            .user-account-menu ul li a {
                font-size: 14px;
                /*text-transform: uppercase;*/
                text-decoration: none;
                display: inline-block;
                color: #525252;
                line-height: 24px;
                padding: 0 28px 0 0;
                background-repeat: no-repeat;
                background-position: right center;
                background-color: transparent;
            }

                .user-account-menu ul li a:hover {
                    text-decoration: underline;
                }

                .user-account-menu ul li a.change-password {
                    background-image: url("../images/user-account-change-password.png");
                }

                .user-account-menu ul li a.payment-basket {
                    background-image: url("../images/user-account-basket.png");
                }

                .user-account-menu ul li a.payment-basket-items {
                    background-image: url("../images/user-account-basket-w-items.png");
                }

                .user-account-menu ul li a.sign-out {
                    background-image: url("../images/user-account-sign-out.png");
                }

                .user-account-menu ul li a.sign-in {
                    background-image: url("../images/user-account-sign-in.png");
                }

                .user-account-menu ul li a.email-preferences {
                    background-image: url("../images/user-account-email-preferences.png");
                }

/* Responsive layout - make menu list items full width for tablet (landscape) and below */
@media only screen and (max-width: 767px) {
    /*@media only screen and (max-width: 480px) {*/
    .user-account-menu ul {
        overflow: hidden;
    }

        .user-account-menu ul li {
            display: inline-block;
            padding: 2px 0 2px 10px;
        }

            .user-account-menu ul li.basket-breakdown-list-item {
                display: none;
            }

            .user-account-menu ul li a {
                /*padding-right: 0;*/
            }

                .user-account-menu ul li a.change-password,
                .user-account-menu ul li a.payment-basket,
                .user-account-menu ul li a.payment-basket-items,
                .user-account-menu ul li a.sign-out,
                .user-account-menu ul li a.email-preferences {
                    /*background: none;*/
                }
}

@media only screen and (max-width: 480px) {
    .user-account-menu {
        margin: 0;
        padding-top: 5px;
        padding-bottom: 5px;
        /*text-align: center;*/
    }

        
        .user-account-menu ul li {
            float: left;
            width: 50%;
            padding-left: 0;
        }
        

        .user-account-menu ul li a {
            font-size: 13px;
            text-align: left;
            display: block;
        }
}

/* Selected user account menu (not really a menu), with added trading name */
/*---------------------------------------------*/

.selected-user-account-menu {
    /*overflow: hidden;*/
    /*text-align: right;*/
    /*margin-right: 10px;*/
    margin-top: -50px;
}

@media only screen and (max-width: 767px) {
    .selected-user-account-menu {
        margin-top: 0;
    }

        .selected-user-account-menu h2 {
            font-size: 18px;
        }
}

/* Navigation menu */
/*---------------------------------------------*/

.toggle-menu-container {
    display: none;
    background-color: #0070ba;
    border-radius: 5px;
    padding: 5px;
}

.toggle-menu {
    color: #FFF;
    padding: 10px 0;
    /*text-align: center;*/
    /*border: 1px solid #FFF;*/
    /*display: inline-block;*/
}

    .toggle-menu:hover {
        text-decoration: none;
        cursor: pointer;
        color: #FFF;
    }

    .toggle-menu img,
    .toggle-menu span {
        display: inline;
        vertical-align: middle;
    }

    .toggle-menu img {
        margin-right: 5px;
    }

/* Mobile (Landscape), Mobile (Portrait) */
@media only screen and (max-width: 767px) {
    .toggle-menu-container {
        display: block;
    }

    .navigation-menu {
        display: none;
    }

    .basket-breakdown-toggle {
        display: none !important;
    }
}

.page-function-menu .bg-body-tertiary {
    background-color: #0070BA !important;
}

.page-function-menu .nav-link {
    color: #FFFFFF;
}

.page-function-menu .navbar-toggler {
    color: #FFFFFF;
    border-color: #FFFFFF;
    font-size: 16px;
    padding-right: 2px;
}


.navigation-menu ul {
    text-align: center;
    background-color: #0070BA;
    border: 1px solid #0070BA;
    border-radius: 10px;
    opacity: 0.98;
}

    .navigation-menu ul li {
        display: inline-block;
        opacity: 0.97;
        padding: 5px;
        vertical-align: top;
        width: 89px;
    }

        .navigation-menu ul li:hover {
            opacity: 1;
        }

        .navigation-menu ul li i {
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            min-width: 72px;
            height: 72px;
            display: block;
        }

            .navigation-menu ul li i.login {
                background-image: url("../images/nav-icon-login.png");
            }

            .navigation-menu ul li i.calendar {
                background-image: url("../images/nav-icon-calendar.png");
            }

            .navigation-menu ul li i.consent {
                background-image: url("../images/nav-icon-consent.png");
            }

            .navigation-menu ul li i.messages {
                background-image: url("../images/nav-icon-messages.png");
            }

            .navigation-menu ul li i.add-sales-account {
                background-image: url("../images/nav-icon-add-sales-account.png");
            }

            .navigation-menu ul li i.remove-sales-account {
                background-image: url("../images/nav-icon-remove-sales-account.png");
            }

            .navigation-menu ul li i.select-sales-account {
                background-image: url("../images/nav-icon-select-sales-account.png");
            }

            .navigation-menu ul li i.change-sales-account {
                background-image: url("../images/nav-icon-change-sales-account.png");
            }

            .navigation-menu ul li i.sales-account-history {
                background-image: url("../images/nav-icon-sales-account-history.png");
            }

            .navigation-menu ul li i.home {
                background-image: url("../images/nav-icon-home.png");
            }

            .navigation-menu ul li i.make-payment {
                background-image: url("../images/nav-icon-make-payment.png");
            }

            .navigation-menu ul li i.outstanding {
                background-image: url("../images/nav-icon-outstanding.png");
            }

            .navigation-menu ul li i.dinner-selection {
                background-image: url("../images/nav-icon-dinner-selection.png?v=0.1");
            }

            .navigation-menu ul li i.shop {
                background-image: url("../images/nav-icon-shop.png");
            }

            .navigation-menu ul li i.online-user-inquiry {
                background-image: url("../images/nav-icon-online-user-inquiry.png");
            }

            .navigation-menu ul li i.make-a-booking {
                background-image: url("../images/nav-icon-make-a-booking.png");
            }

        .navigation-menu ul li span {
            color: #FFF;
            display: block;
            text-align: center;
        }

        .navigation-menu ul li a:hover {
            text-decoration: none;
        }

/* Responsive layout - make menu list items full width for tablet (landscape) and below */
@media only screen and (max-width: 767px) {
    .navigation-menu ul {
        /*text-align: left;*/
    }

        .navigation-menu ul li {
            /*display: block;*/
            width: 49%;
            padding: 5px 0;
        }

            .navigation-menu ul li i {
                min-width: 32px;
                height: 32px;
                /*display: inline-block;*/
                /*vertical-align: middle;*/
            }

            .navigation-menu ul li span {
                /*display: inline-block;*/
                /*vertical-align: middle;*/
            }
}

@media only screen and (max-width: 767px) {
    .hidden-for-mobile-xs {
        display: none !important;
    }

    .visible-for-mobile-xs,
    .hidden-for-desktop-xs {
        display: block;
    }
}

/* Primary layout elements */
/*---------------------------------------------*/

.primary_background_color {
    background-color: #0070BA;
}

.primary_color {
    color: #0070BA;
}

/*
.secondary_background_color {
    background-color: #E6E6E6;
}

.secondary_color {
    color: #E6E6E6;
}
*/

#container {
    background-image: url('../images/main-background.jpg?v=1.01'); /* do not publish this image or include in project, MAT may have own image file */
    background-position: center center;
    background-size: cover;
}

@media only screen and (max-width: 480px) {
    #container {
        background-image: none;
    }
}

.section-wrapper.header,
.section-wrapper.logged-out-header {
    margin-top: 0;
    min-height: 8vw;
    opacity: 1;
    padding: 0;
    border-bottom: 10px solid #0070BA !important;
}

.section-wrapper.header {
    background-color: #FFFFFF;
}

.section-wrapper.logged-out-header {
    background-color: transparent !important;
    background-image: linear-gradient(90deg, rgba(254,254,255,.6713060224089635) 1%, rgba(255,255,255,1) 30%, rgba(254,254,254,1) 81%, rgba(246,249,250,0) 100%) !important;
}


.section-wrapper.selection-header {
    background-color: #0070BA;
}

.section-wrapper.sub-header {
    background-color: transparent;
    background-size: cover;
}

@media only screen and (max-width: 1600px) {
    .section-wrapper.sub-header {
        /*background-size: 1600px auto;*/
    }
}

.section-wrapper.selection-header h1,
.section-wrapper.selection-header h2,
.section-wrapper.selection-header h3,
.section-wrapper.selection-header h4,
.section-wrapper.selection-header h5,
.section-wrapper.selection-header h6,
.section-wrapper.sub-header h1,
.section-wrapper.sub-header h2,
.section-wrapper.sub-header h3,
.section-wrapper.sub-header h4,
.section-wrapper.sub-header h5,
.section-wrapper.sub-header h6 {
    color: #FFF;
    opacity: 0.97;
}

.section-wrapper.main-content {
    background-color: transparent;
}

    .section-wrapper.main-content .section {
        margin-top: 10px;
        margin-bottom: 10px;
        min-height: 37vw;
        background: #FFFFFF;
        opacity: 0.97;
        padding: 10px 20px;
        border: 2px solid #0070BA;
        border-radius: 10px;
    }

@media only screen and (max-width: 767px) {
    .section-wrapper.main-content .section {
        margin-top: 5px;
        margin-bottom: 5px;
        padding: 5px 10px;
    }
}

.section-wrapper.footer {
    background-color: #FFFFFF;
    border-top: 10px solid #0070BA;
}

    .section-wrapper.footer .section {
        /*text-align: center;*/
        font-size: 13px;
    }

.footer-info .col:last-child {
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .footer-info .col,
    .footer-info .col:last-child {
        text-align: center;
    }
}

.margin-all {
    margin: 10px;
    /*margin: 1%;*/
}

.margin-none {
    margin: 0;
}

.margin-none-t {
    margin-top: 0;
}

.margin-none-b {
    margin-bottom: 0;
}

.margin-none-tb {
    margin-top: 0;
    margin-bottom: 0;
}

.margin-half-t {
    margin: 5px 0 0 0;
    /*margin: 0.5% 0 0 0;*/
}

.margin-t {
    margin: 10px 0 0 0;
    /*margin: 1% 0 0 0;*/
}

.margin-tb {
    margin: 10px 0;
    /*margin: 1% 0;*/
}

.margin-half-tb {
    margin: 5px 0;
    /*margin: 1% 0;*/
}

.margin-t {
    margin: 10px 0 0 0;
    /*margin: 1% 0 0 0;*/
}

.margin-r {
    margin: 0 10px 0 0;
    /*margin: 0 1% 0 0;*/
}

.margin-b {
    margin: 0 0 10px 0;
    /*margin: 0 0 1% 0;*/
}

.margin-half-b {
    margin: 0 0 5px 0;
    /*margin: 0 0 0.5% 0;*/
}

.margin-l {
    margin: 0 0 0 10px;
    /*margin: 0 0 0 1%;*/
}

.margin-tr {
    margin: 10px 10px 0 0;
    /*margin: 1% 1% 0 0;*/
}

.padding-all {
    padding: 10px;
    /*padding: 1%;*/
}

.padding-half-all {
    padding: 5px;
}

.padding-none {
    padding: 0;
}

.padding-tb {
    padding: 10px 0;
}

.padding-half-tb {
    padding: 5px 0;
}

.padding-half-l {
    padding-left: 5px;
}

.padding-t {
    padding: 10px 0 0 0;
}

.padding-r {
    padding: 0 10px 0 0;
}

.padding-tr {
    padding: 10px 10px 0 0;
}

.padding-l {
    padding: 0 0 0 10px;
}

.padding-b {
    padding: 0 0 10px 0;
}

.padding-half-t {
    padding: 5px 0 0 0;
}

.padding-half-b {
    padding: 0 0 5px 0;
}

.padding-lr {
    padding: 0 10px;
}

.padding-lrb {
    padding: 0 10px 10px 10px;
}

.no-border {
    border: 0 none;
}

.border-dashed-b {
    border-bottom: 1px dashed #D3D3D3;
}

.border-solid-b {
    border-bottom: 1px solid #D3D3D3;
}

.border-radius-all {
    border-radius: 4px;
}

.fl,
.float-left {
    float: left;
}

.fr,
.float-right {
    float: right;
}

.clearing {
    clear: both;
}

.clearing-container {
    overflow: hidden;
}

.lh {
    line-height: 24px;
}

.lal,
.tal,
.align-left {
    text-align: left;
}

.cal,
.tac,
.align-center {
    text-align: center;
}

.ral,
.tar,
.align-right,
.align-right-desktop-only {
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .align-right-desktop-only {
        text-align: left;
    }
}

.vat {
    vertical-align: top;
}

.vam {
    vertical-align: middle;
}

.vab {
    vertical-align: bottom;
}

.buttons-lal,
.buttons_lal {
    text-align: left;
    margin: 5px 0;
}

.buttons-ral,
.buttons_ral {
    text-align: right;
    margin: 5px 0;
}

.hidden-column,
.hidden_column {
    display: none;
}

.display-none,
.display_none {
    display: none;
}

.display-none-import,
.display_none_import {
    display: none !important;
}

.display-inline {
    display: inline;
}

.display-inline-block {
    display: inline-block;
}

.display-block {
    display: block;
}

.visibility-hidden {
    visibility: hidden;
}

.info-text,
.error-text,
.success-text,
.display-text {
    padding: 10px;
    overflow: hidden;
    border-radius: 4px;
}

.info-text {
    background-color: #FCFAF2;
    border: 1px solid #FCEFA1;
    color: #3282FF;
}

    .info-text h1,
    .info-text h2,
    .info-text h3 {
        color: #3282FF;
    }

.error-text {
    background-color: #FEF6F3;
    border: 1px solid #CD0A0A;
    color: #CD0A0A;
}

.display-text {
    background-color: #F5F7FA;
    border: 1px solid #6f7072;
}

.success-text {
    background-color: #ddffdd;
    border: 1px solid #9bd89b;
    color: #64B164;
}

    .success-text h1,
    .success-text h2,
    .success-text h3 {
        color: #64B164;
    }

.message-text {
    color: #525252;
}

.info-text-alt {
    color: #856404;
    background-color: #fff3cd;
}

.bordered-box {
    text-align: left;
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    overflow: hidden;
}

.word_break_all {
    word-break: break-all;
}

.white-space-nowrap {
    white-space: nowrap;
}

.form-fieldset-container {
    border: 1px solid #d3d3d3;
    background-color: #FFF;
    overflow: hidden;
    border-radius: 4px;
}

.form-fieldset-legend,
.form-fieldset-legend-grey {
    background-color: #0095CF;
    display: block;
    text-align: center;
    padding: 7px 0;
    margin: 0;
}

.form-fieldset-legend {
    /*background-image: radial-gradient(circle farthest-side at center bottom, #416EB5, #39A3D4 100%);*/
    /*background-image: radial-gradient(circle farthest-side at center center, #416EB5, #39A3D4 100%);*/
    color: #F5F7FA;
}

.form-fieldset-legend-grey {
    /*background-image: radial-gradient(circle farthest-side at center center, #39A3D4, #68CCFA 100%);*/
    color: #6f7072;
}

.password-strength-meter {
    width: 100%;
    border: solid 1px #D3D3D3;
    background-color: #F1F1F1;
    border-radius: 4px;
}

    .password-strength-meter .default,
    .password-strength-meter .very-weak,
    .password-strength-meter .weak,
    .password-strength-meter .medium,
    .password-strength-meter .strong,
    .password-strength-meter .very-strong {
        height: 24px;
        background-color: green;
    }

    .password-strength-meter .default {
        width: 0px;
    }

    .password-strength-meter .very-weak {
        width: 20%;
        background-color: #FF0000;
    }

    .password-strength-meter .weak {
        width: 40%;
        background-color: #FF0000;
    }

    .password-strength-meter .medium {
        width: 60%;
        background-color: #FFFF00;
    }

    .password-strength-meter .strong {
        width: 80%;
        background-color: #008000;
    }

    .password-strength-meter .very-strong {
        width: 100%;
        background-color: #008000;
    }

ul.password-requirements {
    padding-left: 50px;
}

    ul.password-requirements li {
        list-style-type: disc;
    }

.mandatory-astrix {
    /*color: #CD0A0A;*/
    padding-left: 5px;
}

.required-field,
input[type="text"].required-field,
input[type="password"].required-field {
    background-color: #FEF6F3;
    border: 1px solid #CD0A0A;
}

.required-field-resolved,
input[type="text"].required-field-resolved,
input[type="password"].required-field-resolved {
    background-color: #DFF0D8;
    border: 1px solid #D3E3CC;
}

/* Handy gradients */
.grey-pipe-gradient {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
    background: rgb(245,246,246); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.grey-pipe-gradient-sideways {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f6f6+0,dbdce2+21,b8bac6+49,dddfe3+80,f5f6f6+100;Grey+Pipe */
    background: rgb(245,246,246); /* Old browsers */
    background: -moz-linear-gradient(left, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
}

.grey-pipe-gradient img {
    /* Fix for unwanted whitespace after "img" tag */
    vertical-align: middle;
}

.borderless-control-panel {
    overflow: hidden;
    padding: 0 10px;
}

.control-panel {
    border: 1px solid #D3D3D3;
    border-radius: 4px;
    overflow: hidden;
    padding: 0 10px;
    margin: 10px 0;
}

    .borderless-control-panel .small-literal-above,
    .control-panel .small-literal-above {
        display: block;
        width: 100%;
        font-size: 14px;
        font-weight: bold;
        color: #0070BA;
    }

.flat-panel-dialog .ui-dialog-titlebar {
    display: none;
}

.flat-panel-dialog.ui-dialog {
    padding: 0;
}

.flat-panel-dialog.borderless {
    border: none;
    background-color: transparent !important;
}

.flat-panel-dialog .ui-dialog-content {
}

.flat-panel-dialog,
.flat-panel-dialog .ui-dialog-content,
.flat-panel-dialog .ui-widget-content {
    background: none #FFF !important;
}

.borderless .ui-dialog-content,
.borderless .ui-widget-content {
    background: none transparent !important;
}

.basket_icon_with_quantity {
    width: 65px;
    height: 65px;
    overflow: hidden;
    background-image: url("../images/icon-basket-large.png");
    background-position: left bottom;
    background-repeat: no-repeat;
    display: inline-block;
}

    .basket_icon_with_quantity .quantity_text {
        float: right;
        background-color: #0070BA;
        border-radius: 20px;
        color: #ffffff;
        font-size: 15px;
        font-weight: bold;
        padding: 5px 10px;
        text-align: center;
        min-width: 35px;
    }

/* Form elements */
/*---------------------------------------------*/

.literal,
.label {
    font-weight: normal;
}

.literal-above {
    display: block;
    width: 100%;
}

.xx-small-font-size {
    font-size: 10px;
}

.x-small-font-size {
    font-size: 12px;
}

.small-font-size {
    font-size: 14px;
}

.medium-font-size {
    font-size: 16px;
}

.large-font-size {
    font-size: 18px;
}

.x-large-font-size {
    font-size: 20px;
}

.xx-large-font-size {
    font-size: 24px;
}

.paragraph-text {
    display: block;
    margin: 5px 0;
    padding: 0;
    line-height: 22px;
}

.alt-heading {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #0070BA;
}

.form-fieldset {
}

    .form-fieldset .literal,
    .form-fieldset .label,
    .form-fieldset label,
    .form-fieldset span {
        line-height: 28px;
        display: inline-block;
    }

    .form-fieldset .literal,
    .form-fieldset .literal-above,
    .form-fieldset .small-literal-above {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .form-fieldset .literal-above {
        font-size: 15px;
        line-height: 15px;
    }

        .form-fieldset .literal-above .mandatory-astrix {
            font-size: 15px;
            line-height: 15px;
        }

    .form-fieldset .small-literal-above {
        font-size: 13px;
        line-height: 13px;
    }

        .form-fieldset .small-literal-above .mandatory-astrix {
            font-size: 13px;
            line-height: 13px;
        }

    .form-fieldset .reserve-empty-space {
        min-height: 28px;
    }

    .form-fieldset .col,
    .form-fieldset .col-xs,
    .form-fieldset .single-centered-col {
        /*margin-top: 0.5%;*/
        /*margin-bottom: 0.5%;*/
        margin-top: 5px;
        margin-bottom: 5px;
    }

        .form-fieldset .col.no-margin {
            margin-top: 0;
            margin-bottom: 0;
        }

    .form-fieldset ul li {
        line-height: 28px;
    }

/* On mobiles controls will wrap, therefore line height can be reduced. */
@media only screen and (max-width: 767px) {
    .form-fieldset .literal,
    .form-fieldset .label,
    .form-fieldset label,
    .form-fieldset span {
        line-height: 22px;
    }

    .form-fieldset .reserve-empty-space {
        min-height: 22px;
    }

    .form-fieldset ul li {
        line-height: 22px;
    }
}

.xx-small-width {
    width: 50px;
}

.x-small-width {
    width: 100px;
}

.small-width {
    width: 150px;
}

.medium-width {
    width: 200px;
}

.large-width {
    width: 250px;
}

.x-large-width {
    width: 300px;
}

.xx-large-width {
    width: 400px;
}

.full-width {
    width: 100%;
}

.half-width {
    width: 49%;
}

.one-third-width {
    width: 33%;
}

.two-thirds-width {
    width: 66%;
}

.full-width-max {
    max-width: 100%;
}

.Label {
}

.LabelMain {
    font-weight: bold;
}

.LabelError {
    color: #FF0000;
}

.LabelSuccess {
    color: #0000FF;
}

.LabelTitle {
    font-size: 22px;
    font-weight: bold;
}

.LabelMenu {
    font-weight: bold;
    display: block;
}

.LabelBold,
.label_bold,
.bold {
    font-weight: bold;
}

.LabelItalic,
.label_italic,
.italic {
    font-style: italic;
}

.Textbox,
.textbox,
.DropDownList,
.dropdownlist,
/*.CheckBox,*/
input[type="text"],
input[type="password"],
textarea,
select {
    font-family: "calibri", Arial, sans-serif;
    font-size: 15px;
    border: 1px solid #D3D3D3;
    /* MustOverride: color */
    border-radius: 4px;
}

.Textbox,
.textbox,
input[type="text"],
input[type="password"],
textarea {
    padding: 6px;
}

    input[type="text"].invisible,
    input[type="password"].invisible {
        border: none;
        padding: 0;
        font-size: 15px;
    }

.date-field,
.delete-field,
.search-field,
.cross-field {
    background-image: url("../images/icon-sprite.png?v=0.1");
    background-repeat: no-repeat;
    background-position-x: right !important;
}

.date-field,
.delete-field,
.search-field {
    background-position-x: right !important;
}

.cross-field {
    background-position-x: center !important;
}

.date-field {
    background-position: -4px -162px;
    cursor: pointer;
}

    .date-field:hover {
        background-position: -4px -2px;
        background-position-x: right;
    }

.delete-field {
    width: 100%;
    height: 28px;
    background-position: -4px -194px;
    cursor: pointer;
}

    .delete-field:hover {
        background-position: -4px -34px;
        background-position-x: right;
    }

.search-field {
    background-position: -4px -130px;
}

    .search-field:hover {
        background-position: -4px -66px;
        background-position-x: right;
    }

.cross-field {
    width: 100%;
    height: 28px;
    background-position: -4px -226px;
    cursor: pointer;
}

    .cross-field:hover {
        background-position: -4px -98px;
        background-position-x: right;
    }

.DropDownList,
.dropdownlist,
select {
    padding: 3px;
}

.radio-button,
.check-box {
    overflow: hidden;
}

    .radio-button input[type=radio],
    .check-box input[type=checkbox] {
        float: left;
        margin-top: 7px;
    }

    .radio-button label,
    .check-box label {
        display: block;
        margin-left: 25px;
        line-height: 28px;
    }

@media only screen and (max-width: 767px) {
    .radio-button input[type=radio],
    .check-box input[type=checkbox] {
        margin-top: 4px;
    }

    .radio-button label,
    .check-box label {
        line-height: 22px;
    }
}

@media only screen and (max-width: 480px) {
    .radio-button,
    .check-box {
        width: 100%;
    }
}

/* CB + RB lists - needed? */

.check-box-list label {
    padding: 0 10px 0 5px;
    line-height: 28px;
}

@media only screen and (max-width: 480px) {
    .check-box-list {
        overflow: hidden;
    }

        .check-box-list input,
        .check-box-list label {
            float: left;
        }

        .check-box-list input {
            clear: left;
        }
}

/* Fancy style checkbox */
.boxed-checkbox input[type="checkbox"] {
    display: none;
}

    .boxed-checkbox input[type="checkbox"] + label {
    }

        .boxed-checkbox input[type="checkbox"] + label span {
            display: inline-block;
            width: 28px;
            height: 28px;
            /*margin: 0 5px 0 0;*/
            vertical-align: middle;
            background: url("../images/boxed-checkbox.png") center center no-repeat;
            cursor: pointer;
        }

    .boxed-checkbox input[type="checkbox"]:checked + label span {
        background: url("../images/boxed-checkbox-selected.png") center center no-repeat;
    }

.checkbox-zoom input[type="checkbox"] {
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari and Chrome */
    -o-transform: scale(1.5); /* Opera */
}

/* Legacy buttons */
.Button,
.button-state-default,
input[type="button"],
input[type="submit"],
.ui-dialog .ui-dialog-buttonpane button {
    cursor: pointer;
    padding: 8px 0;
    border-radius: 4px;
    border: none;
    font-size: 15px;
    color: #FFF;
    line-height: 20px;
    background-color: #0070BA;
}

.ui-dialog .ui-dialog-buttonpane button {
    padding-left: 20px;
    padding-right: 20px;
}

    .Button:hover,
    .button-state-hover,
    input[type="button"]:hover,
    input[type="submit"]:hover,
    .ui-dialog .ui-dialog-buttonpane button:hover {
        background-color: #005ea6;
    }

.Button:disabled,
.button-state-default:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled {
    cursor: default;
}

/* RWD buttons with support for an icon */
.button-primary,
.button-secondary,
.button-positive,
.button-negative {
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 8px 0;
    text-decoration: none;
    border-radius: 4px;
    text-align: center;
}

.button-primary {
    background-color: #0070BA;
}

    .button-primary:hover {
        text-decoration: none;
        background-color: #005ea6;
    }

.button-secondary {
    background-color: #0070BA;
}

    .button-secondary:hover {
        text-decoration: none;
        background-color: #005ea6;
    }

.button-positive,
input[type="submit"].button-positive {
    background-color: #28a745;
}

    .button-positive:hover,
    input[type="submit"].button-positive:hover {
        text-decoration: none;
        background-color: #218838;
    }

.button-negative,
input[type="submit"].button-negative {
    background-color: #dc3545;
}

    .button-negative:hover,
    input[type="submit"].button-negative:hover {
        text-decoration: none;
        background-color: #c82333;
    }

    .button-primary span,
    .button-secondary span,
    .button-positive span,
    .button-negative span {
        color: #FFF;
        font-size: 15px;
        vertical-align: middle;
        white-space: nowrap;
    }

/* Responsive layout - make buttons full width for mobile (portrait) */
@media only screen and (max-width: 480px) {
    .Button,
    .button-state-default,
    input[type="button"],
    input[type="submit"],
    .button-primary,
    .button-secondary {
        width: 100%;
        margin: 2px 0;
    }
}

.icon-login,
.icon-add,
.icon-select,
.icon-search,
.icon-email {
    display: inline-block;
    width: 28px;
    height: 28px;
    vertical-align: middle;
    margin: -4px 0;
    background-size: contain;
}

.icon-login {
    background-image: url("../images/icon-login.png");
}

.icon-add {
    background-image: url("../images/icon-add.png");
}

.icon-select {
    background-image: url("../images/icon-select.png");
}

.icon-search {
    background-image: url("../images/icon-search.png");
}

.icon-email {
    background-image: url("../images/icon-email.png");
}

.search-button,
.cancel-button {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #046EB5 !important;
    vertical-align: middle;
    background-size: contain;
}

.icon-search-button,
.icon-cancel-button {
    display: inline-block;
    width: 48px !important;
    /*height: 28px !important;*/
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #046EB5 !important;
    vertical-align: middle;
    background-size: contain;
    background-repeat: no-repeat;
}

.search-button, .icon-search-button {
    background-image: url("../images/search-button.png");
}

.cancel-button, .icon-cancel-button {
    background-image: url("../images/cancel-button.png");
}

.search-box {
    width: 70%;
}

.glyphicon-label {
    display: block; /* Should get inherited if inside a pragraph tag anyway */
    padding-left: 28px;
    background-repeat: no-repeat;
    background-position: left top 2px;
    background-color: transparent;
    padding-top: 2px;
    padding-bottom: 2px;
}

    .glyphicon-label.warning-message {
        background-image: url("../images/glyphicon-warning-message.png");
    }

    .glyphicon-label.circle-info {
        background-image: url("../images/glyphicon-circle-info.png");
    }

    .glyphicon-label.circle-success {
        background-image: url("../images/glyphicon-circle-success.png");
    }

.glyphicon-input,
input[type="text"].glyphicon-input,
input[type="password"].glyphicon-input {
    padding-left: 30px;
    background-repeat: no-repeat;
    background-position: left 6px center;
    background-color: transparent;
}

    .glyphicon-input.login-email-address {
        background-image: url("../images/glyphicon-login-email-address.png");
    }

    .glyphicon-input.login-password {
        background-image: url("../images/glyphicon-login-password.png");
    }

/* Tables */
/*---------------------------------------------*/

.responsive-table {
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    margin: 10px 0;
    padding: 10px;
}

    .responsive-table .desktop-header {
        display: block;
        font-weight: bold;
        border-bottom: 1px solid #D9D9D9;
        padding: 0 10px;
        /*
        background-image: -webkit-linear-gradient(top, #416EB5, #39A3D4);
        background-image: -moz-linear-gradient(top, #416EB5, #39A3D4);
        background-image: -ms-linear-gradient(top, #416EB5, #39A3D4);
        background-image: -o-linear-gradient(top, #416EB5, #39A3D4);
        background-image: linear-gradient(to bottom, #416EB5, #39A3D4);
        */
    }

    .responsive-table .mobile-header {
        display: none;
    }

    .responsive-table .mobile-header-merchandise-item {
        display: none;
    }

    .responsive-table .row-item {
        padding: 0 10px;
        cursor: pointer;
    }

        .responsive-table .row-item:hover,
        .responsive-table .row-item.selected {
            border-left: 5px solid #003087;
            padding-left: 5px;
        }

        .responsive-table .row-item.alt,
        .floating-row-item.alt {
            background-color: #F4F5F9;
        }

.floating-row-item:not(:hover) {
    border-right-color: transparent !important;
}

.responsive-table .row-item-expanded {
    display: none;
    padding: 10px;
    border: 1px solid #C9CED2;
    border-left: 5px solid #009cde;
}

.responsive-table .footer-item {
    font-weight: bold;
    padding: 0 10px;
}

@media only screen and (max-width: 767px) {
    .responsive-table {
        border: none;
        padding: 0;
    }

        .responsive-table .desktop-header {
            display: none;
        }

        .responsive-table .mobile-header {
            display: block;
            float: left;
            width: 140px;
            text-align: right;
            padding-right: 10px;
            font-weight: bold;
        }

        .responsive-table .mobile-header-merchandise-item {
            display: block;
            float: left;
            width: 65px;
            text-align: left;
            padding-right: 10px;
            font-weight: bold;
        }

        .responsive-table .row-item {
            border: 1px solid #D3D3D3;
            border-radius: 4px;
            margin: 10px 0 0 0;
        }

            .responsive-table .row-item:hover,
            .responsive-table .row-item.selected {
                padding-left: 6px;
            }

            .responsive-table .row-item.selected {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

        .responsive-table .row-item-expanded {
            border-top: none;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }

        .responsive-table .cell-item {
            overflow: hidden;
        }
}

.standard-grid {
    /*font-size: 14px;*/
    /* MustOverride: color */
    border-collapse: collapse;
    border: 1px solid #D9D9D9;
    width: 100%;
    /*margin: 10px 0;*/
}

    .standard-grid th,
    .standard-grid td {
        padding: 5px;
        text-align: left;
        vertical-align: top;
    }

    .standard-grid th {
        border: none;
        font-weight: bold;
        /* MustOverride: background-color, color */
    }

        .standard-grid th a {
        }

    .standard-grid td {
        border: none;
        /* MustOverride: background-color, color */
    }

        .standard-grid td a {
        }

    .standard-grid .alt td {
        background-color: #F4F5F9;
    }

    .standard-grid .unselected td {
        /* MustOverride: background-color, color */
        cursor: default;
    }

    .standard-grid .selected td {
        /* MustOverride: background-color, color */
        cursor: default;
    }

    .standard-grid th.ral,
    .standard-grid th.align-right,
    .standard-grid td.ral,
    .standard-grid td.align-right {
        text-align: right;
    }

    .standard-grid th.vam,
    .standard-grid th.valign-middle,
    .standard-grid td.vam,
    .standard-grid td.valign-middle {
        vertical-align: middle;
    }

.standard-grid_container {
    padding: 0;
    margin: 10px 0;
    border: solid 1px #CCC;
    overflow: scroll;
    overflow-x: hidden;
    background-color: #FFF;
}

@media only screen and (max-width: 767px) {
    .standard-grid.responsive {
        border: none;
    }

        .standard-grid.responsive thead,
        .standard-grid.responsive tr.legacy_datagrid_header {
            display: none;
        }

        .standard-grid.responsive tr {
            margin-bottom: 1%;
            display: block;
            border: 1px solid #D9D9D9;
            border-radius: 4px;
        }

            .standard-grid.responsive tr:last-child {
                margin-bottom: 0;
            }

        .standard-grid.responsive td {
            position: relative;
            display: block;
            padding-left: 35%;
            min-height: 29px;
        }

            .standard-grid.responsive td:last-child {
                /*border-bottom: 0;*/
            }

            .standard-grid.responsive td:before {
                content: attr(data-header-text);
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 33%;
                padding: 5px 0;
                text-indent: 10px;
                /* MustOverride: background-color, color */
            }

            .standard-grid.responsive td.ral,
            .standard-grid.responsive td.cal {
                text-align: left;
            }
}

/* Could be useful, so retained from StageITWeb - jquery dialog styled as a basic popup panel */
/*---------------------------------------------*/

.basic-popup-panel .ui-dialog-titlebar {
    display: none;
}

.basic-popup-panel.ui-dialog {
    padding: 0;
}

.basic-popup-panel .ui-dialog-content {
    color: #FFF;
}

.basic-popup-panel,
.basic-popup-panel .ui-dialog-content,
.basic-popup-panel .ui-widget-content {
    background: none #416EB5 !important;
    border: none !important;
}

    .basic-popup-panel h1 {
        color: #FFF;
    }

    .basic-popup-panel a {
        color: #FFF;
        font-size: 18px;
    }

/* Styles to make the file upload control look half decent */
/*---------------------------------------------*/

div.file_inputs {
    position: relative;
    /*width: 77px;*/
    height: 39px;
    overflow: hidden;
}

.fake_file {
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 1;
    width: 100%;
    height: 39px;
}

.real_file {
    position: absolute;
    top: 0px;
    right: 0px;
    -moz-opacity: 0;
    filter: alpha(opacity: 0);
    opacity: 0;
    z-index: 2;
    width: 100%;
    height: 39px;
}

/* JQuery UI Overrides */
/*---------------------------------------------*/

/* To fix IE8 issue where the overlay is larger than the screen therefore forcing scrollbars to display */
.ui-widget-overlay {
    position: fixed;
    background: #0070BA;
    opacity: .7;
    filter: Alpha(Opacity=70); /* support: IE8 */
}

/* Fixes for the social networking plugins */

.fb_iframe_widget {
    vertical-align: top;
}

.ui-datepicker {
    display: none;
}

.ui-widget-content a {
    /* MustOverride: color */
}

.ui-widget {
    font-family: "calibri", Arial, sans-serif;
}

    .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
        font-family: "calibri", Arial, sans-serif;
    }

.ui-widget-content {
    color: #6f7072;
}

.ui-widget-header {
}

/* Basket on-hover breakdown */
/*---------------------------------------------*/
.basket-breakdown {
    position: fixed;
    z-index: 101;
    top: 90px;
    display: none;
}

.basket-breakdown-container {
    display: inline;
    opacity: 0.97;
}

.basket-breakdown-border {
    background-color: #ffffff;
    border: 1px solid #6f7072;
    border-radius: 4px;
    padding: 5px;
    width: 200px;
}

.basket-breakdown-total {
    padding-top: 5px;
    font-weight: bold;
    border-top: 1px solid #D9D9D9;
}

.basket-breakdown-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #6f7072;
    margin-left: 20%;
}

/* Account Message Specific */
/*---------------------------------------------*/
.file-download-anchor:hover {
    text-decoration: none;
}

.indicator_button:hover {
    text-decoration: none;
}

.indicator {
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
}

    .indicator.flag {
        background-image: url('../images/bookmarks.png');
        background-position: -2px -2px;
    }

        .indicator.flag:hover {
            background-position: -2px -38px;
        }

    .indicator.flagged {
        background-image: url('../images/bookmarks.png');
        background-position: -2px -74px;
    }

    .indicator.important {
        background-image: url('../images/indicator-important.png');
    }

    .indicator.email {
        background-image: url('../images/indicator-email.png');
    }

    .indicator.sms {
        background-image: url('../images/indicator-sms.png');
    }


.file-icon-text {
    line-height: 45px;
}

    .file-icon-text:hover {
        text-decoration: underline;
    }

.file-icon {
    display: inline-block;
    background-image: url('../images/icon-file-type-sprite.png');
    background-repeat: no-repeat;
    background-position: -403px 0px;
    height: 45px;
    width: 45px;
}

    /* PDF file types */
    .file-icon.PDF {
        background-position: 0px 0px;
    }

    /* Word file types */
    .file-icon.DOC,
    .file-icon.DOCX,
    .file-icon.DOCM,
    .file-icon.WPS {
        background-position: -69px 0px;
    }

    /* Excel file types */
    .file-icon.CSV,
    .file-icon.XLS,
    .file-icon.XLSX,
    .file-icon.XLSM,
    .file-icon.ODS {
        background-position: -137px 0px;
    }

    /* ZIP file types */
    .file-icon.ZIP {
        background-position: -271px 0px;
    }

    /* Image file types */
    .file-icon.JPG,
    .file-icon.JPEG,
    .file-icon.GIF,
    .file-icon.PNG,
    .file-icon.TIF,
    .file-icon.TIFF,
    .file-icon.BMP {
        background-position: -205px 0px;
    }

/* Nov 2020, New footer added by Matt */
/*---------------------------------------------*/

.page-header-logo {
    max-height: 100%;
    width: 60%;
    text-align: center;
    object-fit: contain;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.page-header-text {
    text-align: center;
    padding: 7px 0;
    margin: 0;
    color: #423f35;
    font: 1rem/1.2rem Arial,Helvetica,sans-serif;
    font-weight: bolder;
}

.logo-carousel {
    color: #423f35;
    background-color: #ffffff;
    width: 100%;
    text-align: center;
}

.logo-container {
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 1vw;
}

.page-footer-logo {
    display: inline-block;
    margin-left: 1vw;
    margin-right: auto;
    width: 5vw;
    object-fit: contain;
}

/* Credit card sprite */
/*---------------------------------------------*/

.card-sprite {
    background-image: url("../images/card-sprite.png?v=1.01");
    background-repeat: no-repeat;
    display: inline-block;
}

.amex-lg, .dinersclub-lg, .discover-lg, .jcb-lg, .mastercard-lg, .visa-lg, .maestro-lg {
    width: 128px;
    height: 84px;
}

.amex-md, .dinersclub-md, .discover-md, .jcb-md, .mastercard-md, .visa-md, .maestro-md {
    width: 64px;
    height: 42px;
}

.amex-xs, .dinersclub-xs, .discover-xs, .jcb-xs, .mastercard-xs, .visa-xs, .maestro-xs {
    width: 32px;
    height: 21px;
}

.amex-lg {
    background-position: 0 0;
}

.amex-md {
    background-position: -129px 0;
}

.amex-xs {
    background-position: -130px -44px;
}

.dinersclub-lg {
    background-position: -195px 0;
}

.dinersclub-md {
    background-position: -325px 0;
}

.dinersclub-xs {
    background-position: -325px -43px;
}

.discover-lg {
    background-position: 0 -87px;
}

.discover-md {
    background-position: -130px -87px;
}

.discover-xs {
    background-position: -130px -132px;
}

.jcb-lg {
    background-position: -196px -89px;
}

.jcb-md {
    background-position: -325px -90px;
}

.jcb-xs {
    background-position: -326px -134px;
}

.mastercard-lg {
    background-position: 0 -176px;
}

.mastercard-md {
    background-position: -130px -177px;
}

.mastercard-xs {
    background-position: -131px -221px;
}

.visa-lg {
    background-position: -196px -177px;
}

.visa-md {
    background-position: -326px -179px;
}

.visa-xs {
    background-position: -327px -223px;
}

/* Manually added Maestro onto sprite */

.maestro-lg {
    background-position: -391px 0;
}

.maestro-md {
    background-position: -521px 0;
}

.maestro-xs {
    background-position: -522px -45px;
}

/* Misc */
/*---------------------------------------------*/