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

        StyleSheet:     B-App-Baseline-V4.00.css

        Schematic:      XMLi5 Baseline CSS Rules

        Author:         Maurice O'Prey

        Copyright:      XMLi5 Ltd. 2020 all rights reserved

        Purpose:        This stylesheet contains rules which apply to ALL WebSites

        Optimise:       Using https://cssminifier.com/
        
        1.50rem  = 24px
        1.25rem  = 20px
        1 rem    = 16px (Standard)
        .75 rem  = 12px
        .5 rem   = 8px
        .25 rem  = 4px

        Bootstrap 5 breakpoints
        =======================
        Extra small         xs      @media (min-width: < 576px) { }
        Small               sm      @media (min-width: ≥ 576px) { }
        Medium              md      @media (min-width: ≥ 768px) { }
        Large               lg      @media (min-width: ≥ 992px) { }
        Extra Large         xl      @media (min-width: ≥ 1200px) { }
        Extra extra large   xxl     @media (min-width: ≥ 1400px) { }

        AREA                    Contents
        ====================    ===========================================
        General                 - [:root]
                                - [Body]
                                - [Accordions]
                                - [AjaxList]
                                - [AutoCompleteList]
                                - [Branding]
                                - [Buttons]
                                - [Cards]
                                - [Checkbox]
                                - [Container]
                                - [CookieBanner]
                                - [Effect-Sadie]
                                - [Flames]
                                - [FloatingLabels]
                                - [Forms]
                                - [Helptext]
                                - [Icons]
                                - [Links]
                                - [Match-Height]
                                - [Min-Height]
                                - [NavBar]
                                - [PageFooter]
                                - [PreLoader]
                                - [Prices]
                                - [Rainbow]
                                - [SpyGlass]
                                - [Switches]
                                - [Tabs]
                                - [TogglePassword]
                                - [Typography]
                                - [Validation]
                                - [Z-Index]
                        

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

/* variables */
:root {
    /* 
		colours
    */
    --o2: rgb(0,25,165);
    --vodafone: rgb(156, 0, 6);
    --three-bg: rgb(255,136,121);
    --three-fg: rgb(255,191,197);
    --accent: rgb(250, 215, 118);
    --accent-fg: rgb(254, 74, 27);
    --black: rgb(0,0,0);
    --blue: rgba(0,45,98);
    --blue-border: rgb(51,94,234);
    --blue-dark: rgb(0,32,68);
    --blue-light: rgb(51,94,234);
    --blue-lightest: rgb(235,247,255);
    --blue-hover: rgb(130,152,224);
    --blue-opaque: rgba(0,45,98,0.6);
    --blue-primary: rgb(51,94,234);
    --green: rgba(66, 186, 150, 1.0);
    --grey-normal: rgb(80,102,144);
    --grey-light: rgb(238,238,238);
    --grey-medium: rgb(178,178,178);
    --gray-100: rgb(249, 251, 253);
    --gray-200: rgb(241, 244, 248);
    --gray-250: rgb(227, 233, 242);
    --gray-300: rgb(213, 222,235);
    --red-dark: rgb(139,0,0);
    --white: rgba(255,255,255,1.0);
    --white-opacity-1: rgba(255,255,255,0.1);
    --white-opacity-2: rgba(255,255,255,0.2);
    /*
        navbars
    */
    --o2-navbar-scrolled: rgb(13,37,169);
    --vodafone-navbar-scrolled: rgb(162,15,21);
    --navbar-scrolled: rgb(40, 54, 88);
    /* 
		roles
	*/
    /* Brands */
    --o2-bg: var(--o2);
    --o2-fg: var(--o2);
    --o2-btn-bg: var(--o2);
    --o2-btn-fg: var(--white);
    --vodafone-bg: var(--vodafone);
    --vodafone-fg: var(--white);
    --three-btn-bg: var(--black);
    --three-btn-fg: var(--three-fg);
    --three-btn-fg-hover: var(--white);
    /* Other */
    --autocomplete-fg: var(--white);
    --autocomplete-mobile-bg: var(--blue-dark);
    --autocomplete-dropdown-bg: var(--blue-dark);
    --autocomplete-dropdown-fg: var(--white);
    --autocomplete-dropdown-bg-hover: var(--blue-light);
    --autocomplete-dropdown-fg-hover: var(--white);
    --body-fg: var(--grey-normal);
    --card-body-fg: var(--grey-normal);
    --checkbox-bg: var(--grey-light);
    --checkbox-bg-hover: var(--grey-medium);
    --checkbox-bg-checked: var(--blue-light);
    --checkbox-focus: var(--blue-lightest);
    --checkradio-bg: var(--grey-light);
    --checkradio-bg-hover: var(--grey);
    --checkradio-bg-checked: var(--blue-light);
    --font-size-largest: 2.75rem; /* 44px */
    --font-size-larger: 2.0rem; /* 32px */
    --font-size-large: 1.5rem; /* 24px */
    --font-size-medium: 1.25rem; /* 20px */
    --font-size-normal: 1.0rem; /* 16px */
    --font-size-small: 0.875rem; /* 14px */
    --font-size-smallest: 0.75rem; /* 12px */
    --font-weight-light: 400;
    --font-weight-normal: 500;
    --font-weight-medium: 600;
    --font-weight-heavy: 700;
    --font-weight-heaviest: 800;
    --input-icon: var(--body-fg);
    --preloader-bg: var(--white);
    --preloader-border: 8px solid var(--accent-fg);
    --preloader-border-white: 8px solid var(--white);
    /* bootstrap/landkit colors */
    --bg-danger-subtle: rgba(223,71,89, 0.1);
    --bg-success-subtle: rgba(66,186,150, 0.1);
}
/*##
    =======================================
    [Body]
    =======================================
##*/
body {
    background-color: var(--white);
    color: var(--body-fg);
}

