:root {
    --color-pink: #D9116B;
    --color-light-pink: #FFC9DB;
    --color-pale-pink: #FFFAFC;
    --color-light-blue: #F2F3F5;
    --color-medium-blue: #BEC7DF;
    --color-blue: #0B2265;
    --color-dark-blue: #041139;
    --color-grey: #E7E4DD;
    --color-light-grey: #FBF8F5;
    --color-divider-grey: #F3F0EA;
    --color-shading-grey: #DEE2E6;
    --color-dark-grey: #2D2E30;
    --color-white: #FFFFFF;
    --color-faded-text: #BDB8B1;
    --color-light-green: #DDF9ED;
    --color-dark-green: #006138;
    --color-light-red: #FFF0F2;
    --color-dark-red: #CF0833;
    --color-orange: #FDA300;
    --modal-content-width: 680px;
    --modal-content-height: 340px;
    --modal-content-icon-width: 330px;
    --modal-content-icon-height: 330px;
    --modal-content-qr-width: 310px;
    --modal-content-qr-height: 310px;
    --payment-frame-width: 360px;
}

body {
    margin: 0;
    padding: 0;
    background-color: #fff;
    height: 100vh;
    font-family: SofiaPro;
    font-size: large;
    color: var(--color-dark-grey);
    touch-action: manipulation;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    /*overflow-y: scroll;*/
}

select, option {
    font-family: SofiaPro, Helvetica, Arial, sans-serif !important;
}

@font-face {
    font-family: SofiaPro;
    font-weight: 400;
    font-style: normal;
    src: url("/fonts/SofiaProRegular.woff2") format("woff2"),url("/fonts/SofiaProRegular.woff") format("woff")
}

@font-face {
    font-family: SofiaPro;
    font-weight: 700;
    font-style: normal;
    src: url("/fonts/SofiaProBold.woff2") format("woff2"),url("/fonts/SofiaProBold.woff") format("woff")
}

/* Default State */
.btn-primary {
    color: var(--color-white) !important;
    background-color: var(--color-blue) !important;
    border-color: var(--color-blue) !important;
    border-radius: 26px !important;
    height: 42px !important;
    font-family: SofiaPro, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    padding: 0rem 1.75rem;
    margin-top: 14px;
}

    /* Focus State */
    .btn-primary:focus {
        color: var(--color-light-grey) !important;
        border-color: var(--color-light-grey) !important;
        background-color: var(--color-blue) !important;
        box-shadow: 0 0 0 3px rgba(11, 34, 101, 0.5) !important; /* Subtle focus ring */
    }

    /* Pressed State */
    .btn-primary:active,
    .btn-primary.active,
    .btn-primary:active:focus,
    .btn-primary:active:hover {
        color: var(--color-white) !important;
        background-color: var(--color-dark-blue) !important; /* Darker shade */
        border-color: var(--color-dark-blue) !important;
        box-shadow: none !important;
    }

    /* Inactive/Disabled State */
    .btn-primary:disabled,
    .btn-primary.disabled {
        color: var(--color-faded-text) !important;
        background-color: var(--color-grey) !important;
        border: none !important;
        pointer-events: none !important;
        opacity: 1 !important;
    }

/* Default State */
.btn-secondary {
    color: var(--color-blue) !important;
    background-color: var(--color-light-blue) !important;
    border: none !important;
    border-radius: 26px !important;
    height: 42px !important;
    font-family: SofiaPro, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    padding: 0rem 1.75rem !important;
    margin-top: 14px;
}

    /* Focus State */
    .btn-secondary:focus {
        color: var(--color-blue) !important;
        background-color: #E7EBF6 !important;
        border: 2px solid var(--color-blue) !important;
        box-shadow: none !important;
    }

    /* Pressed State */
    .btn-secondary:active,
    .btn-secondary.active,
    .btn-secondary:active:focus,
    .btn-secondary:active:hover {
        color: var(--color-blue) !important;
        background-color: var(--color-medium-blue) !important;
        border: none !important; /* No border */
        box-shadow: none !important;
    }

    /* Inactive/Disabled State */
    .btn-secondary:disabled,
    .btn-secondary.disabled {
        color: var(--color-faded-text) !important;
        background-color: var(--color-grey) !important;
        border: none !important;
        pointer-events: none !important;
        opacity: 1 !important;
    }

.btn-default {
    color: var(--color-blue) !important;
    background-color: transparent !important;
    border-width: 1px;
    border-color: var(--color-blue) !important;
    border-radius: 26px;
    font-family: SofiaPro, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 17px !important;
    margin-top: 14px;
}

    .btn-default:hover, .btn-default:focus {
        color: var(--color-light-grey) !important;
        border-color: var(--color-blue) !important;
        background-color: var(--color-blue) !important;
        box-shadow: none !important;
    }

    .btn-default:active, .btn-default.active, .btn-default:visited, .btn-default:active:focus, .btn-default:active:hover {
        color: var(--color-light-grey) !important;
        border-color: #726d65 !important;
        background-color: #726d65 !important;
        box-shadow: none !important;
    }

