/********************************************************************************

        StyleSheet:     Baseline-Vn.nn.css

        Schematic:      XMLi5 Baseline CSS Rules

        Author:         Maurice O'Prey

        Copyright:      XMLi5 Ltd. 2018 all rights reserved

        Purpose:        This stylesheet contains PREREQUISITE rules for the styling of ALL XMLi5 applications.
                        It is the foundation style sheet and is web application agnostic. In particular this
                        stylesheet styles the CMS (In V4 the admin system does NOT have its own theme).

        Dependancies:   Requires Bootstrap CSS & Bootstrap Theme CSS loaded in MasterPage
                        Requires Z-Default.skin file in theme directory

        1.50rem  = 24px
        1.25rem  = 20px
        1 rem    = 16px (Standard)
        .75 rem  = 12px
        .5 rem   = 8px
        .25 rem  = 4px

        Bootstrap 4 breakpoints
        @media (min-width: 544px) { }
        @media (min-width: 768px) { }
        @media (min-width: 992px) { }
        @media (min-width: 1200px) { }

        Section ID          Contents
        ==========          ========
        LAYOUT              General Layout

        GLOBAL              Global rules

        BREADCRUMB          Breadcrumb Trail

        BUTTONS             Buttons

        FAQs                Frequently Asked Questions

        FORMS               Forms

        SECTION-HEADERS     Section Headers

        VALIDATION          Validation & Error Messages

        UTILITY             Utility Classes

        PAGE                Controls (alphabetically within page)
        ==========          ======================================================
        MASTERPAGE          
                            Card Deck
                            Banner_Search
                            CountrySearch
                            Charts
                            NavBar
                            PageFooterTop
                            PageFooter
                            PageFooterNav
                            Switcher

        HOME                Features

        STRIPE              Checkboxes


*********************************************************************************/

/********************************************************

    SECTION - LAYOUT (General Layout)

*********************************************************/
/* Constrain container-fluid to a max width if desired (can be used to expand the width of the site a bit) */
.container-fluid {max-width: 1400px;} /* with 15px gutters either side = 1400px */

/* increase max-width of container a bit if desired*/
.container {max-width: 1200px;}

/* testing only */
.demo {background: red; color: white;}
.demo1 {background: blue; color: white;}

