:root {
    --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: white;
    --color-faded-text: #BDB8B1;
    --color-light-green: #DDF9ED;
    --color-dark-green: #006138;
    --color-light-red: #FFF0F2;
    --color-dark-red: #CF0833;
    --color-orange: #FDA300;
    --color-primary: #0B2265;
    --color-secondary: #0439D1;
    --modal-content-width: 800px;
    --modal-content-height: 400px;
    --modal-content-icon-width: 400px;
    --modal-content-qr-width: 300px;
    --modal-content-qr-height: 300px;
    /*  --payment-frame--min-width: 360px;
    --payment-frame--max-width: 45px;*/
}

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

html, body {
    height: 100%;
    margin: 0;
}

#main {
    height: 100%;
}

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: SofiaProBold;
    font-style: normal;
    font-weight: 700;
    src: url("/fonts/SofiaProBold.woff2") format("woff2"),url("/fonts/SofiaProBold.woff") format("woff")
}

.btn-default {
    color: var(--color-blue) !important;
    background-color: var(--color-white) !important;
    border-width: 1px;
    border-color: var(--color-blue) !important;
    border-radius: 26px;
    font-family: SofiaPro, Helvetica, Arial, sans-serif;
    font-weight: 700;
    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;
    }

.bcp-pro-header {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--color-primary);
    font-family: SofiaProBold;
    line-height: 110%;
}

.bcp-pro-labels {
    color: #38393D;
}

.btn-primary {
    color: var(--color-white);
    background-color:  var(--color-secondary);
    border-radius: 40px;
    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;
    border: none;
}

    .btn-primary:hover {
        border: none;
        color: var(--color-white);
        background-color:  var(--color-secondary);
    }

    .btn-primary:focus {
        color: var(--color-white);
        border: none;
        background-color:  var(--color-secondary);
        outline: none;
        box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px  var(--color-secondary);
    }

    .btn-primary:disabled,
    .btn-primary.disabled {
        background-color: #F2F3F5;
        color: #C3C5C9;
        border: none;
    }

    .btn-primary:active {
        background-color: var(--color-primary) !important;
        color: var(--color-white) !important;
        border: none;
    }

.btn-secondary {
    color:  var(--color-secondary);
    background-color: #F2F3F5;
    border-radius: 40px;
    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;
    border: none;
}

    .btn-secondary:hover {
        border: none;
        color:  var(--color-secondary);
        background-color: #F2F3F5;
    }

    .btn-secondary:focus {
        color:  var(--color-secondary);
        border: none;
        background-color: #F2F3F5;
        outline: none;
        box-shadow: 0 0 0 1px var(--color-white), 0 0 0 2px  var(--color-secondary);
    }

    .btn-secondary:disabled,
    .btn-secondary.disabled {
        background-color: #F2F3F5;
        color: #C3C5C9;
        border: none;
    }

    .btn-secondary:active {
        background-color: #E6E7EB !important;
        color: #C3C5C9 !important;
        border: none;
    }

.flag-icon {
    aspect-ratio: 1 / 1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    display: inline-block;
    vertical-align: 0.15em;
}

.clickable-card {
    background-color: #F2F3F5;
    border-radius: 20px;
    padding: 20px;
    margin-top: 10px;
    font-family: SofiaPro, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.2s ease, border 0.2s ease;
    flex-direction: row;
    gap: 24px;
}

.clickable-card-title {
    font-family: SofiaPro;
    font-weight: 500;
    color: var(--color-primary);
}

.clickable-card-body {
    font-family: SofiaPro;
    font-weight: 400;
    line-height: 140%;
    color: #57595F;
}

.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;
}

.helpcontact {
    color: var(--color-primary);
    line-height: 140%;
    font-weight: 500;
    display: flex;
    align-items: center;
    text-decoration: none;
}

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

.static-card-body {
    color: #38393D;
    font-weight: 400;
    line-height: 140%;
}

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

.bcp-pro-logo-wrapper {
    font-family: SofiaProBold;
    color: var(--color-white);
    font-size: 48px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
    margin-top: 1em;
}

.bcp-pro-for-business {
    display: block;
    font-weight: bold;
}

#left-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%
}

#language-picker {
    justify-self: start;
    align-self: start;
    margin: 1em 0 0 1.5em;
}