.btn-danger {
    color: var(--color-light-grey) !important;
    background-color: #dc3545 !important;
    border-width: 1px;
    border-color: #dc3545 !important;
    border-radius: 26px;
    font-family: SofiaPro, Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 17px !important;
}

    .btn-danger:hover, .btn-danger:focus {
        color: var(--color-light-grey) !important;
        border-color: var(--color-blue) !important;
        background-color: var(--color-blue) !important;
        box-shadow: none !important;
    }

    .btn-danger:active, .btn-danger.active, .btn-danger:visited, .btn-danger:active:focus, .btn-danger:active:hover {
        color: var(--color-light-grey) !important;
        border-color: #726d65 !important;
        background-color: #726d65 !important;
        box-shadow: none !important;
    }

.payconiq-text-dark {
    color: var(--color-dark-grey);
}

.payconiq-text {
    color: #aea497;
}

.payconiq-text-footer {
    color: #aea497;
    text-align: center;
    margin-top: 10px;
}

.payconiq-pink {
    color: #ff4785;
}

.payconiq-error {
    color: #DF385D;
    font-size: 15px;
}

    /* Force all validators to use display:none when not showing an error */
    .payconiq-error[style*="visibility:hidden"] {
        visibility: visible !important; /* cancel out the inline style */
        display: none !important; /* actually hide the element */
    }


.payconiq-success {
    color: var(--color-dark-green) !important;
}

.payconiq-header {
    font-size: 20px;
    font-weight: 800;
    color: var(--color-pink);
}

.header-spacing {
    margin-top: 36px;
    margin-bottom: 36px;
}

.payconiq-logo-go-wrapper {
    margin-bottom: 3px;
}

.payconiq-logo-go {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-pink);
}

.payconiq-logo-for-business {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-blue);
}

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

.input-medium {
    height: 50px;
    font-size: medium;
}

.input-large {
    height: 50px;
    font-size: large;
}

