@font-face {
    font-family: JobbsFont;
    src: url('/_content/Jobbs.Pay.Core/fonts/Jobbs.otf');
}

@font-face {
    font-family: OpenSansFont;
    src: url('/fonts/OpenSansRegular.ttf');
}

@font-face {
    font-family: FutworaBoldFont;
    src: url('/fonts/FutworaProBoldBold.woff2.ttf');
}

@font-face {
    font-family: FutworaRegularFont;
    src: url('/_content/Jobbs.Pay.Core/fonts/FutworaProRegular.woff2.ttf');
}


@media only screen and (min-width: 960px) {
    .hide-on-desktop {
        display: none !important;
    }
}

@media screen and (max-width: 600px) {
    .hide-on-mobile {
        display: none !important;
    }
}

.logo {
    height: 4vh;
    margin-top: 4vh;
    background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgODQgMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTU4LjU4NSAwaC00LjkxNXMtMC4wNzg5NTYgMC0wLjA3ODk1NiAwLjA3NzE3NnYxMS41NTdjMCAwLjA5NjQ3IDAuMDM5NDc4IDAuMTE1NzYgMC4xMTg0MyAwLjExNTc2aDQuODU1OGMyLjk4MDYgMCA0LjgxNjMtMi4zMTUzIDQuODE2My02LjA3NzYgMC4wMTk3MzktMy4wNjc3LTIuMTMxOC01LjY3MjQtNC43OTY2LTUuNjcyNHptMC4xMDk2OCAxMC43NWgtMy44MTU0di05LjVoMy44MTU0YzEuOTg3MiAwIDMuNjU2NCAyLjExNzYgMy42NTY0IDQuNTI2NiAwIDEuMTY1Ni0wLjI1ODMzIDQuOTczNC0zLjY1NjQgNC45NzM0em0tNTIuOTgzLTUuNDcwMmgtMi4zMDQ1Yy0xLjM0MjYgMC0yLjIwNDMtMS4yMDk2LTIuMjA0My0yLjA1NDMgMC0wLjg0NDc3IDAuNjgxMzQtMi4wMzUxIDIuMjA0My0yLjAzNTFoNC45MDk2IDAuMDIwMDM5YzAuMDYwMTE4IDAgMC4xMjAyNC0wLjA1NzU5OCAwLjEyMDI0LTAuMTE1MnYtMC45NTk5N2MwLTAuMDU3NTk4LTAuMDYwMTE4LTAuMTE1Mi0wLjEyMDI0LTAuMTE1MmgtNC45Mjk3Yy0yLjEyNDIgMC0zLjQwNjcgMS42MzE5LTMuNDA2NyAzLjIwNjMgMCAxLjUxNjcgMS40MDI4IDMuMjA2MyAzLjQwNjcgMy4yMDYzaDIuMzA0NWMxLjM0MjYgMCAyLjA4NDEgMS4yMDk2IDIuMDg0MSAyLjA1NDMgMCAwLjgyNTU3LTAuNTYxMSAyLjExMTktMi4wODQxIDIuMTExOWgtNS4yOTA0Yy0wLjA2MDExOCAwLTAuMTIwMjQgMC4wNTc1OTgtMC4xMjAyNCAwLjExNTJ2MC45NDA3N2MwIDAuMDU3NTk4IDAuMDQwMDc5IDAuMTE1MiAwLjEyMDI0IDAuMTE1Mmg1LjMxMDRjMi4xMjQyIDAgMy4yODY1LTEuNzA4NyAzLjI4NjUtMy4yNjM5IDAtMC43Mjk1OC0wLjMyMDYzLTEuNTE2Ny0wLjg2MTY5LTIuMTExOS0wLjY0MTI2LTAuNzEwMzgtMS41MDMtMS4wOTQ0LTIuNDQ0OC0xLjA5NDR6bTI0LjU3NC01LjI2MDZzMC0wLjAxOTIzMS0wLjAzOTYxNC0wLjAxOTIzMWgtMS43NDNjLTAuMDE5ODA3IDAtMC4wMzk2MTQgMC4wMTkyMzEtMC4wMzk2MTQgMC4wMTkyMzFsLTMuMjA4OCAxMS42NzNzLTAuMDE5ODA3IDAuMDM4NDYyIDAuMDE5ODA3IDAuMDM4NDYyaDEuMTY4NmMwLjAxOTgwNyAwIDAuMDM5NjE0LTAuMDM4NDYyIDAuMDM5NjE0LTAuMDM4NDYybDIuODkxOS0xMC41MTkgMi44OTE5IDEwLjUzOHMwLjAxOTgwNyAwLjAzODQ2MiAwLjAzOTYxNCAwLjAzODQ2MmgxLjE0ODhjMC4wMzk2MTQgMCAwLjAzOTYxNC0wLjAzODQ2MiAwLjAzOTYxNC0wLjAzODQ2MmwtMy4yMDg4LTExLjY5MnptMTcuMDE5LTAuMDE5MjMxaC0wLjk5MDUzYy0wLjA1OTQzMiAwLTAuMTE4ODYgMC4wNTg2MzItMC4xMTg4NiAwLjExNzI2djAuMDM5MDg4IDkuNzkxNXMtNS44NjM5LTkuODUwMi01Ljg2MzktOS44Njk3Yy0wLjAxOTgxMS0wLjAxOTU0NC0wLjAzOTYyMS0wLjAzOTA4OC0wLjAzOTYyMS0wLjAzOTA4OGgtMS44NjIycy0wLjAzOTYyMSAwLTAuMDM5NjIxIDAuMDU4NjMydjExLjc4NWMwIDAuMDU4NjMyIDAuMDU5NDMyIDAuMTE3MjYgMC4xMTg4NiAwLjExNzI2aDAuOTcwNzJjMC4wNTk0MzIgMCAwLjExODg2LTAuMDU4NjMyIDAuMTE4ODYtMC4xMTcyNnYtMC4wNTg2MzItMTAuNjEyLTAuMDc4MTc2bDYuMzk4OCAxMC44NDcgMC4wMTk4MTEgMC4wMTk1NDRoMS4zMjczYzAuMDc5MjQyIDAgMC4wNTk0MzItMC4wNTg2MzIgMC4wNTk0MzItMC4wNTg2MzJ2LTExLjgwNWMwLjAxOTgxMS0wLjA3ODE3Ni0wLjAzOTYyMS0wLjEzNjgxLTAuMDk5MDUzLTAuMTM2ODF6bTIyLjAwMyAwLjExNzI2YzAtMC4wNTg2MzItMC4wNjMzNTYtMC4xMTcyNi0wLjEyNjcxLTAuMTE3MjZoLTEuMDM0OGMtMC4wNjMzNTYgMC0wLjEyNjcxIDAuMDU4NjMyLTAuMTI2NzEgMC4xMTcyNnYwLjEzNjgxIDExLjUxMSAwLjExNzI2YzAgMC4wNTg2MzIgMC4wNjMzNTYgMC4xMTcyNiAwLjEyNjcxIDAuMTE3MjZoMS4wMzQ4YzAuMDYzMzU2IDAgMC4xMjY3MS0wLjA1ODYzMiAwLjEyNjcxLTAuMTE3MjZ2LTAuMTE3MjYtMTEuNTExLTAuMTM2ODF6bTE0LjAxLTAuMTE3MjZoLTkuMjUyYy0wLjA2MDIwOCAwLTAuMTIwNDIgMC4wNTg2MzItMC4xMjA0MiAwLjExNzI2djAuOTU3NjVjMCAwLjA1ODYzMiAwLjA2MDIwOCAwLjExNzI2IDAuMTIwNDIgMC4xMTcyNmg0LjAzNHYxMC42OTFjMCAwLjA1ODYzMiAwLjA2MDIwOCAwLjExNzI2IDAuMTIwNDIgMC4xMTcyNmgwLjk4MzQxYzAuMDYwMjA4IDAgMC4xMjA0Mi0wLjA1ODYzMiAwLjEyMDQyLTAuMTE3MjZ2LTEwLjcxaDQuMDM0YzAuMDYwMjA4IDAgMC4xMjA0Mi0wLjA1ODYzMiAwLjEyMDQyLTAuMTE3MjZ2LTAuOTU3NjVjLTAuMDQwMTM5LTAuMDM5MDg4LTAuMTAwMzUtMC4wOTc3Mi0wLjE2MDU2LTAuMDk3NzJ6bS02MS43OCAxMC42MTRoLTQuNjM1N2MtMS42NTI3IDAtMy4zMjU2LTEuNDgzMi0zLjMyNTYtNC43IDAtMy4yMzYxIDEuOTc1Mi00LjczODUgMy4zMjU2LTQuNzM4NWg0LjU1NTEgMC4wMjAxNTVjMC4wNjA0NjYgMCAwLjEyMDkzLTAuMDU3Nzg3IDAuMTIwOTMtMC4xMTU1N3YtMC45NDM4NWMwLTAuMDU3Nzg3LTAuMDYwNDY2LTAuMTE1NTctMC4xMjA5My0wLjExNTU3aC0wLjAyMDE1NS00LjU1NTFjLTEuODc0NCAwLTQuNTM0OSAxLjgyOTktNC41MzQ5IDUuODk0MyAwIDQuMDA2NiAyLjI3NzUgNS44NTU3IDQuNTM0OSA1Ljg1NTdoNC41OTU0IDAuMDIwMTU1YzAuMDYwNDY2IDAgMC4xMjA5My0wLjA1Nzc4NyAwLjEyMDkzLTAuMTE1NTd2LTAuOTQzODVjMC4wMjAxNTUtMC4wMTkyNjItMC4wNDAzMS0wLjA3NzA0OS0wLjEwMDc4LTAuMDc3MDQ5eiIvPjwvc3ZnPg==) no-repeat center;
}

