/* Minification failed. Returning unminified contents.
(11824,35): run-time error CSS1034: Expected closing parenthesis, found ','
(11824,35): run-time error CSS1042: Expected function, found ','
(11824,40): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
@charset "UTF-8";

/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('fonts/open-sans-v28-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/open-sans-v28-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/open-sans-v28-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/open-sans-v28-latin-300.woff') format('woff'), /* Modern Browsers */
    url('fonts/open-sans-v28-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/open-sans-v28-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/open-sans-v28-latin-400.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/open-sans-v28-latin-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/open-sans-v28-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/open-sans-v28-latin-400.woff') format('woff'), /* Modern Browsers */
    url('fonts/open-sans-v28-latin-400.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/open-sans-v28-latin-400.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-500 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/open-sans-v28-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/open-sans-v28-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/open-sans-v28-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/open-sans-v28-latin-500.woff') format('woff'), /* Modern Browsers */
    url('fonts/open-sans-v28-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/open-sans-v28-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('fonts/open-sans-v28-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/open-sans-v28-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/open-sans-v28-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/open-sans-v28-latin-600.woff') format('woff'), /* Modern Browsers */
    url('fonts/open-sans-v28-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/open-sans-v28-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/open-sans-v28-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/open-sans-v28-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/open-sans-v28-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/open-sans-v28-latin-700.woff') format('woff'), /* Modern Browsers */
    url('fonts/open-sans-v28-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/open-sans-v28-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* open-sans-800 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('fonts/open-sans-v28-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/open-sans-v28-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/open-sans-v28-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/open-sans-v28-latin-800.woff') format('woff'), /* Modern Browsers */
    url('fonts/open-sans-v28-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/open-sans-v28-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* poppins-regular - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/poppins-v19-latin-400.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/poppins-v19-latin-400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/poppins-v19-latin-400.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/poppins-v19-latin-400.woff') format('woff'), /* Modern Browsers */
    url('fonts/poppins-v19-latin-400.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/poppins-v19-latin-400.svg#Poppins') format('svg'); /* Legacy iOS */
}
/* poppins-700 - latin */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/poppins-v19-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''), url('fonts/poppins-v19-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('fonts/poppins-v19-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
    url('fonts/poppins-v19-latin-700.woff') format('woff'), /* Modern Browsers */
    url('fonts/poppins-v19-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
    url('fonts/poppins-v19-latin-700.svg#Poppins') format('svg'); /* Legacy iOS */
}

@font-face {
    font-family: "mmfont";
    src: url("fonts/mm-icons.woff") format('woff');
}

@font-face {
    font-family: 'materialicons';
    font-style: normal;
    font-weight: 400;
    src: url("fonts/material-icons.woff2") format('woff2');
}

.material-icons {
    font-family: 'materialicons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
}

::-webkit-input-placeholder {
    font-family: Open Sans, sans-serif;
}

:-moz-placeholder {
    font-family: Open Sans, sans-serif;
}

::-moz-placeholder {
    font-family: Open Sans, sans-serif;
}

:-ms-input-placeholder {
    font-family: Open Sans, sans-serif;
}

html {
    font-size: 12px;
}

body, h1, h2, h3, h4, h5, h6, p, li, ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    font-family: Open Sans, sans-serif;
    font-size: 12px;
    background: #fff;
    -webkit-font-smoothing: antialiased;
}

/* TODO Use this instead of specific settings for each page
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}
*/


html {
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
}

    html.disable-fix {
        overflow-x: initial;
        margin-right: initial;
    }

.disableBackgroundScrolling {
    overflow: hidden
}

img {
    border: none;
}

a {
    color: #ee3124;
}

    a:hover {
        color: #C00;
        text-decoration: none;
    }

    button:focus, a:focus {
        outline: none;
    }

button, input, select {
    font-family: Open Sans, sans-serif;
}

.clearing {
    clear: both;
}

/* BUTTONS */

/* MEGA BUTTON*/
a.megaButton {
    display: inline-block;
    vertical-align: middle;
    height: 38px;
    line-height: 38px;
    padding: 0 5px 0 8px;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    text-transform: uppercase;
    background: #ee3124;
    border: solid 2px #ee3124;
    color: #FFF;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

    a.megaButton span {
        text-decoration: none;
        cursor: pointer;
    }

    a.megaButton:hover {
        color: #ee3124;
        background: #fff;
    }

        a.megaButton:hover span {
            color: #ee3124;
        }

    a.megaButton.buyDisabled, a.megaButton.buyDisabled:hover {
        background: #ddd;
        border-color: #ddd;
        color: #fff;
        cursor: default;
    }

        a.megaButton.buyDisabled:hover span, a.megaButton.buyDisabled:hover span {
            color: #fff;
            cursor: default;
        }

/* mega empty */

a.megaButtonEmpty {
    display: inline-block;
    vertical-align: middle;
    height: 38px;
    line-height: 38px;
    padding: 0 8px;
    text-decoration: none;
    text-align: center;
    font-size: 18px;
    background: transparent;
    color: #ee3124;
    border: solid 2px #ee3124;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

    a.megaButtonEmpty:hover {
        background: #ee3124;
        color: #fff;
    }

/* BIG BUTTON*/
a.bigButton {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    height: 33px;
    line-height: 33px;
    padding: 0 8px 0 5px;
    text-decoration: none;
    text-transform: uppercase;
    background: #ee3124;
    border: solid 2px #ee3124;
    color: #FFF;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

    a.bigButton span {
        height: 33px;
        line-height: 33px;
        text-decoration: none;
        cursor: pointer;
    }

    a.bigButton:hover {
        color: #ee3124;
        background: #fff;
    }

        a.bigButton:hover span {
            color: #ee3124;
        }

    a.bigButton.disabled {
        background: #ddd;
        background-position: 0 0;
        border: solid 2px #ddd;
        color: #616161;
        cursor: default;
        pointer-events: none;
    }

        a.bigButton.disabled span {
            cursor: default;
        }

        a.bigButton.disabled:hover {
            color: #ddd;
        }

            a.bigButton.disabled:hover span {
                color: #616161;
                line-height: 38px;
            }



.removeLnk_medbutton {
    color: #2381ee;
    cursor: pointer;
    text-decoration: none;
    font-weight: normal;
}


/* MED BUTTON*/
a.medButton {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    padding: 0 8px;
    text-decoration: none;
    background: #ee3124;
    border: solid 2px #ee3124;
    color: #FFF;
    text-transform: uppercase;
    text-shadow: none;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

    a.medButton.green {
        background-color: #57B64B;
        border-color: #57B64B;
    }

    a.medButton span {
        display: block;
        height: 30px;
        line-height: 30px;
        text-decoration: none;
        cursor: pointer;
    }

    a.medButton:hover {
        color: #ee3124;
        background: #fff;
    }

        a.medButton:hover span {
            color: #ee3124;
        }

    a.medButton.darkMed {
        display: inline-block;
        overflow: hidden;
        padding: 0 10px;
        height: 29px;
        line-height: 29px;
        border: #22211f solid 1px;
        background: #4f4f4f;
    }

        a.medButton.darkMed:hover {
            box-shadow: inset #888 0 1px 0;
            line-height: 27px;
            background: #2e2a24;
        }

    /*medbutton Buy disabled */

    a.medButton.buyDisabled {
        background-position: 0 0;
        color: #616161;
        background: #ddd;
        cursor: default;
    }

        a.medButton.buyDisabled span {
            cursor: default;
        }

        a.medButton.buyDisabled:hover {
            line-height: 38px;
            color: #ddd;
        }

            a.medButton.buyDisabled:hover span {
                line-height: 38px;
                color: #616161;
            }

button::-moz-focus-inner {
    padding: 0;
    border: 0
}

.newLogonButton {
    background: #ee3124;
    border: solid 1px #ee3124;
    color: #FFF;
    cursor: pointer;
    display: block;
    height: 45%;
    line-height: 33px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    vertical-align: middle;
    font-family: 'poppins';
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    border-radius: 20px;
    margin: 0 auto;
    margin-top: 20px;
}

.createButton {
    background: #fff;
    border: solid 1px #636668;
    color: #636668;
    cursor: pointer;
    display: block;
    height: 45%;
    line-height: 33px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    vertical-align: middle;
    margin-top: 5px;
    font-family: 'poppins';
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    border-radius: 20px;
    margin: 0 auto;
    margin-top: 16px;
}

.newLogonButton:hover {
    color: #ee3124;
    background: #fff;
}

.createButton:hover {
    color: #fff;
    background: #636668;
}

.newLogonButton:disabled {
    border: unset;
    background: #dddddd;
}

.createButton:disabled {
    border: unset;
    background: #dddddd;
}

/* ERROR MESSAGES */

div .errorMessage, .field-validation-error, .field-validation-checkout {
    display: block;
    margin-top: 5px;
    padding: 2px 6px;
    line-height: 18px;
    vertical-align: middle;
    color: #ee3124;
    background: none;
    word-wrap: break-word;
}


    div .errorMessage:before, .field-validation-error:before, .field-validation-checkout:before {
        /* content: '';*/
        display: inline-block;
        height: 5px;
        line-height: 5px;
        margin: 3px 6px 0 0;
        padding: 3px;
        text-decoration: none;
        background: #ee3124;
        border: solid 2px #ee3124;
        color: #FFF;
        text-transform: uppercase;
        text-shadow: none;
        font-size: 15px;
        font-family: arial;
    }

    div .errorMessage span {
        display: inline-block;
        padding: 5px 0 5px 30px;
        background: url(Images/error-message-icon.png) no-repeat 0 center;
    }

div .errorSummary {
    margin: 20px 40px;
}

.thirded .field-validation-error {
    display: inline-block;
    margin-bottom: 4px;
    margin-top: 0;
}

.field-validation-checkout {
    display: none;
    margin-top: -14px;
    margin-bottom: 10px;
    background: none;
}

.fixedText {
    display: block;
    background-color: #fcf8e3;
    padding: 3px 10px;
    margin-top: -6px;
    margin-bottom: 9px;
    border: solid 1px #ffec8b;
    border-radius: 5px;
    width: 291px;
}
/* WARNING MESSAGE*/
div .warningMessage {
    display: block;
    margin-top: 5px;
    padding: 2px 6px;
    line-height: 18px;
    vertical-align: middle;
    color: #000;
    font-weight: bold;
    background: none;
}

    div .warningMessage span {
        display: inline-block;
        padding: 5px 0 5px 30px;
    }

.topPanel {
    background: #FFFFFF;
    height: auto;
    top: 0;
    left: 0;
    z-index: 210;
    position: sticky !important;
    max-width: 100%;
}

/* NAV BAR */

#navLogoImg {
    margin-top: 30px;
}

.navBarMessage {
    display: none;
    position: fixed;
    left: 50%;
    top: 140px;
    width: 216px;
    margin-left: -108px;
    padding: 10px;
    background: #fff;
    border: #c3c3c3 solid 1px;
    color: #000;
    text-shadow: none;
    z-index: 210;
}

    .navBarMessage p {
        display: block;
        margin-top: 5px;
        padding: 2px 6px;
        line-height: 18px;
        border: #ee3124 solid 1px;
        vertical-align: middle;
        color: #ee3124;
        font-weight: bold;
        background: none;
    }

    .navBarMessage span {
        display: inline-block;
        padding: 5px 0 5px 30px;
        background: url(Images/error-message-icon.png) no-repeat 0 center;
    }

.shortLangBtn {
    display: none;
    padding: 0 10px;
}

a.navLogin {
    background-position: -308px -188px;
}

a.nav-drop__li {
    text-decoration: none;
    background: #fff;
    color: #323233;
    font-weight: bold;
}

a.navAccount {
    background-position: -309px -157px;
}

a.navRegister {
    background-position: -306px -159px
}

a.navOrders {
    background: url(Images/check-square-o.png) no-repeat;
    background-size: 25%;
    background-position-y: center;
}

.ordersIcon {
    background: url(Images/check-square-o.png) no-repeat !important;
    background-size: contain !important;
    background-position-y: center !important;
}

a.navLogout {
    background-position: -307px -93px;
}

.mainDrop {
    display: block;
    margin: 1px 0 5px 0;
    padding: 0 0 0 30px;
    height: 38px;
    line-height: 42px;
    background: url(Images/info-circle.png) no-repeat;
    background-size: 40%;
    background-position-y: center;
}

.accountDrop {
    display: block;
    margin: 1px 0 5px 0;
    padding: 0 0 0 30px;
    height: 38px;
    line-height: 42px;
    background: url(Images/user.png) no-repeat;
    background-size: 30%;
    background-position-y: center;
}

.searchDrop, .gsFlyerDrop, .storeDrop, .cartDrop, .accDrop, .languageDrop, .customerServiceDrop {
    display: block;
    margin-top: 1px;
    padding: 0 0 0 45px;
    height: 38px;
    line-height: 42px;
    background-size: 100%;
    background-position-y: center;
}

.gsFlyerDrop {
    background: url(Images/NavBar/gsflyer.svg) no-repeat;
}

.searchDrop {
    background: url(Images/NavBar/searchIcon.svg) no-repeat;
}

.storeDrop {
    background: url(Images/NavBar/storeLocator.svg) no-repeat;
}

.cartDrop {
    background: url(Images/NavBar/cart.svg) no-repeat;
}

.accDrop {
    background: url(Images/NavBar/account.svg) no-repeat;
}

.accDropLoggedIn {
    display: block;
    margin-top: 6px;
    margin-bottom: 3px;
    height: 30px;
    line-height: 42px;
    background-size: 75%;
    background-position-y: center;
    border-radius: 50%;
    max-width: 50%;
}

.languageDrop {
    background: url(Images/NavBar/language.svg) no-repeat;
}

.customerServiceDrop {
    background: url(Images/NavBar/customerService.svg) no-repeat;
}

.navbar-row {
    display: flex;
    padding: 10px 0 10px 0;
    justify-content: flex-start;
    position: relative;
    width: 66%;
    margin-left: auto;
    margin-right: auto;
}

.navbar-panel {
    box-shadow: 0 2px 4px #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.nav-right {
    display: flex;
    justify-content: flex-end;
}

    .nav-right span {
        margin-right: 6px;
    }

.nav-left {
    display: flex;
    justify-content: flex-start;
}

.nav__search, .nav__gsflyer, .nav__store, .nav__cart, .nav__account, .nav__language, .nav__customerService {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    min-width: 75px;
    overflow: hidden;
    white-space: nowrap;
}

a.nav__search, a.nav__gsflyer, a.nav__store, a.nav__cart, a.nav__account, a.nav__customerService, a.nav__language, a#languageChangeNewLink {
    color: #323233;
    cursor: pointer;
    text-decoration: none;
    font-weight: bold;
    font-size: 10px !important;
}

.nav__store {
    max-width: 105.6px;
}

.nav__customerService {
    max-width: 119.6px;
}

.nav__gsflyer {
    max-width: 103.03px;
}

.nav__language {
    max-width: 89.73px;
}

.hamburgerMenu {
    display: inline-block;
    height: 40px;
    width: 35px;
    background: url(Images/NavBar/Menu.svg) no-repeat;
    overflow: hidden;
    margin-right: 20px;
}

.menuIcon-container {
    display: none;
}

.hamburgerLogo {
    background: url(Images/NavBar/logo.svg) no-repeat;
    background-size: 196px auto;
    display: block;
    margin: -6px 30px 0 0;
    width: 196px;
}

@media (max-width: 568px) {
    .nav__gsflyer {
        display: none;
    }

    .nav__store {
        display: none;
    }

    .nav__customerservice {
        display: none;
    }
}

.navDrop {
    float: right;
    position: relative;
    padding-right: 15px;
    line-height: 44px;
    margin-right: 15px;
}

.nav-drop {
    float: right;
    position: relative;
}

.navDrop ul, .mapContainer .ui-autocomplete {
    display: none;
    position: absolute;
    right: 0;
    top: 44px;
    background: #323233;
    z-index: -1;
}

.nav-drop ul {
    display: none;
    position: absolute;
    right: -20px;
    top: 66px;
    background: #fff;
    z-index: 2;
}


.mapContainer .ui-autocomplete {
    z-index: 0
}

    .mapContainer .ui-autocomplete .ui-state-focus {
        color: #ee3124;
    }

    .navDrop ul li, .mapContainer .ui-autocomplete li {
        border-top: #FFF solid 1px;
    }

.nav-drop ul li {
    box-shadow: 0 2px 4px #000000;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.navDrop ul a, .mapContainer .ui-autocomplete a {
    display: block;
    line-height: normal;
    padding: 5px;
    width: 130px;
    text-shadow: none;
}

.nav-drop ul a, .mapContainer .ui-autocomplete a {
    display: block;
    line-height: normal;
    padding: 5px;
    width: auto;
    text-shadow: none;
    white-space: nowrap;
}

    .navDrop ul a:hover, .mapContainer .ui-autocomplete a:hover {
        color: #ee3124
    }

.mapContainer .ui-autocomplete li .ui-state-hover {
    width: auto;
    background: #ee3124;
    color: #FFF;
}

.navDropul ul li:first-child {
    border-top: none;
}

#hideTotal {
    display: none;
}

/* Quicksearch */

.quickSearch {
    float: right;
    width: 353px;
}

.quickSearchMarginOldNavBar {
    margin: 12px 0 0 0;
    width: 50%;
}

.quickSearchMargin {
    margin: 5px 0 0 0;
    flex-grow: 1;
    margin-right: 20px;
}


.quickInputContainer {
    position: relative;
    height: 46px;
    font-size: 18px;
    background: #fff;
    border: solid 1px #eaeaea;
    display: flex;
    flex-direction: row-reverse;
}


.quickSearchInput {
    float: left;
    position: relative;
    width: 100%;
    height: 34px;
    line-height: 34px;
    padding: 0 0 0 8px;
    margin: 6px;
    border: none;
    color: #444;
    font-size: 18px;
    z-index: 10;
    background: url(Images/qs-separator.png) no-repeat -10px -10px;
}

    .quickSearchInput:focus {
        outline: none
    }
    /* SASS SHOULD BE USED TO REMOVE DUPLICATES BELOW (MIXIN)*/
    .quickSearchInput::placeholder {
        color: #b3adad;
        height: 34px;
        line-height: 34px;
        font-size: 18px;
    }

    .quickSearchInput::-webkit-input-placeholder {
        color: #b3adad;
        height: 34px;
        line-height: 34px;
        font-size: 18px;
    }

    .quickSearchInput:-ms-input-placeholder {
        color: #b3adad;
        height: 34px;
        line-height: 34px;
        font-size: 18px;
    }

    .quickSearchInput::-moz-placeholder {
        color: #b3adad;
        height: 34px;
        line-height: 34px;
        font-size: 18px;
    }

.quickInputContainer a {
    float: right;
    height: 30px;
    line-height: 30px;
    margin: 6px;
    margin-left: 3px;
    padding: 0;
}

    .quickInputContainer a span {
        padding: 0;
        height: 30px;
        line-height: 30px;
    }

        .quickInputContainer a span em {
            display: block;
            width: 30px;
            height: 30px;
            text-indent: -3000px;
            overflow: hidden;
            background: url(Images/search-icon.png) no-repeat center center;
        }

.qSpinner {
    display: none;
    position: absolute;
    z-index: 0;
    right: 13px;
    height: 48px;
    width: 22px;
    background: url(Images/mini-loader.gif) no-repeat left center;
}

.quickSearchInput::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: url(Images/material-clear.png);
    cursor: pointer;
}

/* product autocompleter */

.ui-platformautocomplete {
    top: 10px;
    width: 305px;
    padding: 2px 0;
    background: #dadada;
}

.ui-autocomplete li.autoSing {
    clear: both;
    position: relative;
    margin: 0;
    border-top: solid 1px #fff;
    padding-top: 2px;
}

    .ui-autocomplete li.autoSing:first-child {
        border-top: none;
        padding-top: 0;
    }

    .ui-autocomplete li.autoSing a {
        display: block;
        padding: 5px 8px;
        color: #666666;
        text-decoration: none;
    }

        .ui-autocomplete li.autoSing a.ui-state-hover {
            position: relative;
            margin-left: -23px;
            padding-left: 31px;
            background: url(Images/qs-arrowx2.png) no-repeat 0 center;
        }

    .ui-autocomplete li.autoSing h3 {
        display: inline;
    }

    .ui-autocomplete li.autoSing span {
        display: block;
        color: #000;
    }

    .ui-autocomplete li.autoSing img {
        float: left;
        max-height: 50px;
        padding-right: 5px;
    }

    .ui-autocomplete li.autoSing br {
        clear: both;
    }

    .ui-autocomplete li.autoSing ol {
        display: none;
        padding: 2px 0;
        position: absolute;
        z-index: -1;
        top: 15px;
        overflow: hidden;
        font-weight: bold;
        background: #ebebeb;
    }

        .ui-autocomplete li.autoSing ol li {
            background: url(Images/qs-separator.png) repeat-x 0 0;
            padding-top: 2px;
            font-weight: bold;
            white-space: nowrap;
        }

            .ui-autocomplete li.autoSing ol li:first-child {
                background: none;
                padding-top: 0;
            }

        .ui-autocomplete li.autoSing ol a {
            color: #ee3124;
            padding: 7px 25px 7px 12px;
        }

            .ui-autocomplete li.autoSing ol a.selected {
                background: #ccc;
                color: #000;
            }

    .ui-autocomplete li.autoSing a.ui-state-hover.leftLess {
        margin-left: 0;
        padding: 5px 8px;
        background-position: -23px 0;
    }

.autoNoRes {
    display: block;
    position: absolute;
    width: 96%;
    padding: 2%;
    bottom: -31px;
    background: #dadada;
    border-radius: 4px;
    color: #666;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 2px 5px #555;
}

.ui-helper-hidden-accessible {
    display: none;
}

/* main body  */
.mainBody {
    width: 960px;
    margin: auto;
    position: relative;
}

.leftBar {
    float: left;
    width: 196px;
    padding-top: 0;
}

    .leftBar.fixed {
        z-index: 101;
        background: #FFF url(Images/left-bar-background.png) repeat-y 0 1px;
    }

.leftBarBlock {
    width: 154px;
    min-height: 142px;
    padding: 10px 18px;
    color: #666;
}

    .leftBarBlock:first-child {
        margin-top: 0;
    }

    .leftBarBlock h3 {
        font-size: 15px;
        font-weight: bold;
        width: 155px;
        line-height: 29px;
        color: #000;
        text-shadow: none;
    }

    .leftBarBlock h4 {
        margin-bottom: 4px;
        font-weight: bold;
    }

    .leftBarBlock a {
        color: #666;
        text-decoration: none;
    }

        .leftBarBlock a:hover {
            color: #ee3124;
        }

.appliedFilters {
    margin: 0 0 15px 0;
}

    .appliedFilters p {
        width: 175px;
    }

    .appliedFilters a {
        display: block;
        position: relative;
        width: 155px;
        height: 31px;
        line-height: 29px;
        margin-bottom: -2px;
        color: #000;
        text-shadow: none;
        overflow: hidden;
        font-weight: bold;
    }

        .appliedFilters a::after {
            content: "+";
            float: right;
            font-size: 25px;
            line-height: 31px;
            transform: rotate(45deg);
        }

.newFilter > .filterHeader:first-child {
    margin-top: 10px;
}

.newFilter {
    border-top: 1px solid #dfdbd9;
    width: 176px;
}

.filterType {
    padding-bottom: 2px;
    border-bottom: solid 1px #dfdbd9;
    display: none;
}

.filterHeader {
    width: 155px;
    line-height: 29px;
    color: #000;
    text-shadow: none;
}

    .filterHeader.opened {
        color: #000;
    }

.clearAllFilters {
    display: none;
}

    .clearAllFilters > a {
        float: right;
        text-decoration: underline;
        color: #000;
    }

        .clearAllFilters > a:hover {
            text-decoration: none;
            color: #000;
        }

.filterHeader > img {
    float: right;
    position: relative;
    top: -29px;
}

.filterType div {
    overflow: hidden;
    padding: 0 0 5px 5px;
}

.leftBar.overFl {
    overflow-y: auto;
    overflow-x: hidden;
}

.navBlock p {
    padding: 0 0 8px 12px;
    font-weight: bold;
}

.notifBlock label {
    display: block;
    padding: 8px 0 2px 20px;
    cursor: pointer;
}

    .notifBlock label input {
        margin: 0 5px 0 -20px;
        line-height: normal;
        background: none;
        padding: 0;
        display: inline;
    }

.notifBlock .medButton {
    display: block;
    width: 120px;
    text-align: center;
    color: #FFF;
    margin: 5px auto;
}

.notifBlock em {
    font-size: 11px;
}

#leftOpener {
    display: none;
    height: 36px;
    width: 36px;
    margin-top: 9px;
    text-indent: -3000px;
    overflow: hidden;
    border: solid 1px #ddd;
    border-left: 0;
    right: -36px;
    position: absolute;
    top: 0;
    background: #eee url(Images/left-bar-opener.png) no-repeat center 8px;
}

    #leftOpener.closeLe {
        background-position: center -214px;
    }

/* Right content */

.rightContent {
    float: right;
    width: 764px;
}


/* Search results */

.sorting {
    margin-left: 4px;
    margin-top: 0;
    font-weight: bold;
    color: #fff;
}

    .sorting p {
        display: block;
        height: 45px;
        width: 744px;
        background: #323233;
        padding-left: 10px;
    }

    .sorting .asc, .sorting .des {
        font-weight: bold;
    }

        .sorting .asc em {
            padding-left: 15px;
            background: url(Images/sorting-options.png) no-repeat 3px -78px;
        }

        .sorting .des em {
            padding-left: 15px;
            background: url(Images/sorting-options.png) no-repeat 3px -131px;
        }

    .sorting strong {
        display: block;
        color: #000;
        line-height: 31px;
    }

    .sorting a {
        color: #000;
        display: inline-block;
        text-decoration: underline;
        overflow: hidden;
        white-space: nowrap;
        max-width: 85px;
        vertical-align: middle;
        font-weight: bold;
    }

        .sorting a:hover {
            color: #ee3124;
        }

    .sorting p.fixed {
        position: fixed;
        top: 126px;
        z-index: 101;
    }

    .sorting .sortHead {
        color: initial;
        margin: 20px 0 12px 5px;
    }


.leftBarSlider {
    background: #FFFFFF;
    float: none;
    text-align: left;
    box-shadow: 0 0 8px #000000;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.10);
    border-top-right-radius: 5px;
    height: 100vh;
    position: fixed !important;
    z-index: 225;
    overflow: visible;
    margin: 0;
    top: 0 !important;
    width: 448px;
    left: 0;
}

.leftBarInSlider {
    height: 99vh;
    padding-bottom: 10px;
    font-size: 16px;
}

.leftBarBlockSlider {
    width: 100%;
    min-height: 142px;
    color: #666;
}


    .leftBarBlockSlider:first-child {
        margin-top: 0;
    }

.enhancedActiveSlider {
    height: 100vh;
    position: fixed !important;
    z-index: 230;
    overflow: visible;
    margin: 0;
    top: 0 !important;
    width: 448px;
}

.sliderHeader {
    width: 100%;
    line-height: 29px;
    color: #000;
    text-shadow: none;
}

.sliderHeaderLocalized {
    width: 369px;
    line-height: 29px;
}

.newSlider {
    margin-top: 25px;
}

.appliedSlider {
    border-top: 1px solid #dfdbd9;
    width: 90%;
    margin: 0 auto 25px auto;
}

/*.appliedSlider p {
        width: 175px;
    }

    .appliedSlider a {
        display: block;
        position: relative;
        width: 155px;
        height: 31px;
        line-height: 29px;
        margin-bottom: -2px;
        color: #000;
        text-shadow: none;
        overflow: hidden;
        font-weight: bold;
    }

        .appliedSlider a::after {
            content: "+";
            float: right;
            font-size: 25px;
            line-height: 31px;
            transform: rotate(45deg);
        }*/

.filterType.scrollbar {
    overflow-y: auto;
    max-height: 100vh;
}

.leftPopupOpener {
    background-image: url(Images/CloseBtn.svg);
    background-size: 18px 241px;
}

.leftBarBlockSlider.scrollbar {
    overflow-y: auto;
    max-height: 80vh;
}

.leftSliderMenu {
    background: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
    padding-bottom: 23.2px;
    padding-top: 23.2px;
    width: 448px;
}

.leftSliderHeading {
    font-weight: 800;
    font-size: 20px;
    color: #212322;
    margin-left: 55.7px;
}

.leftBarPlatformPopup a {
    text-decoration: none;
    color: black;
}

.accountSideMenuHeaderLink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px 20px 55px;
    font-weight: 800;
    font-size: 20px;
    text-decoration: none
}

.accountMyOrder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px 20px 55px;
    transition: 0.2s;
    text-decoration: none;
}

    .accountMyOrder h3 {
        font-size: 20px;
    }

.accountMyOrderLabel {
    font-size: 20px;
    font-weight: 700;
    display: flex;
}

.leftBarSubMenuPlatformName {
    text-decoration: none;
    color: black;
    font-size: 20px;
}

.leftBarSubMenuPlatformSeeAll {
    float: right;
}

.accountSideMenuImageListLink {
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

.accountSideSubMenuList {
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
}

.leftSliderClose {
    float: right;
    margin-right: 39px;
    width: 26.14px;
    Height: 25.13px;
    padding-top: 3.5px;
}

.leftSliderMenuImage {
    float: left;
    margin-left: 5.5%;
    margin-right: 4.5%;
    width: 26.14px;
    height: 25.13px;
    padding-top: 3.5px;
}

.leftSliderMenuLabel {
    font-weight: 800;
    font-size: 20px;
    color: #212322;
}

.leftSliderMenuAnchor {
    font-weight: 400;
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.accountSideMenuHotNowImage {
    margin-left: 30%;
}

.accountSideMenuHotNowLabel {
    border-radius: 25px;
    text-align: center;
    width: 60%;
    height: 35px;
    font-size: medium;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -webkit-box-sizing: border-box;
    cursor: pointer;
    text-transform: uppercase;
    margin-left: 20%;
    text-decoration: none;
}


/* Search summary */
.searchSum {
    padding: 10px;
    margin-top: 10px;
    font-size: 18px;
    font-weight: normal;
    border-bottom: solid 1px #dfdbd9;
}

    .searchSum span {
        display: block;
        font-size: 12px;
    }

.searchRefinement {
    padding: 1em 2em;
}

    .searchRefinement span:nth-child(1) {
        color: #737373;
        margin-left: 8px;
    }

    .searchRefinement strong {
        font-weight: normal;
    }

    .searchRefinement a {
        color: #ee3124;
        text-decoration: underline;
    }

        .searchRefinement a:hover {
            color: #e8362f;
        }

    .searchRefinement span:nth-child(2) {
        margin-left: 5px;
    }

/* Product list */
.prodList {
    padding: 0;
}

.searchDivider, #scroller {
    line-height: 33px;
    padding: 6px 20px;
    font-weight: bold;
    font-size: 15px;
}

    #scroller.loadingScr p {
        background: url(Images/mini-loader.gif) no-repeat center center;
    }
/* Hero Sku Result */
.singleProduct {
    display: flex;
    position: relative;
    padding: 0;
    margin: 10px 14px 20px 8px;
    align-items: center;
}

    .singleProduct h3 {
        font-size: 21px;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 4px;
    }

        .singleProduct h3 a {
            color: #323636;
            text-decoration: none;
        }

            .singleProduct h3 a:hover {
                color: #e81e25;
            }

        .singleProduct h3 span {
            font-weight: 300;
        }

    .singleProduct h4 {
        color: #636668;
        font-size: 14px;
        font-weight: normal;
    }

        .singleProduct h4 strong {
            font-weight: normal;
        }

    .singleProduct p {
        color: #636668;
    }

    .singleProduct .prodImg {
        margin-right: 30px;
        width: 90px;
    }

        .singleProduct .prodImg img {
            display: block;
            max-width: 100%;
        }

.prodImg img.movingImg {
    position: relative;
    z-index: 100000;
    box-shadow: 0 0 5px 5px #888
}

.singleProdInfo {
    flex: auto;
}

    .singleProdInfo ul {
        margin-top: 9px;
        color: #636668;
    }

    .singleProdInfo li {
        padding-left: 1em;
    }

        .singleProdInfo li::before {
            position: absolute;
            margin-left: -1em;
            content: "-";
        }

        .singleProdInfo li span {
            font-weight: bold;
        }

.singleProduct .prodBuy {
    width: auto;
    text-align: left;
    min-width: 240px;
}

    .singleProduct .prodBuy .buyButtons {
        margin-top: 1em;
    }

    .singleProduct .prodBuy .variantName {
        display: inline-block;
        font-weight: 600;
        font-size: 1em;
        text-transform: uppercase;
        text-align: right;
        line-height: 1;
        padding-right: 1ch;
        min-width: 15ch;
    }

    .singleProduct .prodBuy .priceCont strong {
        font-size: 1.5em;
        font-weight: 700;
        padding-right: .2em;
    }

        .singleProduct .prodBuy .priceCont strong.discounted {
            color: #e81e25;
        }

    .singleProduct .prodBuy .priceCont span.prevPrice {
        font-size: 1em;
        font-weight: normal;
        color: #636668;
        text-decoration: line-through;
    }

.bonusLine {
    display: inline-block;
    margin-top: 6px;
    margin-bottom: -3px;
    padding: .5em;
    border: #D6D7D6 solid 1px;
    border-radius: 5px
}

#giveawayInfoDiv p {
    margin-bottom: 10px;
    text-align: justify;
}

    #giveawayInfoDiv p img {
        float: left;
        margin-right: 10px;
    }

.promoSingleGiv img {
    width: 100%;
}

.giveawayImg {
    max-width: fit-content;
}
/* jQuery.Rating Plugin CSS - http://www.fyneworks.com/jquery/star-rating/ */
div.rating-cancel, div.star-rating {
    float: left;
    width: 20px;
    height: 20px;
    text-indent: -999em;
    cursor: pointer;
    display: block;
    background: transparent;
    overflow: hidden
}

    div.rating-cancel, div.rating-cancel a {
        background: url(Images/stars-2.0.png) no-repeat 0 -40px;
        display: none;
    }

    div.star-rating, div.star-rating a {
        background: url(Images/stars-2.0.png) no-repeat 0 0
    }

        div.rating-cancel a, div.star-rating a {
            display: block;
            width: 20px;
            height: 100%;
            background-position: 0 0;
            border: 0
        }

div.star-rating-on a {
    background-position: 0 -40px !important
}

div.star-rating-hover a {
    background-position: 0 -80px
}
/* Read Only CSS */
div.star-rating-readonly a {
    cursor: default !important
}
/* Partial Star CSS */
div.star-rating {
    background: transparent !important;
    overflow: hidden !important
}
/* END jQuery.Rating Plugin CSS */

#rated input, #rater input {
    display: none;
}

#rater {
    display: none
}

.rateSt {
    display: block;
    width: 100px;
    height: 20px;
    margin: 0 0 0 auto;
}

.rateWord {
    white-space: nowrap;
    text-align: right;
    font-size: 16px;
    height: 35px;
    line-height: 35px;
}

    .rateWord .rateB {
        font-size: 24px;
        font-weight: 500;
        font-style: normal;
    }

.rateMessage {
    clear: both;
    margin-top: 3px;
    color: #ee3124;
    font-size: 16px;
    text-align: right;
}

.notRatedText {
    font-size: 11px;
}

/* TODO Can we simplify all these .buyNew .buyUsed into a single simple classname? */
div.prodBuy .buyNew a strong em, div.prodBuy .buyUsed a strong em, div.prodBuy .buyPresell a strong em, div.prodBuy .buyDLC a strong em {
    display: none;
}

/* TODO div.prodBuy .buyLoyalty only used on _XaaConsole, change to use another similar style */
div.prodBuy .buyNew a, div.prodBuy .buyUsed a, div.prodBuy .buyPresell a, div.prodBuy .buyDLC a, div.prodBuy .buyLoyalty {
    display: block;
    margin-top: 10px;
}

    div.prodBuy .buyNew a em, div.prodBuy .buyUsed a em, div.prodBuy .buyPresell a em, div.prodBuy .buyDLC a em {
        font-size: 11px;
    }

div.prodbuy {
    display: inline-block;
    width: 229px;
}

    div.prodBuy p a span strong em {
        text-decoration: none;
    }

    div.prodBuy p a span em {
        font-style: normal;
        text-decoration: line-through;
    }

        div.prodBuy p a span em.discounted {
            text-decoration: none;
        }

/* Product details */

.prodTitleCont {
    overflow: auto;
    border-bottom: solid 1px #d8d8d8;
    margin: 5px 8px 20px 8px;
    padding: 5px 15px;
}

.prodTitle {
    float: left;
    width: 63%;
}

    .prodTitle h1 {
        font-weight: normal;
    }

    .prodTitle p {
        font-size: 18px;
        font-weight: normal;
        color: #979595;
    }

        .prodTitle p span {
            font-size: 16px;
        }

.prodRate {
    float: right;
    width: 36%;
}

.prodLeftBlock {
    float: left;
    width: 35%;
    text-align: center;
    margin-left: 5px;
}

    .prodLeftBlock p {
        margin-top: 10px;
        margin-left: 5px;
    }

.prodRightBlock {
    float: right;
    width: 60%;
}

.mainInfo {
    margin-bottom: 20px;
}

    .mainInfo .prodImg {
        display: block;
        width: 290px;
        height: 410px;
        margin: 0 auto;
    }

        .mainInfo .prodImg img {
            display: block;
            max-width: 290px;
            max-height: 410px;
            margin: 0 auto;
        }

.prodImgIn {
    height: 230px;
}

.suggestedPackShots {
    padding: 20px 25px;
    text-align: center;
    display: flex;
}

    .suggestedPackShots p {
        margin-bottom: 10px;
    }

    .suggestedPackShots a {
        display: inline-block;
        width: 18%;
        margin: 0 0.5%;
        vertical-align: middle;
    }

        .suggestedPackShots a img {
            width: 100%;
        }

.topProdButtons {
    text-align: right;
    margin: 0 8px 40px 8px;
    padding: 5px 15px;
    height: 20px;
}

.tradeValueBlock {
    float: right;
    position: relative;
}

.tradeValueLine span {
    display: inline-block;
    vertical-align: middle;
    text-transform: uppercase;
    font-weight: bold;
    color: green;
}

#tradeValueTC {
    display: none;
    position: absolute;
    width: 353px;
    right: 0;
    top: 37px;
    background: #e7e7e7;
    border: solid 1px #898989;
    z-index: 300;
    text-align: left;
}

.addCartBar.fixed .prodImgIn {
    height: auto;
}

.addCartBar.fixed .havelist-wishlist-block {
    display: none;
}

#buySection {
    overflow: auto;
}

.singleVariantDetails {
    float: left;
    width: 50%;
    margin-bottom: 20px;
}

.xaaVariantDetails {
    float: left;
}

.xaaPriceDetails {
    margin-left: 40px;
}

.xaaProductPanel {
    border: solid 2px #ee3124;
    margin: 30px 20px;
    padding: 10px;
}

    .xaaProductPanel p {
        padding: 5px 0;
    }

.variantName {
    text-align: left;
    font-size: 16px;
}

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

.prodPriceCont.valuteCont {
    font-size: 30px;
    display: inline-block;
    line-height: 45px;
}

.singleVariantDetails label {
    display: block;
    cursor: pointer;
    padding-left: 10px;
    padding-top: 5px;
}

.xaaVariantDetails label {
    display: block;
    cursor: pointer;
    padding-left: 10px;
    padding-top: 5px;
}

.singleVariantRadio {
    display: inline-block;
    width: 36px;
    height: 29px;
    vertical-align: middle;
}

.singleVariantText {
    display: inline-block;
    vertical-align: middle;
}

.detailsLink a {
    text-decoration: none;
    color: #777;
}

    .detailsLink a:hover {
        color: #ee3124;
    }

.DLCVariant label {
    padding: 15px;
    margin: 0 10px 0 0;
    cursor: default;
}

.DLCVariant .megaButton {
    display: block;
    margin: 0 10px 20px 0;
    text-align: center;
}

.DLCVariant {
    padding-right: 1px;
}

.bigBuyButtons {
    clear: both;
    padding: 10px 0 40px 0;
}

.upgradeTierInfo {
    font-weight: bold;
}

.xaaBuyButton.bigBuyButtons {
    margin-left: 30px;
    padding: 0;
    width: 50%;
}

.prodDetBlock {
    clear: both;
    margin: 0 8px;
    padding: 0 0 60px 0;
    border-top: solid 1px #d8d8d8;
}

    .prodDetBlock h3 {
        font-size: 48px;
        text-transform: uppercase;
        font-weight: normal;
    }

.prodSugg > h3 {
    font-size: 24px;
    font-weight: normal;
    padding-left: 45px;
}

.prodToTop {
    float: right;
    font-size: 10px;
}

    .prodToTop a {
        display: inline-block;
        padding: 5px 15px;
        background: #f2f2f2;
        color: #9b9b9b;
        text-decoration: none;
        cursor: pointer;
    }

.textDesc {
    text-align: justify;
    line-height: 20px;
}

#addedDet {
    clear: both;
    margin-left: 6px;
    margin-top: 0;
}

.discrimination {
    background-position: 0 -49px;
}

.drugs {
    background-position: -25px -49px;
}

.fear {
    background-position: -50px -49px;
}

.gambling {
    background-position: -75px -49px;
}

.badLanguage {
    background-position: -100px -49px;
}

.sex {
    background-position: -125px -49px;
}

.violence {
    background-position: -150px -49px;
}

.online {
    background-position: -175px -49px;
}

.ageDescr.esrb {
    width: 60px;
    height: auto;
    margin: 0 0 4px 0;
    text-indent: 0;
    background: none;
    float: right;
    clear: right;
}

.addedDetInfo {
    display: inline-block;
    font-size: 12px;
    line-height: 18px;
}

    .addedDetInfo label {
        display: inline-block;
        font-weight: bold;
        width: 130px;
    }

    .addedDetInfo em {
        font-style: normal;
    }

h2.prodSecHead {
    clear: both;
    padding: 17px 0 20px 0;
    text-align: center;
    font-size: 30px;
    color: #d8d8d8;
    text-transform: uppercase;
}

.prodSecHead a {
    padding: 0 30px;
    text-decoration: none;
    font-weight: normal;
}

.mediaImages {
    padding: 25px 0 0 0;
}

.gallery {
    float: left;
    border: none;
    text-decoration: none;
    width: 16%;
    margin: 0 0.8% 0 0;
}

    .gallery span {
        display: block;
        border-bottom: solid 7px #fff;
    }

    .gallery:last-child {
        margin: 0;
    }

    .gallery.sel span {
        border: solid 4px #ddc151;
        border-bottom: solid 7px #ddc151;
    }

    .gallery img {
        display: block;
        width: 100%;
    }

.mediaImagesListTop {
    overflow: auto;
}

.mediaImagesListBottom {
    overflow: auto;
}

    .mediaImagesListBottom .gallery span {
        border-bottom: none;
        border-top: solid 7px #fff;
    }

    .mediaImagesListBottom .gallery.sel span {
        background: #ddc151;
        border: solid 4px #ddc151;
        border-top: solid 7px #ddc151;
    }

.bigZoomImg {
    border: solid 4px #ddc151;
}

    .bigZoomImg img {
        display: block;
        width: 100%;
    }

/* Prod details promos */
.prodSinglePromo {
    display: inline-block;
    width: 33%;
    vertical-align: middle;
    margin-bottom: 15px;
}

.prodSinglePromoIn {
    display: block;
    margin: 0 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.10);
}


.prodSinglePromoTxt {
    padding: 15px;
    text-align: center;
}

    .prodSinglePromoTxt h4 {
        font-size: 21px;
    }

    .prodSinglePromoTxt span {
        width: 99%;
        display: inline-block;
        vertical-align: middle;
    }

    .prodSinglePromoTxt em {
        display: inline-block;
        height: 75px;
        width: 1px;
        vertical-align: middle;
    }

    .prodSinglePromoTxt p {
        border-top: solid 1px #ddd;
        text-align: center;
        margin: 9px 0 0 0;
        padding: 9px 0 0 0;
    }

.prodSinglePromoBtn {
    padding: 0 15px 15px;
}


/* BANNERS */

.banner {
    display: block;
    margin: 0 0 20px 0;
}

    .banner img {
        display: block;
        margin: auto;
    }

.width3-3 {
    float: left;
    width: 940px;
    margin: 0 0 20px 10px;
}

.width2-3 {
    float: left;
    width: 620px;
    margin: 0 10px 20px 10px;
}

.width1-3 {
    float: left;
    width: 300px;
    margin: 0 0 20px 10px;
}


/* Platform home block */

.platformHomeCustom .rightBlock {
    float: right;
    width: 624px;
    margin: 0;
}

.Container_pageB {
    text-align: center;
    position: relative;
    margin-bottom: 10px;
}

.PageB {
    display: inline-block;
    margin: 0 7px;
}

    .PageB img {
        margin-left: 0;
    }


div.gcDesc {
    font-weight: normal;
}

#AddressList p {
    margin-bottom: 5px;
}

#AddressList strong {
    display: inline-block;
    width: 34%;
}

.halfed {
    float: left;
    width: 330px;
    padding: 0 20px 0 0;
}

.thirded {
    float: left;
    width: 229px;
}

/* ADDRESSES  */

.addBlock {
    width: 315px;
    padding: 15px;
    overflow: hidden;
    border: solid 1px #ccc;
    margin-bottom: 10px;
}

    .addBlock h4 {
        font-size: 14px;
    }

    .addBlock h5 {
        color: #fff;
        padding-bottom: 10px;
        background-color: #323233;
        font-size: 12px;
        font-weight: bold;
        padding: 10px;
        margin-bottom: 10px;
    }

        .addBlock h5 > i {
            padding-right: 1ch;
        }

    .street {
        padding: 0;
        margin: 0;
        font-size: 12px;
        height: auto;
        margin-bottom: 10px;
    }

.phone {
    margin: 5px 0;
}

.addBlock .medButton {
    margin-top: 20px;
}

.addBlock.notPres {
    height: auto;
    margin-bottom: 10px;
}

/* SHIPPING */

.shippingAdd table {
    display: none;
}

table.ncoltable1 td, table.ncoltable2 td, table.ncoltable3 td {
    background: none;
    padding: 5px 0;
}

.mainContainer .ncoltable2 select, .mainContainer .ncoltable2 input[type=text] {
    display: inline;
    border: solid 1px #ddd;
    width: auto;
    background: #fff;
    border-radius: 5px;
    margin: 0;
    text-align: left;
}

.mainContainer .ncoltable2 select {
    height: auto;
    line-height: normal;
    margin: 0 10px;
}

    .mainContainer .ncoltable2 select:first-child {
        margin-left: 0;
    }

#WaitMsgId {
    height: 26px;
    position: fixed !important;
    bottom: 280px !important;
}

input[type=submit].ncol, #btn_Back {
    display: inline-block;
    padding: 0 10px;
    margin: 50px 0;
    height: 42px;
    line-height: 42px;
    border: none;
    border-left: solid 1px #671013;
    border-right: solid 1px #671013;
    border-radius: 5px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    text-shadow: #000 1px 1px 0;
    background: url(Images/mega-button.png) no-repeat -10px -172px;
    cursor: pointer;
}

    input[type=submit].ncol:hover, #btn_Back:hover {
        line-height: 45px;
        background-position: -10px -216px;
    }

/* Giftcard block */
.giftcardBlock {
    width: 630px;
    margin: 0 auto;
}

.giftCardBalance {
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 20px;
    width: 650px;
}

    .giftCardBalance h1 {
        height: 40px;
        line-height: 40px;
        width: 625px;
        display: block;
        padding-left: 0;
        background: #323233;
        padding: 0 10px;
        padding-right: 15px;
        font-weight: bold;
        color: #fff;
        font-size: 14px;
    }

.GiftCard {
    margin: 0 10px;
}

    .GiftCard h1 {
        margin-top: 10px;
        height: 40px;
        display: block;
        background: #323233;
        padding: 0 10px;
        font-weight: bold;
        color: #fff;
        font-size: 14px;
        line-height: 40px;
    }

.giftCardBalance .giftCardEditor li {
    margin: 15px 25px 0 15px;
}

.giftCardBalance h2 {
    font-size: 14px;
    font-weight: normal;
    margin-top: 12px;
}

.giftCardBalance .backButton {
    padding: 15px 25px 15px 15px
}

.giftCardBalance .cardBalance {
    font-size: 60px;
}

.giftcardUsedContainer {
    font-weight: bold;
}

.gCMess {
    max-width: 500px;
    display: block;
    overflow: hidden;
    word-wrap: break-word;
}


/* Gift Card */

#giftcard-info {
    text-align: justify;
    line-height: 20px;
}

    #giftcard-info h2 {
        font-weight: bold;
        font-size: 24px;
        margin-bottom: 20px;
    }

.giftCardText {
    min-height: 240px;
    margin-top: 20px;
    margin-right: 40px;
    padding: 10px 45% 10px 10px;
    background: url(/Views/Locale/Content/Images/giftcard-ultra.png) no-repeat right center;
    background-size: 370px 240px;
}

.giftCardAdv {
    padding: 15px 0 0 0;
    border-radius: 3px;
}

    .giftCardAdv h3 {
        font-weight: bold;
    }

.giftCardDisc {
    font-size: 12px;
    padding: 10px 25px 10px 10px;
}

    .giftCardDisc strong {
        font-weight: bold;
        font-weight: normal;
    }

.CheckboxType {
    margin-bottom: 10px;
}

.giftCardEditor .CheckboxType p {
    margin-left: 100px;
}

.giftCardBlock {
    padding: 0 10px;
    margin-top: 20px;
}

    .giftCardBlock img {
        max-height: 240px;
        max-width: 320px;
        float: left;
        margin-right: 15px;
    }

.giftStep {
    float: left;
    width: 235px;
}

    .giftStep .bigButton {
        float: left;
    }

.giftSmall {
    width: 160px;
}

.giftMed {
    width: 35%;
}

.giftBig {
    width: 60%;
}

    .giftBig h3 {
        display: inline-block;
        margin: 0 0 3px 0;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
        font-weight: normal;
        margin-left: 35px;
    }

    .giftBig textarea {
        height: 66px;
        font-size: 14px;
        line-height: normal;
        margin-left: 35px;
        width: 93%;
        border-color: #ccc;
        resize: none;
    }

.priceGift {
    display: inline-block;
    width: 73px;
}

.giftCardBlock label {
    cursor: pointer;
}

div div.giftCardBlock .giftShortInp, div div.giftCardBlock .giftLongInp {
    display: inline;
    line-height: normal;
    padding: 0 10px;
    border: solid 1px #C0C0C0;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
}

div div.giftCardBlock textarea.giftLongInp {
    padding-top: 6px;
}

div div.giftCardBlock .giftShortInp[disabled] {
    background: none;
}

div div.giftCardBlock .giftShortInp {
    width: 129px;
}

div div.giftCardBlock .giftLongInp {
    width: 279px;
}

.adviceGift {
    font-weight: bold;
    font-size: 11px;
}

.giftCardBlock h3 {
    display: block;
    height: 30px;
    line-height: 30px;
    padding-left: 35px;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: bold;
    color: #666;
    background: url(Images/giftnum.png) no-repeat 0 0;
}

h3.gift2 {
    margin-left: 10px;
    font-weight: normal;
}

h3.gift3 {
    display: inline-block;
    margin: 0 0 3px 0;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    font-weight: normal;
}

h3.gift4 {
    font-weight: normal;
    background-position: 0 -700px;
    margin-left: 15px;
}

h3.gift5 {
    font-weight: normal;
    background-position: 0 -933px;
    margin-left: 35px;
}

.addGiftButtons {
    margin: 0 10px;
}

.giftCardTotal {
    margin: 10px;
    font-size: 16px;
    vertical-align: middle;
    border-top: solid 1px #e7e7e7;
    padding-top: 10px;
}

    .giftCardTotal #tot {
        height: 35px;
        line-height: 35px;
        padding-right: 25px;
    }


/* Login block */

.loginBlock {
    padding-top: 15px;
    margin: 20px 0;
}

.loginBlockIn {
    margin: auto;
}

.loginBlock fieldset {
    border: none;
    padding: 0;
    margin: 0 auto;
}

.loginBlockIn .loginForm {
    margin: 0 auto;
    padding-bottom: 10px;
}

.fieldLoader {
    display: block;
    padding-top: 25px;
    margin: 0 auto;
}

.loginBlockIn .loginFormB {
    float: left;
    width: 414px;
    margin: 0 auto;
}

.loginBlock .loginFormIn {
    padding-bottom: 20px;
    margin: 20px auto;
    width: 400px;
}

.loginBlock .registerFormIn {
    padding-bottom: 20px;
    margin: 20px auto;
    width: 655px;
    border-bottom: #c3c3c3 solid 1px;
}

    .loginBlock .registerFormIn .logButtons {
        width: 655px;
    }

.loginBlock label {
    display: block;
    padding-bottom: 5px;
}

.newLogButtons {
    max-width: 250px;
    height: 100px;
    margin: 0 auto;
}

.logButtons {
    width: 400px;
    border-top: #fff solid 1px;
    margin: 0 auto;
}

    .logButtons .loader {
        display: none;
        width: 16px;
        height: 16px;
        margin-left: 8px;
        vertical-align: middle;
        background: url(Images/mini-loader.gif) no-repeat left center;
    }

        .logButtons .loader img {
            display: none;
        }

.loginBlock fieldset .megaButton {
    margin: 9px;
    width: 392px;
    text-align: center;
}

.loginBlock h1 {
    position: relative;
    clear: both;
    line-height: 40px;
    padding-bottom: 10px;
    padding-top: 10px;
    color: #FFF;
    font-size: 14px;
    margin: 0 auto;
    width: 420px;
}

    .loginBlock h1 span {
        display: block;
        font-weight: bold;
        text-align: center;
        color: #212322;
        font-size: 24px;
        font-family: 'Poppins' sans-serif;
        margin-bottom: 20px;
    }

.field-validation-valid {
    display: none
}


.loaderBig {
    display: none;
}

    .loaderBig img {
        display: block;
        margin: auto;
        padding: 150px 0;
    }

/* new wide register */

.loginBlockIn.newRegister .loginForm.wideForm {
    float: none;
    padding: 0;
}

    .loginBlockIn.newRegister .loginForm.wideForm fieldset {
        width: auto;
    }

    .loginBlockIn.newRegister .loginForm.wideForm .loginLine {
        display: block;
        clear: both;
        overflow: auto;
    }

    .loginBlockIn.newRegister .loginForm.wideForm .loginSplit {
        float: right;
        width: 48%;
    }

        .loginBlockIn.newRegister .loginForm.wideForm .loginSplit:first-child {
            float: left;
        }

.loginBlockIn.newRegister .loginForm fieldset.loaderBg {
    background: none
}

.regTextSugg {
    float: right;
    line-height: 40px;
    padding-right: 5px;
}

.mandFields {
    margin: -10px 0 15px 0;
    font-weight: bold;
}

.loginBlockIn.newRegister .loginForm.wideForm .loginDivider {
    margin: 15px 0;
    height: 0;
    border-top: solid 1px #c3c3c3;
    border-bottom: solid 1px #fff;
}

.registerErrorSummary .validation-summary-valid {
    display: none;
}

.registerErrorSummary .validation-summary-errors span {
    display: block;
    margin-bottom: 5px;
    padding: 0 0 0 17px;
    color: #000;
    background: url(Images/tag-warning.png) no-repeat 0 center;
}

.registerErrorSummary .validation-summary-errors {
    padding: 10px;
    margin-top: 15px;
    border: solid 1px #ccc;
}

    .registerErrorSummary .validation-summary-errors ul {
        padding-left: 34px;
        font-weight: bold;
        list-style: circle;
    }

        .registerErrorSummary .validation-summary-errors ul li {
            list-style: disc;
        }

/* popups */
.ui-dialog {
    position: absolute;
}

    .ui-dialog.ui-widget-content {
        padding: 20px;
        border: solid 1px #eee;
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        border-radius: 5px;
        max-width: 90%;
        outline: none;
    }

    .ui-dialog.noTitle .ui-widget-header {
        display: none;
    }

.ui-widget-header {
    position: relative;
    padding: 10px;
    font-size: 20px;
    color: #323233;
    font-weight: bold;
    margin-bottom: 10px;
    cursor: move;
}

.ui-dialog-titlebar-close {
    display: none;
}

.ui-dialog-with-close .ui-dialog-titlebar-close {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    padding: 2px 4px;
    color: #B9BDBB;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.ui-dialog-with-close .ui-widget-header {
    background: none;
}

.ui-dialog-titlebar-close:hover {
    content: "×";
    color: #e81e25;
}

.ui-dialog-titlebar-close .ui-icon-closethick::before {
    content: "×";
    font-size: 24px;
    line-height: 18px;
}



.ui-dialog-content {
    min-height: 120px;
    padding: 10px;
    overflow: auto;
}

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(Images/fancybox_overlay.png) repeat 0 0;
}

.ui-front {
    z-index: 600;
}

.ui-dialog-buttonset {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 0;
    border-top: solid 1px #eee;
    margin-top: 10px;
}

    .ui-dialog-buttonset .ui-button {
        display: inline-flex;
        margin: 2px 5px;
    }

.splashPage {
    margin: 0 auto;
    padding: 0;
}


/* ADD TO CART DIALOG */

.addedToCartImg {
    float: left;
    width: 25%;
}

    .addedToCartImg img {
        width: 100%;
    }

.addedToCartTxt {
    float: left;
    width: 70%;
    margin-left: 5%;
}

.addedToCartMsg {
    margin-bottom: 8px;
    text-transform: uppercase;
    font-size: 20px;
    color: #64ae0d;
}

.addedToCartBox h1 {
    margin-bottom: 8px;
    font-size: 24px;
    font-weight: normal;
}

.addedToCartBox h3 {
    margin-bottom: 8px;
    font-size: 18px;
}

.addedBoxPlat {
    color: #857e7b;
}

.addedToCartStockWarn {
    clear: both;
    margin-bottom: -10px;
    padding-top: 10px;
}
/* CUSTOM RADIO*/
.customContSelRadio input {
    cursor: pointer;
}

.customRadio {
    display: inline-block;
    position: absolute;
    height: 22px;
    width: 22px;
    background-color: #fff;
    border-radius: 100%;
    border: solid 3px #ee3124;
}

    .customRadio.disab {
        border-color: #8f8f8f;
    }

    .customRadio.focused {
        box-shadow: #ee3124 0 0 2px 1px;
    }

    .customRadio span.cchecked {
        display: block;
        height: 16px;
        width: 16px;
        margin: 3px 0 0 3px;
        background-color: #ee3124;
        border-radius: 100%;
    }

    .customRadio.disab span.cchecked {
        background-color: #8f8f8f;
    }

/* User Details */

.accountSum {
    background: #FFF;
    padding: 20px;
}

.singleAdd {
    float: left;
    margin: 6px;
}

.proceedButtons {
    clear: both;
    padding: 25px 0 15px 0;
    text-align: center;
}

    .proceedButtons input {
        text-align: center;
        background: #EEE;
        border: #000 solid 1px;
        padding: 10px;
        margin-right: 20px;
    }

        .proceedButtons input:hover {
            background: #ee3124;
            color: #FFF;
            cursor: pointer;
        }

.orderHShip .singleAdd {
    height: auto;
    min-height: 266px;
}


/* ACCOUNT MANAGEMENT */

#AccountManagementMain {
    padding-top: 15px;
    padding-bottom: 10px;
}

.accountManagementMainIn {
    padding-bottom: 30px;
    background: #f5f5f5 url(Images/accordion-bottom.png) no-repeat 0 bottom;
}

#AccountManagementMain fieldset {
    border: none;
    border-top: #fff solid 1px;
    padding: 0 0;
    margin: 6px 0 0 25px;
}

#AccountManagementMain .proceedButtons {
    padding: 23px 0;
    margin: 0 30px 0 23px;
    border-top: #fff solid 1px;
    text-align: left;
}

#AccountManagementMain fieldset:first-child {
    border-top: none;
    border-bottom: #c3c3c3 solid 1px;
}

#AccountManagementMain label {
    display: block;
    padding-bottom: 5px;
    padding-top: 15px;
}

.userMenu li {
    display: block;
    height: 48px;
    line-height: 48px;
    margin: 6px 0 6px 5px;
}

    .userMenu li a {
        display: block;
        width: 160px;
        padding: 0 15px;
        color: #FFF;
        text-decoration: none;
        background-color: #323233;
        text-shadow: #000 0 1px 1px;
    }

    .userMenu li.userMenuSel a {
        background: #ee3124;
    }



.loginSplit input[type=text],
#addrForm input[type=text],
.loginFormIn input[type=text],
.loginFormIn input[type=password],
.mainContainer input[type=datetime],
.mainContainer input[type=email],
.mainContainer input[type=PhoneNumber] {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin: 0 0 15px 0;
    font-size: 14px;
    background: #fff;
    border: #ccc solid 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*login page registration styles*/

.loginSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loginArticle {
    background-color: #fff;
    border-radius: 0.5em;
    padding: 3em 2.5em;
    /*min-width: 30%;*/
    min-width: 35%;
    margin-bottom: 16px;
    max-width: 35%;
}

    .loginArticle h2 {
        display: block;
        font-size: calc(1.5rem + 1vw);
        margin-bottom: 1.3em;
        text-align: center;
    }


.input-container {
    position: relative;
}

    .input-container + .input-container {
        margin-top: 16px;
    }

    .input-container label {
        position: absolute;
        pointer-events: none;
        left: 10px;
        top: 1em;
        font-size: 16px;
        transform-origin: 0 0;
        transition: transform 0.2s ease-in-out;
    }

    .input-container > input[type="text"], .input-container > input[type="password"] {
        display: block;
        padding-bottom: 0.5em;
        border: 1px solid transparent;
        background: #f0f0f0;
        outline: none;
        font-size: 16px;
        padding-top: 20px;
        padding-left: 10px;
        width: 96%;
        border-radius: 5px;
    }


.field-validation-error + .rememberMeLoginBlock {
    margin-top: 1.5em;
}

.rememberMeLoginBlock + .logButtons {
    margin-top: 3em;
}

.rememberMeLoginBlock {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
/*   start Login Styles */




.loginArticle .field-validation-error {
    display: inline-block;
    margin-top: -8px;
    margin-bottom: -10px;
}

.loginArticle .error input {
    display: block;
    padding-bottom: 0.5em;
    border: 1px solid red;
    background: #f0f0f0;
    outline: none;
    font-size: 16px;
    padding-top: 20px;
    padding-left: 10px;
    width: 96%;
    border-radius: 5px;
}

.loginArticle .success input {
    display: block;
    padding-bottom: 0.5em;
    border: 1px solid transparent;
    background: #f0f0f0;
    outline: none;
    font-size: 16px;
    padding-top: 20px;
    padding-left: 10px;
    width: 96%;
    border-radius: 5px;
}

.success span.errorXUsername::before {
    display: none;
}

.success span.errorXPassword::before {
    display: none;
}

.error span.errorXUsername::before {
    content: 'X';
    position: absolute;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: 20px;
    right: 20px;
    padding: 0 5px;
    visibility: visible;
    margin-bottom: 2px;
}

.error span.errorXPassword::before {
    content: 'X';
    position: absolute;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: 20px;
    right: 20px;
    padding: 0 5px;
    visibility: visible;
    margin-bottom: 2px;
}




.errorBlock {
    max-width: fit-content;
}

    .errorBlock .errorMessage {
        display: block;
        margin-top: 5px;
        padding: 2px 6px;
        line-height: 18px;
        vertical-align: middle;
        color: #ee3124;
        background: none;
        word-wrap: break-word;
        text-align: justify;
    }


.loginArticle .errorMessage::before {
    content: 'X';
    color: white;
    background-color: red;
    border-radius: 100px;
}
/*   End Login Styles */
/* End of login page registration styles*/
.mainContainer select, #addrForm select {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 0;
    margin: 0 0 10px 0;
    font-size: 14px;
    background: #fff;
    border: #ccc solid 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #616161;
}

#addrForm input[type=text] {
    margin: 0 0 10px 0;
}

#addrForm label {
    font-weight: bold;
    display: inline-block;
    margin: 0 0 3px 0;
}

#addrForm input:disabled {
    cursor: not-allowed;
    background-color: #dddddd;
}

#addrForm input[type=password] {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding: 0 10px;
    margin: 0 0 15px 0;
    background: #fff;
    border: #ccc solid 1px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input.normalInp {
    display: inline;
    line-height: normal;
    padding: 0;
    margin: 15px 0 0 0;
    border: none;
}

.pwdStr {
    display: block;
    height: 10px;
    width: 315px;
    margin-top: -10px;
    margin-bottom: 2px;
    background: url(Images/user-details.png) no-repeat -587px -7px
}

.pwdLow {
    background-position: -587px -18px;
}

.pwdMed {
    background-position: -587px -30px;
}

.pwdHi {
    background-position: -587px -42px;
}

.pwdPer {
    background-position: -587px -54px;
}

/* Order details */

#OrderDetails {
    padding: 10px 25px 0 25px;
}

    #OrderDetails table {
        width: 100%;
    }

        #OrderDetails table th {
            padding: 10px 10px 5px 0;
            color: #666666;
            text-shadow: #FFF 0 1px 1px;
            text-align: left;
        }

        #OrderDetails table td {
            padding: 13px 10px 13px 0;
            border-bottom: #c3c3c3 solid 1px;
            border-top: #fff solid 1px;
            vertical-align: top;
        }

        #OrderDetails table tr:first-child td {
            border-top: none;
        }

        #OrderDetails table .quantCol {
            display: inline-block;
            width: 15px;
        }

.mobileOrder {
    margin: 10px 25px 0 25px;
    border-top: solid 1px #aaa;
    border-bottom: solid 1px #fff;
}

.singleOrder {
    border-bottom: solid 1px #aaa;
    border-top: solid 1px #fff;
    text-align: left;
    font-weight: normal;
    padding: 15px 0;
}

#AccountManagementMain .singleOrder h3 {
    padding-bottom: 0;
}

.singleOrder ul {
    padding-left: 10px;
}

.singleOrder li {
    padding: 5px 0;
}

.orderHDet p {
    padding-bottom: 10px;
    padding-top: 5px;
}


.orderHDet span, .orderHDet strong {
    display: inline-block;
    width: 48%;
    vertical-align: top;
}

.orderHShip .singleAdd {
    margin-left: 0;
}

.orderHShip .halfed {
    width: 345px;
    padding-right: 0;
}

    .orderHShip .halfed:first-child {
        width: 345px;
        padding-right: 28px;
    }

.orderHProd table {
    width: 100%;
    table-layout: fixed;
    margin-top: 10px;
}

    .orderHProd table th {
        padding: 13px 25px;
        text-align: left;
        text-align: right;
    }

        .orderHProd table th.shipHead,
        .orderHProd table th.shipSubHead {
            text-align: left;
            line-height: 25px;
            border-bottom: solid 1px #ccc;
        }

            .orderHProd table th.shipHead a,
            .orderHProd table th.shipSubHead a {
                float: right;
                margin-left: 5px;
            }

    .orderHProd table tbody td {
        padding: 17px 25px;
        font-weight: bold;
        border-top: #fff solid 1px;
        border-bottom: #d1d1d1 solid 1px;
    }

    .orderHProd table tfoot td {
        padding: 5px;
        font-weight: normal;
        text-align: right;
        border-bottom: #c3c3c3 solid 1px;
    }

.orderHProd table tbody td.wid50 {
    width: 50%
}

.orderHProd table tbody td.wid10 {
    width: 10%
}

.orderHProd table tbody td.wid15 {
    width: 15%
}

.orderHProd table tbody td.wid5 {
    width: 5%
}

.orderHProd table .colPrice {
    text-align: left;
    width: 15%;
    padding: 0 0 0 30px;
}

.orderHDet .halfed {
    width: 48%;
    padding: 0 1%;
}

    .orderHDet .halfed a {
        display: block;
        text-align: center;
    }

.digitalInstructionsPop, .digitalTokenPop {
    margin: 0 10px 5px 0;
}

.dlcLoader {
    display: inline;
    margin-left: 5px;
    vertical-align: middle
}

.dlcLoaderHide {
    display: none;
}

.DLC-Card {
    height: 275px;
    width: 470px;
    max-width: 100%;
    text-align: center;
    font-size: 20px;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    background: url(../Views/Locale/Content/Images/DLC-card.png) no-repeat center center;
    border-radius: 10px;
}

    .DLC-Card p {
        padding-top: 120px;
    }

    .DLC-Card #tokenText {
        padding-top: 40px;
        font-size: 24px;
        font-family: Helvetica, Arial, sans-serif
    }


/* Bundle creator */

.bundleConstruct.fixed {
    position: fixed;
    top: 42px;
    width: 960px;
    z-index: 101;
    border-bottom: 1px solid #FFF;
    background: #FFF;
    box-shadow: 0 3px 9px #555;
    border: solid 1px;
    overflow-y: scroll;
    max-height: 30%;
}

    .bundleConstruct.fixed .bundleDescr div {
        display: none;
    }

.bundleBuilder h1 {
    font-size: 24px;
    padding-bottom: 10px;
}

.bundleDescr {
    margin: 15px 0;
}

.bundleLeft {
    text-align: center;
}

.bundleBuilderLeft .megaButton {
    margin-left: 4px;
}

.bundleBuilderLeft em {
    position: relative;
    width: 178px;
    height: 48px;
    color: #666;
    text-shadow: white 0 1px 1px;
    display: block;
    line-height: 48px;
    padding: 0 15px;
    font-style: normal;
}

.bundleConsole {
    margin-left: 185px;
}

.bundleGame {
    margin-left: 200px;
}

.bundleBuilderRight .toChoose {
    height: 40px;
    line-height: 40px;
    padding: 0 10px;
    color: #FFF;
    background: #323233;
}

.bundleBuilderRight h5 {
    font-size: 16px;
}

.bundleBuilder table {
    width: 100%;
    margin-bottom: 10px;
    border-bottom: #ccc solid 1px;
}

    .bundleBuilder table tbody td {
        padding: 15px;
    }

        .bundleBuilder table tbody td.pImage {
            width: 50px;
            padding: 5px 10px;
        }

.bundleChoose {
    clear: both;
    margin: 20px 0;
}

.bundleProductVariant {
    position: relative;
    padding: 15px;
    border-bottom: #ccc solid 1px;
}

    .bundleProductVariant > div {
        display: flex; /* using flexbox avoid layout shift issues */
        align-items: center;
    }

    .bundleProductVariant .pImage {
        margin: 0;
        width: 90px;
    }

        .bundleProductVariant .pImage img {
            display: inline-block;
            max-width: 90px;
            max-height: 130px;
        }

    .bundleProductVariant .details {
        padding-left: 30px;
        text-align: left;
        width: 70%;
    }

        .bundleProductVariant .details h2,
        .bundleProductVariant .details h4 {
            color: #383838;
        }

        .bundleProductVariant .details h3 {
            color: gray;
            font-weight: normal;
            padding-bottom: .5em;
        }

    .bundleProductVariant .buttons {
        display: flex;
        justify-content: end;
        width: 50%;
    }


    .bundleProductVariant .bundleAdd,
    .bundleProductVariant .bundleInfo {
        display: inline-block;
        margin: 3px;
    }

    .bundleProductVariant .bundleRemove {
        display: inline-block;
        text-align: right;
        width: auto;
    }

    .bundleProductVariant .variantType {
        padding-left: 20px;
        padding-right: 20px;
        text-align: center;
        width: 10%;
    }

        .bundleProductVariant .variantType h3 {
            text-transform: uppercase;
        }

.bundleList .bundleProductVariant .bundleAdd {
    float: left;
    text-align: center;
    margin-right: 5px;
    width: auto;
    position: relative;
    top: 50%;
}

    .bundleList .bundleProductVariant .bundleAdd a {
        width: 100px;
    }

.bundleList .bundleProductVariant .bundleInfo {
    float: left;
    text-align: center;
    margin-right: 5px;
    width: auto;
    position: relative;
    top: 50%;
}

    .bundleList .bundleProductVariant .bundleInfo a {
        width: 100px;
    }

.bundleList .bundleProductVariant .bundleRemove {
    text-align: right;
}

/* MAPS */

.mapContainer {
    position: relative;
}

#map input {
    display: inline;
    width: auto;
    height: auto;
    line-height: normal;
    padding: 0;
    margin: 0;
    border: none;
}

#map {
    height: 420px;
    margin-bottom: 30px;
    background: #f4f4f4;
    border-radius: 5px;
}

.mapSearch {
    margin-bottom: 10px;
}

    .mapSearch > input {
        height: 36px !important; /* needed because of loyalty.css overwriting it*/
        display: inline-block !important; /* needed because of loyalty.css overwriting it*/
    }

    .mapSearch.tbl {
        display: table;
        margin-right: 5px;
    }

.tbl > div {
    display: table-cell;
}

    .tbl > div:nth-of-type(1) {
        width: 95%;
    }

    .tbl > div:nth-of-type(2) {
        width: 5%;
        padding-left: 5px;
    }


.storeSel {
    margin-top: 15px;
}

    .storeSel h3 {
        clear: both;
        text-shadow: #FFF 0 1px 1px;
    }

    .storeSel h4 {
        font-weight: bold;
        padding-bottom: 5px;
    }

#favouriteStore {
    margin-top: 20px;
}

#favouriteStoreDiv {
    padding: 10px 10px 10px 0;
}

    #favouriteStoreDiv h3 {
        float: left;
        padding-left: 25px;
        background: url(Images/user-details.png) no-repeat -952px -40px;
    }

    #favouriteStoreDiv p {
        clear: left;
        float: left;
    }

    #favouriteStoreDiv a {
        float: left;
    }

.FavouriteStoreButton {
    clear: both;
    float: left;
    padding: 10px 10px 10px 0;
}

#nearStores {
    margin-top: 10px;
}

.singleStore {
    margin-bottom: 10px;
}

.singleStoreName {
    float: left;
}

.singleStoreAddress {
    padding: 0 0 5px 0;
}

.singleStoreButt {
    float: right;
}

.mapsStoreDetailsDiv table td {
    padding: 0;
    background: none;
    text-align: left;
    margin-right: 25px;
}

/* Store locator */

.locatorPage {
    margin-top: 20px;
}

    .locatorPage .mapOut {
        width: auto;
        max-width: 1080px;
        margin: auto;
        margin-bottom: 20px;
    }

    .locatorPage .mapContainer {
        position: relative;
        width: auto;
        margin: 0;
    }

        .locatorPage .mapContainer #map {
            height: 500px;
        }

    .locatorPage .logButtons {
        width: auto;
        margin: 0;
    }

    .locatorPage .medButton {
        height: 27px;
        line-height: 37px;
    }

.locatorHeading {
    font-size: 24px;
    color: #323233;
    padding-bottom: 15px;
}

    .locatorHeading span {
        display: block;
        font-size: 14px;
    }

.locatorLegend {
    line-height: 41px;
    color: #666;
    font-weight: bold;
}

    .locatorLegend img {
        vertical-align: middle;
        margin-right: 10px;
    }

    .locatorLegend span {
        margin-right: 30px;
    }

.err404Img {
    width: 318px;
    height: 122px;
    margin: 10px auto;
    background: url(Images/404.png) no-repeat 0 0;
    text-indent: -3000px;
}

.err404 h2 {
    padding: 40px 0 15px 0;
    font-size: 24px;
    text-align: center;
    font-weight: normal;
    color: #444444;
}

.err404 .bigButton {
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

/* Product Page Games Library */

.havelist-wishlist-block {
    margin-top: 4px;
    height: 26px;
}

.wishlist-block, .havelist-block {
    clear: both;
}

.singleProduct .wishlist-block, .singleProduct .havelist-block {
    clear: none;
    float: left;
}

.wishlist-block {
    overflow: auto;
    margin-bottom: 5px;
}

.addTxt {
    line-height: 30px;
}

/* new prod page */
.prodWishBlock {
    float: left;
}

    .prodWishBlock .wishlist-block, .prodWishBlock .havelist-block {
        clear: none;
        float: left;
        overflow: inherit;
        margin: 0;
    }

    .prodWishBlock .havelist-wishlist-block span {
        display: none;
    }

/* wishlist button */

.addToLib {
    background: #636262;
    float: left;
    display: inline-block;
    padding: 4px;
    margin: 0 5px 0 0;
    text-align: center;
}

    .addToLib:hover {
        background: #2e2a24;
    }

    .addToLib i {
        display: inline-block;
        height: 22px;
        width: 26px;
        vertical-align: middle;
        background: url(Images/wishlist-icon.png) no-repeat 0 -161px;
    }

        .addToLib i.haveIco {
            background: url(Images/have-icon.png) no-repeat 0 -160px;
        }

.alreadyLib {
    float: left;
    display: inline-block;
    padding: 4px;
    margin: 0 5px 0 0;
    text-align: center;
    background: #e9e9e9;
}

    .alreadyLib:hover {
        background: #b7b7b7;
    }

    .alreadyLib i {
        display: inline-block;
        height: 22px;
        width: 26px;
        vertical-align: middle;
        background: url(Images/wishlist-icon.png) no-repeat 0 -2px;
    }

        .alreadyLib i.haveIco {
            background: url(Images/have-icon.png) no-repeat 0 -2px;
        }

.addCartBar.fixed .addToLib, .addCartBar.fixed .alreadyLib {
    display: none;
}

.bar-wrapper {
    width: auto;
    height: 15px;
    background: #e7e7e7;
}

    .bar-wrapper .bar {
        position: relative;
        display: block;
        height: 15px;
        background: #ee3124;
        line-height: 15px;
    }

        .bar-wrapper .bar .result {
            position: absolute;
            right: -40px;
            top: 1px;
            color: #333;
        }

            .bar-wrapper .bar .result.switch {
                right: 13px;
                color: #fff;
            }

        .bar-wrapper .bar .bar-delimiter {
            position: absolute;
            right: -10px;
            top: -3px;
            width: 19px;
            height: 23px;
            background: url(../Views/Locale/Content/Images/bar-delimiter.png);
        }

.loyaltyUpgradePrompt a {
    display: block;
    height: 39px;
    line-height: 20px;
    width: 170px;
    padding: 9px 5px 8px 170px;
    margin: 0;
    background: url(../Views/Locale/Content/Images/join-loyalty.png) no-repeat 0 0;
    color: #000;
    font-size: 12px;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    overflow: hidden;
}

    .loyaltyUpgradePrompt a:hover {
        color: #fff;
    }

.loyaltyRem {
    text-align: center;
    margin-top: 16px;
    margin-bottom: -2px;
}

    .loyaltyRem a {
        display: inline-block;
    }

.loyaltyRemRight {
    margin-left: 18px
}

.toTopBtn {
    display: none;
    position: fixed;
    height: 50px;
    line-height: 50px;
    bottom: 15px;
    right: 10px;
    background: #000;
    color: #fff;
    padding: 10px;
    border-radius: 25px;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    z-index: 10
}

/* ==============================DEFAULT SLIDER=============================== */

.imgSliderWindow {
    margin: 10px auto 20px auto;
    padding: 10px 45px;
    height: 308px;
    width: 870px;
    background-color: #333;
    overflow: hidden;
    clear: both;
    background: url(Images/slider.png) no-repeat center 0;
}

    .imgSliderWindow .bx-wrapper {
        position: relative;
    }

#imgSlider {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 308px;
    overflow: hidden;
}

    #imgSlider li a {
        display: block
    }

    #imgSlider li {
        height: 308px;
        overflow: hidden;
    }

.imgSliderWindow .bx-pager {
    display: none;
    float: left;
    clear: left;
    text-align: center;
    width: 871px;
    height: 10px;
    top: -10px;
    position: relative;
}

.imgSliderWindow .pager-link {
    height: 20px;
    width: 50px;
    float: left;
    padding: 0;
    margin-top: 0;
    color: #000;
}

.imgSliderWindow a.pager-link {
    width: 8px;
    height: 14px;
    margin: 4px 4px 0 4px;
    overflow: visible;
    display: block;
    float: left;
    font-size: 1px;
    padding: 0;
    outline: none;
    background: #F00;
    color: #000;
}

    .imgSliderWindow a.pager-link:hover {
        background-position: 0 -13px;
        color: #000;
    }

.imgSliderWindow a.pager-active {
    background-position: 0 5px;
    color: #000;
}

.pager-1 {
    margin-left: 420px !important;
}

.imgSliderWindow .bx-prev, .imgSliderWindow .bx-next {
    position: absolute;
    height: 56px;
    width: 56px;
    top: 50%;
    margin-top: -28px;
    left: -36px;
    right: auto;
    background: url(Images/slider.png) no-repeat -7px -361px;
}

    .imgSliderWindow .bx-prev:active {
        top: 51%;
        left: -34px;
    }

    .imgSliderWindow .bx-prev img, .imgSliderWindow .bx-next img {
        display: none;
    }

.imgSliderWindow .bx-next {
    left: auto;
    right: -36px;
    background-position: -898px -361px;
}

    .imgSliderWindow .bx-next:active {
        top: 51%;
        right: -38px;
    }

#RopisPopup {
    display: none;
    max-width: 450px;
    min-width: 250px;
}

.slider2 {
    width: auto !important;
}

/* ==============================END SLIDER=============================== */


/* banner management */

.dynamicBannerContainer,
.dynamicBannerSlider {
    width: 100%;
}

.dynamicBanner a {
    display: block;
}

.dynamicBanner img {
    display: block;
    height: auto;
    width: 100%;
}

.feedbackForm select, .feedbackForm textarea {
    display: block;
    width: 99%;
    margin-right: 5px;
    background: #fff;
    border: solid 1px #ccc;
    border-radius: 4px;
    color: #000;
    height: 31px;
    line-height: 31px;
    margin: 0 0 15px 0;
}

.feedbackForm textarea {
    width: 98%;
    height: 80px;
}

@media print {
    body * {
        visibility: hidden;
    }

    #printable, #printable * {
        visibility: visible;
    }

    #printable {
        position: absolute;
        left: 0;
        top: 0;
    }
}

.validation-summary-errors {
    margin: 10px 0;
    padding: 10px;
    background: #FFF2F2;
    border: solid 1px #ccc;
}

.ChooseAmount {
    position: relative;
    width: 100%;
}

    .ChooseAmount div.DropDownList {
        width: 15%;
        float: left;
    }

.DropDownList {
    width: 25%;
}

.GiftCardEditor .AmountDropDownList .ChooseAmount .DropDownList {
    float: left;
    display: inline;
}

.OtherAmount {
    width: 29%;
    margin: 0 auto;
    float: left;
}

    .OtherAmount input[type=number] {
        display: inline;
        width: 61%;
        height: 29px;
        line-height: 29px;
        padding-left: 10px;
        margin: 0 0 10px 0;
        font-size: 16px;
        background: #fff;
        border: #ccc solid 1px;
    }

    .OtherAmount input[disabled] {
        background: #f1f1f1;
    }

    .OtherAmount .field-validation-error {
        width: 60%;
        margin-left: 57px;
        white-space: normal;
    }

.Quanity {
    float: left;
    width: 10%;
    white-space: nowrap;
    margin-left: -1px;
}

    .Quanity input[type=number] {
        line-height: 29px;
        padding-left: 10px;
        margin: 0 0 10px 0;
        font-size: 16px;
        background: #fff;
        border: #ccc solid 1px;
        display: inline;
    }

    .Quanity input[disabled] {
        background: #f1f1f1;
    }

    .Quanity .field-validation-error {
        display: block;
        width: 200px;
        margin-left: 49px;
        white-space: normal;
    }

.hopsConfirmation {
    margin-bottom: 20px;
    margin-top: 20px;
}

    .hopsConfirmation .hopsConfirmationIn {
        margin: 0 auto;
        width: 600px;
    }

        .hopsConfirmation .hopsConfirmationIn #homeButton {
            margin: 0 auto;
            margin-top: 10px;
            width: 600px;
            padding-top: 10px;
            border-top: #c3c3c3 solid 1px;
        }

.AmountDropDownList {
    margin-left: 10px;
    margin-right: 10px;
}

.giftCardTotal .addNewGiftCard {
    float: left;
    width: 33.3%;
}

    .giftCardTotal .addNewGiftCard .bigButton {
        float: left;
    }

.giftCardTotal .checkGiftCardBalance {
    float: left;
    width: 33.3%;
    text-align: center;
}

    .giftCardTotal .checkGiftCardBalance .bigButton {
        float: none;
        width: auto;
        margin: auto 0;
    }

.giftCardTotal .addGiftCardToCart {
    float: left;
    width: 33.3%;
}

    .giftCardTotal .addGiftCardToCart .bigButton {
        float: right;
    }

.BonusDiv {
    margin-left: 40px;
    margin-top: 15px;
}

.infoText {
    color: #000000;
    text-decoration: none;
    font-weight: normal;
}

.imgPopUp {
    height: 100%;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    padding: 0;
}

.storehours {
    margin-top: 50px;
}

.borderline {
    border-bottom: #c3c3c3 solid 1px;
    margin-bottom: 20px;
}

.pricetext {
    text-decoration: none;
    color: black;
}

.pricetext1 {
    text-decoration: none;
    color: black;
}

.pricetext2 {
    text-decoration: none;
    color: black;
}

.pricetext:hover {
    color: black;
}

.pricetext1:hover {
    color: black;
}

.pricetext2:hover {
    color: black;
}

.iti-flag {
    background-image: url(images/flags.png) !important;
}

.cacheTime {
    display: none;
}

.prd-bonus {
    box-sizing: border-box;
    width: 48%;
    padding: 2px;
    color: #444;
    font-size: 13px;
    line-height: 17px;
    position: relative;
    margin: 0 0 0 5px;
    float: right;
    font-weight: 700;
}

    .prd-bonus.exclusive {
        width: unset;
        float: unset;
    }

.zoom {
    background: url(Images/exclusive_zoom.png) center center no-repeat #005AC6;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 30px;
    -webkit-transition: background 250ms linear;
    transition: opacity .5s ease-out;
    opacity: 0;
    height: 0;
}

.exclusive-box:hover .zoom {
    opacity: 1;
    height: 30px;
}

.cf:after, .cf:before {
    content: " ";
    display: table;
}

.bonus-header {
    font-size: 17px;
    line-height: 18px;
    color: #0050A5;
    font-weight: 700;
    margin-bottom: 10px;
}

.bonus-header-text {
    margin-top: 9px;
}

.bonus-header img {
    float: left;
    margin: 0 10px 10px 0;
}

.bonus-box {
    position: relative;
    margin: 0 0 0 5px;
}

    .bonus-box.exclusive {
        float: left;
        width: 100%;
        font-family: Arial;
        font-weight: bold;
        color: #444;
        margin-bottom: 50px;
    }

.shadow-box-link {
    position: relative;
    margin: 0 0 5px 5px;
}

.float-right {
    float: right;
}

.cf:after {
    clear: both;
}

.barcodeCouponImage {
    padding: 25px;
    border-radius: 13px;
    width: 60%;
    margin: 0 auto;
    text-align: center;
}

.barcodeCoupon {
    width: 100%;
    height: 100%;
}

.couponTable {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 auto;
}

.noMargin {
    margin: 0;
}

.couponTable td {
    border-top: 1px solid #ddd;
    padding: 8px 12px;
}

.couponTable th {
    padding: 8px 12px;
    text-align: left;
}

.myAccountHeader > span {
    display: none;
}

#myMUCouponSection {
    display: none;
}

.checkValBtn {
    text-decoration: underline;
    color: black;
}

    .checkValBtn:hover {
        text-decoration: underline;
        cursor: pointer;
    }

#couponDetailsTable {
    border-collapse: collapse;
}

.tradeInPopupProduct {
    font-size: 18px;
    font-weight: 900;
    padding: 5px 0 5px 0;
}

.tradeInPopupValid {
    color: #02ab02;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    padding: 5px 0 5px 0;
}

.tradeInPopupNotValid {
    color: red;
    font-size: 22px;
    font-weight: 900;
    text-align: center;
    padding: 5px 0 5px 0;
}

.tradeInPopupDesc {
    font-size: 18px;
    padding: 5px 0 5px 0;
}

.barcodeCouponFullScreen {
    width: 100%;
    height: 100vh;
}

.couponOverlay {
    height: 100%;
    width: 100%;
    display: none;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
}

    .couponOverlay .closebtn {
        position: absolute;
        top: 5px;
        left: 15px;
        font-size: 40px;
        font-family: aria;
        font-weight: 900;
        text-decoration: none;
        color: #818181;
    }

.no-scroll {
    overflow: hidden;
}

.lookupMsg {
    line-height: 21px;
    padding-top: 8px;
    color: #000;
    text-align: center;
}

.hideOnDesktop {
    display: none;
}

.scrollbar::-webkit-scrollbar {
    width: 10px;
}

.scrollbar {
    /* required as firefox and Edge don't support webkit scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #555 #FFF;
}

    .scrollbar::-webkit-scrollbar-track {
        background: #FFF;
    }

    .scrollbar::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        border-radius: 10px;
        background-color: #555;
        border: 3px solid #fff;
    }

.filterType.scrollbar {
    overflow-y: auto;
    max-height: 198px;
}

    .filterType.scrollbar:last-child {
        display: none;
    }

@media (max-width: 959px) {

    .scrollbar::-webkit-scrollbar-thumb {
        border: 3px solid #eee;
    }

    .scrollbar::-webkit-scrollbar-track {
        background: #eee;
    }

    .scrollbar {
        /* required as firefox and Edge don't support webkit scrollbar styling */
        scrollbar-color: #555 #eee;
    }
}

.loadmoreMessage {
    margin-top: 20px;
    text-align: center;
}

.twoColumns {
    margin-bottom: 20px;
}

.loadingbarProgress {
    width: 0%;
    background-color: #9B9F9D;
    height: 3px;
    border-radius: 3px;
}

.loadingbar {
    margin-top: 10px;
    font-size: 12px;
}

.loadingbarMessage {
    text-align: center;
    margin: 0% 30%;
}

.loadingbarText {
    color: #323636;
}

.loadingbarMax {
    background-color: #ECEFEF;
    height: 3px;
    border-radius: 3px;
}

.visible {
    display: inline;
}

.hidden {
    display: none;
}

/* product availability styles for product search and PDP */

.productAvailability {
    display: flex;
    padding: 10px 5px;
    justify-content: center;
    text-align: center;
}

.availabilityImg {
    max-height: 30px;
}

.clickAndCollectActive {
    display: inline-flex;
    align-items: center;
}

.clickAndCollectAvailable {
    display: inline-flex;
    padding-left: 10px;
}

.availableToDownload {
    display: inline-flex;
    padding-left: 10px;
}

.homeDeliveryAvailable {
    display: inline-flex;
}

.homeDeliveryActive {
    display: inline-flex;
    align-items: center;
}

.productSelected img {
    max-height: 25px;
    margin-right: 5px;
}

.productSelected {
    display: flex;
    flex-wrap: wrap;
}

.flex-break {
    flex-basis: 100%;
    height: 0;
}

.productProtection {
    display: flex;
    padding: 5px;
}

    .productProtection label {
        padding: 5px 0 0 5px;
        cursor: default;
    }

        .productProtection label span {
            font-weight: bold;
        }

.productProtectionCheckbox {
    -webkit-appearance: none;
    border: 1px solid #000;
    box-shadow: 0 1px 2px #000000, inset 0 -15px 10px -12px #000000;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05);
    padding: 9px;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    outline: none;
    max-height: 20px;
}

    .productProtectionCheckbox:checked {
        border: 1px solid #adb8c0;
        box-shadow: 0 1px 2px #000000, inset 0 -15px 10px -12px #000000, inset 15px 10px -12px #ffffff;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0 -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
        color: #99a1a7;
    }

        .productProtectionCheckbox:checked:after {
            content: '\2714';
            position: absolute;
            top: 0;
            left: 4px;
        }

.protectionPopup {
    vertical-align: text-top;
}

.xaaLegal {
    background-color: black;
    color: white;
    padding: 15px 15px 15px;
}

    .xaaLegal a {
        text-decoration: none;
        font-size: 16px;
        color: white;
        text-align: center;
    }

.xaaOffer {
    display: inline-block;
    border-style: solid;
    border-width: 1px;
    width: 50%;
    padding: 10px 10px 10px;
    text-transform: none;
}

/* Address Dashboard Validation styles */
#addrForm input.required.valid,
#addrForm select.required.valid {
    border-color: green;
    color: green;
}

#addrForm input.required.input-validation-error,
#addrForm select.required.input-validation-error {
    border-color: red;
    color: red;
}

/* Overide Autofill css */
#addrForm input:-webkit-autofill,
#addrForm input:-webkit-autofill:hover,
#addrForm input:-webkit-autofill:focus,
#addrForm textarea:-webkit-autofill,
#addrForm textarea:-webkit-autofill:hover,
#addrForm textarea:-webkit-autofill:focus,
#addrForm select:-webkit-autofill,
#addrForm select:-webkit-autofill:hover,
#addrForm select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0;
}

#addrForm input.required.valid:-webkit-autofill,
#addrForm input.required.valid:-webkit-autofill:hover,
#addrForm input.required.valid:-webkit-autofill:focus,
#addrForm input.required.valid:-webkit-autofill:active,
#addrForm select.required.valid:-webkit-autofill,
#addrForm select.required.valid:-webkit-autofill:hover,
#addrForm select.required.valid:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-text-fill-color: green;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0;
}

#addrForm input.required.input-validation-error:-webkit-autofill,
#addrForm input.required.input-validation-error:-webkit-autofill:hover,
#addrForm input.required.input-validation-error:-webkit-autofill:focus,
#addrForm input.required.input-validation-error:-webkit-autofill:active,
#addrForm select.required.input-validation-error:-webkit-autofill,
#addrForm select.required.input-validation-error:-webkit-autofill:hover,
#addrForm select.required.input-validation-error:-webkit-autofill:focus {
    border: 1px solid red;
    -webkit-text-fill-color: red;
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    transition: background-color 5000s ease-in-out 0;
}

.validation-icon {
    display: none;
}


#addrForm input.required.valid ~ .validation-icon {
    display: block;
    background-image: url(/Content/ngApp/assets/check-green.png) !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: 16px !important;
    background-position: 98% center !important;
    border-radius: 3px !important;
    height: 11px;
    position: relative;
    top: -30px;
    right: 5px;
    padding: 0;
    margin: 0;
    margin-left: 250px;
}


@media (max-width: 959px) {
    #addrForm input.required.valid ~ .validation-icon {
        top: -35px;
    }
}

/* Search result new sorting header bar css */
.dropdown {
    float: right;
    position: relative;
}

    .dropdown .dropbtn {
        font-size: 17px;
        border: none;
        outline: none;
        color: white;
        padding: 12px 0;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0 8px 16px 0 #000000;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 4;
    right: 0;
}

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px;
        text-decoration: none;
        display: block;
        text-align: left;
        max-width: unset;
    }

.dropdown:hover .dropbtn {
    color: white;
}

.dropdown-content a:hover {
    background-color: #ddd;
    color: black;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdownSort {
    float: right;
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 12px;
    padding-right: 5px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.sortingBarDefault {
    float: left;
    font-size: 17px;
    border: none;
    outline: none;
    color: white;
    padding: 12px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

    .sortingBarDefault strong {
        display: inline;
        color: inherit;
        line-height: inherit;
    }

.sorting p {
    background: #fff;
    padding-left: 0;
    width: 100%;
}

    .sorting p span {
        color: #323233
    }

.sorting .searchSum {
    padding-left: 0;
    font-size: 17px;
}

.searchSum.short {
    display: none;
}

.searchSum.verbose {
    display: inline;
}

.exclusive-content {
    display: flex;
    padding-right: 10px;
}

.MainImg.exclusive-images {
    margin-left: auto;
}

.bonus-box {
    margin: 0;
}

.bonus-header {
    display: flex;
}

.havelist-wishlist-block {
    margin: 0;
    margin-bottom: 40px;
}

.topProdButtons {
    margin: 0;
    padding: 0;
    height: unset;
    width: 100%;
    float: left;
}

.tradeValueBlock {
    margin-bottom: 34px;
    margin-right: 5px;
}

.searchProductTilePromotionTag {
    margin: -5px;
    background: #ee3124;
    color: #fff;
    text-align: center;
    width: 100px;
}

.triangle-right {
    width: 0;
    height: 0;
    margin-top: -18px;
    margin-left: 95px;
    border-top: 9px solid transparent;
    border-left: 18px solid #ee3124;
    border-bottom: 9px solid transparent;
}

.mobileSearchProductInfo {
    display: none;
}

.searchTilePriceMobile {
    display: none;
}

.searchProductTile {
    float: left;
    height: 450px;
    margin: 8px;
    padding: 5px;
    font-weight: bold;
    text-align: center;
    position: relative;
    margin-top: 10px;
    width: 31%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

    .searchProductTile:hover {
        cursor: pointer;
    }

.ribbon-notclickable {
    cursor: default;
}

.searchProductTile h3 {
    font-size: 14px;
    margin-bottom: 7px;
    margin-top: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.searchProductTitle {
    margin-top: unset;
    min-height: 40px;
}

.searchProductTile h3 a {
    color: #383838;
    text-decoration: none;
}

    .searchProductTile h3 a:hover {
        color: #ee3124;
    }

.searchProductTile h3 span {
    font-weight: normal
}

.searchProductTile h4 {
    color: #808080;
    font-size: medium;
    font-weight: normal;
    margin-bottom: 5px;
}

.searchTileLayout h4 {
    width: 100%;
    left: 50%;
    bottom: 90px;
    margin-bottom: unset;
    box-shadow: unset;
}

.ribbonMobileSpacer {
    display: none;
}

.searchProductTile img {
    padding-top: 10px;
}


.searchProductTile .price-new, .searchProductTile .price-presell, .searchProductTile .price-xaa, .searchProductTile .price-loyaltyUpgrade, .searchProductTile .price-dlc, .searchProductTile .price-dlcpresell {
    font-style: unset;
    font-size: 16px;
}

.searchProductTile .price-used {
    color: #f7921e;
    font-style: unset;
    font-size: 16px;
}

.searchProductTile .discounted-new, .searchProductTile .discounted-presell, .searchProductTile .discounted-dlc {
    text-decoration: line-through;
    font-style: unset;
    font-weight: normal;
    font-size: 11px;
}

.searchProductTile .discounted-used {
    text-decoration: line-through;
    font-style: inherit;
    font-weight: normal;
    font-size: 11px;
    color: #f7921e;
}

.searchProductTileActionButton {
    position: absolute;
    width: 90%;
    margin: auto;
    bottom: 20px;
    left: 0;
    right: 0;
}

.searchTileMobile {
    display: none;
}

.searchTileLayout {
    display: block;
    box-shadow: 0 0 15px #000000;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.hideOnTiles {
    display: none;
}

.searchProductImage {
    width: 100%;
    height: 50%;
    position: relative;
}

    .searchProductImage img {
        max-height: 100%;
        max-height: -webkit-fill-available;
        max-height: -moz-available;
        max-height: fill-available;
        max-width: 100%;
        max-width: -webkit-fill-available;
        max-width: -moz-available;
        max-width: fill-available;
        position: absolute;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

.SPTenabled {
    border: 1px solid #ee3124;
    background: #ee3124;
    color: #fff;
}

.SPTdisabled {
    border: 1px solid lightgrey;
    background: lightgrey;
    color: #000;
}

.sptDisabled {
    cursor: default;
}

.checked {
    color: #ee3124;
}

.searchTileLayout .searchTileRating {
    width: 100%;
    bottom: 70px;
    left: 50%;
}

.searchProductAvailability {
    display: flex;
    padding: 10px 5px;
    justify-content: center;
    text-align: center;
    font-size: 12px;
}

.buttonContainer {
    display: flex;
    align-items: center;
}

    .buttonContainer .button {
        width: 50%;
        margin: 3px;
    }

    .buttonContainer a.ropisPop {
        margin: 3px;
    }

.buttonContainerProMember {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.buySection {
    padding-top: 25px;
}

#closeTradeDialog {
    float: right;
}

    #closeTradeDialog img {
        padding-right: 5px;
    }


.searchProductTile .price-xaa {
    min-height: 40px;
}

.searchProductTile .price-xaa-detail {
    display: block;
}

.searchTilePriceMobile {
    min-height: 115px;
}

#scroller {
    clear: both;
}

.exclusive-text {
    flex: 3;
}

.appliedFilters a {
    display: flex;
    position: unset;
    height: unset;
    line-height: unset;
    overflow: unset;
    align-items: center;
    justify-content: space-between;
}

    .appliedFilters a::after {
        float: unset;
        line-height: unset;
    }

.leftBarBlock h3 {
    display: flex;
    justify-content: space-between;
}

.clearAllFilters {
    margin-left: auto;
}

.hide {
    display: none !important;
}

/* Search Results ribbon */

.ribbon {
    font-size: 0.75rem;
    display: grid;
    grid-gap: 2px;
    grid-template-columns: repeat(2, 1fr) 1em;
    position: absolute;
    top: -8px;
    left: 0;
}

    .ribbon a {
        display: contents;
    }

.ribbon__element {
    color: #fff;
    font-weight: 700;
    line-height: 1.25em;
    padding: 0.3em 0.25em 0.3em .5em;
    position: relative;
    text-decoration: none;
}

    .ribbon__element:nth-child(1) {
        background-color: #ee3124;
        z-index: 3;
    }

    .ribbon__element:nth-child(2) {
        background-color: #000;
        z-index: 2;
    }

/* ribbon height is top and bottom padding added to line height*/
.ribbon--gamma .ribbon__element svg {
    height: 1.85em;
    position: absolute;
    top: 0;
}

    /* The left arrow */
    .ribbon--gamma .ribbon__element svg:first-child {
        fill: #fff; /* Define the background image that matches the background color */
        left: 0; /* Stick left arrows to the left side of the ribbon element */
    }

    /* The right arrow */
    .ribbon--gamma .ribbon__element svg:last-child {
        left: 100%;
    }

/* Define the fill color that matches the background color of the first element */
.ribbon--gamma .ribbon__element:nth-child(1) svg:last-child {
    fill: #ee3124;
}

/* Define the fill color that matches the background color of the second element */
.ribbon--gamma .ribbon__element:nth-child(2) svg:last-child {
    fill: #000;
}

.ribbon-dlc {
    font-family: mmfont;
}

.ribbon-clickable {
    cursor: pointer;
}

/* Search Filter Icon */

.searchFilterBtn {
    width: 1rem;
}

/* Side Banners */
.footerBuyNow {
    cursor: pointer;
    position: fixed;
    margin-top: 50px;
    width: 220px;
    height: 660px;
    top: 0;
    left: 50%;
    background-repeat: no-repeat;
    background-image: none;
}

.footerBuyNowLeft {
    margin-left: -700px;
}

.footerBuyNowRight {
    margin-left: 480px;
}


.CustomSkin {
    max-width: 960px;
    margin: 0 auto;
}

    .CustomSkin a {
        height: 2000px;
        position: fixed;
        right: 50%;
        top: 40px;
        width: 200px;
    }

.CustomSkinLeft {
    margin-right: 481px;
}

.CustomSkinRight {
    margin-left: 482px
}

.migrateUserToNewProgram {
    width: 420px;
}

    .upgradeUserToLoyalty .logButtons, .migrateUserToNewProgram .logButtons {
        display: flex;
        justify-content: space-between;
    }

.dlcDetails {
    margin-top: 10px;
}

.descriptionCollapse {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    /* If you change this, you need to change the scrollHeight in core.js */
    max-height: 120px; /* Should be line-clamp times 20px */
}

.descriptionLink {
    text-decoration: underline;
    color: #ee3124;
    cursor: pointer;
    margin-top: 1rem;
    display: block;
}

#prodDescAnchorTag {
    display: block;
    position: relative;
    visibility: hidden;
}

.prodDescAnchorOffset {
    top: -120px;
}

.hideElement {
    display: none;
}

.tooltip {
    position: relative;
    display: inline-block;
    line-height: 18px;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: rgba(0,0,0,0.8);
        color: white;
        text-align: center;
        padding: 5px 0;
        border-radius: 6px;
        left: -250%;
        position: absolute;
        z-index: 1;
    }

.pegiRatingInfo {
    height: 14px;
    width: 14px;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    border: 1px solid #000;
    font-size: 11px;
    font-weight: 400;
    padding-bottom: 1px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
}

#mainImgPrev {
    width: 36px;
    height: 34px;
    float: left;
    margin-top: 20px
}

    #mainImgPrev span {
        display: block;
        width: 36px;
        height: 34px;
        background-image: url(/Content/Images/fancybox_sprite.png);
        background-position: 0 -36px;
    }

#mainImgNext {
    width: 36px;
    height: 34px;
    float: right;
    margin-top: 20px
}

    #mainImgNext span {
        display: block;
        width: 36px;
        height: 34px;
        background-image: url(/Content/Images/fancybox_sprite.png);
        background-position: 0 -72px;
    }

.suggestedPackShots .packshotHidden {
    display: none;
}


.bundleLeftContainer {
    margin-top: 20px;
    text-align: center;
}

.allChosenContainer h3 {
    font-weight: normal;
    margin-bottom: 1em;
}


a.megaButtonPromember {
    display: inline-block;
    vertical-align: middle;
    height: 38px;
    line-height: 38px;
    padding: 0 5px 0 8px;
    text-decoration: none;
    text-align: center;
    font-size: 17px;
    text-transform: uppercase;
    border: solid 2px #ee3124;
    color: #ee3124;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

.bgOverlayWider {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000e6;
    top: 0;
    z-index: 225;
    opacity: 0.35;
}

.bgOverlayWiderAccount {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #000000e6;
    top: 0;
    z-index: 1;
    opacity: 0.35;
}

.quickInputContainerNewNavBar {
    position: relative;
    height: 50px;
    display: flex;
}

    .quickInputContainerNewNavBar a {
        margin-left: 3px;
        padding: 0;
    }

        .quickInputContainerNewNavBar a span {
            padding: 0;
        }

            .quickInputContainerNewNavBar a span em {
                display: block;
                width: 30px;
                height: 30px;
                text-indent: -3000px;
                overflow: hidden;
                background: url(Images/search-icon.png) no-repeat center center;
            }

    .quickInputContainerNewNavBar.active input,
    .quickInputContainerNewNavBar input:focus,
    .quickInputContainerNewNavBar input:valid {
        margin-left: 5px;
        width: 90%;
        display: block;
    }

    .quickInputContainerNewNavBar.inactive input {
        outline: none;
        border: none;
        width: 90%;
        background-color: transparent;
        color: black;
        font-size: 16px;
        padding: 0;
        transition: width 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.33);
        display: none;
    }

    .quickInputContainerNewNavBar a {
        outline: none;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
    }

    .quickInputContainerNewNavBar:focus-within button {
        background-color: slategray;
    }

    .quickInputContainerNewNavBar input:focus + button {
        background-color: slategray;
    }

    .quickInputContainerNewNavBar input:valid + button {
        background-color: slategray;
    }

.ui-autocomplete li.autoSingOld ol {
    right: 315px;
}

.search-box-main {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.quickInputContainerWiderNewNavBar {
    border: solid 1px #c3c3c3;
    background: #fff;
    border-radius: 10px;
    width: 90%;
}

.nav-centre {
    display: flex;
    flex-direction: row-reverse;
    flex-grow: 1;
    margin-right: 5px;
}

.hideSearch {
    display: none;
}

.hidenavCentre {
    display: flex;
}

.hidenavEnd {
    display: none;
}

.fixedNavBarDisplay {
    display: none;
}

.fixedSearchbarDisplay {
    display: block;
}

.searchIconPositionAdjuster {
    padding-top: 5px;
}

.profilePageHeader {
    text-align: center;
    padding: 20px 0;
}

.profilePagedivider {
    background: #c1c1c1;
    height: 1px;
}

.navFixedPositionAligner {
    padding-top: 3px;
    padding-left: 18px;
    cursor: pointer;
}

/*orders online styles*/

.table {
    width: 100%;
    border-collapse: collapse;
}

    .table th {
        border-bottom: 2px solid #d5d5d5;
    }

    .table td {
        padding: 12px 15px;
        border-bottom: 1px dotted #ddd;
        text-align: center;
    }

    .table tbody tr:nth-child(even) {
        background-color: #f5f5f5;
    }

.addressLine1Validation {
    border-color: red;
    color: red;
}

#redirectToProfile a {
    text-decoration: none;
}

/*Cart Icon Changes for the new navbar*/

#lblCartCount {
    font-size: 12px;
    background: #ff0000;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
    margin-right: -15px;
    margin-bottom: -16px;
    z-index: 1;
}

.badge {
    padding-left: 9px;
    padding-right: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px;
}

.badge-warning[href] {
    background-color: #c67605;
}

.navCart {
    color: #323233;
}

.navCartTotal {
    color: #ee3124;
    margin-top: -0.5px;
}

/*********************Account side menu css start*********************/
.accountLogoutContainer {
    position: sticky;
    bottom: 0;
    background-color: #fff;
}

.accountSideMenu {
    height: 100%;
    max-width: 100%;
    width: 448px;
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.10);
    background: #FFFFFF;
    transition: 0.5s;
    margin-right: -448px;
}

.accountMenuOpen {
    margin-right: 0 !important;
}


.loyaltyMember, .loayaltyUserPlanField {
    font-size: 12px;
    color: #636668;
    text-align: center;
    margin-right: 50%;
}

span.userNameAccountSideMenu:first-letter {
    text-transform: uppercase;
}

.accountSideMenu a {
    text-decoration: none;
    color: #212322;
}

a.accountSideMenuListLink:hover,
a.accountLoyaltyUserPlan:hover,
a.accountLogout:hover, a.accountMyOrder:hover, a.accountSideMenuImageListLink:hover {
    background-color: #F5F5F5;
    transition: 0.2s;
}

.accountSideMenuHeader {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.10);
    padding: 23px 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #fff;
}

    .accountSideMenuHeader h2 {
        font-weight: 800;
        font-size: 20px;
        color: #212322;
        margin-left: 45px;
    }

.accountLoyaltyUser {
    margin: 20px 0 20px 55px;
}


.accountLoyaltyUserPlan {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 10px 20px 55px;
    transition: 0.2s;
}

    .accountLoyaltyUserPlan h3 {
        font-size: 20px;
    }

.accountSideMenuList {
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
}

.accountSideMenuListLink {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10px 20px 55px;
    text-decoration: none;
}

.accountMenuCloseIcon {
    background: url(../../Content/Images/CloseBtn.svg) no-repeat;
    margin-top: 1px;
    margin-right: 10px;
    padding: 0 0 0 30px;
    height: 20px;
    background-size: 75%;
    background-position-y: center;
}

.accountMenuArrowIcon {
    background: url(../../Content/Images/ArrowRight.svg) no-repeat;
    width: 30px;
    height: 20px;
    background-size: 50% !important;
    background-position-y: center;
}

.accountSideMenuDivider {
    border-top: 1px solid #dfdbd9;
    width: 90%;
    margin: 25px auto;
}

.loyaltyUserName, .loyaltyUserPlan {
    font-size: 20px;
    font-weight: 700;
    color: #212322;
    display: flex;
}

.accountLogout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: bolder;
    padding: 20px 10px 20px 55px;
    color: red !important;
}
/*********************Account side menu css End*********************/

.loy-mobile-barcode {
    display: none;
}

/*********************Register form css start*********************/

.alignBtnContent {
    text-align: center;
    max-width: -webkit-fill-available;
}

a.loadLoginForm {
    display: flex;
    justify-content: center;
    color: #636668;
}

.horizontalDivider {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #636668;
    line-height: 0.1em;
    margin: 20px 0;
    color: #636668;
}

    .horizontalDivider span {
        background: #fff;
        padding: 0 10px;
    }

.registerArticle .errorMessage::before {
    content: 'X';
    color: white;
    background-color: red;
    border-radius: 100px;
}

.passwordEyeContainer {
    position: relative;
    float: right;
    right: 40px;
    top: -38px;
    height: 39px;
    width: 44px;
}

.passwordEyeButton {
    position: relative;
    right: 0px;
    z-index: 2;
    height: 30px;
    float: right;
    cursor: pointer;
    background: url(/Views/Locale/Content/Images/Loyalty/Eye_Open.svg) no-repeat;
    margin-top: 10px;
}

.passwordOpenEyeAdjust {
    width: 22px;
}

.passwordClosedEyeAdjust {
    width: 25px;
}

/*Birthday Field */


.seperator {
    background-color: #f0f0f0;
}


@media (min-width: 1201px) and (max-width:1279px) {
    .navbar-row {
        width: 78%;
    }
}

@media (min-width: 1280px) and (max-width:1439px) {
    .navbar-row {
        width: 95%;
    }
}

@media (min-width: 1440px) and (max-width:1650px) {
    .navbar-row {
        width: 76%;
    }
}


.newRegisterBlock {
    padding-top: 15px;
    margin: 20px 0;
}

    .newRegisterBlock label {
        display: block;
        padding-bottom: 5px;
    }

.newRegisterBlockIn {
    margin: auto;
}

.newRegisterSection {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
}

.newRegisterArticle {
    background-color: #fff;
    border-radius: 0.5em;
    padding: 3em 2.5em;
    max-width: 100%;
    margin-bottom: 16px;
    text-align: left;
}

    .newRegisterArticle h2 {
        display: block;
        font-size: calc(1.5rem + 1vw);
        margin-bottom: 1.3em;
        text-align: center;
    }

.newRegisterBlockIn .newRegisterForm {
    margin: 0 auto;
    padding-bottom: 10px;
}

.newRegisterBlock fieldset {
    border: none;
    padding: 0;
    margin: 0 auto;
}

.newRegisterInputField {
    margin-bottom: 20px;
    position: relative;
}

    .newRegisterInputField.error input {
        border: solid 1px;
        border-color: red;
    }

.newRegisterBirthdayField.error input {
    border: solid 1px;
    border-color: red;
}

.newRegisterInputField .field-validation-error {
    display: block;
    visibility: visible;
    color: red;
    font-size: small;
    position: relative;
    margin-top: 0px;
}

.newRegisterInputField .field-validation-valid {
    visibility: hidden;
}

.newRegisterBirthdayField {
    margin-bottom: 20px;
}

.newRegisterBirthDay, .newRegisterBirthMonth, .newRegisterBirthYear {
    display: inline-block;
    position: relative;
}

    .newRegisterBirthDay.error input, .newRegisterBirthMonth.error input, .newRegisterBirthYear.error input {
        border: solid 1px red;
        width: 8ch;
    }

.newRegisterLoyaltyDisclaimer {
    margin-bottom: 15px;
    text-align: justify;
}

.newRegisterSection a.newLogonButton.disabled {
    background: #ddd;
    border: solid 2px #ddd;
    color: #616161;
    cursor: default;
    pointer-events: none;
}

.newRegisterInputField input {
    display: block;
    padding-bottom: 0.8em;
    border: 1px solid transparent;
    background: #f0f0f0;
    outline: none;
    font-size: 16px;
    padding-top: 0.5em;
    padding-left: 10px;
    width: 96%;
    border-radius: 5px;
}

.newRegisterDay, .newRegisterMonth, .newRegisterYear {
    border: none;
    padding-bottom: 0.5em;
    background: #f0f0f0;
    outline: none;
    font-size: 16px;
    padding-top: 0.5em;
    padding-left: 10px;
    width: 3.5em;
    border-radius: 5px;
    text-align: left;
}



.newRegisterInputField .passwordEyeContainer {
    position: relative;
    float: right;
    right: 40px;
    top: -38px;
    height: 39px;
    width: 44px;
}

.newRegisterInputField .passwordEyeButton {
    position: relative;
    right: 0px;
    z-index: 2;
    height: 30px;
    float: right;
    cursor: pointer;
    background: url(/Views/Locale/Content/Images/Loyalty/Eye_Open.svg) no-repeat;
    margin-top: 10px;
}

.newRegisterButton {
    background: #ee3124;
    border: solid 1px #ee3124;
    color: #FFF;
    cursor: pointer;
    display: block;
    height: 45%;
    line-height: 33px;
    padding: 0 8px;
    text-decoration: none;
    text-transform: uppercase;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    vertical-align: middle;
    font-family: 'poppins';
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    border-radius: 20px;
    margin: 0 auto;
    margin-top: 20px;
}

    .newRegisterButton:hover {
        color: #ee3124;
        background: #fff;
    }

    .newRegisterButton:disabled {
        border: unset;
        background: #dddddd;
    }

.newRegisterInputField .passwordOpenEyeAdjust {
    width: 22px;
}

.newRegisterInputField .passwordClosedEyeAdjust {
    width: 25px;
}

.newRegisterInputField.error span.errorXdisplay::before {
    content: '!';
    font-weight: bold;
    position: absolute;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: 37px;
    right: 20px;
    padding: 0 7px;
    visibility: visible;
    margin-bottom: 2px;
}

.newRegisterInputField.errorXdisplay::before {
    visibility: hidden;
}

.newRegisterBirthdayField .newRegisterBirthDay.error span.errorXdisplay::before,
.newRegisterBirthdayField .newRegisterBirthMonth.error span.errorXdisplay::before,
.newRegisterBirthdayField .newRegisterBirthYear.error span.errorXdisplay::before {
    content: '!';
    font-weight: bold;
    position: absolute;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: 13px;
    right: 10px;
    padding: 0 7px;
    visibility: visible;
    margin-bottom: 2px;
}

.newRegisterBirthdayField.errorXdisplay::before {
    visibility: hidden;
}

.newRegistrationBlock fieldset {
    border: none;
    padding: 0;
    margin: 0 auto;
}

.newErrorBlock {
    max-width: fit-content;
}

    .newErrorBlock .newErrorMessage {
        display: block;
        margin-top: 5px;
        padding: 2px 6px;
        line-height: 18px;
        vertical-align: middle;
        color: #ee3124;
        background: none;
        word-wrap: break-word;
        text-align: justify;
    }

div .newErrorMessage:before {
    content: 'X';
    color: white;
    background-color: red;
    border-radius: 100px;
    display: inline-block;
    height: 5px;
    line-height: 5px;
    margin: 3px 6px 0 0;
    padding: 3px;
    text-decoration: none;
    background: #ee3124;
    border: solid 2px #ee3124;
    text-transform: uppercase;
    text-shadow: none;
    font-size: 15px;
    font-family: arial;
}

.input-container.error span.errorXdisplay::before {
    content: '!';
    font-weight: bold;
    position: absolute;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: 19px;
    right: 20px;
    padding: 0 7px;
    visibility: visible;
    margin-bottom: 2px;
}

.input-container.errorXdisplay::before {
    visibility: hidden;
}

.loginLabelNormal {
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 1em;
    font-size: 16px;
    transform-origin: 0 0;
    transition: transform 0.2s ease-in-out;
}

.loginLabelSmall {
    position: absolute;
    transform: translateY(-0.95em) scale(0.8);
    color: #636668;
    top: 20px;
    left: 10px;
}


.loginUserNameLabelNormal {
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 1em;
    font-size: 16px;
    transform-origin: 0 0;
    transition: transform 0.2s ease-in-out;
}

.loginPasswordLabelNormal {
    position: absolute;
    pointer-events: none;
    left: 10px;
    top: 1em;
    font-size: 16px;
    transform-origin: 0 0;
    transition: transform 0.2s ease-in-out;
}

.loginUsernameLabelSmall {
    position: absolute;
    transform: translateY(-0.95em) scale(0.8);
    color: #636668;
    top: 20px;
    left: 10px;
}

.loginPasswordLabelSmall {
    position: absolute;
    transform: translateY(-0.95em) scale(0.8);
    color: #636668;
    top: 20px;
    left: 10px;
}

.loginBlock .loginFormInNew {
    padding-bottom: 20px;
    margin: 20px auto;
    /*  width: 400px;*/
    width: auto;
}

.loginBlock .registerSection {
    margin: 0 auto;
}

.registerSection {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 400px;
    width: 100%;
}

.registerArticle {
    background-color: #fff;
    border-radius: 0.5em;
    padding: 3em 2.5em;
    max-width: 100%;
    margin-bottom: 16px;
}

    .registerArticle h2 {
        display: block;
        font-size: calc(1.5rem + 1vw);
        margin-bottom: 1.3em;
        text-align: center;
    }

.registerInputField > input[type="text"], .registerInputField > input[type="password"] {
    display: block;
    padding-bottom: 0.5em;
    border: 1px solid transparent;
    background: #f0f0f0;
    outline: none;
    font-size: 16px;
    padding-top: 0.5em;
    padding-left: 10px;
    width: -webkit-fill-available;
    border-radius: 5px;
}

.registerInputField {
    margin-bottom: 10px;
}

.registerBirthdayField {
    width: 100%;
    margin-bottom: 10px;
}

.registerBithDay, .registerBithMonth, .registerBithYear {
    display: inline-block;
    width: 30%;
}

.registerLoyaltyDisclaimer {
    margin-bottom: 15px;
    text-align: justify;
}

.registerSection a.newLogonButton.disabled {
    background: #ddd;
    border: solid 2px #ddd;
    color: #616161;
    cursor: default;
    pointer-events: none;
}

.registerInputField input {
    display: block;
    padding-bottom: 0.5em;
    border: 1px solid red;
    background: #f0f0f0;
    outline: none;
    font-size: 16px;
    padding-top: 20px;
    padding-left: 10px;
    width: -webkit-fill-available;
    border-radius: 5px;
}

    .registerInputField input.showErrorBorder,
    .registerBirthDay input.showErrorBorder,
    .registerBirthMonth input.showErrorBorder,
    .registerBirthYear input.showErrorBorder {
        border: 1px solid #E81E25;
    }

.registerInputField span.errorXFirstName::before {
    content: 'X';
    position: relative;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: -28px;
    left: 365px;
    padding: 0 5px;
    visibility: visible;
}

.registerInputField span.errorXSurName::before {
    content: 'X';
    position: relative;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: -28px;
    left: 365px;
    padding: 0 5px;
}

.registerInputField span.errorXEmail::before {
    content: 'X';
    position: relative;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: -28px;
    left: 365px;
    padding: 0 5px;
}

.registerInputField span.errorXPassword::before {
    content: 'X';
    position: relative;
    color: white;
    background-color: red;
    border-radius: 100px;
    top: -28px;
    left: 365px;
    padding: 0 5px;
}

.registerInputField .field-validation-error {
    position: relative;
    bottom: 15px;
}



.registerDay, .registerMonth, .registerYear {
    border: none;
    padding-bottom: 0.5em;
    background: #f0f0f0;
    outline: none;
    font-size: 16px;
    padding-top: 0.5em;
    padding-left: 10px;
    width: 3.5em;
    border-radius: 5px;
}

.registerBithDay, .registerBithMonth, .registerBithYear {
    display: inline-block;
}


.registerDay::-webkit-outer-spin-button,
.registerDay::-webkit-inner-spin-button,
.registerMonth::-webkit-outer-spin-button,
.registerMonth::-webkit-inner-spin-button,
.registerYear::-webkit-outer-spin-button,
.registerYear::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.registerBirthDay span.errorXDay::before,
.registerBirthMonth span.errorXMonth::before,
.registerBirthYear span.errorXYear::before {
    content: 'X';
    position: relative;
    color: white;
    background-color: red;
    border-radius: 100px;
    right: 7%;
    padding: 0 5px;
}

.registerInputField span.errorMessageFirstName {
    display: block;
}

.registerInputField span.hideErrorMessageFirstName {
    display: none;
}

.registerInputField span.errorMessageSurName {
    display: block;
}

.registerInputField span.hideErrorMessageSurName {
    display: none;
}

.registerInputField span.errorMessageEmail {
    display: block;
}

.registerInputField span.hideErrorMessageEmail {
    display: none;
}

.registerInputField span.errorMessagePassword {
    display: block;
}

.registerInputField span.hideErrorMessagePassword {
    display: none;
}


.registerInputField span.errorMessageDay {
    display: block;
}

.registerInputField span.hideErrorMessageDay {
    display: none;
}

.registerInputField span.errorMessageMonth {
    display: block;
}

.registerInputField span.hideErrorMessageMonth {
    display: none;
}

.registerInputField span.errorMessageYear {
    display: block;
}

.registerInputField span.hideErrorMessageYear {
    display: none;
}

/* New Framework Css to be Applied Start  */

.frameworkButtons {
    max-width: 300px;
    margin: auto;
}

    .frameworkButtons button {
        margin-top: 5px;
        margin-bottom: 5px;
    }


.frameworkParent-Block {
    margin-top: 15px;
    width: 96%;
    max-width: 440px;
}

.frameworkChild-Block {
    margin: 40px auto;
}

.frameworkTopMessage {
    margin: 12px auto;
    text-align: center;
}

.frameworkParent-Block h2 {
    display: block;
    font-size: calc(1.5rem + 1vw);
    margin-bottom: 1.3em;
    text-align: center;
}

/* New Framework Css to be Applied End  */

/*
    Flexbox Grid
    http://flexboxgrid.com/
    V 6.3.1
    ---
    Notes: Breakpoints were changed to align with ours
*/

.container,
.container-fluid {
    margin-right: auto;
    margin-left: auto;
}

.container-fluid {
    padding-right: 1rem;
    padding-left: 1rem;
}

.row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -0.5rem;
  margin-left: -0.5rem;
  padding: .5rem 0;
}

.row.reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.col.reverse {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}

.col-xs,
.col-xs-1,
.col-xs-2,
.col-xs-3,
.col-xs-4,
.col-xs-5,
.col-xs-6,
.col-xs-7,
.col-xs-8,
.col-xs-9,
.col-xs-10,
.col-xs-11,
.col-xs-12,
.col-xs-offset-0,
.col-xs-offset-1,
.col-xs-offset-2,
.col-xs-offset-3,
.col-xs-offset-4,
.col-xs-offset-5,
.col-xs-offset-6,
.col-xs-offset-7,
.col-xs-offset-8,
.col-xs-offset-9,
.col-xs-offset-10,
.col-xs-offset-11,
.col-xs-offset-12 {
  box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

.col-xs {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  max-width: 100%;
}

.col-xs-1 {
  -ms-flex-preferred-size: 8.33333333%;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}

.col-xs-2 {
  -ms-flex-preferred-size: 16.66666667%;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}

.col-xs-3 {
  -ms-flex-preferred-size: 25%;
  flex-basis: 25%;
  max-width: 25%;
}

.col-xs-4 {
  -ms-flex-preferred-size: 33.33333333%;
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}

.col-xs-5 {
  -ms-flex-preferred-size: 41.66666667%;
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}

.col-xs-6 {
  -ms-flex-preferred-size: 50%;
  flex-basis: 50%;
  max-width: 50%;
}

.col-xs-7 {
  -ms-flex-preferred-size: 58.33333333%;
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}

.col-xs-8 {
  -ms-flex-preferred-size: 66.66666667%;
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}

.col-xs-9 {
  -ms-flex-preferred-size: 75%;
  flex-basis: 75%;
  max-width: 75%;
}

.col-xs-10 {
  -ms-flex-preferred-size: 83.33333333%;
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}

.col-xs-11 {
  -ms-flex-preferred-size: 91.66666667%;
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}

.col-xs-12 {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

.col-xs-offset-0 {
  margin-left: 0;
}

.col-xs-offset-1 {
  margin-left: 8.33333333%;
}

.col-xs-offset-2 {
  margin-left: 16.66666667%;
}

.col-xs-offset-3 {
  margin-left: 25%;
}

.col-xs-offset-4 {
  margin-left: 33.33333333%;
}

.col-xs-offset-5 {
  margin-left: 41.66666667%;
}

.col-xs-offset-6 {
  margin-left: 50%;
}

.col-xs-offset-7 {
  margin-left: 58.33333333%;
}

.col-xs-offset-8 {
  margin-left: 66.66666667%;
}

.col-xs-offset-9 {
  margin-left: 75%;
}

.col-xs-offset-10 {
  margin-left: 83.33333333%;
}

.col-xs-offset-11 {
  margin-left: 91.66666667%;
}

.start-xs {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  text-align: start;
}

.center-xs {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.end-xs {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  text-align: end;
}

.top-xs {
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.middle-xs {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.bottom-xs {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.around-xs {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

.between-xs {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.first-xs {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.last-xs {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

@media only screen and (max-width: 568px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media only screen and (min-width: 569px) {
    .container {
        width: 90%;
    }

    .col-sm,
    .col-sm-1,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-offset-0,
    .col-sm-offset-1,
    .col-sm-offset-2,
    .col-sm-offset-3,
    .col-sm-offset-4,
    .col-sm-offset-5,
    .col-sm-offset-6,
    .col-sm-offset-7,
    .col-sm-offset-8,
    .col-sm-offset-9,
    .col-sm-offset-10,
    .col-sm-offset-11,
    .col-sm-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .col-sm {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-sm-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-sm-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-sm-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-sm-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-sm-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-sm-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-sm-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-sm-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-sm-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-sm {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }

    .center-sm {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .end-sm {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }

    .top-sm {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .middle-sm {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .bottom-sm {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .around-sm {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .between-sm {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .first-sm {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }

    .last-sm {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}

@media only screen and (min-width: 959px) {
    .container {
        width: 960px;
    }

    .col-md,
    .col-md-1,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-offset-0,
    .col-md-offset-1,
    .col-md-offset-2,
    .col-md-offset-3,
    .col-md-offset-4,
    .col-md-offset-5,
    .col-md-offset-6,
    .col-md-offset-7,
    .col-md-offset-8,
    .col-md-offset-9,
    .col-md-offset-10,
    .col-md-offset-11,
    .col-md-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }

    .col-md {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        max-width: 100%;
    }

    .col-md-1 {
        -ms-flex-preferred-size: 8.33333333%;
        flex-basis: 8.33333333%;
        max-width: 8.33333333%;
    }

    .col-md-2 {
        -ms-flex-preferred-size: 16.66666667%;
        flex-basis: 16.66666667%;
        max-width: 16.66666667%;
    }

    .col-md-3 {
        -ms-flex-preferred-size: 25%;
        flex-basis: 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex-preferred-size: 33.33333333%;
        flex-basis: 33.33333333%;
        max-width: 33.33333333%;
    }

    .col-md-5 {
        -ms-flex-preferred-size: 41.66666667%;
        flex-basis: 41.66666667%;
        max-width: 41.66666667%;
    }

    .col-md-6 {
        -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
        max-width: 50%;
    }

    .col-md-7 {
        -ms-flex-preferred-size: 58.33333333%;
        flex-basis: 58.33333333%;
        max-width: 58.33333333%;
    }

    .col-md-8 {
        -ms-flex-preferred-size: 66.66666667%;
        flex-basis: 66.66666667%;
        max-width: 66.66666667%;
    }

    .col-md-9 {
        -ms-flex-preferred-size: 75%;
        flex-basis: 75%;
        max-width: 75%;
    }

    .col-md-10 {
        -ms-flex-preferred-size: 83.33333333%;
        flex-basis: 83.33333333%;
        max-width: 83.33333333%;
    }

    .col-md-11 {
        -ms-flex-preferred-size: 91.66666667%;
        flex-basis: 91.66666667%;
        max-width: 91.66666667%;
    }

    .col-md-12 {
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        max-width: 100%;
    }

    .col-md-offset-0 {
        margin-left: 0;
    }

    .col-md-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-md-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-md-offset-3 {
        margin-left: 25%;
    }

    .col-md-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-md-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-md-offset-6 {
        margin-left: 50%;
    }

    .col-md-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-md-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-md-offset-9 {
        margin-left: 75%;
    }

    .col-md-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-md-offset-11 {
        margin-left: 91.66666667%;
    }

    .start-md {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        text-align: start;
    }

    .center-md {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        text-align: center;
    }

    .end-md {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        text-align: end;
    }

    .top-md {
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
    }

    .middle-md {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    .bottom-md {
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .around-md {
        -ms-flex-pack: distribute;
        justify-content: space-around;
    }

    .between-md {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    .first-md {
        -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
        order: -1;
    }

    .last-md {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }
}

@media only screen and (min-width: 1279px) {
  .container {
    width: 1280px;
  }

  .col-lg,
  .col-lg-1,
  .col-lg-2,
  .col-lg-3,
  .col-lg-4,
  .col-lg-5,
  .col-lg-6,
  .col-lg-7,
  .col-lg-8,
  .col-lg-9,
  .col-lg-10,
  .col-lg-11,
  .col-lg-12,
  .col-lg-offset-0,
  .col-lg-offset-1,
  .col-lg-offset-2,
  .col-lg-offset-3,
  .col-lg-offset-4,
  .col-lg-offset-5,
  .col-lg-offset-6,
  .col-lg-offset-7,
  .col-lg-offset-8,
  .col-lg-offset-9,
  .col-lg-offset-10,
  .col-lg-offset-11,
  .col-lg-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .col-lg {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    max-width: 100%;
  }

  .col-lg-1 {
    -ms-flex-preferred-size: 8.33333333%;
    flex-basis: 8.33333333%;
    max-width: 8.33333333%;
  }

  .col-lg-2 {
    -ms-flex-preferred-size: 16.66666667%;
    flex-basis: 16.66666667%;
    max-width: 16.66666667%;
  }

  .col-lg-3 {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    -ms-flex-preferred-size: 33.33333333%;
    flex-basis: 33.33333333%;
    max-width: 33.33333333%;
  }

  .col-lg-5 {
    -ms-flex-preferred-size: 41.66666667%;
    flex-basis: 41.66666667%;
    max-width: 41.66666667%;
  }

  .col-lg-6 {
    -ms-flex-preferred-size: 50%;
    flex-basis: 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    -ms-flex-preferred-size: 58.33333333%;
    flex-basis: 58.33333333%;
    max-width: 58.33333333%;
  }

  .col-lg-8 {
    -ms-flex-preferred-size: 66.66666667%;
    flex-basis: 66.66666667%;
    max-width: 66.66666667%;
  }

  .col-lg-9 {
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    -ms-flex-preferred-size: 83.33333333%;
    flex-basis: 83.33333333%;
    max-width: 83.33333333%;
  }

  .col-lg-11 {
    -ms-flex-preferred-size: 91.66666667%;
    flex-basis: 91.66666667%;
    max-width: 91.66666667%;
  }

  .col-lg-12 {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    max-width: 100%;
  }

  .col-lg-offset-0 {
    margin-left: 0;
  }

  .col-lg-offset-1 {
    margin-left: 8.33333333%;
  }

  .col-lg-offset-2 {
    margin-left: 16.66666667%;
  }

  .col-lg-offset-3 {
    margin-left: 25%;
  }

  .col-lg-offset-4 {
    margin-left: 33.33333333%;
  }

  .col-lg-offset-5 {
    margin-left: 41.66666667%;
  }

  .col-lg-offset-6 {
    margin-left: 50%;
  }

  .col-lg-offset-7 {
    margin-left: 58.33333333%;
  }

  .col-lg-offset-8 {
    margin-left: 66.66666667%;
  }

  .col-lg-offset-9 {
    margin-left: 75%;
  }

  .col-lg-offset-10 {
    margin-left: 83.33333333%;
  }

  .col-lg-offset-11 {
    margin-left: 91.66666667%;
  }

  .start-lg {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start;
  }

  .center-lg {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }

  .end-lg {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end;
  }

  .top-lg {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .middle-lg {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .bottom-lg {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
  }

  .around-lg {
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .between-lg {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .first-lg {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
  }

  .last-lg {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
}
@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.splide__track--fade>.splide__list>.splide__slide{margin:0!important;opacity:0;z-index:0}.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}.splide--rtl{direction:rtl}.splide__track--ttb>.splide__list{display:block}.splide__container{box-sizing:border-box;position:relative}.splide__list{backface-visibility:hidden;display:-ms-flexbox;display:flex;height:100%;margin:0!important;padding:0!important}.splide.is-initialized:not(.is-active) .splide__list{display:block}.splide__pagination{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:center;justify-content:center;margin:0;pointer-events:none}.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}.splide:not(.is-overflow) .splide__pagination{display:none}.splide__progress__bar{width:0}.splide{position:relative;visibility:hidden}.splide.is-initialized,.splide.is-rendered{visibility:visible}.splide__slide{backface-visibility:hidden;box-sizing:border-box;-ms-flex-negative:0;flex-shrink:0;list-style-type:none!important;margin:0;position:relative}.splide__slide img{vertical-align:bottom}.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}.splide__toggle.is-active .splide__toggle__pause{display:inline}.splide__track{overflow:hidden;position:relative;z-index:0}
/**
---
Customs Styles
for SplideJS
---
Last modified: 18/05/2022
*/


/* -- wrapper --*/

.splide__wrapper--carousel,
.splide__wrapper--slider {
  position: relative;
}

    /* -- wrapper: avoid layout shift -- */

    .splide__wrapper--carousel > .product-carousel {
        min-height: 330px;
    }

/* -- container: make image responsive -- */

splide__slide__container img {
    display: block;
    width: 100%;
    height: auto;
}


/* -- arrow --*/

.splide__arrow {
  -ms-flex-align: center;
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  height: 2.5em;
  -ms-flex-pack: center;
  justify-content: center;
  opacity: 0.7;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5em;
  z-index: 1;
}
.splide__arrow svg {
  fill: #000;
  height: 2em;
  width: 2em;
  transition: fill .5s ease;
}
.splide__arrow:hover {
  opacity: 0.9;
}
.splide__arrow:focus {
  outline: none;
}
.splide__arrow:disabled {
  opacity: 0.1;
  cursor: default;
}
.splide__arrow--prev {
  left: 1em;
}
.splide__arrow--prev svg {
  transform: scaleX(-1);
}
.splide__arrow--next {
  right: 1em;
}


/* -- arrow : custom class --*/

.splide__arrow.box-rounded {
  background: white;
  opacity: 1;
  height: 34px;
  width: 34px;
  box-shadow: 0 0 9px rgba(0,0,0,20%);
  transform: none;
  margin-top: 17px;
}
.splide__arrow.box-rounded svg {
  fill: #000;
  height: 1.5em;
  width: 1.5em;
}
.splide__arrow.box-rounded:disabled {
  visibility: hidden;
  cursor: default;
}

/* -- arrow : hide when carousel does not have enough slides // not correctly working
.splide:not(.is-overflow) .splide__arrows {
    display: none;
}
 --*/

/* -- pagination --*/

.splide__pagination {
  bottom: 0.5em;
  left: 0;
  padding: 0 1em;
  position: absolute;
  right: 0;
  z-index: 1;
}
.splide__pagination__page {
  background: #ccc;
  border: 0;
  border-radius: 50%;
  display: inline-block;
  height: 8px;
  margin: 3px;
  opacity: 0.7;
  padding: 0;
  transition: transform 0.2s linear;
  width: 8px;
}
.splide__pagination__page.is-active {
  background: #fff;
  transform: scale(1.4);
}
.splide__pagination__page:hover {
  cursor: pointer;
  opacity: 0.9;
}
.splide__pagination__page:focus {
  outline: none;
}


/* -- progress --*/

.splide__progress {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 1;
}

.splide__progress__bar {
  background: #e81e25;
  height: 3px;
}



/* -- modifiers --*/

.splide.is-dark .splide__arrow svg {
  fill: #fff;
}
.splide.is-light .splide__arrow svg {
  fill: #333;
}
.splide.is-dark .splide__pagination__page.is-active {
  background: #fff;
}
.splide.is-light .splide__pagination__page.is-active {
  background: #333;
}


/* -- adjustements for wrapper --*/

.splide__wrapper--carousel .splide__track {
  padding-bottom: 1em;
}

.splide__wrapper--slider .splide__arrow--prev {
  left: 2em;
}
.splide__wrapper--slider .splide__arrow--next {
  right: 2em;
}
.splide__wrapper--carousel .splide__arrow--prev {
  left: 1em;
}
.splide__wrapper--carousel .splide__arrow--next {
  right: 1em;
}
.splide__wrapper--carousel .splide__pagination__page.is-active {
  background: #aaa;
}

.splide__wrapper--carousel .splide__pagination {
  bottom: 0;
}


/* -- gradient on track --*/

@media (min-width: 960px) {
  .splide__wrapper--carousel .splide__track::before,
  .splide__wrapper--carousel .splide__track::after {
    content: ' ';
    display: block;
    position: absolute;
    width: 4em;
    height: 100%;
    top: 0;
    bottom: 0;
    z-index: 1;
  }
  .splide__wrapper--carousel .splide__track::before {
    left: 0;
    background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  }
  .splide__wrapper--carousel .splide__track::after {
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  }
}


/* -- custom pagination -- */

.splide__pagination--scrollbar {
  font-size: 0;
  margin: auto!important;
  width: 60vw;
  overflow: hidden;
  background: #eee;
  border-radius: 12px;
}
.splide__pagination--scrollbar li {
  flex: auto
}
.splide__pagination__page--scrollbar {
  margin: 0;
  border-radius: 6px;
  width: 100%;
  height: 6px;
  background: #eee;
  transition: background-color .1s ease;
}
.splide__pagination__page--scrollbar.is-active {
  background: #aaa;
  transform: scale(1);
}


/* --- responsive -- */

@media (max-width: 959px) {
  .splide__wrapper--carousel,
  .splide__wrapper--slider {
    position: relative;
    margin: 0 -20px;
  }
  .splide__wrapper--slider .splide__arrow--prev {
    left: 1em;
  }
  .splide__wrapper--slider .splide__arrow--next {
    right: 1em;
  }
}



/* -- additional styles -- */

.splide--nav
  > .splide__slider
  > .splide__track
  > .splide__list
  > .splide__slide,
.splide--nav > .splide__track > .splide__list > .splide__slide {
  cursor: pointer;
}
.splide--nav
  > .splide__slider
  > .splide__track
  > .splide__list
  > .splide__slide:focus,
.splide--nav > .splide__track > .splide__list > .splide__slide:focus {
  outline: none;
}


.splide--rtl > .splide__arrows .splide__arrow--prev,
.splide--rtl
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--prev,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--prev {
  left: auto;
  right: 1em;
}
.splide--rtl > .splide__arrows .splide__arrow--prev svg,
.splide--rtl
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--prev
  svg,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--prev svg {
  transform: scaleX(1);
}
.splide--rtl > .splide__arrows .splide__arrow--next,
.splide--rtl
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--next,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--next {
  left: 1em;
  right: auto;
}
.splide--rtl > .splide__arrows .splide__arrow--next svg,
.splide--rtl
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--next
  svg,
.splide--rtl > .splide__track > .splide__arrows .splide__arrow--next svg {
  transform: scaleX(-1);
}
.splide--ttb > .splide__arrows .splide__arrow,
.splide--ttb
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow {
  left: 50%;
  transform: translate(-50%);
}
.splide--ttb > .splide__arrows .splide__arrow--prev,
.splide--ttb
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--prev,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--prev {
  top: 1em;
}
.splide--ttb > .splide__arrows .splide__arrow--prev svg,
.splide--ttb
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--prev
  svg,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--prev svg {
  transform: rotate(-90deg);
}
.splide--ttb > .splide__arrows .splide__arrow--next,
.splide--ttb
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--next,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--next {
  bottom: 1em;
  top: auto;
}
.splide--ttb > .splide__arrows .splide__arrow--next svg,
.splide--ttb
  > .splide__slider
  > .splide__track
  > .splide__arrows
  .splide__arrow--next
  svg,
.splide--ttb > .splide__track > .splide__arrows .splide__arrow--next svg {
  transform: rotate(90deg);
}
.splide--ttb > .splide__pagination,
.splide--ttb > .splide__slider > .splide__pagination {
  bottom: 0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  left: auto;
  padding: 1em 0;
  right: 0.5em;
  top: 0;
}

@font-face {
  font-family: 'fontello';
  src: url('/content/fonts/fontello.eot?90259361');
  src: url('/content/fonts/fontello.eot?90259361#iefix') format('embedded-opentype'),
       url('/content/fonts/fontello.woff2?90259361') format('woff2'),
       url('/content/fonts/fontello.woff?90259361') format('woff'),
       url('/content/fonts/fontello.ttf?90259361') format('truetype'),
       url('/content/fonts/fontello.svg?90259361#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('/content/fonts/fontello.svg?90259361#fontello') format('svg');
  }
}
*/
[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: never;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-alert:before { content: '\21'; } /* '!' */
.icon-ok-circled:before { content: '\2a'; } /* '*' */
.icon-plus-circle:before { content: '\2b'; } /* '+' */
.icon-minus-circle:before { content: '\2d'; } /* '-' */
.icon-angle-left:before { content: '\31'; } /* '1' */
.icon-angle-up:before { content: '\33'; } /* '3' */
.icon-angle-down:before { content: '\34'; } /* '4' */
.icon-arrow-left:before { content: '\3c'; } /* '<' */
.icon-arrow-right:before { content: '\3e'; } /* '>' */
.icon-help:before { content: '\3f'; } /* '?' */
.icon-alarm:before { content: '\41'; } /* 'A' */
.icon-birthday:before { content: '\42'; } /* 'B' */
.icon-calendar:before { content: '\43'; } /* 'C' */
.icon-doc:before { content: '\44'; } /* 'D' */
.icon-clipboard:before { content: '\45'; } /* 'E' */
.icon-flag:before { content: '\46'; } /* 'F' */
.icon-game:before { content: '\47'; } /* 'G' */
.icon-home:before { content: '\48'; } /* 'H' */
.icon-location:before { content: '\4c'; } /* 'L' */
.icon-mail:before { content: '\4d'; } /* 'M' */
.icon-music:before { content: '\4e'; } /* 'N' */
.icon-picture:before { content: '\50'; } /* 'P' */
.icon-off:before { content: '\51'; } /* 'Q' */
.icon-calc:before { content: '\52'; } /* 'R' */
.icon-search:before { content: '\53'; } /* 'S' */
.icon-trophy:before { content: '\54'; } /* 'T' */
.icon-user:before { content: '\55'; } /* 'U' */
.icon-video:before { content: '\56'; } /* 'V' */
.icon-globe:before { content: '\57'; } /* 'W' */
.icon-edit:before { content: '\65'; } /* 'e' */
.icon-facebook:before { content: '\66'; } /* 'f' */
.icon-info:before { content: '\69'; } /* 'i' */
.icon-instagram:before { content: '\6e'; } /* 'n' */
.icon-expand:before { content: '\6f'; } /* 'o' */
.icon-trash:before { content: '\72'; } /* 'r' */
.icon-twitter:before { content: '\74'; } /* 't' */
.icon-upload-cloud:before { content: '\75'; } /* 'u' */
.icon-cancel-circled:before { content: '\78'; } /* 'x' */
.icon-ok:before { content: '\2713'; } /* '✓' */
.icon-cancel:before { content: '\2717'; } /* '✗' */
.icon-star:before { content: '\e800'; } /* '' */
.icon-minus:before { content: '\e801'; } /* '' */
.icon-warning:before { content: '\e802'; } /* '' */
.icon-delivery:before { content: '\e803'; } /* '' */
.icon-heart:before { content: '\e804'; } /* '' */
.icon-heart-empty:before { content: '\e805'; } /* '' */
.icon-star-empty:before { content: '\e806'; } /* '' */
.icon-plus:before { content: '\e808'; } /* '' */
.icon-map:before { content: '\e809'; } /* '' */
.icon-store:before { content: '\e80a'; } /* '' */
.icon-phone:before { content: '\e80b'; } /* '' */
.icon-print:before { content: '\e80c'; } /* '' */
.icon-users:before { content: '\e810'; } /* '' */
.icon-camera:before { content: '\e814'; } /* '' */
.icon-download:before { content: '\e819'; } /* '' */
.icon-chat:before { content: '\e81d'; } /* '' */
.icon-mobile:before { content: '\e81e'; } /* '' */
.icon-clock:before { content: '\e81f'; } /* '' */
.icon-lamp:before { content: '\e820'; } /* '' */
.icon-cart:before { content: '\e821'; } /* '' */
.icon-bag:before { content: '\e822'; } /* '' */
.icon-comment:before { content: '\e823'; } /* '' */
.icon-vcard:before { content: '\e824'; } /* '' */
.icon-credit-card:before { content: '\e825'; } /* '' */
.icon-ticket:before { content: '\e826'; } /* '' */
.icon-arrow-down:before { content: '\e82c'; } /* '' */
.icon-arrow-up:before { content: '\e82f'; } /* '' */
.icon-share:before { content: '\e830'; } /* '' */
.icon-menu:before { content: '\e831'; } /* '' */
.icon-tag:before { content: '\e832'; } /* '' */
.icon-filter:before { content: '\e834'; } /* '' */
.icon-key:before { content: '\e838'; } /* '' */
.icon-address:before { content: '\f0f3'; } /* '' */
.icon-angle-right:before { content: '\f64a'; } /* '' */

/*
   Animations
*/
.animate-spin {
    -moz-animation: spin 2s infinite linear;
    -o-animation: spin 2s infinite linear;
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
    display: inline-block;
}

.animate-rolling {
    -moz-animation: rolling 1s infinite linear;
    -o-animation: rolling 1s infinite linear;
    -webkit-animation: rolling 1s infinite linear;
    animation: rolling 1s infinite linear;
    display: inline-block;
}



@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-o-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@-ms-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}

@keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -moz-transform: rotate(359deg);
        -o-transform: rotate(359deg);
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}


@keyframes rolling {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    30% {
        opacity: 1;
        transform: translateX(50%);
    }

    50% {
        opacity: 0;
        transform: translateX(200%);
    }

    50.001% {
        opacity: 0;
        transform: translateX(-100%);
    }

    70% {
        opacity: 1;
        transform: translateX(-50%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes skeleton-loading {
    from {
        background-position: 100% 50%;
    }

    to {
        background-position: 0 50%;
    }
}

/*
----
UI Framework
----
*/


/*
-------
Typography
-------
---
*/


/* --- text : modifiers --- */

.text-left {
    text-align: left;
}

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

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

.text-center ul,
.text-center ol {
    text-align: left;
    margin: auto;
    max-width: 90%;
}

.text-normal {
    text-transform: none !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

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

.text-break {
    display: block; /* to force a line break on a span/em or strong */
}

/* -- text : color -- */

.text-lighter {
    color: #d6d7d6;
}

/* -- text : size -- */

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

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

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

.text-smaller {
    font-size: .85em; /* size control relative to parent */
}

.text-larger {
    font-size: 1.2em; /* size control relative to parent */
}

/* --- headlines --- */

h1.headline,
h2.headline,
h3.headline,
h4.headline,
h5.headline {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.10;
    padding: 0.5em 0;
    color: #212322;
}

h4.subline,
h5.subline,
p.subline {
    font-family: "Open Sans", sans-serif;
    font-style: normal;
    padding: 0.2em 0;
}

h4.subline,
h5.subline,
p.subline {
    font-weight: 500;
    line-height: 1;
    color: #323636;
}

p.lead {
    font-size: 1.2em;
    font-style: normal;
    line-height: 1.2;
    padding-bottom: .2em;
}

/* --- headlines : nesting --- */

h1.headline > strong,
h2.headline > strong,
h3.headline > strong,
h4.headline > strong,
h5.headline > strong,
h4.subline > strong,
h5.subline > strong {
    color: #e81e25;
    font-style: normal;
    font-weight: bold;
}

h1.headline > em,
h2.headline > em,
h3.headline > em,
h4.headline > em,
h5.headline > em,
h4.subline > em,
h5.subline > em {
    color: #636668;
    font-style: normal;
    font-weight: normal;
}

/* --- headlines: sizes (default) --- */

h1.headline,
h2.headline {
    font-size: 3rem; /* fallback for legacy browsers */
    font-size: clamp(2.5rem, calc(2rem + 1vw), 3.5rem);
}

h3.headline,
h4.headline {
    font-size: 2rem; /* fallback for legacy browsers */
    font-size: clamp(1.6em, calc(1rem + 1vw), 2.2rem);
}

h5.headline {
    font-size: 1.4rem; /* fallback for legacy browsers */
    font-size: clamp(1.2em, calc(.5rem + 1vw), 1.4rem);
}

h4.subline,
h5.subline {
    font-size: 1.4rem;
}

p.subline {
    font-size: 1.2rem;
}

/* --- headlines: sizes (modifier) --- */

h1.headline.text-small,
h2.headline.text-small,
h3.headline.text-small,
h4.headline.text-small,
h5.headline.text-small {
    font-size: 1.4rem; /* fallback for legacy browsers */
    font-size: clamp(1.2em, calc(.5rem + 1vw), 1.4rem);
}

h1.headline.text-medium,
h2.headline.text-medium,
h3.headline.text-medium,
h4.headline.text-medium,
h5.headline.text-medium {
    font-size: 2rem; /* fallback for legacy browsers */
    font-size: clamp(1.6em, calc(1rem + 1vw), 2.2rem);
}

h1.headline.text-large,
h2.headline.text-large,
h3.headline.text-large,
h4.headline.text-large,
h5.headline.text-large {
    font-size: 3rem; /* fallback for legacy browsers */
    font-size: clamp(2.5rem, calc(2rem + 1vw), 3.5rem);
}

h4.subline.text-small,
h5.subline.text-small,
p.subline.text-small {
    font-size: 1.2rem;
}

h4.subline.text-medium,
h5.subline.text-medium,
p.subline.text-medium {
    font-size: 1.4rem;
}

h4.subline.text-large,
h5.subline.text-large,
p.subline.text-large {
    font-size: 1.6rem;
}

h2.headline > .text-larger,
h3.headline > .text-larger,
h4.headline > .text-larger {
    font-size: 1.5em; /* size control relative to parent */
}

h2.headline > .text-smaller,
h3.headline > .text-smaller,
h4.headline > .text-smaller {
    font-size: 0.85em; /* size control relative to parent */
}

/* --- headlines : colors (modifiers) --- */

h1.headline.text-lighter,
h2.headline.text-lighter,
h3.headline.text-lighter,
h4.headline.text-lighter,
h5.headline.text-lighter {
    color: #636668;
}

h4.subline.text-lighter,
h5.subline.text-lighter,
p.subline.text-lighter {
    color: #636668;
}

*.is-light h1.headline,
*.is-light h2.headline,
*.is-light h3.headline,
*.is-light h4.headline,
*.is-light h5.headline,
*.is-light h4.subline,
*.is-light h5.subline,
*.is-light p.subline,
*.is-light p.lead {
    color: #000;
}

*.is-red h1.headline,
*.is-red h2.headline,
*.is-red h3.headline,
*.is-red h4.headline,
*.is-red h5.headline,
*.is-red h4.subline,
*.is-red h5.subline,
*.is-red p.subline,
*.is-red p.lead,
*.is-dark h1.headline,
*.is-dark h2.headline,
*.is-dark h3.headline,
*.is-dark h4.headline,
*.is-dark h5.headline,
*.is-dark h4.subline,
*.is-dark h5.subline,
*.is-dark p.subline,
*.is-dark p.lead,
*.is-red *.subline > strong,
*.is-red *.headline > strong,
*.is-red *.headline > em {
    color: #fff;
}

@media (min-width: 960px) {
    p.lead {
        font-size: 1.4em
    }
}


/*
-------
Link
-------
*/

a.link {
    display: inline-block;
    color: #e81e25;
    text-decoration: none;
    font-weight: normal;
    line-height: 1;
    transition: 0.1s ease;
}

    a.link:hover {
        color: #bf1218;
        text-decoration: none;
    }



a.link-button {
    color: #636668;
    font-size: 14px;
    padding: 0.75em 1em;
}

    a.link-button::after {
        position: absolute;
        font-family: "fontello";
        content: ">";
        opacity: 0;
        transition: 0.1s ease;
    }

    a.link-button:hover::after {
        transform: translateX(4px);
        opacity: 1;
    }

    a.link-button:hover {
        color: #e81e25;
        text-decoration: none;
    }


/*
-------
Colors
-------
*/

.text-warning {
    color: #fccf30;
}

.text-danger {
    color: #f44336;
}

.text-success {
    color: #4caf50;
}

.text-black,
span.black,
strong.black,
em.black {
    color: #212322;
}

.text-grey,
span.grey,
strong.grey,
em.grey {
    color: #636668;
}

.text-lightgrey,
span.lightgrey,
strong.lightgrey,
em.lightgrey {
    color: #d6d7d6;
}

.text-red,
span.red,
strong.red,
em.red {
    color: #e81e25;
}

.text-white,
span.white,
strong.white,
em.white {
    color: #fff;
}

.text-orange,
.text-crash,
span.orange,
strong.orange,
em.orange {
    color: #ff8200;
}

.text-yellow,
.text-waka,
span.yellow,
strong.yellow,
em.yellow {
    color: #ffc21a;
}

.text-green,
.text-creeper,
span.green,
strong.green,
em.green {
    color: #00b176;
}

.text-blue,
.text-mega,
span.blue,
strong.blue,
em.blue {
    color: #2a85e8;
}

.text-violet,
.text-jinx,
span.violet,
strong.violet,
em.violet {
    color: #5e53c4;
}

.bg-black {
    background-color: #212322;
}

.bg-grey {
    background-color: #636668;
}

.bg-lightgrey {
    background-color: #d6d7d6;
}

.bg-red {
    background-color: #e81e25;
}

.bg-white {
    background-color: #fff;
}

.bg-orange,
.bg-crash {
    background-color: #ff8200;
}

.bg-yellow,
.bg-waka {
    background-color: #ffc21a;
}

.bg-green,
.bg-creeper {
    background-color: #00b176;
}

.bg-blue,
.bg-mega {
    background-color: #2a85e8;
}

.bg-violet,
.bg-jinx {
    background-color: #5e53c4;
}


/*
------
Icons (additional to fontello)
----
*/

/* -- status icon --*/
.icon-availability {
    width: .8em;
    height: .8em;
    display: inline-block;
    border-radius: .8em;
    margin-right: 3px;
    background-color: grey;
    vertical-align: baseline;
}

    .icon-availability.green,
    .icon-availability.available {
        color: #00b176;
        background-color: #00b176;
    }

    .icon-availability.yellow,
    .icon-availability.limited {
        color: #ffc21a;
        background-color: #ffc21a;
    }

    .icon-availability.red,
    .icon-availability.unavailable {
        color: #e81e25;
        background-color: #e81e25;
    }

/*
------
Layout elements
----
*/

hr.divider {
    border: 0;
    height: 1px;
    width: 90%;
    margin: 1.5rem auto;
    background: #d6d7d6;
}

p.divider {
    width: 90%;
    text-align: center;
    border-bottom: 1px solid #d6d7d6;
    line-height: 0;
    margin: 1.5rem auto;
    color: #9b9f9d;
}

    p.divider span {
        background: white;
        padding: 0 1em;
    }


/*
------
Labels
----
*/

span.label {
    display: inline-block;
    background-color: #9b9f9d;
    border-radius: 2em;
    padding: 0 1em;
    line-height: 2.5;
    color: white;
}

    span.label.is-success {
        background-color: #4caf50;
        color: white;
    }

    span.label.is-error {
        background-color: #f44336;
        color: white;
    }

    span.label.is-warning {
        background-color: #fab81c;
        color: white;
    }

    span.label.is-info {
        background-color: #1898d0;
        color: white;
    }


/*
------
Layout helpers
----
*/

.pull-right {
    float: right;
    text-align: right;
}

.pull-left {
    float: left;
    text-align: left;
}


/*
--------------
From & Inputs
--------------
*/


.form {
    position: relative;
}

    /* -- Form : fieldsets -- */

    .form fieldset,
    .form .fieldset {
        position: relative;
        display: flex;
        flex-flow: row wrap;
        column-gap: 16px;
        overflow-x: hidden;
        overflow-x: clip;
        margin: 0;
        padding: 12px 1px;
        margin: 0 -1px;
        line-height: 1;
        border: none;
    }

        .form fieldset legend {
            font-size: 14px;
            font-weight: bold;
            line-height: 2;
            color: #323636;
            z-index: 0;
        }

        .form fieldset > div:not(.form-input):not(.form-check) {
            width: 100%;
        }



/* -- Form : Overwrite default/responsive.css styles (temporary fix) -- */

    .form .form-input input[type=email],
    .form .form-input input[type=password],
    .form .form-input input[type=datetime],
    .form .form-input input[type=phonenumber],
    .form .form-input select {
        margin: 0;
    }
    .form .form-input select {
        width: 100%;
    }




/* -- form : inputs -- */

.form-input {
    font-size: 16px;
    font-size: clamp(12px, 4vw, 16px); /* give a bit more responsiveness on extra-small screen */
    text-align: left;
    padding: 0;
    margin-top: 1.25em;
    margin-bottom: 1em;
    position: relative;
}

.form-input {
    width: 100%;
}

    .form-input input,
    .form-input select,
    .form-input textarea {
        width: 100%;
        padding: .5em .75em;
        margin: 0;
        height: 3em;
        font-family: inherit;
        font-size: 1em;
        line-height: 1.5;
        color: #212322;
        background: #f2f4f4;
        border: none;
        transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, outline 0.2s ease-in-out;
        box-sizing: border-box;
        border-radius: 5px;
    }

        .form-input input:focus,
        .form-input select:focus,
        .form-input textarea:focus {
            outline: 0;
        }

    /* -- form : textarea -- */

    .form-input textarea {
        resize: vertical;
        height: auto;
    }

    /* -- form : fileupload -- */

    .form-input input[type=file] {
        height: auto;
        font-size: 14px;
    }


    /* -- form : select -- */

    .form-input select { /* disable native arrow (Chrome & Firefox) */
        -moz-appearance: textfield;
        -webkit-appearance: none;
        appearance: none;
    }

    .form-input select { /* custom arrow */
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236e6e6e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        background-size: 1rem;
        padding-right: 2em;
    }

        .form-input select::-ms-expand { /* disable native arrow (IE) */
            display: none;
        }

        .form-input select option {
            color: black;
        }

        .form-input select[multiple] {
            background-image: none;
            height: auto;
        }

            .form-input select[multiple] option {
                padding: .25em .5em;
                background-color: transparent;
            }

        .form-input select option:disabled {
            display: none;
        }

        .form-input select:required:invalid {
            color: #9B9F9D;
        }


    /* -- Form : label -- */

    .form-input > label {
        position: absolute;
        display: block;
        color: #636668;
        font-size: 1rem;
        font-weight: 600;
        top: -1.5em;
    }


        /* -- Form : label (with modifiers) -- */

        .form-input > label.pull-right {
            right: 0;
        }

        .form-input > label.align-center {
            text-align: center;
            right: 0;
            left: 0;
        }

        .form-input > label.pull-left {
            left: 0;
        }

    /* -- Form : placeholder -- */

    .form-input input::placeholder,
    .form-input textarea::placeholder {
        color: #b9bdbb;
        font-size: 1em;
    }


    /* -- Form : floating label -- */

    .form-input.has-floating-label {
        margin-top: 0;
    }

        .form-input.has-floating-label input,
        .form-input.has-floating-label select,
        .form-input.has-floating-label textarea,
        .form-input.has-floating-label select[multiple] {
            padding-top: 1.25em;
            height: 3.25em;
        }

            .form-input.has-floating-label input::placeholder,
            .form-input.has-floating-label textarea::placeholder {
                color: transparent !important;
            }

            .form-input.has-floating-label input + label,
            .form-input.has-floating-label select + label,
            .form-input.has-floating-label textarea + label,
            .form-input.has-floating-label .input-group + label {
                position: absolute;
                display: block;
                opacity: 1;
                pointer-events: none;
                transition: all 0.1s ease-in;
                left: 1rem;
                font-size: 1em;
                font-weight: normal;
                line-height: 1.25;
                color: #636668;
                top: 1em;
                pointer-events: none;
            }

        .form-input.has-floating-label.has-icon input + label,
        .form-input.has-floating-label.has-icon select + label,
        .form-input.has-floating-label.has-icon textarea + label,
        .form-input.has-floating-label.has-icon .input-group + label {
            left: 4rem;
        }

        .form-input.has-floating-label input:focus + label,
        .form-input.has-floating-label select:focus + label,
        .form-input.has-floating-label textarea:focus + label,
        .form-input.has-floating-label input:-webkit-autofill + label,
        .form-input.has-floating-label textarea:-webkit-autofill + label,
        .form-input.has-floating-label input:not(:placeholder-shown) + label,
        .form-input.has-floating-label textarea:not(:placeholder-shown) + label,
        .form-input.has-floating-label select:not(:required:invalid) + label {
            top: 0;
            font-size: 1rem;
            line-height: 2;
            color: #b9bdbb;
            opacity: 1;
        }

        .form-input.has-floating-label > select[multiple] + label {
            text-indent: .75em;
        }

        .form-input.has-floating-label > textarea + label,
        .form-input.has-floating-label > select[multiple] + label {
            background-color: #f2f4f4; /* fix: overlapping label over text */
            width: calc(100% - 3rem);
        }

        .form-input.has-floating-label.has-icon > textarea + label,
        .form-input.has-floating-label.has-icon > select[multiple] + label {
            width: calc(100% - 6rem);
        }

        .form-input.has-floating-label > select:required:invalid {
            color: transparent;
        }


    /* -- Form : static field -- */

    .form-input.is-static input,
    .form-input.is-static select,
    .form-input.is-static input:read-only,
    .form-input.is-static select:read-only,
    .form-input.is-static input:disabled,
    .form-input.is-static select:disabled {
        background: none;
        border-radius: 0;
        height: 2.1em;
        padding: 0;
        color: #636668;
        font-size: 1.4em;
        font-size: clamp(1em, calc(1rem + 2vw), 1.4em); /* improved responsiveneyy on extra-small screens*/
        font-weight: 300;
        cursor: text;
    }

    .form-input.is-static .input-group {
        background: none;
        border-radius: 0;
    }

        .form-input.is-static .input-group > span.seperator {
            font-size: 1.4em;
            padding: 0 1ch;
            height: auto;
        }

    .form-input.has-button.is-static input,
    .form-input.has-button.is-static select {
        padding-right: 2em;
    }


    /* -- Form : icons -- */

    .form-input.has-icon > i ~ input,
    .form-input.has-icon > i ~ select,
    .form-input.has-icon > i ~ textarea,
    .form-input.has-icon .input-group input:first-child,
    .form-input.has-icon .input-group select:first-child {
        padding-left: 4rem;
    }

    .form-input.has-icon > i {
        position: absolute;
        display: inline-block;
        top: 0;
        left: 0;
        width: 4rem;
        font-size: 1.2em;
        line-height: 2.5;
        text-align: center;
        pointer-events: none;
        color: #9B9F9D;
        z-index: 3;
    }

    .form-input.form-input.has-floating-label.has-icon > i {
        line-height: 2.75;
    }

    /* -- Form : tooltip icon -- */

    .form-input.has-tooltip > i ~ input,
    .form-input.has-tooltip > i ~ select,
    .form-input.has-tooltip > i ~ textarea,
    .form-input.has-tooltip .input-group {
        padding-right: 2.5em;
    }

    .form-input.has-tooltip > i.tooltip {
        position: absolute;
        left: auto;
        right: 0;
        width: 3em;
        font-size: 1em;
        text-align: center;
        line-height: 3;
        cursor: help;
        pointer-events: all;
    }

    .form-input.has-tooltip.has-floating-label > i.tooltip {
        line-height: 3.25;
    }

    .form-input.has-tooltip.has-errors i.tooltip,
    .form-input.has-tooltip.is-loading i.tooltip {
        visibility: hidden;
        pointer-events: none;
    }

    .form-input.has-tooltip i.icon-help {
        color: #81bef7;
    }

    .form-input.has-tooltip i.icon-info {
        color: #81bef7;
    }

    .form-input.has-tooltip i.icon-alert {
        color: #facc2e;
    }

    /* -- Form : password reveal button -- */

    .form-input input[type="password"]::-ms-reveal,
    .form-input input[type="password"]::-ms-clear {
        display: none; /* hide browser native button */
    }

    .form-input.has-password-reveal input {
        padding-right: 3em;
    }

    .form-input.has-password-reveal.has-errors input,
    .form-input.has-password-reveal.is-success input {
        padding-right: 4em;
    }

    .form-input.has-password-reveal button.button-pw-reveal {
        display: flex;
        position: absolute;
        top: .5em;
        bottom: .5em;
        height: 2em;
        right: .75em;
        padding: 4px;
        border: none;
        background: transparent;
        align-items: center;
        justify-content: center;
        font-size: 1em;
        cursor: pointer;
    }

        .form-input.has-password-reveal button.button-pw-reveal svg {
            width: 1.5em;
            height: 1.5em;
        }

    .form-input.has-password-reveal.has-errors button.button-pw-reveal,
    .form-input.has-password-reveal.is-success button.button-pw-reveal {
        right: 1.75em;
    }

    .form-input.has-password-reveal.has-floating-label button.button-pw-reveal {
        height: 2.25em;
    }


    /* -- Form : attached button -- */

    .form-input.has-button input,
    .form-input.has-button select {
        padding-right: 3em;
    }

    .form-input.has-button button {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
    }

    .form-input.has-button input ~ button.button {
        height: 100%;
        border: none;
        border-radius: 0 5px 5px 0;
        padding: 0 1em;
        margin-left: -1px;
        overflow: visible; /* for loading icon */
    }

    .form-input.has-button button > i {
        font-size: 1.5em;
        line-height: 2;
        margin: 0 -3px;
    }

    .form-input.has-button button.edit {
        border-color: #d6d7d6;
        border-radius: 5px;
        margin: -15px 0;
        top: 50%;
        bottom: 50%;
        right: 1rem;
    }

    .form-input.has-button.is-static button.edit {
        right: .5rem;
    }


    /* -- Form : multiple -- */

    .form-input .input-group {
        display: flex;
        flex: 0 0 auto;
        border-radius: 5px;
        overflow: hidden;
        background-color: #f2f4f4;
        box-sizing: border-box;
    }

        .form-input .input-group > span.seperator {
            display: block;
            color: #d6d7d6;
            background-color: transparent;
            font-size: 1em;
            line-height: 2;
            height: 3em;
            padding: .5em 0;
            box-sizing: border-box;
            cursor: default;
            pointer-events: none;
            transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }

    .form-input .input-group input,
    .form-input .input-group select {
        width: auto;
    }
    .form-input:not(.auto) .input-group input,
    .form-input:not(.auto) .input-group select {
        flex: auto;
    }

    .form-input .input-group input ~ input,
    .form-input .input-group input ~ select,
    .form-input .input-group select ~ select
    .form-input .input-group select ~ input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding-left: .5em;
        border-left: none;
    }

    .form-input .input-group input:not(:last-child),
    .form-input .input-group select:not(:last-child) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        border-right: none;
    }

    .form-input .input-group input:not(:last-child) {
        padding-right: .5em;
    }


    /* -- Form : auto -- */

    .form-input.auto {
        width: 100%;
        margin-right: 90%; /* trick to force a line break */
    }

        .form-input.auto > input,
        .form-input.auto > select,
        .form-check.auto > input,
        .form-input.auto .input-group {
            width: auto;
        }
        .form-input.auto .input-group {
            display: inline-flex;
        }

    /* -- Form : inline -- */

    .form-input.inline,
    .form-check.inline {
        flex: 0 0 auto;
        width: auto;
    }

/* -- Form : inline sizes -- */

@media (max-width: 568px) {
    .form-input.inline.col-1x3,
    .form-input.inline.col-2x3,
    .form-input.inline.col-1x2 {
        width: 100%;
    }

    .form-input.inline.col-mobile-auto {
        width: auto;
    }

    .form-input.inline.col-mobile-1x3,
    .form-input.inline.col-mobile-1x3 {
        width: calc(33.33% - 1em);
        flex-grow: 2;
    }

    .form-input.inline.col-mobile-1x2 {
        width: calc(50% - 1em);
        flex-grow: 3;
    }

    .form-input.inline.col-mobile-2x3 {
        width: calc(66.66% - 1em);
        flex-grow: 4;
    }
    /*.form-input.inline.col-mobile-1x2 + .inline.col-mobile-1x2,
        .form-input.inline.col-mobile-1x3 + .inline.col-mobile-2x3,
        .form-input.inline.col-mobile-2x3 + .inline.col-mobile-1x3,
        .form-input.inline.col-mobile-1x3 + .inline.col-mobile-1x3 + .inline.col-mobile-1x3 {
            margin-right: 0;
        }*/
}

@media (min-width: 569px) {
    .form-input.inline.col-1x3,
    .form-input.inline.col-1x3 {
        width: calc(33.33% - 1em);
        flex-grow: 2;
    }

    .form-input.inline.col-1x2 {
        width: calc(50% - 1em);
        flex-grow: 3;
    }

    .form-input.inline.col-2x3 {
        width: calc(66.66% - 1em);
        flex-grow: 4;
    }

    /*.form-input.inline.col-1x2 + .inline.col-1x2,
        .form-input.inline.col-1x3 + .inline.col-2x3,
        .form-input.inline.col-2x3 + .inline.col-1x3,
        .form-input.inline.col-1x3 + .inline.col-1x3 + .inline.col-1x3 {
            margin-right: 0;
        }*/
}

/* -- Form : input loading -- */

.form-input:not(.has-button).is-loading::after,
.form-input.is-loading.has-button button::after {
    position: absolute;
    display: block;
    content: "";
    box-sizing: border-box;
    top: 50%;
    right: 0;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    margin-right: 1rem;
    border: 2px solid #d6d7d6;
    border-radius: 50%;
    border-top-color: #e81e25;
    animation: spin 0.8s linear infinite;
    z-index: 3;
    opacity: 1;
}

.form-input.is-loading.has-button button::after {
    left: -3rem;
    right: auto;
}

.form-input.is-loading button {
    pointer-events: none;
}


/* -- Form : combodate input -- */

input.combodate {
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    text-align: center;
}

    input.combodate.dd,
    input.combodate.mm,
    input.combodate.yy {
        width: 3em;
    }

    input.combodate.yyyy {
        width: 4.5em;
    }

    input.combodate ~ input.combodate.yyyy {
        padding-right: .75em;
    }

    select.combodate {
        width: auto;
    }

.form-input.has-icon input.combodate.dd:first-child,
.form-input.has-icon input.combodate.mm:first-child,
.form-input.has-icon input.combodate.yy:first-child {
    width: 5.5em;
}

.form-input.has-icon input.combodate.yyyy:first-child {
    width: 6.5em;
}

/* -- Form : checkbox/radio -- */

.form-check,
.form-selection {
    position: relative;
    display: block;
    font-size: 14px;
    text-align: left;
    margin-bottom: 1rem;
    width: 100%;
}

    .form-check label,
    .form-selection label {
        display: inline-block;
        color: #323636;
        font-size: 1em;
        font-weight: normal;
        line-height: 1.2;
        padding-left: 2em;
        padding-right: 1em;
    }

        .form-check > input,
        .form-check label > input,
        .form-selection > input,
        .form-selection label > input {
            position: absolute;
            left: 0;
            top: 0;
        }

    .form-check input,
    .form-selection input {
        font-size: 1em;
        vertical-align: top;
        background: none;
        border: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
    }

        .form-check input[type="checkbox"],
        .form-check input[type="radio"] {
            width: 1.25em;
            height: 1.25em;
            margin: 1px;
        }

        .form-check input[type="checkbox"] {
            border-radius: 4px;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' ><path d='M4 10 8 14 17 5' stroke='%23E81E25' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-color: #ecefef;
            background-size: 0;
            transition: background-size .1s ease;
        }

        .form-check input[type="radio"] {
            border-radius: 50%;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8 '><circle r='2' fill='%23E81E25'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-color: #ecefef;
            background-size: 0;
            transition: background-size .1s ease;
        }

        .form-check input:hover[type="checkbox"],
        .form-check input:hover[type="radio"] {
            background-color: #f2f4f4;
        }

        .form-check input:checked[type="checkbox"],
        .form-check input:checked[type="radio"] {
            background-size: 100%;
        }


/* -- Form : selection -- */

.form-selection {
    font-size: 16px;
}
    .form-selection label {
        position: relative;
        cursor: pointer;
    }

    .form-selection input {
        cursor: pointer;
        width: 1.2em;
        height: 1.2em;
        margin: 2px;
        border: 2px solid #ecefef;
        border-radius: 4px;
    }

        .form-selection input:not(:checked) + label,
        .form-selection input:not(:checked) + span {
            color: #9b9f9d;
            font-weight: 600;
            letter-spacing: .02ch;
            transition: color .2s ease;
        }

        .form-selection input:disabled + label,
        .form-selection input:disabled + span {
            opacity: .5;
        }

        .form-selection input:checked + label,
        .form-selection input:checked + span {
            font-weight: 700;
            color: #323636;
        }

        .form-selection input[type="radio"],
        .form-selection input[type="checkbox"] {
            cursor: pointer;
            width: 1.2em;
            height: 1.2em;
            margin: 0;
            border: 2px solid #ecefef;
            border-radius: 5px;
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' ><path d='M5 10 9 14 16 6' stroke='%23E81E25' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
            background-repeat: no-repeat;
            background-position: center;
            background-color: transparent;
            background-size: 0;
            transition: border-color .2s ease, background-color .2s ease, background-size .1s ease;
        }

        .form-selection input:hover[type="radio"],
        .form-selection input:hover[type="checkbox"],
        .form-selection input:disabled[type="radio"],
        .form-selection input:disabled[type="checkbox"] {
            background-color: #ecefef;
        }

        .form-selection input:checked[type="radio"],
        .form-selection input:checked[type="checkbox"] {
            border-color: #e81e25;
            background-color: #fff;
            background-size: 100%;
        }




/* --- Form : adjustements for disabled/readonly --- */

.form-input select[readonly],
.form-input input:read-only,
.form-input textarea:read-only {
    cursor: default;
}

.form-input input:disabled,
.form-input select:disabled,
.form-input textarea:disabled,
.form-check input:disabled,
.form-check input:disabled + label {
    cursor: not-allowed;
}

.form-input select[readonly],
.form-input input:read-only,
.form-input textarea:read-only {
    color: #b9bdbb;
}

.form-input input:disabled,
.form-input select:disabled,
.form-input textarea:disabled,
.form-input *:disabled + span.seperator {
    color: #b9bdbb;
    background-color: #ecefef;
}

    .form-input input:disabled + label,
    .form-input select:disabled + label,
    .form-input textarea:disabled + label
    .form-input input:disabled::placeholder,
    .form-input select:disabled::placeholder,
    .form-input textarea:disabled::placeholder {
        color: #d6d7d6;
    }

.form-check input:disabled,
.form-check input:disabled:hover,
.form-check input:disabled:focus,
.form-check input:disabled + label {
    opacity: .5;
}

.form-input button:disabled,
.form-input button:disabled:hover,
.form-input button:disabled:active {
    cursor: default;
}

/* --- Form : adjustements for error/success --- */

.form-input.has-errors::after,
.form-input.is-success::after {
    font-family: "fontello";
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    position: absolute;
    display: inline-block;
    opacity: 0;
    top: 0;
    right: 0;
    width: 2em;
    line-height: 3;
    text-align: center;
    pointer-events: none;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.form-input.has-floating-label.has-errors::after,
.form-input.has-floating-label.is-success::after {
    line-height: 3.25;
}

.form-input.has-errors::after {
    color: #f44336;
    opacity: 1;
    content: "!";
}

.form-input.is-success::after {
    color: #4caf50;
    opacity: 1;
    content: "✓";
}

.form-input.has-errors input,
.form-input.has-errors select,
.form-input.has-errors textarea,
.form-check.has-errors label {
    color: #f44336;
}

.form-input.has-errors > input,
.form-input.has-errors > select,
.form-input.has-errors > textarea,
.form-check.has-errors > input,
.form-input.has-errors .input-group {
    outline: 1px solid #f44336;
}

.form-input.has-errors > input,
.form-input.has-errors > select,
.form-input.has-errors > textarea,
.form-input.has-errors .input-group,
.form-input.is-success > input,
.form-input.is-success > select,
.form-input.is-success > textarea,
.form-input.is-success .input-group {
    padding-right: 2em;
}

    .form-input.has-errors > select
    .form-input.is-success > select {
        background-image: none
    }

.form-input.has-errors label.error,
.form-check.has-errors label.error,
.form-input.has-errors span.field-validation-error,
.form-check.has-errors span.field-validation-error,
.form-input.is-success label.success,
.form-check.is-success label.success,
.form-input.is-success span.field-validation-valid,
.form-check.is-success span.field-validation-valid {
    text-align: left;
    position: relative;
    padding-top: 5px;
    height: auto;
    opacity: 1;
}

/* -- Form : switch toggle -- */

.form-switch {
    display: flex;
    overflow: hidden;
    font-size: 16px;
}

    .form-switch input {
        position: absolute;
        display: none;
        pointer-events: none;
        appearance: none;
    }

    .form-switch label {
        background-color: #f2f4f4;
        color: #9B9F9D;
        font-size: 1em;
        font-weight: 500;
        line-height: 1.5em;
        text-align: center;
        padding: .5em 1em;
        border: 1px solid #f2f4f4;
    }

        .form-switch label:first-of-type {
            padding-left: 1.2em;
            border-radius: 5px 0 0 5px;
        }

        .form-switch label:last-of-type {
            padding-right: 1.2em;
            border-radius: 0 5px 5px 0;
        }

        .form-switch label ~ label {
            border-left-color: white;
        }

        .form-switch label:hover {
            cursor: pointer;
        }

    .form-switch input:checked + label {
        background-color: #e81e25;
        border-color: #e81e25;
        box-shadow: none;
        color: white;
    }

/* -- Form : voucher input (work in progress) -- */

.form-input.is-voucher {
    display: inline-block;
    flex: 0 0 auto;
    margin-right: auto;
}

.form-input span.voucher,
.form-input input.voucher {
    position: relative;
    display: inline-block;
    font-family: droid sans mono, consolas, monospace;
    font-size: 3ch;
    line-height: 57px;
    height: 57px;
    text-transform: uppercase;
    background: none;
}

.form-input input.voucher {
    width: auto;
    padding: 0 1.5ch;
    margin: 0;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    border: #f2f4f4 solid 2px;
    box-sizing: content-box !important;
    background-image: repeating-linear-gradient( 90deg, #f2f4f4 0, #f2f4f4 1px, transparent 0, transparent 2ch );
    background-size: 100ch 2.5ch;
    background-position: 1.5ch center;
    background-repeat: no-repeat;
    letter-spacing: 1ch;
    padding-left: 1ch;
    padding-right: .5ch;
}

    .form-input input.voucher::-webkit-inner-spin-button,
    .form-input input.voucher::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .form-input input.voucher.c-1 {
        width: 2.1ch;
        background-size: 3ch 2.5ch;
    }

    .form-input input.voucher.c-2 {
        width: 4.1ch;
        background-size: 6ch 2.5ch;
    }

    .form-input input.voucher.c-3 {
        width: 6.1ch;
        background-size: 8ch 2.5ch;
    }

    .form-input input.voucher.c-4 {
        width: 8.1ch;
        background-size: 10ch 2.5ch;
    }

    .form-input input.voucher.c-5 {
        width: 10.1ch;
        background-size: 12ch 2.5ch;
    }

    .form-input input.voucher.c-6 {
        width: 12.1ch;
        background-size: 14ch 2.5ch;
    }

    .form-input input.voucher.c-7 {
        width: 14.1ch;
        background-size: 16ch 2.5ch;
    }

    .form-input input.voucher.c-8 {
        width: 16.1ch;
        background-size: 18ch 2.5ch;
    }

    .form-input input.voucher.c-9 {
        width: 18.1ch;
        background-size: 20ch 2.5ch;
    }

    .form-input input.voucher.c-10 {
        width: 20.1ch;
        background-size: 22ch 2.5ch;
    }

    .form-input input.voucher.c-11 {
        width: 22.1ch;
        background-size: 24ch 2.5ch;
    }

    .form-input input.voucher.c-12 {
        width: 24.1ch;
        background-size: 26ch 2.5ch;
    }

    .form-input input.voucher.c-13 {
        width: 26.1ch;
        background-size: 28ch 2.5ch;
    }

    .form-input input.voucher.c-14 {
        width: 28.1ch;
        background-size: 30ch 2.5ch;
    }

    .form-input input.voucher.c-15 {
        width: 30.1ch;
        background-size: 32ch 2.5ch;
    }

    .form-input input.voucher.c-16 {
        width: 32.1ch;
        background-size: 34ch 2.5ch;
    }

    .form-input input.voucher.c-17 {
        width: 34.1ch;
        background-size: 36ch 2.5ch;
    }

    .form-input input.voucher.c-18 {
        width: 36.1ch;
        background-size: 38ch 2.5ch;
    }

    .form-input input.voucher.c-19 {
        width: 38.1ch;
        background-size: 40ch 2.5ch;
    }

    .form-input input.voucher.c-20 {
        width: 40.1ch;
        background-size: 42ch 2.5ch;
    }

    .form-input input.voucher.c-21 {
        width: 42.1ch;
        background-size: 44ch 2.5ch;
    }

    .form-input input.voucher.c-22 {
        width: 44.1ch;
        background-size: 46ch 2.5ch;
    }

    .form-input input.voucher.c-23 {
        width: 46.1ch;
        background-size: 48ch 2.5ch;
    }

    .form-input input.voucher.c-24 {
        width: 48.1ch;
        background-size: 50ch 2.5ch;
    }

    .form-input input.voucher.p-1 {
        padding-left: 2ch;
        background-position-x: 1.5ch;
    }

    .form-input input.voucher.p-2 {
        padding-left: 4ch;
        background-position-x: 3.5ch;
    }

    .form-input input.voucher.p-3 {
        padding-left: 6ch;
        background-position-x: 5.5ch;
    }

    .form-input input.voucher.p-4 {
        padding-left: 8ch;
        background-position-x: 7.5ch;
    }

    .form-input input.voucher.p-5 {
        padding-left: 10ch;
        background-position-x: 9.5ch;
    }

    .form-input input.voucher.p-6 {
        padding-left: 12ch;
        background-position-x: 11.5ch;
    }

    .form-input input.voucher.p-7 {
        padding-left: 14ch;
        background-position-x: 13.5ch;
    }

    .form-input input.voucher.p-8 {
        padding-left: 16ch;
        background-position-x: 15.5ch;
    }

    .form-input input.voucher.p-9 {
        padding-left: 18ch;
        background-position-x: 17.5ch;
    }

    .form-input input.voucher.s-1 {
        padding-right: 2ch;
    }

    .form-input input.voucher.s-2 {
        padding-right: 4ch;
    }

    .form-input input.voucher.s-3 {
        padding-right: 6ch;
    }

    .form-input input.voucher.s-4 {
        padding-right: 8ch;
    }

    .form-input input.voucher.s-5 {
        padding-right: 10ch;
    }

    .form-input input.voucher.s-6 {
        padding-right: 12ch;
    }

    .form-input input.voucher.s-7 {
        padding-right: 14ch;
    }

    .form-input input.voucher.s-8 {
        padding-right: 16ch;
    }

    .form-input input.voucher.s-9 {
        padding-right: 18ch;
    }

.form-input span.voucher.prefix,
.form-input span.voucher.suffix {
    pointer-events: none;
    position: absolute;
    margin: 2px 0;
    top: 0;
}

.form-input span.voucher.prefix {
    padding-left: 1ch;
    left: 0;
}

.form-input span.voucher.suffix {
    padding-right: 1ch;
    right: 0;
}

    .form-input span.voucher.prefix::after,
    .form-input span.voucher.suffix::before {
        content: "-";
    }

.form-input input.voucher ~ span.prefix,
.form-input input.voucher ~ span.suffix {
    color: #b9bdbb;
}

.form-input input.voucher:not(:placeholder-shown) ~ span.prefix,
.form-input input.voucher:not(:placeholder-shown) ~ span.suffix {
    color: #323636;
}

.form-input input.voucher::placeholder {
    font-size: 1em;
    color: transparent;
}

/* -- Form : validation -- */

.form label.success,
.form span.field-validation-valid {
    display: block;
    color: #4caf50;
    font-size: 1rem;
    line-height: 1;
}

.form label.error,
.form span.field-validation-error {
    display: block;
    color: #f44336;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
}

.form-input > label.error,
.form-check > label.error,
.form-input > label.success,
.form-check > label.success {
    position: relative;
    opacity: 0;
    height: 0;
    top: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in;
}

.form-input span.field-validation-error,
.form-check span.field-validation-error,
.form-input span.field-validation-valid,
.form-check span.field-validation-valid {
    opacity: 0;
    padding: 0;
    margin: 0;
    height: 0;
    pointer-events: none;
    transition: opacity 0.2s ease-in, padding 0.2s ease-in;
}

/* -- Form : captions, infotext & more -- */

.form-input.has-caption input,
.form-input.has-caption select,
.form-input.has-caption textarea,
.form-input.has-caption .input-group {
    border-radius: 5px 5px 0 0;
    outline: none;
}

.form label.suggline,
.form span.suggline {
    display: block;
    font-size: 14px;
    color: #6a6336;
    padding: 1rem;
    border-top: solid 1px #e1dbbb;
    background-color: #fcf8e3;
    border-radius: 0 0 5px 5px;
}

.form p.infoline,
.form span.infoline,
.form label.infoline {
    display: inline-block;
    font-size: 12px;
    color: #636668;
}

.form-input span.infoline,
.form-input label.infoline {
    padding-top: 5px;
}

.form .form-input + p.infoline {
    padding-bottom: 2em;
    margin-top: -10px;
}

/* --- Form : adjustements for dark/light --- */

*.is-dark .form fieldset legend,
*.is-dark .form-input input,
*.is-dark .form-input select,
*.is-dark .form-input textarea,
*.is-dark .form-check label {
    color: #ecefef;
}

*.is-dark .form-input input,
*.is-dark .form-input select,
*.is-dark .form-input textarea,
*.is-dark .form-input .input-group,
*.is-dark .form-check input,
*.is-dark .form-input.has-floating-label > textarea + label,
*.is-dark .form-input.has-floating-label > select[multiple] + label {
    background-color: #323636;
}

    *.is-dark .form-input .input-group,
    *.is-dark .form-input input::placeholder,
    *.is-dark .form-input select::placeholder,
    *.is-dark .form-input textarea::placeholder,
    *.is-dark .form-input.has-floating-label input:focus + label,
    *.is-dark .form-input.has-floating-label select:focus + label,
    *.is-dark .form-input.has-floating-label textarea:focus + label,
    *.is-dark .form-input.has-floating-label input:-webkit-autofill + label,
    *.is-dark .form-input.has-floating-label textarea:-webkit-autofill + label,
    *.is-dark .form-input.has-floating-label input:not(:placeholder-shown) + label,
    *.is-dark .form-input.has-floating-label textarea:not(:placeholder-shown) + label,
    *.is-dark .form-input.has-floating-label select:not(:required:invalid) + label {
        color: #636668;
    }

    *.is-dark .form-input select option {
        color: white;
    }

*.is-dark .form-input label,
*.is-dark .form-input.has-floating-label label {
    color: #b9bdbb
}

*.is-dark .form-check input {
    background-blend-mode: color-dodge;
}

*.is-dark .form-input input.voucher {
    color: #ecefef;
    border-color: #6e6e6e;
    background-color: transparent;
    background-image: repeating-linear-gradient( 90deg, grey 0, grey 1px, transparent 0, transparent 2ch );
}

    *.is-dark .form-input input.voucher:not(:placeholder-shown) ~ span.prefix,
    *.is-dark .form-input input.voucher:not(:placeholder-shown) ~ span.suffix {
        color: #ecefef;
    }


/* --- Form : adjustements for sizes --- */

.form-input.is-large {
    font-size: 18px;
}

.form-input.is-small {
    font-size: 14px;
}

/* -- Form: loading -- */

.form.is-loading input,
.form.is-loading select,
.form.is-loading textarea,
.form.is-loading button {
    pointer-events: none;
}

.form.is-loading::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    content: " ";
    background-color: white;
    z-index: 200;
}

.form.is-dark.is-loading::before,
*.is-dark .form.is-loading::before {
    background-color: black;
}

.form.is-loading::after,
form.search.is-loading button::before {
    position: absolute;
    display: block;
    content: "";
    box-sizing: border-box;
    top: 20%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
    margin-left: -1rem;
    border: 2px solid #d6d7d6;
    border-radius: 50%;
    border-top-color: #e81e25;
    animation: spin 0.8s linear infinite;
    z-index: 210;
}

form.search.is-loading button::before {
    top: 50%;
    left: auto;
    right: auto;
    margin-left: -4rem;
}


/* Form: messages block */

.form-messages {
    position: relative;
    width: 100%;
    margin: auto;
    text-align: center;
}
    .form-messages.is-aligned-left {
        max-width: 100%;
        text-align: left;
    }

    .form-messages.is-aligned-right {
        max-width: 100%;
        text-align: right;
    }


    .form-messages span.message {
        display: inline-flex;
        align-items: center;
        padding: 1em;
        color: #636668;
        font-size: 14px;
        text-align: left;
        line-height: 1.5;
        opacity: 0;
        transition: all .2s ease;
    }

    .form-messages:not(.is-success):not(.has-errors) span.message {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
    }

    .form-messages span.message::before {
        display: block;
        content: " ";
        width: 1ch;
        padding-right: 1em;
        margin-right: 1em;
        border-right: 1px solid #ecefef;
        font-family: "fontello";
    }

    .form-messages span.message::after {
        display: block;
    }


    .form-messages.has-errors span.message {
        color: #f44336;
        opacity: 1;
    }

        .form-messages.has-errors span.message::before {
            content: "\e802";
        }

    .form-messages.is-success span.message {
        color: #4caf50;
        opacity: 1;
    }

        .form-messages.is-success span.message::before {
            content: "✓";
        }


    .form-messages span.message.alert { /* variant 1 : as alert */
        border-radius: 5px;
        border: 1px solid #ecefef;
    }

    .form-messages span.message.popup { /* variant 2 : as popup */
        padding: 1em 2em;
        background-color: white;
        border-radius: 99px;
        filter: drop-shadow(0 0 12px rgba(0,0,0,0.1));
    }

        .form-messages span.message.popup::after {
            position: absolute;
            top: -9px;
            right: 50%;
            left: 50%;
            content: "";
            margin-left: -9px;
            border: solid;
            border-color: white transparent;
            border-width: 0 10px 10px 10px;
            pointer-events: none;
        }

    .form-messages.is-success span.message.popup,
    .form-messages.has-errors span.message.popup {
        transform: translate(0);
    }


/* Form: buttons block */

.form-buttons {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 1em auto;
    text-align: center;
}

    .form-buttons .button {
        display: inline-flex;
        margin: 9px auto;
        max-width: 340px;
        z-index: 1;
    }

    .form-buttons.is-aligned-left {
        max-width: 100%;
        text-align: left;
    }
    .form-buttons.is-aligned-right {
        max-width: 100%;
        text-align: right;
    }


/*
-------
Buttons
-------
*/
/* --- Buttons --- */
.button {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    font-weight: bold;
    line-height: 3;
    text-decoration: none;
    text-transform: none;
    text-align: center;
    background-color: #e81e25;
    border-color: #e81e25;
    border-radius: 3em;
    border: 1px solid #e81e25;
    height: 3em;
    padding: 0 1.25em;
    box-sizing: border-box;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    outline: none;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, width 0.2s ease, outline-color 0.2s ease;
}

/* --- Button : variants --- */

.button-outlined {
    color: #e81e25;
    border-width: 2px;
    border-color: #e81e25;
    background-color: transparent;
}

.button-secondary {
    border: 1px solid #d6d7d6;
    line-height: 3;
    color: #323636;
    background-color: #fff;
}

.button-inverted,
.button-empty {
    color: #e81e25;
    border-color: transparent;
    background-color: transparent;
    border-width: 2px;
}

/* --- Button : states --- */

.button:hover {
    color: #fff;
    border-color: #bf1218;
    background-color: #bf1218;
}

.button-outlined:hover {
    color: #fff;
    border-color: #e81e25;
    background-color: #e81e25;
}

.button-inverted:hover,
.button-empty:hover {
    border-color: #e81e25;
    background-color: #e81e25;
}

/*.button:focus {
    border-color: #fff;
    outline: 2px solid #e81e25;
}
.button-outlined:focus {
    border-color: #e81e25;
    outline-width: 1px;
    border-width: 1px
}*/

.button:active {
    color: #fff;
    border-color: #bf1218;
    background-color: #bf1218;
    outline: none !important;
}

/*.button-secondary:focus {
    border-color: transparent;
    background-color: transparent;
    outline-color: #636668;
}*/
.button-secondary:hover,
.button-secondary:active {
    color: #fff;
    border-color: #636668;
    background-color: #636668;
}

.button:disabled,
.button[disabled] {
    color: #fff;
    border-color: #d6d7d6 !important;
    background-color: #d6d7d6 !important;
    outline: none !important;
    cursor: not-allowed;
}

.button-inverted:disabled,
.button-inverted[disabled],
.button-empty:disabled,
.button-empty[disabled] {
    color: #d6d7d6;
    border-color: transparent !important;
    background-color: transparent !important;
}

/* --- Button : icon --- */

.button svg {
    flex: 0 0 auto;
    vertical-align: middle;
    margin-top: -3px;
}

    .button svg:first-child {
        margin-left: -.2em;
        padding-right: .5em;
    }

    .button svg:last-child {
        margin-right: -.2em;
        padding-left: .5em;
    }

/* --- Button : submit arrow --- */

.button strong {
    display: block;
    transition: opacity 0.2s ease;
}

    .button strong::after {
        display: inline-block;
        content: "\279C";
        margin-left: .25em;
        margin-right: -.25em;
        transition: transform 0.1s ease;
    }

.button:hover:not(:disabled) strong::after {
    transform: translateX(3px);
}

/* --- Button : adjustements for states --- */

.button.is-error,
.button.is-success,
.button.is-loading {
    width: 3em;
    height: 3em;
}

    .button.is-error strong,
    .button.is-success strong,
    .button.is-loading strong {
        display: none;
        opacity: 0;
    }

.button.is-loading,
.button.is-sending,
.button.is-error,
.button.is-success {
    cursor: default;
    pointer-events: none;
}

.button.is-loading {
    color: transparent !important;
}

.button.is-error {
    color: transparent !important;
    background-color: #f44336 !important;
    border-color: #f44336 !important;
}

.button.is-success {
    color: transparent !important;
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
}

.button::before,
.button::after {
    position: absolute;
    display: block;
    content: "";
    font-style: normal;
    font-weight: normal;
    opacity: 0;
    top: 0;
    left: 0;
    right: 0;
    box-sizing: border-box;
    transform: scale(3);
    transition: opacity 0.2s ease 0.2s, transform 0.2s ease 0.2s;
}

.button.is-success::after {
    content: "✔";
    opacity: 1;
    color: #fff;
    transform: scale(1.5);
}

.button.is-error::after {
    content: "×";
    opacity: 1;
    color: #fff;
    transform: scale(1.5);
}

.button.button-empty.is-loading,
.button.button-inverted.is-loading,
.button.button-secondary.is-loading {
    background-color: #ecefef;
    border-color: #ecefef;
}

.button.is-loading::before {
    top: 50%;
    left: 50%;
    width: 2em;
    height: 2em;
    margin-top: -1em;
    margin-left: -1em;
    border: 2px solid transparent;
    border-radius: 50%;
    border-top-color: #fff;
    opacity: 1;
    transform: scale(1);
    animation: spin 0.8s linear 0.2s infinite;
    z-index: 2;
}

.button.button-empty.is-loading::before,
.button.button-inverted.is-loading::before {
    border-top-color: #e81e25;
}


.button.is-sending strong::after {
    animation: rolling 0.5s linear infinite;
}


/* --- Button : modifiers --- */

.button.is-full-width {
    display: flex;
    width: 100%;
}

.button.is-aligned-center {
    display: flex;
    width: fit-content;
    margin: auto;
}

/* --- Buttons : adjustements for sizes --- */

.button.is-small {
    font-size: 12px;
    line-height: 2.5;
    height: 2.5em;
}

.button.is-medium {
    font-size: 15px;
    line-height: 2.5;
    height: 2.5em;
}

.button.is-large {
    font-size: 18px;
    line-height: 3;
    height: 3em;
}

/* --- Buttons : adjustements for dark/light --- */

*.is-red .button {
    border-color: #fff;
    background-color: #fff;
    color: #e81e25;
}

*.is-red .button-outlined,
*.is-dark .button-outlined,
*.is-dark .button-secondary {
    background-color: transparent;
    border-color: #fff;
    color: #fff;
}

*.is-light a.button-outlined {
    background-color: transparent;
    border-color: #212322;
    color: #212322;
}


*.is-dark .button + label.message {
    background-color: white;
}

    *.is-dark .button + label.message::after {
        border-color: white transparent;
    }

*.is-light .button + label.message {
    background-color: #ecefef;
}

    *.is-light .button + label.message::after {
        border-color: #ecefef transparent;
    }


/*
-------
Special Buttons
-------
*/

button.close,
button.expand,
button.edit,
button.remove,
button.upload,
a.expand {
    display: inline-block;
    color: transparent;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1;
    background: none;
    height: 1em;
    width: 1em;
    padding: 5px;
    border: 0;
    border: 1px solid transparent;
    box-sizing: content-box;
    overflow: hidden;
    appearance: none;
    cursor: pointer;
}

button.close {
    color: black;
    font-size: 1.5rem;
    background-color: transparent;
    opacity: 0.5;
}
    /*
    button.close::before {
        content: "\2715";
    }*/

    button.close:hover,
    button.close:active,
    button.close:focus {
        color: #e81e25;
        opacity: 1;
    }


button.expand,
a.expand {
    color: #e81e25;
    font-size: 1.5rem;
    text-decoration: none;
    background-color: transparent;
    border-radius: 5px;
}

    button.expand::before,
    a.expand::before {
        font-family: "fontello";
        content: "o";
    }

    button.expand:hover,
    button.expand:active,
    button.expand:focus,
    a.expand:hover,
    a.expand:active,
    a.expand:focus {
        color: #e81e25;
        border-color: #ecefef;
    }


button.edit,
button.remove,
button.upload {
    color: #636668;
    font-size: 1rem;
    background-color: white;
    border-color: #d6d7d6;
    border-radius: 2em;
    padding: 8px;
}

button.upload {
    font-size: 1.5rem;
    line-height: 0.5;
    padding: 5px;
}

    button.edit::before {
        font-family: "fontello";
        content: "e";
    }

    button.remove::before {
        font-family: "fontello";
        content: "r";
    }

    button.upload::before {
        font-family: "fontello";
        content: "u";
    }

    button.edit:hover,
    button.edit:active,
    button.edit:focus,
    button.remove:hover,
    button.remove:active,
    button.remove:focus,
    button.upload:hover,
    button.upload:active,
    button.upload:focus {
        background-color: #ecefef;
    }

    button.close:disabled,
    button.expand:disabled,
    button.edit:disabled,
    button.remove:disabled,
    button.upload:disabled {
        background-color: #ecefef;
        border-color: #ecefef;
        cursor: no-drop;
        opacity: .5;
    }

span.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}



/*
-------
SEARCH FORM
A special form with simplified html markup
-------
*/

form.search {
    position: relative;
    display: flex;
    max-width: 18em;
    margin-bottom: 10px;
}

    form.search > input {
        color: #323636;
        padding: 0 1.2em;
        flex: 1 0 auto;
        height: auto;
        width: auto;
        margin: auto;
        background-color: #f2f4f4;
        border-radius: 5px;
        box-sizing: border-box;
        outline: none;
    }

        form.search > input + button {
            color: white;
            text-align: center;
            padding: 0 0.8em;
            margin-left: -5px;
            background-color: #e81e25;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

    form.search > button > i {
        font-size: 1.2em;
    }

    form.search > input,
    form.search > button {
        font-size: 1em;
        line-height: 3em;
        height: 3em;
        margin: 0;
        border: none;
    }

        form.search > input::placeholder {
            color: #b9bdbb;
            opacity: 1;
        }

    form.search.is-small {
        font-size: 12px;
    }

    form.search.is-medium {
        font-size: 14px;
    }

    form.search.is-large {
        font-size: 16px;
    }

    form.search.is-full-width {
        max-width: 100%;
    }

    form.search.is-aligned-center {
        margin: 0 auto 10px;
    }

    form.search.is-light > input {
        background-color: white;
    }

    form.search.is-dark > input {
        color: #ecefef;
        background-color: #323636;
    }

/*
--------------
Spinner
--------------
*/

span.spinner {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
}

    span.spinner:before {
        content: "";
        box-sizing: border-box;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin-top: -12px;
        margin-left: -12px;
        border: 1px solid #ccc;
        border-radius: 50%;
        border-top-color: #e81e25;
        animation: spin 0.8s linear infinite;
    }

    span.spinner.is-large {
        width: 50px;
        height: 50px;
    }

        span.spinner.is-large::before {
            width: 46px;
            height: 46px;
            margin-top: -22px;
            margin-left: -22px;
            border-width: 2px;
        }

    span.spinner.is-small {
        width: 20px;
        height: 20px;
    }

        span.spinner.is-small::before {
            width: 18px;
            height: 18px;
            margin-top: -9px;
            margin-left: -9px;
            border-width: 1px;
        }


/*
--------------
Skeleton
--------------
*/

.skeleton,
.skeleton-loading {
    display: block;
    border-radius: 3px;
    background-color: #d6d7d6;
}

.skeleton-loading {
    background: linear-gradient( 120deg, #d6d7d6 25%, hsla(0, 0%, 86%, 0.5) 50%, #d6d7d6 75% );
    background-size: 400% 100%;
    animation: skeleton-loading 1.5s infinite;
}

div.skeleton,
div.skeleton-loading {
    width: 100%;
    height: 30px;
    margin: 10px 0;
}

h2.skeleton,
h3.skeleton,
h4.skeleton,
h5.skeleton,
h2.skeleton-loading,
h3.skeleton-loading,
h4.skeleton-loading,
h5.skeleton-loading {
    line-height: 1 !important;
    height: 1.5em;
    width: 60%;
    margin: .5em 0;
    padding: 0;
    max-width: 300px;
    min-width: 90px;
}

p.skeleton,
p.skeleton-loading {
    line-height: 1 !important;
    height: 1.2em;
    width: 90%;
    margin: .5em 0;
    padding: 0;
}

span.skeleton,
span.skeleton-loading {
    display: inline-block;
    line-height: 1 !important;
    height: inherit;
}



/*
--------------
Panel
--------------
*/

.panel {
    position: relative;
    background-color: white;
    border-radius: 5px;
    margin-bottom: 1em;
}

.panel-header {
    padding: 2em 3em 1em;
    border-radius: 5px 5px 0 0;
}

.panel-body {
    padding: 3em;
}

.panel-nav,
.panel-tabs {
    padding: 1em 3em;
}

.panel-footer {
    padding: 1em 3em 2em;
    border-top: 1px solid #ecefef;
    border-radius: 0 0 5px 5px;
}

.panel-header + .panel-body {
    padding-top: 1em;
}

.panel-header h2.headline,
.panel-header h3.headline {
    font-size: 2rem;
    padding-bottom: .2em;
}
.panel-header h4.subline,
.panel-header p.subline {
    color: #636668;
    font-size: 1.2rem;
}

/* --- panel: button --- */

.panel button.close,
.panel button.expand {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* --- panel: modifiers --- */

.panel.is-full-height {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
}

/* --- panel: responsive --- */

@media (max-width: 959px) {
    .panel-header h2.headline,
    .panel-header h3.headline {
        font-size: 1.6rem;
    }
}


/* --- panel: container --- */
.panel-container {
    display: flex;
    flex-wrap: wrap;
}

    .panel-container .panel {
        display: flex;
        flex-direction: column;
        margin-right: 1em;
        margin-bottom: 1em;
    }

    .panel-container .panel-body {
        height: 100%;
    }

    .panel-container.is-aligned-center {
        justify-content: center;
        gap: 1em;
    }

    .panel-container.is-aligned-right {
        justify-content: right;
        gap: 1em;
    }

    .panel-container.is-aligned-left {
        justify-content: left;
        gap: 1em;
    }

        .panel-container.is-aligned-center .panel,
        .panel-container.is-aligned-right .panel,
        .panel-container.is-aligned-left .panel {
            margin: 0;
        }

@media (max-width: 576px) {
    .panel-container.is-mobile-aligned-center {
        justify-content: center;
        gap: 1em;
    }

    .panel-container.is-mobile-aligned-right {
        justify-content: right;
        gap: 1em;
    }

    .panel-container.is-mobile-aligned-left {
        justify-content: left;
        gap: 1em;
    }

    .panel-container.is-mobile-aligned-center .panel,
    .panel-container.is-mobile-aligned-left .panel,
    .panel-container.is-mobile-aligned-right .panel {
        margin: 0;
    }
}



/* --- panel: more styles --- */
.panel-box {
    border: 2px solid #ecefef;
    background-color: transparent;
}

    .panel-box .panel-header,
    .panel-box .panel-body,
    .panel-box .panel-footer {
        padding-left: 2em;
        padding-right: 2em;
    }

    .panel-box .panel-body {
        padding-top: 2em;
        padding-bottom: 2em;
    }

    .panel-box .panel-header {
        padding-top: 1.5em;
        padding-bottom: 0;
    }

    .panel-box .panel-footer {
        padding-bottom: 1.5em;
    }


.panel-placeholder {
    background-color: #ecefef;
}

    .panel-placeholder > a,
    .panel-placeholder > button {
        display: block;
        position: absolute;
        top: 1em;
        left: 1em;
        right: 1em;
        bottom: 1em;
        background: none;
        border: none;
        color: #9b9f9d;
        font-size: 16px;
        text-decoration: none;
        cursor: pointer;
    }
        .panel-placeholder > a:hover,
        .panel-placeholder > button:hover {
            color: #b9bdbb;
        }

        .panel-placeholder > a > i,
        .panel-placeholder > button > i {
            display: block;
            font-size: 24px;
        }

/* --- panel: shadow styles --- */

.panel.has-shadow::before,
.panel.has-shadow-hover::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    border-radius: 5px;
    box-shadow: 0 0 12px rgb(0,0,0,0.10);
}

.panel.has-shadow-hover::before {
    opacity: 0;
    transition: opacity .3s ease;
}

.panel.has-shadow-hover:hover::before {
    opacity: 1;
}


/*
--------------
Menu
--------------
*/

.menu {
    position: relative;
}

.menu-list {
    margin-bottom: 1em;
}

.menu-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.6rem;
    font-weight: bold;
    color: #323636;
    padding: .25em 0;
}

.menu-list li {
    font-size: 1.2rem;
}

    .menu-list li ul {
        padding-left: .5em;
        margin-left: .5em;
        margin-bottom: .5em;
        border-left: 1px solid #ecefef;
    }

    .menu-list li a {
        display: block;
        color: #636668;
        line-height: 1;
        text-decoration: none;
        padding: .5em;
    }

        .menu-list li a:hover {
            color: #323636;
            background-color: #f2f4f4;
            border-radius: 5px;
        }

    .menu-list li.is-active > a {
        color: #323636;
        font-weight: bold;
    }

.menu-title i,
.menu-title svg {
    padding-right: 5px;
}

/* --- menu: with icons --- */

.menu.has-icons .menu-list {
    margin-left: 1rem;
}

.menu.has-icons .menu-title {
    padding-left: 3rem;
}

    .menu.has-icons .menu-title i,
    .menu.has-icons .menu-title img.icon,
    .menu.has-icons .menu-title svg {
        position: absolute;
        margin-left: -3rem;
    }
    .menu.has-icons .menu-title img.icon {
        height: 1.3em;
        width: 1.3em;
        padding: .1em;
        object-fit: contain;
        display: inline-block;
    }

.menu.has-icons .menu-list > li > ul {
    margin-left: 2rem;
}

.menu.has-icons .menu-list > li > a {
    padding-left: 2rem;
}

/* --- menu: single link --- */

.menu a.link {
    color: #636668;
}


/*
--------------
Tabs
--------------
*/

.tabs {
    display: flex;
    flex-wrap: nowrap;
    padding: 1rem 0;
    overflow: scroll;
    scrollbar-width: none;
}

    .tabs::-webkit-scrollbar {
        display: none;
    }

    .tabs li {
        font-size: 2rem;
        font-weight: bold;
        text-align: left;
        margin-right: 30px;
    }

        .tabs li h2.headline,
        .tabs li h3.headline {
            font-size: inherit;
            padding: 0;
        }

        .tabs li a {
            color: lightgray;
            text-decoration: none;
            white-space: nowrap;
            transition: .2s ease;
        }

        .tabs li.is-active a {
            color: inherit;
            text-decoration: none;
        }

.tab-pane {
    display: none;
    width: auto;
    opacity: 0;
    transition: .3s ease;
}

    .tab-pane.is-active {
        display: block;
        opacity: 1;
    }

/* --- tabs: responsive --- */

@media (max-width: 959px) {
    .tabs li {
        font-size: 1.6rem;
        margin-right: 2rem;
    }
        .tabs li:last-child {
            margin-right: 0;
        }
}


/*
--------------
BreadCrumb
--------------
*/

.breadCrumb { /*- legacy -*/
    padding: 1em 2em;
    color: #737373;
}

.breadcrumb {
    position: relative;
    color: #b9bdbb;
    line-height: 2;
    white-space: nowrap;
}
    .breadcrumb strong,
    .breadCrumb strong {
        font-weight: normal;
    }

    .breadcrumb h1,
    .breadcrumb h2,
    .breadCrumb h1 {
        font-size: 1em !important;
        display: inline;
    }

    .breadcrumb a,
    .breadCrumb a {
        color: #b9bdbb;
        line-height: inherit;
        text-decoration: none;
    }
        .breadcrumb a:hover,
        .breadCrumb a:hover {
            color: #e81e25;
        }

    .breadcrumb ul > li {
        display: inline-block;
        padding: 0;
    }

        .breadcrumb ul > li.is-active a {
            color: #323636;
            font-weight: 700;
        }

        .breadcrumb ul > li:not(:last-child)::after {
            color: #d6d7d6;
            content: "/";
            padding: 0 .5ch;
        }

        .breadcrumb.has-dropdown ul > li:last-child a::after {
            display: inline-block;
            content: "";
            width: 0;
            height: 0;
            margin: 0 .5ch;
            vertical-align: middle;
            border-top: 6px dashed;
            border-top: 4px solid\9;
            border-right: 6px solid transparent;
            border-left: 6px solid transparent;
            margin-top: -3px;
        }

    .breadcrumb.is-closed {
        border-bottom: 1px solid transparent;
    }

    .breadcrumb.is-open {
        border-bottom: 1px solid #ecefef;
        padding-bottom: 5px;
        transition: padding .2s ease;
    }


/* --- adjustements --- */

.panel-nav .breadcrumb {
    font-size: 1.6rem;
    letter-spacing: -0.02em;
}

    .panel-nav .breadcrumb ul > li a {
        font-family: "Poppins", sans-serif;
        letter-spacing: -0.02em;
    }


/* --- responsive --- */

@media (max-width: 568px) {
    .breadCrumb {
        font-size: 11px;
        padding: 0.5em;
    }
    .panel-nav .breadcrumb {
        font-size: clamp(1.4em, calc(1rem + 1vw), 1.6rem);
    }
}


/*
--------------
Dropdown menu
--------------
*/

.dropdown-menu {
    display: block;
    position: relative;
    text-align: left;
    padding: 0 1em;
    box-sizing: border-box;
    background: #fff;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 12px 12px rgba(0,0,0,.1);
    transition: opacity .2s ease, transform .2s ease;
    opacity: 0;
    min-height: 30vh;
    max-height: min(90vh, 600px);
}
.panel-nav .dropdown-menu {
    padding: 0 3rem;
}

.breadcrumb + .dropdown-menu .menu {
    padding: 1rem 0 2rem;
}


/*
--------------
Scrollbar
--------------
*/

.has-scrollbar-x {
    overflow-x: auto;
}

.has-scrollbar-y {
    overflow-y: auto;
}

.has-scrollbar-x,
.has-scrollbar-y { /* mozilla */
    scrollbar-color: #d6d7d6 transparent;
    scrollbar-width: thin;
    scroll-behavior: smooth;
}


    .has-scrollbar-y::-webkit-scrollbar { /* webkit */
        width: 15px;
    }

    .has-scrollbar-x::-webkit-scrollbar { /* webkit */
        height: 15px;
    }

    .has-scrollbar-x::-webkit-scrollbar-track,
    .has-scrollbar-y::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .has-scrollbar-x::-webkit-scrollbar-thumb,
    .has-scrollbar-y::-webkit-scrollbar-thumb {
        background-color: #d6d7d6;
        border-radius: 12px;
        border: 5px solid transparent;
        background-clip: content-box;
    }

    .has-scrollbar-x:hover::-webkit-scrollbar-thumb,
    .has-scrollbar-y:hover::-webkit-scrollbar-thumb {
        background-color: #b9bdbb;
    }

    .has-scrollbar-x::-webkit-scrollbar-thumb:hover,
    .has-scrollbar-y::-webkit-scrollbar-thumb:hover {
        background-color: #636668;
    }


/*
--------------
Visibility Modifiers
--------------
*/

*.is-visible {
    display: block;
}

*.is-hidden {
    display: none;
}

@media (max-width: 959px) {
    *.is-hidden-mobile {
        display: none;
    }
}

@media (max-width: 576px) {
    *.is-hidden-phone {
        display: none;
    }
}

@media (min-width: 569px) and (max-width: 959px) {
    *.is-hidden-tablet {
        display: none;
    }
}

@media (min-width: 960px) {
    *.is-hidden-desktop {
        display: none;
    }
}

/**
---
ProductCards
by Manuel & Phil
---
Version 1.2.0
Last modified: 25/01/2023
---
CHANGELOG
- changes made for athena release
- adjusted some margins for new icon-availability layout
- set font-size on price to force this styling
- set a fixed width constraint for product-card-card
- prev price darker color
- cta button padding reduced on mobile to avoid text gets cut of
- Overflow: hidden, removed to make cards pop out after the animation.
- Add blend-mode Multiply to make images' white background transparent.
- Changed Button border-radius and card hovering behaviour (no box shadow anymore)

*/

.product-card {
    position: relative;
    height: auto;
    width: 230px;
    margin: 10px 5px;
    box-sizing: border-box;
    transition: box-shadow .2s ease;
}

.product-card-image {
    position: relative;
    margin: 0 auto;
    height: 0;
    padding-bottom: 100%;
    width: 100%;
}

    .product-card-image img {
        position: absolute;
        margin: 0 auto;
        right: 0;
        left: 0;
        bottom: 0;
        max-height: 100%;
        max-width: 150px;
        transform: scale(1);
        transition: transform .2s ease;
        mix-blend-mode: multiply; /* to make images' white background transparent */
    }



.product-card-text {
    padding: 5px 30px;
    height: 90px;
    text-align: left;
    color: black;
}

    .product-card-text .label {
        font-weight: 600;
        font-size: 1em;
        color: #636668;
        text-transform: uppercase;
        line-height: 1;
    }

    .product-card-text .price {
        font-size: 1em;
        line-height: 1;
    }

        .product-card-text .price strong {
            font-size: 1.5em;
            font-weight: 700;
            padding-right: .2em;
        }

            .product-card-text .price strong.discounted {
                color: #e81e25;
            }

        .product-card-text .price span.prevPrice {
            font-size: 1em;
            font-weight: normal;
            color: #636668;
            text-decoration: line-through;
        }

    .product-card-text p.availability {
        color: #636668;
        margin-top: .6em;
        font-size: .9em;
    }

    .product-card-text h4 {
        line-height: 1.2;
        max-height: 2.4em;
        margin-top: .5em;
        overflow: hidden;
        display: block;
        color: #212322;
        display: -webkit-box !important;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

        .product-card-text h4.title {
            font-size: 1em;
            font-weight: normal;
            text-transform: none;
        }

        .product-card-text h4.name {
            font-size: 1.2em;
            font-weight: 700;
            text-transform: uppercase;
            margin-top: .5em;
        }

    .product-card-text p.sub {
        font-size: 1em;
        margin-top: .5em;
    }

    .product-card-text a {
        color: inherit;
        text-decoration: none;
    }


.product-card-promo {
    position: absolute;
    top: .5em;
    right: .5em;
    white-space: nowrap;
    z-index: 1;
}

    .product-card-promo span {
        display: inline-block;
        background-color: #e81e25;
        padding: .3em 1em;
        margin: 2px;
        color: white;
        font-size: .75em;
        font-weight: 700;
        text-transform: uppercase;
        text-align: center;
        border-radius: 2em;
    }

.product-card-button {
    height: 45px;
}

/* -- shadow -- */

.product-card-image::before {
    content: " ";
    display: block;
    height: 4px;
    background: #000;
    position: absolute;
    bottom: -3px;
    left: 30%;
    right: 30%;
    border-radius: 50%;
    opacity: 0;
    filter: blur(4px);
    transition: .2s ease;
}


/* -- hover -- */

.product-card:not(.is-not-found):hover .product-card-image img {
    transform: translateY(-12px);
}

.product-card:not(.is-not-found):hover .product-card-image::before {
    opacity: .2;
}

/* -- scaling modifier -- */

*.is-scalable .product-card,
.product-card.is-scalable {
    position: relative;
    height: auto;
    width: auto;
    width: calc(100% - 10px);
    max-height: 370px;
    max-width: 230px;
    min-width: 120px;
}


/** -- alternative layout -- */

.product-card.alternative-styling {
    height: 280px;
    width: 280px;
    margin: 20px 10px;
}

    .product-card.alternative-styling .product-card-image {
        padding-bottom: 60%;
    }

        .product-card.alternative-styling .product-card-image img {
            bottom: 10px;
            max-height: 90%;
            max-width: 200px;
            transform: scale(1) translateY(10px);
        }

    .product-card.alternative-styling .product-card-text {
        height: 90px;
    }

/* -- responsive -- */

@media (max-width: 960px) {
    .product-card-text {
        padding: 1em 9%;
    }
}

/* new */

#AccountManagementMain.loyaltyMain {
    padding: 15px;
    background: #fff;
}

.loyalty-banner-top {
    margin: 20px 0;
}

#AccountManagementMain .loy-left-menu {
    float: left;
    width: 152px;
    padding: 0 5px 5px 5px;
    margin-bottom: 30px;
    border-radius: 4px;
    color: #666;
}

.loy-left-menu a {
    color: #666;
    text-decoration: none;
}

.loy-left-menu .loy-submenu {
    margin: 0 0 12px 0;
    font-weight: bold;
    border-bottom: solid 1px #dfdbd9;
}

    .loy-left-menu .loy-submenu li {
        padding-left: 0;
        margin: 11px 0;
    }

        .loy-left-menu .loy-submenu li li {
            font-weight: normal;
            padding: 0 0 11px 5px;
            margin: 0;
        }

        .loy-left-menu .loy-submenu li a {
            display: block;
            margin-bottom: 11px;
            font-size: 14px;
        }

        .loy-left-menu .loy-submenu li li a {
            margin-bottom: 0;
            background: none;
        }

.loy-right-content {
    float: right;
    width: 750px;
}

.loy-right-content-box {
    float: right;
    border-radius: 4px;
    border: solid 1px #d1d1d1;
}

#AccountManagementMain .title-content {
    background: no-repeat 5px center #323233;
    color: #f6f6f6;
    padding: 0 15px 0 10px;
    margin-bottom: 15px;
    line-height: 43px;
    font-weight: bold;
}

#AccountManagementMain .title-sub-content {
    background: #323233;
    color: #f6f6f6;
    font-size: 14px;
    padding: 0 15px;
    height: 35px;
    line-height: 35px;
    -ms-text-shadow: none;
    text-shadow: none;
}

    #AccountManagementMain .title-sub-content .medButton {
        float: right;
        margin-right: -16px;
    }

#AccountManagementMain .loy-right-content fieldset {
    margin: 0;
    background: none;
}

.loy-right-content .titled-sub-content {
    margin-bottom: 20px;
}

.loy-right-content .not-titled-sub-content {
    padding: 10px;
    margin-bottom: 16px;
    border: solid 1px #ccc;
    color: #565656;
}

.loy-centre-content-font{
    font-size:10px;
}

.not-titled-sub-content a.btn-flat {
    font-size: 9px;
    color: #565656;
}

.loy-main-img-right {
    width: 100%;
    max-width: 160px;
    border: solid 1px #ccc;
    margin-left: -1px;
}

.not-titled-sub-content .bar-wrapper {
    margin: 7px 0;
}

.loy-right-content .tab-buttons-container {
    background: #fff;
    padding: 12px 8px 0 8px;
    height: 31px;
    border-bottom: solid 1px #ccc;
}

    .loy-right-content .tab-buttons-container li {
        position: relative;
        display: inline-block;
        height: 30px;
        margin-right: 5px;
        background: #ffffff;
        border: solid 1px #ccc;
        border-bottom: 0;
    }

    .loy-right-content .tab-buttons-container a {
        display: block;
        line-height: 20px;
        padding: 5px 10px;
        text-decoration: none;
        color: #333;
    }

    .loy-right-content .tab-buttons-container li.ui-state-active {
        height: 32px;
        top: -1px;
    }

.loyalty-slider .splide__arrow--prev {
    left: 5px;
}

.loyalty-slider .splide__arrow--next {
    right: 5px;
}

.sub-right {
    float: right;
}

.sub-left {
    float: left;
}

.sub-big {
    width: 555px;
}

.sub-small {
    width: 180px;
}

.titled-sub-content .sub-left {
    margin-left: -15px;
    padding-left: 15px;
    padding-bottom: 15px;
}

.titled-sub-content .sub-right {
    margin-right: -15px;
    padding-right: 15px;
    padding-bottom: 15px;
}

.titled-sub-content .sub-big {
    width: 540px;
}

.titled-sub-content .sub-small {
    width: 165px;
}

.loy-slider-btns {
    clear: both;
    padding: 10px 0 0 40px;
}

.completeBox {
    background-color: #feeedd;
}

.dark-field {
    padding: 10px 0;
    margin-bottom: 12px;
}

    .dark-field .divided {
        margin-bottom: 10px;
        border-bottom: dotted 1px #aaa;
    }

    .dark-field input + a, .dark-field select + a {
        margin-top: -5px;
    }

.img-tempCard {
    margin-left: 70px;
}

.img-tempCard-barcode {
    margin-left: 28%;
    width: 95%;
}

.img-tempCard-barcode-new-loyalty {
    margin-left: 70px;
    width: 125%;
}

.loy-description {
    text-align: center;
}

.loyalty-number {
    display: flex;
    justify-content: center;
}

/* image selector */
.loyalty-image-up img {
    display: block;
    width: 100%;
}

.loy-main-img {
    border: solid 1px #ccc;
    max-width: 160px;
}

.loy-img-sel {
    padding: 10px 0;
    overflow: auto;
}

    .loy-img-sel li {
        float: left;
        width: 52px;
        margin-left: 4px;
        position: relative;
    }

        .loy-img-sel li:first-child {
            margin-left: 0;
        }

.loy-img-sing {
    display: block;
    border: solid 1px #ccc;
    padding: 3px;
}

    .loy-img-sing:hover {
        background-color: #eee;
    }

a.loy-img-rem {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 11px;
    height: 11px;
    line-height: 11px;
    font-size: 10px;
    border: #22211f solid 1px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    border-radius: 2px;
    background: #4f4f4f; /* Old browsers */
    background: -moz-linear-gradient(top, #4f4f4f 0, #2e2a24 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4f4f4f), color-stop(100%, #2e2a24)); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #4f4f4f 0, #2e2a24 100%); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(top, #4f4f4f 0, #2e2a24 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #4f4f4f 0, #2e2a24 100%); /* IE10+ */
    background: linear-gradient(to bottom, #4f4f4f 0, #2e2a24 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#2e2a24', GradientType=0 ); /* IE6-9 */
}

    a.loy-img-rem:hover {
        background: #2e2a24; /* Old browsers */
        background: -moz-linear-gradient(top, #2e2a24 0, #4f4f4f 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2e2a24), color-stop(100%, #4f4f4f)); /* Chrome, Safari4+ */
        background: -webkit-linear-gradient(top, #2e2a24 0, #4f4f4f 100%); /* Chrome10+, Safari5.1+ */
        background: -o-linear-gradient(top, #2e2a24 0, #4f4f4f 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, #2e2a24 0, #4f4f4f 100%); /* IE10+ */
        background: linear-gradient(to bottom, #2e2a24 0, #4f4f4f 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2a24', endColorstr='#4f4f4f', GradientType=0 ); /* IE6-9 */
        color: #fff;
    }

.loy-email-static {
    display: inline-block;
    font-weight: bold;
    margin-right: 20px;
    margin-bottom: 20px;
}

.loy-bir-day {
    display: inline-block;
    width: 60px;
}

.loy-bir-mon {
    display: inline-block;
    width: 120px;
}

.loy-bir-yea {
    display: inline-block;
    width: 80px;
}

#AccountManagementMain .loy-bir-sel select {
    width: 100%;
}

.loy-gend {
    line-height: 20px;
    padding-bottom: 10px;
}

.form-part-cont {
    display: inline-block;
}

#AccountManagementMain input[type=text], #AccountManagementMain input[type=password], #AccountManagementMain input[type=datetime], #AccountManagementMain input[type=email], #changeEmailDialog input[type=email], #changeEmailDialog input[type=password], #AccountManagementMain select {
    display: inline-block;
    width: 230px;
    margin-right: 5px;
    background: #fff;
    border: solid 1px #ccc;
    color: #000;
    height: 31px;
    line-height: 31px;
    margin: 0 0 15px 0;
}

    #AccountManagementMain select:disabled, #AccountManagementMain input:disabled {
        background: #f1f1f1;
    }

#AccountManagementMain .form-part-cont select {
    margin-bottom: 0;
    width: auto;
    font-size: 13px;
}

#AccountManagementMain .result-num {
    margin-left: 15px;
}

#AccountManagementMain .loy-search input {
    margin-bottom: 0;
}

#changeEmailDialog label {
    display: block;
    padding-bottom: 5px;
}

#changeEmailDialog input[type=email], #changeEmailDialog input[type=password] {
    padding: 0 10px;
}

#AccountManagementMain #changePasswordBlock {
    padding-top: 15px;
}

    #AccountManagementMain #changePasswordBlock .passwordError {
        color: red;
        display: none;
        padding-bottom: 15px;
    }

#UploadPhotoDialog {
    text-align: center;
    line-height: 26px;
}

.confirm-mess {
    display: block;
    margin: 0 0 10px 0;
    padding: 10px;
    border: solid 1px #398a10;
    color: #326026;
    font-weight: bold;
    background: #ddf2dd;
}

.addr-warn {
    clear: both;
}

.thirded ul {
    margin-top: 10px;
}

.selectStore {
    margin: 20px 0 10px 0;
}

.loy-pagin {
    float: right;
    margin-top: 8px;
}

.only-paging .loy-pagin {
    float: none;
    margin-top: 0;
    text-align: right;
}

.loy-pagin .pagination li {
    display: inline-block;
}

    .loy-pagin .pagination li a {
        font-size: 12px;
        display: block;
        width: 24px;
        height: 10px;
        line-height: 10px;
        margin: 3px 0;
        color: #000;
        border-left: solid 1px #000;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }

    .loy-pagin .pagination li:hover a {
        text-decoration: underline;
    }

    .loy-pagin .pagination li:first-child a {
        border-left: none;
    }

    .loy-pagin .pagination li.active a {
        text-decoration: underline;
    }

.loy-list {
    font-size: 13px;
}

.loy-list-head {
    background-color: #fff;
    border-bottom: solid 2px #ccc;
    color: #666;
    font-weight: bold;
}

.loy-list-line .loy-list-col {
    float: left;
    width: 144px;
    padding: 13px;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.couponListRight {
    float: none !important;
}

.loy-list-col.col60 {
    width: 60px;
}

.loy-list-col.col80 {
    width: 80px;
}

.loy-list-col.col110 {
    width: 110px;
}

.loy-list-col.col230 {
    width: 230px;
}

.loy-list-col.col260 {
    width: 260px;
}

.loy-list-col.col538 {
    width: 538px;
}

.loy-list-col.col567 {
    width: 567px;
}

.loy-list-line .loy-list-col.col-total {
    text-align: right;
}

.loy-list-line .loy-list-lineh {
    line-height: inherit;
}

.loy-list-head .loy-list-col {
    min-height: inherit;
    line-height: inherit;
}

.loy-list-body .loy-list-line:last-child {
    border: none;
}

.loy-list-body .loy-list-line {
    border-bottom: dotted 1px #ccc;
}

.loy-right-content .confirm-buttons {
    text-align: right;
}

.loy-fil-libr {
    padding-top: 10px;
}

    .loy-fil-libr h3 {
        padding: 10px 0 5px 0;
    }

    .loy-fil-libr ul {
        margin-bottom: 10px;
    }

.loy-com-list h4 {
    padding: 15px 0 0 0;
}

.loy-com-list li {
    padding: 5px;
}

.loy-card-prod {
    width: 124px;
    min-height: 291px;
    padding: 16px 7px 5px 7px;
    margin: 10px;
    border: solid 1px #ccc;
    text-align: center;
    float: left;
}

.splide .loy-card-prod {
    margin: 10px 0;
    float: none;
}

.loy-card-img {
    display: block;
    position: relative;
    height: 175px;
    width: 120px;
    margin: 0 auto;
}

    .loy-card-img a {
        display: block;
        position: absolute;
        bottom: 0;
        width: 120px;
        text-align: left;
    }

    .loy-card-img img {
        display: block;
        margin: auto;
        max-height: 175px;
        max-width: 120px;
        top: 0;
        left: 0;
    }

.loy-card-prod h3 a {
    display: block;
    height: 30px;
    padding-top: 10px;
    overflow: hidden;
    font-size: 12px;
    color: #666;
    text-decoration: none;
}

.loy-card-prod .loy-rate .rate-star {
    display: inline-block;
    height: 15px;
    width: 15px;
    background: url(Images/star.gif) no-repeat left -1px;
}

.loy-card-prod .loy-rate .star-part {
    display: none;
    height: 15px;
    background: url(Images/star.gif) no-repeat left center;
}

.loy-rate {
    height: 15px;
    margin: 5px 0;
}

    .loy-rate.rate-100 .rate-star.star-1, .loy-rate.rate-125 .rate-star.star-1, .loy-rate.rate-150 .rate-star.star-1, .loy-rate.rate-175 .rate-star.star-1, .loy-rate.rate-200 .rate-star.star-1, .loy-rate.rate-225 .rate-star.star-1, .loy-rate.rate-250 .rate-star.star-1, .loy-rate.rate-275 .rate-star.star-1, .loy-rate.rate-300 .rate-star.star-1, .loy-rate.rate-325 .rate-star.star-1, .loy-rate.rate-350 .rate-star.star-1, .loy-rate.rate-375 .rate-star.star-1, .loy-rate.rate-400 .rate-star.star-1, .loy-rate.rate-425 .rate-star.star-1, .loy-rate.rate-450 .rate-star.star-1, .loy-rate.rate-475 .rate-star.star-1, .loy-rate.rate-500 .rate-star.star-1 {
        background-position: left center;
    }

    .loy-rate.rate-200 .rate-star.star-2, .loy-rate.rate-225 .rate-star.star-2, .loy-rate.rate-250 .rate-star.star-2, .loy-rate.rate-275 .rate-star.star-2, .loy-rate.rate-300 .rate-star.star-2, .loy-rate.rate-325 .rate-star.star-2, .loy-rate.rate-350 .rate-star.star-2, .loy-rate.rate-375 .rate-star.star-2, .loy-rate.rate-400 .rate-star.star-2, .loy-rate.rate-425 .rate-star.star-2, .loy-rate.rate-450 .rate-star.star-2, .loy-rate.rate-475 .rate-star.star-2, .loy-rate.rate-500 .rate-star.star-2 {
        background-position: left center;
    }

    .loy-rate.rate-300 .rate-star.star-3, .loy-rate.rate-325 .rate-star.star-3, .loy-rate.rate-350 .rate-star.star-3, .loy-rate.rate-375 .rate-star.star-3, .loy-rate.rate-400 .rate-star.star-3, .loy-rate.rate-425 .rate-star.star-3, .loy-rate.rate-450 .rate-star.star-3, .loy-rate.rate-475 .rate-star.star-3, .loy-rate.rate-500 .rate-star.star-3 {
        background-position: left center;
    }

    .loy-rate.rate-400 .rate-star.star-4, .loy-rate.rate-425 .rate-star.star-4, .loy-rate.rate-450 .rate-star.star-4, .loy-rate.rate-475 .rate-star.star-4, .loy-rate.rate-500 .rate-star.star-4 {
        background-position: left center;
    }

    .loy-rate.rate-500 .rate-star.star-5 {
        background-position: left center;
    }

    .loy-rate.rate-025 .rate-star.star-1 .star-part, .loy-rate.rate-125 .rate-star.star-2 .star-part, .loy-rate.rate-225 .rate-star.star-3 .star-part, .loy-rate.rate-325 .rate-star.star-4 .star-part, .loy-rate.rate-425 .rate-star.star-5 .star-part {
        display: block;
        width: 5px;
    }

    .loy-rate.rate-050 .rate-star.star-1 .star-part, .loy-rate.rate-150 .rate-star.star-2 .star-part, .loy-rate.rate-250 .rate-star.star-3 .star-part, .loy-rate.rate-350 .rate-star.star-4 .star-part, .loy-rate.rate-450 .rate-star.star-5 .star-part {
        display: block;
        width: 8px;
    }

    .loy-rate.rate-075 .rate-star.star-1 .star-part, .loy-rate.rate-175 .rate-star.star-2 .star-part, .loy-rate.rate-275 .rate-star.star-3 .star-part, .loy-rate.rate-375 .rate-star.star-4 .star-part, .loy-rate.rate-475 .rate-star.star-5 .star-part {
        display: block;
        width: 12px;
    }

.loy-card-btns {
    padding-top: 7px;
}

.loy-card-prod .loy-card-btns .medButton {
    display: block;
    margin-bottom: 5px;
}

.loy-card-prod .loy-card-btns span.present-btn {
    display: block;
    height: 34px;
}

.loy-card-prod .loy-card-btns span .darkMed {
    float: right;
    width: 8px;
    margin-bottom: 0;
}

.loy-card-prod .loy-card-btns span .loy-card-btn-disabled {
    float: left;
    width: 86px;
    line-height: 29px;
    background: #e9e9e9;
    color: #747474;
    font-weight: bold;
}

/* addressess */

#addressListBlock {
    margin-left: -10px;
}

    #addressListBlock .dark-field {
        float: left;
        width: 230px;
        padding: 0;
    }

    #addressListBlock .halfed .addBlock {
        margin: 8px 0;
    }

.orderHDet .halfed {
    padding: 0;
}

#addressListBlock .addBlock {
    position: relative;
    float: none;
    width: auto;
    margin: 8px;
    padding: 9px;
    height: auto;
    background: #fff;
    box-shadow: none;
    border: solid 1px#ccc;
}

/* Overrides .addBlock for legacy user addresses */
#addressListBlock .legacyBlock {
    float: left;
    width: 315px;
    margin: 6px;
    padding: 15px;
}

#addressListBlock h3, .orderHDet h3, .orderHGift h3 {
    padding: 0;
    margin: 0;
}

#addressListBlock h3, .orderHGift h3 {
    margin: 15px 0 0 0;
}

#addressListBlock .addBlock h5 {
    margin: 0 -3px;
    padding: 10px 58px 10px 10px;
    margin-bottom: 15px;
    min-height: 16px;
}

#addressListBlock .addBlock .defaultAddr {
    position: absolute;
    display: inline-block;
    right: 18px;
    top: 18px;
    padding: 1px 2px;
    color: #000;
    background: #ddd;
    font-weight: bold;
    text-transform: uppercase;
}

#addressListBlock .addBlock .loy-addr-cont h4 {
    color: #666;
    border-bottom: dotted 1px #ccc;
    height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-weight: bold;
}

#addressListBlock .addBlock .loy-addr-cont {
    height: 250px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: dotted 1px #ccc;
}

#addressListBlock .addBlock .street {
    padding: 0;
}

#addressListBlock .addBlock .medButton {
    margin-top: 5px;
    height: 29px;
}

/* FAQ */

#AccountManagementMain .faq-content h2 {
    background: #323233;
    color: #fff;
    font-size: 14px;
    padding: 0 15px;
    margin: 0;
    height: 29px;
    line-height: 29px;
    text-shadow: none;
}

#AccountManagementMain .faq-content .faq-options {
    padding: 15px;
    margin-bottom: 16px;
}

.faq-list {
    text-align: left;
}

    .faq-list dl {
        margin: 0;
    }

    .faq-list dt {
        font-weight: bold;
        cursor: pointer;
        text-decoration: underline;
        margin-top: 5px;
    }

    .faq-list dd {
        display: none;
        margin: 6px 0;
        padding: 10px;
        border: #ccc solid 1px;
    }

    .faq-list .closer {
        background: #e6e6e5;
        cursor: pointer;
        float: right;
        width: 16px;
        height: 16px;
        text-align: center;
        font-weight: bold;
        margin-left: 10px;
        border: solid 1px #ccc;
    }
   

@media (max-width: 959px) {

    .titled-sub-content {
        text-align: left;
    }

        .loy-right-content, .sub-small, .sub-big, .titled-sub-content .sub-small, .titled-sub-content .sub-big {
            width: auto;
            float: none;
            margin-top: 10px;
        }

    #addressListBlock .dark-field {
        width: 47%;
    }

        #addressListBlock .dark-field:nth-child(odd) {
            float: right;
        }

    #addressListBlock .addBlock {
        display: block;
        text-align: left;
    }

    .loy-card-prod {
        width: 104px;
    }

    .loy-pagin {
        float: none;
    }

    .mapContainer {
        width: 100%;
    }

    #AccountManagementMain input[type=text], #AccountManagementMain input[type=password], #AccountManagementMain input[type=datetime], #AccountManagementMain input[type=email], #changeEmailDialog input[type=email], #changeEmailDialog input[type=password], #AccountManagementMain select {
        display: block;
        width: auto;
    }

    .loy-card-img, .loy-card-img a, .loy-card-img img {
        width: 100%;
    }

    #leftOpener {
        bottom: 27px;
        top: 0;
    }

    .loy-card-prod .loy-card-btns span .loy-card-btn-disabled {
        width: 65px;
    }
}

@media (max-width: 568px) {

    #addressListBlock .dark-field, #addressListBlock .dark-field:nth-child(odd) {
        float: none;
        width: auto;
    }

    .loy-right-content .tab-buttons-container {
        height: auto;
        border-bottom: none;
        padding: 5px 0;
    }
        .loy-right-content .tab-buttons-container li {
            display: block;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

    #AccountManagementMain .loy-list-line div.loy-list-col {
        width: auto;
        float: none;
        text-align: left;
        padding: 5px 13px;
    }

    .loy-right-content .tab-buttons-container .active-tab a {
        border: 2px solid #616161;
        font-weight: 700;
    }

    .loy-slider-btns {
        padding-left: 10px; 
    }
}


/* Loyalty Merge */

#loy-merge {
    padding: 10px;
}


    #loy-merge h2 {
        background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center #636262; /* Old browsers */
        background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -moz-linear-gradient(top, #636262 0%, #2d2d2c 100%); /* FF3.6+ */
        background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -webkit-gradient(linear, left top, left bottom, color-stop(0%, #636262), color-stop(100%, #2d2d2c)); /* Chrome, Safari4+ */
        background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -webkit-linear-gradient(top, #636262 0%, #2d2d2c 100%); /* Chrome10+, Safari5.1+ */
        background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -o-linear-gradient(top, #636262 0%, #2d2d2c 100%); /* Opera 11.10+ */
        background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -ms-linear-gradient(top, #636262 0%, #2d2d2c 100%); /* IE10+ */
        background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, linear-gradient(to bottom, #636262 0%, #2d2d2c 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#636262', endColorstr='#2d2d2c', GradientType=0 ); /* IE6-9 */
        color: #f6f6f6;
        font-size: 17px;
        padding: 0 15px 0 40px;
        margin-bottom: 15px;
        height: 43px;
        line-height: 43px;
        border-radius: 4px;
        text-align: left;
    }

.mergeDescrHead {
    text-align: center;
    font-size: 12px;
    color: #333;
}

#loy-merge h3 {
    text-align: center;
    font-weight: normal;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
}

    #loy-merge h3 strong {
        font-size: 20px;
        color: #000;
    }

.mergeDescr {
    text-align: center;
    font-size: 17px;
    color: #333;
}

.mergeTable {
    margin: 30px 0 10px 0;
}

.mergeHead, .mergeContent, .mergeEnd {
    clear: both;
}

.mergeContent {
    border: solid 1px #ccc;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

    .mergeContent .mergeFirstCol {
        font-size: 18px;
        line-height: 50px;
        color: #666;
    }

.mergeLine {
    border-top: dotted 1px #ccc;
}

    .mergeLine:first-child {
        border-top: none;
    }

.mergeFirstCol {
    clear: both;
    float: left;
    width: 24%;
}

.mergeOtherCol {
    float: left;
    width: 38%;
}

.mergeOtherColBig {
    float: left;
    width: 76%;
    text-align: center;
}

.confirm-buttons {
    clear: both;
    text-align: right;
}

.mergeLine .mergeOtherCol.activeCol div {
    background: #daf0da;
}

.mergeFirstCol div, .mergeOtherCol div, .mergeOtherColBig div {
    padding: 20px 28px;
}

.mergeHead .mergeOtherCol div, .mergeContent .mergeFirstCol div, .mergeEnd .mergeOtherColBig div {
    background: #f4f4f4;
}


/* tab head*/
.mergeHead .mergeOtherCol div {
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-top-right-radius: 4px;
    
    color: #666;
}

.mergeHead .mergeOtherCol.leftCol div {
    border-right: none;
    border-left: solid 1px #ccc;
    border-top-right-radius: 0;
    border-top-left-radius: 4px;
}

.mergeHead .mergeOtherCol div strong {
    font-size: 18px;
    color: #333;
}

/* tab body */

.mergeContent .mergeFirstCol div, .mergeContent .mergeOtherCol div {
    height: 50px;
}

.mergeContent .mergeOtherCol {
    font-size: 16px;
    color: #666;
}

    .mergeContent .mergeOtherCol strong {
        font-size: 20px;
        color: #333;
    }

.mergeContent label {
    cursor: pointer;
}

.mergeContent input[type="radio"] {
    float: left;
    margin: 20px 10px 20px 0;
}

/* tab foot */
.mergeEnd .mergeOtherColBig div {
    padding-top: 55px;
    background: #f4f4f4 url(Images/mergeAcc.png) no-repeat center 15px;
    border-left: solid 1px #ccc;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    color: #666;
}

#loy-merge .mergeEnd .mergeOtherColBig div h3 {
    font-size: 20px;
    color: #333;
}

.mergeAdvice {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 4px;
    border: solid 1px #9e0039;
}

@media (max-width: 750px) {

    .mergeFirstCol, .mergeOtherCol, .mergeOtherColBig {
        float: none;
        width: auto;
    }

    .mergeHead .mergeOtherCol div, .mergeHead .mergeOtherCol.leftCol div {
        border: solid 1px #ccc;
        border-radius: 4px;
        margin-bottom: 5px;
    }

    .mergeContent {
        border-radius: 4px;
    }

    .mergeEnd .mergeOtherColBig div {
        border: solid 1px #ccc;
        border-radius: 4px;
    }
}


/* Survey */

#loyalty-survey {
    padding: 10px;
}

    #loyalty-survey h1 {
        padding-bottom: 10px;
        font-size: 24px;
    }

    #loyalty-survey .surveyText {
        
        padding-bottom: 10px;
    }

.surveyInfos {
    font-size: 17px;
}

#loyalty-survey h2 {
    background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center #323233; /* Old browsers */
    background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -moz-linear-gradient(top, #323233 0, #2d2d2c 100%); /* FF3.6+ */
    background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -webkit-gradient(linear, left top, left bottom, color-stop(0, #636262), color-stop(100%, #2d2d2c)); /* Chrome, Safari4+ */
    background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -webkit-linear-gradient(top, #323233 0, #2d2d2c 100%); /* Chrome10+, Safari5.1+ */
    background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -o-linear-gradient(top, #323233 0, #2d2d2c 100%); /* Opera 11.10+ */
    background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, -ms-linear-gradient(top, #323233 0, #2d2d2c 100%); /* IE10+ */
    background: url(../Views/Locale/Content/Images/Loyalty/loy-title-img.png) no-repeat 5px center, linear-gradient(to bottom, #323233 0, #2d2d2c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323233', endColorstr='#2d2d2c', GradientType=0 ); /* IE6-9 */
    color: #f6f6f6;
    font-size: 17px;
    padding: 0 15px 0 40px;
    margin-bottom: 15px;
    height: 43px;
    line-height: 43px;
}

#loyalty-survey .title-sub-content {
    background: #323233; /* Old browsers */
    background: -moz-linear-gradient(top, #323233 0, #2d2d2c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #323233), color-stop(100%, #2d2d2c)); /* Chrome, Safari4+ */
    background: -webkit-linear-gradient(top, #323233 0, #2d2d2c 100%); /* Chrome10+, Safari5.1+ */
    background: -o-linear-gradient(top, #323233 0, #2d2d2c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #323233 0, #2d2d2c 100%); /* IE10+ */
    background: linear-gradient(to bottom, #323233 0, #2d2d2c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323233', endColorstr='#2d2d2c', GradientType=0 ); /* IE6-9 */
    color: #f6f6f6;
    
    padding: 0 15px;
    margin-top: 15px;
    height: 29px;
    line-height: 29px;
    text-shadow: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

#loyalty-survey .titled-sub-content {
    padding: 15px;
    margin-bottom: 16px;
    border: solid 1px #d1d1d1;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.surveyImg {
    float: right;
    margin-left: 15px;
    width: 100px;
}

    .surveyImg img {
        width: 100%;
    }

.survey-block-title {
    float: left;
}

.survey-legend {
    border-top: dotted 1px #d2d2d2;
    float: right;
    width: 430px;
    padding: 9px 20px;
    margin-bottom: 10px;
}

.survey-legend-up {
    text-align: center;
    margin-bottom: 9px;
    font-weight: bold;
    color: #666;
    text-shadow: 1px 1px 1px #fff;
}

.survey-legend-right {
    float: right;
    margin-right: 13px;
}

.survey-legend-left {
    float: left;
    margin-left: 13px;
}

.survey-group {
    padding: 20px;
    margin-bottom: 12px;
}

.survey-line {
    padding: 10px 0;
    border-top: dotted 1px #d2d2d2;
}

    .survey-line:first-child {
        border-top: none;
    }

.survey-question {
    float: left;
    width: 49%;
    font-weight: bold;
}

.survey-answers {
    float: right;
    width: 430px;
}

    .survey-answers textarea {
        width: 100%;
        border-radius: 4px;
    }

.survey-answer-scale {
    float: left;
    width: 9%;
    text-align: center;
}

    .survey-answer-scale input {
        margin: 3px;
    }

#feedbackContactPreference h4 {
    margin-left: 0;
}

#feedbackContactPreference .survey-answers {
    font-weight: bold;
}

#feedbackContactPreference input {
    margin-top: 6px;
}


/*start Loyalty Upgrade styles */

.loyaltyUpgradePageContainer {
    background: #e7e7e7;
    width: 95%;
    border-radius: 5px;
    color: #707070;
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 2.5em 0;
    margin: 1em;
}

    .loyaltyUpgradePageContainer .loyaltyUpgradePageImg img {
        max-width: 100%;
    }

.loyaltyUpgradePageText {
    padding: 0 0 100px 0;
}

.loyaltyUpgradePageText {
    color: #707070;
    font-family: "Poppins";
    text-transform: none;
}

    .loyaltyUpgradePageText h1::after {
        content: "";
        width: 80%;
        margin-top: 0.5em;
        background-color: rgba(255, 255, 255, 0.3);
        display: block;
        position: relative;
        height: 1px;
    }

.loyaltyUpgradeEligibleFor {
    color: #707070;
}

.loyaltyUpgradePageImg {
    justify-content: center;
    align-items: center;
    display: flex;
    width: 400px;
}

.bigButton {
    height: 2.5em;
    padding: 0 1em;
    color: #fff !important;
    border: 2px solid #e81e25;
    background-color: #e81e25;
    border-radius: 2em !important;
    font-family: "Poppins", sans-serif;
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 600 !important;
    line-height: 2.5em;
    text-decoration: none;
    height: 2.5em;
    padding: 0 1em !important;
    transition: 0.1s ease;
    pointer-events: all;
    cursor: pointer;
    text-transform: capitalize !important;
}

    .bigButton:focus,
    .bigButton:hover {
        border-color: #bf1218 !important;
        background-color: #bf1218 !important;
    }

        .bigButton:focus span,
        .bigButton:hover span {
            color: #fff !important;
        }

@media (max-width: 576px) {
    .loyaltyUpgradePageContainer {
        width: 95%;
        border-radius: 5px;
        color: #fff;
        display: flex;
        position: relative;
        justify-content: start;
        align-items: center;
        padding: 2.5em 0;
        height: 550px;
        margin: 1em;
        flex-direction: column-reverse;
    }

    .loyaltyUpgradePageText {
        padding: 1em;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 90%;
    }

        .loyaltyUpgradePageText h1 {
            margin: 0;
        }

            .loyaltyUpgradePageText h1::after {
                content: "";
                width: 80%;
                margin-top: 0.5em;
                background-color: rgba(255, 255, 255, 0.3);
                display: block;
                position: relative;
                height: 1px;
                margin: 0 auto;
            }

    .loyaltyUpgradeDisclaimer {
        margin-left: 0;
        text-align: center;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .loyaltyUpgradePageContainer .loyaltyUpgradePageImg {
        width: fit-content;
    }

        .loyaltyUpgradePageContainer .loyaltyUpgradePageImg img {
            max-width: 100%;
            height: 100px;
            object-fit: cover;
        }

    .loyaltyUpgradeDisclaimer {
        margin-left: 0;
        margin-right: 0;
        margin-top: 1em;
    }

    .loyaltyUpgradePageInfos label {
        font-size: 0.5em;
    }

    .loyaltyUpgradePageInfos strong {
        font-size: 0.8em;
        display: block;
    }
}

.loyaltyUpgradePageAdd {
    font-size: 3em;
    display: flex;
    width: fit-content;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.loyaltyUpgradePageInfos {
    font-size: 16px;
    font-family: "Poppins";
    padding: 20px 0;
}

    .loyaltyUpgradePageInfos p {
        font-size: 2em;
    }

.loyaltyUpgradeDisclaimer {
    margin-left: 0;
}

.loyaltyUpgradePageAdd {
    font-size: 3em;
}

@media (max-width:576px) {
    .loyaltyUpgradeFooter {
        margin: 10px;
        border-top: solid 1px #e7e7e7;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2em;
    }

    .loyaltyUpgradeFooterRight {
        float: right;
        text-align: center;
        width: 80%;
    }

    .banner-container {
        margin: 3vh 0 0 0 !important;
    }
}

button.bigButton.disabled {
    background: #ddd;
    background-position: 0 0;
    border: solid 2px #ddd;
    color: #616161;
    cursor: default;
    pointer-events: none;
}

/*End of Loyalty Upgrade styles */  

/* ------------------------------------------- For all viewers under normal 960px width ------------------------------------------- */
@media (max-width: 959px) {

    body {
        background: none !important;
    }

    .navDrop {
        display: inline-block;
        margin-right: 5px;
    }

        .navDrop ul {
            z-index: 15;
            left: auto;
            right: 0;
        }

    .ui-autocomplete li.autoSing ol {
        top: 0;
        display: none !important;
    }

    .ui-autocomplete li.autoSing a.ui-state-hover {
        margin-left: 0;
        padding-left: 8px;
        background-position: -30px 0;
    }

    .nav-left {
        display: flex;
        justify-content: flex-start;
    }

    .nav-centre {
        display: flex;
        flex-grow: 1;
        flex-direction: row-reverse;
        flex-grow: 1;
        margin-right: 30px;
    }

    .nav-right {
        flex-basis: 55%;
        justify-content: flex-end;
    }

    a.nav__search, a.nav__gsflyer, a.nav__store, a.nav__cart, a.nav__account, a.nav__customerService, a.nav__language, a#languageChangeNewLink {
        align-items: flex-end;
        padding: 5px 0 0px 0;
    }

    #menu {
        background: #5a5a5a;
        position: relative;
        height: auto;
        text-align: left;
    }

    .mainBody, .rightContent, .addedDetInfo, .prodInfo, .platformHomeCustom .rightBlock, #inStores .inCol, .imgSliderWindow {
        width: auto;
    }

    .mainBody {
        position: relative;
    }

    .singleProduct {
        flex-direction: column;
        padding: 10px 20px;
        margin: 0;
    }

    .singleProdInfo {
        padding: 0 20px;
        text-align: left;
    }

    .prodSugg {
        padding: 0 20px;
    }

    .bx-prev {
        left: 0;
    }

    .bx-next {
        right: 0;
    }

    .bx-prev:active {
        left: 2px;
    }

    .bx-next:active {
        right: -2px;
    }

    bx-viewport {
        height: auto !important
    }

    .singleAdd {
        float: none;
        display: inline-block;
    }

    .searchDivider, #scroller {
        text-align: left;
    }

    .bundleBuilder {
        margin: 20px;
    }

    .bundleConstruct.fixed {
        width: 100%;
    }

    .halfed, .orderHShip .halfed, .orderHShip .halfed:first-child {
        width: 48%;
        padding: 1%;
    }

    .pwdStr {
        width: 85%;
        max-width: 300px;
        padding: 0 10px;
        background-position: 86% 1.5%;
        background-size: 315% auto;
        margin-left: 0;
        margin-right: auto;
    }

    .pwdLow {
        background-position: 86% 5.5%;
    }

    .pwdMed {
        background-position: 86% 10%;
    }

    .pwdHi {
        background-position: 86% 14.5%;
    }

    .pwdPer {
        background-position: 86% 19%;
    }

    .loginFormIn input[type=text],
    .mainContainer input[type=datetime],
    .mainContainer input[type=PhoneNumber],
    .mainContainer select,
    #addrForm input[type=password],
    #addrForm input[type=text],
    #addrForm input[type=text],
    #addrForm select {
        margin: 0 auto 15px 0;
    }

    .mainContainer select,
    #addrForm select {
        width: 100%;
    }

    .leftBar {
        width: auto;
        padding: 10px;
        background: #FFF url(Images/left-bar-background.png) repeat-y 0 0;
        background: #eee;
        left: -230px;
        width: 215px;
        top: -3944px;
        position: fixed;
        float: none;
        margin: 0 auto;
        text-align: left;
        box-shadow: 2px 2px 3px 0 #999;
        z-index: 10;
        border-top-right-radius: 5px;
    }

    .leftBarIn {
        overflow-x: hidden;
        overflow-y: auto;
        background: url("Images/filters.png") no-repeat scroll -208px bottom transparent;
    }

    .filterType {
        background: none;
        border-bottom: solid 1px #bbb;
    }

    .leftBarBlock {
        background: none;
    }

    #leftOpener {
        display: block;
    }

    .breadCrumb, .searchSum {
        text-align: left;
    }

    #AccountManagementMain .leftBar {
        background: #eee;
    }

    .locatorPage .mapOut {
        margin: 0 20px 20px;
    }

    #OrderDetails table tr, #OrderDetails table td, .orderHProd table tbody tr, .orderHProd table tbody td {
        text-align: left;
    }

    .platformHomeCustom {
        padding: 0 20px;
    }

    /* mobile view*/

    .toTopBtn {
        bottom: 50px;
    }

    .loginBlock .registerFormIn, .logButtons, .loginBlockIn.newRegister .loginForm.wideForm {
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        width: auto;
    }

    .loginBlock .registerHeader {
        width: auto;
    }

    .loginBlockIn.newRegister .loginForm.wideForm fieldset {
        background: none;
    }


    .loginBlockIn.newRegister .loginForm.wideForm .loginLine {
        overflow: inherit;
    }

    .loginBlockIn.newRegister .loginForm.wideForm .loginSplit {
        float: none;
        width: auto;
    }

        .loginBlockIn.newRegister .loginForm.wideForm .loginSplit:first-child {
            float: none;
        }

    .searchRefinement {
        display: none;
    }

        .searchRefinement span:nth-child(1) {
            margin-left: 5px;
            padding-left: 0;
        }

        .searchRefinement span:nth-child(2) {
            display: block;
        }

    #ResponsiveLoginBlockIn {
        display: flex;
    }

    .mainContainer {
        padding-top: 0 !important;
    }

    .searchSum {
        margin-top: 0;
    }

    #AccountManagementMain .loy-list-line div.loy-list-col.couponList {
        text-align: left;
        padding: 5px 0;
    }

    .loy-main-img-right {
        margin-left: auto;
        margin-right: auto;
    }

    #couponDetailsTable table,
    #couponDetailsTable thead,
    #couponDetailsTable tbody,
    #couponDetailsTable th,
    #couponDetailsTable td,
    #couponDetailsTable tr {
        display: block;
        border: 0;
    }

        #couponDetailsTable thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #couponDetailsTable {
        width: 100%;
    }

        #couponDetailsTable tr {
            border: 1px solid #ccc;
            margin-bottom: 5px;
            padding-bottom: 5px;
        }

        #couponDetailsTable td {
            border: none;
            position: relative;
            padding-left: 42%;
            white-space: normal;
            padding-bottom: 5px;
        }

            #couponDetailsTable td:before {
                position: absolute;
                left: 6px;
                font-weight: bold;
            }

            #couponDetailsTable td:before {
                content: attr(data-title);
            }

    .loyalty-content-sub > .titled-sub-content {
        display: none;
    }

    .myAccountHeader > span {
        display: block;
        float: right;
        font-size: 25px;
        transition: 0.3s;
    }

    .myAccountHeader.opened > span {
        transform: rotate(45deg);
    }

    .myAccountHeader {
        border-bottom: 1px solid white;
        background: url(Images/accord-icon.png) no-repeat right -216px;
    }

    .titled-sub-content .sub-small {
        float: left;
    }

    .desktopSearchPriceInfo {
        display: none !important;
    }

    .desktopSearchProductTitle {
        display: none !important;
    }

    .searchTilePriceDesktop {
        display: none !important;
    }

    .mobileSearchProductInfo {
        display: inherit;
    }

        .mobileSearchProductInfo h4 {
            color: #808080;
            font-weight: normal;
            margin-bottom: 5px;
        }

    .searchTilePriceMobile {
        display: inherit;
    }

    .ribbonMobileSpacer {
        display: inherit;
    }

    .megaButtonPromember {
        display: block;
        margin: 0;
        width: auto;
    }

    .upgradeTierInfo {
        font-weight: bold;
    }

    .autoNoRes {
        height: 25px;
        top: 31px;
    }

    #lblCartCount {
        font-size: 11px;
        margin-right: 3px;
    }

    .badge {
        padding-left: 9px;
        padding-right: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
    }

    .badge-warning[href] {
        background-color: #c67605;
    }

    .navCart {
        color: #323233;
        display: none;
    }

    .navCartTotal {
        color: #ee3124;
        display: none;
    }
    /*********************Account side menu css start*********************/
    .accountSideMenu {
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }
    /*********************Account side menu css End*********************/

    .loy-mobile-barcode {
        display: none;
    }

    /*********************Error on Register form css Start*********************/

    .registerInputField span.errorXFirstName::before {
        top: -28px;
        left: 90%;
    }

    .registerInputField span.errorXSurName::before {
        top: -28px;
        left: 90%;
    }

    .registerInputField span.errorXEmail::before {
        top: -28px;
        left: 90%;
    }

    .registerInputField span.errorXPassword::before {
        top: -28px;
        left: 90%;
    }

        /*********************Error on Register form css End*********************/

    }




@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /*********************Error on Register form css Start*********************/


    .registerInputField span.errorXFirstName::before {
        top: -28px;
        left: 90%;
    }

    .registerInputField span.errorXSurName::before {
        top: -28px;
        left: 90%;
    }

    .registerInputField span.errorXEmail::before {
        top: -28px;
        left: 90%;
    }

    .registerInputField span.errorXPassword::before {
        top: -28px;
        left: 90%;
    }

    /*********************Error on Register form css End*********************/
}



/* ------------------------------------------- medium - landscape (tablet) ------------------------------------------- */
@media (min-width: 569px) and (max-width: 959px) {

    .nav-right {
        justify-content: flex-end;
    }

    .autoNoRes {
        height: 13.5px;
        top: 31px;
    }

    .quickSearch {
        float: left;
        margin-left: 2%;
        margin-bottom: 5px;
    }

    #Nav__logo {
        width: 150px;
        height: 30px;
        padding: 10px 0 0 10px;
    }

    .hamburgerMenu {
        display: inline-block;
        width: 30px;
        height: 40px;
        margin: 0 15px 0 10px;
        background: url(Images/NavBar/Menu.svg) no-repeat;
        background-size: 30px 40px;
        overflow: hidden;
    }

    .navIcon {
        display: none;
    }

    .nav-left {
        flex-basis: 35%;
    }

    .imgSliderWindow {
        padding: 10px 20px;
    }

    .width1-3 {
        float: left;
        width: 33%;
        margin: 0;
        padding: 0;
    }

    .platformHomeCustom .bx-wrapper {
        padding: 0;
        height: auto !important;
    }

    .platformHomeCustom img {
        display: block;
        width: 100%;
    }

    .width2-3, .platformHomeCustom .rightBlock {
        float: right;
        width: 61%;
        margin: 0;
        padding: 0;
    }

    .platformHomeCustom .banner.width1-3 {
        width: 33%;
    }

    .platformHomeCustom .rightBlock {
        max-height: 320px;
        overflow: hidden;
    }

    .width3-3 {
        float: none;
        width: 100%;
        margin: 10px 0;
        padding: 0;
    }

    .banner.width1-3 {
        width: 100%;
    }

        .banner.width1-3 .banner {
            float: none;
            vertical-align: middle;
            display: inline-block;
            margin: 10px
        }

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

    .platformBlock {
        display: inline-block;
        float: none;
    }

    .twoColumns {
        background: #fff;
    }

    .sorting {
        display: none;
        /* add slide in*/
    }

    .rightContent {
        float: none;
    }


    /* prod sheet */

    .prodInfo {
        text-align: left;
        width: 66%;
        padding: 0;
    }

    #inStores .inCol {
        float: none;
    }

    .imgSliderWindow, #imgSlider, #imgSlider li {
        height: auto;
    }

        #imgSlider img {
            display: block;
            width: 100%;
        }

    /* login */

    .loginBlockIn {
        padding: 5px 0 30px 5px;
    }

        .loginBlockIn .loginForm, .loginBlock fieldset {
            padding: 0;
            background: none;
            text-align: left;
        }

    .loginBlock .registerHeader {
        width: auto;
    }

    .loginBlock .registerFormIn {
        width: auto;
    }

        .loginBlock .registerFormIn .logButtons {
            width: auto;
        }

    .loginForm fieldset {
        width: 98%
    }

    #addrForm select {
        width: 100%;
    }

    .loginBlock h1 {
        margin: 0;
    }

    .loginBlock fieldset .loginBtnText {
        display: inline-block;
        width: 98%;
    }

        .loginBlock fieldset .loginBtnText .megaButton {
            display: block;
            margin: 0;
            width: auto;
        }


    .loyaltyRemRight {
        margin: 0;
    }


    #CustomSkin {
        display: none;
    }

    .locatorLegend span {
        margin-left: 10px;
    }

    .couponTable td {
        padding: 8px 11px;
    }

    .sorting .searchSum span {
        padding-top: 10px;
    }

    /*new navbar changes*/
    .hamburgerLogo {
        background-size: 100%;
        display: block;
        margin: -10px 0;
        width: 166px;
    }

    .nav__search, .nav__cart, .nav__account {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        min-width: 65px;
        overflow: hidden;
        white-space: nowrap;
    }


    .nav-drop ul {
        position: absolute;
        top: 55px;
        background: #fff;
        z-index: 15;
    }

    .nav__gsflyer, .nav__store, .nav__customerService, .nav__language {
        display: none;
    }

    .navbar-row {
        justify-content: space-between;
        width: 95%;
        margin-right: 140px;
        margin-left: 3%;
        padding: 5px 0 5px 0;
    }


    .gsFlyerDrop, .storeDrop, .languageDrop, .customerServiceDrop {
        background-size: 50px 50px;
        margin-left: 10px;
        padding-bottom: 10px;
    }

    .menuIcon-container {
        display: flex;
        border-top: 1px solid #DFDBD9;
        padding-top: 24.5px;
        margin-right: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }

    a#languageChangeNewLink span {
        margin-left: 11px;
        font-size: 12px;
    }

    span.menuIcon-container__span {
        margin-left: 10px;
        padding-bottom: 20px;
    }

    .menuIcon-container__language {
        margin-left: 10px;
    }

    a.menuIcon-container__gsflyer, a.menuIcon-container__store, a.menuIcon-container__customerService, a.menuIcon-container__language {
        color: #323233;
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
        font-size: 12px !important;
    }

    .menuIcon-container__gsflyer, .menuIcon-container__store, .menuIcon-container__language, .menuIcon-container__customerService {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        min-width: 75px;
        overflow: hidden;
        white-space: nowrap;
    }

    .shortLangBtn {
        display: none;
    }

    .hideSearch {
        display: flex;
    }

    .hidenavCentre {
        display: none;
    }

    hidenavEnd {
        display: none;
    }

    .fixedNavBarDisplay {
        display: flex;
    }

    .nav-centre-position-handler {
        flex-wrap: wrap;
        animation: none !important;
    }

    .nav-centre {
        flex-basis: 95%;
        flex-grow: 0;
        flex-direction: column;
        animation: none !important;
        margin-left: 4%;
    }

    .nav-end {
        flex-basis: 95%;
        flex-grow: 0;
        flex-direction: column;
        order: 3;
        animation: none !important;
        margin-left: 4%;
    }
    .loginArticle {
        max-width: 45%;
    }
}









/* ------------------------------------------- medium + portrait (tablet) ------------------------------------------- */
@media (min-width: 569px) and (max-width: 750px) {

    .loy-mobile-barcode {
        display: none;
    }

    .mainDrop {
        width: 30px;
        padding: 0;
        overflow: hidden;
        margin: 0;
        text-indent: -3000px;
        background-position: center;
        background-size: 100%;
    }

    .accountDrop {
        width: 30px;
        padding: 0;
        overflow: hidden;
        margin: 0;
        text-indent: -3000px;
        background-position: center;
        background-size: 100%;
    }

    .nav-drop ul {
        position: absolute;
        top: 55px;
        background: #fff;
        z-index: 15;
    }

    .quickSearch {
        float: none;
        height: 54px;
        margin: 5px auto -5px;
        width: 353px;
    }

    .singleProduct .prodImg {
        margin: 0;
        text-align: left;
    }

    .addBlock {
        float: none;
        width: 100%;
        padding: 10px 0;
        margin: 6px 0;
    }

    #CustomSkin {
        display: none;
    }

    .buySection, .prodWishBlock {
        padding-left: 0;
    }

    .variantsContainer {
        padding-left: 10%;
    }

    .accDropLoggedIn {
        margin-bottom: 1px;
        max-width: 80%;
    }
}

@media (max-width: 750px) {

    .loy-mobile-barcode {
        display: none;
    }

    .bundleProductVariant > div {
        flex-wrap: wrap;
    }

    .bundleProductVariant .pImage {
        margin-bottom: -20px;
    }

    .bundleProductVariant .details {
        width: calc(100% - 120px);
    }

    .bucketList .bundleProductVariant .buttons {
        justify-content: space-between;
        margin-top: 15px;
        width: 100%;
    }

    .bundleList .bundleProductVariant .buttons {
        width: 100%;
        text-align: right;
        padding-top: 10px;
    }

    .bundleList .bundleProductVariant .bundleRemove {
        width: 100%;
    }

    .bundleProductVariant .variantType {
        display: none;
    }

    .navDrop {
        padding-right: 5px;
        margin-right: 5px;
    }

    .giftcardBlock {
        width: auto;
    }

    .locatorLegend span {
        width: 70%;
        vertical-align: middle;
        display: inline-block;
        margin-right: 30px;
        line-height: normal;
    }

    .orderHShip .halfed, .orderHShip .halfed:first-child {
        float: none;
        width: auto;
        padding: 0;
    }

    .orderHShip .singleAdd {
        min-height: initial;
    }

        .orderHShip .singleAdd div {
            width: auto !important;
        }

    #favouriteStoreDiv h5 {
        float: left;
    }

    .prd-bonus {
        float: none;
        margin: 40px auto 0 auto;
        text-align: left;
        width: 60%;
    }

    /* UX review */
    .prodLeftBlock, .prodRightBlock {
        float: none;
        width: 100%;
    }

    #addedDet {
        text-align: left;
    }

    .addedDetInfo {
        text-align: left;
    }

        .addedDetInfo label {
            width: inherit;
        }



    .giftCardEditor {
        margin-top: 10px;
    }

        .giftCardEditor .giftCardText {
            background: none;
            padding: 0;
            margin: 0 auto;
            width: 95%;
        }

        .giftCardEditor .giftCardDisc {
            padding: 10px 10px 35px 10px;
        }

        .giftCardEditor h3.gift2 {
            float: left;
            width: 100%;
            text-align: left;
        }

        .giftCardEditor .CheckboxType p {
            float: left;
            width: 80%;
            text-align: left;
        }

        .giftCardEditor h3.gift3 {
            float: left;
            width: 100%;
            text-align: left;
        }

        .giftCardEditor .ChooseAmount div.DropDownList {
            float: left;
            width: 40%;
        }

        .giftCardEditor .OtherAmount {
            width: 60%;
        }

        .giftCardEditor .Quanity {
            float: left;
            width: 100%;
            text-align: left;
        }

            .giftCardEditor .Quanity input[type=number] {
                float: left;
                width: 95%;
            }

            .giftCardEditor .Quanity .field-validation-error {
                width: 94%;
                float: left;
                margin-left: 0;
            }

        .giftCardEditor .giftStep {
            float: left;
            margin: 0 auto;
            padding: 0;
            width: 94%;
        }

        .giftCardEditor .giftStep {
            width: 100%;
        }

            .giftCardEditor .giftStep input[type=text] {
                margin: 0;
                float: left;
                width: 98%;
                margin: 5px 0 15px 0;
            }

        .giftCardEditor .giftBig h3 {
            float: left;
            text-align: left;
            margin: 0;
        }


        .giftCardEditor .giftBig textarea {
            margin: 0;
            width: 96%;
            float: left;
        }

    .giftCardTotal .addNewGiftCard {
        display: block;
        text-align: center;
        margin-bottom: 10px;
        width: 94%;
    }

        .giftCardTotal .addNewGiftCard .bigButton {
            float: none;
            width: auto;
            margin: auto 0;
        }

    .giftCardTotal .checkGiftCardBalance {
        display: block;
        width: auto;
        text-align: center;
        margin-bottom: 10px;
        float: left;
        width: 94%;
    }

        .giftCardTotal .checkGiftCardBalance .bigButton {
            float: none;
            width: auto;
            margin: auto 0;
        }

    .giftCardTotal .addGiftCardToCart {
        display: block;
        width: auto;
        text-align: center;
        margin-bottom: 10px;
        float: left;
        width: 94%;
    }

        .giftCardTotal .addGiftCardToCart .bigButton {
            float: none;
            width: auto;
            margin: auto 0;
        }

    .giftStep .field-validation-error {
        display: block;
        float: left;
        margin-top: 3px;
        width: 95%;
    }

    .DLCVariant {
        margin: 0 auto;
        float: none;
        text-align: center;
    }

    #addedDet {
        margin: 0 auto;
        float: none;
        text-align: center;
    }

    .locatorLegend {
        padding-bottom: 15px;
    }

    .singleVariantRadio {
        margin-right: 10px;
    }

    .sorting {
        display: none;
        /* add slide in*/
    }

    /* Centres CNET logo on mobile */
    div.ccs-logo-ls > table {
        width: 100%;
    }

    div.ccs-logo-ls-entry.ccs-logo-ls-xbox {
        width: 20%;
        margin-left: auto;
        margin-right: auto;
    }

    .tradeValueBlock, .havelist-wishlist-block {
        margin-top: 15px;
    }

    .loy-main-img-right {
        margin-left: auto;
        margin-right: auto;
    }

    .loy-list-line .loy-list-col {
        padding: 7px;
    }

    .loy-list-col.col230 {
        width: 210px;
    }

    .nav__gsflyer, .nav__store, .nav__customerService {
        display: none;
    }

    .buttonContainerProMember {
        flex-direction: column;
    }
}


/* ------------------------------------------- small - landscape (cellphone) ------------------------------------------- */
@media (max-width: 568px) {

    .hamburgerMenu {
        display: inline-block;
        width: 30px;
        height: 40px;
        margin: 0 0 0 10px;
        background: url(Images/NavBar/Menu.svg) no-repeat;
        background-size: 30px 40px;
        overflow: hidden;
    }

    .bundleBuilder {
        margin: 20px;
    }

    .bundleProductVariant {
        padding-left: 0;
        padding-right: 0;
    }

    .bundleBuilderRight h2 {
        padding-bottom: 0.2em;
    }

    .bundleList .bundleProductVariant .details h4 {
        display: none;
    }

    .accDrop {
        background: url(Images/NavBar/account.svg) no-repeat;
        margin-top: -1px !important;
    }

    .hamburgerLogo {
        background-size: 100%;
        margin: -4px 0;
        width: 150px;
    }

    .nav-left {
        justify-content: start;
        flex-basis: 40%;
    }

    .navIcon {
        display: none;
    }

    .hideSearch {
        display: flex;
    }

    .hidenavCentre {
        display: none;
    }

    .nav-centre {
        flex-basis: 95%;
        flex-grow: 0;
        flex-direction: column;
        animation: none !important;
        margin-left: 4%;
    }

    .nav-center-display {
        flex-wrap: nowrap;
    }

    .quickInputContainerNewNavBar {
        position: relative;
        height: 46px;
        border: solid 1px #c3c3c3;
        border-radius: 8px;
        display: flex;
        /*flex-direction: row-reverse; */
        margin-bottom: 2px;
        /* margin-left: 20px; */
        width: 96%;
    }

        .quickInputContainerNewNavBar.active input, .quickInputContainerNewNavBar input:focus, .quickInputContainerNewNavBar input:valid {
            width: 90%;
        }

        .quickInputContainerNewNavBar a {
            padding: 8px;
        }

    .navSearchBtnContainer {
        margin-top: 2.5%;
    }

    .nav-end {
        flex-basis: 95%;
        flex-grow: 0;
        flex-direction: column;
        order: 3;
        animation: none !important;
        margin-left: 4%;
        margin-bottom: 2%;
    }

    .fixedNavBarDisplay {
        display: flex;
    }

    .nav-searchbar-position-handler {
        order: 3;
        animation: none !important;
    }

    .nav-centre-position-handler {
        flex-wrap: wrap;
        animation: none !important;
    }

    .nav__search, .nav__gsflyer, .nav__store, .nav__cart, .nav__account, .nav__language, .nav__customerService, .nav__searchNew {
        min-width: 50px !important;
    }

    .accDropLoggedIn {
        margin-top: 3px;
        height: 25px;
    }

    .nav__gsflyer, .nav__store, .nav__customerService, .nav__language {
        display: none;
    }

    .searchDrop, .cartDrop, .accDrop {
        display: flex;
        padding: 0 0 0 35px;
        height: 35px;
        background-size: 30px 30px;
    }

    .gsFlyerDrop, .storeDrop, .languageDrop, .customerServiceDrop {
        background-size: 50px 50px;
        padding-bottom: 10px;
        margin-left: 10px;
    }

    .menuIcon-container__language {
        margin-left: 10px;
    }

    .menuIcon-container {
        display: flex;
        border-top: 1px solid #DFDBD9;
        /*width: 334px;*/
        width: 90.5%;
        padding: 25px 0 50px 0;
        margin-right: 30px;
        flex-wrap: wrap;
        justify-content: center;
        position: sticky;
        bottom: 0;
        background-color: #fff;
    }

    a#languageChangeNewLink span {
        margin-left: 11px;
        font-size: 12px !important;
    }

    span.menuIcon-container__span {
        margin-left: 11px;
    }

    a.menuIcon-container__gsflyer, a.menuIcon-container__store, a.menuIcon-container__customerService, a.menuIcon-container__language {
        color: #323233;
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
        font-size: 12px !important;
        padding-bottom: 20px;
    }

    .menuIcon-container__gsflyer, .menuIcon-container__store, .menuIcon-container__language, .menuIcon-container__customerService {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        min-width: 75px;
        overflow: hidden;
        white-space: nowrap;
    }

    .shortLangBtn {
        display: none;
    }

    #lblCartCount {
        font-size: 11px;
        margin-right: 5px;
    }

    .badge {
        padding-left: 9px;
        padding-right: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
    }

    .badge-warning[href] {
        background-color: #c67605;
    }

    .navCart {
        color: #323233;
        display: none;
    }

    .navCartTotal {
        color: #ee3124;
        display: none;
    }

    .navBarMessage {
        position: fixed;
        top: 41px;
        z-index: 12;
        right: -3px;
    }

    .platformBlock, .platformBlock:first-child {
        float: none;
        margin: 0 auto 20px auto;
    }

    .platformHomeCustom .rightBlock {
        float: none;
    }

    .platformHomeCustom .bx-wrapper {
        float: none !important;
        margin: 0 auto !important;
    }

    /*New head*/

    .mainDrop {
        width: 30px;
        padding: 0;
        overflow: hidden;
        text-indent: -3000px;
        background-position: center;
        background-size: contain;
    }

    .accountDrop {
        width: 30px;
        padding: 0;
        overflow: hidden;
        margin: 0;
        text-indent: -3000px;
        background-position: center;
        background-size: contain;
    }


    .quickSearch {
        float: none;
        clear: both;
        margin: 5px auto 5px auto;
        width: 90%;
    }

    .quickInputContainerWiderBackgroundNewNavBar {
        flex-direction: row;
        border: solid 1px #ccc;
        border-radius: 10px;
        margin-top: 10px;
    }

    .navFixedPositionAligner {
        padding-top: 0px;
        padding-left: 2px;
        cursor: pointer;
    }

    .quickSearchInput {
        z-index: 2;
    }

    .autoNoRes {
        height: 15px;
        z-index: 6;
        position: absolute;
    }

    .ui-autocomplete {
        width: 89%;
    }

        .ui-autocomplete li.autoSing h4 {
            font-size: 11px;
            font-weight: normal;
        }

        .ui-autocomplete li.autoSing img {
            display: none;
        }

        .ui-autocomplete li.autoSing ul {
            display: none;
        }

        .ui-autocomplete li.autoSing p {
            display: none;
        }

        .ui-autocomplete li.autoSing span {
            display: none;
        }


    .imgSliderWindow, #imgSlider, #imgSlider li {
        height: auto;
    }

        #imgSlider img {
            display: block;
            width: 100%;
        }

    .loginBlockIn {
        padding: 0 0 30px 0;
    }

        .loginBlockIn .loginForm {
            float: none;
            padding: 0;
            margin: 10px auto;
            width: auto;
        }

    .loginBlock fieldset {
        min-height: inherit;
        width: auto;
        background: none;
        text-align: left;
    }

        .loginBlock fieldset .megaButton {
            width: auto;
        }

    .loginBtnText {
        padding: 0 11px
    }

    .loginBlockIn.newRegister .loginForm.wideForm {
        margin: 0;
        width: auto;
        max-width: inherit;
    }

    .field-validation-error {
        width: auto;
    }

    .pwdStr {
        margin: -10px auto 15px 0;
    }

    .rightContent, .prodInfo, .mainInfo .prodImg, #inStores .inCol, .singleProdInfo {
        float: none;
    }

    .mainInfo .prodImg {
        display: block;
        margin: 0 auto;
        height: auto;
    }

    .havelist-wishlist-block {
        height: auto;
    }

    .imgSliderWindow, #inStores .inCol, .prodInfo {
        padding: 9px 0;
    }

    .mainInfo, .addCartBar {
        height: auto;
    }

    /* ultra new end */

    .leftBarSlider {
        width: auto;
        background: #FFF url(Images/left-bar-background.png) repeat-y 0 0;
        background: #FFFFFF;
        left: -230px;
        width: 100%;
        top: -3944px;
        position: fixed;
        float: none;
        margin: 0 auto;
        text-align: left;
        box-shadow: 0 0 8px #000000;
        box-shadow: 0 0 8px rgba(0,0,0,0.10);
        border-top-right-radius: 5px;
    }

    .leftBarInSlider {
        height: 99vh;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        font-size: 16px;
    }

    .leftBarBlockSlider {
        width: 100%;
        min-height: 142px;
        color: #666;
        margin-left: 20px;
    }

        .leftBarBlockSlider:first-child {
            margin-top: 0;
        }

    .enhancedActiveSlider {
        height: 100%;
        position: fixed !important;
        z-index: 9999999999999999999999;
        overflow: visible;
        margin: 0;
        top: 0 !important;
        width: 100%;
    }

    .sliderHeader {
        width: 97%;
        line-height: 29px;
        color: #000;
        text-shadow: none;
    }

    .sliderHeaderLocalized {
        width: 97%;
        line-height: 29px;
    }

    .accountSideMenuHotNowLabel {
        width: 70%;
        margin-left: 20%;
    }

    .newSlider {
        margin-top: 3px;
    }

    .appliedSlider {
        margin: 0 0 24.5px 0;
        border-top: 1px solid #DFDBD9;
        width: 90.5%;
    }

    .leftBarPlatformPopup {
        margin-left: -7%;
        margin-right: 5%;
    }

    .accountMyOrder {
        padding: 20px 10px 20px 25px;
    }

    .accountSideSubMenuList {
        font-weight: 400;
        font-size: 16px;
        text-decoration: none;
        margin-right: 8%;
        margin-left: -7%;
    }

    .appliedSlider p {
        width: 175px;
    }

    .appliedSlider a {
        display: block;
        position: relative;
        width: 155px;
        height: 31px;
        line-height: 29px;
        margin-bottom: -2px;
        color: #000;
        text-shadow: none;
        overflow: hidden;
        font-weight: bold;
    }

        .appliedSlider a::after {
            content: "+";
            float: right;
            font-size: 25px;
            line-height: 31px;
            transform: rotate(45deg);
        }

    .filterType.scrollbar {
        overflow-y: auto;
        max-height: 100vh;
    }

    .leftPopupOpener {
        background-image: url(Images/CloseBtn.svg);
        background-size: 18px 241px;
    }

    .leftBarBlockSlider.scrollbar {
        overflow-y: auto;
        max-height: 80vh;
        width: 100%;
    }

    .leftSliderMenu {
        background: #FFFFFF;
        box-shadow: 0 4px 4px #000000;
        box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
        padding-bottom: 37.08px;
        padding-top: 38px;
        width: 97%;
        padding-left: 27px;
    }

    .leftSliderHeading {
        margin-left: 30px;
    }

    .leftSliderMenuAnchor {
        font-weight: 400;
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .leftSliderClose {
        float: right;
        margin-right: 12%;
        width: 26.14px;
        Height: 25.13px;
        padding-top: 1px;
    }

    .loy-mobile-barcode {
        display: block;
        width: 70%;
        padding-left: 12.0%;
    }

    .leftSliderMenuImage {
        margin-left: 0;
    }

    .addCartBar {
        height: auto !important;
    }

        .addCartBar.fixed {
            background: #e4e4e4;
            border-bottom: solid 1px #fff;
            box-shadow: #000 0px 10px 19px -13px;
            margin: 0;
            padding: 0;
            width: 100%;
        }

            .addCartBar.fixed .prodImg {
                margin: 8px 0;
                width: 20%;
            }

            .addCartBar.fixed .prodInfo h1 {
                float: none;
                width: 73%;
                margin: 10px auto;
            }

            .addCartBar.fixed .prodBuy {
                clear: both;
                float: none;
                margin: 10px auto;
            }

                .addCartBar.fixed .prodBuy p, .singleStoreName, .singleStoreButt {
                    float: none;
                    display: block;
                    /*Moved the buttons in the singleStoreName to the center of the page*/
                    text-align: center;
                }

    .searchSum {
        text-align: left;
        font-size: 16px;
    }

    /* Only used in Hero Sku results */
    .singleProduct {
        padding: 10px 20px;
    }

        .singleProduct .prodImg {
            margin: 0px 0 20px;
        }

        .singleProduct .prodBuy {
            text-align: left;
        }

        .singleProduct h3 {
            font-size: 16px;
        }

        .singleProduct h4 {
            font-size: 12px;
        }

    .singleProdInfo {
        margin-bottom: 15px;
    }

    .hideOnMobile {
        display: none;
    }

    .mainInfo .prodBuy, .rateSt, .rateWord {
        float: none;
        margin: 0 auto;
        padding: 0;
    }

    .rateWord {
        text-align: center;
    }

    .rightBlock {
        max-height: 322px;
        overflow: hidden;
        text-align: center;
        padding: 0;
    }

    .mediaVideo iframe {
        max-width: 100%;
        height: auto;
    }

    .width1-3, .width2-3, .width3-3 {
        float: none;
        width: 100%;
        margin: 10px 0;
        padding: 0;
    }

    .giftcardBlock {
        width: auto;
    }

    .addBlock {
        float: none;
        width: 100%;
        padding: 10px 0;
    }

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

    .locatorPage .mapContainer #map {
        height: 350px;
    }

    .loyaltyRem a {
        width: 45%;
    }

    .loyaltyRem img {
        width: 100%;
    }


    .mainContainer .ncoltable2 select, .mainContainer .ncoltable2 input[type=text] {
        padding: 0;
        text-align: left;
    }

    .orderHDet .halfed, .orderHShip .halfed, .orderHShip .halfed:first-child {
        float: none;
        width: 100%;
    }

    .orderHProd table {
        table-layout: auto;
    }

        .orderHProd table thead tr th {
            padding: 5px;
        }

        .orderHProd table tbody td, .orderHProd table tbody td.wid50, .orderHProd table tbody td.wid15, .orderHProd table tbody td.wid10, .orderHProd table tbody td.wid5 {
            width: auto;
            padding: 0;
        }

        .orderHProd table .colPrice {
            padding: 0;
        }

    #AddressList p {
        margin-bottom: 10px;
    }

    .giftCardText {
        background: none;
        padding: 0;
        margin: 0 auto;
        width: 90%
    }

    .giftCardBlock h3, .giftCardBlock p {
        text-align: left;
    }

    #CustomSkin {
        display: none;
    }

    .mainBody, .rightContent, .prodInfo, .platformHomeCustom .rightBlock, #inStores .inCol, .imgSliderWindow {
        width: auto;
        text-align: center;
    }

    #favouriteStoreDiv h3 {
        display: inline-block;
        text-align: center;
        float: none;
    }

    #favouriteStoreDiv p {
        text-align: center;
        float: none;
    }

    .storeSel h5 {
        margin: 10px;
    }

    .prodTitle, .prodRate {
        float: none;
        width: 100%;
    }

    .prodSinglePromo {
        width: 100%;
    }

    .breadCrumb {
        text-align: center;
    }

    .giftCardBalance {
        padding: 0 25px;
        width: auto;
    }

        .giftCardBalance h1 {
            width: auto;
        }

    .giftCardBlock img {
        display: none;
    }

    .giftStep {
        float: none;
        margin: 0 auto;
        padding-right: 25px;
        width: auto;
    }

        .giftStep .bigButton {
            float: none;
        }

    .Availabilitylegend {
        float: none;
        width: 100%;
    }

    .locatorLegend {
        padding-bottom: 15px;
    }

    .barcodeCouponImage {
        padding: 0;
        width: 100%;
        margin-top: 20px
    }

    .couponTable thead {
        display: block;
        float: left
    }

        .couponTable thead tr {
            display: block;
        }

    .couponTable th {
        display: block;
        border-top: 1px solid #ddd;
    }

    .couponTable tbody {
        display: block;
        width: auto;
        position: relative;
        overflow-x: auto;
        white-space: nowrap;
    }

        .couponTable tbody tr {
            display: inline-block;
            vertical-align: top;
        }

    .couponTable td {
        display: block;
        text-align: right;
        padding: 8px 0;
    }

    .xaaPriceDetails {
        text-align: initial;
    }

    .xaaProductPanel {
        text-align: initial;
    }

    .sorting {
        display: none;
        /* add slide in*/
    }

    .topProdButtons {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .prodWishBlock {
        float: unset;
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

    .tradeValueBlock {
        align-self: center;
        margin-right: unset;
    }

    .bonusBoxExclusive {
        text-align: center;
        padding-left: unset;
        margin-bottom: 30px;
    }

    .bonus-header {
        display: flex;
        justify-content: center;
    }

    .MainImg.exclusive-images {
        margin-left: unset;
        align-self: center;
        margin-top: 20px;
    }

    .exclusive-content {
        display: flex;
        padding: unset;
        flex-direction: column;
        text-align: center;
    }

    .havelist-wishlist-block {
        margin: 0;
    }

    #tradeValueTC {
        position: unset;
        margin-top: 5px;
    }

    .tradeValueLine {
        text-align: center;
    }

    .newSorting .sortingBarDefault {
        padding: 12px 12px 0 0;
    }

    .newSorting .searchSum span {
        padding-top: 25px;
    }

    .sorting .sortingBarDefault {
        padding: 12px 12px 0 0;
    }

    .sorting .searchSum span {
        padding-top: 25px;
    }

    .addressLine1Validation {
        border-color: red;
        color: red;
    }

    .navbar-row {
        width: 100%;
    }

    .newLogonButton, .createButton {
        width: 63%;
    }
}


/* ------------------------------------------- some new phones with a bigger width (iPhone 6/7/8 Plus, Pixel 2, 2 XL)------------------------------------------- */
@media only screen and (min-width: 411px) and (max-width: 767px) {

    .sorting {
        display: none;
        /* add slide in*/
    }
}
/* ------------------------------------------- iPhone 5/SE------------------------------------------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {

    .navDrop {
        margin-left: -10px;
    }

    .nav-drop ul {
        position: absolute;
        top: 42px;
        right: -40px;
        background: #fff;
        z-index: 15;
    }

    .sorting {
        display: none;
        /* add slide in*/
    }

    .loginArticle {
        /* width: 80%;*/
        width: 100%;
        padding: 0 20px;
        max-width: none;
    }

    .newRegisterSection {
        /* max-width: 400px;*/
        width: 100%;
    }

    .newLogButtons {
        max-width: 400px;
    }

    .newLogonButton, .createButton {
        /*width: 100%;*/
        width: 63%;
    }
}

/* ------------------------------------------- small - portrait (cellphone) ------------------------------------------- */
@media (max-width: 400px) {

    #favouriteStoreDiv h3 {
        display: inline-block;
        float: none;
    }

    .storeSel h5 {
        margin: 10px;
    }

    .loginBlockIn {
        margin: 0 5px;
    }

    .logButtons {
        width: auto;
    }

    .loginBlock .loginFormIn {
        width: auto;
    }

    .loginBlock .registerHeader {
        width: auto;
    }

    .loginBlock .registerFormIn {
        width: auto;
    }

        .loginBlock .registerFormIn .logButtons {
            width: auto;
        }

    .singleProduct .wishlist-block, .singleProduct .havelist-block {
        width: initial;
    }

    .sorting {
        display: none;
    }

    #klarna-pay-later-main {
        min-width: 250px !important;
    }

    /* Navbar - Mobile 360px and above*/
    .searchDrop {
        background: url(Images/NavBar/searchIcon.svg) no-repeat;
        background-size: 30px 30px;
        position: relative;
        right: -10px;
    }

    .accDrop {
        background: url(Images/NavBar/account.svg) no-repeat;
        background-size: 30px 30px;
        position: relative;
        right: -9px;
        top: 1px;
    }

    .cartDrop {
        background: url(Images/NavBar/cart.svg) no-repeat;
        background-size: 30px 30px;
    }

    a#languageChangeNewLink span {
        margin-left: 12px;
    }

    .hamburgerLogo {
        background-size: 90px auto;
        margin: 0;
        width: 90px;
        background-position-y: center;
    }

    .hamburgerMenu {
        display: block;
        width: 30px;
        height: 40px;
        margin: 0 0 0 10px;
        background: url(Images/NavBar/Menu.svg) no-repeat;
        background-size: 25px 35px;
        overflow: hidden;
    }

    .nav__gsflyer, .nav__store, .nav__customerService, .nav__language {
        display: none;
    }

    #lblCartCount {
        font-size: 11px;
        margin-right: 5px;
    }

    .badge {
        padding-left: 9px;
        padding-right: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
    }

    .badge-warning[href] {
        background-color: #c67605;
    }

    .navCart {
        color: #323233;
        display: none;
    }

    .navCartTotal {
        color: #ee3124;
        display: none;
    }
}





@media (max-width: 320px) {


    .platformBlock {
        width: auto;
    }

    #CustomSkin {
        display: none;
    }

    .newLogonButton, .createButton {
        /*width: 80%;*/
        width: 100%;
    }

    .loginArticle {
        width: 100%;
        padding: 0;
        max-width: none;
    }
}



/* Hi res display */
@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) {

    .qSpinner, .logButtons .loader, #scroller.loadingScr p {
        background-image: url(Images/big-loader.gif);
        background-size: 16px 16px;
        width: auto;
    }

    .loginBlock h1, .loginBlock h1 span {
        width: auto;
        height: 35px;
        line-height: 35px;
    }

    #leftOpener {
        background-image: url(Images/left-bar-opener@2x.png);
        background-size: 18px 241px;
    }
}


/* New Sorting Dropdown */
@media (max-width: 959px) {
    .sorting.newSorting {
        padding: 18px 20px 21px 20px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
    }

    .input-container label {
        font-size: 14px;
    }
}

@media (max-width: 568px) {
    .sorting.newSorting {
    }

    .dropdownSort {
        display: none;
    }

    #tradeValueTC {
        width: 300px;
        left: -30px;
        right: unset;
    }

    .singleVariantDetails {
        flex: 1;
    }

    .variantsContainer {
        display: flex;
        width: 100vw;
        flex-direction: column;
    }

    .productSelected {
        justify-content: center;
    }
    .newRegisterInputField .passwordEyeButton {
        margin-top: 8px;
    }
}

@media (min-width : 568px) and (max-width : 959px) {
    .newSorting p {
        padding: 0 20px;
    }
    .loginArticle {
        width: 50%;
        padding: 0 20px;
        max-width: none;
    }
}


@media (max-width: 767px) {
    .searchSum.short {
        display: inline;
    }


    .searchSum.verbose {
        display: none;
    }
}
/* New Sorting Dropdown */
@media (max-width: 959px) {
    .sorting {
        padding: 18px 20px 21px 20px;
        margin-bottom: 15px;
        display: flex;
        justify-content: space-between;
    }
}

@media (min-width : 568px) and (max-width : 959px) {
    .sorting p {
        padding: 0 20px;
    }
}


@media (max-width: 567px) {

    .searchProductTile {
        width: 95%;
        height: 225px;
        margin: 5px;
        padding: 5px;
        text-align: unset;
    }

        .searchProductTile h3 {
            margin-top: unset;
        }

        .searchProductTile .price-new,
        .searchProductTile .price-presell,
        .searchProductTile .price-xaa,
        .searchProductTile .price-loyaltyUpgrade,
        .searchProductTile .price-dlc,
        .searchProductTile .price-dlcpresell,
        .searchProductTile .price-used {
            font-size: 14px;
        }

    .searchTilePriceMobile {
        margin-left: 34%;
        text-align: left;
    }

    .searchProductTileActionButton {
        max-width: 300px;
    }

    .searchProductImage {
        display: flex;
        float: left;
        width: 33%;
        height: 50%;
    }

        .searchProductImage img {
            max-height: 100%;
            max-width: 100%;
            height: auto;
            display: inline;
            padding-top: unset;
        }

    .mobileSearchProductInfo {
        float: right;
        width: 66%;
        height: 33%;
        /* padding-bottom: 10px;*/
        padding-bottom: 20px;
        text-align: left;
    }

    .prodList.resultTiles {
        padding: 0 20px;
    }

    .searchTileLayout {
        display: block;
        border-bottom: 1px solid #e1e7ef;
        box-shadow: unset;
    }

    .searchTileMobileBorderTop {
        border-top: 1px solid #e1e7ef;
        width: 95%;
        margin: 5px;
    }

    .variantsContainer .variants {
        display: flex;
    }

    .searchProductTitle {
        min-height: unset;
    }

    .ribbonInlineDisplay {
        display: inline-block;
        padding-right: 2px;
    }

    .buttonContainer {
        flex-direction: column;
    }

        .buttonContainer .button {
            width: 80%;
        }
}

@media (min-width : 568px) and (max-width: 649px) {
    .prodList.resultTiles {
        padding: 0 40px;
    }

    .searchProductTile {
        width: 47%;
    }
}

@media (min-width : 650px) and (max-width: 767px) {

    .searchProductTile {
        width: 30%;
    }


    .mobileView {
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
    }
}
/* Generic Mobile/Desktop visibility switch */
@media (min-width : 959px) {
    .mobileVisible {
        display: none;
    }

    .desktopVisible {
        display: block;
    }
}

@media (max-width : 958px) {
    .mobileVisible {
        display: block;
    }

    .desktopVisible {
        display: none;
    }
}

/* Enhanced Mobile Filter */
@media(max-width : 958px) {
    .enhancedFilter {
        height: 100vh;
        position: fixed !important;
        z-index: 9999999999999999999999;
        overflow: visible;
        margin: 0;
        top: 0 !important;
    }

    .bgOverlay {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #000000e6;
        top: 0;
        z-index: 10000;
    }
}
/* Ribbon mobile */
@media (max-width: 568px) {
    .ribbonMobileSpacer {
        margin-bottom: 1rem;
    }
}

/* Mobile landscape */
@media (max-width: 640px) {
    .loy-list-col.col230 {
        width: 190px;
    }
}

/* iPad portrait and landscape */
@media only screen and (min-device-width : 768px) and (max-device-width : 1200px) {

    .descriptionCollapse {
        -webkit-line-clamp: initial;
    }

    .nav__search, .nav__cart, .nav__account, .nav__searchNew {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        min-width: 60px;
        overflow: hidden;
        white-space: normal;
    }

    .nav__cart {
        max-width: unset;
    }

    .gsFlyerDrop, .storeDrop, .languageDrop, .customerServiceDrop {
        background-size: 50px 50px;
        margin-left: 5px;
        padding-bottom: 10px;
    }

    .menuIcon-container {
        display: flex;
        border-top: 1px solid #DFDBD9;
        padding-top: 24.5px;
        margin-right: 30px;
        flex-wrap: wrap;
        justify-content: center;
    }

    a#languageChangeNewLink span {
        margin-left: 7px;
        font-size: 12px;
    }

    span.menuIcon-container__span {
        margin-left: 10px;
        padding-bottom: 20px;
    }

    .menuIcon-container__language {
        margin-left: 10px;
    }

    a.menuIcon-container__gsflyer, a.menuIcon-container__store, a.menuIcon-container__customerService, a.menuIcon-container__language {
        color: #323233;
        cursor: pointer;
        text-decoration: none;
        font-weight: bold;
        font-size: 12px !important;
    }

    .menuIcon-container__gsflyer, .menuIcon-container__store, .menuIcon-container__language, .menuIcon-container__customerService {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-grow: 1;
        min-width: 75px;
        overflow: hidden;
        white-space: nowrap;
    }

    .shortLangBtn {
        display: none;
    }

    #lblCartCount {
        font-size: 11px;
        background: #ff0000;
        color: #fff;
        padding: 0 4.5px;
        vertical-align: top;
        margin-right: 3px;
        margin-top: 1px;
        z-index: 1;
    }

    .badge {
        padding-left: 9px;
        padding-right: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
    }

    .badge-warning[href] {
        background-color: #c67605;
    }

    .navCart {
        color: #323233;
        display: none;
    }

    .navCartTotal {
        color: #ee3124;
        display: none;
    }

    .loy-mobile-barcode {
        display: none;
    }
}

@media only screen and (min-device-width : 960px) and (max-device-width : 1200px) {
    .nav-right {
        margin-left: 48%;
    }

    #lblCartCount {
        font-size: 11px;
        background: #ff0000;
        color: #fff;
        padding: 0 4.5px;
        vertical-align: top;
        margin-right: -16px;
        margin-top: 1px;
        z-index: 1;
    }
}

/*Ipad pro safari browser*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1200px) {

    .hamburgerMenu {
        display: inline-block;
        height: 38px;
        width: 30px;
        padding-right: 5px;
        background: url(Images/NewNavbar/Menu.svg) no-repeat;
        background-position-y: center;
        overflow: hidden;
    }


    .navbar-row {
        width: 95%;
        justify-content: space-between;
    }



    .navIcon {
        display: none;
    }

    .nav__gsflyer, .nav__store, .nav__customerService, .nav__language {
        display: none;
    }

    /*Slider for the navbar*/

    .leftBarSlider {
        background: #FFFFFF;
        float: none;
        text-align: left;
        box-shadow: 0 0 8px rgba(0,0,0,0.10);
        border-top-right-radius: 5px;
        height: 100vh;
        position: fixed !important;
        z-index: 9999999999999999999999;
        overflow: visible;
        margin: 0;
        top: 0 !important;
        width: 448px;
        left: 0px;
    }

    .leftBarInSlider {
        height: 99vh;
        font-size: 16px;
    }

    .leftBarBlockSlider:first-child {
        margin-top: 0;
    }

    .enhancedActiveSlider {
        height: 100vh;
        position: fixed !important;
        z-index: 9999999999999999999999;
        overflow: visible;
        margin: 0;
        top: 0 !important;
        width: 448px;
    }

    .sliderHeaderLocalized {
        width: 333px;
        line-height: 29px;
    }

    .accountSideMenuHotNowLabel {
        width: 70%;
        margin-left: 20%;
    }

    .filterType.scrollbar {
        overflow-y: auto;
        max-height: 100vh;
    }

    .leftPopupOpener {
        background-image: url(Images/CloseBtn.svg);
        background-size: 18px 241px;
    }

    .leftBarBlockSlider.scrollbar {
        overflow-y: auto;
        max-height: 80vh;
    }

    .leftSliderMenu {
        background: #FFFFFF;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
        padding-bottom: 37.08px;
        padding-top: 38px;
        width: 448px;
    }

    .leftSliderHeading {
        font-weight: 800;
        font-size: 20px;
        color: #212322;
        margin-left: 55.7px;
    }

    .leftSliderClose {
        float: right;
        margin-right: 39px;
        width: 26.14px;
        Height: 25.13px;
        padding-top: 1px;
    }

    .bgOverlayWider {
        position: fixed;
        width: 100%;
        height: 100%;
        background: #000000e6;
        top: 0;
        z-index: 10000;
        opacity: 0.35;
    }

    .leftSliderMenuAnchor {
        font-weight: 400;
        color: black;
        text-decoration: none;
        cursor: pointer;
    }

    .nav-centre {
        flex-basis: 95%;
        flex-grow: 0;
        flex-direction: column;
        animation: none !important;
        margin-left: 4%;
    }

    .hideSearch {
        display: flex;
    }

    .hidenavCentre {
        display: none;
    }

    .nav-centre-position-handler {
        flex-wrap: wrap;
        animation: none !important;
    }

    /*    .hideSearch {
        display: flex;
    }*/

    .nav-end {
        flex-basis: 95%;
        flex-grow: 0;
        flex-direction: column;
        order: 3;
        animation: none !important;
        margin-left: 4%;
    }

    .quickInputContainerNewNavBar {
        position: relative;
        height: 40px;
        border: solid 1px #c3c3c3;
        border-radius: 8px;
        display: flex;
        margin-bottom: 2px;
        width: 96%;
        justify-content: space-between;
    }

        .quickInputContainerNewNavBar.active input, .quickInputContainerNewNavBar input:focus, .quickInputContainerNewNavBar input:valid {
            width: 90%;
        }

        .quickInputContainerNewNavBar a {
            padding: 8px;
        }

    .quickInputContainerWiderBackgroundNewNavBar {
        flex-direction: row;
        border: solid 1px #ccc;
        border-radius: 10px;
        margin-top: 10px;
    }

    .addressLine1Validation {
        border-color: red;
        color: red;
    }


    .badge {
        padding-left: 9px;
        padding-right: 9px;
        -webkit-border-radius: 9px;
        -moz-border-radius: 9px;
        border-radius: 9px;
    }

    .badge-warning[href] {
        background-color: #c67605;
    }

    .navCart {
        color: #323233;
        display: none;
    }

    .navCartTotal {
        color: #ee3124;
        display: none;
    }
}


/*orders online styles*/

@media(max-width: 500px) {

    .table thead {
        display: none;
    }

    .table, .table tbody, .table tfoot, .table tr, .table th, .table td {
        display: block;
    }

        .table tr {
            margin-bottom: 15px;
        }

        .table td {
            padding-left: 50%;
            text-align: right;
            position: relative;
        }

            .table td::before {
                content: attr(data-label);
                position: absolute;
                margin-left: 5px;
                left: 0;
                font-weight: bold;
            }
}

@media (max-width: 568px) {
    .navbar-row {
        width: 100%;
        padding: 5px 0 0 0 !important;
    }
}

@media (min-width: 360px) and (max-width: 375px) {
    .nav-right {
        margin-right: -40px;
    }

    .cartNewRemind {
        width: 58px;
        padding-right: 50px;
        background-position: 25px 10px;
    }

    .navbar-row {
        margin-right: 90px;
        padding: 0;
    }
}

@media only screen and (min-width:376px) and (max-width:500px) {

    .navbar-row {
        width: 100%;
        padding: 5px 0 0 0 !important;
    }

    .nav-right {
        display: flex;
        margin-right: -30%;
        justify-content: flex-end;
        flex-basis: 52%;
    }

    .cartNewRemind {
        width: 58px;
        padding-right: 100px;
        background-position: 25px 10px;
    }
}

@media only screen and (min-width:501px) and (max-width:567px) {

    .navbar-row {
        margin-right: 90px;
        width: 100%;
        justify-content: space-between;
        animation: none !important;
        padding: 5px 0 0 0 !important;
    }
}

/* begining loyalty upgrade style changes*/

@media (max-width: 568px) {

    .loyaltyUpgradePageImg img {
        margin: 0 auto;
        position: relative;
        right: 0;
    }

    .loyaltyUpgradePageImg {
        max-width: 100%;
    }

    .loyaltyUpgradePageText {
        margin: 0 auto;
        float: none;
    }
}
/* end loyalty upgrade style changes*/


/*********************Error on Register form css Start*********************/

@media not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        @media only screen and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) {

            .registerInputField .field-validation-error {
                bottom: 0;
            }
        }

        @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {

            .registerInputField .field-validation-error {
                bottom: 0;
            }
        }
        /* 2778x1284 pixels at 458ppi */
        @media only screen and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) {
            .registerInputField .field-validation-error {
                bottom: 0;
            }
        }
    }
}

/*Birthday Fields*/
@media (max-width: 560px) {
    .registerBirthDay span.errorXDay::before,
    .registerBirthMonth span.errorXMonth::before,
    .registerBirthYear span.errorXYear::before {
        right: 8%;
    }
}
/*********************Error on Register form css End*********************/


@media only screen and (max-width:568) {
    .navbar-row {
        justify-content: flex-start;
    }

    .nav-right {
        margin-right: 30px;
    }
 .newRegisterInputField .field-validation-error {
        margin-top: -22px;
    }
    .newRegisterButton, .createButton {
        /*width: 100%;*/
        width: 63%;
    }
}

@media only screen and (min-width : 1200) {
    .navbar-row {
        width: 95%;
    }
}

@media only screen and (min-width : 1440) {
    .navbar-row {
        width: 89%;
    }
}

@media only screen and (max-width:359) {
    .hamburgerLogo {
        background-size: 80px auto;
        margin: 0 0;
        margin-top: 5px;
        width: 80px;
        background-position-y: center;
    }

    .navbar-row {
        width: 100%;
        justify-content: flex-start;
    }

    .nav-right {
        justify-content: flex-end;
    }
}

@media only screen and (min-width : 100px) and (max-width:330px) {

    .newRegisterBirthdayField .newRegisterBirthDay.error input, .newRegisterBirthMonth.error input, .newRegisterBirthYear.error input {
        width: 6ch;
    }
}

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('fancybox/fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('fancybox/fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('fancybox/blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

a.fancybox-nav:hover , a.fancybox-close:hover
{
    background-color: transparent;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: hidden !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('fancybox/fancybox_overlay.png');
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@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){

	#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
		background-image: url('fancybox/fancybox_sprite@2x.png');
		background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
	}

	#fancybox-loading div {
		background-image: url('fancybox/fancybox_loading@2x.gif');
		background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
	}
}
.intl-tel-input{position:relative;display:inline-block}.intl-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.intl-tel-input .hide{display:none}.intl-tel-input .v-hide{visibility:hidden}.intl-tel-input input,.intl-tel-input input[type=text],.intl-tel-input input[type=tel]{position:relative;z-index:0;margin-top:0 !important;margin-bottom:0 !important;padding-right:36px;margin-right:0}.intl-tel-input .flag-container{position:absolute;top:0;bottom:0;right:0;padding:1px}.intl-tel-input .selected-flag{z-index:1;position:relative;width:36px;height:100%;padding:0 0 0 8px}.intl-tel-input .selected-flag .iti-flag{position:absolute;top:0;bottom:0;margin:auto}.intl-tel-input .selected-flag .iti-arrow{position:absolute;top:50%;margin-top:-2px;right:6px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.intl-tel-input .selected-flag .iti-arrow.up{border-top:none;border-bottom:4px solid #555}.intl-tel-input .country-list{position:absolute;z-index:2;list-style:none;text-align:left;padding:0;margin:0 0 0 -1px;box-shadow:1px 1px 4px rgba(0,0,0,0.2);background-color:white;border:1px solid #CCC;white-space:nowrap;max-height:200px;overflow-y:scroll}.intl-tel-input .country-list.dropup{bottom:100%;margin-bottom:-1px}.intl-tel-input .country-list .flag-box{display:inline-block;width:20px}@media (max-width: 500px){.intl-tel-input .country-list{white-space:normal}}.intl-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #CCC}.intl-tel-input .country-list .country{padding:5px 10px}.intl-tel-input .country-list .country .dial-code{color:#999}.intl-tel-input .country-list .country.highlight{background-color:rgba(0,0,0,0.05)}.intl-tel-input .country-list .flag-box,.intl-tel-input .country-list .country-name,.intl-tel-input .country-list .dial-code{vertical-align:middle}.intl-tel-input .country-list .flag-box,.intl-tel-input .country-list .country-name{margin-right:6px}.intl-tel-input.allow-dropdown input,.intl-tel-input.allow-dropdown input[type=text],.intl-tel-input.allow-dropdown input[type=tel],.intl-tel-input.separate-dial-code input,.intl-tel-input.separate-dial-code input[type=text],.intl-tel-input.separate-dial-code input[type=tel]{padding-right:6px;padding-left:52px;margin-left:0}.intl-tel-input.allow-dropdown .flag-container,.intl-tel-input.separate-dial-code .flag-container{right:auto;left:0}.intl-tel-input.allow-dropdown .selected-flag,.intl-tel-input.separate-dial-code .selected-flag{width:46px}.intl-tel-input.allow-dropdown .flag-container:hover{cursor:pointer}.intl-tel-input.allow-dropdown .flag-container:hover .selected-flag{background-color:rgba(0,0,0,0.05)}.intl-tel-input.allow-dropdown input[disabled]+.flag-container:hover,.intl-tel-input.allow-dropdown input[readonly]+.flag-container:hover{cursor:default}.intl-tel-input.allow-dropdown input[disabled]+.flag-container:hover .selected-flag,.intl-tel-input.allow-dropdown input[readonly]+.flag-container:hover .selected-flag{background-color:transparent}.intl-tel-input.separate-dial-code .selected-flag{background-color:rgba(0,0,0,0.05);display:table}.intl-tel-input.separate-dial-code .selected-dial-code{display:table-cell;vertical-align:middle;padding-left:28px}.intl-tel-input.separate-dial-code.iti-sdc-2 input,.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=text],.intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel]{padding-left:66px}.intl-tel-input.separate-dial-code.iti-sdc-2 .selected-flag{width:60px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=text],.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel]{padding-left:76px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 .selected-flag{width:70px}.intl-tel-input.separate-dial-code.iti-sdc-3 input,.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=text],.intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel]{padding-left:74px}.intl-tel-input.separate-dial-code.iti-sdc-3 .selected-flag{width:68px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=text],.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel]{padding-left:84px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 .selected-flag{width:78px}.intl-tel-input.separate-dial-code.iti-sdc-4 input,.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=text],.intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel]{padding-left:82px}.intl-tel-input.separate-dial-code.iti-sdc-4 .selected-flag{width:76px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=text],.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel]{padding-left:92px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 .selected-flag{width:86px}.intl-tel-input.separate-dial-code.iti-sdc-5 input,.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=text],.intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel]{padding-left:90px}.intl-tel-input.separate-dial-code.iti-sdc-5 .selected-flag{width:84px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input,.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=text],.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel]{padding-left:100px}.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 .selected-flag{width:94px}.intl-tel-input.iti-container{position:absolute;top:-1000px;left:-1000px;z-index:1060;padding:1px}.intl-tel-input.iti-container:hover{cursor:pointer}.iti-mobile .intl-tel-input.iti-container{top:30px;bottom:30px;left:30px;right:30px;position:fixed}.iti-mobile .intl-tel-input .country-list{max-height:100%;width:100%}.iti-mobile .intl-tel-input .country-list .country{padding:10px 10px;line-height:1.5em}.iti-flag{width:20px}.iti-flag.be{width:18px}.iti-flag.ch{width:15px}.iti-flag.mc{width:19px}.iti-flag.ne{width:18px}.iti-flag.np{width:13px}.iti-flag.va{width:15px}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){.iti-flag{background-size:5630px 15px}}.iti-flag.ac{height:10px;background-position:0px 0px}.iti-flag.ad{height:14px;background-position:-22px 0px}.iti-flag.ae{height:10px;background-position:-44px 0px}.iti-flag.af{height:14px;background-position:-66px 0px}.iti-flag.ag{height:14px;background-position:-88px 0px}.iti-flag.ai{height:10px;background-position:-110px 0px}.iti-flag.al{height:15px;background-position:-132px 0px}.iti-flag.am{height:10px;background-position:-154px 0px}.iti-flag.ao{height:14px;background-position:-176px 0px}.iti-flag.aq{height:14px;background-position:-198px 0px}.iti-flag.ar{height:13px;background-position:-220px 0px}.iti-flag.as{height:10px;background-position:-242px 0px}.iti-flag.at{height:14px;background-position:-264px 0px}.iti-flag.au{height:10px;background-position:-286px 0px}.iti-flag.aw{height:14px;background-position:-308px 0px}.iti-flag.ax{height:13px;background-position:-330px 0px}.iti-flag.az{height:10px;background-position:-352px 0px}.iti-flag.ba{height:10px;background-position:-374px 0px}.iti-flag.bb{height:14px;background-position:-396px 0px}.iti-flag.bd{height:12px;background-position:-418px 0px}.iti-flag.be{height:15px;background-position:-440px 0px}.iti-flag.bf{height:14px;background-position:-460px 0px}.iti-flag.bg{height:12px;background-position:-482px 0px}.iti-flag.bh{height:12px;background-position:-504px 0px}.iti-flag.bi{height:12px;background-position:-526px 0px}.iti-flag.bj{height:14px;background-position:-548px 0px}.iti-flag.bl{height:14px;background-position:-570px 0px}.iti-flag.bm{height:10px;background-position:-592px 0px}.iti-flag.bn{height:10px;background-position:-614px 0px}.iti-flag.bo{height:14px;background-position:-636px 0px}.iti-flag.bq{height:14px;background-position:-658px 0px}.iti-flag.br{height:14px;background-position:-680px 0px}.iti-flag.bs{height:10px;background-position:-702px 0px}.iti-flag.bt{height:14px;background-position:-724px 0px}.iti-flag.bv{height:15px;background-position:-746px 0px}.iti-flag.bw{height:14px;background-position:-768px 0px}.iti-flag.by{height:10px;background-position:-790px 0px}.iti-flag.bz{height:14px;background-position:-812px 0px}.iti-flag.ca{height:10px;background-position:-834px 0px}.iti-flag.cc{height:10px;background-position:-856px 0px}.iti-flag.cd{height:15px;background-position:-878px 0px}.iti-flag.cf{height:14px;background-position:-900px 0px}.iti-flag.cg{height:14px;background-position:-922px 0px}.iti-flag.ch{height:15px;background-position:-944px 0px}.iti-flag.ci{height:14px;background-position:-961px 0px}.iti-flag.ck{height:10px;background-position:-983px 0px}.iti-flag.cl{height:14px;background-position:-1005px 0px}.iti-flag.cm{height:14px;background-position:-1027px 0px}.iti-flag.cn{height:14px;background-position:-1049px 0px}.iti-flag.co{height:14px;background-position:-1071px 0px}.iti-flag.cp{height:14px;background-position:-1093px 0px}.iti-flag.cr{height:12px;background-position:-1115px 0px}.iti-flag.cu{height:10px;background-position:-1137px 0px}.iti-flag.cv{height:12px;background-position:-1159px 0px}.iti-flag.cw{height:14px;background-position:-1181px 0px}.iti-flag.cx{height:10px;background-position:-1203px 0px}.iti-flag.cy{height:13px;background-position:-1225px 0px}.iti-flag.cz{height:14px;background-position:-1247px 0px}.iti-flag.de{height:12px;background-position:-1269px 0px}.iti-flag.dg{height:10px;background-position:-1291px 0px}.iti-flag.dj{height:14px;background-position:-1313px 0px}.iti-flag.dk{height:15px;background-position:-1335px 0px}.iti-flag.dm{height:10px;background-position:-1357px 0px}.iti-flag.do{height:13px;background-position:-1379px 0px}.iti-flag.dz{height:14px;background-position:-1401px 0px}.iti-flag.ea{height:14px;background-position:-1423px 0px}.iti-flag.ec{height:14px;background-position:-1445px 0px}.iti-flag.ee{height:13px;background-position:-1467px 0px}.iti-flag.eg{height:14px;background-position:-1489px 0px}.iti-flag.eh{height:10px;background-position:-1511px 0px}.iti-flag.er{height:10px;background-position:-1533px 0px}.iti-flag.es{height:14px;background-position:-1555px 0px}.iti-flag.et{height:10px;background-position:-1577px 0px}.iti-flag.eu{height:14px;background-position:-1599px 0px}.iti-flag.fi{height:12px;background-position:-1621px 0px}.iti-flag.fj{height:10px;background-position:-1643px 0px}.iti-flag.fk{height:10px;background-position:-1665px 0px}.iti-flag.fm{height:11px;background-position:-1687px 0px}.iti-flag.fo{height:15px;background-position:-1709px 0px}.iti-flag.fr{height:14px;background-position:-1731px 0px}.iti-flag.ga{height:15px;background-position:-1753px 0px}.iti-flag.gb{height:10px;background-position:-1775px 0px}.iti-flag.gd{height:12px;background-position:-1797px 0px}.iti-flag.ge{height:14px;background-position:-1819px 0px}.iti-flag.gf{height:14px;background-position:-1841px 0px}.iti-flag.gg{height:14px;background-position:-1863px 0px}.iti-flag.gh{height:14px;background-position:-1885px 0px}.iti-flag.gi{height:10px;background-position:-1907px 0px}.iti-flag.gl{height:14px;background-position:-1929px 0px}.iti-flag.gm{height:14px;background-position:-1951px 0px}.iti-flag.gn{height:14px;background-position:-1973px 0px}.iti-flag.gp{height:14px;background-position:-1995px 0px}.iti-flag.gq{height:14px;background-position:-2017px 0px}.iti-flag.gr{height:14px;background-position:-2039px 0px}.iti-flag.gs{height:10px;background-position:-2061px 0px}.iti-flag.gt{height:13px;background-position:-2083px 0px}.iti-flag.gu{height:11px;background-position:-2105px 0px}.iti-flag.gw{height:10px;background-position:-2127px 0px}.iti-flag.gy{height:12px;background-position:-2149px 0px}.iti-flag.hk{height:14px;background-position:-2171px 0px}.iti-flag.hm{height:10px;background-position:-2193px 0px}.iti-flag.hn{height:10px;background-position:-2215px 0px}.iti-flag.hr{height:10px;background-position:-2237px 0px}.iti-flag.ht{height:12px;background-position:-2259px 0px}.iti-flag.hu{height:10px;background-position:-2281px 0px}.iti-flag.ic{height:14px;background-position:-2303px 0px}.iti-flag.id{height:14px;background-position:-2325px 0px}.iti-flag.ie{height:10px;background-position:-2347px 0px}.iti-flag.il{height:15px;background-position:-2369px 0px}.iti-flag.im{height:10px;background-position:-2391px 0px}.iti-flag.in{height:14px;background-position:-2413px 0px}.iti-flag.io{height:10px;background-position:-2435px 0px}.iti-flag.iq{height:14px;background-position:-2457px 0px}.iti-flag.ir{height:12px;background-position:-2479px 0px}.iti-flag.is{height:15px;background-position:-2501px 0px}.iti-flag.it{height:14px;background-position:-2523px 0px}.iti-flag.je{height:12px;background-position:-2545px 0px}.iti-flag.jm{height:10px;background-position:-2567px 0px}.iti-flag.jo{height:10px;background-position:-2589px 0px}.iti-flag.jp{height:14px;background-position:-2611px 0px}.iti-flag.ke{height:14px;background-position:-2633px 0px}.iti-flag.kg{height:12px;background-position:-2655px 0px}.iti-flag.kh{height:13px;background-position:-2677px 0px}.iti-flag.ki{height:10px;background-position:-2699px 0px}.iti-flag.km{height:12px;background-position:-2721px 0px}.iti-flag.kn{height:14px;background-position:-2743px 0px}.iti-flag.kp{height:10px;background-position:-2765px 0px}.iti-flag.kr{height:14px;background-position:-2787px 0px}.iti-flag.kw{height:10px;background-position:-2809px 0px}.iti-flag.ky{height:10px;background-position:-2831px 0px}.iti-flag.kz{height:10px;background-position:-2853px 0px}.iti-flag.la{height:14px;background-position:-2875px 0px}.iti-flag.lb{height:14px;background-position:-2897px 0px}.iti-flag.lc{height:10px;background-position:-2919px 0px}.iti-flag.li{height:12px;background-position:-2941px 0px}.iti-flag.lk{height:10px;background-position:-2963px 0px}.iti-flag.lr{height:11px;background-position:-2985px 0px}.iti-flag.ls{height:14px;background-position:-3007px 0px}.iti-flag.lt{height:12px;background-position:-3029px 0px}.iti-flag.lu{height:12px;background-position:-3051px 0px}.iti-flag.lv{height:10px;background-position:-3073px 0px}.iti-flag.ly{height:10px;background-position:-3095px 0px}.iti-flag.ma{height:14px;background-position:-3117px 0px}.iti-flag.mc{height:15px;background-position:-3139px 0px}.iti-flag.md{height:10px;background-position:-3160px 0px}.iti-flag.me{height:10px;background-position:-3182px 0px}.iti-flag.mf{height:14px;background-position:-3204px 0px}.iti-flag.mg{height:14px;background-position:-3226px 0px}.iti-flag.mh{height:11px;background-position:-3248px 0px}.iti-flag.mk{height:10px;background-position:-3270px 0px}.iti-flag.ml{height:14px;background-position:-3292px 0px}.iti-flag.mm{height:14px;background-position:-3314px 0px}.iti-flag.mn{height:10px;background-position:-3336px 0px}.iti-flag.mo{height:14px;background-position:-3358px 0px}.iti-flag.mp{height:10px;background-position:-3380px 0px}.iti-flag.mq{height:14px;background-position:-3402px 0px}.iti-flag.mr{height:14px;background-position:-3424px 0px}.iti-flag.ms{height:10px;background-position:-3446px 0px}.iti-flag.mt{height:14px;background-position:-3468px 0px}.iti-flag.mu{height:14px;background-position:-3490px 0px}.iti-flag.mv{height:14px;background-position:-3512px 0px}.iti-flag.mw{height:14px;background-position:-3534px 0px}.iti-flag.mx{height:12px;background-position:-3556px 0px}.iti-flag.my{height:10px;background-position:-3578px 0px}.iti-flag.mz{height:14px;background-position:-3600px 0px}.iti-flag.na{height:14px;background-position:-3622px 0px}.iti-flag.nc{height:10px;background-position:-3644px 0px}.iti-flag.ne{height:15px;background-position:-3666px 0px}.iti-flag.nf{height:10px;background-position:-3686px 0px}.iti-flag.ng{height:10px;background-position:-3708px 0px}.iti-flag.ni{height:12px;background-position:-3730px 0px}.iti-flag.nl{height:14px;background-position:-3752px 0px}.iti-flag.no{height:15px;background-position:-3774px 0px}.iti-flag.np{height:15px;background-position:-3796px 0px}.iti-flag.nr{height:10px;background-position:-3811px 0px}.iti-flag.nu{height:10px;background-position:-3833px 0px}.iti-flag.nz{height:10px;background-position:-3855px 0px}.iti-flag.om{height:10px;background-position:-3877px 0px}.iti-flag.pa{height:14px;background-position:-3899px 0px}.iti-flag.pe{height:14px;background-position:-3921px 0px}.iti-flag.pf{height:14px;background-position:-3943px 0px}.iti-flag.pg{height:15px;background-position:-3965px 0px}.iti-flag.ph{height:10px;background-position:-3987px 0px}.iti-flag.pk{height:14px;background-position:-4009px 0px}.iti-flag.pl{height:13px;background-position:-4031px 0px}.iti-flag.pm{height:14px;background-position:-4053px 0px}.iti-flag.pn{height:10px;background-position:-4075px 0px}.iti-flag.pr{height:14px;background-position:-4097px 0px}.iti-flag.ps{height:10px;background-position:-4119px 0px}.iti-flag.pt{height:14px;background-position:-4141px 0px}.iti-flag.pw{height:13px;background-position:-4163px 0px}.iti-flag.py{height:11px;background-position:-4185px 0px}.iti-flag.qa{height:8px;background-position:-4207px 0px}.iti-flag.re{height:14px;background-position:-4229px 0px}.iti-flag.ro{height:14px;background-position:-4251px 0px}.iti-flag.rs{height:14px;background-position:-4273px 0px}.iti-flag.ru{height:14px;background-position:-4295px 0px}.iti-flag.rw{height:14px;background-position:-4317px 0px}.iti-flag.sa{height:14px;background-position:-4339px 0px}.iti-flag.sb{height:10px;background-position:-4361px 0px}.iti-flag.sc{height:10px;background-position:-4383px 0px}.iti-flag.sd{height:10px;background-position:-4405px 0px}.iti-flag.se{height:13px;background-position:-4427px 0px}.iti-flag.sg{height:14px;background-position:-4449px 0px}.iti-flag.sh{height:10px;background-position:-4471px 0px}.iti-flag.si{height:10px;background-position:-4493px 0px}.iti-flag.sj{height:15px;background-position:-4515px 0px}.iti-flag.sk{height:14px;background-position:-4537px 0px}.iti-flag.sl{height:14px;background-position:-4559px 0px}.iti-flag.sm{height:15px;background-position:-4581px 0px}.iti-flag.sn{height:14px;background-position:-4603px 0px}.iti-flag.so{height:14px;background-position:-4625px 0px}.iti-flag.sr{height:14px;background-position:-4647px 0px}.iti-flag.ss{height:10px;background-position:-4669px 0px}.iti-flag.st{height:10px;background-position:-4691px 0px}.iti-flag.sv{height:12px;background-position:-4713px 0px}.iti-flag.sx{height:14px;background-position:-4735px 0px}.iti-flag.sy{height:14px;background-position:-4757px 0px}.iti-flag.sz{height:14px;background-position:-4779px 0px}.iti-flag.ta{height:10px;background-position:-4801px 0px}.iti-flag.tc{height:10px;background-position:-4823px 0px}.iti-flag.td{height:14px;background-position:-4845px 0px}.iti-flag.tf{height:14px;background-position:-4867px 0px}.iti-flag.tg{height:13px;background-position:-4889px 0px}.iti-flag.th{height:14px;background-position:-4911px 0px}.iti-flag.tj{height:10px;background-position:-4933px 0px}.iti-flag.tk{height:10px;background-position:-4955px 0px}.iti-flag.tl{height:10px;background-position:-4977px 0px}.iti-flag.tm{height:14px;background-position:-4999px 0px}.iti-flag.tn{height:14px;background-position:-5021px 0px}.iti-flag.to{height:10px;background-position:-5043px 0px}.iti-flag.tr{height:14px;background-position:-5065px 0px}.iti-flag.tt{height:12px;background-position:-5087px 0px}.iti-flag.tv{height:10px;background-position:-5109px 0px}.iti-flag.tw{height:14px;background-position:-5131px 0px}.iti-flag.tz{height:14px;background-position:-5153px 0px}.iti-flag.ua{height:14px;background-position:-5175px 0px}.iti-flag.ug{height:14px;background-position:-5197px 0px}.iti-flag.um{height:11px;background-position:-5219px 0px}.iti-flag.us{height:11px;background-position:-5241px 0px}.iti-flag.uy{height:14px;background-position:-5263px 0px}.iti-flag.uz{height:10px;background-position:-5285px 0px}.iti-flag.va{height:15px;background-position:-5307px 0px}.iti-flag.vc{height:14px;background-position:-5324px 0px}.iti-flag.ve{height:14px;background-position:-5346px 0px}.iti-flag.vg{height:10px;background-position:-5368px 0px}.iti-flag.vi{height:14px;background-position:-5390px 0px}.iti-flag.vn{height:14px;background-position:-5412px 0px}.iti-flag.vu{height:12px;background-position:-5434px 0px}.iti-flag.wf{height:14px;background-position:-5456px 0px}.iti-flag.ws{height:10px;background-position:-5478px 0px}.iti-flag.xk{height:15px;background-position:-5500px 0px}.iti-flag.ye{height:14px;background-position:-5522px 0px}.iti-flag.yt{height:14px;background-position:-5544px 0px}.iti-flag.za{height:14px;background-position:-5566px 0px}.iti-flag.zm{height:14px;background-position:-5588px 0px}.iti-flag.zw{height:10px;background-position:-5610px 0px}.iti-flag{width:20px;height:15px;box-shadow:0px 0px 1px 0px #888;background-image:url("../img/flags.png");background-repeat:no-repeat;background-color:#DBDBDB;background-position:20px 0}@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx){.iti-flag{background-image:url("../img/flags@2x.png")}}.iti-flag.np{background-color:transparent}

@media (min-width: 1280px) {
    /* Core Styles ----------------------------------------------------------------------------*/

    .mainBody {
        width: 1280px
    }


    /* Search results ------------------------------------------------------------------------- */

    .rightContent {
        width: 1070px;
    }

    /* Search Tiles */
    .searchTileLayout {
        width: 250px;
    }

    /* sorting filters */

    .sorting p {
        display: block;
        width: 1060px;
        justify-content: center;
        align-items: center;
        padding-left: 0;
    }

    /* Side Banners ---------------------------------------------------------------------------*/
    .footerBuyNowLeft {
        margin-left: -850px;
    }

    .footerBuyNowRight {
        margin-left: 640px;
    }

    .CustomSkin {
        max-width: 1280px;
    }

    .CustomSkinLeft {
        margin-right: 636px;
    }

    .CustomSkinRight {
        margin-left: 635px;
    }

    /* MyAccount Loyalty section --------------------------------------------------------------*/

    .loy-right-content {
        width: 1040px;
        padding-left: 30px;
    }

    /* Product Page ---------------------------------------------------------------------------*/

    .buySection {
        font-size: 1rem;
    }

    .prodLeftBlock {
        width: 30%;
    }

    .prodRightBlock {
        width: 60%;
    }

    .mainInfo .prodImg img {
        max-width: 100%;
    }

    .mainInfo .prodImg {
        width: 100%;
    }

    .textDesc {
        font-size: 1rem;
    }

    .mediaVideo {
        margin-left: auto;
        margin-right: auto;
        max-height: 460px;
        max-width: 688px;
    }

    .descriptionLink {
        font-size: 1rem;
    }

    .orderHShip .halfed {
        width: 45%;
    }

        .orderHShip .halfed h3 {
            text-align: center;
        }

        .orderHShip .halfed:first-child {
            width: 45%;
        }

    .loy-list-col.col230 {
        width: 500px;
    }

    .orderTableTotals {
        width: 12.3% !important; /*to have it aligned with prices on the products and avoid hardcoding a width*/
    }

    /* Loyalty Games Library Section */
    .titled-sub-content .sub-big {
        width: 840px;
    }

    /* Bundle Configure Section*/

    .bundleConstruct.fixed {
        width: 1280px;
    }

    .orderHProd table tbody td.wid5.widerQuantity {
        text-align: right;
    }

    /* MyCoupons section*/
    #couponDetailsTable .loy-list-line .loy-list-col {
        width: 190px;
    }

    /* My Dashboard*/
    .sub-big {
        width: 832px;
    }

    .thirded {
        width: 336px;
    }

    /* Loyalty GiftCard balance check */

    .giftCardBlock {
        margin: 0 auto;
        margin-top: 20px;
        margin-bottom: 20px;
        width: 630px;
    }

    .giftStep {
        float: left;
    }

    a.bigButton:hover {
        color: #ee3124;
        background: #fff;
    }

    /* cart page */

    .gsCartCallToAction {
        justify-content: space-between!important;
    }

    .gsCartCallToAction_btnDiv {
        flex: unset!important;
    }

    /* QuickSearch */

    .quickSearchInput {
        all: unset;
    }

    .quickSearchWider {
        position: relative;
        margin-right: 20px;
    }

    .quickInputContainerWider {
        flex-direction: row;
    }

    .quickInputContainerWiderBackgroundNewNavBar {
        background: white;
        flex-direction: row;
        border: solid 1px #ccc;
        border-radius: 10px;
    }

        .quickInputContainerWider a {
            float: left;
            height: 36px;
            line-height: 36px;
            margin: 6px;
            padding: 0;
        }

        .quickInputContainer a span {
            height: 36px;
            line-height: 36px;
        }

            .quickInputContainerWider a span::after {
                color: #000;
                content: "search";
            }

            .quickInputContainerWider a span em {
                all: unset;
                height: 36px;
                line-height: 36px;
            }

    .selec .quickInputContainerWider {
        border: solid 1px #eaeaea;
        background-color: white;
    }

    .quickSearchInputWider {
        width: 90%;
        line-height: 34px;
        margin: 6px;
        border: none;
        font-size: 18px;
    }

        .quickSearchInputWider:focus {
            background-color: white;
            border: unset;
            outline: unset !important;
        }

    .ui-autocomplete li.autoSing ol {
        right: 585px;
    }  
    .ui-autocomplete li.autoSing ol {
        right: 105%;
    }
    .ui-autocomplete li.autoSingOld ol {
        right: 585px;
    } 
}