/*qrcode popup*/
.payconiq-popup__header {
    background: rgb(255, 71, 133);
    background: -moz-linear-gradient(-68deg, rgb(252, 75, 134) 0%, rgb(252, 75, 134) 50%, rgb(237, 67, 114) 57%, rgb(237, 67, 114) 100%);
    background: -webkit-linear-gradient(-68deg, rgb(252, 75, 134) 0%, rgb(252, 75, 134) 50%, rgb(237, 67, 114) 57%, rgb(237, 67, 114) 100%);
    background: linear-gradient(-68deg, rgb(252, 75, 134) 0%, rgb(252, 75, 134) 57%, rgb(237, 67, 114) 51%, rgb(237, 67, 114) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb76b', endColorstr='#ff7f04', GradientType=1);
    height: 60px;
    position: relative;
}

.payconiq-popup__header__title {
    text-align: left;
    margin: 0 auto;
    padding: 15px;
    padding-left: 20px;
}

.payconiq-popup__header__btn {
    position: absolute;
    right: 20px;
    top: 20px;
    background-color: Transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    outline: none;
}

.topbanner {
    margin: auto;
    width: 100%;
    background-color: deeppink;
    height: 60px;
}

.center {
    font-family: SofiaProRegular;
    font-size: 20px;
    font-weight: bold;
    margin: auto;
    width: 88%;
    text-align: center;
    border: 2px solid #f5ede5;
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 10px;
    color: #726d65;
}

.centerstatus {
    font-size: 20px;
    margin: auto;
    width: 88%;
    text-align: center;
    border: 2px solid #f5ede5;
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 10px;
    color: #867f76;
}

.centered {
    margin: auto;
    margin-top: 14px;
    margin-bottom: 14px;
    width: 88%;
    text-align: center;
}

.qrcode {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 180px;
    height: 180px;
}

.statusicon {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80px;
    height: 80px;
}

.payconiq-qr__footer__btn--retry {
    display: block;
    margin: auto;
    width: 88%;
    padding: 14px 24px;
    border: 0 none;
    font-weight: 500;
    font-size: 140%;
    letter-spacing: 1px;
    background: #00cb75;
    font-size: 20px;
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: var(--color-white);
    letter-spacing: 1px;
}

.payconiq-qr__close-white {
    width: 80%;
    cursor: pointer;
    text-decoration: none;
    display: block;
    padding: 14px 0;
    border: 0 none;
    width: 100%;
    margin-top: 15px;
    font-weight: 500;
    font-size: 140%;
    letter-spacing: 1px;
    background: var(--color-white);
    font-size: 20px;
    font-style: normal;
    font-stretch: normal;
    text-align: center;
    color: #00cb75;
    letter-spacing: 1px;
}

.payconiq-qr__link__arrow {
    font-size: 24px;
}
/* The Modal (background) */
.modal {
    display: none;
    Hidden by default position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 0px;
    border: 0px;
    top: 200px;
    width: var(--modal-content-width);
    height: var(--modal-content-height);
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

@media (max-width: 768px) {
    .modal-content {
        top: 25px;
        width: var(--modal-content-height); /* Swap width and height */
        height: var(--modal-content-width);
    }
}

.statuschecker {
    display: none;
}


/* The Close Button */
.close {
    width: 0px;
    height: 0px;
    color: #aaaaaa;
    float: right !important;
    font-size: 28px;
    font-weight: bold;
}

    .close:hover,
    .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }

.mobileHoverFix:hover,
.mobileHoverFix.hover {
    background-color: white;
    color: #726d65;
    border-color: #726d65;
}

.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show > .btn-outline-secondary.dropdown-toggle {
    background-color: var(--color-light-grey);
    /*border-color: var(--color-light-grey);*/
    color: var(--color-blue);
}

.btn-outline-secondary:hover {
    background-color: white;
    color: #726d65;
    border-color: #726d65;
}


@media (max-width: 575.98px) {
    .sm-banner {
        height: 64px;
    }

    .amount-box {
        color: white !important;
    }

    .amount-box-unselected {
        color: #FFC5D9;
    }

    .svgfilterwhite {
        filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(130deg) brightness(106%) contrast(105%);
    }
}

@media (min-width: 576px) {
    .amount-box {
        color: var(--color-blue) !important;
    }

    .amount-box-unselected {
        color: #C9D0E0;
    }
}

.total-prefix {
    height: 16px;
}

.allowed-with-container {
    margin-top: 38px !important;
}

.amount-box {
    font-family: SofiaProRegular;
    font-size: 16px;
    margin-bottom: 0;
}

.amount-box-unselected {
    font-family: SofiaProRegular;
    font-size: 16px;
    margin-bottom: 0;
}

.amount-total {
    font-family: SofiaProRegular;
    font-size: 64px;
    margin-top: 50px;
}

.allowed-with {
    font-family: SofiaProRegular;
    font-size: 14px;
    color: #97928D;
}

.amount-mealvoucher-box {
    font-family: SofiaProRegular;
    font-size: 16px;
    color: var(--color-blue);
    margin-bottom: 0;
    display: flex;
    align-items: center;
}

.h-0 {
    height: 0px;
}


.amount-mealvoucher {
    font-size: 18px;
    font-weight: 800 !important;
    background-color: white;
    color: var(--color-blue);
    margin-left: auto;
    border-radius: 4px;
    border: 0px solid;
    width: 44px !important;
    height: 42px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    border: none !important;
}

    .amount-mealvoucher::placeholder {
        color: var(--color-blue) !important;
        opacity: 1;
    }

.amount-mealvoucher-wrapper {
    width: 80px;
    max-width: 100px;
}

.amount-mealvoucher-selected {
    border: 2px solid var(--color-blue);
}

.no-mealvoucher {
    font-size: 16px;
    margin-left: auto;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.meal-voucher-icon {
    margin-top: 10px;
}

.numpad {
    width: 280px;
}


.digit {
    font-family: SofiaProRegular !important;
    font-size: 20px;
    font-weight: bold;
    color: var(--color-blue);
    width: 64px !important;
    border: none;
    padding-top: 14px;
    padding-bottom: 14px;
}

.valid {
    color: var(--color-dark-green);
}

.invalid {
    color: var(--color-dark-red);
}

.hamburger {
    padding: 12px;
    background-color: white;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(0,0,0,.1);
    border-radius: 4px;
}

.hamburgernoborder {
    border-style: none;
    width: 320px;
}

.menuicon {
    margin-left: 2px;
    width: 40px;
    height: 40px;
}

.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

.menuitem {
    font-size: 16px;
    font-family: SofiaPro;
    font-weight: 500;
}

.menuitemicon {
    width: 40px;
    margin-right: 4px;
}

.menuitemicon-xs {
    vertical-align: baseline;
    width: 28px;
}

.menuitemicon-xs-smaller {
    vertical-align: baseline;
    width: 20px;
}

.menuitemicon-text-xs {
    color: rgba(0,0,0,.5);
}

.menuitem {
    height: 56px;
}

.menuitemtext {
    position: relative;
    top: 2px;
}

.nav-link {
    text-decoration: none;
}

.navbar-collapse {
    padding: 16px;
    box-shadow: 3px 3px 24px -3px rgba(0, 0, 0, 0.06);
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
}

.nav-item-divider {
    padding: 0px;
    margin: 4px 0px 4px 0px;
    border: 1px solid transparent;
}

.nav-item {
    margin: 4px 0px 4px 0px;
    padding-left: 12px;
    padding-right: 12px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    outline: none;
    border-radius: 16px !important;
    border: 1px solid transparent;
}

    .nav-item:hover,
    .nav-item:focus-within {
        background-color: white !important;
        border: 1px solid var(--color-light-pink) !important;
    }

    .nav-item:active {
        background-color: var(--color-pale-pink) !important;
        border: 1px solid var(--color-pale-pink) !important;
    }

    .nav-item a.nav-link {
        display: block;
        outline: none;
        text-decoration: none;
        border-radius: 16px;
    }

.nav-item-active {
    background-color: var(--color-pale-pink);
    border: 1px solid var(--color-light-pink) !important;
}

.nav-item-inactive {
    border: 1px solid white !important;
    border-radius: 16px !important;
}

.nav-item-footer {
    margin: 4px 0px 4px 0px;
    padding-left: 12px;
    padding-right: 12px;
    outline: none;
    border: 1px solid transparent;
}

.menuitemactive {
    color: var(--color-pink) !important;
}

.menuiteminactive {
    color: var(--color-blue) !important;
}

    .menuiteminactive:hover,
    .menuiteminactive:focus {
        color: var(--color-pink) !important;
    }

.menuiteminactive-dark-grey {
    color: var(--color-dark-grey) !important;
}

.menuiteminactive-pink {
    color: var(--color-pink) !important;
}

/*https://stackoverflow.com/a/53336754*/
.svgfilteractive {
    filter: invert(37%) sepia(92%) saturate(5131%) hue-rotate(319deg) brightness(104%) contrast(101%);
}

.svgfilterinactive {
    filter: invert(9%) sepia(55%) saturate(5085%) hue-rotate(224deg) brightness(91%) contrast(102%);
}

.collapse-inner {
    max-width: 382px;
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.navlayout {
    background-position: top;
    padding-left: 0px;
    z-index: 2;
    max-width: 367px;
    min-height: 800px;
}

.navlayouthidden {
    background-position: top;
    padding-left: 0px;
    z-index: 1;
    max-width: 1px;
    min-height: 1px;
    height: 1px;
}

@media (max-width: 399px) {
    .collapsegradient {
        background-color: white;
        background-size: 400px 2000px;
    }
}

@media (min-width: 400px) {
    .collapsegradient {
        background-image: url(/images/shadow.png);
        background-size: 400px 2000px;
    }
}

.navigation {
}

@media (max-width: 1px) {
    .collapsegradient {
        background-image: none;
        background-color: white;
    }

    .navigation {
        padding: 0px;
    }

    .collapse-inner {
        max-width: 100%;
    }

    .hamburgernoborder {
        width: 100%;
    }
}

@media (min-width: 1200px) {
    .collapse-inner.show {
        display: block !important;
        visibility: visible !important;
    }
}

.menuprofiletext {
    font-size: 16px;
    font-family: SofiaProBold;
    color: #042069;
    text-align: center;
}

.menuprofile-img {
    max-height: 64px;
    max-width: 100%;
}

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


.menu-footer {
    width: 320px;
}

.menu-footer-mobile {
    position: fixed;
    bottom: 0px;
}

.behind {
    /*position: absolute;
    bottom: 40px;*/
}

.nav-font-large {
    font-size: large;
    border-width: 0px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.font-smaller {
    font-size: 16px !important;
    /*    font-size: 0.9em;*/
}

.font-extra-small {
    font-size: 0.8em;
}

#transactionstable td img, #transactionstable td {
    vertical-align: middle;
}

/*.details-scroll {
    max-height: calc(100vh - 1px);
    overflow-y: auto;
}
*/
.menucontainer {
    max-width: 382px;
}

.mobilefooter {
    max-width: 100%;
}

/* date picker*/
.datepicker table tr td.today, .datepicker table tr td.today:hover, .datepicker table tr td.today.disabled, .datepicker table tr td.today.disabled:hover {
    background-image: linear-gradient(to bottom, #eee, #eee) !important;
}

.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
    background-color: #ff4785;
    background-image: linear-gradient(to bottom, #ff4785, #ff4785) !important;
    color: #fff !important;
}

.datepicker-group {
    width: 165px;
}

.table-condensed {
    width: 250px;
    height: 250px;
}

/* radio buttons */
.radio-wrapper input[type="radio"] {
    width: 15px;
}

.radio-wrapper label {
    display: inline;
    margin-right: 5px;
}

.payconiq-link {
    color: var(--color-blue);
}

/* old GO payment frame */

.modal-container {
    align-items: center;
    justify-content: center;
}

.frame-transparent {
    background-color: transparent;
}

.payconiq-go-paymentframe {
    background-repeat: no-repeat;
    background-image: url('/images/ArtboardQR.png');
    background-size: 320px;
    height: 630px;
    position: relative;
    top: 7px;
}

.payconiq-go-paymentframe-topspace {
    top: 7px;
}

.payconiq-go-paymentframe-amount {
    color: var(--color-white);
    font-family: SofiaProBold !important;
    font-size: 24px;
    position: relative;
    top: 96px;
}

.payconiq-go-paymentframe-headertext {
    color: var(--color-white);
    font-family: SofiaProBold;
    font-size: 22px;
    font-weight: 500;
    position: relative;
    top: 10px;
    min-height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.payconiq-go-paymentframe-button-grey {
    background-color: #d5d3d0;
}

.payconiq-go-paymentframe-button-pink {
    background-color: #ff4785;
}

.payconiq-go-paymentframe-button-green {
    background-color: #00cb75;
}

.payconiq-go-paymentframe-button {
    color: var(--color-white);
    font-family: SofiaProBold !important;
    font-size: 22px;
    font-weight: 500;
    position: relative;
    top: 308px;
    min-width: 257px;
    min-height: 60px;
    border-radius: 15px;
}


.payconiq-go-paymentframe-qr {
    margin-left: auto;
    margin-right: auto;
    width: 200px;
    height: 200px;
    position: relative;
    top: 113px;
}

.payconiq-go-paymentframe-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 22px;
    padding-right: 22px;
    position: relative;
    top: 185px;
}

.payconiq-go-paymentframe-logo-qr-sticker {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 208px;
}

/*acc popover frame */
.go-modalframe {
    background-color: white;
    border-radius: 20px;
    height: var(--modal-content-height);
    width: var(--modal-content-width);
    position: relative;
    top: 7px;
}

@media (max-width: 768px) {
    .go-modalframe {
        width: var(--modal-content-height); /* Swap width and height */
        height: var(--modal-content-width);
    }
}

.go-modalframe-icon-pink-padding {
    background-color: var(--color-pink);
    border-radius: 15px;
    top: 5px;
    left: 5px;
    max-height: var(--modal-content-icon-height);
    max-width: var(--modal-content-icon-width);
    padding: 56px 51px 51px 56px;
}

.go-modalframe-icon-pink {
    background-color: var(--color-pink);
    border-radius: 15px;
    top: 5px;
    left: 5px;
    max-height: var(--modal-content-icon-height);
    max-width: var(--modal-content-icon-width);
    padding: 0px;
}

.go-modalframe-icon-orange {
    background-color: var(--color-orange);
    border-radius: 15px;
    top: 5px;
    left: 5px;
    max-height: var(--modal-content-icon-height);
    max-width: var(--modal-content-icon-width);
    padding: 0px;
}

.go-modalframe-icon-green {
    background-color: var(--color-dark-green);
    border-radius: 15px;
    top: 5px;
    left: 5px;
    max-height: var(--modal-content-icon-height);
    max-width: var(--modal-content-icon-width);
    padding: 0px;
}

.go-modalframe-text-content {
    background-color: transparent;
    color: var(--color-blue);
    border-radius: 15px;
    padding-right: 0px;
    height: var(--modal-content-icon-height);
    width: var(--modal-content-icon-width);
    position: relative;
}

.go-modalframe-qr-text-content {
    background-color: transparent;
    color: var(--color-blue);
    border-radius: 15px;
    padding-right: 0px;
    height: var(--modal-content-icon-height);
    width: var(--modal-content-icon-width);
    position: relative;
    padding: 0px 16px 0px 31px;
}

@media (max-width: 767px) {
    .go-modalframe-qr-text-content {
        padding-left: 20px;
    }
}

.subheader-margin {
    margin-bottom: 36px !important;
}

.settings-qr-icon {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
}

.icon-display-active {
    display: block;
}

.icon-display-inactive {
    display: none;
}

.go-settings-screen-active {
    background-color: var(--color-pink);
    color: var(--color-white);
    border-start-start-radius: 15px;
    border-end-start-radius: 15px;
    padding: 40px;
    cursor: pointer;
}

.go-settings-screen-inactive {
    background-color: var(--color-light-blue);
    color: var(--color-dark-grey);
    border-start-start-radius: 15px;
    border-end-start-radius: 15px;
    padding: 40px;
    cursor: pointer;
}

.go-settings-sticker-active {
    background-color: var(--color-pink);
    color: var(--color-white);
    border-start-end-radius: 15px;
    border-end-end-radius: 15px;
    padding: 40px;
    cursor: pointer;
}

.go-settings-sticker-inactive {
    background-color: var(--color-light-blue);
    color: var(--color-dark-grey);
    border-start-end-radius: 15px;
    border-end-end-radius: 15px;
    padding: 40px;
    cursor: pointer;
}

@media (max-width: 767px) {
    .go-settings-screen-active {
        border-end-start-radius: 0;
        border-start-end-radius: 15px;
    }

    .go-settings-screen-inactive {
        border-end-start-radius: 0;
        border-start-end-radius: 15px;
    }

    .go-settings-sticker-active {
        border-start-end-radius: 0;
        border-end-start-radius: 15px;
    }

    .go-settings-sticker-inactive {
        border-start-end-radius: 0;
        border-end-start-radius: 15px;
    }
}



.go-modalframe-headertext {
    font-size: 20px;
    font-weight: 800;
    position: absolute;
    left: 0px;
    top: 30px;
    width: 100%;
}

.go-modalframe-amount {
    color: var(--color-blue);
    font-size: 56px;
    font-weight: 400;
    position: absolute;
    left: 0px;
    top: 50px;
    width: 100%;
}

.go-modalframe-logo-message {
    color: var(--color-blue);
    font-size: 15px;
    font-weight: 400;
    position: absolute;
    left: 0px;
    top: 150px;
    width: 100%;
}

.go-modalframe-payment-logo {
    position: absolute;
    left: 24px;
    top: 180px;
    width: 300px;
}

.go-modalframe-button {
    position: absolute;
    left: 104px;
    top: 270px;
    width: 140px;
}

.go-modalframe-button-left {
    position: absolute;
    left: 31px;
    top: 270px;
    width: 120px;
}

@media (max-width: 767px) {
    .go-modalframe-button-left {
        left: 20px;
    }
}

.go-modalframe-button-wide-left {
    position: absolute;
    left: 31px;
    top: 270px;
    width: 160px;
}

.go-modal-paymentframe-qr {
    margin: 5px;
    width: 208px;
    height: 208px;
    position: relative;
    border: 15px solid white;
    border-radius: 15px;
}

.go-modal-paymentframe-status-image {
    margin: 0px;
    padding: 0px;
    width: var(--modal-content-icon-width);
    height: var(--modal-content-icon-height);
    position: relative;
}

.go-modal-linkeddevices-qr {
    margin: 10px;
    padding: 0px;
    border-radius: 15px;
    width: var(--modal-content-qr-width);
    height: var(--modal-content-qr-height);
    position: relative;
}

/* onboarding */
.wizardbutton {
    width: 200px;
}

/* hide spinner for number field */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* settings */
.productswitchactive {
    background-color: #ff4785;
    border-radius: 15px;
    padding: 10px;
    min-height: 138px;
    color: var(--color-white);
    cursor: pointer;
}

.productswitchinactive {
    background-color: #fcf8f5;
    border-radius: 15px;
    padding: 10px;
    min-height: 138px;
    color: #726d69;
    cursor: pointer;
}


.productswitchheader {
    font-size: 18px;
    font-weight: 500;
    padding-bottom: 4px;
}

.productswitchtext {
    font-size: 16px;
    font-weight: 400;
}

.productswitchimage {
    width: 100px;
    height: 100px;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
}

.productswitchselection {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
}

/* linkeddevices */

.linkeddevicesroleicon {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
}

.linkeddevice-icon {
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
    cursor: pointer;
}

.linkeddevicecontainer {
    font-family: SofiaPro;
    border-radius: 15px;
}

.linkeddevicename {
    color: var(--color-blue);
    font-family: SofiaPro;
    font-size: 16px;
}

.header-linkeddevice {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-blue);
}

.content-linkeddevice {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-blue);
}

.btn-linkeddevice-status {
    display: inline-block;
    border-radius: 32px;
    font-size: 12px;
    padding: 3px 12px;
}

.btn-linkeddevice-status-active {
    background: var(--color-light-green);
    color: var(--color-dark-green);
}

.btn-linkeddevice-status-pending {
    background: var(--color-light-red);
    color: var(--color-dark-red);
}

.btn-add-linkeddevice {
    width: 108px;
    height: 38px;
    font-weight: 400;
    display: inline-block;
    white-space: nowrap;
    background: #E7EBF6;
    border: none;
    border-radius: 32px;
    font-size: 15px;
    color: var(--color-blue);
    padding: 3px 12px;
}

.modal-addframe {
    align-items: center;
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 50px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    /*overflow: auto;*/ /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.7); /* Black w/ opacity */
}

.modal-content-addframe {
    background-color: transparent;
    margin: auto;
    padding: 0px;
    border: 0px;
    width: 360px;
    height: 510px;
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 0px !important;
}

.addframe {
    background-repeat: no-repeat;
    background-color: white;
    border-radius: 15px;
    /*    background-image: url('/images/add-background.png');
    background-size: 480px;
    width: 480px;*/
    /*height: 510px;*/
    position: relative;
    top: 7px;
}

.modal-container-addframe .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-close-icon {
    width: 14px;
    height: 14px;
    margin-left: 10px;
    margin-right: 10px;
    display: block;
    cursor: pointer;
}

.onboarding-qr {
    width: 80%;
    display: block;
    margin: 0 auto;
}

.device-intro {
    font-size: 0.8em;
    color: var(--color-dark-grey);
}

/* acc design */

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

.form-group {
    margin-bottom: 16px;
}

label {
    font-weight: 500;
    font-size: 15px;
    margin-bottom: 3px;
}

a {
    font-size: 15px;
    color: var(--color-dark-grey) !important;
    text-decoration: underline;
}

    a:hover, a:focus, a:active {
        text-decoration: underline;
    }


/* Default - Textbox & Dropdown */
.input-group .form-control {
    height: 48px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 135%;
    color: var(--color-blue);
    border: 1px solid #B6BDD1;
    border-radius: 5px;
    padding: 12px 16px;
}

.go-input {
    height: 48px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 135%;
    color: var(--color-blue);
    border: 1px solid #B6BDD1;
    border-radius: 5px;
    padding: 12px 16px;
}

/* Placeholder */
.form-control::placeholder {
    color: #7E869C;
}

/* Focus - Applies to both Textbox & Dropdown */
.input-group .form-control:focus {
    border-color: var(--color-blue);
    box-shadow: none;
}

/* Error - Applies to both */
.input-group.error .form-control {
    border: 1px solid #C8102E;
}

.error-message {
    color: var(--color-dark-red);
    font-size: 14px !important;
    margin-top: 4px;
}

.success-message {
    color: var(--color-dark-green) !important;
    font-size: 14px !important;
    margin-top: 4px;
}

/* Inactive */
.input-group .form-control:disabled {
    background: #F3F4F6;
    border: 1px solid #F3F4F6;
    color: var(--color-blue) !important;
    opacity: 1;
}

/* Dropdown-Specific Styling */
.input-group select.form-control,
select.form-control {
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%230B2265" d="M7 9l5 6 5-6H7z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px;
    padding-right: 40px;
}

    /* Error - Dropdown Arrow Turns Red */
    .input-group.error select.form-control,
    select.form-control.error {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23C8102E" d="M7 9l5 6 5-6H7z"/></svg>');
    }

.language-selector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
    padding: 11px 10px 11px 10px;
    font-weight: 500;
    margin-top: 68px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: white;
    cursor: pointer;
}

    .language-selector:focus,
    .language-selector:active,
    .language-selector:hover {
        border-color: var(--color-blue) !important;
        background: white !important;
        box-shadow: none !important;
    }


