:root {
    /* COLOURS */

    --colour-wex-red: #C8102E; /* buttons/links */
    --colour-dark-red: #740E1D; /* button hovers */
    --colour-slate-blue: #253746; /* Text & background */
    --colour-white: #FFFFFF; /* Text & background */
    --colour-bright-teal: #00C7B1; /* Highlight Text & background */
    --colour-teal: #00A190; /* Highlight Text & background (ADA dependent) */
    --colour-yellow: #FFBF3F; /* Graphics */
    --colour-sky-blue: #A0DCF8; /* Graphics */
    --colour-blue: #278BCB; /* Graphics, specialty text */
    --colour-light-blue: #F1FAFE; /* Background */
    --colour-medium-gray: #656363; /* Specialty subheads */
    --colour-light-gray: #D1D6D8; /* Lines */
    --colour-wex-gray: #4F4B4C; /* Body text */

    --colour-light-red: #FBECEE; /* Wex red with 95% white */
    --colour-background: #F2F2F2; /* Background */
    /* vehicle colours*/
    --colour-vehicle-cream: #FFF8DC;
    --colour-vehicle-beige: #F5DEB3;
    --colour-vehicle-bronze: #B8860B;
    --colour-vehicle-brown: #8B4513;
    --colour-vehicle-yellow: #FFFF00;
    --colour-vehicle-gold: #DAA520;
    --colour-vehicle-orange: #FF4500;
    --colour-vehicle-red: #FF0000;
    --colour-vehicle-maroon: #800000;
    --colour-vehicle-pink: #FF69B4;
    --colour-vehicle-purple: #9400D3;
    --colour-vehicle-blue: #0000FF;
    --colour-vehicle-green: #006400;
    --colour-vehicle-aqua: #7FFFD4;
    --colour-vehicle-silver: #D3D3D3;
    --colour-vehicle-grey: #808080;
    --colour-vehicle-black: #000000;
    --colour-vehicle-white: #FFFFFF;
    /* FONT FAMILYS */

    --fontfamily-inter: Inter,sans-serif;
    /* FONT WEIGHTS */

    --fontweight-black: 900;
    --fontweight-bold: 700;
    --fontweight-regular: 400;
    --fontweight-light: 200;
    /* FONT SIZES */
    /* headings */
    --fontsize-h1: 40px;
    --fontsize-h2: 30px;
    --fontsize-h3: 24px;
    /* body */
    --fontsize-b1: 20px;
    --fontsize-b2: 18px;
    --fontsize-b3: 16px;
    --fontsize-b4: 14px;
    --fontsize-b5: 12px;
    /* footer */
    --fontsize-f1: 11px;
    /* icons */
    --fontsize-i1: 45px;
    --fontsize-i2: 30px;
    --fontsize-i3: 24px;
    --fontsize-i4: 15px;
    --fontsize-i5: 13px;
    --fontsize-i6: 9px;
    --fontsize-i7: 7px;
    /* emphasis */
    --fontsize-e1: 63px;
    --fontsize-e2: 36px;
    --fontsize-e3: 28px;
    /* RADIUS */

    --radius-button: 1.75rem;
    --radius-input-start: 1.25rem 0 0 1.25rem;
    --radius-input-end: 0 1.25rem 1.25rem 0;
    --radius-input-single: 1.25rem;
    --radius-input-small: 0.75rem;
    --radius-background: 1.25rem;
    /* DURATIONS */

    --duration-hover: 0.3s;
    --duration-expand: 0.5s;
    /* HEIGHTS */

    --height-header: 148px;
    --height-footer: 105px;
}

.panel {
    background-color: var(--colour-white);
    box-shadow: none;
    border-radius: var(--radius-background);
    margin-bottom: 0;
}

.chart-color1 {
    color: var(--colour-sky-blue);
}

.chart-color2 {
    color: var(--colour-slate-blue);
}

.chart-hovercolor {
    color: var(--colour-yellow);
}

footer {
    padding: 10px 0 10px 0;
}

    footer .container-wrapper {
        background-image: none;
    }

        footer .container-wrapper .footer-left {
            margin: 5px 0 0;
        }

            footer .container-wrapper .footer-left .logo-footer {
                width: 56px;
                /*height: 47px;*/
            }

            footer .container-wrapper .footer-left .copyright-text {
                margin-left: 7px;
            }

            footer .container-wrapper .footer-left a {
                margin-bottom: 0;
                font-size: var(--fontsize-f1);
            }

.login-body {
    min-height: 100vh;
    background: var(--colour-slate-blue);
}

.login-container-wrapper {
    background: url("../images/Ocean-Road.jpg") no-repeat scroll center top;
    background-size: cover;
    overflow: auto;
    width: 100%;
}

.login-footer {
    padding: 10px 0 10px 0;
    margin: 0;
    font-size: var(--fontsize-f1);
}

.login-content {
    padding: 68px 0 68px 0;
    overflow: auto;
}

.setupmypin-content {
    padding: 68px 0 68px 0;
    overflow: auto;
}

    .setupmypin-content h3 {
        margin-bottom: 30px !important;
        text-transform: lowercase;
    }

        .setupmypin-content h3::first-letter {
            text-transform: uppercase;
        }

.login-panel .panel .panel-body {
    padding: 0px 0px 7px 0px;
    overflow: auto;
}

    .login-panel .panel .panel-body > div {
        padding: 0px 20px;
    }

.login-input-container {
    padding-top: 30px;
    overflow: auto;
}

    .login-input-container .form-group {
        margin-bottom: 43px;
        overflow: auto;
    }

    .login-input-container .btn-primary {
        float: right;
        margin-top: 20px;
        margin-bottom: 13px;
        clear: right;
    }

    .login-input-container .info-icon {
        margin: 0px;
    }

.setupmypin-content {
    overflow: auto;
    min-height: 600px;
}


.setupmypin-panel .panel .panel-body {
    padding: 0px 20px 7px 20px;
    overflow: auto;
}

.setupmypin-input-container {
    padding-top: 30px;
    overflow: auto;
}

    .setupmypin-input-container .form-group {
        margin-bottom: 20px;
        overflow: auto;
    }

    .setupmypin-input-container .btn-primary {
        float: right;
        margin-top: 20px;
        margin-bottom: 13px;
        clear: right;
    }

.forgot-username-input-container {
    padding-top: 30px;
}

    .forgot-username-input-container .form-group {
        margin-bottom: 43px;
    }

    .forgot-username-input-container .btn-secondary {
        float: right;
        margin-top: 23px;
        margin-bottom: 13px;
        margin-right: 15px;
    }

    .forgot-username-input-container .no-right-margin {
        margin-right: 0% !important;
    }

    .forgot-username-input-container .btn-primary {
        float: right;
        margin-top: 23px;
        margin-bottom: 13px;
    }

a.link-forgot-username {
    font-weight: var(--fontweight-regular);
    text-transform: none;
    float: right;
    margin-top: 2px;
    text-decoration: underline;
}

.link-rememberme {
    font-weight: var(--fontweight-regular);
    text-transform: none;
    float: right;
    margin-top: -17px;
}

p.link-rememberme {
    font-size: var(--fontsize-b4);
    margin-top: 5px;
    margin-left: 5px;
    padding-left: 10px;
}

.link-confirm-consent {
    font-weight: var(--fontweight-regular);
    text-transform: none;
    float: right;
    margin-top: -17px;
}

p.link-confirm-consent {
    font-size: var(--fontsize-b3);
    margin-top: 0px;
    margin-left: 5px;
    padding-left: 10px;
}

input.input-validation-error,
textarea.input-validation-error,
select.input-validation-error,
strong.input-validation-error,
a.input-validation-error,
div.input-validation-error {
    background: var(--colour-light-red);
    border: 1px solid var(--colour-wex-red);
}

.box-content.highlight-box.notification-box.error-box.margin-bottom-20 div.validation-summary-errors ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}

.validation-summary-success ul {
    list-style: none;
    padding-left: 0px;
    margin-bottom: 0px;
}

.login-container-wrapper-height {
    min-height: 600px;
}

.bootstrap-tagsinput {
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
    border-radius: var(--radius-input-end) !important;
    width: 100%;
}

    .bootstrap-tagsinput input {
        height: 30px !important;
    }

    .bootstrap-tagsinput .wsstag {
        color: var(--colour-white) !important;
        background-color: var(--colour-blue) !important;
    }

.label-info {
    background-color: var(--colour-wex-red) !important;
    border-radius: var(--radius-input-small);
}

.panel-body-accordion {
    border-top-style: none;
    margin-top: 20px;
}

#accordion .panel {
    border-radius: var(--radius-background) !important;
}

.panel-group {
    background: white;
    border-radius: var(--radius-background);
}

    .panel-group .panel {
        box-shadow: none;
    }

        .panel-group .panel.panel-default {
            border: none;
            margin-top: 3px;
        }

            .panel-group .panel.panel-default:first-child {
                margin-top: 0;
            }

            .panel-group .panel.panel-default .panel-heading {
                padding: 0;
            }

    .panel-group .panel-title-default {
        display: block;
        padding: 6px 45px 6px 15px;
        background: var(--colour-white);
        font-family: var(--fontfamily-inter);
        font-weight: var(--fontweight-regular);
        color: white;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
    }

    .panel-group .panel-title-inner {
        display: block;
        padding: 6px 45px 6px 6px;
        background: var(--colour-slate-blue);
        font-family: var(--fontfamily-inter);
        font-weight: var(--fontweight-regular);
        color: white;
        font-size: var(--fontsize-b1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        position: relative;
    }

        .panel-group .panel-title-inner.collapsed {
            background: var(--colour-light-gray);
            color: black;
        }

        .panel-group .panel-title-inner:hover, .panel-group .panel-title-inner:focus {
            text-decoration: none;
        }

        .panel-group .panel-title-inner .name {
            padding-top: 15px;
        }

        .panel-group .panel-title-inner:before {
            content: "";
            width: 30px;
            height: 30px;
            display: block;
            position: absolute;
            top: 30%;
            right: 10px;
            background-image: url("../icons/WEX_Icons_Symbol_Minus_White.svg");
        }

    .panel-group .collapsed.panel-title-inner:before {
        background-image: url("../icons/WEX_Icons_Symbol_Plus_Red.svg");
    }

.remove-email:before,
.remove-action:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
    margin-right: 4px;
    background-image: url("../icons/WEX_Icons_Symbol_X_Red.svg");
}

.remove-email:before {
    top: 6px;
}

.remove-email:hover:before,
.remove-action:hover:before {
    background-image: url("../icons/WEX_Icons_Symbol_X_DarkRed.svg");
}

.remove-email img,
.remove-action img {
    display: none;
}

#BlockCard {
    border-radius: 0px var(--radius-button) var(--radius-button) 0px;
}

    #BlockCard .info-icon {
        background-image: url("../icons/WEX_Icons_Symbol_Info_White.svg");
        margin-left: 5px !important;
        margin-bottom: 0px;
    }

#UnblockCard {
    border-radius: var(--radius-button) 0px 0px var(--radius-button);
    padding-top: 13px;
}

#CancelCard,
#ReportLostOrStolenCard {
    padding-top: 12px;
}

@font-face {
    font-family: 'Inter';
    src: url("../fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
}

@font-face {
    font-family: 'svg-icon';
    src: url("../fonts/svg-icon.eot?6tg7se#iefix") format("embedded-opentype"), url("../fonts/svg-icon.ttf?6tg7se") format("truetype"), url("../fonts/svg-icon.woff?6tg7se") format("woff"), url("../fonts/svg-icon.svg?6tg7se#svg-icon") format("svg");
    font-weight: var(--fontweight-regular);
    font-style: normal;
}

.icon-car:before {
    content: "\e800";
    font-size: var(--fontsize-i1) !important;
    background-image: url("../icons/WEX_Icons_Mobility_Car_Front_White.svg");
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}

.table-accordion .icon-car:before {
    background-image: url("../icons/WEX_Icons_Mobility_Car_Front.svg");
}

.table-accordion .wss-icon-car-inactive:before {
    background-image: url("../icons/WEX_Icons_Mobility_Car_Front_Gray.svg");
}

.icon-driver:before {
    content: "\e804";
    font-size: var(--fontsize-i1) !important;
    background-image: url("../icons/WEX_Icons_Person_White.svg");
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}

.table-accordion .icon-driver:before {
    background-image: url("../icons/WEX_Icons_Person.svg");
}

.table-accordion .wss-icon-driver-inactive:before {
    background-image: url("../icons/WEX_Icons_Person_Gray.svg");
}

.icon-vehicleDriver:before {
    content: "\e805";
    font-size: var(--fontsize-i1) !important;
    background-image: url("../icons/WEX_Icons_Mobility_Car_Driver_White.svg");
    background-repeat: no-repeat;
    background-position: center;
    color: transparent !important;
}

.table-accordion .icon-vehicleDriver:before {
    background-image: url("../icons/WEX_Icons_Mobility_Car_Driver.svg");
}

.table-accordion .wss-icon-vehicledriver-inactive:before {
    background-image: url("../icons/WEX_Icons_Mobility_Car_Driver_Gray.svg");
}

.icon-gallery-gridview:before {
    background-image: url("../icons/WEX_Icons_Data_BarChart_2.svg");
    color: transparent;
}

.icon-burger-list:before {
    background-image: url("../icons/WEX_Icons_Symbol_CheckBoxes_4.svg");
    color: transparent;
}

.icon-font {
    font-family: 'svg-icon';
    speak: none;
    font-style: normal;
    font-weight: var(--fontweight-regular);
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.site-button-cards {
    font-family: var(--fontfamily-inter);
    font-weight: var(--fontweight-regular);
    font-weight: var(--fontweight-bold);
    background: white;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    transition: all .2s linear;
    width: 100%;
    border: 1px solid var(--colour-blue);
    color: var(--colour-wex-gray);
    text-align: center;
    padding: 2.9375rem 0.375rem 0.375rem;
}

.btn-site-cards {
    background: white;
    border-radius: var(--radius-background) 0px 0px var(--radius-background);
    transition: all .2s linear;
    width: 100%;
    border: 1px solid var(--colour-blue);
    text-align: center;
    padding: 2rem 0 10rem 0;
    background-color: var(--colour-blue);
}

.pending-card {
    background-color: var(--colour-sky-blue);
    border: 1px solid var(--colour-sky-blue);
}

.inactive-card {
    background-color: var(--colour-light-gray);
    border: 1px solid var(--colour-light-gray);
}

.col-xs-2.transaction-margin-right {
    width: unset !important;
}

#downloadcards {
    font-size: var(--fontsize-b4) !important;
    margin-top: 10px;
}

.icon-list:before {
    content: "\e909";
}

.wss-icon-car:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-blue) !important;
}