h1 {
    font-size: 2rem;
}

/*##
    =======================================
    [Accordions]
    =======================================
##*/
/* styled to look like bootstrap defaults */
/* header when collapsed */
.accordion .accordion-button.collapsed {
    background: #fff !important;
    font-weight: 400;
    border: 2px solid #fff;
}
/* header when open */
.accordion .accordion-button {
    background: var(--blue-lightest);
    font-weight: 700;
    border: 1px solid var(--blue-border);
    border-bottom: none;
    transition: all ease-in .2s;
}
    /* move collapse button to right */
    .accordion .accordion-button:after {
        position: absolute;
        right: 20px;
    }

.accordion .accordion-collapse {
    border: 1px solid var(--blue-border);
}

/*##
    =======================================
    [AjaxList]
    =======================================
##*/
.ajax-list {
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Hides horizontal scrolling */
    position: absolute;
    background-color: white; /* Ensures visibility */
    border: 1px solid #ccc; /* Optional: adds a border */
    z-index: 1050; /* Keeps it above other elements */
}

    .ajax-list li:hover {
        cursor: pointer;
        font-weight: var(--font-weight-heavy);
    }

.ajax-list-md {
    max-height: 310px; /* Adjust height as needed */
}


/*##
    =======================================
    [AutoCompleteList]
    =======================================
##*/

/* Style the autocomplete list */
ul.autocomplete-list {
    cursor: pointer;
    border-radius: 25px;
    z-index: 1000;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

    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: var(--autocomplete-dropdown-bg);
        color: var(--autocomplete-dropdown-fg);
        padding: 15px;
        text-align: center;
    }

    ul.autocomplete-list li.autocomplete-listitem-highlighted {
        background-color: var(--autocomplete-dropdown-bg-hover);
        color: var(--autocomplete-dropdown-fg-hover);
        padding: 15px;
        text-align: center;
    }

    ul.autocomplete-list li.autocomplete-listitem-left {
        background-color: var(--autocomplete-dropdown-bg);
        color: var(--autocomplete-dropdown-fg);
        padding: 15px;
        text-align: left;
    }

    ul.autocomplete-list li.autocomplete-listitem-highlighted-left {
        left;
        background-color: var(--autocomplete-dropdown-bg-hover);
        color: var(--autocomplete-dropdown-fg-hover);
        padding: 15px;
        text-align: left;
    }