.selected-flag {
    margin-left: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.dropdown-menu {
    width: 320px;
}

.dropdown-item {
    padding-left: 14px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.helpcontact {
    display: flex;
    align-items: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
}

    .helpcontact img {
        height: 22px;
        width: 22px;
        margin-right: 8px;
    }

@media (min-width: 576px) {
    .roundedframe {
        border: 1px solid var(--color-shading-grey);
        border-radius: 30px !important;
        padding: 39px;
        box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    }
}

@media (max-width: 575.98px) {
    .container-padding {
        padding: 0px 5px 0px 5px;
    }

    .mobile-full-width {
        width: 100% !important;
    }
}

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

.a-back {
    padding-bottom: 17px;
    min-height: 45px !important;
}

.link-to-button {
    padding-bottom: 14px;
}

/* Custom Progress Bar */
.progress-container {
    width: 100%;
    margin-top: 6px;
    margin-bottom: 23px;
}

.progress {
    height: 6px;
    background-color: var(--color-light-blue);
    border-radius: 5px;
}

.progress-bar-purple {
    background-color: var(--color-pink);
    height: 6px;
    border-radius: 5px;
}

.static-card {
    background-color: var(--color-light-blue);
    border-radius: 8px;
    padding: 8px 12px 8px 12px;
    margin: 10px 0px 16px 0px;
    font-family: SofiaPro, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s ease, border 0.2s ease;
}

.static-card-body {
    color: var(--color-dark-grey);
    font-size: 15px;
    font-weight: 400;
}

.clickable-card {
    background-color: var(--color-light-blue);
    border-radius: 20px;
    padding: 20px 27px 20px 20px;
    margin-top: 10px;
    font-family: SofiaPro, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border 0.2s ease;
}

    .clickable-card:focus,
    .clickable-card:focus-within {
        outline: 1px solid var(--color-blue);
        outline-offset: 3px;
    }

    .clickable-card:active {
        background-color: var(--color-medium-blue);
        border: none;
        outline: none;
    }

.arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--color-blue);
    border-bottom: 2px solid var(--color-blue);
    transform: rotate(-45deg);
    flex-shrink: 0;
}