#right-form {
    background: linear-gradient(180deg, #009CFF 0%, #043FD4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
}

#left-form_flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.dropdown-toggle::after {
    content: url('/images/BancontactPro/icons/chevron-down.png');
    display: inline-block;
    margin-left: 0.5rem;
    width: 1rem;
    height: 1rem;
    border: none;
    margin-top: -0.65em;
}

.dropdown.show .dropdown-toggle::after {
    content: url('/images/BancontactPro/icons/chevron-up.png');
}

.form-control {
    color: var(--color-primary);
    border: 1px solid #E6E7EB;
}

option:not(:disabled) {
    color: var(--color-primary);
}

/* General toast style */
.toast {
    border-radius: 12px !important;
    padding: 16px 20px !important;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    opacity: 1 !important;
    background-image: none !important;
}

/* Success style */
.toast-success {
    background-color: #DDF9ED !important;
    color: #098550 !important;
    border: 1px solid #098550 !important;
}

/* Error style */
.toast-error {
    background-color: #FCF0F3 !important;
    color: #CF0833 !important;
    border: 1px solid #CF0833 !important;
}

/* Info style */
.toast-info {
    background-color: #3490dc !important;
    color: #ffffff !important;
}

/* Warning style */
.toast-warning {
    background-color: #f6993f !important;
    color: #ffffff !important;
}

.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: var(--color-white);
    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: 800px;
    /*height: var(--modal-content-height);*/
    -webkit-border-radius: 0px !important;
    -moz-border-radius: 0px !important;
    border-radius: 15px !important;
}

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