.wss-icon-car-pending:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-sky-blue) !important;
}

.wss-icon-car-inactive:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-light-gray) !important;
}

.wss-icon-driver:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-blue) !important;
}

.wss-icon-driver-pending:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-sky-blue) !important;
}

.wss-icon-driver-inactive:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-light-gray) !important;
}

.wss-icon-vehicledriver:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-blue) !important;
}

.wss-icon-vehicledriver-pending:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-sky-blue) !important;
}

.wss-icon-vehicledriver-inactive:before {
    top: 0px !important;
    bottom: 2px !important;
    color: var(--colour-light-gray) !important;
}

.listview div.list-cardtype {
    font-family: var(--fontfamily-inter);
    font-weight: var(--fontweight-regular);
    font-weight: var(--fontweight-bold);
    background: white;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    transition: all .2s linear;
    width: 100%;
    text-align: center;
    padding: 7.9375rem 3.375rem 0.375rem;
    background-color: var(--colour-white);
}

    .listview div.list-cardtype .icon-car:before {
        font-family: 'svg-icon';
        content: "\e800";
        font-size: var(--fontsize-i3);
        color: var(--colour-blue);
        position: absolute;
        top: 2.625rem;
        left: 50%;
        margin-left: -1.275rem;
    }



.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align: center;
    z-index: 1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
}

.paging {
    margin: 10px;
    text-align: right;
}

.transaction-margin-right {
    margin-right: 20px;
    float: none !important;
}

.transaction-td-padding {
    padding-top: 10px;
    padding-bottom: 10px;
    vertical-align: middle;
}

    .transaction-td-padding.glyphicon-save {
        margin-top: 22px;
    }

.wss-transaction-content {
    min-height: 400px;
}

.transactions-content .wss-heading-transaction {
    padding-top: 27px !important;
    padding-left: 10px !important;
}

.savedcard-content .wss-heading-savedcard {
    padding-top: 27px !important;
}

.savedcard-content .heading-savedcard {
    border-bottom: 2px solid var(--colour-wex-gray);
    position: relative;
}

.savedcard-content .panel {
    border-bottom: 1px solid var(--colour-light-gray);
}

.savedcard-content .panel-heading .panel-title > a {
    display: block;
    width: 100%;
    padding: 11px 0 5px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0;
}

.savedcardsearchinput {
    padding: 0;
}

.savedcard .filter-button {
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
}

savedcard .savedcard-filter {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    margin-bottom: 15px;
    padding: 0;
}

.savedcard .filter-section .radio-to-button {
    margin-right: 10px;
    border-radius: 5px !important;
}

.savedcard .row {
    margin-bottom: 15px;
    margin-left: 0;
    margin-right: 0;
}

.savedcard .panel-collapse {
    padding: 23px 10px 0 10px;
    background: var(--colour-background);
    background-color: rgb(250, 250, 250);
    color: var(--colour-wex-gray);
    margin-bottom: 15px;
    width: 100%;
}

.savedcard {
    border-top: 1px solid var(--colour-wex-gray);
    margin-top: 35px;
    padding-top: 50px;
    min-height: 600px;
}

.savedcard-content .panel-heading .panel-title > a:hover,
.savedcard-content .panel-heading .panel-title > a:active {
    color: var(--colour-wex-gray);
    text-decoration: none;
    background: var(--colour-light-gray);
}

.savedcard .appid {
    width: 12%;
}

.savedcard .date {
    width: 14%;
}

.savedcard .applicant-name {
    width: 40%;
}

.savedcard .abn {
    width: 14%;
}

.savedcard .status {
    width: 8%;
}