.clickable-card-title {
    padding-bottom: 8px;
    color: var(--color-blue);
    font-size: 18px;
    font-weight: 500;
}

.clickable-card-body {
    color: var(--color-dark-grey);
    font-size: 16px;
    font-weight: 400;
}

.custom-divider {
    border: none;
    border-top: 1px solid var(--color-divider-grey);
    margin: 20px 0 20px 0;
}

.cursor-pointer {
    cursor: pointer !important;
}

.header-text {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-blue);
}

.payment-frame {
    background-color: var(--color-pink);
    border-radius: 30px 30px 0px 0px;
    border: 1px solid var(--color-pink);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    min-width: var(--payment-frame-width);
    max-width: var(--payment-frame-width);
}

.payment-frame-title {
    color: white;
    font-size: 18px;
    font-weight: 800;
    margin-top: 100px;
    width: 100%;
}

.payment-frame-amount {
    color: white;
    font-size: 54px;
    font-weight: 500;
    padding-bottom: 19px;
    padding-left: 70px; /*45px;*/
    padding-right: 15px;
}

.amount {
    font-size: 54px;
    background-color: var(--color-pink) !important;
    color: white !important;
    border-radius: 0px;
    color: white;
    margin-left: auto;
    border: 0px solid !important;
    height: 85px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-left: 0px !important;
    border: none !important;
}

    .amount:focus {
        outline: none !important;
        border: none !important;
        box-shadow: none !important;
    }

    .amount::placeholder {
        color: white;
        opacity: 1;
    }