.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: var(--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: var(--color-white);
    color: #726d65;
    border-color: #726d65;
}


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

    .amount-box {
        color: var(--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: var(--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: var(--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;
}

.navbar-toggler {
    padding: .25rem 1.25rem;
}

    .menuitem {
        font-size: 16px;
        font-family: SofiaPro;
        font-weight: 500;
        height: 56px;
        width: 100% !important;
        display: flex !important;
    }

.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);
}

.menuitemtext {
    position: relative;
    margin-left: 0.5rem;
    width: 100%;
}

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

.payment-container {
    border-radius: 35px;
    box-shadow: 3px 3px 24px -3px rgba(0, 0, 0, 0.12);
}

.navbar-collapse {
    padding: 1.5rem 0;
    padding-left: 0.5rem;
    box-shadow: 3px 3px 24px -3px rgba(0, 0, 0, 0.12);
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    background-color: var(--color-white);
}

.nav-item-divider {
    padding: 0px;
    margin: 0px 0px 0px 0px;
    border: 1px solid var(--color-white);
}

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

.nav-item-with-icon {
    color: var(--color-primary) !important;
}

    .nav-item-with-icon:hover {
        color:  var(--color-secondary) !important;
    }

.menu-item-logout-icon {
    color: #CF0833 !important;
}

.menu-item-logout {
    color: #CF0833 !important;
}

.menu-item-logout-icon:hover {
    color: #dc3545 !important;
}

.menu-item-icon {
    width: 25%;
}

button.navbar-toggler img.menuicon {
    transition: transform 0.3s ease;
}

button.navbar-toggler.open img.menuicon {
    transform: rotate(90deg);
}

button.navbar-toggler.collapsed img.menuicon {
    transform: rotate(0deg);
}

.nav-item-logout {
    color: #CF0833 !important;
    margin: 0.25em 0px 0.25em 0px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    outline: none;
    border-radius: 16px !important;
    border: 1px solid var(--color-white);
    display: flex;
}

    .nav-item-logout:hover {
        color: #dc3545 !important;
        border: 1px solid var(--borders-primary, #dc3545) !important;
    }


.nav-item {
    margin: 0.25em 0px 0.25em 0px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    outline: none;
    border-radius: 16px !important;
    border: 1px solid var(--color-white);
    display: flex;
}

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

    .nav-item:active {
        background-color: #F5F8FF !important;
        border: 1px solid var(--borders-primary,  var(--color-secondary)) !important;
    }

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

.nav-item-active {
    background-color: #F5F8FF !important;
    border: 1px solid var(--borders-primary,  var(--color-secondary)) !important;
}

.nav-item-inactive {
    border: 1px solid var(--color-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 var(--color-white);
}

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

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

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

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

.menuiteminactive-pink {
    color:  var(--color-secondary) !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: var(--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: var(--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-white {
    background-color: var(--color-white);
}

.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: var(--color-white);
    border-radius: 20px;
}

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

.go-modalframe-icon {
    background-image: linear-gradient(180deg, #019CFF 0%, #0449D8 100%);
    border-radius: 15px;
    width: 100%;
    height: 100%;
}

.go-modalframe-icon-pink {
    border-radius: 15px;
    max-width: var(--modal-content-icon-width);
    display: flex;
    width: 50% !important;
    justify-content: center;
    align-items: center;
}

.go-modalframe-linkeddevices-share {
    border-radius: 15px;
    max-width: var(--modal-content-icon-width);
    display: flex;
    width: 50% !important;
    justify-content: center;
    align-items: center;
}

.go-modalframe-icon-orange {
    background-image: linear-gradient(180deg, #019CFF 0%, #0449D8 100%);
    border-radius: 15px;
}

.go-modalframe-icon-green {
    background-image: linear-gradient(180deg, #019CFF 0%, #0449D8 100%);
    border-radius: 15px;
    top: 5px;
    left: 5px;
    max-width: var(--modal-content-icon-width);
    padding: 0px;
}

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

.go-modalframe-qr-text-content {
    background-color: var(--color-white);
    color: var(--color-blue);
    border-radius: 15px;
    display:flex;
    flex-direction: column;
    width: 50%;
    padding: 1em !important;
    justify-content: space-between;
}

#imgStatus {
    width: 95% !important;
    height: 95% !important;
    background: linear-gradient(180deg, #019CFF 0%, #0449D8 100%);
    border-radius: 15px;
}

.subheader-margin {
    margin-bottom: 1rem !important;
    display: flex;
    flex-direction: column;
}

.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-secondary);*/
    color: var(--color-white);
    border-start-start-radius: 15px;
    border-end-start-radius: 15px;
    padding: 40px;
    cursor: pointer;
    background-image: linear-gradient(270deg, #019CFF 0%, #0449D8 100%);
}

.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-secondary);*/
    color: var(--color-white);
    border-start-end-radius: 15px;
    border-end-end-radius: 15px;
    padding: 40px;
    cursor: pointer;
    background-image: linear-gradient(90deg, #019CFF 0%, #0449D8 100%);
}

.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 {
    text-transform: uppercase;
    font-size: xx-large;
    font-weight: 800;
    color: var(--color-primary);
    font-family: SofiaProBold;
    line-height: 110%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.go-modalframe-amount {
    color: var(--color-primary);
    font-size: 56px;
    font-weight: 400;
    text-transform: uppercase;
}

#payment-amount-input {
    width: 42.5% !important;
}

#qrStickerPayment_LeftPanel {
    width: 380px;
    height: 380px;
    background-image: url('../../images/BancontactPro/icons/qrsticker_image.png'), linear-gradient(180deg, #019CFF 0%, #0449D8 100%);
    background-size: 90%, cover;
    background-position: center;
    background-repeat: no-repeat;
}

.go-modalframe-logo-message {
    color: var(--color-primary);
    font-size: larger;
    font-weight: 400;
    text-align: center !important;
    padding: 1em 1em 0 1em;
}

.go-modalframe-payment-logo {
    width: 300px;
}

/*.go-modalframe-button {
    width: 175px;
}*/

.go-modalframe-button-left {
    margin-top: 4rem;
}

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

.go-modal-paymentframe-qr {
    margin: 5px;
    width: 240px;
    height: 240px;
    position: relative;
    border: 15px solid var(--color-white);
    border-radius: 15px;
    background-color: var(--color-white);
}

.go-modal-linked-devices-image {
    width: 90%;
}

.go-modal-linkeddevices-qr {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4em 0;
}

#linked-devices-qr {
    width: 75% !important;
    border-radius: 15px;
}

/* 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 {
    margin-left: 10px;
    margin-right: 10px;
    display: block;
    cursor: pointer;
}

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

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


.header-linkeddevice {
    font-size: 1.5em;
    font-weight: 800;
    color:  var(--color-secondary);
}

.header-linkeddevice-modal {
    font-size: 1.5em;
    font-weight: 800;
    color: var(--color-primary);
}

.header-transaction-history {
    font-size: 18px;
    font-weight: 800;
    color: var(--color-primary);
}

.subheader-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: rgba(221, 249, 237, 1);
    color: rgba(9, 133, 80, 1);
}

.btn-linkeddevice-status-pending {
    background: rgba(242, 243, 245, 1);
    color: rgba(195, 197, 201, 1);
}

.btn-add-linkeddevice {
    width: 108px;
    height: 38px;
    font-weight: 400;
    display: inline-block;
    var(--color-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: var(--color-white);
    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: var(--color-white);
    border-radius: 15px;
    position: relative;
    top: 7px;
}

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

.add-close-icon {
    width: 14px !important;
    height: 14px !important;
    display: block;
    top: 1.2rem;
    right: 1.2rem;
    cursor: pointer !important;
    z-index: 10;
}

.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}


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

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


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

a {
    font-size: 15px;
    text-decoration: underline;
}

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




.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>');
    }

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

.dropdown-menu {
    width: 100%;
}

.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 {
    var(--color-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;
}

.container-payment {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
}

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

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

.static-card {
    background-color: #F5F8FF;
    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 > a {
    color: #38393D;
}
.static-card-body {
    color: #38393D;
    font-size: 16px;
    font-weight: 400;
    line-height: 140%;
}

.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: 16px;
    height: 16px;
    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;
    font-size: 18px;
}

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

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

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

.payment-frame {
    /* Fix: Use background-image instead of background-color for gradients */
    background-image: linear-gradient(180deg, #019CFF 0%, #0449D8 100%);
    border-radius: 30px 30px 0px 0px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    width: 100%;
    display: flex;
    flex-direction: column !important;
    justify-content: center;
    height: 22em;
    padding-top: 3em;
}

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

.payment-frame-amount {
    color: var(--color-white);
    font-size: 54px;
    font-weight: 500;
}

.amount {
    font-size: 54px;
    background-color: transparent !important;
    color: var(--color-white) !important;
    border-radius: 0px;
    color: var(--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: var(--color-white);
        opacity: 1;
    }

.payment-prepend {
    border: 0px solid !important;
    font-size: 54px;
    font-weight: 500;
    background-color: transparent;
    border-radius: 0px;
    color: var(--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: var(--color-white);
    font-size: 16px;
    font-weight: 800;
}

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

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

.payment-description-frame {
    background-color: var(--color-white);
    border-radius: 35px 0px 35px 35px;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    justify-content: center;
}

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

.help-image {
    width: 225px;
    height: 151.5px;
}

.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;
}

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

.page-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: #098550;
    background-color: #DDF9ED;
    border-radius: 15px;
    padding: 0.25em 0.25em;
}

.transactions-today-failed {
    color: #CF0833;
    background-color: #FCF0F3;
    border-radius: 15px;
    padding: 0.25em 0.25em;
}

.transactions-today-other {
    color: #C3C5C9;
    background-color: #F2F3F5;
    border-radius: 15px;
    padding: 0.25em 0.25em;
}

.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-primary);
}

.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-secondary);
}

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

.custom-control-input:checked ~ .custom-control-label::before {
    border-color: transparent !important;
}

.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/BancontactPro/icons/radio_button.svg');
    }

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

#formatPdf:checked + .pdf::before {
    background-image: url('/images/BancontactPro/icons/radio_button_checked.svg');
}

.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);
}

.border-radius-35 {
    border-radius: 0px 35px 35px 35px;
    background-image: linear-gradient(180deg, #0449D8 0%, var(--color-white) 100%);
    width: 100%;
    margin-top: -0.5px;
}

.row {
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}
.bcp-pro-success-message {
    color: #098550;
}

.bcp-pro-error-message {
    color: #CF0833;
}

.container {
    padding-left: 0px !important;
    padding-right: 0px !important;
    display: flex;
    justify-content: center;
}

#left-form-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#left-form-content {
    flex: 1;
    display: flex;
    height: 100%;
    width: 85%;
    align-self: center;
    justify-content: center;
    flex-direction: column;
}

#left-form-content form {
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%
}

#language-picker {
    display: flex !important;
    align-items: center;
}

#paymentAmountInput{
    width: 100%;
}
#currencyPayment {
    width: 42.5%;
    display: flex;
    justify-content: end;
}
#txtAmount {
    width: 57.5%;
}

#signin-row {
    height: 100%;
}

#paneSticker, #paneScreen {
    padding: 2em;
}

#linked-devices-empty {
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em;
    flex-direction: column;
}