.pagination {
    margin: 20px 0;
}

    .pagination ul {
        display: inline-block;
        *display: inline;
        margin-bottom: 0;
        margin-left: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        *zoom: 1;
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

        .pagination ul > li {
            display: inline;
        }

            .pagination ul > li > a,
            .pagination ul > li > span {
                float: left;
                padding: 4px 12px;
                line-height: 20px;
                text-decoration: none;
                border-left-width: 0;
            }

        .pagination ul > .active > a,
        .pagination ul > .active > span {
            cursor: default;
            text-decoration: underline;
            font-weight: var(--fontweight-bold);
        }

        .pagination ul > .disabled > span,
        .pagination ul > .disabled > a,
        .pagination ul > .disabled > a:hover {
            color: var(--colour-wex-gray);
            cursor: default;
            background-color: transparent;
        }

        .pagination ul > li:first-child > a,
        .pagination ul > li:first-child > span {
            border-left-width: 1px;
            -webkit-border-bottom-left-radius: 4px;
            border-bottom-left-radius: 4px;
            -webkit-border-top-left-radius: 4px;
            border-top-left-radius: 4px;
            -moz-border-radius-bottomleft: 4px;
            -moz-border-radius-topleft: 4px;
        }

        .pagination ul > li:last-child > a,
        .pagination ul > li:last-child > span {
            -webkit-border-top-right-radius: 4px;
            border-top-right-radius: 4px;
            -webkit-border-bottom-right-radius: 4px;
            border-bottom-right-radius: 4px;
            -moz-border-radius-topright: 4px;
            -moz-border-radius-bottomright: 4px;
        }

.pagination-centered {
    text-align: center;
}

.pagination-right {
    text-align: right;
}

.pagination-large ul > li > a,
.pagination-large ul > li > span {
    padding: 11px 19px;
    font-size: var(--fontsize-b2);
}

.pagination-large ul > li:first-child > a,
.pagination-large ul > li:first-child > span {
    -webkit-border-bottom-left-radius: 6px;
    border-bottom-left-radius: 6px;
    -webkit-border-top-left-radius: 6px;
    border-top-left-radius: 6px;
    -moz-border-radius-bottomleft: 6px;
    -moz-border-radius-topleft: 6px;
}

.pagination-large ul > li:last-child > a,
.pagination-large ul > li:last-child > span {
    -webkit-border-top-right-radius: 6px;
    border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
}

.pagination-mini ul > li:first-child > a,
.pagination-small ul > li:first-child > a,
.pagination-mini ul > li:first-child > span,
.pagination-small ul > li:first-child > span {
    -webkit-border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -webkit-border-top-left-radius: 3px;
    border-top-left-radius: 3px;
    -moz-border-radius-bottomleft: 3px;
    -moz-border-radius-topleft: 3px;
}

.pagination-mini ul > li:last-child > a,
.pagination-small ul > li:last-child > a,
.pagination-mini ul > li:last-child > span,
.pagination-small ul > li:last-child > span {
    -webkit-border-top-right-radius: 3px;
    border-top-right-radius: 3px;
    -webkit-border-bottom-right-radius: 3px;
    border-bottom-right-radius: 3px;
    -moz-border-radius-topright: 3px;
    -moz-border-radius-bottomright: 3px;
}

.pagination-small ul > li > a,
.pagination-small ul > li > span {
    padding: 2px 10px;
    font-size: var(--fontsize-b5);
}

.pagination-mini ul > li > a,
.pagination-mini ul > li > span {
    padding: 1px 6px;
    font-size: var(--fontsize-i6);
}

a.download_link {
    font-size: var(--fontsize-b3);
    color: var(--colour-wex-gray);
    cursor: pointer;
    text-decoration: underline;
}


    a.download_link:before {
        font-size: var(--fontsize-b3);
        color: var(--colour-wex-gray);
        cursor: pointer;
        text-decoration: underline;
        padding-left: 23px;
        display: block;
        font-family: 'icomoon' !important;
        speak: none;
        font-style: normal;
        font-weight: var(--fontweight-regular);
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: "\e904";
        position: absolute;
        left: 0;
        top: 5px;
        color: var(--colour-wex-gray);
    }

a:hover.download_link {
    font-size: var(--fontsize-b3);
    color: blue;
}

.fade-window {
    display: none;
    position: fixed;
    top: 0%;
    left: 0%;
    bottom: 0%;
    width: 100%;
    height: 100%;
    background-color: var(--colour-light-gray);
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .70;
    filter: alpha(opacity=80);
}

.loading-div {
    display: none;
    position: fixed;
    top: 45%;
    left: 45%;
    z-index: 1002;
    text-align: center;
}

    .loading-div img {
        width: 200px;
    }

.unbilled-transaction {
    font-weight: var(--fontweight-bold);
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?b93ly3');
    src: url('../fonts/icomoon-wex.eot?b93ly3#iefix') format('embedded-opentype'), url('../fonts/icomoon-wex.ttf?b93ly3') format('truetype'), url('../fonts/icomoon-wex.woff?b93ly3') format('woff'), url('../fonts/icomoon-wex.svg?b93ly3#icomoon-wex') format('svg');
    font-weight: var(--fontweight-regular);
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: var(--fontweight-regular);
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

[class^="icon-colourless"], [class*=" icon-colourless"] {
    /* override default icon colour where it is not desired */
    color: unset !important;
}

.icon-calendar:before {
    content: "\e912";
}

.icon-double-arrow:before {
    content: "\e913";
}

.icon-flag:before {
    content: "\e914";
}

.icon-gallery:before {
    content: "\e915";
    height: 30px;
    display: block;
    width: 30px;
}

.icon-graph:before {
    content: "\e916";
    height: 30px;
    display: block;
    width: 30px;
}

.icon-listview:before {
    content: "\e917";
    height: 30px;
    display: block;
    width: 30px;
}

.icon-Logo .path1:before {
    content: "\e918";
    color: rgb(255, 196, 37);
}

.icon-Logo .path2:before {
    content: "\e919";
    margin-left: -5.404296875em;
    color: rgb(255, 196, 37);
}

.icon-Logo .path3:before {
    content: "\e91a";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path4:before {
    content: "\e91b";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path5:before {
    content: "\e91c";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path6:before {
    content: "\e91d";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path7:before {
    content: "\e91e";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path8:before {
    content: "\e91f";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path9:before {
    content: "\e920";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path10:before {
    content: "\e921";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path11:before {
    content: "\e922";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path12:before {
    content: "\e923";
    margin-left: -5.404296875em;
    color: rgb(207, 10, 44);
}

.icon-Logo .path13:before {
    content: "\e924";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path14:before {
    content: "\e925";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path15:before {
    content: "\e926";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo .path16:before {
    content: "\e927";
    margin-left: -5.404296875em;
    color: rgb(207, 10, 44);
}

.icon-Logo .path17:before {
    content: "\e928";
    margin-left: -5.404296875em;
    color: rgb(207, 10, 44);
}

.icon-Logo2 .path1:before {
    content: "\e929";
    color: rgb(255, 196, 37);
}

.icon-Logo2 .path2:before {
    content: "\e92a";
    margin-left: -5.404296875em;
    color: rgb(255, 196, 37);
}

.icon-Logo2 .path3:before {
    content: "\e92b";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path4:before {
    content: "\e92c";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path5:before {
    content: "\e92d";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path6:before {
    content: "\e92e";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path7:before {
    content: "\e92f";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path8:before {
    content: "\e930";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path9:before {
    content: "\e931";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path10:before {
    content: "\e932";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path11:before {
    content: "\e933";
    margin-left: -5.404296875em;
    color: rgb(12, 126, 193);
}

.icon-Logo2 .path12:before {
    content: "\e934";
    margin-left: -5.404296875em;
    color: rgb(207, 10, 44);
}

.icon-Logo2 .path13:before {
    content: "\e935";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo2 .path14:before {
    content: "\e936";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo2 .path15:before {
    content: "\e937";
    margin-left: -5.404296875em;
    color: rgb(255, 255, 255);
}

.icon-Logo2 .path16:before {
    content: "\e938";
    margin-left: -5.404296875em;
    color: rgb(207, 10, 44);
}

.icon-Logo2 .path17:before {
    content: "\e939";
    margin-left: -5.404296875em;
    color: rgb(207, 10, 44);
}

.date-search .icon-long-arrow:before {
    content: "\e93a";
    position: absolute;
    font-size: var(--fontsize-i2);
    color: transparent;
    background-image: url("../icons/WEX_Icons_Arrow_Right.svg");
    width: 24px;
}

.datepicker .glyphicon:before {
    color: transparent;
    font-size: var(--fontsize-b2);
    background-repeat: no-repeat;
    background-position: center;
}

.datepicker .glyphicon-chevron-right:before {
    background-image: url("../icons/WEX_Icons_Arrow_ExpandRight_Red.svg");
}

.datepicker .glyphicon-chevron-right:hover:before {
    background-image: url("../icons/WEX_Icons_Arrow_ExpandRight_DarkRed.svg");
}

.datepicker .disabled .glyphicon-chevron-right:before {
    background-image: url("../icons/WEX_Icons_Arrow_ExpandRight.svg");
}

.datepicker .glyphicon-chevron-left {
    transform: rotate(180deg);
}

    .datepicker .glyphicon-chevron-left:before {
        background-image: url("../icons/WEX_Icons_Arrow_ExpandRight_Red.svg");
    }

    .datepicker .glyphicon-chevron-left:hover:before {
        background-image: url("../icons/WEX_Icons_Arrow_ExpandRight_DarkRed.svg");
    }

.datepicker .disabled .glyphicon-chevron-left:before {
    background-image: url("../icons/WEX_Icons_Arrow_ExpandRight.svg");
}

.icon-expand:before {
    content: "\e913";
}

.btn-icon-search {
    background-color: var(--colour-wex-gray);
    color: white;
}

    .btn-icon-search:before {
        padding: 8px 14px 9px 14px !important;
    }

.common-element ul {
    padding-left: 0px;
    margin-bottom: 15px;
}

.border-bottom {
    border-bottom: 1px solid var(--colour-wex-gray);
}

.nav-tabs-wss {
    right: 15px;
    position: relative;
    height: 0px;
}

    .nav-tabs-wss > li {
        float: left;
        margin-bottom: -1px;
    }

        .nav-tabs-wss > li > a {
            margin-right: 2px;
            line-height: 1.42857143;
            border-radius: 4px 4px 0 0;
            opacity: .50;
            color: transparent;
            padding-top: 5px;
        }

        .nav-tabs-wss > li.active > a,
        .nav-tabs-wss > li.active > a:focus,
        .nav-tabs-wss > li.active > a:hover {
            cursor: default;
            border-bottom-color: transparent;
            opacity: 1;
            height: 20px;
        }

.icon-listview.icon-burger-list {
    display: block;
    width: 30px;
    height: 30px;
    color: transparent;
}

.icon-graph.icon-gallery-gridview {
    color: transparent;
}

.panel-group .accordion-toggle:after {
    /* symbol for "opening" panels */
    content: "\e901";
    background-image: url("../icons/WEX_Icons_Arrow_ExpandUp_Red.svg");
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    color: transparent;
    float: right;
    padding-top: 5px;
}

.panel-group .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e900";
    background-image: url("../icons/WEX_Icons_Arrow_ExpandDown_Red.svg");
}

.title-bold {
    font-weight: var(--fontweight-bold);
    margin-bottom: 20px;
}

.radio-to-button {
    color: var(--colour-wex-red);
    background-color: var(--colour-white);
    border: 1px solid;
    border-color: var(--colour-wex-red);
    text-decoration: none !important;
    border-radius: var(--radius-button) !important;
    min-width: 84px;
}

    .radio-to-button.focus,
    .radio-to-button:focus {
        color: var(--colour-wex-red);
        background-color: var(--colour-light-red);
    }

    .radio-to-button:hover {
        color: var(--colour-wex-red);
        background-color: var(--colour-light-red);
        transition-duration: var(--duration-hover);
    }

    .radio-to-button.active,
    .open > .dropdown-toggle.btn-primary {
        color: var(--colour-white);
        background-color: var(--colour-wex-red);
        border: 1px solid var(--colour-wex-red);
    }

        .radio-to-button.active:hover,
        .open > .dropdown-toggle.btn-primary:hover {
            background-color: var(--colour-dark-red);
            border-color: var(--colour-dark-red);
            transition-duration: var(--duration-hover);
        }

.radio-to-button-disabled {
    pointer-events: none;
}


.radio-to-button-cardTypes {
    font-family: var(--fontfamily-inter);
    font-weight: var(--fontweight-regular);
    font-weight: var(--fontweight-bold);
    background: white;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    transition: all .2s linear;
    border: 1px solid var(--colour-blue);
    text-align: center;
    text-transform: none !important;
    border-radius: 5px !important;
    margin-right: 15px;
    width: 23.5%;
    height: 77.13px;
    white-space: normal;
}

.cardtypesheader {
    margin-top: 30px;
}

.radio-to-button-yesno {
    width: 40%;
    border-radius: var(--radius-button);
    margin-right: 10px;
}

.radio-to-button-setPin {
    width: 28%;
    border-radius: var(--radius-button) !important;
    margin-right: 10px;
}

#divReqPINAuth {
    padding: 0px;
}

.radio-to-button span:before {
    position: absolute;
    top: 11px;
    left: 14px;
    margin: -5px;
}

#divCardDetails .radio-to-button span:before {
    margin: -5px auto;
    margin-left: calc(50% - 24px);
    left: 0px;
}

.radio-to-button .icon-car:before {
    background-image: url('../icons/WEX_Icons_Mobility_Car_Front.svg');
}

.radio-to-button.active .icon-car:before {
    background-image: url('../icons/WEX_Icons_Mobility_Car_Front_White.svg');
}

.radio-to-button .icon-driver:before {
    background-image: url('../icons/WEX_Icons_Person.svg');
}

.radio-to-button.active .icon-driver:before {
    background-image: url('../icons/WEX_Icons_Person_White.svg');
}

.radio-to-button .icon-vehicleDriver:before {
    background-image: url('../icons/WEX_Icons_Mobility_Car_Driver.svg');
}

.radio-to-button.active .icon-vehicleDriver:before {
    background-image: url('../icons/WEX_Icons_Mobility_Car_Driver_White.svg');
}

.radio-to-button:hover .icon-car:before,
.radio-to-button:hover .icon-driver:before,
.radio-to-button:hover .icon-vehicleDriver:before,
.radio-to-button.active .icon-car:before,
.radio-to-button.active .icon-driver:before,
.radio-to-button.active .icon-vehicleDriver:before {
    color: var(--colour-background);
}

.radio-to-button:checked {
    color: var(--colour-background);
    background-color: var(--colour-blue);
}

.main-container h2 {
    margin-top: 0 !important;
}

.input-search {
    padding-right: 0;
    float: left;
}

.horizontal-line {
    border-bottom: 1px solid var(--colour-wex-gray);
    position: relative;
    padding-top: 10px;
    margin-left: 15px;
    width: 97%;
}

.or-label {
    display: none;
}

.filter-nav-accordion {
    text-decoration: none;
    text-transform: capitalize;
}

    .filter-nav-accordion:hover {
        color: var(--colour-wex-red);
    }

.checkbox {
    margin-bottom: 1.5rem;
}

    .checkbox input[type="checkbox"] ~ .text {
        position: relative;
        display: inline-block;
        padding-left: 2.5rem;
        font-family: var(--fontfamily-inter);
        font-weight: var(--fontweight-regular);
        font-size: var(--fontsize-b5);
        font-weight: var(--fontweight-regular);
        color: var(--colour-wex-gray);
        cursor: pointer;
    }

        .checkbox input[type="checkbox"] ~ .text:before {
            content: '';
            width: 30px;
            height: 30px;
            border: 1px solid var(--colour-light-gray);
            border-radius: var(--radius-input-single);
            position: absolute;
            left: 0;
            top: 0.1875rem;
        }

        .checkbox input[type="checkbox"] ~ .text a {
            text-decoration: underline;
            color: var(--colour-wex-gray);
        }

            .checkbox input[type="checkbox"] ~ .text a:hover {
                text-decoration: none;
            }

    .checkbox input[type="checkbox"]:checked ~ .text:before {
        background: url("../icons/WEX_Icons_Symbol_Check_Red.svg") center center no-repeat;
    }

.checkboxCorrespondance {
    margin-top: 7px !important;
    margin-right: 7px !important;
}

.search-button {
    cursor: pointer;
}

.carddetail .common-element {
    margin-bottom: 10px;
}

    .carddetail .common-element .border-bottom {
        margin-bottom: 0;
    }

.filter-button {
    padding-top: 15px;
    margin-left: 15px;
    background-color: white;
}

.card-sort-by {
    padding-top: 0px !important;
}

    .card-sort-by p {
        padding-top: 3px;
    }

.cancelcard-content {
    margin-top: 23px;
    padding-bottom: 23px;
    border-bottom: none !important;
}

.reportlostorstolen-content {
    margin-top: 23px;
    padding-bottom: 23px;
}

.cancelcard-comment {
    height: 120px;
}

.requestvoucher-reason {
    height: 100px;
}

.checkbox .checkbox-label {
    padding-left: 0;
}

    .checkbox .checkbox-label .text {
        font-size: var(--fontsize-b3) !important;
    }

.heading-transaction .checkbox {
    margin-top: 0px;
    margin-bottom: 12px;
}

    .heading-transaction .checkbox span:before {
        top: -5px !important;
    }

#listPreviousStatements .btn.btn-secondary {
    margin-right: 20px;
    margin-bottom: 10px;
}

.radio input[type=radio]:checked ~ .text:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 8px;
    margin-top: -7px;
    display: inline-block;
    background-color: var(--colour-wex-red);
    border-color: var(--colour-light-gray);
    width: 14px;
    height: 14px;
    border-radius: 100%;
}

.radio input[type=radio] ~ .text:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    border: 1px solid var(--colour-light-gray);
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    line-height: 30px;
    background-color: white;
    border-radius: 100%;
}

.group-element .typeahead {
    text-overflow: ellipsis;
}

.bracketed {
    padding: 15px 20px;
}

.bordered {
    text-align: center;
    display: flex;
}

    .bordered::before, .bordered::after {
        content: "";
        flex: 1;
        align-self: center;
        border: 1px solid black;
        border-width: 1px 0px 0px;
        height: 0;
    }

    .bordered .panel-title-inner {
        -ms-transform: rotate(270deg); /* IE 9 */
        -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */
        transform: rotate(270deg);
    }


        .bordered .panel-title-inner.collapsed {
            /* symbol for "collapsed" panels */
            -ms-transform: rotate(90deg); /* IE 9 */
            -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
            transform: rotate(90deg);
        }

.reportlostorstolen-content .title-bold {
    margin-top: 30px;
}

.reportlostorstolen-Address-content .group-element {
    margin-top: 30px;
}

.card-information > .row {
    margin-bottom: 20px;
}

.table-calculator .description {
    width: 30%;
    padding-right: 10px;
}

.p-osc {
    margin-bottom: 0;
}

.panel-body .row {
    padding-bottom: 30px;
}

.panel-body .group-inner {
    padding-left: 15px;
}

.label-card-left-column {
    /*margin-right: 90px;*/
    min-width: 100%;
}

.label-card-right-column {
    min-width: 100%;
}

.margin-right-40 {
    margin-right: 40px;
}

.label-title-ReadOnly-short {
    margin-right: 90px;
}

.label-title-ReadOnly-long {
    margin-right: 40px;
}

.dropdownselection {
    background-color: var(--colour-background);
    height: 41px !important;
    border-radius: var(--radius-input-single);
    width: calc(100% - 20px);
    font-size: 100%;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* remove the original arrow */
select.input-lg {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    /* no standardized syntax available, no ie-friendly solution available */
}


.text-group-element select + i.glyphicon {
    float: right;
    margin-top: -28px;
    margin-right: 25px;
    pointer-events: none;
    /* everything after this is just to cover up the original arrow */
    /* (for browsers that don't support the syntax used above) */
    background-color: var(--colour-background);
    padding-right: 5px;
}

    .text-group-element select + i.glyphicon:before {
        color: transparent;
        font-size: var(--fontsize-i4);
        position: relative;
        top: 7px;
        background-image: url("../icons/WEX_Icons_Arrow_ExpandDown_Red.svg");
    }

.dropdownarrow {
    background-color: var(--colour-background);
}

.dropdown-payment {
    height: 41px;
    background: #f7f7f7;
    border-radius: 12px;
    font-size: 100%;
}

.text-card {
    font-style: italic;
    font-size: var(--fontsize-b5);
}

.text-hint {
    font-style: italic;
    font-size: var(--fontsize-b5);
    margin-top: 10px;
}

.btn-color-style {
    margin-right: 10px !important;
    margin-bottom: 5px;
    padding: 18px !important;
    border: 1px solid var(--colour-wex-gray);
    border-radius: var(--radius-input-single) !important;
}

    .btn-color-style.active,
    .btn-color-style:active,
    .open > .dropdown-toggle.btn-primary {
        border: 1px solid black;
    }

.btn-color-cream {
    background-color: var(--colour-vehicle-cream);
}

.btn-color-beige {
    background-color: var(--colour-vehicle-beige);
}

.btn-color-bronze {
    background-color: var(--colour-vehicle-bronze);
}

.btn-color-brown {
    background-color: var(--colour-vehicle-brown);
}

.btn-color-yellow {
    background-color: var(--colour-vehicle-yellow);
}

.btn-color-gold {
    background-color: var(--colour-vehicle-gold);
}

.btn-color-orange {
    background-color: var(--colour-vehicle-orange);
}

.btn-color-red {
    background-color: var(--colour-vehicle-red);
}

.btn-color-maroon {
    background-color: var(--colour-vehicle-maroon);
}

.btn-color-pink {
    background-color: var(--colour-vehicle-pink);
}

.btn-color-purple {
    background-color: var(--colour-vehicle-purple);
}

.btn-color-blue {
    background-color: var(--colour-vehicle-blue);
}

.btn-color-green {
    background-color: var(--colour-vehicle-green);
}

.btn-color-aqua {
    background-color: var(--colour-vehicle-aqua);
}

.btn-color-silver {
    background-color: var(--colour-vehicle-silver);
}

.btn-color-grey {
    background-color: var(--colour-vehicle-grey);
}

.btn-color-black {
    background-color: var(--colour-vehicle-black);
}

.btn-color-white {
    background-color: var(--colour-vehicle-white);
}

.docket-number {
    font-size: var(--fontsize-b4);
    padding-right: 10px;
    width: 120px;
}

.input-date-search {
    padding-right: 0;
}

.input-search .bootstrap-tagsinput {
    border-radius: var(--radius-input-single) !important;
    padding-right: 35px;
}

.filter-button {
    border-radius: var(--radius-background) var(--radius-background) 0px 0px;
}

.acronym {
    text-transform: uppercase !important;
}

.date-search {
    background-color: var(--colour-white);
    border: solid var(--colour-wex-gray);
    border-width: 1px 0px 1px 1px;
    border-radius: var(--radius-input-start);
    position: relative;
}

#statementspartial .date-search {
    width: 265px;
    border-width: 1px 1px 1px 1px;
    border-radius: var(--radius-input-single);
}

    #statementspartial .date-search .end-date {
        margin-right: 30px;
    }

.hidden-md.hidden-lg .date-search {
    border-radius: var(--radius-input-single) var(--radius-input-single) 0px 0px;
    border-width: 1px;
}

    .hidden-md.hidden-lg .date-search input {
        text-align: center;
        border-width: 0px 0px 0px 1px;
    }

.hidden-md.hidden-lg .input-date-search .bootstrap-tagsinput {
    border-radius: 0px 0px 0px var(--radius-input-single) !important;
}

.transaction-search .searchButton {
    border-radius: var(--radius-input-end);
}


.date-search .icon-long-arrow {
    font-size: var(--fontsize-i6);
    position: relative;
    top: 7px;
}

.date-search-statement {
    background-color: var(--colour-white);
    border-color: var(--colour-light-gray);
    border-style: solid;
    position: relative;
}

    .date-search-statement .icon-long-arrow {
        font-size: var(--fontsize-i6);
        position: relative;
        top: 7px;
    }

.start-date {
    float: left;
    border: 0 !important;
    border-radius: var(--radius-input-start);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 38px !important;
    background: var(--colour-white) !important;
}

.start-date-statement {
    float: left;
    border: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: var(--colour-white) !important;
}

.end-date {
    float: right;
    border: 0 !important;
    border-radius: var(--radius-input-end);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 38px !important;
    background: var(--colour-white) !important;
}

.transaction-search {
    padding-top: 15px;
}

.row-no-margin-no-padding {
    margin: 0;
    padding: 0 !important;
}

.row-no-margin {
    margin-left: 0px;
    margin-right: 0px;
}

.row-no-padding {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.row-last {
    padding-bottom: 0px !important;
}

.transactions-content {
    min-height: 420px !important;
    padding: 20px;
    border-radius: var(--radius-background);
}

    .transactions-content .panel-heading a:hover {
        color: var(--colour-wex-gray);
    }

    .transactions-content .panel:first-child {
        border-radius: var(--radius-background);
    }

    .transactions-content .panel:last-child {
        border-radius: var(--radius-background);
    }

    .transactions-content .panel-heading:hover,
    .transactions-content .panel-heading:active {
        color: var(--colour-wex-gray);
        text-decoration: none;
        background: var(--colour-light-blue);
    }

.transaction-margin-right .row {
    border-radius: var(--radius-background);
}

#accountSettingSection .bg-white {
    padding: 15px;
}

#settings .panel,
#accountSettingSection .panel {
    border-radius: var(--radius-background) var(--radius-background) 0px 0px;
}

#accountSettingSection .panel-group h3 {
    display: none;
}

#AccPinUpdateButonSection p {
    margin-top: 10px;
}

#AccPinUpdateButonSection input[type="checkbox"]:before {
    top: 14px !important;
}

#divDebit .panel-body,
#divCredit .panel-body {
    padding: 0px;
    margin-top: 10px;
}

#directDebitEdit input[type="checkbox"],
#directCreditEdit input[type="checkbox"],
#AccPinUpdateButonSection input[type="checkbox"] {
    width: 36px;
    height: 36px;
    margin: 0px;
    appearance: none;
    cursor: pointer;
}

    #directDebitEdit input[type="checkbox"]:checked:before,
    #directCreditEdit input[type="checkbox"]:checked:before,
    #AccPinUpdateButonSection input[type="checkbox"]:checked:before {
        background: url(../icons/WEX_Icons_Symbol_Check_Red.svg) center center no-repeat;
    }

    #directDebitEdit input[type="checkbox"]:before,
    #directCreditEdit input[type="checkbox"]:before,
    #AccPinUpdateButonSection input[type="checkbox"]:before {
        content: '';
        width: 30px;
        height: 30px;
        border: 1px solid var(--colour-light-gray);
        border-radius: var(--radius-input-single);
        position: relative;
        left: 0;
        top: 9px;
        display: block
    }

    #directDebitEdit input[type="checkbox"]:focus,
    #directDebitEdit input[type="checkbox"]:focus-visible,
    #directCreditEdit input[type="checkbox"]:focus,
    #directCreditEdit input[type="checkbox"]:focus-visible,
    #AccPinUpdateButonSection input[type="checkbox"]:focus,
    #AccPinUpdateButonSection input[type="checkbox"]:focus-visible {
        outline: none;
    }

#direcDebitAgreementText {
    height: 250px;
}

#direcCreditAgreementText {
    height: 70px;
}

#schedualCardSection .bootstrap-tagsinput {
    border-radius: var(--radius-input-single) !important;
}

#divSelectCards {
    margin-top: 25px !important;
}

#desktop.panel-collapse.collapse.in {
    border-radius: 0px var(--radius-background) var(--radius-background) var(--radius-background);
}

.savedcard-content {
    min-height: 420px !important;
}

.docket-number {
    padding-bottom: 7px;
}

.table-calculator-final-total {
    border-top: 1px solid #a6a6a7 !important;
}

.table-accordion .price {
    text-align: right;
}

.accountsearch {
    margin-top: 30px;
    padding-bottom: 20px;
}

.accountsearchcategory {
    margin-bottom: 15px;
    float: left;
    position: relative;
    border-width: 0;
}

    .accountsearchcategory .dropdownselection {
        -moz-appearance: none;
        float: left;
        font-size: 100%;
        height: 40px !important;
        width: 200px;
    }

    .accountsearchcategory select + i.glyphicon {
        background-color: var(--colour-white);
        margin-right: 0;
        margin-left: -30px;
        margin-top: 13px;
        padding-right: 5px;
        pointer-events: none;
    }

.accountsearchinput {
    float: left;
    padding: 0;
}

    .accountsearchinput input {
        background-color: var(--colour-white);
    }

.account-content {
    margin-top: 30px;
}

    .account-content .account-number {
        width: 20%;
    }

    .account-content .account-name {
        width: 50%;
    }

    .account-content .status {
        width: 20%;
    }

    .account-content .row {
        margin-bottom: 15px;
        margin-left: 0;
        margin-right: 0;
    }

    .account-content .panel-collapse {
        margin-bottom: 15px;
        width: 100%;
    }

    .account-content .filter-button {
        margin-left: 0;
    }

    .account-content .filter-section {
        padding-top: 25px;
        padding-bottom: 30px;
        background-color: white;
        margin-left: 15px;
        margin-right: 15px;
    }

        .account-content .filter-section .radio-to-button {
            margin-right: 10px;
            border-radius: 5px !important;
        }


    .account-content .status-change-date {
        width: 20%;
        text-align: right;
    }

    .account-content .panel {
        border-bottom: 1px solid var(--colour-light-gray);
    }


        .account-content .panel:last-child {
            border-bottom: 1px solid var(--colour-wex-gray);
        }


        .account-content .panel.active {
            border-bottom: 1px solid var(--colour-wex-gray);
        }


            .account-content .panel.active .panel-heading .panel-title > a {
                background: var(--colour-blue);
                color: var(--colour-white);
            }

    .account-content .heading-account {
        border-bottom: 2px solid var(--colour-wex-gray);
        position: relative;
        padding-left: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
    }

        .account-content .heading-account h2 {
            margin-top: 0;
            float: left;
            margin-bottom: 15px;
        }

    .account-content .panel-heading .panel-title > a {
        display: block;
        width: 100%;
        padding: 11px 0 5px 10px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 0;
    }


        .account-content .panel-heading .panel-title > a:hover,
        .account-content .panel-heading .panel-title > a:active {
            color: var(--colour-wex-gray);
            text-decoration: none;
            background: var(--colour-light-gray);
        }


        .account-content .panel-heading .panel-title > a.active .arrow .icon:before {
            content: "\e901";
        }


        .account-content .panel-heading .panel-title > a.collapsed {
            color: var(--colour-wex-gray);
            background: none;
        }


            .account-content .panel-heading .panel-title > a.collapsed:hover,
            .account-content .panel-heading .panel-title > a.collapsed:active {
                color: var(--colour-wex-gray);
                text-decoration: none;
                background: var(--colour-light-gray);
            }


            .account-content .panel-heading .panel-title > a.collapsed .arrow .icon:before {
                content: "\e900";
            }


    .account-content .panel-collapse {
        padding: 23px 10px 0 10px;
        background: var(--colour-background);
        color: var(--colour-wex-gray);
    }


.request-previous-statement-select-date-section-header {
    margin-top: 30px;
}

.request-previous-statement-select-date-select-date .date-search {
    margin-top: 9px;
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--colour-light-gray);
    border-radius: var(--radius-input-single);
}

.download-and-sort {
    border-top: 1px solid var(--colour-wex-gray);
    padding-top: 50px;
    margin-top: 30px;
    margin-bottom: 55px;
}

#statement_sort {
    padding: 0px;
}

    #statement_sort span {
        font-size: var(--fontsize-b4);
    }