/* Body background color */
body {background: #fff; min-height: 1200px; /* enforce scrollbars */}

/* add some space so it col-main does not touch the navbar */
.col-main {padding-top: 1rem;}

/********************************************************

    SECTION - GLOBAL (Global Rules)

*********************************************************/
a.btn-link, span.btn-link {color: red;}
a.btn-link, span.btn-link:hover {color: red;}
.btn-cursor {cursor: pointer;}

.chk-box {position: relative; top: 2px;}
/********************************************************

    SECTION - BREADCRUMB (Breadcrumb Trail)

*********************************************************/

/* breadcrumb seperator */
section.bct {background-color: #e9ecef;}
.breadcrumb {border-radius: 0; margin-top: 55px; margin-bottom: 0;}
.breadcrumb > li + li:before {color: #000000; content: " /  "; padding: 0 5px; font-size: 16px; font-weight: 900; position: relative; top: 1px;}

/********************************************************

    SECTION - BUTTONS (Buttons)

*********************************************************/
/* .btn-arrow-right (animated - .active class added by js)*/
.btn-arrow-right {position: relative;}
.btn-arrow-right i.fa {position: absolute; right: 20px; top: 15px; transition: all 0.5s ease-out;}
.btn-arrow-right i.fa.adjusted {position: absolute; right: 20px; top: 10px; transition: all 0.5s ease-out;}
.btn-arrow-right i.fa.active {position: absolute; right: 10px;}


/* .btn-arrow-right-static (not animated)*/
.btn-arrow-right-static {position: relative;}
.btn-arrow-right-static i.fa {position: absolute; right: 10px; top: 15px;}
.btn-arrow-right-static i.fa.active {position: absolute; right: 10px;}

/* .btn-arrow-left (animated - .active class added by js)*/
.btn-arrow-left {position: relative;}
.btn-arrow-left i.fa {position: absolute; left: 20px; top: 15px; transition: all 0.5s ease-out;}
.btn-arrow-left i.fa.active {position: absolute; left: 10px;}

/* .btn-arrow-down (animated - .active class added by js)*/
.btn-arrow-down {position: relative;}
.btn-arrow-down i.fa {position: absolute; right: 20px; top: 15px; transition: all 0.5s ease-out;}
.btn-arrow-down i.fa.active {position: absolute; top: 23px;}

/* .btn-arrow-up (animated - .active class added by js)*/
.btn-arrow-up {position: relative;}
.btn-arrow-up i.fa {position: absolute; right: 20px; top: 15px; transition: all 0.5s ease-out;}
.btn-arrow-up i.fa.active {position: absolute; top: 10px;}

/* .btn-arrow-static (not animated)*/
.btn-arrow-static {position: relative;}
.btn-arrow-static i.fa {position: absolute; right: 20px; top: 15px; transition: all 0.5s ease-out;}

/* .btn-arrow-ticked (not animated)*/
.btn-arrow-ticked {position: relative; font-size: 0.8rem; text-align: left;}
.btn-arrow-ticked i.fa {position: absolute; right: 20px; top: 10px; transition: all 0.5s ease-out;}

/* .btn-arrow-unticked (not animated)*/
.btn-arrow-unticked {position: relative; font-size: 0.8rem; text-align: left;}
.btn-arrow-unticked i.fa {display: none;}

/* .btn-arrow-left-sm (animated - .active class added by js)*/
.btn-arrow-left-sm {position: relative;}
.btn-arrow-left-sm i.fa {position: absolute; left: 20px; top: 9px; transition: all 0.5s ease-out;}
.btn-arrow-left-sm i.fa.active {position: absolute; left: 10px;}
a.btn-arrow-left-sm:hover {color: #FFF;}

/* .btn-arrow-right-sm (animated - .active class added by js)*/
.btn-arrow-right-sm {position: relative;}
.btn-arrow-right-sm i.fa {position: absolute; right: 20px; top: 9px; transition: all 0.5s ease-out;}
.btn-arrow-right-sm i.fa.active {position: absolute; right: 10px;}

/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
.accordion-arrow
    Simply assign class .accordion-arrow to the font-awesome icon used to rotate on open.
    e.g. <i class="fa fa-chevron-down pull-right accordion-arrow"></i>
    No Js is required.
*/
 
.fa.accordion-arrow {
    font-size: 0.8rem;
    position: relative;
    top: 5px;
    transition: .3s transform ease-in-out;
}

.collapsed .fa.accordion-arrow {
    transform: rotate(90deg);
    font-size: 0.8rem;
    position: relative;
    top: 5px;
}
/*
::::::::::::::::::::::::::::::::::::::::::::::::::::
.accordion-times (plus sign when rotated)
    Simply assign class .accordion-times to the font-awesome icon used to rotate on open.
    e.g. <i class="fa fa-times accordion-times"></i>
    No Js is required (Dont forget to add .collapsed to the data toggle)
*/

.fa.accordion-times {
    font-size: 0.8rem;
    position: relative;
    top: -2px;
    left: 2px;
    margin-right: 0.8rem;
    transition: .3s transform ease-in-out;
}

.collapsed .fa.accordion-times {
    transform: rotate(-315deg);
    font-size: 0.8rem;
    position: relative;
    top: -2px;
    left: 2px;
    margin-right: 0.8rem;
}
/********************************************************

    SECTION - FAQS (Frequently Asked Questions)

*********************************************************/
.section-faqs .panel-heading {border: 1px solid silver; padding: 10px 10px 0 20px;}
.section-faqs .panel-heading a {display: block;}
.section-faqs .fa.accordion-times {font-size: 1.2rem; position: relative; top: 5px;}

/********************************************************

    SECTION - FORMS (Forms and General Input)

*********************************************************/
.form-bordered {border: 1px solid silver; border-radius: 7px; padding: 20px;}
.form .control-label, .form-asterisk {color: #002D62; font-weight: 700;}
.form-asterisk {display: inline;}

/********************************************************

    SECTION - SECTION HEADERS (Section Headers)

*********************************************************/

/* Section Header (blue background block with blue line and white text) */
h2.section-header {margin-top: 20px; margin-bottom: 20px;}
.section-header { color: #002D62; background: transparent; position: relative;}
.section-header span { font-weight: 600; text-transform: uppercase; text-rendering: optimizeLegibility; position: relative; z-index: 2; background: #002D62; color: #fff; display: inline-block; padding: 10px 30px; }
.section-header:after { background: #002D62; height: 2px; display: block; position: absolute; z-index: 1; top: 26px; width: 100%; content: ""; }

/* Section Header Reversed (white background block with blue line and blue text) */
h2.section-header-reversed {margin-top: 20px; margin-bottom: 20px;}
.section-header-reversed { color: white; background: transparent; position: relative;}
.section-header-reversed span { font-weight: 600; text-transform: uppercase; letter-spacing: 2px; text-rendering: optimizeLegibility; position: relative; z-index: 2; background: white; color: #002D62; display: inline-block; padding: 10px 30px; }
.section-header-reversed:after { background: #002D62; height: 2px; display: block; position: absolute; z-index: 1; top: 26px; width: 100%; content: ""; }

/* Section Header Transparent (clear background block with white border) */
h2.section-header-transparent {margin-top: 20px; margin-bottom: 20px;}
.section-header-transparent { color: white; background: transparent; position: relative; border: 2px solid white; padding: 5px 0px;}
.section-header-transparent span { font-weight: 600; text-transform: uppercase; text-rendering: optimizeLegibility; position: relative; z-index: 2; background: transparent; color: white; display: inline-block; padding: 10px 30px; }

/********************************************************

    SECTION - VALIDATION (Validation & Error Messages)

*********************************************************/

/* .error-message (standard error message) */
.error-message {color: darkred;}

/* .error-message-line (Style and float the error message to the right top of the input box) */
.error-message-line {float: right; color: darkred;}

/* Validation icons (position .form-group relative so that icon can be positioned absolutely within it) */
.form-group {position: relative;}
.fa.form-control-feedback {font-size: 1.2rem; float: right; position: absolute; right: 10px; top: 42px; }
.fa.fa-close.form-control-feedback {color: darkred;}
.fa.fa-check.form-control-feedback {color: green;}

/* Password Validator */


/********************************************************

    PAGE (MasterPage)   CONTROL (Card Deck)

*********************************************************/
.card-deck .card {margin-bottom: 1rem;}

/* Set width to make card deck cards 100% width */
@media (max-width: 768px) {

    .card-deck .card {
        flex-direction: column;
        -webkit-box-flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        margin-bottom: 1rem;
    }
}

.admin .card-deck .card:last-child {margin-bottom: 0rem;}

@media (min-width: 769px) {

    .card-deck .card {margin-bottom: 0rem;}

    /* Make the space between cards less wide */
    .admin .card-deck .card {margin-left: 15px; margin-right: 0px;}
    .admin .card-deck .card:last-child {margin-right: 15px;}
}


/********************************************************

    PAGE (MasterPage)   CONTROL (Banner_Search)

*********************************************************/
/*##
    ======================================
    [BannerSearch] - Banner Search Control
    ======================================
##*/
.banner-search {height: 600px;}
.banner-search .banner-overlay {background: rgba(0,0,0,0.5); padding: 180px 0 90px; height: 600px;}
.banner-search .wrapper {position: relative; top: -90px; color: #fff;}
.banner-search h1 {position: relative; color: white; font-size: 2.5rem; font-weight: 700;}
.banner-search .sub-heading {position: relative; color: white; font-weight: 600;}
.banner-search .txt-search {position: relative; padding: 15px 45px 15px 60px; border-radius: 99px; border-style: none; border-width: 0; font-weight: 400; line-height: 24px;}
.banner-search .btn-search {position: absolute; left: 15px; top: 10px; font-size: 1.5rem; color: #f9461c;}
.banner-search .btn-buy {background-color: green; border: 2px solid white; opacity: 0.9; font-size: 1.15rem; transition: all 0.4s ease-in-out;}
.banner-search .btn-buy:hover {background-color: green; border: 2px solid white; opacity: 1.0;}

/* Style the autocomplete list (note - prefixing these rules with .banner-search causes the styling to fail in Chrome and Safari?)*/
ul.autocomplete-list {cursor: pointer; margin-top: 10px;}
ul.autocomplete-list {border-radius: 25px;}
ul.autocomplete-list > li:first-of-type {border-top-left-radius: 25px; border-top-right-radius: 25px;}
ul.autocomplete-list > li:last-of-type {border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;}
ul.autocomplete-list li.autocomplete-listitem {background-color: black; color: white; padding: 15px; text-align: center;}
ul.autocomplete-list li.autocomplete-listitem-highlighted {background-color: rgb(7,123,255); color: white; padding: 15px; text-align: center;}

/* adjuts the vertical position of the banner text */


/********************************************************

    PAGE (MasterPage)   CONTROL (Charts)

*********************************************************/
/* makes chart responsive */
canvas {padding: 15px; width: 100% !important; height: auto !important;}

/* legend styles */
.chart-legend {margin: 0; width: 100%; text-align: center;}
.chart-legend ul {width: 100%; margin: 0; padding: 0;}
.chart-legend li {list-style-type: none; padding: 0; font-size: 14px; display: inline-block; margin: 0 1rem 0 0;}
.chart-legend li span {display: inline-block; width: 12px; height: 12px; margin-right: 5px;}

/********************************************************

    PAGE (MasterPage)   CONTROL (CookieCrumble)

*********************************************************/
/* cookie-crumble */
#cookie-container {position: fixed; bottom: 0; width: 100%; background: #002D62; opacity: 0.7; z-index: 1999; margin-bottom: -20px;}
#cookieInfo {padding: 15px; opacity: 1.0; }
#cookieInfo p { color: #fff; font-weight: bold; width: 85%;}
#cookieInfo a { color: #fff; text-decoration: underline; }
#cookieInfo .btnClose { color: #fff; margin-right: 10px; padding: 5px; border: 1px solid #fff; text-decoration: none; position: relative; top: -40px;}

/********************************************************

    PAGE (MasterPage)   CONTROL (PageFooterTop)

*********************************************************/
.page-footer-top {background-color: #EEF1F2; height: 0;}

/********************************************************

    PAGE (MasterPage)   CONTROL (PageFooter)

*********************************************************/
.page-footer {background-color: #EEF1F2; margin-top: 0;}
.page-footer {padding-top: 20px;padding-bottom: 20px;}
.page-footer a {}
.page-footer ul li {padding: 5px 0;}
.page-footer h3 {padding-bottom: 10px; border-bottom: 1px solid #727272; color: #727272;}
.page-footer h4 {padding-bottom: 10px; color: #727272;}
.page-footer h5 {padding-bottom: 10px; color: #727272;}
.page-footer .social-icons {margin-bottom: 10px;}
.page-footer .social-icons a {color: #727272; font-size: 2.0rem;}
.page-footer .btn-subscribe {background-color: #FFF; border: 1px solid #727272; margin-top: 10px;}
.page-footer .subscribe-text {display: block; margin-bottom: 10px;}
.page-footer .validation-container {padding: 10px 0;}
.page-footer .validation-container .text-danger {color: #FFF;}

/********************************************************

    PAGE (MasterPage)   CONTROL (PageFooterNav)

*********************************************************/
.page-footer-nav {background-color: #002D62; color: #FFF;}
.page-footer-nav {padding-top: 20px;}
.page-footer-nav a {color: #FFF;}

/********************************************************

    PAGE (MasterPage)   CONTROL (Switcher)

*********************************************************/

#btnSwitcher {position: fixed; bottom: 20px; left: 40px; font-size: 30px;}
#ddlWebSite {margin-bottom: 20px;}
#slideout {
    background: transparent;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    color: #333;
    position: fixed;
    bottom: 180px;
    left: -520px;
    width: 300px;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    z-index: 999;
}

#slideout {display: block;}

    #slideout .ddl {
        display: block;
        height: 40px;
        margin-left: 40px;
        margin-Top: 10px;
        margin-bottom: 10px;
        width: 200px;
        padding: 5px;
    }

    #slideout.on {
        left: 0;
    }

/********************************************************

    PAGE (Home)   CONTROL (Features)

*********************************************************/
/* features */
section.features {padding-top: 0; padding-bottom: 0;}
section.features .feature-intro {margin-bottom: 40px;}
section.features .feature {margin-bottom: 20px;}
section.features .feature .panel-heading {padding: 20px 0; background-color: #002D62; font-size: 1.25rem;}
section.features .feature .panel-body {padding: 0 0 10px 0;}
section.features .feature a {color: #FFF;}
section.features .feature a:hover {text-decoration: none;}

/* Owl Carousels and navigation buttons */
.owl-carousel {padding-left: 15px; padding-right: 15px;} /* adjust to align with bootstrap container padding */
.owl-theme .owl-nav [class*='owl-'] {background-color: #002D62; color: #FFF;}
.owl-theme .owl-nav [class*='owl-']:hover {background-color: #002D62; color: #FFF; text-decoration: none; opacity: 0.7;}

/********************************************************

    SECTION - UTILITY (Utility Classes)

*********************************************************/

/* Indent Nested ULs */
ul.nested {padding-left: 20px;}

/* add to column if wraps other columns */
.no-padding {padding-left: 0; padding-right: 0;}

.containxer-fluid {max-width: 1400px;}

/**
 * Stripe The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
    box-sizing: border-box;
    height: 40px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

.StripeElement--focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
}

.StripeElement--invalid {
    border-color: #fa755a;
}

.StripeElement--webkit-autofill {
    background-color: #fefde5 !important;
}

/*=========================================
    (1) - Standard rules for Small Devices 
  =========================================*/

/* adjust the logo position and size */
.navbar-brand {margin: 0; position: relative; top: 0; left: 0; width: 120px; z-index: 1;}

/* highligthed links*/
a.nav-link.highlighted {background: #f9461c; padding: 0 15px !important; position: relative; top: 7px; border-radius: 25px;}
.navbar-light .navbar-nav .nav-link:hover {color: #fff !important;}

/* top-up-mob */

a.nav-link.topup-mob {position: absolute; top: 5px; left: 200px; color: #fff; font-size: 12px; padding: 2px 7px;}

/********************************************************

    SECTION - FORMS (Forms and General Input)

*********************************************************/
.form-bordered {
    border: 1px solid silver;
    border-radius: 7px;
    padding: 20px;
}
.form .control-label, .form-asterisk {color: #002D62; font-weight: 700;}
.form-asterisk {display: inline;}

/********************************************************

    SECTION - BREADCRUMB (Breadcrumb Trail)

*********************************************************/

/* breadcrumb seperator */
section.bct {background-color: #e9ecef;}
.breadcrumb {border-radius: 0; margin-top: 0; margin-bottom: 0;}
.breadcrumb li {display: inline-block;}
.breadcrumb > li + li:before {color: #000000; content: " /  "; padding: 0 5px; font-size: 16px; font-weight: 900; position: relative; top: 1px;}


/********************************************************

    CONTROL (ProductDetail)

*********************************************************/

/* 
    Product Prices (generic) 
*/

/* labels */
.was { color: #Bf5c2d;}
.now {color: #bf5c2d;}
.public {color: #bf5c2d;}
.trade {color: #bf5c2d;}

.public-lg {font-size: 1.5rem;}
/* 
    Product Prices (Product Grid) 
*/

.price-retail {color: #4a4a4a; margin-left: 10px;}
.price-public {color: #4a4a4a; margin-left: 10px;}
.price-trade {color: #4a4a4a; margin-left: 10px;}

/* Partner (RssFeed) slider */
.partner .item {background-color:rgba(0,0,255,0.3); margin-right: 20px; margin-left: 20px; padding: 20px; border: 1px solid silver; border-radius: 10px;}
.partner .item h5 {min-height: 160px; background-color: transparent; color: #fff;}
.partner .item p {color: #fff;}
.owl-wrapper-outer {height: 400px;}
.partner-logo h4 {color: #fff; margin-top: -40px; margin-bottom: 40px; text-align: center;}
/***********************************************************************************************************************

        Control ID              Contents
        ====================    =============================================
        MINI-BASKET             Mini Basket
***********************************************************************************************************************/


.img-transparent {background-color: #dedede;}


/***************************************************************************

    Small devices (small 470px and up)  -  Just up from phone etc.

****************************************************************************/

@media (min-width: 470px) {

    /* adjust the position of the country search box */
    .pnl-country-search {top: 300px;}
    .banner-search .wrapper {position: relative; top: -120px;}

}


/***************************************************************************

    Small devices (small tablets, 768px and up)  - iPad in Portrait etc.

****************************************************************************/

@media (min-width: 768px) {

    .banner-search .wrapper {position: relative; top: -150px;}

    /* .btn-arrow-ticked (not animated)*/
.btn-arrow-ticked {position: relative; font-size: 1.2rem; text-align: left;}
.btn-arrow-ticked i.fa {position: absolute; right: 20px; top: 12px; transition: all 0.5s ease-out;}

/* .btn-arrow-unticked (not animated)*/
.btn-arrow-unticked {position: relative; font-size: 1.2rem; text-align: left;}
.btn-arrow-unticked i.fa {display: none;}

}

/***************************************************************************
 
    Medium devices (ipads, desktops, 992px and up) - NavBar folds to 2 lines

****************************************************************************/

@media (min-width: 992px) {
    .banner-search .wrapper {position: relative; top: -60px;}
}

/****************************************************************************
 
Large devices (large desktops, 1200px and up) - NavBar on single line

****************************************************************************/

@media (min-width: 1200px) {
   

}

@media (min-width: 1600px) {
   

}

/***********************************************************************************************************************

        StyleSheet:     E-Commerce-Vn.nn.css

        Schematic:      XMLi5 Controls CSS Rules

        Author:         Maurice O'Prey

        Copyright:      XMLi5 Ltd. 2016 all rights reserved

        PAGE                    Contents
        ====================    ===========================================

        Product-List            Product List 
                                - Product SideBar
                                - Product Price Filter
                                - Product Sort
                                - Product Grid
                                - Product Item (grid-view/list-view)
                                - Product Offer Badges (new, bundle, offer, discounted)
                                - Product price
                                - Product Stock Status

        Product-Detail          Product Detail
                                - Product Zoom
                                - Product Add To Basket (Override Minimalect)
                                - Product Detail (Plans) for eSim

        Basket                  Basket                  
                                - Mini Basket (NavBar)
                                - Mini Basket (Ajax)
                                - Basket

        Checkout                Checkout
                                - Wizard
                                - Progress Bar

***********************************************************************************************************************/


/***********************************************************************************************************************

        Page/Control ID              Contents
        ====================    ===========================================
        Product-List            - Product SideBar

***********************************************************************************************************************/

/* 
    Product Sidebar 
*/
.product-sidebar {background-color: #002044;}
.product-sidebar .nav-item a {color: #fff;}

/* product-sidebar (links level-1) */
.product-sidebar .nav-item a.nav-link.level-1 {background-color: #002044; border-bottom: 1px solid #625700;}
.product-sidebar .nav-item a.nav-link.level-1:hover {background-color: #077bff;}
.product-sidebar .nav-item a.nav-link.level-1[aria-expanded=true] {background-color: #5aa7ff;}

/* product-sidebar links (level-2) */
.product-sidebar .nav-item a.nav-link.level-2 {background-color: #002D62; padding-left: 1.5rem;}
.product-sidebar .nav-item a.nav-link.level-2:hover {background-color: #077bff; color: #fff;}
.product-sidebar .nav-item a.nav-link.level-2[aria-expanded=true] {background-color: #002D62; color: #fff;}

/* product-sidebar links (level-3) */
.product-sidebar .nav-item a.nav-link.level-3 {background-color: #002D62; color: #fff; padding-left: 3.0rem;}
.product-sidebar .nav-item a.nav-link.level-3:hover {background-color: #077bff; color: #fff;}
.product-sidebar .nav-item a.nav-link.level-3.active {background-color: #e6f2ff; color: #002D62;}


/* 
    Product Sort
*/
.product-sort {border-top: 1px solid #DDDDDD; border-bottom: 1px solid #DDDDDD; margin-left: 15px; margin-right: 15px;} 

/* restyle default bootstrap pagination so that it aligns with our filter bar */
.product-sort .pagination {margin-top: 0; margin-bottom: 0; padding: 4px;}
.product-sort .pagination a {margin-left: 5px; margin-right: 5px; color: #54616C;}

/* grid-view/list-view icons */
.product-sort a.grid-view {border: 1px solid #DDDDDD; border-radius: 3px; padding: 8px 10px 8px 10px; margin-left: 10px; color: #54616C;} 
.product-sort a.list-view {border: 1px solid #DDDDDD; border-radius: 3px; padding: 8px 10px 8px 10px; margin-left: 10px; color: #54616C;}

.product-sort a.btn-view:hover {color: #002D62;} 
.product-sort a.grid-view:hover {color: #002D62;} 
.product-sort a.list-view:hover {color: #002D62;} 

/*
    Product Price Filter
*/
.price-filter {}
.price-filter a.btn-filter {color: #54616C;}
.price-filter a.btn-reset {color: #54616C;}

/* 
    Product Grid
*/
.product-grid {margin-top: 20px; margin-left: 0; margin-right: 0;}

/* Limit the height of the product image (also helps with transition between grid and listview) */
.product-grid .img-product {max-height: 400px;}

/*
    Product-Item (grid-view)
*/
.product-grid .grid-view .product {border: 1px solid #F5F5F5; padding: 10px; position: relative; transition:border ease-in-out 0.3s;}
.product-grid .grid-view .product:hover {border: 1px solid #DDDDDD;}
.product-grid .grid-view .description1 {height: 50px;}
.product-grid .grid-view .description2 {display: none;}
.product-grid .grid-view .description3 {display: none;}
.product-grid .grid-view .prices {height: 80px;}

/*
    Product-Item (list-view)
*/
.product-grid .list-view .product {border: 1px solid #F5F5F5; padding: 10px; position: relative; height: 200px; transition:border ease-in-out 0.3s;}
.product-grid .list-view .product:hover {border: 1px solid #DDDDDD;}
.product-grid .list-view .description1 {height: 50px;}
.product-grid .list-view .description2 {display: inline-block;}
.product-grid .list-view .description3 {display: inline-block;}
.product-grid .list-view .product .description1 {position: absolute; top: 10px; right: 20px;}
.product-grid .list-view .product .description2 {float: left;}
.product-grid .list-view .product .prices {position: absolute; top: 40px; right: 20px;}
.product-grid .list-view .product .product-buttons {position: absolute; top: 110px;  right: 20px;}
.product-grid .list-view .product .lnk-email-me-when-available {position: absolute; top: 130px;  right: 20px;}
.product-grid .list-view .product .stock-status {position: absolute; top: 150px;  right: 20px;}

/* Listview Transition - Shrink the image and float left */
.product-grid .list-view .img-product {
    display: block;
    float: left;
    position: relative;
    text-align: center;
    max-height: 180px;
    max-width: 200px;
    transition: all 0.5s ease 0s;
    padding-right: 20px;
    background: transparent;
}


/* 
    Product Offer Badges (IsNew, IsBundle, IsOffer, IsDiscounted)
*/
.product-offer-container {
    position: absolute;
    z-index: 10;
    top: 20px;
    left: 20px;
    width: 100%;
    border-radius: 4px;
}

.product-is-new {
    background: Green;
    color: #FFFFFF;
    float: left;
    font-family: 'OpenSans', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: lighter;
    height: 100%;
    padding: 3px 10px;
}

.product-is-bundle {
    background: #54616c;
    color: #FFFFFF;
    float: left;
    font-family: 'OpenSans', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: lighter;
    height: 100%;
    padding: 3px 10px;
}

.product-is-offer {
    background: Red;
    color: #FFFFFF;
    float: left;
    font-family: 'OpenSans', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: lighter;
    height: 100%;
    padding: 3px 10px;
}

.product-is-discounted {
    background: #E73446;
    border-radius: 0 4px 4px 0;
    color: #fff;
    display: inline-block;
    float: left;
    font-family: 'OpenSans', Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: lighter;
    height: 100%;
    padding: 3px 5px;
}
/* 
    Product Prices (generic) 
*/

/* labels */
.was { color: #Bf5c2d;}
.now {color: #bf5c2d;}
.public {color: #bf5c2d;}
.trade {color: #bf5c2d;}

.public-lg {font-size: 1.5rem;}
/* 
    Product Prices (Product Grid) 
*/

.price-retail {color: #4a4a4a; margin-left: 10px;}
.price-public {color: #4a4a4a; margin-left: 10px;}
.price-trade {color: #4a4a4a; margin-left: 10px;}

/* 
    Product Prices (Product Detail)
*/

/* labels*/
.product-info .product-price .was {color: grey;  font-size: 16px; font-size: 1.6rem; position: relative; top: 6px;}
.product-info .product-price .now {color:mediumvioletred;  font-size: 14px; font-size: 1.4rem; position: relative; top: 18px;}
.product-info .product-price .public {color: grey;  font-size: 14px; font-size: 1.4rem; position: relative; top: 16px;}
.product-info .product-price .trade {color: #bf5c2d;  font-size: 14px; font-size: 1.4rem; position: relative; top: 10px; left: 0;}

/* prices */
.product-info .product-price .price-retail {color: grey;  font-size: 20px; font-size: 2.0rem; float: left; margin-left: 23px;}
.product-info .product-price .price-public {color: Green; font-size: 24px; font-size: 2.4rem; float: left; margin-left: 25px;}
.product-info .product-price .price-trade {color: Green; font-size: 20px; font-size: 2.0rem; float: left; margin-left: 30px;}


/*
    Product Stock Status
*/
.in-stock {color: green;}    
.limited {color: darkorange;}
.out-of-stock {color: darkred;}
.email-me-when-available {color: darkred;}

/***********************************************************************************************************************

        Page/Control ID              Contents
        ====================    ===========================================
        Product-Detail          - Product Zoom
                                - Product Add To Basket

***********************************************************************************************************************/

/* 
    Product Zoom
*/

/*
    Product Add to Basket (override minimalect)
*/
.product-add-to-basket .minict_wrapper {width: 100%;}

/***********************************************************************************************************************

        Page/Control ID              Contents
        ====================    ===========================================
        Product-Detail (pans)   - Plan Item

***********************************************************************************************************************/

/* 
    Plan Item
*/

/* country name */
h1.country-name {background-color: #002d62; color: #fff; padding: 20px; font-size: 1.5rem; margin-top: 10px;}

a.btn-where-else {color: #DC3545;}

/* Flag caption */
.flag-caption {position: relative; top: -20px; margin-bottom: -20px;}

/***********************************************************************************************************************

        Page/Control ID              Contents
        ====================    ===========================================
        Basket                  - Mini Basket (NavBar)
                                - Mini Basket (Ajax)

***********************************************************************************************************************/

/* Mini Basket (NavBar) */
.mini-basket {width: 600px; margin-left: -400px; margin-top: 0; background-color: #fff;}
.mini-basket .price{font-size: 14px; font-size: 1.4rem;}
.mini-basket a {color: #FFF;}
.mini-basket a:hover {color: #FFF; text-decoration: none; }
.mini-basket a.product-description {background-color: transparent; color: #00304A;}
.mini-basket a.product-description:hover {color: #777777; text-decoration: underline; transition: .3s ease-in-out all;}
.mini-basket .mini-basket-item {margin: 20px 0; background-color: #fff;}
.mini-basket .row.mini-basket-buttons {padding: 20px;}

/* Mini-Basket (Ajax) */
.mini-basket-ajax {margin-top: 0; background-color: #F8F8F8;}
.mini-basket-ajax .price{font-size: 14px; font-size: 1.4rem;}
.mini-basket-ajax a {color: #FFF;}
.mini-basket-ajax a:hover {color: #FFF; text-decoration: none; }
.mini-basket-ajax a.product-description {background-color: transparent; color: #00304A;}
.mini-basket-ajax a.product-description:hover {color: #777777; text-decoration: underline; transition: .3s ease-in-out all;}
.mini-basket-ajax .mini-basket-item {margin: 20px 0;}
.mini-basket-ajax .row.mini-basket-buttons {padding: 20px;}
.pnl-success {padding-left: 20px; padding-right: 20px;}
.item-added .alert-success {background-image: none; background-color: #F8F8F8; margin-bottom: 20px; position: relative; top: 5px;}

/* Mini-Basket-Ajax (Position Close Button) */
.item-added .btn-close-item-added {position: relative; right: -17px; top:10px; z-index: 999; background-image: url(graphics/popup/popup_close.png); background-repeat: no-repeat; height: 36px; width: 36px; }

/*
    Basket
*/
/* Basket Headings */
.basket-content {padding-right: 30px;}
.basket-content .border-top {border-top: 1px solid #DDDDDD; padding-top: 10px; margin-top: -15px;}
.basket-content .border-bottom {border-bottom: 1px solid #DDDDDD; padding-bottom: 10px;}
.basket-content .seperator {border-bottom: 1px solid #DDDDDD; margin-bottom: 20px;}

/* Basket Items */

/* Basket Summary */
.basket-summary .row {padding-top: 5px; padding-bottom: 5px;}

/***********************************************************************************************************************

        Control ID              Contents
        ====================    =============================================
        CHECKOUT                Checkout
                                - Wizard
                                - Progress Bar

***********************************************************************************************************************/
/*
    Checkout - Wizard
*/
.wizard {width: 100%;} /* Important to assign 100% width as wizards are rendered in a table */
.wizard h3.section-title{border-top: 2px solid #DEDEDE; border-bottom: 2px solid #DEDEDE; padding: 5px 0; text-align: center; text-transform: uppercase; margin-bottom: 20px;}
.order-successful h1 {margin-bottom: 0;}

/* checkout forms (override base background colour )*/
.checkout div.form {background-color: #FFF;}

/*
    Checkout - Progress Bar
*/

/* Progress bar */
ul.progress-bar {clear: both; display: inline-block; height: auto; padding: 0; margin-bottom: 20px; width: 100%;}

/* Set width % of each tab depending on the number involved (usually 5=20%) */
ul.progress-bar li {display: inline-block; float: left; height: auto; margin: 0; min-height: 55px; padding: 0; width: 20%;}
ul.progress-bar li a i {border-radius: 0; display: block; height: auto; left: 0; line-height: 40px; margin-top: -20px; padding: 0; text-align: center; width: auto; float: none !important;}

/* Adjust Height of Bottom */
ul.progress-bar li a span {display: block; padding: 5px 0;}

/* Each Step Item (Top and Bottom)*/
ul.progress-bar li a i {background: #002D62; opacity: 0.7;}
ul.progress-bar li a {background: #F2F2F2; color: #54616c; display: inline-block; height: 100%; line-height: normal; padding: 20px 0 0; text-align: center; vertical-align: middle; width: 100%; text-transform: uppercase; text-decoration: none;}

/* Active item (Top and Bottom) */
ul.progress-bar li.active a i {background: #002D62; color: #FFFFFF;}
ul.progress-bar li.active a {position: relative; background: #54616C; color: #fff;}

/* Adds a Downward Pointing Triangle to the Active Item */
ul.progress-bar li.active a:after {top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: #fff; border-width: 10px; margin-left: -10px; border-top-color: #54616C !important;}

.tab {border: 2px solid #0275d8; color: #0275d8;}
.tab a.nav-link:focus {border: 1px solid #0275d8; color: #0275d8;}

/***********************************************************************************************************************

        Control ID              Contents
        ====================    =============================================
        STRIPE                  Checkboxes

***********************************************************************************************************************/
/*##
    ==============================================
    [Checkbox] - Custom Checkbox and Radio Buttons
    ==============================================
##*/

/* [CheckBox] 
<label class="check-container">
    <asp:Label ID="ltlRememberMe" runat="server" CssClass="txt1"/>
    <input type="checkbox" id="chkRememberMe" runat="server">
    <span class="checkmark"></span>
</label>
*/
/* Customize the label (the container) */
.check-container {
    display: block;
    position: relative;
    top: 5px;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    white-space: nowrap;
}

    /* Hide the browser's default checkbox */
    .check-container input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    /* Create a custom checkbox */
    .check-container .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: #eee;
    }

    /* add a background color to the checkbox */
    .check-container input ~ .checkmark {
        background-color: #ccc;
        border: 1px solid black;
    }

    /* On mouse-over, add a grey background color */
    .check-container:hover input ~ .checkmark {
        background-color: #5e727d;
    }

    /* When the checkbox is checked, add a blue background */
    .check-container input:checked ~ .checkmark {
        background-color: #007bff;
    }

    /* Create the checkmark/indicator (hidden when not checked) */
    .check-container .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }

    /* Show the checkmark when checked */
    .check-container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the checkmark/indicator */
    .check-container .checkmark:after {
        left: 9px;
        top: 7px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }