/* TODO 
    classes styled here should remain on the page 
    and if not, they should be removed from this file
    We need a test on these classes to guarantee its existence  */
/*[data-loading] {
    display: none;
}*/


:root {
    --e2e-dark: #005b63;
    --e2e-dark-selected: #00818c;
    --e2e-dark-faded: #146970;
    --e2e-light-grey: #f7f7f7;
    --e2e-light: #8fb23d;
    --e2e-lighter: #e7efd5;
    --e2e-black: #01191b;
    --success: #25a537;
    --warning: hsl(44, 100%, 77%);
    --danger: #e52222;
    --terra: #f69679;
    --ocre: #fdc689;
    --lightgreen: #a3d39c;
    --seablue: #7accc8;
    --blue: #8393ca;
    --lavender: #a186be;
    --pink: #f49ac1;
    --reddish: #f26d7d;
    --pine: #267073;
    --bluegray: #2d759d;
    --eggplant: #764771;
    --grass: #3cb878;
    --darkNavy: #213140;
    --teal1: #66B3FB;
    --teal2: #4B9DEA;
    --charcoal: #555555;
    --gold: #B6985A;
    --font-size: 22px;
}


@-webkit-keyframes fadeOut {
    0% {
        background-color: var(--warning)
    }

    100% {
        background-color: transparent;
    }
}

@keyframes fadeOut {
    0% {
        background-color: var(--warning)
    }

    100% {
        background-color: transparent;
    }
}

#navBar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 78px;
    z-index: 9;
}

    #navBar + .container {
        margin-top: 78px;
    }

#sidebar .side-nav {
    background-color: var(--e2e-dark-selected);
    min-height: calc(100vh);
}

.is-e2e-light-grey {
    background-color: var(--e2e-light-grey);
}

.is-grass > * {
    color: #fff
}

.is-success {
    background-color: var(--success) !important;
    color: #fff
}

.is-success-color {
    color: var(--success);
}

.is-warning {
    background-color: var(--warning) !important;
    color: #363636
}

.is-danger {
    background-color: var(--danger) !important;
    color: #fff
}

.is-danger-color {
    color: var(--danger);
}

.is-terra {
    background-color: var(--terra) !important;
    color: #363636
}

    .is-terra > * {
        color: #fff
    }

.is-ocre {
    background-color: var(--ocre) !important;
    color: #363636
}

    .is-ocre > * {
        color: #363636
    }

.is-lightgreen {
    background-color: var(--lightgreen) !important;
    color: #363636
}

    .is-lightgreen > * {
        color: #363636
    }

.is-sea-blue {
    background-color: var(--seablue) !important;
    color: #363636
}

    .is-sea-blue > * {
        color: #363636
    }

.is-blue {
    background-color: var(--blue) !important;
    color: #fff
}

    .is-blue > * {
        color: #fff
    }

.is-lavender {
    background-color: var(--lavender) !important;
    color: #fff
}

    .is-lavender > * {
        color: #fff
    }

.is-pink {
    background-color: var(--pink) !important;
    color: #fff
}

    .is-pink > * {
        color: #fff
    }

.is-reddish {
    background-color: var(--reddish) !important;
    color: #fff
}

    .is-reddish > * {
        color: #fff
    }

.is-pine {
    background-color: var(--pine) !important;
    color: #fff
}

    .is-pine > * {
        color: #fff
    }

.is-blue-gray {
    background-color: var(--bluegray) !important;
    color: #fff
}

    .is-blue-gray > * {
        color: #fff
    }

.is-eggplant {
    background-color: var(--eggplant) !important;
    color: #fff
}

    .is-eggplant > * {
        color: #fff
    }

.is-grass {
    background-color: var(--grass) !important;
    color: #fff
}

.is-e2e-light {
    background-color: var(--e2e-lighter) !important;
    color: var(--e2e-dark-faded);
}

.is-e2e-dark {
    background-color: var(--e2e-dark-faded) !important;
    color: var(--e2e-lighter);
}

    .is-e2e-dark:hover, .is-e2e-dark.is-hovered, .menu-button:hover, .menu-button.is-hovered {
        color: var(--e2e-light) !important;
    }

.has-background-e2e-black {
    background-color: var(--e2e-black) !important;
}

.product-is-disabled * {
    opacity: .5;
    font-size: 1.5em;
    display: block;
    text-align: center;
}

.cashRegister-is-disabled * {
    opacity: .5;
    display: block;
    text-align: center;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%
}

@media (min-width: 768px) {
    html {
        font-size: 16px
    }
}

.fullwidth {
    width: 100%
}

.dropdownText {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.multiselect-content {
    height: 200px;
    overflow-y: auto
}

.app-main {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    opacity: 1;
    -webkit-transition: all .15s ease;
    transition: all .15s ease
}

    .app-main.lights-off {
        opacity: 0
    }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    -webkit-box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #258cfb;
    box-shadow: 0 0 0 .1rem #fff, 0 0 0 .25rem #258cfb
}

body {
    margin-bottom: 60px
}

.textarea {
    /* height: 54px !important;
    min-height: 54px !important;*/
}

.textarea-info {
    display: block !important;
}

a.icon {
    pointer-events: auto !important
}

.show-password {
    height: 45px;
}

.htmx-settling img {
    opacity: 0
}

.image img {
    -webkit-transition: opacity 300ms ease-in;
    transition: opacity 300ms ease-in
}

.toast {
    position: absolute;
    width: 40%;
    right: 0;
    top: 0;
    z-index: 1
}

.input-validation-error {
    border-color: #f14668
}

.validation-summary-errors {
    color: #f14668
}

.e2e-table .wrapper {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

    .e2e-table .wrapper .top-controls {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
        padding: .3em
    }

@media screen and (min-width: 1024px) {
    .e2e-table .wrapper .top-controls .table-controls {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }

    .e2e-table .wrapper .top-controls .search {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2
    }

    .e2e-table .wrapper .top-controls .table-buttons {
        -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
        order: 3
    }
}

.e2e-table .wrapper .is-flex .is-align-items-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.e2e-table .checkbox {
    font-size: 1.4em;
    display: contents;
}

.table {
    font-size: .9em
}

    .table td, .table th {
        border-style: solid;
        border-color: #fafafa;
        border-width: 0 0 0;
        padding: 0.5em 0.75em;
        vertical-align: top;
    }

    .table tr {
        border-style: solid;
        border-color: #fafafa;
        border-width: 0 0 1px;
    }

    .table .total-row {
        border-top: 2px solid #d3d3d3;
        background-color: #fff !important;
        font-weight: bold;
    }

.icon.selected {
    position: absolute;
    z-index: 1;
    right: .6rem
}

.pagination {
    padding: .75em;
    margin: 0
}

.records-info {
    font-size: 20px;
    padding: 1em
}

.number-input {
    -moz-appearance: textfield
}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.loader-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0;
    z-index: -1;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 6px
}

    .loader-wrapper .loader {
        height: 80px;
        width: 80px
    }

    .loader-wrapper.is-active {
        opacity: 1;
        z-index: 1
    }

.is-loading {
    position: relative
}

.loader-spinner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s;
    display: block;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
}

    .loader-spinner.htmx-request {
        opacity: 0.5;
        z-index: 999;
        display: flex;
    }