.reports .annualActivityReport .delivery {
    padding-top: 50px;
}

.reports .annualActivityReport .address {
    padding-top: 20px;
}

.reports .annualActivityReport .UpdateAddressCheck {
    padding-top: 10px;
}

.reports .annualActivityReport .row {
    margin-top: 40px;
}

.reports .quarterlyActivityReport .row {
    margin-top: 40px;
}

.reports .quarterlyActivityReport .address {
    padding-top: 20px;
}

.profile-setting {
    margin-top: 20px;
}

    .profile-setting > .panel:first-child {
        border-radius: var(--radius-background) var(--radius-background) 0px 0px;
    }

    .profile-setting > .panel:last-child {
        border-bottom: none;
        border-radius: 0px 0px var(--radius-background) var(--radius-background);
    }

    .profile-setting .panel {
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--colour-wex-gray);
        border-radius: 0px;
    }

    .profile-setting .vertical-align {
        height: 40px;
        display: flex;
        align-items: center;
    }

    .profile-setting .info-icon {
        margin-bottom: 0px;
        margin-left: 5px;
    }

.profile-setting-currentpassword {
    margin-bottom: 20px;
}

.profile-setting-newpassword {
    margin-bottom: 20px;
}

.profile-setting-confirmpassword {
    margin-bottom: 20px;
}

.profile-setting-secretquestion {
    margin-bottom: 20px;
}

.profile-setting-secretanswer {
    margin-bottom: 20px;
}

.no-float {
    float: none !important;
}

#AccountSummary_NewCreditLimit {
    border: none !important;
    width: 90%;
}

.formatted-textbox {
    background-color: var(--colour-background);
    border: 1px solid var(--colour-light-gray);
    border-radius: var(--radius-input-single);
    position: relative;
}

    .formatted-textbox .input-validation-error {
        background: var(--colour-light-red) none repeat scroll 0 0;
        border: 1px solid var(--colour-wex-red);
    }

.currency-sign {
    float: left;
    padding-top: 9px;
    padding-left: 12px;
}

.account-organization-detail .icon {
    float: left;
    font-size: var(--fontsize-i1);
    margin-right: 15px;
    color: transparent;
    background-image: url("../icons/WEX_Icons_Symbol_Info.svg");
    background-repeat: no-repeat;
}

.account-notifications .icon {
    float: left;
    font-size: var(--fontsize-i1);
    color: transparent;
    background-image: url("../icons/WEX_Icons_Symbol_Info.svg");
    background-repeat: no-repeat;
    height: 25px;
    width: 25px;
    margin: -2px 6px 0 0 !important;
}

.account-notifications .row-no-padding {
    width: unset;
}

.account-notifications .well.well-sm {
    background-color: var(--colour-white);
    border: 1px solid var(--colour-blue);
    padding: 20px;
}

.account-notifications h3 {
    font-weight: var(--fontweight-regular);
    font-size: var(--fontsize-b3);
    margin: 0;
}

.account-organization-detail-copy {
    margin-top: 30px;
}

.remove-invoice-email img, .remove-action img, .remove-email img, .remove-creditlimit-email img {
    padding-bottom: 0px;
    margin-left: 10px;
    width: 14px;
}

.remove-invoice-email img, .remove-email, .remove-creditlimit-email img {
    margin-top: 3px;
}

.add-invoice-email {
    margin-top: 22px;
}

    .add-invoice-email img {
        margin-right: 8px;
        padding-bottom: 2px;
        width: 18px;
    }


.add-creditlimit-email {
    margin-top: 22px;
}

    .add-creditlimit-email img {
        margin-right: 8px;
        padding-bottom: 2px;
        width: 18px;
    }

#newInvoiceEmailPanel {
    margin-top: 10px;
}

#newCreditLimitEmailPanel {
    margin-top: 10px;
}

.creditlimit-email strong {
    float: left;
    margin-top: 3px;
}

.remove-creditlimit-email {
    float: right;
}

.invoice-email strong {
    float: left;
    margin-top: 3px;
}

.remove-invoice-email, .remove-action {
    float: right;
}

.requestvoucher-content p {
    margin-top: 20px;
}

#divAccountBusinessAddress h3 {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

#divAccountBusinessAddressEdit h3 {
    margin-top: 10px !important;
}

#addInvoiceEmail img,
#addCreditLimitEmail img {
    background-image: url("../icons/WEX_Icons_Symbol_Plus_Red.svg");
    padding: 12px;
    margin-bottom: 2px;
    width: 0px;
    height: 0px;
}

#addInvoiceEmail:hover img,
#addCreditLimitEmail:hover img {
    background-image: url("../icons/WEX_Icons_Symbol_Plus_DarkRed.svg");
}

#addInvoiceEmail label,
#addCreditLimitEmail label {
    cursor: pointer;
}

#addInvoiceEmail:hover,
#addCreditLimitEmail:hover {
    text-decoration: none;
}

    #addInvoiceEmail:hover label,
    #addCreditLimitEmail:hover label {
        text-decoration: underline;
    }

#invoiceEmailPanel .remove-invoice-email img,
#CreditLimitEmailPanel .remove-creditlimit-email img {
    background-image: url("../icons/WEX_Icons_Symbol_X_Red.svg");
    padding: 12px;
    margin-bottom: 2px;
    width: 0px;
    height: 0px;
}

    #invoiceEmailPanel .remove-invoice-email img:hover,
    #CreditLimitEmailPanel .remove-creditlimit-email img:hover {
        background-image: url("../icons/WEX_Icons_Symbol_X_DarkRed.svg");
    }

#AccountPassword,
#AccountPasswordRenEnter {
    border-radius: var(--radius-input-start);
}

#divAccountPasswordEdit .input-group-addon {
    background-color: var(--colour-wex-red);
    border-color: var(--colour-wex-red);
    border-radius: var(--radius-input-end);
}

    #divAccountPasswordEdit .input-group-addon a {
        color: var(--colour-white);
    }

#divAccountContactDetails h3 {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

#divAccountContactDetailsEdit h3 {
    margin-top: 10px !important;
}

#divAccountCreditLimit h3 {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

#divAccountCreditLimitEdit h3 {
    margin-top: 10px !important;
}

#divAccountCreditLimitEdit .col-lg-9 {
    width: 100%;
}