.name {
    text-transform: uppercase;
    font-size: 3vh;
    font-weight: bold;
    margin: 4vh;
}

.result-text {
    padding: 2vh;
}

.scanner {
    margin: auto;
    max-width: 1280px;
    max-height: 75vh;
}

.scandit-camera-switcher {
    display: none;
}

.scandit-torch-toggle {
    display: none;
}

.scandit-laser {
    display: none !important;
}

select {
    height: 2.5rem;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--popup-background-color);
    border-radius: 3px;
    color: var(--primary-text-color);
    border: 1px solid var(--primary-text-color);
    text-indent: 8px;
    font-size: 1rem;
}

input, textarea {
    touch-action: manipulation;
}

:root {
    touch-action: pan-x pan-y;
    height: 100%;
    --jbs-purple-color: #6d27ff;
    --jbs-success-color: mediumseagreen;
    --jbs-error-color: tomato;
    --background-color: #f0f0f0;
    --background-fading-color: rgba(240, 240, 240, 0);
    --primary-text-color: #333333;
    --secondary-text-color: #d3d3d3;
    --toolbar-background-color: #fff;
    --toolbar-text-color: #000;
    --dialog-background-color: #fff;
    --card-background-color: #e6e6e6;
    --card-text-color: #333;
    --popup-background-color: #fff;
    /*--button-background-color: #6d27ff;*/
    --button-background-color: #21252a;
    --button-text-color: #ffffff;
    --button-inverted-background-color: #ffffff;
    --button-inverted-text-color: #21252a;
    --button-dark-background-color: #333333;
    --button-dark-text-color: #ffffff;
    --button-transparent-background-color: rgba(0, 0, 0, 0.4);
    --button-border-radius: 2rem;
    --icon-color: invert(0);
    --icon-white-color: invert(1);
    --icon-black-color: invert(0);
    --icon-color-inverted: invert(1);
    --divider-color: lightgray;
    --store-action-icon-background-color: #21252a;
    --store-action-icon-color: invert(1);
    --highlight-color: mediumseagreen;
    --booking-available-color: #40bf79;
    --booking-unavailable-color: #ff674d;
    --booking-selected-color: #4d94ff;
    --border-radius-default: 3px;
    --border-radius-card: 15px;
    --border-radius-round: 2rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        touch-action: pan-x pan-y;
        height: 100%;
        --background-color: #1b1d21;
        --background-fading-color: rgb(27, 29, 33, 0);
        --primary-text-color: #ffffff;
        --secondary-text-color: #d3d3d3;
        --toolbar-background-color: #21252a;
        --toolbar-text-color: #fff;
        --dialog-background-color: #21252a;
        --card-background-color: #0f1117;
        --card-text-color: #ffffff;
        --popup-background-color: #21252a;
        --button-background-color: #ffffff;
        --button-text-color: #333333;
        --button-inverted-background-color: #333333;
        --button-inverted-text-color: #ffffff;
        --icon-color: invert(1);
        --icon-color-inverted: invert(0);
        --divider-color: #333333;
        --store-action-icon-background-color: #fff;
        --store-action-icon-color: invert(0);
        --highlight-color: #6d27ff;
    }
}