.spinner {
    width: 150px; /* control the size */
    aspect-ratio: 1;
    display: grid;
    -webkit-mask: conic-gradient(from 15deg, #0003, #000);
    mask: conic-gradient(from 15deg, #0003, #000);
    animation: load 1s steps(12) infinite;
}

    .spinner,
    .spinner:before,
    .spinner:after {
        background: radial-gradient(closest-side at 50% 12.5%, currentColor 90%, #0000 98%) 50% 0/20% 80% repeat-y, radial-gradient(closest-side at 12.5% 50%, currentColor 90%, #0000 98%) 0 50%/80% 20% repeat-x;
    }

        .spinner:before,
        .spinner:after {
            content: "";
            grid-area: 1/1;
            transform: rotate(30deg);
        }

        .spinner:after {
            transform: rotate(60deg);
        }

@keyframes load {
    from {
        transform: rotate(0turn)
    }

    to {
        transform: rotate(1turn)
    }
}

.is-bottom {
    display: none
}

.container:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 100%
}

body, html {
    font-family: "Inter", sans-serif;
    font-size: 1em;
    margin-bottom: 0
}

.column.is-one-quarter, .column.is-one-quarter-tablet {
    width: 24%;
    margin: .5% !important;
    background-color: #f3f2f8;
    padding: 25% 0 0;
    position: relative
}

.column.is-one-fifth, .column.is-one-fifth-tablet {
    width: 19%;
    margin: .5% !important;
    background-color: #f3f2f8;
    padding: 18% 0 0;
    position: relative
}

.column.is-one-sixth, .column.is-one-sixth-tablet {
    width: 16%;
    margin: .5% !important;
    background-color: #f3f2f8;
    padding: 16% 0 0;
    position: relative
}

.column.is-one-seventh, .column.is-one-seventh-tablet {
    width: 13%;
    margin: .5% !important;
    background-color: #f3f2f8;
    padding: 13% 0 0;
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none
}

.column.is-one-eight, .column.is-one-eight-tablet {
    width: 11%;
    margin: .5% !important;
    background-color: #f3f2f8;
    padding: 11% 0 0;
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none
}

.column.is-one-quarter > *, .column.is-one-quarter-tablet > *, .column.is-one-fifth > *, .column.is-one-fifth-tablet > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 30px;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.column.is-one-quarter > *, .column.is-one-quarter-tablet > *, .column.is-one-fifth > *, .column.is-one-fifth-tablet > *,
.column.is-one-seventh-tablet > *, .column.is-one-seventh > *, .column.is-one-eight-tablet > *, .column.is-one-eight > * {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

    .column.is-one-quarter > * i, .column.is-one-quarter-tablet > * i, .column.is-one-fifth > * i, .column.is-one-fifth-tablet > * i {
        font-size: 2.2em;
        margin-bottom: 15px;
    }

    .column.is-one-seventh-tablet > * i, .column.is-one-eight-tablet > * i {
        font-size: 2.2em;
        margin-bottom: 15px
    }

.column.is-one-seventh-tablet > * {
    font-size: 1.5em
}

.column.is-one-eight-tablet > * {
    font-size: 1.2em
}

.column.is-one-seventh > *, .column.is-one-seventh .title {
    font-size: 1.2em
}

.column.is-one-eight > *, .column.is-one-eight .title {
    font-size: 1em
}

.column.is-one-seventh i, .column.is-one-eight i {
    margin-bottom: 8px
}

.is-grid-item {
    background-color: #e3e3e3;
    border-radius: 4px;
    position: relative;
    padding: 1.25rem 2.5rem 1.25rem 1.5rem
}

.price-input .control {
    margin-bottom: 0 !important
}

.right_pane {
    justify-content: end;
}

.left_pane {
    justify-content: start;
}

.right_pane > * {
    width: 100%
}

.productImage {
    height: 150px;
    width: 100%;
    display: block;
    border: 1px solid #f1f1f1;
    border-radius: 5px
}

.fa-classic, .fa-regular, .fa-solid, .far, .fas {
    font-family: "Inter", sans-serif !important
}

    .fa-classic::before, .fa-regular::before, .fa-solid::before, .far::before, .fas::before {
        font-family: "Font Awesome 6 Free", ui-rounded
    }

.is-fixed-top .column {
    text-align: right;
    white-space: nowrap
}

    .is-fixed-top .column i span {
        margin-left: 5px;
        font-size: .9em;
    }

    .is-fixed-top .column i::before {
        opacity: .6
    }

    .is-fixed-top .column .side-nav i::before {
        opacity: 1
    }

    .is-fixed-top .column.bell i::before {
        opacity: 1
    }

    .is-fixed-top .column.is-10 {
        text-align: left
    }

    .is-fixed-top .column.bell {
        font-size: 2em;
        background-color: #333;
        margin: -0.35em -0.35em -0.35em 0;
        max-width: 75px;
        text-align: center;
        color: #fff
    }

.category .button i::before {
    margin-right: 15px
}

.column.edit-mode-button {
    margin: 0;
    text-align: right;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.column.search-mode-button {
    margin: 0;
    margin-left: -95px;
    text-align: right;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.column.edit-mode-button i::before {
    margin-right: 0
}

.column.search-mode-button i::before {
    margin-right: 0
}


.notification-icon {
    background-color: black;
    border-color: black;
    width: 42px;
}

.icon-badge-top-right {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 25px;
    height: 25px;
    background: red;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.icon-badge-bottom-left {
    position: absolute;
    top: 40px;
    right: 38px;
    width: 25px;
    height: 25px;
    background: red;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: .7em;
}

.pos-overlay iframe {
    border: 0;
    max-height: 720px;
    width: 650px;
    height: 720px
}

.pos-overlay {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 900;
    left: 0;
    top: 0;
    background-color: #fff;
    background-color: rgba(255, 255, 255, .95);
    overflow: hidden;
    -webkit-transition: .5s;
    transition: .5s;
    overflow-y: auto
}

.overlay-content {
    width: 98%;
    position: absolute;
    top: 2%;
    right: 1%;
    left: 1%;
    bottom: 2%;
    background-color: #fff;
    border-radius: 10px;
    padding: 50px;
    overflow: scroll;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
    /* Hide scrollbar for Chrome, Safari and Opera */
    .overlay-content::-webkit-scrollbar {
        display: none;
    }

    .overlay-content .article {
        margin-top: -11px
    }

.empty-content {
    height: 600px;
}

.pos-overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 30px;
    line-height: 100%;
    color: #818181;
    display: block;
    -webkit-transition: .3s;
    transition: .3s
}

    .pos-overlay a:hover, .overlay a:focus {
        color: #f1f1f1
    }

.pos-overlay .close-overlay-button {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    z-index: 9999;
    opacity: .5
}

    .pos-overlay .close-overlay-button:hover {
        opacity: 1;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out
    }

.overlay-content .article .alignment-center > p > a > img {
    float: left;
    max-width: 600px;
    height: auto;
    margin: 0 20px
}

@media screen and (max-height: 450px) {
    .pos-overlay a {
        font-size: 20px
    }

    .pos-overlay .close-overlay-button {
        font-size: 40px;
        top: 15px;
        right: 35px
    }
}

.close-button {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    opacity: .5;
    padding: 8px;
    text-decoration: none;
    line-height: 100%;
    color: #818181;
    display: block;
    -webkit-transition: .3s;
    transition: .3s;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: #fff;
        -webkit-transition: .4s;
        transition: .4s
    }

input:checked + .slider {
    background-color: #2ea048
}

input:focus + .slider {
    -webkit-box-shadow: 0 0 1px #2ea048;
    box-shadow: 0 0 1px #2ea048
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    transform: translateX(26px)
}

.slider.round {
    border-radius: 34px
}

    .slider.round:before {
        border-radius: 50%
    }

.is-align-items-center {
    gap: 20px;
    font-size: 20px
}

.login-header-container {
    margin-top: 30px;
    margin-bottom: 25px;
}

.login-header {
    justify-content: center;
}

.login-content {
    justify-content: center;
    display: flex;
}

.login-buttons {
    position: relative;
    margin-top: 30px;
    margin-left: 115px;
}

header > * .fa-edit:before, .fa-pen:before {
    content: "";
    font-size: 16px;
    width: 40px;
    height: 40px;
    display: block;
    background-color: #e3e3e3;
    border-radius: 20px;
    text-align: center;
    vertical-align: middle;
    line-height: 38px;
    color: #363636
}

.product-work {
    height: calc(100vh - 227px);
}

    .product-work, .product-work .is-align-items-center {
        font-size: 22px !important;
    }

        .product-work > .column:first-child {
            padding-right: 50px
        }

.button.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-top: 1em
}

.overlay-buttons {
    max-width: 360px;
}

    .overlay-buttons > * {
        width: 100%;
        margin-top: 20px
    }

    .overlay-buttons .tile.is-vertical > .tile.is-child:not(:last-child) {
        margin-bottom: 1rem !important
    }

    .overlay-buttons .tile.is-parent {
        padding: .55rem
    }

input[type=radio]:checked + label {
    -webkit-box-shadow: 0 0 0 5px rgba(0, 0, 0, .75);
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .75)
}

.sortable-swap-highlight {
    background-color: #f1e79a !important
}

.sortable-ghost {
    background-color: #04ea14 !important
}

.sortable-drag {
    background-color: #ea0458 !important
}

.sortable-chosen {
    background-color: #04ead7 !important
}

#divCategories {
    overflow-x: auto;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: calc(100% - 100px);
    border-radius: 0;
}

    #divCategories.has-scrollbar {
        width: calc(100% - 165px) !important;
        margin-left: 80px;
    }

    #divCategories::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .3);
        background-color: #f7f7f7
    }

    #divCategories::-webkit-scrollbar {
        width: 2px;
        height: 3px;
        background-color: #f7f7f7
    }

    #divCategories::-webkit-scrollbar-thumb {
        background-color: #f7f7f7
    }

.column.billing {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    align-items: start;
    justify-content: start;
}

#basket .buttons {
    position: absolute;
    bottom: 3px;
    right: 11px;
    left: 11px;
    margin-bottom: 0px !important;
}

.basket-total-to-pay-label {
    padding-left: 11px !important;
}

#basket .buttons .is-dark {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background-color: var(--warning);
    color: #363636;
    font-size: 1.8em
}

#basket .buttons .is-light {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color: var(--success);
    color: #fff;
    font-size: 28px !important;
}

#basket .buttons .is-action {
    -webkit-box-flex: 3;
    -ms-flex: 3;
    flex: 3;
    background-color: var(--terra);
    color: #fff;
    font-size: 28px !important;
}

#basket .is-align-items-center.button {
    font-size: 18px
}

main.pb-3 {
    padding-bottom: 0px !important;
}

#basket {
    padding-bottom: 20px;
    overflow-y: auto;
    height: calc(100vh - 340px);
    width: 100%;
    overflow-x: hidden;
    margin-bottom: 264px;
}

    #basket.checkout {
        overflow-y: hidden;
        height: calc(100vh - 100px);
        width: 100%;
        overflow-x: hidden;
        margin-bottom: 108px;
    }

    #basket .basket-checkout {
        overflow-x: auto;
        max-height: 530px;
        padding-top: 1.5rem !important;
    }

    #basket .basket-on-checkout {
        overflow-x: auto;
    }

#checkoutPayments hr {
    margin: 0.5rem 0;
}

#checkoutContent > p strong {
    font-size: 24px
}

#divCategories .fa-pencil:before {
    background-color: green;
    color: #fff;
    padding: 5px;
    font-size: var(--font-size);
    border-radius: 5px;
    margin: -0.5rem 5px -0.5rem 1rem;
    line-height: 36px;
    width: 45px;
    display: block
}

#divCategories .fa-xmark:before {
    background-color: red;
    color: #fff;
    padding: 5px;
    font-size: 35px;
    border-radius: 5px;
    margin: -0.5rem -1rem -0.5rem 0;
    line-height: 36px;
    width: 45px;
    display: block
}

.column.is-one-fifth .fa-pencil:before {
    background-color: var(--success);
    color: #fff;
    padding: 5px;
    font-size: var(--font-size);
    border-radius: 50%;
    margin: 0;
    line-height: 36px;
    width: 45px;
    display: block;
    text-align: center
}

.column.is-one-fifth .fa-xmark:before {
    background-color: var(--danger);
    color: #fff;
    padding: 5px;
    font-size: 35px;
    border-radius: 50%;
    margin: 0;
    line-height: 36px;
    width: 45px;
    display: block;
    text-align: center
}

.column.is-one-seventh .fa-pencil:before {
    background-color: var(--success);
    color: #fff;
    padding: 5px;
    font-size: 17px;
    border-radius: 50%;
    margin: 0;
    line-height: 30px;
    width: 40px;
    display: block;
    text-align: center;
}

.column.is-one-seventh .fa-xmark:before {
    background-color: var(--danger);
    color: #fff;
    padding: 5px;
    font-size: 25px;
    border-radius: 50%;
    margin: 0;
    line-height: 30px;
    width: 40px;
    display: block;
    text-align: center;
}

.column.is-one-eight .fa-pencil:before {
    background-color: var(--success);
    color: #fff;
    padding: 5px;
    font-size: 17px;
    border-radius: 50%;
    margin: 0;
    line-height: 22px;
    width: 32px;
    display: block;
    text-align: center;
}

.column.is-one-eight .fa-xmark:before {
    background-color: var(--danger);
    color: #fff;
    padding: 5px;
    font-size: 25px;
    border-radius: 50%;
    margin: 0;
    line-height: 22px;
    width: 32px;
    display: block;
    text-align: center;
}

.column.is-one-seventh .product-edit-icons i {
    margin-bottom: 0
}

.product-is-active .subtitle {
    margin-bottom: 5px
}

#divCategories.is-edit-mode {
    display: inline-table;
    overflow-x: unset;
}

#basket .table td, #basket .table th {
    font-size: 1.3em
}

    #basket .table td .fa-pencil-alt {
        background-color: var(--success);
        width: 44px;
        height: 44px;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        border-radius: 5px;
        font-size: .9em
    }

    #basket .table td .fa-trash {
        background-color: var(--danger);
        width: 44px;
        height: 44px;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: #fff;
        border-radius: 5px;
        font-size: .9em
    }

    #basket .table td .basket-line-pause {
        background-color: var(--warning);
        width: 44px;
        height: 44px;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        color: black;
        border-radius: 5px;
        font-size: .9em
    }

#basket .columns {
    font-size: 1.3em
}

#basketZipCode.columns {
    overflow-y: hidden;
    height: unset !important;
    width: 100%;
    overflow-x: hidden;
}

#basket > .columns {
    overflow-y: auto;
    height: calc(100vh - 450px);
    width: 100%;
    overflow-x: hidden;
}

#basket.checkout > .columns {
    overflow-y: auto;
    height: calc(100vh - 260px);
    width: 100%;
    overflow-x: hidden;
}

.amount-returned.column {
    background-color: #f7f7f7;
    border-radius: 10px;
}

.columns.gap-is-8 {
    gap: 8em;
}

.columns.gap-is-3 {
    gap: 3em;
}

.columns.gap-is-2 {
    gap: 2em;
}

.bill-count-column-width img {
    margin-top: 7px;
}

.column.is-two-thirds .column.is-one-third .total-bill-count-table th.is-size-4.bill-count-column-width {
    font-size: 3em !important;
}

.column.is-two-thirds .column.is-one-third .is-size-4.bill-count-column-width {
    font-size: 1.7em !important;
}

.field.is-grouped.kassa-button {
    justify-content: center;
    padding-bottom: 2em
}

#basketTotalIncl {
    font-size: 2em
}

#divCategories.is-edit-mode > .button {
    margin-bottom: .5rem !important
}

.product-is-disabled {
    background-image: url(../img/disabled.png);
    background-size: 35px;
    color: rgba(0, 0, 0, .4)
}

.product-edit-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px
}

.column.is-one-eight .product-is-active .product-edit-icons, .column.is-one-eight .product-is-disabled .product-edit-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.category-is-disabled {
    opacity: .5
}

.column.is-one-eight .content {
    padding-bottom: 25px
}

.is-gap {
    gap: 10px
}

.product-is-clickable, .category-is-clickable .icon-is-clickable {
    cursor: pointer
}

.is-not-clickable {
    cursor: not-allowed
}

.searchable-dropdown {
    position: relative
}

.search-input {
    width: 100%;
    padding: 5px;
}

.dropdown-list {
    position: absolute;
    z-index: 10;
    width: 20vw;
    background-color: #fff;
    border: 1px solid #ccc;
    list-style: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    display: none;
    max-height: 250px;
    overflow-y: auto;
}

    .dropdown-list li {
        cursor: pointer;
        padding: 5px 15px;
        font-size: 1em;
        font-weight: 400;
    }

        .dropdown-list li:hover {
            background-color: #f2f2f2;
        }

.disabled {
    pointer-events: none;
    /*This makes it not clickable opacity: .6;
    this grays it out to look disabled
    */
}

input.disabled {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    color: #666;
    cursor: not-allowed;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.profile-navbar {
    z-index: 0;
}

a {
    color: #0077cc;
}

    a.zipcode {
        color: #0077cc;
        font-size: 1.1em;
    }

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    -webkit-box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05)
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 25px;
    padding: 3px;
}

i.is-clickable.fa-2x {
    padding-right: 5px;
    padding-left: 5px;
}

.is-right.is-padded {
    padding-right: 40px;
}

.is-right.is-padded-validate {
    padding-right: 90px;
}

.grid-size .icon-column {
    width: 35px;
}

.grid-size .br-5 {
    border-radius: 5px;
    gap: 0
}

header.title .fa-pencil {
    width: 40px;
    height: 40px;
    background-color: #bbb;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
    position: relative;
    top: -10px;
}

header.title .fa-cancel {
    width: 40px;
    height: 40px;
    background-color: var(--danger);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
    position: relative;
    top: -10px;
}

.searchable-dropdown > .search-input {
    margin-bottom: 0;
}

.dropdown-item {
    font-size: 1.1em !important;
    color: #4a4a4a !important;
    cursor: pointer;
}

    .dropdown-item .description {
        font-size: 0.7em;
    }

.product-is-disabled .content, .product-is-disabled .content .product-edit-icons, .product-is-disabled .content .product-edit-icons i {
    opacity: 1
}

.input.is-large {
    min-width: 20vw;
}

.input-label {
    /*    min-width: 5vw;
*/ font-size: var(--font-size);
    display: block;
}



.button.is-left {
    float: left;
}

.button.is-right {
    float: right;
}

.tile.right {
    float: right;
}