.account-organization-detail h3 {
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

.qar-search-box {
    margin-top: 40px;
    margin-left: 10px;
}

.quarterlyActivityReport .table-accordion .selectcard {
    padding-top: 10px;
    width: 150px;
    padding-bottom: 10px;
}

.quarterlyActivityReport .table-accordion .cardnumber {
    padding-top: 10px;
    width: 300px;
    padding-bottom: 10px;
}

.quarterlyActivityReport .table-accordion .carddescription {
    padding-top: 10px;
    width: 300px;
    padding-bottom: 10px;
}

.quarterlyActivityReport .table-accordion .cardstatus {
    padding-top: 10px;
    width: auto;
    padding-bottom: 10px;
}

.transaction-report-select-date .date-search {
    margin-left: 0;
    margin-right: 0;
    border: 1px solid var(--colour-light-gray);
}

.transactionreports-content p {
    margin-top: 20px;
}

#transaction-controls .panel-group .panel-body {
    padding-left: 0;
}

#transaction-controls .panel-body .group-inner {
    padding-left: 15px;
}

#transaction-controls .left-column {
    padding-left: 0;
    padding-right: 15px;
}

#transaction-controls .right-column {
    padding-left: 0;
    padding-right: 0;
}

#transaction-controls .radio-to-button {
    margin-right: 10px;
}

#transaction-controls .remove-action {
    padding-top: 8px;
    display: flex;
}

#transaction-controls .transaction-control-label {
    width: 220px;
    padding-top: 9px;
}

#transaction-controls table {
    table-layout: fixed;
}

#transaction-controls .transaction-control-input {
    width: 10px;
}

#transaction-controls .transaction-control-input-lable {
    float: left;
    padding-left: 5px;
    padding-top: 9px;
}

#transaction-controls .transaction-control-hint-icon h3 {
    float: left;
    margin-top: -2px !important;
}

#transaction-controls .transaction-control-input .transaction-control-hint-icon {
    margin-left: 8px;
    margin-top: 11px;
    color: var(--colour-wex-gray);
    opacity: 0.75;
}

#transaction-controls .transaction-control-hint {
    margin-left: 30px;
}

.transaction-control-notifications .panel-title {
    font-size: var(--fontsize-h3);
    font-family: var(--fontfamily-inter);
    font-weight: var(--fontweight-regular);
    color: black;
    font-size: var(--fontsize-b1);
}

.transaction-control-notifications .notifications-email-address {
    width: 80%;
}

#divCardDetailAdditionalServices .home-bottom-container {
    margin: 0 !important;
}

#divRoadsideAssistPanel .panel {
    border-radius: var(--radius-background);
}

#divRoadsideAssist .col-sm-12 {
    padding: 0;
}

#divAddCard h3 {
    margin-top: 0;
    font-size: var(--fontsize-b1);
}

#divAddCard #submitSection {
    border-radius: var(--radius-background) !important;
}

#divAddCard #addCardDetailsCopy {
    width: 100%;
    margin-bottom: 20px;
}

#divAddCard #cardHdr1,
#divAddCard .col-sm-12,
#divAddCard .col-sm-5,
#divAddCard #cardAddMode {
    padding: 0;
}

#divAddCard .cancelcard-content.border-bottom {
    display: none;
}

#divAddCard .FakeFileUpload {
    padding-bottom: 0;
}

#btnUploadBulkCards {
    margin-left: -7px !important;
    width: calc(55% + 5px) !important;
}

.reset-pin-div-header {
    padding-left: 0;
}

.reset-pin-div-row-container {
    padding-bottom: 0;
    padding-top: 20px;
}

.pin-settings-panel-body {
    border-top-style: none;
    padding-top: 27px;
}

.paymentdue-overdue {
    background-color: red !important;
    color: white !important;
}

.paymentdue-nextpayment {
    background-color: white;
}

#billing-payment .paymentdue-box {
    margin-top: 10px;
    margin-bottom: 20px;
}

.video-overlay-wex {
    visibility: hidden;
}

.EditModeCardDetails .row {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.twoFactor-radio {
    margin-bottom: 20px;
}

.twoFactor-radio,
.productControls-radio {
    color: var(--colour-wex-gray) !important;
    text-align: left;
}

    .twoFactor-radio input[type=radio], .radio-inline input[type=radio],
    .productControls-radio input[type=radio], .radio-inline input[type=radio] {
        visibility: hidden !important;
    }

.error-page h2 {
    color: var(--colour-wex-red);
}

.main-container {
    padding-top: 60px !important;
    min-height: calc(100vh - var(--height-header) - var(--height-footer));
}

.lastOverviewUpdate {
    margin-top: 15px;
}

.lastUpdate {
    margin-top: 6px;
}

.nav-pills > li {
    margin: 0 8px 10px 2px;
}

p > a {
    text-decoration: underline;
}

.divAccountPaymentButton {
    float: right;
}

.btn-primary-inactive {
    color: gray;
    background-color: lightgray;
}

    .btn-primary-inactive:hover {
        text-decoration: underline;
    }

.searchButton {
    color: transparent;
    background-color: transparent;
    border: none;
    height: 40px;
    width: 40px;
    background-image: url("../icons/WEX_Icons_Symbol_MagnifyingGlass.svg");
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    left: -40px;
}

.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
    color: var(--colour-light-gray) !important;
}


.bootstrap-datetimepicker-widget table td.disab led,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    color: var(--colour-light-gray) !important;
}

.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
    color: var(--colour-light-gray) !important;
}

.oa-menu-dropdown-content {
    display: none;
    position: absolute;
    width: 200px;
    margin-top: 20px;
    margin-left: -84px;
    z-index: 1;
    background-color: white;
}

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

.oa-menu-dropdown-item {
    padding: 8px;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-weight: var(--fontweight-regular);
}

    .oa-menu-dropdown-item:hover {
        background-color: var(--colour-sky-blue);
        text-decoration: none;
    }

header .container-wrapper .header-right .header-links li .oa-menu-dropdown-content a {
    color: var(--colour-wex-gray);
    font-size: var(--fontsize-b4);
}

.gly-spin {
    -webkit-animation: spin 2s 1s linear;
    -moz-animation: spin 2s 1s linear;
    -o-animation: spin 2s 1s linear;
    animation: spin 2s 1s linear;
}

.error-logo {
    max-height: 74px; /* 148/2 */
    margin: 20px 0 30px 0;
}

@-moz-keyframes spin {
    0% {
        -moz-transform: rotateY(0deg);
    }

    100% {
        -moz-transform: rotateY(359deg);
    }
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(359deg);
    }
}

@-o-keyframes spin {
    0% {
        -o-transform: rotateY(0deg);
    }

    100% {
        -o-transform: rotateY(359deg);
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
    }

    100% {
        -webkit-transform: rotateY(359deg);
        transform: rotateY(359deg);
    }
}

.box-content.highlight-box.success-box .highlight-content {
    padding-bottom: 4px;
}

.activation-code-text.box-content.highlight-box.success-box {
    padding: 1px 10px;
    border-width: 2px;
}

.wex-repair-assist .panel-body {
    padding-top: 3.125rem;
    padding-left: 25px;
    padding-right: 15px;
}

.wex-repair-assist-copy {
    margin-bottom: 22px;
}

.ViewWEXRepairAssist .panel-body {
    padding-bottom: 30px;
}

.additional-services a {
    text-decoration: underline;
    font-size: var(--fontsize-b3);
}

.EditWEXRepairAssist .radio-to-button {
    margin-top: 13px;
    border-radius: 0px !important;
    margin-right: 10px;
}

.accountdetail .ViewWEXRepairAssist .panel-body .row {
    padding-bottom: 40px;
}

.accountdetail .EditWEXRepairAssist .panel-body .row {
    padding-bottom: 30px;
}

    .accountdetail .EditWEXRepairAssist .panel-body .row:nth-child(2) {
        padding-bottom: 10px;
    }

    .accountdetail .EditWEXRepairAssist .panel-body .row:nth-child(4) {
        padding-bottom: 40px;
    }

/* Use this media query if you want your css to apply ONLY for medium and large screens */
@media (min-width: 767px) {

    .cardCategory {
        margin-top: 20px;
    }

    .horizontal-line-trn-xs {
        border-bottom: 1px solid var(--colour-light-gray);
        position: relative;
        padding-top: 10px;
        margin-left: 15px;
        width: 97%;
        margin-bottom: 20px;
        margin-top: 15px;
    }


    .panel-group .panel-title-inner {
        padding: 20px 50px 20px 15px;
        font-size: var(--fontsize-h3);
    }

    .transaction-control-notifications .panel-title {
        font-size: var(--fontsize-h3);
    }

    .overlay-menu {
        display: none;
    }

    .common-element ul {
        display: flex;
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: 15px;
        align-items: baseline;
        flex-wrap: nowrap;
        min-width: 0;
        overflow: hidden;
    }

        .common-element ul li:before {
            position: relative;
            height: 12px;
            width: 2px;
            background: var(--colour-slate-blue);
            content: "";
            margin-right: 8px;
        }

        .common-element ul li:first-child:before {
            background: none;
            margin-right: 0px;
        }

        .common-element ul li {
            display: flex;
            align-items: baseline;
            min-width: 0;
            flex-shrink: 0;
            flex-grow: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

            .common-element ul li.username-item {
                flex-grow: 0;
                flex-shrink: 1;
                min-width: 160px;
            }

            .common-element ul li strong {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                margin-right: 8px;
                margin-left: 6px;
                display: inline-block;
                flex-grow: 1;
                flex-shrink: 1;
                min-width: 0;
            }

    .common-element .popover,
    .common-element .username-item .popover {
        width: fit-content !important;
    }

    .button-top-right {
        float: right;
        text-align: right;
    }

    .button-bottom-right {
        margin-top: 20px;
    }

    #settings .row,
    .EditModeAccountSettings .row {
        padding: 15px !important;
        border-radius: 0 0 var(--radius-background) var(--radius-background);
    }

    .EditModeAccountSettings .button-bottom-right {
        margin: 0;
    }

    .button-bottom-right .btn-secondary {
        float: right;
        margin-right: 10px;
    }

    .button-bottom-right .btn-primary {
        float: right;
    }

    .button-bottom-right .btn-primary-inactive {
        float: right;
    }

    .button-bottom-left .btn-secondary {
        margin-right: 10px;
    }

    .carddetail .nav-pills {
        margin-bottom: 20px;
    }

    .common-element-card-detail {
        margin-bottom: 40px;
    }

    .carddetail {
        border-top: 1px solid var(--colour-wex-gray);
        padding-top: 50px;
    }

    .reportlostorstolen-Address-content #Address {
        width: 50%
    }

    .card-information {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .input-search {
        width: auto;
    }

    .bootstrap-tagsinput {
        height: 40px !important;
        min-width: 376px !important;
        max-width: 376px !important;
    }

    .savedcardsearchinput .bootstrap-tagsinput {
        min-width: 767px !important;
        max-width: 767px !important;
    }

    .input-date-search .bootstrap-tagsinput {
        height: 40px !important;
        min-width: 276px !important;
        max-width: 276px !important;
    }

    .text-group-element input[type="text"] {
        width: 83.5%;
    }

    .table-calculator .quantity {
        width: 20%;
        padding-right: 10px;
    }

    .table-calculator .plug {
        width: 20%;
        padding-right: 10px;
    }

    .table-calculator .unitcost {
        width: 30%;
        padding-right: 10px;
    }

    .table-calculator .totalcomsumption {
        width: 30%;
        padding-right: 10px;
    }

    .date-search {
        margin-left: 15px;
        width: 245px;
        height: 40px;
        float: left;
    }

    .input-date-search {
        width: 276px;
        float: left;
        padding-left: 0px;
    }

    .start-date {
        width: 110px !important;
    }

    .end-date {
        width: 110px !important;
    }

    .accountdetail .nav-pills {
        margin-bottom: 20px;
    }

    .accountdetail {
        border-top: 1px solid var(--colour-wex-gray);
        margin-top: 35px;
        padding-top: 50px;
    }

    .accountsearch-content {
        padding-top: 50px;
    }

    header .container-wrapper .header-right .header-links {
        min-width: 525px;
    }

        header .container-wrapper .header-right .header-links li a {
            margin-right: 13px;
        }

    .logout {
        margin-right: 0 !important;
    }

    .accountsearchcategory .dropdownselection {
        width: 200px;
    }

    .accountsearchinput {
        width: 276px !important;
    }

    .account-content .account-filter {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        margin-bottom: 15px;
        padding: 0;
    }

    .reports .nav-pills {
        margin-bottom: 20px;
    }

    .reports {
        border-top: 1px solid var(--colour-wex-gray);
        margin-top: 35px;
        padding-top: 50px;
    }

        .reports .pull-right .btn-secondary {
            margin-right: 10px;
        }

        .reports .annualActivityReport .delivery .radio-to-button {
            width: 90px;
        }

        .reports .quarterlyActivityReport .radio-to-button {
            width: 90px;
        }

        .reports .annualActivityReport .address input {
            width: 400px;
        }

        .reports .quarterlyActivityReport .address input {
            width: 400px;
        }

    .profile-setting-dropdown-menu {
        opacity: 1 !important;
    }

        .profile-setting-dropdown-menu > a {
            margin-right: 0 !important;
            margin-top: -6px !important;
        }

        .profile-setting-dropdown-menu ul li {
            color: var(--colour-wex-gray) !important;
        }

    .header-links .profile-setting-dropdown-menu li {
        float: none !important;
        opacity: 1 !important;
    }

    .header-links .profile-setting-dropdown-menu .dropdown-header {
        padding-bottom: 20px;
    }

    .profile-setting-dropdown-menu .dropdown-menu > li > a {
        clear: none !important;
        color: var(--colour-wex-gray) !important;
        display: block;
        font-weight: var(--fontweight-regular);
        line-height: 1.42857;
        padding: 3px 20px;
        white-space: nowrap;
    }

    .header-links .dropdown-toggle img {
        width: 31px;
        height: 31px;
    }

    .EditModeAccountContactDetails input[type="text"] {
        width: 90% !important;
    }

    .EditModeAccountContactDetails input[type="email"] {
        width: 90% !important;
    }

    .creditlimit-email {
        width: 90%;
    }

    .invoice-email {
        width: 90%;
    }

    .button-bottom-left .account-close {
        float: left !important;
    }

    .text-area-account-close {
        width: 70% !important;
    }

    .transactions-content .qar-heading {
        padding-top: 27px !important;
        padding-left: 10px !important;
    }

    .paymentdue-content .content {
        float: left;
        margin-top: 27px;
    }

        .paymentdue-content .content strong {
            margin-top: 7px;
        }

    .paymentdue-content .make-a-payment {
        float: right;
    }

    .paymentdue-content {
        padding-top: 30px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 15px;
        border: 1px solid;
        border-color: var(--colour-wex-gray) !important;
    }

        .paymentdue-content .date {
            width: 150px !important;
            float: left;
            font-weight: var(--fontweight-bold);
        }

        .paymentdue-content .amount {
            width: 150px !important;
            float: left;
            font-size: var(--fontsize-e3);
            font-weight: var(--fontweight-bold);
            margin-bottom: 0 !important;
        }

        .paymentdue-content .bill-number {
            width: 90px !important;
            float: left;
            vertical-align: bottom;
        }

        .paymentdue-content .bill-cycle {
            width: 110px !important;
            float: left;
        }

        .paymentdue-content .payment-terms {
            width: 150px !important;
            float: left;
        }

        .paymentdue-content .payment-type {
            width: 160px !important;
            float: left;
        }

    .info-icon-pull-right {
        margin-bottom: 3px;
        margin-left: 10px;
    }

    .card-set-width {
        width: 44% !important;
    }

    .payment-date-padding {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .payment-hr {
        width: 55% !important;
    }
}

#billing-payment .bg-white {
    padding: 15px
}

#divDebit .panel, #divCreditSection .panel {
    background-color: inherit;
}

#divDebit p, #divCreditSection p {
    margin: 0px;
}

.accountpayment {
    border: 1px solid var(--colour-wex-red);
    border-radius: var(--radius-button);
    padding: 10px 14px 9px 14px;
    font-size: var(--fontsize-b4);
    text-align: center;
    cursor: pointer;
    font-weight: var(--fontweight-bold);
    background-color: var(--colour-white);
    color: var(--colour-wex-red);
}

    .accountpayment p {
        display: inline-block;
        text-transform: lowercase;
    }

        .accountpayment p::first-letter {
            text-transform: uppercase;
        }

.accountpayment-button-selected {
    color: var(--colour-white);
    background-color: var(--colour-wex-red);
}

.accountpayment p {
    margin: 0px;
}

#divCVV .info-icon {
    padding: 10px;
    margin-bottom: 1px;
    margin-left: 0px;
}

.directAgreement {
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
}

.directPayTextGradant {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, var(--colour-white)), color-stop(100, var(--colour-wex-gray)));
    background-image: -ms-linear-gradient(bottom, var(--colour-white) 0%, var(--colour-wex-gray) 1000%);
    background-image: -webkit-linear-gradient(bottom, var(--colour-white) 0%, var(--colour-wex-gray) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cc-expiry {
    width: 50px !important;
}

.direct-margin {
    margin: 10px !important
}

.directPay-slider {
    border-top: 1px solid gray;
}

.directPay-slider-icon-down {
    cursor: pointer;
    background: url("../icons/WEX_Icons_Arrow_ExpandDown.svg") no-repeat scroll center top;
}

.directPay-slider-icon-up {
    cursor: pointer;
    background: url("../icons/WEX_Icons_Arrow_ExpandUp.svg") no-repeat scroll center top;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#transaction-controls .left-column, .middle-column, .right-column {
    float: left;
}

#transaction-controls .transaction-control-input {
    width: 70px;
}

#transaction-controls .left-column {
    width: 335px;
    margin-right: 20px;
}

#transaction-controls .middle-column {
}

.error-highlight {
    border: 1px solid var(--colour-wex-red) !important;
    background-color: var(--colour-light-red) !important;
}

#transaction-controls .right-column {
    width: 212px;
}

.icon-key {
    margin: 0px !important;
}

    .icon-key:before {
        content: '';
    }

/* Use this media query if you want your css to apply ONLY for small screens */
@media (max-width: 767px) {
    #divCardTypesToggleButton {
        display: none;
    }

    .icon-key:before {
        content: url("../icons/WEX_Icons_Security_Lock_Closed.svg");
    }

    .icon-profile:before {
        content: url("../icons/WEX_Icons_Person.svg");
    }

    .icon-bell:before {
        content: url("../icons/WEX_Icons_Alarm_Bell.svg");
    }

    .myprofilesettings {
        background: white;
    }

    .searchButton {
        border-radius: 4px;
        padding: 12px 14px 12px 14px;
    }

    .horizontal-line-trn-xs {
        border-bottom: 1px solid var(--colour-light-gray);
        position: relative;
        padding-top: 10px;
        margin-left: 15px;
        width: 97%;
        margin-bottom: 20px;
        margin-top: 15px;
    }

    .account-number a {
        color: var(--colour-blue);
        text-decoration: underline;
    }

    .overview-page-top-button-container {
        margin-top: 16px;
    }

    .lastOverviewUpdate {
        margin-top: 10px;
        font-size: var(--fontsize-b4);
    }

    .lastUpdate {
        font-size: var(--fontsize-b4);
        margin-top: 7px;
    }

    .forgot-username-input-container .btn-secondary {
        margin-right: 0;
        margin-top: 0;
    }

    .paging {
        text-align: right;
    }

    .common-element ul li {
        padding-left: 0;
        list-style: none;
    }

    .bootstrap-tagsinput input {
        max-width: 376px !important;
    }

        .bootstrap-tagsinput input[placeholder] {
            font-size: var(--fontsize-b4);
        }

    .btn-icon-search {
        border: 1px solid var(--colour-light-gray);
        background: white;
        color: var(--colour-wex-gray);
        border-left: none;
        line-height: 130%;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        padding-bottom: 10px;
        margin-left: -1px;
    }

    .horizontal-line {
        width: 92%;
        padding-top: 20px;
    }

    .download-csv {
        padding-right: 15px;
    }

    .paging {
        margin-right: 0;
    }

    .filter-button {
        text-transform: capitalize;
        background-color: var(--colour-background);
        padding-left: 0;
    }

    .filter-dropdownselection {
        color: var(--colour-white);
        background-color: var(--colour-blue);
        height: 40px;
    }

    btn-group bootstrap-select btn-dropdown-group {
        padding-bottom: 2px;
    }

    .bootstrap-select.btn-group .dropdown-toggle .caret {
        color: green;
        background-color: green;
    }

    .radio-to-button-cards {
        margin-right: 15px;
        width: 30%;
    }

    .radio-to-button-cardTypes {
        margin-right: 15px;
        width: 100%;
    }

    .cardTypes .row {
        padding-bottom: 0;
    }

    .cardtypedesc {
        padding-bottom: 30px;
    }

    .radio-to-button-setPin {
        width: 25%;
        margin-right: 5px;
        padding: 10px 8px 9px 8px;
    }

    .radio-to-button-setPin-setLater {
        width: 44% !important;
    }


    .button-bottom-right .btn-secondary {
        float: right;
        margin-top: 13px;
    }


    .button-bottom-right .btn-primary {
        float: right;
        margin-top: 23px;
    }

    .common-element-card-detail {
        padding-bottom: 17px;
        margin-bottom: 20px;
    }

    .button-bottom-left .btn-secondary {
        margin-top: 13px;
    }

    .card-information {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .bootstrap-tagsinput {
        height: 40px !important;
        min-width: 226px !important;
    }

    .cancelcard .btn-group .radio-to-button {
        margin-top: 13px;
    }

    .reportlostorstolen-content .btn-group .radio-to-button {
        margin-top: 13px;
    }

    .label-card-left-column {
        /*margin-right: 150px;*/
        min-width: 100%;
    }

    .docket-number {
        font-size: var(--fontsize-b5);
    }

    .docket-number-value {
        font-size: var(--fontsize-b5);
    }

    .table-calculator .description {
        font-size: var(--fontsize-b5);
    }

    .table-calculator .quantity {
        width: 20%;
        font-size: var(--fontsize-b5);
    }

    .table-calculator .plug {
        width: 20%;
        font-size: var(--fontsize-b5);
    }

    .table-calculator .unitcost {
        width: 25%;
        font-size: var(--fontsize-b5);
    }

    .table-calculator .totalcomsumption {
        width: 25%;
        font-size: var(--fontsize-b5);
    }

    .table-calculator .amount {
        font-size: var(--fontsize-b5);
    }

    .table-calculator-total {
        font-size: var(--fontsize-b5);
    }

    .request-voucher-link {
        font-size: var(--fontsize-b5);
    }

    .label-card-right-column {
        /*margin-right: 150px;*/
        min-width: 100%;
        padding-top: 30px;
    }

    .radio-to-button-yes-inline {
        width: 47% !important;
        margin-right: 13px !important;
    }

    .radio-to-button-no-inline {
        width: 47% !important;
        margin-right: 0 !important;
    }

    .dropdownselection {
        width: 100%;
    }

    .btn-color-style {
        margin-right: 6px !important;
        width: 14% !important;
    }

    .text-group-element select + i.glyphicon {
        margin-right: 5px;
    }

    .date-search {
        margin-left: 15px;
        margin-right: 15px;
    }

        .date-search .icon-long-arrow {
            top: 0 !important
        }

    .date-search-statement .icon-long-arrow {
        top: 0 !important
    }

    .date-search-statement {
        margin-left: 15px;
        margin-right: 0 !important;
        border-width: 1px 1px 1px 1px;
        float: left !important;
        width: 74.5% !important;
    }

    .start-date {
        float: left;
        width: 48% !important;
        border: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 38px !important;
    }


    .start-date-statement {
        float: left;
        width: 45% !important;
        border: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .end-date {
        float: none !important;
        width: 45% !important;
        border: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        height: 38px !important;
    }

    .button-mobile {
        margin-top: 15px;
    }

    .transaction-search {
        padding-bottom: 15px;
    }

    /* line 177, ../../../../../../inetpub/wexmotorpass/assets/src/styles/sass/partials/_home-bottom-module.scss */

    .heading-transaction .link-view-all:before {
        top: 31px;
        right: 48px;
    }

    .account-content .panel-collapse {
        background: none;
        padding: 0;
    }

    .account-content .panel-title {
        padding: 10px;
    }

    .account-content .colapse-link {
        text-align: right;
    }

    .account-content .btn-filter-group pull-right {
        margin-right: 15px;
        margin-top: 15px;
    }

    .accountsearchcategory {
        width: 100%;
    }

        .accountsearchcategory .dropdownselection {
            width: 100%;
            border-radius: 0 !important;
        }

    .accountsearchinput {
        margin-left: 0;
        border-radius: 0 !important;
        border-left-width: 0;
    }

        .accountsearchinput input {
            border-radius: 0 !important;
            border-width: 0;
            height: 40px;
        }

        .accountsearchinput .form-control:focus {
            border-color: var(--colour-wex-gray);
            outline: 0;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        }

    .accountsearchcategory .form-control:focus {
        border-color: var(--colour-wex-gray);
        outline: 0;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    }

    .account-content .panel-heading .panel-title > a {
        display: block;
        width: 100%;
        padding: 11px 10px 5px 10px;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-radius: 0;
    }

        .account-content .panel-heading .panel-title > a:hover,
        .account-content .panel-heading .panel-title > a:active {
            color: var(--colour-wex-gray);
            text-decoration: none;
            background: var(--colour-light-gray);
        }

        .account-content .panel-heading .panel-title > a.collapsed {
            color: var(--colour-wex-gray);
            background: none;
        }

            .account-content .panel-heading .panel-title > a.collapsed:hover,
            .account-content .panel-heading .panel-title > a.collapsed:active {
                color: var(--colour-wex-gray);
                text-decoration: none;
                background: var(--colour-light-gray);
            }

    .account-content .arrow .icon::before {
        content: "";
        font-size: var(--fontsize-i7);
    }

    .account-content .panel-heading .panel-title .arrow > a.active .icon::before {
        content: "\e901";
    }

    .account-content .panel-heading .panel-title .arrow > a.collapsed .icon:before {
        content: "\e900";
    }

    .account-content .account-info {
        margin-left: 30px;
        margin-right: 10px;
    }

    .account-content .panel-title .account-name {
        color: var(--colour-wex-gray);
        font-size: var(--fontsize-b3);
    }


    .account-info td {
        padding-bottom: 10px;
    }
    /*.request-previous-statement-select-date-section-header {
        margin-top: 20px;
    }

    .request-previous-statement-select-date-select-date {
       margin-top: 20px;
       padding-bottom: 10px;
    }

    .request-previous-statement-select-date-select-date .date-search {
        margin-top: 10px;
        margin-left: 0;
        margin-right: 0;
        border: 1px solid var(--colour-light-gray);
    }

    .request-previous-statement-select-date-content .btn-primary {
        margin-top: 20px;
    }*/

    .accountdetail {
        border-top: 1px solid var(--colour-wex-gray);
        margin-top: 25px;
        padding-top: 20px;
    }

    .reports {
        border-top: 1px solid var(--colour-wex-gray);
        margin-top: 25px;
        padding-top: 20px;
    }

        .reports .cancel-report-btn {
            margin-top: 20px;
            margin-bottom: 20px;
        }

        .reports .annualActivityReport .delivery .btn-group {
            width: 100%;
        }

        .reports .annualActivityReport .delivery .btn-group {
            width: 100%;
        }

        .reports .quarterlyActivityReport .radio-to-button {
            width: 90px;
        }

        .reports .annualActivityReport .address input {
            width: 100%;
        }

    .header-links .open .dropdown-menu {
        background-color: transparent;
        border: 0 none;
        box-shadow: none;
        float: none;
        margin-top: 0;
        position: static;
        width: auto;
    }

    .header-links .profile-setting-dropdown-menu li {
        border-bottom: none !important;
    }

    .profile-setting-currentpassword {
        margin-top: 25px;
    }

    .profile-setting-secretquestion {
        margin-top: 25px;
    }

    .accountsearch .btn-icon-search {
        border-width: 0;
    }

    .border-box {
        background-color: var(--colour-white);
        border: 1px solid var(--colour-light-gray);
    }


    a:hover,
    a:active {
        color: var(--colour-blue);
        text-decoration: none;
    }

    .accountdetail .panel-body .group-inner {
        padding-left: 0px;
        padding-right: 0px;
    }

    #transaction-controls .panel-body .group-inner {
        padding: 15px !important;
    }

    .accountdetail .panel-group .panel-body {
        margin: 0;
        padding: 0;
    }

    .dropdown-backdrop {
        position: static !important;
    }

    .pagination ul {
        padding-left: 0;
        padding-right: 0;
    }

    #transaction-controls .left-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    #transaction-controls .right-column {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-right: 0 !important;
    }

    #transaction-controls .radio-to-button {
        margin-top: 13px;
    }


    #transaction-controls #TransactionControlMobile_TransactionValueLimit {
        width: 94%;
    }

    #transaction-controls #TransactionControlMobile_TransactionVolumeLimit {
        width: 80%;
    }

    #transaction-controls .currency-sign {
        float: right;
    }

    #transaction-controls #TransactionControlMobile_DailyTransactionValueLimit {
        width: 94%;
    }

    #transaction-controls #TransactionControlMobile_DailyTransactionVolumeLimit {
        width: 80%;
    }

    #transaction-controls #TransactionControlMobile_WeeklyTransactionValueLimit {
        width: 94%;
    }

    #transaction-controls #TransactionControlMobile_WeeklyTransactionVolumeLimit {
        width: 80%;
    }

    #transaction-controls #TransactionControlMobile_MonthlyTransactionValueLimit {
        width: 94%;
    }

    #transaction-controls #TransactionControlMobile_MonthlyTransactionVolumeLimit {
        width: 80%;
    }

    #transaction-controls .currency-sign {
        float: right;
    }

    #transaction-controls .transaction-control-input-lable {
        float: right;
        padding-left: 5px;
        padding-top: 9px;
    }

    #transaction-controls .left-column p {
        float: left;
        margin-right: 8px;
    }

    .qar-selectAll-box {
        padding-left: 0px !important;
    }

    .transactions-content .qar-heading {
        padding-top: 27px !important;
        padding-left: 0px !important;
    }

    .select-nav-dropdown {
        margin-top: 20px;
        margin-bottom: 20px;
        text-transform: capitalize;
        color: var(--colour-white);
        background-color: var(--colour-blue);
        height: 40px;
        font-size: var(--fontsize-b5) !important;
        font-weight: var(--fontweight-bold);
    }

    .transaction-control-notifications .notifications-email-address {
        width: 60%;
    }


    .paymentdue-content .date {
        font-weight: var(--fontweight-bold);
    }

    .paymentdue-content .amount {
        font-size: var(--fontsize-e3);
        font-weight: var(--fontweight-bold);
        margin-bottom: 27px;
    }

    .paymentdue-content .bill-number {
        vertical-align: bottom;
        float: left;
    }

    .paymentdue-content .bill-cycle {
        margin-bottom: 15px;
        float: right;
    }

    .paymentdue-content .payment-terms {
        margin-bottom: 15px;
    }

    .paymentdue-content .payment-type {
        margin-bottom: 15px;
    }

    .paymentdue-content .content {
        margin-top: 15px;
    }

        .paymentdue-content .content strong {
            margin-top: 7px;
        }

    .paymentdue-content {
        padding-top: 17px;
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 10px;
        border: 1px solid;
    }

        .paymentdue-content .make-a-payment {
        }

    .divAccountPaymentButton {
        float: left;
        width: 200px;
    }

        .divAccountPaymentButton a {
            font-size: var(--fontsize-b4);
        }

    .info-icon-pull-right {
        float: right !important;
    }

    .info-icon-pull-right-cc {
        margin-right: 14px !important;
    }

    .payment-amount-box {
        width: 100% !important;
    }

        .payment-amount-box input[type="text"] {
            width: 90% !important;
        }

    .card-set-width {
        width: 45% !important;
    }

    .info-icon-pull-right-cc > .popover {
        left: -140.667px !important;
    }

    .info-icon-pull-right-acc > .popover {
        left: -20.667px !important;
    }

    .popover .arrow {
        display: none !important;
    }

    .payment-date-padding {
        padding-left: 10px !important;
        padding-right: 0px !important;
    }

    .mobile-cc-padding {
        padding-right: 0px !important;
        padding-left: 0px !important;
    }

    footer .container-wrapper .footer-right {
        margin: -21px 0 0 68px !important;
        font-size: var(--fontsize-f1) !important;
    }

    .copyright-text {
        font-size: var(--fontsize-f1) !important;
    }

    footer .container-wrapper .footer-right ul li a {
        font-size: var(--fontsize-f1) !important;
    }

    .panel-margin-fix {
        margin-left: -13px !important;
        margin-right: -12px !important;
    }

    .EditWEXRepairAssist .radio-to-button {
        margin-top: 13px;
        border-radius: 0px !important;
    }

    .accountdetail .wex-repair-assist .panel-body {
        padding-top: 3.125rem;
        padding-left: 25px;
        padding-right: 15px;
    }

    .wex-repair-assist .btn-primary {
        margin-top: 10px;
    }

    .wex-repair-assist .btn input[type=radio] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        pointer-events: none;
    }
}