.payment-prepend {
    border: 0px solid !important;
    font-size: 54px;
    font-weight: 500;
    background-color: var(--color-pink);
    border-radius: 0px;
    color: white;
    width: 60px;
    padding-top: 2px;
}

.payment-mealvoucher-container {
    margin-top: 32px;
    margin-bottom: 20px;
    padding-left: 39px !important;
    padding-right: 39px !important;
}

.payment-mealvoucher-icon {
    width: 28px;
    display: block;
    margin-right: 8px;
}

.payment-mealvoucher-title {
    color: white;
    font-size: 16px;
    font-weight: 800;
}

.payment-mealvoucher-prepend {
    border: none;
    font-size: 18px;
    font-weight: 800;
    background-color: white;
    color: var(--color-blue);
    width: 28px;
    padding-top: 6px;
}

.payment-top-pink-strip {
    background: linear-gradient(var(--color-pink) 0px, var(--color-pink) 40px, transparent 40px);
}

.payment-description-frame {
    background-color: white;
    border-radius: 20px 0px 30px 30px;
    border-top: 0px solid var(--color-shading-grey);
    border-right: 1px solid var(--color-shading-grey);
    border-bottom: 1px solid var(--color-shading-grey);
    border-left: 1px solid var(--color-shading-grey);
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    min-width: var(--payment-frame-width);
    max-width: var(--payment-frame-width);
}