.notifications-container {
    /*overflow-y: auto;
    height: 700px;*/
    overflow-y: hidden;
    overflow-x: hidden;
}

.only-for-accessibility {
    display: none;
}

.notification-icon.button {
    background-color: var(--e2e-dark);
    border-color: black;
    width: 78px;
    height: 78px;
    /*margin: -0.75em -0.55em -0.75em 0;*/
    font-size: 24px;
    color: white;
    border-radius: 0;
}

.column.is-one-eight .title {
    text-align: center;
}

/*TODO replace with navigation icon default style that is selected or not if on the correct page */
#navHome, #navOrderOverview, #navCustomerScreen, #navCashRegisterOverview, #navUserOverview,
#navZipCodeConfiguration, #navPrinterOverview, #navEmailConfiguration, #navTemplateOverview,
#navCashRegisterStatus, #navCashRegisterHistoryOverview, #navTestScanPage, #navLogout, #navLocationOverview,
#navProductOverview, #navPaymentExportOverview, #navSalesByCostCenterReport, #navAccountancyOverview, #navInvoicingGroupOverview, #navInvoicingOverview,
#navProductAmountReportOverview, #navGoogleBucketOverview, #navTicketAuditOverview, #navProductAmountReportOverview,
#navVisitorsPerPeriodReportOverview {
    background-color: var(--e2e-dark);
    border-color: black;
    height: 78px;
    /*margin: -0.75em 0 -0.75em 0;*/
    font-size: 1.3em;
    color: white;
    border-radius: 0;
    width: 70px;
    text-align: center;
    position: relative;
    z-index: 9
}

#navHome {
    background-color: var(--e2e-dark-selected);
    border-color: black;
    height: 78px;
    /*margin: -0.75em 0 -0.75em 0;*/
    font-size: 1.3em;
    color: white;
    border-radius: 0;
}

    #navHome i::before, #navOrderOverview i::before, #navCustomerScreen i::before, #navCashRegisterHistoryOverview i::before,
    #navCashRegisterOverview i::before, #navPrinterOverview i::before,
    #navEmailConfiguration i::before, #navTemplateOverview i::before, #navCashRegisterStatus i::before, #navLogout i::before,
    #navLocationOverview i::before, #navProductOverview i::before, #navPaymentExportOverview i::before,
    #navTicketAuditOverview i::before, #navProductAmountReportOverview i::before,
    #navSalesByCostCenterReport i::before, #navAccountancyOverview i::before, #navInvoicingGroupOverview i::before, #navInvoicingOverview i::before,
    #navVisitorsPerPeriodReportOverview i::before {
        opacity: 1 !important;
    }

#userNameDisplay, #saleSessionName, #accessMenuItem {
    background-color: var(--e2e-black);
    border-color: var(--e2e-black);
    height: 78px;
    /*margin: -0.75em 0 -0.75em 0;*/
    font-size: 1.0em;
    color: white;
    border-radius: 0;
    text-align: center;
    margin-top: -15px;
    margin-bottom: -13px;
    gap: 15px;
}

#user-dropdown-menu {
    min-width: 185%;
    transform: translateX(-30%);
    border-radius: 8px;
}

#cashregister-dropdown-menu {
    min-width: 235%;
    transform: translateX(-30%);
    border-radius: 8px;
}

#cash-betaling p {
    font-size: 16px;
}

.checkout-title {
    font-size: 1.1em !important;
    font-weight: 700;
    color: #000
}

.control.is-expanded.has-icons-left.has-icons-right .fas.fa-search {
    position: absolute;
    top: 12px;
    left: 13px;
}

.control.has-icons-left .icon.is-left {
    left: 0;
    font-size: 20px;
    /* height: 2.5em !important;
    background: yellow; */
    width: 30px !important;
    height: 55px !important;
}

.control.has-icons-right .input, .control.has-icons-right .select select {
    font-size: var(--font-size);
}

.control.has-icons-left .icon, .control.has-icons-right .icon {
    height: 3.4em !important;
    width: 3.4em !important;
    z-index: 4;
}

.basket-paused-baskets {
    max-height: 90%;
    overflow-x: hidden;
    overflow-y: auto;
}

.content-block {
    height: calc(100vh - 215px);
}

.header > .column {
    display: flex;
}

.header .column.pr-5.is-flex.is-align-items-center {
    max-width: 150px;
}

.category-is-selected {
    -webkit-box-shadow: inset 0 0 0 3px var(--e2e-dark) !important;
    -moz-box-shadow: inset 0 0 0 3px var(--e2e-dark) !important;
    box-shadow: inset 0 0 0 3px var(--e2e-dark) !important;
}

.is-category, .is-category:hover, .is-category.is-hovered {
    color: var(--e2e-dark);
}

.control.has-icons-right .entry-validation:has(.fa-check) {
    background-color: var(--success);
    color: white !important;
    border-radius: 0 3px 3px 0;
}

.control.has-icons-right .entry-validation:has(.fa-exclamation-triangle) {
    background-color: var(--danger);
    color: white !important;
}

.dropdown .entry-validation:has(.fa-check) {
    background-color: var(--success);
    color: white !important;
    border-radius: 0 7px 7px 0;
    height: 3.6em !important;
    width: 3.7em !important;
    font-size: 15px !important;
    margin-left: -13px;
    position: sticky;
}

.dropdown .entry-validation:has(.fa-exclamation-triangle) {
    background-color: var(--danger);
    color: white;
    border-radius: 0 3px 3px 0;
    height: 3.7em !important;
    width: 3.7em !important;
    font-size: 15px !important;
    margin-left: -13px;
    position: sticky;
}

#basket .field-body .field .control .fa-ban {
    color: var(--danger);
    font-size: 26px;
    padding: 0 7px !important;
    line-height: 19px;
    max-height: 45px
}

#basket .field-body .control .fa-ban {
    color: var(--danger);
    font-size: 26px;
    padding: 0 7px !important;
    line-height: 19px;
    max-height: 45px
}

.basket-line-edit-button {
    height: 45px;
    width: 88px;
}

.payment-amount-input .fa-angle-up:before {
    content: "\f106";
    background-color: #f7f7f7;
    font-size: .6em;
    display: block;
    height: 58px;
    width: 58px;
    line-height: 58px;
    text-align: center;
    top: 5px;
}

.payment-amount-input .fa-angle-down:before {
    content: "\f107";
    background-color: #f7f7f7;
    font-size: .6em;
    display: block;
    height: 58px;
    width: 58px;
    line-height: 58px;
    text-align: center;
    margin-left: -5px;
    margin-right: 72px;
    top: 5px
}

#payment-amount-input {
    min-height: 70px;
}

.return-amount {
    font-size: 1.0em;
    font-weight: 600;
    color: black;
}

.e2e-table .table td, .e2e-table .table th {
    font-size: 20px;
}

.e2e-table .fa-solid.fa-pencil-alt {
    padding: 16px 19px;
    background-color: var(--e2e-light);
    color: white;
    margin: 2px;
}

.e2e-table .fa-solid.fa-delete {
    padding: 16px 19px;
    background-color: var(--danger);
    color: white;
    margin: 2px;
}

.e2e-table .fa-solid.fa-delete-disabled {
    padding: 16px 19px;
    background-color: var(--reddish);
    color: white;
    margin: 2px;
}

.e2e-table .fa-solid.table-action-button-green {
    padding: 16px 19px;
    background-color: var(--e2e-light);
    color: white;
    margin: 2px;
}

.e2e-table .fa-solid.table-action-button-red {
    padding: 16px 19px;
    background-color: var(--danger);
    color: white;
    margin: 2px;
}

.e2e-table .fa-solid.table-action-button-blue {
    padding: 16px 19px;
    background-color: var(--blue);
    color: white;
    margin: 2px;
}

.e2e-table .delete {
    display: inline-block !important;
}

.fa-solid.action-button-blue {
    padding: 16px 19px;
    background-color: var(--blue);
    color: white;
    margin: 2px;
    border-radius: 7px;
}

.fa-solid.action-button-green {
    padding: 16px 19px;
    background-color: var(--e2e-light);
    color: white;
    margin: 2px;
}

.bill-count-table th {
    vertical-align: middle;
}

.payment-icon-column {
    width: 80px;
    min-width: 80px;
}

.bill-count-table td {
    vertical-align: middle;
    padding: 5px;
}

    .bill-count-table td input {
        font-size: 20px;
    }

.bill-count-value {
    text-align: right !important;
}

.bill-count-column-width {
    width: 6em;
}

.payment-amount-input .is-right.is-padded-validate {
    padding-right: 95px;
}

.pay-received .fa-angle-up:before {
    content: "\f106";
    background-color: #f7f7f7;
    font-size: .6em;
    display: block;
    height: 58px;
    width: 58px;
    line-height: 58px;
    text-align: center;
}