.form-control {
    font-size: var(--font-size-normal);
}

.input {
    font-size: var(--font-size-normal);
}

/*##
    =======================================
    [Branding]
    =======================================
##*/
/* O2 */
.o2 {
    color: var(--o2);
}

.bg-o2 {
    background-color: var(--o2-bg);
}

.btn-o2 {
    background-color: var(--o2-btn-bg);
    color: var(--o2-btn-fg);
    opacity: 1.0
}

    .btn-o2:hover {
        background-color: var(--o2-btn-bg);
        color: var(--o2-btn-fg);
        opacity: 0.8;
        transition: all ease-in .3s;
    }


/* Vodafone */
.vodafone {
    color: var(--vodafone);
}

.bg-vodafone {
    background-color: var(--vodafone-bg);
}

.btn-vodafone {
    background-color: var(--vodafone-bg);
    color: var(--vodafone-fg);
    opacity: 0.8;
}

    .btn-vodafone:hover {
        background-color: var(--vodafone-bg);
        color: var(--vodafone-fg);
        opacity: 1.0;
        transition: all ease-in .3s;
    }

/* Three */
.three {
    color: var(--three-fg);
}

.bg-three {
    background-color: var(--three-bg);
}

.btn-three {
    background-color: var(--three-btn-bg);
    color: var(--three-btn-fg);
    opacity: 0.8;
}

    .btn-three:hover {
        background-color: var(--three-btn-bg);
        color: var(--three-btn-fg-hover);
    }

/* General colours and backgrounds */
.bg-accent {
    background: var(--accent) !important;
}

.bg-gray-100 {
    background: var(--gray-100);
}

.bg-gray-250 {
    background: var(--gray-250);
}

/* Scrolled Navbars */
.o2-navbar-scrolled {
    background: var(--o2-navbar-scrolled);
}

.vodafone-navbar-scrolled {
    background: var(--vodafone-navbar-scrolled);
}

.navbar-scrolled {
    background: var(--navbar-scrolled);
}

/*##
    =======================================
    [Buttons]
    =======================================
##*/
.btn-clear-country-search {
    font-weight: var(--font-weight-heavy);
    color: var(--black) !important;
    font-size: var(--font-size-large);
    opacity: 1.0 !important;
}

.btn-close-modal-top {
    color: var(--white);
    font-size: var(--font-size-large);
}

    .btn-close-modal-top:hover {
        text-decoration: none;
    }

/* remove the xx if you want to re-instate the custom button attributes */
.btn-customxx {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    min-width: 120px;
    height: 50px;
    border-radius: 10px;
    line-height: 1.2;
    transition: all 0.4s;
}

    .btn-customxx:hover, a.btn-success-customxx:hover {
        text-decoration: none;
    }

/*##
    =======================================
    [Cards] - Cards
    =======================================
##*/
.card-body {
    color: var(--card-body-fg);
}

/*##
    ==============================================
    [Checkbox] - Custom Checkbox and Radio Buttons
    ==============================================
##*/
/* [CheckBox - Bootstrap] - Use span or div but doesnt support autopostback
<%-- Custom Check Box (RememberMe)--%>
    <div class="custom-control custom-checkbox mb-5">
        <input type="checkbox" ID="chkRememberMe" runat="server" Cssclass="custom-control-input" />
        <asp:Label  ID="lblRememberMe" runat="server"  CssClass="custom-control-label" AssociatedControlID="chkRememberMe"/>
    </div>
*/
.custom-control-label::before, .custom-control-label::after {
    width: 27px;
    height: 27px;
    position: absolute;
    top: 0;
}