html, body {
    font-family: 'FutworaRegularFont';
    /*font-family: 'Open Sans';*/
    background-color: var(--background-color);
    color: var(--primary-text-color);
    height: 100%;
    width: 100%;
    overflow: hidden;
    margin: 0;
    position: relative;
    touch-action: manipulation;
}

#app {
    height: 100%;
    width: 100%;
    overflow: hidden;
    touch-action: manipulation;
}

.status-bar-safe-area {
    background-color: var(--background-color);
}

.shadow {
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
}

.jbs-flex {
    display: flex;
}

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

.jbs-flex-column-center {
    flex-flow: column;
}

.py-1 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.py-2 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.py-3 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.py-4 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.py-5 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.pt-1 {
    padding-top: 10px;
}

.pt-2 {
    padding-top: 20px;
}

.pt-3 {
    padding-top: 30px;
}

.pt-4 {
    padding-top: 40px;
}

.pt-5 {
    padding-top: 50px;
}

.pb-1 {
    padding-bottom: 10px;
}

.pb-2 {
    padding-bottom: 20px;
}

.pb-3 {
    padding-bottom: 30px;
}

.pb-4 {
    padding-bottom: 40px;
}

.pb-5 {
    padding-bottom: 50px;
}

.px-1 {
    padding-left: 10px;
    padding-right: 10px;
}