/* use this media query if you want your css to apply ONLY for large screens */
@media (min-width: 1024px) {
    .transaction-header-td-width-106 {
        width: 106px !important;
    }

    .transaction-header-td-width-180 {
        width: 180px !important;
    }

    .transaction-header-td-width-110 {
        width: 110px !important;
    }

    .transaction-header-td-width-100 {
        width: 100px !important;
    }

    .transaction-body-td-width-106 {
        width: 106px !important;
    }

    .transaction-body-td-width-180 {
        width: 180px !important;
    }

    .transaction-body-td-width-220 {
        width: 220px !important;
    }

    .transaction-body-td-width-110 {
        width: 110px !important;
    }

    .transaction-body-td-width-100 {
        width: 100px !important;
    }

    .transaction-body-td-width-80 {
        width: 80px !important;
    }

    .transaction-header-td-width-80 {
        width: 80px !important;
    }

    .transaction-header-td-width-220 {
        width: 220px !important;
    }

    .horizontal-line-trn-lg {
        border-bottom: 1px solid var(--colour-light-gray);
        position: relative;
        padding-top: 10px;
        margin-left: 15px;
        width: 97%;
        margin-bottom: 50px;
        margin-top: 30px;
    }

    .info-icon-pull-right {
    }

    .card-set-width {
        width: 43% !important;
    }
}

.white-bg {
    background: var(--colour-white) !important;
}

.no-balance {
    background: var(--colour-sky-blue) !important;
    color: var(--colour-slate-blue) !important;
}

    .no-balance a {
        color: var(--colour-wex-red);
    }

        .no-balance a:hover {
            color: var(--colour-dark-red);
        }

.pay-due {
    background: var(--colour-wex-red) !important;
    color: var(--colour-white) !important;
}

    .pay-due a {
        color: var(--colour-white) !important;
    }

    .pay-due .billings ul .billings-date {
        font-family: var(--fontfamily-inter);
        font-weight: var(--fontweight-bold);
        font-size: var(--fontsize-b1);
        margin: 10px 0 10px 0;
    }

.nextpay-credit-amount {
    font-family: var(--fontfamily-inter) !important;
    font-weight: var(--fontweight-regular);
    font-size: var(--fontsize-b3) !important;
}



.pay-due .billings ul .billings-price {
    font-family: var(--fontfamily-inter);
    font-weight: var(--fontweight-bold);
    font-size: var(--fontsize-e2);
}

.bg-white {
    background-color: white;
    border-radius: var(--radius-background);
}

.padding-10 {
    padding: 10px;
}

.account-close .icon {
    margin: 20px;
}

.chart-wrapper-statement {
    margin: 25px;
}

.logo-footer-svg {
    width: 100px;
    height: 50px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
    vertical-align: middle;
}

.overview-page-top-button-container {
    margin-top: 31px;
}

.logo-header-svg {
    height: 51px;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    vertical-align: middle;
}

.logo-footer-link {
    text-decoration: none !important;
}

#grid {
    box-shadow: none;
}

.profile-menu {
    border: none !important;
    border-radius: 0 !important;
    top: 110%;
}

    .profile-menu > li {
        height: 37px !important;
        width: 100%;
        margin-bottom: -6px;
    }

        .profile-menu > li > a {
            height: 100% !important;
            width: 100%;
            line-height: 33px !important;
            font-size: var(--fontsize-b4) !important;
        }

.profile-menu {
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.175) !important;
}

.oa-menu-dropdown-content {
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.175) !important;
}

.profile-menu > li > a:hover {
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-color: var(--colour-light-gray) !important;
}

.profile-menu > .dropdown-header:hover {
    background-color: var(--colour-white) !important;
}

.profile-menu > .dropdown-header {
    margin-bottom: 0 !important;
    padding: 10px 0 10px 20px !important;
    font-size: var(--fontsize-b4) !important;
}

.profile-icon-svg {
    height: 31px;
    width: 31px;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    vertical-align: middle;
    background-image: url("../icons/WEX_Icons_Person_White.svg") !important;
    background-color: var(--colour-teal);
    border-radius: var(--radius-button);
}

.margin-20 {
    margin: 20px;
}

.bootstrap-tagsinput {
    box-shadow: none !important;
    border: 1px solid var(--colour-wex-gray) !important;
}

.savedcardsearchinput > .form-group > .bootstrap-tagsinput {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.radio-to-button-cards {
    margin-right: 10px;
    background-repeat: no-repeat !important;
    padding-left: 60px;
}

    .radio-to-button-cards:hover {
        background-color: var(--colour-light-red);
    }

    .radio-to-button-cards.active {
        background-color: var(--colour-wex-red) !important;
    }

        .radio-to-button-cards.active:hover {
            background-color: var(--colour-dark-red) !important;
        }

#divCardDetails .radio-to-button-cards {
    padding-top: 50px;
    padding-left: 14px;
}

.image-icon-individually {
    background-size: 50px !important;
    background-position-x: 50% !important;
    background: url('../icons/WEX_Icons_Money_CreditCard_Addition.svg');
}

    .image-icon-individually.active {
        background: url('../icons/WEX_Icons_Money_CreditCard_Addition_White.svg');
    }

.image-icon-bulk {
    background-size: 50px !important;
    background-position-x: 50% !important;
    background: url('../icons/WEX_Icons_Documents_Addition.svg');
}

    .image-icon-bulk.active {
        background: url('../icons/WEX_Icons_Documents_Addition_White.svg');
    }

    .image-icon-bulk br,
    .image-icon-individually br {
        display: none;
    }

.download-file-button {
    color: var(--colour-white);
    background-color: var(--colour-wex-red);
    border: 1px solid transparent;
    border-color: var(--colour-wex-red);
    text-decoration: none !important;
    width: 55% !important;
    margin-left: 0px !important;
    border-radius: var(--radius-button) !important;
}

    .download-file-button:hover {
        color: var(--colour-white);
        background-color: var(--colour-dark-red);
    }

.truncateText {
    width: 270px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 4px;
}

.pnlUploadedBulk {
    margin: 5px 5px 5px 4px;
    border-radius: var(--radius-input-single);
    border: solid 1px var(--colour-light-gray);
    padding: 5px 5px 1px 10px !important;
    width: calc(55% - 2px) !important;
}



.icon-car-bulk:before {
    font-family: 'svg-icon';
    content: "\e800";
    font-size: var(--fontsize-i2);
    color: transparent;
    margin-left: -1.275rem;
    background-image: url('../icons/WEX_Icons_Mobility_Car_Front.svg');
}

.icon-driver-bulk:before {
    font-family: 'svg-icon';
    content: "\e804";
    font-size: var(--fontsize-i2);
    color: transparent;
    left: 50%;
    margin-left: -1.275rem;
    background-image: url("../icons/WEX_Icons_Person.svg");
}

.icon-vehicleDriver-bulk:before {
    font-family: 'svg-icon';
    content: "\e805";
    font-size: var(--fontsize-i2);
    color: transparent;
    margin-left: -1.275rem;
    background-image: url('../icons/WEX_Icons_Mobility_Car_Driver.svg');
}

.deleteFileIcon, .deleteAttachmentIcon {
    float: right;
    background-image: url("../icons/WEX_Icons_Symbol_X.svg");
    width: 18px;
    height: 18px;
    background-size: 18px;
    position: relative;
    top: 3px;
    cursor: pointer;
}

    .deleteFileIcon:hover, .deleteAttachmentIcon:hover {
        background-image: url("../icons/WEX_Icons_Symbol_Error.svg");
    }

.form-group .error-message-wex {
    color: var(--colour-wex-red);
    font-size: var(--fontsize-b5);
}



.filter-button-container:after {
    content: '';
    width: calc(100% - 155px);
    height: 1px;
    background: gray;
    position: absolute;
    bottom: 100%;
    left: 155px;
}

.activate-button-color {
    background-color: var(--colour-white) !important;
    color: var(--colour-wex-red) !important;
}


.card-activation-form > div {
    margin-top: 20px;
}

.card-status {
    display: block;
    text-transform: lowercase;
}

    .card-status::first-letter {
        text-transform: uppercase;
    }

.panel-group-card-activation .panel-title-inner-card-activation {
    display: block;
    padding: 15px 10px 15px 10px;
    background: var(--colour-slate-blue);
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    font-family: var(--fontfamily-inter);
    font-weight: var(--fontweight-regular);
    font-size: var(--fontsize-b3);
}

    .panel-group-card-activation .panel-title-inner-card-activation:after {
        position: absolute;
        right: 0;
        top: 0;
        color: transparent;
        font-size: var(--fontsize-i2);
        content: "\e901";
        height: 20px;
        margin: 18px;
        background-repeat: no-repeat;
        background-image: url("../icons/WEX_Icons_Symbol_Minus_White.svg");
    }

    .panel-group-card-activation .panel-title-inner-card-activation.collapsed:after {
        position: absolute;
        right: 0;
        top: 0;
        color: transparent;
        font-size: var(--fontsize-i2);
        content: "\e900";
        height: 20px;
        margin: 18px;
        background-repeat: no-repeat;
        background-image: url("../icons/WEX_Icons_Symbol_Plus_Red.svg");
    }

    .panel-group-card-activation .panel-title-inner-card-activation.collapsed {
        background: white;
        color: black;
        border-bottom: 2px solid silver;
    }