.custom-control-label {
    padding-left: 15px;
}

    .custom-control-label:before {
        background-color: var(--checkbox-bg);
    }

    .custom-control-label:hover {
        cursor: pointer !important;
    }

        .custom-control-label:hover:before {
            background-color: var(--checkbox-bg-hover);
        }

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--checkbox-bg-checked);
}

/** focus shadow **/
.custom-checkbox .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem var(--checkbox-focus);
}

/* [CheckBox] - Supports Autopostback
<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;
    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;
    }

    .check-container .check-label {
        padding-left: 40px;
        font-size: var(--font-size-small);
        color: var(--blue-light);
        font-weight: var(--font-weight-medium);
    }

    /* Create a custom checkbox */
    .check-container .checkmark {
        height: 27px;
        width: 27px;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 4px;
    }

    /* add a background color to the checkbox */
    .check-container input ~ .checkmark {
        background-color: var(--checkbox-bg);
    }

    /* On mouse-over, add a grey background color */
    .check-container:hover input ~ .checkmark {
        background-color: var(--checkbox-bg-hover);
    }

    /* When the checkbox is checked, add a blue background */
    .check-container input:checked ~ .checkmark {
        background-color: var(--checkbox-bg-checked)
    }

    /* 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: 8px;
        height: 13px;
        border: solid white;
        border-width: 0 4px 4px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

/* [Radio] 
<label class="rb-container">
    <asp:Label ID="ltlRememberMeRb" runat="server" CssClass="txt1"/>
    <input type="radio" id="rbRememberMe" runat="server">
    <span class="checkmark"></span>
</label>
*/

/* Customize the label (the container) */
.rb-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;
}

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

    /* Create a custom radio button */
    .rb-container .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        height: 25px;
        width: 25px;
        background-color: var(--checkradio-bg);
        border-radius: 50%;
    }

    /* On mouse-over, add a grey background color */
    .rb-container:hover input ~ .checkmark {
        background-color: var(--checkradio-bg-hover);
    }

    /* When the radio button is checked, add a blue background */
    .rb-container input:checked ~ .checkmark {
        background-color: var(--checkradio-bg-checked);
    }

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

    /* Show the indicator (dot/circle) when checked */
    .rb-container input:checked ~ .checkmark:after {
        display: block;
    }

    /* Style the indicator (dot/circle) */
    .rb-container .checkmark:after {
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
    }

/*##
    =======================================
    [Container] - Constrain Widths
    =======================================
##*/
.container-fluid {
    max-width: 1400px;
}
/* constrain to max width */
.container-fluid {
    z-index: unset;
}
/* this is VITAL otherwise firefox will display the auto complete dropdown below the rest of the content (took me an age to find this!!) */

/*##
    =======================================
    [CookieBanner] - Cookie Banner
    =======================================
##*/
.cookie-banner {
    max-width: 600px;
    margin: 2rem auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    left: 30px;
    z-index: 999;
}

    .cookie-banner h5 {
        font-weight: var(--font-weight-heavy);
    }

    .cookie-banner p {
        margin-bottom: 1.5rem;
    }

    .cookie-banner .btn-outline-primary {
        color: #0d6efd;
        border-color: #0d6efd;
    }

        .cookie-banner .btn-outline-primary:hover {
            background-color: #0d6efd;
            color: #fff;
        }

    .cookie-banner .btn-primary,
    .cookie-banner .btn-danger {
        min-width: 120px;
    }

#btnAcceptCookies #acceptIcon {
    min-width: 1.25rem; /* Reserve space even when hidden */
    display: inline-block;
    text-align: center;
}
/*##
    =============================
    [Effect-Sadie] - Effect Sadie
    =============================
##*/
figure.effect-sadie figcaption:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 75%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 75%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 75%);
    content: '';
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}

figure.effect-sadie h4 {
    text-transform: uppercase;
    color: #fff;
    font-weight: 900;
    letter-spacing: 1px;
    font-size: 18px;
    left: 20%;
    letter-spacing: 1px;
    position: absolute;
    top: 50%;
    -webkit-transform: translate3d(0px, -50%, 0px);
    transform: translate3d(0px, -50%, 0px);
    -webkit-transition: -webkit-transform 0.35s ease 0s, color 0.35s ease 0s;
    transition: transform 0.35s ease 0s, color 0.35s ease 0s;
    width: 60%;
    filter: alpha(opacity=0);
}