.px-2 {
    padding-left: 20px;
    padding-right: 20px;
}

.px-3 {
    padding-left: 30px;
    padding-right: 30px;
}

.px-4 {
    padding-left: 40px;
    padding-right: 40px;
}

.px-5 {
    padding-left: 50px;
    padding-right: 50px;
}

.pe-1 {
    padding-right: 10px;
}

.pe-2 {
    padding-right: 20px;
}

.pe-3 {
    padding-right: 30px;
}

.pe-4 {
    padding-right: 40px;
}

.pe-5 {
    padding-right: 50px;
}

.ps-1 {
    padding-left: 10px;
}

.ps-2 {
    padding-left: 20px;
}

.ps-3 {
    padding-left: 30px;
}

.ps-4 {
    padding-left: 40px;
}

.ps-5 {
    padding-left: 50px;
}

.mt-1 {
    margin-top: 10px;
}

.mt-2 {
    margin-top: 20px;
}

.mt-3 {
    margin-top: 30px;
}

.mt-4 {
    margin-top: 40px;
}

.mt-5 {
    margin-top: 50px;
}

.mb-1 {
    margin-bottom: 10px;
}

.mb-2 {
    margin-bottom: 20px;
}

.mb-3 {
    margin-bottom: 30px;
}

.mb-4 {
    margin-bottom: 40px;
}