.payment-description {
    padding-left: 39px !important;
    padding-right: 39px !important;
    padding-top: 50px !important;
    padding-bottom: 39px !important;
}

.transactions-none-image {
    width: 239px;
    height: 153.5px;
}

.transactions-today-datetime {
    font-size: 15px;
    font-weight: 400;
}

.transactions-today-amount {
    font-size: 18px;
    font-weight: 800;
}

.transactions-today-status {
    font-size: 15px;
    font-weight: 500;
}

.transactions-today-header {
    font-size: 18px;
    font-weight: 800 !important;
    color: var(--color-blue);
    padding-top: 25px;
}

.transactions-today-text {
    font-size: 16px;
    padding-top: 10px;
}

.transactions-today-name {
    font-size: 18px;
    font-weight: 500 !important;
    color: var(--color-blue);
}

.transactions-today-row {
    border-bottom: 1px solid #e9ecef;
    padding: 16px 0;
}

.transactions-today-succeeded {
    color: var(--color-dark-green);
}

.transactions-today-failed {
    color: var(--color-dark-red);
}

.transactions-today-other {
    color: var(--color-dark-grey);
}

.transactions-today-type-icon-wrapper {
    width: 32px;
    height: 16px;
    padding-right: 8px;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}

.transactions-today-type-icon {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

.transactions-today-status-text {
    line-height: 16px;
    vertical-align: middle;
    display: inline-block;
}

.transactions-today-status-icon {
    height: 16px;
    padding-left: 4px;
    padding-right: 4px;
}

.transactions-subheader {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-blue);
}