.pay-received .fa-angle-down:before {
    content: "\f107";
    background-color: #f7f7f7;
    font-size: .6em;
    display: block;
    height: 58px;
    width: 58px;
    line-height: 58px;
    text-align: center;
    margin-left: -5px;
    margin-right: 72px;
}

.pay-received p {
    font-size: .7em;
}

.pay-received {
    margin-top: 5px;
    margin-bottom: 0 !important;
}

    .pay-received .control.has-icons-right .icon.is-right {
        /*right: -26px;*/
        right: 0
    }

#PaymentAmountReceived_Currency .has-error {
    margin-top: 17px;
    position: absolute;
}

#basket .buttons .button {
    font-size: 28px !important;
}

.is-fullwidth {
    width: 100%;
}

.total-price.price .input-label {
    font-size: 30px !important;
}

.total-price.price .price-input {
    font-size: 50px !important;
    font-weight: bold;
    color: black;
}

.btw-price.price {
    margin: 20px 0;
    opacity: .7;
}

#orderPrintTicket.is-light {
    margin: 10px 0;
    background-color: var(--warning);
    color: #363636;
    font-size: 1.6em;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 200ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1
}

.htmx-request.htmx-indicator {
    opacity: 1
}

#basketPausedSummary {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    border-bottom: groove;
}

    #basketPausedSummary .basket-info-label {
        padding-left: 29px;
        font-weight: bold;
        font-size: 23px;
    }

    #basketPausedSummary .basket-line-totalprice {
        text-align: right;
    }

    #basketPausedSummary .basket-line-button-delete {
        float: right;
    }

#orderAccessSummary {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}

    #orderAccessSummary .basket-line-link {
        float: right;
    }

#orderCustomerButtons {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    width: 60%;
    float: right;
}

    #orderCustomerButtons .basket-line-link {
        float: right;
    }

button.badge-link-icon {
    width: 100%;
}

.linkedCard {
    font-size: var(--font-size) !important;
}

.linkedCardtrash {
    width: 30px !important;
    height: 30px !important;
}

.delete-linkedCard {
    font-size: 18px !important;
}

#basketSummary th {
    /*noinspection CssInvalidPropertyValue*/
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
}

#basketPriceSummary {
    position: absolute;
    right: 0;
    bottom: 62px;
}

.basketPriceSummary-checkout {
    bottom: -12px !important;
}

.basket-line-price {
    text-align: right !important;
}

    .basket-line-price span {
        white-space: nowrap;
    }

.is-highlighted {
    -webkit-animation: fadeOut 5s;
    animation: fadeIn 5s, fadeOut 5s;
    animation-fill-mode: forwards;
}

.basket-summary-table td {
    vertical-align: middle !important;
}

.notifications-container .box {
    margin: 10px 10px 20px;
}

    .notifications-container .box .columns .column:nth-child(3) {
        display: flex;
        align-items: center;
        justify-content: end;
        padding-right: 50px;
    }

    .notifications-container .box .columns .column:nth-child(2) .content:nth-child(1) {
        font-size: 1.7em;
        margin-bottom: 0px;
        margin-top: 15px;
    }

.swal2-icon {
    margin: 10px;
}

.search .control.has-icons-right .input, .search .control.has-icons-right .select select {
    font-size: 16px;
}

.pos-page-title {
    margin-bottom: 0 !important;
    padding: 5px 5px 5px 15px;
    border-radius: 0;
}

    .pos-page-title .icon {
        margin: 15px;
    }

.is-vcentered {
    vertical-align: middle;
}

.is-36x36 {
    height: 36px !important;
    width: 36px !important;
}

.is-100x100, .payment-provider-button {
    width: 90px;
    max-width: 90px;
    height: 90px;
    max-height: 90px;
    margin: 1px;
}

.pause-button, .return-button {
    width: 61px;
    max-width: 61px;
    height: 61px;
    max-height: 61px;
    margin: 3px;
}

.basket-total-to-pay, .customer-total-to-pay {
    padding: 0;
}

.basket-total-to-pay-label {
    /*padding: 0 !important;*/
}

.customer-total-to-pay-label, .basket-total-to-pay-label {
    font-size: 30px !important;
}

.basket-total-to-pay-currency {
    padding-left: 0 !important;
    font-size: 50px !important;
}

.customer-total-to-pay-currency, .basket-total-to-pay-currency {
    text-align: right !important;
    font-size: 50px !important;
}

.customer-total-to-pay-currency, .customer-total-to-pay-label {
    padding-right: 0.3em !important;
    padding-left: 0.3em !important;
    line-height: 15px !important;
}

.category-edit-icon, .product-edit-icon {
    /* border-bottom: 2px solid #ddd;*/
    border-radius: 0;
}

#fullCategoryHeader {
    border-bottom: 2px solid #ddd;
}

.button, .is-grid-item, .input, input, .textarea, .pagination button, .action-buttons i {
    border-radius: 8px;
}


.overlay-print-buttons {
    float: right;
    margin-right: 104px;
    max-width: 360px
}

    .overlay-print-buttons > * {
        width: 100%;
        margin-top: 20px;
    }

    .overlay-print-buttons .tile.is-vertical > .tile.is-child {
        margin-bottom: 1rem !important;
        font-size: 26px !important;
    }

    .overlay-print-buttons .tile.is-parent {
        padding: .55rem
    }

#tableRows td {
    vertical-align: middle;
}

.sidebar {
    position: fixed;
    top: 77px;
    z-index: 9;
    width: 20vw;
    height: 100vh;
    background-color: var(--e2e-dark-selected);
    right: 0;
    transform: translate(110%);
    transition: 1s;
}

    .sidebar.active {
        transform: translate(0px);
        transition: 1s;
        /*overflow: auto;*/
        height: calc(100% - 77px);
    }

    .sidebar a {
        width: 100% !important;
        text-align: left !important;
        display: flex;
        gap: 10px;
        justify-content: start;
    }

        .sidebar a i {
            width: 50px;
            display: flex;
            justify-content: center;
        }

button.menu-button {
    background-color: red;
    color: white;
    border-radius: 0;
    border: 0px solid white;
    height: 76px;
    width: 78px;
    margin-left: 2px;
    margin-top: 2px;
    font-size: 24px;
}

.tabs.is-toggle a {
    padding: 0.5em 1em;
}

    .tabs.is-toggle a:hover {
        color: black;
    }

.input-label-uppercase {
    text-transform: uppercase;
}

.content table td.payment-title-column {
    font-size: 20px;
}

.content table th.payment-title-column {
    border: 0px;
}

.content table tr.payment-last-row td, .content table tr.payment-last-row th {
    padding-bottom: 40px;
    border: 0px;
}

.validation-summary-errors li {
    background-color: red;
    color: white;
    padding: 10px 15px;
    font-size: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    margin-right: 10px;
    width: fit-content;
}

.validation-summary-errors ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: auto;
}

.column .field-item {
    margin-bottom: 20px;
}

.icon-picker-modal__content .icon-element i, .icon-picker-modal__content .icon-element svg {
    font-size: 25px;
    color: #909090;
    height: 40px;
    width: 40px;
}

.icon-picker-modal__content .icon-element {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background-color: rgba(0,0,0,0);
    height: 67px;
    width: 67px;
    cursor: pointer;
    transition: background-color .3s ease,border-color .3s ease;
}

.icon-picker-modal__content {
    display: grid;
    grid-template-columns: repeat(7, 68px);
    grid-gap: 8px;
    overflow-y: scroll;
}

.icon-picker-modal__dialog {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    height: 540px;
    min-width: 600px;
    opacity: 0;
    transform: translate(-50%, -55%);
    transition: transform .3s ease-in-out,opacity .3s ease;
    padding: 24px;
    background-color: #fff;
    border-radius: 16px;
}


.mt-10 {
    margin-top: 50px;
}
/* Default styles for the input */
input.editable-label {
    border: none; /* Remove borders */
}

i.editable-label {
    margin-top: -15px;
    margin-right: -100px;
    position: relative;
}

/* Styles for the input when it's in focus */
input.editable-label:focus {
    border: 1px solid;
    border-radius: 8px;
    border-color: #dbdbdb
}

/* Hide the icon when the input is not in focus */
input.editable-label + .icon {
    display: none;
}

/* Show the icon when the input is in focus */
input.editable-label:focus + .icon {
    display: inline-flex;
}

input.editable-label.input-validation-error {
    border: 1px solid;
    border-color: #f14668 !important;
}

    input.editable-label.input-validation-error + .icon {
        display: inline-flex !important;
    }

.icon-picker-buttons {
    display: inline-flex;
    width: 100%;
}

    .icon-picker-buttons > .icon-picker-button {
        width: 100%;
    }