@media only screen and (max-width:768px) {
    figure.effect-sadie h4 {
        font-size: 12px
    }
}

@media only screen and (max-width:480px) {
    figure.effect-sadie h4 {
        font-size: 18px
    }
}

@media only screen and (max-width:320px) {
    figure.effect-sadie h4 {
        font-size: 14px
    }
}

figure.effect-sadie figcaption:before,
figure.effect-sadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

figure.effect-sadie p {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

figure.effect-sadie:hover h4 {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}

figure.effect-sadie:hover figcaption:before,
figure.effect-sadie:hover p {
    opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/*##
    ==============================================
    [Flames] - Flame Icons
    ==============================================
##*/

/* mobile (adjusted for other devices) */
.flames-left {
    position: relative;
    left: -10px;
    top: 0;
}

.flames-right {
    position: relative;
    right: -10px;
    top: 0;
}

@media (min-width: 768px) {
    .flames-left {
        position: absolute;
        left: -25px;
        top: 15px;
    }

    .flames-right {
        position: absolute;
        right: -25px;
        top: 15px;
    }
}

@media (min-width: 1200px) {
    .flames-left {
        position: absolute;
        left: 0;
        top: 15px;
    }

    .flames-right {
        position: absolute;
        right: 0;
        top: 15px;
    }
}

@media (min-width: 1400px) {
    .flames-left {
        position: absolute;
        left: 20px;
        top: 15px;
    }

    .flames-right {
        position: absolute;
        right: 20px;
        top: 15px;
    }
}

/*##
    ==============================================
    [FloatingLabels] - Style floating labels
    ==============================================
##*/
/* remove the background when the floating label is in  focus */
.form-floating > label::after {
    background-color: transparent !important;
}

/*##
    ==============================================
    [Forms] - Forms
    ==============================================
##*/
.form-text-sm, a.form-text-sm {
    font-size: var(--font-size-small) !important;
    outline: none;
}

/*##
    ==============================================
    [Helptext] - Helptext
    ==============================================
##*/

/* help buttons, calendars and helptext slidedown */
.admin-body .btn-help {
    cursor: pointer;
    color: #5aa7ff;
}

.admin-body .fa.fa-calendar {
    cursor: pointer;
    color: #5aa7ff;
}

.admin-body .alert.alert-help {
    background: #fff;
}
/* this is our own alert */
.admin-body h3 {
    color: #506690
}

/*##
    ==============================================
    [Icons] - Icons
    ==============================================
##*/
/* Position dropdown caret */
span.caret {
    position: relative;
    top: 2px;
    right: -5px;
}

/*##
    ==============================================
    [Links] - Links
    ==============================================
##*/

/* remove underline on some links (may be considered against accessibility rules )*/
a.no-hover {
    text-decoration: none !important;
    cursor: pointer;
}

a.no-wrap {
    white-space: nowrap;
}

/*##
    =================================================================
    [Match-Height] - Css for making Bootstrap columns the same height
    =================================================================
##*/
/* note I had to change the flex-grow feature from 1 to 0 to prevent columns expanding to fill the row 100% wide */
.row.match-height {
    display: flex;
    flex-wrap: wrap;
}

    .row.match-height > [class*='col-'] {
        flex-grow: 0;
    }

    .row.match-height .box {
        height: 100%;
    }

/*##
    ====================================================================================
    [Min-Height] - Use with Match height to apply min height to background image columns
    ====================================================================================
##*/

.mh-80 {
    min-height: 80px;
}

.mh-100 {
    min-height: 100px;
}

.mh-160 {
    min-height: 160px;
}

.mh-240 {
    min-height: 240px;
}

.mh-320 {
    min-height: 320px;
}

.mh-500 {
    min-height: 500px;
}

.mh-600 {
    min-height: 600px;
}

/*##
    ====================================================================================
    [NavBar] - NavBar
    ====================================================================================
##*/
/* prevent option wrapping */
.navbar-nav a.nav-link {
    white-space: nowrap;
}

/*##
    =======================================
    [PageFooter]
    =======================================
##*/
.pagefooter a {
    font-size: var(--font-size-small);
    color: var(--white);
}

/*##
    =======================================
    [PreLoader]
    =======================================
##*/

/* preloader background */
.preloader {
    background: var(--preloader-bg);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
}

/* spinner icon */
.status-mes, loader {
    width: 45px;
    height: 45px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -40px 0 0 -40px;
    text-indent: -12345px;
    border-top: var(--preloader-border);
    border-right: var(--preloader-border);
    border-bottom: var(--preloader-border);
    border-left: var(--preloader-border-white);
    border-radius: 50%;
    -webkit-animation: spinner 700ms infinite linear;
    animation: spinner 700ms infinite linear;
    z-index: 10000;
}

/* preloader animation */
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/*##
    =======================================
    [Prices]
    =======================================
##*/
.card .price-was {
    position: absolute;
    right: 45px;
    top: 70px;
    color: var(--red-dark);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    letter-spacing: 1px;
}

@media (min-width: 920px) {
    .card .price-was {
        position: absolute;
        right: 25px;
        top: 65px;
    }
}

@media (min-width: 1140px) {
    .card .price-was {
        position: absolute;
        right: 25px;
        top: 70px;
    }
}
/*##
    =======================================
    [Rainbow] - For Testing Purposes
    =======================================
##*/
.bg-red {
    background: red;
}

/*##
    ==================================
    [spyglass] - SpyGlass
    ==================================
##*/
.spyglass-left {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 9999;
}

/*##
    ===============================================
    [Switches] - Switch Control
    ===============================================
##*/

/* set min width for label */
.form-check-label.switch {
    min-width: 60px;
    font-size: var(--font-size-small);
}

/* Non-Colored Switch (Default) */
.form-check-label.on {
    position: relative;
    top: 2px;
}

.form-check-label.off {
    position: relative;
    top: 2px;
}

/* Colored Switch On State Green State */
.green .form-check-input:checked {
    border-color: green !important;
    background-color: green !important;
}

/*##
    ===============================================
    [Tabs] - Tabs
    ===============================================
##*/
/* normal tabs */
.nav-tabs .nav-link {
    background: var(--white-opacity-2);
}

.nav-tabs a {
    color: var(--white);
}

    .nav-tabs a:hover {
        color: var(--white);
    }

    .nav-tabs a.nav-link.active {
        background: var(--gray-100) !important;
    }

/* tabs-grid */
.tabs-grid a.nav-link {
    background: var(--white-opacity-2);
}

    .tabs-grid a.nav-link.active {
        background: var(--gray-100);
    }

.tabs-grid a.nav-link {
    color: var(--white);
}

.tabs-grid .tab-content {
    background: var(--gray-100);
}

/* animated tab underline */
.tabs-grid .nav-link .tab-underline {
    width: 0;
    height: 4px;
    background: transparent;
}

.tabs-grid .nav-link:hover .tab-underline {
    width: 100%;
    height: 4px;
    background: orange;
    transition: width 0.3s ease-in-out
}

.tabs-grid .nav-link:not(:hover) .tab-underline {
    width: 0%;
    height: 4px;
    background: white;
    transition: width 0.6s ease-in-out
}

.tabs-grid .nav-link.active .tab-underline {
    width: 100%;
    height: 4px;
    background: green;
    transition: width 0.3s ease-in-out
}

/* pills-grid */
.pills-grid a:hover {
    background: var(--white-opacity-2);
}

.pills-grid a.active {
    background: var(--white-opacity-2);
}

.pills-grid a {
    color: var(--white);
}

    .pills-grid a:hover {
        color: var(--white);
    }

/* subtabs */
.tabs-subtabs a.nav-link {
    border-bottom-color: var(--gray-200) !important;
}

    .tabs-subtabs a.nav-link.active {
        background: var(--gray-200);
    }

.tabs-subtabs a.nav-link {
    color: var(--black);
}

    .tabs-subtabs a.nav-link:hover {
        background: var(--gray-200);
        transition: all 0.3s ease-in;
    }

.tabs-subtabs .tab-content {
    background: var(--gray-200);
}

/* animated tab underline */
.tabs-subtabs .nav-link .tab-underline {
    width: 0;
    height: 2px;
    background: transparent;
}

.tabs-subtabs .nav-link.active .tab-underline {
    width: 100%;
    height: 2px;
    background: green;
    transition: width 0.3s ease-in
}

/*##
    ====================================================
    [TogglePassword] - Position the Toggle Passowrd icon
    ====================================================
##*/
a.togglePassword {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: var(--font-size-small);
    color: var(--input-icon);
    padding: 10px;
}

    a.togglePassword:hover {
        text-decoration: none;
        color: var(--input-icon);
    }

    a.togglePassword:focus {
        outline: none;
    }

/*##
    ===============================================
    [Typography]
    ===============================================
##*/
.permonth {
    font-size: 12px;
    position: relative;
    top: 3px;
    left: 3px;
}

.smallprint {
    font-size: var(--font-size-small);
}

/* Style long textual pages */
.content-text h3 {
    font-weight: var(--font-weight-medium);
}

/*##
    ==================================================
    [Validation] - Error Messages and Validation Icons
    ==================================================
##*/

/* validator .error-message (standard error message) */
.error-message {
    color: var(--red);
    font-size: var(--font-size-small);
}

.error-message-wrapper {
    height: 20px;
    margin-bottom: 10px;
}

/* position and color the "feather" feedback icons */
.form-control-feedback {
    position: absolute;
    right: 15px;
    bottom: 15px;
}

.fe.fe-x.form-control-feedback {
    color: var(--red-dark);
    font-weight: var(--font-weight-heavy);
}

.fe.fe-check.form-control-feedback {
    color: var(--green);
    font-weight: var(--font-weight-heavy);
}

/* valid/invalid classes */
.is-invalid {
    background: var(--bg-danger-subtle);
}


.error-message {
    font-size: var(--font-size-small);
    color: var(--red-dark);
    font-weight: bold;
    padding-left: 20px;
}

.error-message-center {
    font-size: var(--font-size-small);
    color: var(--red-dark);
    font-weight: bold;
}

.success-message-center {
    font-size: var(--font-size-small);
    color: var(--green);
    font-weight: bold;
}



/* error wrappers */
/*.error-message-wrapper-txt { height: 30px;  position: absolute; top: 50px;}
.error-message-wrapper-ddl { height: 30px; position: absolute; top: 60px;}
.error-message-wrapper .fe-alert-triangle {position: relative; top: 1px;}

/* Validation icons (position wrapper relative so that icon can be positioned absolutely within it) */

/* our custom fields */
/*.form-group-xm { position: relative; margin-bottom: 0; }
.fa.form-control-feedback { float: right; position: absolute; right: 15px; bottom: 15px; }

/* standard bootstrap fields */
/*.input-group .fa.form-control-feedback { float: right; position: absolute; right: 30px; bottom: 30px; }






/* validator .error-message-line (Style and float the error message to the left top of the input box) */
/*.error-message-line { float: right; color: var(--red-dark); margin-right: 10px; font-size: var(--font-size-small); }

/* validator .error-message-line (Style and float the error message to the left top of the input box) */
/*.error-message-left { float: left; color: var(--red-dark); margin-right: 10px; font-size: var(--font-size-small); }

/* validator .error-message-adjusted (adjusted error message) */
/*.error-message-adjusted { color: var(--red-dark); position: relative; left: 20px;}

/* validator icons */

/*##
    ==================================================
    [Z-Index] - Positioning
    ==================================================
##*/
.z1 {
    z-index: 1;
}

.z0 {
    z-index: 0;
}