.activation-page-content-body {
    border-top: 1px solid var(--colour-wex-gray);
    margin-top: 35px;
    padding-top: 50px;
    min-height: 600px;
}

.readOnlyButton {
    opacity: 0.25;
    background: var(--colour-wex-gray);
    color: var(--colour-white) !important;
    text-decoration: none !important;
    border: 1px solid var(--colour-wex-gray);
    min-width: 100px;
}

.date_background {
    background-color: var(--colour-white) !important;
}

.transaction-header-amt {
    text-align: right;
    padding-right: 10px;
}

.express-delivery-message {
    margin-left: 4.5rem;
}

.express-delivery-header {
    font-weight: bold !important;
    padding-top: 5px !important;
}

.pnlEmailAndMobile :last-child div {
    margin-bottom: 30px;
}

.modal-content .header {
    padding: 10px 15px 10px 10px;
}

.modal-content .icon-close:before {
    padding: 10px;
    font-size: var(--fontsize-i6);
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.visa {
    background-image: url('../images/visa-card-logo.png');
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-left: 10px;
}

.visa-disabled {
    background: url("../images/visa-card-logo-grey.png");
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-left: 10px;
}

.amex {
    background-image: url('../images/amx-card-logo.png');
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-left: 10px;
}

.amex-disabled {
    background: url("../images/amx-card-logo-grey.png");
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-left: 10px;
}

.mastercard {
    background-image: url('../images/master-card-logo.png');
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-left: 10px;
}

.mastercard-disabled {
    background: url("../images/master-card-logo-grey.png");
    width: 35px;
    height: 35px;
    background-repeat: no-repeat;
    background-size: contain;
    float: left;
    margin-left: 10px;
}

.info-icon {
    width: 0px;
    height: 0px;
    padding: 12px;
    margin-bottom: 5px;
    cursor: pointer;
    background-image: url("../icons/WEX_Icons_Symbol_Info.svg");
}

.nopadding {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

input-validation-error-payment {
    background: var(--colour-light-red);
    border: 1px solid var(--colour-wex-red);
}

.payment-amount-box {
    background: var(--colour-background);
    border: 1px solid var(--colour-light-gray);
    border-radius: var(--radius-input-single);
    color: var(--colour-wex-gray);
    padding-left: 10px;
    padding-right: 10px;
    height: 42px;
    width: 83.5%;
}

.payment-amount-box-no-border {
    border: none !important;
}

.payment-receipt-margin-top {
    margin-top: 14px !important;
}

.payment-panel {
    padding-left: 20px !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
}

    .payment-panel h3 {
        margin-bottom: 30px !important;
    }

    .payment-panel hr {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

.AAR h3,
.QAR h3 {
    margin-bottom: 30px !important;
}

.text-card-payment {
    font-size: var(--fontsize-b5);
    margin-right: -200px;
    margin-top: 5px;
    font-weight: var(--fontweight-bold);
}

.btn-grouping-cardOptions p {
    color: var(--colour-wex-gray);
}

.popover {
    width: 400px !important;
}

.payment-amounts-bold {
    font-weight: bold !important;
}

.receipt-page-pan {
    margin-top: 6px !important;
}

.payment-cc-margin {
    margin-top: 10px !important;
}

.receipt-cc-no-margin {
    margin-left: 0px !important;
}

.payment-receipt-heading {
    margin-bottom: 20px !important;
}

.payment-carddetails-heading {
    margin-top: -10px !important;
}

.bi.bi-download {
    display: none;
}

.notification-download {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("../icons/WEX_Icons_Arrow_Download_Red.svg");
}

.bi.bi-delete {
    display: none;
}

.notification-delete {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("../icons/WEX_Icons_Symbol_X_Red.svg");
}

.bi.bi-redirect {
    display: none;
}

.notification-redirect {
    display: inline-block;
    width: 25px;
    height: 25px;
    background-image: url("../icons/WEX_Icons_Symbol_Eye_Red.svg");
}

.password {
    border-radius: var(--radius-input-start) !important;
}

.password-show {
    font-size: var(--fontsize-b5);
    font-weight: var(--fontweight-bold);
    text-transform: lowercase;
    display: block;
}

    .password-show::first-letter {
        text-transform: uppercase;
    }

    .password-show:hover {
        text-decoration: none;
    }

.card-number-show,
.account-password-show {
    cursor: pointer;
    font-weight: var(--fontweight-bold);
    font-size: var(--fontsize-b4);
    text-decoration: underline;
    text-transform: lowercase;
    display: inline-block;
    margin-left: 5px;
}

    .card-number-show::first-letter,
    .account-password-show::first-letter {
        text-transform: uppercase;
    }

.label-card-left-column {
    text-transform: lowercase;
}

    .label-card-left-column::first-letter {
        text-transform: uppercase;
    }

#AccountPasswordShow,
#AccountPasswordRenEnterShow {
    text-decoration: none;
    margin: 0;
}

.form-group.validationfield br {
    display: none;
}

.show_hide_password .input-group-addon {
    background-color: var(--colour-wex-red);
    border-color: var(--colour-wex-red) !important;
    border-radius: var(--radius-input-end);
    cursor: pointer;
}

    .show_hide_password .input-group-addon:hover {
        background-color: var(--colour-dark-red);
        border-color: var(--colour-dark-red) !important;
        transition-duration: var(--duration-hover);
    }

.show_hide_password .password-show {
    color: var(--colour-white);
}

.show_hide_password .input-group-addon.input-validation-error {
    border: 1px solid var(--colour-wex-red) !important;
}

.user-details-input-container {
    padding-top: 30px;
}

    .user-details-input-container .form-group {
        margin-bottom: 43px;
    }

    .user-details-input-container .btn-secondary {
        float: right;
        margin-top: 23px;
        margin-bottom: 13px;
        margin-right: 5%;
    }

    .user-details-input-container .no-right-margin {
        margin-right: 0% !important;
    }


    .user-details-input-container .btn-primary {
        float: right;
        margin-top: 23px;
        margin-bottom: 13px;
    }

a.link-user-details {
    font-weight: var(--fontweight-regular);
    text-transform: none;
    float: right;
    margin-top: 2px;
    text-decoration: underline;
}

.user-search .bootstrap-tagsinput {
    border-radius: var(--radius-input-single) !important;
}

.radio-item input[type='radio'] {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid darkgray;
    border-radius: 50%;
    outline: none;
    margin-top: 10px !important;
    margin-bottom: -5px !important;
}

    .radio-item input[type='radio']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
        cursor: pointer;
    }

    .radio-item input[type='radio']:checked:before {
        background: var(--colour-blue);
        width: 10px;
        height: 10px;
    }

.payment-processing-message-container {
    position: fixed;
    top: 45%;
    left: 45%;
    background-color: white;
    z-index: 1002;
    text-align: center;
    border: 2px solid var(--colour-light-gray);
    padding: 10px 25px 10px 25px;
}

    .payment-processing-message-container img {
        height: 40px;
        margin-bottom: 5px;
    }

.payment-processing-message-background {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: var(--colour-light-gray);
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .70;
}

.switch-container {
    display: flex;
    align-items: center;
}

.switch-label {
    font-family: var(--fontfamily-inter);
    font-weight: var(--fontweight-regular);
    font-size: var(--fontsize-b3);
    font-weight: var(--fontweight-bold);
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    padding-left: 10px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--colour-light-gray);
    transition: .4s;
    border-radius: 34px;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: .4s;
        border-radius: 50%;
    }

input:checked + .slider {
    background-color: var(--colour-blue);
}

    input:checked + .slider:before {
        transform: translateX(26px);
    }

.square {
    border-radius: 0px;
}

.modal-text {
    font-size: var(--fontsize-b3);
}

.cardsummaryList {
    margin-right: -15px
}

.btn-group > .btn.radio-to-button.card-summary-filter {
    padding: 10px 6px 9px;
    border-radius: 5px;
}

    .btn-group > .btn.radio-to-button.card-summary-filter:not(:last-child) {
        margin-right: 5px;
    }

.home:not(.modal-open) {
    height: auto !important;
}

.notification h3 {
    text-transform: none !important;
}

.profile-setting-dropdown-menu .account-notification-redicon {
    position: absolute;
    top: -14px;
    right: -10px;
    background: red;
    border-radius: 50%;
    display: inline-block;
    width: 22px;
    text-align: center;
    padding: 0px 0;
}

.account-notification-redicon-mobile {
    position: absolute;
    top: 3px;
    right: -8px;
    background: red;
    border-radius: 50%;
    width: 18px;
    text-align: center;
    padding: 0px 0;
    z-index: 2;
    font-size: var(--fontsize-i5);
    color: var(--colour-white);
    font-weight: var(--fontweight-bold);
}

input[type="email"].readonly-textbox {
    background: var(--colour-light-gray);
}

span.new-label {
    background: var(--colour-blue);
    color: var(--colour-white);
    border-radius: var(--radius-input-small);
    padding: 4px 4px 2px 4px;
    margin: 0px 10px;
    font-size: smaller;
    text-align: center;
    justify-content: center;
}

.carousel {
    margin-top: -42px;
    margin-bottom: 14px;
}

.carousel-inner {
    border-radius: var(--radius-background);
    width: 95.8% !important;
}

.carousel-control.right {
    background-image: none;
    width: 4%;
    color: var(--colour-wex-red);
    opacity: 1;
    text-shadow: none;
    height: fit-content;
    margin: auto;
}

    .carousel-control.right span {
        margin-right: -3px !important;
    }

        .carousel-control.right span:before {
            content: "";
            width: 30px;
            height: 30px;
            display: inline-block;
            border: 6px solid transparent;
            padding: 10px;
            border-radius: 100px;
            background-image: url(../icons/WEX_Icons_Arrow_ExpandRight_Red.svg);
            outline: 1px solid var(--colour-wex-red);
            background-repeat: no-repeat;
            background-color: var(--colour-white);
        }

        .carousel-control.right span:hover:before {
            background-image: url(../icons/WEX_Icons_Arrow_ExpandRight_DarkRed.svg);
            outline: 1px solid var(--colour-dark-red);
        }

.carousel .carousel-inner .a:hover {
    cursor: pointer;
}

.carousel-image {
    width: 100%;
    padding: 0px;
    margin: auto;
    background-repeat: repeat;
    background-size: contain;
    display: block;
    vertical-align: middle;
    position: relative;
}

    .carousel-image::before {
        content: "";
        display: block;
        padding-top: 150px;
    }

.radio input[type=radio]:checked:disabled ~ .text:after {
    background-color: var(--colour-light-gray);
}

.date-search.disabled,
.date-search.disabled input {
    color: var(--colour-light-gray);
}

.date-search.custom {
    margin-left: -5px;
    border-width: 1px;
    width: 240px;
    border-radius: var(--radius-input-single);
}

.box-content table td.middle-align {
    vertical-align: middle;
}

div .bootstrap-datetimepicker-widget table td.active,
div .bootstrap-datetimepicker-widget table td.active:hover {
    background-color: var(--colour-wex-red);
    color: var(--colour-white);
}

.panel.payment-partial-panel .panel-body {
    padding: 0px;
}

.bootstrap-datetimepicker-widget table td.new,
.bootstrap-datetimepicker-widget table td.old,
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
    color: var(--colour-light-gray) !important;
}

.new-tab {
    color: var(--colour-yellow) !important;
}

#divCustomiseOptions > div.col-md-4 {
    width: 25%;
}

#divCustomiseOptionsReadOnly > div.col-md-4 {
    width: 25%;
}

#filterDetailSectionData {
    height: 230px !important;
}

.preserve-case {
    text-transform: none !important;
}

#editUsermodal h2,
#addUpdateUsermodal h2 {
    margin-left: -15px;
}

#editUsermodal .alert,
#addUpdateUsermodal .alert {
    margin: -15px -15px 20px -15px;
}

#editUsermodal .checkbox-label label,
#addUpdateUsermodal .checkbox-label label {
    padding-left: 10px;
    margin-top: 6px !important;
}

.transaction-info .btn-danger {
    background-image: none;
}

.well.well-sm {
    background-image: none;
    background-color: unset;
    border-radius: var(--radius-background);
}

    .well.well-sm .icon-container {
        width: unset;
    }

        .well.well-sm .icon-container .icon {
            margin-right: 10px;
        }

.no-statements-chart.home-top-container .dashboard {
    height: unset;
}

.no-statements-chart.home-top-container .table {
    display: flex;
}

    .no-statements-chart.home-top-container .table .table .table-row .table-cell {
        border-bottom: none;
        padding: 28px 20px 26px 26px;
    }

.no-statements-chart.home-top-container .payment-content ul.balance-credits {
    margin-top: 0;
}

.no-statements-chart.home-top-container .payment-content .payment-amount {
    padding-bottom: 10px;
}

.no-statements-chart .pay-due {
    display: flex !important;
}

.no-add-card {
    float: right;
}

.select-wrapper {
    position: relative;
}

    .select-wrapper:before {
        content: '';
        background-image: url("../icons/WEX_Icons_Arrow_ExpandDown_Red.svg");
        width: 25px;
        height: 25px;
        position: absolute;
        right: 10px;
        top: 0.8rem;
        pointer-events: none;
        transition: transform var(--duration-expand);
    }

    .select-wrapper:focus-within.select-wrapper::before,
    .select-wrapper:focus.select-wrapper::before {
        transform: rotate(180deg);
    }

.userrole-select {
    background: var(--colour-background);
    border: 1px solid var(--colour-light-gray);
    border-radius: var(--radius-input-single);
    color: var(--colour-wex-gray);
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
    appearance: none;
}

#SearchAccount,
#DownloadAccounts,
#OnlineApplication {
    color: var(--colour-slate-blue) !important;
    text-decoration: none;
    cursor: default;
}

.statements-heading {
    font-weight: var(--fontweight-bold);
    font-size: var(--fontsize-h2);
}
.statements-heading .glyphicon {
    display: none;
}

.transaction-filter {
    display: flex;
    gap: 20px;
    margin-top: 16px;
}

.transaction-filter .checkbox {
    margin-top: unset;
}

.transaction-filter .checkbox label{
    margin-top: 5px;
}