header.title label {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

header.title .input.editable-label {
    font-size: 3rem;
    font-weight: bold;
    padding: 5px 0;
    line-height: 100%;
    height: auto;
    transition: ease-in-out .5s;
    border: 1px solid #fff;
}

    header.title .input.editable-label:focus {
        padding: 5px 0px 5px 15px;
        border: 1px solid #ddd;
    }

header.title .dropdown-list {
    border: 0px solid white;
}

header.title .fa-pencil {
    width: 45px;
    height: 45px;
    background-color: #bbb;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 50%;
    position: relative;
    top: 6px;
    min-width: 45px;
}

header.title .control.has-icons-right .entry-validation:has(.fa-check) {
    background-color: var(--success);
    color: white !important;
    border-radius: 0 3px 3px 0;
    top: 9px;
    right: -85px;
    border-radius: 30px;
    width: 45px !important;
    height: 45px !important;
}

.select .dropdown-trigger .button {
    min-height: 54px;
    min-width: 250px;
    justify-content: space-between;
}

    .select .dropdown-trigger .button > span {
        font-size: var(--font-size);
    }

.select dropdown-trigger + .dropdown-menu a.dropdown-item, .select dropdown-trigger + .dropdown-menu label.dropdown-item {
    padding-right: 3rem;
    text-align: inherit;
    white-space: nowrap;
    width: 100%;
    padding: 20px 10px !important;
    /* border-bottom: 1px dotted; */
    border-bottom: 1px dotted #ccc;
}

.accountacy-wrap .select .dropdown-trigger + .dropdown-menu .dropdown-content {
    padding: 1rem !important;
    min-width: 250px;
    cursor: pointer;
    position: absolute;
    overflow: auto;
    max-height: 450px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: translateY(-65%);
    transform: translateY(-65%);
    -webkit-transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
    transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
    min-height: 200px;
}

#badges-dropdown-menu-content.dropdown-content {
    padding: 1rem !important;
    min-width: 350px;
    cursor: pointer;
    position: absolute;
    overflow: auto;
    max-height: 450px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    -webkit-transform: translateY(-65%);
    transform: translateY(-65%);
    -webkit-transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
    transition: all 0.15s cubic-bezier(0.35, 0, 0.25, 1);
    min-height: 200px;
}

.multiselect .dropdown-trigger .button {
    min-height: 54px;
    min-width: 250px;
    padding-right: 1.5em;
}

    .multiselect .dropdown-trigger .button:focus + .entry-validation:has(.fa-check), .select .dropdown-trigger .button:focus + .entry-validation:has(.fa-check) {
        box-shadow: 0 0 0 2px var(--success);
    }

    .multiselect .dropdown-trigger .button > span {
        font-size: var(--font-size);
    }

.multiselect dropdown-trigger + .dropdown-menu a.dropdown-item, .multiselect dropdown-trigger + .dropdown-menu label.dropdown-item {
    padding-right: 3rem;
    text-align: inherit;
    white-space: nowrap;
    width: 100%;
    padding: 20px 10px !important;
    /* border-bottom: 1px dotted; */
    border-bottom: 1px dotted #ccc;
}

.multiselect .dropdown-trigger + .dropdown-menu .dropdown-content {
    padding: 1rem !important;
    min-width: 250px;
}

.container {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    margin: 0 auto;
    width: auto;
}

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

#userTitle, header.title > span {
    font-weight: bold;
    font-size: 3rem;
}

.form-buttons {
    width: 100%;
    display: flex;
    margin-top: 30px;
}

.nav-button {
    background-color: var(--e2e-dark);
    border-color: black;
    height: 78px;
    /*margin: -0.75em 0 -0.75em 0;*/
    font-size: 1.3em;
    color: white;
    border-radius: 0;
    width: 78px;
    text-align: center;
    position: relative;
    z-index: 9;
}

.nav-submenu {
    background-color: purple;
}

.nav-button + ul {
    position: fixed;
    right: -100%;
    z-index: -1;
    top: 0;
    transition: ease-in-out 1s;
    opacity: 0;
}

.active .nav-button.is-active + ul {
    right: 20vw;
    transition: ease-in-out .5s;
    opacity: 1;
}

.input-pass {
    -webkit-text-security: disc;
}

.button.show-password {
    height: 54px;
    display: flex;
    align-items: center;
    font-size: 24px;
    width: 54px;
}

.column.is-child.is-one-fifth .product-is-active .title {
    font-size: 1.5rem;
    text-align: center;
}

.column.is-child.is-one-fifth .product-is-active .title {
    font-size: 1.5rem;
    text-align: center;
}

.overlay-content.box > form {
    height: 100%;
}

.overlay-buttons {
    max-width: 420px;
    position: absolute;
    bottom: 0;
    right: 0px;
}

.overlay-content.box > form {
    height: 100%;
}

.right_pane.tile .overlay-buttons {
    max-width: 420px;
    position: absolute;
    bottom: 15px;
    right: -10px;
}

    .right_pane.tile .overlay-buttons .button.is-large {
        font-size: 28px;
    }

.left_pane.tile .overlay-buttons {
    max-width: 420px;
    position: absolute;
    bottom: 0;
    left: -10px;
}

.container:not(.is-max-desktop):not(.is-max-widescreen) {
    max-width: 100%;
    height: 100%;
}

.validation-summary-errors + .container:not(.is-max-desktop):not(.is-max-widescreen) {
    height: calc(100% - 60px);
}

.grid-size-small + label::before {
    content: "/img/small.png"
}

label[for=grid-size-small] {
    background-image: url("/img/small.png");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    padding: .75rem 2.5rem !important;
}

label[for=grid-size-medium] {
    background-image: url("/img/medium.png");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    padding: .75rem 2.5rem !important;
}

label[for=grid-size-large] {
    background-image: url("/img/large.png");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    padding: .75rem 2.5rem !important;
}

    label[for=grid-size-small] label::before, label[for=grid-size-medium] label::before, label[for=grid-size-large] label::before {
        content: none;
    }


.grid-size-large + label .fa-square::before {
    content: "~/img/large.png"
}

label[for=iasxuhr-size-Small], label[for=iasxuhr-size-Medium], label[for=iasxuhr-size-Large] {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

#tblCashRegister .tag:not(body).is-danger {
    background-color: #f14668;
    color: #fff;
    padding: 16px 19px;
    font-size: 20px;
}

#tblCashRegister .tag:not(body).is-success {
    background-color: #48c78e;
    color: #fff;
    padding: 16px 19px;
    font-size: 20px;
}

.pos-overlay tabs a {
    padding: 15px 30px !important;
}

label.input-label-uppercase {
    font-size: 2em;
}

main.pb-3 {
    padding-bottom: 0px !important;
    position: relative;
}



.radio-section {
    box-sizing: border-box;
    display: block;
    border: none;
    min-width: 0;
    background-color: #FFF;
}

.toggle-radio {
    box-sizing: border-box;
    font-size: 0;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: stretch;
}

    .toggle-radio > input {
        width: 0;
        height: 0;
        position: absolute;
        left: -9999px;
    }

        .toggle-radio > input + label {
            margin: 0;
            padding: .75rem 2rem;
            box-sizing: border-box;
            position: relative;
            display: inline-block;
            border: solid 1px #DDD;
            background-color: #FFF;
            font-size: 1rem;
            font-weight: 600;
            text-align: center;
            box-shadow: 0 0 0 rgba(255,255,255,0);
            transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
        }

        .toggle-radio > input:hover + label {
            border-color: var(--darkNavy);
        }

        .toggle-radio > input:checked + label {
            background-color: var(--teal2);
            color: #FFF;
            box-shadow: 0 0 10px rgba(var(--teal1), .5);
            border-color: var(--teal2);
            z-index: 1;
        }

        .toggle-radio > input:focus + label {
            outline: dotted 1px #CCC;
            outline-offset: .45rem;
        }

.p-view {
    z-index: 9999;
    position: absolute;
    right: 60px;
    top: 19px;
}

input::-webkit-input-placeholder {
    color: grey !important;
}

input::-moz-placeholder {
    color: grey !important;
}

input::placeholder {
    color: grey !important;
}

.refresh-printer {
    color: #008000;
}

.icon-black {
    color: black !important;
}

.header.is-fixed-top > .is-align-items-center {
    gap: 0px;
    font-size: 20px;
}

.control.has-icons-right .icon.is-right {
    border-radius: 0 7px 7px 0;
}