.bcp-pro-border-bottom {
    border-bottom: 1px solid #F2F3F5 !important;
}

#payment-methods-row {
    justify-content: space-evenly;
    align-items: center;
}
.payment-method {
    width: 47.5%;
}

.payment-method-separator {
    width: 5%;
}
.go-modalframe-button-retry {
    margin-left: .5rem !important;
}

.width-modal-manual {
    width: 500px;
}

#payment_status_image {
    width: 35%;
}

.password-wrapper {
    position: relative;
}

.password-input {
    width: 100%;
    padding-right: 40px; /* Space for icon */
    box-sizing: border-box;
}

.toggle-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
    z-index: 10;
    display: flex;
    align-items: center;
}

#main-column {
    width: 65% !important;
}

@media (max-width: 875px) {
    .bcp-pro-logo-wrapper {
        color: var(--color-white);
        font-size: 200%;
    }
}

@media (max-width: 768px) {
    .row {
        flex-direction: column;
    }

    #signin-row {
        flex-direction: column-reverse;
    }
    #language-picker {
        align-self: end;
        margin: 0;
    }

    #payment-amount-input {
        width: 50% !important;
    }

    #right-form {
        display: block;
        align-items: center;
        flex: none;
    }

    #right-form > * {
        margin-top: 1em;
        margin-bottom: 1em;
        display: flex;
        justify-content: center;
        width: 100%
    }

    #left-form > * {
        grid-area: unset;
    }

    .bcp-pro-logo-wrapper {
        color: var(--color-white);
        font-size: 24px;
        width:100%
    }

    .form-group {
        margin-bottom: 1.5rem !important;
    }

    .bcp-pro-logo-wrapper {
        color: var(--color-white);
        font-size: 100%;
    }

    #left-form > * {
        grid-area: unset;
    }

    .form-group {
        margin-bottom: 0.5rem !important;
    }

    #left-form-content > form > div {
        margin: 1em 0;
    }

    #left-form-content > form button,#btnSignin {
        width: 100%
    }


    .bcp-pro-for-business {
        padding-left: 0.25em;
    }
    .aspNetHidden {
        margin: 0 !important;
    }
    .a-back {
        padding-bottom:0 !important;
        min-height: 0 !important;
    }
    .clickable-card {
        margin-bottom: 1em;
        margin-top: 0;
    }
    .payment-frame {
        padding-bottom: 3em;
    }

    #myModal {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .go-modalframe-icon {
        padding: 2em;
    }

    #payment-methods-row {
        align-items: normal;
    }
    .go-modalframe-headertext {
        margin-top: 0 !important;
    }

    .bcp-pro-header {
        margin-top: 0 !important;
        margin-bottom: 0.75rem !important;
    }

    .go-modalframe-icon-pink {
        width: 100% !important;
        margin-top: 0.25em;
    }

    .go-modalframe-linkeddevices-share {
        width: 100% !important;
        margin-top: 0.75em;
    }
    .go-modalframe-button-left {
        margin-top: 0.75em;
    }

    .go-modalframe-qr-text-content{
        display:flex;
        flex-direction: column;
        width: 100%;
    }

    #linked-devices-qr {
        width: 65% !important;
    }

    .go-modalframe-button-retry {
        margin-left: 0 !important;
    }
    .width-modal-manual {
        width: 400px !important;
    }
    #payment_status_actions {
        flex-direction: row;
    }

    #modal-linkeddevices-share {
        flex-direction: column;
    }

    .go-settings-sticker-active {
        background-image: linear-gradient(180deg, #019CFF 0%, #0449D8 100%);
        /*background-color:  var(--color-secondary);*/
    }

    .go-settings-screen-active {
        background-image: linear-gradient(0deg, #019CFF 0%, #0449D8 100%);
        /*background-color:  var(--color-secondary);*/
    }
}