.mb-5 {
    margin-bottom: 50px;
}

.my-1 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.my-2 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.my-3 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.my-4 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.my-5 {
    margin-top: 50px;
    margin-bottom: 50px;
}

.mx-1 {
    margin-left: 10px;
    margin-right: 10px;
}

.mx-2 {
    margin-left: 20px;
    margin-right: 20px;
}

.mx-3 {
    margin-left: 30px;
    margin-right: 30px;
}

.mx-4 {
    margin-left: 40px;
    margin-right: 40px;
}

.mx-5 {
    margin-left: 50px;
    margin-right: 50px;
}

.ms-1 {
    margin-left: 10px;
}

.ms-2 {
    margin-left: 20px;
}

.ms-3 {
    margin-left: 30px;
}

.ms-4 {
    margin-left: 40px;
}

.ms-5 {
    margin-left: 50px;
}

.me-1 {
    margin-right: 10px;
}

.me-2 {
    margin-right: 20px;
}

.me-3 {
    margin-right: 30px;
}

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

.me-5 {
    margin-right: 50px;
}

.circle-loader {
    width: 40px;
    height: 40px;
    border: 4px solid #FFF;
    border-color: var(--primary-text-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: circle-loader-rotation 1s linear infinite;
}

.circle-loader-inverted {
    width: 40px;
    height: 40px;
    border: 4px solid #FFF;
    border-color: var(--button-text-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: circle-loader-rotation 1s linear infinite;
}

@keyframes circle-loader-rotation {
    0% {
        transform: rotate(0deg);
    }

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

input {
    width: 100%;
    padding: 10px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    background-color: var(--popup-background-color);
    border-radius: 3px;
    color: var(--primary-text-color);
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid var(--primary-text-color);
    font-size: 1rem;
}

.guide-container {
    flex: 1;
    display: flex;
    flex-flow: column;
}

.guide-content {
    flex: 1;
    font-size: 0.9rem;
}

.guide-header {
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: start;
}

.guide-header-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.guide-header-subtitle {
    font-size: 0.9rem;
}

.guide-footer {
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
}

.guide-card {
    background-color: var(--card-background-color);
    color: var(--card-text-color);
    border-radius: 15px;
    padding: 20px;
    padding-bottom: 30px;
    font-size: 0.9rem;
}

.guide-image {
    height: 3rem;
    filter: var(--icon-color);
    text-align: center;
}

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

.booking-available {
    background-color: var(--booking-available-color) !important;
    color: white !important;
}

.booking-unavailable {
    background-color: var(--booking-unavailable-color) !important;
    color: white !important;
}

.booking-selected {
    background-color: var(--booking-selected-color) !important;
    color: white !important;
}

.booking-day {
    border-radius: 2rem;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2d3239;
    font-size: 0.9rem;
}

.booking-calendar-day-title {
    margin-bottom: 5px;
    text-align: center;
    font-size: 0.8rem;
}

.booking-step-header {
    flex: 0;
    text-align: center;
    font-size: 1.2rem;
    padding-top: 0;
    padding-bottom: 20px;
}

.booking-confirm-card {
    background-color: var(--button-background-color);
    color: var(--button-text-color);
    border-radius: 15px;
    width: 300px;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.booking-footer-navigation {
    display: flex;
    align-items: start;
    justify-content: space-between;
    padding-bottom: 20px;
}

.search-bar {
    width: 70px;
    transition: all 0.3s;
}

.search-input {
    font-family: inherit;
    width: 100%;
    border: 0;
    outline: 0;
    font-size: 0.9rem;
    color: var(--button-text-color);
    margin: 0;
    padding: 0;
    padding-bottom: 3px;
    background: transparent;
    transition: border-color 0.2s;
}

.search-bar-visible {
    width: 100%;
}