.input-validation-error {
    -webkit-box-shadow: 0px 0px 0px 3px rgba(229,34,34,1);
    -moz-box-shadow: 0px 0px 0px 3px rgba(229,34,34,1);
    box-shadow: 0px 0px 0px 3px rgba(229,34,34,1);
    border-radius: 10px 10px;
}
/*.input-validation-error + .entry-validation{
    border-radius: 0 10px 0 0;
}*/
.help.is-danger {
    padding: 0px;
    font-size: 14px;
    /*TODO style properly ! display:none !important;*/
    background-color: transparent !important;
}

    .help.is-danger > p {
        padding: 5px;
        margin-bottom: -1.1em;
    }

#checkoutNewPayments .help.is-danger > p {
    margin-bottom: 0 !important;
}

.overlay-content.box > form > .container {
    height: 100% !important;
}

    .overlay-content.box > form > .container main.pb-3 {
        position: unset;
    }

.control.has-icons-left .input, .control.has-icons-left .select select {
    padding-left: 29px;
}

.nav-submenu .button:active, .nav-submenu .button.is-active {
    background-color: var(--e2e-dark-selected) !important;
    color: #fff;
}

.nav-submenu > .button::before {
    display: block;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid white;
    content: "";
    position: absolute;
    left: 15px;
    transition: ease-in-out .3s;
}

.nav-submenu > .button.is-active::before {
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 7px solid var(--e2e-dark-selected);
    left: -7px;
    transition: ease-in-out .3s;
}

.config-submenu a {
    background-color: var(--e2e-black) !important;
    color: #fff;
}

.nav-submenu .menu-button:hover, .nav-submenu .menu-button.is-hovered {
    border-color: var(--e2e-dark-selected);
    color: #fff !important;
}

.pos-overlay main.pb-3 {
    height: 100%;
}

    .pos-overlay main.pb-3 .left_pane.tile input {
        margin-right: 0.5em;
    }

.is-e2e-lightgrey .title {
    padding: 15px;
    border-bottom: 0;
}

.validation-summary-errors {
    display: none;
}

.custom-errors {
    display: inherit;
}

.dropdown-content {
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: .5rem;
}

.overlay-content.box > form > .container {
    height: 100% !important;
}

    .overlay-content.box > form > .container main.pb-3 {
        position: unset;
    }

.control.has-icons-left .input, .control.has-icons-left .select select {
    padding-left: 29px;
}

.nav-submenu .button:active, .nav-submenu .button.is-active, .config-submenu a {
    border-color: #000;
    color: #fff;
}

.nav-submenu .menu-button:hover, .nav-submenu .menu-button.is-hovered {
    border-color: var(--e2e-dark-selected);
    color: #fff;
}

.pos-overlay main.pb-3 {
    height: 100%;
}

    .pos-overlay main.pb-3 .left_pane.tile input {
        margin-right: 0.5em;
    }

.config-submenu a {
    padding-left: 1rem !important;
    min-width: 345px;
}

.validityperiod {
    margin-left: 2rem;
}

    .validityperiod input {
        max-width: 200px;
    }

    .validityperiod p.control {
        margin-bottom: 0;
    }

.title-icon {
    height: 67px;
}

header.title .control.has-icons-right .entry-validation {
    height: 67px !important;
}

header .help.is-danger {
    margin-top: 0 !important;
    font-weight: normal;
}

.tab-item a {
    font-size: 24px;
    padding: 15px;
}

.tabs ul {
    margin-left: 0;
}

.bills-header {
    min-width: 200px;
}

#billsContainer .overlay-buttons {
    position: relative;
    left: 0;
}

td.orderaccess-link {
    vertical-align: top !important;
}

td.customer-link {
    vertical-align: top !important;
}

td.delete-linkedCard {
    width: 20%;
}

table.not-striped tbody tr {
    background-color: transparent !important;
}

    table.not-striped tbody tr td {
        border: none;
    }

.scroll-left-button {
    background-color: var(--e2e-light);
    border-radius: 8px;
    color: white;
    position: absolute;
    left: 8px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 24px;
    margin: 13px 7px 7px 7px;
    z-index: 1;
}

.scroll-right-button {
    background-color: var(--e2e-light);
    border-radius: 8px;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    padding-bottom: 24px;
    margin: 13px 7px 7px 7px;
    position: absolute;
    right: 175px;
    z-index: 1;
}

.category-container {
    display: contents;
}

.profile-nav-selected {
    font-weight: 800;
}

.numberofpersons-popup {
    width: 880px;
    position: relative;
    top: 50%;
    -webkit-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

.search-mode-text {
    min-height: 58px;
    border: 1px solid #ddd;
}

.search-mode-label {
    font-size: 1.4em;
}

.search-container {
    overflow-y: scroll;
    max-height: 755px;
    /*margin-top: 255px;*/
}

.alert {
    position: relative;
    padding: 1rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.alert-heading {
    color: inherit;
}

.alert-link {
    font-weight: 700;
}

.alert-dismissible {
    padding-right: 3rem;
}

    .alert-dismissible .btn-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 2;
        padding: 1.25rem 1rem;
    }


.btn-close {
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: 0.25em 0.25em;
    color: #000;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: 0.25rem;
    opacity: 0.5;
}

    .btn-close:hover {
        color: #000;
        text-decoration: none;
        opacity: 0.75;
    }

    .btn-close:focus {
        outline: 0;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
        opacity: 1;
    }

    .btn-close:disabled, .btn-close.disabled {
        pointer-events: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        opacity: 0.25;
    }

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.control-disabled {
    pointer-events: none;
    opacity: 30%;
}

/*Bulma overrides*/
/*.message.is-warning {
    color: hsl(42deg, 100%, 23%) !important;
}

    .message.is-warning .message-header {
        background-color: hsl(42deg, 100%, 53%) !important;
    }

    .message.is-warning .message-body {
        background-color: hsl(42deg, 100%, 96%) !important;
    }*/

.message.is-danger {
    color: hsl(348deg, 100%, 40%) !important;
}

    .message.is-danger .message-header {
        background-color: var(--danger) !important;
    }

    .message.is-danger .message-body {
        background-color: hsl(348deg, 100%, 96%) !important;
    }

.message-header {
    border-radius: 3px;
}
/*.message.is-info {
    color: hsl(198deg, 100%, 25%) !important;
}

    .message.is-info .message-header {
        background-color: hsl(198deg, 100%, 70%) !important;
    }

    .message.is-info .message-body {
        background-color: hsl(198deg, 100%, 96%) !important;
    }*/

.message.is-success {
    color: hsl(153deg, 53%, 23%) !important;
}

    .message.is-success .message-header {
        background-color: var(--success) !important;
    }

.message.is-info .message-header {
    background-color: var(--blue) !important;
}

.message.is-success .message-body {
    background-color: hsl(153deg, 53%, 96%) !important;
}
/**/
.is-gap {
    gap: 15px;
}

.is-fifty {
    width: 50%;
}

.button-column {
    margin-top: -67px;
}

.textarea {
    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
    display: grid;
}

    .textarea::after {
        /* Note the weird space! Needed to preventy jumpy behavior */
        content: attr(data-replicated-value) " ";
        /* This is how textarea text behaves */
        white-space: pre-wrap;
        /* Hidden from view, clicks, and screen readers */
        visibility: hidden;
    }

    /*TODO implement auto resize https://codepen.io/chriscoyier/pen/XWKEVLy*/
    .textarea > textarea {
        /* You could leave this, but after a user resizes, then it ruins the auto sizing */
        resize: none;
        /* Firefox shows scrollbar on growth, you can hide like this. */
        overflow: hidden;
    }

    .textarea > textarea,
    .textarea::after {
        /* Identical styling required!! */
        border: 1px solid black;
        padding: 0.5rem;
        font: inherit;
        /* Place on top of each other */
        grid-area: 1 / 1 / 2 / 2;
    }



textarea {
    max-height: 300px;
}

.is-help, .location-select {
    margin-top: 10px !important;
}


/*dropdown-menu override*/
.multiselect.dropdown .dropdown-menu {
    background-color: white;
    top: 55px !important;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.2);
    height: auto !important;
}

.empty-icon {
    width: 50px;
    display: table-column;
}

.datetimepicker {
    z-index: 999;
}

.has-icons-right .datetimepicker-clear-button {
    right: 50px;
}

.is-normal {
    font-weight: normal;
}

.is-bold {
    font-weight: bold;
}

.search-result-item {
    font-size: 18px !important;
}

    .search-result-item:hover {
        background-color: black;
    }


.customer-search-header {
    position: absolute;
    width: 42%;
    background-color: white;
}

.customer-information-bottom {
    position: absolute;
    bottom: 25px;
}