.transactions-subtext {
    font-size: 16px;
    font-weight: 400;
}

/* Custom styling for larger toggle switch */
.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::before {
    border-radius: 20px;
    background-color: var(--color-dark-green);
}

.custom-switch-lg .custom-control-input ~ .custom-control-label::before {
    border-radius: 20px;
    width: 3rem;
    height: 1.50rem;
}

.custom-switch-lg .custom-control-input ~ .custom-control-label::after {
    border-radius: 20px;
    top: 0.4rem;
    width: 1.2rem;
    height: 1.2rem;
}

.custom-switch-lg .custom-control-input:checked ~ .custom-control-label::after {
    border-radius: 20px;
    transform: translateX(1.5rem);
}

/* Hide native radio buttons */
.custom-radio-group input[type="radio"] {
    display: none;
}

/* Radio label with text beside the icon */
.format-option {
    position: relative;
    padding-left: 40px; /* space for icon */
    margin-right: 20px;
    font-weight: 500;
    line-height: 32px;
    cursor: pointer;
}

    /* Add icon before the text */
    .format-option::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 32px;
        height: 32px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    /* Default icon (unchecked) */
    .format-option.excel::before,
    .format-option.pdf::before {
        background-image: url('/images/icons/radio-button-unchecked.png');
    }

/* Checked icon override */
#formatExcel:checked + .excel::before {
    background-image: url('/images/icons/radio-button-checked.png');
}

#formatPdf:checked + .pdf::before {
    background-image: url('/images/icons/radio-button-checked.png');
}

.closing-time {
    font-size: 18px;
    font-weight: 800 !important;
    background-color: var(--color-light-blue);
    color: var(--color-blue);
    margin-left: auto;
    border-radius: 4px;
    border: 0px solid;
    width: 94px !important;
    height: 36px !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
    border: none !important;
}

    .closing-time::placeholder {
        color: var(--color-blue) !important;
        opacity: 1;
    }

.closing-time-wrapper {
    width: 80px;
    max-width: 100px;
}

.closing-time-selected {
    border: 2px solid var(--color-blue);
}