.invisi-scroll {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

    .invisi-scroll::-webkit-scrollbar { /* WebKit */
        width: 0;
        height: 0;
    }

.dropdown-is-danger {
    position: relative;
    top: -3px;
}

.dropdown-content a {
    padding: 12px 8px;
    text-decoration: none;
    font-size: 30px;
    line-height: 100%;
    color: #818181;
    display: block;
    -webkit-transition: .3s;
    transition: .3s;
    border-bottom: 1px solid #ccc;
}

.dropdown-content {
    background-color: #fff;
    border-radius: 4px;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: .5rem;
    -webkit-box-shadow: 0 .5em 1em -0.125em rgba(10, 10, 10, .1), 0 0px 0 1px rgba(10, 10, 10, .02);
    box-shadow: 0 .5em 1em -0.125em rgba(10, 10, 10, .1), 0 0px 0 1px rgba(10, 10, 10, .02);
}

.dropdown-menu.multiselect-content .is-align-items-center {
    gap: 20px;
    font-size: 20px;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
}

    .dropdown-menu.multiselect-content .is-align-items-center label span {
        font-size: var(--font-size);
    }

.tab-error a {
    color: red !important;
}

    .tab-error a::after {
        content: '!!!';
    }

.visitors-count {
    font-size: 1.2em !important;
}

input[type=checkbox], input[type=radio] {
    vertical-align: baseline;
    cursor: pointer;
}

.gap-0 {
    gap: 0;
}

.field-badge {
    width: 337px;
    margin-top: 30px;
}

.orderaccess-link .field-body {
    margin-bottom: 20px
}

.customer-link .field-body {
    margin-bottom: 20px
}

.badge-title {
    font-size: var(--font-size) !important;
}

.pos-rel {
    position: relative;
}

.pos-abs {
    position: absolute;
}

.badge-link-icon {
    background-color: var(--success);
    /*width: 50px;*/
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    /*   position: absolute;*/
    /*    right: 30px;
    top: 50%;
    margin-top: -25px;*/
    color: white;
    border: 0px solid white;
    padding: 10px 20px !important;
}

    .badge-link-icon span {
        font-weight: normal;
    }

.table-tickets-lines .badge-title {
    border-bottom: 0px solid white;
}

.table-tickets-lines .orderaccess-link .columns .column:nth-child(1), .table-tickets-lines .customer-link .columns .column:nth-child(1) {
    width: 70% !important;
}

.table-tickets-lines .orderaccess-link .columns .column:nth-child(2), .table-tickets-lines .customer-link .columns .column:nth-child(2) {
    width: 30% !important;
}

td.orderaccess-link, td.customer-link {
    padding-left: 0;
}

.basket-badge-link {
    /* max-width: 30%;*/
}

.table-box {
    background-color: #fff;
    border-radius: 6px;
    -webkit-box-shadow: 0 .5em 1em -0.125em rgba(10, 10, 10, .1), 0 0px 0 1px rgba(10, 10, 10, .02);
    box-shadow: 0 .5em 1em -0.125em rgba(10, 10, 10, .1), 0 0px 0 1px rgba(10, 10, 10, .02);
    color: #4a4a4a;
    padding: 1.25rem;
    display: grid;
    margin: 0 10px 20px;
}

.table-is-scrollable {
    overflow-y: auto !important;
}

.mb-10 {
    margin-bottom: 100px !important;
}

.mb-8 {
    margin-bottom: 80px !important;
}

.mb-7 {
    margin-bottom: 60px !important;
}

p:not(.overview-control) .datetimepicker-dummy,
p:empty .datetimepicker-dummy {
    height: 55px !important;
}


    p:not(.overview-control) .datetimepicker-dummy .datetimepicker-dummy .datetimepicker-dummy-wrapper::before, .datetimepicker-dummy .datetimepicker-dummy-wrapper:before,
    p:empty .datetimepicker-dummy .datetimepicker-dummy .datetimepicker-dummy-wrapper::before, .datetimepicker-dummy .datetimepicker-dummy-wrapper:before {
        top: unset !important;
    }

p:not(.overview-control) .datetimepicker-dummy-wrapper,
p:empty .datetimepicker-dummy-wrapper {
    border-radius: 7px !important;
}

.amount-returned > p {
    text-align: right;
}

td.has-text-centered {
    max-width: 300px;
}

.top-controls .columns.is-multiline {
    margin-left: 22px;
}

.basket-total-to-pay-currency.has-text-right > p {
    margin-left: 10px;
}

.tabs.is-toggle li.is-active.tab-error a {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: #fff !important;
}

#paymentsInfoTable .input-label-uppercase {
    font-size: 35px;
    margin-bottom: 15px;
}

#basket.checkout.ticket-links {
    overflow-y: auto;
}

#PrinterStatus {
    margin-left: 60px;
}

.overview-toggle {
    margin-left: 1.8rem !important;
}

.colums.accountacy-wrap {
    display: flex;
    flex-wrap: wrap;
}

    .colums.accountacy-wrap .column .field-item {
        margin-bottom: 0px !important;
        display: block !important;
    }

    .colums.accountacy-wrap .column {
        margin-bottom: 0px !important;
        flex-basis: 50%;
    }

.date-wrapper .datetimepicker.is-datetimepicker-default .datetimepicker-container::after, .date-wrapper .datetimepicker.is-datetimepicker-default .datetimepicker-container::before {
    bottom: -23px !important;
    left: 15%;
    transform: rotate(180deg);
}

.date-wrapper .datetimepicker {
    bottom: 66px;
}

.date-wrapper.is-flex {
    gap: 20px;
}

    .date-wrapper.is-flex > * {
        flex: 1;
    }

#ticketSessionGrid + .buttons .overlay-buttons {
    right: 17px !important;
}

.navbar {
    background-color: #f8f8f8;
    box-shadow: none !important;
}

.profile-nav-selected {
    background-color: white;
}

.dropdown .input-validation-error + .entry-validation:has(.fa-exclamation-triangle) {
    height: 3.6em !important;
    border-radius: 0 10px 10px 0;
    -webkit-box-shadow: 0px 0px 0px 3px rgba(229,34,34,1);
    -moz-box-shadow: 0px 0px 0px 3px rgba(229,34,34,1);
    box-shadow: 0px 0px 0px 3px rgba(229,34,34,1);
}

#ticketSessionGrid, .overlay-fullheight {
    min-height: calc(100vh - 275px);
}

.export-button {
    background-color: var(--e2e-dark-faded);
    color: white;
    border-color: var(--e2e-dark-faded);
}

#infoContainer {
    height: calc(100vh - 275px);
}

.input-validation-wrapper {
    position: relative;
}

    .input-validation-wrapper > label {
        float: right;
        position: absolute;
        right: -98px;
        top: 11px;
    }

input.number-input {
    max-width: 185px;
}

.dropdown-menu {
    top: 55px;
}

.colums.accountacy-wrap .dropdown-trigger {
    width: 100%
}

    .colums.accountacy-wrap .dropdown-trigger .button {
        min-height: 54px;
        min-width: 250px;
        justify-content: space-between;
        width: calc(100% - 54px);
    }

.colums.accountacy-wrap .dropdown {
    width: 100%;
}

.colums.accountacy-wrap .select {
    width: 100%;
}

[readonly].textarea, [readonly].input {
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0px solid white;
    padding: 0;
    padding-right: 0px;
}

.columns.accountacy-wrap .help.is-danger {
    margin-top: -15px;
}

#billsContainer .columns {
    gap: 5%;
}

.tbxAmountReceived > input {
    max-width: unset;
}
/* Ticket is not visible on end of basket process. This will correct it */
.ticket-content {
    overflow-y: auto;
    height: 96%;
    position: absolute;
}
/* Link tickets on order details can be to large */
.link-tickets-content {
    overflow-y: auto;
    height: 90%;
    /*display:flex;*/
    /*justify-content: end;*/
}

.input-guid {
    min-width: 500px !important;
}

.qs-datepicker-container {
    font-size: 2rem !important;
}

.field-item:has(.radio-section:disabled) {
    opacity: 0.2;
}

.customer-search-button {
    width: 400px;
    background-color: var(--ocre);
}

/* .sass override */
.zipcode.is-light {
    background-color: var(--e2e-light) !important;
    border-color: rgba(0, 0, 0, 0) !important;
    color: #ffffff !important;
}

.mb-75 {
    margin-bottom: 75px;
}

.terminalinfo {
    font-size: .5em;
}

.terminal-text {
    margin-top: 10px !important;
}

.terminal-offline::before {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
    background-color: var(--danger);
    border-radius: 50%;
    animation: blinker 1s linear infinite;
}

.big-modal {
    height: 100vh !important;
    display: flex;
}
.big-modal > .has-text-centered{
    align-items:center;
    align-content:center;
    justify-items: center;
    justify-content: center;
}
.big-frame {
    height: 70vh !important;
    width: 30vw !important;
}